/* Backoffice TVAFlash — reprend les couleurs de l'app (fond sombre, vert
   « récupéré ») pour qu'on reconnaisse le produit d'un coup d'œil. */

:root {
  --bg: #0b0c0e;
  --elevated: #15171b;
  --line: #2a2d33;
  --fg: #f4f5f6;
  --muted: #a0a4ab;
  --subtle: #6b6f76;
  --green: #38e08a;
  --danger: #ff6b5b;
}

* { box-sizing: border-box; }

/* ⚠️ Indispensable : l'attribut `hidden` ne masque un élément que via la
   feuille de style par défaut du navigateur (`display: none`). Toute règle
   CSS qui fixe un `display` — ici `.login-wrap { display: grid }` — a une
   spécificité supérieure et le RÉAFFICHE. Sans cette ligne, l'écran de
   connexion restait posé par-dessus l'application une fois connecté : on
   croyait à un échec d'authentification alors que la session était ouverte. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ── Indicateurs de chargement ───────────────────────────────────────────── */

/* Squelette : occupe la place que prendra le contenu, pour que rien ne saute
   quand les données arrivent. */
@keyframes shimmer { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } }

.skeleton {
  border-radius: 8px;
  background: linear-gradient(90deg, #1a1d22 25%, #23272e 50%, #1a1d22 75%);
  background-size: 840px 100%;
  animation: shimmer 1.3s linear infinite;
  height: 15px;
  margin-bottom: 11px;
}
.skeleton.tall { height: 46px; }
.skeleton.wide { width: 62%; }
.skeleton.short { width: 34%; }

@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  width: 19px; height: 19px; flex: none;
  border: 2.5px solid var(--line);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.loading-row {
  display: flex; align-items: center; gap: 11px;
  color: var(--muted); font-size: 14px; padding: 22px 4px;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
  .spinner { animation-duration: 2s; }
}

/* ── Connexion ───────────────────────────────────────────────────────────── */

.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
}

/* Halo vert diffus derrière la carte : rappelle l'accent « récupéré » de
   l'app sans alourdir la page (un simple dégradé radial, aucune image). */
.login-wrap::before {
  content: '';
  position: absolute;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 224, 138, .16), transparent 62%);
  filter: blur(18px);
  pointer-events: none;
}

.login-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: linear-gradient(180deg, #191c21, #131519);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 38px 32px 30px;
  display: grid;
  justify-items: center;
  gap: 0;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  text-align: center;
}

.logo-mark {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #05130b;
  background: linear-gradient(145deg, var(--green), #22c974);
  box-shadow: 0 8px 22px rgba(56, 224, 138, .3);
  margin-bottom: 18px;
}

.brand { font-size: 25px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.brand-sub { color: var(--muted); font-size: 13.5px; margin-top: 5px; }

.lock-note {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--subtle);
  font-size: 12px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  width: 100%;
  justify-content: center;
}

input, select {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--fg);
  font-size: 15px;
  width: 100%;
}
input:focus { outline: 2px solid var(--green); outline-offset: 1px; }

button {
  background: var(--green);
  color: #05130b;
  border: 0;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
button.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }
button.danger { background: var(--danger); color: #fff; }
button.primary { background: var(--green); }

.error { color: var(--danger); font-size: 13px; margin: 0; min-height: 18px; }

/* Bouton Google : fond blanc et libellé officiels, pour qu'il soit reconnu
   immédiatement comme le bouton de connexion Google. */
/* Bouton Google conforme aux recommandations de Google : fond blanc, logo à
   gauche dans une zone dédiée, libellé Roboto-like, hauteur 48 px. On garde
   ces codes précis parce que c'est ce qui le rend immédiatement identifiable
   comme un bouton de connexion Google, donc rassurant. */
.google-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  background: #fff;
  color: #1f1f1f;
  border: 1px solid #dadce0;
  border-radius: 24px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .01em;
  text-decoration: none;
  margin-top: 26px;
  transition: background .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.google-btn svg { flex: none; }
.google-btn span { flex: 1; text-align: center; margin-right: 18px; }

.google-btn:hover {
  background: #f8f9fa;
  border-color: #d2d5d9;
  box-shadow: 0 1px 3px rgba(60, 64, 67, .3), 0 4px 8px rgba(60, 64, 67, .15);
}
.google-btn:active { background: #f1f3f4; box-shadow: none; }
.google-btn:focus-visible { outline: 3px solid rgba(56, 224, 138, .6); outline-offset: 2px; }

/* Le message d'erreur ne réserve sa place que lorsqu'il en a une à occuper :
   sinon il creuse un trou sous le bouton. */
.login-card .error { min-height: 0; margin-top: 14px; }
.login-card .error:empty { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .google-btn { transition: none; }
  .google-btn:hover { transform: none; }
}

/* ── Cadre applicatif ────────────────────────────────────────────────────── */

/* ── Barre latérale ──────────────────────────────────────────────────────── */

#app { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 14px;
  background: var(--elevated);
  border-right: 1px solid var(--line);
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-brand { display: flex; align-items: center; gap: 9px; padding: 2px 8px 16px; }
.sidebar-logo {
  width: 28px; height: 28px; border-radius: 9px;
  display: grid; place-items: center; flex: none;
  color: #05130b; background: linear-gradient(145deg, var(--green), #22c974);
}
.brand-inline { font-weight: 700; font-size: 15px; }
.brand-inline em { color: var(--green); font-style: normal; font-weight: 500; }

.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar nav button {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  background: transparent;
  color: var(--muted);
  border: 0;
  padding: 10px 11px;
  border-radius: 9px;
  font-size: 14.5px;
  font-weight: 500;
  text-align: left;
}
.sidebar nav button svg { flex: none; opacity: .8; }
.sidebar nav button:hover { background: var(--bg); color: var(--fg); }
.sidebar nav button.active { background: var(--bg); color: var(--fg); font-weight: 600; box-shadow: inset 2px 0 0 var(--green); }
.sidebar nav button.active svg { color: var(--green); opacity: 1; }
.badge {
  margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700;
  background: var(--green); color: #05130b; border-radius: 9px; padding: 1px 7px;
}

.sidebar-foot { margin-top: auto; border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 8px; }
.who { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }

main { padding: 22px 26px; max-width: 1400px; }

h2 { font-size: 19px; margin: 28px 0 12px; }
h3 { font-size: 15px; margin: 24px 0 10px; color: var(--muted); }
.hint { color: var(--subtle); font-size: 14px; }

/* ── Cartes de chiffres ──────────────────────────────────────────────────── */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.card { background: var(--elevated); border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.card-label { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.card-value { font-size: 34px; font-weight: 700; margin: 6px 0 2px; }
.card-hint { color: var(--subtle); font-size: 13px; }

/* ── Graphe ──────────────────────────────────────────────────────────────── */

/* ── Graphe ──────────────────────────────────────────────────────────────── */

.chart-box {
  background: var(--elevated);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px 12px 4px;
  transition: opacity .15s ease;
}
.chart-box svg { display: block; overflow: visible; }

/* Vert « recovered.dim » : seule valeur de la marque qui passe les contrôles
   de luminosité sur fond sombre. Le vert vif est réservé au survol, ce qui
   fait aussi office de réponse visuelle au pointeur. */
.bar { fill: #1F8A4F; transition: fill .12s ease; }
.bar-peak { fill: #2FB86B; }
.col:hover .bar, .col:focus-visible .bar { fill: var(--green); }
.col:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px; }

/* Grille et axes volontairement en retrait : la donnée est le seul élément
   qui a le droit d'être franc. */
:root { --grid: #23262c; --axis: #333740; }
.axis-text { fill: var(--muted); font-size: 11px; font-family: inherit; }
.peak-text { fill: var(--fg); font-size: 11px; font-weight: 600; font-family: inherit; }

/* ── Filtres ─────────────────────────────────────────────────────────────── */

.filters { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.filters-label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }

.segmented { display: inline-flex; background: var(--elevated); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; }
.segmented button {
  background: transparent; color: var(--muted);
  padding: 6px 13px; font-size: 13px; font-weight: 500; border-radius: 7px;
}
.segmented button:hover { color: var(--fg); }
.segmented button.active { background: var(--bg); color: var(--fg); font-weight: 600; }

.panel-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.panel-head h2 { margin: 0; }

.filter-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: rgba(56, 224, 138, .09); border: 1px solid rgba(56, 224, 138, .28);
  border-radius: 10px; padding: 8px 12px; font-size: 13px; margin-bottom: 4px;
}
button.small { padding: 4px 10px; font-size: 12px; }

.card.clickable:hover { border-color: var(--green); }
.alert.clickable:hover { border-color: var(--green); }

/* ── Tables ──────────────────────────────────────────────────────────────── */

/* Aucun défilement horizontal, nulle part : une barre de défilement dans un
   tableau est le symptôme qu'il a trop de colonnes pour la place disponible.
   La réponse est de retirer des colonnes (le détail au clic les porte), pas
   de faire glisser le contenu. */
#users-table, #costs-table, #audit-table, #tickets-table, #scans-table, .panel { overflow-x: visible; }
table { max-width: 100%; }

table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 15px; table-layout: auto; }
/* Pas de `nowrap` : dans un volet étroit il forçait une barre de défilement
   horizontale alors que la place existait. Le texte revient à la ligne, les
   emails longs sont coupés proprement. */
th, td {
  text-align: left;
  padding: 12px 11px;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
  vertical-align: top;
}
th { color: var(--muted); font-weight: 500; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; }
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: var(--elevated); }

.panel {
  background: var(--elevated);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  margin-top: 16px;
}
.panel h2 { margin-top: 0; }
.panel.example { opacity: .62; border-style: dashed; }

.support-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.tag {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; color: var(--subtle);
}

#user-search { width: 100%; margin-bottom: 10px; }

/* ── Écrans en deux volets : liste à gauche, détail à droite ─────────────── */

/* La liste garde la main : c'est elle qu'on parcourt. Le détail prend le
   reste — assez large pour un formulaire, jamais au point d'écraser la liste
   et de renvoyer les dates à la ligne. */
.split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
td.nowrap, th.nowrap { white-space: nowrap; }
.split-list { min-width: 0; }
.split-detail {
  min-width: 0;
  background: var(--elevated);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  /* Le détail suit la lecture de la liste au lieu de filer en haut de page. */
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 100px);
  overflow: auto;
}
.empty-detail { color: var(--subtle); font-size: 13px; text-align: center; padding: 40px 10px; }
.detail-head h2 { margin: 0 0 4px; }

tr.selected { background: rgba(56, 224, 138, .1); box-shadow: inset 3px 0 0 var(--green); }

.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }

/* ── Cartes compactes ────────────────────────────────────────────────────── */

.mini-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 14px 0 18px; }
.mini-card { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.mini-label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.mini-value { font-size: 21px; font-weight: 600; margin-top: 3px; }

/* ── Alertes « À surveiller » ────────────────────────────────────────────── */

.alert {
  background: var(--elevated);
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 10px;
}
.alert-warn { border-left-color: var(--warning); }
.alert-info { border-left-color: var(--green); }
.alert-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.alert-title { font-weight: 600; font-size: 15px; }
.alert-value { font-weight: 700; font-size: 18px; white-space: nowrap; }
.alert-hint { color: var(--muted); font-size: 13.5px; margin-top: 5px; line-height: 1.45; }

/* ── Explication d'une entrée de journal ─────────────────────────────────── */

.explain { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 14px 0; }
.explain h3 { margin: 12px 0 4px; color: var(--green); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.explain h3:first-child { margin-top: 0; }
.explain p { margin: 0; font-size: 14.5px; color: var(--fg); line-height: 1.5; }

.kv-list { display: grid; gap: 7px; margin-top: 8px; }
.kv { display: flex; justify-content: space-between; gap: 14px; font-size: 14px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.kv span { color: var(--muted); }
.kv strong { font-weight: 600; text-align: right; word-break: break-all; }

/* ── Formulaire de correction d'un ticket ────────────────────────────────── */

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 11px; margin-top: 6px; }
.field { display: grid; gap: 5px; font-size: 12px; color: var(--muted); }
.field input, .field select { font-size: 14px; padding: 8px 10px; }
.btn-row { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 16px; }

/* Réponse brute du modèle : monospace, défilement propre, jamais de
   débordement horizontal de la page. */
.raw {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px;
  color: var(--muted);
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  .split, .two-col { grid-template-columns: 1fr; }
  .split-detail { position: static; max-height: none; }
}

/* Sous 820 px la barre latérale passe en bandeau horizontal : une colonne
   fixe de 232 px sur un écran étroit ne laisserait rien au contenu. */
@media (max-width: 820px) {
  #app { grid-template-columns: 1fr; }
  .sidebar {
    position: static; height: auto; flex-direction: row; align-items: center;
    gap: 10px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line);
    padding: 10px 12px;
  }
  .sidebar-brand { padding: 0 6px 0 0; }
  .sidebar nav { flex-direction: row; }
  .sidebar nav button span { display: none; }
  .sidebar nav button { padding: 9px 11px; }
  .sidebar-foot { margin: 0 0 0 auto; border: 0; padding: 0; display: flex; align-items: center; gap: 8px; }
  .sidebar-foot .who { display: none; }
}

@media (max-width: 600px) {
  main { padding: 14px; }
  th, td { padding: 8px 7px; font-size: 13px; }
}

/* Champs de dates du filtre : le calendrier natif, sans surcharge. */
.date-field {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--muted); font-size: 13px;
}
.date-field input {
  width: auto; padding: 7px 10px; font-size: 13.5px;
  color-scheme: dark; /* le sélecteur natif suit le thème sombre */
}