/* ============================================================
   Suivi budgétaire — feuille de style unique
   Organisation : variables & thèmes, coquille (sidebar/header),
   KPI & cartes, filtres/toolbar, tableaux denses, drawer de saisie,
   menus contextuels, badges & pastilles, responsive.
   ============================================================ */
  :root {
    --bg:#F4F6F9; --surface:#FFFFFF; --surface-2:#F5F7FA;
    --border:#E4E8EF; --border-strong:#D3D9E3; --grid:#EEF1F6;
    --ink:#1B2433; --ink-2:#545F73; --muted:#8A94A6;
    --accent:#2E4A7B; --accent-bright:#3A5D9C; --accent-soft:#EAF0F9;
    --engage:#6E93C6; --facture:#2E4A7B;
    --good:#2F9E44; --good-soft:#E6F4EA;
    --warn:#B5730A; --warn-soft:#FAF0DB;
    --crit:#C93C3C; --crit-soft:#FBE9E9;
    --track:#E7EBF1;
    --shadow:0 1px 2px rgba(20,30,50,.06), 0 4px 16px rgba(20,30,50,.05);
    --shadow-lg:0 10px 40px rgba(20,30,50,.18);
    --radius:10px; --radius-sm:7px;
    --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg:#0E141F; --surface:#161E2B; --surface-2:#1B2432;
      --border:#273241; --border-strong:#34414F; --grid:#212B39;
      --ink:#E9EEF5; --ink-2:#A2AEC0; --muted:#6E7A8C;
      --accent:#6E93C6; --accent-bright:#8FB0DB; --accent-soft:#1C2A3E;
      --engage:#5E82B8; --facture:#7DA1D4;
      --good:#46C46A; --good-soft:#152E1D;
      --warn:#E0A23A; --warn-soft:#2E2610;
      --crit:#E56A6A; --crit-soft:#301919;
      --track:#222C3A;
      --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.28);
      --shadow-lg:0 12px 44px rgba(0,0,0,.5);
    }
  }
  :root[data-theme="light"] {
    --bg:#F4F6F9; --surface:#FFFFFF; --surface-2:#F5F7FA;
    --border:#E4E8EF; --border-strong:#D3D9E3; --grid:#EEF1F6;
    --ink:#1B2433; --ink-2:#545F73; --muted:#8A94A6;
    --accent:#2E4A7B; --accent-bright:#3A5D9C; --accent-soft:#EAF0F9;
    --engage:#6E93C6; --facture:#2E4A7B;
    --good:#2F9E44; --good-soft:#E6F4EA; --warn:#B5730A; --warn-soft:#FAF0DB;
    --crit:#C93C3C; --crit-soft:#FBE9E9; --track:#E7EBF1;
    --shadow:0 1px 2px rgba(20,30,50,.06), 0 4px 16px rgba(20,30,50,.05);
    --shadow-lg:0 10px 40px rgba(20,30,50,.18);
  }
  :root[data-theme="dark"] {
    --bg:#0E141F; --surface:#161E2B; --surface-2:#1B2432;
    --border:#273241; --border-strong:#34414F; --grid:#212B39;
    --ink:#E9EEF5; --ink-2:#A2AEC0; --muted:#6E7A8C;
    --accent:#6E93C6; --accent-bright:#8FB0DB; --accent-soft:#1C2A3E;
    --engage:#5E82B8; --facture:#7DA1D4;
    --good:#46C46A; --good-soft:#152E1D; --warn:#E0A23A; --warn-soft:#2E2610;
    --crit:#E56A6A; --crit-soft:#301919; --track:#222C3A;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.28);
    --shadow-lg:0 12px 44px rgba(0,0,0,.5);
  }

  * { box-sizing:border-box; }
  body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
    font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; }
  .num { font-variant-numeric:tabular-nums; }
  h1,h2,h3 { margin:0; text-wrap:balance; }
  button { font-family:inherit; cursor:pointer; }
  input,select { font-family:inherit; }
  ::selection { background:var(--accent-soft); }

  /* ---------- shell ---------- */
  .app { display:grid; grid-template-columns:210px 1fr; min-height:100vh; }
  #navToggle { position:absolute; right:-11px; top:22px; width:22px; height:22px; padding:0; z-index:20;
    border:1px solid var(--border-strong); border-radius:50%; background:var(--surface); color:var(--muted);
    cursor:pointer; display:grid; place-items:center; box-shadow:0 1px 4px rgba(0,0,0,.12); }
  #navToggle svg { width:13px; height:13px; }
  #navToggle:hover { color:var(--accent); border-color:var(--accent); }
  body.navmin #navToggle svg { transform:rotate(180deg); }
  /* menu repliable en mode icônes */
  body.navmin .app { grid-template-columns:56px 1fr; }
  body.navmin .brand > div, body.navmin .nav-label, body.navmin .nav-item .count { display:none; }
  .side-foot { padding:11px; border-top:1px solid var(--border); display:flex; align-items:center; gap:9px; }
  .side-foot #userBadge { width:29px; height:29px; border-radius:50%; background:var(--accent-soft);
    color:var(--accent); display:grid; place-items:center; font-weight:700; font-size:12.5px; flex:none; }
  .side-foot .sf-txt { font-size:12.5px; min-width:0; }
  .side-foot #logoutBtn { margin-left:auto; }
  body.navmin .side-foot { flex-direction:column; gap:7px; padding:11px 6px; }
  body.navmin .side-foot .sf-txt { display:none; }
  body.navmin .side-foot #logoutBtn { margin-left:0; }
  body.navmin .brand { justify-content:center; padding:16px 8px 13px; }
  body.navmin .nav-item { justify-content:center; padding:9px 0; font-size:0; gap:0; }
  body.navmin .nav-item svg { width:19px; height:19px; }
  .sidebar { background:var(--surface); border-right:1px solid var(--border);
    display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
  .brand { display:flex; align-items:center; gap:10px; padding:16px 16px 13px;
    border-bottom:1px solid var(--border); }
  .brand .logo { width:30px; height:30px; border-radius:8px; flex:none;
    background:linear-gradient(150deg,var(--accent),var(--accent-bright));
    display:grid; place-items:center; color:#fff; }
  .brand .logo svg{ width:17px;height:17px; }
  .brand b { font-size:14.5px; letter-spacing:-.2px; }
  .brand span { display:block; font-size:11px; color:var(--muted); font-weight:500; }
  nav { padding:8px; display:flex; flex-direction:column; gap:1px; overflow-y:auto; flex:1; }
  .nav-label { font-size:10.5px; text-transform:uppercase; letter-spacing:.09em;
    color:var(--muted); font-weight:700; padding:11px 10px 4px; }
  .nav-item { display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:8px;
    color:var(--ink-2); text-decoration:none; font-weight:500; font-size:13px;
    border:none; background:none; width:100%; text-align:left; transition:background .12s,color .12s; }
  .nav-item svg { width:17px; height:17px; flex:none; opacity:.85; }
  .nav-item:hover { background:var(--surface-2); color:var(--ink); }
  .nav-item.active { background:var(--accent-soft); color:var(--accent); font-weight:700; box-shadow:inset 3px 0 0 var(--accent); }
  .nav-item.active svg { opacity:1; }
  .nav-item .count { margin-left:auto; font-size:11px; color:var(--muted);
    background:var(--surface-2); padding:1px 7px; border-radius:20px; font-variant-numeric:tabular-nums; }
  .nav-item.active .count { background:var(--surface); color:var(--accent); }

  .main { min-width:0; display:flex; flex-direction:column; }
  .topbar { position:sticky; top:0; z-index:5; background:color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--border);
    display:flex; align-items:center; gap:12px; padding:11px 22px; }
  .page-head { display:flex; align-items:center; gap:12px; min-width:0; }
  .page-icon { width:38px; height:38px; border-radius:10px; background:var(--accent); color:#fff;
    display:grid; place-items:center; flex:none; box-shadow:var(--shadow); }
  .page-icon svg{ width:20px; height:20px; }
  .eyebrow { font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--accent);
    font-weight:800; margin-bottom:1px; }
  .topbar h1 { font-size:19px; letter-spacing:-.4px; font-weight:700; line-height:1.1; }
  .topbar .sub { color:var(--muted); font-size:12.5px; font-weight:500; margin-left:2px; }
  .search { margin-left:auto; display:flex; align-items:center; gap:8px; background:var(--surface);
    border:1px solid var(--border); border-radius:8px; padding:7px 11px; color:var(--muted);
    min-width:210px; font-size:13px; }
  .search svg{ width:15px;height:15px; }
  .search input { border:none; background:none; outline:none; color:var(--ink); font-size:13px; width:100%; }
  .btn { display:inline-flex; align-items:center; gap:7px; border-radius:8px; padding:8px 13px;
    font-size:13px; font-weight:600; border:1px solid var(--border-strong); background:var(--surface);
    color:var(--ink); transition:.12s; white-space:nowrap; }
  .btn svg{ width:15px;height:15px; }
  .btn:hover { border-color:var(--accent); color:var(--accent); }
  .btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
  .btn.primary:hover { background:var(--accent-bright); color:#fff; }
  .btn.sm { padding:5px 10px; font-size:12px; }
  .icon-btn { display:grid; place-items:center; width:36px; height:36px; border-radius:8px;
    border:1px solid var(--border); background:var(--surface); color:var(--ink-2); }
  .icon-btn svg{ width:17px;height:17px; }
  .icon-btn:hover { color:var(--accent); border-color:var(--accent); }
  .icon-btn.sm { width:27px; height:27px; border-radius:7px; }
  .icon-btn.sm svg{ width:14px; height:14px; }

  .content { padding:20px 22px; display:flex; flex-direction:column; gap:18px; }
  .view { display:none; flex-direction:column; gap:18px; }
  .view.active { display:flex; animation:fade .2s ease; }
  @keyframes fade { from{opacity:0; transform:translateY(4px);} to{opacity:1;transform:none;} }
  @media (prefers-reduced-motion:reduce){ .view.active,.drawer{animation:none !important; transition:none !important;} }

  /* ---------- KPI ---------- */
  .kpis { display:grid; grid-template-columns:repeat(6,1fr); gap:11px; }
  .kpi { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:12px 14px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:5px; }
  .kpi .k-label { font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
    font-weight:700; display:flex; align-items:center; gap:6px; }
  .kpi .k-dot { width:8px; height:8px; border-radius:3px; flex:none; }
  .kpi .k-val { font-size:20px; font-weight:680; letter-spacing:-.5px; }
  .kpi .k-val small { font-size:12px; color:var(--muted); font-weight:600; }
  .kpi .k-sub { font-size:11.5px; color:var(--ink-2); font-weight:500; }
  .up { color:var(--crit); } .ok { color:var(--good); }

  /* ---------- cards ---------- */
  .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:var(--shadow); overflow:hidden; }
  .card-head { display:flex; align-items:center; gap:11px; padding:12px 16px; border-bottom:1px solid var(--border); }
  .card-head h2 { font-size:14.5px; font-weight:640; letter-spacing:-.2px; }
  .card-head .hint { color:var(--muted); font-size:12px; }
  .card-head .spacer { margin-left:auto; }
  .grid-2 { display:grid; grid-template-columns:1.5fr 1fr; gap:18px; align-items:start; }
  @media (max-width:1000px){ .grid-2{ grid-template-columns:1fr; } }

  /* ---------- filters / toolbar ---------- */
  .toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
  .chip-select { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600;
    color:var(--ink-2); background:var(--surface); border:1px solid var(--border); border-radius:8px;
    padding:6px 11px; cursor:pointer; }
  .chip-select svg{ width:13px;height:13px; opacity:.6; }
  .chip-select.on { color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }
  /* interrupteur (on/off) vs liste déroulante : distinction visuelle */
  .chip-toggle { padding-left:9px; }
  .chip-toggle::before { content:""; width:9px; height:9px; border-radius:50%; border:1.6px solid var(--muted);
    display:inline-block; flex:none; box-sizing:border-box; }
  .chip-toggle.on { color:var(--good); border-color:var(--good); background:var(--good-soft); }
  .chip-toggle.on::before { background:var(--good); border-color:var(--good); box-shadow:inset 0 0 0 2px var(--good-soft); }
  thead th[data-sort]{ cursor:pointer; user-select:none; white-space:nowrap; }
  thead th[data-sort]:hover{ color:var(--accent); }
  .bulk{ border:none; background:none; cursor:pointer; font-size:12px; color:var(--accent); opacity:.75; padding:0 3px; }
  .qfilter{ margin-left:auto; border:1px solid var(--border); border-radius:8px; padding:6px 10px;
    font:inherit; font-size:12.5px; width:185px; background:var(--surface); color:var(--ink); }
  .qfilter:focus{ outline:none; border-color:var(--accent); }
  .draghandle{ cursor:grab; color:var(--muted); margin-right:7px; vertical-align:middle; user-select:none; font-size:12px; }
  .draghandle:hover{ color:var(--accent); }
  tr.dragrow{ opacity:.45; }
  .bulk:hover{ opacity:1; }
  thead th.sorted{ color:var(--accent); }
  .ar{ font-size:9px; }
  .fmenu{ position:absolute; z-index:30; background:var(--surface); border:1px solid var(--border); border-radius:9px;
    box-shadow:var(--shadow-lg); padding:4px; min-width:170px; max-height:280px; overflow:auto; }
  .fopt{ padding:7px 10px; border-radius:6px; font-size:13px; cursor:pointer; white-space:nowrap; }
  .fopt:hover{ background:var(--accent-soft); color:var(--accent); }
  .fopt.cur{ font-weight:700; color:var(--accent); }
  .fopt.fixed{ border-bottom:1px solid var(--border); color:var(--muted); font-size:12px; }
  .fdate{ padding:10px 12px; display:grid; grid-template-columns:auto 1fr; gap:7px 9px; align-items:center; min-width:230px; }
  .fdate label{ font-size:11px; color:var(--muted); font-weight:700; }
  .fdate input{ border:1px solid var(--border); border-radius:7px; padding:5px 8px; font:inherit; font-size:12.5px; background:var(--surface); color:var(--ink); width:110px; }
  .fdate-btns{ grid-column:1/3; display:flex; gap:8px; justify-content:flex-end; margin-top:3px; }
  .fhead{ padding:7px 10px 3px; font-size:10px; text-transform:uppercase; letter-spacing:.07em;
    color:var(--muted); font-weight:800; border-top:1px solid var(--border); margin-top:2px; }
  .fhead:first-child{ border-top:none; margin-top:0; }
  .fsearch{ width:100%; box-sizing:border-box; border:1px solid var(--border-strong); background:var(--surface);
    color:var(--ink); border-radius:6px; padding:6px 9px; font:inherit; font-size:12.5px; margin-bottom:4px; outline:none; }
  .fsearch:focus{ border-color:var(--accent); }
  .mopt{ display:flex; align-items:center; gap:9px; }
  .chk{ width:14px; height:14px; border-radius:4px; border:1.6px solid var(--border-strong); flex:none; box-sizing:border-box; }
  .chk.on{ background:var(--accent); border-color:var(--accent); box-shadow:inset 0 0 0 2px var(--surface); }
  .mclear{ color:var(--muted); border-top:1px solid var(--border); margin-top:2px; font-size:12px; }
  .eng-link{ color:var(--accent); }
  .b-auto { background:var(--accent-soft); color:var(--accent); border:1px dashed var(--accent); }
  .b-lock { background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent); cursor:pointer; }
  .engprop { cursor:pointer; }   /* proposition de rattachement : un clic la confirme (#118) */
  .statut-cell, .statut-dom { cursor:pointer; }
  .line.locked td:not(.statut-cell) { opacity:.65; }
  .lot-row.locked td:not(.statut-dom) { opacity:.75; }
  .menu-cell { cursor:pointer; }
  .menu-cell:hover { box-shadow:inset 0 0 0 1px var(--border-strong); background:var(--surface); }
  .eng-pick { cursor:pointer; color:var(--muted); }
  .eng-pick:hover { color:var(--accent); }
  .eng-pick.eng-link { color:var(--accent); font-size:11.5px; }
  /* lien à créer = badge ambre « à relier / à rattacher / à associer », partout identique */
  td.ell { max-width:190px; overflow:hidden; text-overflow:ellipsis; }
  /* engagements : 11 colonnes dont 5 textuelles — plafonds par colonne pour tenir sans ascenseur */

  .stdot{ display:inline-block; width:11px; height:11px; border-radius:50%; vertical-align:middle;
    box-shadow:0 0 0 2px color-mix(in srgb, currentColor 0%, var(--surface)); cursor:help; }
  .aprx{ border-bottom:1px dashed var(--accent); }
  .nbadge.aprx{ border:1px dashed var(--accent); background:transparent; }
  .nbadge{ display:inline-block; background:var(--accent-soft); color:var(--accent); font-weight:800;
    font-size:11px; padding:1px 8px; border-radius:9px; white-space:nowrap; }
  .uplvl{ background:color-mix(in srgb, #B58900 14%, transparent); border-bottom:1px dotted #B58900;
    border-radius:3px; padding:0 3px; }
  tr.rail-a td:nth-child(4){ box-shadow:inset 4px 0 0 var(--accent); padding-left:12px; }
  tr.rail-b td:nth-child(4){ box-shadow:inset 4px 0 0 color-mix(in srgb, var(--accent) 45%, var(--surface)); padding-left:12px; }
  .rap-date { font-size:9.5px; color:var(--muted); font-variant-numeric:tabular-nums; margin-top:1px; line-height:1; }
  .seg { display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:3px; gap:2px; }
  .seg button { border:none; background:none; padding:6px 14px; border-radius:7px; font-size:13px;
    font-weight:600; color:var(--ink-2); }
  .seg button.on { background:var(--surface); color:var(--accent); box-shadow:var(--shadow); }
  .seg button:disabled { opacity:.35; cursor:default; }
  #histSeg button { font-size:15px; padding:4px 10px; cursor:pointer; }
  .unit-seg { padding:2px; } .unit-seg button { padding:6px 11px; font-size:12.5px; min-width:36px; }

  /* ---------- table (dense, Excel-like) ---------- */
  .tablewrap { overflow:auto; max-height:calc(100vh - 210px); }
  .grid-tbl thead th { position:sticky; top:0; background:var(--surface); z-index:6; box-shadow:0 1px 0 var(--border); }
  td.acts, th.ca:last-child { white-space:nowrap; }
  table { border-collapse:collapse; width:100%; font-size:12px; }
  thead th { text-align:center; font-size:10px; text-transform:uppercase; letter-spacing:.04em;
    color:var(--muted); font-weight:700; padding:5px 6px; border-bottom:1px solid var(--border-strong);
    white-space:nowrap; background:var(--surface-2); position:sticky; top:0; z-index:1; }
  thead th:first-child { text-align:left; }  /* 1re colonne à gauche, les autres centrées */
  tbody td { padding:2.5px 6px; border-bottom:1px solid var(--grid); text-align:left; white-space:nowrap; line-height:1.25; overflow:hidden; text-overflow:ellipsis; }
  /* le tableau s'ajuste à l'écran — colonnes courtes intégrales (largeur px posée sur le th),
     colonnes de texte partagées selon l'importance, texte tronqué avec ellipse + infobulle */
  .grid-tbl.fitcols { table-layout:fixed; }
  td.ra, .money, .lot-tot, .poste-tot, .tot-val { text-align:right; }
  td.ca { text-align:center; }
  /* faint column separators on numeric grids */
  .grid-tbl tbody td:not(:first-child), .grid-tbl thead th:not(:first-child){ border-left:1px solid var(--grid); }
  /* zébrage indépendant de .line (sinon un libellé sur deux passe en gras) */
  .zeb.alt > td, .line.alt > td { background:color-mix(in srgb, var(--surface-2) 60%, transparent); }
  .lot-row td { background:color-mix(in srgb, var(--accent-soft) 72%, var(--surface)); font-weight:700;
    font-size:12px; color:var(--ink); padding:4px 8px; border-top:1px solid var(--border); }
  .lot-row .lot-name { color:var(--accent); font-weight:700; font-size:12.5px; }
  :root[data-theme="dark"] .lot-row .lot-name{ color:var(--accent-bright); }
  .lot-row .lot-tot { font-weight:800; }
  .lot-row .money { font-weight:700; }
  .lot-caret, .grp-caret, .pret-caret, .sub-caret, .engfac-caret, .four-caret { border:none; background:none; color:var(--accent); cursor:pointer; font-size:15px; font-weight:700; padding:0; margin-right:6px; vertical-align:middle; display:inline-block; width:16px; text-align:center; line-height:1; }
  .lot-row.collapsed .lot-caret, .poste-row.collapsed .grp-caret { color:var(--muted); }
  td.datecell{ position:relative; padding-left:26px; }  /* réserve seulement la place du caret : colonne compacte, dates alignées */
  td.datecell .caret{ position:absolute; left:5px; top:50%; transform:translateY(-50%); margin-right:0; }
  /* chiffrage : en-tête de poste (bandeau clair) + total général (bas) */
  .poste-row td { background:color-mix(in srgb, var(--accent-soft) 72%, var(--surface)); padding:5px 8px;
    border-top:1px solid var(--border); }
  .poste-row .poste-name { font-weight:700; font-size:12.5px; color:var(--accent); }
  .poste-row .poste-tot { text-align:right; font-weight:800; font-size:13.5px; color:var(--accent); }
  :root[data-theme="dark"] .poste-row .poste-name, :root[data-theme="dark"] .poste-row .poste-tot{ color:var(--accent-bright); }
  .souslot { color:var(--ink); font-size:11.5px; font-weight:400; }
  .tot-row td { background:var(--surface-2); border-top:2px solid var(--border-strong); padding:4px 6px; }
  .tot-row .tot-lab { text-align:left; font-weight:800; font-size:12.5px; color:var(--ink); }
  .tot-row .tot-val { text-align:right; font-weight:800; font-size:12.5px; color:var(--accent); }
  :root[data-theme="dark"] .tot-row .tot-val{ color:var(--accent-bright); }
  .line { cursor:pointer; transition:background .1s; }
  .line:hover > td { background:var(--accent-soft); }
  .line td:first-child { font-weight:600; color:var(--ink); }
  .caret { display:inline-block; width:16px; text-align:center; color:var(--accent); font-size:15px; transition:transform .15s; cursor:pointer; }
  .line.open .caret { transform:rotate(90deg); color:var(--accent); }
  .item-name { display:inline-flex; align-items:center; gap:7px; }
  .linecell { padding-left:22px !important; }  /* indentation des postes sous leur domaine */
  .linecell .caret, .linecell .summode, .lot-row .lot-caret, .lot-row .summode { vertical-align:middle; }
  .rowacts { float:right; display:inline-flex; gap:3px; opacity:0; transition:opacity .1s; }
  tr:hover .rowacts { opacity:1; }
  .rowacts .row-del:hover { color:var(--crit); border-color:var(--crit); }
  .item-edit { cursor:text; }
  .item-edit:hover { text-decoration:underline dotted var(--accent); text-underline-offset:3px; }
  .rowacts button { width:24px; height:24px; border-radius:6px; border:1px solid var(--border);
    background:var(--surface); color:var(--ink-2); display:grid; place-items:center; }
  .rowacts button:hover { color:var(--accent); border-color:var(--accent); }
  .rowacts svg{ width:13px; height:13px; }


  .pcell { width:180px; }
  .bar { position:relative; height:8px; border-radius:5px; background:var(--track); }
  .bar .fill { position:absolute; left:0; top:0; bottom:0; border-radius:5px; background:var(--engage); }
  .bar .fac { position:absolute; top:-2px; bottom:-2px; width:2px; border-radius:2px; background:var(--facture); }
  .bar.over .fill { background:var(--crit); }
  .pctlab { font-size:11px; color:var(--ink-2); font-weight:600; min-width:34px; display:inline-block; text-align:right; }
  .pctlab.over { color:var(--crit); }

  .money { font-variant-numeric:tabular-nums; font-weight:600; }
  .money.sec { color:var(--ink-2); font-weight:500; }
  .solde-pos { color:var(--good); font-weight:600; font-variant-numeric:tabular-nums; }
  .solde-neg { color:var(--crit); font-weight:700; font-variant-numeric:tabular-nums; }
  .tot-row .tot-val.solde-neg { color:var(--crit); }   /* le rouge du négatif prime sur le style du total */

  /* drill rows */
  .drill { display:none; }
  .drill.show { display:table-row; }
  .drill > td { padding:0; background:var(--surface-2); border-bottom:1px solid var(--border); }
  /* #107 : écarts du cadre blanc — haut/bas égaux (12) ; le bord GAUCHE s'aligne sur la
     PREMIÈRE LETTRE de la ligne maître : 6 (padding td) + 16 (caret) + 6 (marge) = 28px */
  .drill-inner { padding:12px 14px 12px 28px; }
  .drill-inner > .eng-card:last-child { margin-bottom:0; }   /* le bas ne cumule pas la marge inter-cartes */
  .eng-head { font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
    font-weight:700; margin:8px 0 5px; display:flex; align-items:center; gap:7px; }
  .eng-head .mini { margin-left:auto; text-transform:none; letter-spacing:0; }
  .eng-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:6px; }
  .eng-top { display:flex; align-items:center; gap:10px; padding:7px 12px; }
  .eng-top .four { font-weight:650; }
  .eng-top .presta { color:var(--ink-2); font-size:12px; }
  .eng-top .amt { margin-left:auto; font-variant-numeric:tabular-nums; font-weight:600; }
  /* sous-tableaux de dépliage — colonnes identifiées et délimitées, style DISTINCT
     du tableau maître (en-têtes minuscules, séparateurs pointillés, pas de zébrage) */
  .subtbl { width:100%; border-collapse:collapse; table-layout:fixed; margin-top:2px; }
  /* #107 : cadre intérieur HOMOGÈNE de la table dans une carte — écarts gauche/haut/bas
     identiques partout, 1er caractère (padding td 8px compris) aligné sur l'en-tête de carte (12px) */
  .eng-card > .subtbl { margin:4px 4px 6px; width:calc(100% - 8px); }
  .subtbl thead th { position:static; background:none; box-shadow:none; font-size:9.5px;
    text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:700;
    text-align:left; padding:3px 8px; border-bottom:1px dashed var(--border-strong); }
  .subtbl thead th.ra { text-align:right; } .subtbl thead th.ca { text-align:center; }
  .subtbl tbody td { padding:2px 8px; border-bottom:none; border-top:1px dashed var(--border);   /* plus resserré que le maître (#107) */
    font-size:12px; background:none; }
  .subtbl tbody tr:first-child td { border-top:none; }
  .subtbl tbody td:not(:first-child), .subtbl thead th:not(:first-child) { border-left:1px dashed var(--grid); }
  /* la colonne d'actions reste DÉLIMITÉE, mais en trait PLEIN discret : le dashed court
     faisait un « deux points » disgracieux sur les lignes basses (#107) */
  .subtbl tbody td:last-child, .subtbl thead th:last-child { border-left:1px solid var(--grid); }
  /* #107 : boutons COMPACTS et SANS CADRE dans les sous-tableaux — un bouton ne gonfle pas
     la hauteur de ligne, l'icône nue ne peut pas être décentrée dans un cadre */
  .subtbl .ic-sm { width:18px; height:18px; border:none; background:none; padding:0; }
  .subtbl .ic-sm svg { width:13px; height:13px; }
  .subtbl .amt { font-variant-numeric:tabular-nums; font-weight:600; text-align:right; }
  .subtbl .date { color:var(--muted); font-variant-numeric:tabular-nums; }

  /* badges */
  .badge { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:650;
    padding:2px 8px; border-radius:20px; white-space:nowrap; }
  .badge svg{ width:11px;height:11px; }
  .b-good { background:var(--good-soft); color:var(--good); }
  .b-warn { background:var(--warn-soft); color:var(--warn); }
  /* statut du chiffrage : symbole seul dans SA colonne centrée (largeur stable, ○ ouvert / 🔒 verrouillé) */
  .fin-toggle { cursor:pointer; font-size:12.5px; color:var(--muted); user-select:none; display:inline-block; width:20px; text-align:center; }
  .fin-toggle.on { color:var(--good); }
  /* montants ANORMAUX (règle générale) : rouge = dépassement du référentiel,
     ambre = au-delà de l'attendu (incomplet / à relier) — explication en infobulle */
  .proj-over .m { color:var(--bad, #B3261E); font-weight:650; }
  .proj-warn .m { color:var(--warn); font-weight:650; }
  /* montant INDICATIF (non additif) : engagement réparti affiché en global sur un sous-lot */
  .eng-global .m { color:var(--muted); font-style:italic; font-weight:400; }

  /* boîte de choix (plus de deux issues) : question + boutons courts, Échap/clic dehors = annuler */
  .choicebox-ov { position:fixed; inset:0; background:rgba(15,23,42,.35); display:flex; align-items:center; justify-content:center; z-index:300; }
  .choicebox { background:var(--surface); border:1px solid var(--border-strong); border-radius:12px; box-shadow:0 18px 50px rgba(0,0,0,.25); padding:18px 20px; max-width:460px; }
  .cb-msg { font-size:13px; color:var(--ink); margin-bottom:14px; white-space:pre-line; }
  .cb-btns { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
  .b-crit { background:var(--crit-soft); color:var(--crit); }
  .b-neutral{ background:var(--surface-2); color:var(--ink-2); border:1px solid var(--border); }
  .b-type { background:var(--accent-soft); color:var(--accent); }
  .dotb { width:6px; height:6px; border-radius:50%; }

  .toggle { position:relative; width:34px; height:20px; border-radius:20px; background:var(--track);
    border:none; transition:.15s; flex:none; }
  .toggle::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px;
    border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:.15s; }
  .toggle.on { background:var(--good); }
  .toggle.on::after { transform:translateX(14px); }

  /* lot chart */
  .chart { padding:14px 16px 4px; display:flex; flex-direction:column; gap:11px; }
  .crow { display:grid; grid-template-columns:120px 1fr 92px; align-items:center; gap:12px; }
  .crow .cname { font-weight:600; font-size:12.5px; }
  .crow .cbudget { font-size:10.5px; color:var(--muted); font-weight:500; font-variant-numeric:tabular-nums; }
  .ctrack { position:relative; height:20px; border-radius:6px; background:var(--track); }
  .ctrack .cfill { position:absolute; left:0; top:0; bottom:0; border-radius:6px; background:var(--facture); }
  .ctrack.over .cfill { background:var(--crit); }
  .ctrack .ceng { position:absolute; top:-3px; bottom:-3px; width:3px; border-radius:2px; background:var(--engage); }
  .cval { text-align:right; font-variant-numeric:tabular-nums; font-size:12.5px; font-weight:600; }
  .cval small { color:var(--muted); font-weight:500; display:block; font-size:10.5px; }
  .legend { display:flex; gap:15px; padding:4px 16px 14px; flex-wrap:wrap; font-size:11.5px; color:var(--ink-2); }
  .legend span { display:inline-flex; align-items:center; gap:6px; }
  .swatch { width:12px; height:9px; border-radius:3px; }
  .swatch.line { width:3px; height:13px; border-radius:2px; }

  /* alerts */
  .alerts { display:flex; flex-direction:column; }
  .alert { display:flex; align-items:flex-start; gap:10px; padding:10px 15px; border-bottom:1px solid var(--border); }
  .alert:last-child { border-bottom:none; }
  .alert .ic { width:26px; height:26px; border-radius:7px; display:grid; place-items:center; flex:none; }
  .alert .ic svg{ width:14px; height:14px; }
  .ic.crit { background:var(--crit-soft); color:var(--crit); }
  .ic.warn { background:var(--warn-soft); color:var(--warn); }
  .ic.info { background:var(--accent-soft); color:var(--accent); }
  .alert .at { font-weight:600; font-size:12.5px; }
  .alert .ad { color:var(--ink-2); font-size:12px; }
  .alert .amt { margin-left:auto; font-variant-numeric:tabular-nums; font-weight:700; white-space:nowrap; font-size:12.5px; }

  .note { color:var(--muted); font-size:12px; }
  .stub { padding:36px; text-align:center; color:var(--muted); }
  .stub svg{ width:32px; height:32px; opacity:.4; margin-bottom:8px; }
  .tag-fin { font-size:11px; font-weight:600; color:var(--ink-2); display:inline-flex; align-items:center; gap:5px; }
  .tag-fin .dotb{ background:var(--accent); }
  .retenu { background:var(--accent-soft); color:var(--accent); font-weight:700; border-radius:6px; padding:1px 6px; }
  .editrattach { cursor:pointer; }
  .editrattach:hover { box-shadow:0 0 0 1.5px var(--accent); }
  .refacts { display:inline-flex; gap:4px; }
  /* #113 : boussole remaniée — indicateurs en CARRÉ 2×2 (sans cadres, fines séparations)
     + graphe à droite qui absorbe le reste (hauteur constante, rendu 1:1) */
  .bous-row { display:flex; gap:36px; align-items:center; flex-wrap:wrap; padding:4px 6px; }
  .kpis-flat { display:grid; grid-template-columns:repeat(2,1fr); gap:0; flex:0 1 480px; min-width:340px; padding:2px 4px; }
  .kpis-flat .kpi { background:none; border:none; box-shadow:none; padding:12px 16px; border-radius:0; }
  .kpis-flat .kpi:nth-child(n+3) { border-top:1px solid var(--grid); }
  .kpis-flat .kpi:nth-child(even) { border-left:1px solid var(--grid); }
  .kpis-flat .kpi { position:relative; }
  .kpis-flat .k-date { position:absolute; top:11px; right:16px; font-size:10.5px;
    color:var(--muted); font-weight:600; }
  .kpis-flat .k-label { white-space:nowrap; }
  .kpis-flat .k-val { font-size:17.5px; }
  .kpis-flat .k-sub { font-size:11px; }
  .kpis-flat .k-row { display:flex; justify-content:space-between; gap:10px; color:var(--ink-2); }
  .kpis-flat .k-row .num { font-variant-numeric:tabular-nums; white-space:nowrap; }
  .chart-col { flex:1 1 420px; min-width:320px; max-width:720px; }
  /* #113 : graphe « solde final au fil des arrêtés » — axes gradués, infobulle réactive */
  .chartwrap { padding:4px 6px 2px; }
  .chartwrap svg { width:100%; height:230px; display:block; }
  .chart-line { fill:none; stroke:var(--accent); stroke-width:2; }
  .chart-line.c2 { stroke:var(--muted); stroke-width:1.6; }
  .chart-pt.c2 { fill:var(--muted); }
  .chart-legend { display:flex; gap:18px; font-size:11.5px; color:var(--ink-2);
    justify-content:center; padding:3px 8px 1px; }
  .chart-legend .sw { width:16px; height:3px; border-radius:2px; display:inline-block;
    margin-right:6px; vertical-align:middle; }
  /* #115 : trésorerie en TUILES semestrielles (6 mois par ligne, récent d'abord) */
  #cashTiles { padding:2px 6px 8px; }
  .snap-sem { margin:2px 0 14px; }
  .snap-semlab { font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted);
    font-weight:700; padding:2px 2px 6px; }
  .snap-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
  .snap-tile { border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 10px;
    background:var(--surface); min-height:74px; min-width:0; overflow:hidden; }
  .snap-tile.cur { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
  .snap-tile.empty { border-style:dashed; background:none; }
  .snap-tile.empty .snap-date { color:var(--muted); font-weight:500; }
  .snap-date { font-size:11.5px; font-weight:700; color:var(--ink-2); }
  .snap-tot { font-size:15.5px; font-weight:700; letter-spacing:-.3px; margin:2px 0 5px;
    white-space:nowrap; }
  .snap-accs { display:grid; gap:1px; }
  .snap-acct { display:flex; align-items:center; gap:4px; font-size:11px; color:var(--ink-2); }
  .snap-acct .row-edit { flex:1; display:flex; justify-content:space-between; gap:6px; cursor:pointer;
    border-radius:4px; padding:0 3px; min-width:0; }
  .snap-acct .snap-bq { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .snap-acct .row-edit:hover { background:var(--surface-2); }
  .snap-acct .snap-m { font-variant-numeric:tabular-nums; white-space:nowrap; }
  .snap-acct .del { width:14px; height:14px; border:none; background:none; padding:0; opacity:.55;
    flex:none; }
  .snap-acct .del:hover { opacity:1; }
  .snap-head { display:flex; align-items:center; gap:6px; }
  .snap-head .ic-add { margin-left:auto; width:18px; height:18px; border:none; background:none;
    font-size:12px; opacity:.6; }
  .snap-head .ic-add:hover { opacity:1; color:var(--accent); }
  @media (max-width:1120px){ .snap-grid { grid-template-columns:repeat(3,1fr); } }
  @media (max-width:760px){ .snap-grid { grid-template-columns:repeat(2,1fr); } }
  /* #115 : formulaire-instantané */
  #snapRows .snap-mont { width:100%; }
  #snapRows tr.off { opacity:.45; text-decoration:line-through; }
  /* trésorerie : lignes de report (solde d'une date antérieure, non éditables) */
  tr.ghost td { padding-top:1.5px; padding-bottom:1.5px; font-size:12px; }
  .chart-zero { stroke:var(--border-strong); stroke-width:1.2; stroke-dasharray:4 4; }
  .chart-grid { stroke:var(--grid); stroke-width:1; }
  .chart-grid.v { stroke-dasharray:2 3; }
  .chart-axis { stroke:var(--border-strong); stroke-width:1; }
  .chart-ylab { fill:var(--muted); font-size:10.5px; font-variant-numeric:tabular-nums; }
  .chart-pt { fill:var(--good); stroke:var(--surface); stroke-width:1.5; cursor:help; }
  .chart-pt.neg { fill:var(--crit); }
  .chart-pt:hover { r:7; }
  .chart-x { fill:var(--muted); font-size:10px; }
  .chart-year { fill:var(--ink-2); font-size:10.5px; font-weight:700; }
  .chart-year-sep { stroke:var(--border-strong); stroke-width:1; stroke-dasharray:2 4; }
  /* #114 : LE panneau d'infobulle de toute l'appli (moteur bindTips, ui.js) */
  .tipbox { position:fixed; z-index:60; display:none; pointer-events:none; max-width:440px;
    background:var(--surface); border:1px solid var(--border-strong); border-radius:8px;
    box-shadow:var(--shadow-lg); padding:8px 11px; font-size:12.5px; line-height:1.55; }
  /* #67 P2 : pastille « divergence budget ↔ chiffrage » — 1 clic aligne (annulable) */
  .alignchiff { cursor:pointer; color:var(--warn); font-weight:700; }
  .alignchiff:hover { text-shadow:0 0 1px var(--warn); }
  /* valeur en REPLI (héritée d'un parent, jamais éditée comme valeur propre — #111) */
  .fallback { color:var(--muted); font-style:italic; }
  /* ＋ d'ajout d'ÉLÉMENT : à droite de son en-tête de liste ou de sa ligne de titre (#107) */
  .ic-add { margin-left:auto; font-size:13px; font-weight:700; }
  /* largeur FIXE de toute colonne Actions (#107) */
  th.col-actions { width:96px; }
  .ic-sm { width:26px; height:26px; border-radius:6px; border:1px solid var(--border); background:var(--surface);
    color:var(--ink-2); display:inline-grid; place-items:center; }
  .ic-sm svg{ width:14px; height:14px; }
  .ic-sm:hover { color:var(--accent); border-color:var(--accent); }
  .ic-sm.del[data-used="0"]:hover { color:var(--crit); border-color:var(--crit); }
  .ic-sm.del:not([data-used="0"]) { opacity:.4; cursor:not-allowed; }
  .usg { color:var(--muted); font-size:11.5px; text-align:right; }
  .summode { border:none; background:none; color:var(--muted); cursor:pointer; padding:0 7px 0 0;
    font-weight:800; font-size:12.5px; line-height:1; opacity:.4; vertical-align:middle; }
  .summode:hover { opacity:.9; color:var(--accent); }
  .summode.on { opacity:1; color:var(--accent); }
  .calc-badge { font-size:11px; font-weight:800; color:var(--muted); margin-right:5px; }
  /* codes couleur des cellules budget : saisi (input) vs calculé */
  td.cell-saisi { color:var(--accent); font-weight:700; }
  td.cell-calc { color:var(--muted); font-weight:600; }
  .ferme { color:var(--accent); font-weight:700; font-size:11px; display:inline-flex; align-items:center; gap:4px;
    vertical-align:middle; margin-left:6px; }
  .ferme .dotb{ width:6px; height:6px; border-radius:50%; background:var(--accent); }
  .budget-legend { display:flex; flex-wrap:wrap; gap:16px; padding:10px 16px; border-top:1px solid var(--border);
    font-size:11.5px; color:var(--ink-2); }
  .budget-legend span { display:inline-flex; align-items:center; gap:7px; }
  .lgsw { width:15px; height:13px; border-radius:3px; display:inline-block; flex:none; }
  .lgsw.saisi { background:color-mix(in srgb, var(--accent-soft) 55%, transparent); box-shadow:inset 0 0 0 1px var(--accent); }
  .lgsw.calc { background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--border-strong); }

  /* champs modifiables : repère permanent (souligné pointillé) + affordance au survol */
  td.editable, td.menu-cell, td.four-cell, td.chl-pick, td.editrattach { cursor:cell; position:relative;
    border-bottom:1px dashed color-mix(in srgb, var(--accent) 40%, var(--grid)) !important; }
  td.editable:hover { box-shadow:inset 0 0 0 1px var(--border-strong); background:var(--surface); }
  /* colonne Actions (édition / suppression) */
  td.acts { white-space:nowrap; }
  td.acts .ic-sm { opacity:.35; }
  tr:hover td.acts .ic-sm { opacity:1; }
  td.editable:hover::after { content:""; position:absolute; top:3px; right:3px; width:5px; height:5px;
    border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); opacity:.5; }
  td.editing { box-shadow:inset 0 0 0 2px var(--accent); background:var(--surface); padding:0; }
  td.editing input, td.editing select { width:100%; border:none; background:var(--surface); color:var(--ink);
    font:inherit; font-variant-numeric:tabular-nums; padding:5px 12px; outline:none; text-align:inherit; }

  /* paiement collapsible in drawer */
  .collapse { display:none; flex-direction:column; gap:14px; padding-top:2px; }
  .collapse.show { display:flex; }
  .switch-row { display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--border);
    border-radius:8px; background:var(--surface-2); font-size:13px; font-weight:600; }
  .switch-row .toggle{ margin-left:auto; }
  .hint-inline { font-size:11.5px; color:var(--muted); margin-top:-2px; }

  /* toast */
  .toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px); opacity:0;
    background:var(--ink); color:var(--surface); padding:11px 18px; border-radius:10px; font-size:13px; font-weight:600;
    box-shadow:var(--shadow-lg); z-index:60; display:flex; align-items:center; gap:9px; pointer-events:none; transition:.22s; }
  .toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
  .toast svg{ width:16px; height:16px; color:var(--good); }

  /* ---------- drawer (saisie) ---------- */
  .scrim { position:fixed; inset:0; background:rgba(15,22,35,.42); opacity:0; pointer-events:none;
    transition:opacity .2s; z-index:40; }
  .scrim.open { opacity:1; pointer-events:auto; }
  .drawer { position:fixed; top:50%; left:50%; width:460px; max-width:94vw; max-height:90vh; background:var(--surface);
    border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-lg); z-index:41;
    opacity:0; pointer-events:none; transform:translate(-50%,-48%) scale(.98);
    transition:opacity .18s ease, transform .18s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; }
  .drawer.open { opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
  .drawer-head { display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--border); }
  .drawer-head h3 { font-size:15.5px; font-weight:650; }
  .drawer-head .close { margin-left:auto; }
  .drawer-body { padding:16px 18px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:14px; }
  .drawer-foot { padding:14px 18px; border-top:1px solid var(--border); display:flex; gap:10px; justify-content:flex-end; }
  .field { display:flex; flex-direction:column; gap:5px; }
  .field label { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; }
  .field input, .field select { border:1px solid var(--border-strong); background:var(--surface); color:var(--ink);
    border-radius:8px; padding:9px 11px; font-size:13.5px; outline:none; }
  .field input:focus, .field select:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
  .field .with-suffix { position:relative; display:flex; align-items:center; }
  .field .with-suffix input{ width:100%; padding-right:38px; }
  .field .with-suffix .suf{ position:absolute; right:12px; color:var(--muted); font-size:12.5px; font-weight:600; }
  .field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .drawer-seg { display:flex; background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:3px; gap:2px; }
  .drawer-seg button { flex:1; border:none; background:none; padding:7px; border-radius:7px; font-size:12.5px; font-weight:600; color:var(--ink-2); }
  .drawer-seg button.on { background:var(--surface); color:var(--accent); box-shadow:var(--shadow); }

  /* autocomplétion */
  .ac { position:relative; }
  .ac-input { width:100%; border:1px solid var(--border-strong); background:var(--surface); color:var(--ink);
    border-radius:8px; padding:9px 32px 9px 11px; font-size:13.5px; outline:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238A94A6' stroke-width='2'><circle cx='7' cy='7' r='5'/><path d='M15 15l-4-4'/></svg>");
    background-repeat:no-repeat; background-position:right 10px center; }
  .ac-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
  .ac-menu { position:absolute; top:calc(100% + 4px); left:0; right:0; background:var(--surface);
    border:1px solid var(--border); border-radius:9px; box-shadow:var(--shadow-lg); z-index:6;
    max-height:190px; overflow-y:auto; padding:4px; display:none; }
  .ac-menu.show { display:block; }
  .fopt.mact { color:var(--accent); font-weight:650; }
  .fopt.mopt-aprx { color:var(--accent); border:1px dashed var(--accent); border-radius:6px; margin:1px 4px; }
  .ac-opt { padding:8px 10px; border-radius:6px; font-size:13px; cursor:pointer; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; }
  .ac-opt:hover, .ac-opt.hi { background:var(--accent-soft); color:var(--accent); }
  .ac-create { color:var(--accent); font-weight:600; border-top:1px solid var(--border); margin-top:2px; }
  .ac-empty { padding:8px 10px; color:var(--muted); font-size:12.5px; }

  /* validation */
  .field.req label em { color:var(--crit); font-style:normal; font-weight:800; }
  .field .err-msg { display:none; color:var(--crit); font-size:11.5px; margin-top:1px; font-weight:600; }
  .field.err .err-msg { display:block; }
  .field.err input, .field.err select, .field.err .ac-input { border-color:var(--crit); box-shadow:0 0 0 3px var(--crit-soft); }
  .warn-banner { display:flex; gap:9px; align-items:flex-start; background:var(--warn-soft); color:var(--warn);
    border:1px solid color-mix(in srgb,var(--warn) 32%, transparent); border-radius:8px; padding:9px 11px;
    font-size:12px; font-weight:600; line-height:1.4; }
  .warn-banner svg{ width:15px; height:15px; flex:none; margin-top:1px; }

  :focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

  @media (max-width:1120px){ .kpis{ grid-template-columns:repeat(3,1fr); } }
  @media (max-width:820px){
    .app{ grid-template-columns:1fr; } .sidebar{ display:none; }
    .kpis{ grid-template-columns:repeat(2,1fr); } .search{ display:none; }
  }