/* Mise en page : barre latérale sombre fixe + zone principale ; panneau d'édition à droite de la liste. */
:root {
  --bg: #f5f6f9;
  --surface: #ffffff;
  --surface-2: #f0f2f6;
  --ink: #1a1f2b;
  --muted: #5d6474;
  --line: #dfe2ea;
  --accent: #3b4fd8;
  --accent-ink: #ffffff;
  --accent-soft: #e6e9fc;

  --side: #1c2231;
  --side-ink: #c4cad8;
  --side-muted: #7f879a;
  --side-active: #2a3246;
  --side-line: #2a3142;

  --ok: #1d7a4a;
  --ok-bg: #e2f4ea;
  --warn: #9a5b00;
  --warn-bg: #fdf0d8;
  --bad: #b3261e;
  --bad-bg: #fbe4e2;
  --bad-ink: #ffffff;

  --file-bg: #1c2231;
  --file-ink: #c9d0de;
  --file-gutter: #626b80;
  --file-user: #a3b2ff;

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
  --r-s: 6px;
  --r-m: 10px;
  --side-w: 232px;
  --shadow: 0 1px 2px rgb(20 25 40 / 6%), 0 8px 24px rgb(20 25 40 / 6%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12151d;
    --surface: #1a1e29;
    --surface-2: #212634;
    --ink: #e6e8ee;
    --muted: #9aa1b2;
    --line: #2b3140;
    --accent: #8c9bff;
    --accent-ink: #0f1320;
    --accent-soft: #252c48;
    --side: #0d1017;
    --side-ink: #b3bacb;
    --side-muted: #6c7489;
    --side-active: #1d2331;
    --side-line: #1d2331;
    --ok: #6fd3a0;
    --ok-bg: #173327;
    --warn: #f2b65a;
    --warn-bg: #362a15;
    --bad: #ff8a80;
    --bad-bg: #3a1c1a;
    --bad-ink: #2a0d0b;
    --file-bg: #0d1017;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 25%);
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 14px/1.5 var(--sans); color: var(--ink); background: var(--bg); }
h1, h2 { text-wrap: balance; }
.mono { font-family: var(--mono); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprite { display: none; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------------ boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: 600 13px/1 var(--sans); color: var(--ink); text-decoration: none; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s);
  padding: 9px 14px; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn-primary:hover { background: var(--accent); filter: brightness(1.08); }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn-danger { background: var(--bad); color: var(--bad-ink); border-color: transparent; }
.btn-danger:hover { background: var(--bad); filter: brightness(1.08); }
.btn-danger-ghost { background: transparent; border-color: transparent; color: var(--bad); padding-inline: 0; }
.btn-danger-ghost:hover { background: transparent; text-decoration: underline; }
.icon-btn {
  display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none;
  background: transparent; color: var(--muted); border: 1px solid transparent; border-radius: var(--r-s); cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn.danger:hover { background: var(--bad-bg); color: var(--bad); }

/* ------------------------------------------------------------ structure */
.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  background: var(--side); color: var(--side-ink);
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 22px; padding: 20px 12px;
  border-right: 1px solid var(--side-line);
}
.brand { display: flex; align-items: center; gap: 10px; padding: 0 10px; font-weight: 700; font-size: 15px; color: var(--side-ink); letter-spacing: -0.01em; }
.brand-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: var(--accent); color: var(--accent-ink); }
.brand-mark svg { width: 17px; height: 17px; stroke-width: 2.2; }
.nav { display: grid; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-s);
  color: var(--side-ink); text-decoration: none; font-weight: 500;
}
.nav a:hover { background: var(--side-active); }
.nav a[aria-current="page"] { background: var(--side-active); color: #fff; font-weight: 600; }
.nav a em { margin-left: auto; font: 600 11px var(--mono); font-style: normal; color: var(--side-muted); font-variant-numeric: tabular-nums; }
.account { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 4px 0 10px; border-top: 1px solid var(--side-line); }
.account-name { font-size: 13px; color: var(--side-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account .icon-btn { color: var(--side-muted); }
.account .icon-btn:hover { background: var(--side-active); color: var(--side-ink); }

.main { min-width: 0; padding: 28px 32px 48px; display: grid; gap: 18px; align-content: start; }
.open-warning { margin: 0; padding: 10px 14px; border-radius: var(--r-s); background: var(--bad-bg); color: var(--bad); font-weight: 600; }
.view { display: grid; gap: 18px; min-width: 0; }
.view-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.view-head h1 { margin: 0; font-size: 22px; letter-spacing: -0.015em; }
.view-meta { margin: 4px 0 0; color: var(--muted); font-size: 13px; display: flex; gap: 10px; flex-wrap: wrap; }
.view-meta .mono { color: var(--ink); word-break: break-all; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------ résumé */
.summary { display: flex; gap: 10px; flex-wrap: wrap; }
.summary .stat {
  display: flex; align-items: baseline; gap: 8px; padding: 9px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m);
}
.summary .stat strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.summary .stat span { color: var(--muted); font-size: 13px; }
.summary .stat.weak strong { color: var(--warn); }
.summary .stat.none strong { color: var(--bad); }

/* ------------------------------------------------------------ liste */
.users-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.users-layout:has(.drawer:not([hidden])) { grid-template-columns: minmax(0, 1fr) 320px; }
.users-list { display: grid; gap: 12px; min-width: 0; }
.search {
  display: flex; align-items: center; gap: 8px; padding: 0 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); color: var(--muted);
}
.search:focus-within { border-color: var(--accent); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 10px 0; font: inherit; color: var(--ink); }

.table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
table.users tbody tr { cursor: pointer; }
table.users tbody tr:hover, table.users tbody tr.selected { background: var(--surface-2); }
table.users tbody tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
td.name { font-family: var(--mono); font-weight: 600; word-break: break-all; }
td.algo { color: var(--muted); white-space: nowrap; }
td.acts { width: 1%; white-space: nowrap; text-align: right; padding-block: 4px; }
td.acts .icon-btn { width: 30px; height: 30px; }
td.acts svg { width: 16px; height: 16px; }
.empty { margin: 0; padding: 28px 16px; text-align: center; color: var(--muted); }

.pill { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 99px; white-space: nowrap; }
.pill.strong { color: var(--ok); background: var(--ok-bg); }
.pill.weak { color: var(--warn); background: var(--warn-bg); }
.pill.none { color: var(--bad); background: var(--bad-bg); }

/* ------------------------------------------------------------ panneau d'édition */
.drawer {
  position: sticky; top: 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow);
  padding: 16px 18px 18px; display: grid; gap: 14px;
}
.drawer-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.drawer-head h2 { margin: 0; font-size: 15px; word-break: break-all; }
#user-form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
label { font-weight: 600; font-size: 12.5px; }
input, select {
  width: 100%; min-width: 0; font: inherit; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-s); padding: 9px 11px;
}
input:focus, select:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input[readonly] { color: var(--muted); }
input[aria-invalid="true"] { border-color: var(--bad); }
.input-group { display: flex; gap: 4px; align-items: center; }
.input-group input { flex: 1; }
.help { margin: 0; font-size: 12px; color: var(--muted); }
.form-error { margin: 0; color: var(--bad); font-size: 13px; }
.drawer-actions { display: flex; gap: 8px; }
.drawer-actions .btn-primary { flex: 1; }
#delete-btn { justify-self: start; }

/* ------------------------------------------------------------ fichier brut */
.file-view {
  background: var(--file-bg); color: var(--file-ink); border-radius: var(--r-m);
  font: 13px/1.75 var(--mono); padding: 14px 0; overflow: auto; max-height: calc(100vh - 180px);
  counter-reset: line;
}
.file-view .ln { display: block; padding-right: 16px; white-space: pre; }
.file-view .ln::before {
  counter-increment: line; content: counter(line);
  display: inline-block; width: 3.4em; padding-right: 1em; margin-right: 1em; text-align: right;
  color: var(--file-gutter); border-right: 1px solid var(--side-line); user-select: none;
}
.file-view .u { color: var(--file-user); font-weight: 600; }
.file-view .sep, .file-view .c { color: var(--file-gutter); }
.file-view .c { font-style: italic; }
.file-view .placeholder { display: block; padding: 0 16px; color: var(--file-gutter); }

/* ------------------------------------------------------------ journal */
table.audit td { white-space: nowrap; }
table.audit td.when { color: var(--muted); font-variant-numeric: tabular-nums; }
table.audit td.who, table.audit td.ip { font-family: var(--mono); font-size: 12.5px; }
table.audit td.ip { color: var(--muted); }
.event { display: inline-flex; align-items: center; gap: 7px; }
.event::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.event.ok::before { background: var(--ok); }
.event.bad::before { background: var(--bad); }
.event.info::before { background: var(--accent); }

/* ------------------------------------------------------------ confirmation */
.confirm {
  border: 1px solid var(--line); border-radius: var(--r-m); padding: 22px; width: min(400px, calc(100vw - 32px));
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow);
}
.confirm::backdrop { background: rgb(10 14 24 / 45%); }
.confirm h2 { margin: 0 0 8px; font-size: 17px; }
.confirm p { margin: 0 0 20px; color: var(--muted); }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ------------------------------------------------------------ toast */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 10;
  background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: var(--r-s);
  font-size: 13px; font-weight: 600; max-width: calc(100vw - 32px); box-shadow: var(--shadow);
}
.toast.error { background: var(--bad); color: var(--bad-ink); }

/* ------------------------------------------------------------ connexion */
.login-page { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.login-aside {
  background: var(--side); color: var(--side-ink); padding: 40px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
}
.login-aside .brand { padding: 0; }
.login-aside pre {
  margin: 0; font: 12.5px/1.9 var(--mono); color: var(--side-muted); white-space: pre; overflow: hidden;
}
.login-aside pre b { color: var(--file-user); font-weight: 600; }
.login-aside p { margin: 0; color: var(--side-muted); font-size: 13px; max-width: 40ch; }
.login-main { display: grid; place-items: center; padding: 32px 16px; }
.login-panel { width: 100%; max-width: 360px; display: grid; gap: 22px; }
.login-panel h1 { margin: 0 0 6px; font-size: 24px; letter-spacing: -0.02em; }
.login-panel .sub { margin: 0; color: var(--muted); }
#login-form { display: grid; gap: 16px; }
#login-form .btn-primary { padding-block: 11px; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .users-layout:has(.drawer:not([hidden])) { grid-template-columns: minmax(0, 1fr) 290px; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: sticky; top: 0; z-index: 5; height: auto; flex-direction: row; align-items: center; gap: 8px; padding: 8px 12px; overflow-x: auto; }
  .brand { padding: 0 6px 0 0; }
  .brand span:not(.brand-mark) { display: none; }
  .nav { display: flex; gap: 2px; }
  .nav a { padding: 8px 10px; white-space: nowrap; }
  .account { margin: 0 0 0 auto; padding: 0; border: 0; }
  .account-name { display: none; }
  .main { padding: 20px 16px 40px; }
  .users-layout:has(.drawer:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
  .drawer { position: fixed; inset: auto 0 0 0; top: auto; max-height: 88vh; overflow-y: auto; border-radius: var(--r-m) var(--r-m) 0 0; z-index: 8; }
  .login-page { grid-template-columns: minmax(0, 1fr); }
  .login-aside { display: none; }
}
@media (max-width: 560px) {
  .nav a span { display: none; }
  td.algo { white-space: normal; }
  th, td { padding-inline: 10px; }
}
@media (prefers-reduced-motion: no-preference) {
  .drawer { animation: slide-in .16s ease-out; }
  @keyframes slide-in { from { opacity: 0; transform: translateX(8px); } }
}