/* Дашборд FOPbot: мобільний спершу, світла й темна теми; у Telegram — кольори з themeParams (--tg-*). */
:root {
  color-scheme: light dark;
  --bg: #f4f5f7;
  --card: #ffffff;
  --fg: #16181d;
  --muted: #6b7280;
  --accent: #2a7de1;
  --accent-fg: #ffffff;
  --line: #e3e6ea;
  --soon: #e8890c;
  --overdue: #d93a3a;
  --done: #2e9b57;
  --before: #b8c4d3;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101317;
    --card: #1a1e24;
    --fg: #eef0f3;
    --muted: #98a1ad;
    --accent: #5aa2f0;
    --accent-fg: #0b1220;
    --line: #2a3038;
    --before: #46505d;
  }
}
:root.tg-themed {
  --bg: var(--tg-secondary-bg-color, var(--tg-bg-color));
  --card: var(--tg-section-bg-color, var(--tg-bg-color));
  --fg: var(--tg-text-color);
  --muted: var(--tg-hint-color);
  --accent: var(--tg-button-color, var(--tg-link-color));
  --accent-fg: var(--tg-button-text-color);
}
/* Лінії й шкала — за темою Telegram (клас ставить dashboard.js за яскравістю bg_color), а не за темою пристрою. */
:root.tg-themed.tg-light { color-scheme: light; --line: #e3e6ea; --before: #b8c4d3; }
:root.tg-themed.tg-dark { color-scheme: dark; --line: #2a3038; --before: #46505d; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  /* viewport-fit=cover: вирізи й home indicator; env() = 0, де їх немає, а без підтримки env() лишається padding: 0. */
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
button { font: inherit; }
main { max-width: 640px; margin: 0 auto; padding: 12px 16px 32px; }
h1 { font-size: 20px; margin: 4px 0 6px; }
h1 .date { font-size: 14px; font-weight: 400; color: var(--muted); white-space: nowrap; }
h2 { font-size: 16px; margin: 0 0 10px; }
p { margin: 0 0 6px; }
.muted { color: var(--muted); font-size: 13px; }
/* Шапка — сітка: 🔄 у першому рядку поруч із h1, статус і ворота — під обома, тож кнопка не накриває їх за жодного розміру шрифту. */
.top { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 4px; align-items: start; margin-bottom: 12px; }
.top > * { grid-column: 1 / -1; }
.top > h1 { grid-column: 1; }
.status { font-size: 14px; }
.gate { background: var(--card); border-radius: 12px; padding: 10px 12px; margin-top: 8px; }
/* P2: «оновлюю…» while the screen's refresh runs, what failed in it; the warning of an old session with «Відкрити знову». */
.updating { color: var(--muted); font-size: 13px; margin-top: 4px; }
.refresh-failed { background: var(--card); border-radius: 12px; padding: 10px 12px; margin-top: 8px; }
.stale { background: var(--card); border-radius: 12px; padding: 10px 12px; margin-top: 8px; }
.stale .btn { margin-top: 6px; }
.refresh { grid-column: 2; grid-row: 1; margin-top: 4px; width: 2.25em; height: 2.25em; padding: 0; line-height: 1; border: 0; border-radius: 50%; background: var(--card); color: var(--fg); font-size: 18px; cursor: pointer; }
.card { background: var(--card); border-radius: 14px; padding: 14px 14px 10px; margin: 0 0 12px; }
ul, ol { list-style: none; margin: 0; padding: 0; }
.actions li { padding: 0 0 10px; }
.actions li + li { border-top: 1px solid var(--line); padding-top: 10px; }
.actions li.urgent p::before { content: "• "; color: var(--soon); font-weight: 700; }
.btn { display: inline-block; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--accent); color: var(--accent); text-decoration: none; font-weight: 600; font-size: 14px; background: transparent; cursor: pointer; }
.btn.primary { background: var(--accent); color: var(--accent-fg); }
.calm { font-weight: 600; }
.paynow { font-size: 15px; margin-bottom: 8px; }
.paylines { margin: -4px 0 8px; padding-left: 18px; color: var(--muted); font-size: 13px; }
/* Сума не стискає назву до стовпчика з уламків слів: коли поруч із нею лишилося б менше 8em, сума переходить рядком нижче, праворуч. */
.ob { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); }
.ob:first-child { border-top: 0; }
.ob .icon { flex: none; min-width: 1.35em; }
.ob-body { flex: 1 1 8em; min-width: 0; }
.ob-title { overflow-wrap: anywhere; }
.ob .amount { margin-left: auto; font-weight: 700; white-space: nowrap; }
.ob.overdue .amount { color: var(--overdue); }
.ob.done { opacity: 0.75; }
.did li { padding: 3px 0 3px 16px; position: relative; }
.did li::before { content: "•"; position: absolute; left: 2px; color: var(--muted); }
.did li.next { color: var(--muted); }
.chart { width: 100%; height: auto; display: block; margin: 4px 0 10px; }
.chart .axis { stroke: var(--line); stroke-width: 1; }
.chart .bar { fill: var(--accent); opacity: 0.75; }
.chart .bar.current { opacity: 1; }
.chart .bar.before { fill: var(--before); }
/* Підписи місяців — в одиницях viewBox (360), тож масштабуються з карткою: 13 дає ≈ 9–13 px на телефонах, на ширших — як було. */
.chart .label { fill: var(--muted); font-size: 13px; }
@media (min-width: 480px) { .chart .label { font-size: 10px; } }
.limit-line { font-size: 14px; }
/* Заокруглення — рамкою svg, а не rx: preserveAspectRatio="none" розтягнув би rx в овал, а малий відсоток — у «лінзу». */
.meter { width: 100%; height: 8px; display: block; margin: 2px 0 8px; border-radius: 4px; overflow: hidden; }
.meter .meter-bg { fill: var(--line); }
.meter .meter-fill { fill: var(--done); }
.meter.over .meter-fill { fill: var(--overdue); }
.warn { color: var(--overdue); font-weight: 600; }
/* Одна колонка дат на всю картку: її ширина — найширша дата (і «09.02.2027» з іншого року), назви починаються з одного x.
   min-width 62px — колишні 52px + 10px проміжку, тож у списку дат лише цього року все стоїть, як було. */
.deadlines { display: grid; grid-template-columns: max-content minmax(0, 1fr); }
.deadlines li { display: contents; }
.deadlines li > span { padding: 5px 0; border-top: 1px solid var(--line); }
.deadlines li:first-child > span { border-top: 0; }
.deadlines .date { min-width: 62px; padding-right: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
.deadlines .dl-title { min-width: 0; overflow-wrap: anywhere; }
.doc { padding: 6px 0; border-top: 1px solid var(--line); }
.doc:first-child { border-top: 0; }
.doc-title { font-weight: 600; }
footer { padding: 4px 2px; }
.notes li { font-size: 13px; padding: 2px 0; }
.fresh { font-style: italic; color: var(--muted); font-size: 13px; }
.message { text-align: center; padding: 48px 8px; }
.message .btn { margin-top: 12px; }
/* Вкладки — лише коли сервер увімкнув бодай одну область дашборда (поле areas); без них сторінка, як була. */
.tabs { display: flex; gap: 4px; margin: 0 0 12px; padding: 4px; border-radius: 12px; background: var(--card); }
.tab { flex: 1 1 0; min-width: 0; padding: 8px 4px; border: 0; border-radius: 9px; background: transparent; color: var(--fg); font-size: 14px; cursor: pointer; }
.tab.active { background: var(--accent); color: var(--accent-fg); font-weight: 600; }
.in-bot .btn { margin-top: 6px; }
/* B6: «Налаштування: N з M» під пунктами першого дня; B1: рядок порожнього «Огляду». */
.setup { margin-top: 6px; }
.empty-note { background: var(--card); border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; }
/* Форми (forms.js): поле, помилка поля текстом сервера. */
.field { margin: 0 0 10px; }
.field label { display: block; margin-bottom: 4px; color: var(--muted); font-size: 13px; }
.field input { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); font: inherit; }
.field-error { margin: 4px 0 0; color: var(--overdue); font-size: 13px; }
.field-error:empty { display: none; }
/* P7: «Як сплатити» (screens/pay.js) — the line of a tax, its rails, the requisites with «Копіювати». */
.pay-item { padding: 10px 0; }
.pay-item + .pay-item { border-top: 1px solid var(--line); }
.pay-head { font-weight: 600; }
.rail { margin: 8px 0; }
.rail .btn { margin: 4px 6px 4px 0; }
.requisites { list-style: none; padding: 0; margin: 4px 0; }
.req-field { padding: 4px 0; overflow-wrap: anywhere; }
.req-label { color: var(--muted); }
.copy-value { user-select: all; overflow-wrap: anywhere; }
.btn.small { padding: 4px 10px; font-size: 13px; margin-left: 6px; }
.claim .btn { margin: 4px 6px 4px 0; }
.claim .date { margin: 4px 0; }
/* P5: «Після кварталу в резерві…» under the sums; the block «Резерв» with a field per tax. */
.reserve-after { font-size: 14px; }
.reserve-items { list-style: none; padding: 0; margin: 6px 0; }
.reserve-item { padding: 4px 0; }
.reserve-item p { margin: 0; }
.reserve-item input { width: 8.5em; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); font: inherit; }
.reserve .btn { margin: 4px 6px 4px 0; }
/* P11b: the card's exceptions, first — the urgent ones with the colour of an overdue line. */
.alerts { margin: 0 0 8px; }
.alert { padding: 8px 10px; margin: 0 0 8px; border: 1px solid var(--line); border-radius: 10px; }
.alert.urgent { border-color: var(--overdue); }
.alert p { margin: 0 0 6px; }
.alert .btn { margin: 4px 6px 0 0; }
.reserve .btn[aria-pressed="true"] { outline: 2px solid var(--accent); }
/* P10: «Як платити податки у …?» — the options are buttons with their whole line; all alike, the chosen one outlined. */
.regime-options { list-style: none; padding: 0; margin: 6px 0; }
.regime-option { padding: 0 0 8px; }
.regime .regime-option .btn { display: block; width: 100%; text-align: left; white-space: normal; margin: 0; }
.regime-esv .btn { margin: 4px 6px 4px 0; white-space: normal; text-align: left; }
.regime .btn[aria-pressed="true"] { outline: 2px solid var(--accent); }
/* P12.1: «Операції» (screens/ops.js) — the rows of the queue, «ПДВ у сумі», the table of months, the form; «Ще». */
.op { padding: 10px 12px; margin: 0 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.op p { margin: 0 0 4px; overflow-wrap: anywhere; }
.op.done, .op.skipped, .op.stale { opacity: 0.75; }
.op .btn, .card .actions .btn, .next-year .btn { margin: 4px 6px 4px 0; }
.op .vat select, .field select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); font: inherit; }
.question { font-weight: 600; }
.verdict { margin-top: 6px; }
.notice { margin: 0 0 8px; }
.income { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin: 6px 0 8px; }
.income th, .income td { padding: 3px 4px; text-align: left; }
.income .num { text-align: right; white-space: nowrap; }
.income tr.quarter td { font-weight: 600; border-bottom: 1px solid var(--line); }
.actions.column .btn { display: block; width: 100%; margin: 0 0 8px; text-align: left; }
.chart.link { cursor: pointer; }
/* P12.4: «?» біля назви щільного екрана (screens/help.js explainButton) — у тій самій сітці, що й 🔄: кнопка праворуч від
   назви, блок під нею; «Допомога», «Часті запитання», «🩺 Стан сервера». */
.titled { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 4px; align-items: start; }
.titled > * { grid-column: 1 / -1; }
.top > h2, .titled > h1, .titled > h2 { grid-column: 1; }
.explain { display: contents; }
.explain-btn { grid-column: 2; grid-row: 1; margin-top: 2px; width: 2em; height: 2em; padding: 0; line-height: 1; border: 1px solid var(--accent); border-radius: 50%; background: transparent; color: var(--accent); font-weight: 700; cursor: pointer; }
.explain-btn[aria-expanded="true"] { background: var(--accent); color: var(--accent-fg); }
.explain-block { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 4px 0 8px; }
.explain-part + .explain-part { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }
.explain-part h3 { font-size: 15px; margin: 0 0 4px; }
.note { color: var(--muted); font-size: 13px; }
details.faq, details.commands { border-top: 1px solid var(--line); padding: 8px 0; }
details.faq summary, details.commands summary { cursor: pointer; font-weight: 600; }
details.faq[open] summary, details.commands[open] summary { margin-bottom: 6px; }
/* A6: «🔎 Перевірка кабінету» і «Заяви в ДПС» (screens/audit.js) — «Від вас», знахідки <details>, питання, поля заяв з 📋. */
.audit .todo { padding: 8px 0; }
.audit .todo + .todo { border-top: 1px solid var(--line); }
.audit .todo p, .audit .ask p { margin: 0 0 6px; }
.audit .ask .btn { margin: 4px 6px 4px 0; white-space: normal; text-align: left; }
.audit .months .btn { min-width: 5.5em; }
details.finding { border-top: 1px solid var(--line); padding: 8px 0; }
details.finding > summary { cursor: pointer; font-weight: 600; }
details.finding[open] > summary { margin-bottom: 6px; }
details.why summary { cursor: pointer; color: var(--muted); }
.draft { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin: 4px 0 10px; }
.draft h3 { font-size: 15px; margin: 4px 0 6px; }
.field-row { margin: 0 0 6px; overflow-wrap: anywhere; }
.btn.copy { padding: 2px 8px; margin-left: 6px; }
.letter { white-space: pre-wrap; }

/* P12.7 W: the browser's bar above the dashboard («Вийти») and the login card. */
.webbar {
  display: flex;
  justify-content: flex-end;
  padding: 8px 16px 0;
}
.login .note {
  font-weight: 600;
}