/* 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; }
/* owner, 29.10.2026: the RU/EN switch */
.lang-switch { font-size: 13px; color: var(--muted); white-space: nowrap; margin-left: auto; margin-right: 8px; }
.lang-switch b { color: var(--text); }
.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.tips thead th:first-child { width: 24%; }
.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; }
/* the plan (ADR-0160): a day, a week done shows its per cent green */
.recon.plan tr.tone-ok td.diff { color: var(--ok); font-weight: 700; }
.recon.plan thead th:first-child { width: 24%; }
.recon.plan tr.total th, .recon.plan tr.total td { font-weight: 700; }
.line-name { display: block; font-weight: 600; font-size: 15px; }
.line-hint { display: block; font-size: 12px; color: var(--muted); }
/* «День как в кассовом отчёте» (owner, 23.10.2026): a word in place of an amount («Без сверки») */
.recon .cell-word { font-size: 13px; 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; }

/* ---- «Деньги сейчас» (LibOS, 08.11.2026): one company total, the venues, every account with its marks */
.money-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.money-head h2, .money-head h4 { margin: 0; }
.money-sum { font-size: 26px; }
.money-groups { margin-top: 8px; }
.money-group { margin: 0 0 10px; }
.money-group h4 { font-size: 16px; }
.money-venue { border-top: 1px solid var(--line); padding: 6px 0 4px; }
.money-venue .kv dt .small { display: block; font-size: 12px; }
.mlist { list-style: none; margin: 0 0 8px; padding: 0; }
.mlist li { border-top: 1px solid var(--line); border-left: 4px solid var(--line); padding: 6px 0 6px 8px; }
.mlist li.tone-ok { border-left-color: var(--ok); }
.mlist li.tone-warn { border-left-color: var(--warn); }
.mlist li.tone-bad { border-left-color: var(--bad); }
.mrow { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mname { font-weight: 600; }
.mmeta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 13px; color: var(--muted); }
.mmeta.num { justify-content: flex-end; }
/* a neutral note (a morning balance not due yet, a shift waiting for its till): said, never a colour of alarm */
.pill.tone-info { background: var(--info-bg); color: var(--info); }

/* ---- 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; }
}

/* ---- the LibOS cabinet (09.11.2026, owner: «отдельный кабинет», libos.libertylisbon.com): its own colour,
   so nobody takes it for the kassa; the light value first, the dark ones after it (they are more specific) */
body.libos { --accent: #1e6b52; --accent-text: #ffffff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.libos { --accent: #6fcfa3; --accent-text: #0d1f17; }
}
:root[data-theme="dark"] body.libos { --accent: #6fcfa3; --accent-text: #0d1f17; }
body.libos .top { border-top: 4px solid var(--accent); }
body.libos .brand { color: var(--accent); }
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { padding: 8px 0; border-top: 1px solid var(--line); }
ul.plain li:first-child { border-top: 0; }