/* Employee-portal themes chosen in the admin portal (System management > Theme management).
   The shell sets <html data-portal-theme="green|indigo|amber|slate">; the default StaffGateway theme sets nothing.
   Each preset re-points the brand tokens to a design-system palette, so every semantic token (primary, link, accent,
   sidebar, ring, brand scale) follows. Unlayered on purpose: it must win over the token layers.
   The same palette steps as the admin preview (.sys-pv in css/modules/system.css); each preset passes 4.5:1.
   The first chart series follows the theme (a lighter step in dark mode keeps 3:1 on dark cards). */

:root[data-portal-theme="green"] {
  --brand-50: var(--it-green-50); --brand-100: var(--it-green-100); --brand-200: var(--it-green-200); --brand-300: var(--it-green-300);
  --brand-400: var(--it-green-400); --brand-500: var(--it-green-500); --brand-600: var(--it-green-600); --brand-700: var(--it-green-700);
  --brand-800: var(--it-green-800); --brand-900: var(--it-green-900); --brand-950: var(--it-green-900);
  --brand-primary: var(--it-green-700); --brand-primary-dark: var(--it-green-700);
  --brand-link: var(--it-green-700); --brand-link-dark: var(--it-green-400);
  --brand-accent-seed: var(--it-green-800);
  --brand-chart-1: var(--brand-primary); --brand-chart-1-dark: var(--it-green-400);
}
:root[data-portal-theme="indigo"] {
  --brand-50: var(--it-indigo-25); --brand-100: var(--it-indigo-100); --brand-200: var(--it-indigo-200); --brand-300: var(--it-indigo-300);
  --brand-400: var(--it-indigo-400); --brand-500: var(--it-indigo-500); --brand-600: var(--it-indigo-600); --brand-700: var(--it-indigo-700);
  --brand-800: var(--it-indigo-800); --brand-900: var(--it-indigo-900); --brand-950: var(--it-indigo-900);
  --brand-primary: var(--it-indigo-600); --brand-primary-dark: var(--it-indigo-600);
  --brand-link: var(--it-indigo-600); --brand-link-dark: var(--it-indigo-300);
  --brand-accent-seed: var(--it-indigo-800);
  --brand-chart-1: var(--brand-primary); --brand-chart-1-dark: var(--it-indigo-400);
}
:root[data-portal-theme="amber"] {
  --brand-50: var(--it-amber-25); --brand-100: var(--it-amber-100); --brand-200: var(--it-amber-200); --brand-300: var(--it-amber-300);
  --brand-400: var(--it-amber-400); --brand-500: var(--it-amber-500); --brand-600: var(--it-amber-600); --brand-700: var(--it-amber-700);
  --brand-800: var(--it-amber-800); --brand-900: var(--it-amber-900); --brand-950: var(--it-amber-900);
  --brand-primary: var(--it-amber-700); --brand-primary-dark: var(--it-amber-700);
  --brand-link: var(--it-amber-700); --brand-link-dark: var(--it-amber-400);
  --brand-accent-seed: var(--it-amber-800);
  --brand-chart-1: var(--brand-primary); --brand-chart-1-dark: var(--it-amber-400);
}
:root[data-portal-theme="slate"] {
  --brand-50: var(--it-slate-50); --brand-100: var(--it-slate-100); --brand-200: var(--it-slate-200); --brand-300: var(--it-slate-300);
  --brand-400: var(--it-slate-400); --brand-500: var(--it-slate-500); --brand-600: var(--it-slate-600); --brand-700: var(--it-slate-700);
  --brand-800: var(--it-slate-800); --brand-900: var(--it-slate-900); --brand-950: var(--it-slate-950);
  --brand-primary: var(--it-slate-700); --brand-primary-dark: var(--it-slate-700);
  --brand-link: var(--it-slate-700); --brand-link-dark: var(--it-slate-300);
  --brand-accent-seed: var(--it-slate-800);
  --brand-chart-1: var(--brand-primary); --brand-chart-1-dark: var(--it-slate-400);
}
:root[data-portal-theme] {
  --brand-primary-foreground: var(--it-white); --brand-primary-foreground-dark: var(--it-white);
  --brand-cta: var(--brand-primary); --brand-cta-dark: var(--brand-primary-dark);
  --brand-cta-border: var(--brand-primary); --brand-cta-border-dark: var(--brand-primary-dark);
  --brand-cta-foreground: var(--it-white); --brand-cta-foreground-dark: var(--it-white);
}

/* A portal logo uploaded in Theme management replaces the StaffGateway wordmark in the header. */
.app-logo .logo-custom { height: 30px; width: auto; max-width: 180px; object-fit: contain; }
.app-logo.has-custom .logo-light, .app-logo.has-custom .logo-dark, .app-logo.has-custom .logo-mark { display: none !important; }
@media (max-width: 480px) { .app-logo .logo-custom { height: 26px; max-width: 120px; } }