/* Стиль по 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}
.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(--mut)}
.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}
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}
.login input[type=password]{width:100%;font:inherit;border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin:10px 0}
.login button{width:100%;font:inherit;background:var(--acc);color:#fff;border:0;border-radius:8px;padding:9px;cursor:pointer}
.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}
.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}
/* Прокрутка внутри рамки по обеим осям — только так шапка может липнуть к верху
(у 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(179,38,30,.045); /* выходной — очень слабый тёплый */
--op-col:#f0f2fb; /* --l-col, заранее смешанный с белым */
--op-col-x:#dce4f6; /* --l-col-x, то же */
--op-fy:#e2e8f8; /* строка «Прогноз на год» — темнее */
--op-fy-x:#cfd9f1; /* её пересечение с колонкой «Всего» */
--hv:36,86,200; /* hover обычной строки */
--hv-we:179,38,30; /* hover выходного */
--ease:cubic-bezier(.22,1,.36,1);
/* высоты строк шапки фиксированы: от них считается top для sticky */
--h-zones:30px; --h-fy:24px;
}
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 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)}
/* Прогноз года — служебная строка шапки над названиями точек.
Высота задана жёстко: от неё считается top для sticky-строки с названиями. */
table.days tr.fy th{height:var(--h-fy);padding:3px 8px;line-height:1.35;
font-size:11px;font-weight:600;color:var(--acc);
background:var(--op-fy);text-align:right;font-variant-numeric:tabular-nums;
cursor:help;white-space:nowrap}
table.days tr.fy th.sub{background:var(--op-fy)}
table.days tr.fy th.tot-col{background:var(--op-fy-x)}
table.days tr.fy th.stick{background:var(--op-fy);color:var(--acc)}
/* Колонки подытогов зон и «Итого за день» — голубые по всей высоте */
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)}
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)}
table.days th.tot-col,table.days td.tot-col{font-weight:700;
border-left:2px solid var(--line);min-width:104px}
/* Тон строки — box-shadow поверх непрозрачной базы. Голубым колонкам явно
возвращаем их background (иначе правило строки его перекроет) — так слои
складываются, а не спорят. */
table.days tr.we td{background:var(--card);box-shadow:inset 0 0 0 999px var(--l-we);
color:var(--bad)}
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.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)}
table.days tr.tot td.tot-col{color:var(--acc)}
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.stick{color:var(--ink)}
/* Прогноз месяца — тот же язык, что и «Прогноз на год»: фон темнее, цифры синие */
table.days tr.fcm td{background:var(--op-fy);box-shadow:none;color:var(--acc);
font-weight:700;border-top:1px solid var(--line)}
table.days tr.fcm td.stick{background:var(--op-fy);color:var(--acc)}
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 .sm{color:var(--mut)}
/* sticky: первая колонка по горизонтали, шапка по вертикали.
top у каждой строки шапки = сумма высот строк над ней. */
table.days .stick{position:sticky;left:0;z-index:2;background:var(--card);
border-right:2px solid var(--line);text-align:left;white-space:nowrap}
table.days thead th{position:sticky;z-index:4}
table.days thead tr.zones th{top:0}
table.days thead tr.fy th{top:var(--h-zones)}
table.days thead tr:last-child th{top:calc(var(--h-zones) + var(--h-fy))}
/* Шапка обязана быть НЕПРОЗРАЧНОЙ: под ней проезжают цифры — потому в её
правилах стоят --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:left;white-space:nowrap;letter-spacing:.01em}
/* Наведение: слой ::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.we td:not(.sub):not(.tot-col)::after{
background:rgba(var(--hv-we),.06);
box-shadow:inset 0 1px 0 rgba(var(--hv-we),.22),inset 0 -1px 0 rgba(var(--hv-we),.22)}
table.days tbody tr.we td:not(.sub):not(.tot-col):hover::after{background:rgba(var(--hv-we),.10)}
/* сводные строки и так тяжёлые — отзываются рельсами, почти без заливки */
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;--h-fy:20px}
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 tr.fy th{font-size:10px;height:20px;padding:2px 6px}
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{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}
}
.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}
.htmx-request{opacity:.5;transition:opacity .15s}