/* Цвета берём из темы Telegram (переменные --tg-theme-* ставит скрипт Telegram).
   После запятой — цвет на случай, если страницу открыли не из Telegram. */
:root {
  --bg: var(--tg-theme-secondary-bg-color, #f1f1f4);
  --card: var(--tg-theme-bg-color, #ffffff);
  --text: var(--tg-theme-text-color, #1f1f1f);
  --hint: var(--tg-theme-hint-color, #8a8a8a);
  --accent: var(--tg-theme-button-color, #2a78d6);
  --track: rgba(127, 127, 127, 0.18);  /* фон полосок */
  --critical: #d03b3b;                 /* перерасход (всегда вместе со значком ⚠️) */
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  /* место под вкладки внизу, чтобы они не закрывали последнюю карточку */
  padding-bottom: calc(100px + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)));
}

.screen {
  padding: 12px 16px;
}

.status {
  padding: 24px 16px;
}

h1 {
  font-size: 20px;
  margin: 0 0 8px;
}

.hint {
  color: var(--hint);
  font-size: 13px;
  margin: 0;
}

/* Карточка-раздел */
.card {
  background: var(--card);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.label {
  font-weight: 600;
  margin-bottom: 8px;
}

.big {
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.accounts {
  display: flex;
  gap: 16px;
  margin-top: 6px;
  color: var(--hint);
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.stats.two {
  grid-template-columns: repeat(2, 1fr);
}

.stats.two .big {
  font-size: 22px;
}

.plan-items {
  margin-top: 10px;
}

/* Метка «на этой неделе: …» у долга */
.tag {
  display: inline-block;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--track);
  margin-top: 4px;
}

.bar.good > div {
  background: #0ca30c;
}

/* Переключатель «Сегодня / Завтра» */
.segmented {
  display: flex;
  background: var(--track);
  border-radius: 10px;
  padding: 2px;
  margin-bottom: 8px;
}

.segmented button {
  flex: 1;
  border: 0;
  background: none;
  color: var(--text);
  font-size: 14px;
  padding: 6px 0;
  border-radius: 8px;
  cursor: pointer;
}

.segmented button.active {
  background: var(--card);
  font-weight: 600;
}

.day-title {
  margin-bottom: 4px;
}

.lesson-time {
  width: 92px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

/* Календарь дедлайнов */
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cal-head .label {
  margin: 0;
}

.cal-arrow {
  border: 0;
  background: var(--track);
  color: var(--text);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-top: 10px;
  text-align: center;
}

.cal-wd {
  color: var(--hint);
  font-size: 12px;
  padding: 4px 0;
}

.cal-cell {
  border: 0;
  background: none;
  color: var(--text);
  font-size: 14px;
  padding: 6px 0 4px;
  border-radius: 8px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}

.cal-cell.today {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.cal-cell.selected {
  background: var(--track);
}

/* Точка под днём с дедлайном */
.cal-cell .mark {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin: 3px auto 0;
  background: transparent;
}

.cal-cell.has .mark {
  background: var(--accent);
}

.cal-cell.late .mark {
  background: var(--critical);
}

.cal-day {
  margin-top: 8px;
}

/* Задачи */
.group-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--hint);
  margin: 10px 0 2px;
}

.task {
  padding: 6px 0;
}

.task + .task {
  border-top: 1px solid var(--track);
}

.step {
  padding: 3px 0 0 16px;
  font-size: 14px;
}

/* Кружок «выполнено» у задачи */
.check-btn {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--hint);
  background: none;
  color: transparent;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.check-btn:active,
.check-btn.done {
  background: #0ca30c;
  border-color: #0ca30c;
  color: #ffffff;
}

.task-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.step-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0 0 16px;
  font-size: 14px;
}

.step-row .check-btn {
  width: 22px;
  height: 22px;
  font-size: 12px;
}

.late-text {
  color: var(--critical);
}

/* Привычки */
.cal-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Кнопки «сегодня»: нажал — галочка, ещё раз — снята */
.habit-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.habit-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--track);
  color: var(--text);
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}

.habit-btn .box {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--hint);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 14px;
  flex-shrink: 0;
}

.habit-btn.done .box {
  background: #0ca30c;
  box-shadow: none;
}

.habit-btn:disabled {
  opacity: 0.6;
}

/* Общий календарь привычек */
.hgrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-top: 10px;
  text-align: center;
}

.hday {
  border: 0;
  background: none;
  color: var(--text);
  font-size: 14px;
  padding: 10px 0;
  border-radius: 8px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}

/* День, когда были привычки: серый фон, зелёная заливка снизу ставится из app.js */
.hday.planned {
  background: var(--track);
}

/* Всё сделано — белое число на зелёном */
.hday.full {
  color: #ffffff;
  font-weight: 600;
}

.hday.today {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.hday.selected {
  outline: 2px solid var(--text);
  outline-offset: 1px;
}

.hday.future {
  opacity: 0.35;
}

.streak-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.streak-row + .streak-row {
  border-top: 1px solid var(--track);
}

/* Развитие */
.week-box {
  height: 180px;
}

.inline-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 13px;
}

.inline-legend .legend-row {
  padding: 0;
}

.idea-line {
  padding: 4px 0;
}

/* Кнопки минут под целью: поменьше обычных */
.minute-chips {
  margin-top: 8px;
}

.minute-chips .chip {
  padding: 6px 11px;
  font-size: 14px;
}

/* Идея, на которую можно нажать */
.idea-btn {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  color: var(--text);
  font-size: 15px;
  text-align: left;
  padding: 7px 0;
  cursor: pointer;
}

.idea-btn + .idea-btn {
  border-top: 1px solid var(--track);
}

/* Кнопки действий в форме (идея, книга) */
.action-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  border: 0;
  border-radius: 12px;
  background: var(--track);
  color: var(--text);
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}

.action-btn.danger {
  color: var(--critical);
}

.small-btn {
  margin-top: 8px;
  border: 0;
  border-radius: 10px;
  background: var(--track);
  color: var(--accent);
  font-size: 14px;
  padding: 7px 12px;
  cursor: pointer;
}

/* Диаграмма */
.chart-box {
  position: relative;
  height: 220px;
}

.legend {
  margin-top: 10px;
}

.legend-row,
.op-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.grow {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

/* Категории с полосками */
.cat {
  padding: 8px 0;
}

.cat + .cat {
  border-top: 1px solid var(--track);
}

.cat-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.bar {
  height: 6px;
  border-radius: 3px;
  background: var(--track);
  margin: 6px 0 4px;
  overflow: hidden;
}

.bar > div {
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
}

.bar.over > div {
  background: var(--critical);
}

/* Последние операции */
.op-row + .op-row {
  border-top: 1px solid var(--track);
}

.op-date {
  color: var(--hint);
  font-size: 13px;
  width: 40px;
  flex-shrink: 0;
}

.income {
  color: #0ca30c;
}

/* Вкладки внизу */
.tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: var(--card);
  border-top: 1px solid var(--track);
  /* Поднимаем вкладки над полоской «домой» на iPhone: берём больший из отступов,
     которые сообщают телефон и Telegram, и добавляем ещё 12px. */
  padding-bottom: calc(12px + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)));
}

.tabs button {
  flex: 1;
  border: 0;
  background: none;
  color: var(--hint);
  font-size: 18px;
  padding: 8px 0 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
}

.tabs button span {
  font-size: 11px;
}

.tabs button.active {
  color: var(--accent);
}

/* ---------- Ввод: кнопка «+» и выдвижная форма ---------- */

/* Круглая кнопка над вкладками справа */
.fab {
  position: fixed;
  right: 16px;
  bottom: calc(88px + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)));
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0;
  background: var(--accent);
  color: var(--tg-theme-button-text-color, #ffffff);
  font-size: 30px;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  z-index: 5;
}

/* Затемнение под формой */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 20;
}

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--card);
  border-radius: 16px 16px 0 0;
  padding: 14px 16px calc(16px + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)));
  z-index: 21;
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.sheet-head .label {
  margin: 0;
  font-size: 17px;
}

.field {
  margin-top: 12px;
}

.field > .hint {
  margin-bottom: 6px;
}

.field input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--track);
  background: var(--bg);
  color: var(--text);
  font-size: 16px; /* 16px — чтобы iPhone не увеличивал страницу при вводе */
  font-family: inherit;
}

.field input.amount {
  font-size: 24px;
  font-weight: 600;
}

/* Выбор кнопками: категория, счёт */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  border: 0;
  border-radius: 18px;
  padding: 9px 14px;
  background: var(--track);
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
}

.chip.active {
  background: var(--accent);
  color: var(--tg-theme-button-text-color, #ffffff);
}

.save-btn {
  width: 100%;
  margin-top: 16px;
  padding: 13px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: var(--tg-theme-button-text-color, #ffffff);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.save-btn:disabled {
  opacity: 0.6;
}

/* Маленькая кнопка рядом с полем: «весь остаток» */
.link-btn {
  border: 0;
  background: none;
  color: var(--accent);
  font-size: 14px;
  padding: 6px 0 0;
  cursor: pointer;
}

.head-btn {
  padding: 0;
  font-size: 15px;
}

/* Строка привычки в форме «Изменить»: название и кнопка удаления */
.edit-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

.edit-row + .edit-row {
  border-top: 1px solid var(--track);
}

.delete-btn {
  border: 0;
  border-radius: 10px;
  background: var(--track);
  color: var(--critical);
  font-size: 14px;
  padding: 7px 12px;
  cursor: pointer;
}

.form-section {
  margin-top: 18px;
  font-weight: 600;
}

.form-error {
  color: var(--critical);
  font-size: 14px;
  margin-top: 10px;
  min-height: 18px;
}

/* ---------- Переходы между экранами ---------- */

/* Карточка-кнопка: «Долги» в «Финансах» */
.link-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.link-card .label,
.link-card .hint {
  display: block;
}

.link-card .label {
  margin-bottom: 2px;
}

/* Стрелка «›» справа от кнопки */
.chevron {
  color: var(--hint);
  font-size: 22px;
  line-height: 1;
}

/* «‹ Финансы» вверху экрана «Долги» */
.back-link {
  border: 0;
  background: none;
  color: var(--accent);
  font-size: 15px;
  padding: 0 0 10px;
  cursor: pointer;
}

/* ---------- Настройки ---------- */

/* Строка настройки: название, значение, стрелка — нажать, откроется форма */
.setting-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  padding: 10px 0;
  cursor: pointer;
}

.setting-row + .setting-row {
  border-top: 1px solid var(--track);
}

.setting-value {
  color: var(--hint);
  white-space: nowrap;
}

/* Подсказка под строками настроек */
.setting-row + .hint,
#set-times + .hint,
#set-debts + .hint {
  margin-top: 4px;
}