/*
  Стили экрана «Финансы». Вынесены из <style> самой страницы 27.08.2026
  веб-дизайнером: 324 строки своего стиля внутри разметки — это своя
  дизайн-система на одной странице (config/web-design.json,
  «строк_своего_стиля»), из-за неё экраны и перестают быть похожими друг на
  друга. Ни одного нового цвета и шрифта: только токены design-tokens.css.
  Общее место для того, что понадобится другим экранам, — components.css;
  здесь остаётся только финансовое.
*/
  /* Платёжный календарь (plans/2026-08-21-платёжный-календарь-финдиректора.md).
     Ни одного нового цвета и шрифта — только токены (design-system.md §6).
     Красный и зелёный здесь не декор, а финансовая конвенция: просрочка и
     оплаченное. */

  .finance-intro {
    color: var(--color-muted); font-size: var(--text-base);
    line-height: var(--leading-md); max-width: 680px; margin: 0 0 var(--space-6);
  }


  .section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--space-4); margin: 0 0 var(--space-4); flex-wrap: wrap;
  }
  .section-head h2 {
    font-family: var(--font-heading); font-weight: 600;
    font-size: var(--text-xl); line-height: var(--leading-xl);
    margin: 0; color: var(--color-text);
  }
  .section-head .hint { color: var(--color-muted); font-size: var(--text-sm); }

  .summary-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--card-gutter); margin-bottom: var(--space-8);
  }
  .summary-card .label {
    color: var(--color-muted); font-size: var(--text-sm); line-height: var(--leading-sm);
  }
  .summary-card .value {
    font-family: var(--font-heading); font-weight: 700;
    font-size: var(--text-2xl); line-height: var(--leading-2xl);
    margin-top: var(--space-2); color: var(--color-text);
  }
  .summary-card .value.overdue { color: var(--color-danger); }
  .summary-card .value.paid { color: var(--color-success); }
  .summary-card .sub {
    color: var(--color-muted); font-size: var(--text-xs); margin-top: var(--space-1);
  }

  .pill {
    display: inline-block; padding: 2px var(--space-3);
    border-radius: var(--radius-sm); font-size: var(--text-xs);
    font-weight: 500; white-space: nowrap;
  }
  .pill-wait { background: rgba(47, 111, 237, .12); color: var(--color-accent); }
  .pill-overdue { background: rgba(208, 65, 58, .12); color: var(--color-danger); }
  .pill-paid { background: rgba(26, 157, 108, .12); color: var(--color-success); }

  .plan-table td.title { color: var(--color-text); }
  .plan-table td .meta {
    display: block; color: var(--color-muted); font-size: var(--text-xs);
    margin-top: var(--space-1);
  }
  .plan-table td.actions { text-align: right; white-space: nowrap; }
  .plan-table td.actions .btn { margin-left: var(--space-2); }
  .plan-table .date-cell {
    font-family: var(--font-heading); font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .confirm-card { margin-bottom: var(--space-6); }
  .confirm-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--space-4); padding: var(--space-4) 0;
    border-bottom: var(--border-width) solid var(--color-border);
  }
  .confirm-row:last-child { border-bottom: none; padding-bottom: 0; }
  .confirm-row .why { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-1); }
  .confirm-row .sum {
    font-family: var(--font-heading); font-variant-numeric: tabular-nums;
    color: var(--color-text);
  }

  /* Те же две мелочи, что и на других страницах СПРУТа (magic.html): мелкая
     кнопка в строке таблицы и подпись под полем формы. */
  .btn-small { padding: 6px var(--space-3); font-size: var(--text-sm); }
  .form-hint { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); margin-top: var(--space-1); }

  .light-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--card-gutter); margin-bottom: var(--space-6);
  }
  .light-card .label { color: var(--color-muted); font-size: var(--text-sm); }
  .light-card .value {
    font-family: var(--font-heading); font-weight: 700;
    font-size: var(--text-2xl); line-height: var(--leading-2xl);
    margin-top: var(--space-2); color: var(--color-text);
  }
  .light-card .sub { color: var(--color-muted); font-size: var(--text-xs); margin-top: var(--space-1); }
  .value.good { color: var(--color-success); }
  .value.bad { color: var(--color-danger); }

  .threshold-row {
    display: flex; flex-wrap: wrap; gap: var(--space-6);
    padding-top: var(--space-4); border-top: var(--border-width) solid var(--color-border);
    margin-top: var(--space-2);
  }
  .threshold-row .item { font-size: var(--text-sm); color: var(--color-muted); }
  .threshold-row .item b {
    display: block; font-family: var(--font-heading); font-variant-numeric: tabular-nums;
    color: var(--color-text); font-weight: 500; margin-top: 2px;
  }

  .fold { margin-top: var(--space-4); }
  .fold summary {
    cursor: pointer; color: var(--color-accent); font-size: var(--text-sm);
    list-style: none; padding: var(--space-2) 0;
  }
  .fold summary::-webkit-details-marker { display: none; }
  .fold summary::before { content: "▸ "; }
  .fold[open] summary::before { content: "▾ "; }
  .fold-body { padding-top: var(--space-2); }

  .note-line {
    color: var(--color-muted); font-size: var(--text-sm); line-height: var(--leading-md);
    margin: 0 0 var(--space-3);
  }
  .bar {
    height: 8px; border-radius: var(--radius-sm); background: var(--color-bg);
    overflow: hidden; margin: var(--space-3) 0 var(--space-2);
  }
  .bar span { display: block; height: 100%; background: var(--color-accent); }

  .month-switch { display: flex; align-items: center; gap: var(--space-3); }
  .month-label {
    font-family: var(--font-heading); font-weight: 600; font-size: var(--text-md);
    color: var(--color-text); min-width: 140px; text-align: center;
  }

  /* ---------- Пульт управления ----------
     Задача Анны 25.08.2026: «финансы в Спруте — это пульт управления, как в
     самолёте: у них же нет этих строчек, пока пилот будет их читать, он быстро
     решение не примет». Поэтому каждый показатель — прибор одного устройства:
     подпись, крупное значение, шкала с меткой нормы и след последних месяцев.
     Цвет появляется только тогда, когда стрелка вышла за норму: если красить
     всё подряд, красное перестаёт значить «смотри сюда». */
  .panel-main {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--card-gutter); margin-bottom: var(--card-gutter);
  }
  .panel-gauges {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--card-gutter);
  }
  .instrument {
    background: var(--color-surface); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm); padding: var(--space-6);
    display: flex; flex-direction: column; gap: var(--space-2);
    cursor: pointer; text-align: left; border: none; width: 100%;
    font-family: inherit; transition: box-shadow .15s ease, transform .15s ease;
  }
  .instrument:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
  .instrument:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  .instrument .name {
    font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--color-muted);
  }
  .instrument .reading {
    font-family: var(--font-heading); font-weight: 700;
    font-size: var(--text-2xl); line-height: var(--leading-2xl); color: var(--color-text);
  }
  .instrument--small .reading { font-size: var(--text-xl); line-height: var(--leading-xl); }
  .instrument .reading.bad { color: var(--color-danger); }
  .instrument .reading.good { color: var(--color-success); }
  .instrument .note {
    font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted);
  }
  .instrument svg { display: block; width: 100%; height: auto; }

  /* Полоса тревог: сколько приборов вне нормы и какие именно. Чип — вход в
     подробности, а не украшение. */
  .alarm-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
    background: var(--color-surface); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm); padding: var(--space-4) var(--space-6);
    margin-bottom: var(--card-gutter);
  }
  .alarm-bar .title {
    font-family: var(--font-heading); font-weight: 600; font-size: var(--text-md);
    color: var(--color-text);
  }
  .alarm-chip {
    border: none; font-family: inherit; cursor: pointer;
    background: rgba(208, 65, 58, .12); color: var(--color-danger);
    border-radius: var(--radius-sm); padding: 4px var(--space-3);
    font-size: var(--text-sm); line-height: var(--leading-sm);
  }
  .alarm-chip:hover { background: rgba(208, 65, 58, .2); }
  .alarm-chip--calm { background: rgba(26, 157, 108, .12); color: var(--color-success); }

  /* Разворот прибора. Выезжает справа и не уносит с экрана сам пульт:
     подробности нужны рядом с тем, из-за чего их открыли. */
  .drawer-backdrop {
    position: fixed; inset: 0; background: rgba(51, 58, 66, .35);
    opacity: 0; pointer-events: none; transition: opacity .18s ease; z-index: 40;
  }
  .drawer-backdrop.open { opacity: 1; pointer-events: auto; }
  .drawer {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100%);
    background: var(--color-surface); box-shadow: var(--shadow-md);
    transform: translateX(100%); transition: transform .18s ease;
    z-index: 41; overflow-y: auto; padding: var(--space-8) var(--space-6);
  }
  .drawer.open { transform: translateX(0); }
  .drawer-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--space-4); margin-bottom: var(--space-4);
  }
  .drawer-head h2 {
    font-family: var(--font-heading); font-weight: 600; font-size: var(--text-md);
    line-height: var(--leading-md); color: var(--color-text); margin: 0;
  }
  .drawer-close {
    border: none; background: none; cursor: pointer; color: var(--color-muted);
    font-size: var(--text-md); line-height: 1; padding: var(--space-2);
  }
  .drawer-close:hover { color: var(--color-text); }
  .drawer .big {
    font-family: var(--font-heading); font-weight: 700;
    font-size: var(--text-3xl); line-height: var(--leading-3xl); color: var(--color-text);
  }
  .drawer .big.bad { color: var(--color-danger); }
  .drawer .big.good { color: var(--color-success); }
  .drawer .fact-row {
    display: flex; justify-content: space-between; gap: var(--space-4);
    padding: var(--space-3) 0; border-bottom: var(--border-width) solid var(--color-border);
    font-size: var(--text-sm); line-height: var(--leading-sm);
  }
  .drawer .fact-row:last-of-type { border-bottom: none; }
  .drawer .fact-row .k { color: var(--color-muted); }
  .drawer .fact-row .v { color: var(--color-text); text-align: right; }

  /* Здоровье финансов: строка на показатель. Цвет только там, где он что-то
     значит (полярность суммы/статуса) — второй акцент §6 не вводим. */
  .health-value {
    font-family: var(--font-heading); font-variant-numeric: tabular-nums;
    white-space: nowrap; color: var(--color-text);
  }
  .health-value.bad { color: var(--color-danger); }
  .health-norm { color: var(--color-muted); font-size: var(--text-sm); white-space: nowrap; }
  .health-trend { color: var(--color-muted); font-size: var(--text-sm); white-space: nowrap; }

  .role-note {
    background: var(--color-surface); border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-6); color: var(--color-muted);
    font-size: var(--text-sm); margin-bottom: var(--space-6);
    box-shadow: var(--shadow-sm);
  }

  /* Воронка (закон Анны 25.08.2026: «было → стало» на каждой ступени).
     Ни одного нового цвета и шрифта — только токены. Цифры рисует
     --font-heading: моно в числах запрещено (design-system.md §7). */

  .funnel-card { margin-bottom: var(--card-gutter); }
  .funnel-card .funnel-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap;
  }
  .funnel-card .funnel-head .name {
    font-family: var(--font-heading); font-weight: 600;
    font-size: var(--text-lg); line-height: var(--leading-lg); color: var(--color-text);
  }
  .funnel-card .funnel-head .aside { color: var(--color-muted); font-size: var(--text-sm); }

  .funnel-steps {
    display: flex; align-items: stretch; gap: var(--space-2);
    overflow-x: auto; padding-bottom: var(--space-2);
  }
  .funnel-step { min-width: 128px; flex: 1 1 0; }
  .funnel-step .step-label {
    color: var(--color-muted); font-size: var(--text-xs); line-height: var(--leading-xs);
  }
  /* Сумма не переносится: «2 085 092» и «₽» на разных строках читаются как
     две разные величины и ломают ряд ступеней по высоте (правка 27.08.2026). */
  .funnel-step .step-value {
    font-family: var(--font-heading); font-weight: 700;
    font-size: var(--text-2xl); line-height: var(--leading-2xl);
    color: var(--color-text); font-variant-numeric: tabular-nums;
    margin-top: var(--space-1); white-space: nowrap;
  }
  .funnel-step .step-sub {
    color: var(--color-muted); font-size: var(--text-xs); line-height: var(--leading-xs);
    margin-top: var(--space-1); font-family: var(--font-heading);
    font-variant-numeric: tabular-nums;
  }
  .funnel-step .step-sub .up { color: var(--color-success); }
  .funnel-step .step-sub .down { color: var(--color-danger); }

  .funnel-gate {
    display: flex; flex-direction: column; justify-content: center;
    align-items: center; min-width: 96px; padding: 0 var(--space-2);
  }
  .funnel-gate .cr {
    font-family: var(--font-heading); font-weight: 600; font-size: var(--text-base);
    font-variant-numeric: tabular-nums; color: var(--color-accent); white-space: nowrap;
  }
  .funnel-gate .cr.low { color: var(--color-danger); }
  .funnel-gate .arrow { color: var(--color-border); font-size: var(--text-md); line-height: 1; }
  .funnel-gate .cr-was {
    color: var(--color-muted); font-size: var(--text-xs); white-space: nowrap;
    font-family: var(--font-heading); font-variant-numeric: tabular-nums;
  }

  .funnel-money {
    display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6);
    margin-top: var(--space-6); padding-top: var(--space-4);
    border-top: var(--border-width) solid var(--color-border);
    font-size: var(--text-sm); color: var(--color-muted);
  }
  .funnel-money b {
    font-family: var(--font-heading); font-weight: 600; color: var(--color-text);
    font-variant-numeric: tabular-nums;
  }
  .funnel-note { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-4); }

/* Воронка на телефоне разворачивается сверху вниз. В ряд пять ступеней с
   переходами занимают 1112 px, и прокрутка вбок означала, что «было → стало»
   нельзя увидеть целиком — а закон Анны 25.08.2026 требует ровно сравнения
   (прогон mobile_screens_check, 28.08.2026). */
@media (max-width: 720px) {
  .funnel-steps { flex-direction: column; overflow-x: visible; }
  .funnel-step { min-width: 0; }
  .funnel-step .step-value { white-space: normal; }
  .funnel-gate { min-width: 0; flex-direction: row; gap: var(--space-2); padding: var(--space-2) 0; }
}