/* ===== THEME.CSS — Life Pay HR Portal — Glass Morphism OPTIMIZED =====
Светлый дизайн + glassmorphism на главной (оптимизировано для FPS)
============================================================== */
/* ===== ШРИФТ INTER — СВОЙ, НЕ ИЗ ИНТЕРНЕТА =====
Раньше index.html тянул Inter с fonts.googleapis.com обычным , а это блокирует отрисовку: во внутреннем контуре без
доступа наружу браузер ждал таймаута и показывал белый экран (аудит перед
показом, 03.08.2026). Теперь файлы лежат в web/fonts и едут в бой вместе с
папкой — портал не зависит ни от интернета, ни от чужого сервера.
Файл вариативный: одна запись покрывает всю жирность 100–900, поэтому
вместо шести файлов на начертание — два на алфавит. Взято с Google Fonts
(Inter v20), лицензия SIL Open Font License 1.1. unicode-range — их же:
браузер скачает кириллицу и латиницу по отдельности, только если нужно. */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('fonts/inter-cyrillic.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('fonts/inter-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ===== ШРИФТ ПОРТАЛА — GOLOS TEXT (решение владельца 03.09.2026) =====
До этого стоял Inter. Причина замены не вкусовая: Inter в паре с дефолтной
палитрой Tailwind — самый узнаваемый набор «по умолчанию», и портал из-за
него читался как сгенерированный. Golos Text рисован Paratype под русский
язык и экранное чтение, лицензия SIL OFL 1.1, файл вариативный (400–600).
ПОЧЕМУ ЭТО БЕЗОПАСНО ДЛЯ ТАБЛИЦ. Замер на стенде 03.09.2026: эталонная
строка «Колесникова Мария Сергеевна · Т214 · 02.07.2021 — 16.08.2026 ·
140 дн.» занимает 460 px против 463 у Inter — разница 0,6 %, колонки
таблицы учёта не поехали.
Файлы лежат рядом с Inter в web/fonts и едут в бой вместе с папкой — во
внутреннем контуре нет доступа наружу, внешний давал белый экран
до таймаута (03.08.2026). Inter НЕ УДАЛЁН намеренно: если Golos не
приживётся, возврат — правка font-family в трёх местах. */
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url('fonts/golos-text-cyrillic.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url('fonts/golos-text-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ===== ДИЗАЙН-ТОКЕНЫ ===== */
:root {
/* ПАЛИТРА B (решение владельца 03.09.2026). Нейтрали ушли из чистых серых
Tailwind (#F7F8FA / #F3F4F6 / #E5E7EB / #111827) в собственную холодную
шкалу: фон плотнее, линии мягче, текст глубже. Смысловые цвета статусов
НЕ ТРОНУТЫ — их знают наизусть в двух отделах. */
--bg: #F4F6F9;
--card: #FFFFFF;
--card2: #EDF0F4;
--blue: #3B82F6;
--blue2: #2563EB;
--blue-bg: #EFF6FF;
--purple: #8B5CF6;
--purple-bg: #F5F3FF;
--green: #22C55E;
--green-bg: #F0FDF4;
/* Зелёный ТЕКСТОМ на светлом фоне. Сам --green (#22C55E) на белом даёт
контраст 1,99 — им красят точки, полосы и заливки, но не слова (свод, п. 6).
Привычная ступень #12823B (плашки «ок») на белом проходит (4,9), но на
подложке карточки --card2 уже нет (4,25) — а статус в истории отпуска стоит
именно на ней. Поэтому ступень глубже, того же тона: #166534 — 7,1 на белом,
6,1 на --card2 (замер 15.09.2026). Не новый цвет, а производный (п. 12).
В тёмной теме возвращается сам --green: там он проходит (7,83). */
--green-text: #166534;
--orange: #F59E0B;
--orange-bg: #FFFBEB;
--amber: #CA8A04;
--amber-bg: #FEF9C3;
--red: #EF4444;
--red-bg: #FEF2F2;
--slate: #64748B;
--slate-bg: #F1F5F9;
--pink: #EC4899;
--pink-bg: #FDF2F8;
--cyan: #06B6D4;
/* Фон бирюзовых плашек. Заведён 11.08.2026 под статус «В работе»: цвет уже был,
а пары к нему не было, и её приходилось бы вписывать числом в каждом месте. */
--cyan-bg: #ECFEFF;
/* ЗАЛИВКИ СТРОК ТАБЛИЦЫ УЧЁТА (макет «вариант Г», утверждён 16.08.2026).
Отдельные от --*-bg намеренно: те же оттенки служат фоном плашек по всему
порталу, и трогать их нельзя.
ЗАЧЕМ. Строки красились прямо в --*-bg, а у тех РАЗНАЯ воспринимаемая
светлота: зелёная 0.9531, фиолетовая 0.9073 — разброс 5.5%. Глаз ищет
смысл в том, что одна строка «тяжелее» другой, а смысла там нет: таблица
выглядела пятнистой, и владелец называл это «как будто делал ИИ».
ЧТО СДЕЛАНО. Каждый оттенок пересчитан как примесь своего статусного цвета
к --card с такой долей, чтобы у ВСЕХ вышла одна светлота 0.955. Разброс
стал 0.09%. Это не новые цвета: они выведены из существующих токенов,
расчёт лежит в ОФОРМЛЕНИЕ.md.
ПЛАТА ЗА РОВНОСТЬ. При равной светлоте насыщенность падает до 6–14, и
различать статусы ПО ЗАЛИВКЕ уже нельзя. Поэтому опознание отдано полосе
слева в полном цвете (_rowRail в app-table.js): заливка говорит «строка
особенная», полоса — «чем именно». */
--row-green: #EEFBF3;
--row-orange: #FEF7EA;
--row-purple: #F9F6FF;
--row-slate: #F6F7F9;
--marker: #FDE68A;
--marker-strong: #FCD34D;
--text: #14171F;
--text2: #48505E;
--text3: #98A1AE;
--border: #DDE3EA;
--shadow: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06);
--shadow-md: 0 4px 6px -1px rgba(0,0,0,.05), 0 2px 4px -2px rgba(0,0,0,.05);
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,.05), 0 4px 6px -4px rgba(0,0,0,.05);
--r: 16px;
--r2: 12px;
--r3: 8px;
--r4: 6px;
/* Не используются: ими заливался фон главной через класс body.page-home,
который в коде больше нигде не ставится (правила ниже мертвы вместе с ним).
30.07.2026 их ненадолго перекрасили под тёмную плашку-шапку — владельцу
плашка не подошла, значения вернули прежние. */
--home-grad-start: #5BC8F5;
--home-grad-mid: #49ADE5;
--home-grad-end: #6E8FC7;
--dark: #111827;
--dark2: #1F2937;
--dark3: #374151;
--darkbd: #4B5563;
--darkt: #D1D5DB;
/* Единый акцент для активных/primary-элементов (как .btn-p): тёмный в свету */
--accent: #0F172A;
--accent-text: #FFFFFF;
/* ГЛАВНОЕ ДЕЙСТВИЕ В СВЕРКАХ — спокойный синий (решение владельца 04.08.2026).
Раньше «Связать», «Проставить», «Завести строку» заливались почти чёрным
(--text): чёрного на экране становилось слишком много, и одна и та же
кнопка отвечала и за спокойное действие, и за опасное. Теперь у цветов
разные роли: синий — «нажми», зелёный — «сделано», красный — «осторожно».
Тёмным остаются только переключатели («По срочности», «Плотно») — это не
действие, а «где я сейчас».
С 03.09.2026 акцент — фирменное индиго Life Pay, а не синий. Причина:
синий #3B82F6 одновременно был акцентом интерфейса И статусом
«Запланирован», то есть самый частый цвет портала совпадал с дефолтом
Tailwind. Теперь роли разведены: синий остался статусом, действие взяло
индиго, которое и так жило в логотипе, форме входа и --tbl-accent.
Замер: акцент на карточке 5.17 → 6.29, на своей заливке 4.75 → 5.55. */
--act: #4F46E5;
--act-hover: #4338CA;
--act-text: #FFFFFF;
--act-bg: #EEF0FE;
--act-line: rgba(79,70,229,.24);
/* ===== ТОКЕНЫ ТАБЛИЦЫ ОТПУСКОВ (макет otpuska-perenos v2) =====
Отдельные от глобальных намеренно: макет описывает только таблицу отпусков,
а --accent/--border/--green-bg общие для всего портала — перекрасив их, мы
утащили бы за собой Структуру, Календарь и Главную. Используются только в
стилях таблицы (#tbl-perf-style, шапка, KPI-плитки). */
--tbl-accent: #4F46E5; /* indigo: активные состояния внутри таблицы */
--tbl-accent-bg: #EEF2FF;
--tbl-line: #EEF0F3; /* разделители строк — светлее общего --border */
--tbl-hover: #FBFBFD; /* ховер строки: почти незаметный */
--tbl-hover-ov: rgba(15,23,42,.05); /* полупрозрачный слой ховера — не стирает статусный цвет строки */
--tbl-head-bg: #F7F8FA;
--tbl-head-text: #6B7280;
--tbl-chip: #EEF0F3; /* фон чипа «дней» */
--tbl-card-bd: #E3E6EB;
/* Статусы: оттенки глубже общих (--green/--orange), как в макете */
--tbl-done: #16A34A; --tbl-done-bg: #E9F9EE;
--tbl-move: #D97706; --tbl-move-bg: #FDF3E2;
--tbl-plan: #2563EB; --tbl-plan-bg: #EAF1FE;
--tbl-no: #DC2626; --tbl-no-bg: #FDEAEA;
}
/* ===== ТИПОГРАФИКА ===== */
/* БАЗОВЫЙ РАЗМЕР — 13, ступень свода (п. 2). Было 14 — размер вне шкалы, и он
доставался всему, что своего размера не задаёт.
Замер перед правкой (27.08.2026): базовым 14 рисовалось РОВНО НОЛЬ элементов
на всех шестнадцати вкладках, в меню, шапке и уведомлениях — за годы каждый
экран задал себе размер сам. Наследство доставалось только окнам: 38
надписей в девяти. То есть правка снимает корень расхождения, а не
перекраивает портал. */
body {
font-family: 'Golos Text', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 13px;
color: var(--text);
-webkit-font-smoothing: antialiased;
}
/* Увеличение шрифта на ~17% для основного контента,
НЕ затрагивает topbar и hero */
.main {
font-size: 15px;
}
/* ===== СКРОЛЛБАР =====
Windows рисует системную полосу шириной 17 px — она съедает край списка и
выглядит грубее, чем на Mac. Правила ниже приводят обе системы к одному
виду: тонкая полоса без подложки (владелец 04.08.2026 — «один и тот же
макет должен смотреться одинаково»). Firefox понимает scrollbar-width.
ЧТО ИЗ ЭТОГО ДЕЙСТВУЕТ (замер 10.09.2026). Решает первая строка —
`scrollbar-width` и `scrollbar-color`: стандартное свойство сильнее
вендорного ::-webkit-scrollbar, и в нынешних Chrome, Edge, Firefox и Safari
работает именно оно. Отсюда фактическая полоса — «thin», то есть 11–13 px, а
не 6: числа ниже НЕ применяются. Блок ::-webkit-* оставлен запасным путём для
старых движков (Safari до 18.2 и подобные), и менять его в расчёте на то,
что «станет уже», бесполезно — сначала пришлось бы убрать строку выше.
Задавать свою ширину полосы в отдельных файлах тем более незачем: такие
правила были в четырёх местах портала и не работали ни в одном (убраны). */
* { scrollbar-width: thin; scrollbar-color: #D1D5DB transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9CA3AF; }
/* ===== НАВИГАЦИЯ ===== */
.nav-item {
border-radius: var(--r4);
font-size: 13px;
font-weight: 500;
color: var(--text2);
transition: all .15s ease;
}
.nav-item:hover { background: var(--card2); color: var(--text); }
.nav-item.on { background: var(--text); color: #fff; font-weight: 600; }
body.page-home .nav-item { color: rgba(255, 255, 255, 0.7); }
body.page-home .nav-item:hover {
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
body.page-home .nav-item.on {
background: rgba(255, 255, 255, 0.25);
color: #fff;
}
body.page-home .btn {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.25);
color: #fff;
}
body.page-home .btn:hover {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.4);
}
/* Фон body на главной — градиент растягивается на весь viewport */
body.page-home {
background: linear-gradient(
160deg,
var(--home-grad-start) 0%,
var(--home-grad-mid) 45%,
var(--home-grad-end) 100%
);
background-attachment: fixed;
}
/* ===== SECTION CARD ===== */
.scard {
background: var(--card);
border-radius: var(--r2);
box-shadow: var(--shadow);
border: 1px solid var(--border);
}
/* Заголовок карточки — 15/600. Было 16/700 с трекингом: и размер, и
насыщенность вне шкал свода (пп. 1–2), а 700 на Windows выходит заметно
плотнее, чем на маке. Правило общее — так подписаны карточки всего портала. */
.scard h2 { font-size: 15px; font-weight: 600; }
.scard h3 { font-size: 13px; font-weight: 600; color: var(--text); }
/* ===== АЛЕРТЫ ===== */
.alert { border-radius: var(--r4); font-size: 13px; font-weight: 500; }
.dept-card {
background: var(--dark);
border-radius: var(--r2);
border: 1px solid var(--darkbd);
transition: all .2s ease;
}
.dept-card:hover {
border-color: var(--blue);
box-shadow: 0 4px 20px rgba(59, 130, 246, .15);
}
.dept-head .name { font-size: 13px; font-weight: 600; color: #F9FAFB; }
/* ===== КОНТЕКСТНОЕ МЕНЮ ===== */
.ctx-menu {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r3);
box-shadow: var(--shadow-lg);
}
.ctx-item { font-size: 13px; font-weight: 500; transition: .1s; }
.ctx-item:hover { background: var(--card2); color: var(--text); }
.ctx-item.danger { color: var(--red); }
.ctx-item.danger:hover { background: var(--red-bg); }
.ctx-sep { background: var(--border); }
.ctx-head { color: var(--text3); }
.uic-back { background: rgba(15,23,42,.45); }
.uic-card { background: var(--card); box-shadow: var(--shadow-lg); }
.uic-ico { background: var(--card2); color: var(--text2); }
.uic-ico.danger { background: var(--red-bg); color: var(--red); }
.uic-title { color: var(--text); }
.uic-msg { color: var(--text2); }
/* ===== БЕЙДЖИ ТИПОВ =====
Было 10 px ЗАГЛАВНЫМИ весом 700 с трекингом — три нарушения свода разом
(пп. 1, 2, 8). Стало 12/500 обычными буквами.
ЕЖЕГОДНЫЙ ОТПУСК БОЛЬШЕ НЕ КРАСИТСЯ. Замер на снимке 16.08.2026: из 992
записей 908 — «Ежегодный (график)», это 92%. Синяя плашка на девяти строках
из десяти показывала норму, а по своду (п. 4) норму не показываем вообще:
цвет остаётся видам, которые от обычного отпуска отличаются. Слово никуда
не делось — оно просто перестало кричать.
Цветные виды берут СТУПЕНЬ слова: сам токен на своей заливке даёт 2.07–2.40
(свод, п. 12). Точка и полоса, где они есть, остаются полного цвета. */
.vt { font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 8px; }
.vt-a { background: var(--card2); color: var(--text2); }
.vt-t { background: var(--orange-bg); color: #9D6507; }
.vt-m { background: var(--pink-bg); color: #A3186A; }
.vt-u { background: var(--card2); color: var(--text2); }
.vt-s { background: #ECFEFF; color: #0E7490; }
.vt-d { background: var(--green-bg); color: #12823B; }
/* Ненормированный рабочий день (ст. 119 ТК) — плановый вид, как ежегодный, но
сверх нормы 28: свой спокойный фиолетовый, чтобы в списке он не сливался с
ежегодным и не путался с декретом (розовый) и переносом (оранжевый). */
.vt-n { background: var(--purple-bg, #EEF2FF); color: #6D28D9; }
/* Отпуск инвалидам (ст. 115 ТК) — тоже плановый и тоже сверх нормы 28, поэтому
рядом с фиолетовым НРД, но своим янтарным: два вида «сверх 28» должны
различаться в списке с одного взгляда (11.08.2026). */
.vt-i { background: var(--amber-bg, #FEF3C7); color: #9D6507; }
/* Тёмная тема: затемнённые ступени на ней проваливаются — набор свой. */
[data-theme="dark"] .vt-t { color: var(--orange); }
[data-theme="dark"] .vt-m { color: var(--pink); }
[data-theme="dark"] .vt-s { color: var(--cyan); }
[data-theme="dark"] .vt-d { color: var(--green); }
[data-theme="dark"] .vt-n { color: #A78BFA; }
[data-theme="dark"] .vt-i { color: var(--amber); }
/* ===== КНОПКИ ===== */
/* КНОПКИ ПОРТАЛА — ТРИ РОЛИ (ТЗ владельца 16.08.2026).
До этого в портале жили 857 кнопок и 152 разных набора классов: одно и то же
действие на восьми экранах было набрано восемью способами — скругления
6/8/9/11/12, насыщенности 500/600/650/700, три разных заливки «главного».
Ролей теперь три и только три:
.btn тихая — всё, что не главное, их на экране сколько угодно;
.btn-p действие — ОДНА на экран, светло-синяя (выбор владельца);
.btn-d опасная — только там, где данные пропадают.
Плюс размер .btn-s и иконочный квадрат. Новые виды кнопок не заводить:
если роль не подходит, значит спор о содержании, а не об оформлении. */
.btn {
border-radius: var(--r3);
border: 1px solid var(--border);
background: var(--card);
color: var(--text);
font-size: 13px;
font-weight: 500;
transition: all .15s ease;
}
.btn:hover { border-color: var(--text3); background: var(--card2); }
/* Слово на голубой заливке берёт затемнённую ступень тона: сам --blue даёт 3.38,
--blue2 — 4.75; в тёмной теме ступень светлее (свод «Оформление», п. 12). */
.btn-p { background: var(--act-bg); border-color: var(--act-line); color: var(--act); }
.btn-p:hover { background: var(--act-bg); border-color: var(--act); }
[data-theme="dark"] .btn-p { color: var(--act); }
/* Малая кнопка — 28 px ровно: без min-height она выходила 29 и стояла
на пиксель ниже соседних в том же ряду (замер 27.08.2026). */
.btn-s { font-size: 12px; min-height: 28px; box-sizing: border-box; }
.btn-d { color: #B91C1C; border-color: #FCA5A5; }
[data-theme="dark"] .btn-d { color: #F87171; }
.btn-d:hover { background: var(--red-bg); }
/* ===== ФОРМЫ ===== */
/* ПОЛЕ ВВОДА — одно на портал (16.08.2026). Скругление 8, как у кнопки: они
стоят в одной строке, и разница в два пикселя между ними видна сразу.
До этого поля жили с четырьмя скруглениями (6/8/9/12) и высотой 34 или 40 —
в одном и том же окне. */
.fi, .fs {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r3);
color: var(--text);
font-size: 13px;
font-family: 'Golos Text', 'Inter', sans-serif;
transition: all .15s;
}
/* Кольцо фокуса — акцентом интерфейса (03.09.2026). Синий здесь значил
«активно», и это спорило с ним же в роли статуса «Запланирован». */
.fi:focus, .fs:focus {
border-color: var(--act);
box-shadow: 0 0 0 3px var(--act-bg);
}
.file-card { background: var(--card2); border: 1px solid var(--border); border-radius: var(--r3); }
.file-card:hover { border-color: var(--act); }
/* ===== МОДАЛЬНОЕ ОКНО ===== */
/* Скругление 12 — «крупное» из свода, для карточек и панелей (было 16, своей
ступени у него нет). Заголовок 15/600 без трекинга: 18/700 не входит ни в
шкалу размеров, ни в шкалу насыщенностей (свод, пп. 1–3, 16.08.2026). */
.mo { background: rgba(0,0,0,.3); backdrop-filter: blur(4px); }
.mc { background: var(--card); border-radius: var(--r2); box-shadow: var(--shadow-lg); }
.mc h3 { font-size: 15px; font-weight: 600; }
/* ===== ТОСТЫ =====
Оформление целиком живёт в style.css (раздел «Уведомления», 30.07.2026).
Здесь было `color:#fff` без фона — а фона не задавал никто, потому что
классов .ts-s/.ts-e/.ts-w/.ts-i в проекте не существовало: белый текст ложился
на светлую страницу и уведомления было не видно. Правило убрано, чтобы не
спорить со style.css за цвет. */
/* ===== ТАБЛИЦА ДЕКРЕТА ===== */
/* Шапка таблицы — как в таблице учёта: 12/500, --text2, без заглавных
и трекинга (свод, пп. 6 и 8; 16.08.2026). */
.dec-table th { font-size: 12px; color: var(--text2); font-weight: 500; }
.dec-table td { background: var(--card); font-size: 13px; }
.dec-table tr:hover td { background: var(--card2); }
/* ===== ТАБЛИЦА ДАННЫХ ===== */
.tbl-main th { font-weight: 500; font-size: 12px; color: var(--text2); background: var(--card2); border-bottom: 1px solid var(--border); }
.ci { font-size: 12px; transition: background .15s; font-family: 'Golos Text', 'Inter', sans-serif; }
.ci:focus { background: var(--act-bg); }
.ci-emp { font-weight: 600; }
/* Кнопка «✕» в списках. Была --text3 — контраст 2.45, а в СЭДО таких кнопок
210 на экран: самая многочисленная надпись портала не читалась (16.08.2026). */
.del-btn { color: var(--text2); border-radius: var(--r4); transition: all .15s; }
.del-btn:hover { background: var(--red-bg); color: var(--red); }
/* ===============================================================
ГЛАВНАЯ СТРАНИЦА — GLASS MORPHISM (ОПТИМИЗИРОВАНО)
=============================================================== */
/* ===== ФОН ГЛАВНОЙ ===== */
.main.main-home-bg {
/* Градиент теперь на body, тут прозрачный */
background: transparent;
min-height: calc(100vh - 56px);
position: relative;
}
/* ===== SCARD на главной ===== */
.main-home-bg .scard {
background: rgba(255,255,255,0.70);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1.5px solid rgba(255,255,255,0.9);
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
}
/* ===== МОДАЛКА КАЛЕНДАРЯ СОТРУДНИКА ===== */
.mc.mc-wide { border-radius: var(--r2); }
.emp-cal-header { background: linear-gradient(135deg, #1E3A5F, #2563EB); color: #fff; }
.emp-cal-header-left h3 { font-size: 20px; font-weight: 600; color: #fff; letter-spacing: -0.5px; }
.emp-cal-header-left .emp-cal-subtitle { font-size: 12px; opacity: .7; }
.emp-cal-stat { background: rgba(255,255,255,.12); border-radius: var(--r3); }
/* Шапка карточки: 22/800 — верхняя ступень свода 20/600 (пп. 1, 2);
подпись была 9 px ЗАГЛАВНЫМИ с трекингом (п. 8) и полупрозрачной. */
.emp-cal-stat .val { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.emp-cal-stat .lbl { font-size: 11px; }
.emp-cal-close { background: rgba(255,255,255,.15); color: #fff; border: none; border-radius: 50%; font-size: 15px; transition: all .15s; }
.emp-cal-close:hover { background: rgba(255,255,255,.3); }
.emp-cal-body { background: var(--bg); }
.emp-cal-month { background: var(--card); border-radius: var(--r3); border: 1px solid var(--border); transition: box-shadow .2s; }
.emp-cal-month:hover { box-shadow: var(--shadow); }
.emp-cal-month-title { font-size: 12px; font-weight: 600; color: var(--text); border-bottom: 1px solid var(--border); }
.emp-cal-weekdays { font-size: 11px; font-weight: 600; color: var(--text3); }
.emp-cal-day { font-size: 11px; font-weight: 500; border-radius: 4px; }
.emp-cal-day.ecd-today { outline: 2px solid var(--red); font-weight: 600; }
.emp-cal-day.ecd-strike { text-decoration: line-through; opacity: .5; }
.emp-vac-section-title { font-size: 15px; font-weight: 600; letter-spacing: -0.3px; }
.emp-vac-card { background: var(--card); border-radius: var(--r3); border: 1px solid var(--border); transition: all .15s; }
.emp-vac-card:hover { border-color: #D1D5DB; box-shadow: var(--shadow); }
.emp-vac-status-badge { font-size: 11px; font-weight: 600; border-radius: var(--r4); }
/* Вид отпуска — подпись, а не плашка ЗАГЛАВНЫМИ (свод, пп. 1, 2, 8). Заливку
и рамку ему даёт .vt из общего словаря видов; здесь только шкалы. */
.emp-vac-type-badge { font-size: 12px; font-weight: 500; border-radius: 8px; }
.emp-vac-dates { font-size: 13px; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.emp-vac-days { font-size: 11px; color: var(--text2); font-variant-numeric: tabular-nums; }
/* Курсив убран: в общем слое пустые состояния и подписи без него (16.08.2026). */
.emp-vac-comment { font-size: 11px; color: var(--text2); }
.sick-chk { accent-color: var(--green); }
/* ===== ОБЩИЕ АНИМАЦИИ ===== */
@keyframes calPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
50% { box-shadow: 0 0 0 3px rgba(6,182,212,.2); }
}
/* ПУЛЬСАЦИЯ КОНЕЧНА (правка 17.08.2026 по просьбе владельца).
Здесь стояло infinite. Замер на боевых данных: у человека в двухнедельном
отпуске пульсируют ЧЕТЫРНАДЦАТЬ клеток одновременно и не останавливаются
всё время, пока карточка открыта. Внимание привлекает первый десяток секунд,
дальше это просто движение на экране, за которым восемь часов работают.
Четыре повтора — те же 8 секунд, после чего карточка замирает. Подсветка
«идёт прямо сейчас» при этом никуда не девается: цвет клетки остаётся. */
.emp-cal-day.ecd-pulse { animation: calPulse 2s 4; }
@media (prefers-reduced-motion: reduce){
.emp-cal-day.ecd-pulse { animation: none; }
}
/* =============================================================
МАСШТАБИРОВАНИЕ ШРИФТОВ +17% ДЛЯ ОСНОВНОГО КОНТЕНТА
Не затрагивает: .topbar, .org-tabs, .home-hero
============================================================= */
/* Базовый размер контента */
.main {
font-size: 15px;
}
/* ===== Секция-карточки (scard) ===== */
/* .main .scard h2 (19px) убран 27.08.2026: у контейнера #main класс app-body,
селектор .main не попадал ни на что и держал в коде размер вне шкалы. */
.main .scard h3 { font-size: 15px; }
.main .scard p { font-size: 13px; }
.main .dept-head .name { font-size: 15px; }
/* ===== Таблица данных ===== */
.main .tbl-main th { font-size: 12px; }
.main .ci { font-size: 13px; }
.main .ci-emp { font-size: 13px; }
.main .del-btn { font-size: 13px; }
/* ===== Декрет ===== */
.main .dec-table th { font-size: 12px; }
.main .dec-table td { font-size: 15px; }
/* ===== СЭДО ===== */
.main .sick-chk { width: 20px; height: 20px; }
/* ===== Журнал ===== */
.main .log-entry { font-size: 15px; }
/* ===== Модалка сотрудника (вне .main, но масштабируем) =====
Своя база широкого окна: 15 вместо 16 — ступень шкалы. Смысл сохранён:
крупное окно по-прежнему на ступень больше портала (13), просто ступень
теперь из свода, а не подобрана. */
.mc.mc-wide {
font-size: 15px;
}
.mc.mc-wide .emp-cal-header-left h3 { font-size: 20px; }
.mc.mc-wide .emp-cal-header-left .emp-cal-subtitle { font-size: 13px; }
.mc.mc-wide .emp-cal-stat .val { font-size: 20px; }
.mc.mc-wide .emp-cal-stat .lbl { font-size: 11px; }
.mc.mc-wide .emp-cal-month-title { font-size: 13px; }
.mc.mc-wide .emp-cal-day { font-size: 13px; }
.mc.mc-wide .emp-cal-weekdays { font-size: 11px; }
.mc.mc-wide .emp-vac-section-title { font-size: 20px; }
.mc.mc-wide .emp-vac-status-badge { font-size: 13px; }
.mc.mc-wide .emp-vac-type-badge { font-size: 12px; }
.mc.mc-wide .emp-vac-dates { font-size: 15px; }
.mc.mc-wide .emp-vac-days { font-size: 13px; }
/* ===== Кнопки в контенте ===== */
.main .btn { font-size: 15px; }
.main .btn-s { font-size: 13px; }
/* ===== Формы в контенте ===== */
.main .fi, .main .fs { font-size: 15px; }
/* ===== Алерты ===== */
.main .alert { font-size: 15px; }
/* ===== Бейджи типов ===== */
.main .vt { font-size: 12px; }
/* ===== Тосты — оставляем как есть (они фиксированные) ===== */
/* .ts { font-size: 13px; } — не трогаем */
/* ===== Контекстное меню — оставляем как есть ===== */
/* ПОЛЕ ПОИСКА ОПИСАНО ОДИН РАЗ — в style.css, на токенах, поэтому обе темы
работают само собой. Здесь было три слоя, все удалены 24.08.2026:
• два на body.page-home — этот класс нигде не ставится с редизайна, renderAll
его только СНИМАЕТ, то есть правила были мертвы;
• заплатка html:not([data-theme="dark"]) #globalSearchInput с !important —
она чинила белый текст, оставшийся от цветной шапки. Убрали причину, и
заплатка стала не нужна. */
/* ================================================================
ТЁМНАЯ ТЕМА — data-theme="dark"
================================================================ */
[data-theme="dark"] {
--bg: #0F1117;
--card: #1A1D27;
--card2: #222535;
--text: #F1F5F9;
--text2: #94A3B8;
--text3: #475569;
--border: #2D3148;
/* В тёмной теме акцент — голубой (как .btn-p), текст на нём тёмный */
--accent: #38BDF8;
--accent-text: #0F172A;
/* Действие в тёмной теме светлее: на тёмном фоне #2563EB читается глухо */
/* Индиго на тёмном тонет, поэтому берём осветлённые ступени того же тона
(свод «Оформление», п. 12). Замер: акцент на карточке 6.61 → 8.43. */
--act: #A5B4FC;
--act-hover: #C7D2FE;
--act-text: #0B1220;
--act-bg: rgba(99,102,241,.18);
--act-line: rgba(165,180,252,.30);
--shadow: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.4);
--shadow-md: 0 4px 6px -1px rgba(0,0,0,.3), 0 2px 4px -2px rgba(0,0,0,.3);
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,.4), 0 4px 6px -4px rgba(0,0,0,.3);
--blue-bg: #1E2A3A;
--green-bg: #0F2318;
--green-text: var(--green);
--orange-bg: #2A1A0A;
--amber-bg: #2A2408;
--red-bg: #2A0F0F;
--slate: #94A3B8;
--slate-bg: #222B3A;
--pink-bg: #2A0F1E;
--purple-bg: #1A1030;
--cyan-bg: #08262B;
/* ЗАЛИВКИ СТРОК В ТЁМНОЙ ТЕМЕ — БЕЗ ИЗМЕНЕНИЙ, и это осознанно.
Проблема неровной светлоты — светлая тема: там разброс 5.52%. В тёмной он
1.57%, то есть строки и так одной тяжести. Попытка выровнять их той же
формулой сплющила все четыре оттенка в почти одинаковый серый (#1A2128,
#1F2026, #1E1F2E, #1D202A при фоне #1A1D27) — стало бы ХУЖЕ, чем есть.
Поэтому здесь --row-* просто повторяют нынешние значения: правим то, что
сломано, и не трогаем то, что работает. */
--row-green: #0F2318;
--row-orange: #2A1A0A;
--row-purple: #1A1030;
--row-slate: #222B3A;
--marker: rgba(253,230,138,.15);
--home-grad-start: #1a1f3c;
--home-grad-mid: #1e2d4a;
--home-grad-end: #16213e;
/* Токены таблицы в тёмной теме. Макет только светлый, поэтому берём те же
оттенки, осветлённые до читаемости на тёмном фоне: #4F46E5 на #1A1D27 даёт
контраст ~2:1 (нечитаемо), indigo-400 #818CF8 — ~7:1. Подложки статусов —
не осветление макетных (они выжигают глаза), а глубокие тона общей темы. */
--tbl-accent: #818CF8;
--tbl-accent-bg: #232145;
--tbl-line: #262A3B; /* разделители мягче общего --border */
--tbl-hover: #20242F;
--tbl-hover-ov: rgba(255,255,255,.06); /* полупрозрачный слой ховера — не стирает статусный цвет строки */
--tbl-head-bg: #171A24;
--tbl-head-text: #94A3B8;
--tbl-chip: #2A2E3E;
--tbl-card-bd: #2D3148;
--tbl-done: #4ADE80; --tbl-done-bg: #0F2318;
--tbl-move: #FBBF24; --tbl-move-bg: #2A1A0A;
--tbl-plan: #60A5FA; --tbl-plan-bg: #1E2A3A;
--tbl-no: #F87171; --tbl-no-bg: #2A0F0F;
}
[data-theme="dark"] body {
background: var(--bg);
color: var(--text);
}
[data-theme="dark"] .app-main { background: var(--bg); }
[data-theme="dark"] .app-body { background: var(--bg); }
/* ── Топбар ── */
[data-theme="dark"] .app-topbar {
background: var(--card);
border-bottom-color: var(--border);
}
[data-theme="dark"] .app-topbar-title { color: var(--text); }
[data-theme="dark"] .app-tb-btn {
background: var(--card2);
border-color: var(--border);
color: var(--text2);
}
[data-theme="dark"] .app-tb-btn:hover {
background: var(--card);
border-color: #38BDF8;
color: var(--text);
}
/* ── Сайдбар ── */
/* ФОН МЕНЮ = --card, А НЕ СВОЙ ЧЁРНЫЙ (разбор оформления 30.08.2026, находка 4).
Было #080B14 — на четверть темнее рабочей области #0F1117, контраст между ними
1.04, то есть на глаз они не различались вовсе, и колонку держала одна граница
в пиксель. В светлой теме меню — самый узнаваемый элемент экрана (тёмный столб
на светлом), а в тёмной портал превращался в ровное тёмное поле без силуэта.
Берём уровень карточки: 1.12 к рабочей области — ровно столько же, сколько у
любой карточки и у шапки, которая уже покрашена в --card. Тогда вся «обвязка»
портала (шапка + меню) стоит на одном уровне, а рабочая область — под ним.
Нового цвета не заводим (свод, п. 12) — берём существующий токен. */
[data-theme="dark"] .sidebar {
background: var(--card);
border-right: 1px solid var(--border);
}
[data-theme="dark"] .sidebar-logo {
border-bottom-color: rgba(255,255,255,.05);
}
/* Название раздела давало 3.53 на новом фоне меню (и 4.13 на прежнем) при норме
4.5 — то есть пункты меню в тёмной теме не проходили по контрасту. В светлой
теме это уже чинили 27.08.2026 тем же значением; ставим его и здесь: 6.56. */
[data-theme="dark"] .nav-item { color: #94A3B8; }
/* Наведение обязано быть СВЕТЛЕЕ покоя, иначе подсказки «сюда можно нажать» нет.
Здесь стояло #94A3B8 — то же самое, что теперь у пункта в покое, — и наведение
осталось бы только заливкой. Берём ту же ступень, что в светлой теме. */
[data-theme="dark"] .nav-item:hover {
color: #CBD5E1;
background: rgba(255,255,255,.04);
}
/* Активный пункт — акцентом портала и в тёмной теме (03.09.2026): голубой
здесь означал «активно» и тем самым спорил с синим статусом «Запланирован».
Ступень та же, что в светлой теме, — меню тёмное в обеих. */
[data-theme="dark"] .nav-item.on {
color: #A5B4FC;
background: rgba(129,140,248,.14);
}
[data-theme="dark"] .sidebar-footer {
border-top-color: rgba(255,255,255,.05);
}
[data-theme="dark"] .sf-name { color: #E2E8F0; }
[data-theme="dark"] .sf-role { color: #475569; }
/* ── Карточки ── */
[data-theme="dark"] .scard {
background: var(--card);
border-color: var(--border);
}
[data-theme="dark"] .scard h2 { color: var(--text); }
[data-theme="dark"] .scard h3 { color: var(--text); }
/* ── Задачи ── */
[data-theme="dark"] .hm-task-item:hover { background: var(--card2); }
[data-theme="dark"] .hm-task-cb { border-color: #334155; }
/* ── Таблица ── */
[data-theme="dark"] .tbl-main th {
background: var(--card2);
border-bottom-color: var(--border);
color: #475569;
}
[data-theme="dark"] .tbl-main td { color: var(--text); }
[data-theme="dark"] .tbl-main tr:hover td { background: var(--card2); }
[data-theme="dark"] .ci { color: var(--text); }
[data-theme="dark"] .ci:focus { background: var(--act-bg); }
/* ── Модальное окно ── */
[data-theme="dark"] .mc {
background: var(--card);
border: 1px solid var(--border);
}
[data-theme="dark"] .mc h3 { color: var(--text); }
[data-theme="dark"] .mo { background: rgba(0,0,0,.6); }
/* ── Формы ── */
[data-theme="dark"] .fi,
[data-theme="dark"] .fs {
background: var(--card2);
border-color: var(--border);
color: var(--text);
}
[data-theme="dark"] .fi:focus,
[data-theme="dark"] .fs:focus {
border-color: #38BDF8;
box-shadow: 0 0 0 3px rgba(56,189,248,.1);
}
/* ── Кнопки ── */
[data-theme="dark"] .btn {
background: var(--card2);
border-color: var(--border);
color: var(--text);
}
[data-theme="dark"] .btn:hover {
background: var(--card);
border-color: #475569;
}
[data-theme="dark"] .btn-p {
background: #38BDF8;
border-color: #38BDF8;
color: #0F172A;
}
[data-theme="dark"] .btn-p:hover { background: #0EA5E9; }
[data-theme="dark"] .btn-d { color: #F87171; border-color: #4A1919; }
[data-theme="dark"] .btn-d:hover { background: #2A0F0F; }
/* ── Дашборд отдела ── */
[data-theme="dark"] .scard table th {
color: #475569;
border-bottom-color: var(--border);
}
[data-theme="dark"] .scard table tr { border-bottom-color: var(--border); }
[data-theme="dark"] .scard table tr:hover { background: var(--card2); }
[data-theme="dark"] .scard table td { color: var(--text); }
/* ── Контекстное меню ── */
[data-theme="dark"] .ctx-menu {
background: var(--card);
border-color: var(--border);
}
[data-theme="dark"] .ctx-item { color: var(--text); }
[data-theme="dark"] .ctx-item:hover { background: var(--card2); }
[data-theme="dark"] .ctx-item.danger { color: #F87171; }
[data-theme="dark"] .ctx-item.danger:hover { background: #2A0F0F; }
[data-theme="dark"] .ctx-sep { background: var(--border); }
/* Поиск: отдельного правила для тёмной темы больше нет — поле собрано
на токенах (--card2/--border/--text), и они меняются вместе с темой. */
[data-theme="dark"] .global-search-drop {
background: var(--card);
box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
[data-theme="dark"] .gs-item:hover { background: var(--card2); }
[data-theme="dark"] .gs-name { color: var(--text); }
[data-theme="dark"] .gs-sub { color: #475569; }
[data-theme="dark"] .gs-section-title { color: #475569; }
[data-theme="dark"] .gs-empty { color: #475569; }
/* ── Скроллбар ── */
[data-theme="dark"] * { scrollbar-color: #334155 transparent; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #334155; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #475569; }
/* ===== СЕГМЕНТИРОВАННЫЙ ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ ===== */
.theme-seg {
display: flex;
align-items: center;
background: #F1F5F9;
border: 1px solid #E2E8F0;
border-radius: 99px;
padding: 3px;
gap: 2px;
flex-shrink: 0;
}
.theme-seg-btn {
padding: 8px 16px;
border-radius: 99px;
border: none;
background: transparent;
font-size: 13px;
font-weight: 500;
color: #64748B;
cursor: pointer;
font-family: inherit;
transition: all .2s ease;
white-space: nowrap;
line-height: 1;
}
.theme-seg-btn:hover:not(.theme-seg-active) {
color: #0F172A;
background: rgba(0,0,0,0.04);
}
.theme-seg-btn.theme-seg-active {
background: #6366F1;
color: #fff;
font-weight: 600;
box-shadow: 0 2px 8px rgba(99,102,241,0.4);
}
/* Тёмная тема — адаптация переключателя */
[data-theme="dark"] .theme-seg {
background: #1A1D27;
border-color: #2D3148;
}
[data-theme="dark"] .theme-seg-btn {
color: #64748B;
}
[data-theme="dark"] .theme-seg-btn:hover:not(.theme-seg-active) {
color: #94A3B8;
background: rgba(255,255,255,0.06);
}
[data-theme="dark"] .theme-seg-btn.theme-seg-active {
background: #6366F1;
color: #fff;
box-shadow: 0 2px 10px rgba(99,102,241,0.5);
}