/* PATCH: Topbar logout contrast + defensive small subtitle styling */

/* --- Topbar buttons (Déconnexion) on dark background --- */
.topbar .userbox .btn,
.topbar .userbox a.btn {
  background: rgba(255,255,255,0.14) !important;
  border: 1px solid rgba(255,255,255,0.32) !important;
  color: rgba(255,255,255,0.95) !important;
}
.topbar .userbox .btn:hover,
.topbar .userbox a.btn:hover {
  background: rgba(255,255,255,0.20) !important;
  border-color: rgba(255,255,255,0.45) !important;
  color: #fff !important;
}

/* --- Defensive: subtitles under title in event cards if global CSS changes --- */
.event-view.cockpit .card .hd .hd-left {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}
.event-view.cockpit .card .hd .hd-left .collapse-only {
  display: block;
  font-size: 12px;
  line-height: 1.25;
  color: #475569;
  font-weight: 500;
  margin-top: 2px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.event-view.cockpit .card[data-open="1"] .hd .hd-left .collapse-only {
  display: none !important;
}

/* =========================
   Events/view : 1 colonne
   ========================= */

/* Lecture plus zen : cartes en 1 colonne (container est déjà centré avec max-width). */
.page-event-view .grid{
  grid-template-columns: 1fr !important;
}

.page-event-view .span-2{
  grid-column: 1 / -1 !important;
}

/* Sécurité : si le body n'a pas la classe page-event-view, on conserve le span-2 */
.grid .span-2{
  grid-column: 1 / -1;
}


/* ------------------------------------------------------------
   FIX: boutons "Enregistrer" / champs cliquables sur events/view
   Les headers sticky des cartes peuvent recouvrir les contenus
   (z-index) et bloquer les clics. On désactive le sticky ici.
------------------------------------------------------------ */
.event-view .card.collapsible:not(.is-collapsed) > .hd{
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
  box-shadow: none !important;
}




/* --- Fix global : labels wrappant une checkbox ou radio ---
   Corrige le bug où `.form label` (ou d'autres règles globales) impose
   display:block ou justify-content:space-between, ce qui décale la checkbox
   à gauche et le texte à droite.
   Exclusions : .perm-item (user_edit, composant custom), .badge (events/view toggle). */
label:has(> input[type="checkbox"]):not(.perm-item):not(.badge):not(.vol-opt-card),
label:has(> input[type="radio"]):not(.perm-item):not(.badge) {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  font-weight: normal !important;
  cursor: pointer;
  width: auto;
  margin-bottom: 0;
}

/* --- UX / accessibilité (2026) --- */
:focus-visible{
  outline: 3px solid rgba(59,130,246,.55);
  outline-offset: 2px;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  border-radius: 10px;
}

/* Tables lisibles sur mobile */
.card .bd{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media (max-width: 760px){
  .card .bd table{ min-width: 680px; }
}

/* ------------------------------------------------------------
   UX: filet de couleur sur le côté des cartes (cockpit évènement)
   Objectif: rendre l'état (manquant / partiel / ok) scannable.
   NOTE: scoping à .event-view pour éviter d'impacter les pages print.
------------------------------------------------------------ */

.event-view .card{
  position: relative;
  overflow: hidden;
}

/* Par défaut: filet discret (neutre) */
.event-view .card::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:5px;
  background: linear-gradient(180deg, rgba(59,130,246,.28), rgba(59,130,246,.04));
  opacity: .95;
}

/* Ne pas accentuer la barre contexte */
.event-view .card.ctxbar::before{ display:none; }

/* États manuels via data-state */
.event-view .card[data-state="empty"]::before{
  background: linear-gradient(180deg, rgba(239,68,68,.92), rgba(239,68,68,.18));
}
.event-view .card[data-state="partial"]::before{
  background: linear-gradient(180deg, rgba(245,158,11,.92), rgba(245,158,11,.16));
}
.event-view .card[data-state="ok"]::before{
  background: linear-gradient(180deg, rgba(59,130,246,.92), rgba(59,130,246,.16));
}

/* Petit “wash” dans l'entête pour ramener de la couleur sans être agressif */
.event-view .card[data-state="empty"] > .hd{
  background: linear-gradient(90deg, rgba(239,68,68,.07), rgba(255,255,255,0) 42%);
  border-bottom-color: rgba(239,68,68,.10);
}
.event-view .card[data-state="partial"] > .hd{
  background: linear-gradient(90deg, rgba(245,158,11,.07), rgba(255,255,255,0) 42%);
  border-bottom-color: rgba(245,158,11,.10);
}
.event-view .card[data-state="ok"] > .hd{
  background: linear-gradient(90deg, rgba(59,130,246,.06), rgba(255,255,255,0) 42%);
  border-bottom-color: rgba(59,130,246,.10);
}

/* Légère aide à la lecture sur les cartes “à compléter” */
.event-view .card[data-state="empty"]{
  border-color: rgba(239,68,68,.18) !important;
}
.event-view .card[data-state="partial"]{
  border-color: rgba(245,158,11,.18) !important;
}

/* Impression: pas de filet */
@media print{
  .event-view .card::before{ display:none !important; }
}

/* Tables dans les cartes (évite les entêtes cassés genre “TÉLÉP / HONE”) */
.event-view .card table{ table-layout: auto; }
.event-view .card th{ white-space: nowrap; }
.event-view .card td{ word-break: break-word; }

/* Essentiels cliquables */
.event-view a.ess-jump{ text-decoration:none; cursor:pointer; }
.event-view a.ess-jump:hover{ filter: brightness(0.98); }

/* Petit highlight à l'arrivée */
.event-view .card.pulse{
  box-shadow: 0 0 0 4px rgba(59,130,246,.18);
  transition: box-shadow .25s ease;
}

/* =========================
   Global icons system
   ========================= */

.icon{
  display:inline-block;
  vertical-align: middle;
  fill: currentColor;
}

/* Minimal icon-button style (use with aria-label/title on the button/link) */
.icon-btn{
  appearance:none;
  background: transparent;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 999px;
  padding: 6px;
  cursor: pointer;
  color: rgba(0,0,0,.62);
  line-height: 0;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}

/* Label buttons with an icon (keeps classic .btn look, adds spacing) */
.btn.btn-icn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn.btn-icn .btn-label{ display:inline-block; }
.btn.btn-icn .icon{ flex: 0 0 auto; }

/* Make icon-only buttons slightly smaller when used with .small */
.btn.small.icon-btn{ padding:5px; }
.icon-btn:hover{
  background: rgba(59,130,246,.08);
  border-color: rgba(59,130,246,.25);
  color: rgba(59,130,246,1);
  transform: translateY(-1px);
}
.icon-btn:active{
  transform: translateY(0);
}
.icon-btn.danger:hover{
  background: rgba(239,68,68,.08);
  border-color: rgba(239,68,68,.25);
  color: rgba(239,68,68,1);
}

/* Accessible text for icon-only buttons/links */
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* When using icon-btn together with .btn (keeps layout but makes it discreet) */
.btn.icon-btn{
  gap:0;
  padding:6px;
  border-radius:999px;
  background: transparent;
  color: rgba(0,0,0,.62);
}
.btn.small.icon-btn{ padding:5px; }

/* Override destructive .btn.danger full-red background when used as icon-only */
.btn.danger.icon-btn{
  background: transparent;
  color: rgba(239,68,68,.92);
  border-color: rgba(239,68,68,.22);
}
.btn.danger.icon-btn:hover{
  background: rgba(239,68,68,.08);
  border-color: rgba(239,68,68,.25);
  color: rgba(239,68,68,1);
}

/* ------------------------------------------------------------
   FIX: actions “Modifier / Supprimer” qui se chevauchent
   dans la table des écarts techniques (events/view)
------------------------------------------------------------ */
.event-view #tech-gaps td.gap-actions-td{
  white-space: nowrap;
  min-width: 88px;
}
.event-view #tech-gaps .gap-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: nowrap;
}
.event-view #tech-gaps .gap-actions .icon-btn{ font-size: 0; }
.event-view #tech-gaps .gap-actions-form{ margin: 0; }
.event-view #tech-gaps .gap-actions .btn.icon-btn{ flex: 0 0 auto; }


/* Icon summaries (details/summary) : remove default marker */
summary.icon-btn{ list-style: none; }
summary.icon-btn::-webkit-details-marker{ display:none; }
summary.icon-btn::marker{ content:''; }


/* Micro-tours (onboarding) */
.tour-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.35);
  z-index:9998;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:18px;
}
.tour-card{
  width:min(640px,100%);
  background:#fff;
  border-radius:14px;
  box-shadow:0 10px 40px rgba(0,0,0,.25);
  padding:14px 14px 12px;
  z-index:9999;
  border:1px solid rgba(0,0,0,.08);
}
.tour-title{font-weight:800;margin:0 0 6px;font-size:15px;}
.tour-text{margin:0 0 10px;line-height:1.35;color:rgba(0,0,0,.75);}
.tour-actions{display:flex;gap:8px;justify-content:flex-end;}
.tour-actions .btn{padding:8px 12px;border-radius:10px;border:1px solid rgba(0,0,0,.12);background:rgba(255,255,255,.9);text-decoration:none;color:inherit;}
.tour-actions .btn.primary{border-color:transparent;background:rgba(40,120,255,.12);}

/* --- Guided visit overlay + bubbles --- */
.visit-overlay{
  position:fixed;
  inset:0;
  /* stronger dim + subtle blur for a real "overlay" feeling */
  background:rgba(10,12,16,0.42);
  /* léger flou, pas trop "brouillard" */
  -webkit-backdrop-filter: blur(0.8px);
  backdrop-filter: blur(0.8px);
  z-index:9998;
}
.visit-bubble{
  position:fixed;
  max-width:440px;
  background:rgba(255,255,255,0.96);
  border-radius:18px;
  padding:18px 20px;
  border:1px solid rgba(0,0,0,0.10);
  box-shadow:
    0 28px 70px rgba(0,0,0,0.26),
    0 8px 20px rgba(0,0,0,0.16);
  z-index:9999;
  animation: visitShadowPulse 6s ease-in-out infinite;
}

@keyframes visitShadowPulse{
  0%{ box-shadow: 0 28px 70px rgba(0,0,0,0.24), 0 8px 20px rgba(0,0,0,0.14); }
  50%{ box-shadow: 0 34px 78px rgba(0,0,0,0.28), 0 10px 24px rgba(0,0,0,0.18); }
  100%{ box-shadow: 0 28px 70px rgba(0,0,0,0.24), 0 8px 20px rgba(0,0,0,0.14); }
}
.visit-bubble:before{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0));
  z-index:-1;
  pointer-events:none;
}
.visit-bubble h3{margin:0 0 8px 0;font-size:16px;}
.visit-bubble p{margin:0;font-size:14px;line-height:1.35;color:#222;}
.visit-bubble .visit-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:14px;
}
.visit-bubble .visit-actions .btn{
  padding:8px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.14);
  background:rgba(255,255,255,.92);
  text-decoration:none;
  color:inherit;
}
.visit-bubble .visit-actions .btn.primary{
  border-color:transparent;
  background:rgba(40,120,255,.16);
}

.visit-mascot{
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  padding:0;

  position:fixed;
  right:18px;
  bottom:18px;
  width:46px;
  height:46px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.92);
  border:1px solid rgba(0,0,0,0.12);
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
  z-index:10000;
  text-decoration:none;
  color:inherit;
  animation: mascotBob 4.5s ease-in-out infinite;
}
.visit-mascot span{font-size:22px; line-height:1;}
.visit-mascot--done{opacity:0.85;}
.visit-mascot--done:hover{opacity:1;}
@keyframes mascotBob{0%{transform:translateY(0);}50%{transform:translateY(-2px);}100%{transform:translateY(0);}}
.visit-bubble--center{left:50%;top:140px;transform:translateX(-50%);}
.visit-bubble--topleft{left:28px;top:110px;}
.visit-bubble--topright{right:28px;top:110px;}
.visit-bubble--bottomleft{left:28px;bottom:28px;}
.visit-bubble--bottomright{right:28px;bottom:28px;}

/* Assistant utilisateur (v1) */
.assistant-fab{
  position:fixed;
  right:18px;
  bottom:74px;
  width:52px;
  height:52px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.92);
  border:1px solid rgba(0,0,0,0.12);
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
  z-index:10001;
  cursor:pointer;
}
.assistant-fab span{font-size:22px; line-height:1;}

.assistant-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.22);
  z-index:10002;
  display:none;
  padding:18px;
}
.assistant-modal.open{display:flex; align-items:flex-end; justify-content:flex-end;}
.assistant-panel{
  width:min(420px, 100%);
  max-height: min(78vh, 720px);
  background:rgba(255,255,255,0.96);
  border:1px solid rgba(0,0,0,0.12);
  border-radius:18px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.22);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.assistant-hd{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid rgba(0,0,0,0.08);
}
.assistant-sub{opacity:.65; font-size:12px; margin-top:2px;}
.assistant-body{padding:12px 14px; overflow:auto; flex:1;}
.assistant-sug{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px;}
.assistant-chip{
  border:1px solid rgba(0,0,0,0.12);
  background:rgba(40,120,255,.10);
  padding:7px 10px;
  border-radius:999px;
  cursor:pointer;
  font-size:13px;
}
.assistant-chat{display:flex; flex-direction:column; gap:10px;}
.assistant-msg{max-width: 90%;}
.assistant-msg.me{align-self:flex-end;}
.assistant-msg.bot{align-self:flex-start;}
.assistant-bubble{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,0.10);
  background:rgba(255,255,255,0.92);
  white-space:pre-wrap;
}
.assistant-msg.me .assistant-bubble{background:rgba(40,120,255,.12);}
.assistant-form{display:flex; gap:10px; padding:12px 14px; border-top:1px solid rgba(0,0,0,0.08);}
.assistant-form input{
  flex:1;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,0.14);
  background:rgba(255,255,255,0.95);
}
.assistant-form button{padding:10px 12px; border-radius:12px;}

/* ================================================================
   SIDEBAR LAYOUT + DARK / LIGHT THEME
   ================================================================ */

/* --- CSS custom properties (shared) --- */
:root {
  --sidebar-w: 220px;
}

/* Light theme (default) */
html, html[data-theme="light"] {
  --th-bg:              #f6f8fb;
  --th-sidebar:         #ffffff;
  --th-sidebar-bd:      #e3e8f0;
  --th-card:            #ffffff;
  --th-card-bd:         rgba(15,23,42,.08);
  --th-text:            #0f172a;
  --th-muted:           #64748b;
  --th-input-bg:        #ffffff;
  --th-input-bd:        rgba(15,23,42,.10);
  --th-nav-active-bg:   rgba(37,99,235,.10);
  --th-nav-active:      #2563eb;
  --th-nav-item:        #475569;
  --th-nav-hover:       rgba(15,23,42,.05);
  --th-nav-active-bar:  #2563eb;
  --th-btn-bg:          #ffffff;
  --th-btn-bd:          rgba(15,23,42,.12);
  --th-btn-text:        #334155;
  --th-table-head:      rgba(15,23,42,.04);
  --th-table-hover:     rgba(59,130,246,.04);
}

/* Dark theme */
html[data-theme="dark"] {
  --th-bg:              #0b1220;
  --th-sidebar:         #091427;
  --th-sidebar-bd:      #1a2d45;
  --th-card:            #0f1e33;
  --th-card-bd:         #1a2d45;
  --th-text:            #e2e8f5;
  --th-muted:           #7b8fb5;
  --th-input-bg:        #0c1a2e;
  --th-input-bd:        #1a2d45;
  --th-nav-active-bg:   rgba(34,211,238,.12);
  --th-nav-active:      #22d3ee;
  --th-nav-item:        #7b8fb5;
  --th-nav-hover:       rgba(255,255,255,.05);
  --th-nav-active-bar:  #22d3ee;
  --th-btn-bg:          rgba(255,255,255,.07);
  --th-btn-bd:          rgba(255,255,255,.12);
  --th-btn-text:        #e2e8f5;
  --th-table-head:      rgba(255,255,255,.04);
  --th-table-hover:     rgba(255,255,255,.03);
}

/* --- Sidebar structure --- */
.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--th-sidebar);
  border-right: 1px solid var(--th-sidebar-bd);
  display: flex;
  flex-direction: column;
  z-index: 1100;
  overflow-y: auto;
  overflow-x: hidden;
  transition: transform .25s cubic-bezier(.4,0,.2,1), background .2s ease;
  scrollbar-width: thin;
}

.sidebar__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--th-sidebar-bd);
  text-decoration: none;
  min-height: 58px;
  flex-shrink: 0;
}

.sidebar__logo-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, #3b82f6, #22d3ee);
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.sidebar__logo-icon img { height: 22px; width: auto; border-radius: 6px; display: block; }

.sidebar__logo-name {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .05em;
  color: var(--th-text);
  line-height: 1.2;
}
.sidebar__logo-sub { font-size: 10px; color: var(--th-muted); margin-top: 1px; }

.sidebar__nav {
  flex: 1;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar__nav a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--th-nav-item);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .12s ease, color .12s ease;
  white-space: nowrap;
}
.sidebar__nav a:hover { background: var(--th-nav-hover); color: var(--th-text); }
.sidebar__nav a.active {
  background: var(--th-nav-active-bg);
  color: var(--th-nav-active);
  font-weight: 600;
  border-left-color: var(--th-nav-active-bar);
  padding-left: 9px;
}

.sidebar__footer {
  padding: 12px 16px;
  border-top: 1px solid var(--th-sidebar-bd);
}

/* --- Sidebar backdrop (mobile) --- */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1099;
  cursor: pointer;
}
body.sidebar-open .sidebar-overlay { display: block; }

/* --- Theme toggle button --- */
.theme-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  cursor: pointer;
  color: rgba(255,255,255,.85);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  transition: background .12s ease;
}
.theme-toggle:hover { background: rgba(255,255,255,.14); color: #fff; }
.theme-toggle .theme-toggle__icon { font-size: 14px; }

/* --- Desktop: hide topbar entirely, sidebar replaces it --- */
@media (min-width: 861px) {
  .topbar     { display: none !important; }
  body        { padding-left: var(--sidebar-w); }
  .bottom-nav { display: none !important; }
}

/* --- Mobile: sidebar as drawer --- */
@media (max-width: 860px) {
  .sidebar { transform: translateX(calc(-1 * var(--sidebar-w))); }
  body.sidebar-open .sidebar { transform: translateX(0); box-shadow: 4px 0 32px rgba(0,0,0,.3); }
}

/* ================================================================
   DARK THEME — component overrides
   ================================================================ */
html[data-theme="dark"] body {
  background: var(--th-bg);
  color: var(--th-text);
}
html[data-theme="dark"] html,
html[data-theme="dark"] {
  background: var(--th-bg);
}

/* Background */
html[data-theme="dark"],
html[data-theme="dark"] body { background: var(--th-bg) !important; }

/* Cards */
html[data-theme="dark"] .card {
  background: var(--th-card) !important;
  border-color: var(--th-card-bd) !important;
  backdrop-filter: none !important;
}
html[data-theme="dark"] .card .hd {
  background: none !important;
  border-color: var(--th-card-bd) !important;
}
html[data-theme="dark"] .card .hd h1,
html[data-theme="dark"] .card .hd h2,
html[data-theme="dark"] .card .hd h3 { color: var(--th-text); }
html[data-theme="dark"] .card .hd .toggle { background: rgba(255,255,255,.08); border-color: var(--th-card-bd); }

/* Lists */
html[data-theme="dark"] .list-item { background: var(--th-card); border-color: var(--th-card-bd); }
html[data-theme="dark"] .kpi .item  { background: rgba(255,255,255,.04); border-color: var(--th-card-bd); }
html[data-theme="dark"] .subcard    { background: rgba(255,255,255,.04); border-color: var(--th-card-bd); }

/* Typography */
html[data-theme="dark"] small,
html[data-theme="dark"] .muted { color: var(--th-muted) !important; }
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4 { color: var(--th-text); }
html[data-theme="dark"] p,
html[data-theme="dark"] label,
html[data-theme="dark"] .label { color: var(--th-text); }

/* Inputs */
html[data-theme="dark"] input,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: var(--th-input-bg) !important;
  border-color: var(--th-input-bd) !important;
  color: var(--th-text) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--th-muted); }
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  border-color: #22d3ee !important;
  box-shadow: 0 0 0 3px rgba(34,211,238,.15) !important;
}
html[data-theme="dark"] input[type="checkbox"] { accent-color: #22d3ee; }

/* Buttons */
html[data-theme="dark"] .btn,
html[data-theme="dark"] button:not(.theme-toggle):not(.burger):not(.icon-btn):not(.sidebar__burger) {
  background: var(--th-btn-bg);
  border-color: var(--th-btn-bd);
  color: var(--th-btn-text);
}
html[data-theme="dark"] .btn.primary { background: #22d3ee; border-color: #22d3ee; color: #0b1220; }
html[data-theme="dark"] .btn.danger  { background: #f87171; border-color: #f87171; color: #fff; }

/* Badges */
html[data-theme="dark"] .badge { border-color: var(--th-card-bd); }
html[data-theme="dark"] .badge.ok   { background: rgba(74,222,128,.14);  color: #4ade80;  border-color: rgba(74,222,128,.22); }
html[data-theme="dark"] .badge.warn { background: rgba(251,191,36,.14);  color: #fbbf24;  border-color: rgba(251,191,36,.22); }
html[data-theme="dark"] .badge.danger { background: rgba(248,113,113,.14); color: #f87171; border-color: rgba(248,113,113,.22); animation: none !important; }
html[data-theme="dark"] .pill { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }

/* Notices / alerts */
html[data-theme="dark"] .notice { background: var(--th-card); border-color: var(--th-card-bd); color: var(--th-text); }
html[data-theme="dark"] .notice.ok, html[data-theme="dark"] .notice.success { background: rgba(74,222,128,.08); border-color: rgba(74,222,128,.20); }
html[data-theme="dark"] .notice.error { background: rgba(248,113,113,.08); border-color: rgba(248,113,113,.20); }
html[data-theme="dark"] .notice.warning { background: rgba(251,191,36,.08); border-color: rgba(251,191,36,.20); }
html[data-theme="dark"] .alert-success, html[data-theme="dark"] .alert.alert-success { background: rgba(74,222,128,.10); border-color: rgba(74,222,128,.25); color: #4ade80; }
html[data-theme="dark"] .alert-danger,  html[data-theme="dark"] .alert.alert-danger  { background: rgba(248,113,113,.10); border-color: rgba(248,113,113,.25); color: #f87171; }

/* Tables */
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td { border-color: var(--th-card-bd); color: var(--th-text); }
html[data-theme="dark"] .table thead th { background: var(--th-table-head); color: var(--th-muted); }
html[data-theme="dark"] .table tbody tr:hover td { background: var(--th-table-hover); }
html[data-theme="dark"] table thead th { background: var(--th-table-head); }
html[data-theme="dark"] table tbody tr:hover { background: var(--th-table-hover); }

/* Topbar */
html[data-theme="dark"] .topbar { background: #0c1628 !important; border-bottom-color: #1a2d45 !important; }

/* Bottom-nav */
html[data-theme="dark"] .bottom-nav { background: #0c1628; border-top-color: #1a2d45; }
html[data-theme="dark"] .bottom-nav__item { color: var(--th-muted); }
html[data-theme="dark"] .bottom-nav__item.active { color: #22d3ee; }

/* Code */
html[data-theme="dark"] code { background: rgba(255,255,255,.08); color: #22d3ee; border-color: var(--th-card-bd); }

/* Links */
html[data-theme="dark"] a { color: inherit; }

/* Event-view state bars */
html[data-theme="dark"] .event-view .card[data-state="empty"]   { border-color: rgba(239,68,68,.28) !important; }
html[data-theme="dark"] .event-view .card[data-state="partial"] { border-color: rgba(245,158,11,.28) !important; }
html[data-theme="dark"] .event-view .card[data-state="ok"]      { border-color: rgba(59,130,246,.28) !important; }
html[data-theme="dark"] .event-view .card[data-state="empty"]  > .hd { background: linear-gradient(90deg, rgba(239,68,68,.10), rgba(15,30,51,0) 45%) !important; }
html[data-theme="dark"] .event-view .card[data-state="partial"] > .hd { background: linear-gradient(90deg, rgba(245,158,11,.10), rgba(15,30,51,0) 45%) !important; }
html[data-theme="dark"] .event-view .card[data-state="ok"]     > .hd { background: linear-gradient(90deg, rgba(59,130,246,.09), rgba(15,30,51,0) 45%) !important; }
html[data-theme="dark"] .event-view .card { background: var(--th-card) !important; }

/* Admin perm items */
html[data-theme="dark"] .admin-user-edit-page .perm-item { background: rgba(255,255,255,.04); border-color: var(--th-card-bd); }
html[data-theme="dark"] .admin-user-edit-page .perm-item:hover { background: rgba(255,255,255,.07); }
html[data-theme="dark"] .admin-user-edit-page .perm-item.is-active { background: rgba(34,211,238,.07); border-color: rgba(34,211,238,.18); }
html[data-theme="dark"] .admin-user-edit-page .perm-item.is-denied { background: rgba(248,113,113,.06); border-color: rgba(248,113,113,.18); }
html[data-theme="dark"] .admin-user-edit-page .perm-label { color: var(--th-text); }
html[data-theme="dark"] .admin-user-edit-page .perm-key { background: rgba(255,255,255,.08); color: var(--th-muted); }

/* Payments tabs */
html[data-theme="dark"] .pay-tabs { border-bottom-color: var(--th-card-bd); }
html[data-theme="dark"] .pay-tab  { color: var(--th-muted); }
html[data-theme="dark"] .pay-tab:hover { background: rgba(255,255,255,.05); color: var(--th-text); }
html[data-theme="dark"] .pay-tab.active { background: var(--th-card); color: #22d3ee; border-color: var(--th-card-bd); border-bottom-color: var(--th-card); }
html[data-theme="dark"] .pay-info { background: rgba(59,130,246,.10); border-color: rgba(59,130,246,.25); color: #93c5fd; }
html[data-theme="dark"] .pay-warn { background: rgba(251,191,36,.08); border-color: rgba(251,191,36,.22); color: #fbbf24; }

/* Diff */
html[data-theme="dark"] .diff { background: rgba(255,255,255,.04); border-color: var(--th-card-bd); }
html[data-theme="dark"] .diff-line { border-color: var(--th-card-bd); color: var(--th-text); }

/* Season selector */
html[data-theme="dark"] .dash-season-select { background: var(--th-input-bg) !important; border-color: var(--th-input-bd) !important; color: var(--th-text) !important; }

/* Tour cards */
html[data-theme="dark"] .tour-card { background: var(--th-card); border-color: var(--th-card-bd); }
html[data-theme="dark"] .tour-title { color: var(--th-text); }
html[data-theme="dark"] .tour-text  { color: var(--th-muted); }

/* Assistant panel */
html[data-theme="dark"] .assistant-panel { background: var(--th-card); border-color: var(--th-card-bd); }
html[data-theme="dark"] .assistant-hd  { border-color: var(--th-card-bd); color: var(--th-text); }
html[data-theme="dark"] .assistant-bubble { background: rgba(255,255,255,.06); border-color: var(--th-card-bd); color: var(--th-text); }
html[data-theme="dark"] .assistant-msg.me .assistant-bubble { background: rgba(34,211,238,.12); }
html[data-theme="dark"] .assistant-form { border-color: var(--th-card-bd); }
html[data-theme="dark"] .assistant-form input { background: var(--th-input-bg) !important; border-color: var(--th-input-bd) !important; color: var(--th-text) !important; }
html[data-theme="dark"] .assistant-chip { background: rgba(34,211,238,.10); border-color: rgba(34,211,238,.20); color: #22d3ee; }

/* Visit mascot + modal */
html[data-theme="dark"] .visit-mascot { background: var(--th-card); border-color: var(--th-card-bd); }
html[data-theme="dark"] .visit-bubble { background: var(--th-card); border-color: var(--th-card-bd); }
html[data-theme="dark"] .visit-bubble p { color: var(--th-muted); }
html[data-theme="dark"] .visit-bubble h3 { color: var(--th-text); }

/* Modal emails */
html[data-theme="dark"] #emailModal .modal { background: var(--th-card); border-color: var(--th-card-bd); }
html[data-theme="dark"] #emailModal .modal-hd { border-color: var(--th-card-bd); color: var(--th-text); }

/* hr/sep */
html[data-theme="dark"] hr,
html[data-theme="dark"] .sep,
html[data-theme="dark"] .divider { border-color: var(--th-card-bd) !important; }

/* page divs */
html[data-theme="dark"] .page { color: var(--th-text); }