/* Mendip Finance — MendipSys-family styling (CSS variables, dark theme via
   [data-theme=dark], same ms_theme localStorage key as the other apps). */

:root {
  --bg: #f7f8fc;
  --panel: #ffffff;
  --border: #dfe2ea;
  --text: #202333;
  --muted: #73788b;
  --accent: #005e85;
  --shadow: 0 10px 30px rgba(35, 25, 66, .07);
  --red: #c0392b;   --red-bg: #fdecea;
  --blue: #1f5f9e;  --blue-bg: #e8f1fb;
  --green: #1e7e46; --green-bg: #e7f5ec;
  --grey: #5c6270;  --grey-bg: #eef0f4;
  --amber: #9a6b00; --amber-bg: #fdf3dd;
}
[data-theme="dark"] {
  --bg: #15161d;
  --panel: #1e2029;
  --border: #33364a;
  --text: #e8eaf2;
  --muted: #9aa0b5;
  --accent: #5db3d9;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --red-bg: #3a2220;  --blue-bg: #1d2a3a;
  --green-bg: #1e3227; --grey-bg: #272a36;
  --amber: #e3b04b;   --amber-bg: #33290f;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 18px; }
h2 { font-size: 14px; margin: 0 0 .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
small { color: var(--muted); }

/* ── Top bar ── */
.topbar { background: var(--panel); border-bottom: 1px solid var(--border); }
.topbar-inner {
  max-width: 1200px; margin: 0 auto; padding: .65rem 1rem;
  display: flex; align-items: center; gap: 1.4rem;
}
.brand { font-weight: 700; font-size: 15px; color: var(--text); }
.brand span { color: var(--accent); }
.topbar nav { display: flex; gap: 1rem; flex: 1; }
.topbar-user { display: flex; gap: .8rem; align-items: center; color: var(--muted); }
.nav-toggle { display: none; }

/* ── Layout ── */
.page { max-width: 1200px; margin: 1.2rem auto; padding: 0 1rem; }
.cols { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.grow { flex: 1 1 560px; }
.side { flex: 0 1 320px; display: flex; flex-direction: column; gap: 1rem; }
.card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow); padding: 1rem 1.1rem;
}
.notice {
  background: var(--red-bg); border: 1px solid var(--red); color: var(--text);
  border-radius: 10px; padding: .7rem 1rem; margin-bottom: 1rem;
}

/* ── Stats ── */
.stat-row { display: flex; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.stat {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); padding: .7rem 1.2rem; min-width: 110px;
}
.stat-n { display: block; font-size: 22px; font-weight: 700; }
.stat-n small { font-size: 13px; font-weight: 400; }
.stat-l { color: var(--muted); font-size: 12px; }

/* ── Table ── */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); padding: .35rem .5rem; border-bottom: 1px solid var(--border);
}
.tbl td { padding: .45rem .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .empty { color: var(--muted); text-align: center; padding: 1.4rem; }

/* ── Chips / dots / lists ── */
.chip {
  display: inline-block; padding: 1px 9px; border-radius: 999px;
  font-size: 12px; white-space: nowrap;
}
.chip-red   { background: var(--red-bg);   color: var(--red); }
.chip-blue  { background: var(--blue-bg);  color: var(--blue); }
.chip-green { background: var(--green-bg); color: var(--green); }
.chip-grey  { background: var(--grey-bg);  color: var(--grey); }
.chip-amber { background: var(--amber-bg); color: var(--amber); }

.btn {
  padding: .55rem 1.1rem; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--accent); color: #fff; font-size: 13px; font-weight: 600;
  align-self: center;
}
.btn:disabled { opacity: .6; cursor: default; }
.tbl td.why { color: var(--muted); font-size: 13px; max-width: 260px; }

/* ── Sources / retrieval test ── */
.search-row { display: flex; gap: .6rem; margin-bottom: 1rem; }
.search-row input {
  flex: 1; padding: .55rem .8rem; border: 1px solid var(--border);
  border-radius: 10px; background: var(--bg); color: var(--text); font-size: 14px;
}
.hit { border-top: 1px solid var(--border); padding: .8rem 0; }
.hit-head { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; margin-bottom: .45rem; }
.hit-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; font-size: 13px; }
.hit-body { font-size: 13px; color: var(--muted); }
.hit-label {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); margin-bottom: .25rem;
}
.hit-cols > div { background: var(--bg); border-radius: 8px; padding: .6rem .7rem; }
@media (max-width: 720px) { .hit-cols { grid-template-columns: 1fr; } }
.empty { color: var(--muted); }

/* ── Bench / drafts ── */
.bench-form label { display: block; color: var(--muted); font-size: 13px; margin-bottom: .6rem; }
.bench-form input, .bench-form textarea {
  display: block; width: 100%; margin-top: .3rem; padding: .5rem .7rem;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font-size: 14px; font-family: inherit;
}
.bench-row { display: flex; gap: 1rem; align-items: flex-end; margin-bottom: .3rem; }
.bench-row label { flex: 0 0 160px; margin-bottom: .6rem; }
.bench-row label.grow { flex: 1; }
.bench-or { color: var(--muted); font-size: 12px; padding-bottom: 1.1rem; }
.draft-body {
  background: var(--bg); border-radius: 10px; padding: 1rem 1.1rem;
  font-size: 14px; line-height: 1.55; white-space: normal;
}
.btn-off { background: var(--grey); }
.toggle-form { align-self: center; }
.bench-form select {
  display: block; width: 100%; margin-top: .3rem; padding: .5rem .7rem;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font-size: 14px;
}
.notice-ok { background: var(--green-bg); border-color: var(--green); }
.btn-link { background: none; border: 0; color: var(--accent); cursor: pointer; font-size: 13px; }
.agent-fb { margin-top: .9rem; }
.agent-fb blockquote {
  margin: .45rem 0 0; padding: .6rem .8rem; font-size: 14px;
  background: var(--blue-bg); border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
}
.fb-row { display: flex; gap: .5rem; align-items: center; margin-top: .8rem; }
.fb-row input[type=text] {
  flex: 1; padding: .45rem .7rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font-size: 13px;
}
.btn-thumb {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: .35rem .6rem; cursor: pointer; font-size: 15px; opacity: .55;
}
.btn-thumb.on { opacity: 1; border-color: var(--accent); background: var(--blue-bg); }
.draft-link { display: block; margin-top: .3rem; font-size: 12px; }
/* Tables live inside their card: if columns ever exceed the card width the
   card scrolls internally rather than the table spilling out of the panel */
.table-card { overflow-x: auto; }
.email-body { border-left: 3px solid var(--border); max-height: 24rem; overflow-y: auto; }
.credit-input {
  width: 90px; padding: .5rem .6rem; border: 1px solid var(--border);
  border-radius: 8px; background: var(--panel); color: var(--text); font-size: 13px;
  margin-right: .4rem;
}

.master-switches { display: flex; flex-wrap: wrap; gap: .5rem; }
.stat-link { text-decoration: none; }
.stat-link:hover { border-color: var(--accent); text-decoration: none; }
.dormant { margin-top: .6rem; }
.dormant summary { cursor: pointer; color: var(--muted); font-size: 12px; }
.dormant li { color: var(--muted); font-size: 13px; }

/* ── Groups page (collapsible panels) ── */
.group-card { padding: .7rem 1.1rem; margin-bottom: .55rem; }
.group-card[open] { padding-bottom: 1rem; }
.group-title {
  display: flex; align-items: center; flex-wrap: wrap; gap: .45rem;
  cursor: pointer; list-style: none; margin: 0;
}
.group-title::-webkit-details-marker { display: none; }
.group-title::before {
  content: '▸'; color: var(--muted); font-size: 12px;
  transition: transform .12s ease; display: inline-block;
}
.group-card[open] > .group-title::before { transform: rotate(90deg); }
.group-card[open] > .group-title { margin-bottom: 1rem; }
.group-title .group-name { font-size: 15px; font-weight: 700; color: var(--text); }
.group-title small { margin-left: auto; white-space: nowrap; color: var(--muted); }
.group-off .group-title .group-name { color: var(--muted); font-weight: 600; }
.group-title:hover .group-name { color: var(--accent); }

/* Activity: group / outcome filters */
.filter-label {
  display: flex; align-items: center; gap: .4rem;
  color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
}
.filter-label select {
  padding: .3rem .5rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font-size: 13px;
  text-transform: none; letter-spacing: 0;
}

/* One checkbox per grid cell: box and caption stay together, captions wrap
   inside their own cell instead of squeezing the column. */
.group-flags {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .55rem 1.5rem; margin-bottom: 1rem; align-items: start;
}
.group-flags .flag {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline;
  gap: .55rem; margin: 0; color: var(--text); font-size: 14px; line-height: 1.35;
  cursor: pointer;
}
.group-flags input[type="checkbox"] {
  width: 15px; height: 15px; margin: 0; accent-color: var(--accent);
  position: relative; top: 2px;
}
.group-flags .hint {
  display: block; color: var(--muted); font-size: 12px; line-height: 1.4;
  margin-top: .1rem;
}
.flag-wide { grid-column: 1 / -1; }
.flag-model { grid-column: 1 / -1; grid-template-columns: auto auto; justify-content: start; }
.flag-model > span { align-self: center; }
.group-form .group-flags select {
  display: inline-block; width: auto; justify-self: start; margin: 0;
  padding: .35rem .55rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font-size: 13px;
}
.group-form > label { color: var(--muted); font-size: 13px; }
@media (max-width: 760px) {
  .group-title small { margin-left: 0; flex-basis: 100%; }
  .group-flags { grid-template-columns: 1fr; }
}

/* ── Activity date filter ── */
.date-filter {
  display: flex; gap: .35rem; align-items: center; flex-wrap: wrap;
  margin-bottom: .9rem;
}
.date-filter a {
  padding: .3rem .7rem; border: 1px solid var(--border); border-radius: 999px;
  font-size: 13px; color: var(--text);
}
.date-filter a.on { background: var(--blue-bg); border-color: var(--accent); color: var(--accent); }
.date-filter a:hover { text-decoration: none; border-color: var(--accent); }
.date-range { display: flex; gap: .4rem; align-items: center; margin-left: auto; }
.date-range input[type=date] {
  padding: .3rem .5rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font-size: 13px;
}
.date-range .btn { padding: .35rem .8rem; }
.date-range span { color: var(--muted); font-size: 12px; }
@media (max-width: 760px) {
  .date-range { margin-left: 0; flex-basis: 100%; }
  .date-range input[type=date] { flex: 1; min-width: 0; }
}

/* ── Feedback page (signed link from Freshdesk notes) ── */
.feedback-page { max-width: 640px; }
.score-row { display: flex; gap: .5rem; margin: 1rem 0; }
.score-opt {
  flex: 1; text-align: center; cursor: pointer; padding: .55rem .2rem;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg);
}
.score-opt input { position: absolute; opacity: 0; }
.score-opt .score-n { display: block; font-size: 18px; font-weight: 700; }
.score-opt .score-l { display: block; font-size: 11px; color: var(--muted); }
.score-opt.on, .score-opt:has(input:checked) {
  border-color: var(--accent); background: var(--blue-bg);
}
.feedback-form label { display: block; color: var(--muted); font-size: 13px; margin-bottom: .6rem; }
.feedback-form textarea, .feedback-form input[type=text] {
  display: block; width: 100%; margin-top: .3rem; padding: .5rem .7rem;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font-size: 14px; font-family: inherit;
}

/* ── Mobile: table rows become panels within the table's card ── */
@media (max-width: 760px) {
  .page { margin: .8rem auto; padding: 0 .7rem; }

  /* Hamburger menu: pages + log out live behind ☰ */
  .topbar-inner { flex-wrap: wrap; gap: .5rem .9rem; padding: .6rem .8rem; }
  .nav-toggle {
    display: block; margin-left: auto; cursor: pointer;
    background: none; border: 1px solid var(--border); border-radius: 8px;
    padding: .3rem .6rem; color: var(--text); font-size: 17px; line-height: 1;
  }
  .topbar nav, .topbar-user { display: none; }
  .topbar.open nav {
    display: flex; flex-direction: column; order: 3; flex-basis: 100%; gap: 0;
  }
  .topbar.open nav a { padding: .65rem .15rem; border-top: 1px solid var(--border); }
  .topbar.open .topbar-user {
    display: flex; order: 4; flex-basis: 100%; justify-content: space-between;
    padding: .65rem .15rem .2rem; border-top: 1px solid var(--border);
  }

  .stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
  .stat { min-width: 0; padding: .55rem .8rem; }
  .stat-row .btn, .stat-row form { grid-column: span 2; }
  .toggle-form { display: flex; }
  .toggle-form .btn { flex: 1; }

  .tbl.responsive thead { display: none; }
  .tbl.responsive, .tbl.responsive tbody { display: block; }
  .tbl.responsive tr {
    display: block;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 10px; padding: .55rem .8rem; margin-bottom: .6rem;
  }
  .tbl.responsive td {
    display: flex; gap: .8rem; align-items: baseline;
    justify-content: space-between; text-align: right;
    border: 0; padding: .18rem 0; max-width: none;
  }
  .tbl.responsive td::before {
    content: attr(data-label);
    flex: 0 0 5.2rem; text-align: left;
    font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--muted);
  }
  .tbl.responsive td.cell-main {
    display: block; text-align: left;
    font-weight: 600; padding-bottom: .35rem;
  }
  .tbl.responsive td.cell-main::before { display: none; }
  .tbl.responsive td.why { text-align: left; display: block; }
  .tbl.responsive td.why::before { display: block; margin-bottom: .15rem; }
  .tbl.responsive .empty { display: block; text-align: center; }

  .bench-row { flex-direction: column; align-items: stretch; gap: .2rem; }
  .bench-row label { flex: none; }
  .bench-or { padding: 0; }
  .search-row { flex-direction: column; }
  .fb-row { flex-wrap: wrap; }
  .fb-row input[type=text] { flex-basis: 100%; order: 3; }
  .cols { flex-direction: column; }
  .side { flex: none; width: 100%; }
  .draft-body { padding: .8rem .9rem; }
}

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .45rem; }
.dot-on  { background: var(--green); }
.dot-off { background: var(--border); }

ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { padding: .3rem 0; display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }
ul.plain.tight li { padding: .15rem 0; }

/* ── Login ── */
.login-page { display: flex; min-height: 100vh; align-items: center; justify-content: center; }
.login-box {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow); padding: 2rem; width: min(92vw, 24rem);
}
.login-box h1 { margin: 0 0 1rem; }
.login-box label { display: block; margin: .8rem 0; color: var(--muted); font-size: 13px; }
.login-box input {
  width: 100%; margin-top: .3rem; padding: .55rem .7rem;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font-size: 14px;
}
.login-box button {
  width: 100%; margin-top: 1rem; padding: .6rem;
  background: var(--accent); color: #fff; border: 0; border-radius: 8px;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.login-error {
  background: var(--red-bg); color: var(--red); border-radius: 8px;
  padding: .55rem .8rem; margin-bottom: .6rem; font-size: 13px;
}

/* ── Beta pill ── */
.beta-pill {
  position: fixed; right: .8rem; bottom: .8rem; z-index: 25;
  display: flex; align-items: center; gap: .45rem;
  background: var(--accent); color: #fff; border-radius: 999px;
  padding: 3px 11px; font-size: 11.5px; opacity: .85; pointer-events: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
}
.beta-pill:hover { opacity: 1; }
.beta-pill .bp-sep { opacity: .55; }
.beta-pill a.feedback-link {
  pointer-events: auto; color: inherit; font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; gap: .3rem;
}
.beta-pill a.feedback-link:hover { text-decoration: underline; }

/* ── Purchases (2026-09-21) ─────────────────────────────────────────────────
   Filter bar, numeric table columns and the overdue/warning states used by
   purchases.php. Kept with the family tokens — no new colours. */

.filter-bar {
  display: flex; flex-wrap: wrap; gap: .8rem 1.1rem; align-items: flex-end;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); padding: .8rem 1rem; margin-bottom: 1rem;
}
.filter-bar label {
  display: flex; flex-direction: column; gap: .25rem;
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}
.filter-bar label.chk {
  flex-direction: row; align-items: center; gap: .4rem;
  text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--text);
  padding-bottom: .45rem;
}
.ctl {
  padding: .4rem .6rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font-size: 13px; min-width: 9rem;
}

/* Money and counts read far better right-aligned and tabular — the eye can
   compare magnitudes down the column without re-reading each figure. */
.tbl th.num, .tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }

.row-overdue td { background: var(--red-bg); }
.stat-warn { border-color: var(--red); }
.stat-warn .stat-n { color: var(--red); }

.notice-info {
  background: var(--blue-bg); border-color: var(--blue); color: var(--text);
}

/* On a phone the responsive table stacks, and right-aligned numbers then sit
   oddly against their data-label — put them back to the left. */
@media (max-width: 800px) {
  .tbl td.num { text-align: left; }
  .filter-bar label, .filter-bar .ctl { width: 100%; }
}

/* ── Purchase detail (2026-09-21) ───────────────────────────────────────────── */

.crumb { margin: 0 0 .9rem; font-size: 13px; }
.lead { font-size: 15px; margin: 0 0 1rem; }
.muted-note { color: var(--muted); font-size: 12px; margin: .5rem 0 0; }
small.block { display: block; color: var(--muted); }

/* Label/value pairs. Two columns on desktop so a dozen facts stay scannable,
   one column on a phone. */
.facts {
  display: grid; grid-template-columns: max-content 1fr max-content 1fr;
  gap: .45rem 1rem; margin: 0; align-items: baseline;
}
.facts dt {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); white-space: nowrap;
}
.facts dd { margin: 0; }
.facts dd small { margin-left: .3rem; }

.cell-bad { color: var(--red); }
.tbl tfoot td { border-top: 2px solid var(--border); padding-top: .55rem; }

@media (max-width: 900px) {
  .facts { grid-template-columns: max-content 1fr; }
}

/* ── Item coding form (2026-09-21) ──────────────────────────────────────────── */

.ctl-sm { min-width: 0; width: 100%; max-width: 15rem; font-size: 12px; padding: .25rem .4rem; }
.form-actions {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--border);
}
.form-actions .muted-note { margin: 0; }
.notice-ok { background: var(--green-bg); border-color: var(--green); color: var(--text); }

/* ── Purchase edit form (2026-09-21) ────────────────────────────────────────── */

/* A responsive field grid: controls keep a sensible minimum width and wrap,
   rather than being pinned to a column count that breaks at some widths. */
.fields {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .8rem 1rem; align-items: end;
}
.fields > label { display: flex; flex-direction: column; gap: .25rem;
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.fields > label.chk, .fields label.chk {
  flex-direction: row; align-items: center; gap: .45rem;
  text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--text);
}
.fields .f-wide { grid-column: 1 / -1; }
.fields input[type="text"], .fields input[type="date"], .fields input[type="number"] { width: 100%; }

.new-supplier { display: flex; flex-direction: column; gap: .4rem;
  border-top: 1px dashed var(--border); padding-top: .8rem; }
.new-supplier .ctl { max-width: 26rem; }

.item-edit {
  border: 1px solid var(--border); border-radius: 10px;
  padding: .9rem 1rem 1rem; margin: 0 0 .9rem; background: var(--bg);
}
.item-edit legend { font-size: 12px; font-weight: 600; padding: 0 .4rem; }
.item-new { border-style: dashed; }
.item-edit .chk.del { color: var(--red); }

.sticky-actions {
  position: sticky; bottom: 0; z-index: 5;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); padding: .8rem 1rem; margin-top: 1rem;
}
.btn-plain { font-size: 13px; }

/* ── Bulk edit (2026-09-21) ─────────────────────────────────────────────────── */
.tbl th.tick, .tbl td.tick { width: 1.8rem; text-align: center; }
.bulk-panel { margin-top: 1rem; }
.bulk-panel h2 { margin-bottom: .3rem; }

/* ── Purchase side panel (2026-09-21) ───────────────────────────────────────
   Kit's iframe panel with Projects' resizable docked edge. Docked, not modal:
   the list narrows beside it and stays clickable, because working the queue
   means going from one purchase to the next. */

:root { --fin-panel-w: min(860px, max(640px, 52vw)); }

.fin-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: var(--fin-panel-w);
  z-index: 50; display: flex; flex-direction: column;
  background: var(--panel); border-left: 1px solid var(--border);
  box-shadow: -10px 0 30px rgba(35, 25, 66, .10);
  animation: fin-slide .16s ease-out;
}
@keyframes fin-slide { from { transform: translateX(20px); opacity: .6; } to { transform: none; opacity: 1; } }

.fin-panel__bar {
  display: flex; align-items: center; gap: .6rem;
  padding: .45rem .7rem; border-bottom: 1px solid var(--border); background: var(--panel);
}
.fin-panel__title {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fin-panel__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border: 0; border-radius: 8px;
  background: none; color: var(--muted); cursor: pointer;
}
.fin-panel__close:hover { background: var(--grey-bg); color: var(--text); }
.fin-panel__ext {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: 12px; color: var(--muted); white-space: nowrap;
}
.fin-panel__ext:hover { color: var(--accent); }
.fin-panel__frame { flex: 1; width: 100%; border: 0; background: var(--bg); }

/* The drag handle sits ON the panel's left edge, a few px wide, and only
   appears where there is room to dock. */
.fin-panel__grip { display: none; }
.fin-panel__frame { min-height: 0; }

/* The page behind narrows rather than being covered. */
body.fin-panel-open { overflow: hidden; }

@media (min-width: 900px) {
  .fin-panel__grip {
    display: block; position: absolute; left: -3px; top: 0; bottom: 0;
    width: 7px; cursor: col-resize; z-index: 3;
  }
  .fin-panel__grip:hover, body.fin-resizing .fin-panel__grip {
    background: color-mix(in srgb, var(--accent) 35%, transparent);
  }
  body.fin-panel-open { overflow: auto; }
  body.fin-panel-open .page { margin-right: var(--fin-panel-w); }
  body.fin-panel-open .topbar-inner { padding-right: calc(var(--fin-panel-w) + 1rem); }
  body.fin-resizing { cursor: col-resize; user-select: none; }
  body.fin-resizing .fin-panel, body.fin-resizing .page { transition: none; animation: none; }
}

/* Phone: no room to dock, so it is a full-screen sheet. */
@media (max-width: 899px) {
  .fin-panel { width: 100%; border-left: 0; }
}

/* Which row the panel is showing. */
tr.row-open > td { background: var(--blue-bg); }

/* Inside the panel the page is just the content — no top bar, tighter gutter. */
.page--panel { margin: .8rem auto; padding: 0 .9rem; max-width: none; }
body.in-panel .sticky-actions { bottom: 0; }

/* ── Compact purchase form (2026-09-21) ─────────────────────────────────────
   David, comparing us with ver5: "look at ver5 and how neat and compact it is
   and how simple it is and easy to see." ver5 fits a whole purchase and its
   lines into the height of a couple of table rows. This is the same density,
   wrapping into a panel rather than scrolling sideways. */

.fields--tight { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .55rem .7rem; }
.fields--tight > label { gap: .15rem; font-size: 10px; }
.fields--tight .ctl { padding: .3rem .45rem; font-size: 12.5px; min-width: 0; }
.fields--tight label small { text-transform: none; letter-spacing: 0; opacity: .75; }

/* A derived value, shown where a field would be so the row still lines up. */
.ctl--out {
  display: block; padding: .3rem .45rem; font-size: 12.5px;
  border: 1px dashed var(--border); border-radius: 8px;
  background: transparent; color: var(--muted);
}

/* One item line. */
.line {
  border: 1px solid var(--border); border-radius: 9px;
  padding: .5rem .7rem .7rem; margin: 0 0 .55rem; background: var(--bg);
}
.line legend {
  display: flex; gap: .5rem; align-items: baseline;
  font-size: 11px; font-weight: 600; padding: 0 .35rem;
}
.line--new { border-style: dashed; }
.line__total { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 500; }
.line .chk.del { color: var(--red); font-size: 12px; }

/* Sub-total / VAT / Total, as ver5 shows under every purchase. */
.totals { width: auto; min-width: 13rem; margin-left: auto; }
.totals td { padding: .2rem .5rem; border: 0; font-size: 12.5px; }
.totals td.num { text-align: right; font-variant-numeric: tabular-nums; min-width: 6rem; }
.totals__grand td { border-top: 1px solid var(--border); font-weight: 700; padding-top: .35rem; }

/* Short explanatory lines. The long paragraphs that were here made the panel
   twice as tall as the form it was explaining. */
.hint { color: var(--muted); font-size: 11.5px; line-height: 1.45; margin: .5rem 0 0; }
#supplier_hint { color: var(--accent); }

/* In the panel the cards stack, so drop the gutters that assume a wide page. */
body.in-panel .cols { display: block; }
body.in-panel .side { margin-top: .8rem; }
body.in-panel .card { padding: .75rem .85rem; }
body.in-panel h2 { margin-bottom: .55rem; }

/* An item line packs more per row than the header does: at full width it is
   two rows, in the panel three. Before this each line was 291px tall — ver5
   fits one in about 35. */
.line .fields--tight { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
.fields--tight .f-2 { grid-column: span 2; }
.line .qty, .line .price { max-width: 7rem; }
.line .chk.del { grid-column: 1 / -1; margin-top: .1rem; }

/* A line ticked for deletion must look like it (2026-09-22). */
.line--deleting { opacity: .55; border-color: var(--red); background: var(--red-bg); }
.line--deleting legend::after { content: ' \2014 will be deleted on save'; color: var(--red); font-weight: 700; }
.line .chk.del { justify-self: end; }

/* ═══ Friendly face (2026-09-22) ═════════════════════════════════════════════
   David: "It's not a typical admin page. A lot of people use this page. Use
   something like YETI as a template for look and feel — friendly and
   approachable." Borrowed from YETI's stylesheet: the solid brand header, 16px
   base type, the two-button start band, and card rows for lists. The family
   tokens stay; this is a change of temperature, not of palette. */

body { font-size: 16px; }
h1 { font-size: 22px; }

/* The header: a solid brand bar, as YETI, Kit and the Mendip App have. */
.topbar { background: var(--accent); border-bottom: 0; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.topbar-inner { padding: .7rem 1rem; }
.brand, .brand span { color: #fff; font-size: 17px; }
.brand span { opacity: .85; }
.topbar nav a { color: rgba(255,255,255,.9); font-weight: 600; font-size: 15px; }
.topbar nav a:hover { color: #fff; text-decoration: none; }
.topbar-user, .topbar-user a { color: rgba(255,255,255,.85); }
.topbar-user a:hover { color: #fff; }
[data-theme="dark"] .topbar { background: #0b3d55; }

/* ── The start band ── */
.start { margin: .25rem 0 1.5rem; }
.start__h { font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--muted); margin-bottom: .6rem; }
.start-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; }
.start-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: .2rem;
  padding: 1.05rem 1.15rem; min-height: 104px; border-radius: 14px;
  background: var(--accent); color: #fff; box-shadow: var(--shadow); text-decoration: none;
}
.start-btn:hover { background: #004a6a; text-decoration: none; }
.start-btn--quiet { background: var(--panel); color: var(--accent); border: 1px solid var(--border); }
.start-btn--quiet:hover { background: var(--blue-bg); }
.start-btn__icon svg { width: 28px; height: 28px; }
.start-btn__label { font-weight: 700; font-size: 18px; margin-top: auto; }
.start-btn__sub { font-size: 13.5px; opacity: .85; }
@media (max-width: 560px) {
  .start-grid { gap: .55rem; }
  .start-btn { min-height: 88px; padding: .85rem; }
  .start-btn__label { font-size: 16px; }
}

/* ── My purchases ── */
.mine__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.mine__h { font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--text); margin: 0; }
.mine__h small { color: var(--muted); font-weight: 400; margin-left: .35rem; }
.mine__toggle { font-size: 14px; }
.mine__empty p { margin: 0; color: var(--muted); }
.mine__list { display: flex; flex-direction: column; gap: .55rem; }

/* One purchase, as a row a person can read at a glance: who, what, and
   where it has got to. Amount and status on the right, as a receipt. */
.prow {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1.05rem; background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow); color: var(--text); text-decoration: none;
}
.prow:hover { background: var(--blue-bg); text-decoration: none; border-color: var(--accent); }
.prow__main { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.prow__who { font-weight: 700; font-size: 16px; }
.prow__what { font-size: 15px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow__meta { font-size: 13px; color: var(--muted); }
.prow__side { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; flex: 0 0 auto; }
.prow__amount { font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; }
.prow .chip { font-size: 13px; padding: .2rem .7rem; }
@media (max-width: 560px) {
  .prow { flex-direction: column; align-items: stretch; gap: .5rem; }
  .prow__side { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* The edit form keeps its compact controls, but its labels and inputs come up
   to a size a person can read on a phone in a hurry. */
.fields--tight > label { font-size: 11px; }
.fields--tight .ctl { font-size: 14px; padding: .4rem .55rem; }
.line legend { font-size: 12.5px; }
.totals td { font-size: 14px; }
.hint { font-size: 12.5px; }
.notice { font-size: 15px; }

/* ── Panel form fixes (2026-09-22, from David's screenshot) ─────────────────
   A date input has an intrinsic minimum width in Chrome that width:100% does
   not override, so in a narrow grid cell it spilled into the next cell and hid
   the Terms figure. Grid children need min-width:0 to be allowed to shrink. */
.fields > label, .fields > div { min-width: 0; }
.fields .ctl, .fields input[type="date"], .fields select { min-width: 0; max-width: 100%; }

/* Lines are added on demand now, not offered as two permanent blanks. */
.add-line {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .9rem; border: 1px dashed var(--accent); border-radius: 10px;
  background: transparent; color: var(--accent); font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; margin: .2rem 0 .8rem;
}
.add-line:hover { background: var(--blue-bg); }
.add-line svg { width: 16px; height: 16px; }
.line--new legend .line__remove {
  margin-left: auto; border: 0; background: none; color: var(--muted); cursor: pointer; font: inherit; font-size: 12px;
}
.line--new legend .line__remove:hover { color: var(--red); }

/* ── Attach the invoice (2026-09-22, David: "+ ATTACH") ─────────────────── */
.files li { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; padding: .3rem 0; }
.files li a { font-weight: 600; }
.files li small { color: var(--muted); }
.file-remove { margin-left: auto; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.file-remove:hover { color: var(--red); }
.attach {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  margin-top: .7rem; padding: .9rem 1rem; border: 2px dashed var(--accent); border-radius: 12px;
  color: var(--accent); background: transparent; cursor: pointer; text-align: center;
}
.attach:hover { background: var(--blue-bg); }
.attach svg { width: 22px; height: 22px; }
.attach span { font-weight: 700; font-size: 15px; }
.attach small { color: var(--muted); font-size: 12px; }
.attach--busy { opacity: .6; pointer-events: none; }

/* The hidden attribute must always win, whatever display an element's own
   class gives it — otherwise a label styled display:flex ignores hidden. */
[hidden] { display: none !important; }

/* ── Start from the receipt (2026-09-22) ─────────────────────────────────── */
.receipt { margin-bottom: 1rem; }
.receipt__drop {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: 1.1rem 1rem; border: 2px dashed var(--accent); border-radius: 14px;
  color: var(--accent); background: var(--blue-bg); cursor: pointer; text-align: center;
}
.receipt__drop:hover { background: #dbeaf5; }
.receipt__drop svg { width: 28px; height: 28px; }
.receipt__title { font-weight: 700; font-size: 16px; }
.receipt__sub { font-size: 13px; color: var(--muted); }
.receipt__drop--busy { opacity: .6; pointer-events: none; }
.receipt__drop--done { border-style: solid; background: var(--green-bg); color: var(--green); }
/* One tap to the camera. Phones only: on a desktop `capture` is ignored, so
   the picker above already does everything this would. */
.receipt__cam {
  display: none; align-items: center; justify-content: center; gap: .45rem;
  margin-top: .5rem; padding: .7rem 1rem; border-radius: 10px;
  border: 1px solid var(--border); background: var(--panel); color: var(--accent);
  font-weight: 600; font-size: 14px; cursor: pointer;
}
.receipt__cam svg { width: 20px; height: 20px; }
.receipt__cam[hidden] { display: none !important; }
@media (max-width: 899px), (pointer: coarse) { .receipt__cam { display: flex; } }
.receipt__status { margin-top: .5rem; font-size: 13.5px; line-height: 1.45; padding: .5rem .7rem; border-radius: 8px; }
.receipt__status--ok   { background: var(--green-bg); color: var(--text); }
.receipt__status--warn { background: var(--amber-bg); color: var(--text); }
.receipt__status--bad  { background: var(--red-bg); color: var(--text); }
.receipt__status--busy { color: var(--muted); }

/* A value the receipt reader filled in, until the person types over it. */
.from-receipt { background: #fff8e0 !important; border-color: #e3b04b !important; }
[data-theme="dark"] .from-receipt { background: #33290f !important; }

/* A field the pre-submit check flagged (2026-09-22). */
.field-bad { border-color: var(--red) !important; background: var(--red-bg) !important; }
#precheck { position: sticky; top: 0; z-index: 4; }

/* ── Ordering by column title (2026-09-23) ──────────────────────────────── */
.tbl th.sortable a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .25rem; }
.tbl th.sortable a:hover { color: var(--accent); }
.tbl th.sort-on a { color: var(--accent); }
.sort-arrow { font-size: 8px; opacity: .3; }
.sort-on .sort-arrow { opacity: 1; }
.mine__tools { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.mine__sort { display: inline-flex; align-items: center; margin: 0; }
.mine__sort label { display: inline-flex; align-items: center; gap: .4rem; font-size: 13px; color: var(--muted); }
.mine__sort .ctl { width: auto; padding: .25rem 1.6rem .25rem .5rem; font-size: 13px; }
.hidden-note { margin: -.3rem 0 1rem; font-size: 13px; }

/* ── Repeat this purchase ───────────────────────────────────────────────── */
.recur-card { margin-top: 1rem; }
.recur__row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: .6rem 0; max-width: 480px; }
.recur__row label small { color: var(--muted); font-weight: 400; margin-left: .3rem; }
@media (max-width: 560px) { .recur__row { grid-template-columns: 1fr; } }

/* ── What the panel saved, shown once on the reloaded list ──────────────── */
.fin-flash { margin-bottom: 1rem; }
.fin-flash__again { margin-left: .4rem; }

/* ═══ Needs you (2026-09-23) ═════════════════════════════════════════════════
   Purchases raised for someone with placeholders, and the deck that finishes
   them. Amber is the "needs a person" colour throughout the app. */
.chip--strong { font-weight: 700; border: 1px solid currentColor; }
.notice-need { background: var(--amber-bg); border-color: var(--amber); }

.needband {
  display: flex; align-items: center; gap: 1rem; margin: 0 0 1.2rem; padding: 1rem 1.15rem;
  border-radius: 14px; background: var(--amber-bg); border: 1px solid var(--amber);
  color: var(--text); text-decoration: none; box-shadow: var(--shadow);
}
.needband:hover { text-decoration: none; filter: brightness(.98); }
.needband__icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: var(--amber); color: #fff; display: grid; place-items: center; }
.needband__icon svg { width: 22px; height: 22px; }
.needband__main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.needband__label { font-weight: 700; font-size: 18px; }
.needband__sub { font-size: 14px; color: var(--muted); }
.needband__go { margin-left: auto; flex: 0 0 auto; font-weight: 700; color: var(--accent); white-space: nowrap; }
.needhint { margin: -.4rem 0 1rem; }
@media (max-width: 560px) {
  .needband { flex-wrap: wrap; }
  .needband__go { margin-left: 3.7rem; }
}

/* ── The deck ── */
.deck { max-width: 1080px; margin: 0 auto; }
.deck__top { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1rem; }
.deck__back { font-size: 13px; white-space: nowrap; }
.deck__progress { display: flex; align-items: center; gap: .8rem; flex: 1; }
.deck__bar { flex: 1; height: 8px; border-radius: 4px; background: var(--grey-bg); overflow: hidden; }
.deck__fill { height: 100%; width: 0; background: var(--accent); border-radius: 4px; transition: width .35s ease; }
.deck__count { font-size: 13px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.deck__empty h2 { margin-top: 0; }

.dcard {
  position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow); overflow: hidden;
  opacity: 0; transform: translateY(14px); transition: opacity .28s ease, transform .28s ease;
}
.dcard.is-in { opacity: 1; transform: none; }
.dcard.is-out { opacity: 0; transform: translateX(-40px); }
.dcard.is-done { opacity: .35; transform: scale(.985); }
.dcard__tick {
  position: absolute; inset: 0; display: grid; place-items: center; color: var(--green);
  animation: dtick .42s ease;
}
.dcard__tick svg { width: 96px; height: 96px; filter: drop-shadow(0 4px 12px rgba(0,0,0,.15)); }
@keyframes dtick { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.dcard__head { padding: 1rem 1.3rem .8rem; border-bottom: 1px solid var(--border); background: var(--bg); }
.dcard__month { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.dcard__who { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: .15rem; }
.dcard__supplier { margin: 0; font-size: 24px; text-transform: none; letter-spacing: 0; color: var(--text); }
.dcard__amount { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dcard__meta { font-size: 13.5px; color: var(--muted); margin-top: .2rem; }

.dcard__body { display: grid; grid-template-columns: minmax(280px, 5fr) 7fr; }
@media (max-width: 800px) { .dcard__body { grid-template-columns: 1fr; } }

.dreceipt { padding: 1rem; border-right: 1px solid var(--border); background: var(--bg); }
@media (max-width: 800px) { .dreceipt { border-right: 0; border-bottom: 1px solid var(--border); } }
.dreceipt__view img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: contain; border-radius: 10px; background: #fff; border: 1px solid var(--border); }
.dreceipt__view iframe { display: block; width: 100%; height: 520px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.dreceipt__open, .dreceipt__file { display: inline-block; margin-top: .5rem; font-size: 13px; }
.dreceipt__drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; min-height: 220px;
  padding: 1.2rem; border: 2px dashed var(--accent); border-radius: 14px; background: var(--blue-bg);
  color: var(--accent); text-align: center; cursor: pointer;
}
.dreceipt__drop:hover, .dreceipt__drop.is-over { background: #dbeaf5; }
.dreceipt__icon svg { width: 34px; height: 34px; }
.dreceipt__title { font-weight: 700; font-size: 17px; }
.dreceipt__sub { font-size: 13px; color: var(--muted); }
.dreceipt__cam {
  display: none; align-items: center; justify-content: center; gap: .4rem; margin-top: .5rem; padding: .65rem 1rem;
  border-radius: 10px; border: 1px solid var(--border); background: var(--panel); color: var(--accent); font-weight: 600; font-size: 14px; cursor: pointer;
}
@media (max-width: 899px), (pointer: coarse) { .dreceipt__cam { display: flex; } }
.dreceipt__add.is-busy { opacity: .6; pointer-events: none; }
.dreceipt__status, .dreceipt__note { margin: .6rem 0 0; font-size: 13.5px; line-height: 1.45; padding: .5rem .7rem; border-radius: 8px; background: var(--panel); border: 1px solid var(--border); }
.dreceipt__status.bad { background: var(--red-bg); }
.dreceipt__status.busy { color: var(--muted); }

.dform { padding: 1rem 1.3rem 1.2rem; display: flex; flex-direction: column; gap: 1rem; }
.dform label { display: flex; flex-direction: column; gap: .25rem; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; min-width: 0; }
.dform .ctl { font-size: 15px; }
.dfield--need > label { color: var(--amber); }
.dfield--need .ctl { border-color: var(--amber); background: var(--amber-bg); }
.dform__desc { font-size: 17px !important; padding: .55rem .7rem; }

.dchips__wrap { display: flex; align-items: flex-start; gap: .5rem; margin-top: .45rem; flex-wrap: wrap; }
.dchips__label { font-size: 12px; color: var(--muted); padding-top: .35rem; white-space: nowrap; }
.dchips { display: flex; flex-wrap: wrap; gap: .35rem; }
.dchip {
  border: 1px solid var(--accent); background: var(--panel); color: var(--accent); border-radius: 999px;
  padding: .3rem .75rem; font-size: 13.5px; cursor: pointer; font-family: inherit; text-align: left;
}
.dchip:hover { background: var(--blue-bg); }
.dchip--strong { background: var(--accent); color: #fff; }
.dchip--strong:hover { background: #004a6a; }

/* ── The deck on a phone (complete.js adds .deck--compact under 800px) ─────── */
.dsum { display: flex; align-items: center; gap: .7rem; margin-top: .55rem; padding: .6rem .7rem; border-radius: 10px; background: var(--green-bg); }
.dsum--empty { background: var(--amber-bg); }
.dsum__words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.dsum__main { font-size: 15.5px; line-height: 1.25; }
.dsum__sub { font-size: 13px; color: var(--muted); line-height: 1.3; }
.dsum__change, .dline__addbook {
  flex: 0 0 auto; background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: .45rem .9rem;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--accent); cursor: pointer;
}
.dline__addbook { margin-top: .6rem; border-style: dashed; font-weight: 500; }
.dline__codewrap .dline__coding { margin-top: .5rem; }
.dline__coding[hidden], .dline__extra[hidden] { display: none; }
.dopts { display: flex; flex-direction: column; gap: .45rem; width: 100%; }
.dopt {
  display: flex; flex-direction: column; gap: .12rem; width: 100%; text-align: left; cursor: pointer;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: .65rem .8rem; font: inherit; color: var(--text);
}
.dopt strong { font-size: 15px; line-height: 1.25; }
.dopt span { font-size: 13px; color: var(--muted); }
.dopt em { font-size: 12px; font-style: normal; color: var(--green); }
.dopt.is-picked { border-color: var(--green); background: var(--green-bg); box-shadow: inset 0 0 0 1px var(--green); }
.dopt--strong { border-color: var(--accent); }
.dopt--strong em { color: var(--accent); }

.deck--compact .deck__top { gap: .7rem; margin-bottom: .6rem; }
.deck--compact .dcard__head { padding: .8rem .9rem .65rem; }
.deck--compact .dcard__supplier, .deck--compact .dcard__amount { font-size: 20px; }
.deck--compact .dreceipt { padding: .7rem .9rem; }
.deck--compact .dreceipt__view img, .deck--compact .dview__canvas { max-height: 240px; width: auto; max-width: 100%; margin: 0 auto; object-fit: contain; }
.deck--compact .dview__iframe { height: 240px; }
.deck--compact .dform { padding: .9rem .9rem 1rem; gap: .85rem; }
.deck--compact .dform .ctl { font-size: 16px; min-height: 44px; }      /* 16px: iOS zooms the page on anything smaller */
.deck--compact .dform__desc { font-size: 17px !important; }
.deck--compact .dline { padding: .7rem .75rem; }
.deck--compact .dline__head { align-items: flex-start; }
.deck--compact .dchips__wrap { flex-direction: column; gap: .4rem; margin-top: 0; }
.deck--compact .dchips__label { padding: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.deck--compact .dform__learned, .deck--compact .dform__partial { display: none; }
.deck--compact .dv5-host { display: none; }
.deck--compact .dform__actions {
  position: sticky; bottom: 0; z-index: 6; margin: .3rem -.9rem -1rem; padding: .7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
  background: var(--panel); border-top: 1px solid var(--border); flex-wrap: nowrap; gap: .6rem;
}
.deck--compact .dform__save { flex: 1; padding: .85rem 1rem; font-size: 16px; border-radius: 12px; }
.deck--compact .dform__skip { font-size: 15px; padding: .6rem .5rem; }
.deck--compact .dform__full { margin-left: 0; font-size: 13px; white-space: nowrap; }
.deck--compact.deck--typing .dform__actions { position: static; }       /* the keyboard is up: do not sit on top of the field */
body:has(.deck--compact) .beta-pill { position: static; margin: 1.2rem auto 1rem; width: max-content; }
body:has(.deck--typing) .beta-pill { display: none; }

.dlines { display: flex; flex-direction: column; gap: .6rem; }
.dline { border: 1px solid var(--border); border-radius: 12px; padding: .7rem .85rem; }
.dline--need { border-color: var(--amber); }
.dline__head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.dline__name { font-weight: 600; font-size: 15px; }
.dline__title { flex: 1; }
.dline__total { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dline__coded { font-size: 13.5px; color: var(--muted); margin-top: .25rem; }
.dline__coding { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem .7rem; margin-top: .6rem; }
.dline__coding .dline__acct { grid-column: 1 / -1; }
@media (max-width: 560px) { .dline__coding { grid-template-columns: 1fr; } }
.from-chip { transition: background .3s; background: #fff8e0 !important; }

.dform__status { margin: 0; }
.dform__actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .2rem; }
.dform__actions kbd { font-family: inherit; font-size: 11px; opacity: .75; border: 1px solid currentColor; border-radius: 4px; padding: 0 .3rem; margin-left: .2rem; }
.dform__full { margin-left: auto; }

.dend { text-align: center; padding: 2.4rem 1.4rem; }
.dend h2 { font-size: 28px; margin: 0 0 .4rem; text-transform: none; letter-spacing: 0; color: var(--text); }
.dend__big { font-size: 18px; margin: 0 0 1rem; }
.deck__confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }

/* ── Receipt viewer with a magnifier (2026-09-23) ───────────────────────── */
.dview__stage { position: relative; overflow: hidden; border-radius: 10px; border: 1px solid var(--border); background: #fff; line-height: 0; }
.dview__canvas { display: block; max-width: 100%; cursor: zoom-in; }
.dview__iframe { display: block; width: 100%; height: 520px; border: 0; }
.dlens {
  position: absolute; width: 180px; height: 180px; pointer-events: none; border-radius: 50%;
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--accent), 0 10px 28px rgba(0,0,0,.35); background: #fff;
}
.dlens[hidden] { display: none !important; }
.dview__tools { display: flex; align-items: center; gap: .4rem; margin-top: .5rem; font-size: 13px; }
.dview__tools .dreceipt__open { margin: 0 0 0 auto; }
.dview__btn {
  display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .5rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--panel); color: var(--muted); cursor: pointer; font: inherit; font-size: 13px;
}
.dview__btn svg { width: 16px; height: 16px; }
.dview__btn.is-on { color: var(--accent); border-color: var(--accent); background: var(--blue-bg); }
.dview__btn:disabled { opacity: .4; cursor: default; }
.dview__btn[hidden] { display: none !important; }
.dview__page { color: var(--muted); }
.dview__page[hidden] { display: none !important; }

/* A coding learned from lines like this one — the strongest hint on a card. */
.dchip--learned { border-color: var(--green); color: var(--green); }
.dchip--learned:hover { background: var(--green-bg); }
.dform__learned { margin: -.3rem 0 0; color: var(--green); }

/* Read an already-attached receipt (David's "run through API" button). */
.dview__read {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: .6rem; padding: .55rem .9rem;
  border-radius: 10px; border: 1px dashed var(--accent); background: var(--blue-bg); color: var(--accent);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.dview__read:hover { background: #dbeaf5; }
.dview__read:disabled { opacity: .6; cursor: default; }
.dview__read svg { width: 18px; height: 18px; }

/* ── The live strip under a card: this purchase as ver5 shows it ────────── */
.dv5-host { margin-top: .9rem; }
.dv5 { background: #e9f6e9; border: 1px solid #bfe0bf; border-radius: 12px; padding: .6rem .8rem .7rem; font-size: 12.5px; color: #1f2d1f; }
[data-theme="dark"] .dv5 { background: #1c2a1c; border-color: #2f4a2f; color: var(--text); }
.dv5__label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #4b6b4b; margin-bottom: .4rem; font-weight: 700; }
[data-theme="dark"] .dv5__label { color: #8fbf8f; }
.dv5__scroll { overflow-x: auto; }
.dv5 table { border-collapse: collapse; width: 100%; white-space: nowrap; }
.dv5 th { font-weight: 600; text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: #4b6b4b; padding: .1rem .45rem; }
[data-theme="dark"] .dv5 th { color: #8fbf8f; }
.dv5 td { padding: .22rem .45rem; vertical-align: top; }
.dv5__head td { border-top: 1px solid #cfe8cf; border-bottom: 1px solid #cfe8cf; }
.dv5__ref { color: #c0392b; font-weight: 600; }
.dv5__sup, .dv5__title { font-weight: 600; }
.dv5__desc { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.dv5__num { text-align: right; font-variant-numeric: tabular-nums; }
.dv5__tick { text-align: center; font-size: 14px; }
.dv5__tbc { color: var(--amber); font-weight: 700; }
.dv5__items { margin-top: .5rem; }
.dv5__items thead th { background: #d9ecd9; }
[data-theme="dark"] .dv5__items thead th { background: #243624; }
.dv5__items tbody td { border-bottom: 1px solid #cfe8cf; }
.dv5__items tfoot td { padding-top: .18rem; padding-bottom: .1rem; color: #4b6b4b; }
.dv5__items tfoot .dv5__total td { font-weight: 700; color: inherit; font-size: 13.5px; }

/* A card saved part-done: it comes round again. */
.dcard__tick--later { flex-direction: column; gap: .4rem; color: var(--amber); }
.dcard__tick--later svg { width: 64px; height: 64px; }
.dcard__later { font-size: 15px; font-weight: 700; background: var(--panel); padding: .4rem .8rem; border-radius: 999px; box-shadow: var(--shadow); }
.dform__partial { margin: -.4rem 0 0; }

.dreceipt__paste { margin: .45rem 0 0; text-align: center; font-size: 12.5px; color: var(--muted); }
@media (pointer: coarse) { .dreceipt__paste { display: none; } }

.dline__extra { margin-top: .55rem; }
.dline__bookwrap { max-width: 220px; }

.dform__supplier { font-size: 17px !important; padding: .55rem .7rem; }
.dform__addsup { text-transform: none; letter-spacing: 0; font-size: 13.5px; color: var(--text); flex-direction: row; align-items: center; gap: .4rem; margin-top: .35rem; }
.dform__addsup[hidden] { display: none !important; }

/* Attachment on file, as ver5's green/grey Files icon (David, 2026-09-23). */
.prow__side { position: relative; padding-left: 2rem; }
.prow__clip { position: absolute; left: 0; top: .1rem; display: inline-flex; align-items: center; gap: .1rem; font-size: 11px; font-weight: 700; }
.prow__clip svg { width: 18px; height: 18px; }
.prow__clip--on { color: var(--green); }
.prow__clip--off { color: var(--border); }
.prow__clip--off svg { stroke-dasharray: 2 2; }
@media (max-width: 560px) { .prow__side { padding-left: 0; } .prow__clip { position: static; margin-right: .5rem; } }

/* ═══ Embedded in the Mendip App (desktop shell tab / phone frame) ══════════
   The shell's strip (back · app name · ⋯) is ITS chrome, so ours slims: the
   brand, the user's name and Log out go (a logout inside the frame would drop
   the shared sign-in for the host app); the nav stays, inline at every width,
   because it is the only way between Purchases, Complete and Admin in here.
   Nothing else changes. */
body.embedded .brand,
body.embedded .topbar-user,
body.embedded .hide-embedded          { display: none !important; }
body.embedded .topbar-inner           { padding: .35rem .6rem; min-height: 0; }
body.embedded .topbar nav a           { font-size: 14px; padding: .25rem .5rem; }
body.embedded .nav-toggle             { display: none; }
body.embedded #topnav                 { display: flex !important; gap: .2rem; position: static; flex-direction: row; background: none; box-shadow: none; padding: 0; }
body.embedded .beta-pill .bp-beta, body.embedded .beta-pill .bp-sep { display: none !important; }
body.embedded .beta-pill:not(:has(.feedback-link)) { display: none !important; }
body.embedded .page                   { padding-top: .8rem; }

.bulk-panel--xero { border-color: var(--accent); }

/* ── The queue: table left, actions in a sticky column right (2026-09-25) ── */
.page:has(.queue-layout) { max-width: 1520px; }
.queue-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1rem; align-items: start; }
.queue-main { min-width: 0; }
.queue-side {
  position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 1rem;
  max-height: calc(100vh - 2rem); overflow-y: auto;
}
.queue-side .bulk-panel { margin-top: 0; }
.queue-side .fields { grid-template-columns: 1fr; gap: .6rem; }
.queue-side .form-actions { flex-direction: column; align-items: flex-start; gap: .5rem; }
.queue-side .muted-note { font-size: 12.5px; }
@media (max-width: 1100px) {
  .queue-layout { grid-template-columns: 1fr; }
  .queue-side { position: static; max-height: none; overflow: visible; }
}

/* ── Buttons: a secondary that is still a button (2026-09-25) ───────────── */
.btn--secondary { background: var(--panel); color: var(--accent); border: 1.5px solid var(--accent); }
.btn--secondary:hover { background: var(--blue-bg); }

/* ── The queue list: two lines a purchase ───────────────────────────────── */
/* Not overflow:hidden — it cut off a row's file list at the foot of the card (the FD, 2026-10-05). */
.qlist { padding: 0; overflow: visible; }
.qlist > .qrow:last-of-type { border-radius: 0 0 12px 12px; }
.qlist__head {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; padding: .6rem 1rem;
  border-bottom: 1px solid var(--border); background: var(--bg); font-size: 12.5px; color: var(--muted);
}
.qlist__tickall { display: inline-flex; align-items: center; gap: .35rem; }
.qlist__tickall input { width: 17px; height: 17px; }
.qlist__count { font-weight: 600; color: var(--text); }
.qlist__cols { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .1rem; }
.qlist__label { margin-right: .3rem; }
.qlist__cols a { color: var(--muted); text-decoration: none; padding: .2rem .5rem; border-radius: 6px; }
.qlist__cols a:hover { color: var(--accent); background: var(--blue-bg); }
.qlist__cols a.sort-on { color: var(--accent); background: var(--blue-bg); font-weight: 700; }
.qlist__cols .sort-arrow { font-size: 8px; margin-left: .2rem; }
.qlist__empty { padding: 1.6rem; text-align: center; color: var(--muted); }

.qrow { display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem; border-bottom: 1px solid var(--border); }
.qrow:last-of-type { border-bottom: 0; }
.qrow:hover { background: var(--blue-bg); }
.qrow--late { box-shadow: inset 4px 0 0 var(--red); }
.qrow--sent { opacity: .65; }
.qrow__tick { flex: 0 0 auto; display: flex; }
.qrow__tick input { width: 18px; height: 18px; cursor: pointer; }
.qrow__body { flex: 1; min-width: 0; }
/* Who raised it: the photo over their initials. A missing or broken photo removes itself and the initials show. */
.pp-av { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
         width: var(--pp-size, 28px); height: var(--pp-size, 28px); border-radius: 50%; overflow: hidden;
         background: var(--blue-bg); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.pp-av__in { font-size: calc(var(--pp-size, 28px) * .36); font-weight: 700; line-height: 1; letter-spacing: .02em; }
.pp-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qrow__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; font-size: 15px; line-height: 1.35; }
.qrow__ref { font-weight: 700; font-variant-numeric: tabular-nums; }
.qrow__supplier { font-weight: 700; color: var(--text); }
.qrow__desc { color: var(--muted); }
.qrow__meta { margin-top: .3rem; display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .7rem; font-size: 12.5px; color: var(--muted); }
.qrow__meta small { font-size: inherit; }
.qrow__meta .chip { font-size: 11px; padding: .05rem .5rem; margin-left: .2rem; }
.qrow__clip { display: inline-flex; align-items: center; gap: .15rem; color: var(--border); font-weight: 700; }
.qrow__clip svg { width: 15px; height: 15px; }
.qrow__clip--on { color: var(--green); }
/* Invoices: which PDFs exist. Proforma blue, invoice red (ver5's two icons), a missing one dashed and grey. */
.inv-doc { display: inline-flex; align-items: center; gap: .25rem; padding: .12rem .5rem .12rem .4rem; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.5; text-decoration: none; border: 1px solid transparent; }
.inv-doc svg { flex: none; }
.inv-doc--proforma { background: var(--blue-bg); color: var(--blue); border-color: currentColor; }
.inv-doc--invoice { background: #fdecea; color: #c0392b; border-color: currentColor; }
a.inv-doc:hover { filter: brightness(.95); text-decoration: underline; }
.inv-doc--none { color: var(--muted); border: 1px dashed var(--border); font-weight: 500; opacity: .75; }
.qrow__side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; min-width: 6.5rem; }
.qrow__value { font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; }
.qrow__value--neg { color: var(--red); }
@media (max-width: 560px) {
  .qrow { gap: .6rem; padding: .75rem .8rem; }
  .qrow__side { min-width: 0; }
  .qlist__cols { margin-left: 0; }
}

/* ── Company badge, one colour per company (2026-09-25) ─────────────────── */
.co {
  display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; line-height: 1;
  padding: .28rem .45rem; border-radius: 6px; color: #fff; background: var(--grey); vertical-align: middle;
}
.co--0 { background: var(--grey); }
.co--1 { background: #005e85; }   /* MAC — the brand blue */
.co--2 { background: #1e7e46; }   /* Basecamp — green */
.co--3 { background: #7a4b9c; }   /* Logistics — purple */
.co--4 { background: #b8651b; }   /* Hostels — amber-brown */
.co--5 { background: #c0392b; }   /* SUP Bristol — red */
.qrow__top .co { margin-right: .1rem; }

/* ── Files from the row: the clip opens a small list, each file in a new tab ── */
.qrow__files { position: relative; display: inline-block; }
.qrow__files > summary { list-style: none; cursor: pointer; border-radius: 6px; padding: .1rem .3rem; margin: -.1rem -.3rem; }
.qrow__files > summary::-webkit-details-marker { display: none; }
.qrow__files > summary:hover, .qrow__files[open] > summary { background: var(--green-bg); }
.qrow__cliplink { border-radius: 6px; padding: .1rem .3rem; margin: -.1rem -.3rem; text-decoration: none; font-size: 11px; }
.qrow__cliplink:hover { background: var(--green-bg); text-decoration: none; }
/* The pointer crosses the gap to the list without it closing. */
.qrow__filelist::before { content: ''; position: absolute; left: 0; right: 0; top: -.5rem; height: .5rem; }
.qrow__filelist {
  position: absolute; z-index: 30; left: 0; top: calc(100% + .35rem); min-width: 240px; max-width: 360px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow);
  padding: .35rem; display: flex; flex-direction: column;
}
.qrow__filelist a {
  display: flex; align-items: center; gap: .5rem; padding: .4rem .5rem; border-radius: 7px;
  font-size: 13px; color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qrow__filelist a:hover { background: var(--blue-bg); color: var(--accent); }
.ftype { flex: 0 0 auto; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; padding: .2rem .3rem; border-radius: 4px; background: var(--grey-bg); color: var(--grey); }
.ftype--pdf { background: #fdecea; color: #c0392b; }
.ftype--jpg, .ftype--jpeg, .ftype--png, .ftype--gif, .ftype--webp, .ftype--heic { background: var(--blue-bg); color: var(--blue); }

/* ── Income targets (targets.php) — moved from the admin app 2026-09-25 ──────
   The spreadsheet-style year grid. 16 areas × 12 months must read comfortably
   on a laptop; the card scrolls sideways on anything smaller, with the area
   names held sticky so you always know whose row you're in. */

.tgt-page { display: flex; flex-direction: column; gap: 1rem; }

/* This page earns the whole screen: 16 areas × 12 months wants every pixel
   the window has (the rest of the app keeps its 1200px column). */
.page:has(> .tgt-page) { max-width: none; padding: 0 1.4rem; }


/* ── Toolbar ── */
.tgt-toolbar { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; padding: .7rem 1rem; }
.tgt-nav { display: flex; gap: .5rem; align-items: center; }
.tgt-nav strong { min-width: 4.2rem; text-align: center; font-size: 16px; }
.tgt-yearbtn { padding: .35rem .8rem; }
.tgt-hint { flex: 1 1 22rem; line-height: 1.45; }

/* ── Drift banner ── */
.tgt-drift .btn { margin-left: .8rem; vertical-align: baseline; padding: .35rem .8rem; }

/* ── New-year setup ── */
.tgt-setup h2 { margin-top: 0; }
.tgt-setup-row { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; margin: .6rem 0 .8rem; }
.tgt-setup-row label { display: inline-flex; gap: .4rem; align-items: center; }
.tgt-setup-row input[type=number] {
  padding: .3rem .4rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text);
}

/* ── The grid ── */
.tgt-gridcard { padding: .8rem; overflow-x: auto; }
.tgt-grid { border-collapse: collapse; width: 100%; min-width: 980px; }
.tgt-grid th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); padding: .3rem .35rem; border-bottom: 1px solid var(--border);
  text-align: right;
}
.tgt-grid th.tgt-area { text-align: left; }
.tgt-grid td { padding: 2px 3px; border-bottom: 1px solid var(--border); }
.tgt-grid tr:last-child td { border-bottom: 0; }

.tgt-area {
  white-space: nowrap; font-size: 13px; padding-right: .7rem !important;
  position: sticky; left: 0; background: var(--panel); z-index: 1;
}
.tgt-ghead td {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); padding: .7rem .35rem .25rem; position: sticky; left: 0;
}

.tgt-cell input {
  width: 100%; min-width: 4.6rem; padding: .35rem .4rem; text-align: right;
  border: 1px solid transparent; border-radius: 6px; font-size: 13px;
  background: transparent; color: var(--text); font-variant-numeric: tabular-nums;
}
.tgt-cell input:hover { border-color: var(--border); }
.tgt-cell input:focus { border-color: var(--accent); background: var(--bg); outline: none; }
.tgt-cell input.dirty { background: var(--amber-bg); border-color: var(--amber); }
.tgt-cell input.bad { background: var(--red-bg); border-color: var(--red); }

.tgt-computed td { background: var(--grey-bg); }
.tgt-computed .tgt-area { background: var(--grey-bg); }
.tgt-ro {
  display: block; padding: .35rem .4rem; text-align: right; font-size: 13px;
  color: var(--muted); font-variant-numeric: tabular-nums;
}

.tgt-tot {
  text-align: right; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums; padding: .35rem .45rem !important;
}
.tgt-foot td { border-top: 2px solid var(--border); }
.tgt-foot .tgt-area { font-weight: 700; }

/* ── CSV buttons ── */
.tgt-csv { display: flex; gap: .6rem; margin-left: auto; }
.tgt-csv .btn { padding: .4rem .9rem; }

/* ── Row-total locks ── */
.tgt-totcell { white-space: nowrap; }
.tgt-ico { vertical-align: -3px; flex: 0 0 auto; }
.tgt-yearbtn { display: inline-flex; align-items: center; }
.tgt-lock {
  background: none; border: 0; cursor: pointer; font-size: 13px;
  padding: 0 .25rem 0 0; opacity: .3; color: var(--muted); vertical-align: middle;
}
tr:hover .tgt-lock, .tgt-lock.on { opacity: 1; }
.tgt-lock.on { color: var(--accent); }
.tgt-lockdiff {
  display: inline-block; margin-left: .4rem; padding: 0 7px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
}
.tgt-lockdiff.ok  { background: var(--green-bg); color: var(--green); }
.tgt-lockdiff.off { background: var(--red-bg); color: var(--red); }
tr.tgt-locked td { background: color-mix(in srgb, var(--blue-bg) 40%, transparent); }
tr.tgt-locked .tgt-area { background: var(--blue-bg); }

/* ── History panel ── */
.tgt-history summary { cursor: pointer; list-style: none; }
.tgt-history summary::-webkit-details-marker { display: none; }
.tgt-history summary h2 { display: inline; }
.tgt-history summary::before { content: '▸ '; color: var(--muted); }
.tgt-history details[open] summary::before { content: '▾ '; }
.tgt-asof-row { display: flex; gap: .7rem; align-items: center; margin: .8rem 0; flex-wrap: wrap; }
.tgt-asof-row input[type=date] {
  padding: .35rem .55rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font-size: 13px;
}
.tgt-hist li { display: block; padding: 0; }
.tgt-hist-batch details { border-bottom: 1px solid var(--border); padding: .45rem 0; }
.tgt-hist-batch summary { cursor: pointer; font-size: 13px; }
.tgt-hist-batch em { color: var(--muted); }
.tgt-hist-cells { display: flex; flex-wrap: wrap; gap: .35rem; padding: .5rem 0 .2rem; }
.tgt-hist-cell {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: .2rem .55rem; font-size: 12px; font-variant-numeric: tabular-nums;
}

/* ── As-it-stood snapshot ── */
.tgt-snap-sum { font-size: 13.5px; }
.tgt-snap td.tgt-cell { text-align: right; font-size: 13px; padding: .35rem .45rem; font-variant-numeric: tabular-nums; }
.tgt-snap td.tgt-moved { background: var(--amber-bg); }
.tgt-snap td.tgt-moved small { display: block; color: var(--amber); font-size: 10.5px; }

/* ── Save bar (appears when dirty) ── */
.tgt-savebar[hidden] { display: none; }   /* our display:flex would beat the hidden attribute */
.tgt-savebar {
  position: sticky; bottom: .8rem; align-self: center;
  display: flex; gap: .8rem; align-items: center;
  background: var(--panel); border: 1px solid var(--accent); border-radius: 12px;
  box-shadow: var(--shadow); padding: .6rem 1rem; z-index: 5;
}
#tgt-dirty-n { font-size: 13px; font-weight: 600; }
#tgt-dirty-n.bad { color: var(--red); }
#tgt-note {
  width: 20rem; max-width: 40vw; padding: .45rem .6rem; font-size: 13px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text);
}

/* ── Toast ── */
#tgt-toast {
  position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%) translateY(20px);
  background: var(--green-bg); border: 1px solid var(--green); color: var(--text);
  border-radius: 10px; padding: .6rem 1.1rem; font-size: 13.5px;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 9;
  max-width: min(92vw, 40rem);
}
#tgt-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 760px) {
  .tgt-hint { flex-basis: 100%; }
  .tgt-cell input { min-width: 4.2rem; padding: .45rem .4rem; }
}


/* ── Admin → Access (2026-09-25) ────────────────────────────────────────────── */
.acc-page { display: flex; flex-direction: column; gap: 1rem; }
.acc-table { width: 100%; border-collapse: collapse; }
.acc-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); text-align: left; padding: .3rem .5rem; border-bottom: 1px solid var(--border); }
.acc-table td { padding: .5rem .5rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.acc-table tr:last-child td { border-bottom: 0; }
.acc-who strong { display: block; }
.acc-who small { color: var(--muted); }
.acc-who .chip { margin-left: .3rem; vertical-align: 1px; }
.acc-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.acc-chip-no { opacity: .55; text-decoration: line-through; }
.acc-table select, .acc-table input[type=text] {
  padding: .35rem .5rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font-size: 13px; min-width: 6rem;
}
.acc-table input[type=text] { width: 100%; min-width: 9rem; }
.acc-granted small { color: var(--muted); }
.acc-actions { white-space: nowrap; text-align: right; }
.acc-actions .btn + .btn { margin-left: .3rem; }
.acc-off td:not(.acc-actions) { opacity: .55; }
.acc-gone .acc-who strong { text-decoration: line-through; }
.acc-add { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: flex-end; }
.acc-add input[type=text] {
  padding: .45rem .6rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font-size: 13px; min-width: 16rem;
}
.acc-log li { padding: .25rem 0; font-size: 13px; }
.acc-log small { color: var(--muted); margin-right: .4rem; }
@media (max-width: 760px) {
  .acc-table th:nth-child(5), .acc-table td.acc-granted { display: none; }
}

/* ── Quick add (add.php, 2026-09-25) ────────────────────────────────────────
   One press to a receipt, then steps that each save. Big targets: this is the
   page that gets used on a phone, in a car park, with a receipt in the other
   hand. */
.qa { display: flex; flex-direction: column; gap: 1rem; }

/* Capture: the whole card is the button. */
.qa-capture { max-width: 680px; margin: 1rem auto 0; width: 100%; }
.qa-drop {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: 2.4rem 1.4rem; border: 2px dashed var(--accent); border-radius: 18px;
  color: var(--accent); background: var(--blue-bg); cursor: pointer; text-align: center;
  box-shadow: var(--shadow);
}
.qa-drop:hover, .qa-drop.is-over { background: #dbeaf5; }
.qa-drop svg { width: 44px; height: 44px; }
.qa-drop__title { font-weight: 800; font-size: 22px; }
.qa-drop__sub { font-size: 14px; color: var(--muted); max-width: 30rem; line-height: 1.45; }
.qa-drop--busy { opacity: .6; pointer-events: none; }
.qa-cam {
  display: none; align-items: center; justify-content: center; gap: .5rem;
  margin-top: .7rem; padding: .95rem 1rem; border-radius: 12px;
  border: 1px solid var(--border); background: var(--panel); color: var(--accent);
  font-weight: 700; font-size: 16px; cursor: pointer;
}
.qa-cam svg { width: 22px; height: 22px; }
@media (pointer: coarse) { .qa-cam { display: flex; } }
.qa-capture__foot { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; justify-content: space-between; margin-top: .9rem; }
.qa-noreceipt { padding: 0; }
.qa-typed { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; margin-top: .9rem; padding: .9rem 1rem; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }
.qa-typed label { display: flex; flex-direction: column; gap: .25rem; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.qa-typed .ctl { font-size: 15px; padding: .55rem .7rem; }
.qa-status { margin-top: .7rem; font-size: 14px; line-height: 1.45; padding: .6rem .8rem; border-radius: 10px; background: var(--panel); border: 1px solid var(--border); }
.qa-status--bad  { background: var(--red-bg); }
.qa-status--busy { color: var(--muted); }

/* Invoices by email: the person's own address, and what has arrived. */
.qa-mail { margin-top: 1.2rem; padding: 1rem 1.1rem; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; }
.qa-mail__head { display: flex; align-items: center; gap: .5rem; color: var(--accent); font-size: 15px; }
.qa-mail__head svg { width: 22px; height: 22px; }
.qa-mail__addr { display: flex; flex-wrap: wrap; gap: .5rem; margin: .7rem 0 .2rem; }
.qa-mail__addr .ctl { flex: 1 1 16rem; min-width: 0; font-size: 14px; padding: .55rem .7rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.qa-mail__list { margin: .8rem 0 0; padding: .6rem 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: .4rem; }
.qa-mail__list li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; font-size: 13px; padding: 0; }
.qa-mail__subj { flex: 1 1 10rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-mail__ref { font-weight: 700; }
.qa-mail__list small { color: var(--muted); }
.qa-mail__new { margin-top: .5rem; text-align: right; }
.qa-mail__new .btn-link { font-size: 12px; color: var(--muted); padding: 0; }

/* Steps: the receipt and the running summary beside the current step. */
.qa-steps { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 1rem; align-items: start; }
.qa-side { position: sticky; top: .8rem; display: flex; flex-direction: column; gap: .8rem; }
.qa-receipt img { display: block; width: 100%; max-height: 340px; object-fit: contain; border-radius: 12px; background: #fff; border: 1px solid var(--border); }
.qa-receipt__file { display: block; padding: .8rem; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); font-weight: 600; }
.qa-receipt--add { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: 1.1rem; border: 2px dashed var(--accent); border-radius: 12px; color: var(--accent); background: var(--blue-bg); cursor: pointer; text-align: center; font-size: 13px; }
.qa-sum { display: grid; grid-template-columns: auto 1fr; gap: .25rem .7rem; margin: 0; padding: .8rem .9rem; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; font-size: 13.5px; }
.qa-sum dt { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; align-self: center; }
.qa-sum dd { margin: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-sum--need { color: var(--amber); font-style: italic; font-weight: 500; }
.qa-prog { display: flex; gap: .35rem; margin: 0; padding: 0; list-style: none; counter-reset: qa; }
.qa-prog li { flex: 1; text-align: center; font-size: 12px; font-weight: 700; padding: .45rem .3rem; border-radius: 8px; background: var(--grey-bg); color: var(--muted); cursor: pointer; }
.qa-prog li.is-done { background: var(--green-bg); color: var(--green); }
.qa-prog li.is-now { background: var(--accent); color: #fff; }
.qa-side__note { margin: 0; font-size: 12.5px; color: var(--muted); }

.qa-step { padding: 1.2rem 1.3rem; }
.qa-step__head { margin-bottom: .6rem; }
.qa-step__n { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.qa-step__head h2 { margin: .1rem 0 0; font-size: 20px; }
.qa-readnote { margin: 0 0 .9rem; padding: .6rem .8rem; border-radius: 10px; background: var(--green-bg); font-size: 13.5px; line-height: 1.45; }
.qa-step__body { display: flex; flex-direction: column; gap: 1rem; }
.qa-field { display: flex; flex-direction: column; gap: .35rem; }
.qa-field__label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.qa-field--need .qa-field__label { color: var(--amber); }
.qa-field--need .qa-field__label::after { content: ' \00b7 needed'; font-weight: 500; text-transform: none; letter-spacing: 0; }
.qa-field .ctl { font-size: 16px; padding: .6rem .75rem; max-width: 34rem; }
.qa-wide { width: 100%; }
.qa-addsup { font-size: 13px; }
.qa-inline { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; }
.qa-inline .chk { font-size: 15px; font-weight: 600; }
.qa-inline__sub { display: inline-flex; align-items: center; gap: .4rem; font-size: 14px; color: var(--muted); }
.qa-inline__sub .ctl { font-size: 14px; padding: .45rem .6rem; }
.qa-lines { display: flex; flex-direction: column; gap: .5rem; }
.qa-line { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.qa-line .ctl { font-size: 15px; padding: .5rem .65rem; min-width: 0; }
.qa-line__title { flex: 1 1 14rem; }
.qa-line__qty { width: 4.2rem; text-align: right; }
.qa-line__val { width: 7rem; text-align: right; font-variant-numeric: tabular-nums; }
.qa-line__x, .qa-line__cur { color: var(--muted); }
.qa-line__tot { min-width: 5.5rem; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.qa-line__del { font-size: 12px; color: var(--muted); }
.qa-lines__foot { display: flex; justify-content: space-between; align-items: center; margin-top: .3rem; }
.qa-lines__total { font-weight: 800; font-size: 16px; }
.qa-code { padding: .8rem .9rem; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); display: flex; flex-direction: column; gap: .5rem; }
.qa-code--need { border-color: var(--amber); }
.qa-code__title strong { font-size: 15px; }
.qa-code__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .45rem; }
.qa-code__row .ctl { min-width: 0; width: 100%; font-size: 14px; }
.qa-code__from { margin: 0; font-size: 12.5px; color: var(--muted); }
.qa-errors { margin-top: .8rem; padding: .6rem .8rem; border-radius: 10px; background: var(--red-bg); font-size: 13.5px; }
.qa-errors p { margin: .15rem 0; }
.qa-actions { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; margin-top: 1.1rem; }
.qa-actions .btn { font-size: 15px; padding: .7rem 1.2rem; }
.qa-next { min-width: 10rem; }
.qa-finish h2 { margin-top: 0; }
.qa-toast {
  position: fixed; left: 50%; bottom: 3.2rem; transform: translateX(-50%) translateY(20px);
  background: var(--green-bg); border: 1px solid var(--green); color: var(--text);
  border-radius: 10px; padding: .6rem 1.1rem; font-size: 13.5px;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 30;
}
.qa-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.qa-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.qa-confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: qa-fall 2.6s ease-in forwards; }
@keyframes qa-fall { to { transform: translateY(105vh) rotate(540deg); opacity: .2; } }
@media (max-width: 760px) {
  .qa-steps { grid-template-columns: 1fr; }
  .qa-side { position: static; }
  .qa-receipt img { max-height: 180px; }
  .qa-drop { padding: 2rem 1rem; }
  .qa-step { padding: 1rem; }
  .qa-actions .btn { flex: 1 1 auto; text-align: center; }
}

/* ── Customer invoices (invoices.php, invoice.php, 2026-09-30) ─────────────── */
.inv-booking { text-decoration: none; font-weight: 700; }
.inv-booking:hover { background: var(--blue-bg); color: var(--accent); }
.inv-note { color: var(--muted); font-style: italic; max-width: 32rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-of { color: var(--muted); font-size: 12px; }
.inv-pay { margin-top: .1rem; }
.qrow.row-open { outline: 2px solid var(--accent); outline-offset: -2px; }

.inv-head__top { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; }
.inv-head__top h2 { margin: 0; font-size: 20px; text-transform: none; letter-spacing: 0; color: var(--text); }
.inv-head__who { font-weight: 600; font-size: 15px; }
.inv-sum { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin: .8rem 0 .4rem; }
.inv-sum div { display: flex; flex-direction: column; }
.inv-sum dt { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.inv-sum dd { margin: 0; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.inv-sum--owed dd { color: var(--red); }
.inv-head__files { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0 0; }

.inv-pays { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.inv-pays th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: .3rem .5rem; border-bottom: 1px solid var(--border); }
.inv-pays td { padding: .45rem .5rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.inv-pays .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.inv-inline { display: inline-flex; align-items: center; gap: .4rem; }
.inv-payform { margin-top: .9rem; }
.inv-payform > summary { list-style: none; display: inline-block; cursor: pointer; }
.inv-payform > summary::-webkit-details-marker { display: none; }
.inv-payform[open] > summary { background: var(--grey); }
.inv-payform form { margin-top: .9rem; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
#pay-xero-note.inv-xero-on { color: var(--text); font-weight: 600; }

.inv-terms { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-size: 12.5px; color: var(--muted); }
.inv-acts { display: inline-flex; align-items: center; gap: .45rem; }
#invoice-form textarea.ctl { font-family: inherit; font-size: 13px; }
.inv-lines { display: flex; flex-direction: column; gap: .45rem; }
.inv-line { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .4rem; }
.inv-line .ctl { min-width: 0; }
.inv-line__text { flex: 1 1 18rem; resize: vertical; min-height: 2.1rem; font-family: inherit; line-height: 1.35; }
.inv-line__qty { width: 4.4rem; text-align: right; }
.inv-line__price { width: 7rem; text-align: right; font-variant-numeric: tabular-nums; }
.inv-line__x { color: var(--muted); padding-top: .45rem; }
.inv-line__tot { min-width: 6rem; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; padding-top: .45rem; }
.inv-line__del { font-size: 12px; color: var(--muted); padding-top: .45rem; }
.inv-line--gone .ctl { opacity: .4; text-decoration: line-through; }
.inv-lines__foot { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; justify-content: space-between; margin-top: .7rem; }
.inv-total { font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; margin-left: auto; }
.inv-value { display: inline-flex; align-items: center; gap: .4rem; font-size: 13px; }
.inv-danger { border-color: var(--red-bg); }
.inv-danger h2 { color: var(--red); }
.inv-danger form { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; }
.inv-danger form p { flex-basis: 100%; margin: 0; }

/* ── Purchase form tools (2026-09-30): copy a line; copy / delete / undo Xero ── */
.line legend .line__copy {
  margin-left: .6rem; background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--accent);
}
.line legend .line__copy:hover { text-decoration: underline; }
#desc_hint { display: block; margin-top: .2rem; text-transform: none; letter-spacing: 0; font-weight: 400; }
.tools { display: flex; flex-direction: column; gap: .7rem; }
.tools form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.tools form .muted-note { flex: 1 1 16rem; margin: 0; }
.tools-card h2 { margin-bottom: .6rem; }

/* ── Queue: review for Xero (2026-09-30) — every line under its purchase ───── */
.qlist__review { margin-left: .4rem; }
.qrow__area { font-weight: 600; }
.qdetail { margin-top: .55rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); overflow-x: auto; }
.qdetail__tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.qdetail__tbl th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: .3rem .55rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.qdetail__tbl td { padding: .3rem .55rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.qdetail__tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qdetail__what { font-weight: 600; min-width: 12rem; }
.qdetail__tbl tfoot td { border-bottom: 0; padding: .15rem .55rem; color: var(--muted); }
.qdetail__tbl tfoot .qdetail__total td { color: var(--text); font-weight: 800; padding-bottom: .4rem; }
.qdetail__none { margin: 0; padding: .5rem .7rem; color: var(--red); font-size: 12.5px; }
.line__foot { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 1.1rem; margin-top: .1rem; }
.line__foot .line__copy { background: none; border: 0; padding: 0; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--accent); }
.line__foot .line__copy:hover { text-decoration: underline; }
.line__foot .chk.del { margin: 0; }


/* ── Budgets (budgets.php) — ver5's admin_dept_purchases.php, 2026-10-01 ──────
   Position: one row per area with a bar. Months: ver5's grid. Set budgets:
   the targets grid's classes (tgt-grid, tgt-cell, tgt-savebar) reused. */

.bud-page { display: flex; flex-direction: column; gap: 1rem; }
.page:has(> .bud-page) { max-width: 1520px; }
.page:has(> .bud-page--months), .page:has(> .bud-page--edit) { max-width: none; padding: 0 1.4rem; }
.bud-page .stat-row { margin-bottom: 0; }
.bud-page .stat { flex: 1 1 150px; }

.bud-toolbar { gap: 1rem 1.4rem; }
.bud-mine { font-weight: 700; }
.bud-find {
  width: 11rem; padding: .35rem .6rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font-size: 13px;
}
.bud-views { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.bud-view { padding: .4rem .9rem; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; }
.bud-view + .bud-view { border-left: 1px solid var(--border); }
.bud-view:hover { background: var(--blue-bg); text-decoration: none; }
.bud-view.on { background: var(--accent); color: #fff; }

/* The bar: spent, coming, forecast beyond, and a tick at the budget. */
.bud-bar {
  position: relative; height: 12px; min-width: 140px; border-radius: 6px;
  background: var(--grey-bg); overflow: hidden;
}
.bud-bar > span { position: absolute; top: 0; bottom: 0; }
.bud-bar__spent  { left: 0; background: var(--green); }
.bud-bar__coming { background: var(--green); opacity: .45; }
.bud-bar__fc {
  background: repeating-linear-gradient(135deg, var(--muted) 0 2px, transparent 2px 5px); opacity: .55;
}
.bud-bar__tick { width: 2px; transform: translateX(-100%); background: var(--text); }
.bud-bar--over .bud-bar__spent, .bud-bar--over .bud-bar__coming { background: var(--red); }
.bud-bar--heading .bud-bar__spent, .bud-bar--heading .bud-bar__coming { background: var(--amber); }
.bud-bar--nobudget .bud-bar__spent, .bud-bar--nobudget .bud-bar__coming { background: var(--grey); }

.bud-yearcard { padding: .9rem 1.1rem; }
.bud-yearcard .bud-bar { height: 20px; border-radius: 10px; }
.bud-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: .6rem; font-size: 12.5px; color: var(--muted); }
.bud-legend strong { color: var(--text); }
.bud-key { display: inline-block; width: 14px; height: 10px; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; background: var(--green); }
.bud-key--coming { opacity: .45; }
.bud-key--fc { background: repeating-linear-gradient(135deg, var(--muted) 0 2px, transparent 2px 5px); opacity: .7; }
.bud-key--tick { width: 2px; height: 12px; border-radius: 0; background: var(--text); margin: 0 .55rem 0 .3rem; vertical-align: -2px; }
.bud-todate { margin-left: auto; }

.bud-watch h2 { margin: 0 0 .4rem; }
ul.bud-watchlist li { padding: 0; display: block; border-top: 1px solid var(--border); }
ul.bud-watchlist li:first-child { border-top: 0; }
.bud-watchlist a {
  display: flex; align-items: baseline; gap: .7rem; padding: .45rem .3rem; color: var(--text);
  text-decoration: none; flex-wrap: wrap;
}
.bud-watchlist a:hover { background: var(--blue-bg); text-decoration: none; }
.bud-watch__name { font-weight: 600; flex: 1 1 14rem; }
.bud-watch__nums { color: var(--muted); font-size: 13px; }
.bud-watch__by { color: var(--red); font-variant-numeric: tabular-nums; min-width: 7.5rem; text-align: right; }

.bud-card { padding: .5rem .8rem .8rem; }
.bud-tbl td, .bud-tbl th { vertical-align: middle; }
.bud-tbl .num { white-space: nowrap; }
.bud-barcol { width: 22%; min-width: 150px; }
.bud-depthead th, .bud-depthead td {
  background: var(--bg); font-weight: 700; padding-top: .7rem; border-bottom: 1px solid var(--border);
}
.bud-depthead th { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--text); }
.bud-depthead th small { font-weight: 400; color: var(--muted); margin-left: .4rem; }
.bud-name small { color: var(--muted); margin-left: .45rem; font-size: 11.5px; white-space: nowrap; }
.bud-open {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--text); text-align: left;
}
.bud-open::before { content: '▸'; color: var(--muted); display: inline-block; width: 1.1em; }
.bud-open[aria-expanded="true"]::before { content: '▾'; }
.bud-open:hover { color: var(--accent); }
.bud-neg { color: var(--red); font-weight: 600; }
.bud-row--open td { border-bottom-color: transparent; }
.bud-total td { font-weight: 700; border-top: 2px solid var(--border); }
.bud-hide { display: none !important; }
.bud-row--idle { display: none; }
.bud-show-idle .bud-row--idle, .bud-finding .bud-row--idle { display: table-row; }
.bud-row--idle td, .bud-row--idle th { color: var(--muted); }
.bud-dept--idle { display: none; }
.bud-show-idle .bud-dept--idle, .bud-finding .bud-dept--idle { display: table-row-group; }

.bud-detail > td { background: var(--bg); padding: .6rem .9rem 1rem 1.6rem; }
.bud-mini { border-collapse: collapse; width: 100%; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.bud-mini th, .bud-mini td { padding: .25rem .45rem; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
.bud-mini thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.bud-mini tbody th { text-align: left; font-weight: 600; color: var(--muted); }
.bud-mini .bud-now { color: var(--accent); }
.bud-mini__year { font-weight: 700; border-left: 1px solid var(--border); }
.bud-mini__est td, .bud-mini__ly td { color: var(--muted); }
.bud-mini__est td { font-style: italic; }
.bud-fig, .bud-lines {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.bud-fig:hover, .bud-lines:hover, .bud-lines.on { text-decoration: underline; }
.bud-neg .bud-fig, .bud-neg .bud-lines { color: var(--red); }
.bud-lines__scroll { overflow-x: auto; }
.bud-lines__head { display: flex; gap: 1rem; align-items: baseline; margin: .8rem 0 .3rem; font-size: 13px; }
.bud-lines__head span { color: var(--muted); }
.bud-lines__head .btn-link { margin-left: auto; }
.bud-linestbl { font-size: 12.5px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; }
.bud-linestbl td { vertical-align: middle; }
.bud-fig.on { text-decoration: underline; font-weight: 700; }
.bud-lines.on { font-weight: 700; }
/* The purchases behind a figure: a drawer on the right, under the purchase panel (z 50). */
.bud-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 45; width: min(880px, 94vw);
  background: var(--panel); border-left: 1px solid var(--border); box-shadow: -18px 0 40px rgba(20, 20, 40, .18);
  display: flex; flex-direction: column;
}
.bud-drawer[hidden] { display: none; }
.bud-drawer__body { flex: 1 1 auto; overflow: auto; padding: .4rem 1.1rem 1.4rem; }
.bud-drawer .bud-lines__head {
  position: sticky; top: 0; background: var(--panel); z-index: 2; margin: 0 -1.1rem .6rem; padding: .9rem 1.1rem .7rem;
  border-bottom: 1px solid var(--border); flex-wrap: wrap; font-size: 14px;
}
.bud-drawer .bud-linestbl { border: 0; }
@media (max-width: 760px) { .bud-drawer { width: 100%; border-left: 0; } }
/* A purchase opened from the list (purchase_panel.js) docks on the right and the list moves to sit beside it,
   where the screen is wide enough for both; narrower, the purchase covers it and Close brings it back. */
@media (min-width: 1400px) {
  body.fin-panel-open .bud-drawer { right: var(--fin-panel-w); width: min(880px, calc(100vw - var(--fin-panel-w) - 120px)); box-shadow: -8px 0 24px rgba(20, 20, 40, .12); }
}

/* Months — ver5's grid. The area names stay put while the months scroll. */
.bud-monthsbar { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; padding: .3rem 0 .7rem; }
.bud-toggle { display: inline-flex; align-items: center; gap: .5rem; font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none; }
.bud-toggle:hover { text-decoration: none; color: var(--accent); }
.bud-toggle__knob { width: 30px; height: 17px; border-radius: 999px; background: var(--border); position: relative; flex: 0 0 auto; }
.bud-toggle__knob::after { content: ''; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--panel); transition: left .15s; }
.bud-toggle.on .bud-toggle__knob { background: var(--accent); }
.bud-toggle.on .bud-toggle__knob::after { left: 15px; }
.bud-months { border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; min-width: 100%; }
.bud-months th, .bud-months td { padding: .28rem .4rem; border-bottom: 1px solid var(--border); white-space: nowrap; text-align: right; }
.bud-months thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.bud-m-month { text-align: center !important; border-left: 1px solid var(--border); }
.bud-m-now { color: var(--accent) !important; }
.bud-m-sub th { font-size: 10px !important; font-weight: 400; }
.bud-m-area { text-align: left !important; position: sticky; left: 0; background: var(--panel); z-index: 1; font-weight: 400; max-width: 17rem; overflow: hidden; text-overflow: ellipsis; }
.bud-m-area small { color: var(--muted); font-size: 10.5px; margin-left: .3rem; }
.bud-m-b { color: var(--muted); border-left: 1px solid var(--border); }
.bud-m-end { font-weight: 600; }
.bud-m-dept th, .bud-m-dept td { background: var(--bg); font-weight: 700; padding-top: .55rem; }
.bud-m-dept .bud-m-area { background: var(--bg); font-size: 13px; }
.bud-m-total th, .bud-m-total td { font-weight: 700; border-top: 2px solid var(--border); border-bottom: 0; }

.bud-foot { display: flex; flex-direction: column; gap: .3rem; }
.bud-foot .chk { font-size: 13px; display: inline-flex; gap: .4rem; align-items: center; }
.bud-nomatch { padding: 1.2rem; text-align: center; }

/* Set budgets */
.bud-fill { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; padding: .7rem 1rem; font-size: 13px; }
.bud-fill label { display: inline-flex; gap: .4rem; align-items: center; }
.bud-fill select, .bud-fill input[type=number] {
  padding: .3rem .4rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font-size: 13px;
}
.bud-fill input[type=number] { width: 4.5rem; }
.bud-fill .btn { padding: .4rem 1rem; }
.bud-grid .tgt-cell input { min-width: 4.1rem; border-color: color-mix(in srgb, var(--border) 55%, transparent); }
.bud-editarea small { color: var(--muted); font-size: 11px; margin-left: .3rem; }
.bud-yearcell { border-left: 1px solid var(--border); }
.bud-yearcell input { font-weight: 700; }
.bud-menu { display: inline-block; position: relative; margin-right: .3rem; }
.bud-menu summary {
  list-style: none; cursor: pointer; width: 1.5rem; height: 1.5rem; line-height: 1.4rem; text-align: center;
  border-radius: 6px; color: var(--muted); font-weight: 700; display: inline-block;
}
.bud-menu summary::-webkit-details-marker { display: none; }
.bud-menu summary:hover, .bud-menu[open] summary { background: var(--blue-bg); color: var(--accent); }
.bud-menu__list {
  position: absolute; left: 0; top: 1.7rem; z-index: 6; min-width: 14rem; padding: .3rem;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.bud-menu__list button {
  background: none; border: 0; text-align: left; padding: .45rem .6rem; border-radius: 6px;
  font-size: 13px; color: var(--text); cursor: pointer; white-space: nowrap;
}
.bud-menu__list button:hover { background: var(--blue-bg); color: var(--accent); }
.bud-dirty-n { font-size: 13px; font-weight: 600; }
.bud-dirty-n.bad { color: var(--red); }
.bud-note {
  width: 20rem; max-width: 40vw; padding: .45rem .6rem; font-size: 13px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text);
}

/* ── Cash flow (cashflow.php) — ver5's admin_in_out.php, 2026-10-01 ─────────── */
.page:has(> .cf-page) { max-width: none; padding: 0 1.4rem; }
.cf-page .bud-toolbar .bud-toggle { white-space: nowrap; }
.cf-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.cf-chart {
  margin: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); padding: .7rem .9rem .6rem;
}
.cf-chart figcaption { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.cf-chart svg { width: 100%; height: auto; display: block; }
.cf-grid { stroke: var(--border); stroke-width: 1; }
.cf-zero { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.cf-axis { font-size: 10px; fill: var(--muted); }
.cf-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cf-line.cf-a { stroke: var(--accent); } .cf-dot.cf-a { fill: var(--accent); }
.cf-line.cf-b { stroke: var(--muted); }  .cf-dot.cf-b { fill: var(--muted); }
.cf-line.cf-c { stroke: var(--amber); }  .cf-dot.cf-c { fill: var(--amber); }
.cf-line.cf-d { stroke: var(--red); }    .cf-dot.cf-d { fill: var(--red); }
.cf-line.cf-b, .cf-line.cf-c { stroke-dasharray: 5 4; stroke-width: 1.6; }
.cf-keys { display: flex; flex-wrap: wrap; gap: .2rem 1rem; font-size: 12px; color: var(--muted); }
.cf-key { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: .35rem; vertical-align: 3px; }
.cf-key.cf-a { background: var(--accent); } .cf-key.cf-b { background: var(--muted); }
.cf-key.cf-c { background: var(--amber); }  .cf-key.cf-d { background: var(--red); }

.cf-tbl { border-collapse: collapse; width: 100%; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.cf-tbl--q { font-size: 13.5px; }
.cf-tbl th, .cf-tbl td { padding: .3rem .5rem; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--border); }
.cf-tbl thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); vertical-align: bottom; }
.cf-tbl thead th small { display: block; font-size: 9.5px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.cf-tbl tbody th[scope=row] {
  text-align: left; font-weight: 400; position: sticky; left: 0; background: var(--panel); z-index: 1;
}
.cf-tbl .cf-head th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text);
  background: var(--bg); padding-top: .8rem; position: sticky; left: 0;
}
.cf-tbl .cf-head small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); margin-left: .5rem; }
/* Groups (David, 2026-10-02): a total above its parts, the parts tabbed in once, BS day groups' five lines twice. */
.cf-tbl .cf-group th[scope=row], .cf-tbl .cf-group td { font-weight: 700; background: var(--blue-bg); border-top: 1px solid var(--border); }
.cf-tbl .cf-in1 th[scope=row] { padding-left: 1.6rem; }
.cf-tbl .cf-in2 th[scope=row] { padding-left: 3.2rem; color: var(--muted); }
.cf-tbl .cf-in2 td { color: var(--muted); font-size: .94em; }
.cf-tbl .cf-in2 td.bud-neg { color: var(--red); }
/* The differences (David, 2026-10-02): ahead is green and bold, behind is red and NOT bold — on every row, totals included. */
.cf-tbl tr td.bud-neg { color: var(--red); font-weight: 400; }
.cf-tbl tr td.cf-pos { color: var(--green); font-weight: 700; }
.cf-tbl .cf-strong th[scope=row], .cf-tbl .cf-strong td { font-weight: 700; border-top: 1px solid var(--border); }
.cf-tbl .cf-now { background: color-mix(in srgb, var(--blue-bg) 55%, transparent); }
.cf-tbl thead .cf-now { color: var(--accent); }
.cf-tbl .cf-end { border-left: 1px solid var(--border); font-weight: 600; }
.cf-tbl .cf-future { color: var(--muted); opacity: .55; font-weight: 400; }
.cf-fig { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; font-variant-numeric: tabular-nums; }
.cf-fig:hover { color: var(--accent); text-decoration: underline; }
.cf-fig.on { color: var(--accent); font-weight: 700; text-decoration: underline; }

.filter-clear { align-self: center; font-size: 13px; white-space: nowrap; }

/* ── Till takings (takings.php) — ver5's diary "Square Income", 2026-10-02 ──── */
.tk-page { display: flex; flex-direction: column; gap: 1rem; max-width: 980px; margin: 0 auto; }
.tk-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.tk-title { margin: 0; font-size: 22px; text-transform: none; letter-spacing: 0; color: var(--text); }
.tk-sub { margin: .2rem 0 0; color: var(--muted); font-size: 14px; }
.tk-nav { display: flex; gap: .5rem; flex-wrap: wrap; }
.tk-nav .btn { text-decoration: none; padding: .45rem .9rem; }
.tk-todo { margin: 0; }
.tk-card { padding: .4rem 1rem .6rem; }
.tk-head, .tk-row { display: grid; grid-template-columns: 10.5rem 8.5rem repeat(3, minmax(0, 1fr)) 7.5rem; gap: .5rem 1rem; align-items: start; }
.tk-head { padding: .6rem 0 .4rem; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; border-bottom: 1px solid var(--border); }
.tk-head__total { text-align: right; }
.tk-row { padding: .55rem 0; border-bottom: 1px solid var(--border); }
.tk-row:last-child { border-bottom: 0; }
.tk-row--weekend .tk-day strong { color: var(--accent); }
.tk-row--todo { background: linear-gradient(90deg, var(--amber-bg), transparent 60%); margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem; }
.tk-row--sum { border-top: 2px solid var(--border); border-bottom: 0; padding-top: .8rem; font-size: 15px; }
.tk-day { padding-top: .55rem; font-size: 15px; display: flex; flex-wrap: wrap; gap: .25rem .45rem; align-items: baseline; }
.tk-label { display: none; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.tk-box { position: relative; display: flex; align-items: center; }
.tk-pound { position: absolute; left: .7rem; color: var(--muted); font-size: 16px; pointer-events: none; }
.tk-input {
  width: 100%; padding: .55rem .7rem .55rem 1.6rem; font-size: 17px; font-variant-numeric: tabular-nums;
  border: 1.5px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text);
}
.tk-input:focus { outline: none; border-color: var(--accent); background: var(--panel); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.tk-input--ok { border-color: var(--green); }
.tk-input--bad { border-color: var(--red); background: var(--red-bg); }
.tk-state { position: absolute; right: .6rem; font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: .2rem; pointer-events: none; }
.tk-state--ok { color: var(--green); font-weight: 600; }
.tk-state--bad { position: static; display: block; margin: .25rem 0 0 .2rem; color: var(--red); font-weight: 600; }
.tk-box:has(.tk-state--bad) { flex-wrap: wrap; }
.tk-cards { padding-top: .45rem; font-variant-numeric: tabular-nums; }
.tk-cards small { display: block; font-size: 11.5px; color: var(--muted); }
.tk-cards__none { color: var(--muted); }
.tk-cardsbtn { background: none; border: 0; padding: 0; font: inherit; font-size: 16px; font-weight: 600; color: var(--accent); cursor: pointer; font-variant-numeric: tabular-nums; }
.tk-cardsbtn:hover, .tk-cardsbtn.on { text-decoration: underline; }
.tk-minus { display: block; margin: .3rem 0 0 .2rem; font-size: 12px; color: var(--muted); line-height: 1.35; }
.tk-minus em { font-style: normal; font-weight: 600; color: var(--text); white-space: nowrap; }
.tk-page { max-width: 1120px; }
.tk-says {
  margin-top: .3rem; background: none; border: 1px dashed var(--accent); border-radius: 999px; padding: .2rem .7rem;
  font: inherit; font-size: 12.5px; color: var(--accent); cursor: pointer;
}
.tk-says:hover { background: var(--blue-bg); }
.tk-differs { display: block; margin: .3rem 0 0 .2rem; font-size: 12px; color: var(--amber); }
.tk-banked { display: flex; align-items: center; gap: .35rem; padding: .55rem .2rem; font-size: 17px; font-variant-numeric: tabular-nums; color: var(--green); }
.tk-banked span { color: var(--text); }
.tk-banked small { font-size: 11.5px; }
.tk-total { text-align: right; padding-top: .55rem; font-size: 16px; font-variant-numeric: tabular-nums; }
.tk-total small { display: block; font-size: 11.5px; color: var(--muted); }
.tk-row--sum .tk-cell { padding: .55rem .2rem 0; font-variant-numeric: tabular-nums; }
.tk-foot { max-width: 60rem; }
@media (max-width: 720px) {
  .tk-head { display: none; }
  .tk-row { grid-template-columns: 1fr 1fr; gap: .6rem .8rem; padding: .9rem 0; }
  .tk-day { grid-column: 1 / -1; padding-top: 0; font-size: 17px; }
  .tk-label { display: block; margin-bottom: .2rem; }
  .tk-total { text-align: left; padding-top: 0; }
  .tk-row--sum .tk-cell { padding: 0; }
}

/* ── Quick add: the supplier pick-list (the FD, 2026-10-01) ─────────────────── */
.qa-sup { display: flex; flex-direction: column; gap: .3rem; max-width: 34rem; width: 100%; }
.qa-sup__list {
  border: 1px solid var(--border); border-radius: 12px; background: var(--panel); max-height: 17rem; overflow-y: auto;
  -webkit-overflow-scrolling: touch; box-shadow: var(--shadow);
}
.qa-sup__list[hidden], .qa-sup__new[hidden] { display: none; }
.qa-sup__head {
  position: sticky; top: 0; background: var(--bg); padding: .4rem .75rem; font-size: 11.5px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border);
}
.qa-sup__row {
  display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--border);
  padding: .7rem .75rem; font: inherit; font-size: 15.5px; color: var(--text); cursor: pointer;
}
.qa-sup__row:last-child { border-bottom: 0; }
.qa-sup__row:hover, .qa-sup__row:focus { background: var(--blue-bg); outline: none; }
.qa-sup__row--likely { font-weight: 600; background: var(--green-bg); }
.qa-sup__row--add { color: var(--muted); font-size: 13.5px; }
.qa-sup__row--addguess { color: var(--accent); font-weight: 600; background: var(--blue-bg); }
.qa-sup__none { padding: .7rem .75rem; font-size: 13.5px; color: var(--muted); }
.qa-sup__new { margin: 0; padding: .5rem .7rem; border-radius: 8px; background: var(--amber-bg); font-size: 13.5px; }
.qa-typed__sup { display: flex; flex-direction: column; gap: .25rem; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; flex: 1 1 16rem; }
.qa-typed__sup .qa-sup { text-transform: none; letter-spacing: 0; }

/* ── The FD's list, 2026-10-01: Xero state, running total, Duplicate, drag and drop ── */
.xero-state { font-size: 13px; margin: 0 0 .6rem; }
.xero-state--ok { color: var(--muted); }
.xero-state--ok a { margin-left: .4rem; }
.xero-state .btn { margin-left: .5rem; text-decoration: none; display: inline-block; }
.tick-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 .6rem; padding: .55rem .8rem;
  border-radius: 10px; background: var(--blue-bg); font-size: 14px;
}
.tick-total[hidden] { display: none; }
.tick-total strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.qrow__dup {
  background: none; border: 0; padding: 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--accent); cursor: pointer; opacity: .75;
}
.qrow__dup:hover { text-decoration: underline; opacity: 1; }
body.is-dropping::after {
  content: attr(data-drop); position: fixed; inset: .6rem; z-index: 60; pointer-events: none;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem;
  border: 3px dashed var(--accent); border-radius: 16px; background: color-mix(in srgb, var(--blue-bg) 88%, transparent);
  color: var(--accent); font-size: 22px; font-weight: 700;
}

/* What is left, on the purchase form — holders and Finance only. */
.line__budget {
  grid-column: 1 / -1; margin: 0; padding: .35rem .6rem; border-radius: 8px; font-size: 12.5px;
  background: var(--green-bg); color: var(--text);
}
.line__budget[hidden] { display: none; }
.line__budget strong { font-variant-numeric: tabular-nums; }
.line__budget--over { background: var(--red-bg); }
.line__budget--none { background: var(--grey-bg); }

@media (max-width: 760px) {
  .bud-barcol { display: none; }
  .bud-tbl th:nth-child(4), .bud-tbl td:nth-child(4),
  .bud-tbl th:nth-child(5), .bud-tbl td:nth-child(5) { display: none; }   /* spent + coming fold into Left on a phone */
  .bud-todate { margin-left: 0; flex-basis: 100%; }
  .bud-find { width: 8rem; }
  .bud-detail > td { padding-left: .6rem; }
}

/* ── Suppliers (suppliers.php, 2026-10-02) — ver5's Financials → Suppliers ─── */
.sup-filters .sup-grow { flex: 1 1 14rem; }
.sup-filters .sup-grow .ctl { width: 100%; }
.sup-filters .sup-value { min-width: 6rem; width: 7rem; }
/* The supplier picker: Quick add's list (.qa-sup__*), dropped down over the page instead of pushing it. */
.sup-picklabel { flex: 0 1 16rem; }
.sup-pick { position: relative; display: block; text-transform: none; letter-spacing: 0; }
.sup-pick .ctl { width: 100%; padding-right: 1.8rem; }
.sup-pick__clear { position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--muted);
                   font-size: 18px; line-height: 1; padding: .1rem .3rem; cursor: pointer; border-radius: 6px; }
.sup-pick__clear:hover { background: var(--grey-bg); color: var(--text); }
.sup-pick__list { position: absolute; left: 0; top: calc(100% + 4px); z-index: 30; width: min(30rem, 86vw); max-height: 24rem; }
.sup-pick__row { display: flex; align-items: baseline; gap: .8rem; padding: .55rem .75rem; font-size: 14px; }
.sup-pick__name { flex: 1 1 auto; min-width: 0; }
.sup-pick__meta { flex: 0 0 auto; font-size: 12px; color: var(--muted); }
.sup-pick__row--all { font-weight: 600; color: var(--accent); }
.sup-pick__row--close { background: var(--amber-bg); }
.sup-filters .sup-off { opacity: .45; }
.sup-actions { display: flex; align-items: center; gap: .8rem; padding-bottom: .1rem; }
.sup-card { padding: 0; }
.sup-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .8rem 1rem; border-bottom: 1px solid var(--border); }
.sup-said { font-weight: 600; }
.sup-sorts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .2rem .7rem; font-size: 13px; margin-left: auto; }
.sup-sort { color: var(--muted); }
.sup-sort.on { color: var(--text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.sup-csv { font-size: 13px; }
.sup-empty { padding: 1.2rem 1rem; }
.sup-tbl { width: 100%; }
.sup-tbl td, .sup-tbl th { padding: .55rem 1rem; }
.sup-tbl tbody tr:hover { background: var(--blue-bg); }
.sup-name { min-width: 16rem; }
.sup-name .chip { margin-left: .4rem; vertical-align: middle; }
.sup-notes { display: block; color: var(--muted); font-size: 12px; margin-top: .1rem; }
.sup-bar { display: block; height: 4px; margin-top: .35rem; border-radius: 4px; background: var(--grey-bg); overflow: hidden; max-width: 22rem; }
.sup-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.sup-fig { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: inherit; }
.sup-fig:hover, .sup-fig.on { color: var(--accent); text-decoration: underline; }
.sup-fig.on { font-weight: 700; }
.sup-fig--name { font-weight: 700; font-size: 14px; }
.sup-total { font-weight: 700; }
.sup-due .sup-fig { color: var(--amber); }
.sup-due .sup-fig:hover, .sup-due .sup-fig.on { color: var(--accent); }
.sup-nil { color: var(--border); }
.sup-unknown .sup-fig--name { color: var(--muted); font-style: italic; }
.sup-cat th { background: var(--grey-bg); text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.sup-tbl tfoot th, .sup-tbl tfoot td { font-weight: 700; border-top: 2px solid var(--border); }
.sup-linestbl td { white-space: nowrap; }
.sup-linestbl td:nth-child(6) { white-space: normal; min-width: 8rem; }
.sup-linestbl td:nth-child(7) { white-space: normal; min-width: 12rem; }
.sup-linestbl tr.row-open td { background: var(--blue-bg); }
.sup-dueword { color: var(--amber); font-weight: 700; }
.sup-foot { margin-top: .8rem; }
@media (max-width: 760px) {
  .sup-tbl th:nth-child(2), .sup-tbl td:nth-child(2), .sup-tbl th:nth-child(3), .sup-tbl td:nth-child(3) { display: none; }
  .sup-name { min-width: 0; }
  .sup-tbl td, .sup-tbl th { padding: .5rem .6rem; }
  .sup-sorts { margin-left: 0; }
}

/* ── Supplier admin (supplier_list.php, supplier.php, 2026-10-02) ───────────── */
.sa-tabs { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
.sa-tab { padding: .5rem .9rem; font-size: 14px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; }
.sa-tab:hover { color: var(--text); text-decoration: none; }
.sa-tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.sa-add { margin-bottom: 1rem; }
.sa-add > summary, .sa-edit > summary { cursor: pointer; font-size: 14px; }
.sa-add > summary small { color: var(--muted); font-weight: 400; margin-left: .4rem; }
.sa-addform { margin-top: .8rem; }
.sa-near { margin-top: .4rem; }
.sa-head .sa-find { flex: 1 1 14rem; max-width: 24rem; }
.sa-name { font-weight: 700; font-size: 14px; }
.sa-archived td { opacity: .6; }
.sa-more { padding: .7rem 1rem; font-size: 13px; }
.sa-group { margin-bottom: 1rem; }
.sa-group__head { display: flex; align-items: center; gap: .7rem; margin-bottom: .5rem; }
.sa-group__head .muted-note { margin: 0; }
.sa-grouptbl td, .sa-grouptbl th { padding: .45rem .6rem; }
.sa-head-card { margin-bottom: 1rem; }
.sa-title { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.sa-title h2 { margin: 0; font-size: 22px; }
.sa-title .muted-note { margin: 0; }
.sa-notes { margin: .5rem 0 0; color: var(--muted); }
.sa-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.sa-inline { display: inline; margin: 0; }
.sa-edit { margin-top: .8rem; border-top: 1px solid var(--border); padding-top: .7rem; }
.sa-merge { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .6rem; }
.sa-merge .hint { flex-basis: 100%; margin: 0 0 .2rem; }
.sa-merge .sup-pick { flex: 0 1 24rem; }
.sa-chart { margin-bottom: 1rem; }
.sa-chart h3, .sa-grid h3, .sa-page section > h3 { margin: 0 0 .6rem; font-size: 15px; }
.sa-chart h3 small, .sa-page h3 small { color: var(--muted); font-weight: 400; font-size: 12px; margin-left: .4rem; }
.sa-bars { width: 100%; height: auto; display: block; }
.sa-bar { fill: var(--accent); opacity: .85; }
.sa-bar:hover { opacity: 1; }
.sa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.sa-grid > .card { margin: 0; }
.sa-mini { width: 100%; font-size: 13px; }
.sa-mini td, .sa-mini th { padding: .4rem .6rem; }
.sa-person { display: flex; align-items: center; gap: .5rem; }
.sa-ahead td { background: var(--blue-bg); }
.sa-history li { display: block; padding: .45rem 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.sa-history li:last-child { border-bottom: 0; }
.sa-history .btn-link { font-size: 13px; }
.sa-tbl td:nth-child(5), .sa-mini td { white-space: nowrap; }
.sa-mini td:first-child, .sa-mini td.sa-wrap { white-space: normal; }

/* A question in a dialog (purchase_form.js — creating a new supplier, 2026-10-05). */
.fin-dialog { border: 1px solid var(--border); border-radius: 14px; padding: 1.2rem 1.3rem; width: min(30rem, 92vw); background: var(--panel); color: var(--text); box-shadow: 0 20px 60px rgba(20, 20, 40, .25); }
.fin-dialog::backdrop { background: rgba(20, 24, 40, .45); }
.fin-dialog h3 { margin: 0 0 .5rem; font-size: 17px; }
.fin-dialog p { margin: 0 0 .7rem; }
.fin-dialog__q { font-weight: 600; font-size: 14px; }
.fin-dialog__near { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 1rem; max-height: 18rem; overflow-y: auto; }
.fin-dialog__near > p { padding: .6rem .75rem 0; }
.fin-dialog__near .qa-sup__row { width: 100%; }
.fin-dialog__acts { display: flex; flex-wrap: wrap; gap: .6rem; }

/* The deck's "Use AI to read the document" tick (2026-10-06). */
.dreceipt__ai { display: flex; align-items: center; gap: .4rem; justify-content: center; margin: .5rem 0 0; font-size: 13px; color: var(--text); cursor: pointer; }

/* Paid or to pay on the queue (David, 2026-10-06). A purchase still to pay has an amber edge (red when overdue,
   which .qrow--late already gives), a paid one none; the badge under the amount says which, in words. */
.qrow--topay:not(.qrow--late) { box-shadow: inset 4px 0 0 var(--amber); }
.paybadge { display: inline-flex; align-items: center; gap: .25rem; font-size: 12px; font-weight: 700; padding: .12rem .55rem; border-radius: 999px; white-space: nowrap; }
.paybadge--paid  { background: var(--green-bg); color: var(--green); }
.paybadge--topay { background: var(--amber-bg); color: var(--amber); border: 1px solid currentColor; }
.paybadge--late  { background: var(--red-bg); color: var(--red); }
.paybadge--other { background: var(--grey-bg); color: var(--grey); font-weight: 600; }
.stat-topay .stat-n { color: var(--amber); }
.stat-topay.stat-warn .stat-n { color: var(--red); }
.stat-paid .stat-n { color: var(--green); }
.stat.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--blue-bg); }
.stat-n small { font-size: 13px; font-weight: 600; color: var(--muted); margin-left: .2rem; }

/* Access: who gives what (the ladder, 2026-10-06). */
.acc-ladder { display: flex; flex-direction: column; gap: .2rem; font-size: 13px; margin: 0 0 1rem; padding: .6rem .8rem; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; }
.acc-ladder .muted-note { margin: .2rem 0 0; }
.acc-role { font-weight: 600; }

/* Budgets: each department's figures once, at the foot of its section (the FD, 2026-10-07). */
.bud-deptfoot th, .bud-deptfoot td { font-weight: 700; border-top: 1px solid var(--border); background: var(--bg); }
.bud-deptfoot th { text-align: left; font-size: 14px; padding-left: .8rem; text-transform: none; letter-spacing: 0; color: var(--text); }
.bud-m-subtotal th, .bud-m-subtotal td { font-weight: 700; background: var(--bg); border-top: 1px solid var(--border); }
.bud-m-subtotal .bud-m-area { background: var(--bg); font-size: 13px; }
.bud-m-dept td { background: var(--bg); }

/* Training claims (claim.php, 2026-10-08). */
.cl-page { max-width: 46rem; margin: 0 auto; }
.cl-course h2 { margin: .2rem 0 .7rem; font-size: 20px; }
.cl-eyebrow { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.cl-facts { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; font-size: 14px; }
.cl-facts dt { color: var(--muted); }
.cl-facts dd { margin: 0; }
.cl-form { margin-top: 1rem; }
.cl-form h3 { margin: 0 0 .4rem; }
.cl-note { display: flex; flex-direction: column; gap: .25rem; font-size: 12px; color: var(--muted); margin-bottom: .8rem; }
.cl-steps { display: flex; gap: .4rem; list-style: none; padding: 0; margin: 0 0 1rem; }
.cl-steps li { flex: 1; text-align: center; padding: .45rem .5rem; border-radius: 8px; background: var(--grey-bg); color: var(--muted); font-size: 13px; font-weight: 600; }
.cl-steps li.reached { background: var(--green-bg); color: var(--green); }
.cl-steps li.on { box-shadow: inset 0 0 0 2px currentColor; }
.cl-list li { display: flex; gap: .6rem; align-items: center; padding: .4rem 0; border-bottom: 1px solid var(--border); }
.cl-list li:last-child { border-bottom: 0; }