/*
 * Subscription Tracker - дизайн-токены и слой поверх Bootstrap 5.
 *
 * Идея: интерфейс нейтральный и холодный, цвет в нём несут только
 * категории (они же - сектора круговой диаграммы). Главный типографический
 * акцент - суммы: рубли крупно, копейки мельче, цифры табличные.
 */

:root {
  --st-ground: #F4F6F9;
  --st-surface: #FFFFFF;
  --st-ink: #1C2433;
  --st-muted: #5E6A7B;
  --st-line: #DDE3EB;
  --st-line-strong: #C5CDD8;
  --st-accent: #3446C9;
  --st-accent-hover: #2A39A8;
  --st-accent-soft: #E8EBFA;
  --st-danger: #BE3B34;
  --st-success: #2F7D5B;

  --st-radius-panel: 14px;
  --st-radius-control: 8px;
  --st-sidebar-w: 248px;

  --st-font: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Bootstrap: переопределяем базовые переменные, а не каждый компонент */
  --bs-body-font-family: var(--st-font);
  --bs-body-color: var(--st-ink);
  --bs-body-bg: var(--st-ground);
  --bs-border-color: var(--st-line);
  --bs-secondary-color: var(--st-muted);
  --bs-primary: var(--st-accent);
  --bs-primary-rgb: 52, 70, 201;
  --bs-link-color: var(--st-accent);
  --bs-link-hover-color: var(--st-accent-hover);
  --bs-link-color-rgb: 52, 70, 201;
  --bs-border-radius: var(--st-radius-control);
  --bs-focus-ring-color: rgba(52, 70, 201, .28);
}

body {
  font-feature-settings: 'tnum' 1;
  font-size: 15px;
  line-height: 1.5;
}

h1, .h1 { font-size: 1.75rem; font-weight: 650; letter-spacing: -0.015em; }
h2, .h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
h3, .h3 { font-size: 1.05rem; font-weight: 600; }

a { text-underline-offset: 3px; }

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

/* ---------- Каркас: боковая навигация + контент ---------- */

.app {
  min-height: 100vh;
}

.sidebar {
  background: var(--st-surface);
  border-right: 1px solid var(--st-line);
  padding: 1.5rem 1rem;
}

@media (min-width: 992px) {
  .app { display: grid; grid-template-columns: var(--st-sidebar-w) 1fr; }
  .sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; }
}

.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 650;
  font-size: 1.05rem;
  color: var(--st-ink);
  text-decoration: none;
  padding: 0 .5rem;
}

/* Знак бренда - стопка «списаний» в цветах категорий */
.brand-mark {
  display: grid;
  grid-template-columns: repeat(3, 6px);
  gap: 3px;
  align-items: end;
}
.brand-mark span { width: 6px; border-radius: 2px; }
.brand-mark span:nth-child(1) { height: 10px; background: #EB6834; }
.brand-mark span:nth-child(2) { height: 16px; background: #2A78D6; }
.brand-mark span:nth-child(3) { height: 12px; background: #1BAF7A; }

.nav-app {
  list-style: none;
  padding: 0;
  margin: 1.75rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-app a {
  display: block;
  padding: .55rem .75rem;
  border-radius: var(--st-radius-control);
  color: var(--st-muted);
  text-decoration: none;
  font-weight: 500;
}
.nav-app a:hover { color: var(--st-ink); background: var(--st-ground); }
.nav-app a[aria-current="page"] { color: var(--st-accent); background: var(--st-accent-soft); }

.nav-group-title {
  margin: 1.25rem .75rem .35rem;
  font-size: .8rem;
  color: var(--st-muted);
}

.sidebar-footer {
  margin-top: auto;
  padding: 1rem .75rem 0;
  border-top: 1px solid var(--st-line);
  font-size: .9rem;
}

.topbar {
  background: var(--st-surface);
  border-bottom: 1px solid var(--st-line);
}

.content {
  padding: 1.5rem 1rem 3rem;
  max-width: 1120px;
  width: 100%;
}
@media (min-width: 768px) { .content { padding: 2.25rem 2.5rem 4rem; } }

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.page-head p { margin: .25rem 0 0; color: var(--st-muted); max-width: 62ch; }

/* ---------- Поверхности ---------- */

.panel {
  background: var(--st-surface);
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius-panel);
}
.panel-body { padding: 1.25rem 1.5rem; }
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--st-line);
}
.panel-head h2 { margin: 0; font-size: 1.05rem; }

/* ---------- Суммы: главный акцент ---------- */

.money { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.money-kop { font-size: .72em; font-weight: 500; color: var(--st-muted); }
.money-cur { font-size: .8em; font-weight: 500; color: var(--st-muted); }
.money-lg { font-size: 2.25rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; }

/* ---------- Строки-выписка ---------- */

.ledger { list-style: none; margin: 0; padding: 0; }

.ledger-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .25rem 1rem;
  align-items: center;
  padding: .9rem 1.5rem .9rem 1.75rem;
  border-bottom: 1px solid var(--st-line);
}
.ledger-row:last-child { border-bottom: 0; }

/* Цветная полоса категории - совпадает с сектором на круговой диаграмме */
.ledger-row::before {
  content: '';
  position: absolute;
  left: .75rem;
  top: .9rem;
  bottom: .9rem;
  width: 4px;
  border-radius: 2px;
  background: var(--cat-color, var(--st-line-strong));
}

.ledger-row.is-inactive { opacity: .55; }

.ledger-title { font-weight: 600; color: var(--st-ink); text-decoration: none; }
.ledger-title:hover { color: var(--st-accent); }
.ledger-meta { color: var(--st-muted); font-size: .88rem; }
.ledger-amount { text-align: right; }
.ledger-amount small { display: block; color: var(--st-muted); font-size: .8rem; }

@media (min-width: 768px) {
  .ledger-row { grid-template-columns: minmax(0, 1fr) 11rem 9rem; }
}

.cat-dot {
  display: inline-block;
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: var(--cat-color, var(--st-line-strong));
  margin-right: .35rem;
  vertical-align: .05em;
}

/* ---------- Теги и бейджи ---------- */

.tag-pill {
  display: inline-block;
  padding: .1rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--st-line-strong);
  font-size: .78rem;
  color: var(--st-muted);
  background: var(--st-surface);
}

.status {
  display: inline-block;
  padding: .12rem .5rem;
  border-radius: 6px;
  font-size: .78rem;
  font-weight: 500;
  background: var(--st-ground);
  color: var(--st-muted);
}
.status-trial { background: #FDF3DC; color: #7A5A0C; }
.status-off { background: #EEF0F3; color: var(--st-muted); }

/* ---------- Формы и кнопки ---------- */

.form-label { font-weight: 500; margin-bottom: .3rem; }
.form-text { color: var(--st-muted); }
.form-control, .form-select {
  /* Bootstrap берёт фон полей из --bs-body-bg (у нас серый фон страницы) */
  background-color: var(--st-surface);
  border-color: var(--st-line-strong);
  padding: .55rem .75rem;
}
/* Справа у select место под стрелку - иначе длинный текст налезает на неё */
.form-select { padding-right: 2.25rem; background-position: right .7rem center; }
.form-control:focus, .form-select:focus { border-color: var(--st-accent); }

.form-section + .form-section {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--st-line);
}
.form-section-title { font-size: 1rem; font-weight: 600; margin-bottom: .9rem; }

.btn { font-weight: 500; padding: .5rem 1rem; }
.btn-primary {
  --bs-btn-bg: var(--st-accent);
  --bs-btn-border-color: var(--st-accent);
  --bs-btn-hover-bg: var(--st-accent-hover);
  --bs-btn-hover-border-color: var(--st-accent-hover);
  --bs-btn-active-bg: var(--st-accent-hover);
  --bs-btn-active-border-color: var(--st-accent-hover);
  --bs-btn-disabled-bg: var(--st-accent);
  --bs-btn-disabled-border-color: var(--st-accent);
}
.btn-outline-secondary {
  --bs-btn-color: var(--st-ink);
  --bs-btn-border-color: var(--st-line-strong);
  --bs-btn-hover-bg: var(--st-ground);
  --bs-btn-hover-color: var(--st-ink);
  --bs-btn-hover-border-color: var(--st-line-strong);
  --bs-btn-active-bg: var(--st-line);
  --bs-btn-active-color: var(--st-ink);
}
.btn-link-danger { color: var(--st-danger); }

/* ---------- Сообщения ---------- */

.flash {
  border-radius: var(--st-radius-control);
  border: 1px solid var(--st-line);
  border-left-width: 4px;
  background: var(--st-surface);
  padding: .7rem 1rem;
  margin-bottom: 1rem;
}
.flash-success { border-left-color: var(--st-success); }
.flash-error { border-left-color: var(--st-danger); }
.flash-info, .flash-warning { border-left-color: var(--st-accent); }

/* ---------- Пустые состояния ---------- */

.empty {
  padding: 2.5rem 1.5rem;
  text-align: left;
}
.empty h2 { font-size: 1.1rem; }
.empty p { color: var(--st-muted); max-width: 46ch; }

/* ---------- Страницы входа и регистрации ---------- */

.auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}
.auth-card { width: 100%; max-width: 420px; }
.auth-card .brand { padding: 0; margin-bottom: 1.75rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- Справочники: способы оплаты, теги, сервисы ---------- */

.ledger-actions { display: flex; gap: .5rem; justify-content: flex-end; }
.ledger-usage { color: var(--st-muted); font-size: .88rem; }

@media (min-width: 768px) {
  .ledger-row.ref-row { grid-template-columns: minmax(0, 1fr) 10rem auto; }
}

.ref-search { display: flex; gap: .5rem; max-width: 420px; margin-bottom: 1.5rem; }

.section-title { font-size: 1.05rem; margin: 2rem 0 .75rem; }

/* Каталог: компактные колонки по категориям */
.catalog { columns: 3 15rem; column-gap: 2rem; }
.catalog-group { break-inside: avoid; margin-bottom: 1.25rem; }
.catalog-group h3 { font-size: .95rem; margin-bottom: .4rem; }
.catalog-group ul { list-style: none; padding: 0; margin: 0; }
.catalog-group li { padding: .15rem 0; display: flex; justify-content: space-between; gap: .75rem; }
.catalog-group li a { color: var(--st-muted); font-size: .85rem; white-space: nowrap; }

/* ---------- Подписки: фильтры, строки списка, карточка подписки ---------- */

.subscription-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
}
.subscription-filters .form-select { min-width: 11rem; }
.subscription-count { color: var(--st-muted); margin: 0 0 .6rem; font-size: .92rem; }
#subscription-results[aria-busy="true"] { opacity: .6; transition: opacity .15s; }

.subscription-main .ledger-title { margin-right: .4rem; }
.subscription-main .status { vertical-align: .1em; margin-right: .25rem; }
.subscription-tags-row { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }

/* На узком экране категория уходит под название, сумма - справа на две строки */
@media (max-width: 767.98px) {
  .subscription-row .subscription-cat { grid-column: 1; grid-row: 2; }
  .subscription-row .ledger-amount { grid-column: 2; grid-row: 1 / span 2; }
}

.subscription-detail { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 992px) {
  .subscription-detail { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.subscription-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .55rem 1.25rem;
  margin: 0;
}
.subscription-facts dt { font-weight: 500; color: var(--st-muted); }
.subscription-facts dd { margin: 0; }

.subscription-pay {
  display: grid;
  gap: .75rem;
  align-items: end;
}
@media (min-width: 576px) {
  /* Две строки: сумма + дата, затем карта + кнопка - поля не обрезаются */
  .subscription-pay { grid-template-columns: 1fr 1fr; }
}
.subscription-pay .form-label { margin-bottom: .2rem; }

/* История платежей: без полосы категории (она одна на всю подписку) и с ограниченной высотой */
.subscription-payments { max-height: 30rem; overflow-y: auto; }
.subscription-payments .ledger-row { padding-left: 1.5rem; }
.subscription-payments .ledger-row::before { content: none; }
.subscription-payments .btn-link-danger { color: var(--st-muted); text-decoration: none; }
.subscription-payments .btn-link-danger:hover,
.subscription-payments .btn-link-danger:focus-visible { color: var(--st-danger); text-decoration: underline; }

.subscription-payment { grid-template-columns: minmax(0, 1fr) auto auto; }
@media (min-width: 768px) {
  .subscription-payment { grid-template-columns: minmax(0, 1fr) 9rem 5rem; }
}
.subscription-payment form { text-align: right; }

.subscription-tags { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }

/* ---------- Дашборд ---------- */

/* Герой: месячная сумма - самый крупный текст в интерфейсе, без карточки вокруг */
.dash-hero {
  display: grid;
  gap: 1.5rem 3rem;
  align-items: end;
  padding: .5rem 0 2rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--st-line);
}
@media (min-width: 992px) {
  .dash-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 18rem; }
}
.dash-hero-label { font-size: 1rem; font-weight: 500; color: var(--st-muted); letter-spacing: 0; margin: 0 0 .35rem; }
.dash-hero-amount { margin: 0; font-size: clamp(2.75rem, 7vw, 4.25rem); font-weight: 650; letter-spacing: -0.035em; line-height: 1; }
.dash-hero-amount .money { font-weight: 650; }
.dash-hero-sub { margin: .75rem 0 0; color: var(--st-muted); display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; }
.dash-hero-sub .money { color: var(--st-ink); }
.dash-hero-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--st-line-strong); }
.dash-hero-note { margin: .75rem 0 0; font-size: .9rem; color: var(--st-muted); max-width: 60ch; }

.dash-budget { font-size: .92rem; }
.dash-budget-caption { margin: .4rem 0 0; color: var(--st-muted); font-size: .85rem; }

.meter { height: 8px; margin-top: .6rem; border-radius: 4px; background: var(--st-line); overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: 4px; background: var(--st-accent); }
.meter.is-over span { background: var(--st-danger); }

.dash-grid { display: grid; gap: 1.25rem; }
@media (min-width: 992px) {
  .dash-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .dash-wide { grid-column: 1 / -1; }
}

/* Кольцевая диаграмма + легенда-выписка */
.dash-categories { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 576px) {
  .dash-categories { grid-template-columns: 12rem minmax(0, 1fr); }
}
.dash-doughnut { position: relative; height: 12rem; width: 12rem; margin: 0 auto; }
@media (min-width: 576px) { .dash-doughnut { position: sticky; top: 1rem; } }

/* Центр кольца: выбранная категория (доля крупно) или число категорий */
.dash-doughnut-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none; text-align: center; padding: 0 2.6rem;
}
.dash-center-value { font-size: 1.5rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dash-center-label { font-size: .75rem; color: var(--st-muted); line-height: 1.25; margin-top: .15rem; }

.legend-ledger { list-style: none; margin: 0; padding: 0; }
.legend-item { border-bottom: 1px solid var(--st-line); }
.legend-item:last-child { border-bottom: 0; }

/* Строка легенды - кнопка: раскрывает подписки категории */
.legend-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 1rem;
  gap: .75rem;
  align-items: center;
  width: 100%;
  padding: .5rem .25rem;
  border: 0;
  border-radius: 6px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: .92rem;
  text-align: left;
}
.legend-toggle:hover { background: var(--st-ground); }
.legend-name { color: var(--st-ink); }
.legend-label { display: flex; flex-direction: column; min-width: 0; }
.legend-share { color: var(--st-muted); font-size: .78rem; padding-left: .95rem; font-variant-numeric: tabular-nums; }
.legend-amount { text-align: right; }
.legend-chevron {
  width: .45rem; height: .45rem; justify-self: center; align-self: center;
  border-right: 1.5px solid var(--st-muted); border-bottom: 1.5px solid var(--st-muted);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
}
.legend-item.is-open .legend-chevron { transform: translateY(1px) rotate(-135deg); }
.legend-item.is-open .legend-name { font-weight: 600; }

/* Раскрытая категория: подписки с тонкой линией цвета категории слева */
.legend-items { margin: 0 2rem .6rem .6rem; padding: .15rem 0 .1rem .9rem; border-left: 2px solid var(--cat-color); }
.legend-items ul { list-style: none; margin: 0; padding: 0; }
.legend-items li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  padding: .3rem .25rem .3rem 0;
  font-size: .88rem;
}
.legend-items li a { color: var(--st-ink); text-decoration: none; }
.legend-items li a:hover { color: var(--st-accent); text-decoration: underline; }
.legend-item-note { color: var(--st-muted); font-size: .78rem; }
.legend-item-amount { text-align: right; }
.legend-items-all { display: inline-block; margin-top: .25rem; font-size: .82rem; }
@media (prefers-reduced-motion: no-preference) {
  .legend-items:not([hidden]) { animation: legend-open .2s ease-out; }
  @keyframes legend-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}

/* Подсказки графиков - «строка выписки»: белая карточка с полосой категории, суммы той же типографикой */
.chart-tip {
  position: fixed;
  z-index: 1080;
  width: max-content;
  min-width: 13rem;
  max-width: 17rem;
  padding: .7rem .85rem .7rem 1.05rem;
  background: var(--st-surface);
  border: 1px solid var(--st-line);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(28, 36, 51, .14), 0 1px 3px rgba(28, 36, 51, .08);
  pointer-events: none;
  font-size: .85rem;
  line-height: 1.35;
}
.chart-tip::before {
  content: '';
  position: absolute; left: .45rem; top: .75rem; bottom: .75rem;
  width: 3px; border-radius: 2px;
  background: var(--cat-color, var(--st-accent));
}
.tip-title { font-weight: 600; color: var(--st-ink); }
.tip-amount { display: block; margin-top: .15rem; font-size: 1.35rem; font-weight: 650; letter-spacing: -0.015em; }
.tip-sub { color: var(--st-muted); font-size: .8rem; }
.tip-list { margin-top: .55rem; padding-top: .45rem; border-top: 1px solid var(--st-line); display: grid; gap: .2rem; }
.tip-row { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.tip-row-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--st-ink); }
.tip-row .money { font-weight: 500; }
.tip-row-plan { margin-top: .4rem; }
.tip-row-plan .tip-row-label { color: var(--st-muted); }
.tip-more, .tip-hint { color: var(--st-muted); font-size: .78rem; }
.tip-hint { margin-top: .45rem; }

/* Ближайшие списания: высота как у соседнего блока, дальше - прокрутка внутри */
.dash-upcoming { display: flex; flex-direction: column; min-height: 0; }
.dash-upcoming-list { overflow-y: auto; max-height: 14rem; flex: 1 1 auto; }
.dash-upcoming-row { grid-template-columns: minmax(0, 1fr) auto; }
@media (min-width: 576px) {
  .dash-upcoming-row { grid-template-columns: minmax(0, 1fr) 6.5rem 6.5rem; }
}
.dash-when { color: var(--st-muted); font-size: .88rem; text-align: right; }
.dash-when.is-soon { color: var(--st-ink); font-weight: 600; }
@media (max-width: 575.98px) {
  .dash-upcoming-row .dash-when { grid-column: 1; grid-row: 2; text-align: left; }
  .dash-upcoming-row .ledger-amount { grid-column: 2; grid-row: 1 / span 2; }
}

/* Линейный график */
.dash-line { position: relative; height: 16rem; }
.dash-line-key { display: flex; gap: 1rem; }
.dash-line-key i { display: inline-block; width: 1.25rem; margin-right: .4rem; vertical-align: middle; border-top: 2px solid var(--st-accent); }
.dash-line-key i.key-dashed { border-top: 2px dashed var(--st-muted); }
.dash-table { margin-top: 1rem; font-size: .9rem; }
.dash-table summary { color: var(--st-accent); cursor: pointer; width: fit-content; }
.dash-table table { margin-top: .75rem; }

/* Короткая инструкция «как это связано»: шаги действительно последовательные, поэтому нумерация */
.how-it-works {
  counter-reset: step;
  list-style: none;
  display: grid;
  gap: .5rem 1.5rem;
  padding: 1rem 1.25rem;
  margin: 0 0 1.75rem;
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius-panel);
  background: var(--st-surface);
  font-size: .9rem;
  color: var(--st-muted);
}
@media (min-width: 768px) { .how-it-works { grid-template-columns: repeat(3, 1fr); } }
.how-it-works li { counter-increment: step; position: relative; padding-left: 1.85rem; }
.how-it-works li::before {
  content: counter(step);
  position: absolute; left: 0; top: .1rem;
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--st-accent-soft); color: var(--st-accent);
  font-size: .75rem; font-weight: 600; display: grid; place-items: center;
}
.how-it-works strong { color: var(--st-ink); font-weight: 600; }


/* ---------- Изменения за месяц в главном блоке ---------- */
/* Каждое изменение отдельной строкой: итог, затем добавленные и отключённые подписки */
.dash-hero-change { list-style: none; margin: .75rem 0 0; padding: 0; font-size: .88rem; color: var(--st-muted); display: grid; gap: .2rem; max-width: 30rem; }
.dash-hero-change li { display: flex; align-items: baseline; gap: .4rem; }
.dash-change-total { margin-bottom: .1rem; }
.dash-change-amount { color: var(--st-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.dash-hero-change a { color: var(--st-ink); }
.dash-change-mark { width: .9rem; text-align: center; font-weight: 600; color: var(--st-muted); }
.dash-change-mark.is-added { color: var(--st-ink); }
.dash-change-sum { margin-left: auto; padding-left: 1rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Календарь списаний ---------- */
.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: .25rem; margin-bottom: .6rem; }
.cal-nav-title { min-width: 7.5rem; text-align: center; font-weight: 600; font-size: .9rem; }
.cal-nav-btn {
  width: 2rem; height: 2rem; display: grid; place-items: center;
  border: 1px solid var(--st-line); border-radius: var(--st-radius-control);
  background: var(--st-surface); color: var(--st-ink);
}
.cal-nav-btn:hover:not(:disabled) { background: var(--st-ground); }
.cal-nav-btn:disabled { opacity: .35; }
.cal-chevron { width: .45rem; height: .45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateX(-1px) rotate(-45deg); }
.cal-chevron-left { transform: translateX(1px) rotate(135deg); }

.cal { padding: .75rem 1rem .5rem; }
.cal-weekdays, .cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-weekdays span { text-align: center; font-size: .72rem; color: var(--st-muted); padding-bottom: .25rem; }
.cal-weekdays span:nth-child(n+6) { color: var(--st-ink); }

/* День - число и до трёх точек цветов категорий; сумма и названия - по нажатию */
.cal-day {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: .15rem;
  min-height: 2.6rem;
  padding: .3rem 0 .25rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  font: inherit;
  font-size: .85rem;
  color: var(--st-ink);
}
.cal-num { line-height: 1.2; font-variant-numeric: tabular-nums; }
.cal-day.is-outside { color: var(--st-line-strong); }
.cal-day.is-past:not(.is-outside) { color: var(--st-muted); }
.cal-day.is-today { border-color: var(--st-accent); }
.cal-day.is-today .cal-num { color: var(--st-accent); font-weight: 650; }
.cal-day.has-charges { background: var(--st-ground); cursor: pointer; }
.cal-day.has-charges .cal-num { font-weight: 600; }
.cal-day.has-charges:hover { background: var(--st-accent-soft); }
.cal-day[aria-pressed="true"] { background: var(--st-accent-soft); border-color: var(--st-accent); }
.cal-day.is-past.has-charges .cal-dots i { opacity: .45; }
.cal-dots { display: flex; gap: 2px; height: 6px; }
.cal-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--cat-color); }

.cal-list-title { margin: .5rem 1.5rem .25rem; font-size: .8rem; color: var(--st-muted); }
.cal-detail { border-top: 1px solid var(--st-line); margin-top: .25rem; }
.cal-detail-head { display: flex; justify-content: space-between; align-items: baseline; padding: .75rem 1.5rem .25rem; }
.cal-back { margin: 0 1rem .75rem; }
@media (prefers-reduced-motion: no-preference) {
  .cal-detail:not([hidden]) { animation: legend-open .18s ease-out; }
}

/* ---------- Платежи выбранного месяца под графиком ---------- */
.month-detail { margin-top: 1rem; border: 1px solid var(--st-line); border-radius: var(--st-radius-panel); overflow: hidden; }
.month-detail-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 1.25rem; background: var(--st-ground); }
.month-detail-title { margin: 0; font-size: 1rem; }
.month-detail-sub { margin: .1rem 0 0; font-size: .85rem; color: var(--st-muted); }
.month-detail-list { max-height: 20rem; overflow-y: auto; }
.month-detail-row { grid-template-columns: minmax(0, 1fr) 4rem 7rem; }
.month-detail-date { color: var(--st-muted); font-size: .88rem; font-variant-numeric: tabular-nums; text-align: right; }
@media (prefers-reduced-motion: no-preference) {
  .month-detail:not([hidden]) { animation: legend-open .2s ease-out; }
}
/* В списке дня нет колонки «когда» - две колонки: название и сумма */
.cal-detail .dash-upcoming-row { grid-template-columns: minmax(0, 1fr) auto; }

.dash-change-more { color: var(--st-muted); padding-left: 1.3rem; }
.dash-hero-side .dash-hero-change { margin-top: 0; }

/* ==========================================================================
   Обзор на один экран: 1920x1080 (окно ~1920x950) и MacBook Air 13" (~1440x740)
   Страница не прокручивается: верхняя строка + три колонки на всю оставшуюся
   высоту. Раскрытые списки прокручиваются внутри своей колонки.
   На меньших окнах остаётся обычная раскладка, чтобы ничего не обрезалось.
   ========================================================================== */
@media (min-width: 1280px) and (min-height: 680px) {
  .content.content-dash {
    max-width: 1680px;
    height: 100vh;
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .content-dash .flash { flex: none; }

  .content-dash .dash-hero {
    flex: none;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) 17rem;
    align-items: end;
    gap: 1rem 2.5rem;
    padding: 0 0 1.1rem;
    margin-bottom: 1.1rem;
  }

  .content-dash .dash-grid {
    flex: 1 1 auto;
    min-height: 0;
    /* Колонки разной ширины по важности: график шире всех */
    grid-template-columns: minmax(19rem, .95fr) minmax(0, 1.35fr) minmax(19rem, .9fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 1rem;
  }
  .content-dash .dash-grid > .panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }
  .content-dash .dash-grid > .panel > .panel-head { flex: none; }
  .content-dash .dash-wide { grid-column: auto; order: 2; }
  .content-dash .dash-upcoming { order: 3; max-height: none; }

  /* Категории: кольцо над легендой, легенда прокручивается при раскрытии */
  .content-dash .dash-categories {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 1rem;
  }
  .content-dash .dash-doughnut { position: relative; top: auto; }

  /* График занимает всю свободную высоту колонки; платежи месяца и таблица делят её */
  .content-dash .dash-wide > .panel-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .content-dash .dash-line { flex: 1 1 auto; height: auto; min-height: 9rem; }
  .content-dash .month-detail { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; max-height: 55%; }
  .content-dash .month-detail[hidden] { display: none; }
  .content-dash .month-detail-list { flex: 1 1 auto; min-height: 0; max-height: none; }
  .content-dash .dash-table { flex: none; }
  .content-dash .dash-table[open] { flex: 0 1 auto; max-height: 45%; overflow-y: auto; }

  /* Календарь: сетка фиксированная, список дня или ближайших забирает остаток и прокручивается */
  .content-dash .cal { flex: none; }
  .content-dash [data-upcoming],
  .content-dash .cal-detail:not([hidden]) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .content-dash [data-upcoming][hidden] { display: none; }
  .content-dash .cal-detail .ledger,
  .content-dash .dash-upcoming-list { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }
}

/* MacBook Air 13" и другие окна пониже: плотнее отступы, меньше кольцо и ячейки */
@media (min-width: 1280px) and (min-height: 680px) and (max-height: 879px) {
  .content.content-dash { padding: 1.1rem 1.5rem; }
  .content-dash .dash-hero { padding-bottom: .8rem; margin-bottom: .8rem; gap: .75rem 2rem; }
  .content-dash .dash-hero-amount { font-size: 2.75rem; }
  .content-dash .dash-hero-sub { margin-top: .45rem; }
  .content-dash .dash-hero-change { font-size: .84rem; gap: .1rem; }
  .content-dash .panel-head { padding: .65rem 1.1rem; }
  .content-dash .panel-body { padding: .8rem 1.1rem; }
  .content-dash .dash-doughnut { width: 9.5rem; height: 9.5rem; }
  .content-dash .dash-center-value { font-size: 1.25rem; }
  .content-dash .legend-toggle { padding: .32rem .25rem; font-size: .88rem; }
  .content-dash .cal { padding: .5rem .75rem .25rem; }
  .content-dash .cal-nav { margin-bottom: .35rem; }
  .content-dash .cal-nav-btn { width: 1.75rem; height: 1.75rem; }
  .content-dash .cal-day { min-height: 2.1rem; padding: .18rem 0 .15rem; font-size: .8rem; }
  .content-dash .cal-list-title { margin: .3rem 1.1rem .1rem; }
  .content-dash .ledger-row { padding-top: .55rem; padding-bottom: .55rem; }
  .content-dash .ledger-row::before { top: .55rem; bottom: .55rem; }
  .content-dash .dash-line { min-height: 8rem; }
}
@media (min-width: 1280px) and (min-height: 680px) {
  /* Холст графика не должен распирать колонку: высоту задаёт контейнер, Chart.js подстраивается */
  .content-dash .dash-line > canvas { position: absolute; inset: 0; }
}
@media (min-width: 1280px) and (min-height: 680px) {
  /* Узкая колонка календаря: «когда» под названием, сумма справа */
  .content-dash .dash-upcoming-row { grid-template-columns: minmax(0, 1fr) auto; }
  .content-dash .dash-upcoming-row .dash-when { grid-column: 1; grid-row: 2; text-align: left; font-size: .8rem; }
  .content-dash .dash-upcoming-row .ledger-amount { grid-column: 2; grid-row: 1 / span 2; }
  .content-dash .dash-upcoming-row .ledger-meta { display: inline; margin-left: .35rem; }
}
@media (min-width: 1280px) and (min-height: 680px) and (max-height: 879px) {
  .content-dash .dash-categories { gap: .6rem; }
  .content-dash .dash-doughnut { width: 8.75rem; height: 8.75rem; }
  .content-dash .legend-toggle { padding: .26rem .25rem; }
  .content-dash .legend-share { font-size: .74rem; }
}
@media (min-width: 1280px) and (min-height: 680px) {
  .content-dash .dash-upcoming-row .ledger-meta { white-space: nowrap; }
}
@media (min-width: 1280px) and (min-height: 680px) {
  /* Пока Chart.js пересчитывает размер, холст не должен наезжать на список платежей */
  .content-dash .dash-line { overflow: hidden; }
}
/* Совсем низкое окно (MacBook с доком и панелью закладок): ещё компактнее */
@media (min-width: 1280px) and (min-height: 680px) and (max-height: 739px) {
  .content.content-dash { padding-top: .9rem; padding-bottom: .9rem; }
  .content-dash .dash-hero-amount { font-size: 2.4rem; }
  .content-dash .dash-doughnut { width: 7.75rem; height: 7.75rem; }
  .content-dash .dash-center-value { font-size: 1.1rem; }
  .content-dash .legend-toggle { padding: .2rem .25rem; }
}