@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* Henderson brand theme (Section 37): navy sampled from the company
     logo takes over the app's existing --accent/--accent-strong/
     --btn-bg family (buttons, active tab, headers, links, selected
     states) — the same roles these tokens always played, just recolored.
     --brand-red is new: the logo's red, used in exactly one restrained
     spot (the Paid/Completed stamp) rather than spread across the app.
     --amber/--red/--blue (warning / rejected-error / informational
     status colors) are untouched on purpose — those meanings stay put.
     The neutral grays (ink/paper/surface-2/line) shift from the old
     green-tinted grays to true cool neutrals to match "white / very
     light neutral" background and read as one coherent brand, not a
     green theme with navy patched on top. */
  --ink:#1a1d2b; --ink-soft:#4c5266; --ink-faint:#7d8496;
  --paper:#f5f6f9; --surface:#ffffff; --surface-2:#eaedf4;
  --line:#d8dce6; --line-strong:#b7bdcf;
  --accent:#33409e; --accent-strong:#23225c; --accent-soft:#e6e8f5;
  --amber:#9c6a10; --amber-soft:#f6ead2; --amber-line:#e0c384;
  --red:#ac352b; --red-soft:#f7e0dd; --red-line:#e2a89f;
  --blue:#385f86; --blue-soft:#e2eaf3; --blue-line:#aec3da;
  --neutral-soft:#e8eaf0;
  --brand-red:#e2231b;
  --green:#2e7d4f;
  --logo-bg:#ffffff; /* the logo image has a white background, so it always sits on white (also in dark mode) */
  --btn-bg:#23225c; --btn-bg-hover:#33409e; --btn-fg:#ffffff;
  --shadow:0 1px 2px rgba(26,29,43,.07), 0 10px 28px -14px rgba(26,29,43,.22);
  --font-ui:'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#e8eaf0; --ink-soft:#b3b8c9; --ink-faint:#868ca0;
    --paper:#12131c; --surface:#191b28; --surface-2:#20222f;
    --line:#2c2f3d; --line-strong:#3c4051;
    --accent:#7b84e0; --accent-strong:#a3aaf0; --accent-soft:#23253a;
    --amber:#e0ac4d; --amber-soft:#3a2e14; --amber-line:#5c4a1f;
    --red:#e2887d; --red-soft:#3a201d; --red-line:#5c332c;
    --blue:#8fb2da; --blue-soft:#1c2735; --blue-line:#374d68;
    --neutral-soft:#262838;
    --brand-red:#ff6b61;
    --green:#5fbf85;
    --logo-bg:#ffffff;
    --btn-bg:#3a3f99; --btn-bg-hover:#4a50b5; --btn-fg:#ffffff;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 28px -14px rgba(0,0,0,.65);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --ink:#e8eaf0; --ink-soft:#b3b8c9; --ink-faint:#868ca0;
  --paper:#12131c; --surface:#191b28; --surface-2:#20222f;
  --line:#2c2f3d; --line-strong:#3c4051;
  --accent:#7b84e0; --accent-strong:#a3aaf0; --accent-soft:#23253a;
  --amber:#e0ac4d; --amber-soft:#3a2e14; --amber-line:#5c4a1f;
  --red:#e2887d; --red-soft:#3a201d; --red-line:#5c332c;
  --blue:#8fb2da; --blue-soft:#1c2735; --blue-line:#374d68;
  --neutral-soft:#262838;
  --brand-red:#ff6b61;
  --green:#5fbf85;
  --logo-bg:#ffffff;
  --btn-bg:#3a3f99; --btn-bg-hover:#4a50b5; --btn-fg:#ffffff;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 28px -14px rgba(0,0,0,.65);
  color-scheme: dark;
}

*{ box-sizing:border-box; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-ui); font-size:14px; line-height:1.5;
  --gutter:16px;
  padding-inline:var(--gutter);
}
h1,h2,h3{ font-family:var(--font-ui); text-wrap:balance; margin:0; }
.mono{ font-family:var(--font-mono); font-variant-numeric: tabular-nums; }
::selection{ background:var(--accent-soft); }
a{ color:var(--accent-strong); }
button{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

.wrap{ max-width:1080px; margin:0 auto; padding-block:18px 48px; }
/* Desktop / laptop (Section 85): the content follows the browser window — it fills a maximised window, shrinks in a snapped half
   window and re-flows live while the window is dragged. The side margin grows a little with the window instead of the content
   sitting in a fixed 1080 px column. Phones (760 px and narrower) keep their own layout untouched. */
@media (min-width:761px){
  body{ --gutter:clamp(16px, 2vw, 40px); }
  .wrap{ width:100%; max-width:2400px; }
  .tablewrap{ max-width:100%; }
}
/* extra width in a big window goes to the columns people read (Name, Site) as well as Description, instead of only to Description */
@media (min-width:1500px){
  #tab-dashboard table col:nth-child(2){ width:12% !important; }
  #tab-dashboard table col:nth-child(4){ width:14% !important; }
}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-block:14px; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter);
  background:var(--paper); border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{
  width:34px; height:34px; border-radius:8px; background:var(--accent-strong);
  color:var(--surface); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:600; font-size:13px; flex:none;
}
/* Official Henderson logo (Section 45) replaces the old "HS" square. Sized by
   height only, width follows automatically, so the picture is never stretched. */
.brand-logo{ display:block; height:38px; width:auto; flex:none; background:var(--logo-bg); border-radius:6px; }
.login-card .brand{ flex-wrap:wrap; }
/* "Reimbursement Claim System" is too wide to sit beside the logo inside the narrow login card, so it drops below it (Section 46); centre it under the logo. */
.login-card .brand-text{ text-align:center; }
.login-card .brand-logo{ height:42px; }
.brand-text .org{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
.brand-text .title{ font-size:17px; font-weight:700; }

.identity{ display:flex; align-items:center; gap:8px; }
.identity-chip{
  display:flex; align-items:center; gap:8px; background:var(--surface);
  border:1px solid var(--line); border-radius:999px; padding:6px 8px 6px 6px;
  cursor:pointer;
}
.identity-chip:hover{ border-color:var(--line-strong); }
.avatar{
  width:26px; height:26px; border-radius:50%; background:var(--accent-soft);
  color:var(--accent-strong); display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; flex:none;
}
.identity-chip .who{ display:flex; flex-direction:column; line-height:1.2; text-align:left; }
.identity-chip .who .name{ font-weight:600; font-size:12.5px; }
.identity-chip .who .role{ font-size:10.5px; color:var(--ink-faint); }

/* ---------- Tabs ---------- */
.tabs{ display:flex; gap:6px; margin-block:18px 20px; border-bottom:1px solid var(--line); overflow-x:auto; }
.tab-btn{
  appearance:none; border:none; background:none; color:var(--ink-soft);
  font-size:13.5px; font-weight:600; padding:9px 4px; margin-right:18px;
  cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap;
}
.tab-btn.active{ color:var(--accent-strong); border-bottom-color:var(--accent-strong); }
.tab-btn:hover{ color:var(--ink); }

/* ---------- KPI row ---------- */
.kpis{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }
.kpi{
  background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:12px 14px;
  appearance:none; font-family:inherit; text-align:left; cursor:pointer; width:100%;
}
.kpi:hover{ border-color:var(--line-strong); background:var(--surface-2); }
.kpi-active{ box-shadow:inset 0 0 0 2px var(--accent-strong); }
.kpi .num{ font-family:var(--font-mono); font-size:22px; font-weight:600; line-height:1.1; }
.kpi .lbl{ font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; margin-top:4px; }
.kpi.accentline{ border-top:3px solid var(--accent); }
.kpi.amberline{ border-top:3px solid var(--amber); }
.kpi.redline{ border-top:3px solid var(--red); }

/* ---------- Toolbar (sort + view toggles, above the table) ---------- */
.toolbar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }

/* ---------- Per-column filter row, inside the table's own header ---------- */
.filter-row th{
  padding:6px 8px 10px; font-weight:400; text-transform:none; letter-spacing:normal;
  background:var(--surface-2); vertical-align:top;
}
.filter-row input, .filter-row select{
  width:100%; min-width:0; font-size:12px; padding:5px 7px; border-radius:6px;
}
.filter-row .range-pair{ display:flex; flex-direction:column; gap:3px; }
.filter-row .range-pair input{ width:100%; }
/* Column filter boxes with a value list (Section 96 — the same box and list as the Receivables Control System): a small ▾ hint
   while empty; ticked values show in the accent colour; the list is a check-box list with Select All / Clear and counts. */
.filter-row .col-filter{
  text-overflow:ellipsis; padding-right:18px;
  background-image:linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%), linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%);
  background-position:calc(100% - 10px) 52%, calc(100% - 6px) 52%; background-size:4px 4px, 4px 4px; background-repeat:no-repeat;
}
.filter-row .col-filter:not(:placeholder-shown){ background-image:none; padding-right:7px; }
.filter-row .col-filter::placeholder{ color:var(--ink-faint); }
.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(--ink);
  border:1px solid var(--line-strong); border-radius:8px; box-shadow:var(--shadow); font-size:12.5px;
}
.cf-opt{ display:flex; align-items:center; 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(--ink-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; }
.cf-cb{ flex:none; width:14px; height:14px; border:1.5px solid var(--line-strong); 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 var(--btn-fg); border-bottom:2px solid var(--btn-fg); 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(--line); 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(--ink-faint); font-weight:500; }
.cf-opt.cf-blank .cf-l{ font-style:italic; color:var(--ink-soft); }
.cf-empty{ padding:8px; color:var(--ink-faint); font-style:italic; }
@media (pointer: coarse){ .cf-opt{ padding:10px 10px; } }
@media (max-width:760px){ .cf-pop{ max-width:calc(100vw - 16px); } }
select, input[type=text], input[type=date], input[type=number], textarea{
  font-family:var(--font-ui); font-size:13.5px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:8px 10px;
}
textarea{ font-family:var(--font-ui); resize:vertical; min-height:64px; width:100%; }
select{ min-width:0; }
.search-input{ flex:1; min-width:160px; }
label.field{ display:flex; flex-direction:column; gap:5px; font-size:12.5px; color:var(--ink-soft); font-weight:500; }
label.field input, label.field select, label.field textarea{ width:100%; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:520px){ .field-row{ grid-template-columns:1fr; } }

/* ---------- Buttons ---------- */
.btn{
  appearance:none; border:1px solid var(--line); background:var(--surface); color:var(--ink);
  border-radius:8px; padding:8px 14px; font-size:13px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.btn:hover{ border-color:var(--line-strong); }
.btn-primary{ background:var(--btn-bg); border-color:var(--btn-bg); color:var(--btn-fg); }
.btn-primary:hover{ background:var(--btn-bg-hover); border-color:var(--btn-bg-hover); }
.btn-ghost{ background:transparent; border-color:transparent; }
.btn-ghost:hover{ background:var(--surface-2); }
.btn-danger{ color:var(--red); border-color:var(--red-line); }
.btn-danger:hover{ background:var(--red-soft); }
.btn-sm{ padding:6px 10px; font-size:12px; border-radius:7px; }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn-row{ display:flex; gap:8px; flex-wrap:wrap; }

/* ---------- Table (ledger rows) ---------- */
/* The claim list is ONE scrolling table (Section 76): about 15 rows show, the rest scroll inside it (no pages). Page scrolling
   continues normally once the list reaches its end (overscroll is NOT contained, so a finger can never get stuck in it). The
   header and the filter row stay in view while scrolling. --tbl-max / --thead1 are measured from the real rows by the page. */
.tablewrap{ overflow:auto; max-height:min(var(--tbl-max, 700px), 100vh); max-height:min(var(--tbl-max, 700px), 100dvh); overscroll-behavior:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
thead tr:first-child th{ position:sticky; top:0; z-index:3; }
thead tr.filter-row th{ position:sticky; top:var(--thead1, 34px); z-index:2; }
.period-pair{ display:inline-flex; gap:8px; align-items:center; }
.toolbar select.period-select{ width:auto; min-width:0; padding:5px 8px; font-size:12.5px; border-radius:7px; }
.period-off{ opacity:.55; }
#overallViewBtn.on{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-strong); }
table{ border-collapse:collapse; width:100%; min-width:1175px; table-layout:fixed; } /* was 1300px — Submitted By's 125px column was removed entirely, not just hidden */
thead th{
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-faint); font-weight:600; padding:10px 12px; border-bottom:1px solid var(--line);
  background:var(--surface-2);
}
tbody td{ padding:11px 12px; border-bottom:1px solid var(--line); font-size:13px; vertical-align:middle; overflow-wrap:break-word; }
tbody td .pill{ white-space:normal; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr{ cursor:pointer; }
tbody tr:hover td{ background:var(--surface-2); }
.empty-row td{ text-align:center; color:var(--ink-faint); padding:32px 12px; cursor:default; }
.empty-row:hover td{ background:none; }

/* ---------- Status pill / stamp ---------- */
.pill{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px;
  font-size:11px; font-weight:600; border:1px solid transparent; white-space:nowrap;
}
.pill-neutral{ background:var(--neutral-soft); color:var(--ink-soft); border-color:var(--line); }
.pill-blue{ background:var(--blue-soft); color:var(--blue); border-color:var(--blue-line); }
.pill-amber{ background:var(--amber-soft); color:var(--amber); border-color:var(--amber-line); }
.pill-red{ background:var(--red-soft); color:var(--red); border-color:var(--red-line); }
.pill-accent{ background:var(--accent-soft); color:var(--accent-strong); border-color:var(--accent); }
.stamp{
  display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:5px;
  font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  /* The one deliberate use of Henderson red as a highlight (Justin: "Keep
     red as an accent color; do not overuse it") — a completed claim's
     "Paid / Completed" badge, styled like a real rubber ink stamp, which
     is conventionally red. Distinct from the semantic --red used for
     rejected/error states (different hue, different shape: a bordered,
     rotated stamp vs. a rounded status pill), so it can't be mistaken for
     an error. */
  /* Green border (Section 40) and, since Section 44, green text too — the
     same --green token for both. --brand-red is no longer used here; red is
     kept for warning / rejected / error states. */
  border:1.5px solid var(--green); color:var(--green); transform:rotate(-2deg);
}

/* ---------- Cards / sections ---------- */
.panel{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px; }
.section-title{ font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint); font-weight:700; margin-bottom:10px; }
.stack{ display:flex; flex-direction:column; gap:14px; }
/* Roster HQ / Direct tabs beside the ROSTER heading (Section 114) */
.roster-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.roster-head .section-title{ margin-bottom:0; }
.roster-tabs{ display:inline-flex; gap:4px; padding:3px; border:1px solid var(--line); border-radius:999px; background:var(--surface-2); }
.rtab{ appearance:none; border:0; background:transparent; color:var(--ink-faint); font:inherit; font-size:12px; font-weight:700; letter-spacing:.03em; padding:4px 12px; border-radius:999px; cursor:pointer; }
.rtab:hover{ color:var(--ink); }
.rtab.on{ background:var(--accent-strong); color:var(--surface); }
.rtab-n{ font-weight:600; opacity:.8; }

/* ---------- New claim / form panel ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
@media (max-width:560px){ .form-grid{ grid-template-columns:1fr; } }
.form-grid .span2{ grid-column:1 / -1; }

/* ---------- Overlay / detail drawer ---------- */
.scrim{
  position:fixed; inset:0; background:rgba(15,20,17,.45); z-index:100;
  display:flex; justify-content:flex-end;
}
.drawer{
  background:var(--paper); width:min(560px, 100%); height:100%;
  box-shadow:var(--shadow); display:flex; flex-direction:column;
}
.drawer-scroll{ flex:1 1 auto; overflow-y:auto; padding:18px; }
.drawer-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:14px; }
.drawer-close{ flex:none; }
.kv{ display:grid; grid-template-columns:120px 1fr; gap:6px 10px; font-size:13px; }
.kv dt{ color:var(--ink-faint); }
.kv dd{ margin:0; }
.trail-item{ display:flex; gap:10px; padding-block:8px; border-top:1px solid var(--line); font-size:12.5px; }
.trail-item:first-child{ border-top:none; }
.trail-dot{ width:8px; height:8px; border-radius:50%; background:var(--ink-faint); margin-top:5px; flex:none; }
.trail-dot.ok{ background:var(--accent); }
.trail-dot.no{ background:var(--red); }
.receipt-row{ display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--line); }
.receipt-row:first-child{ border-top:none; }
.receipt-thumb{ width:38px; height:38px; border-radius:6px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; flex:none; font-size:15px; overflow:hidden; }
.receipt-thumb img{ width:100%; height:100%; object-fit:cover; }
.receipt-meta{ flex:1; min-width:0; }
/* Section 117: the one consolidated receipts PDF and the documents inside it; the New Claim "Preview PDF" bar */
.receipt-cons{ flex-wrap:wrap; }
.cons-parts{ flex:1 1 100%; margin:2px 0 0 48px; padding-left:18px; font-size:12px; }
.cons-parts li{ padding:2px 0; overflow-wrap:anywhere; }
.cons-parts .btn{ padding:2px 8px; min-height:0; }
.nc-cons{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:10px; padding:10px 12px; border:1px dashed var(--line); border-radius:10px; background:var(--surface-2); }
.nc-cons-info{ flex:1; min-width:0; }
.nc-cons-info .fn{ font-weight:600; font-size:12.5px; }
.nc-cons-info .sub{ font-size:11px; color:var(--ink-faint); }
.nc-cons-sheets{ flex:1 1 100%; }
/* Section 126: a WhatsApp / email verification page shown under its receipt */
.receipt-row.nc-verif{ padding-left:18px; border-top:1px dashed var(--line); }
.receipt-meta .fn{ font-weight:600; font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.receipt-meta .sub{ font-size:11px; color:var(--ink-faint); }
/* Section 116: while a rejection reason is typed on a phone, the Approve / Reject bar steps aside (Cancel / Confirm reject sit with the box) */
@media (max-width:760px){ .drawer.rejecting .drawer-actions{ display:none; } .drawer.rejecting #rejectInline{ padding-bottom:calc(8px + env(safe-area-inset-bottom)); } }
/* Section 153: the claim's "Save changes" row stays in view while its details are scrolled (no need to scroll down to find it) */
.save-sticky{ position:sticky; bottom:-18px; z-index:5; margin:12px -18px -18px; padding:10px 18px; background:var(--surface); border-top:1px solid var(--line); border-radius:0 0 12px 12px; }
.drawer-actions{
  flex:0 0 auto; padding:12px 18px 14px;
  background:var(--paper); border-top:1px solid var(--line); display:flex; gap:8px; flex-wrap:wrap;
}
.banner{ padding:10px 12px; border-radius:8px; font-size:12.5px; margin-bottom:14px; border:1px solid; }
.banner-amber{ background:var(--amber-soft); border-color:var(--amber-line); color:var(--amber); }
.banner-red{ background:var(--red-soft); border-color:var(--red-line); color:var(--red); }
.banner-blue{ background:var(--blue-soft); border-color:var(--blue-line); color:var(--blue); }
.banner-accent{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-strong); }

/* ---------- Identity modal ---------- */
.modal-scrim{ position:fixed; inset:0; background:rgba(15,20,17,.55); z-index:200; display:flex; align-items:center; justify-content:center; padding:16px; }
.modal{ background:var(--surface); border-radius:14px; padding:22px; width:min(420px,100%); box-shadow:var(--shadow); }
.role-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.role-chip{
  border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:7px 13px;
  font-size:12.5px; font-weight:600; cursor:pointer; color:var(--ink-soft);
}
.role-chip.sel{ background:var(--btn-bg); border-color:var(--btn-bg); color:var(--btn-fg); }

/* ---------- People tab ---------- */
.people-row{ display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--line); flex-wrap:wrap; }
.people-row:first-child{ border-top:none; }
.people-roles{ display:flex; gap:6px; flex-wrap:wrap; flex:1; }
.role-tag{ font-size:11px; padding:3px 8px; border-radius:6px; background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--line); cursor:default; }
.role-tag.on{ background:var(--accent-soft); color:var(--accent-strong); border-color:var(--accent); cursor:pointer; }
.role-tag.editable{ cursor:pointer; }

/* ---------- Toast ---------- */
#toastHost{ position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:400; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast{ background:var(--btn-bg); color:var(--btn-fg); padding:9px 16px; border-radius:8px; font-size:12.5px; font-weight:600; box-shadow:var(--shadow); }
/* A failed action (e.g. a delete that didn't go through) gets a visually
   distinct red toast, not just different wording someone might skim past. */
.toast-error{ background:var(--red-soft); color:var(--red); border:1px solid var(--red-line); }
/* Receipt upload / PDF conversion progress (Section 95): sits above the toasts while documents are converted and uploaded,
   then lists the final PDF names and sizes. */
.upload-progress{ position:fixed; left:50%; bottom:64px; transform:translateX(-50%); z-index:401; width:min(440px, calc(100% - 24px));
  background:var(--surface); color:var(--ink); border:1px solid var(--line-strong); border-radius:10px; box-shadow:var(--shadow); padding:10px 14px; font-size:13px; }
.upload-progress[hidden]{ display:none; }
.upload-progress .up-text{ font-weight:600; overflow-wrap:anywhere; }
.upload-progress .up-list{ margin:6px 0 0; padding:0; list-style:none; color:var(--ink-soft); font-size:12.5px; }
.upload-progress .up-list li{ display:flex; justify-content:space-between; gap:10px; }
.upload-progress .up-list li span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.upload-progress .up-bar{ height:6px; border-radius:999px; background:var(--surface-2); margin-top:8px; overflow:hidden; }
.upload-progress .up-bar span{ display:block; height:100%; width:0; background:var(--accent); transition:width .25s ease; }
.upload-progress.up-done .up-bar span{ background:var(--green); }
.upload-progress.up-error{ border-color:var(--red-line); }
.upload-progress.up-error .up-text{ color:var(--red); }
.upload-progress.up-error .up-bar span{ background:var(--red); }

/* ---------- Login screen ---------- */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px; }
.login-card{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:26px; width:min(360px,100%); box-shadow:var(--shadow); }
.login-card .field{ margin-top:0; }

/* ---------- Password show/hide ---------- */
.pw-wrap{ position:relative; display:flex; }
.pw-wrap input{ padding-right:38px; }
.pw-toggle{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  border:none; background:transparent; cursor:pointer; color:var(--ink-faint); border-radius:6px;
}
.pw-toggle:hover{ background:var(--surface-2); color:var(--ink-soft); }
.pw-toggle svg{ width:17px; height:17px; }

/* ---------- Identity switcher (topbar) ---------- */
.identity-switch{
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink-soft);
  border-radius:999px; padding:5px 10px; font-size:12px; font-weight:600; cursor:pointer;
}

/* ---------- Payment-cycle banner ---------- */
#paymentCycleBanner{ margin-bottom:14px; text-align:center; }

[hidden]{ display:none !important; }
.muted{ color:var(--ink-faint); }
.small{ font-size:12px; }
.hint{ font-size:11.5px; color:var(--ink-faint); margin-top:4px; }

/* =====================================================================
   Phone / small-screen layout (Section 39). Everything above is the
   desktop design and is untouched: this block only applies below 760px
   wide, so desktop and large tablets look exactly as before. It keeps the
   existing table (it scrolls sideways inside its own box, header stays
   put) and uses the color tokens above — no colors are set here.
   ===================================================================== */
@media (max-width:760px){
  body{ padding-inline:max(12px, env(safe-area-inset-left)); -webkit-text-size-adjust:100%; }
  .wrap{ padding-block:10px 40px; }

  /* 16px fields stop iPhones zooming the page on tap; taller controls are easier to hit */
  select, input[type=text], input[type=date], input[type=number], input[type=password], textarea{ font-size:16px; padding:10px 12px; max-width:100%; }
  .btn{ min-height:42px; }
  .btn-sm{ min-height:38px; padding:8px 12px; font-size:13px; }
  .filter-row input, .filter-row select{ font-size:14px; padding:8px 8px; }

  /* Top bar: brand, then the signed-in chip across the full width */
  .topbar{ margin-inline:-12px; padding-inline:12px; padding-block:10px; gap:8px; }
  .brand-text .title{ font-size:16px; }
  .brand-logo{ height:34px; }
  .login-card .brand-logo{ height:38px; }
  .identity{ width:100%; }
  .identity-chip{ width:100%; border-radius:12px; flex-wrap:wrap; gap:8px; }
  .identity-chip .who{ flex:1; min-width:0; }
  .identity-chip .who .name, .identity-chip .who .role{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .identity-switch{ max-width:45%; }
  #paymentCycleBanner{ text-align:left; font-size:12px; }

  /* Tabs: one row that scrolls sideways instead of squeezing or wrapping */
  .tabs{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; margin-block:12px 14px; scrollbar-width:none; }
  .tabs::-webkit-scrollbar{ display:none; }
  .tab-btn{ flex:none; padding:12px 6px; font-size:14px; }

  /* Summary tiles: two per row */
  .kpis{ grid-template-columns:1fr 1fr; gap:8px; }
  .kpi{ padding:10px 12px; }
  .kpi .num{ font-size:19px; overflow-wrap:anywhere; }

  /* Filters / controls stack instead of cramming into one line */
  .toolbar{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .toolbar .search-input{ grid-column:1 / -1; min-width:0; order:-1; }
  .toolbar select{ width:100%; }
  .toolbar label.small{ font-size:13.5px; padding:6px 0; }
  .toolbar .btn{ grid-column:1 / -1; justify-content:center; }

  /* Wide table: scrolls sideways AND (about 15 rows, Section 76) up/down inside its one box. Unlike the Section 59 version,
     vertical overscroll is not contained, so reaching the end of the list hands the swipe on to the page — nothing can trap a finger. */
  .period-pair{ grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .toolbar select.period-select{ width:100%; min-height:38px; font-size:14px; }
  .tablewrap{ max-height:min(var(--tbl-max, 700px), 72vh); max-height:min(var(--tbl-max, 700px), 72dvh); }

  /* Claim detail: full-width sheet, action buttons easy to reach */
  .drawer{ width:100%; }
  .drawer-scroll{ padding:14px; }
  .drawer-actions{ padding:10px 14px calc(12px + env(safe-area-inset-bottom)); }
  .drawer-actions .btn{ flex:1 1 calc(50% - 8px); justify-content:center; }
  .kv{ grid-template-columns:104px 1fr; }
  .receipt-row{ flex-wrap:wrap; }

  .panel{ padding:14px; }
  .save-sticky{ bottom:-14px; margin:12px -14px -14px; padding:10px 14px; }
  .modal{ padding:18px; max-height:calc(100dvh - 32px); overflow-y:auto; }
  .form-grid{ grid-template-columns:1fr; }
  .people-row .btn{ min-height:38px; }
  #toastHost{ bottom:calc(14px + env(safe-area-inset-bottom)); width:calc(100% - 24px); }
  .toast{ text-align:center; }
  .login-wrap{ min-height:100dvh; }
}
@media (max-width:420px){
  .toolbar{ grid-template-columns:1fr; }
  .drawer-actions .btn{ flex:1 1 100%; }
  .kv{ grid-template-columns:1fr; gap:2px 0; }
  .kv dt{ margin-top:6px; }
}

/* The Summary Card toggle exists on phones only (Section 80); on desktop the six cards are always shown. */
.summary-toggle{ display:none; }
.kpi-exports{ display:none; }   /* phones only: the two export buttons sit under the cards (Section 81) */

/* ---------- Dense mobile Dashboard (Section 79): same controls and data, much less vertical space. Phones only. ---------- */
@media (max-width:760px){
  .topbar{ padding-block:6px; gap:6px; margin-bottom:6px; }
  .identity-chip{ padding:4px 8px; gap:6px; }
  #paymentCycleBanner{ padding:5px 10px; margin-bottom:6px; font-size:11.5px; line-height:1.3; }
  .tabs{ margin-block:4px 8px; }
  .tab-btn{ padding:8px 6px; }
  /* the six summary cards: still two per row, much shorter */
  .kpis{ gap:6px; margin-bottom:8px; }
  .kpi{ padding:5px 10px 6px; }
  .kpi.accentline, .kpi.amberline, .kpi.redline{ border-top-width:2px; }
  .kpi .num{ font-size:15.5px; line-height:1.15; }
  .kpi .lbl{ font-size:9.5px; margin-top:1px; letter-spacing:.04em; }
  /* filters: search full width, then two controls per row (Sort|Status, Category|Company, Month|Year, Overall View|Reset) */
  .toolbar{ grid-template-columns:1fr 1fr; gap:6px; margin-bottom:6px; }
  .toolbar select, .toolbar input.search-input{ min-height:36px; padding:5px 8px; }
  .toolbar label.small{ grid-column:1 / -1; padding:1px 0; font-size:13px; }
  .period-pair{ gap:6px; }
  .toolbar select.period-select{ min-height:36px; }
  .toolbar .btn{ grid-column:auto; min-height:36px; padding:5px 8px; }
  #fltHint{ margin:0 0 6px !important; font-size:12px; }
  #fltHint:empty{ display:none; }
  /* Section 80: the six cards are folded away behind one button (collapsed by default); folded = no space at all */
  .summary-toggle{ display:flex; width:calc(50% - 3px); justify-content:center; min-height:36px; padding:5px 8px; margin-bottom:6px; }
  .summary-toggle .summary-caret{ transition:transform .15s; }
  #tab-dashboard.kpis-open .summary-toggle .summary-caret{ transform:rotate(180deg); }
  #tab-dashboard .kpis{ display:none; }
  #tab-dashboard.kpis-open .kpis{ display:grid; }
  /* Section 81: on phones Export payment list (Excel) and Export CSV live under the six cards and fold away with them */
  #tab-dashboard.kpis-open .kpi-exports{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:8px; }
  .kpi-exports .btn{ justify-content:center; min-height:36px; padding:5px 8px; }
}
@media (max-width:420px){
  .toolbar{ grid-template-columns:1fr 1fr; }      /* stays two per row (the older rule made it one) */
  .kpi .num{ font-size:14.5px; }
}
/* ---------- In-app receipt viewer (Section 42) ---------- */
.rv-scrim{ z-index:300; padding:16px; }
.rv-modal{
  background:var(--surface); border-radius:14px; box-shadow:var(--shadow);
  width:min(960px, 100%); height:min(90vh, 900px); display:flex; flex-direction:column; overflow:hidden;
}
.rv-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; border-bottom:1px solid var(--line); flex:none;
}
.rv-title{ font-weight:600; font-size:13.5px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rv-tools{ display:flex; align-items:center; gap:6px; flex:none; }
.rv-zoomlbl{ min-width:44px; text-align:center; color:var(--ink-soft); }
.rv-body{ flex:1 1 auto; overflow:auto; background:var(--surface-2); -webkit-overflow-scrolling:touch; }
.rv-msg{ padding:20px; margin:0; text-align:center; }
.rv-img{ display:block; height:auto; max-width:none; margin:0 auto; }
.rv-pages{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:12px; width:max-content; min-width:100%; }
.rv-pages canvas{ display:block; flex:none; box-shadow:var(--shadow); }
@media (max-width:760px){
  .rv-scrim{ padding:0; align-items:stretch; }
  .rv-modal{ width:100%; height:100dvh; border-radius:0; }
  .rv-head{ padding:8px 10px; padding-top:max(8px, env(safe-area-inset-top)); }
  .rv-title{ font-size:12.5px; }
}

/* ---------- Inactivity warning (Section 49) ---------- */
.session-warn{
  position:fixed; left:50%; top:12px; transform:translateX(-50%); z-index:500;
  width:min(560px, calc(100% - 24px)); display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--amber-soft); color:var(--amber); border:1px solid var(--amber-line);
  border-radius:10px; padding:10px 14px; box-shadow:var(--shadow); font-size:13px; font-weight:600;
}
.session-warn .btn{ flex:none; }
@media (max-width:520px){ .session-warn{ flex-direction:column; align-items:stretch; text-align:left; } .session-warn .btn{ justify-content:center; } }

/* ---------- Compact roster (Sections 70 + 72): a grid so line 2 starts under the line-1 details; 25 per page ---------- */
.rrow{ display:grid; grid-template-columns:24px minmax(110px,170px) minmax(0,1fr) auto; column-gap:12px; row-gap:0; align-items:center; padding:3px 2px 4px; border-top:1px solid var(--line); }
.rrow:first-child{ border-top:none; }
.rrow .avatar-sm{ grid-column:1; }
.rname{ grid-column:2; font-weight:600; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rmetas{ grid-column:3; display:grid; grid-template-columns:minmax(120px,250px) 92px minmax(0,1fr); column-gap:12px; align-items:center; min-width:0; }
.rmeta{ font-size:12px; color:var(--ink-soft); }
.rmail, .rform{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.rwarn{ color:var(--amber); }
.ractions{ grid-column:4; justify-self:end; display:flex; align-items:center; gap:4px; min-height:26px; }
.ractions .btn{ min-height:24px; padding:1px 10px; font-size:12px; }
.rline2{ grid-column:3 / 5; display:flex; align-items:center; gap:4px 8px; flex-wrap:wrap; min-width:0; }
.redit{ grid-column:1 / -1; }
.chip{ font-size:10.5px; line-height:1.5; padding:0 7px; border-radius:999px; border:1px solid var(--line); white-space:nowrap; }
.chip-role{ background:var(--accent-soft); color:var(--accent-strong); border-color:var(--accent); }
.chip-co{ background:var(--surface-2); color:var(--ink-soft); }
.avatar-sm{ width:24px; height:24px; font-size:10px; flex:0 0 24px; }
.pager{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:4px; padding:10px 0 2px; border-top:1px solid var(--line); margin-top:4px; }
.pager .btn{ min-height:28px; padding:2px 10px; font-size:12px; }
.pager .pager-n.on{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-strong); font-weight:700; }
.pager-gap{ color:var(--ink-faint); padding:0 2px; }
.pager-info{ margin-left:10px; }
@media (max-width:760px){
  .rrow{ grid-template-columns:24px minmax(0,1fr) auto; row-gap:1px; }
  .rname{ grid-column:2; }
  .ractions{ grid-column:3; grid-row:1; }
  .rmetas{ grid-column:2 / -1; grid-template-columns:1fr; row-gap:0; }
  .rline2{ grid-column:2 / -1; }
  .rrow .btn{ min-height:34px; }
}
/* ---------- TESTING claims (Finance/Editor New Claim testing mode, Section 69) ---------- */
.test-badge{ display:inline-block; padding:1px 7px; border-radius:999px; border:1px solid var(--amber-line); background:var(--amber-soft); color:var(--amber); font-size:10.5px; font-weight:700; letter-spacing:.06em; line-height:1.5; vertical-align:middle; }
.test-banner{ margin:0 0 14px; padding:9px 12px; border:1px dashed var(--amber-line); border-radius:8px; background:var(--amber-soft); color:var(--ink); font-size:13px; line-height:1.4; }
tr.is-test td{ background-image:none; }

/* ---------- Identity multi-select dropdown in the Edit User window (Section 67) ---------- */
.multi-dd{ position:relative; margin-top:4px; }
.multi-dd > summary{ list-style:none; cursor:pointer; border:1px solid var(--line-strong); border-radius:8px; background:var(--surface); padding:8px 28px 8px 10px; min-height:38px; font-size:14px; color:var(--ink); position:relative; }
.multi-dd > summary::-webkit-details-marker{ display:none; }
.multi-dd > summary::after{ content:"\25BE"; position:absolute; right:10px; top:50%; transform:translateY(-50%); color:var(--ink-faint); }
.multi-panel{ position:absolute; z-index:60; left:0; right:0; margin-top:2px; background:var(--surface); border:1px solid var(--line-strong); border-radius:8px; box-shadow:var(--shadow); padding:6px; }
.multi-opt{ display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:6px; cursor:pointer; font-size:14px; }
.multi-opt:hover{ background:var(--accent-soft); }
.multi-opt input{ width:auto; }

/* ---------- Description picker beside each transaction's Description label (Section 66) ---------- */
.desc-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.txn .desc-head .desc-pick{ width:auto; flex:0 1 60%; min-width:0; height:30px; padding:3px 8px; font-size:12.5px; }
@media (max-width:760px){ .txn-grid .field .desc-head .desc-pick{ height:34px; font-size:16px; padding:4px 8px; flex-basis:62%; } }

/* ---------- Searchable dropdown filters in the table's filter row (Section 65) ---------- */
.combo-list{ position:fixed; z-index:150; max-height:240px; overflow-y:auto; background:var(--surface); border:1px solid var(--line-strong); border-radius:8px; box-shadow:var(--shadow); padding:4px; font-size:14px; }
.combo-opt{ padding:7px 10px; border-radius:6px; cursor:pointer; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.combo-opt:hover, .combo-opt.active{ background:var(--accent-soft); }
.combo-all{ font-weight:600; color:var(--ink-soft, var(--ink)); }
.combo-empty{ padding:7px 10px; color:var(--ink-faint); }
/* Section 149: the note shown at the top of the Description Shortcut list */
.combo-note{ margin:0 0 4px; padding:8px 10px; border-radius:6px; background:var(--accent-soft); color:var(--ink); font-size:13px; line-height:1.4; white-space:normal; }
.desc-list .combo-opt{ white-space:normal; }   /* the list fits the screen width, so long shortcuts wrap instead of being cut */
.combo-note small{ display:block; margin-top:3px; color:var(--ink-faint); font-size:12px; }

/* ---------- Description mappings: grouped accordion (Section 73) ---------- */
.rcat{ border-top:1px solid var(--line); }
.rcat:first-child{ border-top:none; }
.rcat-head{ display:flex; align-items:center; gap:8px; padding:3px 6px; min-height:34px; }
.rcat-toggle{ flex:1; display:flex; align-items:center; gap:8px; background:none; border:none; padding:4px 2px; cursor:pointer; color:var(--ink); font:inherit; font-weight:600; text-align:left; min-width:0; }
.rcat-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rcat-caret{ color:var(--ink-faint); width:12px; }
.rcat-count{ font-size:11px; font-weight:600; color:var(--ink-soft); background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:0 7px; }
.rcat-rename{ flex:1; min-width:0; }
.rcat .btn-row .btn{ min-height:24px; padding:1px 10px; font-size:12px; }
.rcat-body{ padding:2px 6px 8px 26px; background:var(--surface-2); }
.rcat-body .rule-row{ border-top:none; padding:3px 0; }
.rcat-body .rule-add{ border-top:1px dashed var(--line); margin-top:4px; padding-top:6px; }
#rulePager, #ruleList .pager{ border-top:none; }
/* ---------- Description mappings list (Section 62) ---------- */
.rule-list{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:8px; }
.rule-row{ display:grid; grid-template-columns:minmax(0,1.2fr) 120px minmax(0,1.4fr) auto; gap:6px; padding:6px 8px; border-top:1px solid var(--line); align-items:center; }
.rule-row:first-child{ border-top:none; }
.rule-row input, .rule-row select{ width:100%; min-width:0; }
.rule-row .btn-row{ display:flex; gap:4px; }
@media (max-width:760px){ .rule-row{ grid-template-columns:1fr 1fr; } .rule-row .btn-row{ grid-column:1 / -1; } }

/* ---------- Bank payment export panel (Section 60) ---------- */
.bank-panel{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 12px; margin:0 0 12px; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); }
.bank-panel[hidden]{ display:none; }
.bank-panel .field{ min-width:180px; }
.bank-actions{ display:flex; gap:8px; }
.bank-msg{ flex:1 1 100%; font-size:13px; line-height:1.4; color:var(--ink); }
.bank-msg ul{ margin:4px 0 0 18px; padding:0; }
.bank-msg.is-error{ color:var(--red, var(--ink)); }
@media (max-width:760px){ .bank-panel .field{ flex:1 1 100%; } .bank-actions{ flex:1 1 100%; } .bank-actions .btn{ flex:1; justify-content:center; } }

/* ---------- Transactions: several receipts in one claim (Section 51) ---------- */
.txn-lines{ display:flex; flex-direction:column; gap:10px; }
.txn{ border:1px solid var(--line); border-radius:10px; padding:12px; background:var(--surface-2); }
.txn-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; font-size:13px; }
.txn-grid{ display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:10px 12px; }
.txn-grid .txn-desc{ grid-column:1 / -1; }
.txn-lines.single .txn-remove{ display:none; }  /* the only transaction can't be removed */
.txn-files{ margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); }
.txn-filelist{ margin-top:6px; }
.total-field input{ font-weight:700; background:var(--surface-2); color:var(--ink); cursor:default; }
/* read-only view of a claim's transactions */
.txn-ro{ display:flex; flex-direction:column; }
.txn-ro-row{ display:grid; grid-template-columns:24px 1fr 112px 112px; gap:8px; padding:8px 0; border-top:1px solid var(--line); align-items:start; }
.txn-ro-row:first-child{ border-top:none; }
/* Section 119: "Site: HQ · 19 Oct 2026" under each transaction's description (site stronger, receipt date muted; never larger than the description) */
.txn-site-line{ display:flex; flex-wrap:wrap; align-items:baseline; column-gap:6px; margin-top:2px; font-size:12.5px; line-height:1.4; }
.txn-site{ color:var(--ink); font-weight:600; overflow-wrap:anywhere; }
.txn-sep{ color:var(--ink-faint); }
.txn-rdate{ color:var(--ink-faint); white-space:nowrap; }
.txn-ro-n{ color:var(--ink-faint); font-size:12px; padding-top:2px; }
.txn-ro-amt{ text-align:right; font-size:12.5px; }
.txn-ro-total{ border-top:2px solid var(--line-strong); }
@media (max-width:760px){
  .txn-grid{ grid-template-columns:1fr 1fr; }
  .txn-ro-row{ grid-template-columns:22px 1fr 1fr; }
  .txn-ro-main{ grid-column:2 / -1; }
  .txn-ro-row > :nth-child(3){ grid-column:2; text-align:left; }
  .txn-ro-row > :nth-child(4){ grid-column:3; }
}
/* Mobile transaction cards (Section 59): equal 50/50 columns, identical field heights, compact.
   Stacks to one column only when two clean columns no longer fit. Desktop is untouched. */
@media (max-width:760px){
  .txn-lines{ gap:8px; }
  .txn{ padding:10px; }
  .txn-head{ margin-bottom:6px; }
  .txn-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px 10px; }
  .txn-grid .field{ display:flex; flex-direction:column; gap:3px; min-width:0; font-size:12px; line-height:1.2; }
  .txn-grid .field input, .txn-grid .field select{ width:100%; min-width:0; max-width:100%; box-sizing:border-box; height:42px; padding:6px 10px; -webkit-appearance:none; appearance:none; }
  .txn-grid .field textarea{ width:100%; box-sizing:border-box; min-height:52px; padding:8px 10px; }
  .txn-files{ margin-top:8px; padding-top:8px; }
}
@media (max-width:340px){ .txn-grid{ grid-template-columns:minmax(0,1fr); } }

/* ---------- Upload first, one transaction per document (Section 52) ---------- */
.upload-top{ border:1px dashed var(--line-strong); border-radius:12px; padding:14px; background:var(--accent-soft); }
.upload-btn{ min-height:44px; cursor:pointer; }
.txn-doclist{ margin-top:8px; }
.txn-doc{ margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); font-size:12.5px; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; }
.doc-name{ font-weight:600; overflow-wrap:anywhere; }
.doc-status{ font-size:12px; }
.doc-busy{ color:var(--ink-faint); }
.doc-ok{ color:var(--green); }
.doc-warn{ color:var(--amber); }

@media (max-width:760px){
  .txn-doclist .receipt-row{ flex-wrap:wrap; }
  .txn-doclist .receipt-meta{ flex:1 1 100%; }
  .txn-doclist .receipt-row .btn{ flex:1 1 40%; justify-content:center; }
}

.title-note{ text-transform:none; letter-spacing:normal; font-weight:700; }  /* "- Upload first" keeps normal capitalisation */

/* Dashboard: Site and Description are shown on one line and cut off with "…" at the column's width,
   so long text never makes the table wider or taller (Section 55). Full text = hover tooltip / the claim itself. */
tbody td.clip{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }