/* ============================================
   CdE App — Domain-Specific Styles
   Built on design-kit (Swiss Rationalist).
   Only CdE tokens, components, and overrides here.
   Generic UI handled by /design-kit/index.css.
   Rules:
     - never redefine a kit class at top level
     - scope kit overrides under an app class
     - tokens only: no raw hex, no raw px where a token exists
   ============================================ */

/* ── App shell scroll model (ported from PMO, commit cbcf547) ──
   Topbar fixed; the shell fills the viewport; BODY never scrolls inside the
   authenticated shell. Ordinary pages scroll inside .content → one scrollbar.
   The fiche hands scroll to its own regions. */
html, body { height: 100%; }
body:has(.shell) { overflow: hidden; }
.content {
  height: calc(100vh - var(--topbar-h, 48px));
  min-height: 0;
  overflow-y: auto;
}
.content:has(.fiche-page) {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.content:has(.fiche-page) > .page {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
}
.fiche-page {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
}

.page-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

/* ── Dark-mode accent button (ported) ── */
[data-theme="dark"] .btn-accent {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: var(--accent);
}
[data-theme="dark"] .btn-accent:hover {
  background: color-mix(in srgb, var(--accent-dim) 65%, var(--accent) 35%);
  color: var(--accent);
  border-color: var(--accent);
}
[data-theme="dark"] .btn-accent:disabled {
  background: transparent;
  color: var(--ink-3);
  border-color: var(--line);
}

/* ── Header search + actions portal (ported) ── */
.header-actions { display: flex; align-items: center; gap: var(--s16); flex-wrap: wrap; }
.header-search { display: flex; align-items: center; position: relative; }
.header-search-input {
  width: 180px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: transparent;
  padding: 0 var(--s24) 0 28px;
  font-size: var(--t-12);
  color: var(--ink-1);
  transition: border-color var(--dt-fast), width var(--dt-fast);
}
.header-search-input::placeholder { color: var(--ink-3); }
.header-search-input:focus { border-color: var(--accent); outline: none; width: 240px; }
.header-search-icon { position: absolute; left: 8px; color: var(--ink-3); pointer-events: none; }
.header-search-clear {
  position: absolute; right: 4px;
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border: none; background: none; color: var(--ink-3);
  cursor: pointer; border-radius: var(--r-full); padding: 0;
}
.header-search-clear:hover { color: var(--ink-1); background: var(--accent-dim); }

/* ── Profile menu (ported) ── */
.profile-menu { position: relative; display: flex; align-items: center; }
.profile-menu-trigger {
  border: 1px solid transparent; background: transparent; border-radius: var(--r1);
  padding: 3px var(--s8); cursor: pointer; font: inherit;
}
.profile-menu-trigger:hover,
.profile-menu-trigger[aria-expanded="true"] { border-color: var(--line); background: var(--surface); }
.profile-menu-chevron { color: var(--ink-3); transition: transform var(--dt-fast); }
.profile-menu-chevron--open { transform: rotate(180deg); }
.profile-menu-panel {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 210px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: var(--s8); z-index: 60;
}
.profile-menu-header { padding: var(--s4) var(--s8) var(--s8); }
.profile-menu-name { font-size: var(--t-13); font-weight: 600; color: var(--ink-1); }
.profile-menu-email { font-size: var(--t-11); color: var(--ink-3); margin-top: 2px; word-break: break-all; }
.profile-menu-divider { height: 1px; background: var(--line); margin: var(--s4) 0 var(--s8); }
.profile-menu-section-label {
  font-size: var(--t-10); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); padding: 0 var(--s8) var(--s4);
}
.profile-menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s8);
  width: 100%; border: none; background: transparent; border-radius: var(--r1);
  padding: var(--s4) var(--s8); font-size: var(--t-12); color: var(--ink-2);
  cursor: pointer; text-align: left;
}
.profile-menu-item:hover { background: var(--bg); color: var(--ink-1); }
.profile-menu-item--active { color: var(--accent); font-weight: 600; }

/* ── Sidebar live counters ── */
.nav-count {
  margin-left: auto;
  font-size: var(--t-10);
  font-weight: 600;
  color: var(--ink-3);
  background: var(--bg-inset);
  border-radius: var(--r-full);
  min-width: 18px;
  height: 16px;
  padding: 0 var(--s4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-link.active .nav-count { color: var(--accent); background: var(--accent-dim); }

.tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-full);
  background: var(--err); color: var(--surface);
  font-size: var(--t-10); font-weight: 700; line-height: 18px;
  margin-left: var(--s4);
}

/* ── Form column + split (ported, cde- prefix) ── */
.cde-form { max-width: 720px; }
.cde-form-split {
  display: grid;
  grid-template-columns: minmax(0, 720px) 400px;
  column-gap: 75px;
  row-gap: var(--s16);
  align-items: start;
  justify-content: start;
}
.cde-form-split-left { min-width: 0; }
.cde-form-split-right { min-width: 0; align-self: start; }
.cde-form-header { margin-bottom: var(--s16); }
@media (max-width: 1024px) {
  .cde-form-split { grid-template-columns: 1fr; }
}
.cde-form .section-label { font-size: var(--t-11); }
.cde-form .form-label { font-size: var(--t-12); }
.cde-form .form-input--bare { font-size: var(--t-15); }
.cde-form .form-input--bare.bare-title { font-size: 1.375rem; }
.cde-form .selectable { font-size: var(--t-14); }
.cde-form .form-input { font-size: var(--t-15); }
.cde-form .tabs { margin-top: var(--s4); margin-bottom: var(--s20); width: max-content; }
.cde-form .tab {
  padding: var(--s8) var(--s12);
  font-size: var(--t-12);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.cde-form .tab-check { width: 11px; height: 11px; margin-right: 4px; flex: 0 0 auto; color: var(--ok); }
.cde-form .tab.done:not(.active) { color: var(--ink-2); }

.stage-placeholder { padding: var(--s24) 0; color: var(--ink-3); font-size: var(--t-14); }

.form-back {
  display: inline-flex; align-items: center; gap: var(--s4);
  font-size: var(--t-12); font-weight: 500; letter-spacing: 0.02em;
  color: var(--ink-3); cursor: pointer; background: none; border: none; padding: 0;
  margin-bottom: var(--s24); transition: color var(--dt-fast);
}
.form-back:hover { color: var(--ink-1); }

.form-section {
  padding-bottom: var(--s20);
  margin-bottom: var(--s20);
  border-bottom: 1px solid var(--line);
}
.form-section:last-of-type { border-bottom: none; margin-bottom: 0; }

/* ── Row + drawer content vocabulary (ported) ── */
.list-row-clickable { cursor: pointer; transition: background var(--dt-fast); }
.list-row-clickable:hover td { background: var(--accent-dim); }
.list-row-selected td { background: var(--accent-dim); }

.detail-badges { display: flex; flex-wrap: wrap; gap: var(--s8); margin-bottom: var(--s20); }
.detail-section { padding-bottom: var(--s20); margin-bottom: var(--s20); border-bottom: 1px solid var(--line); }
.detail-section:last-child { border-bottom: none; margin-bottom: 0; }
.detail-label {
  font-size: var(--t-10); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: var(--s8);
}
.detail-text { font-size: var(--t-14); color: var(--ink-1); line-height: 1.65; white-space: pre-line; }
.detail-list { margin: 0; padding-left: var(--s16); font-size: var(--t-14); color: var(--ink-1); line-height: 1.65; }
.detail-list li { margin-bottom: var(--s4); }
.detail-list li:last-child { margin-bottom: 0; }
.detail-row { font-size: var(--t-14); color: var(--ink-1); margin-bottom: var(--s8); display: flex; align-items: baseline; gap: var(--s8); }
.detail-row:last-child { margin-bottom: 0; }
.detail-row-label { font-weight: 600; font-size: var(--t-12); color: var(--ink-2); min-width: 80px; flex-shrink: 0; }

.completion-bar { display: flex; gap: 2px; align-items: center; }
.completion-seg { width: 8px; height: 3px; background: var(--line); }
.completion-seg.filled { background: var(--accent); }

/* ════════════════════════════════════════════
   CdE domain widgets
   ════════════════════════════════════════════ */

/* ── Répertoire: tree + rows ── */
.rep-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--s24);
  align-items: start;
}
@media (max-width: 1024px) { .rep-layout { grid-template-columns: 1fr; } }
.rep-tree { position: sticky; top: 0; font-size: var(--t-13); }
.rep-tree-node {
  display: flex; align-items: center; gap: var(--s4);
  width: 100%; border: none; background: none; font: inherit; text-align: left;
  padding: var(--s4) var(--s8); border-radius: var(--r1);
  color: var(--ink-2); cursor: pointer;
}
.rep-tree-node:hover { background: var(--bg-inset); color: var(--ink-1); }
.rep-tree-node.active { color: var(--accent); font-weight: 600; background: var(--accent-dim); }
.rep-tree-node .rep-tree-count { margin-left: auto; font-size: var(--t-11); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rep-tree-indent-1 { padding-left: var(--s20); }
.rep-tree-indent-2 { padding-left: var(--s32); }
.rep-tier-head {
  font-size: var(--t-11); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3); margin: var(--s20) 0 var(--s8);
  display: flex; align-items: baseline; gap: var(--s8);
}
.rep-tier-head:first-child { margin-top: 0; }
.rep-area-head {
  font-size: var(--t-12); font-weight: 600; color: var(--ink-2);
  margin: var(--s12) 0 var(--s4);
  display: flex; align-items: center; gap: var(--s8);
}
.rep-area-head::after { content: ''; flex: 1; border-top: 1px solid var(--line); }
.rep-path { font-family: var(--font-mono); font-size: var(--t-10); color: var(--ink-3); }
.rep-foot {
  margin-top: var(--s16); padding-top: var(--s8); border-top: 1px solid var(--line);
  font-size: var(--t-11); color: var(--ink-3);
  display: flex; gap: var(--s12); align-items: baseline; flex-wrap: wrap;
}

/* state chips: colour carries MEANING only (spec §0) */
.state-chip {
  display: inline-flex; align-items: center; gap: var(--s4);
  font-size: var(--t-11); font-weight: 500;
  padding: 1px var(--s8);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  color: var(--ink-2);
  white-space: nowrap;
}
.state-chip--live { color: var(--ok); border-color: var(--ok); }
.state-chip--cycle { color: var(--ink-1); border-color: var(--line-strong); }
.state-chip--documented { color: var(--ink-3); }
.state-chip--tomodel { color: var(--ink-3); border-style: dashed; }
.state-chip--draft { color: var(--ink-3); font-style: italic; border-style: dashed; }
.state-chip--superseded { color: var(--ink-3); text-decoration: line-through; }
.state-chip--returned { color: var(--err); border-color: var(--err); }
.state-chip--warn { color: var(--warn); border-color: var(--warn); }

.variant-chip {
  display: inline-flex; font-family: var(--font-mono); font-size: var(--t-10);
  padding: 0 var(--s4); border: 1px solid var(--line); border-radius: var(--r1);
  color: var(--ink-3); background: none; cursor: pointer;
}
.variant-chip:hover, .variant-chip.on { color: var(--accent); border-color: var(--accent); }

/* undeclared BPMN-lane involvement: real but undocumented → ghost */
.ghost-chip {
  display: inline-flex; font-size: var(--t-11); padding: 0 var(--s8);
  border: 1px dashed var(--line-strong); border-radius: var(--r-full); color: var(--ink-3);
}

/* ── Fiche: diagram + vertical rail ── */
.fiche-layout {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: var(--s24);
}
.fiche-layout--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1024px) {
  .fiche-layout, .fiche-layout--wide { grid-template-columns: 1fr; overflow-y: auto; }
}
.fiche-left { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
.fiche-rail-col { min-width: 0; min-height: 0; overflow-y: auto; padding-bottom: var(--s24); }
.fiche-head { display: flex; align-items: flex-start; gap: var(--s16); margin-bottom: var(--s12); }
.fiche-head-main { flex: 1; min-width: 0; }

.bpmn-frame { border: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.bpmn-toolbar {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s8);
  border-bottom: 1px solid var(--line);
  background: var(--bg-inset);
  font-size: var(--t-12);
}
.bpmn-toolbar .spacer { flex: 1; }
.bpmn-canvas { height: 480px; min-height: 280px; background: var(--surface); position: relative; }
.bpmn-canvas--fill { flex: 1 1 auto; height: auto; }
.bpmn-canvas .bjs-powered-by { display: none; }
.bpmn-empty {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s12); color: var(--ink-3); font-size: var(--t-13); padding: var(--s24);
  text-align: center;
}

/* roles band under the diagram */
.roles-band { border: 1px solid var(--line); border-top: none; padding: var(--s8) var(--s12); }
.roles-band-head {
  display: flex; align-items: center; gap: var(--s8);
  font-size: var(--t-10); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); cursor: pointer;
}
.roles-chips { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s4); }
.role-chip {
  display: inline-flex; align-items: center; gap: var(--s4);
  font-size: var(--t-11); padding: 1px var(--s8);
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: none; cursor: pointer; color: var(--ink-2); font-family: inherit;
}
.role-chip:hover { border-color: var(--accent); color: var(--accent); }
.role-chip .role-chip-person { color: var(--ink-1); font-weight: 500; }
.role-chip--unassigned .role-chip-person { color: var(--ink-3); font-style: italic; font-weight: 400; }
.roles-table { width: 100%; border-collapse: collapse; font-size: var(--t-12); margin-top: var(--s8); }
.roles-table th {
  text-align: left; font-size: var(--t-10); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3);
  padding: var(--s4) var(--s8); border-bottom: 1px solid var(--line);
}
.roles-table td { padding: var(--s4) var(--s8); border-bottom: 1px solid var(--line); vertical-align: middle; }
.roles-table tr:last-child td { border-bottom: none; }
.roles-table .stale { opacity: 0.5; text-decoration: line-through; }

/* the vertical rail — accordion of the 8 steps */
.rail-step { border-bottom: 1px solid var(--line); }
.rail-step-head {
  display: flex; align-items: center; gap: var(--s8);
  width: 100%; padding: var(--s8) var(--s8);
  border: none; background: none; font: inherit; text-align: left; cursor: pointer;
}
.rail-step-head:hover { background: var(--bg-inset); }
.rail-num {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-full);
  border: 1px solid var(--line-strong);
  font-size: var(--t-11); font-weight: 600; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.rail-step--done .rail-num { border-color: var(--ok); color: var(--ok); }
.rail-step--current { border-left: 2px solid var(--accent); }
.rail-step--current .rail-num { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.rail-step--current .rail-label { font-weight: 600; color: var(--ink-1); }
.rail-step--returned .rail-num { border-color: var(--err); color: var(--err); }
.rail-label { font-size: var(--t-13); color: var(--ink-2); }
.rail-step--future .rail-label { color: var(--ink-3); }
.rail-side { margin-left: auto; display: inline-flex; align-items: center; gap: var(--s4); }
.rail-evidence { font-size: var(--t-11); color: var(--ink-3); padding: 0 var(--s8) var(--s8) 36px; }
.rail-evidence--returned { color: var(--err); }
.rail-panel { padding: var(--s8) var(--s8) var(--s16) 36px; }
.gate-dots { display: inline-flex; gap: 2px; }
.gate-dot { width: 6px; height: 6px; border-radius: var(--r-full); border: 1px solid var(--ink-3); }
.gate-dot.on { background: var(--ok); border-color: var(--ok); }

/* gate checks inside a panel */
.gate-check { padding: var(--s8) 0; border-bottom: 1px solid var(--line); }
.gate-check:last-of-type { border-bottom: none; }
.gate-check-row { display: flex; align-items: flex-start; gap: var(--s8); }
.gate-check-row input[type="checkbox"] { margin-top: 3px; accent-color: var(--accent); }
.gate-check-label { font-size: var(--t-13); color: var(--ink-1); }
.gate-check-meta { font-size: var(--t-11); color: var(--ink-3); margin-top: 2px; }
.gate-owner { font-size: var(--t-11); color: var(--ink-3); font-style: italic; margin-bottom: var(--s8); }

/* decision blocks (PMO's .pq-decision idiom) */
.decision { display: flex; flex-direction: column; gap: var(--s8); margin-top: var(--s16); }
.decision-help { font-size: var(--t-13); color: var(--ink-3); font-style: italic; margin: 0; }

/* séance journal */
.seance-card { border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s12); margin-bottom: var(--s8); }
.seance-head { display: flex; align-items: baseline; gap: var(--s8); flex-wrap: wrap; }
.seance-date { font-weight: 600; font-size: var(--t-13); color: var(--ink-1); }
.seance-kind { font-size: var(--t-11); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.seance-participants { font-size: var(--t-12); color: var(--ink-3); margin-top: 2px; }
.seance-body { font-size: var(--t-13); color: var(--ink-1); margin-top: var(--s8); white-space: pre-wrap; }
.seance-fold {
  display: inline-flex; align-items: center; gap: var(--s4);
  border: none; background: none; padding: 0; margin-top: var(--s8);
  font-size: var(--t-12); color: var(--accent); cursor: pointer; font-family: inherit;
}
.seance-transcript {
  margin-top: var(--s8); padding: var(--s8) var(--s12);
  border-left: 2px solid var(--line-strong);
  font-size: var(--t-12); color: var(--ink-2); white-space: pre-wrap;
  max-height: 320px; overflow-y: auto;
}

/* gouvernance queue cards */
.gov-checkline { display: flex; flex-wrap: wrap; gap: var(--s12); margin: var(--s8) 0; }
.gov-checkline span { display: inline-flex; align-items: center; gap: var(--s4); font-size: var(--t-12); color: var(--ink-2); }
.gov-checkline .ok { color: var(--ok); }
.gov-checkline .pending { color: var(--ink-3); }
.capacity-bar { display: inline-flex; align-items: center; gap: var(--s8); font-size: var(--t-12); color: var(--ink-2); }
.capacity-track { width: 90px; height: 4px; background: var(--bg-inset); border-radius: var(--r1); overflow: hidden; }
.capacity-fill { height: 100%; background: var(--accent); }
.capacity-fill--over { background: var(--err); }

/* observation tiles: neutral in target, colour only when wrong */
.kpi-tile { border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s12); min-width: 150px; }
.kpi-name { font-size: var(--t-11); color: var(--ink-3); }
.kpi-value { font-size: var(--t-20); font-weight: 600; color: var(--ink-1); font-variant-numeric: tabular-nums; margin: var(--s4) 0; }
.kpi-tile--off .kpi-value { color: var(--warn); }
.kpi-tile--bad .kpi-value { color: var(--err); }
.kpi-meta { font-size: var(--t-11); color: var(--ink-3); }

/* bpmn-js lane/element highlight (added by BpmnCanvas.highlightByName) */
.cde-highlight .djs-visual > rect,
.cde-highlight .djs-visual > path,
.cde-highlight .djs-visual > polygon {
  stroke: var(--accent) !important;
  stroke-width: 2.5px !important;
  fill: var(--accent-dim) !important;
}

/* read-only gate marker (a user sees ✓/○, not a dead checkbox) */
.gate-glyph { display: inline-block; width: 13px; text-align: center; color: var(--ink-3); }
.gate-check-row.checked .gate-glyph { color: var(--ok); }

/* ── Print: the inventaire and handover are artefacts, not the whole app ──
   Hide the shell chrome so window.print() yields a clean sheet. */
@media print {
  .topbar, .sidebar, .app-nav, .toolbar, .tabs, .btn, .btn-icon, .filter-chips,
  .header-search, .header-actions, .nav-count { display: none !important; }
  body:has(.shell) { overflow: visible; }
  .content { height: auto; overflow: visible; }
  .shell { display: block; }
  .page { padding: 0; }
  .card, .table { break-inside: avoid; box-shadow: none; border-color: #ccc; }
}