/* Стили, часть 4 из 12: колонки отчёта по группам, «Финансы»: карточки и период. Подключаются в base.html строго по порядку —
   от него зависит, какое правило главнее. Один base.css разбит 30.09.2026: Cloudflare
   отдавал файлы крупнее ~20 КБ обрезанными. Файл держать меньше 15 КБ. */

.columns-menu {
    position: absolute; right: 0; top: calc(100% + var(--space-xs)); z-index: 30;
    display: flex; flex-direction: column;
    width: 300px;
    /* меню длинное — 45 колонок; прокручивается внутри, а не вылезает
       за экран, поэтому высота ограничена долей окна */
    max-height: 70vh;
    padding: var(--space-sm) 0 0;
    background: var(--bg-surface);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-pop);
    text-align: left;
}
.columns-menu-head {
    padding: var(--space-xs) var(--space-md) var(--space-sm);
    font-size: var(--font-size-card-title);
    font-weight: 600;
}
.columns-menu-body { overflow-y: auto; }
.columns-menu-section {
    padding: var(--space-sm) var(--space-md) var(--space-2xs);
    border-top: var(--border-width) solid var(--line);
    color: var(--text-muted);
    font-size: var(--font-size-small);
}
.columns-menu-section:first-child { border-top: none; }
.columns-menu-item {
    display: flex; align-items: center; gap: var(--space-sm);
    margin: 0;
    padding: var(--space-2xs) var(--space-md);
    font-size: var(--font-size-base);
    color: var(--text-primary);
    cursor: pointer;
}
.columns-menu-item:hover { background: var(--bg-canvas); }
.columns-menu-group { font-weight: 600; padding-top: var(--space-xs); }
/* колонки группы — со сдвигом, чтобы вложенность читалась */
.columns-menu-col {
    padding-left: var(--space-lg);
    color: var(--text-secondary);
    font-size: var(--font-size-small);
}
.columns-menu-title { flex: 1; }
.columns-menu-count { color: var(--text-muted); font-size: var(--font-size-small); }

/* Тумблер вместо галочки: сама галочка спрятана, но доступна
   с клавиатуры — состояние рисует соседний элемент. */
.columns-menu-item input[type="checkbox"] {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
}
.toggle {
    position: relative;
    flex: 0 0 auto;
    width: 36px; height: 20px;
    border-radius: var(--r-pill);
    background: var(--border-strong);
    transition: background .15s ease;
}
.toggle::after {
    content: "";
    position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px;
    border-radius: var(--r-pill);
    background: var(--bg-surface);
    box-shadow: var(--shadow-card);
    transition: transform .15s ease;
}
.toggle-small { width: 28px; height: 16px; }
.toggle-small::after { width: 12px; height: 12px; }

input[type="checkbox"]:checked + .toggle { background: var(--accent-violet); }
input[type="checkbox"]:checked + .toggle::after { transform: translateX(16px); }
input[type="checkbox"]:checked + .toggle-small::after { transform: translateX(12px); }
/* часть колонок группы скрыта — тумблер группы бледнее, чем «всё включено» */
input[type="checkbox"]:indeterminate + .toggle { background: var(--pastel-lilac-2); }
input[type="checkbox"]:indeterminate + .toggle::after { transform: translateX(8px); }
input[type="checkbox"]:indeterminate + .toggle-small::after { transform: translateX(6px); }
input[type="checkbox"]:focus-visible + .toggle {
    outline: 2px solid var(--accent-violet);
    outline-offset: 2px;
}

.columns-menu-foot {
    padding: var(--space-sm) var(--space-md);
    border-top: var(--border-width) solid var(--line);
}
.columns-menu-all {
    padding: 0;
    background: none; border: none;
    color: var(--text-secondary);
    font: inherit;
    cursor: pointer;
}
.columns-menu-all:hover { color: var(--text-primary); }


/* База периода: по дате заказа или начисления. Радиокнопки спрятаны,
   видны только подписи — переключатель читается как пара кнопок, а без
   JS остаётся обычной формой. */
.basis-switch {
    display: inline-flex;
    border: 1px solid var(--border-subtle, var(--text-muted));
    border-radius: var(--radius-sm, 6px);
    overflow: hidden;
}
.basis-option {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
}
.basis-option + .basis-option { border-left: 1px solid var(--border-subtle, var(--text-muted)); }
.basis-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.basis-option:focus-within { outline: 2px solid var(--accent-violet); outline-offset: -2px; }
.basis-option-active { background: var(--accent-lime); color: var(--text-primary); }
.preset-btn[aria-pressed="true"] { background: var(--accent-lime); color: var(--text-primary); }

/* Незрелые данные: по свежим заказам начислений ещё нет */
.notice-maturity {
    margin: 0 0 var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--state-warn-bg);
    color: var(--state-warn-text);
    border-radius: var(--radius-sm, 6px);
    font-size: var(--font-size-sm);
}

/* Незрелый период: прибыли ещё нет, но это не ноль и не убыток */
.state-pending {
    color: var(--state-warn-text);
    font-size: var(--font-size-xs, 11px);
    white-space: nowrap;
}

/* Период применяется сам — при смене дат или режима. Кнопка нужна
   только если скрипты отключены: тогда её возвращает <noscript>
   в шаблоне. Скрываем стилем, а не скриптом, иначе она успевает
   мелькнуть до загрузки JS (владелец, 02.09.2026). */
.period-form-submit { display: none; }

/* ── Вкладка «Финансы» ───────────────────────────────────────────────
   Компоновка повторяет Sellmonitor, которым пользуется владелец:
   фильтры строкой, главный график с осью и сеткой, ряды карточек,
   таблица по дням со спарклайнами, блок расходов. Палитра — наша,
   из tokens.css (правило 5). Столбцы рисует CSS: в SVG подписи дат
   сжимались вместе с картинкой (владелец, 02.09.2026). */
.fin { display: flex; flex-direction: column; gap: var(--gap); }

.fin-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--gap); flex-wrap: wrap; }
.fin-head h1 { margin: 0; }
.fin-basis { margin: var(--space-xs) 0 0; color: var(--text-secondary); font-size: var(--font-size-small); }
.fin-note {
    margin: 0; padding: var(--space-sm) var(--space-md);
    background: var(--state-warn-bg); color: var(--state-warn-text);
    border-radius: var(--r-sm); font-size: var(--font-size-small);
}

.fin-period { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
/* Фильтр магазина: своя группа таблеток, отбита от периода чертой. */
.fin-shops {
    display: flex; align-items: center; gap: var(--space-xs);
    padding-right: var(--space-xs); margin-right: var(--space-xs);
    border-right: 1px solid var(--border-strong);
}
.fin-chip, .fin-apply {
    padding: 8px 14px; text-decoration: none; line-height: 1.2;
    border: var(--border-width) solid var(--border-strong);
    border-radius: var(--r-pill); background: var(--bg-surface);
    color: var(--text-secondary); font: inherit; font-size: var(--font-size-small); cursor: pointer;
}
.fin-chip:hover, .fin-apply:hover { color: var(--text-primary); }
.fin-chip-on { background: var(--accent-lime); border-color: var(--accent-lime); color: var(--text-primary); }
.fin-apply { background: var(--accent-violet); border-color: var(--accent-violet); color: var(--text-on-inverse); }
.fin-dates {
    display: inline-flex; align-items: center; gap: var(--space-2xs);
    padding: 4px 10px; border: var(--border-width) solid var(--border-strong);
    border-radius: var(--r-pill); background: var(--bg-surface); font-size: var(--font-size-small);
}
.fin-dates-dash { color: var(--text-muted); }
.fin-date { position: relative; display: inline-flex; cursor: pointer; }
.fin-date input { border: 0; background: transparent; font: inherit; color: var(--text-primary); cursor: pointer; }
.fin-date input::-webkit-calendar-picker-indicator {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer;
}

.fin-widget {
    padding: var(--pad-card); background: var(--bg-surface);
    border-radius: var(--r-card); box-shadow: var(--shadow-card); min-width: 0;
}
.fin-block-heading { margin: var(--space-sm) 0 calc(-1 * var(--space-xs)); font-size: var(--font-size-card-title); }
.fin-block-title { margin: 0 0 var(--space-md); font-size: var(--font-size-base); font-weight: 600; }
.fin-label { margin: 0; font-size: var(--font-size-small); font-weight: 500; color: var(--text-secondary); display: flex; align-items: center; gap: var(--space-xs); }
.fin-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; }
.fin-value {
    margin: var(--space-sm) 0 0; font-size: var(--font-size-metric); font-weight: 600;
    letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fin-value-sm { font-size: var(--font-size-card-title); }
.fin-unit { margin-left: .28em; font-size: .55em; font-weight: 500; color: var(--text-muted); }
.fin-delta { font-size: var(--font-size-small); font-weight: 600; white-space: nowrap; }
.fin-up { color: var(--state-good-text); }
.fin-down { color: var(--state-bad-text); }
.fin-foot { margin: var(--space-2xs) 0 0; }
.fin-hint { font-size: var(--font-size-small); color: var(--text-muted); }

/* Сверка блока товаров с карточками: почему суммы не совпадают. */
.fin-gap {
    margin: var(--space-sm) 0 0; padding: var(--space-sm) var(--space-md);
    background: var(--bg-canvas); border-radius: var(--r-sm); line-height: 1.5;
}

.fin-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); }
.fin-grid > .fin-widget { grid-column: span 3; }
.fin-grid-main > .fin-card-hero { grid-column: span 3; }
.fin-half { grid-column: span 6 !important; }
.fin-expense-card { grid-column: span 3; }

.fin-card-hero { background: var(--bg-inverse); color: var(--text-on-inverse); }
.fin-card-hero .fin-label { color: var(--pastel-lilac-2); }
.fin-card-hero .fin-value { color: var(--accent-lime); }
.fin-card-hero .fin-unit, .fin-card-hero .fin-hint { color: var(--pastel-lilac-2); }
.fin-card-hero .fin-up { color: var(--accent-lime); }
.fin-card-hero .fin-down { color: var(--pastel-pink-2); }

/* Графики со столбцами: сетка с подписями сумм слева */
.fin-plot { position: relative; padding-left: 92px; }
.fin-plot-grid { position: absolute; inset: 0 0 22px 0; }
.fin-grid-line { position: absolute; left: 92px; right: 0; border-top: 1px dashed var(--border-strong); }
.fin-grid-value {
    position: absolute; right: 100%; bottom: -.7em; padding-right: var(--space-sm);
    font-size: var(--font-size-small); color: var(--text-muted);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fin-daybars { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 240px; }
.fin-daybar-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100%; min-width: 0; }
/* Зона убытка живёт под нулевой линией и появляется только когда
   убыточные дни есть — иначе график зря терял бы высоту. */
.fin-daybar-top { flex: 1; display: flex; align-items: flex-end; }
.fin-daybar-bottom { height: 0; }
.fin-plot-signed .fin-daybar-bottom { height: 34px; border-top: 1px solid var(--border-strong); }
.fin-daybar { display: block; width: 100%; background: var(--pastel-lilac); border-radius: 3px 3px 0 0; }
.fin-daybar-profit { display: block; width: 100%; background: var(--accent-lime); border-radius: 3px 3px 0 0; }
.fin-daybar-loss { display: block; width: 100%; background: var(--pastel-pink-2); border-radius: 0 0 3px 3px; }
.fin-daybar-label {
    height: 20px; padding-top: 4px; font-size: var(--font-size-small);
    color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.fin-stack { width: 100%; height: 100%; display: flex; flex-direction: column-reverse;
    align-items: stretch; justify-content: flex-start; }
.fin-stack-part { display: block; width: 100%; }