/*
  FOURSTEK BRAND IDENTITY DOCUMENT - REVISED PALETTE
  Central source of truth based on the new 'Professional Tech Blue' palette.
  Single :root block — no duplicates. Sidebar text variables added.
*/

:root {
  /* Surface tokens */
  --surface-bg: #F8F9FF;
  --surface-card: #FFFFFF;
  --surface-border: rgba(0, 51, 255, 0.1);
  --surface-header-bg: rgba(0, 51, 255, 0.03);
  --row-hover: rgba(0, 51, 255, 0.04);

  /* Text tokens */
  --text-primary: #00033D;
  --text-secondary: rgba(0, 3, 61, 0.55);
  --text-tertiary: rgba(0, 3, 61, 0.35);

  /* Brand palette */
  --brand-midnight: #00033D;
  --brand-navy: #0600AB;
  --brand-azure: #0033FF;
  --brand-sky: #977DFF;
  --brand-ice: #e3e5ff;
  --brand-alert: #ff0055;
  --brand-alert-soft: rgba(255, 0, 85, 0.6);

  /* Sidebar tokens — ALWAYS DARK (sidebar is navy in all themes including light) */
  --sidebar-bg-start: #00022d;
  --sidebar-bg-end: #00033D;
  --sidebar-border: rgba(0, 51, 255, 0.15);
  --sidebar-divider: rgba(0, 51, 255, 0.12);
  --sidebar-nav-active: rgba(0, 51, 255, 0.3);
  --sidebar-nav-active-border: rgba(0, 51, 255, 0.5);
  --sidebar-text-primary: rgba(227, 229, 255, 0.95);
  --sidebar-text-secondary: rgba(227, 229, 255, 0.65);
  --sidebar-text-tertiary: rgba(227, 229, 255, 0.45);
  --sidebar-text-danger: rgba(255, 102, 153, 0.8);

  /* Form tokens */
  --input-bg: #FFFFFF;
  --input-border: rgba(0, 51, 255, 0.2);
  --input-text: #00033D;
  --input-focus-border: #0033FF;

  /* Tailwind v4 color aliases — unlayered :root beats @layer theme, so these
     override Tailwind's compiled values and make all text-brand-* / bg-brand-*
     utilities cascade through the active theme automatically. */
  --color-brand-midnight: var(--brand-midnight);
  --color-brand-navy:     var(--brand-navy);
  --color-brand-azure:    var(--brand-azure);
  --color-brand-sky:      var(--brand-sky);
  --color-brand-ice:      var(--brand-ice);
  --color-brand-alert:    var(--brand-alert);
}

.dark {
  --surface-bg: #0a0c1a;
  --surface-card: #111428;
  --surface-border: rgba(0, 51, 255, 0.2);
  --surface-header-bg: rgba(0, 51, 255, 0.06);
  --row-hover: rgba(0, 51, 255, 0.08);
  --text-primary: #e3e5ff;
  --text-secondary: rgba(227, 229, 255, 0.55);
  --text-tertiary: rgba(227, 229, 255, 0.3);
  --input-bg: rgba(0, 51, 255, 0.04);
  --input-border: rgba(0, 51, 255, 0.25);
  --input-text: #e3e5ff;
}

/* Phantom — SOC/Cyber Teal: noticeably blue-dark, not just black */
.theme-phantom {
  --surface-bg: #060a1e;
  --surface-card: #0a1232;
  --surface-border: rgba(0, 217, 255, 0.22);
  --surface-header-bg: rgba(0, 217, 255, 0.07);
  --row-hover: rgba(0, 217, 255, 0.09);
  --text-primary: #d0eeff;
  --text-secondary: rgba(208, 238, 255, 0.6);
  --text-tertiary: rgba(208, 238, 255, 0.35);
  --brand-midnight: #050510;
  --brand-navy: #002244;
  --brand-azure: #00d9ff;
  --brand-sky: #0099bb;
  --brand-ice: #c0f0ff;
  --sidebar-bg-start: #04051a;
  --sidebar-bg-end: #080a2a;
  --sidebar-border: rgba(0, 217, 255, 0.25);
  --sidebar-divider: rgba(0, 217, 255, 0.15);
  --sidebar-nav-active: rgba(0, 217, 255, 0.18);
  --sidebar-nav-active-border: rgba(0, 217, 255, 0.55);
  --sidebar-text-primary: rgba(208, 238, 255, 0.95);
  --sidebar-text-secondary: rgba(208, 238, 255, 0.65);
  --sidebar-text-tertiary: rgba(208, 238, 255, 0.45);
  --sidebar-text-danger: rgba(255, 120, 160, 0.85);
  --input-bg: rgba(0, 217, 255, 0.06);
  --input-border: rgba(0, 217, 255, 0.3);
  --input-text: #d0eeff;
  --input-focus-border: #00d9ff;
}

/* Matrix — Terminal Green: clearly green-dark, distinct from dark/phantom */
.theme-matrix {
  --surface-bg: #020e05;
  --surface-card: #061808;
  --surface-border: rgba(0, 230, 100, 0.22);
  --surface-header-bg: rgba(0, 230, 100, 0.06);
  --row-hover: rgba(0, 230, 100, 0.08);
  --text-primary: #c8ffd8;
  --text-secondary: rgba(200, 255, 216, 0.6);
  --text-tertiary: rgba(200, 255, 216, 0.35);
  --brand-midnight: #010c04;
  --brand-navy: #00441a;
  --brand-azure: #00e664;
  --brand-sky: #00aa44;
  --brand-ice: #c0ffd4;
  --sidebar-bg-start: #011205;
  --sidebar-bg-end: #011a07;
  --sidebar-border: rgba(0, 230, 100, 0.25);
  --sidebar-divider: rgba(0, 230, 100, 0.15);
  --sidebar-nav-active: rgba(0, 230, 100, 0.15);
  --sidebar-nav-active-border: rgba(0, 230, 100, 0.55);
  --sidebar-text-primary: rgba(200, 255, 216, 0.95);
  --sidebar-text-secondary: rgba(200, 255, 216, 0.65);
  --sidebar-text-tertiary: rgba(200, 255, 216, 0.45);
  --sidebar-text-danger: rgba(255, 120, 140, 0.85);
  --input-bg: rgba(0, 230, 100, 0.05);
  --input-border: rgba(0, 230, 100, 0.3);
  --input-text: #c8ffd8;
  --input-focus-border: #00e664;
}

/* Warm — Amber / Honey: warm cream background, amber accents */
.theme-warm {
  --surface-bg: #FFFDF7;
  --surface-card: #FFFFFF;
  --surface-border: rgba(217, 119, 6, 0.14);
  --surface-header-bg: rgba(217, 119, 6, 0.05);
  --row-hover: rgba(217, 119, 6, 0.05);
  --text-primary: #2C1810;
  --text-secondary: rgba(44, 24, 16, 0.55);
  --text-tertiary: rgba(44, 24, 16, 0.35);
  --brand-midnight: #2C1810;
  --brand-navy: #92400E;
  --brand-azure: #D97706;
  --brand-sky: #F59E0B;
  --brand-ice: #FEF3C7;
  --brand-alert: #DC2626;
  --brand-alert-soft: rgba(220, 38, 38, 0.6);
  --sidebar-bg-start: #1A0E04;
  --sidebar-bg-end: #2C1A08;
  --sidebar-border: rgba(217, 119, 6, 0.22);
  --sidebar-divider: rgba(217, 119, 6, 0.14);
  --sidebar-nav-active: rgba(217, 119, 6, 0.25);
  --sidebar-nav-active-border: rgba(217, 119, 6, 0.65);
  --sidebar-text-primary: rgba(254, 243, 199, 0.95);
  --sidebar-text-secondary: rgba(254, 243, 199, 0.65);
  --sidebar-text-tertiary: rgba(254, 243, 199, 0.45);
  --sidebar-text-danger: rgba(252, 165, 165, 0.85);
  --input-bg: #FFFFFF;
  --input-border: rgba(217, 119, 6, 0.22);
  --input-text: #2C1810;
  --input-focus-border: #D97706;
}

/* Ocean — Teal / Maritime: fresh blue-teal light theme */
.theme-ocean {
  --surface-bg: #F0FAFA;
  --surface-card: #FFFFFF;
  --surface-border: rgba(8, 145, 178, 0.14);
  --surface-header-bg: rgba(8, 145, 178, 0.05);
  --row-hover: rgba(8, 145, 178, 0.05);
  --text-primary: #0A2C3C;
  --text-secondary: rgba(10, 44, 60, 0.55);
  --text-tertiary: rgba(10, 44, 60, 0.35);
  --brand-midnight: #0A2C3C;
  --brand-navy: #0E7490;
  --brand-azure: #0891B2;
  --brand-sky: #22D3EE;
  --brand-ice: #CFFAFE;
  --brand-alert: #E11D48;
  --brand-alert-soft: rgba(225, 29, 72, 0.6);
  --sidebar-bg-start: #041822;
  --sidebar-bg-end: #0A2C3C;
  --sidebar-border: rgba(8, 145, 178, 0.22);
  --sidebar-divider: rgba(8, 145, 178, 0.14);
  --sidebar-nav-active: rgba(8, 145, 178, 0.25);
  --sidebar-nav-active-border: rgba(8, 145, 178, 0.65);
  --sidebar-text-primary: rgba(207, 250, 254, 0.95);
  --sidebar-text-secondary: rgba(207, 250, 254, 0.65);
  --sidebar-text-tertiary: rgba(207, 250, 254, 0.45);
  --sidebar-text-danger: rgba(254, 180, 180, 0.85);
  --input-bg: #FFFFFF;
  --input-border: rgba(8, 145, 178, 0.22);
  --input-text: #0A2C3C;
  --input-focus-border: #0891B2;
}

/* Midnight — Violet / Cosmic: deep purple-black dark theme */
.theme-midnight {
  --surface-bg: #080415;
  --surface-card: #100826;
  --surface-border: rgba(124, 58, 237, 0.25);
  --surface-header-bg: rgba(124, 58, 237, 0.08);
  --row-hover: rgba(124, 58, 237, 0.1);
  --text-primary: #EDE9FE;
  --text-secondary: rgba(237, 233, 254, 0.6);
  --text-tertiary: rgba(237, 233, 254, 0.35);
  --brand-midnight: #080415;
  --brand-navy: #4C1D95;
  --brand-azure: #8B5CF6;
  --brand-sky: #A78BFA;
  --brand-ice: #DDD6FE;
  --brand-alert: #F43F5E;
  --brand-alert-soft: rgba(244, 63, 94, 0.6);
  --sidebar-bg-start: #050210;
  --sidebar-bg-end: #0D0820;
  --sidebar-border: rgba(124, 58, 237, 0.28);
  --sidebar-divider: rgba(124, 58, 237, 0.16);
  --sidebar-nav-active: rgba(124, 58, 237, 0.22);
  --sidebar-nav-active-border: rgba(139, 92, 246, 0.65);
  --sidebar-text-primary: rgba(237, 233, 254, 0.95);
  --sidebar-text-secondary: rgba(237, 233, 254, 0.65);
  --sidebar-text-tertiary: rgba(237, 233, 254, 0.45);
  --sidebar-text-danger: rgba(244, 63, 94, 0.85);
  --input-bg: rgba(124, 58, 237, 0.06);
  --input-border: rgba(124, 58, 237, 0.3);
  --input-text: #EDE9FE;
  --input-focus-border: #8B5CF6;
}

/* Ember — Red / Forge: deep red-black dark theme */
.theme-ember {
  --surface-bg: #110404;
  --surface-card: #1E0C0C;
  --surface-border: rgba(220, 38, 38, 0.22);
  --surface-header-bg: rgba(220, 38, 38, 0.07);
  --row-hover: rgba(220, 38, 38, 0.09);
  --text-primary: #FFE4E1;
  --text-secondary: rgba(255, 228, 225, 0.6);
  --text-tertiary: rgba(255, 228, 225, 0.35);
  --brand-midnight: #110404;
  --brand-navy: #7F1D1D;
  --brand-azure: #EF4444;
  --brand-sky: #F87171;
  --brand-ice: #FECACA;
  --brand-alert: #FB923C;
  --brand-alert-soft: rgba(251, 146, 60, 0.6);
  --sidebar-bg-start: #0A0202;
  --sidebar-bg-end: #1A0606;
  --sidebar-border: rgba(220, 38, 38, 0.28);
  --sidebar-divider: rgba(220, 38, 38, 0.16);
  --sidebar-nav-active: rgba(220, 38, 38, 0.2);
  --sidebar-nav-active-border: rgba(239, 68, 68, 0.6);
  --sidebar-text-primary: rgba(255, 228, 225, 0.95);
  --sidebar-text-secondary: rgba(255, 228, 225, 0.65);
  --sidebar-text-tertiary: rgba(255, 228, 225, 0.45);
  --sidebar-text-danger: rgba(251, 191, 36, 0.85);
  --input-bg: rgba(220, 38, 38, 0.06);
  --input-border: rgba(220, 38, 38, 0.3);
  --input-text: #FFE4E1;
  --input-focus-border: #EF4444;
}

/* Atomic Utility Classes (Fallbacks) */
.brand-bg-midnight {
  background-color: var(--brand-midnight) !important;
}

.brand-bg-navy {
  background-color: var(--brand-navy) !important;
}

.brand-bg-azure {
  background-color: var(--brand-azure) !important;
}

.brand-bg-sky {
  background-color: var(--brand-sky) !important;
}

.brand-bg-ice {
  background-color: var(--brand-ice) !important;
}

.brand-text-midnight {
  color: var(--brand-midnight) !important;
}

.brand-text-navy {
  color: var(--brand-navy) !important;
}

.brand-text-azure {
  color: var(--brand-azure) !important;
}

.brand-text-sky {
  color: var(--brand-sky) !important;
}

.brand-text-ice {
  color: var(--brand-ice) !important;
}

/* Global Base Fixes */
body {
  background: var(--surface-bg) !important;
  color: var(--text-primary) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
}

/* Sidebar — always dark; text uses sidebar-specific tokens */
aside {
  color: var(--sidebar-text-primary) !important;
}

/* Browser UA stylesheet gives <a> blue color; override explicitly for sidebar */
aside a,
aside button,
aside span,
aside p {
  color: inherit;
}

/* Themed accent stripe — top of sidebar reveals active theme color */
.theme-phantom aside {
  border-top: 2px solid rgba(0, 217, 255, 0.7) !important;
}
.theme-matrix aside {
  border-top: 2px solid rgba(0, 230, 100, 0.7) !important;
}

/* Themed card backgrounds — make phantom/matrix cards visually distinct from dark */
.theme-phantom .brand-card-solid,
.theme-phantom [class~="bg-white"],
.theme-phantom .bg-white {
  background-color: var(--surface-card) !important;
  border-color: var(--surface-border) !important;
}
.theme-matrix .brand-card-solid,
.theme-matrix [class~="bg-white"],
.theme-matrix .bg-white {
  background-color: var(--surface-card) !important;
  border-color: var(--surface-border) !important;
}

/* Themed table overrides */
.theme-phantom table thead th,
.theme-phantom .admin-table th {
  background: var(--surface-header-bg) !important;
  color: var(--text-secondary) !important;
}
.theme-matrix table thead th,
.theme-matrix .admin-table th {
  background: var(--surface-header-bg) !important;
  color: var(--text-secondary) !important;
}

/* Themed inline-style overrides (same selectors as .dark but for themed variants) */
.theme-phantom main [style*="color: rgba(0,3,61"],
.theme-phantom main [style*="color: #00033D"],
.theme-matrix main [style*="color: rgba(0,3,61"],
.theme-matrix main [style*="color: #00033D"] {
  color: var(--text-secondary) !important;
}
.theme-phantom main [style*="background: rgba(0,51,255,0.03)"],
.theme-phantom main [style*="background: rgba(0,51,255,0.04)"],
.theme-matrix main [style*="background: rgba(0,51,255,0.03)"],
.theme-matrix main [style*="background: rgba(0,51,255,0.04)"] {
  background: var(--surface-header-bg) !important;
}
.theme-phantom main [style*="color: #0033FF"],
.theme-matrix main [style*="color: #0033FF"] {
  color: var(--brand-azure) !important;
}
.theme-phantom main [style*="background: #FFFFFF"],
.theme-phantom main [style*="background-color: #FFFFFF"],
.theme-matrix main [style*="background: #FFFFFF"],
.theme-matrix main [style*="background-color: #FFFFFF"] {
  background-color: var(--surface-card) !important;
}

/* Themed form inputs */
.theme-phantom .form-input,
.theme-phantom input[class~="form-input"],
.theme-phantom select[class~="form-input"] {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-text) !important;
}
.theme-matrix .form-input,
.theme-matrix input[class~="form-input"],
.theme-matrix select[class~="form-input"] {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-text) !important;
}

/* Dark Mode: Card & Table Overrides */
.dark .brand-card-solid,
.dark [class~="bg-white"],
.dark .bg-white {
  background-color: var(--surface-card) !important;
  border-color: var(--surface-border) !important;
}

/* Table headers & cells */
.dark .admin-table th,
.dark table thead th {
  color: var(--text-secondary) !important;
  background: var(--surface-header-bg) !important;
}

.dark .admin-table td,
.dark table tbody td {
  color: var(--text-primary) !important;
}

.dark .admin-table tbody tr:hover {
  background-color: var(--row-hover) !important;
}

/* Divider lines inside tables */
.dark .admin-table tbody,
.dark table tbody {
  border-color: var(--surface-border) !important;
}

.dark .divide-y > * + * {
  border-color: var(--surface-border) !important;
}

/* Text color classes */
.dark .text-brand-midnight,
.dark .text-brand-midnight\/60,
.dark .text-brand-midnight\/70,
.dark .text-brand-midnight\/40,
.dark .text-brand-midnight\/20 {
  color: var(--text-secondary) !important;
}

/* Chart card wrappers (dashboard) */
.dark [class*="rounded-[2rem]"] {
  background-color: var(--surface-card) !important;
  border-color: var(--surface-border) !important;
}

/* Generic white/ice backgrounds inside main content */
.dark main .rounded-xl.bg-white,
.dark main .rounded-2xl.bg-white,
.dark main .rounded-3xl.bg-white {
  background-color: var(--surface-card) !important;
}

/* Live telemetry feed items */
.dark .bg-brand-ice\/20 {
  background-color: rgba(0, 51, 255, 0.08) !important;
}

/* brand-bg-ice page background (older class usage) */
.dark.brand-bg-ice,
.dark .brand-bg-ice {
  background-color: var(--surface-bg) !important;
}

/* thead element background */
.dark table thead,
.dark .admin-table thead {
  background: var(--surface-header-bg) !important;
}

/* tr inside tbody */
.dark table tbody tr {
  background-color: transparent !important;
  color: var(--text-primary) !important;
}

/* All p, span, label, small elements with hardcoded dark navy text */
.dark main p,
.dark main span,
.dark main label,
.dark main small,
.dark main dt,
.dark main dd {
  color: inherit;
}

/* Inline navy text colors used throughout content views */
.dark main [style*="color: rgba(0,3,61"],
.dark main [style*="color: rgba(0, 3, 61"],
.dark main [style*="color: #00033D"] {
  color: var(--text-secondary) !important;
}

/* Inline navy background highlights */
.dark main [style*="background: rgba(0,51,255,0.03)"],
.dark main [style*="background: rgba(0,51,255,0.04)"],
.dark main [style*="background: rgba(0, 51, 255, 0.03)"],
.dark main [style*="background: rgba(0, 51, 255, 0.04)"] {
  background: var(--surface-header-bg) !important;
}

/* Inline azure accent text in main content */
.dark main [style*="color: #0033FF"] {
  color: var(--brand-azure) !important;
}

/* Inline azure border colors */
.dark main [style*="border: 1px solid rgba(0,51,255"],
.dark main [style*="border: 1px solid rgba(0, 51, 255"] {
  border-color: var(--surface-border) !important;
}

/* White surface backgrounds in content panels */
.dark main [style*="background: #FFFFFF"],
.dark main [style*="background: white"],
.dark main [style*="background-color: #FFFFFF"],
.dark main [style*="background-color: white"] {
  background-color: var(--surface-card) !important;
}

/* Form inputs — ensure proper dark bg */
.dark .form-input,
.dark input[class~="form-input"],
.dark select[class~="form-input"],
.dark textarea[class~="form-input"] {
  background-color: var(--surface-card) !important;
  border-color: var(--surface-border) !important;
  color: var(--text-primary) !important;
}

.dark .form-input::placeholder {
  color: var(--text-tertiary) !important;
}

/* Gradient Utilities — token-based so they adapt per theme */
.brand-grad-1 {
  background: linear-gradient(135deg, var(--surface-card) 0%, var(--brand-ice) 100%) !important;
}

.brand-grad-2 {
  background: linear-gradient(135deg, var(--brand-ice) 0%, var(--brand-sky) 100%) !important;
}

.brand-grad-3 {
  background: linear-gradient(135deg, var(--brand-sky) 0%, var(--brand-azure) 100%) !important;
}

.brand-grad-4 {
  background: linear-gradient(135deg, var(--brand-azure) 0%, var(--brand-midnight) 100%) !important;
}

.brand-bg-vibrant {
  background: linear-gradient(135deg, var(--brand-azure) 0%, var(--brand-midnight) 100%) !important;
}

/* HIGH-CONTRAST BUTTON SYSTEM */
.btn-command,
.btn-secondary,
.btn-primary {
  color: #FFFFFF !important;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  border: 1px solid rgba(0, 51, 255, 0.4);
  box-shadow: 0 10px 30px -10px rgba(0, 3, 61, 0.5);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 2rem;
  border-radius: 1rem;
  text-decoration: none;
}

.btn-command,
.btn-secondary,
.btn-primary {
  background-color: var(--brand-midnight) !important;
}

.btn-command:hover,
.btn-secondary:hover,
.btn-primary:hover {
  background-color: var(--brand-azure) !important;
  box-shadow: 0 15px 35px -5px rgba(0, 51, 255, 0.4);
  transform: translateY(-2px);
  color: #FFFFFF !important;
}

.btn-danger {
  background-color: var(--brand-alert) !important;
  color: #FFFFFF !important;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  box-shadow: 0 8px 20px -8px rgba(255, 0, 85, 0.3);
  transition: all 0.3s ease;
  border-radius: 0.75rem;
  padding: 0.5rem 1.5rem;
  text-decoration: none;
}

.btn-danger:hover {
  background-color: var(--brand-azure) !important;
  box-shadow: 0 12px 25px -5px rgba(0, 51, 255, 0.4);
  color: #FFFFFF !important;
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.1);
}

/* GLOBAL HYDRAULIC INTERACTION LAYER */
.btn-command,
.btn-secondary,
.btn-primary,
.btn-danger,
[type="submit"] {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-command:hover,
.btn-secondary:hover,
.btn-primary:hover,
[type="submit"]:hover {
  background-color: var(--brand-azure) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) scale(1.02) !important;
  filter: brightness(1.1) !important;
  cursor: pointer;
  box-shadow: 0 15px 35px -5px rgba(0, 51, 255, 0.4) !important;
  border-radius: 1rem !important;
}

.btn-command:active,
.btn-secondary:active,
.btn-primary:active,
.btn-danger:active,
[type="submit"]:active {
  transform: translateY(0) scale(0.98) !important;
  filter: brightness(0.9) !important;
}

.brand-header-primary {
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.05em !important;
  color: var(--text-primary) !important;
  text-transform: uppercase !important;
}

.brand-card-solid {
  background-color: var(--surface-card) !important;
  border-radius: 2rem !important;
  border: 1px solid var(--surface-border) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 3, 61, 0.05) !important;
}

/* HIGH-CONTRAST TOGGLE SYSTEM */
.btn-toggle-command {
  background-color: var(--brand-midnight) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(0, 51, 255, 0.1) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.5;
}

input:checked+.btn-toggle-command {
  opacity: 1 !important;
  border-color: var(--brand-azure) !important;
  transform: scale(1.02);
  box-shadow: 0 5px 15px rgba(0, 3, 61, 0.3) !important;
}

.btn-toggle-danger {
  background-color: var(--brand-alert) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(0, 51, 255, 0.1) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.5;
}

input:checked+.btn-toggle-danger {
  opacity: 1 !important;
  border-color: #FFFFFF !important;
  transform: scale(1.02);
  box-shadow: 0 5px 15px rgba(255, 0, 85, 0.3) !important;
}

input:checked+.btn-toggle-command,
input:checked+.btn-toggle-danger {
  z-index: 10;
}

input:checked+.btn-toggle-command div,
input:checked+.btn-toggle-danger div {
  color: #FFFFFF !important;
}

/* ACCESSIBILITY: Focus-visible rings */
:focus-visible {
  outline: 2px solid var(--brand-azure) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(0, 51, 255, 0.15) !important;
}

aside a:focus-visible {
  outline-color: var(--brand-sky) !important;
  box-shadow: 0 0 0 3px rgba(151, 125, 255, 0.25) !important;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--input-focus-border) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0, 51, 255, 0.12) !important;
}

/* KPI CARD HOVER ANIMATIONS */
.kpi-card {
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 200ms ease,
              border-color 200ms ease !important;
}

.kpi-card:hover {
  transform: translateY(-4px) scale(1.01) !important;
  box-shadow: 0 20px 40px -12px rgba(0, 3, 61, 0.12) !important;
}

.kpi-card.kpi-alert:hover {
  box-shadow: 0 20px 40px -12px rgba(255, 0, 85, 0.15) !important;
}

.kpi-card.kpi-highlighted:hover {
  box-shadow: 0 20px 40px -12px rgba(0, 51, 255, 0.15) !important;
}

/* TABLE BASE — ensure th aligns left like td */
.admin-table th,
table thead th {
  text-align: left;
}

/* THEME TOGGLE ICONS — !important beats stale Turbo-cached inline styles */
#icon-sun  { display: none  !important; }
#icon-moon { display: block !important; }
.dark #icon-sun  { display: block !important; }
.dark #icon-moon { display: none  !important; }

/* TABLE ROW DIVIDER — fix divide-y defaulting to currentColor (appears white in dark themes) */
.admin-table tbody tr,
table tbody tr,
.divide-y > tr,
.divide-y > * {
  border-color: var(--surface-border) !important;
}

/* TABLE ROW HOVER */
.admin-table tbody tr {
  transition: background-color 150ms ease, box-shadow 150ms ease;
}

.admin-table tbody tr:hover {
  background-color: var(--row-hover) !important;
  box-shadow: inset 3px 0 0 var(--brand-azure);
}

/* STATUS BADGE SYSTEM */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  line-height: 1.6;
  border-width: 1px;
  border-style: solid;
}

.status-badge::before {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-badge.status-draft {
  background-color: rgba(0, 3, 61, 0.04);
  border-color: rgba(0, 3, 61, 0.1);
  color: rgba(0, 3, 61, 0.45);
}
.status-badge.status-draft::before {
  background-color: rgba(0, 3, 61, 0.25);
}

.status-badge.status-sent {
  background-color: rgba(0, 51, 255, 0.07);
  border-color: rgba(0, 51, 255, 0.2);
  color: var(--brand-azure);
}
.status-badge.status-sent::before {
  background-color: var(--brand-azure);
}

.status-badge.status-scheduled {
  background-color: rgba(151, 125, 255, 0.08);
  border-color: rgba(151, 125, 255, 0.25);
  color: #6B52CC;
}
.status-badge.status-scheduled::before {
  background-color: #977DFF;
}

.status-badge.status-archived {
  background-color: rgba(16, 124, 72, 0.07);
  border-color: rgba(16, 124, 72, 0.2);
  color: #0D7A47;
}
.status-badge.status-archived::before {
  background-color: #10b981;
}

/* FORM INPUT BASE */
.form-input {
  background-color: var(--input-bg);
  border: 1.5px solid var(--input-border);
  border-radius: 0.75rem;
  padding: 0.625rem 1rem;
  font-size: 0.75rem;
  color: var(--input-text);
  width: 100%;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.form-input::placeholder {
  color: var(--text-tertiary);
}

.form-input:hover {
  border-color: var(--input-focus-border);
  opacity: 0.8;
}

.form-input:focus {
  outline: none !important;
  border-color: var(--input-focus-border) !important;
  box-shadow: 0 0 0 3px rgba(0, 51, 255, 0.1);
}

.form-input:disabled {
  background-color: var(--surface-header-bg);
  border-color: var(--surface-border);
  color: var(--text-tertiary);
  cursor: not-allowed;
}

/* SKELETON LOADERS */
@keyframes skeleton-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    rgba(0, 3, 61, 0.05) 25%,
    rgba(0, 51, 255, 0.07) 50%,
    rgba(0, 3, 61, 0.05) 75%
  );
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
  border-radius: 0.5rem;
}

.skeleton-kpi {
  height: 5.5rem;
  border-radius: 1rem;
}

.skeleton-row {
  height: 2.75rem;
  margin-bottom: 0.5rem;
}

/* Toggle button hover scoped fix */
.btn-toggle-command:hover,
.btn-toggle-danger:hover {
  background-color: inherit !important;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Theme: select option dark styles */
.dark select option {
  background-color: var(--surface-card);
  color: var(--text-primary);
}

/* Ensure status-sent badge background adapts per theme */
.theme-phantom .status-badge.status-sent {
  background-color: rgba(0, 217, 255, 0.08);
  border-color: rgba(0, 217, 255, 0.25);
}
.theme-matrix .status-badge.status-sent {
  background-color: rgba(0, 230, 100, 0.08);
  border-color: rgba(0, 230, 100, 0.25);
}
.theme-midnight .status-badge.status-sent {
  background-color: rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.3);
}
.theme-ember .status-badge.status-sent {
  background-color: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
}
.theme-warm .status-badge.status-sent {
  background-color: rgba(217, 119, 6, 0.08);
  border-color: rgba(217, 119, 6, 0.25);
}
.theme-ocean .status-badge.status-sent {
  background-color: rgba(8, 145, 178, 0.08);
  border-color: rgba(8, 145, 178, 0.25);
}

/* ── Midnight: dark overrides for hardcoded inline styles ── */
.theme-midnight .brand-card-solid,
.theme-midnight [class~="bg-white"],
.theme-midnight .bg-white {
  background-color: var(--surface-card) !important;
  border-color: var(--surface-border) !important;
}
.theme-midnight table thead th,
.theme-midnight .admin-table th {
  background: var(--surface-header-bg) !important;
  color: var(--text-secondary) !important;
}
.theme-midnight main [style*="color: rgba(0,3,61"],
.theme-midnight main [style*="color: #00033D"] {
  color: var(--text-secondary) !important;
}
.theme-midnight main [style*="background: rgba(0,51,255,0.03)"],
.theme-midnight main [style*="background: rgba(0,51,255,0.04)"] {
  background: var(--surface-header-bg) !important;
}
.theme-midnight main [style*="color: #0033FF"] {
  color: var(--brand-azure) !important;
}
.theme-midnight main [style*="background: #FFFFFF"],
.theme-midnight main [style*="background-color: #FFFFFF"] {
  background-color: var(--surface-card) !important;
}
.theme-midnight .form-input,
.theme-midnight input[class~="form-input"],
.theme-midnight select[class~="form-input"] {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-text) !important;
}
.theme-midnight .brand-card-solid {
  box-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.5) !important;
}

/* ── Ember: dark overrides for hardcoded inline styles ── */
.theme-ember .brand-card-solid,
.theme-ember [class~="bg-white"],
.theme-ember .bg-white {
  background-color: var(--surface-card) !important;
  border-color: var(--surface-border) !important;
}
.theme-ember table thead th,
.theme-ember .admin-table th {
  background: var(--surface-header-bg) !important;
  color: var(--text-secondary) !important;
}
.theme-ember main [style*="color: rgba(0,3,61"],
.theme-ember main [style*="color: #00033D"] {
  color: var(--text-secondary) !important;
}
.theme-ember main [style*="background: rgba(0,51,255,0.03)"],
.theme-ember main [style*="background: rgba(0,51,255,0.04)"] {
  background: var(--surface-header-bg) !important;
}
.theme-ember main [style*="color: #0033FF"] {
  color: var(--brand-azure) !important;
}
.theme-ember main [style*="background: #FFFFFF"],
.theme-ember main [style*="background-color: #FFFFFF"] {
  background-color: var(--surface-card) !important;
}
.theme-ember .form-input,
.theme-ember input[class~="form-input"],
.theme-ember select[class~="form-input"] {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-text) !important;
}
.theme-ember .brand-card-solid {
  box-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.5) !important;
}

/* ── Warm: accent color overrides for hardcoded inline styles ── */
.theme-warm main [style*="color: #0033FF"] {
  color: var(--brand-azure) !important;
}
.theme-warm main [style*="border: 1px solid rgba(0,51,255"] {
  border-color: var(--surface-border) !important;
}
.theme-warm .form-input:focus {
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15);
}

/* ── Ocean: accent color overrides for hardcoded inline styles ── */
.theme-ocean main [style*="color: #0033FF"] {
  color: var(--brand-azure) !important;
}
.theme-ocean main [style*="border: 1px solid rgba(0,51,255"] {
  border-color: var(--surface-border) !important;
}
.theme-ocean .form-input:focus {
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);
}

/* Dark mode card shadow enhancement — light box-shadow is invisible on dark surfaces */
.dark .brand-card-solid {
  box-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.4) !important;
}
.theme-phantom .brand-card-solid {
  box-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.6) !important;
}
.theme-matrix .brand-card-solid {
  box-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.6) !important;
}

/* select.form-input — native arrow replaced with SVG chevron */
select.form-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%23666' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.5rem;
}

/* Per-theme focus ring variants for form-input */
.theme-phantom .form-input:focus {
  box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.15);
}
.theme-matrix .form-input:focus {
  box-shadow: 0 0 0 3px rgba(0, 230, 100, 0.15);
}

/* ── PAGY PAGINATION ──────────────────────────────────────────────────────── */
nav.pagy {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

nav.pagy a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  border: 1px solid var(--surface-border);
  color: var(--text-secondary);
  background: var(--surface-header-bg);
}

nav.pagy a:hover {
  background: rgba(0, 51, 255, 0.08);
  border-color: rgba(0, 51, 255, 0.25);
  color: var(--brand-azure);
}

/* Active / current page */
nav.pagy a.current {
  background: var(--brand-azure);
  border-color: var(--brand-azure);
  color: #ffffff;
  cursor: default;
  pointer-events: none;
}

/* Gap (…) */
nav.pagy a.gap {
  border-color: transparent;
  background: transparent;
  color: var(--text-tertiary);
  cursor: default;
  pointer-events: none;
  letter-spacing: 0.08em;
}

/* Prev / Next — slightly wider, use arrow chars Pagy provides */
nav.pagy a[rel="prev"],
nav.pagy a[rel="next"] {
  font-size: 10px;
  padding: 0 14px;
  color: var(--text-secondary);
}

nav.pagy a[aria-disabled="true"]:not(.current):not(.gap) {
  opacity: 0.3;
  pointer-events: none;
}

/* ──────────────────────────────────────────────────────────────
   Custom scrollbars — fully managed by custom_scrollbar_controller.
   Native scrollbar is hidden; the controller injects .fs-scrollbar-track
   and .fs-scrollbar-thumb children into the host element.
   ────────────────────────────────────────────────────────────── */

/* Hide native scrollbar on any element controlled by the custom scrollbar */
.fs-scrollbar-host {
  scrollbar-width: none;     /* Firefox */
  -ms-overflow-style: none;  /* legacy IE/Edge */
}
.fs-scrollbar-host::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none;
}

/* Track — vertical rail pinned to the right edge of the host.
   Always visible (low opacity) so scroll position is discoverable;
   becomes prominent on host hover or while dragging. */
.fs-scrollbar-track {
  position: absolute;
  top: 6px;
  right: 4px;
  bottom: 6px;
  width: 6px;
  border-radius: 999px;
  background: rgba(227, 229, 255, 0.05);
  opacity: 1;
  transition: width 150ms ease, background 150ms ease;
  pointer-events: auto;
  z-index: 50;
}

/* Slightly thicker on host or track hover for easier targeting */
.fs-scrollbar-host:hover .fs-scrollbar-track,
.fs-scrollbar-track:hover,
.fs-scrollbar-track.is-active {
  width: 8px;
  background: rgba(227, 229, 255, 0.08);
}

/* Thumb — the draggable indicator */
.fs-scrollbar-thumb {
  position: absolute;
  left: 0;
  right: 0;
  border-radius: 999px;
  background: rgba(227, 229, 255, 0.3);
  cursor: grab;
  transition: background-color 150ms ease;
  will-change: transform, height;
}
.fs-scrollbar-thumb:hover {
  background: rgba(227, 229, 255, 0.5);
}
.fs-scrollbar-thumb.is-dragging {
  background: var(--brand-sky);
  cursor: grabbing;
}

/* ── Light context variant — for surface/main content areas ── */
.fs-scrollbar-host[data-scrollbar-context="light"] .fs-scrollbar-track {
  background: rgba(0, 51, 255, 0.04);
}
.fs-scrollbar-host[data-scrollbar-context="light"] .fs-scrollbar-track:hover,
.fs-scrollbar-host[data-scrollbar-context="light"] .fs-scrollbar-track.is-active {
  background: rgba(0, 51, 255, 0.08);
}
.fs-scrollbar-host[data-scrollbar-context="light"] .fs-scrollbar-thumb {
  background: rgba(0, 51, 255, 0.25);
}
.fs-scrollbar-host[data-scrollbar-context="light"] .fs-scrollbar-thumb:hover {
  background: rgba(0, 51, 255, 0.4);
}
.fs-scrollbar-host[data-scrollbar-context="light"] .fs-scrollbar-thumb.is-dragging {
  background: var(--brand-azure);
}

/* In dark themes, swap the light-context thumb to a brighter accent */
.dark .fs-scrollbar-host[data-scrollbar-context="light"] .fs-scrollbar-thumb {
  background: rgba(151, 125, 255, 0.3);
}
.dark .fs-scrollbar-host[data-scrollbar-context="light"] .fs-scrollbar-thumb:hover {
  background: rgba(151, 125, 255, 0.5);
}
.dark .fs-scrollbar-host[data-scrollbar-context="light"] .fs-scrollbar-thumb.is-dragging {
  background: var(--brand-sky);
}