/* К10 Ф2: мобильный экран, тема — переменные Telegram WebApp (7.2).
   Цветовая семантика строго по контракту: зелёный вход / красный выход
   и разрыв / серый неопределённое. */
:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --fg: var(--tg-theme-text-color, #111111);
  --hint: var(--tg-theme-hint-color, #888888);
  --link: var(--tg-theme-link-color, #2678b6);
  --btn: var(--tg-theme-button-color, #2678b6);
  --btn-fg: var(--tg-theme-button-text-color, #ffffff);
  --card: var(--tg-theme-secondary-bg-color, #f2f2f2);
  --in: #2e9e4f;   /* вход */
  --out: #d63b3b;  /* выход, разрыв */
  --undef: #9a9a9a;/* неопределённое */
}
@media (prefers-color-scheme: dark) {
  :root { --bg: var(--tg-theme-bg-color, #1c1c1e); --fg: var(--tg-theme-text-color, #eee);
          --card: var(--tg-theme-secondary-bg-color, #2a2a2d); }
}
* { box-sizing: border-box; margin: 0; }
body { background: var(--bg); color: var(--fg);
  font: 15px/1.45 -apple-system, system-ui, Roboto, sans-serif; padding-bottom: 24px; }

header { display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px 6px; }
.title { font-size: 17px; font-weight: 700; }
#badges .badge { font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 6px;
  margin-left: 6px; vertical-align: 2px; background: var(--card); color: var(--hint); }
#refresh { border: 0; border-radius: 8px; padding: 6px 10px;
  background: var(--btn); color: var(--btn-fg); font-size: 13px; }

.banner { margin: 4px 12px; padding: 8px 10px; border-radius: 8px;
  background: var(--card); color: var(--hint); font-size: 13px; }

nav { display: flex; gap: 6px; padding: 6px 12px; position: sticky; top: 0;
  background: var(--bg); z-index: 5; }
nav .tab { flex: 1; border: 0; border-radius: 10px; padding: 8px 0;
  background: var(--card); color: var(--fg); font-size: 14px; }
nav .tab.active { background: var(--btn); color: var(--btn-fg); font-weight: 600; }

main { padding: 6px 12px; }
.hidden { display: none !important; }
.hint, .empty { color: var(--hint); font-size: 13px; padding: 8px 2px; }

/* календарь */
.horizon { display: flex; align-items: center; gap: 6px; padding: 4px 0 8px; }
.hz { border: 0; border-radius: 8px; padding: 5px 12px; background: var(--card);
  color: var(--fg); }
.hz.active { background: var(--btn); color: var(--btn-fg); }
.hz-label { color: var(--hint); font-size: 13px; }
.day { background: var(--card); border-radius: 10px; margin-bottom: 6px; padding: 8px 10px; }
.day.gap { box-shadow: inset 3px 0 0 var(--out); }
.day-head { display: flex; justify-content: space-between; align-items: baseline; }
.day-date { font-weight: 700; }
.day-run { font-size: 13px; }
.day-flows { display: flex; gap: 12px; font-size: 13px; margin-top: 2px; flex-wrap: wrap; }
.v-in { color: var(--in); } .v-out { color: var(--out); } .v-undef { color: var(--undef); }
.gap-mark { color: var(--out); font-weight: 700; font-size: 12px; }
.day-obls { margin-top: 6px; border-top: 1px solid var(--bg); padding-top: 6px; }

.block { margin-top: 14px; }
.block h3 { font-size: 14px; margin-bottom: 6px; }

/* строки-записи */
.row { background: var(--card); border-radius: 10px; padding: 8px 10px;
  margin-bottom: 6px; }
.row .r1 { display: flex; justify-content: space-between; gap: 8px; }
.row .who { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.row .sum { white-space: nowrap; font-weight: 600; }
.row .r2 { display: flex; justify-content: space-between; gap: 8px;
  color: var(--hint); font-size: 12.5px; margin-top: 1px; }
.row .tag { font-size: 11px; padding: 1px 5px; border-radius: 5px;
  background: var(--bg); color: var(--hint); margin-left: 4px; }
.row .tag.over { color: var(--out); font-weight: 600; }

/* фильтры */
.filters { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 8px; }
.filters select { border: 0; border-radius: 8px; padding: 6px 8px;
  background: var(--card); color: var(--fg); font-size: 13px; max-width: 47%; }
.chk { font-size: 13px; color: var(--hint); display: flex; align-items: center; gap: 4px; }

/* водопад */
.wf-q { background: var(--card); border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; }
.wf-num { color: var(--hint); margin-right: 6px; }
.wf-why { color: var(--hint); font-size: 12.5px; margin-top: 1px; }
.wf-fin { font-size: 12.5px; margin-top: 2px; }
.wf-total { font-weight: 700; padding: 10px 2px; }
.wf-part { color: var(--undef); font-weight: 600; }

/* карточка */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: flex; align-items: flex-end; z-index: 20; }
.card { background: var(--bg); width: 100%; max-height: 86vh; overflow-y: auto;
  border-radius: 14px 14px 0 0; padding: 14px; position: relative; }
#card-close { position: absolute; top: 8px; right: 10px; border: 0;
  background: var(--card); color: var(--fg); border-radius: 8px; padding: 4px 9px; }
.kv { display: grid; grid-template-columns: 38% 62%; gap: 3px 8px; font-size: 14px;
  margin-top: 8px; }
.kv .k { color: var(--hint); }
.journal { margin-top: 10px; background: var(--card); border-radius: 8px;
  padding: 8px 10px; font-size: 13px; white-space: pre-wrap; }