/* admin.css — page admin. Aucune dépendance à app.css ; variables et police
   viennent de base.css, chargée avant (D65). Écran à la souris : boutons à 36 px,
   sauf les boutons de ligne et .btn--petit, qui gardent leur padding réduit. */

* { box-sizing: border-box; }
body {
  font-family: var(--police);
  background: var(--fond);
  color: var(--texte);
  margin: 0; padding: 24px; max-width: 760px; margin-inline: auto;
  /* Le bandeau est en `fixed` : il sort du flux et recouvrirait la dernière
     ligne de la dernière section une fois la page défilée en bas. Réserve de
     quoi loger un message sur deux lignes. */
  padding-bottom: 120px;
  line-height: 1.4;
}
h1 { font-size: 1.25rem; margin: 0 0 4px; }
h2 {
  font-size: .95rem; margin: 32px 0 0; display: flex;
  align-items: baseline; gap: 10px; flex-wrap: wrap;
}
h2:first-of-type { margin-top: 8px; }
.sub { color: var(--texte-2); font-size: .85rem; margin: 0 0 20px; }
.retour { display: inline-block; margin-bottom: 8px; font-size: .9rem; color: var(--texte); text-decoration: underline; }

/* ---------- champs ---------- */

input:not([type=checkbox]):not([type=radio]), select, textarea {
  border: 1px solid var(--bord-fort);
  border-radius: 2px;
  background: var(--surface);
  color: var(--texte);
  font-family: inherit;
}
.lock { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
input[type=password] { flex: 1 1 220px; padding: 10px 12px; font-size: 1rem; }

/* ---------- boutons ---------- */

button {
  min-height: 36px;
  padding: 0 14px;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--r-m);
  color: var(--texte);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
button:hover { background: var(--bord); }
button.primary, button.adopte { background: var(--accent); color: var(--texte); }
button.primary:hover, button.adopte:hover { background: var(--accent); filter: brightness(1.08); }
button.danger, button.warn, button.btn--danger { background: var(--danger); color: var(--surface); }
button.danger:hover, button.warn:hover, button.btn--danger:hover { background: var(--danger); filter: brightness(1.1); }
button:disabled { opacity: var(--desactive); cursor: not-allowed; filter: none; }

/* ---------- tableaux ---------- */

table { width: 100%; border-collapse: collapse; margin-top: 8px; background: var(--surface); }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--bord); font-size: .9rem; }
th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texte-2); background: var(--surface); }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.initiales { color: var(--texte-2); }
.tag { font-size: .7rem; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--bord-fort); color: var(--texte-2); }
.tag.blk { color: var(--danger-texte); border-color: var(--danger); }
.tag.int, .tag.off, .tag.tmp { margin-left: 6px; }
td.msg { max-width: 360px; white-space: pre-wrap; word-break: break-word; }
td.actions { white-space: nowrap; text-align: right; }
td.actions button { min-height: 0; padding: 6px 10px; font-size: .8rem; margin-left: 4px; }
/* Listes de comptes : au-delà de 10 lignes, la zone est bornée par admin.js et
   défile seule, en-tête collé en haut. La bordure d'un th sticky ne le suit pas
   en border-collapse : le trait passe par une ombre. */
.defile { margin-top: 8px; overflow-y: auto; }
.defile table { margin-top: 0; }
.defile th { position: sticky; top: 0; z-index: 1; box-shadow: inset 0 -1px var(--bord); }

/* ---------- bandeau de message ---------- */

/* Bandeau de message, FIXE EN BAS — et non plus en haut du document.
   Constaté au navigateur le 29/08 : avec 6 techniciens et 21 poseurs, le
   bouton « Ajouter » de la 4e section est à ~1400 px du haut, soit ~500 px
   sous un viewport de bureau. Le message s'affichait donc hors écran, et
   paraissait ne jamais venir. Le défaut valait pour les QUATRE sections —
   un « Reset PIN » sur le dernier poseur avait le même angle mort.
   ⚠ AUCUN timer, c'est la règle de cet écran : un message reste jusqu'à la
   prochaine action ou jusqu'à la croix. Ce qu'on voyait « disparaître » était
   #envoi-etat (desarme.js), le seul élément fixe de la page jusqu'ici.
   En bas et non en haut : #envoi-etat occupe déjà le haut, en z-index 200. */
#msg {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  display: flex; align-items: flex-start; gap: 12px;
  max-width: 760px; margin-inline: auto;
  padding: 12px 16px;
  background: var(--surface-2); color: var(--texte-2);
  border: 1px solid var(--bord-fort); border-left: 3px solid var(--texte-2); border-bottom: 0;
  border-radius: var(--r-m) var(--r-m) 0 0;
  font-size: .9rem;
}
#msg[hidden] { display: none; }
#msg-txt { flex: 1; }
/* La croix ne prend pas la couleur du message : rouge, elle se lirait comme
   une partie de l'erreur. */
#msg-fermer { padding: 2px 9px; font-size: .85rem; line-height: 1.3; color: var(--texte); }
#msg.err { background: var(--danger-fond); border: 1px solid var(--danger); border-bottom: 0; color: var(--danger-texte); }
#msg.ok { background: var(--succes-fond); border: 1px solid var(--succes); border-bottom: 0; color: var(--succes); }
#panel { display: none; }

/* ---------- onglets ---------- */

/* Barre d'onglets : elle défile seule à largeur téléphone, la page ne bouge pas. */
.onglets {
  display: flex; gap: 4px; overflow-x: auto; margin: 4px 0 8px;
  border-bottom: 1px solid var(--bord);
}
.onglets button { flex: none; white-space: nowrap; background: transparent; color: var(--texte-2); }
.onglets button[aria-selected=true] { background: var(--accent); color: var(--texte); }
/* Les tableaux des comptes et des rapports dépassent 380 px : le volet défile, pas la page. */
[role=tabpanel] { overflow-x: auto; }

/* ---------- sections ---------- */

.filtre { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.filtre input[type=search] { flex: 1 1 180px; max-width: 320px; padding: 8px 10px; font-size: .9rem; }
.filtre select { padding: 8px 10px; font-size: .9rem; }
.compteur { font-size: .78rem; font-weight: normal; color: var(--texte-2); }
.ajout { display: flex; gap: 8px; margin-bottom: 8px; }
.ajout input[type=text] { flex: 1; max-width: 320px; padding: 8px 10px; font-size: .9rem; }
.ajout button { padding: 8px 14px; font-size: .85rem; }
.outils { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.outils button { padding: 6px 12px; font-size: .8rem; }
.demo-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.etat { font-size: .9rem; margin: 8px 0 0; }
.etat b.on, .etat b.off { color: var(--texte); font-weight: 700; }

/* Boîte de confirmation en page : les deux actions doivent afficher un COMPTE
   avant d'agir, ce qu'un confirm() natif ne sait pas mettre en forme. */
.confirm {
  margin-top: 12px; padding: 12px 14px;
  border: 1px solid var(--bord-fort); border-left: 3px solid var(--texte-2); border-radius: 2px;
  background: var(--surface-2); color: var(--texte-2);
}
.confirm.danger { border-left-color: var(--danger); color: var(--danger-texte); }
.confirm p { margin: 0 0 10px; font-size: .9rem; }
.confirm ul { margin: 0 0 10px; padding-left: 18px; font-size: .85rem; color: var(--texte-2); }
.confirm input[type=text] { padding: 8px 10px; font-size: .9rem; width: 180px; margin-right: 8px; }
.confirm .ligne { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* La case des identifiants : c'est la SEULE partie destructive de l'adoption,
   elle est donc détachée du reste et signalée en propre. */
.opt {
  margin: 0 0 10px; padding: 10px 12px;
  border: 1px solid var(--bord-fort); border-left: 3px solid var(--texte-2); border-radius: 2px;
  background: var(--surface-2); color: var(--texte-2);
}
.opt label { display: flex; gap: 8px; align-items: flex-start; font-size: .88rem; cursor: pointer; }
.opt input[type=checkbox] { margin-top: 2px; flex: none; }
.opt .detail { margin: 8px 0 0 24px; font-size: .82rem; color: var(--texte-2); }
.opt .detail.chaud { color: var(--texte); font-weight: 700; }

/* ---------- onglets Réglages et Registres : une carte par rubrique ---------- */

/* Carte : .crews d'app.css. Explication et phrase d'état : .sig-aide de heures.css.
   Une section `hidden` (langue de la TV) doit le rester malgré le display posé ici. */
#volet-reglages > section, #volet-registres > section {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 16px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--bord-fort); border-radius: var(--r-m);
}
#volet-reglages > section[hidden] { display: none; }
#volet-reglages > section > h2, #volet-registres > section > h2 { flex: 1 0 100%; margin: 0; }
#volet-reglages > section > p, #volet-registres > section > p,
#volet-reglages > section > span, #volet-registres > section > span {
  flex: 1 0 100%; margin: 0; color: var(--texte-2); font-size: 12px;
}
#volet-reglages > section > span:empty, #volet-registres > section > span:empty { display: none; }
#volet-reglages > section > .opt { flex: 1 0 100%; margin: 0; }
#volet-reglages > section > input, #volet-reglages > section > select,
#volet-registres > section > input {
  flex: 1 1 200px; max-width: 320px; min-height: 36px; padding: 0 9px; font-size: .9rem;
}

/* ---------- onglet Jetons ---------- */

#volet-jetons .aide { font-size: .85rem; color: var(--texte-2); margin: 8px 0 10px; }
#volet-jetons .ligne-creation { display: flex; gap: 8px; flex-wrap: wrap; }
#volet-jetons .ligne-creation input { flex: 1 1 200px; padding: 8px 10px; font-size: .9rem; }
#volet-jetons .ligne-creation select { padding: 8px 10px; font-size: .9rem; }
#volet-jetons .resultat {
  margin-top: 12px; padding: 12px;
  background: var(--succes-fond); border: 1px solid var(--succes); border-radius: var(--r-m);
  color: var(--succes);
}
#volet-jetons .resultat-titre { margin: 0 0 8px; font-weight: 600; }
#volet-jetons .url-box { display: flex; gap: 8px; }
#volet-jetons .url-box input {
  flex: 1; min-width: 0; padding: 6px 8px;
  font-family: monospace; font-size: .85rem;
}
#volet-jetons .resultat-avert { margin: 8px 0 0; font-size: .85rem; color: var(--texte); font-weight: 700; }
#volet-jetons .entete-liste { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
#volet-jetons button.btn--petit { min-height: 0; padding: 6px 10px; font-size: .8rem; }
#volet-jetons .badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--bord-fort); color: var(--texte-2);
  font-size: .75rem; font-weight: 600; white-space: nowrap;
}
#volet-jetons .etat-actif, #volet-jetons .etat-revoque {
  font-size: .7rem; padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--bord-fort); color: var(--texte-2);
}
#volet-jetons tr.revoque td { opacity: .55; }
#volet-jetons .vide { color: var(--texte-2); font-style: italic; }
#volet-jetons .msg { padding: 8px 10px; border-radius: 6px; margin-top: 8px; font-size: .9rem; }
#volet-jetons .msg[hidden] { display: none; }
#volet-jetons .msg--erreur { background: var(--danger-fond); color: var(--danger-texte); border: 1px solid var(--danger); }
#volet-jetons .msg--ok { background: var(--succes-fond); color: var(--succes); border: 1px solid var(--succes); }
/* Blanc et noir fixes, hors des variables : un QR ne se lit que sur fond clair, thème sombre compris. */
#volet-jetons .qr-bloc { margin-top: 12px; padding: 12px; background: #fff; border-radius: var(--r-m); color: #000; text-align: center; }
#volet-jetons .qr-bloc[hidden] { display: none; }
#volet-jetons .qr-image { width: 240px; max-width: 100%; margin: 0 auto; }
#volet-jetons .qr-image svg { display: block; width: 100%; height: auto; }
#volet-jetons .qr-legende p { margin: 4px 0; font-size: 1rem; font-weight: 600; }
#volet-jetons .qr-actions { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
#volet-jetons .resultat-pied { display: flex; justify-content: flex-end; margin-top: 10px; }
#volet-jetons .qr-aide { margin: 8px 0 0; font-size: .8rem; color: var(--texte-2); }

/* Imprimer = le QR et sa légende, seuls, en grand. */
@media print {
  body * { visibility: hidden; }
  #qr-pointage, #qr-pointage * { visibility: visible; }
  #qr-pointage { position: absolute; inset: 0 auto auto 0; width: 100%; margin: 0; padding: 2cm 0; }
  #qr-pointage .qr-image { width: 12cm; }
  #qr-pointage .qr-legende p { font-size: 18pt; margin: 8pt 0; }
  #qr-pointage .qr-actions, #qr-pointage .qr-aide { display: none; }
}