/* ==========================================================================
   Аверс Технолоджи — design tokens + app shell
   (источник: avers-sales-doc; логика страниц не затрагивается)
   ========================================================================== */
:root {
    --theme-primary: #7c818a;
    --color-navy: var(--theme-primary);
    --color-primary: var(--theme-primary);
    --color-primary-dark: #6a6f78;
    --color-accent: #d81818;
    --color-accent-hover: #bc0000;
    --color-accent-light: #fceded;
    --color-corner: #d81818;
    --color-corner-neutral: #1f2937;
    --color-bg: #f3f4f6;
    --color-surface: #ffffff;
    --color-surface-muted: #f9fafb;
    --color-border: #e5e7eb;
    --color-border-strong: #d1d5db;
    --color-text: #1f2937;
    --color-text-muted: #6b7280;
    --color-text-secondary: #4b5563;
    --color-text-on-dark: #ffffff;
    --color-danger: #dc2626;
    --color-warning: #b45309;
    --color-sidebar-border: rgba(255, 255, 255, 0.08);
    --color-sidebar-hover: rgba(255, 255, 255, 0.08);
    --color-sidebar-active: #db4040;
    --color-sidebar-text: #ffffff;
    --ui-primary-bg: #10b981;
    --ui-primary-bg-hover: #059669;
    --ui-primary-text: #ffffff;
    --ui-create-project-bg: #2563eb;
    --ui-create-project-bg-hover: #1d4ed8;
    --ui-secondary-bg: #f8fafc;
    --ui-secondary-border: #e2e8f0;
    --ui-secondary-text: #334155;
    --ui-danger-bg: #dc2626;
    --ui-danger-bg-hover: #b91c1c;
    --ui-border-radius: 12px;
    --ui-input-height: 36px;
    --ui-input-focus: #7c818a;
    --ui-input-focus-ring: rgba(124, 129, 138, 0.12);
    --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 20px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --radius: 12px;
    --radius-lg: 16px;
    --sidebar-width: 272px;
    --sidebar-width-collapsed: 76px;
    --shadow: 0 2px 14px rgba(124, 129, 138, 0.07), 0 1px 4px rgba(124, 129, 138, 0.04);
    --shadow-btn: 0 4px 14px rgba(16, 185, 129, 0.22);

    /* legacy aliases used across pages */
    --avers-navy: var(--color-navy);
    --avers-navy-deep: var(--color-primary-dark);
}

* { box-sizing: border-box; }
html, body {
    height: 100%;
}
body {
    font-family: var(--font-family);
    background-color: var(--color-bg);
    color: var(--color-text);
    margin: 0;
    padding: 0;
    font-size: var(--font-size-sm);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

.wrapper {
    display: flex;
    height: 100vh;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}

/* ==========================================================================
   БОКОВОЕ МЕНЮ (классы совместимы с js/sidebar.js)
   ========================================================================== */
.sidebar {
    width: var(--sidebar-width);
    background-color: var(--color-navy);
    color: var(--color-sidebar-text);
    flex-shrink: 0;
    transition: width 0.22s ease;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: sticky;
    top: 0;
    align-self: flex-start;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar.collapsed {
    width: var(--sidebar-width-collapsed);
}

.sidebar-brand {
    min-height: 56px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-sidebar-border);
    flex-shrink: 0;
    gap: 8px;
}
.sidebar-brand-text {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-on-dark, #ffffff);
    white-space: nowrap;
    letter-spacing: -0.01em;
}

.sidebar.collapsed .sidebar-brand-text {
    display: none;
}

.toggle-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #ffffff;
    cursor: pointer;
    font-size: 14px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.toggle-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.sidebar-menu {
    display: flex;
    flex-direction: column;
    padding: 12px 0 16px;
    gap: 2px;
}

.sidebar-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-group--secondary {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid var(--color-sidebar-border);
}

.sidebar-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: calc(100% - 20px);
    margin: 0 10px 4px;
    padding: 6px 12px;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: left;
    cursor: pointer;
}
.sidebar-group-toggle:hover {
    background: var(--color-sidebar-hover);
    color: rgba(255, 255, 255, 0.72);
}
.sidebar-group-toggle__label {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-group-toggle__chev {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.75;
    transition: transform 0.15s ease;
}
.sidebar-group-toggle__chev svg {
    width: 12px;
    height: 12px;
    display: block;
}
/* Развёрнуто — стрелка вверх; свёрнуто — вниз */
.sidebar-group.is-collapsed .sidebar-group-toggle__chev {
    transform: rotate(180deg);
}
.sidebar-group-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sidebar-group.is-collapsed .sidebar-group-items {
    display: none;
}
/* В rail-режиме пункты всегда видны (иконки) */
.sidebar.collapsed .sidebar-group.is-collapsed .sidebar-group-items {
    display: flex;
}

.sidebar.collapsed .sidebar-group-toggle {
    display: none;
}

/* Скрываем админ-разделы до подтверждения роли (без мигания при навигации) */
[data-admin-only] {
    display: none !important;
}

body.user-is-admin [data-admin-only].menu-item,
body.user-is-admin a.menu-item[data-admin-only] {
    display: flex !important;
}

body.user-is-admin .sidebar-group[data-admin-only] {
    display: flex !important;
    flex-direction: column;
}

body.user-is-admin #paint-options-container[data-admin-only],
body.user-cap-action--paint_shifts #paint-options-container[data-admin-only],
body.user-cap-action--paint_shifts #paint-options-container[data-cap="action.paint_shifts"] {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

body.user-is-admin #paint-toolbar-separator[data-admin-only],
body.user-cap-action--paint_shifts #paint-toolbar-separator[data-admin-only],
body.user-cap-action--paint_shifts #paint-toolbar-separator[data-cap="action.paint_shifts"] {
    display: block !important;
    flex-shrink: 0;
}

body.user-is-admin [data-admin-only]:not(.menu-item):not(.sidebar-group):not(#paint-options-container):not(#paint-toolbar-separator) {
    display: revert !important;
}

/* ACL caps: меню и действия (user-cap-group--key) */
[data-cap] {
    display: none !important;
}

body.user-is-admin [data-cap].menu-item,
body.user-is-admin a.menu-item[data-cap] {
    display: flex !important;
}

body.user-is-admin .sidebar-group[data-cap] {
    display: flex !important;
    flex-direction: column;
}

body.user-cap-menu--staff [data-cap="menu.staff"].menu-item,
body.user-cap-menu--staff a.menu-item[data-cap="menu.staff"],
body.user-cap-menu--okdesk_reports [data-cap="menu.okdesk_reports"].menu-item,
body.user-cap-menu--okdesk_reports a.menu-item[data-cap="menu.okdesk_reports"],
body.user-cap-menu--issue_review [data-cap="menu.issue_review"].menu-item,
body.user-cap-menu--issue_review a.menu-item[data-cap="menu.issue_review"],
body.user-cap-menu--fast_create [data-cap="menu.fast_create"].menu-item,
body.user-cap-menu--fast_create a.menu-item[data-cap="menu.fast_create"],
body.user-cap-menu--shift_analytics [data-cap="menu.shift_analytics"].menu-item,
body.user-cap-menu--shift_analytics a.menu-item[data-cap="menu.shift_analytics"],
body.user-cap-menu--work_generator [data-cap="menu.work_generator"].menu-item,
body.user-cap-menu--work_generator a.menu-item[data-cap="menu.work_generator"],
body.user-cap-menu--duty_generator [data-cap="menu.duty_generator"].menu-item,
body.user-cap-menu--duty_generator a.menu-item[data-cap="menu.duty_generator"],
body.user-cap-menu--settings [data-cap="menu.settings"].menu-item,
body.user-cap-menu--settings a.menu-item[data-cap="menu.settings"] {
    display: flex !important;
}

body.user-cap-menu--staff .sidebar-group[data-cap="menu.staff"],
body.user-cap-menu--okdesk_reports .sidebar-group[data-cap="menu.okdesk_reports"],
body.user-cap-menu--issue_review .sidebar-group[data-cap="menu.issue_review"],
body.user-cap-menu--fast_create .sidebar-group[data-cap="menu.fast_create"],
body.user-cap-menu--shift_analytics .sidebar-group[data-cap="menu.shift_analytics"],
body.user-cap-menu--work_generator .sidebar-group[data-cap="menu.work_generator"],
body.user-cap-menu--duty_generator .sidebar-group[data-cap="menu.duty_generator"],
body.user-cap-menu--settings .sidebar-group[data-cap="menu.settings"] {
    display: flex !important;
    flex-direction: column;
}

/* Быстрые заявки — legacy user-can-mfc + user-can-fast-create */
[data-allowlist="mfc"],
[data-allowlist="fast-create"] {
    display: none !important;
}

body.user-can-mfc [data-allowlist="mfc"].menu-item,
body.user-can-mfc a.menu-item[data-allowlist="mfc"],
body.user-can-fast-create [data-allowlist="mfc"].menu-item,
body.user-can-fast-create a.menu-item[data-allowlist="mfc"],
body.user-is-admin [data-allowlist="fast-create"].menu-item,
body.user-is-admin a.menu-item[data-allowlist="fast-create"],
body.user-can-fast-create [data-allowlist="fast-create"].menu-item,
body.user-can-fast-create a.menu-item[data-allowlist="fast-create"] {
    display: flex !important;
}

/* Отчёты Okdesk — legacy allowlist */
[data-allowlist="okdesk-reports"] {
    display: none !important;
}

body.user-is-admin [data-allowlist="okdesk-reports"].menu-item,
body.user-is-admin a.menu-item[data-allowlist="okdesk-reports"],
body.user-can-okdesk-reports [data-allowlist="okdesk-reports"].menu-item,
body.user-can-okdesk-reports a.menu-item[data-allowlist="okdesk-reports"] {
    display: flex !important;
}

.sidebar.collapsed .menu-item {
    justify-content: center;
    padding: 10px 0;
    margin: 0 10px;
}

.sidebar.collapsed .menu-icon {
    margin-right: 0;
}

.menu-item {
    display: flex;
    align-items: center;
    margin: 0 10px;
    padding: 9px 12px;
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
}
.menu-item:hover {
    background-color: var(--color-sidebar-hover);
    color: #ffffff;
}
.menu-item.active {
    background-color: var(--color-sidebar-active);
    color: #ffffff;
    font-weight: 600;
}

.menu-icon {
    margin-right: 10px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: inherit;
    opacity: 0.92;
}
.menu-icon__svg {
    width: 18px;
    height: 18px;
    display: block;
}
.menu-item:hover .menu-icon,
.menu-item.active .menu-icon {
    opacity: 1;
}

.sidebar.collapsed .menu-item span:not(.menu-icon) {
    display: none;
}

/* —— Мобильный drawer (канон shell) —— */
.app-mobile-menu,
.dash-mobile-menu {
    display: none;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    background: var(--color-surface, #fff);
    color: var(--color-text, #1f2937);
    font-size: 16px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}
.app-mobile-menu:hover,
.dash-mobile-menu:hover {
    background: var(--color-surface-muted, #f9fafb);
}

.app-mobile-backdrop,
.dash-mobile-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(31, 41, 55, 0.4);
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
}
.app-mobile-backdrop.is-visible,
.dash-mobile-backdrop.is-visible {
    display: block;
}

@media (max-width: 768px) {
    .app-mobile-menu,
    .dash-mobile-menu {
        display: inline-flex;
    }

    .main-header .header-title {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }

    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 1000;
        width: min(var(--sidebar-width), 86vw) !important;
        transform: translateX(0);
        transition: transform 0.22s ease, box-shadow 0.22s ease;
        box-shadow: 8px 0 24px rgba(31, 41, 55, 0.18);
        border-right: none;
    }

    .sidebar.collapsed {
        transform: translateX(-105%);
        width: min(var(--sidebar-width), 86vw) !important;
        pointer-events: none;
        box-shadow: none;
    }

    /* В drawer всегда полные подписи (не rail 76px) */
    .sidebar:not(.collapsed) .sidebar-brand-text {
        display: inline;
        color: var(--color-text-on-dark, #ffffff);
    }
    .sidebar:not(.collapsed) .sidebar-group-toggle {
        display: flex;
    }
    .sidebar:not(.collapsed) .menu-item {
        justify-content: flex-start;
        padding: 9px 12px;
        margin: 0 10px;
    }
    .sidebar:not(.collapsed) .menu-item span:not(.menu-icon) {
        display: inline;
    }
    .sidebar:not(.collapsed) .menu-icon {
        margin-right: 10px;
    }

    .main-content {
        width: 100% !important;
        margin-left: 0;
    }
}

/* ==========================================================================
   ОСНОВНОЙ КОНТЕНТ И ШАПКА
   ========================================================================== */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: 100vh;
    overflow: hidden;
    width: auto;
    background: var(--color-bg);
    transition: width 0.22s ease;
}

/* Стили для ячеек UID */
#staff-table-body .staff-td-uid {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: all 0.2s ease;
}

#staff-table-body .staff-td-uid:hover {
    overflow: visible;
    white-space: normal;
    background: #f8fafc;
    position: relative;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.sidebar.collapsed + .main-content {
    width: auto;
}

.main-header {
    min-height: 56px;
    height: auto;
    background-color: transparent;
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px 8px;
    flex-shrink: 0;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 300;
    gap: 12px;
}
.main-header h1 {
    font-size: 18px;
    margin: 0;
    color: var(--color-text);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.header-status {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--color-text-secondary);
    font-size: 12px;
}
.status-indicator.online {
    width: 8px;
    height: 8px;
    background-color: var(--ui-primary-bg);
    border-radius: 50%;
    margin-right: 8px;
}

#logout-btn {
    background: transparent !important;
    color: var(--color-danger) !important;
    border: 1.5px solid #fecaca !important;
    border-radius: var(--radius) !important;
    height: 32px;
    padding: 0 12px !important;
    font-weight: 600 !important;
    cursor: pointer;
}
#logout-btn:hover {
    background: #fef2f2 !important;
}

.content-body {
    padding: 12px 24px 28px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 0;
    min-height: 0;
    background: var(--color-bg);
}

#dynamic-container,
#main-dashboard-container {
    min-width: 0 !important;
    width: 100%;
    overflow-x: hidden;
}

.d-none { display: none !important; }
.card {
    background: var(--color-surface);
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    padding: 16px;
    margin-bottom: 20px;
    box-shadow: var(--shadow);
}
.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    gap: 10px;
    flex-wrap: wrap;
}

.form-control {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
    height: var(--ui-input-height);
    font-family: inherit;
    color: var(--color-text);
    background: var(--color-surface);
}
.form-control:focus {
    outline: none;
    border-color: var(--ui-input-focus);
    box-shadow: 0 0 0 3px var(--ui-input-focus-ring);
}
.form-group { margin-bottom: 12px; }
.form-group-row { display: flex; gap: 10px; }

.btn {
    padding: 0 14px;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 600;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.btn:active { transform: scale(0.98); }
.btn-primary {
    background-color: var(--ui-primary-bg);
    color: var(--ui-primary-text);
    box-shadow: var(--shadow-btn);
}
.btn-primary:hover { background-color: var(--ui-primary-bg-hover); }
.btn-success {
    background-color: var(--ui-primary-bg);
    color: var(--ui-primary-text);
}
.btn-secondary {
    background-color: var(--ui-secondary-bg);
    color: var(--ui-secondary-text);
    border: 1.5px solid var(--ui-secondary-border);
}
.btn-secondary:hover { background: #f1f5f9; }
.btn:hover { filter: none; }

/* ==========================================================================
   ДВУХНЕДЕЛЬНЫЙ ТАЙМЛАЙН СЕТКА (ОПТИМИЗИРОВАНО)
   ========================================================================== */
.timeline-scroll-container { 
    overflow-x: auto; 
    width: 100%; 
}

.table-timeline { 
    width: 100%; 
    border-collapse: separate; 
    border-spacing: 0;
    text-align: center; 
    background: #fff; 
    table-layout: fixed; 
}

.table-timeline th, .table-timeline td { 
    border-right: 1px solid #cbd5e0; 
    border-bottom: 1px solid #cbd5e0; 
    padding: 6px 4px; 
    font-size: 11px; 
}

/* ЖЕСТКАЯ ФИКСАЦИЯ СТОЛБЦА С НОМЕРАМИ СТРОК (№) */
.table-timeline th:nth-child(1),
.table-timeline td:nth-child(1),
.table-timeline th.tl-sticky-num {
    position: sticky;
    left: 0;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    background: #f8fafc !important;
    z-index: 32;
    border-right: 1px solid #cbd5e0;
}
.table-timeline th:nth-child(1),
.table-timeline th.tl-sticky-num {
    z-index: 52;
}

/* ==========================================================================
   ЖЕСТКАЯ ФИКСАЦИЯ И АДАПТИВНОЕ СЖАТИЕ СТОЛБЦА С СОТРУДНИКАМИ
   ========================================================================== */
.table-timeline th.sticky-col,
.table-timeline td.sticky-col {
    position: sticky;
    left: 40px;
    background: #ffffff !important;
    z-index: 30;
    font-weight: bold;
    text-align: left;
    border-right: 2px solid #cbd5e0 !important;
    box-shadow: 4px 0 8px -4px rgba(0, 0, 0, 0.12);

    /* Меняем фиксированные 240px на адаптивные свойства: */
    width: 10vw !important;
    min-width: 100px !important; /* Минимальный порог для читаемости */
    max-width: 150px !important; /* Ограничение для огромных экранов */

    /* Автоматическое скрытие длинного текста с троеточием */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Шапка сотрудников — выше скроллящихся Н/Д/В */
.table-timeline th.sticky-col {
    z-index: 54;
    background: #f8fafc !important;
}

/* 2-я строка шапки: пустые sticky-углы перекрывают наезд Н/Д/В (вместо rowspan) */
.table-timeline thead tr:first-child > th.tl-sticky-num,
.table-timeline thead tr:first-child > th.sticky-col {
    border-bottom: none !important;
}
.table-timeline thead tr:nth-child(2) > th.tl-sticky-under {
    position: sticky !important;
    background: #f8fafc !important;
    border-top: none !important;
    padding: 0 !important;
    box-shadow: none;
}
.table-timeline thead tr:nth-child(2) > th.tl-sticky-num.tl-sticky-under {
    left: 0 !important;
    z-index: 52 !important;
    box-shadow: none;
}
.table-timeline thead tr:nth-child(2) > th.sticky-col.tl-sticky-under {
    left: 40px !important;
    z-index: 54 !important;
    box-shadow: 4px 0 8px -4px rgba(0, 0, 0, 0.12);
}
.table-timeline thead tr:nth-child(2) > th:not(.tl-sticky-under) {
    position: relative;
    z-index: 1;
}

/* Эффект: при наведении на строку показываем полное имя в закреплённой колонке */
.table-timeline tr.timeline-emp-row.is-active-hover td.sticky-col {
    overflow: visible !important;
    white-space: normal !important;
    z-index: 36 !important;
}

.table-timeline td.sticky-col div,
.table-timeline td.sticky-col span {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.cell-weekend-blank {
    background-color: #fff1f2 !important;
}

/* Настройки столбцов самих смен */
.shift-header-col {
    width: 65px;
    min-width: 55px;
}

/* ПАЛИТРА ЗАЛИВКИ ДЛЯ ШАПОК СМЕН */
.th-shift-night { background-color: #e2e8f0 !important; color: #334155 !important; font-size: 9px; font-weight: bold; }
.th-shift-day { background-color: #fef3c7 !important; color: #92400e !important; font-size: 9px; font-weight: bold; } 
.th-shift-evening { background-color: #f3e8ff !important; color: #6b21a8 !important; font-size: 9px; font-weight: bold; }

/* Выделение выходных и праздничных дней */
.header-day-weekend { background-color: #ffe3e3 !important; color: #e63946 !important; font-weight: bold; }
.date-sub-text { display: block; font-size: 9px; color: #7f8c8d; font-weight: normal; margin-top: 2px; }

/* Интерактивные ячейки сетки */
.shift-cell-interactive { 
    background-color: #ffffff;
    cursor: pointer; 
    transition: box-shadow 0.08s ease; 
    user-select: none; 
    font-weight: bold; 
}
#timeline-table tr.timeline-emp-row:not(.is-active-hover) .shift-cell-interactive:hover {
    box-shadow: inset 0 0 0 9999px rgba(241, 242, 246, 0.85) !important;
    outline: 1px solid #0d2240;
}

/* Цвета состояний смен */
.shift-status-work { background-color: #2ecc71 !important; color: white !important; }
.shift-status-duty { background-color: #3498db !important; color: white !important; }
.shift-status-clear { background-color: transparent !important; color: #dddddd !important; }

/* Новые цвета для состояний отсутствия сотрудников */
.shift-status-vacation { background-color: #f1c40f !important; color: white !important; }
.shift-status-sick { background-color: #e74c3c !important; color: white !important; }
.shift-status-business-trip { background-color: #9b59b6 !important; color: white !important; }

/* Подсветка критической ячейки «0 инженеров» в строке итогов */
.count-zero { color: #e63946 !important; background-color: #ffe3e3 !important; font-weight: bold !important; }

/* Блок динамических критических предупреждений над таблицей */
.critical-alert-box { background-color: #ffe3e3; border: 1px solid #cbd5e0; border-left: 4px solid #e63946; border-radius: 4px; padding: 12px 15px; color: #333333; margin-bottom: 15px; text-align: left; }
.critical-alert-box h4 { margin: 0 0 5px 0; font-size: 13px; color: #e63946; font-weight: bold; display: flex; align-items: center; gap: 6px; }
.critical-alert-box ul { margin: 0; padding-left: 18px; line-height: 1.4; font-size: 11px; }

/* Сетки для других страниц */
.management-grid, .analytics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.table-data { width: 100%; border-collapse: collapse; margin-top: 10px; }
.table-data th, .table-data td { border: 1px solid #e2e8f0; padding: 8px; text-align: left; }
.table-data th { background-color: #f8fafc; color: #0d2240; }

/* Компактный контейнер для горизонтальной раздачи алертов-бэджей */
.alert-badges-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 120px;
    overflow-y: auto;
    padding: 2px 0;
}

.alert-badge {
    background-color: #ffffff;
    border: 1px solid #ffcbd1;
    color: #c92a2a;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

/* Выравнивание элементов выбора кистей внутри панели инструментов */
.toolbar label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.toolbar input[type="radio"] {
    margin: 0;
    cursor: pointer;
    vertical-align: middle;
}

.settings-form { display: grid; grid-template-columns: 100px 1fr 120px 80px auto; gap: 15px; align-items: end; margin-bottom: 20px; }
.card-title { margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px; }

/* --- Staff page: Avers header / filters / period --- */
.staff-header-sub {
    margin: 4px 0 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted, #6b7280);
    text-transform: none;
    letter-spacing: 0;
}
.header-title:has(.staff-header-sub) h1 {
    line-height: 1.15;
}
.staff-btn-create {
    height: 34px;
    padding: 0 14px;
    border: none;
    border-radius: var(--radius, 12px);
    background: var(--ui-create-project-bg, #2563eb);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28);
}
.staff-btn-create:hover {
    background: var(--ui-create-project-bg-hover, #1d4ed8);
}
.staff-panel {
    padding: 12px 14px;
    margin-bottom: 12px;
    border-radius: var(--radius, 12px);
    border: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-surface, #fff);
    box-shadow: var(--shadow, none);
}
.staff-controls-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.staff-controls-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}
.staff-controls-period {
    padding-top: 10px;
    border-top: 1px solid var(--color-border, #e5e7eb);
}
.staff-filter-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.staff-filter-inline > label {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    margin: 0;
    line-height: 1;
}
.staff-filter-inline > .form-control,
.staff-filter-inline > select,
.staff-filter-inline > input[type="date"] {
    width: 138px;
    min-width: 138px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid var(--color-border, #e5e7eb);
    padding: 0 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text, #1f2937);
    box-sizing: border-box;
    background: var(--color-surface, #fff);
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.staff-filter-inline > .form-control:hover,
.staff-filter-inline > select:hover,
.staff-filter-inline > input[type="date"]:hover {
    border-color: var(--color-border-strong, #d1d5db);
}
.staff-filter-inline > .form-control:focus,
.staff-filter-inline > select:focus,
.staff-filter-inline > input[type="date"]:focus {
    outline: none;
    border-color: var(--ui-input-focus, #7c818a);
    box-shadow: 0 0 0 3px var(--ui-input-focus-ring, rgba(124, 129, 138, 0.12));
}
.staff-filter-inline > .staff-filter-select-wide {
    width: 152px;
    min-width: 152px;
}
.staff-filter-inline > .staff-date-input {
    width: 142px;
    min-width: 142px;
}

/* Chips / period presets — as classifier jump links */
.staff-chip-btn,
.staff-controls-period .staff-period-default-btn,
.staff-controls-period .staff-period-btn,
.staff-period-btn,
.staff-period-default-btn.toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-surface, #fff);
    color: var(--color-text-secondary, #4b5563);
    font-size: 11px;
    font-weight: 650;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
    box-shadow: none;
    box-sizing: border-box;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.staff-chip-btn:hover,
.staff-controls-period .staff-period-default-btn:hover,
.staff-controls-period .staff-period-btn:hover,
.staff-period-btn:hover {
    background: #f1f5f9;
    border-color: var(--color-border-strong, #d1d5db);
    color: var(--color-text, #1f2937);
}
.staff-chip-btn.active,
.staff-controls-period .staff-period-btn.active,
.staff-controls-period .staff-period-default-btn.active,
.staff-period-btn.active,
.staff-period-default-btn.active,
.staff-period-default-btn.active:hover,
.staff-controls-period .staff-period-btn[data-period="this-month"].active,
.staff-controls-period .staff-period-btn[data-period="prev-month"].active,
.staff-controls-period .staff-period-btn[data-period="next-month"].active,
.staff-controls-period .staff-period-btn[data-period^="q"].active,
.staff-controls-period .staff-period-btn[data-period="year-end"].active,
.staff-period-btn[data-period="this-month"].active,
.staff-period-btn[data-period="prev-month"].active,
.staff-period-btn[data-period="next-month"].active,
.staff-period-btn[data-period^="q"].active,
.staff-period-btn[data-period="year-end"].active {
    background: var(--color-accent-light, #fceded) !important;
    border-color: #f5c2c2 !important;
    color: var(--color-accent, #d81818) !important;
    box-shadow: none !important;
}
.staff-controls-period .staff-period-presets,
.staff-period-presets {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    border-left: 1px solid var(--color-border, #e5e7eb);
    padding-left: 10px;
}
.staff-controls-period .staff-period-btn[data-period="this-month"],
.staff-controls-period .staff-period-btn[data-period="prev-month"],
.staff-controls-period .staff-period-btn[data-period="next-month"],
.staff-controls-period .staff-period-btn[data-period^="q"],
.staff-controls-period .staff-period-btn[data-period="year-end"],
.staff-period-btn[data-period="this-month"],
.staff-period-btn[data-period="prev-month"],
.staff-period-btn[data-period="next-month"],
.staff-period-btn[data-period^="q"],
.staff-period-btn[data-period="year-end"] {
    background: var(--color-surface, #fff);
    border-color: var(--color-border, #e5e7eb);
    color: var(--color-text-secondary, #4b5563);
    box-shadow: none;
}
.staff-period-sep {
    width: 1px;
    height: 18px;
    background: var(--color-border, #e5e7eb);
    margin: 0 2px;
    flex-shrink: 0;
}

/* --- Staff module: toolbar, bars, cards --- */
.staff-team-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}
.staff-team-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-left: 3px solid var(--staff-chip-accent, var(--color-accent, #d81818));
    border-radius: var(--radius, 12px);
    font: inherit;
    font-size: 12px;
    color: var(--color-text, #1f2937);
    white-space: nowrap;
    cursor: pointer;
    line-height: 1.35;
    box-shadow: none;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.staff-team-chip:hover {
    background: var(--color-surface-muted, #f9fafb);
    border-color: var(--color-border-strong, #d1d5db);
    border-left-color: var(--staff-chip-accent, var(--color-accent, #d81818));
}
.staff-team-chip:focus-visible {
    outline: 2px solid var(--staff-chip-accent, var(--color-accent, #d81818));
    outline-offset: 2px;
}
.staff-team-chip-name {
    font-weight: 800;
    color: var(--color-text, #1f2937);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 12px;
}
.staff-team-chip-count {
    background: var(--color-surface-muted, #f9fafb);
    color: var(--color-text-muted, #6b7280);
    border: 1px solid var(--color-border, #e5e7eb);
    padding: 1px 7px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 800;
}
.staff-team-chip-sep { color: #d1d5db; }
.staff-team-chip b { color: var(--color-text, #1f2937); font-weight: 700; }
.staff-team-empty {
    font-size: 12px;
    color: #94a3b8;
    padding: 4px 0;
}
.staff-anno-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2100;
    background: rgba(15, 23, 42, 0.45);
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.staff-anno-modal.open {
    display: flex;
}
.staff-anno-dialog {
    background: #fff;
    width: 100%;
    max-width: 360px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    overflow: hidden;
}
.staff-anno-dialog--wide {
    max-width: 460px;
}
.staff-anno-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid #e5e7eb;
}
.staff-anno-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text, #1f2937);
}
.staff-anno-close {
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
    padding: 0 2px;
}
.staff-anno-close:hover { color: #475569; }
.staff-anno-body {
    padding: 12px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.staff-anno-meta {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 2px;
}
.staff-anno-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 13px;
    color: #374151;
    padding: 6px 0;
    border-bottom: 1px solid #f3f4f6;
}
.staff-anno-row:last-child { border-bottom: none; }
.staff-anno-row b {
    color: #111827;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.staff-anno-line {
    font-size: 13px;
    color: var(--color-text-secondary, #4b5563);
    line-height: 1.45;
    padding: 4px 0;
}
.staff-anno-line strong {
    color: var(--color-text, #1f2937);
    font-weight: 700;
}
.staff-anno-sep {
    height: 1px;
    background: var(--color-border, #e5e7eb);
    margin: 4px 0;
}

.staff-toolbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    background: var(--color-surface, #fff);
    padding: 10px 12px;
    border-radius: var(--radius, 12px);
    margin-bottom: 10px;
    border: 1px solid var(--color-border, #e5e7eb);
    font-size: 11px;
    box-shadow: var(--shadow, none);
}
.staff-toolbar-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}
.staff-toolbar-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}
.staff-more-picker {
    position: relative;
    display: inline-flex;
}
.staff-units-menu {
    min-width: 160px;
    padding: 8px;
}
.staff-units-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    padding: 4px 2px;
    color: var(--color-text-secondary, #4b5563);
}
.staff-units-row select {
    height: 28px;
    font-size: 11px;
    border-radius: 8px;
    border: 1px solid var(--color-border, #e5e7eb);
    background: #fff;
    padding: 0 6px;
    font-family: inherit;
}
.staff-toolbar-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.staff-toolbar-label {
    font-weight: 700;
    color: var(--color-text-muted, #6b7280);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.staff-view-toggle,
.staff-scale-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--color-surface-muted, #f9fafb);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
    padding: 3px;
}
.staff-scale-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.staff-scale-group .staff-toolbar-label {
    margin: 0;
    line-height: 1;
    white-space: nowrap;
}
.staff-view-btn,
.staff-scale-btn {
    border: none;
    background: transparent;
    padding: 0 12px;
    height: 28px;
    font-size: 11px;
    font-weight: 650;
    color: var(--color-text-secondary, #4b5563);
    cursor: pointer;
    border-radius: 8px;
    white-space: nowrap;
    font-family: inherit;
    transition: background 0.15s ease, color 0.15s ease;
}
.staff-view-btn:hover,
.staff-scale-btn:hover {
    color: var(--color-text, #1f2937);
    background: #fff;
}
.staff-view-btn.active,
.staff-scale-btn.active {
    background: var(--color-accent-light, #fceded);
    color: var(--color-accent, #d81818);
    box-shadow: none;
    font-weight: 700;
}
.staff-scale-hint {
    font-size: 11px;
    color: var(--color-text-muted, #6b7280);
    font-style: normal;
}
.staff-legend {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #6b7280;
    white-space: nowrap;
    line-height: 1.2;
    padding-top: 2px;
    border-top: 1px solid #eef2f7;
}
.staff-legend-dot {
    color: #dc2626;
    font-size: 9px;
    line-height: 1;
}

.staff-period-filter {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    flex-wrap: wrap;
    row-gap: 6px;
}
.staff-period-presets {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    border-left: 1px solid var(--color-border, #e5e7eb);
    padding-left: 10px;
    flex-shrink: 0;
}

.staff-toolbar-units {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.staff-toolbar-units label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 500;
    cursor: pointer;
}
.staff-toolbar-units select {
    padding: 2px 4px;
    border-radius: 3px;
    border: 1px solid #ccc;
    font-size: 11px;
    font-weight: bold;
    background: #fff;
}
.staff-toolbar-sep {
    width: 1px;
    height: 18px;
    background: #cbd5e1;
    flex-shrink: 0;
}
.staff-toolbar-columns {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.staff-counter-info {
    font-weight: 700;
    color: var(--color-text-secondary, #4b5563);
    background: var(--color-surface-muted, #f9fafb);
    padding: 0 10px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    border-radius: 10px;
    border: 1px solid var(--color-border, #e5e7eb);
    white-space: nowrap;
    font-size: 11px;
}

.staff-td-center {
    padding: 10px 8px;
    text-align: center;
    vertical-align: middle;
    font-size: 12px;
}
.staff-td-uid {
    padding: 10px 12px;
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: var(--color-text-muted, #6b7280);
    font-weight: 600;
    vertical-align: middle;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.staff-td-name {
    padding: 10px 12px;
    vertical-align: middle;
    font-size: 12px;
}
.staff-name-cell {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    white-space: nowrap;
    max-width: 100%;
    min-width: 0;
}
.staff-name-badges,
.staff-card-badges {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.staff-card-badges {
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    margin-left: auto;
    max-width: 52%;
    gap: 3px;
}
.staff-name-badges .staff-status-pill,
.staff-name-badges .staff-stakhanov-badge,
.staff-card-badges .staff-status-pill,
.staff-card-badges .staff-stakhanov-badge {
    margin: 0;
}
.staff-card-badges .staff-status-pill {
    justify-content: flex-end;
    text-align: right;
}
.staff-td-name .staff-link-click,
.staff-card-link {
    color: var(--color-text, #1f2937);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px dashed #9ca3af;
    font-size: 12px;
    cursor: pointer;
    line-height: 1.35;
}
.staff-td-name .staff-link-click:hover {
    color: var(--color-accent, #d81818);
    border-bottom-color: var(--color-accent, #d81818);
}
.staff-card-link {
    flex: 1;
    min-width: 0;
    display: block;
    max-width: 100%;
    word-break: break-word;
    padding-right: 8px;
}
.staff-td-ellipsis {
    padding: 10px 12px;
    font-size: 12px;
    color: var(--color-text-muted, #6b7280);
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.staff-row-overloaded { border-left: none; }
.staff-overload-dot {
    color: #dc2626;
    font-size: 9px;
    line-height: 1;
    margin-left: 4px;
    vertical-align: middle;
}
.staff-name-cell .staff-link-click {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.staff-overload-dot,
.staff-name-badges {
    flex-shrink: 0;
}
.staff-duty-text {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.staff-duty-text.on { color: #047857; }
.staff-duty-text.off { color: #9ca3af; font-weight: 500; }

.staff-status-pill {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 9px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 4px;
    margin-top: 2px;
    white-space: nowrap;
    vertical-align: middle;
}
.staff-pill-dates {
    font-weight: 600;
    opacity: 0.9;
    font-size: 9px;
    padding-left: 2px;
    border-left: 1px solid currentColor;
    margin-left: 2px;
    padding-left: 4px;
}

.staff-mini-bar {
    height: 5px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
    width: 100%;
    min-width: 64px;
}
.staff-mini-bar.bar-overflow { background: #fee2e2; }
.staff-mini-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.25s ease;
}
.staff-mini-bar-fill.bar-work { background: #10b981; }
.staff-mini-bar-fill.bar-duty { background: #3b82f6; }
.bar-overflow .staff-mini-bar-fill.bar-work { background: #f59f00; }
.bar-overflow .staff-mini-bar-fill.bar-duty { background: #ef4444; }

.staff-load-cell {
    padding: 2px 0;
    min-width: 96px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.staff-load-value {
    font-size: 12px;
    color: #1f2937;
    white-space: nowrap;
    line-height: 1.2;
}
.staff-load-value .muted {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 500;
}
.staff-load-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 4px;
}
.staff-load-row:last-child { margin-bottom: 0; }
.staff-metric-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 64px;
}
.staff-metric-label {
    font-size: 12px;
    color: #1f2937;
    white-space: nowrap;
}
.staff-bar-type {
    display: none;
}
.staff-bar-type-work {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}
.staff-bar-type-duty {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #93c5fd;
}
.staff-bar-type-total {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}
.staff-total-bar { display: flex; }
.staff-total-bar-fill {
    display: flex;
    height: 100%;
    min-width: 0;
    border-radius: 3px;
    overflow: hidden;
}
.staff-total-seg {
    display: block;
    height: 100%;
    min-width: 1px;
    flex-shrink: 0;
}
.staff-total-seg.bar-work { background: #2ea043; }
.staff-total-seg.bar-duty { background: #457b9d; }
.bar-overflow .staff-total-seg.bar-work { background: #f59f00; }
.bar-overflow .staff-total-seg.bar-duty { background: #ef4444; }
.staff-stakhanov-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: bold;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 10px;
    padding: 2px 6px;
}
.staff-card-stakhanov {
    box-shadow: 0 0 0 2px #fcd34d, 0 2px 6px rgba(245, 158, 11, 0.15);
}
.staff-load-label { font-size: 10px; white-space: nowrap; color: #334155; flex-shrink: 0; }
.staff-load-label b { color: #1e293b; }
.staff-load-label .muted,
.muted { color: #94a3b8; font-size: 10px; }

.staff-metric-cell { min-width: 72px; padding: 2px 0; }
.staff-metric-label { font-size: 10px; color: #475569; display: block; margin-top: 2px; white-space: nowrap; }
.staff-metric-label b { color: #1e293b; }

.staff-columns-picker { position: relative; }
.staff-columns-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-surface, #fff);
    padding: 0 10px;
    font-size: 11px;
    font-weight: 650;
    color: var(--color-text-secondary, #4b5563);
    border-radius: 10px;
    cursor: pointer;
    height: 32px;
    line-height: 1;
    font-family: inherit;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.staff-columns-btn:hover {
    background: #f1f5f9;
    border-color: var(--color-border-strong, #d1d5db);
    color: var(--color-text, #1f2937);
}
.staff-columns-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    box-shadow: var(--shadow, 0 4px 12px rgba(0,0,0,0.1));
    padding: 8px 0;
    min-width: 180px;
    z-index: 100;
}
.staff-columns-menu.open { display: block; }
.staff-columns-menu label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    font-size: 11px;
    cursor: pointer;
    user-select: none;
}
.staff-columns-menu label:hover { background: #f8fafc; }
.staff-columns-menu input { cursor: pointer; }
.staff-columns-menu .col-required { color: #94a3b8; font-style: italic; }

.staff-table-wrap {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius, 12px);
    overflow: hidden;
    margin-top: 0;
    box-shadow: none;
}
.staff-analytics-table,
.staff-analytics-table.table-data {
    width: 100%;
    border-collapse: collapse;
    border: none !important;
    margin-top: 0;
    table-layout: auto;
    font-size: var(--font-size-sm, 12px);
    background: transparent;
}
.staff-analytics-table th,
.staff-analytics-table td,
.staff-analytics-table.table-data th,
.staff-analytics-table.table-data td,
#staff-table-body td,
#staff-analytics-table th,
#staff-analytics-table td {
    border: none !important;
    border-bottom: 1px solid var(--color-border, #e5e7eb) !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    padding: 10px 12px;
    text-align: left;
    vertical-align: middle;
    background-clip: padding-box;
}
.staff-analytics-table thead th,
#staff-analytics-table thead th {
    background: var(--color-surface-muted, #f9fafb);
    color: var(--color-text-muted, #6b7280);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    border-bottom: 1px solid var(--color-border, #e5e7eb) !important;
}
.staff-analytics-table tbody tr:last-child td,
#staff-table-body tr:last-child td {
    border-bottom: none !important;
}
.staff-analytics-table th.sortable-th {
    cursor: pointer;
    user-select: none;
}
.staff-analytics-table th.sortable-th:hover {
    background: #f3f4f6;
    color: var(--color-text, #1f2937);
}
.staff-analytics-table th.sort-active {
    background: #f3f4f6;
    color: var(--color-text, #1f2937);
}
.staff-analytics-table .sort-neutral {
    color: #d1d5db;
    font-size: 10px;
}
.staff-analytics-table .sort-dir {
    color: var(--color-accent, #d81818);
    font-size: 11px;
    font-weight: 800;
}
.staff-analytics-table .col-hidden { display: none; }
.staff-analytics-table .col-num { width: 1%; text-align: center; color: var(--color-text-muted, #6b7280); }
.staff-analytics-table .col-name { min-width: 140px; }
.staff-analytics-table .col-uid { min-width: 70px; max-width: 110px; }
.staff-analytics-table .col-dept { min-width: 64px; }
.staff-analytics-table .col-role { min-width: 90px; max-width: 140px; }
.staff-analytics-table .col-tz { width: 1%; text-align: center; }
.staff-analytics-table .col-schedule { width: 1%; text-align: center; }
.staff-analytics-table .col-work,
.staff-analytics-table .col-duty,
.staff-analytics-table .col-total { min-width: 150px; }
.staff-analytics-table .col-vacation,
.staff-analytics-table .col-rest,
.staff-analytics-table .col-sick,
.staff-analytics-table .col-trip { min-width: 80px; }
.staff-analytics-table tbody tr:hover td {
    background: #fafafa;
}

.staff-absence-cell { padding: 2px 0; }
.staff-absence-bar {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: #e2e8f0;
    margin-bottom: 3px;
}
.staff-absence-seg {
    display: block;
    height: 100%;
    min-width: 2px;
}
.staff-absence-label { font-size: 10px; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

.staff-trip-cell { padding: 2px 0; }
.staff-trip-label { font-size: 10px; color: #475569; display: block; margin-top: 3px; }
.staff-mini-bar-fill.bar-trip { background: #9c36b5; }
.staff-mini-bar-fill.bar-vacation { background: #f59f00; }
.staff-mini-bar-fill.bar-rest { background: #f9a8d4; }
.staff-mini-bar-fill.bar-sick { background: #e03131; }

.staff-card-metric-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.staff-card-absence-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px dashed #e2e8f0;
}
.staff-card-absence-item {
    flex: 1 1 100px;
    min-width: 90px;
    max-width: 160px;
}

.staff-cards-container { display: flex; flex-direction: column; gap: 16px; }
.staff-dept-section { display: flex; flex-direction: column; gap: 10px; }
.staff-dept-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 12px;
    font-weight: bold;
    color: #1d3557;
}
.staff-dept-section-count {
    font-size: 10px;
    color: #64748b;
    font-weight: 600;
}

.staff-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.staff-card {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 12px 14px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: box-shadow 0.15s;
}
.staff-card:hover { box-shadow: 0 3px 8px rgba(0,0,0,0.08); }
.staff-card-overloaded { border-left: 3px solid #fca5a5; }
.staff-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 8px;
    min-height: 0;
}
.staff-card-meta {
    font-size: 10px;
    color: #64748b;
    margin-bottom: 4px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.staff-card-meta-sep {
    color: #cbd5e1;
    user-select: none;
}
.col-duty-pool {
    min-width: 88px;
    text-align: center;
}
.staff-card-position { font-size: 11px; margin-bottom: 10px; }
.staff-card-metrics { display: flex; flex-direction: column; gap: 8px; }
.staff-card-metric-head {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 3px;
}
.staff-card-metric-head label { font-size: 10px; color: #64748b; flex: 1; }
.staff-card-metric-head strong { font-size: 13px; color: #1e293b; }
.staff-card-metric-head small { font-size: 10px; color: #94a3b8; }
.staff-cards-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #7f8c8d;
    padding: 30px;
    font-size: 13px;
}

/* borders: staff-analytics-table (classifier-style), not cell grid */
#staff-table-body td {
    vertical-align: middle;
}

/* Матрица доступности дежурств (карточка сотрудника) */
.duty-availability-matrix {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 10px;
}
@media (max-width: 640px) {
    .duty-availability-matrix { grid-template-columns: 1fr; }
}
.duty-avail-section-title {
    font-size: 10px;
    font-weight: 700;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 6px;
}
.duty-avail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    overflow: hidden;
}
.duty-avail-table th,
.duty-avail-table td {
    border: 1px solid #e2e8f0;
    padding: 4px 3px;
    text-align: center;
    vertical-align: middle;
}
.duty-avail-table thead th {
    background: #f1f5f9;
    color: #475569;
    font-weight: 600;
    line-height: 1.2;
}
.duty-avail-table tbody th {
    background: #f8fafc;
    color: #1e293b;
    font-weight: 600;
    width: 28px;
}
.duty-avail-slot-code {
    font-size: 9px;
    color: #94a3b8;
    font-weight: 500;
}
.duty-avail-table input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    margin: 0;
}
.duty-availability-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.duty-avail-preset-btn {
    font-size: 10px;
    padding: 3px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    color: #475569;
    cursor: pointer;
    font-family: inherit;
}
.duty-avail-preset-btn:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}
.duty-avail-preset-btn-primary {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1e40af;
    font-weight: 600;
}
.duty-avail-preset-btn-primary:hover {
    background: #bfdbfe;
    border-color: #60a5fa;
}
.duty-avail-preset-btn.active {
    background: #1e40af;
    border-color: #1e3a8a;
    color: #fff;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
.duty-avail-preset-btn-primary.active {
    background: #1d4ed8;
    border-color: #1e3a8a;
    color: #fff;
}
.duty-avail-preset-sep {
    display: inline-block;
    width: 1px;
    height: 18px;
    background: #cbd5e1;
    margin: 0 2px;
    vertical-align: middle;
}

/* ==========================================================================
   COMPACT TOOLBAR BUTTONS (work generator style)
   ========================================================================== */
.toolbar-btn,
.work-pair-btn {
    font-size: 10px;
    padding: 4px 8px;
    border: 1px solid var(--color-border-strong, #cbd5e1);
    border-radius: var(--radius, 12px);
    background: #fff;
    cursor: pointer;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
    height: 26px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.toolbar-btn:hover,
.work-pair-btn:hover { background: #f1f5f9; }

.duty-btn {
    padding: 9px 12px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.duty-btn-primary { background: #16a34a; color: #fff; }
.duty-btn-primary:hover { background: #15803d; }
.duty-btn-success { background: #2563eb; color: #fff; }
.duty-btn-success:hover { background: #1d4ed8; }
.duty-btn-success:disabled { background: #94a3b8; cursor: not-allowed; }
.duty-btn.duty-btn-toolbar {
    width: auto;
    margin-top: 0;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 12px;
    height: 32px;
    box-sizing: border-box;
}

/* ==========================================================================
   SETTINGS / STAFF REFERENCE DIRECTORIES
   ========================================================================== */
.ref-card {
    padding: 12px 14px;
    margin-bottom: 12px;
}
#staff-screen .ref-card {
    padding: 0;
    margin-bottom: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}
#staff-screen .staff-toolbar {
    margin-bottom: 10px;
}
.ref-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}
.ref-section-title {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
}
.ref-section-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ref-filter-label {
    font-size: 10px;
    font-weight: 700;
    color: #475569;
    white-space: nowrap;
}
.ref-filter-select {
    height: 26px;
    padding: 2px 6px;
    font-size: 11px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
}
.ref-toolbar-card {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px 12px;
    padding: 10px 14px;
    margin-bottom: 12px;
}
.staff-toolbar-card {
    overflow: visible;
}
.staff-toolbar-row {
    display: flex;
    align-items: center;
    gap: 10px 12px;
    flex: 1 1 640px;
    min-width: 0;
    flex-wrap: wrap;
}
.staff-add-btn {
    flex-shrink: 0;
    align-self: center;
    min-width: 92px;
    height: 32px;
}
.staff-toolbar-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex: 0 1 auto;
    min-width: 0;
}
.staff-toolbar-vsep {
    width: 1px;
    height: 24px;
    background: #e2e8f0;
    flex-shrink: 0;
    align-self: center;
}
.staff-filter-select {
    width: 148px;
    min-width: 148px;
    flex-shrink: 0;
}
.staff-filter-select-wide {
    width: 160px;
    min-width: 160px;
}
.ref-toolbar-fields {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex: 0 1 auto;
}
.ref-toolbar-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.ref-toolbar-field > label {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
    line-height: 32px;
    margin: 0;
}
.ref-toolbar-field > select,
.ref-toolbar-field > .form-control {
    width: auto;
    min-width: 0;
    padding: 0 8px;
    font-size: 12px;
    height: 32px;
    line-height: 30px;
    box-sizing: border-box;
    border: 1px solid #ced4da;
    border-radius: 8px;
    flex-shrink: 0;
}

/* Общий стиль группы дат (таймлайн, сотрудники) */
.toolbar-date-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    flex-shrink: 0;
}
.toolbar-date-group label {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
    line-height: 32px;
    margin: 0;
}
.toolbar-date-group input[type="date"] {
    width: 135px;
    font-size: 13px;
    padding: 0 8px;
    height: 32px;
    line-height: 30px;
    border: 1px solid #ced4da;
    border-radius: 8px;
    box-sizing: border-box;
    background-color: #fff;
    flex-shrink: 0;
}

.ref-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 11px;
}
.ref-table thead tr {
    border-bottom: 2px solid #e2e8f0;
    background: #f8fafc;
}
.ref-table th {
    padding: 6px 8px;
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.ref-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
.ref-table .col-num {
    width: 40px;
    text-align: right;
    color: #94a3b8;
    font-weight: 700;
}
.ref-table .col-actions {
    width: 148px;
    text-align: center;
    white-space: nowrap;
}

.ref-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ref-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 11px;
}
.ref-list-item:last-child { border-bottom: none; }
.ref-list-empty {
    padding: 12px;
    color: #94a3b8;
    text-align: center;
    font-size: 11px;
}
.ref-section-note {
    margin: 0 0 12px;
    padding: 8px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.45;
}
.ref-list-meta {
    color: #64748b;
    font-size: 10px;
}
.ref-list-name {
    flex: 1;
    min-width: 0;
}
.ref-list-name strong {
    font-weight: 600;
    color: #1e293b;
}
.ref-status-chip {
    display: inline-block;
    margin-left: 6px;
    background: #f1f5f9;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
}
.ref-color-swatch {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: 1px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    flex-shrink: 0;
}
.ref-working-tag {
    font-size: 10px;
    color: #64748b;
    white-space: nowrap;
    margin-right: 4px;
}

.ref-actions {
    display: inline-flex;
    gap: 4px;
    flex-shrink: 0;
}
.ref-action-btn {
    font-size: 10px;
    padding: 3px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
}
.ref-action-btn--edit {
    color: #b45309;
    border-color: #fcd34d;
    background: #fffbeb;
}
.ref-action-btn--edit:hover { background: #fef3c7; }
.ref-action-btn--danger {
    color: #b91c1c;
    border-color: #fca5a5;
    background: #fef2f2;
}
.ref-action-btn--danger:hover { background: #fee2e2; }

.ref-badge-on-duty {
    background-color: #fee2e2;
    color: #991b1b;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    border: 1px solid #fca5a5;
}
.ref-badge-empty {
    color: #94a3b8;
    font-size: 11px;
}

.ref-holiday-bar {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.ref-holiday-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 11px;
}
.ref-holiday-item:last-child { border-bottom: none; }
.ref-holiday-icon {
    width: 24px;
    height: 24px;
    background: #0d6efd;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    flex-shrink: 0;
}
.ref-holiday-names {
    flex: 1;
    min-width: 120px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.ref-holiday-name-tag {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    color: #475569;
}
.ref-holiday-date {
    background: #fff0f2;
    color: #a30014;
    border: 1px solid #ffb3be;
    padding: 3px 8px;
    font-weight: 700;
    font-family: monospace;
    font-size: 10px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}
.ref-holiday-sep {
    margin: 0 4px;
    color: #ffb3be;
    font-weight: normal;
}

/* --- Reports module --- */
#reports-screen .reports-toolbar-card.staff-panel {
    position: sticky;
    top: 0;
    z-index: 40;
    overflow: visible;
    margin-bottom: 12px;
}
#reports-screen .reports-toolbar-card.staff-controls-panel {
    gap: 10px;
}
#reports-screen .reports-toolbar-period.staff-controls-period {
    border-top: 1px solid var(--color-border, #e5e7eb);
    padding-top: 10px;
}
@media (min-width: 1200px) {
    #reports-screen .reports-toolbar-period.staff-controls-period {
        border-top: none;
        padding-top: 0;
        border-left: 1px solid var(--color-border, #e5e7eb);
        padding-left: 12px;
        margin-left: 4px;
    }
}
.reports-toolbar-layout {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}
.reports-toolbar-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
}
.reports-toolbar-filters .reports-employee-field {
    flex: 1 1 auto;
    min-width: 0;
}
.reports-toolbar-filters .reports-employee-field .reports-multiselect {
    flex: 1 1 auto;
    width: 220px;
    min-width: 180px;
    max-width: 280px;
}
.reports-toolbar-period {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    width: 100%;
    min-width: 0;
}
.reports-toolbar-presets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    border-left: none !important;
    padding-left: 0 !important;
}
.reports-filter-info {
    display: block;
    width: 100%;
    box-sizing: border-box;
    white-space: normal !important;
    word-break: break-word;
    line-height: 1.4;
}
.reports-multiselect-toolbar .staff-period-btn.active,
.reports-duty-metric-tabs .reports-duty-metric-btn.active,
.reports-duty-metric-tabs .staff-period-btn.active {
    background: var(--color-accent-light, #fceded) !important;
    border-color: #f5c2c2 !important;
    color: var(--color-accent, #d81818) !important;
    font-weight: 700;
    box-shadow: none !important;
}
.reports-multiselect-toolbar .staff-period-btn.active:hover,
.reports-duty-metric-tabs .reports-duty-metric-btn.active:hover {
    background: #f9e4e4 !important;
    border-color: #f0a8a8 !important;
    color: var(--color-accent, #d81818) !important;
}
@media (max-width: 700px) {
    .reports-toolbar-presets .staff-period-sep {
        display: none;
    }
}
@media (min-width: 900px) and (max-width: 1199px) {
    .reports-toolbar-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
        grid-template-areas: "filters period";
        column-gap: 16px;
        align-items: start;
    }
    .reports-toolbar-filters { grid-area: filters; }
    .reports-toolbar-period { grid-area: period; }
    #reports-screen .reports-toolbar-period.staff-controls-period {
        border-top: none;
        padding-top: 0;
        border-left: 1px solid var(--color-border, #e5e7eb);
        padding-left: 12px;
    }
}
@media (min-width: 1200px) {
    .reports-toolbar-layout {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
    }
    .reports-toolbar-filters {
        flex: 0 0 auto;
        width: auto;
        flex-wrap: nowrap;
    }
    .reports-toolbar-filters .reports-employee-field {
        flex: 0 1 auto;
    }
    .reports-toolbar-filters .reports-employee-field .reports-multiselect {
        width: 220px;
        min-width: 180px;
        max-width: 260px;
    }
    .reports-toolbar-period {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }
    .reports-toolbar-presets {
        flex: 1 1 auto;
        flex-wrap: nowrap;
        min-width: 0;
        border-left: 1px solid var(--color-border, #e5e7eb) !important;
        padding-left: 8px !important;
    }
}
.reports-toolbar-card .reports-employee-field,
.reports-toolbar-card .reports-multiselect {
    overflow: visible;
}
.reports-employee-field {
    min-width: 0;
    flex-shrink: 0;
}
.reports-multiselect {
    position: relative;
    min-width: 168px;
}
.reports-multiselect-toggle {
    display: block;
    width: 100%;
    height: 34px;
    line-height: 32px;
    padding: 0 28px 0 10px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
    box-sizing: border-box;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text, #1f2937);
    font-family: inherit;
}
.reports-multiselect-toggle:hover {
    border-color: var(--color-border-strong, #d1d5db);
}
.reports-multiselect-toggle:focus {
    outline: none;
    border-color: var(--ui-input-focus, #7c818a);
    box-shadow: 0 0 0 3px var(--ui-input-focus-ring, rgba(124, 129, 138, 0.12));
}
.reports-multiselect-toggle::after {
    content: '▾';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted, #6b7280);
    font-size: 11px;
    line-height: 1;
    pointer-events: none;
}
.reports-multiselect-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 2000;
    min-width: 280px;
    max-width: 360px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, 0.12));
}
.reports-multiselect-dropdown[hidden] { display: none !important; }
.reports-multiselect-toolbar {
    display: flex;
    gap: 6px;
    padding: 8px;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-surface-muted, #f9fafb);
    flex-shrink: 0;
}
.reports-employees-list {
    overflow: visible;
    padding: 6px 0;
    flex: 0 0 auto;
}
.reports-multiselect-footer {
    flex-shrink: 0;
    padding: 8px;
    border-top: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-surface-muted, #f9fafb);
}
.reports-multiselect-apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border: none;
    border-radius: 8px;
    background: var(--ui-create-project-bg, #2563eb);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
}
.reports-multiselect-apply:hover {
    background: var(--ui-create-project-bg-hover, #1d4ed8);
}
.reports-multiselect-apply:focus-visible {
    outline: 2px solid var(--ui-create-project-bg, #2563eb);
    outline-offset: 2px;
}
.reports-multiselect-apply-icon {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}
.reports-employee-group { padding: 2px 0 6px; }
.reports-employee-group-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 4px 12px 6px;
}
.reports-employee-dept-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 2px;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
}
.reports-employee-dept-toggle:hover {
    background: #f1f5f9;
}
.reports-employee-dept-toggle input {
    flex-shrink: 0;
}
.reports-employee-dept-name {
    flex: 1;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-secondary, #4b5563);
}
.reports-employee-dept-count {
    font-size: 10px;
    font-weight: 600;
}
.reports-employee-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    font-size: 12px;
    cursor: pointer;
}
.reports-employee-option:hover { background: #f1f5f9; }
.reports-employee-option input { flex-shrink: 0; }
.reports-multiselect-empty {
    margin: 12px;
    font-size: 11px;
    color: #94a3b8;
    font-style: italic;
}
.reports-multiselect-placeholder {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 30px;
    padding: 4px 8px;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
    background: var(--color-surface-muted, #f9fafb);
}
.reports-multiselect-hint {
    font-size: 11px;
    color: var(--color-text-muted, #6b7280);
    font-style: italic;
}
.reports-summary {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}
.reports-summary-volumes {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
}
.reports-summary-volumes .reports-summary-chip {
    flex: 1 1 200px;
    min-width: 180px;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 12px 14px 12px 16px;
    box-sizing: border-box;
}
.reports-summary-chip {
    cursor: default;
}
.reports-summary-chip--clickable {
    cursor: pointer;
    text-align: left;
}
.reports-summary-chip--clickable:hover {
    background: var(--color-surface-muted, #f9fafb);
    border-color: var(--color-border-strong, #d1d5db);
    border-left-color: var(--staff-chip-accent, var(--color-accent, #d81818));
}
.reports-summary-chip--clickable:focus-visible {
    outline: 2px solid var(--staff-chip-accent, #93c5fd);
    outline-offset: 2px;
}
.reports-summary-chip-detail {
    font-size: 12px;
    color: var(--color-text-muted, #6b7280);
    line-height: 1.35;
}
.reports-summary-chip-detail b {
    color: var(--color-text, #1f2937);
    font-weight: 700;
}
.reports-summary-warn {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 800;
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fde68a;
    white-space: nowrap;
}
.reports-summary-load.staff-team-chip {
    flex: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    padding: 14px 18px 14px 22px;
    white-space: normal;
    min-width: 0;
    box-sizing: border-box;
    cursor: pointer;
}
.reports-summary-load.staff-team-chip:hover {
    background: var(--color-surface-muted, #f9fafb);
    border-color: var(--color-border-strong, #d1d5db);
    border-left-color: var(--staff-chip-accent, #c4b5fd);
}
.reports-summary-load.staff-team-chip:focus-visible {
    outline: 2px solid var(--staff-chip-accent, #c4b5fd);
    outline-offset: 2px;
}
.reports-load-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    min-width: 0;
}
.reports-summary-load .staff-team-chip-name {
    margin: 0;
    flex-shrink: 0;
}
.reports-load-help-hint {
    margin-left: auto;
    font-size: 11px;
    font-weight: 650;
    color: var(--color-accent, #d81818);
    white-space: nowrap;
}
.reports-load-inline-item {
    flex-shrink: 0;
    font-size: 13px;
    color: var(--color-text-secondary, #4b5563);
    line-height: 1.4;
}
.reports-load-inline-item b {
    font-weight: 700;
}
.reports-load-inline-bar {
    display: block;
    width: 100%;
    max-width: none;
    flex: none;
    min-width: 0;
}
.reports-load-inline-bar .staff-mini-bar,
.reports-load-inline-bar .reports-balance-bar {
    width: 100%;
    height: 8px;
    margin: 0;
    border-radius: 4px;
}
.reports-load-inline-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    font-size: 12px;
    color: var(--color-text-muted, #6b7280);
    line-height: 1.4;
}
.reports-load-inline-meta b {
    color: var(--color-text, #1f2937);
}
.reports-load-head .reports-load-tier-name,
.reports-load-inline-meta .reports-load-tier-name {
    font-size: 12px;
    font-weight: 700;
}
.reports-anno-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}
.reports-anno-legend-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text-secondary, #4b5563);
    line-height: 1.4;
}
.reports-anno-legend-item .reports-load-swatch {
    margin-top: 3px;
}
@media (max-width: 900px) {
    .reports-summary-volumes {
        flex-direction: column;
    }
    .reports-summary-volumes .reports-summary-chip {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
    }
    .reports-load-help-hint {
        margin-left: 0;
    }
}
.reports-metric-cell strong {
    display: block;
    font-size: 12px;
    color: #1e293b;
    margin-bottom: 4px;
}
.reports-load-cell strong {
    color: inherit;
}
.reports-load-cell[title],
.reports-table-load[title],
.reports-compare-card-load[title],
.reports-load-inline-bar[title],
.reports-summary-load[title],
#reports-sum-calendar-load[title],
#reports-sum-workfund-load[title] {
    cursor: help;
}
.reports-balance-bar {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
    background: #e2e8f0;
}
.reports-balance-bar.reports-balance-track-under {
    background: #f1f5f9;
}
.reports-balance-bar .staff-mini-bar-fill {
    flex-shrink: 0;
    height: 100%;
    min-width: 0;
    border-radius: 0;
}
.reports-balance-weekday {
    border-radius: 3px 0 0 3px;
}
.reports-balance-weekend {
    border-radius: 0 3px 3px 0;
}
.reports-load-weekend-hint,
.reports-load-idle-hint {
    display: block;
    font-size: 10px;
    color: #64748b;
    line-height: 1.2;
}
.reports-weekends-cell small {
    display: block;
    font-size: 10px;
    color: #64748b;
}
.reports-analytics-table .col-reports-weekends {
    width: 7%;
    min-width: 56px;
    text-align: center;
}
.reports-analytics-table .col-reports-idle small {
    display: block;
    font-size: 10px;
    color: #64748b;
}
.reports-load-fill.reports-load-low,
.staff-mini-bar-fill.reports-load-low { background: #64748b; }
.reports-load-fill.reports-load-moderate,
.staff-mini-bar-fill.reports-load-moderate { background: #22c55e; }
.reports-load-fill.reports-load-high,
.staff-mini-bar-fill.reports-load-high { background: #f59e0b; }
.reports-load-fill.reports-load-critical,
.staff-mini-bar-fill.reports-load-critical { background: #ef4444; }
.reports-load-low { color: #475569; }
.reports-load-moderate { color: #15803d; }
.reports-load-high { color: #b45309; }
.reports-load-critical { color: #b91c1c; }
.reports-load-badge.reports-load-low { background: #e2e8f0; color: #475569; }
.reports-load-badge.reports-load-moderate { background: #dcfce7; color: #15803d; }
.reports-load-badge.reports-load-high { background: #fef3c7; color: #b45309; }
.reports-load-badge.reports-load-critical { background: #fee2e2; color: #b91c1c; }
.reports-load-tier-low { border-left: 4px solid #94a3b8; }
.reports-load-tier-moderate { border-left: 4px solid #22c55e; }
.reports-load-tier-high { border-left: 4px solid #f59e0b; }
.reports-load-tier-critical { border-left: 4px solid #ef4444; }
.reports-summary-load.reports-load-tier-low,
.reports-summary-load.reports-load-tier-moderate,
.reports-summary-load.reports-load-tier-high,
.reports-summary-load.reports-load-tier-critical {
    border-left-width: 3px;
    border-left-color: var(--staff-chip-accent, #c4b5fd);
}
.reports-load-tier-name {
    font-size: 11px;
    font-weight: 600;
}
.reports-load-footnote {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin: 0 0 12px;
    padding: 12px 14px;
    font-size: 12px;
    color: var(--color-text, #1f2937);
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-left: 3px solid var(--color-accent, #d81818);
    border-radius: var(--radius, 12px);
    line-height: 1.45;
}
.reports-load-footnote-mark {
    font-weight: 700;
    color: var(--color-accent, #d81818);
}
.reports-load-footnote-title {
    font-weight: 800;
    color: var(--color-text, #1f2937);
}
.reports-load-footnote-sep {
    color: #cbd5e1;
}
.reports-load-footnote-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.reports-load-footnote-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.reports-load-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}
.reports-load-swatch.reports-load-low { background: #64748b; }
.reports-load-swatch.reports-load-moderate { background: #22c55e; }
.reports-load-swatch.reports-load-high { background: #f59e0b; }
.reports-load-swatch.reports-load-critical { background: #ef4444; }
.reports-duty-cell strong {
    display: block;
    font-size: 12px;
    color: #1e293b;
}
.reports-duty-zero {
    display: block;
    text-align: center;
    color: #94a3b8;
}
.reports-duty-cell {
    display: inline-block;
    text-align: center;
    min-width: 0;
}
.reports-duty-grid {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 1px 8px;
    justify-content: center;
    margin-top: 2px;
    font-size: 10px;
    color: #64748b;
    line-height: 1.3;
}
.reports-analytics-table .col-reports-duty {
    width: 12%;
    min-width: 92px;
    text-align: center;
    vertical-align: middle;
}
.reports-duty-cell small {
    display: block;
    font-size: 10px;
    color: #64748b;
    margin-top: 2px;
}
.reports-summary-block .reports-placeholder-text {
    margin: 0;
    font-size: 10px;
    color: #94a3b8;
    font-style: italic;
}
.reports-section-card {
    margin-bottom: 12px;
    padding: 14px 16px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius, 12px);
    box-shadow: var(--shadow, none);
}
#reports-screen .reports-section-card .staff-table-wrap {
    margin-top: 4px;
}
#reports-screen .ref-section-title {
    margin: 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent, #d81818);
}
.reports-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.reports-section-header .ref-section-title { margin-bottom: 0; }
.reports-section-header--with-meta {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0 0 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.reports-section-header--with-meta .ref-section-title {
    color: var(--color-accent, #d81818);
}
.reports-table-filter-info {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted, #6b7280);
    white-space: normal;
    line-height: 1.4;
}
.reports-analytics-table tbody tr.reports-row > td:first-child {
    box-shadow: inset 3px 0 0 var(--dept-accent, transparent);
}
.reports-placeholder-panel {
    padding: 24px 16px;
    text-align: center;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
}
.reports-placeholder-panel--compact { padding: 16px 12px; }
.reports-placeholder-text {
    margin: 0;
    font-size: 12px;
    color: #64748b;
    font-style: italic;
}
.reports-table-empty {
    text-align: center;
    color: #94a3b8;
    font-style: italic;
    padding: 24px 12px !important;
}
.reports-analytics-table {
    table-layout: fixed;
    width: 100%;
}
.reports-analytics-table th,
.reports-analytics-table td {
    padding: 3px 5px;
    vertical-align: middle;
    line-height: 1.2;
}
.reports-analytics-table th {
    padding: 4px 5px;
    font-size: 10px;
}
.reports-analytics-table .reports-table-load {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 5px;
    min-width: 0;
}
.reports-analytics-table .reports-table-load-pct {
    font-size: 11px;
    font-weight: 700;
    flex: 0 0 auto;
}
.reports-analytics-table .reports-table-load .staff-mini-bar {
    flex: 1 1 36px;
    height: 4px;
    min-width: 28px;
    margin: 0;
}
.reports-analytics-table .reports-table-load-hint {
    flex: 1 1 100%;
    font-size: 9px;
    color: #64748b;
    line-height: 1.1;
}
.reports-analytics-table .reports-duty-table-cell {
    display: inline-block;
    text-align: center;
    line-height: 1.3;
    min-width: 0;
}
.reports-analytics-table .reports-duty-table-cell b {
    display: block;
    font-size: 12px;
    color: #1e293b;
}
.reports-analytics-table .reports-duty-breakdown {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 500;
    color: #475569;
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.reports-analytics-table .reports-duty-inline {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    line-height: 1.15;
}
.reports-analytics-table .reports-duty-inline b {
    font-size: 11px;
}
.reports-analytics-table .reports-duty-inline small {
    font-size: 9px;
    color: #64748b;
    white-space: nowrap;
}
.reports-analytics-table .reports-weekends-inline {
    display: inline-block;
    line-height: 1.15;
}
.reports-analytics-table .reports-weekends-inline b {
    font-size: 11px;
}
.reports-analytics-table .reports-weekends-inline small {
    display: block;
    font-size: 9px;
    color: #64748b;
}
.reports-analytics-table .reports-idle-inline {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
}
.reports-analytics-table .reports-idle-inline b {
    font-size: 11px;
}
.reports-analytics-table .reports-idle-inline small {
    font-size: 9px;
    color: #64748b;
    white-space: nowrap;
}
.reports-analytics-table .col-reports-name {
    width: 13%;
    min-width: 88px;
}
.reports-analytics-table .col-reports-dept {
    width: 9%;
    min-width: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.reports-analytics-table .col-reports-work,
.reports-analytics-table .col-reports-vacation,
.reports-analytics-table .col-reports-idle {
    width: 6%;
    min-width: 44px;
    text-align: center;
}
.reports-analytics-table .col-reports-load-cal,
.reports-analytics-table .col-reports-load-fund {
    width: 11%;
    min-width: 72px;
}
.reports-analytics-table .col-reports-load-cal .reports-metric-cell,
.reports-analytics-table .col-reports-load-fund .reports-metric-cell {
    min-width: 0;
}
.reports-load-summary-pair {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
}
.reports-load-summary-pair b {
    font-size: 14px;
}
.reports-load-pair-bar {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: stretch;
}
.reports-load-pair-bar small {
    font-size: 10px;
    color: #64748b;
}
.reports-load-footnote-def {
    font-size: 11px;
    color: #475569;
    line-height: 1.4;
}
.reports-compare-hint {
    margin: 0 0 10px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.45;
}
.reports-compare-hint--warn {
    color: #b45309;
    font-style: italic;
}
.reports-compare-table-wrap {
    overflow-x: auto;
    margin-bottom: 0;
}
.reports-compare-table {
    table-layout: auto;
    width: max-content;
    min-width: 100%;
}
.reports-compare-table th,
.reports-compare-table td {
    border: 1px solid #cccccc;
    vertical-align: middle;
    padding: 6px 10px;
    font-size: 11px;
}
.reports-compare-table thead th {
    background: #f8fafc;
    font-weight: bold;
    color: #1d3557;
    white-space: nowrap;
}
.reports-compare-metric-col {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #f1f5f9 !important;
    min-width: 130px;
    text-align: left;
}
.reports-compare-emp-col {
    min-width: 100px;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.reports-compare-table tbody th.reports-compare-metric-col {
    font-weight: 600;
    color: #334155;
}
.reports-compare-high {
    background: #fff7ed;
}
.reports-compare-low {
    background: #f8fafc;
}
.reports-compare-load {
    background: transparent;
}
.reports-compare-cards {
    margin-top: 4px;
}
#reports-compare-table-wrap[hidden],
#reports-compare-cards[hidden] {
    display: none !important;
}
.reports-compare-card .staff-card-link {
    cursor: default;
    text-decoration: none;
    color: #1d3557;
    font-weight: bold;
}
.reports-compare-card-leader {
    box-shadow: 0 0 0 2px #f59e0b40;
}
.reports-compare-leader-badge {
    font-size: 10px;
    font-weight: 700;
    color: #b45309;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 4px;
    padding: 2px 6px;
    white-space: nowrap;
}
.reports-compare-card-load .staff-mini-bar {
    margin-top: 6px;
}
.reports-compare-table .muted {
    color: #94a3b8;
    font-size: 10px;
}
.reports-risk-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 768px) {
    .reports-risk-grid { grid-template-columns: 1fr; }
}
.reports-risk-panel {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 12px 14px;
    overflow-x: hidden;
    min-width: 0;
}
.reports-subsection-title {
    margin: 0 0 6px 0;
    font-size: 12px;
    font-weight: bold;
    color: #1d3557;
}
.reports-risk-note,
.reports-fot-note {
    margin: 0 0 10px;
    font-size: 10px;
    color: #94a3b8;
    line-height: 1.4;
}
.reports-risk-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.reports-risk-item {
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #fff;
    font-size: 11px;
}
.reports-risk-warn {
    border-left: 3px solid #f59e0b;
    background: #fffbeb;
}
.reports-risk-critical {
    border-left: 3px solid #ef4444;
    background: #fef2f2;
}
.reports-risk-item-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.reports-risk-item-head strong {
    color: #1e293b;
}
.reports-risk-dept {
    font-size: 10px;
    color: #94a3b8;
    white-space: nowrap;
}
.reports-risk-item-msg {
    color: #334155;
    font-weight: 600;
}
.reports-risk-item-detail {
    margin-top: 3px;
    font-size: 10px;
    color: #64748b;
}
.reports-risk-empty {
    margin: 0;
    font-size: 11px;
    color: #94a3b8;
    font-style: italic;
}
.reports-weekend-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.reports-weekend-row {
    padding: 6px 0;
    border-bottom: 1px solid #e2e8f0;
    min-width: 0;
}
.reports-weekend-row:last-child { border-bottom: none; }
.reports-weekend-row--high {
    background: #fff7ed;
    margin: 0;
    padding: 6px 4px;
    border-radius: 4px;
    border-bottom: none;
}
.reports-weekend-row-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 11px;
    min-width: 0;
}
.reports-weekend-name {
    font-weight: 600;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}
.reports-weekend-row .staff-mini-bar {
    width: 100%;
    min-width: 0;
}
.reports-weekend-pct { white-space: nowrap; }
.reports-weekend-pct .muted {
    color: #94a3b8;
    font-size: 10px;
    font-weight: normal;
}
.reports-weekend-groups {
    display: flex;
    gap: 10px;
    margin-bottom: 4px;
    font-size: 10px;
    color: #64748b;
}
.reports-weekend-group-g2 b { color: #b45309; }
.reports-weekend-groups-inline b { color: #1e293b; }
.reports-slots-inline {
    font-size: 11px;
    white-space: nowrap;
}
.reports-slots-inline b { color: #1e293b; }
.reports-night-cell b { margin-right: 4px; }
.reports-night-na {
    display: inline-block;
    margin-left: 4px;
    padding: 0 4px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 600;
    color: #64748b;
    background: #e2e8f0;
}
.reports-night-warn {
    display: inline-block;
    margin-left: 3px;
    padding: 0 3px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 600;
    color: #b45309;
    background: #fef3c7;
    cursor: help;
}
.reports-analytics-table .col-reports-night,
.reports-analytics-table .col-reports-slots,
.reports-analytics-table .col-reports-weekend-groups,
.reports-analytics-table .col-reports-duty-load {
    text-align: center;
    vertical-align: middle;
    font-size: 11px;
}
.reports-analytics-table .col-reports-night { min-width: 44px; }
.reports-analytics-table .col-reports-slots { min-width: 56px; }
.reports-analytics-table .col-reports-weekend-groups { min-width: 72px; }
.reports-analytics-table .col-reports-duty-load { min-width: 52px; }
.reports-duty-metric-tabs {
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.reports-duty-metric-annotation {
    margin: 0 0 12px;
    padding: 8px 10px;
    font-size: 11px;
    line-height: 1.45;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}
.reports-duty-metric-annotation strong {
    color: #1e293b;
}
.reports-duty-layout {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.reports-duty-top-row {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(180px, 0.62fr);
    gap: 12px;
    align-items: stretch;
    min-height: 0;
}
.reports-duty-top-row .reports-duty-panel {
    min-height: 0;
}
.reports-duty-top-row .reports-duty-panel-scroll {
    flex: 0 1 320px;
    height: 320px;
    max-height: 320px;
    min-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}
@media (max-width: 1100px) {
    .reports-duty-top-row { grid-template-columns: 1fr; }
}
.reports-duty-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: stretch;
}
.reports-duty-analytics-grid {
    grid-template-rows: auto auto;
}
@media (max-width: 1100px) {
    .reports-duty-grid,
    .reports-duty-analytics-grid { grid-template-columns: 1fr; }
}
.reports-duty-panel {
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    min-width: 0;
    min-height: 0;
}
.reports-duty-panel .reports-subsection-title {
    margin: 0 0 8px;
    flex-shrink: 0;
}
.reports-duty-panel-subline {
    min-height: 1.25em;
    flex-shrink: 0;
}
.reports-duty-panel-scroll {
    flex: 1 1 auto;
    min-height: 200px;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 0;
    padding: 4px 4px 6px;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}
.reports-duty-panel--insights .reports-duty-insight {
    padding: 6px 8px;
    font-size: 10px;
    line-height: 1.4;
}
.reports-duty-panel--insights .reports-duty-insights-list {
    gap: 6px;
    margin: 0;
}
.reports-duty-insights-body .reports-risk-empty {
    margin: 0;
}
.reports-duty-rotation-strip {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
}
.reports-duty-rotation-strip-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.reports-duty-rotation-strip-head .reports-subsection-title {
    margin: 0;
}
.reports-duty-rotation-subline {
    margin: 0;
    font-size: 10px;
    color: #94a3b8;
}
.reports-rotation-list {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.reports-rotation-status {
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
}
.reports-rotation-status--ok {
    color: #64748b;
}
.reports-rotation-summary {
    flex: 1 1 100%;
    margin: 0 0 2px;
    font-size: 11px;
    font-weight: 600;
    color: #92400e;
}
.reports-duty-rotation-strip--critical .reports-rotation-summary {
    color: #b91c1c;
}
.reports-duty-rotation-strip--ok {
    background: #f8fafc;
    border-color: #e2e8f0;
}
.reports-duty-rotation-strip--warn {
    background: #fffbeb;
    border-color: #fcd34d;
}
.reports-duty-rotation-strip--critical {
    background: #fef2f2;
    border-color: #fca5a5;
}
.reports-duty-rotation-strip--warn .reports-rotation-list,
.reports-duty-rotation-strip--critical .reports-rotation-list {
    margin-top: 8px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}
.reports-duty-rotation-strip--warn .reports-risk-item,
.reports-duty-rotation-strip--critical .reports-risk-item {
    flex: 1 1 260px;
    max-width: 100%;
    margin: 0;
    background: #fff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}
.reports-duty-rotation-strip--warn .reports-risk-item.reports-risk-warn {
    border-left: 3px solid #f59e0b;
}
.reports-duty-rotation-strip--critical .reports-risk-item.reports-risk-critical {
    border-left: 3px solid #ef4444;
}
.reports-duty-avg-hint {
    margin: 0 0 8px;
    font-size: 11px;
    color: #64748b;
    flex-shrink: 0;
}
.reports-duty-balance-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.reports-duty-row {
    padding: 4px 6px;
    border-bottom: 1px solid #e2e8f0;
    min-width: 0;
}
.reports-duty-row:last-child { border-bottom: none; }
.reports-duty-row--outlier-high {
    background: #fff7ed;
    border-radius: 4px;
    border-bottom-color: transparent;
}
.reports-duty-row--outlier-low {
    background: #f0f9ff;
    border-radius: 4px;
    border-bottom-color: transparent;
}
.reports-duty-row--leader.reports-duty-row--outlier-high {
    box-shadow: inset 3px 0 0 #f59e0b;
}
.reports-duty-row--outlier-high .reports-duty-dev-up { color: #b45309; font-weight: 600; }
.reports-duty-row--outlier-low .reports-duty-dev-down { color: #0e7490; font-weight: 600; }
.reports-duty-row--na {
    opacity: 0.72;
}
.reports-duty-row-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 11px;
    min-width: 0;
}
.reports-duty-rank {
    flex: 0 0 18px;
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-align: right;
}
.reports-duty-name {
    flex: 1;
    font-weight: 600;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.reports-duty-value {
    white-space: nowrap;
    text-align: right;
}
.reports-duty-value b {
    margin-right: 6px;
}
.reports-duty-dev {
    font-size: 10px;
    color: #94a3b8;
    font-weight: normal;
}
.reports-duty-dev-up { color: #b45309; }
.reports-duty-dev-down { color: #0e7490; }
.reports-duty-row-meta {
    margin: 0 0 2px 26px;
    font-size: 9px;
    min-width: 0;
}
.reports-duty-bar {
    position: relative;
    margin-left: 26px;
    width: calc(100% - 26px);
}
.reports-duty-bar-light {
    background: #7dd3fc;
}
.reports-duty-avg-marker {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 2px;
    margin-left: -1px;
    background: #64748b;
    opacity: 0.55;
    pointer-events: none;
    z-index: 1;
}
.reports-duty-insights-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.reports-duty-insight {
    margin: 0;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.45;
    color: #334155;
}
.reports-duty-insight-warn {
    background: #fff7ed;
    border-left: 3px solid #f59e0b;
}
.reports-duty-insight-info {
    background: #f0f9ff;
    border-left: 3px solid #38bdf8;
}
.reports-fot-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
@media (max-width: 900px) {
    .reports-fot-grid { grid-template-columns: 1fr; }
}
.reports-fot-chart-area {
    margin-bottom: 0;
    min-width: 0;
}
.reports-fot-chart {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    height: 168px;
    padding: 4px 8px 0;
    border-bottom: 1px solid #e2e8f0;
}
.reports-fot-month {
    flex: 1;
    min-width: 52px;
    max-width: 80px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}
.reports-fot-stack {
    width: 100%;
    max-width: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
    background: #f1f5f9;
    min-height: 4px;
}
.reports-fot-seg {
    display: block;
    width: 100%;
    min-height: 2px;
}
.reports-fot-seg.reports-fot-work { background: #2ea043; }
.reports-fot-seg.reports-fot-duty { background: #457b9d; }
.reports-fot-seg.reports-fot-trip { background: #9c36b5; }
.reports-fot-month-label {
    font-size: 10px;
    color: #64748b;
    text-align: center;
    line-height: 1.2;
}
.reports-fot-month-breakdown {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    font-size: 9px;
    line-height: 1.2;
    text-align: center;
}
.reports-fot-br-work { color: #15803d; font-weight: 600; }
.reports-fot-br-duty { color: #1d4ed8; font-weight: 600; }
.reports-fot-month-value {
    font-size: 10px;
    font-weight: 700;
    color: #1e293b;
}
.reports-fot-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 10px;
    font-size: 10px;
    color: #64748b;
}
.reports-fot-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.reports-fot-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}
.reports-fot-swatch.reports-fot-work { background: #2ea043; }
.reports-fot-swatch.reports-fot-duty { background: #457b9d; }
.reports-fot-swatch.reports-fot-trip { background: #9c36b5; }
.reports-fot-table-wrap {
    margin: 0;
    overflow-x: auto;
    min-width: 0;
}
.reports-fot-table th,
.reports-fot-table td {
    border: 1px solid #cccccc;
    padding: 6px 10px;
    font-size: 11px;
    text-align: center;
}
.reports-fot-table th:first-child,
.reports-fot-table td:first-child {
    text-align: left;
}
.reports-fot-table thead th {
    background: #f8fafc;
    font-weight: bold;
    color: #1d3557;
}

/* --- Okdesk dashboard (index.html) --- */
.okdesk-dashboard {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    width: 100%;
}
.okdesk-dashboard--empty {
    padding: 16px 18px;
}
.okdesk-dashboard-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.okdesk-dashboard-head-left {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.okdesk-dashboard-title {
    margin: 0;
    font-size: 15px;
    color: #1e293b;
    font-weight: 700;
}
.okdesk-dashboard-sub {
    font-size: 11px;
    color: #64748b;
}
.okdesk-dashboard-refresh {
    font-size: 10px;
    color: #94a3b8;
    white-space: nowrap;
}
.okdesk-dashboard-refresh--cache {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 8px;
    border-radius: 6px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}
.okdesk-dashboard-refresh-time {
    color: #0369a1;
    font-weight: 700;
}
.okdesk-dashboard-refresh-sched {
    color: #b45309;
    font-weight: 500;
}
.okdesk-dashboard-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.okdesk-refresh-btn {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #475569;
    font-size: 10px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.3;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.okdesk-refresh-btn:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
}
.okdesk-refresh-btn:active {
    background: #f1f5f9;
}
.okdesk-dashboard-empty {
    margin: 0;
    font-size: 12px;
    color: #94a3b8;
    font-style: italic;
}
.okdesk-kpi-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 10px;
    overflow-x: auto;
    padding-bottom: 2px;
}
.okdesk-kpi-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 11px;
    color: #475569;
    line-height: 1.35;
    min-width: 0;
    flex: 1 1 0;
    align-self: stretch;
    min-height: 128px;
}
.okdesk-kpi-value-zone {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    width: 100%;
}
.okdesk-kpi-value-zone > .okdesk-kpi-card-body,
.okdesk-kpi-value-zone > .okdesk-split-grid,
.okdesk-kpi-value-zone > .okdesk-compare-stack {
    width: 100%;
}
.okdesk-kpi-value-zone--stack {
    flex-direction: column;
    gap: 5px;
    justify-content: flex-start;
    align-items: stretch;
}
.okdesk-kpi-card--volume {
    flex: 1.2 1 140px;
    min-width: 140px;
}
.okdesk-kpi-card--avg {
    flex: 1.1 1 150px;
    min-width: 150px;
}
.okdesk-kpi-card--traffic,
.okdesk-kpi-card--sla,
.okdesk-kpi-card--count {
    flex: 1.05 1 112px;
    min-width: 112px;
}
.okdesk-kpi-card-body {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
    flex: 0 0 auto;
}
.okdesk-kpi-card-sub {
    font-size: 9px;
    color: #64748b;
    line-height: 1.2;
    margin-top: -2px;
    min-height: 11px;
    flex-shrink: 0;
    text-align: center;
}
.okdesk-kpi-card-sub--placeholder {
    visibility: hidden;
}
.okdesk-kpi-card-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 700;
    font-size: 11px;
    color: #1d3557;
    line-height: 1.2;
    flex-shrink: 0;
    min-height: 14px;
    text-align: center;
}
.okdesk-kpi-card-body--hero {
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding-bottom: 0;
    width: 100%;
    text-align: center;
}
.okdesk-kpi-hero-row {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
}
.okdesk-kpi-hero-delta {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}
.okdesk-kpi-hero-delta .okdesk-compare-pct--alarm {
    font-size: 11px;
    padding: 1px 5px;
}
.okdesk-kpi-card--traffic .okdesk-kpi-card-body--hero,
.okdesk-kpi-card--sla .okdesk-kpi-card-body--hero,
.okdesk-kpi-card--count .okdesk-kpi-card-body--hero,
.okdesk-kpi-card--volume .okdesk-kpi-card-body--hero,
.okdesk-kpi-card--avg .okdesk-kpi-card-body--hero {
    margin-top: 0;
}
.okdesk-kpi-hero-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    align-items: center;
    justify-content: center;
}
.okdesk-kpi-hero-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 100%;
}
.okdesk-kpi-hero-block-label {
    font-size: 9.5px;
    font-weight: 600;
    color: #64748b;
    line-height: 1.2;
    text-align: center;
}
.okdesk-kpi-hero-block-label--current {
    color: #0369a1;
    font-weight: 700;
}
.okdesk-kpi-hero-block-sublabel {
    font-weight: 500;
    font-size: 8px;
    color: #94a3b8;
}
.okdesk-kpi-hero-block--today .okdesk-kpi-hero-block-label--current {
    font-weight: 700;
}
.okdesk-kpi-flow-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 3px;
    row-gap: 2px;
    align-items: baseline;
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
}
.okdesk-kpi-flow-cell--r1.okdesk-kpi-flow-cell--left { grid-column: 1; grid-row: 1; justify-self: end; }
.okdesk-kpi-flow-sep--r1 { grid-column: 2; grid-row: 1; justify-self: center; }
.okdesk-kpi-flow-cell--r1.okdesk-kpi-flow-cell--right { grid-column: 3; grid-row: 1; justify-self: start; }
.okdesk-kpi-flow-cell--r2.okdesk-kpi-flow-cell--left { grid-column: 1; grid-row: 2; justify-self: end; }
.okdesk-kpi-flow-sep--r2 { grid-column: 2; grid-row: 2; justify-self: center; }
.okdesk-kpi-flow-cell--r2.okdesk-kpi-flow-cell--right { grid-column: 3; grid-row: 2; justify-self: start; }
.okdesk-kpi-flow-cell--with-hint {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: nowrap;
}
.okdesk-kpi-flow-cell--with-hint .okdesk-kpi-flow-hint {
    margin-left: 0;
}
.okdesk-kpi-flow-grid .okdesk-kpi-flow-cell--left .okdesk-kpi-hero-delta,
.okdesk-kpi-flow-grid .okdesk-kpi-flow-cell--right .okdesk-kpi-hero-delta {
    font-size: 12px;
}
.okdesk-today-badge {
    color: #0369a1;
    font-weight: 700;
}
.okdesk-kpi-flow-align {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
}
.okdesk-kpi-flow-row {
    display: flex;
    justify-content: center;
    width: 100%;
}
.okdesk-kpi-flow-row--delta {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: nowrap;
}
.okdesk-kpi-flow-pair {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
    flex-wrap: nowrap;
}
.okdesk-kpi-flow-pair--delta .okdesk-kpi-hero-delta {
    font-size: 12px;
}
.okdesk-kpi-flow-val--created.okdesk-kpi-value--hero {
    color: #0369a1;
}
.okdesk-kpi-flow-val--closed.okdesk-kpi-value--hero {
    color: #64748b;
}
.okdesk-kpi-flow-val--created {
    color: #0369a1;
}
.okdesk-kpi-flow-val--closed {
    color: #64748b;
}
.okdesk-kpi-flow-hint {
    margin-left: 0;
    white-space: nowrap;
    flex-shrink: 0;
}
.okdesk-kpi-flow-sep {
    color: #94a3b8;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    padding: 0 1px;
}
.okdesk-kpi-flow-align .okdesk-kpi-value--hero,
.okdesk-kpi-flow-grid .okdesk-kpi-value--hero {
    font-size: 20px;
    line-height: 1.15;
}
.okdesk-pace-value--today .okdesk-pace-num {
    font-size: 20px;
    line-height: 1.15;
    font-weight: 700;
    color: #0369a1;
}
.okdesk-pace-value--today .okdesk-pace-suffix {
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
}
.okdesk-kpi-hero-block--compact .okdesk-kpi-flow-align .okdesk-kpi-value--hero,
.okdesk-kpi-hero-block--compact .okdesk-kpi-flow-grid .okdesk-kpi-value--hero {
    font-size: 12px;
}
.okdesk-kpi-hero-block--compact .okdesk-kpi-flow-grid .okdesk-kpi-flow-cell--left .okdesk-kpi-hero-delta,
.okdesk-kpi-hero-block--compact .okdesk-kpi-flow-grid .okdesk-kpi-flow-cell--right .okdesk-kpi-hero-delta,
.okdesk-kpi-hero-block--compact .okdesk-kpi-flow-pair--delta .okdesk-kpi-hero-delta {
    font-size: 8px;
}
.okdesk-kpi-hero-block--compact .okdesk-kpi-flow-sep {
    font-size: 10px;
}
.okdesk-kpi-hero-block--compact .okdesk-kpi-hero-compare-hint {
    font-size: 7px;
}
.okdesk-kpi-flow-grid--avg .okdesk-kpi-avg-unit {
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    line-height: 1.15;
}
.okdesk-kpi-hero-block--compact .okdesk-kpi-flow-grid--avg .okdesk-kpi-avg-unit {
    font-size: 8px;
}
.okdesk-kpi-hero-compare-hint {
    font-size: 8px;
    font-weight: 600;
    color: #94a3b8;
    line-height: 1.2;
    white-space: nowrap;
}
.okdesk-kpi-hero-flow-stack--avg {
    gap: 3px;
}
.okdesk-kpi-hero-block--current .okdesk-kpi-value--hero,
.okdesk-kpi-hero-block--current .okdesk-pace-value--hero .okdesk-pace-num {
    color: #0369a1;
}
.okdesk-kpi-hero-block--current .okdesk-kpi-flow-val--closed.okdesk-kpi-value--hero {
    color: #64748b;
}
.okdesk-kpi-hero-row--split {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 10px;
}
.okdesk-kpi-hero-split-right--flow {
    align-self: stretch;
    justify-content: center;
}
.okdesk-kpi-hero-split-left,
.okdesk-kpi-hero-split-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
}
.okdesk-kpi-hero-split-left {
    align-items: center;
    text-align: center;
}
.okdesk-kpi-hero-split-right {
    align-items: flex-start;
    text-align: left;
    justify-content: center;
}
.okdesk-kpi-hero-flow-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
}
.okdesk-kpi-hero-split-right .okdesk-kpi-hero-delta {
    font-size: 12px;
}
.okdesk-pace-value--hero .okdesk-pace-num {
    font-size: 20px;
    line-height: 1.1;
    font-weight: 700;
}
.okdesk-pace-value--hero .okdesk-pace-suffix {
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
}
.okdesk-kpi-card--volume .okdesk-kpi-card-body--hero,
.okdesk-kpi-card--avg .okdesk-kpi-card-body--hero {
    min-height: 78px;
    flex-direction: column;
}
.okdesk-kpi-card-foot {
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px solid #e2e8f0;
    font-size: 9px;
    color: #94a3b8;
    line-height: 1.35;
    flex-shrink: 0;
}
.okdesk-kpi-card-foot b {
    color: #334155;
    font-weight: 700;
}
.okdesk-kpi-card-compare {
    font-size: 9px;
    line-height: 1.35;
    color: #475569;
    padding: 2px 0;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 0;
}
.okdesk-kpi-card--volume .okdesk-kpi-card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.okdesk-kpi-card--avg .okdesk-kpi-metrics-row {
    flex: 0 0 auto;
}
.okdesk-kpi-card--avg .okdesk-kpi-card-compare {
    flex: 1 1 auto;
}
.okdesk-compare-line {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    align-items: baseline;
}
.okdesk-compare-line + .okdesk-compare-line {
    margin-top: 2px;
}
.okdesk-compare-was b {
    font-weight: 700;
    color: #334155;
}
.okdesk-compare-change.okdesk-mom--good { color: #15803d; font-weight: 700; }
.okdesk-compare-change.okdesk-mom--bad { color: #b91c1c; font-weight: 700; }
.okdesk-compare-change.okdesk-mom--neutral { color: #94a3b8; font-weight: 600; }
.okdesk-volume-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    align-items: center;
    text-align: center;
}
.okdesk-split-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 6px 8px;
    width: 100%;
    align-items: stretch;
}
.okdesk-compare-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    min-height: 94px;
}
.okdesk-split-grid--row {
    align-items: stretch;
}
.okdesk-split-grid--daily {
    min-height: 52px;
}
.okdesk-split-grid--month {
    min-height: 38px;
}
.okdesk-split-label-row {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 13px;
    width: 100%;
}
.okdesk-split-value-row {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 17px;
    width: 100%;
}
.okdesk-split-meta-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 11px;
    width: 100%;
}
.okdesk-split-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1px;
    min-width: 0;
}
.okdesk-split-col--current .okdesk-split-label {
    color: #0369a1;
    font-weight: 700;
}
.okdesk-split-col--current .okdesk-daily-val,
.okdesk-split-col--current .okdesk-pace-num,
.okdesk-split-col--current .okdesk-kpi-value {
    color: #0369a1;
}
.okdesk-split-col--current .okdesk-volume-day-closed {
    color: #64748b;
}
.okdesk-split-label--nowrap {
    white-space: nowrap;
    font-size: 9px;
    line-height: 1.15;
}
.okdesk-split-divider {
    width: 1px;
    background: #e2e8f0;
    align-self: stretch;
    margin: 2px 0;
}
.okdesk-split-caption {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.35px;
    color: #94a3b8;
    line-height: 1.15;
}
.okdesk-split-label {
    font-size: 9.5px;
    font-weight: 600;
    color: #64748b;
    line-height: 1.2;
}
.okdesk-pace-value {
    line-height: 1.1;
}
.okdesk-pace-num {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}
.okdesk-pace-suffix {
    font-size: 10px;
    font-weight: 600;
    color: #94a3b8;
}
.okdesk-pace-row {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
}
.okdesk-daily-value-row {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
}
.okdesk-daily-val {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.1;
}
.okdesk-volume-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
}
.okdesk-volume-label {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    flex-shrink: 0;
    line-height: 1.2;
}
.okdesk-kpi-card--count.okdesk-kpi-card--alarm {
    background: #fef2f2;
    border-color: #f87171;
    box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.25);
}
.okdesk-kpi-value--alarm {
    color: #b91c1c !important;
}
.okdesk-alarm-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    margin-left: 2px;
}
.okdesk-compare-pct--alarm {
    display: inline-block;
    background: #ef4444;
    color: #fff !important;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
    margin-left: 2px;
}
.okdesk-kpi-value--sm {
    font-size: 13px;
}
.okdesk-kpi-card--traffic {
    font-weight: 600;
}
.okdesk-kpi-card--count {
    font-weight: 600;
}
.okdesk-kpi-card--sla {
    font-weight: 600;
}
.okdesk-kpi-card--sla .okdesk-kpi-card-foot {
    border-top-color: rgba(0, 0, 0, 0.08);
}
.okdesk-kpi-pair {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
    flex-wrap: wrap;
}
.okdesk-kpi-pair--nowrap {
    flex-wrap: nowrap;
    white-space: nowrap;
}
.okdesk-volume-day-main {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
}
.okdesk-volume-day-closed {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}
.okdesk-micro-delta-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 5px;
    max-width: 100%;
    font-size: 9px;
    line-height: 1.15;
}
.okdesk-micro-delta {
    font-weight: 700;
    white-space: nowrap;
}
.okdesk-micro-hint {
    font-size: 8px;
    font-weight: 600;
    color: #94a3b8;
    white-space: nowrap;
}
.okdesk-micro-delta-wrap .okdesk-kpi-hero-delta {
    font-size: 9px;
}
.okdesk-micro-delta-wrap .okdesk-compare-pct--alarm {
    font-size: 8px;
    padding: 0 4px;
}
.okdesk-volume-hero-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    width: 100%;
}
.okdesk-volume-closed-line {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: 11px;
}
.okdesk-volume-closed-label {
    font-size: 9px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: lowercase;
}
.okdesk-volume-month-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3px;
    padding-top: 6px;
    border-top: 1px dashed #e2e8f0;
}
.okdesk-volume-baseline {
    line-height: 1.1;
}
.okdesk-volume-baseline-num {
    font-size: 17px;
    font-weight: 700;
    color: #64748b;
}
.okdesk-kpi-pair-sep {
    color: #94a3b8;
    font-weight: 500;
}
.okdesk-kpi-chip {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 12px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 11px;
    color: #475569;
    line-height: 1.3;
}
.okdesk-kpi-chip--traffic {
    font-weight: 600;
}
.okdesk-kpi-label {
    font-weight: 700;
    color: #1d3557;
}
.okdesk-kpi-value {
    font-weight: 700;
    font-size: 15px;
    color: #0f172a;
}
.okdesk-kpi-value--hero {
    font-size: 20px;
    line-height: 1.1;
}
.okdesk-kpi-value--compact {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.1;
    color: #0f172a;
}
.okdesk-kpi-card-sub--tight {
    margin-top: -2px;
}
.okdesk-kpi-metrics-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 6px;
}
.okdesk-kpi-metric-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.okdesk-kpi-metric-col .okdesk-kpi-card-body {
    flex: 0 0 auto;
}
.okdesk-kpi-metric-delta {
    font-size: 9px;
    line-height: 1.2;
    min-height: 13px;
}
.okdesk-kpi-value--muted {
    color: #64748b;
    font-weight: 600;
    font-size: 15px;
}
.okdesk-kpi-hint {
    font-size: 9px;
    color: #94a3b8;
    text-transform: lowercase;
}
.okdesk-traffic-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.okdesk-sla-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.okdesk-sla-metric {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.okdesk-sla-name {
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
}
.okdesk-sla-value {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}
.okdesk-sla-sep {
    width: 1px;
    height: 20px;
    background: #cbd5e1;
}
.okdesk-chart-block {
    margin-top: 4px;
    width: 100%;
}
.okdesk-chart-section {
    margin-bottom: 14px;
}
.okdesk-chart-section:last-child {
    margin-bottom: 0;
}
.okdesk-chart-section-title {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.okdesk-chart-collapsed {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-size: 10.5px;
    line-height: 1.3;
}
.okdesk-chart-collapsed:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}
.okdesk-chart-collapsed-title {
    font-weight: 700;
    color: #475569;
    flex-shrink: 0;
}
.okdesk-chart-collapsed-summary {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px 6px;
    color: #64748b;
    line-height: 1.3;
    overflow-x: auto;
    scrollbar-width: none;
}
.okdesk-chart-collapsed-summary::-webkit-scrollbar {
    display: none;
}
.okdesk-chart-cmp-seg {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 3px 4px;
    flex-shrink: 0;
}
.okdesk-chart-cmp-month {
    font-weight: 700;
    color: #475569;
    flex-shrink: 0;
    font-size: 10px;
}
.okdesk-chart-cmp-chips {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 3px;
}
.okdesk-chart-cmp-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    padding: 1px 4px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 3px;
    font-size: 9.5px;
    color: #334155;
    white-space: nowrap;
}
.okdesk-chart-cmp-chip--good { border-color: #bbf7d0; background: #f0fdf4; }
.okdesk-chart-cmp-chip--bad { border-color: #fecaca; background: #fef2f2; }
.okdesk-chart-cmp-chip--neutral { border-color: #e2e8f0; }
.okdesk-chart-cmp-delta {
    font-size: 8.5px;
    font-weight: 700;
}
.okdesk-chart-cmp-chip--good .okdesk-chart-cmp-delta { color: #15803d; }
.okdesk-chart-cmp-chip--bad .okdesk-chart-cmp-delta { color: #b91c1c; }
.okdesk-chart-cmp-chip--neutral .okdesk-chart-cmp-delta { color: #94a3b8; }
.okdesk-chart-cmp-vs {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #94a3b8;
    flex-shrink: 0;
}
.okdesk-chart-cmp-empty {
    color: #94a3b8;
    font-style: italic;
}
.okdesk-chart-collapsed-action {
    font-size: 9.5px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    flex-shrink: 0;
    white-space: nowrap;
}
.okdesk-chart-expanded-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.okdesk-chart-collapse-btn {
    background: transparent;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    cursor: pointer;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}
.okdesk-chart-collapse-btn:hover {
    background: #f8fafc;
}
.okdesk-chart-title {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
}
.okdesk-chart {
    display: flex;
    align-items: flex-end;
    gap: 0;
    min-height: 200px;
    padding: 12px 4px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fafafa;
    overflow-x: auto;
    width: 100%;
}
.okdesk-chart-month {
    flex: 1 1 0;
    min-width: 84px;
    display: flex;
    flex-direction: column;
    padding: 0 10px;
    border-right: 1px solid #e2e8f0;
    cursor: default;
}
.okdesk-chart-day {
    flex: 1 1 0;
    min-width: 58px;
    display: flex;
    flex-direction: column;
    padding: 0 5px;
    border-right: 1px solid #e2e8f0;
    cursor: default;
}
.okdesk-chart-day:last-child {
    border-right: none;
}
.okdesk-chart-month:last-child {
    border-right: none;
}
.okdesk-chart--daily {
    min-height: 170px;
}
.okdesk-chart--daily .okdesk-chart-day {
    flex: 0 0 auto;
    min-width: 58px;
    padding: 0 5px;
}
.okdesk-chart--daily .okdesk-chart-month-row {
    grid-template-columns: minmax(0, 1fr) 30px;
    column-gap: 4px;
    height: 148px;
}
.okdesk-chart--daily .okdesk-chart-bar-col {
    width: 30px;
    height: 148px;
    gap: 4px;
}
.okdesk-chart--daily .okdesk-chart-month-label {
    font-size: 8px;
}
.okdesk-chart--daily .okdesk-chart-stat {
    font-size: 9px;
}
.okdesk-chart--daily .okdesk-chart-stat-label {
    font-size: 7px;
}
.okdesk-chart-month-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    column-gap: 10px;
    align-items: end;
    height: 168px;
}
.okdesk-chart-bar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 44px;
    height: 168px;
    gap: 6px;
    grid-column: 2;
    flex-shrink: 0;
}
.okdesk-chart-month-label {
    font-size: 9px;
    font-weight: 700;
    color: #475569;
    text-align: center;
    line-height: 1.2;
    flex-shrink: 0;
    width: 100%;
    white-space: nowrap;
}
.okdesk-chart-stats-side {
    grid-column: 1;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 3px;
    padding-bottom: 2px;
    padding-right: 2px;
}
.okdesk-chart-stat-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    line-height: 1.15;
    min-width: 0;
    max-width: 100%;
}
.okdesk-chart-stat-label {
    font-size: 8px;
    color: #94a3b8;
    flex-shrink: 0;
    line-height: 1.2;
}
.okdesk-chart-bar-wrap {
    flex: 1 1 auto;
    width: 30px;
    min-height: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.okdesk-chart-stack {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: 3px 3px 0 0;
    overflow: hidden;
    background: #e2e8f0;
    flex-shrink: 0;
}
.okdesk-chart-seg {
    display: block;
    width: 100%;
    min-height: 2px;
}
.okdesk-chart-on-time,
.okdesk-legend-swatch.okdesk-chart-on-time {
    background: #457b9d;
}
.okdesk-chart-overdue,
.okdesk-legend-swatch.okdesk-chart-overdue {
    background: #ef4444;
}
.okdesk-chart-stats {
    display: none;
}
.okdesk-chart-stat {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.15;
    text-align: left;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.okdesk-chart-stat--created { color: #1e40af; }
.okdesk-chart-stat--overdue { color: #b91c1c; font-weight: 600; }
.okdesk-chart-stat--dash {
    font-size: 11px;
    color: #cbd5e1;
    font-weight: 600;
}
.okdesk-mom {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.15;
}
.okdesk-mom--good { color: #15803d; }
.okdesk-mom--bad { color: #b91c1c; }
.okdesk-mom--neutral { color: #94a3b8; }
.okdesk-kpi-label-muted {
    font-weight: 500;
    color: #94a3b8;
    font-size: 9px;
}
.okdesk-avg-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 6px;
    width: 100%;
    flex: 1 1 auto;
}
.okdesk-avg-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    padding: 4px 2px;
    background: rgba(255, 255, 255, 0.65);
    border-radius: 5px;
}
.okdesk-avg-val {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.15;
}
.okdesk-avg-sub {
    font-size: 9px;
    color: #64748b;
    line-height: 1.2;
    min-height: 11px;
}
.okdesk-avg-sub--empty {
    visibility: hidden;
}
.okdesk-avg-tag {
    font-size: 9px;
    font-weight: 700;
    color: #475569;
    line-height: 1.15;
}
.okdesk-avg-vs {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    margin-top: 2px;
}
.okdesk-avg-vs--neutral { color: #94a3b8; }
.okdesk-avg-vs--up { color: #b45309; }
.okdesk-avg-vs--down { color: #15803d; }
.okdesk-avg-benchmark {
    text-align: center;
    border-top: none;
    padding-top: 0;
}
.okdesk-avg-benchmark b {
    color: #334155;
    font-weight: 700;
}
.okdesk-chart-month-value {
    font-size: 10px;
    font-weight: 700;
    color: #334155;
}
.okdesk-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
    font-size: 10px;
    color: #64748b;
}
.okdesk-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.okdesk-legend-hint {
    color: #94a3b8;
    font-style: italic;
}
.okdesk-legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}
@media (max-width: 640px) {
    .okdesk-chart-month {
        min-width: 68px;
    }
    .okdesk-chart-stat {
        font-size: 10px;
    }
}

/* —— Review notify bell (dropdown inbox) —— */
.pr-notify-host {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.pr-notify {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    color: var(--theme-primary, #7c818a);
    box-shadow: none;
}
.pr-notify:hover {
    background: transparent;
    color: #5f646d;
}
.pr-notify.has-items {
    color: var(--color-accent, #d81818);
}
.pr-notify.has-items:hover {
    color: var(--color-accent-hover, #bc0000);
}
.pr-notify__ico {
    display: block;
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: url("../assets/icons/notify-bell.png") center / contain no-repeat;
    mask: url("../assets/icons/notify-bell.png") center / contain no-repeat;
}
.pr-notify__dot {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent, #d81818);
    box-shadow: 0 0 0 1.5px #fff;
    pointer-events: none;
}
.pr-notify.has-items .pr-notify__dot {
    animation: pr-notify-dot-blink 1.15s ease-in-out infinite;
}
@keyframes pr-notify-dot-blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.2; transform: scale(0.8); }
}
.pr-notify__badge { display: none !important; }
.pr-notify-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 80;
    width: min(380px, calc(100vw - 24px));
    max-height: min(70vh, 520px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);
    overflow: hidden;
}
.pr-notify-panel[hidden] { display: none !important; }
.pr-notify-panel__head {
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-accent, #d81818);
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    background: #fafafa;
}
.pr-notify-panel__list {
    overflow: auto;
    flex: 1;
}
.pr-notify-panel__empty {
    padding: 20px 14px;
    text-align: center;
    font-size: 13px;
    color: var(--color-text-muted, #6b7280);
}
.pr-notify-panel__row {
    display: block;
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    text-decoration: none;
    color: inherit;
}
.pr-notify-panel__row:hover {
    background: #f9fafb;
}
.pr-notify-panel__row-top {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 4px;
    font-size: 12px;
}
.pr-notify-panel__chip,
.pr-notify-panel__reason {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #64748b;
}
.pr-notify-panel__reason {
    background: var(--color-accent-light, #fceded);
    color: var(--color-accent, #d81818);
}
.pr-notify-panel__title {
    font-size: 13px;
    color: var(--color-text, #1f2937);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pr-notify-panel__row-bottom {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
    font-size: 11px;
    color: var(--color-text-muted, #6b7280);
}
.pr-notify-panel__footer {
    display: block;
    padding: 10px 12px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-accent, #d81818);
    text-decoration: none;
    border-top: 1px solid var(--color-border, #e5e7eb);
    background: #fafafa;
}
.pr-notify-panel__footer:hover {
    background: var(--color-accent-light, #fceded);
}
.pr-notify-panel__comment {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--color-text-muted, #6b7280);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-wrap;
}
.pr-notify-panel__comment.is-empty {
    font-style: italic;
    opacity: 0.85;
}
.pr-notify-card {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.pr-notify-card__engineer {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text, #1f2937);
    margin-bottom: 2px;
}
.pr-notify-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.pr-notify-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    background: #fff;
    color: var(--color-text, #1f2937);
}
.pr-notify-card__btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.pr-notify-card__btn.is-accept {
    background: #059669;
    color: #fff;
}
.pr-notify-card__btn.is-accept:hover:not(:disabled) {
    background: #047857;
}
.pr-notify-card__btn.is-reject {
    border-color: var(--color-border, #e5e7eb);
    color: #4b5563;
}
.pr-notify-card__btn.is-reject:hover:not(:disabled) {
    background: #f9fafb;
}
.pr-notify-card__btn.is-chat {
    background: var(--color-accent-light, #fceded);
    color: var(--color-accent, #d81818);
}
.pr-notify-card__btn.is-chat:hover {
    background: #f8d4d4;
}

/* Роли доступа — карточки по ролям, без горизонтального скролла */
.access-roles-page-note {
    margin: 0 0 16px;
}
.access-roles-matrix-wrap {
    overflow-x: visible;
}
.access-roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.access-role-card {
    background: #fff;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    border-left: 3px solid var(--color-accent, #d81818);
    padding: 16px 16px 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}
.access-role-card__head .access-role-name-input {
    width: 100%;
    box-sizing: border-box;
    height: 36px;
    font-size: 14px;
    font-weight: 600;
}
.access-roles-id {
    margin-top: 4px;
    font-size: 11px;
    color: #94a3b8;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.access-role-card__block-title {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-accent, #d81818);
}
.access-cap-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.access-cap-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #1f2937;
    cursor: pointer;
    line-height: 1.35;
}
.access-cap-item input {
    margin-top: 2px;
    flex-shrink: 0;
}
.access-scope-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: #64748b;
}
.access-scope-label .form-control {
    height: 36px;
    font-size: 13px;
}