/* Back-office — docs/design-backoffice.md §3–§5. Tout vient des tokens. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg-page); color: var(--text-2); font-family: var(--font-ui); font-size: var(--fs-body); line-height: 1.4; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1, h2, h3 { color: var(--text-1); font-weight: 600; margin: 0; }
.title { font-size: var(--fs-title); margin: var(--sp-4) 0 var(--sp-1); }
.head { font-size: var(--fs-head); margin: var(--sp-6) 0 var(--sp-2); }
.meta { font-size: var(--fs-meta); color: var(--text-3); margin: 0 0 var(--sp-3); }
.num, .date, .mono, .secret, .detail, .kpi-value { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.mono, .secret, .detail { font-family: var(--font-mono); }
.num { text-align: right; }
.small { font-size: var(--fs-body); }

/* Bandeau d'environnement : permanent, non masquable */
.env { height: 24px; line-height: 24px; padding: 0 var(--sp-4); font-size: var(--fs-meta); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid; }
.env-prod { background: var(--neg-bg); color: var(--neg-fg); border-color: var(--neg-bd); }
.env-dev { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-bd); }

/* En-tête */
.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); min-height: 44px; padding: var(--sp-1) var(--sp-4); background: var(--bg-sunken); border-bottom: 1px solid var(--border); }
.brand { color: var(--text-1); font-weight: 600; }
.brand:hover { text-decoration: none; }
.nav { display: flex; gap: var(--sp-3); }
.nav a { color: var(--text-2); padding: var(--sp-1) 0; border-bottom: 2px solid transparent; }
.nav a.active { color: var(--text-1); border-bottom-color: var(--accent); }
.nav a:hover { text-decoration: none; color: var(--text-1); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.who { font-size: var(--fs-meta); color: var(--text-3); }
form.inline { display: inline; margin: 0; }

/* Contenu */
.page { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-4) var(--sp-6); }
.narrow { max-width: 420px; }
.foot { font-size: var(--fs-meta); color: var(--text-3); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); }
@media (max-width: 480px) { .page { padding: 0 var(--sp-2) var(--sp-4); } .topbar, .env, .foot { padding-left: var(--sp-2); padding-right: var(--sp-2); } }

/* Indicateurs */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-2); margin: var(--sp-3) 0; }
.kpi { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r); padding: var(--sp-3); min-width: 0; }
.kpi-label { font-size: var(--fs-meta); color: var(--text-3); }
.kpi-value { font-size: var(--fs-kpi); color: var(--text-1); line-height: 1.15; margin: var(--sp-1) 0; word-break: break-all; }
.kpi-value.small { font-size: var(--fs-value); }
.kpi-value.num { text-align: left; }
.kpi-note { font-size: var(--fs-meta); color: var(--text-3); }

/* Tableaux bordés */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-surface); }
table.grid { border-collapse: collapse; width: 100%; min-width: 640px; }
table.grid th, table.grid td { border: 1px solid var(--border); padding: 0 var(--sp-2); height: var(--row); text-align: left; vertical-align: middle; white-space: nowrap; }
table.grid th { background: var(--bg-sunken); font-size: var(--fs-meta); font-weight: 600; color: var(--text-3); }
table.grid th.sorted { color: var(--text-1); box-shadow: inset 0 -2px 0 var(--accent); }
table.grid th a { color: inherit; }
table.grid tbody tr:hover { background: var(--bg-hover); }
table.grid td.num, table.grid th.num { text-align: right; }
table.grid td.empty { color: var(--text-3); text-align: center; white-space: normal; }
table.grid td.detail { max-width: 420px; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-meta); }
table.grid td.date { color: var(--text-2); }

/* Étiquettes d'état */
.tag { display: inline-block; height: 20px; line-height: 18px; padding: 0 var(--sp-2); border: 1px solid var(--border-strong); border-radius: var(--r); font-size: var(--fs-meta); color: var(--text-2); background: var(--bg-sunken); }
.tag.ok { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok-fg); }
.tag.warn { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn-fg); }
.tag.neg { background: var(--neg-bg); border-color: var(--neg-bd); color: var(--neg-fg); }
.tag.info { background: var(--info-bg); border-color: var(--info-bd); color: var(--info-fg); }

/* Bandeaux dans le flux */
.banner { padding: var(--sp-2) var(--sp-3); border: 1px solid; border-radius: var(--r); margin: var(--sp-2) 0 var(--sp-3); }
.banner.neg { background: var(--neg-bg); border-color: var(--neg-bd); color: var(--neg-fg); }
.banner.warn { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn-fg); }
.banner.info { background: var(--info-bg); border-color: var(--info-bd); color: var(--info-fg); }
.banner.ok { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok-fg); }

/* Boutons, champs */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--ctl); padding: 0 var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--bg-surface); color: var(--text-1); font: inherit; cursor: pointer; }
.btn:hover { background: var(--bg-hover); text-decoration: none; }
.btn.small { min-height: 28px; padding: 0 var(--sp-2); font-size: var(--fs-meta); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.form { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.field { display: flex; flex-direction: column; gap: var(--sp-1); }
.field label, .field-label { font-size: var(--fs-meta); color: var(--text-3); }
input, select { font: inherit; color: var(--text-1); background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--r); min-height: var(--ctl); padding: 0 var(--sp-2); }
input:focus, select:focus { border-color: var(--accent); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.toolbar input[type="search"] { min-width: 180px; }
.toolbar input[type="date"] { min-width: 140px; }

/* Pagination */
.pager { display: flex; gap: var(--sp-3); align-items: center; margin: var(--sp-3) 0; font-size: var(--fs-meta); color: var(--text-3); }
.pager .disabled { color: var(--text-3); opacity: .6; }

/* Enrôlement TOTP */
.enrol { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: flex-start; margin: 0 0 var(--sp-3); }
.qr { width: 200px; height: 200px; padding: var(--sp-2); background: var(--qr-bg); color: var(--qr-fg); border: 1px solid var(--border); border-radius: var(--r); }
.qr svg { width: 100%; height: 100%; display: block; }
.secret { display: block; font-size: var(--fs-value); color: var(--text-1); margin: var(--sp-1) 0; word-break: break-all; }