/* ============================================================
   FWA Agent — shared theme tokens (light + dark)
   Loaded from base.html and login.html. Sits *after* the
   Tailwind CDN script so the dark-mode overrides win on
   specificity.
   ============================================================ */

:root {
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Surfaces & text — light mode reproduces today's "rest of app" look. */
  --color-bg: #f9fafb;             /* gray-50  — page background */
  --color-surface: #ffffff;        /* white    — cards, navbar */
  --color-surface-2: #f3f4f6;      /* gray-100 — table headers */
  --color-surface-3: #e5e7eb;      /* gray-200 — hover, tertiary */
  --color-text: #111827;           /* gray-900 */
  --color-text-strong: #0b1220;
  --color-text-muted: #6b7280;     /* gray-500 */
  --color-text-faint: #9ca3af;     /* gray-400 */
  --color-border: #e5e7eb;         /* gray-200 */
  --color-border-strong: #d1d5db;  /* gray-300 */

  /* Brand accent — Tailwind blue-600 in light mode. */
  --color-accent: #2563eb;
  --color-accent-hover: #1d4ed8;
  --color-accent-soft: #dbeafe;
  --color-on-accent: #ffffff;
  --color-selected-bg: rgba(37, 99, 235, 0.10);
  --color-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

  /* Chart palette — kept identical across both themes so chart
     data colors don't shift on toggle (the surrounding chrome
     does the visual work instead). These are the dashboard's
     8 hand-picked hues. */
  --chart-1: #4f9eff;
  --chart-2: #7bd88f;
  --chart-3: #fbb454;
  --chart-4: #a78bfa;
  --chart-5: #22d3ee;
  --chart-6: #f47174;
  --chart-7: #f5d76e;
  --chart-8: #fb7185;

  /* Status badge pairs (bg/fg) — light mode = today's pastel pairs. */
  --status-info-bg: #dbeafe;       --status-info-fg: #1e40af;
  --status-info-border: #bfdbfe;
  --status-success-bg: #dcfce7;    --status-success-fg: #166534;
  --status-success-border: #bbf7d0;
  --status-warning-bg: #fef3c7;    --status-warning-fg: #92400e;
  --status-warning-border: #fde68a;
  --status-danger-bg: #fee2e2;     --status-danger-fg: #991b1b;
  --status-danger-border: #fecaca;
  --status-neutral-bg: #f3f4f6;    --status-neutral-fg: #4b5563;
  --status-neutral-border: #e5e7eb;
  --status-purple-bg: #ede9fe;     --status-purple-fg: #6d28d9;
  --status-orange-bg: #ffedd5;     --status-orange-fg: #9a3412;
  --status-indigo-bg: #e0e7ff;     --status-indigo-fg: #3730a3;
}

[data-theme="dark"] {
  /* Surfaces & text — dark mode reproduces the dashboard look. */
  --color-bg: #0f1419;
  --color-surface: #1a2028;
  --color-surface-2: #232b36;
  --color-surface-3: #2a333f;
  --color-text: #e6edf3;
  --color-text-strong: #f3f7fa;
  --color-text-muted: #8b98a5;
  --color-text-faint: #6c7886;
  --color-border: #2a333f;
  --color-border-strong: #3a4554;

  --color-accent: #4f9eff;
  --color-accent-hover: #6cb2ff;
  --color-accent-soft: rgba(79, 158, 255, 0.15);
  --color-on-accent: #0f1419;
  --color-selected-bg: rgba(79, 158, 255, 0.18);
  --color-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);

  /* Status badges — desaturated, low-alpha backgrounds with
     bright fg colors that read on dark surfaces. */
  --status-info-bg: rgba(79, 158, 255, 0.15);     --status-info-fg: #6cb2ff;
  --status-info-border: rgba(79, 158, 255, 0.30);
  --status-success-bg: rgba(123, 216, 143, 0.15); --status-success-fg: #7bd88f;
  --status-success-border: rgba(123, 216, 143, 0.30);
  --status-warning-bg: rgba(245, 215, 110, 0.15); --status-warning-fg: #f5d76e;
  --status-warning-border: rgba(245, 215, 110, 0.30);
  --status-danger-bg: rgba(244, 113, 116, 0.15);  --status-danger-fg: #f47174;
  --status-danger-border: rgba(244, 113, 116, 0.30);
  --status-neutral-bg: rgba(139, 152, 165, 0.12); --status-neutral-fg: #8b98a5;
  --status-neutral-border: rgba(139, 152, 165, 0.25);
  --status-purple-bg: rgba(167, 139, 250, 0.15);  --status-purple-fg: #a78bfa;
  --status-orange-bg: rgba(251, 180, 84, 0.15);   --status-orange-fg: #fbb454;
  --status-indigo-bg: rgba(167, 139, 250, 0.15);  --status-indigo-fg: #a78bfa;
}

/* ============================================================
   Base typography — applies to both modes.
   ============================================================ */
html, body { font-family: var(--font-sans); }
html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

/* ============================================================
   Theme toggle button (in base.html navbar).
   The two icons (sun + moon) live inside the button and only
   one is shown depending on the active theme.
   ============================================================ */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.theme-toggle:hover {
  color: var(--color-text);
  background: var(--color-surface-2);
  border-color: var(--color-border);
}
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: inline; }
.theme-toggle .icon-sun  { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: inline; }

/* ============================================================
   Dark-mode override layer for Tailwind utility classes used
   across templates. Light mode is intentionally untouched —
   today's appearance is preserved.
   ============================================================ */

/* Body chrome */
[data-theme="dark"] body.bg-gray-50 {
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* Surfaces */
[data-theme="dark"] .bg-white         { background-color: var(--color-surface); }
[data-theme="dark"] .bg-gray-50       { background-color: var(--color-bg); }
[data-theme="dark"] .bg-gray-100      { background-color: var(--color-surface-2); }
[data-theme="dark"] .bg-gray-200      { background-color: var(--color-surface-3); }
/* gray-900 is used as a deliberate "near-black" element (e.g. user
   avatar badge) — keep that contrast in dark mode by hopping to
   the accent color instead, so the marker remains visible against
   dark surfaces. */
[data-theme="dark"] .bg-gray-900,
[data-theme="dark"] .bg-slate-800,
[data-theme="dark"] .bg-slate-900     { background-color: var(--color-accent); }

/* Hovers on surfaces */
[data-theme="dark"] .hover\:bg-gray-50:hover  { background-color: var(--color-surface-2); }
[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: var(--color-surface-3); }

/* Text */
[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-700    { color: var(--color-text); }
[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-500    { color: var(--color-text-muted); }
[data-theme="dark"] .text-gray-400,
[data-theme="dark"] .text-gray-300    { color: var(--color-text-faint); }
[data-theme="dark"] .hover\:text-gray-900:hover { color: var(--color-text-strong); }

/* Borders (default = gray-200/300) */
[data-theme="dark"] .border,
[data-theme="dark"] .border-t,
[data-theme="dark"] .border-b,
[data-theme="dark"] .border-l,
[data-theme="dark"] .border-r,
[data-theme="dark"] .border-gray-200  { border-color: var(--color-border); }
[data-theme="dark"] .border-gray-300  { border-color: var(--color-border-strong); }
[data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--color-border); }

/* Brand accent (blue-600 family). Don't touch `color` here —
   buttons combine `bg-blue-600` with `text-white` and we want
   the white-on-accent contrast to survive in both modes. */
[data-theme="dark"] .bg-blue-600      { background-color: var(--color-accent); }
[data-theme="dark"] .bg-blue-500      { background-color: var(--color-accent); }
[data-theme="dark"] .hover\:bg-blue-700:hover { background-color: var(--color-accent-hover); }
[data-theme="dark"] .text-blue-600    { color: var(--color-accent); }
[data-theme="dark"] .text-blue-700    { color: var(--color-accent-hover); }
[data-theme="dark"] .border-blue-400,
[data-theme="dark"] .border-blue-500  { border-color: var(--color-accent); }
[data-theme="dark"] .focus\:ring-blue-500:focus  { --tw-ring-color: var(--color-accent); }
[data-theme="dark"] .focus\:border-blue-500:focus { border-color: var(--color-accent); }

/* Pastel surfaces — status badges. Tailwind ships them as
   `bg-X-50`/`bg-X-100` + `text-X-700`/`text-X-800`. Map both
   sides to the semantic status pair so contrast stays right. */
[data-theme="dark"] .bg-blue-50,
[data-theme="dark"] .bg-blue-100      { background-color: var(--status-info-bg); }
[data-theme="dark"] .text-blue-800,
[data-theme="dark"] .text-blue-900    { color: var(--status-info-fg); }
[data-theme="dark"] .border-blue-200  { border-color: var(--status-info-border); }
[data-theme="dark"] .hover\:bg-blue-50:hover,
[data-theme="dark"] .hover\:bg-blue-100:hover { background-color: var(--status-info-bg); }

[data-theme="dark"] .bg-green-50,
[data-theme="dark"] .bg-green-100     { background-color: var(--status-success-bg); }
[data-theme="dark"] .text-green-600   { color: var(--status-success-fg); }
[data-theme="dark"] .text-green-700,
[data-theme="dark"] .text-green-800   { color: var(--status-success-fg); }
[data-theme="dark"] .border-green-200 { border-color: var(--status-success-border); }

[data-theme="dark"] .bg-amber-50,
[data-theme="dark"] .bg-amber-100     { background-color: var(--status-warning-bg); }
[data-theme="dark"] .text-amber-600,
[data-theme="dark"] .text-amber-700,
[data-theme="dark"] .text-amber-800,
[data-theme="dark"] .text-amber-900   { color: var(--status-warning-fg); }
[data-theme="dark"] .border-amber-200,
[data-theme="dark"] .border-amber-300 { border-color: var(--status-warning-border); }
[data-theme="dark"] .hover\:bg-amber-100:hover { background-color: var(--status-warning-bg); }

[data-theme="dark"] .bg-red-50        { background-color: var(--status-danger-bg); }
[data-theme="dark"] .text-red-600,
[data-theme="dark"] .text-red-700,
[data-theme="dark"] .text-red-800     { color: var(--status-danger-fg); }
[data-theme="dark"] .hover\:text-red-600:hover { color: var(--status-danger-fg); }
[data-theme="dark"] .border-red-200   { border-color: var(--status-danger-border); }

[data-theme="dark"] .bg-indigo-50     { background-color: var(--status-indigo-bg); }
[data-theme="dark"] .bg-indigo-500    { background-color: var(--color-accent); }
[data-theme="dark"] .text-indigo-700  { color: var(--status-indigo-fg); }
[data-theme="dark"] .border-indigo-200 { border-color: var(--status-indigo-bg); }

[data-theme="dark"] .text-purple-700  { color: var(--status-purple-fg); }
[data-theme="dark"] .border-purple-400 { border-color: var(--status-purple-fg); }

[data-theme="dark"] .text-slate-300,
[data-theme="dark"] .text-slate-400   { color: var(--color-text-muted); }
[data-theme="dark"] .text-emerald-300 { color: var(--status-success-fg); }

/* Form inputs — Tailwind doesn't ship a default for
   <input>/<textarea>; pages set bg-white + border-gray-300.
   Already covered above. Add focus-ring polish: */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  color: var(--color-text);
  background-color: var(--color-surface);
  border-color: var(--color-border-strong);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--color-text-faint); }

/* Shadows — Tailwind shadow utilities use --tw-shadow-color;
   the default near-black shadows are too heavy on dark bg. */
[data-theme="dark"] .shadow,
[data-theme="dark"] .shadow-sm,
[data-theme="dark"] .shadow-md,
[data-theme="dark"] .shadow-lg { --tw-shadow-color: rgba(0, 0, 0, 0.45); }

/* ============================================================
   Markdown styles in chat.html — re-bound to tokens so dark
   mode renders correctly without editing the template.
   ============================================================ */
[data-theme="dark"] .markdown code {
  background: var(--color-surface-3);
  color: var(--color-text);
}
[data-theme="dark"] .markdown pre {
  background: #0a0e13;
  color: var(--color-text);
}
[data-theme="dark"] .markdown pre code { color: inherit; }
[data-theme="dark"] .markdown table th,
[data-theme="dark"] .markdown table td { border-color: var(--color-border-strong); }
[data-theme="dark"] .markdown th { background: var(--color-surface-2); }
[data-theme="dark"] .markdown blockquote {
  border-left-color: var(--color-text-muted);
  color: var(--color-text-muted);
}
[data-theme="dark"] .markdown a { color: var(--color-accent); }
[data-theme="dark"] .markdown hr { border-top-color: var(--color-border); }

/* ============================================================
   Login page hero panel — themable.
   ============================================================ */
.login-grid {
  background:
    radial-gradient(80% 60% at 20% 20%, rgba(59, 130, 246, 0.18) 0%, transparent 60%),
    radial-gradient(60% 50% at 80% 80%, rgba(99, 102, 241, 0.18) 0%, transparent 60%),
    linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #1e3a8a 100%);
}
[data-theme="dark"] .login-grid {
  background:
    radial-gradient(80% 60% at 20% 20%, rgba(79, 158, 255, 0.22) 0%, transparent 60%),
    radial-gradient(60% 50% at 80% 80%, rgba(167, 139, 250, 0.18) 0%, transparent 60%),
    linear-gradient(135deg, #0a0e13 0%, #14202d 50%, #1a2747 100%);
}
.login-grain::before,
.login-root .grain::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 4px 4px; pointer-events: none;
}