/* Source module for generated ../styles.css. Edit files in public/css and run
   `npm run build:css`; do not hand-edit the generated bundle. */
/* SEVEN reference graphite system
   Source of truth for GAS and local preview.
   Build target: Styles.html */

:root {
  --bg-page: #4a4947;
  --bg-page-dark: #2f2e2c;
  --bg-shell: #151514;
  --bg-sidebar: #171716;
  --bg-panel: #242422;
  --bg-panel-soft: #2b2a28;
  --bg-control: #2d2b29;
  --bg-control-hover: #34312e;

  /* Уровни полупрозрачных подложек: 1 — самая лёгкая (карточки внутри панели),
     3 — самая плотная (фильтры, тулбары). Светлая тема переопределяет их. */
  --surface-1: rgba(18, 18, 17, 0.2);
  --surface-2: rgba(18, 18, 17, 0.34);
  --surface-3: rgba(18, 18, 17, 0.58);
  --surface-header: rgba(22, 23, 23, 0.96);
  /* Поверхности Оклейки. Раньше их не существовало: правила писали
     var(--ok-surface-2, #201f1d) и работал только фолбэк, поэтому в светлой
     теме эти места оставались тёмными. */
  --ok-surface-2: #201f1d;
  --ok-surface-3: #2d2b29;
  --page-backdrop:
    radial-gradient(circle at 18% 8%, rgba(200, 88, 45, 0.07), transparent 30%),
    linear-gradient(135deg, #51504d 0%, #383735 40%, #2e2d2b 100%);
  --surface-active: #30343b;
  --surface-accent-btn: #2b3038;
  /* Алиасы для правил, написанных через var(--muted) / var(--soft): без
     объявления они всегда брали запасной светлый цвет. */
  --muted: var(--text-muted);
  --soft: var(--text-soft);
  --schedule-time: #c4ddc9;
  --schedule-day: #aeb1b4;

  --text-main: #f1eee8;
  --text-soft: #c6c0b7;
  --text-secondary: var(--text-soft);
  --text-muted: #b0aaa1;
  --text-muted-control: #a49e94;
  --text-faint: #918b82;   /* было #5f5b55 = 2.31:1 на панели, теперь 4.61:1 */

  --accent: #c8582d;
  --accent-soft: rgba(200, 88, 45, 0.18);
  --accent-border: rgba(200, 88, 45, 0.58);
  /* Акцент и ошибка как ЦВЕТ ТЕКСТА. Сам --accent на панели даёт 3.62:1,
     --err — 3.39:1: для рамок и фонов этого достаточно, для текста нет.
     Осветлённые варианты дают 5.13:1 и 6.24:1 на --bg-panel. */
  --accent-text: #e2764a;
  --err-text: #e88b7f;

  --ok: #8f9f78;
  --warn: #c49a55;
  --err: #b75a4b;

  --schedule-work-bg: rgba(78, 145, 91, 0.28);
  --schedule-work-border: rgba(121, 197, 139, 0.50);
  --schedule-work-accent: #79c58b;
  --schedule-training-bg: rgba(82, 126, 174, 0.18);
  --schedule-training-border: rgba(101, 151, 204, 0.34);
  --schedule-training-accent: #6597cc;
  --schedule-off-bg: rgba(104, 111, 120, 0.18);
  --schedule-off-border: rgba(165, 171, 178, 0.32);
  --schedule-off-accent: #a5abb2;
  --schedule-noshow-bg: rgba(183, 76, 68, 0.18);
  --schedule-noshow-border: rgba(207, 91, 82, 0.38);
  --schedule-noshow-accent: #ef7d73;
  --schedule-sick-bg: rgba(139, 101, 145, 0.18);
  --schedule-sick-border: rgba(165, 124, 172, 0.36);
  --schedule-sick-accent: #a57cac;
  --schedule-vacation-bg: rgba(190, 139, 65, 0.17);
  --schedule-vacation-border: rgba(215, 159, 77, 0.36);
  --schedule-vacation-accent: #d79f4d;

  --border-soft: rgba(255, 255, 255, 0.075);
  --border-mid: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.20);
  /* Алиас для правил, написанных через var(--ui-border): фолбэк был
     белым полупрозрачным и на светлом фоне давал белую рамку. */
  --ui-border: var(--border-mid);
  /* Ещё четыре токена, которых не существовало: правила писали их только
     через фолбэк, и в светлой теме там оставались тёмные значения —
     белая полупрозрачная рамка на светлом фоне и светлый текст ошибки. */
  --panel-border: var(--border-mid);
  --warn-border: #8a6d3b;
  --warn-bg: rgba(138, 109, 59, 0.14);
  --danger-text: #d98b8b;      /* 5.94:1 на панели */
  --focus-ring: rgba(79, 140, 255, 0.82);

  /* Compact radius scale (single source; the later override block was removed). */
  /* Легаси-имена оставлены ради существующей разметки, но значения берут
     из единой шкалы ниже — второй набор радиусов больше не существует. */
  --radius-sm: var(--workspace-control-radius);
  --radius-md: var(--workspace-panel-radius);
  --radius-lg: var(--workspace-shell-radius);
  --radius-xl: var(--workspace-shell-radius);
  --radius-pill: var(--workspace-panel-radius);

  --shadow-shell: 0 26px 80px rgba(0, 0, 0, 0.48);
  --shadow-panel: 0 18px 48px rgba(0, 0, 0, 0.32);
  --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.24);

  --neo-bg: #272624;
  --neo-bg-hover: #302e2b;
  --neo-text: #f1eee8;
  --neo-shadow: 7px 9px 18px rgba(0, 0, 0, 0.34), -1px -1px 5px rgba(255, 255, 255, 0.055);
  --neo-shadow-active: inset 4px 5px 10px rgba(0, 0, 0, 0.28), inset -1px -1px 6px rgba(255, 255, 255, 0.06);
  --btn-glow: 0 8px 22px rgba(79, 140, 255, 0.10);
  --btn-glow-hover: 0 10px 24px rgba(0, 0, 0, 0.26), 0 0 18px rgba(79, 140, 255, 0.12);
  --btn-shadow: 0 10px 30px rgba(0, 0, 0, 0.32);
  --workspace-block-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);
  --menu-active-shadow: 0 12px 28px rgba(0, 0, 0, 0.30), 0 0 22px rgba(79, 140, 255, 0.14);
  --btn-accent-shadow: 0 12px 28px rgba(0, 0, 0, 0.30), 0 0 18px rgba(66, 150, 95, 0.16);
  --surface-hover: #302d2a;
  --surface-hover-danger: #3a2a27;
  --surface-hover-accent: #2a3d33;
  --action-bg: #26352d;
  --action-border: rgba(80, 214, 138, 0.58);
  --action-text: var(--text-main);
  --btn-blue: #4f8cff;
  --btn-blue-soft: rgba(79, 140, 255, 0.16);

  /* Статусные цвета текста: пастельные светлые для тёмной темы.
     В светлой теме переопределены на насыщенные тёмные оттенки. */
  --status-p1-text: #ffaaaa;         /* приоритет 1: светлый красный */
  --status-p2-text: #ffc39e;         /* приоритет 2: светлый оранжевый */
  --status-p3-text: #ffe49a;         /* приоритет 3: светлый жёлтый */
  --status-p4-text: #acd0ff;         /* приоритет 4: светлый синий */
  --status-p5-text: #c8c3bd;         /* приоритет 5: светлый серый */
  --status-pending-text: #b8d0ff;    /* статус "в ожидании": светлый синий */
  --status-working-text: #ffc39e;    /* статус "в работе": светлый оранжевый */
  --status-partial-text: #ffe49a;    /* статус "частично": светлый жёлтый */
  --status-done-text: #a8e8bc;       /* статус "завершено": светлый зелёный */

  --font-main: "Century Gothic", "Segoe UI", Arial, sans-serif;

  /* Шкала размеров текста (docs/UI_CANON.md). Нижняя граница интерфейса —
     12px: раньше в проекте жили 242 объявления мельче, вплоть до 8px в
     подписях таблицы печати этикеток и 9px у подписей полей. Систему
     открывают с телефона в цеху, и такой текст там не читается.
     На узком экране шкала сдвигается на ступень вверх. */
  --fs-caption: 12px;   /* подписи, служебные пометки */
  --fs-body: 13px;      /* основной текст, ячейки таблиц */
  --fs-body-lg: 14px;   /* текст, который читают долго */
  --fs-h3: 16px;        /* заголовок блока */
  --fs-h2: 18px;        /* заголовок панели */
  --fs-h1: 21px;        /* заголовок страницы */
  --fs-title: 24px;     /* крупный заголовок раздела */
  --fs-display: 28px;   /* самый крупный заголовок */

  /* Shared workspace contract.
     Production is the visual reference; Okleyka consumes the same geometry. */
  --workspace-page-max: 1500px;
  --workspace-page-pad: 18px;
  --workspace-page-pad-mobile: 10px;
  --workspace-sidebar-width: 205px;
  --workspace-sidebar-width-compact: 184px;
  --workspace-gap: 16px;
  /* Единая шкала радиусов: оболочка / панель / контрол. Больше нигде
     не должно быть числовых border-radius, кроме пилюль (999px). */
  --workspace-shell-radius: 4px;
  --workspace-panel-radius: 3px;
  --workspace-control-radius: 2px;
  --workspace-panel-pad: 14px;
  --workspace-control-height: 38px;
  --workspace-button-height: 40px;
  --workspace-content-min-height: 430px;
  /* Использовались только через фолбэк в var(): объявляем явно. */
  --app-height: 100dvh;
  --workspace-sticky-top: 10px;
  --workspace-mobile-menu-top: 6px;
  --workspace-mobile-menu-list-top: 62px;
  /* Единая шкала брейкпоинтов (docs/UI_CANON.md). CSS-переменная не работает
     внутри @media, поэтому в самих медиазапросах пишутся числа, а эти токены
     существуют для чтения из JS через ui-kit/breakpoints.js. Значения
     max-width равны токену, парные min-width — токену плюс один пиксель.
     Других значений в @media быть не должно: это проверяет qa:ui-canon. */
  --bp-xs: 430px;        /* узкий телефон */
  --bp-sm: 560px;        /* крупный телефон */
  --bp-md: 768px;        /* граница мобильной раскладки */
  --bp-md-wide: 900px;   /* узкий планшет */
  --bp-lg: 1023px;       /* граница компактной раскладки */
  --bp-xl: 1120px;       /* узкий десктоп */
  --bp-xxl: 1280px;      /* широкий десктоп */
  /* Геометрия рабочей оболочки — единственный источник правды.
     Шапка внутри оболочки абсолютная, поэтому её высота и верхний отступ
     оболочки берутся из одного токена и не могут разъехаться.
     Значения по умолчанию — десктопные, мобильные ниже в media 1023px. */
  --workspace-header-h: 58px;
  --workspace-shell-gap-top: 20px;
  --workspace-shell-pad-x: 18px;
  --workspace-shell-pad-b: 18px;
  --workspace-shell-gap: 16px;
  --workspace-card-gap-top: 12px;
  --workspace-page-pad-bottom: 14px;
  --workspace-page-pad-x-mobile: 8px;
  /* Поверхности таблиц: единые для Производства и Оклейки, чтобы шапки,
     липкие колонки и строки итогов не расходились по оттенкам. */
  --bg-table-head: #171716;

  /* Подсветка статусов записи. Текст отдельным токеном: обычный --ok на своей
     же подсветке даёт 4.08:1, а метка набрана 13px — это не крупный текст,
     ему нужно 4.5:1. Значения ниже измерены на этой подсветке. */
  --dh-status-ok-bg: rgba(143, 159, 120, 0.18);
  --dh-status-warn-bg: rgba(196, 154, 85, 0.18);
  --dh-status-err-bg: rgba(183, 90, 75, 0.22);
  --dh-status-mute-bg: rgba(255, 255, 255, 0.05);
  --dh-status-ok-text: #a8b795;    /* 5.45:1 */
  --dh-status-warn-text: #d6b276;  /* 5.69:1 */
  --dh-status-err-text: #e88b7f;   /* 4.95:1 */
  --bg-table-sticky: var(--bg-panel);
  --bg-table-sticky-alt: #201f1d;
  --bg-table-total: #12110f;
  --bg-table-group: #252624;
  --workspace-filter-pad: 12px;
  --workspace-filter-gap-bottom: 14px;
  /* Утопленная подложка под кнопками режимов: темнее панели, чтобы
     сами кнопки читались как приподнятые. */
  --workspace-tabstrip-bg: rgba(8, 8, 8, 0.58);

  /* Недостающие граничные и вспомогательные переменные, используемые в селекторах
     со светлыми фолбэками. Значения в тёмной теме. */
  --border: #393735;                          /* граница контролей */
  --bg-input: #1e1d1b;                        /* фон поля ввода */
  --surface-soft: #242321;                    /* мягкая поверхность, чуть темнее панели */
  --danger: #e96c6c;                          /* опасное действие: светлый красный */
  --warning: #e8bd69;                         /* предупреждение: светлый жёлтый */
  --ui-accent: #74a9ff;                       /* акцент UI: светлый синий */
  --line: rgba(255, 255, 255, 0.12);          /* тонкая разделительная линия */
}

@media (max-width: 1023px) {
  :root {
    /* На узком экране шкала поднимается на ступень: расстояние до экрана
       меньше, а условия чтения хуже. */
    /* Цели касания. Раньше этот подъём жил только в
       ui-kit/workspace-template.css и был привязан к body.ui-workspace-template,
       поэтому вход, страница ошибки, личный кабинет и дашборд команды его не
       получали: тумблер темы там оставался 38px. */
    --workspace-control-height: 44px;
    --workspace-button-height: 44px;
    --fs-caption: 13px;
    --fs-body: 14px;
    --fs-body-lg: 15px;
    --fs-h3: 17px;
    --fs-h2: 19px;
    --fs-h1: 22px;
    /* Крупные заголовки на узком экране, наоборот, уменьшаются:
       иначе они съедают экран и переносятся по три строки. */
    --fs-title: 22px;
    --fs-display: 24px;
    --workspace-header-h: 60px;
    --workspace-shell-gap-top: 0px;
    /* Боковых полей на узком экране нет: рабочая область идёт от края до края,
       внутренний отступ содержимого даёт только сама панель раздела. */
    --workspace-shell-pad-x: 0px;
    --workspace-page-pad-mobile: 0px;
    --workspace-page-pad-x-mobile: 0px;
    --workspace-shell-pad-b: 12px;
    --workspace-shell-gap: 10px;
    --workspace-filter-pad: 9px;
    --workspace-filter-gap-bottom: 10px;
  }
}


/* ============================================================================
   Светлая тема. Включается кнопкой (ui-kit/theme-toggle.js), выбор хранится
   на устройстве; по умолчанию система остаётся тёмной. Переопределяются
   только токены — компоненты о теме не знают. Фон намеренно тёплый серый,
   а не белый, текст — тёмно-графитовый, а не чёрный: так меньше контрастный
   удар при долгой работе.
   ============================================================================ */
:root[data-theme="light"] {
  --bg-page: #d9d6cf;
  --bg-page-dark: #e9e7e2;
  --bg-shell: #f3f1ec;
  --bg-sidebar: #eeece6;
  --bg-panel: #faf9f6;
  --bg-panel-soft: #f1efea;
  --ok-surface-2: #eeece6;
  --ok-surface-3: #e3e0d8;
  --bg-control: #ffffff;
  --bg-control-hover: #f4f2ed;

  --text-main: #2a2823;
  --text-soft: #4c483f;
  --text-muted: #6d675d;
  --text-muted-control: #7a746a;
  --text-faint: #5d5753;  /* более тёмный для светлой темы, контраст 6.8:1 */

  --border-soft: rgba(32, 30, 26, 0.12);
  --border-mid: rgba(32, 30, 26, 0.2);

  --btn-blue: #2f6bd8;
  --btn-blue-soft: rgba(47, 107, 216, 0.12);

  --accent: #b64f27;
  --accent-soft: rgba(182, 79, 39, 0.14);
  --accent-border: rgba(182, 79, 39, 0.45);
  --accent-text: #b64f27;
  --err-text: #a4453a;
  --panel-border: var(--border-mid);
  --warn-border: #9a7327;
  --warn-bg: rgba(154, 115, 39, 0.12);
  --danger-text: #a4453a;      /* 5.71:1 на светлой панели */

  --ok: #5d7a45;
  --warn: #9a7327;
  --err: #a4453a;

  --workspace-tabstrip-bg: rgba(32, 30, 26, 0.06);
  --bg-table-head: #ece9e3;

  /* На светлой панели та же плёнка почти не видна: цвет берём заметнее, а
     текст темнее — измерено на этой же подсветке. */
  --dh-status-ok-bg: rgba(93, 122, 69, 0.20);
  --dh-status-warn-bg: rgba(154, 115, 39, 0.22);
  --dh-status-err-bg: rgba(164, 69, 58, 0.20);
  --dh-status-mute-bg: rgba(32, 30, 26, 0.07);
  --dh-status-ok-text: #3f5430;    /* 6.19:1 */
  --dh-status-warn-text: #6a4e14;  /* 5.68:1 */
  --dh-status-err-text: #8c3a30;   /* 5.39:1 */
  --bg-table-sticky: #faf9f6;
  --bg-table-sticky-alt: #f1efe9;
  --bg-table-total: #e6e3dc;
  --bg-table-group: #eae7e0;

  --surface-1: #fbfaf7;
  --surface-2: #f5f3ee;
  --surface-3: #eeebe4;
  --surface-header: #f0eee9;
  --page-backdrop:
    radial-gradient(circle at 18% 8%, rgba(200, 88, 45, 0.05), transparent 30%),
    linear-gradient(135deg, #e6e3dc 0%, #dcd8d0 40%, #d3cfc6 100%);
  --surface-active: #dde5f5;
  --surface-accent-btn: #dbe4f6;
  --muted: var(--text-muted);
  --soft: var(--text-soft);
  --schedule-time: #3f6146;
  --schedule-day: #6d675d;
  --neo-bg: #ffffff;
  --neo-bg-hover: #f0eee8;
  --neo-text: #2a2823;
  /* На светлом фоне тени из тёмной темы читаются как отрыв кнопки от подложки,
     а тёмный ховер делает подпись нечитаемой. Здесь кнопка остаётся на месте:
     тонкая линия отрыва, светлый ховер, вдавливание вместо свечения. */
  --btn-shadow: 0 1px 2px rgba(32, 30, 26, 0.07);
  --workspace-block-shadow: 0 10px 28px rgba(32, 30, 26, 0.10);
  --menu-active-shadow: 0 0 0 rgba(32, 30, 26, 0);
  --btn-accent-shadow: 0 1px 2px rgba(32, 30, 26, 0.07);
  --surface-hover: #f0eee8;
  --surface-hover-danger: #f7e7e3;
  --surface-hover-accent: #d8ebdf;
  --action-bg: #2f7a4d;
  --action-border: #276b42;
  --action-text: #ffffff;
  --btn-glow: 0 0 0 rgba(32, 30, 26, 0);
  --btn-glow-hover: 0 2px 6px rgba(32, 30, 26, 0.10);
  --neo-shadow: 0 1px 2px rgba(32, 30, 26, 0.08);
  --neo-shadow-active: inset 0 1px 2px rgba(32, 30, 26, 0.14);

  /* Статусные цвета текста в светлой теме: насыщенные тёмные оттенки
     для обеспечения контраста ≥4.5 к светлому фону (#faf9f6). */
  --status-p1-text: #a4453a;         /* тёмно-красный: контраст 6.2:1 */
  --status-p2-text: #8a6620;         /* тёмно-оранжевый: контраст 5.8:1 */
  --status-p3-text: #8b6f1f;         /* тёмно-жёлтый: контраст 5.1:1 */
  --status-p4-text: #2f6bd8;         /* тёмно-синий: контраст 6.5:1 */
  --status-p5-text: #6d675d;         /* тёмно-серый: контраст 4.6:1 */
  --status-pending-text: #2f6bd8;    /* тёмно-синий: контраст 6.5:1 */
  --status-working-text: #8a6620;    /* тёмно-оранжевый: контраст 4.98:1 */
  --status-partial-text: #8b6f1f;    /* тёмно-жёлтый: контраст 5.1:1 */
  --status-done-text: #5d7a45;       /* тёмно-зелёный: контраст 5.5:1 */

  /* Акценты графика в светлой теме: тёмные оттенки вместо пастельных. */
  --schedule-work-accent: #5d7a45;       /* вместо #79c58b */
  --schedule-training-accent: #2f6bd8;   /* вместо #6597cc */
  --schedule-off-accent: #6d675d;        /* вместо #a5abb2 */
  --schedule-noshow-accent: #a4453a;     /* вместо #ef7d73 */
  --schedule-sick-accent: #7a5c87;       /* вместо #a57cac */
  --schedule-vacation-accent: #8a6620;   /* вместо #d79f4d */

  --shadow-panel: 0 10px 28px rgba(32, 30, 26, 0.1);
  --shadow-shell: 0 18px 42px rgba(32, 30, 26, 0.12);

  /* Недостающие граничные и вспомогательные переменные для светлой темы. */
  --border: #c9c6bf;                          /* более светлая граница для светлой темы */
  --bg-input: #ffffff;                        /* белое поле ввода */
  --surface-soft: #f1efea;                    /* мягкая поверхность = --bg-panel-soft */
  --danger: #a4453a;                          /* опасное действие: тёмный красный */
  --warning: #8b6f1f;                         /* предупреждение: тёмный жёлтый */
  --ui-accent: #2f6bd8;                       /* акцент UI: тёмный синий */
  --line: rgba(32, 30, 26, 0.12);             /* тонкая разделительная линия */
}

/* Переопределения для таблицы типографии в светлой теме.
   Селекторы status-cell и priority-cell используют жёсткие светлые цвета (#c8c3bd),
   рассчитанные на тёмный фон, что даёт контраст 1.67:1 к светлому фону #faf9f6.
   Переопределяем на тёмные цвета, которые соответствуют переменным статусов. */
:root[data-theme="light"] .gas-mode-dept_head .label-print-status-cell {
  --label-status-text: var(--text-main);      /* используем тёмный текст вместо светлого */
}

:root[data-theme="light"] .gas-mode-dept_head .label-print-priority-cell {
  --label-priority-text: var(--text-main);    /* используем тёмный текст вместо светлого */
}

/* Переключатель темы — тумблер. Включённое положение = светлая тема. */
.ui-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: var(--workspace-control-height);
  padding: 4px 10px;
  color: var(--text-soft);
  font: inherit;
  font-size: var(--fs-caption);
  font-weight: 650;
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-control-radius);
  background: var(--bg-control);
  box-shadow: var(--btn-shadow);
  cursor: pointer;
}

.ui-theme-toggle:is(:hover, :focus-visible) {
  color: var(--text-main);
  border-color: var(--btn-blue);
  background: var(--bg-control);
  box-shadow: var(--btn-shadow);
  transform: none;
}

.ui-switch__track {
  position: relative;
  display: inline-block;
  flex: none;
  width: 34px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid var(--border-mid);
  background: var(--surface-3);
  transition: background 160ms ease, border-color 160ms ease;
}

.ui-switch__thumb {
  position: absolute;
  top: 50%;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--text-soft);
  transition: transform 160ms ease, background 160ms ease;
}

.ui-theme-toggle.is-on .ui-switch__track {
  border-color: rgba(115, 166, 255, 0.72);
  background: var(--btn-blue);
}

.ui-theme-toggle.is-on .ui-switch__thumb {
  transform: translate(16px, -50%);
  background: #ffffff;
}

.ui-switch__label {
  font-size: var(--fs-caption);
  color: var(--text-soft);
  min-width: 50px;
  text-align: center;
}

.ui-theme-toggle--floating {
  position: fixed;
  z-index: 40;
  top: 10px;
  right: 10px;
}

@media (max-width: 560px) {
  .ui-theme-toggle__text {
    display: none;
  }

  .ui-theme-toggle {
    min-width: 34px;
    justify-content: center;
    padding: 4px 8px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: var(--fs-h3);
  -webkit-text-size-adjust: 100%;
  color-scheme: dark;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100dvh;
  overflow-x: hidden;
  background: var(--page-backdrop);
  color: var(--text-main);
  font-family: var(--font-main);
  font-weight: 650;
  line-height: 1.42;
}

body::selection {
  background: rgba(200, 88, 45, 0.34);
}

a {
  color: inherit;
}

[hidden],
.hidden {
  display: none !important;
}

.wrap {
  width: 100%;
  max-width: var(--workspace-page-max);
  margin: 0 auto;
  padding: var(--workspace-page-pad) var(--workspace-page-pad) 32px;
}

.safe-bottom-space {
  padding-bottom: calc(32px + env(safe-area-inset-bottom));
}

.logo-card {
  width: min(100%, var(--workspace-page-max));
  margin: 0 auto 12px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.logo-box {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 52px;
}

.local-preview-logo,
.logo-box img,
.logo-fallback-inline svg {
  display: block;
  width: auto;
  max-width: 156px;
  max-height: 42px;
}

/* Поверхность панели. Обёртки оболочки (.employee-page-wrap,
   .employee-stats-page-wrap, .dept-head-page-wrap, .admin-card,
   .dept-head-card) здесь больше не перечисляются: они и так стояли в блоке
   ниже, который перебивал фон и тень, — правило конфликтовало само с собой.
   Рамку, радиус и цвет текста они получают в том же блоке ниже. */
.auth-gateway-card,
.employee-mobile-card,
.account-header,
.account-chart-wrap,
.picker-sheet,
.modal,
.schedule-modal-card,
.schedule-edit-sheet,
.secondary-action-card {
  color: var(--text-main);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
}

.card {
  color: var(--text-main);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  padding: 22px;
  margin-bottom: 18px;
}

.gas-mode-dept_head .dept-head-card > h2:first-child {
  font-size: var(--fs-h2);
  font-weight: 620;
  line-height: 1.2;
  letter-spacing: 0;
}

.gas-mode-staff_admin .wrap,
.gas-mode-import .wrap {
  max-width: 920px;
}

.gas-mode-staff_admin .card,
.gas-mode-import .card {
  padding: 18px;
}

.gas-mode-staff_admin .card + .card {
  margin-top: 14px;
}

.gas-mode-import .form-note,
.gas-mode-staff_admin .compact-links {
  margin-top: 8px;
}

.gas-mode-import .form-textarea-lg {
  min-height: 260px;
  resize: vertical;
}

.gas-mode-staff_admin .form-actions,
.gas-mode-import .form-actions,
.gas-mode-employee .form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.gas-mode-staff_admin .form-actions .btn-primary,
.gas-mode-import .form-actions .btn-primary,
.gas-mode-employee .form-actions .btn-primary {
  width: auto;
  min-width: 180px;
}

.employee-mobile-card,
.mobile-card,
.table-mobile-card,
.mobile-only,
.mobile-tab-menu-toggle {
  display: none;
}

.mobile-cards {
  display: none;
}

.top-status-dot,
.status-dot,
.brand-status-dot,
.app-status-dot,
.online-dot,
.indicator-dot,
.app-header__profile {
  display: none !important;
}

/* Поверхность оболочки: фон и тень отличаются от панели, остальное общее. */
.employee-page-wrap,
.employee-stats-page-wrap,
.dept-head-page-wrap,
.admin-card,
.dept-head-card,
.card.safe-bottom-space {
  color: var(--text-main);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008)),
    var(--bg-shell);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-shell);
}

/* The page wrapper owns the shared shell; the dashboard grid is layout only. */
.gas-mode-dept_head .dept-head-card {
  margin-bottom: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

h1,
h2,
h3,
h4,
.employee-plan-title,
.picker-sheet-title,
.account-header__name {
  margin: 0;
  color: var(--text-main);
  letter-spacing: -0.015em;
}

h1 { font-size: var(--fs-display); line-height: 1.12; }
h2 { font-size: var(--fs-title); line-height: 1.16; margin-bottom: 18px; }
h3 { font-size: var(--fs-h1); line-height: 1.18; margin: 18px 0 12px; }
h4 { font-size: var(--fs-h3); line-height: 1.2; margin: 14px 0 10px; }

p {
  margin: 0;
}

.muted,
.small,
label,
.employee-plan-subtitle,
.account-header__role,
.today-item-time,
.picker-sheet-subtitle {
  color: var(--text-muted);
}

.small {
  font-size: var(--fs-body);
  line-height: 1.45;
}

label,
.label,
.stat-title,
.period-banner-label {
  display: block;
  margin: 14px 0 7px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

input,
select,
textarea,
.employee-box,
.picker-trigger,
.picker-search-input,
.nav-date-input,
.date-picker-btn {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  color: var(--text-main);
  background: var(--bg-control);
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-panel-radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  font: inherit;
  outline: 0;
}

input::placeholder,
textarea::placeholder,
.picker-trigger-value.muted {
  color: var(--text-muted-control);
}

/* Флажки и переключатели сюда не входят: рамка в 3px вокруг квадрата 20px
   читается как выделение всего блока. У них — собственный аккуратный контур
   и только при переходе с клавиатуры. */
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus,
.picker-trigger:focus-visible,
.picker-search-input:focus {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-soft), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

input:is([type="checkbox"], [type="radio"]):focus {
  outline: none;
  box-shadow: none;
}

input:is([type="checkbox"], [type="radio"]):focus-visible {
  outline: 2px solid var(--accent-border);
  outline-offset: 2px;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
  filter: invert(0.82) sepia(0.18) saturate(1.2) hue-rotate(330deg);
  opacity: 0.82;
}

button,
.tab-btn,
.nav-bar-btn,
.entry-mode-btn,
.today-tab,
.picker-trigger,
.picker-item,
.secondary-action-link,
.link-btn,
.mini-link-btn,
.account-header__back,
.btn-primary {
  min-height: 52px;
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  border-radius: var(--workspace-shell-radius);
  border: 1px solid var(--border-mid);
  background:
    radial-gradient(circle at 100% 50%, rgba(79, 140, 255, 0.11), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015)),
    var(--neo-bg);
  color: var(--neo-text);
  box-shadow: var(--btn-shadow), var(--btn-glow);
  font: inherit;
  font-weight: 680;
  line-height: 1.15;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

button:hover:not(:disabled),
.tab-btn:hover:not(:disabled),
.nav-bar-btn:hover:not(:disabled),
.entry-mode-btn:hover:not(:disabled),
.today-tab:hover:not(:disabled),
.picker-trigger:hover:not(:disabled),
.picker-item:hover,
.secondary-action-link:hover,
.link-btn:hover,
.mini-link-btn:hover {
  background:
    radial-gradient(circle at 100% 50%, rgba(79, 140, 255, 0.15), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.026)),
    var(--neo-bg-hover);
  color: var(--neo-text);
  border-color: rgba(91, 151, 255, 0.42);
  box-shadow: var(--btn-glow-hover);
  transform: translateY(-1px);
}

button:active,
.tab-btn:active,
.nav-bar-btn:active,
.entry-mode-btn:active,
.today-tab:active,
.picker-trigger:active,
.picker-item:active,
.secondary-action-link:active,
.link-btn:active,
.mini-link-btn:active {
  transform: translateY(1px);
  box-shadow: var(--neo-shadow-active);
}

button:disabled,
.tab-btn:disabled,
.today-tab:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.tab-btn::after,
.nav-bar-btn::after,
.entry-mode-btn::after,
.today-tab::after,
.secondary-action-link::after,
.link-btn::after,
.mini-link-btn::after {
  content: none;
  display: none;
}

.tab-btn.active,
.tabs-scroll .tab-btn.active,
.tabs-centered .tab-btn.active,
.employee-mobile-tabs .tab-btn.active,
.auth-gateway-tabs .tab-btn.active,
.entry-mode-btn.active,
.today-tab.active,
.nav-bar-btn.primary {
  position: relative;
  background:
    linear-gradient(90deg, rgba(79, 140, 255, 0.28), rgba(79, 140, 255, 0.08) 42%, rgba(255, 255, 255, 0.025)),
    var(--surface-active);
  color: var(--text-main);
  border-color: rgba(115, 166, 255, 0.70);
  box-shadow:
    inset 3px 0 0 rgba(115, 166, 255, 0.92),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    var(--menu-active-shadow);
}

#submitBtn,
#defectBtn,
.btn-primary {
  background:
    linear-gradient(90deg, rgba(79, 140, 255, 0.20), rgba(79, 140, 255, 0.06)),
    var(--surface-accent-btn);
  color: var(--text-main);
  border-color: rgba(91, 151, 255, 0.52);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24), 0 0 14px rgba(79, 140, 255, 0.10);
}

.tab-btn.active::after,
.entry-mode-btn.active::after,
.today-tab.active::after,
.nav-bar-btn.primary::after,
#submitBtn::after,
#defectBtn::after,
.btn-primary::after {
  content: none;
  display: none;
}

:focus-visible {
  outline: 2px solid rgba(255, 190, 92, 0.86);
  outline-offset: 3px;
}

.tabs,
.tabs-scroll,
.tabs-centered,
.employee-mobile-tabs,
.auth-gateway-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 16px;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.nav-bar,
#admNavBar,
.search-wrap,
.filter-panel {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px;
  margin-bottom: 18px;
  background: var(--surface-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.dh-production-employee-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.dh-production-employee-card {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 8px 10px;
  color: var(--text-main);
  text-align: left;
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-control-radius);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008)),
    var(--bg-panel-soft);
  cursor: pointer;
}

.dh-production-employee-card:hover {
  border-color: rgba(115, 166, 255, 0.46);
  background: var(--neo-bg-hover);
}

.dh-production-employee-card:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.dh-production-employee-main,
.dh-production-employee-result {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.dh-production-employee-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-body);
}

.dh-production-employee-card small {
  color: var(--text-muted);
  font-size: var(--fs-caption);
  line-height: 1.2;
}

.dh-production-employee-result {
  justify-items: end;
}

.dh-production-employee-result strong {
  font-size: var(--fs-h3);
}

.dh-production-employee-open {
  color: var(--text-muted);
  font-size: var(--fs-title);
  line-height: 1;
  text-align: right;
}

.dh-production-employee-empty {
  min-height: 80px;
  margin-top: 10px;
}

.dh-employee-metrics-sheet {
  width: min(560px, calc(100vw - 24px));
}

.dh-employee-metrics-details {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
}

.dh-employee-metrics-item {
  min-height: 92px;
}

.dh-employee-metrics-item .ui-metric__value {
  font-size: var(--fs-h1);
  line-height: 1.15;
}

.stats-grid,
.summary-grid,
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.stat-box,
.period-banner {
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
    var(--bg-panel-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.stat-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 34px;
  padding: 4px 14px;
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  font-size: var(--fs-title);
  font-weight: 850;
}

.period-banner {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: #f4d9a7;
}

.search-input,
#employeeSearch,
#admEmployeeSearch,
#dhEmployeeSearch {
  background: var(--bg-control);
  border-color: var(--border-soft);
}

table {
  width: 100%;
  border-collapse: collapse;
}

.table-scroll,
.table-wrap,
.responsive-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}

.data-table {
  min-width: 560px;
}

th {
  padding: 11px 12px;
  color: var(--text-muted);
  background: var(--bg-table-head);
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-caption);
  font-weight: 850;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Шапка держится сверху при прокрутке: в журналах на сотни строк названия
   столбцов уезжали за экран на второй же строке. Липнуть она может только к
   своему контексту прокрутки, поэтому работает там, где обёртка не создаёт
   своего скролла (см. #dhEntries .table-wrap). Вертикальную прокрутку самой
   обёртке не даём: вторая полоса поверх страничной ломает колесо мыши. */
.table-wrap thead th,
.responsive-table-wrap thead th,
.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

td {
  padding: 12px;
  color: var(--text-soft);
  border-bottom: 1px solid var(--border-soft);
}

tr:hover td {
  background: var(--surface-hover);
}

.admin-record-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

/* Тулбар админа кладёт поиск в строку с кнопками — собственный ритм.
   Специфичность повышена, чтобы канонический блок из workspace-template.css
   (загружается позже) не вернул ему вертикальный отступ. */
body.ui-workspace-template .admin-record-toolbar .search-wrap,
.admin-record-toolbar .search-wrap {
  flex: 1 1 320px;
  margin: 0;
}

.admin-record-selection {
  display: flex;
  gap: 10px;
  align-items: center;
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: var(--fs-body);
}

.admin-record-selection button {
  min-height: 38px;
  padding: 8px 12px;
}

.admin-record-table {
  min-width: 980px;
}

.admin-record-check-cell {
  width: 42px;
  text-align: center;
}

.admin-record-check-cell input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--btn-blue);
}

.admin-record-action-cell {
  width: 108px;
  text-align: right;
}

.admin-record-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.admin-record-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.admin-record-field-wide {
  grid-column: 1 / -1;
}

.admin-record-field-label {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  text-transform: uppercase;
}

.admin-record-field-label input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--btn-blue);
}

.admin-record-field > input,
.admin-record-field > select {
  width: 100%;
}

.admin-record-field > input:disabled,
.admin-record-field > select:disabled {
  opacity: 0.42;
}

.admin-salary-workspace {
  min-width: 0;
}

.admin-salary-view {
  min-width: 0;
}

.admin-salary-toolbar {
  display: flex;
  gap: 12px;
  align-items: end;
  margin-bottom: 16px;
  padding: 14px;
  background: rgba(10, 10, 9, 0.30);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}

.admin-control-field {
  display: grid;
  flex: 1 1 260px;
  gap: 6px;
  min-width: 0;
  margin: 0;
}

.admin-control-field > span {
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admin-control-field input,
.admin-control-field select {
  width: 100%;
}

.admin-salary-toolbar .btn-primary {
  flex: 0 0 auto;
}

.admin-salary-table {
  min-width: 1180px;
}

.admin-salary-table th,
.admin-salary-table td {
  white-space: nowrap;
}

.admin-salary-table td:not(:first-child) {
  text-align: right;
}

.admin-salary-table .salary-pay-cell {
  color: #cfe4ff;
}

.admin-salary-table .salary-total-cell {
  color: #bfe8c8;
  font-weight: 750;
}

.compact-btn {
  min-height: 32px;
  padding: 5px 9px;
  font-size: var(--fs-caption);
}

.admin-settings-form {
  padding: 16px;
  background: rgba(10, 10, 9, 0.30);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}

.admin-settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.admin-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}

.admin-scores-workspace,
.admin-scores-view {
  min-width: 0;
}

.admin-scores-table td:first-child {
  width: 100%;
}

.admin-scores-table th:not(:first-child),
.admin-scores-table td:not(:first-child) {
  white-space: nowrap;
}

.admin-score-position-field {
  grid-column: span 2;
}

.admin-score-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 16px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}

.admin-score-flags label {
  display: flex;
  gap: 9px;
  align-items: center;
  min-height: 36px;
  color: var(--text-main);
}

.admin-score-flags input,
.admin-score-checkbox-field input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.admin-score-recalc-grid {
  align-items: end;
}

.admin-score-checkbox-field {
  display: flex;
  gap: 9px;
  align-items: center;
  min-height: 36px;
  padding: 8px 10px;
  color: var(--text-main);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}

.admin-score-recalc-result {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 14px;
  padding: 14px;
  color: var(--text-muted);
  background: rgba(72, 143, 91, 0.10);
  border: 1px solid rgba(92, 177, 114, 0.30);
  border-radius: var(--radius-md);
}

.admin-score-recalc-result strong {
  width: 100%;
  color: var(--text-main);
}

.empty-state {
  padding: 28px 18px;
  color: var(--text-muted);
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius-md);
}

.empty-state.error {
  color: #efb4ad;
  border-color: rgba(203, 93, 82, 0.35);
}

@media (max-width: 768px) {
  .admin-record-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-record-selection {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .admin-record-selection > span {
    grid-column: 1 / -1;
  }

  .admin-record-selection button {
    width: 100%;
  }

  .admin-record-form-grid {
    grid-template-columns: 1fr;
  }

  .admin-record-field-wide {
    grid-column: auto;
  }

  .admin-settings-grid {
    grid-template-columns: 1fr;
  }

  .admin-score-position-field {
    grid-column: auto;
  }

  .admin-score-form-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .admin-score-form-actions button {
    width: 100%;
  }

  .admin-scores-table {
    min-width: 680px;
  }

  .admin-salary-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-salary-toolbar .admin-control-field {
    flex: 0 0 auto;
  }

  .admin-salary-toolbar .btn-primary,
  .admin-settings-actions .btn-primary {
    width: 100%;
  }

  .admin-salary-table thead {
    display: none;
  }

  .admin-salary-table,
  .admin-salary-table tbody,
  .admin-salary-table tr,
  .admin-salary-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .admin-salary-table tbody > tr {
    padding: 12px;
    border-bottom: 1px solid var(--border-soft);
  }

  .admin-salary-table tbody > tr > td {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 7px 0;
    text-align: right;
    border: 0;
    white-space: normal;
  }

  .admin-salary-table td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: var(--fs-caption);
    text-align: left;
  }

  .admin-salary-table td:first-child {
    margin-bottom: 4px;
    font-size: var(--fs-body-lg);
  }

  .admin-salary-table td:first-child::before {
    display: none;
  }
}
/* Production admin: unified data workspace and MySklad queue. */
.gas-mode-admin .admin-data-workspace {
  min-width: 0;
  container-type: inline-size;
  container-name: admin-data-workspace;
}

.gas-mode-admin .admin-data-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  margin: 0 0 12px;
  padding: 5px;
  overflow: hidden;
  background: var(--workspace-tabstrip-bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-panel-radius);
}

.gas-mode-admin .admin-data-tabs .tab-btn {
  min-width: 0;
  min-height: var(--workspace-button-height);
  padding: 7px 10px;
  justify-content: flex-start;
  color: var(--text-muted);
  border-color: var(--border-mid);
  border-radius: var(--workspace-control-radius);
  background:
    radial-gradient(circle at 100% 50%, rgba(79, 140, 255, 0.07), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)),
    var(--neo-bg);
  box-shadow: none;
  font-size: var(--fs-caption);
  font-weight: 650;
  line-height: 1.15;
  text-align: left;
}

.gas-mode-admin .admin-data-tabs .tab-btn.active {
  color: var(--text-main);
  border-color: rgba(115, 166, 255, 0.7);
  background:
    linear-gradient(90deg, rgba(79, 140, 255, 0.28), rgba(79, 140, 255, 0.08) 44%, rgba(255, 255, 255, 0.025)),
    var(--surface-active);
  box-shadow:
    inset 3px 0 0 rgba(115, 166, 255, 0.92),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.gas-mode-admin #admNavBar.admin-data-filter {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(190px, 1fr) minmax(160px, auto);
  gap: 10px;
  align-items: end;
  padding: 10px;
  margin-bottom: 14px;
}

/* Канонический блок периода занимает всю ширину фильтра: внутри у него
   собственная строка из пресетов, двух полей и кнопки. */
.gas-mode-admin #admNavBar.admin-data-filter > .ui-date-range {
  grid-column: 1 / -1;
  margin: 0;
}

.gas-mode-admin .admin-filter-field {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.gas-mode-admin .admin-filter-field select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
}

.gas-mode-admin #admNavBar .admin-filter-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(96px, 1fr);
  gap: 8px;
  min-width: 0;
}

.gas-mode-admin #admNavBar .admin-filter-actions .nav-bar-btn {
  width: 100%;
  min-width: 0;
  white-space: nowrap;
}

.gas-mode-admin #admNavBar.admin-data-filter :is(
  .nav-date-input,
  .date-picker-btn,
  .admin-filter-field select,
  .admin-filter-actions .nav-bar-btn
) {
  height: 44px;
  min-height: 44px;
}

.gas-mode-admin .admin-filter-actions {
  display: flex;
  gap: 8px;
}

.gas-mode-admin .admin-filter-actions .nav-bar-btn {
  min-height: 44px;
  padding: 8px 14px;
  justify-content: center;
  white-space: nowrap;
}

.gas-mode-admin .admin-data-view {
  min-width: 0;
  min-height: 320px;
}

:where(.admin-warehouse-head, .admin-warehouse-bulk) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.admin-warehouse-head {
  margin-bottom: 12px;
}

.admin-warehouse-head :where(h2, p) {
  margin: 0;
}

.admin-warehouse-head p {
  margin-top: 4px;
}

.admin-warehouse-count,
.admin-warehouse-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  color: #f1c39c;
  background: rgba(183, 90, 75, 0.13);
  border: 1px solid rgba(211, 115, 78, 0.34);
  border-radius: var(--workspace-panel-radius);
  font-size: var(--fs-caption);
  font-weight: 650;
}

.admin-warehouse-bulk {
  justify-content: flex-start;
  padding: 10px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}

.admin-warehouse-select-all {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
}

.admin-warehouse-bulk #admWarehouseSelectedCount {
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.admin-warehouse-bulk .btn-primary,
.admin-warehouse-table .warehouse-post-btn {
  min-height: 44px;
  justify-content: center;
}

.admin-warehouse-empty {
  padding: 28px 16px;
  color: var(--text-muted);
  text-align: center;
  border: 1px dashed var(--border-mid);
  border-radius: var(--radius-md);
}

.admin-warehouse-table th:first-child,
.admin-warehouse-table td:first-child {
  width: 46px;
  text-align: center;
}

.admin-warehouse-table td input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Production employee directory: compact toolbar and responsive tiles. */
.gas-mode-admin .employee-directory-toolbar,
.gas-mode-dept_head .employee-directory-toolbar {
  gap: 24px;
  padding: 10px;
  background: var(--surface-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}

.gas-mode-admin .employee-directory-search,
.gas-mode-dept_head .employee-directory-search {
  min-width: 0;
  flex: 1 1 420px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 24px;
  border-right: 1px solid var(--border-soft);
}

.gas-mode-admin .employee-directory-search .search-input,
.gas-mode-dept_head .employee-directory-search .search-input {
  min-width: 0;
  flex: 1 1 auto;
}

.gas-mode-admin .employee-directory-add,
.gas-mode-dept_head .dept-head-employee-add {
  flex: 0 0 auto;
  min-height: 44px;
  justify-content: center;
}

.employee-inactive-filter {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  background: var(--bg-control);
  font-size: var(--fs-caption);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.employee-inactive-filter input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--btn-blue);
}

.gas-mode-admin .employee-directory-grid.compact-links,
.gas-mode-dept_head .employee-directory-grid.compact-links {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px;
}

.gas-mode-admin .employee-directory-grid .employee-link-card,
.gas-mode-dept_head .employee-directory-grid .employee-link-card {
  min-width: 0;
  height: 100%;
  grid-template-rows: auto 1fr;
}

.gas-mode-admin .employee-directory-grid .employee-link-head,
.gas-mode-dept_head .employee-directory-grid .employee-link-head {
  min-width: 0;
  flex-direction: column;
}

.gas-mode-admin .employee-directory-grid .employee-link-badges,
.gas-mode-dept_head .employee-directory-grid .employee-link-badges {
  width: 100%;
  justify-content: flex-start;
}

.gas-mode-admin .employee-directory-grid .employee-link-actions,
.gas-mode-dept_head .employee-directory-grid .employee-link-actions {
  min-width: 0;
  align-content: end;
  align-items: end;
}

.gas-mode-admin .employee-directory-grid .employee-link-actions > *,
.gas-mode-dept_head .employee-directory-grid .employee-link-actions > * {
  min-width: 0;
  min-height: 44px;
  flex: 1 1 132px;
  justify-content: center;
  white-space: normal;
  text-align: center;
}

@media (max-width: 1120px) {
  .gas-mode-admin #admNavBar.admin-data-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gas-mode-admin .employee-directory-grid.compact-links,
  .gas-mode-dept_head .employee-directory-grid.compact-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .gas-mode-admin .admin-data-tabs {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .gas-mode-admin .admin-data-tabs .tab-btn {
    flex: 0 0 auto;
    min-width: 116px;
  }

  .gas-mode-admin #admNavBar.admin-data-filter {
    grid-template-columns: 1fr;
  }

  .gas-mode-admin .admin-filter-actions {
    width: 100%;
  }

  .gas-mode-admin .admin-filter-actions .nav-bar-btn {
    width: 100%;
    flex: 1 1 0;
  }

  .admin-warehouse-bulk #admWarehouseSelectedCount {
    width: 100%;
    margin-left: 0;
  }

  .admin-warehouse-bulk .btn-primary {
    width: 100%;
  }

  .admin-warehouse-table-wrap {
    overflow: visible;
    border: 0;
  }

  :where(.admin-warehouse-table, .admin-warehouse-table tbody, .admin-warehouse-table tr, .admin-warehouse-table td) {
    display: block;
    width: 100%;
  }

  .admin-warehouse-table thead {
    display: none;
  }

  .admin-warehouse-table tr {
    margin-bottom: 10px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
  }

  .admin-warehouse-table td,
  .admin-warehouse-table td:first-child {
    width: 100%;
    min-height: 34px;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    text-align: left;
    border: 0;
  }

  .admin-warehouse-table td:nth-child(1)::before { content: "Выбор"; }
  .admin-warehouse-table td:nth-child(2)::before { content: "№"; }
  .admin-warehouse-table td:nth-child(3)::before { content: "Дата"; }
  .admin-warehouse-table td:nth-child(4)::before { content: "Сотрудник"; }
  .admin-warehouse-table td:nth-child(5)::before { content: "Товар"; }
  .admin-warehouse-table td:nth-child(6)::before { content: "Кол-во"; }
  .admin-warehouse-table td:nth-child(7)::before { content: "Статус"; }
  .admin-warehouse-table td:nth-child(8)::before { content: "Действие"; }

  .admin-warehouse-table td::before {
    color: var(--text-muted);
    font-size: var(--fs-caption);
    font-weight: 650;
    text-transform: uppercase;
  }

  .admin-warehouse-table .warehouse-post-btn {
    width: 100%;
  }

  .gas-mode-admin :where(.employee-directory-toolbar, .employee-directory-search) {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .gas-mode-admin .employee-directory-toolbar {
    gap: 12px;
  }

  .gas-mode-admin .employee-directory-search {
    flex-basis: auto;
    gap: 6px;
    padding-right: 0;
    padding-bottom: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--border-soft);
  }

  .gas-mode-admin .employee-directory-add {
    width: 100%;
  }

  .gas-mode-admin .employee-directory-grid.compact-links,
  .gas-mode-dept_head .employee-directory-grid.compact-links {
    grid-template-columns: 1fr;
  }
}

.msg {
  display: none;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  font-weight: 750;
}

.msg.ok {
  color: #dfe8d2;
  background: rgba(143, 159, 120, 0.16);
  border-color: rgba(143, 159, 120, 0.32);
}

.msg.err {
  color: #f1cbc5;
  background: rgba(183, 90, 75, 0.16);
  border-color: rgba(183, 90, 75, 0.32);
}

.auth-gateway-card {
  width: min(100%, 430px);
  margin: 70px auto 0;
  padding: 24px;
}

body.gas-mode-login_gateway .wrap {
  display: grid;
  min-height: 100dvh;
  max-width: none;
  padding: clamp(16px, 4vw, 42px);
}

body.gas-mode-login_gateway .wrap > .logo-card {
  display: none;
}

.login-gateway-shell {
  width: 100%;
  min-height: calc(100dvh - clamp(32px, 8vw, 84px));
  display: grid;
  place-items: center;
}

.login-gateway-card {
  width: min(100%, 440px);
  padding: 0;
  overflow: hidden;
  color: var(--text-main);
  font-weight: 500;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    var(--bg-panel);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.login-gateway-brand {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 26px;
  color: var(--text-soft);
  font-size: var(--fs-h2);
  font-weight: 600;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(12, 12, 11, 0.18);
}

.login-gateway-brand .logo-box {
  width: 100%;
  min-height: 48px;
  justify-content: center;
}

.login-gateway-brand .local-preview-logo,
.login-gateway-brand .logo-box img,
.login-gateway-brand .logo-fallback-inline svg {
  max-width: min(190px, 72%);
  max-height: 52px;
}

.login-gateway-context {
  padding: 20px 26px 0;
  text-align: center;
}

.login-gateway-context h1 {
  margin: 0 0 8px;
  color: var(--text-main);
  font-size: var(--fs-h1);
  line-height: 1.2;
}

.login-gateway-context p,
.login-gateway-privacy {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  line-height: 1.5;
}

.login-gateway-privacy {
  margin-top: 12px;
  text-align: center;
}

.login-gateway-form {
  padding: 22px 26px 26px;
}

.login-remember-device {
  display: flex;
  align-items: center;
  gap: 9px;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.025);
  cursor: pointer;
}

.login-remember-device:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
}

.login-remember-device input {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin: 0;
  accent-color: var(--btn-blue);
}

.login-remember-device span {
  display: grid;
  gap: 1px;
}

.login-remember-device strong {
  color: var(--text-main);
  font-size: var(--fs-caption);
  font-weight: 600;
}

.login-remember-device small {
  color: var(--text-muted);
  font-size: var(--fs-caption);
  line-height: 1.3;
}

/* Выделения вокруг всего блока нет ни при клике, ни с клавиатуры: клавиатурный
   фокус показывает сам чекбокс своим контуром, второе кольцо тут лишнее. */
.login-remember-device:has(input:focus-visible) {
  border-color: var(--border-mid);
}

.login-gateway-field {
  position: relative;
  margin: 0;
}

/* Кнопка показа кода и подсказка раскладки лежат внутри поля справа. */
.login-gateway-field .login-gateway-input {
  padding-right: 96px;
}

.login-code-reveal {
  position: absolute;
  top: 50%;
  right: 8px;
  display: inline-flex;
  /* Единственная кнопка на экране входа: цель касания не меньше 44px.
     Поле держит padding-right: 96px, поэтому 8 + 44 текст не задевает. */
  min-height: 44px;
  width: 44px;
  padding: 0;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: var(--fs-h3);
}

.login-code-reveal:hover:not(:disabled) {
  color: var(--text-main);
  transform: translateY(-50%);
}

.login-code-reveal:active {
  transform: translateY(-50%);
}

.login-layout-hint {
  position: absolute;
  top: 50%;
  right: 50px;
  padding: 3px 7px;
  transform: translateY(-50%);
  border: 1px solid var(--border-mid);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  pointer-events: none;
}

.login-layout-hint.is-warning {
  border-color: rgba(222, 151, 75, 0.62);
  color: var(--warning);
}

.login-gateway-input {
  width: 100%;
  min-height: 52px;
  padding: 0 15px;
  color: var(--text-main);
  caret-color: var(--btn-blue);
  font: inherit;
  font-size: var(--fs-h3);
  font-weight: 500;
  background: rgba(14, 14, 13, 0.26);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.login-gateway-input::placeholder {
  color: var(--text-muted-control);
}

.login-gateway-input:hover {
  border-color: rgba(255, 255, 255, 0.18);
}

.login-gateway-input:focus-visible {
  border-color: rgba(79, 140, 255, 0.72);
  background: rgba(14, 14, 13, 0.36);
  box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.13);
}

.login-gateway-input:disabled {
  opacity: 0.72;
}

.login-gateway-msg {
  display: none;
  margin: 12px 0 0;
  padding: 10px 12px;
  min-height: 0;
  font-size: var(--fs-body);
  line-height: 1.4;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}

.login-gateway-msg.is-visible {
  display: block;
}

.login-gateway-msg.is-error {
  color: #f1cbc5;
  background: rgba(183, 90, 75, 0.12);
  border-color: rgba(183, 90, 75, 0.28);
}

.login-gateway-msg.is-ok {
  color: #d7e2ca;
  background: rgba(143, 159, 120, 0.12);
  border-color: rgba(143, 159, 120, 0.28);
}

.login-gateway-submit {
  width: 100%;
  /* 42px не дотягивали двух пикселей до порога цели касания. */
  min-height: 44px;
  margin-top: 14px;
  padding: 8px 16px;
  justify-content: center;
  gap: 9px;
  color: #f4f6fa;
  font-size: var(--fs-body-lg);
  font-weight: 600;
  background: #334765;
  border-color: rgba(79, 140, 255, 0.58);
  border-radius: var(--radius-md);
  box-shadow: var(--btn-shadow);
}

.login-gateway-submit:hover:not(:disabled) {
  background: #3b5275;
  border-color: rgba(99, 154, 255, 0.78);
  transform: translateY(-1px);
}

.login-gateway-submit:focus-visible {
  outline: 3px solid rgba(79, 140, 255, 0.24);
  outline-offset: 2px;
}

.login-gateway-submit:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}

.login-gateway-qr,
.login-gateway-photo {
  width: 100%;
  min-height: 46px;
  margin-top: 10px;
  justify-content: center;
  color: var(--text-soft);
  font-size: var(--fs-body-lg);
  font-weight: 500;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md);
  box-shadow: none;
}

.login-gateway-qr-actions,
.qr-scanner-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.login-gateway-qr-actions .login-gateway-qr,
.qr-scanner-actions .login-gateway-qr {
  margin-top: 10px;
}

.login-gateway-qr:hover,
.login-gateway-handoff:hover,
.login-gateway-photo:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.login-gateway-qr:focus-visible,
.login-gateway-photo:focus-visible,
.qr-scanner-close:focus-visible {
  outline: 3px solid rgba(79, 140, 255, 0.24);
  outline-offset: 2px;
}

.qr-scanner-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
}

.qr-scanner-modal[hidden] {
  display: none;
}

/* Вход с другого устройства: панель с QR на странице входа. */
/* Другие способы входа спрятаны за ссылкой: приём редкий, а крупные кнопки
   спорили с основным действием — вводом кода. */
.login-gateway-more {
  /* Отступ снят: он перешёл внутрь ссылки, которой подняли цель касания. */
  margin: 0;
  text-align: center;
}

/* Это текстовая ссылка, а не кнопка. Базовое правило `button` даёт
   min-height 52px, рамку, фон и свечение снизу — всё это здесь снимается,
   включая :hover, который иначе возвращает кнопочный фон обратно. */
.login-gateway-more-link,
.login-gateway-more-link:hover:not(:disabled) {
  /* inline-flex вместо inline: внешне это по-прежнему подчёркнутый текст без
     фона и рамки, но высота даёт цель касания 44px вместо 21px. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  height: auto;
  padding: 0 12px;
  gap: 0;
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  transition: color 140ms ease, text-decoration-color 140ms ease;
}

.login-gateway-more-link {
  color: var(--text-muted);
  text-decoration-color: rgba(255, 255, 255, 0.28);
}

.login-gateway-more-link:hover:not(:disabled),
.login-gateway-more-link:focus-visible {
  color: var(--text-main);
  text-decoration-color: currentColor;
}

.login-gateway-more-link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Заставка входа: перекрывает страницу, пока кабинет грузится фоном. */
.login-splash {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(18, 18, 17, 0.86);
  backdrop-filter: blur(8px);
  opacity: 0;
  animation: login-splash-in 180ms ease forwards;
}

.login-splash[hidden] {
  display: none;
}

.login-splash-body {
  display: grid;
  justify-items: center;
  gap: 18px;
  width: min(100%, 320px);
  text-align: center;
}

/* Кольцо крутится отдельным слоем: сам знак обязан остаться неподвижным,
   иначе он переворачивается вместе с вращением. */
.login-splash-mark {
  position: relative;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
}

.login-splash-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.10);
  border-top-color: var(--btn-blue, #4f8cff);
  animation: login-splash-spin 900ms linear infinite;
}

.login-splash-mark img {
  position: relative;
  width: 40px;
  height: 40px;
  animation: login-splash-pulse 1600ms ease-in-out infinite;
}

.login-splash-text {
  margin: 0;
  color: var(--text-main);
  font-size: var(--fs-body-lg);
  font-weight: 660;
}

.login-splash-hint {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.login-splash-bar {
  width: 100%;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.login-splash-bar span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--btn-blue, #4f8cff), transparent);
  animation: login-splash-slide 1200ms ease-in-out infinite;
}

@keyframes login-splash-in {
  to { opacity: 1; }
}

@keyframes login-splash-spin {
  to { transform: rotate(360deg); }
}

@keyframes login-splash-pulse {
  0%, 100% { opacity: 0.72; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.04); }
}

@keyframes login-splash-slide {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(360%); }
}

/* Движение отключено в системе — заставка остаётся, но замирает. */
@media (prefers-reduced-motion: reduce) {
  .login-splash,
  .login-splash-mark::before,
  .login-splash-mark img,
  .login-splash-bar span {
    animation: none;
  }

  .login-splash {
    opacity: 1;
  }
}

.login-methods-list {
  display: grid;
  gap: 10px;
}

/* Способы входа равноправны: одна и та же карточка на оба варианта. Раньше
   «Войти с другого устройства» брала вид основной кнопки (свои правила были
   только у QR-кнопки), и выбор выглядел навязанным. */
.login-methods-list .login-method-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  margin: 0;
  padding: 12px 14px;
  text-align: left;
  color: var(--text-main);
  font-size: var(--fs-body);
  font-weight: 500;
  background: var(--bg-control);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md);
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.login-methods-list .login-method-card:hover {
  background: var(--bg-control-hover);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.login-methods-list .login-method-card:focus-visible {
  outline: 3px solid var(--accent-soft);
  outline-offset: 2px;
}

.login-method-card__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
}

.login-method-card__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.login-method-card__title {
  font-weight: 600;
  line-height: 1.25;
}

.login-method-card__hint {
  color: var(--text-soft);
  font-size: var(--fs-caption);
  line-height: 1.3;
}

.qr-login-panel {
  margin-top: 16px;
  padding: 18px;
  text-align: center;
  background: var(--bg-panel);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg);
}

.qr-login-panel[hidden] {
  display: none;
}

.qr-login-panel-title {
  margin: 0 0 6px;
  font-size: var(--fs-h3);
}

.qr-login-panel-hint {
  margin: 0 0 14px;
  color: var(--text-muted);
  font-size: var(--fs-body);
}

.qr-login-figure {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 240px;
  margin-bottom: 12px;
}

.qr-login-image {
  width: min(100%, 240px);
  height: auto;
  border-radius: var(--radius-md);
}

.qr-login-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 10px;
  align-content: center;
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.72);
  border-radius: var(--radius-md);
}

.qr-login-overlay[hidden] {
  display: none;
}

.qr-login-challenge {
  margin: 0 0 8px;
  font-size: var(--fs-body-lg);
}

.qr-login-challenge strong {
  font-size: var(--fs-display);
  letter-spacing: 0.08em;
}

.qr-login-status {
  margin: 0 0 12px;
  color: var(--text-muted);
  font-size: var(--fs-body);
}

.qr-login-status.is-error {
  color: var(--danger);
}

/* Экран подтверждения на телефоне. */
.qr-confirm-device {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
}

.qr-confirm-device > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--fs-body);
}

.qr-confirm-device dt {
  color: var(--text-muted);
}

.qr-confirm-device dd {
  margin: 0;
  text-align: right;
  word-break: break-word;
}

.qr-confirm-prompt {
  margin: 0 0 12px;
  font-size: var(--fs-body-lg);
}

.qr-confirm-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.qr-confirm-option {
  font-size: var(--fs-title);
  letter-spacing: 0.06em;
}

.qr-scanner-sheet {
  width: min(100%, 440px);
  padding: 18px;
  background: var(--bg-panel);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-shell);
}

.qr-scanner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.qr-scanner-header h2 {
  margin: 0;
  font-size: var(--fs-h2);
  line-height: 1.25;
  font-weight: 600;
}

.qr-scanner-close {
  flex: 0 0 38px;
  width: 38px;
  min-height: var(--workspace-control-height);
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  font-size: var(--fs-display);
  line-height: 1;
  font-weight: 400;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.qr-scanner-live[hidden] {
  display: none;
}

.qr-scanner-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: #10100f;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}

.qr-scanner-viewport video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.qr-scanner-frame {
  position: absolute;
  inset: 18%;
  border: 2px solid rgba(79, 140, 255, 0.76);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.20);
  pointer-events: none;
}

.qr-scanner-frame::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  top: 8px;
  height: 2px;
  border-radius: var(--workspace-control-radius);
  background: #6ea3ff;
  box-shadow: 0 0 10px rgba(79, 140, 255, 0.9);
  animation: qrScanLine 1.8s ease-in-out infinite alternate;
}

.qr-scanner-modal.is-processing .qr-scanner-frame {
  border-color: rgba(72, 188, 121, 0.92);
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.24), 0 0 22px rgba(72, 188, 121, 0.28);
  animation: qrDetectedPulse 0.75s ease-in-out infinite alternate;
}

.qr-scanner-modal.is-processing .qr-scanner-frame::after {
  top: 50%;
  background: #48bc79;
  box-shadow: 0 0 12px rgba(72, 188, 121, 0.9);
  animation: none;
}

.qr-scanner-status {
  margin: 12px 2px 0;
  color: var(--text-muted);
  font-size: var(--fs-body);
  line-height: 1.45;
  font-weight: 500;
}

.qr-scanner-status.is-error {
  color: #f1cbc5;
}

@media (max-width: 430px) {
  .login-gateway-qr-actions,
  .qr-scanner-actions {
    grid-template-columns: 1fr;
  }

  .login-gateway-qr-actions .login-gateway-qr + .login-gateway-qr,
  .qr-scanner-actions .login-gateway-qr + .login-gateway-qr {
    margin-top: 0;
  }
}

.qr-scanner-status.is-processing {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text-main);
}

.qr-scanner-status.is-processing::before {
  content: '';
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: #6ea3ff;
  border-radius: 50%;
  animation: qrProcessingSpin 0.8s linear infinite;
}

@keyframes qrScanLine {
  from { transform: translateY(0); }
  to { transform: translateY(calc(100% + 164px)); }
}

@keyframes qrProcessingSpin {
  to { transform: rotate(360deg); }
}

@keyframes qrDetectedPulse {
  from { opacity: 0.78; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .qr-scanner-frame::after,
  .qr-scanner-modal.is-processing .qr-scanner-frame,
  .qr-scanner-status.is-processing::before {
    animation: none;
  }
}

/* Production dept-head employees and navigation. */
.gas-mode-dept_head .dept-head-nav-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.gas-mode-dept_head .dept-head-nav-actions .secondary-action-card {
  grid-template-columns: minmax(0, 1fr) auto;
  height: 100%;
}

.gas-mode-dept_head .dept-head-nav-actions .secondary-action-link {
  min-height: 44px;
}

.gas-mode-dept_head .dept-head-employees-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.gas-mode-dept_head .dept-head-employees-title {
  color: var(--text-main);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.2;
}

.gas-mode-dept_head .dept-head-employees-subtitle {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: var(--fs-body);
  line-height: 1.4;
}

.gas-mode-dept_head .dept-head-employee-toolbar {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-bottom: 14px;
}

.gas-mode-dept_head .dept-head-employee-search {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
  flex: 1 1 420px;
}

.gas-mode-dept_head .dept-head-employee-search .search-input {
  min-width: 0;
  margin: 0;
}

.gas-mode-dept_head .dept-head-employee-add,
.gas-mode-dept_head .dept-head-employee-toolbar .search-input,
.gas-mode-dept_head .dept-head-employee-grid .link-btn {
  min-height: 44px;
}

.gas-mode-dept_head .dept-head-employee-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.gas-mode-dept_head .dept-head-employee-grid .employee-link-card {
  min-width: 0;
  margin: 0;
}

.gas-mode-dept_head .dept-head-employee-grid .employee-status-btn {
  width: 100%;
  justify-content: center;
}

@media (max-width: 1120px) {
  .gas-mode-dept_head .dept-head-employee-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .gas-mode-dept_head .dept-head-nav-actions,
  .gas-mode-dept_head .dept-head-employee-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .gas-mode-dept_head .dept-head-employee-toolbar,
  .gas-mode-dept_head .dept-head-employee-search {
    flex-direction: column;
    align-items: stretch;
  }

  .gas-mode-dept_head .dept-head-nav-actions .secondary-action-card {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .gas-mode-dept_head .dept-head-nav-actions .secondary-action-link,
  .gas-mode-dept_head .dept-head-employee-add {
    width: 100%;
    min-width: 0;
    min-height: 44px;
  }

  .gas-mode-dept_head .dept-head-employee-search .employee-directory-count {
    min-height: 20px;
  }
}

.notification-admin-card {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px;
  background: var(--surface-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}

.notification-admin-switch {
  display: none !important;
}

.notification-admin-disclosure {
  margin-bottom: 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-3);
}

.notification-admin-disclosure > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  color: var(--text-main);
  font-weight: 650;
}

.notification-admin-disclosure > summary::-webkit-details-marker {
  display: none;
}

.notification-admin-disclosure > summary::after {
  width: 8px;
  height: 8px;
  margin-left: auto;
  content: '';
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.notification-admin-disclosure[open] > summary::after {
  transform: rotate(225deg);
}

.notification-admin-disclosure > summary small {
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 540;
}

.notification-admin-disclosure[open] .notification-admin-card {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--border-soft);
  border-radius: 0;
}

.notification-admin-head,
.notification-admin-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.notification-admin-head h3 {
  margin: 0;
}

.notification-admin-head p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.notification-admin-status {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.notification-admin-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 7px 10px;
  color: var(--text-main);
  background: var(--bg-control);
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-panel-radius);
  white-space: nowrap;
}

.notification-admin-switch input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--ok);
}

.notification-admin-counters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.notification-admin-counters > span {
  padding: 5px 8px;
  color: var(--text-soft);
  background: var(--bg-control);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  font-size: var(--fs-caption);
}

.notification-admin-counters .is-enabled,
.notification-admin-badge.is-enabled {
  color: var(--schedule-work-accent);
  border-color: var(--schedule-work-border);
  background: var(--schedule-work-bg);
}

.notification-admin-counters .is-denied,
.notification-admin-badge.is-denied {
  color: var(--schedule-noshow-accent);
  border-color: var(--schedule-noshow-border);
  background: var(--schedule-noshow-bg);
}

.notification-admin-tools select {
  min-width: 200px;
}

.notification-admin-tools button {
  min-height: 38px;
  padding: 7px 12px;
}

.notification-admin-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 7px;
  max-height: 220px;
  overflow: auto;
}

.notification-admin-person {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-panel-radius);
}

.notification-admin-person strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-admin-identity {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.notification-admin-identity small {
  min-width: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 520;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-admin-badge {
  flex: 0 0 auto;
  padding: 5px 8px;
  color: var(--text-soft);
  background: var(--bg-control);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  font-size: var(--fs-caption);
}

.notification-admin-status.is-error {
  color: var(--schedule-noshow-accent);
}

.notification-admin-empty {
  margin: 0;
  color: var(--text-muted);
}

.notification-admin-card[data-notification-compact-details] .notification-admin-counters,
.notification-admin-card[data-notification-compact-details] .notification-admin-tools select {
  display: none;
}

.notification-admin-compact-disclosure {
  min-width: 0;
}

.notification-admin-compact-disclosure > summary {
  min-width: 0;
}

.notification-admin-compact-disclosure > summary span,
.notification-admin-compact-disclosure > summary small {
  min-width: 0;
}

.notification-admin-compact-disclosure .notification-admin-head {
  display: none;
}

.notification-admin-card[data-notification-compact-details] {
  min-width: 0;
  overflow: hidden;
}

.notification-admin-card[data-notification-compact-details] .notification-admin-tools {
  justify-content: flex-end;
}

.notification-admin-card[data-notification-compact-details] .notification-admin-list {
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  align-items: start;
  width: 100%;
  min-width: 0;
  max-height: min(360px, 48vh);
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.notification-admin-person-compact {
  display: block;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.035);
}

.notification-admin-person-compact > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 9px 11px;
  box-sizing: border-box;
  cursor: pointer;
  list-style: none;
}

.notification-admin-person-compact > summary::-webkit-details-marker {
  display: none;
}

.notification-admin-person-compact > summary:hover,
.notification-admin-person-compact > summary:focus-visible {
  background: rgba(255, 255, 255, 0.035);
}

.notification-admin-person-compact > summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

.notification-admin-person-name {
  min-width: 0;
  overflow: hidden;
  color: var(--text-main);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.22);
  text-decoration-style: dashed;
  text-underline-offset: 4px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-admin-indicator {
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: var(--text-muted);
}

.notification-admin-indicator.is-enabled {
  border-color: var(--schedule-work-border);
  background: var(--schedule-work-accent);
  box-shadow: 0 0 0 3px rgba(81, 184, 135, 0.12);
}

.notification-admin-person-details {
  display: grid;
  grid-template-columns: minmax(120px, 0.7fr) minmax(0, 1.3fr);
  gap: 7px 12px;
  margin: 0;
  padding: 10px 11px 12px;
  border-top: 1px solid var(--border-soft);
  background: rgba(0, 0, 0, 0.12);
  font-size: var(--fs-caption);
}

.notification-admin-person-details dt {
  color: var(--text-muted);
}

.notification-admin-person-details dd {
  min-width: 0;
  margin: 0;
  color: var(--text-soft);
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  .notification-admin-head,
  .notification-admin-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .notification-admin-switch,
  .notification-admin-tools select,
  .notification-admin-tools button {
    width: 100%;
  }

  .notification-admin-list {
    grid-template-columns: 1fr;
  }

  .notification-admin-compact-disclosure > summary {
    gap: 8px;
  }

  .notification-admin-compact-disclosure > summary small {
    display: none;
  }

  .notification-admin-card[data-notification-compact-details] {
    gap: 9px;
    padding: 10px;
  }

  .notification-admin-card[data-notification-compact-details] .notification-admin-tools button {
    width: auto;
    align-self: flex-end;
  }

  .notification-admin-card[data-notification-compact-details] .notification-admin-list {
    max-height: 50vh;
  }

  .notification-admin-person-details {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .notification-admin-person-details dd + dt {
    margin-top: 6px;
  }
}

/* Direction boundary: production and okleyka never share one workspace. */
.admin-direction-switch {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin: 0 0 16px;
  padding: 6px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.direction-shell {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  padding: 24px;
}

.direction-card {
  width: min(100%, 620px);
  padding: 28px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  box-shadow: var(--shadow-shell);
}

.direction-logo {
  display: block;
  width: 148px;
  height: auto;
  margin-bottom: 32px;
}

.direction-heading {
  margin-bottom: 18px;
}

.direction-heading span {
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 500;
  text-transform: uppercase;
}

.direction-heading h1 {
  margin: 4px 0 0;
  font-size: var(--fs-display);
  font-weight: 600;
}

.direction-options {
  display: grid;
  gap: 10px;
}

.direction-option {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 76px;
  padding: 12px 16px;
  color: var(--text-main);
  text-align: left;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md);
  background: var(--bg-control);
  cursor: pointer;
}

.direction-option:hover,
.direction-option:focus-visible {
  border-color: rgba(79, 140, 255, 0.58);
  background: var(--bg-control-hover);
  outline: none;
}

.direction-option-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: #9bbaff;
  font-size: var(--fs-h1);
  border-radius: var(--radius-sm);
  background: rgba(79, 140, 255, 0.13);
}

.direction-option-icon.okleyka {
  color: #e08b67;
  background: var(--accent-soft);
}

.direction-option strong,
.direction-option small {
  display: block;
}

.direction-option strong {
  font-size: var(--fs-h3);
  font-weight: 600;
}

.direction-option small {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 500;
}

.direction-option-arrow {
  color: var(--text-muted);
  font-size: var(--fs-display);
  font-weight: 400;
}

.direction-logout {
  width: 100%;
  margin-top: 18px;
  padding: 10px 14px;
  color: var(--text-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
}

.direction-logout.compact {
  width: auto;
  margin: 0;
  white-space: nowrap;
}

.okleyka-admin-card {
  min-height: calc(100dvh - 100px);
}

.okleyka-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 16px;
  min-height: calc(100dvh - 230px);
}

.okleyka-sidebar,
.okleyka-content {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.15);
}

.okleyka-sidebar h2 {
  margin: 0 0 10px;
  color: var(--text-muted);
  font-size: var(--fs-body-lg);
  font-weight: 560;
}

.okleyka-tab {
  width: 100%;
  margin: 0 0 7px;
  padding: 10px 12px;
  color: var(--text-soft);
  text-align: left;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  background: var(--bg-control);
  cursor: pointer;
}

.okleyka-tab.active {
  color: var(--text-main);
  border-color: var(--accent-border);
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

.okleyka-content-head {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
}

.okleyka-content-head h1 {
  margin: 2px 0 0;
  font-size: var(--fs-h1);
  font-weight: 600;
}

.okleyka-panel {
  padding-top: 14px;
}

.okleyka-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.okleyka-tile {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-control);
}

.okleyka-tile.active {
  border-left: 3px solid var(--ok);
}

.okleyka-tile.inactive {
  border-left: 3px solid var(--err);
}

.okleyka-tile span,
.okleyka-tile small {
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.okleyka-search {
  margin-bottom: 12px;
}

.okleyka-table-wrap {
  width: 100%;
  overflow: auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}

.okleyka-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.okleyka-table th,
.okleyka-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
}

.okleyka-table th {
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 550;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.025);
}

.okleyka-table td {
  font-size: var(--fs-caption);
  font-weight: 520;
}

@media (max-width: 768px) {
  .admin-direction-switch,
  .okleyka-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .direction-shell {
    align-items: start;
    padding: 20px 14px;
  }

  .direction-card {
    margin-top: 8vh;
    padding: 20px;
  }

  .direction-option {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    padding: 11px 12px;
  }

  .okleyka-content-head {
    align-items: stretch;
    flex-direction: column;
  }

  .direction-logout.compact {
    width: 100%;
  }
}

.login-gateway-continue {
  display: none;
  margin: -8px 26px 26px;
}

@media (max-width: 560px) {
  body.gas-mode-login_gateway .wrap {
    padding: 12px;
  }

  .login-gateway-shell {
    min-height: calc(100dvh - 24px);
  }

  .login-gateway-card {
    width: 100%;
  }

  .login-gateway-brand {
    min-height: 72px;
    padding: 14px 20px;
  }

  .login-gateway-form {
    padding: 18px 20px 22px;
  }

  .login-gateway-continue {
    margin: -6px 20px 22px;
  }
}

.secondary-action-stack {
  display: grid;
  gap: 12px;
}

.secondary-action-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  min-height: 66px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
    var(--surface-2);
  border-radius: var(--workspace-panel-radius);
  box-shadow: none;
}

.secondary-action-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--workspace-panel-radius);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.07);
  font-size: var(--fs-h2);
  line-height: 1;
}

.secondary-action-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.secondary-action-title {
  color: var(--text-main);
  font-size: var(--fs-body-lg);
  font-weight: 680;
  line-height: 1.15;
}

.secondary-action-subtitle {
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 560;
  line-height: 1.25;
}

.secondary-action-link {
  min-height: 34px;
  padding: 7px 12px;
  justify-content: center;
  font-size: var(--fs-caption);
  font-weight: 640;
  border-radius: var(--workspace-panel-radius);
  box-shadow: none;
}

.preview-index-link {
  min-height: 40px;
}

.form-note,
.section-note {
  margin-top: 8px;
  margin-bottom: 12px;
}

.form-textarea-lg {
  min-height: 220px;
  resize: vertical;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.form-actions .btn-primary,
.form-actions button {
  justify-content: center;
}

.post-login-box {
  display: none;
  margin-top: 14px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}

.post-login-link {
  min-height: 38px;
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  color: var(--text-main);
  background:
    linear-gradient(90deg, rgba(79, 140, 255, 0.20), rgba(79, 140, 255, 0.06)),
    #2b3038;
  border: 1px solid rgba(91, 151, 255, 0.52);
  border-radius: var(--workspace-panel-radius);
  text-decoration: none;
}

.analytics-filter {
  margin-bottom: 12px;
}

.period-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 10px;
  margin-bottom: 10px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-panel-radius);
  font-size: var(--fs-caption);
  font-weight: 620;
}

.btn-danger {
  color: #f1cbc5;
  background:
    linear-gradient(90deg, rgba(183, 90, 75, 0.24), rgba(183, 90, 75, 0.07)),
    #332725;
  border-color: rgba(183, 90, 75, 0.44);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24), 0 0 14px rgba(183, 90, 75, 0.10);
}

.btn-danger:hover:not(:disabled) {
  background:
    radial-gradient(circle at 100% 50%, rgba(183, 90, 75, 0.18), transparent 36%),
    linear-gradient(90deg, rgba(183, 90, 75, 0.30), rgba(183, 90, 75, 0.10)),
    var(--surface-hover-danger);
  border-color: rgba(203, 106, 90, 0.58);
}

.btn-sm,
.mini-link-btn,
.entry-direct-edit-btn {
  min-height: 34px;
  padding: 6px 10px;
  border-radius: var(--workspace-panel-radius);
  font-size: var(--fs-caption);
  font-weight: 620;
  box-shadow: none;
}

.compact-links {
  display: grid;
  gap: 10px;
}

.admin-import-panel {
  margin-bottom: 12px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.022);
}

.admin-import-panel summary {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.admin-import-panel summary::-webkit-details-marker {
  display: none;
}

.admin-import-panel summary span:first-child {
  display: grid;
  gap: 2px;
}

.admin-import-panel summary small {
  color: var(--text-muted);
}

.admin-import-panel-action {
  color: var(--accent-soft);
  font-size: var(--fs-caption);
  font-weight: 650;
}

.admin-import-panel-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-top: 1px solid var(--border-soft);
}

.admin-import-panel-body p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-body);
}

.employee-directory-head {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Okleyka department head: consolidated data workspace. */
.ok-dept-head .ok-head-data-filters {
  margin: 14px 0;
  align-items: end;
}

.ok-dept-head .ok-head-data-filters .ok-search {
  min-width: 210px;
}

.ok-dept-head .ok-schedule-topbar,
.ok-dept-head .ok-schedule-period {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ok-dept-head .ok-schedule-period select {
  min-height: 42px;
}

@media (max-width: 768px) {
  .ok-dept-head #dataViewSwitch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
  }

  .ok-dept-head #dataViewSwitch > button {
    min-width: 0;
    width: 100%;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: normal;
  }

  .ok-dept-head #dataViewSwitch > button:last-child {
    grid-column: 1 / -1;
  }

  .ok-dept-head .ok-head-data-filters,
  .ok-dept-head .ok-schedule-topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .ok-dept-head .ok-head-data-filters > *,
  .ok-dept-head .ok-head-data-filters .ok-search {
    width: 100%;
    min-width: 0;
  }
}

.employee-directory-head h2 {
  margin: 0;
}

.employee-directory-head p {
  margin: 4px 0 0;
}

.employee-directory-toolbar {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.employee-directory-toolbar .search-input {
  flex: 1 1 320px;
  margin: 0;
}

.employee-directory-count {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 620;
}

.employee-create-modal-card {
  max-width: 520px;
}

.employee-manage-modal-card {
  display: grid;
  align-content: start;
  gap: 14px;
  width: min(100%, 620px);
  max-width: 620px;
  padding: 22px;
  overflow-x: hidden;
}

.employee-manage-modal-card .schedule-modal-title,
.employee-manage-modal-card .schedule-modal-subtitle {
  margin: 0;
}

.employee-manage-modal-card .schedule-modal-subtitle {
  margin-top: -8px;
  max-width: 52ch;
}

.employee-manage-modal-card .employee-create-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.employee-manage-modal-card .employee-create-fields :is(input, select) {
  width: 100%;
  min-width: 0;
}

.employee-create-fields {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(180px, 0.8fr);
  gap: 12px;
}

.employee-create-fields label {
  display: grid;
  gap: 6px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 650;
}

.payroll-grid-table td.pg-oklad-changed { font-weight: 650; white-space: nowrap; }

.employee-salary-field {
  display: grid;
  gap: 6px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 650;
}

.employee-salary-btn {
  display: grid;
  gap: 2px;
  padding: 8px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.025);
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
}

.employee-salary-btn:hover { border-color: rgba(192,139,214,.5); background: rgba(192,139,214,.09); }
.employee-salary-btn strong { font-size: var(--fs-h3); font-weight: 700; }
.employee-salary-btn small { color: var(--text-muted); font-size: var(--fs-caption); font-weight: 500; }

.employee-link-card[hidden] {
  display: none;
}

.employee-link-card,
.request-box,
.production-plan-panel,
.schedule-editor-panel {
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.010)),
    var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.employee-link-card {
  display: grid;
  gap: 10px;
}

.employee-link-card-compact {
  width: 100%;
  min-height: 82px;
  margin: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
}

.employee-link-card-compact:hover {
  border-color: rgba(114, 170, 255, 0.55);
  transform: translateY(-1px);
}

.employee-link-card-compact:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.employee-link-card-active {
  border-color: rgba(143, 159, 120, 0.30);
  box-shadow: inset 3px 0 0 rgba(143, 159, 120, 0.70), var(--shadow-soft);
}

.employee-link-card-inactive {
  border-color: rgba(183, 90, 75, 0.34);
  box-shadow: inset 3px 0 0 rgba(183, 90, 75, 0.72), var(--shadow-soft);
}

.employee-link-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.employee-link-main {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.employee-link-name,
.employee-link-status,
.employee-nda-label {
  color: var(--text-main);
  font-weight: 680;
}

.employee-link-meta {
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 560;
}

.employee-link-badges,
.employee-link-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.employee-role-control {
  display: grid;
  grid-template-columns: auto minmax(150px, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 4px 6px 4px 10px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: var(--workspace-panel-radius);
  background: rgba(255, 255, 255, 0.025);
}

.employee-role-control select {
  min-height: 30px;
  padding: 4px 28px 4px 9px;
  color: var(--text-main);
  border-color: rgba(255, 255, 255, 0.12);
  background-color: var(--bg-control);
}

.employee-link-badges {
  justify-content: flex-end;
}

/* .employee-manage-actions ниже переопределяется на grid целиком, поэтому
   в этой группе он был мёртвым: flex до него не доезжал. */
.employee-manage-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.employee-manage-statuses {
  min-height: 26px;
  padding: 0;
}

.employee-manage-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
}

.employee-manage-actions > * {
  width: 100%;
  min-width: 0;
  min-height: var(--workspace-button-height);
  justify-content: flex-start;
}

.employee-manage-actions > [hidden] {
  display: none;
}

.employee-manage-actions > .employee-visibility-note {
  grid-column: 1 / -1;
  min-height: 0;
  font-size: var(--fs-caption);
  line-height: 1.35;
}

.employee-manage-modal-card > .schedule-modal-actions {
  gap: 8px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}

.employee-link-status,
.employee-nda-label {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border-radius: var(--workspace-panel-radius);
  font-size: var(--fs-caption);
  line-height: 1;
  border: 1px solid transparent;
}

.employee-state-dot {
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

.employee-link-status.active {
  color: #9fe0b0;
  background: rgba(54, 144, 83, 0.18);
  border-color: rgba(94, 198, 123, 0.34);
}

.employee-link-status.inactive {
  color: #efaaa2;
  background: rgba(166, 64, 53, 0.18);
  border-color: rgba(211, 91, 78, 0.36);
}

.employee-nda-label.active {
  color: #a9c9ff;
  background: rgba(63, 112, 191, 0.20);
  border-color: rgba(91, 151, 255, 0.38);
}

.employee-nda-label.inactive {
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.10);
}

.employee-toggle {
  min-width: 164px;
  min-height: 38px;
  padding: 7px 10px;
  gap: 9px;
  border-radius: var(--workspace-panel-radius);
  box-shadow: none;
  font-size: var(--fs-caption);
  font-weight: 620;
  white-space: nowrap;
}

.employee-toggle-track {
  position: relative;
  flex: 0 0 34px;
  width: 34px;
  height: 20px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--workspace-panel-radius);
  background: rgba(255, 255, 255, 0.08);
  transition: background 0.18s ease, border-color 0.18s ease;
}

.employee-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #b7b5b0;
  transition: transform 0.18s ease, background 0.18s ease;
}

.employee-toggle.is-on .employee-toggle-thumb {
  transform: translateX(14px);
}

.employee-status-btn.is-on {
  color: #b9e8c4;
  background: rgba(54, 144, 83, 0.14);
  border-color: rgba(94, 198, 123, 0.34);
}

.employee-status-btn.is-on .employee-toggle-track {
  background: rgba(54, 144, 83, 0.38);
  border-color: rgba(94, 198, 123, 0.58);
}

.employee-status-btn.is-on .employee-toggle-thumb {
  background: #a9e6b8;
}

.employee-status-btn.is-off {
  color: #efaaa2;
  background: rgba(166, 64, 53, 0.14);
  border-color: rgba(211, 91, 78, 0.34);
}

.employee-status-btn.is-off .employee-toggle-track {
  background: rgba(166, 64, 53, 0.32);
  border-color: rgba(211, 91, 78, 0.52);
}

.employee-status-btn.is-off .employee-toggle-thumb {
  background: #e8a49c;
}

.employee-nda-toggle.is-on {
  color: #b8d1ff;
  background: rgba(63, 112, 191, 0.16);
  border-color: rgba(91, 151, 255, 0.36);
}

.employee-nda-toggle.is-on .employee-toggle-track {
  background: rgba(63, 112, 191, 0.42);
  border-color: rgba(91, 151, 255, 0.62);
}

.employee-nda-toggle.is-on .employee-toggle-thumb {
  background: #b8d1ff;
}

.employee-nda-toggle.is-off {
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(255, 255, 255, 0.10);
}

.request-box {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
}

.request-route {
  color: var(--text-main);
  font-size: var(--fs-body-lg);
  font-weight: 620;
}

.request-reason {
  padding: 9px 10px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-panel-radius);
}

.btn-row,
.schedule-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

/* Кнопки в подвале окна приходят из трёх семейств: .btn-primary и .btn-danger
   наследуют базовое правило `button` (min-height 52px, padding 10px 18px,
   выключка влево), а .ui-button — размеры ui-kit. Рядом это читалось как три
   разные кнопки. Размер задаётся здесь один на всех; цвет и рамку по-прежнему
   определяет семейство. Ширина — по содержимому. */
.schedule-modal-actions > :is(button, a, .ui-button, .btn-primary, .btn-danger) {
  min-height: var(--workspace-button-height);
  padding: 7px 14px;
  justify-content: center;
  border-radius: var(--workspace-control-radius);
  font-size: var(--fs-caption);
  font-weight: 650;
}

.warehouse-grid {
  display: grid;
  gap: 10px;
}

.warehouse-tile {
  align-items: flex-start;
}

.warehouse-post-btn,
.production-plan-secondary-btn,
.schedule-clear-btn {
  min-height: 38px;
  padding: 7px 12px;
  border-radius: var(--workspace-panel-radius);
  font-size: var(--fs-caption);
  font-weight: 620;
}

.production-plan-head,
.schedule-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.production-plan-title,
.schedule-editor-title,
.schedule-modal-title {
  color: var(--text-main);
  font-size: var(--fs-h3);
  font-weight: 680;
  line-height: 1.16;
}

.production-plan-subtitle,
.schedule-editor-subtitle,
.schedule-modal-subtitle,
.production-plan-history,
.production-plan-history-empty {
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 560;
  line-height: 1.35;
}

.production-plan-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.8fr);
  gap: 14px;
}

.production-plan-create,
.production-plan-schedule-preview {
  min-width: 0;
  padding: 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}

.production-plan-form,
.schedule-filter-grid,
.schedule-modal-grid,
.production-plan-list-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  align-items: end;
}

.production-plan-note,
.schedule-modal-grid .wide {
  grid-column: 1 / -1;
}

.schedule-modal-grid {
  margin-top: 14px;
}

.schedule-modal-step {
  color: var(--text-soft);
  font-size: var(--fs-caption);
  font-weight: 650;
  line-height: 1.3;
}

.schedule-modal-dates {
  min-width: 0;
  padding: 9px 10px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  line-height: 1.4;
  white-space: pre-line;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-panel-radius);
}

.schedule-datetime-fields {
  display: grid;
  gap: 8px;
  padding-top: 2px;
}

.schedule-datetime-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.schedule-datetime-field {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.schedule-datetime-field > span {
  color: var(--text-muted-control);
  font-size: var(--fs-caption);
  font-weight: 620;
}

.schedule-datetime-field input {
  width: 100%;
  min-width: 0;
  color-scheme: dark;
}

/* Смена вводится двумя карточками: только время (24 ч, МСК). Дата не вводится —
   она берётся из выбранных в сетке дней; окончание не позже начала = следующий день. */
.schedule-shift-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.schedule-shift-card {
  position: relative;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.09));
  border-radius: var(--workspace-panel-radius);
  background: var(--ok-surface-2);
  cursor: text;
}

.schedule-shift-card:focus-within {
  border-color: rgba(79, 140, 255, 0.55);
}

.schedule-shift-card__cap {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted-control);
  font-size: var(--fs-caption);
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.schedule-shift-card__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4f8cff;
}

.schedule-shift-card--end .schedule-shift-card__dot {
  background: #6fb26f;
}

.schedule-shift-card__time {
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--workspace-panel-radius);
  background: var(--ok-surface-3);
  color: var(--text-main, #f1eee8);
  font: inherit;
  font-size: var(--fs-title);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  text-align: center;
  color-scheme: dark;
}

.schedule-shift-card__time:focus {
  outline: none;
  border-color: #4f8cff;
  box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.25);
}

.schedule-shift-card__next {
  justify-self: start;
  padding: 3px 9px;
  border: 1px solid rgba(224, 168, 74, 0.5);
  border-radius: 999px;
  background: rgba(224, 168, 74, 0.16);
  color: #f0d9ac;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.schedule-shift-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.09));
  border-radius: var(--workspace-panel-radius);
  background: var(--ok-surface-2);
}

.schedule-shift-summary__k {
  color: var(--text-faint, #6f6b64);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.schedule-shift-summary__v {
  color: rgb(123, 179, 123);
  font-size: var(--fs-body-lg);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .schedule-shift-cards { grid-template-columns: minmax(0, 1fr); }
}

.schedule-datetime-hint {
  color: var(--text-muted-control);
  font-size: var(--fs-caption);
  font-weight: 520;
  line-height: 1.4;
}

.production-plan-batch-list,
.production-plan-history,
.production-plan-admin-groups,
.production-plan-schedule-days {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.production-plan-group,
.production-plan-admin-card,
.production-plan-history-row,
.production-plan-schedule-day {
  padding: 10px;
  background: rgba(255, 255, 255, 0.030);
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-panel-radius);
}

.production-plan-admin-card {
  display: grid;
  gap: 10px;
  border-color: rgba(200, 88, 45, 0.22);
  box-shadow: inset 3px 0 0 rgba(200, 88, 45, 0.68);
}

.production-plan-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.production-plan-panel {
  display: grid;
  gap: 12px;
}

.production-plan-section-title {
  color: var(--text-soft);
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.production-plan-create,
.production-plan-schedule-preview {
  display: grid;
  align-content: start;
  gap: 10px;
}

.production-plan-form > label {
  min-width: 0;
  display: grid;
  gap: 5px;
  margin: 0;
}

.production-plan-form > label > span {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.production-plan-form .btn-primary,
.production-plan-form .production-plan-secondary-btn {
  width: fit-content;
  min-width: 170px;
  justify-content: center;
}

.production-plan-history {
  min-height: 42px;
  margin-top: 0;
  padding: 9px 10px;
  background: rgba(255, 255, 255, 0.016);
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-panel-radius);
}

.production-plan-history-title {
  margin-bottom: 6px;
  color: var(--text-soft);
  font-size: var(--fs-caption);
  font-weight: 630;
}

.production-plan-history-list,
.production-plan-position-matches {
  display: grid;
  gap: 6px;
}

.production-plan-history-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}

.production-plan-history-duration {
  margin-left: auto;
  color: var(--text-muted);
}

.production-plan-position-match {
  width: 100%;
  min-height: 34px;
  justify-content: flex-start;
  padding: 6px 9px;
  color: var(--text-soft);
  background: rgba(255, 255, 255, 0.025);
  border-color: var(--border-soft);
  box-shadow: none;
  font-size: var(--fs-caption);
  font-weight: 580;
  text-align: left;
}

.production-plan-schedule-days {
  margin-top: 0;
}

.gas-mode-dept_head .production-plan-panel {
  padding: 7px;
}

.gas-mode-dept_head .production-plan-workspace {
  gap: 7px;
}

.gas-mode-dept_head .production-plan-form {
  gap: 5px 7px;
}

.gas-mode-dept_head .production-plan-form input,
.gas-mode-dept_head .production-plan-form select {
  min-height: 36px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.gas-mode-dept_head .production-plan-form .btn-primary,
.gas-mode-dept_head .production-plan-form .production-plan-secondary-btn {
  /* Та же высота, что у полей и кнопок футера (44px): кнопка была ниже
     соседей, и форма выглядела разнокалиберной. */
  min-height: 44px;
  padding: 7px 14px;
}

.gas-mode-dept_head .production-plan-history {
  min-height: 0;
  padding: 6px 8px;
}

.gas-mode-dept_head .production-plan-schedule-days {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  max-height: 230px;
  overflow: auto;
  padding-right: 2px;
}

.gas-mode-dept_head .production-plan-schedule-day {
  gap: 4px;
  min-width: 0;
  padding: 5px;
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-panel-radius);
}

.gas-mode-dept_head .production-plan-schedule-row {
  gap: 1px;
  padding: 4px 5px;
  font-size: var(--fs-caption);
}

@media (min-width: 1024px) {
  .gas-mode-dept_head .production-plan-workspace {
    grid-template-columns: minmax(320px, 0.68fr) minmax(0, 1.32fr);
  }

  .gas-mode-dept_head .production-plan-create {
    gap: 7px;
    padding: 9px;
  }

  .gas-mode-dept_head .production-plan-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gas-mode-dept_head .production-plan-form .production-plan-note,
  .gas-mode-dept_head .production-plan-form .production-plan-batch-list {
    grid-column: 1 / -1;
  }

  .gas-mode-dept_head .production-plan-form > label > span,
  .gas-mode-dept_head .production-plan-section-title {
    font-size: var(--fs-caption);
  }

  .gas-mode-dept_head .production-plan-form input,
  .gas-mode-dept_head .production-plan-form select,
  .gas-mode-dept_head .production-plan-form .btn-primary,
  .gas-mode-dept_head .production-plan-form .production-plan-secondary-btn {
    min-height: 34px;
  }

  .gas-mode-dept_head .production-plan-history {
    padding: 5px 7px;
    font-size: var(--fs-caption);
  }

  .gas-mode-dept_head .production-plan-schedule-preview {
    padding: 9px;
  }

  .gas-mode-dept_head .production-plan-schedule-legend {
    grid-column: 1 / -1;
  }
}

.production-plan-schedule-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.production-plan-schedule-day {
  display: grid;
  gap: 7px;
}

.production-plan-schedule-day-head {
  color: var(--text-soft);
  font-size: var(--fs-caption);
  font-weight: 630;
}

.production-plan-schedule-row {
  display: grid;
  gap: 2px;
  padding: 7px 8px;
  color: var(--text-soft);
  background: rgba(255, 255, 255, 0.022);
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-control-radius);
  font-size: var(--fs-caption);
  line-height: 1.3;
}

.production-plan-schedule-empty {
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.production-plan-list-controls {
  grid-template-columns: minmax(220px, 1.2fr) minmax(170px, 0.9fr) minmax(170px, 0.9fr);
  margin-top: 12px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.018);
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-panel-radius);
}

.production-plan-admin-groups {
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  align-items: start;
  margin-top: 12px;
}

.production-plan-employee-group {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.006)),
    var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-panel-radius);
}

.production-plan-employee-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-main);
  font-size: var(--fs-caption);
  font-weight: 640;
}

.production-plan-admin-list {
  display: grid;
  gap: 8px;
}

.production-plan-admin-card {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  padding: 10px 11px;
}

.production-plan-admin-main {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.production-plan-admin-title {
  min-width: 0;
  color: var(--text-main);
  font-size: var(--fs-caption);
  font-weight: 640;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.production-plan-admin-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 9px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  line-height: 1.3;
}

.production-plan-admin-note {
  color: var(--text-soft);
  font-size: var(--fs-caption);
  line-height: 1.35;
}

.production-plan-admin-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-self: end;
  width: 100%;
}

.production-plan-admin-actions button {
  width: 100%;
  justify-content: center;
  min-height: 34px;
  padding: 6px 9px;
  font-size: var(--fs-caption);
  font-weight: 600;
}

.production-plan-drag-handle {
  color: var(--text-muted);
  cursor: grab;
}

.schedule-editor-panel {
  margin: 0;
  padding: 7px 10px;
}

#admScheduleEditorPanel {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 6px;
}

#admScheduleEditorPanel .schedule-editor-actions {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 6px;
}

#admScheduleEditorPanel .schedule-clear-btn,
#admScheduleEditorPanel .schedule-edit-btn {
  flex: 0 0 auto;
  width: auto;
  min-height: 32px;
  padding: 5px 10px;
  font-size: var(--fs-caption);
}

#admScheduleEditorPanel .schedule-selection-info {
  min-width: 0;
  white-space: nowrap;
}

.schedule-filter-grid {
  grid-template-columns:
    minmax(230px, 1.05fr)
    minmax(130px, 0.68fr)
    minmax(180px, 1.18fr)
    minmax(120px, 0.62fr);
  margin-bottom: 10px;
  align-items: end;
}

.schedule-month-field,
.schedule-filter-field {
  display: grid;
  min-width: 0;
  gap: 5px;
  margin: 0;
}

.schedule-month-field > span,
.schedule-filter-field > span {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.schedule-filter-field select,
.schedule-edit-btn {
  width: 100%;
  min-width: 0;
}

.schedule-edit-btn {
  align-self: end;
}

.schedule-editor-actions .schedule-clear-btn,
.schedule-editor-actions .schedule-edit-btn {
  min-height: 38px;
  padding: 7px 12px;
  font-size: var(--fs-caption);
  font-weight: 620;
}

.schedule-selection-info {
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.employee-page-wrap {
  position: relative;
  display: grid;
  overflow: hidden;
}

/* Окно «Что производим?» — вариант «Карточка» (18.09.2026). Одна колонка:
   крупный поиск, карточка позиции с цифрами, количество кнопками −/+,
   очередь сегментами, доливка переключателем, набор чипами. */
.production-plan-editor-card.plan-create {
  padding: 0;
  display: grid;
}

.plan-create__top {
  padding: 20px 22px 16px;
}

.plan-create__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.plan-create__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.plan-create__close {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid var(--border-mid);
  border-radius: var(--workspace-control-radius);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.plan-create__close:hover {
  background: var(--bg-control-hover);
  color: var(--text-main);
}

.plan-create__search {
  position: relative;
  display: block;
  margin-top: 14px;
}

.plan-create__search > .ico {
  position: absolute;
  top: 50%;
  left: 16px;
  font-size: 18px;
  color: var(--text-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.plan-create__search input {
  width: 100%;
  min-height: 56px;
  padding: 10px 14px 10px 46px;
  font-size: 18px;
}

.plan-create__card {
  margin: 0 22px;
  padding: 16px;
  display: grid;
  gap: 14px;
  border: 1px solid var(--border-mid);
  border-radius: var(--workspace-panel-radius);
  background: var(--bg-panel-soft);
}

.plan-create__card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}

.plan-create__card-head strong {
  font-size: 20px;
  font-weight: 700;
}

.plan-create__last-run {
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.plan-create__kpis[hidden] {
  display: none;
}

/* Общие правила подписей окна делают текст внутри label заглавным —
   здесь подписи обычные, заглавные только у заголовков групп. */
.plan-create label,
.plan-create label * {
  text-transform: none;
  letter-spacing: normal;
}

/* Плитки показателей: число крупно, под ним — что оно значит для введённого
   количества. Состояние подписано словами, цвет только усиливает. */
.plan-create__tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.plan-create__tile {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-control-radius);
  background: var(--bg-panel);
  box-shadow: inset 0 3px 0 var(--tile-accent, transparent);
}

.plan-create__tile-cap {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.plan-create__tile strong {
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.plan-create__tile small {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.plan-create__tile.is-key { --tile-accent: var(--accent); }
.plan-create__tile.is-key strong { color: var(--accent-text); }
.plan-create__tile.is-ok { --tile-accent: var(--ok); }
.plan-create__tile.is-bad {
  --tile-accent: var(--err);
  border-color: rgba(183, 90, 75, 0.5);
  background: rgba(183, 90, 75, 0.1);
}
.plan-create__tile.is-bad strong,
.plan-create__tile.is-bad small { color: var(--err-text); }

.plan-create__tiles-note {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 11px;
}

@media (max-width: 560px) {
  .plan-create__tiles { grid-template-columns: 1fr; }
  .plan-create__tile { grid-template-columns: auto 1fr; align-items: baseline; column-gap: 10px; }
  .plan-create__tile-cap { grid-column: 1 / -1; }
}

.plan-create__qty {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  gap: 8px;
}

.plan-create__step {
  min-height: 52px;
  border: 1px solid var(--border-mid);
  border-radius: var(--workspace-control-radius);
  background: var(--bg-control);
  font-size: 22px;
  cursor: pointer;
}

.plan-create__step:hover {
  background: var(--bg-control-hover);
}

.plan-create__step:active,
.plan-create__btn:active {
  transform: scale(0.96);
}

.plan-create__qty input {
  width: 100%;
  min-height: 52px;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.plan-create__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: -6px;
}

.plan-create__presets button {
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--border-mid);
  background: transparent;
  font-size: var(--fs-caption);
  cursor: pointer;
}

.plan-create__presets button:hover {
  background: var(--bg-control-hover);
}

.plan-create__cap {
  display: block;
  margin-bottom: 6px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.plan-create__seg {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

/* Каждый приоритет — отдельная кнопка с точкой своего цвета; выбранная
   залита этим цветом и обведена им же, так срочность видна сразу. */
.plan-create__seg-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  min-height: 52px;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid var(--border-mid);
  border-radius: var(--workspace-control-radius);
  background: var(--bg-panel);
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.plan-create__seg-item::before {
  content: "";
  grid-row: 1 / span 2;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--seg-color);
}

.plan-create__seg-item:hover {
  border-color: var(--seg-color);
}

.plan-create__seg-item input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.plan-create__seg-item b {
  font-size: var(--fs-body);
  font-weight: 700;
}

.plan-create__seg-item small {
  grid-column: 2;
  color: var(--text-muted);
  font-size: 11px;
}

.plan-create__seg-item.is-p1 { --seg-color: #cf5b52; --seg-bg: rgba(207, 91, 82, 0.24); }
.plan-create__seg-item.is-p2 { --seg-color: #d28a3c; --seg-bg: rgba(210, 138, 60, 0.22); }
.plan-create__seg-item.is-p3 { --seg-color: #8f9f78; --seg-bg: rgba(143, 159, 120, 0.24); }
.plan-create__seg-item.is-p4 { --seg-color: #9aa1aa; --seg-bg: rgba(154, 161, 170, 0.20); }

.plan-create__seg-item:has(input:checked) {
  border-color: var(--seg-color);
  background: var(--seg-bg);
  box-shadow: inset 0 0 0 1px var(--seg-color);
}

.plan-create__seg-item:has(input:checked) small {
  color: var(--text-main);
}

.plan-create__seg-item:has(input:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .plan-create__seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.plan-create__refill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-mid);
  border-radius: var(--workspace-control-radius);
  cursor: pointer;
}

.plan-create__refill > .ico {
  font-size: 22px;
  color: var(--accent-text);
}

.plan-create__refill:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.plan-create__refill:has(input:disabled) {
  cursor: default;
  opacity: 0.7;
}

.plan-create__refill-text {
  flex: 1;
  min-width: 0;
}

.plan-create__refill-text strong {
  display: block;
}

.plan-create__refill-text small {
  display: block;
  color: var(--text-muted);
  font-size: 11px;
}

.plan-create__refill input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.plan-create__switch {
  position: relative;
  width: 42px;
  height: 24px;
  flex: none;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg-control-hover);
  transition: background 0.15s;
}

.plan-create__switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform 0.18s cubic-bezier(0.2, 0, 0, 1), background 0.15s;
}

.plan-create__refill input:checked + .plan-create__switch {
  border-color: var(--accent);
  background: var(--accent);
}

.plan-create__refill input:checked + .plan-create__switch::after {
  background: #fff;
  transform: translateX(18px);
}

.plan-create__refill input:focus-visible + .plan-create__switch {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.gas-mode-dept_head .plan-create__history {
  max-height: 180px;
  overflow: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.plan-create__basket {
  margin: 16px 22px 0;
}

.plan-create__basket:empty {
  display: none;
}

.plan-create__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.plan-create__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 2px 2px 10px;
  border: 1px solid var(--border-mid);
  border-radius: var(--workspace-control-radius);
  background: var(--bg-panel-soft);
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
}

.plan-create__chip.is-refill {
  border-color: var(--accent-border);
  background: var(--accent-soft);
}

.plan-create__chip button {
  width: 36px;
  height: 36px;
  min-height: 36px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
}

.plan-create__chip button:hover {
  background: var(--bg-control-hover);
  color: var(--err-text);
}

.plan-create__foot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin-top: 18px;
  padding: 14px 22px;
  border-top: 1px solid var(--border-soft);
}

.plan-create__btn {
  min-height: 48px;
  padding: 8px 16px;
  border: 1px solid var(--border-mid);
  border-radius: var(--workspace-control-radius);
  background: var(--bg-control);
  font-weight: 650;
  cursor: pointer;
}

.plan-create__btn:hover {
  background: var(--bg-control-hover);
}

.plan-create__btn[hidden] {
  display: none;
}

.plan-create__btn.is-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.plan-create__btn.is-primary:hover {
  background: var(--accent-text);
}

.plan-create__btn:disabled {
  opacity: 0.6;
  cursor: default;
}

@media (max-width: 560px) {
  .plan-create__top { padding: 16px 16px 12px; }
  .plan-create__card { margin: 0 16px; padding: 12px; }
  .plan-create__basket { margin: 14px 16px 0; }
  .plan-create__foot { padding: 12px 16px; }
}

/* Те же карточки в Типографии (18.09.2026): вкладка «Новая задача» и окно
   «Заказать этикетки» из строки плана. */
.schedule-modal-card.plan-create,
.ui-card.plan-create {
  padding: 0;
  display: grid;
  gap: 0;
}

.production-plan-row-edit-card.plan-create {
  max-width: min(620px, 100%);
}

.plan-create--panel {
  max-width: 680px;
  margin-inline: auto;
}

.plan-create__sub {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.plan-create__sub strong {
  color: var(--text-main);
  font-size: var(--fs-body);
}

.plan-create__lines {
  display: grid;
  gap: 8px;
}

.plan-create__line {
  padding: 10px 12px;
  background: var(--bg-panel);
}

/* Подсказка под количеством делает правую колонку выше: без выравнивания
   по верху поле «Позиция в типографии» уезжало вниз относительно количества. */
.plan-create__line,
.plan-create__line label {
  align-items: start;
  align-content: start;
}

.plan-create__line input {
  min-height: 48px;
}

.plan-create__line input[data-role="quantity"] {
  min-height: 48px;
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.plan-create__refill--date > .ico {
  color: var(--text-muted);
}

.plan-create__date,
.plan-create__comment {
  display: grid;
  margin: 0;
}

.plan-create__date[hidden] {
  display: none;
}

.plan-create__date {
  grid-template-columns: minmax(0, 220px) 44px;
  gap: 0 8px;
  align-items: center;
}

.plan-create__date .plan-create__cap {
  grid-column: 1 / -1;
}

.plan-create__date input,
.plan-create__date .date-picker-btn {
  min-height: 44px;
}

.plan-create__comment textarea {
  width: 100%;
  min-height: 72px;
}

/* Раздел «Устройства» в настройках кабинета. */
.employee-devices-row .employee-setting-text {
  min-width: 0;
  flex: 1 1 100%;
}

.device-settings-list {
  margin-top: 10px;
}

.device-settings-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.device-row-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Уведомления обязательны: полоса висит, пока разрешение не выдано. */
.notification-requirement {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  padding: 12px 14px;
  color: var(--text-main);
  font-size: var(--fs-body);
  background: var(--bg-panel);
  border: 1px solid var(--danger);
  border-radius: var(--radius-md);
}

.notification-requirement[hidden] {
  display: none;
}

.notification-requirement-text {
  flex: 1 1 240px;
  min-width: 0;
}

/* Громкость звука уведомлений: рядом с кнопкой включения, в блоке настроек. */
.notification-sound {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.notification-sound__label {
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.notification-sound__slider {
  flex: 1 1 120px;
  min-width: 96px;
  accent-color: var(--accent);
}

.notification-sound__value {
  min-width: 40px;
  color: var(--text-main);
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Типография: пустой день графика означает, что оповещения никому не уходят. */
.label-print-schedule-gap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
  padding: 12px 14px;
  color: var(--text-main);
  font-size: var(--fs-body);
  background: var(--surface-1);
  border: 1px solid var(--danger);
  border-radius: var(--workspace-panel-radius);
}

.label-print-schedule-gap span {
  color: var(--text-muted);
  font-size: var(--fs-caption);
}


/* Мобильная адаптация экранов сотрудника: компактнее отступы, без вылетов. */
@media (max-width: 560px) {
  .entry-mode-row .entry-mode-btn {
    padding: 8px 10px;
    font-size: var(--fs-body);
    min-height: 40px;
  }
  .secondary-action-card .secondary-action-link {
    width: 100%;
    justify-content: center;
  }
}

.employee-session-loader {
  display: none;
  position: absolute;
  z-index: 6;
  top: 86px;
  left: 50%;
  width: min(320px, calc(100% - 28px));
  min-height: 52px;
  padding: 12px 14px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: var(--fs-body);
  text-align: center;
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-control-radius);
  background: var(--surface-header);
  box-shadow: var(--shadow-panel);
  transform: translateX(-50%);
}

.employee-session-pending .employee-session-loader {
  display: flex;
}

.employee-session-pending .employee-form-card,
.employee-session-pending .employee-today-card {
  visibility: hidden;
}

.employee-session-loader__pulse {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent);
  animation: employee-session-pulse 1.2s ease-in-out infinite;
}

.employee-session-loader.is-error .employee-session-loader__pulse {
  background: #bc6455;
  animation: none;
}

@keyframes employee-session-pulse {
  50% { opacity: 0.35; transform: scale(0.82); }
}

@media (prefers-reduced-motion: reduce) {
  .employee-session-loader__pulse { animation: none; }
}

.employee-stats-page-wrap {
  position: relative;
  display: grid;
  overflow: hidden;
}

.dept-head-page-wrap {
  position: relative;
  display: grid;
  /* Без явной дорожки единственная auto-колонка растёт по содержимому:
     карточка Типографии на телефоне раздвигала оболочку до 746px, и всё
     справа обрезалось. Дорожка — ровно ширина оболочки, карточка не может
     её толкать. */
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}

.dept-head-page-wrap > .card {
  min-width: 0;
}

/* Выход из кабинета: единственное действие в шапке — тема и уведомления
   живут в разделе «Настройки». */
.header-logout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin-left: auto;
  padding: 9px 14px;
  color: var(--text-soft);
  font: inherit;
  font-size: var(--fs-caption);
  font-weight: 650;
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-control-radius);
  cursor: pointer;
}

.header-logout-btn:is(:hover, :focus-visible):not(:disabled) {
  color: var(--text-main);
  border-color: var(--accent-border);
  background: var(--accent-soft);
}

.header-logout-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Раздел «Настройки»: строка = описание слева, управление справа. */
.employee-settings-panel.active {
  display: flex;
  flex-direction: column;
  gap: var(--workspace-shell-gap);
}

.employee-setting-row {
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: var(--workspace-filter-pad);
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-panel-radius);
}

/* Управление в строках настроек — один размер и одна поверхность. */
.employee-setting-control > .ui-theme-toggle,
.employee-setting-control > .header-notification-btn,
.employee-setting-control > .workspace-menu__logout,
.employee-setting-control > .admin-panel-back,
.ui-production-parity .employee-setting-control > .ui-theme-toggle,
.ui-production-parity .employee-setting-control > .header-notification-btn,
.ui-production-parity .employee-setting-control > .workspace-menu__logout,
.ui-production-parity .employee-setting-control > .admin-panel-back {
  /* Одна ширина у всех строк раздела, иначе правый край «пляшет». */
  width: 132px;
  justify-content: center;
  min-height: 36px;
  margin-top: 0;
  padding: 6px 12px;
  border-top-width: 1px;
  color: var(--text-soft);
  border: 1px solid var(--border-mid);
  border-radius: var(--workspace-control-radius);
  background: var(--bg-control);
  box-shadow: var(--btn-shadow);
  font-size: var(--fs-caption);
  font-weight: 650;
}

.employee-setting-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.employee-setting-text strong {
  color: var(--text-main);
  font-size: var(--fs-body);
  font-weight: 650;
}

.employee-setting-text .muted {
  font-size: var(--fs-caption);
}

.employee-setting-control {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* Подпись кнопки уведомлений длиннее остальных — обрезаем её, а не растягиваем
   кнопку, иначе правый столбец перестаёт быть ровным. */
.employee-setting-control > .header-notification-btn .notification-button-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-setting-control .header-notification-btn,
.employee-setting-control .ui-theme-toggle {
  margin-left: 0;
}

/* На узком экране управление уходит под описание, чтобы текст не сжимался. */
/* Узкий экран: внешняя оболочка и панель уже дают поля, поэтому внутренний
   отступ раздела уменьшаем — иначе строки уезжают от края втрое. */
@media (max-width: 768px) {
  .employee-settings-panel.active {
    gap: 8px;
  }
}

@media (max-width: 560px) {
  .app-brand {
    gap: 10px;
  }

  .app-brand__logo {
    max-width: 84px;
    max-height: 24px;
  }

  .app-brand__direction {
    padding-left: 10px;
    font-size: var(--fs-caption);
  }

  /* Имя не помещается рядом с логотипом и направлением — оно показано первой
     строкой раздела «Настройки». */
  .employee-header-profile {
    display: none;
  }

  .employee-setting-row {
    flex-direction: column;
    align-items: stretch;
  }

  .employee-setting-control .header-notification-btn,
  .employee-setting-control .ui-theme-toggle {
    width: 100%;
  }

  /* В настройках у кнопок есть место на подпись — прятать её, как в шапке,
     здесь не нужно. */
  .employee-setting-control .ui-theme-toggle__text,
  .employee-setting-control .header-notification-btn .notification-button-label {
    display: inline;
  }
}

.header-notification-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 9px 12px;
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  box-shadow: none;
  line-height: 1;
}

.notification-bell {
  width: 20px;
  height: 20px;
  display: inline-flex;
  flex: 0 0 20px;
  align-items: center;
  justify-content: center;
}

.notification-bell-icon {
  width: 20px;
  height: 20px;
  display: block;
  overflow: visible;
  color: currentColor;
}

.notification-bell-icon--off {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notification-bell-icon--on {
  display: none;
  fill: currentColor;
}

.header-notification-btn.is-enabled .notification-bell-icon--off {
  display: none;
}

.header-notification-btn.is-enabled .notification-bell-icon--on {
  display: block;
}

.production-plan-mobile-switch {
  display: none;
}

.header-notification-btn:hover:not(:disabled),
.header-notification-btn.is-enabled {
  color: var(--text-main);
  border-color: rgba(91, 151, 255, 0.48);
  background: rgba(79, 140, 255, 0.12);
  transform: none;
  box-shadow: none;
}

.header-notification-btn.is-enabled {
  color: #4caf50;
}

.header-notification-btn:disabled {
  opacity: 0.55;
}

.gas-mode-dept_head .dh-data-switch {
  display: grid;
  /* Колонок столько, сколько кнопок: при двух-трёх разделах сетка из
     четырёх колонок оставляла пустоту справа. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 5px;
  margin: 0 0 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-panel-radius);
  background: var(--workspace-tabstrip-bg);
}

.gas-mode-dept_head .dh-merge-switch {
  margin-bottom: 8px;
}

.gas-mode-dept_head .dh-data-switch .tab-btn {
  min-width: 0;
  min-height: var(--workspace-button-height);
  padding: 7px 10px;
  color: var(--text-muted);
  border: 1px solid var(--border-mid);
  border-radius: var(--workspace-control-radius);
  background:
    radial-gradient(circle at 100% 50%, rgba(79, 140, 255, 0.07), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)),
    var(--neo-bg);
  box-shadow: none;
  font-size: var(--fs-caption);
  font-weight: 650;
  line-height: 1.15;
  text-align: left;
  white-space: nowrap;
}

.gas-mode-dept_head .dh-data-hub > .tab-panel.active {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.production-summary-section {
  display: grid;
  gap: 10px;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.production-summary-title {
  color: var(--text-main);
  font-size: var(--fs-body-lg);
  font-weight: 620;
}

.production-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.production-metrics-grid.timing {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.production-metrics-grid.schedule {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.production-metrics-grid .stat-box {
  min-width: 0;
  padding: 10px;
}

.production-metrics-grid .metric-text {
  max-width: 100%;
  font-size: var(--fs-body-lg);
  white-space: normal;
}

.plan-acceptance-timer {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 5px;
  padding: 3px 7px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 600;
  font-style: normal;
  line-height: 1.25;
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-control-radius);
  background: rgba(255, 255, 255, 0.035);
}

.plan-acceptance-timer.is-due {
  color: #d8e5ff;
  border-color: rgba(91, 151, 255, 0.42);
  background: rgba(79, 140, 255, 0.10);
}

.plan-acceptance-timer.is-overdue {
  color: #f1cbc5;
  border-color: rgba(190, 92, 75, 0.48);
  background: rgba(190, 92, 75, 0.12);
}

/* Таймер нормы времени на задачу: обратный отсчёт, после нуля — красный и вверх. */
.plan-work-timer {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 5px;
  padding: 3px 8px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 700;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-control-radius);
  background: rgba(255, 255, 255, 0.035);
}

.plan-work-timer.is-running {
  color: #d8e5ff;
  border-color: rgba(91, 151, 255, 0.42);
  background: rgba(79, 140, 255, 0.10);
}

.plan-work-timer.is-overdue,
.production-plan-history-duration.is-overdue {
  color: #ffb3a7;
  border-color: rgba(220, 70, 50, 0.6);
  background: rgba(220, 70, 50, 0.16);
}

.plan-work-timer.is-paused {
  color: var(--warn, #c49a55);
  border-color: rgba(196, 154, 85, 0.45);
}

.plan-work-timer.is-done {
  color: #cfe9d3;
  border-color: rgba(92, 190, 120, 0.42);
  background: rgba(92, 190, 120, 0.10);
}

/* Блок нормы времени выровнен по центру: подпись, поля и подсказка. */
.production-plan-time-field {
  text-align: center;
}

.production-plan-time-inputs {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.production-plan-time-inputs label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.production-plan-time-inputs input {
  width: 72px;
}

.production-plan-time-hint {
  display: block;
  margin-top: 4px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.employee-shell-header,
.app-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
  height: var(--workspace-header-h);
  min-height: var(--workspace-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  border-bottom: 1px solid var(--border-soft);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.025), transparent 48%),
    var(--surface-header);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Цвета приоритетов Типографии подобраны под тёмный фон: на светлом те же
   оттенки дают контраст около 2.8 и цифры плана теряются. В светлой теме берём
   насыщенные версии тех же тонов. */
:root[data-theme="light"] {
  --label-priority: #5a4f78;
}

:root[data-theme="light"] :is(.label-print-priority-filter, .label-print-priority-info-popover .is-p1, .label-print-priority-info-popover .is-p2, .label-print-priority-info-popover .is-p3, .label-print-priority-info-popover .is-p4).is-p1,
:root[data-theme="light"] .label-print-priority-info-popover .is-p1 {
  --label-priority: #a4453a;
}

:root[data-theme="light"] .label-print-priority-filter.is-p2,
:root[data-theme="light"] .label-print-priority-info-popover .is-p2 {
  --label-priority: #8a5320;
}

:root[data-theme="light"] .label-print-priority-filter.is-p3,
:root[data-theme="light"] .label-print-priority-info-popover .is-p3 {
  --label-priority: #7a6519;
}

:root[data-theme="light"] .label-print-priority-filter.is-p4,
:root[data-theme="light"] .label-print-priority-info-popover .is-p4 {
  --label-priority: #5a4f78;
}

/* Тени в интерфейсе рассчитаны на тёмный фон: там объём даёт мягкое чёрное
   свечение. На светлом фоне те же тени читаются как грязь вокруг кнопок,
   поэтому в светлой теме остаётся тонкая линия отрыва, а у активных элементов
   объём передаёт цветная полоса слева, а не тень. */
:root[data-theme="light"] :is(
  .tab-btn,
  .ui-tab,
  .ui-button,
  .btn-primary,
  .entry-mode-btn,
  .nav-bar-btn,
  .header-notification-btn,
  .header-logout-btn,
  .workspace-menu__logout,
  .ui-theme-toggle,
  .picker-trigger,
  .production-today-filter,
  .mobile-tab-menu-toggle,
  .ok-tab
) {
  box-shadow: 0 1px 2px rgba(32, 30, 26, 0.07) !important;
}

:root[data-theme="light"] :is(
  .tab-btn,
  .ui-tab,
  .entry-mode-btn,
  .production-today-filter,
  .ok-tab
):is(.active, .is-active, [aria-selected="true"]) {
  box-shadow: inset 3px 0 0 var(--btn-blue) !important;
}

:root[data-theme="light"] :is(
  .card,
  .ui-panel,
  .employee-page-wrap,
  .dept-head-page-wrap,
  .employee-setting-row,
  .app-header,
  .employee-shell-header
) {
  box-shadow: none;
}

/* Логотип нарисован белым, поэтому на светлой теме его нужно перекрасить в
   цвет текста — иначе он сливается с подложкой шапки. */
:root[data-theme="light"] :is(.app-brand__logo, .local-preview-logo, .logo-box img) {
  filter: brightness(0);
  opacity: 0.82;
}

/* Шапка рабочей области: логотип и рядом — направление. */
.app-brand {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.app-brand__logo {
  display: block;
  width: auto;
  max-width: 128px;
  max-height: 30px;
}

.app-brand__logo--home {
  cursor: pointer;
}

.app-brand__direction {
  min-width: 0;
  padding-left: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-muted);
  font-size: var(--fs-body);
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  border-left: 1px solid var(--border-soft);
}

/* Кабинет во всю страницу: внешняя рамка и поля страницы убраны, оболочка
   сама держит отступы содержимого. */
/* Выход в меню: отделён от разделов, потому что завершает работу, а не ведёт
   в другой раздел. */
.workspace-menu__logout {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 18px;
  color: var(--text-muted);
  font: inherit;
  font-weight: 680;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-top: 1px solid var(--border-soft);
  border-radius: var(--workspace-shell-radius);
  cursor: pointer;
}

.workspace-menu__logout:is(:hover, :focus-visible):not(:disabled) {
  color: var(--text-main);
  border-color: var(--accent-border);
  background: var(--accent-soft);
}

.workspace-menu__logout:disabled {
  opacity: 0.6;
  cursor: default;
}

.app-header__title {
  color: var(--text-muted);
  font-size: var(--fs-body);
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.employee-header-left {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.employee-temp-deputy-link {
  flex: 0 0 auto;
  min-height: 36px;
  white-space: nowrap;
  text-decoration: none;
}

.employee-temp-deputy-link__short {
  display: none;
}

@media (max-width: 430px) {
  .employee-temp-deputy-link__full {
    display: none;
  }

  .employee-temp-deputy-link__short {
    display: inline;
  }
}

.employee-header-profile {
  max-width: min(62vw, 520px);
  overflow: hidden;
  color: var(--text-main);
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-header__profile {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  color: var(--accent-text);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--border-soft);
  text-decoration: none;
}

.employee-form-card {
  min-width: 0;
}

.employee-actor-hidden {
  display: none !important;
}

.employee-plan-head {
  margin-bottom: 18px;
}

.employee-plan-title {
  font-size: var(--fs-h3);
  line-height: 1.14;
  font-weight: 680;
  letter-spacing: 0;
}

.employee-plan-subtitle {
  margin-top: 7px;
  font-size: var(--fs-body);
  font-weight: 700;
}

.employee-plan-list,
#todayList,
.recipe-details,
.warehouse-grid {
  display: grid;
  gap: 12px;
}

.recipe-details {
  margin-top: 8px;
  gap: 8px;
}

.recipe-details > .muted:first-child {
  margin: 0;
}

.recipe-component-list {
  display: grid;
  gap: 6px;
}

.employee-plan-item,
.production-plan-card,
.today-item,
.recipe-component-card,
.warehouse-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  color: var(--text-main);
  background:
    linear-gradient(90deg, rgba(200, 88, 45, 0.16), transparent 54%),
    var(--bg-panel-soft);
  border: 1px solid rgba(200, 88, 45, 0.22);
  border-radius: var(--radius-md);
  box-shadow: inset 3px 0 0 rgba(200, 88, 45, 0.78), inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.warehouse-bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-panel-radius);
}

#dhWarehouseSelectedCount {
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 560;
}

.gas-mode-dept_head .tab-panel[data-tab="warehouse"] .stats-grid {
  grid-template-columns: minmax(180px, 280px);
  margin-bottom: 10px;
}

.gas-mode-dept_head .tab-panel[data-tab="warehouse"] .stat-box {
  min-height: 0;
  padding: 10px 12px;
}

.warehouse-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
  gap: 10px;
}

/* Потолок ширины плитки: одна-две записи не растягиваются во весь экран. */
.gas-mode-dept_head .warehouse-tile {
  max-width: 420px;
}

.dh-entries-violation-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.dh-entry-actions {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

.dh-entry-actions .btn-sm.is-violation {
  border-color: rgba(183, 90, 75, 0.7);
  color: var(--err-text);
}

.dh-entry-violation-badge {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid rgba(183, 90, 75, 0.6);
  border-radius: 999px;
  background: rgba(183, 90, 75, 0.16);
  color: var(--err-text);
  font-size: var(--fs-caption);
  font-weight: 650;
}

#dhEntriesTable tbody tr.is-violation > td {
  background: rgba(183, 90, 75, 0.09);
}

/* Запись «не в статистике»: остаётся в журнале, но зачёркнута и приглушена. */
.dh-entry-actions .btn-sm.is-excluded {
  border-color: var(--border-strong);
  color: var(--text-muted);
}

.dh-entry-excluded-badge {
  display: inline-block;
  padding: 2px 8px;
  border: 1px dashed var(--border-strong);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 650;
  white-space: nowrap;
}

#dhEntriesTable tbody tr.is-excluded > td:not(:last-child),
#entriesTable tbody tr.is-excluded > td:not(:last-child) {
  color: var(--text-muted);
  text-decoration: line-through;
}

#dhEntriesTable tbody tr.is-excluded .dh-entry-excluded-badge,
#dhEntriesTable tbody tr.is-excluded .dh-entry-violation-badge {
  text-decoration: none;
}

.gas-mode-employee .production-today-item.is-excluded strong,
.gas-mode-employee .production-today-item.is-excluded b {
  color: var(--text-muted);
  text-decoration: line-through;
}

/* Затраченное время записи: факт и норма в одной ячейке. Без нормы ячейка
   не красится — «успел» там нечему показывать. */
.dh-entry-time {
  display: inline-block;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.dh-entry-time.is-on-time {
  color: var(--ok);
}

.dh-entry-time.is-late {
  color: var(--err-text);
}

.dh-entry-time__norm {
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

#dhEntriesTable tbody tr.is-excluded .dh-entry-time,
#dhEntriesTable tbody tr.is-excluded .dh-entry-time__norm {
  color: var(--text-muted);
}

/* Пустого времени больше нет: ячейка называет причину. Это подпись, а не
   число, поэтому она приглушена и не занимает место основного значения. */
.dh-entry-time.is-missing {
  color: var(--text-muted);
  font-size: var(--fs-caption);
  white-space: normal;
}

/* Колонка «Задание»: номер задачи плана крупно, под ним — какая это сдача.
   Записи мимо задания вместо номера несут подпись, поэтому она набирается
   обычным текстом, а не табличными цифрами. */
.dh-entry-task {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}

.dh-entry-task > strong {
  font-variant-numeric: tabular-nums;
}

.dh-entry-task > small {
  color: var(--text-muted);
  font-size: var(--fs-caption);
  white-space: nowrap;
}

.dh-entry-task.is-off-task > strong {
  color: var(--text-muted);
  font-variant-numeric: normal;
  font-weight: 600;
}

/* ——— Время по товарам ———
   Десктоп — плотная таблица сравнения: два числа стоят столбиком справа
   табличными цифрами, чтобы колонку можно было прочитать одним взглядом.
   Название товара — обычный текст без подчёркивания, потому что кликабельна
   вся строка; кнопка внутри остаётся ради клавиатуры. */
.dh-position-time-link {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

#dhPositionTimeTable th:not(:first-child),
#dhPositionTimeTable td:not(:first-child) {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Числовые колонки сжимаются по содержимому: приём width 1% + nowrap. */
#dhPositionTimeTable thead th + th {
  width: 1%;
}

#dhPositionTimeTable tbody tr {
  cursor: pointer;
}

#dhPositionTimeTable tbody tr:is(:hover, :focus-within) > td {
  background: var(--surface-hover);
}

/* Мобильная раскладка: карточка товара с двумя крупными числами в ряд.
   renderTable уже отдаёт строку тремя парами «подпись — значение», поэтому
   первая пара становится заголовком, а две оставшиеся — метриками. */
#dhPositionTime .mobile-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 16px;
  padding: 12px;
  cursor: pointer;
}

/* Первая пара — название товара: подпись не нужна, значение становится
   заголовком карточки на всю ширину. */
#dhPositionTime .mobile-card > .mobile-card-row:first-child {
  flex: 1 1 100%;
  display: block;
  padding: 0 0 8px;
}

#dhPositionTime .mobile-card > .mobile-card-row:first-child .mobile-card-label {
  display: none;
}

#dhPositionTime .mobile-card > .mobile-card-row:first-child .mobile-card-value {
  color: var(--text-main);
  font-size: var(--fs-body);
  font-weight: 650;
  text-align: left;
}

/* Оставшиеся пары — метрики в ряд: число сверху, подпись под ним. */
#dhPositionTime .mobile-card > .mobile-card-row:not(:first-child) {
  flex: 1 1 40%;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 2px;
  padding: 0;
  border: 0;
}

#dhPositionTime .mobile-card > .mobile-card-row:not(:first-child) .mobile-card-value {
  color: var(--text-main);
  font-size: var(--fs-h3);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: left;
}

#dhPositionTime .mobile-card > .mobile-card-row:not(:first-child) .mobile-card-label {
  color: var(--text-muted);
  font-size: var(--fs-caption);
  text-align: left;
}

/* Окно состава товара. */
.dh-position-time-card {
  width: min(960px, 94vw);
  max-height: 88vh;
  overflow-y: auto;
}

.dh-position-time-section {
  margin-top: 16px;
}

/* Сводка в шапке окна: то, что убрано из таблицы. */
.dh-position-time-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.dh-position-time-total {
  flex: 1 1 120px;
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-control-radius);
}

.dh-position-time-total b {
  color: var(--text-main);
  font-size: var(--fs-h3);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.dh-position-time-total span {
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.dh-position-time-total.is-empty b {
  color: var(--text-faint);
}

/* Таблицы внутри окна — тот же приём: числа вправо, шапка в одну строку. */
#dhPositionTimeEmployeesTable th:not(:first-child),
#dhPositionTimeEmployeesTable td:not(:first-child),
#dhPositionTimeTasksTable th:not(:first-child),
#dhPositionTimeTasksTable td:not(:first-child) {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Имя сотрудника в столбце задач — текст, а не число: ему выравнивание влево. */
#dhPositionTimeTasksTable th:nth-child(2),
#dhPositionTimeTasksTable td:nth-child(2) {
  text-align: left;
}

/* ——— Журнал записей (11.09.2026) ———
   Статус — сегментный переключатель: три метки в одной общей рамке, одна под
   другой. Все три видны всегда, поэтому строки не прыгают, а рамка говорит,
   что это один орган управления, а не три случайных надписи. */
.dh-status-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 148px;
  margin: 0 auto;
  border: 1px solid var(--border-mid);
  border-radius: 8px;
  overflow: hidden;
}

.dh-status-chip {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 3px 9px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}

.dh-status-chip + .dh-status-chip {
  border-top: 1px solid var(--border-soft);
}

.dh-status-chip:is(:hover, :focus-visible) {
  color: var(--text-main);
  background: var(--surface-hover);
}

/* Событие подсвечено, спокойное состояние остаётся приглушённым. */
.dh-status-chip.is-pending {
  color: var(--dh-status-warn-text);
  background: var(--dh-status-warn-bg);
}

.dh-status-chip.is-posted {
  color: var(--dh-status-ok-text);
  background: var(--dh-status-ok-bg);
}

.dh-status-chip.is-violation {
  color: var(--dh-status-err-text);
  background: var(--dh-status-err-bg);
}

.dh-status-chip.is-excluded {
  color: var(--text-soft);
  background: var(--dh-status-mute-bg);
}

/* Значок подсказки рядом с названием столбца. */
.dh-status-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  min-height: 0;
  margin-left: 6px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
}

.dh-status-help:is(:hover, :focus-visible) {
  color: var(--text-main);
  border-color: var(--accent-border);
}

.dh-status-legend__row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
  align-items: center;
}

/* Плотность журнала: ячейки уже своих обычных отступов, в строке помещается
   больше записей. */
#dhEntriesTable th,
#dhEntriesTable td {
  padding-top: 6px;
  padding-bottom: 6px;
  text-align: center;
  vertical-align: middle;
}

/* Журнал записей прокручивается вместе со страницей, своей полосы у него нет:
   вложенный скролл перехватывал колесо мыши. Раз обёртка не скроллится,
   шапка липнет к странице. Таблица помещается по ширине, на телефоне она и
   вовсе становится карточками, поэтому горизонтальная прокрутка здесь не
   нужна. */
#dhEntries .table-wrap {
  overflow: visible;
}

/* Ненавязчивое деление столбцов. */
#dhEntriesTable tbody td + td,
#dhEntriesTable thead th + th {
  border-left: 1px solid var(--border-soft);
}

/* Имя сотрудника и название позиции читают, а не сравнивают: им левый край.
   Первый столбец — флажки, поэтому смысловые столбцы начинаются со второго. */
#dhEntriesTable th:nth-child(4),
#dhEntriesTable td:nth-child(4),
#dhEntriesTable th:nth-child(5),
#dhEntriesTable td:nth-child(5) {
  text-align: left;
}

/* Столбец флажков: виден только в срезе «Не внесено», отделён от номера
   задания более заметной линией, чем остальные столбцы. */
#dhEntriesTable th:first-child,
#dhEntriesTable td:first-child {
  display: none;
}

#dhEntries.is-picking #dhEntriesTable th:first-child,
#dhEntries.is-picking #dhEntriesTable td:first-child {
  display: table-cell;
  width: 1%;
  padding-left: 12px;
  padding-right: 12px;
  border-right: 1px solid var(--border-mid);
}

#dhEntriesTable td:first-child .warehouse-select {
  justify-content: center;
  width: 100%;
}

/* Ожидающий запрос на изменение виден рамкой вокруг позиции. */
.dh-entry-position {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.dh-entry-position.has-request {
  padding: 4px 8px;
  margin: -4px -8px;
  border: 1px solid var(--accent-border);
  border-radius: var(--workspace-control-radius);
  background: var(--accent-soft);
}

/* Позиция открывает карточку товара. Раньше кнопка выглядела просто жирным
   текстом, и о том, что по ней можно нажать, сообщал только hover — на ощупь
   это читалось как заголовок. Теперь вид ссылки: цвет и подчёркивание видны
   сразу, семантика остаётся кнопкой. */
.dh-entry-position__name {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: none;
  color: var(--accent-text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent-border);
  cursor: pointer;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.dh-entry-position__name:is(:hover, :focus-visible) {
  color: var(--text-main);
  text-decoration-color: currentColor;
}

/* Общий hover кнопок подставляет градиентную подложку, рамку, свечение и сдвиг
   на пиксель вверх. На тексте-ссылке это выглядит как случайное выделение
   мышью, поэтому здесь чрома кнопки снимается — остаются цвет и подчёркивание. */
.dh-entry-position__name:hover:not(:disabled),
.dh-entry-position__name:focus-visible,
.dh-entry-position__name:active {
  background: none;
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

.dh-entry-position__name:focus-visible {
  outline: 2px solid var(--accent-border);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .dh-entry-position__name {
    transition: none;
  }
}

.dh-entry-request {
  flex: 0 0 auto;
  padding: 1px 8px;
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  background: none;
  color: var(--accent-text);
  font: inherit;
  font-size: var(--fs-caption);
  font-weight: 650;
  cursor: pointer;
}

/* Количество и затраченное время в одной ячейке. */
.dh-entry-qty {
  display: grid;
  gap: 2px;
  justify-items: center;
  font-variant-numeric: tabular-nums;
}

.dh-entry-qty > b {
  font-weight: 650;
}

/* ——— Мобильная карточка записи: плоская ———
   Раскрывать нечего: сверху полоса состояния склада с датой (цвет = чип),
   ниже позиция и число, строка «задание · сотрудник · время», отдельной
   строкой только нарушение или исключение. Группы разделены пространством,
   не линиями; радиус карточки = радиус полосы + 0 (полоса вплотную). Разметку
   собирает dept-head.js из тех же пар «подпись — значение». */
#dhEntries .mobile-card {
  padding: 0;
  overflow: hidden;
}

.dh-card--flat {
  display: grid;
  gap: 8px;
  padding-block-end: 12px;
  cursor: default;
}

#dhEntries .mobile-card:has(.dh-card--flat[data-pick-id]) {
  cursor: pointer;
}

.dh-card__band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  padding-inline: 12px;
  background: rgba(255, 255, 255, 0.04);
}

.dh-card--flat.is-pending .dh-card__band {
  background: color-mix(in srgb, var(--warn) 16%, transparent);
}

.dh-card--flat.is-posted .dh-card__band {
  background: color-mix(in srgb, var(--ok) 16%, transparent);
}

/* Чип склада в полосе — та же кнопка, что и в таблице, без своей подложки. */
.dh-card__state .dh-status-chip {
  width: auto;
  min-height: 36px;
  padding-inline: 0;
  text-align: start;
  font-size: var(--fs-caption);
  font-weight: 700;
  box-shadow: none;
}

.dh-card__state .dh-status-chip.is-pending { background: none; color: var(--warn); }
.dh-card__state .dh-status-chip.is-posted { background: none; color: var(--ok); }
.dh-card__state .dh-status-chip:is(:hover, :focus-visible) { background: none; text-decoration: underline; }

.dh-card__when {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
}

.dh-card__main,
.dh-card__meta,
.dh-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-inline: 12px;
}

.dh-card__main > *,
.dh-card__meta > * {
  min-width: 0;
}

.dh-card__pos {
  flex: 1 1 auto;
  color: var(--text-main);
  font-size: var(--fs-body);
  font-weight: 650;
  line-height: 1.3;
}

.dh-card__qty {
  flex: 0 0 auto;
  color: var(--text-main);
  font-size: var(--fs-h3);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dh-card__who {
  flex: 1 1 auto;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dh-card__time {
  flex: 0 0 auto;
  color: var(--text-main);
  font-size: var(--fs-caption);
  text-align: end;
}

/* Нарушение и исключение — отдельная строка, только когда они есть. */
.dh-card__flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-inline: 12px;
}

.dh-card__flags .dh-status-chip {
  width: auto;
  min-height: 28px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: var(--fs-caption);
}

.dh-card__flags .dh-status-chip.is-violation { background: color-mix(in srgb, var(--err) 18%, transparent); color: var(--err); }
.dh-card__flags .dh-status-chip.is-excluded { background: rgba(255, 255, 255, 0.08); }

/* Выбранная запись: рамка и галочка справа внизу. */
#dhEntries .mobile-card:has(.dh-card--flat.is-picked) {
  border-color: var(--accent-border);
  background: var(--accent-soft);
}

.dh-card__tick {
  display: none;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: var(--workspace-control-radius);
  background: rgba(74, 137, 220, 0.62);
  color: #f4fbff;
  font-size: var(--fs-caption);
  font-weight: 850;
  line-height: 1;
}

.dh-card--flat.is-picked .dh-card__tick {
  display: grid;
}

.dh-card__actions {
  display: flex;
  gap: 8px;
}

/* В раскрытой карточке переключатель занимает всю ширину, а метка становится
   полноценной целью нажатия. */
#dhEntries .mobile-card .dh-status-cell {
  width: 100%;
  margin: 0;
}

#dhEntries .mobile-card .dh-status-chip {
  min-height: 34px;
  padding: 4px 8px;
}

.dh-entry-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* Срезы журнала и панель массового внесения. */
.dh-entries-views {
  margin-bottom: 10px;
}

.dh-entries-views__count {
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: var(--fs-caption);
  font-weight: 650;
}

.dh-entries-bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 10px 12px;
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-control-radius);
}

.dh-entries-bulk > span {
  margin-right: auto;
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

/* Подробно о записи: подпись слева, значение справа. */
.dh-entry-info {
  display: grid;
  gap: 0;
  margin-top: 12px;
}

.dh-entry-info__row {
  display: grid;
  grid-template-columns: minmax(120px, 0.6fr) minmax(0, 1.4fr);
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
}

.dh-entry-info__row > span {
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 650;
}

.dh-entry-info__row > div {
  color: var(--text-main);
  min-width: 0;
}

.dh-entry-warehouse-note {
  color: var(--err-text);
}

.dh-entry-edit-fields textarea {
  width: 100%;
  resize: vertical;
}

.dh-entry-edit-fields .dh-entry-edit-fields__wide {
  grid-column: 1 / -1;
}

.warehouse-tile {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  align-items: stretch;
  justify-content: stretch;
  gap: 7px;
  padding: 10px;
  border-radius: var(--workspace-panel-radius);
}

.gas-mode-dept_head .warehouse-tile {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.008)),
    var(--bg-panel-soft);
  border-color: var(--border-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.warehouse-tile-header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.warehouse-select {
  /* Без этого скрытый input позиционируется относительно далёкого предка, и
     браузер при фокусе прокручивает страницу к нему — страница «прыгала». */
  position: relative;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}

.warehouse-select input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.warehouse-checkmark {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-strong);
  border-radius: var(--workspace-control-radius);
}

.warehouse-select input:checked + .warehouse-checkmark {
  color: #f4fbff;
  background: rgba(74, 137, 220, 0.62);
  border-color: rgba(101, 164, 246, 0.92);
}

.warehouse-select input:checked + .warehouse-checkmark::after {
  content: "✓";
  font-size: var(--fs-caption);
  line-height: 1;
}

.warehouse-select input:focus-visible + .warehouse-checkmark {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.warehouse-tile-id {
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 560;
}

.warehouse-tile-qty {
  flex: 0 0 auto;
  padding: 4px 7px;
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-control-radius);
  font-size: var(--fs-caption);
  font-weight: 620;
}

.warehouse-tile-employee {
  color: var(--text-muted);
  font-size: var(--fs-caption);
  line-height: 1.2;
}

.warehouse-tile-position {
  min-height: 30px;
  color: var(--text-main);
  font-size: var(--fs-caption);
  font-weight: 620;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.warehouse-tile-meta {
  min-width: 0;
  display: grid;
  gap: 3px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  line-height: 1.2;
}

.warehouse-status-pending {
  width: fit-content;
  padding: 3px 6px;
  color: #d9b7a6;
  background: rgba(176, 78, 44, 0.12);
  border: 1px solid rgba(200, 88, 45, 0.26);
  border-radius: var(--workspace-control-radius);
}

.status-badge {
  width: fit-content;
  max-width: 100%;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-control-radius);
  font-size: var(--fs-caption);
  font-weight: 620;
  line-height: 1.15;
  white-space: nowrap;
}

.status-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  background: #8d918d;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(141, 145, 141, 0.1);
}

.status-badge.status-ok {
  color: #c5e5cd;
  background: rgba(64, 137, 82, 0.13);
  border-color: rgba(91, 166, 109, 0.3);
}

.status-badge.status-ok::before {
  background: #67b77a;
  box-shadow: 0 0 0 3px rgba(103, 183, 122, 0.12);
}

.status-badge.status-pending {
  color: #e0c89f;
  background: rgba(176, 122, 44, 0.13);
  border-color: rgba(204, 151, 73, 0.3);
}

.status-badge.status-pending::before {
  background: #d3a252;
  box-shadow: 0 0 0 3px rgba(211, 162, 82, 0.12);
}

.status-badge.status-error {
  color: #e0b5b1;
  background: rgba(166, 70, 62, 0.13);
  border-color: rgba(194, 91, 82, 0.3);
}

.status-badge.status-error::before {
  background: #ca6d64;
  box-shadow: 0 0 0 3px rgba(202, 109, 100, 0.12);
}

.status-badge.status-neutral {
  color: var(--text-muted);
}

.warehouse-tile > .warehouse-post-btn {
  width: 100%;
  min-height: 34px;
  justify-content: center;
  margin-top: 2px;
  font-size: var(--fs-caption);
}

.warehouse-tile.is-selected {
  border-color: rgba(101, 164, 246, 0.72);
  box-shadow: inset 3px 0 0 rgba(101, 164, 246, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.recipe-component-card {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(220px, 1.8fr) minmax(92px, 0.55fr);
  align-items: center;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.recipe-component-type,
.recipe-component-name,
.recipe-component-qty {
  min-width: 0;
  min-height: 46px;
  display: flex;
  align-items: center;
  padding: 10px 14px;
  line-height: 1.2;
}

.recipe-component-type {
  color: var(--text-main);
  font-weight: 680;
}

.recipe-component-name {
  justify-content: center;
  border-left: 1px solid rgba(255, 255, 255, 0.075);
  border-right: 1px solid rgba(255, 255, 255, 0.075);
  text-align: center;
  overflow-wrap: anywhere;
}

.recipe-component-qty {
  justify-content: flex-end;
  color: var(--text-main);
  font-weight: 680;
  text-align: right;
  white-space: nowrap;
}

.employee-plan-item:hover,
.production-plan-card:hover,
.today-item:hover {
  background:
    linear-gradient(90deg, rgba(200, 88, 45, 0.22), transparent 58%),
    var(--surface-hover);
}

.employee-plan-item-main {
  min-width: 0;
  display: grid;
  gap: 4px;
  text-align: left;
}

.employee-plan-item-main strong {
  display: block;
}

.employee-plan-item-main em {
  display: block;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-style: normal;
  font-weight: 560;
  line-height: 1.2;
}

.employee-plan-status,
.plan-action-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: var(--workspace-panel-radius);
  font-size: var(--fs-caption);
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
}

.employee-plan-status.is-new,
.plan-action-status.is-new {
  color: #cfc8bc;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.employee-plan-status.is-started,
.plan-action-status.is-started {
  color: #dfe8d2;
  background: rgba(143, 159, 120, 0.16);
  border: 1px solid rgba(143, 159, 120, 0.24);
}

.employee-plan-status.is-complete,
.plan-action-status.is-complete {
  color: #dff3df;
  background: rgba(66, 150, 95, 0.18);
  border: 1px solid rgba(66, 150, 95, 0.32);
}

/* Доливка у сотрудника (18.09.2026): полоса слева, тонированный фон и
   залитая плашка над названием — видно с расстояния, не только вблизи. */
.employee-plan-item.is-refill,
.plan-action-sheet.is-refill {
  border-color: var(--accent-border);
  box-shadow: inset 5px 0 0 var(--accent);
  background:
    linear-gradient(90deg, rgba(200, 88, 45, 0.20), rgba(200, 88, 45, 0.04) 70%),
    var(--bg-panel);
}

.employee-plan-refill-banner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 3px 10px 3px 8px;
  border-radius: var(--workspace-control-radius);
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.employee-plan-refill-banner .ico {
  font-size: 14px;
}

.plan-action-title .employee-plan-refill-banner {
  display: flex;
  margin-bottom: 8px;
  font-size: var(--fs-body);
}

.employee-plan-item.is-complete {
  border-color: rgba(66, 150, 95, 0.26);
  background:
    linear-gradient(90deg, rgba(66, 150, 95, 0.13), rgba(255, 255, 255, 0.012) 58%),
    var(--bg-panel);
}

.plan-action-complete-btn {
  border-color: rgba(66, 150, 95, 0.54);
  background:
    linear-gradient(135deg, rgba(66, 150, 95, 0.40), rgba(66, 150, 95, 0.16)),
    #25352a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    var(--btn-accent-shadow);
}

.employee-plan-item-qty,
.employee-plan-qty,
.production-plan-qty,
.today-item-qty {
  min-width: 48px;
  padding: 7px 12px;
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-pill);
  text-align: center;
}

.entry-mode-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: var(--workspace-filter-gap-bottom);
  padding: 5px;
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-panel-radius);
  background: var(--workspace-tabstrip-bg);
}

.entry-mode-row.is-two-mode {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.entry-mode-row .entry-mode-btn {
  min-width: 0;
  min-height: 38px;
  padding: 7px 10px;
  justify-content: flex-start;
  color: var(--text-muted);
  border-color: var(--border-mid);
  border-radius: var(--workspace-control-radius);
  background:
    radial-gradient(circle at 100% 50%, rgba(79, 140, 255, 0.07), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)),
    var(--neo-bg);
  box-shadow: none;
  font-size: var(--fs-caption);
  font-weight: 650;
  line-height: 1.15;
  text-align: left;
  white-space: normal;
}

.entry-mode-row .entry-mode-btn.active {
  color: var(--text-main);
  border-color: rgba(115, 166, 255, 0.7);
  background:
    linear-gradient(90deg, rgba(79, 140, 255, 0.28), rgba(79, 140, 255, 0.08) 44%, rgba(255, 255, 255, 0.025)),
    var(--surface-active);
  box-shadow:
    inset 3px 0 0 rgba(115, 166, 255, 0.92),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.employee-entry-mode-panel {
  display: grid;
  min-width: 0;
  gap: 0;
}

#submitBtn {
  position: relative;
  display: none;
  width: min(100%, 230px);
  margin-left: auto;
  justify-content: center;
  margin-top: 14px;
  color: var(--action-text);
  background: var(--action-bg);
  border-color: var(--action-border);
  box-shadow: var(--btn-accent-shadow);
}

#submitBtn.is-quantity-ready {
  display: flex;
}

#submitBtn:hover:not(:disabled) {
  color: var(--action-text);
  background: var(--action-bg);
  border-color: var(--action-border);
  box-shadow: var(--btn-accent-shadow);
  filter: brightness(1.08);
}

.picker-trigger {
  justify-content: space-between;
  text-align: left;
}

.picker-trigger::after,
.account-header__back::after,
#submitBtn::after,
#defectBtn::after {
  content: none;
}

.picker-trigger-icon {
  margin-left: auto;
}

.today-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.today-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 8px;
  margin-bottom: 14px;
  background: var(--surface-3);
  border-radius: var(--radius-md);
}

.today-section {
  display: none;
}

.today-section.active {
  display: grid;
  gap: 12px;
}

.today-section-title {
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.account-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.gas-mode-account .wrap,
.gas-mode-invalid .wrap {
  max-width: 980px;
}

.account-header__back {
  min-height: 44px;
}

.account-header__name {
  font-size: var(--fs-h1);
  font-weight: 850;
}

.account-chart-wrap {
  padding: 14px;
  margin-bottom: 14px;
}

.account-chart-wrap::before {
  content: "Количество, шт. · последние 14 дней";
  display: block;
  margin-bottom: 10px;
  color: var(--text-soft);
  font-size: var(--fs-body);
  font-weight: 650;
}

.local-account-chart {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
  height: 190px;
}

.local-account-bar {
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.local-account-bar span {
  width: 100%;
  min-height: 8px;
  display: block;
  border-radius: var(--workspace-panel-radius) var(--workspace-panel-radius) var(--workspace-control-radius) var(--workspace-control-radius);
  background: linear-gradient(180deg, #d76638, #c8582d);
  box-shadow: 0 8px 24px rgba(200, 88, 45, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.local-account-bar em {
  margin-top: 7px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-style: normal;
  font-weight: 750;
}

.account-table {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  table-layout: fixed;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.030), rgba(255, 255, 255, 0.010)),
    var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.account-table th:first-child,
.account-table td:first-child {
  width: auto;
  overflow-wrap: anywhere;
}

.account-table th:last-child,
.account-table td:last-child {
  width: 126px;
  text-align: right;
  white-space: nowrap;
}

.picker-modal,
.plan-action-modal,
.schedule-edit-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 18px;
}

.picker-modal.hidden,
.plan-action-modal.hidden,
.schedule-edit-modal.hidden {
  display: none !important;
}

.picker-modal-backdrop,
.plan-action-backdrop,
.schedule-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(8px);
}

.picker-sheet,
.plan-action-sheet,
.schedule-modal-card {
  position: relative;
  z-index: 1;
  width: min(100%, 680px);
  max-height: min(86dvh, 720px);
  padding: 20px;
  overflow: auto;
  /* Поверхность окна — тот же токен панели, что и у карточек: жёсткий
     #1d1d1b держал карточку тёмной и на светлой теме, а заголовок и текст
     переключались на тёмные токены и пропадали. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.014)),
    var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-shell-radius);
  box-shadow:
    var(--shadow-shell),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

/* Блик по верхней кромке — приём тёмной темы. На светлой панели он читается
   белой полосой, поэтому там остаётся только тень. */
:root[data-theme="light"] :is(.picker-sheet, .plan-action-sheet, .schedule-modal-card) {
  box-shadow: var(--shadow-shell);
}

.plan-action-sheet {
  width: min(100%, 460px);
  display: grid;
  align-content: start;
}

.plan-action-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  min-height: var(--workspace-control-height);
  padding: 0;
  justify-content: center;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.10);
  border-radius: var(--workspace-panel-radius);
  box-shadow: none;
}

.plan-action-close::after {
  content: none;
}

.plan-action-title {
  max-width: calc(100% - 42px);
  margin-bottom: 14px;
  color: var(--text-main);
  font-size: var(--fs-h2);
  font-weight: 680;
  line-height: 1.2;
}

.plan-action-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

/* Что выдал склад под задачу: вес, палето-место и записка кладовщика. Без
   этого блока разливщик шёл к складу выяснять всё ногами. */
.plan-action-materials {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-2);
}

.plan-materials-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.plan-materials-title {
  font-weight: 600;
}

.plan-materials-place {
  font-size: var(--fs-caption);
  color: var(--muted);
}

.plan-materials-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--fs-caption);
}

.plan-materials-row span {
  min-width: 0;
  color: var(--muted);
}

.plan-materials-comment {
  margin: 4px 0 0;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-caption);
  line-height: 1.45;
  white-space: pre-line;
}

/* Рабочее место руководителя: форма записи выработки за сотрудника. */
.dh-workplace-form {
  display: grid;
  gap: 12px;
  max-width: 640px;
}

.dh-workplace-plan {
  display: grid;
  gap: 8px;
}

.dh-workplace-plan .employee-plan-item.is-complete {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.dh-workplace-finish {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-caption);
}

/* На телефоне единственная кнопка формы — во всю ширину, как поля над ней. */
@media (max-width: 768px) {
  .dh-workplace-form .schedule-modal-actions > .btn-primary {
    width: 100%;
  }
}

.dh-notif-log-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.dh-notif-log-controls .search-wrap {
  flex: 1 1 240px;
  margin: 0;
}

.dh-notif-log-failed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-caption);
  white-space: nowrap;
}

.plan-materials-state {
  margin: 4px 0 0;
  font-size: var(--fs-caption);
  color: var(--muted);
}

.plan-materials-return {
  width: 100%;
  margin-top: 4px;
}

.plan-action-metric {
  min-width: 0;
  min-height: 56px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5px;
  padding: 8px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--workspace-panel-radius);
  text-align: center;
}

.plan-action-metric span {
  font-size: var(--fs-caption);
  font-weight: 650;
  line-height: 1;
}

.plan-action-metric strong {
  color: var(--text-main);
  font-size: var(--fs-body-lg);
  font-weight: 680;
  line-height: 1;
  white-space: nowrap;
}

.plan-action-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  margin-top: 14px;
}

.plan-action-subtitle {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: center;
  gap: 8px;
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 620;
}

.plan-action-actions {
  display: flex;
  align-items: center;
  align-self: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  /* У задачи в работе две кнопки и строка-подсказка. В один ряд они помещаются
     только на широком экране, поэтому подсказка занимает свою строку, а на
     узком туда же переносятся и сами кнопки. */
  flex-wrap: wrap;
}

.plan-action-note {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--fs-caption);
  line-height: 1.4;
  text-align: right;
  color: var(--muted);
}

@media (max-width: 560px) {
  .plan-action-actions {
    justify-content: stretch;
  }

  .plan-action-actions .btn-primary,
  .plan-action-actions .ui-button {
    flex: 1 1 100%;
    width: 100%;
  }

  .plan-action-note {
    text-align: left;
  }
}

.plan-action-actions .btn-primary {
  width: auto;
  min-width: 132px;
  min-height: 46px;
  justify-content: center;
  margin: 0;
  padding-inline: 18px;
  white-space: nowrap;
}

.picker-sheet-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.picker-close-btn {
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  justify-content: center;
}

.picker-close-btn::after {
  content: none;
}

.picker-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.schedule-workspace {
  min-width: 0;
}

.schedule-toolbar {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.schedule-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  margin-bottom: 12px;
  background: var(--workspace-tabstrip-bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-panel-radius);
}

.schedule-toolbar .schedule-mode-switch {
  flex: 0 1 430px;
  width: min(100%, 430px);
  margin-bottom: 0;
}

.schedule-toolbar-month {
  flex: 0 1 260px;
  width: min(100%, 260px);
  max-width: 260px;
}

.schedule-editor-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.schedule-mode-btn {
  width: 100%;
  min-height: 38px;
  justify-content: center;
  padding: 7px 10px;
  color: var(--text-muted);
  border: 1px solid var(--border-mid);
  border-radius: var(--workspace-control-radius);
  background:
    radial-gradient(circle at 100% 50%, rgba(79, 140, 255, 0.07), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)),
    var(--neo-bg);
  box-shadow: none;
  font-size: var(--fs-caption);
  font-weight: 650;
}

.schedule-mode-btn:hover {
  color: var(--text-main);
  border-color: rgba(91, 151, 255, 0.42);
  background:
    radial-gradient(circle at 100% 50%, rgba(79, 140, 255, 0.15), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.026)),
    var(--neo-bg-hover);
  transform: none;
}

.schedule-mode-btn.active {
  color: var(--text-main);
  border-color: rgba(115, 166, 255, 0.7);
  background:
    linear-gradient(90deg, rgba(79, 140, 255, 0.28), rgba(79, 140, 255, 0.08) 44%, rgba(255, 255, 255, 0.025)),
    var(--surface-active);
  box-shadow:
    inset 3px 0 0 rgba(115, 166, 255, 0.92),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.schedule-month-workspace,
.schedule-ops-workspace {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.schedule-ops-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 240px);
  gap: 14px;
  align-items: end;
  padding: 12px;
  background: rgba(255, 255, 255, 0.018);
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-panel-radius);
}

.schedule-ops-month-field {
  margin: 0;
}

.schedule-ops-days {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-panel-radius);
  background: rgba(0, 0, 0, 0.14);
}

.schedule-ops-weekday {
  min-width: 0;
  padding: 2px 4px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 650;
  text-align: center;
  text-transform: uppercase;
}

.schedule-ops-day-placeholder {
  min-width: 0;
  min-height: 42px;
}

.schedule-ops-day {
  min-width: 0;
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 4px;
  padding: 8px 9px;
  color: var(--text-muted);
  text-align: left;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.012)),
    rgba(24, 24, 23, 0.78);
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-panel-radius);
  box-shadow: none;
  font-size: var(--fs-caption);
  font-weight: 600;
}

.schedule-ops-day strong {
  color: var(--text-soft);
  font-size: var(--fs-caption);
  font-weight: 650;
}

.schedule-ops-day small {
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.schedule-ops-day.selected-window-distance-0,
.schedule-ops-day.selected-window-distance-1 {
  color: var(--text-soft);
  border-color: rgba(91, 151, 255, 0.42);
  background:
    linear-gradient(135deg, rgba(91, 151, 255, 0.22), rgba(91, 151, 255, 0.055)),
    rgba(24, 24, 23, 0.82);
  transform: none;
  box-shadow: none;
}

.schedule-ops-day.selected-window-distance-2,
.schedule-ops-day.selected-window-distance-3 {
  color: var(--text-soft);
  border-color: rgba(91, 151, 255, 0.3);
  background:
    linear-gradient(135deg, rgba(91, 151, 255, 0.14), rgba(91, 151, 255, 0.035)),
    rgba(24, 24, 23, 0.8);
  transform: none;
  box-shadow: none;
}

.schedule-ops-day.preview-window-distance-0,
.schedule-ops-day.preview-window-distance-1,
.schedule-ops-day.preview-window-distance-2,
.schedule-ops-day.preview-window-distance-3 {
  color: var(--text-soft);
  border-color: rgba(198, 148, 78, 0.34);
  background: rgba(198, 148, 78, 0.055);
  box-shadow: none;
}

.schedule-ops-day.active {
  color: var(--text-main);
  background:
    linear-gradient(135deg, rgba(91, 151, 255, 0.36), rgba(91, 151, 255, 0.08)),
    var(--bg-control);
  border-color: rgba(111, 169, 255, 0.78);
  box-shadow:
    inset 3px 0 0 rgba(111, 169, 255, 0.96),
    0 0 0 1px rgba(91, 151, 255, 0.14);
}

.schedule-ops-day.active.preview-window-distance-0 {
  border-color: rgba(210, 158, 84, 0.58);
  box-shadow: inset 3px 0 0 rgba(210, 158, 84, 0.82);
}

.schedule-ops-grid {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.schedule-ops-selection-bar {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-panel-radius);
  background: rgba(255, 255, 255, 0.018);
}

.schedule-ops-selection-bar > span {
  min-width: 0;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  line-height: 1.3;
}

.schedule-ops-selection-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 7px;
}

.schedule-ops-selection-actions button {
  width: auto;
  min-height: 32px;
  padding: 5px 9px;
  font-size: var(--fs-caption);
}

.schedule-ops-table-wrap {
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-panel-radius);
}

.schedule-ops-table {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  table-layout: fixed;
  background: rgba(255, 255, 255, 0.012);
}

.schedule-ops-table th,
.schedule-ops-table td {
  padding: 5px 7px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.052);
  border-right: 1px solid rgba(255, 255, 255, 0.04);
}

.schedule-ops-table th {
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 650;
  text-transform: uppercase;
}

.schedule-ops-table thead th:not(:first-child) {
  text-align: center;
}

.schedule-ops-table thead th.schedule-ops-active-day {
  color: var(--text-main);
  background: rgba(91, 151, 255, 0.16);
  box-shadow: inset 2px 0 0 rgba(91, 151, 255, 0.72), inset -2px 0 0 rgba(91, 151, 255, 0.72);
}

.schedule-ops-table tbody td.schedule-ops-active-day {
  box-shadow: inset 2px 0 0 rgba(91, 151, 255, 0.62), inset -2px 0 0 rgba(91, 151, 255, 0.62);
  filter: brightness(1.12);
}

.schedule-ops-table thead th span,
.schedule-ops-table thead th strong {
  display: inline;
  margin-right: 3px;
}

.schedule-ops-table th:first-child {
  width: 126px;
  text-align: left;
}

.schedule-ops-table tbody th,
.schedule-ops-table tbody td {
  height: 44px;
}

.schedule-ops-table tbody td {
  cursor: pointer;
}

.schedule-ops-table .schedule-time,
.schedule-ops-table .schedule-status-text,
.schedule-ops-table .schedule-plus {
  font-size: var(--fs-caption);
}

/* Склад сырья: вкладка кладовщика в кабинете сотрудника (мобильная в первую очередь). */
.rw-segments { display: flex; gap: 8px; margin-bottom: 12px; }
.rw-segment-btn {
  flex: 1;
  padding: 10px 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.rw-segment-btn.active { background: var(--accent-soft); border-color: var(--accent); }
.rw-progress { font-weight: 600; margin-bottom: 10px; }
.rw-warning { color: var(--warn); margin: 8px 0; }
.rw-card { padding: 12px; margin-bottom: 12px; }
.rw-card__title { font-weight: 700; margin-bottom: 8px; }
.rw-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 8px;
  margin-bottom: 6px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.rw-item__check {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 6px;
  border: 2px solid var(--border);
}
.rw-task {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 10px;
  margin-bottom: 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.rw-task.is-done { border-color: var(--ok); }
.rw-task.is-done .rw-task__queue { background: var(--ok); color: var(--bg-page, #fff); }
.rw-task__queue {
  flex: 0 0 auto;
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 8px;
  background: var(--accent-soft);
  font-weight: 700;
}
.rw-input { min-width: 0; }
.rw-input--weight { flex: 0 0 96px; }
.rw-input--place { flex: 1 1 0; }

/* Записка разливщика при возврате: кладовщик читает её перед взвешиванием. */
.rw-modal__note {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface-2);
  font-size: var(--fs-caption);
  line-height: 1.45;
  white-space: pre-line;
}

/* Записка разливщику: одна на выдачу, рядом с палето-местом. */
.rw-modal__comment {
  display: grid;
  gap: 4px;
  margin: 8px 0 4px;
}

.rw-input--comment {
  width: 100%;
  resize: vertical;
  min-height: 56px;
}
.rw-action { flex: 0 0 auto; }
.rw-item__done { font-size: 0.85em; color: var(--ok); }
.rw-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
}
.rw-modal.hidden { display: none; }
.rw-modal .rw-modal__panel {
  width: 100%;
  max-width: 560px;
  max-height: 86vh;
  overflow-y: auto;
  padding: 16px 14px calc(16px + env(safe-area-inset-bottom));
  border-radius: 14px 14px 0 0;
  /* Собственный непрозрачный фон обязателен. Класс .ui-panel даёт
     --surface-2, а это полупрозрачный токен для панелей ВНУТРИ страницы: он
     рассчитан на фон оболочки под собой. В top layer <dialog> под панелью
     только затемнение, и окно читается как стеклянное.
     Селектор двухуровневый намеренно: ui-kit/workspace-template.css
     подключается на страницах ПОСЛЕ styles.css, поэтому при равной
     специфичности .ui-panel перебивает правило этого модуля. */
  background: var(--bg-panel);
  border: 1px solid var(--border-mid);
  box-shadow: var(--shadow-shell);
}
@media (min-width: 769px) {
  .rw-modal { align-items: center; }
  .rw-modal__panel { border-radius: 14px; }
}
.rw-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.rw-modal__title { font-weight: 700; font-size: 1.05em; }
.rw-modal__close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.rw-modal__hint { margin-bottom: 8px; }
.rw-modal__list { display: flex; flex-direction: column; gap: 8px; }
.rw-modal__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
}
.rw-modal__row .rw-item__body { flex: 1 1 auto; min-width: 0; }
.rw-modal__footer { display: flex; gap: 10px; margin-top: 14px; }
.rw-item.is-done .rw-item__check { background: var(--ok); border-color: var(--ok); }
.rw-item__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rw-item__name { font-weight: 600; }
.rw-item__meta { font-size: 0.85em; color: var(--muted); }
.rw-divider { border: 0; border-top: 1px solid var(--border); margin: 12px 0; }
.rw-catalog-toolbar { display: flex; gap: 8px; margin-bottom: 8px; }
.rw-catalog-toolbar input { flex: 1; min-width: 0; }
.rw-sync-status { font-size: 0.85em; color: var(--muted); margin-bottom: 10px; }
.rw-catalog-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border-soft);
}
.rw-catalog-row__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rw-flag { color: var(--warn); font-style: normal; font-size: 0.85em; }
/* Карточка склада сырья над планом производства. Раньше это была .ui-panel с
   min-height 280px: пустая коробка высотой в пол-экрана с одной строкой текста.
   Здесь высота идёт по содержимому, а сводка разложена на три счётчика. */
.dh-raw-warehouse {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-panel-radius);
  background: var(--surface-2);
}

.dh-raw-warehouse__head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
}

.dh-raw-warehouse__title {
  font-size: var(--fs-body);
  font-weight: 700;
}

.dh-raw-warehouse__date {
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
}

.dh-raw-warehouse__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.dh-raw-warehouse__stat {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-control-radius);
  background: rgba(255, 255, 255, 0.025);
}

.dh-raw-warehouse__stat span {
  color: var(--text-muted);
  font-size: var(--fs-caption);
  line-height: 1.2;
  text-transform: uppercase;
}

.dh-raw-warehouse__stat strong {
  font-size: var(--fs-body);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.dh-raw-warehouse__stat.is-attention strong { color: var(--warn); }
.dh-raw-warehouse__stat.is-alert strong { color: var(--danger); }

.dh-raw-warehouse__pending {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dh-raw-warehouse__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 9px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-main);
  font-size: var(--fs-caption);
}

.dh-raw-warehouse__chip b {
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(115, 166, 255, 0.18);
  font-variant-numeric: tabular-nums;
}

.dh-raw-warehouse__chip i {
  color: var(--text-muted);
  font-style: normal;
}

.dh-raw-warehouse__chip.is-done {
  color: var(--text-muted);
}

@media (max-width: 560px) {
  .dh-raw-warehouse__stats { grid-template-columns: minmax(0, 1fr); }
}
/* Внесение позиции: пошаговая форма создания товара, этикетки и неоклеенного товара в МоемСкладе. */
/* Шапка блоков раздела (форма шагов и штрихкоды группы «Прочее»). */
.moysklad-positions__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-block-end: 12px;
}
.moysklad-positions__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.msp-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-block-end: 8px;
}
.msp-head h2 { margin: 0; }
.msp-head__source {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-caption);
}
.msp-head__source:empty { display: none; }
.moysklad-positions__status {
  margin-block-end: 12px;
  color: var(--muted);
}
.moysklad-positions__status:empty { margin-block-end: 0; }
.moysklad-positions__status.is-warning { color: var(--warn); }
.moysklad-positions__status.is-error { color: var(--danger); }

/* Шаги: номер + подпись, текущий — рамкой акцента, пройденные — цветом «ок». */
.msp-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  margin-block-end: 16px;
  padding: 0;
  list-style: none;
}
.msp-steps__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--muted);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition-property: border-color, color;
  transition-duration: 150ms;
}
.msp-steps__item:hover,
.msp-steps__item:focus-visible { border-color: var(--accent); }
.msp-steps__item[aria-current="step"] {
  border-color: var(--accent);
  color: var(--text-main);
  font-weight: 600;
}
.msp-steps__item.is-done { color: var(--ok); }
.msp-steps__num {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  inline-size: 24px;
  block-size: 24px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
}

/* Шаг внесения: форма читается столбцом, поэтому её ширина ограничена — на
   широком экране поле поиска растягивалось на весь кабинет, а кнопка «Далее»
   улетала к дальнему краю, за километр от полей. */
.msp-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-inline-size: 880px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.msp-step[hidden],
.msp-nav [hidden] { display: none; }
.msp-step > .ui-field { max-inline-size: 560px; }
.msp-step h3 { margin: 0; font-size: var(--fs-h3); }
.msp-step .ui-field { flex: 0 0 auto; }
.msp-step__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.msp-step__grid--names { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.msp-step__hint {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-caption);
}

.msp-pick-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
}
.msp-pick-list__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition-property: border-color;
  transition-duration: 150ms;
}
.msp-pick-list__item:hover,
.msp-pick-list__item:focus-visible { border-color: var(--accent); }
.msp-pick-list__meta {
  color: var(--muted);
  font-size: var(--fs-caption);
}

.msp-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-inline-size: 880px;
  margin-block: 16px 24px;
}
.msp-nav__group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-inline-start: auto;
}
.msp-nav .ui-button,
.msp-done .ui-button { min-height: 44px; }
.msp-done {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--ok);
  border-radius: var(--radius-md);
}
.msp-done[hidden] { display: none; }
.msp-done__text { margin: 0; }

.moysklad-positions .msp-pick {
  width: 20px;
  height: 20px;
}
.moysklad-positions .msp-action { margin-block-start: 8px; }
.moysklad-positions .msp-note {
  margin-block-start: 4px;
  color: var(--muted);
  font-size: var(--fs-body);
}
.moysklad-positions .msp-link { color: var(--accent); }
.moysklad-positions .msp-state { font-weight: 600; }
.moysklad-positions .msp-state--exists { color: var(--warn); }
.moysklad-positions .msp-state--similar { color: var(--warn); }
.moysklad-positions .msp-state--created,
.moysklad-positions .msp-state--renamed { color: var(--ok); }

@media (max-width: 768px) {
  .moysklad-positions__actions { width: 100%; }
  .moysklad-positions__actions .ui-button { flex: 1; min-height: 44px; }
  .msp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .msp-step { padding: 12px; }
  .msp-nav__group { width: 100%; }
  .msp-nav .ui-button { flex: 1 1 auto; }
}

/* Раздел «Техкарта»: найденные позиции, карточки «Неокл.» и «Оклейка», состав. */
.artc-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-block-start: 16px;
}
.artc-cards[hidden],
.artc-products[hidden] { display: none; }
.artc-products {
  display: grid;
  gap: 4px;
}
.artc-products__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.artc-products__label {
  min-inline-size: 120px;
  color: var(--muted);
}
.artc-products__missing { color: var(--warn); }
.artc-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.artc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  cursor: pointer;
}
.artc-toggle input {
  width: 20px;
  height: 20px;
}
.artc-template {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.artc-template .ui-field { flex: 1 1 280px; }
.artc-template .ui-button,
.artc-row-actions .ui-button { min-height: 44px; }
/* Раздел «Техкарта» во всю ширину: на широком экране «Неокл.» и «Оклейка»
   стоят рядом, а не друг под другом с пустым полем справа. */
#tabpanel-dh-articlesTechcard .msp-step,
#tabpanel-dh-articlesTechcard .msp-nav { max-inline-size: none; }
#tabpanel-dh-articlesTechcard .msp-step > .ui-field { max-inline-size: 560px; }
.artc-products { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); column-gap: 24px; }
@media (min-width: 1281px) {
  .artc-cards {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: start;
  }
  .artc-cards > :not(.msp-step) { grid-column: 1 / -1; }
}

/* Состав: колонки под содержимое — без боковой прокрутки и обрезанного «Убрать». */
.artc-materials { table-layout: fixed; }
.artc-materials td { vertical-align: top; }
.artc-materials th:nth-child(2),
.artc-materials td:nth-child(2) { width: 112px; }
.artc-materials th:nth-child(3),
.artc-materials td:nth-child(3) { width: 200px; }
.artc-materials th:nth-child(4),
.artc-materials td:nth-child(4) { width: 112px; }
.artc-materials .artc-material { width: 100%; min-inline-size: 0; }
.artc-materials .artc-quantity { max-inline-size: 120px; }

/* Подобранная строка: роль и частота над полем, альтернативы — подписанные
   кнопки под ним (без скрытых меню). */
.artc-role {
  display: block;
  margin-block-end: 4px;
  color: var(--muted);
  font-size: var(--fs-caption);
}
.artc-alts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-block-start: 6px;
}
.artc-alts .artc-alt {
  min-height: 28px;
  max-width: 100%;
  padding: 4px 10px;
  font-size: var(--fs-caption);
  line-height: 1.2;
  white-space: normal;
  text-align: start;
}
.artc-suggest-hint { margin-block: 4px 8px; }

@media (max-width: 768px) {
  .artc-materials { table-layout: auto; }
  .artc-materials th,
  .artc-materials td { width: auto; }
}
.artc-row-actions { margin-inline-start: 0; }
.artc-done-list {
  margin: 0;
  padding-inline-start: 20px;
}
/* Стикер на коробку: окно заказа (кладовщик/руководитель), вкладка «Стикеры»
   руководителя, блок принтеров в Системном центре. Сам макет стикера —
   ui-kit/box-sticker-label.css. */

/* Кнопка стикеров в строке плана кладовщика: карточка задачи сама кнопка,
   поэтому вторая кнопка стоит рядом, а не внутри. */
.rw-task-row { display: flex; align-items: stretch; gap: 8px; }
.rw-task-row > .rw-task { flex: 1 1 auto; min-width: 0; }
.rw-task-row__stickers {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-panel);
  color: var(--text-main);
  cursor: pointer;
}
.rw-task-row__stickers:hover { border-color: var(--accent); color: var(--accent); }
.rw-progress--with-action { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.rw-progress__action { flex: 0 0 auto; }

/* Окно заказа стикеров. */
.bso-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
}
.bso-modal.hidden { display: none; }
/* Непрозрачный фон обязателен: .ui-panel даёт полупрозрачный --surface-2,
   а в top layer <dialog> под окном только затемнение (см. .rw-modal__panel). */
.bso-modal .bso-modal__panel {
  width: min(96vw, 900px);
  max-height: 90vh;
  overflow: auto;
  padding: 16px;
  border-radius: 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border-mid);
  box-shadow: var(--shadow-shell);
}
.bso-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.bso-modal__title { font-weight: 700; font-size: 1.05em; }
.bso-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--text-main);
  cursor: pointer;
}
.bso-modal__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 20px; }
.bso-form { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bso-position { display: flex; flex-direction: column; gap: 2px; }
.bso-position small, .bso-position__hint, .bsx-muted { color: var(--text-muted); font-size: var(--fs-caption); }
.bso-position--missing { color: var(--danger); }
.bso-rows { display: flex; flex-direction: column; gap: 6px; }
.bso-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.bso-row__field { flex: 0 0 auto; }
.bso-row__times { padding-bottom: 10px; color: var(--text-muted); }
.bso-row__remove { min-width: 38px; padding: 0 8px; }
.bso-form__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.bso-check { display: inline-flex; align-items: center; gap: 6px; }
.bso-total { font-weight: 600; }
.bso-preview { min-width: 0; }
.bso-modal__footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
@media (max-width: 768px) {
  .bso-modal__body { grid-template-columns: 1fr; }
  .bso-preview { order: -1; }
}

/* Вкладка «Стикеры» руководителя. */
.bsx-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.bsx-head h2 { margin: 0; }
.bsx-head p { margin: 4px 0 0; color: var(--text-muted); font-size: var(--fs-caption); }
.bsx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bsx-actions .ui-control { min-width: 220px; }
.bsx-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: 16px; align-items: start; }
.bsx-section { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; min-width: 0; }
.bsx-section h3 { margin: 0 0 10px; font-size: var(--fs-h3); }
.bsx-table { width: 100%; border-collapse: collapse; }
.bsx-table th, .bsx-table td { padding: 8px 6px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.bsx-table th { font-size: var(--fs-caption); color: var(--text-muted); font-weight: 600; }
.bsx-table td strong { display: block; }
.bsx-table__num { width: 120px; text-align: right; }
.bsx-per-box { width: 100px; text-align: right; }
.bsx-per-box.is-saved { border-color: var(--ok); }
.bsx-barcode { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bsx-print-btn { min-width: 38px; padding: 0 8px; }
.bsx-printers { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.bsx-printer { padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: var(--fs-caption); color: var(--text-muted); }
.bsx-printer.is-online { border-color: var(--ok); color: var(--ok); }
.bsx-queue-summary { margin-bottom: 10px; color: var(--text-muted); font-size: var(--fs-caption); }
.bsx-queue { display: flex; flex-direction: column; gap: 8px; }
.bsx-job { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); }
.bsx-job__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bsx-job__actions { grid-column: 1 / -1; display: flex; gap: 8px; }
.bsx-job__actions:empty { display: none; }
.bsx-status { align-self: start; padding: 3px 10px; border-radius: 999px; font-size: var(--fs-caption); border: 1px solid var(--border); white-space: nowrap; }
.bsx-status--printing { border-color: var(--accent); color: var(--accent); }
.bsx-status--done { border-color: var(--ok); color: var(--ok); }
.bsx-status--failed { border-color: var(--danger); color: var(--danger); }
.bsx-status--cancelled { color: var(--text-muted); }
@media (max-width: 900px) { .bsx-grid { grid-template-columns: 1fr; } }

/* Вкладка «Программа печати». */
.printer-app__steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }

/* Принтеры стикеров в Системном центре. */
.sys-admin-printers { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.sys-admin-printers__list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.sys-admin-printers__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); }
.sys-admin-printers__row strong { flex: 1 1 auto; }
.sys-admin-printers__row.is-revoked { opacity: 0.6; }
.sys-admin-printers__code { margin-top: 10px; padding: 12px; border: 1px solid var(--ok); border-radius: var(--radius-md); }
.sys-admin-printers__code.hidden { display: none; }
.sys-admin-printers__code code { display: block; margin: 6px 0; font-size: 1.3em; letter-spacing: 0.08em; user-select: all; }

/* .ui-field несёт flex: 1 1 180px для строк фильтров; в колонке окна это растянуло бы поле по высоте. */
.bso-form .ui-field { flex: 0 0 auto; }
/* Артикулы: файл артикулов с Яндекс.Диска, сверка с МойСклад, история. */
.articles__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-block-end: 8px;
}
.articles__title h2 { margin: 0; }
.articles__source {
  margin: 0;
  margin-block-start: 4px;
  max-inline-size: 72ch;
  color: var(--muted);
  font-size: var(--fs-caption);
  line-height: 1.5;
}
.articles__status {
  min-height: 1em;
  margin-block-end: 8px;
  color: var(--muted);
}
.articles__status:empty { min-height: 0; margin-block-end: 0; }
.articles__status.is-warning { color: var(--warn); }
.articles__status.is-error { color: var(--danger); }

.articles__summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-block-end: 20px;
}
.articles__tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.articles__tile:hover,
.articles__tile:focus-visible { border-color: var(--accent); }
/* Плитка — это фильтр: включённая держит рамку акцента, чтобы было видно,
   почему в списке показаны не все строки. */
.articles__tile.is-active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.articles__tile-value { font-size: var(--fs-h2); font-weight: 700; }
.articles__tile-label { color: var(--muted); font-size: var(--fs-caption); }

/* Фильтры — сетка с общими краями: поля одной ширины, подписи и контролы на
   одной линии. Поиск занимает две колонки, кнопка прижата к низу строки. */
.articles__filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
  align-items: end;
  gap: 12px 16px;
  margin-block-end: 12px;
}
.articles__filters .ui-field { min-width: 0; }
/* Дата-пикер дописывает кнопку календаря внутрь поля, и колонка «С»/«По»
   становилась на 40px выше соседних — ставим кнопку рядом с полем, а не под ним. */
.articles__filters .ui-field:has(> .date-picker-btn) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'label label'
    'input button';
  gap: 4px 8px;
  align-items: center;
}
.articles__filters .ui-field:has(> .date-picker-btn) > span { grid-area: label; }
.articles__filters .ui-field > .nav-date-input { grid-area: input; }
.articles__filters .ui-field > .date-picker-btn {
  grid-area: button;
  width: 40px;
  min-width: 40px;
  padding-inline: 0;
}
.articles__search { grid-column: span 2; }
.articles__apply {
  min-height: 40px;
  align-self: end;
}
.articles__shown {
  margin: 0;
  margin-block-end: 8px;
  color: var(--muted);
  font-size: var(--fs-caption);
}

/* Таблица списка: ширины заданы явно, иначе «Название» и «МойСклад» делят
   место поровну и оба ломаются на пять строк, а кнопки действий обрезаются. */
.articles__table { table-layout: fixed; }
/* Общая таблица кабинета держит min-width: 1050px — с ней список всегда уезжал
   в горизонтальную прокрутку и обрезал колонку действий. Ширины колонок ниже
   задают раскладку сами, поэтому минимум снимаем. */
.articles__table--list { min-width: 0; }
.articles__table td { vertical-align: top; }
.articles__table th,
.articles__table td { overflow-wrap: anywhere; }
.articles__table tr.is-removed td { opacity: 0.6; }
/* Колонки под содержимое: «Состояние» вмещает значок «Требует действия»,
   «Действия» — самую длинную подпись в две строки. Остаток — «Названию»,
   иначе на широком экране оно забирало половину таблицы, а значок и
   кнопки справа обрезались. */
.articles__table--list th:nth-child(1),
.articles__table--list td:nth-child(1) { width: 112px; }
.articles__table--list th:nth-child(3),
.articles__table--list td:nth-child(3) { width: 112px; }
.articles__table--list th:nth-child(4),
.articles__table--list td:nth-child(4) { width: 124px; }
.articles__table--list th:nth-child(5),
.articles__table--list td:nth-child(5) { width: 112px; }
.articles__table--list th:nth-child(6),
.articles__table--list td:nth-child(6) { width: 152px; }
.articles__table--list th:nth-child(7),
.articles__table--list td:nth-child(7) { width: 132px; }

/* Шапка закреплена: таблица прокручивается в своей области, названия
   колонок остаются на виду при просмотре пятисот строк. Страница
   прокручивается целиком, а обёртка с overflow ломает sticky от окна,
   поэтому прокрутка — у самой обёртки. */
@media (min-width: 769px) {
  .articles__table-wrap {
    max-height: calc(100vh - 120px);
    overflow: auto;
    overscroll-behavior: contain;
  }
  .articles__table-wrap thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: inset 0 -1px 0 var(--border);
  }
}

.articles__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-weight: 600;
  line-height: 1.35;
}
.articles__note {
  margin-block-start: 2px;
  color: var(--muted);
  font-size: var(--fs-caption);
  line-height: 1.4;
}
/* Имя в МойСклад по форме всегда отличается от файла: показываем две строки,
   остальное — в подсказке, иначе строка вырастает до шести строк. */
.articles__ms-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.articles__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-block-start: 4px;
  margin-inline-end: 4px;
  padding: 2px 8px;
  min-height: 22px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  font-size: var(--fs-caption);
  line-height: 1.2;
  max-width: 100%;
}
.articles__chip--missing { border-color: var(--warn); color: var(--warn); }
.articles__chip--mark { color: var(--muted); }
/* Техкарты: два коротких значка вместо двух строк текста «Неокл.: есть». */
.articles__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.articles__card {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  font-size: var(--fs-caption);
  line-height: 1.2;
  max-width: 100%;
}
.articles__card.is-ok { border-color: var(--ok); color: var(--ok); }
.articles__card.is-missing { border-color: var(--warn); color: var(--warn); }
.articles__card.is-skipped { color: var(--muted); }
.articles__state {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  max-width: 100%;
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1.2;
}
.articles__state--action { border-color: var(--warn); color: var(--warn); }
.articles__state--ready { border-color: var(--ok); color: var(--ok); }
.articles__state--removed { color: var(--muted); }
/* Действия — подписанные кнопки в столбик: подпись не режется, попасть легко. */
.articles__actions {
  display: grid;
  gap: 6px;
  min-width: 0;
}
/* Длинные подписи («Снять «Новое название учтено»») переносятся на вторую
   строку, а не обрезаются: обрезанная кнопка — непонятное действие. */
.articles__actions .ui-button {
  width: 100%;
  min-height: 32px;
  padding: 6px 10px;
  white-space: normal;
  line-height: 1.2;
  text-align: center;
}
/* Меню действий строки: одно на таблицу, открывается под кнопкой «Действия». */
.articles__menu {
  position: fixed;
  z-index: 60;
  display: grid;
  gap: 2px;
  min-width: 240px;
  max-width: min(320px, calc(100vw - 16px));
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-panel);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.articles__menu[hidden] { display: none; }
.articles__menu .articles__menu-item {
  display: block;
  width: 100%;
  min-height: 36px;
  padding: 8px 12px;
  border: 0;
  border-radius: calc(var(--radius-md) - 4px);
  background: none;
  box-shadow: none;
  color: var(--text-main);
  font: inherit;
  text-align: start;
  white-space: normal;
  cursor: pointer;
  transform: none;
}
.articles__menu .articles__menu-item:hover:not(:disabled),
.articles__menu .articles__menu-item:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  border-color: transparent;
  box-shadow: none;
  transform: none;
  outline: none;
}
.articles__menu .articles__menu-item.is-primary {
  color: var(--accent-text);
  font-weight: 600;
}
.articles__link {
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: none;
  color: var(--accent-text);
  font: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent-border);
  cursor: pointer;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
/* Общий hover кнопок красит подложку и приподнимает — для ссылки это выглядит
   как выделение мышью; оставляем цвет и подчёркивание. */
.articles__link:hover:not(:disabled),
.articles__link:focus-visible,
.articles__link:active {
  background: none;
  border-color: transparent;
  box-shadow: none;
  transform: none;
  color: var(--text-main);
  text-decoration-color: currentColor;
}
.articles__link:focus-visible {
  outline: 2px solid var(--accent-border);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .articles__link { transition: none; }
}
.articles__more { margin-block-start: 12px; }
.articles__mark-card { display: flex; flex-direction: column; gap: 10px; }

/* Широкий экран: поиск на две колонки и четыре фильтра — один ряд из шести. */
@media (min-width: 1121px) {
  .articles__filters { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Ноутбук: служебные колонки ужимаются, подписи кнопок и значок переносятся,
   «Названию» остаётся около четверти таблицы. */
@media (max-width: 1280px) {
  .articles__table--list th:nth-child(1),
  .articles__table--list td:nth-child(1) { width: 100px; }
  .articles__table--list th:nth-child(3),
  .articles__table--list td:nth-child(3) { width: 100px; }
  .articles__table--list th:nth-child(4),
  .articles__table--list td:nth-child(4) { width: 112px; }
  .articles__table--list th:nth-child(5),
  .articles__table--list td:nth-child(5) { width: 100px; }
  .articles__table--list th:nth-child(6),
  .articles__table--list td:nth-child(6) { width: 128px; }
  .articles__table--list th:nth-child(7),
  .articles__table--list td:nth-child(7) { width: 124px; }
}

/* Уже 1120px семь колонок не помещаются: таблица держит 960px и прокручивается
   вбок в своей области (шапка остаётся закреплённой), а «Название» не
   сжимается в ноль. */
@media (max-width: 1120px) {
  .articles__table--list { min-width: 960px; }
}

@media (max-width: 768px) {
  .articles__table--list { min-width: 0; }
  .articles__head .ui-button,
  .articles__apply { width: 100%; min-height: 44px; }
  .articles__filters { grid-template-columns: 1fr; }
  .articles__search { grid-column: auto; }
  .articles__table { table-layout: auto; }
  .articles__table--list th,
  .articles__table--list td { width: auto; }
  .articles__actions .ui-button { min-height: 44px; }
  .articles__ms-name { -webkit-line-clamp: 3; }
}
.articles__cell { min-width: 0; }
/* Окно «Добавить недостающее»: по блоку на карточку — поле имени и под ним
   итог проверки МойСклад. Между блоками вдвое больше воздуха, чем внутри. */
.articles__parts-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-inline-size: 640px;
}
.articles__parts-rows {
  display: grid;
  gap: 16px;
}
.articles__parts-row {
  display: grid;
  gap: 6px;
}
.articles__parts-check {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-caption);
  line-height: 1.4;
}
.articles__parts-check.is-new { color: var(--ok); }
.articles__parts-check.is-exists { color: var(--accent-text); }
.articles__parts-check.is-similar { color: var(--warn); }
.articles__rename-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-inline-size: 900px;
}
.articles__rename-table .art-rename-name { min-inline-size: 260px; }
.articles__rename-table .art-rename-pick {
  width: 20px;
  height: 20px;
}
@media (max-width: 768px) {
  .articles__head .ui-button,
  .articles__apply { width: 100%; min-height: 44px; }
  .articles__actions .ui-button { flex: 1 1 auto; min-height: 44px; }
  .articles__ms-name { max-width: none; }
}
.articles__cell { min-width: 0; }
.articles__rename-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-inline-size: 900px;
}
.articles__rename-table .art-rename-name { min-inline-size: 260px; }
.articles__rename-table .art-rename-pick {
  width: 20px;
  height: 20px;
}
/* Вкладка «KPI (тест)» у администратора Производства: срезы выработки для
   настройки нормативов. Каркас — канонические компоненты кабинета
   (ui-tabs--cards, stat-box, ui-field, ui-button, schedule-edit-modal);
   здесь только раскладка и таблицы среза. Раздел виден только ADMIN и
   SYS_ADMIN: разметка вырезается сервером по маркеру access:admin-tools. */

.kpi-lab__warning {
  margin: 0 0 var(--workspace-gap, 12px);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--warning);
  border-radius: var(--workspace-control-radius);
  font-size: var(--fs-caption);
  color: var(--text-secondary);
}

.kpi-lab__hint {
  margin: 10px 0;
  max-width: 90ch;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.kpi-lab__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: var(--workspace-gap, 12px);
}

.kpi-lab__controls .ui-field {
  min-width: 150px;
}

.kpi-lab__number .ui-control {
  width: 120px;
}

.kpi-lab__search {
  flex: 1 1 220px;
}

.kpi-lab__reset {
  margin-left: auto;
}

.kpi-lab__metrics {
  margin-bottom: var(--workspace-gap, 12px);
}

.kpi-lab__metric-hint {
  margin-top: 2px;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

/* Таблица широкая, поэтому прокручивается внутри себя, а не тянет страницу. */
.kpi-lab__table-wrap {
  max-height: 68vh;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--workspace-control-radius);
}

.kpi-lab__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
  font-variant-numeric: tabular-nums;
}

.kpi-lab__table th,
.kpi-lab__table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
  white-space: nowrap;
}

.kpi-lab__table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text-muted);
}

/* Отступ даёт сама кнопка сортировки, иначе область клика меньше ячейки.
   Заголовки без кнопки (таблицы в карточке) сохраняют обычный отступ. */
.kpi-lab__table thead th:has(> .kpi-lab__sort) {
  padding: 0;
}

.kpi-lab__table .is-num {
  text-align: right;
}

.kpi-lab__sort {
  width: 100%;
  min-height: var(--workspace-control-height);
  padding: 6px 10px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-caption);
  font-weight: 600;
  text-align: inherit;
  cursor: pointer;
}

.kpi-lab__table th.is-num .kpi-lab__sort {
  text-align: right;
}

.kpi-lab__table th.is-sorted .kpi-lab__sort,
.kpi-lab__sort:hover {
  color: var(--text-main);
}

.kpi-lab__table tbody tr.is-clickable {
  cursor: pointer;
}

.kpi-lab__table tbody tr.is-clickable:hover td,
.kpi-lab__table tbody tr.is-clickable:focus-visible td {
  background: var(--surface-hover);
}

.kpi-lab__table tfoot td {
  position: sticky;
  bottom: 0;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  font-weight: 600;
}

.kpi-lab__pill {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--fs-caption);
  white-space: nowrap;
}

.kpi-lab__pill--accent {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent-text);
}

.kpi-lab__pill--warn {
  border-color: var(--warning);
  color: var(--text-main);
}

.kpi-lab__pill--danger {
  border-color: var(--danger);
  color: var(--danger-text);
}

.kpi-lab__pill--muted {
  color: var(--text-muted);
}

.kpi-lab__note-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}

.kpi-lab__bar {
  display: inline-block;
  width: 160px;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, var(--accent) var(--kpi-bar, 0%), var(--surface-3) var(--kpi-bar, 0%));
  vertical-align: middle;
}

.kpi-lab__note {
  margin: 8px 0 0;
  max-width: 90ch;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.kpi-lab__empty {
  padding: 32px 12px;
  text-align: center;
  color: var(--text-muted);
}

.kpi-lab__card-title {
  margin: 16px 0 8px;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text-muted);
}

.kpi-lab__card {
  width: min(880px, calc(100vw - 32px));
  max-height: 88vh;
  overflow: auto;
}

.kpi-lab__card-meta {
  margin: 4px 0 0;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.kpi-lab__note-field {
  margin-top: 16px;
}

.kpi-lab__note-field textarea {
  min-height: 84px;
  resize: vertical;
}

.kpi-lab__card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

@media (max-width: 768px) {
  .kpi-lab__reset {
    margin-left: 0;
  }

  .kpi-lab__controls .ui-field,
  .kpi-lab__number .ui-control {
    width: 100%;
    min-width: 0;
  }
}
/* Системный центр → «Администраторы»: карточка на администратора,
   переключатель на каждое выданное направление, подписанные действия. */
.sys-admin-admins__shared { margin: 0; }

.sys-admin-admins__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
  gap: 12px;
}

.sys-admin-admins__card {
  display: grid;
  gap: 16px;
  align-content: start;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-control-radius);
  background: var(--bg-panel-soft);
}

.sys-admin-admins__card.is-inactive { opacity: .76; }

.sys-admin-admins__card-head {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.sys-admin-admins__directions {
  display: grid;
  gap: 8px;
}

.sys-admin-admins__direction {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  padding-block: 4px;
  padding-inline: 12px 8px;
  border-radius: var(--workspace-control-radius);
  background: var(--surface-1);
}

.sys-admin-admins__direction-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.sys-admin-admins__direction .ui-switch { flex: none; }

.sys-admin-admins__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sys-admin-admins__form-directions {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.sys-admin-admins__form-directions legend {
  margin-bottom: 6px;
  padding: 0;
}

.sys-admin-admins__form-directions > div {
  display: grid;
  gap: 8px;
}

@media (max-width: 520px) {
  .sys-admin-admins__actions > button { flex: 1 1 calc(50% - 4px); }
}

/* Экран выбора направления: цвета карточек направлений, выдаваемых личным администраторам. */
.admin-direction-card.is-mc { border-top-color: #d8a657; }
.admin-direction-card.is-infographic { border-top-color: #6fa8dc; }@media (max-width: 768px) {
  .schedule-ops-days {
    gap: 3px;
    padding: 6px;
  }

  .schedule-ops-day {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 54px;
    gap: 2px 4px;
    padding: 5px;
    font-size: var(--fs-caption);
  }

  .schedule-ops-day > span {
    grid-column: 1 / -1;
  }

  .schedule-ops-day small {
    display: none;
  }

  .schedule-ops-selection-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .schedule-ops-selection-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .schedule-ops-selection-actions button {
    width: 100%;
  }
}

.schedule-ops-table tr:last-child th,
.schedule-ops-table tr:last-child td {
  border-bottom: 0;
}

.schedule-ops-table th:last-child,
.schedule-ops-table td:last-child {
  border-right: 0;
}

@media (min-width: 901px) {
  .gas-mode-dept_head #dhScheduleMonthView > .schedule-editor-panel {
    display: grid;
    grid-template-columns:
      minmax(190px, auto)
      minmax(280px, 360px)
      auto
      auto;
    align-items: end;
    gap: 8px;
  }

  .gas-mode-dept_head #dhScheduleMonthView .schedule-editor-head,
  .gas-mode-dept_head #dhScheduleMonthView .schedule-filter-grid {
    display: contents;
  }

  .gas-mode-dept_head #dhScheduleMonthView .schedule-editor-head > div {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .gas-mode-dept_head #dhScheduleMonthView .schedule-month-field {
    grid-column: 2;
    grid-row: 1;
  }

  .gas-mode-dept_head #dhScheduleMonthView .schedule-edit-btn {
    grid-column: 3;
    grid-row: 1;
    width: auto;
    min-width: 130px;
  }

  .gas-mode-dept_head #dhScheduleMonthView .schedule-clear-btn {
    grid-column: 4;
    grid-row: 1;
    width: auto;
    white-space: nowrap;
  }

  .gas-mode-dept_head #dhScheduleMonthView .schedule-selection-info {
    grid-column: 1 / -1;
  }

  .gas-mode-dept_head #dhScheduleMonthView .schedule-filter-grid {
    grid-template-columns: minmax(180px, 280px) auto;
    justify-content: start;
    align-items: end;
  }
}

.schedule-grid-shell,
.schedule-calendar-wrap {
  width: 100%;
  overflow-x: auto;
}

.schedule-calendar-table,
.schedule-grid-table {
  min-width: 760px;
}

.schedule-cell,
.schedule-calendar-table td,
.schedule-grid-table td {
  min-width: 72px;
  height: 58px;
  vertical-align: top;
}

.schedule-time {
  min-height: 100%;
  display: grid;
  align-content: space-between;
  gap: 4px;
  color: var(--text-soft);
  font-size: var(--fs-caption);
  font-weight: 620;
  line-height: 1.05;
  white-space: nowrap;
}

.schedule-time-start,
.schedule-time-end {
  display: block;
}

.schedule-status-text,
.schedule-plus {
  color: var(--text-soft);
  font-size: var(--fs-caption);
  font-weight: 620;
}

.schedule-cell-work {
  background: var(--schedule-work-bg);
  border-color: var(--schedule-work-border);
}

.schedule-cell-work .schedule-status-text {
  color: var(--schedule-work-accent);
}

.schedule-cell-work .schedule-time {
  color: var(--schedule-time);
}

.schedule-cell-off {
  background: var(--schedule-off-bg);
  border-color: var(--schedule-off-border);
}

.schedule-cell-off .schedule-status-text {
  color: var(--schedule-off-accent);
}

.schedule-cell-training {
  background: var(--schedule-training-bg);
  border-color: var(--schedule-training-border);
}

.schedule-cell-training .schedule-status-text {
  color: var(--schedule-training-accent);
}

.schedule-cell-absence,
.schedule-cell-noshow {
  background: var(--schedule-noshow-bg);
  border-color: var(--schedule-noshow-border);
}

.schedule-cell-absence .schedule-status-text,
.schedule-cell-noshow .schedule-status-text {
  color: var(--schedule-noshow-accent);
}

.schedule-cell-sick {
  background: var(--schedule-sick-bg);
  border-color: var(--schedule-sick-border);
}

.schedule-cell-sick .schedule-status-text {
  color: var(--schedule-sick-accent);
}

.schedule-cell-vacation {
  background: var(--schedule-vacation-bg);
  border-color: var(--schedule-vacation-border);
}

.schedule-cell-vacation .schedule-status-text {
  color: var(--schedule-vacation-accent);
}

.schedule-month-shell {
  display: grid;
  gap: 10px;
  overflow: visible;
}

.schedule-month-shell > * {
  min-width: 0;
  max-width: 100%;
}

.schedule-cutoff-banner {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.schedule-month-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.024);
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-panel-radius);
  font-size: var(--fs-caption);
  font-weight: 620;
}

.schedule-month-meta strong {
  color: var(--text-soft);
  font-weight: 650;
}

.schedule-month-list {
  display: grid;
  gap: 10px;
}

.schedule-desktop-split {
  display: none;
}

@media (min-width: 769px) {
  .schedule-mobile-month-list {
    display: none;
  }

  .schedule-desktop-split {
    display: grid;
    grid-template-columns: minmax(190px, 0.28fr) minmax(0, 1fr);
    min-height: 470px;
    overflow: hidden;
    background: var(--surface-1);
    border: 1px solid var(--border-soft);
    border-radius: var(--workspace-panel-radius);
  }

  .schedule-desktop-employees {
    min-width: 0;
    padding: 12px;
    background: rgba(10, 10, 10, 0.26);
    border-right: 1px solid var(--border-soft);
  }

  .schedule-desktop-employees-title {
    margin: 0 4px 10px;
    color: var(--text-muted);
    font-size: var(--fs-caption);
    font-weight: 650;
    text-transform: uppercase;
  }

  .schedule-desktop-employee-list {
    display: grid;
    align-content: start;
    gap: 5px;
    max-height: 510px;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .schedule-desktop-employee {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    color: var(--text-soft);
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--workspace-control-radius);
    box-shadow: none;
  }

  .schedule-desktop-employee span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-caption);
  }

  .schedule-desktop-employee em {
    color: var(--text-muted);
    font-size: var(--fs-caption);
    font-style: normal;
    white-space: nowrap;
  }

  .schedule-desktop-employee:hover {
    background: rgba(255, 255, 255, 0.035);
    border-color: var(--border-soft);
  }

  .schedule-desktop-employee.is-active {
    color: var(--text-main);
    background: rgba(91, 147, 230, 0.13);
    border-color: rgba(122, 172, 255, 0.32);
    box-shadow: inset 3px 0 0 var(--accent);
  }

  .schedule-desktop-calendar {
    min-width: 0;
    padding: 12px;
  }

  .schedule-desktop-calendar-panel {
    display: none;
    min-width: 0;
  }

  .schedule-desktop-calendar-panel.is-active {
    display: grid;
    gap: 10px;
  }

  .schedule-desktop-calendar-head {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px 9px;
    border-bottom: 1px solid var(--border-soft);
  }

  .schedule-desktop-calendar-head strong {
    color: var(--text-main);
    font-size: var(--fs-body-lg);
    font-weight: 650;
  }

  .schedule-desktop-calendar-head span {
    color: var(--text-muted);
    font-size: var(--fs-caption);
  }

  .schedule-desktop-calendar .schedule-month-row-body {
    margin-top: 0;
  }

  .schedule-desktop-calendar .schedule-month-day,
  .schedule-desktop-calendar .schedule-month-day-placeholder {
    min-height: 58px;
    height: 58px;
  }

  .schedule-desktop-calendar .schedule-month-day-placeholder {
    background: rgba(255, 255, 255, 0.012);
    border-color: rgba(255, 255, 255, 0.025);
    border-radius: var(--workspace-panel-radius);
  }
}

.schedule-month-row-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.008)),
    var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-panel-radius);
}

.schedule-month-row-name {
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 640;
  line-height: 1.2;
}

.schedule-month-row-disclosure {
  display: block;
}

.schedule-month-row-disclosure > summary {
  list-style: none;
}

.schedule-month-row-disclosure > summary::-webkit-details-marker {
  display: none;
}

.schedule-month-row-summary {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
  cursor: pointer;
  user-select: none;
}

.schedule-month-row-summary:hover .schedule-month-row-name {
  color: var(--text-soft);
}

.schedule-month-row-summary-meta {
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 600;
}

.schedule-month-row-chevron {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  margin: 0 4px 4px 2px;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.schedule-month-row-disclosure[open] .schedule-month-row-chevron {
  margin-top: 5px;
  margin-bottom: 0;
  transform: rotate(225deg);
}

.schedule-month-row-body {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

/* День недели в плитке нужен только там, где шапка с днями скрыта, — то есть
   в узком списочном режиме ниже. В сетке над колонкой уже стоит «ВТ», и «ВТ 01»
   внутри ячейки читалось как повтор. */
.schedule-month-day-weekday {
  display: none;
}

.schedule-month-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 650;
  line-height: 1;
  text-transform: uppercase;
}

.schedule-month-weekdays > span {
  min-height: 26px;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 7px;
  letter-spacing: 0.08em;
}

.schedule-month-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.schedule-month-day-placeholder {
  min-height: 58px;
  border: 1px solid transparent;
}

.schedule-month-day {
  width: 100%;
  min-width: 0;
  min-height: 58px;
  height: auto;
  display: grid;
  align-content: space-between;
  gap: 4px;
  padding: 7px;
  overflow: hidden;
  color: var(--text-soft);
  text-align: left;
  background: var(--bg-panel);
  border: 1px solid rgba(255, 255, 255, 0.052);
  border-radius: var(--workspace-panel-radius);
  box-shadow: none;
  cursor: pointer;
}

.schedule-month-day:hover {
  border-color: rgba(122, 172, 255, 0.34);
  background:
    linear-gradient(180deg, rgba(122, 172, 255, 0.06), rgba(255, 255, 255, 0.01)),
    var(--bg-panel);
}

.schedule-month-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 650;
  line-height: 1.05;
  text-transform: uppercase;
}

.schedule-month-day-head em {
  min-width: 18px;
  padding: 2px 4px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: 999px;
  font-style: normal;
  text-align: center;
}

.schedule-month-day-body {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.schedule-month-day .schedule-time {
  min-height: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-caption);
}

.schedule-month-day .schedule-time-start::after {
  content: "-";
  margin-left: 6px;
  color: var(--text-muted);
}

.schedule-month-day .schedule-status-text,
.schedule-month-day .schedule-plus {
  display: block;
  max-width: 100%;
  overflow: hidden;
  font-size: var(--fs-caption);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-month-day.schedule-cell-work {
  background: var(--schedule-work-bg);
  border-color: var(--schedule-work-border);
  box-shadow: inset 2px 0 0 var(--schedule-work-accent);
}

.schedule-month-day.schedule-cell-training {
  background: var(--schedule-training-bg);
  border-color: var(--schedule-training-border);
  box-shadow: inset 2px 0 0 var(--schedule-training-accent);
}

.schedule-month-day.schedule-cell-off {
  background: var(--schedule-off-bg);
  border-color: var(--schedule-off-border);
  box-shadow: inset 2px 0 0 var(--schedule-off-accent);
}

.schedule-work-summary {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.008)),
    var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-panel-radius);
}

.schedule-work-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.schedule-work-summary-disclosure > summary {
  min-height: 38px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.schedule-work-summary-disclosure > summary::-webkit-details-marker {
  display: none;
}

.schedule-work-summary-chevron {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.schedule-work-summary-disclosure[open] .schedule-work-summary-chevron {
  transform: rotate(225deg);
}

.schedule-work-summary-disclosure[open] .schedule-work-summary-parts {
  margin-top: 2px;
}

.schedule-work-summary-title {
  color: var(--text-main);
  font-size: var(--fs-body-lg);
  font-weight: 650;
}

.schedule-work-summary-subtitle {
  max-width: 460px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 540;
  line-height: 1.35;
  text-align: right;
}

.schedule-work-summary-parts {
  display: grid;
  gap: 10px;
}

.schedule-work-summary-part {
  min-width: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.014);
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-panel-radius);
}

.schedule-work-summary-part-title {
  padding: 9px 11px;
  color: var(--text-soft);
  background: rgba(255, 255, 255, 0.024);
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-caption);
  font-weight: 630;
}

.schedule-work-summary-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.schedule-work-summary-table th,
.schedule-work-summary-table td {
  padding: 9px 11px;
  text-align: left;
  border: 0;
}

.schedule-work-summary-table th {
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.012);
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.schedule-work-summary-table td {
  color: var(--text-soft);
  border-top: 1px solid rgba(255, 255, 255, 0.048);
  font-size: var(--fs-caption);
  font-weight: 560;
}

.schedule-work-summary-table td:first-child {
  color: var(--text-main);
  font-weight: 630;
}

.schedule-work-summary-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.022);
}

.schedule-month-day.schedule-weekend .schedule-month-day-head {
  color: var(--schedule-day);
}

.schedule-month-day.schedule-cell-noshow {
  background: var(--schedule-noshow-bg);
  border-color: var(--schedule-noshow-border);
  box-shadow: inset 2px 0 0 var(--schedule-noshow-accent);
}

.schedule-month-day.schedule-cell-sick {
  background: var(--schedule-sick-bg);
  border-color: var(--schedule-sick-border);
  box-shadow: inset 2px 0 0 var(--schedule-sick-accent);
}

.schedule-month-day.schedule-cell-vacation {
  background: var(--schedule-vacation-bg);
  border-color: var(--schedule-vacation-border);
  box-shadow: inset 2px 0 0 var(--schedule-vacation-accent);
}

.schedule-month-day.schedule-day-past {
  filter: brightness(0.72) saturate(0.82);
  opacity: 0.82;
}

.schedule-month-day.schedule-day-today {
  position: relative;
  z-index: 1;
  filter: none;
  opacity: 1;
  border-color: rgba(222, 151, 75, 0.9);
  box-shadow:
    inset 0 0 0 1px rgba(222, 151, 75, 0.34),
    0 0 0 2px rgba(222, 151, 75, 0.12);
}

.schedule-month-day.schedule-day-today .schedule-month-day-head > span:first-child {
  color: #f2bd7d;
}

.schedule-month-day.schedule-cell-future {
  filter: brightness(1.06) saturate(0.94);
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.schedule-month-day.schedule-cell-selected {
  border-color: rgba(122, 172, 255, 0.78);
  background:
    linear-gradient(135deg, rgba(79, 140, 255, 0.26), rgba(79, 140, 255, 0.07)),
    var(--bg-panel);
  box-shadow:
    inset 3px 0 0 rgba(122, 172, 255, 0.95),
    0 8px 20px rgba(0, 0, 0, 0.22);
}

.employee-schedule-personal {
  display: grid;
  gap: 10px;
}

.employee-schedule-personal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  background: rgba(255, 255, 255, 0.026);
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-panel-radius);
}

.employee-schedule-personal-head strong {
  color: var(--text-main);
  font-size: var(--fs-body);
  font-weight: 680;
}

.employee-schedule-personal-head span {
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 560;
}

.employee-schedule-week-card,
.employee-schedule-row-card,
.employee-schedule-month-card {
  display: grid;
  gap: 8px;
}

.employee-schedule-week-title {
  color: var(--text-main);
  font-size: var(--fs-caption);
  font-weight: 660;
  line-height: 1.2;
}

.employee-schedule-row-card {
  padding: 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-panel-radius);
}

.employee-schedule-month-card {
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.024), rgba(255, 255, 255, 0.008)),
    var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-panel-radius);
}

.employee-schedule-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.employee-schedule-calendar-head {
  min-height: 26px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 680;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.employee-schedule-row-name {
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 680;
}

.employee-schedule-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.employee-schedule-day {
  min-height: 46px;
  padding: 6px;
  display: grid;
  align-content: space-between;
  gap: 4px;
  background: var(--bg-panel);
  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: var(--workspace-panel-radius);
}

.employee-schedule-day.schedule-cell-work {
  background: var(--schedule-work-bg);
  border-color: var(--schedule-work-border);
  box-shadow: inset 2px 0 0 var(--schedule-work-accent);
}

.employee-schedule-day.schedule-cell-training {
  background: var(--schedule-training-bg);
  border-color: var(--schedule-training-border);
  box-shadow: inset 2px 0 0 var(--schedule-training-accent);
}

.employee-schedule-day.schedule-day-past {
  filter: brightness(0.94);
  opacity: 0.94;
}

.employee-schedule-day.schedule-day-today {
  border-color: rgba(222, 151, 75, 0.44);
  box-shadow: inset 0 0 0 1px rgba(222, 151, 75, 0.18);
  opacity: 1;
}

.employee-schedule-day.schedule-day-outside {
  opacity: 0.30;
  filter: saturate(0.7);
}

.employee-schedule-day.schedule-cell-off {
  background: var(--schedule-off-bg);
  border-color: var(--schedule-off-border);
  box-shadow: inset 2px 0 0 var(--schedule-off-accent);
}

.employee-schedule-day.schedule-cell-noshow,
.employee-schedule-day.schedule-cell-absence {
  background: var(--schedule-noshow-bg);
  border-color: var(--schedule-noshow-border);
  box-shadow: inset 2px 0 0 var(--schedule-noshow-accent);
}

.employee-schedule-day.schedule-cell-sick {
  background: var(--schedule-sick-bg);
  border-color: var(--schedule-sick-border);
  box-shadow: inset 2px 0 0 var(--schedule-sick-accent);
}

.employee-schedule-day.schedule-cell-vacation {
  background: var(--schedule-vacation-bg);
  border-color: var(--schedule-vacation-border);
  box-shadow: inset 2px 0 0 var(--schedule-vacation-accent);
}

.employee-schedule-day-name {
  color: var(--text-soft);
  font-size: var(--fs-caption);
  font-weight: 680;
  line-height: 1.1;
  text-transform: uppercase;
}

.employee-schedule-day-value {
  color: var(--text-main);
  font-size: var(--fs-caption);
  font-weight: 620;
}

.employee-schedule-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.employee-schedule-summary div {
  padding: 8px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-panel-radius);
}

.employee-schedule-summary span {
  display: block;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 560;
}

.employee-schedule-summary strong {
  display: block;
  margin-top: 3px;
  color: var(--text-main);
  font-size: var(--fs-body);
  font-weight: 680;
}

.employee-schedule-month-field {
  position: relative;
  margin-bottom: var(--workspace-filter-gap-bottom);
}

.schedule-month-field .schedule-month-input {
  display: none;
}

/* Переключатель месяца в графике: одна ячейка «Месяц Год» со стрелками по
   бокам. Раньше здесь стояли два независимых <select> (месяц и год), и чтобы
   перейти на соседний месяц приходилось раскрывать список. */
.schedule-month-nav {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 6px;
  align-items: stretch;
  position: relative;
}

.schedule-month-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  min-width: 38px;
  padding: 0;
  color: var(--text-main);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.014)),
    var(--bg-control);
  border: 1px solid var(--border-mid);
  border-radius: var(--workspace-panel-radius);
  box-shadow: var(--btn-shadow);
  cursor: pointer;
}

.schedule-month-step:hover:not(:disabled) {
  border-color: rgba(115, 166, 255, 0.48);
}

.schedule-month-current {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  color: var(--text-main);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.014)),
    var(--bg-control);
  border: 1px solid var(--border-mid);
  border-radius: var(--workspace-panel-radius);
  box-shadow: var(--btn-shadow);
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 620;
  line-height: 1.2;
  cursor: pointer;
}

.schedule-month-current__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-month-current[aria-expanded="true"],
.schedule-month-current:focus-visible,
.schedule-month-step:focus-visible {
  border-color: rgba(222, 151, 75, 0.72);
  outline: none;
  box-shadow:
    0 0 0 3px rgba(222, 151, 75, 0.14),
    var(--btn-shadow);
}

.schedule-month-popover {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: grid;
  gap: 8px;
  min-width: 260px;
  padding: 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border-mid);
  border-radius: var(--workspace-panel-radius);
  box-shadow: var(--shadow-panel);
}

.schedule-month-popover__year {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.schedule-month-popover__year strong {
  text-align: center;
  font-size: var(--fs-body);
  font-variant-numeric: tabular-nums;
}

.schedule-month-popover__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.schedule-month-option {
  min-height: 34px;
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-control-radius);
  font: inherit;
  font-size: var(--fs-caption);
  font-weight: 620;
  cursor: pointer;
}

.schedule-month-option:hover {
  border-color: rgba(115, 166, 255, 0.48);
}

.schedule-month-option.is-active {
  border-color: rgba(222, 151, 75, 0.72);
  background: rgba(222, 151, 75, 0.16);
}

.employee-schedule-month-selects {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  gap: 0;
}

.employee-schedule-month-selects > .employee-schedule-select:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.employee-schedule-month-selects > .employee-schedule-select:last-child {
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.employee-schedule-select {
  min-height: 38px;
  padding: 8px 34px 8px 12px;
  color: var(--text-main);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.014)),
    var(--bg-control);
  border: 1px solid var(--border-mid);
  border-radius: var(--workspace-panel-radius);
  box-shadow: var(--btn-shadow);
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 620;
  line-height: 1.2;
  cursor: pointer;
}

.employee-schedule-select:focus {
  border-color: rgba(222, 151, 75, 0.72);
  outline: none;
  box-shadow:
    0 0 0 3px rgba(222, 151, 75, 0.14),
    var(--btn-shadow);
}

.employee-schedule-select option {
  color: var(--text-main);
  background: var(--bg-control);
}

@media (max-width: 768px) {
  .desktop-table {
    display: none;
  }

  .mobile-cards {
    display: grid;
    gap: 8px;
  }

  .mobile-cards .mobile-card {
    display: grid;
    gap: 0;
    padding: 9px 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--border-soft);
    border-radius: var(--workspace-panel-radius);
    box-shadow: none;
  }

  .mobile-card-row {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(82px, 0.8fr) minmax(0, 1.2fr);
    gap: 10px;
    align-items: center;
    padding: 6px 0;
  }

  .mobile-card-row + .mobile-card-row {
    border-top: 1px solid rgba(255, 255, 255, 0.055);
  }

  .mobile-card-label {
    min-width: 0;
    color: var(--text-muted);
    font-size: var(--fs-caption);
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
  }

  .mobile-card-value {
    min-width: 0;
    color: var(--text-main);
    font-size: var(--fs-caption);
    font-weight: 580;
    line-height: 1.3;
    text-align: right;
    overflow-wrap: anywhere;
  }

  .gas-mode-dept_head .dh-production-employee-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    margin-top: 8px;
  }

  .gas-mode-dept_head .dh-production-employee-card {
    min-height: 50px;
    padding: 7px 9px;
  }

  .gas-mode-dept_head .dh-employee-metrics-details {
    gap: 8px;
  }

  .gas-mode-dept_head .dh-employee-metrics-item {
    min-height: 78px;
    padding: 10px;
  }

  .schedule-month-shell {
    overflow: visible;
  }

  .schedule-mode-switch {
    margin-bottom: 10px;
  }

  .schedule-toolbar {
    align-items: stretch;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }

  /* Тулбар на узком экране выкладывается колонкой, поэтому flex-basis здесь
     задаёт высоту, а не ширину: 240px растягивали переключатель в квадрат.
     Ширину даёт растяжка по поперечной оси, высоту — содержимое.
     Обе строки занимают всю ширину: при `width: auto` они сжимались по
     содержимому и прижимались к левому краю, оставляя пустое поле справа. */
  .schedule-toolbar .schedule-mode-switch,
  .schedule-toolbar-month {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
  }

  .schedule-mode-btn {
    min-height: 38px;
    padding-inline: 8px;
    font-size: var(--fs-caption);
  }

  .schedule-ops-head {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px;
  }

  .schedule-ops-days {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schedule-ops-table-wrap {
    margin-inline: -1px;
  }

  .production-plan-admin-groups,
  .production-plan-list-controls {
    grid-template-columns: 1fr;
  }

  .production-plan-admin-card {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .production-plan-admin-actions {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .production-plan-admin-actions button {
    width: 100%;
  }

  .schedule-month-meta {
    padding: 7px 9px;
    font-size: var(--fs-caption);
  }

  .schedule-month-row-card {
    padding: 9px;
    border-radius: var(--workspace-panel-radius);
  }

  .schedule-month-row-name {
    font-size: var(--fs-caption);
  }

  .schedule-month-row-summary {
    min-height: 38px;
  }

  .schedule-month-row-body {
    margin-top: 6px;
  }

  .schedule-month-weekdays,
  .schedule-month-day-placeholder {
    display: none;
  }

  /* Шапка с днями недели здесь скрыта, а календарь идёт одним столбцом —
     без дня недели в плитке строку «01» не к чему привязать. */
  .schedule-month-day-weekday {
    display: inline;
    margin-right: 6px;
    color: var(--text-muted);
  }

  .schedule-month-days {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .schedule-datetime-grid {
    grid-template-columns: 1fr;
  }

  .schedule-month-day {
    min-height: 56px;
    height: 56px;
    grid-template-columns: 72px minmax(0, 1fr);
    align-content: center;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
  }

  .schedule-month-day-head {
    justify-content: flex-start;
  }

  .schedule-month-day-head em {
    display: none;
  }

  .schedule-month-day .schedule-time {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-caption);
  }

  .schedule-month-day .schedule-time-start::after {
    content: "-";
    margin-left: 8px;
    color: var(--text-muted);
  }

  .schedule-month-day .schedule-status-text,
  .schedule-month-day .schedule-plus {
    font-size: var(--fs-caption);
  }

  .schedule-work-summary {
    min-width: 0;
    padding: 10px;
    overflow: hidden;
  }

  .schedule-work-summary-head {
    display: grid;
    gap: 5px;
  }

  .schedule-work-summary-subtitle {
    max-width: none;
    text-align: left;
  }

  .schedule-work-summary-parts {
    display: grid;
    gap: 10px;
  }

  .schedule-work-summary-table,
  .schedule-work-summary-table thead,
  .schedule-work-summary-table tbody,
  .schedule-work-summary-table tr,
  .schedule-work-summary-table th,
  .schedule-work-summary-table td {
    display: block;
    width: 100%;
  }

  .schedule-work-summary-table thead {
    display: none;
  }

  .schedule-work-summary-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 6px;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--border-soft);
    border-radius: var(--workspace-panel-radius);
    background: rgba(255, 255, 255, 0.024);
  }

  .schedule-work-summary-part {
    padding: 8px;
  }

  .schedule-work-summary-part-title {
    margin: -8px -8px 8px;
  }

  .schedule-work-summary-table tr + tr {
    margin-top: 6px;
  }

  .schedule-work-summary-table td,
  .schedule-work-summary-table th {
    padding: 0;
    border: 0;
    background: transparent;
    font-size: var(--fs-caption);
    line-height: 1.2;
  }

  .schedule-work-summary-table td:first-child {
    grid-column: 1 / -1;
    color: var(--text-main);
    font-size: var(--fs-caption);
  }

  .schedule-work-summary-table td:nth-child(2)::before {
    content: "Смены: ";
    color: var(--text-muted);
  }

  .schedule-work-summary-table td:nth-child(3)::before {
    content: "Ост.: ";
    color: var(--text-muted);
  }

  .schedule-work-summary-table td:nth-child(4)::before {
    content: "Всего: ";
    color: var(--text-muted);
  }

  .schedule-work-summary-table td:nth-child(5)::before {
    content: "В т.ч. сверх: ";
    color: var(--text-muted);
  }
}

@media (min-width: 1024px) {
  /* Once html sets its own overflow, body's overflow-x stops propagating to
     the viewport and body turns into a non-scrolling scroll container that
     swallows position: sticky of the workspace menu. Clip horizontally on
     html instead and keep body overflow visible. */
  html {
    overflow-x: hidden;
    overflow-y: scroll;
  }

  body {
    overflow: visible;
  }

  body {
    font-size: var(--fs-body-lg);
  }

  h1 { font-size: var(--fs-title); }
  h2 { font-size: var(--fs-h1); margin-bottom: 12px; }
  h3 { font-size: var(--fs-h2); margin: 14px 0 9px; }

  label,
  .label,
  .stat-title,
  .period-banner-label {
    margin: 10px 0 5px;
    font-size: var(--fs-caption);
    letter-spacing: 0.07em;
  }

  input,
  select,
  textarea,
  .employee-box,
  .picker-trigger,
  .picker-search-input,
  .nav-date-input,
  .date-picker-btn {
    min-height: 38px;
    padding: 8px 11px;
    border-radius: var(--workspace-panel-radius);
  }

  .gas-mode-admin .card.safe-bottom-space,
  .gas-mode-dept_head .card.safe-bottom-space,
  .gas-mode-employee .card {
    display: grid;
    grid-template-columns: var(--workspace-sidebar-width) minmax(0, 1fr);
    gap: var(--workspace-gap);
    align-items: start;
    min-height: calc(100dvh - 150px);
    padding: var(--workspace-page-pad);
  }

  .gas-mode-admin .card.safe-bottom-space,
  .gas-mode-dept_head .card.safe-bottom-space {
    grid-template-rows: auto auto minmax(430px, auto);
    align-content: start;
  }

  .gas-mode-admin .card.safe-bottom-space > h2:first-child,
  .gas-mode-dept_head .card.safe-bottom-space > h2:first-child {
    grid-column: 2;
    text-align: left;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-soft);
  }

  .gas-mode-admin .card.safe-bottom-space > .tabs-scroll.tabs-centered,
  .gas-mode-dept_head .card.safe-bottom-space > .tabs-scroll.tabs-centered,
  .gas-mode-employee .card > .tabs.tabs-centered,
  .gas-mode-employee .employee-mobile-tabs {
    position: sticky;
    top: var(--workspace-sticky-top);
    align-self: start;
    block-size: fit-content;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
      var(--bg-sidebar);
    border: 1px solid var(--border-soft);
    border-radius: var(--workspace-shell-radius);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.30);
  }

  .gas-mode-admin .card.safe-bottom-space > .tabs-scroll.tabs-centered,
  .gas-mode-dept_head .card.safe-bottom-space > .tabs-scroll.tabs-centered {
    grid-column: 1;
    grid-row: 1 / span 3;
  }

  .gas-mode-employee .card > .tabs.tabs-centered {
    grid-column: 1;
    grid-row: 1;
  }

  .gas-mode-employee .employee-stats-card {
    margin-bottom: 0;
    padding: 0;
    min-height: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .tabs-scroll.tabs-centered::before,
  .gas-mode-employee .card > .tabs.tabs-centered::before,
  .employee-mobile-tabs::before {
    content: "Меню";
    display: block;
    min-height: 20px;
    margin: 1px 7px 6px;
    color: var(--text-muted);
    font-size: var(--fs-h3);
    font-weight: 680;
    line-height: 1.14;
    letter-spacing: 0;
    text-transform: none;
  }

  .gas-mode-admin .card.safe-bottom-space > .tabs-scroll.tabs-centered .tab-btn,
  .gas-mode-dept_head .card.safe-bottom-space > .tabs-scroll.tabs-centered .tab-btn,
  .gas-mode-employee .card > .tabs.tabs-centered .tab-btn,
  .gas-mode-employee .employee-mobile-tabs .tab-btn {
    width: 100%;
    min-height: var(--workspace-button-height);
    justify-content: flex-start;
    text-align: left;
    padding-inline: 9px;
    font-size: var(--fs-caption);
    font-weight: 650;
    white-space: nowrap;
  }

  .gas-mode-admin .card.safe-bottom-space > .nav-bar,
  .gas-mode-dept_head .card.safe-bottom-space > .nav-bar,
  .gas-mode-admin .card.safe-bottom-space > .tab-panel,
  .gas-mode-dept_head .card.safe-bottom-space > .tab-panel,
  .gas-mode-employee .card > .tab-panel,
  .gas-mode-admin .card.safe-bottom-space > .schedule-edit-modal,
  .gas-mode-dept_head .card.safe-bottom-space > .schedule-edit-modal {
    grid-column: 2;
    min-width: 0;
  }

  .gas-mode-admin .card.safe-bottom-space > .nav-bar,
  .gas-mode-dept_head .card.safe-bottom-space > .nav-bar {
    grid-row: 2;
  }

  .gas-mode-admin .card.safe-bottom-space > .tab-panel,
  .gas-mode-dept_head .card.safe-bottom-space > .tab-panel {
    grid-row: 3;
  }

  .gas-mode-admin .card.safe-bottom-space > .tab-panel.active,
  .gas-mode-dept_head .card.safe-bottom-space > .tab-panel.active,
  .gas-mode-employee .card > .tab-panel.active {
    display: block;
    min-height: var(--workspace-content-min-height);
    padding: var(--workspace-panel-pad);
    overflow: hidden;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.008)),
      var(--surface-1);
    border: none;
    border-radius: var(--workspace-panel-radius);
    box-shadow: none;
  }

  .gas-mode-admin .card.safe-bottom-space > .tab-panel.active .nav-bar,
  .gas-mode-dept_head .card.safe-bottom-space > .tab-panel.active .nav-bar,
  .gas-mode-employee .card > .tab-panel.active .nav-bar,
  .gas-mode-admin .card.safe-bottom-space > .nav-bar,
  .gas-mode-dept_head .card.safe-bottom-space > .nav-bar {
    margin-top: 0;
    margin-bottom: 12px;
  }

  .gas-mode-admin .card.safe-bottom-space > .tab-panel.active > :first-child,
  .gas-mode-dept_head .card.safe-bottom-space > .tab-panel.active > :first-child,
  .gas-mode-employee .card > .tab-panel.active > :first-child {
    margin-top: 0;
  }

  .gas-mode-admin .card.safe-bottom-space > .tab-panel.active,
  .gas-mode-dept_head .card.safe-bottom-space > .tab-panel.active,
  .gas-mode-employee .card > .tab-panel.active {
    max-height: none;
    overflow: visible;
  }

  .gas-mode-admin .card.safe-bottom-space > .tab-panel.schedule-workspace.active,
  .gas-mode-dept_head .card.safe-bottom-space > .tab-panel.schedule-workspace.active {
    max-height: none;
    overflow: visible;
  }

  .gas-mode-admin .card.safe-bottom-space > .tab-panel[data-tab="links"].active {
    max-height: none;
    overflow: visible;
  }

  .gas-mode-dept_head .card.safe-bottom-space > .tab-panel[data-tab="productionPlan"].active {
    max-height: none;
    overflow: visible;
  }

  .gas-mode-dept_head .card.safe-bottom-space > .tab-panel[data-tab="warehouse"].active {
    min-height: calc(100dvh - 230px);
    max-height: none;
    overflow: visible;
  }

  .gas-mode-admin .card.safe-bottom-space > .tab-panel.active::-webkit-scrollbar,
  .gas-mode-dept_head .card.safe-bottom-space > .tab-panel.active::-webkit-scrollbar,
  .gas-mode-employee .card > .tab-panel.active::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .gas-mode-employee .employee-page-wrap {
    /* Третья колонка была под карточку «За сегодня»; раздел переехал в
       статистику, поэтому контент занимает всю оставшуюся ширину. */
    grid-template-columns: 205px minmax(0, 1fr);
    align-items: stretch;
    overflow: visible;
  }

  .gas-mode-employee .employee-stats-page-wrap {
    overflow: visible;
  }

  /* Keep every Production workspace on the same desktop menu contract.
     The page wrapper must not become the sticky scroll container. */
  .gas-mode-dept_head .dept-head-page-wrap {
    overflow: visible;
  }

  /* The head workspace has no title/navigation rows before its panels.
     Keep the menu and the active panel on the same top line. */
  .gas-mode-dept_head .card.safe-bottom-space {
    grid-template-rows: minmax(0, auto);
  }

  .gas-mode-dept_head .card.safe-bottom-space > .tabs-scroll.tabs-centered,
  .gas-mode-dept_head .card.safe-bottom-space > .tab-panel {
    grid-row: 1;
  }

  .gas-mode-admin .card.safe-bottom-space,
  .gas-mode-dept_head .card.safe-bottom-space,
  .gas-mode-admin .card.safe-bottom-space > .tab-panel.active,
  .gas-mode-dept_head .card.safe-bottom-space > .tab-panel.active {
    min-height: 0;
  }

  .gas-mode-employee .employee-stats-card > .tabs.tabs-centered {
    margin: 0;
  }

  .gas-mode-employee .employee-stats-card > .tab-panel.active {
    min-height: 0;
  }

  .gas-mode-employee .employee-shell-header .app-header__profile {
    display: none;
  }

  .gas-mode-employee .employee-form-card {
    display: contents;
  }

  .gas-mode-employee .employee-form-card > .employee-mobile-tabs {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    block-size: fit-content;
    min-height: 0;
    margin: 0;
    padding-top: 14px;
  }

  .gas-mode-employee .employee-form-card > .employee-mobile-tabs .employee-today-tab-btn {
    display: none;
  }

  .gas-mode-employee .employee-form-card > .tab-panel,
  .gas-mode-employee .employee-form-card > .msg {
    grid-column: 2;
    min-width: 0;
  }

  .gas-mode-employee .employee-form-card > .tab-panel {
    min-height: 0;
    max-height: none;
    padding: 14px;
    overflow: hidden;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.008)),
      var(--surface-1);
    border: 1px solid rgba(255, 255, 255, 0.065);
    border-radius: var(--workspace-panel-radius);
  }

  .gas-mode-employee .employee-form-card > .tab-panel > label:first-child,
  .gas-mode-employee .employee-form-card > .tab-panel > .employee-plan-head:first-child {
    margin-top: 0;
  }

  .gas-mode-employee .employee-form-card > .tab-panel.active {
    display: flex;
    flex-direction: column;
  }

  .gas-mode-employee .employee-form-card > .tab-panel[data-tab="entry"].active,
  .gas-mode-employee .employee-form-card > .tab-panel[data-tab="recipes"].active,
  .gas-mode-employee .employee-form-card > .tab-panel[data-tab="productionPlan"].active,
  .gas-mode-employee .employee-form-card > .tab-panel[data-tab="nav"].active {
    overflow: auto;
  }

  .gas-mode-employee .employee-schedule-readonly {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding-right: 4px;
    scrollbar-width: none;
  }

  .gas-mode-employee .employee-schedule-readonly::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .gas-mode-employee .employee-schedule-readonly h3,
  .gas-mode-employee .employee-schedule-readonly h4 {
    margin: 8px 0 6px;
    font-size: var(--fs-caption);
    line-height: 1.2;
    letter-spacing: 0;
  }

  .gas-mode-employee .employee-schedule-readonly p,
  .gas-mode-employee .employee-schedule-readonly .small {
    font-size: var(--fs-caption);
    line-height: 1.32;
  }

  .gas-mode-employee .employee-schedule-readonly .schedule-calendar-wrap,
  .gas-mode-employee .employee-schedule-readonly .schedule-grid-shell {
    margin-bottom: 8px;
  }

  .gas-mode-employee .employee-schedule-readonly .schedule-calendar-table,
  .gas-mode-employee .employee-schedule-readonly .schedule-grid-table {
    min-width: 650px;
    font-size: var(--fs-caption);
    line-height: 1.15;
  }

  .gas-mode-employee .employee-schedule-readonly .schedule-calendar-table th,
  .gas-mode-employee .employee-schedule-readonly .schedule-calendar-table td,
  .gas-mode-employee .employee-schedule-readonly .schedule-grid-table th,
  .gas-mode-employee .employee-schedule-readonly .schedule-grid-table td {
    padding: 6px 7px;
  }

  .gas-mode-employee .employee-schedule-readonly .schedule-employee-col {
    width: 108px;
    min-width: 108px;
  }

  .gas-mode-employee .employee-schedule-readonly .schedule-day-col span,
  .gas-mode-employee .employee-schedule-readonly .schedule-day-col strong,
  .gas-mode-employee .employee-schedule-readonly .schedule-day-col em {
    display: inline-block;
    margin-right: 3px;
    font-size: var(--fs-caption);
    line-height: 1.05;
  }

  .gas-mode-employee .employee-schedule-readonly .schedule-week-title,
  .gas-mode-employee .employee-schedule-readonly .schedule-half-title,
  .gas-mode-employee .employee-schedule-readonly .schedule-cutoff-banner {
    font-size: var(--fs-caption);
    line-height: 1.25;
    font-weight: 640;
  }

  .gas-mode-employee .employee-schedule-readonly .schedule-cell,
  .gas-mode-employee .employee-schedule-readonly .schedule-calendar-table td,
  .gas-mode-employee .employee-schedule-readonly .schedule-grid-table td {
    min-width: 54px;
    height: 48px;
  }

  .gas-mode-employee .employee-schedule-readonly .schedule-time {
    font-size: var(--fs-caption);
  }

  .gas-mode-employee .employee-schedule-readonly .schedule-status-text,
  .gas-mode-employee .employee-schedule-readonly .schedule-plus {
    font-size: var(--fs-caption);
  }

  .gas-mode-employee #todayCard {
    display: block;
    grid-column: 3;
    grid-row: 1;
    min-height: 0;
    padding: 14px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.008)),
      var(--surface-1);
  }

  .employee-plan-head {
    margin-bottom: 12px;
  }

  .employee-plan-title {
    font-size: var(--fs-h3);
    line-height: 1.16;
    font-weight: 680;
  }

  .employee-plan-subtitle,
  .small {
    font-size: var(--fs-caption);
    line-height: 1.35;
  }

  .entry-mode-row {
    gap: 6px;
  }

  .employee-plan-list,
  #todayList,
  .recipe-details,
  .warehouse-grid {
    gap: 8px;
  }

  .recipe-details {
    margin-top: 6px;
    gap: 6px;
  }

  .employee-plan-item,
  .production-plan-card,
  .today-item,
  .warehouse-tile {
    gap: 9px;
    padding: 8px 10px;
    border-radius: var(--workspace-panel-radius);
    font-weight: 650;
  }

  .employee-plan-item {
    grid-template-columns: minmax(0, 1fr) auto;
    display: grid;
  }

  .employee-plan-status {
    grid-column: 1;
    justify-self: start;
  }

  .employee-plan-item-qty {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }

  .employee-plan-item strong,
  .production-plan-card strong,
  .today-item strong,
  .employee-plan-item-title,
  .production-plan-title,
  .today-item-title {
    font-size: var(--fs-caption);
    font-weight: 680;
    line-height: 1.2;
  }

  .employee-plan-item-qty,
  .employee-plan-qty,
  .production-plan-qty,
  .today-item-qty,
  .stat-value {
    min-width: 38px;
    min-height: 30px;
    padding: 4px 9px;
    font-size: var(--fs-h2);
    border-radius: var(--workspace-panel-radius);
  }

  .today-card-header {
    gap: 10px;
    margin-bottom: 10px;
  }

  .today-tabs {
    gap: 8px;
    padding: 6px;
    margin-bottom: 10px;
  }

  .today-section-title {
    font-size: var(--fs-caption);
  }

  .gas-mode-employee #todayCard .today-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 18px;
    margin-bottom: 8px;
  }

  .gas-mode-employee #todayCard h2 {
    margin: 0;
    font-size: var(--fs-h3);
    line-height: 1.16;
    font-weight: 680;
    letter-spacing: 0;
  }

  .plan-action-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
  }

  .plan-action-actions .btn-primary {
    width: auto;
    min-width: 132px;
  }

  .gas-mode-employee #todayCard .today-summary-box {
    display: none;
  }

  .gas-mode-employee #todayCard .today-summary-box .stat-title {
    margin: 0 0 3px;
    font-size: var(--fs-caption);
    line-height: 1;
    letter-spacing: 0.08em;
  }

  .gas-mode-employee #todayCard .today-summary-box .stat-value {
    min-width: 34px;
    min-height: 28px;
    padding: 2px 7px;
    font-size: var(--fs-h2);
    line-height: 1;
  }

  .gas-mode-employee #todayCard .today-tabs {
    gap: 5px;
    padding: 4px;
    margin-bottom: 9px;
    border-radius: var(--workspace-panel-radius);
    background: rgba(12, 12, 12, 0.42);
  }

  .gas-mode-employee #todayCard .today-tab {
    min-height: 36px;
    justify-content: center;
    padding: 5px 7px;
    font-size: var(--fs-caption);
    font-weight: 640;
    line-height: 1.12;
    text-align: center;
    border-radius: var(--workspace-panel-radius);
    box-shadow: none;
  }

  .gas-mode-employee #todayCard .today-section.active {
    gap: 7px;
  }

  .gas-mode-employee #todayCard .today-section-title {
    margin: 2px 0 6px;
    font-size: var(--fs-caption);
    line-height: 1.1;
    letter-spacing: 0.08em;
  }

  .gas-mode-employee #todayCard .today-item {
    min-height: 40px;
    gap: 8px;
    padding: 7px 8px;
    border-radius: var(--workspace-panel-radius);
  }

  .gas-mode-employee #todayCard .today-item strong,
  .gas-mode-employee #todayCard .today-item-title {
    font-size: var(--fs-caption);
    line-height: 1.15;
  }

  .gas-mode-employee #todayCard .today-item-time {
    font-size: var(--fs-caption);
    line-height: 1.2;
  }

  .gas-mode-employee #todayCard .today-item-qty {
    min-width: 30px;
    min-height: 28px;
    padding: 2px 7px;
    font-size: var(--fs-body-lg);
  }

  .card {
    padding: 16px;
    margin-bottom: 14px;
  }
}

/* Production employee: compact "Today" filters use the same visual contract
   as Okleyka without sharing direction-specific business logic. */
.gas-mode-employee .production-today-card .production-today-head {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border-soft);
}

.gas-mode-employee .production-today-card .production-today-head h2 {
  margin: 0;
}

.gas-mode-employee .production-today-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 var(--workspace-filter-gap-bottom);
  padding: 5px;
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-panel-radius);
  background: var(--workspace-tabstrip-bg);
}

/* Счётчики «За сегодня» — тот же рецепт, что и вкладки-карточки над ними:
   одна высота, один фон, одна рамка, разница только в цифре справа. */
.gas-mode-employee .production-today-filter {
  display: flex;
  min-width: 0;
  min-height: 38px;
  padding: 7px 10px;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-caption);
  font-weight: 650;
  line-height: 1.15;
  text-align: left;
  border: 1px solid var(--border-mid);
  border-radius: var(--workspace-control-radius);
  background:
    radial-gradient(circle at 100% 50%, rgba(79, 140, 255, 0.07), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)),
    var(--neo-bg);
  box-shadow: none;
  cursor: pointer;
}

.gas-mode-employee .production-today-filter strong {
  display: inline-flex;
  min-width: 22px;
  min-height: 22px;
  padding: 2px 6px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--text-main);
  border-radius: 999px;
  background: var(--workspace-tabstrip-bg);
}

.gas-mode-employee .production-today-filter:is(:hover, :focus-visible),
.gas-mode-employee .production-today-filter.is-active {
  color: var(--text-main);
  border-color: rgba(115, 166, 255, 0.7);
  background:
    linear-gradient(90deg, rgba(79, 140, 255, 0.28), rgba(79, 140, 255, 0.08) 44%, rgba(255, 255, 255, 0.025)),
    var(--surface-active);
  box-shadow:
    inset 3px 0 0 rgba(115, 166, 255, 0.92),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transform: none;
}

.gas-mode-employee .production-today-filter:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.gas-mode-employee .production-today-list {
  display: grid;
  gap: 8px;
}

.gas-mode-employee .production-today-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
  padding: 10px;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-panel-radius);
  background: rgba(255, 255, 255, 0.025);
}

.gas-mode-employee .production-today-item.is-correction {
  border-color: rgba(226, 160, 72, 0.28);
}

.gas-mode-employee .production-today-item > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.gas-mode-employee .production-today-item strong {
  overflow: hidden;
  color: var(--text-main);
  font-size: var(--fs-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gas-mode-employee .production-today-item span {
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.gas-mode-employee .production-today-item b {
  color: var(--text-main);
  font-size: var(--fs-body-lg);
}

.gas-mode-employee .production-today-empty {
  font-size: var(--fs-caption);
  font-weight: 650;
  line-height: 1.35;
}

@media (max-width: 560px) {
  .gas-mode-employee .production-today-filters {
    grid-template-columns: minmax(0, 1fr);
  }

  .gas-mode-employee .production-today-filter:last-child:nth-child(odd) {
    grid-column: auto;
  }
}

@media (max-width: 1023px) {
  .wrap {
    padding: 10px 10px 24px;
  }

  .logo-box {
    min-height: 42px;
  }

  .local-preview-logo,
  .logo-box img,
  .logo-fallback-inline svg {
    max-width: 126px;
    max-height: 34px;
  }

  .card,
  .auth-gateway-card,
    .employee-mobile-card,
    .mobile-card,
    .table-mobile-card,
    .mobile-only,
    .employee-page-wrap,
    .employee-stats-page-wrap {
    display: block;
  }

  .tab-panel:not(.active),
  .employee-mobile-card.tab-panel:not(.active) {
    display: none;
  }

  .card,
  .auth-gateway-card,
    .employee-mobile-card,
    .employee-page-wrap,
    .employee-stats-page-wrap {
    border-radius: var(--workspace-shell-radius);
  }

  /* Карточки на мобилке без рамки и тени, чтобы не было двойной окантовки с внутренней панелью. */
  .gas-mode-employee .card,
  .gas-mode-dept_head .card {
    border: none;
    box-shadow: none;
  }

  .gas-mode-staff_admin .form-actions,
  .gas-mode-import .form-actions,
  .gas-mode-employee .form-actions {
    display: block;
  }

  .gas-mode-staff_admin .form-actions .btn-primary,
  .gas-mode-import .form-actions .btn-primary,
  .gas-mode-employee .form-actions .btn-primary {
    width: 100%;
    min-width: 0;
  }

  .schedule-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schedule-month-field,
  .schedule-edit-btn {
    grid-column: 1 / -1;
  }

  .employee-shell-header,
  .app-header {
    padding: 0 14px;
    border-radius: var(--workspace-shell-radius) var(--workspace-shell-radius) 0 0;
  }

  .employee-header-profile {
    max-width: 76vw;
    font-size: var(--fs-caption);
  }

  .app-header__profile {
    width: 36px;
    height: 36px;
  }

  /* Квадратная иконка — только для варианта в шапке. В разделе «Настройки»
     кнопка стоит в ряду с остальными и подчиняется их общему размеру. */
  .app-header .header-notification-btn,
  .ok-topbar .header-notification-btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    overflow: hidden;
    font-size: var(--fs-caption);
  }

  .app-header .header-notification-btn .notification-button-label,
  .ok-topbar .header-notification-btn .notification-button-label {
    display: none;
  }

  .employee-mobile-tabs,
  .auth-gateway-tabs,
  .tabs,
  .tabs-scroll,
  .tabs-centered {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .mobile-tab-source {
    display: none !important;
    margin: 0 0 14px;
  }

  .mobile-tab-source.mobile-tabs-open {
    display: grid !important;
  }

  .mobile-tab-menu-toggle {
    width: 100%;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
  }

  .mobile-tab-menu-toggle[aria-expanded="true"] {
    display: inline-flex;
  }

  /* The page wrappers clip horizontal overflow (a wide card must not push
     the shell), but overflow: hidden would also make them the scroll
     container for the sticky mobile menu. clip keeps the horizontal cut
     without creating a scroll container. */
  .dept-head-page-wrap,
  .employee-page-wrap,
  .employee-stats-page-wrap {
    overflow-x: clip;
    overflow-y: visible;
  }

  .gas-mode-employee .employee-form-card > .tab-panel.active {
    display: block;
    margin-top: 10px;
    /* Оболочка и карточка уже дают поля по краям — панели хватает меньшего
       внутреннего отступа, иначе на узком экране получается отступ в отступе. */
    padding: 8px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.012)),
      var(--surface-2);
    border: none;
    border-radius: var(--workspace-shell-radius);
    box-shadow: none;
  }

  .gas-mode-employee .employee-plan-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "main main"
      "status quantity";
    align-items: center;
    gap: 8px 10px;
    padding: 10px 12px;
    overflow: hidden;
    border-radius: var(--workspace-panel-radius);
    text-align: left;
  }

  .gas-mode-employee .employee-plan-item-main {
    grid-area: main;
    width: 100%;
    gap: 3px;
  }

  .gas-mode-employee .employee-plan-item-main strong {
    width: 100%;
    font-size: var(--fs-body);
    font-weight: 650;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .gas-mode-employee .employee-plan-item-main em {
    font-size: var(--fs-caption);
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .gas-mode-employee .employee-plan-status {
    grid-area: status;
    justify-self: start;
  }

  .gas-mode-employee .employee-plan-item-qty {
    grid-area: quantity;
    align-self: center;
    justify-self: end;
    min-width: 48px;
    min-height: 30px;
    padding: 5px 9px;
    font-size: var(--fs-body-lg);
    line-height: 1.1;
  }

  .gas-mode-employee .recipe-component-card {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 10px;
    padding: 9px 10px;
    overflow: hidden;
    border-radius: var(--workspace-panel-radius);
  }

  .gas-mode-employee .recipe-component-type,
  .gas-mode-employee .recipe-component-name,
  .gas-mode-employee .recipe-component-qty {
    min-width: 0;
    min-height: 0;
    padding: 0;
    font-size: var(--fs-caption);
    font-weight: 640;
  }

  .gas-mode-employee .recipe-component-type {
    grid-column: 1 / -1;
    color: var(--text-muted);
    font-size: var(--fs-caption);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .gas-mode-employee .recipe-component-name {
    grid-column: 1;
    justify-content: flex-start;
    border: 0;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .gas-mode-employee .recipe-component-qty {
    grid-column: 2;
    align-self: center;
    justify-content: center;
    min-height: 28px;
    max-width: 104px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.065);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--workspace-panel-radius);
    font-size: var(--fs-caption);
    white-space: nowrap;
  }

  .gas-mode-employee #todayCard .today-card-header {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
  }

  .gas-mode-employee #todayCard h2 {
    margin: 0;
    font-size: var(--fs-h3);
    line-height: 1.16;
    font-weight: 680;
    letter-spacing: 0;
  }

  .gas-mode-employee #todayCard .today-summary-box {
    display: none;
  }

  .gas-mode-employee #todayCard .today-tabs {
    gap: 6px;
    padding: 5px;
    margin-bottom: 10px;
  }

  .gas-mode-employee #todayCard .today-tab {
    min-height: 36px;
    padding: 7px 10px;
    font-size: var(--fs-body);
    font-weight: 640;
    border-radius: var(--workspace-panel-radius);
  }

  .gas-mode-employee .employee-schedule-personal-head {
    display: grid;
    gap: 3px;
  }

  .gas-mode-employee .employee-schedule-calendar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .gas-mode-employee .employee-schedule-month-card {
    padding: 8px;
    border-radius: var(--workspace-panel-radius);
  }

  .gas-mode-employee .employee-schedule-calendar-head {
    display: none;
  }

  .gas-mode-employee .employee-schedule-day {
    min-height: 44px;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-content: center;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.045);
    border-radius: var(--workspace-panel-radius);
  }

  .gas-mode-employee .employee-schedule-day.schedule-day-outside {
    display: none;
  }

  .gas-mode-employee .employee-schedule-day-value .schedule-time {
    min-height: auto;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    font-size: var(--fs-caption);
  }

  .gas-mode-employee .employee-schedule-day-value .schedule-time-start::after {
    content: "-";
    margin-left: 8px;
    color: var(--text-muted);
  }

  .gas-mode-employee .employee-schedule-day-name {
    font-size: var(--fs-caption);
    line-height: 1.1;
  }

  .gas-mode-employee .employee-schedule-day-value {
    font-size: var(--fs-caption);
    line-height: 1.15;
  }

  .gas-mode-employee label,
  .gas-mode-employee .label {
    font-weight: 720;
  }

  .gas-mode-employee .tab-btn,
  .gas-mode-employee .entry-mode-btn,
  .gas-mode-employee .picker-trigger,
  .gas-mode-employee #submitBtn,
  .gas-mode-employee .employee-plan-item,
  .gas-mode-employee .today-tab {
    font-weight: 680;
  }

  .gas-mode-employee .picker-trigger-value,
  .gas-mode-employee input,
  .gas-mode-employee select,
  .gas-mode-employee textarea {
    font-weight: 620;
  }

  .gas-mode-employee .entry-mode-row {
    gap: 6px;
  }

  .gas-mode-employee .entry-mode-btn.active,
  .gas-mode-employee .tab-btn.active,
  .gas-mode-employee .today-tab.active {
    background:
      linear-gradient(90deg, rgba(79, 140, 255, 0.30), rgba(79, 140, 255, 0.09) 46%, rgba(255, 255, 255, 0.025)),
      var(--surface-active);
    border-color: rgba(122, 172, 255, 0.82);
    box-shadow:
      inset 4px 0 0 rgba(122, 172, 255, 0.98),
      inset 0 1px 0 rgba(255, 255, 255, 0.07),
      var(--menu-active-shadow);
  }

  .gas-mode-employee #submitBtn {
    width: 100%;
    min-width: 0;
    margin-inline: auto;
    margin-top: 12px;
    padding-inline: 18px;
    justify-content: center;
  }

  .gas-mode-employee .employee-schedule-readonly {
    max-height: min(58dvh, 560px);
    overflow: auto;
    padding-right: 4px;
  }

  .gas-mode-employee .employee-schedule-readonly .schedule-calendar-table,
  .gas-mode-employee .employee-schedule-readonly .schedule-grid-table {
    min-width: 620px;
    font-size: var(--fs-caption);
  }

  .gas-mode-employee .employee-schedule-readonly .schedule-calendar-table th,
  .gas-mode-employee .employee-schedule-readonly .schedule-calendar-table td,
  .gas-mode-employee .employee-schedule-readonly .schedule-grid-table th,
  .gas-mode-employee .employee-schedule-readonly .schedule-grid-table td {
    padding: 8px 9px;
  }

  .tab-btn,
  .nav-bar-btn,
  .entry-mode-btn,
  .today-tab {
    width: 100%;
  }

  .secondary-action-card {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
  }

  .secondary-action-link {
    width: 100%;
    min-width: 0;
    min-height: 44px;
  }

  .warehouse-bulk-bar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .warehouse-tile {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
    padding: 10px;
  }

  .warehouse-tile-header,
  .warehouse-tile-meta {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
  }

  .warehouse-select,
  .warehouse-tile-employee,
  .warehouse-tile-position,
  .warehouse-tile-meta span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .warehouse-tile-position {
    color: var(--text-main);
    font-size: var(--fs-body);
    line-height: 1.22;
  }

  .warehouse-post-btn {
    width: 100%;
    justify-content: center;
    white-space: normal;
  }

  .nav-bar,
  .entry-mode-row,
  .today-tabs {
    display: grid;
    grid-template-columns: 1fr;
  }

  .account-header {
    align-items: flex-start;
    padding: 12px;
  }

  .account-table th,
  .account-table td {
    padding: 10px 9px;
    font-size: var(--fs-caption);
  }

  .account-table th:last-child,
  .account-table td:last-child {
    width: 76px;
  }

  .account-table th:last-child {
    font-size: var(--fs-caption);
    line-height: 1.15;
    white-space: normal;
  }

  .local-account-chart {
    gap: 5px;
  }

  .gas-mode-dept_head .dept-head-card {
    padding: 12px;
  }

  .gas-mode-dept_head .production-summary-section {
    gap: 8px;
    margin: 10px 0;
    padding: 9px;
    border-radius: var(--workspace-panel-radius);
  }

  .gas-mode-dept_head .production-summary-title {
    font-size: var(--fs-caption);
  }

  .gas-mode-dept_head .production-metrics-grid,
  .gas-mode-dept_head .production-metrics-grid.timing,
  .gas-mode-dept_head .production-metrics-grid.schedule {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .gas-mode-dept_head .production-metrics-grid .stat-box {
    min-height: 64px;
    padding: 8px;
  }

  .gas-mode-dept_head .production-metrics-grid .metric-text {
    font-size: var(--fs-caption);
  }

  .gas-mode-dept_head .dept-head-card > h2:first-child {
    margin: 0 0 12px;
    padding: 0 2px 11px;
    font-size: var(--fs-h3);
    font-weight: 620;
    line-height: 1.25;
    border-bottom: 1px solid var(--border-soft);
  }

  .gas-mode-dept_head .mobile-tab-menu-toggle {
    min-height: 44px;
    margin-bottom: 10px;
    padding: 8px 12px;
    border-radius: var(--workspace-panel-radius);
    font-size: var(--fs-body);
    font-weight: 620;
  }

  .gas-mode-dept_head .tabs-scroll.mobile-tab-source:not(.mobile-tabs-open) {
    display: none !important;
  }

  .gas-mode-dept_head .tabs-scroll.mobile-tab-source.mobile-tabs-open {
    display: grid !important;
  }

  .gas-mode-dept_head .card.safe-bottom-space > .tab-panel.active {
    margin-top: 10px;
  }

  .gas-mode-dept_head .tabs-scroll.tabs-centered {
    gap: 6px;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid var(--border-soft);
    border-radius: var(--workspace-panel-radius);
    background: var(--surface-3);
  }

  .gas-mode-dept_head .tabs-scroll.tabs-centered .tab-btn {
    min-height: var(--workspace-button-height);
    padding: 7px 10px;
    border-radius: var(--workspace-panel-radius);
    font-size: var(--fs-caption);
    font-weight: 600;
  }


  .gas-mode-dept_head [data-tab="summary"] .stats-grid,
  .gas-mode-dept_head [data-tab="schedule"] .stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin: 10px 0;
  }

  .gas-mode-dept_head [data-tab="summary"] .stat-box,
  .gas-mode-dept_head [data-tab="schedule"] .stat-box {
    min-width: 0;
    padding: 9px 8px;
    border-radius: var(--workspace-panel-radius);
  }

  .gas-mode-dept_head [data-tab="summary"] .stat-title,
  .gas-mode-dept_head [data-tab="schedule"] .stat-title {
    min-height: 22px;
    margin: 0 0 5px;
    font-size: var(--fs-caption);
    line-height: 1.25;
    letter-spacing: 0.05em;
    overflow-wrap: anywhere;
  }

  .gas-mode-dept_head [data-tab="summary"] .stat-value,
  .gas-mode-dept_head [data-tab="schedule"] .stat-value {
    min-width: 32px;
    min-height: 28px;
    padding: 3px 8px;
    border-radius: var(--workspace-panel-radius);
    font-size: var(--fs-h3);
    font-weight: 650;
  }

  .gas-mode-dept_head .period-chip {
    width: 100%;
    padding: 7px 9px;
    font-size: var(--fs-caption);
    line-height: 1.35;
    border-radius: var(--workspace-panel-radius);
  }

  .gas-mode-dept_head .search-input {
  }

  .gas-mode-dept_head .production-plan-panel {
    min-width: 0;
  }

  .gas-mode-dept_head .production-plan-head {
    margin-bottom: 9px;
  }

  .gas-mode-dept_head .production-plan-title,
  .gas-mode-dept_head .schedule-editor-title {
    font-size: var(--fs-body-lg);
    font-weight: 620;
  }

  .gas-mode-dept_head .production-plan-subtitle,
  .gas-mode-dept_head .schedule-editor-subtitle {
    margin-top: 4px;
    font-size: var(--fs-caption);
    line-height: 1.35;
  }

  .gas-mode-dept_head .production-plan-workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }

  .gas-mode-dept_head .production-plan-mobile-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    padding: 4px;
    margin-bottom: 8px;
    border: 1px solid var(--border-soft);
    border-radius: var(--workspace-panel-radius);
    background: var(--surface-2);
  }

  .gas-mode-dept_head .production-plan-mobile-switch button {
    min-width: 0;
    min-height: 36px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: var(--workspace-control-radius);
    color: var(--text-muted);
    background: transparent;
    box-shadow: none;
    font-size: var(--fs-caption);
  }

  .gas-mode-dept_head .production-plan-mobile-switch button.active {
    color: var(--text-main);
    border-color: rgba(91, 151, 255, 0.62);
    background: rgba(79, 140, 255, 0.18);
  }

  .gas-mode-dept_head .production-plan-create,
  .gas-mode-dept_head .production-plan-schedule-preview {
    width: 100%;
    min-width: 0;
    padding: 9px;
    border-radius: var(--workspace-panel-radius);
  }

  .gas-mode-dept_head .production-plan-workspace {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .gas-mode-dept_head .production-plan-create,
  .gas-mode-dept_head .production-plan-schedule-preview {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .gas-mode-dept_head .production-plan-form,
  .gas-mode-dept_head .production-plan-list-controls {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .gas-mode-dept_head .production-plan-list-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 8px;
    padding: 6px;
  }

  .gas-mode-dept_head .production-plan-list-controls .search-input {
    grid-column: 1 / -1;
  }

  .gas-mode-dept_head .production-plan-list-controls > * {
    min-height: 38px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: var(--fs-caption);
  }

  .gas-mode-dept_head .production-plan-form label,
  .gas-mode-dept_head .production-plan-form .production-plan-note {
    grid-column: 1;
    margin-top: 7px;
  }

  .gas-mode-dept_head .production-plan-form button,
  .gas-mode-dept_head .production-plan-list-controls > * {
    width: 100%;
    min-width: 0;
  }

  .gas-mode-dept_head .production-plan-schedule-preview {
    order: 2;
  }

  .gas-mode-dept_head .production-plan-schedule-day {
    padding: 8px;
    font-size: var(--fs-caption);
    line-height: 1.3;
  }

  .gas-mode-dept_head .production-plan-admin-groups {
    gap: 8px;
    margin-top: 8px;
  }

  .gas-mode-dept_head .production-plan-employee-group {
    gap: 5px;
    padding: 7px;
  }

  .gas-mode-dept_head .production-plan-admin-list {
    gap: 5px;
  }

  .gas-mode-dept_head .production-plan-admin-card {
    gap: 6px;
    padding: 7px 8px;
  }

  .gas-mode-dept_head .production-plan-admin-main {
    gap: 3px;
  }

  .gas-mode-dept_head .production-plan-drag-handle,
  .gas-mode-dept_head .production-plan-meta-employee,
  .gas-mode-dept_head .production-plan-meta-priority {
    display: none;
  }

  .gas-mode-dept_head .production-plan-admin-meta {
    gap: 4px 8px;
    font-size: var(--fs-caption);
  }

  .gas-mode-dept_head .production-plan-admin-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .gas-mode-dept_head .production-plan-admin-actions button {
    min-width: 0;
    min-height: 34px;
    padding: 5px 4px;
    font-size: var(--fs-caption);
  }
}

/* Dedicated administrator direction gateway. */
.admin-panel-navigation {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 0 14px;
}

.admin-panel-back {
  display: inline-flex;
  width: auto;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.admin-direction-page {
  min-height: 100vh;
  margin: 0;
  background: radial-gradient(circle at 15% 10%, rgba(82, 140, 226, .16), transparent 32rem), linear-gradient(145deg, #3b3936 0%, #272624 45%, #171817 100%);
  color: #f2f0eb;
}

.admin-direction-page__shell {
  width: min(1040px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 48px;
}

.admin-direction-page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.admin-direction-page__logo { width: 150px; max-width: 42vw; }

.admin-direction-picker {
  margin-top: clamp(44px, 9vh, 92px);
  padding: clamp(22px, 4vw, 42px);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--workspace-shell-radius);
  background: rgba(20, 21, 20, .9);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .3);
}

.admin-direction-picker__heading { margin-bottom: 24px; }

.admin-direction-picker__eyebrow {
  display: block;
  margin-bottom: 7px;
  color: #91bfff;
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.admin-direction-picker h1 { margin: 0; font-size: clamp(26px, 4vw, 40px); line-height: 1.1; }
.admin-direction-picker__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.admin-direction-card {
  display: grid;
  min-height: 178px;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  gap: 18px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-top: 3px solid #5d95e8;
  border-radius: var(--workspace-shell-radius);
  background: linear-gradient(150deg, rgba(52, 53, 51, .98), rgba(37, 38, 37, .98));
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.admin-direction-card.is-okleyka { border-top-color: #68ae83; }
.admin-direction-card.is-label-print { border-top-color: #c08bd6; }
.admin-direction-card:hover, .admin-direction-card:focus-visible { transform: translateY(-3px); border-color: #73a8f4; background: linear-gradient(150deg, rgba(59, 65, 72, .98), rgba(38, 42, 46, .98)); }
.admin-direction-card:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.admin-direction-card:disabled { cursor: wait; opacity: .58; }
.admin-direction-card.is-loading { opacity: 1; box-shadow: 0 0 0 2px rgba(115, 168, 244, .45); }
.admin-direction-card__icon { grid-column: 1 / -1; font-size: var(--fs-display); }
.admin-direction-card__copy { display: flex; min-width: 0; flex-direction: column; gap: 7px; align-self: end; }
.admin-direction-card__copy strong { font-size: var(--fs-h2); }
.admin-direction-card__copy small { color: #b8b6b0; font-size: var(--fs-caption); line-height: 1.45; }
.admin-direction-card__arrow { align-self: end; color: #91bfff; font-size: var(--fs-title); }
.admin-direction-picker__message { min-height: 20px; margin: 16px 0 0; color: #ff9898; font-size: var(--fs-body); }

@media (max-width: 768px) {
  .admin-direction-page__shell { width: min(100% - 20px, 560px); padding-top: 16px; }
  .admin-direction-picker { margin-top: 28px; }
  .admin-direction-picker__grid { grid-template-columns: 1fr; }
  .admin-direction-card { min-height: 122px; grid-template-columns: auto 1fr auto; grid-template-rows: 1fr; align-items: center; }
  .admin-direction-card__icon { grid-column: auto; }
  .admin-direction-card__copy, .admin-direction-card__arrow { align-self: center; }
}

.gas-mode-dept_head .label-print-panel {
  min-width: 0;
}

/* Typography must never inherit the min-content width of its 880px board.
   Without an explicit zero-min grid track, mobile browsers expand the whole
   workspace and body overflow clipping hides the right side of the page. */
.label-print-app .label-print-workspace {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  grid-template-columns: minmax(0, 1fr);
}

.label-print-app :is(
  .label-print-workspace-grid,
  .label-print-panel,
  #labelPrintTasks,
  .label-print-board-scroll,
  .label-print-table-wrap
) {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.label-print-app :is(.label-print-board-scroll, .label-print-table-wrap) {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  scrollbar-width: thin;
}

.gas-mode-dept_head .label-print-section-switch {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.label-print-create-card {
  width: 100%;
  max-width: none;
  padding: 14px;
}

.label-print-create-card .label-print-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 0;
}

.label-print-create-card input,
.label-print-create-card select {
  width: 100%;
  min-width: 0;
}

.label-print-create-card textarea {
  width: 100%;
  min-width: 0;
  min-height: 72px;
}

.label-print-form-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.label-print-field-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 18px;
}

.label-print-field-title > label {
  color: var(--muted, #aaa6a0);
  font-size: var(--fs-caption);
  text-transform: uppercase;
}

.label-print-priority-info {
  position: relative;
  z-index: 4;
}

.label-print-priority-info > summary {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-mid);
  border-radius: 50%;
  color: #8fbcf4;
  background: rgba(79, 140, 255, 0.1);
  font-size: var(--fs-caption);
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}

.label-print-priority-info > summary::-webkit-details-marker {
  display: none;
}

.label-print-priority-info > summary:hover,
.label-print-priority-info[open] > summary {
  border-color: rgba(91, 151, 255, 0.62);
  background: rgba(79, 140, 255, 0.2);
}

.label-print-priority-info-below {
  grid-column: 1 / -1;
  justify-self: start;
}

.label-print-priority-info-below > summary {
  width: auto;
  height: 28px;
  gap: 6px;
  padding: 0 9px;
  border-radius: var(--workspace-control-radius);
  font-weight: 700;
}

.label-print-priority-info-below > summary > span {
  display: inline-flex;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: var(--fs-caption);
}

.label-print-priority-info-below .label-print-priority-info-popover {
  right: auto;
  left: 0;
}

.label-print-priority-info-popover {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  display: grid;
  gap: 7px;
  width: min(320px, calc(100vw - 48px));
  padding: 11px;
  border: 1px solid var(--border-mid);
  border-radius: var(--workspace-panel-radius);
  background: var(--bg-panel);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.48);
}

.label-print-priority-info-popover > strong {
  color: var(--text-main);
  font-size: var(--fs-caption);
}

.label-print-priority-info-popover > span {
  --label-priority: #786a9b;
  position: relative;
  padding-left: 14px;
  color: var(--text-soft);
  font-size: var(--fs-caption);
  line-height: 1.35;
}

.label-print-priority-info-popover > span::before {
  position: absolute;
  top: 3px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--label-priority);
  content: "";
}

.label-print-priority-info-popover .is-p1 { --label-priority: #c95555; }
.label-print-priority-info-popover .is-p2 { --label-priority: #ca7b47; }
.label-print-priority-info-popover .is-p3 { --label-priority: #c0a34a; }
.label-print-priority-info-popover .is-p4 { --label-priority: #786a9b; }

.label-print-create-actions {
  justify-content: flex-end;
  margin-top: 12px;
}

.label-print-priority-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.label-print-priority-filter {
  --label-priority: #777;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 120px;
  min-height: 58px;
  padding: 10px 12px;
  color: var(--text-main);
  border: 1px solid var(--border-soft);
  border-top: 3px solid var(--label-priority);
  background: var(--bg-panel-soft);
  text-align: left;
}

.label-print-priority-filter span {
  font-size: var(--fs-caption);
  font-weight: 700;
}

.label-print-priority-filter strong {
  min-width: 28px;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: var(--fs-body-lg);
  text-align: center;
}

.label-print-priority-filter:hover,
.label-print-priority-filter.is-active {
  border-color: var(--label-priority);
  border-top-color: var(--label-priority);
  background: color-mix(in srgb, var(--label-priority) 14%, var(--bg-panel-soft));
  box-shadow: inset 0 0 0 1px var(--label-priority);
}

.label-print-session {
  display: flex;
  align-items: center;
  gap: 8px;
}

.label-print-session > span {
  color: var(--text-soft);
  font-size: var(--fs-caption);
}

.label-print-session .ui-button {
  min-height: 38px;
}

.label-print-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(210px, 1fr));
  gap: 10px;
  min-width: 880px;
}

.label-print-board-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}

.label-print-column {
  --label-priority: #777;
  overflow: hidden;
  border: 1px solid var(--border-mid);
  border-top: 3px solid var(--label-priority);
  border-radius: var(--workspace-panel-radius);
  background: var(--surface-3);
}

.label-print-column.is-p1,
.label-print-priority-filter.is-p1 { --label-priority: #c95555; }
.label-print-column.is-p2,
.label-print-priority-filter.is-p2 { --label-priority: #ca7b47; }
.label-print-column.is-p3,
.label-print-priority-filter.is-p3 { --label-priority: #c0a34a; }
.label-print-column.is-p4,
.label-print-priority-filter.is-p4 { --label-priority: #786a9b; }

:root[data-theme="light"] .label-print-column.is-p1 { --label-priority: #a4453a; }
:root[data-theme="light"] .label-print-column.is-p2 { --label-priority: #8a5320; }
:root[data-theme="light"] .label-print-column.is-p3 { --label-priority: #7a6519; }
:root[data-theme="light"] .label-print-column.is-p4 { --label-priority: #5a4f78; }

.label-print-column > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px;
  border-bottom: 1px solid var(--border-mid);
}

.label-print-column > header strong {
  min-width: 24px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--workspace-tabstrip-bg);
  text-align: center;
}

.label-print-column-list {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 120px;
  padding: 8px;
  transition: background-color 150ms ease, box-shadow 150ms ease;
}

.label-print-column-list.is-drop-target {
  background: rgba(93, 148, 221, 0.12);
  box-shadow: inset 0 0 0 2px var(--focus-ring);
}

.label-print-task-card {
  padding: 11px;
  border: 1px solid var(--border-mid);
  border-left: 3px solid var(--label-priority);
  border-radius: var(--workspace-control-radius);
  background: var(--bg-panel-soft);
  cursor: pointer;
}

.label-print-task-card:hover {
  border-color: color-mix(in srgb, var(--label-priority) 72%, var(--border-mid));
  background: color-mix(in srgb, var(--label-priority) 8%, var(--bg-panel-soft));
}

.label-print-task-card:focus-visible {
  outline: 2px solid var(--focus-ring, #5b97ff);
  outline-offset: 2px;
}

.label-print-task-card.is-dragging {
  opacity: 0.45;
  cursor: grabbing;
}

.label-print-task-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.label-print-task-top b {
  color: var(--label-priority);
  font-size: var(--fs-h3);
}

.label-print-task-meta,
.label-print-task-card p,
.label-print-column-empty {
  margin: 7px 0 0;
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.label-print-progress {
  height: 5px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}

.label-print-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--label-priority);
}

.label-print-task-card .label-print-actions {
  margin-top: 10px;
}

.label-print-task-number {
  width: 1%;
  white-space: nowrap;
}

.label-print-compact-number {
  display: inline-flex;
  width: fit-content;
  margin-top: 5px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.label-print-history-table {
  min-width: 760px !important;
}

.gas-mode-dept_head .label-print-stock-table {
  min-width: 680px !important;
}

.gas-mode-dept_head .label-print-stock-sort {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  text-transform: inherit;
  cursor: pointer;
}

.gas-mode-dept_head .label-print-stock-sort:hover {
  background: transparent;
  color: var(--text-main, #f2f0ed);
}

.gas-mode-dept_head .label-print-stock-sort:focus-visible {
  background: transparent;
  color: var(--text-main, #f2f0ed);
  outline: 2px solid var(--focus-ring, #5b97ff);
  outline-offset: 3px;
}

.gas-mode-dept_head .label-print-stock-sort b {
  color: var(--text-soft, #aaa6a0);
  font-size: var(--fs-body);
}

.gas-mode-dept_head .label-print-stock-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 250px);
  gap: 8px;
  margin-bottom: 10px;
}

.gas-mode-dept_head .label-print-stock-toolbar .search-input,
.gas-mode-dept_head .label-print-stock-toolbar select {
  width: 100%;
  min-width: 0;
}

.gas-mode-dept_head .label-print-stock-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px 12px;
  max-width: 620px;
  margin-left: auto;
  font-size: var(--fs-caption);
  color: var(--text-soft, #aaa6a0);
}

.gas-mode-dept_head .label-print-stock-legend[hidden] {
  display: none;
}

.gas-mode-dept_head .label-print-stock-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.gas-mode-dept_head .label-print-stock-legend i {
  width: 10px;
  height: 10px;
  border-radius: var(--workspace-control-radius);
  background: var(--legend-color);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.gas-mode-dept_head .label-print-stock-legend .is-zero {
  --legend-color: rgba(200, 79, 79, 0.8);
}

.gas-mode-dept_head .label-print-stock-legend .is-low {
  --legend-color: rgba(91, 131, 184, 0.8);
}

.gas-mode-dept_head .label-print-stock-legend .is-printing {
  --legend-color: rgba(192, 163, 74, 0.8);
}

.gas-mode-dept_head .label-print-stock-legend .is-ok {
  --legend-color: rgba(79, 154, 103, 0.8);
}

.gas-mode-dept_head .label-print-stock-legend .is-old {
  --legend-color: rgba(202, 123, 71, 0.9);
}

.gas-mode-dept_head .label-print-stock-row .label-print-stock-balance {
  transition: background-color 140ms ease;
}

.gas-mode-dept_head .label-print-stock-row.is-zero .label-print-stock-balance {
  background: rgba(200, 79, 79, 0.18);
}

.gas-mode-dept_head .label-print-stock-row.is-low .label-print-stock-balance {
  background: rgba(91, 131, 184, 0.18);
}

.gas-mode-dept_head .label-print-stock-row.is-printing .label-print-stock-balance {
  background: rgba(192, 163, 74, 0.16);
}

.gas-mode-dept_head .label-print-stock-row.is-ok .label-print-stock-balance {
  background: rgba(79, 154, 103, 0.15);
}

.gas-mode-dept_head .label-print-stock-row td.is-old-date {
  background: rgba(202, 123, 71, 0.34) !important;
  color: #ffc39e;
  font-weight: 700;
  transition: background-color 140ms ease;
}

.gas-mode-dept_head .label-print-stock-plan strong {
  display: block;
}

.gas-mode-dept_head .label-print-stock-plan small {
  display: block;
  margin-top: 2px;
  color: var(--text-soft, #aaa6a0);
  font-size: var(--fs-caption);
}

.gas-mode-dept_head .dept-head-recipe-editor {
  min-width: 0;
}

.gas-mode-dept_head .dept-head-recipe-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.gas-mode-dept_head .dept-head-recipe-head h2 {
  margin: 0;
  font-size: var(--fs-h2);
}

.gas-mode-dept_head .dept-head-recipe-head p {
  max-width: 720px;
  margin: 0;
}

.gas-mode-dept_head .dept-head-recipe-actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.gas-mode-dept_head .dept-head-recipe-sync-status {
  min-height: 18px;
  margin: -2px 0 8px;
  color: var(--text-secondary, #aeb7c4);
  font-size: var(--fs-caption);
  line-height: 1.35;
}

.gas-mode-dept_head .dept-head-recipe-sync-status.is-muted {
  color: var(--muted, #8f98a5);
}

.gas-mode-dept_head .dept-head-recipe-picker {
  display: grid;
  grid-template-columns: minmax(260px, 1fr);
  align-items: end;
  gap: 4px;
  margin-bottom: 7px;
}

.gas-mode-dept_head .dept-head-recipe-picker .ui-field {
  margin: 0;
}

.gas-mode-dept_head .dept-head-recipe-status {
  align-self: center;
  color: var(--text-soft, #aaa6a0);
  font-size: var(--fs-caption);
}

.gas-mode-dept_head .dept-head-recipe-status.is-error {
  color: var(--danger, #e96c6c);
}

.gas-mode-dept_head .dept-head-recipe-table {
  width: 100%;
  min-width: 930px;
  table-layout: fixed;
}

.gas-mode-dept_head .dept-head-recipe-table th:nth-child(1) {
  width: 82px;
  text-align: center;
}

.gas-mode-dept_head .dept-head-recipe-table th:nth-child(2) {
  width: 260px;
}

.gas-mode-dept_head .dept-head-recipe-table th:nth-child(3) {
  width: 82px;
  text-align: center;
}

.gas-mode-dept_head .dept-head-recipe-table th:nth-child(4) {
  width: 64px;
  text-align: center;
}

.gas-mode-dept_head .dept-head-recipe-table th:nth-child(5) {
  width: 92px;
  text-align: center;
}

.gas-mode-dept_head .dept-head-recipe-table th:nth-child(6),
.gas-mode-dept_head .dept-head-recipe-table th:nth-child(7) {
  width: 92px;
  text-align: center;
}

.gas-mode-dept_head .dept-head-recipe-table th:nth-child(8) {
  width: 108px;
  text-align: center;
}

.gas-mode-dept_head .dept-head-recipe-table th:last-child {
  width: 34px;
  border-right: 0;
}

.gas-mode-dept_head .dept-head-recipe-table td {
  padding: 3px 5px;
  border-right: 1px solid var(--border, #393735);
}

.gas-mode-dept_head .dept-head-recipe-table td:last-child {
  border-right: 0;
}

.gas-mode-dept_head .dept-head-recipe-table th {
  padding: 3px 5px;
  border-right: 1px solid var(--border, #393735);
  height: 26px;
  font-size: var(--fs-caption);
  line-height: 1.1;
  vertical-align: middle;
  white-space: nowrap;
}

.gas-mode-dept_head .dept-head-recipe-input {
  width: 100%;
  min-width: 0;
  min-height: var(--workspace-control-height);
  padding: 4px 7px;
  border: 1px solid var(--border-mid, #4b4844);
  border-radius: var(--workspace-control-radius);
  background: var(--bg-input, #1e1d1b);
  color: var(--text-main, #f2f0ed);
}

.gas-mode-dept_head .dept-head-recipe-input[readonly] {
  border-color: transparent;
  background: transparent;
  color: var(--text-soft, #aaa6a0);
  cursor: default;
}

.gas-mode-dept_head .dept-head-recipe-input:focus {
  border-color: var(--focus-ring, #5b97ff);
  outline: none;
}

.gas-mode-dept_head .dept-head-recipe-input[data-recipe-field="rawCode"],
.gas-mode-dept_head .dept-head-recipe-input[data-recipe-field="rawQty"],
.gas-mode-dept_head .dept-head-recipe-input[data-recipe-field="rawUnit"] {
  text-align: center;
}

.gas-mode-dept_head .dept-head-recipe-component-cell {
  overflow: hidden;
}

.gas-mode-dept_head .dept-head-recipe-component-cell > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gas-mode-dept_head .dept-head-recipe-component-cell > small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
  color: var(--muted, #aaa6a0);
  font-size: var(--fs-caption);
}

.gas-mode-dept_head .dept-head-recipe-metric {
  color: var(--text-soft, #aaa6a0);
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}

.gas-mode-dept_head .dept-head-recipe-metric.is-cost {
  color: var(--text-main, #f2f0ed);
  font-weight: 700;
}

.gas-mode-dept_head .dept-head-recipe-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 7px;
}

.gas-mode-dept_head .dept-head-recipe-metrics > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid var(--border, #393735);
  border-radius: var(--workspace-control-radius);
  background: var(--surface-soft, #242321);
}

.gas-mode-dept_head .dept-head-recipe-metrics small {
  color: var(--muted, #aaa6a0);
  font-size: var(--fs-caption);
  text-transform: uppercase;
}

.gas-mode-dept_head .dept-head-recipe-metrics strong {
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
}

.gas-mode-dept_head .dept-head-recipe-remove {
  width: 30px;
  min-height: 30px;
  padding: 2px;
  font-size: var(--fs-h2);
  line-height: 1;
}

.gas-mode-dept_head .dept-head-recipe-add {
  margin-top: 10px;
  min-height: 34px;
  padding: 6px 10px;
}

.gas-mode-dept_head .label-print-head-actions,
.gas-mode-dept_head .label-print-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gas-mode-dept_head .label-print-head {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.gas-mode-dept_head .label-print-head h2 {
  margin: 0;
  font-size: var(--fs-h1);
}

.gas-mode-dept_head .label-print-head p {
  margin: 5px 0 0;
  color: var(--muted, #aaa6a0);
  font-size: var(--fs-caption);
}

.gas-mode-dept_head .label-print-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 12px;
}

.gas-mode-dept_head .label-print-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 240px);
  gap: 10px;
  margin-bottom: 12px;
}

/* Шесть управляющих элементов: поиск, номер, позиция, тип, сотрудник, сброс.
   `auto-fit` подбирал число колонок под ширину, и последняя строка получалась
   с другим их количеством: четыре поля сверху, два растянутых снизу. Ступени
   заданы явно, поэтому строки всегда одинаковые, а кнопка сброса занимает
   ровно такую же ячейку, как поле (14.09.2026). */
.gas-mode-dept_head .label-print-history-filters {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
}

@media (min-width: 1200px) {
  .gas-mode-dept_head .label-print-history-filters { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.gas-mode-dept_head .label-print-history-filters label {
  display: grid;
  gap: 5px;
  color: var(--muted, #aaa6a0);
  font-size: var(--fs-caption);
}

.gas-mode-dept_head .label-print-history-filters :is(input, select) {
  width: 100%;
  min-width: 0;
  min-height: 38px;
}

/* Кнопка сброса стоит в одном ряду с полями и той же высоты; на узких
   экранах занимает всю строку под фильтрами (09.09.2026). */
.gas-mode-dept_head .label-print-history-filters [data-history-reset] {
  align-self: end;
  min-height: 38px;
  margin: 0;
  justify-content: center;
}

@media (max-width: 900px) {
  .gas-mode-dept_head .label-print-history-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .gas-mode-dept_head .label-print-history-filters { grid-template-columns: 1fr; }
}

.label-print-etiketka {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line, rgba(255, 255, 255, 0.12));
  display: grid;
  gap: 6px;
}

.label-print-etiketka-title {
  font-weight: 600;
  font-size: var(--fs-caption);
}

.label-print-etiketka-field {
  display: grid;
  gap: 3px;
  font-size: var(--fs-caption);
  color: var(--muted, #aaa6a0);
}

.label-print-etiketka-field :is(select, input) {
  width: 100%;
  min-width: 0;
  min-height: 32px;
}

.label-print-etiketka-select {
  max-width: 100%;
}

.label-print-etiketka-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-caption);
  color: var(--muted, #aaa6a0);
  cursor: pointer;
}

.label-print-etiketka-toggle input {
  width: auto;
  min-height: auto;
  margin: 0;
}

.label-print-etiketka-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
}

.label-print-etiketka-row .label-print-etiketka-field {
  flex: 1 1 160px;
}

.label-print-etiketka-row button {
  flex: 0 0 auto;
  min-height: 32px;
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Компактный блок (08.09.2026): поле даты — подпись, затем ввод и кнопка
   календаря в одной строке, подсказка одной строкой под ними. */
.label-print-etiketka {
  gap: 4px;
}

.label-print-etiketka-row .label-print-etiketka-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 6px;
}

.label-print-etiketka-row .label-print-etiketka-field > span,
.label-print-etiketka-row .label-print-etiketka-field > small {
  grid-column: 1 / -1;
}

.label-print-etiketka-row .label-print-etiketka-field .date-picker-btn {
  min-height: 32px;
  margin: 0;
}

.label-print-etiketka-date-hint {
  margin-top: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

/* Строка «дата + Сформировать»: сетка вместо флекса, дата занимает всю
   оставшуюся ширину, кнопка справа по нижнему краю (08.09.2026). */
.label-print-etiketka-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.label-print-etiketka-row .label-print-etiketka-field {
  flex: none;
  min-width: 0;
}

.label-print-etiketka-row .label-print-etiketka-field input {
  width: 100%;
  min-width: 0;
}

.label-print-etiketka-row .label-print-etiketka-field:not(:has(.date-picker-btn)) {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 560px) {
  .label-print-etiketka-row {
    grid-template-columns: 1fr;
  }
}

.label-print-etiketka-status {
  font-size: var(--fs-caption);
  color: var(--muted, #aaa6a0);
  min-height: 16px;
}

.label-print-etiketka-status[data-tone="ok"] { color: var(--ok, #4caf78); }
.label-print-etiketka-status[data-tone="warn"] { color: var(--warn, #d8a44a); }

.label-print-etiketka-output {
  display: grid;
  gap: 8px;
  justify-items: start;
}

.label-print-etiketka-preview {
  max-width: 100%;
  max-height: 160px;
  border-radius: var(--workspace-panel-radius);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
}

/* Телефон, карточный режим таблиц Типографии (08.09.2026): настольная
   минимальная ширина таблицы уводила значения за экран, номер сжимался до 1%.
   Фильтры истории — в две колонки вместо длинного столбца. */
@media screen and (max-width: 768px) {
  .ui-table-cards .label-print-table,
  .ui-table-cards .label-print-history-table {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: auto;
  }

  .ui-table-cards .label-print-table td {
    width: auto !important;
    min-width: 0;
    max-width: none;
    white-space: normal;
    gap: 10px;
  }

  .ui-table-cards .label-print-table td.label-print-task-number {
    width: auto !important;
  }

  .ui-table-cards .label-print-table td.label-print-number {
    text-align: right;
  }

  .ui-table-cards .label-print-table td:not([data-label])::before {
    display: none;
  }

  .label-print-history-filters {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px 8px !important;
  }

  .label-print-history-filters > label {
    min-width: 0;
  }

  .label-print-history-filters .label-print-history-range,
  .label-print-history-filters [data-history-reset] {
    grid-column: 1 / -1;
  }
}

/* Раздел «Этикетки» кабинета Типографии (08.09.2026): интерфейс Date Web в
   шаблоне сайта. Слева параметры (папки Яндекс.Диска, дата, шрифт), справа
   предпросмотр с масштабом, описание результата и PDF. */
.label-browser { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 18px; align-items: start; }
.label-browser-rail { display: grid; gap: 14px; }
.label-browser-step { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--border-soft); border-radius: var(--workspace-panel-radius); background: var(--bg-panel); }
.label-browser-step-head { display: flex; align-items: baseline; gap: 10px; }
.label-browser-step-head span { color: var(--accent-text); font-size: var(--fs-caption); font-weight: 800; letter-spacing: .08em; }
.label-browser-step-head h2 { margin: 0; font-size: var(--fs-h3); }
.label-browser-folder-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.label-browser-location { display: grid; gap: 2px; min-width: 0; }
.label-browser-location small { color: var(--text-muted); font-size: var(--fs-caption); }
.label-browser-location strong { overflow-wrap: anywhere; }
.label-browser-count { flex: 0 0 auto; color: var(--text-muted); font-size: var(--fs-caption); }
.label-browser-toolbar { display: flex; gap: 8px; }
.label-browser-search { flex: 1 1 auto; min-width: 0; min-height: 40px; border: 1px solid var(--border-mid); border-radius: var(--workspace-control-radius); background: var(--bg-control); padding: 6px 10px; color: var(--text-main); font: inherit; }
/* Стандарт хлебных крошек (09.09.2026): цепочка компактных кнопок-чипов в
   токенах кабинета; текущий уровень выделен как активная карточка-вкладка.
   Разметка: .ui-breadcrumbs > button.ui-breadcrumbs__item[.is-current],
   между ними span.ui-breadcrumbs__sep. */
.ui-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 2px; }
.ui-breadcrumbs > .ui-breadcrumbs__item,
.ui-breadcrumbs > button.ui-breadcrumbs__item { display: inline-flex; align-items: center; min-height: 28px; margin: 0; border: 1px solid var(--border-soft); border-radius: var(--radius-pill); background: var(--bg-control); padding: 3px 10px; color: var(--text-soft); font: inherit; font-size: var(--fs-caption); font-weight: 600; line-height: 1.2; cursor: pointer; }
.ui-breadcrumbs > button.ui-breadcrumbs__item:hover { border-color: var(--border-mid); background: var(--bg-control-hover); color: var(--text-main); }
.ui-breadcrumbs > button.ui-breadcrumbs__item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ui-breadcrumbs > .ui-breadcrumbs__item.is-current,
.ui-breadcrumbs > button.ui-breadcrumbs__item.is-current { border-color: var(--accent-border); background: var(--accent-soft); color: var(--text-main); font-weight: 700; cursor: default; }
.ui-breadcrumbs__sep { padding: 0 2px; color: var(--text-muted); font-size: var(--fs-caption); }
.label-browser-breadcrumbs { font-size: var(--fs-caption); }
.label-browser-entries { display: grid; gap: 4px; max-height: 420px; overflow-y: auto; }
.label-browser-entry { display: flex; align-items: center; gap: 10px; width: 100%; border: 1px solid transparent; border-radius: var(--workspace-control-radius); background: var(--bg-control); padding: 9px 10px; color: var(--text-main); font: inherit; text-align: left; cursor: pointer; }
.label-browser-entry:hover { background: var(--bg-control-hover); }
.label-browser-entry.is-selected { border-color: var(--accent-border); background: var(--accent-soft); }
.label-browser-entry .ico { flex: 0 0 auto; }
.label-browser-entry-name { min-width: 0; overflow-wrap: anywhere; }
.label-browser-empty { padding: 14px; color: var(--text-muted); text-align: center; font-size: var(--fs-caption); }
.label-browser-field { display: grid; gap: 6px; }
.label-browser-field > span { color: var(--text-muted); font-size: var(--fs-caption); font-weight: 700; }
.label-browser-field input, .label-browser-select { min-height: 40px; border: 1px solid var(--border-mid); border-radius: var(--workspace-control-radius); background: var(--bg-control); padding: 6px 10px; color: var(--text-main); font: inherit; }
.label-browser-create { width: 100%; min-height: 44px; }
.label-browser-status { display: flex; align-items: center; gap: 8px; color: var(--text-soft); font-size: var(--fs-caption); }
.label-browser-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.label-browser-status.is-ready .label-browser-status-dot { background: var(--schedule-work-accent); }
.label-browser-status.is-working .label-browser-status-dot { background: var(--warn); }
.label-browser-status.is-error { color: var(--schedule-noshow-accent); }
.label-browser-status.is-error .label-browser-status-dot { background: var(--schedule-noshow-accent); }
.label-browser-stage { display: grid; gap: 12px; min-width: 0; }
.label-browser-stage-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border: 1px solid var(--border-soft); border-radius: var(--workspace-panel-radius); background: var(--bg-panel); }
.label-browser-zoom { display: flex; align-items: center; gap: 6px; }
.label-browser-tool { min-width: 36px; padding-inline: 8px; }
.label-browser-zoom-value { min-width: 48px; text-align: center; font-variant-numeric: tabular-nums; }
.label-browser-viewport { position: relative; min-height: 420px; height: min(70vh, 720px); overflow: hidden; border: 1px solid var(--border-soft); border-radius: var(--workspace-panel-radius); background: var(--bg-panel-soft); cursor: grab; touch-action: none; }
.label-browser-viewport:active { cursor: grabbing; }
.label-browser-image { position: absolute; top: 50%; left: 50%; margin: 0; transform-origin: 0 0; translate: -50% -50%; max-width: none; user-select: none; }
.label-browser-preview-empty { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; padding: 24px; text-align: center; color: var(--text-muted); }
.label-browser-preview-empty h3 { margin: 0; color: var(--text-main); font-size: var(--fs-h3); }
.label-browser-preview-empty p { margin: 0; max-width: 360px; }
.label-browser-help { margin: 0; color: var(--text-muted); font-size: var(--fs-caption); }
.label-browser-result { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--border-soft); border-radius: var(--workspace-panel-radius); background: var(--bg-panel); }
.label-browser-warning { padding: 10px 12px; border: 1px solid var(--schedule-noshow-border); border-radius: var(--workspace-control-radius); background: var(--schedule-noshow-bg); color: var(--schedule-noshow-accent); font-size: var(--fs-caption); }
.label-browser-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 0; }
.label-browser-details dt { color: var(--text-muted); font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase; }
.label-browser-details dd { margin: 3px 0 0; overflow-wrap: anywhere; }
.label-browser-download { justify-self: start; }
@media (max-width: 900px) {
  .label-browser { grid-template-columns: 1fr; }
  .label-browser-viewport { min-height: 320px; height: 60vh; }
  .label-browser-entries { max-height: 300px; }
}
/* Сетка таблицы «Все задачи» в Типографии: узкий №, широкая позиция, читаемость. */
.label-print-app .label-print-task-table {
  table-layout: fixed;
  width: 100%;
}
.label-print-app .label-print-task-table :is(th, td) {
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}
/* Ширины заданы по СМЫСЛУ колонки, а не по её номеру. Раньше здесь стояли
   nth-child, и они разъехались: на отдельной странице Типографии колонок
   восемь (первая — «№»), а в кабинете руководителя семь, без «№». В итоге
   ширина 5% доставалась «Позиции», а 26% — колонке «Нужно». При table-layout:
   fixed ширину задаёт первая строка, поэтому data-col нужен именно на th. */
.label-print-app .label-print-task-table th[data-col="num"] { width: 4%; }
.label-print-app .label-print-task-table th[data-col="position"] { width: 30%; }
.label-print-app .label-print-task-table th[data-col="need"],
.label-print-app .label-print-task-table th[data-col="done"],
.label-print-app .label-print-task-table th[data-col="left"] { width: 8%; }
.label-print-app .label-print-task-table th[data-col="priority"] { width: 11%; }
.label-print-app .label-print-task-table th[data-col="status"] { width: 17%; }
.label-print-app .label-print-task-table th[data-col="action"] { width: 12%; }

/* Название позиции и статус переносятся, а не обрезаются многоточием:
   подпись под названием («Производство») читается целиком. */
.label-print-app .label-print-task-table :is(th, td):nth-child(2),
.label-print-app .label-print-task-table td[data-label="Позиция"],
.label-print-app .label-print-task-table td[data-label="Статус"] {
  white-space: normal;
  overflow-wrap: anywhere;
}

.label-print-app .label-print-task-table :is(th, td):is(
  [data-col="need"], [data-col="done"], [data-col="left"]
) { text-align: center; }

.label-print-app .label-print-task-table td.label-print-number { text-align: center; }

.label-print-etiketka-download {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.gas-mode-dept_head .label-print-table-wrap {
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--border, #45423f);
  border-radius: var(--workspace-panel-radius);
}

.gas-mode-dept_head .label-print-table:not(.dept-head-recipe-table):not(.label-print-task-table):not(.articles__table--list):not(.artc-materials) {
  width: 100%;
  min-width: 1050px;
  border-collapse: collapse;
}

.gas-mode-dept_head .label-print-table:not(.dept-head-recipe-table) td {
  padding: 10px;
  border-bottom: 1px solid var(--border, #393735);
  text-align: left;
  vertical-align: middle;
}

.gas-mode-dept_head .label-print-table:not(.dept-head-recipe-table) th {
  padding: 10px;
  border-bottom: 1px solid var(--border, #393735);
  color: var(--muted, #aaa6a0);
  font-size: var(--fs-caption);
  text-align: left;
  text-transform: uppercase;
  vertical-align: middle;
}

.gas-mode-dept_head .label-print-table:not(.dept-head-recipe-table) td small {
  display: block;
  max-width: 320px;
  margin-top: 4px;
  color: var(--muted, #aaa6a0);
}

.gas-mode-dept_head .dept-head-recipe-table-wrap {
  overflow-x: auto;
}

.gas-mode-dept_head .dept-head-recipe-source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 8px;
  padding: 8px 12px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  border: 1px dashed var(--border-soft);
  border-radius: var(--workspace-control-radius);
}

.gas-mode-dept_head .dept-head-recipe-source.is-techcard {
  color: #d8e5ff;
  border-style: solid;
  border-color: rgba(91, 151, 255, 0.42);
  background: rgba(79, 140, 255, 0.10);
}

.gas-mode-dept_head .dept-head-recipe-source .ui-button {
  flex: none;
}

.gas-mode-dept_head .dept-head-recipe-picker .ui-field > span {
  margin-bottom: 3px;
  font-size: var(--fs-caption);
}

.gas-mode-dept_head .dept-head-recipe-picker .ui-combobox__input {
  min-height: var(--workspace-control-height);
}

.gas-mode-dept_head .dept-head-recipe-actions .ui-button {
  min-height: 34px;
  padding: 6px 10px;
}

.gas-mode-dept_head .label-print-task-table {
  /* Колонки заданы процентами, поэтому таблица помещается в контейнер и
     колонка «Изменить» больше не уезжает за правый край. Жёсткие 1050px
     остались только у остальных таблиц кабинета. */
  width: 100%;
  min-width: 720px;
  table-layout: fixed;
}

.gas-mode-dept_head .label-print-task-table th,
.gas-mode-dept_head .label-print-task-table td {
  padding: 5px 7px;
  font-size: var(--fs-caption);
  line-height: 1.15;
}

.gas-mode-dept_head .label-print-task-table thead th {
  padding-top: 6px;
  padding-bottom: 6px;
  overflow-wrap: normal;
  line-height: 1.15;
  white-space: normal;
}

/* Ширины по СМЫСЛУ колонки, а не по её номеру. Здесь стояли nth-child в
   расчёте на восемь колонок отдельной страницы Типографии, где первая — «№».
   В кабинете руководителя колонок семь, «№» нет, и вся раскладка сдвигалась
   на одну: «Позиция» получала 4%, а «Нужно» — 35%. */
.gas-mode-dept_head .label-print-task-table thead th[data-col="need"],
.gas-mode-dept_head .label-print-task-table thead th[data-col="done"],
.gas-mode-dept_head .label-print-task-table thead th[data-col="left"],
.gas-mode-dept_head .label-print-task-table thead th[data-col="priority"] {
  text-align: center;
}

.gas-mode-dept_head .label-print-task-table th[data-col="num"] { width: 4%; white-space: nowrap; }
.gas-mode-dept_head .label-print-task-table th[data-col="position"] { width: 32%; }
.gas-mode-dept_head .label-print-task-table th[data-col="need"],
.gas-mode-dept_head .label-print-task-table th[data-col="done"],
.gas-mode-dept_head .label-print-task-table th[data-col="left"] { width: 9%; }
.gas-mode-dept_head .label-print-task-table th[data-col="priority"] { width: 12%; }
.gas-mode-dept_head .label-print-task-table th[data-col="status"] { width: 18%; }
.gas-mode-dept_head .label-print-task-table th[data-col="action"] { width: 13%; }

/* Название и статус переносятся, числа выравниваются по центру. Подпись под
   названием («Производство») должна читаться целиком, а не обрезаться. */
.gas-mode-dept_head .label-print-task-table td[data-label="Позиция"],
.gas-mode-dept_head .label-print-task-table td[data-label="Статус"] {
  white-space: normal;
  overflow-wrap: anywhere;
}

.gas-mode-dept_head .label-print-task-table td.label-print-number {
  text-align: center;
  white-space: nowrap;
}

.gas-mode-dept_head .label-print-task-table :is(th, td):is([data-col="left"], [data-col="priority"]),
.gas-mode-dept_head .label-print-task-table td[data-label="Осталось"] {
  padding-right: 5px;
  padding-left: 5px;
}

/* Третий набор ширин — для режима только чтения. Он тоже был позиционным и
   тоже рассчитан на восемь колонок, а за счёт лишнего класса перебивал
   остальные. Ключи теперь смысловые, набор колонок роли не играет. */
.gas-mode-dept_head .label-print-task-table.is-readonly th[data-col="num"] { width: 4%; white-space: nowrap; }
.gas-mode-dept_head .label-print-task-table.is-readonly th[data-col="position"] { width: 32%; }
.gas-mode-dept_head .label-print-task-table.is-readonly th[data-col="need"],
.gas-mode-dept_head .label-print-task-table.is-readonly th[data-col="done"],
.gas-mode-dept_head .label-print-task-table.is-readonly th[data-col="left"] { width: 9%; text-align: center; }
.gas-mode-dept_head .label-print-task-table.is-readonly th[data-col="priority"] { width: 12%; text-align: center; }
.gas-mode-dept_head .label-print-task-table.is-readonly th[data-col="status"] { width: 18%; }
.gas-mode-dept_head .label-print-task-table.is-readonly th[data-col="action"] { width: 13%; }

.gas-mode-dept_head .label-print-task-table td small {
  /* Раньше подпись резалась в одну строку: «Производство» превращалось в
     «Прои…». Колонка теперь достаточной ширины, перенос уместнее обрезки. */
  white-space: normal;
  overflow-wrap: anywhere;
  margin-top: 2px;
  font-size: var(--fs-caption);
  line-height: 1.1;
}

.gas-mode-dept_head .label-print-task-table tbody tr + tr td {
  border-top: 1px solid rgba(255, 255, 255, 0.24) !important;
}

.gas-mode-dept_head .label-print-task-table th + th,
.gas-mode-dept_head .label-print-task-table td + td {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.gas-mode-dept_head .label-print-edit-row {
  cursor: pointer;
  transition: background-color 140ms ease, box-shadow 140ms ease;
}

.gas-mode-dept_head .label-print-edit-row:hover {
  background: rgba(79, 140, 255, 0.08);
}

.gas-mode-dept_head .label-print-edit-row:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(91, 151, 255, 0.72);
}

.gas-mode-dept_head .label-print-task-table .label-print-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  width: 100%;
}

.gas-mode-dept_head .label-print-task-table .btn-sm {
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  font-size: var(--fs-caption);
}

.gas-mode-dept_head .label-print-status {
  display: block;
  line-height: 1.25;
}

.gas-mode-dept_head .label-print-status-chip {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--label-status-text, #c8c3bd);
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
  white-space: normal;
}

.gas-mode-dept_head .label-print-status-cell {
  --label-status-color: #68635d;
  --label-status-text: #c8c3bd;
  background: color-mix(in srgb, var(--label-status-color) 18%, transparent);
}

.gas-mode-dept_head .label-print-status-chip.is-pending,
.gas-mode-dept_head .label-print-status-cell.is-pending {
  --label-status-color: #6b83b8;
  --label-status-text: var(--status-pending-text);
}

.gas-mode-dept_head .label-print-status-chip.is-working,
.gas-mode-dept_head .label-print-status-cell.is-working {
  --label-status-color: #ca7b47;
  --label-status-text: var(--status-working-text);
}

.gas-mode-dept_head .label-print-status-chip.is-partial,
.gas-mode-dept_head .label-print-status-cell.is-partial {
  --label-status-color: #c0a34a;
  --label-status-text: var(--status-partial-text);
}

.gas-mode-dept_head .label-print-status-chip.is-done,
.gas-mode-dept_head .label-print-status-cell.is-done {
  --label-status-color: #4f9a67;
  --label-status-text: var(--status-done-text);
}

.gas-mode-dept_head .label-print-status-cell .label-print-status-chip {
  color: var(--label-status-text);
}

.gas-mode-dept_head .label-print-action-empty {
  display: block;
  color: var(--muted, #aaa6a0);
  text-align: center;
}

.gas-mode-dept_head .label-print-name {
  display: inline;
  color: var(--text-main, #f2f0ed);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: inherit;
}

.gas-mode-dept_head .label-print-number {
  text-align: center !important;
  font-variant-numeric: tabular-nums;
}

.gas-mode-dept_head .label-print-priority {
  --label-priority-color: #68635d;
  display: inline-flex;
  padding: 4px 7px;
  border: 1px solid var(--label-priority-color);
  border-radius: 999px;
  background: color-mix(in srgb, var(--label-priority-color) 18%, transparent);
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1.2;
}

.gas-mode-dept_head .label-print-priority.is-p1 { --label-priority-color: #c84f4f; color: var(--status-p1-text); }
.gas-mode-dept_head .label-print-priority.is-p2 { --label-priority-color: #c97842; color: var(--status-p2-text); }
.gas-mode-dept_head .label-print-priority.is-p3 { --label-priority-color: #c1a44f; color: var(--status-p3-text); }
.gas-mode-dept_head .label-print-priority.is-p4 { --label-priority-color: #5b83b8; color: var(--status-p4-text); }
.gas-mode-dept_head .label-print-priority.is-p5 { --label-priority-color: #68635d; color: var(--status-p5-text); }

.gas-mode-dept_head .label-print-priority-cell {
  --label-priority-color: #68635d;
  --label-priority-text: #c8c3bd;
  background: color-mix(in srgb, var(--label-priority-color) 18%, transparent);
}

.gas-mode-dept_head .label-print-priority-cell.is-p1 {
  --label-priority-color: #c84f4f;
  --label-priority-text: var(--status-p1-text);
}

.gas-mode-dept_head .label-print-priority-cell.is-p2 {
  --label-priority-color: #c97842;
  --label-priority-text: var(--status-p2-text);
}

.gas-mode-dept_head .label-print-priority-cell.is-p3 {
  --label-priority-color: #c1a44f;
  --label-priority-text: var(--status-p3-text);
}

.gas-mode-dept_head .label-print-priority-cell.is-p4 {
  --label-priority-color: #5b83b8;
  --label-priority-text: var(--status-p4-text);
}

.gas-mode-dept_head .label-print-priority-cell .label-print-priority {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--label-priority-text);
}

.gas-mode-dept_head .label-print-modal-card {
  width: min(620px, calc(100vw - 24px));
}

.gas-mode-dept_head .label-print-employee-modal-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 16px;
  overflow-x: hidden;
}

.gas-mode-dept_head .label-print-employee-modal-card > * {
  min-width: 0;
}

.gas-mode-dept_head .label-print-employee-modal-card > [hidden] {
  display: none;
}

.gas-mode-dept_head .label-print-employee-modal-card > .label-print-form {
  width: 100%;
  margin-top: 0;
}

.gas-mode-dept_head .label-print-employee-access {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.gas-mode-dept_head .label-print-employee-access-copy {
  min-width: 0;
}

.gas-mode-dept_head .label-print-employee-access-copy > span {
  overflow-wrap: anywhere;
}

.gas-mode-dept_head :is(.label-print-employee-access-actions, .label-print-employee-result-actions, .label-print-employee-footer-actions) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  gap: 8px;
  justify-content: end;
  margin: 0;
}

.gas-mode-dept_head .label-print-employee-result-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: stretch;
}

.gas-mode-dept_head .label-print-employee-footer-actions {
  grid-template-columns: repeat(3, minmax(0, auto));
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}

.gas-mode-dept_head :is(.label-print-employee-access-actions, .label-print-employee-result-actions, .label-print-employee-footer-actions) > button {
  width: auto;
  min-width: 0;
  margin: 0;
}

@media (max-width: 560px) {
  .gas-mode-dept_head .label-print-employee-modal-card {
    gap: 12px;
    padding: 16px;
  }

  .gas-mode-dept_head :is(.label-print-employee-access, .label-print-employee-access-actions, .label-print-employee-result-actions, .label-print-employee-footer-actions) {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    justify-content: stretch;
  }

  .gas-mode-dept_head :is(.label-print-employee-access-actions, .label-print-employee-result-actions, .label-print-employee-footer-actions) > button {
    width: 100%;
  }
}

.gas-mode-dept_head .label-print-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.gas-mode-dept_head .label-print-form label {
  display: grid;
  gap: 6px;
}

/* Подписи полей формы Типографии: один шрифт и вес, без капса (09.09.2026). */
.gas-mode-dept_head .label-print-form label > span {
  color: var(--muted, #aaa6a0);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.gas-mode-dept_head .label-print-form-wide {
  grid-column: 1 / -1;
}

/* Кнопка календаря в одну строку с полем даты, а не под ним (09.09.2026). */
.gas-mode-dept_head .label-print-form label:has(> .date-picker-btn) {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
}

.gas-mode-dept_head .label-print-form label:has(> .date-picker-btn) > span {
  grid-column: 1 / -1;
}

.gas-mode-dept_head .label-print-form label > .date-picker-btn {
  width: auto;
  min-height: 0;
  padding: 0 12px;
}

.label-print-view span:not(.ico):empty {
  display: none;
}

.label-print-view span:not(:empty) {
  float: right;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #9d4c4c;
  color: #fff;
  text-align: center;
}

.label-print-session .is-active {
  border-color: #c9a34e;
  color: #f0cf79;
}

.label-print-break-status {
  min-height: 18px;
  color: var(--text-soft, #aaa6a0);
  font-size: var(--fs-caption);
}

.label-print-break-status.is-active {
  border: 0;
  color: #f0cf79;
}

.label-print-break-status.is-error {
  color: #ff9d9d;
}

/* Переключатель «Этикетка определённой даты» в окнах создания задачи печати
   (08.09.2026): подпись слева, две кнопки-карточки, по умолчанию «Нет». */
/* Компактно (08.09.2026): подпись и кнопки в одну строку, активное «Да» —
   жёлтое (как пометка даты на карточке), активное «Нет» — приглушённо-зелёное. */
/* 09.09.2026: блок оформлен как обычное поле формы — подпись сверху, кнопки
   во всю ширину; без собственной рамки (рамка есть у группы кнопок), не
   растягивается по высоте строки сетки, когда рядом появляется поле даты. */
.fixed-date-toggle {
  display: grid;
  gap: 6px;
  align-self: start;
  padding: 0;
  border: 0;
  background: none;
}

.fixed-date-toggle__label {
  color: var(--muted, #aaa6a0);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.fixed-date-toggle__buttons {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 3px;
  width: 100%;
}

.fixed-date-toggle__buttons .tab-btn {
  flex: 1 1 0;
  justify-content: center;
  min-height: 34px;
  padding: 3px 14px;
  font-size: var(--fs-caption);
  font-weight: 600;
  text-align: center;
}

.fixed-date-toggle__buttons .tab-btn[data-value="no"].active {
  color: #d9f3df;
  background: linear-gradient(180deg, rgba(76, 160, 104, 0.32), rgba(76, 160, 104, 0.14));
  border-color: rgba(96, 190, 128, 0.7);
}

.fixed-date-toggle__buttons .tab-btn[data-value="yes"].active {
  color: #fff1c8;
  background: linear-gradient(180deg, rgba(222, 170, 60, 0.36), rgba(222, 170, 60, 0.16));
  border-color: rgba(222, 170, 60, 0.8);
}

:root[data-theme="light"] .fixed-date-toggle__buttons .tab-btn[data-value="no"].active {
  color: #1f5a30;
  background: #dff3e4;
  border-color: #6fbf8a;
}

:root[data-theme="light"] .fixed-date-toggle__buttons .tab-btn[data-value="yes"].active {
  color: #6d4d00;
  background: #fff1c2;
  border-color: #d9a441;
}

.label-print-etiketka-date-hint {
  display: block;
  margin-top: 4px;
  color: var(--text-muted, #8a867e);
  font-size: var(--fs-caption);
}

.label-print-etiketka-date-hint.is-fixed {
  color: #e6b94f;
}

/* Вкладка «Изменения» (08.09.2026, решение пользователя): карточки одной
   высоты в ряду — кнопка прижата к низу; строки полей компактные: подпись
   слева, «было → стало» в одну строку без подписей «Было/Стало». */
.label-print-change-list {
  display: grid;
  /* Карточка фиксированной ширины (08.09.2026): одна карточка не растягивается на весь ряд. */
  grid-template-columns: repeat(auto-fill, minmax(280px, 340px));
  gap: 8px;
  align-items: stretch;
}

.label-print-change-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border-mid);
  border-radius: var(--workspace-panel-radius);
  background: var(--bg-panel-soft);
}

.label-print-change-card > .btn-sm {
  margin-top: auto;
  align-self: stretch;
  justify-content: center;
}

.label-print-change-card > header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.label-print-change-card > header > span {
  margin: 0;
  color: #8fbcf4;
  font-size: var(--fs-caption);
  font-weight: 700;
}

.label-print-change-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 6px 8px;
  border-radius: var(--workspace-control-radius);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-soft);
  font-size: var(--fs-caption);
}

.label-print-change-meta span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.label-print-change-meta small {
  display: block;
  margin-bottom: 1px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  text-transform: uppercase;
}

.label-print-change-card ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.label-print-change-card li {
  display: grid;
  grid-template-columns: minmax(84px, 118px) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 5px 8px;
  border: 1px solid var(--border-mid);
  border-radius: var(--workspace-control-radius);
  background: rgba(0, 0, 0, 0.12);
}

.label-print-change-field {
  color: var(--text-soft);
  font-size: var(--fs-caption);
  font-weight: 700;
  text-transform: uppercase;
}

.label-print-change-values {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
}

.label-print-change-values > div {
  display: block;
  min-width: 0;
}

.label-print-change-values > div.is-after {
  text-align: right;
}

.label-print-change-values small {
  display: none;
}

.label-print-change-values b,
.label-print-change-values strong {
  overflow-wrap: anywhere;
  font-size: var(--fs-caption);
}

.label-print-change-values > i {
  justify-self: center;
  color: #7eabdf;
  font-size: var(--fs-body);
  font-style: normal;
}

.label-print-change-card li.is-priority {
  border-color: rgba(126, 171, 223, 0.45);
  background: rgba(72, 116, 168, 0.1);
}

.label-print-change-card li.is-priority .label-print-priority {
  box-sizing: border-box;
  min-width: 72px;
  justify-content: center;
}

.label-print-manager {
  display: grid;
  gap: 18px;
}

.label-print-manager h2 {
  margin: 0;
  font-size: var(--fs-h3);
}

.label-print-manager-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.label-print-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
}

.label-print-kpi-card {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border-mid);
  border-top: 3px solid #5d84b5;
  border-radius: var(--workspace-panel-radius);
  background: var(--bg-panel-soft);
}

.label-print-kpi-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.label-print-kpi-card > header > div {
  display: grid;
  gap: 3px;
}

.label-print-kpi-card > header span {
  color: #8fbcf4;
  font-size: var(--fs-caption);
  font-weight: 700;
  text-transform: uppercase;
}

.label-print-kpi-card > header small {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-soft);
  font-size: var(--fs-caption);
}

.label-print-kpi-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.label-print-kpi-metrics > span {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border-radius: var(--workspace-control-radius);
  background: rgba(255, 255, 255, 0.04);
}

.label-print-kpi-metrics small {
  color: var(--text-muted);
  font-size: var(--fs-caption);
  text-transform: uppercase;
}

.label-print-kpi-metrics strong {
  font-size: var(--fs-h2);
  font-variant-numeric: tabular-nums;
}

.label-print-kpi-sla {
  display: grid;
  gap: 6px;
}

.label-print-kpi-sla > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-soft);
  font-size: var(--fs-caption);
}

.label-print-kpi-sla > small {
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.label-print-kpi-progress {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.label-print-kpi-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #63b77c;
}

.label-print-costing {
  display: grid;
  gap: 10px;
}

.label-print-cost-sync {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--cost-sync-color, var(--border-mid));
  border-radius: var(--workspace-control-radius);
  background: color-mix(in srgb, var(--cost-sync-color, #777) 8%, transparent);
}

.label-print-cost-sync > div {
  display: grid;
  gap: 3px;
}

.label-print-cost-sync > div > span {
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.label-print-cost-sync.is-ready { --cost-sync-color: #63b77c; }
.label-print-cost-sync.is-error { --cost-sync-color: #c84f4f; }
.label-print-cost-sync.is-offline { --cost-sync-color: #8b929d; }

.gas-mode-dept_head .label-print-cost-table-wrap {
  max-height: 540px;
  overflow-x: hidden;
}

.gas-mode-dept_head .label-print-cost-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.gas-mode-dept_head .label-print-cost-table th:first-child { width: 72%; }
.gas-mode-dept_head .label-print-cost-table th:last-child {
  width: 28%;
  text-align: right;
}

.gas-mode-dept_head .label-print-cost-table td:last-child {
  text-align: right;
}

.gas-mode-dept_head .label-print-cost-table thead th {
  position: sticky;
  z-index: 1;
  top: 0;
  background: var(--bg-panel, #1d1c1b);
}

.gas-mode-dept_head .label-print-cost-table td:first-child {
  overflow-wrap: anywhere;
  word-break: normal;
}

.label-print-cost-input {
  box-sizing: border-box;
  width: min(160px, 100%);
  min-height: 32px;
  padding: 6px 8px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.label-print-cost-input.is-saved {
  border-color: #63b77c;
  background: rgba(99, 183, 124, 0.12);
}

.label-print-cost-note {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.label-print-employee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.label-print-employee-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.label-print-employee-toolbar > .employee-inactive-filter {
  margin-left: auto;
}

.label-print-employee-active {
  grid-column: 1 / -1;
  justify-self: start;
}

.label-print-employee-card.is-inactive {
  opacity: 0.68;
  border-style: dashed;
}

.label-print-employee-toolbar > span {
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.label-print-employee-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border-mid);
  border-radius: var(--workspace-panel-radius);
  background: var(--bg-panel-soft);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.label-print-employee-card:hover,
.label-print-employee-card:focus-visible {
  border-color: #5d84b5;
  background: rgba(73, 111, 156, 0.12);
  outline: none;
  transform: translateY(-1px);
}

.label-print-employee-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.label-print-employee-card > header > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.label-print-employee-card > header > div > small {
  color: #8fbcf4;
  font-size: var(--fs-caption);
  font-weight: 700;
  text-transform: uppercase;
}

.label-print-employee-card > header > span {
  padding: 3px 7px;
  border: 1px solid var(--employee-state-color, #68635d);
  border-radius: 999px;
  color: var(--employee-state-color, #c8c3bd);
  font-size: var(--fs-caption);
}

.label-print-employee-card > header > span.is-active { --employee-state-color: #63b77c; }
.label-print-employee-card > header > span.is-break { --employee-state-color: #d6a658; }
.label-print-employee-card > header > span.is-idle { --employee-state-color: #8b929d; }

.label-print-employee-card > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.label-print-employee-card > div > span {
  display: grid;
  gap: 4px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.label-print-employee-card > div strong {
  color: var(--text-main);
  font-size: var(--fs-h3);
  font-variant-numeric: tabular-nums;
}

.label-print-employee-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.label-print-employee-card > footer > small {
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.label-print-employee-card > footer > span {
  color: #8fbcf4;
  font-size: var(--fs-caption);
  font-weight: 700;
}

@media (max-width: 768px) {
  .label-print-app .label-print-workspace-grid {
    display: block;
  }

  .label-print-app .label-print-panel > * {
    min-width: 0;
    max-width: 100%;
  }

  .label-print-app .label-print-priority-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .label-print-app .label-print-priority-filter {
    min-width: 0;
  }

  .label-print-app .label-print-board {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
  }

  .gas-mode-dept_head .label-print-stock-toolbar {
    grid-template-columns: 1fr;
  }

  .gas-mode-dept_head .label-print-stock-legend {
    justify-content: flex-start;
    margin-left: 0;
  }

  .gas-mode-dept_head .dept-head-recipe-head,
  .gas-mode-dept_head .dept-head-recipe-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .gas-mode-dept_head .dept-head-recipe-picker {
    grid-template-columns: 1fr;
  }

  .gas-mode-dept_head .dept-head-recipe-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gas-mode-dept_head .label-print-head,
  .gas-mode-dept_head .label-print-head-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .gas-mode-dept_head .label-print-toolbar,
  .gas-mode-dept_head .label-print-summary,
  .gas-mode-dept_head .label-print-form {
    grid-template-columns: 1fr;
  }

  .gas-mode-dept_head .label-print-form-wide {
    grid-column: auto;
  }

  .label-print-session > span {
    display: none;
  }

  .label-print-session > .label-print-break-status:not(:empty) {
    display: inline-flex;
    align-items: center;
  }

  .label-print-session {
    gap: 5px;
  }

  .label-print-session .ui-button {
    min-height: 36px;
    padding-inline: 9px;
  }

  .label-print-manager-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gas-mode-dept_head .label-print-cost-table th,
  .gas-mode-dept_head .label-print-cost-table td {
    padding: 8px;
  }

  .gas-mode-dept_head .label-print-cost-table th:first-child {
    width: 64%;
  }

  .gas-mode-dept_head .label-print-cost-table th:last-child {
    width: 36%;
  }

  .label-print-cost-sync {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .gas-mode-dept_head .dh-data-switch {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schedule-filter-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .schedule-month-field,
  .schedule-edit-btn {
    grid-column: auto;
  }

  .schedule-editor-head {
    gap: 8px;
  }

  .schedule-clear-btn {
    min-height: 34px;
    padding: 6px 9px;
    font-size: var(--fs-caption);
  }

  #admScheduleEditorPanel {
    flex-wrap: wrap;
  }

  .plan-action-footer {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 10px;
  }

  .plan-action-actions {
    display: grid;
  }

  .plan-action-actions .btn-primary {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 430px) {
  body {
    font-size: var(--fs-body-lg);
  }

  .card,
  .employee-mobile-card,
  .auth-gateway-card {
    padding-left: 12px;
    padding-right: 12px;
  }

  .gas-mode-dept_head .tab-panel[data-tab="warehouse"],
  .gas-mode-dept_head .warehouse-bulk-bar {
    min-width: 0;
    width: 100%;
  }

  .gas-mode-dept_head .warehouse-grid {
    min-width: 0;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  .gas-mode-employee .period-banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    width: 100%;
    gap: 4px;
  }

  .gas-mode-employee .period-banner-label {
    margin: 0;
    color: var(--text-muted-control);
  }

  .gas-mode-employee .period-banner-value,
  .period-chip {
    min-width: 0;
    width: 100%;
    overflow-wrap: anywhere;
  }
}

/* Admin period filter: keep each date and its calendar trigger as one control. */
#admNavBar,
.admin-period-filter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding: 12px;
}

#admNavBar .nav-date-input,
.admin-period-filter .nav-date-input {
  min-width: 0;
}

#admNavBar .date-picker-btn,
.admin-period-filter .date-picker-btn {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  justify-content: center;
}

.date-picker-popover {
  position: fixed;
  z-index: 10020;
  width: min(292px, calc(100vw - 16px));
  padding: 12px;
  color: var(--text-main);
  background: var(--bg-panel);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel);
}

.date-picker-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 10px;
}

.date-picker-title {
  min-width: 0;
  overflow: hidden;
  font-size: var(--fs-body-lg);
  font-weight: 650;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.date-picker-nav {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  align-content: center;
  justify-content: center;
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  gap: 0;
  color: var(--text-soft);
  background: var(--bg-control);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-size: var(--fs-title);
  line-height: 1;
  text-align: center;
}

.date-picker-nav:hover {
  color: var(--text-main);
  background: var(--bg-control-hover);
  border-color: var(--border-mid);
}

.date-picker-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.date-picker-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 4px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 620;
  text-align: center;
}

.date-picker-weekdays > span {
  display: grid;
  min-width: 0;
  min-height: 24px;
  place-items: center;
  line-height: 1;
}

.date-picker-day {
  display: inline-grid;
  place-items: center;
  align-content: center;
  justify-content: center;
  min-width: 0;
  min-height: 32px;
  padding: 0;
  gap: 0;
  color: var(--text-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--workspace-control-radius);
  font-size: var(--fs-caption);
  font-weight: 560;
  line-height: 1;
  text-align: center;
}

.date-picker-day:hover {
  color: var(--text-main);
  background: var(--bg-control-hover);
  border-color: var(--border-mid);
}

.date-picker-day.muted {
  color: var(--text-faint);
}

.date-picker-day.selected {
  color: var(--text-main);
  background: var(--btn-blue-soft);
  border-color: var(--btn-blue);
  box-shadow: inset 3px 0 0 var(--btn-blue);
}

.date-picker-btn:focus-visible,
.date-picker-nav:focus-visible,
.date-picker-day:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

#admNavBar #admLoadBtn,
.admin-period-filter > .nav-bar-btn {
  min-width: 116px;
  justify-content: center;
  white-space: nowrap;
}

@media (max-width: 768px) {
  #admNavBar,
  .admin-period-filter {
    grid-template-columns: 1fr;
    align-items: stretch;
  }


  #admNavBar #admLoadBtn,
  .admin-period-filter > .nav-bar-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

@media (max-width: 768px) {
  .admin-import-panel summary,
  .admin-import-panel-body,
  .employee-directory-head,
  .employee-directory-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-import-panel-body .secondary-action-link,
  .employee-directory-head .btn-primary {
    width: 100%;
  }

  .employee-directory-toolbar .search-input {
    flex-basis: auto;
  }

  .employee-create-fields {
    grid-template-columns: 1fr;
  }

  .employee-manage-modal-card {
    gap: 12px;
    padding: 16px;
  }

  .employee-manage-modal-card .employee-create-fields,
  .employee-manage-actions {
    grid-template-columns: 1fr;
  }

  .employee-manage-modal-card > .schedule-modal-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .employee-manage-modal-card > .schedule-modal-actions > * {
    width: 100%;
    min-width: 0;
  }
}

/* Production admin narrow-width guardrails verified down to 320 CSS px. */
@media (max-width: 1023px) {
  .gas-mode-admin #admEmployeeSearch.employee-directory-search,
  .gas-mode-admin .employee-directory-search #admEmployeeSearch,
  .gas-mode-admin #admEmployeeSearch {
    height: auto;
    min-height: 44px;
    padding-top: 9px;
    padding-bottom: 9px;
  }
}

@media (max-width: 768px) {
  .gas-mode-admin :is(
    .admin-data-workspace,
    #admNavBar.admin-data-filter
  ) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .gas-mode-admin :is(#admNavBar.admin-data-filter) {
    grid-template-columns: minmax(0, 1fr);
    padding: 8px;
  }

  .gas-mode-admin :is(#admNavBar.admin-data-filter) .nav-date-input {
    width: auto;
    max-width: 100%;
    min-width: 0;
  }

  .gas-mode-admin :is(#admNavBar.admin-data-filter) .date-picker-btn {
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    min-height: 44px;
  }
}

body :is(.card, .modal-content, .picker-modal-card, .employee-session-loader) {
  border-radius: var(--radius-lg) !important;
}

body :is(.tab-panel, .employee-box, .today-summary-box) {
  border-radius: var(--radius-md) !important;
}

body :is(button, input, select, textarea, .tab-btn, .entry-mode-btn, .today-tab, .picker-trigger, .nav-bar-btn) {
  border-radius: var(--radius-sm) !important;
}

body .app-header {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

@media (max-width: 768px) {
  .gas-mode-employee .employee-form-card,
  .gas-mode-employee .employee-stats-card {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .card.employee-mobile-card.employee-form-card {
    margin-top: 1.5rem !important;
  }

  #positionPickerModal {
    width: 100%;
    height: var(--app-height);
    padding: 0;
    place-items: stretch;
  }

  #positionPickerModal .picker-modal-backdrop {
    display: none;
  }

  #positionPickerModal .picker-sheet {
    width: 100%;
    height: 100%;
    max-height: none;
    display: flex;
    flex-direction: column;
    padding:
      max(14px, env(safe-area-inset-top))
      max(14px, env(safe-area-inset-right))
      max(14px, env(safe-area-inset-bottom))
      max(14px, env(safe-area-inset-left));
    overflow: hidden;
    border: 0;
    border-radius: 0;
  }

  #positionPickerModal .picker-sheet-header,
  #positionPickerModal .picker-sheet-help,
  #positionPickerModal .picker-search-wrap {
    flex: 0 0 auto;
  }

  #positionPickerModal .picker-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

@media (min-width: 769px) {
  .gas-mode-dept_head .warehouse-grid {
    gap: 7px;
  }

  .gas-mode-dept_head .warehouse-tile {
    gap: 4px;
    padding: 7px 8px;
    border-radius: var(--workspace-panel-radius);
  }

  .gas-mode-dept_head .warehouse-tile-header {
    gap: 6px;
  }

  .gas-mode-dept_head .warehouse-checkmark {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
  }

  .gas-mode-dept_head .warehouse-tile-qty {
    padding: 2px 5px;
    font-size: var(--fs-caption);
  }

  .gas-mode-dept_head .warehouse-tile-employee,
  .gas-mode-dept_head .warehouse-tile-meta {
    font-size: var(--fs-caption);
    line-height: 1.15;
  }

  .gas-mode-dept_head .warehouse-tile-position {
    min-height: 0;
    font-size: var(--fs-caption);
    line-height: 1.18;
  }

  .gas-mode-dept_head .warehouse-tile-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 8px;
  }

  .gas-mode-dept_head .warehouse-status-pending {
    padding: 2px 5px;
  }

  .gas-mode-dept_head .warehouse-tile > .warehouse-post-btn {
    min-height: 34px;
    margin-top: 1px;
    padding: 6px 10px;
    font-size: var(--fs-caption);
  }
}

@media (max-width: 768px) {
  .gas-mode-dept_head .warehouse-grid {
    gap: 7px;
  }

  .gas-mode-dept_head .warehouse-tile {
    gap: 4px;
    padding: 7px 8px;
    border-radius: var(--workspace-panel-radius);
  }

  .gas-mode-dept_head .warehouse-tile-header,
  .gas-mode-dept_head .warehouse-tile-meta {
    gap: 5px;
    flex-wrap: nowrap;
  }

  .gas-mode-dept_head .warehouse-tile-qty {
    padding: 2px 5px;
    font-size: var(--fs-caption);
  }

  .gas-mode-dept_head .warehouse-tile-employee {
    font-size: var(--fs-caption);
    line-height: 1.15;
  }

  .gas-mode-dept_head .warehouse-tile-position {
    min-height: 0;
    font-size: var(--fs-caption);
    line-height: 1.18;
  }

  .gas-mode-dept_head .warehouse-tile-meta {
    font-size: var(--fs-caption);
    line-height: 1.15;
  }

  .gas-mode-dept_head .warehouse-tile > .warehouse-post-btn {
    min-height: 34px;
    margin-top: 1px;
    padding: 6px 10px;
    font-size: var(--fs-caption);
  }
}

/* Department-head production plan uses the same two modes on desktop and mobile. */
.gas-mode-dept_head .production-plan-mobile-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  padding: 4px;
  margin-bottom: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-panel-radius);
  background: var(--surface-2);
}

.gas-mode-dept_head .production-plan-mobile-switch button {
  min-width: 0;
  min-height: 38px;
  padding: 6px 10px;
  border: 1px solid transparent;
  color: var(--text-muted);
  background: transparent;
  box-shadow: none;
  font-size: var(--fs-caption);
  line-height: 1.2;
}

.gas-mode-dept_head .production-plan-mobile-switch button.active {
  color: var(--text-main);
  border-color: rgba(91, 151, 255, 0.62);
  background: rgba(79, 140, 255, 0.18);
}

.gas-mode-dept_head .production-plan-mobile-switch button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.gas-mode-dept_head .production-plan-workspace {
  grid-template-columns: minmax(0, 1fr);
}

.gas-mode-dept_head .production-plan-create-mode {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  align-items: start;
  gap: 7px;
}

.production-plan-assignment {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-panel-radius);
  background: rgba(255, 255, 255, 0.018);
}

.production-plan-assignment-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.production-plan-assignment-head p {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.production-plan-assignment-count {
  flex: 0 0 auto;
  padding: 4px 7px;
  color: var(--text-soft);
  font-size: var(--fs-caption);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
}

.production-plan-assignment-list {
  display: grid;
  gap: 6px;
}

.production-plan-assignment-list .ui-empty-state {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px dashed var(--border-soft);
  border-radius: var(--workspace-panel-radius);
  line-height: 1.35;
}

.production-plan-assignment-list .ui-empty-state span {
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.production-plan-close-card {
  width: 100%;
  max-width: min(520px, 100%);
  display: grid;
  gap: 12px;
}

.production-plan-close-progress {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.production-plan-close-metric {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-control-radius);
  background: rgba(255, 255, 255, 0.025);
}

.production-plan-close-metric span {
  color: var(--text-muted);
  font-size: var(--fs-caption);
  text-transform: uppercase;
}

.production-plan-close-metric strong {
  font-size: var(--fs-body);
  font-variant-numeric: tabular-nums;
}

.production-plan-close-field {
  display: grid;
  gap: 5px;
  margin: 0;
}

.production-plan-close-field[hidden] {
  display: none;
}

.production-plan-close-hint {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

/* Карточка сама и есть кнопка назначения, поэтому здесь гасится базовое
   правило `button` (min-height 52px, padding 10/18, выключка по центру). */
.production-plan-assignment-row {
  min-width: 0;
  width: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px;
  color: var(--text-main);
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-panel-radius);
  background: var(--surface-3);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.production-plan-assignment-row:hover:not(:disabled) {
  border-color: rgba(115, 166, 255, 0.48);
}

/* Базовое правило гасит выключенную кнопку до opacity 0.58. Здесь это работало
   против задачи: карточка «в работе» — единственная, которую надо заметить. */
.production-plan-assignment-row:disabled {
  opacity: 1;
  cursor: default;
}


/* «В работе» раньше показывалось только приглушением всей карточки, то есть
   ровно наоборот: состояние, которое надо заметить, делалось менее заметным, а
   причину недоступности карточки взять было неоткуда. Теперь это полоса слева
   и подсветка фона, а словами — чип в теле карточки. Цвет взят тот же, каким
   статус «в работе» показан у сотрудника (.employee-plan-status.is-started),
   чтобы не заводить второй язык статусов. Цветовой код очереди (1 красный,
   2 оранжевый, 3 зелёный) остаётся за плиткой приоритета и не трогается. */
.production-plan-assignment-row.is-started {
  background:
    linear-gradient(90deg, rgba(143, 159, 120, 0.13), rgba(143, 159, 120, 0)) 0 0 / 160px 100% no-repeat,
    var(--surface-3);
  box-shadow: inset 3px 0 0 0 rgba(143, 159, 120, 0.62);
}

/* Запрос руководителя: «не назначен» должно бросаться в глаза в очереди назначения. */
.production-plan-assignment-row small.is-unassigned {
  color: var(--warn);
}

/* Задача, которую человек ведёт дальше после частичной сдачи, и задача без
   нормы времени: обе подписи — пояснение к строке, а не её заголовок. */
.production-plan-assignment-row small.production-plan-assignment-handovers {
  color: var(--text-muted);
}

.production-plan-assignment-row small.production-plan-assignment-no-time {
  color: var(--warn);
}

.production-plan-assignment-state {
  justify-self: end;
  align-self: center;
  padding: 2px 10px;
  white-space: nowrap;
  color: #dfe8d2;
  background: rgba(143, 159, 120, 0.16);
  border: 1px solid rgba(143, 159, 120, 0.24);
  border-radius: 999px;
  font-size: var(--fs-caption);
  font-weight: 650;
  line-height: 1.5;
}

.production-plan-assignment-priority {
  display: grid;
  justify-items: center;
  gap: 1px;
  min-height: 48px;
  align-content: center;
  color: var(--text-main);
  border-radius: var(--workspace-control-radius);
  background: rgba(255, 255, 255, 0.05);
}

.production-plan-assignment-priority span {
  font-size: var(--fs-caption);
  text-transform: uppercase;
}

.production-plan-assignment-priority strong {
  font-size: var(--fs-h2);
  line-height: 1;
}

.production-plan-assignment-priority.is-priority-high {
  background: rgba(196, 69, 69, 0.72);
}

.production-plan-assignment-priority.is-priority-medium {
  background: rgba(206, 105, 44, 0.72);
}

.production-plan-assignment-priority.is-priority-normal {
  background: rgba(47, 143, 105, 0.76);
}

.production-plan-assignment-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.production-plan-assignment-main strong {
  overflow-wrap: anywhere;
  font-size: var(--fs-caption);
}

.production-plan-assignment-main span,
.production-plan-assignment-main small {
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.production-plan-assignment-modal-card {
  width: min(430px, calc(100vw - 24px));
  display: grid;
  gap: 9px;
}

.production-plan-assignment-modal-field {
  display: grid;
  gap: 6px;
  margin: 3px 0 0;
}

.production-plan-assignment-modal-field > span {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.production-plan-assignment-modal-field select {
  width: 100%;
  min-height: 42px;
}

/* Типография внутри кабинета на телефоне: то же, что у отдельной страницы
   Типографии (.label-print-app) — фильтры приоритетов в две колонки и
   содержимое панели не шире её самой. Без этого четыре колонки по 120px
   выталкивали панель за экран. */
@media (max-width: 768px) {
  .gas-mode-dept_head .label-print-panel > * {
    min-width: 0;
    max-width: 100%;
  }

  .gas-mode-dept_head .label-print-priority-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .gas-mode-dept_head .label-print-priority-filter {
    min-width: 0;
  }
}

/* Футер окна добавления позиции на телефоне: поля во всю ширину, а кнопки
   стояли узкими справа — две равные колонки уравнивают пропорции. */
@media (max-width: 768px) {
  #dhPlanEditorModal .schedule-modal-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #dhPlanEditorModal .schedule-modal-actions > * {
    width: 100%;
    margin: 0;
  }
}

.production-plan-assignment-modal-card > .schedule-modal-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  justify-content: end;
  gap: 8px;
  margin-top: 3px;
}

.production-plan-assignment-modal-card > .schedule-modal-actions > button {
  width: auto;
  min-width: 86px;
  margin: 0;
}

.production-plan-schedule-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.production-plan-schedule-info {
  position: relative;
  z-index: 8;
}

.production-plan-schedule-info > summary {
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-soft);
  font-size: var(--fs-body);
  font-weight: 750;
  list-style: none;
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
}

.production-plan-schedule-info > summary::-webkit-details-marker {
  display: none;
}

.production-plan-schedule-info > summary:hover,
.production-plan-schedule-info[open] > summary {
  color: var(--text-main);
  border-color: rgba(91, 151, 255, 0.62);
  background: rgba(79, 140, 255, 0.16);
}

.production-plan-schedule-info-popover {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  width: min(310px, calc(100vw - 36px));
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--border-mid);
  border-radius: var(--workspace-panel-radius);
  background: var(--bg-panel);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.48);
}

.production-plan-schedule-info-popover > strong {
  color: var(--text-main);
  font-size: var(--fs-caption);
}

.production-plan-schedule-info-popover > span {
  --schedule-status-color: #8b929d;
  position: relative;
  padding-left: 14px;
  color: var(--text-soft);
  font-size: var(--fs-caption);
  line-height: 1.3;
}

.production-plan-schedule-info-popover > span::before {
  position: absolute;
  top: 3px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--schedule-status-color);
  content: "";
}

/* Ширину окна держит <dialog> из ui-kit/modal.js: карточка занимает её целиком.
   Раньше здесь стояло min(760px, 100vw - 24px) при диалоге в 720px, и правый
   край формы вместе с кнопкой «Отмена» уезжал за границу окна. */
.production-plan-editor-card {
  width: 100%;
  max-width: min(760px, 100%);
}

.production-plan-editor-card .production-plan-form {
  margin-top: 12px;
}

.gas-mode-dept_head .production-plan-workspace > [hidden] {
  display: none !important;
}

.gas-mode-dept_head .production-plan-list-view {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 9px;
}

.gas-mode-dept_head .production-plan-list-view .production-plan-list-controls {
  margin-top: 0;
}

.gas-mode-dept_head .production-plan-schedule-preview {
  min-width: 0;
  width: 100%;
  display: grid;
}

.gas-mode-dept_head .production-plan-schedule-days {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.gas-mode-dept_head .production-plan-schedule-legend {
  grid-column: 1 / -1;
}

.production-plan-schedule-legend span {
  --schedule-status-color: rgba(160, 167, 178, 0.9);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--schedule-status-color) 48%, transparent);
  border-radius: 999px;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--schedule-status-color) 12%, transparent);
}

.production-plan-schedule-legend span::before {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--schedule-status-color);
  content: "";
}

.production-plan-schedule-legend .is-working,
.production-plan-schedule-info-popover .is-working,
.production-plan-schedule-row.is-working {
  --schedule-status-color: #55bd78;
}

.production-plan-schedule-legend .is-dayoff,
.production-plan-schedule-info-popover .is-dayoff,
.production-plan-schedule-row.is-dayoff {
  --schedule-status-color: #6997d5;
}

.production-plan-schedule-legend .is-absence,
.production-plan-schedule-info-popover .is-absence,
.production-plan-schedule-row.is-absence {
  --schedule-status-color: #d66f67;
}

.production-plan-schedule-legend .is-vacation,
.production-plan-schedule-info-popover .is-vacation,
.production-plan-schedule-row.is-vacation {
  --schedule-status-color: #d6a658;
}

.production-plan-schedule-legend .is-sick,
.production-plan-schedule-info-popover .is-sick,
.production-plan-schedule-row.is-sick {
  --schedule-status-color: #a784d6;
}

.production-plan-schedule-legend .is-unset,
.production-plan-schedule-info-popover .is-unset,
.production-plan-schedule-row.is-unset {
  --schedule-status-color: #8b929d;
}

.gas-mode-dept_head .production-plan-schedule-row {
  min-height: 0;
  padding: 3px 5px;
  border: 1px solid color-mix(in srgb, var(--schedule-status-color) 42%, transparent);
  border-left: 3px solid var(--schedule-status-color);
  background: color-mix(in srgb, var(--schedule-status-color) 11%, rgba(255, 255, 255, 0.018));
}

.gas-mode-dept_head .production-plan-schedule-row em {
  color: color-mix(in srgb, var(--schedule-status-color) 70%, var(--text-main));
}

@media (max-width: 768px) {
  .gas-mode-dept_head .production-plan-mobile-switch {
    margin-bottom: 8px;
  }

  .gas-mode-dept_head .production-plan-mobile-switch button {
    min-height: 40px;
    padding: 5px 4px;
    font-size: var(--fs-caption);
  }

  .gas-mode-dept_head .production-plan-schedule-days {
    gap: 7px;
  }

  .gas-mode-dept_head .production-plan-schedule-row {
    padding: 2px 4px;
    font-size: var(--fs-caption);
  }
}

@media (max-width: 1280px) {
  .gas-mode-dept_head .production-plan-create-mode {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }

  .production-plan-assignment-row {
    grid-template-columns: minmax(54px, auto) minmax(0, 1fr) auto;
  }

  .production-plan-assignment-row.is-started {
    grid-template-columns: minmax(54px, auto) minmax(0, 1fr) auto;
  }

    .gas-mode-dept_head .production-plan-workspace.is-create-view .production-plan-schedule-preview {
    display: grid;
  }
}

@media (max-width: 768px) {
  .production-plan-assignment {
    padding: 7px;
  }

  /* Колонка плашки растёт по своему содержимому: слово «ОЧЕРЕДЬ» шириной 57px
     не помещалось в фиксированные 54px и вылезало за цветной прямоугольник на
     тёмный фон карточки. Уменьшить шрифт нельзя — он уже на нижней ступени
     шкалы (--fs-caption), а мельче 12px запрещает docs/UI_CANON.md. Ширина
     задана через minmax, а не подобранным числом: дорожка встаёт по max-content
     подписи, поэтому смена слова или шкалы шрифтов не потребует подгонки.
     Соседняя дорожка minmax(0, 1fr) на неё не давит — её собственный минимум
     равен нулю, длинное название сжимает свою колонку, а не эту. Менять —
     только с проверкой на 320px. */
  .production-plan-assignment-row {
    grid-template-columns: minmax(54px, auto) minmax(0, 1fr) auto;
    gap: 6px;
    padding: 6px;
  }

  .production-plan-assignment-row.is-started {
    grid-template-columns: minmax(54px, auto) minmax(0, 1fr) auto;
  }

  .production-plan-assignment-priority {
    grid-row: 1 / span 2;
    min-height: 58px;
  }
}

@media (max-width: 560px) {
  .production-plan-assignment-row.is-started {
    grid-template-columns: minmax(54px, auto) minmax(0, 1fr) auto;
  }

  .gas-mode-dept_head .production-plan-schedule-days {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .gas-mode-dept_head .dept-head-employee-toolbar {
    width: 100%;
    gap: 8px;
    padding: 8px;
  }

  .gas-mode-dept_head .dept-head-employee-search {
    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 0 0 8px;
    border-right: 0;
    border-bottom: 1px solid var(--border-soft);
  }

  .gas-mode-dept_head .dept-head-employee-search .search-input {
    width: 100%;
    min-width: 0;
    height: 44px;
    min-height: 44px;
    flex: none;
  }

  .gas-mode-dept_head .dept-head-employee-search .employee-directory-count {
    min-height: 0;
    white-space: nowrap;
  }
}

@media (max-width: 430px) {
  .gas-mode-dept_head .dept-head-employee-search {
    grid-template-columns: minmax(0, 1fr);
  }
}

.gas-mode-dept_head .dept-head-employee-grid .employee-link-card-compact {
  min-height: 76px;
  height: auto;
  padding: 11px 12px;
  cursor: pointer;
  grid-template-rows: auto;
}

.gas-mode-dept_head .dept-head-employee-grid .dept-head-employee-card-button:hover {
  border-color: rgba(91, 151, 255, 0.46);
  background: rgba(79, 140, 255, 0.07);
}

.gas-mode-dept_head .dept-head-employee-grid .dept-head-employee-card-button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.dept-head-employee-card-statuses {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 5px;
}

.dept-head-employee-card-statuses > span {
  padding: 3px 6px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 620;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  white-space: nowrap;
}

.dept-head-employee-card-statuses > span.is-on {
  color: #79d99d;
  border-color: rgba(71, 174, 107, 0.42);
  background: rgba(47, 143, 81, 0.12);
}

.dept-head-employee-card-statuses > b {
  color: var(--text-muted);
  font-size: var(--fs-h1);
  font-weight: 500;
}

.dept-head-employee-manage-card {
  width: min(430px, calc(100vw - 24px));
}

.dept-head-employee-manage-actions {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.dept-head-employee-manage-actions .employee-toggle {
  width: 100%;
  min-height: 44px;
  justify-content: center;
}

.gas-mode-dept_head .dept-head-employee-grid .employee-link-card-compact .employee-link-head {
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.gas-mode-dept_head .dept-head-employee-grid .employee-link-actions-inline {
  width: auto;
  min-width: 0;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
}

.gas-mode-dept_head .dept-head-employee-grid .employee-link-actions-inline > * {
  min-width: 174px;
  min-height: 40px;
  flex: 0 0 auto;
}

@media (min-width: 769px) {
  .gas-mode-dept_head .dept-head-employee-grid .employee-link-card-compact {
    min-height: 68px;
    padding: 8px 10px;
  }

  .gas-mode-dept_head .dept-head-employee-grid .employee-link-card-compact .employee-link-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
  }

  .gas-mode-dept_head .dept-head-employee-grid .employee-link-main {
    min-width: 0;
    gap: 2px;
  }

  .gas-mode-dept_head .dept-head-employee-grid :is(.employee-link-name, .employee-link-meta) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .gas-mode-dept_head .dept-head-employee-grid .dept-head-employee-card-statuses {
    flex-wrap: nowrap;
    gap: 3px;
    white-space: nowrap;
  }

  .gas-mode-dept_head .dept-head-employee-grid .dept-head-employee-card-statuses > span {
    padding: 2px 4px;
    font-size: var(--fs-caption);
  }

  .gas-mode-dept_head .dept-head-employee-grid .dept-head-employee-card-statuses > b {
    flex: 0 0 auto;
    font-size: var(--fs-h3);
  }
}

@media (max-width: 768px) {
  .gas-mode-dept_head .dept-head-employee-grid .employee-link-actions-inline {
    width: min(100%, 360px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gas-mode-dept_head .dept-head-employee-grid .employee-link-actions-inline > * {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 560px) {
  .gas-mode-dept_head .dept-head-employee-grid .employee-link-card-compact .employee-link-head {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .gas-mode-dept_head .dept-head-employee-grid .employee-link-actions-inline,
  .gas-mode-dept_head .dept-head-employee-grid .employee-link-actions-inline > * {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 768px) {
  .gas-mode-admin #admNavBar.admin-data-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: 8px;
    padding: 8px;
    margin-bottom: 10px;
  }

  .gas-mode-admin #admNavBar.admin-data-filter .nav-date-input {
    min-height: 42px;
    padding: 7px 9px;
    font-size: var(--fs-body);
  }

  .gas-mode-admin #admNavBar.admin-data-filter .date-picker-btn {
    width: 42px;
    min-width: 42px;
    max-width: 42px;
    min-height: 42px;
  }

  .gas-mode-admin #admNavBar.admin-data-filter .admin-filter-field {
    min-width: 0;
    margin: 0;
    gap: 5px;
  }

  .gas-mode-admin #admNavBar.admin-data-filter .admin-filter-field select {
    order: 1;
    min-height: 42px;
    padding-block: 7px;
    font-size: var(--fs-body);
  }

  .gas-mode-admin #admNavBar.admin-data-filter .admin-filter-actions {
    grid-column: 1 / -1;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .gas-mode-admin #admNavBar.admin-data-filter .admin-filter-actions .nav-bar-btn {
    min-height: 42px;
    padding: 7px 10px;
  }
}

@media (max-width: 430px) {
  .gas-mode-admin #admNavBar.admin-data-filter,

  .gas-mode-admin #admNavBar.admin-data-filter .admin-filter-actions {
    grid-column: 1;
  }
}

.gas-mode-admin #admNavBar.admin-data-filter .admin-filter-field > select {
  order: 1;
}

@media (min-width: 1121px) {
  .gas-mode-admin #admNavBar.admin-data-filter {
    grid-template-columns:
      minmax(320px, 1.4fr)
      minmax(170px, 0.75fr)
      minmax(160px, 0.7fr)
      minmax(210px, 0.9fr);
    align-items: end;
  }

  .gas-mode-admin #admNavBar.admin-data-filter .admin-filter-field {
    width: 100%;
    min-width: 0;
    align-content: end;
  }

  .gas-mode-admin #admNavBar.admin-data-filter .admin-filter-actions {
    width: 100%;
    align-self: end;
  }
}

@media (min-width: 1281px) {
  .gas-mode-admin #admNavBar.admin-data-filter {
    grid-template-columns:
      minmax(300px, 1.4fr)
      minmax(150px, 0.8fr)
      minmax(150px, 0.8fr)
      minmax(190px, 1fr);
    justify-content: stretch;
    gap: 8px;
    padding: 8px;
  }

  .gas-mode-admin #admNavBar.admin-data-filter :is(
    .nav-date-input,
    .date-picker-btn,
    .admin-filter-field select,
    .admin-filter-actions .nav-bar-btn
  ) {
    min-height: 44px;
    height: 44px;
  }

  .gas-mode-admin #admNavBar.admin-data-filter .date-picker-btn {
    width: 44px;
    min-width: 44px;
    max-width: 44px;
  }

  .gas-mode-admin #admNavBar.admin-data-filter .nav-date-input,
  .gas-mode-admin #admNavBar.admin-data-filter .admin-filter-field select {
    padding: 6px 9px;
    font-size: var(--fs-caption);
  }

  .gas-mode-admin #admNavBar.admin-data-filter .admin-filter-field {
    gap: 4px;
  }
}

/* Admin data workspace: adapt to the content column, which may be narrowed by the sidebar. */
@container admin-data-workspace (max-width: 1050px) {
  .gas-mode-admin #admNavBar.admin-data-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
  }

  .gas-mode-admin #admNavBar.admin-data-filter .admin-filter-actions {
    grid-column: 1 / -1;
  }
}

@container admin-data-workspace (max-width: 840px) {
  .gas-mode-admin .admin-data-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .gas-mode-admin .admin-data-tabs .tab-btn[data-admin-data-tab="warehouse"] {
    grid-column: span 2;
  }

}

@container admin-data-workspace (max-width: 680px) {
  .gas-mode-admin #admNavBar.admin-data-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gas-mode-admin #admNavBar.admin-data-filter .admin-filter-actions {
    grid-column: 1 / -1;
  }
}

@container admin-data-workspace (max-width: 560px) {
  .gas-mode-admin .admin-data-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .gas-mode-admin .admin-data-tabs .tab-btn {
    width: 100%;
    min-width: 0;
  }

  .gas-mode-admin #admNavBar.admin-data-filter {
    grid-template-columns: minmax(0, 1fr);
  }

  .gas-mode-admin #admNavBar.admin-data-filter .admin-filter-actions {
    grid-column: 1;
  }
}

@container admin-data-workspace (max-width: 420px) {
  .gas-mode-admin .admin-data-tabs,
  .gas-mode-admin #admNavBar.admin-data-filter .admin-filter-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .gas-mode-admin .admin-data-tabs .tab-btn[data-admin-data-tab="warehouse"] {
    grid-column: auto;
  }
}

.gas-mode-dept_head .production-plan-list-controls {
  grid-template-columns: minmax(240px, 1fr) minmax(170px, auto);
}

/* Production admin: editable position export and correspondence registry. */
.gas-mode-admin .admin-exports-workspace {
  min-width: 0;
}

.gas-mode-admin .admin-exports-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}

.gas-mode-admin .admin-exports-head h2 {
  margin: 0 0 5px;
}

.gas-mode-admin .admin-exports-head p {
  max-width: 720px;
  margin: 0;
}

.gas-mode-admin .admin-exports-head > .ui-button {
  flex: 0 0 auto;
}

.gas-mode-admin .admin-exports-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.gas-mode-admin .admin-exports-summary > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px 13px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}

.gas-mode-admin .admin-exports-summary span {
  color: var(--text-muted);
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.gas-mode-admin .admin-exports-summary strong {
  font-size: var(--fs-h1);
  line-height: 1;
}

.gas-mode-admin .admin-exports-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(190px, 0.35fr) auto;
  gap: 8px;
  margin-bottom: 12px;
}

.gas-mode-admin .admin-exports-toolbar label {
  min-width: 0;
  margin: 0;
}

.gas-mode-admin .admin-exports-toolbar :is(input, select) {
  width: 100%;
  min-width: 0;
  min-height: 40px;
}

.gas-mode-admin .admin-exports-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}

.gas-mode-admin .admin-exports-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  table-layout: fixed;
}

.gas-mode-admin .admin-exports-table td {
  padding: 8px;
  vertical-align: middle;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
}

.gas-mode-admin .admin-exports-table th {
  padding: 8px;
  vertical-align: middle;
  text-align: left;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.035);
  border-bottom: 1px solid var(--border-soft);
  text-transform: uppercase;
}

.gas-mode-admin .admin-exports-table th:nth-child(1) {
  width: 145px;
}

.gas-mode-admin .admin-exports-table th:nth-child(3) {
  width: 240px;
}

.gas-mode-admin .admin-exports-table th:nth-child(4) {
  width: 185px;
}

.gas-mode-admin .admin-exports-table tbody tr:last-child td {
  border-bottom: 0;
}

.gas-mode-admin .admin-exports-table tr.has-missing-data {
  background: rgba(245, 183, 74, 0.035);
}

.gas-mode-admin .admin-exports-table input {
  width: 100%;
  min-width: 0;
  min-height: 38px;
}

.gas-mode-admin .admin-exports-open-row {
  cursor: pointer;
  transition: background-color 140ms ease, box-shadow 140ms ease;
}

.gas-mode-admin .admin-exports-open-row:hover,
.gas-mode-admin .admin-exports-open-row:focus-visible {
  background: rgba(92, 151, 230, 0.09);
  box-shadow: inset 3px 0 0 var(--accent, #69a7ff);
  outline: none;
}

.gas-mode-admin .admin-exports-open-hint {
  display: block;
  margin-top: 5px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.gas-mode-admin .admin-exports-status {
  display: inline-flex;
  max-width: 100%;
  padding: 5px 8px;
  font-size: var(--fs-caption);
  line-height: 1.3;
  border: 1px solid;
  border-radius: 999px;
}

.gas-mode-admin .admin-exports-status.is-complete {
  color: #9ce3b0;
  background: rgba(56, 153, 84, 0.15);
  border-color: rgba(105, 210, 137, 0.35);
}

.gas-mode-admin .admin-exports-status.is-missing {
  color: #f5c56d;
  background: rgba(245, 183, 74, 0.1);
  border-color: rgba(245, 183, 74, 0.38);
}

.gas-mode-admin .admin-exports-save {
  width: 100%;
  min-height: 38px;
  padding-inline: 10px;
}

.gas-mode-admin .admin-exports-empty {
  padding: 22px 12px !important;
  text-align: center !important;
}

.gas-mode-admin .admin-position-modal-card {
  width: min(820px, calc(100vw - 28px));
  max-height: min(820px, calc(100vh - 28px));
  overflow-y: auto;
}

.gas-mode-admin .admin-position-modal-grid {
  display: grid;
  grid-template-columns: minmax(160px, 0.45fr) minmax(0, 1fr);
  gap: 12px;
}

.gas-mode-admin .admin-position-modal-grid label {
  display: grid;
  gap: 6px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  text-transform: uppercase;
}

.gas-mode-admin .admin-position-modal-grid .is-wide {
  grid-column: 1 / -1;
}

.gas-mode-admin .admin-position-modal-grid input {
  width: 100%;
  min-height: 42px;
  text-transform: none;
}

.gas-mode-admin .admin-position-modal-grid input[readonly] {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.025);
  cursor: default;
}

.gas-mode-admin .admin-position-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.gas-mode-admin .admin-position-detail {
  min-width: 0;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}

.gas-mode-admin .admin-position-detail span {
  display: block;
  margin-bottom: 5px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.gas-mode-admin .admin-position-detail strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: var(--fs-body-lg);
}

@media (max-width: 560px) {
  .gas-mode-admin .admin-position-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* Shared employee bulk editor and per-employee integration mapping. */
.employee-directory-bulk {
  white-space: nowrap;
}

.employee-card-shell {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .025);
}

.employee-card-shell > .employee-link-card {
  width: 100%;
  border: 0;
  border-radius: 0;
}

.employee-card-integration-btn {
  min-height: 40px;
  padding: 8px 12px;
  color: #a9c8ff;
  font-weight: 650;
  text-align: left;
  background: rgba(73, 119, 198, .08);
  border: 0;
  border-top: 1px solid var(--border-soft);
  border-radius: 0;
}

.employee-card-integration-btn:hover {
  color: #d1e1ff;
  background: rgba(73, 119, 198, .16);
}

/* Shared employee directory cards: the whole card opens employee editing. */
.employee-directory-card:not(.label-print-employee-card) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  padding: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, .028);
  border: 1px solid var(--border-soft);
  border-left: 3px solid rgba(99, 183, 124, .72);
  border-radius: var(--radius-md);
}

.employee-directory-card__actions {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
}

.employee-directory-card__stats {
  width: auto;
  min-height: 34px;
  padding: 7px 11px;
  font-size: var(--fs-caption);
}

.employee-directory-card[data-employee-card-action] {
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.employee-directory-card[data-employee-card-action]:hover {
  background: rgba(255, 255, 255, .052);
  border-color: rgba(128, 173, 255, .46);
}

.employee-directory-card[data-employee-card-action]:active {
  transform: translateY(1px);
}

.employee-directory-card[data-employee-card-action]:focus-visible {
  outline: 3px solid rgba(128, 173, 255, .78);
  outline-offset: 3px;
}

.employee-directory-card.is-inactive:not(.label-print-employee-card) {
  border-left-color: rgba(139, 146, 157, .62);
  opacity: .76;
}

.employee-directory-card__body {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.employee-directory-card__identity {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.employee-directory-card__identity strong {
  overflow-wrap: anywhere;
  color: var(--text-main, #f6f2e9);
  font-size: var(--fs-body-lg);
  line-height: 1.3;
}

.employee-directory-card__identity > span {
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.employee-directory-card__statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

.employee-directory-card__statuses > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 4px 9px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1.2;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
}

.employee-directory-card__statuses > .active,
.employee-directory-card__statuses > .is-on {
  color: #bce8c8;
  background: rgba(50, 132, 76, .14);
  border-color: rgba(91, 183, 119, .32);
}

.employee-directory-card__statuses > .is-pending {
  color: var(--warn);
  border-color: rgba(196, 154, 85, .4);
}

/* Временный заместитель в карточке сотрудника Производства. */
.dh-temp-deputy {
  display: grid;
  gap: 8px;
  margin-top: 6px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
}

.dh-temp-deputy__title {
  margin: 0;
  font-size: var(--fs-body, 14px);
  font-weight: 700;
}

.dh-temp-deputy__hint,
.dh-temp-deputy__status {
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.dh-temp-deputy__status.is-on { color: var(--schedule-work-accent); font-weight: 700; }
.dh-temp-deputy__status.is-pending { color: var(--warn); font-weight: 700; }

.dh-temp-deputy__dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.dh-temp-deputy__field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.dh-temp-deputy__field > span { grid-column: 1 / -1; }

.dh-temp-deputy__field input { width: 100%; min-width: 0; }

.dh-temp-deputy__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dh-temp-deputy__actions > button { min-height: 44px; flex: 1 1 140px; }

.dh-temp-deputy__history {
  margin: 0;
  padding-left: 18px;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.dh-temp-deputy-back {
  flex: 0 0 auto;
  min-height: 36px;
  white-space: nowrap;
  text-decoration: none;
}

/* Accessible custom checkbox shared by production, Okleyka and label printing. */
body.gas-mode-admin input[type="checkbox"],
body.gas-mode-dept_head input[type="checkbox"],
body.ok-app.ui-production-parity input[type="checkbox"] {
  width: 16px;
  min-width: 16px;
  height: 16px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-color: var(--bg-control, rgba(11, 13, 15, .72));
  background-position: center;
  background-repeat: no-repeat;
  background-size: 11px 11px;
  border: 1px solid var(--border-mid, rgba(160, 171, 184, .48));
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  vertical-align: middle;
  transition: background-color .14s ease, border-color .14s ease, box-shadow .14s ease;
  touch-action: manipulation;
}

body.gas-mode-admin input[type="checkbox"]:hover,
body.gas-mode-dept_head input[type="checkbox"]:hover,
body.ok-app.ui-production-parity input[type="checkbox"]:hover {
  border-color: var(--btn-blue, #4f8cff);
}

body.gas-mode-admin input[type="checkbox"]:checked,
body.gas-mode-dept_head input[type="checkbox"]:checked,
body.ok-app.ui-production-parity input[type="checkbox"]:checked {
  background-color: var(--btn-blue, #4f8cff);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='m3.2 8.3 3 3.1 6.6-7'/%3E%3C/svg%3E");
  border-color: var(--btn-blue, #4f8cff);
}

body.gas-mode-admin input[type="checkbox"]:indeterminate,
body.gas-mode-dept_head input[type="checkbox"]:indeterminate,
body.ok-app.ui-production-parity input[type="checkbox"]:indeterminate {
  background-color: var(--btn-blue, #4f8cff);
  background-image: linear-gradient(#fff, #fff);
  background-size: 10px 2px;
  border-color: var(--btn-blue, #4f8cff);
}

body.gas-mode-admin input[type="checkbox"]:focus-visible,
body.gas-mode-dept_head input[type="checkbox"]:focus-visible,
body.ok-app.ui-production-parity input[type="checkbox"]:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(116, 161, 240, .42);
}

body.gas-mode-admin input[type="checkbox"]:disabled,
body.gas-mode-dept_head input[type="checkbox"]:disabled,
body.ok-app.ui-production-parity input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: .46;
}

:where(.admin-warehouse-select-all, .employee-inactive-filter, .employee-bulk-toolbar label, .employee-bulk-switch, .ok-record-check-hit, .ok-recalculate-check, .ok-record-apply-label) {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.ui-checkbox-hit {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

@media (max-width: 560px) {
  .employee-directory-card:not(.label-print-employee-card) {
    grid-template-columns: 1fr;
  }

  .employee-directory-card__stats {
    width: 100%;
    justify-content: center;
  }

}

.employee-bulk-modal-card {
  /* Ширину держит <dialog> из ui-kit (--ui-modal-width передаётся в openModal),
     карточка просто заполняет его. Раньше она объявляла свои 1040px и вылезала
     за диалог в 720px — отсюда и была прокрутка вправо. */
  width: 100%;
  max-height: min(820px, calc(100vh - 24px));
}

.employee-bulk-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 10px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.employee-bulk-toolbar label,
.employee-bulk-switch {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  margin: 0;
}

.employee-bulk-table-wrap {
  min-height: 160px;
  /* По вертикали прокрутка нужна — строк много. По горизонтали остаётся только
     как страховка на очень узких экранах: при обычной ширине таблица влезает. */
  overflow-y: auto;
  overflow-x: auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}

.employee-bulk-table {
  width: 100%;
  border-collapse: collapse;
  /* Фиксированная раскладка: колонки держат заданную долю и не растягиваются
     под содержимое, поэтому таблица влезает в диалог без прокрутки вправо. */
  table-layout: fixed;
}

.employee-bulk-table :is(th, td) {
  padding: 9px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
}

.employee-bulk-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  letter-spacing: .04em;
  text-transform: uppercase;
  background: #202326;
}

.employee-bulk-table td:first-child,
.employee-bulk-table th:first-child { width: 44px; }
.employee-bulk-table :is(th, td):nth-child(2) { width: 22%; }
.employee-bulk-table :is(th, td):nth-child(3) { width: 30%; }
/* Должность — единственная колонка со списком: min-width её больше не распирает. */
.employee-bulk-table select { min-width: 0; width: 100%; }
.employee-bulk-table :is(th, td) { overflow-wrap: anywhere; }
.employee-tool-status { min-height: 20px; margin: 10px 0 0; color: #e8bd69; font-size: var(--fs-caption); }
.employee-integration-modal-card { width: min(620px, calc(100vw - 24px)); }

/* История оклада: карточка текущего оклада, список версий и форма новой версии.
   Селекторы вложены в .salary-history-card, чтобы правила ширины и отступов
   модального окна (.schedule-modal-card) не перекрывали их. */
.schedule-modal-card.salary-history-card {
  width: min(560px, calc(100vw - 24px));
  max-width: min(560px, calc(100vw - 24px));
}

.salary-history-card .salary-history-current {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 4px 12px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.025);
}

.salary-history-card .salary-history-current__label { color: var(--text-muted); font-size: var(--fs-caption); }
.salary-history-card .salary-history-current__value { font-size: var(--fs-h1); font-weight: 700; grid-row: 2; }
.salary-history-card .salary-history-current__from { color: var(--text-muted); font-size: var(--fs-caption); grid-row: 2; text-align: right; }

.salary-history-card .salary-history-list { display: grid; gap: 6px; margin-top: 12px; }

.salary-history-card .salary-history-empty { margin: 0; color: var(--text-muted); font-size: var(--fs-caption); }

.salary-history-card .salary-history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px 12px;
  padding: 9px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.018);
}

.salary-history-card .salary-history-row.is-current { border-color: rgba(192,139,214,.5); background: rgba(192,139,214,.09); }
.salary-history-card .salary-history-row__period { font-size: var(--fs-body); }
.salary-history-card .salary-history-row__value { font-weight: 600; font-size: var(--fs-body-lg); }
.salary-history-card .salary-history-row__state { color: var(--text-muted); font-size: var(--fs-caption); grid-column: 1 / -1; grid-row: 2; }
.salary-history-card .salary-history-row__remove { justify-self: end; }

.salary-history-card .salary-history-editor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 11px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.025);
}

.salary-history-card .salary-history-editor label { display: grid; gap: 5px; font-size: var(--fs-caption); }
.salary-history-card .salary-history-editor label > span { color: var(--text-muted); }
.employee-tool-status.is-error { color: #ef7676; }

/* Последний вход и устройства сотрудника в карточке. */
.employee-activity-devices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.employee-activity-devices li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}

.employee-activity-device {
  font-weight: 600;
  font-size: var(--fs-body);
}

.employee-activity-devices small,
.employee-activity-empty {
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.employee-activity-alert {
  margin: 10px 0 0;
  padding: 8px 10px;
  color: var(--danger);
  font-size: var(--fs-body);
  background: var(--danger-soft, rgba(200, 60, 60, 0.12));
  border: 1px solid var(--danger);
  border-radius: var(--radius-md);
}

.employee-activity-alert[hidden] {
  display: none;
}

.employee-integration-service {
  display: grid;
  gap: 11px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.025);
}

.employee-integration-service > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.employee-integration-service > div > span:last-child { display: flex; align-items: flex-start; flex-direction: column; gap: 2px; }
.employee-integration-service small { color: var(--text-muted); font-size: var(--fs-caption); }
.employee-integration-service small.is-enabled { color: #9ce3b0; }
.employee-integration-service small.is-configured { color: #e8bd69; }
.employee-integration-service label { display: grid; gap: 5px; margin: 0; }
.employee-integration-service label > span { color: var(--text-muted); font-size: var(--fs-caption); }
.employee-integration-service input { width: 100%; }

.employee-integration-service > .employee-telegram-connect {
  display: grid;
  align-items: stretch;
  gap: 8px;
}

.employee-telegram-connect > .ui-button { justify-self: start; }

.employee-integration-service > .employee-telegram-connect-result {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px;
  border: 1px solid rgba(91, 146, 229, .28);
  border-radius: var(--workspace-control-radius);
  background: rgba(51, 94, 158, .12);
}

.employee-telegram-connect-result:not(.hidden) { display: grid; }
.employee-telegram-connect-result a { min-width: 0; color: #a9caff; overflow-wrap: anywhere; }
.employee-telegram-connect-result small { grid-column: 1 / -1; }

.employee-integration-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  flex: 0 0 auto;
  color: #cfe0ff;
  font-size: var(--fs-caption);
  font-weight: 800;
  background: rgba(70, 119, 204, .16);
  border: 1px solid rgba(110, 155, 233, .26);
  border-radius: var(--workspace-panel-radius);
}

.employee-integration-mark.is-compass { color: #bfe8d1; background: rgba(52, 145, 94, .13); border-color: rgba(88, 186, 132, .25); }
.employee-integration-note { margin: 12px 0 0; color: var(--text-muted); font-size: var(--fs-caption); line-height: 1.5; }

@media (max-width: 560px) {
  .employee-integration-service > .employee-telegram-connect-result { grid-template-columns: 1fr; }
  .employee-telegram-connect-result small { grid-column: auto; }
  .employee-bulk-table-wrap { border: 0; overflow: visible; }
  .employee-bulk-table, .employee-bulk-table tbody { display: grid; gap: 9px; }
  .employee-bulk-table thead { display: none; }
  .employee-bulk-table tr { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; padding: 10px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); }
  .employee-bulk-table td { padding: 0; border: 0; }
  .employee-bulk-table td:nth-child(n+3) { grid-column: 2; }
  .employee-bulk-table select { min-width: 0; }
}

/* Production admin: integrations and server-side synchronization settings. */
.gas-mode-admin .admin-integrations-workspace {
  min-width: 0;
}

.gas-mode-admin .admin-integrations-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}

.gas-mode-admin .admin-integrations-head h2 {
  margin: 0 0 5px;
}

.gas-mode-admin .admin-integrations-head p {
  max-width: 680px;
  margin: 0;
}

.gas-mode-admin .admin-integrations-refresh {
  flex: 0 0 auto;
}

.gas-mode-admin .admin-integration-test-notice {
  margin: 0 0 14px;
  padding: 11px 13px;
  border: 1px solid rgba(245, 183, 74, 0.5);
  border-radius: var(--workspace-panel-radius);
  background: rgba(245, 183, 74, 0.1);
  color: var(--text-muted);
  line-height: 1.45;
}

.gas-mode-admin .admin-integration-test-notice strong {
  color: #f5c56d;
}

.gas-mode-admin .admin-integrations-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.gas-mode-admin .admin-integration-card {
  display: grid;
  grid-template-rows: 1fr auto;
  min-width: 0;
  min-height: 210px;
  overflow: hidden;
  background: var(--surface-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  transition: border-color 160ms ease, background 160ms ease;
}

.gas-mode-admin .admin-integration-card.is-enabled {
  background: rgba(34, 75, 48, 0.2);
  border-color: rgba(105, 210, 137, 0.42);
}

.gas-mode-admin .admin-integration-open {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-content: start;
  align-items: start;
  width: 100%;
  min-height: 0;
  padding: 16px;
  color: var(--text-main);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.gas-mode-admin .admin-integration-open:hover {
  background: rgba(255, 255, 255, 0.035);
}

.gas-mode-admin .admin-integration-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  font-size: var(--fs-h1);
  background: rgba(79, 140, 255, 0.12);
  border: 1px solid rgba(115, 166, 255, 0.24);
  border-radius: var(--radius-sm);
}

.gas-mode-admin .admin-integration-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.gas-mode-admin .admin-integration-copy strong {
  font-size: var(--fs-body-lg);
}

.gas-mode-admin .admin-integration-copy small {
  color: var(--text-muted);
  line-height: 1.45;
}

.gas-mode-admin .admin-integration-state {
  grid-column: 1 / -1;
  width: fit-content;
  margin-top: 4px;
  padding: 4px 7px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
}

.gas-mode-admin .admin-integration-state.is-enabled {
  color: #9ce3b0;
  background: rgba(56, 153, 84, 0.15);
  border-color: rgba(105, 210, 137, 0.35);
}

.gas-mode-admin .admin-integration-toggle {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.025);
  border: 0;
  border-top: 1px solid var(--border-soft);
  border-radius: 0;
}

.gas-mode-admin .admin-integration-toggle.is-enabled {
  color: #b8eec5;
}

.gas-mode-admin .admin-integration-toggle-track {
  position: relative;
  width: 38px;
  height: 22px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--border-mid);
  border-radius: 999px;
}

.gas-mode-admin .admin-integration-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: #b6b3ad;
  border-radius: 50%;
  transition: transform 160ms ease, background 160ms ease;
}

.gas-mode-admin .admin-integration-toggle.is-enabled .admin-integration-toggle-track {
  background: rgba(56, 153, 84, 0.32);
  border-color: rgba(105, 210, 137, 0.52);
}

.gas-mode-admin .admin-integration-toggle.is-enabled .admin-integration-toggle-thumb {
  background: #a9eabb;
  transform: translateX(16px);
}

.gas-mode-admin .admin-integration-modal-card {
  width: min(760px, calc(100vw - 24px));
}

.gas-mode-admin .admin-integration-modal-switch {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin: 14px 0;
  padding: 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}

.gas-mode-admin .admin-integration-modal-switch > span {
  display: grid;
  gap: 4px;
}

.gas-mode-admin .admin-integration-modal-switch small,
.gas-mode-admin .admin-integration-secret-note {
  color: var(--text-muted);
  font-size: var(--fs-caption);
  line-height: 1.4;
}

.gas-mode-admin .admin-integration-modal-switch input {
  flex: 0 0 auto;
  width: 42px;
  min-height: 22px;
  accent-color: var(--btn-blue);
}

.gas-mode-admin .admin-integration-fields {
  display: grid;
  gap: 10px;
}

.gas-mode-admin .admin-integration-consumers {
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.025);
}

.gas-mode-admin .admin-integration-consumers legend {
  padding: 0 6px;
  color: var(--text-main);
  font-weight: 800;
}

.gas-mode-admin .admin-integration-consumers > p,
.gas-mode-admin .admin-integration-consumer-summary {
  color: var(--text-muted);
  font-size: var(--fs-caption);
  line-height: 1.4;
}

.gas-mode-admin .admin-integration-consumers > p {
  margin: 0 0 10px;
}

.gas-mode-admin .admin-integration-consumer-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.gas-mode-admin .admin-integration-consumer-options label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-panel-radius);
  background: rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

.gas-mode-admin .admin-integration-consumer-options input {
  width: 18px;
  min-height: 18px;
  accent-color: var(--btn-blue);
}

@media (max-width: 560px) {
  .gas-mode-admin .admin-integration-consumer-options {
    grid-template-columns: 1fr;
  }
}

.gas-mode-admin .admin-integration-tabs {
  display: flex;
  gap: 4px;
  margin: 14px 0 4px;
  padding: 4px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.025);
}

.gas-mode-admin .admin-integration-tabs.hidden {
  display: none;
}

.gas-mode-admin .admin-integration-tab {
  min-height: 38px;
  padding: 8px 16px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: calc(var(--radius-sm) - 2px);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.gas-mode-admin .admin-integration-tab:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.04);
}

.gas-mode-admin .admin-integration-tab[aria-selected="true"] {
  color: #fff1d0;
  background: rgba(232, 174, 58, 0.12);
  border-color: rgba(232, 174, 58, 0.38);
}

.gas-mode-admin .admin-integration-tab:focus-visible {
  outline: 2px solid var(--btn-blue);
  outline-offset: 2px;
}

.gas-mode-admin .admin-integration-tab-panel {
  display: grid;
  gap: 10px;
}

.gas-mode-admin .admin-integration-tab-panel.hidden {
  display: none;
}

.gas-mode-admin .admin-integration-field {
  display: grid;
  gap: 5px;
  margin: 0;
}

.gas-mode-admin .admin-integration-field > span {
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.gas-mode-admin .admin-integration-field > small {
  color: var(--text-muted);
  font-size: var(--fs-caption);
  line-height: 1.4;
}

.gas-mode-admin .admin-integration-field input {
  width: 100%;
}

.gas-mode-admin .admin-integration-recipients {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.gas-mode-admin .admin-integration-recipients legend {
  margin-bottom: 3px;
  padding: 0;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 620;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.gas-mode-admin .admin-integration-recipients > small {
  color: var(--text-muted);
  font-size: var(--fs-caption);
  line-height: 1.4;
}

.gas-mode-admin .admin-integration-recipient-list {
  display: grid;
  gap: 8px;
}

/* Справочник Compass над списком получателей: состояние + кнопка обновления. */
.admin-integration-directory { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 10px; }
.admin-integration-directory > p { margin: 0; flex: 1 1 260px; }
.gas-mode-admin .admin-integration-recipient {
  display: grid;
  grid-template-columns: 130px minmax(160px, 1fr) minmax(160px, 0.9fr) auto;
  gap: 8px;
  align-items: end;
  padding: 9px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}

.gas-mode-admin .admin-integration-recipient label {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin: 0;
}

.gas-mode-admin .admin-integration-recipient label > span {
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.gas-mode-admin .admin-integration-recipient :is(input, select) {
  width: 100%;
  min-width: 0;
}

.gas-mode-admin .admin-integration-recipient-remove {
  min-height: 38px;
  padding-inline: 10px;
  color: #efaaa7;
  background: rgba(145, 55, 51, 0.15);
  border-color: rgba(207, 91, 85, 0.34);
}

.gas-mode-admin .admin-integration-recipient-add {
  width: fit-content;
}

.gas-mode-admin .admin-integration-modal-card > .admin-integration-secret-note {
  margin: 10px 0 0;
}

.gas-mode-admin .admin-integration-modal-status {
  min-height: 18px;
  margin: 8px 0 0;
  color: var(--warning, #e8bd69);
  font-size: var(--fs-caption);
}

.gas-mode-admin .admin-yandex-oauth {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--ui-border);
  background: rgba(255, 255, 255, .035);
}

.gas-mode-admin .admin-yandex-oauth.hidden { display: none; }

.gas-mode-admin .admin-yandex-oauth-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.gas-mode-admin .admin-yandex-oauth-head span {
  color: var(--ui-accent, #74a9ff);
  font-size: var(--fs-caption);
  font-weight: 800;
}

.gas-mode-admin .admin-yandex-oauth p {
  margin: 0;
  color: var(--text-muted, #b8b1aa);
  font-size: var(--fs-body);
  line-height: 1.5;
}

.gas-mode-admin .admin-yandex-oauth-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.gas-mode-admin .admin-yandex-oauth-actions .admin-integration-field {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .gas-mode-admin .admin-integrations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .gas-mode-admin .admin-exports-head {
    align-items: stretch;
    flex-direction: column;
  }

  .gas-mode-admin .admin-exports-head > .ui-button {
    width: 100%;
  }

  .gas-mode-admin .admin-exports-summary,
  .gas-mode-admin .admin-exports-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .gas-mode-admin .admin-integrations-head {
    align-items: stretch;
    flex-direction: column;
  }

  .gas-mode-admin .admin-integrations-refresh {
    width: 100%;
  }

  .gas-mode-admin .admin-integrations-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .gas-mode-admin .admin-integration-card {
    min-height: 0;
  }

  .gas-mode-admin .admin-integration-recipient {
    grid-template-columns: minmax(0, 1fr);
  }

  .gas-mode-admin .admin-integration-recipient-add,
  .gas-mode-admin .admin-integration-recipient-remove {
    width: 100%;
  }
}

@media (min-width: 561px) and (max-width: 768px) {
  .gas-mode-admin .admin-integration-recipient {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gas-mode-admin .admin-integration-recipient label:nth-of-type(3) {
    grid-column: 1 / -1;
  }
}

/* System administrator: integration control center. */
.sys-admin-page {
  min-height: 100vh;
  margin: 0;
  color: var(--text-main);
  background: #171716;
}

.sys-admin-shell {
  width: min(1280px, calc(100% - 40px));
  margin: 0 auto;
  padding: 18px 0 48px;
}

.sys-admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-soft);
}

.sys-admin-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.sys-admin-brand img { width: 96px; height: auto; }
.sys-admin-brand span { display: grid; gap: 2px; }
.sys-admin-brand strong { font-size: var(--fs-body-lg); letter-spacing: .04em; }
.sys-admin-brand small { color: var(--text-muted); font-size: var(--fs-caption); }
.sys-admin-header-actions { display: flex; align-items: center; gap: 8px; }

.sys-admin-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 22px;
  border: 1px solid var(--border-mid);
  border-radius: var(--workspace-panel-radius);
  background: #222221;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2);
}

.sys-admin-eyebrow {
  display: block;
  margin-bottom: 9px;
  color: #e4a853;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.sys-admin-hero h1 { margin: 0; font-size: clamp(27px, 3vw, 38px); line-height: 1.05; letter-spacing: -.025em; }
.sys-admin-hero p { max-width: 620px; margin: 9px 0 0; color: var(--text-muted); line-height: 1.45; }
.sys-admin-health { display: flex; align-items: center; gap: 8px; }
.sys-admin-health span {
  display: grid;
  gap: 6px;
  min-width: 112px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--workspace-control-radius);
  background: #191918;
}
.sys-admin-health small { color: var(--text-muted); font-size: var(--fs-caption); }
.sys-admin-health strong { font-size: var(--fs-title); }

.sys-admin-workspaces,
.sys-admin-test-access,
.sys-admin-projects,
.sys-admin-integrations {
  margin-top: 16px;
  padding: 20px;
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-panel-radius);
  background: #1f1f1e;
}
.sys-admin-section-head,
.sys-admin-integrations .admin-integrations-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: end;
  margin-bottom: 16px;
}
.sys-admin-section-head > div,
.sys-admin-integrations .admin-integrations-head > div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sys-admin-section-head h2,
.sys-admin-integrations .admin-integrations-head h2 { margin: 0; font-size: var(--fs-h1); }
.sys-admin-section-head p,
.sys-admin-integrations .admin-integrations-head p { margin: 0; color: var(--text-muted); font-size: var(--fs-caption); }
.sys-admin-section-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 24px;
  border: 1px solid rgba(228, 168, 83, .42);
  border-radius: var(--workspace-control-radius);
  color: #e4a853;
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: .08em;
}
.sys-admin-directions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.sys-admin-directions button {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  align-items: center;
  min-height: 76px;
  padding: 14px;
  text-align: left;
  color: var(--text-main);
  background: #292928;
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-control-radius);
}
.sys-admin-directions button > span { grid-row: 1 / 3; font-size: var(--fs-h1); }
.sys-admin-directions button > small { color: var(--text-muted); font-size: var(--fs-caption); }
.sys-admin-directions button:hover { background: rgba(255,255,255,.075); border-color: var(--border-mid); }
.sys-admin-test-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sys-admin-test-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  min-height: 78px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-control-radius);
  color: var(--text-main);
  background: #292928;
  text-align: left;
  cursor: pointer;
}
.sys-admin-test-card:hover,
.sys-admin-test-card:focus-visible { border-color: #73a8f4; background: rgba(77, 116, 174, .14); outline: none; }
.sys-admin-test-card:disabled { cursor: wait; opacity: .58; }
.sys-admin-test-card.is-loading { opacity: 1; box-shadow: 0 0 0 2px rgba(115, 168, 244, .42); }
.sys-admin-test-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #d8e8ff; background: #23344f; font-weight: 800; }
.sys-admin-test-copy { display: grid; gap: 3px; min-width: 0; }
.sys-admin-test-copy :is(small, strong, em) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sys-admin-test-copy small { color: #91bfff; font-size: var(--fs-caption); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.sys-admin-test-copy strong { font-size: var(--fs-body); }
.sys-admin-test-copy em { color: var(--text-muted); font-size: var(--fs-caption); font-style: normal; }
.sys-admin-test-arrow { color: #91bfff; font-size: var(--fs-h2); }
.sys-admin-test-result {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, .8fr);
  gap: 14px 18px;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid rgba(115, 168, 244, .42);
  border-radius: var(--workspace-panel-radius);
  background: rgba(35, 52, 79, .34);
}
.sys-admin-test-result-head { display: flex; align-items: center; gap: 11px; }
.sys-admin-test-result-head > div { display: grid; gap: 3px; }
.sys-admin-test-result-head small,
.sys-admin-test-result-meta small { color: var(--text-muted); font-size: var(--fs-caption); }
.sys-admin-test-result-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sys-admin-test-result-meta span { display: grid; gap: 3px; }
.sys-admin-test-code-field { margin: 0; }
.sys-admin-test-code-field input { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: var(--fs-h3); font-weight: 800; letter-spacing: .08em; }
.sys-admin-test-result-actions { display: flex; align-items: end; gap: 8px; }
.sys-admin-test-result > p { grid-column: 1 / -1; margin: 0; color: var(--text-muted); font-size: var(--fs-caption); line-height: 1.5; }
.admin-direction-card.is-system {
  color: inherit;
  text-decoration: none;
  background: linear-gradient(135deg, rgba(57, 87, 145, .26), rgba(28, 35, 45, .72));
  border-color: rgba(116, 157, 234, .34);
}
.sys-admin-project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.sys-admin-project-list { display: contents; }
.sys-admin-project-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  min-height: 72px;
  padding: 13px 14px;
  color: var(--text-main);
  text-decoration: none;
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-control-radius);
  background: #292928;
}
.sys-admin-project-card > div { display: grid; gap: 4px; min-width: 0; text-align: left; }
.sys-admin-project-card > div > strong,
.sys-admin-project-card > div > small { display: block; overflow-wrap: anywhere; text-align: left; }
.sys-admin-project-card.is-current { border-left: 3px solid #e4a853; }
.sys-admin-project-mark { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--border-mid); border-radius: var(--workspace-control-radius); background: #181817; color: #e4a853; font-weight: 800; }
.sys-admin-project-card small { color: var(--text-muted); }
.sys-admin-project-state,
.sys-admin-project-open { color: #9fc9a7; font-size: var(--fs-caption); font-weight: 700; }
.sys-admin-project-card:not(.is-current):hover { border-color: #e4a853; background: var(--surface-hover); }
.sys-admin-project-empty { display: grid; gap: 5px; padding: 14px; border: 1px dashed var(--border-mid); border-radius: var(--workspace-control-radius); color: var(--text-muted); }
.sys-admin-project-list > .sys-admin-project-empty { grid-column: 1 / -1; }
.sys-admin-project-empty strong { color: var(--text-soft); }
.sys-admin-project-empty small { line-height: 1.45; }
.sys-admin-status { min-height: 20px; margin: 14px 0 0; color: #e8bd69; }
.sys-admin-page .admin-integration-modal-card { border-radius: var(--workspace-control-radius); }

/* Список сотрудников системного центра собран каноническими блоками
   (employee-directory-toolbar / -grid / -card), поэтому собственных стилей
   почти нет. Остаётся только окраска строки результата в модалке. */
.employee-tool-status.is-ok { color: var(--ok, #4caf50); }
.employee-tool-status.is-err { color: var(--danger, #e5534b); }

@media (max-width: 900px) {
  .sys-admin-hero { grid-template-columns: 1fr; }
  .sys-admin-health { width: 100%; }
  .sys-admin-health span { flex: 1; }
}

@media (max-width: 560px) {
  .sys-admin-shell { width: min(100% - 20px, 1280px); padding-top: 12px; }
  .sys-admin-header { align-items: stretch; flex-direction: column; }
  .sys-admin-header-actions { width: 100%; align-items: stretch; flex-direction: column; }
  .sys-admin-header-actions .ui-button { width: 100%; }
  .sys-admin-hero { padding: 22px 18px; }
  .sys-admin-health { align-items: stretch; flex-direction: column; }
  .sys-admin-health span { grid-template-columns: 1fr auto; align-items: center; }
  .sys-admin-directions,
  .sys-admin-test-grid,
  .sys-admin-project-grid { grid-template-columns: 1fr; }
  .sys-admin-test-result { grid-template-columns: 1fr; }
  .sys-admin-test-result-actions { align-items: stretch; flex-direction: column; }
  .sys-admin-workspaces,
  .sys-admin-test-access,
  .sys-admin-projects { padding: 16px; }
  .sys-admin-section-head,
  .sys-admin-integrations .admin-integrations-head { align-items: flex-start; flex-direction: column; }
}

@media (min-width: 769px) {
  .gas-mode-dept_head #dhEntriesTable th {
    padding: 8px 10px;
    font-size: var(--fs-caption);
    line-height: 1.1;
    letter-spacing: 0.025em;
    white-space: nowrap;
  }
}

.gas-mode-dept_head .production-plan-add-button {
  width: 100%;
  min-width: 0;
  white-space: nowrap;
}

.gas-mode-dept_head .production-plan-list-view,
.gas-mode-dept_head #dhProductionPlanRows {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.gas-mode-dept_head .production-plan-list-view {
  overflow: hidden;
}

.production-plan-table-wrap {
  display: block;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-panel-radius);
  background: var(--surface-2);
  scrollbar-width: thin;
}

.production-plan-table {
  width: 100%;
  min-width: 1000px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--text-soft);
  font-size: var(--fs-caption);
}

.production-plan-table th,
.production-plan-table td {
  min-width: 54px;
  padding: 10px 8px;
  vertical-align: middle;
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-body);
}

.production-plan-table thead th {
  position: sticky;
  z-index: 3;
  top: 0;
  min-height: 40px;
  color: var(--text-main);
  background: var(--bg-table-head);
  font-family: var(--font-plan-table);
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  text-transform: none;
  letter-spacing: 0;
}

/* Таблица плана: более мягкая гарнитура, чем геометрическая Century Gothic
   основного сайта (09.09.2026). Segoe UI есть на всех Windows, ничего не грузим. */
.production-plan-table {
  --font-plan-table: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-family: var(--font-plan-table);
}

/* Первая строка шапки: группы «Позиция» и «Этикетки». Вторая строка сдвинута
   под неё, чтобы обе оставались прилипшими при прокрутке. */
.production-plan-table thead .production-plan-table-groups th {
  padding: 6px 8px;
  min-height: 0;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--border-soft);
}

.production-plan-table thead tr:nth-child(2) th {
  top: 29px;
}

/* Колонки этикеток отделены от колонок позиции: заметная левая граница
   и лёгкая подкраска. */
.production-plan-table th.is-labels,
.production-plan-table td.is-labels {
  background: var(--bg-plan-labels, rgba(115, 168, 244, 0.06));
}

.production-plan-table thead th.is-labels {
  background: var(--bg-plan-labels-head, rgba(115, 168, 244, 0.14));
}

.production-plan-table thead .production-plan-table-groups th.is-labels,
.production-plan-table thead tr:nth-child(2) th.is-labels:nth-child(7),
.production-plan-table td.is-labels:nth-child(7) {
  border-left: 2px solid rgba(115, 168, 244, 0.45);
}

.production-plan-table-row:nth-child(odd) td.is-labels {
  background: var(--bg-plan-labels-odd, rgba(115, 168, 244, 0.09));
}

.production-plan-table-row:hover td.is-labels {
  background: var(--bg-plan-labels-hover, rgba(115, 168, 244, 0.16));
}

.production-plan-table thead th:first-child,
.production-plan-table-name {
  min-width: 190px;
  width: 190px;
  position: sticky;
  z-index: 2;
  left: 0;
}

.production-plan-table thead th:first-child {
  z-index: 4;
}

.production-plan-table-name {
  color: var(--text-main);
  background: var(--bg-table-sticky);
}

.production-plan-table-name > strong,
.production-plan-table-name > span,
.production-plan-table-name > small {
  display: block;
}

.production-plan-table-name > strong {
  font-size: var(--fs-caption);
  font-weight: 660;
  line-height: 1.22;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-plan-table-name > span,
.production-plan-table-name > small {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  line-height: 1.2;
}

.production-plan-table-row:nth-child(odd) td {
  background-color: var(--surface-1);
}

.production-plan-table-row:nth-child(odd) .production-plan-table-name {
  background: var(--bg-table-sticky-alt);
}

.production-plan-table-row:hover td {
  background-color: var(--surface-hover);
}

.production-plan-table-row:hover .production-plan-table-name {
  background: var(--surface-hover);
}

.production-plan-table-group th {
  padding: 8px 9px;
  color: var(--text-main);
  background: var(--bg-table-group);
  text-align: left;
  font-size: var(--fs-caption);
}

.production-plan-table-group th > span {
  margin-left: 8px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 560;
}

.production-plan-table-quantity {
  color: var(--text-main);
  font-size: var(--fs-h3);
  font-weight: 750;
  text-align: center;
}

.production-plan-table-priority {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.035);
  font-weight: 720;
  text-align: center;
}

.production-plan-table .is-editable input,
.production-plan-table .is-editable select {
  width: 100%;
  min-width: 0;
  min-height: 28px;
  padding: 3px 4px;
  color: var(--text-main);
  font-size: var(--fs-caption);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--workspace-control-radius);
  background: rgba(13, 13, 12, 0.58);
}

.production-plan-table .is-editable input:focus,
.production-plan-table .is-editable select:focus {
  border-color: rgba(91, 151, 255, 0.72);
  outline: 2px solid rgba(91, 151, 255, 0.22);
  outline-offset: 1px;
}

.production-plan-table .is-editable input[aria-invalid="true"] {
  border-color: rgba(211, 91, 78, 0.82);
  outline: 2px solid rgba(211, 91, 78, 0.20);
  outline-offset: 1px;
}

.production-plan-table-name.is-editable {
  padding: 3px;
}

.production-plan-table-name.is-editable input {
  min-height: 29px;
}

.production-plan-table-quantity.is-editable {
  padding: 3px;
}

.production-plan-table-priority.is-editable {
  padding: 0;
}

.production-plan-table-priority.is-editable select {
  min-height: 35px;
  border: 0;
  border-radius: 0;
  color: #fff;
  font-weight: 720;
  text-align: center;
  background: transparent;
  box-shadow: none;
}

.production-plan-table-priority.is-editable select:focus {
  border: 0;
  outline: 2px solid rgba(255, 255, 255, 0.72);
  outline-offset: -3px;
}

.production-plan-table-priority.is-editable select option {
  color: var(--text-main);
  background: var(--bg-panel);
}

.production-plan-table-row .production-plan-table-priority.is-priority-high {
  background: rgba(196, 69, 69, 0.78);
}

.production-plan-table-row .production-plan-table-priority.is-priority-medium {
  background: rgba(206, 105, 44, 0.78);
}

.production-plan-table-row .production-plan-table-priority.is-priority-normal {
  background: rgba(47, 143, 105, 0.82);
}

/* ——— Доска плана производства ———
   Второй вид вкладки: четыре колонки по очереди. Колонки и палитра приоритета
   повторяют доску Типографии — это одна и та же идея на двух направлениях. */
.production-plan-board-wrap {
  width: 100%;
  max-width: 100%;
  margin-top: 10px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}

.production-plan-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(210px, 1fr));
  gap: 10px;
  min-width: 880px;
}

.production-plan-board-column {
  --plan-priority: #777;
  overflow: hidden;
  border: 1px solid var(--border-mid);
  border-top: 3px solid var(--plan-priority);
  border-radius: var(--workspace-panel-radius);
  background: var(--surface-3);
}

.production-plan-board-column.is-p1 { --plan-priority: #c95555; }
.production-plan-board-column.is-p2 { --plan-priority: #ca7b47; }
.production-plan-board-column.is-p3 { --plan-priority: #c0a34a; }
.production-plan-board-column.is-p4 { --plan-priority: #786a9b; }

:root[data-theme="light"] .production-plan-board-column.is-p1 { --plan-priority: #a4453a; }
:root[data-theme="light"] .production-plan-board-column.is-p2 { --plan-priority: #8a5320; }
:root[data-theme="light"] .production-plan-board-column.is-p3 { --plan-priority: #7a6519; }
:root[data-theme="light"] .production-plan-board-column.is-p4 { --plan-priority: #5a4f78; }

.production-plan-board-column > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px;
  border-bottom: 1px solid var(--border-mid);
}

.production-plan-board-column > header strong {
  min-width: 24px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--workspace-tabstrip-bg);
  text-align: center;
}

.production-plan-board-list {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 120px;
  padding: 8px;
  transition: background-color 150ms ease, box-shadow 150ms ease;
}

.production-plan-board-list.is-drop-target {
  background: rgba(93, 148, 221, 0.12);
  box-shadow: inset 0 0 0 2px var(--focus-ring);
}

.production-plan-board-empty {
  padding: 10px 2px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  text-align: center;
}

.production-plan-board-card {
  display: grid;
  gap: 4px;
  padding: 11px;
  border: 1px solid var(--border-mid);
  border-left: 3px solid var(--plan-priority);
  border-radius: var(--workspace-control-radius);
  background: var(--bg-panel-soft);
  cursor: pointer;
}

.production-plan-board-card[draggable="true"] {
  cursor: grab;
}

.production-plan-board-card[draggable="true"]:active {
  cursor: grabbing;
}

.production-plan-board-card.is-dragging {
  opacity: 0.5;
}

/* Задача в работе не перетаскивается: её очередь уже ничего не решает. */
.production-plan-board-card.is-started {
  box-shadow: inset 3px 0 0 0 rgba(143, 159, 120, 0.62);
}

.production-plan-board-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.production-plan-board-card-top strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-plan-board-card-top b {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.production-plan-board-card-employee,
.production-plan-board-card-progress {
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.production-plan-board-card-employee.is-unassigned,
.production-plan-board-card-warn {
  color: var(--warn);
  font-size: var(--fs-caption);
}

/* Цвет текста плашки — из токена, а не жёстким светлым значением: на светлой
   теме почти белая надпись на бледно-зелёном фоне не читается. */
.production-plan-board-card-state {
  justify-self: start;
  padding: 2px 10px;
  border: 1px solid rgba(143, 159, 120, 0.24);
  border-radius: 999px;
  background: rgba(143, 159, 120, 0.16);
  color: var(--text-main);
  font-size: var(--fs-caption);
}

/* table-layout: fixed берёт ширины колонок из первой строки — шапки. Ширины на
   td (190px у названия, 112px у действий) до неё не доходили, и все десять
   колонок делили ширину поровну: «Действия» была шире числовых колонок. */
.production-plan-table thead th:first-child {
  width: 190px;
}

/* Ширины колонок задаёт colgroup: при table-layout: fixed и двухстрочной шапке
   объединённые ячейки первой строки иначе отдают весь запас последней колонке. */
.production-plan-table .production-plan-col-name { width: 19%; }
.production-plan-table .production-plan-col-quantity { width: 7%; }
.production-plan-table .production-plan-col-priority { width: 7%; }
.production-plan-table .production-plan-col-author { width: 12%; }
.production-plan-table .production-plan-col-metric { width: 9%; }
.production-plan-table .production-plan-col-actions { width: 112px; }

/* Все числовые колонки плана по центру, включая прочерки (09.09.2026). */
.production-plan-table tbody td:not(.production-plan-table-name):not(.production-plan-table-actions) {
  text-align: center;
}

.production-plan-label-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.production-plan-label-line + .production-plan-label-line {
  margin-top: 4px;
}

.production-plan-label-line small {
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.production-plan-table-actions {
  min-width: 112px;
  white-space: nowrap;
  text-align: center;
}

/* Две кнопки в столбик одной ширины: «Изменить» и «Этикетки» (09.09.2026). */
.production-plan-table-actions button + button {
  margin-top: 6px;
}

.production-plan-table-actions button {
  display: flex;
  width: 92px;
  margin-left: auto;
  margin-right: auto;
  min-width: 72px;
  min-height: 34px;
  margin: 0;
  padding: 6px 10px;
  justify-content: center;
  font-size: var(--fs-caption);
}

.production-plan-row-edit-card {
  width: 100%;
  max-width: min(640px, 100%);
  display: grid;
  gap: 10px;
}

.production-plan-row-edit-info {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.production-plan-row-edit-detail {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 6px 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-control-radius);
  background: rgba(255, 255, 255, 0.025);
}

.production-plan-row-edit-detail span {
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}

.production-plan-row-edit-detail strong {
  min-width: 0;
  color: var(--text-main);
  font-size: var(--fs-caption);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.production-plan-row-edit-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.production-plan-row-edit-fields label {
  min-width: 0;
  margin: 0;
}

.production-plan-row-edit-actions {
  margin-top: 0;
}

.production-plan-label-order-warning {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-control-radius);
  background: rgba(115, 168, 244, 0.14);
  color: var(--text-main);
  font-size: var(--fs-caption);
}

.production-plan-label-order-lines {
  display: grid;
  gap: 6px;
}

.production-plan-label-order-line {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 6px 8px;
  padding: 6px 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-control-radius);
  background: rgba(255, 255, 255, 0.025);
}

.production-plan-label-order-line.is-unknown {
  border-color: rgba(115, 168, 244, 0.5);
}

.production-plan-label-order-line label {
  min-width: 0;
  margin: 0;
  display: grid;
  gap: 4px;
}

.production-plan-label-order-line label > span {
  color: var(--muted, #aaa6a0);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.production-plan-label-order-title {
  grid-column: 1 / -1;
  color: var(--text-main);
  font-size: var(--fs-body);
  font-weight: 600;
}

.production-plan-label-order-line small {
  display: block;
  margin-top: 0;
  font-size: var(--fs-caption);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 560px) {
  .production-plan-label-order-line {
    grid-template-columns: minmax(0, 1fr);
  }
}

.production-plan-row-edit-card .label-print-form label small {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-caption);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 560px) {
  .production-plan-row-edit-info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .production-plan-row-edit-fields,
  .production-plan-row-edit-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .production-plan-row-edit-actions > * {
    width: 100%;
  }
}

.production-plan-table :is(th, td):nth-child(2),
.production-plan-table :is(th, td):nth-child(3) {
  width: 65px;
}

.production-plan-table :is(th, td):nth-child(4),
.production-plan-table :is(th, td):nth-child(5) {
  width: 78px;
}

.production-plan-table :is(th, td):nth-child(6) {
  width: 85px;
}

.production-plan-table :is(th, td):nth-child(7),
.production-plan-table :is(th, td):nth-child(8) {
  width: 105px;
}

.production-plan-table tbody td:nth-child(n + 2):nth-child(-n + 8) {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.production-plan-table :is(th, td):nth-child(9) {
  width: 112px;
}

.production-plan-table-wrap:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (max-width: 1023px) {
  .gas-mode-dept_head .production-plan-list-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gas-mode-dept_head .production-plan-list-controls .search-input,
  .gas-mode-dept_head .production-plan-list-controls .production-plan-add-button {
    grid-column: 1 / -1;
  }

  .production-plan-table {
    min-width: 1000px;
  }

  /* Карточный режим: таблица — стопка карточек, и настольная ширина в 1000px
     ей не нужна. С ней список плана уезжал вправо и «Изменить» вылезала за
     край карточки на телефоне. */
  .ui-table-cards .production-plan-table {
    min-width: 0;
    table-layout: auto;
  }
}
/* Roland equipment statistics. Uses the shared graphite UI contract. */
.roland-shell { display: grid; gap: 20px; max-width: 1480px; margin-inline: auto; }
.roland-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 8px 2px 2px; }
.roland-header h1 { margin: 4px 0 8px; font-size: clamp(28px, 4vw, 44px); line-height: 1.05; letter-spacing: -.035em; }
.roland-header p { margin: 0; color: var(--text-muted); max-width: 720px; }
.roland-eyebrow { color: var(--accent-text) !important; font-size: var(--fs-caption); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.roland-connection { flex: 0 0 auto; border: 1px solid var(--border-mid); border-radius: var(--radius-pill); padding: 9px 13px; background: var(--bg-panel); color: var(--text-soft); font-size: var(--fs-body); font-weight: 750; }
.roland-connection.is-online { border-color: var(--schedule-work-border); background: var(--schedule-work-bg); color: var(--schedule-work-accent); }
.roland-connection.is-offline { border-color: var(--schedule-noshow-border); background: var(--schedule-noshow-bg); color: var(--schedule-noshow-accent); }
.roland-filters { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)) auto; gap: 12px; align-items: end; padding: 16px; border: 1px solid var(--border-soft); border-radius: var(--workspace-panel-radius); background: var(--bg-panel); }
.roland-filters label,
.roland-shift-form label { display: grid; gap: 6px; min-width: 0; }
.roland-filters label > span,
.roland-shift-form label > span { color: var(--text-muted); font-size: var(--fs-caption); font-weight: 750; }
.roland-filters input,
.roland-filters select,
.roland-shift-form input,
.roland-shift-form select { width: 100%; min-height: 42px; border: 1px solid var(--border-mid); border-radius: var(--workspace-control-radius); background: var(--bg-control); padding: 8px 10px; color: var(--text-main); font: inherit; }
.roland-alert { padding: 13px 15px; border: 1px solid var(--schedule-noshow-border); border-radius: var(--workspace-panel-radius); background: var(--schedule-noshow-bg); color: var(--schedule-noshow-accent); }
.roland-empty { display: grid; gap: 5px; padding: 18px; border: 1px dashed var(--accent-border); border-radius: var(--workspace-shell-radius); background: var(--accent-soft); color: var(--text-soft); }
.roland-empty strong { color: var(--text-main); }
.roland-metrics { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: 12px; }
.roland-metric { display: grid; gap: 8px; min-height: 104px; padding: 16px; border: 1px solid var(--border-soft); border-radius: var(--workspace-panel-radius); background: var(--bg-panel); }
.roland-metric span { color: var(--text-muted); font-size: var(--fs-caption); font-weight: 750; }
.roland-metric strong { align-self: end; color: var(--text-main); font-size: clamp(21px, 2.5vw, 30px); line-height: 1; }
.roland-section { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--border-soft); border-radius: var(--workspace-shell-radius); background: var(--bg-panel); }
.roland-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.roland-section-head h2 { margin: 0 0 4px; font-size: var(--fs-h1); }
.roland-section-head p { margin: 0; color: var(--text-muted); font-size: var(--fs-body); }
.roland-two-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.roland-two-columns > div { min-width: 0; display: grid; align-content: start; gap: 14px; }
.roland-printer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.roland-printer-card { display: grid; gap: 15px; padding: 16px; border: 1px solid var(--border-soft); border-radius: var(--workspace-panel-radius); background: var(--bg-panel-soft); }
.roland-printer-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.roland-printer-card header > div { display: grid; gap: 3px; min-width: 0; }
.roland-printer-card header strong { font-size: var(--fs-h3); }
.roland-printer-card header span { color: var(--text-muted); font-size: var(--fs-caption); overflow-wrap: anywhere; }
.roland-state { border-radius: 999px; padding: 6px 9px; font-size: var(--fs-caption); white-space: nowrap; }
.roland-state.is-ready { background: var(--schedule-off-bg); color: var(--schedule-off-accent); }
.roland-state.is-printing { background: var(--schedule-work-bg); color: var(--schedule-work-accent); }
.roland-state.is-error,
.roland-state.is-offline { background: var(--schedule-noshow-bg); color: var(--schedule-noshow-accent); }
.roland-printer-card dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.roland-printer-card dl div { min-width: 0; }
.roland-printer-card dt { color: var(--text-muted); font-size: var(--fs-caption); font-weight: 750; text-transform: uppercase; }
.roland-printer-card dd { margin: 4px 0 0; font-size: var(--fs-body); overflow-wrap: anywhere; }
.roland-ink { display: flex; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border-soft); color: var(--text-muted); font-size: var(--fs-caption); }
.roland-ink strong { color: var(--text-main); }
.roland-shift-form { display: grid; grid-template-columns: 140px minmax(180px, 1.3fr) minmax(180px, 1fr) 120px 120px auto; gap: 10px; align-items: end; padding: 14px; border: 1px solid var(--border-soft); border-radius: var(--workspace-panel-radius); background: var(--bg-panel-soft); }
.roland-shift-actions { display: flex; gap: 8px; align-items: center; }
.roland-table-wrap { min-width: 0; overflow-x: auto; border: 1px solid var(--border-soft); border-radius: var(--workspace-panel-radius); }
.roland-table { width: 100%; border-collapse: collapse; min-width: 680px; }
.roland-table th { padding: 10px 12px; background: var(--bg-panel-soft); color: var(--text-muted); font-size: var(--fs-caption); font-weight: 800; text-align: left; text-transform: uppercase; letter-spacing: .035em; }
.roland-table td { padding: 11px 12px; border-top: 1px solid var(--border-soft); color: var(--text-main); font-size: var(--fs-body); vertical-align: top; }
.roland-table tbody tr:hover { background: var(--bg-control-hover); }
.roland-table-empty { padding: 22px; color: var(--text-muted); text-align: center; }
.roland-row-actions { display: flex; gap: 8px; }
.roland-row-actions button { border: 0; background: transparent; padding: 2px; color: var(--accent-text); font: inherit; font-weight: 700; cursor: pointer; }
.roland-row-actions button:last-child { color: var(--err-text); }
.roland-positive { color: var(--schedule-work-accent) !important; font-weight: 750; }
.roland-warning { color: var(--warn) !important; font-weight: 750; }
.roland-negative { color: var(--schedule-noshow-accent) !important; font-weight: 750; }
/* Стили отчёта Roland, общие для страницы и вкладки кабинета Типографии (08.09.2026). */
/* Период живёт в каноническом блоке .ui-date-range; прочие фильтры стоят рядом. */
.roland-filters { display: flex; flex-wrap: wrap; grid-template-columns: none; align-items: end; }
.roland-filters > .ui-date-range { flex: 1 1 420px; min-width: 0; }
.roland-filters > label { flex: 0 1 220px; min-width: 150px; }
.roland-ink-channels { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.roland-ink-channels > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.roland-ink-channels span { display: grid; gap: 1px; min-width: 0; color: var(--text-main); }
.roland-ink-channels small { color: var(--text-muted); font-size:var(--fs-caption); }
.roland-ink-channels strong { flex: 0 0 auto; font-size: var(--fs-caption); font-variant-numeric: tabular-nums; }
.roland-muted { color: var(--text-muted); font-size: var(--fs-caption); }
.roland-table { min-width: 1040px; }
.roland-job-cell { min-width: 260px; max-width: 440px; overflow-wrap: anywhere; }
.roland-copies { font-weight: 800; font-variant-numeric: tabular-nums; text-align: center; }
.roland-ink-usage { display: grid; gap: 3px; min-width: 148px; font-variant-numeric: tabular-nums; }
.roland-ink-usage > strong { margin-bottom: 2px; }
.roland-ink-usage span { display: flex; justify-content: space-between; gap: 12px; color: var(--text-soft); font-size:var(--fs-caption); }
.roland-ink-usage b { color: var(--text-muted); font-weight: 700; }
.roland-combined { margin-top: 8px; border-top: 1px solid var(--border-soft); padding-top: 7px; }
.roland-combined summary { width: fit-content; color: var(--accent); cursor: pointer; font-size: var(--fs-caption); font-weight: 750; }
.roland-combined summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: 3px; }
.roland-combined ol { display: grid; gap: 5px; margin: 8px 0 0; padding-left: 22px; }
.roland-combined li { padding-left: 2px; color: var(--text-soft); font-size: var(--fs-caption); }
.roland-combined li span { overflow-wrap: anywhere; }
.roland-combined li b { margin-left: 6px; color: var(--text-main); white-space: nowrap; }
.roland-error-level { display: inline-block; border-radius: var(--radius-pill); padding: 4px 7px; background: var(--schedule-noshow-bg); color: var(--schedule-noshow-accent); font-size: var(--fs-caption); font-weight: 800; }

@media (max-width: 1023px) {
  .roland-metrics { grid-template-columns: repeat(3, minmax(130px, 1fr)); }
  .roland-shift-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .roland-shift-actions { grid-column: span 3; }
}

@media (max-width: 768px) {
  .roland-shell { gap: 14px; }
  .roland-header { display: grid; }
  .roland-connection { justify-self: start; }
  .roland-filters { grid-template-columns: 1fr 1fr; }
  .roland-filters label:nth-child(3),
  .roland-filters button { grid-column: 1 / -1; }
  .roland-metrics { grid-template-columns: 1fr 1fr; }
  .roland-metric:last-child { grid-column: 1 / -1; }
  .roland-two-columns { grid-template-columns: 1fr; }
  .roland-shift-form { grid-template-columns: 1fr 1fr; }
  .roland-shift-form label:nth-child(2),
  .roland-shift-form label:nth-child(3),
  .roland-shift-actions { grid-column: 1 / -1; }
  .roland-section { padding: 14px; }
}

@media (max-width: 430px) {
  .roland-filters,
  .roland-shift-form,
  .roland-metrics { grid-template-columns: 1fr; }
  .roland-filters label,
  .roland-filters button,
  .roland-shift-form label,
  .roland-metric:last-child { grid-column: 1; }
  .roland-printer-card dl { grid-template-columns: 1fr; }
  .roland-shift-actions { grid-column: 1; align-items: stretch; flex-direction: column; }
}


/* Окно заказа: «Приоритет» слева, переключатель даты и поле даты столбиком справа. */
.production-plan-row-edit-card .label-print-form {
  gap: 8px 10px;
  margin-top: 0;
}

.label-print-form-stack {
  display: grid;
  gap: 8px;
  align-self: start;
}

.production-plan-row-edit-card .label-print-form textarea {
  min-height: 56px;
}

/* Окно заказа: все контролы одной высоты — поля, список приоритета и
   переключатель даты (09.09.2026). */
.production-plan-row-edit-card .production-plan-label-order-line input,
.production-plan-row-edit-card .label-print-form input,
.production-plan-row-edit-card .label-print-form select {
  box-sizing: border-box;
  height: 40px;
  min-height: 40px;
  padding-top: 0;
  padding-bottom: 0;
}

.production-plan-row-edit-card .fixed-date-toggle__buttons {
  box-sizing: border-box;
  height: 40px;
  padding: 3px;
}

.production-plan-row-edit-card .fixed-date-toggle__buttons .tab-btn {
  min-height: 0;
  height: 100%;
  padding-top: 0;
  padding-bottom: 0;
}

.production-plan-row-edit-card .label-print-form label > .date-picker-btn {
  height: 40px;
  min-height: 40px;
}

/* Системный центр · Оповещения о перемещениях: метрики, переключатели, две группы получателей. */
.sys-admin-notify.active { display: grid; gap: 14px; align-content: start; }
.sys-admin-notify .sys-admin-section-head,
.sys-admin-employees .sys-admin-section-head,
.sys-admin-integrations .sys-admin-section-head,
.sys-admin-settings .sys-admin-section-head { align-items: start; margin-bottom: 0; }
.sys-admin-notify .sys-admin-section-head > div:first-child,
.sys-admin-employees .sys-admin-section-head > div:first-child,
.sys-admin-integrations .sys-admin-section-head > div:first-child,
.sys-admin-settings .sys-admin-section-head > div:first-child { display: grid; gap: 4px; align-content: start; }
.sys-admin-section-actions { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; flex-shrink: 0; }
/* Системный центр · Сотрудники: переключатель направлений, сводка, список карточек. */
.sys-admin-employees.active { display: grid; gap: 14px; align-content: start; }
.sys-admin-employees__metrics { margin: 0; }
.sys-admin-employees .employee-directory-toolbar { margin: 0; }
.sys-admin-employees__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: var(--fs-caption);
  font-weight: 620;
  color: var(--text-muted);
  background: rgba(255, 255, 255, .08);
}
.sys-admin-employees__switch .tab-btn.active .sys-admin-employees__count { color: inherit; background: rgba(255, 255, 255, .14); }
.sys-admin-notify__metrics { margin: 0; }
.sys-admin-notify__switches { margin: 0; }
.sys-admin-notify__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sys-admin-notify__group {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-control-radius);
  background: #292928;
}
.sys-admin-notify__group-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.sys-admin-notify__group-head > .ico { font-size: var(--fs-h1); }
.sys-admin-notify__group-head > div { display: grid; gap: 2px; min-width: 0; }
.sys-admin-notify__group-head small { color: var(--text-muted); font-size: var(--fs-caption); }
.sys-admin-notify__cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.sys-admin-notify__events { display: grid; gap: 6px; margin-top: 10px; }
.sys-admin-notify__draft { display: grid; grid-template-columns: minmax(120px, 160px) minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.sys-admin-notify__note { margin: 10px 0 0; font-size: var(--fs-caption); }
/* Личное расписание получателя Склада: дни недели, окно часов, выходные даты. */
.sys-admin-notify__schedule { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 10px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.sys-admin-notify__days { display: flex; flex-wrap: wrap; gap: 4px; grid-column: 1 / -1; }
.sys-admin-notify__day {
  min-width: 34px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 8px;
  background: transparent; color: var(--text-muted); font: inherit; font-size: var(--fs-caption); cursor: pointer;
}
.sys-admin-notify__day.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--text-main); font-weight: 600; }
.sys-admin-notify__window { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--text-muted); }
.sys-admin-notify__window .ui-input { width: auto; min-width: 0; padding: 4px 6px; }
.sys-admin-notify__daysoff { grid-column: 1 / -1; display: grid; gap: 6px; }
.sys-admin-notify__daysoff small { color: var(--text-muted); font-size: var(--fs-caption); }
.sys-admin-notify__daysoff ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sys-admin-notify__daysoff li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--fs-caption); }
.sys-admin-notify__daysoff-add { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.sys-admin-notify__daysoff-add .ui-input { min-width: 0; padding: 4px 6px; }
/* Примеры текстов: видно, что именно получит сотрудник. */
.sys-admin-notify__samples { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; }
.sys-admin-notify__samples > summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.sys-admin-notify__samples-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-top: 12px; }
.sys-admin-notify__samples figure { margin: 0; display: grid; gap: 6px; align-content: start; }
.sys-admin-notify__samples figcaption { font-size: var(--fs-caption); color: var(--text-muted); }
.sys-admin-notify__samples pre { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: var(--fs-caption); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 1023px) {
  .sys-admin-notify__groups { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .sys-admin-notify__draft { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sys-admin-notify__schedule { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sys-admin-notify__daysoff-add { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sys-admin-notify__daysoff-add > button { grid-column: 1 / -1; }
  .sys-admin-notify__group-head { grid-template-columns: auto minmax(0, 1fr); }
  .sys-admin-notify__group-head > button { grid-column: 1 / -1; }
}
/* Системный центр · Интеграции: карточки как у сотрудников, иконка + название + описание. */
.sys-admin-integrations.active { display: grid; gap: 14px; align-content: start; }
.sys-admin-integrations__metrics { margin: 0; }
.sys-admin-integrations__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.sys-admin-integration-card__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; margin-bottom: 10px; }
.sys-admin-integration-card .admin-integration-icon { width: 36px; height: 36px; font-size: var(--fs-body-lg); font-weight: 800; }
.sys-admin-integration-card .admin-integration-icon[data-integration-icon="yandex"],
.sys-admin-integration-card .admin-integration-icon[data-integration-icon="marketplace_yandex"] { color: #ff7474; background: rgba(255, 75, 75, .12); border-color: rgba(255, 93, 93, .28); }
.sys-admin-integration-card .admin-integration-icon[data-integration-icon="marketplace_ozon"] { color: #82adff; background: rgba(50, 112, 255, .14); border-color: rgba(82, 135, 255, .3); }
.sys-admin-integration-card .admin-integration-icon[data-integration-icon="marketplace_wb"] { color: #ed79ed; background: rgba(198, 61, 205, .14); border-color: rgba(219, 83, 224, .3); }
.sys-admin-integration-card .admin-integration-icon[data-integration-icon="telegram"] { color: #72c8ff; }
.sys-admin-integration-card .admin-integration-icon[data-integration-icon="compass"] { color: #77d8bb; }
.sys-admin-integration-card .admin-integration-icon[data-integration-icon="bug_report"] { color: #f0b970; }
.sys-admin-integration-card__meta { display: block; margin-top: 8px; color: var(--text-muted); font-size: var(--fs-caption); line-height: 1.4; }
.sys-admin-integration-card__actions { justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sys-admin-integration-card__actions .employee-toggle { min-width: 0; }
.sys-admin-settings.active { display: grid; gap: 14px; align-content: start; }
.sys-admin-settings .employee-settings-panel { margin: 0; }

/* ——— Окно «Можем сделать»: остаток сырья по компонентам (16.09.2026) ——— */
.production-plan-capacity-btn,
.production-plan-capacity-btn:hover:not(:disabled),
.production-plan-capacity-btn:focus-visible,
.production-plan-capacity-btn:active {
  display: inline;
  min-height: 0;
  margin: 0;
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  outline: none;
  font: inherit;
  font-weight: 700;
  line-height: inherit;
  font-variant-numeric: tabular-nums;
  text-decoration: underline dotted rgba(255, 255, 255, 0.35);
  text-underline-offset: 3px;
  cursor: pointer;
}

.production-plan-capacity-btn:hover,
.production-plan-capacity-btn:focus-visible {
  color: #8fbcf4;
  text-decoration-color: #8fbcf4;
}

.production-plan-capacity-btn:focus-visible {
  outline: 2px solid var(--focus-ring, #8fbcf4);
  outline-offset: 2px;
}

:root[data-theme="light"] .production-plan-capacity-btn {
  text-decoration-color: rgba(42, 40, 35, 0.35);
}

.production-plan-capacity-card {
  width: 100%;
  max-width: min(680px, 100%);
  display: grid;
  gap: 10px;
}

.production-plan-capacity-body {
  display: grid;
  gap: 10px;
}

.production-plan-capacity-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--workspace-control-radius);
  background: rgba(255, 255, 255, 0.025);
}

.production-plan-capacity-total strong {
  font-size: var(--fs-title);
  font-variant-numeric: tabular-nums;
}

.production-plan-capacity-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-caption);
}

/* Окно приёмки записей. Колонки: позиция забирает всю свободную ширину (в ней
   селект задания, подсказка и ссылка), сотрудник и количество узкие. Ячейки
   выровнены по верху, иначе короткие «Сотрудник» и «Принято» висят по центру
   высокой строки. Ниже 768px строка разворачивается в карточку с подписями. */
.dh-post-table {
  table-layout: fixed;
}

.dh-post-table th,
.dh-post-table td {
  overflow-wrap: anywhere;
  vertical-align: top;
}

.dh-post-table th:nth-child(2),
.dh-post-table td:nth-child(2) {
  width: 168px;
}

.dh-post-table th:nth-child(3),
.dh-post-table td.dh-post-qty {
  width: 108px;
}

.dh-post-table .dh-post-qty input {
  width: 100%;
  max-inline-size: 96px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.dh-post-table .dh-post-task {
  display: block;
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.dh-post-table .dh-post-task.is-manual {
  color: var(--warn);
}

/* Выбор задания МойСклад для записи без задачи плана: предложенное задание
   подставлено, рядом подписанная ссылка на него. Состояние всегда видно
   текстом: подбор идёт, заданий нет, ошибка. */
.dh-post-table .dh-post-choice {
  display: grid;
  gap: 4px;
  margin-block-start: 6px;
  max-inline-size: 420px;
}

.dh-post-table .dh-post-choice label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.dh-post-table .dh-post-choice select {
  width: 100%;
  max-width: 100%;
  min-height: 36px;
  color: var(--text-main);
}

.dh-post-table .dh-post-choice .dh-post-task.is-loading {
  color: var(--text-muted);
}

.dh-post-error {
  display: block;
  color: var(--warn);
  font-size: var(--fs-caption);
  white-space: normal;
  overflow-wrap: anywhere;
}

.dh-card__state:has(.dh-post-error) {
  flex-wrap: wrap;
}

.dh-post-task-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  min-height: 24px;
  color: var(--accent);
  font-size: var(--fs-caption);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition-property: color;
  transition-duration: 150ms;
}

.dh-post-task-link:hover {
  color: var(--text-main);
}

.dh-post-task-link[hidden] {
  display: none;
}

@media (max-width: 768px) {
  .dh-post-table thead { display: none; }
  .dh-post-table,
  .dh-post-table tbody,
  .dh-post-table tr,
  .dh-post-table td { display: block; width: 100%; }
  .dh-post-table th:nth-child(2),
  .dh-post-table td:nth-child(2),
  .dh-post-table th:nth-child(3),
  .dh-post-table td.dh-post-qty { width: 100%; }
  .production-plan-capacity-table.dh-post-table td {
    padding-inline: 0;
    border-bottom: 0;
  }
  .dh-post-table tr + tr {
    margin-block-start: 12px;
    padding-block-start: 12px;
    border-top: 1px solid var(--border-soft);
  }
  .dh-post-table td:nth-child(2)::before {
    content: 'Сотрудник: ';
    color: var(--text-muted);
  }
  .dh-post-table td.dh-post-qty {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .dh-post-table td.dh-post-qty::before {
    content: 'Принято, шт.';
    white-space: nowrap;
    color: var(--text-muted);
  }
  .dh-post-table .dh-post-qty input { max-inline-size: 120px; }
  .dh-post-table .dh-post-choice { max-inline-size: none; }
}

.production-plan-capacity-table th,
.production-plan-capacity-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
}

.production-plan-capacity-table th {
  color: var(--text-muted);
  font-weight: 650;
}

.production-plan-capacity-table .is-number {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Ограничивающий компонент: из-за него цифра такая, какая есть. */
.production-plan-capacity-table tr.is-limiting td {
  color: var(--status-p1-text);
  background: rgba(196, 69, 69, 0.12);
  font-weight: 700;
}

.production-plan-capacity-missing {
  margin: 0;
  color: var(--warn);
  font-size: var(--fs-caption);
}

.production-plan-capacity-stamp {
  margin: 0;
  font-size: var(--fs-caption);
}

/* Текущий срез Сводной в окне «Остаток по складам». */
.production-plan-capacity-table tr.is-current td {
  font-weight: 700;
}

/* Метка «Доливка» рядом с позицией задачи плана (18.09.2026). */
.production-plan-refill-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--text-main);
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1.4;
  vertical-align: middle;
  white-space: nowrap;
}

/* В ячейке «Название» каждый span блочный: метка встаёт под названием по
   ширине текста, а не растягивается на всю колонку. */
.production-plan-table-name > .production-plan-refill-tag {
  display: table;
  margin: 3px 0 0;
  color: var(--text-main);
}

/* Производственное задание МойСклад под названием позиции в плане (17.09.2026). */
.production-plan-task-badge {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 500;
}

.production-plan-task-badge.is-warn {
  color: var(--warn);
}

.production-plan-task-badge.is-muted {
  opacity: 0.7;
}

.production-plan-task-link,
.production-plan-task-link:hover {
  color: inherit;
  text-decoration: underline dotted rgba(255, 255, 255, 0.35);
  text-underline-offset: 3px;
}

.production-plan-task-link:hover {
  color: #8fbcf4;
  text-decoration-color: #8fbcf4;
}

/* Системный центр → «Сотрудники», Склад и Закупки: добавление и выдача кода. */
.mc-staff-tools { display: grid; gap: 12px; }
.mc-staff-tools[hidden] { display: none; }
.mc-staff-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; padding: 14px 16px; border: 1px solid var(--border-mid); border-radius: 12px; background: var(--bg-panel-soft); }
.mc-staff-field { display: flex; flex-direction: column; gap: 6px; min-width: 220px; flex: 1 1 260px; }
.mc-staff-field span { font-size: 13px; font-weight: 600; color: var(--text-main); }
.mc-staff-form .ui-button { min-height: 44px; }
.mc-staff-access { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--accent-border); border-radius: 12px; background: var(--accent-soft); }
.mc-staff-access[hidden] { display: none; }
.mc-staff-access__qr { width: 160px; height: 160px; border-radius: 8px; background: #fff; }
.mc-staff-access__text { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; }
.mc-staff-access__code { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 26px; font-weight: 700; letter-spacing: .08em; user-select: all; }
.mc-staff-access__hint { color: var(--text-muted); font-size: 13px; }
.mc-staff-status { margin: 0; min-height: 20px; color: var(--text-muted); font-size: 13px; }
.mc-staff-status:empty { display: none; }
.mc-staff-status.is-error { color: var(--err); }
/* ============================================================================
   Mobile date-range fields (<=600px): stack the two date pickers into a single
   column so the full DD.MM.YYYY value fits. At 16px (the mobile control font)
   a side-by-side layout leaves each input ~72px wide and clips the year
   (e.g. "01.08.20"). Applies to the Production dept-head period filter.
   ============================================================================ */
@media (max-width: 560px) {
}

/* ============================================================================
   Mobile form controls (<=760px): font-size >=16px prevents iOS Safari from
   auto-zooming on focus; min-height 44px meets the touch-target requirement
   (UI_BLOCK_CONTRACT.md sect. 12.9 and the Adaptivity rules in
   UI_TEMPLATE_GUIDE.md). !important is used deliberately: the per-direction
   compact sizing is set through ID-level selectors (#admNavBar ...), so a
   maintainable single override needs to win against that specificity.
   ============================================================================ */
@media (max-width: 768px) {
  .nav-date-input,
  .ui-date-range__input,
  .search-input,
  .ui-control,
  #admNavBar select,
  .admin-filter-field select,
  .admin-period-filter select,
  .ok-field input,
  .ok-field select,
  .ok-field textarea,
  .ok-filterbar input,
  .ok-filterbar select,
  .ok-search {
    font-size: var(--fs-h3) !important;
    min-height: 44px !important;
  }
}

/* ============================================================================
   Icon system: monochrome inline SVG via CSS mask (inherits currentColor).
   Replaces decorative emoji in static UI. Size follows font-size (1em).
   Usage: <span class="ico ico-chart" aria-hidden="true"></span>
   ============================================================================ */
.ico {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask: var(--ico) no-repeat center / contain;
  mask: var(--ico) no-repeat center / contain;
}
.ico-chart { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M18 17V9'/%3E%3Cpath d='M13 17V5'/%3E%3Cpath d='M8 17v-3'/%3E%3C/svg%3E"); }
.ico-receipt { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1-2-1Z'/%3E%3Cpath d='M8 7h8'/%3E%3Cpath d='M8 11h8'/%3E%3Cpath d='M8 15h5'/%3E%3C/svg%3E"); }
.ico-printer { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V2h12v7'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8' rx='1'/%3E%3C/svg%3E"); }
.ico-flask { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6'/%3E%3Cpath d='M10 3v6l-5 9a2 2 0 0 0 2 3h10a2 2 0 0 0 2-3l-5-9V3'/%3E%3Cpath d='M7 15h10'/%3E%3C/svg%3E"); }
.ico-drop { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.7s-6.5 7.1-6.5 11.8a6.5 6.5 0 0 0 13 0C18.5 9.8 12 2.7 12 2.7z'/%3E%3C/svg%3E"); }
.ico-search { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E"); }
.ico-users { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.ico-calendar { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E"); }
.ico-calendar-days { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3C/svg%3E"); }
.ico-upload { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M7 9l5-5 5 5'/%3E%3Cpath d='M12 4v12'/%3E%3C/svg%3E"); }
.ico-download { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E"); }
.ico-link { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1'/%3E%3Cpath d='M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1'/%3E%3C/svg%3E"); }
.ico-list { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M9 12h6'/%3E%3Cpath d='M9 16h6'/%3E%3C/svg%3E"); }
.ico-trend { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M19 9l-5 5-4-4-3 3'/%3E%3C/svg%3E"); }
.ico-wrench { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.6 2.6-2.3-.6-.6-2.3 2.5-2.4Z'/%3E%3C/svg%3E"); }
.ico-box { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5 9 5 9-5Z'/%3E%3Cpath d='M3 8v8l9 5 9-5V8'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E"); }
.ico-pin { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.ico-plus { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }
.ico-wallet { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12V7H5a2 2 0 0 1 0-4h14v4'/%3E%3Cpath d='M3 5v14a2 2 0 0 0 2 2h16v-5'/%3E%3Cpath d='M18 12a2 2 0 0 0 0 4h4v-4Z'/%3E%3C/svg%3E"); }
.ico-star { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7Z'/%3E%3C/svg%3E"); }
.ico-file { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z'/%3E%3Cpath d='M14 2v6h6'/%3E%3C/svg%3E"); }
.ico-edit { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E"); }
.ico-factory { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 20h20'/%3E%3Cpath d='M4 20V9l6 4V9l6 4V6l4 2v12'/%3E%3Cpath d='M4 13h4'/%3E%3C/svg%3E"); }
.ico-tag { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12l-8 8-9-9V3h8l9 9Z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E"); }
.ico-user { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M6 21v-1a6 6 0 0 1 12 0v1'/%3E%3C/svg%3E"); }
.ico-folder { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7l-2-3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E"); }
.ico-puzzle { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3a2 2 0 0 1 4 0c0 1 1 1 2 1h3v3c0 1 0 2 1 2a2 2 0 0 1 0 4c-1 0-1 1-1 2v3h-3c-1 0-2 0-2 1a2 2 0 0 1-4 0c0-1-1-1-2-1H4v-3c0-1 0-2-1-2a2 2 0 0 1 0-4c1 0 1-1 1-2V4h3c1 0 2 0 2-1Z'/%3E%3C/svg%3E"); }
.ico-pushpin { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17v5'/%3E%3Cpath d='M9 10.8V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v5.8l2 3.2H7l2-3.2Z'/%3E%3C/svg%3E"); }
.ico-zap { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7l1-8Z'/%3E%3C/svg%3E"); }
.ico-message { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H8l-5 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z'/%3E%3C/svg%3E"); }
.ico-lock { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }
.ico-logout { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E"); }
.ico-cards { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='4' rx='1'/%3E%3Cpath d='M5 8v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8'/%3E%3Cpath d='M10 12h4'/%3E%3C/svg%3E"); }
.ico-gear { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-1.8-.3 1.6 1.6 0 0 0-1 1.5V21a2 2 0 0 1-4 0v-.1a1.6 1.6 0 0 0-1-1.5 1.6 1.6 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.6 1.6 0 0 0 .3-1.8 1.6 1.6 0 0 0-1.5-1H3a2 2 0 0 1 0-4h.1a1.6 1.6 0 0 0 1.5-1 1.6 1.6 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.6 1.6 0 0 0 1.8.3H9a1.6 1.6 0 0 0 1-1.5V3a2 2 0 0 1 4 0v.1a1.6 1.6 0 0 0 1 1.5 1.6 1.6 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0-.3 1.8V9a1.6 1.6 0 0 0 1.5 1H21a2 2 0 0 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1Z'/%3E%3C/svg%3E"); }
.ico-alert { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.2 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.2a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
.ico-check { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.ico-plane { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2Z'/%3E%3C/svg%3E"); }
.ico-compass { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m16.2 7.8-2 6.3-6.4 2.1 2-6.3z'/%3E%3C/svg%3E"); }
.ico-card { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E"); }
.ico-chevron-down { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.ico-arrow-left { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3C/svg%3E"); }
.ico-arrow-right { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E"); }
.ico-chevron-right { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); }
.ico-arrow-up-right { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E"); }
.ico-arrow-up { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3C/svg%3E"); }
.ico-arrow-down { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E"); }
.ico-sort { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3C/svg%3E"); }
.ico-eye { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.ico-eye-off { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.6 6.2A9.7 9.7 0 0 1 12 6c6.4 0 10 7 10 7a17 17 0 0 1-3 3.9'/%3E%3Cpath d='M6.6 6.9A17 17 0 0 0 2 13s3.6 7 10 7a9.6 9.6 0 0 0 4.4-1'/%3E%3Cpath d='M9.9 10.1a3 3 0 0 0 4.2 4.2'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E"); }
.ico-clock { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.ico-menu { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16'/%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M4 18h16'/%3E%3C/svg%3E"); }
.ico-grid { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E"); }
.ico-archive { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='4' rx='1'/%3E%3Cpath d='M4 8v11a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V8'/%3E%3Cpath d='M10 12h4'/%3E%3C/svg%3E"); }
.ico-rows { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M3 14h18'/%3E%3C/svg%3E"); }
.ico-refresh { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 2v6h-6'/%3E%3Cpath d='M3 12a9 9 0 0 1 15-6.7L21 8'/%3E%3Cpath d='M3 22v-6h6'/%3E%3Cpath d='M21 12a9 9 0 0 1-15 6.7L3 16'/%3E%3C/svg%3E"); }
.ico-cloud { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 19a4.5 4.5 0 0 0 .5-9 6 6 0 0 0-11.6-1.5A4 4 0 0 0 6.5 19h11Z'/%3E%3C/svg%3E"); }
.ico-mail { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E"); }
.ico-close { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='M6 6l12 12'/%3E%3C/svg%3E"); }
.ico + * { margin-left: 0; }

/* Search inputs: muted magnifier as background (placeholder cannot hold markup) */
.has-search-icon,
input#admExportsSearch,
input#dhExportsSearch {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239b9995' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 16px 16px;
  padding-left: 38px;
}

/* Payroll panel styles */
.payroll-panel { min-height: auto; }

.payroll-panel-head { display: block; margin-bottom: 12px; }
.payroll-panel-head h2 { margin: 0 0 10px; font-size: var(--fs-h2); font-weight: 700; }
.payroll-toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.payroll-month-selector { margin: 0; }
.payroll-month-selector label, .payroll-month-selector { display: flex; align-items: center; gap: 8px; }
.payroll-month-selector span { font-size: var(--fs-caption); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted, #9d9992); }
.payroll-month-selector select { min-width: 180px; }

/* View toggle: Карточки / Таблица */
.payroll-viewtoggle { display: inline-flex; padding: 3px; gap: 3px; border: 1px solid var(--border-soft, rgba(255,255,255,0.09)); border-radius: var(--workspace-panel-radius); background: var(--surface-2); }
.payroll-viewtoggle .pvt { appearance: none; border: 0; background: transparent; color: var(--text-muted, #9d9992); font: inherit; font-weight: 650; font-size: var(--fs-body); padding: 6px 14px; border-radius: var(--workspace-control-radius); cursor: pointer; transition: background 0.12s, color 0.12s; }
.payroll-viewtoggle .pvt:hover { color: var(--text-main, #f1eee8); }
.payroll-viewtoggle .pvt.is-active { background: rgba(79,140,255,0.18); color: var(--status-pending-text); box-shadow: inset 0 0 0 1px rgba(79,140,255,0.45); }

/* Collapsible spoiler header */
.payroll-period, .payroll-monthly-section { margin-top: 14px; }
.payroll-summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; padding: 11px 14px; background: var(--bg-panel); border: 1px solid var(--border-soft, rgba(255,255,255,0.09)); border-radius: var(--workspace-panel-radius); user-select: none; transition: background 0.12s, border-color 0.12s; }
.payroll-summary:hover { background: rgba(79,140,255,0.09); border-color: rgba(79,140,255,0.4); }
.payroll-summary::-webkit-details-marker { display: none; }
.payroll-summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--text-muted, #9d9992); border-bottom: 2px solid var(--text-muted, #9d9992); transform: rotate(45deg); transition: transform 0.15s; flex: 0 0 auto; margin-top: -2px; }
details[open] > .payroll-summary::before { transform: rotate(-135deg); margin-top: 2px; }
.payroll-summary__title { font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.payroll-summary__meta { margin-left: auto; font-size: var(--fs-caption); font-weight: 700; color: var(--status-done-text); font-variant-numeric: tabular-nums; }
.payroll-scroll { overflow-x: auto; margin-top: 8px; }

/* ---- Cards view ---- */
.payroll-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-top: 8px; }
.payroll-card { display: block; width: 100%; text-align: left; font: inherit; color: var(--text-main, #f1eee8); background: var(--bg-panel); border: 1px solid var(--border-soft, rgba(255,255,255,0.09)); border-radius: var(--workspace-panel-radius); padding: 14px 16px; cursor: pointer; transition: border-color 0.12s, background 0.12s, transform 0.08s; }
.payroll-card:hover { border-color: rgba(79,140,255,0.55); background: var(--bg-control-hover); }
.payroll-card:active { transform: translateY(1px); }
.payroll-card:focus-visible { outline: 2px solid #4f8cff; outline-offset: 2px; }
.payroll-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.payroll-card__name { font-weight: 750; font-size: var(--fs-body-lg); }
.payroll-card__sal { color: var(--text-muted, #9d9992); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; }
.payroll-card__stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px 12px; }
.payroll-card__stats > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.payroll-card__stats .k { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint, #6f6b64); }
.payroll-card__stats .v { font-weight: 650; font-variant-numeric: tabular-nums; }
.payroll-card__stats .v--cmt { font-weight: 400; font-size: var(--fs-caption); color: var(--text-muted, #9d9992); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.payroll-card__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--border-soft, rgba(255,255,255,0.09)); }
.payroll-card__foot .lbl { display: block; font-size: var(--fs-caption); color: var(--text-muted, #9d9992); }
.payroll-card__foot .big { font-size: var(--fs-h1); font-weight: 800; font-variant-numeric: tabular-nums; }
.payroll-card__foot .right { text-align: right; }
.payroll-card__foot .recv { font-size: var(--fs-body-lg); font-weight: 700; color: var(--status-done-text); font-variant-numeric: tabular-nums; }

/* ---- Table view (Excel grid) ---- */
.payroll-panel .payroll-grid-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 1080px; font-size: var(--fs-body); font-variant-numeric: tabular-nums; border: 1px solid var(--border-soft, rgba(255,255,255,0.09)); border-radius: var(--workspace-panel-radius); overflow: hidden; }
.payroll-panel .payroll-grid-table.payroll-monthly { min-width: 440px; }
.payroll-panel .payroll-grid-table th, .payroll-panel .payroll-grid-table td { padding: 7px 11px !important; border-right: 1px solid var(--border-soft, rgba(255,255,255,0.07)); border-bottom: 1px solid var(--border-soft, rgba(255,255,255,0.07)); text-align: right; white-space: nowrap; }
.payroll-panel .payroll-grid-table th:last-child, .payroll-panel .payroll-grid-table td:last-child { border-right: 0; }
.payroll-panel .payroll-grid-table thead th { background: var(--bg-table-head) !important; color: var(--text-muted, #9d9992) !important; font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; vertical-align: bottom; line-height: 1.25; white-space: normal; position: sticky; top: 0; z-index: 2; }
.payroll-panel .payroll-grid-table th:first-child, .payroll-panel .payroll-grid-table td.pg-name { text-align: left; }
.payroll-panel .payroll-grid-table td.pg-name { font-weight: 650; position: sticky; left: 0; background: var(--bg-table-sticky) !important; box-shadow: 1px 0 0 var(--border-soft, rgba(255,255,255,0.09)); z-index: 1; }
.payroll-panel .payroll-grid-table thead th:first-child { z-index: 3; background: var(--bg-table-head) !important; }
.payroll-panel .payroll-grid-table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.02) !important; }
.payroll-panel .payroll-grid-table tbody tr:nth-child(even) td.pg-name { background: var(--bg-table-sticky-alt) !important; }
.payroll-panel .payroll-grid-table tbody tr:hover td { background: rgba(79,140,255,0.09) !important; }
.payroll-panel .payroll-grid-table tr.payroll-total td { background: var(--bg-table-total) !important; font-weight: 800 !important; border-top: 2px solid rgba(255,255,255,0.18); }
.payroll-panel .payroll-grid-table .money { color: rgb(123,179,123); }

/* ---- Column colour groups (mirror the original spreadsheet, tuned for dark UI) ---- */
.payroll-panel .payroll-grid-table thead th.pg-g-hours { background: rgba(79,140,255,0.22) !important; color: #cfddff !important; }
.payroll-panel .payroll-grid-table thead th.pg-g-adjust { background: rgba(224,168,74,0.22) !important; color: #f0d9ac !important; }
.payroll-panel .payroll-grid-table thead th.pg-g-send { background: rgba(43,192,176,0.30) !important; color: #d7f5ef !important; }
.payroll-panel .payroll-grid-table thead th.pg-g-recv { background: rgba(112,182,112,0.24) !important; color: #d4ecd0 !important; }
.payroll-panel .payroll-grid-table thead th.pg-g-sentcol { background: rgba(198,140,214,0.20) !important; color: #ecd6f2 !important; }
.payroll-panel .payroll-grid-table td.pg-g-hours { background: rgba(79,140,255,0.05) !important; }
.payroll-panel .payroll-grid-table td.pg-g-adjust { background: rgba(224,168,74,0.055) !important; }
.payroll-panel .payroll-grid-table td.pg-g-recv { background: rgba(112,182,112,0.06) !important; color: rgb(140,196,140); }
.payroll-panel .payroll-grid-table td.pg-g-sentcol { background: rgba(198,140,214,0.05) !important; text-align: center; }
/* Emphasised "Итого отправить" — the number that gets paid out */
.payroll-panel .payroll-grid-table td.pg-emphasis { background: rgba(43,192,176,0.15) !important; color: #d7f5ef; font-weight: 800; font-size: var(--fs-body-lg); box-shadow: inset 1px 0 0 rgba(43,192,176,0.5), inset -1px 0 0 rgba(43,192,176,0.5); }
.payroll-panel .payroll-grid-table tr.payroll-total td.pg-emphasis { background: rgba(43,192,176,0.22) !important; }
/* Sent toggle + pill */
.payroll-sent-toggle { display: inline-flex; align-items: center; cursor: pointer; }
.payroll-sent-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.payroll-sent-pill { display: inline-block; min-width: 42px; text-align: center; padding: 4px 10px; border-radius: 999px; font-size: var(--fs-caption); font-weight: 700; color: var(--text-muted, #9d9992); background: #2d2b29; border: 1px solid rgba(255,255,255,0.16); transition: background 0.12s, color 0.12s, border-color 0.12s; }
.payroll-sent-toggle input:checked + .payroll-sent-pill, .payroll-sent-pill.is-on { background: rgba(96,178,96,0.22); color: #b8e6b0; border-color: rgba(96,178,96,0.55); }
.payroll-sent-toggle input:focus-visible + .payroll-sent-pill { outline: 2px solid #4f8cff; outline-offset: 2px; }
/* Sent row — green wash across the whole row (wins over zebra + group tints) */
.payroll-panel .payroll-grid-table tbody tr.is-sent td { background: rgba(96,170,96,0.14) !important; }
.payroll-panel .payroll-grid-table tbody tr.is-sent td.pg-name { background: rgba(96,170,96,0.20) !important; }
.payroll-panel .payroll-grid-table tbody tr.is-sent td.pg-emphasis { background: rgba(70,196,150,0.24) !important; }
.pd-sent-row { flex-direction: row !important; align-items: center; gap: 8px !important; }
.pd-sent-row input { width: auto; }
.pd-sent-row span { text-transform: none !important; letter-spacing: 0 !important; font-size: var(--fs-body) !important; color: var(--text-main, #f1eee8) !important; }
.payroll-card__sent { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #b8e6b0; background: rgba(96,178,96,0.20); border: 1px solid rgba(96,178,96,0.5); vertical-align: middle; }
.payroll-card.is-sent { border-color: rgba(96,178,96,0.5); }

.payroll-edit { width: 100%; min-width: 72px; max-width: 120px; padding: 5px 8px; text-align: right; font-variant-numeric: tabular-nums; font-size: var(--fs-body); color: var(--text-main, #f1eee8) !important; background: #2d2b29 !important; border: 1px solid rgba(255,255,255,0.22) !important; border-radius: var(--workspace-control-radius); }
.payroll-edit-comment { max-width: 200px; text-align: left; }
.payroll-edit:hover { border-color: rgba(79,140,255,0.55) !important; }
.payroll-edit:focus { outline: none; border-color: #4f8cff !important; box-shadow: 0 0 0 3px rgba(79,140,255,0.25); }

/* ---- Detail modal ---- */
.payroll-detail-overlay { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); }
.payroll-detail-overlay[hidden] { display: none; }
.payroll-detail { width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; background: var(--bg-panel); border: 1px solid var(--border-mid, rgba(255,255,255,0.14)); border-radius: var(--workspace-shell-radius); padding: 18px 20px; box-shadow: 0 24px 60px rgba(0,0,0,0.5); }
.pd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.pd-name { font-size: var(--fs-h2); font-weight: 750; }
.pd-sub { color: var(--text-muted, #9d9992); font-size: var(--fs-caption); margin-top: 2px; }
.pd-close { appearance: none; border: 0; background: transparent; color: var(--text-muted, #9d9992); font-size: var(--fs-h2); line-height: 1; cursor: pointer; padding: 4px 6px; border-radius: var(--workspace-control-radius); }
.pd-close:hover { background: rgba(255,255,255,0.07); color: var(--text-main, #f1eee8); }
.pd-rows { display: flex; flex-direction: column; gap: 2px; }
.pd-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border-soft, rgba(255,255,255,0.07)); }
.pd-row:last-child { border-bottom: 0; }
.pd-k { color: var(--text-muted, #9d9992); font-size: var(--fs-body); }
.pd-v { font-weight: 650; font-variant-numeric: tabular-nums; }
.pd-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.pd-edit label { display: flex; flex-direction: column; gap: 5px; }
.pd-edit label.pd-cmt { grid-column: 1 / -1; }
.pd-edit span { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted, #9d9992); }
.pd-edit input { padding: 8px 10px; background: #2d2b29; border: 1px solid rgba(255,255,255,0.22); border-radius: var(--workspace-control-radius); color: var(--text-main, #f1eee8); font: inherit; font-variant-numeric: tabular-nums; }
.pd-edit input:focus { outline: none; border-color: #4f8cff; box-shadow: 0 0 0 3px rgba(79,140,255,0.25); }
.pd-out { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-mid, rgba(255,255,255,0.14)); display: flex; flex-direction: column; gap: 8px; }
.pd-out > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pd-big { font-size: var(--fs-h1); font-weight: 800; }
.pd-recv { color: rgb(123,179,123); font-weight: 700; }
.pd-actions { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.pd-status { font-size: var(--fs-caption); color: var(--text-muted, #9d9992); }

.payroll-loading, .payroll-empty, .payroll-error { padding: 18px 4px; color: var(--text-muted, #9d9992); }
.payroll-error { color: var(--ok-danger, #c56559); }

@media (max-width: 768px) {
  .payroll-cards { grid-template-columns: 1fr; }
  .payroll-panel .payroll-grid-table { font-size: var(--fs-caption); }
  .payroll-panel .payroll-grid-table th, .payroll-panel .payroll-grid-table td { padding: 6px 8px !important; }
  .pd-edit { grid-template-columns: 1fr; }
}

/* Выпадающий список с поиском: поле ввода фильтрует, выбор — только из списка.
   Используется вместо модального выбора позиции в кабинете сотрудника. */
.ui-combobox {
  position: relative;
  display: block;
  min-width: 0;
}

.ui-combobox__input {
  width: 100%;
  min-height: 44px;
  padding: 10px 38px 10px 12px;
  color: var(--text-main);
  background: var(--bg-input);
  border: 1px solid var(--border-mid);
  border-radius: var(--workspace-control-radius);
  box-shadow: var(--btn-shadow);
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 620;
  line-height: 1.2;
}

.ui-combobox__input::placeholder {
  color: var(--text-muted);
  font-weight: 560;
}

.ui-combobox__input:focus {
  outline: none;
  border-color: rgba(115, 166, 255, 0.7);
  box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.16);
}

.ui-combobox__toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  display: inline-flex;
  width: 30px;
  min-height: 30px;
  padding: 0;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  color: var(--text-muted);
  background: none;
  border: 0;
  box-shadow: none;
  font-size: var(--fs-body-lg);
}

.ui-combobox__toggle:hover:not(:disabled) {
  color: var(--text-main);
  background: none;
  border: 0;
  box-shadow: none;
  transform: translateY(-50%);
}

.ui-combobox__toggle:active {
  transform: translateY(-50%);
}

.ui-combobox__list {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 280px;
  padding: 5px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg-panel);
  border: 1px solid var(--border-mid);
  border-radius: var(--workspace-panel-radius);
  box-shadow: var(--shadow-panel);
}

.ui-combobox__option {
  display: block;
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  color: var(--text-main);
  background: none;
  border: 0;
  border-radius: var(--workspace-control-radius);
  box-shadow: none;
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

.ui-combobox__option:hover,
.ui-combobox__option.is-active {
  color: var(--text-main);
  background: var(--surface-hover);
  border: 0;
  box-shadow: none;
  transform: none;
}

.ui-combobox__option[aria-selected="true"] {
  background: var(--surface-active);
  box-shadow: inset 3px 0 0 rgba(115, 166, 255, 0.92);
}

.ui-combobox__empty {
  padding: 9px 10px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  line-height: 1.35;
}

/* Контентный блок оформлен так же, как меню: контур, заливка и тень.
   Одно правило на кабинет сотрудника и дашборд руководителя. Действует только на десктопе. */
@media (min-width: 1024px) {
  body:is(.gas-mode-employee, .gas-mode-dept_head) .card > .tab-panel.active {
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid var(--border-soft);
    /* Радиус повторяет меню; !important — так же, как в самом меню, иначе
       общее правило .tab-panel возвращает мелкий радиус панели. */
    border-radius: 6px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
      var(--bg-sidebar);
    box-shadow: var(--workspace-block-shadow);
  }
}

/* Окно QR работает в двух режимах: живая камера и разбор фотографии.
   В режиме фото видоискатель не нужен — иначе оба входа выглядят одинаково. */
.qr-scanner-modal[data-qr-mode="photo"] .qr-scanner-viewport {
  display: none;
}

.qr-scanner-modal[data-qr-mode="photo"] .qr-scanner-status {
  margin-top: 0;
}

/* ============================================================================
   Light theme overrides for better contrast and readability.
   ============================================================================ */
:root[data-theme="light"] .ui-date-range__preset {
  background: var(--surface-2);
  border-color: var(--border-mid);
}

:root[data-theme="light"] .ui-date-range__preset:is(:hover, :focus-visible),
:root[data-theme="light"] .ui-date-range__preset.is-active {
  background: var(--btn-blue-soft);
  border-color: var(--btn-blue);
  color: var(--text-main);
}

/* Enhanced table contrast in light theme: tighter borders, proper backgrounds. */
:root[data-theme="light"] th {
  background: var(--bg-table-head);
  color: var(--text-main);
  border-bottom-color: var(--border-mid);
}

:root[data-theme="light"] td {
  border-bottom-color: var(--border-soft);
}

:root[data-theme="light"] tr:hover td {
  background: var(--surface-hover);
}

:root[data-theme="light"] .production-plan-table th,
:root[data-theme="light"] .production-plan-table td {
  border-right-color: var(--border-soft);
  border-bottom-color: var(--border-soft);
}

:root[data-theme="light"] .production-plan-table thead th {
  background: var(--bg-table-head);
  color: var(--text-main);
}

:root[data-theme="light"] .production-plan-table-row:nth-child(odd) td {
  background: var(--surface-1);
}

:root[data-theme="light"] .production-plan-table-row:nth-child(odd) .production-plan-table-name {
  background: var(--bg-table-sticky-alt);
}

:root[data-theme="light"] .production-plan-table-row:hover td {
  background: var(--surface-hover);
}

/* Icon contrast: ensure icons are readable in both light and dark themes. */
:root[data-theme="light"] .ico {
  color: var(--text-soft);
}

/* Higher-contrast icons in headers, buttons, and active elements. */
:root[data-theme="light"] th .ico,
:root[data-theme="light"] button .ico,
:root[data-theme="light"] .is-active .ico {
  color: var(--text-main);
}

/* Table cell icons should match text softness for secondary information. */
:root[data-theme="light"] td .ico {
  color: var(--text-soft);
}

/* Переключатель «Этикетка определённой даты»: текст кнопок по центру (09.09.2026). */
.fixed-date-toggle__buttons.ui-section-tabs.ui-tabs--cards > .ui-tab {
  justify-content: center;
  text-align: center;
}

/* Исключённая запись остаётся в журнале, но читается как фон: приглушена, а
   причина подписана под позицией (14.09.2026). */
.label-print-history-table tr.is-excluded {
  opacity: 0.55;
}

.label-print-history-table tr.is-excluded .label-print-number {
  text-decoration: line-through;
}

.label-print-excluded-note {
  display: block;
  margin-top: 2px;
  color: var(--muted, #aaa6a0);
  font-size: var(--fs-caption);
}

/* Переключатель «Таблица / Доска» в Плане производства и Типографии (16.09.2026).
   Кнопки — штатные вкладки ui-kit: выбранный вид выделяется так же, как
   «Дашборд» или «План производства», синей заливкой и полосой слева. Внутри
   панели управления у набора вкладок нет своей рамки и отступов, иначе он
   выглядит вложенной карточкой рядом с полем поиска. */
.gas-mode-dept_head .dh-view-switch.ui-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.gas-mode-dept_head .dh-view-switch.ui-section-tabs.ui-tabs--cards > .ui-tab {
  justify-content: center;
  text-align: center;
}

/* План: поиск и переключатель в одну строку, «Добавить позицию» — на всю
   ширину под ними. Раньше кнопка занимала одну колонку из двух. */
.gas-mode-dept_head .production-plan-list-controls {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
}

.gas-mode-dept_head .production-plan-list-controls > .production-plan-add-button {
  grid-column: 1 / -1;
}

/* Общее правило узких экранов задаёт всем детям панели внутренний отступ;
   набору вкладок он не нужен — отступы есть у самих кнопок. */
.gas-mode-dept_head .production-plan-list-controls > .dh-view-switch {
  padding: 0;
}

/* Типография: поиск, фильтр состояния и переключатель вида. */
.gas-mode-dept_head .label-print-toolbar {
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 240px) minmax(220px, 280px);
  align-items: stretch;
}

.gas-mode-dept_head .dh-label-print-board {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

/* Задача не производства видна на доске руководителя, но не перетаскивается. */
.gas-mode-dept_head .dh-label-print-board .label-print-task-card.is-locked {
  cursor: default;
  opacity: 0.72;
}

.gas-mode-dept_head .dh-label-print-board .label-print-task-card[draggable="true"] {
  cursor: grab;
}

/* На планшете и телефоне каждый элемент панели — во всю строку, включая
   переключатель вида. */
@media (max-width: 1023px) {
  .gas-mode-dept_head .production-plan-list-controls,
  .gas-mode-dept_head .label-print-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .gas-mode-dept_head .production-plan-list-controls > *,
  .gas-mode-dept_head .label-print-toolbar > * {
    grid-column: 1 / -1;
  }
}

/* Фильтр по приоритету — только в табличном виде Типографии. У блока свой
   display: grid, который перебивает атрибут hidden, поэтому скрытие задано явно. */
.gas-mode-dept_head .label-print-priority-filters[hidden],
.gas-mode-dept_head .dh-label-print-board[hidden] {
  display: none;
}