/* Efficor look (see DESIGN_RULES.md): navy + teal brand, blue actions, statuses as tinted badges.
   ap-agent review screen. No framework, no CDN: works offline.
   Plain and dense on purpose, like the accounting software it sits next to: square-ish corners, hairline
   borders, no shadows, one accent colour, colour used for meaning only. Colours are tokens so dark mode is one block. */
:root {
  --bg:#f4f6fa; --surface:#fff; --surface-2:#f4f6fa; --header:#eef3f9; --hover:#f3f7fd;
  --ink:#0f1b2d; --ink-2:#3f4b5c; --muted:#5e6a7a; --line:#e1e6ee; --line-strong:#c9d1dc;
  --accent:#1f5fd6; --accent-hover:#184db0; --accent-ink:#fff; --accent-soft:#eaf1fe; --accent-border:#b4cbf5;
  --ok:#17663a; --ok-soft:#eaf6ee; --ok-line:#bfe3cb; --warn:#8a5200; --warn-soft:#fdf5e6; --warn-line:#f1d6a6;
  --err:#a8231a; --err-soft:#fdeeec; --err-line:#f4c4bf; --info:#075985; --info-soft:#e6f4fd; --info-line:#b5ddf5;
  --indigo:#4338ca; --indigo-soft:#eef0ff; --indigo-line:#c7cbfa;
  --tone-ok:#1c7c43; --tone-warn:#b26b00; --tone-err:#c4291c; --tone-info:#0369a1; --tone-indigo:#4f46e5;
  --brand:#0b2540; --brand-2:#12345a; --mark:#2dd4bf;
  --bar:#0b2540; --bar-ink:#fff; --bar-muted:rgba(255,255,255,.78);
  --radius:4px; --radius-md:6px; --shadow-sm:0 1px 2px rgba(16,24,40,.05); --shadow-md:0 4px 12px rgba(16,24,40,.08);
  --pad:12px; --row:12px; --ctl:32px;
}
:root[data-theme="dark"] {
  --bg:#0d1520; --surface:#142033; --surface-2:#111b2b; --header:#182740; --hover:#1a2b45;
  --ink:#e8edf5; --ink-2:#c3ccd9; --muted:#9aa7b8; --line:#243550; --line-strong:#38506e;
  --accent:#7aa7f0; --accent-hover:#9bbcf5; --accent-ink:#08121f; --accent-soft:#182c4d; --accent-border:#2d4d80;
  --ok:#6fd09b; --ok-soft:#12302a; --ok-line:#22523f; --warn:#e6b862; --warn-soft:#35301a; --warn-line:#5b4c22;
  --err:#f39187; --err-soft:#3a1d1b; --err-line:#6a3330; --info:#7cc4ee; --info-soft:#13303f; --info-line:#245066;
  --indigo:#a5a9ff; --indigo-soft:#1f2247; --indigo-line:#3a3f86;
  --tone-ok:#3fae72; --tone-warn:#d69a2d; --tone-err:#e5584b; --tone-info:#3d9bd0; --tone-indigo:#7b74f0;
  --bar:#081a2e; --brand:#081a2e; --shadow-sm:none; --shadow-md:0 4px 12px rgba(0,0,0,.4);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0d1520; --surface:#142033; --surface-2:#111b2b; --header:#182740; --hover:#1a2b45;
    --ink:#e8edf5; --ink-2:#c3ccd9; --muted:#9aa7b8; --line:#243550; --line-strong:#38506e;
    --accent:#7aa7f0; --accent-hover:#9bbcf5; --accent-ink:#08121f; --accent-soft:#182c4d; --accent-border:#2d4d80;
    --ok:#6fd09b; --ok-soft:#12302a; --ok-line:#22523f; --warn:#e6b862; --warn-soft:#35301a; --warn-line:#5b4c22;
    --err:#f39187; --err-soft:#3a1d1b; --err-line:#6a3330; --info:#7cc4ee; --info-soft:#13303f; --info-line:#245066;
    --indigo:#a5a9ff; --indigo-soft:#1f2247; --indigo-line:#3a3f86;
    --tone-ok:#3fae72; --tone-warn:#d69a2d; --tone-err:#e5584b; --tone-info:#3d9bd0; --tone-indigo:#7b74f0;
    --bar:#081a2e; --brand:#081a2e; --shadow-sm:none; --shadow-md:0 4px 12px rgba(0,0,0,.4);
  }
}

* { box-sizing:border-box; }
body { margin:0; font:13px/1.45 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--ink); background:var(--bg);
  font-variant-numeric:tabular-nums; }
a { color:var(--accent); }
h1, h2, h3 { margin:0; font-weight:600; }
h1 { font-size:18px; }
.muted { color:var(--muted); } .err { color:var(--err); } .warn { color:var(--warn); } .ok { color:var(--ok); }
.num { text-align:right; white-space:nowrap; }
.nowrap { white-space:nowrap; }
.mono { font-family:ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace; font-size:12px; letter-spacing:-.01em; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }

/* top bar */
.topbar { position:sticky; top:0; z-index:30; background:var(--bar); color:var(--bar-ink); display:flex; align-items:stretch; gap:20px; padding:0 24px; min-height:46px; }
.brand { display:flex; align-items:center; gap:8px; white-space:nowrap; flex-shrink:0; font-weight:600; color:var(--bar-ink); text-decoration:none; letter-spacing:.01em; }
.brand small { font-weight:400; color:var(--bar-muted); }
.nav { display:flex; gap:2px; align-self:stretch; }
.nav a, .nav summary { display:flex; align-items:center; padding:0 12px; white-space:nowrap; color:var(--bar-muted); text-decoration:none; border-bottom:2px solid transparent; }
.nav a:hover, .nav summary:hover { color:var(--bar-ink); }
.nav summary { color:var(--bar-muted); cursor:pointer; list-style:none; border-bottom:2px solid transparent; height:100%; }
.nav summary::-webkit-details-marker { display:none; } .nav summary::after { content:"▾"; margin-left:5px; font-size:10px; }
.nav summary[aria-current="page"] { color:var(--bar-ink); border-bottom-color:var(--bar-ink); font-weight:600; }
details.more { position:relative; display:flex; align-items:stretch; }
details.more .menu { position:absolute; top:100%; right:0; min-width:170px; background:var(--bar); border:1px solid var(--line-strong); border-radius:var(--radius); padding:4px 0; box-shadow:0 8px 20px rgba(0,0,0,.25); }
details.more .menu a { padding:8px 16px; border-bottom:0; } details.more .menu a[aria-current="page"] { background:rgba(255,255,255,.08); }
.nav a[aria-current="page"] { color:var(--bar-ink); border-bottom-color:var(--bar-ink); font-weight:600; }
.spacer { flex:1; }
.topbar .right { display:flex; align-items:center; gap:10px; flex-shrink:0; white-space:nowrap; }
.topbar button.ghost, .topbar .chip { color:var(--bar-muted); border-color:transparent; background:transparent; font-size:12px; padding:4px 6px; }
.topbar button.ghost:hover { color:var(--bar-ink); background:transparent; }
.conn { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--bar-muted); max-width:150px; } .conn span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conn i { width:8px; height:8px; border-radius:50%; background:var(--bar-muted); display:inline-block; }
.conn.up i { background:#4fc38a; } .conn.down i { background:#f0776b; }
.chip.who { text-decoration:none; }
main { padding:20px 24px 60px; max-width:1560px; margin:0 auto; }
.notice { background:var(--warn-soft); color:var(--ink); border-bottom:1px solid var(--line-strong); padding:6px 24px; font-size:12px; display:flex; gap:14px; align-items:center; }
.notice a { font-weight:600; }
.notice button { margin-left:auto; padding:2px 8px; font-size:12px; }

/* buttons & inputs */
button, .btn { font:inherit; padding:5px 12px; border-radius:var(--radius); border:1px solid var(--line-strong); background:var(--surface);
  color:var(--ink); cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px; min-height:28px; }
button:hover, .btn:hover { background:var(--surface-2); border-color:var(--muted); }
button.primary, .btn.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600; }
button.primary:hover, .btn.primary:hover { filter:brightness(1.1); background:var(--accent); }
button.danger { color:var(--err); }
button.ghost { border-color:transparent; background:transparent; }
button.small, .btn.small { padding:1px 8px; min-height:22px; font-size:12px; }
button:disabled, .btn[aria-disabled="true"] { opacity:.45; cursor:not-allowed; }
input, select, textarea { width:100%; font:inherit; color:var(--ink); background:var(--surface); padding:5px 8px; border:1px solid var(--line-strong); border-radius:var(--radius); min-height:28px; }
input[type=checkbox], input[type=radio] { width:auto; min-height:0; accent-color:var(--accent); }
input.flag { border-color:var(--err); background:var(--err-soft); }
input[readonly], textarea[readonly] { background:var(--surface-2); color:var(--muted); }
select { padding-right:22px; }

/* messages */
.flash { border:1px solid var(--line); border-left:3px solid var(--accent); background:var(--surface); border-radius:var(--radius); padding:8px 12px; margin-bottom:10px; }
.flash.ok { border-left-color:var(--ok); } .flash.err { border-left-color:var(--err); }

/* summary strip: clickable, one row, money on every cell */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); margin-bottom:16px; }
.kpi { padding:10px 14px; text-decoration:none; color:var(--ink); display:block; border-right:1px solid var(--line); }
.kpi:last-child { border-right:0; }
a.kpi:hover { background:var(--surface-2); }
.kpi .label { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.kpi .value { font-size:22px; font-weight:600; margin-top:2px; line-height:1.15; }
.kpi .sub { font-size:12px; color:var(--muted); }
.kpi.alert .value { color:var(--err); } .kpi.good .value { color:var(--ok); } .kpi.attn .value { color:var(--warn); }
.kpi.zero { background:var(--surface-2); } .kpi.zero .value { color:var(--muted); font-weight:400; }
.kpi[aria-current="true"] { box-shadow:inset 0 -3px 0 var(--accent); }

/* toolbar */
.toolbar { display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; margin-bottom:10px; }
.tabs { display:flex; border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--surface); overflow:hidden; }
.tabs a { padding:5px 12px; text-decoration:none; color:var(--muted); white-space:nowrap; border-right:1px solid var(--line); }
.tabs a:last-child { border-right:0; }
.tabs a:hover { background:var(--surface-2); color:var(--ink); }
.tabs a[aria-current="true"] { background:var(--accent); color:var(--accent-ink); font-weight:600; }
.tabs .count { margin-left:6px; opacity:.85; font-weight:400; }
.search { flex:1; min-width:220px; max-width:360px; }
.toolbar select { width:auto; }
.switch { display:inline-flex; align-items:center; gap:7px; cursor:pointer; user-select:none; color:var(--ink); }
.switch input { position:absolute; opacity:0; width:1px; height:1px; }
.switch .track { width:28px; height:16px; border-radius:8px; background:var(--line-strong); position:relative; transition:background .12s; flex:none; }
.switch .track::after { content:""; position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:var(--surface); transition:transform .12s; }
.switch input:checked + .track { background:var(--accent); }
.switch input:checked + .track::after { transform:translateX(12px); }
.switch input:focus-visible + .track { outline:2px solid var(--accent); outline-offset:2px; }
.linkbtn { background:none; border:0; padding:0; min-height:0; color:var(--accent); text-decoration:underline; cursor:pointer; }
.linkbtn:hover { background:none; }

/* table */
.tablewrap { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:auto; max-height:calc(100vh - 210px); }
table { width:100%; border-collapse:collapse; }
th, td { padding:var(--row) 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; background:var(--surface-2); position:sticky; top:0; z-index:2; white-space:nowrap; border-bottom:1px solid var(--line-strong); }
tbody tr:last-child td { border-bottom:0; }
tr.clickable { cursor:pointer; } tr.clickable:hover td { background:var(--surface-2); }
tr.active td { background:var(--accent-soft); }
tr:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
tr.group td { background:var(--surface-2); font-weight:600; border-bottom:1px solid var(--line-strong); padding-top:6px; padding-bottom:6px; }
td .vendor { font-weight:600; color:var(--ink); }
th.col-vendor, td.col-vendor { min-width:250px; }
th.col-gl, td.col-gl { min-width:200px; }
td .vendor a { color:inherit; text-decoration:none; } td .vendor a:hover { text-decoration:underline; }
td .file { display:block; max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:var(--muted); text-decoration:none; }
td .file:hover { color:var(--accent); text-decoration:underline; }
td .under { font-size:12px; color:var(--muted); white-space:nowrap; }
td .under.late { color:var(--err); } td .under.soon { color:var(--warn); }
.rowactions { white-space:nowrap; text-align:right; opacity:0; }
tr:hover .rowactions, tr:focus-within .rowactions, tr.active .rowactions { opacity:1; }
.issues { display:flex; flex-direction:column; gap:3px; font-size:12.5px; max-width:360px; }
.issues .more { color:var(--muted); cursor:help; }
.ico { width:14px; height:14px; flex:none; vertical-align:-2px; margin-right:6px; }
.issue-line { display:flex; align-items:flex-start; }
/* vendor list: share of the biggest vendor's purchases, and a quiet tick when nothing needs a look */
.share { display:block; height:3px; margin:7px 0 0 auto; width:72px; max-width:100%; background:var(--line); border-radius:2px; overflow:hidden; }
.share b { display:block; height:100%; background:var(--accent); opacity:.55; border-radius:2px; }
.ok-line { color:var(--ok); }
/* vendor page: the usual GL account card */
.glnow { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:15px; }
.glwhy { margin:6px 0 10px; }
.glhist { margin:0 0 12px; } .glhist caption { text-align:left; padding-bottom:4px; }
.glhist .share { margin:0 0 0 auto; width:90px; }
.glform label { display:block; font-size:12px; font-weight:500; color:var(--ink-2); margin-bottom:4px; }
.glrow { display:flex; gap:8px; } .glrow select { flex:1; min-width:0; }
.tablewrap.compact { min-height:0; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; background:var(--muted); }
.dot.err { background:var(--err); } .dot.warn { background:var(--warn); } .dot.ok { background:var(--ok); }

/* tags: flat, small capitals, no fill unless it carries meaning */
.pill, .tag { display:inline-block; white-space:nowrap; padding:1px 6px; border-radius:2px; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  background:transparent; color:var(--muted); border:1px solid var(--line-strong); }
.pill.créée, .pill.ready, .tag.add { color:var(--ok); border-color:var(--ok); }
.pill.rejetée, .tag.del { color:var(--err); border-color:var(--err); }
.pill.approuver, .pill.st-verifier, .tag.keep { color:var(--warn); border-color:var(--warn); }
.pill.st-bloquee, .pill.st-doublon { color:var(--err); border-color:var(--err); background:var(--err-soft); }
.pill.st-prete { color:var(--ok); border-color:var(--ok); }
.pill.muted-pill { color:var(--muted); }
.tag.upd { color:var(--accent); border-color:var(--accent); }
.subtle { display:block; font-size:11px; color:var(--muted); margin-top:3px; text-transform:none; letter-spacing:0; }

/* confidence meter */
.meter { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); cursor:help; }
.meter i { display:block; width:40px; height:5px; background:var(--line); overflow:hidden; }
.meter i b { display:block; height:100%; background:var(--ok); }
.meter.moyenne i b { background:var(--warn); } .meter.basse i b { background:var(--err); }
.meter.haute i b { background:var(--ok); }

/* batch bar */
.batchbar { position:sticky; bottom:12px; margin-top:12px; display:none; align-items:center; gap:14px; padding:9px 14px; background:var(--bar); color:var(--bar-ink); border-radius:var(--radius); }
.batchbar.show { display:flex; }
.batchbar .muted { color:var(--bar-muted); }
.batchbar button { border-color:transparent; }
.empty { text-align:center; padding:44px 12px; color:var(--muted); }

/* detail */
.crumbs { display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.crumbs a.back { color:var(--muted); text-decoration:none; font-weight:500; } .crumbs a.back:hover { color:var(--accent); }
.split { display:grid; grid-template-columns:minmax(0,var(--form-w,1fr)) 14px minmax(0,var(--doc-w,1.1fr)); gap:0; align-items:start; }
.splitter { position:sticky; top:58px; height:calc(100vh - 80px); cursor:col-resize; touch-action:none; display:flex; justify-content:center; }
.splitter::before { content:""; width:2px; height:100%; background:var(--line); border-radius:1px; }
.splitter:hover::before, .splitter:focus-visible::before, .splitter.drag::before { background:var(--accent); width:3px; }
.splitter:focus-visible { outline:none; }
.doc { position:sticky; top:58px; height:calc(100vh - 80px); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:auto; }
.doc iframe { width:100%; height:100%; border:0; display:block; }
.doc img { width:100%; display:block; cursor:zoom-in; } .doc img.zoom { width:170%; cursor:zoom-out; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--pad) 16px 16px; margin-bottom:12px; }
.card > h3 { font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin:2px 0 10px; font-weight:600; }
.card.narrow { max-width:460px; margin:40px auto; }
.head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.head h2 { font-size:17px; }
.head .total { font-size:22px; font-weight:600; }
.taxes { margin-top:8px; border-top:1px solid var(--line); padding-top:8px; display:grid; grid-template-columns:auto auto; justify-content:end; gap:2px 22px; font-size:12.5px; }
.taxes dt { color:var(--muted); text-align:right; } .taxes dd { margin:0; text-align:right; }
.taxes .grand { font-weight:600; border-top:1px solid var(--line); padding-top:3px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:10px 14px; }
.grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:10px 14px; }
.docbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:12px; }
.docbar .flow { margin-left:auto; }
.card details > summary { cursor:pointer; font-size:12.5px; color:var(--muted); margin-top:10px; }
.field label { display:block; font-size:11px; letter-spacing:.04em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-bottom:3px; }
.field .hint { font-size:12px; margin-top:3px; min-height:1em; }
.field.wide { grid-column:1 / -1; }
.check { display:grid; grid-template-columns:auto 1fr auto; gap:4px 12px; font-size:13px; }
.check .bad { color:var(--err); font-weight:600; } .check .good { color:var(--ok); }
.lines select { min-width:200px; }
.lines .sub { font-size:11px; color:var(--muted); margin-top:2px; }
.reason { font-size:12px; color:var(--muted); margin-top:4px; }
.issue { display:flex; gap:8px; padding:6px 0; border-bottom:1px solid var(--line); }
.issue:last-of-type { border-bottom:0; }
.dupbox { border:1px solid var(--err); background:var(--err-soft); border-radius:var(--radius); padding:8px 12px; margin-top:10px; font-size:13px; }
.dupbox div + div { margin-top:4px; }
.timeline { list-style:none; margin:0; padding:0; font-size:13px; }
.timeline li { display:grid; grid-template-columns:150px 1fr; gap:8px; padding:5px 0; border-bottom:1px solid var(--line); }
.timeline li:last-child { border-bottom:0; }
.actionbar { position:sticky; bottom:0; z-index:6; background:var(--bg); border-top:1px solid var(--line); padding:12px 0 4px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.actionbar .inline-select { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.actionbar .inline-select select { width:auto; }
.kbd { font:11px ui-monospace, Consolas, Menlo, monospace; border:1px solid var(--line-strong); border-bottom-width:2px; border-radius:3px; padding:0 5px; color:var(--muted); background:var(--surface); }
.hotkeys { margin-top:14px; font-size:12px; color:var(--muted); }

/* accounts, roles, approval workflow */
.flow { display:flex; flex-wrap:wrap; font-size:12px; }
.flow .step { padding:3px 12px; border:1px solid var(--line-strong); margin-left:-1px; color:var(--muted); background:var(--surface); }
.flow .step:first-child { margin-left:0; border-radius:var(--radius) 0 0 var(--radius); } .flow .step:last-of-type { border-radius:0 var(--radius) var(--radius) 0; }
.flow .step.now { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600; }
.flow .step.done { color:var(--ok); }
.returned { border-left:3px solid var(--warn); background:var(--warn-soft); padding:8px 12px; margin-top:10px; }
details.editrow > summary { list-style:none; cursor:pointer; display:inline-flex; }
details.editrow > summary::-webkit-details-marker { display:none; }
details.editrow[open] > summary { background:var(--accent-soft); }
.editbox { text-align:left; margin:8px 0 4px; padding:12px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface-2); min-width:min(560px,80vw); }
.pwform { display:flex; gap:8px; margin-top:8px; }

/* filters */
.toolbar details.filters { flex-basis:100%; }
details.filters > summary { cursor:pointer; color:var(--accent); padding:2px 0; }
.filter-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px 14px; margin:10px 0; align-items:start; }
.filter-grid .field label { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.filter-grid input, .filter-grid select, .filter-grid .picker > summary { box-sizing:border-box; height:32px; }
.filter-actions { display:flex; gap:8px; margin-bottom:6px; }
.chips { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:0 0 8px; font-size:12px; }
.chip { font-size:12px; color:var(--muted); border:1px solid var(--line-strong); border-radius:var(--radius); padding:1px 8px; }
.chip.x { text-decoration:none; color:var(--ink); background:var(--surface); }
.chip.x:hover { border-color:var(--err); color:var(--err); }
.resultcount { font-size:12px; margin:0 0 8px; display:flex; gap:12px; align-items:center; }

@media (max-width: 960px) {
  .split { grid-template-columns:1fr; } .splitter { display:none; } .doc { order:-1; position:static; height:60vh; } .grid2, .grid3, .grid4 { grid-template-columns:1fr; }
  .topbar { padding:0 14px; flex-wrap:wrap; gap:8px 16px; } main { padding:14px; }
}
/* narrow screens: each invoice becomes a small card instead of an 11-column row */
@media (max-width: 860px) {
  html, body { max-width:100vw; overflow-x:hidden; }
  main { padding:10px; min-width:0; }
  .kpis > *, .toolbar > * { min-width:0; }
  .kpi .label { overflow-wrap:anywhere; }
  .notice > span { flex:1 1 200px; min-width:0; }
  .kpis { grid-template-columns:1fr 1fr; }
  .kpi { border-right:0; border-bottom:1px solid var(--line); padding:8px 10px; }
  .kpi .value { font-size:18px; }
  .tabs { max-width:100%; overflow-x:auto; }
  .search { max-width:none; flex-basis:100%; }
  .notice { flex-wrap:wrap; padding:6px 14px; }
  .tablewrap { max-height:none; border:0; background:transparent; overflow:visible; }
  .tablewrap table, .tablewrap tbody, .tablewrap tr, .tablewrap td { display:block; width:100%; }
  .tablewrap thead { display:none; }
  .tablewrap tr { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:8px; padding:6px 10px; }
  .tablewrap tr.clickable { padding-left:34px; }
  .tablewrap tr.group { padding:6px 10px; border-left:3px solid var(--accent); }
  .topbar { row-gap:0; } .nav { order:3; width:calc(100% + 28px); margin:0 -14px; padding:0 8px; overflow-x:auto; -webkit-overflow-scrolling:touch; } .nav a, .nav summary { min-height:42px; }
  details.more .menu { position:fixed; top:auto; right:8px; }
  .gsearch { flex:1; } .gsearch input { width:100%; } .topbar .right { flex-wrap:wrap; }
  .tablewrap td { border:0; padding:3px 0 3px 108px; position:relative; min-height:20px; text-align:left; overflow-wrap:anywhere; }
  .tablewrap td[data-label]::before { content:attr(data-label); position:absolute; left:0; top:4px; width:100px; color:var(--muted); font-size:11px; letter-spacing:.05em; text-transform:uppercase; }
  .tablewrap td.selcol { position:absolute; left:10px; top:8px; width:auto; padding:0; min-height:0; }
  .tablewrap td.nolabel { padding-left:0; }
  .tablewrap td.num { text-align:left; }
  .tablewrap td .share { margin-left:0; }
  .tablewrap td.rowactions { padding:6px 0 2px; text-align:left; opacity:1; }
  .tablewrap td .file { max-width:100%; }
  .tablewrap td.col-vendor, .tablewrap td.col-gl { min-width:0; }
  .tablewrap tr.group td { padding:0; }
}
@media print { .topbar, .actionbar, .batchbar, .toolbar, .notice { display:none; } body { background:#fff; } }

/* purchase-order card, small tables */
table.mini { width:100%; margin-top:8px; } table.mini td { padding:3px 0; border:0; }
.kv { margin-bottom:4px; }

/* dashboard */
.dash-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:12px; align-items:start; }
.small { font-size:13px; }
.bars { display:flex; gap:6px; align-items:flex-end; height:110px; padding-top:14px; }
.bar { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; min-width:0; }
.bar i { display:block; width:100%; background:var(--accent); min-height:2px; border-radius:1px 1px 0 0; }
.bar .n { font-size:11px; color:var(--ink); min-height:14px; } .bar .d { font-size:10px; color:var(--muted); margin-top:3px; }
.assume { display:grid; gap:8px; } .assume label { display:grid; gap:2px; font-size:13px; color:var(--muted); } .assume input { max-width:120px; } .assume button { justify-self:start; }
a.hublink { display:block; color:var(--ink); text-decoration:none; } a.hublink:hover { border-color:var(--accent); } a.hublink p { margin:0; color:var(--muted); font-size:13px; }

/* to-do badge and global search */
.badge { display:inline-block; min-width:18px; padding:0 5px; border-radius:9px; background:var(--err); color:#fff; font-size:11px; line-height:18px; text-align:center; font-weight:600; }
.gsearch input { width:170px; padding:4px 10px; border-radius:var(--radius); border:1px solid var(--bar-muted); background:transparent; color:var(--bar-ink); }
.gsearch input::placeholder { color:var(--bar-muted); } .gsearch input:focus { outline:2px solid var(--accent); background:rgba(255,255,255,.06); }
@media (max-width: 800px) { .gsearch input { width:110px; } }

.lineproj { display:flex; align-items:center; gap:6px; margin-top:6px; font-size:12px; color:var(--muted); } .lineproj input { flex:1; min-width:0; padding:3px 6px; font-size:13px; }
.gsearch { display:flex; align-items:center; margin:0; } .gsearch input { box-sizing:border-box; height:30px; min-height:0; }
/* advanced filters: every box the same width and height, four per row */
.filter-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.toolbar .filter-grid select, .filter-grid input, .filter-grid select, .filter-grid .picker { width:100%; min-width:0; }
.filter-grid input, .filter-grid select, .filter-grid .picker > summary { height:32px; min-height:32px; padding-top:0; padding-bottom:0; }
@media (max-width: 860px) { .filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.filter-grid .picker > summary { height:30px; min-height:30px; padding-top:0; padding-bottom:0; font-weight:500; }

/* =====================================================================
   Efficor look: overrides layered on the base styles above
   ===================================================================== */
h1 { font-size:20px; letter-spacing:-.01em; line-height:1.25; }
:focus-visible { outline-color:var(--accent); }
.topbar :focus-visible { outline-color:var(--mark); }

/* top bar: navy, teal mark, pill-shaped tabs with a teal underline */
.topbar { min-height:48px; align-items:center; border-bottom:1px solid var(--brand-2); }
.brand { font-size:14px; font-weight:600; letter-spacing:-.01em; color:#fff; }
.brand::before { content:""; width:16px; height:16px; border-radius:3px; background:var(--mark); flex:none; }
.nav { align-self:center; gap:4px; }
.nav a, .nav summary { height:32px; padding:0 12px; border-radius:var(--radius); border-bottom:0; font-size:13px; font-weight:500; }
.nav a:hover, .nav summary:hover { background:rgba(255,255,255,.08); color:#fff; }
.nav a[aria-current="page"], .nav summary[aria-current="page"] { background:rgba(255,255,255,.12); color:#fff; box-shadow:inset 0 -2px 0 var(--mark); font-weight:500; border-bottom:0; }
details.more { align-items:center; }
details.more .menu { background:var(--brand); border-color:var(--brand-2); border-radius:var(--radius-md); box-shadow:var(--shadow-md); }
.conn.up i { background:var(--mark); }
.topbar button.ghost, .topbar .chip { color:var(--bar-muted); }
.topbar button.ghost:hover { color:#fff; background:rgba(255,255,255,.08); }
.badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; margin-left:4px; border-radius:9px; background:var(--tone-err); color:#fff; font-size:11px; font-weight:600; }
.notice { background:var(--warn-soft); border-bottom:1px solid var(--warn-line); }

/* controls: 32 px, medium weight, blue primary */
button, .btn { min-height:var(--ctl); font-size:13px; font-weight:500; padding:0 12px; transition:background .12s, border-color .12s; }
button:hover, .btn:hover { background:var(--hover); border-color:var(--line-strong); }
button.primary, .btn.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:500; }
button.primary:hover, .btn.primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); filter:none; }
button.danger:hover { background:var(--err-soft); border-color:var(--err-line); }
button.small, .btn.small { min-height:28px; font-size:12px; padding:0 8px; }
input, select, textarea { min-height:var(--ctl); padding:0 8px; }
textarea { padding:6px 8px; }
input:hover, select:hover { border-color:var(--muted); }
.field label, .filter-grid .field label { font-size:12px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--ink-2); }
.switch input:checked + .track { background:var(--accent); }
.flash { border-radius:var(--radius-md); }

/* summary tiles: 3 px coloured top stripe, tinted when selected */
.kpis { border-radius:var(--radius-md); box-shadow:var(--shadow-sm); overflow:hidden; }
.kpi { --tone:var(--line-strong); --tone-bg:var(--hover); position:relative; padding:12px 16px; transition:background .12s; }
.kpi::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--tone); }
.kpi.good { --tone:var(--tone-ok); --tone-bg:var(--ok-soft); }
.kpi.attn { --tone:var(--tone-warn); --tone-bg:var(--warn-soft); }
.kpi.alert { --tone:var(--tone-err); --tone-bg:var(--err-soft); }
.kpi:not(.good):not(.attn):not(.alert):not(.zero) { --tone:var(--tone-indigo); --tone-bg:var(--indigo-soft); }
a.kpi:hover { background:var(--hover); }
.kpi[aria-current="true"] { background:var(--tone-bg); box-shadow:inset 0 -2px 0 var(--tone); }
.kpi .label { font-size:12px; letter-spacing:0; text-transform:none; font-weight:500; color:var(--ink-2); }
.kpi .value { font-size:20px; color:var(--ink); }
.kpi.alert .value, .kpi.good .value, .kpi.attn .value { color:var(--ink); }
.kpi.zero { background:var(--surface); } .kpi.zero .value { color:var(--muted); font-weight:600; }

/* one card: toolbar, result strip, table */
.toolbar { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md) var(--radius-md) 0 0; padding:12px 16px; margin-bottom:0; box-shadow:var(--shadow-sm); }
.tabs { border-color:var(--line-strong); }
.tabs a { padding:0 12px; height:30px; display:flex; align-items:center; font-weight:500; color:var(--ink-2); }
.tabs a:hover { background:var(--hover); }
.tabs a[aria-current="true"] { background:var(--accent); color:var(--accent-ink); font-weight:500; }
.chips { margin:0; padding:8px 16px; background:var(--surface); border:1px solid var(--line); border-top:0; }
.resultcount { margin:0; min-height:44px; padding:8px 16px; background:var(--surface-2); border:1px solid var(--line); border-top:0; color:var(--ink-2); font-size:13px; }
.tablewrap { border-top:0; border-radius:0 0 var(--radius-md) var(--radius-md); box-shadow:var(--shadow-sm); max-height:calc(100vh - 290px); min-height:200px; }
.chip.x:hover { border-color:var(--err); color:var(--err); }

/* table: 34 px header, sentence-case columns, 48 px rows, centred content */
th { height:34px; padding:0 12px; font-size:12px; letter-spacing:0; text-transform:none; font-weight:500; color:var(--ink-2); background:var(--header); border-bottom:1px solid var(--line); vertical-align:middle; }
td { padding:8px 12px; vertical-align:middle; }
tr.clickable td { min-height:48px; }
tr.clickable:hover td { background:var(--hover); }
tr.active td { background:var(--accent-soft); }
tr.clickable:focus-visible td:first-child { box-shadow:inset 3px 0 0 var(--accent); }
tr.group td { background:var(--header); }
td .vendor { font-weight:500; }
td.num, td.num.nowrap { font-weight:600; color:var(--brand); }
:root[data-theme="dark"] td.num { color:var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) td.num { color:var(--ink); } }
td .under.late { font-weight:500; }
th.num { color:var(--ink-2); }

/* status badges: 20 px, dot + label, tinted background and border */
.pill, .tag { display:inline-flex; align-items:center; gap:6px; height:20px; padding:0 8px; border-radius:var(--radius); font-size:12px; font-weight:500; letter-spacing:0; text-transform:none;
  background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line); }
.pill::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.tag::before { display:none; }
.pill.créée, .pill.ready, .pill.st-prete, .tag.add { background:var(--ok-soft); color:var(--ok); border-color:var(--ok-line); }
.pill.rejetée, .tag.del { background:var(--surface); color:var(--muted); border-color:var(--line); }
.pill.approuver { background:var(--indigo-soft); color:var(--indigo); border-color:var(--indigo-line); }
.pill.st-verifier, .tag.keep { background:var(--warn-soft); color:var(--warn); border-color:var(--warn-line); }
.pill.st-bloquee, .pill.st-doublon { background:var(--err-soft); color:var(--err); border-color:var(--err-line); }
.pill.réviser { background:var(--info-soft); color:var(--info); border-color:var(--info-line); }
.tag.upd { background:var(--accent-soft); color:var(--accent); border-color:var(--accent-border); }
.pill.muted-pill { color:var(--muted); }
.subtle { display:block; }

/* confidence: 36 x 4 bar, thresholds high >= 90, medium 75-89, low < 75 */
.meter { color:var(--ink-2); }
.meter i { width:36px; height:4px; border-radius:2px; }
.meter i b { border-radius:2px; }

/* cards and detail panel */
.card { border-radius:var(--radius-md); box-shadow:var(--shadow-sm); }
.card > h3 { display:flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.04em; color:var(--brand); }
.card > h3::before { content:""; width:3px; height:12px; border-radius:2px; background:var(--mark); flex:none; }
:root[data-theme="dark"] .card > h3 { color:var(--ink-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card > h3 { color:var(--ink-2); } }
.doc { border-radius:var(--radius-md); }
.dupbox, .returned { border-radius:var(--radius-md); }
.dupbox { border-left:3px solid var(--tone-err); border-color:var(--err-line); border-left-color:var(--tone-err); }
.returned { border-left-color:var(--tone-warn); }
.actionbar { background:var(--surface); }
.batchbar { background:var(--brand); border-radius:var(--radius-md); box-shadow:var(--shadow-md); }
.flow .step.now { background:var(--accent); }
.kbd { border-radius:3px; font-family:inherit; font-weight:500; }
.empty { color:var(--muted); }

/* dates: calendar follows the theme, icon in the accent colour, typing still works */
input[type=date] { color-scheme:light; font-variant-numeric:tabular-nums; cursor:text; }
:root[data-theme="dark"] input[type=date] { color-scheme:dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) input[type=date] { color-scheme:dark; } }
input[type=date]::-webkit-calendar-picker-indicator { cursor:pointer; padding:4px; border-radius:var(--radius); opacity:.75; }
input[type=date]::-webkit-calendar-picker-indicator:hover { opacity:1; background:var(--accent-soft); }
input[type=date]:focus { border-color:var(--accent); outline:2px solid var(--accent-soft); outline-offset:0; }
.filter-grid input:not([type=checkbox]):focus, .filter-grid select:focus { border-color:var(--accent); }
.filter-actions { display:flex; align-items:center; gap:10px; margin:0 0 4px; }
.btn[aria-disabled="true"] { pointer-events:none; }

/* saved filters strip, part of the same card */
.savedbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:8px 16px; background:var(--surface); border:1px solid var(--line); border-top:0; }
.saved { display:inline-flex; align-items:center; border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--surface); }
.saved a { padding:0 4px 0 10px; height:26px; display:flex; align-items:center; text-decoration:none; color:var(--ink); font-weight:500; }
.saved a:hover { color:var(--accent); }
.saved form { margin:0; display:flex; }
.saved button { min-height:26px; padding:0 8px 0 4px; font-size:14px; color:var(--muted); border:0; }
.saved button:hover { color:var(--err); background:transparent; }
.saved.on { background:var(--accent-soft); border-color:var(--accent-border); }
.saved.on a { color:var(--accent); }
.savenew { margin:0 0 0 auto; display:flex; gap:8px; align-items:center; }
.savenew input { width:200px; }
.picker-list label[hidden] { display:none !important; }

/* profile menu (top right): avatar + name; language, theme, profile, settings, sign out */
details.profile summary { display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none; color:var(--bar-ink); font-size:13px; padding:3px 6px; border-radius:var(--radius); }
details.profile summary::-webkit-details-marker { display:none; }
details.profile summary:hover, details.profile[open] summary { background:rgba(255,255,255,.08); }
details.profile summary::after { content:"▾"; font-size:10px; color:var(--bar-muted); }
.avatar { width:26px; height:26px; border-radius:50%; background:var(--mark, var(--accent)); color:var(--brand, var(--bar)); display:inline-flex; align-items:center; justify-content:center; font-weight:600; font-size:13px; }
.pname { max-width:140px; overflow:hidden; text-overflow:ellipsis; }
details.profile .menu { min-width:250px; padding:6px 0; }
details.profile .who-card { display:flex; flex-direction:column; gap:1px; padding:8px 16px 10px; border-bottom:1px solid var(--brand-2, rgba(255,255,255,.15)); margin-bottom:4px; color:var(--bar-muted); font-size:12px; white-space:normal; }
details.profile .who-card strong { color:#fff; font-size:14px; }
details.profile .menu a, details.profile .signout button { display:block; width:100%; text-align:left; padding:8px 16px; border:0; border-radius:0; background:transparent; color:var(--bar-ink); font:inherit; font-size:13px; text-decoration:none; cursor:pointer; }
details.profile .menu a:hover, details.profile .signout button:hover { background:rgba(255,255,255,.08); }
details.profile .signout { margin:4px 0 0; border-top:1px solid var(--brand-2, rgba(255,255,255,.15)); padding-top:4px; }
.quick-prefs { margin:0 0 4px; padding-bottom:4px; border-bottom:1px solid var(--brand-2, rgba(255,255,255,.15)); }
.quick-prefs .pick { display:flex; align-items:center; gap:4px; padding:5px 16px; color:var(--bar-muted); font-size:12px; }
.quick-prefs .pick > span { margin-right:auto; }
.quick-prefs .pick button { border:1px solid var(--brand-2, rgba(255,255,255,.15)); background:transparent; color:var(--bar-ink); border-radius:var(--radius); font-size:12px; padding:3px 8px; min-width:36px; cursor:pointer; }
.quick-prefs .pick button:hover { border-color:var(--bar-muted); }
.quick-prefs .pick button[aria-pressed="true"] { background:var(--mark, var(--accent)); border-color:var(--mark, var(--accent)); color:var(--brand, var(--bar)); font-weight:600; }
@media (max-width:640px) { .pname { display:none; } details.profile .menu { right:8px; } }

/* personal preference: larger text everywhere (the whole page is scaled, so spacing stays in proportion) */
:root[data-size="large"] body { zoom:1.15; }

/* profile page: preferences as simple choice rows */
.prefs-form .choice { display:grid; grid-template-columns:minmax(150px, 220px) 1fr; gap:6px 16px; align-items:start; padding:12px 0; border-top:1px solid var(--line); }
.prefs-form .choice:first-of-type { border-top:0; padding-top:4px; }
.prefs-form .choice > .label { font-weight:600; }
.prefs-form .choice > .label small { display:block; font-weight:400; color:var(--muted); font-size:12px; margin-top:2px; }
.prefs-form .options { display:flex; flex-wrap:wrap; gap:6px 14px; }
.prefs-form .options label { display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
@media (max-width:640px) { .prefs-form .choice { grid-template-columns:1fr; } }
.lang-links { display:flex; justify-content:center; gap:14px; margin:14px 0 0; padding-top:10px; border-top:1px solid var(--line); }
.lang-links button.link { background:none; border:0; padding:0; color:var(--accent); font-size:12px; cursor:pointer; text-decoration:underline; }
.lang-links button.link[aria-current="true"] { color:var(--ink); font-weight:600; text-decoration:none; cursor:default; }

/* group of companies: which company the screen is on, and the switch to another one */
details.entity { margin:0 6px 0 2px; }
details.entity summary { display:flex; align-items:center; gap:6px; padding:4px 10px; border:1px solid rgba(255,255,255,.22); border-radius:var(--radius); color:#fff; font-weight:500; cursor:pointer; list-style:none; max-width:240px; }
details.entity summary::-webkit-details-marker { display:none; }
details.entity summary::after { content:"▾"; font-size:10px; opacity:.7; }
details.entity summary:hover { background:rgba(255,255,255,.08); }
details.entity .ename { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
details.entity .menu { left:0; right:auto; min-width:220px; }
.doc-open { position:absolute; top:8px; right:20px; z-index:1; font-size:12px; padding:4px 8px; background:var(--surface); }