/* มทบ.39 register — a ruled ledger in iOS system colours. Light and dark follow the OS.
   System fonts (SF / Segoe UI / Leelawadee UI render Thai well), one blue accent, one hue per document state. */
:root {
  --bg: #f2f2f7;            /* systemGroupedBackground */
  --paper: #ffffff;         /* secondarySystemGroupedBackground */
  --paper-2: #f9f9fb;       /* table head, hover */
  --fill: #e5e5ea;          /* systemFill for controls */
  --ink: #000000;           /* label */
  --ink-2: rgba(60, 60, 67, .78);
  --muted: rgba(60, 60, 67, .60);   /* secondaryLabel */
  --line: rgba(60, 60, 67, .29);    /* separator */
  --line-2: rgba(60, 60, 67, .16);  /* lighter rule inside tables */
  --accent: #007aff;        /* systemBlue */
  --accent-ink: #ffffff;
  --accent-soft: rgba(0, 122, 255, .10);
  --accent-hover: #0066d6;
  /* iOS system colours — one per document state, see .st-* */
  --orange: #c93400;  --orange-soft: rgba(255, 149, 0, .16);
  --blue: #0060c9;    --blue-soft: rgba(0, 122, 255, .13);
  --purple: #8944ad;  --purple-soft: rgba(175, 82, 222, .14);
  --teal: #0f7f92;    --teal-soft: rgba(48, 176, 199, .16);
  --green: #1f8a3d;   --green-soft: rgba(52, 199, 89, .16);
  --red: #d70015;     --red-soft: rgba(255, 59, 48, .13);
  --grey: #6c6c70;    --grey-soft: rgba(142, 142, 147, .18);
  --warn: var(--orange); --warn-soft: var(--orange-soft);
  --bad: var(--red);     --bad-soft: var(--red-soft);
  --ok: var(--green);    --ok-soft: var(--green-soft);
  --info: var(--blue);   --info-soft: var(--blue-soft);
  --input: rgba(60, 60, 67, .28);   /* control border (AR --input) */
  --sh-sm: 0 1px 3px rgb(0 0 0 / .06);
  --radius: 10px;                    /* controls (AR --radius) */
  --radius-card: 16px;               /* inset card (AR SettingsGroup rounded-2xl) */
  --ctl: 36px;                       /* every input, select and button is this tall (AR h-9) */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Leelawadee UI", "Sarabun", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000; --paper: #1c1c1e; --paper-2: #232326; --fill: #2c2c2e;
    --ink: #ffffff; --ink-2: rgba(235, 235, 245, .78); --muted: rgba(235, 235, 245, .60);
    --line: rgba(84, 84, 88, .65); --line-2: rgba(84, 84, 88, .40);
    --accent: #0a84ff; --accent-ink: #ffffff; --accent-soft: rgba(10, 132, 255, .18); --accent-hover: #409cff;
    --orange: #ff9f0a; --orange-soft: rgba(255, 159, 10, .18);
    --blue: #64b5ff;   --blue-soft: rgba(10, 132, 255, .20);
    --purple: #da8fff; --purple-soft: rgba(191, 90, 242, .20);
    --teal: #70d7ff;   --teal-soft: rgba(64, 200, 224, .18);
    --green: #30d158;  --green-soft: rgba(48, 209, 88, .18);
    --red: #ff6961;    --red-soft: rgba(255, 69, 58, .18);
    --grey: #aeaeb2;   --grey-soft: rgba(142, 142, 147, .24);
    --input: rgba(84, 84, 88, .85);
    --sh-sm: 0 1px 3px rgb(0 0 0 / .5);
  }
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 var(--font); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
b, strong { font-weight: 600; }
h1 { font-size: 22px; font-weight: 700; letter-spacing: -.2px; margin: 0 0 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
h2 { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 22px 0 6px 4px; display: flex; gap: 8px; align-items: center; }
h1 .pill, h2 .pill { font-weight: 500; }
p { margin: 0 0 12px; }
.num, td.num, th.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.nowrap { white-space: nowrap; }
.mono, td.code { font-family: var(--mono); font-size: 13px; }

/* ---------- header ---------- */
header.top { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
header.top .in { max-width: 1240px; margin: 0 auto; padding: 0 16px; display: flex; gap: 16px; align-items: center; min-height: 48px; }
.brand { font-weight: 600; font-size: 15px; white-space: nowrap; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand span { color: var(--muted); font-weight: 500; }
nav.main { display: flex; flex: 1; gap: 2px; overflow-x: auto; scrollbar-width: none; background: var(--fill); padding: 2px; border-radius: 9px; max-width: max-content; }
nav.main::-webkit-scrollbar { display: none; }
nav.main a { display: flex; align-items: center; color: var(--ink); padding: 4px 12px; border-radius: 7px; font-size: 13px; white-space: nowrap; }
nav.main a:hover { text-decoration: none; }
nav.main a.on { background: var(--paper); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.who { margin-left: auto; font-size: 13px; color: var(--muted); display: flex; gap: 12px; align-items: center; white-space: nowrap; }
.who b { color: var(--ink); font-weight: 500; }
.who form { display: inline; }
.who button.link { font-size: 13px; }

/* ---------- page ---------- */
main { max-width: 1240px; margin: 0 auto; padding: 18px 16px 72px; }
.lede { color: var(--muted); font-size: 13px; margin: -4px 0 12px 2px; max-width: 80ch; }
.card { background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--radius-card); box-shadow: var(--sh-sm); padding: 16px; margin-bottom: 16px; }
.card > :first-child { margin-top: 0; }
.card.empty { color: var(--muted); text-align: center; padding: 18px 14px; }
.flash { background: var(--info-soft); color: var(--info); border-radius: var(--radius); padding: 8px 14px; margin-bottom: 12px; font-weight: 500; }
.flash.err { background: var(--bad-soft); color: var(--bad); }
.hint { background: var(--info-soft); color: var(--info); border-radius: 8px; padding: 7px 12px; margin-bottom: 10px; font-size: 13px; }
.warn { background: var(--warn-soft); color: var(--warn); border-radius: 8px; padding: 7px 12px; margin: 8px 0; font-size: 13px; }

/* ---------- tables: ruled like a ledger ---------- */
table { width: 100%; border-collapse: collapse; background: var(--paper); font-size: 14px; }
th, td { padding: 5px 8px; border-bottom: 1px solid var(--line-2); border-right: 1px solid var(--line-2); text-align: left; vertical-align: top; line-height: 1.4; }
th:last-child, td:last-child { border-right: 0; }
th { font-size: 12px; color: var(--muted); font-weight: 500; background: var(--paper-2); white-space: nowrap; border-bottom-color: var(--line); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--paper-2); }
tbody td a { font-weight: 500; }
tr.sub td { background: var(--paper-2); font-weight: 600; }
tr.muted td { color: var(--muted); }
.tablewrap { overflow: auto; border: 1px solid var(--line-2); border-radius: var(--radius-card); box-shadow: var(--sh-sm); background: var(--paper); margin-bottom: 16px; }
.tablewrap table { border: 0; min-width: 680px; }
.card .tablewrap { margin-bottom: 0; }
td input[type=checkbox], th input[type=checkbox] { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); }

/* ---------- forms: every control is --ctl tall, every label the same height, so rows line up ---------- */
.grid { display: grid; gap: 12px 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
.grid > .full { grid-column: 1 / -1; }
label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; line-height: 18px; height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
input, select, textarea { font: inherit; font-size: 14px; color: var(--ink); background: var(--paper); border: 1px solid var(--input);
  border-radius: var(--radius); padding: 0 11px; width: 100%; height: var(--ctl); box-shadow: 0 1px 2px rgb(0 0 0 / .04); }
textarea { height: auto; min-height: calc(var(--ctl) * 2); padding: 8px 11px; }
select { appearance: none; -webkit-appearance: none; padding-right: 30px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%238e8e93' stroke-width='1.8' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 11px center; }
input[type=date] { padding-right: 8px; }
input::placeholder { color: var(--muted); opacity: .8; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
button:focus-visible, .btn:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
input.code { font-family: var(--mono); font-size: 13px; }
input.num { text-align: right; }
input.bad { border-color: var(--bad); background: var(--bad-soft); }
input[type=checkbox] { width: 18px; height: 18px; min-height: 0; padding: 0; box-shadow: none; accent-color: var(--accent); vertical-align: middle; }
button, .btn { font: inherit; font-size: 14px; font-weight: 500; border: 1px solid var(--input); background: var(--paper); color: var(--accent);
  border-radius: var(--radius); padding: 0 14px; height: var(--ctl); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
  box-shadow: 0 1px 2px rgb(0 0 0 / .04); }
button:hover, .btn:hover { background: var(--paper-2); text-decoration: none; }
button.primary, .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
button.primary:hover, .btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button.danger { color: var(--bad); }
button.danger:hover { background: var(--bad-soft); }
button:disabled { opacity: .5; cursor: default; }
button.link { border: 0; background: none; box-shadow: none; color: var(--accent); padding: 0; height: auto; font-weight: 500; }
button.link:hover { background: none; text-decoration: underline; }
.row { display: flex; gap: 12px 14px; align-items: flex-end; flex-wrap: wrap; }
.row > div { flex: 1 1 180px; min-width: 0; }         /* fields in a row share it equally */
.row > button, .row > .btn, .row > span, .row > form, .row > details { flex: 0 0 auto; }
.row > span.muted, .row > span.small { align-self: center; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-top: 12px; }
.card > .actions:not(:first-child), form.card > .actions:not(:first-child) { border-top: 1px solid var(--line-2); padding-top: 12px; margin-top: 14px; }
.actions .right, .row .right { margin-left: auto; }
.actions > form.row { flex: 1 1 320px; }               /* an inline form grows so its field and button stay on one line */
.actions > form.row > div { flex: 1 1 200px; max-width: 420px; }
form.card.row, form.card.grid { margin-bottom: 16px; }
details summary { cursor: pointer; list-style: none; color: var(--accent); font-size: 13px; padding: 6px 0; }
details summary::-webkit-details-marker { display: none; }
details summary::before { content: "▸ "; color: var(--muted); }
details[open] summary::before { content: "▾ "; }
.checks { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; min-height: var(--ctl); }
.checks label { color: var(--ink); font-size: 14px; margin: 0; height: auto; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.check { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 14px; height: var(--ctl); margin: 0; }

/* ---------- tabs (segmented control) and counts ---------- */
.tabs { display: inline-flex; gap: 2px; margin-bottom: 12px; background: var(--fill); padding: 2px; border-radius: 9px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 7px; color: var(--ink); font-size: 13px; white-space: nowrap; }
.tabs a:hover { text-decoration: none; }
.tabs a.on { background: var(--paper); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--grey-soft); color: var(--ink-2); font-size: 11.5px; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.tabs a.on .count { background: var(--accent); color: var(--accent-ink); }
h1 .count { font-size: 12px; line-height: 20px; min-width: 20px; }

/* ---------- document state — one hue per state, everywhere ---------- */
.pill { display: inline-block; padding: 0 7px; border-radius: 6px; font-size: 12px; line-height: 19px; white-space: nowrap; font-weight: 500; background: var(--grey-soft); color: var(--grey); }
.st-received  { background: var(--orange-soft); color: var(--orange); }
.st-open      { background: var(--orange-soft); color: var(--orange); }
.st-coded     { background: var(--blue-soft);   color: var(--blue); }
.st-draft     { background: var(--purple-soft); color: var(--purple); }
.st-disbursed { background: var(--teal-soft);   color: var(--teal); }
.st-paid      { background: var(--green-soft);  color: var(--green); }
.st-done      { background: var(--green-soft);  color: var(--green); }
.st-returned  { background: var(--red-soft);    color: var(--red); }
.st-cancelled { background: var(--grey-soft);   color: var(--grey); }

/* ---------- pending-work panel: one ruled row of counts ---------- */
.work { padding: 0; overflow: hidden; }
.workline { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--line-2); }
.workline > * { padding: 8px 12px; background: var(--paper); display: flex; flex-direction: column-reverse; justify-content: end; gap: 0; color: var(--muted); font-size: 12px; line-height: 1.35; min-height: 54px; }
.workline > a b { font-size: 20px; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.workline > .big { justify-content: center; background: var(--paper-2); font-size: 15px; font-weight: 600; color: var(--ink); }
.workline a:hover { text-decoration: none; background: var(--paper-2); }
.workline a:hover b { color: var(--accent); }
.gone { padding: 6px 12px 8px; border-top: 1px solid var(--line-2); font-size: 13px; }
.gone ul { margin: 4px 0 0; padding-left: 0; list-style: none; }
.gone li { margin: 0; padding: 4px 0; border-top: 1px solid var(--line-2); }
.gone li:first-child { border-top: 0; }
.gone li a { font-weight: 500; }
.card .gone { padding-left: 0; padding-right: 0; margin-top: 10px; }

/* ---------- batches: quiet, table first ---------- */
.batch { padding: 0; overflow: hidden; }
.batch > * { padding-left: 12px; padding-right: 12px; }
.batch > .tablewrap { padding: 0; border: 0; border-radius: 0; margin: 0; }
.row.head { padding: 8px 12px; border-bottom: 1px solid var(--line-2); align-items: center; justify-content: space-between; gap: 6px 12px; }
.row.head > div:first-child { flex: 1 1 260px; min-width: 0; }  /* the summary line wraps instead of widening the page */
.row.head .tno { font-size: 15px; font-weight: 600; margin-right: 6px; font-variant-numeric: tabular-nums; }
.row.head .meta { color: var(--muted); font-size: 13px; }
.row.head .meta b { color: var(--ink); font-weight: 500; }
.batch .actions { padding: 8px 12px 10px; margin: 0; border-top: 1px solid var(--line-2); }
.batch .actions + .actions { border-top: 0; padding-top: 0; }
.batch .gone { margin: 0; }
.batch .warn { margin: 8px 12px 0; }
.batch details { padding: 0 12px 8px; }
.batch details .actions { padding: 0; border: 0; margin-top: 4px; }
.batch > form.actions { padding-top: 8px; }
tr.addable td { background: var(--accent-soft); }
tr.addable:hover td { background: var(--accent-soft); }
button.add { color: var(--accent); background: var(--paper); border-color: var(--accent); padding: 0 10px; height: 28px; font-size: 13px; font-weight: 600; white-space: nowrap; }
button.add:hover { background: var(--accent); color: var(--accent-ink); }
td form { white-space: nowrap; margin: 0; }
td form.row { flex-wrap: nowrap; align-items: center; gap: 6px; }
td form.row input { width: 130px; height: 30px; padding: 0 8px; flex: 0 0 auto; }
td form.row button { height: 30px; padding: 0 10px; font-size: 13px; }
td .row { gap: 10px; align-items: center; }
td button.link { min-height: 0; }

/* ---------- coding editor ---------- */
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 0 12px; font-size: 14px; margin: 0; }
.kv dt, .kv dd { padding: 5px 0; border-bottom: 1px solid var(--line-2); }
.kv dt { color: var(--muted); font-size: 13px; }
.kv dd { margin: 0; }
.kv.two { grid-template-columns: 120px 1fr 120px 1fr; }
.kv dt:nth-last-child(-n+2), .kv dd:nth-last-child(-n+2) { border-bottom: 0; }
.kv.two dt:nth-last-child(-n+4), .kv.two dd:nth-last-child(-n+4) { border-bottom: 0; }
.kv .amount { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lines td { padding: 3px 5px; vertical-align: top; }
table.lines { min-width: 780px; }  /* codes stay readable; the wrapper scrolls on phones */
.lines input { padding: 0 7px; height: 32px; border-radius: 8px; }
.lines .glname { font-size: 12px; color: var(--muted); padding: 2px 2px 0; min-height: 16px; }
.lines td:last-child { text-align: center; vertical-align: middle; }
.sumline { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 10px; }
.sumline .total { font-size: 14px; color: var(--muted); }
.sumline .total .num { font-size: 15px; font-weight: 600; color: var(--ink); }
.sum-ok { color: var(--ok) !important; }
.sum-bad { color: var(--bad) !important; }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { padding: 6px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.timeline li:last-child { border-bottom: 0; }
ul.timeline.card { padding: 4px 14px; }

/* ---------- login ---------- */
.login { max-width: 360px; margin: 12vh auto; padding: 0 16px; }
.login .brand { display: block; text-align: center; font-size: 19px; margin-bottom: 4px; }
.login h1 { font-size: 15px; font-weight: 500; color: var(--muted); margin: 0 0 16px; justify-content: center; }
.login .card { padding: 16px; }
.login label + input { margin-bottom: 12px; }
.login label { height: auto; white-space: normal; }
.login .actions { border-top: 0 !important; padding-top: 0 !important; margin-top: 4px; }
.login .actions button { width: 100%; justify-content: center; }

/* ---------- pay-mode switch on a ฎีกา ---------- */
.paymode { display: flex; gap: 6px 14px; align-items: center; flex-wrap: wrap; padding: 8px 14px; }
.paymode .seg { display: inline-flex; align-items: center; gap: 6px; margin: 0; height: var(--ctl); font-size: 14px; color: var(--ink); padding: 0 12px; border: 1px solid var(--input); border-radius: var(--radius); cursor: pointer; }
.paymode .seg:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.paymode .seg input { width: auto; min-height: 0; margin: 0; accent-color: var(--accent); }
.paymode .seg { white-space: nowrap; }

/* ---------- bulk coding on งานของฉัน ---------- */
.bulk { margin-bottom: 10px; }
.bulk .row { align-items: end; }
.bulk .glname:not(:empty)::after { content: ' ·'; }
.bulk .check { padding-bottom: 0; }
.bulk > .small { margin-top: 6px; }

/* ---------- admin ---------- */
table.wide { min-width: 920px; }  /* many columns: scroll inside the wrapper instead of crushing the text */

/* ---------- phones ---------- */
@media (max-width: 720px) {
  body { font-size: 14px; }
  header.top .in { flex-wrap: wrap; gap: 6px 12px; padding: 8px 12px; min-height: 0; }
  nav.main { order: 3; flex: 1 0 100%; max-width: none; }
  nav.main a { flex: 1 1 auto; justify-content: center; padding: 6px 8px; }
  main { padding: 14px 12px 60px; }
  h1 { font-size: 20px; }
  .kv, .kv.two { grid-template-columns: 110px 1fr; }
  .kv.two dt:nth-last-child(-n+4), .kv.two dd:nth-last-child(-n+4) { border-bottom: 1px solid var(--line-2); }
  .kv dt:nth-last-child(-n+2), .kv dd:nth-last-child(-n+2) { border-bottom: 0 !important; }
  .card { padding: 10px 12px; }
  .row.head { padding: 8px 12px; }
  .workline { grid-template-columns: repeat(3, 1fr); }
  .workline > * { padding: 8px 10px; }
  .workline > .big { grid-column: 1 / -1; min-height: 40px; }
  .tabs { display: flex; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row > div { flex: 1 1 140px; }
  .actions button, .actions .btn { flex: 1 1 auto; justify-content: center; }
}
@media (min-width: 721px) and (max-width: 1000px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* ---------- document lists: search / unit filter / sortable headers ---------- */
.doctable .tools { margin-bottom: 8px; align-items: center; }
.doctable .tools > div { flex: 1 1 260px; }
.doctable .tools > .unit-pick { flex: 0 1 220px; }
.doctable .tools .shown { flex: 0 0 auto; }
th[data-sort] { cursor: pointer; user-select: none; }
th[data-sort]:hover { color: var(--ink); }
th[data-sort]::after { content: ""; display: inline-block; width: 0; margin-left: 4px; }
th[data-sort][data-dir=asc]::after { content: "▲"; width: auto; font-size: 9px; color: var(--accent); }
th[data-sort][data-dir=desc]::after { content: "▼"; width: auto; font-size: 9px; color: var(--accent); }
table.many { min-width: 560px; }
table.many td.n { text-align: right; width: 36px; }
.st-void { background: var(--grey-soft); color: var(--grey); text-decoration: line-through; }
/* ---------- row selection + action bar (intake) ---------- */
table.selectable tbody tr[data-id] { cursor: pointer; }
table.selectable tbody tr.selected td { background: var(--accent-soft); }
table.selectable tbody tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
table.selectable tbody tr.selected:hover td { background: var(--accent-soft); }
.actbar { position: sticky; bottom: 12px; z-index: 4; border-color: var(--accent); box-shadow: 0 8px 24px rgb(0 0 0 / .14); }
.actbar .sel { margin-bottom: 8px; font-size: 14px; }
.actbar .row > div { flex: 1 1 260px; }
[hidden] { display: none !important; }  /* our display rules on buttons/links must not defeat the hidden attribute */
/* ---------- iOS-style date picker (static/datepick.js) ---------- */
.dp-wrap { position: relative; }
.datepick { cursor: pointer; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><rect x='1.5' y='2.5' width='13' height='12' rx='2.5' fill='none' stroke='%238e8e93' stroke-width='1.4'/><path d='M1.5 6h13M5 1v3M11 1v3' stroke='%238e8e93' stroke-width='1.4' stroke-linecap='round'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px; }
.dp { position: fixed; z-index: 50; width: 296px; background: var(--paper); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 10px 30px rgb(0 0 0 / .16); padding: 10px 12px 8px; }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dp-title { font-weight: 600; font-size: 15px; }
.dp-nav { border: 0; background: none; box-shadow: none; color: var(--accent); font-size: 22px; height: 32px; width: 32px; padding: 0; border-radius: 16px; }
.dp-nav:hover { background: var(--accent-soft); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-dow { text-align: center; font-size: 11px; color: var(--muted); font-weight: 600; padding: 2px 0 4px; }
.dp-day { border: 0; background: none; box-shadow: none; color: var(--ink); height: 36px; width: 100%; padding: 0; border-radius: 18px; font-size: 15px; font-variant-numeric: tabular-nums; }
.dp-day:hover { background: var(--accent-soft); }
.dp-day.today { color: var(--accent); font-weight: 700; }
.dp-day.sel { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.dp-foot { display: flex; justify-content: space-between; margin-top: 6px; border-top: 1px solid var(--line-2); padding-top: 6px; }
.dp-foot button { border: 0; background: none; box-shadow: none; color: var(--accent); height: 30px; padding: 0 8px; }
.dp-foot .dp-clear { color: var(--muted); }
/* ---------- quieter clerk pages ---------- */
.workline-slim { display: flex; gap: 6px 18px; flex-wrap: wrap; align-items: baseline; margin: -4px 0 12px 2px; font-size: 14px; color: var(--muted); }
.workline-slim b { color: var(--ink); font-size: 15px; }
.workline-slim a { font-weight: 600; }
.workline-slim .ret a { color: var(--red); }
details.bulk { margin-top: 12px; }
details.bulk > summary { font-weight: 600; cursor: pointer; }
.row.head .totals { text-align: right; flex: 0 0 auto; }
.row.head .totals .pay { font-size: 15px; color: var(--muted); }
.row.head .totals .pay b { font-size: 20px; color: var(--ink); font-variant-numeric: tabular-nums; }
tfoot tr.sub td { border-top: 2px solid var(--line); }
.batch details.addbox, .batch details.gonebox { padding: 6px 12px 8px; border-top: 1px solid var(--line-2); }
.batch details.addbox > summary { font-weight: 600; padding: 4px 0; }
.batch details.addbox .tablewrap { margin-top: 6px; border: 1px solid var(--line-2); border-radius: 10px; box-shadow: none; }
.batch details.addbox .actions { padding: 8px 0 0; border: 0; }
.gone-list { list-style: none; margin: 4px 0 0; padding: 0; font-size: 13px; }
.gone-list li { padding: 3px 0; }