/* ══════════════════════════════════════════════════════════════════════
   superadmin-chrome.css — chrome Nuit & Jour × Wizz du SUPERADMIN (2026-10).
   Chargé EN DERNIER (après auth.css). Uniquement des jetons --sa-* / base.css :
   aucune couleur en dur. Nuit = :root, Jour = :root[data-theme="light"].
   Contre ici ce que layout.css / components.css (partagés avec l'admin)
   imposent de faux au superadmin : champs sombres à bord rose, boutons
   rose, pastille de langue blanche sur lavande (2,7:1), danger blanc sur
   #F87171 (2,8:1), or forcé en blanc en Jour.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Fond, typo, chiffres ─────────────────────────────────────────── */
.sa-app { font-family: var(--sa-font); color: var(--sa-text); }
.sa-app .sa-content { font-variant-numeric: tabular-nums; }
.sa-app :focus-visible { outline: 2px solid var(--sa-accent); outline-offset: 2px; }

/* ── 2. Bandeau ──────────────────────────────────────────────────────── */
.sa-app .sa-topbar {
  min-height: var(--sa-topbar-h);
  padding: 0 24px;
  gap: 10px;
  background: var(--sa-chrome-bg);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--sa-border);
  box-shadow: none;
}

/* Bascule de thème : pilule segmentée (bureau), bouton cycle (mobile) */
.sa-theme {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: var(--sa-r-full);
  background: var(--sa-surface); border: 1px solid var(--sa-border2);
}
.sa-theme__btn,
.sa-app .lang-switcher .lang-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 8px;
  border: 0; border-radius: var(--sa-r-full);
  background: transparent; color: var(--sa-muted);
  font: 700 .72rem/1 var(--sa-font); letter-spacing: .04em;
  cursor: pointer; box-shadow: none;
  transition: background var(--sa-t-fast), color var(--sa-t-fast);
}
.sa-theme__btn { width: 32px; padding: 0; }
.sa-theme__btn:hover,
.sa-app .lang-switcher .lang-btn:hover { color: var(--sa-text); background: var(--sa-fg-a-06); }
.sa-theme__btn[aria-pressed="true"],
.sa-app .lang-switcher .lang-btn.active {
  background: var(--sa-text); color: var(--sa-bg);
}
.sa-app .lang-switcher {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; margin: 0; border-radius: var(--sa-r-full);
  background: var(--sa-surface); border: 1px solid var(--sa-border2);
}
.sa-theme-cycle { display: none; }
.sa-theme-cycle svg { display: none; }
.sa-theme-cycle[data-mode="dark"] .ic-dark,
.sa-theme-cycle[data-mode="light"] .ic-light,
.sa-theme-cycle[data-mode="system"] .ic-system { display: block; }

/* Hamburger (mobile seulement, cf. superadmin.css) */
.sa-app .sa-hamburger { color: var(--sa-text); border-color: var(--sa-border2); border-radius: var(--sa-r-md); }

/* ── 3. Titre de section en affiche ──────────────────────────────────── */
.sa-content { --sa-tone: var(--sa-domain-platform); }
.sa-content[data-sa-domain="organizers"] { --sa-tone: var(--sa-domain-organizers); }
.sa-content[data-sa-domain="community"]  { --sa-tone: var(--sa-domain-community); }
.sa-content[data-sa-domain="content"]    { --sa-tone: var(--sa-domain-content); }
.sa-content[data-sa-domain="security"]   { --sa-tone: var(--sa-domain-security); }
.sa-content[data-sa-domain="system"]     { --sa-tone: var(--sa-domain-system); }

/* !important : les modules posent leurs titres en style en ligne (Playfair 1,05–1,6 rem) */
.sa-content .sa-poster {
  margin: 0 !important;
  font-family: var(--sa-font) !important;
  font-weight: 900 !important;
  font-size: clamp(1.75rem, 1.15rem + 1.5vw, 2.5rem) !important;   /* 28 px minimum */
  line-height: .95 !important;
  letter-spacing: -.025em !important;
  text-transform: uppercase !important;
  text-wrap: balance;
  color: var(--sa-text) !important;
}
.sa-content .sa-poster em {
  font-family: var(--sa-serif);
  font-style: italic;
  font-weight: 800;
  font-size: 1.06em;
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--sa-tone);
}
.sa-content .sa-page__header,
.sa-content .sa-section-header { align-items: flex-end; margin-bottom: 1.5rem; }

/* Chiffres : DM Sans 800 en chiffres tabulaires (les KPI étaient en Playfair, chiffres elzéviriens) */
.sa-content :is(.health-kpi-value, .biz-live-value, .cc-kpi-value, [class*="kpi-value"], [class*="kpi__value"], [class*="stat-value"], [class*="-kpi-val"]) {
  font-family: var(--sa-font) !important;
  font-weight: 800;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -.02em;
}

/* ── 4. Cartes : surface + bordure en Nuit, aplat + ombre légère en Jour ─ */
.sa-app .card { border-radius: var(--sa-r-lg); }
.sa-app .card:hover { border-color: var(--sa-border2); box-shadow: none; transform: none; }
:root[data-theme="light"] .sa-app :is(.card, .stat-chip, .health-card, .admin-card, .adm-kpi, .adm-table-wrap,
  .event-admin-panel, .overview-event, .audit-list, .tc-card, .sc-card, .hm-chart-card, .ti-score-card, .ti-kpi,
  .rm-strategy-card, .rm-kpi, .quick-action-card, .crm-card, .crm-kanban__card, .health-kpi-card,
  .health-chart-card, .health-docker-section, .biz-live-card, .sec-score-card, .sa-ipcard, .help-article,
  .wb-template-card, .ai-suggestion-card) {
  background: var(--sa-card-bg);
  border-color: var(--sa-card-line);
  box-shadow: var(--sa-card-shadow);
}

/* Tableaux nus des modules (blog : .sa-table-el ; tableaux sans classe) */
.sa-content table.sa-table-el {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--sa-surface); border: 1px solid var(--sa-border);
  border-radius: var(--sa-r-lg); overflow: hidden;
}
:root[data-theme="light"] .sa-content table.sa-table-el { background: var(--sa-card-bg); border-color: var(--sa-card-line); box-shadow: var(--sa-card-shadow); }
.sa-content :is(table.sa-table-el, table:not([class])) th {
  text-align: left; padding: .6rem .75rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sa-muted); border-bottom: 1px solid var(--sa-border2);
}
.sa-content :is(table.sa-table-el, table:not([class])) td {
  padding: .6rem .75rem; vertical-align: middle;
  border-bottom: 1px solid var(--sa-border);
}
.sa-content :is(table.sa-table-el, table:not([class])) tr:last-child td { border-bottom: 0; }

/* ── 5. Champs (components.css : fond sombre en dur + bord rose) ──────── */
.sa-app :is(input[type="text"], input[type="email"], input[type="password"], input[type="number"],
  input[type="search"], input[type="url"], input[type="tel"], input[type="date"], input[type="time"],
  input[type="datetime-local"], textarea, select) {
  background: var(--sa-sunken);
  border: 1px solid var(--sa-line-strong);
  border-radius: var(--sa-r-md);
  color: var(--sa-text);
}
.sa-app :is(input, textarea, select):focus {
  border-color: var(--sa-accent);
  box-shadow: 0 0 0 3px var(--sa-accent-soft);
  outline: none;
}
.sa-app :is(input, textarea)::placeholder { color: var(--sa-muted); opacity: 1; }
.sa-app input[type="checkbox"]:checked,
.sa-app input[type="radio"]:checked { background: var(--sa-accent-fill); border-color: var(--sa-accent-fill); }
.sa-app input[type="checkbox"], .sa-app input[type="radio"] { border-color: var(--sa-line-strong); background: var(--sa-sunken); }

/* ── 6. Boutons : un seul accent violet ─────────────────────────────── */
.sa-app .btn-primary,
.sa-app .btn-purple {
  background: var(--sa-accent-fill);
  color: var(--sa-on-accent);
  box-shadow: none;
  border-radius: var(--sa-r-md);
}
.sa-app .btn-primary:hover,
.sa-app .btn-purple:hover { background: var(--sa-accent-fill); filter: brightness(1.1); }
.sa-app .btn-gold,
:root[data-theme="light"] .sa-app .btn-gold { background: var(--sa-gold-fill); color: var(--on-gold); }
.sa-app .btn-danger,
:root[data-theme="light"] .sa-app .btn-danger { background: var(--sa-red-deep-fill); color: var(--sa-on-fill); }
.sa-app .btn-ghost { border: 1px solid var(--sa-line-strong); color: var(--sa-text); background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.sa-app .btn-ghost:hover { background: var(--sa-fg-a-06); }
.sa-app .sa-btn--primary {
  background: var(--sa-accent-fill);
  border-color: var(--sa-accent-fill);
  color: var(--sa-on-accent);
  box-shadow: none;
}
.sa-app .sa-btn--primary:hover:not(:disabled) { background: var(--sa-accent-fill); filter: brightness(1.1); box-shadow: none; }
.sa-app .sa-btn { border-radius: var(--sa-r-md); }
.sa-app .btn { transition: transform .14s ease, filter .16s ease, background var(--sa-t-fast); }
.sa-app .btn:active { transform: scale(.98); }

/* ── 7. Bandeau stress, connexion 2FA, divers ───────────────────────── */
.stress-banner { align-items: center; justify-content: center; gap: 8px; }
.stress-banner.active { display: flex; }
.sa-2fa-qr {
  display: flex; justify-content: center;
  padding: 12px; border-radius: var(--sa-r-md);
  background: var(--sa-paper);
}
.sa-2fa-qr svg { width: min(200px, 100%); height: auto; }
.sa-2fa-secret {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em;
  padding: 2px 6px; border-radius: var(--sa-r-sm);
  background: var(--sa-fg-a-08); color: var(--sa-text); word-break: break-all;
}

/* ── 8. Barres de défilement ─────────────────────────────────────────── */
.sa-app .sa-content::-webkit-scrollbar { width: 8px; height: 8px; }
.sa-app .sa-content::-webkit-scrollbar-thumb {
  background: var(--sa-fg-a-12); border-radius: var(--sa-r-full);
  border: 2px solid transparent; background-clip: content-box;
}

/* Registre d'erreurs : pas de backdrop-filter sur une carte qui défile (iOS la fait clignoter).
   Ces cartes de modules le posaient dans leur <style> injecté ; leur fond est déjà quasi opaque. */
.sa-content :is(.sa-billing-kpi, .sa-billing-chart-card, .sa-ch-card, .sa-contracts-glass, .cside-stat-card, .cside-table-wrap) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ── 9. Mobile : cibles 44 px, champs 16 px, tableaux en cartes ─────── */
@media (max-width: 768px) {
  .sa-app .sa-topbar { padding: 0 12px; gap: 8px; }
  .sa-app .sa-hamburger { width: 44px; height: 44px; }
  /* Panneau latéral au-dessus de la barre du haut (401 en mobile) : son titre et « Fermer » restaient dessous */
  #sa-slideover { z-index: 402; }
  .sa-app .lang-switcher .lang-btn { min-width: 44px; height: 44px; }
  .sa-main :is(a[class], button, [role="button"], summary, select) { min-height: 44px; }
  .sa-main :is(button, [role="button"], a[class*="btn"]) { min-width: 44px; }
  /* iOS zoome sur un champ < 16 px : !important bat les styles en ligne des modules */
  .sa-app :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea) {
    font-size: 16px !important;
    min-height: 44px;
  }
  /* Modales des modules ajoutées à <body>, hors de .sa-app (e-mails, partenaires, contrats, villes, CRM) */
  :where(body > :not(.sa-app):not(.login-screen)) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea) {
    font-size: 16px !important;
  }
}
@media (max-width: 640px) {
  .sa-theme { display: none; }
  .sa-theme-cycle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex-shrink: 0;
    border: 1px solid var(--sa-border2); border-radius: var(--sa-r-full);
    background: var(--sa-surface); color: var(--sa-text); cursor: pointer;
  }


  /* Tableaux en light DOM → cartes (étiquettes posées par lib/chrome.js) */
  .sa-main table.sa-cardify { display: block; white-space: normal; overflow: visible; border: 0; background: none; }
  .sa-main table.sa-cardify thead { display: none; }
  .sa-main table.sa-cardify tbody { display: block; }
  .sa-main table.sa-cardify tr {
    display: block;
    background: var(--sa-card-bg);
    border: 1px solid var(--sa-card-line);
    box-shadow: var(--sa-card-shadow);
    border-radius: var(--sa-r-lg);
    padding: .25rem .9rem;
    margin-bottom: .6rem;
  }
  .sa-main table.sa-cardify td {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    width: auto !important; max-width: none !important; min-height: 44px;
    padding: .5rem 0 !important;
    border: 0; border-bottom: 1px solid var(--sa-border);
    text-align: right; white-space: normal; overflow: visible;
  }
  .sa-main table.sa-cardify td:last-child { border-bottom: 0; }
  .sa-main table.sa-cardify td::before {
    content: attr(data-label);
    flex: 0 1 auto; max-width: 45%;
    text-align: left;
    font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--sa-muted);
  }
  .sa-main table.sa-cardify td:not([data-label])::before,
  .sa-main table.sa-cardify td[data-label=""]::before { content: none; }
  /* Cellules sans intitulé (case à cocher, pastille) : côte à côte en tête de carte */
  .sa-main table.sa-cardify td:not([data-label]),
  .sa-main table.sa-cardify td[data-label=""] {
    display: inline-flex; vertical-align: middle; min-height: 44px;
    border-bottom: 0; padding: .25rem .75rem 0 0 !important;
  }
  /* Cellule à plusieurs éléments (nom + e-mail…) : intitulé au-dessus, contenu aligné à gauche */
  .sa-main table.sa-cardify td:has(> *:nth-child(2)) {
    flex-direction: column; align-items: flex-start; text-align: left; gap: .15rem;
  }
  .sa-main table.sa-cardify td:has(> *:nth-child(2))::before { max-width: none; }
  .sa-main :is(.adm-table-wrap, .sa-partners-table) { overflow: visible; border: 0; background: none; box-shadow: none; }
  /* sa-table passe en cartes (requête de conteneur) : l'hôte perd son cadre */
  .sa-main sa-table { border: 0; background: none; box-shadow: none; overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  .sa-app .btn, .sa-theme__btn, .sa-app .lang-switcher .lang-btn { transition: none; }
}