/* ============================================================================
   THÈME AURORA — design "moderne/animé" optionnel pour l'extranet, calqué sur le
   dashboard WiFi PassWifi. Deux variantes :
     • data-theme="aurora"       → moderne SOMBRE (navy + réseau lumineux)
     • data-theme="aurora-light" → moderne CLAIR (clair aéré + réseau discret)
   Mécanisme : redéfinit les variables CSS de dashboard.css → restyle TOUT
   l'extranet sans toucher au markup. NON DESTRUCTIF (classic = défaut, inchangé).
   ============================================================================ */

/* ─────────────────────────  TRONC COMMUN (les 2 variantes)  ───────────────── */
html[data-theme^="aurora"] body{
  font-family:'Plus Jakarta Sans','DM Sans',sans-serif;
}
html[data-theme^="aurora"] h1,html[data-theme^="aurora"] h2,
html[data-theme^="aurora"] h3,html[data-theme^="aurora"] h4,
html[data-theme^="aurora"] .page-title,html[data-theme^="aurora"] .kpi-value,
html[data-theme^="aurora"] .card-title{font-family:'Plus Jakarta Sans',sans-serif !important;}

/* canvas réseau (injecté par base.html.twig) — derrière tout le contenu */
#aurora-net{position:fixed;inset:0;z-index:0;pointer-events:none;}
html[data-theme^="aurora"] .app{position:relative;z-index:1;}
html[data-theme^="aurora"] .impersonate-bar{position:relative;z-index:3;}

/* contenu transparent → le réseau respire entre les cartes */
html[data-theme^="aurora"] .content,
html[data-theme^="aurora"] .main{background:transparent;}

/* sidebar + topbar en verre dépoli */
html[data-theme^="aurora"] .sidebar,
html[data-theme^="aurora"] .topbar{
  background:var(--glass-nav);
  backdrop-filter:blur(16px) saturate(1.18);-webkit-backdrop-filter:blur(16px) saturate(1.18);
}
/* cartes / panneaux / kpi en LIQUID GLASS : translucide + flou prononcé + reflet
   (sheen) en diagonale + saturation (le fond coloré transparaît, effet verre) */
html[data-theme^="aurora"] .card,
html[data-theme^="aurora"] .panel,
html[data-theme^="aurora"] .kpi{
  background:linear-gradient(135deg,var(--glass-sheen),transparent 42%),var(--surface-glass);
  backdrop-filter:blur(9px) saturate(1.35);-webkit-backdrop-filter:blur(9px) saturate(1.35);
  border-color:var(--border);
}
/* micro-interaction au survol (sensibilité Emil Kowalski) */
html[data-theme^="aurora"] .card{transition:transform .24s cubic-bezier(.23,1,.32,1),box-shadow .24s;}
@media (hover:hover) and (pointer:fine){
  html[data-theme^="aurora"] .card:hover{transform:translateY(-2px);box-shadow:var(--card-hover-shadow);}
}
/* corrections des couleurs claires "en dur" de dashboard.css */
html[data-theme^="aurora"] .alert-row.severity-warning{background:var(--amber-soft) !important;border-left-color:var(--amber);}
html[data-theme^="aurora"] .alerts-recap{background:var(--green-soft) !important;border-color:var(--border);color:var(--text-2);}
html[data-theme^="aurora"] .alerts-empty-text strong{color:var(--green);}
html[data-theme^="aurora"] .alerts-empty-text span{color:var(--text-2);}
/* "Vos services CD CONNECT" : dashboard.css fixe un fond clair EN DUR sur .tone-*
   → illisible en sombre (texte clair sur fond clair). On repasse sur les teintes
   *-soft (translucides, adaptées au thème) : lisible en clair ET en sombre. */
html[data-theme^="aurora"] .service.tone-blue,
html[data-theme^="aurora"] .service.tone-blue.active{background:var(--primary-soft);border-color:var(--border);}
html[data-theme^="aurora"] .service.tone-teal,
html[data-theme^="aurora"] .service.tone-teal.active{background:var(--teal-soft);border-color:var(--border);}
html[data-theme^="aurora"] .service.tone-green,
html[data-theme^="aurora"] .service.tone-green.active{background:var(--green-soft);border-color:var(--border);}
html[data-theme^="aurora"] .service.tone-violet,
html[data-theme^="aurora"] .service.tone-violet.active{background:var(--violet-soft);border-color:var(--border);}
html[data-theme^="aurora"] .service.active{box-shadow:inset 0 0 0 1px var(--border-strong);}
/* scrollbars */
html[data-theme^="aurora"] *::-webkit-scrollbar{width:10px;height:10px;}
html[data-theme^="aurora"] *::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:6px;}
html[data-theme^="aurora"] *::-webkit-scrollbar-track{background:transparent;}
html[data-theme^="aurora"] ::selection{background:rgba(59,130,246,.30);}
/* accessibilité : pas de réseau animé si refusé */
@media (prefers-reduced-motion:reduce){#aurora-net{display:none;}}


/* ───────────────  POLISH "premium dashboard" (les 2 variantes modernes)  ───────────────
   Applique la sensibilité Emil Kowalski : rayons plus généreux, verre avec liseré
   lumineux, grands chiffres en Fredoka, boutons tactiles, CTA dégradé, focus visible. */
html[data-theme^="aurora"]{ --radius:20px; --radius-sm:12px; --ease-out:cubic-bezier(.23,1,.32,1); }

/* cartes : verre + liseré lumineux interne (profondeur premium) */
html[data-theme^="aurora"] .card,
html[data-theme^="aurora"] .panel,
html[data-theme^="aurora"] .kpi{
  border-radius:var(--radius);
  box-shadow:var(--shadow-md), inset 0 1px 0 var(--glass-hi), inset 0 -1px 2px rgba(0,0,0,.05);
}
/* Cartes/panneaux/tuiles définis en <style> INLINE des pages (admin + client) :
   ils utilisent `background:var(--surface)` (opaque) → restaient pleins au lieu de
   "liquid glass". On les surcharge ici (sélecteur plus spécifique que le .x inline).
   On garde leur rayon propre (pas de --radius forcé sur les petites tuiles). */
html[data-theme^="aurora"] .kpi-card,
html[data-theme^="aurora"] .chart-card,
html[data-theme^="aurora"] .plan-card,
html[data-theme^="aurora"] .period-card,
html[data-theme^="aurora"] .choice-card,
html[data-theme^="aurora"] .client-card,
html[data-theme^="aurora"] .total-card,
html[data-theme^="aurora"] .alert-kpi,
html[data-theme^="aurora"] .filter-card,
html[data-theme^="aurora"] .filter-bar,
html[data-theme^="aurora"] .price-summary,
html[data-theme^="aurora"] .superv-frame-card,
html[data-theme^="aurora"] .aside-feature,
html[data-theme^="aurora"] .line-hero,
html[data-theme^="aurora"] .site-hero,
html[data-theme^="aurora"] .meta-tile,
html[data-theme^="aurora"] .parc-section,
html[data-theme^="aurora"] .liaison,
html[data-theme^="aurora"] .notif-panel{
  background:linear-gradient(135deg,var(--glass-sheen),transparent 42%),var(--surface-glass);
  backdrop-filter:blur(9px) saturate(1.35);-webkit-backdrop-filter:blur(9px) saturate(1.35);
  border-color:var(--border);
  box-shadow:var(--shadow-md), inset 0 1px 0 var(--glass-hi), inset 0 -1px 2px rgba(0,0,0,.05);
}
/* grands chiffres en Fredoka (signature du dashboard WiFi) */
html[data-theme^="aurora"] .kpi-value{font-family:'Fredoka','Plus Jakarta Sans',sans-serif !important;letter-spacing:-.01em;}
html[data-theme^="aurora"] .page-title{letter-spacing:-.025em;}

/* boutons : feedback tactile à la pression + transitions ciblées */
html[data-theme^="aurora"] .btn{
  border-radius:999px;
  transition:transform .15s var(--ease-out),box-shadow .2s,background .2s,border-color .2s,filter .2s;
}
html[data-theme^="aurora"] .btn:active{transform:scale(.97);}
html[data-theme^="aurora"] .btn-primary{
  background:linear-gradient(135deg,var(--primary),var(--brand-2)) !important;border:0;
  box-shadow:0 6px 16px -8px var(--primary);
}
@media (hover:hover) and (pointer:fine){
  html[data-theme^="aurora"] .btn-primary:hover{filter:brightness(1.06);box-shadow:0 9px 22px -8px var(--primary);}
  html[data-theme^="aurora"] .btn-secondary:hover{border-color:var(--border-strong);transform:translateY(-1px);}
}

/* onglets de période : pill, actif en dégradé */
html[data-theme^="aurora"] .period-tabs{border-radius:999px;}
html[data-theme^="aurora"] .period-tabs button{border-radius:999px;transition:color .18s,background .18s;}
html[data-theme^="aurora"] .period-tabs button.active,
html[data-theme^="aurora"] .period-tabs button[aria-selected="true"]{
  background:linear-gradient(135deg,var(--primary),var(--brand-2)) !important;color:#fff !important;
}

/* navigation : actif accentué, hover doux */
html[data-theme^="aurora"] .nav-item{border-radius:12px;transition:background .18s,color .18s;}
@media (hover:hover){html[data-theme^="aurora"] .nav-item:hover{background:var(--primary-soft);}}
html[data-theme^="aurora"] .nav-item.active{background:var(--primary-soft);color:var(--primary);font-weight:700;}

/* focus visible (accessibilité + finition) */
html[data-theme^="aurora"] a:focus-visible,
html[data-theme^="aurora"] button:focus-visible,
html[data-theme^="aurora"] input:focus-visible,
html[data-theme^="aurora"] select:focus-visible,
html[data-theme^="aurora"] .btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-soft),0 0 0 1px var(--primary);}

/* champs cohérents avec le rayon moderne */
html[data-theme^="aurora"] input,
html[data-theme^="aurora"] select,
html[data-theme^="aurora"] textarea{border-radius:var(--radius-sm);}


/* ─────────────────────────────  VARIANTE SOMBRE  ──────────────────────────── */
html[data-theme="aurora"]{
  --bg:#0B1120; --surface:#141C30;
  --surface-glass:rgba(18,26,47,.40); --glass-nav:rgba(11,18,38,.72); --glass-sheen:rgba(255,255,255,.10);
  --border:rgba(130,170,255,.16); --border-strong:rgba(130,170,255,.30);
  --text:#EAF0FB; --text-2:#B6C5DE; --text-3:#8A99B6;
  --primary:#3B82F6;  --primary-soft:rgba(59,130,246,.18); --brand-2:#60A5FA; --glass-hi:rgba(255,255,255,.08);
  --teal:#2DD4BF;     --teal-soft:rgba(45,212,191,.15);
  --amber:#FBBF24;    --amber-soft:rgba(245,158,11,.16);
  --red:#F87171;      --red-soft:rgba(239,68,68,.16);
  --green:#34D399;    --green-soft:rgba(16,185,129,.16);
  --violet:#A78BFA;   --violet-soft:rgba(167,139,250,.16);
  --orange:#FB923C;   --orange-soft:rgba(251,146,60,.16);
  --brand-orange:#FBBF24;
  --shadow-sm:0 2px 6px rgba(0,0,0,.40); --shadow-md:0 12px 34px -14px rgba(0,0,0,.62);
  --card-hover-shadow:0 18px 42px -16px rgba(37,99,235,.32);
  --sb-thumb:rgba(130,170,255,.22);
  color-scheme:dark;
}
html[data-theme="aurora"] body{
  background:
    radial-gradient(1100px 760px at 82% -12%, #172a5e 0%, transparent 55%),
    radial-gradient(900px 680px at -8% 108%, #0d1c44 0%, transparent 52%),
    #060A14 !important;
}


/* ─────────────────────────────  VARIANTE CLAIRE  ──────────────────────────── */
html[data-theme="aurora-light"]{
  --bg:#EAF0FB; --surface:#FFFFFF;
  --surface-glass:rgba(255,255,255,.52); --glass-nav:rgba(255,255,255,.80); --glass-sheen:rgba(255,255,255,.50);
  --border:rgba(30,60,120,.10); --border-strong:rgba(30,60,120,.20);
  --text:#0F1B33; --text-2:#52607A; --text-3:#8A97AE;
  --primary:#2563EB;  --primary-soft:rgba(37,99,235,.10); --brand-2:#3B82F6; --glass-hi:rgba(255,255,255,.75);
  --teal:#0F766E;     --teal-soft:rgba(15,118,110,.10);
  --amber:#B45309;    --amber-soft:rgba(245,158,11,.13);
  --red:#DC2626;      --red-soft:rgba(220,38,38,.10);
  --green:#15803D;    --green-soft:rgba(16,128,61,.11);
  --violet:#6D28D9;   --violet-soft:rgba(109,40,217,.10);
  --orange:#EA580C;   --orange-soft:rgba(234,88,12,.11);
  --brand-orange:#F59E0B;
  --shadow-sm:0 1px 2px rgba(20,40,90,.05); --shadow-md:0 12px 30px -14px rgba(30,60,120,.16);
  --card-hover-shadow:0 18px 40px -16px rgba(37,99,235,.18);
  --sb-thumb:rgba(30,60,120,.18);
  color-scheme:light;
}
html[data-theme="aurora-light"] body{
  background:
    radial-gradient(1000px 700px at 85% -10%, rgba(59,130,246,.12) 0%, transparent 55%),
    radial-gradient(900px 650px at -5% 106%, rgba(245,158,11,.10) 0%, transparent 52%),
    #EEF2FB !important;
}