/* Efficor look: glass menu on the left, turquoise "egg" accent, true-black dark mode (see "Design of review_app" in CLAUDE.md).
   ap-agent review screen. No framework, no CDN, no outside request: works offline (the Manrope font is in static/fonts).
   Every colour is a token: the first block is the light theme, the next two the dark one (chosen, or because the computer
   prefers dark and nothing was chosen). Older names (--ink, --line, --accent...) stay as aliases of the new tokens so every
   screen follows the same palette. */
@font-face { font-family:"Manrope"; font-style:normal; font-weight:400 800; font-display:swap;
  src:url("fonts/Manrope-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"Manrope"; font-style:normal; font-weight:400 800; font-display:swap;
  src:url("fonts/Manrope-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --ui-scale:.86; /* the whole page is drawn at this scale (denser); "Grand" text puts it back to 1, phones too */
  color-scheme:light;
  --bg:#F6F6F5; --surface:#FFFFFF; --surface2:#F3F3F3; --border:#E3E3E3; --field:#8F8F8F;
  --text:#0F0F0F; --text2:#5C5C5C; --primary:#111111; --onprimary:#FFFFFF;
  --egg:#81D8D0; --onegg:#0A0A0A; --eggsoft:#E4F6F4; --reperes:#26998F; --link:#1A726C;
  --ok:#1F7A3F; --okbg:#E4F3E8; --warn:#8A4B00; --warnbg:#FFEFD1; --err:#B3261E; --errbg:#FDE8E6;
  --hero:#0F0F0F; --onhero:#FFFFFF; --hero2:#B5B5B5; --herob:#333333;
  --shadow:0 1px 2px rgba(15,15,15,.05); --shadow-pop:0 8px 24px rgba(15,15,15,.12);
  --glass:rgba(255,255,255,.58); --glassb:rgba(255,255,255,.75);
  --glasss:0 0 0 1px rgba(15,15,15,.05), 0 16px 48px rgba(15,15,15,.09);
  --eggglass:rgba(129,216,208,.30); --hoverglass:rgba(15,15,15,.05);
  --glassfallback:rgba(255,255,255,.94);
  --indigo:#4338CA; --indigo-soft:#EEF0FF; --indigo-line:#C7CBFA;
  --paper:#FFFFFF; --blue:#1D4ED8; --onblue:#FFFFFF; --bluesoft:#E8EFFD; --blueline:#B9CCF5;
  --lg-bg:#FFFFFF; --lg-text:#0A0A0A; --lg-card:#FAFBFA; --lg-card-border:#E2E5E3; --lg-btn:#FFFFFF; --lg-border:#E2E5E3; --lg-label:#33403D; --lg-grey:#5B6764; --lg-primary:#0A0A0A; --lg-onprimary:#FFFFFF; --lg-logo-back:var(--egg); --lg-logo-front:#0A0A0B; --lg-logo-arc:#FFFFFF; --lg-logo-bar:var(--egg); --lg-logo-front-stroke:transparent;   /* sign-in page */
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --bg:#0A0A0A; --surface:#141414; --surface2:#1C1C1C; --border:#2B2B2B; --field:#6B6B6B;
  --text:#F2F2F2; --text2:#A1A1A1; --primary:#F2F2F2; --onprimary:#0A0A0A;
  --egg:#81D8D0; --onegg:#0A0A0A; --eggsoft:#0F2C29; --reperes:#81D8D0; --link:#81D8D0;
  --ok:#5CC98A; --okbg:#10281A; --warn:#F2B35A; --warnbg:#3A2A0D; --err:#FF8A80; --errbg:#3A1512;
  --hero:#141414; --onhero:#F2F2F2; --hero2:#A1A1A1; --herob:#2B2B2B;
  --shadow:none; --shadow-pop:0 8px 24px rgba(0,0,0,.6);
  --glass:rgba(26,26,26,.55); --glassb:rgba(255,255,255,.09); --glasss:0 16px 48px rgba(0,0,0,.55);
  --eggglass:rgba(129,216,208,.18); --hoverglass:rgba(255,255,255,.06);
  --glassfallback:rgba(20,20,20,.96);
  --indigo:#A5A9FF; --indigo-soft:#1F2247; --indigo-line:#3A3F86;
  --paper:#141414; --blue:#8FB4FF; --onblue:#0A0A0A; --bluesoft:#12233F; --blueline:#2A4375;
  --lg-bg:#000000; --lg-text:#F5F5F5; --lg-card:#0D0D0D; --lg-card-border:#2B2F2E; --lg-btn:#1A1D1C; --lg-border:#2B2F2E; --lg-label:#D5DAD8; --lg-grey:#9AA4A1; --lg-primary:#F5F5F5; --lg-onprimary:#0A0A0A; --lg-logo-back:var(--egg); --lg-logo-front:#0A0A0B; --lg-logo-arc:#FFFFFF; --lg-logo-bar:var(--egg); --lg-logo-front-stroke:#3A403E;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme:dark;
    --bg:#0A0A0A; --surface:#141414; --surface2:#1C1C1C; --border:#2B2B2B; --field:#6B6B6B;
    --text:#F2F2F2; --text2:#A1A1A1; --primary:#F2F2F2; --onprimary:#0A0A0A;
    --egg:#81D8D0; --onegg:#0A0A0A; --eggsoft:#0F2C29; --reperes:#81D8D0; --link:#81D8D0;
    --ok:#5CC98A; --okbg:#10281A; --warn:#F2B35A; --warnbg:#3A2A0D; --err:#FF8A80; --errbg:#3A1512;
    --hero:#141414; --onhero:#F2F2F2; --hero2:#A1A1A1; --herob:#2B2B2B;
    --shadow:none; --shadow-pop:0 8px 24px rgba(0,0,0,.6);
    --glass:rgba(26,26,26,.55); --glassb:rgba(255,255,255,.09); --glasss:0 16px 48px rgba(0,0,0,.55);
    --eggglass:rgba(129,216,208,.18); --hoverglass:rgba(255,255,255,.06);
    --glassfallback:rgba(20,20,20,.96);
    --indigo:#A5A9FF; --indigo-soft:#1F2247; --indigo-line:#3A3F86;
  --paper:#141414; --blue:#8FB4FF; --onblue:#0A0A0A; --bluesoft:#12233F; --blueline:#2A4375;
    --lg-bg:#000000; --lg-text:#F5F5F5; --lg-card:#0D0D0D; --lg-card-border:#2B2F2E; --lg-btn:#1A1D1C; --lg-border:#2B2F2E; --lg-label:#D5DAD8; --lg-grey:#9AA4A1; --lg-primary:#F5F5F5; --lg-onprimary:#0A0A0A; --lg-logo-back:var(--egg); --lg-logo-front:#0A0A0B; --lg-logo-arc:#FFFFFF; --lg-logo-bar:var(--egg); --lg-logo-front-stroke:#3A403E;
  }
}
/* Older names used by the other screens, now derived from the tokens above (same value in light and dark). */
:root {
  --surface-2:var(--surface2); --header:var(--surface2); --hover:var(--surface2);
  --ink:var(--text); --ink-2:var(--text2); --muted:var(--text2);
  --line:var(--border); --line-strong:var(--field);
  --accent:var(--link); --accent-ink:var(--onprimary); --accent-soft:var(--eggsoft);
  --accent-hover:color-mix(in srgb, var(--link) 84%, var(--text)); --accent-border:color-mix(in srgb, var(--link) 40%, var(--surface));
  --ok-soft:var(--okbg); --ok-line:color-mix(in srgb, var(--ok) 35%, var(--surface));
  --warn-soft:var(--warnbg); --warn-line:color-mix(in srgb, var(--warn) 35%, var(--surface));
  --err-soft:var(--errbg); --err-line:color-mix(in srgb, var(--err) 35%, var(--surface));
  --info:var(--link); --info-soft:var(--eggsoft); --info-line:color-mix(in srgb, var(--link) 35%, var(--surface));
  --tone-ok:var(--ok); --tone-warn:var(--warn); --tone-err:var(--err); --tone-info:var(--link); --tone-indigo:var(--indigo);
  --brand:var(--hero); --brand-2:var(--herob); --mark:var(--egg);
  --bar:var(--hero); --bar-ink:var(--onhero); --bar-muted:var(--hero2);
  --radius:8px; --radius-md:16px; --radius-lg:24px; --shadow-sm:var(--shadow); --shadow-md:var(--shadow-pop);
  --pad:8px; --row:6px; --ctl:30px;
}

* { box-sizing:border-box; }
body { zoom:var(--ui-scale); margin:0; font:15px/1.45 "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--text); -webkit-font-smoothing:antialiased;
  background:var(--bg);
  background-attachment:fixed; font-variant-numeric:tabular-nums; }
a { color:var(--link); }
/* Link style D: plain links inside the page keep the text colour with a thin pale underline, turquoise on hover.
   Only links with no class (buttons, cards, pills, chips, menu items all carry a class). The selector is just
   strong enough (0,0,2) to beat the global `a` colour, and weaker than any rule written for a particular spot
   (`.tabs a`, `td .vendor a`, `.notice a`...), which still win. */
main a:where(:not([class]):not(.btn):not(.bt):not(.kpi):not(.hublink):not(.pill)) {
  color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb, currentColor 30%, transparent);
  transition:color 150ms ease, text-decoration-color 150ms ease;
}
main a:where(:not([class]):not(.btn):not(.bt):not(.kpi):not(.hublink):not(.pill)):where(:hover, :focus-visible) {
  color:var(--link); text-decoration-color:var(--link);
}
@media (prefers-reduced-motion: reduce) { main a:where(:not([class]):not(.btn):not(.bt):not(.kpi):not(.hublink):not(.pill)) { transition:none; } }
h1, h2, h3 { margin:0; font-weight:700; }
h1 { font-size:20px; }
table, .tablewrap { font-size:15px; }
input, select, textarea { font-size:14px; }
.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(--link); outline-offset:2px; }


/* 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(--egg); border-color:var(--egg); color:var(--onegg); font-weight:700; }
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); }
label .req { color:var(--err); font-weight:700; }
input.flag, textarea.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); } .flash.warn { border-left-color:var(--warn); }
.bk-flash { position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:50; max-width:min(560px,90vw); margin:0; box-shadow:0 2px 8px rgba(0,0,0,.12); }

/* summary strip: clickable, one row, money on every cell */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); margin-bottom:10px; }
.kpi { padding:6px 12px; 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 / var(--ui-scale) - 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); }
/* whole row opens the link of its first cell, with no script */
tr.clickable { position:relative; } tr.clickable a.rowlink { text-decoration:none; color:inherit; } tr.clickable a.rowlink::after { content:""; position:absolute; inset:0; }
tr.clickable:hover a.rowlink strong { color:var(--link); } tr.clickable a.rowlink:focus-visible { outline:none; } tr.clickable a.rowlink:focus-visible::after { outline:2px solid var(--accent); outline-offset:-2px; }
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; }
th.col-issues, td.col-issues { width:260px; min-width:260px; max-width:260px; }
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; width:240px; }
.issues .issue-line span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.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.création, .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 / var(--ui-scale) - 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 / var(--ui-scale) - 80px); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; }
.loupe { position:fixed; z-index:210; width:440px; height:280px; border-radius:8px; border:2px solid var(--accent); box-shadow:0 2px 10px rgba(0,0,0,.25); background-color:#fff; background-repeat:no-repeat; pointer-events:none; }
.loupe[hidden] { display:none; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--pad) 12px 10px; margin-bottom:8px; }
.card > h3 { font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin:2px 0 10px; font-weight:600; }
.card.tax-note { margin-bottom:12px; }
.card.tax-note > p { margin:0; }
.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; }
.issue-fix { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:2px 0 8px 26px; }
.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; }
.editrow-toggle[aria-expanded="true"] { background:var(--accent-soft); }
tr.editrow-tr[hidden] { display:none; }
tr.editrow-tr > td { padding:0; }
.editbox .actionbar { background:transparent; }
.editbox { text-align:left; margin:0; padding:14px 16px; border-top:1px solid var(--line); background:var(--surface-2); }
.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; }
}
/* 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 { 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); }
  .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 { .side, .contentbar, .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; }


.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; }
/* 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; }


/* 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(--egg); border-color:var(--egg); color:var(--onegg); font-weight:700; }
button.primary:hover, .btn.primary:hover { background:var(--egg); border-color:var(--egg); filter:brightness(1.06); }
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; }
/* the one main action of a page */
.btn.btn-main { min-height:44px; font-size:15px; padding:0 20px; border-radius:10px; display:inline-flex; align-items:center; }
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:19px; 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:8px 12px; margin-bottom:0; box-shadow:var(--shadow-sm); }
.tabs { border-color:var(--line-strong); }
.tabs a { padding:0 10px; height:26px; 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:5px 12px; background:var(--surface); border:1px solid var(--line); border-top:0; }
.resultcount { margin:0; min-height:32px; padding:5px 12px; 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 / var(--ui-scale) - 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:28px; padding:0 10px; font-size:13px; 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:5px 10px; vertical-align:middle; }
tr.clickable td { min-height:32px; }
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(--text); }
: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, .pill.création, .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(--text2); }
.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; }


/* personal preference: larger text everywhere = the page is drawn at full size instead of --ui-scale */
:root[data-size="large"] { --ui-scale:1; }
@media (max-width: 820px) {
  :root { --ui-scale:1; --pad:12px; --row:12px; --ctl:36px; }
  table, .tablewrap { font-size:14px; }
  th { height:34px; padding:0 12px; font-size:12px; }
  td { padding:8px 12px; }
  tr.clickable td { min-height:48px; }
  .card { padding:var(--pad) 16px 16px; margin-bottom:12px; }
  .kpi { padding:10px 14px; }
  .toolbar { padding:12px 16px; }
  .chips { padding:8px 16px; }
  .resultcount { min-height:44px; padding:8px 16px; }
  .tabs a { padding:0 12px; height:30px; }
}

/* 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; }


.tip { display:none; position:fixed; z-index:50; max-width:360px; padding:6px 9px; font-size:12.5px; line-height:1.4; color:var(--ink); background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius); box-shadow:0 4px 12px rgba(0,0,0,.12); pointer-events:none; }

.collist { list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:var(--radius); }
.collist li { display:flex; justify-content:space-between; align-items:center; padding:3px 10px; border-bottom:1px solid var(--line); }
.collist li:last-child { border-bottom:0; }
.collist label { display:flex; gap:8px; align-items:center; flex:1; cursor:pointer; }
.collist input[type=checkbox] { width:auto; min-height:0; }
.colmove { display:flex; gap:2px; }
.gearcell { text-align:right; position:sticky; right:0; z-index:2; width:44px; background:var(--header); box-shadow:-1px 0 0 var(--line); }
.gearcell .btn { padding:2px 6px; }
.gearcell .ico { margin-right:0; }
.colpanel { position:fixed; z-index:40; width:300px; max-height:calc(80vh / var(--ui-scale)); overflow:auto; padding:12px; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius); box-shadow:0 8px 20px rgba(0,0,0,.15); }
.colpanel[hidden] { display:none; }
.collist li[draggable] { cursor:grab; }
.collist li.dragging { opacity:.4; }
.collist li.over-before { box-shadow:inset 0 2px 0 var(--accent); }
.collist li.over-after { box-shadow:inset 0 -2px 0 var(--accent); }
.collist .grip { color:var(--muted); letter-spacing:-3px; margin-right:8px; user-select:none; }

.linefields { display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:4px; }
.linefields .lineproj { margin-top:0; }

.doc iframe { width:100%; flex:1; min-height:0; border:0; display:block; }
.doc-open { flex:none; display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; padding:6px 10px; border-bottom:1px solid var(--line); background:var(--surface); font-size:12px; }
.doc-open .pg { margin-right:auto; color:var(--muted); font-variant-numeric:tabular-nums; }
.doc-open .grp { display:inline-flex; align-items:center; gap:4px; }
.doc-open button, .doc-open .btn { min-height:28px; padding:0 9px; font-size:12px; }
.doc-open .zv { min-width:44px; text-align:center; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.doc-open .lens-toggle { display:inline-flex; align-items:center; gap:4px; color:var(--ink-2); cursor:pointer; }
.doc-scroll { flex:1; min-height:0; overflow:auto; background:var(--bg); padding:10px; }
.doc-pages { margin:0 auto; width:100%; }
.doc-pages img { display:block; width:100%; cursor:crosshair; background:#fff; border:1px solid var(--line); }
.doc-pages img + img { margin-top:10px; }
.doc-pages .wide-note { color:var(--muted); padding:16px 0; text-align:center; }
.doc img.zoom { width:auto; }
.doc [hidden] { display:none !important; }
.seg { display:inline-flex; border:1px solid var(--line-strong); border-radius:var(--radius); overflow:hidden; }
.seg button { border:0; border-radius:0; background:var(--surface); color:var(--ink-2); }
.seg button + button { border-left:1px solid var(--line-strong); }
.seg button[aria-pressed="true"] { background:var(--accent); color:var(--accent-ink); }
.doc-scroll.pannable .doc-pages img { cursor:grab; }
.doc-scroll.panning, .doc-scroll.panning .doc-pages img { cursor:grabbing; user-select:none; }
textarea { padding:6px 8px; resize:vertical; }
.lineproj > span, .lineproj { white-space:nowrap; } .lineproj select { min-width:0; }

/* a button that reads as a link: a rare, secondary action inside a sentence */
button.linklike { background:none; border:0; padding:0 2px; min-height:0; height:auto; color:var(--accent); text-decoration:underline; cursor:pointer; font:inherit; }

/* Équipe: on a phone each person becomes one small block (the 9 columns do not fit) */
@media (max-width:640px) {
  table.team, table.team tbody, table.team tr, table.team td { display:block; }
  table.team thead { position:absolute; left:-9999px; }
  table.team tr { padding:10px 0; border-bottom:1px solid var(--line, #e5e7eb); }
  table.team td { border:0; padding:2px 0; text-align:left; }
  table.team td.num { display:flex; justify-content:space-between; gap:12px; }
  table.team td.num::before { content:attr(data-label); color:var(--ink-2, #5b6472); }
}


/* Bank: progress banner, filter tabs and the statement / books side by side */
.recon-banner { margin:0 0 10px; }
.recon-line { display:flex; gap:8px; flex-wrap:wrap; align-items:baseline; margin-bottom:6px; }
.recon-bar { height:6px; background:var(--line); border-radius:3px; overflow:hidden; }
.recon-bar i { display:block; height:100%; background:var(--link); }
.recon-controls { display:flex; gap:12px; flex-wrap:wrap; justify-content:space-between; align-items:center; margin-bottom:12px; }
.sure-bar { display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:10px 14px; margin-bottom:12px;
  background:var(--ok-soft); border:1px solid var(--ok-line); border-radius:var(--radius); }
.sbs-note { flex:1; min-width:200px; }
.sbs-form { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-left:auto; }
.sbs-form input { width:170px; }
.bk-fix { flex-basis:100%; }
.bk-fix > summary { cursor:pointer; display:inline-block; }
.bk-fix[open] > summary { margin-bottom:6px; }
/* Bank: the from-to dates are always on screen, on their own line under the month field */
.period-form { align-items:flex-end; margin:0 0 14px; border-radius:var(--radius-md); }
.period-form > strong { align-self:center; }
.period-form .field { width:150px; margin:0; }
.period-form .field input { width:100%; padding-right:34px; font-variant-numeric:tabular-nums; }
.period-form > .muted { align-self:center; }


/* Bank account screen: cards, 4 balance tiles, and the books / statement panels with a draggable bar between them */
.bk-chips, .bk-bar { padding:8px 14px; margin-bottom:10px; }
.bk-chips { padding:6px; }
.tabs.seg { border-color:transparent; }
.tabs.seg a { justify-content:center; border-radius:var(--radius); border-right:0; padding-left:14px; padding-right:14px; transition:background .18s, color .18s; }
.bk-row { display:flex; flex-wrap:wrap; gap:8px 10px; align-items:flex-end; margin:0; }
.bk-row > label, .bk-row > strong { align-self:center; font-weight:600; }
.bk-row .spacer { flex:1; }
.bk-row .field { margin:0; }
.bk-row .field label { margin-bottom:3px; }
.kpis.cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; border:0; background:none; box-shadow:none; border-radius:0; overflow:visible; }
.kpis.cards .kpi { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); overflow:hidden; padding:14px 16px 12px; }
.kpis.cards .kpi.zero { background:var(--surface); }
.kpis.cards .kpi .value { font-size:24px; font-weight:700; margin-top:4px; font-variant-numeric:tabular-nums; }
.kpis.cards .kpi .sub { margin-top:2px; }
.gapbox > summary { cursor:pointer; }
.gaptable { margin-top:8px; max-width:640px; }
.gaptable td.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.recon-line .warn { font-weight:600; }
.sure-bar { border-radius:var(--radius-md); }

.sbs2 { display:grid; grid-template-columns:minmax(0,var(--bank-w,1fr)) 14px minmax(0,var(--books-w,1fr)); align-items:start; margin-bottom:14px; }
.sbs2 .splitter { position:static; height:auto; align-self:stretch; min-height:120px; }
.sbs2-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); overflow:hidden; min-width:0; }
.sbs2-card header { padding:12px 16px 8px; }
.sbs2-card h2 { font-size:15px; margin:0; font-weight:700; }
.sbs2-card header p { margin:2px 0 0; }
.sbs2-card footer { display:flex; gap:12px; flex-wrap:wrap; justify-content:space-between; align-items:center; padding:9px 16px; border-top:1px solid var(--line); font-size:13px; }
.sbs2-scroll { overflow-x:auto; }
.sbs2-table { width:100%; border-collapse:collapse; font-size:14.5px; font-variant-numeric:tabular-nums; table-layout:auto; }
.sbs2-table th { text-align:left; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); font-weight:600; padding:6px 8px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface2); white-space:nowrap; }
.sbs2-table td { padding:7px 8px; border-bottom:1px solid var(--line); vertical-align:top; background:transparent; }
.sbs2-table th:first-child, .sbs2-table td:first-child { padding-left:16px; }
.sbs2-table th:last-child, .sbs2-table td:last-child { padding-right:16px; }
.sbs2-table .num { text-align:right; white-space:nowrap; }
.sbs2-table .n { width:1%; text-align:center; }
.sbs2-table .d { white-space:nowrap; color:var(--muted); }
.sbs2-table td.desc { max-width:0; width:100%; }
.sbs2-table .desc > .sbs2-toggle, .sbs2-table .desc > .sbs2-text { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.sbs2-table .cat { display:block; color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sbs2-table .circ { color:var(--blue); font-weight:600; }
.sbs2-toggle { all:unset; box-sizing:border-box; cursor:pointer; max-width:100%; color:var(--ink); }
.sbs2-toggle:hover { text-decoration:underline; }
.sbs2-toggle:focus-visible { outline:2px solid var(--link); outline-offset:2px; border-radius:4px; }
.sbs2-r[data-toggle] { cursor:pointer; }
.sbs2-r { transition:background .18s; }
.sbs2-r.bk-busy td { opacity:.55; }   /* the line being sent: the answer replaces the whole block in a moment */
.sbs2-r.look-ok td, .sbs2-r.look-done td { background:var(--okbg); }
.sbs2-r.look-ecart td { background:var(--warnbg); }
.sbs2-r.look-circ td { background:var(--bluesoft); }
.sbs2-r.look-ecart td.warn { color:var(--warn); font-weight:700; }
.sbs2-badge { display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; min-width:22px; height:22px; border-radius:50%; font-size:12px; font-weight:700; line-height:1; }
.sbs2-badge.m { background:var(--ok); color:var(--surface); }
.sbs2-badge.m.ecart { background:var(--warn); }
.sbs2-badge.c { background:var(--blue); color:var(--onblue); }
.sbs2-badge.w, .sw.todo { border:1.5px dashed var(--warn); background:transparent; }
.sw { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:6px; vertical-align:-1px; box-sizing:border-box; }
.sw.ok { background:var(--okbg); border:1px solid var(--ok); }
.sw.circ { background:var(--bluesoft); border:1px solid var(--blue); }
.sw.todo { border-radius:50%; }
.sbs2-detail td { padding:0 16px 10px; background:var(--paper); }
.sbs2-panel { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface2); }
@media (max-width:900px) {
  .sbs2 { grid-template-columns:1fr; gap:14px; }
  .sbs2 .splitter { display:none; }
  .kpis.cards { grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .tabs.seg a, .sbs2-r, .bk-tile { transition:none; } }


/* « Noter une réception » on the review screen: quantity, note and button side by side with room to type */
.recu-form { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; font-size:13px; } .recu-form span { flex:none; } .recu-form .recu-qty { width:120px; flex:none; text-align:right; font-variant-numeric:tabular-nums; } .recu-form .recu-note { flex:1 1 200px; min-width:160px; width:auto; } .recu-form button { flex:none; min-height:var(--ctl); }

/* Reports that will not ship in version 1: quiet red marker */
a.hublink.not-v1 { border-left:3px solid var(--err); } a.hublink.not-v1 h3 { color:var(--err); }

/* Factures > « À reprendre » */
.redo { padding:12px 16px; }
.redolist { list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.redolist li { display:flex; align-items:center; gap:12px; flex-wrap:wrap; border-top:1px solid rgba(128,128,128,.25); padding-top:8px; }
.redolist .redo-what { flex:1 1 320px; min-width:0; overflow-wrap:anywhere; }
.redolist form { margin:0; }

/* Administration tab bar: tabs grouped in families, each with a small quiet title */
.tabrow { display:flex; flex-wrap:wrap; align-items:flex-end; gap:6px 18px; margin:0 0 14px; }
.tabfam { display:flex; flex-direction:column; gap:4px; max-width:100%; }
.tabfam-t { font-size:12px; color:var(--muted); padding-left:2px; }
.tabfam .tabs { width:max-content; max-width:100%; }

/* A part of a page that arrives after the rest (static/charger.js): a short sentence while it is read, or when it failed */
.charger-wait, .charger-err { display:flex; align-items:center; justify-content:center; gap:14px; padding:44px 12px; margin:14px 0; color:var(--muted); font-size:14px; background:var(--surface); border:1px solid var(--border); border-radius:16px; }
.charger-err { color:var(--text); }