/* ==========================================================================
   geco-caisses — feuille de style socle
   Tokens de thème (clair / sombre × normal / daltonien) + composants.
   Repris du système Sapyn, palette bleue GECO.
   ========================================================================== */

:root {
  --base-font-size: 16px;

  --bg:            #F4F6F9;
  --bg-elevated:   #FFFFFF;
  --fg:            #14202E;
  --muted:         #5B6B7A;
  --border:        #E2E8F0;
  --border-strong: #CBD5E1;

  --primary:       #1B4F8A;   /* bleu GECO — surchargé depuis la DB (inline base.html) */
  --primary-hover: #16406F;
  --primary-fg:    #FFFFFF;
  --accent:        #2E86C1;

  --success:       #2E7D46;
  --success-bg:    #E7F4EC;
  --warn:          #B5730B;
  --warn-bg:       #FBF0DC;
  --danger:        #B23A2E;
  --danger-bg:     #FBE7E4;

  --focus:         #1B4F8A;
  --shadow:        0 4px 24px rgba(20, 40, 70, 0.08);
  --shadow-lg:     0 8px 32px rgba(20, 40, 70, 0.14);
  --radius:        12px;
  --radius-lg:     16px;
}

html.dark {
  --bg:            #0E1720;
  --bg-elevated:   #16232F;
  --fg:            #F1F5F9;
  --muted:         #93A3B4;
  --border:        #22323F;
  --border-strong: #314656;

  --primary:       #4F9BD9;
  --primary-hover: #6FB0E4;
  --primary-fg:    #0E1720;
  --accent:        #63B3E8;

  --success:       #56C878;
  --success-bg:    #12301F;
  --warn:          #F0B849;
  --warn-bg:       #33280F;
  --danger:        #E5766A;
  --danger-bg:     #351712;

  --focus:         #6FB0E4;
  --shadow:        0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg:     0 8px 32px rgba(0, 0, 0, 0.6);
}

/* Daltonien : bleu/orange ColorBrewer safe */
html.cb {
  --primary:       #1F77B4;
  --primary-hover: #3A8FCC;
  --accent:        #FF7F0E;
  --success:       #1F77B4;
  --success-bg:    #E5EFF7;
  --warn:          #B5A000;
  --warn-bg:       #FAF6D8;
  --danger:        #FF7F0E;
  --danger-bg:     #FFEBD6;
  --focus:         #1F77B4;
}
html.dark.cb {
  --primary:       #66B2DD;
  --primary-hover: #85C5E8;
  --accent:        #FFA64D;
  --danger:        #FFA64D;
  --focus:         #85C5E8;
}

/* --- Reset / base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--base-font-size); scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.5;
  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background-color .2s ease, color .2s ease;
}
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); text-decoration: none; }
img { max-width: 100%; height: auto; }
h1, h2, h3 { color: var(--fg); margin-top: 0; line-height: 1.25; }
h1 { font-size: 1.8rem; font-weight: 700; }
h2 { font-size: 1.4rem; font-weight: 600; }

/* Focus visible systématique (a11y) */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Contrôles de saisie : style de base uniforme (thème clair/sombre) ---- */
/* S'applique à TOUS les champs, y compris les inputs inline hors .field. */
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=time], input[type=datetime-local], input[type=search],
input[type=tel], input[type=url], select, textarea {
  font: inherit;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: .5rem .6rem;
  max-width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--primary); }
input::placeholder, textarea::placeholder { color: var(--muted); }
textarea { width: 100%; resize: vertical; }
select { cursor: pointer; }
input[type=color] { padding: .2rem; height: 42px; cursor: pointer; }
input[type=file] {
  color: var(--fg); font: inherit;
  border: 1px dashed var(--border-strong); border-radius: 8px; padding: .5rem;
  background: var(--bg); max-width: 100%;
}

/* Skip link */
.skip-link {
  position: absolute; top: -100px; left: 0; z-index: 1000;
  padding: .75rem 1rem; background: var(--primary); color: var(--primary-fg);
  border-radius: 0 0 var(--radius) 0; font-weight: 600; transition: top .15s ease;
}
.skip-link:focus { top: 0; }

/* --- En-tête / navigation ------------------------------------------------ */
.app-header {
  display: flex; align-items: center; gap: 1rem;
  padding: .6rem 1rem;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
  position: sticky; top: 0; z-index: 100;
}
.brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--fg); }
.brand img { height: 34px; width: auto; }
.brand:hover { text-decoration: none; }

.burger {
  display: none; margin-left: auto;
  background: none; border: 1px solid var(--border-strong); border-radius: 8px;
  width: 44px; height: 44px; cursor: pointer; color: var(--fg);
  font-size: 1.3rem; line-height: 1;
}

.main-nav { display: flex; gap: .25rem; align-items: center; }
.main-nav a {
  padding: .5rem .8rem; border-radius: 8px; color: var(--fg); font-weight: 500;
}
.main-nav a:hover { background: var(--bg); text-decoration: none; }
.main-nav a.active { background: var(--primary); color: var(--primary-fg); }

.header-spacer { margin-left: auto; }

/* Recherche globale dans le header */
.header-search { margin-left: auto; }
.header-search input { width: 230px; max-width: 40vw; padding: .5rem .7rem; }
@media (max-width: 760px) { .header-search { display: none; } }

/* --- Barre d'accessibilité ---------------------------------------------- */
.a11y-bar { display: flex; gap: .3rem; align-items: center; }
.a11y-bar button {
  width: 40px; height: 40px; border: 1px solid var(--border-strong);
  background: var(--bg); color: var(--fg); border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
}
.a11y-bar button:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.a11y-bar button:disabled { opacity: .4; cursor: not-allowed; }
.a11y-bar button svg { width: 20px; height: 20px; }
.a11y-bar button.speaking { background: var(--primary); color: var(--primary-fg); }

/* --- Layout principal ---------------------------------------------------- */
main { flex: 1; }
.container { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.container-narrow { max-width: 460px; }

.card {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.5rem;
}
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* --- Boutons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem 1.1rem; border-radius: 10px; border: 1px solid transparent;
  font-size: 1rem; font-weight: 600; cursor: pointer; min-height: 46px;
  transition: background .15s ease, border-color .15s ease;
}
.btn-primary { background: var(--primary); color: var(--primary-fg); }
.btn-primary:hover { background: var(--primary-hover); text-decoration: none; color: var(--primary-fg); }
.btn-ghost { background: var(--bg); color: var(--fg); border-color: var(--border-strong); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.btn-block { width: 100%; }

/* --- Formulaires --------------------------------------------------------- */
.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 600; margin-bottom: .35rem; }
.field input[type=text], .field input[type=email], .field input[type=password],
.field input[type=color], .field select, .field textarea {
  width: 100%; padding: .7rem .85rem; font-size: 1rem;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--border-strong); border-radius: 10px; min-height: 46px;
}
.field input:focus { border-color: var(--primary); }
.hint { color: var(--muted); font-size: .85rem; margin-top: .3rem; }

/* --- Toggle switch (booléens) ------------------------------------------- */
.toggle { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; position: relative; }
/* Un toggle placé dans un .field ne doit PAS hériter du label bloc (sinon le switch casse). */
.field label.toggle { display: inline-flex; margin-bottom: 0; font-weight: 400; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle .track {
  width: 46px; height: 26px; border-radius: 999px; background: var(--border-strong);
  position: relative; transition: background .15s ease; flex: none;
}
.toggle .track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; transition: transform .15s ease;
}
.toggle input:checked + .track { background: var(--primary); }
.toggle input:checked + .track::after { transform: translateX(20px); }
.toggle input:focus-visible + .track { outline: 3px solid var(--focus); outline-offset: 2px; }

/* --- Alertes ------------------------------------------------------------- */
.alert { padding: .8rem 1rem; border-radius: 10px; margin-bottom: 1rem; border: 1px solid transparent; }
.alert-error { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.alert-success { background: var(--success-bg); color: var(--success); border-color: var(--success); }

/* --- Badges rôle --------------------------------------------------------- */
.badge {
  display: inline-block; padding: .15rem .6rem; border-radius: 999px;
  font-size: .8rem; font-weight: 700; background: var(--bg); border: 1px solid var(--border-strong);
}
.badge-super_admin { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
.badge-admin { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Badges de statut de caisse */
.statut-disponible { background: var(--success-bg); color: var(--success); border-color: var(--success); }
.statut-en_intervention { background: var(--bg); color: var(--primary); border-color: var(--primary); }
.statut-en_reappro { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); }
.statut-hors_service { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }

/* Carte caisse cliquable */
.caisse-card { display: block; transition: box-shadow .15s ease, border-color .15s ease; }
.caisse-card:hover { text-decoration: none; box-shadow: var(--shadow-lg); border-color: var(--primary); }

/* Cellule de pièce en alerte (qté actuelle < seuil) */
.alert-cell { color: var(--danger); font-weight: 700; }

/* Badges de type de mouvement */
.mouv-entree { background: var(--success-bg); color: var(--success); border-color: var(--success); }
.mouv-sortie { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }

/* Badges de statut d'événement */
.ev-planifie { background: var(--bg); color: var(--muted); border-color: var(--border-strong); }
.ev-en_cours { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
.ev-termine { background: var(--success-bg); color: var(--success); border-color: var(--success); }
.ev-annule { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }

/* Zone d'upload photo (glisser-déposer + caméra) */
.dropzone {
  border: 2px dashed var(--border-strong); border-radius: var(--radius);
  padding: 1.2rem; text-align: center; color: var(--muted); cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.dropzone:hover, .dropzone.dragover, .dropzone:focus-visible {
  border-color: var(--primary); color: var(--primary); background: var(--bg);
}
.dz-preview { max-height: 220px; width: auto; border-radius: 10px; margin-top: .6rem; }
.dz-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }

/* Tuiles de statistiques (tableau de bord) */
.stat-grid {
  display: grid; gap: 1rem; margin-top: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.stat-tile {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.1rem 1.2rem;
  color: var(--fg); display: block; transition: box-shadow .15s ease, border-color .15s ease;
}
a.stat-tile:hover { text-decoration: none; box-shadow: var(--shadow-lg); border-color: var(--primary); }
.stat-num { font-size: 2rem; font-weight: 700; line-height: 1; color: var(--primary); }
.stat-label { color: var(--muted); margin-top: .35rem; font-size: .9rem; }
.stat-tile.stat-danger .stat-num { color: var(--danger); }
.stat-tile.stat-danger { border-color: var(--danger); }

/* Badge de compteur (alertes) dans la nav / les cartes */
.nav-badge {
  display: inline-block; min-width: 20px; padding: 0 .35rem; margin-left: .2rem;
  background: var(--danger); color: #fff; border-radius: 999px;
  font-size: .75rem; font-weight: 700; text-align: center; line-height: 1.4;
}

/* Éditeur de pièces (formulaire de création) */
.pieces-editor input { width: 100%; padding: .5rem; border: 1px solid var(--border-strong);
  border-radius: 8px; background: var(--bg); color: var(--fg); }
.pieces-editor th { padding: .3rem; font-size: .85rem; color: var(--muted); }
.pieces-editor td { padding: .25rem; }

/* Impression : ne montrer que le bloc QR */
@media print {
  .app-header, .app-footer, .btn, form { display: none !important; }
  .card { box-shadow: none; border: none; }
}

/* --- Auth (login / setup) ----------------------------------------------- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.auth-card { width: 100%; max-width: 400px; }
.auth-logo { text-align: center; margin-bottom: 1.2rem; }
.auth-logo img { height: 54px; }

/* --- Footer -------------------------------------------------------------- */
.app-footer { text-align: center; color: var(--muted); font-size: .85rem; padding: 1.2rem; }

/* --- Responsive (mobile : menu burger, gros boutons) -------------------- */
@media (max-width: 760px) {
  .burger { display: inline-flex; }
  .header-spacer { display: none; }
  .main-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-elevated); border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg); padding: .5rem;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: .9rem 1rem; font-size: 1.05rem; }
  .a11y-bar { order: 3; }
  .btn { min-height: 50px; }
}

/* --- Planche d'étiquettes QR -------------------------------------------- */
.labels {
  display: grid; gap: .6rem; margin-top: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.label {
  border: 1px solid var(--border-strong); border-radius: 10px; padding: .6rem;
  text-align: center; break-inside: avoid; background: #fff; color: #000;
}
.label-qr { width: 120px; height: 120px; }
.label-name { font-weight: 700; margin-top: .3rem; }
.label-sub { font-size: .8rem; color: #555; }

@media print {
  .no-print { display: none !important; }
  .labels { grid-template-columns: repeat(3, 1fr); gap: 8mm; }
  .label { border: 1px solid #000; }
}

/* --- Scanner QR (modal GecoQR) + recadrage photo ----------------------- */
.qr-overlay {
  position: fixed; inset: 0; z-index: 1000; display: flex;
  align-items: center; justify-content: center; padding: 1rem;
  background: rgba(0, 0, 0, .6);
}
.qr-card {
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: 14px; width: 100%; max-width: 480px; box-shadow: var(--shadow, 0 10px 40px rgba(0,0,0,.3));
  overflow: hidden;
}
.qr-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem 1rem; border-bottom: 1px solid var(--border);
}
.qr-close {
  background: transparent; border: 0; color: var(--text); font-size: 1.2rem;
  cursor: pointer; line-height: 1; padding: .2rem .4rem; border-radius: 8px;
}
.qr-close:hover { background: var(--surface-2, rgba(127,127,127,.15)); }
.qr-body { padding: 1rem; display: flex; flex-direction: column; gap: .8rem; }
.qr-body video, .qr-preview-img {
  width: 100%; border-radius: 10px; background: #000; max-height: 60vh; object-fit: contain;
}
.qr-canvas { display: none; }
.qr-file { display: none; }
.qr-status { margin: 0 1rem 1rem; min-height: 1.2em; }

/* Recadrage photo */
.crop-wrap { position: relative; touch-action: none; user-select: none; max-width: 100%; }
.crop-wrap canvas { max-width: 100%; border-radius: 10px; display: block; touch-action: none; cursor: crosshair; }
.crop-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }

/* --- Photos de caisse : miniature (liste) + fiche (taille maîtrisée) ---- */
.caisse-thumb {
  width: 100%; height: 130px; object-fit: cover;
  border-radius: 8px; margin-bottom: .6rem; display: block; background: #0002;
}
.caisse-photo {
  width: 100%; max-height: 340px; object-fit: contain;
  border-radius: 10px; border: 1px solid var(--border); background: #0006; display: block;
}
.caisse-photo[hidden] { display: none; }