/* =========================================================================
   YOTO Staff Control — таблица стилей
   -------------------------------------------------------------------------
   Визуальный язык — как в соседнем yoto-sc. Страницы свёрстаны классами
   Bootstrap 5.3, поэтому Bootstrap остаётся, а здесь перекрашивается
   токенами. Порядок слоёв — часть контракта: токены, база, каркас,
   перекраска Bootstrap, компоненты hr, список на всю высоту, экран входа.
   Цвета общих компонентов — только токенами, иначе ломается тёмная тема.
   ========================================================================= */

/* --- Токены: светлая тема ------------------------------------------------ */
:root{
  /* поверхности */
  --bg:#F1F2F3; --surface:#FFFFFF; --surface-2:#F7F8F9;
  --line:#E3E6E8; --line-strong:#CDD2D6; --track:#EAEDEF;
  /* текст */
  --ink:#0E1317; --ink-2:#5B6670; --ink-3:#67737C;
  /* навигация */
  --nav:#0E1317; --nav-hover:#171E23; --nav-active:#1E262C; --nav-line:#1B2329;
  --nav-ink:#DCE2E6; --nav-ink-2:#7C8792;
  /* акцент и ссылки */
  --accent:#B7F102; --accent-ink:#0E1317; --accent-soft:rgba(183,241,2,.16);
  --link:#5E7F00; --link-h:#425A00;
  /* семантика */
  --ok:#10714A; --ok-bg:#DFF1E8;
  --danger:#B62525; --danger-bg:#FBE7E7;
  --s-blue-fg:#1F5FBF; --s-blue-bg:#E7EEFB;
  --s-amber-fg:#8F5100; --s-amber-bg:#FBEEDA;
  --s-violet-fg:#5B3DBB; --s-violet-bg:#ECE7FB;
  --s-lime-fg:#4E6B00; --s-lime-bg:#EEF7CF;
  /* геометрия и шрифты */
  --radius:10px; --radius-lg:12px;
  --nav-w:236px; --nav-w-collapsed:68px; --row-h:42px; --topbar-h:60px;
  --sidebar-motion:460ms; --sidebar-ease:cubic-bezier(.16,1,.30,1);
  --sans:Onest,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --num:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* масштаб .content (A / A+ / A++): высоты от 100vh внутри .content делятся на него */
  --content-zoom:1;
}

/* --- Токены: тёмная тема -------------------------------------------------
   Список повторён дважды намеренно: явный выбор пользователя и системная
   настройка — разные условия, а объединить их в один селектор нельзя. */
:root[data-theme="dark"]{
  --bg:#0B0F12; --surface:#13191D; --surface-2:#181F24;
  --line:#232B31; --line-strong:#333D45; --track:#232B31;
  --ink:#F2F5F7; --ink-2:#9AA5AE; --ink-3:#8B959D;
  --nav:#090D10; --nav-hover:#141B20; --nav-active:#1B2329; --nav-line:#1B2329;
  --link:#A9DE3A; --link-h:#C4EF5E;
  --ok:#4FCB92; --ok-bg:rgba(79,203,146,.14);
  --danger:#FF7B7B; --danger-bg:rgba(255,123,123,.11);
  --s-blue-fg:#6FA8FF; --s-blue-bg:rgba(111,168,255,.14);
  --s-amber-fg:#E9A63C; --s-amber-bg:rgba(233,166,60,.14);
  --s-violet-fg:#AE96FF; --s-violet-bg:rgba(174,150,255,.14);
  --s-lime-fg:#C4EF5E; --s-lime-bg:rgba(196,239,94,.14);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0B0F12; --surface:#13191D; --surface-2:#181F24;
    --line:#232B31; --line-strong:#333D45; --track:#232B31;
    --ink:#F2F5F7; --ink-2:#9AA5AE; --ink-3:#8B959D;
    --nav:#090D10; --nav-hover:#141B20; --nav-active:#1B2329; --nav-line:#1B2329;
    --link:#A9DE3A; --link-h:#C4EF5E;
    --ok:#4FCB92; --ok-bg:rgba(79,203,146,.14);
    --danger:#FF7B7B; --danger-bg:rgba(255,123,123,.11);
    --s-blue-fg:#6FA8FF; --s-blue-bg:rgba(111,168,255,.14);
    --s-amber-fg:#E9A63C; --s-amber-bg:rgba(233,166,60,.14);
    --s-violet-fg:#AE96FF; --s-violet-bg:rgba(174,150,255,.14);
    --s-lime-fg:#C4EF5E; --s-lime-bg:rgba(196,239,94,.14);
    color-scheme:dark;
  }
}
html[data-font-scale="lg"]{--content-zoom:1.125}
html[data-font-scale="xl"]{--content-zoom:1.25}

/* Переменные Bootstrap ссылаются на токены, поэтому его компоненты переключают тему вместе с нами.
   Селектор :root стоит позже bootstrap.min.css и перекрывает и светлый, и тёмный набор Bootstrap. */
:root{
  --bs-body-font-family:var(--sans); --bs-body-font-size:13px; --bs-body-line-height:1.45;
  --bs-body-color:var(--ink); --bs-body-bg:var(--bg);
  --bs-emphasis-color:var(--ink); --bs-heading-color:var(--ink);
  --bs-secondary-color:var(--ink-3); --bs-secondary-bg:var(--surface-2);
  --bs-tertiary-color:var(--ink-3); --bs-tertiary-bg:var(--surface-2);
  --bs-border-color:var(--line); --bs-border-color-translucent:var(--line);
  --bs-border-radius:9px; --bs-border-radius-sm:7px; --bs-border-radius-lg:var(--radius-lg);
  --bs-link-color:var(--link); --bs-link-hover-color:var(--link-h);
  --bs-code-color:var(--ink-2);
  --bs-focus-ring-color:var(--accent-soft);
}

/* --- База --------------------------------------------------------------- */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-h)}
::selection{background:var(--accent);color:var(--accent-ink)}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px;
  border:3px solid transparent;background-clip:content-box}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ui-icon{display:block;flex:0 0 auto}
.mono,.num{font-family:var(--num);font-variant-numeric:tabular-nums}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-weight:700;letter-spacing:-.01em}
h4,.h4{font-size:20px}
h5,.h5{font-size:16px}
h6,.h6{font-size:13.5px}
code{font-family:var(--num);font-size:.92em}
pre{font-family:var(--num);font-size:11.5px;color:var(--ink-2)}
summary{cursor:pointer}

/* --- Каркас: сетка и боковое меню ---------------------------------------- */
.app-shell{min-height:100vh;display:grid;grid-template-columns:var(--nav-w) minmax(0,1fr)}
.sidebar{position:sticky;top:0;z-index:80;height:100vh;display:flex;flex-direction:column;
  padding:12px 10px 0;background:var(--nav);border-right:1px solid var(--nav-line);overflow:hidden}
.sidebar-brand{flex:none;display:flex;align-items:center;gap:11px;height:var(--topbar-h);margin:-12px -10px 10px;
  padding:0 16px 0 23px;border-bottom:1px solid var(--nav-line);white-space:nowrap;overflow:hidden;text-decoration:none}
.brand-logo{display:block;flex:0 0 auto;width:75px;overflow:hidden;
  transition:width var(--sidebar-motion) var(--sidebar-ease)}
.brand-logo img{display:block;width:auto;max-width:none;height:20px}
.brand-copy{color:#fff;font-size:19px;font-weight:800;letter-spacing:.01em;line-height:1}

.sidebar nav{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:2px;margin:0 -10px;padding:0 10px 14px;
  overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--nav-active) transparent}
.sidebar nav::-webkit-scrollbar-thumb{background:var(--nav-active);background-clip:content-box}
.nav-item{position:relative;flex:none;display:flex;align-items:center;gap:11px;width:100%;height:36px;padding:0 12px;
  border:0;border-radius:9px;background:transparent;color:var(--nav-ink);font:inherit;font-size:13px;font-weight:600;
  text-align:left;text-decoration:none;white-space:nowrap;cursor:pointer}
.nav-icon{display:grid;place-items:center;flex:0 0 20px;width:20px;color:inherit}
.nav-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.nav-item:hover{background:var(--nav-hover);color:#fff}
.nav-item.active{color:#fff}
.nav-item.active .nav-icon{color:var(--accent)}
a.nav-item.active{background:var(--nav-active)}
a.nav-item.active::before,.nav-subitem.active::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;
  border-radius:0 3px 3px 0;background:var(--accent)}
/* Группы всегда раскрыты: подпись группы — не кнопка, подпункты стоят под ней; вертикальная нить — под иконкой. */
.nav-group{cursor:default}
.nav-group:hover{background:transparent;color:var(--nav-ink)}
.nav-group.active:hover{color:#fff}
.nav-sub{position:relative;display:grid;gap:1px;padding:2px 0 6px}
.nav-sub::before{content:"";position:absolute;left:21px;top:2px;bottom:8px;width:1px;background:var(--nav-line)}
.nav-subitem{position:relative;display:flex;align-items:center;height:32px;padding:0 10px 0 43px;border-radius:8px;
  color:var(--nav-ink-2);font-size:12.5px;font-weight:500;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-subitem:hover{background:var(--nav-hover);color:#fff}
.nav-subitem.active{background:var(--nav-active);color:#fff;font-weight:600}
.nav-subitem.active::before{top:8px;bottom:8px}

/* Свёрнутое меню (только широкий экран): полоса иконок, при наведении панель выезжает поверх страницы —
   колонка сетки не меняется, поэтому страница не прыгает. Подписи остаются в раскладке и только гаснут,
   чтобы иконки не смещались. Класс sidebar-peek ставит app.js с задержкой на уход курсора. */
@media(min-width:901px){
  .app-shell{transition:grid-template-columns var(--sidebar-motion) var(--sidebar-ease)}
  html.sidebar-collapsed .app-shell{grid-template-columns:var(--nav-w-collapsed) minmax(0,1fr)}
  .sidebar{width:var(--nav-w);will-change:width;
    transition:width var(--sidebar-motion) var(--sidebar-ease),box-shadow 280ms ease}
  html.sidebar-collapsed .sidebar{width:var(--nav-w-collapsed)}
  html.sidebar-collapsed.sidebar-peek .sidebar{width:var(--nav-w);box-shadow:14px 0 30px rgba(0,0,0,.15)}
  /* Контейнер обрезает логотип до «Y», при раскрытии «OTO» выезжает вместе с шириной меню. */
  html.sidebar-collapsed .sidebar .brand-logo{width:16px}
  html.sidebar-collapsed.sidebar-peek .sidebar .brand-logo{width:75px}
  html.sidebar-collapsed .sidebar :is(.brand-copy,.nav-label){opacity:0;visibility:hidden;pointer-events:none;
    transform:translateX(-5px);transition:opacity 150ms ease,transform 220ms var(--sidebar-ease),visibility 0s linear 220ms}
  html.sidebar-collapsed.sidebar-peek .sidebar :is(.brand-copy,.nav-label){opacity:1;visibility:visible;
    pointer-events:auto;transform:none;transition:opacity 210ms ease 110ms,transform 300ms var(--sidebar-ease) 70ms,visibility 0s}
  html.sidebar-collapsed:not(.sidebar-peek) .nav-sub{display:none}
  /* В полосе иконок раздел текущей страницы отмечен так же, как активный пункт. */
  html.sidebar-collapsed:not(.sidebar-peek) .nav-group.active{background:var(--nav-active)}
  html.sidebar-collapsed:not(.sidebar-peek) .nav-group.active::before{content:"";position:absolute;left:0;top:9px;bottom:9px;
    width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
}
/* Узкий экран: меню — выдвижная панель с затемнением страницы. */
@media(max-width:900px){
  .app-shell{grid-template-columns:minmax(0,1fr)}
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:90;width:var(--nav-w);height:100vh;height:100dvh;
    transform:translateX(-102%);transition:transform .18s ease}
  html.sidebar-mobile-open .sidebar{transform:translateX(0);box-shadow:12px 0 32px rgba(0,0,0,.18)}
  html.sidebar-mobile-open body::after{content:"";position:fixed;inset:0;z-index:85;background:rgba(8,12,16,.45)}
}

/* --- Каркас: верхняя панель и меню пользователя -------------------------- */
.main{min-width:0}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;
  height:var(--topbar-h);padding:0 20px;background:var(--surface);border-bottom:1px solid var(--line)}
.topbar-left{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.topbar-right{display:flex;align-items:center;gap:12px;white-space:nowrap}
.icon-btn{display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid var(--line);border-radius:9px;
  background:var(--surface);color:var(--ink-2);cursor:pointer;transition:border-color .14s ease,color .14s ease}
.icon-btn:hover{border-color:var(--accent);color:var(--ink)}
.clock{font-family:var(--num);font-size:12px;font-weight:500;color:var(--ink-2)}
.version{font-family:var(--num);font-size:11px;font-weight:600;padding:3px 7px;border-radius:6px;
  background:var(--surface);color:var(--ink-2)}

.user-menu{position:relative}
.user-menu-btn{display:flex;align-items:center;gap:9px;height:42px;max-width:260px;padding:0 8px 0 4px;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);text-align:left;cursor:pointer;
  transition:border-color .16s ease,box-shadow .16s ease}
.user-menu-btn:hover,.user-menu.open .user-menu-btn{border-color:var(--accent)}
.user-menu.open .user-menu-btn{box-shadow:0 0 0 3px var(--accent-soft)}
.user-avatar{flex:0 0 32px;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;
  background:var(--accent);color:var(--accent-ink)}
.user-avatar.lg{flex-basis:44px;width:44px;height:44px}
.user-menu-copy{display:grid;gap:1px;min-width:0;line-height:1.2}
.user-menu-copy strong{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-menu-copy span{font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-menu-chevron{display:grid;place-items:center;color:var(--ink-3);transform:rotate(90deg);transition:transform .16s ease}
.user-menu.open .user-menu-chevron{transform:rotate(-90deg)}
.user-menu-dropdown{position:absolute;right:0;top:calc(100% + 8px);z-index:75;width:300px;max-width:calc(100vw - 24px);
  overflow:hidden;white-space:normal;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:0 12px 28px rgba(14,19,23,.12)}
.user-menu-card{display:flex;align-items:center;gap:12px;padding:16px}
.user-menu-card>div{display:grid;gap:3px;min-width:0}
.user-menu-card strong{font-size:14px;font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.user-menu-card span{font-size:12px;color:var(--ink-3);overflow-wrap:anywhere}
.user-menu-logout{margin:0}
.user-menu-item{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%;height:44px;padding:0 16px;
  border:0;border-top:1px solid var(--line);border-radius:0;background:var(--surface);color:var(--ink);
  font-size:13.5px;font-weight:600;text-decoration:none;cursor:pointer}
.user-menu-item:hover{background:var(--surface-2);color:var(--ink)}
.user-menu-item.danger,.user-menu-item.danger:hover{color:var(--danger)}
.user-menu-foot{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;
  border-top:1px solid var(--line);background:var(--surface-2);font-size:11px;color:var(--ink-3)}

/* --- Рабочая область ----------------------------------------------------- */
/* A+ / A++ увеличивают только рабочую область: у шапки и меню 100vh и sticky, их zoom ломает. */
.content{padding:18px 20px 28px}
html[data-font-scale="lg"] .content,html[data-font-scale="xl"] .content{zoom:var(--content-zoom)}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;min-height:34px;margin-bottom:14px}
.page-head h1{margin:0;font-size:23px;font-weight:700;letter-spacing:-.025em;color:var(--ink)}

/* =========================================================================
   ПЕРЕКРАСКА BOOTSTRAP — его компоненты в примитивах yoto-sc. Состояния
   кнопок, таблиц и карточек задаются через переменные --bs-*: так их
   :hover, :active и :disabled Bootstrap подхватывает сам.
   ========================================================================= */

/* --- Карточки (.panel в yoto-sc) ----------------------------------------- */
.card{--bs-card-bg:var(--surface);--bs-card-color:var(--ink);--bs-card-border-color:var(--line);
  --bs-card-border-radius:var(--radius-lg);--bs-card-inner-border-radius:calc(var(--radius-lg) - 1px);
  --bs-card-cap-bg:var(--surface);--bs-card-cap-color:var(--ink);--bs-card-cap-padding-y:8px;--bs-card-cap-padding-x:15px;
  --bs-card-spacer-y:15px;--bs-card-spacer-x:15px;box-shadow:none}
.card-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 10px;min-height:46px;
  font-size:13.5px;border-bottom-color:var(--line)}
.card>.table-responsive:first-child{border-top-left-radius:var(--bs-card-inner-border-radius);border-top-right-radius:var(--bs-card-inner-border-radius)}
.card>.table-responsive:last-child{border-bottom-left-radius:var(--bs-card-inner-border-radius);border-bottom-right-radius:var(--bs-card-inner-border-radius)}

/* --- Таблицы ------------------------------------------------------------- */
.table{--bs-table-color:var(--ink);--bs-table-bg:var(--surface);--bs-table-border-color:var(--line);
  --bs-table-striped-color:var(--ink);--bs-table-striped-bg:var(--surface-2);
  --bs-table-active-color:var(--ink);--bs-table-active-bg:var(--surface-2);
  --bs-table-hover-color:var(--ink);--bs-table-hover-bg:var(--surface-2);
  font-size:12.5px;vertical-align:middle;font-variant-numeric:tabular-nums}
.table>:not(caption)>*>*{padding:8px 15px}
.table>tbody>tr>td{height:var(--row-h)}
.table>thead>tr>th,.table>thead>tr>td{--bs-table-bg:var(--surface-2);position:sticky;top:0;z-index:1;height:36px;
  padding-top:0;padding-bottom:0;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap;box-shadow:inset 0 -1px 0 var(--line)}
/* При border-collapse граница строки уезжает при прокрутке, поэтому низ «липкого» заголовка рисует тень. */
.table>tbody>tr:last-child>*{border-bottom-width:0}
.table td small,.table td .small{color:var(--ink-3)}
.table-sm>:not(caption)>*>*{padding:5px 10px}
.table-sm>tbody>tr>td{height:34px}
.table-light{--bs-table-color:var(--ink);--bs-table-bg:var(--surface-2);--bs-table-border-color:var(--line);
  --bs-table-striped-bg:var(--surface-2);--bs-table-hover-bg:var(--surface-2);--bs-table-active-bg:var(--surface-2)}

/* --- Кнопки -------------------------------------------------------------- */
.btn{--bs-btn-padding-x:14px;--bs-btn-padding-y:6px;--bs-btn-font-family:var(--sans);--bs-btn-font-size:12.5px;
  --bs-btn-font-weight:600;--bs-btn-line-height:1.25;--bs-btn-border-radius:9px;--bs-btn-box-shadow:none;
  --bs-btn-focus-box-shadow:0 0 0 3px var(--accent-soft);--bs-btn-disabled-opacity:.5;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:34px}
.btn-sm{--bs-btn-padding-x:10px;--bs-btn-padding-y:4px;--bs-btn-font-size:12px;--bs-btn-border-radius:8px;min-height:28px}
.btn-lg{--bs-btn-padding-x:20px;--bs-btn-font-size:14px;min-height:44px}
/* Главное действие — лайм, как .btn.primary в yoto-sc. */
.btn-primary{--bs-btn-color:var(--accent-ink);--bs-btn-bg:var(--accent);--bs-btn-border-color:var(--accent);
  --bs-btn-hover-color:var(--accent-ink);--bs-btn-hover-bg:#C4F52E;--bs-btn-hover-border-color:#C4F52E;
  --bs-btn-active-color:var(--accent-ink);--bs-btn-active-bg:#A6DB00;--bs-btn-active-border-color:#A6DB00;
  --bs-btn-disabled-color:var(--accent-ink);--bs-btn-disabled-bg:var(--accent);--bs-btn-disabled-border-color:var(--accent);
  font-weight:700}
/* Остальные контурные и светлые — нейтральная кнопка (.btn.secondary в yoto-sc). */
.btn-secondary,.btn-light,.btn-outline-primary,.btn-outline-secondary,.btn-outline-dark,.btn-outline-light,.btn-outline-info{
  --bs-btn-color:var(--ink-2);--bs-btn-bg:var(--surface);--bs-btn-border-color:var(--line-strong);
  --bs-btn-hover-color:var(--ink);--bs-btn-hover-bg:var(--surface-2);--bs-btn-hover-border-color:var(--line-strong);
  --bs-btn-active-color:var(--ink);--bs-btn-active-bg:var(--line);--bs-btn-active-border-color:var(--line-strong);
  --bs-btn-disabled-color:var(--ink-3);--bs-btn-disabled-bg:var(--surface);--bs-btn-disabled-border-color:var(--line)}
.btn-success,.btn-outline-success{--bs-btn-color:var(--ok);--bs-btn-bg:var(--ok-bg);--bs-btn-border-color:transparent;
  --bs-btn-hover-color:var(--surface);--bs-btn-hover-bg:var(--ok);--bs-btn-hover-border-color:var(--ok);
  --bs-btn-active-color:var(--surface);--bs-btn-active-bg:var(--ok);--bs-btn-active-border-color:var(--ok);
  --bs-btn-disabled-color:var(--ok);--bs-btn-disabled-bg:var(--ok-bg);--bs-btn-disabled-border-color:transparent}
.btn-danger,.btn-outline-danger{--bs-btn-color:var(--danger);--bs-btn-bg:var(--danger-bg);--bs-btn-border-color:transparent;
  --bs-btn-hover-color:var(--surface);--bs-btn-hover-bg:var(--danger);--bs-btn-hover-border-color:var(--danger);
  --bs-btn-active-color:var(--surface);--bs-btn-active-bg:var(--danger);--bs-btn-active-border-color:var(--danger);
  --bs-btn-disabled-color:var(--danger);--bs-btn-disabled-bg:var(--danger-bg);--bs-btn-disabled-border-color:transparent}
.btn-warning,.btn-outline-warning{--bs-btn-color:var(--s-amber-fg);--bs-btn-bg:var(--s-amber-bg);--bs-btn-border-color:transparent;
  --bs-btn-hover-color:var(--surface);--bs-btn-hover-bg:var(--s-amber-fg);--bs-btn-hover-border-color:var(--s-amber-fg);
  --bs-btn-active-color:var(--surface);--bs-btn-active-bg:var(--s-amber-fg);--bs-btn-active-border-color:var(--s-amber-fg);
  --bs-btn-disabled-color:var(--s-amber-fg);--bs-btn-disabled-bg:var(--s-amber-bg);--bs-btn-disabled-border-color:transparent}
.btn-info{--bs-btn-color:var(--s-blue-fg);--bs-btn-bg:var(--s-blue-bg);--bs-btn-border-color:transparent;
  --bs-btn-hover-color:var(--surface);--bs-btn-hover-bg:var(--s-blue-fg);--bs-btn-hover-border-color:var(--s-blue-fg);
  --bs-btn-active-color:var(--surface);--bs-btn-active-bg:var(--s-blue-fg);--bs-btn-active-border-color:var(--s-blue-fg)}
.btn-dark{--bs-btn-color:var(--surface);--bs-btn-bg:var(--ink);--bs-btn-border-color:var(--ink);
  --bs-btn-hover-color:var(--surface);--bs-btn-hover-bg:var(--ink-2);--bs-btn-hover-border-color:var(--ink-2);
  --bs-btn-active-color:var(--surface);--bs-btn-active-bg:var(--ink-2);--bs-btn-active-border-color:var(--ink-2);
  --bs-btn-disabled-color:var(--surface);--bs-btn-disabled-bg:var(--ink);--bs-btn-disabled-border-color:var(--ink)}
.btn-link{--bs-btn-color:var(--link);--bs-btn-hover-color:var(--link-h);--bs-btn-active-color:var(--link-h);text-decoration:none}

/* --- Формы --------------------------------------------------------------- */
.form-label{margin-bottom:6px;font-size:12px;font-weight:600;color:var(--ink-2)}
.form-text{font-size:11.5px;color:var(--ink-3)}
.form-control,.form-select{min-height:36px;padding:7px 11px;font-size:13px;line-height:1.4;color:var(--ink);
  background-color:var(--surface);border-color:var(--line-strong);border-radius:9px}
.form-select{padding-right:32px;background-position:right 10px center}
.form-control::placeholder{color:var(--ink-3)}
.form-control:focus,.form-select:focus{color:var(--ink);background-color:var(--surface);border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}
.form-control:disabled,.form-select:disabled{color:var(--ink-2);background-color:var(--surface-2)}
.form-control-sm,.form-select-sm{min-height:30px;padding:4px 9px;font-size:12px;border-radius:8px}
.form-select-sm{padding-right:28px}
.form-control-lg,.form-select-lg{min-height:42px;font-size:14px}
textarea.form-control{min-height:76px}
.form-control-color{width:3rem;padding:4px}
.form-control::file-selector-button{margin:-7px -11px;margin-inline-end:11px;padding:7px 11px;color:var(--ink-2);
  background-color:var(--surface-2);border-color:var(--line-strong)}
.form-control:hover:not(:disabled):not([readonly])::file-selector-button{background-color:var(--line)}
.form-check-input{--bs-form-check-bg:var(--surface);border-color:var(--line-strong)}
.form-check-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
/* Лайм с тёмной галочкой — в обеих темах: белая галочка Bootstrap на светлом лайме не видна. */
.form-check-input:checked{background-color:var(--accent);border-color:var(--accent)}
.form-check-input:checked[type=checkbox]{--bs-form-check-bg-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230E1317' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")}
.form-check-input:checked[type=radio]{--bs-form-check-bg-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%230E1317'/%3e%3c/svg%3e")}
.form-check-label{color:var(--ink)}

/* --- Чипы (badge) -------------------------------------------------------- */
/* Цвет приходит модификатором Bootstrap (text-bg-*), например из yoto_mib_status_badge(). */
.badge{--bs-badge-padding-x:9px;--bs-badge-padding-y:3px;--bs-badge-font-size:11px;--bs-badge-font-weight:700;
  --bs-badge-color:var(--ink-3);--bs-badge-border-radius:99px;line-height:1.35;background:var(--surface-2)}
.text-bg-primary,.text-bg-info{color:var(--s-blue-fg)!important;background-color:var(--s-blue-bg)!important}
.text-bg-success,.bg-success{color:var(--ok)!important;background-color:var(--ok-bg)!important}
.text-bg-danger,.bg-danger{color:var(--danger)!important;background-color:var(--danger-bg)!important}
.text-bg-warning,.bg-warning{color:var(--s-amber-fg)!important;background-color:var(--s-amber-bg)!important}
.text-bg-secondary,.text-bg-light{color:var(--ink-2)!important;background-color:var(--surface-2)!important}
.text-bg-dark{color:var(--surface)!important;background-color:var(--ink)!important}
.badge.text-bg-light,.badge.text-bg-secondary{box-shadow:inset 0 0 0 1px var(--line)}

/* --- Сообщения ----------------------------------------------------------- */
.alert{--bs-alert-padding-x:13px;--bs-alert-padding-y:11px;--bs-alert-margin-bottom:12px;--bs-alert-border-radius:var(--radius);
  --bs-alert-border-color:transparent;font-size:12.5px;font-weight:500}
.alert-success{--bs-alert-color:var(--ok);--bs-alert-bg:var(--ok-bg);--bs-alert-link-color:var(--ok)}
.alert-danger{--bs-alert-color:var(--danger);--bs-alert-bg:var(--danger-bg);--bs-alert-link-color:var(--danger)}
.alert-warning{--bs-alert-color:var(--s-amber-fg);--bs-alert-bg:var(--s-amber-bg);--bs-alert-link-color:var(--s-amber-fg)}
.alert-info,.alert-primary{--bs-alert-color:var(--s-blue-fg);--bs-alert-bg:var(--s-blue-bg);--bs-alert-link-color:var(--s-blue-fg)}
.alert-light,.alert-secondary{--bs-alert-color:var(--ink-2);--bs-alert-bg:var(--surface-2);--bs-alert-border-color:var(--line);
  --bs-alert-link-color:var(--ink)}
.alert-dismissible .btn-close{padding:13px}

/* --- Утилиты Bootstrap с прямыми цветами --------------------------------- */
.text-muted{color:var(--ink-3)!important}
.text-primary{color:var(--link)!important}
.text-success{color:var(--ok)!important}
.text-danger{color:var(--danger)!important}
.text-warning{color:var(--s-amber-fg)!important}
.bg-light{background-color:var(--surface-2)!important}
.bg-white{background-color:var(--surface)!important}
.shadow-sm{box-shadow:none!important}
.rounded{border-radius:var(--radius)!important}

/* =========================================================================
   КОМПОНЕНТЫ HR — имена классов из страниц, цвета только токенами.
   ========================================================================= */
.small-muted{color:var(--ink-3);font-size:11.5px}

/* Панель фильтров над списком и заголовок раздела с действиями. */
.action-bar{padding:12px 15px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg)}
.toolbar-card{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 15px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg)}
.toolbar-title{font-size:14px;font-weight:700;color:var(--ink)}
.toolbar-subtitle{margin-top:2px;font-size:12px;color:var(--ink-3)}
.hr-date-pill{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border:1px solid var(--line);
  border-radius:9px;background:var(--surface);color:var(--ink-2);font-size:12.5px;font-weight:600}

/* Плитки-счётчики: «Кадры» (stat-card) и главная (hr-kpi-card). */
a:has(>.stat-card):hover .stat-card{border-color:var(--accent)}
.stat-card .card-body{padding:13px 15px}
.stat-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.stat-value{margin-top:6px;font-size:26px;font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.stat-card .small-muted{display:block;margin-top:6px}
.hr-kpi-card{flex-direction:row;align-items:center;gap:13px;min-height:86px;padding:14px 16px}
.hr-kpi-icon{flex:0 0 40px;width:40px;height:40px;display:grid;place-items:center;border-radius:10px;
  background:var(--s-blue-bg);color:var(--s-blue-fg);font-size:17px;font-weight:800}
.hr-kpi-icon.blue{background:var(--s-blue-bg);color:var(--s-blue-fg)}
.hr-kpi-icon.red{background:var(--danger-bg);color:var(--danger)}
.hr-kpi-icon.green{background:var(--ok-bg);color:var(--ok)}
.hr-kpi-icon.amber{background:var(--s-amber-bg);color:var(--s-amber-fg)}
.hr-kpi-label{margin-bottom:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.hr-kpi-value{font-size:26px;font-weight:700;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hr-kpi-sub{margin-top:5px;font-size:11.5px;color:var(--ink-3)}

/* Панели главной: заголовок с иконкой и действием, таблица, пустое состояние. */
.hr-panel{height:auto!important;overflow:hidden}
.hr-panel-header{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;padding:6px 15px;
  border-bottom:1px solid var(--line)}
.hr-panel-title{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;color:var(--ink)}
.hr-panel-title .panel-icon{width:24px;height:24px;display:grid;place-items:center;border-radius:7px;
  background:var(--s-blue-bg);color:var(--s-blue-fg);font-size:12px;font-weight:800}
.hr-panel-title .panel-icon.red{background:var(--danger-bg);color:var(--danger)}
.hr-panel-title .panel-icon.green{background:var(--ok-bg);color:var(--ok)}
.hr-panel-title .panel-icon.amber{background:var(--s-amber-bg);color:var(--s-amber-fg)}
.hr-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:96px;padding:18px;
  color:var(--ink-3);font-size:12.5px;text-align:center}
.hr-empty.compact{min-height:82px}
.hr-empty-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--surface-2);
  color:var(--ink-3);font-size:15px;font-weight:800}
.hr-empty-icon.blue{background:var(--s-blue-bg);color:var(--s-blue-fg)}
.hr-empty-icon.red{background:var(--danger-bg);color:var(--danger)}
.hr-empty-icon.green{background:var(--ok-bg);color:var(--ok)}

/* Быстрые действия главной. */
.quick-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.quick-tile{display:flex;align-items:center;gap:11px;min-height:62px;padding:11px 13px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-lg);color:var(--ink);text-decoration:none;transition:border-color .14s ease}
.quick-tile:hover{border-color:var(--accent);color:var(--ink)}
.quick-icon{flex:0 0 36px;width:36px;height:36px;display:grid;place-items:center;border-radius:9px;
  background:var(--surface-2);font-size:16px}
.quick-tile.red .quick-icon{background:var(--danger-bg);color:var(--danger)}
.quick-tile b{display:block;font-size:13px;font-weight:700;line-height:1.2}
.quick-tile small{display:block;margin-top:3px;font-size:11.5px;line-height:1.25;color:var(--ink-3)}

/* Табель посещаемости: свой скролл, «липкие» шапка (две строки) и колонка сотрудника.
   Высота делится на --content-zoom: внутри .content на A+ / A++ действует zoom. */
.attendance-wrap{overflow:auto;max-height:max(320px,calc(100vh / var(--content-zoom) - 360px));
  border-radius:0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius)}
.attendance-table{min-width:1200px;border-collapse:separate;border-spacing:0;background:var(--surface);font-size:12px;
  font-variant-numeric:tabular-nums}
.attendance-table th,.attendance-table td{padding:3px;text-align:center;border:0;border-right:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.attendance-table thead th{position:sticky;top:0;z-index:4;height:28px;padding:0 6px;background:var(--surface-2);color:var(--ink-3);
  font-size:10.5px;font-weight:700;white-space:nowrap}
.attendance-table thead tr+tr th{top:28px}
.attendance-table .emp-col{position:sticky;left:0;z-index:3;min-width:240px;padding:5px 10px;text-align:left;
  background:var(--surface);box-shadow:inset -1px 0 0 var(--line-strong)}
.attendance-table thead .emp-col{z-index:5;background:var(--surface-2)}
.att-cell{width:46px;min-width:46px;border:0;text-align:center;font-weight:700;background:transparent}
/* Клетка — список без стрелки: виден только код отметки, список открывается по клику. */
.att-select{width:50px;min-width:50px;height:26px;padding:0 2px;border:0;border-radius:6px;background:transparent;
  color:inherit;font-size:12px;font-weight:700;text-align:center;text-align-last:center;cursor:pointer;-webkit-appearance:none;appearance:none}
.att-select:hover{box-shadow:inset 0 0 0 1px var(--line-strong)}
.att-select:focus{outline:2px solid var(--accent);outline-offset:-1px}
.att-select option{background:var(--surface);color:var(--ink)}
/* Пустая клетка красится в PHP белым (цвет «без отметки»); в тёмной теме — поверхность таблицы. */
[data-bs-theme="dark"] .attendance-table td[style^="background:#ffffff"]{background:var(--surface)!important;color:var(--ink)!important}
.mark-chip{display:inline-block;min-width:34px;padding:3px 7px;border-radius:6px;font-size:11.5px;font-weight:700;text-align:center}

/* Карточка сотрудника и документы. */
.employee-photo{width:92px;height:92px;object-fit:cover;border-radius:var(--radius-lg);background:var(--surface-2)}
.doc-upload-form .form-label{margin-bottom:4px}
.doc-mobile-panel{padding:12px;background:var(--s-amber-bg);border:1px solid var(--line);border-radius:var(--radius)}
.doc-frame-hint{color:var(--s-amber-fg);font-size:12.5px}
.doc-preview-wrap{padding:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius)}
/* Кадр камеры тёмный в обеих темах — это видоискатель, а не поверхность интерфейса. */
.doc-camera-frame{position:relative;width:100%;aspect-ratio:1.586;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:#111827;border-radius:var(--radius-lg)}
.doc-camera-frame img{display:block;width:100%;height:100%;object-fit:cover}
.doc-frame-overlay{position:absolute;inset:7%;display:flex;align-items:flex-end;justify-content:center;pointer-events:none;
  border:3px solid rgba(255,255,255,.92);border-radius:12px;box-shadow:0 0 0 999px rgba(0,0,0,.18)}
.doc-frame-overlay span{margin-bottom:8px;padding:4px 8px;border-radius:8px;background:rgba(17,24,39,.72);color:#fff;font-size:12px}
.doc-crop-result{width:100%;min-height:180px;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--surface);border:1px dashed var(--line-strong);border-radius:var(--radius-lg)}
.doc-crop-result img{display:block;width:100%;height:auto}

/* Проверка МИБ. */
.mib-page-clean .row{align-items:flex-start}
.mib-page-clean .mib-top-note{display:none}
.mib-page-clean .mib-check-card .form-select-lg{min-height:36px;font-size:13px}
.mib-methods{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:9px}
.mib-method-btn{min-height:32px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--ink-2);
  font-size:12.5px;font-weight:600}
.mib-method-btn:hover{color:var(--ink)}
.mib-method-btn.active{background:var(--surface);border-color:var(--line);color:var(--ink)}
.mib-employee-box{padding:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius)}
.mib-copy-line{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 9px;
  background:var(--surface);border:1px solid var(--line);border-radius:8px}
.mib-copy-line code{color:var(--ink);font-size:13px;font-weight:700;white-space:nowrap}
.mib-steps{display:grid;gap:10px}
.mib-steps>div{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;padding:11px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.mib-steps b{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:var(--accent-soft);color:var(--link)}
.employee-data-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
.employee-data-line{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:7px;min-width:0;padding:7px 9px;
  background:var(--surface);border:1px solid var(--line);border-radius:8px}
.employee-data-line.full{grid-column:1/-1}
.employee-data-line span{font-size:11.5px;color:var(--ink-3)}
.employee-data-line b{overflow:hidden;font-size:12.5px;color:var(--ink);text-overflow:ellipsis;white-space:nowrap}
.employee-data-line button,.mib-copy-line button{padding:3px 8px;border:1px solid var(--line);border-radius:7px;
  background:var(--surface-2);color:var(--ink-2);font-size:11px;font-weight:700}
.employee-data-line button:hover,.mib-copy-line button:hover{border-color:var(--accent);color:var(--ink)}
.mib-live-box{margin-top:12px;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.mib-live-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
/* Капча приходит картинкой на белом фоне, поэтому подложка белая и в тёмной теме. */
.mib-captcha-wrap{display:flex;align-items:center;justify-content:center;min-height:96px;padding:10px;background:#fff;
  border:1px dashed var(--line-strong);border-radius:var(--radius)}
.mib-captcha-img{max-width:100%;max-height:110px;object-fit:contain;border-radius:8px}
.mib-result-preview{padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.mib-result-text{max-height:160px;overflow:auto;white-space:pre-wrap;font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.mib-settings-details summary{padding:4px 2px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.clean-table .text-truncate{max-width:100%}

/* «Настройки»: подпись с пояснением слева, переключатель справа. */
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 15px}
.settings-row+.settings-row{border-top:1px solid var(--line)}
.settings-row>div:first-child{display:grid;gap:3px;min-width:0}
.settings-row>div:first-child>strong{font-size:13.5px;font-weight:700;color:var(--ink)}
.settings-row>div:first-child>span{font-size:12px;color:var(--ink-3)}
.settings-row>:last-child{flex:0 0 auto}
.font-scale{display:inline-flex;align-items:center;gap:2px;height:32px;padding:3px;border:1px solid var(--line);
  border-radius:9px;background:var(--surface-2)}
.font-scale button{height:24px;min-width:30px;padding:0 7px;border:1px solid transparent;border-radius:6px;background:transparent;
  color:var(--ink-2);font-size:12.5px;font-weight:600;line-height:1;cursor:pointer;white-space:nowrap}
.font-scale button:hover{color:var(--ink)}
/* Активный сегмент — по атрибуту на <html>, а не по aria-pressed: атрибут ставится до отрисовки, JS — позже. */
html:not([data-font-scale]) .font-scale [data-font-scale="md"],html[data-font-scale="lg"] .font-scale [data-font-scale="lg"],
html[data-font-scale="xl"] .font-scale [data-font-scale="xl"]{background:var(--surface);border-color:var(--line);color:var(--ink)}
/* Тумблер темы: подпись и бегунок выбирает CSS по тем же условиям, что и токены, — при загрузке ничего не мигает. */
.theme-switch{--ts-shift:68px;position:relative;display:inline-flex;align-items:center;justify-content:center;width:96px;height:28px;
  padding:0 10px 0 31px;border:0;border-radius:999px;background:var(--track);color:var(--ink-2);font-size:12px;font-weight:600;
  cursor:pointer;transition:background-color .16s ease,color .16s ease}
.theme-switch:hover{color:var(--ink)}
.theme-switch-knob{position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:var(--surface);
  box-shadow:0 1px 3px rgba(14,19,23,.25);transition:transform .2s ease,background-color .16s ease}
.theme-switch .ts-dark{display:none}
:root[data-theme="dark"] .theme-switch{padding:0 31px 0 10px;background:var(--line-strong);color:var(--ink)}
:root[data-theme="dark"] .theme-switch-knob{transform:translateX(var(--ts-shift));background:var(--ink)}
:root[data-theme="dark"] .theme-switch .ts-light{display:none}
:root[data-theme="dark"] .theme-switch .ts-dark{display:inline}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-switch{padding:0 31px 0 10px;background:var(--line-strong);color:var(--ink)}
  :root:not([data-theme="light"]) .theme-switch-knob{transform:translateX(var(--ts-shift));background:var(--ink)}
  :root:not([data-theme="light"]) .theme-switch .ts-light{display:none}
  :root:not([data-theme="light"]) .theme-switch .ts-dark{display:inline}
}

/* --- Список на всю высоту (.table-fit) ------------------------------------
   Карточка главной таблицы с классом .table-fit — прямой потомок .content — занимает остаток экрана:
   заголовок страницы и фильтры стоят наверху, строки прокручиваются внутри .table-responsive, заголовок
   колонок (th уже sticky) виден всегда. Включается через :has(), поэтому index.php о нём не знает.
   Высоту даёт flex от .main, а не vh внутри .content — на .content действует zoom размера шрифта.
   Сжимается только список от 8 видимых строк и не ниже 300px; короткий список держит свою высоту.
   Узкий или низкий экран и печать — обычная прокрутка документа. */
@media screen and (min-width:901px) and (min-height:560px){
  .main:has(>.content>.table-fit){height:100vh;display:flex;flex-direction:column}
  .main:has(>.content>.table-fit)>.topbar{flex:none}
  .main:has(>.content>.table-fit)>.content{flex:1 1 0;min-height:0;display:flex;flex-direction:column;overflow:auto;padding-bottom:18px}
  .content:has(>.table-fit)>*{flex:none}
  .content>.table-fit{margin-bottom:0;overflow:hidden}
  .content>.table-fit:has(tbody>tr:nth-child(8 of :not([hidden]))){flex:0 1 auto;min-height:300px}
  .table-fit>*{flex:none}
  .table-fit>.table-responsive{flex:0 1 auto;min-height:0;overflow:auto}
}

/* --- Экран входа ---------------------------------------------------------
   Тёмный в обеих темах — самостоятельная сплит-панель, в переключении темы не участвует. */
.login-body{min-height:100vh;display:grid;place-items:center;padding:40px;background:#0B0F12;
  background-image:radial-gradient(#1B2329 1px,transparent 1px);background-size:22px 22px;font-family:var(--sans)}
.login-card{width:min(1000px,100%);display:grid;grid-template-columns:1.1fr 1fr;overflow:hidden;
  border:1px solid #1E262C;border-radius:18px;background:#0E1317}
.login-aside{display:flex;flex-direction:column;justify-content:space-between;gap:48px;padding:44px;border-right:1px solid #1E262C}
.login-brand{display:flex;align-items:center;gap:14px}
.login-brand img{display:block;width:auto;height:36px}
.login-brand span{color:#fff;font-size:34px;font-weight:800;letter-spacing:.01em;line-height:1}
.login-facts{display:flex;flex-wrap:wrap;gap:22px;padding-top:14px;border-top:1px solid #1E262C}
.login-facts div{display:grid;gap:4px}
.login-facts b{color:#fff;font-family:var(--num);font-size:22px;font-weight:600}
.login-facts span{color:#6B757D;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.login-form{display:flex;flex-direction:column;gap:20px;padding:44px 40px;background:#12181C}
.login-form h1{margin:0;color:#fff;font-size:26px;font-weight:700;letter-spacing:-.02em}
.login-form p.login-sub{margin:6px 0 0;color:#8B959D;font-size:13px}
.login-form form{display:grid;gap:16px}
.login-form label{display:grid;gap:7px;color:#9AA5AE;font-size:12px;font-weight:600}
.login-form input{height:44px;padding:0 14px;border:1px solid #2A343A;border-radius:10px;background:#0B0F12;color:#fff;
  font-size:14px;outline:none}
.login-form input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.login-form .btn{min-height:46px;border-radius:10px;font-size:14px}
.login-form .alert{margin:0;background:rgba(255,123,123,.11);color:#FF7B7B}

/* --- Узкие экраны -------------------------------------------------------- */
@media(max-width:1399px){
  .quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:991px){
  .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .toolbar-card{flex-direction:column;align-items:flex-start}
}
@media(max-width:900px){
  .content{padding:14px 14px 24px}
  .page-head h1{font-size:20px}
  .topbar{padding:0 12px}
}
@media(max-width:820px){
  .login-body{padding:16px}
  .login-card{grid-template-columns:1fr}
  .login-aside{display:none}
  .login-form{padding:32px 24px}
}
@media(max-width:767px){
  .quick-grid,.employee-data-grid,.mib-methods{grid-template-columns:1fr}
  .employee-data-line.full{grid-column:auto}
  .hr-kpi-card{min-height:auto}
  .employee-view-page .card-body{padding:12px}
  .doc-mobile-panel .btn{width:100%}
  .doc-preview-wrap{padding:8px}
}
@media(max-width:680px){
  .clock{display:none}
  .user-menu-copy,.user-menu-chevron{display:none}
  .user-menu-btn{gap:0;padding:0 4px}
}
@media(max-width:560px){
  .settings-row{flex-direction:column;align-items:flex-start}
}

/* --- Печать и уменьшение движения ---------------------------------------- */
@media print{
  .sidebar,.topbar{display:none!important}
  .app-shell{display:block}
  .content{padding:0;zoom:1!important}
}
@media (prefers-reduced-motion:reduce){
  .app-shell,.sidebar,.brand-logo,.quick-tile,.user-menu-chevron,.theme-switch-knob,
  .sidebar :is(.brand-copy,.nav-label){transition:none!important}
}