/* ============================================================
   Mon Garage — jetons de couleur et de forme (source UNIQUE : tout le
   reste de l'app ne fait que lire ces variables). Style « flotte pro » :
   fond gris-bleu, cartes blanches (clair) ou ardoise (sombre), une seule
   couleur d'accent choisie dans Paramètres (html[data-accent], géré par
   js/theme.js ; bleu par défaut). Thème clair/sombre : html[data-theme].
   ============================================================ */

:root{
  --accent:#2F6FED;
  --primary:var(--accent); --on-primary:#FFFFFF;
  --primary-container:color-mix(in srgb,var(--primary) 14%,transparent);
  --on-primary-container:color-mix(in srgb,var(--primary) 72%,#000);
  --tertiary-container:#FFE9CC; --on-tertiary-container:#4A2C00;
  --success:#146C43;
  --error:#B3261E; --on-error:#FFFFFF;
  --surface:#F3F5F8; --on-surface:#18202B; --on-surface-variant:#6B7788;
  --surface-container-lowest:#FFFFFF; --surface-container-low:#FFFFFF; --surface-container:#FFFFFF;
  --surface-container-high:#E8ECF2; --surface-container-highest:#E3E8EF;
  --outline:#8795A8; --outline-variant:#EDF0F4;
  --card-shadow:0 1px 2px rgba(16,24,40,.08);
  --shape-small:8px; --shape-medium:12px; --shape-large:16px; --shape-xl:24px; --shape-full:9999px;
  /* ID.5 = couleur d'accent, Mokka-e = même teinte éclaircie (barres et pastilles). */
  --vw:var(--primary);
  --opel:color-mix(in srgb,var(--primary) 45%,var(--surface-container-high));
  color-scheme:light;
}
:root[data-theme="dark"]{
  --accent:#5B92FF;
  --on-primary:#0B1220;
  --primary-container:color-mix(in srgb,var(--primary) 20%,transparent);
  --on-primary-container:var(--primary);
  --tertiary-container:#4A3410; --on-tertiary-container:#FFE0B0;
  --success:#7BE0B0;
  --error:#F2B8B5; --on-error:#601410;
  --surface:#12161C; --on-surface:#E6EAF0; --on-surface-variant:#8D99AB;
  --surface-container-lowest:#1A2029; --surface-container-low:#1A2029; --surface-container:#1A2029;
  --surface-container-high:#262E3A; --surface-container-highest:#2A3341;
  --outline:#6F7C90; --outline-variant:#262E3A;
  --card-shadow:none;
  color-scheme:dark;
}

/* Couleurs d'accent proposées dans Paramètres (html[data-accent] ; les pastilles
   du sélecteur utilisent le même attribut). */
[data-accent="bleu"]{--accent:#2F6FED;}
[data-accent="vert"]{--accent:#0F9D77;}
[data-accent="turquoise"]{--accent:#0B7285;}
[data-accent="violet"]{--accent:#7048E8;}
[data-accent="orange"]{--accent:#D9480F;}
[data-accent="rose"]{--accent:#D6336C;}
[data-theme="dark"][data-accent="bleu"],[data-theme="dark"] [data-accent="bleu"]{--accent:#5B92FF;}
[data-theme="dark"][data-accent="vert"],[data-theme="dark"] [data-accent="vert"]{--accent:#4FD1A5;}
[data-theme="dark"][data-accent="turquoise"],[data-theme="dark"] [data-accent="turquoise"]{--accent:#3BC9DB;}
[data-theme="dark"][data-accent="violet"],[data-theme="dark"] [data-accent="violet"]{--accent:#A78BFA;}
[data-theme="dark"][data-accent="orange"],[data-theme="dark"] [data-accent="orange"]{--accent:#FFA94D;}
[data-theme="dark"][data-accent="rose"],[data-theme="dark"] [data-accent="rose"]{--accent:#F783AC;}

/* ---- Icônes Material Symbols (Google Fonts), utilisées partout dans
   l'appli à la place des SVG dessinés à la main — la police est chargée
   dans app.html. ---- */
.msi{
  font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;
  line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;
  white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  vertical-align:middle;
}

/* ---- Sélecteur de thème (clair / sombre) ---- */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; border:none; cursor:pointer;
  background:var(--surface-container-high); color:var(--on-surface); padding:0;
}
.theme-toggle:focus-visible{outline:2px solid var(--on-surface);outline-offset:2px;}
.theme-toggle .msi{font-size:18px;}

/* ---- Bouton notifications Web Push ---- */
.push-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; border:none; cursor:pointer;
  background:var(--surface-container-high); color:var(--on-surface); padding:0;
}
.push-toggle:focus-visible{outline:2px solid var(--on-surface);outline-offset:2px;}
.push-toggle .msi{font-size:18px;}
.push-toggle[aria-pressed="true"]{background:var(--primary-container);color:var(--on-primary-container);}

/* ---- Icône batterie (jauge à barres, change de couleur selon le niveau) ---- */

/* ---- Effet de chargement (skeleton/shimmer) pendant le tout premier relevé ---- */

@keyframes mg-shimmer{ 100%{ transform:translateX(100%); } }

/* ---- Sélecteur de couleur d'accent (Paramètres) ---- */
.acc-picker{display:flex;flex-wrap:wrap;gap:10px;padding:4px 0 14px;}
.acc-item{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;color:var(--on-surface-variant);}
.acc-sw{width:44px;height:44px;border-radius:50%;border:3px solid transparent;padding:0;cursor:pointer;background:var(--accent);box-shadow:inset 0 0 0 2px var(--surface-container);}
.acc-sw[aria-pressed="true"]{border-color:var(--on-surface);}
.acc-sw:focus-visible{outline:2px solid var(--on-surface);outline-offset:2px;}