/* ============================================================
 *  Thème : variables sémantiques + mode sombre
 *  Chargé après portal.css sur toutes les pages.
 *  Le mode est posé sur <html data-theme="light|dark"> (voir le script en tête de page).
 * ============================================================ */

:root {
  color-scheme: light;
  --on-primary: #fff;
  --th-bg: #fafafc;
  --row-hover: #fbfaff;
  --row-link-hover: #f6f1f9;
  --warn-bg: #fffbeb; --warn-bd: #fde68a; --warn-fg: #92400e;
  --danger-bg: #fef2f2; --danger-bd: #fecaca; --danger-fg: #991b1b;
  --info-bg: #eff6ff; --info-bd: #bfdbfe; --info-fg: #1e40af;
  --ok-bg: #edf7f2; --ok-bd: #bbe5cd; --ok-fg: #166534;
  --hero-grad: linear-gradient(155deg, #f9f0f5 0%, #f3eef6 50%, #edf7f2 100%);
  --nav-bg: rgba(255,255,255,.96);
  --side-bg: #ffffff; --side-fg: #5b6578; --side-title: #98a2b3; --side-hover: #f3f4f8; --side-brand: #1a1a2e;
  --app-bg: #f5f6fa;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1118;
  --surface: #161a23;
  --surface-2: #1e2331;
  --border: #283042;
  --text: #e7e9ee;
  --text-muted: #a0a8b8;
  --text-light: #747e92;
  --primary: #a56f98;
  --primary-dark: #8d5a81;
  --primary-light: rgba(165,111,152,.17);
  --primary-mid: #7c5471;
  --accent: #2dbf74;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.5);
  --shadow: 0 4px 16px rgba(0,0,0,.45);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.6);
  --th-bg: #1a1f2b;
  --row-hover: #1b2130;
  --row-link-hover: #211a2b;
  --warn-bg: rgba(245,158,11,.12); --warn-bd: rgba(245,158,11,.35); --warn-fg: #f5c36b;
  --danger-bg: rgba(239,68,68,.12); --danger-bd: rgba(239,68,68,.38); --danger-fg: #fca5a5;
  --info-bg: rgba(59,130,246,.13); --info-bd: rgba(59,130,246,.35); --info-fg: #93c5fd;
  --ok-bg: rgba(45,191,116,.12); --ok-bd: rgba(45,191,116,.35); --ok-fg: #7ee2ac;
  --hero-grad: linear-gradient(155deg, #1d1626 0%, #161a25 55%, #121f1b 100%);
  --nav-bg: rgba(22,26,35,.94);
  --side-bg: #11141c; --side-fg: #a9b1c3; --side-title: #6b7488; --side-hover: rgba(255,255,255,.06); --side-brand: #f1f3f8;
  --app-bg: #0b0e14;
}

/* ── Éléments à couleurs codées en dur dans portal.css ─────── */
.navbar { background: var(--nav-bg); }
.page-hero { background: var(--hero-grad); }
.status-bar, .completion { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn-fg); }
.status-bar.danger { background: var(--danger-bg); border-color: var(--danger-bd); color: var(--danger-fg); }
.adm-t th { background: var(--th-bg); }
.adm-t tbody tr:hover td, .adm-list > a:hover { background: var(--row-hover); }
.adm-t tr.row-link:hover td { background: var(--row-link-hover); }
.btn-primary { color: var(--on-primary); }
dialog { background: var(--surface); color: var(--text); }
.status-inactive { color: var(--danger-fg); }
.status-pending { color: var(--warn-fg); }
.badge-trust { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 99px; }
.badge-trust.t-certified { background: var(--ok-bg); color: var(--ok-fg); }
.badge-trust.t-reserve { background: var(--warn-bg); color: var(--warn-fg); }
.badge-trust.t-unverified { background: var(--danger-bg); color: var(--danger-fg); }
[data-theme="dark"] .btn-primary { color: #1a1020; }
[data-theme="dark"] .btn-primary:hover { color: #1a1020; }
[data-theme="dark"] .form-control, [data-theme="dark"] .form-select, [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { color: var(--text); }
[data-theme="dark"] ::placeholder { color: var(--text-light); }
[data-theme="dark"] .form-select { background-color: var(--surface-2); }
[data-theme="dark"] .form-control, [data-theme="dark"] input:not([type=checkbox]):not([type=radio]), [data-theme="dark"] textarea { background-color: var(--surface-2); }
[data-theme="dark"] img.invert-dark { filter: invert(1) hue-rotate(180deg); }
[data-theme="dark"] .navbar-nav a:hover { background: var(--surface-2); }

/* ── Bouton de bascule clair / sombre ─────────────────────── */
.theme-toggle { width: 38px; height: 38px; display: inline-grid; place-items: center; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); border-radius: 10px; cursor: pointer; font-size: 15px; transition: var(--transition); flex-shrink: 0; }
.theme-toggle:hover { color: var(--primary); border-color: var(--primary-mid); }
.theme-toggle .i-sun { display: none; }
[data-theme="dark"] .theme-toggle .i-sun { display: inline; }
[data-theme="dark"] .theme-toggle .i-moon { display: none; }