/* InfraRiver — Main stylesheet (extracted from design mockup) */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#162231;
  --bg2:#1b2a3b;
  --surface:#1a2838;
  --surface2:#1e2d40;
  --border:#2a3a4e;
  --border2:#35495f;
  --accent:#3b82f6;
  --accent2:#2563eb;
  --accent3:#22c55e;
  --warn:#f5b301;
  --danger:#ef4444;
  --muted:#8fa3bd;
  --muted2:#8fa3bd;
  --text:#e6edf5;
  --text2:#a9bad0;
  --white:#ffffff;
  --nav-bg:#142230;
  --nav-active:#1a386e;
  --font-text:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-title:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  /* Names used by older templates that were never defined (the declaration was silently ignored): aliases of the real tokens, per theme. */
  --text-muted:var(--muted2);--text-muted2:var(--muted2);--text-secondary:var(--text2);--text-primary:var(--text);--text1:var(--text);--fg:var(--text);
  --warning:var(--warn);--success:var(--accent3);
  --bg-primary:var(--bg);--bg-secondary:var(--bg2);--bg-tertiary:var(--surface2);--bg3:var(--surface2);--card:var(--surface);
  /* Sidebar section accents — one distinct hue per top-level nav section,
     so scanning down reads as color zones instead of one flat list
     (user feedback 2026-09-23: "toutes les sections ont la même couleur,
     je me perds"). Deliberately separate from --accent/--accent3 (already
     the "current page" signal) and --warn/--danger (already semantic
     elsewhere) — a 7th neutral color for Administration since it's
     conventionally de-emphasized in most apps. */
  --nav-inventaire:#38bdf8;
  --nav-planification:#a78bfa;
  --nav-collaboration:#f472b6;
  --nav-analyse:#34d399;
  --nav-modules:#fb923c;
  --nav-sources:#2dd4bf;
  --nav-connecteurs:#818cf8;
  --nav-administration:#94a3b8;
}

/* ── LIGHT THEME ── */
[data-theme="light"]{
  --nav-bg:#ffffff;
  --nav-active:#dbe7fb;
  --bg:#f0f4f8;
  --bg2:#e8eef5;
  --surface:#ffffff;
  --surface2:#f5f8fc;
  --border:#d0dae6;
  --border2:#bccad8;
  --accent:#0057cc;
  --accent2:#0040aa;
  --accent3:#007850;
  --warn:#b45309;
  --danger:#cc2233;
  --muted:#4e6c88;
  --muted2:#516d81;
  --text:#2c3e50;
  --text2:#4a6070;
  --white:#1a2534;
  --nav-inventaire:#0284c7;
  --nav-planification:#7c3aed;
  --nav-collaboration:#db2777;
  --nav-analyse:#059669;
  --nav-modules:#c2410c;
  --nav-sources:#0f766e;
  --nav-connecteurs:#4f46e5;
  --nav-administration:#475569;
}

[data-theme="light"] .topbar::after{
  background:linear-gradient(90deg,var(--accent2),var(--accent),transparent 60%);
  opacity:0.3;
}
[data-theme="light"] .nav-item.active{
  background:linear-gradient(90deg,rgba(0,64,170,0.1),rgba(0,87,204,0.05));
  border:1px solid rgba(0,87,204,0.2);
}
[data-theme="light"] .kpi:hover{box-shadow:0 4px 16px rgba(0,0,0,0.08)}
[data-theme="light"] .data-table tr:hover td{background:rgba(0,0,0,0.025)}
[data-theme="light"] .user-dropdown-inner{box-shadow:0 8px 32px rgba(0,0,0,0.15)}
[data-theme="light"] .btn-ghost{background:var(--surface2);border:1px solid var(--border);color:var(--text2)}
[data-theme="light"] .btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
[data-theme="light"] .btn-primary{background:linear-gradient(135deg,var(--accent2),var(--accent));color:#fff}
[data-theme="light"] .badge-ok{background:rgba(0,135,90,0.1);color:var(--accent3);border:1px solid rgba(0,135,90,0.25)}
[data-theme="light"] .badge-warn{background:rgba(180,83,9,0.1);color:var(--warn);border:1px solid rgba(180,83,9,0.2)}
[data-theme="light"] .badge-danger{background:rgba(204,34,51,0.1);color:var(--danger);border:1px solid rgba(204,34,51,0.2)}
[data-theme="light"] .badge-info{background:rgba(0,87,204,0.1);color:var(--accent);border:1px solid rgba(0,87,204,0.2)}
[data-theme="light"] .badge-muted{background:rgba(0,0,0,0.06);color:var(--muted2);border:1px solid var(--border)}
[data-theme="light"] .badge-blue{background:rgba(0,64,170,0.1);color:var(--accent2);border:1px solid rgba(0,64,170,0.2)}
[data-theme="light"] .breadcrumb .current{background:rgba(0,87,204,0.1);border:1px solid rgba(0,87,204,0.25)}
[data-theme="light"] .ss-dropdown{box-shadow:0 8px 24px rgba(0,0,0,0.15)}
[data-theme="light"] .col-filter-dropdown{box-shadow:0 8px 24px rgba(0,0,0,0.15)}
[data-theme="light"] ::-webkit-scrollbar-thumb{background:var(--border2)}
[data-theme="light"] .ms-pill{background:rgba(0,87,204,0.08);border:1px solid rgba(0,87,204,0.2);color:var(--accent)}
[data-theme="light"] .progress-fill{background:linear-gradient(90deg,var(--accent2),var(--accent))}
[data-theme="light"] .card-highlight{border-color:var(--accent)!important;box-shadow:0 0 0 1px rgba(0,87,204,0.15)}

html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font-text);font-size:15px}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

/* ── LAYOUT ── */
.app{display:grid;grid-template-columns:312px 1fr;grid-template-rows:52px 1fr;height:100vh;overflow:hidden}

/* ── TOPBAR ── */
.topbar{
  grid-column:1/-1;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;
  padding:0 20px;gap:16px;
  position:relative;z-index:10;
}
.topbar::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--accent2),var(--accent),transparent 60%);
  opacity:0.5;
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-text);font-weight:700;font-size:1rem;
  color:var(--white);letter-spacing:-0.5px;min-width:180px;
  text-decoration:none;
}
.brand-icon{
  width:30px;height:30px;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  border-radius:7px;display:flex;align-items:center;justify-content:center;
  font-size:14px;
}
.brand span{color:var(--accent)}

.search-wrap{position:relative;flex:1;max-width:420px}
.search-wrap::before{
  content:'⌕';position:absolute;left:10px;top:50%;transform:translateY(-50%);
  color:var(--muted2);font-size:15px;pointer-events:none;z-index:1;
}
.search-bar{
  width:100%;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:8px;padding:6px 12px 6px 34px;
  color:var(--text);font-family:var(--font-text);font-size:0.8rem;
  outline:none;transition:border-color 0.2s;
}
.search-bar:focus{border-color:var(--accent)}

.topbar-right{margin-left:auto;display:flex;align-items:center;gap:12px}

.tb-badge{
  position:relative;background:var(--surface2);border:1px solid var(--border);
  border-radius:8px;padding:6px 10px;cursor:pointer;
  color:var(--text2);font-size:12px;transition:all 0.2s;
  display:flex;align-items:center;gap:6px;
  text-decoration:none;
}
.tb-badge:hover{border-color:var(--accent);color:var(--accent)}

.notif-dot{
  position:absolute;top:4px;right:4px;width:7px;height:7px;
  background:var(--danger);border-radius:50%;border:2px solid var(--surface);
  animation:pulse-dot 2s infinite;
}
@keyframes pulse-dot{
  0%,100%{box-shadow:0 0 0 0 rgba(255,61,87,0.4)}
  50%{box-shadow:0 0 0 5px rgba(255,61,87,0)}
}

.user-pill{
  display:flex;align-items:center;gap:8px;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:8px;padding:5px 12px;cursor:pointer;
  position:relative;
}
.user-pill:hover{border-color:var(--border2)}
.user-avatar{
  width:24px;height:24px;border-radius:6px;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff;
}
.user-name{font-size:0.82rem;color:var(--white);font-weight:600}
.user-role{font-size:0.8rem;color:var(--muted2);font-family:var(--font-text)}

/* User dropdown */
.user-dropdown{
  display:none;position:absolute;top:100%;right:0;
  padding-top:8px;          /* gap visuel sans trou de hover */
  min-width:160px;z-index:50;
}
.user-dropdown-inner{
  background:var(--surface);border:1px solid var(--border2);
  border-radius:10px;overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,0.5);
}
.user-pill:hover .user-dropdown{display:block}
.user-dropdown a{
  display:block;padding:9px 14px;font-size:0.8rem;color:var(--text2);
  text-decoration:none;transition:all 0.15s;
}
.user-dropdown a:hover{background:var(--surface2);color:var(--danger)}

/* ── Searchable select ── */
.ss-wrapper{position:relative;display:block}
.ss-input{cursor:pointer}
.ss-dropdown{
  display:none;z-index:9999;
  background:var(--surface);border:1px solid var(--border2);border-radius:8px;
  max-height:220px;overflow-y:auto;box-shadow:0 8px 24px rgba(0,0,0,0.55);
}
/* Fixed variant — appended to body, positioned via JS getBoundingClientRect */
.ss-dropdown.ss-fixed{position:fixed}
.ss-dropdown.open{display:block}
.ss-option{
  padding:8px 12px;font-size:0.8rem;color:var(--text2);cursor:pointer;transition:background 0.1s;
}
.ss-option:hover,.ss-option.active{background:rgba(0,229,255,0.09);color:var(--white)}
.ss-empty{padding:8px 12px;font-size:0.8rem;color:var(--muted2);font-style:italic}

/* ── Multi-select (pills) ── */
.ms-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;min-height:0}
.ms-pill{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(0,229,255,0.1);border:1px solid rgba(0,229,255,0.25);
  border-radius:5px;padding:3px 8px;
  font-size:0.8rem;color:var(--accent);font-family:var(--font-text);
}
.ms-pill-remove{
  background:none;border:none;color:var(--muted);cursor:pointer;
  font-size:1rem;line-height:1;padding:0;display:flex;align-items:center;
}
.ms-pill-remove:hover{color:var(--danger)}
.ms-input{width:100%}

/* ── SIDEBAR ── */
.sidebar{
  background:var(--surface);border-right:1px solid var(--border);
  padding:16px 0;overflow-y:auto;
  display:flex;flex-direction:column;gap:2px;
  /* Thin gradient rail along the left edge, flowing through every section
     color top-to-bottom (user request 2026-09-23 — "un dégradé entre les
     grandes sections"). background-attachment:local (not the default
     scroll) is the key: it makes the background scroll WITH the sidebar's
     content instead of staying pinned to the viewport, and its 100% height
     then spans the real scrollable content height — correct regardless of
     how many items a given user's RBAC permissions actually show, with no
     JS needed to measure section boundaries. Approximate flow, not
     pixel-aligned to each section's real boundary (that would need JS). */
  background-image:linear-gradient(180deg,
    var(--nav-inventaire), var(--nav-planification), var(--nav-collaboration),
    var(--nav-analyse), var(--nav-sources), var(--nav-modules), var(--nav-connecteurs), var(--nav-administration));
  background-repeat:no-repeat;
  background-size:3px 100%;
  background-position:left top;
  background-attachment:local;
}
.nav-section{
  padding:8px 16px 4px;
  font-size:0.8rem;font-family:var(--font-text);
  color:var(--muted);
  margin-top:8px;
}
.nav-section[data-section]{
  cursor:pointer;user-select:none;
  display:flex;align-items:center;justify-content:space-between;
  transition:filter 0.15s;
}
/* Top-level category label itself now carries --section-color (not just the
   dot) plus extra weight, 2026-09-24 — user request: a dot alone was too
   subtle, categories still read as one flat gray list at a glance. Excludes
   .sub (Connecteurs/Administration sub-headers keep their existing dimmer
   treatment, already one visual tier below the top-level 7). Hover
   brightens instead of flattening to --text2 — flattening would have
   undone the whole point of this change on interaction. */
.nav-section[data-section]:not(.sub){
  color:var(--section-color,var(--muted));font-weight:700;
}
.nav-section[data-section]:not(.sub):hover{filter:brightness(1.25)}
.nav-chevron{
  font-size:1rem;font-weight:700;transition:transform 0.15s,color 0.15s;color:var(--accent);
}
.nav-section[data-section]:hover .nav-chevron{color:var(--accent3)}
.nav-section-collapsed .nav-chevron{transform:rotate(-90deg)}

/* Section color accents — a small dot per top-level section (and its
   sub-sections, matched by data-section prefix) so the sidebar reads as
   distinct zones while scanning, not one flat list. The dot sits before
   the label because .nav-section[data-section] is already display:flex —
   no markup change needed. */
.nav-section[data-section]::before{
  content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--section-color,var(--muted));margin-right:8px;flex-shrink:0;
}
.nav-section.sub[data-section]::before{width:5px;height:5px;margin-right:6px}
.nav-section[data-section="inventaire"]{--section-color:var(--nav-inventaire)}
.nav-section[data-section="planification"]{--section-color:var(--nav-planification)}
.nav-section[data-section="collaboration"]{--section-color:var(--nav-collaboration)}
.nav-section[data-section="analyse"]{--section-color:var(--nav-analyse)}
.nav-section[data-section="modules"]{--section-color:var(--nav-modules)}
.nav-section[data-section="sources"]{--section-color:var(--nav-sources)}
.nav-section[data-section="vuln"],
.nav-section[data-section^="vuln-"]{--section-color:var(--nav-planification)}
.nav-section[data-section="ia"]{--section-color:var(--nav-sources)}
.nav-section[data-section="connecteurs"],
.nav-section[data-section^="conn-"]{--section-color:var(--nav-connecteurs)}
.nav-section[data-section="administration"],
.nav-section[data-section^="admin-"]{--section-color:var(--nav-administration)}
.nav-section.sub{
  padding:5px 16px 4px 28px;font-size:0.8rem;letter-spacing:1.5px;
  color:var(--muted2);margin-top:4px;
}
.nav-section.sub:hover{color:var(--text2)}
.nav-section.sub .nav-chevron{font-size:0.75rem}
.nav-group.sub{margin-left:12px}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 16px;margin:1px 8px;border-radius:8px;
  cursor:pointer;transition:all 0.15s;
  color:var(--text2);font-size:0.82rem;font-weight:600;
  position:relative;text-decoration:none;
}
.nav-item:hover{background:var(--surface2);color:var(--text)}
.nav-item.active{
  background:linear-gradient(90deg,rgba(0,87,255,0.15),rgba(0,229,255,0.05));
  color:var(--accent);border:1px solid rgba(0,229,255,0.15);
}
.nav-item.active::before{
  content:'';position:absolute;left:-8px;top:50%;transform:translateY(-50%);
  width:3px;height:60%;background:var(--accent);border-radius:2px;
}
.nav-item.soon{opacity:0.4;cursor:default}
.nav-item.soon:hover{background:transparent;color:var(--text2)}
.nav-icon{width:18px;text-align:center;font-size:14px}
.nav-logo-chip{
  width:18px;height:18px;border-radius:4px;background:#fff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 0 0 1px rgba(0,0,0,0.08);
}
.nav-logo-chip img{max-width:14px;max-height:14px;object-fit:contain}
.nav-badge{
  margin-left:auto;background:var(--danger);color:#fff;
  font-size:0.8rem;font-family:var(--font-text);
  padding:1px 6px;border-radius:10px;font-weight:700;
}
.nav-badge.warn{background:var(--warn);color:#000}
.nav-badge.ok{background:var(--accent3);color:#000}
.nav-badge.info{background:var(--accent2);color:#fff}

.sidebar-footer{
  margin-top:auto;padding:12px 16px;
  border-top:1px solid var(--border);
}
.sys-status{
  display:flex;align-items:center;gap:6px;
  font-size:0.8rem;font-family:var(--font-text);color:var(--muted2);
}
.status-led{width:6px;height:6px;border-radius:50%;background:var(--accent3);animation:pulse-led 3s infinite}
@keyframes pulse-led{0%,100%{opacity:1}50%{opacity:0.4}}

/* SPEC-17: readable menu, in the manner of SUSE Manager — entries 14.5 px, section titles 13 px in normal case, a system text face (the title
   face is for headings), a search field on top and one open section at a time. */
.sidebar{font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}
.sidebar .nav-item{font-size:0.97rem;font-weight:400;min-height:36px;line-height:1.25;padding:7px 14px;gap:10px;letter-spacing:0}
.sidebar .nav-item.active{font-weight:600}
.sidebar .ico{display:block;flex-shrink:0}
.kpi-icon{color:var(--kpi-color,var(--accent))}
.nav-icon{width:20px;font-size:15px;flex-shrink:0}
.sidebar .nav-section{font-family:inherit;text-transform:none;letter-spacing:normal;font-size:0.97rem;font-weight:600;padding:9px 16px 5px;margin-top:6px}
.sidebar .nav-section[data-section]:not(.sub){font-weight:600}
.sidebar .nav-section.sub{font-size:0.97rem;font-weight:500;padding:6px 16px 4px 26px;color:var(--text2)}
.sidebar .nav-section:focus-visible,.sidebar .nav-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:6px}
.sidebar .nav-section[data-section]>span:first-of-type{flex:1;text-align:left}
.sidebar .nav-label{flex:1;min-width:0}
.sidebar .nav-chevron{font-size:0.9rem;display:inline-block;width:14px;text-align:center}
.nav-search{padding:2px 12px 8px;position:sticky;top:-16px;z-index:5;background:var(--surface);margin-top:-6px;padding-top:8px}
.nav-search input{width:100%;box-sizing:border-box;background:var(--bg2);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:8px 10px;font:inherit;font-size:0.86rem}
.nav-search input:focus{outline:none;border-color:var(--accent)}
#ir-nav-none{font-size:0.8rem;color:var(--muted2);padding:8px 4px}
#ir-nav-extra{display:flex;flex-direction:column}
#ir-nav-extra .nav-item{margin:2px 0}
.nav-xsec{margin-left:auto;font-size:0.8rem;color:var(--muted2);padding-left:8px;white-space:nowrap}
.sidebar mark{background:rgba(255,200,0,0.35);color:inherit;border-radius:3px;padding:0 1px}
.sidebar .nav-item.nav-hit{background:var(--surface2);box-shadow:inset 0 0 0 1px var(--accent)}
.app.ai-open .sidebar .nav-search{display:none}

.ico{display:block;flex-shrink:0}
.nav-icon{display:inline-flex;align-items:center;justify-content:center}
.kpi-icon{display:inline-flex;color:var(--kpi-color,var(--accent))}

/* Shared connector header (REFONTE_UI lot 3) */
.conn-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.conn-head-main{display:flex;align-items:center;gap:14px;min-width:0}
.conn-logo{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;background:var(--surface2);border:1px solid var(--border);color:var(--accent);flex-shrink:0}
.conn-logo-chip{width:34px;height:34px;border-radius:8px}
.conn-logo-chip img{max-width:26px;max-height:26px}
.conn-state-wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.conn-state{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.conn-pill{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;border:1px solid var(--pill);color:var(--pill);font-size:0.87rem}
.conn-dot{width:9px;height:9px;border-radius:50%;background:var(--pill)}
.conn-detail{font-size:0.87rem;color:var(--muted2)}

/* UI-8: the menu is collapsed from the first paint. A section is open when nav.js marked it `open`, or — before the script runs — when it holds the
   current page; `shut` is the user's explicit closing. No transition: the animation is only for clicks. */
.sidebar .nav-group{display:none;transition:none}
.sidebar .nav-group.open,.sidebar .nav-group:has(.nav-item.active):not(.shut){display:block}
.sidebar .nav-section .nav-chevron{transform:rotate(-90deg);transition:none}
.sidebar .nav-section:has(+ .nav-group.open) .nav-chevron,.sidebar .nav-section:has(+ .nav-group:has(.nav-item.active):not(.shut)) .nav-chevron{transform:none}
.sidebar.nav-ready .nav-section .nav-chevron{transition:transform 0.15s}

/* SPEC-18 lot 4: table text is 14 px. Cells carry many inline `font-size:0.8rem` overrides (12 px): inside a table they are lifted to the table size,
   badges and technical monospace values keep their own, slightly smaller, size. */
.data-table td [style*="font-size:0.8rem"],.data-table td[style*="font-size:0.8rem"],
.data-table td [style*="font-size: 0.8rem"]{font-size:0.93rem !important}
.data-table td .badge,.data-table td .badge *,.data-table td .field-help,.data-table td .kpi *{font-size:0.8rem !important}
.data-table td .mono,.data-table td [style*="JetBrains"]{font-size:0.87rem !important}

/* ── MAIN ── */
.main{overflow-y:auto;background:var(--bg2);display:flex;flex-direction:column}
.page{display:flex;flex-direction:column;gap:16px;padding:20px;animation:fadeIn 0.25s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ── PAGE HEADER ── */
.page-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.page-title{font-size:1.5rem;font-weight:700;color:var(--white);font-family:var(--font-title)}
.page-title span{color:var(--accent)}
.page-sub{font-size:0.8rem;color:var(--muted2);font-family:var(--font-text);margin-top:2px}
.page-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ── BUTTONS ── */
.btn{
  padding:7px 14px;border-radius:8px;border:none;cursor:pointer;
  font-family:inherit;font-size:0.93rem;font-weight:600;
  transition:all 0.15s;display:inline-flex;align-items:center;gap:6px;
  text-decoration:none;
}
.btn-primary{background:linear-gradient(135deg,var(--accent2),var(--accent));color:#fff}
.btn-primary:hover{opacity:0.85;box-shadow:0 4px 16px rgba(0,229,255,0.2)}
.btn-ghost{background:var(--surface);border:1px solid var(--border);color:var(--text2)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-danger{background:rgba(255,61,87,0.15);border:1px solid rgba(255,61,87,0.3);color:var(--danger)}
.btn-sm{padding:4px 10px;font-size:0.8rem}

/* ── KPI GRID ── */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:16px;position:relative;overflow:hidden;
  transition:border-color 0.2s,transform 0.15s;
  animation:slideIn 0.4s ease both;
}
.kpi:hover{border-color:var(--border2);transform:translateY(-1px)}
.kpi::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--kpi-color,var(--accent));
}
.kpi-label{font-size:0.87rem;font-weight:500;color:var(--muted2)}
/* Cards of one row have the same height: stack label and value so the values line up at the bottom whatever the number of lines of the labels */
.kpi:not(:has(.kpi-lead)){display:flex;flex-direction:column}
.kpi:not(:has(.kpi-lead)) .kpi-value{margin-top:auto;padding-top:6px}
a.kpi.kpi-btn:not(:has(.kpi-lead)){display:flex;flex-direction:column}
.kpi-value{font-size:2rem;font-weight:800;color:var(--white);margin:6px 0 2px;font-family:var(--font-text);line-height:1}
.kpi-value span{font-size:0.9rem;color:var(--muted2);font-weight:400}
.kpi-trend{font-size:0.8rem;color:var(--accent3)}
.kpi-trend.bad{color:var(--danger)}
.kpi-trend.warn{color:var(--warn)}
.kpi-icon{position:absolute;right:14px;top:14px;font-size:1.4rem;opacity:0.3}

@keyframes slideIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
.kpi:nth-child(1){animation-delay:0.05s}
.kpi:nth-child(2){animation-delay:0.10s}
.kpi:nth-child(3){animation-delay:0.15s}
.kpi:nth-child(4){animation-delay:0.20s}

/* ── KPI card that is ALSO a navigation button (3D press) ──
   Layered on top of .kpi via an additional class — a plain (non-link) .kpi
   elsewhere in the app renders completely unchanged (CrossRiver "Couverture
   par source", user request 2026-09-24: these cards must keep the exact
   same .kpi structure/format as every other KPI card, but also visibly
   read as clickable — a raised, pressable 3D edge rather than a flat card
   with only a border-color hover). */
a.kpi.kpi-btn{
  text-decoration:none;color:inherit;display:block;cursor:pointer;
  box-shadow:0 4px 0 var(--border2),0 6px 14px rgba(0,0,0,0.35);
  transition:transform 0.12s,box-shadow 0.12s,border-color 0.2s;
}
a.kpi.kpi-btn:hover{
  border-color:var(--kpi-color,var(--accent));
  transform:translateY(-2px);
  box-shadow:0 6px 0 var(--border2),0 10px 20px rgba(0,0,0,0.4);
}
a.kpi.kpi-btn:active{
  transform:translateY(3px);
  box-shadow:0 1px 0 var(--border2),0 2px 4px rgba(0,0,0,0.3);
}
[data-theme="light"] a.kpi.kpi-btn{box-shadow:0 4px 0 var(--border2),0 6px 14px rgba(0,0,0,0.12)}
[data-theme="light"] a.kpi.kpi-btn:hover{box-shadow:0 6px 0 var(--border2),0 10px 20px rgba(0,0,0,0.16)}
[data-theme="light"] a.kpi.kpi-btn:active{box-shadow:0 1px 0 var(--border2),0 2px 4px rgba(0,0,0,0.1)}

/* ── GRID HELPERS ── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-3{display:grid;grid-template-columns:2fr 1fr;gap:12px}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}

/* ── CARDS ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.card-header{
  padding:14px 16px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.card-title{font-size:0.95rem;font-weight:600;font-family:var(--font-title);color:var(--white);display:flex;align-items:center;gap:8px}
.card-body{padding:16px}

/* ── DATA TABLE ── */
.data-table{width:100%;border-collapse:collapse}
.data-table th{
  padding:8px 12px;text-align:left;
  font-size:0.87rem;
  color:var(--muted2);font-family:inherit;
  border-bottom:1px solid var(--border);font-weight:600;
  white-space:nowrap;
}
.data-table td{
  padding:10px 12px;border-bottom:1px solid rgba(28,42,56,0.5);
  font-size:0.93rem;color:var(--text);transition:background 0.1s;
}
.data-table tr:hover td{background:rgba(255,255,255,0.02)}
.data-table tr:last-child td{border-bottom:none}
.data-table .mono{font-family:'JetBrains Mono',monospace;font-size:0.87rem}
.data-table a{color:var(--accent);text-decoration:none}
.data-table a:hover{text-decoration:underline}

/* ── BADGES ── */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:4px;font-size:0.8rem;
  font-family:inherit;font-weight:600;white-space:nowrap;
}
.badge-ok{background:rgba(0,255,157,0.1);color:var(--accent3);border:1px solid rgba(0,255,157,0.2)}
.badge-warn{background:rgba(255,179,0,0.1);color:var(--warn);border:1px solid rgba(255,179,0,0.2)}
.badge-danger{background:rgba(255,61,87,0.1);color:var(--danger);border:1px solid rgba(255,61,87,0.2)}
.badge-info{background:rgba(0,229,255,0.1);color:var(--accent);border:1px solid rgba(0,229,255,0.2)}
.badge-muted{background:rgba(79,104,128,0.2);color:var(--muted2);border:1px solid var(--border)}
.badge-blue{background:rgba(0,87,255,0.15);color:#6699ff;border:1px solid rgba(0,87,255,0.3)}

/* ── FIELD HELP (config pages, CONFIG_PAGE_STANDARD.md §7) ──
   Small "!" marker next to a form field's label. Plain ASCII by design:
   the app's self-hosted fonts (Syne/JetBrains Mono, Latin/Latin-Extended
   subsets only, no CDN fallback — air-gapped posture) don't cover "ⓘ"
   (Enclosed Alphanumerics block) — confirmed invisible in practice,
   including on the handful of pre-existing pages that already used it ad
   hoc. "!" (and "?", tried first) are both plain ASCII and always render.

   Tooltip is a CSS-only popover (:hover/:focus + content:attr()), NOT the
   native title="" attribute — found and fixed 2026-09-21 (real user report
   on mobile): title="" only ever shows on mouse hover, there is no hover
   event on a touchscreen, so it silently never appeared for a mobile user
   tapping the marker. tabindex="0" on the element makes a tap focus it
   (triggers :focus, same CSS path as :hover on desktop); tapping anywhere
   else naturally blurs it again, no JS needed to dismiss. Markup uses
   data-tip="..." (not title) — see CONFIG_PAGE_STANDARD.md §7 for the full
   markup, including the onclick guard needed when the marker sits inside a
   <label> that wraps a checkbox (prevents an accidental toggle on tap). */
.field-help{
  display:inline-flex;align-items:center;justify-content:center;
  vertical-align:super;position:relative;
  width:10px;height:10px;border-radius:50%;
  font-size:0.5rem;font-weight:700;line-height:1;
  font-family:var(--font-text);
  color:var(--muted2);border:1px solid var(--muted2);
  cursor:help;user-select:none;flex-shrink:0;
}
.field-help:hover,.field-help:focus{color:var(--accent);border-color:var(--accent);outline:none}
.field-help::after{
  content:attr(data-tip);
  position:absolute;bottom:calc(100% + 6px);left:50%;
  transform:translateX(-50%);
  background:var(--surface2);color:var(--text);
  border:1px solid var(--border);border-radius:6px;
  padding:7px 10px;font-size:0.8rem;font-weight:400;
  font-family:var(--font-text);line-height:1.4;
  white-space:normal;width:max-content;max-width:min(260px,80vw);
  box-shadow:0 6px 16px rgba(0,0,0,0.35);
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .12s ease;
  z-index:80;
}
.field-help:hover::after,.field-help:focus::after{opacity:1;visibility:visible}

/* UI-7: the floating bubble (tooltip.js). The ::after bubbles above stay only as a fallback when JavaScript is off. */
html.js-tips .field-help::after,html.js-tips .ai-speed [data-tip]::after,html.js-tips .sp-where[data-tip]::after{display:none !important}
#ir-tip{position:fixed;z-index:100000;background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:8px 10px;
  font:400 0.82rem/1.45 var(--font-text);text-transform:none;letter-spacing:normal;white-space:pre-line;width:max-content;box-shadow:0 6px 16px rgba(0,0,0,0.35);pointer-events:none}
#ir-tip[hidden]{display:none}

/* ── ALERT ITEMS ── */
.alert-item{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--border);
}
.alert-item:last-child{border-bottom:none}
.alert-dot{width:8px;height:8px;border-radius:50%;margin-top:4px;flex-shrink:0}
.alert-dot.critical{background:var(--danger);box-shadow:0 0 6px rgba(255,61,87,0.5)}
.alert-dot.warning{background:var(--warn)}
.alert-dot.ok{background:var(--accent3)}
.alert-text{flex:1}
.alert-host{font-weight:700;color:var(--white);font-size:0.85rem;font-family:'JetBrains Mono',monospace}
.alert-desc{color:var(--text2);font-size:0.8rem;margin-top:1px}
.alert-time{font-size:0.8rem;color:var(--muted);font-family:var(--font-text);white-space:nowrap}

/* ── SERVER ROW (dashboard) ── */
.server-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(28,42,56,0.5)}
.server-row:last-child{border-bottom:none}
.server-name{flex:1;font-weight:600;font-size:0.8rem;color:var(--white);font-family:'JetBrains Mono',monospace}
.server-os{font-size:0.8rem;color:var(--muted2);font-family:var(--font-text)}
.server-patches{font-size:0.8rem;font-family:var(--font-text)}

/* ── PROGRESS BAR ── */
.progress-wrap{margin-bottom:10px}
.progress-label{display:flex;justify-content:space-between;margin-bottom:4px;font-size:0.8rem;color:var(--text2)}
.progress-bar{height:5px;background:var(--border2);border-radius:3px;overflow:hidden}
.progress-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--accent2),var(--accent));transition:width 1s ease}

/* ── CHART ── */
.chart-container{position:relative;height:180px}

/* ── TABS ── */
.tabs{display:flex;gap:2px;background:var(--bg);border-radius:8px;padding:3px;border:1px solid var(--border)}
.tab{
  padding:5px 14px;border-radius:6px;cursor:pointer;
  font-size:0.8rem;font-weight:600;color:var(--text2);transition:all 0.15s;
}
.tab.active{background:var(--surface);color:var(--white)}
.tab:hover:not(.active){color:var(--text)}

/* ── SEARCH / FILTER BAR ── */
.filter-bar{
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:12px 16px;display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;
}
.filter-field{display:flex;flex-direction:column;gap:4px}
/* Growing search cell: the field fills the cell instead of keeping .form-input's 220px minimum,
   which made it overflow the next filter at some widths (QA UI-6). */
.filter-field[style*="flex:1"] .form-input{min-width:0;width:100%;box-sizing:border-box}
.filter-field label{font-size:0.87rem;font-weight:500;color:var(--muted2)}
.form-input,.form-select{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:7px;padding:7px 10px;color:var(--text);
  font-family:inherit;font-size:0.93rem;outline:none;
  transition:border-color 0.2s;
}
.form-input{min-width:220px}
.form-input:focus,.form-select:focus{border-color:var(--accent)}
.form-select option{background:var(--surface)}

/* ── DETAIL PAGE ── */
.detail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.dl-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid rgba(28,42,56,0.4)}
.dl-row:last-child{border-bottom:none}
.dl-key{font-size:0.8rem;font-family:var(--font-text);color:var(--muted2)}
.dl-val{font-size:0.82rem;color:var(--white);font-family:'JetBrains Mono',monospace;text-align:right;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── BREADCRUMB ── */
.breadcrumb{
  font-size:0.8rem;font-family:var(--font-text);
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  background:var(--surface2);border:1px solid var(--border);border-radius:8px;
  padding:7px 14px;width:fit-content;
}
.breadcrumb a{color:var(--accent);text-decoration:none;font-weight:600;transition:color 0.15s}
.breadcrumb a:hover{color:var(--accent3);text-decoration:underline}
.breadcrumb .sep{color:var(--muted2);font-size:0.8rem}
.breadcrumb .current{
  color:var(--white);font-weight:700;
  background:rgba(0,229,255,0.12);border:1px solid rgba(0,229,255,0.25);
  border-radius:5px;padding:1px 8px;
}

/* ── PAGINATION ── */
.pagination{display:flex;align-items:center;gap:6px;font-size:0.8rem;font-family:var(--font-text)}
.pagination a{color:var(--text2);text-decoration:none;padding:4px 8px;border:1px solid var(--border);border-radius:6px;transition:all 0.15s}
.pagination a:hover{border-color:var(--accent);color:var(--accent)}
.pagination .current-page{color:var(--muted2)}

/* ── EMPTY STATE ── */
.empty-state{padding:40px;text-align:center;color:var(--muted2);font-family:var(--font-text);font-size:0.8rem}

/* ── 404 ── */
.not-found{display:flex;flex-direction:column;align-items:center;justify-content:center;height:60vh;gap:12px;text-align:center}
.not-found-code{font-size:5rem;font-weight:800;color:var(--border2);font-family:'JetBrains Mono',monospace}

/* ── HTMX loading indicator ── */
.htmx-indicator{opacity:0;transition:opacity 200ms ease-in}
.htmx-request .htmx-indicator{opacity:1}
.htmx-request.htmx-indicator{opacity:1}

/* ══ TABLE FILTER (table-filter.js) ══════════════════════════════════════════ */

/* Sortable column header */
th.sortable { cursor:pointer; user-select:none; white-space:nowrap }
th.sortable:hover { color:var(--accent) }
th.col-sorted { color:var(--accent) }
.sort-ind {
  display:inline-block; margin-left:5px; font-size:0.8rem;
  color:var(--muted2); transition:color 0.15s;
}
th.col-sorted .sort-ind { color:var(--accent) }

/* Filter row cells */
.filter-row th.filter-cell {
  padding:5px 6px; background:var(--bg2);
  border-bottom:2px solid var(--border);
}

/* Text filter input */
.col-filter-input {
  width:100%; box-sizing:border-box;
  background:var(--surface); border:1px solid var(--border);
  border-radius:5px; padding:4px 7px;
  color:var(--text); font-family:var(--font-text); font-size:0.8rem;
  outline:none; transition:border-color 0.15s;
}
.col-filter-input:focus { border-color:var(--accent) }

/* Select filter button */
.col-filter-select-wrap { position:relative }
.col-filter-btn {
  width:100%; background:var(--surface); border:1px solid var(--border);
  border-radius:5px; padding:4px 7px; cursor:pointer;
  color:var(--muted2); font-family:var(--font-text); font-size:0.8rem;
  text-align:left; white-space:nowrap; transition:border-color 0.15s, color 0.15s;
}
.col-filter-btn:hover { border-color:var(--accent); color:var(--text) }
.col-filter-btn.active { border-color:var(--accent); color:var(--accent) }
.filter-badge {
  display:inline-block; background:var(--accent); color:#000;
  border-radius:10px; padding:0 5px; font-size:0.8rem; font-weight:700;
}

/* Dropdown panel */
.col-filter-dropdown {
  display:none; position:absolute; top:calc(100% + 3px); left:0; z-index:200;
  min-width:160px; max-width:220px; max-height:240px; overflow-y:auto;
  background:var(--surface); border:1px solid var(--border2);
  border-radius:7px; box-shadow:0 8px 24px rgba(0,0,0,0.4);
  padding:6px 4px;
}
.col-filter-dropdown.open { display:block }
.col-filter-sep { height:1px; background:var(--border); margin:4px 6px }

/* Checkbox options */
.col-filter-option {
  display:flex; align-items:center; gap:7px;
  padding:4px 8px; cursor:pointer; border-radius:5px;
  font-family:var(--font-text); font-size:0.8rem; color:var(--text2);
  transition:background 0.1s;
}
.col-filter-option:hover { background:rgba(0,229,255,0.06); color:var(--white) }
.col-filter-option input[type=checkbox] {
  accent-color:var(--accent); width:13px; height:13px; flex-shrink:0;
}

/* Counter */
.table-counter {
  font-family:var(--font-text); font-size:0.8rem;
  color:var(--muted2); margin-bottom:6px; text-align:right;
}
.table-counter.filtered { color:var(--accent) }

/* ── Column drag & drop (SortableJS) ── */
th.col-draggable { cursor: grab }
th.col-draggable:active { cursor: grabbing }
th.col-ghost {
  opacity: 0.35;
  background: rgba(0,229,255,0.08) !important;
  outline: 1px dashed var(--accent);
}
th.col-chosen { background: rgba(0,229,255,0.06) !important }
.drag-handle {
  display:inline-block;margin-left:5px;opacity:0.3;
  font-size:0.65rem;cursor:grab;vertical-align:middle;
}
th.col-draggable:hover .drag-handle { opacity: 0.7 }

[x-cloak] { display: none !important; }

/* ── AI assistant panel (ASSISTANT_IA.md §3.1): on the left, pushes the page, menu reduced to icons ── */
.ai-btn{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:5px 12px;cursor:pointer;color:var(--accent);
  font-size:0.8rem;font-weight:700;display:flex;align-items:center;gap:6px}
.ai-btn:hover{border-color:var(--accent)}
.topbar > .ai-btn{flex:1;max-width:460px;justify-content:flex-start;padding:8px 16px;font-size:0.9rem;border-color:var(--accent);
  background:linear-gradient(135deg,rgba(0,212,170,.14),rgba(0,153,255,.10));box-shadow:0 2px 0 rgba(0,0,0,.25);transition:transform .12s,box-shadow .12s}
.topbar > .ai-btn:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.3)}
.topbar > .ai-btn:active{transform:translateY(1px);box-shadow:none}
.ai-btn .ai-spark{font-size:1.1rem}
.ai-btn .ai-short{display:none}
.ai-btn .ai-kbd{margin-left:auto;font-family:var(--font-mono,monospace);font-size:0.8rem;font-weight:400;color:var(--muted2);border:1px solid var(--border);border-radius:5px;padding:1px 6px}
.ai-panel{grid-row:2;grid-column:2;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;
  position:relative;min-width:0;overflow:hidden}
.ai-panel[hidden],.ai-panel [hidden]{display:none !important}
.app.ai-open{grid-template-columns:60px var(--ai-w,440px) 1fr}
.app.ai-open .main{grid-column:3}
.ai-bubble{position:fixed;z-index:90;background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:6px;
  padding:4px 10px;font-size:0.8rem;font-weight:600;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,0.25)}
.ai-resizer{position:absolute;top:0;right:0;width:6px;height:100%;cursor:col-resize;z-index:5}
.ai-resizer:hover{background:var(--accent);opacity:0.35}
.ai-head{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--border);font-size:0.85rem}
.ai-head button,.ai-head a{background:none;border:none;color:var(--text2);cursor:pointer;font-size:1rem;padding:2px 6px;text-decoration:none}
.ai-head button:hover,.ai-head a:hover{color:var(--accent)}
.ai-spacer{flex:1}
.ai-recent{border-bottom:1px solid var(--border);padding:6px 10px;display:flex;flex-direction:column;gap:2px;max-height:180px;overflow-y:auto}
.ai-recent a{font-size:0.8rem;color:var(--text2);padding:3px 6px;border-radius:5px;text-decoration:none;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-recent a:hover{background:var(--surface2);color:var(--text)}
.ai-remote{background:rgba(255,179,0,0.1);color:var(--warn);font-size:0.8rem;padding:6px 14px;border-bottom:1px solid rgba(255,179,0,0.3)}
.ai-speed{display:flex;align-items:center;gap:8px;font-size:0.8rem;padding:6px 14px;border-bottom:1px solid var(--border);color:var(--text2)}
.ai-speed .sp-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.ai-speed .sp-where{margin-left:auto;font-size:0.8rem;padding:1px 8px;border-radius:10px;border:1px solid var(--border);color:var(--muted2);position:relative;cursor:help}
.ai-speed .sp-where.remote{color:var(--warn);border-color:rgba(255,179,0,0.5)}
.ai-speed [data-tip]{position:relative;cursor:help}
.ai-speed [data-tip]::after,.sp-where[data-tip]::after{content:attr(data-tip);white-space:pre-line;position:absolute;top:calc(100% + 6px);left:0;background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:8px 10px;font-size:0.8rem;line-height:1.45;width:max-content;max-width:min(300px,80vw);box-shadow:0 6px 16px rgba(0,0,0,0.35);opacity:0;visibility:hidden;pointer-events:none;z-index:90;transition:opacity .12s}
.ai-speed [data-tip]:hover::after,.ai-speed [data-tip]:focus::after,.sp-where[data-tip]:hover::after,.sp-where[data-tip]:focus::after{opacity:1;visibility:visible}
.ai-speed .sp-where[data-tip]::after{left:auto;right:0}
.ai-budget{font-size:0.8rem;color:var(--muted2);padding:3px 14px;border-bottom:1px solid var(--border)}
.ai-budget.warn{color:var(--warn)}
.ai-ctx{font-size:0.8rem;color:var(--muted2);padding:6px 14px;border-bottom:1px solid var(--border);display:flex;gap:6px;align-items:center}
.ai-log{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:12px}
.ai-msg{max-width:100%;font-size:0.84rem;line-height:1.5;word-wrap:break-word}
.ai-msg.user{align-self:flex-end;background:rgba(0,87,255,0.14);border:1px solid rgba(0,229,255,0.15);padding:8px 12px;border-radius:12px 12px 2px 12px;max-width:88%}
.ai-msg.assistant{align-self:flex-start;width:100%}
.ai-msg .ai-text p{margin:0 0 6px}
.ai-msg .ai-text ul{margin:4px 0 6px 18px;padding:0}
.ai-msg .ai-text code{background:var(--surface2);padding:1px 5px;border-radius:4px;font-size:0.8rem}
.ai-streaming::after{content:"▍";animation:ai-blink 1s steps(2) infinite;color:var(--accent)}
@keyframes ai-blink{50%{opacity:0}}
.ai-steps{font-size:0.8rem;color:var(--muted2);font-style:italic;margin-bottom:4px}
.ai-card{border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:8px;background:var(--surface2);padding:8px 12px;margin-top:8px;font-size:0.8rem}
.ai-card.warn{border-left-color:var(--warn)}
.ai-card .ai-actions{display:flex;gap:8px;margin-top:6px}
.ai-card table{width:100%;border-collapse:collapse;font-size:0.8rem;margin-top:4px}
.ai-card td,.ai-card th{padding:2px 6px;border-bottom:1px solid var(--border);text-align:left}
.ai-src{font-size:0.8rem;color:var(--muted2);margin-top:6px}
.ai-src summary{cursor:pointer}
.ai-tools{display:flex;gap:8px;margin-top:4px;font-size:0.8rem;color:var(--muted2)}
.ai-tools button{background:none;border:none;color:var(--muted2);cursor:pointer;font-size:0.8rem;padding:0}
.ai-tools button:hover{color:var(--accent)}
.ai-starters{padding:0 14px 6px;display:flex;flex-direction:column;gap:5px}
.ai-starters button{text-align:left;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:6px 10px;color:var(--text2);font-size:0.8rem;cursor:pointer}
.ai-starters button:hover{border-color:var(--accent);color:var(--text)}
.ai-form{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--border);align-items:flex-end}
.ai-form textarea{flex:1;resize:none;background:var(--bg2);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:8px 10px;font:inherit;font-size:0.84rem}
@media (max-width:900px){
  .ai-panel{position:fixed;top:52px;left:0;right:0;bottom:0;z-index:80;grid-row:auto;grid-column:auto}
  .app.ai-open{grid-template-columns:256px 1fr}
  .app.ai-open .sidebar .nav-section,.app.ai-open .sidebar .sidebar-footer{display:revert}
  .app.ai-open .sidebar .nav-item{font-size:0.82rem;width:auto;padding:8px 16px;margin:1px 8px;justify-content:flex-start;gap:10px}
  .app.ai-open .main{grid-column:2}
  .ai-resizer{display:none}
}

/* ── PHONE / TABLET: the menu becomes a drawer opened by the burger button (SPEC-18) ── */
.nav-burger,.nav-backdrop{display:none}
@media (max-width:900px){
  .app,.app.ai-open{grid-template-columns:1fr}
  .app .main,.app.ai-open .main{grid-column:1}
  .nav-burger{display:flex;align-items:center;justify-content:center;width:40px;height:36px;flex-shrink:0;background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:1.2rem;cursor:pointer}
  .topbar{padding:0 12px;gap:10px}
  .brand{min-width:0}
  .topbar > .ai-btn{flex:0 0 auto;padding:5px 12px;font-size:0.8rem}
  .ai-btn .ai-label,.ai-btn .ai-kbd{display:none}
  .ai-btn .ai-short{display:inline}
  #theme-label,.user-pill .user-name,.user-pill .user-role,.tb-badge{display:none}
  .topbar-right{gap:8px}
  .sidebar,.app.ai-open .sidebar{position:fixed;top:52px;left:0;bottom:0;width:min(320px,86vw);z-index:90;transform:translateX(-102%);transition:transform 0.2s;box-shadow:none;align-items:stretch;padding:16px 0}
  .app.nav-open .sidebar{transform:none;box-shadow:6px 0 24px rgba(0,0,0,0.45)}
  .nav-backdrop{position:fixed;top:52px;left:0;right:0;bottom:0;z-index:85;background:rgba(0,0,0,0.5)}
  .app.nav-open .nav-backdrop{display:block}
  .page{padding:12px}
  .kpi-grid{grid-template-columns:repeat(2,1fr) !important}
  .form-input{max-width:100%}
}
@media (max-width:480px){
  .kpi-grid{grid-template-columns:1fr !important}
  .page-title{font-size:1.25rem}
}

/* ── Connector settings: titled groups, label-left / field-right grid, fixed save bar (SPEC-18 §4.3) ── */
.cfg-group-title{display:flex;align-items:center;gap:8px;margin:22px 0 14px;padding-top:16px;border-top:1px solid var(--border);font-size:0.97rem;font-weight:600;color:var(--white)}
.cfg-group-title .ico{color:var(--accent);flex-shrink:0}
.cfg-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;position:sticky;bottom:0;z-index:5;background:var(--surface);border-top:1px solid var(--border);border-radius:0 0 10px 10px;margin:16px -16px -16px;padding:12px 16px}
.card:has(.cfg-actions){overflow:visible}
@media (min-width:901px){
  .page:has(.conn-header) .card-body form > div:has(> .form-label):has(> .form-input, > select, > textarea, > div),
  .page:has(.conn-header) .card-body form > div[x-show] > div:has(> .form-label):has(> .form-input, > select, > textarea, > div){display:grid;grid-template-columns:230px minmax(0,1fr);column-gap:20px;align-items:start}
  .page:has(.conn-header) .card-body form > div:has(> .form-label) > .form-label,
  .page:has(.conn-header) .card-body form > div[x-show] > div:has(> .form-label) > .form-label{grid-column:1;grid-row:1 / span 6;padding-top:8px;margin:0}
  .page:has(.conn-header) .card-body form > div:has(> .form-label) > :not(.form-label),
  .page:has(.conn-header) .card-body form > div[x-show] > div:has(> .form-label) > :not(.form-label){grid-column:2}
}

/* ── Collapsed menu: a 60 px rail with one icon per section (also used while the AI panel is open) ── */
.nav-sec-ico,.nav-collapse .nc-r{display:none}
.nav-collapse[data-rail="1"] .nc-l{display:none}
.nav-collapse[data-rail="1"] .nc-r{display:inline}
.nav-collapse{align-self:flex-end;margin:0 12px 4px;background:none;border:1px solid var(--border);border-radius:6px;color:var(--muted2);cursor:pointer;font-size:0.9rem;line-height:1;padding:3px 9px}
.nav-collapse:hover{color:var(--text);border-color:var(--accent)}
@media (min-width:901px){
  .app.nav-collapsed{grid-template-columns:60px 1fr}
  .app.ai-open{grid-template-columns:60px var(--ai-w,440px) 1fr}
  .app.ai-open.nav-wide{grid-template-columns:312px var(--ai-w,440px) 1fr}
  :is(.app.nav-collapsed,.app.ai-open):not(.nav-wide) .sidebar{padding:10px 0;align-items:center;overflow-x:hidden}
  :is(.app.nav-collapsed,.app.ai-open):not(.nav-wide) .sidebar .nav-collapse{align-self:center;margin:0 0 6px}
  :is(.app.nav-collapsed,.app.ai-open):not(.nav-wide) .sidebar :is(.nav-search,.sidebar-footer,.nav-group,.nav-chevron,.nav-badge,.nav-label,#ir-nav-extra,#ir-nav-none){display:none !important}
  :is(.app.nav-collapsed,.app.ai-open):not(.nav-wide) .sidebar .nav-section>span:not(.nav-sec-ico){display:none}
  :is(.app.nav-collapsed,.app.ai-open):not(.nav-wide) .sidebar .nav-section.sub{display:none}
  :is(.app.nav-collapsed,.app.ai-open):not(.nav-wide) .sidebar .nav-section .nav-sec-ico{display:flex}
  :is(.app.nav-collapsed,.app.ai-open):not(.nav-wide) .sidebar :is(.nav-section[data-section]:not(.sub),a.nav-item[href="/"]){font-size:0;width:44px;height:40px;min-height:0;padding:0;margin:1px 0;justify-content:center;align-items:center;gap:0;border-radius:8px;flex:none}
  :is(.app.nav-collapsed,.app.ai-open):not(.nav-wide) .sidebar .nav-section[data-section]:not(.sub):has(+ .nav-group .nav-item.active){background:var(--surface2)}
  :is(.app.nav-collapsed,.app.ai-open):not(.nav-wide) .sidebar .nav-section[data-section]:not(.sub)::before{display:none}
}

/* ══ SPEC-18 §0 — bleu nuit, une seule police, menu et en-têtes comme la maquette ══ */
[style*="JetBrains"]:not(.mono):not(code):not(pre):not(.log-line){font-family:var(--font-text) !important}
input,select,textarea,button{font-family:var(--font-text)}
.topbar,.sidebar{background-color:var(--nav-bg)}
.sidebar{background-image:none;border-right:1px solid var(--border)}
.topbar::after{opacity:0.35}

/* logo of the top bar */
.brand{min-width:0;gap:8px;font-family:var(--font-text)}
.brand img{display:block;height:34px;width:auto}
.brand .brand-text{height:24px}
/* SPEC-25 bis: « Infra » is dark green #185028 — on the dark theme it needs lifting to reach 3:1 against the navy background (1.7 → 3.6:1), on the light theme it is shown as drawn (8.6:1) */
:root:not([data-theme="light"]) .brand .brand-text{filter:brightness(1.7) saturate(1.1)}

/* breadcrumb: plain links, current page in white */
.breadcrumb{background:none;border:0;border-radius:0;padding:0;box-shadow:none;width:auto;font-size:0.95rem;color:var(--text2)}
.breadcrumb a{color:var(--accent);font-weight:400;text-decoration:none}
.breadcrumb a:hover{color:var(--accent);text-decoration:underline}
.breadcrumb .sep{color:var(--muted2);margin:0 8px}
.breadcrumb .current{background:none;border:0;padding:0;color:var(--white);font-weight:600}

/* menu: coloured icon + white label + chevron, grey bullets for the pages, blue pill for the open section and the current page */
.sidebar .nav-section[data-section]:not(.sub){color:var(--white);font-weight:600;font-size:0.97rem;padding:9px 12px;margin:2px 8px 0;border-radius:8px;gap:12px;justify-content:flex-start}
.sidebar .nav-section[data-section]::before{display:none}
.sidebar .nav-section[data-section]:not(.sub) .nav-sec-ico{display:flex;order:-1;color:var(--section-color);flex-shrink:0}
.sidebar .nav-section[data-section]>span:first-of-type{flex:1;text-align:left}
.sidebar .nav-section .nav-chevron{color:var(--muted2);font-weight:400;font-size:1.15rem;transform:none;width:auto}
.sidebar .nav-section[aria-expanded="true"] .nav-chevron{transform:rotate(90deg)}
.sidebar .nav-section[data-section]:not(.sub):hover{filter:none;background:var(--surface2)}
.sidebar .nav-section[data-section]:not(.sub)[aria-expanded="true"]{background:var(--nav-active)}
.sidebar .nav-section.sub{color:var(--text2);font-weight:500;padding:6px 12px 4px 36px}
.sidebar .nav-item{color:var(--text2);font-weight:400;margin:1px 8px;border-radius:8px;border-left:0;box-shadow:none}
.sidebar .nav-item.active{background:var(--nav-active);color:var(--white);font-weight:500}
.sidebar .nav-item:hover{background:var(--surface2);color:var(--white)}
.sidebar .nav-item.active:hover{background:var(--nav-active)}
.sidebar .nav-group>.nav-item{padding-left:34px}
.sidebar .nav-group>.nav-item:not(:has(.nav-logo-chip)) .nav-icon{display:none}
.sidebar .nav-group>.nav-item:not(:has(.nav-logo-chip))::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--muted);flex-shrink:0;margin-right:2px}
.sidebar .nav-group>.nav-item.active:not(:has(.nav-logo-chip))::before{background:var(--white)}
.sidebar .nav-group .nav-group>.nav-item{padding-left:48px}

/* connector header: one card with the logo, the name and the line of description */
.page-sub{font-family:var(--font-text)}
.conn-header{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px 22px}
.conn-header .page-title{font-size:1.5rem;font-weight:600}
.conn-header .page-sub{font-size:0.97rem;margin-top:4px;color:var(--text2)}

/* status card of the connectors (last synchronisation) */
.sync-card{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 20px;margin-top:10px;cursor:pointer}
.sync-card:hover{border-color:var(--accent)}
.sync-ico{flex-shrink:0;display:flex}
.sync-main{flex:1;min-width:240px}
.sync-title{font-size:1rem;font-weight:600}
.sync-state{font-weight:400;opacity:.9;margin-left:4px}
.sync-dur{color:var(--muted2);font-weight:400;margin-left:10px}
.sync-sub{font-size:0.95rem;color:var(--text2);margin-top:3px}
.sync-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.sync-btn{display:inline-flex;align-items:center;gap:8px;font-size:0.95rem;color:var(--accent);background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:6px 14px;text-decoration:none;white-space:nowrap}
.sync-btn:hover{border-color:var(--accent)}
.sync-counts{display:flex;gap:18px;color:var(--text2);font-size:0.95rem;align-self:center;margin-left:auto}
.sync-counts strong{color:var(--white);margin-left:4px}

/* one column: the reference cards that sat in a right column come below the form */
.page:has(.conn-header) div[style*="grid-template-columns:1fr 340px"]{display:block !important}
.page:has(.conn-header) div[style*="grid-template-columns:1fr 340px"]>div+div{margin-top:20px}
.page:has(.conn-header) div[style*="grid-template-columns:1fr 340px"]>div:empty{display:none}
[id$="-log-panel"]:empty,[id$="-status"]:empty{display:none !important}
.page:has(.conn-header) [id$="-status"]{margin-bottom:12px !important}

/* key figure card with an icon on its left (connector pages) */
.kpi:has(.kpi-lead){display:flex;align-items:center;gap:14px}
.kpi .kpi-lead{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:10px;background:var(--surface2);color:var(--kpi-color,var(--accent));flex-shrink:0}
.kpi:has(.kpi-lead) .kpi-value{font-size:1.6rem;font-family:var(--font-text);margin:2px 0 0}
.kpi:has(.kpi-lead) .kpi-label{font-size:0.95rem}

.field-hint{font-size:0.9rem;color:var(--muted2);margin-top:6px}
.field-opt{color:var(--muted2);font-weight:400}
[data-theme="light"] .breadcrumb .current{background:none;border:0}

/* UI-13: a menu title never wraps, whatever the fonts of the machine (a long one is cut with an ellipsis rather than pushed on two lines) */
.sidebar .nav-section[data-section]>span:first-of-type{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sidebar .nav-section[data-section]:not(.sub){gap:10px}

/* UI-15: the old accent bar of an active menu item is positioned outside the frame (left:-8px); only the round bullet of the sub-menu items remains, in the flow like the other bullets */
.sidebar .nav-item.active::before{display:none}
.sidebar .nav-group>.nav-item.active:not(:has(.nav-logo-chip))::before{display:block;position:static;transform:none;left:auto;top:auto;width:6px;height:6px;border-radius:50%}
.login-logo img{filter:none}
[data-theme="dark"] .login-logo img{filter:brightness(1.7)}