:root {
  --bg-app: #f4f6fa;
  --bg-card: #ffffff;
  --bg-tint: #f7f9fc;
  --bg-tint-2: #f0f3f8;
  --bg-sidebar: #02040c;
  --bg-flyout: #0a1024;
  --bg-sidebar-hover: rgba(255,255,255,0.06);
  --bg-sidebar-active: rgba(13, 155, 244, 0.14);
  --bg-flyout-hover: rgba(255,255,255,0.05);
  --bg-flyout-active: rgba(13, 155, 244, 0.18);
  --t-1: #0d1530;
  --t-2: #1a2240;
  --t-3: #6b7388;
  --t-4: #9aa1b2;
  --t-on-dark-muted: rgba(255,255,255,0.72);
  --t-on-dark-faint: rgba(255,255,255,0.48);
  --border: #e6eaf2;
  --border-soft: #eef1f6;
  --border-strong: #d5dbe6;
  --border-on-dark: rgba(255,255,255,0.08);
  --blue: #2563eb;
  --blue-bright: #235de9;
  --blue-sky: #0d9bf4;
  --blue-soft: #dbeafe;
  --blue-tint: #eff5ff;
  --gradient: linear-gradient(135deg, #0d9bf4 0%, #235de9 100%);
  --red: #ef4444;
  --red-soft: #fee2e2;
  --red-tint: #fef5f5;
  --amber: #f59e0b;
  --amber-soft: #fef3c7;
  --green: #10b981;
  --green-soft: #d1fae5;
  --green-tint: #f0fdf6;
  --purple: #8b5cf6;
  --purple-soft: #ede9fe;
  --teal: #14b8a6;
  --teal-soft: #ccfbf1;
  --teal-tint: #f0fdfa;
  --shadow-sm: 0 1px 2px rgba(13, 21, 48, 0.04);
  --shadow-md: 0 4px 12px rgba(13, 21, 48, 0.06), 0 1px 3px rgba(13, 21, 48, 0.04);
  --shadow-lg: 0 12px 32px rgba(13, 21, 48, 0.08), 0 4px 8px rgba(13, 21, 48, 0.04);
  --shadow-xl: 0 24px 48px rgba(13, 21, 48, 0.12), 0 8px 16px rgba(13, 21, 48, 0.06);
  --sidebar-collapsed: 68px;
  --sidebar-expanded: 240px;
  --topbar-h: 56px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Generic hover surface (used by HSE chips/buttons; matches --bg-tint-2) */
  --bg-hover: #eef1f6;
  /* HSE module tokens — 5-level severity (v1.1), tone (KPI), drawer icon, ds-badge, OSH §82
     Palette: green → yellow-green → amber → orange → red (smooth gradient). */
  --hse-zone-tres_faible-bg: rgba(22, 163, 74, 0.18);
  --hse-zone-tres_faible-bg-strong: rgba(22, 163, 74, 0.42);
  --hse-zone-tres_faible-bg-dim: rgba(22, 163, 74, 0.07);
  --hse-zone-tres_faible-solid: #16a34a;
  --hse-zone-tres_faible-fg: #15803d;
  --hse-zone-faible-bg: rgba(132, 204, 22, 0.22);
  --hse-zone-faible-bg-strong: rgba(132, 204, 22, 0.48);
  --hse-zone-faible-bg-dim: rgba(132, 204, 22, 0.09);
  --hse-zone-faible-solid: #84cc16;
  --hse-zone-faible-fg: #4d7c0f;
  --hse-zone-moyen-bg: rgba(234, 179, 8, 0.22);
  --hse-zone-moyen-bg-strong: rgba(234, 179, 8, 0.48);
  --hse-zone-moyen-bg-dim: rgba(234, 179, 8, 0.09);
  --hse-zone-moyen-solid: #eab308;
  --hse-zone-moyen-fg: #a16207;
  --hse-zone-eleve-bg: rgba(234, 88, 12, 0.22);
  --hse-zone-eleve-bg-strong: rgba(234, 88, 12, 0.48);
  --hse-zone-eleve-bg-dim: rgba(234, 88, 12, 0.09);
  --hse-zone-eleve-solid: #ea580c;
  --hse-zone-eleve-fg: #c2410c;
  --hse-zone-extreme-bg: rgba(220, 38, 38, 0.22);
  --hse-zone-extreme-bg-strong: rgba(220, 38, 38, 0.48);
  --hse-zone-extreme-bg-dim: rgba(220, 38, 38, 0.08);
  --hse-zone-extreme-solid: #dc2626;
  --hse-zone-extreme-fg: #991b1b;
  /* Heatmap-cell-only pastel palette (v1.1 visual polish). Used by
     .hse-heatmap-cell zone selectors. Pastel base @ 0.6 unselected, 0.8
     hover, 1.0 selected. Distinct from -bg-dim / -bg-strong (which stay
     subtle for KPI tile + mini-cell consumers). */
  --hse-zone-tres_faible-cell:          rgba(134, 239, 172, 0.62);  /* green-300 */
  --hse-zone-tres_faible-cell-hover:    rgba(134, 239, 172, 0.82);
  --hse-zone-tres_faible-cell-selected: rgba(134, 239, 172, 1.00);
  --hse-zone-faible-cell:               rgba(190, 242, 100, 0.62);  /* lime-300 */
  --hse-zone-faible-cell-hover:         rgba(190, 242, 100, 0.82);
  --hse-zone-faible-cell-selected:      rgba(190, 242, 100, 1.00);
  --hse-zone-moyen-cell:                rgba(253, 224, 71, 0.62);   /* yellow-300 */
  --hse-zone-moyen-cell-hover:          rgba(253, 224, 71, 0.82);
  --hse-zone-moyen-cell-selected:       rgba(253, 224, 71, 1.00);
  --hse-zone-eleve-cell:                rgba(253, 186, 116, 0.62);  /* orange-300 */
  --hse-zone-eleve-cell-hover:          rgba(253, 186, 116, 0.82);
  --hse-zone-eleve-cell-selected:       rgba(253, 186, 116, 1.00);
  --hse-zone-extreme-cell:              rgba(252, 165, 165, 0.62);  /* red-300 */
  --hse-zone-extreme-cell-hover:        rgba(252, 165, 165, 0.82);
  --hse-zone-extreme-cell-selected:     rgba(252, 165, 165, 1.00);
  --hse-tone-red: #dc2626;
  --hse-tone-amber: #d97706;
  --hse-tone-green: #16a34a;
  --hse-drawer-icon-bg: rgba(245, 158, 11, 0.18);
  --hse-drawer-icon-fg: #d97706;
  --hse-ds-live-bg: rgba(22, 163, 74, 0.18);
  --hse-ds-live-fg: #15803d;
  --hse-ds-est-bg: rgba(217, 119, 6, 0.18);
  --hse-ds-est-fg: #b45309;
  --hse-ds-na-bg: rgba(107, 114, 128, 0.18);
  --hse-ds-na-fg: #4b5563;
  --hse-osh82-row-bg: #fef2f2;
  --hse-osh82-row-bg-hover: #fee2e2;
  --hse-osh82-row-border: #fecaca;
  --hse-osh82-row-ref-fg: #991b1b;
  /* Lifecycle status tokens — distinct palette from 5-level severity zone colors
     (zone = tres_faible/faible/moyen/eleve/extreme; status = identified/assessing/
     mitigating/monitoring/closed). Used by the donut chart + status chips. */
  --hse-status-identified: #94a3b8;
  --hse-status-assessing: #2563eb;
  --hse-status-mitigating: #f59e0b;
  --hse-status-monitoring: #10b981;
  --hse-status-closed: #475569;
  /* Heatmap cell count badge — darker solid + brighter outline per zone, so the
     badge reads as embedded against the tinted cell bg. Fg stays white in both
     themes since each badge bg is a dark/saturated zone color. */
  --hse-zone-tres_faible-badge-bg: #15803d;
  --hse-zone-tres_faible-badge-border: #16a34a;
  --hse-zone-tres_faible-badge-fg: #ffffff;
  --hse-zone-faible-badge-bg: #4d7c0f;
  --hse-zone-faible-badge-border: #84cc16;
  --hse-zone-faible-badge-fg: #ffffff;
  --hse-zone-moyen-badge-bg: #a16207;
  --hse-zone-moyen-badge-border: #eab308;
  --hse-zone-moyen-badge-fg: #ffffff;
  --hse-zone-eleve-badge-bg: #c2410c;
  --hse-zone-eleve-badge-border: #ea580c;
  --hse-zone-eleve-badge-fg: #ffffff;
  --hse-zone-extreme-badge-bg: #991b1b;
  --hse-zone-extreme-badge-border: #dc2626;
  --hse-zone-extreme-badge-fg: #ffffff;
  /* hex_map_mauritius tokens — UI Integration v1.5 §19.5 (polish-r3 C6).
     --hex-fill-default is the canonical empty-hex fill; the SVG inline
     style references it via var(...) so theme inheritance is automatic. */
  --hex-fill-default: #e5e7eb;
  --hex-fill-normal: #2563eb;
  --hex-fill-warning: #f59e0b;
  --hex-fill-alert: #dc2626;
  --hex-fill-selected: #1d4ed8;
}
[data-theme="dark"] {
  --bg-app: #0a0e1a;
  --bg-card: #131826;
  --bg-tint: #1a2032;
  --bg-tint-2: #232a3d;
  --t-1: #f0f3f8;
  --t-2: #d5dbe6;
  --t-3: #9aa1b2;
  --t-4: #6b7388;
  --border: #232a3d;
  --border-soft: #1a2032;
  --border-strong: #2e3650;
  --blue-tint: rgba(37, 99, 235, 0.12);
  --blue-soft: rgba(37, 99, 235, 0.18);
  --red-soft: rgba(239, 68, 68, 0.18);
  --red-tint: rgba(239, 68, 68, 0.08);
  --amber-soft: rgba(245, 158, 11, 0.18);
  --green-soft: rgba(16, 185, 129, 0.18);
  --green-tint: rgba(16, 185, 129, 0.08);
  --purple-soft: rgba(139, 92, 246, 0.18);
  --teal-soft: rgba(20, 184, 166, 0.18);
  --teal-tint: rgba(20, 184, 166, 0.08);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.6);
  --bg-hover: #2a3147;
  /* HSE 5-level severity (v1.1) — vibrant dark-mode palette, smooth gradient */
  --hse-zone-tres_faible-bg: rgba(34, 197, 94, 0.30);
  --hse-zone-tres_faible-bg-strong: rgba(34, 197, 94, 0.58);
  --hse-zone-tres_faible-bg-dim: rgba(34, 197, 94, 0.10);
  --hse-zone-tres_faible-solid: #22c55e;
  --hse-zone-tres_faible-fg: #86efac;
  --hse-zone-faible-bg: rgba(163, 230, 53, 0.28);
  --hse-zone-faible-bg-strong: rgba(163, 230, 53, 0.56);
  --hse-zone-faible-bg-dim: rgba(163, 230, 53, 0.10);
  --hse-zone-faible-solid: #a3e635;
  --hse-zone-faible-fg: #d9f99d;
  --hse-zone-moyen-bg: rgba(250, 204, 21, 0.28);
  --hse-zone-moyen-bg-strong: rgba(250, 204, 21, 0.56);
  --hse-zone-moyen-bg-dim: rgba(250, 204, 21, 0.10);
  --hse-zone-moyen-solid: #facc15;
  --hse-zone-moyen-fg: #fde68a;
  --hse-zone-eleve-bg: rgba(251, 146, 60, 0.30);
  --hse-zone-eleve-bg-strong: rgba(251, 146, 60, 0.58);
  --hse-zone-eleve-bg-dim: rgba(251, 146, 60, 0.10);
  --hse-zone-eleve-solid: #fb923c;
  --hse-zone-eleve-fg: #fed7aa;
  --hse-zone-extreme-bg: rgba(248, 113, 113, 0.32);
  --hse-zone-extreme-bg-strong: rgba(248, 113, 113, 0.60);
  --hse-zone-extreme-bg-dim: rgba(248, 113, 113, 0.10);
  --hse-zone-extreme-solid: #ef4444;
  --hse-zone-extreme-fg: #fca5a5;
  /* Heatmap-cell-only pastel palette (dark theme) — deeper bases so they
     read on dark surfaces without going neon. Slightly lower alpha at the
     selected tier so white text on top stays readable. */
  --hse-zone-tres_faible-cell:          rgba(74, 222, 128, 0.50);   /* green-400 */
  --hse-zone-tres_faible-cell-hover:    rgba(74, 222, 128, 0.72);
  --hse-zone-tres_faible-cell-selected: rgba(74, 222, 128, 0.92);
  --hse-zone-faible-cell:               rgba(163, 230, 53, 0.50);   /* lime-400 */
  --hse-zone-faible-cell-hover:         rgba(163, 230, 53, 0.72);
  --hse-zone-faible-cell-selected:      rgba(163, 230, 53, 0.92);
  --hse-zone-moyen-cell:                rgba(250, 204, 21, 0.48);   /* yellow-400 */
  --hse-zone-moyen-cell-hover:          rgba(250, 204, 21, 0.70);
  --hse-zone-moyen-cell-selected:       rgba(250, 204, 21, 0.90);
  --hse-zone-eleve-cell:                rgba(251, 146, 60, 0.55);   /* orange-400 */
  --hse-zone-eleve-cell-hover:          rgba(251, 146, 60, 0.78);
  --hse-zone-eleve-cell-selected:       rgba(251, 146, 60, 0.95);
  --hse-zone-extreme-cell:              rgba(248, 113, 113, 0.55);  /* red-400 */
  --hse-zone-extreme-cell-hover:        rgba(248, 113, 113, 0.78);
  --hse-zone-extreme-cell-selected:     rgba(248, 113, 113, 0.95);
  --hse-tone-red: #ef4444;
  --hse-tone-amber: #fbbf24;
  --hse-tone-green: #22c55e;
  --hse-drawer-icon-bg: rgba(251, 191, 36, 0.22);
  --hse-drawer-icon-fg: #fbbf24;
  --hse-ds-live-bg: rgba(34, 197, 94, 0.22);
  --hse-ds-live-fg: #86efac;
  --hse-ds-est-bg: rgba(251, 191, 36, 0.22);
  --hse-ds-est-fg: #fcd34d;
  --hse-ds-na-bg: rgba(156, 163, 175, 0.18);
  --hse-ds-na-fg: #cbd5e1;
  --hse-osh82-row-bg: rgba(239, 68, 68, 0.10);
  --hse-osh82-row-bg-hover: rgba(239, 68, 68, 0.18);
  --hse-osh82-row-border: rgba(239, 68, 68, 0.38);
  --hse-osh82-row-ref-fg: #fca5a5;
  --hse-status-identified: #cbd5e1;
  --hse-status-assessing: #60a5fa;
  --hse-status-mitigating: #fbbf24;
  --hse-status-monitoring: #34d399;
  --hse-status-closed: #94a3b8;
  --hse-zone-tres_faible-badge-bg: #14532d;
  --hse-zone-tres_faible-badge-border: #22c55e;
  --hse-zone-tres_faible-badge-fg: #ffffff;
  --hse-zone-faible-badge-bg: #365314;
  --hse-zone-faible-badge-border: #a3e635;
  --hse-zone-faible-badge-fg: #ffffff;
  --hse-zone-moyen-badge-bg: #713f12;
  --hse-zone-moyen-badge-border: #facc15;
  --hse-zone-moyen-badge-fg: #ffffff;
  --hse-zone-eleve-badge-bg: #7c2d12;
  --hse-zone-eleve-badge-border: #fb923c;
  --hse-zone-eleve-badge-fg: #ffffff;
  --hse-zone-extreme-badge-bg: #7f1d1d;
  --hse-zone-extreme-badge-border: #ef4444;
  --hse-zone-extreme-badge-fg: #ffffff;
  /* hex_map_mauritius dark-mode tokens — UI Integration v1.5 §19.5 (polish-r3 C6).
     Default-fill flips to a dark slate visible against the dark app background;
     the four state colors are theme-stable (work on both surfaces). */
  --hex-fill-default: #1f2937;
  --hex-fill-normal: #2563eb;
  --hex-fill-warning: #f59e0b;
  --hex-fill-alert: #dc2626;
  --hex-fill-selected: #1d4ed8;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg-app); font-family: var(--font); color: var(--t-1); -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.5; letter-spacing: -0.005em; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; }
a { color: inherit; text-decoration: none; }
svg { flex-shrink: 0; }
body {
  display: grid;
  grid-template-columns: var(--sidebar-collapsed) 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "sidebar topbar" "sidebar main";
  height: 100vh;
  transition: grid-template-columns 0.22s ease;
}
body.nav-pinned { grid-template-columns: var(--sidebar-expanded) 1fr; }
.sidebar { grid-area: sidebar; background: var(--bg-sidebar); border-right: 1px solid var(--border-on-dark); width: var(--sidebar-collapsed); transition: width 0.22s ease; display: flex; flex-direction: column; z-index: 50; position: relative; overflow: visible; }
.sidebar.expanded, body.nav-pinned .sidebar { width: var(--sidebar-expanded); }
.sidebar-logo { display: flex; align-items: center; height: var(--topbar-h); padding: 0 14px; border-bottom: 1px solid var(--border-on-dark); flex-shrink: 0; gap: 10px; }
.brand-mark { width: 38px; height: 38px; border-radius: 10px; background: var(--gradient); display: flex; align-items: center; justify-content: center; font-weight: 800; color: white; font-size: 17px; letter-spacing: -0.04em; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; opacity: 0; width: 0; overflow: hidden; transition: opacity 0.18s, width 0.22s; white-space: nowrap; }
.sidebar.expanded .brand-text, body.nav-pinned .brand-text { opacity: 1; width: auto; }
.brand-name { font-size: 14.5px; font-weight: 700; letter-spacing: -0.015em; color: white; line-height: 1.2; }
.brand-sub { font-size: 9.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-sky); line-height: 1.2; margin-top: 2px; }
.sidebar-toggle { position: absolute; top: 18px; right: -12px; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--t-3); z-index: 60; transition: all 0.12s, transform 0.22s ease; box-shadow: var(--shadow-md); }
.sidebar-toggle:hover { border-color: var(--blue); color: var(--blue); }
.sidebar-toggle svg { width: 14px; height: 14px; transition: transform 0.22s ease; }
.sidebar.expanded .sidebar-toggle svg, body.nav-pinned .sidebar-toggle svg { transform: rotate(180deg); }
.sidebar-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 8px; }
.sidebar-body::-webkit-scrollbar { width: 4px; }
.sidebar-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
.nav-section { margin-bottom: 4px; }
.nav-section-label { display: none; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-on-dark-faint); padding: 14px 10px 6px; }
.sidebar.expanded .nav-section-label, body.nav-pinned .nav-section-label { display: block; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; margin-bottom: 1px; border-radius: 8px; color: var(--t-on-dark-muted); cursor: pointer; transition: background 0.12s, color 0.12s; position: relative; white-space: nowrap; }
.nav-item:hover { background: var(--bg-sidebar-hover); color: white; }
.nav-item.active { background: var(--bg-sidebar-active); color: white; }
.nav-item.active .nav-icon { color: var(--blue-sky); }
.nav-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--t-on-dark-muted); transition: color 0.12s; }
.nav-item:hover .nav-icon { color: white; }
.nav-label { font-size: 13px; font-weight: 500; letter-spacing: -0.005em; opacity: 0; width: 0; overflow: hidden; transition: opacity 0.18s; flex: 1; }
.sidebar.expanded .nav-label, body.nav-pinned .nav-label { opacity: 1; width: auto; }
.nav-badge { font-size: 10px; font-weight: 600; background: var(--red); color: white; padding: 1px 6px; border-radius: 100px; min-width: 18px; text-align: center; opacity: 0; transition: opacity 0.18s; }
.sidebar.expanded .nav-badge, body.nav-pinned .nav-badge { opacity: 1; }
.nav-chevron { width: 14px; height: 14px; color: var(--t-on-dark-faint); opacity: 0; transition: opacity 0.18s, transform 0.18s; margin-left: auto; flex-shrink: 0; }
.sidebar.expanded .nav-chevron, body.nav-pinned .nav-chevron { opacity: 1; }
.nav-item.flyout-active .nav-chevron { transform: rotate(90deg); color: var(--blue-sky); }
.tt { position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%); background: #0a1024; color: white; padding: 6px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.12s; z-index: 100; border: 1px solid var(--border-on-dark); box-shadow: var(--shadow-lg); }
.tt::before { content: ''; position: absolute; left: -5px; top: 50%; transform: translateY(-50%); border: 5px solid transparent; border-right-color: #0a1024; }
body:not(.nav-pinned) .sidebar:not(.expanded) .nav-item:not(.has-flyout):hover .tt { opacity: 1; }
.sidebar-foot { border-top: 1px solid var(--border-on-dark); padding: 10px 8px; }
.flyout { position: fixed; left: calc(var(--sidebar-collapsed) + 6px); top: 0; width: 260px; background: var(--bg-flyout); border: 1px solid var(--border-on-dark); border-radius: 12px; box-shadow: var(--shadow-xl); z-index: 60; opacity: 0; transform: translateX(-6px); pointer-events: none; transition: opacity 0.16s, transform 0.18s; padding: 14px; max-height: calc(100vh - 24px); overflow-y: auto; color: rgba(255,255,255,0.96); }
body.nav-pinned .flyout { left: calc(var(--sidebar-expanded) + 6px); }
.flyout.open { opacity: 1; transform: translateX(0); pointer-events: auto; }
.flyout-header { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--border-on-dark); }
.flyout-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--gradient); color: white; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.flyout-icon svg { width: 15px; height: 15px; }
.flyout-title { font-size: 13.5px; font-weight: 700; color: white; }
.flyout-subtitle { font-size: 10.5px; color: var(--t-on-dark-faint); margin-top: 2px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }
.flyout-group { margin-bottom: 4px; }
.flyout-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; color: var(--t-on-dark-muted); cursor: pointer; font-size: 12.5px; font-weight: 500; transition: background 0.12s, color 0.12s; }
.flyout-item:hover { background: var(--bg-flyout-hover); color: white; }
.flyout-item.active { background: var(--bg-flyout-active); color: white; }
.flyout-item.active .flyout-item-icon { color: var(--blue-sky); }
.flyout-item-icon { width: 15px; height: 15px; color: var(--t-on-dark-muted); flex-shrink: 0; }
.flyout-item:hover .flyout-item-icon { color: white; }
.flyout-item-badge { margin-left: auto; font-size: 10px; font-weight: 700; background: var(--red); color: white; padding: 1px 6px; border-radius: 100px; min-width: 18px; text-align: center; }
.flyout-item-soon { margin-left: auto; font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-on-dark-faint); border: 1px solid var(--border-on-dark); padding: 1px 6px; border-radius: 100px; }
.flyout-item.disabled { opacity: 0.5; cursor: not-allowed; }
.topbar { grid-area: topbar; height: var(--topbar-h); background: var(--bg-card); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 24px; gap: 16px; z-index: 20; }
.breadcrumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--t-3); font-weight: 500; }
.breadcrumbs .crumb-sep { color: var(--t-4); }
.breadcrumbs .crumb-current { color: var(--t-1); font-weight: 600; }
.topbar-search { margin-left: auto; display: flex; align-items: center; gap: 8px; background: var(--bg-tint); border: 1px solid var(--border); padding: 6px 12px; border-radius: 8px; width: 280px; }
.topbar-search:focus-within { border-color: var(--blue); background: var(--bg-card); }
.topbar-search input { flex: 1; background: transparent; border: none; outline: none; font-size: 13px; color: var(--t-1); }
.topbar-search input::placeholder { color: var(--t-4); }
.topbar-search-kbd { font-size: 10.5px; font-weight: 600; color: var(--t-4); border: 1px solid var(--border); background: var(--bg-card); padding: 1px 5px; border-radius: 4px; font-family: 'SF Mono', Monaco, monospace; }
.topbar-actions { display: flex; align-items: center; gap: 6px; }
.topbar-icon-btn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; color: var(--t-3); position: relative; transition: background 120ms, color 120ms; }
.topbar-icon-btn:hover { background: var(--bg-tint); color: var(--t-1); }
.topbar-icon-btn .dot { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; background: var(--red); border-radius: 50%; border: 2px solid var(--bg-card); }
.topbar-user { display: flex; align-items: center; gap: 9px; padding: 5px 11px 5px 5px; border-radius: 8px; cursor: pointer; transition: background 120ms; border: 1px solid var(--border); background: var(--bg-card); }
.topbar-user:hover { background: var(--bg-tint); }
.topbar-user-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--gradient); display: grid; place-items: center; color: white; font-weight: 700; font-size: 11px; letter-spacing: -0.02em; }
.topbar-user-name { font-size: 12.5px; font-weight: 600; color: var(--t-1); }

/* Role / scope simulator — replaces the static topbar-user. The pill shows
   active role + scope summary; click opens .role-dropdown listing all
   simulated roles. Demo-only RBAC scaffolding (real auth ships later). */
.role-pill { display: flex; align-items: center; gap: 9px; padding: 4px 10px 4px 4px; border-radius: 9px; cursor: pointer; transition: background 120ms, border-color 120ms; border: 1px solid var(--border); background: var(--bg-card); user-select: none; max-width: 360px; }
.role-pill:hover { background: var(--bg-tint); border-color: var(--border-strong); }
.role-pill-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--gradient); display: grid; place-items: center; color: white; font-weight: 700; font-size: 11px; letter-spacing: -0.02em; flex-shrink: 0; }
.role-pill-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.role-pill-name { font-size: 12.5px; font-weight: 600; color: var(--t-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.role-pill-meta { font-size: 10.5px; color: var(--t-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; margin-top: 1px; }
.role-pill-chev { width: 10px; height: 10px; color: var(--t-3); flex-shrink: 0; transition: transform 160ms; }
.role-pill.open .role-pill-chev { transform: rotate(180deg); }

.role-dropdown { position: fixed; top: calc(var(--topbar-h) + 4px); right: 24px; width: 380px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-xl); padding: 6px; display: none; z-index: 110; }
.role-dropdown.open { display: block; }
.role-dropdown-header { padding: 10px 12px 8px; border-bottom: 1px solid var(--border-soft); margin-bottom: 4px; }
.role-dropdown-title { font-size: 12px; font-weight: 700; color: var(--t-1); }
.role-dropdown-sub { font-size: 11px; color: var(--t-3); margin-top: 2px; line-height: 1.45; }
.role-dropdown-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; transition: background 100ms; }
.role-dropdown-item:hover { background: var(--bg-tint); }
.role-dropdown-item.active { background: var(--bg-tint-2); }
.role-dropdown-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--gradient); display: grid; place-items: center; color: white; font-weight: 700; font-size: 11.5px; letter-spacing: -0.02em; flex-shrink: 0; margin-top: 1px; }
.role-dropdown-item-text { flex: 1; min-width: 0; }
.role-dropdown-item-label { font-size: 13px; font-weight: 600; color: var(--t-1); }
.role-dropdown-item-meta { font-size: 11.5px; color: var(--t-3); margin-top: 2px; line-height: 1.4; }
.role-dropdown-item-check { width: 14px; height: 14px; color: var(--blue); flex-shrink: 0; margin-top: 9px; opacity: 0; }
.role-dropdown-item.active .role-dropdown-item-check { opacity: 1; }
.theme-toggle { display: inline-flex; align-items: center; background: var(--bg-tint); border: 1px solid var(--border); padding: 2px; border-radius: 8px; }
.theme-toggle button { width: 28px; height: 26px; display: grid; place-items: center; border-radius: 6px; color: var(--t-4); transition: background 120ms, color 120ms; }
.theme-toggle button.active { background: var(--bg-card); color: var(--t-1); box-shadow: var(--shadow-sm); }
.main { grid-area: main; overflow-y: auto; background: var(--bg-app); }
.page { padding: 28px 32px 80px; max-width: 1440px; width: 100%; margin: 0 auto; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.page-header-text { flex: 1; min-width: 0; }
.page-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue); margin-bottom: 8px; }
.page-eyebrow::before { content: ''; width: 18px; height: 1px; background: currentColor; }
.page-title { font-size: 26px; font-weight: 700; letter-spacing: -0.025em; color: var(--t-1); line-height: 1.15; margin-bottom: 6px; }
.page-subtitle { font-size: 14px; color: var(--t-3); line-height: 1.5; max-width: 600px; }
.page-header-actions { display: flex; align-items: center; gap: 8px; }
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 120ms, border-color 120ms, color 120ms, transform 80ms; white-space: nowrap; letter-spacing: -0.005em; border: 1px solid transparent; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 14px; height: 14px; stroke-width: 2.2; }
.btn-primary { background: var(--blue); color: white; }
.btn-primary:hover { background: var(--blue-bright); }
.btn-secondary { background: var(--bg-card); color: var(--t-1); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--bg-tint); border-color: var(--t-3); }
.btn-ghost { background: transparent; color: var(--t-2); }
.btn-ghost:hover { background: var(--bg-tint); }
.btn-danger { background: var(--red); color: white; border-color: var(--red); }
.btn-danger:hover { background: #dc2626; border-color: #dc2626; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-sm svg { width: 12px; height: 12px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.tab { padding: 10px 14px; font-size: 13.5px; font-weight: 500; color: var(--t-3); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color 120ms, border-color 120ms; display: inline-flex; align-items: center; gap: 7px; }
.tab:hover { color: var(--t-1); }
.tab.active { color: var(--blue); border-color: var(--blue); font-weight: 600; }
.tab-count { font-size: 11px; font-weight: 600; background: var(--bg-tint-2); color: var(--t-3); padding: 1px 7px; border-radius: 10px; min-width: 20px; text-align: center; }
.tab.active .tab-count { background: var(--blue-tint); color: var(--blue); }
.filter-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.filter-search { display: flex; align-items: center; gap: 7px; background: var(--bg-card); border: 1px solid var(--border); padding: 7px 11px; border-radius: 8px; width: 280px; }
.filter-search:focus-within { border-color: var(--blue); }
.filter-search input { flex: 1; background: transparent; border: none; outline: none; font-size: 13px; color: var(--t-1); }
.filter-search input::placeholder { color: var(--t-4); }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; font-size: 12.5px; font-weight: 500; color: var(--t-2); cursor: pointer; transition: border-color 120ms, background 120ms; }
.filter-chip:hover { border-color: var(--t-3); }
.filter-chip.active { background: var(--blue-tint); border-color: var(--blue); color: var(--blue); }
.filter-chip svg { width: 12px; height: 12px; }
.view-toggle { margin-left: auto; display: flex; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 2px; }
.view-toggle button { padding: 5px 9px; font-size: 12px; font-weight: 500; color: var(--t-3); border-radius: 6px; display: inline-flex; align-items: center; gap: 5px; }
.view-toggle button svg { width: 13px; height: 13px; }
.view-toggle button.active { background: var(--bg-tint); color: var(--t-1); font-weight: 600; }
.checklist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.cl-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 14px; transition: border-color 140ms, transform 140ms, box-shadow 140ms; cursor: pointer; position: relative; }
.cl-card:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.cl-card-head { display: flex; align-items: flex-start; gap: 12px; }
.cl-card-icon { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; color: white; }
.cl-card-icon svg { width: 18px; height: 18px; stroke-width: 2; }
.cl-icon-hse { background: var(--red); }
.cl-icon-fire { background: var(--amber); }
.cl-icon-food { background: var(--green); }
.cl-icon-fleet { background: var(--blue); }
.cl-icon-contractor { background: var(--purple); }
.cl-icon-hygiene { background: var(--teal); }
.cl-icon-custom { background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%); }
.cl-card-title-wrap { flex: 1; min-width: 0; }
.cl-card-title { font-size: 14.5px; font-weight: 600; color: var(--t-1); letter-spacing: -0.012em; line-height: 1.3; margin-bottom: 3px; }
.cl-card-meta { font-size: 11.5px; color: var(--t-3); }
.cl-card-menu-btn { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; color: var(--t-4); opacity: 0; transition: opacity 120ms, background 120ms, color 120ms; }
.cl-card:hover .cl-card-menu-btn { opacity: 1; }
.cl-card-menu-btn:hover, .cl-card-menu-btn.open { opacity: 1; background: var(--bg-tint); color: var(--t-1); }
.cl-card-stats { display: flex; gap: 16px; padding: 10px 0; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.cl-stat { display: flex; flex-direction: column; }
.cl-stat-num { font-size: 16px; font-weight: 700; color: var(--t-1); letter-spacing: -0.015em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cl-stat-label { font-size: 10.5px; color: var(--t-3); margin-top: 2px; font-weight: 500; }
.cl-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 100px; white-space: nowrap; }
.pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pill-green { background: var(--green-soft); color: #047857; }
.pill-lime { background: rgba(132, 204, 22, 0.18); color: #4d7c0f; }
.pill-amber { background: var(--amber-soft); color: #b45309; }
.pill-orange { background: rgba(234, 88, 12, 0.18); color: #c2410c; }
.pill-red { background: var(--red-soft); color: #b91c1c; }
.pill-blue { background: var(--blue-soft); color: #1e40af; }
.pill-grey { background: var(--bg-tint-2); color: var(--t-3); }
.pill-teal { background: var(--teal-soft); color: #0f766e; }
[data-theme="dark"] .pill-green { color: #6ee7b7; }
[data-theme="dark"] .pill-lime { background: rgba(163, 230, 53, 0.18); color: #d9f99d; }
[data-theme="dark"] .pill-amber { color: #fcd34d; }
[data-theme="dark"] .pill-orange { background: rgba(251, 146, 60, 0.20); color: #fed7aa; }
[data-theme="dark"] .pill-red { color: #fca5a5; }
[data-theme="dark"] .pill-blue { color: #93c5fd; }
[data-theme="dark"] .pill-teal { color: #5eead4; }
.pill-large { font-size: 11.5px; padding: 4px 10px; }
.avatars { display: inline-flex; }
.av { width: 22px; height: 22px; border-radius: 50%; background: var(--gradient); border: 2px solid var(--bg-card); display: grid; place-items: center; font-size: 9.5px; font-weight: 700; color: white; letter-spacing: -0.02em; }
.av:not(:first-child) { margin-left: -7px; }
.av-2 { background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%); }
.av-3 { background: linear-gradient(135deg, #10b981 0%, #2563eb 100%); }
.av-4 { background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%); }
.av-more { background: var(--bg-tint-2); color: var(--t-3); }
.av-md { width: 28px; height: 28px; font-size: 11px; }
.table-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table thead th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--t-3); text-align: left; padding: 11px 16px; background: var(--bg-tint); border-bottom: 1px solid var(--border); white-space: nowrap; }
.table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--border-soft); color: var(--t-2); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background 100ms; cursor: pointer; }
.table tbody tr:hover { background: var(--bg-tint); }
.table tbody tr.hyg-list-row-overdue { background-color: var(--red-tint); background-image: repeating-linear-gradient(-45deg, transparent 0, transparent 8px, rgba(239, 68, 68, 0.07) 8px, rgba(239, 68, 68, 0.07) 14px); }
.table tbody tr.hyg-list-row-overdue td:first-child { box-shadow: inset 3px 0 0 0 var(--red); }
.table tbody tr.hyg-list-row-overdue:hover { background-color: var(--red-soft); background-image: repeating-linear-gradient(-45deg, transparent 0, transparent 8px, rgba(239, 68, 68, 0.09) 8px, rgba(239, 68, 68, 0.09) 14px); }
[data-theme="dark"] .table tbody tr.hyg-list-row-overdue { background-image: repeating-linear-gradient(-45deg, transparent 0, transparent 8px, rgba(252, 165, 165, 0.05) 8px, rgba(252, 165, 165, 0.05) 14px); }
[data-theme="dark"] .table tbody tr.hyg-list-row-overdue:hover { background-image: repeating-linear-gradient(-45deg, transparent 0, transparent 8px, rgba(252, 165, 165, 0.07) 8px, rgba(252, 165, 165, 0.07) 14px); }
.table .cell-title { font-weight: 600; color: var(--t-1); display: flex; align-items: center; gap: 10px; }
.table .cell-title .ic { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; color: white; flex-shrink: 0; }
.table .cell-title .ic svg { width: 13px; height: 13px; stroke-width: 2.2; }
.row-menu-cell { width: 40px; padding-right: 8px !important; }
.progress-bar { width: 100px; height: 6px; background: var(--bg-tint-2); border-radius: 3px; overflow: hidden; }
.progress-bar-fill { height: 100%; background: var(--green); border-radius: 3px; transition: width 240ms ease; }
.progress-bar-fill.warn { background: var(--amber); }
.progress-bar-fill.bad { background: var(--red); }
.progress-row { display: flex; align-items: center; gap: 8px; }
.progress-row .pct { font-size: 11.5px; font-weight: 600; color: var(--t-2); font-variant-numeric: tabular-nums; min-width: 32px; }
.empty-state { text-align: center; padding: 60px 24px; background: var(--bg-card); border: 1px dashed var(--border-strong); border-radius: 14px; }
.empty-state-icon { width: 56px; height: 56px; border-radius: 14px; background: var(--bg-tint); display: grid; place-items: center; margin: 0 auto 16px; color: var(--t-3); }
.empty-state h3 { font-size: 16px; font-weight: 700; color: var(--t-1); margin-bottom: 6px; }
.empty-state p { font-size: 13px; color: var(--t-3); margin-bottom: 16px; max-width: 360px; margin-left: auto; margin-right: auto; }
.modal-overlay { position: fixed; inset: 0; background: rgba(13, 21, 48, 0.5); backdrop-filter: blur(2px); z-index: 100; display: none; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity 180ms ease; }
.modal-overlay.show { display: flex; opacity: 1; }
.modal { background: var(--bg-card); border-radius: 14px; width: 100%; max-width: 520px; max-height: calc(100vh - 48px); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-xl); transform: translateY(8px); transition: transform 180ms ease; }
.modal-overlay.show .modal { transform: translateY(0); }
.modal.modal-lg { max-width: 720px; }
.modal-header { padding: 18px 20px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; gap: 14px; }
.modal-title { font-size: 16px; font-weight: 700; color: var(--t-1); letter-spacing: -0.015em; }
.modal-subtitle { font-size: 13px; color: var(--t-3); margin-top: 3px; }
.modal-close { margin-left: auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; color: var(--t-3); }
.modal-close:hover { background: var(--bg-tint); color: var(--t-1); }
.modal-body { padding: 18px 20px; overflow-y: auto; flex: 1; }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; background: var(--bg-tint); }
.field { margin-bottom: 16px; }
.field-label { display: block; font-size: 12px; font-weight: 600; color: var(--t-2); margin-bottom: 6px; }
.field-input, .field-textarea, .field-select { width: 100%; padding: 9px 11px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; font-size: 13.5px; color: var(--t-1); outline: none; transition: border-color 120ms, box-shadow 120ms; }
.field-input:focus, .field-textarea:focus, .field-select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
.field-textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-helper { font-size: 11.5px; color: var(--t-4); margin-top: 5px; line-height: 1.4; }
.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.category-tile { border: 1px solid var(--border); background: var(--bg-card); border-radius: 9px; padding: 12px 10px; display: flex; align-items: center; gap: 9px; cursor: pointer; transition: border-color 120ms, background 120ms; }
.category-tile:hover { border-color: var(--border-strong); }
.category-tile.selected { border-color: var(--blue); background: var(--blue-tint); }
.category-tile-icon { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; color: white; flex-shrink: 0; }
.category-tile-icon svg { width: 14px; height: 14px; stroke-width: 2.2; }
.category-tile-label { font-size: 12px; font-weight: 600; color: var(--t-1); }
.toggle-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg-tint); border: 1px solid var(--border); border-radius: 9px; }
.toggle-row-text { flex: 1; }
.toggle-row-title { font-size: 13px; font-weight: 600; color: var(--t-1); margin-bottom: 2px; }
.toggle-row-help { font-size: 11.5px; color: var(--t-3); line-height: 1.4; }
.toggle-switch { position: relative; width: 36px; height: 20px; background: var(--border-strong); border-radius: 100px; cursor: pointer; transition: background 140ms; flex-shrink: 0; }
.toggle-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: white; border-radius: 50%; box-shadow: var(--shadow-sm); transition: transform 140ms; }
.toggle-switch.on { background: var(--blue); }
.toggle-switch.on::after { transform: translateX(16px); }
.action-menu { position: fixed; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-xl); padding: 4px; min-width: 200px; z-index: 150; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 120ms, transform 140ms; }
.action-menu.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.action-menu-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; font-size: 13px; color: var(--t-2); font-weight: 500; cursor: pointer; transition: background 100ms, color 100ms; }
.action-menu-item:hover { background: var(--bg-tint); color: var(--t-1); }
.action-menu-item svg { width: 14px; height: 14px; color: var(--t-4); flex-shrink: 0; stroke-width: 2; }
.action-menu-item:hover svg { color: var(--t-2); }
.action-menu-item.danger { color: var(--red); }
.action-menu-item.danger svg { color: var(--red); }
.action-menu-item.danger:hover { background: var(--red-soft); }
.action-menu-divider { height: 1px; background: var(--border-soft); margin: 4px 0; }
.drawer-overlay { position: fixed; inset: 0; background: var(--bg-app); z-index: 90; display: none; flex-direction: column; opacity: 0; transition: opacity 200ms ease; }
.drawer-overlay.show { display: flex; opacity: 1; }
.drawer-topbar { height: var(--topbar-h); background: var(--bg-card); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 24px; gap: 14px; flex-shrink: 0; }
.drawer-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--t-3); padding: 6px 10px; border-radius: 7px; transition: background 120ms, color 120ms; }
.drawer-back:hover { background: var(--bg-tint); color: var(--t-1); }
.drawer-title-wrap { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.drawer-title { font-size: 14px; font-weight: 600; color: var(--t-1); letter-spacing: -0.01em; }
.drawer-subtitle { font-size: 12px; color: var(--t-3); }
.drawer-actions { display: flex; align-items: center; gap: 8px; }
.drawer-body { flex: 1; overflow-y: auto; }
.view-page { padding: 28px 32px 80px; max-width: 1100px; width: 100%; margin: 0 auto; }
.view-hero { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 22px 24px; display: flex; align-items: flex-start; gap: 18px; margin-bottom: 18px; }
.view-hero-icon { width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center; color: white; flex-shrink: 0; }
.view-hero-icon svg { width: 26px; height: 26px; stroke-width: 2; }
.view-hero-text { flex: 1; min-width: 0; }
.view-hero-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
.view-hero-title { font-size: 22px; font-weight: 700; letter-spacing: -0.022em; color: var(--t-1); line-height: 1.2; margin-bottom: 8px; }
.view-hero-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--t-3); flex-wrap: wrap; }
.view-hero-meta strong { color: var(--t-2); font-weight: 600; }
.view-hero-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.view-action-menu-btn.open { background: var(--bg-tint); }
.view-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 18px; }
.view-stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 11px; padding: 14px 16px; }
.view-stat-num { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; color: var(--t-1); line-height: 1.05; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.view-stat-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t-3); }
.view-stat-trend { font-size: 11.5px; color: var(--green); font-weight: 600; margin-top: 4px; }
.view-stat-trend.down { color: var(--red); }
.view-section-block { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.view-section-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--bg-tint); border-bottom: 1px solid var(--border); }
.view-section-num { width: 24px; height: 24px; border-radius: 7px; background: var(--blue-tint); color: var(--blue); display: grid; place-items: center; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.view-section-name { font-size: 14px; font-weight: 600; color: var(--t-1); flex: 1; }
.view-section-count { font-size: 11.5px; color: var(--t-3); font-weight: 500; }
.view-section-body { padding: 6px 18px 12px; }
.view-q { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); }
.view-q:last-child { border-bottom: none; }
.view-q-num { font-size: 11px; font-weight: 600; color: var(--t-4); font-variant-numeric: tabular-nums; min-width: 24px; }
.view-q-text { flex: 1; font-size: 13.5px; color: var(--t-1); line-height: 1.4; }
.view-q-required { color: var(--red); font-weight: 700; margin-left: 3px; }
.view-q-type-pill { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t-3); background: var(--bg-tint-2); padding: 2px 7px; border-radius: 4px; flex-shrink: 0; }
.run-layout { display: grid; grid-template-columns: 280px 1fr 320px; height: 100%; min-height: 0; }
.run-sidenav { background: var(--bg-card); border-right: 1px solid var(--border); overflow-y: auto; padding: 18px 12px; }
.run-sidenav-title { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-3); padding: 0 8px 10px; }
.run-section { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 7px; font-size: 13px; color: var(--t-2); cursor: pointer; transition: background 120ms; font-weight: 500; }
.run-section:hover { background: var(--bg-tint); }
.run-section.active { background: var(--blue-tint); color: var(--blue); font-weight: 600; }
.run-section-bullet { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-strong); display: grid; place-items: center; flex-shrink: 0; color: transparent; transition: all 140ms; }
.run-section-bullet svg { width: 11px; height: 11px; stroke-width: 3; }
.run-section.complete .run-section-bullet { background: var(--green); border-color: var(--green); color: white; }
.run-section.partial .run-section-bullet { border-color: var(--amber); }
.run-section.partial .run-section-bullet::after { content: ''; width: 7px; height: 7px; background: var(--amber); border-radius: 50%; }
.run-section-name { flex: 1; }
.run-section-progress { font-size: 11px; color: var(--t-4); font-variant-numeric: tabular-nums; }
.run-main { overflow-y: auto; padding: 28px 36px 80px; max-width: 760px; width: 100%; margin: 0 auto; }
.run-section-header { margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.run-section-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
.run-section-h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--t-1); margin-bottom: 4px; }
.run-section-desc { font-size: 13.5px; color: var(--t-3); line-height: 1.5; }
.run-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin-bottom: 12px; transition: border-color 140ms, background 140ms; }
.run-item.answered { border-color: var(--border-strong); }
.run-item.failed { background: var(--red-tint); border-color: rgba(239, 68, 68, 0.3); }
.run-item-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.run-item-num { width: 24px; height: 24px; border-radius: 7px; background: var(--bg-tint-2); display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--t-3); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.run-item.answered .run-item-num { background: var(--green-soft); color: #047857; }
.run-item.failed .run-item-num { background: var(--red-soft); color: #b91c1c; }
[data-theme="dark"] .run-item.answered .run-item-num { color: #6ee7b7; }
[data-theme="dark"] .run-item.failed .run-item-num { color: #fca5a5; }
.run-item-q { flex: 1; min-width: 0; }
.run-item-question { font-size: 14.5px; font-weight: 500; color: var(--t-1); line-height: 1.4; margin-bottom: 4px; }
.run-item-help { font-size: 12px; color: var(--t-3); line-height: 1.45; }
.run-item-required { color: var(--red); font-weight: 700; margin-left: 3px; }
.yn-group { display: flex; gap: 8px; flex-wrap: wrap; }
.yn-btn { flex: 1; min-width: 100px; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: 9px; background: var(--bg-card); font-size: 13px; font-weight: 600; color: var(--t-2); display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: border-color 140ms, background 140ms, color 140ms; }
.yn-btn:hover { border-color: var(--t-3); }
.yn-btn svg { width: 14px; height: 14px; stroke-width: 2.5; }
.yn-btn.active.yes { background: var(--green-soft); border-color: var(--green); color: #047857; }
.yn-btn.active.no { background: var(--red-soft); border-color: var(--red); color: #b91c1c; }
.yn-btn.active.na { background: var(--bg-tint-2); border-color: var(--t-3); color: var(--t-2); }
[data-theme="dark"] .yn-btn.active.yes { color: #6ee7b7; }
[data-theme="dark"] .yn-btn.active.no { color: #fca5a5; }
.rating-group { display: flex; gap: 6px; }
.rating-btn { width: 44px; height: 44px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--bg-card); font-size: 14px; font-weight: 700; color: var(--t-2); font-variant-numeric: tabular-nums; transition: border-color 140ms, background 140ms, color 140ms, transform 80ms; }
.rating-btn:hover { border-color: var(--t-3); }
.rating-btn.active { background: var(--blue); border-color: var(--blue); color: white; transform: scale(1.05); }
.choice-group { display: flex; flex-direction: column; gap: 6px; }
.choice-btn { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--bg-card); font-size: 13px; font-weight: 500; color: var(--t-2); text-align: left; transition: border-color 140ms, background 140ms; }
.choice-btn:hover { border-color: var(--t-3); }
.choice-btn.active { border-color: var(--blue); background: var(--blue-tint); color: var(--blue); font-weight: 600; }
.choice-radio { width: 16px; height: 16px; border: 2px solid var(--border-strong); border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; }
.choice-btn.active .choice-radio { border-color: var(--blue); }
.choice-btn.active .choice-radio::after { content: ''; width: 6px; height: 6px; background: var(--blue); border-radius: 50%; }
.run-item-actions { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.run-item-action-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--t-3); padding: 5px 9px; border-radius: 6px; transition: background 120ms, color 120ms; }
.run-item-action-btn:hover { background: var(--bg-tint); color: var(--t-1); }
.run-item-action-btn svg { width: 13px; height: 13px; stroke-width: 2; }
.run-item-comment { margin-top: 10px; width: 100%; background: var(--bg-tint); border: 1px solid var(--border); padding: 9px 11px; border-radius: 7px; font-size: 12.5px; color: var(--t-1); outline: none; resize: vertical; min-height: 56px; font-family: inherit; display: none; }
.run-item-comment.show { display: block; }
.run-item-comment:focus { border-color: var(--blue); }
.run-summary-pane { background: var(--bg-card); border-left: 1px solid var(--border); overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.run-meta-card { background: var(--bg-tint); border: 1px solid var(--border); border-radius: 11px; padding: 14px 15px; }
.run-meta-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 12.5px; }
.run-meta-row + .run-meta-row { border-top: 1px solid var(--border-soft); }
.run-meta-label { color: var(--t-3); font-weight: 500; }
.run-meta-val { color: var(--t-1); font-weight: 600; }
.run-progress-card { text-align: center; padding: 20px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; }
.run-progress-ring { width: 100px; height: 100px; margin: 0 auto 12px; position: relative; }
.run-progress-ring svg { transform: rotate(-90deg); }
.run-progress-ring-num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; font-weight: 700; color: var(--t-1); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.run-progress-label { font-size: 12px; color: var(--t-3); margin-bottom: 12px; }
.run-progress-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.run-progress-stat-num { font-size: 16px; font-weight: 700; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.run-progress-stat-num.green { color: var(--green); }
.run-progress-stat-num.red { color: var(--red); }
.run-progress-stat-num.grey { color: var(--t-3); }
.run-progress-stat-label { font-size: 10px; color: var(--t-3); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; margin-top: 2px; }
.builder-layout { display: grid; grid-template-columns: 280px 1fr 320px; height: 100%; min-height: 0; }
.builder-palette { background: var(--bg-card); border-right: 1px solid var(--border); padding: 20px 14px; overflow-y: auto; }
.palette-section-title { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-3); padding: 0 6px 10px; }
.palette-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card); margin-bottom: 6px; cursor: grab; transition: border-color 120ms, transform 80ms; font-size: 12.5px; font-weight: 500; color: var(--t-2); }
.palette-item:hover { border-color: var(--blue); color: var(--blue); }
.palette-item:active { transform: scale(0.98); cursor: grabbing; }
.palette-item-icon { width: 26px; height: 26px; background: var(--bg-tint); border-radius: 6px; display: grid; place-items: center; color: var(--t-3); flex-shrink: 0; }
.palette-item-icon svg { width: 13px; height: 13px; stroke-width: 2.2; }
.builder-canvas { overflow-y: auto; padding: 28px 36px 100px; max-width: 760px; width: 100%; margin: 0 auto; }
.builder-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 14px; overflow: hidden; }
.builder-section-head { background: var(--bg-tint); padding: 14px 18px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border); }
.builder-section-handle { color: var(--t-4); cursor: grab; }
.builder-section-name { font-size: 14px; font-weight: 600; color: var(--t-1); flex: 1; background: transparent; border: none; outline: none; padding: 4px 6px; border-radius: 5px; margin-left: -6px; }
.builder-section-name:focus { background: var(--bg-card); box-shadow: 0 0 0 1px var(--blue); }
.builder-section-count { font-size: 11.5px; color: var(--t-3); font-weight: 500; }
.builder-section-body { padding: 12px; }
.builder-q { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 9px; margin-bottom: 8px; background: var(--bg-tint); transition: border-color 120ms; }
.builder-q:hover { border-color: var(--border-strong); background: var(--bg-card); }
.builder-q-handle { color: var(--t-4); margin-top: 2px; cursor: grab; }
.builder-q-body { flex: 1; min-width: 0; }
.builder-q-text { width: 100%; background: transparent; border: none; outline: none; font-size: 13.5px; font-weight: 500; color: var(--t-1); padding: 2px 4px; margin-left: -4px; border-radius: 5px; }
.builder-q-text:focus { background: var(--bg-card); box-shadow: 0 0 0 1px var(--blue); }
.builder-q-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 11.5px; color: var(--t-3); }
.builder-q-type-select { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 5px; font-weight: 600; font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--t-2); cursor: pointer; transition: border-color 120ms; }
.builder-q-type-select:hover { border-color: var(--blue); color: var(--blue); }
.builder-q-type-select svg { width: 11px; height: 11px; }
.builder-q-type-select .chevron { width: 10px; height: 10px; opacity: 0.6; }
.builder-q-actions { display: flex; align-items: center; gap: 2px; opacity: 0; transition: opacity 120ms; }
.builder-q:hover .builder-q-actions { opacity: 1; }
.builder-q-action-btn { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 5px; color: var(--t-4); transition: background 100ms, color 100ms; }
.builder-q-action-btn:hover { background: var(--bg-tint-2); color: var(--t-1); }
.builder-q-action-btn.danger:hover { background: var(--red-soft); color: var(--red); }
.builder-q-required-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--t-3); cursor: pointer; padding: 2px 6px; border-radius: 4px; transition: background 100ms, color 100ms; }
.builder-q-required-toggle:hover { background: var(--bg-tint-2); }
.builder-q-required-toggle.on { color: var(--red); font-weight: 600; }
.builder-add-btn { width: 100%; padding: 10px; background: transparent; border: 1px dashed var(--border-strong); border-radius: 9px; font-size: 12.5px; font-weight: 500; color: var(--t-3); display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: border-color 120ms, color 120ms; }
.builder-add-btn:hover { border-color: var(--blue); color: var(--blue); }
.builder-section-add { width: 100%; padding: 14px; background: transparent; border: 2px dashed var(--border-strong); border-radius: 12px; font-size: 13px; font-weight: 600; color: var(--t-3); display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: border-color 120ms, color 120ms, background 120ms; }
.builder-section-add:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-tint); }
.builder-settings { background: var(--bg-card); border-left: 1px solid var(--border); padding: 22px; overflow-y: auto; }
.builder-settings-title { font-size: 13px; font-weight: 700; color: var(--t-1); margin-bottom: 14px; }
.builder-settings-divider { height: 1px; background: var(--border); margin: 18px 0; }
.toast-stack { position: fixed; bottom: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast { background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--green); border-radius: 10px; padding: 12px 16px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--t-1); font-weight: 500; box-shadow: var(--shadow-lg); min-width: 280px; transform: translateX(120%); transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1); }
.toast.show { transform: translateX(0); }
.toast svg { color: var(--green); width: 16px; height: 16px; }
.hyg-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; margin-bottom: 18px; }
.hyg-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.hyg-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 0; }
.hyg-card + .hyg-card { margin-top: 18px; }
.hyg-card-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.hyg-card-head > div:first-child { flex: 1; min-width: 0; }
.hyg-card-title { font-size: 14px; font-weight: 600; color: var(--t-1); letter-spacing: -0.01em; }
.hyg-card-meta { font-size: 11.5px; color: var(--t-3); margin-top: 2px; }
.hyg-card-body { padding: 8px 16px 12px; }
.hyg-card .table thead th { background: var(--bg-tint); }
.hyg-team-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); }
.hyg-team-row:last-child { border-bottom: none; }
.hyg-team-info { flex: 1; min-width: 0; }
.hyg-team-name { font-size: 13px; font-weight: 600; color: var(--t-1); line-height: 1.2; }
.hyg-team-role { font-size: 11.5px; color: var(--t-3); margin-top: 1px; }
.hyg-team-status { font-size: 11.5px; font-weight: 500; color: var(--t-3); }
.hyg-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.hyg-status-dot.present { background: var(--green); }
.hyg-status-dot.pause { background: var(--amber); }
.hyg-status-dot.absent { background: var(--t-4); }
.hyg-alert-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: 9px; cursor: pointer; transition: background 120ms; margin: 0 -6px; }
.hyg-alert-row:hover { background: var(--bg-tint); }
.hyg-alert-row + .hyg-alert-row { margin-top: 2px; }
.hyg-alert-cluster { padding: 9px 10px; margin: 2px -6px 0; border-radius: 9px; }
.hyg-alert-cluster:hover { background: var(--bg-tint); }
.hyg-alert-cluster-head { display: flex; align-items: flex-start; gap: 10px; }
.hyg-alert-cluster-split { display: flex; gap: 8px; margin-top: 8px; padding-left: 30px; }
.hyg-alert-cluster-col { flex: 1; min-width: 0; padding: 6px 8px; border-radius: 6px; background: var(--bg-card); border: 1px solid var(--border-soft); }
.hyg-alert-cluster-col.remed-col { border-left: 3px solid var(--blue); }
.hyg-alert-cluster-col.pend-col { border-left: 3px solid var(--amber); }
.hyg-alert-cluster-col-head { font-size: 10px; font-weight: 600; color: var(--t-2); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.hyg-alert-cluster-col-head .count { color: var(--t-3); font-weight: 500; }
.hyg-alert-mini-row { font-size: 11.5px; color: var(--t-2); padding: 3px 0; cursor: pointer; transition: color 100ms; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hyg-alert-mini-row:hover { color: var(--blue); }
.hyg-alert-mini-row > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hyg-alert-icon { width: 30px; height: 30px; border-radius: 8px; background: var(--red-soft); color: var(--red); display: grid; place-items: center; flex-shrink: 0; }
.hyg-alert-icon.warn { background: var(--amber-soft); color: var(--amber); }
.hyg-alert-icon svg { width: 14px; height: 14px; stroke-width: 2; }
.hyg-alert-text { font-size: 13px; font-weight: 500; color: var(--t-1); line-height: 1.4; }
.hyg-alert-meta { font-size: 11.5px; color: var(--t-3); margin-top: 2px; line-height: 1.4; }
.hyg-activity-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.hyg-activity-row:last-child { border-bottom: none; }
.hyg-activity-row .av { width: 26px; height: 26px; font-size: 10.5px; }
.hyg-activity-text { flex: 1; min-width: 0; color: var(--t-2); line-height: 1.4; }
.hyg-activity-text strong { color: var(--t-1); font-weight: 600; }
.hyg-activity-meta { font-size: 11.5px; color: var(--t-3); white-space: nowrap; flex-shrink: 0; }
.hyg-activity-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 8px; border-radius: 100px; flex-shrink: 0; }
.hyg-activity-badge.ok { background: var(--green-soft); color: #047857; }
.hyg-activity-badge.nc { background: var(--red-soft); color: #b91c1c; }
[data-theme="dark"] .hyg-activity-badge.ok { color: #6ee7b7; }
[data-theme="dark"] .hyg-activity-badge.nc { color: #fca5a5; }
.tl-toolbar { padding: 14px 16px 12px; border-bottom: 1px solid var(--border-soft); }
.tl-toolbar .filter-bar { margin: 0; }
.tl-scroll { overflow-x: auto; overflow-y: visible; position: relative; }
.tl-grid { display: grid; grid-template-columns: 200px repeat(17, 60px); min-width: 1220px; position: relative; }
.tl-corner { grid-column: 1; grid-row: 1; height: 54px; position: sticky; left: 0; z-index: 6; background: var(--bg-tint); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.tl-axis-cell { grid-column: 2 / -1; grid-row: 1; background: var(--bg-tint); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; height: 54px; }
.tl-shift-band { display: flex; height: 22px; }
.tl-shift { font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-3); display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--border); }
.tl-shift-matin { width: 480px; background: var(--blue-tint); }
.tl-shift-aprem { width: 480px; background: var(--amber-soft); opacity: 0.55; }
[data-theme="dark"] .tl-shift-matin { background: rgba(13, 155, 244, 0.10); }
[data-theme="dark"] .tl-shift-aprem { background: rgba(245, 158, 11, 0.10); opacity: 1; }
.tl-hours { display: grid; grid-template-columns: repeat(17, 60px); height: 32px; }
.tl-hour { font-size: 10.5px; color: var(--t-3); font-variant-numeric: tabular-nums; padding: 9px 0 0 6px; border-right: 1px solid var(--border-soft); font-weight: 500; }
.tl-group-head { grid-column: 1 / -1; height: 30px; background: var(--bg-tint); border-bottom: 1px solid var(--border); border-top: 1px solid var(--border); cursor: pointer; user-select: none; position: relative; }
.tl-group-head-inner { position: sticky; left: 0; padding: 7px 14px; height: 100%; display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-3); width: max-content; box-sizing: border-box; }
.tl-group-head:hover .tl-group-head-inner { color: var(--t-2); }
.tl-group-chevron { width: 11px; height: 11px; transition: transform 140ms; flex-shrink: 0; color: var(--t-4); }
.tl-group-head.collapsed .tl-group-chevron { transform: rotate(-90deg); }
.tl-group-count { color: var(--t-4); font-weight: 600; letter-spacing: 0.04em; text-transform: none; }
.tl-zone { grid-column: 1; padding: 0 14px; font-size: 12.5px; color: var(--t-1); font-weight: 500; position: sticky; left: 0; background: var(--bg-card); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border-soft); z-index: 5; display: flex; align-items: center; height: 44px; }
.tl-zone.tall { height: 80px; }
.tl-track { grid-column: 2 / -1; height: 44px; background-image: repeating-linear-gradient(to right, transparent 0, transparent 59px, var(--border-soft) 59px, var(--border-soft) 60px); border-bottom: 1px solid var(--border-soft); position: relative; }
.tl-track.tall { height: 80px; }
.tl-block { position: absolute; top: 6px; height: 32px; border-radius: 6px; border: 1px solid; font-size: 11.5px; font-weight: 600; display: flex; align-items: center; gap: 5px; padding: 0 7px; cursor: pointer; transition: filter 120ms, transform 80ms, box-shadow 120ms; overflow: hidden; white-space: nowrap; z-index: 1; }
.tl-block:hover { filter: brightness(0.96); z-index: 3; box-shadow: var(--shadow-md); }
.tl-block:active { transform: translateY(1px); }
.tl-block.todo { background: var(--bg-tint-2); border-color: var(--border-strong); color: var(--t-2); }
.tl-block.progress { background: var(--amber-soft); border-color: var(--amber); color: #b45309; }
[data-theme="dark"] .tl-block.progress { color: #fcd34d; }
.tl-block.done { background: var(--green-soft); border-color: var(--green); color: #047857; }
[data-theme="dark"] .tl-block.done { color: #6ee7b7; }
.tl-block.overdue { background: var(--red-soft); border-color: var(--red); color: #b91c1c; background-image: repeating-linear-gradient(-45deg, transparent 0, transparent 4px, rgba(239, 68, 68, 0.16) 4px, rgba(239, 68, 68, 0.16) 8px); }
[data-theme="dark"] .tl-block.overdue { color: #fca5a5; background-image: repeating-linear-gradient(-45deg, transparent 0, transparent 4px, rgba(252, 165, 165, 0.10) 4px, rgba(252, 165, 165, 0.10) 8px); }
.tl-block .tl-block-av { width: 18px; height: 18px; font-size: 8.5px; flex-shrink: 0; border: 1.5px solid rgba(255, 255, 255, 0.55); }
.tl-block.narrow { padding: 0 5px; gap: 0; justify-content: center; }
.tl-block.narrow .tl-block-name { display: none; }
.tl-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--blue); z-index: 0; pointer-events: none; }
.tl-now-chip { position: absolute; top: 4px; transform: translateX(-50%); background: var(--blue); color: white; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; padding: 3px 9px; border-radius: 100px; white-space: nowrap; z-index: 4; pointer-events: none; box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35); }
.tl-tooltip { position: fixed; background: #0a1024; color: white; padding: 11px 13px; border-radius: 9px; font-size: 12px; font-weight: 500; z-index: 200; box-shadow: var(--shadow-xl); border: 1px solid var(--border-on-dark); pointer-events: none; opacity: 0; transition: opacity 120ms; max-width: 280px; line-height: 1.45; }
.tl-tooltip.show { opacity: 1; }
.tl-tooltip-title { font-weight: 700; margin-bottom: 4px; font-size: 12.5px; color: white; }
.tl-tooltip-row { color: rgba(255, 255, 255, 0.72); font-size: 11.5px; padding: 1px 0; }
.tl-tooltip-row strong { color: white; font-weight: 600; }
.tl-tooltip-divider { height: 1px; background: rgba(255, 255, 255, 0.12); margin: 5px 0 4px; }
.tl-narrow-notice { display: none; padding: 36px 24px; text-align: center; }
.tl-narrow-notice-icon { width: 44px; height: 44px; border-radius: 11px; background: var(--bg-tint); border: 1px solid var(--border); display: grid; place-items: center; margin: 0 auto 14px; color: var(--t-3); }
.tl-narrow-notice h3 { font-size: 14px; font-weight: 700; color: var(--t-1); margin-bottom: 6px; }
.tl-narrow-notice p { font-size: 12.5px; color: var(--t-3); margin-bottom: 14px; max-width: 320px; margin-left: auto; margin-right: auto; line-height: 1.5; }
/* Produits Chimiques */
.chem-banner { display: flex; align-items: center; gap: 12px; padding: 11px 14px 11px 16px; background: var(--amber-soft); border: 1px solid var(--amber); border-radius: 10px; margin-bottom: 18px; cursor: pointer; transition: filter 120ms; }
.chem-banner:hover { filter: brightness(0.97); }
[data-theme="dark"] .chem-banner { border-color: rgba(245, 158, 11, 0.4); }
.chem-banner-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--amber); color: white; display: grid; place-items: center; flex-shrink: 0; }
.chem-banner-icon svg { width: 16px; height: 16px; stroke-width: 2.2; }
.chem-banner-text { flex: 1; min-width: 0; font-size: 13px; color: var(--t-1); font-weight: 500; line-height: 1.45; }
.chem-banner-text strong { font-weight: 700; }
.chem-banner-close { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; color: var(--t-2); flex-shrink: 0; }
.chem-banner-close:hover { background: rgba(0,0,0,0.06); color: var(--t-1); }
[data-theme="dark"] .chem-banner-close { color: var(--t-2); }
[data-theme="dark"] .chem-banner-close:hover { background: rgba(255,255,255,0.08); }

.chem-filter-sep { width: 1px; height: 22px; background: var(--border-strong); margin: 0 4px; flex-shrink: 0; }
.chem-alert-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); flex-shrink: 0; box-shadow: 0 0 0 2px var(--amber-soft); }
.filter-chip[data-chem-status="alerts"].active .chem-alert-dot { box-shadow: 0 0 0 2px var(--bg-card); }

.chem-list { display: flex; flex-direction: column; gap: 8px; }
.chem-list-empty { padding: 32px 16px; text-align: center; color: var(--t-3); font-size: 13px; background: var(--bg-card); border: 1px dashed var(--border-strong); border-radius: 10px; }
.chem-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: border-color 140ms, box-shadow 140ms; min-height: 64px; }
.chem-row:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.chem-row.has-alert { box-shadow: inset 3px 0 0 0 var(--red); }
.chem-row.has-alert:hover { box-shadow: inset 3px 0 0 0 var(--red), var(--shadow-sm); }
.chem-row.has-warning { box-shadow: inset 3px 0 0 0 var(--amber); }
.chem-row.has-warning:hover { box-shadow: inset 3px 0 0 0 var(--amber), var(--shadow-sm); }

.chem-cat-icon { width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.chem-cat-icon svg { width: 19px; height: 19px; stroke-width: 2; }
.chem-cat-disinfect { background: var(--blue-tint); color: var(--blue); }
.chem-cat-detergent { background: var(--green-tint); color: #047857; }
.chem-cat-special { background: var(--purple-soft); color: #6d28d9; }
.chem-cat-tech { background: var(--amber-soft); color: #b45309; }
[data-theme="dark"] .chem-cat-detergent { color: #6ee7b7; }
[data-theme="dark"] .chem-cat-special { color: #c4b5fd; }
[data-theme="dark"] .chem-cat-tech { color: #fcd34d; }

.chem-primary { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.chem-name { font-size: 15px; font-weight: 600; color: var(--t-1); letter-spacing: -0.01em; line-height: 1.3; }
.chem-meta { font-size: 12px; color: var(--t-3); line-height: 1.3; }

.chem-pics { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.chem-pics-more { font-size: 11px; font-weight: 700; color: var(--t-3); background: var(--bg-tint-2); padding: 3px 8px; border-radius: 100px; white-space: nowrap; }

.ghs { display: inline-block; flex-shrink: 0; object-fit: contain; }

.chem-status-cell { display: flex; align-items: center; flex-shrink: 0; min-width: 138px; justify-content: flex-end; }

.chem-row-menu { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; color: var(--t-4); opacity: 0; transition: opacity 120ms, background 120ms, color 120ms; flex-shrink: 0; }
.chem-row:hover .chem-row-menu { opacity: 1; }
.chem-row-menu:hover, .chem-row-menu.open { opacity: 1; background: var(--bg-tint); color: var(--t-1); }

.chem-foot { font-size: 12.5px; color: var(--t-3); margin-top: 14px; }

/* Detail drawer (right-side) */
.chem-drawer-overlay { position: fixed; inset: 0; z-index: 95; display: none; }
.chem-drawer-overlay.show { display: block; }
/* Chem drawer opened over another drawer (Plannings, Suppliers, Livraison etc.)
   stacks above so backdrop click + ESC peel just the chem layer, returning
   the user to the originating drawer underneath. */
.chem-drawer-overlay.chem-drawer-stacked { z-index: 105; }
/* Same pattern for Plannings + Bulletins + Pré-service + Périodique + Signalements
   + Incidents quick-view drawer when opened over a host drawer. Each owns a
   stacked-marker class that ESC handler peels in reverse-open order. */
.chem-drawer-overlay.plan-drawer-stacked     { z-index: 106; }
.chem-drawer-overlay.bul-drawer-stacked      { z-index: 107; }
.chem-drawer-overlay.ps-drawer-stacked       { z-index: 107; }
.chem-drawer-overlay.ip-drawer-stacked       { z-index: 107; }
.chem-drawer-overlay.sig-drawer-stacked      { z-index: 108; }
.chem-drawer-overlay.inc-quick-drawer-stacked { z-index: 109; }
.chem-drawer-overlay::before { content: ''; position: absolute; inset: 0; background: rgba(13, 21, 48, 0.4); opacity: 0; transition: opacity 200ms; }
.chem-drawer-overlay.show::before { opacity: 1; }
.chem-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 600px; max-width: 100%; background: var(--bg-card); border-left: 1px solid var(--border); box-shadow: var(--shadow-xl); display: flex; flex-direction: column; transform: translateX(28px); opacity: 0; transition: transform 240ms ease, opacity 200ms ease; }
.chem-drawer-overlay.show .chem-drawer { transform: translateX(0); opacity: 1; }
.chem-drawer-head { padding: 22px 24px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; position: relative; }
.chem-drawer-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: var(--t-3); }
.chem-drawer-close:hover { background: var(--bg-tint); color: var(--t-1); }
.chem-drawer-head-row { display: flex; align-items: flex-start; gap: 14px; padding-right: 36px; }
.chem-drawer-icon { width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; }
.chem-drawer-icon svg { width: 26px; height: 26px; stroke-width: 2; }
.chem-drawer-name { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--t-1); line-height: 1.2; }
.chem-drawer-sub { font-size: 12.5px; color: var(--t-3); margin-top: 4px; }
.chem-drawer-pics { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; flex-wrap: wrap; }
.chem-drawer-pics .ghs { width: 36px; height: 36px; }
.chem-drawer-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.chem-drawer-body { flex: 1; overflow-y: auto; padding: 0 24px 32px; }
.chem-drawer-body::-webkit-scrollbar,
.chem-drawer::-webkit-scrollbar,
.modal::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.run-main::-webkit-scrollbar,
.run-sidenav::-webkit-scrollbar,
.run-summary-pane::-webkit-scrollbar,
.builder-canvas::-webkit-scrollbar,
.builder-palette::-webkit-scrollbar,
.builder-settings::-webkit-scrollbar { display: none; width: 0; height: 0; }
.chem-drawer-body,
.chem-drawer,
.modal,
.modal-body,
.run-main,
.run-sidenav,
.run-summary-pane,
.builder-canvas,
.builder-palette,
.builder-settings { scrollbar-width: none; -ms-overflow-style: none; }

.chem-section { border-bottom: 1px solid var(--border-soft); }
.chem-section:last-child { border-bottom: none; }
.chem-section-head { display: flex; align-items: center; gap: 10px; padding: 14px 4px; cursor: pointer; user-select: none; }
.chem-section-head:hover .chem-section-name { color: var(--t-1); }
.chem-section-name { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--t-1); letter-spacing: -0.005em; }
.chem-section-chevron { width: 14px; height: 14px; color: var(--t-4); transition: transform 200ms ease-out; flex-shrink: 0; }
.chem-section.open .chem-section-chevron { transform: rotate(90deg); }
.chem-section-body { max-height: 0; overflow: hidden; padding: 0 4px; transition: max-height 220ms ease-out, padding 200ms ease-out; }
.chem-section.open .chem-section-body { max-height: 2400px; padding: 0 4px 18px; }

.chem-grid { display: grid; grid-template-columns: 150px 1fr; gap: 10px 16px; font-size: 13px; align-items: start; }
.chem-grid > .lbl { color: var(--t-3); font-weight: 500; padding-top: 1px; }
.chem-grid > .val { color: var(--t-1); font-weight: 500; line-height: 1.45; }

.chem-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.chem-tag { font-size: 11.5px; font-weight: 500; padding: 3px 9px; border-radius: 100px; background: var(--bg-tint-2); color: var(--t-2); white-space: nowrap; }
.chem-tag.epi { background: var(--blue-tint); color: var(--blue); display: inline-flex; align-items: center; gap: 5px; }
.chem-tag.epi svg { width: 11px; height: 11px; stroke-width: 2.2; }

.chem-pic-cell { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 76px; }
.chem-pic-cell .ghs { width: 36px; height: 36px; }
.chem-pic-cell .lbl { font-size: 10.5px; color: var(--t-3); text-align: center; line-height: 1.2; font-weight: 500; }
.chem-pic-row { display: flex; flex-wrap: wrap; gap: 12px; padding: 4px 0 8px; }

.chem-callout { padding: 10px 12px; border-radius: 8px; background: var(--red-tint); border: 1px solid rgba(239, 68, 68, 0.25); font-size: 12.5px; color: var(--t-1); line-height: 1.5; display: flex; gap: 8px; align-items: flex-start; }
.chem-callout svg { width: 16px; height: 16px; color: var(--red); flex-shrink: 0; margin-top: 1px; stroke-width: 2.2; }
[data-theme="dark"] .chem-callout { border-color: rgba(252, 165, 165, 0.25); }

.chem-h-line { font-size: 12.5px; color: var(--t-2); padding: 4px 0; line-height: 1.45; }
.chem-h-line strong { color: var(--t-1); font-weight: 700; }

.chem-file-row { display: flex; align-items: center; gap: 10px; padding: 11px 12px; background: var(--bg-tint); border: 1px solid var(--border); border-radius: 8px; }
.chem-file-icon { width: 32px; height: 32px; border-radius: 7px; background: var(--red-soft); color: var(--red); display: grid; place-items: center; flex-shrink: 0; }
.chem-file-icon svg { width: 14px; height: 14px; }
.chem-file-info { flex: 1; min-width: 0; }
.chem-file-name { font-size: 13px; font-weight: 600; color: var(--t-1); line-height: 1.2; }
.chem-file-meta { font-size: 11.5px; color: var(--t-3); margin-top: 2px; }
.chem-file-link { font-size: 12px; font-weight: 600; color: var(--blue); padding: 5px 9px; border-radius: 6px; flex-shrink: 0; cursor: pointer; }
.chem-file-link:hover { background: var(--blue-tint); }

.chem-trained-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.chem-trained-row:last-child { border-bottom: none; }
.chem-trained-info { flex: 1; min-width: 0; }
.chem-trained-name { font-weight: 600; color: var(--t-1); font-size: 13px; line-height: 1.2; }
.chem-trained-role { font-size: 11.5px; color: var(--t-3); margin-top: 2px; }
.chem-trained-date { font-size: 11.5px; color: var(--t-3); white-space: nowrap; flex-shrink: 0; }

.chem-empty-line { padding: 8px 4px; color: var(--t-3); font-size: 12.5px; }

.chem-link-inert { font-size: 12px; font-weight: 600; color: var(--t-4); cursor: not-allowed; padding: 4px 0; display: inline-block; }

.chem-version-list { font-size: 12px; color: var(--t-3); padding: 4px 0; }
.chem-version-row { padding: 3px 0; display: flex; gap: 8px; }
.chem-version-row strong { color: var(--t-2); font-weight: 600; min-width: 40px; }

.chem-foot-meta { padding-top: 16px; border-top: 1px solid var(--border-soft); font-size: 11.5px; color: var(--t-3); display: flex; flex-direction: column; gap: 3px; margin-top: 18px; }

/* Fournisseurs */
.chem-cat-chimie { background: var(--blue-tint); color: var(--blue); }
.chem-cat-linge { background: var(--teal-tint); color: #0f766e; }
.chem-cat-alimentaire { background: var(--green-tint); color: #047857; }
.chem-cat-incendie { background: var(--red-tint); color: var(--red); }
.chem-cat-technique { background: var(--purple-soft); color: #6d28d9; }
.chem-cat-pest { background: var(--amber-soft); color: #b45309; }
.chem-cat-dechets { background: var(--bg-tint-2); color: var(--t-2); }
.chem-cat-textiles { background: rgba(236, 72, 153, 0.12); color: #be185d; }
.chem-cat-autres { background: var(--bg-tint-2); color: var(--t-3); }
[data-theme="dark"] .chem-cat-linge { color: #5eead4; }
[data-theme="dark"] .chem-cat-alimentaire { color: #6ee7b7; }
[data-theme="dark"] .chem-cat-incendie { color: #fca5a5; }
[data-theme="dark"] .chem-cat-technique { color: #c4b5fd; }
[data-theme="dark"] .chem-cat-pest { color: #fcd34d; }
[data-theme="dark"] .chem-cat-textiles { color: #f9a8d4; }

.fournis-pills { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.fournis-pill-mini { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 100px; border: 1px solid var(--border); background: var(--bg-card); color: var(--t-2); white-space: nowrap; }
.fournis-pill-mini svg { width: 10px; height: 10px; stroke-width: 2.6; }
.fournis-pill-mini.brn-ok { color: #047857; border-color: rgba(16, 185, 129, 0.3); background: var(--green-tint); }
.fournis-pill-mini.brn-warn { color: #b45309; border-color: rgba(245, 158, 11, 0.3); background: var(--amber-soft); }
.fournis-pill-mini.brn-bad { color: #b91c1c; border-color: rgba(239, 68, 68, 0.3); background: var(--red-soft); }
[data-theme="dark"] .fournis-pill-mini.brn-ok { color: #6ee7b7; }
[data-theme="dark"] .fournis-pill-mini.brn-warn { color: #fcd34d; }
[data-theme="dark"] .fournis-pill-mini.brn-bad { color: #fca5a5; }
.fournis-pill-mini .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.fournis-pill-mini .dot.green { background: var(--green); }
.fournis-pill-mini .dot.amber { background: var(--amber); }
.fournis-pill-mini .dot.red { background: var(--red); }

.fournis-risk { font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 100px; white-space: nowrap; }
.fournis-risk.low { background: var(--bg-tint-2); color: var(--t-3); }
.fournis-risk.medium { background: var(--amber-soft); color: #b45309; }
.fournis-risk.high { background: var(--red-soft); color: #b91c1c; }
[data-theme="dark"] .fournis-risk.medium { color: #fcd34d; }
[data-theme="dark"] .fournis-risk.high { color: #fca5a5; }

.fournis-status-cell { display: flex; align-items: center; flex-shrink: 0; min-width: 110px; justify-content: flex-end; }

/* Document rows in supplier drawer */
.fournis-doc-row { display: flex; align-items: center; gap: 12px; padding: 11px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 9px; margin-bottom: 6px; transition: border-color 140ms; }
.fournis-doc-row:hover { border-color: var(--border-strong); }
.fournis-doc-row.expired { border-color: rgba(239, 68, 68, 0.3); background: var(--red-tint); }
.fournis-doc-row.warning { border-color: rgba(245, 158, 11, 0.3); }
.fournis-doc-row.missing { border-color: var(--border-strong); background: var(--bg-tint); }
.fournis-doc-icon { width: 32px; height: 32px; border-radius: 7px; background: var(--bg-tint-2); color: var(--t-3); display: grid; place-items: center; flex-shrink: 0; }
.fournis-doc-icon svg { width: 14px; height: 14px; }
.fournis-doc-row.valid .fournis-doc-icon { background: var(--green-soft); color: #047857; }
.fournis-doc-row.warning .fournis-doc-icon { background: var(--amber-soft); color: var(--amber); }
.fournis-doc-row.expired .fournis-doc-icon, .fournis-doc-row.missing .fournis-doc-icon { background: var(--red-soft); color: var(--red); }
[data-theme="dark"] .fournis-doc-row.valid .fournis-doc-icon { color: #6ee7b7; }
.fournis-doc-info { flex: 1; min-width: 0; }
.fournis-doc-name { font-size: 13px; font-weight: 600; color: var(--t-1); line-height: 1.3; }
.fournis-doc-meta { font-size: 11.5px; color: var(--t-3); margin-top: 2px; line-height: 1.4; }
.fournis-doc-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.fournis-doc-link { font-size: 11.5px; font-weight: 600; color: var(--blue); padding: 4px 8px; border-radius: 6px; cursor: pointer; }
.fournis-doc-link:hover { background: var(--blue-tint); }
.fournis-doc-link.disabled { color: var(--t-4); cursor: not-allowed; }
.fournis-doc-link.disabled:hover { background: transparent; }

.fournis-doc-wrap { margin-bottom: 6px; }
.fournis-doc-wrap .fournis-doc-row { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 1px dashed var(--border); }
.fournis-doc-action-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--border); border-top: none; border-radius: 0 0 9px 9px; }
.fournis-doc-wrap.status-expired .fournis-doc-row { border-color: rgba(239, 68, 68, 0.3); }
.fournis-doc-wrap.status-expired .fournis-doc-action-bar { border-color: rgba(239, 68, 68, 0.3); background: var(--red-tint); }
.fournis-doc-wrap.status-warning .fournis-doc-row { border-color: rgba(245, 158, 11, 0.3); }
.fournis-doc-wrap.status-warning .fournis-doc-action-bar { border-color: rgba(245, 158, 11, 0.3); background: var(--amber-soft); }
.fournis-doc-action-bar .btn { font-size: 11.5px; padding: 5px 10px; }
.fournis-doc-action-bar-spacer { flex: 1; }
.fournis-add-doc-btn { width: 100%; margin-top: 8px; padding: 10px; background: transparent; border: 1px dashed var(--border-strong); border-radius: 9px; font-size: 12.5px; font-weight: 500; color: var(--t-3); display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: border-color 120ms, color 120ms; cursor: pointer; }
.fournis-add-doc-btn:hover { border-color: var(--blue); color: var(--blue); }
.fournis-add-doc-btn svg { width: 13px; height: 13px; stroke-width: 2.2; }

.fournis-products-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.fournis-product-tag { font-size: 11.5px; font-weight: 500; padding: 4px 10px; border-radius: 100px; background: var(--blue-tint); color: var(--blue); cursor: pointer; transition: filter 120ms; border: 1px solid transparent; }
.fournis-product-tag:hover { filter: brightness(0.96); border-color: var(--blue); }

.fournis-tt-trigger { display: inline-flex; align-items: center; gap: 4px; cursor: help; position: relative; }
.fournis-tt-trigger svg { width: 12px; height: 12px; color: var(--t-4); }
.fournis-tt-bubble { position: absolute; bottom: calc(100% + 8px); left: 0; background: #0a1024; color: white; padding: 8px 11px; border-radius: 7px; font-size: 11.5px; font-weight: 500; line-height: 1.5; z-index: 10; box-shadow: var(--shadow-lg); border: 1px solid var(--border-on-dark); width: 260px; opacity: 0; pointer-events: none; transition: opacity 120ms; }
.fournis-tt-trigger:hover .fournis-tt-bubble { opacity: 1; }

.fournis-note-row { padding: 10px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; line-height: 1.45; }
.fournis-note-row:last-child { border-bottom: none; }
.fournis-note-meta { font-size: 11px; font-weight: 600; color: var(--t-3); margin-bottom: 3px; letter-spacing: 0.02em; }
.fournis-note-meta strong { color: var(--t-2); font-weight: 700; }
.fournis-note-text { color: var(--t-2); }

.fournis-modal-section-title { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-3); margin: 18px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border-soft); }
.fournis-modal-section-title:first-child { margin-top: 0; }

.fournis-subcat-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 6px 0; }
.fournis-subcat-chip { font-size: 11.5px; font-weight: 500; padding: 5px 10px; border-radius: 100px; background: var(--bg-card); color: var(--t-2); border: 1px solid var(--border); cursor: pointer; transition: border-color 120ms, background 120ms; user-select: none; }
.fournis-subcat-chip:hover { border-color: var(--t-3); }
.fournis-subcat-chip.selected { background: var(--blue-tint); color: var(--blue); border-color: var(--blue); font-weight: 600; }

.fournis-risk-help { font-size: 11.5px; color: var(--t-3); line-height: 1.5; padding: 8px 11px; background: var(--bg-tint); border-radius: 7px; margin-top: 6px; }

/* Tableau de bord (suppliers dashboard) */
.fournis-dash-kpi { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 18px; }
.fournis-kpi-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; cursor: pointer; transition: border-color 140ms, box-shadow 140ms, transform 80ms; }
.fournis-kpi-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.fournis-kpi-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t-3); margin-bottom: 8px; }
.fournis-kpi-num { font-size: 28px; font-weight: 700; letter-spacing: -0.025em; color: var(--t-1); line-height: 1.05; font-variant-numeric: tabular-nums; }
.fournis-kpi-num.amber { color: var(--amber); }
.fournis-kpi-num.red { color: var(--red); }
.fournis-kpi-sub { font-size: 11.5px; color: var(--t-3); margin-top: 6px; }

.fournis-dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fournis-dash-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; min-height: 360px; }
.fournis-dash-card-head { padding: 14px 16px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; gap: 10px; }
.fournis-dash-card-title { font-size: 13.5px; font-weight: 600; color: var(--t-1); flex: 1; letter-spacing: -0.005em; }
.fournis-dash-card-count { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 100px; background: var(--bg-tint-2); color: var(--t-3); }
.fournis-dash-card-link { font-size: 12px; font-weight: 600; color: var(--blue); cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.fournis-dash-card-link:hover { background: var(--blue-tint); }
.fournis-dash-card-body { flex: 1; overflow-y: auto; padding: 6px 12px; max-height: 380px; }
.fournis-dash-card-body::-webkit-scrollbar { display: none; }
.fournis-dash-card-body { scrollbar-width: none; -ms-overflow-style: none; }

.fournis-alert-row { display: flex; align-items: center; gap: 11px; padding: 10px 6px; border-radius: 8px; cursor: pointer; transition: background 120ms; }
.fournis-alert-row:hover { background: var(--bg-tint); }
.fournis-alert-row + .fournis-alert-row { border-top: 1px solid var(--border-soft); border-radius: 0; }
.fournis-alert-row + .fournis-alert-row:hover { background: var(--bg-tint); border-radius: 0; }
.fournis-alert-icon { width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; flex-shrink: 0; }
.fournis-alert-icon.crit { background: var(--red-soft); color: var(--red); }
.fournis-alert-icon.high { background: var(--amber-soft); color: var(--amber); }
.fournis-alert-icon.med { background: var(--bg-tint-2); color: var(--t-2); }
.fournis-alert-icon svg { width: 14px; height: 14px; stroke-width: 2.2; }
.fournis-alert-body { flex: 1; min-width: 0; }
.fournis-alert-line1 { font-size: 13px; color: var(--t-1); font-weight: 500; line-height: 1.3; display: flex; align-items: center; gap: 8px; }
.fournis-alert-line2 { font-size: 11.5px; color: var(--t-3); margin-top: 3px; }
.fournis-alert-sev { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; flex-shrink: 0; }
.fournis-alert-sev.crit { background: var(--red-soft); color: #b91c1c; }
.fournis-alert-sev.high { background: var(--amber-soft); color: #b45309; }
.fournis-alert-sev.med { background: var(--bg-tint-2); color: var(--t-3); }
[data-theme="dark"] .fournis-alert-sev.crit { color: #fca5a5; }
[data-theme="dark"] .fournis-alert-sev.high { color: #fcd34d; }

.fournis-conformity-row { padding: 8px 6px; }
.fournis-conformity-row + .fournis-conformity-row { border-top: 1px solid var(--border-soft); }
.fournis-conformity-head { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; margin-bottom: 6px; }
.fournis-conformity-cat { font-weight: 500; color: var(--t-1); }
.fournis-conformity-pct { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--t-1); }
.fournis-conformity-bar { height: 6px; background: var(--bg-tint-2); border-radius: 3px; overflow: hidden; }
.fournis-conformity-bar-fill { height: 100%; border-radius: 3px; transition: width 240ms ease; }
.fournis-conformity-bar-fill.green { background: var(--green); }
.fournis-conformity-bar-fill.amber { background: var(--amber); }
.fournis-conformity-bar-fill.red { background: var(--red); }
.fournis-conformity-foot { font-size: 11px; color: var(--t-3); padding: 12px 14px 4px; line-height: 1.4; }

.fournis-delivery-row { display: flex; align-items: center; gap: 11px; padding: 10px 6px; border-radius: 8px; cursor: pointer; transition: background 120ms; }
.fournis-delivery-row:hover { background: var(--bg-tint); }
.fournis-delivery-row + .fournis-delivery-row { border-top: 1px solid var(--border-soft); border-radius: 0; }
.fournis-delivery-date { width: 56px; flex-shrink: 0; text-align: center; padding: 6px 0; background: var(--bg-tint-2); border-radius: 7px; }
.fournis-delivery-date.today { background: var(--blue-tint); color: var(--blue); }
.fournis-delivery-date-day { font-size: 16px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.fournis-delivery-date-mon { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-3); margin-top: 3px; }
.fournis-delivery-date.today .fournis-delivery-date-mon { color: var(--blue); }
.fournis-delivery-info { flex: 1; min-width: 0; }
.fournis-delivery-bl { font-size: 13px; font-weight: 600; color: var(--t-1); line-height: 1.25; }
.fournis-delivery-meta { font-size: 11.5px; color: var(--t-3); margin-top: 2px; }

.fournis-contract-row { display: flex; align-items: center; gap: 11px; padding: 10px 6px; border-radius: 8px; cursor: pointer; transition: background 120ms; }
.fournis-contract-row:hover { background: var(--bg-tint); }
.fournis-contract-row + .fournis-contract-row { border-top: 1px solid var(--border-soft); border-radius: 0; }
.fournis-contract-pill { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; padding: 4px 9px; border-radius: 100px; flex-shrink: 0; min-width: 56px; text-align: center; }
.fournis-contract-pill.j7 { background: var(--red-soft); color: #b91c1c; }
.fournis-contract-pill.j30 { background: var(--amber-soft); color: #b45309; }
.fournis-contract-pill.j60 { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.fournis-contract-pill.expired { background: var(--red); color: white; }
[data-theme="dark"] .fournis-contract-pill.j7 { color: #fca5a5; }
[data-theme="dark"] .fournis-contract-pill.j30, [data-theme="dark"] .fournis-contract-pill.j60 { color: #fcd34d; }
.fournis-contract-info { flex: 1; min-width: 0; }
.fournis-contract-name { font-size: 13px; font-weight: 600; color: var(--t-1); line-height: 1.25; }
.fournis-contract-meta { font-size: 11.5px; color: var(--t-3); margin-top: 2px; }

/* Contract type icons */
.chem-cat-cadre { background: var(--blue-tint); color: var(--blue); }
.chem-cat-achat { background: var(--green-tint); color: #047857; }
.chem-cat-service { background: var(--purple-soft); color: #6d28d9; }
.chem-cat-maintenance { background: var(--amber-soft); color: #b45309; }
.chem-cat-nda { background: var(--red-tint); color: var(--red); }
.chem-cat-sla { background: var(--teal-tint); color: #0f766e; }
[data-theme="dark"] .chem-cat-achat { color: #6ee7b7; }
[data-theme="dark"] .chem-cat-service { color: #c4b5fd; }
[data-theme="dark"] .chem-cat-maintenance { color: #fcd34d; }
[data-theme="dark"] .chem-cat-nda { color: #fca5a5; }
[data-theme="dark"] .chem-cat-sla { color: #5eead4; }

/* Avenants in contract drawer */
.contrat-avenant { background: var(--bg-tint); border: 1px solid var(--border); border-radius: 9px; padding: 12px 14px; margin-bottom: 8px; }
.contrat-avenant-head { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--t-1); margin-bottom: 6px; }
.contrat-avenant-head .av-num { font-weight: 700; color: var(--blue); }
.contrat-avenant-row { font-size: 12.5px; color: var(--t-2); padding: 2px 0; line-height: 1.5; }
.contrat-avenant-row .lbl { color: var(--t-3); font-weight: 500; margin-right: 6px; }
.contrat-avenant-link { font-size: 12px; font-weight: 600; color: var(--blue); cursor: pointer; padding: 4px 0; display: inline-block; margin-top: 4px; }
.contrat-avenant-link:hover { text-decoration: underline; }

.contrat-history-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: 12.5px; }
.contrat-history-row:last-child { border-bottom: none; }
.contrat-history-date { font-size: 11.5px; color: var(--t-3); font-weight: 600; min-width: 80px; flex-shrink: 0; }
.contrat-history-text { color: var(--t-2); line-height: 1.5; }
.contrat-history-text strong { color: var(--t-1); font-weight: 600; }

/* Livraison row + drawer */
.livraison-date-pill { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 56px; border-radius: 9px; flex-shrink: 0; padding: 4px; }
.livraison-date-pill.today { background: var(--blue-tint); color: var(--blue); }
.livraison-date-pill.week { background: var(--bg-tint-2); color: var(--t-2); }
.livraison-date-pill.older { background: var(--bg-tint); color: var(--t-3); }
.livraison-date-day { font-size: 20px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.livraison-date-mon { font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 4px; }

.livraison-mini-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 100px; border: 1px solid var(--border); background: var(--bg-card); color: var(--t-2); white-space: nowrap; }
.livraison-mini-pill.cold-ok { background: var(--green-tint); color: #047857; border-color: rgba(16, 185, 129, 0.28); }
.livraison-mini-pill.cold-bad { background: var(--red-soft); color: #b91c1c; border-color: rgba(239, 68, 68, 0.3); }
.livraison-mini-pill.allergen { background: var(--amber-soft); color: #b45309; border-color: rgba(245, 158, 11, 0.3); }
[data-theme="dark"] .livraison-mini-pill.cold-ok { color: #6ee7b7; }
[data-theme="dark"] .livraison-mini-pill.cold-bad { color: #fca5a5; }
[data-theme="dark"] .livraison-mini-pill.allergen { color: #fcd34d; }
.livraison-mini-pill svg { width: 10px; height: 10px; stroke-width: 2.6; }

.livraison-articles-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 6px; }
.livraison-articles-table th { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--t-3); padding: 8px 10px; background: var(--bg-tint); border-bottom: 1px solid var(--border); text-align: left; }
.livraison-articles-table td { padding: 9px 10px; border-bottom: 1px solid var(--border-soft); color: var(--t-2); vertical-align: top; }
.livraison-articles-table tr:last-child td { border-bottom: none; }
.livraison-articles-table .conf-icon { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; }
.livraison-articles-table .conf-icon.green { background: var(--green-soft); color: #047857; }
.livraison-articles-table .conf-icon.amber { background: var(--amber-soft); color: var(--amber); }
.livraison-articles-table .conf-icon.red { background: var(--red-soft); color: var(--red); }
.livraison-articles-table .conf-icon svg { width: 11px; height: 11px; stroke-width: 2.6; }
[data-theme="dark"] .livraison-articles-table .conf-icon.green { color: #6ee7b7; }
[data-theme="dark"] .livraison-articles-table .conf-icon.red { color: #fca5a5; }
.livraison-product-link { color: var(--blue); cursor: pointer; font-weight: 500; }
.livraison-product-link:hover { text-decoration: underline; }
.livraison-allergen-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.livraison-allergen-tags .tag { font-size: 10.5px; font-weight: 600; padding: 2px 6px; border-radius: 4px; background: var(--amber-soft); color: #b45309; }
[data-theme="dark"] .livraison-allergen-tags .tag { color: #fcd34d; }

.livraison-cold-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; background: var(--bg-tint); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; font-size: 12.5px; flex-wrap: wrap; }
.livraison-cold-row.bad { background: var(--red-tint); border-color: rgba(239, 68, 68, 0.28); }
.livraison-cold-row .article { flex: 1; min-width: 140px; font-weight: 600; color: var(--t-1); }
.livraison-cold-row .seg { color: var(--t-3); font-size: 11.5px; }
.livraison-cold-row .seg strong { color: var(--t-1); font-weight: 600; }
.livraison-cold-row .seg.bad strong { color: var(--red); }

.livraison-photo-thumb { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--bg-tint); border: 1px solid var(--border); border-radius: 7px; font-size: 12px; color: var(--t-2); margin: 4px 4px 4px 0; }
.livraison-photo-thumb svg { width: 13px; height: 13px; color: var(--t-3); }
.livraison-photo-thumb .link { color: var(--blue); cursor: pointer; font-weight: 600; margin-left: 4px; }
.livraison-photo-thumb .link:hover { text-decoration: underline; }
.livraison-photo-thumb.missing { color: var(--red); border-color: rgba(239, 68, 68, 0.28); background: var(--red-tint); }
[data-theme="dark"] .livraison-photo-thumb.missing { color: #fca5a5; }

@media (max-width: 1024px) {
  .fournis-dash-kpi { grid-template-columns: repeat(3, 1fr); }
  .fournis-dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .fournis-dash-kpi { grid-template-columns: repeat(2, 1fr); }
}

.screen { display: none; }
.screen.active { display: block; }
.flex { display: flex; }
.gap-2 { gap: 8px; }
.items-center { align-items: center; }
.text-muted { color: var(--t-3); }
.text-sm { font-size: 12.5px; }
@media (max-width: 1100px) {
  .run-layout { grid-template-columns: 240px 1fr; }
  .run-summary-pane { display: none; }
  .builder-layout { grid-template-columns: 240px 1fr; }
  .builder-settings { display: none; }
  .view-stats { grid-template-columns: repeat(3, 1fr); }
  .hyg-grid { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .topbar-search { display: none; }
  .run-layout, .builder-layout { grid-template-columns: 1fr; }
  .run-sidenav, .builder-palette { display: none; }
  .page, .view-page { padding: 20px 16px 60px; }
  .view-stats { grid-template-columns: repeat(2, 1fr); }
  #hygTimelineView .tl-scroll { display: none; }
  #hygTimelineView .tl-narrow-notice { display: block; }
  .chem-pics, .chem-row .chem-meta { display: none; }
  .chem-status-cell { min-width: auto; }
  .chem-drawer { width: 100%; border-left: none; }
  .chem-grid { grid-template-columns: 1fr; gap: 4px 0; }
  .chem-grid > .lbl { padding-top: 6px; font-size: 11.5px; }
}

/* === Build 3 — Procurement (Demandes / BC / Factures) === */
.da-status-icon { width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.da-status-icon svg { width: 18px; height: 18px; stroke-width: 2.2; }
.da-status-icon.brouillon { background: var(--bg-tint-2); color: var(--t-3); }
.da-status-icon.en-attente { background: var(--amber-soft); color: var(--amber); }
.da-status-icon.approuvee { background: var(--green-soft); color: #047857; }
.da-status-icon.refusee { background: var(--red-soft); color: #b91c1c; }
.da-status-icon.convertie { background: var(--blue-tint); color: var(--blue); }
[data-theme="dark"] .da-status-icon.approuvee { color: #6ee7b7; }
[data-theme="dark"] .da-status-icon.refusee { color: #fca5a5; }
[data-theme="dark"] .da-status-icon.en-attente { color: #fcd34d; }

/* Workflow steps (DA approval visualization) */
.wf-step { display: flex; gap: 12px; padding: 10px 0; position: relative; }
.wf-step + .wf-step { border-top: 1px dashed var(--border-soft); }
.wf-step-bullet { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-size: 11px; font-weight: 700; }
.wf-step-bullet.done { background: var(--green-soft); color: #047857; }
.wf-step-bullet.active { background: var(--amber-soft); color: var(--amber); }
.wf-step-bullet.fail { background: var(--red-soft); color: #b91c1c; }
.wf-step-bullet.pending { background: var(--bg-tint-2); color: var(--t-3); }
.wf-step-bullet svg { width: 12px; height: 12px; stroke-width: 2.6; }
[data-theme="dark"] .wf-step-bullet.done { color: #6ee7b7; }
[data-theme="dark"] .wf-step-bullet.fail { color: #fca5a5; }
[data-theme="dark"] .wf-step-bullet.active { color: #fcd34d; }
.wf-step-body { flex: 1; min-width: 0; }
.wf-step-title { font-size: 13px; font-weight: 600; color: var(--t-1); }
.wf-step-meta { font-size: 11.5px; color: var(--t-3); margin-top: 2px; line-height: 1.5; }
.wf-step-comment { margin-top: 6px; padding: 8px 10px; background: var(--bg-tint); border-radius: 6px; font-size: 12px; color: var(--t-2); }
.wf-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* 3-way match summary table */
.bc-match-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 4px; }
.bc-match-table th, .bc-match-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border-soft); color: var(--t-2); }
.bc-match-table th { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--t-3); background: var(--bg-tint); }
.bc-match-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.bc-match-table td.label { font-weight: 600; color: var(--t-1); }
.bc-match-table tr.summary-row td { font-weight: 700; background: var(--bg-tint); border-top: 2px solid var(--border); }
.bc-match-table .match-flag { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.bc-match-table .match-flag.ok { color: #047857; }
.bc-match-table .match-flag.bad { color: #b91c1c; }
.bc-match-table .match-flag.partial { color: var(--amber); }
[data-theme="dark"] .bc-match-table .match-flag.ok { color: #6ee7b7; }
[data-theme="dark"] .bc-match-table .match-flag.bad { color: #fca5a5; }
[data-theme="dark"] .bc-match-table .match-flag.partial { color: #fcd34d; }

.bc-match-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 100px; border: 1px solid var(--border); background: var(--bg-card); color: var(--t-2); white-space: nowrap; }
.bc-match-pill.ok { background: var(--green-tint); color: #047857; border-color: rgba(16, 185, 129, 0.28); }
.bc-match-pill.ecart { background: var(--red-soft); color: #b91c1c; border-color: rgba(239, 68, 68, 0.3); }
.bc-match-pill.partial { background: var(--amber-soft); color: #b45309; border-color: rgba(245, 158, 11, 0.3); }
[data-theme="dark"] .bc-match-pill.ok { color: #6ee7b7; }
[data-theme="dark"] .bc-match-pill.ecart { color: #fca5a5; }
[data-theme="dark"] .bc-match-pill.partial { color: #fcd34d; }

.bc-match-ecart-line { margin-top: 8px; padding: 8px 10px; background: var(--red-soft); border-left: 3px solid var(--red); border-radius: 6px; font-size: 12px; color: #b91c1c; line-height: 1.5; }
[data-theme="dark"] .bc-match-ecart-line { color: #fca5a5; background: rgba(239, 68, 68, 0.15); }

.bc-link-pill { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 100px; background: var(--blue-tint); color: var(--blue); cursor: pointer; }
.bc-link-pill:hover { text-decoration: underline; }
.bc-link-pill.danger { background: var(--red-soft); color: #b91c1c; cursor: default; }
[data-theme="dark"] .bc-link-pill.danger { color: #fca5a5; }

/* Sans BC banner inside facture drawer */
.facture-nobc-banner { padding: 10px 12px; background: var(--red-soft); border-left: 3px solid var(--red); border-radius: 6px; display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.facture-nobc-banner svg { width: 16px; height: 16px; stroke-width: 2.2; color: var(--red); }
.facture-nobc-banner-text { flex: 1; font-size: 12.5px; color: #b91c1c; line-height: 1.45; }
[data-theme="dark"] .facture-nobc-banner-text { color: #fca5a5; }

/* Linked rows inside drawer (livraisons/factures lists) */
.bc-linked-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; cursor: pointer; transition: background 0.12s; border: 1px solid var(--border-soft); margin-bottom: 6px; }
.bc-linked-row:hover { background: var(--bg-tint); }
.bc-linked-row .ref { font-weight: 600; color: var(--t-1); font-size: 12.5px; }
.bc-linked-row .meta { font-size: 11.5px; color: var(--t-3); }
.bc-linked-row .grow { flex: 1; min-width: 0; }

/* === Training (Formation & Compétences) === */
.tr-cat-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 100px; background: var(--bg-tint-2); color: var(--t-2); border: 1px solid var(--border-soft); white-space: nowrap; }
.tr-cat-chip svg { width: 11px; height: 11px; stroke-width: 2.2; }
.tr-cat-hse { background: var(--red-soft); color: #b91c1c; border-color: transparent; }
.tr-cat-hse svg { color: var(--red); }
.tr-cat-food { background: var(--green-soft); color: #166534; border-color: transparent; }
.tr-cat-food svg { color: var(--green); }
.tr-cat-hyg { background: var(--green-tint); color: #166534; border-color: transparent; }
.tr-cat-hyg svg { color: var(--green); }
.tr-cat-fire { background: var(--amber-soft); color: #b45309; border-color: transparent; }
.tr-cat-fire svg { color: var(--amber); }
.tr-cat-fleet { background: var(--blue-tint); color: #1d4ed8; border-color: transparent; }
.tr-cat-fleet svg { color: var(--blue); }
.tr-cat-firstaid { background: var(--red-soft); color: #b91c1c; border-color: transparent; }
.tr-cat-firstaid svg { color: var(--red); }
[data-theme="dark"] .tr-cat-hse { color: #fca5a5; }
[data-theme="dark"] .tr-cat-food { color: #86efac; }
[data-theme="dark"] .tr-cat-hyg { color: #86efac; }
[data-theme="dark"] .tr-cat-fire { color: #fcd34d; }
[data-theme="dark"] .tr-cat-fleet { color: #93c5fd; }
[data-theme="dark"] .tr-cat-firstaid { color: #fca5a5; }

.tr-dash-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.tr-dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1100px) { .tr-dash-kpi { grid-template-columns: repeat(2, 1fr); } .tr-dash-grid { grid-template-columns: 1fr; } }
@media (max-width: 800px) { .tr-dash-kpi { grid-template-columns: 1fr; } }

/* Catalogue rows (reuse chem-row shell, add formation-specific bits) */
.tr-cat-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); cursor: pointer; transition: background 120ms; }
.tr-cat-row:hover { background: var(--bg-tint); }
.tr-cat-row .tr-icon { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; background: var(--bg-tint-2); color: var(--t-2); }
.tr-cat-row .tr-icon svg { width: 17px; height: 17px; stroke-width: 2.2; }
.tr-cat-row .tr-icon.hse { background: var(--red-soft); color: var(--red); }
.tr-cat-row .tr-icon.food, .tr-cat-row .tr-icon.hyg { background: var(--green-soft); color: var(--green); }
.tr-cat-row .tr-icon.fire { background: var(--amber-soft); color: var(--amber); }
.tr-cat-row .tr-icon.fleet { background: var(--blue-tint); color: var(--blue); }
.tr-cat-row .tr-icon.firstaid { background: var(--red-soft); color: var(--red); }
.tr-cat-row-info { flex: 1; min-width: 0; }
.tr-cat-row-name { font-size: 13.5px; font-weight: 600; color: var(--t-1); margin-bottom: 3px; }
.tr-cat-row-meta { font-size: 11.5px; color: var(--t-3); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tr-cat-row-meta .sep { color: var(--t-4); }
.tr-cat-row-targets { font-size: 11.5px; color: var(--t-3); max-width: 260px; }
.tr-cat-row-validity { font-size: 12px; color: var(--t-2); font-variant-numeric: tabular-nums; min-width: 100px; text-align: right; }

/* Person row */
.tr-pers-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--border-soft); cursor: pointer; transition: background 120ms; }
.tr-pers-row:hover { background: var(--bg-tint); }
.tr-pers-row .av { width: 34px; height: 34px; font-size: 12px; flex-shrink: 0; }
.tr-pers-info { flex: 1; min-width: 0; }
.tr-pers-name { font-size: 13.5px; font-weight: 600; color: var(--t-1); }
.tr-pers-role { font-size: 11.5px; color: var(--t-3); margin-top: 2px; }
.tr-pers-qualif-strip { display: flex; gap: 4px; align-items: center; }
.tr-qualif-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--bg-tint-2); border: 1px solid var(--border); cursor: help; }
.tr-qualif-dot.valid { background: var(--green); border-color: var(--green); }
.tr-qualif-dot.expirant { background: var(--amber); border-color: var(--amber); }
.tr-qualif-dot.expired { background: var(--red); border-color: var(--red); }
.tr-qualif-dot.missing { background: transparent; border: 1.5px dashed var(--red); }
.tr-pers-status-cell { min-width: 110px; text-align: right; }

/* Session row */
.tr-session-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); cursor: pointer; transition: background 120ms; }
.tr-session-row:hover { background: var(--bg-tint); }
.tr-session-date { width: 54px; flex-shrink: 0; text-align: center; padding: 6px 4px; border-radius: 8px; background: var(--bg-tint-2); }
.tr-session-date.future { background: var(--blue-tint); }
.tr-session-date.urgent { background: var(--red-soft); }
.tr-session-date-day { font-size: 16px; font-weight: 700; color: var(--t-1); line-height: 1; font-variant-numeric: tabular-nums; }
.tr-session-date-mon { font-size: 10px; font-weight: 600; color: var(--t-3); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 3px; }
.tr-session-date.urgent .tr-session-date-day { color: var(--red); }
.tr-session-info { flex: 1; min-width: 0; }
.tr-session-name { font-size: 13.5px; font-weight: 600; color: var(--t-1); }
.tr-session-meta { font-size: 11.5px; color: var(--t-3); margin-top: 3px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tr-session-attendees { font-size: 12px; color: var(--t-2); min-width: 120px; text-align: right; font-variant-numeric: tabular-nums; }

/* Cert row */
.tr-cert-row { display: flex; align-items: center; gap: 14px; padding: 11px 16px; border-bottom: 1px solid var(--border-soft); cursor: pointer; transition: background 120ms; }
.tr-cert-row:hover { background: var(--bg-tint); }
.tr-cert-num { font-size: 12px; font-weight: 600; color: var(--t-1); font-family: 'JetBrains Mono', ui-monospace, monospace; min-width: 130px; }
.tr-cert-info { flex: 1; min-width: 0; }
.tr-cert-formation { font-size: 13px; font-weight: 600; color: var(--t-1); }
.tr-cert-meta { font-size: 11.5px; color: var(--t-3); margin-top: 3px; }
.tr-cert-dates { font-size: 12px; color: var(--t-2); min-width: 160px; text-align: right; font-variant-numeric: tabular-nums; }

/* Calendar (sessions) */
.tr-calendar { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.tr-cal-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); gap: 14px; }
.tr-cal-this-month-on { background: var(--blue-tint); color: var(--blue); border-color: var(--blue); }
.tr-cal-this-month-on:hover { background: var(--blue-tint); border-color: var(--blue); filter: brightness(0.97); }
.tr-cal-title-group { display: flex; align-items: center; gap: 6px; }
.tr-cal-title { font-size: 14px; font-weight: 600; color: var(--t-1); min-width: 130px; text-align: center; }
.tr-cal-nav { display: flex; gap: 4px; }
.tr-cal-list-section { margin-top: 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.tr-cal-list-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); font-size: 14px; font-weight: 600; color: var(--t-1); }
.tr-cal-list-count { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 100px; background: var(--bg-tint-2); color: var(--t-3); }
.tr-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.tr-cal-dow { padding: 8px 6px; font-size: 11px; font-weight: 600; color: var(--t-3); text-transform: uppercase; letter-spacing: 0.04em; text-align: center; border-bottom: 1px solid var(--border-soft); }
.tr-cal-cell { min-height: 90px; padding: 6px 6px 8px; border-right: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 3px; }
.tr-cal-cell.other { background: var(--bg-tint); }
.tr-cal-cell.today .tr-cal-num { background: var(--blue); color: white; }
.tr-cal-num { font-size: 11.5px; font-weight: 600; color: var(--t-2); width: 22px; height: 22px; border-radius: 100px; display: grid; place-items: center; }
.tr-cal-event { font-size: 10.5px; padding: 3px 6px; border-radius: 4px; background: var(--blue-tint); color: var(--blue); cursor: pointer; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.tr-cal-event.urgent { background: var(--red-soft); color: var(--red); }
.tr-cal-event.warn { background: var(--amber-soft); color: var(--amber); }
.tr-cal-event.done { background: var(--green-soft); color: var(--green); }

/* Heatmap (dashboard) */
.tr-heatmap-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--border-soft); }
.tr-heatmap-row:last-child { border-bottom: none; }
.tr-heatmap-name { flex: 1; font-size: 12.5px; color: var(--t-2); min-width: 0; }
.tr-heatmap-bar { flex: 1.6; height: 8px; border-radius: 4px; background: var(--bg-tint-2); overflow: hidden; max-width: 280px; }
.tr-heatmap-bar-fill { height: 100%; transition: width 200ms; }
.tr-heatmap-bar-fill.green { background: var(--green); }
.tr-heatmap-bar-fill.amber { background: var(--amber); }
.tr-heatmap-bar-fill.red { background: var(--red); }
.tr-heatmap-pct { font-size: 12px; font-weight: 600; color: var(--t-1); min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; }

/* Drawer-specific blocks (qualifs grid, attendees pills) */
.tr-qualif-grid { display: grid; grid-template-columns: 1fr; gap: 6px; }
.tr-qualif-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 7px; }
.tr-qualif-row.expirant { border-left: 3px solid var(--amber); background: var(--amber-soft); }
.tr-qualif-row.expired { border-left: 3px solid var(--red); background: var(--red-soft); }
.tr-qualif-row.gap { border-left: 3px solid var(--red); border-style: dashed; background: var(--bg-tint); }
.tr-qualif-row.remediating { border-left: 3px solid var(--blue); background: var(--blue-tint); border-style: solid; }
.tr-qualif-remed-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 100px; background: var(--blue-tint); color: var(--blue); font-size: 10.5px; font-weight: 600; cursor: pointer; transition: filter 120ms; }
.tr-qualif-remed-chip:hover { filter: brightness(0.95); }
/* Cross-module secondary "En remédiation" row pill — appended next to primary status pill in lists, alerts, cluster rows. Smaller + lighter weight than primary status pills. */
.remed-pill { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 100px; background: var(--blue-tint); color: var(--blue); font-size: 10px; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; }
[data-theme="dark"] .remed-pill { color: #93c5fd; }
/* In-card remediation filter strip — used inside dashboard alert cards (Personnel Tableau de bord, Hygiène Dashboard). Compact filter chip group. */
.pp-dash-remed-filter { display: flex; gap: 6px; padding: 6px 14px 8px; border-bottom: 1px solid var(--border-soft); }
.pp-dash-remed-filter .filter-chip { font-size: 11px; padding: 3px 9px; }
.pp-dash-remed-filter .chip-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 16px; padding: 0 4px; margin-left: 4px; border-radius: 999px; background: var(--bg-tint-2); color: var(--t-3); font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pp-dash-remed-filter .filter-chip.active .chip-count { background: var(--blue); color: white; }
.tr-qualif-formation { flex: 1; font-size: 12.5px; color: var(--t-1); font-weight: 500; }
.tr-qualif-formation small { display: block; color: var(--t-3); font-weight: 400; font-size: 11px; margin-top: 2px; }
.tr-qualif-dates { font-size: 11.5px; color: var(--t-2); text-align: right; min-width: 130px; font-variant-numeric: tabular-nums; }
.tr-qualif-dates small { display: block; color: var(--t-3); font-size: 10.5px; }
.tr-attendee-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 3px 8px 3px 4px; border-radius: 100px; background: var(--bg-tint-2); color: var(--t-2); margin: 2px 4px 2px 0; cursor: pointer; transition: background 120ms; }
.tr-attendee-pill:hover { background: var(--blue-tint); color: var(--blue); }
.tr-attendee-pill.confirmed { background: var(--green-soft); color: #166534; }
.tr-attendee-pill.pending { background: var(--amber-soft); color: #b45309; }
.tr-attendee-pill .av { width: 18px; height: 18px; font-size: 9px; }
[data-theme="dark"] .tr-attendee-pill.confirmed { color: #86efac; }
[data-theme="dark"] .tr-attendee-pill.pending { color: #fcd34d; }
[data-theme="dark"] .tr-qualif-row.expired { background: rgba(220, 38, 38, 0.1); }
[data-theme="dark"] .tr-qualif-row.expirant { background: rgba(251, 146, 60, 0.1); }
[data-theme="dark"] .tr-qualif-row.remediating { background: rgba(37, 99, 235, 0.12); }

/* === Personnel & Compétences === */
/* Vue par rôle (default mode for Personnel Qualifications) */
.pp-vbr-toggle { display: flex; gap: 3px; padding: 3px; background: var(--bg-tint-2); border-radius: 9px; width: fit-content; margin-bottom: 14px; border: 1px solid var(--border-soft); }
.pp-vbr-toggle-btn { padding: 6px 14px; font-size: 12.5px; font-weight: 500; color: var(--t-3); border-radius: 7px; cursor: pointer; transition: all 120ms; border: none; background: transparent; }
.pp-vbr-toggle-btn:hover { color: var(--t-1); }
.pp-vbr-toggle-btn.active { background: var(--bg-card); color: var(--t-1); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.pp-vbr-list { display: flex; flex-direction: column; gap: 12px; }
.pp-vbr-role-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.pp-vbr-role-card.has-gap { border-color: rgba(239, 68, 68, 0.3); }
.pp-vbr-role-head { padding: 14px 16px; border-bottom: 1px solid var(--border-soft); cursor: pointer; display: flex; align-items: center; gap: 12px; transition: background 120ms; }
.pp-vbr-role-head:hover { background: var(--bg-tint); }
.pp-vbr-role-name { font-size: 14px; font-weight: 600; color: var(--t-1); flex: 1; }
.pp-vbr-role-name .pp-vbr-role-meta { font-weight: 400; color: var(--t-3); font-size: 11.5px; margin-top: 2px; display: block; }
.pp-vbr-role-count { font-size: 11.5px; color: var(--t-2); font-weight: 500; padding: 3px 9px; background: var(--bg-tint); border-radius: 100px; }
.pp-vbr-role-count.gap { background: var(--red-soft); color: #b91c1c; }
.pp-vbr-role-chev { color: var(--t-4); width: 14px; height: 14px; transition: transform 200ms; }
.pp-vbr-role-card.collapsed .pp-vbr-role-chev { transform: rotate(-90deg); }
.pp-vbr-role-card.collapsed .pp-vbr-role-body { display: none; }
.pp-vbr-reqs { padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border-bottom: 1px solid var(--border-soft); background: var(--bg-tint); }
.pp-vbr-reqs-label { font-size: 10px; font-weight: 600; color: var(--t-3); text-transform: uppercase; letter-spacing: 0.04em; margin-right: 4px; }
.pp-vbr-req-chip { padding: 3px 9px; border-radius: 100px; font-size: 11px; font-weight: 500; background: var(--bg-card); border: 1px solid var(--border); color: var(--t-2); cursor: pointer; transition: all 100ms; }
.pp-vbr-req-chip:hover { border-color: var(--blue); color: var(--blue); }
.pp-vbr-pers-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); cursor: pointer; transition: background 100ms; }
.pp-vbr-pers-row:last-child { border-bottom: none; }
.pp-vbr-pers-row:hover { background: var(--bg-tint); }
.pp-vbr-pers-info { min-width: 200px; max-width: 200px; flex-shrink: 0; display: flex; align-items: center; gap: 9px; }
.pp-vbr-pers-meta-block { min-width: 0; }
.pp-vbr-pers-name { font-size: 13px; font-weight: 600; color: var(--t-1); }
.pp-vbr-pers-meta { font-size: 11px; color: var(--t-3); margin-top: 2px; }
.pp-vbr-quals { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; align-items: center; }
.pp-vbr-qual-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 100px; font-size: 11px; font-weight: 500; border: 1px solid var(--border); background: var(--bg-tint); color: var(--t-2); cursor: pointer; transition: all 100ms; white-space: nowrap; }
.pp-vbr-qual-chip:hover { border-color: var(--blue); }
.pp-vbr-qual-chip.valid { background: var(--green-soft); border-color: rgba(16, 185, 129, 0.3); color: #047857; }
.pp-vbr-qual-chip.expirant { background: var(--amber-soft); border-color: rgba(245, 158, 11, 0.4); color: #b45309; }
.pp-vbr-qual-chip.expired { background: var(--red-soft); border-color: rgba(239, 68, 68, 0.4); color: #b91c1c; }
.pp-vbr-qual-chip.missing { background: transparent; border-color: var(--red); border-style: dashed; color: var(--red); }
.pp-vbr-qual-chip.remediating { background: var(--blue-tint); border-color: var(--blue); color: var(--blue); }
.pp-vbr-qual-chip-icon { width: 10px; height: 10px; flex-shrink: 0; }
.pp-vbr-remed-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 100px; background: var(--blue-tint); color: var(--blue); font-size: 10.5px; font-weight: 600; cursor: pointer; transition: filter 120ms; }
.pp-vbr-remed-chip:hover { filter: brightness(0.95); }
.pp-vbr-empty { padding: 30px; text-align: center; color: var(--t-3); font-size: 12.5px; }
[data-theme="dark"] .pp-vbr-qual-chip.valid { color: #6ee7b7; }
[data-theme="dark"] .pp-vbr-qual-chip.expirant { color: #fcd34d; }
[data-theme="dark"] .pp-vbr-qual-chip.expired { color: #fca5a5; }
[data-theme="dark"] .pp-vbr-qual-chip.remediating { color: #93c5fd; }
/* ===== Vue par formation (.pp-pf-*) — user-driven matrix density. Sidebar of formation checkboxes drives main pane columns. ===== */
.pp-pf-shell { display: grid; grid-template-columns: auto 1fr; gap: 16px; min-height: 540px; }
.pp-pf-sidebar { position: relative; width: 280px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; display: flex; flex-direction: column; max-height: calc(100vh - 240px); overflow: hidden; transition: width 200ms ease; }
.pp-pf-sidebar.collapsed { width: 56px; }
.pp-pf-sidebar-toggle { position: absolute; top: 10px; right: 8px; z-index: 2; width: 22px; height: 22px; border-radius: 5px; background: var(--bg-tint); border: 1px solid var(--border-soft); color: var(--t-3); cursor: pointer; display: inline-grid; place-items: center; transition: all 120ms; padding: 0; }
.pp-pf-sidebar-toggle:hover { background: var(--bg-card); border-color: var(--blue); color: var(--blue); }
.pp-pf-sidebar-toggle svg { width: 12px; height: 12px; }
.pp-pf-sidebar.collapsed .pp-pf-sidebar-toggle { right: 50%; transform: translateX(50%); }
.pp-pf-sidebar-expanded { display: flex; flex-direction: column; flex: 1; min-height: 0; opacity: 1; transition: opacity 150ms ease; }
.pp-pf-sidebar.collapsed .pp-pf-sidebar-expanded { display: none; }
.pp-pf-sidebar-rail { display: none; flex-direction: column; gap: 4px; padding: 40px 6px 12px; cursor: pointer; align-items: center; }
.pp-pf-sidebar.collapsed .pp-pf-sidebar-rail { display: flex; }
.pp-pf-rail-item { position: relative; width: 36px; height: 36px; border-radius: 7px; background: var(--bg-tint); border: 1px solid var(--border-soft); display: inline-grid; place-items: center; transition: all 120ms; }
.pp-pf-rail-item:hover { background: var(--bg-card); border-color: var(--blue); }
.pp-pf-rail-item.has-sel { background: var(--blue-tint); border-color: var(--blue); }
.pp-pf-rail-item svg { width: 16px; height: 16px; opacity: 0.8; }
.pp-pf-rail-item.has-sel svg { color: var(--blue); opacity: 1; }
.pp-pf-rail-count { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 100px; background: var(--blue); color: white; font-size: 9.5px; font-weight: 700; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.pp-pf-sidebar-head { padding: 14px 14px 4px; font-size: 12px; font-weight: 600; color: var(--t-1); }
.pp-pf-sidebar-actions { padding: 0 14px 10px; font-size: 11.5px; color: var(--t-3); border-bottom: 1px solid var(--border-soft); }
.pp-pf-sidebar-actions button { background: none; border: none; color: var(--blue); font-size: 11.5px; cursor: pointer; padding: 0; font-weight: 500; }
.pp-pf-sidebar-actions button:hover { text-decoration: underline; }
.pp-pf-sidebar-list { flex: 1; overflow-y: auto; padding: 6px 8px 14px; scrollbar-width: thin; }
.pp-pf-sidebar-list::-webkit-scrollbar { width: 6px; }
.pp-pf-sidebar-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
/* Hierarchical group structure: group head with 3-state checkbox + chevron, expandable body of qualif rows. */
.pp-pf-group { margin-bottom: 2px; }
.pp-pf-group-head { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; cursor: pointer; transition: background 80ms; }
.pp-pf-group-head:hover { background: var(--bg-tint); }
.pp-pf-group-cb { width: 14px; height: 14px; border: 1.5px solid var(--border-strong); border-radius: 3px; flex-shrink: 0; display: inline-grid; place-items: center; transition: all 100ms; background: var(--bg-card); }
.pp-pf-group-cb:hover { border-color: var(--blue); }
.pp-pf-group-cb.partial, .pp-pf-group-cb.full { background: var(--blue); border-color: var(--blue); }
.pp-pf-group-cb svg { width: 9px; height: 9px; color: white; display: none; }
.pp-pf-group-cb.full svg.cb-check { display: block; }
.pp-pf-group-cb.partial svg.cb-dash { display: block; }
.pp-pf-group-icon { width: 13px; height: 13px; flex-shrink: 0; }
.pp-pf-group-name { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--t-1); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-pf-group-count { padding: 1px 6px; border-radius: 100px; background: var(--blue-tint); color: var(--blue); font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pp-pf-group-chev { width: 11px; height: 11px; color: var(--t-4); flex-shrink: 0; transition: transform 150ms; }
.pp-pf-group.expanded .pp-pf-group-chev { transform: rotate(90deg); }
.pp-pf-group-body { display: none; padding-left: 24px; padding-bottom: 4px; }
.pp-pf-group.expanded .pp-pf-group-body { display: block; }
.pp-pf-checkbox-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 5px; cursor: pointer; font-size: 12px; color: var(--t-1); transition: background 80ms; }
.pp-pf-checkbox-row:hover { background: var(--bg-tint); }
.pp-pf-checkbox-row input { margin: 0; cursor: pointer; flex-shrink: 0; accent-color: var(--blue); }
.pp-pf-form-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-pf-sidebar-counter { padding: 10px 14px; border-top: 1px solid var(--border); font-size: 11px; color: var(--t-3); background: var(--bg-tint); }
.pp-pf-sidebar-counter strong { color: var(--blue); font-variant-numeric: tabular-nums; }
.pp-pf-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pp-pf-table-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: auto; max-height: calc(100vh - 320px); }
.pp-pf-table-wrap::-webkit-scrollbar { width: 8px; height: 10px; }
.pp-pf-table-wrap::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.pp-pf-table { border-collapse: separate; border-spacing: 0; min-width: 100%; table-layout: fixed; }
.pp-pf-table thead th { position: sticky; top: 0; background: var(--bg-card); z-index: 2; border-bottom: 1px solid var(--border); padding: 10px 8px; font-size: 11.5px; font-weight: 600; color: var(--t-1); text-align: center; vertical-align: middle; cursor: pointer; width: 140px; min-width: 140px; max-width: 140px; }
.pp-pf-table thead th:hover { background: var(--bg-tint); color: var(--blue); }
.pp-pf-table thead th.first { position: sticky; left: 0; z-index: 3; text-align: left; padding-left: 16px; width: 240px; min-width: 240px; max-width: 240px; cursor: default; }
.pp-pf-table thead th.first:hover { background: var(--bg-card); color: var(--t-1); }
.pp-pf-table thead th .col-name { display: block; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-pf-table thead th .col-cat { display: block; margin-top: 3px; font-size: 9.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-pf-table tbody tr { transition: background 100ms; }
.pp-pf-table tbody tr:hover td { background: var(--bg-tint); }
.pp-pf-table tbody td { padding: 10px 8px; text-align: center; font-size: 12px; vertical-align: middle; background: var(--bg-card); border-bottom: 1px solid var(--border-soft); width: 140px; min-width: 140px; max-width: 140px; }
.pp-pf-table tbody td.first { position: sticky; left: 0; z-index: 1; text-align: left; padding: 10px 16px; width: 240px; min-width: 240px; max-width: 240px; border-right: 1px solid var(--border-soft); cursor: pointer; }
.pp-pf-table tbody td.first .pp-pf-pers-name,
.pp-pf-table tbody td.first .pp-pf-pers-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-pf-cell { width: 28px; height: 28px; border-radius: 6px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; cursor: pointer; transition: transform 80ms; border: 1px solid transparent; }
.pp-pf-cell:hover { transform: scale(1.12); border-color: var(--blue); }
.pp-pf-cell.valid    { background: var(--green-soft); color: var(--green); }
.pp-pf-cell.expirant { background: var(--amber-soft); color: var(--amber); }
.pp-pf-cell.expired  { background: var(--red-soft);   color: var(--red); }
.pp-pf-cell.missing  { background: var(--bg-tint-2);  color: var(--red); border: 1.5px dashed var(--red); }
.pp-pf-cell.remediating { background: var(--blue-tint); color: var(--blue); border-color: var(--blue); }
.pp-pf-cell.notrequired { background: transparent; color: var(--t-4); cursor: default; border: none; }
.pp-pf-cell.notrequired:hover { transform: none; }
.pp-pf-pers-name { font-size: 13px; font-weight: 600; color: var(--t-1); display: flex; align-items: center; gap: 8px; }
.pp-pf-pers-name:hover { color: var(--blue); }
.pp-pf-pers-meta { font-size: 11px; color: var(--t-3); margin-top: 2px; }
.pp-pf-empty { padding: 60px 30px; text-align: center; color: var(--t-3); font-size: 13px; line-height: 1.6; background: var(--bg-card); border: 1px dashed var(--border); border-radius: 12px; }
.pp-pf-empty svg { width: 36px; height: 36px; opacity: 0.4; margin-bottom: 14px; }
.pp-pf-empty-title { font-size: 14px; font-weight: 600; color: var(--t-2); margin-bottom: 6px; }
.pp-pf-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 100px; font-size: 11.5px; color: var(--t-2); cursor: pointer; transition: all 100ms; background: var(--bg-card); }
.pp-pf-toggle:hover { border-color: var(--t-3); }
.pp-pf-toggle.active { background: var(--amber-soft); border-color: var(--amber); color: var(--amber); font-weight: 500; }
.pp-pf-foot { padding: 10px 14px; font-size: 11.5px; color: var(--t-3); display: flex; gap: 16px; flex-wrap: wrap; }
@media (max-width: 1080px) {
  .pp-pf-shell { grid-template-columns: 240px 1fr; }
}
/* OU/ET correspondence toggle — surfaces above the matrix when 2+ formations are selected. */
.pp-pf-match-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--bg-tint); border: 1px solid var(--border-soft); border-radius: 9px; margin-top: -8px; width: fit-content; }
.pp-pf-match-label { font-size: 11.5px; color: var(--t-3); font-weight: 500; }
.pp-pf-match-btn { padding: 4px 10px; font-size: 11.5px; font-weight: 500; color: var(--t-3); background: transparent; border: 1px solid transparent; border-radius: 6px; cursor: pointer; transition: all 120ms; }
.pp-pf-match-btn:hover { color: var(--t-1); background: var(--bg-card); }
.pp-pf-match-btn.active { background: var(--bg-card); color: var(--blue); border-color: var(--blue); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }

/* ===== Vue par alerte (.pp-pa-*) — issue-first triage list grouped by criticality ===== */
.pp-pa-shell { display: flex; flex-direction: column; gap: 12px; }
.pp-pa-chip-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 16px; padding: 0 4px; margin-left: 6px; border-radius: 999px; background: var(--bg-tint-2); color: var(--t-3); font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
.filter-chip.active .pp-pa-chip-count { background: var(--blue); color: white; }
.pp-pa-groups { display: flex; flex-direction: column; gap: 14px; }
.pp-pa-group { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.pp-pa-group-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border-soft); background: var(--bg-tint); }
.pp-pa-group-head.crit { background: var(--red-soft); }
.pp-pa-group-head.high { background: var(--red-soft); opacity: 0.92; }
.pp-pa-group-head.med  { background: var(--amber-soft); }
.pp-pa-group-dot { width: 8px; height: 8px; border-radius: 100px; flex-shrink: 0; }
.pp-pa-group-name { font-size: 12px; font-weight: 700; color: var(--t-1); text-transform: uppercase; letter-spacing: 0.04em; }
.pp-pa-group-count { margin-left: auto; padding: 2px 10px; border-radius: 100px; background: var(--bg-card); color: var(--t-2); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pp-pa-group-body { padding: 4px 0; }
.pp-pa-row { display: grid; grid-template-columns: 38px 1fr 1.6fr auto; gap: 14px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); cursor: pointer; transition: background 100ms; }
.pp-pa-row:last-child { border-bottom: none; }
.pp-pa-row:hover { background: var(--bg-tint); }
.pp-pa-pers-name { font-size: 13px; font-weight: 600; color: var(--t-1); }
.pp-pa-pers-meta { font-size: 11px; color: var(--t-3); margin-top: 2px; }
.pp-pa-issue-form { font-size: 12.5px; color: var(--t-1); font-weight: 500; display: flex; align-items: center; flex-wrap: wrap; }
.pp-pa-issue-state { font-size: 11px; color: var(--t-3); margin-top: 5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pp-pa-cta { display: flex; gap: 6px; }
@media (max-width: 900px) {
  .pp-pa-row { grid-template-columns: 38px 1fr; gap: 10px; }
  .pp-pa-issue, .pp-pa-cta { grid-column: 1 / -1; padding-left: 52px; }
}

/* Departments grid */
.pp-dept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 16px; }
.pp-dept-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; cursor: pointer; transition: border-color 140ms, transform 80ms, box-shadow 140ms; }
.pp-dept-card:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.pp-dept-card.has-gap { border-left: 4px solid var(--red); }
.pp-dept-name { font-size: 15px; font-weight: 700; color: var(--t-1); margin-bottom: 4px; letter-spacing: -0.01em; }
.pp-dept-resp { font-size: 12px; color: var(--t-3); margin-bottom: 14px; }
.pp-dept-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.pp-dept-stat { text-align: center; }
.pp-dept-stat-num { font-size: 18px; font-weight: 700; color: var(--t-1); font-variant-numeric: tabular-nums; }
.pp-dept-stat-num.red { color: var(--red); }
.pp-dept-stat-lbl { font-size: 10px; font-weight: 600; color: var(--t-3); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 3px; }

/* Role row */
.pp-role-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); cursor: pointer; transition: background 120ms; }
.pp-role-row:hover { background: var(--bg-tint); }
.pp-role-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--t-1); }
.pp-role-name small { display: block; color: var(--t-3); font-weight: 400; font-size: 11.5px; margin-top: 2px; }
.pp-role-reqs { display: flex; gap: 4px; flex-wrap: wrap; max-width: 360px; }
.pp-role-count { font-size: 12px; color: var(--t-2); min-width: 70px; text-align: right; font-variant-numeric: tabular-nums; }
.pp-role-coverage { font-size: 11.5px; color: var(--t-3); min-width: 90px; text-align: right; font-variant-numeric: tabular-nums; }

/* Highlighted row pulse (for calendar→list scroll-jump) */
@keyframes pp-row-flash { 0%, 100% { background: transparent; } 30% { background: var(--blue-tint); } }
.pp-row-flash { animation: pp-row-flash 1500ms ease; }

/* ============================================================
   Incidents module — domain-prefixed (.inc-*)
   ============================================================ */
.inc-kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.inc-kpi { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow-sm); }
.inc-kpi-num { font-size: 28px; font-weight: 700; color: var(--t-1); line-height: 1.1; font-variant-numeric: tabular-nums; }
.inc-kpi-label { font-size: 12.5px; color: var(--t-3); margin-top: 4px; font-weight: 500; }
.inc-kpi-trend { font-size: 11.5px; color: var(--t-3); margin-top: 8px; }
.inc-kpi-trend.down { color: var(--red); font-weight: 500; }

.inc-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
@media (max-width: 1100px) { .inc-grid-2col { grid-template-columns: 1fr; } .inc-kpi-strip { grid-template-columns: repeat(2, 1fr); } }

.inc-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); margin-bottom: 16px; }
.inc-card-head { padding: 14px 18px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.inc-card-title { font-size: 14.5px; font-weight: 600; color: var(--t-1); display: inline-flex; align-items: center; gap: 4px; }
.inc-card-meta { font-size: 11.5px; color: var(--t-3); font-weight: 500; }
.inc-card-body { padding: 16px 18px; }
.inc-card-ai { background: linear-gradient(180deg, var(--bg-card) 0%, rgba(13,155,244,0.04) 100%); }

.inc-bar-row { display: grid; grid-template-columns: 180px 1fr 36px; align-items: center; gap: 12px; margin-bottom: 10px; }
.inc-bar-label { font-size: 12.5px; color: var(--t-2); display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.inc-bar-track { height: 8px; background: var(--bg-tint); border-radius: 4px; overflow: hidden; }
.inc-bar-fill { height: 100%; border-radius: 4px; transition: width 200ms ease; }
.inc-bar-count { font-size: 14px; font-weight: 600; color: var(--t-1); text-align: right; font-variant-numeric: tabular-nums; }
.inc-bar-footnote { font-size: 11.5px; color: var(--t-3); margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border-soft); line-height: 1.5; }

.inc-type-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.inc-tone-red    { background: var(--red); }
.inc-tone-purple { background: var(--purple); }
.inc-tone-amber  { background: var(--amber); }
.inc-tone-blue   { background: var(--blue); }
.inc-tone-grey   { background: var(--t-3); }
.inc-tone-green  { background: var(--green); }
.inc-tone-bg-red    { background: var(--red); }
.inc-tone-bg-purple { background: var(--purple); }
.inc-tone-bg-amber  { background: var(--amber); }
.inc-tone-bg-blue   { background: var(--blue); }

.inc-insight { padding: 12px 14px; background: rgba(13,155,244,0.06); border: 1px solid rgba(13,155,244,0.18); border-radius: 9px; margin-bottom: 10px; }
.inc-insight:last-child { margin-bottom: 0; }
.inc-insight-title { font-size: 13px; font-weight: 600; color: var(--t-1); margin-bottom: 4px; }
.inc-insight-body { font-size: 12.5px; color: var(--t-2); line-height: 1.55; margin-bottom: 8px; }
.inc-insight-cta { font-size: 12px; font-weight: 600; color: var(--blue); cursor: pointer; }
.inc-insight-cta:hover { text-decoration: underline; }
.inc-insight-empty { font-size: 12.5px; color: var(--t-3); text-align: center; padding: 12px 0; }

.inc-filter-select { width: auto; min-width: 160px; padding: 7px 30px 7px 11px; font-size: 12.5px; height: 34px; }
.btn-sm { padding: 7px 12px; font-size: 12.5px; }

/* Nouveau incident modal — two-state */
.inc-modal-back { background: var(--bg-tint); border: 1px solid var(--border); border-radius: 7px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--t-2); transition: background 120ms; }
.inc-modal-back:hover { background: var(--bg-tint-2); color: var(--t-1); }
.inc-modal-section-title { font-size: 11px; font-weight: 700; letter-spacing: 0.6px; color: var(--t-3); text-transform: uppercase; margin: 18px 0 12px; padding-top: 14px; border-top: 1px dashed var(--border-soft); }
.inc-modal-section-title:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.inc-type-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; padding: 8px 0; }
@media (max-width: 800px) { .inc-type-cards { grid-template-columns: 1fr; } }
.inc-type-card { background: var(--bg-card); border: 2px solid var(--border); border-radius: 11px; padding: 18px 16px; cursor: pointer; transition: border-color 140ms, transform 140ms, box-shadow 140ms; display: flex; flex-direction: column; gap: 7px; }
.inc-type-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.inc-type-card-icon { width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.inc-type-card-red    { }
.inc-type-card-purple { }
.inc-type-card-amber  { }
.inc-type-card-red    .inc-type-card-icon { background: rgba(239, 68, 68, 0.12); color: var(--red); }
.inc-type-card-purple .inc-type-card-icon { background: rgba(139, 92, 246, 0.12); color: var(--purple); }
.inc-type-card-amber  .inc-type-card-icon { background: rgba(245, 158, 11, 0.14); color: var(--amber); }
.inc-type-card-red:hover    { border-color: var(--red); }
.inc-type-card-purple:hover { border-color: var(--purple); }
.inc-type-card-amber:hover  { border-color: var(--amber); }
.inc-type-card-label { font-size: 15px; font-weight: 600; color: var(--t-1); }
.inc-type-card-desc  { font-size: 12.5px; color: var(--t-2); line-height: 1.5; }
.inc-type-card-anchor { font-size: 11px; color: var(--t-3); font-style: italic; margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--border-soft); }

.inc-checkbox-grid { display: flex; flex-wrap: wrap; gap: 14px 22px; padding: 4px 0; margin-bottom: 6px; }
.inc-checkbox-row { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--t-1); cursor: pointer; user-select: none; }
.inc-checkbox-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--blue); cursor: pointer; }

/* Incident detail page */
.inc-detail-header { margin-bottom: 18px; }
.inc-detail-title-row { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.inc-detail-title-block { flex: 1; min-width: 0; }
.inc-detail-eyebrow { font-size: 11.5px; font-weight: 600; color: var(--t-3); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px; }
.inc-detail-title { font-size: 22px; font-weight: 700; color: var(--t-1); line-height: 1.25; margin: 0; }
.inc-detail-pills { display: flex; gap: 6px; flex-shrink: 0; }
.inc-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .inc-detail-grid { grid-template-columns: 1fr; } }
.inc-detail-col { min-width: 0; }
.inc-detail-section { padding: 14px 0; border-bottom: 1px dashed var(--border-soft); }
.inc-detail-section:last-child { border-bottom: 0; padding-bottom: 0; }
.inc-detail-section:first-child { padding-top: 0; }
.inc-detail-section-title { font-size: 11px; font-weight: 700; letter-spacing: 0.6px; color: var(--t-3); text-transform: uppercase; margin-bottom: 10px; }
.inc-detail-row { display: grid; grid-template-columns: 160px 1fr; gap: 10px; padding: 5px 0; font-size: 13px; }
.inc-detail-lbl { color: var(--t-3); font-weight: 500; }
.inc-detail-val { color: var(--t-1); }
.inc-empty-val { color: var(--t-4); font-style: italic; }
.inc-chip { display: inline-block; padding: 2px 8px; background: var(--bg-tint); border: 1px solid var(--border); border-radius: 6px; font-size: 12px; color: var(--t-2); margin-right: 4px; margin-bottom: 4px; }
.inc-detail-link { color: var(--blue); cursor: pointer; font-weight: 500; }
.inc-detail-link:hover { text-decoration: underline; }

.inc-status-pipeline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 0 8px; }
.inc-status-step { padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; border: 1px solid var(--border); }
.inc-status-step.past    { background: var(--bg-tint); color: var(--t-3); }
.inc-status-step.current { background: var(--blue); color: #fff; border-color: var(--blue); }
.inc-status-step.future  { background: transparent; color: var(--t-4); }
.inc-status-arrow { color: var(--t-4); font-size: 13px; }
.inc-status-closed-line { font-size: 12px; color: var(--t-3); margin-top: 8px; padding: 6px 10px; background: var(--bg-tint); border-radius: 6px; }

.inc-notes-log { display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.inc-note { padding: 10px 12px; background: var(--bg-tint); border: 1px solid var(--border-soft); border-radius: 8px; }
.inc-note-meta { font-size: 11px; color: var(--t-3); font-weight: 500; margin-bottom: 4px; }
.inc-note-body { font-size: 12.5px; color: var(--t-1); line-height: 1.55; }

.crumb-link { color: var(--t-3); }
.crumb-link:hover { color: var(--blue); }

/* Investigations sub-page rows */
.inc-inv-row { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; padding: 16px 18px; border-bottom: 1px solid var(--border-soft); border-left: 3px solid transparent; cursor: pointer; transition: background 120ms, border-left-color 120ms; }
.inc-inv-row:last-child { border-bottom: 0; }
.inc-inv-row:hover { background: var(--bg-tint); }
.inc-inv-row.severity-bar-critical { border-left-color: var(--red); }
.inc-inv-row.severity-bar-high { border-left-color: var(--amber); }
.inc-inv-row.severity-bar-medium { border-left-color: #14b8a6; }
.inc-inv-row.severity-bar-low { border-left-color: #14b8a6; }
.inc-inv-main { min-width: 0; }
.inc-inv-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.inc-inv-progress-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 12px; }
.inc-inv-progress-label { color: var(--t-2); font-weight: 500; flex-shrink: 0; }
.inc-inv-progress-pct { font-weight: 600; color: var(--t-1); font-variant-numeric: tabular-nums; min-width: 36px; text-align: right; }
.inc-inv-meta { display: flex; gap: 18px; font-size: 11.5px; color: var(--t-3); margin-top: 8px; flex-wrap: wrap; }
.inc-inv-meta strong { color: var(--t-1); font-weight: 600; }

/* Registre statutaire */
.inc-registre-anchor { padding: 10px 12px; background: var(--bg-tint); border-left: 3px solid var(--blue); border-radius: 4px; font-size: 12.5px; color: var(--t-2); line-height: 1.55; margin-bottom: 14px; }
.inc-registre-actions { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.inc-registre-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
.inc-registre-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.inc-registre-table th { text-align: left; padding: 10px 12px; background: var(--bg-tint); font-weight: 600; color: var(--t-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
.inc-registre-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-soft); color: var(--t-1); vertical-align: top; }
.inc-registre-table tbody tr:last-child td { border-bottom: 0; }
.inc-registre-row { cursor: pointer; transition: background 120ms; }
.inc-registre-row:hover { background: var(--bg-tint); }
.inc-registre-empty { text-align: center; color: var(--t-3); padding: 24px !important; font-style: italic; }
.inc-registre-footnote { font-size: 11.5px; color: var(--t-3); margin-top: 12px; line-height: 1.5; padding-top: 10px; border-top: 1px dashed var(--border-soft); }

.inc-recent-list { padding: 0; }
.inc-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--border-soft); border-left: 3px solid transparent; cursor: pointer; transition: background 120ms, border-left-color 120ms; }
.inc-row:last-child { border-bottom: 0; }
.inc-row:hover { background: var(--bg-tint); }
.inc-row.severity-bar-critical { border-left-color: var(--red); }
.inc-row.severity-bar-high { border-left-color: var(--amber); }
.inc-row.severity-bar-medium { border-left-color: #14b8a6; }
.inc-row.severity-bar-low { border-left-color: #14b8a6; }
.inc-row-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.inc-row-icon.inc-type-hse   { background: rgba(239, 68, 68, 0.12); color: var(--red); }
.inc-row-icon.inc-type-prest { background: rgba(139, 92, 246, 0.12); color: var(--purple); }
.inc-row-icon.inc-type-quasi { background: rgba(245, 158, 11, 0.12); color: var(--amber); }
.inc-row-main { min-width: 0; }
.inc-row-top { display: flex; align-items: center; gap: 8px; }
.inc-row-ref { font-size: 11px; font-weight: 600; color: var(--t-3); font-variant-numeric: tabular-nums; }
.inc-row-title { font-size: 13.5px; font-weight: 600; color: var(--t-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inc-row-meta { font-size: 11.5px; color: var(--t-3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inc-row-pills { display: flex; gap: 6px; flex-shrink: 0; }

/* ============================================================
   flatpickr theme override — match Kovalli light + dark UI
   See docs/dependencies.md DEP-001
   ============================================================ */
.flatpickr-calendar { background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow-lg); border-radius: 10px; font-family: var(--font); color: var(--t-1); }
.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after { border-bottom-color: var(--border); }
.flatpickr-calendar.arrowBottom:before, .flatpickr-calendar.arrowBottom:after { border-top-color: var(--border); }
.flatpickr-calendar.arrowTop:after { border-bottom-color: var(--bg-card); }
.flatpickr-calendar.arrowBottom:after { border-top-color: var(--bg-card); }

.flatpickr-months { padding: 6px 4px 4px; }
.flatpickr-months .flatpickr-month { background: transparent; color: var(--t-1); fill: var(--t-1); height: 36px; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color: var(--t-2); fill: var(--t-2); padding: 8px 10px; }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--blue); }
.flatpickr-current-month { font-size: 14px; padding: 4px 0 0; color: var(--t-1); }
.flatpickr-current-month .flatpickr-monthDropdown-months { color: var(--t-1); background: transparent; font-weight: 600; }
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { background: var(--bg-card); color: var(--t-1); }
.flatpickr-current-month input.cur-year { color: var(--t-1); font-weight: 600; }
.flatpickr-current-month .numInputWrapper span.arrowUp:after { border-bottom-color: var(--t-3); }
.flatpickr-current-month .numInputWrapper span.arrowDown:after { border-top-color: var(--t-3); }

.flatpickr-weekdays { background: transparent; }
span.flatpickr-weekday { background: transparent; color: var(--t-3); font-weight: 500; font-size: 12px; }

.flatpickr-days { border: 0; }
.dayContainer { padding: 4px 0; }
.flatpickr-day { color: var(--t-2); border-radius: 6px; max-width: 36px; height: 36px; line-height: 36px; font-size: 13px; }
.flatpickr-day:hover, .flatpickr-day:focus { background: var(--bg-tint); border-color: var(--bg-tint); color: var(--t-1); }
.flatpickr-day.today { border-color: var(--blue); color: var(--blue); font-weight: 600; }
.flatpickr-day.today:hover, .flatpickr-day.today:focus { background: var(--blue-tint); color: var(--blue); }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus, .flatpickr-day.startRange, .flatpickr-day.endRange { background: var(--blue); border-color: var(--blue); color: #ffffff; font-weight: 600; }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: var(--t-4); }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--t-4); }

/* Time picker (used for time-only inputs) */
.flatpickr-time { border-top: 1px solid var(--border); background: var(--bg-card); }
.flatpickr-time input { color: var(--t-1); background: var(--bg-card); font-size: 14px; }
.flatpickr-time input:hover, .flatpickr-time input:focus { background: var(--bg-tint); }
.flatpickr-time .flatpickr-time-separator, .flatpickr-time .flatpickr-am-pm { color: var(--t-2); }
.flatpickr-time .numInputWrapper span.arrowUp:after { border-bottom-color: var(--t-3); }
.flatpickr-time .numInputWrapper span.arrowDown:after { border-top-color: var(--t-3); }
.flatpickr-time.hasSeconds .numInputWrapper { width: 33%; }

/* ============================================================
   PLANNINGS — Hygiène > Plannings (HACCP MS 133 / Food Act 1998)
   Domain CSS prefix: .plan-*
   ============================================================ */
.plan-view-toggle { display: flex; align-items: center; gap: 6px; margin: 0 0 14px 0; padding: 6px; background: var(--bg-tint); border-radius: 10px; border: 1px solid var(--border-soft); width: fit-content; }
.plan-view-toggle button { padding: 7px 14px; font-size: 12.5px; font-weight: 500; color: var(--t-3); background: transparent; border: 0; border-radius: 6px; cursor: pointer; transition: background 120ms, color 120ms; }
.plan-view-toggle button:hover { color: var(--t-1); }
.plan-view-toggle button.active { background: var(--bg-card); color: var(--t-1); font-weight: 600; box-shadow: 0 1px 2px rgba(13,21,48,0.08); }
.plan-view-count { margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--border); font-size: 12px; color: var(--t-3); }
.plan-filter-bar { flex-wrap: wrap; row-gap: 8px; }
.plan-chip-group { display: flex; gap: 6px; flex-wrap: wrap; }
.plan-multi { position: relative; }
.plan-multi-btn { padding: 7px 12px; font-size: 12.5px; font-weight: 500; color: var(--t-2); background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: border-color 120ms, color 120ms; }
.plan-multi-btn:hover { color: var(--t-1); border-color: var(--t-3); }
.plan-multi-btn.active { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); font-weight: 600; }
.plan-multi-pop { position: absolute; top: calc(100% + 4px); left: 0; min-width: 280px; max-width: 360px; max-height: 380px; overflow-y: auto; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--shadow-lg); z-index: 80; display: none; padding: 6px; }
.plan-multi-pop.open { display: block; }
.plan-multi-actions { display: flex; gap: 4px; padding: 4px 6px 8px; border-bottom: 1px solid var(--border-soft); margin-bottom: 4px; }
.plan-multi-actions button { padding: 4px 9px; font-size: 11px; font-weight: 500; color: var(--blue); background: transparent; border: 0; border-radius: 4px; cursor: pointer; }
.plan-multi-actions button:hover { background: var(--blue-soft); }
.plan-multi-row { display: flex; align-items: flex-start; gap: 8px; padding: 7px 8px; font-size: 12.5px; color: var(--t-1); cursor: pointer; border-radius: 6px; }
.plan-multi-row:hover { background: var(--bg-tint); }
.plan-multi-row.disabled { cursor: not-allowed; opacity: 0.55; }
.plan-multi-row.disabled:hover { background: transparent; }
.plan-multi-row input { margin-top: 2px; }
.plan-multi-row input:disabled { cursor: not-allowed; }
.plan-multi-row strong { color: var(--t-1); font-weight: 600; }
.plan-multi-locked .plan-multi-btn { opacity: 0.7; cursor: not-allowed; background: var(--bg-tint); border-style: dashed; }
.plan-multi-locked .plan-multi-btn:hover { color: var(--t-2); border-color: var(--border-strong); }
.plan-multi-locked-note { font-size: 11px; color: var(--t-3); padding: 4px 8px 8px; border-bottom: 1px solid var(--border-soft); margin-bottom: 4px; line-height: 1.45; }

.plan-scope-banner { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--blue-tint); border: 1px solid var(--blue-soft); border-radius: 10px; margin-bottom: 14px; color: var(--t-1); }
.plan-scope-banner svg { width: 16px; height: 16px; color: var(--blue); flex-shrink: 0; }
.plan-scope-banner-text { flex: 1; font-size: 12.5px; line-height: 1.45; }
.plan-scope-banner-text strong { font-weight: 700; color: var(--t-1); margin-right: 4px; }
.plan-scope-banner-link { font-size: 12px; font-weight: 600; color: var(--blue); background: transparent; border: 0; padding: 4px 8px; border-radius: 6px; cursor: pointer; }
.plan-scope-banner-link:hover { background: var(--blue-soft); }
.plan-group { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.plan-group-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; transition: background 120ms; user-select: none; }
.plan-group-head:hover { background: var(--bg-tint); }
.plan-chevron { width: 14px; height: 14px; color: var(--t-3); transition: transform 180ms; flex-shrink: 0; }
.plan-group-head.collapsed .plan-chevron { transform: rotate(-90deg); }
.plan-group-icon { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.plan-group-icon svg { width: 18px; height: 18px; }
.plan-tone-red    { background: var(--red-tint);   color: #b91c1c; }
.plan-tone-amber  { background: var(--amber-tint); color: #b45309; }
.plan-tone-green  { background: var(--green-tint); color: #166534; }
.plan-tone-blue   { background: var(--blue-soft);  color: var(--blue); }
.plan-tone-grey   { background: var(--bg-tint-2);  color: var(--t-2); }
.plan-group-title { flex: 1; min-width: 0; }
.plan-group-name { font-size: 14.5px; font-weight: 600; color: var(--t-1); }
.plan-group-meta { font-size: 12px; color: var(--t-3); margin-top: 2px; }
.plan-haccp-pill { font-size: 10.5px; font-weight: 600; padding: 3px 8px; background: var(--red-soft); color: #b91c1c; border-radius: 100px; letter-spacing: 0.02em; }
.plan-group-count { font-size: 12px; color: var(--t-3); margin-left: 8px; }
.plan-group-body { border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; }
.plan-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px 14px 56px; cursor: pointer; transition: background 120ms; border-bottom: 1px solid var(--border-soft); }
.plan-row:last-child { border-bottom: 0; }
.plan-row:hover { background: var(--bg-tint); }
.plan-row-main { flex: 1; min-width: 0; }
.plan-row-title { font-size: 13.5px; font-weight: 600; color: var(--t-1); margin-bottom: 4px; }
.plan-row-meta { font-size: 11.5px; color: var(--t-3); display: flex; gap: 10px; flex-wrap: wrap; }
.plan-row-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.plan-row-equipe { color: var(--t-2); }
.plan-duree { font-weight: 500; color: var(--t-2); }
.plan-row-prods { margin-top: 6px; display: flex; gap: 4px; flex-wrap: wrap; }
.plan-prod-chip { font-size: 10.5px; font-weight: 500; padding: 2px 8px; background: var(--bg-tint-2); color: var(--t-2); border-radius: 100px; }
.plan-row-pills { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.plan-row-property-chip { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 600; padding: 2px 8px; background: var(--blue-soft); color: var(--blue); border-radius: 100px; margin-left: 8px; vertical-align: middle; letter-spacing: 0.01em; }

/* Section descriptor — small uppercase eyebrow that frames the register
   under the page header. */
.plan-section-descriptor { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-3); margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px dashed var(--border-soft); }

/* Register-style validation strip on each schedule row. Always present.
   Stale (>12 months) rows get an amber "Programme à revalider" badge and
   a subtle left-border highlight on the row. */
.plan-row-validation { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-soft); font-size: 11.5px; }
.plan-row-validated { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-weight: 500; }
.plan-row-validated svg { width: 12px; height: 12px; }
.plan-row-haccp { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 600; padding: 2px 7px; background: var(--blue-tint); color: var(--blue); border-radius: 4px; letter-spacing: 0.02em; }
.plan-row-stale { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 3px 10px 3px 8px; background: var(--amber); color: #fff; border: 1px solid var(--amber); border-radius: 100px; letter-spacing: 0.01em; box-shadow: 0 1px 3px rgba(245, 158, 11, 0.35); cursor: help; }
.plan-row-stale svg { width: 13px; height: 13px; }
[data-theme="dark"] .plan-row-stale { color: #1a1f2e; box-shadow: 0 1px 4px rgba(245, 158, 11, 0.5); }
.plan-row.plan-row-stale-flag { box-shadow: inset 4px 0 0 var(--amber); background: linear-gradient(90deg, rgba(245, 158, 11, 0.06) 0%, rgba(245, 158, 11, 0) 280px); }
[data-theme="dark"] .plan-row.plan-row-stale-flag { background: linear-gradient(90deg, rgba(245, 158, 11, 0.10) 0%, rgba(245, 158, 11, 0) 280px); }
.plan-row.plan-row-stale-flag:hover { background: linear-gradient(90deg, rgba(245, 158, 11, 0.10) 0%, var(--bg-tint) 280px); }
[data-theme="dark"] .plan-row.plan-row-stale-flag:hover { background: linear-gradient(90deg, rgba(245, 158, 11, 0.16) 0%, var(--bg-tint) 280px); }

/* Drawer Identité section — validation block absorbed at top */
.plan-validation-block { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--green-tint); border: 1px solid var(--green-soft); border-radius: 10px; margin-bottom: 14px; }
.plan-validation-block.stale { background: var(--amber-soft); border-color: #fde68a; }
.plan-validation-row { display: flex; align-items: center; gap: 12px; }
.plan-validation-row svg { width: 18px; height: 18px; color: #166534; flex-shrink: 0; }
.plan-validation-block.stale .plan-validation-row svg { color: #b45309; }
.plan-validation-text { flex: 1; min-width: 0; font-size: 12.5px; color: var(--t-1); }
.plan-validation-text strong { font-weight: 700; color: var(--t-1); }
.plan-validation-sub { font-size: 11.5px; color: var(--t-3); margin-top: 2px; line-height: 1.45; }

/* Vue par zone — property-level outer accordion. Wraps inner .plan-zone
   (= .plan-group) elements inside .plan-property-body. */
.plan-property-group { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 16px; overflow: hidden; transition: box-shadow 160ms ease, border-color 160ms ease; }
.plan-property-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; transition: background 140ms ease, box-shadow 140ms ease; user-select: none; background: var(--bg-tint); border-bottom: 1px solid var(--border-soft); }
.plan-property-head:hover { background: var(--bg-tint-2); }
.plan-property-head.collapsed { border-bottom: 0; }
.plan-property-head.collapsed .plan-chevron { transform: rotate(-90deg); }
/* Hover state — subtle "this is interactive" affordance for the wrapper */
.plan-property-group:has(> .plan-property-head:hover) { box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05); }
[data-theme="dark"] .plan-property-group:has(> .plan-property-head:hover) { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }
/* Expanded state — strong "this one's focused" affordance: left blue accent on the
   head + outer blue glow on the wrapper + saturated bg tint on the head. The
   left accent uses inset box-shadow so layout doesn't shift between states. */
.plan-property-group:has(> .plan-property-head:not(.collapsed)) {
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.25), 0 6px 18px rgba(37, 99, 235, 0.10);
}
[data-theme="dark"] .plan-property-group:has(> .plan-property-head:not(.collapsed)) {
  border-color: rgba(37, 99, 235, 0.55);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.35), 0 6px 18px rgba(37, 99, 235, 0.20);
}
.plan-property-head:not(.collapsed) {
  background: var(--blue-tint);
  box-shadow: inset 4px 0 0 var(--blue);
}
.plan-property-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; flex-shrink: 0; }
.plan-property-icon svg { width: 19px; height: 19px; }
.plan-property-head .plan-group-name { font-size: 15.5px; font-weight: 700; color: var(--t-1); }
.plan-property-head .plan-group-meta { font-size: 12px; color: var(--t-3); margin-top: 2px; }
.plan-property-head .plan-group-count { font-size: 12.5px; font-weight: 600; color: var(--blue); padding: 4px 10px; background: var(--bg-card); border-radius: 100px; border: 1px solid var(--border-soft); }
.plan-property-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--bg-tint); }
.plan-property-body .plan-zone { margin: 0; box-shadow: 0 1px 0 var(--border-soft); transition: box-shadow 160ms ease, border-color 160ms ease; }
.plan-property-body .plan-zone .plan-group-head { padding: 12px 14px; transition: background 140ms ease, box-shadow 140ms ease; }
.plan-property-body .plan-zone .plan-group-name { font-size: 13.5px; }
/* Inner zone accordions get the same two-state language at lower intensity */
.plan-property-body .plan-zone:has(> .plan-group-head:hover) { box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05), 0 1px 0 var(--border-soft); }
[data-theme="dark"] .plan-property-body .plan-zone:has(> .plan-group-head:hover) { box-shadow: 0 2px 7px rgba(0, 0, 0, 0.30), 0 1px 0 var(--border-soft); }
.plan-property-body .plan-zone:has(> .plan-group-head:not(.collapsed)) {
  border: 1px solid rgba(37, 99, 235, 0.40);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.18), 0 4px 12px rgba(37, 99, 235, 0.08);
}
[data-theme="dark"] .plan-property-body .plan-zone:has(> .plan-group-head:not(.collapsed)) {
  border: 1px solid rgba(37, 99, 235, 0.50);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.28), 0 4px 12px rgba(37, 99, 235, 0.18);
}
.plan-property-body .plan-zone .plan-group-head:not(.collapsed) {
  background: var(--blue-tint);
  box-shadow: inset 4px 0 0 var(--blue);
}

/* ============================================================
   LOGS — Opérations > Logs (.log-*)
   Execution-evidence layer paired with Plannings. 5 internal tabs:
   Tableau de bord / Bulletin de service / Vérification pré-service /
   Intervention périodique / Signalements.
   ============================================================ */

/* Tab strip — re-uses .tabs / .tab from the base, with logs-specific
   tweaks on count badges. */
.log-tabs { margin-bottom: 14px; }
.log-tab-count-urgent {
  background: var(--red-soft) !important;
  color: var(--red) !important;
  font-weight: 700;
}

/* "Today" pill — bridges from the tab strip into the dashboard view. */
.log-today-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; margin: 0 0 18px;
  background: var(--green-soft); color: var(--green-deep, var(--green));
  border-radius: 100px; font-size: 12.5px; font-weight: 600;
  border: 1px solid rgba(34, 197, 94, 0.25);
}
.log-today-pill svg { width: 13px; height: 13px; }
[data-theme="dark"] .log-today-pill { background: rgba(34, 197, 94, 0.10); border-color: rgba(34, 197, 94, 0.30); }

/* Stub message for tabs not yet implemented (commits 4-11). Removed
   when each tab's real renderer ships. */
.log-tab-stub {
  padding: 60px 20px; text-align: center;
  color: var(--t-3); font-size: 13px;
  background: var(--bg-tint); border-radius: 12px;
  border: 1px dashed var(--border-soft);
}

/* Logs filter strip — re-uses .filter-bar / .plan-multi conventions but
   adds local tweaks for date-range presets and a denser feel. */
.log-filter-bar { margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
.log-date-presets { display: inline-flex; gap: 4px; padding: 2px; background: var(--bg-tint); border-radius: 8px; border: 1px solid var(--border-soft); }
.log-date-presets button {
  padding: 5px 11px; font-size: 12px; background: transparent; color: var(--t-2);
  border: 0; border-radius: 6px; cursor: pointer; font-weight: 500;
}
.log-date-presets button.active { background: var(--bg-card); color: var(--t-1); box-shadow: 0 1px 2px rgba(0,0,0,0.06); font-weight: 600; }

/* Bulletin / pré-service / périodique row layout — denser than suppliers
   list, status pill on the left, clickable card pattern. */
.log-list { display: flex; flex-direction: column; gap: 8px; }
.log-row {
  display: grid; grid-template-columns: 14px 1fr auto; gap: 14px;
  padding: 14px 16px; background: var(--bg-card);
  border: 1px solid var(--border-soft); border-radius: 10px;
  cursor: pointer; transition: box-shadow 140ms ease, border-color 140ms ease;
  align-items: center;
}
.log-row:hover { border-color: var(--border); box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05); }
[data-theme="dark"] .log-row:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); }
.log-row-status-stripe { width: 4px; height: 100%; min-height: 38px; border-radius: 2px; background: var(--t-4); }
.log-row-status-stripe.signe       { background: var(--green); }
.log-row-status-stripe.brouillon   { background: var(--amber); }
.log-row-status-stripe.nc          { background: var(--red); }
.log-row-status-stripe.ras         { background: var(--green); }
.log-row-status-stripe.anomalie    { background: var(--amber); }
.log-row-status-stripe.conforme    { background: var(--green); }
.log-row-status-stripe.reserve     { background: var(--amber); }
.log-row-status-stripe.nonconforme { background: var(--red); }
.log-row-status-stripe.urgent      { background: var(--red); }
.log-row-status-stripe.avoir       { background: var(--amber); }
.log-row-status-stripe.pasurgent   { background: var(--t-4); }
.log-row-status-stripe.atriage     { background: var(--red); }
.log-row-status-stripe.triage      { background: var(--blue); }
.log-row-status-stripe.cloture     { background: var(--t-4); }
.log-row-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.log-row-line1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--t-1); font-weight: 600; }
.log-row-ref { font-size: 11.5px; color: var(--t-3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; }
.log-row-line2 { font-size: 12.5px; color: var(--t-3); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.log-row-line2 .av { width: 22px; height: 22px; font-size: 10.5px; }
.log-row-aside { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.log-row-counter { font-size: 11px; color: var(--t-3); padding: 3px 9px; background: var(--bg-tint); border-radius: 100px; font-weight: 600; }
.log-row-counter.warn { background: var(--amber-soft); color: var(--amber-deep, var(--amber)); }
.log-row-counter.bad  { background: var(--red-soft);   color: var(--red); }

/* Empty list message inside a tab. */
.log-empty {
  padding: 50px 20px; text-align: center;
  background: var(--bg-tint); border-radius: 12px; border: 1px dashed var(--border-soft);
  color: var(--t-3); font-size: 13px;
}
.log-empty strong { display: block; color: var(--t-2); font-weight: 700; font-size: 14.5px; margin-bottom: 6px; }

/* HACCP-critical zone marker — small red dot accompanying zone name. */
.log-haccp-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--red); margin-right: 4px; vertical-align: middle;
}

/* Triage row strip — 4 small buttons that appear on hover for à-triage
   signalements. Hidden by default; row hover reveals them. */
.log-triage-strip {
  display: flex; gap: 4px; opacity: 0; transition: opacity 160ms ease;
  flex-shrink: 0;
}
.log-row:hover .log-triage-strip { opacity: 1; }
.log-triage-strip button {
  padding: 4px 10px; font-size: 11.5px; font-weight: 600;
  border: 1px solid var(--border-soft); background: var(--bg-card);
  color: var(--t-2); border-radius: 6px; cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.log-triage-strip button:hover { background: var(--bg-tint); color: var(--t-1); border-color: var(--border); }
.log-triage-strip button.tri-maint:hover { background: var(--amber-soft); color: var(--amber-deep, var(--amber)); border-color: rgba(245, 158, 11, 0.35); }
.log-triage-strip button.tri-nc:hover    { background: var(--red-soft);   color: var(--red);   border-color: rgba(239, 68, 68, 0.35); }
.log-triage-strip button.tri-inc:hover   { background: var(--purple-soft, rgba(139, 92, 246, 0.10)); color: var(--purple, #7c3aed); border-color: rgba(139, 92, 246, 0.35); }
.log-triage-strip button.tri-dis:hover   { background: var(--bg-tint); color: var(--t-3); }

/* KPI strip on Logs Dashboard — same .kpi-strip / .kpi-card pattern as Incidents
   but with logs-specific tone classes. Re-uses base .kpi-card from the
   shared dashboard CSS — no overrides needed. */
.log-dash-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0 22px;
}
.log-dash-card {
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: 12px; padding: 18px; display: flex; flex-direction: column;
}
.log-dash-card-head {
  display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px;
}
.log-dash-card-title { font-size: 14px; font-weight: 700; color: var(--t-1); }
.log-dash-card-sub   { font-size: 11.5px; color: var(--t-3); }
.log-dash-feed { display: flex; flex-direction: column; }
.log-dash-feed-row {
  display: grid; grid-template-columns: 90px 1fr; gap: 12px;
  padding: 10px 0; font-size: 12.5px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  transition: background 120ms ease;
}
.log-dash-feed-row:last-child { border-bottom: 0; }
.log-dash-feed-row:hover { background: var(--bg-tint); }
.log-dash-feed-time { color: var(--t-3); font-weight: 500; font-size: 11.5px; }
.log-dash-feed-msg  { color: var(--t-1); line-height: 1.45; }
.log-dash-feed-msg strong { color: var(--t-1); }
.log-dash-feed-msg .feed-tag {
  display: inline-block; padding: 1px 7px; font-size: 10.5px; font-weight: 700;
  border-radius: 100px; margin-right: 6px; vertical-align: middle;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.feed-tag.bul { background: var(--green-soft); color: var(--green-deep, var(--green)); }
.feed-tag.ps  { background: var(--blue-soft);  color: var(--blue); }
.feed-tag.ip  { background: var(--amber-soft); color: var(--amber-deep, var(--amber)); }
.feed-tag.sig { background: var(--red-soft);   color: var(--red); }

/* Property compliance breakdown card. */
.log-prop-bar-row {
  display: grid; grid-template-columns: 220px 1fr auto;
  gap: 14px; align-items: center; padding: 9px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
}
.log-prop-bar-row:last-child { border-bottom: 0; }
.log-prop-bar-row .prop-name { color: var(--t-1); font-weight: 600; }
.log-prop-bar { height: 8px; background: var(--bg-tint); border-radius: 100px; overflow: hidden; position: relative; }
.log-prop-bar-fill {
  height: 100%; background: var(--green); border-radius: 100px;
  transition: width 220ms ease;
}
.log-prop-bar-fill.med { background: var(--amber); }
.log-prop-bar-fill.low { background: var(--red); }
.log-prop-bar-row .sig-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; font-size: 11.5px; font-weight: 600;
  border-radius: 100px; background: var(--red-soft); color: var(--red);
}
.log-prop-bar-row .sig-pill.zero { background: var(--bg-tint); color: var(--t-3); }

/* Pending triage card — quick action panel. */
.log-pending-row {
  display: grid; grid-template-columns: 1fr auto; gap: 14px;
  padding: 11px 12px; align-items: center; border-radius: 8px;
  font-size: 12.5px; background: var(--bg-tint);
  margin-bottom: 6px;
}
.log-pending-row:hover { background: var(--bg-card); border: 1px solid var(--border-soft); padding: 10px 11px; }
.log-pending-desc { color: var(--t-1); font-weight: 500; }
.log-pending-meta { color: var(--t-3); font-size: 11.5px; margin-top: 2px; }

/* Drawer enhancements — most logs drawers reuse .chem-drawer, .chem-section,
   .chem-grid. New sections defined here.  */
.log-drawer-temp-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 10px 12px; background: var(--bg-tint); border-radius: 8px;
  font-size: 12.5px;
}
.log-drawer-temp-row { display: flex; justify-content: space-between; padding: 4px 0; }
.log-drawer-temp-row .label { color: var(--t-3); }
.log-drawer-temp-row .val   { color: var(--t-1); font-weight: 700; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.log-drawer-temp-row .val.out-of-range { color: var(--red); }

/* Programme chip in bulletin drawer. */
.log-prog-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; margin: 3px 4px 3px 0;
  background: var(--blue-soft); color: var(--blue);
  border-radius: 100px; font-size: 11.5px; font-weight: 600;
  cursor: pointer; transition: background 120ms ease;
  border: 1px solid rgba(37, 99, 235, 0.20);
}
.log-prog-chip:hover { background: rgba(37, 99, 235, 0.20); }
.log-prog-chip.skipped { background: var(--bg-tint); color: var(--t-3); border-color: var(--border-soft); text-decoration: line-through; opacity: 0.75; }
.log-prog-chip.skipped:hover { background: var(--bg-card); }

/* Modal sectioned form — re-uses .fournis-modal-section-title. */
.log-modal-section-help {
  font-size: 12px; color: var(--t-3); margin: -6px 0 8px;
  padding: 8px 12px; background: var(--bg-tint); border-radius: 6px; line-height: 1.45;
}
.log-prog-toggles {
  display: flex; flex-direction: column; gap: 6px; max-height: 280px;
  overflow-y: auto; padding: 6px 0;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.log-prog-toggle {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px;
  padding: 10px 12px; align-items: center; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 8px;
  font-size: 12.5px; transition: background 120ms ease, border-color 120ms ease;
}
.log-prog-toggle:hover { background: var(--bg-tint); border-color: var(--border); }
.log-prog-toggle input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.log-prog-toggle.checked { background: var(--green-soft); border-color: rgba(34, 197, 94, 0.30); }
.log-prog-toggle .name { color: var(--t-1); font-weight: 600; }
.log-prog-toggle .meta { font-size: 11px; color: var(--t-3); margin-top: 1px; }
.log-prog-toggle .freq-pill { font-size: 10.5px; padding: 2px 7px; border-radius: 100px; }

/* Pré-service checklist */
.log-ps-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.log-ps-toggle {
  display: grid; grid-template-columns: 22px 1fr; gap: 10px;
  padding: 11px 14px; background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: 8px; cursor: pointer; align-items: center; transition: background 120ms ease;
}
.log-ps-toggle:hover { background: var(--bg-tint); }
.log-ps-toggle.on { background: var(--green-soft); border-color: rgba(34, 197, 94, 0.30); }
.log-ps-toggle .check {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--border); display: flex; align-items: center; justify-content: center;
  background: var(--bg-card); transition: background 120ms ease, border-color 120ms ease;
}
.log-ps-toggle.on .check { background: var(--green); border-color: var(--green); }
.log-ps-toggle.on .check svg { color: white; }
.log-ps-toggle .check svg { width: 12px; height: 12px; opacity: 0; transition: opacity 120ms ease; }
.log-ps-toggle.on .check svg { opacity: 1; }
.log-ps-toggle .label { font-size: 13px; font-weight: 600; color: var(--t-1); }
.log-ps-toggle .sub { font-size: 11px; color: var(--t-3); margin-top: 1px; }

/* Triage modal pickers */
.log-triage-options {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.log-triage-option {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px; background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: 10px; cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.log-triage-option:hover { background: var(--bg-tint); border-color: var(--border); transform: translateY(-1px); }
.log-triage-option .ico {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.log-triage-option .ico svg { width: 18px; height: 18px; }
.log-triage-option.maint .ico { background: var(--amber-soft); color: var(--amber); }
.log-triage-option.nc    .ico { background: var(--red-soft);   color: var(--red); }
.log-triage-option.inc   .ico { background: var(--purple-soft, rgba(139, 92, 246, 0.10)); color: var(--purple, #7c3aed); }
.log-triage-option.dis   .ico { background: var(--bg-tint); color: var(--t-3); }
.log-triage-option .ttl  { font-weight: 700; font-size: 13.5px; color: var(--t-1); }
.log-triage-option .desc { font-size: 11.5px; color: var(--t-3); line-height: 1.45; }

/* Variants  */
.log-row-overdue { border-color: rgba(239, 68, 68, 0.35); }
.log-row-overdue .log-row-ref { color: var(--red); }

/* Compact filter strip when too many filters — switches to a denser button look */
.log-filter-bar .plan-multi-btn,
.log-filter-bar .filter-chip { font-size: 11.5px; }

/* ============================================================
   INCIDENTS QUICK-VIEW DRAWER (.inc-quick-*)
   Read-only summary, opened from cross-module callers. Reuses
   .chem-drawer-overlay shell and most .chem-drawer markup; this
   block adds drawer-specific layout (eyebrow, pills row, sections,
   pipeline, sticky footer).
   ============================================================ */

.inc-quick-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--t-3); margin-bottom: 6px;
}
.inc-quick-title {
  font-size: 18px; font-weight: 700; color: var(--t-1);
  line-height: 1.3; margin: 0 0 12px; padding-right: 32px;
}
.inc-quick-pills { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.inc-quick-body {
  padding: 0 24px 24px;
  /* Leave room for sticky footer */
  padding-bottom: 84px;
}
.inc-quick-section { padding: 18px 0; border-bottom: 1px solid var(--border-soft); }
.inc-quick-section:last-child { border-bottom: 0; }
.inc-quick-section-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--t-3); margin-bottom: 12px;
}
.inc-quick-description {
  margin-top: 12px; padding: 12px 14px;
  background: var(--bg-tint); border-radius: 8px;
  font-size: 13px; color: var(--t-1); line-height: 1.55;
  white-space: pre-wrap;
}
.inc-quick-expand {
  display: inline-block; margin-left: 6px; padding: 0;
  background: transparent; border: 0; color: var(--blue);
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.inc-quick-expand:hover { text-decoration: underline; }

/* Status pipeline — small horizontal stages with dots and connector bars. */
.inc-quick-pipeline {
  display: flex; align-items: center; gap: 0;
  padding: 8px 0;
}
.inc-quick-pipeline-step {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.inc-quick-pipeline-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg-tint); border: 2px solid var(--border);
  transition: background 160ms ease, border-color 160ms ease;
}
.inc-quick-pipeline-step.reached .inc-quick-pipeline-dot {
  background: var(--green); border-color: var(--green);
}
.inc-quick-pipeline-step.current .inc-quick-pipeline-dot {
  background: var(--blue); border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
}
.inc-quick-pipeline-label {
  font-size: 10.5px; color: var(--t-3); font-weight: 600;
  letter-spacing: 0.02em; text-align: center;
  white-space: nowrap;
}
.inc-quick-pipeline-step.reached .inc-quick-pipeline-label { color: var(--t-2); }
.inc-quick-pipeline-step.current .inc-quick-pipeline-label { color: var(--blue); font-weight: 700; }
.inc-quick-pipeline-bar {
  height: 2px; flex: 1; min-width: 18px; max-width: 60px;
  background: var(--border); margin: 0 4px; align-self: flex-start;
  margin-top: 6px;
  transition: background 160ms ease;
}
.inc-quick-pipeline-bar.reached { background: var(--green); }

/* Sticky footer — primary "Ouvrir la fiche complète" + secondary "Fermer" */
.inc-quick-foot {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 14px 22px; background: var(--bg-card);
  border-top: 1px solid var(--border-soft);
  border-bottom-left-radius: 0;
}

/* Unresolved-reference empty state — used when openIncidentQuickDrawer
   is called with an id that no longer resolves. Rendered with .inc-quick-*
   shell but with warning-toned eyebrow + a centred message block. The
   pattern is reusable for any future quick-view drawer (CAPA, NC, Audit). */
.inc-quick-eyebrow-warn { color: var(--red); }
.inc-quick-notfound {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 24px; margin-top: 12px;
  background: var(--red-soft); border: 1px solid rgba(239, 68, 68, 0.30);
  border-radius: 10px;
}
.inc-quick-notfound svg { width: 28px; height: 28px; color: var(--red); flex-shrink: 0; margin-top: 2px; }
.inc-quick-notfound-id { font-size: 13.5px; color: var(--t-1); line-height: 1.55; margin-bottom: 10px; }
.inc-quick-notfound-id strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--red); font-size: 13px; }
.inc-quick-notfound-detail { font-size: 12.5px; color: var(--t-2); line-height: 1.6; }
[data-theme="dark"] .inc-quick-notfound { background: rgba(239, 68, 68, 0.10); border-color: rgba(239, 68, 68, 0.30); }

/* Trace footer in Nouveau incident modal when prefilled from a signalement */
.inc-trace-footer {
  margin-top: 14px; padding: 10px 14px;
  background: var(--blue-soft); border: 1px solid rgba(37, 99, 235, 0.25);
  border-radius: 8px; font-size: 12.5px; color: var(--t-2);
  display: flex; align-items: center; gap: 8px;
}
.inc-trace-footer svg { width: 14px; height: 14px; color: var(--blue); flex-shrink: 0; }
.inc-trace-footer .ref-link {
  color: var(--blue); font-weight: 600; cursor: pointer;
  text-decoration: underline;
}

/* ===== Documents > Politiques & Procédures (.doc-*) =====
   Versioned-record register + drawer pattern. Reuses chem-drawer-overlay /
   chem-drawer / chem-section primitives; .doc-* prefix is for list, filter
   strip, scope banner, and section-internal renders (versions table,
   approval timeline, citation rows, distribution rows). */

/* doc-filter-bar — extends the canonical .filter-bar with margin-bottom 0
   so it can stack tightly above the labeled chip-group rows. */
.doc-filter-bar { margin-bottom: 8px; }

/* Labeled chip-group rows (Catégorie / Statut / Type) — Documents-specific
   layout that the canonical .filter-bar doesn't cover. Inherits .filter-chip
   from the standard pattern; only the row + label needs domain CSS. */
.doc-filter-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.doc-filter-row:last-of-type { margin-bottom: 18px; }
.doc-filter-label {
  font-size: 11px; font-weight: 600; color: var(--t-3);
  text-transform: uppercase; letter-spacing: 0.6px;
  margin-right: 6px; min-width: 78px;
}

.doc-scope-banner-neutral {
  background: var(--bg-tint-2); border-color: var(--border); border-left-color: var(--t-3);
  color: var(--t-2);
}
[data-theme="dark"] .doc-scope-banner-neutral { background: var(--bg-tint); }

.doc-scope-banner {
  margin: 0 0 14px; padding: 9px 14px;
  background: var(--amber-soft); border: 1px solid rgba(217, 119, 6, 0.25);
  border-left: 3px solid var(--amber);
  border-radius: 7px;
  font-size: 12.5px; color: #b45309; line-height: 1.55;
}
[data-theme="dark"] .doc-scope-banner { background: rgba(217, 119, 6, 0.10); color: #fbbf24; }

.doc-empty {
  padding: 60px 24px; text-align: center;
  background: var(--bg-tint); border: 1px dashed var(--border); border-radius: 12px;
  color: var(--t-2);
}
.doc-empty h3 { font-size: 15px; font-weight: 600; color: var(--t-1); margin: 0 0 8px; }
.doc-empty p  { font-size: 13px; color: var(--t-3); max-width: 520px; margin: 0 auto; line-height: 1.55; }

.doc-list { display: flex; flex-direction: column; gap: 8px; }

.doc-row {
  display: grid;
  grid-template-columns: 200px 1fr 240px;
  gap: 16px; align-items: center;
  padding: 12px 16px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  cursor: pointer; transition: border-color 140ms, box-shadow 140ms;
  min-height: 64px;
}
.doc-row:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }

.doc-row-left { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.doc-row-ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; font-weight: 600; color: var(--t-2);
}
.doc-row-meta { display: flex; flex-wrap: wrap; gap: 4px; }

.doc-row-mid { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.doc-row-title { font-size: 13.5px; font-weight: 600; color: var(--t-1); line-height: 1.35; }
.doc-row-cats  { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.doc-row-owner {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--t-3); margin-top: 2px;
}
.doc-row-sep  { color: var(--t-4); }

.doc-row-right { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.doc-row-version { font-size: 12.5px; color: var(--t-2); }
.doc-row-version strong { color: var(--t-1); }
.doc-row-review  { font-size: 11.5px; }
.doc-row-cites   { font-size: 11px; color: var(--blue); font-weight: 500; }

/* Section-internal (drawer) ============================================== */

.doc-section-intro {
  font-size: 12px; color: var(--t-3); line-height: 1.5;
  margin-bottom: 10px;
}

.doc-versions-table { display: flex; flex-direction: column; gap: 6px; }
.doc-version-row {
  display: grid;
  grid-template-columns: 70px 1fr 120px 120px;
  gap: 10px; align-items: center;
  padding: 10px 12px;
  background: var(--bg-tint); border: 1px solid var(--border);
  border-radius: 7px; cursor: pointer; transition: border-color 140ms, background 140ms;
}
.doc-version-row:hover { border-color: var(--border-strong); }
/* .current = "this is the live version" — informational signal, blue. */
.doc-version-row.current {
  background: var(--blue-soft);
  border-color: var(--blue);
  border-left: 3px solid var(--blue);
}
[data-theme="dark"] .doc-version-row.current { background: rgba(37, 99, 235, 0.12); }
/* .expanded = "you're inspecting this version's detail" — selection signal,
   purple. Distinct from .current (blue). When a row is BOTH .current and
   .expanded, .expanded wins (declared after) — the active inspection state
   takes visual precedence. The ACTIVE small label inside still renders so
   both signals remain readable. */
.doc-version-row.expanded {
  background: var(--purple-soft);
  border-color: var(--purple);
  border-left: 3px solid var(--purple);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
[data-theme="dark"] .doc-version-row.expanded { background: rgba(139, 92, 246, 0.14); }
.doc-version-num    { font-weight: 600; color: var(--t-1); font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.doc-version-num small { display: block; font-size: 10px; color: var(--blue); font-weight: 700; margin-top: 2px; }
.doc-version-summary { font-size: 12px; color: var(--t-2); line-height: 1.45; }
.doc-version-author  { font-size: 11.5px; color: var(--t-3); }
.doc-version-date    { font-size: 11.5px; color: var(--t-3); text-align: right; }

/* Detail card sits attached directly below its parent row — same purple
   left accent continuing, no margin gap, top corners squared so the row +
   detail read as one connected unit. Background slightly different from
   the row so content is visually separable from header. */
.doc-version-detail {
  margin-top: 0; padding: 10px 12px;
  background: var(--bg-tint-2);
  border: 1px solid var(--purple);
  border-top: none;
  border-left: 3px solid var(--purple);
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  font-size: 12px; color: var(--t-2); line-height: 1.55;
}
[data-theme="dark"] .doc-version-detail { background: rgba(139, 92, 246, 0.06); }
.doc-version-detail .lbl { font-weight: 500; color: var(--t-3); margin-right: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; }

.doc-approval-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: var(--bg-tint); border: 1px solid var(--border);
  border-radius: 7px; margin-bottom: 6px;
  font-size: 12.5px; color: var(--t-2);
}
.doc-approval-row .av { width: 26px; height: 26px; font-size: 10.5px; }
.doc-approval-row strong { color: var(--t-1); font-weight: 600; }
.doc-approval-row small  { display: block; color: var(--t-4); font-size: 10.5px; margin-top: 1px; }

.doc-citing-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: var(--bg-tint); border: 1px solid var(--border);
  border-radius: 7px; margin-bottom: 5px; cursor: pointer;
  transition: all 140ms ease;
}
.doc-citing-row:hover { border-color: var(--blue); background: var(--blue-soft); }
[data-theme="dark"] .doc-citing-row:hover { background: rgba(37, 99, 235, 0.10); }
.doc-citing-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--t-3); flex-shrink: 0; }
.doc-citing-title { flex: 1; font-size: 12.5px; color: var(--t-1); }
.doc-citing-arrow { color: var(--t-4); font-size: 12px; }

.doc-audit-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: var(--bg-tint); border: 1px solid var(--border);
  border-radius: 7px; margin-bottom: 5px;
  font-size: 12.5px; color: var(--t-2);
}
.doc-audit-row strong { color: var(--t-1); font-weight: 600; }
.doc-audit-verdict {
  font-size: 10.5px; padding: 2px 8px; border-radius: 4px; font-weight: 600;
  background: var(--bg-tint-2); color: var(--t-2);
}
.doc-audit-verdict.examined { background: var(--blue-soft); color: var(--blue); }
.doc-audit-verdict.passed   { background: var(--green-soft); color: var(--green); }
.doc-audit-verdict.finding  { background: var(--red-soft);   color: var(--red); }

.doc-access-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 11.5px; color: var(--t-2);
}
.doc-access-row:last-child { border-bottom: none; }
.doc-access-time { color: var(--t-4); width: 130px; flex-shrink: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.doc-access-action { font-size: 11px; padding: 2px 7px; border-radius: 4px; background: var(--bg-tint-2); color: var(--t-3); flex-shrink: 0; }

.doc-distrib-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--bg-tint); border: 1px solid var(--border);
  border-radius: 7px; margin-bottom: 4px;
  font-size: 12.5px; cursor: pointer; transition: all 140ms ease;
}
.doc-distrib-row:hover { border-color: var(--t-3); }
.doc-distrib-row .av { width: 24px; height: 24px; font-size: 10.5px; }
.doc-distrib-row .grow { flex: 1; min-width: 0; }
.doc-distrib-row .grow strong { color: var(--t-1); font-weight: 600; }
.doc-distrib-row .grow small { display: block; color: var(--t-4); font-size: 10.5px; margin-top: 2px; }
.doc-distrib-pill {
  font-size: 10.5px; padding: 2px 8px; border-radius: 4px; font-weight: 600;
  background: var(--bg-tint-2); color: var(--t-2);
}
.doc-distrib-pill.read    { background: var(--green-soft); color: var(--green); }
.doc-distrib-pill.unread  { background: var(--amber-soft); color: var(--amber); }
.doc-distrib-pill.outdated{ background: var(--red-soft);   color: var(--red); }

.doc-distrib-kpi {
  margin-bottom: 12px; padding: 12px 14px;
  background: var(--bg-tint); border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px; color: var(--t-2); display: flex; align-items: center; gap: 14px;
}
.doc-distrib-kpi-num { font-size: 22px; font-weight: 700; color: var(--t-1); line-height: 1; }
.doc-distrib-kpi-lbl { font-size: 12px; color: var(--t-3); }

/* "Si je modifie ce document" preview block — Section 5D demo gold */
.doc-impact-block {
  margin-top: 12px; padding: 12px 14px;
  background: var(--amber-soft); border: 1px solid rgba(217, 119, 6, 0.30);
  border-left: 3px solid var(--amber);
  border-radius: 7px;
}
[data-theme="dark"] .doc-impact-block { background: rgba(217, 119, 6, 0.10); }
.doc-impact-title { font-size: 12.5px; font-weight: 600; color: #b45309; margin-bottom: 6px; }
[data-theme="dark"] .doc-impact-title { color: #fbbf24; }
.doc-impact-sub   { font-size: 11.5px; color: var(--t-3); margin-bottom: 10px; }
/* doc-impact-block — Section 5D callout. The previous inline expandable list
   was removed in the documents-polish-shipped sprint; the dependent rows now
   live in Section 5A only. The block keeps the ISO 9001 § 7.5.3.2 framing
   text + a primary CTA button that scrolls to + force-opens 5A. */

/* Audit timeline (Section 6C) */
.doc-timeline { display: flex; flex-direction: column; gap: 6px; }
.doc-timeline-row {
  display: grid; grid-template-columns: 110px 90px 1fr;
  gap: 10px; align-items: baseline;
  padding: 7px 10px; border-left: 2px solid var(--border);
  background: var(--bg-tint); border-radius: 0 6px 6px 0;
  font-size: 11.5px; color: var(--t-2);
}
.doc-timeline-row .when   { color: var(--t-4); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; }
.doc-timeline-row .kind   { font-size: 10.5px; padding: 1px 6px; border-radius: 3px; background: var(--bg-tint-2); color: var(--t-3); font-weight: 600; }
.doc-timeline-row .what strong { color: var(--t-1); }
.doc-timeline-row.kind-version  { border-left-color: var(--blue); }
.doc-timeline-row.kind-approval { border-left-color: var(--green); }
.doc-timeline-row.kind-status   { border-left-color: var(--amber); }

/* Nouveau document modal — sectioned form, reuses .modal patterns */
.doc-form-section {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.doc-form-section:last-child { border-bottom: none; }
.doc-form-section-title {
  font-size: 11px; font-weight: 600; color: var(--t-3);
  text-transform: uppercase; letter-spacing: 0.6px;
  margin-bottom: 12px;
}
.doc-form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.doc-form-grid .full { grid-column: 1 / -1; }

.doc-owner-link {
  cursor: pointer; color: var(--blue); font-weight: 500;
  display: inline-flex; align-items: center;
}
.doc-owner-link:hover { text-decoration: underline; }

/* Stacked drawer-over-drawer indicator — when a doc is opened from another
   doc's "Cité par" list, add a subtle border-left accent so the user sees
   they're now N levels deep. ESC pops the stack. */
.doc-drawer-stacked {
  border-left: 4px solid var(--blue) !important;
  box-shadow: -8px 0 24px rgba(0,0,0,0.10);
}
[data-theme="dark"] .doc-drawer-stacked { box-shadow: -8px 0 24px rgba(0,0,0,0.40); }

.doc-distrib-checkrow {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 6px;
  font-size: 12.5px; color: var(--t-2);
  cursor: pointer;
}
.doc-distrib-checkrow:hover { background: var(--bg-tint); }
.doc-distrib-checkrow input { margin: 0; cursor: pointer; }
.doc-distrib-checkrow small { color: var(--t-4); font-size: 11px; margin-left: auto; }

/* ============================================================ */
/* Référentiels (Conformité > Référentiels) — Sprint 3 .ref-*   */
/* ============================================================ */

/* Entity toggle bar (Moroil / MCM / Consolidée) — sticks above the page */
.ref-entity-toggle-bar {
  margin: 0 0 18px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 14px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
}
.ref-entity-toggle-label { font-size: 12px; font-weight: 600; color: var(--t-3); text-transform: uppercase; letter-spacing: 0.6px; }
.ref-entity-toggle { display: inline-flex; background: var(--bg-tint); border-radius: 8px; padding: 3px; }
.ref-toggle-btn {
  padding: 7px 14px; background: transparent; border: none; border-radius: 6px;
  font-size: 12.5px; font-weight: 500; color: var(--t-2); cursor: pointer;
  transition: background 120ms, color 120ms;
}
.ref-toggle-btn:hover { color: var(--t-1); }
.ref-toggle-btn.active { background: var(--bg-card); color: var(--blue); box-shadow: var(--shadow-sm); }
.ref-entity-toggle-banner {
  flex-basis: 100%; padding: 8px 12px;
  background: var(--purple-soft); color: #6d28d9;
  border-radius: 7px; font-size: 12px; line-height: 1.5;
}
[data-theme="dark"] .ref-entity-toggle-banner { color: #c4b5fd; }

/* Filter strip — reuses canonical .filter-bar / .filter-chip primitives */
.ref-filter-bar { margin-bottom: 8px; }
.ref-filter-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.ref-filter-row:last-of-type { margin-bottom: 18px; }
.ref-filter-label {
  font-size: 11px; font-weight: 600; color: var(--t-3);
  text-transform: uppercase; letter-spacing: 0.6px;
  margin-right: 6px; min-width: 78px;
}

.ref-empty {
  padding: 60px 24px; text-align: center;
  background: var(--bg-tint); border: 1px dashed var(--border-strong); border-radius: 12px;
  color: var(--t-2);
}
.ref-empty h3 { font-size: 15px; font-weight: 600; color: var(--t-1); margin: 0 0 8px; }
.ref-empty p  { font-size: 13px; color: var(--t-3); max-width: 560px; margin: 0 auto; line-height: 1.55; }

/* Register list — list of standards (one row per référentiel) */
.ref-register-list { display: flex; flex-direction: column; gap: 8px; }
.ref-register-row {
  display: grid; grid-template-columns: 1.4fr 1fr auto;
  gap: 18px; align-items: center;
  padding: 14px 16px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  cursor: pointer; transition: border-color 140ms, box-shadow 140ms;
  min-height: 76px;
}
.ref-register-row:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.ref-register-shortname { font-size: 15px; font-weight: 700; color: var(--t-1); margin-bottom: 4px; }
.ref-register-longname  { font-size: 12.5px; color: var(--t-3); line-height: 1.4; margin-bottom: 8px; }
.ref-register-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ref-cat-chip {
  font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 100px;
  background: var(--bg-tint-2); color: var(--t-2);
}
.ref-cat-chip.ref-cat-qualit       { background: var(--blue-soft); color: var(--blue); }
.ref-cat-chip.ref-cat-environnement { background: var(--green-soft); color: #047857; }
.ref-cat-chip.ref-cat-sntscurit     { background: var(--red-soft); color: #b91c1c; }
.ref-cat-chip.ref-cat-scuritalimentaire { background: var(--purple-soft); color: #6d28d9; }
.ref-cat-chip.ref-cat-rglementairelocal { background: var(--amber-soft); color: #b45309; }

.ref-cert-chip {
  font-size: 10.5px; padding: 3px 9px; border-radius: 6px;
  background: var(--bg-tint); color: var(--t-3); font-weight: 500;
}
.ref-cert-chip.ref-cert-ok strong { color: var(--green); }
[data-theme="dark"] .ref-cert-chip.ref-cert-ok strong { color: #6ee7b7; }

.ref-register-coverage { margin-bottom: 6px; }
.ref-register-coverage-bar {
  height: 6px; background: var(--bg-tint-2); border-radius: 3px; overflow: hidden;
  margin-bottom: 4px;
}
.ref-register-coverage-fill {
  height: 100%; background: var(--green);
  transition: width 200ms ease;
}
.ref-register-coverage-text { font-size: 12px; color: var(--t-2); }
.ref-register-coverage-text strong { color: var(--t-1); }
.ref-register-coverage-breakdown { font-size: 11.5px; color: var(--t-3); }
.ref-register-coverage-breakdown strong { color: var(--t-1); }
.ref-register-coverage-breakdown .sep { margin: 0 4px; color: var(--t-4); }
.ref-register-stub {
  font-size: 12.5px; color: var(--t-3); font-style: italic; line-height: 1.5;
}

.ref-register-row-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ref-register-arrow { color: var(--t-4); font-size: 16px; }

/* Return crumb (from documents.js → clause target) */
.ref-return-crumb {
  margin: -8px 0 14px;
  padding: 8px 14px;
  background: var(--blue-soft); color: var(--blue);
  border-radius: 7px; font-size: 12.5px;
  cursor: pointer; display: inline-block;
  border-left: 3px solid var(--blue);
}
.ref-return-crumb:hover { background: var(--blue-tint); }

/* Detail KPI grid */
.ref-detail-kpi-grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 10px; margin-bottom: 14px;
}
.ref-kpi-card {
  padding: 14px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  text-align: center;
}
.ref-kpi-card.ref-kpi-pct .ref-kpi-num { color: var(--green); }
.ref-kpi-card.ref-kpi-attention { border-color: var(--red); }
.ref-kpi-card.ref-kpi-attention .ref-kpi-num { color: var(--red); }
.ref-kpi-num { font-size: 28px; font-weight: 700; color: var(--t-1); line-height: 1; }
.ref-kpi-num-sm { font-size: 13.5px; font-weight: 600; color: var(--t-1); line-height: 1.3; margin: 4px 0; }
.ref-kpi-lbl { font-size: 11px; color: var(--t-3); margin-top: 6px; line-height: 1.4; }

/* Status legend */
.ref-status-legend {
  padding: 10px 14px;
  background: var(--bg-tint); border: 1px solid var(--border); border-radius: 8px;
  font-size: 11.5px; color: var(--t-3);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 18px;
}
.ref-status-legend strong { color: var(--t-1); margin-right: 6px; }
.ref-status-legend .pill { margin: 0 4px 0 12px; }
.ref-status-legend .pill:first-of-type { margin-left: 0; }

/* Two-pane clause view */
.ref-clause-twopane {
  display: grid; grid-template-columns: 280px 1fr;
  gap: 16px; align-items: start;
}
.ref-clause-rail {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px; display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 16px;
  max-height: calc(100vh - 220px); overflow-y: auto;
}
.ref-clause-rail::-webkit-scrollbar { display: none; }
.ref-clause-rail { scrollbar-width: none; }

.ref-rail-item {
  display: grid; grid-template-columns: 36px 1fr;
  gap: 10px;
  padding: 10px 12px; border-radius: 7px;
  cursor: pointer; transition: background 120ms;
  border-left: 3px solid transparent;
}
.ref-rail-item:hover { background: var(--bg-tint); }
.ref-rail-item.active { background: var(--bg-tint); border-left-color: var(--blue); }
.ref-rail-num { font-size: 20px; font-weight: 700; color: var(--t-1); line-height: 1; }
.ref-rail-title { font-size: 12.5px; font-weight: 600; color: var(--t-1); line-height: 1.3; }
.ref-rail-count { font-size: 10.5px; color: var(--t-3); margin-top: 2px; }
.ref-rail-bar {
  display: flex; height: 4px; border-radius: 2px; overflow: hidden;
  background: var(--bg-tint-2); margin-top: 6px;
}
.ref-rail-bar-seg.ref-bar-conforme     { background: var(--green); }
.ref-rail-bar-seg.ref-bar-surveillance { background: var(--amber); }
.ref-rail-bar-seg.ref-bar-ecart        { background: var(--red); }
.ref-rail-bar-seg.ref-bar-na           { background: var(--t-4); }

.ref-clause-pane {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  padding: 22px 26px;
}
.ref-pane-header {
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.ref-pane-clause-num   { font-size: 11px; font-weight: 700; color: var(--t-3); letter-spacing: 0.8px; text-transform: uppercase; }
.ref-pane-clause-title { font-size: 22px; font-weight: 700; color: var(--t-1); margin-top: 4px; line-height: 1.3; }
.ref-pane-clause-intent { font-size: 13px; color: var(--t-2); line-height: 1.6; margin-top: 10px; }

/* Sub-clause cards */
.ref-subclause-list { display: flex; flex-direction: column; gap: 10px; }
.ref-subclause-card {
  background: var(--bg-tint); border: 1px solid var(--border); border-radius: 9px;
  transition: border-color 140ms, box-shadow 140ms;
}
.ref-subclause-card:hover { border-color: var(--border-strong); }
.ref-subclause-card.expanded { border-color: var(--blue); box-shadow: var(--shadow-sm); }
.ref-subclause-card.ref-na { background: var(--bg-tint-2); }
.ref-subclause-head {
  display: grid; grid-template-columns: 70px 1fr auto;
  gap: 14px; align-items: start;
  padding: 14px 16px;
  cursor: pointer;
}
.ref-subclause-num {
  font-size: 18px; font-weight: 700; color: var(--blue);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height: 1.2;
}
.ref-subclause-body { min-width: 0; }
.ref-subclause-title { font-size: 14px; font-weight: 600; color: var(--t-1); line-height: 1.3; }
.ref-subclause-intent { font-size: 12px; color: var(--t-3); line-height: 1.55; margin-top: 4px; }
.ref-subclause-required { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.ref-evidence-chip {
  font-size: 10.5px; padding: 2px 8px; border-radius: 100px;
  background: var(--bg-card); border: 1px solid var(--border); color: var(--t-2);
}
.ref-subclause-status { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.ref-subclause-chev {
  margin-top: 4px; color: var(--t-4);
  transition: transform 160ms ease;
}
.ref-subclause-card.expanded .ref-subclause-chev { transform: rotate(90deg); color: var(--blue); }
.ref-na-reason {
  padding: 0 16px 14px 100px; font-size: 12px; color: var(--t-3); font-style: italic; line-height: 1.55;
}

.ref-subclause-detail {
  padding: 0 16px 16px 16px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.ref-evidence-section { margin-top: 14px; }
.ref-evidence-section-title {
  font-size: 11.5px; font-weight: 600; color: var(--t-3);
  text-transform: uppercase; letter-spacing: 0.6px;
  margin-bottom: 8px;
}
.ref-evidence-list { display: flex; flex-direction: column; gap: 6px; }
.ref-evidence-empty {
  padding: 10px 12px; font-size: 12px; color: var(--t-4); font-style: italic;
  background: var(--bg-card); border: 1px dashed var(--border); border-radius: 7px;
}
.ref-evidence-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 7px;
  font-size: 12.5px; color: var(--t-2);
  cursor: pointer; transition: border-color 140ms, background 140ms;
}
.ref-evidence-row:hover { border-color: var(--blue); background: var(--blue-soft); }
[data-theme="dark"] .ref-evidence-row:hover { background: rgba(37, 99, 235, 0.10); }
.ref-evidence-ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--t-3); flex-shrink: 0; min-width: 110px;
}
.ref-evidence-mid { flex: 1; min-width: 0; }
.ref-evidence-mid strong { color: var(--t-1); font-weight: 600; }
.ref-evidence-mid small  { display: block; color: var(--t-4); font-size: 10.5px; margin-top: 1px; }
.ref-evidence-arrow { color: var(--t-4); font-size: 12px; }

.ref-subclause-cnc {
  margin-top: 16px;
  padding: 10px 14px;
  background: var(--amber-soft); border-left: 3px solid var(--amber);
  border-radius: 0 7px 7px 0;
  font-size: 12px; color: #b45309; line-height: 1.55;
}
[data-theme="dark"] .ref-subclause-cnc { background: rgba(217, 119, 6, 0.10); color: #fbbf24; }
.ref-subclause-cnc strong { display: block; margin-bottom: 4px; color: #b45309; }
[data-theme="dark"] .ref-subclause-cnc strong { color: #fbbf24; }
.ref-subclause-cnc ul { margin: 0; padding-left: 18px; }
.ref-subclause-cnc li { margin: 2px 0; }

/* ============================================================ */
/* Audit Pack — full-screen pack view                            */
/* ============================================================ */

.audit-pack-bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  background: var(--bg-card); border-bottom: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
  margin: -22px -22px 22px;
}
.audit-pack-bar-text { font-size: 14px; color: var(--t-1); }
.audit-pack-bar-text strong { font-weight: 700; }
.audit-pack-bar-text small { display: block; font-size: 11.5px; color: var(--t-3); margin-top: 2px; }
.audit-pack-bar-actions { display: flex; gap: 8px; }

.audit-pack { font-family: var(--font); color: var(--t-1); max-width: 1100px; margin: 0 auto; padding: 22px; }
.audit-pack-section {
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
}
.audit-pack-section:last-child { border-bottom: none; }

/* Cover section */
.audit-pack-cover {
  text-align: center; padding: 60px 0 40px;
  background: linear-gradient(180deg, var(--blue-tint) 0%, transparent 100%);
  border-radius: 10px;
}
.audit-pack-logo-zone {
  font-size: 12px; font-weight: 700; color: var(--blue); letter-spacing: 4px;
  margin-bottom: 30px;
  text-transform: uppercase;
}
.audit-pack-title { font-size: 40px; font-weight: 800; color: var(--t-1); margin: 0; letter-spacing: -0.02em; }
.audit-pack-subtitle { font-size: 18px; font-weight: 500; color: var(--t-2); margin-top: 12px; line-height: 1.4; }
.audit-pack-version { font-size: 13px; color: var(--t-3); margin-top: 14px; }

.audit-pack-meta {
  display: flex; flex-direction: column; gap: 4px; margin: 36px auto 24px;
  max-width: 540px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 20px;
  text-align: left;
}
.audit-pack-meta-row {
  display: grid; grid-template-columns: 200px 1fr; gap: 14px;
  padding: 6px 0;
  font-size: 12.5px;
  border-bottom: 1px dashed var(--border-soft);
}
.audit-pack-meta-row:last-child { border-bottom: none; }
.audit-pack-meta-row .lbl { font-weight: 600; color: var(--t-3); text-transform: uppercase; letter-spacing: 0.4px; font-size: 11px; }
.audit-pack-meta-row .val { color: var(--t-1); }

.audit-pack-cover-foot {
  font-size: 11px; color: var(--t-4); margin-top: 28px; line-height: 1.6;
}

.audit-pack-h2 {
  font-size: 22px; font-weight: 700; color: var(--t-1);
  margin: 0 0 16px; padding-bottom: 8px;
  border-bottom: 2px solid var(--blue);
  letter-spacing: -0.01em;
}
.audit-pack-h3 {
  font-size: 16px; font-weight: 700; color: var(--t-1);
  margin: 18px 0 10px;
}
.audit-pack-h4 {
  font-size: 13px; font-weight: 600; color: var(--t-2);
  margin: 12px 0 6px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.audit-pack-intent {
  font-size: 13px; color: var(--t-2); line-height: 1.6; margin: 6px 0 14px;
  font-style: italic;
}
.audit-pack-na-reason {
  font-size: 12.5px; color: var(--t-3); font-style: italic;
  padding: 8px 12px; background: var(--bg-tint); border-radius: 6px;
}

.audit-pack-kpi-grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 10px; margin-bottom: 20px;
}

.audit-pack-donut-wrap {
  display: flex; align-items: center; gap: 30px;
  padding: 20px; background: var(--bg-tint); border-radius: 10px;
  margin: 16px 0;
}
.audit-pack-donut-legend { font-size: 13px; color: var(--t-2); display: flex; flex-direction: column; gap: 6px; }
.audit-pack-donut-legend div { display: flex; align-items: center; gap: 8px; }
.audit-pack-donut-legend strong { color: var(--t-1); }
.audit-pack-legend-sw {
  width: 12px; height: 12px; border-radius: 3px; display: inline-block;
}

.audit-pack-statement {
  font-size: 13.5px; color: var(--t-2); line-height: 1.7;
  padding: 14px 18px; background: var(--bg-tint); border-left: 3px solid var(--blue);
  border-radius: 0 7px 7px 0;
}
.audit-pack-statement strong { color: var(--t-1); }

.audit-pack-toc {
  display: flex; flex-direction: column; gap: 4px;
}
.audit-pack-toc-row {
  display: grid; grid-template-columns: 60px 1fr auto;
  gap: 14px; align-items: center;
  padding: 9px 14px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 7px;
  font-size: 13px; color: var(--t-1);
  cursor: pointer; transition: border-color 140ms;
}
.audit-pack-toc-row:hover { border-color: var(--blue); }
.audit-pack-toc-num { font-weight: 700; color: var(--blue); font-size: 14px; }

.audit-pack-clause { page-break-before: always; }
.audit-pack-subclause { margin: 18px 0; padding: 16px 0; border-top: 1px dashed var(--border); }
.audit-pack-evidence { margin: 10px 0; }
.audit-pack-empty { font-size: 11.5px; color: var(--t-4); font-style: italic; padding: 4px 0; }

.audit-pack-summary-table, .audit-pack-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
  margin: 8px 0 14px;
}
.audit-pack-summary-table th, .audit-pack-summary-table td,
.audit-pack-table th, .audit-pack-table td {
  text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.audit-pack-summary-table thead th, .audit-pack-table thead th {
  background: var(--bg-tint); font-size: 11px; font-weight: 700;
  color: var(--t-3); text-transform: uppercase; letter-spacing: 0.4px;
}
.audit-pack-table td:first-child {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--t-3);
}
.audit-pack-row-clickable { cursor: pointer; transition: background 120ms; }
.audit-pack-row-clickable:hover { background: var(--bg-tint); }

.audit-pack-bullets { margin: 8px 0 14px 18px; font-size: 12.5px; color: var(--t-2); line-height: 1.7; }
.audit-pack-bullets li { margin: 4px 0; }

.audit-pack-annex { page-break-before: always; }

/* ============================================================ */
/* Records drawer (Sprint 3.5) — promoted from toast              */
/* ============================================================ */

.rec-section {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.rec-section:last-of-type { border-bottom: none; }
.rec-section-title {
  font-size: 11.5px; font-weight: 700; color: var(--t-3);
  text-transform: uppercase; letter-spacing: 0.6px;
  margin-bottom: 10px;
}
.rec-section-intro {
  font-size: 12px; color: var(--t-3); line-height: 1.55;
  margin-bottom: 10px;
}

.rec-clause-chips {
  display: flex; flex-direction: column; gap: 6px;
}
.rec-clause-chip {
  display: grid; grid-template-columns: auto 1fr;
  gap: 10px; align-items: baseline;
  padding: 9px 12px;
  background: var(--bg-tint); border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 12px; color: var(--t-2);
  text-align: left; cursor: pointer;
  transition: border-color 140ms, background 140ms;
}
.rec-clause-chip:hover { border-color: var(--blue); background: var(--blue-soft); }
[data-theme="dark"] .rec-clause-chip:hover { background: rgba(37, 99, 235, 0.10); }
.rec-clause-chip strong { color: var(--blue); font-weight: 600; }
.rec-clause-chip small { color: var(--t-3); font-size: 11px; line-height: 1.4; }
.rec-clause-chip.rec-clause-chip-broken { color: var(--red); cursor: not-allowed; }

/* Personnel rows inside Formation drawer (Sprint 3.6) */
.rec-personnel-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--bg-tint); border: 1px solid var(--border);
  border-radius: 7px; margin-bottom: 4px;
  font-size: 12.5px; color: var(--t-2);
}
.rec-personnel-row .grow { flex: 1; min-width: 0; }
.rec-personnel-row .grow strong { color: var(--t-1); font-weight: 600; }
.rec-personnel-row .grow small { display: block; color: var(--t-4); font-size: 10.5px; margin-top: 1px; }

/* Print stylesheet — chrome out, A4-friendly */
@media print {
  body, html { background: white; color: black; }
  .no-print, .sidebar, .topbar, .flyout, .audit-pack-bar { display: none !important; }
  .main, .page { padding: 0; margin: 0; }
  .audit-pack { padding: 0; max-width: 100%; }
  .audit-pack-section { page-break-inside: avoid; padding: 16px 0; }
  .audit-pack-clause, .audit-pack-annex { page-break-before: always; }
  .audit-pack-cover { background: none; padding: 80px 0 40px; }
  .audit-pack-toc-row:hover { border-color: var(--border); }
  .audit-pack-h2 { border-bottom-color: black; }
  .pill { background: white !important; color: black !important; border: 1px solid black; padding: 1px 6px; }
  .pill::before { display: none; }
  .audit-pack-donut-wrap { background: white; border: 1px solid black; }
  .audit-pack-table thead th { background: #eee !important; }
  .audit-pack-table { page-break-inside: avoid; }
  .audit-pack-table tr { page-break-inside: avoid; }
  @page { margin: 18mm 14mm; size: A4; }
}

/* ===== HSE module — stubs (TASK 1) =====
   Honest "Sprint 6" stub styling for the 5 sub-pages not built tonight.
   Real styles for hse_risques + hse_dashboard live in the §HSE Risques /
   §HSE Dashboard sections below (TASK 4 / TASK 5). */
.empty-state.hse-stub h3 span { color: var(--t-3); font-weight: 500; }
.hse-stub-spec-ref { font-size: 11px; color: var(--t-4); margin-top: 8px; font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ===== HSE Risques sub-page (TASK 4) =====
   Split view: heatmap top + axis pills + list bottom + filter strip.
   Drawer with identité, multi-axis assessment (safety only), controls,
   bowtie stub, related stubs. */
.hse-risques-layout { padding: 20px 24px; display: flex; flex-direction: column; gap: 18px; }
.hse-risques-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hse-risques-title h2 { font-size: 20px; font-weight: 700; color: var(--t-1); margin: 0 0 4px; }
.hse-risques-subtitle { font-size: 12.5px; color: var(--t-3); margin: 0; }
.hse-risques-actions .btn { padding: 8px 16px; font-size: 13px; font-weight: 600; border-radius: 8px; border: 0; cursor: pointer; }
.hse-risques-actions .btn.btn-primary { background: var(--blue); color: white; }

/* --- KPI strip (Risques only) — 5 severity tiles above the heatmap.
   Reactive to current heatmap selection + axis + filter strip. Clicking a tile
   toggles `filters.currentZone` membership (multi-select). */
.hse-kpi-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.hse-kpi-tile-zone {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 6px;
  text-align: left; cursor: pointer; transition: all 0.15s; min-width: 0;
}
.hse-kpi-tile-zone:hover { border-color: var(--t-2); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.hse-kpi-tile-zone.empty .hse-kpi-tile-zone-count,
.hse-kpi-tile-zone.empty .hse-kpi-tile-zone-sub { opacity: 0.45; }
.hse-kpi-tile-zone-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.2; }
.hse-kpi-tile-zone-count { font-size: 28px; font-weight: 700; line-height: 1; color: var(--t-1); }
.hse-kpi-tile-zone-sub { font-size: 11px; color: var(--t-3); }
/* Per-zone tile bg + label tone — lighter shade of the matching zone color */
.hse-kpi-tile-zone--tres_faible { background: var(--hse-zone-tres_faible-bg-dim); border-color: var(--hse-zone-tres_faible-solid); }
.hse-kpi-tile-zone--faible      { background: var(--hse-zone-faible-bg-dim);      border-color: var(--hse-zone-faible-solid); }
.hse-kpi-tile-zone--moyen       { background: var(--hse-zone-moyen-bg-dim);       border-color: var(--hse-zone-moyen-solid); }
.hse-kpi-tile-zone--eleve       { background: var(--hse-zone-eleve-bg-dim);       border-color: var(--hse-zone-eleve-solid); }
.hse-kpi-tile-zone--extreme     { background: var(--hse-zone-extreme-bg-dim);     border-color: var(--hse-zone-extreme-solid); }
.hse-kpi-tile-zone--tres_faible .hse-kpi-tile-zone-label { color: var(--hse-zone-tres_faible-fg); }
.hse-kpi-tile-zone--faible      .hse-kpi-tile-zone-label { color: var(--hse-zone-faible-fg); }
.hse-kpi-tile-zone--moyen       .hse-kpi-tile-zone-label { color: var(--hse-zone-moyen-fg); }
.hse-kpi-tile-zone--eleve       .hse-kpi-tile-zone-label { color: var(--hse-zone-eleve-fg); }
.hse-kpi-tile-zone--extreme     .hse-kpi-tile-zone-label { color: var(--hse-zone-extreme-fg); }
/* Active state — saturated bg + stronger border to show "this zone is filtered" */
.hse-kpi-tile-zone.active.hse-kpi-tile-zone--tres_faible { background: var(--hse-zone-tres_faible-bg-strong); border-width: 2px; }
.hse-kpi-tile-zone.active.hse-kpi-tile-zone--faible      { background: var(--hse-zone-faible-bg-strong);      border-width: 2px; }
.hse-kpi-tile-zone.active.hse-kpi-tile-zone--moyen       { background: var(--hse-zone-moyen-bg-strong);       border-width: 2px; }
.hse-kpi-tile-zone.active.hse-kpi-tile-zone--eleve       { background: var(--hse-zone-eleve-bg-strong);       border-width: 2px; }
.hse-kpi-tile-zone.active.hse-kpi-tile-zone--extreme     { background: var(--hse-zone-extreme-bg-strong);     border-width: 2px; }
@media (max-width: 980px) {
  .hse-kpi-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .hse-kpi-tile-zone { padding: 12px 10px; }
  .hse-kpi-tile-zone-count { font-size: 22px; }
}

/* --- Heatmap panel --- */
.hse-heatmap-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; }
.hse-axis-pills { display: flex; flex-wrap: wrap; gap: 6px; }
/* Pills inside the heatmap card's left column sit above the matrix and wrap to
   multiple rows when the column is narrow (Risques + Dashboard same pattern). */
.hse-heatmap-card-left .hse-axis-pills,
.hse-dashboard-heatmap-left .hse-axis-pills { margin-bottom: 12px; }
/* Risques heatmap header — matches Dashboard pattern: section title left,
   clear-button slot right, axis pills row below. The .hse-heatmap-section-head
   shared style block (further down in this file) handles the title-vs-clear
   row; .hse-axis-pills underneath gets the standard margin-bottom for
   separation from the matrix. */
.hse-heatmap-section-clear { flex: 0 0 auto; }
/* Matrix wrapper fills the remaining vertical space in the left column. The
   Probabilité axis label still centers under the matrix because the wrap's
   inner grid uses `auto 1fr` — col 2 (matrix + label) is centered together. */
.hse-heatmap-card-left .hse-heatmap-wrap,
.hse-dashboard-heatmap-left .hse-heatmap-wrap {
  width: 100%;
  flex: 1 1 auto;
  min-height: 320px;  /* safety floor when right column is shorter than usual */
}
/* Matrix dominates the card (≈67%); right column (axis dist + donut on
   Risques / Top 5 table on dashboard) gets the remaining ≈33%. No max-width
   cap on the matrix column — it fills its 2fr track so cells stretch.
   The 32px gap gives visual breathing room between matrix and right charts. */
.hse-heatmap-card-grid,
.hse-dashboard-heatmap-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
  align-items: stretch;
}
.hse-heatmap-card-left, .hse-heatmap-card-right,
.hse-dashboard-heatmap-left, .hse-dashboard-heatmap-right { min-width: 0; }
/* Left column is a flex column: pill row at top (auto), matrix wrap below (flex:1
   fills remaining stretched height). Lets the matrix fill its container in both
   axes when the grid row stretches taller than the matrix's natural height. */
.hse-heatmap-card-left,
.hse-dashboard-heatmap-left { display: flex; flex-direction: column; }
/* Risques right column holds two stacked charts (axis dist + lifecycle donut).
   Sections are sized to their natural content height — no flex-1 stretching,
   so the axis chart can't overflow into the donut's title area. The 32px gap
   guarantees clear vertical separation between the two. Any excess column
   height (when the right column is shorter than the matrix) shows as empty
   space at the bottom — acceptable per WO. */
.hse-heatmap-card-right { display: flex; flex-direction: column; gap: 32px; height: 100%; }
.hse-heatmap-card-right-section { flex: 0 0 auto; display: flex; flex-direction: column; }
.hse-heatmap-card-right-section > * { flex: 0 0 auto; width: 100%; }
@media (max-width: 900px) {
  .hse-heatmap-card-right { height: auto; gap: 24px; }
}
@media (max-width: 900px) {
  .hse-heatmap-card-grid,
  .hse-dashboard-heatmap-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
  }
}

/* Axis distribution chart (right-half of heatmap card on Risques sub-page).
   HTML/CSS bars (no SVG) — the card is a flex column with a fixed-height
   header + legend and a flex-growing rows section. Each row also flex-grows
   (with min/max caps so bars stay readable, not stretched into fat blobs)
   so the chart fills the right column's full height. */
.hse-axis-dist-card { display: flex; flex-direction: column; height: 100%; gap: 6px; }
.hse-axis-dist-head { flex: 0 0 auto; }
.hse-axis-dist-title { font-size: 13px; font-weight: 700; color: var(--t-2); margin: 0; }
.hse-axis-dist-subhead { font-size: 11px; color: var(--t-3); margin: 2px 0 0; }
.hse-axis-dist-rows {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 6px 0 4px;
}
.hse-axis-dist-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 12px;
  flex: 1 1 0;
  min-height: 22px;
  max-height: 42px;
}
.hse-axis-dist-row-label {
  font-size: 11.5px;
  color: var(--t-2);
  text-align: right;
  cursor: pointer;
  transition: color 0.12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hse-axis-dist-row-label:hover { color: var(--blue); }
.hse-axis-dist-row-bar {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 55%;
  min-height: 14px;
  background: var(--bg-tint);
  border-radius: 4px;
  overflow: hidden;
}
.hse-axis-dist-row.empty .hse-axis-dist-row-bar { background: transparent; }
.hse-axis-dist-row.empty .hse-axis-dist-row-bar::after {
  content: '';
  width: 6px;
  height: 2px;
  margin: auto 0;
  background: var(--border-strong);
  border-radius: 1px;
}
.hse-axis-dist-seg { height: 100%; cursor: pointer; transition: opacity 0.12s; }
.hse-axis-dist-seg:hover { opacity: 0.82; }
.hse-axis-dist-row-count {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--t-1);
  text-align: right;
}
.hse-axis-dist-row.empty .hse-axis-dist-row-count { color: var(--t-4); font-weight: 500; }
.hse-axis-dist-legend {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 10.5px;
  color: var(--t-3);
  margin-top: 2px;
}
.hse-axis-dist-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.hse-axis-dist-legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }

/* Lifecycle donut chart (below axis distribution on Risques right column).
   SVG donut with HTML-overlay center. Donut on the left, legend on the right
   inside the body grid. On mobile the body collapses to a single column. */
.hse-lifecycle-donut-card { display: flex; flex-direction: column; height: 100%; gap: 6px; }
.hse-lifecycle-donut-head { flex: 0 0 auto; }
.hse-lifecycle-donut-title { font-size: 13px; font-weight: 700; color: var(--t-2); margin: 0; }
.hse-lifecycle-donut-subhead { font-size: 11px; color: var(--t-3); margin: 2px 0 0; }
.hse-lifecycle-donut-body {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 0;
  padding: 4px 0;
}
.hse-lifecycle-donut-chart-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.hse-lifecycle-donut-svg {
  width: 100%;
  height: 100%;
  max-height: 100%;
  max-width: 160px;
  display: block;
}
.hse-lifecycle-donut-seg:hover { opacity: 0.85 !important; }
/* Center overlay — sized to fit the inner hole of the thickened donut
   (r=36, sw=24 → inner hole = 50% × 50% of the viewBox). Inset bumped from
   25% to 28% so the number and label have breathing room from the ring's
   inner edge. */
.hse-lifecycle-donut-center {
  position: absolute;
  inset: 28%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
}
.hse-lifecycle-donut-center-value { font-size: 22px; font-weight: 700; color: var(--t-1); line-height: 1; }
.hse-lifecycle-donut-center-label { font-size: 8.5px; color: var(--t-3); margin-top: 4px; letter-spacing: 0.06em; text-transform: uppercase; }
/* Empty-state message: widen the box (long sentence) but still keep it inside
   the donut area; smaller italic font. */
.hse-lifecycle-donut-center.empty {
  inset: 16% 10%;
  font-size: 9.5px;
  color: var(--t-3);
  font-style: italic;
  line-height: 1.35;
}
.hse-lifecycle-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.hse-lifecycle-donut-legend-item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, border-color 0.12s, opacity 0.12s;
}
.hse-lifecycle-donut-legend-item:hover:not(:disabled) { background: var(--bg-tint); border-color: var(--border); }
.hse-lifecycle-donut-legend-item.active { background: var(--bg-tint); border-color: var(--border-strong); }
.hse-lifecycle-donut-legend-item.dim { opacity: 0.55; }
.hse-lifecycle-donut-legend-item.zero { opacity: 0.45; cursor: default; }
.hse-lifecycle-donut-legend-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.hse-lifecycle-donut-legend-label {
  font-size: 11.5px; color: var(--t-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hse-lifecycle-donut-legend-count { font-size: 11.5px; font-weight: 600; color: var(--t-1); }
.hse-lifecycle-donut-legend-item.zero .hse-lifecycle-donut-legend-count { color: var(--t-4); font-weight: 500; }
@media (max-width: 900px) {
  .hse-lifecycle-donut-body { grid-template-columns: 1fr; }
  .hse-lifecycle-donut-svg { max-width: 200px; margin: 0 auto; }
}
.hse-axis-pill { padding: 5px 11px; font-size: 11.5px; font-weight: 500; color: var(--t-2); background: var(--bg-tint); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; transition: all 0.15s; }
.hse-axis-pill:hover { background: var(--bg-hover); }
.hse-axis-pill.active { background: var(--blue); color: white; border-color: var(--blue); }
/* Heatmap layout (v1.1) — 3 columns × 3 rows:
   col 1: vertical axis title ("Sévérité")
   col 2: y-tick labels (5 descriptors, top→bottom: Catastrophique → Insignifiant)
   col 3: 5×5 matrix grid
   row 2: x-tick labels (5 descriptors, left→right: Rare → Quasi Certain)
   row 3: horizontal axis title ("Probabilité") */
.hse-heatmap-wrap {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-rows: 1fr auto auto;
  gap: 4px;
  align-items: stretch;
}
.hse-heatmap-axis-title { font-size: 11px; font-weight: 600; color: var(--t-3); text-align: center; letter-spacing: 0.04em; text-transform: uppercase; }
.hse-heatmap-axis-title--y { writing-mode: vertical-rl; transform: rotate(180deg); grid-column: 1; grid-row: 1; align-self: center; }
.hse-heatmap-axis-title--x { grid-column: 3; grid-row: 3; padding-top: 2px; }
.hse-heatmap-y-ticks { grid-column: 2; grid-row: 1; display: grid; grid-template-rows: repeat(5, 1fr); gap: 3px; padding-right: 4px; }
.hse-heatmap-y-tick { display: flex; align-items: center; justify-content: flex-end; text-align: right; font-size: 10.5px; color: var(--t-3); line-height: 1.15; white-space: nowrap; }
.hse-heatmap-axis-corner { grid-column: 1 / 3; grid-row: 2; }
.hse-heatmap-x-ticks { grid-column: 3; grid-row: 2; display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; padding-top: 4px; }
.hse-heatmap-x-tick { text-align: center; font-size: 10.5px; color: var(--t-3); line-height: 1.15; padding: 0 2px; word-break: break-word; }
/* Matrix fills its grid cell in both axes — no aspect-ratio constraint on
   desktop so cells stretch when the column stretches taller than wide. */
.hse-heatmap-grid { grid-column: 3; grid-row: 1; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); gap: 3px; width: 100%; height: 100%; }
.hse-heatmap-cell { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1.5px solid transparent; border-radius: 6px; cursor: pointer; transition: all 0.12s; }
.hse-heatmap-cell:hover { transform: scale(1.03); border-color: var(--t-1); z-index: 1; }
.hse-heatmap-cell.empty { opacity: 0.55; }
/* 5-level severity cells — pastel-solid two-state palette:
   unselected ≈ 0.6 alpha (each zone clearly identifiable by color alone),
   hover ≈ 0.8, selected = 1.0 (full pastel). Selected also gets a thicker
   solid border in the matching zone color. */
.hse-heatmap-cell.zone-tres_faible                      { background: var(--hse-zone-tres_faible-cell); }
.hse-heatmap-cell.zone-faible                           { background: var(--hse-zone-faible-cell); }
.hse-heatmap-cell.zone-moyen                            { background: var(--hse-zone-moyen-cell); }
.hse-heatmap-cell.zone-eleve                            { background: var(--hse-zone-eleve-cell); }
.hse-heatmap-cell.zone-extreme                          { background: var(--hse-zone-extreme-cell); }
.hse-heatmap-cell.zone-tres_faible:hover                { background: var(--hse-zone-tres_faible-cell-hover); }
.hse-heatmap-cell.zone-faible:hover                     { background: var(--hse-zone-faible-cell-hover); }
.hse-heatmap-cell.zone-moyen:hover                      { background: var(--hse-zone-moyen-cell-hover); }
.hse-heatmap-cell.zone-eleve:hover                      { background: var(--hse-zone-eleve-cell-hover); }
.hse-heatmap-cell.zone-extreme:hover                    { background: var(--hse-zone-extreme-cell-hover); }
.hse-heatmap-cell.selected.zone-tres_faible             { background: var(--hse-zone-tres_faible-cell-selected); border-color: var(--hse-zone-tres_faible-solid); }
.hse-heatmap-cell.selected.zone-faible                  { background: var(--hse-zone-faible-cell-selected); border-color: var(--hse-zone-faible-solid); }
.hse-heatmap-cell.selected.zone-moyen                   { background: var(--hse-zone-moyen-cell-selected); border-color: var(--hse-zone-moyen-solid); }
.hse-heatmap-cell.selected.zone-eleve                   { background: var(--hse-zone-eleve-cell-selected); border-color: var(--hse-zone-eleve-solid); }
.hse-heatmap-cell.selected.zone-extreme                 { background: var(--hse-zone-extreme-cell-selected); border-color: var(--hse-zone-extreme-solid); }
.hse-heatmap-cell.selected                              { border-width: 2.5px; }
.hse-heatmap-cell.selected:hover                        { border-color: var(--t-1); }
/* Advance-block indicator — subtle dashed border emphasizes cells whose zone
   is in entity.advanceBlockZones (default: extreme only). Renders even when
   the cell isn't selected; selected state's solid border takes precedence. */
.hse-heatmap-cell.advance-block:not(.selected)          { border-color: var(--hse-zone-extreme-solid); border-style: dashed; }
/* Cell content layout: label up top (uppercase zone), big score centered,
   count label at bottom, white corner badge top-right when count > 0.
   Cell itself is flex column with space-between for the three text rows;
   the badge is absolutely positioned in the top-right corner. */
.hse-heatmap-cell { padding: 12px 14px; justify-content: space-between; overflow: hidden; }
.hse-heatmap-cell-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--t-1);
  line-height: 1.1;
  text-align: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hse-heatmap-cell-score {
  font-size: clamp(22px, 3.6vw, 34px);
  font-weight: 700;
  line-height: 1;
  color: var(--t-1);
  text-align: center;
}
.hse-heatmap-cell-count-label {
  font-size: 11px;
  color: var(--t-2);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* Empty cells: dim the score, hide the count-label fully (badge already
   omitted by render), keep the label visible so the zone is still readable. */
.hse-heatmap-cell.empty .hse-heatmap-cell-score { opacity: 0.32; }
.hse-heatmap-cell.empty .hse-heatmap-cell-count-label { visibility: hidden; }
/* Corner badge — perfect circle, white bg, bordered with the cell's zone
   solid color so the badge reads as "this zone, count = N". */
.hse-heatmap-cell-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  background: #ffffff;
  color: var(--t-1);
  border: 2px solid currentColor;  /* overridden per zone below */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  pointer-events: none;
}
[data-theme="dark"] .hse-heatmap-cell-badge {
  background: #f3f4f6;  /* near-white so it still pops against dark cells */
  color: #111827;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.hse-heatmap-cell.zone-tres_faible .hse-heatmap-cell-badge { border-color: var(--hse-zone-tres_faible-solid); }
.hse-heatmap-cell.zone-faible      .hse-heatmap-cell-badge { border-color: var(--hse-zone-faible-solid); }
.hse-heatmap-cell.zone-moyen       .hse-heatmap-cell-badge { border-color: var(--hse-zone-moyen-solid); }
.hse-heatmap-cell.zone-eleve       .hse-heatmap-cell-badge { border-color: var(--hse-zone-eleve-solid); }
.hse-heatmap-cell.zone-extreme     .hse-heatmap-cell-badge { border-color: var(--hse-zone-extreme-solid); }
.hse-clear-cell-btn { background: var(--bg-tint); border: 1px solid var(--border); padding: 5px 11px; font-size: 11.5px; border-radius: 6px; cursor: pointer; color: var(--t-2); }
.hse-clear-cell-btn:hover { background: var(--bg-hover); }

/* --- Filter strip --- */
.hse-filter-strip { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 10px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; }
.hse-filter-group { display: flex; align-items: center; gap: 6px; }
.hse-filter-label { font-size: 11.5px; color: var(--t-3); font-weight: 500; margin-right: 4px; }
.hse-filter-chip { padding: 4px 10px; font-size: 11px; font-weight: 500; color: var(--t-2); background: var(--bg-tint); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; }
.hse-filter-chip:hover { background: var(--bg-hover); }
.hse-filter-chip.active { background: var(--blue); color: white; border-color: var(--blue); }
.hse-filter-chip.hse-zone-tres_faible.active { background: var(--hse-zone-tres_faible-solid); border-color: var(--hse-zone-tres_faible-solid); color: white; }
.hse-filter-chip.hse-zone-faible.active      { background: var(--hse-zone-faible-solid);      border-color: var(--hse-zone-faible-solid);      color: white; }
.hse-filter-chip.hse-zone-moyen.active       { background: var(--hse-zone-moyen-solid);       border-color: var(--hse-zone-moyen-solid);       color: white; }
.hse-filter-chip.hse-zone-eleve.active       { background: var(--hse-zone-eleve-solid);       border-color: var(--hse-zone-eleve-solid);       color: white; }
.hse-filter-chip.hse-zone-extreme.active     { background: var(--hse-zone-extreme-solid);     border-color: var(--hse-zone-extreme-solid);     color: white; }

/* --- Risque list table --- */
.hse-risque-table-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.hse-risque-table { display: flex; flex-direction: column; }
.hse-risque-table-header, .hse-risque-row {
  display: grid;
  grid-template-columns: 110px 1fr 130px 130px 70px 130px 150px;
  gap: 12px; align-items: start; padding: 12px 16px;
}
.hse-risque-table-header { background: var(--bg-tint); font-size: 11px; font-weight: 600; color: var(--t-3); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border); padding-top: 9px; padding-bottom: 9px; }
.hse-risque-table-body { display: flex; flex-direction: column; }
.hse-risque-row { font-size: 12.5px; color: var(--t-2); border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.12s; }
.hse-risque-row:hover { background: var(--bg-tint); }
.hse-risque-row:last-child { border-bottom: 0; }
.hse-risque-cell-ref { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--t-3); padding-top: 2px; }
.hse-risque-name { font-weight: 600; color: var(--t-1); margin-bottom: 2px; }
.hse-risque-hazard { font-size: 11.5px; color: var(--t-3); margin-bottom: 2px; }
.hse-risque-site { font-size: 11px; color: var(--t-4); }
.hse-risque-cell-score strong { font-size: 14px; color: var(--t-1); }
.hse-bowtie-badge { display: inline-block; font-size: 13px; margin-left: 4px; color: var(--blue); }
/* intentional theme-invariant — vibrant red alert badge supplies own bg+fg */
.hse-overdue-badge { display: inline-block; background: var(--hse-tone-red); color: white; font-size: 9px; font-weight: 700; padding: 2px 5px; border-radius: 3px; margin-left: 4px; letter-spacing: 0.04em; }

.hse-empty { margin: 20px; }

/* --- Drawer --- */
.hse-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.42); display: none; z-index: 100; }
.hse-drawer-overlay.show { display: block; }
/* Stacked overlay (e.g. Incident drawer opened over an Investigation drawer
   via the "Incident parent" card). Sits above the base drawer; .show is
   applied implicitly because openIncidentDrawerInto adds it. */
.hse-drawer-overlay--stacked { display: block; z-index: 110; background: rgba(0,0,0,0.50); }
.hse-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 60%; min-width: 480px; max-width: 920px; background: var(--bg-card); border-left: 1px solid var(--border); display: flex; flex-direction: column; box-shadow: var(--shadow-xl); overflow: hidden; }
.hse-drawer-header { display: grid; grid-template-columns: auto 1fr auto auto; gap: 14px; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--border); background: var(--bg-card); }
.hse-drawer-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--hse-drawer-icon-bg); color: var(--hse-drawer-icon-fg); display: grid; place-items: center; }
.hse-drawer-name { font-size: 15px; font-weight: 700; color: var(--t-1); }
.hse-drawer-ref { font-size: 11.5px; color: var(--t-3); margin-top: 2px; }
.hse-drawer-chips { display: flex; gap: 6px; }
.hse-drawer-close { width: 30px; height: 30px; background: var(--bg-tint); border: 1px solid var(--border); border-radius: 8px; font-size: 20px; line-height: 1; cursor: pointer; color: var(--t-2); }
.hse-drawer-close:hover { background: var(--bg-hover); color: var(--t-1); }
.hse-drawer-actions-row { display: flex; gap: 8px; padding: 12px 24px; border-bottom: 1px solid var(--border); flex-wrap: wrap; background: var(--bg-tint); }
.hse-drawer-actions-row .btn { padding: 6px 12px; font-size: 12px; font-weight: 500; border-radius: 7px; cursor: pointer; border: 1px solid var(--border); color: var(--t-2); background: var(--bg-card); }
.hse-drawer-actions-row .btn.btn-secondary { background: var(--bg-card); color: var(--t-2); }
.hse-drawer-actions-row .btn:hover { background: var(--bg-hover); color: var(--t-1); border-color: var(--border-strong); }
.hse-drawer-body { flex: 1; overflow-y: auto; padding: 18px 24px 32px; }

.hse-drawer-section { padding: 16px 0; border-bottom: 1px solid var(--border); }
.hse-drawer-section:last-child { border-bottom: 0; }
.hse-drawer-section-title { font-size: 12px; font-weight: 700; color: var(--t-2); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 12px; }

.hse-label-value-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 22px; }
.hse-label-value { display: flex; flex-direction: column; gap: 2px; }
.hse-lv-label { font-size: 10.5px; color: var(--t-4); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; }
.hse-lv-value { font-size: 13px; color: var(--t-1); line-height: 1.5; }

/* --- Multi-axis tab strip --- */
.hse-axis-tab-strip { display: flex; gap: 4px; margin-bottom: 14px; overflow-x: auto; padding-bottom: 4px; }
.hse-axis-tab { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; padding: 9px 14px; font-size: 11.5px; font-weight: 500; color: var(--t-3); background: var(--bg-tint); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; min-width: 100px; }
.hse-axis-tab .hse-axis-tab-name { font-weight: 600; color: var(--t-2); }
.hse-axis-tab .hse-axis-tab-score, .hse-axis-tab .hse-axis-tab-empty { font-size: 16px; font-weight: 700; color: var(--t-1); margin-top: 2px; }
.hse-axis-tab .hse-axis-tab-empty { color: var(--t-4); }
.hse-axis-tab.active { background: var(--blue); border-color: var(--blue); }
.hse-axis-tab.active .hse-axis-tab-name, .hse-axis-tab.active .hse-axis-tab-score { color: white; }
.hse-axis-tab.unrated { opacity: 0.5; }

.hse-axis-content { display: flex; flex-direction: column; gap: 14px; }
.hse-axis-phase-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hse-mini-matrix { background: var(--bg-tint); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.hse-mini-matrix-label { font-size: 11px; color: var(--t-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.hse-mini-matrix-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; aspect-ratio: 1 / 1; max-width: 180px; margin-bottom: 8px; }
.hse-mini-cell { border-radius: 3px; }
.hse-mini-cell.zone-tres_faible { background: var(--hse-zone-tres_faible-bg-strong); }
.hse-mini-cell.zone-faible      { background: var(--hse-zone-faible-bg-strong); }
.hse-mini-cell.zone-moyen       { background: var(--hse-zone-moyen-bg-strong); }
.hse-mini-cell.zone-eleve       { background: var(--hse-zone-eleve-bg-strong); }
.hse-mini-cell.zone-extreme     { background: var(--hse-zone-extreme-bg-strong); }
.hse-mini-cell.hit { outline: 2px solid var(--t-1); outline-offset: -1px; transform: scale(1.05); z-index: 1; }
.hse-mini-matrix-readout { font-size: 12px; color: var(--t-2); }
.hse-mini-matrix-readout strong { color: var(--t-1); font-size: 14px; }

.hse-axis-summary-card { background: var(--bg-tint); border: 1px solid var(--border); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.hse-axis-summary-row { display: grid; grid-template-columns: 200px 1fr; gap: 12px; font-size: 12.5px; }

.hse-empty-state-inline { padding: 14px; background: var(--bg-tint); border: 1px dashed var(--border); border-radius: 8px; font-size: 12.5px; color: var(--t-3); }
.hse-empty-state-inline strong { color: var(--t-1); }
.hse-deferred-note { font-size: 11.5px; color: var(--t-4); margin: 8px 0 0; font-style: italic; }

/* --- Controls section --- */
.hse-controls-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.hse-control-card { background: var(--bg-tint); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.hse-control-card-head { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.hse-control-card-name { font-size: 12.5px; font-weight: 600; color: var(--t-1); margin-bottom: 4px; }
.hse-control-card-desc { font-size: 11.5px; color: var(--t-3); margin-bottom: 8px; }
.hse-control-card-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 10.5px; color: var(--t-4); }

/* --- Related stubs --- */
.hse-related-stubs { display: flex; flex-direction: column; gap: 6px; }
.hse-stub-item { display: grid; grid-template-columns: 160px 1fr; gap: 12px; font-size: 12px; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.hse-stub-item:last-child { border-bottom: 0; }
.hse-stub-label { color: var(--t-4); text-transform: uppercase; letter-spacing: 0.04em; font-size: 10.5px; font-weight: 500; }
.hse-stub-value { color: var(--t-3); }

/* --- Mobile breakpoints --- */
@media (max-width: 900px) {
  .hse-drawer { width: 92%; min-width: 0; }
  .hse-label-value-grid { grid-template-columns: 1fr; }
  .hse-axis-phase-pair { grid-template-columns: 1fr; }
  .hse-risque-table-header, .hse-risque-row { grid-template-columns: 80px 1fr 90px 100px; }
  .hse-risque-table-header > div:nth-child(n+5), .hse-risque-row > div:nth-child(n+5) { display: none; }
  /* Stacked layout has no parent stretch to drive matrix height — restore
     aspect-ratio so the matrix renders as a usable square based on its width. */
  .hse-heatmap-card-left .hse-heatmap-wrap,
  .hse-dashboard-heatmap-left .hse-heatmap-wrap { flex: 0 0 auto; min-height: 0; }
  .hse-heatmap-grid { height: auto; aspect-ratio: 1 / 1; max-width: 460px; }
}
@media (max-width: 480px) {
  .hse-heatmap-grid { max-width: 100%; }
  .hse-heatmap-cell { min-height: 44px; }
  .hse-heatmap-cell { padding: 8px 6px; }
  .hse-heatmap-cell-badge { width: 22px; height: 22px; font-size: 11px; top: 4px; right: 4px; border-width: 1.5px; }
  .hse-heatmap-cell-label { font-size: 9px; }
  .hse-heatmap-cell-count-label { font-size: 10px; }
  .hse-risques-layout { padding: 14px 12px; }
  .hse-drawer-header { padding: 14px 16px; grid-template-columns: 1fr; }
  .hse-drawer-icon { display: none; }
  .hse-drawer-body { padding: 14px 16px 24px; }
  .hse-axis-summary-row { grid-template-columns: 1fr; }
}

/* ===== HSE Dashboard sub-page (TASK 5) ===== */
.hse-dashboard-layout { padding: 20px 24px; display: flex; flex-direction: column; gap: 20px; }
.hse-dashboard-loading { padding: 60px; text-align: center; color: var(--t-3); font-size: 13px; }
.hse-dashboard-header h2 { font-size: 20px; font-weight: 700; color: var(--t-1); margin: 0 0 4px; }
.hse-dashboard-subtitle { font-size: 12.5px; color: var(--t-3); margin: 0; }
.hse-dashboard-section-title { font-size: 13px; font-weight: 700; color: var(--t-2); margin: 0 0 10px; }
.hse-dashboard-section-hint { font-size: 11px; color: var(--t-4); margin-top: 8px; font-style: italic; }

/* KPI tiles */
.hse-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.hse-kpi-tile { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; cursor: pointer; transition: all 0.15s; border-left: 4px solid var(--border); }
.hse-kpi-tile:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.hse-kpi-tile.tone-red    { border-left-color: var(--hse-tone-red); }
.hse-kpi-tile.tone-amber  { border-left-color: var(--hse-tone-amber); }
.hse-kpi-tile.tone-green  { border-left-color: var(--hse-tone-green); }
.hse-kpi-tile.tone-neutral { border-left-color: var(--blue); }
.hse-kpi-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.hse-kpi-label { font-size: 11px; color: var(--t-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.hse-kpi-ds-badge { font-size: 9px; padding: 2px 6px; border-radius: 4px; font-weight: 700; letter-spacing: 0.04em; }
.hse-kpi-ds-badge.live      { background: var(--hse-ds-live-bg); color: var(--hse-ds-live-fg); }
.hse-kpi-ds-badge.estimated { background: var(--hse-ds-est-bg);  color: var(--hse-ds-est-fg); }
.hse-kpi-ds-badge.na        { background: var(--hse-ds-na-bg);   color: var(--hse-ds-na-fg); }
.hse-kpi-value { font-size: 30px; font-weight: 700; color: var(--t-1); line-height: 1.1; margin-bottom: 4px; }
.hse-kpi-sub { font-size: 11px; color: var(--t-3); line-height: 1.4; }

/* Heatmap section (re-uses .hse-heatmap-* from risques) — 50/50 split shared
   with Risques via .hse-heatmap-card-grid / .hse-dashboard-heatmap-grid above */
.hse-dashboard-heatmap-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; }
.hse-heatmap-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.hse-heatmap-section-head .hse-dashboard-section-title { margin: 0; }
.hse-dashboard-heatmap-left .hse-axis-pills { margin-bottom: 12px; }

/* Top 5 critical risks (right half) */
.hse-top-critical-card { display: flex; flex-direction: column; gap: 8px; }
.hse-top-critical-list { display: flex; flex-direction: column; gap: 6px; }
.hse-top-critical-row {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  gap: 12px; align-items: center;
  padding: 9px 12px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.hse-top-critical-row:hover { background: var(--bg-hover); border-color: var(--border-strong); transform: translateX(-1px); }
.hse-top-critical-ref { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--t-3); font-weight: 600; }
.hse-top-critical-main { min-width: 0; }
.hse-top-critical-name { font-size: 12.5px; font-weight: 600; color: var(--t-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hse-top-critical-hazard { font-size: 11px; color: var(--t-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.hse-top-critical-rhs { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.hse-top-critical-score { font-size: 13px; font-weight: 700; color: var(--t-1); line-height: 1; }
.hse-top-critical-drill {
  align-self: stretch;
  margin-top: 2px;
  padding: 7px 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--blue);
  background: var(--blue-tint);
  border: 1px solid var(--blue-soft);
  border-radius: 7px;
  cursor: pointer;
  text-align: center;
  transition: all 0.12s;
}
.hse-top-critical-drill:hover { background: var(--blue-soft); border-color: var(--blue); }

/* Row 3 */
.hse-dashboard-row3 { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
.hse-trend-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; }
.hse-trend-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.hse-trend-mode-toggle { display: flex; gap: 4px; }
.hse-trend-mode { padding: 4px 10px; font-size: 11px; font-weight: 500; background: var(--bg-tint); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; color: var(--t-2); }
.hse-trend-mode:hover { background: var(--bg-hover); }
.hse-trend-mode.active { background: var(--blue); color: white; border-color: var(--blue); }
.hse-trend-chart-wrap { width: 100%; overflow-x: auto; }
.hse-trend-svg { width: 100%; max-width: 580px; height: auto; display: block; }
.hse-trend-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: 11px; color: var(--t-3); }
.hse-trend-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.hse-trend-legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }

.hse-leading-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; }
.hse-leading-cards { display: flex; flex-direction: column; gap: 10px; }
.hse-leading-card { background: var(--bg-tint); border-radius: 10px; padding: 12px 14px; }
.hse-leading-card-empty { opacity: 0.7; }
.hse-leading-value { font-size: 22px; font-weight: 700; color: var(--t-1); line-height: 1; }
.hse-leading-label { font-size: 11.5px; color: var(--t-3); margin-top: 4px; }
.hse-leading-empty-note { font-size: 10px; color: var(--t-4); margin-top: 4px; font-style: italic; }

/* Row 4 */
.hse-dashboard-row4 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hse-patterns-wrap, .hse-action-queue-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; }

.hse-patterns-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hse-pattern-item { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 8px; background: var(--bg-tint); border-radius: 8px; font-size: 12.5px; }
.hse-pattern-rank { width: 22px; height: 22px; background: var(--blue); color: white; font-weight: 700; font-size: 11px; border-radius: 50%; display: grid; place-items: center; }
.hse-pattern-label { color: var(--t-1); font-weight: 500; text-transform: capitalize; }
.hse-pattern-count { color: var(--t-3); font-size: 11px; }

.hse-action-section { margin-bottom: 12px; }
.hse-action-section-head { font-size: 11.5px; color: var(--t-2); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 6px; }
.hse-action-item { padding: 8px 10px; background: var(--bg-tint); border: 1px solid transparent; border-radius: 7px; margin-bottom: 5px; transition: background 0.12s, border-color 0.12s, transform 0.12s; }
.hse-action-item-clickable { cursor: pointer; }
.hse-action-item-clickable:hover { background: var(--bg-hover); border-color: var(--border-strong); transform: translateX(-1px); }
.hse-action-ref { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; color: var(--t-4); }
.hse-action-name { font-size: 12.5px; color: var(--t-1); margin: 2px 0; }
.hse-action-date { font-size: 11px; color: var(--t-3); }

/* OSH §82 sidecar — intentional theme-invariant red border/icon/title for legal alert */
.hse-osh82-sidecar { background: var(--bg-card); border: 2px solid var(--hse-tone-red); border-radius: 12px; padding: 16px 20px; }
.hse-osh82-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.hse-osh82-icon { color: var(--hse-tone-red); }
.hse-osh82-title h3 { font-size: 14px; font-weight: 700; color: var(--hse-tone-red); margin: 0; }
.hse-osh82-title p { font-size: 11.5px; color: var(--t-3); margin: 2px 0 0; }
.hse-osh82-rows { display: flex; flex-direction: column; gap: 8px; }
.hse-osh82-row { display: grid; grid-template-columns: 130px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; background: var(--hse-osh82-row-bg); border: 1px solid var(--hse-osh82-row-border); border-radius: 8px; cursor: pointer; }
.hse-osh82-row:hover { background: var(--hse-osh82-row-bg-hover); }
.hse-osh82-ref { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--hse-osh82-row-ref-fg); font-weight: 600; }
.hse-osh82-name { font-size: 12.5px; color: var(--t-1); font-weight: 500; }
.hse-osh82-meta { display: flex; gap: 14px; font-size: 11px; color: var(--t-3); align-items: center; }
.hse-osh82-badge { padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; }
/* intentional theme-invariant — urgency badges supply own bg+fg */
.hse-osh82-badge.overdue { background: var(--hse-tone-red); color: white; }
.hse-osh82-badge.urgent  { background: var(--hse-tone-amber); color: white; }
.hse-osh82-badge.pending { background: #fbbf24; color: #78350f; }

/* Dashboard mobile */
@media (max-width: 900px) {
  .hse-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .hse-dashboard-row3 { grid-template-columns: 1fr; }
  .hse-dashboard-row4 { grid-template-columns: 1fr; }
  .hse-osh82-row { grid-template-columns: 1fr; }
  .hse-osh82-meta { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .hse-kpi-row { grid-template-columns: 1fr; }
  .hse-dashboard-layout { padding: 14px 12px; }
}

/* ============================================================================
   HSE — Signalements / Investigations / Incidents sub-pages (v1.2)
   Shared primitives (collapsible drawer sections, date inputs in filter strip)
   then per-page styles. Pattern mirrors Risques.
   ============================================================================ */

/* Shared: collapsible drawer section. Click the title to toggle. */
.hse-drawer-section .hse-drawer-section-title { cursor: pointer; user-select: none; }
.hse-drawer-section .hse-drawer-section-title::after {
  content: '▾'; font-size: 11px; margin-left: 8px; color: var(--t-3);
  transition: transform 0.15s; display: inline-block;
}
.hse-drawer-section.collapsed .hse-drawer-section-title::after { transform: rotate(-90deg); }
.hse-drawer-section.collapsed > *:not(.hse-drawer-section-title) { display: none; }
.hse-drawer-subhead { font-size: 12px; font-weight: 600; color: var(--t-2); margin: 12px 0 6px; letter-spacing: 0.02em; }
.hse-drawer-section-hint { font-size: 12px; color: var(--t-3); margin: 6px 0 12px; }

/* Shared: date inputs inside the filter strip. */
.hse-filter-group-dates .hse-filter-date {
  padding: 4px 10px; font-size: 11px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--bg-tint); color: var(--t-2);
  font-family: inherit; min-width: 200px;
}
.hse-filter-group-dates .hse-filter-date:hover { background: var(--bg-hover); }
.hse-filter-group-dates .hse-filter-date:focus { outline: none; border-color: var(--blue); background: var(--bg-card); }

/* ============================================================================
   Signalements sub-page
   ============================================================================ */

.hse-sig-layout { padding: 20px 24px; display: flex; flex-direction: column; gap: 18px; }
.hse-sig-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.hse-sig-title h2 { font-size: 18px; font-weight: 700; color: var(--t-1); }
.hse-sig-subtitle { font-size: 12.5px; color: var(--t-3); margin-top: 4px; max-width: 700px; }

/* Bucket summary strip — 5 tiles. "pending" gets a red dot when count > 0; "dismissed" dimmed by default. */
.hse-sig-bucket-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.hse-sig-bucket-tile {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 6px;
  text-align: left; cursor: pointer; transition: all 0.15s; min-width: 0;
}
.hse-sig-bucket-tile:hover { border-color: var(--t-2); transform: translateY(-1px); }
.hse-sig-bucket-tile.dim { opacity: 0.65; }
.hse-sig-bucket-tile.dim:hover { opacity: 1; }
.hse-sig-bucket-tile-head { display: flex; align-items: center; gap: 6px; }
.hse-sig-bucket-tile-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--t-2); }
.hse-sig-bucket-tile-count { font-size: 24px; font-weight: 700; color: var(--t-1); line-height: 1; }
.hse-sig-bucket-tile-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--red);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.22);
  animation: hseSigDotPulse 1.6s ease-in-out infinite;
}
@keyframes hseSigDotPulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.55; }
}
.hse-sig-bucket-tile.alert { border-color: var(--red); background: rgba(220, 38, 38, 0.06); }
.hse-sig-bucket-tile.active { border-width: 2px; }
.hse-sig-bucket-tile.active.hse-sig-bucket-tile--pending     { background: rgba(245, 158, 11, 0.18); border-color: var(--amber); }
.hse-sig-bucket-tile.active.hse-sig-bucket-tile--maintenance { background: rgba(37, 99, 235, 0.18); border-color: var(--blue); }
.hse-sig-bucket-tile.active.hse-sig-bucket-tile--nc          { background: rgba(20, 184, 166, 0.18); border-color: var(--teal-soft); }
.hse-sig-bucket-tile.active.hse-sig-bucket-tile--incident    { background: rgba(220, 38, 38, 0.18); border-color: var(--red); }
.hse-sig-bucket-tile.active.hse-sig-bucket-tile--dismissed   { background: var(--bg-tint-2); }
[data-theme="dark"] .hse-sig-bucket-tile.alert { background: rgba(239, 68, 68, 0.10); }

/* Reporter cell — anonymous badge + avatar+name composition. */
.hse-sig-anon-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px;
  background: var(--bg-tint-2); color: var(--t-2); border-radius: 999px;
  font-size: 10.5px; font-weight: 600; border: 1px dashed var(--border-strong);
}
.hse-sig-reporter { display: inline-flex; align-items: center; gap: 6px; }
.hse-sig-avatar {
  width: 22px; height: 22px; border-radius: 50%; background: var(--gradient);
  color: white; display: grid; place-items: center; font-size: 9.5px; font-weight: 700;
  letter-spacing: -0.02em; flex-shrink: 0;
}
.hse-sig-reporter-name { font-size: 11.5px; color: var(--t-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Signalements list table */
.hse-sig-table { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.hse-sig-table-header,
.hse-sig-row { display: grid; grid-template-columns: 90px 100px 36px minmax(0, 1.2fr) 90px minmax(0, 1.4fr) 120px; gap: 10px; align-items: center; padding: 10px 16px; }
.hse-sig-table-header { font-size: 11px; font-weight: 600; color: var(--t-3); text-transform: uppercase; letter-spacing: 0.04em; background: var(--bg-tint); border-bottom: 1px solid var(--border); }
.hse-sig-row { border-bottom: 1px solid var(--border-soft); cursor: pointer; transition: background 0.12s; }
.hse-sig-row:last-child { border-bottom: none; }
.hse-sig-row:hover { background: var(--bg-tint); }
.hse-sig-cell-ref { font-size: 11.5px; font-weight: 700; color: var(--t-1); font-variant-numeric: tabular-nums; }
.hse-sig-cell-when { font-size: 11.5px; color: var(--t-2); }
.hse-sig-cell-when-abs { font-size: 10px; color: var(--t-4); font-variant-numeric: tabular-nums; }
.hse-sig-cell-channel { color: var(--t-3); display: flex; align-items: center; justify-content: center; }
.hse-sig-cell-location { font-size: 11.5px; color: var(--t-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hse-sig-cell-site { font-size: 10px; color: var(--t-4); }

/* Drawer body — signalement-specific */
.hse-sig-description { font-size: 13px; color: var(--t-1); line-height: 1.5; padding: 4px 0 8px; }
.hse-sig-attachments { padding-top: 10px; }
.hse-sig-attachment-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.hse-sig-attachment-placeholder {
  padding: 12px 14px; background: var(--bg-tint); border: 1px dashed var(--border-strong);
  border-radius: 8px; color: var(--t-3); font-size: 11.5px;
}
.hse-sig-triage-already {
  padding: 12px 14px; background: var(--bg-tint); border: 1px solid var(--border);
  border-radius: 8px; color: var(--t-2); font-size: 12.5px;
}
.hse-sig-triage-row { display: flex; gap: 12px; flex-wrap: wrap; }
.hse-sig-triage-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; font-size: 12.5px; font-weight: 600;
  background: transparent; border: 1.5px solid currentColor; border-radius: 8px;
  cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.hse-sig-triage-btn svg { stroke-width: 2; flex-shrink: 0; }
.hse-sig-triage-btn--maintenance { color: var(--blue); }
.hse-sig-triage-btn--nc          { color: #0f766e; }
.hse-sig-triage-btn--incident    { color: var(--red); }
.hse-sig-triage-btn--dismiss     { color: var(--t-3); }
[data-theme="dark"] .hse-sig-triage-btn--nc { color: #5eead4; }
/* hover: filled with the button's own zone color; text + icon flip to white */
.hse-sig-triage-btn--maintenance:hover { background: var(--blue);  border-color: var(--blue);  color: white; }
.hse-sig-triage-btn--nc:hover          { background: #0f766e;      border-color: #0f766e;      color: white; }
.hse-sig-triage-btn--incident:hover    { background: var(--red);   border-color: var(--red);   color: white; }
.hse-sig-triage-btn--dismiss:hover     { background: var(--t-3);   border-color: var(--t-3);   color: white; }
[data-theme="dark"] .hse-sig-triage-btn--nc:hover { background: #14b8a6; border-color: #14b8a6; }

.hse-sig-routed-card,
.hse-sig-rejected-card {
  padding: 14px 16px; background: var(--bg-tint); border: 1px solid var(--border); border-radius: 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.hse-sig-routed-line { display: flex; gap: 12px; align-items: center; font-size: 12px; }
.hse-sig-routed-line .hse-lv-label { min-width: 110px; color: var(--t-3); font-size: 11px; }

/* History timeline */
.hse-sig-history { display: flex; flex-direction: column; gap: 8px; }
.hse-sig-history-item { display: flex; gap: 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed var(--border-soft); }
.hse-sig-history-item:last-child { border-bottom: none; }
.hse-sig-history-when { font-size: 10.5px; color: var(--t-3); font-variant-numeric: tabular-nums; min-width: 100px; }
.hse-sig-history-label { font-size: 12px; color: var(--t-2); }

/* Triage / dismiss confirmation modal — overlays the drawer overlay. */
.hse-sig-confirm-modal {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.45); z-index: 10; padding: 24px;
}
.hse-sig-confirm-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 20px 24px; width: 100%; max-width: 420px;
  display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-lg);
}
.hse-sig-confirm-card.danger { border-color: var(--red); }
.hse-sig-confirm-card h3 { font-size: 15px; font-weight: 700; color: var(--t-1); }
.hse-sig-confirm-card p { font-size: 12.5px; color: var(--t-2); line-height: 1.5; }
.hse-sig-confirm-label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--t-2); }
.hse-sig-confirm-label textarea {
  font-family: inherit; font-size: 12.5px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--bg-tint); color: var(--t-1);
  resize: vertical;
}
.hse-sig-confirm-row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }

@media (max-width: 980px) {
  .hse-sig-bucket-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .hse-sig-bucket-tile { padding: 10px; }
  .hse-sig-bucket-tile-count { font-size: 20px; }
  .hse-sig-table-header,
  .hse-sig-row { grid-template-columns: 80px 90px 28px minmax(0, 1fr) 80px minmax(0, 1fr) 100px; gap: 8px; padding: 10px 12px; }
}
@media (max-width: 720px) {
  .hse-sig-bucket-strip { grid-template-columns: repeat(2, 1fr); }
  .hse-sig-table-header { display: none; }
  .hse-sig-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ============================================================================
   Investigations sub-page
   ============================================================================ */

.hse-inv-layout { padding: 20px 24px; display: flex; flex-direction: column; gap: 18px; }
.hse-inv-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.hse-inv-title h2 { font-size: 18px; font-weight: 700; color: var(--t-1); }
.hse-inv-subtitle { font-size: 12.5px; color: var(--t-3); margin-top: 4px; max-width: 700px; }

/* Investigator avatar + name */
.hse-inv-investigator { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.hse-inv-avatar {
  width: 22px; height: 22px; border-radius: 50%; background: var(--gradient);
  color: white; display: grid; place-items: center; font-size: 9.5px; font-weight: 700;
  letter-spacing: -0.02em; flex-shrink: 0;
}
.hse-inv-avatar.hse-inv-avatar--empty { background: var(--bg-tint-2); color: var(--t-3); }
.hse-inv-investigator-name { font-size: 11.5px; color: var(--t-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Progress ring — SVG circle + centered numeric percentage */
.hse-inv-progress-ring {
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; width: 32px; height: 32px;
}
.hse-inv-progress-ring--green { color: var(--green, #16a34a); }
.hse-inv-progress-ring--amber { color: var(--amber, #f59e0b); }
.hse-inv-progress-ring--red   { color: var(--red,   #dc2626); }
.hse-inv-progress-pct {
  position: absolute; font-weight: 700;
  color: var(--t-1); font-variant-numeric: tabular-nums;
}
.hse-inv-progress-block { display: inline-flex; align-items: center; gap: 12px; }
.hse-inv-progress-block-text { display: flex; flex-direction: column; gap: 2px; line-height: 1; text-align: right; }
.hse-inv-progress-block-title { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--t-3); text-transform: uppercase; }
.hse-inv-progress-block-value { font-size: 14px; font-weight: 600; color: var(--t-1); }

/* List table */
.hse-inv-table { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.hse-inv-table-header,
.hse-inv-row { display: grid; grid-template-columns: 90px minmax(0, 1.4fr) 96px minmax(0, 1.2fr) 90px 72px 90px 60px; gap: 10px; align-items: center; padding: 10px 16px; }
.hse-inv-table-header { font-size: 11px; font-weight: 600; color: var(--t-3); text-transform: uppercase; letter-spacing: 0.04em; background: var(--bg-tint); border-bottom: 1px solid var(--border); }
.hse-inv-row { border-bottom: 1px solid var(--border-soft); cursor: pointer; transition: background 0.12s; }
.hse-inv-row:last-child { border-bottom: none; }
.hse-inv-row:hover { background: var(--bg-tint); }
.hse-inv-cell-ref { font-size: 11.5px; font-weight: 700; color: var(--t-1); font-variant-numeric: tabular-nums; }
/* EP3: parent-incident cell is plain text (no link styling). Drill into parent
   happens via the drawer's "Incident parent" clickable card, not from the row. */
.hse-inv-cell-parent { min-width: 0; pointer-events: none; }
.hse-inv-parent-ref { font-size: 11.5px; color: var(--t-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.hse-inv-parent-name { font-size: 10.5px; color: var(--t-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hse-inv-cell-started { font-size: 11px; color: var(--t-2); font-variant-numeric: tabular-nums; }
.hse-inv-cell-days { font-size: 11px; color: var(--t-2); font-variant-numeric: tabular-nums; }

/* Drawer extras */
.hse-inv-drawer-progress { margin-left: auto; display: inline-flex; align-items: center; }

/* Methodology pill — segmented control (also used in "Nouvelle enquête" modal) */
.hse-inv-meth-pill {
  display: inline-flex; padding: 4px; gap: 4px;
  background: var(--bg-tint); border: 1px solid var(--border); border-radius: 999px;
  width: fit-content;
}
.hse-inv-methodology-pill {
  display: inline-flex; padding: 4px; gap: 4px; margin: 12px 24px 0;
  background: var(--bg-tint); border: 1px solid var(--border); border-radius: 999px;
  width: fit-content;
}
.hse-inv-methodology-pill-btn {
  padding: 6px 16px; font-size: 12px; font-weight: 600; color: var(--t-3);
  background: transparent; border: none; border-radius: 999px;
  cursor: pointer; transition: all 0.15s;
}
.hse-inv-methodology-pill-btn:hover { color: var(--t-1); }
.hse-inv-methodology-pill-btn.active { background: var(--bg-card); color: var(--t-1); box-shadow: var(--shadow-sm); }

/* Parent incident link (inside drawer Identité) */
.hse-inv-parent-link {
  background: var(--bg-tint); border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 10px; font-size: 11.5px; color: var(--blue); font-weight: 600;
  cursor: pointer;
}
.hse-inv-parent-link:hover { background: var(--bg-hover); }

/* 5 Pourquoi panel */
.hse-inv-fivewhys { display: flex; flex-direction: column; gap: 10px; }
.hse-inv-fivewhys-row { display: flex; flex-direction: column; gap: 4px; }
.hse-inv-fivewhys-label { font-size: 11.5px; font-weight: 600; color: var(--t-2); }
.hse-inv-fivewhys-input,
.hse-inv-shared-input,
.hse-inv-itamami-narrative {
  font-family: inherit; font-size: 12.5px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-tint); color: var(--t-1); resize: vertical; line-height: 1.4;
}
.hse-inv-fivewhys-input:focus,
.hse-inv-shared-input:focus,
.hse-inv-itamami-narrative:focus {
  outline: none; border-color: var(--blue); background: var(--bg-card);
}

/* ITAMaMi panel */
.hse-inv-itamami { display: flex; flex-direction: column; gap: 14px; }
.hse-inv-itamami-axis {
  padding: 12px 14px; background: var(--bg-tint); border: 1px solid var(--border-soft);
  border-radius: 8px; display: flex; flex-direction: column; gap: 8px;
}
.hse-inv-itamami-axis-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hse-inv-itamami-axis-label { font-size: 13px; font-weight: 700; color: var(--t-1); }
.hse-inv-itamami-axis-hint { font-size: 11px; color: var(--t-3); }
.hse-inv-itamami-sev-row { display: flex; align-items: center; gap: 10px; }
.hse-inv-itamami-sev-label { font-size: 11px; color: var(--t-3); white-space: nowrap; }
.hse-inv-itamami-sev { flex: 1 1 auto; max-width: 220px; accent-color: var(--blue); }
.hse-inv-itamami-sev-value { font-size: 11.5px; font-weight: 600; color: var(--t-2); min-width: 90px; }

/* Shared fields */
.hse-inv-shared-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.hse-inv-shared-label { font-size: 11.5px; font-weight: 600; color: var(--t-2); }

/* Notes feed */
.hse-inv-notes-feed { margin-top: 16px; }
.hse-inv-notes-list { display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; padding-right: 6px; }
.hse-inv-note { padding: 8px 10px; background: var(--bg-tint); border-left: 3px solid var(--blue); border-radius: 4px; }
.hse-inv-note-meta { display: flex; gap: 8px; font-size: 10.5px; color: var(--t-3); margin-bottom: 2px; }
.hse-inv-note-author { font-weight: 600; color: var(--t-2); }
.hse-inv-note-when { font-variant-numeric: tabular-nums; }
.hse-inv-note-text { font-size: 12px; color: var(--t-1); line-height: 1.45; }
.hse-inv-note-add { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.hse-inv-note-add textarea {
  font-family: inherit; font-size: 12.5px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-tint); color: var(--t-1); resize: vertical;
}
.hse-inv-note-add textarea:focus { outline: none; border-color: var(--blue); background: var(--bg-card); }
.hse-inv-note-add .btn { align-self: flex-start; }

/* Related records grid */
.hse-inv-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.hse-inv-related-card {
  padding: 12px 14px; background: var(--bg-tint); border: 1px solid var(--border); border-radius: 8px;
  display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer;
}
.hse-inv-related-card:hover { background: var(--bg-hover); }
.hse-inv-related-card-label { font-size: 11px; font-weight: 600; color: var(--t-3); }
.hse-inv-related-card-value { font-size: 12.5px; color: var(--t-1); }

@media (max-width: 980px) {
  .hse-inv-table-header,
  .hse-inv-row { grid-template-columns: 80px minmax(0, 1fr) 80px minmax(0, 1fr) 70px 56px 70px 50px; gap: 6px; padding: 8px 12px; }
}
@media (max-width: 720px) {
  .hse-inv-table-header { display: none; }
  .hse-inv-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ============================================================================
   Incidents sub-page — I1 shell (tab strip + stub tab body)
   Tabs use the existing global .tabs / .tab classes. Per-tab content styling
   lives in subsequent I2–I5 commits.
   ============================================================================ */

.hse-inc-layout { padding: 20px 24px; display: flex; flex-direction: column; gap: 18px; }
.hse-inc-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.hse-inc-title h2 { font-size: 18px; font-weight: 700; color: var(--t-1); }
.hse-inc-subtitle { font-size: 12.5px; color: var(--t-3); margin-top: 4px; max-width: 720px; }

.hse-inc-tabs { margin: 0 0 4px; }  /* tighter than global .tabs default since the page header has its own margin */

.hse-inc-tab-body {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  min-height: 320px;
}

/* Per-tab placeholder card (replaced by real bodies in I2-I5). */
.hse-inc-tab-stub { padding: 40px 32px; text-align: center; }
.hse-inc-tab-stub h3 { font-size: 15px; font-weight: 700; color: var(--t-1); margin-bottom: 6px; }
.hse-inc-tab-stub p { font-size: 12.5px; color: var(--t-3); margin: 4px auto; max-width: 480px; }
.hse-inc-tab-stub-ref { font-size: 10.5px; color: var(--t-4); margin-top: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ============================================================================
   Incidents — Tab 1 (Tableau de bord): mini 4×4 heatmap + leading/lagging
   ============================================================================ */

.hse-inc-dashboard { padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.hse-inc-mini-heatmap-card { background: var(--bg-tint); border: 1px solid var(--border); border-radius: 10px; padding: 16px 20px; }

/* 4×4 grid with axis tick rows on left + bottom. corner is empty top-left. */
.hse-inc-mini-heatmap-wrap {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 1fr auto;
  gap: 8px;
  margin-top: 12px;
}
.hse-inc-mini-corner { grid-column: 1; grid-row: 2; }
.hse-inc-mini-y-ticks {
  grid-column: 1; grid-row: 1;
  display: grid; grid-template-rows: repeat(4, 1fr); gap: 4px;
  padding-right: 8px;
}
.hse-inc-mini-x-ticks {
  grid-column: 2; grid-row: 2;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  padding-top: 8px;
}
.hse-inc-mini-tick {
  font-size: 10.5px; color: var(--t-3); text-align: center;
  display: flex; align-items: center; justify-content: center; line-height: 1.2;
}
.hse-inc-mini-tick--y { justify-content: flex-end; text-align: right; }

.hse-inc-mini-grid {
  grid-column: 2; grid-row: 1;
  display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr);
  gap: 4px; min-height: 240px;
}
.hse-inc-mini-cell {
  position: relative; border: 1px solid var(--border-soft); border-radius: 6px;
  cursor: pointer; transition: transform 0.12s, border-color 0.12s;
  display: grid; place-items: center;
  background: var(--bg-card);
}
.hse-inc-mini-cell:hover { transform: scale(1.03); border-color: var(--t-1); z-index: 1; }
.hse-inc-mini-cell--empty { background: var(--bg-tint-2); opacity: 0.55; }
.hse-inc-mini-cell--low   { background: rgba(220, 38, 38, 0.18); }
.hse-inc-mini-cell--mid   { background: rgba(220, 38, 38, 0.42); }
.hse-inc-mini-cell--high  { background: rgba(220, 38, 38, 0.66); color: white; }
[data-theme="dark"] .hse-inc-mini-cell--low  { background: rgba(248, 113, 113, 0.24); }
[data-theme="dark"] .hse-inc-mini-cell--mid  { background: rgba(248, 113, 113, 0.45); }
[data-theme="dark"] .hse-inc-mini-cell--high { background: rgba(248, 113, 113, 0.70); color: white; }
.hse-inc-mini-count { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: inherit; }
.hse-inc-mini-cell--high .hse-inc-mini-count { color: white; }

/* Leading/lagging strip — 4 tiles */
.hse-inc-leading-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.hse-inc-ll-tile {
  background: var(--bg-tint); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 6px;
  text-align: left; cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.hse-inc-ll-tile:hover { border-color: var(--t-2); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.hse-inc-ll-tile.alert { border-color: var(--red); background: rgba(220, 38, 38, 0.06); }
[data-theme="dark"] .hse-inc-ll-tile.alert { background: rgba(239, 68, 68, 0.10); }
.hse-inc-ll-label { font-size: 11px; font-weight: 600; color: var(--t-3); letter-spacing: 0.02em; }
.hse-inc-ll-value { font-size: 26px; font-weight: 700; color: var(--t-1); font-variant-numeric: tabular-nums; line-height: 1; }
.hse-inc-ll-tile.alert .hse-inc-ll-value { color: var(--red); }

@media (max-width: 900px) {
  .hse-inc-mini-heatmap-wrap { grid-template-columns: 140px 1fr; }
  .hse-inc-leading-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .hse-inc-mini-heatmap-wrap { grid-template-columns: 100px 1fr; gap: 4px; }
  .hse-inc-mini-tick { font-size: 9.5px; }
  .hse-inc-mini-count { font-size: 16px; }
}

/* IP4 — Incident-specific KPI strip (3 tiles above mini-heatmap on Dashboard tab) */
.hse-inc-incident-kpi-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.hse-inc-incident-kpi-tile {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 6px;
}
.hse-inc-incident-kpi-tile .hse-inc-ll-label { font-size: 11px; font-weight: 600; color: var(--t-3); letter-spacing: 0.02em; }
.hse-inc-incident-kpi-tile .hse-inc-ll-value { font-size: 28px; font-weight: 700; color: var(--t-1); font-variant-numeric: tabular-nums; line-height: 1; }
.hse-inc-incident-kpi-tile .hse-inc-ll-sub { font-size: 11px; color: var(--t-3); line-height: 1.4; }

/* Dashboard grid — mini-heatmap (1fr) + trend chart (2fr) side by side */
.hse-inc-dashboard-grid {
  display: grid; grid-template-columns: 1fr 1.6fr; gap: 16px; align-items: stretch;
}
.hse-inc-trend-card {
  background: var(--bg-tint); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 20px; display: flex; flex-direction: column;
}
.hse-inc-trend-svg-wrap { flex: 1 1 auto; min-height: 180px; color: var(--t-2); margin: 8px 0; }
.hse-inc-trend-col-hit { transition: opacity 0.12s; }
.hse-inc-trend-col:hover .hse-inc-trend-col-hit { fill: var(--bg-hover); fill-opacity: 0.6; }
.hse-inc-trend-legend { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; border-top: 1px solid var(--border-soft); }
.hse-inc-trend-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--t-2); }
.hse-inc-trend-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

@media (max-width: 980px) {
  .hse-inc-incident-kpi-strip { grid-template-columns: 1fr; }
  .hse-inc-dashboard-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   Incidents — Tab 2 (Déclarations): list + drawer w/ §82 workflow
   ============================================================================ */

.hse-inc-declarations { padding: 20px; display: flex; flex-direction: column; gap: 14px; }

/* Person-category badge — distinct from pill chips so the row composition reads:
   eventClass = colored pill ; personCategory = neutral outlined badge. */
.hse-inc-pc-badge {
  display: inline-flex; align-items: center; padding: 2px 8px;
  font-size: 10.5px; font-weight: 600; color: var(--t-2);
  background: var(--bg-tint-2); border: 1px solid var(--border-strong);
  border-radius: 6px;
}

/* OSH §82 badge — red dot variants */
.hse-inc-notif-badge {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px;
  font-size: 10px; font-weight: 700; border-radius: 999px;
}
.hse-inc-notif-badge.pending  { background: rgba(245, 158, 11, 0.18); color: #b45309; }
.hse-inc-notif-badge.overdue  { background: rgba(220, 38, 38, 0.22); color: #991b1b; animation: hseSigDotPulse 1.6s infinite; }
.hse-inc-notif-badge.sent     { background: rgba(22, 163, 74, 0.18); color: #15803d; }
[data-theme="dark"] .hse-inc-notif-badge.pending { color: #fcd34d; }
[data-theme="dark"] .hse-inc-notif-badge.overdue { color: #fca5a5; }
[data-theme="dark"] .hse-inc-notif-badge.sent    { color: #86efac; }

/* Incidents list table — Déclarations tab */
.hse-inc-table { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.hse-inc-table-header,
.hse-inc-row { display: grid; grid-template-columns: 90px 130px 100px 80px 100px minmax(0, 1fr) minmax(0, 1.2fr) 80px 56px; gap: 10px; align-items: center; padding: 10px 16px; }
.hse-inc-table-header { font-size: 11px; font-weight: 600; color: var(--t-3); text-transform: uppercase; letter-spacing: 0.04em; background: var(--bg-tint); border-bottom: 1px solid var(--border); }
.hse-inc-row { border-bottom: 1px solid var(--border-soft); cursor: pointer; transition: background 0.12s; }
.hse-inc-row:last-child { border-bottom: none; }
.hse-inc-row:hover { background: var(--bg-tint); }
.hse-inc-cell-ref { font-size: 11.5px; font-weight: 700; color: var(--t-1); font-variant-numeric: tabular-nums; }
.hse-inc-cell-when { font-size: 11.5px; color: var(--t-2); }
.hse-inc-cell-when-abs { font-size: 10px; color: var(--t-4); font-variant-numeric: tabular-nums; }
.hse-inc-cell-reporter { font-size: 11.5px; color: var(--t-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hse-inc-cell-location { font-size: 11.5px; color: var(--t-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hse-inc-cell-site { font-size: 10px; color: var(--t-4); }
.hse-inc-cell-notif { display: flex; align-items: center; justify-content: center; }

/* Drawer body — two-axis classification block */
.hse-inc-twoaxis { display: flex; flex-direction: column; gap: 12px; }
.hse-inc-twoaxis-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hse-inc-twoaxis-axis { font-size: 11px; color: var(--t-3); font-weight: 600; min-width: 130px; text-transform: uppercase; letter-spacing: 0.04em; }
.hse-inc-twoaxis-hint { font-size: 11.5px; color: var(--t-3); flex: 1 1 240px; }

/* §82 notification card */
.hse-inc-82-card {
  padding: 14px 16px; background: var(--bg-tint); border: 1px solid var(--border); border-radius: 8px;
}
.hse-inc-82-card.overdue { border-color: var(--red); background: rgba(220, 38, 38, 0.06); }
.hse-inc-82-card.sent    { border-color: rgba(22, 163, 74, 0.45); background: rgba(22, 163, 74, 0.06); }
[data-theme="dark"] .hse-inc-82-card.overdue { background: rgba(239, 68, 68, 0.10); }
[data-theme="dark"] .hse-inc-82-card.sent    { background: rgba(34, 197, 94, 0.10); }

/* Description / actions immédiates */
.hse-inc-description-text { font-size: 13px; color: var(--t-1); line-height: 1.5; white-space: pre-line; padding: 4px 0 8px; }

/* Personnes impliquées cards */
.hse-inc-person-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.hse-inc-person-card {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; background: var(--bg-tint); border: 1px solid var(--border);
  border-radius: 999px; font-size: 11.5px; color: var(--t-2);
}
.hse-inc-person-card--unresolved { color: var(--t-4); font-style: italic; }

/* Linked investigations grid */
.hse-inc-linked-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.hse-inc-linked-card {
  background: var(--bg-tint); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 2px;
  text-align: left; cursor: pointer;
}
.hse-inc-linked-card:hover { background: var(--bg-hover); }
.hse-inc-linked-ref { font-size: 11.5px; font-weight: 700; color: var(--blue); font-variant-numeric: tabular-nums; }
.hse-inc-linked-meth { font-size: 11px; color: var(--t-2); }
.hse-inc-linked-status { font-size: 10.5px; color: var(--t-3); }

@media (max-width: 1100px) {
  .hse-inc-table-header,
  .hse-inc-row { grid-template-columns: 80px 110px 80px 70px 80px minmax(0, 1fr) minmax(0, 1fr) 70px 48px; gap: 6px; padding: 8px 12px; }
}
@media (max-width: 720px) {
  .hse-inc-table-header { display: none; }
  .hse-inc-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ============================================================================
   Incidents — Tab 3 (Investigations scoped to incident context)
   ============================================================================ */

.hse-inc-investigations-tab { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.hse-inc-investigations-ctx {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 14px; background: var(--blue-tint); border: 1px solid var(--blue-soft);
  border-radius: 8px; font-size: 12.5px; color: var(--t-1);
}
.hse-inc-investigations-ctx-msg strong { color: var(--blue); }
.hse-inc-investigations-ctx-hint { font-size: 12px; color: var(--t-3); }

.hse-inc-inv-table { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.hse-inc-inv-table-header,
.hse-inc-inv-row { display: grid; grid-template-columns: 100px 130px 130px 110px minmax(0, 1fr) 110px; gap: 10px; align-items: center; padding: 10px 16px; }
.hse-inc-inv-table-header { font-size: 11px; font-weight: 600; color: var(--t-3); text-transform: uppercase; letter-spacing: 0.04em; background: var(--bg-tint); border-bottom: 1px solid var(--border); }
.hse-inc-inv-row { border-bottom: 1px solid var(--border-soft); cursor: pointer; transition: background 0.12s; }
.hse-inc-inv-row:last-child { border-bottom: none; }
.hse-inc-inv-row:hover { background: var(--bg-tint); }
.hse-inc-inv-cell-ref { font-size: 11.5px; font-weight: 700; color: var(--t-1); font-variant-numeric: tabular-nums; }
.hse-inc-inv-cell-parent { min-width: 0; }
.hse-inc-inv-parent-link {
  background: var(--bg-tint); border: 1px solid var(--border); border-radius: 6px;
  padding: 3px 8px; font-size: 11px; font-weight: 600; color: var(--blue);
  cursor: pointer; font-variant-numeric: tabular-nums;
}
.hse-inc-inv-parent-link:hover { background: var(--bg-hover); }
.hse-inc-inv-cell-when { font-size: 11px; color: var(--t-2); font-variant-numeric: tabular-nums; }

.hse-inc-inv-progress-bar {
  position: relative; width: 100%; height: 18px;
  background: var(--bg-tint); border: 1px solid var(--border); border-radius: 999px;
  overflow: hidden;
}
.hse-inc-inv-progress-fill {
  height: 100%; background: linear-gradient(90deg, #2563eb 0%, #14b8a6 100%);
  transition: width 0.2s ease-out;
}
.hse-inc-inv-progress-pct {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 10px; font-weight: 700; color: var(--t-1); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 4px var(--bg-card);
}

@media (max-width: 980px) {
  .hse-inc-inv-table-header,
  .hse-inc-inv-row { grid-template-columns: 84px 110px 110px 90px minmax(0, 1fr) 90px; gap: 6px; padding: 8px 12px; }
}
@media (max-width: 640px) {
  .hse-inc-inv-table-header { display: none; }
  .hse-inc-inv-row { grid-template-columns: 1fr; gap: 4px; }
  .hse-inc-investigations-ctx { flex-direction: column; align-items: flex-start; }
}

/* ============================================================================
   Incidents — Tab 4 (Registre statutaire OSH §85)
   ============================================================================ */

.hse-inc-registre { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.hse-inc-registre-banner {
  padding: 12px 16px; background: var(--amber-soft); border: 1px solid var(--amber);
  border-radius: 8px; font-size: 12.5px; color: var(--t-1); line-height: 1.45;
}
[data-theme="dark"] .hse-inc-registre-banner { background: rgba(245, 158, 11, 0.10); border-color: rgba(251, 191, 36, 0.45); }
.hse-inc-registre-banner strong { color: var(--amber); }
[data-theme="dark"] .hse-inc-registre-banner strong { color: #fcd34d; }

.hse-inc-registre-table { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.hse-inc-registre-header,
.hse-inc-registre-row {
  display: grid;
  grid-template-columns: 150px 160px 130px minmax(0, 1fr) minmax(0, 1.4fr) 180px;
  gap: 10px; align-items: start; padding: 12px 16px;
}
.hse-inc-registre-header {
  font-size: 11px; font-weight: 600; color: var(--t-3); text-transform: uppercase;
  letter-spacing: 0.04em; background: var(--bg-tint); border-bottom: 1px solid var(--border);
  align-items: center; padding: 10px 16px;
}
.hse-inc-registre-row {
  border-bottom: 1px solid var(--border-soft); font-size: 12px; color: var(--t-2);
  cursor: pointer; transition: background 0.12s;
}
.hse-inc-registre-row:last-child { border-bottom: none; }
.hse-inc-registre-row:hover { background: var(--bg-tint); }
.hse-inc-registre-ref { font-size: 10px; color: var(--t-4); font-variant-numeric: tabular-nums; margin-top: 2px; }
.hse-inc-registre-tbd { color: var(--t-4); font-style: italic; }

.hse-inc-registre-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 4px 4px 0;
}
.hse-inc-registre-foot-count { font-size: 11px; color: var(--t-3); }

@media (max-width: 900px) {
  .hse-inc-registre-header,
  .hse-inc-registre-row { grid-template-columns: 130px 130px 110px minmax(0, 1fr) minmax(0, 1.2fr) 140px; gap: 6px; padding: 10px 12px; }
}
@media (max-width: 640px) {
  .hse-inc-registre-header { display: none; }
  .hse-inc-registre-row { grid-template-columns: 1fr; gap: 4px; }
  .hse-inc-registre-foot { flex-direction: column; align-items: flex-start; }
}

/* ============================================================================
   "Nouveau incident" modal — overlay + card + 2-step body
   ============================================================================ */

.hse-modal-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.50); z-index: 200;
  display: grid; place-items: center; padding: 24px; overflow-y: auto;
}
.hse-modal-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  width: 100%; max-width: 600px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; max-height: calc(100vh - 48px);
}
.hse-modal-card--wide { max-width: 720px; }
.hse-modal-head {
  padding: 18px 24px; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
.hse-modal-title { font-size: 16px; font-weight: 700; color: var(--t-1); }
.hse-modal-subtitle { font-size: 12px; color: var(--t-3); margin-top: 4px; }
.hse-modal-close, .hse-modal-back {
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-tint); color: var(--t-2); cursor: pointer;
  display: grid; place-items: center; font-size: 14px;
}
.hse-modal-close:hover, .hse-modal-back:hover { background: var(--bg-hover); color: var(--t-1); }
.hse-modal-body { padding: 20px 24px; overflow-y: auto; flex: 1 1 auto; }
.hse-modal-foot {
  padding: 14px 24px; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 8px; background: var(--bg-tint);
}

/* Type-picker cards */
.hse-inc-newtype-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.hse-inc-newtype-card {
  text-align: left; padding: 18px 18px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
  transition: all 0.15s; display: flex; flex-direction: column; gap: 8px;
}
.hse-inc-newtype-card:hover { border-color: var(--t-2); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.hse-inc-newtype-card-icon {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
}
.hse-inc-newtype-card-label { font-size: 14px; font-weight: 700; color: var(--t-1); }
.hse-inc-newtype-card-desc { font-size: 11.5px; color: var(--t-3); line-height: 1.4; }
.hse-inc-newtype-card--red    .hse-inc-newtype-card-icon { background: rgba(220, 38, 38, 0.14); color: #dc2626; }
.hse-inc-newtype-card--orange .hse-inc-newtype-card-icon { background: rgba(234, 88, 12, 0.14); color: #ea580c; }
.hse-inc-newtype-card--teal   .hse-inc-newtype-card-icon { background: rgba(20, 184, 166, 0.14); color: #0f766e; }
.hse-inc-newtype-card--blue   .hse-inc-newtype-card-icon { background: rgba(37, 99, 235, 0.14); color: #2563eb; }
[data-theme="dark"] .hse-inc-newtype-card--red    .hse-inc-newtype-card-icon { color: #fca5a5; }
[data-theme="dark"] .hse-inc-newtype-card--orange .hse-inc-newtype-card-icon { color: #fdba74; }
[data-theme="dark"] .hse-inc-newtype-card--teal   .hse-inc-newtype-card-icon { color: #5eead4; }
[data-theme="dark"] .hse-inc-newtype-card--blue   .hse-inc-newtype-card-icon { color: #93c5fd; }

/* Form step */
.hse-inc-newform { display: flex; flex-direction: column; gap: 12px; }
.hse-inc-newform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hse-inc-newform-field { display: flex; flex-direction: column; gap: 4px; }
.hse-inc-newform-field > span { font-size: 11.5px; font-weight: 600; color: var(--t-2); }
.hse-inc-newform-field input[type="text"],
.hse-inc-newform-field input[type="number"],
.hse-inc-newform-field select,
.hse-inc-newform-field textarea {
  font-family: inherit; font-size: 12.5px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-tint); color: var(--t-1); resize: vertical;
}
.hse-inc-newform-field input:focus,
.hse-inc-newform-field select:focus,
.hse-inc-newform-field textarea:focus { outline: none; border-color: var(--blue); background: var(--bg-card); }
.hse-inc-newform-check { flex-direction: row; align-items: center; gap: 8px; }
.hse-inc-newform-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--blue); }
.hse-inc-newform-section {
  padding: 12px 14px; background: var(--bg-tint); border: 1px solid var(--border-soft); border-radius: 8px;
  display: flex; flex-direction: column; gap: 10px;
}
.hse-inc-newform-section h4 { font-size: 12px; font-weight: 700; color: var(--t-2); letter-spacing: 0.04em; text-transform: uppercase; }
@media (max-width: 560px) {
  .hse-inc-newtype-cards { grid-template-columns: 1fr; }
  .hse-inc-newform-row { grid-template-columns: 1fr; }
}

/* ===========================================================================
 * HSE 7/7 — Inspections + Registres (sub-pages 6 & 7)
 *
 * Spec: hse-module-spec.md §10.6 (inspections), §10.7 (registres),
 *       §3.15-§3.20 (schemas).
 * Match the dark-mode palette + drawer primitives shipped by the prior 5/7.
 * .hse-ins-* = inspections sub-page, .hse-reg-* = registres sub-page.
 * Shared HSE primitives (.hse-drawer, .hse-drawer-overlay, .hse-empty,
 *  .hse-inc-registre-*) are reused as-is.
 * ===========================================================================
 */

/* ---- Layout shells ---- */
.hse-ins-layout, .hse-reg-layout { padding: 24px 32px 48px; max-width: 1500px; margin: 0 auto; }
.hse-ins-header, .hse-reg-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.hse-ins-title h2, .hse-reg-title h2 { font-size: 20px; font-weight: 700; color: var(--t-1); margin: 0 0 4px; }
.hse-ins-subtitle, .hse-reg-subtitle { font-size: 12.5px; color: var(--t-3); margin: 0; max-width: 820px; line-height: 1.5; }
.hse-ins-actions, .hse-reg-actions { flex-shrink: 0; }

/* ---- Filter strip (shared between both sub-pages) ---- */
.hse-ins-filter, .hse-reg-housing-filter { margin-bottom: 14px; }
.hse-ins-filter-bar, .hse-reg-filter-bar { display: flex; flex-wrap: wrap; gap: 12px 16px; padding: 12px 14px; background: var(--bg-tint); border: 1px solid var(--border); border-radius: 10px; align-items: center; }
.hse-ins-filter-group { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hse-ins-filter-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--t-4); margin-right: 4px; }
.hse-ins-filter-select, .hse-ins-filter-date { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; font-size: 11.5px; color: var(--t-1); }
.hse-ins-filter-select:focus, .hse-ins-filter-date:focus { outline: 2px solid var(--accent, #4a90e2); outline-offset: -1px; }
.hse-ins-filter-reset { font-size: 11px; padding: 4px 10px; }

/* ---- List view (inspections) ---- */
.hse-ins-list { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.hse-ins-table-header,
.hse-ins-row { display: grid; grid-template-columns: 220px 180px minmax(0,1fr) 200px 180px 110px; gap: 14px; align-items: center; padding: 12px 18px; }
.hse-ins-table-header { font-size: 11px; font-weight: 600; color: var(--t-3); text-transform: uppercase; letter-spacing: 0.04em; background: var(--bg-tint); border-bottom: 1px solid var(--border); }
.hse-ins-row { border-bottom: 1px solid var(--border); cursor: pointer; transition: background 100ms; font-size: 12.5px; color: var(--t-2); }
.hse-ins-row:hover { background: var(--bg-hover); }
.hse-ins-row:last-child { border-bottom: none; }
.hse-ins-row:focus { outline: 2px solid var(--accent, #4a90e2); outline-offset: -2px; }
.hse-ins-row-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--t-1); font-weight: 600; }
.hse-ins-row-title { font-size: 12.5px; color: var(--t-2); margin-top: 2px; line-height: 1.35; }
.hse-ins-row-sub { font-size: 10.5px; color: var(--t-4); margin-top: 2px; }
.hse-ins-stat-badge { display: inline-block; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; background: rgba(255,180,0,0.18); color: #ffb400; border: 1px solid rgba(255,180,0,0.45); margin-left: 4px; vertical-align: middle; cursor: help; }

/* ---- Personnel pill (resolves displayName + initials) ---- */
.hse-ins-person { display: inline-flex; align-items: center; gap: 6px; }
.hse-ins-person-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--bg-tint); border: 1px solid var(--border); display: inline-grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--t-2); }
.hse-ins-person-name { font-size: 11.5px; color: var(--t-2); }

/* ---- Drawer customizations (extends .hse-drawer base) ---- */
.hse-ins-drawer .hse-drawer-title-block,
.hse-reg-drawer .hse-drawer-title-block { display: flex; flex-direction: column; gap: 4px; }
.hse-ins-drawer .hse-drawer-title,
.hse-reg-drawer .hse-drawer-title { font-size: 16px; font-weight: 700; color: var(--t-1); line-height: 1.3; }
.hse-ins-drawer .hse-drawer-subtitle,
.hse-reg-drawer .hse-drawer-subtitle { font-size: 11.5px; color: var(--t-3); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ---- Drawer sections (.hse-ins-* shared by both sub-pages) ---- */
.hse-ins-section { padding: 16px 0; border-bottom: 1px solid var(--border); }
.hse-ins-section:last-child { border-bottom: 0; }
.hse-ins-section-hint { font-size: 11.5px; color: var(--t-3); margin: -4px 0 12px; line-height: 1.5; }
.hse-ins-count { font-size: 10.5px; padding: 2px 8px; border-radius: 999px; background: var(--bg-tint); color: var(--t-3); font-weight: 600; margin-left: 4px; }

/* ---- Identité grid (label-value pattern per CLAUDE.md §1.6) ---- */
.hse-ins-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.hse-ins-lv { display: flex; flex-direction: column; gap: 4px; }
.hse-ins-lv-label { font-size: 10.5px; font-weight: 600; color: var(--t-4); text-transform: uppercase; letter-spacing: 0.04em; }
.hse-ins-lv-value { font-size: 12.5px; color: var(--t-1); line-height: 1.4; word-break: break-word; }

/* ---- Checklist questions ---- */
.hse-ins-questions { list-style: decimal inside; padding: 0; margin: 0; }
.hse-ins-q { padding: 10px 0 14px; border-bottom: 1px dashed var(--border); }
.hse-ins-q:last-child { border-bottom: none; }
.hse-ins-q-text { font-size: 12.5px; color: var(--t-1); font-weight: 500; line-height: 1.45; }
.hse-ins-q-type { display: inline-block; margin-left: 8px; font-size: 10px; padding: 1px 6px; border-radius: 4px; background: var(--bg-tint); color: var(--t-4); font-weight: 600; }
.hse-ins-q-req { color: #e8533f; font-weight: 700; cursor: help; }
.hse-ins-q-guide { font-size: 11px; color: var(--t-4); margin: 4px 0 6px 18px; font-style: italic; }
.hse-ins-q-input { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hse-ins-q-input label { display: inline-flex; gap: 4px; font-size: 11.5px; color: var(--t-2); cursor: pointer; }
.hse-ins-q-input textarea { width: 100%; min-height: 50px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-size: 12px; color: var(--t-1); font-family: inherit; resize: vertical; }
.hse-ins-q-input .btn-sm { padding: 4px 10px; font-size: 11px; }

/* ---- Findings cards ---- */
.hse-ins-findings { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.hse-ins-finding-card { padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; }
.hse-ins-finding-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.hse-ins-finding-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; color: var(--t-4); margin-left: auto; }
.hse-ins-finding-promoted { font-size: 10.5px; padding: 2px 8px; border-radius: 4px; background: rgba(74,144,226,0.18); color: #4a90e2; font-weight: 600; }
.hse-ins-finding-title { font-size: 12.5px; font-weight: 600; color: var(--t-1); margin-bottom: 4px; line-height: 1.35; }
.hse-ins-finding-desc { font-size: 11.5px; color: var(--t-3); line-height: 1.5; }
.hse-ins-add-finding { font-size: 11.5px; padding: 6px 12px; }

/* ---- Related records cards ---- */
.hse-ins-related { display: flex; flex-direction: column; gap: 10px; }
.hse-ins-related-card { padding: 12px 14px; background: var(--bg-tint); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.hse-ins-related-card:hover { background: var(--bg-hover); }
.hse-ins-related-target { font-size: 10.5px; font-weight: 700; color: #4a90e2; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.hse-ins-related-title { font-size: 12.5px; font-weight: 600; color: var(--t-1); margin-bottom: 4px; }
.hse-ins-related-meta { font-size: 11px; color: var(--t-3); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ---- History accordion ---- */
.hse-ins-history { font-size: 12px; }
.hse-ins-history summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--t-2); text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 0; }
.hse-ins-history-list { list-style: none; padding: 8px 0 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.hse-ins-history-list li { display: grid; grid-template-columns: 130px 1fr auto; gap: 12px; padding: 6px 10px; background: var(--bg-tint); border-radius: 6px; align-items: center; }
.hse-ins-history-ts { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--t-4); }
.hse-ins-history-label { font-size: 11.5px; color: var(--t-2); }
.hse-ins-history-who { font-size: 10.5px; }

/* ---- "Nouvelle inspection" 2-step modal ---- */
.hse-ins-type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; padding: 8px 0; }
.hse-ins-type-card { padding: 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; text-align: left; transition: all 100ms; display: flex; flex-direction: column; gap: 8px; }
.hse-ins-type-card:hover { background: var(--bg-hover); border-color: var(--accent, #4a90e2); transform: translateY(-1px); box-shadow: var(--shadow-md, 0 2px 8px rgba(0,0,0,0.1)); }
.hse-ins-type-card-pill { margin-bottom: 4px; }
.hse-ins-type-card-name { font-size: 13px; font-weight: 700; color: var(--t-1); }
.hse-ins-type-card-hint { font-size: 11px; color: var(--t-3); line-height: 1.4; }

/* ===========================================================================
 * REGISTRES sub-page (.hse-reg-*)
 * ===========================================================================
 */

.hse-reg-tabs { margin: 0 0 4px; }
.hse-reg-tab-body { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 16px; min-height: 200px; }

/* Tab 1: housing list */
.hse-reg-housing-list { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.hse-reg-hsg-header,
.hse-reg-hsg-row { display: grid; grid-template-columns: 130px minmax(0,1.5fr) 130px 160px 130px 150px; gap: 14px; align-items: center; padding: 12px 18px; }
.hse-reg-hsg-header { font-size: 11px; font-weight: 600; color: var(--t-3); text-transform: uppercase; letter-spacing: 0.04em; background: var(--bg-tint); border-bottom: 1px solid var(--border); }
.hse-reg-hsg-row { border-bottom: 1px solid var(--border); cursor: pointer; transition: background 100ms; font-size: 12.5px; color: var(--t-2); }
.hse-reg-hsg-row:hover { background: var(--bg-hover); }
.hse-reg-hsg-row:last-child { border-bottom: none; }
.hse-reg-hsg-row:focus { outline: 2px solid var(--accent, #4a90e2); outline-offset: -2px; }
.hse-reg-hsg-row-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--t-1); font-weight: 600; }
.hse-reg-hsg-row-name { font-size: 12.5px; font-weight: 600; color: var(--t-1); margin-bottom: 2px; }
.hse-reg-hsg-row-addr { font-size: 11px; color: var(--t-4); line-height: 1.4; }
.hse-reg-hsg-row-occ { font-size: 12px; color: var(--t-2); font-weight: 600; }
.hse-reg-hsg-row-overdue { display: inline-block; margin-top: 2px; font-size: 10.5px; padding: 2px 6px; border-radius: 4px; background: rgba(232,83,63,0.16); color: #e8533f; font-weight: 600; }

/* Polish-r5.5 A.2 (visual gate fix) — inspection archive list, mirrors the
   .hse-reg-housing-list / .hse-reg-hsg-row grid pattern so headers align
   with cells and row content respects column boundaries. */
.hse-reg-archive-list { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.hse-reg-archive-count { padding: 10px 18px; background: var(--bg-tint); border-bottom: 1px solid var(--border); font-size: 11.5px; color: var(--t-3); font-weight: 500; }
.hse-reg-archive-header,
.hse-reg-archive-row { display: grid; grid-template-columns: 100px minmax(0,2fr) 200px 120px 90px 110px; gap: 14px; align-items: center; padding: 12px 18px; }
.hse-reg-archive-header { font-size: 11px; font-weight: 600; color: var(--t-3); text-transform: uppercase; letter-spacing: 0.04em; background: var(--bg-tint); border-bottom: 1px solid var(--border); }
.hse-reg-archive-row { border-bottom: 1px solid var(--border); cursor: pointer; transition: background 100ms; font-size: 12.5px; color: var(--t-2); }
.hse-reg-archive-row:hover { background: var(--bg-hover); }
.hse-reg-archive-row:last-child { border-bottom: none; }
.hse-reg-archive-row:focus { outline: 2px solid var(--accent, #4a90e2); outline-offset: -2px; }
.hse-reg-archive-row-date { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--t-1); font-weight: 600; }
.hse-reg-archive-row-housing { font-size: 12.5px; font-weight: 600; color: var(--t-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hse-reg-archive-row-inspector { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Filter strip layout — flat row of field groups, matching the
   prototype's existing filter-strip cadence. */
.hse-reg-archive-filter { margin-bottom: 14px; }
.hse-reg-archive-filter-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; }
.hse-reg-archive-filter-group { display: flex; flex-direction: column; gap: 4px; min-width: 160px; flex: 0 0 auto; }
.hse-reg-archive-filter-group .field-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--t-4); }
.hse-reg-archive-grade-chips { display: flex; gap: 6px; flex-wrap: wrap; }

/* Housing drawer specifics */
.hse-reg-hsg-insp-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.hse-reg-hsg-insp-card { padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; }
.hse-reg-hsg-insp-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.hse-reg-hsg-insp-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 600; color: var(--t-2); }
.hse-reg-hsg-insp-meta { font-size: 11px; color: var(--t-3); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; line-height: 1.5; }
.hse-reg-hsg-insp-findings { list-style: none; padding: 8px 0 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; color: var(--t-2); }
.hse-reg-hsg-insp-findings li { padding-left: 8px; line-height: 1.45; }
.hse-reg-hsg-insp-foot { margin-top: 8px; font-size: 10.5px; color: var(--t-4); }

/* Responsive collapse */
@media (max-width: 980px) {
  .hse-ins-table-header, .hse-ins-row { grid-template-columns: 160px 140px minmax(0,1fr) 130px 130px 90px; }
  .hse-reg-hsg-header, .hse-reg-hsg-row { grid-template-columns: 110px minmax(0,1fr) 110px 130px 110px 130px; gap: 8px; }
  .hse-reg-archive-header, .hse-reg-archive-row { grid-template-columns: 90px minmax(0,1fr) 150px 100px 80px 100px; gap: 8px; }
}
@media (max-width: 700px) {
  .hse-ins-table-header { display: none; }
  .hse-ins-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 16px; }
  .hse-reg-hsg-header { display: none; }
  .hse-reg-hsg-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 16px; }
  .hse-reg-archive-header { display: none; }
  .hse-reg-archive-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 16px; }
  .hse-ins-grid { grid-template-columns: 1fr; }
}

/* ===========================================================================
 * Polish round 1 — date_picker primitive (UI Integration v1.5 §7.2)
 * Quick-option preset chip row rendered immediately below every flatpickr
 * input attached via core/datePicker.js attachDatePicker().
 * Three preset bundles: standard_date / inspection_date / deadline_date.
 * ===========================================================================
 */
.kov-date-quick-options {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; align-items: center;
}
.kov-date-quick-chip {
  font-size: 10.5px; font-weight: 500;
  padding: 3px 8px; border-radius: 4px;
  background: var(--bg-tint); color: var(--t-3);
  border: 1px solid var(--border); cursor: pointer;
  transition: background 100ms, color 100ms, border-color 100ms;
  font-family: inherit;
}
.kov-date-quick-chip:hover {
  background: var(--bg-hover); color: var(--t-1); border-color: var(--border-strong);
}
.kov-date-quick-chip:active { transform: translateY(1px); }
.kov-date-quick-chip:focus-visible {
  outline: 2px solid var(--accent, #4a90e2); outline-offset: 1px;
}

/* Polish round 1 — F5 §85 register permission gate (HSE v1.3 §10.2).
 * Row stays VISIBLE but loses click affordance when user lacks view:incident
 * in the incident's scope. Tooltip explains why. The .hse-inc-registre-row
 * base styles already paint the row; the -disabled modifier suppresses
 * cursor + hover + focus styling. */
.hse-inc-registre-row-disabled {
  cursor: not-allowed; opacity: 0.6;
}
.hse-inc-registre-row-disabled:hover { background: transparent; }
.hse-inc-registre-row-disabled:focus { outline: none; }

/* ===========================================================================
 * Polish round 1 — F4 worker_housing_inspection_form (HSE v1.3 §10.7)
 * Structured findings array with reactive grade preview + override section.
 * ===========================================================================
 */
.hse-reg-hsg-insp-form-modal .modal-body { max-height: 75vh; overflow-y: auto; }
.hse-reg-hsg-form-helper { display: block; font-size: 10.5px; color: var(--t-4); margin-top: 4px; }

.hse-reg-hsg-findings-section { padding-top: 16px; border-top: 1px solid var(--border); }
.hse-reg-hsg-findings-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px;
}
.hse-reg-hsg-findings-header h4 {
  font-size: 13px; font-weight: 700; color: var(--t-1); margin: 0; text-transform: uppercase; letter-spacing: 0.04em;
}
.hse-reg-hsg-findings-list { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.hse-reg-hsg-finding-row {
  padding: 12px 14px; background: var(--bg-tint); border: 1px solid var(--border); border-radius: 8px;
}
.hse-reg-hsg-finding-grid {
  display: grid; grid-template-columns: 1fr 140px 1fr; gap: 10px 14px;
}
.hse-reg-hsg-finding-grid .field { display: flex; flex-direction: column; gap: 4px; }
.hse-reg-hsg-finding-grid .field.full { grid-column: 1 / -1; }
.hse-reg-hsg-finding-row-actions { display: flex; gap: 8px; justify-content: flex-end; }
.hse-reg-hsg-finding-remove { color: #e8533f; }
.hse-reg-hsg-finding-remove:hover { background: rgba(232, 83, 63, 0.12); }

.hse-reg-hsg-grade-preview-section {
  padding-top: 16px; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.hse-reg-hsg-grade-preview-section h4 {
  font-size: 13px; font-weight: 700; color: var(--t-1); margin: 0; display: flex; align-items: center; gap: 8px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.hse-reg-hsg-grade-preview-pill { font-size: 13px; }

.hse-reg-hsg-override-section {
  padding-top: 12px; border-top: 1px solid var(--border);
}
.hse-reg-hsg-override-toggle {
  font-size: 11.5px; color: var(--accent, #4a90e2); text-decoration: none; cursor: pointer; font-weight: 600;
}
.hse-reg-hsg-override-toggle:hover { text-decoration: underline; }
.hse-reg-hsg-override-body { margin-top: 10px; padding: 12px; background: var(--bg-tint); border-radius: 8px; }

@media (max-width: 700px) {
  .hse-reg-hsg-finding-grid { grid-template-columns: 1fr; }
}

/* ===== hex_map_mauritius primitive (UI Integration v1.5 §19) ============== */

.hex-map-root {
  position: relative; width: 100%; height: 100%; min-height: 280px;
  display: block; overflow: hidden;
}
.hex-map-root svg { display: block; width: 100%; height: 100%; }
.hex-map-overlay {
  position: absolute; inset: 0; pointer-events: none;
}
.hex-map-overlay > * { pointer-events: auto; }

/* Empty-state CTA */
.hex-map-cta {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.hex-map-cta-card {
  pointer-events: auto;
  background: var(--bg-card); padding: 18px 22px; border-radius: 12px;
  box-shadow: var(--shadow-xl); border: 1px solid var(--border);
  text-align: center; max-width: 320px;
}
.hex-map-cta-text { margin: 0 0 12px; color: var(--t-1); font-size: 14px; font-weight: 600; }
.hex-map-cta-btn {
  background: var(--accent, #4a90e2); color: #fff; border: none; padding: 9px 16px;
  border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 13px;
}
.hex-map-cta-btn:hover { filter: brightness(0.94); }

/* Callouts — base */
.hex-callout {
  position: absolute; transform: translate(-50%, -100%);
  background: var(--bg-card); color: var(--t-1);
  padding: 8px 12px; border-radius: 8px; box-shadow: var(--shadow-lg);
  font-size: 12px; line-height: 1.35; min-width: 160px; max-width: 280px;
  border: 1px solid var(--border);
  transition: opacity 200ms ease;
  z-index: 80;
}
/* polish-r7 F-POL-15 (UI v1.5 §19.6 callout_styling.z_index_order inverted):
   hover (100) > pinned_click (90) > persistent_alert (80). Hover represents
   active user attention and must render above background alerts when their
   rects overlap on adjacent clusters. Merged callouts (C.7) stay at z-100. */
.hex-callout-hover    { z-index: 100; }
.hex-callout-pinned   { z-index: 90; border-color: var(--accent, #4a90e2); }
.hex-callout-persistent { z-index: 80; min-width: 140px; padding: 9px 12px; color: #fff; border: none; }
.hex-callout-persistent.hex-callout-warning { background: var(--hex-fill-warning, #f59e0b); }
.hex-callout-persistent.hex-callout-alert   { background: var(--hex-fill-alert,   #dc2626); }
/* polish-r3 C.7 — merged callout (UI v1.5 §19.6 callout merge rule):
   top zone severity-tinted with persistent alert content,
   bottom zone default styling with hover content. Shared corners + width. */
.hex-callout-merged {
  z-index: 100;
  min-width: 160px;
  padding: 0;
  border: none;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-card, #fff);
}
.hex-callout-merged .hex-callout-merge-top {
  padding: 9px 12px;
  color: #fff;
}
.hex-callout-merged.hex-callout-warning .hex-callout-merge-top { background: var(--hex-fill-warning, #f59e0b); }
.hex-callout-merged.hex-callout-alert   .hex-callout-merge-top { background: var(--hex-fill-alert,   #dc2626); }
.hex-callout-merged .hex-callout-merge-bottom {
  padding: 9px 12px;
  color: var(--t-1);
  background: var(--bg-card, #fff);
}
.hex-callout-fading { opacity: 0; }

.hex-callout-persistent-primary {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; font-weight: 600; opacity: 0.92; margin-bottom: 2px;
}
.hex-callout-persistent-icon { font-size: 13px; }
.hex-callout-persistent-secondary {
  display: flex; align-items: baseline; gap: 6px;
}
.hex-callout-persistent-count { font-size: 18px; font-weight: 800; }
.hex-callout-persistent-noun  { font-size: 12px; font-weight: 500; }

/* Overflow pill (>5 persistent alerts) */
.hex-callout-overflow-pill {
  position: absolute; top: 12px; right: 12px;
  background: var(--accent, #4a90e2); color: #fff; border: none;
  padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
  cursor: pointer; box-shadow: var(--shadow-md);
  z-index: 110;
}
.hex-callout-overflow-pill:hover { filter: brightness(0.94); }

.hex-callout-overflow-list {
  position: absolute; top: 48px; right: 12px; width: 280px;
  background: var(--bg-card); border-radius: 10px; box-shadow: var(--shadow-xl);
  border: 1px solid var(--border); z-index: 120;
  max-height: 360px; overflow-y: auto;
}
.hex-callout-overflow-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.hex-callout-overflow-close {
  background: transparent; border: none; font-size: 18px; cursor: pointer; color: var(--t-3);
}
.hex-callout-overflow-items { list-style: none; padding: 0; margin: 0; }
.hex-callout-overflow-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 12px; border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.hex-callout-overflow-item:last-child { border-bottom: none; }
.hex-callout-overflow-item.hex-callout-warning { border-left: 3px solid var(--hex-fill-warning, #f59e0b); }
.hex-callout-overflow-item.hex-callout-alert   { border-left: 3px solid var(--hex-fill-alert,   #dc2626); }
.hex-callout-overflow-item-label { font-weight: 600; color: var(--t-1); }
.hex-callout-overflow-item-count { color: var(--t-3); }

/* ===== Logements dashboard composition (HSE v1.5 §10.7) ===== */

.logements-dashboard { display: flex; flex-direction: column; gap: 20px; }
.logements-row-1 {
  display: grid; grid-template-columns: 70% 30%; gap: 16px;
  min-height: 480px;
  /* polish-r5 F-POL-13 — cap row 1 at ~10% below natural height
     (~972 px → ~875 px live). The dashboard's top section feels more
     compact; the heatmap + fire safety + recent inspections rows below
     keep their previous visual weight (they are unaffected — only this
     row's max-height changes). The 5-unit right-column ratio (3 KPIs +
     double-height donut, polish-r5 B.2) still applies; each unit just
     shrinks proportionally. Other dashboard rows are unaffected. */
  max-height: 875px;
}
.logements-map-host {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; min-height: 480px; position: relative;
  /* polish-r5 F-POL-13 — cap host at ~10% below natural height so the SVG
     fits the reduced row 1 cell. preserveAspectRatio="xMidYMid meet" on
     the SVG keeps the Mauritius aspect ratio while sizing down. */
  max-height: 875px;
  /* polish-r3 C.4 — 2% edge padding so the hex map breathes inside its card */
  padding: 2%;
  box-sizing: border-box;
}
.logements-kpi-stack {
  display: flex; flex-direction: column; gap: 12px;
}
.logements-kpi-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; flex: 1; display: flex; flex-direction: column; justify-content: center;
  cursor: pointer; transition: border-color 120ms ease;
}
.logements-kpi-card:hover { border-color: var(--accent, #4a90e2); }
.logements-kpi-card.tone-warning { border-left: 4px solid var(--hex-fill-warning, #f59e0b); }
.logements-kpi-card.tone-alert   { border-left: 4px solid var(--hex-fill-alert,   #dc2626); }

/* polish-r4 C.3 — floating KPI cards overlaid on the map (HSE v1.7 §10.7 floating_kpi_layer).
   Wrapper: pointer-events: none so hex map hover/click pass through.
   Cards: pointer-events: auto so they remain clickable. Per WO R6. */
.logements-floating-kpis {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 50;                     /* above hex SVG (~10), below callouts (100+) */
  pointer-events: none;            /* CRITICAL — wrapper must not block hex events */
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Constrain to a sane width so 2 cards stack vertically without dominating the map. */
  max-width: 200px;
}
.logements-floating-kpis .logements-kpi-card {
  pointer-events: auto;            /* cards ARE clickable */
}
/* polish-r4 R10 — compact variant of the existing KPI card primitive (NO new pattern). */
.logements-kpi-card-compact {
  padding: 8px 12px;
  background: var(--bg-card);
  box-shadow: var(--shadow-md);
  flex: 0 0 auto;                  /* don't flex in the floating layer */
}
.logements-kpi-card-compact .logements-kpi-label {
  font-size: 10.5px;
}
.logements-kpi-card-compact .logements-kpi-value {
  font-size: 16px;
}
.logements-kpi-card-compact .logements-kpi-secondary {
  font-size: 10.5px;
}

/* polish-r4 C.3 — grade distribution donut card (HSE v1.7 §10.7 card_grade_distribution_donut).
   Reuses core/donut.js for the SVG; this CSS just composes the surrounding card. */
.logements-grade-donut-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 120ms ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* polish-r5 F-BUG-6 — donut card takes 2 units of the 5-unit right-column
     height ratio (HSE v1.7 §10.7 right_column_30pct.height_distribution,
     polish-r5 B.2 clarification). The 3 KPI cards keep flex: 1 each; the
     donut at flex: 2 sits roughly 2x as tall, restoring the spec's intended
     visual hierarchy. Pre-fix, all four cards shared remaining space evenly
     so the donut ended up SHORTER than the KPIs. */
  flex: 2;
}
.logements-grade-donut-card:hover { border-color: var(--accent, #4a90e2); }
.logements-grade-donut-head {
  font-size: 12px;
  font-weight: 600;
  color: var(--t-2);
  letter-spacing: -0.005em;
}
.logements-grade-donut-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.logements-grade-donut-chart {
  position: relative;
  width: 100%;
  /* polish-r5 F-BUG-6 — chart grows from 120px to 160px so the chart-to-card
     ratio reads correctly at the new 2-unit card height (HSE v1.7 §10.7
     polish-r5 B.2 clarification). */
  max-width: 160px;
  aspect-ratio: 1 / 1;
}
.logements-grade-donut-chart .donut-svg {
  width: 100%;
  height: 100%;
}
.logements-grade-donut-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.logements-grade-donut-center-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--t-1);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.logements-grade-donut-center-label {
  font-size: 10.5px;
  color: var(--t-3);
}
.logements-grade-donut-legend {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 8px;
  width: 100%;
}
.logements-grade-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--t-2);
}
.logements-grade-legend-item.zero { color: var(--t-4); }
.logements-grade-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.logements-grade-legend-label {
  flex: 1;
  font-weight: 600;
}
.logements-grade-legend-count {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--t-1);
}
.logements-grade-legend-item.zero .logements-grade-legend-count { color: var(--t-3); }
.logements-kpi-label {
  font-size: 11px; font-weight: 600; color: var(--t-3);
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px;
}
.logements-kpi-value {
  font-size: 24px; font-weight: 800; color: var(--t-1); line-height: 1.1;
}
.logements-kpi-secondary {
  font-size: 12px; color: var(--t-3); margin-top: 2px;
}

.logements-trend-chart, .logements-fire-card, .logements-recent-strip {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px;
}
.logements-trend-chart-title, .logements-fire-card-title, .logements-recent-strip-title {
  font-size: 14px; font-weight: 700; color: var(--t-1); margin: 0 0 12px;
}
.logements-trend-chart-svg { width: 100%; height: 200px; display: block; }
.logements-trend-chart-empty { color: var(--t-3); font-size: 13px; padding: 24px 0; text-align: center; }
.logements-trend-chart-legend {
  display: flex; gap: 16px; margin-top: 8px; font-size: 11px; color: var(--t-3);
}
.logements-trend-legend-swatch {
  display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle;
}

/* Polish-r3 C.8 — compliance heatmap matrix (replaces v1.5 trend chart). */
.logements-heatmap-matrix {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}
.logements-heatmap-matrix-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--t-1);
  margin: 0 0 10px 0;
  letter-spacing: -0.01em;
}
.logements-heatmap-empty {
  color: var(--t-3);
  font-size: 13px;
  margin: 8px 0;
}
.logements-heatmap-cta {
  color: var(--blue);
  font-weight: 600;
}
.compliance-heatmap-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.compliance-heatmap-matrix th,
.compliance-heatmap-matrix td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
}
.compliance-heatmap-matrix th {
  background: var(--bg-tint);
  font-weight: 600;
  font-size: 12px;
  color: var(--t-2);
  text-transform: none;
}
.compliance-heatmap-matrix .lodging-name-col {
  font-weight: 500;
  color: var(--t-1);
  min-width: 200px;
  position: sticky;
  left: 0;
  background: var(--bg-card);
}
.compliance-heatmap-matrix tbody tr {
  cursor: pointer;
  transition: background 0.15s ease;
}
/* polish-r4 C.1 + C.4 — replace polish-r3's filter:brightness(1.05) hover
   (caused dark-mode visibility bug — brightness on light tints rounded toward
   white-on-white). v1.7 uses explicit accent-tint backgrounds per theme. */
.compliance-heatmap-matrix tbody tr:hover td {
  background: var(--blue-tint);
}
.compliance-heatmap-matrix tbody tr:hover .lodging-name-col {
  /* Override the sticky col's own bg so the hover tint covers the whole row. */
  background: var(--blue-tint);
}
[data-theme="dark"] .compliance-heatmap-matrix tbody tr:hover td,
[data-theme="dark"] .compliance-heatmap-matrix tbody tr:hover .lodging-name-col {
  background: var(--blue-soft);
}
/* polish-r4 C.4 — cell content now rendered as pills (.pill .pill-green etc.).
   No more per-cell .cell-{color} backgrounds — the pill IS the colored element.
   The .cell-{color} CSS rules from v1.6 are REMOVED per WO R7 + polish-r4 spec. */

/* Polish-r3 C.9 — fire safety card visual updates (HSE v1.6 §10.7).
   Card renders ONLY when any live row > 0 (conditional render handled
   in registres.js). Border-left accent strip + fire icon top-right +
   clickable row drilldowns. */
.logements-fire-card.tone-warning {
  border-left: 4px solid var(--hex-fill-warning, #f59e0b);
  position: relative;
}
/* polish-r4 C.5 / F-POL-12 — .logements-fire-card-icon REMOVED (Tyrel visual
   reject — flame glyph against the border-left accent looked bad).
   The position: relative on .logements-fire-card.tone-warning stays (kept
   in case a future icon variant is reintroduced). */
.logements-fire-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 10px; border-bottom: 1px solid var(--border); font-size: 13px;
  border-radius: 6px;
  transition: background 0.15s ease;
}
.logements-fire-row:last-child { border-bottom: none; }
.logements-fire-row.grayed { opacity: 0.5; }
.logements-fire-row.grayed .logements-fire-count { color: var(--t-3); }
.logements-fire-row[data-fire-row] { cursor: pointer; }
.logements-fire-row[data-fire-row]:hover { background: var(--bg-tint); }
.logements-fire-label { color: var(--t-2); }
.logements-fire-count { font-weight: 700; color: var(--t-1); }
.logements-fire-count.zero { color: var(--t-3); font-weight: 500; }

.logements-recent-strip-list { display: flex; flex-direction: column; gap: 0; }
.logements-recent-row {
  display: grid; grid-template-columns: 110px 1fr 80px 110px; gap: 12px;
  align-items: center;
  /* Polish-r3 C.10 — 12px vertical / 16px horizontal padding per HSE v1.6 §10.7 row_4 spec */
  padding: 12px 16px;
  font-size: 13px; cursor: pointer;
  transition: background 0.15s ease;
}
/* Polish-r3 C.10 — row separators between rows (from row 2 onward). */
.logements-recent-row + .logements-recent-row {
  border-top: 1px solid var(--border-soft);
}
.logements-recent-row:hover { background: var(--bg-tint); }
.logements-recent-ref { color: var(--t-3); font-size: 12px; font-weight: 600; }
.logements-recent-name { color: var(--t-1); font-weight: 600; }
.logements-recent-grade-chip {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
  text-align: center;
}
.logements-recent-grade-A { background: rgba(34, 197, 94, 0.18); color: #166534; }
.logements-recent-grade-B { background: rgba(59, 130, 246, 0.18); color: #1e40af; }
.logements-recent-grade-C { background: rgba(245, 158, 11, 0.18); color: #92400e; }
.logements-recent-grade-D { background: rgba(220, 38, 38, 0.18); color: #991b1b; }
.logements-recent-date { color: var(--t-3); font-size: 12px; }
.logements-recent-empty { color: var(--t-3); font-size: 13px; padding: 16px 0; text-align: center; }
.logements-recent-footer {
  margin-top: 8px; text-align: right;
}
.logements-recent-footer-link {
  color: var(--accent, #4a90e2); font-size: 12px; text-decoration: none; font-weight: 600;
}
.logements-recent-footer-link:hover { text-decoration: underline; }

/* ===== Stepped modal (Nouveau logement 3-step per UI v1.5 §7.4) ===== */

.stepped-modal-progress {
  display: flex; gap: 8px; padding: 14px 20px;
  border-bottom: 1px solid var(--border); background: var(--bg-tint);
}
.stepped-modal-step {
  flex: 1; display: flex; flex-direction: column; gap: 4px;
}
.stepped-modal-step-label {
  font-size: 11px; font-weight: 600; color: var(--t-3); text-transform: uppercase; letter-spacing: 0.04em;
}
.stepped-modal-step-bar {
  height: 4px; background: var(--border); border-radius: 2px;
}
.stepped-modal-step.is-active .stepped-modal-step-bar { background: var(--accent, #4a90e2); }
.stepped-modal-step.is-active .stepped-modal-step-label { color: var(--t-1); }
.stepped-modal-step.is-done .stepped-modal-step-bar { background: var(--accent, #4a90e2); opacity: 0.6; }
.stepped-modal-step.is-done .stepped-modal-step-label { color: var(--t-2); }

/* polish-r3 C.7 — long descriptive header inside each step body, paired
   with the short label in the progress strip. */
.stepped-modal-body-header {
  font-size: 15px;
  font-weight: 600;
  color: var(--t-1);
  margin-bottom: 10px;
  letter-spacing: -0.012em;
}

/* polish-r3 C.12 — real-time soft warnings on step 2 fields (HSE v1.6 §10.7).
   Visual cue ONLY; warnings do not block submit (per WO R8). */
.field-warning-applied .field-input,
.field-warning-applied .field-select {
  border-color: var(--hex-fill-alert, #dc2626) !important;
  box-shadow: 0 0 0 1px var(--hex-fill-alert, #dc2626);
}
.field-warning-applied .field-label {
  color: var(--hex-fill-alert, #dc2626);
}
.field-warning-message {
  margin-top: 6px;
  padding: 6px 10px;
  background: rgba(220, 38, 38, 0.08);
  border-left: 3px solid var(--hex-fill-alert, #dc2626);
  border-radius: 4px;
  font-size: 11.5px;
  color: var(--hex-fill-alert, #dc2626);
  line-height: 1.35;
}
[data-theme="dark"] .field-warning-message {
  background: rgba(220, 38, 38, 0.18);
  color: #fca5a5;
}

/* Polish-r5.5 A.1b — advisory (yellow) variant of field-warning-*, using the
   existing --amber / --amber-soft design-system tokens. Used for the
   below-recommended first-aider tier (ELA §21(1)(b) qualitative standard;
   the 1:100 ratio is regional industry practice, not regulation). Tier 1
   (zero count) continues to use .field-warning-applied (red). */
.field-advisory-applied .field-input,
.field-advisory-applied .field-select {
  border-color: var(--amber, #f59e0b) !important;
  box-shadow: 0 0 0 1px var(--amber, #f59e0b);
}
.field-advisory-applied .field-label {
  color: #b45309;
}
.field-advisory-message {
  margin-top: 6px;
  padding: 6px 10px;
  background: var(--amber-soft, #fef3c7);
  border-left: 3px solid var(--amber, #f59e0b);
  border-radius: 4px;
  font-size: 11.5px;
  color: #b45309;
  line-height: 1.35;
}
[data-theme="dark"] .field-advisory-message {
  background: rgba(245, 158, 11, 0.18);
  color: #fcd34d;
}

/* Polish-r5.5 FIX 4 REVISED — disabled state for .field-input. Used to
   inertize sanitary count inputs when the corresponding gender's capacity
   is 0 in Step 1 (e.g. all-male dortoir greys out all _female inputs).
   Sibling extension of the .plan-multi-row input:disabled cursor rule
   already in the design system; uses existing --t-3 / --bg-tint tokens
   only — no new design primitives. */
.field-input:disabled,
.field-input[disabled] {
  cursor: not-allowed;
  background: var(--bg-tint);
  color: var(--t-3);
  opacity: 0.6;
}

.stepped-modal-pin-host {
  height: 360px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  background: var(--bg-card);
  position: relative;
}
.stepped-modal-pin-helper {
  font-size: 12px; color: var(--t-3); margin: 8px 0 0;
}

@media (max-width: 900px) {
  .logements-row-1 { grid-template-columns: 1fr; min-height: auto; }
  .logements-map-host { min-height: 360px; }
}