/* ══════════════════════════════════════════════════════════════
   components.css — Extracted from inline template styles
   ══════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   ░░ EDITORIAL MINIMAL — "Slate & Cobalt" Override layer ░░
   ────────────────────────────────────────────────────────────────
   Loaded AFTER output.css (Tailwind compiled).
   Hosting O2Switch shared = no Node = no Tailwind rebuild possible,
   so design-token migration lives here until the next build.
   The same tokens exist in input.css for the next rebuild source-of-truth.

   Hierarchie cobalt (anti-monochromie) :
   - --cobalt-500 → ACTIONS (boutons primaires, sidebar active, links)
   - --cobalt-700 → LABELS / headings emphasis (section-label, h4 panel)
   - --cobalt-50  → BG SUBTILS (hover, selected card, drop-zones)
   - --accent2 cyan #0C8599 → SECONDARY actions / info (conserve, evite la mono)
   - --slate-*   → SURFACES de chrome (sidebar, separators)
   - --warm-*    → ALIAS retro-compat → cobalt (pour ne rien casser sur composants pas remappes)
   ════════════════════════════════════════════════════════════════ */

:root {
  /* ── Slate neutrals (cool, distinct, tech-modern) ── */
  --slate-50:  #F4F6FA;
  --slate-100: #E8ECF1;
  --slate-200: #DBE2EB;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;

  /* ── Surfaces (cool slate baseline) ── */
  --bg: #F4F6FA;          /* slate-50 page bg */
  --surface: #FFFFFF;     /* card surface (inchange) */
  --surface2: #F8FAFC;    /* cool off-white alt rows */
  --surface-elevated: #FFFFFF;
  --sidebar-bg: #E8ECF1;  /* slate-100 — DISTINCT pour ancrage visuel */
  --border: #E2E8F0;      /* slate-200 separator */
  --border2: #CBD5E1;     /* slate-300 stronger */

  /* ── Brand & accents ── */
  --navy: #1E293B;        /* slate-800 — headings/nav dark */
  --accent: #3B5BDB;      /* primary cool — links, data, charts (= cobalt-500) */
  --accent-bg: #EEF2FF;
  --accent2: #0C8599;     /* secondary cool — info, tags secondaires (CONSERVE pour eviter monochromie) */
  --accent2-bg: #E3FAFC;

  /* ── Cobalt scale (NEW principal accent) ──
     Note : --cobalt-500 = --accent (memes valeur, source of truth = --accent).
     Si tu modifies l'un, modifie l'autre pour rester sync. */
  --cobalt-50:  #EFF2FE;
  --cobalt-100: #DBE2FB;
  --cobalt-200: #B7C4F7;
  --cobalt-300: #8AA1F0;
  --cobalt-400: #5C7BE8;
  --cobalt-500: #3B5BDB;  /* alias: = --accent */
  --cobalt-600: #2E48B5;
  --cobalt-700: #243A93;
  --cobalt-800: #1B2C71;

  /* ── Warm scale (RETRO-COMPAT alias only — pivot away from terracotta)
     Tous les composants pas encore remappes en --cobalt-* heriteront du cobalt
     via ces alias. Une fois Phase B complete, on pourra supprimer ces alias.   */
  --warm-50:  var(--cobalt-50);
  --warm-100: var(--cobalt-100);
  --warm-200: var(--cobalt-200);
  --warm-300: var(--cobalt-300);
  --warm-400: var(--cobalt-400);
  --warm-500: var(--cobalt-500);
  --warm-600: var(--cobalt-600);
  --warm-700: var(--cobalt-700);
  --warm-bg: var(--cobalt-50);
  --warm-border: rgba(59,91,219,0.20);
  --warm: var(--cobalt-500);
  --gold: #2E48B5;        /* legacy alias */

  /* ── Text (cool slate dark) ── */
  --text: #1E293B;        /* slate-800 */
  --text2: #475569;       /* slate-600 */
  --muted: #64748B;       /* slate-500 */

  /* ── Editorial radii ── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* ── Tinted shadows (cobalt-tinted — replaces warm-tinted) ── */
  --shadow-xs: 0 1px 2px rgba(15,23,42,0.04);
  --shadow-sm: 0 2px 6px rgba(15,23,42,0.06);
  --shadow-md: 0 4px 12px rgba(15,23,42,0.08), 0 0 0 1px rgba(15,23,42,0.03);
  --shadow-lg: 0 12px 32px rgba(15,23,42,0.10);
  --shadow-cobalt: 0 8px 24px rgba(59,91,219,0.14);
  --shadow-cobalt-sm: 0 2px 8px rgba(59,91,219,0.10);
  /* Retro-compat aliases (point at cobalt) */
  --shadow-warm: var(--shadow-cobalt);
  --shadow-warm-sm: var(--shadow-cobalt-sm);

  /* ── Chart palette cool-led ── */
  --chart-grid: #E2E8F0;       /* slate-200 */
  --chart-label: #64748B;      /* slate-500 */
  --chart-legend: #64748B;
  --cobalt-glow: rgba(59,91,219,0.18);
  --warm-glow: var(--cobalt-glow);
  --gradient-cobalt: linear-gradient(135deg, #3B5BDB, #2E48B5);
  --gradient-cobalt-soft: linear-gradient(135deg, #EFF2FE, #DBE2FB);
  --gradient-warm: var(--gradient-cobalt);
  --gradient-warm-soft: var(--gradient-cobalt-soft);
  --gradient-page: radial-gradient(ellipse at 0% 0%, rgba(59,91,219,0.05), transparent 50%),
                   radial-gradient(ellipse at 100% 100%, rgba(12,133,153,0.03), transparent 50%);
  --chart-3: #06B6D4;          /* cyan (was warm orange) — cool palette */
  --chart-tooltip-bg: #FFFFFF;
  --chart-tooltip-border: #E2E8F0;

  /* ── Motion ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.15s;
  --duration-base: 0.25s;
  --duration-slow: 0.4s;

  /* ── Layout spacing ── */
  --space-section: 2.5rem;
  --space-card: 1.5rem;
}

body.dark {
  /* Slate dark — cool deep, not warm brown */
  --slate-50:  #1E293B;
  --slate-100: #1A2333;
  --slate-200: #243049;
  --slate-300: #334155;
  --slate-400: #475569;
  --slate-500: #64748B;
  --slate-600: #94A3B8;
  --slate-700: #CBD5E1;
  --slate-800: #DBE2EB;
  --slate-900: #E8ECF1;

  --bg: #0F172A;          /* slate-900 dark page bg */
  --surface: #1E293B;     /* slate-800 card surface */
  --surface2: #243049;    /* slate-700/2 alt rows */
  --surface-elevated: #1A2333;
  --sidebar-bg: #1A2333;  /* slightly darker than surface for separation */
  --border: #334155;
  --border2: #475569;

  --navy: #DBE2EB;        /* light slate for headings */
  --accent: #7C9EF8;      /* cobalt-400 dark = lighter for contrast */
  --accent-bg: #1E2D5C;
  --accent2: #4DB8CC;
  --accent2-bg: #0D2A31;

  /* Cobalt scale dark (lighter values for dark contrast) */
  --cobalt-50:  #1E2D5C;
  --cobalt-100: #2A3E7B;
  --cobalt-200: #3D549C;
  --cobalt-300: #5C7BE8;
  --cobalt-400: #7C9EF8;
  --cobalt-500: #7C9EF8;  /* alias = --accent dark */
  --cobalt-600: #A6BDFB;
  --cobalt-700: #C8D6FD;
  --cobalt-800: #E1EAFE;

  /* Retro-compat aliases (warm → cobalt dark) */
  --warm-50:  var(--cobalt-50);
  --warm-100: var(--cobalt-100);
  --warm-200: var(--cobalt-200);
  --warm-300: var(--cobalt-300);
  --warm-400: var(--cobalt-400);
  --warm-500: var(--cobalt-500);
  --warm-600: var(--cobalt-600);
  --warm-700: var(--cobalt-700);
  --warm-bg: var(--cobalt-50);
  --warm-border: rgba(124,158,248,0.25);
  --warm: var(--cobalt-500);
  --gold: #5C7BE8;

  --text: #E2E8F0;
  --text2: #CBD5E1;
  --muted: #94A3B8;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.35);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.5);
  --shadow-cobalt: 0 8px 24px rgba(124,158,248,0.22);
  --shadow-cobalt-sm: 0 2px 8px rgba(124,158,248,0.18);
  --shadow-warm: var(--shadow-cobalt);
  --shadow-warm-sm: var(--shadow-cobalt-sm);

  --chart-grid: #334155;
  --chart-label: #94A3B8;
  --chart-legend: #94A3B8;
  --cobalt-glow: rgba(124,158,248,0.22);
  --warm-glow: var(--cobalt-glow);
  --gradient-cobalt: linear-gradient(135deg, #7C9EF8, #5C7BE8);
  --gradient-cobalt-soft: linear-gradient(135deg, #1E2D5C, #2A3E7B);
  --gradient-warm: var(--gradient-cobalt);
  --gradient-warm-soft: var(--gradient-cobalt-soft);
  --gradient-page: radial-gradient(ellipse at 0% 0%, rgba(124,158,248,0.07), transparent 50%),
                   radial-gradient(ellipse at 100% 100%, rgba(77,184,204,0.05), transparent 50%);
  --chart-3: #22D3EE;     /* cyan dark variant */
  --chart-tooltip-bg: #1E293B;
  --chart-tooltip-border: #334155;
}

/* ── Fraunces font (Editorial serif for titles & KPI numbers) ── */
@font-face {
  font-family: 'Fraunces';
  src: url('https://fonts.gstatic.com/s/fraunces/v37/6NUh8FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ── Body warming: subtle radial gradient backdrop ── */
body {
  background: var(--bg);
  background-image: var(--gradient-page);
  background-attachment: fixed;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Editorial typography utilities ── */
.font-serif { font-family: 'Fraunces', Georgia, serif; }

.page-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
}
.page-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text2);
  margin-top: 0.25rem;
}
.section-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--text);
}
.kpi-number {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.kpi-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Editorial Card system (overrides .card from output.css) ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}
.card-interactive { cursor: pointer; }
.card-interactive:hover {
  border-color: var(--cobalt-200);
  box-shadow: var(--shadow-cobalt-sm);
  transform: translateY(-2px);
}
.card-warm {
  border-top: 3px solid var(--cobalt-500);
  background: linear-gradient(180deg, var(--cobalt-50), var(--surface) 60%);
}
.card-accent {
  border-top: 3px solid var(--accent);
  background: linear-gradient(180deg, var(--accent-bg), var(--surface) 60%);
}
.card-success {
  border-top: 3px solid var(--success);
  background: linear-gradient(180deg, var(--success-bg), var(--surface) 60%);
}

/* ── Editorial Buttons (overrides .btn-* from output.css) ── */
.btn {
  border-radius: var(--radius-md);
  padding: 0.45rem 0.95rem;
  gap: 0.4rem;
  letter-spacing: -0.005em;
  transition: all var(--duration-base) var(--ease-out);
}
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 1px 3px rgba(59,91,219,0.25); }
.btn-primary:hover:not(:disabled) { background: #3451c7; transform: translateY(-1px); box-shadow: 0 6px 16px var(--accent-glow); }
.btn-warm {
  background: var(--cobalt-500);
  color: #fff;
  border: none;
  box-shadow: var(--shadow-cobalt-sm);
  border-radius: var(--radius-md);
}
.btn-warm:hover:not(:disabled) {
  background: var(--cobalt-600);
  transform: translateY(-1px);
  box-shadow: var(--shadow-cobalt);
}
.btn-ghost { background: transparent; color: var(--text2); border: 1px solid var(--border); }
.btn-ghost:hover:not(:disabled) {
  border-color: var(--cobalt-500);
  background: var(--cobalt-50);
  color: var(--text);
  transform: translateY(-1px);
}

/* ── Form inputs warm focus ── */
.form-input {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.85rem;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.form-input:hover:not(:focus) { border-color: var(--border2); }
.form-input:focus { border-color: var(--cobalt-400); box-shadow: 0 0 0 3px var(--cobalt-glow); background: var(--surface); }

/* ── Section labels warm by default ── */
.section-label {
  color: var(--cobalt-600);
}
.section-label::after {
  background: linear-gradient(90deg, var(--cobalt-200), transparent);
}
.section-label-cool { color: var(--accent); }
.section-label-cool::after { background: linear-gradient(90deg, var(--border2), transparent); }

/* ── Tags ── */
.tag-warm {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-sm);
  font-size: 0.68rem;
  font-weight: 600;
  font-family: 'Space Mono', monospace;
  letter-spacing: 0.02em;
  background: var(--cobalt-50);
  color: var(--cobalt-600);
  border: 1px solid var(--cobalt-100);
}

/* ── Badges (badge-warm variant) ── */
.badge-warm {
  background: var(--cobalt-50);
  color: var(--cobalt-600);
  border: 1px solid var(--cobalt-100);
}

/* ── Empty state — editorial warm version ── */
.empty-state {
  text-align: center;
  padding: var(--space-7, 2rem) 0;
  color: var(--muted);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 0.95rem;
  font-weight: 400;
}
.empty-state .empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--cobalt-50);
  color: var(--cobalt-500);
  margin-bottom: 0.75rem;
}
.empty-state .empty-icon svg { width: 22px; height: 22px; }

/* ── Accessibility — warm focus ring ── */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--cobalt-400);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Stat card warm modifier (base + :hover consolides en L1475 — P1d) ── */
.stat-card-warm {
  border-top: 3px solid var(--cobalt-500) !important;
}
.stat-card-warm .stat-num,
.stat-card-warm .kpi-number {
  color: var(--cobalt-600);
}

/* ── Pipeline badge warm variant ── */
.pipeline-badge.warm {
  background: var(--cobalt-50);
  color: var(--cobalt-600);
}

/* ── Sidebar — Slate & Cobalt (BUG FIX : was --surface = #FFFFFF identical to content) ── */
.app-sidebar {
  background: var(--sidebar-bg);          /* slate-100 distinct */
  border-right: 1px solid var(--slate-200);
}
.app-sidebar-label {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
}
.app-sidebar-item {
  border-radius: var(--radius-md);
  transition: all var(--duration-base) var(--ease-out);
  color: var(--slate-600);
}
.app-sidebar-item:hover {
  background: rgba(255,255,255,0.7);     /* surface highlight on slate-100 base */
  color: var(--text);
  transform: translateX(2px);
}
.app-sidebar-item:hover svg {
  color: var(--cobalt-500);
  opacity: 1;
}
.app-sidebar-item.active {
  background: var(--cobalt-50);
  color: var(--cobalt-700);
  font-weight: 600;
  border-left: 3px solid var(--cobalt-500);
  padding-left: calc(0.75rem - 3px);
  box-shadow: inset 0 0 12px rgba(59,91,219,0.10);
}
.app-sidebar-item.active svg {
  color: var(--cobalt-600);
  opacity: 1;
}
body.dark .app-sidebar-item:hover {
  background: rgba(255,255,255,0.05);
}
body.dark .app-sidebar-item.active {
  color: var(--cobalt-800);                  /* dark = #E1EAFE, near-white for AA contrast */
  background: rgba(124,158,248,0.16);        /* plus opaque pour distinction visuelle */
}
body.dark .app-sidebar-item.active svg {
  color: var(--cobalt-700);                  /* dark = #C8D6FD, reste lisible sur bg */
  opacity: 1;
}
.app-sidebar-sep {
  background: linear-gradient(90deg, transparent, var(--slate-300), transparent);
}
.app-sidebar-status .app-sidebar-dot.loading {
  background: var(--cobalt-500);
}
.app-sidebar-avatar {
  background: var(--cobalt-100) !important;
  color: var(--cobalt-700) !important;
}
body.dark .app-sidebar-avatar {
  background: rgba(124,158,248,0.20) !important;
  color: var(--cobalt-600) !important;
}

/* ── Tab pill (used in system.html, operations.html) — warm active ── */
.tab-pill,
.pipeline-badge {
  transition: all var(--duration-base) var(--ease-out);
}
.tab-pill.active,
.pipeline-badge.active {
  background: var(--cobalt-500);
  color: #fff;
  box-shadow: var(--shadow-cobalt-sm);
}

/* ── Page header utility (used by .page-title pages) ── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.5rem 0 1.25rem;
  margin-bottom: var(--space-section, 2rem);
  border-bottom: 1px solid var(--border);
}
.page-header-text { flex: 1; min-width: 0; }
.page-header-actions { display: flex; gap: 0.5rem; align-items: center; }

/* ── Subtle decorative top border for major content sections ── */
.section-warm-bar {
  height: 3px;
  background: linear-gradient(90deg, var(--cobalt-500), var(--cobalt-300), transparent);
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
}

/* ── Tabs canonique (P1c + P1e) — Editorial pill nav.
   Remplace les dialectes .sys-tabs, .tab-bar, .analytics-tabs supprimes. ── */
.tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
  padding-bottom: 0;
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.1rem;
  font-size: 0.82rem;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.005em;
  color: var(--text2);
  background: transparent;
  border: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  cursor: pointer;
  position: relative;
  transition: all var(--duration-base) var(--ease-out);
}
.tab:hover {
  color: var(--cobalt-700);
  background: var(--cobalt-50);
}
.tab.active {
  color: var(--cobalt-700);
  font-weight: 600;
  background: var(--surface);
}
.tab.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--cobalt-500);
  border-radius: 2px 2px 0 0;
}

/* ── KPI row unifie (P1b) — remplace stats-row, tracking-stats-row,
   agents-kpi-row, analytics-kpi-row. Variants via modifiers.
   Les 4 anciennes classes restent comme aliases jusqu'a P1e (cleanup). ── */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3, 0.75rem);
  margin-bottom: var(--space-5, 1.25rem);
}
.kpi-row--4 { grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.kpi-row--5 { grid-template-columns: repeat(5, 1fr); gap: 0.85rem; margin-bottom: 1.5rem; }
.kpi-row--7 { grid-template-columns: repeat(7, 1fr); gap: 0.5rem; margin-bottom: 0.75rem; }
.kpi-row--flex { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem; }
@media (max-width: 1280px) {
  .kpi-row--7 { grid-template-columns: repeat(4, 1fr); }
  .kpi-row--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .kpi-row--4 { grid-template-columns: 1fr 1fr; }
  .kpi-row--5 { grid-template-columns: 1fr 1fr; }
  .kpi-row--7 { grid-template-columns: repeat(2, 1fr); }
  .kpi-row--flex { flex-direction: column; }
}
/* Staggered animation pour les stat-cards enfants */
.kpi-row .stat-card:nth-child(1) { animation: fadeSlideUp 0.4s ease both; }
.kpi-row .stat-card:nth-child(2) { animation: fadeSlideUp 0.4s ease 0.06s both; }
.kpi-row .stat-card:nth-child(3) { animation: fadeSlideUp 0.4s ease 0.12s both; }
.kpi-row .stat-card:nth-child(4) { animation: fadeSlideUp 0.4s ease 0.18s both; }
.kpi-row .stat-card:nth-child(5) { animation: fadeSlideUp 0.4s ease 0.24s both; }
.kpi-row .stat-card:nth-child(6) { animation: fadeSlideUp 0.4s ease 0.30s both; }
.kpi-row .stat-card:nth-child(7) { animation: fadeSlideUp 0.4s ease 0.36s both; }

/* ── .agents-kpi-row supprimee P1e — .kpi-row.kpi-row--4 ── */

.agent-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 1024px) { .agent-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .agent-grid { grid-template-columns: 1fr; } }

.agent-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem;
  cursor: pointer;
  position: relative;
  transition: all var(--duration-base) var(--ease-out);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 140px;
}
.agent-card:hover {
  transform: translateY(-2px);
  border-color: var(--cobalt-300);
  box-shadow: var(--shadow-cobalt-sm);
}
.agent-card.selected {
  border-color: var(--cobalt-500);
  box-shadow: var(--shadow-cobalt);
  background: linear-gradient(180deg, var(--cobalt-50), var(--surface) 50%);
}
.agent-card-status-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.agent-card-status-bar.ok { background: var(--success); }
.agent-card-status-bar.warn { background: var(--cobalt-500); }
.agent-card-status-bar.error { background: var(--error); }
.agent-card-status-bar.idle { background: var(--border2); }
.agent-card-running .agent-card-status-bar {
  background: var(--gradient-warm);
  background-size: 200% 100%;
  animation: gradientShift 2s ease infinite;
}
/* agent-card-live : a session is active on the multi-agents bus for this role */
.agent-card-live {
  box-shadow: 0 0 0 1px var(--success, #16a34a), var(--shadow-sm);
}
.agent-card-live .agent-card-status-bar {
  background: var(--success, #16a34a);
  animation: pulse 1.8s ease-in-out infinite;
}

.agent-card-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.agent-card-title {
  display: flex; align-items: center; gap: 0.45rem;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--text);
  letter-spacing: -0.005em;
}
.agent-card-title .agent-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  background: var(--cobalt-50);
  color: var(--cobalt-600);
}
.agent-card-meta {
  display: flex; flex-direction: column; gap: 0.15rem;
  font-size: 0.7rem; color: var(--muted);
  font-family: 'Space Mono', monospace;
}
.agent-card-desc { font-size: 0.78rem; color: var(--text2); line-height: 1.4; }
.agent-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border);
}
.agent-card-footer .agent-status {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: 0.72rem; font-weight: 600;
}
.agent-card-footer .agent-status .dot {
  width: 7px; height: 7px; border-radius: 50%;
}
.agent-card-footer .agent-status .dot.ok { background: var(--success); }
.agent-card-footer .agent-status .dot.warn { background: var(--cobalt-500); }
.agent-card-footer .agent-status .dot.error { background: var(--error); }
.agent-card-footer .agent-status .dot.idle { background: var(--border2); }
.agent-card-footer .agent-card-cta {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.7rem; color: var(--cobalt-600); font-weight: 500;
  opacity: 0.6; transition: opacity var(--duration-base) var(--ease-out);
}
.agent-card:hover .agent-card-cta { opacity: 1; }

.agent-card-running-pill {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  background: var(--cobalt-50);
  color: var(--cobalt-700);
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 600;
  font-family: 'Space Mono', monospace;
}
.agent-card-running-pill .pulse-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cobalt-500);
  animation: pulse 1.2s ease infinite;
}

/* ── Side-panel (slide-in from right, persistent in DOM) ── */
.agent-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(31,27,22,0.35);
  backdrop-filter: blur(2px);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.agent-panel-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
body.dark .agent-panel-backdrop { background: rgba(0,0,0,0.55); }

.agent-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(720px, 96vw);
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 32px rgba(31,27,22,0.18);
  z-index: 999;
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.agent-panel.open {
  transform: translateX(0);
  pointer-events: auto;
}
@media (max-width: 768px) {
  .agent-panel { width: 100vw; }
}

.agent-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
  gap: 1rem;
}
.agent-panel-title-block { display: flex; align-items: center; gap: 0.75rem; flex: 1; min-width: 0; }
.agent-panel-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--radius-md);
  background: var(--cobalt-100);
  color: var(--cobalt-700);
  flex-shrink: 0;
}
.agent-panel-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  color: var(--text);
}
.agent-panel-subtitle {
  font-size: 0.75rem;
  color: var(--muted);
  font-family: 'Space Mono', monospace;
}
.agent-panel-close {
  background: transparent;
  border: 1px solid var(--border);
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text2);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--duration-fast) var(--ease-out);
  flex-shrink: 0;
}
.agent-panel-close:hover { border-color: var(--cobalt-500); color: var(--cobalt-600); background: var(--cobalt-50); }

.agent-panel-body { flex: 1; overflow-y: auto; padding: 1.5rem 1.75rem; }
.agent-panel-section { margin-bottom: 1.75rem; }
.agent-panel-section h4 {
  font-family: 'Space Mono', monospace;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cobalt-600);
  margin-bottom: 0.5rem;
  display: flex; align-items: center; gap: 0.4rem;
}
.agent-panel-section h4::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--cobalt-200), transparent);
}

.agent-panel-actions {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  background: var(--surface2);
}

.agent-panel-row {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.78rem;
}
.agent-panel-row:last-child { border-bottom: none; }
.agent-panel-row .row-dot {
  width: 7px; height: 7px; border-radius: 50%;
  flex-shrink: 0;
}
.agent-panel-row .row-time {
  margin-left: auto;
  font-family: 'Space Mono', monospace;
  font-size: 0.65rem;
  color: var(--muted);
  flex-shrink: 0;
}

.agent-panel-empty {
  text-align: center;
  padding: 1.5rem 0;
  color: var(--muted);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 0.9rem;
}

/* ════════════════════════════════════════════════════════════════
   ░░ END Editorial Warm Override layer ░░
   ════════════════════════════════════════════════════════════════ */

/* ── Layout utilities ────────────────────────────────────────── */
.flex-center        { display:flex; align-items:center; }
.flex-center-xs     { display:flex; align-items:center; gap:0.4rem; }
.flex-center-sm     { display:flex; align-items:center; gap:0.5rem; }
.flex-center-md     { display:flex; align-items:center; gap:0.75rem; }
.flex-center-lg     { display:flex; align-items:center; gap:1rem; }
.flex-between       { display:flex; align-items:center; justify-content:space-between; }
.flex-between-wrap  { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.75rem; }
.flex-between-start { display:flex; align-items:flex-start; justify-content:space-between; }
.flex-col           { display:flex; flex-direction:column; }
.flex-wrap          { flex-wrap:wrap; }
.grid-2             { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4, 1rem); }
.grid-3             { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-4, 1rem); }
@media (max-width: 768px) { .grid-2, .grid-3 { grid-template-columns:1fr; } }

/* ── Spacing ─────────────────────────────────────────────────── */
.mb-0  { margin-bottom:0; }
.mb-xs { margin-bottom:var(--space-2, 0.5rem); }
.mb-sm { margin-bottom:var(--space-3, 0.75rem); }
.mb-md { margin-bottom:var(--space-4, 1rem); }
.mb-lg { margin-bottom:var(--space-5, 1.25rem); }

/* ── Card padding ────────────────────────────────────────────── */
.card-pad    { padding:var(--space-5, 1.25rem); }
.card-pad-sm { padding:var(--space-3, 0.75rem); }

/* ── Text utilities ──────────────────────────────────────────── */
.text-right  { text-align:right; }
.text-center { text-align:center; }
.text-micro  { font-size:0.65rem; }
.text-xs     { font-size:0.72rem; }
.text-sm     { font-size:0.78rem; }
.text-base   { font-size:0.82rem; }
.text-lg     { font-size:1rem; }
.text-xl     { font-size:1.35rem; }
.font-mono   { font-family:'Space Mono',monospace; }
.font-normal { font-weight:400; }
.font-medium { font-weight:500; }
.font-semibold { font-weight:600; }
.font-bold   { font-weight:700; }
.color-muted   { color:var(--muted); }
.color-success { color:var(--success); }
.color-error   { color:var(--error); }
.color-warning { color:var(--warning); }
.color-accent  { color:var(--accent); }

/* ── Chart containers ────────────────────────────────────────── */
.chart-h-sm  { width:100%; min-height:200px; }
.chart-h-md  { width:100%; min-height:260px; }
.chart-h-lg  { width:100%; min-height:300px; }
.chart-container { opacity:0; transition:opacity 0.4s ease; }
.chart-container.loaded { opacity:1; }

/* ── Empty state ─────────────────────────────────────────────── */
.empty-state { text-align:center; padding:var(--space-7, 2rem) 0; color:var(--muted); font-size:0.82rem; }

/* ── Date input (period selectors) ─────────────────────────── */
.date-input {
  padding:0.3rem 0.5rem; border:1px solid var(--border); border-radius:6px;
  background:var(--bg-card); color:var(--text); font-size:0.78rem;
}

/* ── Action alert links ────────────────────────────────────── */
.action-link {
  display:inline-flex; align-items:center; gap:0.4rem;
  padding:0.5rem 0.85rem; border-radius:8px;
  font-size:0.78rem; font-weight:600; text-decoration:none;
  transition:background 0.15s;
}
.action-link-error   { background:rgba(239,68,68,0.08); color:var(--error); }
.action-link-error:hover { background:rgba(239,68,68,0.15); }
.action-link-warning { background:rgba(245,158,11,0.08); color:#f59e0b; }
.action-link-warning:hover { background:rgba(245,158,11,0.15); }
.action-link-purple  { background:rgba(139,92,246,0.08); color:#8b5cf6; }
.action-link-purple:hover { background:rgba(139,92,246,0.15); }

/* ── Toast exit ──────────────────────────────────────────────── */
.toast-exit { animation: slideOutRight 0.3s ease forwards; }

/* ── Login (login.html) ──────────────────────────────────────── */
.login-page {
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
  background: var(--bg);
}
.login-bg {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(59,91,219,0.15), transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(12,133,153,0.12), transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(124,158,248,0.08), transparent 60%),
    var(--bg);
  background-size: 200% 200%;
  animation: gradientShift 12s ease infinite;
}
body.dark .login-bg {
  background:
    radial-gradient(ellipse at 20% 80%, rgba(124,158,248,0.1), transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(77,184,204,0.08), transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(245,158,11,0.06), transparent 60%),
    var(--bg);
  background-size: 200% 200%;
  animation: gradientShift 12s ease infinite;
}
.login-box {
  background: rgba(255,255,255,0.75); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.4); border-radius: 20px;
  padding: 2.5rem 2.75rem; width: 100%; max-width: 400px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08); position: relative; z-index: 1;
  animation: fadeSlideUp 0.5s ease;
}
body.dark .login-box {
  background: rgba(26,29,46,0.75);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.login-logo { display:flex; align-items:center; gap:0.85rem; margin-bottom:2rem; }
.login-logo img { height:38px; border-radius:8px; }
.login-brand-name { font-size:1.1rem; font-weight:800; color:var(--navy); letter-spacing:0.08em; text-transform:uppercase; }
.login-logo-sub { font-size:0.72rem; font-weight:600; color:var(--muted); letter-spacing:0.04em; }
.login-sub { font-size:0.82rem; color:var(--muted); margin-bottom:1.75rem; }
.login-h1 { font-size:1.35rem; font-weight:700; color:var(--navy); margin-bottom:0.35rem; }
.login-label { display:block; font-family:'Space Mono',monospace; font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:0.4rem; }
.login-input {
  width:100%; background:rgba(255,255,255,0.5); border:1.5px solid var(--border2); border-radius:10px;
  color:var(--text); font-family:'Inter',sans-serif; font-size:0.95rem; padding:0.75rem 1rem;
  outline:none; transition:border-color 0.2s, box-shadow 0.2s, background 0.2s; margin-bottom:1.25rem;
}
body.dark .login-input { background: rgba(255,255,255,0.05); }
.login-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(59,91,219,0.12); background:rgba(255,255,255,0.7); }
body.dark .login-input:focus { background: rgba(255,255,255,0.08); }
.login-error { background:var(--error-bg); border:1px solid rgba(201,42,42,0.2); border-radius:8px; padding:0.6rem 0.85rem; color:var(--error); font-size:0.8rem; margin-bottom:1.25rem; }
.login-submit {
  width:100%; padding:0.8rem; background:var(--gradient-accent); color:#fff; border:none; border-radius:10px;
  font-family:'Inter',sans-serif; font-size:0.95rem; font-weight:600; cursor:pointer;
  transition:all 0.25s ease; box-shadow:0 4px 16px var(--accent-glow);
}
.login-submit:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(59,91,219,0.35); }
.login-submit:active { transform:translateY(0); }

@media (max-width: 480px) {
  .login-box { padding: 2rem 1.5rem; margin: 0 1rem; }
}

/* ── Dashboard (index.html) ──────────────────────────────────── */
/* Lucide step icons */
.step-icon-lucide { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(0,0,0,0.05); flex-shrink: 0; }
.step-icon-lucide svg { width: 14px; height: 14px; }

/* API MODE */
.api-section { padding: 1.5rem 0 1rem; }
.field-label { font-size: 0.62rem; font-family: 'Space Mono', monospace; color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; }

/* Pipeline visual */
.api-pipeline-visual { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 0 1.25rem; }
.api-pipe-step { display: flex; align-items: center; gap: 0.45rem; font-family: 'Space Mono', monospace; font-size: 0.72rem; color: var(--text2); font-weight: 600; letter-spacing: 0.03em; }
.api-pipe-icon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--accent-bg); color: var(--accent); flex-shrink: 0; }
.api-pipe-arrow { color: var(--border2); display: flex; align-items: center; }

/* Form card */
.api-form-card { padding: 0 !important; overflow: hidden; }
.api-form-grid { display: grid; grid-template-columns: 1fr 1fr; }
.api-form-block { padding: 1.5rem 1.75rem; display: flex; flex-direction: column; }
.api-form-oms { border-right: 1px solid var(--border); }
.api-block-header { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.75rem; }
.api-form-oms .select-client { margin-top: auto; }

.select-client {
  background: var(--surface2); border: 1.5px solid var(--border2); border-radius: 10px;
  color: var(--text); font-family: 'Inter', sans-serif; font-size: 0.93rem;
  padding: 0.78rem 2.2rem 0.78rem 1rem; outline: none; width: 100%; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  transition: border-color 0.2s, box-shadow 0.2s;
}
body.dark .select-client { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238088b0' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.select-client:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,91,219,0.1); }
.select-client:disabled { opacity: 0.5; cursor: not-allowed; }

.input-date {
  background: var(--surface2); border: 1.5px solid var(--border2); border-radius: 10px;
  color: var(--text); font-family: 'Inter', sans-serif; font-size: 0.93rem;
  padding: 0.78rem 1rem; outline: none; width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.input-date:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,91,219,0.1); }

/* Date row */
.api-date-row { display: flex; align-items: end; gap: 0.75rem; }
.api-date-field { flex: 1; }
.api-date-label { display: block; font-family: 'Space Mono', monospace; font-size: 0.58rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.35rem; font-weight: 600; }
.api-date-sep { display: flex; align-items: center; padding-bottom: 0.6rem; }

/* Footer bar */
.api-form-footer { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.75rem; background: var(--surface2); border-top: 1px solid var(--border); }
.api-gsheets-toggle { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; font-size: 0.72rem; font-family: 'Space Mono', monospace; color: var(--muted); white-space: nowrap; }
.btn-api-run {
  padding: 0.7rem 1.6rem; background: var(--gradient-accent); color: #fff; border: none; border-radius: 10px;
  font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 600;
  cursor: pointer; transition: all 0.25s ease; white-space: nowrap;
  box-shadow: 0 4px 16px var(--accent-glow); display: flex; align-items: center; gap: 0.5rem;
}
.btn-api-run:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(59,91,219,0.35); }
.btn-api-run:disabled { background: var(--border2); color: var(--muted); cursor: not-allowed; transform: none; box-shadow: none; }

.reseller-status { display: flex; align-items: center; gap: 0.4rem; font-family: 'Space Mono', monospace; font-size: 0.62rem; color: var(--muted); margin-top: 0.4rem; min-height: 16px; }
.reseller-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 1.2s infinite; flex-shrink: 0; }
.reseller-status.loaded .dot { background: var(--success); animation: none; visibility: hidden; }
.reseller-status.error  .dot { background: var(--error); animation: none; }

@media (max-width: 768px) {
  .api-form-grid { grid-template-columns: 1fr; }
  .api-form-oms { border-right: none; border-bottom: 1px solid var(--border); }
  .api-pipeline-visual { flex-wrap: wrap; }
  .api-date-row { flex-direction: column; }
  .api-date-sep { display: none; }
  .api-form-footer { flex-direction: column; gap: 0.75rem; }
}

/* RESULT */
#resultArea { margin-top: 1.25rem; display: none; animation: fadeIn 0.3s ease; }
#resultArea.visible { display: block; }
.result-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.06); animation: fadeSlideUp 0.4s ease; }
.result-card-bar { height: 4px; background: linear-gradient(90deg, var(--accent), var(--cobalt-500), var(--accent2)); background-size: 200% 100%; animation: gradientShift 4s ease infinite; }
.result-card-inner { padding: 1.75rem 2rem; }
.result-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.5rem; }
.result-title { font-size: 1.2rem; font-weight: 700; color: var(--text); }
.result-period { font-family: 'Space Mono', monospace; font-size: 0.68rem; color: var(--muted); margin-top: 0.3rem; }
.pipeline-badge { display: flex; align-items: center; gap: 0.4rem; font-family: 'Space Mono', monospace; font-size: 0.68rem; color: var(--accent); font-weight: 700; background: var(--accent-bg); padding: 0.3rem 0.7rem; border-radius: 6px; white-space: nowrap; }
.pipeline-badge.done { background: var(--success-bg); color: var(--success); }
.pipeline-badge.cancelled { background: rgba(239,68,68,0.1); color: var(--error); }
.pipeline-badge::before { content: ''; width: 6px; height: 6px; background: currentColor; border-radius: 50%; animation: pulse 1.5s infinite; }
.pipeline-badge.done::before, .pipeline-badge.cancelled::before { animation: none; }

/* PROGRESS BAR */
#progressBar { margin-bottom: 0.85rem; display: none; }
#progressBar.visible { display: block; }
.progress-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.progress-label { font-family: 'Space Mono', monospace; font-size: 0.62rem; color: var(--muted); }
.progress-track { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 2px; transition: width 0.4s ease; }

#stepsContainer { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.5rem; }
.step { display: flex; align-items: center; gap: 0.8rem; padding: 0.6rem 0.85rem; background: var(--surface2); border-radius: 8px; border: 1px solid var(--border); opacity: 0.45; transition: all 0.25s; }
.step.active { opacity: 1; border-color: rgba(59,91,219,0.25); background: var(--accent-bg); }
.step.done   { opacity: 1; border-color: rgba(47,158,68,0.2); background: var(--success-bg); }
.step-body { flex: 1; }
.step-label { font-size: 0.82rem; font-weight: 600; color: var(--text); }
.step-detail { font-size: 0.67rem; color: var(--muted); font-family: 'Space Mono', monospace; margin-top: 0.1rem; }
.step-status { font-family: 'Space Mono', monospace; font-size: 0.65rem; color: var(--muted); white-space: nowrap; }
.step.active .step-status { color: var(--accent); font-weight: 700; }
.step.done   .step-status { color: var(--success); font-weight: 700; }
.step-sub-bar { height: 3px; background: var(--border); border-radius: 2px; margin-top: 0.35rem; overflow: hidden; display: none; }
.step.active .step-sub-bar { display: block; }
.step-sub-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.3s; width: 0; }
.step-sub-bar.indeterminate .step-sub-fill { width: 40% !important; animation: indeterminate 1.4s ease-in-out infinite; }
@keyframes indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }
.step.skipped { opacity: 0.35; }
.step.skipped .step-status { color: var(--muted); font-style: italic; }
.ci-counter { font-family: 'Space Mono', monospace; font-weight: 700; color: var(--accent); }
.ci-counter.success { color: var(--success); }
.ci-counter.warning { color: var(--warning); }
.anc-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; }
.anc-badge { display: inline-flex; align-items: center; gap: 0.25rem; font-family: 'Space Mono', monospace; font-size: 0.6rem; padding: 0.15rem 0.45rem; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); background: transparent; transition: all 0.2s; }
.anc-badge.fetching { border-color: var(--accent); color: var(--accent); background: rgba(59,130,246,0.08); }
.anc-badge.done { border-color: var(--success); color: var(--success); background: rgba(47,158,68,0.08); }
.anc-badge.error { border-color: var(--warning); color: var(--warning); background: rgba(230,126,34,0.08); }
.anc-badge-spinner { display: inline-block; width: 8px; height: 8px; border: 1.5px solid var(--accent); border-top-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; }
.anc-badge-count { font-weight: 700; }
#statsRow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border-radius: 12px; overflow: hidden; opacity: 0; transition: opacity 0.4s; margin-bottom: 1.25rem; }
#statsRow.visible { opacity: 1; }
.stat-cell { background: var(--surface); padding: 1rem; text-align: center; }
.stat-num { font-size: 1.5rem; font-weight: 700; font-family: 'Space Mono', monospace; }
.stat-num.accent  { color: var(--accent); }
.stat-num.success { color: var(--success); }
.stat-num.warning { color: var(--warning); }
.stat-num.accent2 { color: var(--accent2); }
.stat-cell-label { font-size: 0.65rem; color: var(--muted); margin-top: 0.2rem; font-family: 'Space Mono', monospace; }
#chartArea { display: none; margin-bottom: 1.25rem; }
#chartArea.visible { display: grid; grid-template-columns: 1fr 180px; gap: 1.5rem; align-items: center; }
.chart-canvas-wrap { width: 160px; height: 160px; }
.chart-canvas-wrap canvas { width: 100%; height: 100%; }
.chart-legend { display: flex; flex-direction: column; gap: 0.5rem; }
.chart-legend-item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.82rem; }
.chart-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
#downloadCTA { padding: 1rem 1.25rem; background: var(--accent2-bg); border: 1px solid rgba(12,133,153,0.2); border-radius: 12px; display: none; align-items: center; justify-content: space-between; gap: 1rem; }
#downloadCTA.visible { display: flex; }
.download-info .file-label { font-size: 0.9rem; font-weight: 600; color: var(--text); }
.download-info .file-meta { font-family: 'Space Mono', monospace; font-size: 0.65rem; color: var(--muted); margin-top: 0.2rem; }
.btn-download { background: var(--accent2); color: #fff; padding: 0.65rem 1.4rem; border: none; border-radius: 8px; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.875rem; cursor: pointer; transition: all 0.2s; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; }
.btn-download:hover { background: #0a7080; transform: translateY(-1px); }

/* UPLOAD */
.upload-section { padding: 1rem 0 1.5rem; }
.upload-zone { border: 2px dashed var(--border2); border-radius: 14px; padding: 2.2rem 2rem; text-align: center; cursor: pointer; transition: all 0.22s ease; position: relative; background: var(--surface2); }
.upload-zone:hover, .upload-zone.drag-over { border-color: var(--accent); background: var(--accent-bg); transform: scale(1.01); box-shadow: 0 4px 16px var(--accent-glow); }
.upload-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.upload-icon { display: flex; justify-content: center; margin-bottom: 0.75rem; color: var(--muted); }
.upload-icon svg { width: 2rem; height: 2rem; }
.upload-title { font-size: 0.95rem; font-weight: 600; color: var(--text); margin-bottom: 0.35rem; }
.upload-sub { font-family: 'Space Mono', monospace; font-size: 0.65rem; color: var(--muted); }
.file-selected { margin-top: 0.85rem; padding: 0.7rem 1rem; background: var(--success-bg); border: 1px solid rgba(47,158,68,0.2); border-radius: 10px; display: none; align-items: center; gap: 0.65rem; }
.file-selected.visible { display: flex; }
.file-name { font-family: 'Space Mono', monospace; font-size: 0.75rem; color: var(--success); flex: 1; text-align: left; }
.btn-launch { margin-top: 1.1rem; width: 100%; padding: 0.88rem; background: var(--accent); color: #fff; border: none; border-radius: 10px; font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: all 0.2s; display: none; box-shadow: 0 2px 8px rgba(59,91,219,0.3); align-items: center; justify-content: center; gap: 0.5rem; }
.btn-launch.visible { display: flex; }
.btn-launch:hover { background: #3451c7; transform: translateY(-1px); }
.btn-launch:disabled { background: var(--border2); color: var(--muted); cursor: not-allowed; transform: none; box-shadow: none; }
.btn-cancel-pipeline { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1.2rem; background: var(--error-bg); color: var(--error); border: 1px solid rgba(201,42,42,0.25); border-radius: 10px; font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-cancel-pipeline:hover { background: var(--error); color: #fff; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(201,42,42,0.3); }
.error-inline { margin-top: 0.85rem; padding: 0.8rem 1rem; background: var(--error-bg); border: 1px solid rgba(201,42,42,0.2); border-radius: 10px; color: var(--error); font-size: 0.83rem; display: none; }
.error-inline.visible { display: block; }

/* HISTORY */
.history-section { padding: 1rem 0 1.5rem; }
.history-scroll { max-height: 320px; overflow-y: auto; }
.history-scroll thead th { position: sticky; top: 0; z-index: 1; }
.history-toolbar { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.history-search { background: var(--surface); border: 1.5px solid var(--border2); border-radius: 8px; padding: 0.4rem 0.75rem; font-family: 'Inter', sans-serif; font-size: 0.82rem; color: var(--text); outline: none; transition: border-color 0.15s; flex: 1; min-width: 160px; }
.history-search:focus { border-color: var(--accent); }
.history-search::placeholder { color: var(--muted); }
.btn-export-csv { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--surface); border: 1.5px solid var(--border2); border-radius: 8px; padding: 0.4rem 0.85rem; font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 600; color: var(--text2); cursor: pointer; transition: all 0.15s; text-decoration: none; }
.btn-export-csv:hover { border-color: var(--accent2); color: var(--accent2); }
.history-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.history-table th { background: var(--surface2); padding: 0.6rem 0.85rem; text-align: left; font-family: 'Space Mono', monospace; font-size: 0.62rem; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid var(--border); font-weight: 700; cursor: pointer; user-select: none; white-space: nowrap; }
.history-table th:hover { color: var(--accent); }
.history-table td { padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.history-table tr:last-child td { border-bottom: none; }
.history-table tr:hover td { background: var(--accent-bg); transition: background 0.15s; }
.ht-oms { font-weight: 700; font-family: 'Space Mono', monospace; font-size: 0.78rem; color: var(--accent); }
.ht-dates { font-family: 'Space Mono', monospace; font-size: 0.72rem; color: var(--text2); }
.ht-source { font-size: 0.68rem; padding: 0.15rem 0.5rem; border-radius: 4px; font-family: 'Space Mono', monospace; }
.ht-source.api    { background: var(--accent-bg); color: var(--accent); }
.ht-source.manual { background: var(--accent2-bg); color: var(--accent2); }
.ht-total { font-weight: 700; font-family: 'Space Mono', monospace; font-size: 0.82rem; color: var(--success); }
.ht-review-badge { display: inline-block; background: var(--warning-bg); color: var(--warning); font-size: 0.65rem; padding: 0.1rem 0.4rem; border-radius: 4px; font-family: 'Space Mono', monospace; }

/* ── Permissions grid ────────────────────────────────────────── */
.perm-grid { display: grid; gap: 0; font-size: 0.82rem; }
.perm-header { font-family: 'Space Mono', monospace; font-size: 0.62rem; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); background: var(--surface2); }
.perm-group { font-weight: 700; font-size: 0.75rem; color: var(--accent); padding: 0.6rem 0.75rem 0.3rem; letter-spacing: 0.03em; }
.perm-cell { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); }
.perm-label { font-size: 0.82rem; }

/* ── On-time delivery matrix ────────────────────────────────── */
.on-time-matrix td { font-family: 'Space Mono', monospace; font-size: 0.78rem; }
.on-time-good { background: rgba(34, 197, 94, 0.12); color: #16a34a; }
.on-time-warn { background: rgba(245, 158, 11, 0.12); color: #d97706; }
.on-time-bad  { background: rgba(239, 68, 68, 0.12); color: #dc2626; }
.on-time-none { color: var(--muted); }
body.dark .on-time-good { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
body.dark .on-time-warn { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
body.dark .on-time-bad  { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.btn-dl-sm { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--accent2); color: #fff; padding: 0.3rem 0.7rem; border: none; border-radius: 6px; font-size: 0.72rem; font-family: 'Inter', sans-serif; font-weight: 600; text-decoration: none; transition: all 0.15s; cursor: pointer; }
.btn-dl-sm:hover { background: #0a7080; }
.btn-dl-sm svg { width: 12px; height: 12px; }
.btn-del-sm { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: transparent; border: 1.5px solid var(--border2); border-radius: 6px; color: var(--muted); cursor: pointer; transition: all 0.15s; flex-shrink: 0; }
.btn-del-sm:hover { background: var(--error-bg); border-color: rgba(201,42,42,0.3); color: var(--error); }
.btn-del-sm svg { width: 12px; height: 12px; }
.history-empty { padding: 2rem; text-align: center; color: var(--muted); font-family: 'Space Mono', monospace; font-size: 0.75rem; }

/* FOOTER */
footer { border-top: 1px solid var(--border); padding: 1.5rem 0; display: flex; align-items: center; justify-content: space-between; margin-top: 2rem; }
.footer-text    { font-family: 'Space Mono', monospace; font-size: 0.65rem; color: var(--muted); }
.footer-version { font-family: 'Space Mono', monospace; font-size: 0.65rem; color: var(--accent); opacity: 0.7; }

/* MODAL DIALOG */
dialog { border: none; border-radius: 16px; padding: 0; box-shadow: 0 20px 60px rgba(0,0,0,0.15); max-width: 480px; width: 90%; }
dialog::backdrop { background: rgba(0,0,0,0.35); backdrop-filter: blur(2px); }
.modal-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); background: var(--surface2); border-radius: 16px 16px 0 0; }
.modal-title { font-size: 0.95rem; font-weight: 700; color: var(--navy); }
.modal-body { padding: 1.25rem 1.5rem; }
.modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border); display: flex; gap: 0.75rem; justify-content: flex-end; background: var(--surface2); border-radius: 0 0 16px 16px; }
.modal-info { background: var(--warning-bg); border: 1px solid rgba(230,119,0,0.2); border-radius: 10px; padding: 0.85rem 1rem; font-size: 0.82rem; margin-bottom: 0.85rem; }
.modal-info p { margin-bottom: 0.3rem; color: var(--text2); }
.modal-info strong { color: var(--warning); font-family: 'Space Mono', monospace; font-size: 0.78rem; }
.modal-dl-link { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--accent2); font-size: 0.78rem; text-decoration: none; font-weight: 600; margin-top: 0.5rem; }
.modal-dl-link:hover { text-decoration: underline; }

/* DATE ERROR */
.date-error { font-family: 'Space Mono', monospace; font-size: 0.62rem; color: var(--error); margin-top: 0.3rem; display: none; }
.date-error.visible { display: block; }

/* TEMPLATE LINK */
.template-dl-row { display: flex; align-items: center; justify-content: flex-end; margin-top: 0.6rem; gap: 0.4rem; }
.template-dl-link { display: inline-flex; align-items: center; gap: 0.3rem; font-family: 'Space Mono', monospace; font-size: 0.65rem; color: var(--accent2); text-decoration: none; transition: color 0.15s; }
.template-dl-link:hover { color: #0a7080; }

/* DUPLICATE WARNING */
.dup-warning { background:var(--warning-bg); border:1px solid rgba(230,119,0,0.3); border-radius:8px; padding:0.6rem 1rem; font-size:0.8rem; color:var(--warning); display:flex; align-items:center; gap:0.5rem; margin-top:0.75rem; }

/* STAT CELL ICONS */
.stat-icon { color: var(--muted); margin-bottom: 0.25rem; display: flex; justify-content: center; }

/* INDEX-SPECIFIC CARD override */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 1.75rem 2rem; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }

/* CARRIER INVOICE */
.ci-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.25rem; }
.ci-slot {
  position: relative; border: 2px dashed var(--border2); border-radius: 14px; padding: 1.5rem 1.25rem;
  text-align: center; background: var(--surface2); transition: all 0.22s; cursor: pointer;
}
.ci-slot:hover { border-color: var(--accent); background: var(--accent-bg); }
.ci-slot.has-file { border-style: solid; }
.ci-slot.has-file.dhl { border-color: #ffcc00; background: rgba(255,204,0,0.06); }
.ci-slot.has-file.dpd { border-color: #dc0032; background: rgba(220,0,50,0.04); }
.ci-slot.has-file.chrono { border-color: #004a99; background: rgba(0,74,153,0.05); }
/* Brand colors pour icon + name — light + dark (les hex brand sont trop fonces pour le dark, on eclaircit) */
.ci-slot.chrono .ci-carrier-icon,
.ci-slot.chrono .ci-carrier-name { color: #004a99; }
.ci-slot.dhl .ci-carrier-icon,
.ci-slot.dhl .ci-carrier-name { color: #b38f00; }
.ci-slot.dpd .ci-carrier-icon,
.ci-slot.dpd .ci-carrier-name { color: #dc0032; }
body.dark .ci-slot.chrono .ci-carrier-icon,
body.dark .ci-slot.chrono .ci-carrier-name { color: #6ba7e2; }
body.dark .ci-slot.dhl .ci-carrier-icon,
body.dark .ci-slot.dhl .ci-carrier-name { color: #ffcc00; }
body.dark .ci-slot.dpd .ci-carrier-icon,
body.dark .ci-slot.dpd .ci-carrier-name { color: #f47088; }
.ci-slot input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.ci-carrier-icon { display: flex; justify-content: center; margin-bottom: 0.6rem; }
.ci-carrier-icon svg { width: 24px; height: 24px; }
.ci-carrier-name { font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 700; color: var(--text); margin-bottom: 0.2rem; }
.ci-carrier-fmt { font-family: 'Space Mono', monospace; font-size: 0.62rem; color: var(--muted); letter-spacing: 0.05em; }
.ci-file-info { margin-top: 0.75rem; font-family: 'Space Mono', monospace; font-size: 0.7rem; color: var(--success); font-weight: 600; display: none; align-items: center; justify-content: center; gap: 0.35rem; }
.ci-file-info.visible { display: flex; }
.ci-drop-hint { font-family: 'Space Mono', monospace; font-size: 0.6rem; color: var(--muted); margin-top: 0.5rem; }
@media (max-width: 768px) { .ci-grid { grid-template-columns: 1fr; } }

/* TAB BAR supprimee P1e — classes .tabs + .tab unifiees L527 */

@media (max-width: 768px) {
  #statsRow { grid-template-columns: 1fr 1fr; }
  #chartArea.visible { grid-template-columns: 1fr; }
  .chart-canvas-wrap { margin: 0 auto; }
}

/* ── Admin panel (admin.html) ────────────────────────────────────── */
/* APP SHELL */
.app-shell { flex:1; display:flex; overflow:hidden; }

/* SIDEBAR */
.sidebar { width:220px; min-width:220px; background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden; transition:width 0.2s, min-width 0.2s; }
.sidebar.collapsed { width:48px; min-width:48px; overflow:hidden; }
.sidebar.collapsed .sb-label,
.sidebar.collapsed .sb-chip,
.sidebar.collapsed .sb-item-text,
.sidebar.collapsed .sb-add-text,
.sidebar.collapsed .new-oms-panel,
.sidebar.collapsed .sb-search { display:none; }
.sidebar.collapsed .sb-item { justify-content:center; padding:0.55rem 0; }
.sb-toggle { padding:0.5rem 1rem 0.25rem; display:flex; align-items:center; justify-content:space-between; }
.sb-toggle-btn { background:none; border:none; cursor:pointer; color:var(--muted); display:inline-flex; align-items:center; transition:color 0.15s; padding:2px; border-radius:4px; }
.sb-toggle-btn:hover { color:var(--accent); }
.sb-toggle-btn svg { width:14px; height:14px; }
.sb-search { padding:0.25rem 0.75rem 0.5rem; }
.sb-search input { width:100%; background:var(--surface2); border:1.5px solid var(--border); border-radius:7px; padding:0.3rem 0.6rem; font-size:0.78rem; color:var(--text); outline:none; font-family:'Inter',sans-serif; }
.sb-search input:focus { border-color:var(--accent); }
.sb-section { padding:0.35rem 0; }
.sb-label { padding:0.5rem 1rem 0.25rem; font-family:'Space Mono',monospace; font-size:0.55rem; letter-spacing:0.12em; color:var(--muted); text-transform:uppercase; font-weight:700; }
.sb-item { padding:0.45rem 1rem; cursor:pointer; font-size:0.82rem; display:flex; align-items:center; gap:0.45rem; color:var(--text2); font-weight:500; transition:background 0.1s; position:relative; }
.sb-item:hover { background:var(--accent-bg); color:var(--accent); }
.sb-item.active { background:var(--accent-bg); color:var(--accent); font-weight:700; }
.sb-item[title]:hover::after { content:attr(title); position:absolute; left:100%; top:50%; transform:translateY(-50%); background:#1a2e4a; color:#fff; font-size:0.72rem; padding:0.3rem 0.6rem; border-radius:6px; white-space:nowrap; z-index:200; margin-left:6px; pointer-events:none; }
body.dark .sb-item[title]:hover::after { background:#475569; }
.sb-chip { font-family:'Space Mono',monospace; font-size:0.55rem; background:var(--border); color:var(--muted); padding:1px 5px; border-radius:4px; margin-left:auto; }
.sb-divider { height:1px; background:var(--border); margin:0.25rem 0; }
.sb-add { color:var(--success); font-size:0.78rem; }
.sb-add:hover { background:var(--success-bg); color:var(--success); }
.new-oms-panel { padding:0.75rem 1rem; border-top:1px solid var(--border); background:var(--surface2); font-size:0.8rem; }
.new-oms-panel input, .new-oms-panel select { width:100%; margin-bottom:0.45rem; }

/* MAIN PANEL */
.main { flex:1; overflow-y:auto; padding:1.75rem 2rem; animation:fadeIn 0.2s; }
.panel-title { font-size:1.1rem; font-weight:700; color:var(--navy); margin-bottom:0.25rem; display:flex; align-items:center; gap:0.6rem; }
.panel-title code { font-size:1.1rem; font-family:'Space Mono',monospace; color:var(--accent); }
.panel-sub { font-size:0.78rem; color:var(--muted); margin-bottom:1.5rem; }

/* ACCORDION */
.acc-block { border:1px solid var(--border); border-radius:12px; margin-bottom:1rem; overflow:hidden; }
.acc-head { padding:0.85rem 1.25rem; background:var(--surface2); display:flex; align-items:center; gap:0.6rem; cursor:pointer; user-select:none; font-weight:600; font-size:0.875rem; color:var(--navy); }
.acc-head:hover { background:var(--accent-bg); }
.acc-arrow { margin-left:auto; color:var(--muted); transition:transform 0.2s; }
.acc-arrow.open { transform:rotate(90deg); }
.acc-body { padding:1.25rem; border-top:1px solid var(--border); background:var(--surface); }

/* CARDS */
.card-head { padding:0.85rem 1.25rem; border-bottom:1px solid var(--border); background:var(--surface2); display:flex; align-items:center; justify-content:space-between; }
.card-title { font-size:0.8rem; font-weight:700; color:var(--navy); display:flex; align-items:center; gap:0.5rem; }

/* FORM */
.form-row { display:flex; flex-wrap:wrap; gap:0.85rem; margin-bottom:0.85rem; }
.form-group { display:flex; flex-direction:column; gap:0.3rem; }
input[type=text], input[type=number], select, textarea {
  background:var(--surface2); border:1.5px solid var(--border2); border-radius:8px;
  color:var(--text); font-family:'Inter',sans-serif; font-size:0.825rem;
  padding:0.38rem 0.7rem; outline:none; transition:border-color 0.15s, box-shadow 0.15s;
}
input[type=text]:focus, input[type=number]:focus, select:focus, textarea:focus {
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(59,91,219,0.1);
}
input[type=number] { width:80px; }
select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 8px center; padding-right:2rem; }
body.dark select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238088b0' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }

/* TABLES */
table { width:100%; border-collapse:collapse; font-size:0.82rem; }
th { background:var(--surface2); padding:0.55rem 0.9rem; text-align:left; font-family:'Space Mono',monospace; font-size:0.57rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--border); font-weight:700; }
td { padding:0.55rem 0.9rem; border-bottom:1px solid var(--border); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:var(--surface2); }

/* RATE GRID */
.rate-layout { display:grid; grid-template-columns:200px 1fr; gap:1.25rem; }
.file-list { border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--surface); }
.file-item { padding:0.6rem 0.9rem; cursor:pointer; font-size:0.8rem; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; transition:background 0.1s; }
.file-item:last-child { border-bottom:none; }
.file-item:hover { background:var(--accent-bg); }
.file-item.selected { background:var(--accent-bg); color:var(--accent); font-weight:600; }
.file-meta { font-family:'Space Mono',monospace; font-size:0.57rem; color:var(--muted); }
.override-badge { font-family:'Space Mono',monospace; font-size:0.55rem; background:var(--warning-bg); color:var(--warning); border:1px solid rgba(230,119,0,0.25); padding:1px 6px; border-radius:4px; margin-left:0.5rem; }
.global-badge { font-family:'Space Mono',monospace; font-size:0.55rem; background:var(--surface2); color:var(--muted); border:1px solid var(--border); padding:1px 6px; border-radius:4px; margin-left:0.5rem; }
.diff-changed { background: var(--warning-bg) !important; }
.diff-global  { font-size:0.58rem; color:var(--warning); font-family:'Space Mono',monospace; margin-top:2px; }

/* MISC */
.admin-badge { background:var(--warning-bg); border:1px solid rgba(230,119,0,0.25); border-radius:20px; padding:0.2rem 0.7rem; font-family:'Space Mono',monospace; font-size:0.62rem; color:var(--warning); }
.section-heading { font-family:'Space Mono',monospace; font-size:0.6rem; color:var(--accent); letter-spacing:0.15em; text-transform:uppercase; font-weight:700; margin:1rem 0 0.6rem; display:flex; align-items:center; gap:0.5rem; }
.section-heading::after { content:''; flex:1; height:1px; background:var(--border); }

/* WELCOME */
.welcome { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; text-align:center; color:var(--muted); gap:0.75rem; }
.welcome svg { opacity:0.25; }
.welcome h3 { font-size:1rem; color:var(--text2); }

/* PACKING RULE CARD */
.rule-card { border:1px solid var(--border); border-radius:10px; margin-bottom:0.85rem; overflow:hidden; }
.rule-card-head { padding:0.75rem 1.1rem; background:var(--surface2); display:flex; align-items:center; gap:0.7rem; cursor:pointer; }
.rule-card-head:hover { background:var(--accent-bg); }
.rule-card-body { padding:1.1rem; border-top:1px solid var(--border); }
.type-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:0.5rem; }
.type-cell { text-align:center; }
.type-cell label { font-family:'Space Mono',monospace; font-size:0.6rem; color:var(--muted); display:block; margin-bottom:0.25rem; }

/* TOOLTIPS — positioning handled by utils.js (.tip-popup), no CSS ::after needed */
.tip { position:relative; }

/* INFO BOX */
.info-box { padding:0.6rem 0.9rem; background:var(--accent-bg); border-left:3px solid var(--accent); border-radius:0 7px 7px 0; font-size:0.78rem; color:var(--text2); margin-bottom:1rem; line-height:1.6; }
.info-box strong { color:var(--navy); }

/* CHECKBOX ROW */
.check-row { display:flex; flex-wrap:wrap; gap:0.6rem; }
.check-item { display:flex; align-items:center; gap:0.35rem; cursor:pointer; font-size:0.8rem; padding:0.3rem 0.6rem; border:1px solid var(--border); border-radius:6px; background:var(--surface2); transition:all 0.13s; }
.check-item:hover { border-color:var(--accent); background:var(--accent-bg); }
.check-item input[type=checkbox] { width:13px; height:13px; cursor:pointer; accent-color:var(--accent); }

/* DIRTY BADGE */
.dirty-badge { display:none; background:var(--warning-bg); color:var(--warning); border:1px solid rgba(230,119,0,0.25); border-radius:5px; padding:1px 7px; font-size:0.62rem; font-family:'Space Mono',monospace; font-weight:700; margin-left:0.5rem; }
.dirty-badge.visible { display:inline-block; }

/* ── Tracking (tracking.html) ────────────────────────────────────── */
/* KPI tab switcher */
.kpi-tabs { display:flex; gap:0.25rem; margin-bottom:1rem; background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:0.2rem; width:fit-content; }
.kpi-tab { padding:0.35rem 1rem; font-size:0.78rem; font-weight:600; color:var(--muted); background:none; border:none; border-radius:6px; cursor:pointer; transition:all 0.15s; }
.kpi-tab:hover { color:var(--text); }
.kpi-tab.active { background:var(--surface); color:var(--accent); box-shadow:0 1px 3px rgba(0,0,0,0.08); }
body.dark .kpi-tab.active { background:var(--surface); }

/* KPI period selector */
.kpi-period { display:flex; gap:0.3rem; margin-bottom:0.75rem; }

/* Stats — .stat-card canonical (P1d : merge de 4 declarations dispersees L408, L1475, L1621, L2857) */
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1.2rem;
  flex: 1;
  min-width: 140px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}
.stat-card:hover {
  box-shadow: var(--shadow-cobalt-sm);
  transform: translateY(-2px);
  border-color: var(--cobalt-200);
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gradient-warm);  /* Editorial Warm par defaut */
}
.stat-card.cool::before { background: var(--gradient-accent); }
.stat-card.success::before { background: var(--gradient-success); }
.stat-card.warning::before { background: var(--gradient-warm); }
.stat-card.error::before { background: linear-gradient(135deg, var(--error), #e06060); }
.stat-value {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat-label { font-size:0.7rem; color:var(--muted); margin-top:0.15rem; text-transform:uppercase; letter-spacing:0.06em; font-weight:600; }
.stat-card.accent .stat-value { color: var(--cobalt-600); }
.stat-card.accent2 .stat-value { color: var(--accent2); }
.stat-card.success .stat-value { color: var(--success); }
.stat-card.warning .stat-value { color: var(--warning); }
.stat-card.error .stat-value { color: var(--error); }
/* Modifier --active (selection clickable — Tracking v2) */
.stat-card--active { border-color: var(--accent) !important; background: var(--accent-bg); box-shadow: 0 0 0 2px rgba(59,91,219,0.15); }
body.dark .stat-card--active { background: rgba(59,91,219,0.08); }

/* Toolbar */
.toolbar { display:flex; align-items:center; gap:0.75rem; margin-bottom:1rem; flex-wrap:wrap; }
.toolbar-right { margin-left:auto; display:flex; align-items:center; gap:0.5rem; }
.sync-info { font-size:0.72rem; color:var(--muted); }

/* Filters */
.filters { display:flex; gap:0.6rem; margin-bottom:1rem; flex-wrap:wrap; align-items:center; }
.search-input { min-width:220px; }

/* Table wrap */
.table-wrap { background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; }

/* Spreadsheet table — Excel-like grid with visible cell borders */
.spreadsheet { border-collapse:collapse; width:100%; }
.spreadsheet th,
.spreadsheet td { border:1px solid var(--border); padding:0.35rem 0.6rem; font-size:0.82rem; vertical-align:middle; }
.spreadsheet th { background:var(--surface2); font-weight:600; white-space:nowrap; }
.spreadsheet td { font-family:'Space Mono',monospace; font-size:0.8rem; }
.spreadsheet tbody tr:nth-child(even) { background:var(--surface2); }
.spreadsheet tbody tr:hover { background:color-mix(in srgb, var(--accent) 6%, transparent); }
.spreadsheet input[type="text"] { font-family:'Space Mono',monospace; font-size:0.8rem; }
tr.anomaly td { background:var(--warning-bg); }
tr.anomaly:hover td { background:var(--warning-bg); filter:brightness(0.95); }
body.dark tr.anomaly td { background:var(--warning-bg); }

/* Sync progress */
.sync-progress { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:1rem 1.25rem; margin-bottom:1rem; }
.sync-step { display:flex; align-items:center; gap:0.5rem; font-size:0.8rem; padding:0.3rem 0; color:var(--text2); }
.sync-step .dot { width:8px; height:8px; border-radius:50%; background:var(--border2); flex-shrink:0; }
.sync-step.active .dot { background:var(--accent); animation:spin 1s linear infinite; border:2px solid var(--accent); border-top-color:transparent; width:12px; height:12px; border-radius:50%; }
.sync-step.done .dot { background:var(--success); }
.sync-step.done { color:var(--success); }
.sync-step.cancelled .dot { background:var(--error); }
.sync-step.cancelled { color:var(--error); opacity:0.7; }
.step.cancelled { opacity:0.7; border-color:rgba(239,68,68,0.25); background:rgba(239,68,68,0.05); }
.step.cancelled .step-status { color:var(--error); }
.step.error { opacity:1; border-color:rgba(201,42,42,0.3); background:var(--error-bg); }
.step.error .step-status { color:var(--error); font-weight:700; }

/* Tooltip popup */
.tip-popup { position:fixed; background:#1a2e4a; color:#fff; font-size:0.71rem; padding:0.6rem 0.85rem; border-radius:7px; width:340px; z-index:9999; line-height:1.6; white-space:pre-line; font-family:'Inter',sans-serif; pointer-events:none; font-weight:400; box-shadow:0 4px 16px rgba(0,0,0,0.2); animation:fadeIn 0.15s; }
body.dark .tip-popup { background:#475569; box-shadow:0 4px 16px rgba(0,0,0,0.5); }

/* Anomaly tag */
.anomaly-tag { display:inline-flex; align-items:center; gap:0.2rem; background:var(--warning-bg); color:var(--warning); border:1px solid rgba(230,119,0,0.25); border-radius:5px; padding:0.1rem 0.45rem; font-size:0.6rem; font-weight:700; font-family:'Space Mono',monospace; }

/* ── Claim badges & styles ─────────────────────────────────────────────── */
.claim-badge { display:inline-flex; align-items:center; gap:0.2rem; background:rgba(139,92,246,0.12); color:rgb(139,92,246); border:1px solid rgba(139,92,246,0.25); border-radius:5px; padding:0.1rem 0.45rem; font-size:0.6rem; font-weight:700; font-family:'Space Mono',monospace; text-decoration:none; }
.claim-badge:hover { background:rgba(139,92,246,0.2); }
.claim-status-badge { display:inline-block; padding:0.15rem 0.5rem; border-radius:5px; font-size:0.7rem; font-weight:600; font-family:'Space Mono',monospace; }
.claim-status-open { background:rgba(59,130,246,0.12); color:rgb(59,130,246); border:1px solid rgba(59,130,246,0.25); }
.claim-status-in_progress { background:rgba(245,158,11,0.12); color:rgb(245,158,11); border:1px solid rgba(245,158,11,0.25); }
.claim-status-resolved { background:rgba(34,197,94,0.12); color:rgb(34,197,94); border:1px solid rgba(34,197,94,0.25); }
.claim-status-rejected { background:rgba(239,68,68,0.12); color:rgb(239,68,68); border:1px solid rgba(239,68,68,0.25); }
.claim-status-closed { background:rgba(148,163,184,0.12); color:rgb(148,163,184); border:1px solid rgba(148,163,184,0.25); }
.claim-type-badge { display:inline-block; padding:0.1rem 0.4rem; border-radius:4px; font-size:0.68rem; font-weight:500; }
.claim-type-return { background:rgba(245,158,11,0.1); color:rgb(180,120,10); }
.claim-type-lost { background:rgba(239,68,68,0.1); color:rgb(200,60,60); }
.claim-type-damaged { background:rgba(168,85,247,0.1); color:rgb(140,70,210); }
.claim-type-generic { background:rgba(148,163,184,0.1); color:rgb(120,135,150); }
body.dark .claim-type-return { color:rgb(251,191,36); }
body.dark .claim-type-lost { color:rgb(248,113,113); }
body.dark .claim-type-damaged { color:rgb(196,181,253); }
body.dark .claim-type-generic { color:rgb(203,213,225); }
.claim-dialog { border:none; border-radius:12px; padding:1.5rem; max-width:560px; width:90vw; background:var(--bg); color:var(--text); box-shadow:0 20px 60px rgba(0,0,0,0.3); }
.claim-dialog::backdrop { background:rgba(0,0,0,0.5); }
.claim-autocomplete { position:absolute; top:100%; left:0; right:0; background:var(--surface); border:1px solid var(--border); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,0.15); z-index:50; max-height:250px; overflow-y:auto; }
.claim-autocomplete-item { display:block; width:100%; padding:0.5rem 0.75rem; border:none; background:none; cursor:pointer; text-align:left; color:var(--text); }
.claim-autocomplete-item:hover { background:var(--surface2); }
.claim-recap { background:var(--surface2); border-radius:8px; padding:0.75rem; }
.claim-recap-row { display:flex; justify-content:space-between; align-items:center; padding:0.3rem 0; font-size:0.82rem; }
.claim-recap-row + .claim-recap-row { border-top:1px solid var(--border); }
.claim-recap-label { color:var(--muted); font-size:0.75rem; min-width:80px; }
.claim-detail-rows { display:flex; flex-direction:column; gap:0; }
.claim-detail-row { display:flex; justify-content:space-between; align-items:center; padding:0.35rem 0; font-size:0.82rem; }
.claim-detail-row + .claim-detail-row { border-top:1px solid var(--border); }
.claim-detail-label { color:var(--muted); font-size:0.75rem; min-width:90px; }
.claim-transition-btn { border:1px solid var(--border); cursor:pointer; }
.claim-transition-btn:hover { opacity:0.85; }
.claim-timeline { display:flex; flex-direction:column; gap:0; }
.claim-timeline-item { display:flex; gap:0.75rem; padding:0.6rem 0; position:relative; }
.claim-timeline-item + .claim-timeline-item { border-top:1px solid var(--border); }
.claim-timeline-dot { width:10px; height:10px; border-radius:50%; margin-top:0.3rem; flex-shrink:0; }
.claim-timeline-dot.claim-status-open { background:rgb(59,130,246); }
.claim-timeline-dot.claim-status-in_progress { background:rgb(245,158,11); }
.claim-timeline-dot.claim-status-resolved { background:rgb(34,197,94); }
.claim-timeline-dot.claim-status-rejected { background:rgb(239,68,68); }
.claim-timeline-dot.claim-status-closed { background:rgb(148,163,184); }
.claim-timeline-content { flex:1; min-width:0; }
@media (max-width: 768px) { .claim-detail-grid { grid-template-columns:1fr !important; } }

/* Source tabs */
.source-tabs { border-bottom: 1px solid var(--border); padding-bottom: 0.35rem; }
.source-tab { padding: 0.4rem 0.85rem; border-radius: 8px 8px 0 0; font-size: 0.78rem; font-weight: 600; color: var(--muted); background: transparent; border: 1px solid transparent; border-bottom: none; cursor: pointer; transition: all 0.2s ease; }
.source-tab:hover { color: var(--fg); background: var(--bg-offset); }
.source-tab.active { color: var(--accent); background: var(--surface); border-color: var(--border); position: relative; }
.source-tab.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--accent); }
.tab-count { font-size: 0.68rem; font-weight: 400; opacity: 0.7; }

/* Source badge in table */
.source-badge { display: inline-block; margin-left: 0.3rem; padding: 0.05rem 0.35rem; font-size: 0.55rem; font-weight: 700; font-family: 'Space Mono', monospace; border-radius: 4px; background: var(--bg-offset); color: var(--muted); border: 1px solid var(--border); vertical-align: middle; }

/* Empty state */
.empty { text-align:center; padding:3rem 1rem; color:var(--muted); }
.empty svg { opacity:0.25; margin-bottom:0.75rem; }
.empty h3 { font-size:1rem; color:var(--text2); margin-bottom:0.3rem; }

/* Tracking link */
a.tracking-link { color:var(--accent); text-decoration:none; font-family:'Space Mono',monospace; font-size:0.72rem; }
a.tracking-link:hover { text-decoration:underline; }

/* Tracking badge */
.tracking-badge { background:var(--accent2-bg); border:1px solid rgba(12,133,153,0.25); border-radius:20px; padding:0.2rem 0.7rem; font-family:'Space Mono',monospace; font-size:0.62rem; color:var(--accent2); }

/* Tracking responsive */
@media (max-width:768px) {
  .stats-row { flex-direction:column; }
  .filters { flex-direction:column; }
  .toolbar { flex-direction:column; align-items:flex-start; }
  .toolbar-right { margin-left:0; }
}

/* ── Tracking v2 — Interactive components ─────────────────────── */

/* Stat cards clickable — cursor + hover + --active merges dans la declaration canonique L1475 (P1d) */

/* Staggered fade-in supprime P1e — deja defini sur .kpi-row L600+ */

/* Stat delta badge */
.stat-delta {
  display: inline-flex; padding: 0.1rem 0.4rem; border-radius: 4px;
  font-family: 'Space Mono', monospace; font-size: 0.65rem; margin-top: 0.25rem; font-weight: 700;
  animation: countUp 0.4s ease 0.2s both;
}
.stat-delta.up { color: var(--success); background: var(--success-bg); }
.stat-delta.down { color: var(--error); background: var(--error-bg); }
.stat-delta.neutral { color: var(--muted); }
.stat-subtitle { font-size: 0.65rem; color: var(--muted); font-weight: 500; margin-top: 0.1rem; opacity: 0.8; }

/* Filters panel — collapsible */
.filters-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 1rem; }

/* Filter chips */
.filter-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; }
.filter-chip { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--accent-bg); color: var(--accent); border: 1px solid rgba(59,91,219,0.2); border-radius: 20px; padding: 0.2rem 0.6rem 0.2rem 0.7rem; font-size: 0.72rem; font-family: 'Space Mono', monospace; font-weight: 600; }
.filter-chip button { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 0.85rem; line-height: 1; padding: 0 0.1rem; opacity: 0.7; transition: opacity 0.15s; }
.filter-chip button:hover { opacity: 1; }
body.dark .filter-chip { background: rgba(59,91,219,0.1); border-color: rgba(59,91,219,0.25); }

/* Filter count badge */
.filter-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; background: var(--accent); color: #fff; border-radius: 50%; font-size: 0.6rem; font-weight: 700; font-family: 'Space Mono', monospace; margin-left: 0.3rem; }

/* Date presets */
.date-presets { display: flex; gap: 0.3rem; }
.date-preset { background: var(--surface2); border: 1px solid var(--border2); border-radius: 6px; padding: 0.25rem 0.6rem; font-size: 0.68rem; font-family: 'Space Mono', monospace; color: var(--text2); cursor: pointer; transition: all 0.15s; font-weight: 600; }
.date-preset:hover { border-color: var(--accent); color: var(--accent); }
.date-preset.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Expandable rows */
tr.row-expanded td { background: var(--surface2); }
tr.detail-row td { padding: 0; border-bottom: 1px solid var(--border); }
.detail-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; padding: 1rem 1.5rem; background: var(--surface2); }
body.dark .detail-panel { background: var(--surface); }
.detail-meta { display: flex; flex-direction: column; gap: 0.5rem; }
.detail-label { font-family: 'Space Mono', monospace; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 700; }
.detail-value { font-size: 0.82rem; color: var(--text); }

@media (max-width: 768px) {
  .detail-panel { grid-template-columns: 1fr; }
}

/* Mini-timeline */
.tl-steps { display: flex; flex-direction: column; gap: 0; }
.tl-step { display: flex; align-items: flex-start; gap: 0.6rem; position: relative; padding-bottom: 0.75rem; }
.tl-step:last-child { padding-bottom: 0; }
.tl-step::before { content: ''; position: absolute; left: 5px; top: 14px; bottom: 0; width: 2px; background: var(--border2); }
.tl-step:last-child::before { display: none; }
.tl-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--border2); flex-shrink: 0; margin-top: 2px; border: 2px solid var(--surface2); }
.tl-dot.done { background: var(--success); border-color: var(--success-bg); }
.tl-dot.active { background: var(--accent); border-color: var(--accent-bg); animation: pulse 1.5s infinite; }
.tl-label { font-size: 0.78rem; font-weight: 600; color: var(--text); }
.tl-date { font-family: 'Space Mono', monospace; font-size: 0.65rem; color: var(--muted); }
.tl-location { font-size: 0.65rem; color: var(--muted); font-style: italic; }

/* Bulk action bar */
.bulk-bar { position: sticky; bottom: 0; z-index: 10; background: var(--surface); border: 1px solid var(--accent); border-radius: 10px 10px 0 0; padding: 0.6rem 1.25rem; display: flex; align-items: center; gap: 0.75rem; box-shadow: 0 -4px 16px rgba(0,0,0,0.08); }
.bulk-bar .bulk-count { font-family: 'Space Mono', monospace; font-size: 0.78rem; color: var(--accent); font-weight: 700; }

/* Per-page selector */
.per-page-select { font-size: 0.75rem; padding: 0.2rem 1.5rem 0.2rem 0.4rem; border-radius: 6px; background: var(--surface); border: 1px solid var(--border2); color: var(--text2); min-width: auto; }

/* Loading skeletons */
.skeleton-row td { position: relative; overflow: hidden; }
.skeleton-bar { height: 0.75rem; border-radius: 4px; background: var(--border); animation: skeleton-pulse 1.5s infinite; }
@keyframes skeleton-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } }

/* ── Tracking v3 — Redesign ─────────────────────────────────── */

/* Stacked status bar */
.status-bar-wrap { display:flex; height:6px; border-radius:3px; overflow:hidden; background:var(--border); }
.status-bar-seg { height:100%; min-width:2px; transition:width 0.4s ease; cursor:pointer; position:relative; }
.status-bar-seg:hover { opacity:0.8; }
.status-bar-seg.seg-delivered { background:var(--success); }
.status-bar-seg.seg-in_transit,
.status-bar-seg.seg-shipped { background:var(--accent); }
.status-bar-seg.seg-out_for_delivery { background:var(--accent2, #0c8599); }
.status-bar-seg.seg-at_pickup_point { background:var(--warm, #d97706); }
.status-bar-seg.seg-failed { background:var(--error); }
.status-bar-seg.seg-returned { background:var(--warning); }
.status-bar-seg.seg-unknown { background:var(--muted); }

/* Source tabs v2 — with mini bar */
.source-tab-v2 { display:flex; flex-direction:column; gap:0.35rem; padding:0.5rem 1rem; border-radius:10px 10px 0 0; font-size:0.78rem; font-weight:600; color:var(--muted); background:transparent; border:1px solid transparent; border-bottom:none; cursor:pointer; transition:all 0.2s ease; min-width:120px; }
.source-tab-v2:hover { color:var(--fg); background:var(--bg-offset); }
.source-tab-v2.active { color:var(--accent); background:var(--surface); border-color:var(--border); position:relative; }
.source-tab-v2.active::after { content:''; position:absolute; bottom:-1px; left:0; right:0; height:2px; background:var(--accent); }
.source-tab-v2 .tab-label { display:flex; align-items:center; gap:0.4rem; }
.source-tab-v2 .tab-count { font-family:'Space Mono',monospace; font-size:0.68rem; font-weight:400; opacity:0.7; }

/* Tracking stats row supprimee P1e — .kpi-row.kpi-row--7 */

/* Stat card icon */
.stat-card-icon { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px; flex-shrink:0; }
.stat-card-icon svg { width:16px; height:16px; }
.stat-card-icon.icon-accent { background:var(--accent-bg); color:var(--accent); }
.stat-card-icon.icon-success { background:var(--success-bg); color:var(--success); }
.stat-card-icon.icon-warning { background:var(--warning-bg); color:var(--warning); }
.stat-card-icon.icon-error { background:var(--error-bg); color:var(--error); }
.stat-card-icon.icon-muted { background:var(--bg-offset); color:var(--muted); }
body.dark .stat-card-icon.icon-accent { background:rgba(59,91,219,0.12); }
body.dark .stat-card-icon.icon-success { background:rgba(34,197,94,0.12); }
body.dark .stat-card-icon.icon-warning { background:rgba(230,119,0,0.12); }
body.dark .stat-card-icon.icon-error { background:rgba(239,68,68,0.12); }

/* Filter bar — always visible */
.filter-bar { display:flex; align-items:center; gap:0.5rem; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:0.5rem 0.75rem; margin-bottom:0.5rem; flex-wrap:wrap; }
.filter-bar select, .filter-bar .search-input { font-size:0.78rem; padding:0.3rem 0.5rem; border-radius:6px; border:1px solid var(--border2); background:var(--surface); color:var(--text); min-width:0; }
.filter-bar select { max-width:140px; }
.filter-bar .search-input { flex:1; min-width:150px; }
.filter-bar-toggle { font-size:0.72rem; color:var(--accent); cursor:pointer; background:none; border:none; font-weight:600; white-space:nowrap; margin-left:auto; }
.filter-bar-toggle:hover { text-decoration:underline; }

/* Advanced filters — dépliable */
.filter-bar-advanced { display:flex; align-items:center; gap:0.5rem; background:var(--surface); border:1px solid var(--border); border-top:none; border-radius:0 0 10px 10px; padding:0.5rem 0.75rem; margin-top:-0.5rem; margin-bottom:0.75rem; flex-wrap:wrap; transition:opacity 0.2s ease; }

/* Table v2 — zebra + hover */
.table-wrap-v2 { background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.table-wrap-v2 table { width:100%; border-collapse:collapse; }
.table-wrap-v2 tbody tr:nth-child(even) { background:var(--surface2); }
.table-wrap-v2 tbody tr:hover { background:rgba(59,91,219,0.04); }
body.dark .table-wrap-v2 tbody tr:nth-child(even) { background:rgba(255,255,255,0.02); }
body.dark .table-wrap-v2 tbody tr:hover { background:rgba(59,91,219,0.06); }

/* Status badge bump */
.status-badge { font-size:0.68rem; padding:0.2rem 0.6rem; }

/* Staggered fade-in for tracking stats */
/* Tracking staggered animation supprimee P1e — deja defini sur .kpi-row L600+ */

/* Tracking header bar */
.tracking-header { display:flex; align-items:center; gap:0.75rem; margin-bottom:0.75rem; flex-wrap:wrap; }
.tracking-header h2 { font-size:1.1rem; font-weight:700; margin:0; }
.tracking-header .header-right { display:flex; align-items:center; gap:0.5rem; margin-left:auto; }

/* KPI card skeleton */
.stat-card-skeleton .stat-value,
.stat-card-skeleton .stat-label {
  background: var(--border);
  border-radius: 4px;
  color: transparent !important;
  animation: skeleton-pulse 1.5s infinite;
}
.stat-card-skeleton .stat-value { width: 60%; height: 1.5rem; }
.stat-card-skeleton .stat-label { width: 80%; height: 0.75rem; margin-top: 0.3rem; }

/* Chart skeleton */
.chart-skeleton {
  background: var(--border);
  border-radius: 8px;
  animation: skeleton-pulse 1.5s infinite;
  min-height: 280px;
}

/* Clickable cell values */
.cell-clickable { cursor: pointer; transition: color 0.15s; }
.cell-clickable:hover { color: var(--accent); text-decoration: underline; }

/* ── Client dashboard (client.html) ──────────────────────────────── */
.oms-badges { display:flex; flex-wrap:wrap; gap:0.4rem; margin-bottom:1rem; }

.stat-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:0.75rem; margin-bottom:1rem; }

.header-link { color:var(--accent); text-decoration:none; font-size:0.78rem; font-weight:600; }
.header-link:hover { text-decoration:underline; }

.btn-del { background:none; border:1px solid var(--error); color:var(--error); border-radius:6px; padding:0.2rem 0.5rem; font-size:0.68rem; font-weight:600; cursor:pointer; }
.btn-del:hover { background:var(--error-bg); }

/* ── Native dialog — New OMS ───────────────────────────────── */
dialog.new-oms-panel {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  background: var(--surface);
  color: var(--text);
  max-width: 480px;
  width: 90%;
}
dialog.new-oms-panel::backdrop {
  background: rgba(0, 0, 0, 0.4);
}
body.dark dialog.new-oms-panel {
  background: var(--surface);
  border-color: var(--border);
}

@keyframes pulse { 0%,100%{opacity:0.6} 50%{opacity:1} }
@keyframes stockPulse { 0%,100%{opacity:0.85} 50%{opacity:1} }

/* ── Pipeline animations ──────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes progress-stripes {
  0% { background-position: 0 0; }
  100% { background-position: 40px 0; }
}
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59,91,219,0.2); }
  50% { box-shadow: 0 0 0 4px rgba(59,91,219,0.1); }
}

/* Active step — glow + icon spin */
.step.active { animation: pulseGlow 2s ease-in-out infinite; }
.step.active .step-icon-lucide svg { animation: spin 1.2s linear infinite; }

/* Done step — subtle scale entrance */
.step.done { animation: fadeSlideIn 0.3s ease; }

/* Progress bar — animated stripes */
.progress-fill {
  background-image: linear-gradient(
    45deg,
    rgba(255,255,255,0.15) 25%, transparent 25%,
    transparent 50%, rgba(255,255,255,0.15) 50%,
    rgba(255,255,255,0.15) 75%, transparent 75%
  );
  background-size: 40px 40px;
  animation: progress-stripes 1s linear infinite;
}

/* Pipeline badge IN PROGRESS — enhanced pulse */
.pipeline-badge:not(.done):not(.cancelled)::before { animation: pulse 1.2s ease-in-out infinite; }

/* Pipeline stats grid — fix Alpine x-show overriding display:grid */
.pipeline-stats-grid { grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-top: 1rem; }

/* Stats + download CTA — fade-in on appear */
.pipeline-stats-grid .stat-cell { animation: fadeSlideIn 0.4s ease both; }
.pipeline-stats-grid .stat-cell:nth-child(2) { animation-delay: 0.05s; }
.pipeline-stats-grid .stat-cell:nth-child(3) { animation-delay: 0.1s; }
.pipeline-stats-grid .stat-cell:nth-child(4) { animation-delay: 0.15s; }
#finDownloadCTA, #downloadCTA { animation: fadeSlideIn 0.5s ease 0.2s both; }

/* ── Progress Panel (shared partial) ──────────────────────────── */
.ops-panel-top-bar { height:3px; border-radius:3px 3px 0 0; }
.ops-panel-inner { padding:1.25rem; }
.ops-panel-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.ops-panel-title { font-size:0.95rem; font-weight:700; color:var(--text); }
.ops-panel-period { font-size:0.72rem; color:var(--muted); font-family:'Space Mono',monospace; }
.ops-progress-bar-header { display:flex; justify-content:space-between; font-size:0.68rem; color:var(--muted); margin-bottom:0.3rem; }
.ops-progress-bar-track { height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
.ops-progress-bar-fill { height:100%; background:var(--accent); border-radius:3px; transition:width 0.3s; }
.ops-steps-col { display:flex; flex-direction:column; gap:0.4rem; margin-bottom:1rem; }
.ops-result-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); gap:1px; background:var(--border); border-radius:12px; overflow:hidden; margin-bottom:1rem; }
.ops-stat-cell { background:var(--surface); padding:0.75rem; text-align:center; }
.ops-stat-num { font-family:'Space Mono',monospace; font-size:1.1rem; font-weight:700; }
.ops-stat-num.accent { color:var(--accent); }
.ops-stat-num.success { color:var(--success); }
.ops-stat-num.warning { color:var(--warning); }
.ops-stat-num.accent2 { color:var(--accent2); }
.ops-stat-label { font-size:0.62rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); font-weight:700; }
.ops-download-cta { padding:0.85rem 1rem; background:var(--accent2-bg); border:1px solid rgba(12,133,153,0.2); border-radius:10px; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.ops-download-cta-title { font-size:0.85rem; font-weight:600; color:var(--text); }
.ops-download-cta-meta { font-family:'Space Mono',monospace; font-size:0.62rem; color:var(--muted); margin-top:0.15rem; }
.ops-error-box { padding:0.75rem 1rem; background:var(--error-bg); border:1px solid rgba(201,42,42,0.2); border-radius:8px; color:var(--error); font-size:0.82rem; margin-top:0.75rem; }

/* Carrier invoice — resolution sources */
.ci-resolution-sources { margin-top:1.5rem; padding:0.75rem 1rem; background:var(--bg-secondary); border-radius:10px; border:1px solid var(--border); }
.ci-resolution-title { font-size:0.72rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.5rem; }
.ci-resolution-options { display:flex; gap:1.5rem; align-items:center; }
.ci-resolution-label { display:flex; align-items:center; gap:0.4rem; font-size:0.82rem; cursor:pointer; }
.ci-resolution-label.disabled { cursor:not-allowed; opacity:0.5; }
.ci-action-row { display:flex; align-items:center; gap:1rem; margin-top:1rem; }
.ci-file-count { font-family:'Space Mono',monospace; font-size:0.68rem; color:var(--muted); }

/* Carrier invoice — download CTA */
.ci-download-cta { margin-top:1rem; display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; background:var(--success-bg); border:1px solid rgba(47,158,68,0.2); border-radius:12px; }
.ci-download-title { font-size:0.9rem; font-weight:600; color:var(--text); display:flex; align-items:center; gap:0.4rem; }
.ci-download-meta { font-family:'Space Mono',monospace; font-size:0.65rem; color:var(--muted); margin-top:0.2rem; }

/* Anchanto — XKX bulk result (Alpine reactive) */
.xkx-result-wrap { margin-top:0.75rem; animation:fadeSlideIn 0.3s ease; }
.xkx-result-title { font-weight:700; font-size:0.88rem; color:var(--text); margin-bottom:0.5rem; }
.xkx-detail-list { font-size:0.78rem; color:var(--text2); }
.xkx-detail-list code { font-family:'Space Mono',monospace; font-size:0.72rem; }

/* Anchanto — spreadsheet wrap */
.anch-spreadsheet-wrap { max-width:600px; }
.anch-table-scroll { max-height:360px; overflow-y:auto; }

/* Table row highlight states */
.row-error { background:var(--error-bg); }
.row-warning { background:var(--warning-bg); }
body.dark .row-error { background:rgba(239,68,68,0.08); }
body.dark .row-warning { background:rgba(230,119,0,0.08); }

/* Inline link button (retry etc.) */
.btn-link-inline { margin-left:0.4rem; background:none; border:none; cursor:pointer; text-decoration:underline; }

/* ══════════════════════════════════════════════════════════════
   App Sidebar Layout — Unified 220px sidebar for all profiles
   ══════════════════════════════════════════════════════════════ */

.app-layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* Layout topbar (remplace sidebar gauche par header top sticky) */
.app-layout--topbar {
  flex-direction: column;
}
.app-layout--topbar .app-main {
  padding: 1.5rem 2rem;
}

.app-main {
  flex: 1;
  overflow-y: auto;
  padding: 2rem 2.5rem;
  background: var(--bg);
}
.app-main.no-pad { padding: 0; overflow: hidden; }

/* ── App Topbar (Phase 3) ─────────────────────────────────── */
.app-topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.65rem 1.5rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  height: 56px;
  flex-shrink: 0;
}

.app-topbar-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--text);
  flex-shrink: 0;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease-out);
}
.app-topbar-logo:hover { background: var(--surface2); }
.app-topbar-brand {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--navy);
}
body.dark .app-topbar-brand { color: var(--text); }

/* Search button central */
.app-topbar-search {
  flex: 1;
  max-width: 480px;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.85rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  margin: 0 auto;
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.app-topbar-search:hover {
  border-color: var(--cobalt-300);
  background: var(--surface);
  color: var(--text2);
}
.app-topbar-search-placeholder { flex: 1; text-align: left; }
.app-topbar-search-kbd {
  font-family: 'Space Mono', monospace;
  font-size: 0.65rem;
  padding: 0.15rem 0.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--muted);
}

/* Right group */
.app-topbar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  position: relative;
}

.app-topbar-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text2);
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.app-topbar-icon-btn:hover,
.app-topbar-icon-btn.active {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--border);
}

.app-topbar-badge {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--error);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  font-family: 'Space Mono', monospace;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.app-topbar-user {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.65rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  transition: background var(--duration-fast) var(--ease-out);
}
.app-topbar-user:hover,
.app-topbar-user.active { background: var(--surface2); }
.app-topbar-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--cobalt-100);
  color: var(--cobalt-700);
  font-weight: 600;
  font-size: 0.72rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
body.dark .app-topbar-avatar {
  background: rgba(124,158,248,0.18);
  color: var(--cobalt-600);
}
.app-topbar-username {
  font-weight: 500;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-topbar-viewas-badge {
  font-family: 'Space Mono', monospace;
  font-size: 0.55rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  background: var(--warning-bg);
  color: var(--warning);
  border-radius: 3px;
  letter-spacing: 0.05em;
}

/* User dropdown menu */
.app-topbar-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem;
  z-index: 101;
}
.app-topbar-menu-user {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.6rem;
}
.app-topbar-menu-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--cobalt-100);
  color: var(--cobalt-700);
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
body.dark .app-topbar-menu-avatar {
  background: rgba(124,158,248,0.18);
  color: var(--cobalt-600);
}
.app-topbar-menu-name {
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--text);
}
.app-topbar-menu-role {
  font-size: 0.6rem;
  color: var(--muted);
  letter-spacing: 0.08em;
}
.app-topbar-menu-sep {
  height: 1px;
  background: var(--border);
  margin: 0.4rem 0;
}
.app-topbar-menu-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.55rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.4rem 0.6rem 0.15rem;
}
.app-topbar-menu-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  text-align: left;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out);
}
.app-topbar-menu-item:hover { background: var(--surface2); }
.app-topbar-menu-item.app-topbar-menu-danger { color: var(--error); }
.app-topbar-menu-item.app-topbar-menu-warn { color: var(--warning); }
.app-topbar-menu-status {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.7rem;
  color: var(--text2);
}
.app-topbar-menu-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border2);
}
.app-topbar-menu-dot.ok {
  background: var(--success);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent);
}
.app-topbar-menu-dot.err { background: var(--error); }
.app-topbar-menu-dot.loading {
  background: var(--cobalt-500);
  animation: pulse 1.5s ease-in-out infinite;
}

/* Notifications dropdown */
.app-topbar-notifs {
  position: absolute;
  top: calc(100% + 6px);
  right: 58px;
  width: 360px;
  max-height: 500px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 101;
}
.app-topbar-notifs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.app-topbar-notifs-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 0.95rem;
  margin: 0;
}
.app-topbar-notifs-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.3rem;
}
.app-topbar-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.75rem;
  text-decoration: none;
  color: var(--text);
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease-out);
  position: relative;
}
.app-topbar-notif-item:hover { background: var(--surface2); }
.app-topbar-notif-item.unread { background: var(--cobalt-50); }
body.dark .app-topbar-notif-item.unread { background: rgba(124,158,248,0.08); }
.app-topbar-notif-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.app-topbar-notif-icon.severity-error { background: var(--error-bg); color: var(--error); }
.app-topbar-notif-icon.severity-warning { background: var(--warning-bg); color: var(--warning); }
.app-topbar-notif-icon.severity-info { background: var(--accent-bg); color: var(--accent); }
.app-topbar-notif-body { flex: 1; min-width: 0; }
.app-topbar-notif-title {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text);
}
.app-topbar-notif-time {
  font-size: 0.65rem;
  color: var(--muted);
  margin-top: 0.15rem;
}
.app-topbar-notif-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cobalt-500);
  margin-top: 0.5rem;
  flex-shrink: 0;
}
.app-topbar-notifs-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  text-align: center;
}

/* Masquer ancienne sidebar (style garde pour fallback futur) */
.app-layout--topbar .app-sidebar,
.app-layout--topbar .app-sidebar-backdrop,
.app-layout--topbar .app-hamburger { display: none !important; }

@media (max-width: 768px) {
  .app-topbar { padding: 0.55rem 0.9rem; gap: 0.5rem; }
  .app-topbar-search-placeholder { display: none; }
  .app-topbar-username { display: none; }
  .app-topbar-search { padding: 0.4rem 0.7rem; }
  .app-topbar-notifs { right: 0; width: 300px; }
}

/* ── Hamburger (mobile only) ─────────────────────────────────── */
.app-hamburger {
  display: none;
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 60;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.45rem;
  cursor: pointer;
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* ── Backdrop (mobile only) ──────────────────────────────────── */
.app-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 49;
}
.app-sidebar-backdrop.visible { display: block; }

/* ── Sidebar container ───────────────────────────────────────── */
.app-sidebar {
  width: 220px;
  min-width: 220px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  z-index: 50;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ── Logo ────────────────────────────────────────────────────── */
.app-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1.25rem;
  text-decoration: none;
  flex-shrink: 0;
}

.app-sidebar-logo img {
  height: 28px;
  border-radius: 8px;
}

.app-sidebar-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Separator ───────────────────────────────────────────────── */
.app-sidebar-sep {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: 0.25rem 1rem;
  flex-shrink: 0;
}

/* ── Nav section ─────────────────────────────────────────────── */
.app-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem 0.75rem;
}

/* ── Nav item ────────────────────────────────────────────────── */
.app-sidebar-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  color: var(--text2);
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  position: relative;
}

.app-sidebar-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0.7;
}

.app-sidebar-item:hover {
  background: var(--surface2);
  color: var(--text);
  transform: translateX(2px);
}

.app-sidebar-item:hover svg {
  opacity: 1;
  color: var(--accent);
}

.app-sidebar-item.active {
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 600;
  border-left: 3px solid var(--accent);
  padding-left: calc(0.75rem - 3px);
  box-shadow: inset 0 0 12px var(--accent-glow);
}

.app-sidebar-item.active svg {
  opacity: 1;
  color: var(--accent);
}

/* ── Sidebar badge (monitoring alerts) ───────────────────────── */
.app-sidebar-badge {
  margin-left: auto;
  background: var(--warning, #f59e0b);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.2rem 0.4rem;
  border-radius: 10px;
  min-width: 1.1rem;
  text-align: center;
}
.app-sidebar-badge.critical {
  background: var(--error, #ef4444);
  animation: pulse-badge 2s ease-in-out infinite;
}
@keyframes pulse-badge {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ── Spacer ──────────────────────────────────────────────────── */
.app-sidebar-spacer {
  flex: 1;
}

/* ── View as (admin dropdown) ────────────────────────────────── */
.app-sidebar-viewas {
  position: relative;
  padding: 0 0.75rem;
  margin-bottom: 0.25rem;
}

.app-viewas-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 0.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem 0;
  width: 100%;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  z-index: 100;
}

.app-viewas-link {
  display: block;
  padding: 0.45rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  transition: background 0.1s;
}

.app-viewas-link:hover {
  background: var(--surface2);
  color: var(--accent);
}

.app-viewas-exit {
  color: var(--warning, #f59e0b);
  border: 1px solid var(--warning, #f59e0b);
  border-radius: 8px;
}
.app-viewas-exit:hover {
  background: rgba(245, 158, 11, 0.1);
}

/* ── Footer ──────────────────────────────────────────────────── */
.app-sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem 0.75rem 0.75rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* API status row */
.app-sidebar-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.72rem;
  color: var(--muted);
  font-family: 'Space Mono', monospace;
}

.app-sidebar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}
.app-sidebar-dot.ok { background: var(--success); box-shadow: 0 0 6px rgba(47,158,68,0.4); }
.app-sidebar-dot.err { background: var(--error); box-shadow: 0 0 6px rgba(201,42,42,0.4); }
.app-sidebar-dot.loading { background: var(--accent); animation: pulse 1.2s infinite; }

.app-sidebar-status-label {
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* User info */
.app-sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
}

.app-sidebar-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gradient-accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px var(--accent-glow);
}

.app-sidebar-username {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Footer items styling */
.app-sidebar-footer .app-sidebar-item {
  padding: 0.4rem 0.75rem;
  font-size: 0.78rem;
}

.app-sidebar-footer .app-sidebar-item svg {
  width: 18px;
  height: 18px;
}

/* ── Responsive: sidebar overlay on mobile ───────────────────── */
@media (max-width: 768px) {
  .app-hamburger {
    display: flex;
  }

  .app-sidebar {
    position: fixed;
    left: -220px;
    top: 0;
    height: 100vh;
    transition: left 0.25s ease;
  }

  .app-sidebar.open {
    left: 0;
  }

  .app-main {
    padding: 3.5rem 1rem 1rem;
  }
  .app-main.no-pad { padding: 0; overflow: hidden; }
}

/* ── Dark mode adjustments ───────────────────────────────────── */
body.dark .app-sidebar {
  background: var(--surface);
  border-right-color: var(--border);
}

body.dark .app-sidebar-label {
  color: var(--navy);
}

body.dark .app-sidebar-avatar {
  background: var(--gradient-accent);
  color: #fff;
}

/* ── System page ──────────────────────────────────────── */
.sys-grid-5 { display:grid; grid-template-columns:repeat(5,1fr); gap:0.75rem; margin-bottom:1.5rem; }
.sys-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:0.75rem; margin-bottom:1.5rem; }
.sys-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:0.75rem; margin-bottom:1.5rem; }
.sys-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.5rem; }

/* Integration status */
.sys-integration { display:flex; align-items:center; gap:0.75rem; padding:0.9rem 1.2rem; }
.sys-integration-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.sys-integration-dot.ok { background:var(--success); }
.sys-integration-dot.err { background:var(--error); opacity:0.6; }
.sys-integration-name { font-size:0.82rem; font-weight:600; color:var(--navy); }
.sys-integration-status { font-family:'Space Mono',monospace; font-size:0.65rem; color:var(--muted); }
body.dark .sys-integration-name { color:var(--text); }

/* Detail rows in cards */
.sys-detail-row { display:flex; align-items:center; justify-content:space-between; padding:0.5rem 0; border-bottom:1px solid var(--border); }
.sys-detail-row:last-child { border-bottom:none; }
.sys-detail-label { font-size:0.78rem; color:var(--text2); display:flex; align-items:center; gap:0.5rem; }
.sys-detail-value { font-family:'Space Mono',monospace; font-size:0.78rem; color:var(--navy); font-weight:600; }
body.dark .sys-detail-value { color:var(--text); }

/* Action badges in audit log */
.sys-badge-info { background:var(--accent-bg); color:var(--accent); }
.sys-badge-success { background:var(--success-bg); color:var(--success); }
.sys-badge-accent2 { background:rgba(12,133,153,0.08); color:var(--accent2); }
.sys-badge-warning { background:var(--warning-bg); color:var(--warning); }

/* Refresh button */
.sys-btn-refresh { background:none; border:1px solid var(--border2); border-radius:6px; padding:0.3rem 0.6rem; font-family:'Space Mono',monospace; font-size:0.65rem; color:var(--accent); cursor:pointer; display:inline-flex; align-items:center; gap:0.3rem; transition:all 0.15s; }
.sys-btn-refresh:hover { background:var(--accent-bg); border-color:var(--accent); }
.sys-btn-refresh:disabled { opacity:0.5; cursor:not-allowed; }

/* Responsive */
@media (max-width:768px) {
  .sys-grid-5 { grid-template-columns:repeat(2,1fr); }
  .sys-grid-4 { grid-template-columns:repeat(2,1fr); }
  .sys-grid-3 { grid-template-columns:repeat(2,1fr); }
  .sys-grid-2 { grid-template-columns:1fr; }
}

/* ── User cards (admin/users) ──────────────────────────────── */
.user-card { border-left: 4px solid transparent; transition: transform 0.15s, box-shadow 0.15s; }
.user-card:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.10); }
body.dark .user-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.25); }

.user-avatar { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1rem; flex-shrink:0; color:#fff; background: linear-gradient(135deg, var(--avatar-color), color-mix(in srgb, var(--avatar-color) 60%, #000)); }

.activity-item { display:flex; align-items:flex-start; gap:0.75rem; padding:0.6rem 0; border-bottom:1px solid var(--border); font-size:0.78rem; }
.activity-item:last-child { border-bottom:none; }
.activity-dot { width:8px; height:8px; border-radius:50%; margin-top:0.35rem; flex-shrink:0; }

/* ── Inline table input + remove button + alert banners + result rows ── */
.td-input { padding:0; }
.td-input input[type="text"],
.td-input input[type="number"] {
  width:100%; border:none; background:transparent;
  padding:0.3rem 0.5rem; font-family:'Space Mono',monospace; font-size:0.8rem;
}
.td-input .form-input { border-radius:0; padding:0.3rem 0.5rem; font-size:0.8rem; }

.btn-remove {
  border:none; background:none; cursor:pointer;
  color:var(--text-secondary); font-size:0.85rem;
  padding:0.2rem 0.4rem; opacity:0.4;
  transition:opacity 0.15s, color 0.15s;
}
.btn-remove:hover { opacity:1; color:var(--error); }

.max-w-xs { max-width:100px; }

.alert-banner {
  padding:0.5rem 0.75rem; border-radius:8px; font-size:0.85rem;
  display:flex; align-items:center; gap:0.5rem;
}
.alert-banner-warning {
  background:var(--warning-bg); color:rgb(180,100,0);
  border:1px solid rgba(245,159,11,0.25);
}
.alert-banner-error {
  background:var(--error-bg); color:var(--error);
  border:1px solid rgba(201,42,42,0.2);
}
.alert-banner-success {
  background:var(--success-bg); color:var(--success);
  border:1px solid rgba(47,158,68,0.2);
}

.result-row {
  margin-bottom:0.35rem; padding:0.4rem 0.6rem;
  border-radius:6px; font-size:0.85rem;
}
.result-row-ok {
  background:var(--success-bg); border:1px solid rgba(47,158,68,0.2);
}
.result-row-err {
  background:var(--error-bg); border:1px solid rgba(201,42,42,0.2);
}

.raw-pre {
  background:var(--bg-inset); padding:0.5rem; border-radius:6px;
  font-size:0.75rem; overflow-x:auto; max-height:200px;
  border:1px solid var(--border);
}

.bulk-result {
  margin-top:0.75rem; padding:0.75rem; border-radius:8px;
  background:var(--success-bg); border:1px solid rgba(47,158,68,0.2);
  font-size:0.85rem;
}

/* ══════════════════════════════════════════════════════════════
   Analytics — ECharts pages (tabs, period, drilldown, filters)
   ══════════════════════════════════════════════════════════════ */

/* ── Analytics tabs : supprimees P1e, classes .tabs + .tab unifiees L527 ── */

/* ── Period selector ──────────────────────────────────────── */
.analytics-presets {
  display:inline-flex; gap:0; border:1px solid var(--border); border-radius:8px; overflow:hidden;
}
.analytics-preset {
  padding:0.35rem 0.7rem; font-size:0.75rem; font-weight:600; font-family:'Space Mono',monospace;
  background:transparent; color:var(--text2); border:none; cursor:pointer;
  transition:all 0.15s; border-right:1px solid var(--border);
}
.analytics-preset:last-child { border-right:none; }
.analytics-preset:hover { background:var(--surface2); color:var(--text); }
.analytics-preset.active { background:var(--accent); color:#fff; }

/* Compare toggle */
.analytics-compare {
  display:flex; align-items:center; gap:0.35rem; font-size:0.72rem;
  font-family:'Space Mono',monospace; color:var(--muted); cursor:pointer; margin-left:0.75rem;
}
.analytics-compare input[type="checkbox"] { width:14px; height:14px; accent-color:var(--accent); }

/* ── Filter badge ─────────────────────────────────────────── */
.analytics-filter-badge {
  display:flex; align-items:center; flex-wrap:wrap; gap:0.4rem;
  padding:0.45rem 0.75rem; background:var(--accent-bg); border:1px solid rgba(59,91,219,0.15);
  border-radius:8px; margin-bottom:var(--space-4, 1rem);
}
.analytics-filter-tag {
  display:inline-flex; align-items:center; gap:0.3rem;
  padding:0.15rem 0.5rem; background:var(--surface); border:1px solid var(--border);
  border-radius:5px; font-size:0.72rem; color:var(--text);
}
.analytics-filter-clear {
  background:none; border:none; color:var(--muted); cursor:pointer;
  font-size:0.85rem; line-height:1; padding:0 0.15rem;
}
.analytics-filter-clear:hover { color:var(--error); }

/* ── Chart containers for ECharts ─────────────────────────── */
.echart-box {
  width:100%; min-height:280px;
}
.echart-box-sm { min-height:220px; }
.echart-box-lg { min-height:340px; }

/* ── KPI stat-cards (analytics) — .analytics-kpi-row supprimee P1e (.kpi-row) ───────────────────────────── */
.analytics-kpi {
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:0.85rem 1rem; position:relative; overflow:hidden;
  transition:transform 0.2s, box-shadow 0.2s;
}
.analytics-kpi:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.06); }
.analytics-kpi::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--gradient-accent); opacity:0.7;
}
.analytics-kpi.success::before { background:var(--gradient-success); }
.analytics-kpi.warning::before { background:var(--gradient-warm); }
.analytics-kpi-label {
  font-family:'Space Mono',monospace; font-size:0.6rem; font-weight:700;
  color:var(--muted); text-transform:uppercase; letter-spacing:0.1em;
  margin-bottom:0.35rem;
}
.analytics-kpi-value {
  font-size:1.35rem; font-weight:700; color:var(--text);
  font-family:'Space Mono',monospace; line-height:1.2;
}
.analytics-kpi-delta {
  font-size:0.65rem; font-family:'Space Mono',monospace; margin-top:0.2rem;
}

/* ── Drilldown modal ──────────────────────────────────────── */
.drilldown-overlay {
  display:none; position:fixed; inset:0; z-index:100;
  background:rgba(0,0,0,0.45); backdrop-filter:blur(4px);
  align-items:center; justify-content:center; padding:2rem;
}
.drilldown-overlay.open { display:flex; }
.drilldown-panel {
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  width:100%; max-width:900px; max-height:80vh; display:flex; flex-direction:column;
  box-shadow:0 16px 48px rgba(0,0,0,0.15); animation:fadeSlideUp 0.25s ease;
}
.drilldown-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.25rem; border-bottom:1px solid var(--border);
}
.drilldown-title {
  font-size:1rem; font-weight:700; color:var(--text); margin:0;
}
.drilldown-body {
  flex:1; overflow-y:auto; padding:1rem 1.25rem;
}
.drilldown-info {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:0.75rem; font-size:0.78rem; color:var(--muted);
  font-family:'Space Mono',monospace;
}
.drilldown-loading {
  text-align:center; padding:2rem 0; color:var(--muted); font-size:0.85rem;
}

/* ── Chart skeleton (analytics) ──────────────────────────── */
.chart-skeleton {
  height:200px; background:var(--border); border-radius:8px;
  animation:shimmer 1.4s ease-in-out infinite;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .analytics-tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .analytics-kpi-row { grid-template-columns:repeat(2, 1fr); }
  .analytics-period { flex-direction:column; align-items:stretch; }
  .drilldown-panel { max-width:100%; margin:0; border-radius:12px; }
  .drilldown-overlay { padding:1rem; }
}
@media (max-width: 480px) {
  .analytics-kpi-row { grid-template-columns:1fr; }
}

/* ══════════════════════════════════════════════════════════
   TODO Dashboard
   ══════════════════════════════════════════════════════════ */

/* ── Issue status select ───────────────────────────────── */
.issue-status-select {
  font-size:0.65rem; font-weight:600; padding:0.15rem 0.35rem;
  border-radius:6px; border:1px solid transparent;
  cursor:pointer; appearance:auto;
  -webkit-appearance:menulist; background:transparent;
}
.issue-st-human_needed { background:var(--error); color:#fff; border-color:var(--error); }
.issue-st-open { background:rgba(148,163,184,0.15); color:#64748b; }
.issue-st-triaged { background:rgba(59,130,246,0.15); color:#3b82f6; }
.issue-st-fixing { background:rgba(245,158,11,0.15); color:#f59e0b; }
.issue-st-fixed { background:rgba(34,197,94,0.15); color:#22c55e; }
.issue-st-wont_fix { background:rgba(148,163,184,0.1); color:#94a3b8; }
body.dark .issue-st-open { background:rgba(148,163,184,0.1); }
body.dark .issue-st-triaged { background:rgba(59,130,246,0.1); }
body.dark .issue-st-fixing { background:rgba(245,158,11,0.1); }
body.dark .issue-st-fixed { background:rgba(34,197,94,0.1); }

.issue-toggle-btn {
  width:32px; height:18px; border-radius:9px; border:none; cursor:pointer;
  background:var(--surface2, #d1d5db); position:relative; transition:background 0.2s;
  padding:0; flex-shrink:0;
}
.issue-toggle-btn.active { background:var(--accent); }
.issue-toggle-knob {
  display:block; width:14px; height:14px; border-radius:50%;
  background:#fff; position:absolute; top:2px; left:2px;
  transition:transform 0.2s;
}
.issue-toggle-knob.on { transform:translateX(14px); }

.todo-section-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.25rem; cursor:pointer; user-select:none;
  transition:background 0.15s;
}
.todo-section-header:hover { background:var(--surface2, #f9fafb); }
body.dark .todo-section-header:hover { background:var(--surface2, #1c1c1c); }

.todo-section-icon {
  width:32px; height:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; flex-shrink:0;
}
.todo-section-count {
  font-size:0.7rem; font-weight:600; padding:2px 8px;
  border-radius:12px; background:var(--surface2, #f3f4f6);
}
body.dark .todo-section-count { background:var(--surface2, #242424); }

.todo-deadline {
  font-size:0.7rem; padding:2px 8px; border-radius:12px;
  color:var(--warning, #f59e0b); background:rgba(234,179,8,0.1);
}
.todo-deadline.overdue {
  color:var(--error); background:rgba(239,68,68,0.1);
}

/* Tasks */
.todo-task-item {
  display:flex; align-items:flex-start; gap:0.625rem;
  padding:0.625rem 0; border-bottom:1px solid var(--border, #e5e7eb);
}
body.dark .todo-task-item { border-bottom-color:var(--border, #2a2a2a); }
.todo-task-item:last-of-type { border-bottom:none; }

.todo-checkbox {
  width:18px; height:18px; border-radius:4px;
  border:2px solid var(--muted, #9ca3af); background:transparent;
  cursor:pointer; flex-shrink:0; margin-top:2px;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; color:transparent; transition:all 0.15s;
}
.todo-checkbox:hover { border-color:var(--accent); }
.todo-checkbox.checked {
  background:var(--success); border-color:var(--success); color:white;
}
.todo-task-done { text-decoration:line-through; color:var(--muted, #9ca3af); }

/* Priority dots */
.todo-prio-dot {
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  margin-top:6px; cursor:pointer; transition:all 0.15s;
}
.todo-prio-dot.high { background:var(--error); box-shadow:0 0 6px rgba(239,68,68,0.4); }
.todo-prio-dot.medium { background:var(--warning, #f59e0b); box-shadow:0 0 6px rgba(234,179,8,0.3); }
.todo-prio-dot.low { background:var(--muted, #9ca3af); }
.todo-prio-dot.none { background:var(--surface2, #e5e7eb); border:1px solid var(--border, #d1d5db); }
body.dark .todo-prio-dot.none { background:var(--surface2, #242424); border-color:var(--border, #333); }

.todo-prio-menu {
  position:absolute; top:-4px; left:16px;
  background:var(--surface, white); border:1px solid var(--border, #e5e7eb);
  border-radius:8px; padding:4px; z-index:50;
  display:flex; gap:4px; box-shadow:0 4px 12px rgba(0,0,0,0.15);
}
body.dark .todo-prio-menu { background:var(--surface, #141414); box-shadow:0 4px 12px rgba(0,0,0,0.5); }

.todo-prio-opt {
  width:22px; height:22px; border-radius:4px; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:700; color:white; transition:transform 0.1s;
}
.todo-prio-opt:hover { transform:scale(1.15); }
.todo-prio-opt.high { background:var(--error); }
.todo-prio-opt.medium { background:var(--warning, #f59e0b); }
.todo-prio-opt.low { background:var(--muted, #9ca3af); }
.todo-prio-opt.none { background:var(--surface2, #e5e7eb); color:var(--muted); border:1px solid var(--border); }

/* Tags */
.todo-tag {
  font-size:0.65rem; padding:1px 6px; border-radius:10px;
  font-weight:500; display:inline-flex; align-items:center; gap:3px;
  cursor:default;
}
.todo-tag-preset { cursor:pointer; margin:2px; }
.todo-tag-preset:hover { opacity:0.8; transform:scale(1.05); }
.todo-tag-urgent { color:var(--error); background:rgba(239,68,68,0.1); }
.todo-tag-warning { color:var(--warning, #f59e0b); background:rgba(234,179,8,0.1); }
.todo-tag-info { color:var(--accent); background:rgba(59,130,246,0.1); }
.todo-tag-ok { color:var(--success); background:rgba(34,197,94,0.1); }
.todo-tag-dev { color:#a855f7; background:rgba(168,85,247,0.1); }
.todo-tag-custom { color:#06b6d4; background:rgba(6,182,212,0.1); }

.todo-tag-remove {
  cursor:pointer; opacity:0.5; font-size:8px; margin-left:2px;
}
.todo-tag-remove:hover { opacity:1; }

.todo-add-tag-btn {
  font-size:0.65rem; padding:1px 6px; border-radius:10px;
  border:1px dashed var(--border, #d1d5db); background:transparent;
  color:var(--muted); cursor:pointer; transition:all 0.15s;
}
.todo-add-tag-btn:hover { border-color:var(--accent); color:var(--accent); }

.todo-tag-menu {
  position:absolute; bottom:24px; left:0;
  background:var(--surface, white); border:1px solid var(--border);
  border-radius:8px; padding:8px; z-index:50; min-width:220px;
  box-shadow:0 4px 16px rgba(0,0,0,0.15);
}
body.dark .todo-tag-menu { background:var(--surface, #141414); box-shadow:0 4px 16px rgba(0,0,0,0.5); }

/* Icon buttons */
.todo-icon-btn {
  width:24px; height:24px; border-radius:4px; border:none;
  background:transparent; color:var(--muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.15s;
}
.todo-icon-btn:hover { background:var(--surface2, #f3f4f6); color:var(--text); }
body.dark .todo-icon-btn:hover { background:var(--surface2, #242424); }
.todo-icon-btn-danger:hover { background:rgba(239,68,68,0.1); color:var(--error); }

.todo-task-actions {
  display:flex; gap:4px; flex-shrink:0; opacity:0; transition:opacity 0.15s;
}
.todo-task-item:hover .todo-task-actions { opacity:1; }

/* Filters */
.todo-filter-btn {
  font-size:0.8rem; font-weight:500; padding:0.3rem 0.9rem;
  border-radius:20px; border:1px solid var(--border, #e5e7eb);
  background:var(--surface, white); color:var(--muted);
  cursor:pointer; transition:all 0.15s;
}
body.dark .todo-filter-btn { background:var(--surface, #141414); border-color:var(--border, #2a2a2a); }
.todo-filter-btn:hover { border-color:var(--muted); color:var(--text); }
.todo-filter-btn.active { background:var(--accent); color:white; border-color:var(--accent); }

/* Dialog */
.todo-dialog {
  border:none; border-radius:12px; padding:0;
  background:var(--surface, white); color:var(--text);
  box-shadow:0 20px 60px rgba(0,0,0,0.3); max-width:500px; width:90%;
}
body.dark .todo-dialog { background:var(--surface, #1a1a1a); }
.todo-dialog::backdrop { background:rgba(0,0,0,0.5); }
.todo-dialog-content { padding:1.5rem; }

/* ── Daily Briefing ─────────────────────────────────────── */
.briefing-card { border-left:3px solid var(--accent); }
.briefing-border-vert { border-left-color:#22c55e; }
.briefing-border-jaune { border-left-color:#f59e0b; }
.briefing-border-rouge { border-left-color:#ef4444; }

.briefing-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.25rem; cursor:pointer; user-select:none;
  transition:background 0.15s;
}
.briefing-header:hover { background:var(--surface2, #f9fafb); }
body.dark .briefing-header:hover { background:var(--surface2, #1c1c1c); }

.briefing-status-dot {
  width:12px; height:12px; border-radius:50%; flex-shrink:0;
}
.briefing-status-vert { background:#22c55e; box-shadow:0 0 8px rgba(34,197,94,0.4); }
.briefing-status-jaune { background:#f59e0b; box-shadow:0 0 8px rgba(245,158,11,0.4); }
.briefing-status-rouge { background:#ef4444; box-shadow:0 0 8px rgba(239,68,68,0.4); }

.briefing-status-badge {
  font-size:0.7rem; font-weight:700; padding:2px 10px; border-radius:12px;
  letter-spacing:0.5px;
}
.briefing-badge-vert { color:#22c55e; background:rgba(34,197,94,0.1); }
.briefing-badge-jaune { color:#f59e0b; background:rgba(245,158,11,0.1); }
.briefing-badge-rouge { color:#ef4444; background:rgba(239,68,68,0.1); }

.briefing-section {
  padding:0.75rem 0; border-bottom:1px solid var(--border, #e5e7eb);
}
body.dark .briefing-section { border-bottom-color:var(--border, #2a2a2a); }
.briefing-section:last-child { border-bottom:none; }

.briefing-section-title {
  font-weight:700; font-size:0.8rem; text-transform:uppercase;
  letter-spacing:0.5px; color:var(--muted, #9ca3af);
  margin-bottom:0.5rem;
}

/* Agent chips */
.briefing-agent-grid {
  display:flex; gap:0.5rem; flex-wrap:wrap;
}
.briefing-agent-chip {
  display:flex; flex-direction:column; padding:0.35rem 0.75rem;
  border-radius:8px; border-left:3px solid; min-width:100px;
  background:var(--surface2, #f3f4f6);
}
body.dark .briefing-agent-chip { background:var(--surface2, #1c1c1c); }
.briefing-agent-chip.chip-ok { border-left-color:#22c55e; }
.briefing-agent-chip.chip-err { border-left-color:#ef4444; }
.briefing-agent-chip.chip-warn { border-left-color:#f59e0b; }

/* Issues */
.briefing-issue-row {
  display:flex; align-items:center; gap:0.5rem; padding:0.25rem 0;
  flex-wrap:wrap;
}
.briefing-severity {
  font-size:0.6rem; font-weight:700; padding:1px 6px; border-radius:4px;
}
.briefing-severity.sev-high,.briefing-severity.sev-critical { color:#ef4444; background:rgba(239,68,68,0.1); }
.briefing-severity.sev-medium { color:#f59e0b; background:rgba(245,158,11,0.1); }
.briefing-severity.sev-low { color:var(--muted); background:var(--surface2, #f3f4f6); }

/* Alerts */
.briefing-alert-row {
  display:flex; align-items:center; gap:0.5rem; padding:0.3rem 0;
}
.briefing-alert-icon { font-size:0.9rem; flex-shrink:0; }

/* Category grid */
.briefing-cat-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:0.5rem;
}
.briefing-cat-card {
  padding:0.5rem 0.75rem; border-radius:8px;
  background:var(--surface2, #f3f4f6);
}
body.dark .briefing-cat-card { background:var(--surface2, #1c1c1c); }

/* Client rows */
.briefing-client-row {
  padding:0.5rem 0; border-bottom:1px solid var(--border, #e5e7eb);
}
body.dark .briefing-client-row { border-bottom-color:var(--border, #2a2a2a); }
.briefing-client-row:last-child { border-bottom:none; }

/* Action rows */
.briefing-action-row {
  display:flex; align-items:center; gap:0.5rem; padding:0.4rem 0;
}
.briefing-action-num {
  width:20px; height:20px; border-radius:50%;
  background:var(--accent); color:white; font-size:0.7rem;
  font-weight:700; display:flex; align-items:center;
  justify-content:center; flex-shrink:0;
}

/* AI briefing content */
.briefing-ai-content {
  font-size:0.85rem; line-height:1.6;
  padding:0.75rem; border-radius:8px;
  background:var(--surface2, #f3f4f6);
  max-height:500px; overflow-y:auto;
}
body.dark .briefing-ai-content { background:var(--surface2, #1c1c1c); }

.color-error { color:var(--error) !important; }

.briefing-details { margin-top:0.25rem; }
.briefing-details summary:hover { color:var(--accent); }
.briefing-raw {
  margin-top:0.5rem; padding:0.75rem; border-radius:8px;
  background:var(--surface2, #f3f4f6); font-size:0.75rem;
  line-height:1.5; white-space:pre-wrap; word-break:break-word;
  max-height:400px; overflow-y:auto;
}
body.dark .briefing-raw { background:var(--surface2, #1c1c1c); }

/* Mobile */
@media (max-width: 640px) {
  .todo-task-actions { opacity:1; }
  .briefing-agent-grid { gap:0.35rem; }
  .briefing-agent-chip { min-width:80px; padding:0.25rem 0.5rem; }
  .briefing-cat-grid { grid-template-columns:1fr 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   ░░ EDITORIAL WARM — Late overrides (must beat declarations above) ░░
   ════════════════════════════════════════════════════════════════ */

/* Stat-card Editorial Warm late-override — consolide dans la declaration canonique L1475 (P1d) */

/* Modal title — Fraunces editorial */
.modal-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: -0.005em;
}
.modal-header { background: var(--surface2); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.modal-footer { border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--surface2); }

/* Result card warm gradient bar */
.result-card {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.result-card-bar {
  background: linear-gradient(90deg, var(--cobalt-500), var(--cobalt-300), var(--accent));
  background-size: 200% 100%;
}
.result-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}

/* Spreadsheet hover warm */
.spreadsheet tbody tr:hover {
  background: color-mix(in srgb, var(--cobalt-500) 5%, transparent);
}

/* Filters panel warm */
.filters-panel {
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}

/* Login backdrop — Slate & Cobalt gradient (was warm terracotta) */
.login-bg {
  background:
    radial-gradient(ellipse at 20% 80%, rgba(59,91,219,0.18), transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(12,133,153,0.12), transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(124,158,248,0.10), transparent 60%),
    var(--bg);
  background-size: 200% 200%;
  animation: gradientShift 12s ease infinite;
}
.login-h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
}
.login-submit {
  background: var(--gradient-warm) !important;
  box-shadow: var(--shadow-cobalt) !important;
  border-radius: var(--radius-md) !important;
}
.login-submit:hover {
  box-shadow: 0 8px 28px rgba(59,91,219,0.28) !important;
}
.login-input:focus {
  border-color: var(--cobalt-400) !important;
  box-shadow: 0 0 0 3px var(--cobalt-glow) !important;
}

/* Navbar logo brand warmer */
.navbar-logo-text,
.navbar-link.active {
  color: var(--cobalt-600);
}
.navbar-link.active {
  background: var(--cobalt-50);
}

/* Pipeline-badge active in tabs (system, operations) */
.pipeline-badge {
  border-radius: var(--radius-md);
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.005em;
}
.pipeline-badge.warm {
  background: var(--cobalt-500);
  color: #fff;
  box-shadow: var(--shadow-cobalt-sm);
}
.pipeline-badge.warm::before { background: #fff; }

/* Step (pipeline progress) — active state warm */
.step.active {
  border-color: var(--cobalt-200);
  background: var(--cobalt-50);
}
.step.active .step-status {
  color: var(--cobalt-600);
}
.step.active .step-sub-fill {
  background: var(--cobalt-500);
}

/* ── Operations — warm pipeline button ── */
.btn-api-run {
  background: var(--gradient-warm) !important;
  box-shadow: var(--shadow-cobalt) !important;
  border-radius: var(--radius-md) !important;
  transition: all var(--duration-base) var(--ease-out) !important;
}
.btn-api-run:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(59,91,219,0.30) !important;
}
.btn-api-run:disabled {
  background: var(--border) !important;
  color: var(--muted) !important;
  box-shadow: none !important;
}

/* ── Carrier Invoice upload zone ── */
.upload-zone {
  border: 2px dashed var(--cobalt-300);
  background: linear-gradient(180deg, var(--cobalt-50), var(--surface) 70%);
  border-radius: var(--radius-lg);
  transition: all var(--duration-base) var(--ease-out);
}
.upload-zone:hover, .upload-zone.drag-over {
  border-color: var(--cobalt-500);
  background: linear-gradient(180deg, var(--cobalt-100), var(--cobalt-50) 70%);
  transform: scale(1.005);
  box-shadow: var(--shadow-cobalt);
}

/* ── Carrier Invoice slot (per-carrier) ── */
.ci-slot {
  border: 2px dashed var(--border2);
  background: var(--surface);
  border-radius: var(--radius-lg);
  transition: all var(--duration-base) var(--ease-out);
}
.ci-slot:hover {
  border-color: var(--cobalt-300);
  background: var(--cobalt-50);
  transform: translateY(-1px);
}
.ci-slot.has-file {
  border-style: solid;
  border-color: var(--cobalt-500);
  background: linear-gradient(180deg, var(--cobalt-50), var(--surface) 70%);
}

/* ── Operations select / date inputs warm focus ── */
.select-client,
.input-date {
  border-radius: var(--radius-md);
  background-color: var(--surface);
  border: 1.5px solid var(--border);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.select-client:focus,
.input-date:focus {
  border-color: var(--cobalt-400) !important;
  box-shadow: 0 0 0 3px var(--cobalt-glow) !important;
}

/* ── Dispatch error table row hover warm ── */
.history-table tbody tr:hover {
  background: var(--cobalt-50);
}

/* ── Dispatch by-OMS clickable cards ── */
.card.card-interactive[style*="cursor:pointer"]:hover {
  border-color: var(--cobalt-500);
  background: var(--cobalt-50);
}

/* ════════════════════════════════════════════════════════════════
   ░░ Tchat multi-agents (phase 5 — inspired Claude Cowork / Code Desktop) ░░
   ════════════════════════════════════════════════════════════════ */

.tchat-card {
  overflow: visible;
}

/* Feed scrollable container */
.tchat-feed {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 440px;
  min-height: 220px;
  overflow-y: auto;
  padding: 1rem;
  background: var(--surface2);
  border-radius: var(--radius-md);
  margin-bottom: 0.85rem;
  border: 1px solid var(--border);
}

.tchat-feed::-webkit-scrollbar {
  width: 8px;
}
.tchat-feed::-webkit-scrollbar-track {
  background: transparent;
}
.tchat-feed::-webkit-scrollbar-thumb {
  background: var(--border2);
  border-radius: 4px;
}

.tchat-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 2.5rem 1rem;
  font-style: italic;
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Each message row (avatar + bubble) */
.tchat-row {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  max-width: 85%;
}
.tchat-row-human {
  margin-left: auto;
  flex-direction: row-reverse;
}
.tchat-row-agent {
  margin-right: auto;
}

/* Avatar */
.tchat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(15,23,42,0.06));
}
.tchat-avatar-human {
  background: var(--accent, #c92a2a);
}
.tchat-avatar-agent {
  background: var(--cobalt-500);
}

/* Message bubble */
.tchat-bubble {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.55rem 0.8rem;
  border-radius: 12px;
  max-width: 100%;
  word-break: break-word;
}
.tchat-bubble-human {
  background: var(--accent, #c92a2a);
  color: #fff;
  border-top-right-radius: 2px;
}
.tchat-bubble-agent {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-top-left-radius: 2px;
}

/* Meta line : role + target + channel + time */
.tchat-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.65rem;
  font-family: 'Space Mono', monospace;
  letter-spacing: 0.02em;
  opacity: 0.85;
  flex-wrap: wrap;
}
.tchat-bubble-human .tchat-meta { color: rgba(255,255,255,0.85); }
.tchat-bubble-agent .tchat-meta { color: var(--text-muted); }

.tchat-role {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tchat-bubble-human .tchat-role { color: #fff; }
.tchat-bubble-agent .tchat-role { color: var(--cobalt-600); }

.tchat-to {
  font-weight: 500;
}
.tchat-channel {
  background: rgba(0,0,0,0.08);
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
}
.tchat-bubble-human .tchat-channel { background: rgba(255,255,255,0.2); }

.tchat-time {
  margin-left: auto;
  font-size: 0.62rem;
  opacity: 0.7;
}

/* Message content (readable, not monospaced) */
.tchat-content {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.82rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.tchat-bubble-human .tchat-content { color: #fff; }
.tchat-bubble-agent .tchat-content { color: var(--text); }

/* ── Composer ───────────────────────────────────────────────────── */

.tchat-composer {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.tchat-composer-header {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.tchat-composer-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent, #c92a2a);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.tchat-composer-field {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
}
.tchat-composer-field-label {
  color: var(--text-muted);
  font-weight: 500;
}
.tchat-composer-field select,
.tchat-composer-field input {
  padding: 0.3rem 0.5rem;
  font-size: 0.72rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface2);
  color: var(--text);
  max-width: 180px;
}
.tchat-composer-field input {
  max-width: 110px;
}

.tchat-composer-input-row {
  display: flex;
  gap: 0.55rem;
  align-items: stretch;
}
.tchat-composer-input-row textarea {
  flex: 1;
  padding: 0.55rem 0.7rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.85rem;
  line-height: 1.45;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface2);
  color: var(--text);
  resize: vertical;
  min-height: 56px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tchat-composer-input-row textarea:focus {
  outline: none;
  border-color: var(--cobalt-500);
  box-shadow: 0 0 0 3px rgba(59,91,219,0.12);
}

.tchat-send-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.95rem;
  background: var(--success, #16a34a);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  align-self: stretch;
}
.tchat-send-btn:hover:not(:disabled) {
  background: #15803d;
  transform: translateY(-1px);
}
.tchat-send-btn:disabled {
  background: var(--border2);
  color: var(--text-muted);
  cursor: not-allowed;
}

.tchat-composer-hint {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ── Sessions cards ─────────────────────────────────────────────── */

.tchat-session-card {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.7rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--success);
  border-radius: var(--radius-md);
  transition: box-shadow 0.15s ease;
}
.tchat-session-card:hover {
  box-shadow: var(--shadow-sm, 0 2px 6px rgba(15,23,42,0.06));
}

.tchat-session-avatar {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cobalt-50);
  color: var(--cobalt-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tchat-session-pulse {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--success, #16a34a);
  border: 2px solid var(--surface);
  animation: pulse 1.8s ease-in-out infinite;
}

.tchat-session-body { flex: 1; min-width: 0; }

.tchat-session-header {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.tchat-session-role {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--cobalt-600);
  letter-spacing: 0.03em;
}

.tchat-session-persona {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.tchat-session-time {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-left: auto;
}

.tchat-session-scope {
  margin-top: 0.2rem;
  font-size: 0.74rem;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tchat-session-actions {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}

/* ── Generic soft / danger action buttons ──────────────────────── */

.tchat-btn-soft,
.tchat-btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text2);
  white-space: nowrap;
}
.tchat-btn-soft:hover {
  background: var(--cobalt-50);
  border-color: var(--cobalt-500);
  color: var(--cobalt-600);
}
.tchat-btn-danger {
  color: var(--error, #c92a2a);
  border-color: rgba(201,42,42,0.25);
}
.tchat-btn-danger:hover {
  background: rgba(201,42,42,0.08);
  border-color: var(--error, #c92a2a);
}

/* ── Spawn block ────────────────────────────────────────────────── */

.tchat-spawn {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: var(--cobalt-50);
  border: 1px dashed var(--cobalt-500);
  border-radius: var(--radius-md);
}

.tchat-spawn-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cobalt-600);
  margin-bottom: 0.55rem;
}

.tchat-spawn-input-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.tchat-spawn-input-row select,
.tchat-spawn-input-row input {
  padding: 0.35rem 0.55rem;
  font-size: 0.78rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
}
.tchat-spawn-input-row select { max-width: 200px; }
.tchat-spawn-input-row input { flex: 1; min-width: 200px; }

/* ── Lock cards ─────────────────────────────────────────────────── */

.tchat-lock-card {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  padding: 0.65rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--warning, #f59e0b);
  border-radius: var(--radius-md);
}
.tchat-lock-body { flex: 1; min-width: 0; }
.tchat-lock-path {
  font-family: 'Space Mono', monospace;
  font-size: 0.78rem;
  font-weight: 600;
  word-break: break-all;
  color: var(--text);
}
.tchat-lock-meta {
  margin-top: 0.2rem;
  font-size: 0.7rem;
  color: var(--text-muted);
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.tchat-lock-role {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  color: var(--cobalt-600);
}

/* ── Delegation cards ───────────────────────────────────────────── */

.tchat-delegation-card {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.65rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.tchat-delegation-body { flex: 1; min-width: 0; }
.tchat-delegation-header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
}
.tchat-delegation-role {
  font-weight: 700;
  color: var(--cobalt-600);
  letter-spacing: 0.03em;
}
.tchat-delegation-status {
  font-size: 0.6rem;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tchat-status-completed { background: var(--success, #16a34a); color: #fff; }
.tchat-status-failed { background: var(--error, #c92a2a); color: #fff; }
.tchat-status-in_progress { background: var(--cobalt-500); color: #fff; }
.tchat-status-pending { background: var(--border2); color: var(--text2); }

.tchat-delegation-time {
  margin-left: auto;
  font-size: 0.65rem;
  color: var(--text-muted);
}

.tchat-delegation-task {
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: var(--text);
  line-height: 1.4;
}

.tchat-delegation-result {
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ── Responsive (mobile) ───────────────────────────────────────── */

@media (max-width: 640px) {
  .tchat-row { max-width: 95%; }
  .tchat-composer-header { flex-direction: column; align-items: stretch; }
  .tchat-session-actions { flex-direction: column; }
}

/* ── Admin dashboard landing V2 (P2.3) — operational focus ── */

/* Critical alerts banner */
.dashboard-alert {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border2);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text);
  margin-bottom: 0.5rem;
  transition: all var(--duration-base) var(--ease-out);
}
.dashboard-alert:hover { transform: translateX(3px); box-shadow: var(--shadow-sm); }
.dashboard-alert--error { border-left-color: var(--error); background: var(--error-bg); }
.dashboard-alert--warning { border-left-color: var(--warning); background: var(--warning-bg); }
.dashboard-alert--error { color: var(--error); }
.dashboard-alert--warning { color: var(--warning); }
.dashboard-alert-body { flex: 1; min-width: 0; color: var(--text); }
.dashboard-alert-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
}
.dashboard-alert-desc { font-size: 0.72rem; color: var(--text2); margin-top: 0.1rem; }
.dashboard-alert-count {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.dashboard-alert--error .dashboard-alert-count { color: var(--error); }
.dashboard-alert--warning .dashboard-alert-count { color: var(--warning); }

/* Topbar — compact greeting + health row */
.dashboard-topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 0;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.dashboard-topbar-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  margin: 0;
}
.dashboard-topbar-sub {
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: capitalize;
  margin: 0.2rem 0 0;
}
.dashboard-health { display: flex; gap: 0.5rem; }
.dashboard-health-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--surface);
}
.dashboard-health-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--border2);
}
.dashboard-health-item.ok .dashboard-health-dot { background: var(--success); box-shadow: 0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent); }
.dashboard-health-item.warn .dashboard-health-dot { background: var(--warning); }
.dashboard-health-item.error .dashboard-health-dot { background: var(--error); animation: pulse 1.5s ease-in-out infinite; }
.dashboard-health-item.idle .dashboard-health-dot { background: var(--border2); }

/* 2-col grid (responsive) */
.dashboard-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
@media (max-width: 960px) {
  .dashboard-2col { grid-template-columns: 1fr; }
}

/* Today card */
.dashboard-today { padding: 1.5rem 1.75rem; }
.dashboard-today-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.dashboard-today-number {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: 3.2rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--cobalt-600);
  margin-top: 0.35rem;
}
.dashboard-today-sub {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.25rem;
}
.dashboard-today-delta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: 'Space Mono', monospace;
  background: var(--surface2);
  color: var(--muted);
  flex-shrink: 0;
}
.dashboard-today-delta.up { background: var(--success-bg); color: var(--success); }
.dashboard-today-delta.down { background: var(--error-bg); color: var(--error); }

.dashboard-today-breakdown {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--border);
}

/* Sparkline 14 jours ouvres */
.dashboard-spark {
  margin: 1rem 0 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border);
}
.dashboard-spark-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}
.dashboard-spark-label,
.dashboard-spark-legend {
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.dashboard-spark-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 40px;
}
.dashboard-spark-bars.is-empty { align-items: center; justify-content: center; }
.dashboard-spark-empty { font-size: 0.7rem; }
.dashboard-spark-bar-wrap {
  flex: 1;
  min-width: 4px;
  height: 100%;
  display: flex;
  align-items: flex-end;
  cursor: help;
  border-radius: 2px;
  transition: background var(--duration-fast) var(--ease-out);
}
.dashboard-spark-bar-wrap:hover { background: var(--surface2); }
.dashboard-spark-bar {
  width: 100%;
  min-height: 2px;
  background: color-mix(in srgb, var(--cobalt-500) 35%, transparent);
  border-radius: 2px;
  transition: background var(--duration-fast) var(--ease-out);
}
.dashboard-spark-bar-wrap:hover .dashboard-spark-bar {
  background: var(--cobalt-500);
}
.dashboard-spark-bar-wrap.is-today .dashboard-spark-bar {
  background: var(--cobalt-600);
}

/* Chip aujourd'hui (remplace delta pill) */
.dashboard-today-today-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-size: 0.65rem;
  color: var(--text2);
  background: var(--surface2);
  border: 1px solid var(--border);
  letter-spacing: 0.02em;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Breakdown semaine : total + transporteurs */
.dashboard-week {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--border);
}
.dashboard-week-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}
.dashboard-week-label {
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 0.15rem;
}
.dashboard-week-total {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--text);
  letter-spacing: -0.01em;
}
.dashboard-week-sub {
  font-size: 0.62rem;
  letter-spacing: 0.04em;
}
.dashboard-week-carriers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.dashboard-week-carrier {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.75rem;
}
.dashboard-week-carrier-dot {
  width: 8px; height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}
.dashboard-week-carrier-name {
  min-width: 80px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-week-carrier-bar {
  flex: 1;
  height: 6px;
  background: var(--surface2);
  border-radius: 3px;
  overflow: hidden;
}
.dashboard-week-carrier-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  transition: width var(--duration-base) var(--ease-out);
}
.dashboard-week-carrier-count {
  min-width: 56px;
  text-align: right;
  font-size: 0.72rem;
  color: var(--text);
  font-weight: 500;
}

/* Card Agents IA : chaine + compteurs */
.dashboard-agents {
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}
.dashboard-agents-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.dashboard-agents-sub {
  font-size: 0.7rem;
  color: var(--text2);
  margin-top: 0.2rem;
  letter-spacing: 0.02em;
}
.dashboard-agents-link {
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.dashboard-agents-link:hover { color: var(--cobalt-600); }

.dashboard-agents-chain {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 0;
  border-top: 1px dashed var(--border);
  border-bottom: 1px dashed var(--border);
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
}
.dashboard-agents-chain-node {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.dashboard-agents-chain-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--border2);
  flex-shrink: 0;
}
.dashboard-agents-chain-node.state-ok .dashboard-agents-chain-dot {
  background: var(--success);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent);
}
.dashboard-agents-chain-node.state-error .dashboard-agents-chain-dot {
  background: var(--error);
  animation: pulse 1.5s ease-in-out infinite;
}
.dashboard-agents-chain-name {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  text-transform: lowercase;
}
.dashboard-agents-chain-when {
  font-size: 0.62rem;
  color: var(--muted);
  letter-spacing: 0.03em;
}
.dashboard-agents-chain-sep {
  color: var(--border2);
  margin: 0 0.1rem;
  flex-shrink: 0;
}

/* Groupes agents : chaine + autonomes */
.dashboard-agents-group {
  margin-bottom: 0.65rem;
}
.dashboard-agents-group-label {
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.dashboard-agents-standalone {
  display: flex;
  align-items: center;
  gap: 0.85rem 1.25rem;
  flex-wrap: wrap;
}

/* Bouton unique : issues ouvertes */
.dashboard-agents-issues {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 0.95rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text2);
  text-decoration: none;
  transition: transform var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
  margin-top: 0.35rem;
}
.dashboard-agents-issues:hover {
  transform: translateY(-1px);
  border-color: var(--border2);
}
.dashboard-agents-issues.has-issues {
  background: var(--warning-bg);
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
  color: var(--warning);
}
.dashboard-agents-issues.has-issues:hover {
  border-color: var(--warning);
}

/* Card acces briefing + todo (2 CTAs, compact) */
.dashboard-briefing-inline {
  padding: 1.1rem 1.4rem;
  margin-bottom: 1rem;
  border-left: 3px solid var(--cobalt-500);
}
.dashboard-briefing-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.dashboard-briefing-hint {
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0.2rem 0 0;
}
.dashboard-briefing-ctas {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.dashboard-briefing-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: var(--cobalt-50);
  border: 1px solid color-mix(in srgb, var(--cobalt-500) 25%, transparent);
  color: var(--cobalt-600);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.dashboard-briefing-cta:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-cobalt-sm);
}
.dashboard-briefing-cta--alt {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border2);
}
.dashboard-briefing-cta--alt:hover {
  border-color: var(--cobalt-500);
  color: var(--cobalt-600);
}

/* Quick Actions footer */
.dashboard-actions {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}
.dashboard-actions-header {
  margin-bottom: 0.6rem;
}
.dashboard-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
}
@media (max-width: 900px) {
  .dashboard-actions-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .dashboard-actions-grid { grid-template-columns: 1fr; }
}
.dashboard-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  text-align: left;
  transition: transform var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.dashboard-action:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--cobalt-500) 40%, var(--border));
  box-shadow: var(--shadow-sm);
}
.dashboard-action:disabled {
  opacity: 0.55;
  cursor: wait;
}
.dashboard-action-icon {
  width: 18px;
  height: 18px;
  color: var(--cobalt-600);
  margin-bottom: 0.25rem;
}
.dashboard-action-icon.is-spinning { animation: spin 0.9s linear infinite; }
.dashboard-action-label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.2;
}
.dashboard-action-hint {
  font-size: 0.58rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Modale TODO embed (iframe) */
.dashboard-todo-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(3px);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.dashboard-todo-backdrop.open { opacity: 1; pointer-events: auto; }
body.dark .dashboard-todo-backdrop { background: rgba(0, 0, 0, 0.65); }

.dashboard-todo-modal {
  position: fixed;
  top: 2.5vh; left: 2.5vw;
  width: 95vw;
  height: 95vh;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 999;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.97);
  transition: opacity 220ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.dashboard-todo-modal.open {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.dashboard-todo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
}
.dashboard-todo-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.dashboard-todo-title h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text);
}
.dashboard-todo-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.dashboard-todo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: border-color var(--duration-base) var(--ease-out);
}
.dashboard-todo-link:hover {
  border-color: var(--cobalt-500);
  color: var(--cobalt-600);
}
.dashboard-todo-content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.dashboard-todo-inner {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Les styles tv2-* (defini plus haut) s'appliquent directement.
   On normalise juste le root pour qu'il remplisse la modale. */
.dashboard-todo-inner > .tv2-root {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dashboard-todo-inner .tv2-layout {
  flex: 1;
  min-height: 0;
}
.dashboard-today-stat-label {
  font-size: 0.55rem;
  color: var(--muted);
  letter-spacing: 0.08em;
  margin-bottom: 0.15rem;
}
.dashboard-today-stat-val {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--text);
  letter-spacing: -0.01em;
}

/* Top OMS list */
.dashboard-topoms { padding: 1.25rem 1.5rem; }
.dashboard-oms-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.dashboard-oms-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.5rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}
.dashboard-oms-row:hover { background: var(--surface2); }
.dashboard-oms-rank {
  font-size: 0.7rem;
  color: var(--muted);
  min-width: 20px;
}
.dashboard-oms-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.dashboard-oms-name {
  font-weight: 500;
  font-size: 0.85rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-oms-delta {
  font-size: 0.65rem;
  color: var(--muted);
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  background: var(--surface2);
}
.dashboard-oms-delta.up { color: var(--success); background: var(--success-bg); }
.dashboard-oms-delta.down { color: var(--error); background: var(--error-bg); }
.dashboard-oms-count {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--text);
  min-width: 60px;
  text-align: right;
}

/* Top OMS enrichi : sparkline + on-time + delta */
.dashboard-oms-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.dashboard-oms-line1 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.dashboard-oms-line1 .dashboard-oms-name {
  font-weight: 500;
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.dashboard-oms-line2 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.dashboard-oms-spark {
  display: inline-flex;
  align-items: flex-end;
  gap: 1.5px;
  height: 14px;
  flex-shrink: 0;
}
.dashboard-oms-spark-bar {
  width: 3px;
  min-height: 2px;
  border-radius: 1px;
  opacity: 0.8;
}
.dashboard-oms-ontime {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  flex-shrink: 0;
}
.dashboard-oms-ontime.ot-good { color: var(--success); background: var(--success-bg); }
.dashboard-oms-ontime.ot-mid { color: var(--warning); background: var(--warning-bg); }
.dashboard-oms-ontime.ot-low { color: var(--error); background: var(--error-bg); }
.dashboard-oms-line2 .dashboard-oms-delta {
  font-size: 0.6rem;
  margin-left: auto;
}

/* Attention requise — agrege alerts monitoring + agents + anomalies */
.dashboard-attention { margin-bottom: 1.25rem; }
.dashboard-attention-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.55rem;
}
.dashboard-attention-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  color: var(--text);
  margin: 0;
}
.dashboard-attention-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--warm-500);
  color: white;
  font-size: 0.62rem;
  font-weight: 600;
}
.dashboard-attention-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.dashboard-attention-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.95rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border2);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text);
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.dashboard-attention-item:hover {
  transform: translateX(2px);
  box-shadow: var(--shadow-sm);
}
.dashboard-attention-item.sev-critical {
  border-left-color: var(--error);
  background: var(--error-bg);
}
.dashboard-attention-item.sev-warning {
  border-left-color: var(--warning);
  background: var(--warning-bg);
}
.dashboard-attention-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--border2);
}
.dashboard-attention-item.sev-critical .dashboard-attention-dot {
  background: var(--error);
  animation: pulse 1.5s ease-in-out infinite;
}
.dashboard-attention-item.sev-warning .dashboard-attention-dot { background: var(--warning); }
.dashboard-attention-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.dashboard-attention-label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text);
}
.dashboard-attention-desc {
  font-size: 0.7rem;
  color: var(--text2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-attention-badge {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--text);
  min-width: 28px;
  text-align: right;
  letter-spacing: -0.01em;
}
.dashboard-attention-item.sev-critical .dashboard-attention-badge { color: var(--error); }
.dashboard-attention-item.sev-warning .dashboard-attention-badge { color: var(--warning); }

/* Briefing card trigger + modal */
.briefing-card-trigger {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  cursor: pointer;
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
  border-left: 3px solid var(--cobalt-500);
  margin-bottom: 1rem;
}
.briefing-card-trigger:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-cobalt-sm);
}
.briefing-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--cobalt-50);
  color: var(--cobalt-600);
  flex-shrink: 0;
}
.briefing-card-body { flex: 1; min-width: 0; }
.briefing-card-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: -0.005em;
  color: var(--text);
}
.briefing-card-desc { font-size: 0.78rem; color: var(--muted); margin-top: 0.2rem; }
.briefing-card-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  color: var(--cobalt-600);
  font-weight: 600;
  flex-shrink: 0;
}
.briefing-card-date { color: var(--muted); font-weight: 400; font-size: 0.65rem; }

.briefing-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.45);
  backdrop-filter: blur(3px);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.briefing-modal-backdrop.open { opacity: 1; pointer-events: auto; }
body.dark .briefing-modal-backdrop { background: rgba(0,0,0,0.6); }

.briefing-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, calc(-50% + 20px));
  width: min(900px, 94vw);
  max-height: 88vh;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 999;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
.briefing-modal.open {
  opacity: 1;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}
.briefing-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.75rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  gap: 1rem;
}
.briefing-modal-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text);
}
.briefing-modal-sub {
  font-size: 0.7rem;
  color: var(--muted);
  margin: 0.2rem 0 0;
}
.briefing-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.75rem 2rem;
}

/* Trend chart 14 jours (barres verticales) */
.dashboard-trend {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 6px;
  align-items: end;
  height: 140px;
  padding-bottom: 20px;
  position: relative;
}
.dashboard-trend-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  position: relative;
}
.dashboard-trend-bar {
  width: 100%;
  min-height: 4px;
  background: linear-gradient(180deg, var(--cobalt-500), var(--cobalt-400));
  border-radius: 4px 4px 0 0;
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
  cursor: default;
}
.dashboard-trend-col:hover .dashboard-trend-bar {
  background: linear-gradient(180deg, var(--cobalt-600), var(--cobalt-500));
  transform: scaleY(1.02);
}
.dashboard-trend-label {
  position: absolute;
  bottom: -18px;
  font-size: 0.55rem;
  color: var(--muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .dashboard-trend { height: 100px; }
  .dashboard-trend-label { font-size: 0.5rem; }
}

@media (max-width: 640px) {
  .dashboard-hero { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .dashboard-hero-title { font-size: 1.7rem; }
}

/* ── OMS grille cards + toolbar (P2.1 V2 — scalable a 30+ OMS) ── */
.oms-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0 1.25rem;
  flex-wrap: wrap;
}
.oms-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 200px;
  padding: 0.5rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-out);
}
.oms-search:focus-within { border-color: var(--cobalt-400); box-shadow: 0 0 0 3px var(--cobalt-glow); }
.oms-search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
}
.oms-search-clear {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0.2rem;
  display: inline-flex;
  align-items: center;
}
.oms-search-clear:hover { color: var(--text); }

.oms-filter-pills { display: flex; gap: 0.25rem; }
.oms-pill {
  padding: 0.4rem 0.85rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  font-family: 'Inter', sans-serif;
}
.oms-pill:hover { border-color: var(--cobalt-300); color: var(--cobalt-600); }
.oms-pill.active {
  background: var(--cobalt-500);
  color: #fff;
  border-color: var(--cobalt-500);
}

.oms-sort-select {
  padding: 0.4rem 2rem 0.4rem 0.85rem;
  font-size: 0.75rem;
  color: var(--text2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.oms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.oms-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.85rem 0.95rem;
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
  --oms-brand: var(--accent);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.oms-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--oms-brand, var(--accent));
  opacity: 0.85;
}
.oms-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--oms-brand, var(--accent)) 18%, transparent);
  border-color: color-mix(in srgb, var(--oms-brand, var(--accent)) 40%, var(--border));
}
.oms-card.selected {
  border-color: var(--oms-brand, var(--accent));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--oms-brand, var(--accent)) 25%, transparent), var(--shadow-cobalt-sm);
}

.oms-card-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.oms-card-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--radius-md);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.oms-card-name-block { flex: 1; min-width: 0; }
.oms-card-name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--text);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oms-card-last {
  font-family: 'Space Mono', monospace;
  font-size: 0.62rem;
  color: var(--muted);
  margin-top: 0.1rem;
}
.oms-card-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  flex-shrink: 0;
}
.oms-card-pill .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border2);
}
.oms-card-pill.active .dot {
  background: var(--success);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--success) 20%, transparent);
}

.oms-card-metrics {
  display: flex;
  gap: 0;
  font-family: 'Space Mono', monospace;
  font-size: 0.65rem;
  color: var(--muted);
  padding: 0.35rem 0;
  border-top: 1px dashed var(--border);
  border-bottom: 1px dashed var(--border);
}
.oms-card-metric {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
}
.oms-card-metric strong {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--text);
  letter-spacing: -0.01em;
}
.oms-card-metric span { font-size: 0.55rem; letter-spacing: 0.06em; text-transform: uppercase; }

.oms-card-sparkline {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 24px;
}

/* Carrier card delivery rate progress bar (utilise par /tracking/) */
.carrier-card-progress {
  height: 5px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.carrier-card-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width var(--duration-base) var(--ease-out);
  min-width: 2px;
}

/* Command palette Cmd+K (Phase 3 — partial _command_palette.html) */
.cmdk-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.45);
  backdrop-filter: blur(3px);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.cmdk-backdrop.open { opacity: 1; pointer-events: auto; }
body.dark .cmdk-backdrop { background: rgba(0,0,0,0.6); }

.cmdk-modal {
  position: fixed;
  top: 15vh; left: 50%;
  transform: translate(-50%, -8px);
  width: min(640px, 94vw);
  max-height: 70vh;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(15,23,42,0.25), 0 0 0 1px rgba(124,158,248,0.08);
  z-index: 999;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.cmdk-modal.open {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.cmdk-search {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.cmdk-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
}
.cmdk-input::placeholder { color: var(--muted); }
.cmdk-kbd {
  font-family: 'Space Mono', monospace;
  font-size: 0.65rem;
  padding: 0.2rem 0.45rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--muted);
  flex-shrink: 0;
}

.cmdk-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.4rem 0.35rem;
}
.cmdk-group-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.7rem 0.9rem 0.3rem;
}
.cmdk-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.55rem 0.75rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text);
  text-align: left;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  transition: background var(--duration-fast) var(--ease-out);
}
.cmdk-item.selected {
  background: var(--cobalt-50);
  color: var(--cobalt-700);
}
body.dark .cmdk-item.selected {
  background: rgba(124,158,248,0.12);
  color: var(--cobalt-600);
}
.cmdk-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  background: var(--surface2);
  color: var(--text2);
  flex-shrink: 0;
}
.cmdk-item.selected .cmdk-item-icon {
  background: var(--cobalt-100);
  color: var(--cobalt-600);
}
.cmdk-item-icon i { width: 15px; height: 15px; }
.cmdk-item-label { flex: 1; }
.cmdk-item-hint {
  font-size: 0.65rem;
  color: var(--muted);
}

.cmdk-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 2rem 1rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.cmdk-footer {
  display: flex;
  gap: 1rem;
  padding: 0.55rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--surface2);
  font-size: 0.65rem;
  color: var(--muted);
}
.cmdk-footer-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.cmdk-footer-hint kbd {
  font-family: 'Space Mono', monospace;
  padding: 0.1rem 0.35rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 0.6rem;
  color: var(--text2);
}

/* Hint sidebar : ajouter indicateur Cmd+K */

/* Empty state editorial (Phase 3 — partial _empty_state.html) */
.empty-state-ed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.6rem;
  padding: 3rem 1.5rem;
  color: var(--muted);
}
.empty-state-ed--sm { padding: 1.75rem 1rem; gap: 0.45rem; }
.empty-state-ed-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--cobalt-50);
  color: var(--cobalt-500);
  margin-bottom: 0.25rem;
}
.empty-state-ed--sm .empty-state-ed-icon { width: 38px; height: 38px; }
.empty-state-ed-icon i { width: 22px; height: 22px; }
.empty-state-ed--sm .empty-state-ed-icon i { width: 16px; height: 16px; }
.empty-state-ed-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: -0.005em;
  color: var(--text);
  margin: 0;
}
.empty-state-ed--sm .empty-state-ed-title { font-size: 0.9rem; }
.empty-state-ed-desc {
  font-size: 0.82rem;
  color: var(--muted);
  max-width: 420px;
  line-height: 1.5;
  margin: 0.1rem 0 0;
}
.empty-state-ed--sm .empty-state-ed-desc { font-size: 0.75rem; }
.empty-state-ed-cta {
  margin-top: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
body.dark .empty-state-ed-icon {
  background: rgba(124,158,248,0.12);
  color: var(--cobalt-300);
}

/* Empty state : carrier sans colis (visibilite commerciale mais dim) */
.oms-card.oms-card--empty { opacity: 0.55; }
.oms-card.oms-card--empty:hover { opacity: 0.85; }
.oms-card.oms-card--empty .oms-card-last { font-style: italic; }
.oms-card-spark-bar {
  flex: 1;
  min-height: 2px;
  background: var(--border2);
  border-radius: 2px 2px 0 0;
  opacity: 0.75;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.oms-card:hover .oms-card-spark-bar { opacity: 1; }

/* Historique list inside side-panel */
.oms-history-list { display: flex; flex-direction: column; gap: 0.2rem; }
.oms-history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0.6rem;
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease-out);
  gap: 0.75rem;
}
.oms-history-item:hover { background: var(--surface2); }
.oms-history-main { min-width: 0; flex: 1; }
.oms-history-dates { font-size: 0.75rem; font-weight: 600; color: var(--text); }
.oms-history-meta {
  display: flex;
  gap: 0.5rem;
  font-family: 'Space Mono', monospace;
  font-size: 0.62rem;
  color: var(--muted);
  margin-top: 0.15rem;
}
.oms-history-review { color: var(--warning); }
.oms-history-cost { color: var(--success); font-weight: 600; }
.oms-history-side {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.oms-history-date { white-space: nowrap; }

/* ── Agent model badges (opus/sonnet/haiku) — light + dark variants ── */
.model-badge {
  font-size: 0.6rem;
  padding: 0.15rem 0.45rem;
  font-family: 'Space Mono', monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.model-badge--opus    { background: rgba(139,92,246,0.12); color: #7c3aed; }
.model-badge--haiku   { background: rgba(22,163,74,0.12);  color: #16a34a; }
.model-badge--sonnet  { background: rgba(59,91,219,0.12);  color: #3b5bdb; }
body.dark .model-badge--opus   { color: #c4b5fd; }   /* purple clair, lisible sur dark */
body.dark .model-badge--haiku  { color: #86efac; }   /* green clair */
body.dark .model-badge--sonnet { color: #93b5fc; }   /* cobalt clair */

/* ════════════════════════════════════════════════════════════════
   ░░ TODO v2 — "Lanes & Focus" (Google Tasks / MS To Do inspired) ░░
   ──────────────────────────────────────────────────────────────
   3-zone layout : sidebar (lists) | main (tasks) | detail (slide-in)
   Preserves backward-compat : legacy .todo-* classes stay until deprecated
   ════════════════════════════════════════════════════════════════ */

:root {
  --tv2-sidebar-w: 240px;
  --tv2-content-max: 760px;
  --tv2-detail-w: 380px;
  --tv2-row-h: 44px;
  --tv2-check-size: 20px;

  --tv2-cat-client: var(--cobalt-500);
  --tv2-cat-app: var(--accent2);
  --tv2-cat-transport: var(--slate-500);
  --tv2-cat-autres: var(--warning, #f59e0b);
}

/* Root container */
.tv2-root { position: relative; }

.tv2-loading {
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
  padding: 4rem 2rem; color: var(--muted);
}
.tv2-loading i { width: 28px; height: 28px; animation: spin 1s linear infinite; }

/* ── Layout grid ───────────────────────────────────────────── */
.tv2-layout {
  display: grid;
  grid-template-columns: var(--tv2-sidebar-w) 1fr;
  gap: 0;
  min-height: calc(100vh - 140px);
  position: relative;
}

/* ── Sidebar ───────────────────────────────────────────────── */
.tv2-sidebar {
  border-right: 1px solid var(--border);
  padding: 1.25rem 0.75rem;
  background: transparent;
  display: flex; flex-direction: column; gap: 0.25rem;
  position: sticky; top: 0; align-self: start;
  max-height: 100vh; overflow-y: auto;
}

.tv2-sidebar-header {
  padding: 0 0.5rem 0.75rem;
}
.tv2-sidebar-title {
  font-family: 'Fraunces', serif;
  font-weight: 500; font-size: 1.25rem;
  color: var(--navy, var(--text));
  margin: 0;
  letter-spacing: -0.01em;
}

.tv2-search-wrap {
  position: relative;
  margin: 0 0.25rem 1rem;
}
.tv2-search-wrap i {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--slate-400); pointer-events: none;
}
.tv2-search {
  width: 100%; padding: 0.4rem 0.6rem 0.4rem 2rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  font-size: 0.85rem; transition: border-color var(--duration-fast);
}
.tv2-search:focus {
  outline: none; border-color: var(--cobalt-400);
  box-shadow: 0 0 0 3px rgba(59,91,219,0.08);
}

.tv2-sidebar-group {
  padding: 0.5rem 0 0.75rem;
}
.tv2-sidebar-label {
  font-family: 'Fraunces', serif;
  font-size: 0.7rem; font-weight: 500;
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--muted);
  padding: 0.25rem 0.75rem 0.5rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.tv2-sidebar-label::after {
  content: ""; flex: 1; height: 1px;
  background: var(--border);
  margin-left: 0.25rem;
}

.tv2-list-item {
  width: 100%; display: flex; align-items: center; gap: 0.6rem;
  padding: 0.45rem 0.75rem;
  border: none; background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer; text-align: left;
  color: var(--text2);
  font-size: 0.85rem; font-weight: 400;
  transition: background var(--duration-fast), color var(--duration-fast), transform var(--duration-fast);
  position: relative;
}
.tv2-list-item:hover {
  background: var(--slate-100);
  color: var(--text);
  transform: translateX(1px);
}
.tv2-list-item.active {
  background: var(--cobalt-50);
  color: var(--cobalt-700);
  font-weight: 600;
  transform: none;
}
.tv2-list-item.active::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px; background: var(--cobalt-500);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 6px rgba(59,91,219,0.3);
}
.tv2-list-item i {
  width: 15px; height: 15px; color: inherit; flex-shrink: 0;
  transition: color var(--duration-fast);
}

/* Smart list icon colors (before active state override) */
.tv2-sl-icon-today { color: var(--warning) !important; }
.tv2-sl-icon-important { color: var(--error) !important; }
.tv2-sl-icon-overdue { color: var(--error) !important; }
.tv2-sl-icon-done { color: var(--success) !important; }
.tv2-list-item.active .tv2-sl-icon-today,
.tv2-list-item.active .tv2-sl-icon-important,
.tv2-list-item.active .tv2-sl-icon-overdue,
.tv2-list-item.active .tv2-sl-icon-done { color: inherit !important; }
.tv2-list-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  display: inline-block;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.5);
  transition: box-shadow var(--duration-fast);
}
.tv2-list-item:hover .tv2-list-dot {
  box-shadow: 0 0 0 2px currentColor;
  opacity: 0.85;
}
.tv2-list-item.active .tv2-list-dot {
  box-shadow: 0 0 0 2px rgba(59,91,219,0.2);
}
.tv2-list-name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tv2-list-count {
  font-size: 0.68rem; font-weight: 600;
  font-family: 'Space Mono', monospace;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  background: var(--slate-100);
  padding: 1px 6px; border-radius: 9px;
  flex-shrink: 0;
  letter-spacing: 0;
}
.tv2-list-item.active .tv2-list-count {
  background: var(--cobalt-100); color: var(--cobalt-700);
}
.tv2-list-item.urgent .tv2-list-dot::after {
  content: ""; position: absolute; width: 9px; height: 9px;
  border-radius: 50%; background: currentColor; animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); }
  50% { box-shadow: 0 0 0 4px rgba(239,68,68,0); }
}

.tv2-list-add {
  width: 100%; display: flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.75rem; margin-top: 0.25rem;
  border: none; background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer; color: var(--slate-500);
  font-size: 0.8rem; font-weight: 500;
  transition: color var(--duration-fast), background var(--duration-fast);
}
.tv2-list-add:hover { color: var(--cobalt-500); background: var(--cobalt-50); }
.tv2-list-add i { width: 14px; height: 14px; }

/* ── Main zone ─────────────────────────────────────────────── */
.tv2-main {
  padding: 2rem 2.5rem 3rem;
  max-width: calc(var(--tv2-content-max) + 5rem);
  width: 100%;
  margin: 0 auto;
}

.tv2-main-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.25rem;
}
.tv2-main-title {
  font-family: 'Fraunces', serif;
  font-weight: 500; font-size: 1.75rem;
  color: var(--navy, var(--text));
  margin: 0 0 0.15rem; letter-spacing: -0.015em;
  display: flex; align-items: center; gap: 0.75rem;
}
.tv2-main-title .tv2-urgent-pill {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em;
  padding: 3px 8px; border-radius: 4px;
  background: var(--error, #ef4444); color: white;
}
.tv2-main-subtitle {
  font-size: 0.82rem; color: var(--muted);
  margin-top: 0.15rem;
  line-height: 1.4;
}
.tv2-main-actions { display: flex; gap: 0.25rem; flex-shrink: 0; }

.tv2-main-meta {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.5rem 0; margin-bottom: 0.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.78rem; color: var(--muted);
  font-family: 'Space Mono', monospace;
  letter-spacing: -0.01em;
}
.tv2-filter-tabs {
  display: flex; gap: 0.15rem;
}
.tv2-filter-tabs button {
  border: none; background: transparent; cursor: pointer;
  padding: 0.3rem 0.7rem; border-radius: var(--radius-sm);
  font-size: 0.78rem; color: var(--slate-500);
  transition: background var(--duration-fast), color var(--duration-fast);
}
.tv2-filter-tabs button:hover { background: var(--slate-100); color: var(--text); }
.tv2-filter-tabs button.active {
  background: var(--slate-100); color: var(--text); font-weight: 600;
}

/* ── Task rows ─────────────────────────────────────────────── */
.tv2-tasks { margin-top: 0.25rem; }

.tv2-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.55rem 0.75rem;
  min-height: var(--tv2-row-h);
  border-bottom: 1px solid transparent;
  border-left: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--duration-fast), transform var(--duration-fast), border-left-color var(--duration-fast);
  position: relative;
}
.tv2-row:hover {
  background: var(--slate-50);
  transform: translateX(1px);
}
.tv2-row.selected {
  background: var(--cobalt-50);
  border-left-color: var(--cobalt-300);
}
.tv2-row.done .tv2-row-title {
  text-decoration: line-through;
  color: var(--slate-400);
}
/* High priority : accent terracotta (mapped to warm-500 = cobalt-500) — on utilise --error tint */
.tv2-row.prio-high-row {
  border-left-color: var(--error);
}
.tv2-row.done {
  opacity: 0.65;
  transition: opacity var(--duration-fast), transform var(--duration-fast);
}

.tv2-check {
  width: var(--tv2-check-size); height: var(--tv2-check-size);
  border-radius: 50%;
  border: 2px solid var(--slate-300);
  background: transparent;
  cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: transparent;
  transition: all var(--duration-fast);
  padding: 0;
}
.tv2-check:hover { border-color: var(--cobalt-400); }
.tv2-check.checked, .tv2-row.done .tv2-check {
  background: var(--cobalt-500); border-color: var(--cobalt-500);
  color: white;
}
.tv2-check i { width: 12px; height: 12px; stroke-width: 3; }
.tv2-check.lg { width: 24px; height: 24px; }
.tv2-check.lg i { width: 14px; height: 14px; }

.tv2-row-body { min-width: 0; }
.tv2-row-title {
  font-size: 0.9rem; color: var(--text); font-weight: 450;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: 1.3;
}
.tv2-row-sub {
  font-size: 0.7rem; color: var(--slate-500);
  margin-top: 2px;
  display: flex; align-items: center; gap: 0.4rem;
}
.tv2-row-sub .tv2-breadcrumb-dot {
  width: 6px; height: 6px; border-radius: 50%; display: inline-block;
}
.tv2-row-tags {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-top: 3px;
}

.tv2-tag {
  font-size: 0.65rem; font-weight: 500;
  padding: 1px 7px; border-radius: 10px;
  background: var(--slate-100); color: var(--slate-600);
  display: inline-flex; align-items: center; gap: 4px;
  line-height: 1.4;
}
.tv2-tag.urgent {
  background: rgba(239,68,68,0.08); color: var(--error, #ef4444);
}
.tv2-tag button {
  border: none; background: transparent; padding: 0; cursor: pointer;
  opacity: 0.5; color: inherit; display: flex; align-items: center;
}
.tv2-tag button:hover { opacity: 1; }
.tv2-tag button i { width: 10px; height: 10px; }

.tv2-row-meta {
  display: flex; align-items: center; gap: 0.6rem;
  flex-shrink: 0;
  color: var(--slate-500);
  font-size: 0.75rem;
}
.tv2-row-meta .tv2-prio {
  width: 14px; height: 14px;
}
.tv2-prio.prio-high { color: var(--error, #ef4444); }
.tv2-prio.prio-medium { color: var(--warning, #f59e0b); }
.tv2-prio.prio-low { color: var(--slate-400); }
.tv2-date {
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--muted);
}
.tv2-date.overdue {
  color: var(--error);
  font-weight: 600;
  background: var(--error-bg);
  padding: 1px 5px; border-radius: 4px;
}

.tv2-row-actions {
  display: none;
  align-items: center; gap: 0.2rem;
  flex-shrink: 0;
}
.tv2-row:hover .tv2-row-actions { display: flex; }
.tv2-row:hover .tv2-row-meta:not(:empty) { display: none; }

/* Add inline */
.tv2-row-add {
  cursor: text;
  color: var(--slate-400);
  border-left: 2px solid transparent;
  transition: color var(--duration-fast), border-left-color var(--duration-fast), background var(--duration-fast);
  min-height: 48px;
  margin-top: 0.25rem;
  border-radius: var(--radius-sm);
}
.tv2-row-add:hover {
  background: var(--cobalt-50);
  color: var(--cobalt-500);
  border-left-color: var(--cobalt-300);
  transform: none;
}
.tv2-row-add:has(.tv2-add-input:focus) {
  background: var(--cobalt-50);
  border-left-color: var(--cobalt-500);
}
.tv2-add-icon {
  width: 16px; height: 16px;
  color: var(--cobalt-400);
  transition: color var(--duration-fast);
  flex-shrink: 0;
}
.tv2-row-add:hover .tv2-add-icon,
.tv2-row-add:has(.tv2-add-input:focus) .tv2-add-icon {
  color: var(--cobalt-500);
}
.tv2-add-input {
  border: none; background: transparent; outline: none;
  width: 100%; font-size: 0.9rem; color: var(--text);
  padding: 0.1rem 0;
}
.tv2-add-input::placeholder {
  color: var(--slate-400);
  font-style: italic;
}

/* Done separator */
.tv2-done-sep {
  margin: 1.25rem 0 0.25rem;
  padding: 0 0.75rem;
}
.tv2-done-sep button {
  display: flex; align-items: center; gap: 0.5rem;
  border: none; background: transparent; cursor: pointer;
  font-family: 'Fraunces', serif;
  font-size: 0.78rem; font-weight: 400; font-style: italic;
  color: var(--muted);
  padding: 0.3rem 0; width: 100%;
  transition: color var(--duration-fast);
}
.tv2-done-sep button::before {
  content: ""; flex: none; width: 24px; height: 1px;
  background: var(--border);
}
.tv2-done-sep button::after {
  content: ""; flex: 1; height: 1px;
  background: var(--border);
}
.tv2-done-sep button:hover { color: var(--text2); }
.tv2-done-sep i { width: 12px; height: 12px; flex-shrink: 0; }

.tv2-empty {
  text-align: center; padding: 3.5rem 2rem 4rem;
  color: var(--muted); font-size: 0.9rem;
  animation: tv2-empty-in 400ms var(--ease-out) both;
}
@keyframes tv2-empty-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.tv2-empty-icon {
  width: 44px; height: 44px;
  margin: 0 auto 1rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--cobalt-50);
  color: var(--cobalt-400);
}
.tv2-empty-icon i { width: 22px; height: 22px; }
.tv2-empty-icon.success { background: var(--success-bg); color: var(--success); }
.tv2-empty-icon.warning { background: var(--warning-bg); color: var(--warning); }
.tv2-empty-title {
  font-family: 'Fraunces', serif;
  font-weight: 500; font-size: 1.1rem;
  color: var(--text2);
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}
.tv2-empty-sub {
  font-size: 0.82rem; color: var(--muted);
  max-width: 260px; margin: 0 auto;
  line-height: 1.5;
}

/* Icon button */
.tv2-icon-btn {
  width: 28px; height: 28px;
  border: none; background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer; color: var(--slate-500);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.tv2-icon-btn:hover { background: var(--slate-100); color: var(--text); }
.tv2-icon-btn.tv2-danger:hover { background: rgba(239,68,68,0.08); color: var(--error, #ef4444); }
.tv2-icon-btn i { width: 14px; height: 14px; }

/* ── Detail panel (slide-in right) ─────────────────────────── */
.tv2-detail {
  position: fixed;
  top: 0; right: 0;
  width: var(--tv2-detail-w);
  max-width: 90vw;
  height: 100vh;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  z-index: 40;
  display: flex; flex-direction: column;
  overflow: hidden;
}

.tv2-slide-enter {
  animation: tv2-slide-in 250ms var(--ease-out);
}
.tv2-slide-leave {
  animation: tv2-slide-out 200ms var(--ease-in-out);
}
@keyframes tv2-slide-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes tv2-slide-out {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

.tv2-detail-header {
  display: flex; justify-content: flex-end; align-items: center;
  padding: 0.75rem 1rem 0;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
}

.tv2-detail-body {
  flex: 1;
  padding: 0.5rem 1.5rem 2rem;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 1.25rem;
}

.tv2-detail-title {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.tv2-detail-title input {
  flex: 1; border: none; background: transparent; outline: none;
  font-family: 'Fraunces', serif;
  font-size: 1.4rem; font-weight: 500;
  color: var(--navy, var(--text));
  padding: 0;
  letter-spacing: -0.015em;
  line-height: 1.3;
  transition: color var(--duration-fast);
}
.tv2-detail-title input:focus {
  color: var(--text);
}
.tv2-detail-title.done input {
  text-decoration: line-through; color: var(--slate-400);
}

.tv2-detail-field { display: flex; flex-direction: column; gap: 0.4rem; }
.tv2-detail-field label {
  font-size: 0.63rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--muted);
  display: flex; align-items: center; gap: 0.4rem;
}
.tv2-detail-field label i {
  width: 11px; height: 11px; opacity: 0.7;
}
.tv2-detail-field textarea,
.tv2-detail-field input[type="text"],
.tv2-detail-field input[type="date"] {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface2, #f8fafc);
  color: var(--text);
  font-size: 0.85rem; font-family: inherit;
  resize: vertical; min-height: 32px;
  transition: border-color var(--duration-fast), background var(--duration-fast), box-shadow var(--duration-fast);
}
.tv2-detail-field textarea {
  min-height: 80px;
  font-style: italic;
}
.tv2-detail-field textarea::placeholder {
  font-style: italic; color: var(--muted);
}
.tv2-detail-field textarea:focus,
.tv2-detail-field input:focus {
  outline: none;
  border-color: var(--cobalt-400);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(59,91,219,0.08);
}

.tv2-prio-group { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.tv2-prio-group button {
  display: flex; align-items: center; gap: 0.3rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--slate-600);
  font-size: 0.78rem; font-weight: 500; cursor: pointer;
  transition: all var(--duration-fast);
}
.tv2-prio-group button:hover { border-color: var(--slate-400); }
.tv2-prio-group button i { width: 12px; height: 12px; }
.tv2-prio-group button.active.high {
  background: rgba(239,68,68,0.08); border-color: var(--error, #ef4444);
  color: var(--error, #ef4444);
}
.tv2-prio-group button.active.medium {
  background: rgba(245,158,11,0.1); border-color: var(--warning, #f59e0b);
  color: var(--warning, #f59e0b);
}
.tv2-prio-group button.active:not(.high):not(.medium) {
  background: var(--slate-100); border-color: var(--slate-300);
  color: var(--text); font-weight: 600;
}

.tv2-detail-tags {
  display: flex; gap: 5px; flex-wrap: wrap; align-items: center;
}
.tv2-detail-tags .tv2-tag { padding: 3px 9px; font-size: 0.72rem; }
.tv2-tag-input {
  border: 1px dashed var(--border) !important;
  background: transparent !important;
  padding: 2px 8px !important;
  width: auto !important; min-width: 80px;
  font-size: 0.72rem !important;
}

.tv2-detail-meta {
  font-size: 0.78rem; color: var(--muted);
  display: flex; justify-content: space-between;
  padding: 0.6rem 0.75rem;
  background: var(--surface2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.tv2-detail-meta strong {
  color: var(--text2); font-weight: 500;
}

.tv2-detail-delete {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0;
  border: none; background: transparent;
  color: var(--error, #ef4444);
  font-size: 0.8rem; cursor: pointer;
  opacity: 0.7; transition: opacity var(--duration-fast);
  align-self: flex-start;
}
.tv2-detail-delete:hover { opacity: 1; }
.tv2-detail-delete i { width: 14px; height: 14px; }

/* ── Dialog (create list) ──────────────────────────────────── */
.tv2-dialog {
  border: none; border-radius: var(--radius-lg); padding: 0;
  background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-lg);
  max-width: 440px; width: 90%;
}
.tv2-dialog::backdrop { background: rgba(15,23,42,0.4); backdrop-filter: blur(2px); }
.tv2-dialog-content { padding: 1.5rem 1.75rem; }
.tv2-dialog-content h3 {
  font-family: 'Fraunces', serif;
  font-weight: 500; font-size: 1.25rem;
  margin: 0 0 1.25rem; color: var(--navy, var(--text));
  letter-spacing: -0.01em;
}
.tv2-dialog-content label {
  display: block;
  font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--slate-500);
  margin-bottom: 0.4rem;
}
.tv2-dialog-content input[type="text"],
.tv2-dialog-content input[type="date"] {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface2, #f8fafc);
  font-size: 0.9rem; color: var(--text);
  transition: border-color var(--duration-fast), background var(--duration-fast);
}
.tv2-dialog-content input:focus {
  outline: none; border-color: var(--cobalt-400); background: var(--surface);
  box-shadow: 0 0 0 3px rgba(59,91,219,0.08);
}
.tv2-cat-group {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
  margin-top: 0.25rem;
}
.tv2-cat-group button {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer;
  font-size: 0.85rem; color: var(--text);
  transition: all var(--duration-fast);
}
.tv2-cat-group button:hover { border-color: var(--slate-400); background: var(--slate-50); }
.tv2-cat-group button.active {
  border-color: var(--cobalt-500); background: var(--cobalt-50);
  color: var(--cobalt-700); font-weight: 600;
}
.tv2-cat-dot {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}
.tv2-dialog-actions {
  display: flex; gap: 0.5rem; justify-content: flex-end;
  margin-top: 1.5rem;
}
.tv2-dialog-extra {
  margin-top: 1rem;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.tv2-checkbox-row {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.85rem; cursor: pointer; color: var(--text2);
}

/* ── Undo toast ────────────────────────────────────────────── */
.tv2-undo {
  position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%);
  background: var(--slate-800); color: white;
  padding: 0.6rem 1rem 0.6rem 1.25rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 1rem;
  font-size: 0.85rem;
  z-index: 50;
  animation: tv2-undo-in 200ms var(--ease-out);
}
@keyframes tv2-undo-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.tv2-undo button {
  border: none; background: transparent;
  color: var(--cobalt-300); cursor: pointer;
  font-weight: 600; font-size: 0.8rem;
  padding: 2px 8px; border-radius: var(--radius-sm);
  text-transform: uppercase; letter-spacing: 0.06em;
  transition: background var(--duration-fast);
}
.tv2-undo button:hover { background: rgba(255,255,255,0.1); }

/* ── Keyboard hint ─────────────────────────────────────────── */
.tv2-kbd {
  display: inline-block;
  padding: 1px 5px; border-radius: 4px;
  background: var(--slate-100); color: var(--slate-600);
  font-family: 'Space Mono', monospace; font-size: 0.68rem;
  border: 1px solid var(--border);
  line-height: 1.4;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .tv2-layout { grid-template-columns: 200px 1fr; }
  .tv2-main { padding: 1.5rem 1.75rem 3rem; }
}
@media (max-width: 768px) {
  .tv2-layout { grid-template-columns: 1fr; }
  .tv2-sidebar {
    position: fixed; top: 0; left: 0;
    width: 85%; max-width: 300px; height: 100vh;
    background: var(--surface); z-index: 45;
    transform: translateX(-100%); transition: transform 200ms var(--ease-out);
    box-shadow: var(--shadow-lg);
  }
  .tv2-sidebar.open { transform: translateX(0); }
  .tv2-main { padding: 1rem 1rem 3rem; }
  .tv2-main-title { font-size: 1.4rem; }
  .tv2-detail { width: 100vw; max-width: 100vw; }
  .tv2-mobile-toggle {
    display: inline-flex !important;
  }
}
.tv2-mobile-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--radius-sm); cursor: pointer;
  color: var(--text2); margin-bottom: 0.75rem;
}

/* ── Dark mode ─────────────────────────────────────────────── */
body.dark .tv2-sidebar { border-right-color: var(--border); }
body.dark .tv2-sidebar-label { color: var(--muted); }
body.dark .tv2-sidebar-label::after { background: var(--border); }
body.dark .tv2-list-item:hover { background: var(--slate-100); }
body.dark .tv2-list-item.active { background: var(--cobalt-50); color: var(--cobalt-300); }
body.dark .tv2-list-item.active .tv2-list-count { background: var(--cobalt-100); color: var(--cobalt-300); }
body.dark .tv2-list-dot { box-shadow: 0 0 0 2px rgba(0,0,0,0.4); }
body.dark .tv2-row:hover { background: var(--slate-100); }
body.dark .tv2-row.selected { background: var(--cobalt-50); border-left-color: var(--cobalt-300); }
body.dark .tv2-row-add:hover { background: var(--cobalt-50); border-left-color: var(--cobalt-300); }
body.dark .tv2-check.checked { background: var(--cobalt-500); border-color: var(--cobalt-500); }
body.dark .tv2-done-sep button { color: var(--muted); }
body.dark .tv2-done-sep button::before,
body.dark .tv2-done-sep button::after { background: var(--border); }
body.dark .tv2-empty-icon { background: var(--cobalt-50); }
body.dark .tv2-empty-icon.success { background: rgba(47,158,68,0.15); }
body.dark .tv2-empty-icon.warning { background: rgba(230,119,0,0.15); }
body.dark .tv2-detail { background: var(--surface); border-left-color: var(--border); }
body.dark .tv2-detail-header { border-bottom-color: var(--border); }
body.dark .tv2-detail-meta { background: var(--surface2); border-color: var(--border); }
body.dark .tv2-dialog { background: var(--surface); }
body.dark .tv2-tag { background: var(--slate-100); color: var(--slate-600); }
body.dark .tv2-detail-field textarea,
body.dark .tv2-detail-field input,
body.dark .tv2-dialog-content input,
body.dark .tv2-search { background: var(--surface2); color: var(--text); }
body.dark .tv2-undo { background: var(--slate-200); color: var(--text); }

/* ════════════════════════════════════════════════════════════════
   ░░ END Late overrides ░░
   ════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   ░░ SETTINGS v2 — Topbar + tabs + OMS grid (2026-04-19) ░░
   ────────────────────────────────────────────────────────────────
   Refonte /admin sans sidebar : hero editorial + nav 3 entrees
   (Clients direct + 2 dropdowns) + grille cards OMS scalable 30+.
   Classes namespacees `.settings-*` pour eviter les conflits.
   Tokens uniquement (cobalt/slate/semantic), pas d'hex hardcode.
   ════════════════════════════════════════════════════════════════ */

.settings-page {
  max-width: 1320px;
  margin: 0 auto;
  padding: 2.25rem 2.5rem 4rem;
  animation: fadeIn 0.25s var(--ease-out);
}
@media (max-width: 900px) { .settings-page { padding: 1.5rem 1.25rem 3rem; } }

/* ── Hero editorial ───────────────────────────────────────────── */
.settings-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1.75rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--border);
}
.settings-hero-text { flex: 1; min-width: 0; }
.settings-hero-eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cobalt-600);
  margin-bottom: 0.65rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.settings-hero-eyebrow::before {
  content: '';
  width: 16px;
  height: 1px;
  background: var(--cobalt-500);
}
.settings-hero-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 2.2rem;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.025em;
  margin: 0 0 0.5rem;
  line-height: 1.05;
}
.settings-hero-subtitle {
  font-size: 0.95rem;
  color: var(--text2);
  margin: 0;
  line-height: 1.55;
  max-width: 60ch;
}
.settings-hero-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}
@media (max-width: 700px) {
  .settings-hero { flex-direction: column; gap: 1rem; }
  .settings-hero-actions { width: 100%; }
  .settings-hero-actions .btn { flex: 1; justify-content: center; }
}

/* ── Nav tabs (3 entrees, overflow visible pour dropdowns) ────── */
.settings-tabs {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  position: relative;
  overflow: visible;
}

.settings-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 0.95rem;
  border: none;
  background: transparent;
  color: var(--text2);
  font-size: 0.83rem;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.settings-tab > i,
.settings-tab > svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--muted); }
.settings-tab:hover { color: var(--text); }
.settings-tab:hover > i,
.settings-tab:hover > svg { color: var(--cobalt-500); }
.settings-tab.active {
  color: var(--cobalt-700);
  border-bottom-color: var(--cobalt-500);
  font-weight: 600;
}
.settings-tab.active > i,
.settings-tab.active > svg { color: var(--cobalt-500); }
.settings-tab:focus-visible {
  outline: 2px solid var(--cobalt-400);
  outline-offset: 2px;
  border-radius: 4px;
}

.settings-tab-count {
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface2);
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.settings-tab.active .settings-tab-count {
  background: var(--cobalt-50);
  color: var(--cobalt-700);
}

/* ── Tab dropdowns ────────────────────────────────────────────── */
.settings-tab-group {
  position: relative;
  display: inline-flex;
}
.settings-tab.is-open { color: var(--cobalt-700); }
.settings-tab-current {
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 0.02em;
  padding: 2px 7px;
  background: var(--surface2);
  border-radius: 4px;
  font-weight: 600;
  margin-left: 0.15rem;
}
.settings-tab.active .settings-tab-current {
  background: var(--cobalt-50);
  color: var(--cobalt-700);
}
.settings-tab-chevron {
  width: 13px !important;
  height: 13px !important;
  color: var(--muted) !important;
  transition: transform var(--duration-fast) var(--ease-out);
  margin-left: 0.1rem;
}
.settings-tab-chevron.rotate { transform: rotate(180deg); }
.settings-tab.active .settings-tab-chevron,
.settings-tab.is-open .settings-tab-chevron { color: var(--cobalt-500) !important; }

.settings-tab-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  min-width: 300px;
  padding: 0.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.settings-tab-menu-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.65rem;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-sm);
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background var(--duration-fast) var(--ease-out);
  width: 100%;
}
.settings-tab-menu-item:hover { background: var(--surface2); }
.settings-tab-menu-item.active { background: var(--cobalt-50); }
.settings-tab-menu-item.active .settings-tab-menu-icon { color: var(--cobalt-600); background: rgba(59,91,219,0.08); }
.settings-tab-menu-item:focus-visible {
  outline: 2px solid var(--cobalt-400);
  outline-offset: -2px;
}

.settings-tab-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--surface2);
  color: var(--cobalt-600);
  flex-shrink: 0;
}
.settings-tab-menu-icon > i,
.settings-tab-menu-icon > svg { width: 15px; height: 15px; }

.settings-tab-menu-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.settings-tab-menu-text .name {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}
.settings-tab-menu-text .desc {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.4;
}
.settings-tab-menu-item.active .settings-tab-menu-text .name { color: var(--cobalt-700); }

.settings-tab-menu-sep {
  height: 1px;
  background: var(--border);
  margin: 0.3rem 0.3rem;
}

/* ── Breadcrumb inline (quand view === 'oms') ─────────────────── */
.settings-tabs-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  padding-left: 0.75rem;
  padding-right: 0.5rem;
  align-self: center;
  font-size: 0.82rem;
}
.settings-tabs-breadcrumb-current {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--cobalt-50);
  border: 1px solid rgba(59,91,219,0.15);
  color: var(--cobalt-700);
  padding: 0.3rem 0.75rem 0.3rem 0.55rem;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  font-family: inherit;
}
.settings-tabs-breadcrumb-current:hover {
  background: var(--cobalt-100);
  border-color: var(--cobalt-300);
  transform: translateX(-1px);
}
.settings-tabs-breadcrumb-back {
  width: 13px !important;
  height: 13px !important;
  color: var(--cobalt-500);
  transition: transform var(--duration-fast) var(--ease-out);
}
.settings-tabs-breadcrumb-current:hover .settings-tabs-breadcrumb-back {
  transform: translateX(-2px);
}

/* ── Content + toolbar ────────────────────────────────────────── */
.settings-content { animation: fadeIn 0.2s var(--ease-out); }

.settings-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.settings-toolbar-search {
  position: relative;
  flex: 1;
  min-width: 260px;
  max-width: 420px;
}
.settings-toolbar-search > i,
.settings-toolbar-search > svg {
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  width: 14px !important;
  height: 14px !important;
  color: var(--muted);
  pointer-events: none;
  z-index: 1;
}
.settings-toolbar-search input {
  width: 100%;
  padding: 0.55rem 0.8rem 0.55rem 2.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: all var(--duration-fast) var(--ease-out);
}
.settings-toolbar-search input:focus {
  border-color: var(--cobalt-400);
  box-shadow: 0 0 0 3px rgba(59,91,219,0.08);
}
.settings-toolbar-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.85rem;
}
.settings-toolbar-meta .font-mono {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

/* ── OMS Grid — cards scalables ───────────────────────────────── */
.settings-oms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.85rem;
}

.settings-oms-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.1rem 1.2rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: all var(--duration-base) var(--ease-out);
  position: relative;
  overflow: hidden;
  min-height: 160px;
}
.settings-oms-card:hover {
  border-color: var(--cobalt-300);
  box-shadow: var(--shadow-cobalt-sm);
  transform: translateY(-2px);
}
.settings-oms-card:focus-visible {
  outline: 2px solid var(--cobalt-400);
  outline-offset: 2px;
}

.settings-oms-card-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--cobalt-500);
  opacity: 0.4;
  transition: opacity var(--duration-base) var(--ease-out);
}
.settings-oms-card:hover .settings-oms-card-bar { opacity: 1; }
.settings-oms-card-bar[data-rule="never"] { background: var(--warning); opacity: 0.7; }
.settings-oms-card-bar[data-rule="standard"] { background: var(--border2); }

.settings-oms-card-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.settings-oms-card-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  background: var(--cobalt-50);
  color: var(--cobalt-700);
}
.settings-oms-card-avatar[data-hue="0"] { background: var(--cobalt-50);   color: var(--cobalt-700); }
.settings-oms-card-avatar[data-hue="1"] { background: var(--accent2-bg);  color: var(--accent2); }
.settings-oms-card-avatar[data-hue="2"] { background: var(--success-bg);  color: var(--success); }
.settings-oms-card-avatar[data-hue="3"] { background: var(--warning-bg);  color: var(--warning); }
.settings-oms-card-avatar[data-hue="4"] { background: #EDE9FE;            color: #7C3AED; }
.settings-oms-card-avatar[data-hue="5"] { background: #FCE7F3;            color: #BE185D; }
body.dark .settings-oms-card-avatar[data-hue="4"] { background: rgba(124,58,237,0.18); color: #C4B5FD; }
body.dark .settings-oms-card-avatar[data-hue="5"] { background: rgba(190,24,93,0.18);  color: #F9A8D4; }

.settings-oms-card-identity { flex: 1; min-width: 0; }
.settings-oms-card-code {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
  line-height: 1.2;
  margin-bottom: 0.15rem;
  font-family: 'Space Mono', monospace;
}
.settings-oms-card-ref {
  font-size: 0.72rem;
  color: var(--text2);
  font-family: 'Space Mono', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-oms-card-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.settings-oms-card-badge {
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.02em;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--surface2);
  color: var(--muted);
  border: 1px solid var(--border);
}
.settings-oms-card-badge[data-rule="standard"] { background: var(--surface2); color: var(--muted); }
.settings-oms-card-badge[data-rule="never"]    { background: var(--warning-bg); color: var(--warning); border-color: rgba(230,119,0,0.2); }
.settings-oms-card-badge[data-rule="custom"],
.settings-oms-card-badge[data-rule="tiered"],
.settings-oms-card-badge[data-rule="per_weight"] {
  background: var(--cobalt-50); color: var(--cobalt-700); border-color: rgba(59,91,219,0.15);
}

.settings-oms-card-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface2);
  color: var(--text2);
  border: 1px solid var(--border);
  font-weight: 700;
}
.settings-oms-card-chip > i,
.settings-oms-card-chip > svg { width: 11px; height: 11px; }

.settings-oms-card-footer {
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.73rem;
  color: var(--cobalt-600);
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0.6;
  transition: opacity var(--duration-base) var(--ease-out);
}
.settings-oms-card-footer > i,
.settings-oms-card-footer > svg {
  width: 13px;
  height: 13px;
  transform: translateX(0);
  transition: transform var(--duration-base) var(--ease-out);
}
.settings-oms-card:hover .settings-oms-card-footer { opacity: 1; }
.settings-oms-card:hover .settings-oms-card-footer > i,
.settings-oms-card:hover .settings-oms-card-footer > svg { transform: translateX(3px); }

/* ── Empty state ──────────────────────────────────────────────── */
.settings-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 4rem 1rem;
  text-align: center;
}
.settings-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cobalt-50);
  color: var(--cobalt-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}
.settings-empty-icon > i,
.settings-empty-icon > svg { width: 24px; height: 24px; }
.settings-empty h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.01em;
}
.settings-empty p {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
}
.settings-empty .link-btn {
  background: none;
  border: none;
  color: var(--cobalt-600);
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
}

/* ── Panel head editorial (aliases, portals, SLA, scheduler…) ── */
.settings-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.settings-panel-head-text { flex: 1; min-width: 0; }
.settings-panel-eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cobalt-600);
  margin-bottom: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.settings-panel-eyebrow > i,
.settings-panel-eyebrow > svg { width: 12px; height: 12px; }
.settings-panel-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.015em;
  margin: 0 0 0.4rem;
  line-height: 1.15;
}
.settings-panel-subtitle {
  font-size: 0.88rem;
  color: var(--text2);
  margin: 0;
  line-height: 1.55;
  max-width: 68ch;
}
.settings-panel-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* ── Config sub-cards (aliases tables, portals, …) ────────────── */
.settings-config-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.35rem 1.5rem;
  margin-bottom: 1rem;
}
.settings-config-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}
.settings-config-card-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 0.2rem;
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.settings-config-card-title > i,
.settings-config-card-title > svg { width: 14px; height: 14px; color: var(--cobalt-500); }
.settings-config-card-title .count {
  font-family: 'Space Mono', monospace;
  font-size: 0.68rem;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0.02em;
  padding: 1px 7px;
  background: var(--surface2);
  border-radius: 999px;
  margin-left: 0.25rem;
}
.settings-config-card-desc {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
  max-width: 65ch;
}

/* ── Inputs cellule pour tables SLA ──────────────────────────── */
.settings-cell-input {
  width: 60px;
  text-align: center;
  padding: 0.28rem 0.3rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 0.8rem;
  font-family: 'Space Mono', monospace;
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.settings-cell-input:focus { border-color: var(--cobalt-400); }
.settings-cell-input--time { width: 82px; }

/* ── Info banner (webhooks) ──────────────────────────────────── */
.settings-info-banner {
  display: flex;
  gap: 0.75rem;
  padding: 0.95rem 1.15rem;
  background: var(--cobalt-50);
  border: 1px solid rgba(59,91,219,0.15);
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
  font-size: 0.82rem;
  color: var(--text2);
  line-height: 1.55;
}
.settings-info-banner-icon {
  color: var(--cobalt-600);
  flex-shrink: 0;
  margin-top: 1px;
}
.settings-info-banner-icon > i,
.settings-info-banner-icon > svg { width: 16px; height: 16px; }
.settings-info-banner strong { color: var(--cobalt-700); font-weight: 600; }
.settings-info-banner code {
  font-family: 'Space Mono', monospace;
  background: rgba(255,255,255,0.6);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.78rem;
}

/* ── Dialog redesign (New OMS) ───────────────────────────────── */
dialog.settings-dialog {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  padding: 1.5rem 1.65rem;
  min-width: 340px;
  max-width: 420px;
}
dialog.settings-dialog::backdrop {
  background: rgba(15,23,42,0.4);
  backdrop-filter: blur(3px);
}
body.dark dialog.settings-dialog::backdrop { background: rgba(0,0,0,0.55); }
.settings-dialog-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 0.35rem;
  letter-spacing: -0.01em;
}
.settings-dialog-subtitle {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0 0 1.1rem;
  line-height: 1.5;
}
.settings-dialog-field { margin-bottom: 0.85rem; }
.settings-dialog-field label {
  display: block;
  font-size: 0.7rem;
  font-family: 'Space Mono', monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.3rem;
  font-weight: 700;
}
.settings-dialog-field input {
  width: 100%;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  font-family: 'Space Mono', monospace;
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.settings-dialog-field input:focus {
  border-color: var(--cobalt-400);
  box-shadow: 0 0 0 3px rgba(59,91,219,0.08);
}
.settings-dialog-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.settings-dialog-error {
  font-size: 0.78rem;
  color: var(--error);
  margin-top: 0.6rem;
}

/* ── Webhooks URL + copy ─────────────────────────────────────── */
.settings-webhook-url {
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  word-break: break-all;
  color: var(--accent2);
  background: var(--surface2);
  padding: 3px 6px;
  border-radius: 3px;
  line-height: 1.5;
}
.settings-webhook-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  padding: 5px 7px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--cobalt-600);
  transition: all var(--duration-fast) var(--ease-out);
}
.settings-webhook-copy:hover {
  background: var(--cobalt-50);
  border-color: var(--cobalt-300);
}
.settings-webhook-copy > i,
.settings-webhook-copy > svg { width: 13px; height: 13px; }

/* ── Dark overrides ──────────────────────────────────────────── */
body.dark .settings-oms-card,
body.dark .settings-config-card { background: var(--surface); }
body.dark .settings-tab-count { background: var(--surface2); }
body.dark .settings-tab.active .settings-tab-count { background: var(--cobalt-50); color: var(--cobalt-700); }
body.dark .settings-toolbar-search input { background: var(--surface2); }
body.dark .settings-empty-icon { background: var(--cobalt-50); color: var(--cobalt-500); }
body.dark .settings-tab-menu { background: var(--surface); border-color: var(--border); }
body.dark .settings-tab-menu-icon { background: var(--surface2); }
body.dark .settings-tab-menu-item.active { background: var(--cobalt-50); }
body.dark .settings-tab-current { background: var(--surface2); color: var(--text2); }
body.dark .settings-tabs-breadcrumb-current {
  background: var(--cobalt-50);
  color: var(--cobalt-700);
}
body.dark .settings-info-banner {
  background: var(--cobalt-50);
  border-color: rgba(124,158,248,0.2);
}
body.dark .settings-info-banner code { background: rgba(30,45,92,0.4); }