/* Payroll Preparation: Proposal A design system (owner, 2026-11-08). One system for every screen.
   Cool grey page, white surfaces, deep navy text, slate secondary text, muted indigo for actions, pale grey borders,
   pale blue for selected items and side panels. Amber, red and green only for warning, error and success. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root {
  --ink:#17253B; --slate:#334155; --muted:#64748B; --faint:#94A3B8;
  --bg:#F5F7FA; --panel:#FFFFFF; --sunk:#F8FAFC; --line:#E2E8F0; --line-strong:#CBD5E1;
  --accent:#4957A6; --accent-hover:#3D4A93; --accent-ink:#FFFFFF; --accent-weak:#EEF0F9; --accent-line:#D6DBEF; --row-hover:#F8FAFC;
  --good:#166534; --good-bg:#DCFCE7; --warn:#92400E; --warn-bg:#FEF3C7; --bad:#B42318; --bad-bg:#FEE4E2;
  --info:#4957A6; --info-bg:#EEF0F9; --new:#5B4B9A; --new-bg:#EFEBFA;
  --r:8px; --r-sm:6px; --shadow:0 1px 2px rgba(23,37,59,.04);
  --focus:0 0 0 3px rgba(73,87,166,.28);
  --font: Inter, -apple-system, "Segoe UI", system-ui, Arial, sans-serif;
  --side-w:232px; --top-h:60px;
}
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 var(--font); -webkit-font-smoothing:antialiased; }
.num, td.num, th.num { font-variant-numeric:tabular-nums; text-align:right; }
.muted { color:var(--muted); } .faint { color:var(--faint); }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
:focus-visible { outline:none; box-shadow:var(--focus); border-radius:6px; }
.eyebrow { font-size:12.5px; font-weight:600; color:var(--muted); }

/* Banner and frame: slim labelled sidebar on the left, compact top bar over the workspace */
.dev-banner { background:#17253B; color:#E2E8F0; font-size:12px; text-align:center; padding:5px 12px; }
.frame { display:grid; grid-template-columns:var(--side-w) minmax(0,1fr); grid-template-rows:var(--top-h) minmax(0,1fr); min-height:calc(100vh - 28px); }
/* Sidebar (owner, 09/11/2026): deep indigo, soft-white labels, pale-blue headings; the selected page is pale blue with
   dark-indigo text and a slim accent on its left edge. Same for every role (each still sees only its own pages). */
.side { --side-bg:#303B70; --side-ink:#F4F6FF; --side-head:#BCC7E8; --side-hover:#3E4A85; --side-sel:#E8EDFF;
  grid-row:1 / -1; grid-column:1; background:var(--side-bg); color:var(--side-ink); border-right:1px solid #262F5C; padding:16px 12px; position:sticky; top:0; height:100vh; overflow-y:auto; display:flex; flex-direction:column; gap:2px;
  scrollbar-color:#5A66A0 var(--side-bg); scrollbar-width:thin; }
/* Logo (owner, 09/11/2026): three tiles (violet, teal, lavender) with the lowercase "payroll / workspace" wordmark. */
.brand { display:flex; align-items:center; gap:11px; color:var(--side-ink); padding:6px 10px 20px; }
.brand svg { width:34px; height:34px; flex:none; }
.brand b { display:block; font-size:17px; font-weight:700; letter-spacing:-.01em; line-height:1.1; }
.brand span { display:block; font-size:13.5px; color:var(--side-head); line-height:1.2; }
.side a { position:relative; display:flex; align-items:flex-start; gap:10px; padding:8px 10px; border-radius:var(--r-sm); color:var(--side-ink); font-weight:500; font-size:14.5px; line-height:1.35; text-decoration:none; }
.side a .ico { margin-top:1px; }
.side a:hover { background:var(--side-hover); color:#fff; text-decoration:none; }
.side a:focus-visible { outline:2px solid #FFFFFF; outline-offset:2px; box-shadow:0 0 0 4px #7F8CC8; }
.side a.on { background:var(--side-sel); color:var(--side-bg); font-weight:600; }
.side a.on::before { content:''; position:absolute; left:0; top:6px; bottom:6px; width:3px; border-radius:0 3px 3px 0; background:var(--accent); }
.side a.on:hover { background:var(--side-sel); color:var(--side-bg); }
.side a span:not(.count) { flex:1; min-width:0; overflow-wrap:anywhere; }
.side .group { font-size:12px; font-weight:600; letter-spacing:.03em; color:var(--side-head); padding:16px 10px 4px; }
.side .count { font-size:12px; background:var(--warn-bg); color:var(--warn); border-radius:99px; padding:0 7px; font-weight:600; }
.side .side-bottom { margin-top:auto; padding-top:8px; }
.ico { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.topbar { grid-column:2; grid-row:1; display:flex; align-items:center; gap:12px; height:var(--top-h); padding:0 28px; background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; min-width:0; }
.period { display:inline-flex; align-items:center; gap:10px; height:38px; padding:0 12px; border:1px solid var(--line-strong); border-radius:var(--r); background:var(--panel); font-size:14px; color:var(--slate); white-space:nowrap; }
.period b { color:var(--ink); font-weight:600; }
.context { display:flex; gap:8px; align-items:center; min-width:0; }
.context label { font-size:13px; color:var(--muted); }
.context select { max-width:230px; }
.topbar .spacer { flex:1; }
.user { display:flex; align-items:center; gap:10px; color:var(--slate); font-size:14px; white-space:nowrap; }
.avatar { width:30px; height:30px; border-radius:50%; background:var(--accent-weak); color:var(--accent); display:inline-grid; place-items:center; font-size:12px; font-weight:700; }
main { grid-column:2; grid-row:2; padding:28px 32px 72px; min-width:0; max-width:1320px; }
/* Wide desktop monitors: use the extra width instead of leaving an empty strip on the right (laptops are unchanged). */
@media (min-width:1700px) { main { max-width:1840px; padding:28px 40px 72px; } }

/* Page header: title, short supporting text, main action beside it */
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:20px; }
.page-head h1 { font-size:28px; line-height:1.25; margin:0; font-weight:600; letter-spacing:-.015em; }
.page-head .sub { color:var(--muted); margin-top:4px; font-size:15px; max-width:820px; }
.actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.next-action { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.next-action .muted { font-size:13px; }
.next-why { margin:-8px 0 20px; color:var(--slate); }

/* Controls: primary (indigo), secondary (white, bordered), quiet (text), destructive (red, labelled) */
button, .btn { font:inherit; font-weight:500; font-size:14.5px; border:1px solid var(--line-strong); background:var(--panel); color:var(--ink); border-radius:var(--r); padding:0 16px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; text-decoration:none; height:40px; white-space:nowrap; }
button:hover, .btn:hover { background:var(--sunk); text-decoration:none; }
button.primary, .btn.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
button.primary:hover, .btn.primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
button.ghost { border-color:transparent; background:transparent; color:var(--accent); padding:0 10px; }
button.ghost:hover { background:var(--accent-weak); }
button.danger, .btn.danger { background:var(--panel); color:var(--bad); border-color:#F4C7C2; }
button.danger:hover, .btn.danger:hover { background:var(--bad-bg); }
button:disabled, .btn[aria-disabled=true] { opacity:.5; cursor:not-allowed; }
select, input[type=text], input[type=search], input[type=date], input[type=number], input:not([type]), textarea { font:inherit; font-size:14.5px; color:var(--ink); background:var(--panel); border:1px solid var(--line-strong); border-radius:var(--r); padding:0 12px; height:38px; }
textarea { height:auto; min-height:64px; resize:vertical; width:100%; line-height:1.45; padding:8px 12px; }
select { padding-right:28px; }
input:hover, select:hover, textarea:hover { border-color:var(--faint); }
input:focus, select:focus, textarea:focus { border-color:var(--accent); box-shadow:var(--focus); outline:none; }
input:disabled, select:disabled, textarea:disabled { background:var(--sunk); color:var(--muted); }
input.invalid, textarea.invalid { border-color:var(--bad); background:#FFF8F7; }
.check { display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; min-height:28px; }
.check input { appearance:none; width:18px; height:18px; border:1.5px solid var(--line-strong); border-radius:5px; background:var(--panel); display:inline-grid; place-content:center; margin:0; cursor:pointer; flex:none; }
.check input::after { content:""; width:9px; height:5px; border:2px solid #fff; border-top:0; border-right:0; transform:rotate(-45deg) translate(1px,-1px); opacity:0; }
.check input:checked { background:var(--accent); border-color:var(--accent); }
.check input:checked::after { opacity:1; }
.check input:disabled { opacity:.5; cursor:not-allowed; }
/* A checkbox inside a form grid or a wide field keeps its size (the grid's full-width input rule is for text fields). */
.form-grid .check input[type="checkbox"], .field.wide .check input[type="checkbox"] { width:18px; min-width:18px; }
.seg { display:inline-flex; border:1px solid var(--line-strong); border-radius:var(--r); overflow:hidden; height:38px; flex:none; }
.seg button { border:0; border-radius:0; height:36px; padding:0 12px; font-weight:500; font-size:14px; color:var(--slate); background:var(--panel); }
.seg button + button { border-left:1px solid var(--line-strong); }
.seg button.on { background:var(--accent-weak); color:var(--accent); font-weight:600; }
.seg .n { color:var(--muted); font-weight:400; }

/* Surfaces */
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); }
.card + .card, .card + .quiet-cols, .kpis + .card { margin-top:16px; }
.card-head { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.card-head h2 { font-size:17px; margin:0; font-weight:600; }
.card-body { padding:16px; }
.metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:0; margin-bottom:16px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); }
.metric { padding:14px 18px; }
.metric + .metric { border-left:1px solid var(--line); }
.metric .k { font-size:13px; color:var(--muted); }
.metric .v { font-size:22px; font-weight:600; margin-top:2px; font-variant-numeric:tabular-nums; }
.metric .s { font-size:13px; color:var(--muted); margin-top:2px; font-variant-numeric:tabular-nums; }
.assure { display:grid; grid-template-columns:1fr 1fr; gap:0; margin-bottom:16px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); }
.kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); background:var(--panel); border:1px solid var(--line); border-radius:var(--r); margin-bottom:20px; }
.kpis > div { padding:16px 20px; } .kpis > div + div { border-left:1px solid var(--line); }
.kpis .k { font-size:13px; color:var(--muted); } .kpis .v { font-size:24px; font-weight:600; font-variant-numeric:tabular-nums; margin:2px 0; } .kpis .s { font-size:13px; }
.quiet-cols { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; margin-top:16px; }
.quiet-cols .card + .card { margin-top:0; }
.plain-list { list-style:none; margin:0; padding:0; font-size:14px; }
.plain-list li { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid #EDF1F5; }
.plain-list li:last-child { border-bottom:0; }

/* Status labels: words always, colour as support */
.chip { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500; padding:0 10px; border-radius:99px; white-space:nowrap; background:var(--info-bg); color:var(--info); line-height:24px; }
.chip::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.chip.good { background:var(--good-bg); color:var(--good); } .chip.warn { background:var(--warn-bg); color:var(--warn); }
.chip.bad { background:var(--bad-bg); color:var(--bad); } .chip.new { background:var(--new-bg); color:var(--new); }
.chip.plain { background:#EEF2F6; color:#475569; }
.dot { width:7px; height:7px; border-radius:50%; background:var(--warn); display:inline-block; vertical-align:middle; }

/* Tables: fine separators, sticky header, right-aligned tabular numbers */
.table-wrap { overflow-x:auto; }
table.data { width:100%; border-collapse:separate; border-spacing:0; font-size:14.5px; }
table.data th { position:sticky; top:0; background:var(--sunk); font-size:12.5px; font-weight:600; color:var(--muted); text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); white-space:nowrap; z-index:1; }
table.data th .u { display:block; font-weight:400; font-size:11.5px; color:var(--faint); }
table.data td { padding:10px 14px; border-bottom:1px solid #EDF1F5; vertical-align:middle; white-space:nowrap; }
table.data tr:last-child td { border-bottom:0; }
table.data tr.link { cursor:pointer; }
table.data tr.link:hover td { background:var(--row-hover); }
table.data td.wrap { white-space:normal; min-width:220px; }
.name-cell b { font-weight:600; } .name-cell .id { color:var(--muted); font-size:12.5px; margin-left:6px; }
.empty { padding:36px 20px; text-align:center; color:var(--muted); }
.empty b { display:block; color:var(--ink); font-size:16px; margin-bottom:4px; }
.known { display:block; font-size:11.5px; color:var(--warn); font-weight:500; }
.def { font-size:13px; color:var(--muted); margin:0; padding:12px 16px; border-top:1px solid var(--line); }

/* Home */
.progress { height:6px; background:#EEF2F6; border-radius:99px; overflow:hidden; margin-top:6px; width:110px; display:block; }
.progress span { display:block; height:100%; background:var(--accent); }
.week-cell { all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:8px 10px; border-radius:var(--r-sm); min-width:120px; }
.week-cell:hover { background:var(--row-hover); }
.week-cell:focus-visible { box-shadow:var(--focus); }
.week-cell .meta { font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.week-cell.sel { box-shadow:inset 0 0 0 1.5px var(--accent-line); background:var(--accent-weak); }
table.progress-t td { padding:6px 10px; }
tr.co-row th, tr.co-head th, tbody.cogrp th { background:var(--panel); text-align:left; font-size:12.5px; font-weight:700; color:var(--muted); letter-spacing:.02em; text-transform:uppercase; padding:16px 14px 6px; border-bottom:0; position:static; }
.steps { display:flex; gap:6px; flex-wrap:wrap; font-size:13px; color:var(--muted); }
.steps span { padding:3px 10px; border-radius:99px; background:#EEF2F6; }
.steps span.on { background:var(--accent-weak); color:var(--accent); font-weight:600; }
.next { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.next b { font-size:15px; }

/* Import */
.stepper { display:flex; gap:24px; margin-bottom:16px; font-size:14px; color:var(--muted); flex-wrap:wrap; }
.stepper div { display:flex; align-items:center; gap:8px; }
.stepper i { font-style:normal; width:24px; height:24px; border-radius:50%; display:inline-grid; place-items:center; border:1.5px solid var(--line-strong); font-size:12.5px; font-weight:600; color:var(--muted); }
.stepper .on { color:var(--ink); font-weight:600; } .stepper .on i { border-color:var(--accent); color:var(--accent); background:var(--accent-weak); }
.stepper .done i { background:var(--good-bg); border-color:transparent; color:var(--good); }
.drop { border:1.5px dashed var(--line-strong); border-radius:var(--r); background:var(--sunk); padding:28px; text-align:center; }
.drop.over { border-color:var(--accent); background:var(--accent-weak); }
.drop b { display:block; font-size:16px; margin-bottom:4px; }
.drop .or { display:flex; gap:10px; justify-content:center; margin-top:14px; }
.file-line { display:flex; align-items:center; gap:10px; margin-top:12px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r); background:var(--panel); }
details.paste summary { cursor:pointer; color:var(--accent); font-size:14px; margin-top:12px; font-weight:500; }
details.paste textarea { margin-top:8px; min-height:110px; font-family:Consolas, monospace; font-size:12.5px; }
/* Messages: a page-level banner only for an issue affecting the page; otherwise beside the item */
.callout { border-radius:var(--r); padding:12px 14px; font-size:14px; margin:12px 0; display:flex; gap:10px; border:1px solid transparent; }
.callout.warn { background:#FFFBEB; border-color:#FDE68A; color:#78350F; } .callout.bad { background:#FEF3F2; border-color:#FECDCA; color:#912018; }
.callout.good { background:#F0FDF4; border-color:#BBF7D0; color:var(--good); } .callout.info { background:var(--accent-weak); border-color:var(--accent-line); color:var(--ink); }
.callout ul { margin:4px 0 0; padding-left:18px; }

/* Toolbars: search and filters together */
.toolbar { display:flex; gap:8px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
.toolbar.in-card { margin:0; padding:12px 16px; border-bottom:1px solid var(--line); }
.toolbar input[type=search] { width:260px; }
.toolbar .hint { color:var(--muted); font-size:13px; margin-left:auto; }
table.weekly-t td.go { color:var(--accent); font-weight:500; text-align:right; }
table.weekly-t th.day .u { display:block; }
table.weekly-t .progress { width:60px; }
table.weekly-t th, table.weekly-t td { padding-left:9px; padding-right:9px; }
table.weekly-t td.name-cell { white-space:normal; min-width:150px; max-width:210px; }
table.weekly-t td.name-cell .id { display:block; margin-left:0; }
table.weekly-t td.name-cell .chip { margin-top:2px; }
table.weekly-t td.day { min-width:46px; }
table.weekly-t td .chip { white-space:normal; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
td.day { text-align:center; min-width:52px; color:var(--slate); font-variant-numeric:tabular-nums; }
td.day.off { color:#CBD5E1; }
th.day { text-align:center; }

/* Employee Review */
.emp-bar { position:sticky; top:var(--top-h); z-index:10; background:var(--bg); padding:12px 0; margin:-12px 0 8px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.emp-bar .who { margin-right:auto; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.emp-bar .who h1 { font-size:24px; margin:0; font-weight:600; }
.emp-bar .who .id { color:var(--muted); }
.summary { display:grid; grid-template-columns:1.1fr 2.2fr 1.3fr; gap:0; margin:16px 0; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); }
.summary .metric { border:0; } .summary .metric + .metric { border-left:1px solid var(--line); }
.summary .metric .v small { font-size:13px; color:var(--muted); font-weight:500; margin-left:6px; }
.comp { display:flex; gap:20px; margin-top:6px; flex-wrap:wrap; }
.comp div { font-size:12.5px; color:var(--muted); } .comp b { display:block; font-size:15px; color:var(--ink); font-variant-numeric:tabular-nums; }
.review-grid { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(330px,1fr); gap:16px; align-items:start; }
table.days { table-layout:fixed; width:100%; }
table.days col.d-chk { width:30px; } table.days col.d-day { width:12%; } table.days col.d-src { width:21%; } table.days col.d-flag { width:11%; }
table.days td.num { white-space:nowrap; overflow-wrap:normal; font-size:13.5px; }
table.days th.num { overflow-wrap:normal; word-break:normal; hyphens:auto; }
table.days td, table.days th { padding:8px 4px; font-size:14px; }
table.days th { white-space:normal; vertical-align:bottom; font-size:12px; padding-left:2px; padding-right:2px; }
table.days td { white-space:normal; overflow-wrap:anywhere; }
table.days td.src .rc { display:block; white-space:nowrap; font-variant-numeric:tabular-nums; } table.days td.src .rc.clk { color:var(--muted); font-size:12.5px; }
table.days td .chip { white-space:normal; border-radius:10px; line-height:16px; padding:2px 7px; }
table.days td:first-child, table.days th:first-child { padding-left:12px; }
table.days tr.sel td { background:var(--accent-weak); }
table.days tr.sel td:first-child { box-shadow:inset 3px 0 0 var(--accent); }
table.days tr.rest td { color:var(--faint); }
table.days td.pay { font-weight:600; color:var(--ink); }
table.days .src { color:var(--slate); font-size:13px; }
.adj-pos { color:var(--good); } .adj-neg { color:var(--bad); }
/* The selected-day panel: pale blue, white inputs */
/* The day panel is part of the page: no scroll area of its own (no nested scrollbars). */
.detail { position:static; }
.detail .field input, .detail textarea, .detail select { background:#fff; }
.card.detail { background:var(--accent-weak); border-color:var(--accent-line); }
.card.detail .card-head { border-bottom-color:var(--accent-line); }
.facts { display:grid; grid-template-columns:repeat(2,1fr); gap:8px 14px; margin-bottom:12px; }
.facts div { font-size:12.5px; color:var(--muted); } .facts b { display:block; font-size:14px; color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.section { border-top:1px solid var(--accent-line); padding-top:12px; margin-top:12px; }
.card:not(.detail) .section { border-top-color:var(--line); }
.section h3 { font-size:14px; color:var(--ink); margin:0 0 8px; font-weight:600; }
.field { display:grid; grid-template-columns:1fr auto; gap:4px 10px; align-items:center; margin-bottom:10px; }
.field label { font-weight:500; font-size:14px; }
.field .help { grid-column:1 / -1; font-size:12.5px; color:var(--muted); margin-top:-2px; }
.field .ctl { display:flex; gap:6px; align-items:center; }
.field .ctl input { width:88px; text-align:right; font-variant-numeric:tabular-nums; }
.field .ctl .seg { height:32px; } .field .ctl .seg button { height:30px; font-size:13px; padding:0 8px; }
.field.wide { grid-template-columns:1fr; } .field.wide input { width:100%; }
.result { background:var(--panel); border:1px solid var(--accent-line); border-radius:var(--r); padding:10px 12px; font-size:14px; font-variant-numeric:tabular-nums; }
.result b { font-size:16px; }
.query { border:1px solid var(--line); border-radius:var(--r); padding:12px; margin-bottom:10px; background:var(--panel); }
.query.private { background:var(--panel); border-style:dashed; }
.query .row { display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:8px; font-size:14px; }
.query .reply { margin-top:8px; font-size:14px; background:var(--sunk); border-radius:var(--r-sm); padding:8px 10px; }
.query .reply .lab { font-size:12px; font-weight:600; color:var(--muted); }
.checklist { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.checklist .item { border:1px solid var(--line); border-radius:var(--r); padding:12px; background:var(--panel); }
.checklist .item .t { font-weight:600; font-size:14px; display:flex; align-items:center; gap:8px; }
.checklist .item .d { font-size:13px; color:var(--muted); margin-top:4px; }
.checklist .item.ok { border-color:#BBF7D0; background:#F0FDF4; }

/* Saving: discreet, never covering the workspace */
.save { position:fixed; right:20px; bottom:16px; padding:6px 12px; border-radius:var(--r); background:var(--panel); border:1px solid var(--line); font-size:13px; box-shadow:0 4px 12px rgba(23,37,59,.08); z-index:50; }
.save.saving { color:var(--muted); } .save.saved { color:var(--good); } .save.error { color:var(--bad); border-color:#FECDCA; background:#FEF3F2; }

/* Sign-in */
.signin { max-width:440px; margin:12vh auto; padding:0 16px; }
.signin h1 { font-size:26px; margin:12px 0 4px; font-weight:600; }
.signin .user-btn { display:flex; width:100%; justify-content:space-between; height:auto; padding:12px 14px; margin:8px 0; }
.signin .user-btn small { color:var(--muted); font-weight:500; }

/* Startup and problems that stop a page */
.boot { max-width:560px; margin:14vh auto; padding:18px 20px; text-align:center; color:var(--muted); }
.boot.failed, .fatal { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); color:var(--ink); text-align:left; }
.boot.failed b, .fatal h1 { display:block; font-size:18px; margin:0 0 6px; color:var(--bad); }
.boot.failed div, .fatal p { margin:0 0 8px; }
.boot.failed button, .fatal button { margin-top:6px; margin-right:6px; }
.fatal { max-width:560px; margin:12vh auto; padding:18px 20px; }
.fatal code { font-size:12px; color:var(--muted); }

/* Combined payroll and Salaries: summary, grouped table, side panel */
.cards3 { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:0; margin-bottom:16px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); }
.sumcard { background:transparent; border:0; border-radius:0; padding:16px 20px; text-align:left; font:inherit; color:inherit; height:auto; display:block; }
.cards3 > .sumcard + .sumcard { border-left:1px solid var(--line); }
.sumcard .k { font-size:13px; color:var(--muted); font-weight:500; }
.sumcard .v { font-size:24px; font-weight:600; margin:2px 0; font-variant-numeric:tabular-nums; }
.sumcard .v.small { font-size:20px; }
.sumcard .sub { font-size:13px; color:var(--muted); line-height:1.45; white-space:normal; }
.sumcard.total { background:transparent; }
.sumcard .split { display:flex; gap:18px; margin:2px 0 6px; font-size:14px; color:var(--slate); flex-wrap:wrap; } .sumcard .split b { color:var(--ink); }
button.sumcard.attn { cursor:pointer; width:100%; border-radius:0 var(--r) var(--r) 0; }
button.sumcard.attn:hover { background:var(--row-hover); }
button.sumcard.attn.on { background:var(--accent-weak); box-shadow:inset 0 -2px 0 var(--accent); }
button.sumcard.attn .v { color:var(--warn); }
.reason-wrap { padding:12px 16px 0; border-bottom:1px solid var(--line); }
.reasons { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 8px; }
.reasons button { height:32px; padding:0 12px; border-radius:99px; font-size:13.5px; }
.reasons button .n { display:inline-block; min-width:18px; margin-left:4px; padding:0 6px; border-radius:99px; background:#EEF2F6; color:var(--slate); font-weight:600; }
.reasons button.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.reasons button.on .n { background:rgba(255,255,255,.2); color:#fff; }
.reason-how { margin:0 0 12px; color:var(--slate); font-size:14px; max-width:900px; }
details.how { margin:12px 0; font-size:14px; }
details.how summary { cursor:pointer; color:var(--accent); font-weight:500; }
details.how dl { display:grid; grid-template-columns:200px 1fr; gap:4px 14px; margin:8px 0 0; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:12px 16px; }
details.how dt { font-weight:600; } details.how dd { margin:0; color:var(--slate); }
.na { color:var(--muted); font-style:italic; font-size:13px; }

/* D69 Combined Payroll: the macro's 24 columns A-X. Carehome and Name are left-aligned and stay visible when the table
   scrolls sideways; numbers are centred; Rota and Actuals weeks collapse (not drawn) and expand independently. */
.comb24-wrap { overflow-x:auto; max-width:100%; }
table.comb24 { border-collapse:separate; border-spacing:0; width:100%; }
table.comb24 td .na, table.comb24 td .muted { white-space:normal; display:inline-block; max-width:96px; line-height:1.25; }
table.comb24 tr.grp-cols th { white-space:normal; }
table.comb24.wide { min-width:1600px; }
table.comb24 th, table.comb24 td { padding:8px 7px; font-size:14px; white-space:nowrap; text-align:center; border-bottom:1px solid var(--line); }
table.comb24 .c-home, table.comb24 .c-name { text-align:left; position:sticky; z-index:2; background:var(--panel); }
table.comb24 .c-home { left:0; width:165px; min-width:165px; max-width:165px; overflow:hidden; text-overflow:ellipsis; font-weight:400; color:var(--slate); }
table.comb24 tbody th, table.comb24 tfoot th { text-transform:none; letter-spacing:normal; font-size:14px; }
table.comb24 .c-name { left:165px; width:175px; min-width:175px; max-width:175px; overflow:hidden; text-overflow:ellipsis; font-weight:600; box-shadow:inset -1px 0 0 var(--line-strong); }
table.comb24 thead th { font-size:12.5px; font-weight:600; color:var(--slate); background:var(--sunk); white-space:normal; vertical-align:bottom; }
table.comb24 thead .c-home, table.comb24 thead .c-name { z-index:3; background:var(--sunk); vertical-align:bottom; }
table.comb24 tr.grp-cols th { font-size:12px; text-transform:none; border-bottom:2px solid var(--line-strong); }
table.comb24 tr.grp-cols th.g-rota, table.comb24 tr.grp-cols th.g-act { background:var(--accent-weak); }
table.comb24 tr.grp-cols th.g-pay { background:#e9f4ee; } table.comb24 tr.grp-cols th.g-rate { background:#fdf6e3; }
table.comb24 .grp-toggle { font-size:12.5px; font-weight:600; padding:2px 8px; color:var(--accent); }
/* section separation: a stronger rule before each block (Rota, Actuals, hours, rates, payment) */
table.comb24 th.c-tot, table.comb24 td.c-tot { font-weight:700; background:#eef4f9; }
table.comb24 td.c-paytot, table.comb24 th.c-paytot { font-weight:700; background:#e9f4ee; }
table.comb24 td.c-in { background:#fffaf0; }
table.comb24 td.w1, table.comb24 th.w1 { background:#f3f8fb; } table.comb24 td.w2, table.comb24 th.w2 { background:#f2f8f4; }
table.comb24 td.w3, table.comb24 th.w3 { background:#f5f5fa; } table.comb24 td.w4, table.comb24 th.w4 { background:#fbf8f1; }
table.comb24 tr.col-heads th.c-tot, table.comb24 tr.col-heads th.c-paytot { background:var(--sunk); }
table.comb24 .c-tot { box-shadow:inset 1px 0 0 var(--line-strong); }
table.comb24 tr.col-heads th:nth-child(1), table.comb24 td.c-hrs:first-of-type { box-shadow:none; }
/* care-home tint (as the macro's Carehome column) and a rule under each home's last row */
table.comb24 th.t0 { background:#e8eff6; } table.comb24 th.t1 { background:#ebf1e7; } table.comb24 th.t2 { background:#f3ebf4; }
table.comb24 th.t3 { background:#f9f0e3; } table.comb24 th.t4 { background:#e7f2f0; } table.comb24 th.t5 { background:#f0edf7; } table.comb24 th.tho { background:#eeeeee; }
table.comb24 tr.home-end > * { border-bottom:2px solid #352736; }
table.comb24 tr.co-head th { text-align:left; position:static; background:var(--panel); padding:14px 10px 6px; }
table.comb24 tr.co-head th span { position:sticky; left:10px; font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--ink); }
table.comb24 tr.cline { cursor:pointer; }
table.comb24 tr.cline:hover > * { background-color:var(--row-hover); }
table.comb24 tr.cline.sel > * { background-color:var(--accent-weak); }
table.comb24 tr.cline.sel > .c-home { box-shadow:inset 3px 0 0 var(--accent); }
table.comb24 .attn-dot { color:var(--warn, #b7791f); font-size:10px; vertical-align:middle; }
table.comb24 td .na, table.comb24 td .muted { font-size:12.5px; }
table.comb24 tfoot tr.tot-row > * { background:#1e3346; color:#fff; font-weight:700; border-bottom:none; }
table.comb24 tfoot tr.tot-row .sub { color:#d7e0e8; font-weight:400; }
/* D70 Reports, workspace layout (D72): selection, toolbar, status line, up to three figures, main report, supporting detail */
/* Page tabs in Reports and Settings (owner, 09/11/2026): open underline tabs instead of a boxed button strip.
   The selected tab has indigo text and a slim indigo bar; small segmented filters (.seg) keep their own look. */
.seg.rep-tabs { display:flex; flex-wrap:wrap; gap:4px; height:auto; margin:0 0 18px; border:0; border-bottom:1px solid var(--line); border-radius:0; overflow:visible; background:none; }
.seg.rep-tabs button { position:relative; height:44px; padding:0 14px; margin-bottom:-1px; border:0; border-radius:8px 8px 0 0; background:none; color:var(--muted); font-weight:500; font-size:14.5px; cursor:pointer; transition:color .15s, background .15s; }
.seg.rep-tabs button + button { border-left:0; }
.seg.rep-tabs button:hover { color:var(--ink); background:var(--accent-weak); }
.seg.rep-tabs button.on { color:var(--accent); font-weight:600; background:none; }
.seg.rep-tabs button.on::after { content:''; position:absolute; left:10px; right:10px; bottom:0; height:3px; border-radius:3px 3px 0 0; background:linear-gradient(90deg, #6366F1, var(--accent)); }
.seg.rep-tabs button:focus-visible { box-shadow:var(--focus); }
#rep-msg { font-size:13.5px; margin:-14px 0 10px; text-align:right; min-height:1px; }
.rep-ws { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px 18px; min-width:0; }
.rep-ws > h2 { margin:0 0 12px; font-size:18px; }
.rep-bar { display:flex; flex-wrap:wrap; gap:10px 12px; align-items:flex-end; }
.rf { display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--slate); min-width:0; position:relative; }
.rf > select, .rf > input { width:216px; }
.rf.rf-q > input { width:200px; }
/* Period selectors show the full dates, e.g. "07/12/2026 to 03/01/2027 (working, live)", never cut off. */
.rf > select[data-d=period], .rf > select[data-d=current], .rf > select[data-d=previous] { width:auto; min-width:216px; max-width:none; }
.rf-chk { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink); white-space:nowrap; }
.rf-pop > summary, .rf-multi > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; height:38px; padding:0 12px; border:1px solid var(--line-strong); border-radius:var(--r); background:var(--panel); font-size:14.5px; color:var(--ink); white-space:nowrap; }
.rf-multi > summary { width:216px; overflow:hidden; }
.rf-pop > summary::-webkit-details-marker, .rf-multi > summary::-webkit-details-marker, details.rep-sup > summary::-webkit-details-marker { display:none; }
.rf-pop > summary::after, .rf-multi > summary::after { content:'▾'; color:var(--muted); font-size:11px; margin-left:auto; }
.rf-pop[open] > summary, .rf-multi[open] > summary { border-color:var(--accent); box-shadow:var(--focus); }
.rf .pop { position:absolute; top:calc(100% + 6px); left:0; z-index:30; background:var(--panel); border:1px solid var(--line-strong); border-radius:var(--r); box-shadow:0 10px 28px rgba(15,23,42,.14); padding:14px; display:grid; gap:12px; min-width:250px; }
.rf .pop .rf > select, .rf .pop .rf > input { width:240px; }
.rf .pop .small { font-size:12.5px; margin:0; }
.rf-pop .count { background:var(--accent); color:#fff; border-radius:99px; font-size:12px; font-weight:600; padding:0 7px; line-height:20px; }
.rep-bar .acts { display:flex; gap:6px; align-items:center; }
.rep-busy { font-size:13px; color:var(--muted); align-self:center; margin-top:18px; }
.rep-chips { display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; margin:10px 0 0; }
button.fchip { height:28px; padding:0 10px; font-size:13px; border-radius:99px; background:var(--accent-weak); border-color:var(--accent-line); color:var(--accent); gap:6px; }
button.fchip:hover { background:var(--accent-line); }
.rep-pending { font-size:13px; color:var(--warn); font-weight:500; }
.rep-status { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:12px 0 0; padding:10px 0 0; border-top:1px solid var(--line); font-size:14px; color:var(--slate); }
.rep-status .sep { color:var(--faint); }
.rep-hist { font-size:13px; background:var(--warn-bg, #FFF7E6); color:var(--warn); border-radius:99px; padding:0 10px; line-height:24px; }
.rep-status .rep-dtl { margin-left:auto; height:30px; font-size:13.5px; }
.rep-dl dl { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:5px 16px; margin:10px 0 0; font-size:13.5px; }
.rep-dl dt { color:var(--muted); } .rep-dl dd { margin:0; overflow-wrap:anywhere; }
.rep-note { margin:10px 0 0; padding:8px 12px; font-size:13.5px; }
.rep-kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); margin:12px 0 0; border:1px solid var(--line); border-radius:var(--r); }
.rep-kpis .kpi { padding:10px 16px; min-width:0; } .rep-kpis .kpi + .kpi { border-left:1px solid var(--line); }
.kpi .k { font-size:12.5px; color:var(--muted); } .kpi .v { font-size:20px; font-weight:600; font-variant-numeric:tabular-nums; margin:1px 0; }
.kpi .v.na-v { font-size:15px; font-weight:500; color:var(--slate); line-height:28px; } .kpi .s { font-size:12.5px; color:var(--muted); }
.rep-checks { margin:10px 0 0; font-size:13.5px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.rep-main { margin:14px 0 0; min-width:0; } .rep-main.stale { opacity:.55; transition:opacity .12s; }
.rep-sec { margin-bottom:14px; }
.rep-main .rep-sec:last-child { margin-bottom:0; }
.rep-sec .card-head h3 { margin:0; font-size:15px; }
.rep-empty { padding:16px; font-size:14px; }
.rep-sup-list { margin:16px 0 0; }
.rep-sup-h { font-size:13px; font-weight:600; color:var(--muted); margin:0 0 2px; text-transform:uppercase; letter-spacing:.04em; }
details.rep-sup { border-top:1px solid var(--line); }
details.rep-sup > summary { display:flex; gap:10px; align-items:center; padding:10px 2px; cursor:pointer; list-style:none; font-weight:600; font-size:14.5px; flex-wrap:wrap; }
details.rep-sup > summary::before { content:'▸'; color:var(--muted); font-size:12px; width:10px; } details.rep-sup[open] > summary::before { content:'▾'; }
details.rep-sup .tag { font-weight:500; font-size:12.5px; color:var(--slate); background:var(--sunk); border:1px solid var(--line); border-radius:99px; padding:0 8px; line-height:22px; }
details.rep-sup .muted { font-weight:400; font-size:13px; margin-left:auto; }
.rep-sup-body { padding:0 0 12px; min-width:0; }
.rep-none { margin:0; padding:10px 2px 10px 22px; font-size:13.5px; color:var(--muted); border-top:1px solid var(--line); }
table.comb24 th.c-sub { position:sticky; left:0; z-index:2; text-align:left; white-space:normal; width:340px; min-width:340px; max-width:340px; box-shadow:inset -1px 0 0 var(--line-strong); }
table.sticky-head thead { position:relative; z-index:4; }
table.sticky-head thead.stuck th { box-shadow:inset 0 -1px 0 var(--line-strong); }
dialog.rep-dlg { border:1px solid var(--line-strong); border-radius:12px; padding:20px 22px; width:min(540px, calc(100vw - 32px)); box-shadow:0 20px 48px rgba(15,23,42,.25); color:var(--ink); }
dialog.rep-dlg::backdrop { background:rgba(15,23,42,.35); }
dialog.rep-dlg h2 { margin:0 0 4px; font-size:18px; }
dialog.rep-dlg fieldset { border:0; padding:0; margin:14px 0; display:grid; gap:8px; }
dialog.rep-dlg legend { font-size:12.5px; margin-bottom:6px; }
.rep-radio { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r); cursor:pointer; font-size:14px; }
.rep-radio:has(input:checked) { border-color:var(--accent); background:var(--accent-weak); }
.rep-radio small { display:block; color:var(--muted); font-size:12.5px; }
.dlg-acts { display:flex; justify-content:flex-end; gap:8px; }
.rep-export { display:flex; gap:8px; align-items:center; }
/* Settings (D71): same workspace pattern as Reports */
.set-ws h2.set-h { margin:0 0 10px; font-size:18px; }
.set-bar { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.set-bar .set-h { margin:0; } .set-bar .spacer { flex:1; }
table.set-users td { vertical-align:middle; }
.set-detail { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px 24px; padding:6px 4px; }
.set-detail h3 { margin:0 0 6px; font-size:14.5px; } .set-detail .set-eff { grid-column:1 / -1; }
.set-role { display:flex; align-items:center; gap:6px; font-size:14px; }
.set-add { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:8px; }
.set-acts { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; align-items:center; }
.set-fm { margin-top:16px; padding-top:12px; border-top:1px solid var(--line); }
.set-fm h3 { margin:0 0 6px; font-size:15px; }
.muted.small, .small { font-size:12.5px; }
table.set-matrix td { font-size:13.5px; vertical-align:top; } table.set-matrix td.n { text-align:center; padding-top:14px; white-space:nowrap; }
table.set-matrix th:first-child, table.set-matrix td:first-child { min-width:250px; }
table.set-matrix th.n, table.set-matrix td.n { padding-left:6px; padding-right:6px; }
/* Access levels (0044): a coloured level pill with a dropdown per permission and role (owner chose option B). */
select.lvl-pick { appearance:none; -webkit-appearance:none; height:30px; min-width:118px; padding:0 30px 0 14px; border-radius:99px; border:1px solid transparent;
  font-size:13px; font-weight:600; cursor:pointer; background-repeat:no-repeat; background-position:right 11px center; background-size:12px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23475569' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
select.lvl-pick:hover { border-color:var(--line-strong); }
select.lvl-pick:focus { box-shadow:var(--focus); outline:none; }
select.lvl-pick option { background:var(--panel); color:var(--ink); font-weight:500; }
.lvl-pick.lv-none, .lvl-pill.lv-none { background-color:#F1F5F9; color:#475569; }
.lvl-pick.lv-view, .lvl-pill.lv-view { background-color:#E6F1FB; color:#0C447C; }
.lvl-pick.lv-edit, .lvl-pill.lv-edit { background-color:#FAEEDA; color:#633806; }
.lvl-pick.lv-approve, .lvl-pill.lv-approve { background-color:#EAF3DE; color:#27500A; }
.lvl-pill { display:inline-block; font-size:12px; font-weight:600; padding:1px 10px; border-radius:99px; line-height:22px; }
details.lvl-more { margin-top:6px; font-size:12.5px; } details.lvl-more summary { color:var(--accent); cursor:pointer; }
.lvl-help { display:flex; gap:8px; align-items:baseline; margin:4px 0; color:var(--slate); } .lvl-help .lvl-pill { flex:none; min-width:62px; text-align:center; }
.set-sub { margin:16px 0 4px; font-size:15px; } ul.set-fmonly { margin:4px 0 8px; padding-left:20px; columns:2; font-size:13.5px; }
dialog.rep-dlg .rf { margin:8px 0; } dialog.rep-dlg .rf > input, dialog.rep-dlg .rf > select, dialog.rep-dlg textarea { width:100%; }
dialog.rep-dlg textarea { font:inherit; font-size:14.5px; border:1px solid var(--line-strong); border-radius:var(--r); padding:8px 12px; }
.set-temp .set-pw { display:flex; gap:10px; align-items:center; margin:8px 0; }
.set-temp code { font-size:20px; letter-spacing:.06em; padding:6px 12px; background:var(--panel); border:1px solid var(--line-strong); border-radius:var(--r); user-select:all; }
@media (max-width:900px) { .set-detail { grid-template-columns:1fr; } }
table.rep-t th, table.rep-t td { white-space:normal; vertical-align:top; }
table.rep-t th.n, table.rep-t td.n { text-align:center; }
table.rep-t td.n { white-space:nowrap; } /* an amount such as −£277.60 never splits across lines */
table.rep-t tr.tot td { font-weight:700; } table.rep-t tr.shade td { background:var(--sunk); }
table.rep-t tr.link { cursor:pointer; } table.rep-t tr.link:hover td { background:var(--row-hover); }
table.rep-t .exp-mark { color:var(--muted); font-size:12px; }
table.rep-t tr.rep-open td { background:var(--sunk); }
ul.rep-detail { margin:4px 0; padding-left:18px; font-size:13.5px; } ul.rep-detail ul { margin:2px 0; padding-left:18px; }
details.rep-more { margin:0 0 14px; } details.rep-more > summary { cursor:pointer; padding:8px 0; font-weight:600; }
table.comb24 tr.sub-row > * { font-weight:700; background:#eef4f9; }
.bars { padding:8px 16px 12px; display:grid; gap:6px; }
.bar-row { display:grid; grid-template-columns:200px 1fr 200px; align-items:center; gap:10px; font-size:13px; }
.bar-l { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-track { display:flex; flex-direction:column; gap:2px; }
.bar { display:block; height:9px; border-radius:3px; min-width:1px; } .bar.prev, .key.prev { background:#9fadbd; } .bar.cur, .key.cur { background:#1e3346; }
.key { display:inline-block; width:12px; height:9px; border-radius:2px; vertical-align:middle; }
.bar-v { display:flex; flex-direction:column; font-size:12.5px; text-align:right; }
.trend { padding:8px 16px 12px; } .trend svg { width:100%; max-width:720px; height:auto; }
ul.legend { list-style:none; display:flex; flex-wrap:wrap; gap:6px 16px; padding:0; margin:6px 0 0; font-size:12.5px; }
ul.legend span { display:inline-block; width:12px; height:3px; margin-right:6px; vertical-align:middle; }
@media (max-width:760px) { .bar-row { grid-template-columns:120px 1fr 110px; } }
table.comb2 { table-layout:fixed; }
table.comb2 col.c-emp { width:30%; } table.comb2 col.c-status { width:170px; }
table.comb2 td, table.comb2 th { padding:10px 14px; font-size:14.5px; }
table.comb2 thead th { font-size:12.5px; white-space:normal; vertical-align:bottom; }
table.comb2 td.emp { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
table.comb2 td.emp > span { display:inline-flex; flex-direction:column; vertical-align:middle; min-width:0; }
table.comb2 td.emp .id { margin-left:0; font-size:12.5px; color:var(--muted); }
table.comb2 td.home { color:var(--slate); white-space:normal; }
table.comb2 .sub { font-size:12.5px; color:var(--muted); font-weight:400; margin-top:2px; white-space:normal; }
table.comb2 td.status { white-space:normal; }
table.comb2 button.exp, table.data button.exp { width:28px; height:28px; padding:0; margin-right:8px; vertical-align:middle; color:var(--muted); font-size:14px; border:1px solid transparent; border-radius:var(--r-sm); background:transparent; }
table.comb2 button.exp:hover, table.data button.exp:hover { border-color:var(--line-strong); color:var(--accent); background:var(--panel); }
table.comb2 tr.cline { cursor:pointer; }
table.comb2 tr.cline:hover td { background:var(--row-hover); }
table.comb2 tr.cline.sel td { background:var(--accent-weak); }
table.comb2 tr.cline.sel td:first-child { box-shadow:inset 3px 0 0 var(--accent); }
table.comb2 tr.cline.open td { border-bottom-color:transparent; }
tbody.grp tr.grp-head th, tbody.grp tr.grp-head td { background:#FBFCFD; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding-top:10px; padding-bottom:10px; font-size:14px; color:var(--ink); font-weight:600; }
tbody.grp tr.grp-head th { text-align:left; position:static; white-space:normal; }
tbody.grp tr.grp-head .sub, tbody.grp tr.grp-head .known { font-weight:400; }
tbody.grp .gname { color:var(--ink); font-size:14.5px; }
tbody.grp .gmeta { margin-left:8px; color:var(--muted); font-weight:400; font-size:13px; }
tr.wkrow > td { background:#FBFCFD; padding:4px 16px 14px 56px; white-space:normal; }
/* Four-week cards: the pale blue of the selected sidebar item, fine borders, dark text */
.wkgrid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; font-size:13.5px; }
.wkcard { border:1px solid var(--accent-line); border-radius:var(--r-sm); background:var(--accent-weak); padding:8px 10px; color:var(--ink); min-width:0; }
.wkcard .w { display:flex; justify-content:space-between; gap:8px; font-size:12.5px; color:var(--muted); margin-bottom:2px; }
.wkcard .v { display:flex; justify-content:space-between; gap:8px; font-variant-numeric:tabular-nums; }
table.weeks { border-collapse:separate; border-spacing:0; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); min-width:520px; }
table.weeks th, table.weeks td { padding:8px 14px; border-bottom:1px solid #EDF1F5; white-space:nowrap; }
table.weeks thead th { font-size:12.5px; color:var(--muted); font-weight:600; background:var(--sunk); }
table.weeks tbody th { text-align:left; font-weight:500; color:var(--slate); }
table.weeks tr:last-child th, table.weeks tr:last-child td { border-bottom:0; }
tr.wkrow .note { margin:8px 0 0; color:var(--muted); font-size:13px; }

/* Side panels: pale blue (header, body, footer), white inputs, subtle dividers, one vertical scroll, never sideways */
.drawer { position:fixed; top:0; right:0; bottom:0; width:440px; max-width:100vw; background:var(--accent-weak); border-left:1px solid var(--accent-line); box-shadow:-16px 0 40px rgba(23,37,59,.10); z-index:40; display:flex; flex-direction:column; overflow:hidden; }
.drawer-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:18px 24px 14px; border-bottom:1px solid var(--accent-line); flex:none; }
.drawer-head > div { min-width:0; flex:1; }
.drawer-head h2 { margin:2px 0 2px; font-size:19px; font-weight:600; }
.drawer-head button { width:34px; height:34px; padding:0; font-size:16px; justify-content:center; color:var(--muted); }
.drawer-total { display:flex; justify-content:space-between; align-items:baseline; margin-top:10px; }
.drawer-total b { font-size:22px; font-weight:600; font-variant-numeric:tabular-nums; }
.drawer-body { padding:16px 24px 24px; overflow-y:auto; overflow-x:hidden; flex:1; min-height:0; min-width:0; overflow-wrap:anywhere; }
.drawer-body h3, .drawer h3.psec { font-size:14px; font-weight:600; margin:18px 0 10px; padding-top:14px; border-top:1px solid var(--accent-line); color:var(--ink); }
.drawer-foot { flex:none; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 24px; border-top:1px solid var(--accent-line); background:var(--accent-weak); font-size:13px; }
.drawer .wkgrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.drawer .wkcard { background:var(--panel); }
.drawer input, .drawer textarea, .drawer select { background:var(--panel); }
.drawer .flags { list-style:none; margin:12px 0 0; padding:0; display:grid; gap:10px; }
.drawer .flags .sub { font-size:13px; color:var(--muted); margin-top:4px; line-height:1.45; }
.drawer .paybox { width:100%; border-collapse:collapse; table-layout:fixed; font-variant-numeric:tabular-nums; }
.drawer .paybox td { padding:7px 0; border-bottom:1px solid var(--accent-line); overflow-wrap:anywhere; }
.drawer .paybox td.num { padding-left:12px; white-space:nowrap; width:96px; }
.drawer .paybox tr.tot td { font-weight:600; border-bottom:0; border-top:1px solid #9AA6CF; }
.pfield { margin-bottom:14px; min-width:0; }
.pfield label { display:block; font-weight:500; font-size:14px; margin-bottom:6px; }
.pfield input, .pfield textarea, .pfield select { width:100%; min-width:0; }
.pfield input.invalid { border-color:var(--warn); background:#FFFBEB; }
.pfield .sub { font-size:12.5px; color:#4B5A73; margin-top:4px; line-height:1.45; }
.pfield.two { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.small-note { font-size:13px; }
.drawer-status { margin-bottom:8px; }
.drawer-status .flagchips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
/* Long status labels wrap instead of running off the panel or the table. */
.flagchips .chip, ul.flags .chip, td.status .chip, .drawer .chip { white-space:normal; max-width:100%; border-radius:10px; line-height:18px; padding:3px 9px; text-align:left; overflow-wrap:anywhere; }
.drawer details.explain { margin-top:18px; border-top:1px solid var(--accent-line); padding-top:12px; }
.drawer details.explain summary { cursor:pointer; color:var(--accent); font-weight:500; font-size:14px; }
.drawer h4 { font-size:14px; margin:16px 0 6px; }
.drawer .linkrow { border:1px solid var(--accent-line); border-radius:var(--r); padding:10px 12px; margin-bottom:8px; display:grid; gap:8px; background:var(--panel); }
.drawer .endlink { display:flex; gap:8px; } .drawer .endlink input { flex:1; min-width:0; }
.drawer .preview { background:var(--panel); border:1px solid var(--accent-line); border-radius:var(--r); padding:10px 12px; margin:10px 0; }
.drawer .reauth { border:1px solid #FDE68A; background:#FFFBEB; border-radius:var(--r); padding:12px; margin:10px 0; display:grid; gap:8px; }
.drawer .negbox { margin:0 0 16px; display:block; } .drawer .negbox p { margin:6px 0 10px; } .drawer .negbox > b { display:block; } .drawer .negbox p b, .drawer .negbox li b { display:inline; }
.drawer .negbox ul { margin:6px 0; padding-left:20px; }
.drawer button + button, .drawer #lk-find, .drawer #set-open { margin-top:4px; }
.drawer fieldset.resolve { border:1px solid var(--accent-line); border-radius:var(--r); padding:8px 12px 10px; margin:6px 0 10px; background:var(--panel); }
.drawer fieldset.resolve legend { font-weight:600; font-size:13.5px; padding:0 4px; }
.drawer label.opt { display:flex; gap:8px; align-items:flex-start; margin:6px 0; font-weight:400; color:var(--ink); }
.drawer label.opt input { margin-top:3px; width:auto; }
.drawer label.opt .sub { display:block; color:var(--muted); font-size:12.5px; }
.drawer label.opt.check { margin:8px 0 10px; }
.drawer .paybox tr.subtot td { border-top:1px solid #9AA6CF; font-weight:600; }
.drawer .ovbtns { display:flex; gap:8px; flex-wrap:wrap; }
@media (min-width:1700px) { main.with-drawer { padding-right:472px; } }

.bad-text { color:var(--bad) !important; }
.warn-text { color:var(--warn) !important; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:8px 16px; }
.form-grid .field { grid-template-columns:1fr; } .form-grid .field.wide { grid-column:1 / -1; }
.form-grid select, .form-grid input { width:100%; min-width:0; }
.ovbtns { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:8px; }
.bp-lists { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; }
.bp-list { border:1px solid var(--line); border-radius:var(--r); padding:12px; background:var(--panel); }
.bp-list h3 { margin:0 0 6px; font-size:15px; font-weight:600; }
.bp-res { min-width:320px; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); }
.bp-tot { display:grid; grid-template-columns:max-content 1fr; gap:6px 16px; margin:12px 0; font-variant-numeric:tabular-nums; }
.bp-tot dt { font-weight:600; } .bp-tot dd { margin:0; }
.section-title { font-size:18px; font-weight:600; margin:24px 0 10px; }
.marking { display:inline-block; font-weight:700; letter-spacing:.04em; padding:1px 8px; border-radius:4px; border:2px solid var(--bad); color:var(--bad); }
.callout.blocker ul { margin:6px 0 0; padding-left:20px; }
@media (max-width:980px) { li.ck { grid-template-columns:20px 1fr auto; } li.ck .ck-what { grid-column:2 / 4; grid-row:2; } }
.callout.blocker { margin-bottom:16px; }
.callout.blocker li .sub { color:inherit; opacity:.8; font-size:13px; }
.callout.blocker .blocker-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:10px; }
.callout.blocker-none { margin-bottom:16px; background:var(--panel); border-color:var(--line); }
.callout details.more-blockers summary { cursor:pointer; font-weight:500; margin-top:4px; }
.callout details.more-blockers ul { margin-top:4px; }
.callout.blocker-none .btn { margin-left:8px; }
/* Review summary (owner, 08/11/2026): slim pale-amber line; the checks panel opens on demand beneath it. */
.rsum { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; background:#FFFBEB; border:1px solid #F5E1A4; border-left:4px solid #D97706; border-radius:8px; padding:10px 16px; margin-bottom:16px; color:var(--ink); }
.rsum.done { background:var(--panel); border-color:var(--line); border-left-color:var(--good); }
.rsum .rs-ico { font-size:18px; color:#B45309; line-height:1; } .rsum.done .rs-ico { color:var(--good); }
.rsum .rs-text { flex:1 1 320px; min-width:0; } .rsum .rs-text b { font-weight:600; } .rsum .rs-text .sub { margin-top:2px; }
.rsum .rs-actions { display:flex; flex-wrap:wrap; gap:8px; } .rsum .rs-actions .muted { font-weight:400; }
.ckpanel { flex:1 1 100%; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:12px 16px; margin-top:4px; }
.ckpanel > .sub { margin:0 0 8px; }
.ck-h { font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:12px 0 4px; font-weight:600; }
details.ckgrp { border-top:1px solid var(--line); } details.ckgrp:first-of-type { border-top:0; }
details.ckgrp > summary { display:flex; align-items:center; gap:10px; padding:10px 0; cursor:pointer; list-style:none; font-weight:600; }
details.ckgrp > summary::-webkit-details-marker { display:none; }
details.ckgrp > summary::before { content:'▸'; color:var(--muted); width:12px; } details.ckgrp[open] > summary::before { content:'▾'; }
.ck-n { min-width:24px; text-align:center; font-size:12.5px; background:var(--warn-bg); color:var(--warn); border-radius:99px; padding:0 8px; line-height:22px; }
ul.cklist { list-style:none; margin:0 0 8px; padding:0; }
li.ck { display:grid; grid-template-columns:20px minmax(140px,1fr) minmax(0,2.2fr) auto; gap:4px 12px; align-items:start; padding:8px 0 8px 22px; border-top:1px dashed var(--line); }
li.ck .ck-ico { color:#B45309; font-weight:700; text-align:center; } li.ck.err .ck-ico { color:var(--bad); }
li.ck.err .ck-what { color:var(--bad); }
li.ck .ck-who { font-weight:500; overflow-wrap:anywhere; } li.ck .ck-who .sub { display:block; font-weight:400; }
li.ck .ck-what { overflow-wrap:anywhere; }
details.ck-why summary { display:inline; cursor:pointer; color:var(--accent); font-size:13px; margin-left:4px; }
details.ck-why[open] { display:block; color:var(--ink); font-size:13.5px; margin-top:4px; background:var(--bg); border-radius:6px; padding:6px 8px; }
.ck-go { white-space:nowrap; }
li.ck .ck-act { font-size:13px; color:var(--muted); text-align:right; max-width:200px; }
.rsum .rs-scope { font-weight:600; color:var(--slate); }
.rsum.loading { background:var(--panel); border-color:var(--line); border-left-color:var(--accent-line); }
.rsum .ckpanel[hidden] { display:none; }
.why-off { color:var(--muted); align-self:center; }
details.exreq { background:#FFFBEB; border:1px solid #F5E1A4; border-left:4px solid #D97706; border-radius:8px; padding:8px 14px; margin:0 0 12px; }
details.exreq > summary { display:flex; flex-wrap:wrap; align-items:center; gap:8px; cursor:pointer; font-weight:600; }
details.exreq > summary .sub { font-weight:400; }
details.exreq ul { margin:8px 0 2px; padding-left:20px; overflow-wrap:anywhere; }
.tb-right { margin-left:auto; }
/* Payroll Queries and Reconciliation (D65) */
.pq-flow { display:flex; flex-wrap:wrap; gap:6px 18px; margin:0 0 12px; font-size:13px; color:var(--slate); }
.pq-flow span b { display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--accent-weak); color:var(--accent); font-size:12px; margin-right:6px; }
.co-tabs { margin:10px 0 12px; flex-wrap:wrap; }
.pq-batchbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line); }
.pq-summary { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 24px; padding:10px 16px; border-bottom:1px solid var(--line); background:var(--bg); font-size:14px; }
.pq-summary .k { color:var(--muted); font-size:12.5px; margin-right:4px; }
details.pq-todo summary { cursor:pointer; } details.pq-todo ul { margin:6px 0 0; padding-left:20px; }
table.pq-t, table.pq-adj, table.rc-t { table-layout:fixed; width:100%; }
table.pq-t td, table.rc-t td { white-space:normal; overflow-wrap:anywhere; hyphens:auto; } /* a narrow column hyphenates words instead of splitting them silently */
table.pq-t tr.sel td { background:var(--accent-weak); }
table.pq-t td .chip, table.rc-t td .chip { white-space:normal; border-radius:10px; line-height:16px; padding:2px 8px; }
tr.pq-adj-detail td { background:var(--bg); } tr.pq-adj-detail .paybox { width:100%; max-width:640px; }
tr.pq-adj-detail .paybox td.num { text-align:right; }
ul.pq-results { list-style:none; margin:6px 0 0; padding:0; border:1px solid var(--accent-line); border-radius:8px; background:#fff; max-height:none; }
ul.pq-results li { padding:7px 10px; border-top:1px solid var(--line); cursor:pointer; } ul.pq-results li:first-child { border-top:0; }
ul.pq-results li:hover, ul.pq-results li:focus { background:var(--accent-weak); outline:none; }
ul.pq-results:empty { display:none; }
.pq-picked { background:#fff; border:1px solid var(--accent-line); border-radius:8px; padding:8px 10px; }
.pq-gen { background:#fff; border:1px dashed var(--accent-line); border-radius:8px; padding:8px 10px; font-size:14px; }
ul.pq-hist { margin:0; padding-left:18px; font-size:13px; } ul.pq-hist li { margin:3px 0; }
.rc-uploads { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; margin-bottom:16px; }
.rc-up { margin:0; } .rc-up .card-head h3 { margin:0; font-size:15px; }
.rc-up .paybox { width:100%; } .rc-up .paybox td.num { text-align:right; }
.rc-preview { margin-top:10px; background:var(--accent-weak); border:1px solid var(--accent-line); border-radius:8px; padding:10px 12px; }
.rc-preview ul { margin:6px 0; padding-left:18px; }
table.rc-t tbody.rc-emp tr.link { cursor:pointer; } table.rc-t tbody.rc-emp tr.open td { border-bottom-color:transparent; }
tr.rc-detail > td { background:var(--bg); padding:12px 16px; }
.rc-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; text-align:left; }
.rc-grid h4 { margin:0 0 6px; font-size:14px; } .rc-grid .paybox { width:100%; } .rc-grid .paybox td.num { text-align:right; white-space:nowrap; }
ul.rc-items { list-style:none; margin:0 0 8px; padding:0; } ul.rc-items li { padding:6px 0; border-top:1px dashed var(--line); }
form.rc-form { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; } form.rc-form input, form.rc-form select { flex:1 1 140px; min-width:0; }
.good-text { color:var(--good); }
@media (max-width:1180px) { .rc-uploads, .rc-grid { grid-template-columns:1fr; } }
table.users-t { table-layout:fixed; width:100%; } table.users-t td { white-space:normal; overflow-wrap:anywhere; }
.addrole { display:flex; flex-wrap:wrap; gap:6px; } .addrole select { flex:1 1 120px; min-width:0; } .addrole button { flex:none; }
ul.tasks { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:10px 20px; }
ul.tasks li { padding:8px 0; border-top:1px solid var(--line); } ul.tasks li .sub { display:block; margin-top:2px; }
.sec-nav { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
.sec-nav a { padding:6px 12px; border:1px solid var(--line); border-radius:99px; background:var(--panel); color:var(--slate); font-size:13.5px; text-decoration:none; }
.sec-nav a:hover { border-color:var(--accent-line); background:var(--accent-weak); color:var(--accent); }
#ad-users, #ad-fm, #ad-map { scroll-margin-top:calc(var(--top-h) + 16px); }
table.act-t { table-layout:fixed; width:100%; } table.act-t td { white-space:normal; overflow-wrap:anywhere; }
.kpis.mgr-status .v.small { font-size:16px; }
table.mgr-notes { table-layout:fixed; width:100%; } table.mgr-notes td { white-space:normal; overflow-wrap:anywhere; }
.kpis.lv-tot { grid-template-columns:repeat(4,1fr); margin:8px 0 10px; } .kpis.lv-tot .v.small { font-size:16px; }
h2.lv-h { font-size:16px; margin:18px 0 8px; }
.lv-states { display:flex; flex-wrap:wrap; gap:6px 14px; margin:0 0 10px; font-size:13.5px; }
.lvs { color:var(--slate); } .lvs b { font-variant-numeric:tabular-nums; }
.lvs.open, .lvs.awaiting { color:var(--warn); } .lvs.invalid { color:var(--bad); }
table.lv-t { table-layout:fixed; width:100%; } table.lv-t td { white-space:normal; overflow-wrap:anywhere; }
table.lv-t td .chip { white-space:normal; border-radius:10px; line-height:16px; padding:2px 8px; }
@media (max-width:980px) { .kpis.lv-tot { grid-template-columns:1fr 1fr; } }
.precommit { background:var(--accent-weak); border:1px solid var(--accent-line); border-radius:8px; padding:10px 16px; margin:12px 0; }
.precommit h3 { font-size:14px; margin:0 0 6px; }
.precommit > ul { list-style:none; margin:0; padding:0; }
.precommit > ul > li { padding:4px 0; font-size:14px; }
.precommit > ul > li > span { display:inline-block; width:18px; font-weight:700; }
.precommit li.ok > span { color:var(--good); } .precommit li.no { color:var(--bad); } .precommit li.warn > span { color:#B45309; }
.precommit li ul { margin:4px 0 0 18px; color:var(--ink); }
table.exc-t { table-layout:fixed; width:100%; } table.exc-t td { white-space:normal; overflow-wrap:anywhere; }
table.exc-t tr.done td { color:var(--muted); } table.exc-t tr.done td b { color:var(--slate); }
table.exc-t td .chip { white-space:normal; border-radius:10px; line-height:16px; padding:2px 8px; }
.focus-flash { outline:3px solid var(--accent); outline-offset:2px; transition:outline-color 2s; }
/* Four-week view (owner, 08/11/2026): equal week columns, centred under their headings, with subtle dividers. */
table.fourwk { table-layout:fixed; width:100%; min-width:600px; }
table.fourwk td.wk, table.fourwk td.num, table.fourwk th.wk, table.fourwk th.num { white-space:normal; padding-left:6px; padding-right:6px; }
table.fourwk col.fw-emp { width:26%; } table.fourwk col.fw-tot { width:14%; }
table.fourwk th.wk, table.fourwk td.wk { text-align:center; border-left:1px solid var(--line); }
table.fourwk th.wk:first-of-type, table.fourwk td.wk:first-of-type { border-left:1px solid var(--line); }
table.fourwk th.num, table.fourwk td.num { text-align:center; border-left:1px solid var(--line); }
table.fourwk thead th { vertical-align:top; white-space:normal; }
table.fourwk thead th.wk .chip { margin-top:4px; }
table.fourwk .fw-sub { display:block; font-size:12px; font-weight:400; color:var(--muted); margin-top:2px; }
table.fourwk tbody th { text-align:left; font-weight:400; white-space:normal; }
table.fourwk tbody tr:nth-child(even) td.wk { background:#FAFBFD; }
table.fourwk .fw-v { display:block; font-variant-numeric:tabular-nums; font-weight:500; }
table.fourwk .fw-na { display:block; color:var(--muted); font-style:italic; }
table.fourwk .fw-tr { display:block; font-size:12px; color:var(--muted); }
table.fourwk td.num b { font-variant-numeric:tabular-nums; }
/* Column alignment (owner, 09/11/2026): every numeric column, its heading, unit and supporting text (known weeks,
   "2 of 4 weeks", "Not calculated") share one centre line; status headings and badges are centred too. Names,
   descriptions, comments and form fields keep their left alignment. Presentation only. */
table.data th.num, table.data td.num, table.data th.day, table.data td.day, table.data .ctr, table.data td.status,
table.weeks td.num, .drawer .paybox td.num { text-align:center; }
table.data td.num .sub, table.data td.num .known, table.data th.num .u, table.data td.status .sub { text-align:center; }
table.data td.status .chip, table.data td.ctr .chip { text-align:center; justify-content:center; }
table.data td.ctr .progress { margin-left:auto; margin-right:auto; }
table.data td.num, table.data th.num { padding-left:8px; padding-right:8px; }
table.comb2 td.status, table.comb2 th.ctr { padding-left:10px; padding-right:10px; }
table.sal2 col.c-emp { width:19%; } table.sal2 col.c-home { width:11%; } table.sal2 col.c-status { width:150px; }
/* Supporting words (Not calculated, None included, known weeks) wrap inside their own column rather than spill
   into the next one; amounts themselves never wrap. */
table.data td.num .na, table.data td.num .sub, table.data td.num .known { white-space:normal; overflow-wrap:break-word; }
table.data td.num { white-space:normal; } table.data td.num b { white-space:nowrap; }
table.weekly-t { table-layout:fixed; width:100%; }
table.weekly-t col.w-emp { width:15%; } table.weekly-t col.w-day { width:6%; } table.weekly-t col.w-num { width:7.2%; }
table.weekly-t col.w-chk { width:7.2%; } table.weekly-t col.w-st { width:14.4%; } table.weekly-t col.w-go { width:7%; }
table.weekly-t td.ctr .chip { border-radius:10px; line-height:18px; padding:3px 9px; max-width:100%; }
table.weekly-t td.name-cell { min-width:0; max-width:none; }
table.weekly-t td.day { min-width:0; }
table.weekly-t th, table.weekly-t td { padding-left:4px; padding-right:4px; } table.weekly-t th:first-child, table.weekly-t td:first-child { padding-left:12px; }
table.weekly-t td.go { padding-right:12px; white-space:nowrap; }
table.duptable { table-layout:fixed; width:100%; } table.duptable th:last-child { width:auto; }
table.fourwk thead .chip { white-space:normal; padding:2px 8px; line-height:16px; text-align:center; }
table.weekly-t td.ctr, table.weekly-t td.ctr .chip { white-space:normal; }
/* Narrower windows and browser zoom: tighter numeric cells so amounts stay inside their own column. */
@media (max-width:1280px) {
  table.data td.num, table.data th.num, table.data td.status, table.data .ctr, table.data td.day, table.data th.day { padding-left:4px; padding-right:4px; }
  table.comb2 td, table.comb2 th { font-size:13.5px; } table.comb2 thead th { font-size:12px; }
  table.sal2 col.c-emp { width:17%; } table.sal2 col.c-home { width:10%; } table.sal2 col.c-status { width:128px; }
  table.weekly-t td.day { font-size:13px; } table.weekly-t td.day .dot { margin-left:1px; }
  table.weekly-t .progress { max-width:100%; } table.weekly-t td.go { padding-right:6px; font-size:13.5px; }
  table.duptable td, table.duptable th { font-size:13.5px; }
}
/* Very narrow windows (about 150% zoom on a laptop): wide tables keep their column widths and scroll inside their
   own card, so values stay under their headings; the page itself never scrolls sideways. */
@media (max-width:980px) {
  table.comb2 { min-width:880px; } table.weekly-t { min-width:840px; } table.duptable { min-width:820px; } table.fourwk { min-width:600px; }
}
table.duptable th, table.dirtable th { white-space:normal; vertical-align:bottom; }
/* Directors' review (D46) */
.dircompany { margin-bottom:16px; } .dircompany .card-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
table.dirtable td, table.dirtable th { white-space:normal; }
.dircompany table.dirtable { table-layout:fixed; width:100%; } .dircompany table.dirtable th:first-child { width:26%; }
h2.dirpreview { font-size:18px; font-weight:600; margin:24px 0 10px; }
.dircompany.draftco { border:1px dashed var(--bad); }
.dirhistory details.explain { margin:8px 0; } .dirhistory details.explain details.explain { margin-left:12px; }
table.dirtable tr.dirsub td { border-top:1px solid var(--line-strong); background:#FBFCFD; font-weight:600; }
.reauth-inline { border:1px solid #FDE68A; background:#FFFBEB; border-radius:var(--r); padding:10px 12px; margin:8px 0; }
.reauth-inline div { margin-top:6px; display:flex; gap:8px; flex-wrap:wrap; }
/* Duplicates (D43) */
.dupgroup { margin-bottom:16px; }
.dupgroup .card-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.dupgroup .card-head h2 { margin-right:4px; }
table.duptable tr.decide-row td { padding-top:0; border-top:none; background:var(--sunk); }
table.duptable .decide { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:4px 0 12px; }
table.duptable .decide label { display:flex; align-items:center; gap:6px; font-size:14px; color:var(--slate); }
table.duptable .decide input[data-reason] { flex:1; min-width:220px; }
table.duptable td .chip { white-space:normal; }
table.duptable td { white-space:normal; } table.duptable th:last-child { width:32%; }
.dupout { padding:4px 16px 12px; } .dupout h3 { font-size:15px; margin:8px 0 4px; } .dupout ul { margin:4px 0; padding-left:20px; }
.dupgroup details.explain { margin:0 16px 12px; }
.callout.reauth-wide[hidden], table.duptable label[hidden], .preview-box[hidden], .reauth-inline[hidden] { display:none; }
table.duptable .decide .preview-box { flex-basis:100%; }
table.duptable .callout.preview { display:block; margin:6px 0 0; background:var(--accent-weak); border-color:var(--accent-line); color:var(--ink); }
table.duptable .callout.preview p { margin:6px 0; } table.duptable .callout.preview .warnline { font-weight:600; }
table.duptable .ba { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:8px 0; }
table.duptable .ba h4, .dupout h4 { margin:0 0 4px; font-size:14px; }
ul.recs { margin:4px 0; padding-left:20px; } ul.recs ul { margin:2px 0 6px; padding-left:18px; color:var(--slate); font-size:14px; }
/* 0029 merge flow: records of one person -> paying company -> BrightPay employee -> preview -> confirm. */
.merge-start { padding:10px 16px; border-top:1px solid var(--line); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.merge-panel, .merge-open { margin:0 16px 12px; padding:12px 16px; border:1px solid var(--accent-line); border-radius:10px; background:var(--accent-weak); }
.merge-open.ok { background:var(--good-weak, #eef7f1); border-color:var(--good-line, #bfe0cb); }
.merge-panel h3 { margin:0 0 6px; font-size:16px; }
ol.merge-steps { margin:0; padding-left:22px; } ol.merge-steps > li { margin:8px 0; }
ol.merge-steps .paybox { margin:6px 0; width:auto; min-width:min(640px, 100%); } ol.merge-steps .paybox td { padding:4px 12px 4px 0; }
ol.merge-steps select, ol.merge-steps input[data-mreason] { margin-left:6px; min-width:260px; max-width:100%; }
label.chk { display:flex; align-items:center; gap:6px; margin-top:4px; font-size:14px; }
.merge-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px; } .merge-actions input { flex:1; min-width:220px; }
.merge-panel .callout.preview, .merge-open .callout.preview { display:block; margin:10px 0 0; background:var(--card, #fff); border-color:var(--accent-line); color:var(--ink); }
.merge-panel .callout.preview p, .merge-open .callout.preview p { margin:6px 0; } .callout.preview .warnline { font-weight:600; } .callout.preview .statement { font-size:15px; }
.merge-panel .callout.preview h4 { margin:10px 0 4px; font-size:14px; } table.merge-src th { text-align:left; padding:4px 12px 4px 0; } table.merge-src td.num, table.merge-src th.num { text-align:right; }
.merge-open .ba { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:8px 0; }
.merge-panel .reauth-inline, .merge-open .reauth-inline { margin-top:8px; }
.callout.reauth-wide { margin-bottom:16px; }
.callout.reauth-wide input { min-width:260px; }
input.invalid { border-color:var(--bad); }

/* Manager */
tr.missing td { background:#FEF3F2 !important; }
table.mgr-q { table-layout:fixed; }
table.mgr-q td { white-space:normal; vertical-align:top; }
table.mgr-q textarea { min-height:56px; }
table.mgr-q select { width:100%; }
.qtext { white-space:normal; }
table.paybox.history { width:100%; border-collapse:collapse; } table.paybox.history td { padding:8px 0; border-bottom:1px solid #EDF1F5; }
/* While the next page loads, dim only the workspace. */
main.loading { opacity:.45; pointer-events:none; transition:opacity .12s; }

/* Narrower windows: stack panels; tables keep their own horizontal scroll; the page never scrolls sideways */
@media (max-width:1500px) { .user .uname { display:none; } .period .lbl { display:none; } }
@media (max-width:1280px) { :root { --side-w:208px; } main { padding:24px 24px 72px; } .topbar { padding:0 20px; } .context label { display:none; } }
@media (max-width:1180px) { .review-grid { grid-template-columns:1fr; } .detail { position:static; max-height:none; } .summary { grid-template-columns:1fr 1fr; } .checklist { grid-template-columns:1fr 1fr; } .quiet-cols { grid-template-columns:1fr; } .cards3 { grid-template-columns:1fr; } .cards3 > .sumcard + .sumcard { border-left:0; border-top:1px solid var(--line); } .toolbar .hint { display:none; } }
@media (max-width:980px) { .period { display:none; } .kpis { grid-template-columns:1fr; } .kpis > div + div { border-left:0; border-top:1px solid var(--line); } }
@media (max-width:820px) {
  .frame { grid-template-columns:1fr; grid-template-rows:auto auto 1fr; } .side { grid-row:auto; position:static; height:auto; flex-direction:row; flex-wrap:wrap; gap:4px; border-right:0; border-bottom:1px solid var(--line); }
  .side .group, .side .brand { display:none; } .side .side-bottom { margin:0; padding:0; display:contents; } .topbar { grid-column:1; grid-row:auto; flex-wrap:wrap; height:auto; padding:8px 16px; position:static; } main { grid-column:1; grid-row:auto; padding:16px 16px 72px; }
  .summary, .assure, .checklist { grid-template-columns:1fr; }
}