/* Easy Power — small custom layer on top of Bulma */

body {
    min-height: 100vh;
}

.brand-logo {
    height: 64px;
    width: auto;
}

/* Bulma colore `strong` avec --bulma-strong-color, très clair (96 %) dans le
   thème sombre. Dans un composant à fond clair (notification « is-light »,
   tag « is-light »), ce blanc devient illisible : on reprend la couleur du
   texte porteur. Les helpers `has-text-*` (en !important) restent prioritaires. */
.notification.is-light strong,
.tag.is-light strong {
    color: inherit;
}

/* Texte des tags « is-light » (fond clair) : Bulma y met un gris ardoise
   (--bulma-light-invert-l ≈ 21 %). On force le noir en surchargeant la variable
   plutôt que `color`, pour que les variantes colorées (.tag.is-success.is-light,
   etc. — spécificité supérieure) conservent leur teinte sémantique. */
.tag.is-light {
    --bulma-tag-color-l: var(--bulma-black-l);
}

/* Trou dans Bulma 1.0.4 : les règles « couleur neutre + is-light » référencent
   --bulma-light-light-invert-l (règle .tag.is-light.is-light), ainsi que ses
   jumelles --bulma-white/black/dark-light-invert-l, mais aucune n'est définie
   (leur palette ne génère que danger/info/link/primary/success/text/warning).
   La variable est donc vide, la déclaration `color` devient invalide au calcul
   et le texte *hérite* de la couleur du parent : clair sur une pastille claire.
   On comble les quatre trous avec la valeur sombre attendue (texte sur fond
   clair), pour que la pastille soit lisible quelle que soit la combinaison de
   classes (is-light, is-light is-light, is-white is-light, ...). */
:root {
    --bulma-light-light-invert-l: var(--bulma-black-l);
    --bulma-white-light-invert-l: var(--bulma-black-l);
    --bulma-black-light-invert-l: var(--bulma-black-l);
    --bulma-dark-light-invert-l: var(--bulma-black-l);
}

/* Leaflet popups */
.leaflet-popup-content {
    margin: 12px 14px;
}

.station-popup {
    font-family: 'Segoe UI', sans-serif;
    min-width: 190px;
}

.station-popup .addr {
    font-size: 11px;
    color: var(--ep-muted);
    margin-bottom: 6px;
}

/* QR scanner viewfinder */
.qr-viewfinder #qrReader {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
}

/* Live rental timer */
.timer {
    font-family: 'Courier New', monospace;
    font-weight: 700;
}

/* Success page slot number */
.slot-num {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
}

/* Off-canvas station panel (admin dashboard) */
.station-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 999;
    display: none;
}

.station-overlay.open {
    display: block;
}

.station-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 340px;
    max-width: 92vw;
    height: 100vh;
    background: var(--ep-card);
    border-left: 1px solid var(--ep-border);
    z-index: 1000;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.25s ease;
}

.station-panel.open {
    transform: translateX(0);
}

/* Admin stations map fills its column */
#map {
    width: 100%;
    height: 100%;
    min-height: 70vh;
}

/* Spinner for the success waiting state */
.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--ep-border);
    border-top-color: var(--ep-success);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 16px;
}

/* Leaflet dark popups — scopés sous .leaflet-container pour battre leaflet.css :
   leaflet.css est chargée dans le corps de la page (donc après app.css) et, à
   spécificité égale, son `background: white` l'emportait sur ce fond sombre. */
.leaflet-container .leaflet-popup-content-wrapper,
.leaflet-container .leaflet-popup-tip {
    background: var(--ep-card);
    color: var(--ep-text);
}

.leaflet-container a.leaflet-popup-close-button {
    color: var(--ep-muted);
}

.leaflet-container {
    background: var(--ep-bg);
}

.leaflet-container .leaflet-control-attribution {
    background: rgba(15, 23, 42, 0.8);
    color: var(--ep-muted);
}

.leaflet-container .leaflet-control-attribution a {
    color: var(--ep-accent);
}

/* Les boutons-liens dans un popup Leaflet doivent garder la couleur de texte
   prévue par Bulma : leaflet.css impose `.leaflet-container a { color:#0078A8 }`
   (spécificité 0,1,1) qui l'emporte sur le `.button` de Bulma (0,1,0). */
.leaflet-container a.button {
    color: hsl(var(--bulma-button-h), var(--bulma-button-s), var(--bulma-button-color-l));
}

@keyframes spin {
    to { transform: rotate(360deg); }
}