/* Оформление в духе Финтабло: светло-сиреневый фон, белые панели, синий акцент */

:root {
    --bg: #eff0f8;
    --panel: #ffffff;
    --border: #e4e6f2;
    --text: #2c2f45;
    /* Серый для второстепенного текста. Был #8b90a8 — контраст с белым
       около 3:1, и подписи под цифрами читались с трудом. Сейчас 6:1:
       текст остаётся второстепенным на вид, но читается без прищура. */
    --muted: #585d78;
    --accent: #4a5bc4;
    --accent-soft: #eceefb;
    --accent-dark: #3b4aa3;
    --income: #1f9d67;
    --outcome: #d9534f;
    --transfer: #7a6ff0;
    --row-hover: #f7f8fd;
    --shadow: 0 1px 3px rgba(44, 47, 69, .06), 0 6px 20px rgba(44, 47, 69, .04);
    --radius: 10px;
    --sidebar: 208px;
}

/* Половина «Люди» живёт на том же скине, но со своим акцентом: по цвету меню
   сразу видно, смотришь ты на деньги по банку или на людей по журналу записей. */
body.section-people {
    --accent: #1f8f6a;
    --accent-soft: #e5f4ee;
    --accent-dark: #17714f;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 14px/1.45 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- каркас ---------- */

.layout { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar);
    flex: 0 0 var(--sidebar);
    background: var(--panel);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    padding-bottom: 24px;
}

/* Граница между меню и содержимым: её можно тянуть мышкой.
   Названия отчётов в разделе «Люди» длинные и переносятся в две строки —
   одной ширины на оба раздела не хватает, поэтому её выбирает человек,
   а выбор запоминается в браузере (см. static/layout.js). */
.sidebar-resizer {
    flex: 0 0 5px;
    position: sticky;
    top: 0;
    height: 100vh;
    cursor: col-resize;
    background: var(--border);
    background-clip: content-box;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    transition: background-color .12s;
    z-index: 25;
}

.sidebar-resizer:hover,
.sidebar-resizer.dragging { background-color: var(--accent); }

/* Пока тянут — курсор не должен превращаться в текстовый над таблицами,
   а выделение текста мешает попасть в нужную ширину. */
body.resizing { cursor: col-resize; user-select: none; }

.logo {
    display: flex; align-items: center; gap: 8px;
    padding: 16px 18px; font-weight: 700; font-size: 17px; color: var(--accent);
}
.logo .mark {
    width: 26px; height: 26px; border-radius: 7px; background: var(--accent);
    color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center;
    flex: 0 0 26px;
}
/* Линия пульса рисуется currentColor, а цвет здесь белый: один и тот же файл
   знака работает и на синей плитке «Денег», и на зелёной у «Людей». */
.logo .mark svg { width: 20px; height: 20px; display: block; }


.nav-group { margin-top: 6px; }
.nav-title {
    padding: 9px 18px; color: var(--text); font-weight: 600; font-size: 13px;
    display: flex; align-items: center; gap: 8px;
}
.nav a {
    display: block; padding: 7px 18px 7px 40px; color: var(--text);
    font-size: 13.5px; border-left: 3px solid transparent;
}
.nav a:hover { background: var(--row-hover); text-decoration: none; }
.nav a.active {
    color: var(--accent); background: var(--accent-soft);
    border-left-color: var(--accent); font-weight: 600;
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    background: var(--panel); border-bottom: 1px solid var(--border);
    padding: 11px 24px; display: flex; align-items: center; gap: 20px;
    position: sticky; top: 0; z-index: 20;
}
.topbar .biz { color: var(--muted); font-size: 13.5px; }
.topbar .money { font-size: 17px; font-weight: 600; margin-left: auto; }
.topbar .money small { color: var(--muted); font-weight: 400; font-size: 12px; display: block; }

.content { padding: 22px 24px 60px; }

h1 { font-size: 25px; margin: 0 0 18px; font-weight: 600; }
h2 { font-size: 17px; margin: 0 0 14px; font-weight: 600; }

/* ---------- панели ---------- */

.panel {
    background: var(--panel); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 16px;
}
.panel.tight { padding: 12px 16px; }
/* Кнопка, открывающая три кнопки ввода операции. На большом экране она
   не нужна: там три кнопки помещаются и стоят открытыми. */
/* .btn объявлен ниже и с тем же весом перебивал display: none —
   кнопка вылезала на большом экране, где прятать нечего. */
.btn.add-ops-btn { display: none; }
.panel-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 16px; }
.card { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; }
.card .label { color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.card .value { font-size: 21px; font-weight: 600; }

/* ---------- элементы управления ---------- */

.btn {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    border: 1px solid var(--border); background: var(--panel); color: var(--text);
    padding: 7px 14px; border-radius: 8px; font-size: 13.5px; font-family: inherit;
    text-decoration: none;
}
.btn:hover { background: var(--row-hover); text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-income { background: var(--income); border-color: var(--income); color: #fff; }
.btn-outcome { background: var(--outcome); border-color: var(--outcome); color: #fff; }
.btn-transfer { background: var(--transfer); border-color: var(--transfer); color: #fff; }
.btn-income:hover, .btn-outcome:hover, .btn-transfer:hover { opacity: .9; }
.btn-sm { padding: 4px 10px; font-size: 12.5px; }

/* Кнопки исхода: цвет говорит, чем кончится нажатие, а не украшает ряд.
   Заливка мягкая, а не сплошная, — на планёрке рядом стоят три кнопки,
   и сплошной светофор перетягивает внимание с текста вопроса на себя.
   Синий — разговор, зелёный — вопрос закрыт решением, красный — снят
   без решения, песочный — решение не сработало и вопрос вернулся. */
.btn-talk { background: var(--accent-soft); border-color: #c9cff2; color: var(--accent-dark); }
.btn-talk:hover { background: #e0e4fa; }
.btn-ok { background: #e6f5ee; border-color: #b9e0cd; color: #146b48; }
.btn-ok:hover { background: #d8eee3; }
.btn-drop { background: #fdeceb; border-color: #f3c6c4; color: #a33b37; }
.btn-drop:hover { background: #f9dedc; }
.btn-back { background: #fdf3e0; border-color: #ecd8ac; color: #8a6415; }
.btn-back:hover { background: #f8ead0; }

.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tabs a {
    padding: 6px 14px; border-radius: 8px; color: var(--text); font-size: 13.5px;
    border: 1px solid transparent;
}
.tabs a:hover { background: var(--row-hover); text-decoration: none; }
.tabs a.active { background: var(--accent); color: #fff; }

input[type=text], input[type=date], input[type=number], input[type=month],
input[type=password], select, textarea {
    border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px;
    font: inherit; font-size: 13.5px; color: var(--text); background: #fff;
    max-width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
label { font-size: 13px; color: var(--muted); display: block; margin-bottom: 3px; }

.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.filters .field { display: flex; flex-direction: column; }

/* ---------- таблицы ---------- */

/* Тень у правого края, пока таблица не докручена до конца: без неё
   на телефоне не видно, что за краем есть ещё колонки. Тень рисуется
   фоном самой рамки и исчезает сама, когда прокручивать больше нечего. */
/* Таблица занимает всю ширину обёртки.
   Правило width: 100% стоит у table.grid и table.report, но шесть таблиц
   в разделах «Директор» и «Совет» написаны голым <table>. Внутри
   .table-wrap с overflow-x они сжимались по содержимому: на планшете
   1280 таблица трекера проектов занимала 319 пикселей из 1019, колонка
   «Проект» — 52, названия ломались на три строки, а справа стояло
   пустое поле в половину окна. */
.table-wrap > table { width: 100%; }

.table-wrap {
    overflow-x: auto;
    background:
        linear-gradient(to right, var(--panel) 30%, rgba(255, 255, 255, 0)) left / 24px 100% no-repeat,
        linear-gradient(to left, var(--panel) 30%, rgba(255, 255, 255, 0)) right / 24px 100% no-repeat,
        radial-gradient(farthest-side at 0 50%, rgba(44, 47, 69, .14), transparent) left / 11px 100% no-repeat,
        radial-gradient(farthest-side at 100% 50%, rgba(44, 47, 69, .14), transparent) right / 11px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
}
table.grid { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.grid th {
    text-align: right; color: var(--muted); font-weight: 600; font-size: 12px;
    text-transform: uppercase; letter-spacing: .03em;
    padding: 9px 10px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.grid th:first-child, table.grid td:first-child { text-align: left; }
table.grid td { padding: 9px 10px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
table.grid tbody tr:hover { background: var(--row-hover); }
table.grid td.text, table.grid th.text { text-align: left; white-space: normal; }

.num { font-variant-numeric: tabular-nums; }
.income { color: var(--income); }
.outcome { color: var(--outcome); }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }

.badge {
    display: inline-block; padding: 1px 8px; border-radius: 20px; font-size: 11.5px;
    background: var(--accent-soft); color: var(--accent-dark);
}
.badge.warn { background: #fdf0e3; color: #b4700f; }
.badge.grey { background: #f0f1f6; color: var(--muted); }

/* важность отклонения: красный — смотреть сразу, жёлтый — при разборе месяца */
.badge.sev-high { background: #fdeaea; color: #b02a2a; }
.badge.sev-medium { background: #fdf0e3; color: #b4700f; }
.badge.sev-low { background: #f0f1f6; color: var(--muted); }

.alert-row td { vertical-align: top; padding-top: 10px; padding-bottom: 10px; }
.alert-row .badge { margin-right: 6px; }

button.mini {
    font: inherit; font-size: 12.5px; padding: 4px 10px; margin-right: 4px;
    border: 1px solid var(--border); border-radius: 7px;
    background: #fff; color: var(--text); cursor: pointer;
}
button.mini:hover { background: var(--accent-soft); border-color: transparent; }

.inline-form { display: inline-flex; gap: 8px; align-items: center; }

/* ---------- отчёты ---------- */

table.report { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.report th {
    position: sticky; top: 0; background: var(--panel); z-index: 2;
    text-align: right; color: var(--muted); font-weight: 600; font-size: 12px;
    text-transform: uppercase; padding: 10px 12px; border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
table.report th:first-child { text-align: left; left: 0; z-index: 3; min-width: 280px; }
table.report td { padding: 8px 12px; text-align: right; white-space: nowrap; border-bottom: 1px solid #f2f3fa; }
table.report td:first-child {
    text-align: left; position: sticky; left: 0; background: var(--panel); z-index: 1;
}
table.report tr:hover td { background: var(--row-hover); }
table.report tr.group > td { font-weight: 600; }
table.report tr.subtotal > td, table.report tr.total > td {
    background: #f7f8fd; font-weight: 600; border-top: 1px solid var(--border);
}
table.report tr.subtotal td:first-child, table.report tr.total td:first-child { background: #f7f8fd; }
table.report tr.total > td { font-size: 14.5px; }
table.report tr.ratio td { color: var(--muted); font-size: 12.5px; }
table.report tr.ratio td:first-child { padding-left: 26px; }
table.report .lvl1 td:first-child { padding-left: 30px; font-weight: 400; }
table.report .lvl2 td:first-child { padding-left: 48px; font-weight: 400; }
table.report .lvl3 td:first-child { padding-left: 66px; font-weight: 400; }

.zero { color: #c9cbd8; }

/* редактируемая ячейка: выглядит как текст, списком становится по клику */
.cell-edit {
    display: inline-block; border: 1px solid transparent; padding: 2px 6px;
    border-radius: 6px; cursor: pointer; min-width: 90px;
}
.cell-edit:hover { border-color: var(--border); background: #fff; }
.cell-edit.unset { color: #b4700f; background: #fdf6ec; }
.cell-edit.saved { border-color: var(--income); background: #eaf7f0; }
.cell-edit.failed { border-color: var(--outcome); background: #fdecec; }
select.cell-select { max-width: 260px; font-size: 13px; padding: 2px 4px; }

/* ---------- вспомогательное ---------- */

.pagination { display: flex; gap: 6px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.pagination a, .pagination span {
    padding: 5px 10px; border-radius: 7px; border: 1px solid var(--border);
    background: #fff; font-size: 13px;
}
.pagination .current { background: var(--accent); color: #fff; border-color: var(--accent); }

.empty { padding: 40px; text-align: center; color: var(--muted); font-size: 14px; }

.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 13.5px; }
.flash.ok { background: #e8f7ef; color: #1a7a4f; }
.flash.err { background: #fdeceb; color: #a8322e; }

/* Итог обмена с ZenMoney — отметка рядом с кнопкой. Общий баннер сверху
   сдвигал всю страницу вниз ради «новых: 0». */
.sync-chip {
    background: #e8f7ef; color: #1a7a4f; border-radius: 8px;
    padding: 6px 10px; font-size: 12px; white-space: nowrap; margin-top: 5px;
}

.dropzone {
    border: 2px dashed var(--border); border-radius: var(--radius); padding: 34px;
    text-align: center; color: var(--muted); background: #fbfbfe;
}
.dropzone.over { border-color: var(--accent); background: var(--accent-soft); }

/* ---------- панель управления отчётом ---------- */

.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }

.period-nav { display: flex; align-items: center; gap: 2px; position: relative; }
.period-nav .step {
    width: 28px; height: 32px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: 8px; color: var(--muted);
    background: #fff; text-decoration: none; font-size: 16px;
}
.period-nav .step:hover { background: var(--accent-soft); color: var(--accent); text-decoration: none; }
.period-btn {
    background: var(--accent-soft); border: 1px solid transparent; color: var(--accent-dark);
    font: inherit; font-weight: 600; font-size: 13.5px; padding: 7px 16px;
    border-radius: 8px; cursor: pointer; min-width: 150px;
}
.period-btn:hover { background: #e2e5f9; }

.period-menu {
    display: none; position: absolute; top: 40px; left: 30px; z-index: 40;
    background: #fff; border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 10px 30px rgba(44, 47, 69, .16); min-width: 240px; padding: 6px;
}
.period-menu.open { display: block; }
.period-menu .presets { display: flex; flex-direction: column; }
.period-menu .presets a {
    padding: 7px 12px; border-radius: 7px; color: var(--text); font-size: 13.5px;
}
.period-menu .presets a:hover { background: var(--row-hover); text-decoration: none; }
.period-custom {
    display: flex; align-items: center; gap: 6px; padding: 10px 8px 4px;
    border-top: 1px solid var(--border); margin-top: 6px;
}
.period-custom input[type=date] { width: 130px; }

.icon-btn {
    width: 34px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: 8px; background: #fff; cursor: pointer;
    color: var(--muted); font-size: 15px; text-decoration: none; position: relative;
}
.icon-btn:hover { background: var(--accent-soft); color: var(--accent); text-decoration: none; }
.icon-btn sup { color: var(--accent); font-size: 18px; line-height: 0; }

.inline-form { display: inline-flex; }
.inline-check { color: var(--text); font-size: 13px; display: flex; align-items: center; gap: 5px; }

.tabs-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }

.filters-box {
    background: #fafbfe; border: 1px solid var(--border); border-radius: 10px;
    padding: 12px 14px; margin-bottom: 14px;
}
.filters-box.hidden { display: none; }
/* Кнопка, открывающая фильтры. Точка внутри — признак, что фильтр стоит:
   свёрнутый фильтр иначе незаметно врёт про число строк. */
.filters-btn { margin-bottom: 12px; }
.filters-btn::after { content: ' ▾'; color: var(--muted); }
.filters-btn .dot { color: var(--accent); font-weight: 700; }

/* ---------- модальное окно ---------- */

.modal {
    display: none; position: fixed; inset: 0; z-index: 100;
    background: rgba(44, 47, 69, .35); align-items: center; justify-content: center;
}
.modal.open { display: flex; }
.modal-box {
    background: #fff; border-radius: 12px; padding: 22px 24px; width: min(520px, 92vw);
    box-shadow: 0 20px 60px rgba(44, 47, 69, .25);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.modal-head h2 { margin: 0; }
.modal-foot { margin-top: 18px; display: flex; align-items: center; gap: 12px; }
.check-row {
    display: flex; align-items: center; gap: 9px; padding: 9px 0;
    color: var(--text); font-size: 13.5px; margin: 0; cursor: pointer;
    border-bottom: 1px solid #f2f3fa;
}

/* ---------- сворачивание групп ---------- */

tr.toggler > td:first-child, tr.row-toggler > td:first-child { cursor: pointer; }
.caret {
    display: inline-block; width: 0; height: 0; margin-right: 8px; vertical-align: middle;
    border-left: 5px solid var(--muted); border-top: 4px solid transparent;
    border-bottom: 4px solid transparent; transform: rotate(90deg);
    transition: transform .12s;
}
tr.collapsed .caret { transform: rotate(0deg); }

.pct { display: block; font-size: 12px; color: var(--muted); }

/* сумма-ссылка: открывает операции, из которых она сложилась */
a.drill { color: inherit; text-decoration: none; border-bottom: 1px dashed transparent; }
a.drill:hover { color: var(--accent); border-bottom-color: var(--accent); text-decoration: none; }

/* ---------- готовность правил зарплаты ---------- */

.rules-readiness {
    margin-top: 12px; padding: 10px 12px; border-radius: 8px; font-size: 12.5px;
}
.rules-readiness.ok { background: #f4f8f4; border: 1px solid #dbe7db; }
.rules-readiness.wait { background: #fdf6ec; border: 1px solid #f0e0c8; }

/* ---------- сверка выручки под ОПиУ ---------- */

/* Плашка стоит под таблицей, а не над ней: сначала цифры прибыли, за которыми
   пришли, потом оговорка о том, сколько из них дошло до счёта. */
.revenue-check {
    margin-top: 14px; padding: 12px 14px; border-radius: 10px;
    font-size: 13px; line-height: 1.5;
}
.revenue-check.ok { background: #f4f8f4; border: 1px solid #dbe7db; }
.revenue-check.alarm { background: #fdeaea; border: 1px solid #f2cdcd; }
.revenue-check.alarm b { color: #b02a2a; }
.revenue-check .muted { font-size: 12px; margin-top: 6px; }
.revenue-check-list { margin: 8px 0 0; padding-left: 20px; }
.revenue-check-list li { margin-bottom: 3px; }
.revenue-check-note { border-top: 1px solid rgba(0, 0, 0, .07); padding-top: 8px; }

/* ---------- тумблер и инструкция ---------- */

.instruction-toggle {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 16px 0 10px; color: var(--text); font-size: 13.5px;
}
.switch {
    width: 40px; height: 22px; border-radius: 20px; border: 0; background: #d3d6e6;
    position: relative; cursor: pointer; padding: 0; transition: background .15s;
}
.switch i {
    position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
    background: #fff; border-radius: 50%; transition: left .15s;
}
.switch.on { background: var(--accent); }
.switch.on i { left: 21px; }

/* Справку читают, когда что-то непонятно, — она обязана читаться легко.
   Серый текст на белом фоне выглядит аккуратно и не читается вовсе. */
.instruction .lead { color: var(--text); margin: 0 0 18px; font-size: 14.5px; }
.instruction-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;
}
.instruction-block h3 { font-size: 14px; margin: 0 0 8px; }
.instruction-block ul { margin: 0; padding-left: 18px; }
.instruction-block li { margin-bottom: 7px; font-size: 13.5px; color: var(--text); line-height: 1.5; }

/* ---------- закрытие месяца ---------- */

.close-progress { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.close-progress .bar {
    width: 180px; height: 8px; border-radius: 6px; background: var(--border); overflow: hidden;
}
.close-progress .bar i { display: block; height: 100%; background: var(--income); }

.task-list { display: flex; flex-direction: column; }
.task {
    display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid #f2f3fa;
    align-items: flex-start;
}
.task:last-child { border-bottom: 0; }
.task-check input { width: 17px; height: 17px; cursor: pointer; margin-top: 2px; }
.task-body { flex: 1; min-width: 0; }
.task-title { font-weight: 600; font-size: 14px; }
.task-done .task-title { text-decoration: line-through; color: var(--muted); font-weight: 400; }
.task-hint { color: #4a4e69; font-size: 12.5px; margin-top: 4px; }
.task-meta {
    display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px;
    font-size: 11.5px; color: var(--muted);
}
.task-auto {
    margin-top: 8px; font-size: 12.5px; padding: 6px 10px; border-radius: 7px;
    display: inline-block;
}
.task-count {
    display: inline-block; min-width: 40px; text-align: center; font-size: 11.5px;
    padding: 2px 6px; border-radius: 20px; background: #f0f1f6; color: var(--muted);
}
.task-count.full { background: #eaf7f0; color: #1a7a4f; }

.direction-marks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.direction-marks .mark {
    display: inline-flex; align-items: center; gap: 5px; margin: 0;
    padding: 3px 10px 3px 7px; border: 1px solid var(--border); border-radius: 20px;
    font-size: 12px; color: var(--text); cursor: pointer; background: #fff;
}
.direction-marks .mark:hover { border-color: var(--accent); }
.direction-marks .mark.on { background: #eaf7f0; border-color: #a8dcc0; color: #1a7a4f; }
.direction-marks input { width: 13px; height: 13px; cursor: pointer; }

.task-auto.ok { background: #eaf7f0; color: #1a7a4f; }
.task-auto.bad { background: #fdf0e3; color: #b4700f; }
.task-auto a { margin-left: 6px; }

/* простая столбчатая диаграмма без внешних библиотек */
.chart { display: flex; align-items: flex-end; gap: 10px; height: 190px; padding-top: 8px; }
.chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.chart-col .bars {
    flex: 1; width: 100%; display: flex; align-items: flex-end;
    justify-content: center; gap: 3px;
}
.chart .bar { width: 44%; max-width: 26px; border-radius: 3px 3px 0 0; min-height: 2px; }
.chart .bar-in { background: var(--income); opacity: .85; }
.chart .bar-out { background: var(--outcome); opacity: .75; }
.chart-col:hover .bar { opacity: 1; }
.chart-label { font-size: 12px; color: var(--muted); padding-top: 6px; }
.legend-dot {
    display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px;
}
.legend-dot.in { background: var(--income); }
.legend-dot.out { background: var(--outcome); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* minmax(0, 1fr), а не 1fr: иначе широкая таблица внутри колонки
   растягивает саму колонку, и вбок уезжает вся страница, а не таблица. */
.grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }

/* Правый угол шапки: сосед, шестерёнка, дверь — ровно в этом порядке и
   ровно так же на Пульте (решение Сергея 20.08.2026). Имя и роль отсюда
   убраны: они занимали место в самой дорогой части экрана, а прочитать их
   можно в профиле — туда и ведёт шестерёнка, там же управление
   пользователями. */
.whoami-wrap { margin-left: auto; }
/* Список в шторке нужен только на телефоне: на большом экране он стоит
   в шапке, а в меню был бы вторым таким же. */
.whoami-side { display: none; }
.whoami { display: flex; align-items: center; gap: 8px; font-size: 13px; }

/* Три угловые кнопки одного размера: разнобой в углу читается как
   случайность, а не как порядок. Квадрат 34 — палец на телефоне попадает,
   на большом экране не выпирает. */
.corner {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 9px;
    border: 1px solid var(--border); border-radius: 10px;
    color: var(--muted); font-size: 16px; line-height: 1;
    background: transparent;
}
.corner:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
/* Сосед — со словом: иконка увела бы в другую систему молча, а переход
   туда стоит объявлять. Шрифт мельче значка, чтобы кнопки были одной высоты. */
.corner.neighbour { font-size: 13px; font-weight: 600; white-space: nowrap; }

/* Кнопка, выглядящая ссылкой: форма нужна ради POST, а рисовать её кнопкой
   в плотной таблице незачем. */
button.link {
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--accent); font: inherit; font-size: 12.5px;
}
button.link:hover { text-decoration: underline; }

/* Таблица «свойство — значение» в профиле: заголовки слева и обычным
   текстом, иначе колонка подписей выглядит как шапка отчёта. */
table.grid.props th {
    text-align: left; text-transform: none; letter-spacing: 0;
    font-size: 12.5px; width: 45%; font-weight: 400;
}
table.grid.props td { text-align: left; }

/* Платёжный календарь: дни — колонки, время идёт слева направо.
   Тридцать одна колонка не помещается в экран, поэтому таблица прокручивается
   вбок, а колонка с названием строки остаётся приклеенной — иначе, доехав
   до 25-го числа, не понять, чей это остаток. */
/* Шрифт мельче обычного: в строке «Вся группа» стоят шестизначные суммы,
   а колонок 31. При масштабе браузера 125 % они первыми упирались
   в границу клетки и превращались в «1...». */
table.calendar-grid { font-size: 11px; white-space: nowrap; }
table.calendar-grid th, table.calendar-grid td { padding: 3px 2px; }
table.calendar-grid .sticky-col {
    position: sticky; left: 0; z-index: 2;
    background: #fff; text-align: left; min-width: 144px;
    box-shadow: 1px 0 0 var(--line);
}
table.calendar-grid thead .sticky-col, table.calendar-grid .group .sticky-col {
    background: var(--head-bg, #f6f7fb);
}
/* сегодняшний день — вертикальная линия, по ней видно границу факта и прогноза */
table.calendar-grid .is-today { box-shadow: inset 2px 0 0 var(--accent); }
table.calendar-grid .is-weekend { background: #fafbfd; }
/* провал: столько на счёте не будет */
table.calendar-grid .short { background: #fdecec; color: #a8323b; font-weight: 600; }

/* ---------- финансовый директор ---------- */

/* Окно ФД: разговор занимает главную колонку, всё вспомогательное — узкую
   боковую. На узком экране колонки складываются в одну, разговор остаётся
   первым: за ним сюда и приходят. */
.fd-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; }
@media (max-width: 1100px) { .fd-layout { grid-template-columns: 1fr; } }

.fd-chat { display: flex; flex-direction: column; gap: 14px; }
.fd-msg { border-radius: 10px; padding: 12px 14px; }
.fd-user { background: var(--accent-soft); }
.fd-fd { background: var(--row-hover); border: 1px solid var(--border); }
.fd-error { background: #fdecec; color: #a8323b; }
.fd-who {
    font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--muted); margin-bottom: 6px;
}
.fd-who .muted { text-transform: none; letter-spacing: 0; }

.fd-body > *:first-child { margin-top: 0; }
.fd-body > *:last-child { margin-bottom: 0; }
.fd-body p { margin: 8px 0; }
.fd-body h3, .fd-body h4, .fd-body h5 { margin: 14px 0 6px; font-size: 15px; }
.fd-body ul, .fd-body ol { margin: 8px 0; padding-left: 22px; }
.fd-body li { margin: 3px 0; }
.fd-body code { background: #f0f1f6; border-radius: 4px; padding: 1px 5px; font-size: 12.5px; }
.fd-body pre { background: #f7f8fd; border-radius: 8px; padding: 10px 12px; overflow-x: auto; }
.fd-body pre code { background: none; padding: 0; }
.fd-body table { margin: 10px 0; }
/* таблица в ответе не должна распирать страницу вбок */
.fd-body table { display: block; max-width: 100%; overflow-x: auto; }
.fd-report { font-size: 14.5px; }

.fd-ask textarea {
    width: 100%; border: 1px solid var(--border); border-radius: 8px;
    padding: 10px 12px; font: inherit; resize: vertical;
}
.fd-ask textarea:focus { outline: none; border-color: var(--accent); }

.fd-side .panel { margin-bottom: 14px; }
.fd-side h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--muted); margin: 0 0 8px; }
.fd-list { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; }
.fd-list li { padding: 4px 0; border-top: 1px solid var(--border); }
.fd-list li:first-child { border-top: none; }
.fd-list .muted { font-size: 11.5px; margin-left: 4px; }
.fd-current > a { font-weight: 600; }

/* Кто делает задачу чек-листа: цвет отвечает на вопрос «это навсегда или
   пока». Серое — работа человека по существу, синее — недоделка программы. */
.badge.fd-kind-hands { background: #f0f1f6; color: #5c6178; }
.badge.fd-kind-part { background: #eef6ff; color: #2a6099; }
.badge.fd-kind-auto { background: #e8f7ef; color: #1a7a4f; }
.badge.fd-kind-todo { background: #fdf0e3; color: #b4700f; }
.badge.fd-kind-fd { background: var(--accent-soft); color: var(--accent-dark); }

/* Окно-мишень вместо системного поля файла: то показывает «Файл не выбран»
   и не поддаётся оформлению ни в одном браузере. Сюда файлы и перетаскивают,
   и выбирают кликом — можно сразу несколько. */
.fd-drop {
    display: block; padding: 14px 10px; text-align: center; cursor: pointer;
    border: 1.5px dashed var(--border); border-radius: 8px;
    font-size: 12.5px; color: var(--text);
}
.fd-drop .muted { font-size: 11.5px; }
.fd-drop.drag { border-color: var(--accent); background: var(--accent-soft); }
.fd-file-name { display: block; margin-top: 6px; }

/* Кружок ожидания. Нужен там, где страница честно ждёт ответа минуту-полторы:
   без движения на экране это неотличимо от «кнопка не нажалась». */
.spinner {
    display: inline-block; width: 12px; height: 12px; vertical-align: -1px;
    border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%; animation: spin .7s linear infinite; margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.fd-wait { display: none; align-items: center; gap: 7px; }

/* Пока советник думает, окно висит на отправленной форме минуту-полторы.
   Крутящееся колесо тут не годится: оно одинаково выглядит и на первой
   секунде, и на сотой, и через полминуты человек начинает думать, что
   программа зависла. Поэтому вместо колеса — пульс, а рядом живые цифры:
   сколько идёт время и сколько советник уже надумал. */
.claude-pulse {
    display: inline-block; width: 13px; height: 13px; flex: none;
    background: #d97757; opacity: .85;
    animation: claude-pulse 1.6s ease-in-out infinite;
    /* восьмилучевая звезда: узнаваемый значок, а не безликая точка */
    clip-path: polygon(50% 0, 60% 34%, 93% 22%, 72% 50%, 93% 78%, 60% 66%,
                       50% 100%, 40% 66%, 7% 78%, 28% 50%, 7% 22%, 40% 34%);
}
@keyframes claude-pulse {
    0%, 100% { transform: scale(.8) rotate(0deg); opacity: .55; }
    50%      { transform: scale(1.15) rotate(45deg); opacity: 1; }
}
/* Цифры не должны прыгать вправо-влево при смене «1 м 9 с» на «1 м 10 с» */
.fd-wait-time { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
    .claude-pulse { animation-duration: 3.2s; }
}

/* Ответ после перезагрузки не должен оказываться под шапкой */
#last { scroll-margin-top: 24px; }

/* Предупреждение строкой. Раньше такие плашки рисовались классом .empty
   с отступом в 40 пикселей и текстом по центру — на календаре это съедало
   треть экрана ради одного предложения. */
.alert-line {
    padding: 10px 14px; margin: 12px 0; border-radius: 8px;
    font-size: 13.5px; line-height: 1.45; border-left: 3px solid transparent;
}
.alert-line.bad { background: #fdecec; color: #a8323b; border-left-color: #d9534f; }
.alert-line.warn { background: #fdf0e3; color: #8a5a10; border-left-color: #e0a800; }
.alert-line.good { background: #e8f7ef; color: #1a7a4f; border-left-color: #1f9d67; }

/* Две таблицы календаря — остатки по ИП и платежи одного счёта — стоят одна
   под другой и читаются вместе: «в этот день провал, вот какой платёж в нём
   стоит». Пока ширины колонок считались по содержимому, дни в них разъезжались,
   и сравнивать приходилось линейкой. Теперь сетка одинаковая и фиксированная,
   а вместе с ней пропал и горизонтальный ползунок у верхней таблицы. */
table.calendar-grid { table-layout: fixed; width: 100%; }
table.calendar-grid .sticky-col { width: 144px; min-width: 144px; }
/* последняя колонка — «Худший день» и «За месяц»; заголовку можно
   в две строки, иначе он обрезается раньше всех */
table.calendar-grid thead th:last-child,
table.calendar-grid tbody td:last-child,
table.calendar-grid tfoot td:last-child { width: 78px; }
table.calendar-grid thead th:last-child { white-space: normal; }
table.calendar-grid th, table.calendar-grid td { overflow: hidden; text-overflow: ellipsis; }

/* Список месяцев в выпадающем меню — в три колонки: полтора года одной
   колонкой не помещаются на экран. */
.period-menu.month-menu .presets {
    display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 0 4px;
}
.period-menu.month-menu .presets a.current { font-weight: 700; background: var(--accent-soft); }

/* Ячейка с пояснением: текст переносится по строкам и не растягивает таблицу.
   Обычные ячейки отчёта живут в nowrap — числа рвать по строкам нельзя, —
   но объяснение в одну строку выталкивало страницу за экран, и появлялась
   горизонтальная прокрутка ради одного столбца. */
table.report td.wrap, table.grid td.wrap {
    white-space: normal; max-width: 520px; line-height: 1.4; text-align: left;
}

/* Подсказка у цифры — знак вопроса с всплывающим объяснением.
   Раньше жила в стилях раздела «Люди» и в «Деньгах» не работала:
   значок был, объяснение не появлялось. Всплывашка на CSS без
   скриптов, открывается и по наведению, и по фокусу с клавиатуры. */
.hint {
    display: inline-flex; position: relative; color: var(--muted);
    cursor: help; vertical-align: middle; margin-left: 4px; outline: none;
}
.hint:hover, .hint:focus { color: #4a5bc4; }
.hint-pop {
    /* Позиция считается в layout.js в момент показа, отсюда fixed. Раньше
       всплывашка стояла absolute внутри значка, и от этого было две беды:
       в покое она растягивала документ на 11 пикселей вправо (страница ехала
       вбок), а внутри таблицы с прокруткой её обрезало рамкой — объяснение
       было видно наполовину. Fixed не участвует в ширине страницы
       и не обрезается ничем. */
    position: fixed; left: 0; top: 0; z-index: 40;
    width: 280px; max-width: calc(100vw - 24px); padding: 9px 11px;
    background: #1f2537; color: #eef0f8; border-radius: 7px;
    font-size: 12px; line-height: 1.45; font-weight: 400; text-transform: none;
    letter-spacing: 0; text-align: left; white-space: normal;
    box-shadow: 0 6px 22px rgba(20, 24, 40, .28);
    opacity: 0; visibility: hidden; transition: opacity .12s;
}
.hint-pop::after {
    content: ''; position: absolute; top: 100%; left: 50%;
    margin-left: calc(-5px - var(--hint-nudge, 0px));
    border: 5px solid transparent; border-top-color: #1f2537;
}
.hint:hover .hint-pop, .hint:focus .hint-pop { opacity: 1; visibility: visible; }


/* ---------- сворачиваемое меню и советники ---------- */

.nav-title {
    display: flex; align-items: center; gap: 6px;
    cursor: pointer; user-select: none;
}
.nav-title:hover { color: var(--accent); }
.nav-icon { width: 18px; text-align: center; }
.nav-caret {
    margin-left: auto; font-size: 10px; transition: transform .15s;
    color: var(--muted);
}
.nav-group.collapsed .nav-caret { transform: rotate(-90deg); }
.nav-group.collapsed .nav { display: none; }

/* Кнопка советника в шапке. Это собеседник, а не пункт меню, поэтому она
   заметная и стоит рядом с названием бизнеса. */
.advisor-tabs { display: inline-flex; gap: 8px; }
/* Список совета в меню-шторке живёт только на телефоне: на большом
   экране совет стоит в шапке, а в меню он был бы вторым таким же. */
.advisor-tabs-side { display: none; }
.advisor-btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 6px 14px 6px 8px;
    background: transparent; border: 1px solid var(--border);
    border-radius: 10px; color: var(--text);
    font-weight: 600; font-size: 13.5px; line-height: 1.15;
}
.advisor-btn:hover { border-color: var(--accent); text-decoration: none; }
.advisor-btn.current small { color: rgba(255, 255, 255, .8); }
.advisor-face {
    font-size: 20px; background: #fff; border-radius: 8px;
    width: 32px; height: 32px; display: inline-flex;
    align-items: center; justify-content: center;
}

/* Цвет каждого директора совпадает с акцентом его раздела: по залитой
   вкладке видно, в чьём «кабинете» ты находишься. Будущие члены совета
   стоят с пометкой «скоро» — это план состава, а не кнопки. */
.advisor-btn.tab-fd { --tab: #4a5bc4; --tab-dark: #3b4aa3; }
/* Зелёный и оранжевый затемнены до нормы AA: белый текст на #1f8f6a давал
   контраст 4.04, на #c2571f — 4.49 при требуемых 4.5. Разница на глаз почти
   не видна, а надпись на залитой вкладке перестала расплываться. */
.advisor-btn.tab-kd { --tab: #1d8462; --tab-dark: #17714f; }
.advisor-btn.tab-db { --tab: #8a5a1f; --tab-dark: #6d4616; }
.advisor-btn.tab-dp { --tab: #7a3fb0; --tab-dark: #61328c; }
.advisor-btn.tab-mk { --tab: #be551e; --tab-dark: #9a4418; }
.advisor-btn.current {
    color: #fff;
    background: var(--tab, var(--accent));
    border-color: var(--tab-dark, var(--accent-dark));
}
.advisor-btn.soon {
    opacity: .55; cursor: default; border-style: dashed;
}
.advisor-btn.soon small { font-style: italic; }
@media (max-width: 1350px) {
    /* на узком экране будущие директора прячутся: работающие важнее плана */
    .advisor-btn.soon { display: none; }
}

/* Планёрка: вопросы одной кнопкой. Ровная сетка три на четыре,
   кнопки одной ширины — это подсказки, а не самостоятельные кнопки,
   поэтому они мелкие и не спорят с полем ввода. */
.fd-quick {
    margin-top: 14px; padding: 12px 14px 10px;
    background: var(--accent-soft); border-radius: 10px;
}
.fd-quick-title {
    font-size: 11px; font-weight: 600; letter-spacing: .06em; text-align: center;
    text-transform: uppercase; color: var(--accent-dark); margin-bottom: 8px;
}
.fd-quick-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.fd-quick form { display: contents; }
.quick-q {
    cursor: pointer; font-family: inherit; font-size: 11.5px; width: 100%;
    padding: 5px 8px; border-radius: 8px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
    border: 1px solid transparent; background: #fff; color: var(--text);
    box-shadow: 0 1px 2px rgba(44, 47, 69, .08);
    text-align: left;
}
.quick-q .qq-icon { margin-right: 6px; }
.quick-q:hover { border-color: var(--accent); color: var(--accent); }
.quick-q:disabled { opacity: .5; cursor: default; }
@media (max-width: 1000px) { .fd-quick-grid { grid-template-columns: repeat(2, 1fr); } }

/* Большие разборы — четыре карточки: это главные кнопки планёрки,
   и выглядеть они должны весомее подсказок. */
.fd-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 1000px) { .fd-presets { grid-template-columns: repeat(2, 1fr); } }
.preset-card {
    cursor: pointer; font-family: inherit; text-align: left; width: 100%;
    border: 1px solid var(--border); border-radius: 10px; background: #fff;
    padding: 12px 14px; transition: transform .1s, box-shadow .1s;
}
.preset-card:hover {
    border-color: var(--accent); transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(44, 47, 69, .10);
}
.preset-card .pc-icon { font-size: 19px; display: block; margin-bottom: 6px; }
.preset-card .pc-title { font-weight: 600; font-size: 13.5px; color: var(--text); }
.preset-card .pc-note { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.preset-card:disabled { opacity: .5; cursor: default; transform: none; }
/* =========================================================================
   Доступность: видимый фокус и переход к содержимому
   =========================================================================
   Раньше обводку по фокусу имели только поля ввода. Человек, который ходит
   по дашборду с клавиатуры, терял курсор на первой же ссылке меню —
   двадцать пунктов подряд выглядели одинаково. */

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--accent); color: #fff; padding: 10px 16px;
    border-radius: 0 0 8px 0; font-size: 13.5px;
}
.skip-link:focus { left: 0; text-decoration: none; }

:where(a, button, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Анимации выключаем, если человек попросил об этом в системе:
   выезжающее меню и бегущие полосы — частая причина укачивания. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* =========================================================================
   Телефон и планшет
   =========================================================================
   До этого дашборд существовал только в ширину ноутбука: меню в 208 пикселей
   занимало половину экрана телефона, а таблицы отчётов выдавливали страницу
   вбок целиком — прокручивалась не таблица, а весь макет вместе с шапкой.

   Разбираем это тремя приёмами:
   1. меню уезжает за край и открывается кнопкой (бургер) поверх содержимого;
   2. вертикальные отступы режем, чтобы цифры начинались на первом экране;
   3. всё, что шире экрана, прокручивается внутри своей рамки, а не страницей.  */

/* Кнопка меню. На большом экране её нет — меню и так на виду. */
.burger {
    display: none;
    width: 38px; height: 38px; flex: none; padding: 0;
    box-shadow: 0 2px 10px rgba(20, 24, 40, .12);
    align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: 9px;
    background: #fff; color: var(--text); cursor: pointer;
}
.burger:hover { background: var(--accent-soft); color: var(--accent); }
.burger i {
    position: relative; display: block; width: 17px; height: 2px;
    background: currentColor; border-radius: 2px; transition: background .12s;
}
.burger i::before, .burger i::after {
    content: ''; position: absolute; left: 0; width: 17px; height: 2px;
    background: currentColor; border-radius: 2px; transition: transform .15s;
}
.burger i::before { top: -6px; }
.burger i::after { top: 6px; }
/* Открытое меню — тот же значок крестиком: закрыть можно там же, где открыл. */
body.nav-open .burger i { background: transparent; }
body.nav-open .burger i::before { transform: translateY(6px) rotate(45deg); }
body.nav-open .burger i::after { transform: translateY(-6px) rotate(-45deg); }

/* Затемнение под выехавшим меню: клик по нему закрывает. */
.nav-backdrop {
    display: none; position: fixed; inset: 0; z-index: 55;
    background: rgba(31, 35, 58, .45);
}

/* Крестик внутри выехавшего меню. На большом экране меню не выезжает —
   и закрывать нечего. */
.nav-close {
    display: none; margin-left: auto; width: 34px; height: 34px; flex: none;
    align-items: center; justify-content: center; padding: 0;
    border: 0; border-radius: 8px; background: none; cursor: pointer;
    color: var(--muted); font: inherit; font-size: 15px;
}
.nav-close:hover { background: var(--row-hover); color: var(--text); }

@media (max-width: 900px) {
    .burger, .nav-close { display: inline-flex; }
    body.nav-open .nav-backdrop { display: block; }
    /* Пока меню открыто, фон не прокручиваем: иначе, закрыв меню,
       человек оказывается в другом месте страницы. */
    body.nav-open { overflow: hidden; }

    /* Меню выезжает поверх содержимого. Ширину, выбранную мышкой
       на компьютере, здесь не применяем — на телефоне тянуть нечем,
       а сохранённые 560 пикселей закрыли бы экран целиком. */
    .sidebar {
        position: fixed; top: 0; left: 0; z-index: 60;
        width: min(82vw, 300px); flex-basis: auto;
        height: 100%; height: 100dvh;
        transform: translateX(-100%);
        transition: transform .18s ease-out;
        box-shadow: 0 0 40px rgba(31, 35, 58, .22);
        padding-bottom: max(24px, env(safe-area-inset-bottom));
        /* Шторка открывается во весь экран, поэтому в режиме приложения
           её верх заходит под строку состояния. В обычной вкладке вставка
           нулевая и отступ не появляется. */
        padding-top: env(safe-area-inset-top);
        overscroll-behavior: contain;
        /* Закрытое меню уезжает за край, но остаётся на странице: нажав Tab,
           человек отправлял фокус в два десятка невидимых ссылок и не понимал,
           где он. Прячет их от клавиатуры атрибут inert — его ставит
           layout.js; через CSS это не решается: visibility ломает выезд. */
    }
    body.nav-open .sidebar { transform: none; }

    .sidebar-resizer { display: none; }

    /* Пункты меню — под палец: 13 пикселей высоты пунктом не попасть.
       Отступ слева тоже режем: на узком экране он съедал треть строки,
       а названия отчётов в «Людях» и без того переносятся. */
    .nav-title { padding: 13px 16px 12px; }
    .pagination a, .pagination span { padding: 12px 14px; }
    .switch-section { margin: 4px 12px 10px; }
    .switch-section a { padding: 9px 0; font-size: 14px; }
    .logo { padding: 14px 16px; }

    /* Шапка: слева кнопка меню, справа главная цифра. Название бизнеса
       уходит — на 360 пикселях за него нечем платить. */
    /* Шапки на телефоне нет вовсе. От неё оставалась одна кнопка меню,
       а полосу она занимала во всю ширину и высотой 57 пикселей — на экране
       в 800 пикселей это тринадцатая часть высоты ни за что. Кнопка теперь
       висит в правом верхнем углу поверх содержимого и не уезжает
       при прокрутке; заголовок страницы держит от неё дистанцию. */
    .topbar { display: none; }
    .burger {
        position: fixed; z-index: 55;
        top: max(10px, env(safe-area-inset-top));
        right: max(10px, env(safe-area-inset-right));
    }
    /* Пока меню открыто, плавающая кнопка не нужна: закрыть его есть чем —
       крестик стоит в самом меню. Два крестика на экране читаются как две
       разные кнопки. */
    body.nav-open .burger { display: none; }

    /* «Кто вошёл» переезжает в конец шторки: имя, роль и ссылки — там, где
       их ищут, когда шапки нет. */
    .whoami-side {
        display: block; margin: 10px 12px 16px; padding-top: 12px;
        border-top: 1px solid var(--border);
    }
    .whoami-side .whoami { flex-wrap: wrap; gap: 10px; }

    /* Шапка на телефоне — это кнопка меню и «кто вошёл», больше ничего.
       Совет директоров занимал её целиком: пять вкладок в строку — 795
       пикселей, прокруткой видно одну, и кажется, что твоего директора нет.
       Поэтому из шапки он уходит в меню-шторку, где помещается списком. */
    .topbar .advisor-tabs { display: none; }
    .advisor-tabs-side {
        display: flex; flex-direction: column; gap: 6px;
        padding: 0 12px 12px; margin: 0;
    }
    .advisor-tabs-side .advisor-btn { width: 100%; padding: 7px 12px 7px 7px; }
    .advisor-tabs-side .advisor-btn small { display: block; }

    /* Кто вошёл: имя и роль остаются, ссылки прячем — они есть в профиле. */
    .whoami { margin-left: 12px; gap: 8px; }
    .whoami a { display: none; }
    .whoami .who { font-size: 12px; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Подсказка «?». Шириной ровно 280 пикселей и по центру над значком:
       у правого края таблицы половина текста уходила за экран, а прокрутить
       туда нечего — всплывашка не часть страницы. На телефоне показываем её
       полосой у нижнего края: места хватает любому объяснению, и до него
       не нужно целиться пальцем.

       Правило жило в people.css и работало только в «Людях» — в «Деньгах»
       подсказка уезжала за край на всех страницах. Здесь оно общее. */
    .hint-pop {
        position: fixed; left: 12px; right: 12px; bottom: 12px;
        top: auto; width: auto; transform: none;
        padding: 12px 14px; font-size: 13px; border-radius: 10px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
    /* Хвостик указывал на значок — у полосы внизу указывать не на что. */
    .hint-pop::after { display: none; }
    td:first-child .hint-pop, th:first-child .hint-pop { left: 12px; transform: none; }
    /* Значок «?» — цель для пальца, а не для курсора. */
    .hint { padding: 4px; margin-left: 0; }

    .content {
        padding: 14px 12px 48px;
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
        /* Шапки на телефоне нет, и заголовок страницы стоит сразу под
           краем экрана: в режиме приложения он уезжал под часы и вырез.
           Кнопка меню отступ уже знает (см. .burger выше), содержимое —
           нет. В обычной вкладке вставка нулевая, остаются прежние 14. */
        padding-top: max(14px, env(safe-area-inset-top));
    }

    /* Заголовок делит строку с плавающей кнопкой меню: 38 пикселей кнопки
       плюс поля. У длинных названий («Отчёт о прибылях и убытках») значок «?»
       не влезал и срывался на строку ниже одиноким кружком. */
    h1 { font-size: 18px; margin-bottom: 12px; line-height: 1.25; padding-right: 46px; }
    h2 { font-size: 15.5px; }

    .panel { padding: 14px 13px; border-radius: 9px; margin-bottom: 12px; }
    .panel.tight { padding: 10px 11px; }
    .btn.add-ops-btn { display: inline-flex; width: 100%; justify-content: center; margin-bottom: 12px; }
    .add-ops-btn::after { content: ' ▾'; color: var(--muted); }
    .add-ops.hidden { display: none !important; }

    /* Плитки показателей — по две в ряд. По одной получался столбик
       в четыре экрана, между первой и последней цифрой нет сравнения. */
    .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
    .card { padding: 12px 13px; }
    .card .value { font-size: 17px; }
    .card .label { font-size: 11.5px; }

    /* Поля ввода: меньше 16 пикселей — и Safari на iPhone приближает
       страницу при попадании в поле, а обратно уже не отдаляет. */
    input[type=text], input[type=date], input[type=number], input[type=month],
    input[type=password], select, textarea { font-size: 16px; padding: 8px 10px; }

    /* Кнопки и переключатели — не меньше пальца (44 пикселя по рекомендации
       Apple и Google), иначе в «‹ период ›» попасть невозможно. */
    .btn { padding: 10px 14px; min-height: 40px; }
    /* Цели касания. WCAG 2.1 требует 44×44; было: значок «?» 21×21, кнопка
       деления операции 30×34, крестик меню 34×34, поле поиска 29 в высоту.
       По таким целям не попасть пальцем, а у владельца ещё и слабое зрение.
       Где кнопка одна — растим её саму; где значок стоит в тексте и раздувать
       его нельзя, растим невидимую область нажатия вокруг него. */
    .btn-sm { padding: 8px 12px; min-height: 40px; min-width: 40px; justify-content: center; }
    .nav-close { width: 44px; height: 44px; }
    .nav-search input { min-height: 40px; }
    .nav a { padding: 12px 16px 12px 22px; font-size: 14.5px; }
    .tabs a { padding: 11px 9px; font-size: 12.5px; white-space: nowrap; }

    /* Значок «?» и переключатель: размер оставляем, площадь нажатия растим. */
    .hint, .switch { position: relative; }
    .hint::before, .switch::before {
        content: ''; position: absolute; top: 50%; left: 50%;
        width: 44px; height: 44px; transform: translate(-50%, -50%);
    }
    /* 44, а не 40: палец попадает по цели от сорока четырёх точек.
       Замер на 375 до правки — стрелки периода и значки 40 × 40. */
    .icon-btn, .period-nav .step { width: 44px; height: 44px; font-size: 17px; }
    .period-btn { min-width: 0; padding: 10px 12px; min-height: 44px; }
    .period-nav .period-btn { flex: 1; }
    .period-nav { flex: 1 1 200px; }
    .toolbar { gap: 8px; }
    /* «Все · Поступления · Списания · Переводы» не влезали в 364 пикселя
       и падали второй строкой — четыре слова занимали два ряда. Ужимаем
       отступы и шрифт: одна строка читается как один выбор, две — как два
       разных списка. Выпадающий список сюда не ставим: он превращает один
       клик в два, а переключаются здесь часто.

       Перенос оставлен: в ДДС вкладок пять («Статьи · Виды деятельности ·
       Контрагенты · Счета · Направления»), и запрет переноса выносил
       последнюю за экран на 74 пикселя. Где вкладок четыре — они и так
       встают в строку после ужатия. */
    .tabs { gap: 2px; }
    button.mini { padding: 7px 11px; }

    /* Выпадашка периода упиралась в правый край: она была привязана
       к кнопке, а кнопка на телефоне почти во всю ширину. */
    .period-menu { left: 0; right: 0; min-width: 0; }
    .period-custom { flex-wrap: wrap; }
    .period-custom input[type=date] { width: auto; flex: 1 1 120px; }

    /* Окно настроек снизу, как лист: до верхней части экрана
       большим пальцем не дотянуться. */
    .modal { align-items: flex-end; }
    .modal-box {
        width: 100%; border-radius: 14px 14px 0 0; padding: 18px 16px;
        max-height: 88vh; overflow-y: auto;
        padding-bottom: max(18px, env(safe-area-inset-bottom));
    }
    .check-row { padding: 12px 0; }
    .modal-foot { flex-wrap: wrap; }

    /* Таблицы. Приклеенная первая колонка в 280 пикселей на телефоне
       не оставляла места самим цифрам — оставляем ей примерно половину. */
    .table-wrap { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; padding-bottom: 2px; }
    /* Таблица сжималась до ширины экрана и ломала слова по слогам:
       «Компас (бывш. «Академия сало-нов»)» в колонку шириной с палец.
       Пусть лучше честно прокручивается — читать по слогам хуже,
       чем двигать пальцем. Полосу прокрутки не прячем: по ней видно,
       что за краем есть ещё колонки, — одной тени под плотным текстом
       не видно. */
    .table-wrap table { min-width: 560px; }

    /* Помесячный отчёт на телефоне: первая колонка — название статьи —
       забирала весь экран, и на первом экране ОПиУ не было ни одной цифры.
       Отчёт о прибылях без прибыли. Название прилипает к левому краю
       и занимает фиксированные 148 пикселей, цифры прокручиваются под ним:
       видно, к какой статье относится число, не отпуская его из виду. */
    .table-wrap table.report th:first-child,
    .table-wrap table.report td:first-child,
    .table-wrap table.grid th:first-child,
    .table-wrap table.grid td:first-child {
        position: sticky; left: 0; z-index: 2;
        min-width: 148px; max-width: 148px;
        background: var(--panel);
        box-shadow: 1px 0 0 var(--border);
        /* Иначе длинное название («*Закупка материалов для работы») вылезает
           за свои 148 пикселей и ложится поверх цифры соседней колонки. */
        white-space: normal; overflow-wrap: anywhere;
    }
    .table-wrap table.report th, .table-wrap table.grid th { white-space: nowrap; }
    .table-wrap::-webkit-scrollbar { height: 6px; }
    .table-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }


    /* Документы, собранные из Markdown (архив проектов, исследования):
       таблицу внутри них не обернуть в table-wrap — разметку рисует
       конвертер, а не шаблон. Поэтому прокручиваем вбок сам документ. */
    .director-md { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
    table.report th:first-child { min-width: 150px; }
    table.report th, table.report td { padding: 8px 9px; }
    table.grid th, table.grid td { padding: 8px 8px; }
    table.report tr.total > td { font-size: 13.5px; }
    table.report .lvl1 td:first-child { padding-left: 18px; }
    table.report .lvl2 td:first-child { padding-left: 30px; }
    table.report .lvl3 td:first-child { padding-left: 42px; }

    /* Ширину выпадающего списка задаёт самая длинная строка внутри него.
       В боевой базе филиал называется «Точка Красоты - ТЦ "Курс" -
       ш. Можайское, 159 - г. Одинцово» — 499 пикселей, и страница уезжала
       вбок на всех витринах «Людей». На пустой базе этого не видно: филиалов
       там нет. Поэтому правило общее — поле не шире отведённого ему места. */
    select, input, textarea { max-width: 100%; }
    .inline-form { flex-wrap: wrap; gap: 8px; max-width: 100%; min-width: 0; }
    .tabs-row { min-width: 0; flex-wrap: wrap; }
    /* Галочки: 13 пикселей — размер для курсора, а не для пальца.
       Строка-подпись кликабельна целиком, но попасть хочется в саму галочку. */
    input[type=checkbox], input[type=radio] { width: 19px; height: 19px; }
    .filters { gap: 8px; }
    .filters-btn { width: 100%; justify-content: center; }

    /* Три кнопки ввода операции стояли первыми и в полный рост — 60 пикселей
       каждая. Но с телефона на «Операции» приходят читать, а не заводить
       платёж руками: в строку и мелким шрифтом они не мешают списку. */
    .panel.tight .btn-income,
    .panel.tight .btn-outcome,
    .panel.tight .btn-transfer {
        flex: 1 1 0; min-width: 0; padding: 8px 4px;
        font-size: 12px; white-space: nowrap;
        overflow: hidden; text-overflow: ellipsis;
    }
    /* Ширину списка задаёт самая длинная строка в нём: у фильтра «Статья»
       это «!(И) Возврат банковских кредитов» — 401 пиксель, и страница
       уезжала вбок. На пустой базе не видно, статей там нет. Поле теперь
       не шире своей колонки, а длинное название обрезается многоточием. */
    .filters .field { flex: 1 1 140px; min-width: 0; }
    .filters .field select,
    .filters .field input { max-width: 100%; text-overflow: ellipsis; }
    .filters-box { padding: 10px 11px; }

    .grid-2 { gap: 12px; }
    .chart { height: 150px; gap: 5px; }
    .chart-label { font-size: 10px; }
    .close-progress { margin-left: 0; width: 100%; }
    .close-progress .bar { flex: 1; width: auto; }
    .instruction-grid { gap: 14px; }
    .empty { padding: 26px 14px; }
}

/* --------------------------------------------------------------------
   Цели нажатия на телефоне и планшете.

   Управляющая смотрит экран пальцем и на ходу, между салонами. Палец
   попадает по цели от 44 точек в меньшей стороне; всё, что меньше,
   промахивается — а промах по выбору филиала или по дате означает
   не «не нажалось», а «посмотрел не тот салон».

   Здесь только размеры и отступы: ни цвета, ни расположение, ни поведение
   не меняются. На большом экране правила не действуют — там мышь,
   и она попадает и по тридцати шести точкам.

   Замеры до правки (375 точек, экран «Деньги дня по салону»):
     выбор филиала   310 × 35,6
     поле даты       118,8 × 37,9
     кнопка меню     38 × 38
     поиск по меню   230,8 × 40
     «К содержимому» 131,4 × 39,6
     заголовки групп меню 284,8 × 43,9
   -------------------------------------------------------------------- */
@media (max-width: 1199px) {
    /* Списки и поля ввода в панелях: выбор филиала, дата, фильтры. */
    .panel select,
    .panel input[type="date"],
    .panel input[type="text"],
    .panel input[type="number"],
    .panel input[type="search"] {
        min-height: 44px;
    }

    /* Кнопка меню была ровно 38 × 38 — самая мелкая цель на экране
       и при этом самая нужная: с неё начинается любой переход. */
    .burger { width: 44px; height: 44px; }

    /* Поиск по меню и заголовки групп: по ним попадают в шторке,
       где палец держат одной рукой. */
    .nav-search input { min-height: 44px; }
    .nav-title { min-height: 44px; }

    /* Ссылка «К содержимому» — цель для тех, кто ходит с клавиатуры
       и с экранным диктором; ей ровно та же мерка. */
    .skip-link { min-height: 44px; display: flex; align-items: center; }

    /* Кнопки и вкладки на «Операциях»: «Добавить операцию» и «Фильтры»
       меряли 40,8 по высоте, вкладки «Все · Поступления · Списания ·
       Переводы» — 41,7, а кнопка «разнести» в каждой строке списка
       40 × 40, и таких на экране сотня. */
    .btn { min-height: 44px; }
    .btn-sm { min-width: 44px; }
    /* min-width — ради короткого «Все»: 39,1 точки по ширине. Пять
       лишних пикселей вкладки переживают, в строку они по-прежнему
       помещаются. */
    .tabs a {
        min-height: 44px; min-width: 44px;
        display: inline-flex; align-items: center; justify-content: center;
    }
}

@media (max-width: 1199px) {
    /* Совет директоров в шапке: пять кнопок требуют больше тысячи ста
       пикселей, и на планшете 1024 шапка вылезала за край окна — вбок
       ехала вся страница, а не одна таблица. Ниже 1200 совет уходит
       списком в боковое меню, где помещается целиком.
       Раньше это начиналось с 900, то есть только на телефоне. */
    .topbar .advisor-tabs { display: none; }
    .advisor-tabs-side {
        display: flex; flex-direction: column; gap: 6px;
        padding: 0 12px 12px; margin: 0;
    }
    .advisor-tabs-side .advisor-btn { width: 100%; padding: 7px 12px 7px 7px; }
    .advisor-tabs-side .advisor-btn small { display: block; }

    /* ------------------------------------------------------------------
       Таблица карточками.

       Прокрутка вбок читается плохо: первая колонка прилипшая и широкая,
       остальное сжато в полоску, и, пока возишь пальцем, теряешь строку.
       На узком экране строка таблицы разворачивается в карточку: данные
       идут сверху вниз, подпись слева, значение справа. Прокрутки вбок
       не остаётся вовсе.

       Подписи в ячейки проставляет layout.js из шапки таблицы: 191 таблица
       в 108 шаблонах, руками их не разметить. Включается классом table-cards
       на обёртке — так вкладку можно перевести на карточки по одной
       и посмотреть, что вышло, прежде чем переводить остальные.

       Шапка карточки собирается не по порядку ячеек, а по смыслу:
       слева первая колонка (дата, название), справа первая денежная —
       у «Операций» это «Дата» и «Сумма», у «Где лежат деньги» — «Счёт»
       и «Остаток». Порядок задаётся order, поэтому от места колонки
       в разметке ничего не зависит. */
    .table-wrap.table-cards {
        overflow-x: visible;
        background: none;
        padding-bottom: 0;
    }
    .table-wrap.table-cards table { min-width: 0; display: block; }
    .table-wrap.table-cards thead { display: none; }
    .table-wrap.table-cards tbody { display: block; }

    .table-wrap.table-cards tbody tr {
        display: flex; flex-wrap: wrap; align-items: baseline;
        column-gap: 12px;
        border: 1px solid var(--border); border-radius: var(--radius);
        background: var(--panel);
        padding: 11px 13px;
        margin-bottom: 8px;
    }
    .table-wrap.table-cards tbody tr:last-child { margin-bottom: 0; }
    /* Подсветка строки под курсором на телефоне не нужна: курсора нет,
       а на нажатие она срабатывает и выглядит как выделение. */
    .table-wrap.table-cards tbody tr:hover { background: var(--panel); }

    /* Подпись и значение стоят двумя колонками фиксированной ширины.
       Выравнивать значение по правому краю нельзя: длинное название
       переносится, и левый край строки становится рваным — читать
       список сверху вниз по такому краю невозможно. */
    .table-wrap.table-cards td {
        order: 2; flex: 1 0 100%;
        display: grid; grid-template-columns: 104px minmax(0, 1fr);
        column-gap: 10px; align-items: baseline;
        border: 0; padding: 3px 0;
        text-align: left; white-space: normal;
    }
    .table-wrap.table-cards td::before {
        content: attr(data-label);
        color: var(--muted); font-size: 12.5px; font-weight: 400;
        line-height: 1.5;
    }
    /* Колонка без заголовка — обычно кнопка действия. Подписывать нечем,
       и пустое место слева ей ни к чему. */
    .table-wrap.table-cards td:not([data-label])::before,
    .table-wrap.table-cards td[data-label=""]::before { display: none; }
    /* Ячейке без подписи левая колонка не нужна: кнопка действия
       начинается с края карточки, как и заголовок над ней. */
    .table-wrap.table-cards td:not([data-label]),
    .table-wrap.table-cards td[data-label=""] { grid-template-columns: minmax(0, 1fr); }
    /* Пустая ячейка в карточке — строка «Контрагент —» ни о чём.
       Ячейки без содержимого прячет layout.js, проставляя data-empty. */
    .table-wrap.table-cards td[data-empty] { display: none; }

    .table-wrap.table-cards td.cell-title {
        order: 0; flex: 1 1 auto; display: block;
        font-size: 15px; font-weight: 600; line-height: 1.3;
        padding-bottom: 7px;
    }
    .table-wrap.table-cards td.cell-lead {
        order: 1; flex: 0 0 auto; display: block;
        font-size: 17px; font-weight: 600; line-height: 1.3;
        text-align: right; white-space: nowrap;
        padding-bottom: 7px;
    }
    .table-wrap.table-cards td.cell-title::before,
    .table-wrap.table-cards td.cell-lead::before { display: none; }
    /* Длинное значение — не повод на треть экрана: «Назначение» платежа
       показываем тремя строками, остальное прячется. Полный текст остаётся
       в карточке операции, куда ведёт кнопка справа. */
    .table-wrap.table-cards td > .cell-value {
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
        overflow: hidden; min-width: 0; overflow-wrap: anywhere;
    }
    .table-wrap.table-cards td.cell-title > .cell-value { -webkit-line-clamp: 2; }
    /* Сумму в шапке не режем построчно: display:-webkit-box развернул бы
       знак «+» и само число в две строки. */
    .table-wrap.table-cards td.cell-lead > .cell-value { display: inline; }

    /* Ниже шапки числа не крупнее подписей: крупным в карточке
       остаётся одно — то, ради чего в неё смотрят. */
    .table-wrap.table-cards td.num { font-weight: 600; }

    /* Прилипшая первая колонка и минимальная ширина — приёмы прокрутки.
       Карточкам они мешают: колонка не должна ни прилипать, ни резаться. */
    .table-wrap.table-cards table.grid th:first-child,
    .table-wrap.table-cards table.grid td:first-child {
        position: static; min-width: 0; max-width: none;
        box-shadow: none; background: none;
    }
}

/* Карточки плиткой на планшете и в узком окне.

   Столбик карточек во всю ширину тысячи пикселей читается плохо:
   подпись слева, значение рядом, а дальше пустое поле в пол-экрана —
   ровно то, на что Сергей пожаловался, глядя на планшет. Начиная
   с 640 пикселей карточки встают плиткой и занимают ширину целиком.

   Ширина колонки 300 пикселей — та, при которой пара «подпись 104 +
   значение» ещё не режется по слогам. */
@media (min-width: 640px) and (max-width: 1199px) {
    .table-wrap.table-cards tbody {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 8px;
    }
    .table-wrap.table-cards tbody tr { margin-bottom: 0; align-content: start; }
}

/* Совсем узкие экраны (iPhone SE и подобные): плитки в одну колонку —
   на 320 пикселях в две колонки сумма переносится посреди числа. */
@media (max-width: 360px) {
    .cards { grid-template-columns: 1fr; }
    .topbar .money { font-size: 14px; }
}