/* Kids CRM — Tristyle. Дизайн: navy #1B3E73 + аква-акцент, светлая тема, mobile-first. */
:root {
  --navy: #1B3E73;
  --navy-700: #16335e;
  --navy-50: #eef3fb;
  --aqua: #12b5c9;
  --aqua-600: #0e97a8;
  --aqua-50: #e6fafd;
  --ink: #17233b;
  --muted: #6b7891;
  --line: #e4e9f2;
  --line-2: #eef1f7;
  --bg: #f4f7fc;
  --card: #ffffff;
  --danger: #e5484d;
  --ok: #2fb968;
  --shadow: 0 1px 3px rgba(20,40,80,.06), 0 8px 24px rgba(20,40,80,.06);
  --radius: 14px;
  --radius-sm: 9px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
}
button { font-family: inherit; cursor: pointer; }
input, button, select { font-size: 15px; }

/* ── Логин ─────────────────────────────────────────────── */
.login-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 20px;
  background: radial-gradient(1200px 600px at 50% -10%, #dfeafb 0%, var(--bg) 55%);
}
.login-card {
  width: 100%; max-width: 360px; background: var(--card);
  border-radius: 20px; padding: 34px 28px 28px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 14px; text-align: center;
}
.login-logo {
  width: 62px; height: 62px; margin: 0 auto 4px; border-radius: 18px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--navy), var(--aqua));
}
.login-card h1 { margin: 0; font-size: 24px; letter-spacing: -.02em; color: var(--navy); }
.login-sub { margin: -8px 0 8px; color: var(--muted); font-size: 14px; }
.login-card label { text-align: left; font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 6px; }
.login-card input {
  padding: 12px 13px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  color: var(--ink); outline: none; transition: border-color .15s;
}
.login-card input:focus { border-color: var(--aqua); }
.login-error { color: var(--danger); font-size: 13px; margin-top: 2px; }

.btn-primary {
  background: var(--navy); color: #fff; border: none; padding: 12px 16px;
  border-radius: var(--radius-sm); font-weight: 600; transition: background .15s, transform .05s;
}
.btn-primary:hover { background: var(--navy-700); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: .6; cursor: default; }

/* ── Топбар ────────────────────────────────────────────── */
.topbar {
  height: 58px; background: var(--card); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 14px; padding: 0 16px;
  position: sticky; top: 0; z-index: 40;
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--navy); letter-spacing: -.01em; }
.brand svg { color: var(--aqua); }
.topnav { display: flex; gap: 4px; margin-left: 8px; }
.navlink {
  background: none; border: none; padding: 8px 14px; border-radius: 999px;
  color: var(--muted); font-weight: 600; font-size: 14px;
}
.navlink:hover { background: var(--navy-50); color: var(--navy); }
.navlink.active { background: var(--navy); color: #fff; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.user-name { color: var(--muted); font-size: 13px; }
.btn-ghost {
  background: none; border: 1px solid var(--line); color: var(--muted);
  padding: 7px 12px; border-radius: var(--radius-sm); font-weight: 600; font-size: 13px;
}
.btn-ghost:hover { border-color: var(--aqua); color: var(--aqua-600); }
.burger { display: none; flex-direction: column; gap: 4px; background: none; border: none; padding: 8px; }
.burger span { width: 20px; height: 2px; background: var(--navy); border-radius: 2px; }

/* ── Раскладка ─────────────────────────────────────────── */
.layout { display: flex; min-height: calc(100vh - 58px); }
.sidebar {
  width: 268px; flex-shrink: 0; background: var(--card); border-right: 1px solid var(--line);
  padding: 16px 14px; display: flex; flex-direction: column; gap: 8px;
  position: sticky; top: 58px; height: calc(100vh - 58px); overflow-y: auto;
}
.scrim { display: none; }

.sidebar-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 4px 10px; border-bottom: 1px solid var(--line-2); margin-bottom: 6px;
}
.sidebar-title { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.icon-btn {
  background: var(--aqua-50); border: none; color: var(--aqua-600); width: 24px; height: 24px;
  border-radius: 7px; font-size: 17px; line-height: 1; display: grid; place-items: center; flex-shrink: 0;
}
.icon-btn:hover { background: var(--aqua); color: #fff; }
.icon-btn.sm { width: 20px; height: 20px; font-size: 14px; }

.sidebar-cities { display: flex; flex-direction: column; gap: 14px; }
.city-section { display: flex; flex-direction: column; gap: 3px; }

/* Единый ряд для city-header И group-item: одна и та же высота/отступы/размер
   кнопок, чтобы «+», «⋯» и счётчик участников были на одном уровне везде, а не
   рябили от строки к строке (было: разные padding/размеры кнопок в разных местах). */
.side-row { display: flex; align-items: center; gap: 6px; min-height: 36px; }
.sb-btn {
  width: 22px; height: 22px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 7px; font-size: 14px; line-height: 1; background: none; border: none;
  color: var(--muted); padding: 0;
}
.sb-btn:hover { background: #fff; color: var(--navy); }
.sb-count {
  min-width: 24px; height: 20px; padding: 0 7px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; border-radius: 999px;
  color: var(--muted); background: #fff; border: 1px solid var(--line);
}

.city-header {
  padding: 4px 6px 8px 4px; margin-bottom: 2px; border-bottom: 1.5px solid var(--navy-50);
}
.city-name {
  flex: 1; font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--navy); font-weight: 800;
}
.city-header .sb-btn:hover { background: var(--navy-50); color: var(--navy); }

.groups { display: flex; flex-direction: column; gap: 3px; }
.group-item {
  padding: 6px 8px; border-radius: var(--radius-sm);
  color: var(--ink); font-weight: 600; font-size: 14px; border: 1px solid transparent;
}
.group-item:hover { background: var(--navy-50); }
.group-item.active { background: var(--aqua-50); border-color: #cdeef3; color: var(--navy); }
.group-item .g-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-item.active .sb-count { background: #fff; }
.group-item .g-menu { opacity: 0; }
.group-item:hover .g-menu { opacity: 1; }
.groups-empty { color: var(--muted); font-size: 13px; padding: 8px 8px 8px 4px; }

/* ── Контент ───────────────────────────────────────────── */
.content { flex: 1; min-width: 0; padding: 20px; }
.view-head {
  display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap;
}
.view-head h2 { margin: 0; font-size: 20px; color: var(--navy); letter-spacing: -.01em; }
.view-head .subtle { color: var(--muted); font-size: 13px; }
.year-switch { display: flex; align-items: center; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.year-switch button { background: none; border: none; width: 28px; height: 28px; border-radius: 999px; color: var(--navy); font-size: 16px; }
.year-switch button:hover { background: var(--navy-50); }
.year-switch .year-val { font-weight: 700; min-width: 46px; text-align: center; color: var(--navy); }
.head-spacer { margin-left: auto; }

/* ── Таблица оплат ─────────────────────────────────────── */
.table-wrap {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: auto; box-shadow: var(--shadow); -webkit-overflow-scrolling: touch;
}
/* table-layout:fixed + ТОЧНАЯ (не min/max-диапазон) ширина каждой колонки —
   принципиально важно: таблица оплат и таблица расходов группы это ДВА разных
   independent <table>, каждый сам считает свою раскладку. С диапазоном
   min/max-width колонки могли осесть на разной точной ширине (по самому
   длинному контенту КАЖДОЙ таблицы отдельно), и «Янв/Фев/…» в одной таблице
   съезжали относительно другой. Фиксированная ширина — единственный способ
   гарантировать идеальное совпадение колонок между таблицами. */
/* width:max-content обязателен: table-layout:fixed сам по себе НЕ мешает браузеру
   растянуть table шириной auto по доступному месту в .table-wrap (тогда колонки
   делят между собой ЛИШНЕЕ место непропорционально — именно так payments и
   expenses расползались на разную итоговую ширину, хотя все .col-* совпадали).
   max-content = ширина ровно по сумме объявленных колонок, без растяжения. */
table.paytable { border-collapse: separate; border-spacing: 0; table-layout: fixed; width: max-content; }
.paytable th, .paytable td { border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.paytable thead th {
  position: sticky; top: 0; z-index: 3; background: #fbfcfe; color: var(--muted);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 11px 10px; text-align: center; border-bottom: 1.5px solid var(--line);
}
.paytable thead th.now { color: var(--aqua-600); }
.col-name { text-align: left !important; }
.col-name, .cell-name {
  position: sticky; left: 0; z-index: 2; background: var(--card);
  width: 210px; box-shadow: 1px 0 0 var(--line-2);
}
.cell-name .nm { display: inline-block; max-width: 100%; vertical-align: bottom; }
.paytable thead th.col-name { z-index: 4; }
.cell-name { text-align: left; padding: 8px 10px; }
.cell-name .nm { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.cell-name .row-actions { display: inline-flex; gap: 2px; margin-left: 4px; }
.cell-name .row-actions button { opacity: 0; }
.paytable tbody tr:hover .cell-name .row-actions button { opacity: 1; }
.mini-btn { background: none; border: none; color: var(--muted); font-size: 13px; padding: 2px 4px; border-radius: 5px; }
.mini-btn:hover { background: var(--navy-50); color: var(--navy); }

/* 70px, не 62px: заголовок «ЧИСЛО» (uppercase, letter-spacing) на 68px не
   помещается в одну строку — при table-layout:fixed + width:max-content браузер
   раздувал ИМЕННО эту колонку сверх объявленной ширины (другие оставались как
   заданы), сбивая выравнивание с таблицей расходов на мобильной/узкой раскладке. */
.col-day { width: 70px; border-right: 1px solid var(--line-2); }
.cell-day { text-align: center; border-right: 1px solid var(--line-2); }
/* Объединённая ячейка «Статья» (colSpan=2) в таблице расходов группы — заменяет
   Клиент+Число из таблицы оплат одной ячейкой той же суммарной ширины, чтобы
   Янв/Фев/… стояли строго под таблицей оплат БЕЗ пустого спейсера-колонки
   (у которого раньше не было смысловой границы — линия делила бы пустоту). */
.cell-name.wide, th.col-name.wide { width: 280px; }
.day-badge {
  display: inline-block; min-width: 30px; padding: 4px 8px; border-radius: 8px;
  background: var(--navy-50); color: var(--navy); font-weight: 700; font-size: 13px; border: 1px solid transparent;
}
.day-badge:hover { border-color: var(--aqua); }
.day-badge.empty { background: none; color: var(--line); font-weight: 400; }
.day-input { width: 54px; text-align: center; }

.cell-month, th.col-month { border-right: 1px solid var(--line-2); }
.cell-month { padding: 0; text-align: center; width: 58px; }
.cell-month input {
  width: 100%; border: none; background: none; text-align: center; padding: 12px 2px;
  color: var(--ink); font-weight: 600; font-size: 13px; outline: none; -moz-appearance: textfield;
}
.cell-month input::-webkit-outer-spin-button,
.cell-month input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cell-month input::placeholder { color: #cfd6e4; font-weight: 400; }
.cell-month:focus-within { box-shadow: inset 0 0 0 2px var(--aqua); border-radius: 6px; }
.cell-month.has-val { background: linear-gradient(0deg, var(--aqua-50), var(--aqua-50)); }
.cell-month.saving input { color: var(--aqua-600); }

.col-total { width: 84px; }
.cell-total { text-align: right; padding: 8px 14px; font-weight: 800; color: var(--navy); background: #fbfcfe; }

.addrow-cell { padding: 14px 16px; }
.add-client-btn {
  border: 1.5px dashed var(--line); background: none; color: var(--aqua-600); font-weight: 600;
  padding: 9px 14px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 6px;
}
.add-client-btn:hover { border-color: var(--aqua); background: var(--aqua-50); }

.table-empty { padding: 40px 20px; text-align: center; color: var(--muted); }
.no-group { padding: 60px 20px; text-align: center; color: var(--muted); }

/* ── Кабинет тренера: сетка посещаемости ──────────────────── */
.att-head { padding: 8px 2px !important; line-height: 1.3; }
.att-wd { font-size: 9px; color: var(--muted); font-weight: 600; text-transform: none; letter-spacing: 0; margin-top: 2px; }
.att-cell { text-align: center; cursor: pointer; padding: 7px 2px; -webkit-tap-highlight-color: transparent; }
.att-cell:hover { background: var(--navy-50); }
.att-box {
  width: 32px; height: 32px; margin: 0 auto; border-radius: 9px;
  border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; color: transparent; background: var(--card); transition: all .12s;
}
.att-cell.on .att-box { background: var(--ok); border-color: var(--ok); color: #fff; }

/* ── Комбобокс добавления клиента ──────────────────────── */
.combo { position: relative; display: inline-block; }
.combo-input {
  padding: 9px 12px; border: 1.5px solid var(--aqua); border-radius: var(--radius-sm);
  min-width: 240px; outline: none;
}
/* .portal — меню всегда переносится в document.body (см. insertAddClientRow), позиция
   всегда fixed с координатами из JS. Иначе будучи вложенным в .cell-name (position:sticky,
   свой контекст наложения), меню оставалось «запертым» и пряталось за любым элементом
   страницы с z-index выше 2 — например, sticky-заголовком другой таблицы ниже. */
.combo-menu {
  position: fixed; min-width: 260px; max-height: 280px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); z-index: 60;   /* выше любого контента страницы, ниже модалки (100) */
}
.combo-item { padding: 10px 12px; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.combo-item:hover, .combo-item.hl { background: var(--navy-50); }
.combo-item.create { color: var(--aqua-600); font-weight: 700; border-bottom: 1px solid var(--line-2); }
.combo-item .ci-sub { color: var(--muted); font-size: 12px; margin-left: auto; }
.combo-empty { padding: 12px; color: var(--muted); font-size: 13px; }
.add-client-row .cell-name { display: flex; align-items: center; gap: 4px; }
.add-client-row .combo { flex: 1; min-width: 0; }
.add-client-row .combo-input { width: 100%; min-width: 150px; }

/* ── Клиенты ───────────────────────────────────────────── */
/* stretch (не start) — иначе левая панель обрезается по высоте своего контента
   и не дотягивает до низа экрана, тогда как правая (детали) может быть длиннее. */
.clients-layout { display: grid; grid-template-columns: 320px 1fr; gap: 18px; align-items: stretch; }
.clients-list-pane {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden; display: flex; flex-direction: column;
  height: calc(100vh - 100px); position: sticky; top: 78px;
}
.clients-search { padding: 12px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.clients-search input { width: 100%; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); outline: none; }
.clients-search input:focus { border-color: var(--aqua); }
.clients-list { flex: 1; min-height: 0; overflow-y: auto; }
.client-row { padding: 12px 14px; border-bottom: 1px solid var(--line-2); display: flex; align-items: center; gap: 10px; }
.client-row:hover { background: var(--navy-50); }
.client-row.active { background: var(--aqua-50); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--navy), var(--aqua)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.client-row .c-name { font-weight: 600; }
.client-row .c-sub { color: var(--muted); font-size: 12px; }

.client-detail-pane { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; min-height: 300px; }
.empty-hint { color: var(--muted); text-align: center; padding: 60px 20px; }
.cd-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.cd-head .avatar { width: 52px; height: 52px; font-size: 18px; flex-shrink: 0; }
.cd-name-box { min-width: 0; }
.cd-name-row { display: flex; gap: 6px; flex-wrap: wrap; }
.cd-name-input {
  font-size: 20px; font-weight: 800; color: var(--navy); border: 1.5px solid transparent;
  background: none; padding: 3px 6px; border-radius: 7px; min-width: 70px; max-width: 180px; outline: none;
}
.cd-name-input:hover { background: var(--navy-50); }
.cd-name-input:focus { border-color: var(--aqua); background: #fff; }
.cd-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.cd-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.stat-card { background: var(--navy-50); border-radius: var(--radius-sm); padding: 12px 16px; min-width: 120px; }
.stat-card .s-val { font-size: 22px; font-weight: 800; color: var(--navy); }
.stat-card .s-lbl { font-size: 12px; color: var(--muted); }
/* Заголовок раздела — цветной акцент слева + заметный отступ сверху, чтобы
   визуально отделять идущие подряд карточки/таблицы друг от друга. Отступ
   увеличен (было 30px) — таблицы аналитики всё ещё лепились друг к другу. */
.cd-section-title {
  font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--navy);
  font-weight: 800; margin: 44px 0 14px; padding-left: 12px; position: relative;
}
.cd-section-title::before {
  content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px;
  background: var(--aqua); border-radius: 2px;
}
.cd-section-title:first-child { margin-top: 0; }
.chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: var(--aqua-50); color: var(--aqua-600); border: 1px solid #cdeef3; padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.chip.inactive { background: #f2f4f8; color: var(--muted); border-color: var(--line); }
.chip.link { cursor: pointer; }
.chip.link:hover { border-color: var(--aqua-600); background: #d7f3f7; }
.group-assign-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.group-history { margin-top: 8px; }

/* Единый card-стиль для «списковых» таблиц аналитики (помесячная детализация) —
   те же радиус+тень, что у .table-wrap. Таблица НЕ растягивается на всю ширину
   контейнера (убрали width:100%+table-layout:fixed) — с малым числом .amt-колонок
   это раньше отдавало ВСЁ лишнее место подписи-колонке, и цифры оказывались
   далеко справа с гигантским пустым разрывом. auto-layout + сама по себе ширина
   по контенту + более широкие .amt-колонки (жирнее, вместо тонких) — так плотнее
   и опрятнее. */
.pay-history { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 8px; }
.pay-history table { width: auto; min-width: 100%; border-collapse: collapse; }
.pay-history th, .pay-history td { padding: 12px 20px; text-align: left; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.pay-history th { background: #fbfcfe; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.pay-history th.amt, .pay-history td.amt { text-align: right; font-weight: 700; color: var(--navy); min-width: 138px; }
/* Заголовкам разрешаем перенос на 2 строки (длинные подписи вроде «Общие расходы»
   не помещаются в узкую колонку в одну строку и раньше вылезали на соседние ячейки).
   Числовые значения всегда в одну строку — переносить нечего, и так компактны. */
.pay-history th.amt { white-space: normal; line-height: 1.25; vertical-align: bottom; }
.pay-history td.amt { white-space: nowrap; }
.pay-history tbody tr:hover { background: var(--navy-50); }
.pay-history tfoot td, .pay-history tfoot th { background: var(--navy-50); font-weight: 800; color: var(--navy); }

/* ── Модалка ───────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(23,35,59,.42); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 18px;
}
.modal-overlay[hidden] { display: none; }
.modal { background: var(--card); border-radius: 18px; width: 100%; max-width: 400px; padding: 22px; box-shadow: 0 20px 60px rgba(20,40,80,.25); }
.modal-title { font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 14px; }
.modal-body { display: flex; flex-direction: column; gap: 12px; }
.modal-body label { font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 6px; }
.modal-body input, .modal-body select {
  padding: 11px 12px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); outline: none; color: var(--ink);
}
.modal-body input:focus, .modal-body select:focus { border-color: var(--aqua); }
.field-block { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 13px; color: var(--muted); }
.day-picker-row { display: flex; gap: 5px; }
.day-btn {
  flex: 1; padding: 9px 0; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: none; color: var(--muted); font-weight: 700; font-size: 13px; transition: all .12s;
}
.day-btn:hover { border-color: var(--aqua); color: var(--navy); }
.day-btn.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.modal-actions { display: flex; gap: 10px; margin-top: 18px; justify-content: flex-end; }
.modal-actions .btn-ghost { padding: 10px 16px; }
.modal-actions .btn-primary { padding: 10px 18px; }
.modal-actions .btn-danger { background: var(--danger); color: #fff; border: none; padding: 10px 18px; border-radius: var(--radius-sm); font-weight: 600; }
.modal-actions .btn-danger:hover { filter: brightness(.94); }
.modal-hint { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* ── Тост (нижний правый угол — не перекрывает контент) ──── */
.toast {
  position: fixed; bottom: 20px; right: 20px;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px;
  font-size: 13px; font-weight: 600; z-index: 200; box-shadow: var(--shadow); max-width: min(320px, 80vw);
  animation: toast-in .18s ease-out;
}
.toast.err { background: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ── Визуальное подтверждение автосохранения (без тоста на каждую ячейку) ── */
@keyframes flash-saved-kf {
  0% { background-color: rgba(47,185,104,.28); }
  100% { background-color: transparent; }
}
.flash-saved { animation: flash-saved-kf .9s ease-out; border-radius: 6px; }
input.flash-saved, textarea.flash-saved { animation: flash-saved-kf .9s ease-out; }

/* ── Подсветка строки клиента при переходе из дашборда ───── */
@keyframes row-flash-kf {
  0%, 100% { background-color: transparent; }
  30% { background-color: var(--aqua-50); }
}
tr.row-flash { animation: row-flash-kf 1.8s ease-out; }

/* ── Адаптив ───────────────────────────────────────────── */
@media (max-width: 860px) {
  .burger { display: flex; }
  .topnav { margin-left: 0; }
  .navlink { padding: 8px 11px; }
  .user-name { display: none; }
  .sidebar {
    position: fixed; top: 58px; left: 0; bottom: 0; height: auto; z-index: 50;
    transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--shadow);
  }
  .sidebar.open { transform: translateX(0); }
  .scrim.show { display: block; position: fixed; inset: 58px 0 0 0; background: rgba(23,35,59,.3); z-index: 45; }
  .content { padding: 14px; }
  .clients-layout { grid-template-columns: 1fr; }
  .clients-list-pane { height: auto; max-height: 46vh; position: static; }
}
@media (max-width: 480px) {
  body { font-size: 14px; }
  .content { padding: 10px; }
  .brand span { display: none; }
  .view-head h2 { font-size: 17px; }
}

/* На десктопе таблица оплат/расходов группы должна ВСЕГДА занимать ровно ширину
   экрана (не оставлять пустое место, не требовать скролла на обычных мониторах) —
   колонки узкие не проблема, лишь бы вписывались. База (мобильная, выше) — точные
   px + width:max-content + горизонтальный скролл, это остаётся для узких экранов.
   На десктопе переключаем на проценты от 100% ширины table — поскольку обе таблицы
   (.table-wrap) на странице всегда одной ширины (соседние блоки одной колонки),
   одинаковые % колонки всё равно совпадают пиксельно между payments и expenses. */
/* table-layout:fixed НЕ уважает min-width/width:max(%,px) на ячейках, если их
   сумма шире таблицы — браузер пропорционально СЖИМАЕТ все колонки под факти-
   ческую ширину table, полностью игнорируя любой «пол» (проверено эмпирически:
   48px-пол на деле рендерился в 39px). Единственный надёжный способ — выбрать
   порог, при котором сами ПРОЦЕНТЫ (без всякого пола) уже дают читаемую ширину;
   выше порога процент только растёт, ниже — работает мобильная схема (точные
   px + горизонтальный скролл), уже проверенная. 1180px: контент-область после
   сайдбара (268px) ≈ 870px, 5.75% от неё ≈ 50px на колонку месяца — комфортно. */
@media (min-width: 1180px) {
  table.paytable { width: 100%; }
  .col-name, .cell-name { width: 17%; }
  .col-day, .cell-day { width: 6%; }
  .cell-month, th.col-month, .cell-total-sm { width: 5.75%; }
  .col-total, .cell-total { width: 8%; }
  .cell-name.wide, th.col-name.wide { width: 23%; }
}

/* ── Расписание группы (чип в шапке) ──────────────────── */
.schedule-chip {
  width: 100%; margin-top: -4px; margin-bottom: 12px; font-size: 13px; color: var(--navy);
  background: var(--navy-50); display: inline-block; padding: 6px 12px; border-radius: 999px; font-weight: 600;
}

/* ── Блок расходов группы ─────────────────────────────── */
.expenses-block { margin-top: 26px; }
.expenses-head { margin-bottom: 12px; }
.expenses-head h3 { margin: 0; font-size: 16px; color: var(--navy); }
.cell-total-sm { text-align: right; padding: 8px 6px; font-weight: 600; color: var(--muted); font-size: 13px; width: 58px; }
.exp-total-row td { background: #fbfcfe; font-weight: 700; }
.exp-total-row .cell-name { font-weight: 800; color: var(--navy); }

/* В редактируемых месячных таблицах (оплаты и расходы группы, общие расходы)
   значения ячеек — инпуты по центру; итоговые строки (Спортсменов/Оборот/
   Итого расходов/Прибыль) выравниваем так же, иначе right-align смещает цифры
   итогов относительно значений в колонках. Аналитические read-only таблицы
   (без .edit-months) остаются right-aligned — там сами данные выровнены вправо. */
table.edit-months tfoot .cell-total-sm { text-align: center; padding-left: 2px; padding-right: 2px; }

/* Сплит-ячейка «выручка / прибыль»: тот же столбец месяца, два значения одно под
   другим — вместо отдельной второй таблицы только ради прибыли. */
.cell-split { padding: 5px 6px; line-height: 1.35; }
.cell-split .split-rev { display: block; font-weight: 700; color: var(--navy); }
.cell-split .split-profit { display: block; font-size: 11px; font-weight: 700; }
.cell-split .split-profit.pos { color: var(--ok); }
.cell-split .split-profit.neg { color: var(--danger); }

/* Расходы — отдельная цветовая гамма (тёплая/красная), чтобы визуально не путать
   с зелёно-аквовыми оплатами: то же .has-val, но внутри .exptable (расходы группы
   и общие расходы аналитики), а не .paytable без этого класса (доходы). */
.exptable .cell-month.has-val { background: linear-gradient(0deg, #fdecec, #fdecec); }
.exptable .cell-month.saving input { color: var(--danger); }
/* Строка «Прибыль» — фон каждой ячейки по знаку (не единый нейтральный фон на
   всю строку), чтобы отрицательные месяцы сразу читались красным, а не текстом
   на невпопад-зелёном фоне. */
.exp-profit-row td { font-weight: 800; }
.exp-profit-row .cell-total-sm.pos-text, .exp-profit-row .cell-total.pos-text { background: #e5f7ec; }
.exp-profit-row .cell-total-sm.neg-text, .exp-profit-row .cell-total.neg-text { background: #fdecec; }

/* ── Контакты клиента (инлайн-поля, авто-сохранение по blur) ──────────── */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 6px; }
.contact-item { background: var(--navy-50); border-radius: var(--radius-sm); padding: 8px 12px 9px; transition: background-color .15s; }
.contact-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; margin-bottom: 3px; }
.contact-input {
  width: 100%; font-size: 14px; font-weight: 600; color: var(--ink); background: none;
  border: none; border-bottom: 1.5px solid transparent; padding: 1px 0 2px; outline: none;
}
.contact-input::placeholder { color: #9aa5bc; font-weight: 400; }
.contact-input:hover { border-bottom-color: var(--line); }
.contact-input:focus { border-bottom-color: var(--aqua); }
.note-box { background: var(--aqua-50); border-radius: var(--radius-sm); padding: 4px 4px; transition: background-color .15s; }
.note-input {
  width: 100%; font-size: 14px; color: var(--ink); line-height: 1.5; background: none; border: none;
  outline: none; resize: vertical; padding: 8px 10px; font-family: inherit;
}
.note-input::placeholder { color: #8fb9bd; }

/* ── Настройки: тренеры / бассейны ────────────────────── */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.settings-pane { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; }
.settings-pane-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.settings-pane-head h3 { margin: 0; font-size: 16px; color: var(--navy); }
.settings-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 4px; border-bottom: 1px solid var(--line-2);
}
.settings-row:last-child { border-bottom: none; }
.trainer-row { align-items: flex-start; }
.trainer-info { min-width: 0; }
.trainer-creds { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.cred-item { font-size: 12px; color: var(--muted); background: var(--navy-50); padding: 3px 9px; border-radius: 999px; }
.cred-pw { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--navy); font-weight: 700; background: var(--aqua-50); }
.trainer-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }

/* ── Аналитика ─────────────────────────────────────────── */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 24px; }
.kpi-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; }
.kpi-val { font-size: 24px; font-weight: 800; color: var(--navy); letter-spacing: -.01em; }
.kpi-card.pos .kpi-val { color: var(--ok); }
.kpi-card.neg .kpi-val { color: var(--danger); }
.kpi-lbl { font-size: 12px; color: var(--muted); margin-top: 4px; font-weight: 600; }
.neg-text { color: var(--danger) !important; }

.bar-chart {
  display: flex; align-items: flex-end; gap: 6px; height: 180px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px 12px 8px; margin-bottom: 8px; overflow-x: auto;
}
.bar-col { flex: 1; min-width: 48px; display: flex; flex-direction: column; align-items: center; height: 100%; }
.bar-pair { flex: 1; display: flex; align-items: flex-end; gap: 4px; width: 100%; justify-content: center; }
.bar { width: 18px; border-radius: 3px 3px 0 0; min-height: 2px; }
.bar-rev { background: var(--aqua); }
.bar-exp { background: #f0b23a; }
.bar-lbl { font-size: 10px; color: var(--muted); margin-top: 6px; font-weight: 600; }
.chart-legend { display: flex; gap: 16px; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.sw-rev { background: var(--aqua); }
.sw-exp { background: #f0b23a; }
.sw-line { width: 14px; height: 2px; border-radius: 1px; display: inline-block; }

/* ── График тренда чистой прибыли (SVG, скользящее среднее) ───────────── */
.profit-trend-wrap {
  position: relative;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 12px 8px; margin-bottom: 8px;
}
.profit-trend-svg { width: 100%; height: 220px; display: block; overflow: visible; }
.ptc-zero { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; }
.ptc-raw { fill: none; stroke: #cfd6e4; stroke-width: 1.5; }
.ptc-ma { fill: none; stroke: var(--navy); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ptc-dot { cursor: pointer; }
.ptc-dot.pos { fill: var(--ok); }
.ptc-dot.neg { fill: var(--danger); }
.ptc-label { fill: var(--muted); font-size: 10px; font-weight: 600; text-anchor: middle; font-family: var(--font); }

.chart-tooltip {
  position: absolute; transform: translate(-50%, -100%) translateY(-10px);
  background: var(--navy); color: #fff; padding: 7px 11px; border-radius: 8px;
  font-size: 12px; line-height: 1.5; white-space: nowrap; pointer-events: none;
  box-shadow: 0 6px 16px rgba(20,40,80,.25); z-index: 5;
}
.chart-tooltip b { font-weight: 700; }

@media (max-width: 860px) {
  .settings-grid { grid-template-columns: 1fr; }
}

/* ── Дашборд ───────────────────────────────────────────── */
.dash-empty { color: var(--muted); background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 16px; text-align: center; font-size: 14px; }
.dash-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.dash-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); padding: 14px 16px; cursor: pointer; transition: border-color .15s;
}
.dash-card:hover { border-color: var(--aqua); }
.dash-card-title { font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.dash-card-sub { color: var(--muted); font-size: 13px; line-height: 1.4; }

.dash-list { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.dash-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line-2); cursor: pointer;
}
.dash-row:last-child { border-bottom: none; }
.dash-row:hover { background: var(--navy-50); }
.archive-row { cursor: default; }
.archive-row:hover { background: none; }
.dash-badge { font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.dash-badge.ok { background: #e5f7ec; color: var(--ok); }
.dash-badge.wait { background: var(--navy-50); color: var(--navy); }
.dash-badge.overdue { background: #fdecec; color: var(--danger); }

/* ── Итоги в таблицах группы / общие расходы / аналитика v2 ── */
.exp-count-row td { background: #fbfcfe; }
.exp-count-row .cell-name { font-weight: 700; color: var(--muted); }
.exp-count-row .cell-total-sm { text-align: center; }
.exp-profit-row .cell-name { font-weight: 800; color: var(--navy); }
.pos-text { color: var(--ok) !important; }
.cell-total-sm.center { text-align: center; }
.tg-link { color: var(--aqua-600); text-decoration: none; font-weight: 600; font-size: 13px; }
.tg-link:hover { text-decoration: underline; }
.oh-hint { font-size: 13px; color: var(--muted); margin: -4px 0 10px; }
.year-summary-row td { background: var(--navy-50); font-weight: 800; color: var(--navy); }