/* ============================================================
   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).

     This is the single, editable source of truth for per-series
     chart colors (site colors on the Spend Analysis charts read
     these directly). To recolor or add colors, edit here — the
     charts pick up as many --chart-N as are defined, and any
     series beyond the list gets an auto-generated distinct hue
     (see genSeriesColor in categories_advanced/app.js). Keep the
     hues legible on BOTH the light (#ffffff) and dark (#1a2028)
     card surfaces, since they're theme-invariant. */
  --chart-1: #4f9eff;   /* blue    */
  --chart-2: #7bd88f;   /* green   */
  --chart-3: #fbb454;   /* orange  */
  --chart-4: #a78bfa;   /* purple  */
  --chart-5: #22d3ee;   /* cyan    */
  --chart-6: #f47174;   /* coral   */
  --chart-7: #f5d76e;   /* yellow  */
  --chart-8: #fb7185;   /* rose    */
  --chart-9: #2dd4bf;   /* teal    */
  --chart-10: #e879f9;  /* fuchsia */
  --chart-11: #d8925a;  /* rust    */
  --chart-12: #818cf8;  /* indigo  */
  --chart-13: #a3e635;  /* lime    */
  --chart-14: #38bdf8;  /* sky     */

  /* 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; }

/* Hide Alpine-managed elements until Alpine boots (prevents dropdown flash). */
[x-cloak] { display: none !important; }

/* ============================================================
   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;
}

/* ============================================================
   Card "maximize" — a general enlarge-to-fullscreen rule for the
   report dashboards (Dashboard, Spend Analysis, Procurement).
   card-fullscreen.js injects a .card-fs-btn into every .card on
   those pages and toggles .is-fullscreen (+ a shared backdrop) on
   click; Esc / backdrop / the icon close it. Rules use the global
   --color-* tokens so they resolve outside the per-root scopes.
   ============================================================ */
.card-fs-btn {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-faint);
  cursor: pointer;
  z-index: 3;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.card-fs-btn:hover {
  color: var(--color-accent);
  background: var(--color-surface-2);
  border-color: var(--color-border);
}
.card-fs-btn svg { width: 15px; height: 15px; display: block; }
.card-fs-btn .icon-compress { display: none; }
.card.is-fullscreen .card-fs-btn .icon-expand { display: none; }
.card.is-fullscreen .card-fs-btn .icon-compress { display: inline; }

/* Reserve the top-right corner so the icon never overlaps the
   existing right-aligned header toolbars / long titles on report
   cards. (Header class names vary per page; list the known ones.) */
#categories-advanced-root .trend-head,
#categories-advanced-root .tree-head,
#categories-advanced-root .lines-head,
#dashboard-root .card-head,
#procurement-root .table-head,
#categories-advanced-root .card > h2,
#dashboard-root .card > h2,
#procurement-root .card > h2 { padding-right: 34px; }

.card-fs-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  z-index: 1000;
}
.card-fs-backdrop[hidden] { display: none; }

/* The maximized card. !important is needed to beat the per-root
   `#…-root .card { position: relative }` (higher-specificity) rules. */
.card.is-fullscreen {
  position: fixed !important;
  inset: 3vh 3vw !important;
  z-index: 1001 !important;
  margin: 0 !important;
  max-width: none !important;
  max-height: none !important;
  overflow: auto;
  background: var(--color-surface);
  box-shadow: var(--color-shadow);
}
/* Let the chart canvas wrapper (and scrollable table wraps) grow to
   fill the enlarged card — overrides the fixed pixel heights, which
   are set by id-scoped rules, hence !important. */
.card.is-fullscreen .canvas-wrap,
.card.is-fullscreen .tree-wrap,
.card.is-fullscreen .lines-wrap {
  height: auto !important;
  max-height: none !important;
  flex: 1 1 auto;
  min-height: 0;
}