/* ============================================================================
   nexus.css — IPM Nexus design system (centralized stylesheet)
   ============================================================================

   This file is the single source of truth for shared styles across all pages
   of the project. It consolidates the shared component styles, alongside
   nav-shell.js (SPA topbar/sidebar styles).

   Linked from:
     - index.html
     - login.html
     - p_*.html              (each page also has a minimal <style> for page-specific rules)

   Inside each page, the local <style> block contains ONLY rules that are
   specific to that page. Anything common (tokens, btn-*, badge-*, chips,
   drop-zones, popover, tables, detail panel, modal, etc.) lives HERE.

   Cascade order:
     1. nexus.css           (this file, linked first in <head>)
     2. nav-shell.js injected   (now no-op; kept for backwards compat)
     3. page-local <style>      (override here if needed for that page only)

   ----------------------------------------------------------------------------
   Sections in order :
     1. RESET & GLOBALS
     2. CSS TOKENS (:root)
     3. SPA SHELL (topbar / sidebar from nav-shell.js)
     4. TYPOGRAPHY
     5. BUTTONS
     6. FORMS (inputs / selects / checkboxes)
     7. RANGE SLIDERS
     8. BADGES & PILLS
     9. CHIPS
    10. DROP ZONES
    11. CARDS (criteria / results / info)
    12. TABLES
    13. DETAIL PANEL
    14. MODAL
    15. VALUE POPOVER (Pattern A)
    16. STATUS / LOADING / EMPTY
    17. KPI / PAGE HEADER
    18. KEYFRAMES
   ============================================================================ */


/* Nexus — tokens light mode (slate + emerald), contraste accentué.
   Scopés en --adsnav-* pour ne pas entrer en conflit avec les vars existantes
   des pages. ----------------------------------------------------------------- */
/* SPA loading bar shown at top during page swap */
body.spa-loading { cursor: progress; }
body.spa-loading::after { content: ''; position: fixed; top: 56px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--adsnav-primary), transparent);
  animation: spa-loading-bar 1s ease-in-out infinite; z-index: 9999;
  pointer-events: none; }
@keyframes spa-loading-bar {
  0% { transform: translateX(-100%); } 100% { transform: translateX(100%); }
}
/* Base layout: shift body content below the fixed 48px topbar and right of the
   fixed 56px sidebar. Overridden by .adsnav-expanded (sidebar expanded → 220px)
   and .adsnav-no-nav (page without shell). */
body { padding-top: 56px; padding-left: 56px; }
body.adsnav-expanded { padding-left: 252px; }
/* Hide nav-shell entirely when not authenticated (e.g. login screen) */
body.adsnav-no-nav { padding-top: 0 !important;
  padding-left: 0 !important; }
body.adsnav-no-nav .adsnav-topbar,
body.adsnav-no-nav .adsnav-sidebar { display: none !important; }
/* TOPBAR ──────────────────────────────────────────────────────────────────── */
.adsnav-topbar { position: fixed; top: 0; left: 0; right: 0;
  height: 56px;
  background: var(--adsnav-bg-primary);
  border-bottom: 1px solid var(--adsnav-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
  display: flex; align-items: center;
  z-index: 100;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.adsnav-brand { display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
  height: 100%;
  min-width: 200px;
  text-decoration: none;
  color: var(--adsnav-text-primary); }
.adsnav-brand:hover { background: var(--adsnav-bg-secondary); }
.adsnav-brand-icon { display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; }
.adsnav-brand-icon img { height: 36px; width: auto; object-fit: contain; }
.adsnav-brand-text { line-height: 1.2; }
.adsnav-brand-name { font-weight: 700; font-size: 13px; color: var(--adsnav-text-primary); }
.adsnav-brand-sub { font-size: 10px; color: var(--adsnav-text-tertiary); }
.adsnav-breadcrumb { flex: 1;
  display: flex; align-items: center; gap: 6px;
  padding: 0 16px;
  font-size: 12px;
  min-width: 0; }
.adsnav-bc-section { color: var(--adsnav-primary-hover); }
.adsnav-bc-sep { font-size: 11px; color: var(--adsnav-primary); opacity: 0.5; }
.adsnav-bc-page { color: var(--adsnav-primary-text); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adsnav-user-wrap { display: flex; align-items: center;
  padding: 0 12px 0 8px;
  height: 100%;
  position: relative; }
.adsnav-user-btn { display: flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--adsnav-border);
  background: var(--adsnav-bg-primary);
  color: var(--adsnav-text-primary);
  cursor: pointer;
  font-family: inherit; }
.adsnav-user-btn:hover { background: var(--adsnav-bg-secondary); border-color: var(--adsnav-border-strong); }
.adsnav-user-btn.open { background: var(--adsnav-primary-bg); border-color: var(--adsnav-primary); }
.adsnav-user-btn.open .adsnav-user-icon,
.adsnav-user-btn.open .adsnav-user-name,
.adsnav-user-btn.open .adsnav-user-chev { color: var(--adsnav-primary-text); }
/* Editor mode — emerald accent on user-btn to make role visually obvious */
.adsnav-user-btn.editor { background: var(--adsnav-primary-bg); border-color: var(--adsnav-primary); }
.adsnav-user-btn.editor .adsnav-user-icon,
.adsnav-user-btn.editor .adsnav-user-name,
.adsnav-user-btn.editor .adsnav-user-chev,
.adsnav-user-btn.editor .adsnav-user-role { color: var(--adsnav-primary-text); }
.adsnav-user-icon { font-size: 20px; color: var(--adsnav-text-secondary); flex-shrink: 0; }
.adsnav-user-text { line-height: 1.2; text-align: left; }
.adsnav-user-name { font-size: 11px; font-weight: 700; }
.adsnav-user-role { font-size: 9px; color: var(--adsnav-text-tertiary); }
.adsnav-user-btn.open .adsnav-user-role { color: var(--adsnav-primary-text); opacity: .8; }
.adsnav-user-chev { font-size: 12px; color: var(--adsnav-text-tertiary); flex-shrink: 0; }
/* User menu popup */
.adsnav-user-menu { position: absolute;
  top: 52px; right: 12px;
  width: 260px;
  background: var(--adsnav-bg-primary);
  border: 1px solid var(--adsnav-border-strong);
  border-radius: 8px;
  padding: 6px;
  z-index: 200;
  display: none;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25), 0 4px 8px rgba(0, 0, 0, 0.12); }
.adsnav-user-menu.open { display: block; }
.adsnav-menu-header { display: flex; align-items: center; gap: 12px;
  padding: 10px 8px; }
.adsnav-menu-header > i { font-size: 32px; color: var(--adsnav-text-secondary); flex-shrink: 0; }
.adsnav-menu-header-text { min-width: 0; }
.adsnav-menu-header-name { font-weight: 700; font-size: 12px; color: var(--adsnav-text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adsnav-menu-header-email { font-size: 10px; color: var(--adsnav-text-tertiary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adsnav-menu-divider { height: 1px; background: var(--adsnav-border); margin: 4px 0; }
.adsnav-menu-item { padding: 8px 9px;
  font-size: 11px;
  display: flex; align-items: center; gap: 9px;
  border-radius: 4px;
  color: var(--adsnav-text-primary);
  cursor: pointer;
  border: none; background: transparent;
  width: 100%; text-align: left;
  font-family: inherit; }
.adsnav-menu-item:hover { background: var(--adsnav-bg-secondary); }
.adsnav-menu-item.danger { color: var(--adsnav-danger); }
.adsnav-menu-item.danger:hover { background: rgba(220,38,38,0.08); }
.adsnav-menu-item > i { font-size: 14px; flex-shrink: 0; }
.adsnav-menu-role-row { padding: 7px 9px;
  font-size: 11px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; }
.adsnav-menu-role-row .adsnav-role-label { display: flex; align-items: center; gap: 9px;
  color: var(--adsnav-text-primary); }
.adsnav-menu-role-row .adsnav-role-label i { font-size: 14px; }
.adsnav-role-toggle { display: flex; gap: 2px;
  background: var(--adsnav-bg-tertiary);
  padding: 2px;
  border-radius: 99px; }
.adsnav-role-toggle button { padding: 2px 9px;
  font-size: 10px;
  border-radius: 99px;
  cursor: pointer;
  color: var(--adsnav-text-secondary);
  border: none; background: transparent;
  font-family: inherit;
  transition: all .15s; }
.adsnav-role-toggle button.active { background: var(--adsnav-primary);
  color: #ffffff;
  font-weight: 700; }
.adsnav-role-toggle button:disabled { opacity: .4; cursor: not-allowed; }
/* SIDEBAR ─────────────────────────────────────────────────────────────────── */
.adsnav-sidebar { position: fixed;
  top: 48px; left: 0; bottom: 0;
  width: 56px;
  background: var(--adsnav-bg-secondary);
  border-right: 1px solid var(--adsnav-border);
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.08);
  display: flex; flex-direction: column;
  align-items: center;
  padding: 10px 0;
  transition: width .18s ease, padding .18s ease;
  z-index: 90;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;        /* Firefox : barre masquée (scroll molette conservé) */
  -ms-overflow-style: none;     /* IE/Edge legacy */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.adsnav-sidebar::-webkit-scrollbar { width: 0; height: 0; display: none; }  /* Chrome/Safari */
body.adsnav-expanded .adsnav-sidebar { width: 252px;
  align-items: stretch;
  padding: 10px; }
.adsnav-toggle { width: 36px; height: 36px;
  border-radius: 6px;
  border: 1px solid var(--adsnav-border);
  background: var(--adsnav-bg-primary);
  color: var(--adsnav-text-secondary);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
  transition: all .15s;
  flex-shrink: 0; }
.adsnav-toggle:hover { background: var(--adsnav-bg-tertiary);
  color: var(--adsnav-text-primary);
  border-color: var(--adsnav-border-strong); }
body.adsnav-expanded .adsnav-toggle { align-self: flex-end; }
.adsnav-toggle i { font-size: 14px; }
.adsnav-section-label { font-size: 9px; color: var(--adsnav-text-tertiary);
  padding: 4px 10px;
  letter-spacing: 0.6px;
  margin-top: 8px; margin-bottom: 3px;
  white-space: nowrap;
  display: none;
  font-weight: 700; }
body.adsnav-expanded .adsnav-section-label { display: block; }
/* ─── GROUPES ACCORDION ───────────────────────────────────────────────────
   En mode collapsed (sidebar 56px), les groupes sont transparents : les
   items sont rendus à plat (display:contents fait disparaître les wrappers
   du flow). En mode expanded, le header devient cliquable et les items
   se déplient/replient via classe .collapsed.
   --------------------------------------------------------------------- */
.adsnav-group { display: contents; }
body.adsnav-expanded .adsnav-group { display: block; }
.adsnav-group-header { display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin-top: 10px; margin-bottom: 3px;
  border-radius: 6px;
  color: var(--adsnav-text-tertiary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  transition: background .15s, color .15s;
  font-family: inherit; }
body.adsnav-expanded .adsnav-group-header { display: flex; }
.adsnav-group-header:hover { background: var(--adsnav-bg-tertiary);
  color: var(--adsnav-text-secondary); }
.adsnav-group-header .adsnav-group-icon { font-size: 14px; flex-shrink: 0; }
.adsnav-group-header .adsnav-group-label { flex: 1; }
.adsnav-group-header .adsnav-group-chevron { font-size: 12px;
  transition: transform .15s;
  opacity: 0.7; }
.adsnav-group.collapsed .adsnav-group-header .adsnav-group-chevron { transform: rotate(-90deg); }
.adsnav-group-items { display: contents; }
body.adsnav-expanded .adsnav-group-items { display: block; }
body.adsnav-expanded .adsnav-group.collapsed .adsnav-group-items { display: none; }
/* Indent legèrement les items dans leur groupe (mode expanded uniquement) */
body.adsnav-expanded .adsnav-group .adsnav-item { padding-left: 16px; }
.adsnav-item { display: flex; align-items: center; gap: 0;
  padding: 0;
  width: 36px; height: 36px;
  justify-content: center;
  border-radius: 6px;
  color: var(--adsnav-text-secondary);
  text-decoration: none;
  margin-bottom: 3px;
  transition: all .15s;
  flex-shrink: 0; }
body.adsnav-expanded .adsnav-item { width: auto; height: auto;
  padding: 7px 10px;
  gap: 10px;
  justify-content: flex-start; }
.adsnav-item:hover { background: var(--adsnav-bg-tertiary); color: var(--adsnav-text-primary); }
.adsnav-item.active { background: var(--adsnav-primary-bg);
  color: var(--adsnav-primary-text);
  box-shadow: inset 3px 0 0 var(--adsnav-primary); }
body.adsnav-expanded .adsnav-item.active { font-weight: 700; }
.adsnav-item > i { font-size: 18px; flex-shrink: 0; }
body.adsnav-expanded .adsnav-item > i { font-size: 14px; }
.adsnav-item-label { font-size: 12px;
  white-space: nowrap;
  display: none; }
body.adsnav-expanded .adsnav-item-label { display: block; }
.adsnav-sidebar-spacer { flex: 1; min-height: 8px; }
/* ─── BOUTONS PARTAGÉS ────────────────────────────────────────────────────
   Utilisent les variables CSS de la page consommatrice (--green, --bg,
   --text, --text-muted, --border, etc.). Toutes les pages app héritent
   de ce style pour cohérence visuelle. ----------------------------------- */
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
/* Tailles */
/* Variante "full" pour formulaires (login, modal validation) */
/* ─── SEGMENTED TOGGLE (ex: Plat/Arbre) ────────────────────────────────
   Classes harmonisées : .view-mode-toggle (gammatrix réf), .view-toggle (dmpsegments).
   Layout : segmented control avec bordure unique, fond blanc, item actif vert. */
.view-mode-toggle,
.view-toggle { display: inline-flex; align-items: center; gap: 0;
  border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; background: var(--white, #fff);
  height: 28px; box-sizing: border-box; }
.view-mode-toggle .vm-btn,
.view-toggle button { padding: 0 10px; height: 26px;
  border: none; background: transparent;
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  color: var(--text-muted); cursor: pointer;
  transition: all .15s; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px; }
.view-mode-toggle .vm-btn:hover,
.view-toggle button:hover { background: var(--bg); color: var(--text); }
.view-mode-toggle .vm-btn.active,
.view-toggle button.active { background: var(--green); color: white; }
.view-mode-toggle .vm-btn + .vm-btn,
.view-toggle button + button { border-left: 1px solid var(--border); }
.view-mode-toggle .vm-btn.active + .vm-btn,
.view-toggle button.active + button { border-left-color: var(--green); }
/* ─── PERIOD TABS (ex: 7j/30j/90j/365j) ──────────────────────────────
   Classes harmonisées : .period-tabs-row (gammatrix réf), .gam-period-tabs (arctree). */
.period-tabs-row,
.gam-period-tabs { display: flex; gap: 4px;
  background: var(--bg); border-radius: 8px;
  padding: 4px; width: fit-content; }
.period-tab,
.gam-tab { padding: 5px 14px; border-radius: 6px;
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  cursor: pointer; color: var(--text-muted);
  border: none; background: transparent;
  transition: all .15s; line-height: 1.3; text-align: center; }
.period-tab:hover,
.gam-tab:hover { background: rgba(0,0,0,0.04); color: var(--text); }
.period-tab.active,
.gam-tab.active { background: var(--green); color: white;
  box-shadow: 0 2px 8px rgba(26,187,156,0.25); }
/* ════════════════════════════════════════════════════════════════════════
   TOKENS — copied from p_dmpsegments.html (canonical source)
   ════════════════════════════════════════════════════════════════════════ */
:root { --green:       #1ABB9C;
  --green-dark:  #169f85;
  --green-light: #d1f3ec;
  --green-lighter: #e9faf6;
  --white:       #ffffff;
  --bg:          #f5f7fb;
  --text:        #1e2633;
  --text-muted:  #7e8896;
  --border:      #eff0f3;
  --border-strong:#e6e7eb;
  --shadow:      0 1px 2px rgba(30,38,51,.04), 0 1px 3px rgba(30,38,51,.06);
  --shadow-md:   0 4px 14px rgba(30,38,51,.08);
  --shadow-lg:   0 12px 28px rgba(30,38,51,.12);
  --radius:      8px;
  --radius-lg:   12px;
  --radius-sm:   6px;
  --font-title:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* accents catégoriels (charts / tuiles / badges) — usage parcimonieux, emerald reste primaire */
  --blue:#3b82f6;   --blue-lt:#eff6ff;
  --amber:#f59e0b;  --amber-lt:#fffbeb;
  --violet:#8b5cf6; --violet-lt:#f5f3ff;
  --rose:#f43f5e;   --rose-lt:#fff1f2;
  --danger:      #dc2626;
  --danger-light:#fef2f2;
  --info:        #0284c7;
  --info-light:  #e0f2fe;
  --warn:        #d97706;
  --warn-light:  #fef3c7;
  /* ── Nav-shell + login dark palette (graphite slate-700, accent emerald) ─
     Consommées par .adsnav-* (topbar/sidebar/user-menu) et par login.html.
     Doivent rester ici puisque login.html charge nexus.css sans nav-shell.js. */
  --adsnav-bg-primary:    #1e293b;
  --adsnav-bg-secondary:  #1e293b;
  --adsnav-bg-tertiary:   #334155;
  --adsnav-text-primary:  #f1f5f9;
  --adsnav-text-secondary:#cbd5e1;
  --adsnav-text-tertiary: #94a3b8;
  --adsnav-border:        #475569;
  --adsnav-border-strong: #64748b;
  --adsnav-primary:       #1ABB9C;
  --adsnav-primary-hover: #40c9b1;
  --adsnav-primary-bg:    rgba(26,187,156,0.20);
  --adsnav-primary-text:  #79d9c6;
  --adsnav-danger:        #f87171; }
* , *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
body { font-family:var(--font-body); background:var(--bg); color:var(--text); font-size:14px; line-height:1.5; }
/* App-shell scroll (2026-08-24) : le CONTENU scrolle (pas le document), avec une gouttière de
   scrollbar SYMÉTRIQUE (both-edges) → marges gauche = droite IDENTIQUES sur toutes les pages.
   (La sidebar fixe à gauche rend impossible une symétrie au niveau du document.) */
html { overflow: hidden; }
#home-screen { height: calc(100vh - 56px); min-height: 0; overflow: hidden; }
#spa-content { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable both-edges; }
/* Scrollbars left native (browser default) — do not restyle the main window scrollbar. */
/* ════════════════════════════════════════════════════════════════════════
   TEMPLATE PAGE LAYOUT — sidebar nav (240px) + content
   ════════════════════════════════════════════════════════════════════════ */
/* ─── Sections ───────────────────────────────────────────────────────── */
/* ─── Component rows : preview + source ─────────────────────────────── */
@media (max-width: 900px) {
  .comp-body { grid-template-columns:1fr; }
  .comp-preview { border-right:none; border-bottom:1px solid #e7e5e4; }
}
/* ─── Token swatches ────────────────────────────────────────────────── */
/* ════════════════════════════════════════════════════════════════════════
   COMPONENTS — copied/distilled from the project sources
   ════════════════════════════════════════════════════════════════════════ */
/* ─── BUTTONS (from nav-shell.js) ────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:0 14px; height:34px;
  font-family:var(--font-body); font-size:13px; font-weight:600;
  border:1px solid transparent; border-radius:var(--radius);
  cursor:pointer; transition:all .15s;
  background:var(--green); color:white;
  text-decoration:none; line-height:1; }
.btn:hover { background:var(--green-dark); }
.btn:disabled, .btn.disabled { opacity:.5; cursor:not-allowed; pointer-events:none; }
.btn-primary { background:var(--green); color:white; box-shadow:0 1px 2px rgba(26,187,156,.35); }
.btn-primary:hover { background:var(--green-dark); }
.btn-outline { background:white; color:var(--text); border-color:var(--border); box-shadow:0 1px 1.5px rgba(28,25,23,.03); }
.btn-outline:hover { background:#faf9f8; border-color:var(--border-strong); color:var(--text); }
.btn-ghost { background:transparent; color:var(--text); border:1px solid transparent; }
.btn-ghost:hover { background:var(--bg); color:var(--text); border-color:var(--border); }
.btn-danger { background:var(--danger); color:white; }
.btn-danger:hover { background:#b91c1c; }
.btn-warn { background:var(--warn); color:white; }
.btn-warn:hover { background:#b45309; }
.btn-sm { padding:0 10px; height:28px; font-size:11px; }
.btn-full { width:100%; }
.btn-icon { padding:0 8px; }
/* ─── FORMS ───────────────────────────────────────────────────────────── */
input[type=text], input[type=search], input[type=email], input[type=password], select, textarea { font-family:var(--font-body); font-size:13px; color:var(--text);
  padding:6px 10px; border:1px solid var(--border); border-radius:6px;
  background:white; transition:border .12s, box-shadow .12s; }
input[type=text]:focus, input[type=search]:focus, input[type=email]:focus, input[type=password]:focus, select:focus, textarea:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 2px rgba(26,187,156,.18); }
input[type=text]::placeholder, input[type=search]::placeholder { color:var(--text-muted); }
input[type=checkbox] { width:14px; height:14px; cursor:pointer; accent-color:var(--green); }
/* Search input with icon */
.search-input { position:relative; }
.search-input > i { position:absolute; left:8px; top:50%; transform:translateY(-50%);
  font-size:13px; color:var(--text-muted); pointer-events:none; }
.search-input input { padding-left:28px; }
/* ─── BADGES ──────────────────────────────────────────────────────────── */
.badge { display:inline-block; padding:2px 7px; border-radius:4px;
  font-size:10px; font-weight:600; line-height:1.4;
  text-transform:uppercase; letter-spacing:.3px; }
.badge-active { background:var(--green-light); color:var(--green-dark); }
.badge-inactive { background:#f1f5f9; color:#475569; }
.badge-unused { background:var(--warn-light); color:var(--warn); }
.badge-rule { background:#dbeafe; color:#1d4ed8; }
.badge-non-rule { background:#fae8ff; color:#86198f; }
.badge-cxctx { background:#cffafe; color:#0e7490; }
.badge-cxseg { background:#fef3c7; color:#92400e; }
.badge-dc-seg { background:#ede9fe; color:#6d28d9; }
.badge-danger { background:var(--danger-light); color:var(--danger); }
.badge-info { background:var(--info-light); color:var(--info); }
.badge-warn { background:var(--warn-light); color:var(--warn); }
/* Usage pills (smaller, rounder than badges) */
.usage-pill { display:inline-flex; align-items:center; gap:4px;
  padding:1px 7px; border-radius:999px;
  font-size:10px; font-weight:600;
  background:#e0e7ff; color:#4338ca;
  border:1px solid rgba(67,56,202,0.2); }
.usage-pill.none { background:#f5f5f4; color:var(--text-muted); border-color:var(--border); }
/* Sync pills (4 states) */
.sync-pill { display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:999px;
  font-size:10px; font-weight:600;
  background:rgba(22,159,133,0.12); color:var(--green-dark);
  border:1px solid rgba(22,159,133,0.3); }
.sync-pill.stale { background:var(--warn-light); color:var(--warn); border-color:var(--warn); }
.sync-pill.error { background:var(--danger-light); color:var(--danger); border-color:var(--danger); }
.sync-pill i { font-size:11px; }
.sync-pill .spin { animation:spin 1s linear infinite; }
@keyframes spin { from { transform:rotate(0); } to { transform:rotate(360deg); } }
/* ─── CHIPS ───────────────────────────────────────────────────────────── */
.crit-chip { display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:999px;
  background:white; border:1px solid var(--border);
  font-size:11px; font-weight:600; color:var(--text);
  cursor:grab; user-select:none; transition:all .12s; }
.crit-chip:hover { border-color:#1ABB9C; color:#1ABB9C; background:#d1f3ec; }
.crit-chip:active { cursor:grabbing; }
.crit-chip.in-use { opacity:.4; cursor:not-allowed; }
.crit-chip .dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.crit-chip .chip-zone-tag { display:inline-block; margin-left:3px;
  padding:0 4px; font-size:9px; font-weight:700;
  background:var(--green); color:white; border-radius:3px;
  vertical-align:middle; line-height:1.4; }
.active-chip { display:inline-flex; align-items:center; gap:6px;
  padding:5px 8px 5px 11px; border-radius:999px;
  background:white; border:1px solid var(--border);
  font-size:11px; font-weight:600; color:var(--text);
  cursor:grab; user-select:none; transition:all .15s; }
.active-chip:active { cursor:grabbing; }
.active-chip.dragging { opacity:.35; }
.active-chip .dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.active-chip .remove { cursor:pointer; opacity:.7; font-size:13px; line-height:1; transition:opacity .15s; padding:0 2px; }
.active-chip .remove:hover { opacity:1; color:var(--danger); }
.active-chip .value-summary { font-weight:400; color:var(--text-muted); font-size:10px;
  padding-left:4px; border-left:1px solid var(--border); margin-left:2px; }
.val-chip { display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:99px;
  border:1.5px solid var(--border); background:var(--white);
  font-size:11px; font-weight:500; cursor:pointer; transition:all .12s; }
.val-chip:hover { border-color:#169f85; background:#d1f3ec; }
.val-chip.selected { border-color:#169f85; background:#169f85; color:white; }
.val-chip.selected:hover { background:var(--green-dark); }
.val-chip .count { font-size:9px; opacity:.7; margin-left:3px; }
/* ─── DROP ZONES ─────────────────────────────────────────────────────── */
.drop-zone { min-height:54px;
  padding:8px; border:2px dashed var(--border); border-radius:6px;
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  transition:all .15s; background:white; }
.drop-zone.drag-over { border-color:var(--green); background:var(--green-light); }
.drop-zone.has-items { border-style:solid; border-color:var(--green); }
.drop-zone-label { font-size:12px; color:var(--text-muted); padding:6px 8px; font-style:italic; }
.drop-zones { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; }
.drop-zone-col { padding:12px; background:white; border:1px solid #d6d3d1; border-radius:6px; }
.drop-zone-col-title { font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; display:flex; align-items:center; justify-content:space-between; }
.drop-zone-col-title .hint { font-weight:400; font-size:10px; color:var(--text-muted); text-transform:none; letter-spacing:0; }
.drop-zone-col-title button { background:none; border:none; cursor:pointer; font-size:11px; color:var(--text-muted); padding:0; }
.drop-zone-col-title button:hover { color:var(--text); }
/* ─── RANGE SLIDER (double thumb) ────────────────────────────────────── */
.range-sliders { padding:8px 16px 12px; border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:10px; }
.range-row { display:grid; grid-template-columns:90px 1fr auto; align-items:center; gap:14px; width:100%; }
.range-row.disabled { opacity:.4; pointer-events:none; }
.range-label-left { font-size:10px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; }
.range-label-right { font-family:monospace; font-size:11px; color:var(--green-dark); white-space:nowrap; text-align:right; }
.range-slider { position:relative; height:32px; }
.range-slider .track { position:absolute; top:50%; transform:translateY(-50%); width:100%; height:5px; background:var(--border); border-radius:99px; }
.range-slider .selected { position:absolute; top:50%; transform:translateY(-50%); height:5px; background:var(--green); border-radius:99px; }
.range-slider input[type=range] { position:absolute; width:100%; top:0; height:32px; -webkit-appearance:none; appearance:none; background:transparent; pointer-events:none; }
.range-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:16px; height:16px; background:white; border:2px solid var(--green); border-radius:50%; cursor:pointer; pointer-events:auto; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.range-slider input[type=range]::-moz-range-thumb { width:16px; height:16px; background:white; border:2px solid var(--green); border-radius:50%; cursor:pointer; pointer-events:auto; box-shadow:0 1px 3px rgba(0,0,0,.2); }
/* ─── CARDS ──────────────────────────────────────────────────────────── */
.criteria-panel { background:#e7e5e4; border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden; width:100%; }
.criteria-header { padding:12px 16px; display:flex; align-items:center; justify-content:space-between; user-select:none; }
.criteria-header h2 { font-family:var(--font-title); font-weight:700; font-size:14px; display:flex; align-items:center; gap:8px; }
.criteria-header-actions { display:flex; align-items:center; gap:10px; font-size:11px; color:var(--text-muted); }
.results-card { background:#e7e5e4; border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden; width:100%; }
.results-header { padding:12px 16px 0; }
.results-header h2 { font-family:var(--font-title); font-weight:700; font-size:14px; display:flex; align-items:center; gap:8px; }
.results-toolbar { padding:10px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.results-toolbar .count { font-size:12px; color:var(--text-muted); }
.results-toolbar .count strong { font-weight:800; color:var(--green-dark); }
.toolbar-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.info-card { background:#e7e5e4; border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden; width:100%; }
.info-card-head { padding:12px 16px; }
.info-card-head h2 { font-family:var(--font-title); font-weight:700; font-size:14px; display:flex; align-items:center; gap:8px; }
.info-card-body { padding:0 16px 16px; }
/* ─── TABLE ──────────────────────────────────────────────────────────── */
.table-wrap { background:#fff; overflow:auto; max-height:300px; }

/* ─────────────────────────────────────────────────────────────────────────
   .results-table — squelette PARTAGÉ du tableau de résultats.
   Utilisé par : p_gammatrix.html (Matrix), p_dmpsegments.html (Audience).
   Modes : flat (lignes data) + tree (group-rows avec badges colorés).

   IMPORTANT — text-align des cellules data :
   Default = RIGHT (pattern gammatrix : cellules majoritairement numériques).
   Les pages dont les cellules data sont majoritairement textuelles
   (ex. dmpsegments) overrident localement avec :
     .results-table td { text-align:left; }
   ───────────────────────────────────────────────────────────────────────── */
.results-table-wrap { overflow-x:auto; }
.results-table { width:100%; border-collapse:collapse; font-size:12px; background:#fff; }
.results-table thead { background:#fff; }
.results-table thead th { position:sticky; top:0; z-index:5; box-shadow:0 1px 0 var(--border); }
.results-table th { padding:9px 10px; background:#fff;
    font-family:var(--font-title); font-weight:600; font-size:11px;
    text-transform:uppercase; letter-spacing:.3px; color:var(--text-muted);
    text-align:right; white-space:nowrap; border-bottom:1px solid var(--border);
    cursor:pointer; user-select:none; }
.results-table th:first-child { text-align:left; }
.results-table th:hover { background:var(--bg); color:var(--text); }
.results-table th.sorted { color:var(--green-dark); }
.results-table th .sort-icon,
.results-table th .sort-arrow { margin-left:4px; opacity:.4; font-size:9px; }
.results-table th.sorted .sort-icon,
.results-table th.sorted .sort-arrow { opacity:1; }
.results-table td { padding:7px 10px; border-bottom:1px solid var(--border);
    color:#626d7d; font-weight:500;
    text-align:right; white-space:nowrap; vertical-align:middle; }
.results-table td:first-child { text-align:left; font-weight:600; }
/* Cellule Name avec ID intégré (partagée dmpsegments + gamaudiencesegments) */
.results-table td.name-cell { white-space:normal; max-width:380px; font-weight:400; }
.name-cell .seg-name { font-weight:600; color:var(--text); word-break:break-word; overflow-wrap:break-word; line-height:1.35; }
.name-cell .seg-id { font-size:10px; color:var(--text-muted); font-family:monospace; }
.name-cell-wrap { display:flex; align-items:flex-start; gap:6px; }
.name-cell-wrap .seg-name { flex:1; min-width:0; }
.results-table th.right, .results-table td.right { text-align:right; }
.results-table tbody tr { cursor:pointer; transition:background .12s; }
.results-table tbody tr:hover td { background:#faf9f8; }
.results-table tbody tr.selected td { background:var(--green-lighter); }
.results-table .period-group { border-left:2px solid var(--border); }
.results-table tfoot td { background:var(--bg); font-weight:700;
    border-top:1px solid var(--border); }
/* Tree mode (group-rows + leaf rows) */
.results-table .tree-row td:first-child { text-align:left; font-weight:600; cursor:pointer;
    user-select:none; white-space:nowrap; }
.results-table .tree-row.has-children td:first-child:hover { background:var(--bg); }
.results-table .tree-row .chevron { display:inline-block; width:12px; opacity:.5; font-size:9px; margin-right:2px; }
.results-table .tree-row .leaf-spacer { display:inline-block; width:12px; margin-right:2px; }
.results-table .tree-row .tree-badge { display:inline-flex; align-items:center;
    padding:2px 8px; border-radius:10px;
    font-size:11px; font-weight:600; }
.results-table .tree-row.depth-0 td { border-top:1px solid var(--border); }
.results-table .tree-row.depth-0 td:first-child { background:#fafafa; }
.results-table .tree-row.depth-gt0 td:first-child { padding-left:0; }
/* Empty state */
.empty-results { text-align:center; padding:48px 20px; color:var(--text-muted); }
.empty-results .icon { font-size:40px; margin-bottom:12px; }

/* ─── DETAIL PANEL ───────────────────────────────────────────────────── */
.detail-panel { width:380px; flex-shrink:0;
  background:white; border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow);
  overflow:hidden; display:flex; flex-direction:column; }
.detail-header { padding:14px 16px 0; }
.detail-header-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px; }
.detail-title { font-family:var(--font-title); font-weight:700; font-size:15px; line-height:1.3; flex:1; word-break:break-word; }
.detail-close { background:none; border:none; cursor:pointer; color:var(--text-muted); font-size:18px; padding:2px; }
.detail-close:hover { color:var(--text); }
.detail-meta { font-size:11px; color:var(--text-muted); font-family:'SF Mono', Menlo, monospace; margin-bottom:10px; word-break:break-all; }
.detail-badges { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:12px; }
.detail-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); margin:0 -16px; padding:0 16px; }
.detail-tab { padding:9px 12px; font-size:11px; font-weight:600; color:var(--text-muted); cursor:pointer; background:none; border:none; border-bottom:2px solid transparent; transition:all .15s; text-transform:uppercase; letter-spacing:.4px; }
.detail-tab:hover { color:var(--text); }
.detail-tab.active { color:var(--green-dark); border-bottom-color:var(--green); }
.detail-body { padding:14px 16px; overflow-y:auto; flex:1; }
.detail-section { margin-bottom:14px; }
.detail-section-label { font-size:10px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:5px; }
.detail-kv { display:grid; grid-template-columns:120px 1fr; gap:5px 12px; font-size:12px; align-items:start; }
.detail-kv dt { color:var(--text-muted); font-weight:600; font-size:10px; text-transform:uppercase; letter-spacing:.4px; padding-top:2px; }
.detail-kv dd { color:var(--text); word-break:break-word; }
.detail-kv code { font-family:'SF Mono', Menlo, monospace; font-size:11px; color:var(--green-dark); background:#f5f5f4; padding:1px 5px; border-radius:3px; }
.detail-used-item { display:flex; align-items:flex-start; gap:8px; padding:8px 10px; border:1px solid var(--border); border-radius:6px; margin-bottom:6px; font-size:12px; background:white; }
.detail-used-item .uname { font-weight:600; }
.detail-used-item .uid { font-family:'SF Mono', Menlo, monospace; font-size:10px; color:var(--text-muted); }
.detail-empty { padding:24px 12px; text-align:center; font-size:12px; color:var(--text-muted); }
.detail-rule-block { background:#f8fafc; border:1px solid var(--border); border-radius:6px; padding:10px 12px; margin-bottom:8px; font-size:11px; }
.detail-rule-block .rule-key { font-family:'SF Mono', Menlo, monospace; font-weight:700; color:var(--green-dark); margin-bottom:4px; }
.detail-rule-block .rule-op { font-size:10px; padding:1px 5px; border-radius:3px; background:#e0e7ff; color:#4338ca; }
/* ─── MODAL ──────────────────────────────────────────────────────────── */
.modal-demo { position:relative; background:rgba(0,0,0,.4); padding:30px; border-radius:8px; width:100%; }
.modal { background:white; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); width:100%; max-width:480px; margin:0 auto; overflow:hidden; }
.modal-header { padding:14px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.modal-header h3 { font-family:var(--font-title); font-weight:700; font-size:15px; }
.modal-close { background:none; border:none; cursor:pointer; color:var(--text-muted); font-size:18px; padding:2px; }
.modal-body { padding:16px; max-height:300px; overflow-y:auto; }
.modal-footer { padding:12px 16px; border-top:1px solid var(--border); display:flex; gap:8px; justify-content:flex-end; }
/* ─── POPOVER ────────────────────────────────────────────────────────── */
.value-popover { position:absolute; z-index:1000;
  /* In an isolated demo context, this is overridden back to position:relative
     so the popover renders inline within the doc; in real pages it's
     anchored under the chip via inline style.top/left. */
  background:white; border:1px solid var(--border); border-radius:8px;
  box-shadow:0 8px 32px rgba(0,0,0,.12); padding:8px;
  min-width:220px; max-width:280px; max-height:280px; overflow-y:auto; }
.value-popover-title { font-size:10px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; padding:4px 6px 6px; display:flex; justify-content:space-between; align-items:center; gap:8px; border-bottom:1px solid var(--border); margin-bottom:4px; }
.value-popover-title .pop-title-label { color:var(--text); }
.value-popover-title .pop-actions { display:flex; gap:6px; }
.value-popover-title .pop-action { font-size:10px; font-weight:600; color:var(--green); cursor:pointer; background:none; border:none; padding:0 4px; }
.value-popover-title .pop-action:hover { text-decoration:underline; }
.value-row { display:flex; align-items:center; gap:8px; padding:4px 6px; border-radius:4px; cursor:pointer; font-size:12px; }
.value-row:hover { background:#f5f5f4; }
.value-row .vname { flex:1; }
.value-row .vcount { margin-left:auto; font-size:10px; color:var(--text-muted); padding-left:6px; }
/* ─── LOADING / EMPTY ────────────────────────────────────────────────── */
.loading { padding:20px; color:var(--text-muted); font-size:12px; text-align:center; }
.empty { padding:32px; color:var(--text-muted); font-size:12px; text-align:center; }
/* ─── STATUS BAR ─────────────────────────────────────────────────────── */
.status-bar { display:flex; align-items:center; gap:10px;
  padding:8px 14px; border-radius:var(--radius);
  font-size:12px; font-weight:600; }
.status-bar.info { background:var(--info-light);   color:var(--info);     border:1px solid rgba(2,132,199,.3); }
.status-bar.success { background:var(--green-light);  color:var(--green-dark); border:1px solid rgba(22,159,133,.3); }
.status-bar.warning { background:var(--warn-light);   color:var(--warn);     border:1px solid rgba(217,119,6,.3); }
.status-bar.error { background:var(--danger-light); color:var(--danger);   border:1px solid rgba(220,38,38,.3); }
.status-dot { width:8px; height:8px; border-radius:50%; background:currentColor; flex-shrink:0; }
/* ─── KPI CARDS ──────────────────────────────────────────────────────── */
.kpi-card { padding:14px 16px; background:white; border:1px solid var(--border); border-radius:var(--radius); }
.kpi-num { font-family:var(--font-title); font-size:28px; font-weight:800; color:var(--green-dark); line-height:1; }
.kpi-num-md { font-size:20px; }
.kpi-sub { font-size:11px; color:var(--text-muted); margin-top:4px; }
/* ─── PAGE HEADER ────────────────────────────────────────────────────── */
.page-header { padding:16px 0; }
.page-title { font-family:var(--font-title); font-size:22px; font-weight:700; }
.page-subtitle { font-size:12px; color:var(--text-muted); margin-top:3px; }
/* ─── ICON GRID ──────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════
   Composants partagés centralisés (refactor) — règles identiques sur ≥2 pages,
   précédemment dupliquées dans les <style> locaux. Source unique ici.
   ═══════════════════════════════════════════════════════════════════════ */
.value-row input[type=checkbox] { cursor:pointer; }
.criteria-body { display:block; background:#e7e5e4; }
.criteria-body.collapsed { display:none; }
.toolbar-search { position:relative; }
.toolbar-search > i { position:absolute; left:8px; top:50%; transform:translateY(-50%); font-size:13px; color:var(--text-muted); pointer-events:none; }
.toolbar-search input::placeholder { color:var(--text-muted); }
#results-layout:fullscreen .table-wrap { max-height:none; flex:1; }
#results-layout:-webkit-full-screen .table-wrap { max-height:none; flex:1; }
#results-layout .table-wrap { max-height:none; flex:1; min-height:0; overflow:auto; }
.results-table tbody td { text-align:left; }
.shell { padding:16px 32px 32px; display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; gap:12px; }
.criteria-header-actions button { background:none; border:none; cursor:pointer; color:var(--text-muted); padding:4px 6px; border-radius:4px; }
.criteria-header-actions button:hover { background:rgba(0,0,0,.06); color:var(--text); }
.drop-zone-col-title i { margin-right:5px; }
#results-layout .results-card { flex:1 1 0%; min-width:0; min-height:0; display:flex; flex-direction:column; }
.results-table tbody tr.tree-row td { font-size:11px; padding:6px 10px; }
.detail-rule-block .rule-values { margin-top:6px; display:flex; flex-wrap:wrap; gap:4px; }
.detail-rule-block .rule-value { font-family:'SF Mono',Menlo,monospace; font-size:10px; background:white; border:1px solid var(--border); padding:2px 6px; border-radius:3px; }
.detail-rule-block .rule-value .vname { color:var(--text); margin-left:6px; padding-left:6px; border-left:1px solid var(--border); font-family:var(--font-body); font-weight:600; }
.detail-used-item .ukind { font-size:10px; padding:1px 6px; border-radius:4px; background:#e0e7ff; color:#4338ca; margin-left:auto; flex-shrink:0; }
.info-grid { display:grid; grid-template-columns:max-content 1fr; gap:6px 16px; font-size:12px; }
.info-grid dt { color:var(--text-muted); font-weight:600; text-transform:uppercase; font-size:10px; letter-spacing:0.4px; padding-top:2px; }
.info-grid dd { color:var(--text); }
#results-layout:fullscreen .detail-panel { max-height:none; height:100%; }
#results-layout:-webkit-full-screen .detail-panel { max-height:none; height:100%; }
.card-header { padding:12px 16px; background:#e7e5e4; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.section { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════════════
   Panneau de détail latéral — accordéon + en-tête (volumes/meta).
   Partagé par p_dmpsegments + pages GAM/IAB (gamaudiencesegments,
   gamcustomtargetingvalues, gamppsiabaudiencetaxonomy, gamppsiabcontenttaxonomy).
   ═══════════════════════════════════════════════════════════════════════ */
.detail-volumes-strip { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px 14px; font-size:12px; }
.detail-volumes-strip .vol-item { display:flex; flex-direction:column; gap:2px; min-width:0; }
.detail-volumes-strip .vol-label { font-size:10px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-muted); font-weight:700; }
.detail-volumes-strip .vol-value { font-weight:700; font-size:14px; color:var(--text); word-break:break-word; }
.detail-volumes-strip .vol-sub { font-size:10px; color:var(--text-muted); }
.detail-accordion { flex:1; overflow-y:auto; }
.acc-section { border-bottom:1px solid var(--border); }
.acc-header { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
  padding:11px 16px; background:none; border:none; cursor:pointer; text-align:left;
  font-size:11px; font-weight:700; color:var(--text); text-transform:uppercase; letter-spacing:.4px; }
.acc-header:hover { background:#fafaf9; }
.acc-header .acc-chevron { color:var(--text-muted); font-size:14px; transition:transform .15s; display:flex; }
.acc-section.open .acc-header .acc-chevron { transform:rotate(180deg); }
.acc-section.open .acc-header { color:var(--green-dark); }
.acc-body { padding:4px 16px 16px; }
.acc-section:not(.open) .acc-body { display:none; }
.id-meta-row { display:flex; align-items:center; gap:6px; margin-top:3px; font-size:11px; color:var(--text-muted); }
.id-meta-row .id-label { min-width:84px; }
/* ─── Conteneurs à onglets (Signals, Closeloop Manager, Excluder Manager) ──────────
   Barre d'onglets persistante + panneau montant une sous-page via NexusSPA.mountSubPage().
   Hauteur calée sous la topbar fixe (body padding-top:48px) → aucun scroll du body :
   la barre reste toujours visible, seul le contenu de la sous-page scrolle en interne. */
.tabmgr-shell { display:flex; flex-direction:column; height:calc(100vh - 56px); overflow:hidden; background:var(--bg); }
.tabmgr-bar { flex:0 0 auto; display:flex; align-items:center; gap:6px; padding:12px 20px 0; background:#fff; border-bottom:1px solid #e7e5e4; }
.tabmgr-bar .period-tab { display:inline-flex; align-items:center; gap:7px; }
.tabmgr-bar .period-tab i { font-size:16px; }
#tabmgr-panel { flex:1 1 auto; min-height:0; position:relative; overflow:hidden; }
#tabmgr-panel #app-screen { height:100% !important; }
#tabmgr-panel.spa-loading { opacity:.55; transition:opacity .12s; }

/* ════════════════════════════════════════════════════════════════════════
   NX COMPONENTS — kit "pro" (esprit Gentelella v4), palette Nexus.
   Additif : préfixe .nx-* → aucune collision. Les pages les adoptent au fur
   et à mesure (Phase 1+).
   ════════════════════════════════════════════════════════════════════════ */

.nx-card { background:var(--white); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); }
.nx-card-h { display:flex; align-items:center; gap:10px; padding:16px 18px 0; }
.nx-card-h h3 { font-family:var(--font-title); font-size:14px; font-weight:600; margin:0; flex:1; }
.nx-card-h .nx-sub { font-size:11.5px; color:var(--text-muted); }
.nx-card-b { padding:16px 18px; }

.nx-tile { background:var(--white); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow);
  padding:16px; transition:box-shadow .16s, transform .16s; }
.nx-tile:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); }
.nx-tile-top { display:flex; align-items:flex-start; gap:12px; }
.nx-chip { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0; }
.nx-chip.g { background:var(--green-lighter); color:var(--green-dark); }
.nx-chip.b { background:var(--blue-lt);   color:var(--blue); }
.nx-chip.a { background:var(--amber-lt);  color:var(--amber); }
.nx-chip.v { background:var(--violet-lt); color:var(--violet); }
.nx-chip.r { background:var(--rose-lt);   color:var(--rose); }
.nx-lab { font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); font-weight:600; }
.nx-val { font-family:var(--font-title); font-size:23px; font-weight:700; letter-spacing:-.5px;
  font-variant-numeric:tabular-nums; line-height:1.15; margin-top:2px; }
.nx-delta { display:inline-flex; align-items:center; gap:2px; font-size:11px; font-weight:600; margin-left:6px; vertical-align:middle; }
.nx-delta.up { color:var(--green-dark); }
.nx-delta.dn { color:var(--danger); }
.nx-tile .nx-spark { margin-left:auto; }
.nx-foot { font-size:11px; color:var(--text-muted); margin-top:8px; }
.nx-progress { height:4px; border-radius:999px; background:var(--bg); margin-top:12px; overflow:hidden; }
.nx-progress > i { display:block; height:100%; border-radius:999px; background:var(--green); }

.nx-seg { display:inline-flex; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:2px; }
.nx-seg button { border:none; background:none; font-family:var(--font-body); font-size:11.5px; font-weight:600;
  color:var(--text-muted); padding:5px 11px; border-radius:6px; cursor:pointer; transition:.14s; }
.nx-seg button.on { background:var(--white); color:var(--text); box-shadow:var(--shadow); }

.nx-avatar, .nx-avatar-sm { border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-weight:600; flex-shrink:0; }
.nx-avatar { width:32px; height:32px; font-size:12px; }
.nx-avatar-sm { width:26px; height:26px; font-size:10px; }

.nx-status { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; }
.nx-status .nx-dot { width:7px; height:7px; border-radius:50%; }

.nx-legend { display:flex; flex-direction:column; gap:11px; }
.nx-lg { display:flex; align-items:center; gap:9px; font-size:12.5px; }
.nx-lg .nx-dot { width:9px; height:9px; border-radius:50%; }
.nx-lg .nx-nm { color:var(--text-muted); }
.nx-lg .nx-vl { margin-left:auto; font-weight:600; font-variant-numeric:tabular-nums; }

.nx-barrow { display:flex; align-items:center; gap:10px; margin:9px 0; font-size:12px; }
.nx-barrow .nx-nm { width:60px; color:var(--text-muted); }
.nx-barrow .nx-track { flex:1; height:7px; background:var(--bg); border-radius:999px; overflow:hidden; }
.nx-barrow .nx-track > i { display:block; height:100%; border-radius:999px; background:var(--green); }
.nx-barrow .nx-vl { width:46px; text-align:right; font-weight:600; font-variant-numeric:tabular-nums; }

.nx-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.nx-table thead th { text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.5px;
  color:var(--text-muted); font-weight:600; padding:0 14px 10px; border-bottom:1px solid var(--border); }
.nx-table tbody td { padding:11px 14px; border-bottom:1px solid var(--bg); }
.nx-table tbody tr:last-child td { border-bottom:none; }
.nx-table tbody tr:hover { background:#faf9f8; }
.nx-table .nx-num { text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }

/* ════════════════════════════════════════════════════════════════════════
   THÈME SHELL « GENTELELLA v4 » — topbar blanche + sidebar sombre #1a2332.
   Bloc de surcharges (aucune règle ci-dessus n'est modifiée). Scopé sur le
   mode déplié (body.adsnav-expanded) pour le look ; le mode replié (rail
   d'icônes 56px) garde son comportement d'origine.
   ════════════════════════════════════════════════════════════════════════ */
:root{
  --adsnav-bg-secondary:#1a2332;               /* fond sidebar */
  --adsnav-bg-tertiary:rgba(255,255,255,.06);  /* hover sidebar */
  --adsnav-text-secondary:#c5d0dc;             /* texte item/header */
  --adsnav-text-tertiary:#7b8fa3;              /* muted */
  --adsnav-primary-bg:rgba(26,187,156,.08);    /* fond actif */
  --adsnav-primary-text:#ffffff;               /* texte actif */
}
.adsnav-topbar, .adsnav-sidebar{ font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }

/* ── DISPOSITION (Gentelella) : sidebar pleine hauteur à gauche (brand tout en
   haut), topbar uniquement au-dessus du contenu (à droite de la sidebar) ── */
.adsnav-sidebar{ top:0; }
.adsnav-topbar{ left:56px; transition:left .18s ease; }
body.adsnav-expanded .adsnav-topbar{ left:252px; }
body.spa-loading::after{ left:56px; }
body.adsnav-expanded.spa-loading::after{ left:252px; }

/* ── TOPBAR blanche ─────────────────────────────────────────────────── */
.adsnav-topbar{ background:rgba(255,255,255,.85); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid #e6e7eb; box-shadow:none; }
.adsnav-breadcrumb{ padding:0 8px 0 16px; font-size:13px; }
/* hamburger dans la topbar (déplace le collapse depuis la sidebar) */
.adsnav-topbar .adsnav-toggle{ background:transparent; border:none; color:#6b7280; width:34px; height:34px;
  margin:0 2px 0 12px; border-radius:6px; align-self:center; flex-shrink:0; }
.adsnav-topbar .adsnav-toggle:hover{ background:#f1f3f7; color:#1e2633; border:none; }
.adsnav-topbar .adsnav-toggle i{ font-size:18px; }
.adsnav-bc-section{ color:#7e8896; font-weight:400; text-transform:none; letter-spacing:normal; }
.adsnav-bc-sep{ color:#c2cad4; opacity:1; font-size:13px; }
.adsnav-bc-page{ color:#1e2633; font-weight:500; font-size:13px; }
.adsnav-user-wrap{ padding-right:18px; }
.adsnav-user-btn{ background:transparent; border:none; border-radius:999px; color:#1e2633; padding:4px 8px 4px 4px; box-shadow:none; gap:9px; }
.adsnav-user-btn:hover{ background:#f1f3f7; border:none; }
.adsnav-user-btn.open, .adsnav-user-btn.editor{ background:transparent; border:none; }
.adsnav-user-btn .adsnav-user-name{ color:#1e2633; font-size:12.5px; font-weight:600; }
.adsnav-user-btn .adsnav-user-role{ color:#6b7280; font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; font-weight:600; }
.adsnav-user-btn.open .adsnav-user-name, .adsnav-user-btn.editor .adsnav-user-name{ color:#1e2633; }
.adsnav-user-btn.open .adsnav-user-role, .adsnav-user-btn.editor .adsnav-user-role{ color:#6b7280; opacity:1; }
.adsnav-user-chev{ color:#c2cad4; }
/* avatar rond à initiales (topbar + sidebar) */
.adsnav-avatar{ width:32px; height:32px; border-radius:50%; background:var(--adsnav-primary,#1ABB9C);
  color:#fff; font-weight:700; font-size:12px; letter-spacing:.3px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
/* menu déroulant clair */
.adsnav-user-menu{ background:#fff; border:1px solid #e6e7eb; box-shadow:0 10px 28px rgba(30,38,51,.14); }
.adsnav-menu-header > i{ color:#94a3b8; }
.adsnav-menu-header-name{ color:#1e2633; }
.adsnav-menu-header-email{ color:#6b7280; }
.adsnav-menu-divider{ background:#eef0f3; }
.adsnav-menu-item{ color:#374151; }
.adsnav-menu-item:hover{ background:#f5f7fb; }
.adsnav-menu-item.danger{ color:#dc2626; }
.adsnav-menu-item.danger:hover{ background:#fef2f2; }
.adsnav-menu-role-row .adsnav-role-label{ color:#374151; }
.adsnav-role-toggle{ background:#eef1f5; }
.adsnav-role-toggle button{ color:#6b7280; }
.adsnav-role-toggle button.active{ background:#1ABB9C; color:#fff; }

/* ── SIDEBAR sombre ─────────────────────────────────────────────────── */
.adsnav-sidebar{ border-right:none; box-shadow:none; padding:0; }
body.adsnav-expanded .adsnav-sidebar{ padding:0; align-items:stretch; }
/* ── Zone de navigation défilante (comme Google Ad Manager) : l'en-tête (brand)
   reste épinglé, et SEULS les groupes dépliés scrollent quand ils dépassent la
   hauteur de l'écran, avec une fine barre de défilement visible. Le wrapper est
   « display:contents » en mode rail replié → il n'existe pas comme boîte et ne
   clippe donc pas les flyouts au survol. ─────────────────────────────────── */
.adsnav-scroll{ display:contents; }
body.adsnav-expanded .adsnav-sidebar{ overflow:hidden; }   /* seul .adsnav-scroll scrolle */
body.adsnav-expanded .adsnav-scroll{
  display:block; flex:1 1 auto; min-height:0;
  overflow-y:auto; overflow-x:hidden;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.22) transparent; }
body.adsnav-expanded .adsnav-scroll::-webkit-scrollbar{ width:8px; }
body.adsnav-expanded .adsnav-scroll::-webkit-scrollbar-track{ background:transparent; }
body.adsnav-expanded .adsnav-scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:4px; }
body.adsnav-expanded .adsnav-scroll::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.32); }
/* entête sidebar : brand + toggle */
.adsnav-sidehead{ display:flex; align-items:center; gap:10px; height:56px; padding:0 10px;
  border-bottom:1px solid rgba(255,255,255,.08); flex-shrink:0; justify-content:center; }
body.adsnav-expanded .adsnav-sidehead{ justify-content:space-between; padding:0 12px; height:56px; }
.adsnav-sidebrand{ display:flex; align-items:center; gap:10px; text-decoration:none; min-width:0; }
body:not(.adsnav-expanded) .adsnav-sidebrand-text{ display:none; }
.adsnav-sidelogo{ height:34px; width:auto; max-width:46px; object-fit:contain; flex-shrink:0; display:block; }
.adsnav-sidebrand-text{ display:flex; flex-direction:column; line-height:1.1; }
.adsnav-sidebrand-name{ font-size:16px; font-weight:700; color:#fff; letter-spacing:-.2px; }
.adsnav-sidebrand-sub{ font-size:10px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:#7b8fa3; }
/* toggle dans l'entête */
.adsnav-sidehead .adsnav-toggle{ background:transparent; border:none; color:#7b8fa3; width:32px; height:32px; margin:0; border-radius:6px; }
.adsnav-sidehead .adsnav-toggle:hover{ background:rgba(255,255,255,.06); color:#fff; border:none; }
body.adsnav-expanded .adsnav-sidehead .adsnav-toggle{ align-self:center; }

/* espace autour des groupes en déplié */
body.adsnav-expanded .adsnav-group{ padding:0 8px; }
body.adsnav-expanded .adsnav-group:first-of-type{ margin-top:4px; }

/* entête de groupe (déplié) — motif Gentelella */
body.adsnav-expanded .adsnav-group-header{ font-size:14px; font-weight:400; text-transform:none; letter-spacing:normal;
  color:#c5d0dc; padding:4px 12px; margin:0; border-radius:6px; }
body.adsnav-expanded .adsnav-group-header .adsnav-group-icon{ font-size:18px; color:#c5d0dc; opacity:.85; }
body.adsnav-expanded .adsnav-group-header:hover{ background:rgba(255,255,255,.05); color:#fff; }
body.adsnav-expanded .adsnav-group-header .adsnav-group-chevron{ color:#6b7889; opacity:1; }

/* items (déplié) : pas d'icône + connecteur vertical + actif à coche verte */
body.adsnav-expanded .adsnav-group .adsnav-item{ position:relative; padding:4px 12px 4px 40px; gap:0;
  color:#7b8fa3; font-size:12.5px; font-weight:400; border-radius:4px; margin-bottom:1px; }
body.adsnav-expanded .adsnav-group .adsnav-item > i{ display:none; }
body.adsnav-expanded .adsnav-group .adsnav-item::before{ content:''; position:absolute; left:19px; top:0; bottom:0;
  width:1px; background:rgba(255,255,255,.1); transition:background .12s; }
body.adsnav-expanded .adsnav-group .adsnav-item:hover{ background:rgba(255,255,255,.05); color:#fff; }
body.adsnav-expanded .adsnav-group .adsnav-item:hover::before{ background:rgba(255,255,255,.22); }
body.adsnav-expanded .adsnav-group .adsnav-item.active{ background:rgba(26,187,156,.08); color:#fff; font-weight:500; box-shadow:none; }
body.adsnav-expanded .adsnav-group .adsnav-item.active::after{ content:''; position:absolute; left:14px; top:50%;
  transform:translateY(-50%); width:12px; height:1px; border-radius:2px; background:#1ABB9C; }
body.adsnav-expanded .adsnav-item-label{ font-size:12.5px; }

/* utilisateur en bas de la sidebar */
.adsnav-siduser{ display:flex; align-items:center; gap:10px; padding:12px 14px; margin-top:auto;
  border-top:1px solid rgba(255,255,255,.08); text-decoration:none; flex-shrink:0; justify-content:center; }
body.adsnav-expanded .adsnav-siduser{ justify-content:flex-start; }
.adsnav-siduser:hover{ background:rgba(255,255,255,.04); }
.adsnav-siduser-text{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
body:not(.adsnav-expanded) .adsnav-siduser-text{ display:none; }
.adsnav-siduser-name{ font-size:12.5px; font-weight:500; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.adsnav-siduser-role{ font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:#7b8fa3; }

/* ── SIDEBAR REPLIÉE (rail 56px, motif Gentelella) : icônes de groupe + flyout ── */
/* le flyout doit pouvoir sortir de la sidebar */
body:not(.adsnav-expanded) .adsnav-sidebar{ overflow:visible; }
body:not(.adsnav-expanded) .adsnav-sidehead{ justify-content:center; padding:0; }
/* groupes = icône seule (rail) */
body:not(.adsnav-expanded) .adsnav-group{ display:block; position:relative; }
body:not(.adsnav-expanded) .adsnav-group-header{ display:flex; justify-content:center; align-items:center;
  width:40px; height:40px; margin:3px auto; padding:0; border-radius:8px; color:#c5d0dc; }
body:not(.adsnav-expanded) .adsnav-group-header .adsnav-group-label,
body:not(.adsnav-expanded) .adsnav-group-header .adsnav-group-chevron{ display:none; }
body:not(.adsnav-expanded) .adsnav-group-header .adsnav-group-icon{ font-size:20px; }
body:not(.adsnav-expanded) .adsnav-group-header:hover{ background:rgba(255,255,255,.06); color:#fff; }
body:not(.adsnav-expanded) .adsnav-group.has-active .adsnav-group-header{ color:#1ABB9C; background:rgba(26,187,156,.10); }
/* items masqués dans le rail, révélés en flyout au survol du groupe */
body:not(.adsnav-expanded) .adsnav-group-items{ display:none; }
body:not(.adsnav-expanded) .adsnav-group.flyout-open > .adsnav-group-items{
  display:block; position:absolute; left:52px; top:0; min-width:212px;
  background:#212c3f; border:1px solid rgba(255,255,255,.08); border-radius:8px;
  box-shadow:0 16px 34px rgba(0,0,0,.45); padding:6px; z-index:300; }
body:not(.adsnav-expanded) .adsnav-group.flyout-open > .adsnav-group-items::before{
  content:attr(data-label); display:block; padding:8px 10px 6px; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.5px; color:#7b8fa3; }
body:not(.adsnav-expanded) .adsnav-group.flyout-open > .adsnav-group-items .adsnav-item{
  width:auto; height:auto; justify-content:flex-start; padding:7px 10px; gap:10px;
  color:#aeb7c4; border-radius:6px; margin-bottom:1px; box-shadow:none; }
body:not(.adsnav-expanded) .adsnav-group.flyout-open > .adsnav-group-items .adsnav-item > i{ display:inline-block; font-size:16px; color:#8391a2; }
body:not(.adsnav-expanded) .adsnav-group.flyout-open > .adsnav-group-items .adsnav-item-label{ display:block; font-size:12.5px; }
body:not(.adsnav-expanded) .adsnav-group.flyout-open > .adsnav-group-items .adsnav-item:hover{ background:rgba(255,255,255,.06); color:#fff; }
body:not(.adsnav-expanded) .adsnav-group.flyout-open > .adsnav-group-items .adsnav-item.active{ background:rgba(26,187,156,.12); color:#fff; }
body:not(.adsnav-expanded) .adsnav-group.flyout-open > .adsnav-group-items .adsnav-item.active > i{ color:#1ABB9C; }
/* utilisateur replié : avatar seul centré */
body:not(.adsnav-expanded) .adsnav-siduser{ justify-content:center; padding:12px 0; }

/* ── Lien de menu autonome (ex. Workspaces) ───────────────────────────────
   Présenté comme une entête de groupe mais cliquable (navigation directe),
   sans sous-items ni chevron. Séparateur inférieur pour le distinguer des
   groupes accordéon. Réutilise .adsnav-group-header pour l'apparence.        */
.adsnav-linkgroup .adsnav-linkheader{ text-decoration:none; }
body.adsnav-expanded .adsnav-linkgroup{ padding-bottom:8px; margin-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,.10); }
body.adsnav-expanded .adsnav-linkgroup:first-of-type{ margin-top:4px; }
body.adsnav-expanded .adsnav-linkheader.active{ background:rgba(26,187,156,.08);
  color:#fff; font-weight:500; }
body.adsnav-expanded .adsnav-linkheader.active .adsnav-group-icon{ color:#1ABB9C; opacity:1; }
body:not(.adsnav-expanded) .adsnav-linkgroup{ padding-bottom:6px; margin-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,.10); }
body:not(.adsnav-expanded) .adsnav-linkgroup.has-active .adsnav-group-header,
body:not(.adsnav-expanded) .adsnav-linkheader.active{ color:#1ABB9C; background:rgba(26,187,156,.10); }
