/* ================================================================
   Janus App — Theme Tokens
   Dark Mode = default. Override in [data-theme="light"] for
   Light Mode. All colours that appear in the app must come from
   a variable defined here.
   ================================================================ */

:root {
  /* ── Foreground channel ────────────────────────────────────────
     Space-separated RGB channels used by the Tailwind white
     override and in CSS rules: rgb(var(--fg) / 0.8)
     Dark → white; Light → black.                                */
  --fg: 255 255 255;

  /* ── Page backgrounds ─────────────────────────────────────────*/
  --bg-top: #060606;
  --bg-mid: #090909;
  --bg-bottom: #0b0b0b;

  /* ── Opaque surfaces ──────────────────────────────────────────*/
  --surface: #111111;
  --surface-alt: #0d0d0d;
  --surface-deep: #171717;
  --surface-overlay: rgba(10, 10, 10, 0.98);
  --surface-mobile-bar: rgba(7, 7, 7, 0.96);

  /* ── Surface gradients ────────────────────────────────────────*/
  --gradient-card: linear-gradient(180deg, rgba(17, 17, 17, 0.98), rgba(11, 11, 11, 0.99));
  --gradient-modal: linear-gradient(180deg, rgba(15, 15, 15, 0.99), rgba(9, 9, 9, 0.995));
  --gradient-section: linear-gradient(180deg, rgba(14, 14, 14, 0.98), rgba(10, 10, 10, 0.99));

  /* ── Navigation ───────────────────────────────────────────────*/
  --nav-bg: rgba(8, 8, 8, 0.92);

  /* ── Text ─────────────────────────────────────────────────────*/
  --text-main: #f3f4f6;
  --text-soft: rgba(227, 229, 233, 0.78);
  --text-near-white: rgba(244, 244, 245, 0.92);
  --text-muted: rgba(148, 153, 161, 0.82);
  --text-dim: rgba(161, 161, 170, 0.86);
  --text-faint: rgba(212, 212, 216, 0.82);
  --text-placeholder: rgba(113, 113, 122, 0.88);
  --text-chip-default: rgba(200, 204, 212, 0.52);
  --text-on-light: #0f0f0f;

  /* ── Borders ──────────────────────────────────────────────────*/
  --border-subtle: rgba(82, 82, 82, 0.58);
  --border-soft: rgba(82, 82, 82, 0.68);
  --border-strong: rgba(115, 115, 115, 0.72);
  --border-focus: rgba(115, 115, 115, 0.92);
  --border-hover: rgba(115, 115, 115, 0.84);
  --border-active: rgba(163, 163, 163, 0.92);
  --border-table: rgba(148, 163, 184, 0.1);
  --border-chip: rgba(115, 115, 115, 0.38);
  --border-chip-hover: rgba(140, 140, 148, 0.55);
  --border-chip-active: rgba(180, 184, 196, 0.5);

  /* ── Shadows ──────────────────────────────────────────────────*/
  --shadow-xs: 0 4px 12px rgba(0, 0, 0, 0.16);
  --shadow-sm: 0 8px 18px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 18px 38px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.4);
  --shadow-focus: 0 0 0 3px rgba(82, 82, 82, 0.18);
  --shadow-nav: 0 2px 0 rgba(255, 255, 255, 0.02);
  --shadow-card-hover: 0 6px 14px rgba(0, 0, 0, 0.18);
  --shadow-inset-1: inset 0 1px 0 rgb(var(--fg) / 0.01);
  --shadow-inset-3: inset 0 1px 0 rgb(var(--fg) / 0.03);
  --scrim: rgba(3, 3, 3, 0.72);

  /* ── Accent ───────────────────────────────────────────────────*/
  --accent: #b9c0cc;
  --accent-soft: rgba(191, 199, 212, 0.1);

  /* ── Brand / Call-to-action ───────────────────────────────────*/
  --brand-primary: #0f2c5c;
  --cta-bg: #f5f5f5;
  --cta-text: #0f0f0f;

  /* ── Semantic: Success ────────────────────────────────────────*/
  --success-soft: rgba(52, 211, 153, 0.12);
  --success-bg: rgba(16, 185, 129, 0.1);
  --success-border: rgba(16, 185, 129, 0.18);
  --success-text: rgba(110, 231, 183, 0.95);
  --success-chip-border: rgba(72, 187, 120, 0.22);
  --success-chip-text: #c7f4d8;

  /* ── Semantic: Warning ────────────────────────────────────────*/
  --warning-soft: rgba(245, 158, 11, 0.12);
  --warning-chip-border: rgba(245, 158, 11, 0.22);
  --warning-chip-text: #f6ddb0;

  /* ── Semantic: Danger ─────────────────────────────────────────*/
  --danger-soft: rgba(248, 113, 113, 0.12);
  --danger-chip-border: rgba(239, 68, 68, 0.24);
  --danger-chip-text: #f8c9c9;

  /* ── Semantic: Info ───────────────────────────────────────────*/
  --info-bg: rgba(59, 130, 246, 0.09);
  --info-border: rgba(59, 130, 246, 0.18);
  --info-text: rgba(147, 197, 253, 0.95);

  /* ── Status chips ─────────────────────────────────────────────*/
  --status-purple-bg: rgba(168, 148, 210, 0.12);
  --status-purple-border: rgba(168, 148, 210, 0.22);
  --status-purple-text: #c4b5fd;
  --status-violet-bg: rgba(139, 92, 246, 0.08);
  --status-violet-border: rgba(139, 92, 246, 0.3);
  --status-violet-text: rgba(167, 139, 250, 0.85);
  --status-gold-text: rgba(251, 191, 36, 0.85);

  /* ── Project tag & role badge tokens ─────────────────────────*/
  --tag-project-bg: rgba(255,255,255,0.10);
  --tag-project-border: rgba(255,255,255,0.15);
  --tag-project-text: rgba(255,255,255,0.70);
  --tag-id-bg: rgba(255,255,255,0.08);
  --tag-id-border: rgba(255,255,255,0.12);
  --tag-id-text: rgba(255,255,255,0.50);
  --tag-area-bg: rgba(255,255,255,0.08);
  --tag-area-border: rgba(255,255,255,0.12);
  --tag-area-text: rgba(255,255,255,0.68);
  --tag-phase-bg: rgba(14,165,233,0.12);
  --tag-phase-border: rgba(56,189,248,0.20);
  --tag-phase-text: #bae6fd;
  --tag-completed-bg: rgba(16,185,129,0.12);
  --tag-completed-border: rgba(52,211,153,0.20);
  --tag-completed-text: #a7f3d0;
  --role-pl-bg: rgba(245,158,11,0.12);
  --role-pl-border: rgba(251,191,36,0.20);
  --role-pl-text: rgba(252,211,77,0.80);
  --role-pc-bg: rgba(139,92,246,0.12);
  --role-pc-border: rgba(167,139,250,0.20);
  --role-pc-text: rgba(196,181,253,0.80);
  --role-pm-bg: rgba(20,184,166,0.10);
  --role-pm-border: rgba(45,212,191,0.18);
  --role-pm-text: rgba(94,234,212,0.70);
  --role-unverified-bg: rgba(245,158,11,0.08);
  --role-unverified-border: rgba(251,191,36,0.15);
  --role-unverified-text: rgba(252,211,77,0.60);

  /* ── Lessons Learned / GP card tokens ────────────────────────*/
  --ll-border-positive: rgba(52,211,153,0.30);
  --ll-border-negative: rgba(248,113,113,0.30);
  --ll-border-practice: rgba(56,189,248,0.25);
  --ll-border-default: rgba(255,255,255,0.12);
  --ll-score-pos-bg: rgba(16,185,129,0.18);
  --ll-score-pos-border: rgba(52,211,153,0.25);
  --ll-score-pos-text: #6ee7b7;
  --ll-score-neg-bg: rgba(244,63,94,0.18);
  --ll-score-neg-border: rgba(248,113,113,0.25);
  --ll-score-neg-text: #fca5a5;
  --ll-score-neu-bg: rgba(255,255,255,0.08);
  --ll-score-neu-border: rgba(255,255,255,0.12);
  --ll-score-neu-text: rgba(255,255,255,0.50);

  /* ── Profile component ────────────────────────────────────────*/
  --profile-btn-bg: #fafafa;
  --profile-btn-text: #111111;
  --profile-ring-filled: #d4d4d8;

  /* ── Dark surface variants used in templates ──────────────────
     For bg-[#hex] replacements (blue-tinted dark panels).       */
  --surface-blue: #0f1623;
  --surface-navy: #1a1a2e;
  --surface-navy-deep: #0e1e3a;
  --surface-code: #0a1628;


  /* ── Vote bar colors (Beschlussbuch) ─────────────────────────*/
  --vote-ja-bar: rgba(52, 211, 153, 0.65);
  --vote-nein-bar: rgba(248, 113, 113, 0.65);
  --vote-enth-bar: rgba(161, 161, 170, 0.4);
  --vote-opt-bar: rgba(148, 163, 210, 0.55);
  --vote-ja-dot: rgba(52, 211, 153, 0.8);
  --vote-nein-dot: rgba(248, 113, 113, 0.8);
  --vote-enth-dot: rgba(161, 161, 170, 0.55);
  --vote-opt-dot: rgba(148, 163, 210, 0.65);


  --warning-faint: rgba(245, 158, 11, 0.04);
  /* ── Login page ──────────────────────────────────────────────*/
  --login-card-bg: rgba(10, 10, 10, 0.78);
  --shadow-login: 0 24px 56px rgba(0, 0, 0, 0.45);

  /* ── Avatar gradients (per role) ─────────────────────────────*/
  --avatar-gradient: linear-gradient(160deg, rgba(59, 130, 246, 0.9), rgba(30, 64, 175, 0.95));
  --avatar-gradient-indigo: linear-gradient(160deg, rgba(99, 102, 241, 0.9), rgba(67, 56, 202, 0.95));
  --avatar-gradient-teal: linear-gradient(160deg, rgba(20, 184, 166, 0.9), rgba(15, 118, 110, 0.95));

  /* ── Misc ─────────────────────────────────────────────────────*/
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Backward-compat aliases (kept for any future reference) ──*/
  --shadow-soft: var(--shadow-sm);
  --panel: var(--surface);
  --panel-alt: var(--surface-alt);
  --panel-strong: var(--surface-deep);
}

/* ================================================================
   Light Mode overrides
   Activated by data-theme="light" on <html>.
   ================================================================ */

[data-theme="light"] {
  /* ── Foreground channel — navy (matches brand text colour #0C279F)
     text-white/XX → navy at that opacity on light surfaces.      ─*/
  --fg: 12 39 159;

  /* ── Page backgrounds ─────────────────────────────────────────*/
  --bg-top: #F0F0E7;
  --bg-mid: #EEEEE4;
  --bg-bottom: #ECECE0;

  /* ── Opaque surfaces ──────────────────────────────────────────*/
  --surface: #ffffff;
  --surface-alt: #F7F7F2;
  --surface-deep: #F2F2EC;
  --surface-overlay: rgba(255, 255, 255, 0.97);
  --surface-mobile-bar: #F0F0E7;

  /* ── Surface gradients ────────────────────────────────────────*/
  --gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 247, 242, 0.99));
  --gradient-modal: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(252, 252, 249, 0.99));
  --gradient-section: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 247, 242, 0.99));

  /* ── Navigation ───────────────────────────────────────────────*/
  --nav-bg: #F0F0E7;

  /* ── Text ─────────────────────────────────────────────────────*/
  --text-main: #0C279F;
  --text-soft: rgba(12, 39, 159, 0.75);
  --text-near-white: rgba(12, 39, 159, 0.92);
  --text-muted: rgba(30, 60, 150, 0.6);
  --text-dim: rgba(30, 60, 150, 0.72);
  --text-faint: rgba(30, 60, 150, 0.82);
  --text-placeholder: rgba(80, 100, 180, 0.52);
  --text-chip-default: rgba(12, 39, 159, 0.48);
  --text-on-light: #0C279F;

  /* ── Borders ──────────────────────────────────────────────────*/
  --border-subtle: rgba(12, 39, 159, 0.1);
  --border-soft: rgba(12, 39, 159, 0.16);
  --border-strong: rgba(12, 39, 159, 0.26);
  --border-focus: rgba(12, 39, 159, 0.48);
  --border-hover: rgba(12, 39, 159, 0.32);
  --border-active: rgba(12, 39, 159, 0.52);
  --border-table: rgba(12, 39, 159, 0.07);
  --border-chip: rgba(12, 39, 159, 0.18);
  --border-chip-hover: rgba(12, 39, 159, 0.28);
  --border-chip-active: rgba(12, 39, 159, 0.42);

  /* ── Shadows (navy-tinted) ────────────────────────────────────*/
  --shadow-xs: 0 4px 12px rgba(12, 39, 159, 0.08);
  --shadow-sm: 0 8px 18px rgba(12, 39, 159, 0.1);
  --shadow-md: 0 18px 38px rgba(12, 39, 159, 0.12);
  --shadow-lg: 0 30px 70px rgba(12, 39, 159, 0.18);
  --shadow-focus: 0 0 0 3px rgba(12, 39, 159, 0.15);
  --shadow-nav: 0 2px 0 rgba(12, 39, 159, 0.06);
  --shadow-card-hover: 0 6px 14px rgba(12, 39, 159, 0.1);
  --shadow-inset-1: inset 0 1px 0 rgb(var(--fg) / 0.03);
  --shadow-inset-3: inset 0 1px 0 rgb(var(--fg) / 0.06);
  --scrim: rgba(240, 240, 231, 0.82);

  /* ── Accent ───────────────────────────────────────────────────*/
  --accent: #0C279F;
  --accent-soft: rgba(193, 185, 236, 0.22);

  /* ── Brand / Call-to-action ───────────────────────────────────*/
  --brand-primary: #0F2C5C;
  --cta-bg: #0C279F;
  --cta-text: #ffffff;

  /* ── Semantic: Success ────────────────────────────────────────*/
  --success-soft: rgba(5, 150, 105, 0.1);
  --success-bg: rgba(5, 150, 105, 0.08);
  --success-border: rgba(5, 150, 105, 0.25);
  --success-text: #065f46;
  --success-chip-border: rgba(5, 150, 105, 0.28);
  --success-chip-text: #064e3b;

  /* ── Semantic: Warning ────────────────────────────────────────*/
  --warning-soft: rgba(161, 98, 7, 0.1);
  --warning-chip-border: rgba(161, 98, 7, 0.28);
  --warning-chip-text: #78350f;
  --warning-faint: rgba(161, 98, 7, 0.04);

  /* ── Semantic: Danger ─────────────────────────────────────────*/
  --danger-soft: rgba(185, 28, 28, 0.1);
  --danger-chip-border: rgba(185, 28, 28, 0.25);
  --danger-chip-text: #7f1d1d;

  /* ── Semantic: Info ───────────────────────────────────────────*/
  --info-bg: rgba(29, 78, 216, 0.08);
  --info-border: rgba(29, 78, 216, 0.2);
  --info-text: #1e40af;

  /* ── Status chips ─────────────────────────────────────────────*/
  --status-purple-bg: rgba(109, 40, 217, 0.08);
  --status-purple-border: rgba(109, 40, 217, 0.2);
  --status-purple-text: #5b21b6;
  --status-violet-bg: rgba(91, 33, 182, 0.07);
  --status-violet-border: rgba(91, 33, 182, 0.2);
  --status-violet-text: #4c1d95;
  --status-gold-text: #92400e;

  /* ── Project tag & role badge tokens ─────────────────────────*/
  --tag-project-bg: rgba(15,44,92,0.08);
  --tag-project-border: rgba(15,44,92,0.18);
  --tag-project-text: #0F2C5C;
  --tag-id-bg: rgba(160,160,160,0.12);
  --tag-id-border: rgba(160,160,160,0.30);
  --tag-id-text: #707070;
  --tag-area-bg: rgba(15,44,92,0.06);
  --tag-area-border: rgba(15,44,92,0.14);
  --tag-area-text: #0F2C5C;
  --tag-phase-bg: rgba(193,185,236,0.30);
  --tag-phase-border: #C1B9EC;
  --tag-phase-text: #4c1d95;
  --tag-completed-bg: rgba(97,212,138,0.20);
  --tag-completed-border: rgba(27,69,79,0.30);
  --tag-completed-text: #1B454F;
  --role-pl-bg: rgba(161,98,7,0.08);
  --role-pl-border: rgba(161,98,7,0.22);
  --role-pl-text: #78350f;
  --role-pc-bg: rgba(193,185,236,0.25);
  --role-pc-border: #C1B9EC;
  --role-pc-text: #4c1d95;
  --role-pm-bg: rgba(208,239,177,0.40);
  --role-pm-border: rgba(27,69,79,0.25);
  --role-pm-text: #1B454F;
  --role-unverified-bg: rgba(161,98,7,0.06);
  --role-unverified-border: rgba(161,98,7,0.18);
  --role-unverified-text: #92400e;

  /* ── Lessons Learned / GP card tokens ────────────────────────*/
  --ll-border-positive: rgba(97,212,138,0.50);
  --ll-border-negative: rgba(27,69,79,0.35);
  --ll-border-practice: #C1B9EC;
  --ll-border-default: rgba(15,44,92,0.12);
  --ll-score-pos-bg: rgba(208,239,177,0.50);
  --ll-score-pos-border: rgba(97,212,138,0.50);
  --ll-score-pos-text: #1B454F;
  --ll-score-neg-bg: rgba(27,69,79,0.10);
  --ll-score-neg-border: rgba(27,69,79,0.35);
  --ll-score-neg-text: #1B454F;
  --ll-score-neu-bg: rgba(160,160,160,0.12);
  --ll-score-neu-border: rgba(160,160,160,0.30);
  --ll-score-neu-text: #707070;

  /* ── Profile component ────────────────────────────────────────*/
  --profile-btn-bg: #0C279F;
  --profile-btn-text: #ffffff;
  --profile-ring-filled: #0C279F;

  /* ── Dark surface variants → light blue-tinted panels ─────────*/
  --surface-blue: #EAF0FF;
  --surface-navy: #E4EBF8;
  --surface-navy-deep: #D8E4F4;
  --surface-code: #EEF2FF;

  /* ── Vote bar colors (Beschlussbuch) ─────────────────────────*/
  --vote-ja-bar: rgba(5, 150, 105, 0.5);
  --vote-nein-bar: rgba(185, 28, 28, 0.45);
  --vote-enth-bar: rgba(100, 116, 139, 0.35);
  --vote-opt-bar: rgba(79, 107, 187, 0.4);
  --vote-ja-dot: rgba(5, 150, 105, 0.72);
  --vote-nein-dot: rgba(185, 28, 28, 0.65);
  --vote-enth-dot: rgba(100, 116, 139, 0.55);
  --vote-opt-dot: rgba(79, 107, 187, 0.62);

  /* ── Login page ──────────────────────────────────────────────*/
  --login-card-bg: rgba(255, 255, 255, 0.9);
  --shadow-login: 0 24px 56px rgba(12, 39, 159, 0.12);

  /* ── Avatar gradients ────────────────────────────────────────*/
  --avatar-gradient: linear-gradient(160deg, rgba(12, 39, 159, 0.85), rgba(15, 44, 92, 0.95));
  --avatar-gradient-indigo: linear-gradient(160deg, rgba(193, 185, 236, 0.85), rgba(109, 40, 217, 0.75));
  --avatar-gradient-teal: linear-gradient(160deg, rgba(27, 69, 79, 0.85), rgba(20, 184, 166, 0.75));
}

/* ================================================================
   Theme-toggle pill
   ================================================================ */

.theme-pill {
  display: inline-flex;
  align-items: center;
  width: 2.5rem;
  height: 1.375rem;
  border-radius: 999px;
  background: rgb(var(--fg) / 0.1);
  border: 1px solid rgb(var(--fg) / 0.18);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: background 300ms ease, border-color 300ms ease;
}

.theme-pill::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgb(var(--fg) / 0.8);
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), background 300ms ease;
}

[data-theme="light"] .theme-pill::after {
  transform: translateX(1.125rem);
}

/* ================================================================
   HTML root background — ensures iOS safe-area insets (status bar,
   home indicator) match the page background instead of defaulting
   to black when viewport-fit=cover is active.
   ================================================================ */

html {
  background-color: var(--bg-top);
}

/* ================================================================
   Theme-mode transition — applied briefly when switching
   ================================================================ */

html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition-property: background-color, background, color, border-color, box-shadow, fill, stroke !important;
  transition-duration: 380ms !important;
  transition-timing-function: ease !important;
  transition-delay: 0s !important;
}

/* ================================================================
   Light Mode — component overrides
   ================================================================ */

/* ── Nav & Tab-Bar: solid background, kein Blur ─────────────────
   Backdrop-filter rendert semi-transparent und weicht dadurch von
   theme-color / html-background ab. Im Light Mode solide Farbe
   damit alle vier Bereiche (Statusleiste, Nav, Tab-Bar, URL-Leiste)
   exakt gleich aussehen.                                        ── */
[data-theme="light"] .glass-nav,
[data-theme="light"] .mobile-tab-bar {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ── GLOBAL: text-white/XX → navy ────────────────────────────────
   Tailwind CDN löst Opacity-Varianten nicht über --fg auf. Alle
   text-white/* Klassen werden pauschal auf navy gemappt.
   Ausnahmen (z.B. .vs-card) werden weiter unten mit !important
   zurückgepflegt.                                              ── */
[data-theme="light"] [class*="text-white"] {
  color: var(--text-main);
}

/* ── GLOBAL: border-white/XX → navy-tinted border ──────────────  */
[data-theme="light"] [class*="border-white"] {
  border-color: var(--border-soft);
}

/* ── GLOBAL: bg-white/XX → subtiler navy-Ton ───────────────────
   Nur Opacity-Varianten (bg-white/8, /10, …), nicht bg-white.  */
[data-theme="light"] [class*="bg-white/"] {
  background-color: rgb(var(--fg) / 0.04);
}

/* ── Compact table: td-Zellen sicherheitshalber extra navy ─────  */
[data-theme="light"] .compact-table td {
  color: var(--text-main);
}

/* ── VS-Karte: navy Hintergrund, weiße Schrift ────────────────── */
[data-theme="light"] .vs-card {
  background: #0C279F !important;
  border-color: transparent !important;
}

/* Alle text-white/XX und text-emerald-XX Kinder → weiß */
[data-theme="light"] .vs-card [class*="text-white"],
[data-theme="light"] .vs-card [class*="text-emerald"] {
  color: #ffffff !important;
}

/* Gedämpfte Infotexte (Datum, Amber-Hinweis) → 70% weiß */
[data-theme="light"] .vs-card [class*="text-amber-"] {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* Trennlinien innerhalb der Karte */
[data-theme="light"] .vs-card [class*="border-white"],
[data-theme="light"] .vs-card [class*="border-emerald"] {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Avatar-Kreise und andere bg-white/XX Flächen */
[data-theme="light"] .vs-card [class*="bg-white"] {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

/* Buttons in der Karte: weiß-transparent statt navy-transparent */
[data-theme="light"] .vs-card .secondary-btn {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

[data-theme="light"] .vs-card .secondary-btn:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="light"] .vs-card .primary-btn {
  background: #ffffff !important;
  color: #0C279F !important;
  border-color: transparent !important;
}

/* ── Logout / Abmelden → grün im Light Mode ──────────────────*/
[data-theme="light"] a[href="/auth/logout"] {
  color: #1B454F !important;
}
[data-theme="light"] a[href="/auth/logout"]:hover {
  color: #1B454F !important;
}
[data-theme="light"] .settings-dropdown a[href="/auth/logout"] {
  background: rgba(97,212,138,0.14) !important;
  border-color: rgba(97,212,138,0.35) !important;
  color: #1B454F !important;
}
[data-theme="light"] .settings-dropdown a[href="/auth/logout"]:hover {
  background: rgba(97,212,138,0.24) !important;
}

/* ── Flatpickr Dark Theme ─────────────────────────────────────*/
.flatpickr-calendar {
  background: var(--surface) !important;
  border: 1px solid rgb(var(--fg) / 0.12) !important;
  border-radius: 1.25rem !important;
  box-shadow: var(--shadow-md) !important;
  font-family: inherit !important;
  padding: 0.5rem !important;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after { display: none !important; }
.flatpickr-months { padding: 0.25rem 0.25rem 0 !important; }
.flatpickr-months .flatpickr-month { background: transparent !important; color: rgb(var(--fg) / 0.85) !important; fill: rgb(var(--fg) / 0.85) !important; }
.flatpickr-current-month { font-size: 0.875rem !important; font-weight: 500 !important; padding: 0.2rem 0 !important; }
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year { color: rgb(var(--fg) / 0.85) !important; background: transparent !important; font-weight: 500 !important; }
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month { color: rgb(var(--fg) / 0.45) !important; fill: rgb(var(--fg) / 0.45) !important; padding: 0.35rem 0.5rem !important; border-radius: 0.625rem !important; }
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover { color: rgb(var(--fg) / 0.85) !important; fill: rgb(var(--fg) / 0.85) !important; background: rgb(var(--fg) / 0.07) !important; }
.flatpickr-weekdays { background: transparent !important; }
span.flatpickr-weekday { background: transparent !important; color: rgb(var(--fg) / 0.28) !important; font-size: 0.6875rem !important; font-weight: 500 !important; letter-spacing: 0.04em !important; }
.flatpickr-day { color: rgb(var(--fg) / 0.72) !important; border: none !important; border-radius: 0.5rem !important; }
.flatpickr-day:hover { background: rgb(var(--fg) / 0.09) !important; color: rgb(var(--fg) / 0.95) !important; }
.flatpickr-day.today { box-shadow: inset 0 0 0 1px rgb(var(--fg) / 0.18) !important; font-weight: 600 !important; }
.flatpickr-day.today:hover { background: rgb(var(--fg) / 0.09) !important; }
.flatpickr-day.selected,
.flatpickr-day.selected:hover { background: rgb(var(--fg) / 0.88) !important; color: var(--surface) !important; border-color: transparent !important; font-weight: 600 !important; }
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: rgb(var(--fg) / 0.2) !important; }
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover { color: rgb(var(--fg) / 0.15) !important; }

/* ── Date Picker Popup (legacy, unused) ───────────────────────*/
.dp-popup {
  position: fixed;
  z-index: 9999;
  width: 272px;
  background: var(--surface);
  border: 1px solid rgb(var(--fg) / 0.12);
  border-radius: 1.25rem;
  padding: 1rem;
  box-shadow: var(--shadow-md);
  user-select: none;
}

.dp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.dp-month-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(var(--fg) / 0.85);
}

.dp-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.625rem;
  color: rgb(var(--fg) / 0.45);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
}

.dp-nav:hover {
  color: rgb(var(--fg) / 0.85);
  background: rgb(var(--fg) / 0.07);
}

.dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.dp-weekday {
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 500;
  color: rgb(var(--fg) / 0.28);
  padding: 0.25rem 0 0.375rem;
  letter-spacing: 0.04em;
}

.dp-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  border-radius: 0.5rem;
  border: none;
  background: transparent;
  color: rgb(var(--fg) / 0.72);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  padding: 0;
  line-height: 1;
}

.dp-day:hover {
  background: rgb(var(--fg) / 0.09);
  color: rgb(var(--fg) / 0.95);
}

.dp-day.dp-other {
  color: rgb(var(--fg) / 0.2);
}

.dp-day.dp-other:hover {
  color: rgb(var(--fg) / 0.5);
}

.dp-day.dp-today {
  color: rgb(var(--fg) / 0.9);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgb(var(--fg) / 0.18);
}

.dp-day.dp-selected {
  background: rgb(var(--fg) / 0.88);
  color: var(--surface);
  font-weight: 600;
}

.dp-day.dp-selected:hover {
  background: rgb(var(--fg) / 1);
}