:root {
  --bg: #f4f6fb;
  --panel: #ffffff;
  --ink: #1b2437;
  --muted: #6b7688;
  --line: #e3e8f0;
  --line-soft: #eef2f7;
  --navy: #16233a;
  /* The blue bar and the blue button are the same colour, so the eye reads one brand accent. */
  --bar: #1d4ed8;
  --bar-2: #16379f;
  --accent: #1d4ed8;
  --accent-soft: #e8effc;
  --good: #15a34a;
  --good-soft: #e6f6ec;
  --warn: #b4530a;
  --warn-soft: #fdf1df;
  --bad: #dc2626;
  --bad-soft: #fdeaea;
  --info: #475569;
  --info-soft: #eef1f6;
  --slate: #33415c;
  --dark: #1f2937;
  --purple: #7c3aed;
  --purple-soft: #f1e9fe;
  --teal: #0d8a86;
  --hero-1: #1d4ed8;
  --hero-2: #1e3a8a;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(16, 35, 59, .05), 0 8px 22px rgba(16, 35, 59, .06);
  --font: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.app { display: flex; min-height: 100vh; }

/* ---------------- sidebar ---------------- */
.sidebar {
  width: 254px;
  flex: 0 0 254px;
  background: var(--panel);
  color: #33415a;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.brand { display: flex; gap: 11px; align-items: center; padding: 16px 16px 14px; border-bottom: 1px solid var(--line-soft); }
.brand-mark {
  width: 38px; height: 38px; border-radius: 10px; flex: 0 0 38px;
  background: linear-gradient(135deg, var(--bar), var(--bar-2));
  color: #fff; font-weight: 700; letter-spacing: .5px;
  display: grid; place-items: center; font-size: 15px; overflow: hidden;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-mark.has-logo { background: #fff; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-text strong { color: var(--ink); font-size: 14px; letter-spacing: .6px; }
.brand-text span { font-size: 11px; color: var(--muted); }

.nav { padding: 12px 10px; overflow-y: auto; flex: 1; }
.nav-group { margin-bottom: 6px; }
.nav-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.3px; color: #94a1b4; padding: 14px 10px 5px; font-weight: 600; }
.nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px; margin: 1px 0;
  border-radius: 9px; color: #33415a; text-decoration: none; font-size: 13.2px;
  transition: background .13s ease, color .13s ease;
}
.nav a:hover { background: #f3f6fb; color: var(--ink); }
.nav a.active { background: var(--accent-soft); color: var(--bar); font-weight: 600; box-shadow: inset 0 0 0 1px #cddffb; }
.nav a .ico { width: 16px; height: 16px; flex: 0 0 16px; opacity: .9; }
.nav a.active .ico { opacity: 1; }
.nav a .pill { margin-left: auto; font-size: 10.5px; background: #eef2f8; color: #55647c; padding: 1px 7px; border-radius: 20px; }
.nav a.active .pill { background: #d3e2fb; color: var(--bar); }

/* collapsible group heads behave like nav rows but only open and close */
.nav-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; font: inherit; color: #33415a; cursor: pointer;
  padding: 8px 11px; margin: 1px 0; border-radius: 9px; text-align: left;
}
.nav-head:hover { background: #f3f6fb; }
.nav-head.open { color: var(--bar); font-weight: 600; }
.nav-head .ico { width: 16px; height: 16px; flex: 0 0 16px; opacity: .9; }
.nav-head .chev { margin-left: auto; transition: transform .15s ease; opacity: .55; }
.nav-head .chev.ico { width: 14px; height: 14px; }
.nav-head.open .chev { transform: rotate(90deg); }
.nav-sub { display: grid; }
.nav-sub[hidden] { display: none; }
.nav-sub.nav-pad { padding-left: 15px; }

.sidebar-foot { padding: 10px 12px 14px; border-top: 1px solid var(--line-soft); display: grid; gap: 6px; }
.sidebar-foot .nav-label { padding: 2px 2px 0; }
.ghost-btn {
  background: #f5f8fc; border: 1px solid var(--line);
  color: #46586f; font-size: 12px; padding: 7px 9px; border-radius: 8px; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 8px; font-family: inherit;
}
.ghost-btn:hover { background: #eef3fa; color: var(--ink); }
.ghost-btn.danger { color: var(--bad); border-color: #f3caca; background: #fdf5f5; font-weight: 600; }
.ghost-btn.danger:hover { background: var(--bad-soft); }
.ghost-btn .ico { width: 14px; height: 14px; }

/* ---------------- main ---------------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* One solid blue bar carries the page name and every account control, the way the reference
   portal puts its icon cluster and user chip on the right of the strip. */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 22px; background: linear-gradient(180deg, var(--bar), var(--bar-2));
  position: sticky; top: 0; z-index: 20;
  box-shadow: 0 2px 12px rgba(16, 35, 59, .18);
}
.topbar-title h1 { margin: 0; font-size: 17px; letter-spacing: .2px; color: #fff; }
.topbar-title p { margin: 2px 0 0; color: rgba(255, 255, 255, .78); font-size: 12.2px; }
.today {
  font-size: 12px; color: #fff; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .26);
  padding: 5px 12px; border-radius: 20px; white-space: nowrap;
}
.view { padding: 18px 24px 40px; }

/* The menu button and the bar's own brand belong to a phone, where the menu column is off the
   screen until asked for. On a desk the column stands open beside the bar, so both stay hidden. */
#menu-btn { display: none; }
.tb-brand { display: none; }
.scrim { display: none; }

/* ---------------- hero (dashboard header) ---------------- */
.hero {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; flex-wrap: wrap;
  background: linear-gradient(115deg, var(--hero-1) 0%, #1e52d8 55%, var(--hero-2) 100%);
  color: #fff; border-radius: 16px; padding: 22px 26px; margin-bottom: 16px;
  box-shadow: 0 12px 30px rgba(37, 99, 235, .22);
}
.hero .eyebrow {
  display: inline-block; font-size: 10.5px; letter-spacing: 1.3px; text-transform: uppercase;
  background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .22);
  padding: 4px 11px; border-radius: 20px; font-weight: 600;
}
.hero h1 { margin: 12px 0 4px; font-size: 28px; letter-spacing: -.3px; }
.hero .hero-sub { margin: 0; font-size: 13.5px; color: rgba(255, 255, 255, .82); }
.hero .hero-left { min-width: 260px; flex: 1 1 340px; }
.hero-box {
  display: grid; gap: 10px;
  background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 12px; padding: 12px 14px;
}
.hero-fields { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.hero-fields .field { flex: 0 0 auto; }
.hero-quick { display: flex; gap: 7px; flex-wrap: wrap; }
.hero-range { font-size: 11px; color: rgba(255, 255, 255, .72); letter-spacing: .3px; }
.hero-box .field > label { color: rgba(255, 255, 255, .82); }
.hero-box input, .hero-box select {
  background: rgba(11, 22, 38, .55); border: 1px solid rgba(255, 255, 255, .22);
  color: #fff; min-width: 132px; width: auto;
}
.hero-box select option { color: var(--ink); }
.hero-box input[type="date"] { color-scheme: dark; }
.hero-box input:focus, .hero-box select:focus { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); }
.hero-btn {
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .26);
  color: #fff; font-size: 12px; padding: 7px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.hero-btn:hover { background: rgba(255, 255, 255, .28); }
.hero-btn.on { background: #fff; border-color: #fff; color: var(--bar); font-weight: 600; }

/* ---------------- blocks ---------------- */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 12px; flex-wrap: wrap; }
.section-head h2 { margin: 0; font-size: 15px; }
.section-head .sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.spacer { flex: 1; }

.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); margin-bottom: 16px; }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 15px 17px; box-shadow: var(--shadow);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.card .card-main { min-width: 0; }
.card .k { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); }
.card .v { font-size: 22px; font-weight: 700; margin-top: 6px; letter-spacing: -.3px; color: var(--ink); }
.card.k-good .v { color: var(--good); }
.card.k-warn .v { color: var(--warn); }
.card.k-bad .v { color: var(--bad); }
.card.k-info .v { color: var(--info); }
.card.k-accent .v { color: var(--accent); }
.card .h { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.card .kpi-chip {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px;
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent);
}
.card .kpi-chip .ico { width: 19px; height: 19px; }
.card.k-good .kpi-chip { background: var(--good-soft); color: var(--good); }
.card.k-warn .kpi-chip { background: var(--warn-soft); color: var(--warn); }
.card.k-bad .kpi-chip { background: var(--bad-soft); color: var(--bad); }
.card.k-info .kpi-chip { background: var(--info-soft); color: var(--info); }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); margin-bottom: 16px; overflow: hidden; }
.panel-head { padding: 13px 16px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.panel-head h3 { margin: 0; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.panel-head h3 .ico { width: 16px; height: 16px; color: var(--accent); }
.panel-head .hint { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.panel-body { padding: 14px 16px; }
.panel-body.tight { padding: 0; }
.grid-2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

/* mini cards inside a panel - the "Total Details" row */
.mini-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.mini {
  background: #f8fafc; border: 1px solid var(--line-soft); border-radius: 10px; padding: 12px 14px;
}
.mini .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); }
.mini .v { font-size: 18px; font-weight: 700; margin-top: 5px; }
.mini.k-good .v { color: var(--good); }
.mini.k-warn .v { color: var(--warn); }
.mini.k-bad .v { color: var(--bad); }
.mini.k-accent .v { color: var(--accent); }

/* ---------------- filters ---------------- */
.filters { display: grid; gap: 9px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field > label { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
input, select, textarea {
  font: inherit; color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; width: 100%; min-width: 0;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(29,78,216,.15); }
input[type="checkbox"] { width: auto; }
input.money, input.num { text-align: right; }
textarea { resize: vertical; min-height: 62px; }
.field-note { font-size: 11px; color: var(--muted); }
.filters-foot { display: flex; gap: 8px; align-items: center; margin-top: 11px; flex-wrap: wrap; }
.chip { font-size: 11.5px; background: var(--accent-soft); color: #1a49ad; border: 1px solid #cddffb; border-radius: 20px; padding: 3px 10px; }
.chip.mut { background: var(--line-soft); color: var(--muted); border-color: var(--line); }
.chip.good { background: var(--good-soft); color: #0d7a37; border-color: #c2e9d0; }
.chip.warn { background: var(--warn-soft); color: #8a4108; border-color: #f2dcbc; }
.chip.bad { background: var(--bad-soft); color: #b21d1d; border-color: #f5caca; }
/* The reference table tags a row with a purple category chip and a pale-blue count pill. */
.chip.cat { background: var(--purple-soft); color: var(--purple); border-color: #e2d3fb; font-weight: 600; }
.chip.qty { background: var(--accent-soft); color: var(--bar); border-color: #cddffb; font-weight: 700; }
.chip.teal { background: #e2f4f3; color: #0b6f6c; border-color: #bfe4e2; }

/* ---------------- buttons ---------------- */
/* Un-sized inline SVGs default to 300x150 - every icon has to be given a box. */
.ico { width: 15px; height: 15px; flex: 0 0 auto; display: inline-block; vertical-align: -2px; }

/* Filled buttons carry the action colour, the icon rides along in white. A plain .btn is the
   quiet outline button used next to them so the main action of a strip still stands out. */
.btn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  border: 1px solid var(--line); background: #fff; color: #33415c;
  padding: 7px 14px; border-radius: 9px; font-size: 12.8px; font-weight: 600; cursor: pointer; white-space: nowrap;
  font-family: inherit; transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.btn:hover { background: #f4f7fc; border-color: #c6d3e6; }
.btn .ico { width: 15px; height: 15px; }
.btn.primary { background: var(--bar); border-color: var(--bar); color: #fff; }
.btn.primary:hover { background: #1a45bd; border-color: #1a45bd; }
.btn.good { background: var(--good); border-color: var(--good); color: #fff; }
.btn.good:hover { background: #128a3e; border-color: #128a3e; }
.btn.slate { background: var(--slate); border-color: var(--slate); color: #fff; }
.btn.slate:hover { background: #26344a; border-color: #26344a; }
.btn.dark { background: var(--dark); border-color: var(--dark); color: #fff; }
.btn.dark:hover { background: #111827; border-color: #111827; }
.btn.red { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.red:hover { background: #b91c1c; border-color: #b91c1c; }
.btn.danger { background: #fff; border-color: #f0c4c4; color: var(--bad); }
.btn.danger:hover { background: var(--bad-soft); border-color: #e6a8a8; }
.btn.sm { padding: 4px 10px; font-size: 12px; border-radius: 8px; }
.btn.xs { padding: 3px 8px; font-size: 11.5px; border-radius: 7px; font-weight: 500; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary .ico, .btn.good .ico, .btn.slate .ico, .btn.dark .ico, .btn.red .ico { color: #fff; }
.link { background: none; border: 0; color: var(--bar); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }

/* ---------------- tables ---------------- */
.table-wrap { overflow: auto; max-height: calc(100vh - 330px); }
.table-wrap.short { max-height: 340px; }
table.grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.8px; }
table.grid th, table.grid td { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: middle; white-space: nowrap; }
table.grid th {
  position: sticky; top: 0; z-index: 5; background: #f6f8fc; color: #6b7688;
  font-size: 10.8px; text-transform: uppercase; letter-spacing: .7px; font-weight: 700;
  border-bottom: 1px solid var(--line); cursor: default;
}
table.grid th.sortable { cursor: pointer; }
table.grid th.sortable:hover { color: var(--bar); }
table.grid th .arrow { font-size: 9px; opacity: .7; margin-left: 3px; }
table.grid td.n, table.grid th.n { text-align: right; font-variant-numeric: tabular-nums; }
table.grid tbody tr:nth-child(even) { background: #fafbfe; }
table.grid tbody tr:hover { background: #eff4fd; }
table.grid tr.selected { background: var(--accent-soft) !important; }
table.grid tfoot td { background: #f6f8fc; font-weight: 700; border-top: 2px solid var(--line); position: sticky; bottom: 0; }
table.grid td.wrap { white-space: normal; min-width: 150px; max-width: 260px; }
table.grid .sub { display: block; font-size: 11px; color: var(--muted); }
table.grid input[type="checkbox"] { transform: scale(1.08); }
.empty { padding: 34px 16px; text-align: center; color: var(--muted); font-size: 13px; }
.mut { color: var(--muted); }
.strong { font-weight: 600; }
.neg { color: var(--bad); }
.pos { color: var(--good); }
.nowrap { white-space: nowrap; }

/* ---------------- status badges ---------------- */
.st { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 2px 10px; border-radius: 20px; border: 1px solid transparent; font-weight: 600; }
.st.pending { background: var(--warn-soft); color: #8a4108; border-color: #f2dcbc; }
.st.deposited { background: var(--accent-soft); color: #1a49ad; border-color: #cddffb; }
.st.banked { background: var(--good-soft); color: #0d7a37; border-color: #c2e9d0; }
.st.returned { background: var(--bad-soft); color: #b21d1d; border-color: #f5caca; }
.st.cash { background: var(--info-soft); color: #3b4a68; border-color: #d7dde8; }
.st.paid { background: var(--good-soft); color: #0d7a37; border-color: #c2e9d0; }
.st.unpaid { background: #f1f4f9; color: #5b6a80; border-color: #dfe5ee; }
.st.partial { background: var(--warn-soft); color: #8a4108; border-color: #f2dcbc; }
.st.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st.open { background: var(--bad-soft); color: #b21d1d; border-color: #f5caca; }
.st.flagged { background: #f1f4f9; color: #5b6a80; border-color: #dfe5ee; }

/* ---------------- inline entry grid ---------------- */
table.grid.enter td { padding: 3px 4px; }
table.grid.enter th { padding: 7px 8px; }
.cellin { border: 1px solid transparent; background: transparent; border-radius: 6px; padding: 5px 7px; width: 100%; min-width: 74px; }
.cellin:hover { border-color: var(--line); }
.cellin:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(29,78,216,.15); }
tr.tot-row td { background: #eef3fa; font-weight: 700; border-top: 2px solid var(--line); }

/* ---------------- chip and key-value lists ---------------- */
.chip-list { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.chip-list .chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 6px 4px 11px; }
.chip-list .chip button {
  display: inline-flex; border: 0; background: rgba(255,255,255,.72); color: inherit; cursor: pointer;
  border-radius: 50%; padding: 2px; line-height: 0;
}
.chip-list .chip button:hover { background: #fff; }
.chip-list .chip .ico { width: 12px; height: 12px; }
.kv-list { display: grid; gap: 4px; }
.kv-list > div { display: flex; justify-content: space-between; gap: 12px; font-size: 12.8px; padding: 5px 0; border-bottom: 1px solid var(--line-soft); }
.kv-list > div:last-child { border-bottom: 0; }
.kv-list > div.tot { border-top: 2px solid var(--line); border-bottom: 0; padding-top: 7px; font-weight: 700; }
.kv-list span { color: var(--muted); }
/* The salary slip puts earnings on one side and the attendance behind them on the other. */
.slip-cols { display: grid; gap: 8px 24px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.slip-cols h4 { margin: 0 0 6px; font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); font-weight: 600; }

/* ---------------- typeahead ---------------- */
.ta-wrap { position: relative; }
.ta-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 3px); z-index: 60;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow);
  max-height: 260px; overflow: auto; display: none;
}
.ta-list.open { display: block; }
.ta-item { padding: 7px 10px; cursor: pointer; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.ta-item:last-child { border-bottom: 0; }
.ta-item:hover, .ta-item.hl { background: var(--accent-soft); }
.ta-item .sub { display: block; font-size: 11px; color: var(--muted); }
.ta-item .tag { float: right; font-size: 10.5px; color: var(--muted); }

/* ---------------- modal ---------------- */
.modal-root[hidden] { display: none; }
.modal-root { position: fixed; inset: 0; z-index: 100; background: rgba(11, 22, 38, .45); display: grid; place-items: start center; padding: 40px 16px; overflow: auto; }
.modal {
  background: var(--panel); border-radius: 12px; box-shadow: 0 20px 60px rgba(8, 20, 40, .32);
  width: min(860px, 100%); animation: pop .16s ease;
}
.modal.narrow { width: min(520px, 100%); }
@keyframes pop { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-head { padding: 14px 18px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; }
.modal-head h3 { margin: 0; font-size: 15.5px; }
.modal-head .hint { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.modal-body { padding: 16px 18px; display: grid; gap: 12px; grid-template-columns: repeat(12, 1fr); }
.modal-body .field { grid-column: span 4; }
.modal-body .field.w3 { grid-column: span 3; }
.modal-body .field.w6 { grid-column: span 6; }
.modal-body .field.w8 { grid-column: span 8; }
.modal-body .field.w12 { grid-column: span 12; }
.modal-body .full { grid-column: span 12; }
/* ---------------- 12-column grids ---------------- */
/* Tracks are minmax(0,1fr): a plain 1fr track takes its minimum from the widest control inside
   it, so a date box or a long select would push the whole grid past the screen. With a zero
   minimum the fields shrink to the column they were given instead. */
.grid-12 { display: grid; gap: 12px; grid-template-columns: repeat(12, minmax(0, 1fr)); width: 100%; }
.grid-12 .field { grid-column: span 4; }
.grid-12 .field.w3 { grid-column: span 3; }
.grid-12 .field.w6 { grid-column: span 6; }
.grid-12 .field.w8 { grid-column: span 8; }
.grid-12 .field.w12 { grid-column: span 12; }
/* Narrow columns too - the petty book, the payroll panels and the day sheet all pack fields tighter. */
.grid-12 .field.w1, .modal-body .field.w1 { grid-column: span 1; }
.grid-12 .field.w2, .modal-body .field.w2 { grid-column: span 2; }
.grid-12 .field.w4, .modal-body .field.w4 { grid-column: span 4; }
.grid-12 .field.w5, .modal-body .field.w5 { grid-column: span 5; }
.grid-12 .field.w7, .modal-body .field.w7 { grid-column: span 7; }
.grid-12 .field.w9, .modal-body .field.w9 { grid-column: span 9; }
.grid-12 .field.w10, .modal-body .field.w10 { grid-column: span 10; }
.grid-12 .field.w11, .modal-body .field.w11 { grid-column: span 11; }
.modal-foot { padding: 13px 18px; border-top: 1px solid var(--line-soft); display: flex; gap: 9px; justify-content: flex-end; align-items: center; }
.x { background: none; border: 0; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; }
.x:hover { color: var(--bad); }
fieldset.group { border: 1px solid var(--line); border-radius: 9px; padding: 12px; margin: 0; grid-column: span 12; }
fieldset.group legend { font-size: 11.5px; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); padding: 0 6px; }

/* ---------------- toast ---------------- */
.toast-root { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--navy); color: #fff; padding: 10px 15px; border-radius: 9px; font-size: 13px;
  box-shadow: 0 10px 30px rgba(8, 20, 40, .3); display: flex; gap: 9px; align-items: center;
  animation: slide .18s ease; max-width: 420px;
}
.toast.bad { background: #8f2b2b; }
.toast.good { background: #0d7355; }
@keyframes slide { from { transform: translateX(14px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------------- misc ---------------- */
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); margin-top: 8px; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.bar-row { display: grid; grid-template-columns: 96px 1fr 110px; gap: 10px; align-items: center; margin-bottom: 9px; font-size: 12.5px; }
.bar-row .track { background: var(--line-soft); border-radius: 6px; height: 11px; overflow: hidden; }
.bar-row .fill { height: 100%; border-radius: 6px; }

/* progress rows - the reference layout puts the figure above a full-width bar */
.pg-list { display: grid; gap: 14px; }
.pg-row { cursor: pointer; }
.pg-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.pg-name { font-size: 12.5px; font-weight: 600; }
.pg-name em { font-style: normal; font-weight: 400; color: var(--muted); font-size: 11.5px; margin-left: 4px; }
.pg-val { font-size: 12.5px; font-weight: 700; color: var(--good); font-variant-numeric: tabular-nums; }
.pg-val em { font-style: normal; font-weight: 400; color: var(--muted); font-size: 11.5px; margin-left: 3px; }
.pg-track { display: block; background: #eef2f7; border-radius: 6px; height: 8px; overflow: hidden; }
.pg-fill { display: block; height: 100%; border-radius: 6px; background: var(--accent); }
.pg-row:hover .pg-track { background: #e6ecf5; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 600; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; flex-wrap: wrap; }
.tabs a { padding: 8px 14px; font-size: 13px; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; }
.tabs a:hover { color: var(--ink); background: #f6f8fc; }
.tabs a.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.stat-list { display: grid; gap: 8px; }
.stat-list .li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; background: #f8fafd; border: 1px solid var(--line-soft); border-radius: 8px; font-size: 12.8px; }
.stat-list .li .n { font-weight: 700; font-variant-numeric: tabular-nums; }
.note { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.hint-box { background: #f6f9fd; border: 1px dashed #c5d5ee; border-radius: 8px; padding: 10px 12px; font-size: 12px; color: #40608c; }
.data-row-actions {
  display: flex; gap: 5px; flex-wrap: wrap;
  opacity: 0; pointer-events: none; transition: opacity .12s ease;
}
table.grid tr:hover .data-row-actions,
table.grid tr:focus-within .data-row-actions,
table.grid tr.selected .data-row-actions,
.data-row-actions:focus-within { opacity: 1; pointer-events: auto; }
@media (hover: none) { .data-row-actions { opacity: 1; pointer-events: auto; } }

/* ---------------- logo upload ---------------- */
.logo-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.logo-preview {
  width: 38px; height: 38px; border-radius: 8px; flex: 0 0 38px;
  border: 1px solid var(--line); background: #f7f9fc; overflow: hidden;
  display: grid; place-items: center; font-size: 11px; color: var(--muted);
}
.logo-preview img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------------- import mapping ---------------- */
.imp-grid { display: grid; gap: 12px; grid-template-columns: repeat(12, 1fr); width: 100%; }
.modal-body .imp-grid > * { grid-column: span 12; }
.imp-target { border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; display: grid; gap: 8px; }
.imp-line { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.imp-line > .imp-name { font-weight: 600; flex: 0 0 190px; }
.imp-line > select { width: auto; flex: 1 1 220px; min-width: 200px; }
.imp-line > select.hrow { flex: 1 1 300px; }
.imp-det { font-size: 11.5px; color: var(--good); }
.imp-det.bad { color: var(--bad); }
.imp-body { display: grid; gap: 10px; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.map-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.map-grid .field { grid-column: auto; }
.map-grid .field > label { font-size: 10.5px; }

/* ---------------- print ---------------- */
.print-root { display: none; }
@media print {
  body { background: #fff; }
  .app, .modal-root, .toast-root { display: none !important; }
  .print-root { display: block !important; }
  .sheet { font-size: 12px; color: #000; }
  .sheet-head { display: flex; align-items: center; gap: 10px; }
  .sheet-head img { width: 44px; height: 44px; object-fit: contain; }
  .sheet table { width: 100%; border-collapse: collapse; }
  .sheet th, .sheet td { border: 1px solid #9aa4b2; padding: 4px 6px; text-align: left; }
  .sheet th { background: #eef1f5; }
  .sheet table.wide { font-size: 8.2px; }
  .sheet table.wide th, .sheet table.wide td { padding: 2px 1px; }
  .sheet td.n, .sheet th.n { text-align: right; }
  .sheet h1 { font-size: 17px; margin: 0 0 2px; }
  .sheet .stamp { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 11.5px; margin: 2px 0 8px; }
  .sheet .stamp b { font-weight: 700; }
  .sheet .meta { display: flex; justify-content: space-between; font-size: 11.5px; margin-bottom: 10px; }
  .sheet .tot { font-weight: 700; }
  .sheet .sig { margin-top: 26px; display: flex; justify-content: space-between; font-size: 11.5px; }
  .sheet .sig div { border-top: 1px solid #000; padding-top: 4px; width: 190px; text-align: center; }
  /* A long register has to read the same way on paper as on screen: the column names come back
     on every page and a row never splits in half across one. */
  .sheet thead { display: table-header-group; }
  .sheet tfoot { display: table-row-group; }
  .sheet tr { break-inside: avoid; }
  .sheet h2 { break-after: avoid; }
  .sheet .sig { break-inside: avoid; }
  .stage { border: 0; padding: 0; overflow: visible; background: none; }
  .print-root .sheet { box-shadow: none; margin: 0; break-after: page; }
  .print-root .sheet:last-child { break-after: auto; }
  .print-root .sheet[style*="--ph"] { width: calc(var(--pw) - .3mm); height: calc(var(--ph) - .3mm); overflow: hidden; }
  .print-root .noprint { display: none !important; }
}

/* ---------------- print stages: cheques, warranty cards, stickers ---------------- */
/* One set of markup draws both the on-screen preview and the paper, so the picture on
   the screen is what lands on the stock. Every field is placed in millimetres. */
.stage { background: #eef1f6; border: 1px solid var(--line); border-radius: 10px; padding: 14px; overflow: auto; }
.stage-row { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
/* The preview columns have to give way before the sheet inside them is allowed to overflow. */
.stage-row > * { min-width: 0; }
.sheet { position: relative; flex: 0 0 auto; background: #fff; color: #111; box-shadow: 0 0 0 1px #ccd4e0; margin-bottom: 14px; }
.sheet:last-child { margin-bottom: 0; }
.sheet .fld { position: absolute; white-space: nowrap; line-height: 1; }
.chq-cross { position: absolute; display: flex; flex-direction: column; gap: 7px; }
.chq-cross i { display: block; width: 42mm; border-top: 2px solid #111; transform: rotate(-35deg); transform-origin: left center; }
.chq-ac { position: absolute; border-top: 1.5px solid #111; border-bottom: 1.5px solid #111; padding: 1px 5px; white-space: nowrap; }
.card-grid { position: absolute; inset: 0; display: grid; }
.wcard { position: relative; border: 1px dashed #b9c2cf; overflow: hidden; }
.wcard.nocut { border-color: transparent; }
.wcard .fin { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6mm; text-align: center; padding: 2mm; }
.wcard .wp { font-weight: 600; }
.wcard .ws { letter-spacing: .04em; }
.wcard .wper { opacity: .85; }

/* ---------------- split: controls left, the paper right ---------------- */
/* Cheque and warranty printing is measured by eye against the real leaf, so the numbers being
   typed and the sheet they move have to sit in one look. Left column scrolls on its own to keep
   the preview pinned while a position is nudged. */
.split { display: grid; gap: 16px; grid-template-columns: minmax(430px, 1.2fr) minmax(330px, .8fr); align-items: start; }
.split > .split-left, .split > .split-right { min-width: 0; }
.split > .split-right { position: sticky; top: 14px; }
.split > .split-right .stage { max-height: calc(100vh - 190px); overflow: auto; }
.split .panel { margin-bottom: 14px; }
.split .panel:last-child { margin-bottom: 0; }

/* ---------------- tabs ---------------- */
.tab-btn {
  display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; cursor: pointer;
  padding: 8px 14px; font: inherit; font-size: 13px; color: var(--muted);
  border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0;
}
.tab-btn:hover { color: var(--ink); background: #f6f8fc; }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.tab-btn .ico { width: 15px; height: 15px; }
.tab-btn .tab-n { font-size: 10.5px; background: #eef2f8; color: #55647c; padding: 1px 7px; border-radius: 20px; }
.tab-btn.active .tab-n { background: #d3e2fb; color: var(--bar); }

/* ---------------- coloured button and nav icons ---------------- */
/* A button strip reads faster when the icon carries its own colour instead of inheriting text grey. */
.ico.t-green { color: var(--good); }
.ico.t-blue { color: var(--bar); }
.ico.t-red { color: var(--bad); }
.ico.t-amber { color: #c77c12; }
.ico.t-purple { color: var(--purple); }
.ico.t-teal { color: var(--teal); }
.ico.t-grey { color: #7c8ba1; }
.ico.t-slate { color: var(--slate); }
.tone-green { color: var(--good); }
.tone-red { color: var(--bad); }
.tone-amber { color: #c77c12; }

/* ---------------- notification bell and account cluster ---------------- */
.topbar-side { display: flex; align-items: center; gap: 9px; }
.bell-wrap { position: relative; }
/* Icon squares on the blue bar are cut from the same translucent white, so bell, lock and
   user chip read as one cluster rather than three unrelated controls. */
.bell-btn, .bar-btn {
  position: relative; display: grid; place-items: center; width: 36px; height: 36px;
  background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 9px; cursor: pointer; color: #fff;
}
.bell-btn:hover, .bar-btn:hover { background: rgba(255, 255, 255, .28); }
.bell-btn .ico, .bar-btn .ico { width: 18px; height: 18px; }
.bell-btn.on { background: #fff; border-color: #fff; color: var(--bar); }
.bell-dot {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center; border-radius: 10px; background: var(--bad); color: #fff;
  font-size: 10.5px; font-weight: 700; border: 2px solid var(--bar);
}
.bell-dot[hidden] { display: none; }
/* The live cloud mark shares the bell's square style and adds a dot in the corner, so which way
   the books are pointing is readable at a glance: green agree, amber one side holds something the
   other has not taken, red it could not ask. The arrows turn while a file is moving. */
.sync-dot {
  position: absolute; right: 5px; bottom: 5px; width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255, 255, 255, .5); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .5);
}
.sync-dot.good { background: #3ed07a; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .8); }
.sync-dot.warn { background: #f0a63a; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .8); }
.sync-dot.bad  { background: var(--bad); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .8); }
#sync-btn.spin .ico { animation: sync-turn 1.1s linear infinite; }
@keyframes sync-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #sync-btn.spin .ico { animation: none; } }
.user-chip { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; padding: 0 4px 0 8px; }
.user-chip strong { font-size: 12.6px; color: #fff; }
.user-chip span { font-size: 10px; letter-spacing: 1.1px; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.bell-panel {
  position: absolute; right: 0; top: 46px; z-index: 90; width: min(430px, 92vw);
  background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 46px rgba(16,35,59,.22);
  overflow: hidden;
}
.bell-panel[hidden] { display: none; }
.bell-head { display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-bottom: 1px solid var(--line-soft); }
.bell-head strong { font-size: 13px; }
.bell-list { max-height: 380px; overflow: auto; }
.bell-row { display: grid; grid-template-columns: 26px 1fr auto; gap: 9px; align-items: start; padding: 10px 13px; border-bottom: 1px solid var(--line-soft); }
.bell-row:last-child { border-bottom: 0; }
.bell-row:hover { background: #f7fafd; }
.bell-row .bl-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--warn-soft); color: #8a4108; }
.bell-row.p-cheque .bl-ico { background: var(--warn-soft); color: #8a4108; }
.bell-row.p-deduction .bl-ico { background: var(--bad-soft); color: #b21d1d; }
.bell-row.p-cash .bl-ico { background: var(--good-soft); color: #0d7a37; }
.bell-row.p-chequepaid .bl-ico { background: var(--accent-soft); color: #1a49ad; }
.bell-row .bl-ico .ico { width: 15px; height: 15px; }
.bell-row .bl-main { min-width: 0; }
.bell-row .bl-t { font-size: 12.8px; font-weight: 600; }
.bell-row .bl-s { font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.bell-row .bl-amt { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bell-foot { display: flex; gap: 8px; align-items: center; padding: 10px 13px; border-top: 1px solid var(--line-soft); background: #f8fafd; flex-wrap: wrap; }
.bell-empty { padding: 26px 14px; text-align: center; color: var(--muted); font-size: 12.5px; }

/* ---------------- petty cash ---------------- */
.pc-balance { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; margin-bottom: 14px; }
.pc-book .cr { color: var(--good); font-weight: 700; font-variant-numeric: tabular-nums; }
.pc-book .db { color: var(--bad); font-weight: 700; font-variant-numeric: tabular-nums; }
.pc-book .bal { font-weight: 700; font-variant-numeric: tabular-nums; }
.pc-book tr.brought td { background: #f2f6fc; font-weight: 600; }
.pc-book tr.carry td { background: #eef3fa; font-weight: 700; border-top: 2px solid #b9c8dc; }
.month-strip { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.month-strip .btn.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
/* The attendance sheet: the mark carries its own colour so a month can be read at a glance. */
.att-grid select { width: 100%; min-width: 0; padding: 4px 2px; text-align: center; font-size: 12px; }
.att-grid td.n { padding: 2px 2px; }
.att-grid th.n { padding: 7px 3px; font-size: 10.5px; }
.att-grid td.name-col { white-space: normal; min-width: 150px; }
.att-grid select.att-p { background: var(--good-soft); border-color: #c2e9d0; }
.att-grid select.att-h { background: var(--info-soft); border-color: #cddffb; }
.att-grid select.att-a { background: var(--bad-soft); border-color: #f5caca; }
.att-grid select.att-l { background: var(--warn-soft); border-color: #f2dcbc; }

/* ---------------- warranty card background picture ---------------- */
/* The picture sits behind the serial inside the card, sized to the cell so a preview at true
   scale is the same rectangle that prints. */
.wcard .wbg { position: absolute; inset: 0; background-size: 100% 100%; background-repeat: no-repeat; background-position: center; pointer-events: none; }
.img-picker { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
.img-tile { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.img-tile .thumb { height: 76px; display: grid; place-items: center; background: #f2f5fa; color: var(--muted); font-size: 11px; overflow: hidden; }
.img-tile .thumb img { width: 100%; height: 100%; object-fit: contain; }
.img-tile .nm { padding: 7px 9px; font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.img-tile .nm .ico { width: 12px; height: 12px; }
.img-tile .url { padding: 0 9px 7px; font-size: 10.5px; color: var(--muted); word-break: break-all; }
.img-tile.picked { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

/* ---------------- shared paper picker ---------------- */
/* Reports, warranty sheets and the settings tab all mount the same panel, so it gets one
   treatment: the saved setups sit under a rule, aligned to the bottom of their own row. */
.ps-presets { align-items: flex-end; padding-top: 12px; border-top: 1px dashed var(--line); }
.ps-presets .field { margin-bottom: 0; }
.ps-presets .btn { white-space: nowrap; }
.row.seg { flex-wrap: wrap; }

/* ---------------- warranty panel: numbered groups ---------------- */
/* Twenty-odd fields read as one grey block, so the card panel is cut into the five decisions
   behind them - each with the number a person works through them in. */
.fgroup { background: #fbfcfe; border: 1px solid var(--line-soft); border-radius: 11px; padding: 12px 13px 6px; margin-bottom: 12px; }
.fgroup:last-of-type { margin-bottom: 2px; }
.fgroup .grid-12 { row-gap: 10px; }
.fg-head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 11px; }
.fg-n {
  display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%;
  background: var(--bar); color: #fff; font-size: 12px; font-weight: 700;
}
.fg-t h4 { margin: 0; font-size: 13.2px; color: var(--ink); }
.fg-t p { margin: 2px 0 0; font-size: 11.8px; color: var(--muted); line-height: 1.45; }
/* The card panel is a twenty-odd controls deep and does not fit beside a full-size paper
   preview, so its blocks are set a step smaller than a normal form and each one folds away
   under its own heading. Which blocks are shut is kept per print mode, the same as the layout. */
.fgroup { padding: 9px 10px 4px; margin-bottom: 9px; border-radius: 10px; }
.fgroup .grid-12 { gap: 7px 8px; }
.fg-head { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; cursor: pointer; user-select: none; }
.fg-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.fg-n { width: 18px; height: 18px; font-size: 10.5px; margin-top: 1px; }
.fg-t { flex: 1 1 auto; min-width: 0; }
.fg-t h4 { font-size: 12px; }
.fg-t p { font-size: 10.4px; margin: 1px 0 0; line-height: 1.32; }
.fg-caret { flex: 0 0 auto; align-self: center; color: var(--muted); }
.fg-caret .ico { width: 14px; height: 14px; transform: rotate(90deg); transition: transform .15s ease; }
.fgroup.folded .fg-caret .ico { transform: none; }
.fgroup.folded { padding-bottom: 8px; }
.fgroup.folded .fg-head { margin-bottom: 0; }
.fgroup.folded .grid-12 { display: none; }
.fgroup input, .fgroup select, .fgroup textarea { padding: 4px 6px; font-size: 11.6px; border-radius: 6px; }
.fgroup input[type="checkbox"] { padding: 0; }
.fgroup textarea { min-height: 40px; }
.fgroup .field { gap: 2px; }
.fgroup .field > label { font-size: 9.4px; letter-spacing: .35px; }
.fgroup .field-note { font-size: 9.4px; line-height: 1.3; }
.fgroup .field .strong { font-size: 11.6px; line-height: 1.5; }
.fgroup .field label.row span { font-size: 10.6px; line-height: 1.25; }
.fgroup .btn.sm { padding: 3px 8px; font-size: 11px; }
.fgroup .btn.sm .ico { width: 13px; height: 13px; }
.chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--bar); font-weight: 600; }

/* ---------------- app install ---------------- */
.install-steps { display: grid; gap: 8px; }
.install-steps .li { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; padding: 9px 11px; background: #f8fafd; border: 1px solid var(--line-soft); border-radius: 9px; }
.install-steps .li .ico { margin-top: 1px; }
.install-os { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* ---------------- auth lock ---------------- */
.lock-screen { max-width: 430px; margin: 40px auto; }

/* The door. A machine that has not been let in shows no alert bell, no cloud mark and no sign-out
   button: there is nothing of the shop's on that screen for a passer-by to read or press. */
.locked .bell-wrap, .locked #sync-btn, .locked .sidebar-foot, .locked #menu-btn { display: none; }

/* Behind a machine that has not been let in there is also no menu column and no blue bar - both
   belong to someone who is already in - so the shop photograph fills the whole window and the
   card floats in the middle of it. Nothing else is on that screen. */
.app.locked .sidebar, .app.locked .topbar, .app.locked .scrim { display: none; }
.app.locked .view {
  flex: 1; min-height: 100vh; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(rgba(8, 17, 33, .52), rgba(8, 17, 33, .7)),
    url(../icons/login-bg.jpg) center / cover no-repeat #0f1b2d;
}
.door-stage { width: 100%; padding: 26px 16px 34px; display: flex; justify-content: center; }
.door-card {
  width: 100%; max-width: 480px; padding: 26px 30px 18px;
  background: #fff; border-radius: 20px; box-shadow: 0 28px 66px rgba(6, 16, 32, .45);
}
.door-head { text-align: center; }
.door-mark {
  width: 72px; height: 72px; margin: 0 auto; border-radius: 16px; overflow: hidden;
  display: grid; place-items: center; background: linear-gradient(135deg, var(--bar), var(--bar-2));
  color: #fff; font-weight: 700; font-size: 21px; letter-spacing: .5px;
  box-shadow: 0 8px 18px rgba(22, 55, 159, .24);
}
.door-mark.has-logo { width: min(250px, 100%); height: 78px; background: #fff; border: 1px solid var(--line); box-shadow: none; }
.door-mark img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.door-title { margin-top: 14px; font-size: 19.5px; font-weight: 700; letter-spacing: .2px; color: var(--ink); }
.door-sub { margin-top: 4px; font-size: 12.4px; color: var(--muted); }
.door-body { margin-top: 18px; }
.door-label {
  display: block; margin: 13px 0 6px; font-size: 10.8px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase; color: var(--slate);
}
.door-in { position: relative; display: block; }
.door-in > .ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: #93a2bd; }
.door-in input {
  width: 100%; height: 46px; padding: 0 14px 0 40px; font: inherit; font-size: 14px; color: var(--ink);
  background: #f2f5fa; border: 1px solid var(--line); border-radius: 12px;
}
.door-in.has-eye input { padding-right: 42px; background: var(--accent-soft); border-color: #d3e0f6; }
.door-in input:focus { outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px var(--accent-soft); }
.door-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 9px; background: none; color: #93a2bd; cursor: pointer;
}
.door-eye .ico { width: 17px; height: 17px; }
.door-eye:hover, .door-eye.on { color: var(--bar); background: #fff; }
.door-keep { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12.6px; color: var(--slate); cursor: pointer; }
.door-keep input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); flex: 0 0 16px; }
.door-link {
  display: block; margin-top: 10px; padding: 0; border: 0; background: none; text-align: left;
  font: inherit; font-size: 12.2px; color: var(--slate); text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer;
}
.door-link:hover { color: var(--bar); }
.door-where { margin-top: 12px; }
.door-go {
  width: 100%; height: 50px; margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 9px;
  border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--bar), var(--bar-2));
  color: #fff; font: inherit; font-size: 15px; font-weight: 700; letter-spacing: .2px; cursor: pointer;
  box-shadow: 0 12px 26px rgba(29, 78, 216, .3);
}
.door-go:hover { filter: brightness(1.07); }
.door-go .ico { width: 18px; height: 18px; }
.door-note { margin: 12px 0 0; font-size: 11.2px; line-height: 1.45; color: var(--muted); }
.door-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); text-align: center; }
.door-people { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12.8px; font-weight: 700; color: var(--ink); }
.door-people .ico { width: 15px; height: 15px; color: var(--muted); }
.door-made { margin-top: 4px; font-size: 11px; color: var(--muted); }
.door-made strong { color: var(--bar); }

/* ---------------- forms & cards ---------------- */
.form-list { display: grid; gap: 6px; }
.form-item {
  display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 1px 10px; align-items: center;
  text-align: left; font: inherit; color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer;
}
.form-item:hover { border-color: #c7d5ee; background: #f7fafe; }
.form-item.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.fi-tab {
  grid-row: span 2; display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--slate); background: var(--line-soft); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 4px;
}
.form-item.active .fi-tab { background: #fff; border-color: #cddffb; color: var(--bar); }
.fi-name { font-size: 13px; font-weight: 600; }
.fi-code { font-size: 11.3px; color: var(--muted); }
.card-list { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card-item {
  display: grid; gap: 9px; align-content: start; background: #fbfcfe;
  border: 1px solid var(--line); border-radius: 12px; padding: 11px;
}
.card-item-head { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.card-item-head .strong { margin-right: 3px; }
/* A preview drawn at true paper size, then scaled into whatever room the screen gives it.
   zoom is used rather than transform so the scaled sheet also takes up scaled space. */
.stage.fit { padding: 12px; text-align: center; }
.stage.fit .sheet { zoom: var(--fit, 1); box-shadow: 0 1px 4px rgba(16, 35, 59, .16); }
.card-stage { background: #f6f8fc; }

/* ---------------- account register ---------------- */
.secret {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px;
  background: #f2f5fa; border: 1px solid var(--line); border-radius: 6px;
  padding: 2px 7px; letter-spacing: .3px; word-break: break-all;
}
.secret.on { background: #fff8e6; border-color: #eddca6; color: #6b4a05; }
.secret-row { gap: 5px; align-items: center; }
.secret-row .btn.xs { padding: 2px 6px; }

/* ---------------- audit pack ---------------- */
.check-list { display: grid; gap: 13px; }
.check-group { display: grid; gap: 5px; }
.cg-head {
  font-size: 10.3px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: #94a1b4; padding: 0 2px;
}
.check-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  font: inherit; font-size: 12.6px; color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; cursor: pointer;
}
.check-item:hover { border-color: #c7d5ee; background: #f7fafe; }
.check-item.active { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.check-item .ico { flex: none; }
.ci-name { flex: 1 1 auto; min-width: 0; }
.ci-v {
  flex: none; font-size: 11px; font-weight: 700; min-width: 26px; text-align: center;
  border-radius: 20px; padding: 2px 8px; background: var(--line-soft); color: var(--muted);
}
.ci-v.good { background: var(--good-soft); color: #0d7a37; }
.ci-v.warn { background: var(--warn-soft); color: #8a4108; }
.ci-v.bad { background: var(--bad-soft); color: #b21d1d; }
.meta-strip {
  display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 11px; padding: 9px 12px;
  background: #f8fafd; border: 1px solid var(--line-soft); border-radius: 9px; font-size: 12px;
}
.meta-strip span { color: var(--muted); }
.meta-strip b { color: var(--ink); font-weight: 600; margin-right: 3px; }
.sub-table { margin-top: 14px; }
.sub-table h4 { margin: 0 0 8px; font-size: 12.5px; color: var(--slate); }
table.grid tr.flag td { background: #fdf4f4; }
table.grid tr.flag td:first-child { box-shadow: inset 3px 0 0 var(--bad); }

/* Phone and tablet: the menu column slides in from the left over a grey sheet instead of
   standing beside the screen, because a hand-held width has no room for both. The bar keeps the
   brand, the account controls and the three lines that open the menu; the page name moves to its
   own line under them. */
@media (max-width: 900px) {
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; height: 100%;
    width: min(290px, 84vw); flex: none; z-index: 40;
    border-right: 1px solid var(--line); border-bottom: 0;
    box-shadow: 14px 0 40px rgba(16, 35, 59, .26);
    transform: translateX(-102%); transition: transform .18s ease;
  }
  .sidebar.open { transform: none; }
  .scrim { position: fixed; inset: 0; z-index: 35; background: rgba(16, 35, 59, .44); display: block; }
  .scrim[hidden] { display: none; }
  body.nav-open { overflow: hidden; }
  #menu-btn { display: inline-flex; }
  .tb-brand { display: flex; padding: 0; border-bottom: 0; min-width: 0; margin-right: auto; }
  .tb-brand .brand-mark { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; font-size: 12px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .34); }
  .tb-brand .brand-text strong { color: #fff; font-size: 12.5px; letter-spacing: .4px; }
  .tb-brand .brand-text span { color: rgba(255, 255, 255, .76); font-size: 10.5px; }
  .topbar { flex-wrap: wrap; padding: 9px 14px; gap: 10px; }
  .topbar-side { margin-left: auto; }
  /* The day is already named in each screen's own heading, so the bar gives the row back to the
     icons a thumb needs on a phone; on a desktop screen the chip stays where it always was. */
  .topbar-side .today { display: none; }
  .topbar-title { flex: 1 1 100%; order: 4; }
  .nav { display: block; }
  .nav-label { display: block; }
  .nav-sub { display: grid; }
  .hero { padding: 18px; }
  .hero h1 { font-size: 22px; }
  .view { padding: 14px; }
  .split { grid-template-columns: 1fr; }
}

/* ---------------- all display sizes ----------------
   A phone on the counter, a tablet in the van and a wide office monitor all read the same
   tables. The rule is: never squeeze a field until it is unusable - move it below instead. */

/* Wide desks: give the two-column screens more room and let long tables use the height. */
@media (min-width: 1500px) {
  .view { padding: 20px 30px 44px; }
  .table-wrap { max-height: calc(100vh - 300px); }
  .split { grid-template-columns: minmax(480px, 1.15fr) minmax(400px, .85fr); gap: 20px; }
  .check-list, .form-list { gap: 8px; }
}

/* Small laptops and large tablets: the 12-column grids start losing their narrow columns.
   Only down to the 900px line, where the split screens go one-column for good. */
@media (max-width: 1180px) and (min-width: 901px) {
  .split { grid-template-columns: minmax(320px, 1.15fr) minmax(260px, .85fr); gap: 12px; }
  .grid-12 .field.w1, .modal-body .field.w1 { grid-column: span 3; }
  .grid-12 .field.w2, .modal-body .field.w2 { grid-column: span 4; }
  .grid-12 .field.w3, .modal-body .field.w3 { grid-column: span 4; }
  .grid-12 .field.w5, .modal-body .field.w5 { grid-column: span 6; }
  .grid-12 .field.w7, .modal-body .field.w7 { grid-column: span 8; }
  .grid-12 .field.w9, .modal-body .field.w9 { grid-column: span 10; }
  .grid-12 .field.w10, .modal-body .field.w10 { grid-column: span 12; }
  .grid-12 .field.w11, .modal-body .field.w11 { grid-column: span 12; }
}

/* Under the tablet line: one column of fields, sheets scaled to the screen, tables that scroll
   sideways instead of shrinking their type. */
@media (max-width: 820px) {
  .grid-12 .field, .modal-body .field { grid-column: span 12; }
  .grid-12 .field.w2, .grid-12 .field.w3, .modal-body .field.w2, .modal-body .field.w3 { grid-column: span 6; }
  .fgroup .grid-12 .field { grid-column: span 6; }
  .fgroup .grid-12 .field.w1 { grid-column: span 3; }
  .filters { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
  .modal-root { padding: 16px 8px; }
  /* An eighteen-field register form is taller than a phone. The dialog keeps its own height, so
     the heading and the Save/Cancel row stay on screen and only the fields scroll between them -
     otherwise the buttons sit at the end of a page-long scroll and are easy to lose. */
  .modal { display: flex; flex-direction: column; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
  .modal-body { overflow: auto; min-height: 0; }
  .modal-head, .modal-foot { flex: 0 0 auto; }
  .modal-body { padding: 13px 14px; gap: 10px; }
  .modal-foot { padding: 11px 14px; flex-wrap: wrap; }
  .modal-foot .btn { flex: 1 1 auto; justify-content: center; }
  .panel-head { padding: 11px 13px; }
  .panel-body { padding: 12px 13px; }
  .split > .split-right { position: static; }
  .split { grid-template-columns: 1fr; }
  .split > .split-right .stage { max-height: none; }
  .card-list { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  .install-os { grid-template-columns: 1fr; }
}

/* Phone in the hand. */
@media (max-width: 520px) {
  .view { padding: 12px 10px 34px; }
  .topbar { padding: 9px 12px; gap: 10px; }
  /* A hand-held width carries the mark and the shop's name, and drops the company line under it -
     the full company title stays at the head of the menu column. */
  .tb-brand .brand-text span { display: none; }
  .topbar-title h1 { font-size: 15px; }
  .topbar-title p { font-size: 11px; }
  .today { display: none; }
  .hero { padding: 15px; border-radius: 13px; }
  .hero h1 { font-size: 19px; }
  .hero .sub { font-size: 12px; }
  .cards { grid-template-columns: 1fr; gap: 10px; }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 11px 12px; min-width: 0; }
  .card .v { font-size: 19px; overflow-wrap: anywhere; }
  .card .k { overflow-wrap: anywhere; }
  .grid-12 .field.w2, .grid-12 .field.w3, .modal-body .field.w2, .modal-body .field.w3,
  .fgroup .grid-12 .field, .fgroup .grid-12 .field.w1 { grid-column: span 12; }
  .section-head { gap: 8px; }
  .section-head .row, .row { gap: 7px; }
  .tabs { gap: 2px; }
  .tabs a, .tab-btn { padding: 7px 10px; font-size: 12.3px; }
  .stage { padding: 9px; }
  .table-wrap { max-height: none; }
  .card-list { grid-template-columns: 1fr; }
  .lock-screen { margin: 16px auto; }
  /* A hand-held width starts the card near the top instead of floating it in the middle, so an
     open keyboard can never push the username box above the reach of a thumb. */
  .app.locked .view { min-height: 100dvh; align-items: flex-start; }
  .door-stage { padding: 18px 12px 26px; }
  .door-card { padding: 20px 18px 14px; border-radius: 16px; }
  .door-in input { font-size: 16px; }
  .door-go { height: 52px; }
  .data-row-actions .btn.xs { padding: 5px 8px; }
}

/* Thumb-sized targets where there is no mouse to aim with. */
@media (hover: none) and (pointer: coarse) {
  .btn.sm { padding: 8px 12px; }
  .nav a, .nav-head { min-height: 40px; }
  .form-item, .check-item { padding: 11px 12px; }
  .check-item .ico { width: 18px; height: 18px; }
  .field > label { font-size: 11.5px; }
  input, select, textarea { font-size: 15px; }
  .fgroup input, .fgroup select, .fgroup textarea { font-size: 14px; }
  table.grid th, table.grid td { padding-top: 8px; padding-bottom: 8px; }
}

/* Landscape phone or a short window: the preview and the tables share what little height there is. */
@media (max-height: 560px) {
  .topbar-title p { display: none; }
  .table-wrap { max-height: 44vh; }
  .split > .split-right .stage { max-height: 40vh; }
  .modal-root { padding: 10px 8px; }
}

/* ---------------- users & admin ---------------- */
.access-tree { display: grid; gap: 10px; max-height: 60vh; overflow: auto; }
.access-group { border: 1px solid var(--line-soft); border-radius: 10px; padding: 8px 10px; }
.access-items { display: grid; gap: 2px 14px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); padding: 4px 0 2px 26px; }
.access-row { display: flex; align-items: center; gap: 8px; padding: 4px 2px; cursor: pointer; font-size: 13px; }
.access-row input { width: auto; margin: 0; }
.access-row .ico { width: 15px; height: 15px; margin-right: 6px; vertical-align: -3px; color: var(--accent); }
.access-row.head { font-weight: 600; }
.access-row.fixed { padding: 6px 12px; color: var(--muted); cursor: default; }
.access-row.fixed .note { margin-left: auto; }

/* ---------------- dark mode ----------------
   Screen only: whatever goes to paper stays black on white. */
@media screen {
  [data-theme="dark"] {
    color-scheme: dark;
    --bg: #0f1522;
    --panel: #171f2e;
    --ink: #e4e9f2;
    --muted: #93a0b5;
    --line: #2a3446;
    --line-soft: #222b3b;
    --accent: #5b8cff;
    --accent-soft: #1d2a47;
    --good-soft: #13301f;
    --warn-soft: #3a2810;
    --bad-soft: #3a1717;
    --info: #a7b4c8;
    --info-soft: #1f2838;
    --slate: #c3cdde;
    --purple-soft: #2a1f42;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 22px rgba(0, 0, 0, .25);
  }
  [data-theme="dark"] .sidebar,
  [data-theme="dark"] .nav a,
  [data-theme="dark"] .nav-head { color: #c3cdde; }
  [data-theme="dark"] .nav a:hover,
  [data-theme="dark"] .nav-head:hover,
  [data-theme="dark"] .ghost-btn:hover,
  [data-theme="dark"] .tabs a:hover,
  [data-theme="dark"] .tab-btn:hover,
  [data-theme="dark"] .bell-row:hover,
  [data-theme="dark"] .form-item:hover,
  [data-theme="dark"] .check-item:hover,
  [data-theme="dark"] .btn:hover { background: #232d40; color: var(--ink); }
  [data-theme="dark"] .nav a .pill,
  [data-theme="dark"] .tab-btn .tab-n { background: #26314a; color: #b6c2d6; }
  [data-theme="dark"] .ghost-btn { background: #1c2536; }
  [data-theme="dark"] .ghost-btn.danger { background: #2a1719; border-color: #5a2a2a; }
  [data-theme="dark"] input,
  [data-theme="dark"] select,
  [data-theme="dark"] textarea,
  [data-theme="dark"] .cellin:focus,
  [data-theme="dark"] .ta-list,
  [data-theme="dark"] .bell-panel,
  [data-theme="dark"] .door-card,
  [data-theme="dark"] .door-in input:focus,
  [data-theme="dark"] .form-item,
  [data-theme="dark"] .form-item.active .fi-tab,
  [data-theme="dark"] .check-item,
  [data-theme="dark"] .img-tile { background: var(--panel); color: var(--ink); }
  [data-theme="dark"] .btn { background: #1c2536; color: #d5dceb; border-color: var(--line); }
  [data-theme="dark"] .btn.primary { background: var(--bar); border-color: var(--bar); color: #fff; }
  [data-theme="dark"] .btn.danger { background: #2a1719; border-color: #5a2a2a; color: #ff8a8a; }
  [data-theme="dark"] table.grid th,
  [data-theme="dark"] table.grid tfoot td { background: #1c2536; color: var(--muted); }
  [data-theme="dark"] table.grid tbody tr:nth-child(even) { background: #1a2232; }
  [data-theme="dark"] table.grid tbody tr:hover { background: #22304a; }
  [data-theme="dark"] tr.tot-row td,
  [data-theme="dark"] .pc-book tr.brought td,
  [data-theme="dark"] .pc-book tr.carry td { background: #1f2a3e; }
  [data-theme="dark"] table.grid tr.flag td { background: #33191c; }
  [data-theme="dark"] .mini,
  [data-theme="dark"] .stat-list .li,
  [data-theme="dark"] .fgroup,
  [data-theme="dark"] .install-steps .li,
  [data-theme="dark"] .bell-foot,
  [data-theme="dark"] .meta-strip,
  [data-theme="dark"] .card-item,
  [data-theme="dark"] .card-stage,
  [data-theme="dark"] .logo-preview,
  [data-theme="dark"] .img-tile .thumb,
  [data-theme="dark"] .door-in input,
  [data-theme="dark"] .secret,
  [data-theme="dark"] .stage,
  [data-theme="dark"] .pg-track { background: #1b2333; }
  [data-theme="dark"] .hint-box { background: #18223a; border-color: #34507e; color: #a9c1e8; }
  [data-theme="dark"] .secret.on { background: #3a2f10; border-color: #6b5a20; color: #f1d78a; }
  [data-theme="dark"] .chip { color: #9dbcff; border-color: #2f4470; }
  [data-theme="dark"] .chip.good,
  [data-theme="dark"] .st.paid,
  [data-theme="dark"] .st.banked { color: #6fdc96; border-color: #23573a; }
  [data-theme="dark"] .chip.warn,
  [data-theme="dark"] .st.pending,
  [data-theme="dark"] .st.partial { color: #f3b46a; border-color: #5e4220; }
  [data-theme="dark"] .chip.bad,
  [data-theme="dark"] .st.returned,
  [data-theme="dark"] .st.open { color: #ff8a8a; border-color: #5a2a2a; }
  [data-theme="dark"] .st.deposited { color: #9dbcff; border-color: #2f4470; }
  [data-theme="dark"] .st.cash,
  [data-theme="dark"] .st.unpaid,
  [data-theme="dark"] .st.flagged { background: #1f2838; color: #a7b4c8; border-color: #2f3a4e; }
  [data-theme="dark"] .chip.teal { background: #10302f; color: #6fd6d1; border-color: #1f5452; }
  [data-theme="dark"] .modal-root { background: rgba(0, 0, 0, .6); }
  [data-theme="dark"] .sheet { color: #111; }
}