/**
 * Scenario Selector Styling
 *
 * AIDEV-NOTE: TASK-040 - Scenario selector UI component for Aura Financial Dashboard
 * AIDEV-NOTE: TASK-062 - Moved to fixed header bar for always-visible access
 *
 * Features:
 * - Toggle button group (Conservative, Moderate, Optimistic)
 * - Scenario-specific colors (red/blue/green)
 * - Active state with checkmark indicator
 * - Hover tooltips with scenario descriptions (native title attribute)
 * - Responsive design (mobile-first)
 * - Accessibility features (keyboard navigation, focus states)
 * - Portuguese labels
 *
 * @module css/scenario-selector
 * @version 2.0.0
 * @created 2025-10-13
 * @updated 2025-10-27 (TASK-062)
 */

/* ========================================================================
   TASK-062: Header Container for Scenario Selector
   ======================================================================== */

/* AIDEV-NOTE: Header-specific container for scenario selector (always visible) */
.scenario-selector-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  /* Desktop: positioned after header-content with double padding offset */
  /* This accounts for dashboard-main padding (30px) + tab-content padding (30px) = 60px */
  margin-left: calc(var(--spacing-lg) * 2); /* 60px: aligns with tab-content left edge */
  margin-right: auto; /* Push .header-actions to far right */
}

/* AIDEV-NOTE: Mobile/Tablet - push to right side for space efficiency */
@media (max-width: 1023px) {
  .scenario-selector-header {
    margin-left: auto; /* Override: push to right side */
    margin-right: 1rem;
  }
}

.scenario-selector-header .scenario-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-primary, #2c3e50);
  white-space: nowrap;
  user-select: none;
}

.scenario-selector-header .scenario-buttons {
  display: flex;
  gap: 0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background: white;
}

/* AIDEV-NOTE: Reduced button sizing for header context */
.scenario-selector-header .scenario-button {
  padding: 0.5rem 1rem; /* Reduced from 0.75rem 1.5rem */
  font-size: 0.9rem; /* Slightly smaller for header */
}

/* ========================================================================
   TASK-062: Responsive Header Scenario Selector
   ======================================================================== */

/* AIDEV-NOTE: Adjust sizing for narrower screens (laptop) */
@media (max-width: 1440px) {
  .scenario-selector-header {
    gap: 0.75rem;
    margin-right: 0.75rem;
  }

  .scenario-selector-header .scenario-button {
    padding: 0.45rem 0.9rem;
    font-size: 0.85rem;
  }

  .scenario-selector-header .scenario-label {
    font-size: 0.9rem;
  }
}

/* AIDEV-NOTE: Further reduce for tablet landscape */
@media (max-width: 1200px) {
  .scenario-selector-header {
    gap: 0.5rem;
    margin-right: 0.5rem;
  }

  .scenario-selector-header .scenario-button {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
  }

  .scenario-selector-header .scenario-label {
    font-size: 0.85rem;
  }
}

/* AIDEV-NOTE: Hide header selector on mobile, preserve space for navigation */
@media (max-width: 768px) {
  .scenario-selector-header {
    display: none;
  }
}

/* ========================================================================
   Scenario Selector Section (DEPRECATED - TASK-062)
   ======================================================================== */

/* AIDEV-NOTE: TASK-062 - Section styles deprecated, selector moved to header */
.scenario-selector-section {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: var(--color-bg-secondary, #f8f9fa);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  display: none; /* Hidden - selector now in header */
}

/* ========================================================================
   Container Layout
   ======================================================================== */

.scenario-selector-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ========================================================================
   Label
   ======================================================================== */

.scenario-label {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text-primary, #2c3e50);
  margin: 0;
  display: flex;
  align-items: center;
  user-select: none;
}

/* ========================================================================
   Button Group
   ======================================================================== */

.scenario-buttons {
  display: flex;
  gap: 0; /* No gap for merged button group effect */
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background: white;
}

/* ========================================================================
   Individual Buttons
   ======================================================================== */

.scenario-button {
  /* Layout */
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;

  /* Visual */
  background: white;
  border: 1px solid #dee2e6;
  border-right: none; /* Merge borders between buttons */
  color: #6c757d;
  font-size: 1rem;
  font-weight: 500;

  /* Interaction */
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;

  /* Typography */
  font-family: inherit;
  line-height: 1.5;
}

/* AIDEV-NOTE: Last button needs right border */
.scenario-button:last-child {
  border-right: 1px solid #dee2e6;
}

/* AIDEV-NOTE: Border radius for first and last buttons */
.scenario-button:first-child {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.scenario-button:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

/* ========================================================================
   Button States - Hover
   ======================================================================== */

/* AIDEV-NOTE: Hover effect for inactive buttons only */
.scenario-button:hover:not(.active):not(:disabled) {
  background: #f1f3f5;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ========================================================================
   Button States - Active (Scenario-Specific Colors)
   ======================================================================== */

/* AIDEV-NOTE: Conservative scenario - Red tint */
.scenario-button.active[data-scenario="conservative"] {
  background: #e74c3c;
  color: white;
  border-color: #c0392b;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(231, 76, 60, 0.3);
}

/* AIDEV-NOTE: Moderate scenario - Blue tint (default) */
.scenario-button.active[data-scenario="moderate"] {
  background: #3498db;
  color: white;
  border-color: #2980b9;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(52, 152, 219, 0.3);
}

/* AIDEV-NOTE: Optimistic scenario - Green tint */
.scenario-button.active[data-scenario="optimistic"] {
  background: #27ae60;
  color: white;
  border-color: #229954;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(39, 174, 96, 0.3);
}

/* ========================================================================
   Button States - Disabled
   ======================================================================== */

/* AIDEV-NOTE: Disabled state for when calculator not ready */
.scenario-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #e9ecef;
  color: #adb5bd;
}

.scenario-button:disabled:hover {
  transform: none;
  box-shadow: none;
}

/* ========================================================================
   Button Icons and Text
   ======================================================================== */

.scenario-icon {
  font-size: 1.2rem;
  line-height: 1;
}

.scenario-name {
  white-space: nowrap;
}

/* AIDEV-NOTE: Check mark - only visible on active button */
.scenario-check {
  display: none;
  margin-left: 0.25rem;
  font-weight: bold;
  font-size: 1.1rem;
}

.scenario-button.active .scenario-check {
  display: inline;
}

/* ========================================================================
   Scenario Description
   ======================================================================== */

/* AIDEV-NOTE: TASK-062 - Description element removed, using native tooltips instead */
.scenario-description {
  display: none; /* Hidden - using title attribute tooltips */
}

.description-text {
  display: none; /* Hidden - using title attribute tooltips */
}

/* ========================================================================
   Accessibility - Focus States
   ======================================================================== */

/* AIDEV-NOTE: Keyboard navigation focus indicator */
.scenario-button:focus {
  outline: 3px solid rgba(52, 152, 219, 0.5);
  outline-offset: 2px;
  z-index: 1;
}

/* AIDEV-NOTE: Focus-visible for better keyboard-only indication */
.scenario-button:focus-visible {
  outline: 3px solid rgba(52, 152, 219, 0.7);
  outline-offset: 3px;
}

/* AIDEV-NOTE: Remove focus outline when clicking with mouse */
.scenario-button:focus:not(:focus-visible) {
  outline: none;
}

/* ========================================================================
   Responsive Design - Tablet (≤1024px)
   ======================================================================== */

@media (max-width: 1024px) {
  .scenario-selector-section {
    padding: 1.25rem;
  }

  .scenario-button {
    padding: 0.65rem 1.25rem;
    font-size: 0.95rem;
  }

  .scenario-icon {
    font-size: 1.1rem;
  }
}

/* ========================================================================
   Responsive Design - Mobile (≤768px)
   ======================================================================== */

@media (max-width: 768px) {
  /* AIDEV-NOTE: Stack vertically on mobile */
  .scenario-selector-container {
    flex-direction: column;
    align-items: stretch;
  }

  .scenario-label {
    width: 100%;
    text-align: center;
    margin-bottom: 0.5rem;
  }

  .scenario-buttons {
    flex-direction: column;
    width: 100%;
    border-radius: 6px;
  }

  .scenario-button {
    width: 100%;
    justify-content: center;
    padding: 0.85rem 1rem;
    border-right: 1px solid #dee2e6; /* Add right border on mobile */
    border-bottom: none; /* Remove bottom border */
  }

  .scenario-button:last-child {
    border-bottom: 1px solid #dee2e6; /* Last button gets bottom border */
  }

  /* AIDEV-NOTE: Adjust border radius for vertical stack */
  .scenario-button:first-child {
    border-radius: 6px 6px 0 0;
  }

  .scenario-button:last-child {
    border-radius: 0 0 6px 6px;
  }

  .scenario-button:not(:first-child):not(:last-child) {
    border-radius: 0;
  }

  .scenario-description {
    margin-top: 1rem;
    padding: 0.85rem;
  }

  .description-text {
    font-size: 0.85rem;
    text-align: center;
  }
}

/* ========================================================================
   Responsive Design - Small Mobile (≤480px)
   ======================================================================== */

@media (max-width: 480px) {
  .scenario-selector-section {
    padding: 1rem;
    margin-bottom: 1.5rem;
  }

  .scenario-button {
    padding: 0.75rem 0.85rem;
    font-size: 0.9rem;
  }

  .scenario-icon {
    font-size: 1rem;
  }

  .scenario-name {
    font-size: 0.9rem;
  }

  .scenario-check {
    font-size: 1rem;
  }
}

/* ========================================================================
   High Contrast Mode Support
   ======================================================================== */

@media (prefers-contrast: high) {
  .scenario-button {
    border-width: 2px;
  }

  .scenario-button.active {
    border-width: 3px;
  }

  .scenario-button:focus {
    outline-width: 4px;
  }
}

/* ========================================================================
   Reduced Motion Support
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
  .scenario-button {
    transition: none;
  }

  .scenario-button:hover:not(.active):not(:disabled) {
    transform: none;
  }

  .scenario-description {
    transition: none;
  }
}

/* ========================================================================
   Print Styles
   ======================================================================== */

@media print {
  .scenario-selector-section {
    page-break-inside: avoid;
    box-shadow: none;
    border: 1px solid #dee2e6;
  }

  .scenario-button {
    box-shadow: none;
  }

  .scenario-button:not(.active) {
    display: none; /* Only show active scenario when printing */
  }
}