/* Cashbook admin - one stylesheet, mobile first (managers use phones), no inline styles (CSP).
   Colours are tokens; dark mode follows the phone unless data-theme says otherwise. */

:root {
  --bg: #f6f5f2;
  --surface: #ffffff;
  --text: #1d1d1b;
  --muted: #6b6a66;
  --line: #e2e0da;
  --accent: #1f5f8b;
  --accent-text: #ffffff;
  --ok: #1e7b45;
  --ok-bg: #e5f4ea;
  --bad: #b3261e;
  --bad-bg: #fbe7e5;
  --warn: #8a5a00;
  --warn-bg: #fdf1d6;
  --acc: #1f5f8b;
  --acc-bg: #e3eef7;
  --wait: #5e5d59;
  --wait-bg: #ecebe7;
  --info: #3d5a73;
  --info-bg: #e8eef3;
  --radius: 10px;
  --gutter: 16px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141413;
    --surface: #1f1f1d;
    --text: #ecebe6;
    --muted: #a3a29c;
    --line: #34332f;
    --accent: #6fa8d6;
    --accent-text: #0e1a24;
    --ok: #6cc98f;
    --ok-bg: #18301f;
    --bad: #f08a80;
    --bad-bg: #3a1c19;
    --warn: #e6b65c;
    --warn-bg: #3a2c10;
    --acc: #8cbbe0;
    --acc-bg: #1a2c3a;
    --wait: #b4b3ad;
    --wait-bg: #2a2a27;
    --info: #a9c1d6;
    --info-bg: #1e2a34;
  }
}

:root[data-theme="dark"] {
  --bg: #141413;
  --surface: #1f1f1d;
  --text: #ecebe6;
  --muted: #a3a29c;
  --line: #34332f;
  --accent: #6fa8d6;
  --accent-text: #0e1a24;
  --ok: #6cc98f;
  --ok-bg: #18301f;
  --bad: #f08a80;
  --bad-bg: #3a1c19;
  --warn: #e6b65c;
  --warn-bg: #3a2c10;
  --acc: #8cbbe0;
  --acc-bg: #1a2c3a;
  --wait: #b4b3ad;
  --wait-bg: #2a2a27;
  --info: #a9c1d6;
  --info-bg: #1e2a34;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
}

a { color: var(--accent); }

h1, h2, h3 { line-height: 1.2; margin: 0 0 8px; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 17px; }
h3 small { font-weight: 400; color: var(--muted); font-size: 13px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }

/* ---- header */
.top {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 2;
}
.top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px var(--gutter) 6px;
}
.brand { font-weight: 700; text-decoration: none; color: var(--text); font-size: 18px; }
.who { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; justify-content: flex-end; font-size: 14px; }
.who-role { color: var(--muted); }
.tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 0 var(--gutter) 8px;
  scrollbar-width: none;
}
.tabs a {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--text);
  background: var(--bg);
  font-size: 15px;
}
.tabs a.current { background: var(--accent); color: var(--accent-text); }

/* ---- page */
.page { padding: 12px var(--gutter) 48px; max-width: 760px; margin: 0 auto; }
.page-title { margin-top: 4px; }
.day-head { margin: 12px 0 8px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  margin: 0 0 12px;
}
.card > :last-child { margin-bottom: 0; }

/* ---- forms */
form.inline { display: inline; }
label { display: block; font-size: 14px; color: var(--muted); margin: 0 0 10px; }
label input, label select { margin-top: 4px; }
input, select, button {
  font: inherit;
  color: var(--text);
}
input:not([type="checkbox"]), select {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
button {
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
}
button.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; }
button.secondary { background: var(--bg); }
.link-button {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  text-decoration: underline;
  font-size: inherit;
}
.link-button.danger { color: var(--bad); }
.check { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 15px; }
.checks { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 0 0 10px; }
.checks legend { font-size: 14px; color: var(--muted); padding: 0 4px; }
.stack button { width: 100%; }

.picker { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin: 0 0 8px; }
.picker label { margin: 0; flex: 1 1 140px; }
.picker button { flex: 0 0 auto; }

.daynav { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; margin: 4px 0; }

.error { color: var(--bad); background: var(--bad-bg); border-radius: 8px; padding: 8px 10px; margin: 0 0 10px; }
.note { background: var(--warn-bg); color: var(--warn); border-radius: 8px; padding: 8px 10px; font-size: 14px; }

/* ---- the reconciliation lines of a shift */
.shift-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.recon { width: 100%; border-collapse: collapse; margin: 6px 0 10px; table-layout: fixed; }
.recon thead th { font-size: 12px; font-weight: 500; color: var(--muted); text-align: right; padding: 0 2px 4px; }
.recon thead th:first-child { width: 40%; text-align: left; }
.recon tbody th { text-align: left; font-weight: 400; padding: 8px 4px 8px 8px; vertical-align: top; }
.recon tbody td { padding: 8px 2px; vertical-align: top; font-size: 15px; }
.recon tbody tr { border-top: 1px solid var(--line); }
.recon tbody tr { border-left: 4px solid var(--line); }
.recon tbody tr.tone-ok { border-left-color: var(--ok); }
.recon tbody tr.tone-bad { border-left-color: var(--bad); }
.recon tbody tr.tone-warn { border-left-color: var(--warn); }
.recon tbody tr.tone-acc { border-left-color: var(--acc); }
.recon tbody tr.tone-wait, .recon tbody tr.tone-none { border-left-color: var(--line); }
.recon tr.tone-bad td.diff { color: var(--bad); font-weight: 700; }
.line-name { display: block; font-weight: 600; font-size: 15px; }
.line-hint { display: block; font-size: 12px; color: var(--muted); }

.pill, .badge {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  background: var(--wait-bg);
  color: var(--wait);
}
.pill.tone-ok { background: var(--ok-bg); color: var(--ok); }
.pill.tone-bad, .badge-bad { background: var(--bad-bg); color: var(--bad); }
.pill.tone-warn, .badge-warn { background: var(--warn-bg); color: var(--warn); }
.pill.tone-acc, .badge-acc { background: var(--acc-bg); color: var(--acc); }
/* a day with information flags only (staff discount by card, event checks) is neutral (review item 20) */
.badge-info { background: var(--info-bg); color: var(--info); }
.flag-jump { margin: 0 0 8px; }
.flag-jump a { text-decoration: none; font-size: 14px; }

.envelope, .tips {
  background: var(--bg);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 0 0 8px;
}
.env-row, .tips { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.env-row span, .tips span { font-size: 14px; }
.env-note { font-size: 12px; color: var(--muted); margin: -2px 0 4px; }
.tips b { font-size: 17px; }

.entry, .expense { border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 10px; }
.entry button { width: 100%; }
.expense { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.expense .error { flex: 1 1 100%; }
.expense .grow { flex: 1 1 100%; margin: 0; }
.field-hint { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.expense .amount { flex: 1 1 120px; margin: 0; }
.expense button { flex: 1 1 120px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }

/* ---- flags */
.flags { list-style: none; margin: 0; padding: 0; }
.flag { border-left: 4px solid var(--warn); background: var(--warn-bg); border-radius: 6px; padding: 6px 10px; margin: 0 0 6px; }
.flag.sev-red { border-left-color: var(--bad); background: var(--bad-bg); }
.flag.sev-info { border-left-color: var(--info); background: var(--info-bg); }
.flag-label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.flag-text { display: block; font-size: 14px; }

/* ---- movements */
.moves { list-style: none; margin: 10px 0 0; padding: 0; }
.move { border-top: 1px solid var(--line); padding: 8px 0; }
.move-main { display: flex; justify-content: space-between; gap: 8px; }
.move-words { font-weight: 600; overflow-wrap: anywhere; }
.move-amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.move-meta { font-size: 13px; color: var(--muted); }
.move-actions { display: flex; gap: 16px; font-size: 14px; margin-top: 4px; }
.move.voided .move-words, .move.voided .move-amount { text-decoration: line-through; color: var(--muted); }

/* ---- key/value lists (safe, summary) */
.kv { margin: 0; }
.kv > div { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px solid var(--line); }
.kv > div:first-child { border-top: 0; }
.kv dt { color: var(--muted); font-size: 14px; }
.kv dd { margin: 0; }
.kv .strong dd, .kv .strong dt { font-weight: 700; color: var(--text); }
.kv.compact > div { padding: 2px 0; }

.days, .events { list-style: none; margin: 0; padding: 0; }
.safe-day-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }

.changes { margin: 4px 0 0; padding-left: 18px; font-size: 13px; overflow-wrap: anywhere; }
.changes .field { color: var(--muted); }
.changes .before { text-decoration: line-through; color: var(--muted); }

.login .tg-widget { margin: 16px 0; min-height: 48px; }

/* ---- phones (review item 19): in a 40 % label column the three amounts got about 60 px each at
   360-393 px, and «−1 234,50» (about 72 px at 15 px) ran into its neighbour. Below 600 px the
   line's name takes its own row and the three amounts share the full width under it (about 90 px
   each at 360 px). The table keeps its roles in the markup (role="table" / "row" / "cell"). */
@media (max-width: 599.98px) {
  .recon, .recon thead, .recon tbody { display: block; width: 100%; }
  .recon tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 6px; }
  .recon thead tr { border-left: 4px solid transparent; }
  .recon thead th:first-child { display: none; }
  .recon thead th { padding: 0 2px 4px; }
  .recon tbody th { grid-column: 1 / -1; padding: 8px 8px 2px; }
  .recon tbody td { padding: 2px 2px 8px; }
}

@media (min-width: 600px) {
  .recon tbody td { font-size: 16px; }
  .entry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
  .entry .error, .entry button { grid-column: 1 / -1; }
  .expense .grow { flex: 2 1 260px; }
}