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

  .page-intro {
    color: var(--color-muted); font-size: var(--text-base);
    line-height: var(--leading-md); max-width: 720px; 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); }
  .page-section { margin-bottom: var(--space-8); }

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

  /* Свод по неделям. Широкая таблица прокручивается внутри своей карточки —
     страница по горизонтали не едет никогда. */
  .weeks-scroll { overflow-x: auto; }
  .weeks-table { border-collapse: collapse; width: 100%; min-width: 720px; }
  .weeks-table th, .weeks-table td {
    padding: var(--space-3) var(--space-4); text-align: right;
    border-bottom: var(--border-width) solid var(--color-border);
    white-space: nowrap;
  }
  .weeks-table th.row-label, .weeks-table td.row-label {
    text-align: left; color: var(--color-text); font-weight: 500;
    position: sticky; left: 0; background: var(--color-surface); z-index: 1;
  }
  .weeks-table thead th {
    color: var(--color-muted); font-size: var(--text-xs); font-weight: 500;
    line-height: var(--leading-xs);
  }
  .weeks-table thead th.current { color: var(--color-accent); }
  .weeks-table tbody tr:last-child td { border-bottom: none; }
  .weeks-table tr.total td { font-weight: 600; }
  .weeks-table tr.opening td, .weeks-table tr.closing td { background: rgba(47, 111, 237, .04); }
  .cell-plan {
    display: block; font-family: var(--font-heading); font-variant-numeric: tabular-nums;
    color: var(--color-accent);
  }
  .cell-fact {
    display: block; font-family: var(--font-heading); font-variant-numeric: tabular-nums;
    color: var(--color-text);
  }
  .cell-fact.muted { color: var(--color-muted); }
  .cell-fact.income, .cell-plan.income { color: var(--color-success); }
  .cell-fact.outgo, .cell-plan.outgo { color: var(--color-danger); }
  .cell-note { display: block; font-size: var(--text-xs); color: var(--color-muted); }
  .cell-plan.negative, .cell-fact.negative { color: var(--color-danger); }

  .gap-bar {
    display: flex; align-items: center; gap: var(--space-4);
    background: rgba(208, 65, 58, .10); color: var(--color-danger);
    border-radius: var(--radius-md); padding: var(--space-4) var(--space-6);
    margin-bottom: var(--space-6); font-size: var(--text-md);
  }
  .gap-bar.ok { background: rgba(26, 157, 108, .10); 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); line-height: var(--leading-xs); margin-top: 2px;
  }
  .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;
    color: var(--color-muted); white-space: nowrap;
  }

  .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); }
  .pill-confirm { background: rgba(208, 65, 58, .12); color: var(--color-danger); }

  .plan-form {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--space-4); align-items: start;
  }
  .plan-form .field { margin: 0; }
  .plan-form-actions {
    display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-6);
  }
  .form-hint {
    font-size: var(--text-xs); line-height: var(--leading-xs);
    color: var(--color-muted); margin-top: var(--space-1);
  }
  .file-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
  .import-report {
    margin-top: var(--space-6); font-size: var(--text-sm);
    line-height: var(--leading-sm); color: var(--color-muted);
  }
  .import-report b { color: var(--color-text); }
  .import-report ul { margin: var(--space-2) 0 0; padding-left: var(--space-6); }

  .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);
  }

/* На телефоне таблица недель разбирается в карточки (общий приём
   .cards-on-mobile в layout.css): 917 px матрицы в 358 видимых не помещаются
   никак, и до 28.08.2026 её читали прокруткой вбок. min-width снимается — он
   и распирал строку. */
@media (max-width: 720px) {
  .weeks-table { min-width: 0; }
}