/* Mini-app «Коммуналка».
 *
 * Цвет берётся у клиента Telegram: переменные --tg-theme-* он выставляет сам на
 * корне документа, в светлой и тёмной теме. Значения после запятой — фоллбэк
 * для случая, когда страницу открыли обычным браузером (отладка).
 *
 * Свои цвета только семантические: «в срок / пора / просрочено / заблокировано».
 * Они не берутся из темы намеренно — статус должен читаться одинаково у всех.
 * И каждый статус несёт слово и точку-маркер, а не только цвет: тёмная тема,
 * монохромный режим и дальтонизм не должны его скрывать.
 *
 * Шрифт — системный. Веб-шрифты сделали бы приложение чужим внутри клиента.
 */

:root {
  --bg:        var(--tg-theme-bg-color, #ffffff);
  --surface:   var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, #ffffff));
  --surface-2: var(--tg-theme-secondary-bg-color, #f2f4f7);
  --text:      var(--tg-theme-text-color, #14181c);
  --hint:      var(--tg-theme-hint-color, #77838f);
  --subtitle:  var(--tg-theme-subtitle-text-color, var(--tg-theme-hint-color, #77838f));
  --link:      var(--tg-theme-link-color, #1a7be0);
  --accent:    var(--tg-theme-button-color, #1a7be0);
  --on-accent: var(--tg-theme-button-text-color, #ffffff);
  --section-header: var(--tg-theme-section-header-text-color, var(--tg-theme-hint-color, #77838f));
  --destructive: var(--tg-theme-destructive-text-color, #d1453b);
  --separator: color-mix(in srgb, var(--hint) 26%, transparent);

  /* Семантика статусов — своя, одинаковая в обеих темах */
  --ok:        #1f8a4c;
  --ok-bg:     color-mix(in srgb, #1f8a4c 14%, transparent);
  --soon:      #b0790a;
  --soon-bg:   color-mix(in srgb, #b0790a 16%, transparent);
  --overdue:   #c8501f;
  --overdue-bg:color-mix(in srgb, #c8501f 15%, transparent);
  --blocked:   #c0392b;
  --blocked-bg:color-mix(in srgb, #c0392b 15%, transparent);
  --unknown:   var(--hint);
  --unknown-bg:var(--surface-2);

  --radius: 12px;
  --gap: 10px;
  --pad: 14px;
}

/* Тёмная тема.
 *
 * Переменные --tg-theme-* остаются ПЕРВЫМИ в var(): если клиент их прислал,
 * выигрывают они, и приложение совпадает с темой Telegram. Меняются только
 * запасные значения — на случай, когда клиент их не отдал или страницу открыли
 * обычным браузером. Без этого блока приложение вне Telegram всегда светлое.
 *
 * Заливки статусов при этом заметно светлее: на тёмном фоне 14% тонут. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:        var(--tg-theme-bg-color, #17212b);
    --surface:   var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, #1d2733));
    --surface-2: var(--tg-theme-secondary-bg-color, #131c26);
    --text:      var(--tg-theme-text-color, #f1f3f5);
    --hint:      var(--tg-theme-hint-color, #8b98a5);
    --subtitle:  var(--tg-theme-subtitle-text-color, var(--tg-theme-hint-color, #8b98a5));
    --link:      var(--tg-theme-link-color, #62b0f0);
    --accent:    var(--tg-theme-button-color, #4d9ee6);
    --on-accent: var(--tg-theme-button-text-color, #ffffff);
    --section-header: var(--tg-theme-section-header-text-color, var(--tg-theme-hint-color, #8b98a5));
    --destructive: var(--tg-theme-destructive-text-color, #ec6a5e);

    --ok: #52c07d; --ok-bg: color-mix(in srgb, #52c07d 20%, transparent);
    --soon: #e0ad4b; --soon-bg: color-mix(in srgb, #e0ad4b 20%, transparent);
    --overdue: #ef8b5e; --overdue-bg: color-mix(in srgb, #ef8b5e 20%, transparent);
    --blocked: #ef6f60; --blocked-bg: color-mix(in srgb, #ef6f60 20%, transparent);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--surface-2);
  color: var(--text);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif;
  padding: 0 0 max(24px, env(safe-area-inset-bottom));
  overflow-x: hidden;
}

main { padding: 12px 12px 0; display: grid; gap: var(--gap); max-width: 620px; margin: 0 auto; }

h1, h2, h3 { margin: 0; font-weight: 600; }
h1 { font-size: 1.28rem; letter-spacing: -0.01em; }
h2 { font-size: 1.02rem; }
h3 { font-size: .95rem; }
p { margin: 0; }

.num { font-variant-numeric: tabular-nums; }

/* ── Секции ────────────────────────────────────────────────── */
.section { background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.section-title {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--section-header); padding: 4px 6px 2px; font-weight: 600;
}

.rows > * { border-bottom: 1px solid var(--separator); }
.rows > *:last-child { border-bottom: 0; }

.row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px var(--pad); width: 100%; text-align: left;
  background: none; border: 0; color: inherit; font: inherit;
}
button.row, a.row { cursor: pointer; }
button.row:active, a.row:active { background: var(--surface-2); }
.row .grow { flex: 1; min-width: 0; }
.row .title { font-weight: 500; display: block; }
.row .sub { font-size: .82rem; color: var(--subtitle); display: block; }
.row .chev { color: var(--hint); flex: none; font-size: 1.1rem; opacity: .55; }

/* ── Сводка ────────────────────────────────────────────────── */
.hero {
  background: var(--surface); border-radius: var(--radius);
  padding: 16px var(--pad); display: grid; gap: 3px;
}
.hero .amount { font-size: 1.72rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.hero .when { font-size: .92rem; color: var(--subtitle); }
.hero .facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.hero.calm .amount { font-size: 1.2rem; }

/* ── Пилюли статусов ───────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .76rem; line-height: 1.35; padding: 3px 9px 3px 8px;
  border-radius: 999px; white-space: nowrap; font-weight: 500;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pill.ok       { color: var(--ok);       background: var(--ok-bg); }
.pill.soon     { color: var(--soon);     background: var(--soon-bg); }
.pill.overdue  { color: var(--overdue);  background: var(--overdue-bg); }
.pill.blocked  { color: var(--blocked);  background: var(--blocked-bg); }
.pill.unknown  { color: var(--unknown);  background: var(--unknown-bg); }

.pills { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── Карточка квартиры в списке ────────────────────────────── */
.flat { display: grid; gap: 9px; padding: 13px var(--pad); width: 100%;
        text-align: left; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.flat:active { background: var(--surface-2); }
.flat .head { display: flex; align-items: baseline; gap: 10px; }
.flat .addr { font-weight: 600; flex: 1; }
.flat .due { font-size: .86rem; color: var(--subtitle); white-space: nowrap; }
.flat .due.debt { color: var(--overdue); font-weight: 500; }

/* ── Поля ввода показаний ──────────────────────────────────── */
.field {
  display: grid; grid-template-columns: 1fr 116px; gap: 8px 12px;
  align-items: center; padding: 11px var(--pad);
}
.field .meta { min-width: 0; }
.field .meta b { display: block; font-size: .94rem; font-weight: 600; }
.field .meta span { font-size: .79rem; color: var(--subtitle); }
.field input {
  width: 100%; font: 600 17px/1.2 inherit; font-variant-numeric: tabular-nums;
  text-align: right; padding: 9px 10px; border-radius: 9px;
  border: 1.5px solid var(--separator); background: var(--surface-2); color: var(--text);
  -moz-appearance: textfield; appearance: textfield;
}
.field input::-webkit-outer-spin-button,
.field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
/* Пустое поле обязано выглядеть пустым: подсказка «288» того же цвета, что и
   текст, читалась как уже введённое значение — человек мог просто нажать
   «Передать», не заметив, что ничего не ввёл. */
.field input::placeholder { color: var(--hint); opacity: .45; font-weight: 400; }
.field.err input { border-color: var(--blocked); }
.field.warn input { border-color: var(--soon); }
.field .msg { grid-column: 1 / -1; font-size: .79rem; margin-top: -2px; }
.field .msg.err  { color: var(--blocked); }
.field .msg.warn { color: var(--soon); }
.field .msg.calc { color: var(--ok); }

/* ── Полоска очереди на главном экране ─────────────────────── */
.queue {
  display: block; width: 100%; text-align: left; border: 0; padding: 0;
  color: inherit; font: inherit; cursor: pointer;
}
.queue:active { background: var(--surface-2); }
.queue .row { width: 100%; }
.queue .mark { flex: none; width: 20px; text-align: center; font-size: .95rem; }

.pill.busy { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.pill.busy::before { display: none; }

/* Квартира, по которой напоминания не приходят именно этому человеку.
   Состояние её при этом видно всем и всегда — скрывается только рассылка. */
.muted-bell { font-size: .8em; opacity: .5; }

/* ── Ход передачи ──────────────────────────────────────────── */
.steps { padding: 6px var(--pad) 12px; }
.step { display: grid; grid-template-columns: 20px 1fr; gap: 10px; padding: 8px 0; align-items: start; }
.step .mark { font-size: .95rem; line-height: 1.5; }
.step b { display: block; font-size: .92rem; font-weight: 600; }
.step span { font-size: .8rem; color: var(--subtitle); }
.step.todo b, .step.todo span { color: var(--hint); }
.step.fail b { color: var(--blocked); }

.spin { display: inline-block; animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }

/* ── График расхода ────────────────────────────────────────── */
.chart { padding: 12px var(--pad) 6px; }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 76px; }
.bars .bar { flex: 1; min-width: 4px; background: var(--surface-2); border-radius: 3px 3px 0 0; position: relative; }
.bars .bar i { position: absolute; inset: auto 0 0 0; background: var(--accent); border-radius: 3px 3px 0 0; display: block; opacity: .85; }
.bars .bar.last i { opacity: 1; }
.axis { display: flex; justify-content: space-between; font-size: .68rem; color: var(--hint); margin-top: 5px; }

/* ── Кнопки ────────────────────────────────────────────────── */
.btn {
  display: block; width: 100%; text-align: center; padding: 13px;
  border-radius: 11px; border: 0; font: 600 15px/1.2 inherit; cursor: pointer;
  background: var(--accent); color: var(--on-accent);
}
.btn.ghost { background: var(--surface); color: var(--link); }
.btn.quiet { background: var(--surface-2); color: var(--text); }
.btn:active { opacity: .82; }
.btn:disabled { opacity: .45; cursor: default; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px var(--pad); }
.chip {
  min-width: 38px; padding: 7px 0; text-align: center; border-radius: 9px;
  background: var(--surface-2); color: var(--text); border: 1.5px solid transparent;
  font: 500 14px/1 inherit; cursor: pointer; font-variant-numeric: tabular-nums; flex: 1 0 38px;
}
.chip[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* ── Служебное ─────────────────────────────────────────────── */
.banner {
  padding: 10px 14px; font-size: .86rem; text-align: center;
  background: var(--blocked-bg); color: var(--blocked); font-weight: 500;
}
.banner.info { background: var(--soon-bg); color: var(--soon); }

.toast {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 20; max-width: 88vw;
  padding: 11px 16px; border-radius: 11px; font-size: .88rem;
  background: var(--text); color: var(--bg); box-shadow: 0 6px 24px rgba(0,0,0,.28);
}

.empty { padding: 26px var(--pad); text-align: center; color: var(--hint); font-size: .9rem; }

.note { font-size: .8rem; color: var(--hint); padding: 2px 6px 6px; }

.kv { display: flex; justify-content: space-between; gap: 12px; padding: 9px var(--pad); font-size: .9rem; }
.kv .k { color: var(--subtitle); }
.kv .v { font-variant-numeric: tabular-nums; font-weight: 500; text-align: right; }

.skeleton { display: grid; gap: var(--gap); }
.sk { height: 62px; border-radius: var(--radius); background: var(--surface); opacity: .6; }
.sk-lg { height: 96px; }

.tabs { display: flex; gap: 6px; padding: 4px; background: var(--surface-2); border-radius: 11px; }
.tabs button {
  flex: 1; padding: 8px; border: 0; border-radius: 8px; font: 500 14px/1 inherit;
  background: none; color: var(--subtitle); cursor: pointer;
}
.tabs button[aria-selected="true"] { background: var(--surface); color: var(--text); font-weight: 600; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }