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

.fin-main-chart .fin-ribbon-slim { height: 10px; margin-top: var(--space-md); }
.fin-key { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin: 0 6px 3px 12px; }
.fin-key:first-child { margin-left: 0; }
.fin-key-rev { background: var(--pastel-lilac); }
.fin-key-prof { background: var(--accent-lime); }
.fin-key-loss { background: var(--pastel-pink-2); }

/* График по месяцам */
.fin-bars { position: relative; display: flex; align-items: flex-end; gap: var(--gap); height: 240px; }
.fin-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.fin-bar-sum { font-size: var(--font-size-small); color: var(--text-secondary); font-variant-numeric: tabular-nums; margin-bottom: var(--space-2xs); }
.fin-bar { position: relative; width: 100%; max-width: 110px; background: var(--pastel-lilac); border-radius: 8px 8px 0 0; display: flex; align-items: flex-start; }
.fin-bar-in { width: 100%; background: var(--accent-lime); border-radius: 8px 8px 0 0; min-height: 2px; }
.fin-bar-name { margin-top: var(--space-xs); font-size: var(--font-size-small); color: var(--text-primary); }
.fin-bar-margin { font-size: var(--font-size-small); color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Лента распределения расходов */
.fin-ribbon { display: flex; height: 30px; border-radius: var(--r-pill); overflow: hidden; background: var(--border); }
.fin-seg { display: block; height: 100%; }
.fin-seg-commission, .fin-stack-part.fin-seg-commission { background: var(--accent-violet); }
.fin-seg-ads, .fin-stack-part.fin-seg-ads { background: var(--accent-magenta); }
.fin-seg-cost, .fin-stack-part.fin-seg-cost { background: var(--pastel-purple); }
.fin-seg-delivery, .fin-stack-part.fin-seg-delivery { background: var(--pastel-blue); }
.fin-seg-tax, .fin-stack-part.fin-seg-tax { background: var(--color-average); }
.fin-seg-returns, .fin-stack-part.fin-seg-returns { background: var(--pastel-pink-2); }
/* Утилизация рядом с возвратами по цвету: обе строки про товар,
   который не дошёл до покупателя, — розовая группа читается разом. */
.fin-seg-disposal, .fin-stack-part.fin-seg-disposal { background: var(--pastel-pink); }
.fin-seg-other, .fin-stack-part.fin-seg-other { background: var(--border-strong); }
.fin-seg-kept { background: var(--accent-lime); }
.fin-seg-spent { background: var(--pastel-lilac); }
.fin-legend {
    list-style: none; margin: var(--space-md) 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-xs) var(--gap); font-size: var(--font-size-small); color: var(--text-secondary);
}
.fin-legend b { margin-left: auto; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.fin-legend li { display: flex; align-items: center; gap: var(--space-xs); }
.fin-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* Таблица по дням со спарклайнами */
.fin-table-widget { padding: var(--space-md) var(--pad-card); }
.fin-table-scroll { overflow-x: auto; }
.fin-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-small); }
.fin-table th { text-align: left; font-weight: 500; color: var(--text-muted); padding: var(--space-xs) var(--space-sm); white-space: nowrap; }
.fin-table th.num, .fin-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.fin-table td { padding: var(--space-sm); border-top: 1px solid var(--line); white-space: nowrap; }
.fin-th-spark { width: 130px; }
.fin-td-spark { width: 130px; }
.fin-spark { display: flex; align-items: flex-end; gap: 1px; height: 26px; }
.fin-spark i { flex: 1; background: var(--pastel-lilac); border-radius: 1px; min-height: 1px; }
.fin-spark-signed { align-items: center; }
.fin-spark i.fin-spark-neg { background: var(--pastel-pink-2); align-self: flex-start; }

@media (max-width: 1200px) {
    .fin-grid > .fin-widget, .fin-grid-main > .fin-card-hero, .fin-expense-card { grid-column: span 6; }
    .fin-half { grid-column: span 12 !important; }
}
@media (max-width: 720px) {
    .fin-grid > .fin-widget, .fin-grid-main > .fin-card-hero, .fin-expense-card { grid-column: span 12; }
    .fin-plot { padding-left: 74px; }
    .fin-grid-line { left: 74px; }
}

/* Интерактив дашборда — повторяет поведение Sellmonitor, изученное
   в живом интерфейсе 02.09.2026: наведение на столбец показывает дату
   и три строки (выручка, расходы, прибыль), сегмент ленты — статью
   и сумму, у карточек — знак вопроса с пояснением, что посчитано. */
.fin-updated { margin: 0; text-align: right; font-size: var(--font-size-small); color: var(--text-muted); }
.fin-warn {
    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-warn a { color: var(--state-warn-text); }

.fin-q {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%;
    border: 1px solid var(--border-strong); color: var(--text-muted);
    font-size: 11px; cursor: help; position: relative;
}
.fin-q-tip, .fin-tip {
    position: absolute; z-index: 20; left: 50%; transform: translateX(-50%);
    bottom: calc(100% + 8px); width: max-content; max-width: 260px;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-inverse); color: var(--text-on-inverse);
    border-radius: var(--r-sm); box-shadow: var(--shadow-pop);
    font-size: var(--font-size-small); font-weight: 400; line-height: 1.4;
    text-align: left; opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .12s;
}
.fin-q:hover .fin-q-tip, .fin-q:focus .fin-q-tip { opacity: 1; visibility: visible; }

/* Тултип столбца и сегмента: дата жирным, под ней строки «метрика — сумма» */
.fin-daybar-col, .fin-seg { position: relative; }
.fin-tip { display: grid; gap: 2px; min-width: 190px; }
.fin-tip b { margin-bottom: var(--space-2xs); }
.fin-tip span { display: flex; justify-content: space-between; gap: var(--space-md); font-variant-numeric: tabular-nums; }
.fin-tip i { font-style: normal; color: var(--pastel-lilac-2); }
.fin-tip-total { margin-top: var(--space-2xs); padding-top: var(--space-2xs); border-top: 1px solid rgba(255,255,255,.2); }
.fin-daybar-col:hover .fin-tip, .fin-seg:hover .fin-tip { opacity: 1; visibility: visible; }

/* Подсветка при наведении — как у образца: столбец темнеет, соседние нет */
.fin-daybar-col:hover .fin-daybar { background: var(--pastel-purple); }
.fin-daybar-col:hover .fin-stack-part { filter: brightness(.92); }
.fin-seg:hover { filter: brightness(1.08); }
.fin-table tbody tr:hover { background: var(--bg-canvas); }

/* Товарные блоки: остатки, ABC и список товаров */
.fin-third { grid-column: span 4 !important; }
.fin-abc-A { background: var(--accent-lime); }
.fin-abc-B { background: var(--pastel-yellow); }
.fin-abc-C { background: var(--color-average); }
.fin-abc-D { background: var(--pastel-pink-2); }
.fin-abc-U { background: var(--border-strong); }
.fin-prod-group, .fin-prod-qty { display: block; }
.fin-chev { display: inline-block; width: 14px; color: var(--text-muted); }
@media (max-width: 1200px) { .fin-third { grid-column: span 6 !important; } }
@media (max-width: 720px) { .fin-third { grid-column: span 12 !important; } }

.fin-chev {
    display: inline-block; width: 18px; margin-right: var(--space-2xs);
    border: 0; background: none; color: var(--text-muted);
    font: inherit; cursor: pointer; transition: transform .15s;
}
.fin-open .fin-chev { transform: rotate(90deg); }
.fin-chev-empty { display: inline-block; width: 18px; margin-right: var(--space-2xs); }
.fin-row-child td { color: var(--text-secondary); }
.fin-row-child td:first-child { padding-left: calc(var(--space-md) + 18px); }

/* Вкладка «Оптимизация», экран «Где теряю сейчас». Главная цифра —
   прибыль на штуку: она крупнее и жирнее соседних (владелец, 15.09.2026). */
.opt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--gap); flex-wrap: wrap; }
.opt-head .fin-shops { border-right: 0; padding-right: 0; margin-right: 0; }
.opt-basis { margin: var(--space-2xs) 0 0; color: var(--text-secondary); font-size: var(--font-size-small); max-width: 640px; }
.opt-total { margin: var(--space-md) 0 var(--space-sm); }
.opt-loss { color: var(--state-bad-text); }
.opt-table-wrap { overflow-x: auto; }
.opt-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-small); }
.opt-table th { text-align: left; font-weight: 500; color: var(--text-muted); padding: var(--space-xs) var(--space-sm); white-space: nowrap; }
.opt-table td { padding: var(--space-sm); border-top: 1px solid var(--line); vertical-align: top; }
.opt-table th.num, .opt-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.opt-main { font-weight: 600; font-size: var(--font-size-base); }
.opt-shop { color: var(--text-secondary); white-space: nowrap; }
.opt-reason { min-width: 280px; }
.opt-note {
    display: inline-block; margin: var(--space-2xs) var(--space-2xs) 0 0; padding: 2px 10px;
    border-radius: var(--r-pill); background: var(--state-warn-bg); color: var(--state-warn-text);
}
.opt-empty { margin: var(--space-md) 0; color: var(--text-secondary); }
.opt-hidden { margin: var(--space-md) 0 0; padding-left: var(--space-md); color: var(--text-secondary); font-size: var(--font-size-small); }

/* Вкладка «Оптимизация»: компактная таблица, разбор — по клику под строкой.
   Владелец бежит по красным точкам, серые распродажи пропускает
   (владелец, 16.09.2026). */
.opt-col-status { width: 28px; }
.opt-col-toggle { width: 96px; text-align: right; }
.opt-hidden-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.opt-row { cursor: pointer; }
.opt-row:hover td { background: var(--bg-canvas); }
.opt-row-open td { background: var(--bg-canvas); }
.opt-row td { padding: 10px var(--space-sm); border-top: 1px solid var(--line); vertical-align: middle; }
.opt-name { font-weight: 500; }
.opt-subnote { display: block; font-size: var(--font-size-small); color: var(--text-secondary); font-weight: 400; }
.opt-shop { color: var(--text-secondary); white-space: nowrap; font-size: var(--font-size-small); }
.opt-action { color: var(--text-secondary); white-space: nowrap; }
.opt-row-act .opt-action, .opt-row-slow .opt-action { color: var(--text-primary); font-weight: 500; }
.opt-total-slow { margin: 0 0 var(--space-sm); color: var(--text-secondary); }

.opt-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
/* Красная точка — нужно действие; серая — минус ожидаемый. */
.opt-dot-act { background: var(--accent-magenta); }
.opt-dot-calm { background: var(--border-strong); }
/* Жёлтая точка — модель в плюсе, но деньги в ней работают плохо. */
.opt-dot-slow { background: var(--color-average); }

.opt-toggle {
    padding: 4px 12px; 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;
}
.opt-row:hover .opt-toggle, .opt-toggle:focus-visible { color: var(--text-primary); }
.opt-toggle[aria-expanded="true"] { background: var(--accent-lime); border-color: var(--accent-lime); color: var(--text-primary); }

.opt-detail-row td { padding: 0 var(--space-sm) var(--space-md); background: var(--bg-canvas); border-top: 0; }
.opt-detail { max-width: 760px; padding-top: var(--space-xs); }
.opt-detail-head { margin: 0 0 var(--space-2xs); display: flex; gap: var(--space-xs); align-items: baseline; flex-wrap: wrap; }
.opt-detail-head b { font-size: var(--font-size-base); font-weight: 600; }
.opt-detail-head span, .opt-detail-why { color: var(--text-secondary); font-size: var(--font-size-small); }
.opt-detail-why { margin: 0 0 var(--space-sm); }

.opt-numbers { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg);
    margin: 0 0 var(--space-sm); padding: 0; list-style: none; }
.opt-numbers li { display: flex; flex-direction: column; }
.opt-numbers span { font-size: var(--font-size-table-head); text-transform: uppercase;
    letter-spacing: .04em; color: var(--text-muted); }
.opt-numbers b { font-size: var(--font-size-base); font-variant-numeric: tabular-nums; }