/* ============================================================
   DARK MODE POLISH — Surface depth, card glow, colored accents
   Inspired by Kreatop / Cleora dark UI references
   ============================================================ */

/* ---- SIDEBAR: subtle gradient instead of flat ---- */
[data-theme="dark"] .sidebar,
:root:not([data-theme]) .sidebar {
  /* handled by prefers-color-scheme below */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .sidebar {
    background: linear-gradient(180deg, #141825 0%, #101420 100%);
    border-right-color: #1e2840;
  }
}
[data-theme="dark"] .sidebar {
  background: linear-gradient(180deg, #141825 0%, #101420 100%);
  border-right-color: #1e2840;
}

/* ---- NAV ITEMS: more visible active state with left accent ---- */
[data-theme="dark"] .nav-item.active,
[data-theme="dark"] .nav-item[aria-selected="true"] {
  background: linear-gradient(90deg, rgba(91, 156, 245, 0.15) 0%, rgba(91, 156, 245, 0.05) 100%);
  border-left: 3px solid var(--color-primary);
  padding-left: calc(var(--space-3) - 3px);
  color: var(--color-primary);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .nav-item.active,
  :root:not([data-theme]) .nav-item[aria-selected="true"] {
    background: linear-gradient(90deg, rgba(91, 156, 245, 0.15) 0%, rgba(91, 156, 245, 0.05) 100%);
    border-left: 3px solid var(--color-primary);
    padding-left: calc(var(--space-3) - 3px);
    color: var(--color-primary);
  }
}

/* ---- NAV ITEM HOVER: subtle blue tint ---- */
[data-theme="dark"] .nav-item:hover {
  background: rgba(91, 156, 245, 0.08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .nav-item:hover {
    background: rgba(91, 156, 245, 0.08);
  }
}

/* ---- CARDS: subtle blue-tinted border + lift ---- */
[data-theme="dark"] .card {
  border: 1px solid rgba(91, 156, 245, 0.1);
  background: #1a1f2c;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(91, 156, 245, 0.04);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .card {
    border: 1px solid rgba(91, 156, 245, 0.1);
    background: #1a1f2c;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(91, 156, 245, 0.04);
  }
}

/* ---- CARD HOVER: subtle glow ---- */
[data-theme="dark"] .card:hover {
  border-color: rgba(91, 156, 245, 0.18);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(91, 156, 245, 0.08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .card:hover {
    border-color: rgba(91, 156, 245, 0.18);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(91, 156, 245, 0.08);
  }
}

/* ---- HERO BANNER / WELCOME: gradient overlay for visual interest ---- */
[data-theme="dark"] .hero-banner,
[data-theme="dark"] .welcome-hero {
  background: linear-gradient(135deg, #141e30 0%, #1a2540 50%, #1a1f2c 100%);
  border: 1px solid rgba(91, 156, 245, 0.12);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .hero-banner,
  :root:not([data-theme]) .welcome-hero {
    background: linear-gradient(135deg, #141e30 0%, #1a2540 50%, #1a1f2c 100%);
    border: 1px solid rgba(91, 156, 245, 0.12);
  }
}

/* ---- KPI CARDS: thin border, colored top accent ---- */
[data-theme="dark"] .kpi-card {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .kpi-card {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
  }
}

/* ---- ICON CIRCLES / STEP INDICATORS: colored backgrounds ---- */
[data-theme="dark"] .step-number,
[data-theme="dark"] .step-indicator .step.active {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 0 12px rgba(91, 156, 245, 0.3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .step-number,
  :root:not([data-theme]) .step-indicator .step.active {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 0 12px rgba(91, 156, 245, 0.3);
  }
}

/* ---- FEATURE ICONS: subtle colored tint behind icons ---- */
[data-theme="dark"] .feature-icon,
[data-theme="dark"] .card-icon,
[data-theme="dark"] .offer-logo {
  background: rgba(91, 156, 245, 0.12);
  border: 1px solid rgba(91, 156, 245, 0.1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .feature-icon,
  :root:not([data-theme]) .card-icon,
  :root:not([data-theme]) .offer-logo {
    background: rgba(91, 156, 245, 0.12);
    border: 1px solid rgba(91, 156, 245, 0.1);
  }
}

/* ---- STATUS BADGES: more vibrant in dark ---- */
[data-theme="dark"] .badge-success,
[data-theme="dark"] .status-complete {
  background: rgba(76, 200, 130, 0.15);
  color: #4cc882;
  border: 1px solid rgba(76, 200, 130, 0.2);
}
[data-theme="dark"] .badge-warning,
[data-theme="dark"] .status-pending {
  background: rgba(228, 181, 74, 0.12);
  color: #e4b54a;
  border: 1px solid rgba(228, 181, 74, 0.18);
}
[data-theme="dark"] .badge-error,
[data-theme="dark"] .status-urgent {
  background: rgba(229, 107, 107, 0.12);
  color: #e56b6b;
  border: 1px solid rgba(229, 107, 107, 0.18);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .badge-success,
  :root:not([data-theme]) .status-complete {
    background: rgba(76, 200, 130, 0.15);
    color: #4cc882;
    border: 1px solid rgba(76, 200, 130, 0.2);
  }
  :root:not([data-theme]) .badge-warning,
  :root:not([data-theme]) .status-pending {
    background: rgba(228, 181, 74, 0.12);
    color: #e4b54a;
    border: 1px solid rgba(228, 181, 74, 0.18);
  }
  :root:not([data-theme]) .badge-error,
  :root:not([data-theme]) .status-urgent {
    background: rgba(229, 107, 107, 0.12);
    color: #e56b6b;
    border: 1px solid rgba(229, 107, 107, 0.18);
  }
}

/* ---- BUTTONS: primary button glow in dark ---- */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .cta-primary,
[data-theme="dark"] [class*="btn"][class*="primary"] {
  box-shadow: 0 2px 12px rgba(91, 156, 245, 0.25), 0 1px 3px rgba(0, 0, 0, 0.2);
}
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .cta-primary:hover,
[data-theme="dark"] [class*="btn"][class*="primary"]:hover {
  box-shadow: 0 4px 20px rgba(91, 156, 245, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .btn-primary,
  :root:not([data-theme]) .cta-primary,
  :root:not([data-theme]) [class*="btn"][class*="primary"] {
    box-shadow: 0 2px 12px rgba(91, 156, 245, 0.25), 0 1px 3px rgba(0, 0, 0, 0.2);
  }
  :root:not([data-theme]) .btn-primary:hover,
  :root:not([data-theme]) .cta-primary:hover,
  :root:not([data-theme]) [class*="btn"][class*="primary"]:hover {
    box-shadow: 0 4px 20px rgba(91, 156, 245, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);
  }
}

/* ---- ACCENT BUTTON (CTA red): warm glow ---- */
[data-theme="dark"] .btn-accent,
[data-theme="dark"] .cta-accent,
[data-theme="dark"] .onboarding-cta {
  box-shadow: 0 2px 12px rgba(224, 98, 98, 0.25), 0 1px 3px rgba(0, 0, 0, 0.2);
}
[data-theme="dark"] .btn-accent:hover,
[data-theme="dark"] .cta-accent:hover,
[data-theme="dark"] .onboarding-cta:hover {
  box-shadow: 0 4px 20px rgba(224, 98, 98, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .btn-accent,
  :root:not([data-theme]) .cta-accent,
  :root:not([data-theme]) .onboarding-cta {
    box-shadow: 0 2px 12px rgba(224, 98, 98, 0.25), 0 1px 3px rgba(0, 0, 0, 0.2);
  }
  :root:not([data-theme]) .btn-accent:hover,
  :root:not([data-theme]) .cta-accent:hover,
  :root:not([data-theme]) .onboarding-cta:hover {
    box-shadow: 0 4px 20px rgba(224, 98, 98, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);
  }
}

/* ---- INPUT FIELDS: visible borders ---- */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .input-field {
  background: #10141c;
  border-color: #283248;
}
/* Chat input must stay transparent on desktop — wrapper provides container */
/* On mobile immersive, the input gets its own pill shape via responsive.css */
[data-theme="dark"] .chat-input,
[data-theme="dark"] textarea.chat-input {
  background: transparent !important;
  border-color: transparent !important;
  border-radius: 0 !important;
}
/* In immersive mobile, override back to pill shape */
.chat-immersive .chat-input,
.chat-immersive textarea.chat-input {
  background: var(--color-surface-2) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 20px !important;
}
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] .input-field:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(91, 156, 245, 0.15);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) input,
  :root:not([data-theme]) select,
  :root:not([data-theme]) textarea,
  :root:not([data-theme]) .input-field {
    background: #10141c;
    border-color: #283248;
  }
  :root:not([data-theme]) .chat-input,
  :root:not([data-theme]) textarea.chat-input {
    background: transparent !important;
    border-color: transparent !important;
    border-radius: 0 !important;
  }
  .chat-immersive .chat-input,
  .chat-immersive textarea.chat-input {
    background: var(--color-surface-2) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 20px !important;
  }
  :root:not([data-theme]) input:focus,
  :root:not([data-theme]) select:focus,
  :root:not([data-theme]) textarea:focus,
  :root:not([data-theme]) .input-field:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(91, 156, 245, 0.15);
  }
}

/* ---- TOP BAR: subtle bottom border glow ---- */
[data-theme="dark"] .topbar,
[data-theme="dark"] .top-bar {
  border-bottom: 1px solid rgba(91, 156, 245, 0.08);
  background: rgba(19, 23, 33, 0.9);
  backdrop-filter: blur(12px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .topbar,
  :root:not([data-theme]) .top-bar {
    border-bottom: 1px solid rgba(91, 156, 245, 0.08);
    background: rgba(19, 23, 33, 0.9);
    backdrop-filter: blur(12px);
  }
}

/* ---- PROGRESS BARS: vibrant fill ---- */
[data-theme="dark"] .progress-fill,
[data-theme="dark"] .progress-bar-fill {
  background: linear-gradient(90deg, #3a7bd5, #5b9cf5);
  box-shadow: 0 0 8px rgba(91, 156, 245, 0.3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .progress-fill,
  :root:not([data-theme]) .progress-bar-fill {
    background: linear-gradient(90deg, #3a7bd5, #5b9cf5);
    box-shadow: 0 0 8px rgba(91, 156, 245, 0.3);
  }
}

/* ---- TIMELINE / ROADMAP items: colored dot glow ---- */
[data-theme="dark"] .timeline-dot,
[data-theme="dark"] .roadmap-dot {
  box-shadow: 0 0 8px rgba(91, 156, 245, 0.4);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .timeline-dot,
  :root:not([data-theme]) .roadmap-dot {
    box-shadow: 0 0 8px rgba(91, 156, 245, 0.4);
  }
}

/* ---- ONBOARDING MODAL: enhanced in dark ---- */
[data-theme="dark"] .onboarding-modal,
[data-theme="dark"] .modal-content {
  background: #161c28;
  border: 1px solid rgba(91, 156, 245, 0.12);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(91, 156, 245, 0.06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .onboarding-modal,
  :root:not([data-theme]) .modal-content {
    background: #161c28;
    border: 1px solid rgba(91, 156, 245, 0.12);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(91, 156, 245, 0.06);
  }
}

/* ---- FEATURE HIGHLIGHT BOXES in onboarding ---- */
[data-theme="dark"] .feature-highlight,
[data-theme="dark"] .onboarding-feature {
  background: rgba(91, 156, 245, 0.06);
  border: 1px solid rgba(91, 156, 245, 0.1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .feature-highlight,
  :root:not([data-theme]) .onboarding-feature {
    background: rgba(91, 156, 245, 0.06);
    border: 1px solid rgba(91, 156, 245, 0.1);
  }
}

/* ---- SCROLLBAR: styled for dark ---- */
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #0b0e14;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #283248;
  border-radius: 4px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #354060;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) ::-webkit-scrollbar-track {
    background: #0b0e14;
  }
  :root:not([data-theme]) ::-webkit-scrollbar-thumb {
    background: #283248;
    border-radius: 4px;
  }
  :root:not([data-theme]) ::-webkit-scrollbar-thumb:hover {
    background: #354060;
  }
}