/* Стиль по mockup-razbor.html: лёгкие таблицы, tabular-nums, пилюли отклонений,
спарк-бары css-дивами, прогноз курсивом/штриховкой. */
:root{
--bg:#f6f7f9; --card:#fff; --ink:#1a1d23; --mut:#7a8090; --line:#e6e8ec;
--good:#0e7a3d; --goodbg:#e8f5ee; --bad:#b3261e; --badbg:#fdecea;
--acc:#2456c8; --accbg:#eef3fd; --fc:#9aa1b0;
}
*{box-sizing:border-box}
body{margin:0;font:14px/1.45 -apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);padding:24px}
/* Установленное на «Домой» приложение открывается во весь экран, без адресной
строки: снизу в поле попадает полоса жеста, в альбомной ориентации — «чёлка».
Отступ вешаем на , а НЕ на : у body свой padding, и он разный на
трёх брейкпойнтах (24 / 8 / 6-10 px) — перебив его здесь, мы вернули бы
телефону широкие поля ровно в том режиме, ради которого их и ужимали.
На десктопе env() равен нулю, поэтому правило там ничего не меняет. */
@media (display-mode:standalone){
html{background:var(--bg);
padding:env(safe-area-inset-top) env(safe-area-inset-right)
env(safe-area-inset-bottom) env(safe-area-inset-left)}
}
.wrap{max-width:1200px;margin:0 auto}
h1{font-size:18px;margin:0 0 4px}
h2{font-size:15px;margin:26px 0 2px}
.sub{color:var(--mut);font-size:13px;margin-bottom:20px}
.note{color:var(--mut);font-size:12.5px;margin-bottom:10px}
.foot{color:var(--mut);font-size:12px;margin-top:18px}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
/* шапка */
.topbar{display:flex;align-items:center;gap:18px;margin-bottom:18px;flex-wrap:wrap}
.topbar .brand{font-weight:700;font-size:15px}
.nav{display:flex;gap:4px}
.nav a{padding:5px 12px;border-radius:8px;color:var(--ink)}
.nav a.on{background:var(--acc);color:#fff}
.nav a:hover{text-decoration:none;background:var(--accbg)}
.nav a.on:hover{background:var(--acc)}
.topbar .spacer{flex:1}
.paytoggle{font-size:12.5px;color:var(--mut);border:1px solid var(--line);border-radius:16px;padding:4px 12px;background:#fff}
.paytoggle b{color:var(--ink)}
.logout{color:var(--mut);font-size:12.5px}
/* конструктор */
.panel{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:14px}
.ctrls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:13px}
.lbl{color:var(--ink);font-weight:600}
/* Подпись + её кнопки как одно целое: при переносе строки они едут вместе.
`flex-wrap` тут не лишний — на узком экране пара шире вьюпорта, и без него
страница получала горизонтальную прокрутку; так подпись просто встаёт НАД
своими кнопками, а не отрывается в конец чужого ряда. */
.grp{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg a,.seg label{padding:5px 12px;background:#fff;cursor:pointer;color:var(--ink)}
.seg a:hover{text-decoration:none;background:var(--accbg)}
.seg .on{background:var(--acc);color:#fff}
.seg .on:hover{background:var(--acc)}
.seg input{display:none}
.seg label:has(input:checked){background:var(--acc);color:#fff}
.chip{border:1px solid var(--line);border-radius:16px;padding:4px 12px;background:#fff;cursor:pointer;display:inline-block}
.chip:has(input:checked),.chip.sel{background:var(--accbg);border-color:var(--acc);color:var(--acc)}
.chip input{display:none}
.chips{display:flex;flex-wrap:wrap;gap:6px;max-width:100%;align-items:center}
/* Выбор точек: выпадающий список с галочками (`_v3_pointsel.html`).
Раскрытие держит скрытый чекбокс `#ddopen` — он же уносит состояние в форму,
поэтому список переживает перерисовку панели. Чекбокс не `display:none`:
так он остаётся в порядке обхода Tab, а видимую рамку фокуса получает ярлык. */
.dd{position:relative;display:inline-block}
.ddbox{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ddbtn{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;
border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;color:var(--ink)}
.ddbtn:hover{background:var(--accbg)}
.ddbtn.sel{background:var(--accbg);border-color:var(--acc);color:var(--acc);font-weight:600}
.ddbox:focus-visible ~ .ddbtn{outline:2px solid var(--acc);outline-offset:1px}
.cv{color:var(--mut);font-size:10px}
.ddbtn.sel .cv{color:var(--acc)}
.ddmenu{display:none;position:absolute;z-index:21;top:calc(100% + 4px);left:0;min-width:240px;
max-height:min(60vh,420px);overflow:auto;background:var(--card);border:1px solid var(--line);
border-radius:10px;box-shadow:0 8px 24px rgba(26,29,35,.14);padding:6px}
.ddveil{display:none;position:fixed;inset:0;z-index:20}
.ddbox:checked ~ .ddmenu,.ddbox:checked ~ .ddveil{display:block}
.ddz{display:block;padding:6px 10px 2px;color:var(--mut);font-size:11px;font-weight:600;text-transform:uppercase}
.ddrow{display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:6px;cursor:pointer;white-space:nowrap}
.ddrow:hover{background:var(--accbg)}
.ddrow input{accent-color:var(--acc);margin:0;flex:none}
.ddclr{display:block;margin-top:4px;padding:6px 10px;border-top:1px solid var(--line);color:var(--acc);cursor:pointer}
.ddclr:hover{text-decoration:none;background:var(--accbg)}
/* На узком экране кнопка стоит у правого края, и список, растущий вправо,
уезжал бы за вьюпорт вместе с горизонтальной прокруткой страницы. Разворачиваем
его влево и разрешаем длинным именам переноситься. */
@media (max-width:640px){
.ddmenu{left:auto;right:0;min-width:200px;max-width:86vw}
.ddrow{white-space:normal}
}
select,input[type=month],input[type=date]{font:inherit;border:1px solid var(--line);border-radius:8px;padding:4px 8px;background:#fff;color:var(--ink)}
/* пикер периода: видим только инпут выбранного вида */
.pi{display:none}
.ctrls:has(select[name=pk] option[value=month]:checked) .pi-month{display:inline-block}
.ctrls:has(select[name=pk] option[value=quarter]:checked) .pi-quarter{display:inline-block}
.ctrls:has(select[name=pk] option[value=year]:checked) .pi-year{display:inline-block}
.ctrls:has(select[name=pk] option[value=custom]:checked) .pi-custom{display:inline-flex;gap:6px;align-items:center}
/* таблицы */
table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;font-variant-numeric:tabular-nums}
th,td{padding:7px 10px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
th{background:#fafbfc;color:var(--mut);font-weight:600;font-size:12px}
th:first-child,td:first-child{text-align:left}
tbody tr:hover{background:#fbfcff}
tbody tr[hx-get]{cursor:pointer}
.max{background:var(--accbg);font-weight:600}
.tot td{font-weight:700;background:#fafbfc;border-top:2px solid var(--line)}
.tot2 td{font-weight:600;background:#fafbfc;color:var(--mut)}
.pos{color:var(--good)} .neg{color:var(--bad)}
.pill{display:inline-block;padding:1px 7px;border-radius:10px;font-size:12px;font-weight:600}
.pill.pos{background:var(--goodbg)} .pill.neg{background:var(--badbg)}
.fcst{color:var(--fc);font-style:italic}
.fcst .pill{font-style:normal}
.tag{font-size:10.5px;color:var(--fc);border:1px solid var(--line);border-radius:4px;padding:0 4px;margin-left:5px;font-style:normal;white-space:nowrap}
.sm{font-size:11.5px;color:var(--mut)}
.crumb{font-size:12.5px;color:var(--mut);margin-bottom:8px}
.crumb b{color:var(--ink)}
.badge{font-size:11px;color:var(--acc);background:var(--accbg);border-radius:4px;padding:1px 6px;margin-left:6px}
/* спарк 12 мес — вертикальные колонки */
.spark{display:inline-flex;align-items:flex-end;gap:2px;height:22px;width:110px}
.spark i{flex:1;background:#c9d4ea;border-radius:1.5px;min-height:1px}
.spark i.cur{background:var(--acc)}
.spark i.f{background:repeating-linear-gradient(45deg,#c9d4ea,#c9d4ea 2px,#eef1f6 2px,#eef1f6 4px)}
/* горизонтальные бары (Разбор, год к году) */
.barcell{width:150px}
.bars{display:flex;flex-direction:column;gap:2px}
.b{height:5px;border-radius:3px;background:#c9d4ea}
.b.cur{background:var(--acc)}
.b.f{background:repeating-linear-gradient(45deg,#c9d4ea,#c9d4ea 3px,#eef1f6 3px,#eef1f6 6px)}
/* KPI-карточки (drill точки) */
.cards{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 16px;min-width:170px}
.card .t{color:var(--mut);font-size:12px}
.card .v{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.card .d{font-size:12.5px;margin-top:2px}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:900px){.cols2{grid-template-columns:1fr}}
/* login */
.login{max-width:340px;margin:80px auto;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:24px}
/* Поля входа и кнопка — одна коробка: высота задана явно, а не выведена из
padding. ⚠ Селектор с [type] нужен ради специфичности: общее правило
`input[type=email]` из блока админки стоит в файле НИЖЕ и при равной
специфичности перебивало `.login input` — почта получала чужой padding
и была на 10px ниже пароля. */
.login input[type],.login button{width:100%;height:42px;box-sizing:border-box;
font:inherit;border-radius:8px;margin:0 0 10px}
.login input[type]{border:1px solid var(--line);padding:0 12px;
background:#fff;color:var(--ink)}
.login input[type]:focus{outline:none;border-color:var(--acc)}
.login input[type]::placeholder{color:var(--mut)}
.login h1{margin:0 0 16px}
.login button{background:var(--acc);color:#fff;border:0;cursor:pointer;
font-weight:600;margin:6px 0 0}
.login button:hover{opacity:.92}
.err{color:var(--bad);font-size:13px;margin-top:8px}
/* ---------- V3 ---------- */
.wrap.wide{max-width:1600px}
.nav a.soon{color:var(--fc);cursor:default}
.nav a.soon:hover{background:transparent;text-decoration:none}
/* Возврат из раздела «Пользователи» на экраны данных: не пункт меню, а кнопка —
обведена, чтобы не путалась с вкладками. */
.nav a.back-dash{border:1px solid var(--acc);color:var(--acc)}
.nav a.back-dash:hover{background:var(--accbg)}
/* Подвкладки админского раздела. */
.subtabs{margin-bottom:14px}
/* Корректировка бухгалтерии — строка между днями и итогом. Тон свой, не голубой:
это не выручка кассы, а ручная правка, и путать их нельзя. Курсор-подсказка,
потому что за каждой суммой стоит история в title. */
table.days tr.adj td{background:var(--card);box-shadow:inset 0 0 0 999px #fff6e5;
font-weight:600;color:#8a5a00;cursor:help}
table.days tr.adj td.stick{background:#fdf1dc;color:#8a5a00}
table.days tr.adj td.sub,table.days tr.adj td.tot-col{background:#fbeccd}
table.days tr.adj td.ly,table.days tr.adj td.dlt{background:var(--l-ly)}
/* Экран «Корректировки»: два поля суммы, знак крупный и цветной — чтобы нельзя
было спутать, в какое поле вводишь. */
.adj-sum{font:inherit;width:130px;border:1px solid var(--line);border-radius:8px;
padding:4px 8px;text-align:right;font-variant-numeric:tabular-nums}
.adj-note{font:inherit;flex:1;min-width:220px;border:1px solid var(--line);
border-radius:8px;padding:4px 8px}
.lbl.adj-plus{color:var(--good);font-size:18px}
.lbl.adj-minus{color:var(--bad);font-size:18px}
.seg.qtr{margin-right:6px}
.seg.qtr label{padding:5px 9px}
.hint{background:var(--card);border:1px dashed var(--line);border-radius:10px;padding:22px;color:var(--mut);text-align:center}
.badge.fix{background:#fff4e5;color:#8a5a00}
.fixmark{color:#c07800;margin-left:5px;cursor:help;font-size:12px}
/* Метка корректировки: свой класс, а не `.fixmark`. Тот же цвет, но стоит СЛЕВА
от суммы (правка владельца 18.08.2026) — значит и отступ ему нужен справа.
Общий класс тут не годится: им же помечена звёздочка незавершённого месяца в
колонке даты, а она стоит ПОСЛЕ подписи и отступ ей нужен слева. */
.adjmark{color:#c07800;margin-right:5px;cursor:help;font-size:12px}
/* Прокрутка внутри рамки по обеим осям — только так шапка может липнуть к верху
(у sticky нужен именно этот контейнер как область прокрутки). */
.scroll{overflow:auto;max-height:calc(100vh - 210px);border:1px solid var(--line);
border-radius:10px;background:var(--card)}
/* Слои таблицы. Голубой КОЛОНКИ живёт в background, тон СТРОКИ — в inset box-shadow.
Свойства разные, поэтому на ячейке применяются оба и складываются: пересечение
голубой колонки с голубой строкой темнеет само, без перечисления комбинаций.
Sticky-колонка получает непрозрачную базу + тот же box-shadow: тон тот же,
но под ней ничего не просвечивает при горизонтальной прокрутке. */
table.days{
border:0;border-radius:0;font-size:13px;
/* collapse ломает sticky у th, а overflow:hidden (общее правило table) делает
саму таблицу контейнером прокрутки — тогда шапка липнет к ней, а не к .scroll */
border-collapse:separate;border-spacing:0;overflow:visible;
--l-col:rgba(36,86,200,.075); /* колонка и шапка (≈ --accbg) */
--l-col-x:rgba(36,86,200,.16); /* колонка «Всего» — акцент, темнее */
--l-tot:rgba(36,86,200,.11); /* строка «Итого за период» */
--l-avg:rgba(36,86,200,.05); /* строка «Среднее» — вдвое слабее */
--l-we:rgba(36,86,200,.05); /* выходной — слегка голубой фон строки */
--op-col:#f0f2fb; /* --l-col, заранее смешанный с белым */
--op-col-2:#e4e9f8; /* шапка голубой колонки — на тон плотнее */
--op-col-x:#dce4f6; /* --l-col-x, то же */
--l-ly:rgba(36,86,200,.22); /* колонка прошлого года — плотнее «Всего» */
--op-ly:#c2d0f0; /* её шапка, на тон плотнее тела */
--l-ly-x:rgba(36,86,200,.28); /* прошлый год × строки итогов */
--op-ly-fy:#b4c3ec; /* прошлый год × «Прогноз на год» */
--op-fy:#e2e8f8; /* строка «Прогноз на год» — темнее */
--op-fy-x:#cfd9f1; /* её пересечение с колонкой «Всего» */
--op-fy-xx:#bcc9ea; /* «Прогноз на год» × «Всего» — самый плотный */
--hv:36,86,200; /* hover обычной строки */
--hv-we:179,38,30; /* hover выходного */
--ease:cubic-bezier(.22,1,.36,1);
/* высоты строк шапки фиксированы: от них считается top для sticky */
--h-zones:30px;
}
table.days th,table.days td{padding:5px 8px}
table.days th.pt{font-weight:600;color:var(--ink);font-size:11px;line-height:1.25;
white-space:normal;max-width:96px;min-width:70px;vertical-align:top;text-align:right;
background:var(--op-col)}
table.days th.pt .until{display:block;font-weight:400;font-size:10px;color:var(--mut);
white-space:nowrap}
table.days th.q,table.days .q{color:var(--bad);font-weight:700}
table.days th.pt .ofd,.foot .ofd{font-size:9px;font-weight:700;color:#116b5c;
background:#d8efe9;border-radius:3px;padding:0 3px;letter-spacing:.02em;white-space:nowrap}
table.days tr.zones th.z{text-align:center;font-size:12px;letter-spacing:.02em;
color:var(--ink);background:var(--op-col);border-left:2px solid var(--line);
height:var(--h-zones)}
/* Прогноз года — самая нижняя строка таблицы. Тон темнее, чем у прогноза
месяца над ней: чем длиннее горизонт, тем плотнее фон. */
table.days tr.fy td{background:var(--op-fy-x);box-shadow:none;color:var(--acc);
font-weight:700;border-top:1px solid rgba(36,86,200,.20);cursor:help}
table.days tr.fy td.stick{background:var(--op-fy-x);color:var(--acc)}
table.days tr.fy td.sub{background:var(--op-fy-x)}
table.days tr.fy td.tot-col{background:var(--op-fy-xx)}
/* Строки итогов задают ячейкам СВОЙ непрозрачный фон и тем самым перебивают тон
колонки — поэтому прошлый год приходится доводить в каждой из них отдельно,
иначе внизу таблицы он оказывался светлее «Всего», хотя выше был плотнее. */
table.days tr.fy td.ly,table.days tr.fy td.dlt{background:var(--op-ly-fy)}
/* Колонки подытогов зон и «Итого за день» — голубые по всей высоте.
Шапка у них ТЕМНЕЕ соседних: в теле голубая колонка выделяется на фоне белых
ячеек, а в шапке фон голубой у всех — без своего тона «Итого» терялось. */
table.days td.sub{background:var(--l-col)}
table.days th.sub,table.days td.sub{font-weight:600}
table.days thead th.sub{background:var(--op-col-2)}
table.days td.sub{color:var(--ink)}
table.days td.tot-col{background:var(--l-col-x)}
table.days thead th.tot-col{background:var(--op-col-x)}
/* ⚠ Вертикальные отбивки голубых колонок — ГОЛУБЫЕ, а не серые `--line`
(правка владельца 13.08.2026). Серая линия поверх тонированной ячейки
светлее её и читается как белый зазор — в блоке итогов такие полосы
резали таблицу на куски. Полупрозрачный синий всегда ТЕМНЕЕ подложки,
на какой бы тон ни лёг. */
table.days th.tot-col,table.days td.tot-col{font-weight:700;
border-left:2px solid rgba(36,86,200,.20);min-width:104px}
/* Прошлый год («По месяцам»): крайняя правая колонка. Тон ПЛОТНЕЕ, чем у «Всего»
(правка владельца 10.08.2026) — колонка отделяет прошлый год от текущего
периода, и на неё смотрят намеренно, а не мельком. Тон живёт в `background`,
поэтому тон строки (итог/среднее/прогноз) ложится сверху сам и складывается,
как у остальных голубых колонок.
⚠ Цифры здесь тёмные, а не серые: на плотном фоне серый давал контраст ~2,6:1,
для денег этого мало. */
table.days th.ly,table.days td.ly{border-left:2px solid rgba(36,86,200,.20);
min-width:96px;color:var(--ink);font-weight:600}
table.days td.ly{background:var(--l-ly)}
table.days thead th.ly{text-align:right;vertical-align:top;font-weight:600;
background:var(--op-ly)}
/* «Дельта, %» — продолжение блока прошлого года, поэтому тот же тон и БЕЗ жирной
черты слева: черта отбивает начало блока, а не каждую его колонку. */
table.days th.dlt,table.days td.dlt{min-width:72px;background:var(--l-ly)}
table.days thead th.dlt{text-align:right;vertical-align:top;font-weight:600;
background:var(--op-ly);color:var(--ink)}
/* Знак дельты красим ВЕЗДЕ, включая строки итогов: `tr.avg td` и `tr.fcm td`
задают свой цвет с большей специфичностью, чем .pos/.neg, и внизу таблицы
дельта выходила серой или синей — то есть без знака, ради которого она есть. */
table.days td.dlt.pos{color:var(--good)}
table.days td.dlt.neg{color:var(--bad)}
/* Блок прошлого года в «По дням» — второй «этаж» футера, а не продолжение
первого: отбиваем его той же жирной чертой, что отделяет итоги от дней. */
table.days tr.lysplit td{border-top:2px solid var(--acc)}
/* Тон строки — box-shadow поверх непрозрачной базы. Голубым колонкам явно
возвращаем их background (иначе правило строки его перекроет) — так слои
складываются, а не спорят. */
/* Выходные — слегка голубой фон строки (тон складывается с голубыми колонками). */
table.days tr.we td{background:var(--card);box-shadow:inset 0 0 0 999px var(--l-we)}
table.days tr.we td.sub{background:var(--l-col)}
table.days tr.we td.tot-col{background:var(--l-col-x)}
table.days tr.we td.ly,table.days tr.we td.dlt{background:var(--l-ly)} /* иначе выходные «выбеливают» колонку прошлого года */
/* Пометка min/max слева от числа: max — зелёный треугольник вверх, min — красный вниз. */
.mk{display:inline-block;width:0;height:0;margin-right:4px;vertical-align:middle}
.mk.mx{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:6px solid var(--good)}
.mk.mn{border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid var(--bad)}
/* Пустая строка-разрыв: белая полоса между днями и итогами и между текущим годом
и прошлым (правка владельца 13.08.2026). Своего фона у неё нет — только белый
лист карточки, поэтому тонированные блоки читаются как отдельные. */
table.days tr.gap td{height:9px;padding:0;background:var(--card);border:0;
box-shadow:none}
/* Разделители ВНУТРИ блока итогов — голубые, а не светло-серые: серая линия
`--line` на тонированной строке читалась как белый зазор, и таких зазоров
набиралось пять подряд. Белый разрыв теперь ровно там, где он поставлен. */
table.days tr.tot td,table.days tr.avg td,
table.days tr.fcm td,table.days tr.fy td{border-bottom-color:rgba(36,86,200,.20)}
/* ...и во ВСЕХ строках — у голубых колонок. На тонированной ячейке серый
`--line` светлее подложки и читается как белая щель; полупрозрачный синий
всегда темнее. Одно правило на все ряды, чтобы сетка была одного языка. */
table.days td.tot-col,table.days td.ly,table.days td.dlt,
table.days td.sub{border-bottom-color:rgba(36,86,200,.20)}
table.days tr.tot td{background:var(--card);box-shadow:inset 0 0 0 999px var(--l-tot);
font-weight:700;padding-top:9px;padding-bottom:9px;font-size:13.5px;
border-top:2px solid var(--acc)}
table.days tr.tot td.sub{background:var(--l-col)}
table.days tr.tot td.tot-col{background:var(--l-col-x)}
/* Итог периода по аэропорту и прогноз месяца — ЧЁРНЫМ ЖИРНЫМ (правка владельца
19.08.2026). Это те две цифры, ради которых экран открывают; синим они
читались как служебные, тем более на голубой подложке колонки «Всего».
Прогноз ГОДА и блок «Итого <прошлый год>» остаются синими — они справочные. */
table.days tr.tot td.tot-col{color:var(--ink)}
table.days tr.tot td.ly,table.days tr.tot td.dlt{background:var(--l-ly-x)}
table.days tr.avg td{background:var(--card);box-shadow:inset 0 0 0 999px var(--l-avg);
font-weight:600;color:var(--mut)}
table.days tr.avg td.sub{background:var(--l-col)}
table.days tr.avg td.tot-col{background:var(--l-col-x)}
table.days tr.avg td.ly,table.days tr.avg td.dlt{background:var(--l-ly-x)}
table.days tr.avg td.stick{color:var(--ink)}
/* Прогноз месяца — фон тот же, что у «Прогноза на год», а цифры ЧЁРНЫЕ ЖИРНЫЕ
(правка владельца 19.08.2026): по этой строке принимают решение, и синий
уводил её в служебные. */
table.days tr.fcm td{background:var(--op-fy);box-shadow:none;color:var(--ink);
font-weight:700;border-top:1px solid rgba(36,86,200,.20)}
table.days tr.fcm td.stick{background:var(--op-fy);color:var(--ink)}
table.days tr.fcm td.sub{background:var(--op-fy)}
table.days tr.fcm td.tot-col{background:var(--op-fy-x)}
table.days tr.fcm td.ly,table.days tr.fcm td.dlt{background:var(--op-ly-fy)}
table.days tr.fcm .sm{color:var(--mut)}
/* sticky: первая колонка по горизонтали, шапка по вертикали.
top у каждой строки шапки = сумма высот строк над ней. */
table.days .stick{position:sticky;left:0;z-index:2;background:var(--card);
border-right:2px solid rgba(36,86,200,.20);text-align:left;white-space:nowrap;width:1%}
/* Дата/месяц прижаты к числам — так столбец читается заодно с цифрами. */
table.days td.stick.day{text-align:right;font-variant-numeric:tabular-nums}
table.days thead th{position:sticky;z-index:4}
table.days thead tr.zones th{top:0}
table.days thead tr:last-child th{top:var(--h-zones)}
/* ALL-режим: строка зон скрыта — названия липнут к самому верху. */
table.days.allv thead tr:last-child th{top:0}
/* Подписи «Итого зоны» и «Всего …» в строке с названиями — по центру по горизонтали
и прижаты к ВЕРХНЕЙ грани (в ряд с названиями точек, а не по центру высоты). */
table.days thead tr:last-child th.sub,
table.days thead tr:last-child th.tot-col{text-align:right;vertical-align:top}
/* Шапка обязана быть НЕПРОЗРАЧНОЙ: под ней проезжают цифры — потому в её
правилах стоят --op-* (те же тона, заранее смешанные с белым). */
table.days thead .stick{background:var(--op-col);left:0;z-index:6}
table.days th.corner{font-size:11px;font-weight:600;color:var(--mut);
text-align:right;white-space:nowrap;letter-spacing:.01em}
/* Экран «Ваучеры VIP»: третья строка шапки — типы ваучеров под именем точки,
в ячейках слева от суммы стоит число чеков. Шапка липкая в три яруса, поэтому
высота строки с именами точек фиксирована (--h-pts) — от неё считается top
нижнего яруса; имена в ней не переносим, места хватает: над ними colspan. */
table.days.vt3{--h-pts:26px}
table.days.vt3 th.pt{white-space:nowrap;max-width:none;height:var(--h-pts);
text-align:center;border-left:1px solid var(--line)}
table.days.vt3 th.vt{font-size:10.5px;font-weight:600;color:var(--mut);
text-align:right;vertical-align:top;background:var(--op-col);white-space:nowrap}
table.days.vt3 thead tr.zones th{top:0}
table.days.vt3 thead tr.pts th{top:var(--h-zones)}
table.days.vt3 thead tr.vts th{top:calc(var(--h-zones) + var(--h-pts))}
table.days.vt3.allv thead tr.pts th{top:0}
table.days.vt3.allv thead tr.vts th{top:var(--h-pts)}
/* Число чеков — приглушённое, слева от суммы; не должно спорить с деньгами. */
.ops{display:inline-block;min-width:16px;margin-right:8px;font-size:11px;
font-weight:500;color:var(--mut);font-variant-numeric:tabular-nums}
table.days.vt3 tr.tot .ops,table.days.vt3 tr.avg .ops{font-weight:600}
/* Наведение: слой ::after ЛОЖИТСЯ поверх тона ячейки, а не заменяет его.
z-index:-1 внутри собственного стекового контекста ячейки → над фоном и
тенью, но под цифрами: tabular-nums остаются чёткими. */
/* общий tr:hover из блока таблиц гасим: здесь подсветку рисует ::after */
table.days tbody tr:hover{background:transparent}
table.days tbody td{position:relative;z-index:0}
table.days tbody td::after{content:"";position:absolute;inset:0;pointer-events:none;
z-index:-1;opacity:0;background:rgba(var(--hv),.07);
box-shadow:inset 0 1px 0 rgba(var(--hv),.22),inset 0 -1px 0 rgba(var(--hv),.22);
transition:opacity 150ms var(--ease),background-color 150ms var(--ease)}
table.days tbody tr:hover td::after{opacity:1}
table.days tbody td:hover::after{background:rgba(var(--hv),.11)}
/* сводные строки и так тяжёлые — отзываются рельсами, почти без заливки */
table.days tbody tr.tot td::after,table.days tbody tr.avg td::after{
background:rgba(var(--hv),.04);
box-shadow:inset 0 1px 0 rgba(var(--hv),.28),inset 0 -1px 0 rgba(var(--hv),.28)}
@media (prefers-reduced-motion:reduce){
table.days tbody td::after{transition:none}
}
/* дата и подписи углов шапки: полные на десктопе, короткие на телефоне */
table.days .d-sm,table.days .c-sm{display:none}
/* ---------- V3 · телефон (узкий портрет ИЛИ низкий ландшафт) ----------
max-width:640 ловит портрет; max-height:560 ловит горизонтальный телефон,
где ширина >640, но по высоте всего ~440px. */
@media (max-width:640px), (max-height:560px){
body{padding:8px}
.wrap.wide{max-width:100%}
h1{font-size:16px}
.sub{font-size:12px;margin-bottom:12px}
.note{font-size:11.5px}
/* сноска на телефоне не нужна (на touch title-тултипы всё равно мертвы) */
.v3foot{display:none}
/* панель контролов плотнее, но тап-таргеты ≥ 34px */
.panel{padding:10px}
.ctrls{gap:6px 8px}
.seg a,.seg label{padding:7px 11px}
.seg.qtr label{padding:7px 9px}
select,input[type=month],input[type=date]{padding:6px 8px}
/* меньше отступ от контролов — таблице больше высоты */
.scroll{max-height:calc(100vh - 130px)}
/* таблица: мельче шрифт и теснее ячейки → в кадр влезает больше колонок.
Высоты строк шапки тоже уменьшаем — от них считается top для sticky. */
table.days{font-size:11px;--h-zones:24px}
table.days th,table.days td{padding:4px 6px}
table.days th.pt{font-size:9.5px;min-width:54px;max-width:74px;line-height:1.2}
table.days th.pt .until{font-size:9px}
table.days th.tot-col,table.days td.tot-col{min-width:70px}
table.days th.sub,table.days td.sub{min-width:64px}
table.days th.corner{font-size:10px}
/* дата и подписи углов: компактные формы → узкая липкая колонка */
table.days .d-lg,table.days .c-lg{display:none}
table.days .d-sm,table.days .c-sm{display:inline}
/* width:1% + nowrap = липкая колонка ужимается до содержимого (иначе auto-layout
раздаёт ей лишнюю ширину) */
table.days .stick{font-size:10.5px;border-right-width:1px;width:1%}
table.days td.stick.day{white-space:nowrap}
/* длинные подписи итоговых строк переносим — иначе они держат ширину колонки */
table.days tbody tr.tot td.stick,
table.days tbody tr.avg td.stick,
table.days tbody tr.fcm td.stick,
table.days tbody tr.fy td.stick{white-space:normal;line-height:1.15}
table.days tbody tr.tot td.stick .sm,
table.days tbody tr.avg td.stick .sm,
table.days tbody tr.fcm td.stick .sm{display:block}
table.days .sm{font-size:10px}
table.days tr.tot td,table.days tr.avg td,table.days tr.fcm td{font-size:11px}
table.days tr.tot td{padding-top:6px;padding-bottom:6px;font-size:11.5px}
}
/* ---------- V3 · горизонтальный телефон (низкий экран) ----------
Ширины вдоволь (~950px), в дефиците ВЫСОТА (~440px). Всё, что над таблицей,
ужимаем, а таблице отдаём почти весь экран. */
@media (max-height:560px){
body{padding:6px 10px}
/* заголовок и подзаголовок в горизонте — лишний вертикальный вес */
.v3h1, .v3sub{display:none}
.panel{padding:8px 10px;margin-bottom:8px}
.note{margin-bottom:6px}
/* таблица получает почти весь экран (над ней только контролы + note) */
.scroll{max-height:calc(100vh - 96px)}
/* в горизонте ширины хватает — вернём полную дату и полные подписи углов */
table.days .d-lg,table.days .c-lg{display:inline}
table.days .d-sm,table.days .c-sm{display:none}
table.days tbody tr.tot td.stick,
table.days tbody tr.avg td.stick,
table.days tbody tr.fcm td.stick{white-space:nowrap}
}
/* Запрет выделения таблиц для НЕ-админов (класс `nocopy` на body, см. v3_base).
Бьём только по таблицам: заголовки, меню и подписи выделять по-прежнему можно,
иначе человек не сможет скопировать даже адрес экрана или текст ошибки. */
body.nocopy table.days{user-select:none;-webkit-user-select:none}
/* ---------- V3 · график выручки под таблицей (линия) ---------- */
/* Отбивка от таблицы: график — отдельный блок, а не её продолжение. Правило
общее на все экраны (дни, месяцы, ваучеры) — включается одним `_v3_chart.html`.
На «Ваучерах VIP» графиков два, и черта одинаково отделяет каждый от своей
таблицы. */
.chart{margin:26px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.chart figcaption{font-size:12.5px;color:var(--ink);font-weight:600;margin-bottom:8px}
.cwrap{display:flex;align-items:stretch;gap:6px}
/* ось Y слева: подписи уровней, привязанные к линиям сетки */
.cyaxis{position:relative;width:54px;flex:none;height:170px}
.cy{position:absolute;right:0;transform:translateY(50%);white-space:nowrap;padding-right:5px;
font-size:9.5px;color:var(--mut);font-variant-numeric:tabular-nums}
/* поле графика: левая и нижняя оси + горизонтальные линии-уровни */
.cplot{position:relative;flex:1;min-width:0;height:170px;
border-left:1px solid #c3ccd8;border-bottom:1px solid #aab3c0}
.cgrid{position:absolute;left:0;right:0;height:0;border-top:1px dashed var(--line)}
/* SVG растянут на всё поле (preserveAspectRatio=none), поэтому геометрия задана
в процентах и совпадает с HTML-точками поверх него */
.cline{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
/* Легенда года в подписи графика: цветной квадрат + год. Нужна потому, что
графиков теперь два подряд — текущий год и прошлый, — и по одной подписи
«Выручка по дням» их не различить. */
.clg{margin-left:10px;font-weight:600;color:var(--mut);white-space:nowrap}
.clg i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;
background:#2456c8;vertical-align:baseline}
.chart.prev .clg i{background:#7a8699}
.cpath{fill:none;stroke:#2456c8;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
/* Прошлый год — серым: это фон для сравнения, а не результат периода. Тот же
приём, что у колонки прошлого года в таблице — она тоже бледнее «Всего». */
.chart.prev .cpath{stroke:#7a8699}
.chart.prev .cpath.dash{stroke:#b3bac6}
.chart.prev .carea{fill:rgba(122,134,153,.10)}
.chart.prev .cdot{border-color:#7a8699}
.chart.prev .cdot.we{border-color:#96a1b2}
.cpath.dash{stroke:#8ba3d8;stroke-dasharray:4 3} /* незавершённый период */
/* Прошлый год второй линией в тех же осях: серый и тоньше — он ориентир, а не
равноправный ряд, и не должен спорить с синим за внимание. */
.cpath.ly{stroke:#9aa4b4;stroke-width:1.5}
.cpath.ly.dash{stroke:#c2c8d2;stroke-dasharray:4 3}
.clg.ly i{background:#9aa4b4}
.carea{fill:rgba(36,86,200,.09);stroke:none}
/* Точки ряда: центр — ровно в узле ломаной */
/* Полоса-слот: прозрачная зона наведения во всю высоту поля. Лежит НАД точками
(у них pointer-events:none), поэтому тултип на весь столбец ровно один. */
.cband{position:absolute;top:0;bottom:0;z-index:3}
.cband:hover{background:rgba(36,86,200,.07);
box-shadow:inset 1px 0 0 #c9d4ea,inset -1px 0 0 #c9d4ea}
.cdot{pointer-events:none}
.cdot{position:absolute;width:6px;height:6px;margin:0 0 -3px -3px;border-radius:50%;
background:#fff;border:2px solid #2456c8;box-sizing:border-box}
.cdot.we{border-color:#7f9bdd} /* выходной — голубее (как строка в таблице) */
.cdot.pt{border-color:#8ba3d8} /* незавершённый период — приглушённо */
.cdot.mx{border-color:var(--good);background:var(--good)}
.cdot.mn{border-color:var(--bad);background:var(--bad)}
/* пометки min/max над точкой — те же треугольники, что в таблице */
.cmk{position:absolute;transform:translateX(-50%);margin-bottom:9px;width:0;height:0}
.cmk.mx{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:7px solid var(--good)}
.cmk.mn{border-left:4px solid transparent;border-right:4px solid transparent;border-top:7px solid var(--bad)}
.cax{display:flex;margin-top:3px;padding-left:60px} /* сдвиг под ось Y (54px + gap 6px) */
.cax-l{flex:1 1 0;min-width:0;text-align:center;white-space:nowrap;overflow:hidden;
font-size:10.5px;color:var(--mut);font-variant-numeric:tabular-nums}
.cax-l.we{color:#3a5bbf} /* дата Сб/Вс — голубым, как в таблице */
.cax-l.em{color:var(--fc)}
/* ---------- V3 · пироги долей точек (сплошные, крупные) ---------- */
/* Набор пирогов: СТРОКА = один срез (сеть или терминал), в ней текущий год и
прошлый рядом; терминалы идут вниз строка за строкой. Отбивка сверху — та же
черта, что отделяет график. */
.pies-set{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.pies{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start}
.pies + .pies{margin-top:22px}
/* Подпись года внутри карточки: строки на узком экране переносятся, и общая
шапка над колонками разъехалась бы с пирогами. */
.pie-hd{margin:0 0 12px;font-size:12.5px;font-weight:600}
.pie-hd .clg{margin-left:0}
.pie{margin:0;flex:1 1 360px;max-width:520px;background:var(--card);
border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.pie-svg{display:block;width:230px;height:230px;max-width:100%;margin:0 auto 16px}
.pie-svg path{transition:opacity .15s var(--ease)}
.pie:hover .pie-svg path{opacity:.82}
.pie-svg path:hover{opacity:1}
/* Легенда: в первую очередь ДЕНЬГИ (жирные), доля — вторично приглушённо. */
.pie-legend{list-style:none;margin:0;padding:0;font-size:12.5px;line-height:1.6}
.pie-legend li{display:flex;align-items:center;gap:9px;padding:3px 0;color:var(--ink)}
.pie-legend .dot{width:12px;height:12px;border-radius:3px;flex:0 0 auto}
.pie-legend .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pie-legend .mon{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums}
.pie-legend .pc{flex:0 0 auto;min-width:48px;text-align:right;color:var(--mut);
font-variant-numeric:tabular-nums}
/* Итог терминала — первая строка легенды, под самим пирогом. Раскладка та же,
что у точек (имя/деньги/доля), поэтому цифры выстраиваются в одну колонку;
отличают его только жирное имя и черта снизу. Доля — от всего аэропорта. */
.pie-legend li.sum{border-bottom:1px solid var(--line);padding-bottom:7px;
margin-bottom:5px}
.pie-legend li.sum .dot{background:transparent}
@media (max-width:640px){
.cyaxis,.cplot{height:128px}
.cyaxis{width:44px}
.cdot{width:5px;height:5px;margin:0 0 -2.5px -2.5px;border-width:1.5px}
.cy{font-size:8.5px}
.cax{padding-left:50px}
.cax-l{font-size:9px}
.cax-l:not(.tk){visibility:hidden}
.pies{gap:12px}
.pie{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){ .pie-svg path{transition:none} }
.empty{background:var(--goodbg);color:var(--good);border-radius:10px;padding:18px;font-weight:600}
.warn{background:var(--badbg);color:var(--bad);border-radius:10px;padding:12px 16px;font-size:13px;margin-bottom:14px}
/* Узкий вариант — для постоянной плашки над таблицей: тот же красный, но ростом
в одну строку, иначе она каждый раз отжимала бы таблицу вниз. */
.warn.strip{padding:6px 12px;font-size:12.5px;font-weight:600;border-radius:8px;
border:1px solid #f3c9c5;margin:0 0 12px}
.htmx-request{opacity:.5;transition:opacity .15s}
/* Экран «Ваучеры VIP»: расшифровка по типам под таблицей и ссылка-переключатель
дни ↔ месяцы. Тон и размеры — как у .note, чтобы блок не спорил с таблицей. */
.swi{margin-left:10px;font-size:13px;color:var(--acc);text-decoration:none;
border-bottom:1px dashed var(--acc)}
.swi:hover{border-bottom-style:solid}
/* ───────────────────────────── Админка ─────────────────────────────
Экраны «Сотрудники» и «Кто в системе». Своих компонентов минимум: таблица
.adm живёт на общих правилах table, а матрица прав (.mtx) добавляет к ней
липкую первую колонку — колонок экранов будет расти, строка не должна
терять, к кому она относится. */
table.adm td,table.adm th{padding:6px 8px;vertical-align:top}
table.adm th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut)}
table.adm td.c,table.adm th.pg{text-align:center}
table.adm td.num,table.adm th.num{text-align:right;font-variant-numeric:tabular-nums}
table.adm td.right{text-align:right}
table.adm .nowrap{white-space:nowrap}
table.adm tr.off td{opacity:.55}
table.adm td.live{color:var(--good);font-weight:600}
table.adm .chip{padding:1px 8px;font-size:11.5px;cursor:default}
.scroll-x{overflow-x:auto}
table.mtx th.pg{min-width:78px;font-size:10.5px;line-height:1.2;white-space:normal}
table.mtx .stick{position:sticky;left:0;z-index:2;background:var(--card);
box-shadow:1px 0 0 var(--line);min-width:200px}
/* Тумблер клетки. Кнопка, а не чекбокс: значение переворачивает сервер и
возвращает новую клетку, снятая галочка формой не отправляется вовсе. */
/* Все клетки матрицы — один вид: включено это всегда синий квадрат с галкой,
выключено — пустой. Клетка админа отличается только тем, что не нажимается
(.fixed): другой вид «включено» читался бы как другое состояние. */
.tgl{display:inline-flex;align-items:center;justify-content:center;
width:26px;height:26px;border:1px solid var(--line);border-radius:7px;
background:#fff;color:var(--fc);font:inherit;font-size:13px;line-height:1;
cursor:pointer;padding:0}
.tgl:hover{border-color:var(--acc)}
.tgl.on{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:700}
.tgl.fixed{cursor:default}
.tgl.fixed:hover{border-color:var(--acc)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;
background:var(--good);margin-right:6px;vertical-align:middle}
.card .v.acc{color:var(--acc)}
.badge.off{background:var(--badbg);color:var(--bad)}
/* Действия в строке — текстовые кнопки: форма нужна ради POST, но выглядеть
она должна ссылкой, иначе строка превращается в панель управления. */
.lnk{background:none;border:0;padding:0 4px;font:inherit;font-size:12px;
color:var(--acc);cursor:pointer}
.lnk:hover{text-decoration:underline}
.lnk.del{color:var(--bad)}
.btn{font:inherit;background:var(--acc);color:#fff;border:0;border-radius:8px;
padding:0 16px;cursor:pointer}
.btn:hover{opacity:.9}
input[type=text],input[type=email]{font:inherit;border:1px solid var(--line);
border-radius:8px;padding:4px 8px;background:#fff;color:var(--ink)}
/* Одна высота у поля, выпадашки и кнопки: у select и button свои умолчания,
и без явной высоты ряд разъезжается по вертикали. Почта — тоже поле ввода,
и должна стоять вровень с ФИО, а не отдельным по высоте. */
.ctrls input[type=text],.ctrls input[type=email],.ctrls select,.ctrls .btn{
height:32px;box-sizing:border-box}
/* Глубина — число в один-два знака: поле по размеру содержимого и вровень
с подписью, а не полноразмерная строка. */
.ctrls input.tiny{width:58px;height:24px;padding:2px 8px;text-align:center}
.panel.pwd{background:var(--goodbg);border-color:var(--good)}
.panel.pwd code{font-size:16px;font-weight:700;letter-spacing:.04em;
background:#fff;border:1px solid var(--line);border-radius:6px;
padding:2px 8px;margin:0 6px}
.panel.err-panel{background:var(--badbg);border-color:var(--bad);color:var(--bad)}
.panel.ok-panel{background:var(--goodbg);border-color:var(--good);color:var(--good)}
/* Дерево охвата: аэропорт → терминал → точки. Отступом показываем вложенность —
правила складываются, и глазу надо видеть, что внутри чего. */
.scopegrp{border-top:1px solid var(--line);padding:10px 0}
.scopegrp:first-of-type{border-top:0}
.scopezone{margin:6px 0 0 22px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip.all{font-weight:600}
.chip.air{font-weight:600;min-width:64px;text-align:center}
.chip.zone{border-style:dashed}
.chip.pt{font-size:12px}
/* Перерисовка дерева идёт на каждый щелчок: без плавного гашения оно моргает. */
#scopetree.htmx-request{opacity:.6}
.ctrls .spacer{flex:1}
.ctrls .btn.big{height:38px;padding:0 22px;font-size:14px}
/* Месяц вне глубины просмотра: кнопка видна, но нажать нельзя — так человек
понимает, что период существует, просто закрыт ему, а не «данных нет». */
.seg label.off{opacity:.35;cursor:not-allowed}
.seg label.off:has(input:checked){background:#fff;color:var(--ink)}
/* Форма корректировок: строка = одна запись. Оформлена как таблицы сайта —
та же карточка, та же шапка, тот же tabular-nums у сумм. Поля без своих рамок:
рамку даёт сетка таблицы, иначе в ячейке получалась бы рамка в рамке. */
/* Во всю ширину, как остальные таблицы сайта, и ровно пополам: суммы занимают
левую половину (по четверти каждая), комментарий — всю правую. Доли, а не
пиксели: на любом экране середина остаётся серединой. */
table.adjform{margin-top:12px;table-layout:fixed;width:100%}
table.adjform th{font-size:12px}
/* Знаки прижаты вправо, к своим цифрам: базовое правило таблиц выравнивает
первую колонку влево, и «+» уезжал к краю карточки. */
table.adjform th.c-plus{width:25%;color:var(--good);font-size:15px;text-align:right}
table.adjform th.c-minus{width:25%;color:var(--bad);font-size:15px}
table.adjform th.c-note{width:50%;text-align:left}
/* Комментарий отбит вертикальной чертой — тем же голубым, что делит колонки в
денежных таблицах: серый на тонированной ячейке читается как белый зазор. */
table.adjform th.c-note,table.adjform td:nth-child(3){
border-left:2px solid rgba(36,86,200,.20)}
table.adjform td{padding:0}
table.adjform input{width:100%;border:0;background:transparent;font:inherit;
padding:8px 10px;color:var(--ink)}
table.adjform input:focus{outline:2px solid var(--acc);outline-offset:-2px;
background:var(--accbg)}
/* Закрытое поле строки: видно, что вводить сюда уже нельзя. */
table.adjform input.off{background:#f4f5f7;color:var(--mut);cursor:not-allowed}
table.adjform td:nth-child(-n+2) input{text-align:right;
font-variant-numeric:tabular-nums;font-weight:600}
/* Пояснение — текст, поэтому влево и во всю ширину строки. */
.c-note{text-align:left;white-space:normal}
.c-empty{text-align:center;color:var(--mut)}
/* Журнал корректировок — обычная таблица: липкие шапка и первая колонка нужны
денежным экранам с десятками колонок, здесь они прятали первую строку. */
table.adjlog{margin-top:0}
table.adjlog td,table.adjlog th{white-space:nowrap}
.c-left{text-align:left}
/* Кнопки форм — как акцентная кнопка входа, иначе браузер рисует системную. */
.ctrls button{font:inherit;font-weight:600;background:var(--acc);color:#fff;border:0;
border-radius:8px;padding:7px 18px;cursor:pointer}
.ctrls button:hover{opacity:.92}
/* Право отдельной кнопкой в карточке сотрудника: цвет и есть состояние —
синяя значит «разрешено». Форма та же, что у плашек глубины просмотра. */
/* ⚠ Селектор с тегом (`button.permbtn`), а не голый класс: рядом живёт правило
`.ctrls button` для кнопки «Записать» — оно специфичнее голого класса и красило
выключенную кнопку белым по белому (поймано 18.08.2026 на живой проверке). */
button.permbtn{font:inherit;font-size:13px;font-weight:600;
border:1px solid var(--line);border-radius:8px;padding:5px 12px;
background:#fff;color:var(--ink);cursor:pointer}
button.permbtn:hover{background:var(--accbg);color:var(--ink);opacity:1}
button.permbtn.on{background:var(--acc);border-color:var(--acc);color:#fff}
button.permbtn.on:hover{background:var(--acc);color:#fff;opacity:.92}