/* ==========================================================================
   theme.css - тема разделов status-board.

   Подключается ПОСЛЕ sb-tokens.css и sb-primitives.css (и после встроенного
   <style> страницы). Своих цветов здесь нет: все значения - роли из
   sb-tokens.css. Раньше этот файл держал вторую копию палитры литералами,
   и любая правка цвета расходилась между двумя местами.

   Тёмная тема - основная. Светлая включается [data-theme="light"] и тоже
   целиком описана в sb-tokens.css.
   ========================================================================== */

:root {
    /* --- плотность доски --- */
    --employee-card-width: 265px;
    --employee-card-height: auto;
    --status-card-gap: 8px;
    --status-block-padding: 10px;
}

/* ==========================================================================
   База
   ========================================================================== */

body {
    background-color: var(--sb-bg);
    color: var(--sb-ink);
}

/* Числа не должны прыгать при обновлении по Socket.IO */
.count-badge,
.clock-time,
.confirmation-caption,
[class*="time"],
[class*="count"],
td, th {
    font-variant-numeric: tabular-nums;
}

input, select, textarea {
    background-color: var(--sb-input);
    color: var(--sb-ink);
    border-color: var(--sb-line);
}

input::placeholder, textarea::placeholder { color: var(--sb-ink-3); opacity: 1; }

/* ==========================================================================
   Оболочка: боковая панель + верхняя строка. Разметку строит app-shell.js

   Панель и шапка - постоянная рамка приложения: при переходе между
   разделами (View Transitions, см. sb-primitives.css) они не мигают,
   меняется только рабочая область.
   ========================================================================== */

body.sb-shelled { padding: 0 !important; display: block !important; }

.sb-shell {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--sb-page-glow), var(--sb-bg);
    background-attachment: fixed;
}

.sb-rail {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-0);
    width: 248px;
    flex: 0 0 248px;
    padding: var(--sb-space-3) var(--sb-space-3) var(--sb-space-3);
    background: var(--sb-rail);
    border-right: 1px solid var(--sb-line-soft);
    height: 100vh;
    height: 100dvh;
    position: sticky;
    top: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    view-transition-name: sb-rail;
}

.sb-brand {
    display: flex;
    align-items: center;
    gap: var(--sb-space-2);
    height: 40px;
    padding: 0 var(--sb-space-2);
    flex: 0 0 auto;
    font-size: var(--sb-text-lg);
    font-weight: var(--sb-weight-heavy);
    color: var(--sb-ink);
    letter-spacing: var(--sb-tracking-tighter);
    text-decoration: none;
}
.sb-brand img, .sb-brand svg { width: 24px; height: 24px; flex: 0 0 auto; }
.sb-brand small {
    margin-left: auto;
    padding: 1px var(--sb-space-2);
    border: 1px solid var(--sb-line);
    border-radius: var(--sb-radius-full);
    font-size: var(--sb-text-micro);
    font-weight: var(--sb-weight-medium);
    letter-spacing: 0;
    color: var(--sb-ink-3);
}

.sb-cmdk {
    display: flex;
    align-items: center;
    gap: var(--sb-space-2);
    height: var(--sb-control-md);
    margin: var(--sb-space-2) 0 var(--sb-space-3);
    padding: 0 var(--sb-space-2) 0 var(--sb-space-3);
    flex: 0 0 auto;
    border: 1px solid var(--sb-line-soft);
    border-radius: var(--sb-radius-sm);
    background: var(--sb-input);
    color: var(--sb-ink-3);
    font: inherit;
    font-size: var(--sb-text-sm);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--sb-duration-fast) var(--sb-ease), color var(--sb-duration-fast) var(--sb-ease);
}
.sb-cmdk:hover { border-color: var(--sb-line-strong); color: var(--sb-ink-2); }
.sb-cmdk span { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

kbd.sb-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 var(--sb-space-1);
    box-sizing: border-box;
    border: 1px solid var(--sb-line);
    border-bottom-width: 2px;
    border-radius: var(--sb-radius-xs);
    background: var(--sb-raised);
    color: var(--sb-ink-3);
    font-family: var(--sb-font);
    font-size: var(--sb-text-micro);
    font-weight: var(--sb-weight-medium);
    line-height: 1;
}

.sb-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sb-space-3);
    height: var(--sb-control-md);
    padding: 0 var(--sb-space-3);
    border-radius: var(--sb-radius-sm);
    color: var(--sb-ink-2);
    font-size: var(--sb-text-md);
    font-weight: var(--sb-weight-medium);
    text-decoration: none;
    border: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
    font-family: inherit;
    transition: background-color var(--sb-duration-fast) var(--sb-ease), color var(--sb-duration-fast) var(--sb-ease);
}
.sb-nav-item:hover { background: var(--sb-hover); color: var(--sb-ink); }
.sb-nav-item svg { flex: 0 0 auto; color: var(--sb-ink-3); transition: color var(--sb-duration-fast) var(--sb-ease); }
.sb-nav-item:hover svg { color: var(--sb-ink-2); }
.sb-nav-item span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.sb-nav-item[aria-current="page"] {
    background: var(--sb-card);
    color: var(--sb-ink);
    font-weight: var(--sb-weight-bold);
    box-shadow: var(--sb-highlight), var(--sb-elev-1);
}
.sb-nav-item[aria-current="page"] svg { color: var(--sb-accent); }
/* Метка текущего раздела - короткий штрих акцента у края пункта. */
.sb-nav-item[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 50%;
    width: 3px;
    height: 16px;
    margin-top: -8px;
    border-radius: var(--sb-radius-full);
    background: var(--sb-accent);
    box-shadow: 0 0 12px var(--sb-accent-glow);
}

/* Внешняя ссылка в боковой панели: тот же ряд, что у разделов, но со
   стрелкой «уходит наружу» и приглушённой подписью. */
.sb-nav-ext { color: var(--sb-ink-2); }
.sb-nav-ext span { flex: 1 1 auto; }
.sb-nav-ext svg:last-child { flex: 0 0 auto; color: var(--sb-ink-3); opacity: 0.8; }
.sb-nav-ext:hover svg:last-child { opacity: 1; }

.sb-nav-item .sb-badge,
.sb-rail .sb-badge {
    flex: 0 0 auto;
    min-width: 20px;
    height: 20px;
    padding: 0 var(--sb-space-1);
    box-sizing: border-box;
    border-radius: var(--sb-radius-full);
    text-align: center;
    background: var(--sb-raised);
    color: var(--sb-ink-3);
    font-size: var(--sb-text-micro);
    font-weight: var(--sb-weight-bold);
    line-height: 20px;
}
.sb-badge.warn { background: var(--sb-warn-bg); color: var(--sb-warn-ink); }
.sb-badge.bad { background: var(--sb-bad-bg); color: var(--sb-bad-ink); }

.sb-section {
    display: flex;
    align-items: center;
    height: 28px;
    padding: 0 var(--sb-space-3);
    margin-top: var(--sb-space-3);
    font-size: var(--sb-text-xs);
    font-weight: var(--sb-weight-medium);
    letter-spacing: 0;
    text-transform: none;
    color: var(--sb-ink-3);
}

.sb-view {
    display: flex;
    align-items: center;
    gap: var(--sb-space-3);
    height: 32px;
    padding: 0 var(--sb-space-3);
    border: none;
    border-radius: var(--sb-radius-sm);
    background: transparent;
    color: var(--sb-ink-2);
    font-family: inherit;
    font-size: var(--sb-text-sm);
    font-weight: var(--sb-weight-medium);
    cursor: pointer;
    width: 100%;
    transition: background-color var(--sb-duration-fast) var(--sb-ease), color var(--sb-duration-fast) var(--sb-ease);
}
.sb-view:hover { background: var(--sb-hover); color: var(--sb-ink); }
.sb-view i { width: 8px; height: 8px; flex: 0 0 auto; margin: 0 var(--sb-space-1); border-radius: 50%; }
.sb-view span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.sb-view b { flex: 0 0 auto; font-size: var(--sb-text-xs); font-weight: var(--sb-weight-bold); color: var(--sb-ink-3); }
.sb-view.is-active { background: var(--sb-accent-soft); color: var(--sb-ink); }
.sb-view.is-active b { color: var(--sb-accent); }

.sb-rail-spacer { flex: 1 1 auto; min-height: var(--sb-space-3); }

.sb-rail-foot {
    display: flex;
    align-items: center;
    gap: var(--sb-space-2);
    padding: var(--sb-space-2);
    margin-top: var(--sb-space-2);
    flex: 0 0 auto;
    border: 1px solid var(--sb-line-soft);
    border-radius: var(--sb-radius-md);
    background: var(--sb-card);
    box-shadow: var(--sb-highlight);
}
.sb-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: var(--sb-radius-sm);
    background: var(--sb-accent-soft);
    border: 1px solid var(--sb-accent-line);
    color: var(--sb-accent);
    font-size: var(--sb-text-xs);
    font-weight: var(--sb-weight-heavy);
    letter-spacing: 0.02em;
}
.sb-rail-foot .sb-who { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: var(--sb-leading-snug); }
.sb-rail-foot .sb-who b { font-size: var(--sb-text-md); font-weight: var(--sb-weight-bold); color: var(--sb-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-rail-foot .sb-who i { font-style: normal; font-size: var(--sb-text-xs); color: var(--sb-ink-3); }

.sb-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid var(--sb-line);
    border-radius: var(--sb-radius-sm);
    background: var(--sb-card);
    color: var(--sb-ink-2);
    cursor: pointer;
    transition: color var(--sb-duration-fast) var(--sb-ease), background-color var(--sb-duration-fast) var(--sb-ease), transform var(--sb-duration-instant) var(--sb-ease);
}
.sb-icon-btn:hover { background: var(--sb-hover); color: var(--sb-ink); }
.sb-icon-btn:active { transform: scale(0.92); }
.sb-icon-btn svg { transition: transform var(--sb-duration-slow) var(--sb-ease-out); }
#sbThemeBtn:hover svg { transform: rotate(-24deg); }
.sb-rail-foot .sb-icon-btn { border-color: transparent; background: transparent; }
.sb-rail-foot .sb-icon-btn:hover { background: var(--sb-hover); }

.sb-main { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }

/* Шапка остаётся над прокруткой и пропускает содержимое сквозь матовое
   стекло: видно, что под ней есть ещё строки, но текст шапки читается. */
.sb-topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: var(--sb-space-2) var(--sb-space-3);
    min-height: 64px;
    padding: var(--sb-space-3) var(--sb-space-5);
    flex: 0 0 auto;
    box-sizing: border-box;
    background: var(--sb-glass);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border-bottom: 1px solid var(--sb-line-soft);
    flex-wrap: wrap;
}
.sb-title {
    margin: 0;
    flex: 0 0 auto;
    font-size: var(--sb-text-xl);
    font-weight: var(--sb-weight-heavy);
    letter-spacing: var(--sb-tracking-tighter);
    color: var(--sb-ink);
}
.sb-subtitle { flex: 0 0 auto; font-size: var(--sb-text-sm); color: var(--sb-ink-3); }
.sb-spacer { flex: 1 1 auto; }

.sb-live {
    display: flex;
    align-items: center;
    gap: var(--sb-space-2);
    flex: 0 0 auto;
    height: 30px;
    padding: 0 var(--sb-space-3);
    border-radius: var(--sb-radius-full);
    background: var(--sb-ok-bg);
    color: var(--sb-ok-ink);
    font-size: var(--sb-text-xs);
    font-weight: var(--sb-weight-medium);
}
.sb-live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: sb-beat 2.4s var(--sb-ease-out) infinite; }
.sb-live.is-off { background: var(--sb-bad-bg); color: var(--sb-bad-ink); }
.sb-live.is-off i { animation: none; }

@keyframes sb-beat {
    0% { box-shadow: 0 0 0 0 currentColor; }
    70%, 100% { box-shadow: 0 0 0 6px transparent; }
}

.sb-content { flex: 1 1 auto; min-width: 0; padding: var(--sb-space-5) var(--sb-space-5) var(--sb-space-6); }

/* Бургер для узких экранов */
.sb-burger { display: none; }

/* ==========================================================================
   Палитра команд (Cmd/Ctrl+K)
   ========================================================================== */

.sb-cmd-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 14vh;
    background: var(--sb-scrim);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
}
.sb-cmd-overlay.is-open { display: flex; animation: sb-fade var(--sb-duration-base) var(--sb-ease-out) both; }
.sb-cmd-overlay.is-open .sb-cmd { animation: sb-pop var(--sb-duration-slow) var(--sb-ease-out) both; }

.sb-cmd {
    display: flex;
    flex-direction: column;
    width: min(640px, calc(100vw - 32px));
    max-height: 70vh;
    background: var(--sb-card);
    border: 1px solid var(--sb-line);
    border-radius: var(--sb-radius-lg);
    box-shadow: var(--sb-highlight), var(--sb-elev-3);
    overflow: hidden;
}
.sb-cmd-head {
    display: flex;
    align-items: center;
    gap: var(--sb-space-3);
    height: 56px;
    flex: 0 0 auto;
    padding: 0 var(--sb-space-4);
    border-bottom: 1px solid var(--sb-line-soft);
}
.sb-cmd-head svg { flex: 0 0 auto; color: var(--sb-accent); }
.sb-cmd-head input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--sb-ink);
    font: inherit;
    font-size: var(--sb-text-touch);
    font-weight: var(--sb-weight-medium);
    outline: none;
}
.sb-cmd-list { flex: 1 1 auto; overflow-y: auto; padding: var(--sb-space-1) var(--sb-space-2) var(--sb-space-2); }
.sb-cmd-group {
    padding: var(--sb-space-3) var(--sb-space-2) var(--sb-space-1);
    font-size: var(--sb-text-xs);
    font-weight: var(--sb-weight-medium);
    letter-spacing: 0;
    text-transform: none;
    color: var(--sb-ink-3);
}
.sb-cmd-row {
    display: flex;
    align-items: center;
    gap: var(--sb-space-3);
    min-height: 40px;
    padding: 0 var(--sb-space-3);
    border-radius: var(--sb-radius-sm);
    color: var(--sb-ink);
    font-size: var(--sb-text-md);
    cursor: pointer;
    transition: background-color var(--sb-duration-instant) var(--sb-ease);
}
.sb-cmd-row svg { flex: 0 0 auto; color: var(--sb-ink-3); }
.sb-cmd-row .sb-cmd-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-cmd-row .sb-cmd-hint { flex: 0 0 auto; font-size: var(--sb-text-xs); color: var(--sb-ink-3); }
.sb-cmd-row.is-active {
    background: var(--sb-accent-soft);
    font-weight: var(--sb-weight-medium);
}
.sb-cmd-row.is-active svg { color: var(--sb-accent); }
.sb-cmd-empty { padding: var(--sb-space-6) var(--sb-space-3); text-align: center; font-size: var(--sb-text-md); color: var(--sb-ink-3); }
.sb-cmd-foot {
    display: flex;
    align-items: center;
    gap: var(--sb-space-4);
    height: 40px;
    flex: 0 0 auto;
    padding: 0 var(--sb-space-4);
    border-top: 1px solid var(--sb-line-soft);
    background: var(--sb-rail);
    font-size: var(--sb-text-xs);
    color: var(--sb-ink-3);
}
.sb-cmd-foot span { display: flex; align-items: center; gap: var(--sb-space-1); }

/* ==========================================================================
   Доска: плотные карточки
   ========================================================================== */

.board-container { gap: 10px !important; align-items: start; }

.column {
    background: var(--sb-rail) !important;
    border: 1px solid var(--sb-line-soft);
    border-radius: 10px !important;
    min-height: 0 !important;
}

.column-header {
    padding: 0 2px 2px !important;
    font-size: 10.5px !important;
    letter-spacing: 0.06em;
    color: var(--sb-ink-2) !important;
}
.count-badge {
    background: var(--sb-raised) !important;
    color: var(--sb-ink-3) !important;
    font-weight: 700;
}

.card {
    padding: 8px 9px !important;
    gap: 6px !important;
    border: 1px solid var(--sb-line);
    border-left-width: 2px;
    border-radius: 8px !important;
    box-shadow: var(--sb-shadow-sm) !important;
    min-height: 0 !important;
    height: auto !important;
}
.card:hover { border-color: var(--sb-accent-line); }

.card-content { gap: 7px; }
.employee-name { font-size: 12.5px !important; color: var(--sb-ink); }
.employee-role { font-size: 10.5px !important; color: var(--sb-ink-3) !important; }
.employee-domain { font-size: 10px !important; color: var(--sb-ink-3) !important; }

/* Точки загрузки были 10px - мало для попадания пальцем */
.load-dot { width: 11px !important; height: 11px !important; }
.load-indicator { gap: 6px; padding: 4px 0; }

/* ФИКС: правило .btn-office,.btn-home,... красило все пять статусов одним
   --status-button-bg, поэтому на живой доске у всех кнопок был одинаковый
   фон rgb(212,234,247). Здесь каждый статус получает свой цвет. */
.status-btn {
    padding: 5px 8px !important;
    font-size: 11px !important;
    border-radius: 5px !important;
    border: 1px solid transparent !important;
}
.status-btn.btn-office { background: var(--status-office-bg) !important; color: var(--status-office-text) !important; border-color: var(--status-office-border) !important; }
.status-btn.btn-home { background: var(--status-home-bg) !important; color: var(--status-home-text) !important; border-color: var(--status-home-border) !important; }
.status-btn.btn-field { background: var(--status-field-bg) !important; color: var(--status-field-text) !important; border-color: var(--status-field-border) !important; }
.status-btn.btn-vacation { background: var(--status-vacation-bg) !important; color: var(--status-vacation-text) !important; border-color: var(--status-vacation-border) !important; }
.status-btn.btn-sick { background: var(--status-sick-bg) !important; color: var(--status-sick-text) !important; border-color: var(--status-sick-border) !important; }

/* Подпись и причина дублируют кружок подтверждения на каждой карточке.
   Оставляем только когда есть что сказать сверх иконки. */
.confirmation-caption { display: none !important; }
.confirmation-reason {
    font-size: 10px !important;
    color: var(--sb-ink-3) !important;
    margin-top: 2px;
}
.confirmation-reason:empty { display: none !important; }

.confirmation-indicator {
    width: 18px !important;
    height: 18px !important;
    border-color: var(--sb-line) !important;
    background: var(--sb-raised) !important;
    color: var(--sb-ink-2) !important;
}
.confirmation-indicator.ok { background: var(--sb-ok-bg) !important; border-color: var(--sb-ok-bd) !important; color: var(--sb-ok-ink) !important; }
.confirmation-indicator.warn { background: var(--sb-warn-bg) !important; border-color: var(--sb-warn-bd) !important; color: var(--sb-warn-ink) !important; }
.confirmation-indicator.bad { background: var(--sb-bad-bg) !important; border-color: var(--sb-bad-bd) !important; color: var(--sb-bad-ink) !important; }

/* Заголовок «КОММЕНТАРИЙ» и всегда пустое поле повторялись на каждой из
   27 карточек. Поле сворачивается, пока в нём ничего нет. */
.comment-label { display: none !important; }
.comment-section { gap: 0 !important; }
.comment-input {
    height: 26px !important;
    min-height: 26px;
    padding: 5px 7px !important;
    font-size: 10.5px !important;
    background: transparent !important;
    border-color: transparent !important;
    color: var(--sb-ink-2) !important;
    resize: none;
    transition: height 0.12s ease, background 0.12s ease;
}
.comment-input:hover,
.comment-input:focus,
.comment-input.has-value {
    height: 40px !important;
    background: var(--sb-bg) !important;
    border-color: var(--sb-line) !important;
}

.dropdown-menu {
    background: var(--sb-card) !important;
    border: 1px solid var(--sb-line) !important;
    box-shadow: var(--sb-shadow) !important;
    border-radius: 10px !important;
}
.dropdown-item { color: var(--sb-ink) !important; font-size: 12.5px; }
.dropdown-item:hover { background: var(--sb-raised) !important; }
.dropdown-header { color: var(--sb-ink-3) !important; }

.modal, .modal-overlay > div {
    background: var(--sb-card) !important;
    color: var(--sb-ink);
    border: 1px solid var(--sb-line);
}

/* Карточка, подсвеченная переходом из палитры команд */
.card.sb-flash {
    outline: 2px solid var(--sb-accent);
    outline-offset: 2px;
}

/* ==========================================================================
   Узкие экраны. Раньше доска ломалась: карточки были жёстко 316px,
   а у diagnostics.html и schedule.html не было ни одного медиа-запроса.
   ========================================================================== */

/* Подложка под выехавшей панелью: гасит содержимое и ловит тап мимо.
   Скрывается атрибутом hidden из app-shell.js, поэтому на широком экране
   её нет в потоке вовсе. */
.sb-rail-backdrop {
    position: fixed;
    inset: 0;
    z-index: 7999;
    display: none;
    background: var(--sb-scrim);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

@media (max-width: 1024px) {
    .sb-rail {
        position: fixed;
        z-index: 8000;
        left: 0;
        top: 0;
        bottom: 0;
        width: min(300px, 86vw);
        transform: translateX(-104%);
        transition: transform var(--sb-duration-slow) var(--sb-ease-out), box-shadow var(--sb-duration-slow) var(--sb-ease);
        border-radius: 0 var(--sb-radius-lg) var(--sb-radius-lg) 0;
        view-transition-name: none;
    }
    .sb-shell.sb-rail-open .sb-rail { transform: translateX(0); box-shadow: var(--sb-elev-3); }
    .sb-shell.sb-rail-open .sb-rail-backdrop:not([hidden]) {
        display: block;
        animation: sb-fade var(--sb-duration-base) var(--sb-ease-out) both;
    }
    .sb-burger {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--sb-control-lg);
        height: var(--sb-control-lg);
        margin-left: calc(var(--sb-space-2) * -1);
        flex: 0 0 auto;
        padding: 0;
        border: none;
        border-radius: var(--sb-radius-sm);
        background: transparent;
        color: var(--sb-ink-2);
        cursor: pointer;
    }
    .sb-burger:hover { background: var(--sb-hover); color: var(--sb-ink); }
    .sb-topbar { padding: var(--sb-space-2) var(--sb-space-4); min-height: 60px; }
    .sb-content { padding: var(--sb-space-4); }
}

@media (max-width: 760px) {
    .board-container { flex-direction: column !important; display: flex !important; }
    .column, .status-stack {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
    .status-card-grid {
        grid-template-columns: 1fr !important;
        display: grid !important;
    }
    .card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
    /* Цели нажатия на телефоне */
    .status-btn { min-height: 44px !important; }
    .load-dot { width: 14px !important; height: 14px !important; }
    .load-indicator { gap: 10px; padding: 8px 0; }
    .dropdown-item { min-height: 44px; display: flex; align-items: center; }
    .sb-topbar { gap: var(--sb-space-2); padding: var(--sb-space-2) var(--sb-space-3); }
    .sb-title { font-size: var(--sb-text-lg); }
    .sb-subtitle { display: none; }
    .sb-content { padding: var(--sb-space-3) var(--sb-space-3) var(--sb-space-6); }

    /* Верхняя строка: элементы тянутся на всю ширину, а не жмутся к правому
       краю. Раньше ряд фильтров стоял справа, слева оставалась пустота, и
       шапка занимала 222px из 844 - четверть экрана телефона. */
    #sbTopSlot { justify-content: stretch; width: 100%; }
    #sbTopSlot > .sb-ms { flex: 1 1 140px; }
    #sbTopSlot > .sb-ms .sb-ms-btn { width: 100%; }
    #sbTopSlot > .search-box { flex: 1 1 100%; }
    .sb-topbar [data-sb-topbar] { width: 100%; }

    /* Чип чек-ина разворачивается в строку во всю ширину: иконка, текст,
       кнопка. До правки он вставал узким столбиком справа, кнопка
       «Изменить» была 28px высотой и растягивалась на всю его ширину. */
    /* Легенда состояний занимала две строки крупным кеглем. */
    .checkin-state-guide {
        gap: 6px 12px !important;
        font-size: 10.5px;
    }
}

/* ==========================================================================
   Сохранённые виды. Фильтр держится на CSS, а не на JS: доска
   перерисовывается по Socket.IO, и скрытие из JS слетало бы на каждом рендере.
   ========================================================================== */

body[data-sb-view="warn"] .card:not(:has(.confirmation-indicator.warn)) { display: none !important; }
body[data-sb-view="bad"] .card:not(:has(.confirmation-indicator.bad)) { display: none !important; }
body[data-sb-view="field"] .card:not([data-status="field"]) { display: none !important; }

/* ==========================================================================
   Чек-ин-виджет в верхней строке.
   Исходный блок - 360x126 с заголовком, датой, подписью и пояснением.
   В верхней строке нужен компактный чип: остаётся суть и кнопка.
   ========================================================================== */

.sb-topbar .checkin-pulse {
    width: auto !important;
    min-width: 0 !important;
    max-width: 340px;
    min-height: 0 !important;
    padding: 5px 6px 5px 10px !important;
    gap: 9px !important;
    border-radius: 8px !important;
    background: var(--sb-warn-bg) !important;
    border: 1px solid var(--sb-warn-bd) !important;
    box-shadow: none !important;
}
.sb-topbar .checkin-pulse[data-state="done"],
.sb-topbar .checkin-pulse[data-state="ok"] {
    background: var(--sb-ok-bg) !important;
    border-color: var(--sb-ok-bd) !important;
}

/* Кикер, дата и пояснение дублируют то, что и так видно; дата уезжает
   в подзаголовок страницы. */
.sb-topbar .checkin-kicker,
.sb-topbar .checkin-date,
.sb-topbar .checkin-detail { display: none !important; }

.sb-topbar .checkin-copy { gap: 0 !important; min-width: 0; }
.sb-topbar .checkin-title {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--sb-ink) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sb-topbar .checkin-orbit {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    font-size: 11px !important;
    flex: 0 0 auto;
}
.sb-topbar .checkin-action {
    min-height: 28px;
    padding: 0 11px !important;
    border-radius: 6px !important;
    background: var(--sb-accent) !important;
    color: var(--sb-accent-ink) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    border: none !important;
    flex: 0 0 auto;
}

/* Выдвижная форма становится выпадающей панелью под чипом */
.sb-topbar .checkin-drawer {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    width: 360px !important;
    max-width: calc(100vw - 32px);
    z-index: 7000;
    background: var(--sb-card) !important;
    border: 1px solid var(--sb-line) !important;
    border-radius: 12px !important;
    box-shadow: var(--sb-shadow) !important;
}

/* Легенда состояний - одной компактной строкой */
.checkin-state-guide {
    gap: 12px !important;
    margin-bottom: 10px !important;
    font-size: 11px;
    color: var(--sb-ink-3);
}
.checkin-state-guide-item {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    font-size: 11px;
}

/* Пояснение под кнопкой статуса повторяет то, что уже говорит кружок,
   и раньше печаталось на каждой из 27 карточек. Кружок несёт aria-label
   и title, поэтому смысл не теряется. */
.card .confirmation-reason { display: none !important; }

.card .employee-domain { font-size: 9.5px !important; opacity: 0.75; }

/* ==========================================================================
   Рабочий календарь: ячейки, кисти и сетка описаны на токенах в
   собственном <style> страницы. Здесь - только раскладка панелей
   (раздел «Рабочий календарь: общий вид» ниже).
   ========================================================================== */

/* ==========================================================================
   Страница чек-ина: только раскладка оболочки. Вид страницы описан в её
   собственном <style> на токенах - второго слоя переопределений здесь
   больше нет.
   ========================================================================== */

.sb-shell-minimal .sb-topbar { justify-content: flex-start; }
/* align-items обязателен: иначе карточка растягивается на всю высоту. */
.sb-shell-minimal .sb-content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: var(--sb-space-6) var(--sb-space-4) var(--sb-space-7);
}
.sb-shell-minimal .sb-brand { font-size: var(--sb-text-lg); }

@media (max-width: 560px) {
    .sb-shell-minimal .sb-content { padding: var(--sb-space-3) var(--sb-space-2) var(--sb-space-6); }
}

/* ==========================================================================
   Перетаскивание карточек между колонками
   ========================================================================== */

.card[draggable="true"] { cursor: grab; }
.card.sb-dragging { opacity: 0.45; cursor: grabbing; }

.status-card-grid.sb-drop-target {
    outline: 1px dashed var(--sb-accent-line);
    outline-offset: 4px;
    border-radius: 8px;
    background: var(--sb-accent-soft);
}

.sb-drop-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border: 1px dashed var(--sb-accent-line);
    border-radius: 8px;
    background: var(--sb-accent-soft);
    color: var(--sb-accent);
    font-size: 11px;
    font-weight: 600;
}

/* ==========================================================================
   Плотная карточка. Было 178px фиксированной высоты.

   Экономия набирается из: должность и AD-логин в одной строке вместо двух,
   убраны подпись и причина подтверждения (кружок несёт title и aria-label),
   поле заметки показывается только когда в нём что-то есть.
   ========================================================================== */

.card .card-content {
    display: flex !important;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

.sb-card-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border-radius: 50%;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.card[data-status="office"] .sb-card-avatar { background: var(--status-office-bg); color: var(--status-office-text); border: 1px solid var(--status-office-border); }
.card[data-status="home"] .sb-card-avatar { background: var(--status-home-bg); color: var(--status-home-text); border: 1px solid var(--status-home-border); }
.card[data-status="field"] .sb-card-avatar { background: var(--status-field-bg); color: var(--status-field-text); border: 1px solid var(--status-field-border); }
.card[data-status="vacation"] .sb-card-avatar { background: var(--status-vacation-bg); color: var(--status-vacation-text); border: 1px solid var(--status-vacation-border); }
.card[data-status="sick"] .sb-card-avatar { background: var(--status-sick-bg); color: var(--status-sick-text); border: 1px solid var(--status-sick-border); }

.card .employee-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.card .load-indicator { flex: 0 0 auto; padding: 6px 0 0 !important; }

.card .status-btn { min-height: 24px; }

/* Заметка занимает место только когда в ней что-то есть. На тач-устройствах
   ховера нет, поэтому там она видна всегда. */
.card .comment-section { display: none !important; }
.card:hover .comment-section,
.card:focus-within .comment-section,
.card .comment-section:has(.comment-input.has-value) { display: flex !important; }

@media (hover: none) {
    .card .comment-section { display: flex !important; }
}

.card .comment-input { height: 22px !important; min-height: 22px; }
.card .comment-input:hover,
.card .comment-input:focus,
.card .comment-input.has-value { height: 38px !important; }

/* ==========================================================================
   Адаптивная доска.

   Было: ширина блока и карточки считалась в пикселях
   (getStatusBlockWidth -> --status-block-width, карточка -> фиксированные
   --employee-card-width), поэтому доска не помещалась в окно и появлялась
   горизонтальная прокрутка.

   Стало: решение JS о том, сколько карточек-колонок заслуживает статус,
   сохраняется полностью - оно уже лежит в --status-block-columns. Мы просто
   используем его как долю flex вместо пикселей. «В офисе» с двумя колонками
   по-прежнему вдвое шире остальных, но теперь тянется по ширине окна.
   Скрипт index.html править не пришлось.
   ========================================================================== */

/* Без min-width:0 флекс-ребёнок не даёт себя сжать, и фиксированная доска
   распирает страницу - отсюда и была горизонтальная прокрутка. */
.sb-main { min-width: 0; }
.sb-content { min-width: 0; max-width: 100%; }

.board-container {
    width: 100%;
    min-width: 0;
    gap: 12px !important;
}

.column,
.status-stack {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: var(--status-block-columns, 1) 1 0 !important;
}

.status-stack .column {
    width: 100% !important;
    flex: 0 0 auto !important;
}

/* Карточки заполняют выделенную блоку ширину, а не стоят фиксированными */
.status-card-grid {
    grid-template-columns: repeat(var(--status-card-columns, 1), minmax(0, 1fr)) !important;
    min-width: 0;
}

.card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

/* Имя больше не обрезается на полуслове там, где есть место */
.card .employee-name { font-size: 13px !important; }

/* Средние экраны: блокам разрешаем переноситься, чтобы карточка не
   сжималась до нечитаемой ширины. */
@media (max-width: 1400px) {
    .column,
    .status-stack { flex: var(--status-block-columns, 1) 1 265px !important; }
}

@media (max-width: 760px) {
    .column,
    .status-stack { flex: 1 1 100% !important; }
}

/* ==========================================================================
   Верхняя строка не должна распирать страницу.
   Перенесённые из старой шапки поля имеют свои ширины; без min-width:0
   флекс-контейнер раздувается до max-content и вылезает за окно.
   ========================================================================== */

.sb-topbar { min-width: 0; max-width: 100%; }

#sbTopSlot {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
}

.sb-topbar .search-box {
    flex: 0 1 250px;
    min-width: 120px;
}
.sb-topbar .search-box input {
    width: 100%;
    min-width: 0;
}

.sb-topbar .department-filter { flex: 0 1 auto; min-width: 0; }
.sb-topbar .department-filter select { max-width: 190px; min-width: 0; }

.sb-topbar .checkin-pulse { flex: 0 1 auto; min-width: 0; }

/* На узком экране поля переносятся, а не сжимаются в нечитаемое */
@media (max-width: 1100px) {
    .sb-topbar .search-box { flex: 1 1 180px; }
}

/* ==========================================================================
   Элементы оболочки считаем по border-box.

   Причина переполнения на 32px: у .sb-topbar padding 8px/16px, а
   max-width:100% при content-box ограничивает только КОНТЕНТ - отступы
   прибавлялись сверху. По той же причине .sb-rail занимала 249px вместо
   заявленных 228px.

   Меняем только элементы оболочки, а не всё через `*`: страницы проекта
   местами рассчитывают на content-box, и глобальная замена сдвинула бы
   существующую вёрстку.
   ========================================================================== */

.sb-shell,
.sb-rail,
.sb-main,
.sb-topbar,
.sb-content,
.sb-brand,
.sb-cmdk,
.sb-nav-item,
.sb-view,
.sb-section,
.sb-rail-foot,
.sb-icon-btn,
.sb-cmd,
.sb-cmd-head,
.sb-cmd-list,
.sb-cmd-row,
.sb-cmd-foot {
    box-sizing: border-box;
}

/* Карточка не должна сжиматься до нечитаемой ширины.
   auto-fit сам решает, сколько карточек влезает в блок: широкому «В офисе»
   достанется две в ряд, узкому «Больничный» - одна. Логика «кому больше
   места» сохраняется, потому что ширину блока по-прежнему задаёт
   --status-block-columns, посчитанный скриптом страницы.
   min(100%, 230px) страхует от переполнения, когда блок уже самой карточки. */
.status-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)) !important;
}

/* Кнопки статуса в выдвижной форме чек-ина остались с прежней яркой
   палитрой - приводим к общей, иначе один и тот же статус выглядит
   по-разному на доске и в форме. */
.checkin-drawer-status { border: 1px solid var(--sb-line) !important; background: var(--sb-bg) !important; color: var(--sb-ink-2) !important; }
.checkin-drawer-status.office { border-color: var(--status-office-border) !important; background: var(--status-office-bg) !important; color: var(--status-office-text) !important; }
.checkin-drawer-status.home { border-color: var(--status-home-border) !important; background: var(--status-home-bg) !important; color: var(--status-home-text) !important; }
.checkin-drawer-status.field { border-color: var(--status-field-border) !important; background: var(--status-field-bg) !important; color: var(--status-field-text) !important; }
.checkin-drawer-status.vacation { border-color: var(--status-vacation-border) !important; background: var(--status-vacation-bg) !important; color: var(--status-vacation-text) !important; }
.checkin-drawer-status.sick { border-color: var(--status-sick-border) !important; background: var(--status-sick-bg) !important; color: var(--status-sick-text) !important; }

.checkin-drawer-save { background: var(--sb-accent) !important; color: var(--sb-accent-ink) !important; border: none !important; }
.checkin-drawer-logout,
.checkin-drawer-cancel { background: var(--sb-raised) !important; color: var(--sb-ink-2) !important; border: 1px solid var(--sb-line) !important; }
.checkin-drawer-field input,
.checkin-drawer-field select { background: var(--sb-bg) !important; color: var(--sb-ink) !important; border: 1px solid var(--sb-line) !important; }
.checkin-drawer-title,
.checkin-drawer-field label { color: var(--sb-ink) !important; }
.checkin-drawer-meta { color: var(--sb-ink-3) !important; }

/* ==========================================================================
   Все карточки одной высоты.

   Раньше поле заметки пряталось, пока в нём пусто, и раскрывалось по
   наведению: сетка выглядела рваной, а высота карточки прыгала под курсором.
   Теперь заметка всегда занимает своё место - высота одинаковая и не
   меняется ни при наведении, ни при фокусе, ни когда появляется текст.
   ========================================================================== */

.card {
    min-height: 122px !important;
    justify-content: flex-start;
}

/* Заметка видна всегда - она и задаёт общую высоту */
.card .comment-section,
.card:hover .comment-section,
.card:focus-within .comment-section {
    display: flex !important;
}

/* Прижимаем заметку к низу: если строка карточек растянулась по самой
   высокой, лишнее место уходит наверх, а низ остаётся выровненным. */
.card .comment-section { margin-top: auto; }

/* Высота поля постоянна во всех состояниях. Длинный текст прокручивается
   внутри, а не раздвигает карточку. */
.card .comment-input,
.card .comment-input:hover,
.card .comment-input:focus,
.card .comment-input.has-value {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    overflow-y: auto;
}

/* Пустое поле остаётся тихим, но место занимает */
.card .comment-input {
    background: transparent !important;
    border-color: transparent !important;
}
.card .comment-input:hover,
.card .comment-input:focus,
.card .comment-input.has-value {
    background: var(--sb-bg) !important;
    border-color: var(--sb-line) !important;
}

/* Карточки в ряду выравниваются по одной высоте */
.status-card-grid { align-items: stretch !important; }

/* ==========================================================================
   Типографика: что каким начертанием набирать.

   Open Sans - гуманистический гротеск с открытыми апертурами: он разборчив
   в мелких кеглях, а это ровно наш случай - плотная доска, таблицы отчётов
   и сетка календаря.

   400 Regular  - весь основной текст: значения, ячейки таблиц, поля ввода,
                  подписи. База, от которой считается остальное.
   600 SemiBold - имена сотрудников, активный пункт меню, подписи кнопок.
                  Даёт нужный контраст к 400, не утяжеляя полосу так, как 700.
   700 Bold     - заголовки страниц и панелей, числа в плитках показателей.
   800          - не используем: на мелком кегле разница с 700 неразличима,
                  а на крупном выглядит крикливо.
   300 Light    - не используем в интерфейсе. На тёмном фоне тонкие штрихи
                  「съедаются」 подсветкой и текст теряет читаемость; светлое
                  начертание оправдано только на очень крупном кегле.

   ЗАГЛАВНЫЕ микроподписи (заголовки колонок, названия секций) требуют
   положительного межбуквенного просвета: у Open Sans прописные плотные,
   и без трекинга 0.06-0.07em они слипаются на 10-11px.

   ЦИФРЫ - только табличные. Доска обновляется по Socket.IO, и без tabular-nums
   время и счётчики дёргаются при каждом перерисовывании.

   МОНОШИРИННЫЙ - у Open Sans его нет, поэтому пути, маршруты и идентификаторы
   оставляем на системном моноширинном стеке.
   ========================================================================== */


html,
body,
input,
select,
textarea,
button,
table {
    font-family: var(--sb-font);
}

body {
    font-weight: 400;
    /* На тёмном фоне текст оптически полнеет; сглаживание возвращает
       задуманную толщину штриха. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.01em; }
h1 { letter-spacing: -0.02em; }

/* Имена и прочие «якоря» взгляда */
.employee-name,
.sb-nav-item[aria-current="page"],
.sb-title,
.sb-cmd-row.is-active,
strong, b, th { font-weight: 600; }

.sb-title, h1, h2 { font-weight: 700; }


/* Вторичный текст спокойнее не размером, а цветом - кегль ниже 10px
   в интерфейсе не опускаем. */
.employee-role,
.sb-subtitle,
.comment-input { font-weight: 400; }

/* Цифры не должны прыгать */
.count-badge,
.sb-badge,
.sb-view b,
.clock-time,
td, th,
input[type="date"],
input[type="time"] { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Единый фильтр с множественным выбором.

   Раньше отдел был обычным <select> с одним значением, а статусы - панелью
   с чекбоксами: два разных контрола для одной по сути задачи. Теперь вид и
   поведение общие, выбор в обоих - кликом, по нескольку вариантов.

   Исходные элементы остаются в DOM скрытыми: страница продолжает с ними
   работать, а новый контрол только надстроен сверху.
   ========================================================================== */

.sb-hidden-control {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.sb-ms { position: relative; flex: 0 0 auto; }

.sb-ms-btn {
    display: flex;
    align-items: center;
    gap: var(--sb-space-2);
    height: var(--sb-control-md);
    padding: 0 var(--sb-space-3);
    box-sizing: border-box;
    border: 1px solid var(--sb-line);
    border-radius: var(--sb-radius-sm);
    background: var(--sb-raised);
    box-shadow: var(--sb-highlight), var(--sb-elev-1);
    color: var(--sb-ink-2);
    font-family: inherit;
    font-size: var(--sb-text-md);
    font-weight: var(--sb-weight-medium);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--sb-duration-fast) var(--sb-ease), border-color var(--sb-duration-fast) var(--sb-ease);
}
.sb-ms-btn:hover { background: var(--sb-hover); color: var(--sb-ink); border-color: var(--sb-line-strong); }
.sb-ms-btn > svg:first-child { color: var(--sb-ink-3); flex: 0 0 auto; }
.sb-ms-btn > svg:last-child { color: var(--sb-ink-3); transition: transform var(--sb-duration-base) var(--sb-ease-out); }
.sb-ms-btn[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }
.sb-ms-title { color: var(--sb-ink); }

.sb-ms-count {
    padding: 1px var(--sb-space-2);
    border-radius: var(--sb-radius-full);
    background: var(--sb-hover);
    color: var(--sb-ink-3);
    font-size: var(--sb-text-xs);
    font-weight: var(--sb-weight-bold);
    font-variant-numeric: tabular-nums;
}
/* Когда выбрано не всё - контрол должен сам об этом сообщать */
.sb-ms-count.is-filtered {
    background: var(--sb-accent-soft);
    color: var(--sb-accent);
}
.sb-ms-btn:has(.sb-ms-count.is-filtered) { border-color: var(--sb-accent-line); }

.sb-ms-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 7500;
    min-width: 260px;
    max-width: 320px;
    padding: var(--sb-space-2);
    box-sizing: border-box;
    background: var(--sb-card);
    border: 1px solid var(--sb-line);
    border-radius: var(--sb-radius-md);
    box-shadow: var(--sb-highlight), var(--sb-elev-3);
    transform-origin: top right;
    animation: sb-drop var(--sb-duration-base) var(--sb-ease-out) both;
}

@keyframes sb-drop { from { opacity: 0; transform: translateY(-6px) scale(0.97); } }

.sb-ms-head {
    display: flex;
    gap: var(--sb-space-1);
    padding: 0 0 var(--sb-space-2);
    margin-bottom: var(--sb-space-1);
    border-bottom: 1px solid var(--sb-line-soft);
}
.sb-ms-all {
    flex: 1 1 0;
    min-height: var(--sb-control-sm);
    border: 1px solid var(--sb-line);
    border-radius: var(--sb-radius-sm);
    background: transparent;
    color: var(--sb-ink-2);
    font-family: inherit;
    font-size: var(--sb-text-sm);
    font-weight: var(--sb-weight-medium);
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-ease);
}
.sb-ms-all:hover { background: var(--sb-hover); color: var(--sb-ink); }

.sb-ms-list { display: flex; flex-direction: column; gap: 1px; max-height: 320px; overflow-y: auto; }

.sb-ms-row {
    display: flex;
    align-items: center;
    gap: var(--sb-space-3);
    width: 100%;
    min-height: var(--sb-control-md);
    padding: 0 var(--sb-space-2);
    border: none;
    border-radius: var(--sb-radius-sm);
    background: transparent;
    color: var(--sb-ink-2);
    font-family: inherit;
    font-size: var(--sb-text-md);
    font-weight: var(--sb-weight-regular);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--sb-duration-instant) var(--sb-ease);
}
.sb-ms-row:hover { background: var(--sb-hover); color: var(--sb-ink); }
.sb-ms-row.is-on { color: var(--sb-ink); font-weight: var(--sb-weight-medium); }

.sb-ms-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    box-sizing: border-box;
    border: 1.5px solid var(--sb-line-strong);
    border-radius: var(--sb-radius-xs);
    color: transparent;
    transition: background-color var(--sb-duration-fast) var(--sb-ease), border-color var(--sb-duration-fast) var(--sb-ease), transform var(--sb-duration-fast) var(--sb-ease-out);
}
.sb-ms-row.is-on .sb-ms-box {
    background: var(--sb-accent);
    border-color: var(--sb-accent);
    color: var(--sb-accent-ink);
}
.sb-ms-row:active .sb-ms-box { transform: scale(0.88); }

.sb-ms-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; }
.sb-ms-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-ms-empty { padding: var(--sb-space-4) var(--sb-space-2); text-align: center; font-size: var(--sb-text-sm); color: var(--sb-ink-3); }

@media (max-width: 760px) {
    .sb-ms-btn { height: var(--sb-control-lg); }
    .sb-ms-row { min-height: var(--sb-control-lg); }
    .sb-ms-all { min-height: 40px; }

    /* Панель раскрывается во всю ширину экрана, а не от края своего
       контрола: якорь к контролу на узком экране уводил панель за край.
       Точкой отсчёта становится верхняя строка. */
    /* На телефоне шапка с фильтрами занимает треть экрана - липкой она
       закрывала бы доску. Остаётся в потоке; якорь для панелей фильтров. */
    .sb-topbar { position: relative; }
    .sb-ms { position: static; }
    .sb-ms-panel {
        top: calc(100% + 6px);
        left: var(--sb-space-3);
        right: var(--sb-space-3);
        min-width: 0;
        max-width: none;
        transform-origin: top center;
    }
}

/* ==========================================================================
   Рабочий календарь: общий вид.

   Что чинится:
   - дублирующийся заголовок (свой h1 + заголовок в шапке оболочки);
   - ссылка «Закрыть» - навигация теперь в боковой панели;
   - три панели в ряд с большими пустотами;
   - кисти статусов разного размера и из разных палитр;
   - выходные заливались тяжёлым цветом на всю высоту таблицы, а в легенде
     «Выходной/праздник» оставался чистый #ff1616 - его правило
     [data-theme="dark"] .swatch.nonwork перебивало общую тему по
     специфичности, поэтому ниже селекторы намеренно длиннее.
   ========================================================================== */

/* Заголовок и «Закрыть» больше не нужны - их роль взяла оболочка */
.page > .topbar > h1 { display: none; }
.page > .topbar a[href="/"] { display: none; }

.month-title {
    font-size: var(--sb-text-lg);
    font-weight: var(--sb-weight-bold);
    color: var(--sb-ink);
    letter-spacing: var(--sb-tracking-tight);
}

/* Панели: фильтры и выгрузка в одном ряду, кисть во всю ширину под ними. */
.content {
    padding: 0 !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto) !important;
    grid-template-areas:
        "filters export"
        "brush brush"
        "legend legend"
        "calendar calendar" !important;
    gap: var(--sb-space-3) !important;
}

.page .panel { padding: var(--sb-space-3); }

/* Кисти: одна форма, один размер, тон статуса. Выбранная кисть заливается
   своим тоном и получает кольцо акцента. */
.brush-action {
    min-height: var(--sb-control-md);
    padding: 0 var(--sb-space-3) !important;
    border-radius: var(--sb-radius-full) !important;
    border: 1px solid var(--sb-line-soft) !important;
    background-color: transparent !important;
    color: var(--sb-ink-2) !important;
    font-size: var(--sb-text-sm) !important;
    font-weight: var(--sb-weight-medium) !important;
}
.brush-action:hover { background-color: var(--sb-hover) !important; color: var(--sb-ink) !important; }
.brush-action[data-action-kind="status"] { border-color: var(--lane) !important; }
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .brush-action[data-action-kind="status"] { border-color: color-mix(in srgb, var(--lane) 45%, transparent) !important; }
}
.brush-action.active {
    background-color: var(--lane-bg) !important;
    color: var(--lane-ink) !important;
    font-weight: var(--sb-weight-bold) !important;
    border-color: var(--lane) !important;
    box-shadow: 0 0 0 2px var(--sb-card), 0 0 0 4px var(--sb-accent);
}
.brush-action[data-action-kind="duty"] { border-style: dashed !important; }
.brush-action.danger { color: var(--sb-bad-ink) !important; }
.brush-action.danger:hover,
.brush-action.danger.active { background-color: var(--sb-bad-bg) !important; border-color: var(--sb-bad-line) !important; }

.page tbody tr:hover td.cell:not([class*="status-"]) { background: var(--sb-hover); }

@media (max-width: 1100px) {
    .content {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "filters"
            "export"
            "brush"
            "legend"
            "calendar" !important;
    }
}

/* ==========================================================================
   Общие примитивы разделов.

   Календарь, отчёты, аналитика и настройки писались в разное время и каждый
   со своей палитрой: свои .panel, свои .btn, свои #F9FAFB на тёмном фоне.
   Ниже - один набор поверхностей, кнопок, полей, плиток и таблиц; страницы
   переходят на него, оставляя собственные id и обработчики как есть.

   Правила живут здесь, а не в каждом файле: theme.css подключается после
   встроенного <style> страницы, поэтому вид раздела меняется в одном месте.
   ========================================================================== */

/* [hidden] проигрывал .sb-section/.sb-nav-item/.sb-badge по специфичности:
   пункт «Настройки» оставался виден без права, а подпись «Часы» висела над
   пустотой. display:none должен побеждать всегда. */
[hidden] { display: none !important; }

/* Общие компоненты разделов (панель, поля, кнопки, плитки, таблицы, пилюли,
   степпер, легенда, окно) описаны в sb-primitives.css - здесь их больше нет. */

/* ==========================================================================
   Рабочий календарь: доводка раскладки.

   До правки страница тратила почти 390px до первой строки таблицы: своя
   строка с навигацией по месяцу, ряд фильтров, отдельная панель выгрузки в
   Excel, панель кистей и панель легенды - пять блоков подряд. Таблица, ради
   которой сюда приходят, начиналась ниже сгиба экрана.

   Теперь: месяц - в верхней строке оболочки, фильтры и выгрузка - одна
   строка (выгрузка под раскрывашкой), легенда - тонкая строка без панели,
   панель действий прижата к низу и появляется только когда есть что делать.
   ========================================================================== */

/* Раскладка стала линейной: раньше здесь была сетка из областей, где под
   выгрузку отводилась вторая колонка на всю высоту фильтров. */
.page > .content {
    display: flex !important;
    flex-direction: column;
    gap: 10px !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
}

.page > .topbar { display: none; }

/* --- строка фильтров --- */

.panel.filters {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.panel.filters select { min-width: 160px; max-width: 240px; }
.wf-spacer { flex: 1 1 auto; }

/* Признак режима: «только просмотр» обязан быть заметен, иначе клик по
   ячейке молча ничего не делает и это читается как поломка. */
.wf-access {
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid var(--sb-line);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.wf-access.is-edit {
    border-color: var(--sb-ok-bd);
    background: var(--sb-ok-bg);
    color: var(--sb-ok-ink);
}

.wf-access.is-view {
    border-color: var(--sb-warn-bd);
    background: var(--sb-warn-bg);
    color: var(--sb-warn-ink);
}

/* --- выгрузка под раскрывашкой --- */

.wf-export { position: relative; flex: 0 0 auto; }

.wf-export > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid var(--sb-line);
    border-radius: 7px;
    background: var(--sb-raised);
    color: var(--sb-ink-2);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}

.wf-export > summary::-webkit-details-marker { display: none; }
.wf-export > summary::after { content: "▾"; font-size: 10px; opacity: 0.7; }
.wf-export[open] > summary::after { content: "▴"; }
.wf-export > summary:hover { border-color: var(--sb-accent-line); color: var(--sb-ink); }

.wf-export-body {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 40;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--sb-line);
    border-radius: 10px;
    background: var(--sb-card);
    box-shadow: var(--sb-shadow);
}

.wf-export-body select { min-width: 96px; }

.export-range {
    display: flex;
    align-items: center;
    gap: 6px;
}

.export-range-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--sb-ink-3);
}

/* --- легенда --- */

/* Легенда - подпись к таблице, а не самостоятельный раздел: панель вокруг
   неё занимала целую полосу экрана. */
.legend {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding: 0 2px !important;
    background: transparent !important;
    border: 0 !important;
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--sb-ink-3);
    white-space: nowrap;
}

.legend .swatch {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    flex: 0 0 auto;
}

.legend .swatch.duty {
    background: transparent;
    border: 1px dashed var(--sb-ink-3);
}

/* Был белый квадрат с красной рамкой, заданный прямо в разметке: на тёмном
   фоне он светился дырой и не совпадал с цветом конфликта в таблице. */
.legend .swatch.conflict {
    background: var(--sb-bad-bg);
    border: 1px solid var(--sb-bad-ink);
}

/* --- панель действий --- */

/* Прижата к низу окна: выбирают даты в таблице, а кнопка «Применить» была
   вверху страницы - приходилось прокручивать туда-обратно. */
.panel.status-brushbar {
    position: sticky;
    bottom: 0;
    z-index: 30;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    order: 99;
    box-shadow: 0 -10px 22px -14px rgba(0, 0, 0, 0.55);
}

/* Кисти занимают всю первую строку, вторая - комментарий, подпись и
   кнопки. Без явного переноса «Очистить выбор» уезжала на третью строку и
   панель забирала у таблицы ещё сорок пикселей. */
.panel.status-brushbar .brush-actions { flex: 1 0 100%; }

.panel.status-brushbar #brushComment {
    flex: 0 1 280px;
    min-width: 150px;
}

.brush-summary {
    flex: 1 1 120px;
    min-width: 0;
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Подпись про выбор важнее, когда выбор есть: пока его нет, она тихая. */
.panel.status-brushbar #brushApplyAction:not(:disabled) + #brushClearSelection,
.panel.status-brushbar #brushApplyAction:not(:disabled) { font-weight: 700; }

/* Пока ничего не выбрано, «Применить» ничего не сделает - подпись рядом
   объясняет это словами, а не только серой кнопкой. */
.panel.status-brushbar .brush-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* --- таблица --- */

/* Таблица получает всю оставшуюся высоту: раньше её собственный
   max-height не зависел от того, сколько места отняли панели сверху. */
.panel.calendar-panel {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 !important;
    overflow: hidden;
}

.panel.calendar-panel .table-wrap {
    max-height: calc(100vh - 250px);
    overflow: auto;
}

@media (max-width: 900px) {
    .wf-export-body { right: auto; left: 0; }
    .panel.filters select { max-width: none; flex: 1 1 140px; }

    /* Таблица оставляет место панели действий и сама прокручивается внутри:
       иначе тридцать две строки уезжали вниз, а «Применить» оказывалось за
       ними - выбрал ячейки и листай весь календарь, чтобы их применить. */
    .panel.calendar-panel .table-wrap { max-height: calc(100vh - 330px); }

    /* Панель остаётся прижатой к низу и на телефоне. Раньше здесь стояло
       position: static - ровно та проблема, ради которой панель и делали
       липкой. Кисти умещаются в одну строку с горизонтальной прокруткой,
       чтобы панель не отъедала треть экрана. */
    .panel.status-brushbar {
        position: sticky;
        bottom: 0;
        padding: 8px 10px;
        gap: 6px;
    }

    .panel.status-brushbar .brush-actions {
        flex: 1 0 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        padding-bottom: 2px;
    }

    .panel.status-brushbar .brush-action { flex: 0 0 auto; }
    .panel.status-brushbar #brushComment { flex: 1 1 100%; }
    .panel.status-brushbar #brushSelectionSummary { flex: 1 1 100%; }
    .panel.status-brushbar #brushApplyAction,
    .panel.status-brushbar #brushClearSelection { flex: 1 1 calc(50% - 3px); }
}


/* ==========================================================================
   Телефон: чип чек-ина в верхней строке.

   Правила чипа объявлены выше и помечены !important, поэтому мобильные
   переопределения обязаны идти после них - иначе побеждает width: auto и
   max-width: 340px, и на экране в 390px чип вставал узким столбиком у
   правого края: иконка и текст в одну строку, кнопка «Изменить» - во
   вторую, а слева оставалось полтораста пикселей пустоты.
   ========================================================================== */

@media (max-width: 760px) {
    #sbTopSlot > .sb-pulse-slot {
        flex: 1 1 100% !important;
        width: 100%;
    }

    .sb-topbar .checkin-pulse {
        width: 100% !important;
        max-width: none !important;
        min-height: 44px !important;
        padding: 6px 8px 6px 10px !important;
        gap: 8px !important;
        /* index.html на узком экране схлопывает чип в две колонки и уводит
           кнопку в отдельную строку (grid-column: 1 / -1). Это верно для
           прежнего широкого блока в шапке страницы, но в строке оболочки
           даёт чип в две строки. Здесь он снова одна строка. */
        grid-template-columns: auto minmax(0, 1fr) auto !important;
    }

    /* Кнопка 28px высотой - не цель для пальца. */
    .sb-topbar .checkin-action {
        grid-column: auto !important;
        width: auto !important;
        min-height: 40px;
        padding: 0 14px !important;
    }

    /* Степпер месяца в верхней строке на телефоне тянется на всю ширину. */
    .sb-stepper { min-height: var(--sb-control-lg); }
    .sb-stepper button { min-width: var(--sb-control-lg); font-size: var(--sb-text-xl); }
    .sb-stepper .sb-stepper-label { min-width: 0; flex: 1 1 auto; }
}

/* ==========================================================================
   ДОСКА. Визуальный язык 2026.

   Правила ниже стоят в конце файла и собирают вид доски в одном месте:
   дорожки статусов, карточка сотрудника, чип чек-ина, выпадающие меню,
   окна и экран входа. Раскладку (сколько карточек в ряд, какая дорожка
   шире) по-прежнему считает index.html - здесь только вид.

   Смысл слоёв: полотно -> дорожка статуса -> карточка. Каждый следующий
   слой на ступень светлее и с бликом по верхнему краю, поэтому карточки
   читаются без тяжёлых рамок. Цвет статуса несут три вещи: полоска света
   над дорожкой, аватар и кнопка статуса - и везде рядом иконка (A11Y-2).
   ========================================================================== */

/* Каждый статус объявляет свой тон один раз - дальше правила берут
   --lane-* и не повторяются пять раз. */
[data-status-column="office"], .card[data-status="office"] { --lane: var(--sb-status-office-line); --lane-bg: var(--sb-status-office-bg); --lane-ink: var(--sb-status-office-ink); }
[data-status-column="home"], .card[data-status="home"] { --lane: var(--sb-status-home-line); --lane-bg: var(--sb-status-home-bg); --lane-ink: var(--sb-status-home-ink); }
[data-status-column="field"], .card[data-status="field"] { --lane: var(--sb-status-field-line); --lane-bg: var(--sb-status-field-bg); --lane-ink: var(--sb-status-field-ink); }
[data-status-column="vacation"], .card[data-status="vacation"] { --lane: var(--sb-status-vacation-line); --lane-bg: var(--sb-status-vacation-bg); --lane-ink: var(--sb-status-vacation-ink); }
[data-status-column="sick"], .card[data-status="sick"] { --lane: var(--sb-status-sick-line); --lane-bg: var(--sb-status-sick-bg); --lane-ink: var(--sb-status-sick-ink); }

/* --- легенда подтверждения ------------------------------------------- */

.checkin-state-guide {
    gap: var(--sb-space-2) var(--sb-space-5) !important;
    margin: 0 0 var(--sb-space-4) !important;
    padding: 0 var(--sb-space-1);
    font-size: var(--sb-text-sm) !important;
    color: var(--sb-ink-3) !important;
}
.checkin-state-guide-item {
    gap: var(--sb-space-2) !important;
    min-height: 0 !important;
    font-size: var(--sb-text-sm) !important;
    color: var(--sb-ink-3);
}

/* --- дорожки --------------------------------------------------------- */

.board-container { gap: var(--sb-space-4) !important; }
.status-stack { gap: var(--sb-space-4) !important; }

.column {
    position: relative;
    padding: var(--sb-space-3) !important;
    background: var(--sb-rail) !important;
    border: 1px solid var(--sb-line-soft) !important;
    border-radius: var(--sb-radius-lg) !important;
    box-shadow: var(--sb-highlight);
    overflow: visible;
    animation: sb-rise var(--sb-duration-slow) var(--sb-ease-out) both;
}

/* Lane entrance animations create stacking contexts. Raise the whole lane
   (and its time-off stack), otherwise later lanes paint over the open menu. */
.column:has(.dropdown-menu.show),
.status-stack:has(.dropdown-menu.show) {
    position: relative;
    z-index: 1;
}

/* Полоска света статуса над дорожкой: гаснет к краям, поэтому читается
   как отблеск, а не как рамка. */
.column::before {
    content: "";
    position: absolute;
    top: -1px;
    left: var(--sb-space-5);
    right: var(--sb-space-5);
    height: 2px;
    border-radius: var(--sb-radius-full);
    background: linear-gradient(90deg, transparent, var(--lane, var(--sb-accent)), transparent);
    opacity: 0.9;
}

.column-header {
    display: flex !important;
    align-items: center !important;
    gap: var(--sb-space-2);
    padding: var(--sb-space-1) var(--sb-space-1) 0 !important;
    margin-bottom: var(--sb-space-3) !important;
    font-size: var(--sb-text-md) !important;
    font-weight: var(--sb-weight-bold) !important;
    letter-spacing: var(--sb-tracking-tight) !important;
    text-transform: none !important;
    color: var(--sb-ink) !important;
}
.column-header > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: var(--sb-space-2);
    min-width: 0;
}
.column-header .sb-ico {
    width: 28px;
    height: 28px;
    padding: 6px;
    box-sizing: border-box;
    border-radius: var(--sb-radius-sm);
    background: var(--lane-bg);
    color: var(--lane-ink);
    stroke-width: 2;
}

.count-badge {
    min-width: 26px;
    height: 22px;
    padding: 0 var(--sb-space-2) !important;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sb-radius-full) !important;
    background: var(--sb-card) !important;
    border: 1px solid var(--sb-line-soft);
    color: var(--sb-ink-2) !important;
    font-size: var(--sb-text-xs) !important;
    font-weight: var(--sb-weight-bold) !important;
    transition: transform var(--sb-duration-base) var(--sb-ease-out) !important;
}

.status-card-grid { gap: var(--sb-space-2) !important; }

/* --- карточка -------------------------------------------------------- */

.card {
    padding: var(--sb-space-3) !important;
    gap: var(--sb-space-3) !important;
    background: var(--sb-card) !important;
    border: 1px solid var(--sb-line-soft) !important;
    border-left-width: 1px !important;
    border-radius: var(--sb-radius-md) !important;
    box-shadow: var(--sb-highlight), var(--sb-elev-1) !important;
    min-height: 0 !important;
    transition: transform var(--sb-duration-base) var(--sb-ease-out),
                box-shadow var(--sb-duration-base) var(--sb-ease),
                border-color var(--sb-duration-fast) var(--sb-ease) !important;
    animation: sb-card-in var(--sb-duration-slow) var(--sb-ease-out) both !important;
}
.card.updating { animation: none !important; }

@keyframes sb-card-in { from { opacity: 0; transform: translateY(6px) scale(0.985); } }

@media (hover: hover) {
    .card:hover {
        transform: translateY(-2px);
        border-color: var(--sb-line-strong) !important;
        box-shadow: var(--sb-highlight), var(--sb-elev-2) !important;
    }
}
.card:focus-within { border-color: var(--sb-accent-line) !important; }
.card.dropdown-open { z-index: 1000; transform: none !important; }

.card .card-content { gap: var(--sb-space-3) !important; align-items: center !important; }

.sb-card-avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: var(--sb-radius-sm) !important;
    border: 1px solid transparent !important;
    background: var(--lane-bg, var(--sb-raised)) !important;
    color: var(--lane-ink, var(--sb-ink-2)) !important;
    box-shadow: inset 0 0 0 1px var(--lane, var(--sb-line));
    font-size: var(--sb-text-xs) !important;
    font-weight: var(--sb-weight-heavy) !important;
    letter-spacing: 0.02em !important;
    transition: background-color var(--sb-duration-slow) var(--sb-ease), color var(--sb-duration-slow) var(--sb-ease);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .sb-card-avatar { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lane, var(--sb-line)) 55%, transparent); }
}

.card .employee-info { gap: var(--sb-space-0) !important; }
.card .employee-name {
    margin: 0 !important;
    font-size: var(--sb-text-md) !important;
    font-weight: var(--sb-weight-bold) !important;
    line-height: var(--sb-leading-snug) !important;
    letter-spacing: var(--sb-tracking-tight);
    color: var(--sb-ink) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card .employee-role {
    margin: 0 !important;
    font-size: var(--sb-text-xs) !important;
    color: var(--sb-ink-3) !important;
    line-height: var(--sb-leading-snug) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Загрузка - три кнопки-точки. Неактивные - пустые кольца, активная -
   залитая точка с мягким ореолом своего цвета. */
.card .load-indicator,
.load-indicator {
    gap: var(--sb-space-1) !important;
    padding: var(--sb-space-1) !important;
    border-radius: var(--sb-radius-full);
    background: var(--sb-rail);
    border: 1px solid var(--sb-line-soft);
}
.load-dot {
    width: 10px !important;
    height: 10px !important;
    box-sizing: border-box;
    border: 1.5px solid var(--sb-line-strong) !important;
    background-color: transparent !important;
    transform: none !important;
    transition: transform var(--sb-duration-fast) var(--sb-ease-out), background-color var(--sb-duration-fast) var(--sb-ease), box-shadow var(--sb-duration-base) var(--sb-ease) !important;
}
.load-green { color: var(--sb-ok-ink) !important; }
.load-yellow { color: var(--sb-warn-ink) !important; }
.load-red { color: var(--sb-bad-ink) !important; }
.load-dot:hover { transform: scale(1.3) !important; border-color: currentColor !important; }
.load-dot.active {
    background-color: currentColor !important;
    border-color: currentColor !important;
    box-shadow: 0 0 0 3px var(--sb-hover), 0 0 10px currentColor;
}
.load-dot.active.load-green { background-color: var(--sb-ok-ink) !important; }
.load-dot.active.load-yellow { background-color: var(--sb-warn-ink) !important; }
.load-dot.active.load-red { background-color: var(--sb-bad-ink) !important; }

/* Кнопка статуса - главная цель на карточке: во всю ширину, в тоне
   статуса, с иконкой и отметкой подтверждения справа. */
.card .status-btn,
.status-btn.btn-office, .status-btn.btn-home, .status-btn.btn-field,
.status-btn.btn-vacation, .status-btn.btn-sick {
    min-height: var(--sb-control-md) !important;
    padding: 0 var(--sb-space-2) 0 var(--sb-space-3) !important;
    gap: var(--sb-space-2) !important;
    border-radius: var(--sb-radius-sm) !important;
    border: 1px solid var(--lane, var(--sb-line)) !important;
    background: var(--lane-bg, var(--sb-raised)) !important;
    color: var(--lane-ink, var(--sb-ink)) !important;
    font-size: var(--sb-text-sm) !important;
    font-weight: var(--sb-weight-bold) !important;
    justify-content: flex-start !important;
    transition: filter var(--sb-duration-fast) var(--sb-ease), transform var(--sb-duration-instant) var(--sb-ease), background-color var(--sb-duration-slow) var(--sb-ease) !important;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .card .status-btn { border-color: color-mix(in srgb, var(--lane, var(--sb-line)) 45%, transparent) !important; }
}
.card .status-btn:hover { filter: brightness(1.12); }
[data-theme="light"] .card .status-btn:hover { filter: brightness(0.97); }
.card .status-btn:active { transform: scale(0.98); }
.card .status-btn .sb-ico { width: 16px; height: 16px; stroke-width: 2; }
.card .status-btn-label { text-align: left !important; }

/* Отметка подтверждения - маленький круг в тоне состояния. */
.confirmation-indicator {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    border: 1px solid var(--sb-line) !important;
    background: var(--sb-card) !important;
    color: var(--sb-ink-3) !important;
    font-family: var(--sb-font) !important;
    font-size: var(--sb-text-xs) !important;
    font-weight: var(--sb-weight-heavy) !important;
    line-height: 1;
}
.confirmation-indicator.ok { background: var(--sb-ok-bg) !important; border-color: var(--sb-ok-line) !important; color: var(--sb-ok-ink) !important; }
.confirmation-indicator.warn { background: var(--sb-warn-bg) !important; border-color: var(--sb-warn-line) !important; color: var(--sb-warn-ink) !important; }
.confirmation-indicator.bad { background: var(--sb-bad-bg) !important; border-color: var(--sb-bad-line) !important; color: var(--sb-bad-ink) !important; }
.confirmation-indicator.free { background: transparent !important; color: var(--sb-ink-3) !important; }
/* «Ждёт чек-ина» тихо пульсирует - единственное, что на доске просит
   действия. Остальные отметки неподвижны. */
.card .confirmation-indicator.warn { animation: sb-beat 2.6s var(--sb-ease-out) infinite; }

/* Заметка: тихое поле, которое становится полем при наведении и фокусе. */
.card .comment-input,
.card .comment-input:hover,
.card .comment-input:focus,
.card .comment-input.has-value {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: var(--sb-space-2) var(--sb-space-3) !important;
    border-radius: var(--sb-radius-sm) !important;
    font-size: var(--sb-text-sm) !important;
    line-height: 1.35;
}
.card .comment-input {
    background: transparent !important;
    border: 1px dashed var(--sb-line-soft) !important;
    color: var(--sb-ink-2) !important;
    transition: background-color var(--sb-duration-fast) var(--sb-ease), border-color var(--sb-duration-fast) var(--sb-ease) !important;
}
.card .comment-input::placeholder { color: var(--sb-ink-3); }
.card .comment-input.has-value {
    background: var(--sb-rail) !important;
    border: 1px solid var(--sb-line-soft) !important;
    color: var(--sb-ink) !important;
}
.card .comment-input:hover { border-color: var(--sb-line) !important; }
.card .comment-input:focus {
    background: var(--sb-input) !important;
    border: 1px solid var(--sb-accent) !important;
    box-shadow: var(--sb-focus-ring) !important;
    outline: none;
}

/* Подсветка карточки, найденной через палитру команд */
.card.sb-flash {
    outline: none !important;
    box-shadow: 0 0 0 2px var(--sb-accent), 0 0 0 6px var(--sb-accent-soft), var(--sb-elev-2) !important;
}

/* Карточка переехала в другой статус: короткое кольцо света в новом тоне
   (движение самой карточки - FLIP в app-shell.js). */
.card.sb-moved { animation: sb-moved 1.1s var(--sb-ease-out) both !important; }
@keyframes sb-moved {
    0% { box-shadow: 0 0 0 0 var(--lane, var(--sb-accent)), var(--sb-elev-2); }
    100% { box-shadow: 0 0 0 10px transparent, var(--sb-elev-1); }
}

/* --- выпадающее меню статуса ------------------------------------------ */

.dropdown-menu {
    margin-top: var(--sb-space-1) !important;
    padding: var(--sb-space-1) !important;
    min-width: 220px !important;
    background: var(--sb-card) !important;
    border: 1px solid var(--sb-line) !important;
    border-radius: var(--sb-radius-md) !important;
    box-shadow: var(--sb-highlight), var(--sb-elev-3) !important;
    z-index: 1100 !important;
    transform-origin: top left;
}
.dropdown-menu.show { animation: sb-drop var(--sb-duration-base) var(--sb-ease-out) both; }
.dropdown-header {
    padding: var(--sb-space-2) var(--sb-space-3) var(--sb-space-1) !important;
    font-size: var(--sb-text-xs) !important;
    font-weight: var(--sb-weight-medium) !important;
    text-transform: none !important;
    color: var(--sb-ink-3) !important;
}
.dropdown-item {
    gap: var(--sb-space-3) !important;
    min-height: var(--sb-control-md);
    padding: 0 var(--sb-space-3) !important;
    border-radius: var(--sb-radius-sm) !important;
    color: var(--sb-ink) !important;
    font-size: var(--sb-text-md) !important;
    font-weight: var(--sb-weight-medium);
    transition: background-color var(--sb-duration-instant) var(--sb-ease);
}
.dropdown-item:hover { background: var(--sb-hover) !important; }
.dropdown-item .sb-ico { width: 16px; height: 16px; color: var(--sb-ink-3); }
.dropdown-item:nth-child(2) .sb-ico { color: var(--sb-status-office-line); }
.dropdown-item:nth-child(3) .sb-ico { color: var(--sb-status-home-line); }
.dropdown-item:nth-child(4) .sb-ico { color: var(--sb-status-field-line); }
.dropdown-item:nth-child(5) .sb-ico { color: var(--sb-status-vacation-line); }
.dropdown-item:nth-child(6) .sb-ico { color: var(--sb-status-sick-line); }
.dropdown-item.delete-btn {
    margin-top: var(--sb-space-1) !important;
    border-top: 1px solid var(--sb-line-soft) !important;
    border-radius: 0 0 var(--sb-radius-sm) var(--sb-radius-sm) !important;
    color: var(--sb-bad-ink) !important;
}
.dropdown-item.delete-btn .sb-ico { color: var(--sb-bad-ink); }
.dropdown-item.delete-btn:hover { background: var(--sb-bad-bg) !important; }

/* --- окна доски (добавить, редактировать, часы, журнал) ---------------- */

.modal-overlay {
    background: var(--sb-scrim) !important;
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    z-index: 900 !important;
    padding: var(--sb-space-4);
    box-sizing: border-box;
}
.modal-overlay.show { animation: sb-fade var(--sb-duration-base) var(--sb-ease-out) both; }
.modal-overlay.show > .modal { animation: sb-pop var(--sb-duration-slow) var(--sb-ease-out) both; }

.modal,
.modal-overlay > div {
    padding: var(--sb-space-5) !important;
    border: 1px solid var(--sb-line) !important;
    border-radius: var(--sb-radius-lg) !important;
    background: var(--sb-card) !important;
    box-shadow: var(--sb-highlight), var(--sb-elev-3) !important;
    color: var(--sb-ink) !important;
    box-sizing: border-box;
}
.modal h2 {
    margin: 0 0 var(--sb-space-4) !important;
    font-size: var(--sb-text-lg) !important;
    font-weight: var(--sb-weight-bold);
    letter-spacing: var(--sb-tracking-tight);
    color: var(--sb-ink);
}

.modal-overlay .form-group { margin-bottom: var(--sb-space-4) !important; }
.modal-overlay .form-group label {
    margin-bottom: var(--sb-space-1) !important;
    font-size: var(--sb-text-sm) !important;
    font-weight: var(--sb-weight-medium) !important;
    color: var(--sb-ink-2) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.modal-overlay .form-group input,
.modal-overlay .form-group select,
.modal-overlay .form-group textarea {
    min-height: var(--sb-control-md);
    padding: var(--sb-space-2) var(--sb-space-3) !important;
    border: 1px solid var(--sb-line) !important;
    border-radius: var(--sb-radius-sm) !important;
    background-color: var(--sb-input) !important;
    color: var(--sb-ink) !important;
    font-size: var(--sb-text-md) !important;
    transition: border-color var(--sb-duration-fast) var(--sb-ease), box-shadow var(--sb-duration-fast) var(--sb-ease);
}
.modal-overlay .form-group input:focus,
.modal-overlay .form-group select:focus,
.modal-overlay .form-group textarea:focus {
    outline: none;
    border-color: var(--sb-accent) !important;
    box-shadow: var(--sb-focus-ring);
}
.modal-actions { gap: var(--sb-space-2) !important; margin-top: var(--sb-space-5) !important; }

/* Кнопки старой разметки доски (.btn*) - в общий вид кнопок системы. */
.btn,
.modal .btn-cancel,
.modal .btn-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sb-space-2);
    min-height: var(--sb-control-md);
    padding: 0 var(--sb-space-4) !important;
    border: 1px solid var(--sb-line) !important;
    border-radius: var(--sb-radius-sm) !important;
    background: var(--sb-raised) !important;
    box-shadow: var(--sb-highlight), var(--sb-elev-1);
    color: var(--sb-ink) !important;
    font-family: inherit;
    font-size: var(--sb-text-md) !important;
    font-weight: var(--sb-weight-medium) !important;
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-ease), transform var(--sb-duration-instant) var(--sb-ease);
}
.btn:hover, .modal .btn-cancel:hover { background: var(--sb-hover) !important; }
.btn:active, .modal .btn-cancel:active, .modal .btn-save:active { transform: scale(0.97); }
.btn-save, .btn-primary, .btn-success,
.modal .btn-save {
    background: var(--sb-accent) !important;
    border-color: transparent !important;
    color: var(--sb-accent-ink) !important;
    font-weight: var(--sb-weight-bold) !important;
    box-shadow: var(--sb-highlight), 0 6px 18px -8px var(--sb-accent-glow);
}
.btn-save:hover, .btn-primary:hover, .btn-success:hover { background: var(--sb-accent-hover) !important; }
.btn-danger { color: var(--sb-bad-ink) !important; }
.btn-danger:hover { background: var(--sb-bad-bg) !important; border-color: var(--sb-bad-line) !important; }

/* Журнал изменений в окне */
.log-table { background: transparent !important; color: var(--sb-ink-2) !important; font-size: var(--sb-text-md) !important; }
.log-table th {
    background: var(--sb-rail) !important;
    color: var(--sb-ink-3) !important;
    font-size: var(--sb-text-sm) !important;
    font-weight: var(--sb-weight-medium) !important;
    text-transform: none !important;
}
.log-table th, .log-table td { padding: var(--sb-space-2) var(--sb-space-3) !important; border-bottom: 1px solid var(--sb-line-soft) !important; }
.log-table tbody tr,
.log-table tbody tr:nth-child(even) { background: transparent !important; }
.log-table tbody tr:hover { background: var(--sb-hover) !important; }
.status-badge { border-radius: var(--sb-radius-full) !important; padding: var(--sb-space-0) var(--sb-space-2) !important; }
.log-empty, .loading { color: var(--sb-ink-3) !important; }

.admin-badge.show {
    display: inline-flex !important;
    align-items: center;
    gap: var(--sb-space-1);
    padding: var(--sb-space-0) var(--sb-space-2) !important;
    border-radius: var(--sb-radius-full) !important;
    background: var(--sb-bad-bg) !important;
    color: var(--sb-bad-ink) !important;
    font-size: var(--sb-text-xs) !important;
}

/* --- часы в боковой панели ------------------------------------------- */

#sbClocksSlot .clocks-container { gap: var(--sb-space-1) !important; padding: 0 0 var(--sb-space-2) !important; }
.clock-widget {
    flex: 1 1 100%;
    min-width: 0 !important;
    padding: var(--sb-space-2) var(--sb-space-3) !important;
    border: 1px solid var(--sb-line-soft);
    border-radius: var(--sb-radius-sm) !important;
    background: var(--sb-card) !important;
    box-shadow: var(--sb-highlight) !important;
    justify-content: space-between;
}
.clock-time { font-size: var(--sb-text-lg) !important; font-weight: var(--sb-weight-heavy) !important; letter-spacing: var(--sb-tracking-tight); min-width: 0 !important; }
.clock-city { font-size: var(--sb-text-xs) !important; color: var(--sb-ink-3) !important; text-align: right; }
.clock-remove {
    top: -6px !important;
    right: -6px !important;
    width: 18px !important;
    height: 18px !important;
    background: var(--sb-bad-ink) !important;
    color: var(--sb-card) !important;
}
.clock-add-btn {
    flex: 1 1 100%;
    height: 32px !important;
    width: auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--sb-line) !important;
    border-radius: var(--sb-radius-sm) !important;
    background: transparent !important;
    color: var(--sb-ink-3) !important;
    font-size: var(--sb-text-lg) !important;
    cursor: pointer;
    transition: color var(--sb-duration-fast) var(--sb-ease), border-color var(--sb-duration-fast) var(--sb-ease);
}
.clock-add-btn:hover { color: var(--sb-accent) !important; border-color: var(--sb-accent-line) !important; }

/* --- чип чек-ина в верхней строке ------------------------------------ */

.sb-topbar .checkin-pulse {
    height: var(--sb-control-md);
    min-height: var(--sb-control-md) !important;
    padding: 0 var(--sb-space-1) 0 var(--sb-space-3) !important;
    gap: var(--sb-space-2) !important;
    border-radius: var(--sb-radius-full) !important;
    border: 1px solid var(--sb-warn-line) !important;
    border-left-width: 1px !important;
    background: var(--sb-warn-bg) !important;
    box-shadow: none !important;
    box-sizing: border-box;
    transition: background-color var(--sb-duration-slow) var(--sb-ease), border-color var(--sb-duration-slow) var(--sb-ease) !important;
}
.sb-topbar .checkin-pulse[data-state="checked"],
.sb-topbar .checkin-pulse[data-state="done"],
.sb-topbar .checkin-pulse[data-state="ok"] {
    background: var(--sb-ok-bg) !important;
    border-color: var(--sb-ok-line) !important;
}
.sb-topbar .checkin-pulse[data-state="idle"] {
    background: var(--sb-raised) !important;
    border-color: var(--sb-line) !important;
}
.sb-topbar .checkin-orbit {
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    padding: 0;
    border-radius: 50% !important;
    font-size: 0 !important;
    color: transparent !important;
    background: var(--sb-warn-ink) !important;
    box-shadow: none !important;
    animation: sb-beat 2.4s var(--sb-ease-out) infinite;
}
.sb-topbar .checkin-pulse { color: var(--sb-warn-ink); }
.sb-topbar .checkin-pulse[data-state="checked"] { color: var(--sb-ok-ink); }
.sb-topbar .checkin-pulse[data-state="checked"] .checkin-orbit { background: var(--sb-ok-ink) !important; animation: none; }
.sb-topbar .checkin-pulse[data-state="idle"] .checkin-orbit { background: var(--sb-ink-3) !important; animation: none; }
.sb-topbar .checkin-title { font-size: var(--sb-text-sm) !important; font-weight: var(--sb-weight-bold) !important; color: var(--sb-ink) !important; }
.sb-topbar .checkin-action {
    height: 28px;
    min-height: 28px !important;
    min-width: 0 !important;
    padding: 0 var(--sb-space-3) !important;
    border-radius: var(--sb-radius-full) !important;
    background: var(--sb-accent) !important;
    color: var(--sb-accent-ink) !important;
    font-size: var(--sb-text-sm) !important;
    font-weight: var(--sb-weight-bold) !important;
    transition: background-color var(--sb-duration-fast) var(--sb-ease), transform var(--sb-duration-instant) var(--sb-ease);
}
.sb-topbar .checkin-action:hover { background: var(--sb-accent-hover) !important; filter: none; }
.sb-topbar .checkin-action:active { transform: scale(0.96); }

.sb-topbar .checkin-drawer {
    top: calc(100% + 10px) !important;
    width: 380px !important;
    padding: var(--sb-space-5) !important;
    border: 1px solid var(--sb-line) !important;
    border-radius: var(--sb-radius-lg) !important;
    background: var(--sb-card) !important;
    color: var(--sb-ink) !important;
    box-shadow: var(--sb-highlight), var(--sb-elev-3) !important;
    transform-origin: top right;
}
.sb-topbar .checkin-drawer.show { animation: sb-drop var(--sb-duration-slow) var(--sb-ease-out) both !important; }
.checkin-drawer-title { font-size: var(--sb-text-lg) !important; letter-spacing: var(--sb-tracking-tight); }
.checkin-drawer-close {
    width: 32px !important;
    height: 32px !important;
    border-radius: var(--sb-radius-sm) !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--sb-ink-3) !important;
}
.checkin-drawer-close:hover { background: var(--sb-hover) !important; color: var(--sb-ink) !important; }
.checkin-drawer-field label { font-size: var(--sb-text-sm) !important; font-weight: var(--sb-weight-medium) !important; color: var(--sb-ink-2) !important; }
.checkin-drawer-field input,
.checkin-drawer-field select {
    min-height: var(--sb-control-md);
    border-radius: var(--sb-radius-sm) !important;
    background-color: var(--sb-input) !important;
}
.checkin-drawer-statuses { gap: var(--sb-space-2) !important; }
.checkin-drawer-status {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--sb-space-2);
    min-height: var(--sb-control-md);
    border-radius: var(--sb-radius-sm) !important;
    font-weight: var(--sb-weight-bold) !important;
    transition: transform var(--sb-duration-instant) var(--sb-ease), box-shadow var(--sb-duration-fast) var(--sb-ease);
}
.checkin-drawer-status:active { transform: scale(0.97); }
.checkin-drawer-status.selected { box-shadow: 0 0 0 2px var(--sb-card), 0 0 0 4px var(--sb-accent) !important; }
.checkin-drawer-save,
.checkin-drawer-logout,
.checkin-drawer-cancel { min-height: var(--sb-control-md); border-radius: var(--sb-radius-sm) !important; font-weight: var(--sb-weight-bold) !important; }

/* --- индикатор связи ------------------------------------------------- */

#realtimeIndicator.sb-live {
    position: static !important;
    height: 30px;
    border: 0;
    white-space: nowrap;
}
#realtimeIndicator.sb-live[data-state="reconnecting"] { background: var(--sb-warn-bg); color: var(--sb-warn-ink); }
#realtimeIndicator.sb-live[data-state="stale"] { background: var(--sb-bad-bg); color: var(--sb-bad-ink); }
#realtimeIndicator.sb-live[data-state="stale"] i,
#realtimeIndicator.sb-live[data-state="reconnecting"] i { animation: none; }

/* --- экран входа ----------------------------------------------------- */

body.auth-gate {
    background: var(--sb-page-glow), var(--sb-bg) !important;
    background-attachment: fixed !important;
}
body.auth-gate #authModal .modal {
    max-width: 408px !important;
    padding: var(--sb-space-6) var(--sb-space-6) var(--sb-space-5) !important;
    border-radius: var(--sb-radius-xl) !important;
    box-shadow: var(--sb-highlight), var(--sb-elev-3) !important;
    animation: sb-pop var(--sb-duration-slow) var(--sb-ease-out) both;
}
#authModal .auth-brand { gap: var(--sb-space-3) !important; margin-bottom: var(--sb-space-6) !important; }
#authModal .auth-brand img { height: 48px !important; filter: drop-shadow(0 8px 20px var(--sb-accent-glow)); }
#authModal .auth-brand-title { font-size: var(--sb-text-xl) !important; font-weight: var(--sb-weight-heavy) !important; letter-spacing: var(--sb-tracking-tighter) !important; }
#authModal .auth-brand-sub { font-size: var(--sb-text-md) !important; }
body.auth-gate #authModal .form-group label {
    font-size: var(--sb-text-sm) !important;
    font-weight: var(--sb-weight-medium) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--sb-ink-2) !important;
}
body.auth-gate #authModal .form-group input {
    min-height: var(--sb-control-lg) !important;
    border-radius: var(--sb-radius-sm) !important;
    background-color: var(--sb-input) !important;
    font-size: var(--sb-text-touch) !important;
}
body.auth-gate #authModal .form-group input:focus-visible {
    border-color: var(--sb-accent) !important;
    box-shadow: var(--sb-focus-ring) !important;
}
body.auth-gate #authModal .btn-save {
    min-height: var(--sb-control-lg) !important;
    border-radius: var(--sb-radius-sm) !important;
    font-size: var(--sb-text-lg) !important;
}
.auth-hint { font-size: var(--sb-text-sm) !important; }
.auth-theme {
    min-height: var(--sb-control-md) !important;
    padding: 0 var(--sb-space-3) !important;
    border-radius: var(--sb-radius-full) !important;
    background: var(--sb-card) !important;
    box-shadow: var(--sb-highlight), var(--sb-elev-1);
    font-size: var(--sb-text-sm) !important;
}

/* --- узкие экраны ---------------------------------------------------- */

@media (max-width: 760px) {
    .board-container { gap: var(--sb-space-3) !important; }
    .column { padding: var(--sb-space-3) var(--sb-space-2) var(--sb-space-2) !important; border-radius: var(--sb-radius-md) !important; }
    .column-header { padding: 0 var(--sb-space-1) !important; }
    .card .status-btn { min-height: var(--sb-control-lg) !important; font-size: var(--sb-text-md) !important; }
    .load-dot { width: 14px !important; height: 14px !important; }
    .card .load-indicator { gap: var(--sb-space-2) !important; padding: var(--sb-space-1) var(--sb-space-2) !important; }
    .dropdown-item { min-height: var(--sb-control-lg); }
    .card .comment-input,
    .card .comment-input:hover,
    .card .comment-input:focus,
    .card .comment-input.has-value { font-size: var(--sb-text-md) !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; }
    /* 16px только в фокусе: меньший кегль в поле iOS увеличивает страницу. */
    .card .comment-input:focus { font-size: var(--sb-text-touch) !important; }
    /* Пустая заметка на телефоне не занимает место, пока карточку не
       тронули: иначе доска из двадцати человек - это двадцать пустых полей. */
    .card .comment-section:not(:has(.comment-input.has-value)) { display: none !important; }
    .card:focus-within .comment-section { display: flex !important; }
    .checkin-state-guide { gap: var(--sb-space-1) var(--sb-space-4) !important; font-size: var(--sb-text-xs) !important; }
    .sb-topbar .checkin-pulse { height: var(--sb-control-lg); min-height: var(--sb-control-lg) !important; }
    .sb-topbar .checkin-action { height: 34px; }
    /* Blur creates a containing block for the fixed sheet. While it is open,
       anchor it to the viewport rather than the much shorter topbar. */
    .sb-topbar:has(.checkin-drawer.show) {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .sb-topbar .checkin-drawer {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        max-width: none !important;
        max-height: 88vh !important;
        border-radius: var(--sb-radius-xl) var(--sb-radius-xl) 0 0 !important;
        z-index: 8500 !important;
    }
    .sb-topbar .checkin-drawer.show { animation: sb-sheet var(--sb-duration-slow) var(--sb-ease-out) both !important; }
    .modal-overlay { padding: 0; align-items: flex-end !important; }
    .modal-overlay > .modal {
        max-width: none !important;
        width: 100% !important;
        max-height: 92vh !important;
        border-radius: var(--sb-radius-xl) var(--sb-radius-xl) 0 0 !important;
    }
    .modal-overlay.show > .modal { animation: sb-sheet var(--sb-duration-slow) var(--sb-ease-out) both; }
    body.auth-gate #authModal .modal { padding: var(--sb-space-6) var(--sb-space-5) var(--sb-space-5) !important; border-radius: var(--sb-radius-lg) !important; }
    body.auth-gate #authModal { align-items: center !important; }
    .modal-overlay .form-group input, .modal-overlay .form-group select, .modal-overlay .form-group textarea { min-height: var(--sb-control-lg); font-size: var(--sb-text-touch) !important; }
    #realtimeIndicator.sb-live { display: none; }
}

/* --- поиск в верхней строке ------------------------------------------ */

.search-box input {
    min-height: var(--sb-control-md);
    padding: 0 var(--sb-space-3) 0 var(--sb-space-6) !important;
    border: 1px solid var(--sb-line) !important;
    border-radius: var(--sb-radius-sm) !important;
    background-color: var(--sb-input) !important;
    color: var(--sb-ink) !important;
    font-size: var(--sb-text-md) !important;
    box-shadow: var(--sb-highlight);
    transition: border-color var(--sb-duration-fast) var(--sb-ease), box-shadow var(--sb-duration-fast) var(--sb-ease);
}
.search-box input:hover { border-color: var(--sb-line-strong) !important; }
.search-box input:focus { outline: none; border-color: var(--sb-accent) !important; box-shadow: var(--sb-focus-ring); }
/* Лупа нарисована двумя фигурами вместо эмодзи 🔍 - тот был цветным и
   разного размера на каждой системе. */
.search-box::before {
    content: "" !important;
    left: 13px !important;
    top: 50% !important;
    width: 10px;
    height: 10px;
    margin-top: -7px;
    transform: none !important;
    border: 1.6px solid var(--sb-ink-3);
    border-radius: 50%;
    pointer-events: none;
}
.search-box::after {
    content: "";
    position: absolute;
    left: 23px;
    top: 50%;
    width: 5px;
    height: 1.6px;
    margin-top: 4px;
    border-radius: 1px;
    background: var(--sb-ink-3);
    transform: rotate(45deg);
    pointer-events: none;
}
.search-box:focus-within::before { border-color: var(--sb-accent); }
.search-box:focus-within::after { background: var(--sb-accent); }

/* Имя на карточке может занять две строки: «Виноградова Ксения Павловна»
   обрезалось до «Виноградова Ксе…», и человека приходилось искать по
   аватару. Точки загрузки - без подложки, чтобы отдать место имени. */
.card .employee-name {
    white-space: normal !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-wrap: balance;
}
.card .card-content { align-items: flex-start !important; }
.card .load-indicator {
    padding: var(--sb-space-1) 0 0 !important;
    gap: 5px !important;
    background: transparent !important;
    border: 0 !important;
}
@media (max-width: 760px) {
    .card .load-indicator { gap: var(--sb-space-2) !important; padding: var(--sb-space-1) 0 0 !important; }
}

/* Настройки на телефоне: поля 16px, иначе iOS увеличивает страницу при фокусе. */
@media (max-width: 720px) {
    .settings-body input:not([type="checkbox"]):not([type="radio"]),
    .settings-body select,
    .settings-body textarea { font-size: var(--sb-text-touch) !important; min-height: var(--sb-control-lg); }
}

/* Экран входа - это не модальное окно поверх доски, а сама страница:
   общий фон затемнения окон к нему не относится. */
body.auth-gate #authModal.modal-overlay {
    background: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: var(--sb-space-4);
}

/* Логотип-картинка (экран входа, чек-ин) нарисован чёрной линией: в тёмной
   теме линия пропадала. Инверсия с поворотом тона возвращает цветным
   кругам их тон, а линию делает светлой. */
[data-theme="dark"] #authModal .auth-brand img,
[data-theme="dark"] .checkin-container .logo img { filter: invert(1) hue-rotate(180deg) saturate(1.2) drop-shadow(0 8px 20px var(--sb-accent-glow)); }
.sb-brand svg { color: var(--sb-ink); }
.sb-brand .sb-logo-a { fill: var(--sb-brand-mark-a); stroke: var(--sb-brand-mark-a); }
.sb-brand .sb-logo-b { fill: var(--sb-brand-mark-b); stroke: var(--sb-brand-mark-b); }

/* Ширина дорожки считается от числа колонок карточек (--status-block-columns
   из index.html), а не делится поровну. Базис в 250px на колонку позволяет
   дорожкам переноситься на следующую строку, когда «В офисе» получает две
   колонки: иначе они сжимались бы, и карточки снова вставали в одну колонку. */
@media (min-width: 761px) {
    .column,
    .status-stack { flex: var(--status-block-columns, 1) 1 calc(var(--status-block-columns, 1) * 250px) !important; }
}

/* Employee portraits: shared surfaces, soft corners and a quiet image viewer. */
.sb-card-avatar[data-avatar-open] { position: relative; overflow: hidden; padding: 0; cursor: zoom-in; flex-shrink: 0; }
.sb-card-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sb-card-avatar img[hidden] { display: none; }
.sb-avatar-initials { display: grid; place-items: center; width: 100%; height: 100%; }
.sb-card-avatar img.is-system, .sb-avatar-preview.is-system, #avatarViewerImage.is-system { image-rendering: pixelated; }
.sb-card-avatar[data-avatar-open]:hover { outline: 2px solid var(--sb-accent-line); outline-offset: 2px; }
.sb-avatar-editor { padding: var(--sb-space-4); background: var(--sb-raised); border: 1px solid var(--sb-line-soft); border-radius: var(--sb-radius-lg); }
.sb-avatar-editor-head { display: flex; gap: var(--sb-space-4); align-items: center; }
.sb-avatar-editor h3 { margin: 0; font-size: var(--sb-text-md); font-weight: var(--sb-weight-bold); }
.sb-avatar-preview { width: 80px; height: 80px; border-radius: var(--sb-radius-lg); object-fit: cover; flex-shrink: 0; background: var(--sb-card); border: 1px solid var(--sb-line); box-shadow: var(--sb-elev-1); }
.sb-avatar-hint { margin: var(--sb-space-2) 0; color: var(--sb-ink-3); font-size: var(--sb-text-xs); line-height: 1.5; }
.sb-avatar-actions { display: flex; gap: var(--sb-space-2); flex-wrap: wrap; }
.sb-avatar-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sb-space-2); margin-top: var(--sb-space-3); }
.sb-avatar-choice { display: flex; flex-direction: column; align-items: center; gap: var(--sb-space-1); padding: var(--sb-space-2); border: 1px solid var(--sb-line-soft); border-radius: var(--sb-radius-md); background: var(--sb-card); color: var(--sb-ink-2); cursor: pointer; font: inherit; font-size: var(--sb-text-xs); transition: background var(--sb-duration-fast) var(--sb-ease), border-color var(--sb-duration-fast) var(--sb-ease); }
.sb-avatar-choice img { width: 100%; max-width: 52px; aspect-ratio: 1; border-radius: var(--sb-radius-sm); image-rendering: pixelated; }
.sb-avatar-choice:hover { background: var(--sb-hover); border-color: var(--sb-line-strong); }
.sb-avatar-choice[aria-pressed="true"] { border-color: var(--sb-accent); background: var(--sb-accent-soft); box-shadow: inset 0 0 0 1px var(--sb-accent); color: var(--sb-ink); }
.sb-avatar-choice[aria-pressed="true"] span::after { content: ' ✓'; color: var(--sb-accent); }
.sb-avatar-choice:disabled { opacity: .65; cursor: wait; }
.sb-avatar-error { margin: 0; color: var(--status-sick-text); background: var(--status-sick-bg); border: 1px solid var(--status-sick-border); padding: var(--sb-space-3); border-radius: var(--sb-radius-sm); font-size: var(--sb-text-sm); }
#editModal .sb-field :disabled { cursor: default; }
.sb-avatar-viewer { position: fixed; inset: 0; z-index: calc(var(--sb-z-modal, 1000) + 1); display: flex; align-items: center; justify-content: center; padding: var(--sb-space-5); background: var(--sb-scrim); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sb-avatar-viewer[hidden], .sb-avatar-actions [hidden], .sb-avatar-editor [hidden] { display: none; }
.sb-avatar-viewer-box { width: min(640px, 100%); padding: var(--sb-space-4); background: var(--sb-card); border: 1px solid var(--sb-line); border-radius: var(--sb-radius-xl); box-shadow: var(--sb-elev-3); animation: sb-pop var(--sb-duration-base) var(--sb-ease-out); }
.sb-avatar-viewer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sb-space-3); margin-bottom: var(--sb-space-3); }
.sb-avatar-viewer-head h2 { margin: 0; font-size: var(--sb-text-lg); overflow-wrap: anywhere; }
#avatarViewerImage { display: block; width: 100%; height: auto; max-height: calc(100dvh - 160px); object-fit: contain; border-radius: var(--sb-radius-md); }
#avatarViewerImage.is-system { max-height: min(60dvh, 480px); object-fit: contain; }
#avatarViewerImage[hidden], #avatarViewerError[hidden] { display: none; }
@media (max-width: 760px) {
    .sb-avatar-viewer { padding: var(--sb-space-3); }
    .sb-avatar-viewer-box { padding: var(--sb-space-3); }
    .sb-avatar-editor { padding: var(--sb-space-3); }
    .sb-avatar-editor-head { gap: var(--sb-space-3); }
    .sb-avatar-preview { width: 64px; height: 64px; }
    .sb-avatar-choice { min-height: 76px; padding: var(--sb-space-2) var(--sb-space-1); }
}
@media (prefers-reduced-motion: reduce) {
    .sb-avatar-viewer-box { animation: none; }
    .sb-avatar-choice { transition: none; }
}