/*
  Application color themes (design tokens).
  Both themes share the same CSS variable names; only values change.
  - "default": the existing white / blue look (values mirror current UI).
  - "midnight": Midnight Aurora dark theme.
  All midnight overrides are scoped under [data-theme="midnight"], so the
  default theme renders exactly as before (no rule matches without the attr).
*/

:root,
:root[data-theme="default"] {
  --app-bg: #ffffff;
  --page-gradient: none;
  --surface: #ffffff;
  --surface-elevated: #f8fafc;
  --surface-raised: #ffffff;
  --inset: #f8fafc;

  --text-primary: #0f172a;
  --text-heading: #020617;
  --text-muted: #475569;
  --text-link: #2563eb;

  --border: #e2e8f0;
  --border-hover: #cbd5e1;
  --focus-ring: #3b82f6;
  --selection: rgba(37, 99, 235, 0.18);

  --accent-indigo: #2563eb;
  --accent-sky: #2563eb;
  --accent-cyan: #2563eb;
  --accent-teal: #2563eb;
  --accent-gradient: #2563eb;

  --btn-primary-bg: #2563eb;
  --btn-primary-bg-hover: #1d4ed8;
  --btn-primary-text: #ffffff;
  --btn-primary-border: #2563eb;

  --success: #047857;
  --danger: #dc2626;
  --warning: #b45309;
  --info: #2563eb;

  --chart-text: #475569;
  --chart-grid: #eff6ff;
  --chart-accent: #1d4ed8;
  --chart-1: #1d4ed8;
  --chart-2: #2563eb;
  --chart-3: #3b82f6;
  --chart-4: #60a5fa;
  --chart-5: #93c5fd;
  --chart-6: #bfdbfe;
}

[data-theme="midnight"] {
  --app-bg: #0b1120;
  --page-gradient: linear-gradient(180deg, #0b1120 0%, #0e1528 52%, #0b1120 100%);
  --surface: #141d33;
  --surface-elevated: #1d2742;
  --surface-raised: #1a2339;
  --inset: #10182b;

  --text-primary: #e8edf7;
  --text-heading: #ffffff;
  --text-muted: #94a3b8;
  --text-link: #bcd3ee;

  --border: rgba(148, 163, 184, 0.12);
  --border-hover: rgba(125, 211, 252, 0.32);
  --focus-ring: rgba(56, 189, 248, 0.6);
  --selection: rgba(56, 189, 248, 0.3);

  --accent-indigo: #818cf8;
  --accent-sky: #38bdf8;
  --accent-cyan: #22d3ee;
  --accent-teal: #5eead4;
  --accent-gradient: linear-gradient(102deg, #818cf8 0%, #38bdf8 50%, #5eead4 100%);

  --btn-primary-bg: linear-gradient(102deg, #a5b4fc 0%, #7dd3fc 50%, #99f6e4 100%);
  --btn-primary-bg-hover: linear-gradient(102deg, #818cf8 0%, #38bdf8 50%, #5eead4 100%);
  --btn-primary-text: #04060e;
  --btn-primary-border: transparent;

  --success: #34d399;
  --danger: #fb7185;
  --warning: #fcd34d;
  --info: #38bdf8;

  --chart-text: #94a3b8;
  --chart-grid: rgba(148, 163, 184, 0.14);
  --chart-accent: #38bdf8;
  --chart-1: #818cf8;
  --chart-2: #38bdf8;
  --chart-3: #22d3ee;
  --chart-4: #5eead4;
  --chart-5: #67e8f9;
  --chart-6: #a5b4fc;
}

/* ===================== MIDNIGHT OVERRIDES ===================== */

[data-theme="midnight"] body[class] {
  background-color: var(--app-bg) !important;
  background-image: var(--page-gradient) !important;
  background-attachment: fixed !important;
  color: var(--text-primary) !important;
}

[data-theme="midnight"] ::selection {
  background: var(--selection);
  color: var(--text-heading);
}

[data-theme="midnight"] input:focus,
[data-theme="midnight"] input:focus-visible,
[data-theme="midnight"] textarea:focus,
[data-theme="midnight"] select:focus {
  outline: none !important;
}

/* Surfaces */
[data-theme="midnight"] .bg-white,
[data-theme="midnight"] .lg\:bg-white { background-color: var(--surface) !important; }
[data-theme="midnight"] .hover\:bg-white:hover { background-color: var(--surface-elevated) !important; }
[data-theme="midnight"] .bg-slate-50,
[data-theme="midnight"] .bg-gray-50 { background-color: var(--inset) !important; }
[data-theme="midnight"] .bg-slate-100,
[data-theme="midnight"] .bg-gray-100,
[data-theme="midnight"] .bg-\[\#edf1f7\],
[data-theme="midnight"] .bg-\[\#f8f9fa\],
[data-theme="midnight"] .bg-\[\#f2f3f5\] { background-color: var(--surface-elevated) !important; }

/* Text */
[data-theme="midnight"] .text-slate-950,
[data-theme="midnight"] .text-slate-900,
[data-theme="midnight"] .text-gray-900,
[data-theme="midnight"] .text-black { color: var(--text-heading) !important; }
[data-theme="midnight"] .text-slate-800,
[data-theme="midnight"] .text-slate-700,
[data-theme="midnight"] .text-gray-800,
[data-theme="midnight"] .text-gray-700 { color: var(--text-primary) !important; }
[data-theme="midnight"] .text-slate-600,
[data-theme="midnight"] .text-slate-500,
[data-theme="midnight"] .text-slate-400,
[data-theme="midnight"] .text-gray-600,
[data-theme="midnight"] .text-gray-500,
[data-theme="midnight"] .text-gray-400 { color: var(--text-muted) !important; }

/* Borders + dividers */
[data-theme="midnight"] .border-slate-200,
[data-theme="midnight"] .border-slate-100,
[data-theme="midnight"] .border-gray-100,
[data-theme="midnight"] .border-gray-200,
[data-theme="midnight"] .lg\:border-slate-200,
[data-theme="midnight"] .border-\[\#f2f3f5\] { border-color: var(--border) !important; }
[data-theme="midnight"] .border-slate-300,
[data-theme="midnight"] .border-gray-300,
[data-theme="midnight"] .hover\:border-slate-300:hover { border-color: var(--border-hover) !important; }
[data-theme="midnight"] .divide-slate-200 > :not([hidden]) ~ :not([hidden]),
[data-theme="midnight"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
[data-theme="midnight"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border) !important; }

/* Inputs */
[data-theme="midnight"] input,
[data-theme="midnight"] textarea,
[data-theme="midnight"] select {
  color: var(--text-primary) !important;
}
[data-theme="midnight"] input:not(.bg-transparent),
[data-theme="midnight"] textarea:not(.bg-transparent),
[data-theme="midnight"] select:not(.bg-transparent) {
  background-color: var(--inset) !important;
  border-color: var(--border) !important;
}
[data-theme="midnight"] input::placeholder,
[data-theme="midnight"] textarea::placeholder,
[data-theme="midnight"] .placeholder\:text-slate-400::placeholder { color: var(--text-muted) !important; }
[data-theme="midnight"] .focus\:border-slate-400:focus,
[data-theme="midnight"] .focus\:border-blue-500:focus,
[data-theme="midnight"] .focus-within\:border-blue-500:focus-within { border-color: #60a5fa !important; box-shadow: none !important; }

/* Primary buttons / active accents (blue-600/700) -> accent gradient + dark text */
[data-theme="midnight"] .bg-blue-600,
[data-theme="midnight"] .bg-blue-700 {
  background-color: transparent !important;
  background-image: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
  border-color: var(--btn-primary-border) !important;
}
[data-theme="midnight"] .bg-blue-600 *,
[data-theme="midnight"] .bg-blue-700 * { color: var(--btn-primary-text) !important; }
[data-theme="midnight"] .hover\:bg-blue-700:hover { background-image: var(--btn-primary-bg-hover) !important; }
[data-theme="midnight"] .border-blue-600 { border-color: var(--btn-primary-border) !important; }

/* Accent text / soft accent surfaces (blue) */
[data-theme="midnight"] .text-blue-600,
[data-theme="midnight"] .text-blue-700,
[data-theme="midnight"] .text-blue-800 { color: var(--accent-sky) !important; }
[data-theme="midnight"] .bg-blue-50 { background-color: rgba(56, 189, 248, 0.12) !important; }
[data-theme="midnight"] .border-blue-200,
[data-theme="midnight"] .border-blue-100 { border-color: rgba(56, 189, 248, 0.3) !important; }
[data-theme="midnight"] .ring-blue-100 { --tw-ring-color: rgba(56, 189, 248, 0.25) !important; }

/* Status: success */
[data-theme="midnight"] .text-emerald-700,
[data-theme="midnight"] .text-emerald-600,
[data-theme="midnight"] .text-green-700,
[data-theme="midnight"] .text-green-600 { color: var(--success) !important; }
[data-theme="midnight"] .bg-emerald-50,
[data-theme="midnight"] .bg-green-50 { background-color: rgba(52, 211, 153, 0.12) !important; }
[data-theme="midnight"] .border-emerald-200,
[data-theme="midnight"] .border-emerald-100,
[data-theme="midnight"] .border-green-100,
[data-theme="midnight"] .border-green-200 { border-color: rgba(52, 211, 153, 0.32) !important; }

/* Status: danger */
[data-theme="midnight"] .text-red-800,
[data-theme="midnight"] .text-red-700,
[data-theme="midnight"] .text-red-600,
[data-theme="midnight"] .text-rose-700 { color: var(--danger) !important; }
[data-theme="midnight"] .bg-red-50,
[data-theme="midnight"] .bg-rose-50 { background-color: rgba(251, 113, 133, 0.12) !important; }
[data-theme="midnight"] .border-red-300,
[data-theme="midnight"] .border-red-200,
[data-theme="midnight"] .border-rose-200 { border-color: rgba(251, 113, 133, 0.32) !important; }

/* Status: warning */
[data-theme="midnight"] .text-amber-800,
[data-theme="midnight"] .text-amber-700,
[data-theme="midnight"] .text-amber-600,
[data-theme="midnight"] .text-yellow-700 { color: var(--warning) !important; }
[data-theme="midnight"] .bg-amber-50,
[data-theme="midnight"] .bg-yellow-50 { background-color: rgba(252, 211, 77, 0.12) !important; }
[data-theme="midnight"] .border-amber-300,
[data-theme="midnight"] .border-amber-200,
[data-theme="midnight"] .border-yellow-200 { border-color: rgba(252, 211, 77, 0.32) !important; }

/* Status: info / sky */
[data-theme="midnight"] .text-sky-900,
[data-theme="midnight"] .text-sky-700 { color: var(--info) !important; }
[data-theme="midnight"] .bg-sky-50 { background-color: rgba(56, 189, 248, 0.12) !important; }
[data-theme="midnight"] .border-sky-200 { border-color: rgba(56, 189, 248, 0.32) !important; }

/* Overlays + shadows (cards use hairline borders, not heavy shadows) */
[data-theme="midnight"] .bg-slate-950\/45,
[data-theme="midnight"] .bg-slate-950\/20,
[data-theme="midnight"] .bg-blue-950\/10,
[data-theme="midnight"] .bg-blue-950\/20 { background-color: rgba(2, 4, 10, 0.7) !important; }
[data-theme="midnight"] .shadow-sm,
[data-theme="midnight"] .shadow,
[data-theme="midnight"] .shadow-md,
[data-theme="midnight"] .shadow-lg,
[data-theme="midnight"] .shadow-xl,
[data-theme="midnight"] .shadow-2xl {
  box-shadow: 0 1px 0 rgba(148, 163, 184, 0.05), 0 18px 40px rgba(2, 6, 23, 0.55) !important;
}


/* JD AI dialogs + resume chips (custom component classes) */
[data-theme="midnight"] .jd-ai-modal__backdrop { background: rgba(2, 4, 10, 0.7) !important; }
[data-theme="midnight"] .jd-ai-dialog {
  background: var(--surface-raised) !important;
  border-color: var(--border) !important;
  box-shadow: 0 22px 52px rgba(2, 6, 23, 0.6) !important;
}
[data-theme="midnight"] .jd-ai-dialog__header { border-bottom-color: var(--border) !important; }
[data-theme="midnight"] .jd-ai-dialog__header h2 { color: var(--text-heading) !important; }
[data-theme="midnight"] .jd-ai-dialog__header p,
[data-theme="midnight"] .jd-ai-dialog label span,
[data-theme="midnight"] .jd-ai-icon-button { color: var(--text-muted) !important; }
[data-theme="midnight"] .jd-ai-icon-button:hover { color: var(--text-heading) !important; background: var(--surface-elevated) !important; }
[data-theme="midnight"] .jd-ai-dialog label strong { color: var(--danger) !important; }
[data-theme="midnight"] .jd-ai-primary-button {
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
  border-color: var(--btn-primary-border) !important;
}
[data-theme="midnight"] .jd-ai-primary-button:hover { background: var(--btn-primary-bg-hover) !important; }
[data-theme="midnight"] .jd-ai-secondary-button {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}
[data-theme="midnight"] .jd-ai-secondary-button:hover { border-color: var(--border-hover) !important; color: var(--text-heading) !important; }
[data-theme="midnight"] .jd-review-skeleton { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="midnight"] .resume-file-chip { background: var(--inset) !important; border-color: var(--border) !important; color: var(--text-primary) !important; }
[data-theme="midnight"] .resume-file-chip__name { color: var(--text-primary) !important; }

/* Custom select widget */
[data-theme="midnight"] .custom-select__option[aria-selected="true"] { background: var(--inset) !important; }

/* Interview runtime common components */
[data-theme="midnight"] .page-header,
[data-theme="midnight"] #setupHeader { background: var(--surface) !important; }
[data-theme="midnight"] .flash-toast,
[data-theme="midnight"] .skeleton-card { background: var(--surface-raised) !important; border-color: var(--border) !important; }
[data-theme="midnight"] .loading-overlay { background: rgba(4, 6, 14, 0.82) !important; }
[data-theme="midnight"] .loading-title { color: var(--text-heading) !important; }
[data-theme="midnight"] .loading-description { color: var(--text-muted) !important; }
[data-theme="midnight"] .passcode-input {
  background: var(--inset) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}
[data-theme="midnight"] .passcode-input:focus { border-color: var(--accent-sky) !important; box-shadow: 0 0 0 4px var(--focus-ring) !important; }
[data-theme="midnight"] .header-icon-stroke,
[data-theme="midnight"] .setup-icon-stroke,
[data-theme="midnight"] .icon-stroke { stroke: currentColor !important; }

/* Interview device setup + live interview components (bespoke inline styles) */
[data-theme="midnight"] .setup-side-card { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="midnight"] .setup-start-button[disabled] { background: var(--surface-elevated) !important; color: var(--text-muted) !important; }
[data-theme="midnight"] .device-dropdown-trigger { background: var(--inset) !important; border-color: var(--border) !important; color: var(--text-primary) !important; }
[data-theme="midnight"] .device-dropdown-menu { background: var(--surface-raised) !important; border-color: var(--border) !important; }
[data-theme="midnight"] .device-dropdown-option:hover,
[data-theme="midnight"] .device-dropdown-option[aria-selected="true"] { background: rgba(56, 189, 248, 0.14) !important; color: var(--accent-sky) !important; }
[data-theme="midnight"] .interview-modal__dialog { background: var(--surface-raised) !important; color: var(--text-primary) !important; }
[data-theme="midnight"] .chat-row.interviewer .chat-bubble { background: var(--surface-elevated) !important; border-color: var(--border) !important; color: var(--text-primary) !important; }
[data-theme="midnight"] .agent-visualizer-card { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="midnight"] .agent-visualizer-state { color: var(--text-heading) !important; }
[data-theme="midnight"] .agent-visualizer-subtitle { color: var(--text-muted) !important; }
[data-theme="midnight"] .live-agent-image-frame { background: var(--surface-elevated) !important; border-color: var(--border) !important; }
[data-theme="midnight"] .interviewer-joining-overlay { background: rgba(4, 6, 14, 0.72) !important; }
[data-theme="midnight"] .interviewer-joining-card { background: var(--surface-raised) !important; border-color: var(--border) !important; }
[data-theme="midnight"] .status-pill.listening { background: rgba(52, 211, 153, 0.14) !important; color: var(--success) !important; }
[data-theme="midnight"] .status-pill.thinking,
[data-theme="midnight"] .status-pill.speaking { background: rgba(56, 189, 248, 0.14) !important; color: var(--info) !important; }
[data-theme="midnight"] .status-pill.completed,
[data-theme="midnight"] .status-pill.default { background: var(--surface-elevated) !important; color: var(--text-muted) !important; }
[data-theme="midnight"] .status-pill.error { background: rgba(251, 113, 133, 0.14) !important; color: var(--danger) !important; }