:root{
  /* Henderson branding: the former green accent is the logo navy #27265F.
     The neutrals (page background, table headers, tab counters, borders, grey
     text) had a slight green tint; they are now plain greys of exactly the same
     lightness. Status colours (--good / --warn / --danger / --info / peach) and
     the --st-* values below that keep status controls on their original
     colours are unchanged. */
  --bg:#F4F4F4; --surface:#FFFFFF; --surface-2:#ECECEC; --surface-3:#E0E0E0;
  --border:#D8D8D8; --text:#1B1B1B; --text-muted:#626262; --text-faint:#8F8F8F;
  --accent:#27265F; --accent-strong:#1D1C4A; --accent-soft:#E6E7F3; --accent-contrast:#FFFFFF;
  --st-neutral-bg:#DEE2D7; --st-neutral-ink:#5C6659; --st-faint:#8A9282;
  --st-approve:#2B5D4C; --st-approve-strong:#204A3C; --st-approve-ink:#FFFFFF; --st-border:#D6DACD; --st-surface:#FFFFFF; --st-ink:#181D17;
  --warn:#93630F; --warn-soft:#FBF1DC; --danger:#A83A31; --danger-soft:#FBE8E5;
  --good:#2E7D46; --good-soft:#E3F3E7; --info:#355E88; --info-soft:#E5EDF5;
  --shadow: 0 1px 2px rgba(27,27,27,.06), 0 4px 14px rgba(27,27,27,.05);
  --radius: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#121212; --surface:#1A1A1A; --surface-2:#212121; --surface-3:#2B2B2B;
    --border:#313131; --text:#EAEAEA; --text-muted:#A8A8A8; --text-faint:#767676;
    --accent:#9DA0E3; --accent-strong:#BBBEF2; --accent-soft:#25264A; --accent-contrast:#10112A;
    --st-neutral-bg:#272E23; --st-neutral-ink:#A2AC98; --st-faint:#707A67;
    --st-approve:#7FC3A6; --st-approve-strong:#9BD6BC; --st-approve-ink:#0D1610; --st-border:#2C342A; --st-surface:#171B15; --st-ink:#E9ECE3;
    --warn:#E3AC4C; --warn-soft:#3A2E15; --danger:#E37A70; --danger-soft:#3B1E1B;
    --good:#69C085; --good-soft:#1B3324; --info:#82AEDD; --info-soft:#1C2C3D;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#121212; --surface:#1A1A1A; --surface-2:#212121; --surface-3:#2B2B2B;
  --border:#313131; --text:#EAEAEA; --text-muted:#A8A8A8; --text-faint:#767676;
  --accent:#9DA0E3; --accent-strong:#BBBEF2; --accent-soft:#25264A; --accent-contrast:#10112A;
  --st-neutral-bg:#272E23; --st-neutral-ink:#A2AC98; --st-faint:#707A67;
  --st-approve:#7FC3A6; --st-approve-strong:#9BD6BC; --st-approve-ink:#0D1610; --st-border:#2C342A; --st-surface:#171B15; --st-ink:#E9ECE3;
  --warn:#E3AC4C; --warn-soft:#3A2E15; --danger:#E37A70; --danger-soft:#3B1E1B;
  --good:#69C085; --good-soft:#1B3324; --info:#82AEDD; --info-soft:#1C2C3D;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  color-scheme: dark;
}
*{box-sizing:border-box;}
/* .login-screen (and a few other elements) set their own `display`, which
   otherwise silently overrides the browser's default `[hidden]{display:none}`
   rule - this guarantees the `hidden` attribute always actually hides things. */
[hidden]{display:none !important;}
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  font-size:14px; line-height:1.45;
}
h1,h2,h3{ font-family:'Archivo',system-ui,sans-serif; letter-spacing:-0.01em; margin:0; }
.mono{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums; }
button{ font-family:inherit; }
.muted{ color:var(--text-muted); }
.small{ font-size:12.5px; }
.faint{ color:var(--text-faint); }

/* ---------- session check / entity switch (covers everything until the right screen is known) ---------- */
.boot-screen{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; background:var(--bg); }
.boot-screen[hidden]{ display:none; }
.boot-msg{ display:flex; align-items:center; gap:10px; color:var(--text-muted); font-size:14px; font-weight:600; }
.boot-spin{ width:18px; height:18px; border-radius:50%; border:2px solid var(--border); border-top-color:var(--accent); animation:boot-spin .8s linear infinite; }
@keyframes boot-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .boot-spin{ animation:none; } }

/* ---------- login ---------- */
.login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--bg);
}
.login-card{
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:32px 28px; width:100%;
  max-width:340px; box-shadow:var(--shadow); text-align:center;
}
.login-card h1{ font-size:20px; margin:14px 0 4px; }
.login-card .field{ text-align:left; margin-top:14px; }
.pwd-wrap{ position:relative; }
.pwd-wrap input{ padding-right:38px; }
.pwd-toggle{
  position:absolute; right:4px; top:50%; transform:translateY(-50%); border:none; background:none; padding:6px;
  cursor:pointer; color:var(--text-faint); display:flex; align-items:center; justify-content:center; border-radius:6px;
}
.pwd-toggle:hover{ color:var(--text-muted); background:var(--surface-2); }
.pwd-toggle svg{ width:18px; height:18px; }
.error-text{ color:var(--danger); font-size:12.5px; margin:10px 0 0; }
/* ---------- LD -> CN: the Approved badge is the audit-PDF button (looks the same; pointer + subtle hover only) ---------- */
.pill.pill-export{ cursor:pointer; }
.pill.pill-export:hover{ filter:brightness(.96); box-shadow:0 0 0 2px var(--accent-soft); }
.pill.pill-export:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- Submission Summary: every number opens the Submission List on its rows ---------- */
/* The button looks exactly like the plain number (same font, colour, position). Its padding is cancelled by an
   equal negative margin, so the cell keeps its size while the whole cell becomes the tap/click target. */
.sum-link{ font:inherit; color:inherit; background:none; border:0; padding:10px 12px; margin:-10px -12px; display:inline-block; cursor:pointer; text-align:right; border-radius:6px; font-variant-numeric:inherit; }
.sum-link:hover{ background:var(--accent-soft); color:var(--accent-strong); text-decoration:underline; text-underline-offset:3px; }
/* AR Aging follow-up date pill (under Collection status) */
.fu-pill{ display:inline-flex; align-items:center; margin-top:4px; font:inherit; font-size:11.5px; font-weight:600; padding:2px 8px; border-radius:99px; border:1px solid var(--border); background:var(--surface-2); color:var(--text-muted); cursor:default; white-space:nowrap; }
button.fu-pill{ cursor:pointer; }
button.fu-pill:hover, button.fu-pill:focus-visible{ border-color:var(--accent); color:var(--accent-strong); }
.fu-pill.fu-due{ background:var(--danger-soft); border-color:transparent; color:var(--danger); }
.fu-pill.fu-add{ background:none; border-style:dashed; font-weight:500; }
.fu-quick{ margin:-4px 0 6px; }
.sum-link:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
/* Submission Summary: the "Not Settled" column (4th) in the system's red (same as overdue / >90 figures) */
#table-submission-summary thead th:nth-child(4), #table-submission-summary tbody td:nth-child(4){ color:var(--danger); }

/* ---------- role choice screen + top-bar view switch (accounts with more than one role) ---------- */
.role-card{ max-width:400px; text-align:left; }
.role-card h1{ text-align:center; margin:4px 0 12px; }
.role-org{ text-align:center; text-transform:uppercase; letter-spacing:.09em; font-size:12px; color:var(--text-muted); margin-top:12px; }
.role-hi{ margin:0 0 6px; color:var(--text-muted); font-size:14px; line-height:1.45; }
.role-choices{ display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.role-choice{ display:block; width:100%; text-align:left; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:12px 14px; cursor:pointer; font-family:inherit; }
.role-choice:hover, .role-choice:focus-visible{ border-color:var(--accent); background:var(--accent-soft); outline:none; }
.role-choice:disabled{ opacity:.55; cursor:default; }
.role-choice b{ display:block; font-size:14.5px; margin-bottom:2px; }
.role-choice span{ display:block; color:var(--text-muted); font-size:13px; }
.role-note{ margin:14px 0 10px; color:var(--text-muted); font-size:12.5px; line-height:1.45; }
.view-switch{ max-width:190px; }
/* HSS / HT: Entity + Role choice grouped per workspace, and the top-bar entity switcher */
.role-entity{ display:flex; flex-direction:column; gap:8px; }
.role-entity + .role-entity{ margin-top:10px; padding-top:12px; border-top:1px solid var(--border); }
.role-entity-title{ font-weight:700; font-size:14px; display:flex; align-items:center; gap:8px; }
.entity-badge{ display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.04em; padding:2px 8px; border-radius:6px; background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent); }
.entity-switch{ font-weight:700; }
.check-row{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--text); cursor:pointer; }
.field .check-row input, .check-row input{ width:auto; min-height:0; margin:0; }
.login-help{ margin:8px 0 0; font-size:12.5px; line-height:1.4; color:var(--text-muted); text-align:left; }
.btn.wide{ width:100%; margin-top:18px; }

/* ---------- app shell ---------- */
#app{ max-width:1320px; margin:0 auto; padding:20px 20px 60px; }
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 4px 16px; flex-wrap:wrap; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{
  width:38px; height:38px; border-radius:9px; background:var(--accent); color:var(--accent-contrast);
  display:flex; align-items:center; justify-content:center; font-family:'Archivo'; font-weight:800; font-size:17px;
  flex:none; box-shadow:var(--shadow); margin:0 auto;
}
.login-card .brand-mark{ width:44px; height:44px; font-size:19px; }
/* Henderson logo (transparent PNG) in place of the old "HS" mark. */
.brand-logo{ display:block; height:44px; width:auto; flex:none; }
.brand-logo-login{ height:44px; width:auto; margin:0 auto; } /* same height as the old 44px "HS" mark, so the login card keeps its size */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .brand-logo{ background:#fff; border-radius:8px; padding:4px 8px; } }
:root[data-theme="dark"] .brand-logo{ background:#fff; border-radius:8px; padding:4px 8px; }
/* HT Receivables Control only: the official Henderson Technologies logo (1592x458 original) shown a little larger so
   its name and tagline read clearly; width follows the logo's own proportions. HSS and the sign-in screens are unchanged. */
:root[data-entity="HT"] .topbar .brand-logo{ height:56px; } /* transparent-background PNG, like the HSS logo */
@media (max-width:768px), (pointer:coarse) and (max-height:500px){ :root[data-entity="HT"] .topbar .brand-logo{ height:46px; } }
@media (max-width:480px){ :root[data-entity="HT"] .topbar .brand-logo{ height:40px; } }
.brand h1{ font-size:19px; font-weight:800; }
.brand p{ margin:2px 0 0; font-size:12.5px; color:var(--text-muted); }
.identity{ display:flex; align-items:center; gap:10px; }
.id-meta{ text-align:right; }
.id-name{ font-weight:600; font-size:13px; }
.id-role{
  display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; padding:2px 8px; border-radius:99px; margin-top:2px;
}
.role-editor{ background:var(--accent-soft); color:var(--accent-strong); }
.role-approver{ background:var(--good-soft); color:var(--good); }
.role-updater{ background:var(--info-soft); color:var(--info); }
.role-viewer{ background:var(--surface-3); color:var(--text-muted); }
#logout-btn{ margin-left:4px; }

/* ---------- tabs ---------- */
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--border); margin:4px 4px 20px; flex-wrap:wrap; }
.tab{
  background:none; border:none; padding:10px 14px; font-size:13.5px; font-weight:600; color:var(--text-muted);
  cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .15s;
}
.tab:hover{ color:var(--text); }
.tab.active{ color:var(--accent-strong); border-bottom-color:var(--accent); }
.tab .count{
  display:inline-block; margin-left:6px; font-size:11px; background:var(--surface-3); color:var(--text-muted);
  padding:1px 6px; border-radius:99px; font-family:'IBM Plex Mono';
}
.panel{ display:none; padding:0 4px; }
.panel.active{ display:block; }

/* ---------- sub-tabs (Unbilled / Pending Advice) ---------- */
.subtabs{ display:inline-flex; gap:2px; padding:3px; margin:-6px 0 16px; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; flex-wrap:wrap; }
.subtab{
  background:none; border:none; padding:6px 14px; font-size:13px; font-weight:600; color:var(--text-muted);
  cursor:pointer; border-radius:7px; transition:color .15s, background .15s;
}
.subtab:hover{ color:var(--text); }
.subtab.active{ background:var(--surface); color:var(--accent-strong); box-shadow:0 1px 2px rgba(0,0,0,.08); }
.subtab .count{
  display:inline-block; margin-left:6px; font-size:11px; background:var(--surface-3); color:var(--text-muted);
  padding:1px 6px; border-radius:99px; font-family:'IBM Plex Mono';
}
.subtab.active .count{ background:var(--accent-soft); color:var(--accent-strong); }
.subpanel{ display:none; }
.subpanel.active{ display:block; }
/* Receipt Date: text field + calendar picker (Pending Advice add/edit window) */
.date-pick{ position:relative; }
.field .date-pick input#m-receiptdate, .field .date-pick input.date-pick-text{ padding-right:40px; cursor:pointer; }
.field .date-pick input#m-receiptdate:focus, .field .date-pick input.date-pick-text:focus{ cursor:text; }
.field .date-pick input.date-pick-tap{ cursor:pointer; }
.field .date-pick .date-pick-native{ position:absolute; left:0; bottom:0; width:100%; height:100%; opacity:0; pointer-events:none; border:0; padding:0; z-index:-1; }
.date-pick-btn{ position:absolute; top:50%; right:4px; transform:translateY(-50%); width:32px; height:30px; display:inline-flex; align-items:center; justify-content:center;
  background:none; border:none; border-radius:6px; color:var(--text-muted); cursor:pointer; }
.date-pick-btn:hover, .date-pick-btn:focus-visible{ background:var(--surface-2); color:var(--accent-strong); }
@media (pointer: coarse){ .date-pick-btn{ width:40px; height:36px; } }
/* LD month picker (LD / CN window): month + year only */
.month-pop{ position:fixed; z-index:1100; width:236px; padding:8px; background:var(--surface); color:var(--text);
  border:1px solid var(--border); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.16); font-size:13px; }
.month-pop .mp-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.month-pop .mp-year{ font-weight:600; }
.month-pop button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; border-radius:6px; }
.month-pop .mp-nav{ width:30px; height:28px; font-size:17px; line-height:1; color:var(--text-muted); }
.month-pop .mp-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:4px; }
.month-pop .mp-m{ padding:8px 0; }
.month-pop .mp-nav:hover, .month-pop .mp-m:hover, .month-pop .mp-link:hover{ background:var(--surface-2); }
.month-pop .mp-m.mp-now{ box-shadow:inset 0 0 0 1px var(--border); }
.month-pop .mp-m.mp-sel{ background:var(--accent); color:var(--accent-contrast); font-weight:600; }
.month-pop .mp-foot{ display:flex; justify-content:space-between; margin-top:6px; padding-top:6px; border-top:1px solid var(--border); }
.month-pop .mp-link{ padding:4px 8px; color:var(--accent-strong); font-size:12.5px; }
@media (pointer: coarse){ .month-pop{ width:264px; } .month-pop .mp-m{ padding:11px 0; } }
#table-pending-advice td.pa-remarks{ white-space:pre-wrap; min-width:220px; max-width:520px; }

/* ---------- stat tiles ---------- */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; margin-bottom:18px; }
.stat{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:13px 14px; }
.stat .label{ font-size:11.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.03em; font-weight:600; }
.stat .value{ font-family:'IBM Plex Mono'; font-size:22px; font-weight:500; margin-top:4px; }
.stat .value.warn{ color:var(--warn); } .stat .value.good{ color:var(--good); } .stat .value.danger{ color:var(--danger); }

/* ---------- toolbar ---------- */
.toolbar{ display:flex; gap:8px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
.search{ flex:1; min-width:180px; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:8px 12px; font-size:13px; color:var(--text); }
.search::placeholder{ color:var(--text-faint); }
.chips{ display:flex; gap:6px; flex-wrap:wrap; }
.chip{ background:var(--surface); border:1px solid var(--border); border-radius:99px; padding:6px 12px; font-size:12.5px; font-weight:600; color:var(--text-muted); cursor:pointer; }
.chip.active{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-strong); }
.btn{ border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:8px; padding:8px 14px; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; }
.btn:hover{ border-color:var(--accent); }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-contrast); }
.btn.primary:hover{ background:var(--accent-strong); }
.btn.small{ padding:5px 10px; font-size:12px; }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
/* instant click feedback: a subtle press on every button, and a working state (spinner) while the server confirms */
.btn:active:not(:disabled){ transform:translateY(1px); }
.btn.is-busy:disabled{ opacity:.85; cursor:progress; }
.btn.is-busy::before{ content:""; display:inline-block; width:11px; height:11px; margin-right:6px; vertical-align:-1px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:boot-spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce){ .btn.is-busy::before{ animation:none; } }
.btn.ghost{ background:none; }
.btn.danger-o{ color:var(--danger); border-color:var(--danger-soft); }

/* ---------- table ---------- */
.table-wrap{ border:1px solid var(--border); border-radius:var(--radius); overflow:auto; background:var(--surface); max-height:62vh; }
table{ border-collapse:collapse; width:100%; min-width:760px; }
thead th{ position:sticky; top:0; background:var(--surface-2); text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); font-weight:600; padding:9px 12px; border-bottom:1px solid var(--border); z-index:1; }
.filter-row th{ position:sticky; top:34px; background:var(--surface); padding:5px 8px; border-bottom:1px solid var(--border); z-index:1; }
.filter-row .col-filter{
  width:100%; border:1px solid var(--border); border-radius:6px; padding:4px 7px; font-size:12px; font-weight:400;
  text-transform:none; letter-spacing:normal; background:var(--bg); color:var(--text); font-family:inherit;
}
.filter-row .col-filter::placeholder{ color:var(--text-faint); }
/* Column filter boxes (AR Aging, Submission List, LD → CN, Unbilled Revenue,
   Pending Advice): same box, with a small â–¾ hint - click to pick a
   value from the column, or type to search. A picked value is shown in the
   accent colour so it reads as "exactly this". */
#table-aging .filter-row .col-filter, #table-submissions .filter-row .col-filter, #table-cn .filter-row .col-filter,
#table-unbilled .filter-row .col-filter, #table-pending-advice .filter-row .col-filter{
  text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M.5.5 4 4 7.5.5' fill='none' stroke='%23889080' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 6px center;
}
#table-aging .filter-row .col-filter{ padding-right:17px; }
/* the other tables keep their exact box padding (column widths unchanged), so the â–¾ hint shows only while the box is empty */
#table-submissions .filter-row .col-filter:not(:placeholder-shown), #table-cn .filter-row .col-filter:not(:placeholder-shown),
#table-unbilled .filter-row .col-filter:not(:placeholder-shown), #table-pending-advice .filter-row .col-filter:not(:placeholder-shown){ background-image:none; }
.filter-row .col-filter.cf-picked{ color:var(--accent-strong); border-color:var(--accent); font-weight:600; }
.cf-pop{
  position:fixed; z-index:1000; overflow:auto; padding:4px; background:var(--surface); color:var(--text);
  border:1px solid var(--border); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.16); font-size:12.5px;
}
.cf-opt{ display:flex; align-items:baseline; gap:8px; padding:6px 8px; border-radius:5px; cursor:pointer; line-height:1.3; }
.cf-opt .cf-l{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cf-opt .cf-n{ margin-left:auto; color:var(--text-faint); font-size:11px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cf-opt:hover, .cf-opt.cf-active{ background:var(--surface-2); }
.cf-opt.cf-sel{ color:var(--accent-strong); font-weight:600; }
/* multi-select: a tick box per value; Select All shows a dash when only some are ticked */
.cf-opt{ align-items:center; }
.cf-cb{ flex:none; width:14px; height:14px; border:1.5px solid var(--border-strong, var(--text-faint)); border-radius:3px; background:var(--surface); display:inline-flex; align-items:center; justify-content:center; }
.cf-cb.cf-on{ background:var(--accent); border-color:var(--accent); }
.cf-cb.cf-on::after{ content:""; width:7px; height:4px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:translateY(-1px) rotate(-45deg); }
.cf-cb.cf-mixed{ border-color:var(--accent); }
.cf-cb.cf-mixed::after{ content:""; width:7px; height:2px; background:var(--accent); }
.cf-head{ position:sticky; top:-4px; z-index:1; display:flex; align-items:center; background:var(--surface); border-bottom:1px solid var(--border); margin:-4px -4px 3px; padding:4px 4px 3px; }
.cf-head .cf-opt.cf-all{ flex:1; font-weight:600; }
.cf-head .cf-opt.cf-clear{ flex:none; color:var(--accent-strong); font-weight:600; font-size:12px; }
.cf-head .cf-opt.cf-clear.cf-off{ color:var(--text-faint); font-weight:500; }
.cf-opt.cf-blank .cf-l{ font-style:italic; color:var(--text-muted); }
.cf-empty{ padding:8px; color:var(--text-faint); font-style:italic; }
/* date filters: months with expandable dates */
.cf-opt.cf-month{ font-weight:600; padding-left:2px; }
.cf-opt.cf-month.cf-sel{ color:var(--accent-strong); }
.cf-tog{ flex:none; width:22px; height:22px; margin:-4px 0; display:inline-flex; align-items:center; justify-content:center; border-radius:4px; color:var(--text-muted); font-size:12px; cursor:pointer; }
.cf-tog:hover{ background:var(--surface-3); color:var(--text); }
.cf-opt.cf-date{ padding-left:32px; }
@media (pointer: coarse){ .cf-tog{ width:32px; height:32px; margin:-8px 0; font-size:14px; } .cf-opt.cf-date{ padding-left:42px; } }
@media (pointer: coarse){ .cf-opt{ padding:10px 10px; } }
/* Customer combobox list in the Submission / LD-CN windows (same look as the filter list) */
.cust-pop{ z-index:1100; }
/* Per-column "Hide $0" control (AR Aging amount columns): sits directly under
   that column's own filter input, right-aligned to match the numeric column,
   so it's visually tied to that one column and not mistaken for a global toggle. */
.filter-row .hide-zero-col{
  display:flex; align-items:center; justify-content:flex-end; gap:4px; margin-top:4px;
  font-size:11px; font-weight:400; text-transform:none; letter-spacing:normal; color:var(--text-muted); white-space:nowrap; cursor:pointer;
}
.filter-row .hide-zero-col input[type="checkbox"]{ margin:0; cursor:pointer; }
/* "Hide â–¾" menu (one per AR Aging amount column): a small button under the
   column filter that opens 2 checkbox options. Same footprint as the old
   single "Hide $0" checkbox, so the header doesn't get wider or taller. */
.filter-row .hide-dd{ position:relative; display:flex; justify-content:flex-end; margin-top:4px; }
.filter-row .hide-dd-btn{
  background:none; border:0; border-radius:5px; padding:0 4px; line-height:14px;
  font:inherit; font-size:11px; font-weight:400; text-transform:none; letter-spacing:normal; color:var(--text-muted); white-space:nowrap; cursor:pointer;
}
.filter-row .hide-dd-btn:hover, .filter-row .hide-dd-btn[aria-expanded="true"]{ box-shadow:inset 0 0 0 1px var(--border); color:var(--text); }
.filter-row .hide-dd-btn.on{ background:var(--accent-soft); color:var(--accent-strong); font-weight:600; }
.filter-row .hide-dd-menu{
  position:absolute; top:calc(100% + 3px); right:0; z-index:30; min-width:150px; padding:6px;
  background:var(--surface); border:1px solid var(--border); border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,.14);
  text-align:left;
}
.filter-row .hide-dd-menu[hidden]{ display:none; }
.filter-row .hide-dd-menu label{
  display:flex; align-items:center; gap:6px; padding:5px 6px; border-radius:5px; cursor:pointer;
  font-size:12px; font-weight:400; text-transform:none; letter-spacing:normal; color:var(--text); white-space:nowrap;
}
.filter-row .hide-dd-menu label:hover{ background:var(--surface-2); }
.filter-row .hide-dd-menu input[type="checkbox"]{ margin:0; cursor:pointer; }
@media (pointer: coarse){ .filter-row .hide-dd-btn{ padding:3px 6px; } .filter-row .hide-dd-menu label{ padding:9px 8px; } }
select.btn{ appearance:auto; padding:8px 10px; }
tbody td{ padding:10px 12px; border-bottom:1px solid var(--border); font-size:13px; vertical-align:top; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background:var(--surface-2); }

/* Live-adjusting totals row (AR Aging, Unbilled Revenue) - sticks to the
   bottom of the scrolling table body so it stays visible while scrolling. */
tfoot td{ padding:10px 12px; font-size:13px; font-weight:700; background:var(--surface-2); border-top:2px solid var(--border); position:sticky; bottom:0; }
.cust{ font-weight:600; }
.sub{ color:var(--text-muted); font-size:12px; margin-top:1px; }
.pill{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:99px; white-space:nowrap; }
.pill.pending{ background:var(--warn-soft); color:var(--warn); }
.pill.hold{ background:var(--danger-soft); color:var(--danger); }
.pill.approved{ background:var(--good-soft); color:var(--good); }
.pill.settled{ background:var(--good-soft); color:var(--good); }
/* .pill.awaiting: see "Submission status colours" below */
.pill.submitted{ background:var(--info-soft); color:var(--info); }
.pill.other{ background:var(--st-neutral-bg); color:var(--st-neutral-ink); }
.pill.existing{ background:var(--info-soft); color:var(--info); }
.pill.ceased{ background:var(--st-neutral-bg); color:var(--st-neutral-ink); }
.right{ text-align:right; }
.num{ font-family:'IBM Plex Mono'; font-variant-numeric:tabular-nums; }
.rowbtns{ display:flex; gap:6px; flex-wrap:wrap; }
.empty-state{ padding:40px 20px; text-align:center; color:var(--text-muted); }

/* ---------- modal ---------- */
.overlay{ position:fixed; inset:0; background:rgba(10,14,10,.45); display:flex; align-items:flex-start; justify-content:center; padding:6vh 16px; z-index:50; overflow:auto; }
.modal{ background:var(--surface); border-radius:14px; padding:22px; width:100%; max-width:520px; box-shadow:var(--shadow); border:1px solid var(--border); }
/* Wider variant for modals that hold a data table (e.g. the Excel import preview). */
.modal.wide{ max-width:900px; }
.import-preview-table{ width:100%; border-collapse:collapse; font-size:13px; }
.import-preview-table th, .import-preview-table td{ padding:6px 8px; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; }
.import-preview-table tr.import-row-invalid{ background:var(--danger-soft); }
.import-preview-table tr.import-row-duplicate{ background:var(--warn-soft); }
.import-summary{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:10px; font-size:13px; }
.import-summary strong{ font-size:14px; }
.modal h3{ font-size:17px; margin-bottom:14px; }
.field{ margin-bottom:12px; }
.field label{ display:block; font-size:12px; font-weight:600; color:var(--text-muted); margin-bottom:5px; }
.field input, .field select, .field textarea{ width:100%; border:1px solid var(--border); border-radius:7px; padding:8px 10px; background:var(--bg); color:var(--text); font-size:13.5px; font-family:inherit; }
.field textarea{ min-height:64px; resize:vertical; }
.field-row{ display:flex; gap:10px; }
.field-row .field{ flex:1; }
.modal-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }

/* ---------- toast ---------- */
#toast{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--text); color:var(--bg); padding:10px 18px; border-radius:8px; font-size:13px; font-weight:500; box-shadow:var(--shadow); z-index:60; }

/* ---------- admin ---------- */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-bottom:16px; }
.card h3{ font-size:14px; margin-bottom:10px; }
.access-list{ margin:0; padding-left:20px; }
.access-list li{ margin:0 0 5px; }
.access-list li:last-child{ margin-bottom:0; }
.banner{ background:var(--info-soft); color:var(--info); border-radius:8px; padding:9px 13px; font-size:12.5px; margin-bottom:14px; }

/* ---------- Client Colour Tag (AR Aging, Client Name cell only) ---------- */
/* Light/pastel fills with a fixed dark text colour so the name stays readable
   in both the light and the dark theme. Applied to the one Client Name <td>
   only - never the row, never any other column. */
:root{ --tag-yellow:#FFF1A8; --tag-green:#C9EDCF; --tag-blue:#C8E0FB; --tag-ink:#1B1F1A; --tag-ink-soft:#4A5247; }
td.cust.tag-yellow{ background:var(--tag-yellow); }
td.cust.tag-green{ background:var(--tag-green); }
td.cust.tag-blue{ background:var(--tag-blue); }
td.cust.tag-yellow, td.cust.tag-green, td.cust.tag-blue{ color:var(--tag-ink); }
td.cust.tag-yellow .sub, td.cust.tag-green .sub, td.cust.tag-blue .sub{ color:var(--tag-ink-soft); }
td.cust.cust-tag-editable{ cursor:pointer; }
td.cust.cust-tag-editable:hover{ box-shadow:inset 0 0 0 2px var(--accent); }
td.cust.cust-tag-editable:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.colour-pop{
  position:fixed; z-index:70; min-width:190px; background:var(--surface); color:var(--text); border:1px solid var(--border);
  border-radius:10px; box-shadow:var(--shadow); padding:6px;
}
.colour-pop .colour-pop-title{ font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); padding:5px 8px 4px; }
.colour-pop button{
  display:flex; align-items:center; gap:10px; width:100%; min-height:40px; padding:8px 10px; border:none; background:none;
  color:var(--text); font-size:13.5px; font-weight:500; text-align:left; border-radius:7px; cursor:pointer; font-family:inherit;
}
.colour-pop button:hover, .colour-pop button:focus-visible{ background:var(--surface-2); outline:none; }
.colour-pop .swatch{ width:18px; height:18px; border-radius:5px; border:1px solid rgba(0,0,0,.25); flex:none; }
.colour-pop .swatch.yellow{ background:var(--tag-yellow); }
.colour-pop .swatch.green{ background:var(--tag-green); }
.colour-pop .swatch.blue{ background:var(--tag-blue); }
.colour-pop .swatch.none{ background:var(--surface); background-image:linear-gradient(135deg,transparent 45%,var(--text-faint) 46%,var(--text-faint) 54%,transparent 55%); }
.colour-pop .tick{ margin-left:auto; font-weight:700; color:var(--accent-strong); }
.colour-pop .sep{ height:1px; background:var(--border); margin:4px 2px; }

@media (max-width:640px){
  #app{ padding:14px 12px 40px; }
  .topbar{ flex-direction:column; align-items:flex-start; }
  .identity{ align-self:stretch; justify-content:space-between; }
  table{ min-width:640px; }
}


/* ---------- Collection Checkpoint: badge, drawer, Check Match ---------- */
td.cp-col{ white-space:nowrap; }
.cp-badge{ display:inline-flex; align-items:center; gap:4px; border-radius:99px; padding:3px 10px; font-size:12px; font-weight:600; line-height:1.4; border:1px solid transparent; font-family:inherit; white-space:nowrap; }
button.cp-badge{ cursor:pointer; }
button.cp-badge:hover{ filter:brightness(.97); box-shadow:0 0 0 2px var(--accent-soft); }
button.cp-badge:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.cp-badge.cp-ready{ background:var(--good-soft); color:var(--good); }
.cp-badge.cp-wait{ background:var(--warn-soft); color:var(--warn); border-color:color-mix(in srgb, var(--warn) 30%, transparent); }
.cp-badge.cp-check{ background:var(--danger-soft); color:var(--danger); border-color:color-mix(in srgb, var(--danger) 35%, transparent); }
.cp-badge.cp-ceased{ background:var(--st-neutral-bg); color:var(--st-neutral-ink); }
.cp-badge-lg{ font-size:13px; padding:4px 12px; }
#table-aging tbody tr.cp-selected td{ background:color-mix(in srgb, var(--accent-soft) 55%, transparent); }
#table-aging tbody tr.cp-selected td:first-child{ box-shadow:inset 3px 0 0 var(--accent); }
tr.cp-flash td{ animation:cpFlash 2.6s ease-out; }
@keyframes cpFlash{ 0%,40%{ background:var(--warn-soft); } 100%{ background:transparent; } }

.cp-drawer{
  position:fixed; top:0; right:0; height:100vh; width:420px; max-width:100vw; z-index:45;
  background:var(--surface); color:var(--text); border-left:1px solid var(--border); box-shadow:-12px 0 32px rgba(10,20,10,.16);
  transform:translateX(105%); transition:transform .22s ease; display:flex; flex-direction:column; visibility:hidden;
}
.cp-drawer.open{ transform:translateX(0); visibility:visible; }
.cp-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:18px 18px 14px; border-bottom:1px solid var(--border); background:var(--surface); }
.cp-name{ font-size:16px; font-weight:700; line-height:1.3; margin-bottom:8px; overflow-wrap:anywhere; }
.cp-status-label{ font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); margin-bottom:4px; }
.cp-x{ border:none; background:none; color:var(--text-muted); font-size:18px; line-height:1; padding:6px 8px; border-radius:8px; cursor:pointer; }
.cp-x:hover{ background:var(--surface-2); color:var(--text); }
.cp-body{ flex:1; overflow:auto; padding:6px 16px 24px; }
.cp-drawer table.cp-table{ width:100%; min-width:0; border-collapse:collapse; table-layout:fixed; }
.cp-table tbody tr:hover{ background:transparent; }
.cp-table th{ position:sticky; top:0; background:var(--surface); text-align:left; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); font-weight:600; padding:10px 6px 6px; border-bottom:1px solid var(--border); }
.cp-table th:first-child{ width:84px; }
.cp-table td{ padding:9px 6px; border-bottom:1px solid var(--border); vertical-align:top; font-size:13px; }
.cp-table tr.cp-open td{ background:color-mix(in srgb, var(--warn-soft) 60%, transparent); }
.cp-mon{ font-weight:700; }
.cp-tag{ font-size:11px; font-weight:400; color:var(--text-muted); margin-top:2px; }
.cp-w{ display:flex; align-items:center; gap:6px; font-weight:600; }
.cp-ic{ width:14px; flex:none; text-align:center; font-size:12px; }
.cp-d{ font-size:12px; color:var(--text-muted); margin:2px 0 0 20px; }
.cp-cell.k-done .cp-w{ color:var(--good); }
.cp-cell.k-open .cp-w{ color:var(--warn); }
.cp-cell.k-none .cp-w{ color:var(--st-faint); font-weight:500; }
.cp-table tr.cp-clear .cp-cell.k-done .cp-w{ font-weight:500; }
.cp-link{ cursor:pointer; border-radius:6px; }
.cp-link:hover .cp-w, .cp-link:focus-visible .cp-w{ text-decoration:underline; }
.cp-link:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.cp-chev{ margin-left:auto; color:var(--text-faint); font-weight:400; }
.cp-match{ margin-top:16px; border:1px solid color-mix(in srgb, var(--danger) 35%, var(--border)); border-radius:10px; padding:10px 12px; background:var(--danger-soft); }
.cp-match-title{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--danger); margin-bottom:6px; }
.cp-match-item{ font-size:13px; padding:6px 0; border-top:1px solid color-mix(in srgb, var(--danger) 18%, transparent); }
.cp-match-item:first-of-type{ border-top:none; }
.cp-match-item .cp-d{ margin-left:0; }
.cp-match-btns{ display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
@media (max-width:640px){ .cp-drawer{ width:100vw; } }

.modal.cm{ max-width:940px; }
.cm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:8px; }
.cm-col{ display:flex; flex-direction:column; min-width:0; }
.cm-col-head{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.cm-col-head .search{ min-width:0; }
.cm-toggle{ font-size:12px; color:var(--text-muted); white-space:nowrap; display:flex; gap:4px; align-items:center; }
.cm-list{ border:1px solid var(--border); border-radius:10px; max-height:46vh; overflow:auto; background:var(--bg); }
.cm-item{ display:block; width:100%; text-align:left; border:none; border-bottom:1px solid var(--border); background:var(--surface); padding:9px 11px; cursor:pointer; font-family:inherit; color:var(--text); }
.cm-item:hover{ background:var(--surface-2); }
.cm-item.cm-on{ background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent); }
.cm-item.cm-attn .cm-name::before{ content:"● "; color:var(--danger); }
.cm-name{ font-size:13px; font-weight:600; }
.cm-meta{ display:block; font-size:11.5px; color:var(--text-muted); margin-top:2px; }
.cm-note{ font-size:11.5px; color:var(--info); margin-top:3px; }
.cm-selected{ min-height:20px; margin-bottom:6px; }
.cm-sel-title{ font-size:12.5px; font-weight:600; }
.cm-ag{ display:flex; gap:9px; align-items:flex-start; padding:8px 11px; border-bottom:1px solid var(--border); background:var(--surface); cursor:pointer; }
.cm-ag input{ margin-top:3px; }
.cm-ag.cm-sugg{ background:color-mix(in srgb, var(--info-soft) 60%, var(--surface)); }
.cm-ag.cm-checked{ background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent); }
.cm-actions{ flex-wrap:wrap; }
.cm-spacer{ flex:1; }
@media (max-width:720px){ .cm-grid{ grid-template-columns:1fr; } }


/* ---------- AR Aging table layout (display only) ---------- */
/* Fixed column widths so long text columns get room and amounts stay compact;
   the table never shrinks below these widths (it scrolls sideways instead) and
   simply grows to fill wider screens. */
#table-aging{ table-layout:fixed; width:1622px; min-width:100%; }
/* On wide screens the AR Aging tab may use more of the window, so the whole
   table fits without sideways scrolling (other tabs keep their usual width). */
body:has(#panel-aging.active) #app{ max-width:1680px; }
#table-aging col.w-cust{ width:220px; }
#table-aging col.w-cp{ width:116px; }
#table-aging col.w-num{ width:106px; }
#table-aging col.w-total{ width:116px; }
#table-aging col.w-inv{ width:164px; }
#table-aging col.w-terms{ width:110px; }
#table-aging col.w-rem{ width:162px; }
#table-aging col.w-coll{ width:128px; }
#table-aging col.w-act{ width:60px; }
#table-aging thead th{ padding:8px 8px; }
#table-aging .filter-row th{ padding:4px 6px; }
#table-aging tbody td{ padding:6px 8px; line-height:1.35; overflow-wrap:anywhere; }
/* Both summary rows ("n shown" totals + Total outstanding) stay pinned at the bottom of the table window together, whatever the scroll.
   The pin is on the tfoot as a whole (not on each cell) so the two rows stack instead of sitting on top of each other. */
#table-aging tfoot{ position:sticky; bottom:0; z-index:3; background:var(--surface-2); }
#table-aging tfoot td{ position:static; padding:8px 5px; white-space:nowrap; font-size:11.5px; font-variant-numeric:tabular-nums; }
/* "Total outstanding" summary row under the AR Aging totals row. The label sits
   in the >90 cell and extends left over the blank 61-90 cell if it needs to. */
#table-aging tfoot tr.total-outstanding td{ border-top:1px solid var(--border); }
#table-aging tfoot td.to-label span{ position:absolute; right:5px; white-space:nowrap; }
/* The Total outstanding amount opens Unbilled / Pending Advice: pointer + light underline on hover only. */
#table-aging tfoot #total-outstanding-amt{ cursor:pointer; }
#table-aging tfoot #total-outstanding-amt:hover, #table-aging tfoot #total-outstanding-amt:focus-visible{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; text-decoration-color:currentColor; outline:none; }
#table-aging tbody td.num{ white-space:nowrap; font-size:12.5px; }
/* Existing / Ceased pill flows right after the name instead of taking its own line */
#table-aging tbody td.cust .sub{ display:inline; margin:0 0 0 6px; white-space:nowrap; }
#table-aging tbody td.cust .pill{ padding:1px 7px; font-size:11px; }
#table-aging td.cp-col .cp-badge{ white-space:nowrap; font-size:11.5px; padding:2px 8px; }
#table-aging td.terms{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12.5px; }
#table-aging td.inv-mth{ font-size:12.5px; overflow-wrap:normal; }
#table-aging .inv-tok{ white-space:nowrap; }
#table-aging .clamp2{ display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#table-aging .rowbtns .btn.small, #table-aging td > .btn.small{ padding:3px 9px; }


/* ---------- LD -> CN Approvals: compact rows (spacing only) ---------- */
/* Same columns, data, buttons and colours - just less padding between lines, so each row is ~27% shorter
   (typical row 114px -> ~84px) and more records fit on screen. Column widths are unchanged (horizontal
   padding is as before). */
/* LD -> CN only: the filter row sticks directly under the heading row, whatever height the headings wrap to
   (--cn-head-h is measured by app.js; 34px is the old single-line value). */
#table-cn .filter-row th{ top:var(--cn-head-h, 34px); z-index:2; }
#table-cn tbody td{ padding:5px 12px; line-height:1.3; }
#table-cn tbody td .sub{ line-height:1.2; margin-top:0; }
#table-cn tbody td .pill{ padding:2px 9px; line-height:1.3; }
#table-cn .rowbtns{ gap:3px 4px; }
#table-cn .rowbtns .btn.small{ padding:2px 9px; line-height:1.35; }


/* ---------- Submission List: compact rows (spacing only) ---------- */
/* Same columns, data, status badge/dropdown, Edit/Delete and colours - less padding between lines, so each
   row is ~29% shorter (82px -> ~58px). Horizontal padding is as before, so column widths hold. */
/* Submission list: notice when only the line(s) opened from the Checkpoint drawer are shown */
.sub-only-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:0 0 8px; padding:8px 12px; border:1px solid var(--border); border-radius:var(--radius); background:var(--accent-soft); color:var(--accent-strong); font-size:13px; font-weight:600; }
/* Submission list: S/N column is a little wider (64px) to hold the tick box beside the number; Customer sits right after it */
#table-submissions :is(th, td):nth-child(1){ width:64px; min-width:64px; max-width:64px; white-space:nowrap; }
#table-submissions :is(th, td):nth-child(2){ left:64px; }
#table-submissions .sub-pick, #table-submissions #sub-sel-all{ width:14px; height:14px; margin:0 5px 0 0; vertical-align:middle; cursor:pointer; accent-color:var(--accent); }
#table-submissions #sub-sel-all{ margin:0 0 0 5px; }
#table-submissions #sub-sel-all[hidden]{ display:none; }
#table-submissions tbody td{ padding:5px 12px; line-height:1.3; }
#table-submissions tbody td .pill{ padding:2px 9px; line-height:1.3; }
#table-submissions .rowbtns{ gap:3px 4px; }
#table-submissions .rowbtns .btn.small{ padding:2px 9px; line-height:1.35; }


/* ---------- AR Aging top area: compact spacing (desktop layout only) ---------- */
/* Same cards, controls and text as before - just less padding and smaller gaps,
   so the table starts higher and gets more of the screen. Controls stay at
   least ~30px tall so they're still comfortable to click. */
#panel-aging .banner{ padding:6px 12px; margin-bottom:8px; }
#panel-aging .stats{ gap:8px; margin-bottom:8px; }
#panel-aging .stat{ padding:8px 12px 9px; }
#panel-aging .stat .label{ font-size:11px; }
#panel-aging .stat .value{ font-size:19px; margin-top:2px; line-height:1.25; }
#panel-aging .toolbar{ gap:6px 6px; margin-bottom:8px; }
#panel-aging .toolbar .search{ padding:6px 11px; }
#panel-aging .toolbar .btn{ padding:6px 12px; }
/* chips keep their usual size (already the smallest controls) */
/* The table fills the rest of the window below the controls (instead of a
   fixed 62% of the screen), so its bottom edge is on screen without scrolling
   the page; never shorter than 360px on small windows. */
/* Height for ~13 Aging rows, then the table scrolls inside itself (no paging, one table): the sticky heading +
   filter rows (~102px) + sticky totals (~67px) + sideways scrollbar (~17px) + 13 rows of ~49px (rows run 36-64px,
   the first 13 add up to ~614px). A shorter (filtered) table simply shrinks to fit. On phones this is replaced by a
   screen-based height (mobile block below). */
#panel-aging .table-wrap{ max-height:calc(186px + 13 * 49px); }


/* ---------- Submission status colours (badge, dropdowns, card, drawer) ---------- */
/* Submission statuses only (LD/CN approval "Pending" pills keep the shared
   amber): Pending = soft peach / light orange, Awaiting client = the light
   amber Pending used to have. Both light and soft, text stays readable. */
:root{ --peach-bg:#FFE3C9; --peach-ink:#99480F; --peach-line:#F3C7A0; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --peach-bg:#40291A; --peach-ink:#F6B98A; --peach-line:#6A4128; } }
:root[data-theme="dark"]{ --peach-bg:#40291A; --peach-ink:#F6B98A; --peach-line:#6A4128; }
.pill.sub-st.pending{ background:var(--peach-bg); color:var(--peach-ink); }
.pill.sub-st.awaiting{ background:var(--warn-soft); color:var(--warn); }
.pill.awaiting{ background:var(--warn-soft); color:var(--warn); }
.stat .value.sub-pending{ color:var(--peach-ink); }
.stat .value.sub-awaiting{ color:var(--warn); }
select.sub-sel{ font-weight:600; }
select.sub-sel-pending{ background:var(--peach-bg); color:var(--peach-ink); border-color:var(--peach-line); }
select.sub-sel-submitted{ background:var(--info-soft); color:var(--info); }
select.sub-sel-awaiting{ background:var(--warn-soft); color:var(--warn); }
select.sub-sel-settled{ background:var(--good-soft); color:var(--good); }
select.sub-sel option{ background:var(--surface); color:var(--text); }
.cp-cell.k-open.st-pending .cp-w{ color:var(--peach-ink); }
.cp-cell.k-open.st-awaiting .cp-w{ color:var(--warn); }
.cp-cell.k-ready .cp-w{ color:var(--good); font-weight:500; }

/* ---------- PDF export (print) ---------- */
/* #print-area is built and filled right before window.print() is called
   (see exportToPdf() in app.js), then cleared again afterwards. It's always
   present but empty/hidden on screen; only while body carries
   .printing-only, and only in the print media, does it become the one
   thing on the page - everything else in #app is hidden for that pass. */
#print-area{ display:none; }
#print-area h2{ font-size:16px; margin-bottom:2px; }
#print-area .print-meta{ font-size:11px; color:var(--text-muted); margin-bottom:12px; }
#print-area table{ width:100%; border-collapse:collapse; min-width:0; }
#print-area th, #print-area td{ border:1px solid #999; padding:5px 7px; font-size:11px; text-align:left; }
/* Single-record layout used by the per-line "Export approval PDF" action
   (label/value rows), as opposed to the table layout above used for the
   whole-tab Export PDF buttons. */
#print-area .approval-doc{ max-width:480px; }
#print-area .approval-field{ display:flex; justify-content:space-between; gap:16px; padding:6px 0; border-bottom:1px solid #ccc; font-size:12px; }
#print-area .approval-label{ color:#555; }
#print-area .approval-value{ font-weight:600; text-align:right; }
#print-area .approval-divider{ margin:14px 0; border:none; border-top:2px solid #333; }
@media print{
  body.printing-only > *:not(#print-area){ display:none !important; }
  body.printing-only #print-area{ display:block !important; }
}

/* Manage Access - account import preview */
.danger-text{ color:var(--danger); }
.warn-text{ color:var(--warn); }
#table-import-users{ min-width:0; }
#table-import-users tr.imp-bad td{ background:var(--danger-soft); }
#table-import-users td{ vertical-align:top; }
#table-import-users tr.imp-exists td{ color:var(--text-muted); }

/* ---------- Henderson branding: status controls that used the old green
   accent keep it exactly (only the general green became navy):
   Approve / Hold / Reopen (LD -> CN) and the Submission status dropdowns. */
.btn.primary[data-approve]{ background:var(--st-approve); border-color:var(--st-approve); color:var(--st-approve-ink); }
.btn.primary[data-approve]:hover{ background:var(--st-approve-strong); border-color:var(--st-approve); }
.btn[data-hold], .btn[data-reopen]{ border-color:var(--st-border); background:var(--st-surface); color:var(--st-ink); }
.btn[data-hold]:hover, .btn[data-reopen]:hover{ border-color:var(--st-approve); }
.btn.ghost[data-reopen]{ background:transparent; }
select.sub-sel-submitted, select.sub-sel-awaiting, select.sub-sel-settled{ border-color:var(--st-border); }
select.sub-sel:hover{ border-color:var(--st-approve); }


/* "Summary Card" toggle: only exists on phones (see the mobile block below). */
.stats-toggle{ display:none; }

/* =====================================================================
   MOBILE / TOUCH LAYOUT  (phones and small tablets only)
   Everything below sits inside max-width media queries, so nothing here
   applies to a desktop / large-screen window - that layout is exactly as
   it was. Wide tables keep their own sideways scroll inside their own
   container (.table-wrap); the page itself must never scroll sideways.
   ===================================================================== */
/* "Mobile" = a narrow screen OR a touch-screen phone held sideways: landscape phones are 800-930px wide, so width
   alone would drop them back to the desktop layout. A touch screen (pointer: coarse) that is under 500px tall can
   only be a phone in landscape (tablets are taller; desktop windows use a mouse, so they never match). */
@media (max-width:768px), (pointer:coarse) and (max-height:500px){
  html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  #app{ padding:12px 12px 40px; }
  .topbar{ gap:10px; padding:8px 2px 12px; }
  .brand{ min-width:0; }
  .brand-logo{ height:38px; }
  .brand h1{ font-size:17px; }
  .brand p{ font-size:12px; overflow-wrap:anywhere; }
  .brand-text{ min-width:0; }
  .identity{ flex-wrap:wrap; }
  .id-meta{ text-align:left; }
  .btn.small.view-switch, select.btn.view-switch{ font-size:16px; min-height:38px; max-width:100%; }
  .role-choice{ padding:14px; }
  .toolbar select{ font-size:16px; min-height:40px; }

  /* Main tabs and sub-tabs: one row that scrolls sideways instead of wrapping/squeezing */
  .tabs{
    flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; margin:2px 0 14px; gap:2px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .tabs::-webkit-scrollbar{ display:none; }
  .tab{ flex:none; white-space:nowrap; min-height:44px; padding:11px 12px; }
  .subtabs{ display:flex; max-width:100%; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .subtabs::-webkit-scrollbar{ display:none; }
  .subtab{ flex:none; white-space:nowrap; min-height:38px; }
  .panel{ padding:0; }

  /* Summary cards are collapsed by default behind one "Summary Card" button. Collapsed = the cards
     are removed from the layout entirely (display:none), so everything below sits directly under
     the button; tapping it adds .stats-open (see app.js) and the cards appear with the layout below. */
  .stats-toggle{
    display:flex; align-items:center; justify-content:space-between; width:100%; min-height:44px; margin:0 0 10px;
    font-size:14px;
  }
  .stats-toggle::after{ content:"\25BE"; margin-left:10px; color:var(--text-muted); }
  .stats-toggle[aria-expanded="true"]::after{ content:"\25B4"; }
  .stats:not(.stats-open){ display:none; }

  /* Summary cards: two per row */
  .stats{ grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:8px; margin-bottom:14px; }
  .stat{ padding:10px 12px; min-width:0; }
  .stat .value{ font-size:18px; overflow-wrap:anywhere; }
  #panel-aging .stat .value{ font-size:17px; }

  /* Controls: full-width search, wrapping buttons, 16px text so phones don't zoom in on focus */
  .toolbar{ gap:8px; }
  .toolbar .search, #panel-aging .toolbar .search{ flex:1 1 100%; min-width:0; }
  .toolbar .btn, #panel-aging .toolbar .btn{ flex:1 1 auto; }
  .search, #panel-aging .toolbar .search{ min-height:42px; font-size:16px; padding:9px 12px; }
  .btn, #panel-aging .toolbar .btn{ min-height:40px; }
  .btn.small, #table-aging .rowbtns .btn.small, #table-aging td > .btn.small{ min-height:36px; }
  select.btn{ font-size:16px; min-height:40px; }
  .chip{ min-height:36px; display:inline-flex; align-items:center; }
  .field input, .field select, .field textarea{ font-size:16px; min-height:42px; }
  .field textarea{ min-height:84px; }
  .filter-row .col-filter{ font-size:16px; min-height:36px; }
  select.sub-sel{ font-size:15px; min-height:38px; }
  input[type="checkbox"]{ width:18px; height:18px; }
  .filter-row .hide-dd-btn{ min-height:28px; }

  /* Tables: scroll sideways inside their own box; header rows stay stuck while scrolling */
  .table-wrap{ -webkit-overflow-scrolling:touch; max-width:100%; max-height:75vh; max-height:75dvh; }
  #panel-aging .table-wrap{ max-height:max(440px, 80vh); max-height:max(440px, 80dvh); }
  .banner{ overflow-wrap:anywhere; }

  /* Pop-up windows and side panel fit the phone */
  .overlay{ padding:10px 8px; }
  .modal{ padding:16px 14px; max-width:100%; border-radius:12px; }
  .modal.wide, .modal.cm{ max-width:100%; }
  .modal h3{ overflow-wrap:anywhere; }
  .field-row{ flex-direction:column; gap:0; }
  .modal-actions{ flex-wrap:wrap; }
  .modal-actions .btn{ flex:1 1 auto; }
  .cm-spacer{ display:none; }
  .import-preview-table{ display:block; max-width:100%; overflow-x:auto; }
  .import-summary{ gap:10px; }
  .cp-drawer{ height:100vh; height:100dvh; }
  .cf-pop{ max-width:calc(100vw - 16px); }
  #toast{ max-width:calc(100vw - 24px); text-align:center; bottom:max(16px, env(safe-area-inset-bottom)); }
  .login-screen{ padding:16px; }
}

/* Wider "mobile" screens (large phones, phones held sideways): the cards size to their content and wrap onto a
   second row only when needed, so an amount is never broken across two lines. */
@media (min-width:481px) and (max-width:768px){
  .stats.stats-open{ display:flex; flex-wrap:wrap; }
  .stats.stats-open .stat{ flex:1 1 auto; min-width:max-content; }
  .stat .value{ white-space:nowrap; }
}
@media (min-width:481px) and (pointer:coarse) and (max-height:500px){
  .stats.stats-open{ display:flex; flex-wrap:wrap; }
  .stats.stats-open .stat{ flex:1 1 auto; min-width:max-content; }
  .stat .value{ white-space:nowrap; }
}

@media (max-width:480px){
  .stats{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .stat .label{ font-size:10.5px; }
  .stat .value, #panel-aging .stat .value{ font-size:16px; white-space:nowrap; }
  /* Tabs whose cards hold long money amounts: one compact bar per card (label left, amount right)
     so an amount is never split across two lines, however large it gets. */
  #panel-aging .stats, #panel-cn .stats, #panel-unbilled .stats{ grid-template-columns:1fr; gap:6px; margin-bottom:12px; }
  #panel-aging .stat, #panel-cn .stat, #panel-unbilled .stat{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:2px 10px; padding:8px 12px; }
  #panel-aging .stat .value, #panel-cn .stat .value, #panel-unbilled .stat .value{ margin:0 0 0 auto; text-align:right; font-size:16px; }
  .brand-logo{ height:32px; }
  .brand h1{ font-size:16px; }
  .modal{ padding:14px 12px; }
  .login-card{ padding:24px 18px; }
  .rowbtns{ gap:4px; }
}

/* ---------- Fluid desktop / laptop width ----------
   Desktop and tablet windows only: the page follows the browser width instead
   of stopping at a fixed maximum. Phones (<=768px, and landscape phones) are
   excluded, so every mobile rule above stays exactly as it was. Tables keep
   their minimum widths and scroll sideways inside their own container when the
   window is narrow, and use the extra room when it is wide. */
@media (min-width:769px) and (not ((pointer:coarse) and (max-height:500px))) {
  #app, body:has(#panel-aging.active) #app{ max-width:none; width:100%; padding-left:max(20px, 1.5vw); padding-right:max(20px, 1.5vw); }
  .table-wrap{ max-width:100%; }
}
/* ---------- Finance/Editor Approve / Hold TEST mode (LD -> CN) ---------- */
.test-banner{ margin:0 0 10px; padding:8px 12px; border-radius:8px; font-size:13px; font-weight:600; background:var(--warn-soft); color:var(--warn); border:1px solid var(--warn); }
.test-banner.soon{ background:var(--danger-soft); color:var(--danger); border-color:var(--danger); }
.pill.test-tag{ background:var(--warn-soft); color:var(--warn); border:1px dashed var(--warn); white-space:nowrap; }
.sub.test-sub{ color:var(--warn); font-weight:600; }
/* ---------- Row selection highlight (all list tables, all roles, desktop + mobile; visual only) ---------- */
/* On the cells (not the row) so it stays put while the table scrolls sideways; a client colour-tag cell keeps its tag colour. */
tbody tr.row-picked > td{ background:var(--surface-3); }
/* ---------- Client Colour Tag "Red Text" (AR Aging): the whole row's wording turns the overdue red ---------- */
/* Same colour token as the overdue amounts (--danger). Background, status/checkpoint badges and buttons are untouched. */
#table-aging tbody tr.row-red > td,
#table-aging tbody tr.row-red > td :is(.muted, .sub, .clamp2, .terms, .inv-tok, .num){ color:var(--danger); }
.colour-pop .swatch.red{ background:var(--surface); color:var(--danger); font-weight:700; font-size:13px; line-height:16px; text-align:center; }
.colour-pop .swatch.red::after{ content:"A"; }
/* ---------- New / Edit LD-CN form: "LD request date | CN issued on" share one row ---------- */
/* Desktop/laptop use the normal .field-row (two equal columns, same gap as CN No | Related Inv). A narrow portrait phone
   stacks them (the mobile rule above); a wider phone / landscape goes back to two columns. */
@media (min-width:481px) and (max-width:768px), (min-width:481px) and (pointer:coarse) and (max-height:500px){
  .field-row.pair-date{ flex-direction:row; gap:10px; }
  .field-row.pair-date .field{ min-width:0; }
}
/* LD -> CN: room for the "Email approver" button on the second line (next to Delete), so the row does not get taller. Desktop/tablet only. */
@media (min-width:769px) and (not ((pointer:coarse) and (max-height:500px))){
  #table-cn .rowbtns:has([data-email-approver]){ min-width:166px; }
}
/* ---------- LD -> CN, MOBILE ONLY (portrait + landscape phones): no Summary Card, no general search ---------- */
/* They are only hidden here (still in the page and the code); desktop is untouched. What is left is re-flowed
   so the table starts as high as possible. Same media condition as the main mobile block above. */
@media (max-width:768px), (pointer:coarse) and (max-height:500px){
  #panel-cn > .stats-toggle, #panel-cn > .stats, #panel-cn > .stats.stats-open, #panel-cn #search-cn{ display:none !important; }
  #panel-cn .toolbar{ gap:6px; margin:0 0 8px; align-items:stretch; }
  /* status chips: one full-width row of equal, easy-to-tap chips */
  #panel-cn .chips{ flex:1 1 100%; display:flex; flex-wrap:wrap; gap:6px; margin:0; }
  #panel-cn .chip{ flex:1 1 auto; justify-content:center; min-height:36px; padding-left:10px; padding-right:10px; }
  /* Sort takes the room it needs; Reset and View CN Clauses sit beside it */
  #panel-cn .chips{ order:0; }
  #panel-cn #sort-cn{ order:1; flex:1 1 118px; min-width:0; }
  #panel-cn #reset-cn{ order:2; flex:0 0 auto; min-width:70px; }
  #panel-cn #view-cn-clauses{ order:3; flex:1 1 118px; display:inline-flex; align-items:center; justify-content:center; text-align:center; min-height:40px; }
  /* the other action buttons (Finance roles) wrap neatly below, never too narrow */
  #panel-cn #add-cn, #panel-cn #import-cn, #panel-cn .export-ctl{ order:4; flex:1 1 calc(50% - 6px); min-width:0; min-height:40px; }
  #panel-cn .toolbar > span{ display:none; }
  /* the table starts right under the controls and uses the screen height (its header + filter rows stay stuck) */
  #panel-cn .table-wrap{ max-height:max(320px, calc(100vh - 56px)); max-height:max(320px, calc(100dvh - 56px)); }
}
/* wider phones / landscape: the status chips share the row with Sort / Reset instead of taking a line of their own */
@media (min-width:600px) and (max-width:768px), (min-width:600px) and (pointer:coarse) and (max-height:500px){
  #panel-cn .chips{ flex:0 1 auto; }
  #panel-cn .chip{ flex:0 0 auto; }
  #panel-cn #sort-cn{ flex:1 1 170px; }
  #panel-cn #view-cn-clauses{ flex:0 0 auto; padding-left:16px; padding-right:16px; }
  #panel-cn #add-cn, #panel-cn #import-cn, #panel-cn .export-ctl{ flex:1 1 110px; }
}
/* ---------- MOBILE ONLY, every tab: no Summary Card, no general search box (hidden, not deleted) ---------- */
/* Submission, AR Aging, Unbilled Revenue, Pending Advice (LD -> CN is handled above). Same media condition as the main mobile block. */
@media (max-width:768px), (pointer:coarse) and (max-height:500px){
  #panel-submissions .stats-toggle, #panel-submissions .stats, #panel-submissions .stats.stats-open, #panel-submissions #search-submissions,
  #panel-aging > .stats-toggle, #panel-aging > .stats, #panel-aging > .stats.stats-open, #panel-aging #search-aging,
  #panel-unbilled .stats-toggle, #panel-unbilled .stats, #panel-unbilled .stats.stats-open{ display:none !important; } /* covers Unbilled Revenue + Pending Advice */
  /* tighter control rows, and the tables use the screen height (header + filter rows stay stuck) */
  #panel-submissions .toolbar, #panel-aging .toolbar, #panel-unbilled .toolbar{ gap:6px; margin:0 0 8px; }
  #panel-submissions .table-wrap, #panel-aging .table-wrap, #panel-unbilled .table-wrap{ max-height:max(320px, calc(100vh - 56px)); max-height:max(320px, calc(100dvh - 56px)); }
}@media (max-width:768px), (pointer:coarse) and (max-height:500px){
  /* AR Aging: Colour and Sort share a row (Checkpoint keeps its own, its label is long) - one row less above the table */
  #panel-aging #filter-colour-aging{ flex:1 1 38%; min-width:0; }
  #panel-aging #sort-aging{ flex:1 1 55%; min-width:0; }
}
/* ---------- Frozen columns: S/N + Customer (AR Aging: Customer) stay put while a table scrolls sideways ---------- */
/* All roles, desktop + mobile. Sticky cells keep an opaque background (via :where so row highlight, hover, colour tags and
   the checkpoint highlight still win); the heading and filter-row cells are frozen too (higher z-index). The S/N column is
   given a fixed 48px so the Customer column can sit right beside it. Vertical sticky headers are unchanged. */
:where(#table-submissions, #table-cn, #table-unbilled, #table-pending-advice) :is(th, td):nth-child(1){
  width:48px; min-width:48px; max-width:48px; padding-left:6px; padding-right:6px; box-sizing:border-box;
}
:where(#table-submissions, #table-cn, #table-unbilled, #table-pending-advice) :is(th, td):nth-child(-n+2),
#table-aging :is(th, td):nth-child(1){ position:sticky; }
:where(#table-submissions, #table-cn, #table-unbilled, #table-pending-advice) :is(th, td):nth-child(1),
#table-aging :is(th, td):nth-child(1){ left:0; }
:where(#table-submissions, #table-cn, #table-unbilled, #table-pending-advice) :is(th, td):nth-child(2){ left:48px; }
/* stacking: frozen headings above everything, frozen body cells above the scrolling cells */
:where(#table-submissions, #table-cn, #table-unbilled, #table-pending-advice, #table-aging) > tbody > tr > td:where(:nth-child(-n+2)){ z-index:2; }
#table-aging > tbody > tr > td:nth-child(2){ z-index:auto; }
:where(#table-submissions, #table-cn, #table-unbilled, #table-pending-advice) > thead :is(th):nth-child(-n+2),
#table-aging > thead th:nth-child(1){ z-index:4; }
/* opaque backgrounds (no text showing through) */
:where(#table-submissions, #table-cn, #table-unbilled, #table-pending-advice) > tbody > tr > td:where(:nth-child(-n+2)),
:where(#table-aging) > tbody > tr > td:where(:nth-child(1)){ background:var(--surface); }
:where(#table-submissions, #table-cn, #table-unbilled, #table-pending-advice) > tbody > tr:where(:not(.row-picked):hover) > td:where(:nth-child(-n+2)),
:where(#table-aging) > tbody > tr:where(:not(.row-picked):hover) > td:where(:nth-child(1)){ background:var(--surface-2); }
/* collapsed borders do not travel with sticky cells, so draw the bottom line and the divider on the cell itself */
:where(#table-submissions, #table-cn, #table-unbilled, #table-pending-advice) > tbody > tr > td:where(:nth-child(-n+2)),
:where(#table-aging) > tbody > tr > td:where(:nth-child(1)){ box-shadow:inset 0 -1px 0 var(--border); }
:where(#table-submissions, #table-cn, #table-unbilled, #table-pending-advice) :is(th, td):nth-child(2),
#table-aging :is(th, td):nth-child(1){ box-shadow:inset -1px 0 0 var(--border), inset 0 -1px 0 var(--border); }
/* AR Aging: the checkpoint highlight was see-through; keep its tint but opaque on the frozen cell */
#table-aging tbody tr.cp-selected > td:first-child{ background:color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); box-shadow:inset 3px 0 0 var(--accent), inset -1px 0 0 var(--border); }/* LD -> CN's filter row has its own (id-level) z-index; keep its frozen cells above the frozen body cells too */
#table-cn .filter-row th:nth-child(-n+2){ z-index:4; }
/* ---------- LD/CN attachments: CN No trigger + Attach window ---------- */
.cn-link{ all:unset; cursor:pointer; font:inherit; color:inherit; display:inline; border-bottom:1px dotted var(--text-faint); }
.cn-link:hover, .cn-link:focus-visible{ color:var(--accent-strong); border-bottom-color:var(--accent); outline:none; }
.cn-link .cn-caret{ font-size:10px; color:var(--text-muted); }
.attach-modal{ max-width:460px; }
.drop-zone{ border:2px dashed var(--border); border-radius:10px; padding:20px 14px; text-align:center; cursor:pointer; background:var(--surface-2); }
.drop-zone:hover, .drop-zone:focus-visible, .drop-zone.over{ border-color:var(--accent); background:var(--accent-soft); outline:none; }
.attach-list{ margin-top:8px; max-height:160px; overflow:auto; }
.attach-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 0; border-top:1px solid var(--border); font-size:13px; }
.attach-row:first-child{ border-top:0; }
.attach-name{ min-width:0; overflow-wrap:anywhere; }
.attach-existing{ margin-bottom:10px; padding:8px 10px; border:1px solid var(--border); border-radius:8px; }
.attach-opt{ display:flex; align-items:center; gap:8px; margin-top:6px; font-size:13px; cursor:pointer; }
.attach-opt input{ width:auto; min-height:0; margin:0; }
.attach-warn{ color:var(--warn); margin-top:4px; }
.attach-err{ color:var(--danger); font-weight:600; }
/* ---------- Email approver picker + "Review" link highlight ---------- */
.email-approver-modal{ max-width:460px; }
.appr-pick > summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; width:100%; }
.appr-pick > summary::-webkit-details-marker{ display:none; }
.appr-pick > summary::after{ content:"\25BE"; margin-left:10px; color:var(--text-muted); }
.appr-list{ border:1px solid var(--border); border-radius:8px; padding:4px 10px 8px; margin-top:6px; max-height:220px; overflow:auto; }
@keyframes rc-focus-flash{ 0%,60%{ box-shadow:inset 0 0 0 2px var(--accent); } 100%{ box-shadow:none; } }
#table-cn tbody tr.focus-flash > td{ animation:rc-focus-flash 2.4s ease-out 1; }
/* CN No: link look ONLY when the record has an attachment; Finance roles see a quiet â–¾ on records without one */
.cn-link.no-att{ border-bottom:0; }
.cn-link.no-att:hover, .cn-link.no-att:focus-visible{ color:inherit; }
.cn-link.no-att .cn-caret{ opacity:.6; }
.cn-link.has-att{ color:var(--accent-strong); border-bottom:1px solid currentColor; }
/* Attach window: "Pages to keep" fallback */
.attach-pages{ margin-top:8px; padding:10px; border:1px solid var(--border); border-radius:8px; display:flex; flex-direction:column; gap:6px; }
.attach-pages label{ font-size:13px; font-weight:600; }
.attach-pages input{ width:100%; }
.attach-pages .btn{ align-self:flex-start; }
.attach-ok{ color:var(--good); font-weight:600; }
/* CN No (final): always plain text - no arrow, no underline, no button look, same height/width as any cell.
   Only a pointer and a very light colour change on hover tell that it opens the Attach / View menu. */
#table-cn .cn-link, #table-cn .cn-link.has-att, #table-cn .cn-link.no-att{ all:unset; cursor:pointer; font:inherit; color:inherit; border:0; }
#table-cn .cn-link:hover, #table-cn .cn-link:focus-visible{ color:var(--accent-strong); outline:none; }
#table-cn .cn-link .cn-caret{ display:none; }
/* ... except: a CN No that has at least one attachment is underlined (text underline - no extra height, no arrow) */
#table-cn .cn-link.has-att{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; }
/* LD -> CN: CN issued | Related Inv | Related Inv Date balanced (compact | widest | medium). Dates and headers stay on
   one line; slightly tighter side padding on these three only. Same on every screen size - narrow screens scroll sideways. */
#table-cn :is(th, td).c-issued, #table-cn :is(th, td).c-relinv, #table-cn :is(th, td).c-relinvdate{ padding-left:8px; padding-right:8px; }
#table-cn :is(th, td).c-issued{ width:104px; min-width:104px; }
/* Related Inv: compact - just wider than its "RELATED INV" header (fits 782105 / INV12345); header, filter and cells share it.
   An unusually long value wraps inside the cell instead of widening the column. */
#table-cn :is(th, td).c-relinv{ width:96px; min-width:96px; max-width:96px; }
#table-cn :is(th, td).c-relinvdate{ width:122px; min-width:122px; }
#table-cn thead tr:first-child :is(th.c-issued, th.c-relinv, th.c-relinvdate){ white-space:nowrap; }
#table-cn tbody td.c-issued, #table-cn tbody td.c-relinvdate{ white-space:nowrap; }
#table-cn tbody td.c-relinv{ overflow-wrap:anywhere; }
/* New LD/CN entry: a smaller drop zone inside the form */
.drop-zone.compact{ padding:12px 10px; }
/* Attach picker: "Ready ... [Preview]" on one compact line */
/* attachment picker: each PDF shows its page count and its own "Pages to keep"; one "Process selected pages" for all */
.attach-row.attach-row-pdf, .attach-row:has(.attach-row-main){ flex-direction:column; align-items:stretch; gap:4px; }
.attach-row-main{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.attach-range{ display:flex; align-items:center; gap:8px; font-size:12.5px; padding:0 0 2px; }
.attach-range label{ color:var(--text-muted); white-space:nowrap; }
.attach-range input{ flex:1; min-width:0; max-width:220px; padding:4px 8px; font:inherit; font-size:13px; }
.attach-process{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:6px; }
/* the final processed file(s) with their own Preview / Open, apart from the status messages (e.g. the approval email) */
.attach-final{ margin-top:8px; padding:6px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); }
.attach-final-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:3px 0; font-size:13px; }
.attach-final-row .btn.small{ padding:2px 10px; min-height:0; flex:none; }
.attach-statusline{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-height:18px; margin-top:6px; }
.attach-statusline .btn.small{ padding:2px 10px; min-height:0; }
/* ---------- Finance Analysis (HSS, Finance/Editor only) - report pages, slicers, visuals ---------- */
/* Colours: validated categorical slots (identity) + a one-hue ordinal ramp for age buckets (darker = older; in dark mode
   lighter = older). Text never uses a series colour. */
:root{
  --fa-s1:#2a78d6; --fa-s2:#eb6834; --fa-s3:#1baf7a; --fa-s4:#eda100; --fa-s5:#e87ba4;
  --fa-k0:#86b6ef; --fa-k1:#5598e7; --fa-k2:#2a78d6; --fa-k3:#1c5cab; --fa-k4:#104281;
  --fa-grid:#E6E6E6; --fa-base:#C8C8C8; --fa-tick:#7A7A7A; --fa-hot:var(--danger-soft);
}
@media (prefers-color-scheme: dark){ :root:where(:not([data-theme="light"])){
  --fa-s1:#3987e5; --fa-s2:#d95926; --fa-s3:#199e70; --fa-s4:#c98500; --fa-s5:#d55181;
  --fa-k0:#256abf; --fa-k1:#3987e5; --fa-k2:#6da7ec; --fa-k3:#9ec5f4; --fa-k4:#cde2fb;
  --fa-grid:#2A2A2A; --fa-base:#3A3A3A; --fa-tick:#8F8F8F; } }
:root[data-theme="dark"]{
  --fa-s1:#3987e5; --fa-s2:#d95926; --fa-s3:#199e70; --fa-s4:#c98500; --fa-s5:#d55181;
  --fa-k0:#256abf; --fa-k1:#3987e5; --fa-k2:#6da7ec; --fa-k3:#9ec5f4; --fa-k4:#cde2fb;
  --fa-grid:#2A2A2A; --fa-base:#3A3A3A; --fa-tick:#8F8F8F; }
.fa-s1{ fill:var(--fa-s1); background:var(--fa-s1); } .fa-s2{ fill:var(--fa-s2); background:var(--fa-s2); } .fa-s3{ fill:var(--fa-s3); background:var(--fa-s3); }
.fa-s4{ fill:var(--fa-s4); background:var(--fa-s4); } .fa-s5{ fill:var(--fa-s5); background:var(--fa-s5); }
.fa-k0{ fill:var(--fa-k0); background:var(--fa-k0); } .fa-k1{ fill:var(--fa-k1); background:var(--fa-k1); } .fa-k2{ fill:var(--fa-k2); background:var(--fa-k2); }
.fa-k3{ fill:var(--fa-k3); background:var(--fa-k3); } .fa-k4{ fill:var(--fa-k4); background:var(--fa-k4); }
/* target: neutral grey bars / a thin solid reference line with its label (never a series colour) */
:root{ --fa-tgt:#B5B4AE; } :root[data-theme="dark"]{ --fa-tgt:#5E5E59; }
@media (prefers-color-scheme: dark){ :root:where(:not([data-theme="light"])){ --fa-tgt:#5E5E59; } }
.fa-tgt{ fill:var(--fa-tgt); background:var(--fa-tgt); }
.fa-svg .fa-ref{ stroke:var(--text-muted); stroke-width:1.2; }
.fa-svg .fa-reflabel{ font-size:10.5px; fill:var(--text-muted); font-weight:600; }
.stat .value.good{ color:var(--good); }
polyline.fa-line{ fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; background:none; }
polyline.fa-line.fa-s1{ stroke:var(--fa-s1); } polyline.fa-line.fa-s2{ stroke:var(--fa-s2); }
circle.fa-dot-end{ stroke:var(--surface); stroke-width:2; }
.fa-head h2{ font-family:'Archivo'; font-size:18px; margin:0 0 2px; }
.fa-head p{ margin:0 0 8px; }
.fa-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.fa-head > div:first-child{ min-width:0; flex:1 1 420px; }
.fa-head-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.fa-due-note{ font-size:12px; font-weight:600; color:var(--warn); background:var(--warn-soft); border-radius:99px; padding:3px 10px; }
.fa-up-modal{ max-width:760px; }
.fa-up-help{ margin:4px 0 10px; padding-left:18px; }
.fa-up-list{ margin-top:12px; max-height:46vh; overflow:auto; border:1px solid var(--border); border-radius:8px; }
.fa-up-row{ padding:8px 10px; border-bottom:1px solid var(--border); overflow-wrap:anywhere; }
.fa-up-row:last-child{ border-bottom:0; }
.fa-up-row .pill{ margin-left:6px; }
/* Collection Focus (top of Finance Analysis) */
.fa-verdict{ border-left:4px solid var(--info); background:var(--info-soft); border-radius:8px; padding:9px 12px; margin:0 0 10px; font-size:14px; line-height:1.45; }
.fa-verdict b{ font-family:'Archivo'; font-size:15px; }
.fa-verdict-bad{ border-left-color:var(--danger); background:var(--danger-soft); }
.fa-verdict-warn{ border-left-color:var(--warn); background:var(--warn-soft); }
.fa-verdict-good{ border-left-color:var(--good); background:var(--good-soft); }
.fa-section-flat{ border-top:0; padding-top:0; margin-top:4px; }
.fa-todo .fa-vis-head h3{ display:flex; align-items:center; gap:8px; }
.fa-todo-no{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--accent); color:var(--accent-contrast); font-size:12px; flex:none; }
.fa-todo-total{ font-family:'Archivo'; font-weight:700; font-size:18px; color:var(--danger); white-space:nowrap; }
.fa-todo-list{ margin:0; padding-left:20px; font-size:13.5px; }
.fa-todo-list li{ padding:4px 0; border-bottom:1px solid var(--border); }
.fa-todo-list li:last-child{ border-bottom:0; }
.fa-todo-list li > span:first-child{ display:inline-block; max-width:calc(100% - 70px); overflow-wrap:anywhere; }
.fa-todo-list li > .num{ float:right; font-variant-numeric:tabular-nums; font-weight:600; }
.fa-todo-more{ margin-top:6px; }
.fa-grid.fa-grid-2{ grid-template-columns:repeat(2, minmax(0, 1fr)); margin-top:10px; }
.fa-watch{ margin-top:10px; }
.fa-watch .fa-scroll{ max-height:420px; }
.fa-details-bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:14px 0 4px; padding-top:12px; border-top:2px solid var(--border); }
.fa-details{ margin-top:10px; }
/* Revenue Fluctuation tab */
.rf-error{ background:var(--danger-soft); color:var(--danger); border-radius:12px; padding:10px 14px; margin:0 0 10px; font-size:13.5px; line-height:1.5; }
.rf-intro{ max-width:760px; }
.rf-steps{ margin:6px 0 10px; padding-left:20px; line-height:1.6; }
.rf-steps li{ margin-bottom:6px; }
.rf-picker{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px 16px; margin-bottom:10px; padding:10px 14px; }
.rf-pick-group{ flex:1 1 230px; min-width:0; }
.rf-pick-label{ font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); margin-bottom:6px; }

.rf-pick-row{ display:flex; gap:8px; }
.rf-sel{ flex:1 1 0; min-width:0; }
.rf-pick-row .rf-sel:first-child{ flex:0 0 96px; }

.rf-swap{ flex:0 0 auto; align-self:flex-end; }
.rf-kpis{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:8px; margin-bottom:10px; }
.rf-kpis .stat .value{ font-size:clamp(17px, 1.6vw, 22px); overflow-wrap:anywhere; }
.rf-neg{ color:var(--danger); } .rf-pos{ color:var(--good); }
.rf-rem{ display:flex; flex-direction:column; gap:2px; }
.rf-rem-row{ all:unset; box-sizing:border-box; display:grid; grid-template-columns:minmax(120px, 42%) 1fr auto; align-items:center; gap:10px; padding:6px 8px; border-radius:8px; cursor:pointer; font-size:13.5px; }
.rf-rem-row:hover, .rf-rem-row:focus-visible{ background:var(--surface-2); }
.rf-rem-row.on{ background:var(--accent-soft); }
.rf-rem-name{ overflow-wrap:anywhere; line-height:1.3; }
.rf-rem-track{ height:10px; background:var(--surface-2); border-radius:99px; overflow:hidden; display:block; }
.rf-rem-track span{ display:block; height:100%; border-radius:99px; }
.rf-bar-neg{ background:var(--danger); } .rf-bar-pos{ background:var(--good); }
.rf-rem-val{ font-variant-numeric:tabular-nums; font-weight:600; text-align:right; min-width:92px; }
.rf-top{ margin:0 0 6px; padding-left:20px; font-size:13.5px; }
.rf-top li{ padding:3px 0; display:flex; justify-content:space-between; gap:10px; }
.rf-top-name{ overflow-wrap:anywhere; }
.rf-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; }
.rf-chip-blank:not(.active){ border-color:var(--warn); color:var(--warn); }
.rf-blank-t{ color:var(--warn); font-weight:600; }
/* Lines that moved: every row shown, the page scrolls (no scrollbar of its own); sideways scrolling only where the screen is too narrow */
#rf-root .table-wrap.rf-scroll{ max-height:none; overflow-y:visible; }
.rf-table td{ vertical-align:top; }
.rf-table tr.rf-blank td{ background:var(--warn-soft); }
.rf-pill{ display:inline-block; padding:1px 9px; border-radius:99px; background:var(--accent-soft); color:var(--accent-strong); font-size:12.5px; font-weight:600; }
.rf-remark-in{ width:100%; min-width:150px; box-sizing:border-box; padding:5px 8px; border:1px solid var(--warn); border-radius:8px; background:var(--surface); color:var(--text); font:inherit; font-size:13px; }
#rf-root table.rf-totals{ width:auto; min-width:0; max-width:100%; table-layout:auto; }
#rf-root .rf-totals td.right{ width:auto; }
.rf-totals{ margin-top:10px; }                /* compact: figures sit next to their labels, no stretched empty gap */
.rf-totals td{ padding:6px 14px; }
.rf-totals td:first-child{ padding-right:28px; }
.rf-totals td.num{ text-align:right; white-space:nowrap; min-width:110px; }
/* Lines that moved: dropdown filters under the headers + compact phone rows */
#rf-root .rf-chips, #rf-root .rf-col-cat{ display:none; }               /* category column and chip row are gone on every screen (the data is kept) */
.rf-filter-row{ display:table-row; }
#rf-root .rf-filter-row th{ padding:4px 6px; top:auto; }
#rf-root .rf-table tbody td{ height:50px; vertical-align:middle; }
.rf-clamp{ overflow-wrap:anywhere; }
/* every line the same size: the client name shows its first 3-4 words and "…" (the full name is the hover text / tap on a phone);
   a long remark is cut to two lines the same way */
#rf-root .rf-site{ max-width:210px; width:210px; }
#rf-root .rf-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#rf-root .rf-table td.rf-exp .rf-clamp{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; line-height:1.3; }
#rf-root .rf-table tbody td{ vertical-align:middle; }
.rf-cf-in{ width:100%; min-width:84px; }
#rf-root .table-wrap.rf-scroll thead th{ position:static; }
@media (max-width:768px), (pointer:coarse) and (max-height:500px){
  #rf-root .rf-chips, #rf-root .rf-col-cat{ display:none; }              /* the category column and the big chip row are gone on phones */
  #rf-root .rf-filter-row{ display:table-row; }
  #rf-root .rf-filter-row th{ padding:4px 6px; top:auto; }
  #rf-root .rf-table{ min-width:860px; }
  #rf-root .rf-table tbody td{ padding:6px 8px; vertical-align:middle; font-size:13px; }
  #rf-root .rf-table tbody tr{ height:50px; }                            /* one steady row height */
  #rf-root .rf-site{ min-width:150px; width:160px; max-width:160px; }
  #rf-root .rf-sec, #rf-root .rf-typ{ white-space:nowrap; max-width:116px; overflow:hidden; text-overflow:ellipsis; }
  #rf-root .rf-exp{ min-width:190px; max-width:240px; }
  #rf-root .rf-note{ cursor:pointer; color:var(--accent-strong); }       /* tap = read the full note */
  #rf-root .rf-table td.num, #rf-root .rf-table th.right{ white-space:nowrap; }
  #rf-root .rf-remark-in{ min-width:170px; }
}
@media (max-width:1250px){ .rf-kpis{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width:900px){ .rf-kpis{ grid-template-columns:repeat(2, minmax(0, 1fr)); } .rf-rem-row{ grid-template-columns:1fr auto; } .rf-rem-track{ grid-column:1 / -1; order:3; } }
/* Phones: full-text preview of a Remark / Collection status note (read-only) */
.tp-overlay{ position:fixed; inset:0; z-index:1000; background:rgba(15,15,35,0.45); display:flex; align-items:center; justify-content:center; padding:16px; }
.tp-sheet{ background:var(--surface); color:var(--text); width:100%; max-width:520px; max-height:min(78vh, 78dvh); display:flex; flex-direction:column; border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,0.3); overflow:hidden; }
.tp-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:14px 14px 10px 18px; border-bottom:1px solid var(--border); }
.tp-head h3{ margin:0; font-size:15px; line-height:1.35; overflow-wrap:anywhere; }
.tp-close{ flex:none; width:36px; height:36px; border-radius:50%; border:1px solid var(--border); background:var(--surface-2); color:var(--text); font-size:22px; line-height:1; cursor:pointer; }
.tp-sub{ margin-top:2px; font-size:12.5px; color:var(--text-muted); overflow-wrap:anywhere; }
.tp-foot{ padding:10px 18px 14px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; }
.tp-done{ min-width:96px; }
.tp-body{ padding:14px 18px 18px; font-size:16px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.fa-score{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:2px 0 8px; }
.fa-score-num{ font-family:'Archivo'; font-weight:700; font-size:44px; line-height:1; }
.fa-score-parts{ font-size:13.5px; }
.fa-score-part{ display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px solid var(--border); }
.fa-score-part:last-child{ border-bottom:0; }
.fa-score-part .num{ white-space:nowrap; font-variant-numeric:tabular-nums; }
.fa-score-num.good{ color:var(--good); } .fa-score-num.warn{ color:var(--warn); } .fa-score-num.danger{ color:var(--danger); }
@media (max-width:900px){ .fa-grid.fa-grid-2{ grid-template-columns:1fr; } }
.fa-section{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:14px 0 8px; padding-top:10px; border-top:1px solid var(--border); }
.fa-section h3{ font-family:'Archivo'; font-size:14px; margin:0; }
.fa-gap{ height:14px; }
#fa-root > .fa-grid{ margin-bottom:0; }
.fa-kpis-sm .fa-kpi .value{ font-size:18px; }
.fa-slicers{ position:sticky; top:0; z-index:5; }
.fa-slicers{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 10px; padding:6px 10px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); }
.fa-slicers .fa-search{ width:220px; padding:6px 10px; }
.fa-chip{ all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; padding:4px 10px; border-radius:99px; background:var(--accent-soft); color:var(--accent-strong); }
.fa-chip:hover, .fa-chip:focus-visible{ box-shadow:inset 0 0 0 1px var(--accent); }
.fa-hint{ margin-left:4px; }
.fa-kpis{ display:grid; grid-template-columns:repeat(8, minmax(0, 1fr)); gap:8px; margin-bottom:10px; }
.fa-kpis-sm{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
.fa-kpi{ padding:10px 12px; }
.fa-kpi{ position:relative; }
.fa-kpi .value{ font-family:inherit; font-size:clamp(15px, 1.15vw, 18px); font-weight:600; font-variant-numeric:normal; overflow-wrap:anywhere; }
.fa-kpi{ min-width:0; overflow:hidden; }
.fa-kpi-row{ min-width:0; }
.fa-kpi-row .fa-spark{ flex-shrink:1; min-width:40px; }
.fa-kpi-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:8px; }
.fa-kpi-click{ cursor:pointer; }
.fa-kpi-click:hover, .fa-kpi-click:focus-visible{ border-color:var(--accent); outline:none; }
.fa-tag{ font-size:10px; font-weight:600; text-transform:none; letter-spacing:0; color:var(--text-faint); border:1px solid var(--border); border-radius:99px; padding:0 6px; margin-left:4px; vertical-align:1px; }
.fa-sub{ font-size:12px; color:var(--text-muted); margin-top:3px; }
.fa-spark{ width:96px; height:28px; flex:none; }
.fa-spark polyline{ fill:none; stroke:var(--fa-s1); stroke-width:1.6; stroke-linejoin:round; }
.fa-spark circle{ fill:var(--fa-s1); }
.fa-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; align-items:stretch; }
.fa-grid > *{ min-width:0; margin-bottom:0; }
.fa-span2{ grid-column:span 2; }
.fa-span3{ grid-column:1 / -1; }
.fa-span3 > .card{ margin-bottom:0; }
.fa-stack{ display:flex; flex-direction:column; gap:14px; }
.fa-stack > .card{ margin-bottom:0; }
.fa-vis{ padding:10px 12px; margin-bottom:0; }
.fa-vis-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:8px; }
.fa-vis-head h3{ font-size:14px; margin:0; }
.fa-vis-sub{ font-size:12px; color:var(--text-muted); margin-top:2px; }
.fa-tbtn{ flex:none; }
.fa-svg{ display:block; width:100%; height:auto; max-height:230px; overflow:visible; }
.fa-svg text{ font-family:'IBM Plex Sans', system-ui, sans-serif; }
.fa-svg .fa-grid{ stroke:var(--fa-grid); stroke-width:1; }
.fa-svg .fa-base{ stroke:var(--fa-base); stroke-width:1; }
.fa-svg .fa-ytick{ font-size:11px; fill:var(--fa-tick); text-anchor:end; font-variant-numeric:tabular-nums; }
.fa-svg .fa-xtick{ font-size:11px; fill:var(--fa-tick); text-anchor:middle; }
.fa-svg .fa-xtick.fa-on{ fill:var(--text); font-weight:600; }
.fa-svg .fa-endlabel{ font-size:11px; fill:var(--text); text-anchor:end; font-weight:600; }
.fa-svg .fa-guide{ stroke:var(--text-faint); stroke-width:1; }
.fa-svg .fa-hit{ fill:transparent; outline:none; }
.fa-svg .fa-hit.fa-click{ cursor:pointer; }
.fa-svg .fa-hit:hover, .fa-svg .fa-hit:focus-visible{ fill:color-mix(in srgb, var(--text) 5%, transparent); }
.fa-svg rect.fa-dim, .fa-hbar.fa-dim .fa-hb-track span{ opacity:.3; }
.fa-legend{ display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12px; color:var(--text-muted); margin-top:6px; }
.fa-legend i{ display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px; vertical-align:-1px; }
.fa-hbars{ display:flex; flex-direction:column; gap:2px; }
.fa-hbar{ all:unset; box-sizing:border-box; display:grid; grid-template-columns:minmax(90px, 38%) 1fr auto; align-items:center; gap:8px; padding:3px 6px; border-radius:6px; cursor:default; font-size:13px; }
.fa-hbar[data-fa-act]{ cursor:pointer; }
.fa-hbar:hover, .fa-hbar:focus-visible{ background:var(--surface-2); }
.fa-hbar.fa-on{ background:var(--accent-soft); }
.fa-hb-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fa-hb-track{ display:flex; height:14px; min-width:0; }
.fa-hb-track span{ display:block; height:100%; margin-right:2px; }
.fa-hb-track span:first-child{ border-radius:2px 0 0 2px; }
.fa-hb-track span:last-child{ margin-right:0; border-radius:0 4px 4px 0; }
.fa-hb-track span:only-child{ border-radius:2px 4px 4px 2px; }
.fa-hb-val{ font-family:'IBM Plex Mono'; font-size:12px; font-variant-numeric:tabular-nums; min-width:62px; text-align:right; }
.fa-dot{ display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:6px; vertical-align:0; }
.fa-insights{ margin:0; padding-left:20px; font-size:13.5px; line-height:1.5; }
.fa-insights li{ margin-bottom:6px; }
.fa-insights li:last-child{ margin-bottom:0; }
.fa-note{ margin:10px 0 0; }
.fa-scroll{ max-height:340px; }
.fa-tall{ max-height:380px; }
.fa-match-modal{ max-width:1080px; }
.fam-bar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; margin:6px 0 10px; }
.fam-bar .search{ min-width:240px; flex:1 1 240px; max-width:360px; }
.fam-list{ max-height:58vh; overflow:auto; border:1px solid var(--border); border-radius:8px; }
.fam-row{ display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr) auto; gap:10px; align-items:center; padding:8px 10px; border-bottom:1px solid var(--border); }
.fam-row:last-child{ border-bottom:0; }
.fam-line{ display:flex; flex-direction:column; gap:2px; min-width:0; overflow-wrap:anywhere; font-size:13px; }
.fam-pick{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.fam-pick input{ width:100%; border:1px solid var(--border); border-radius:7px; padding:6px 9px; background:var(--bg); color:var(--text); font:inherit; font-size:13px; }
.fam-btns{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
@media (max-width:768px){ .fam-row{ grid-template-columns:1fr; } .fam-btns{ justify-content:flex-start; } .fam-pick input{ font-size:16px; } }
.fa-subhead{ font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); margin:10px 6px 4px; }
#panel-finance .fa-table + .table-wrap, #panel-finance .table-wrap + .table-wrap{ margin-top:8px; }
#panel-finance .table-wrap.fa-full{ max-height:none; }
#panel-finance .fa-matrix{ max-height:460px; }
#panel-finance table.fa-table{ min-width:480px; font-size:13px; }
#panel-finance table.fa-table.fa-wide{ min-width:1000px; }
/* small label / value tables inside a window: always fit the window, values wrap instead of spilling out */
#panel-finance table.fa-table.fa-mini{ min-width:0; width:100%; table-layout:auto; margin-top:6px; }
#panel-finance .fa-mini td{ overflow-wrap:anywhere; }
#panel-finance .fa-mini td.right{ width:45%; }
#panel-finance .fa-mini tr.fa-total td{ font-weight:600; border-top:1px solid var(--text-faint); }
.fa-vis, .fa-grid > *{ min-width:0; }
.fa-vis > *{ max-width:100%; }
#panel-finance .fa-table td, #panel-finance .fa-table th{ padding:7px 10px; }
#panel-finance .fa-table td{ border-bottom:1px solid var(--border); }
#panel-finance .fa-table th.fa-sort{ cursor:pointer; user-select:none; white-space:nowrap; }
#panel-finance .fa-table th.fa-sort:hover{ color:var(--text); }
#panel-finance .fa-table tfoot td{ position:sticky; bottom:0; background:var(--surface-2); font-weight:600; border-top:1px solid var(--border); }
#panel-finance td.fa-hot{ background:var(--fa-hot); }
#panel-finance td.fa-good{ color:var(--good); font-weight:600; }
#panel-finance td.fa-bad{ color:var(--danger); font-weight:600; }
#panel-finance td.fa-neg{ color:var(--text-muted); }
#panel-finance td.fa-databar{ position:relative; min-width:130px; }
#panel-finance td.fa-databar .fa-db{ position:absolute; right:10px; top:7px; bottom:7px; background:color-mix(in srgb, var(--fa-s1) 22%, transparent); border-radius:3px; max-width:calc(100% - 20px); }
#panel-finance td.fa-databar b{ position:relative; font-weight:500; }
.fa-custcell{ max-width:280px; }
.fa-link{ all:unset; cursor:pointer; color:var(--accent-strong); border-bottom:1px dotted currentColor; }
.fa-link:hover, .fa-link:focus-visible{ border-bottom-style:solid; }
.fa-tip{ position:fixed; z-index:70; pointer-events:none; min-width:150px; max-width:300px; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.16); padding:8px 10px; font-size:12.5px; }
.fa-tip-title{ font-weight:600; margin-bottom:4px; overflow-wrap:anywhere; }
.fa-tip-row{ display:flex; align-items:center; gap:8px; line-height:1.55; }
.fa-tip-row b{ font-family:'IBM Plex Mono'; font-weight:500; font-variant-numeric:tabular-nums; }
.fa-tip-row span{ color:var(--text-muted); }
.fa-tip-key{ display:inline-block; width:12px; height:3px; border-radius:2px; flex:none; }
@media (max-width:1800px){ .fa-kpis{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
@media (max-width:1250px){ .fa-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } .fa-span2{ grid-column:1 / -1; } }
@media (max-width:900px){ .fa-kpis, .fa-kpis-sm{ grid-template-columns:repeat(2, minmax(0, 1fr)); } .fa-grid{ grid-template-columns:1fr; } }
@media (max-width:768px), (pointer:coarse) and (max-height:500px){
  .fa-kpis{ gap:8px; }
  .fa-kpi .value{ font-size:17px; overflow-wrap:anywhere; }
  .fa-spark{ display:none; }
  .fa-slicers{ padding:8px; position:static; }
  .fa-slicers .fa-search{ width:100%; flex:1 1 100%; }
  .fa-slicer{ flex:1 1 auto; }
  .fa-hint{ display:none; }
  .fa-hbar{ grid-template-columns:minmax(80px, 42%) 1fr auto; gap:8px; }
}

/* Cash collected card (AR Aging) + its detail window */
.stat.bank-card{ cursor:pointer; }
.stat.bank-card:hover{ border-color:var(--accent, #2a2a6a); }
.stat.bank-card .bank-sub{ margin-top:2px; font-size:11px; opacity:.85; }
.bank-modal{ max-width:860px; width:calc(100vw - 24px); }
.bank-wrap{ max-height:60vh; overflow:auto; }
.bank-modal td.bank-desc{ max-width:420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bank-modal td.bank-why{ font-size:12px; color:var(--muted, #667); }

/* Phones only: small always-visible Cash collected line above the folded summary cards (Aging tab) */
.bank-mini{ display:none; }
@media (max-width:768px), (pointer:coarse) and (max-height:500px){
  .bank-mini:not([hidden]){ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; width:100%; margin:0 0 8px; padding:8px 12px; border:1px solid var(--border, #d8d8e0); border-radius:10px; background:var(--card, #fff); font:inherit; font-size:13px; text-align:left; cursor:pointer; color:inherit; }
  .bank-mini .bank-mini-l{ font-size:11px; text-transform:uppercase; letter-spacing:.03em; opacity:.75; }
  .bank-mini b{ color:var(--good, #1e7a46); font-size:15px; }
  .bank-mini .bank-mini-p{ font-size:12px; opacity:.8; margin-left:auto; }
}

/* Finance / Editor: click a remark to edit it in the same cell */
#rf-root .rf-editable{ cursor:text; }
#rf-root .rf-editable:hover{ background:var(--surface-2, rgba(0,0,0,.04)); border-radius:6px; }
#rf-root .rf-remark-in.rf-swap{ border-color:var(--accent, #2a2a6a); }

/* Header sorting: compact ▲▼ beside the column label (desktop / laptop only; phones keep their current headers) */
.hs-ctl{ display:inline-flex; gap:1px; margin-left:4px; vertical-align:middle; line-height:1; }
.hs-ctl i{ font-style:normal; font-size:7px; line-height:1; padding:2px 1px; cursor:pointer; color:var(--text-faint, #8a8a99); opacity:.55; user-select:none; }
.hs-ctl i:hover{ opacity:1; color:var(--text, #222); }
.hs-ctl i.hs-on{ opacity:1; color:var(--accent, #2a2a6a); }
th.hs-active{ color:var(--text, #222); }
@media (max-width:768px), (pointer:coarse) and (max-height:500px){
  .hs-ctl{ display:none !important; }
}

/* Revenue Fluctuation: full client name preview (hover / tap), no window */
.rf-name-pop{ position:fixed; z-index:5000; max-width:min(420px, calc(100vw - 16px)); padding:6px 10px; border:1px solid var(--border, #d8d8e0); border-radius:8px; background:var(--surface, #fff); color:var(--text, #222); font-size:13px; line-height:1.35; box-shadow:0 4px 14px rgba(0,0,0,.18); overflow-wrap:anywhere; pointer-events:none; }
#rf-root .rf-name{ cursor:default; }

/* Submission list: whole-row text colour (Finance / Editor sets it; the status pill and buttons keep their own colours) */
#table-submissions tbody tr.rt-grey > td, #table-submissions tbody tr.rt-grey > td .muted{ color:#ABABAB; }
#table-submissions tbody tr.rt-red > td, #table-submissions tbody tr.rt-red > td .muted{ color:var(--danger); }
#table-submissions tbody tr.rt-blue > td, #table-submissions tbody tr.rt-blue > td .muted{ color:#1F5FBF; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) #table-submissions tbody tr.rt-blue > td, :root:not([data-theme="light"]) #table-submissions tbody tr.rt-blue > td .muted{ color:#7FB0F0; } }
:root[data-theme="dark"] #table-submissions tbody tr.rt-blue > td, :root[data-theme="dark"] #table-submissions tbody tr.rt-blue > td .muted{ color:#7FB0F0; }
.sc-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:5px; vertical-align:middle; border:1px solid var(--border); background:transparent; }
.sc-dot.sc-grey{ background:#ABABAB; border-color:#ABABAB; }
.sc-dot.sc-red{ background:var(--danger); border-color:var(--danger); }
.sc-dot.sc-blue{ background:#1F5FBF; border-color:#1F5FBF; }
.sub-colour-btn{ white-space:nowrap; }

/* Orange row text (Submission list) */
#table-submissions tbody tr.rt-orange > td, #table-submissions tbody tr.rt-orange > td .muted{ color:#D2691E; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) #table-submissions tbody tr.rt-orange > td, :root:not([data-theme="light"]) #table-submissions tbody tr.rt-orange > td .muted{ color:#F0A060; } }
:root[data-theme="dark"] #table-submissions tbody tr.rt-orange > td, :root[data-theme="dark"] #table-submissions tbody tr.rt-orange > td .muted{ color:#F0A060; }
.sc-dot.sc-orange{ background:#D2691E; border-color:#D2691E; }

/* ---------- Remote Site P&L (Finance/Editor, HSS) ---------- */
#rp-root{ --rp-s1:#86b6ef; --rp-s2:#f3a07c; --rp-s3:#1baf7a; }
.rp-sp{ flex:1; }
.rp-lbl{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); font-weight:600; margin-bottom:3px; }
.rp-bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px 16px; box-shadow:var(--shadow); margin-bottom:14px; }
.rp-sel-wrap{ position:relative; }
.rp-sel{ display:flex; justify-content:space-between; align-items:center; gap:12px; min-width:260px; padding:7px 12px; border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text); font-weight:700; font-size:14px; font-family:inherit; cursor:pointer; text-align:left; }
.rp-sel:hover, .rp-sel:focus-visible{ border-color:var(--accent); outline:none; }
.rp-caret{ color:var(--text-muted); }
.rp-pop{ position:absolute; z-index:30; top:calc(100% + 4px); left:0; width:100%; min-width:280px; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow); padding:8px; }
.rp-pop-q{ width:100%; padding:7px 10px; border:1px solid var(--border); border-radius:7px; background:var(--bg); color:var(--text); font-size:13.5px; font-family:inherit; margin-bottom:6px; }
.rp-pop-list{ max-height:260px; overflow:auto; display:flex; flex-direction:column; gap:2px; }
.rp-opt{ text-align:left; background:none; border:0; border-radius:7px; padding:7px 10px; font-weight:600; font-size:13.5px; font-family:inherit; color:var(--text); cursor:pointer; }
.rp-opt:hover, .rp-opt.on{ background:var(--accent-soft); color:var(--accent-strong); }
.rp-opt-none{ padding:7px 10px; color:var(--text-muted); font-size:13px; }
.rp-meta{ display:flex; gap:22px; flex-wrap:wrap; margin-left:8px; }
.rp-meta span{ display:block; font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.06em; }
.rp-meta b{ font-weight:600; font-size:13px; }
.rp-subs{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.rp-seg{ display:inline-flex; background:var(--surface-2); border-radius:9px; padding:3px; gap:2px; flex-wrap:wrap; }
.rp-seg button{ border:0; background:none; padding:6px 14px; border-radius:7px; font-weight:600; font-size:13px; font-family:inherit; color:var(--text-muted); cursor:pointer; }
.rp-seg button.on{ background:var(--surface); color:var(--accent); box-shadow:0 1px 2px rgba(0,0,0,.14); }
.rp-seg button:disabled{ opacity:.5; cursor:default; }
.rp-note{ background:var(--warn-soft); color:var(--warn); border-radius:9px; padding:6px 12px; font-size:12.5px; font-weight:600; }
.rp-warn{ background:var(--danger-soft); color:var(--danger); border-radius:9px; padding:8px 12px; font-size:12.5px; font-weight:600; margin-top:8px; }
.rp-kpis{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:16px; }
.rp-kpis4{ grid-template-columns:repeat(4,1fr); }
.rp-kpi{ background:var(--surface); border:1px solid var(--border); border-radius:11px; padding:11px 14px; box-shadow:var(--shadow); min-width:0; }
.rp-kpi .l{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); font-weight:600; }
.rp-kpi .v{ font:500 21px 'IBM Plex Mono',monospace; margin-top:3px; overflow-wrap:anywhere; }
.rp-kpi .s{ font-size:11.5px; color:var(--text-faint); margin-top:1px; }
.rp-kpi.good .v{ color:var(--good); } .rp-kpi.warn .v{ color:var(--warn); } .rp-kpi.bad .v{ color:var(--danger); }
.rp-card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; box-shadow:var(--shadow); margin-bottom:14px; }
.rp-card.rp-flush{ padding:0; overflow:hidden; }
.rp-card h3{ font-size:15px; margin-bottom:10px; display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.rp-card h3 .small{ font-family:'IBM Plex Sans',sans-serif; font-weight:400; }
.rp-grid2{ display:grid; grid-template-columns:1.25fr 1fr; gap:14px; }
.rp-mt{ margin-top:8px; }
#rp-root table{ width:100%; border-collapse:collapse; font-size:13px; }
#rp-root th{ font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); white-space:nowrap; }
#rp-root td{ padding:7px 10px; border-bottom:1px solid var(--border); vertical-align:top; }
#rp-root th.right, #rp-root td.right{ text-align:right; }
#rp-root td.num, #rp-root .num{ font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; }
.rp-ind{ padding-left:24px !important; }
tr.rp-sub td{ font-weight:700; background:var(--surface-2); }
tr.rp-tot td{ font-weight:700; background:var(--surface-2); border-top:1px solid var(--border); }
tr.rp-link{ cursor:pointer; } tr.rp-link:hover td{ background:var(--accent-soft); }
.rp-site-name{ color:var(--accent); }
.rp-neg{ color:var(--danger); } .rp-pos{ color:var(--good); }
.rp-frow th{ padding:4px 10px !important; }
.rp-f{ width:100%; min-width:70px; padding:3px 8px; border:1px solid var(--border); border-radius:6px; background:var(--bg); color:var(--text); font-size:11.5px; font-family:inherit; text-transform:none; letter-spacing:normal; font-weight:400; }
.rp-pill{ display:inline-block; border-radius:99px; padding:1px 9px; font-size:11.5px; font-weight:600; white-space:nowrap; }
.rp-pill.paid{ background:var(--good-soft); color:var(--good); } .rp-pill.part{ background:var(--peach-bg); color:var(--peach-ink); } .rp-pill.not{ background:var(--danger-soft); color:var(--danger); }
.rp-pill.one{ background:var(--info-soft); color:var(--info); } .rp-pill.split{ background:var(--accent-soft); color:var(--accent); }
.rp-bar-mini{ height:9px; background:var(--surface-2); border-radius:9px; overflow:hidden; min-width:90px; }
.rp-bar-mini i{ display:block; height:100%; background:var(--accent); border-radius:9px; }
.rp-row{ display:grid; grid-template-columns:150px 1fr 90px; gap:10px; align-items:center; padding:5px 0; font-size:13px; }
.rp-chart{ display:flex; align-items:flex-end; gap:3px; height:140px; border-bottom:1px solid var(--border); padding:0 2px; overflow:hidden; }
.rp-m{ flex:1; min-width:3px; display:flex; align-items:flex-end; gap:1px; height:100%; }
.rp-m i{ flex:1; display:block; border-radius:2px 2px 0 0; }
.rp-axis{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--text-muted); padding:4px 2px 0; }
.rp-legend i{ display:inline-block; width:9px; height:9px; border-radius:2px; margin:0 3px 0 10px; }
.rp-tl{ display:flex; height:34px; border-radius:8px; overflow:hidden; border:1px solid var(--border); margin:8px 0 10px; }
.rp-tl div{ display:flex; align-items:center; justify-content:center; min-width:0; color:#fff; font:600 12px 'IBM Plex Sans',sans-serif; overflow:hidden; white-space:nowrap; }
.rp-tl div span{ overflow:hidden; text-overflow:ellipsis; padding:0 6px; }
.rp-tl .c0{ background:#5b5fb5; } .rp-tl .c1{ background:#27265F; }
.rp-tl .gap{ background:repeating-linear-gradient(45deg,#f6d6d2,#f6d6d2 6px,#fff 6px,#fff 12px); color:var(--danger); }
.rp-tl .ovl{ background:var(--warn); }
.rp-modal{ max-width:960px; }
.rp-two{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.rp-cols{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.rp-h4{ font:700 14px 'Archivo',sans-serif; margin:10px 0 2px; }
.rp-rate{ display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:8px; margin-bottom:6px; }
.rp-rate input, .rp-sp-in{ width:100%; border:1px solid var(--border); border-radius:7px; padding:7px 10px; background:var(--bg); color:var(--text); font-size:13.5px; font-family:inherit; }
.rp-chips{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.rp-chips button{ border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:99px; padding:3px 12px; font-weight:600; font-size:12.5px; font-family:inherit; cursor:pointer; }
.rp-chips button.on{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }
.rp-pct{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:var(--text-muted); }
.rp-pct input{ width:70px; padding:4px 8px; border:1px solid var(--border); border-radius:7px; background:var(--bg); color:var(--text); font-size:13px; font-family:inherit; }
.rp-share .rp-sp-in{ width:80px; text-align:right; padding:4px 8px; }
.rp-prev{ background:var(--accent-soft); border:1px solid var(--border); border-radius:10px; padding:10px 12px; margin-top:10px; }
.rp-prev-h{ font-size:12.5px; font-weight:600; color:var(--accent); margin-bottom:4px; }
.rp-prev-l{ max-height:150px; overflow:auto; font-size:12.5px; }
.rp-prev-l > div, .rp-prev-t{ display:flex; justify-content:space-between; }
.rp-prev-t{ border-top:1px solid var(--border); margin-top:4px; padding-top:4px; font-size:13px; }
@media (max-width:900px){
  .rp-kpis, .rp-kpis4{ grid-template-columns:1fr 1fr; }
  .rp-grid2, .rp-cols{ grid-template-columns:1fr; }
  .rp-two{ grid-template-columns:1fr; }
  .rp-sel{ min-width:0; width:100%; } .rp-sel-wrap{ width:100%; }
  .rp-row{ grid-template-columns:110px 1fr 80px; }
}

/* Remote Site P&L - Monthly P&L, cost breakdown window, phone cards */
.rp-chk{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--text-muted); cursor:pointer; }
.rp-chk input{ width:15px; height:15px; accent-color:var(--accent); }
.rp-pick{ display:flex; flex-direction:column; gap:8px; padding:12px 16px; }
.rp-pick > div{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.rp-lbl2{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); font-weight:600; width:48px; }
.rp-chip{ border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:99px; padding:3px 12px; font-weight:600; font-size:12.5px; font-family:inherit; cursor:pointer; }
.rp-chip:hover{ border-color:var(--accent); }
.rp-chip.on{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }
.rp-so{ display:inline-flex; margin-left:3px; vertical-align:middle; }
.rp-so button{ border:0; background:none; padding:0 1px; font-size:8px; line-height:1; color:var(--text-faint); cursor:pointer; }
.rp-so button:hover{ color:var(--accent); } .rp-so button.on{ color:var(--accent); }
.rp-dd{ border:0; background:none; padding:0; font:inherit; font-family:'IBM Plex Mono',monospace; color:var(--accent); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.rp-dd:hover{ color:var(--accent-strong); }
.rp-tag{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; background:var(--warn-soft); color:var(--warn); border-radius:99px; padding:1px 7px; margin-left:4px; }
#rp-root tr.rp-yr td{ background:var(--accent-soft); color:var(--accent-strong); font-weight:700; cursor:pointer; }
#rp-root tr.rp-loss td{ background:color-mix(in srgb, var(--danger-soft) 55%, var(--surface)); }
#rp-root tfoot td{ border-bottom:0; }
.rp-scroll{ max-height:640px; overflow:auto; }
.rp-scroll thead th{ position:sticky; top:0; background:var(--surface); z-index:2; }
.overlay.rp-ov{ justify-content:flex-end; align-items:stretch; padding:0; }
.rp-drawer{ background:var(--surface); width:100%; max-width:980px; height:100%; overflow:auto; padding:20px 22px; box-shadow:-8px 0 30px rgba(0,0,0,.25); border-left:1px solid var(--border); }
.rp-dd-h{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; }
.rp-dd-h h3{ font-size:18px; margin:0 0 2px; }
.rp-dd-tot{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.rp-dd-tot .v{ font-size:22px; margin:0; }
.rp-drawer table{ width:100%; border-collapse:collapse; font-size:13px; }
.rp-drawer th{ font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); white-space:nowrap; }
.rp-drawer td{ padding:7px 10px; border-bottom:1px solid var(--border); vertical-align:top; }
.rp-drawer th.right, .rp-drawer td.right{ text-align:right; }
.rp-drawer .num{ font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; }
.rp-drawer tr.rp-sub td{ font-weight:700; background:var(--surface-2); }
.rp-drawer tr.rp-tot td{ font-weight:700; background:var(--surface-2); border-top:1px solid var(--border); }
.rp-drawer .rp-frow th{ padding:4px 10px; }
@media (max-width:768px){
  .overlay.rp-ov{ justify-content:stretch; }
  .rp-drawer{ max-width:none; border-left:0; padding:14px; }
  .rp-bar{ padding:10px 12px; } .rp-bar .btn{ flex:1 1 auto; }
  .rp-seg{ width:100%; } .rp-seg button{ flex:1 1 auto; padding:6px 8px; font-size:12.5px; }
  .rp-lbl2{ width:100%; }
  .rp-pick > div{ gap:6px; }
  .rp-rin{ flex:1 1 130px; min-width:0; max-width:100%; }
  .rp-scroll{ max-height:none; }
  #rp-root table.rp-cards thead, .rp-drawer table.rp-cards thead, #rp-root table.rp-cards .rp-frow, .rp-drawer table.rp-cards .rp-frow{ display:none; }
  #rp-root table.rp-cards, #rp-root table.rp-cards tbody, #rp-root table.rp-cards tfoot, .rp-drawer table.rp-cards, .rp-drawer table.rp-cards tbody, .rp-drawer table.rp-cards tfoot{ display:block; }
  #rp-root table.rp-cards tr, .rp-drawer table.rp-cards tr{ display:block; border:1px solid var(--border); border-radius:10px; margin:8px; padding:6px 10px; background:var(--surface); }
  #rp-root table.rp-cards td, .rp-drawer table.rp-cards td{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; border:0; padding:3px 0; text-align:right; background:none !important; }
  #rp-root table.rp-cards td::before, .rp-drawer table.rp-cards td::before{ content:attr(data-l); color:var(--text-muted); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; text-align:left; flex:none; }
  #rp-root table.rp-cards td[data-l=""]::before, .rp-drawer table.rp-cards td[data-l=""]::before{ display:none; }
  #rp-root table.rp-cards td[data-l=""], .rp-drawer table.rp-cards td[data-l=""]{ justify-content:flex-start; text-align:left; font-weight:700; }
  #rp-root table.rp-cards td:empty, .rp-drawer table.rp-cards td:empty{ display:none; }
  #rp-root table.rp-cards tr.rp-yr{ background:var(--accent-soft); }
  #rp-root table.rp-cards tr.rp-yr td{ display:block; text-align:left; }
  #rp-root table.rp-cards .rowbtns{ justify-content:flex-end; }
}

.rp-rin{ border:1px solid var(--border); border-radius:7px; padding:3px 8px; background:var(--bg); color:var(--text); font-size:12.5px; font-family:inherit; }
.rp-tag-ok{ background:var(--good-soft); color:var(--good); }

/* Spare stock */
#rp-root tr.rp-spare td, .rp-share tr.rp-spare td{ background:color-mix(in srgb, var(--warn-soft) 70%, var(--surface)); }
.rp-warn-soft{ background:var(--warn-soft); color:var(--warn); border-radius:9px; padding:8px 12px; font-size:12.5px; }
.rp-modal select{ width:100%; border:1px solid var(--border); border-radius:7px; padding:8px 10px; background:var(--bg); color:var(--text); font-size:13.5px; font-family:inherit; }

/* Remote Site P&L - tables inside the windows (outside #rp-root) + phone fit */
.rp-modal table{ width:100%; border-collapse:collapse; font-size:13px; }
.rp-modal th{ font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); text-align:left; padding:6px 8px; border-bottom:1px solid var(--border); }
.rp-modal td{ padding:6px 8px; border-bottom:1px solid var(--border); vertical-align:middle; }
.rp-modal th.right, .rp-modal td.right{ text-align:right; }
.rp-modal .num{ font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; }
.rp-modal tr.rp-tot td{ font-weight:700; background:var(--surface-2); }
.rp-modal tr.rp-spare td{ background:color-mix(in srgb, var(--warn-soft) 70%, var(--surface)); }
.rp-cols > div{ min-width:0; }
#rp-share-w{ overflow-x:auto; }
.rp-share .rp-sp-in{ width:72px; }
@media (max-width:768px){
  .rp-modal{ padding:16px; }
  .rp-modal th, .rp-modal td{ padding:5px 4px; font-size:12.5px; }
  .rp-share .rp-sp-in{ width:60px; }
}

@media (max-width:768px){ .rp-units th:nth-child(4), .rp-units td:nth-child(4){ display:none; } .rp-modal td{ overflow-wrap:anywhere; } }

.rp-modal table, .rp-drawer table{ min-width:0; }
#rp-root table{ min-width:0; }

/* One-off revenue */
.rp-kpis3{ grid-template-columns:repeat(3,1fr); }
.rp-card-h{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; padding:14px 16px 6px; }
.rp-card-h h3{ margin:0; }
@media (max-width:900px){ .rp-kpis3{ grid-template-columns:1fr 1fr; } }

/* Scenario (revenue view) bar */
.rp-scn{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:-4px 0 14px; padding:10px 14px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.rp-scn .rp-lbl2{ width:auto; }
.rp-scn-note{ flex:1 1 100%; }

/* One-off revenue types: one expandable line */
#rp-root tr.rp-toggle{ cursor:pointer; } #rp-root tr.rp-toggle:hover td{ background:var(--accent-soft); }
#rp-root tr.rp-subtype td{ color:var(--text-muted); font-size:12.5px; font-style:italic; }

#rp-root .rp-sub2{ margin:-6px 0 14px; padding-left:2px; } #rp-root .rp-sub2 .rp-lbl2{ width:auto; }

@media (max-width:768px){ .rp-rate{ grid-template-columns:1fr 1fr; } .rp-rate input{ min-width:0; } .rp-rate input[type=number]{ grid-column:1; } .rp-rate .btn{ grid-column:2; justify-self:end; } }

/* AR Aging: text above the ageing column headings */
.hdr-note{ display:block; margin:0 0 6px; text-transform:none; letter-spacing:normal; font-weight:400; }
.hdr-note:empty{ display:none; }
.hdr-note-in{ width:100%; min-width:70px; padding:3px 6px; border:1px solid var(--border); border-radius:6px; background:var(--surface); color:var(--text); font:12px/1.3 'IBM Plex Sans',sans-serif; text-align:left; }
.hdr-note-in:focus{ outline:2px solid var(--accent); outline-offset:0; }
.hdr-note-ro{ display:block; font-size:12px; font-style:italic; font-weight:400; color:var(--text-muted); text-transform:none; letter-spacing:normal; white-space:normal; overflow-wrap:anywhere; text-align:right; }

/* the AR Aging heading text boxes are desktop only: phones (same test as the other desktop-only header features) do not show them */
@media (max-width:768px), (pointer:coarse) and (max-height:500px){ .hdr-note, .hdr-note-in, .hdr-note-ro{ display:none !important; } }