html {
    font-size: 16px;
}

body {
    font-family: var(--font-family);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--clr-text-primary);
    background: var(--clr-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
}

/* Layout */
.kpi-layout {
    display: flex;
    min-height: 100vh;
}

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

.kpi-content {
    flex: 1;
    padding: var(--space-6);
    background: var(--clr-bg-secondary);
}

/* Typography */
.kpi-display {
    font-size: var(--text-4xl);
    font-weight: var(--fw-bold);
    line-height: var(--leading-tight);
}

.kpi-h1 {
    font-size: var(--text-3xl);
    font-weight: var(--fw-bold);
    line-height: var(--leading-tight);
}

.kpi-h2 {
    font-size: var(--text-2xl);
    font-weight: var(--fw-semibold);
    line-height: var(--leading-tight);
}

.kpi-h3 {
    font-size: var(--text-xl);
    font-weight: var(--fw-semibold);
    line-height: var(--leading-tight);
}

.kpi-h4 {
    font-size: var(--text-lg);
    font-weight: var(--fw-medium);
    line-height: var(--leading-normal);
}

.kpi-h5 {
    font-size: var(--text-base);
    font-weight: var(--fw-medium);
    line-height: var(--leading-normal);
}

/* Сворачиваемый блок (<details>) */
.kpi-details > summary {
    list-style: none;
    cursor: pointer;
}

    .kpi-details > summary::-webkit-details-marker {
        display: none;
    }

    .kpi-details > summary::after {
        content: "\f107";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        margin-left: var(--space-2);
    }

.kpi-details[open] > summary::after {
    content: "\f106";
}

/* Buttons */
.kpi-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-family);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    line-height: 1;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
}

    .kpi-btn:focus-visible {
        outline: 2px solid var(--clr-accent);
        outline-offset: 2px;
    }

    .kpi-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
    }

.kpi-btn-primary {
    background: var(--clr-accent);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

    .kpi-btn-primary:hover {
        background: var(--clr-accent-hover);
        box-shadow: var(--shadow-md);
        transform: translateY(-1px);
    }

    .kpi-btn-primary:active {
        transform: translateY(0);
        box-shadow: var(--shadow-xs);
    }

.kpi-btn-secondary {
    background: var(--clr-bg);
    color: var(--clr-text-primary);
    border-color: var(--clr-border);
}

    .kpi-btn-secondary:hover {
        background: var(--clr-bg-secondary);
        border-color: var(--clr-border-hover);
    }

.kpi-btn-ghost {
    background: transparent;
    color: var(--clr-text-secondary);
}

    .kpi-btn-ghost:hover {
        background: var(--clr-bg-secondary);
        color: var(--clr-text-primary);
    }

.kpi-btn-outline {
    background: transparent;
    color: var(--clr-text-primary);
    border-color: var(--clr-border);
}

    .kpi-btn-outline:hover {
        background: var(--clr-bg-secondary);
        border-color: var(--clr-border-hover);
    }

.kpi-btn-danger {
    background: var(--clr-error);
    color: #fff;
}

    .kpi-btn-danger:hover {
        background: #dc2626;
    }

.kpi-btn-icon {
    padding: var(--space-2);
    min-width: 32px;
    min-height: 32px;
}

.kpi-btn-sm {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
}

.kpi-btn-lg {
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-base);
}

/* Вдавленный овал-фильтр (заметный элемент на дашбордах) */
.kpi-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-family);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    line-height: 1;
    color: var(--clr-accent);
    background: var(--clr-bg-tertiary);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-full);
    box-shadow: var(--inset-shadow);
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
}

    .kpi-filter-pill i {
        font-size: 0.85em;
    }

.kpi-filter-pill-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--clr-pit);
    box-shadow: var(--inset-shadow);
}

.kpi-filter-pill:hover {
    color: var(--clr-accent-hover);
    box-shadow: var(--inset-shadow);
}

.kpi-filter-pill:active {
    color: var(--clr-accent-hover);
    box-shadow: var(--inset-shadow-strong);
    transform: translateY(1px);
}

.kpi-filter-pill:focus-visible {
    outline: 2px solid var(--clr-accent);
    outline-offset: 2px;
}

.kpi-filter-pill-sm {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
}

/* Chairman filter: plain link style — no background/border/shadow */
#chairmanFilterToggle.kpi-filter-pill,
#employeeFilterToggle.kpi-filter-pill {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

    #chairmanFilterToggle.kpi-filter-pill .kpi-filter-pill-label,
    #employeeFilterToggle.kpi-filter-pill .kpi-filter-pill-label {
        background: transparent;
        box-shadow: none;
        padding: 0;
    }

    #chairmanFilterToggle.kpi-filter-pill:hover,
    #employeeFilterToggle.kpi-filter-pill:hover {
        box-shadow: none;
    }

    #chairmanFilterToggle.kpi-filter-pill:active,
    #employeeFilterToggle.kpi-filter-pill:active {
        box-shadow: none;
        transform: none;
    }

/* Переключатель iOS-стиля (круглый тумблер: слева — свёрнуто, справа — развёрнуто) */
.kpi-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--clr-border);
    cursor: pointer;
    transition: background var(--transition-base);
    flex-shrink: 0;
}

.kpi-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--clr-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform var(--transition-base);
    will-change: transform;
    pointer-events: none;
}

.kpi-switch.is-on {
    background: var(--clr-success);
}

    .kpi-switch.is-on .kpi-switch-thumb {
        transform: translateX(18px);
    }

.kpi-switch:focus-visible {
    outline: 2px solid var(--clr-accent);
    outline-offset: 2px;
}

/* Cards */
.kpi-card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs);
    transition: all var(--transition-base);
    padding: var(--space-6);
    overflow-x: auto;
}

    .kpi-card:hover {
        box-shadow: var(--shadow-md);
        border-color: var(--clr-border-hover);
    }

.kpi-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--clr-border);
}

.kpi-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--clr-border);
}

/* KPI Metric Card */
.kpi-metric-card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    padding: var(--space-5);
    transition: all var(--transition-base);
}

    .kpi-metric-card:hover {
        box-shadow: var(--shadow-md);
        border-color: var(--clr-border-hover);
        transform: translateY(-2px);
    }

.kpi-metric-value {
    font-size: var(--text-3xl);
    font-weight: var(--fw-bold);
    color: var(--clr-text-primary);
    line-height: 1;
    margin-bottom: var(--space-1);
}

.kpi-metric-label {
    font-size: var(--text-sm);
    color: var(--clr-text-secondary);
    margin-bottom: var(--space-3);
}

.kpi-metric-unit {
    font-size: var(--text-sm);
    font-weight: var(--fw-normal);
    color: var(--clr-text-tertiary);
    margin-left: var(--space-1);
}

.kpi-progress {
    height: 4px;
    background: var(--clr-bg-tertiary);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-top: var(--space-3);
}

.kpi-progress-bar {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 0.8s ease;
    background: linear-gradient(90deg, var(--clr-accent), #6366f1);
}

.kpi-progress-success {
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

.kpi-progress-warning {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.kpi-progress-danger {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

/* Pills */
.kpi-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    line-height: 1.5;
    border-radius: var(--radius-full);
    white-space: nowrap;
    gap: var(--space-1);
}

.kpi-pill-beginner {
    background: #fef2f2;
    color: #dc2626;
}

.kpi-pill-basic {
    background: #fffbeb;
    color: #d97706;
}

.kpi-pill-confident {
    background: #f0fdf4;
    color: #16a34a;
}

.kpi-pill-expert {
    background: #eef2ff;
    color: #4f46e5;
}

[data-bs-theme="dark"] .kpi-pill-beginner {
    background: #450a0a;
    color: #fca5a5;
}

[data-bs-theme="dark"] .kpi-pill-basic {
    background: #451a03;
    color: #fcd34d;
}

[data-bs-theme="dark"] .kpi-pill-confident {
    background: #052e16;
    color: #86efac;
}

[data-bs-theme="dark"] .kpi-pill-expert {
    background: #1e1b4b;
    color: #a5b4fc;
}

.kpi-pill-active {
    background: var(--clr-success-bg);
    color: var(--clr-success);
}

.kpi-pill-inactive {
    background: var(--clr-bg-tertiary);
    color: var(--clr-text-tertiary);
}

.kpi-pill-pending {
    background: var(--clr-warning-bg);
    color: var(--clr-warning);
}

.kpi-pill-rejected {
    background: var(--clr-error-bg);
    color: var(--clr-error);
}

.kpi-pill-vacation {
    background: var(--clr-accent-bg, #e0f2fe);
    color: var(--clr-accent, #0369a1);
}

[data-bs-theme="dark"] .kpi-pill-vacation {
    background: #0c2a44;
    color: #7dd3fc;
}

.kpi-pill-approved {
    background: var(--clr-success-bg);
    color: var(--clr-success);
}

.kpi-pill-info {
    background: var(--clr-accent-bg, #e0f2fe);
    color: var(--clr-accent, #0369a1);
}

[data-bs-theme="dark"] .kpi-pill-info {
    background: #0c2a44;
    color: #7dd3fc;
}

/* ККК: цветовые зоны месячного рейтинга */
.kkc-color-grey {
    background: #f4f4f5;
    color: #52525b;
}

.kkc-color-lightblue {
    background: #eff6ff;
    color: #2563eb;
}

.kkc-color-blue {
    background: #dbeafe;
    color: #1d4ed8;
}

.kkc-color-orange {
    background: #fff7ed;
    color: #ea580c;
}

[data-bs-theme="dark"] .kkc-color-grey {
    background: #18181b;
    color: #a1a1aa;
}

[data-bs-theme="dark"] .kkc-color-lightblue {
    background: #172554;
    color: #93c5fd;
}

[data-bs-theme="dark"] .kkc-color-blue {
    background: #1e3a8a;
    color: #bfdbfe;
}

[data-bs-theme="dark"] .kkc-color-orange {
    background: #431407;
    color: #fdba74;
}

tr.kkc-color-grey {
    --bs-table-bg: #f4f4f5;
    color: #52525b;
}

tr.kkc-color-lightblue {
    --bs-table-bg: #eff6ff;
    color: #2563eb;
}

tr.kkc-color-blue {
    --bs-table-bg: #dbeafe;
    color: #1d4ed8;
}

tr.kkc-color-orange {
    --bs-table-bg: #fff7ed;
    color: #ea580c;
}

[data-bs-theme="dark"] tr.kkc-color-grey {
    --bs-table-bg: #18181b;
    color: #a1a1aa;
}

[data-bs-theme="dark"] tr.kkc-color-lightblue {
    --bs-table-bg: #172554;
    color: #93c5fd;
}

[data-bs-theme="dark"] tr.kkc-color-blue {
    --bs-table-bg: #1e3a8a;
    color: #bfdbfe;
}

[data-bs-theme="dark"] tr.kkc-color-orange {
    --bs-table-bg: #431407;
    color: #fdba74;
}

/* Forms */
.kpi-input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-family);
    font-size: var(--text-sm);
    color: var(--clr-text-primary);
    background: var(--clr-bg);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    transition: all var(--transition-base);
    line-height: var(--leading-normal);
    margin-top: var(--space-3);
}

    .kpi-input::placeholder {
        color: var(--clr-text-tertiary);
    }

    .kpi-input:hover {
        border-color: var(--clr-border-hover);
    }

    .kpi-input:focus {
        outline: none;
        border-color: var(--clr-accent);
        box-shadow: 0 0 0 3px var(--clr-accent-subtle);
    }

    .kpi-input:disabled {
        background: var(--clr-bg-tertiary);
        color: var(--clr-text-disabled);
        cursor: not-allowed;
    }

.kpi-input-error {
    border-color: var(--clr-error);
}

    .kpi-input-error:focus {
        box-shadow: 0 0 0 3px var(--clr-error-bg);
    }

.kpi-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    color: var(--clr-text-primary);
    margin-bottom: var(--space-1);
}

.kpi-form-group {
    margin-bottom: var(--space-5);
}

.kpi-validation {
    font-size: var(--text-xs);
    color: var(--clr-error);
    margin-top: var(--space-1);
}

.kpi-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 32px;
}

.kpi-textarea {
    min-height: 80px;
    resize: vertical;
}

/* List group (roles / departments) */
.kpi-list-group {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    background: var(--clr-bg);
    overflow: hidden;
    margin-top: var(--space-2);
}

.kpi-list-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    color: var(--clr-text-primary);
    border-bottom: 1px solid var(--clr-border);
    cursor: pointer;
    user-select: none;
    transition: background var(--transition-fast);
}

    .kpi-list-item:last-child {
        border-bottom: none;
    }

    .kpi-list-item:hover {
        background: var(--clr-bg-secondary);
    }

details.kpi-list-item {
    display: block;
}

.kpi-list-item.selected {
    background: var(--clr-accent-light);
    color: var(--clr-accent);
}

.kpi-list-item input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--clr-accent);
    flex-shrink: 0;
}
/* Leader rows — horizontal card inside modals (not overridden by .kpi-modal-leaders) */
.kpi-leader-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    border: 1px solid var(--clr-border);
    cursor: pointer;
    transition: all var(--transition-fast);
}

    .kpi-leader-row:hover {
        border-color: var(--clr-border-hover);
        box-shadow: var(--shadow-sm);
        background: var(--clr-bg-secondary);
    }

    .kpi-leader-row .kpi-avatar {
        overflow: hidden;
        flex-shrink: 0;
        width: 32px;
        height: 32px;
    }

        .kpi-leader-row .kpi-avatar > div,
        .kpi-leader-row .kpi-avatar > img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: var(--radius-full);
        }

        .kpi-leader-row .kpi-avatar > div {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.85rem;
            color: var(--clr-text-secondary);
            background: var(--clr-bg-secondary);
        }

.kpi-leader-row-title {
    font-weight: var(--fw-semibold);
    color: var(--clr-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-leader-row-sub {
    font-size: var(--text-xs);
    color: var(--clr-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-leader-row-score {
    flex-shrink: 0;
    text-align: end;
}

/* Подпись переключателя состава рейтинга (виджет «Лучшие сотрудники») */
.kpi-leaders-filter-label {
    font-size: var(--text-xs);
    white-space: nowrap;
    user-select: none;
    color: var(--clr-text-secondary);
    transition: color var(--transition-fast);
}
.kpi-leaders-filter-label.is-on {
    color: var(--clr-accent);
    font-weight: var(--fw-semibold);
}
/* Плавная подмена строк рейтинга при переключении фильтра/подгрузке страниц */
[data-leaders-container] { transition: opacity var(--transition-base); }
.kpi-leaders-swap { animation: kpi-leaders-swap var(--transition-base); }
@keyframes kpi-leaders-swap {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}
.inspector-record-chk {
    width: 1rem;
    height: 1rem;
    accent-color: var(--clr-accent);
    vertical-align: middle;
}

.kpi-list-empty {
    padding: var(--space-3);
    font-size: var(--text-sm);
    color: var(--clr-text-tertiary);
}

/* Tables */
.kpi-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .kpi-table th {
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-xs);
        font-weight: var(--fw-semibold);
        color: var(--clr-text-tertiary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        text-align: left;
        border-bottom: 1px solid var(--clr-border);
        white-space: nowrap;
        user-select: none;
    }

    .kpi-table td {
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-sm);
        color: var(--clr-text-primary);
        border-bottom: 1px solid var(--clr-border);
        vertical-align: middle;
    }

    .kpi-table tbody tr {
        transition: background var(--transition-fast);
    }

        .kpi-table tbody tr:hover {
            background: var(--clr-bg-secondary);
        }

        .kpi-table tbody tr.kpi-row-current {
            background: var(--clr-accent-light);
        }

            .kpi-table tbody tr.kpi-row-current:hover {
                background: var(--clr-accent-light);
            }

.kpi-table-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-1);
}

/* Sidebar */
.kpi-sidebar {
    width: 260px;
    min-height: 100vh;
    background: var(--clr-bg);
    border-right: 1px solid var(--clr-border);
    display: flex;
    flex-direction: column;
    padding: var(--space-4);
    flex-shrink: 0;
    z-index: 100;
}

.kpi-sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
    color: var(--clr-text-primary);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-6);
    text-decoration: none;
}

    .kpi-sidebar-brand:hover {
        color: var(--clr-accent);
    }

    .kpi-sidebar-brand i {
        color: var(--clr-accent);
        font-size: var(--text-xl);
    }

.kpi-sidebar-logo {
    height: 28px;
    width: auto;
    flex-shrink: 0;
}

.kpi-sidebar-section {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    color: var(--clr-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-4) var(--space-3) var(--space-2);
}

.kpi-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.kpi-sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    color: var(--clr-text-secondary);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all var(--transition-fast);
}

    .kpi-sidebar-link:hover {
        background: var(--clr-bg-secondary);
        color: var(--clr-text-primary);
    }

    .kpi-sidebar-link.active {
        background: var(--clr-accent-light);
        color: var(--clr-accent);
        font-weight: var(--fw-semibold);
    }

    .kpi-sidebar-link i {
        width: 18px;
        text-align: center;
        flex-shrink: 0;
    }

/* Sidebar accordion */
.kpi-sidebar-group {
    border: none;
}

    .kpi-sidebar-group > .kpi-sidebar-section {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        cursor: pointer;
        user-select: none;
        list-style: none;
    }

        .kpi-sidebar-group > .kpi-sidebar-section::-webkit-details-marker {
            display: none;
        }

        .kpi-sidebar-group > .kpi-sidebar-section::marker {
            content: '';
        }

.kpi-sidebar-chevron {
    font-size: 10px;
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}

.kpi-sidebar-group[open] > .kpi-sidebar-section > .kpi-sidebar-chevron {
    transform: rotate(180deg);
}

.kpi-sidebar-group > .kpi-sidebar-nav {
    overflow: hidden;
    transition: max-height 0.25s ease;
}

.kpi-sidebar-group:not([open]) > .kpi-sidebar-nav {
    max-height: 0;
}

/* Header */
.kpi-header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: var(--space-2) var(--space-6);
    background: var(--clr-bg);
    border-bottom: 1px solid var(--clr-border);
}

.kpi-main > .kpi-header {
    z-index: 1000;
}

.kpi-header-left {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.kpi-header-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Header actions (только .kpi-header-actions-collapsible): если кнопки не помещаются в одну строку — сворачиваются в дропдаун */
.kpi-header-actions-collapsible {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

    .kpi-header-actions-collapsible .kpi-header-actions-toggle {
        display: none;
    }

    .kpi-header-actions-collapsible.is-narrow .kpi-header-actions-toggle {
        display: inline-block;
    }

    .kpi-header-actions-collapsible.is-narrow > .kpi-btn {
        display: none;
    }

.kpi-header-actions-menu {
    inset: 131.5px 54px auto auto;
    max-width: 300px;
    min-width: 240px;
}

    .kpi-header-actions-menu .kpi-btn {
        width: 100%;
        justify-content: flex-start;
    }

        .kpi-header-actions-menu .kpi-btn + .kpi-btn {
            margin-top: 2px;
        }

/* Notification bell */
#notificationBell {
    position: relative;
}

.kpi-bell-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .kpi-bell-btn i {
        font-size: 17px;
        color: var(--clr-text-primary);
    }

    .kpi-bell-btn.kpi-bell-active {
        color: var(--clr-accent);
    }

.kpi-notification-badge {
    position: absolute;
    top: 3px;
    right: -16px;
    min-width: 17px;
    height: 15px;
    padding: 0 4px;
    font-size: 9px;
    font-weight: var(--fw-bold);
    color: #fff;
    background: var(--clr-error);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--clr-bg);
}

.kpi-bell-active {
    animation: kpi-bell-shake 0.5s ease-in-out;
}

@keyframes kpi-bell-shake {
    0%, 100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-15deg);
    }

    75% {
        transform: rotate(15deg);
    }
}

/* Substitute badge (заместитель approver'а) */
.kpi-substitute-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: var(--fw-semibold);
    color: #fff;
    background: var(--clr-info, #0d6efd);
    border-radius: var(--radius-full);
    white-space: nowrap;
    margin-right: 4px;
    vertical-align: middle;
}

/* Birthday bell (дни рождения) */
#birthdayBell {
    position: relative;
}

.kpi-birthday-dot {
    position: absolute;
    top: 3px;
    right: 0;
    width: 9px;
    height: 9px;
    border-radius: var(--radius-full);
    background: var(--clr-error);
    box-shadow: 0 0 0 2px var(--clr-bg);
}

    .kpi-birthday-dot.kpi-birthday-dot-pulse {
        animation: kpi-birthday-pulse 1.6s ease-in-out infinite;
    }

@keyframes kpi-birthday-pulse {
    0%, 100% {
        box-shadow: 0 0 0 2px var(--clr-bg);
    }

    50% {
        box-shadow: 0 0 0 2px var(--clr-bg), 0 0 0 5px rgba(220, 53, 69, .18);
    }
}

/* Notification dropdown */
#notificationDropdown {
    min-width: 280px;
}

.kpi-notif-header {
    font-weight: var(--fw-semibold);
    font-size: var(--text-sm);
    color: var(--clr-text-secondary);
    cursor: default;
}

    .kpi-notif-header:hover {
        background: transparent;
    }

.kpi-notif-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

    .kpi-notif-item i {
        color: var(--clr-accent);
    }

.kpi-notif-rejected i {
    color: var(--clr-error);
}

.kpi-notif-rejected {
    border-left: 3px solid var(--clr-error);
}

.kpi-notif-count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    color: #fff;
    background: var(--clr-error);
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#notificationDropdownEmpty {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    color: var(--clr-text-tertiary);
}

/* Cross-month pending banner */
.kpi-banner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.kpi-banner-warning {
    background: var(--clr-warning-bg);
    border: 1px solid var(--clr-warning);
    color: var(--clr-text-primary);
}

    .kpi-banner-warning > i {
        color: var(--clr-warning);
    }

.kpi-banner-month {
    font-weight: var(--fw-semibold);
    color: var(--clr-warning);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

    .kpi-banner-month:hover {
        color: var(--clr-text-primary);
    }

/* Approval matrix cells */
.kpi-indicator-archived {
    color: var(--clr-text-tertiary);
    font-weight: normal;
    font-style: italic;
    cursor: help;
}
.kpi-cell-pending {
    background: var(--clr-warning-bg);
    border: 1px solid var(--clr-warning);
}

.kpi-cell-dept-approved {
    background: var(--clr-success-bg);
    border: 1px solid var(--clr-success);
}

.kpi-cell-fully-approved {
    background: var(--clr-info-bg);
    border: 1px solid var(--clr-info);
}

.kpi-cell-rejected {
    background: var(--clr-error-bg);
    border: 1px solid var(--clr-error);
}

.kpi-matrix-cell {
    min-width: 50px;
    text-align: center;
    font-size: var(--text-sm);
    position: relative;
}

    .kpi-matrix-cell .kpi-approve-btn {
        display: none;
    }

.kpi-cell-pending .kpi-matrix-cell .kpi-approve-btn,
.kpi-cell-pending:hover .kpi-matrix-cell .kpi-approve-btn {
    display: inline-flex;
}

.kpi-reject-badge {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-1);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: var(--clr-error-bg);
    color: var(--clr-error);
    font-size: var(--text-xs);
    cursor: help;
}

.kpi-reject-reason {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kpi-reject-btn {
    color: var(--clr-error);
}

    .kpi-reject-btn:hover {
        background: var(--clr-error-bg);
        color: var(--clr-error);
    }

.kpi-btn-danger-outline {
    background: transparent;
    color: var(--clr-error);
    border: 1px solid var(--clr-error);
}

    .kpi-btn-danger-outline:hover {
        background: var(--clr-error);
        color: #fff;
    }

.kpi-btn-success-outline {
    background: transparent;
    color: var(--clr-success);
    border: 1px solid var(--clr-success);
}

    .kpi-btn-success-outline:hover {
        background: var(--clr-success);
        color: #fff;
    }

.kpi-btn-warning-outline {
    background: transparent;
    color: var(--clr-warning);
    border: 1px solid var(--clr-warning);
}

    .kpi-btn-warning-outline:hover {
        background: var(--clr-warning);
        color: #fff;
    }

.kpi-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--clr-accent-light);
    color: var(--clr-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: all var(--transition-fast);
}

    .kpi-avatar:hover {
        box-shadow: var(--shadow-md);
    }

/* Breadcrumbs */
.kpi-breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
    margin: 0;
}

.kpi-breadcrumb-item {
    font-size: var(--text-sm);
    color: var(--clr-text-tertiary);
}

    .kpi-breadcrumb-item a {
        color: var(--clr-text-secondary);
        text-decoration: none;
        transition: color var(--transition-fast);
    }

        .kpi-breadcrumb-item a:hover {
            color: var(--clr-accent);
        }

    .kpi-breadcrumb-item + .kpi-breadcrumb-item::before {
        content: '/';
        margin-right: var(--space-2);
        color: var(--clr-text-disabled);
    }

    .kpi-breadcrumb-item.active {
        color: var(--clr-text-primary);
        font-weight: var(--fw-medium);
    }

/* Modal */
.kpi-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
}

    .kpi-modal-overlay.open {
        opacity: 1;
        visibility: visible;
    }

.kpi-modal {
    background: var(--clr-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    width: 90%;
    max-width: 70%;
    max-height: 85vh;
    overflow-y: auto;
    transform: scale(0.95) translateY(10px);
    transition: all var(--transition-base);
}

.kpi-modal-overlay.open .kpi-modal {
    transform: scale(1) translateY(0);
}

.kpi-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--clr-border);
}

.kpi-modal-title {
    font-size: var(--text-lg);
    font-weight: var(--fw-semibold);
    color: var(--clr-text-primary);
}

.kpi-modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--clr-text-tertiary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

    .kpi-modal-close:hover {
        background: var(--clr-bg-secondary);
        color: var(--clr-text-primary);
    }

.kpi-modal-body {
    padding: var(--space-5) var(--space-6);
}

.kpi-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--clr-border);
}

/* Fullscreen leaders modal — professional dashboard style */
.kpi-modal-leaders {
    align-items: flex-start;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    padding: var(--space-5);
    animation: kpi-overlay-in 0.25s ease both;
}

@keyframes kpi-overlay-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.kpi-modal-leaders .kpi-modal-leaders-box {
    width: 100%;
    max-width: 1200px;
    max-height: none;
    height: calc(100vh - var(--space-10));
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255,255,255,0.05) inset;
    transform: scale(0.95) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
    opacity: 0;
}

.kpi-modal-leaders.open .kpi-modal-leaders-box {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Header — gradient accent bar + icon */
.kpi-modal-leaders .kpi-modal-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--clr-border);
    background: var(--clr-surface);
    flex-shrink: 0;
}

    .kpi-modal-leaders .kpi-modal-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--clr-accent), var(--clr-info), var(--clr-accent));
        background-size: 200% 100%;
        animation: kpi-header-gradient 4s ease infinite;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

@keyframes kpi-header-gradient {
    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.kpi-modal-leaders .kpi-leader-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--clr-accent-light);
    color: var(--clr-accent);
    border-radius: var(--radius-md);
    font-size: var(--text-lg);
    flex-shrink: 0;
    transition: all var(--transition-base);
}

    .kpi-modal-leaders .kpi-leader-icon:hover {
        background: var(--clr-accent);
        color: #fff;
        transform: scale(1.05);
    }

.kpi-modal-leaders .kpi-leader-title-group {
    flex: 1;
    min-width: 0;
}

    .kpi-modal-leaders .kpi-leader-title-group h4 {
        margin: 0;
        font-size: var(--text-xl);
        font-weight: var(--fw-bold);
        color: var(--clr-text-primary);
        line-height: var(--leading-tight);
        letter-spacing: -0.01em;
    }

    .kpi-modal-leaders .kpi-leader-title-group .kpi-leader-subtitle {
        font-size: var(--text-xs);
        color: var(--clr-text-tertiary);
        font-weight: var(--fw-medium);
        margin-top: 2px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

.kpi-modal-leaders .kpi-modal-header .kpi-btn-ghost {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

    .kpi-modal-leaders .kpi-modal-header .kpi-btn-ghost:hover {
        background: var(--clr-bg-tertiary);
        transform: rotate(90deg);
    }

/* Body */
.kpi-modal-leaders .kpi-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-6);
    scroll-behavior: smooth;
}

    .kpi-modal-leaders .kpi-modal-body::-webkit-scrollbar {
        width: 6px;
    }

    .kpi-modal-leaders .kpi-modal-body::-webkit-scrollbar-track {
        background: transparent;
    }

    .kpi-modal-leaders .kpi-modal-body::-webkit-scrollbar-thumb {
        background: var(--clr-border);
        border-radius: var(--radius-full);
    }

        .kpi-modal-leaders .kpi-modal-body::-webkit-scrollbar-thumb:hover {
            background: var(--clr-border-hover);
        }

    /* Cards inside modal — subtle entrance */
    .kpi-modal-leaders .kpi-modal-body > .kpi-card {
        animation: kpi-leader-card-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
        border-radius: var(--radius-md);
    }

        .kpi-modal-leaders .kpi-modal-body > .kpi-card + .kpi-card {
            margin-top: var(--space-5);
        }

@keyframes kpi-leader-card-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .kpi-modal-leaders {
        padding: var(--space-2);
    }

        .kpi-modal-leaders .kpi-modal-leaders-box {
            height: calc(100vh - var(--space-4));
            border-radius: var(--radius-md);
        }

        .kpi-modal-leaders .kpi-modal-header {
            padding: var(--space-4);
        }

        .kpi-modal-leaders .kpi-modal-body {
            padding: var(--space-4);
        }
}

/* Task cards inside leaderModal — styled as glass-morphism cards */
.kpi-modal-leaders .kpi-list-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    border: 1px solid var(--clr-border);
    background: var(--clr-surface);
    cursor: default;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

    .kpi-modal-leaders .kpi-list-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 3px;
        background: var(--clr-accent);
        border-radius: var(--radius-full);
        opacity: 0;
        transition: opacity var(--transition-fast);
    }

    .kpi-modal-leaders .kpi-list-item:hover {
        border-color: var(--clr-border-hover);
        box-shadow: var(--shadow-sm);
        transform: translateY(-1px);
    }

        .kpi-modal-leaders .kpi-list-item:hover::before {
            opacity: 1;
        }

    .kpi-modal-leaders .kpi-list-item + .kpi-list-item {
        margin-top: var(--space-3);
    }

    .kpi-modal-leaders .kpi-list-item > .d-flex {
        min-width: 0;
    }

/* Expandable details-based list items in modal */
.kpi-modal-leaders details.kpi-list-item {
    display: block;
}

    .kpi-modal-leaders details.kpi-list-item summary::-webkit-details-marker {
        display: none;
    }

    .kpi-modal-leaders details.kpi-list-item summary {
        list-style: none;
    }

        .kpi-modal-leaders details.kpi-list-item summary::after {
            content: '';
        }

    .kpi-modal-leaders details.kpi-list-item[open] > summary i.fa-chevron-down {
        transform: rotate(180deg);
    }

    .kpi-modal-leaders details.kpi-list-item[open] {
        background: var(--clr-bg-secondary);
        border-color: var(--clr-border-hover);
    }

/* «Топ охотников» в модалке лидеров — рейтинг карточками (rank · аватар · инфо · счёт) */
.kpi-hunter-board {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.kpi-hunter-card {
    --kpi-hunter-delay: 0ms;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    background: var(--clr-surface);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
    animation: kpi-hunter-card-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: var(--kpi-hunter-delay);
}
@keyframes kpi-hunter-card-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.kpi-hunter-card:hover {
    border-color: var(--clr-border-hover);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.kpi-hunter-card:focus-visible {
    outline: 2px solid var(--clr-accent);
    outline-offset: 2px;
}

/* Rank — крупный бейдж позиции */
.kpi-hunter-rank {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--clr-bg-tertiary);
    color: var(--clr-text-secondary);
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* Аватар с обводкой */
.kpi-hunter-avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--clr-bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--clr-surface), 0 0 0 3px var(--clr-border);
}
.kpi-hunter-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-full);
    display: block;
}
.kpi-hunter-initial {
    font-size: var(--text-base);
    font-weight: var(--fw-semibold);
    color: var(--clr-accent);
    line-height: 1;
}

/* Инфо-блок: ФИО + офис */
.kpi-hunter-info {
    flex: 1;
    min-width: 0;
}
.kpi-hunter-name {
    font-size: var(--text-base);
    font-weight: var(--fw-semibold);
    color: var(--clr-text-primary);
    line-height: var(--leading-tight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kpi-hunter-office {
    margin-top: 3px;
    font-size: var(--text-xs);
    font-weight: var(--fw-normal);
    color: var(--clr-text-tertiary);
    line-height: var(--leading-tight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Правая часть: бонус */
.kpi-hunter-score {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}
.kpi-hunter-score-value {
    padding: 5px 11px;
    border-radius: var(--radius-full);
    background: var(--clr-accent-light);
    color: var(--clr-accent);
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.kpi-hunter-score-unit {
    font-size: 10px;
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--clr-text-tertiary);
}
.kpi-hunter-crown {
    font-size: var(--text-xs);
    color: var(--clr-warning);
}

/* Топ-1/2/3 — золото, серебро, бронза */
.kpi-hunter-card--1 {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.12) 0%, rgba(245, 158, 11, 0.03) 45%, var(--clr-surface) 100%);
    border-color: rgba(245, 158, 11, 0.5);
}
.kpi-hunter-card--1 .kpi-hunter-rank {
    background: linear-gradient(135deg, #fcd34d, #f59e0b);
    color: #7c2d12;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.35);
}
.kpi-hunter-card--1 .kpi-hunter-avatar {
    box-shadow: 0 0 0 2px var(--clr-surface), 0 0 0 4px #f59e0b;
}
.kpi-hunter-card--1 .kpi-hunter-score-value {
    background: var(--clr-warning-bg);
    color: var(--clr-warning);
}

.kpi-hunter-card--2 {
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.14) 0%, rgba(148, 163, 184, 0.04) 45%, var(--clr-surface) 100%);
    border-color: rgba(148, 163, 184, 0.55);
}
.kpi-hunter-card--2 .kpi-hunter-rank {
    background: linear-gradient(135deg, #f8fafc, #94a3b8);
    color: #1e293b;
    box-shadow: 0 4px 10px rgba(148, 163, 184, 0.35);
}
.kpi-hunter-card--2 .kpi-hunter-avatar {
    box-shadow: 0 0 0 2px var(--clr-surface), 0 0 0 4px #94a3b8;
}

.kpi-hunter-card--3 {
    background: linear-gradient(90deg, rgba(194, 65, 12, 0.12) 0%, rgba(194, 65, 12, 0.03) 45%, var(--clr-surface) 100%);
    border-color: rgba(194, 65, 12, 0.4);
}
.kpi-hunter-card--3 .kpi-hunter-rank {
    background: linear-gradient(135deg, #fdba74, #c2410c);
    color: #fff;
    box-shadow: 0 4px 10px rgba(194, 65, 12, 0.3);
}
.kpi-hunter-card--3 .kpi-hunter-avatar {
    box-shadow: 0 0 0 2px var(--clr-surface), 0 0 0 4px #c2410c;
}

/* Мобильные: длинные ФИО и офис не ломают вёрстку */
@media (max-width: 576px) {
    .kpi-hunter-card {
        gap: var(--space-3);
        padding: var(--space-3);
    }
    .kpi-hunter-rank {
        width: 30px;
        height: 30px;
        font-size: var(--text-sm);
        border-radius: var(--radius-sm);
    }
    .kpi-hunter-avatar {
        width: 36px;
        height: 36px;
    }
    .kpi-hunter-name {
        font-size: var(--text-sm);
    }
    .kpi-hunter-score-value {
        padding: 4px 8px;
        font-size: var(--text-xs);
    }
    .kpi-hunter-score-unit {
        display: none;
    }
}

/* HeadHunter widget — task cards on main page */
#headhunterWidget {
    overflow: hidden;
}

    #headhunterWidget .kpi-list-item {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: var(--space-3) var(--space-4);
        border-radius: var(--radius-md);
        border: 1px solid var(--clr-border);
        background: var(--clr-surface);
        cursor: default;
        transition: all var(--transition-base);
        position: relative;
        overflow: hidden;
    }

        #headhunterWidget .kpi-list-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            width: 3px;
            background: var(--clr-accent);
            border-radius: var(--radius-full);
            opacity: 0;
            transition: opacity var(--transition-fast);
        }

        #headhunterWidget .kpi-list-item:hover {
            border-color: var(--clr-border-hover);
            box-shadow: var(--shadow-sm);
            transform: translateY(-1px);
        }

            #headhunterWidget .kpi-list-item:hover::before {
                opacity: 1;
            }

        #headhunterWidget .kpi-list-item + .kpi-list-item {
            margin-top: var(--space-2);
        }

/* Organization details modal — поверх чата и SweetAlert2 */
.kpi-modal-org {
    z-index: 1100;
}

    .kpi-modal-org .kpi-modal-org-box {
        width: 100%;
        max-width: 720px;
    }

/* Birthday modal (дни рождения) */
.kpi-modal-birthday {
    z-index: 1100;
}

    .kpi-modal-birthday .kpi-modal-birthday-box {
        width: 100%;
        max-width: 460px;
    }

/* Знак зодиака рядом с ФИО в списке дней рождений.
   В FontAwesome Free нет символов зодиака (только в Pro), поэтому используются
   Юникод-глифы U+2648–U+2653; шрифт подбирается из системных, где они есть. */
.kpi-bd-zodiac {
    font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Arial Unicode MS", "DejaVu Sans", sans-serif;
    font-size: 1.05em;
    line-height: 1;
    color: var(--clr-accent);
    margin-left: 6px;
    cursor: help;
}

    .kpi-bd-zodiac:hover {
        color: var(--clr-accent-hover);
    }

/* Organization details link in list */
.kpi-org-details-link {
    cursor: pointer;
    color: var(--clr-accent);
    font-weight: var(--fw-medium);
    text-decoration: none;
}

    .kpi-org-details-link:hover {
        color: var(--clr-accent-hover);
        text-decoration: underline;
    }

/* Leader trigger (widget header opens fullscreen modal) */
.kpi-leader-trigger {
    font-family: var(--font-family);
    transition: color var(--transition-fast);
}

    .kpi-leader-trigger:hover {
        color: var(--clr-accent) !important;
    }

        .kpi-leader-trigger:hover i {
            color: var(--clr-accent) !important;
        }

/* Toast */
.kpi-toast-container {
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    z-index: 9999;
    pointer-events: none;
}

.kpi-toast {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    font-size: var(--text-sm);
    color: var(--clr-text-primary);
    pointer-events: auto;
    animation: kpi-toast-in 0.3s ease;
    min-width: 300px;
    max-width: 420px;
}

.kpi-toast-success {
    border-left: 3px solid var(--clr-success);
}

.kpi-toast-error {
    border-left: 3px solid var(--clr-error);
}

.kpi-toast-warning {
    border-left: 3px solid var(--clr-warning);
}

.kpi-toast-info {
    border-left: 3px solid var(--clr-info);
}

.kpi-toast-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kpi-toast-success .kpi-toast-icon {
    color: var(--clr-success);
}

.kpi-toast-error .kpi-toast-icon {
    color: var(--clr-error);
}

.kpi-toast-warning .kpi-toast-icon {
    color: var(--clr-warning);
}

.kpi-toast-info .kpi-toast-icon {
    color: var(--clr-info);
}

.kpi-toast-close {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--clr-text-tertiary);
    cursor: pointer;
    padding: 2px;
    transition: color var(--transition-fast);
}

    .kpi-toast-close:hover {
        color: var(--clr-text-primary);
    }

/* Badge */
.kpi-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 var(--space-1);
    font-size: 11px;
    font-weight: var(--fw-semibold);
    line-height: 1;
    color: #fff;
    background: var(--clr-accent);
    border-radius: var(--radius-full);
}

.kpi-badge-subtle {
    background: var(--clr-accent-light);
    color: var(--clr-accent);
}

.kpi-badge-active {
    background: var(--clr-success-bg);
    color: var(--clr-success);
}

.kpi-badge-rejected {
    background: var(--clr-error-bg);
    color: var(--clr-error);
}

/* Сверка данных (панель контролёра) */
.kpi-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-full);
    background: var(--clr-bg-secondary);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    font: inherit;
    transition: all var(--transition-fast);
}

    .kpi-filter-chip:hover {
        border-color: var(--clr-accent);
    }

    .kpi-filter-chip.is-active {
        border-color: var(--clr-accent);
        color: var(--clr-accent);
        background: var(--clr-accent-light);
    }

/* Сегментированный переключатель режима списка («пилюли» в треке) */
.kpi-segmented {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: var(--clr-bg-tertiary);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-full);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
}

.kpi-segmented-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    color: var(--clr-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

    .kpi-segmented-item i {
        font-size: 13px;
        opacity: .7;
        transition: opacity var(--transition-fast);
    }

    .kpi-segmented-item:hover {
        color: var(--clr-accent);
        background: var(--clr-bg-secondary);
    }

        .kpi-segmented-item:hover i {
            opacity: 1;
        }

    .kpi-segmented-item.is-active {
        color: #fff;
        background: linear-gradient(135deg, var(--clr-accent) 0%, #2563eb 100%);
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35);
    }

        .kpi-segmented-item.is-active i {
            opacity: 1;
        }

    .kpi-segmented-item:focus-visible {
        outline: 2px solid var(--clr-accent);
        outline-offset: 2px;
    }

.kpi-segmented-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--clr-bg-secondary);
    border: 1px solid var(--clr-border);
    font-size: 11px;
    font-weight: var(--fw-bold);
    line-height: 1;
    color: var(--clr-text-secondary);
}

.kpi-segmented-item:hover .kpi-segmented-badge {
    color: var(--clr-accent);
    border-color: var(--clr-border-hover);
}

.kpi-segmented-item.is-active .kpi-segmented-badge {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

/* Выпадающее окно фильтров списка отчётов */
.kpi-filter-popover {
    min-width: 300px;
    padding: 1rem;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.kpi-filter-popover-body {
    display: grid;
    gap: 1rem;
}

    .kpi-filter-popover-body .kpi-form-group {
        margin-bottom: 0;
    }

    .kpi-filter-popover-body .kpi-input {
        width: 100%;
    }

.kpi-btn-xs {
    padding: 2px 8px;
    font-size: 11px;
}

.kpi-btn-hidden {
    display: none !important;
}

.kpi-dropzone {
    border: 2px dashed var(--clr-border);
    border-radius: var(--radius-sm);
    padding: var(--space-8) var(--space-4);
    text-align: center;
    cursor: pointer;
    background: var(--clr-bg-secondary);
    transition: all var(--transition-fast);
}

    .kpi-dropzone:hover, .kpi-dropzone-active {
        border-color: var(--clr-accent);
        background: var(--clr-accent-light);
    }

.kpi-dropzone-inner {
    pointer-events: none;
}

/* Список выбранных файлов сверки */
.kpi-file-row-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kpi-file-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    background: var(--clr-surface);
    font-size: var(--text-xs);
    transition: all var(--transition-fast);
}

    .kpi-file-row:hover {
        border-color: var(--clr-border-hover);
        background: var(--clr-bg-secondary);
    }

.kpi-file-row-name {
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .kpi-file-row-name i {
        color: var(--clr-success);
        flex-shrink: 0;
    }

.kpi-file-row-size {
    margin-left: auto;
    white-space: nowrap;
}

.kpi-file-row-new {
    border-color: var(--clr-accent);
    animation: kpi-file-flash 1.2s ease-out 2;
}

@keyframes kpi-file-flash {
    0% {
        background: var(--clr-accent-light);
        border-color: var(--clr-accent);
    }

    50% {
        background: var(--clr-accent-light);
        border-color: var(--clr-accent);
    }

    100% {
        background: var(--clr-surface);
        border-color: var(--clr-border);
    }
}

.kpi-delta-ok {
    color: var(--clr-success);
    font-weight: var(--fw-semibold);
}

.kpi-delta-bad {
    color: var(--clr-error);
    font-weight: var(--fw-semibold);
}

.kpi-recon-status {
    font-weight: var(--fw-semibold);
}

.kpi-mapping-block {
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
    background: var(--clr-surface);
    height: 100%;
}

.kpi-mapping-add {
    padding: var(--space-3);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    background: var(--clr-bg-secondary);
    margin-bottom: var(--space-3);
}

.kpi-mapping-pill {
    display: inline-block;
    padding: 2px 6px;
    margin: 1px 2px 1px 0;
    background: var(--clr-accent-light);
    color: var(--clr-accent);
    border-radius: var(--radius-full);
    font-size: 11px;
    white-space: nowrap;
}

.kpi-suggest-menu {
    position: absolute;
    z-index: 2000;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.kpi-suggest-item {
    padding: 7px 10px;
    font-size: var(--text-xs);
    cursor: pointer;
    color: var(--clr-text-primary);
}

    .kpi-suggest-item:hover {
        background: var(--clr-accent-light);
        color: var(--clr-accent);
    }

    .kpi-suggest-item.sel {
        background: var(--clr-accent-light);
        color: var(--clr-accent);
    }

.kpi-terr-suggest-list {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    margin-top: 4px;
    overflow: hidden;
}

.kpi-org-pick {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}

.kpi-suggest-org {
    border: 1px solid var(--clr-border);
    background: var(--clr-bg-secondary);
    color: var(--clr-text-primary);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    text-align: left;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

    .kpi-suggest-org:hover, .kpi-suggest-org.sel {
        border-color: var(--clr-accent);
        background: var(--clr-accent-light);
        color: var(--clr-accent);
    }

/* Empty State */
.kpi-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-6);
    text-align: center;
}

.kpi-empty-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--clr-bg-secondary);
    border-radius: var(--radius-full);
    color: var(--clr-text-tertiary);
    font-size: var(--text-2xl);
    margin-bottom: var(--space-4);
}

.kpi-empty-title {
    font-size: var(--text-lg);
    font-weight: var(--fw-semibold);
    color: var(--clr-text-primary);
    margin-bottom: var(--space-2);
}

.kpi-empty-text {
    font-size: var(--text-sm);
    color: var(--clr-text-secondary);
    max-width: 320px;
    margin-bottom: var(--space-6);
}

/* Skeleton */
.kpi-skeleton {
    background: var(--skeleton-base);
    border-radius: var(--radius-sm);
    position: relative;
    overflow: hidden;
}

    .kpi-skeleton::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent, var(--skeleton-shine), transparent);
        animation: kpi-shimmer 1.5s infinite;
    }

.kpi-skeleton-text {
    height: 14px;
    margin-bottom: var(--space-2);
    width: 80%;
}

.kpi-skeleton-title {
    height: 20px;
    margin-bottom: var(--space-3);
    width: 60%;
}

.kpi-skeleton-card {
    height: 120px;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-4);
}

.kpi-skeleton-table-row {
    height: 48px;
    margin-bottom: var(--space-2);
    border-radius: var(--radius-sm);
}

/* Dropdown */
.kpi-dropdown {
    position: relative;
    display: inline-block;
}

.kpi-dropdown-menu {
    position: fixed;
    min-width: 200px;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: var(--space-1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: all var(--transition-fast);
    z-index: 9999;
}

    .kpi-dropdown-menu.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

.kpi-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    color: var(--clr-text-primary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: var(--font-family);
}

    .kpi-dropdown-item:hover {
        background: var(--clr-bg-secondary);
    }

    .kpi-dropdown-item i {
        width: 16px;
        color: var(--clr-text-tertiary);
    }

.kpi-dropdown-divider {
    height: 1px;
    background: var(--clr-border);
    margin: var(--space-1) 0;
}

/* Animations */
@keyframes kpi-shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes kpi-toast-in {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes kpi-toast-out {
    from {
        opacity: 0;
        transform: translateX(0);
    }

    to {
        opacity: 1;
        transform: translateX(100%);
    }
}

@keyframes kpi-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.kpi-fade-in {
    animation: kpi-fade-in 0.3s ease forwards;
}

/* DataTables overrides */
.dataTables_wrapper .dataTables_filter input {
    padding: var(--space-2) var(--space-3) !important;
    font-family: var(--font-family) !important;
    font-size: var(--text-sm) !important;
    border: 1px solid var(--clr-border) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--clr-bg) !important;
    color: var(--clr-text-primary) !important;
}

    .dataTables_wrapper .dataTables_filter input:focus {
        border-color: var(--clr-accent) !important;
        box-shadow: 0 0 0 3px var(--clr-accent-subtle) !important;
        outline: none !important;
    }

.dataTables_wrapper .dataTables_info {
    font-size: var(--text-sm) !important;
    color: var(--clr-text-secondary) !important;
    padding-top: var(--space-3) !important;
}

/* Pagination — modern pill style */
#orgsComparisonTable_wrapper .dataTables_paginate {
    margin: 10px !important;
}

.dataTables_wrapper .dataTables_paginate {
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid var(--clr-border) !important;
    border-radius: var(--radius-full) !important;
    overflow: hidden !important;
    background: var(--clr-bg) !important;
    padding: 0 !important;
    margin: 0 !important;
}

    .dataTables_wrapper .dataTables_paginate .pagination {
        display: inline-flex !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        flex-wrap: nowrap !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button,
    .dataTables_wrapper .dataTables_paginate .page-item {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: var(--text-sm) !important;
        font-weight: var(--fw-medium) !important;
        border: none !important;
        border-radius: 0 !important;
        border-right: 1px solid var(--clr-border) !important;
        background: transparent !important;
        color: var(--clr-text-secondary) !important;
        transition: all var(--transition-fast) !important;
        cursor: pointer !important;
        line-height: 1 !important;
        font-family: var(--font-family) !important;
        list-style: none !important;
    }

        .dataTables_wrapper .dataTables_paginate .paginate_button:last-child,
        .dataTables_wrapper .dataTables_paginate .page-item:last-child {
            border-right: none !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
        .dataTables_wrapper .dataTables_paginate .page-item:hover {
            background: var(--clr-bg-secondary) !important;
            color: var(--clr-text-primary) !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current,
        .dataTables_wrapper .dataTables_paginate .page-item.active {
            background: var(--clr-accent) !important;
            color: #fff !important;
            font-weight: var(--fw-semibold) !important;
        }

            .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
            .dataTables_wrapper .dataTables_paginate .page-item.active:hover {
                background: var(--clr-accent-hover) !important;
            }

        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
        .dataTables_wrapper .dataTables_paginate .page-item.disabled {
            opacity: 0.4 !important;
            cursor: not-allowed !important;
            pointer-events: none !important;
        }

    /* Reset page-link inside pagination buttons */
    .dataTables_wrapper .dataTables_paginate .page-link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        color: inherit !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        text-decoration: none !important;
        line-height: 1 !important;
        box-shadow: none !important;
        outline: none !important;
    }

        .dataTables_wrapper .dataTables_paginate .page-link:focus {
            box-shadow: none !important;
            outline: none !important;
        }

    .dataTables_wrapper .dataTables_paginate .active > .page-link {
        background: transparent !important;
        border: none !important;
        color: inherit !important;
    }

    .dataTables_wrapper .dataTables_paginate .disabled > .page-link {
        background: transparent !important;
        border: none !important;
        color: inherit !important;
        opacity: inherit !important;
    }

    /* Previous / Next as arrow icons */
    .dataTables_wrapper .dataTables_paginate .page-item.previous {
        font-size: 0 !important;
        min-width: 40px !important;
    }

        .dataTables_wrapper .dataTables_paginate .page-item.previous .page-link::before {
            content: '\f053' !important;
            font-family: 'Font Awesome 6 Free' !important;
            font-weight: 900 !important;
            font-size: 14px !important;
        }

    .dataTables_wrapper .dataTables_paginate .page-item.next {
        font-size: 0 !important;
        min-width: 40px !important;
    }

        .dataTables_wrapper .dataTables_paginate .page-item.next .page-link::after {
            content: '\f054' !important;
            font-family: 'Font Awesome 6 Free' !important;
            font-weight: 900 !important;
            font-size: 14px !important;
        }

    /* Ellipsis styling */
    .dataTables_wrapper .dataTables_paginate .paginate_button.ellipsis,
    .dataTables_wrapper .dataTables_paginate .page-item.ellipsis {
        pointer-events: none !important;
        font-size: var(--text-xs) !important;
        color: var(--clr-text-tertiary) !important;
    }

/* Mobile */
@media (max-width: 991.98px) {
    .kpi-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        transform: translateX(-100%);
        box-shadow: var(--shadow-xl);
        transition: transform var(--transition-base);
    }

        .kpi-sidebar.open {
            transform: translateX(0);
        }

    .kpi-sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: 99;
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition-base);
    }

        .kpi-sidebar-overlay.open {
            opacity: 1;
            visibility: visible;
        }
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--clr-border);
    border-radius: var(--radius-full);
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--clr-border-hover);
    }

/* Selection */
::selection {
    background: var(--clr-accent-subtle);
    color: var(--clr-text-primary);
}

/* SweetAlert2 — локальная сборка только с JS (CSS свои, под дизайн-систему) */
.swal2-container {
    position: fixed !important;
    z-index: 1060;
    inset: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: rgba(0, 0, 0, 0.4);
}

.swal2-popup {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 440px !important;
    background: var(--clr-surface) !important;
    color: var(--clr-text-primary) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-8) var(--space-6) var(--space-6) !important;
    font-family: var(--font-family) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
/* Иконка типа (warning/error/info/success/question): центрированная плашка темы */
.swal2-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--space-5) !important;
    border-radius: var(--radius-full);
    border: 3px solid currentColor;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family);
}
    /* Символы иконок типов — Font Awesome (поверх официального CSS SweetAlert2):
   собственные глифы скрыты, чтобы в 60px-плашке темы всегда был единый символ. */
    .swal2-icon .swal2-icon-content,
    .swal2-icon .swal2-x-mark,
    .swal2-icon .swal2-success-ring,
    .swal2-icon .swal2-success-fix,
    .swal2-icon .swal2-success-circular-line-left,
    .swal2-icon .swal2-success-circular-line-right {
        display: none !important;
    }

    .swal2-icon::after {
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 1.75rem;
        line-height: 1;
    }

    .swal2-icon.swal2-error::after {
        content: "\f057";
    }

    .swal2-icon.swal2-warning::after {
        content: "\f071";
    }

    .swal2-icon.swal2-info::after {
        content: "\f05a";
    }

    .swal2-icon.swal2-question::after {
        content: "\f059";
    }

    .swal2-icon.swal2-success::after {
        content: "\f058";
    }

    .swal2-icon.swal2-warning {
        color: var(--clr-warning);
        background: var(--clr-warning-bg);
    }

    .swal2-icon.swal2-error {
        color: var(--clr-error);
        background: var(--clr-error-bg);
    }

    .swal2-icon.swal2-success {
        color: var(--clr-success);
        background: var(--clr-success-bg);
    }

    .swal2-icon.swal2-info {
        color: var(--clr-info);
        background: var(--clr-info-bg);
    }

    .swal2-icon.swal2-question {
        color: var(--clr-text-tertiary);
        background: var(--clr-bg-tertiary);
    }

.swal2-title {
    color: var(--clr-text-primary) !important;
    font-size: var(--text-lg) !important;
    font-weight: var(--fw-semibold);
    line-height: 1.3;
    text-align: center;
    margin: 0 0 var(--space-2) !important;
    padding: 0;
}

.swal2-html-container {
    color: var(--clr-text-secondary) !important;
    font-size: var(--text-sm) !important;
    line-height: 1.5;
    text-align: center;
    margin: 0 0 var(--space-2) !important;
    padding: 0;
}
/* Поля ввода/выбор внутри алерта (input/textarea/select) */
.swal2-input,
.swal2-textarea,
.swal2-select {
    width: 100% !important;
    margin: var(--space-3) 0 0 !important;
    padding: var(--space-2) var(--space-3) !important;
    font-family: var(--font-family) !important;
    font-size: var(--text-sm) !important;
    color: var(--clr-text-primary) !important;
    background: var(--clr-bg) !important;
    border: 1px solid var(--clr-border) !important;
    border-radius: var(--radius-sm) !important;
    line-height: var(--leading-normal);
}

.swal2-textarea {
    min-height: 90px;
    resize: vertical;
}

    .swal2-input::placeholder,
    .swal2-textarea::placeholder {
        color: var(--clr-text-tertiary);
    }

    .swal2-input:focus,
    .swal2-textarea:focus,
    .swal2-select:focus {
        outline: none;
        border-color: var(--clr-accent) !important;
        box-shadow: 0 0 0 3px var(--clr-accent-subtle);
    }

.swal2-validation-message {
    margin-top: var(--space-3) !important;
    padding: var(--space-2) var(--space-3) !important;
    color: var(--clr-error) !important;
    background: var(--clr-error-bg) !important;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    justify-content: flex-start;
}
/* Кнопки действий: воздух между кнопками и от текста */
.swal2-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-5) !important;
    padding: 0;
}

.swal2-styled.swal2-confirm,
.swal2-styled.swal2-deny {
    background: var(--clr-error) !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--fw-semibold);
    padding: var(--space-2) var(--space-5) !important;
    min-width: 120px;
}

.swal2-styled.swal2-cancel {
    background: var(--clr-bg-tertiary) !important;
    color: var(--clr-text-primary) !important;
    border-radius: var(--radius-sm) !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--fw-medium);
    padding: var(--space-2) var(--space-5) !important;
    min-width: 120px;
}

.swal2-styled.swal2-confirm:hover,
.swal2-styled.swal2-deny:hover {
    background: var(--clr-error) !important;
    filter: brightness(0.95);
}

.swal2-styled.swal2-cancel:hover {
    background: var(--clr-bg-tertiary) !important;
    filter: brightness(0.97);
}

.swal2-styled.swal2-confirm:focus-visible,
.swal2-styled.swal2-cancel:focus-visible {
    outline: 2px solid var(--clr-accent);
    outline-offset: 2px;
}

/* Calendar */
.kpi-calendar {
    user-select: none;
}

.kpi-calendar-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    color: var(--clr-text-tertiary);
    padding: 0 0 var(--space-2) 0;
    border-bottom: 1px solid var(--clr-border);
    margin-bottom: var(--space-2);
}

.kpi-calendar-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.kpi-calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    color: var(--clr-text-primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
}

    .kpi-calendar-day:hover {
        background: var(--clr-bg-secondary);
    }

.kpi-calendar-day-empty {
    cursor: default;
}

    .kpi-calendar-day-empty:hover {
        background: transparent;
    }

.kpi-calendar-day-today {
    border: 1px solid var(--clr-accent);
    font-weight: var(--fw-bold);
}

.kpi-calendar-day-selected {
    background: var(--clr-accent) !important;
    color: #fff !important;
    font-weight: var(--fw-bold);
}

.kpi-calendar-day-filled::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--clr-success);
}
.kpi-calendar-day-rejected.kpi-calendar-day-filled::after,
.kpi-calendar-day-rejected::after {
    background: var(--clr-error);
}
.kpi-calendar-day-selected.kpi-calendar-day-filled::after {
    background: rgba(255,255,255,0.8);
}
.kpi-calendar-day-selected.kpi-calendar-day-rejected::after {
    background: rgba(255,255,255,0.8);
}

/* Calendar button highlight */
#calendarBtn {
    border-color: var(--clr-accent);
    color: var(--clr-accent);
}

    #calendarBtn:hover {
        background: var(--clr-accent);
        color: #fff;
    }

/* Sortable table headers */
.kpi-table th.sortable {
    cursor: pointer;
    user-select: none;
}

    .kpi-table th.sortable:hover {
        color: var(--clr-accent);
    }

    .kpi-table th.sortable .sort-icon {
        display: inline-block;
        width: 16px;
        margin-left: 4px;
        font-size: 10px;
        color: var(--clr-text-tertiary);
        transition: color var(--transition-fast);
    }

    .kpi-table th.sortable:hover .sort-icon {
        color: var(--clr-accent);
    }

    .kpi-table th.sortable .sort-icon.active {
        color: var(--clr-accent);
    }

/* Favorite star */
.kpi-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    cursor: pointer;
    color: var(--clr-text-tertiary);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    font-size: 14px;
}

    .kpi-star:hover {
        color: #f59e0b;
        background: var(--clr-warning-bg);
    }

    .kpi-star.active {
        color: #f59e0b;
    }

        .kpi-star.active:hover {
            color: var(--clr-text-tertiary);
            background: var(--clr-bg-secondary);
        }

/* Indicator input */
.kpi-indicator-input {
    width: 120px;
    text-align: center;
    font-weight: var(--fw-semibold);
    transition: all var(--transition-fast);
}

.kpi-indicator-saved {
    border-color: var(--clr-success) !important;
    box-shadow: 0 0 0 3px var(--clr-success-bg) !important;
}

/* Sidebar footer — theme toggle */
.kpi-sidebar-footer {
    margin-top: auto;
    padding: var(--space-4) var(--space-3) 0;
    border-top: 1px solid var(--clr-border);
    display: flex;
    justify-content: center;
}

.kpi-theme-footer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.kpi-version-label {
    position: absolute;
    left: 0;
    font-size: 10px;
    line-height: 1;
    color: var(--clr-text-muted);
    opacity: 0.4;
    letter-spacing: 0.02em;
    user-select: none;
}

/* User name in header */
#userMenu {
    display: flex;
    align-items: center;
}

.kpi-user-name {
    font-size: 15px;
    font-weight: var(--fw-medium);
    line-height: 1.2;
    color: var(--clr-text-primary);
    margin-left: var(--space-2);
    white-space: nowrap;
    vertical-align: middle;
}

/* Calendar modal — шире стандартной модалки */
.kpi-modal-calendar {
    max-width: 400px !important;
}

/* Дерево «Показатель → Организация → Отдел → Сотрудники» панели контролёра */
.kpi-tree {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.kpi-tree-node {
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

    .kpi-tree-node > summary {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        flex-wrap: wrap;
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-sm);
        font-weight: var(--fw-medium);
        color: var(--clr-text-primary);
        background: var(--clr-bg-secondary);
        cursor: pointer;
        user-select: none;
        list-style: none;
        transition: background var(--transition-fast);
    }

        .kpi-tree-node > summary::-webkit-details-marker {
            display: none;
        }

        .kpi-tree-node > summary:hover {
            background: var(--clr-bg-tertiary);
        }

    .kpi-tree-node[open] > summary {
        border-bottom: 1px solid var(--clr-border);
    }

    .kpi-tree-node > summary .kpi-tree-chevron {
        color: var(--clr-text-tertiary);
        font-size: 0.75rem;
        transition: transform var(--transition-fast);
    }

    .kpi-tree-node[open] > summary .kpi-tree-chevron {
        transform: rotate(90deg);
    }

.kpi-tree-meta {
    color: var(--clr-text-tertiary);
    font-size: var(--text-xs);
    font-weight: normal;
}

.kpi-tree-children {
    padding: var(--space-3);
    background: var(--clr-bg);
}

    .kpi-tree-children .kpi-tree-node {
        margin-bottom: var(--space-2);
    }

        .kpi-tree-children .kpi-tree-node:last-child {
            margin-bottom: 0;
        }

/* ───── Личная динамика дневника ККК: раскрываемые строки ───── */
.kkk-history-row {
    cursor: pointer;
    transition: background var(--transition-fast);
}

    .kkk-history-row:hover {
        background: var(--clr-bg-secondary);
    }

    .kkk-history-row.is-open {
        background: var(--clr-bg-tertiary);
    }

.kkk-history-period {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--fw-semibold);
    color: var(--clr-text-primary);
    transition: color var(--transition-fast);
}

.kkk-history-row:hover .kkk-history-period,
.kkk-history-row.is-open .kkk-history-period {
    color: var(--clr-accent);
}

.kkk-history-chevron {
    color: var(--clr-text-tertiary);
    font-size: 0.7rem;
    transition: transform var(--transition-fast), color var(--transition-fast);
}

.kkk-history-row:hover .kkk-history-chevron,
.kkk-history-row.is-open .kkk-history-chevron {
    color: var(--clr-accent);
}

.kkk-history-row.is-open .kkk-history-chevron {
    transform: rotate(90deg);
}

.kkk-history-hint {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--clr-text-tertiary);
    white-space: nowrap;
    transition: color var(--transition-fast);
}

.kkk-history-row:hover .kkk-history-hint,
.kkk-history-row.is-open .kkk-history-hint {
    color: var(--clr-accent);
}

.kkk-history-hint i {
    font-size: 0.7rem;
}

.kkk-history-detail td {
    padding: 0;
    background: var(--clr-bg-tertiary);
    border-top: 1px solid var(--clr-border);
}

.kkk-history-detail-body {
    padding: var(--space-3);
}

.kkk-history-loading {
    color: var(--clr-text-secondary);
    font-size: var(--text-xs);
    padding: var(--space-1) 0;
}

/* ───── Режим Сверки в дереве контролёра ───── */
.kpi-recon-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
}

.kpi-recon-badge-ok {
    background: var(--clr-success-bg);
    color: var(--clr-success);
}

.kpi-recon-badge-bad {
    background: var(--clr-error-bg);
    color: var(--clr-error);
}

.kpi-recon-badge-none {
    background: var(--clr-bg-tertiary);
    color: var(--clr-text-tertiary);
}

.kpi-recon-file {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
}

.kpi-recon-file-ok {
    background: var(--clr-success-bg);
    color: var(--clr-success);
}

.kpi-recon-file-bad {
    background: var(--clr-error-bg);
    color: var(--clr-error);
}

.kpi-recon-file-none {
    background: var(--clr-bg-tertiary);
    color: var(--clr-text-tertiary);
}

.kpi-recon-node-ok {
    box-shadow: inset 3px 0 0 var(--clr-success);
}

.kpi-recon-node-bad {
    box-shadow: inset 3px 0 0 var(--clr-error);
}

.kpi-recon-node-none {
    box-shadow: inset 3px 0 0 var(--clr-border);
}

/* Иконка-подсказка в подписях карточек KPI */
.kpi-icon-hint {
    margin-left: 4px;
    cursor: help;
    color: var(--clr-text-tertiary);
    vertical-align: middle;
    font-size: var(--text-xs);
}

    .kpi-icon-hint:hover {
        color: var(--clr-accent);
    }

/* Контурная иконка-«?» (открывает модальное окно со справочником) */
.kpi-icon-hint--outline {
    border: 1px solid var(--clr-border);
    border-radius: 50%;
    padding: 3px 5px;
    margin-left: 6px;
    font-size: 10px;
    background: var(--clr-surface-muted, #f5f5f6);
}

    .kpi-icon-hint--outline:hover {
        color: var(--clr-accent);
        border-color: var(--clr-accent);
        background: var(--clr-surface, #fff);
    }

/* Подробная подсказка-поповер (клик по «?» в карточке) */
.popover.kpi-help-popover {
    max-width: 360px;
}

.kpi-help-popover .popover-body {
    font-size: var(--text-sm);
    line-height: 1.5;
}

    .kpi-help-popover .popover-body ul {
        padding-left: 1.25rem;
        margin-bottom: .5rem;
    }

    .kpi-help-popover .popover-body ol {
        padding-left: 1.25rem;
    }

/* Код-пример (маркер виджета) в поповере — переносимый блок */
.kpi-guide-code {
    background: var(--clr-surface-muted, #f5f5f6);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 12px;
}

    .kpi-guide-code code {
        color: inherit;
        font-family: var(--font-mono, monospace);
    }

/* Круглая кнопка-подсказка (жёлтая) в формах */
.kpi-btn-hint {
    width: 20px;
    height: 20px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--clr-warning);
    background: var(--clr-warning-bg);
    color: var(--clr-warning);
    font-size: 10px;
    cursor: help;
    flex: 0 0 auto;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

    .kpi-btn-hint:hover {
        background: var(--clr-warning);
        color: #fff;
        transform: translateY(-1px);
    }

/* Расширенный тултип публикации (длинный текст, выравнивание по левому краю) */
.kpi-report-tip.tooltip {
    max-width: 380px;
}

.kpi-report-tip .tooltip-inner {
    max-width: 380px;
    text-align: left;
}

/* Ссылки-заголовки сортируемых колонок таблицы */
.kpi-table-sort {
    color: inherit;
    text-decoration: none;
    font-weight: var(--fw-semibold);
}

    .kpi-table-sort:hover {
        color: var(--clr-accent);
    }


/* ============================================
 * Двойная линейка диапазона дат (kpi-range)
 * Используется на дашборде председателя для сужения
 * видимого периода линейного графика активности районов.
 * ============================================ */
.kpi-range {
    position: relative;
    flex: 1 1 320px;
    min-width: 220px;
    height: 28px;
    -webkit-user-select: none;
    user-select: none;
}

.kpi-range-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 6px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: var(--clr-bg-tertiary);
}

.kpi-range-fill {
    position: absolute;
    top: 50%;
    height: 6px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: var(--clr-accent);
    pointer-events: none;
}

.kpi-range-input {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 28px;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
}

    .kpi-range-input::-webkit-slider-runnable-track {
        height: 6px;
        background: transparent;
        border: none;
    }

    .kpi-range-input::-moz-range-track {
        height: 6px;
        background: transparent;
        border: none;
    }

    .kpi-range-input::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        pointer-events: auto;
        width: 16px;
        height: 24px;
        margin-top: -9px;
        border-radius: 6px;
        border: 2px solid var(--clr-surface);
        background: var(--clr-accent);
        box-shadow: 0 1px 3px rgba(0,0,0,0.25);
        cursor: ew-resize;
    }

    .kpi-range-input::-moz-range-thumb {
        pointer-events: auto;
        width: 12px;
        height: 22px;
        border-radius: 6px;
        border: 2px solid var(--clr-surface);
        background: var(--clr-accent);
        box-shadow: 0 1px 3px rgba(0,0,0,0.25);
        cursor: ew-resize;
    }

    .kpi-range-input:focus {
        outline: none;
    }

    .kpi-range-input:focus-visible::-webkit-slider-thumb {
        box-shadow: 0 0 0 3px var(--clr-accent-light);
    }

    .kpi-range-input:focus-visible::-moz-range-thumb {
        box-shadow: 0 0 0 3px var(--clr-accent-light);
    }

@media (max-width: 575.98px) {
    .kpi-range {
        min-width: 100%;
    }
}

/* ============================================
   Система отчётности (Area Reports) — .kpi-report-*
   ============================================ */
.kpi-report-title {
    font-weight: var(--fw-semibold);
    color: var(--clr-text-primary);
}

.kpi-report-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.kpi-report-meta-text {
    font-size: var(--text-xs);
    color: var(--clr-text-secondary);
}

.kpi-report-stars {
    color: #f59e0b;
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
}

.kpi-report-deadline {
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
}

.kpi-report-deadline-overdue {
    color: var(--clr-error);
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
}

.kpi-report-deadline-ontime {
    color: var(--clr-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
}

/* Список сотрудников на странице распределения (группировка по отделам) */
.kpi-dist-group-title {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    color: var(--clr-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.5rem 0 0.15rem;
    border-top: 1px solid var(--clr-border);
    margin-top: 0.35rem;
}

.kpi-dist-group:first-child .kpi-dist-group-title {
    border-top: none;
    margin-top: 0;
}

.kpi-dist-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding-left: 0;
    margin-bottom: 0;
    min-height: 0;
}

    .kpi-dist-row .form-check-input {
        float: none;
        margin: 0;
        flex: none;
    }

    .kpi-dist-row .form-check-label {
        font-size: var(--text-sm);
        line-height: 1.35;
        cursor: pointer;
        user-select: none;
        padding-left: 0;
        color: var(--clr-text-primary);
        word-break: break-word;
    }

.kpi-stat-label {
    font-size: var(--text-xs);
    color: var(--clr-text-secondary);
    margin-bottom: var(--space-2);
}

.kpi-multiselect {
    background: var(--clr-surface);
}

    .kpi-multiselect .kpi-check-row {
        margin: 0;
        font-size: var(--text-sm);
    }

.kpi-users-group {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    background: var(--clr-bg-secondary);
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    color: var(--clr-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.35rem 0.25rem;
    border-bottom: 1px solid var(--clr-border);
    margin-top: 0.25rem;
}

    .kpi-users-group:first-child {
        margin-top: 0;
    }

.kpi-report-palette {
    border-bottom: 1px solid var(--clr-border);
}

/* Палитра полей как боковая колонка (конструктор отчёта) */
.kpi-report-builder-body {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4);
    align-items: flex-start;
    flex-wrap: wrap;
}

.kpi-report-palette--side {
    flex: 0 0 210px;
    min-width: 180px;
    flex-direction: column;
    align-items: stretch;
    align-self: flex-start;
    position: sticky;
    top: calc(56px + var(--space-4));
    border-bottom: none;
    border-right: 1px solid var(--clr-border);
    padding-right: var(--space-4);
}

    .kpi-report-palette--side .kpi-report-palette-item {
        width: 100%;
        justify-content: flex-start;
        text-align: left;
    }

.kpi-report-fields {
    flex: 1 1 340px;
    min-width: 0;
}

.kpi-report-field {
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    background: var(--clr-surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

    .kpi-report-field:hover {
        border-color: var(--clr-border-hover);
    }

    .kpi-report-field.kpi-report-dragging {
        opacity: 0.55;
        border-color: var(--clr-accent);
        box-shadow: var(--shadow-md);
    }

.kpi-report-field-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    flex-wrap: wrap;
}

.kpi-report-field-drag {
    cursor: grab;
    color: var(--clr-text-tertiary);
    padding: var(--space-1);
}

    .kpi-report-field-drag:active {
        cursor: grabbing;
    }

.kpi-report-field-title {
    flex: 2;
    min-width: 200px;
}

.kpi-report-field-type {
    flex: 1;
    min-width: 180px;
}

.kpi-report-field-options {
    padding: 0 var(--space-3) var(--space-3);
}

.kpi-report-field-scale {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
    flex-wrap: wrap;
}

    .kpi-report-field-scale .kpi-input {
        width: 90px;
    }

.kpi-report-returned {
    background: var(--clr-error-bg);
    color: var(--clr-error);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    font-size: var(--text-sm);
}

.kpi-report-returned-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    max-width: 360px;
    overflow: hidden;
    font-size: var(--text-xs);
    color: var(--clr-error);
}

    .kpi-report-returned-note > i {
        flex-shrink: 0;
    }

/* Фаза 1 «Организация отчётов»: бейдж категории-источника в списках отчётов */
.kpi-category-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    background: var(--clr-bg-tertiary);
    color: var(--clr-text-secondary);
    white-space: nowrap;
}

    .kpi-category-badge > i {
        font-size: 11px;
        opacity: .8;
    }

/* Кастомный комбобокс выбора иконки категории — триггер в форме */
.kpi-icon-picker {
    position: relative;
}

.kpi-icon-picker-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.kpi-icon-picker-current {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

    .kpi-icon-picker-current > i {
        font-size: 13px;
        width: 16px;
        text-align: center;
    }

.kpi-icon-picker-caret {
    font-size: 11px;
    color: var(--clr-text-secondary);
}

/* Полноэкранная модалка пикера иконок */
.kpi-icon-picker-modal {
    z-index: 1200;
    align-items: flex-start;
    padding: var(--space-4);
}

.kpi-icon-picker-dialog {
    width: 100%;
    max-width: 880px;
    max-height: calc(100vh - var(--space-8));
    margin: 0 auto;
    background: var(--clr-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.96) translateY(16px);
    transition: all var(--transition-slow);
}

.kpi-icon-picker-modal.open .kpi-icon-picker-dialog {
    transform: scale(1) translateY(0);
}

.kpi-icon-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--clr-border);
}

.kpi-icon-picker-search {
    position: relative;
    padding: var(--space-3) var(--space-5);
}

    .kpi-icon-picker-search > i {
        position: absolute;
        left: calc(var(--space-5) + 12px);
        top: 50%;
        transform: translateY(-50%);
        color: var(--clr-text-tertiary);
        font-size: 13px;
        pointer-events: none;
    }

    .kpi-icon-picker-search .kpi-input {
        padding-left: 38px;
    }

.kpi-icon-picker-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 var(--space-5) var(--space-3);
}

.kpi-icon-picker-cat {
    padding: 5px 12px;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-full);
    background: var(--clr-bg-secondary);
    color: var(--clr-text-secondary);
    font-size: var(--text-xs);
    cursor: pointer;
    transition: all var(--transition-fast);
}

    .kpi-icon-picker-cat:hover {
        border-color: var(--clr-accent);
        color: var(--clr-accent);
    }

    .kpi-icon-picker-cat.active {
        background: var(--clr-accent);
        border-color: var(--clr-accent);
        color: #fff;
    }

.kpi-icon-picker-grid {
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
    gap: 6px;
    padding: var(--space-3) var(--space-5);
    min-height: 200px;
    align-content: start;
}

.kpi-icon-picker-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    background: var(--clr-bg-secondary);
    color: var(--clr-text-primary);
    font-size: 17px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

    .kpi-icon-picker-cell:hover {
        border-color: var(--clr-accent);
        background: var(--clr-accent-subtle);
        color: var(--clr-accent);
    }

    .kpi-icon-picker-cell.selected {
        border-color: var(--clr-accent);
        background: var(--clr-accent);
        color: #fff;
    }

.kpi-icon-picker-empty {
    grid-column: 1 / -1;
    padding: var(--space-6) 0;
}

.kpi-icon-picker-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--clr-border);
}

.kpi-icon-picker-pager {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--clr-text-secondary);
}

.kpi-icon-picker-actions {
    display: flex;
    gap: var(--space-2);
}

/* Выбор цвета категории — нативный color picker */
.kpi-color-pick-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    background: var(--clr-bg-secondary);
}

.kpi-color-native {
    width: 40px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}

    .kpi-color-native::-webkit-color-swatch-wrapper {
        padding: 2px;
    }

    .kpi-color-native::-webkit-color-swatch {
        border: none;
        border-radius: var(--radius-sm);
    }

    .kpi-color-native::-moz-color-swatch {
        border: none;
        border-radius: var(--radius-sm);
    }

.kpi-color-hex {
    font-family: var(--font-mono, monospace);
    font-size: var(--text-sm);
    color: var(--clr-text-primary);
}

.kpi-color-clear {
    margin-left: auto;
    padding: 4px 10px;
    font-size: var(--text-xs);
}

/* Фаза 1 «Организация отчётов»: группировка «Мои отчёты» по периодам */
.kpi-alert {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    border: 1px solid transparent;
}

.kpi-alert-warning {
    background: var(--clr-warning-bg);
    color: var(--clr-warning);
    border-color: var(--clr-warning);
}

.kpi-alert-link {
    color: inherit;
    font-weight: var(--fw-semibold);
    text-decoration: underline;
    text-underline-offset: 2px;
}

    .kpi-alert-link:hover {
        color: var(--clr-warning);
        text-decoration: none;
    }

.kpi-report-groups {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.kpi-report-group {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

    .kpi-report-group > summary {
        list-style: none;
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
        cursor: pointer;
        user-select: none;
        background: var(--clr-bg-secondary);
        transition: background var(--transition-fast);
    }

        .kpi-report-group > summary::-webkit-details-marker {
            display: none;
        }

        .kpi-report-group > summary::before {
            content: "\f078";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            font-size: 11px;
            color: var(--clr-text-tertiary);
            transition: transform var(--transition-fast);
        }

    .kpi-report-group:not([open]) > summary::before {
        transform: rotate(-90deg);
    }

    .kpi-report-group > summary:hover {
        background: var(--clr-bg-tertiary);
    }

.kpi-report-group-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--clr-accent-light);
    color: var(--clr-accent);
    font-size: var(--text-sm);
    flex-shrink: 0;
}

.kpi-report-group-title {
    font-weight: var(--fw-semibold);
    color: var(--clr-text-primary);
}

.kpi-report-group-stats {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.kpi-report-group-body {
    padding: var(--space-2) var(--space-4) var(--space-4);
}

.kpi-report-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    margin-top: var(--space-2);
    background: var(--clr-surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

    .kpi-report-row:hover {
        border-color: var(--clr-border-hover);
        box-shadow: var(--shadow-sm);
    }

    .kpi-report-row.is-overdue {
        border-color: var(--clr-error);
        background: var(--clr-error-bg);
    }

.kpi-report-row-main {
    flex: 1;
    min-width: 0;
}

.kpi-report-row-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Строка заявки «Охоты за головами» на панели контролёра: просрочка согласования (6 дней) */
.kpi-hunt-row {
    border-bottom: 1px solid var(--clr-border);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

    .kpi-hunt-row.is-overdue {
        border: 1px solid var(--clr-error);
        border-radius: var(--radius-md);
        background: var(--clr-error-bg);
    }

.kpi-hunt-overdue-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: var(--radius-full);
    background: var(--clr-error);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
}

/* Карточки-счётчики списка «Заполнение» */
.kpi-report-stat-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-lg);
}

.kpi-report-stat-accent {
    background: var(--clr-accent-light);
    color: var(--clr-accent);
}

.kpi-report-stat-success {
    background: var(--clr-success-bg);
    color: var(--clr-success);
}

.kpi-report-stat-warning {
    background: var(--clr-warning-bg);
    color: var(--clr-warning);
}

.kpi-report-stat-danger {
    background: var(--clr-error-bg);
    color: var(--clr-error);
}

.kpi-metric-card.is-active {
    border-color: var(--clr-accent);
    box-shadow: 0 0 0 1px var(--clr-accent) inset;
}

/* Материал-чипы фильтра статуса (список «Заполнение») */
.kpi-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.kpi-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-full);
    background: var(--clr-surface);
    color: var(--clr-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
}

    .kpi-chip i {
        font-size: 12px;
        opacity: .7;
        transition: opacity var(--transition-fast);
    }

    .kpi-chip:hover {
        background: var(--clr-bg-secondary);
        border-color: var(--clr-border-hover);
        color: var(--clr-text-primary);
        box-shadow: var(--shadow-sm);
    }

        .kpi-chip:hover i {
            opacity: 1;
        }

    .kpi-chip:focus-visible {
        outline: 2px solid var(--clr-accent);
        outline-offset: 2px;
    }

    .kpi-chip.is-active {
        background: var(--clr-accent);
        border-color: var(--clr-accent);
        color: #fff;
        box-shadow: 0 2px 6px rgba(59, 130, 246, 0.35);
    }

        .kpi-chip.is-active:hover {
            background: var(--clr-accent-hover);
            border-color: var(--clr-accent-hover);
            color: #fff;
        }

        .kpi-chip.is-active i {
            opacity: 1;
        }

.kpi-chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 7px;
    border-radius: var(--radius-full);
    background: var(--clr-bg-tertiary);
    color: var(--clr-text-secondary);
    font-size: 11px;
    font-weight: var(--fw-semibold);
    line-height: 1;
}

.kpi-chip.is-active .kpi-chip-count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.kpi-report-q {
    padding: var(--space-3);
    border: 1px dashed var(--clr-border);
    border-radius: var(--radius-md);
}

    .kpi-report-q[data-returned="1"] {
        border-color: var(--clr-error);
        background: var(--clr-error-bg);
    }

.kpi-report-q-returned {
    border-color: var(--clr-error);
    background: var(--clr-error-bg);
}

.kpi-report-q-comment {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: var(--text-xs);
    color: var(--clr-text-secondary);
    background: var(--clr-info-bg);
    border: 1px solid var(--clr-info);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    white-space: pre-line;
}

.kpi-report-field-comment-block {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px dashed var(--clr-border);
}

.kpi-report-field-comment-head {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    padding: 2px 0;
    margin-left: 10px;
}

.kpi-report-comment-toggle-icon {
    font-size: var(--text-xs);
    color: var(--clr-text-secondary);
    transition: transform .12s ease;
    width: 12px;
    text-align: center;
}

.kpi-report-field-comment-label {
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    color: var(--clr-text-secondary);
    margin-bottom: 0;
}

.kpi-report-field-comment-block.kpi-collapsed .kpi-report-field-comment-body {
    display: none;
}

.kpi-report-field-comment-body {
    margin-top: 6px;
    padding-left: 10px;
    padding-right: 10px;
}

.kpi-report-field-comment {
    font-size: var(--text-sm);
    min-height: 38px;
    width: 100%;
}

.kpi-report-scale-range {
    padding-top: var(--space-2);
}

.kpi-report-modal {
    max-height: 60vh;
    overflow: auto;
}

.kpi-report-modal-row {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--clr-border);
}

    .kpi-report-modal-row:last-child {
        border-bottom: none;
    }

.kpi-report-modal-label {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    color: var(--clr-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-1);
}

.kpi-report-modal-value {
    font-size: var(--text-sm);
    color: var(--clr-text-primary);
    word-break: break-word;
}

/* ============================================
   Фаза 2 — серии отчётов: подсказки, радио-карточки, комбобокс источника
   ============================================ */
.kpi-hint {
    font-size: var(--text-xs);
    color: var(--clr-text-tertiary);
    margin-top: 4px;
    line-height: 1.45;
}

.kpi-radio-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    background: var(--clr-surface);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

    .kpi-radio-item:hover {
        border-color: var(--clr-border-hover);
        background: var(--clr-bg-secondary);
    }

    .kpi-radio-item:has(input:checked) {
        border-color: var(--clr-accent);
        box-shadow: 0 0 0 1px var(--clr-accent);
    }

    .kpi-radio-item input[type="radio"] {
        margin-top: 3px;
        accent-color: var(--clr-accent);
    }

    .kpi-radio-item strong {
        font-size: var(--text-sm);
        font-weight: var(--fw-semibold);
        color: var(--clr-text-primary);
    }

.kpi-combobox {
    position: relative;
}

.kpi-combobox-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--clr-text-tertiary);
    font-size: 13px;
    pointer-events: none;
}

.kpi-combobox .form-control.is-valid {
    background-image: none;
    padding-right: 34px;
}

.kpi-combobox-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: kpi-fade-in 0.15s var(--transition-fast) both;
}

.kpi-combobox-list {
    max-height: 320px;
    overflow-y: auto;
}

.kpi-combobox-empty {
    padding: var(--space-3);
    font-size: var(--text-sm);
    color: var(--clr-text-secondary);
    text-align: center;
}

.kpi-combobox-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    text-align: left;
    padding: var(--space-2) var(--space-3);
    border: none;
    border-bottom: 1px solid var(--clr-border);
    background: transparent;
    cursor: pointer;
    transition: background var(--transition-fast);
}

    .kpi-combobox-item:last-child {
        border-bottom: none;
    }

    .kpi-combobox-item:hover, .kpi-combobox-item:focus-visible {
        background: var(--clr-bg-secondary);
        outline: none;
    }

.kpi-combobox-item-title {
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    color: var(--clr-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-combobox-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-xs);
    color: var(--clr-text-secondary);
}

.kpi-combobox-cat {
    padding: 1px 8px;
    border-radius: var(--radius-full);
    background: var(--clr-bg-tertiary);
    color: var(--clr-text-secondary);
    font-size: 11px;
    white-space: nowrap;
}

@keyframes kpi-fade-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Многострочные таблицы (Grid, тип поля отчёта) ===== */
.kpi-report-grid-host {
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--clr-bg-primary);
    box-shadow: var(--shadow-sm);
    width: 100%;
}

    .kpi-report-grid-host.tabulator,
    .kpi-report-grid-host .tabulator {
        width: 100%;
        border: none;
        background: var(--clr-bg-primary);
        font-size: var(--text-sm);
    }

    .kpi-report-grid-host .tabulator-tableholder {
        width: 100%;
        overflow-x: auto;
    }

    .kpi-report-grid-host .tabulator-table {
        width: 100%;
    }

    .kpi-report-grid-host .tabulator-row {
        width: 100%;
    }

    .kpi-report-grid-host .tabulator-header {
        border-bottom: 1px solid var(--clr-border);
        background: var(--clr-bg-secondary);
    }

        .kpi-report-grid-host .tabulator-header .tabulator-col {
            background: transparent;
            border-right: 1px solid var(--clr-border);
        }

        .kpi-report-grid-host .tabulator-header .tabulator-col-title {
            font-weight: var(--fw-semibold);
            color: var(--clr-text-secondary);
            padding: 8px 10px;
        }

    .kpi-report-grid-host .tabulator-cell {
        border-right: 1px solid var(--clr-border);
        padding: 8px 10px;
        color: var(--clr-text-primary);
    }

    .kpi-report-grid-host .tabulator-row {
        border-bottom: 1px solid var(--clr-border);
        transition: background var(--transition-fast);
    }

        .kpi-report-grid-host .tabulator-row.tabulator-row-even {
            background: var(--clr-bg-primary);
        }

        .kpi-report-grid-host .tabulator-row.tabulator-row-odd {
            background: var(--clr-bg-primary);
        }

        .kpi-report-grid-host .tabulator-row:hover {
            background: var(--clr-bg-secondary);
        }

    .kpi-report-grid-host .tabulator-cell.tabulator-editable {
        cursor: text;
    }

        .kpi-report-grid-host .tabulator-cell.tabulator-editable:hover {
            box-shadow: inset 0 0 0 2px var(--clr-accent);
            border-radius: var(--radius-sm);
        }

    .kpi-report-grid-host .tabulator-placeholder {
        color: var(--clr-text-tertiary);
    }

    .kpi-report-grid-host .tabulator-placeholder-contents {
        padding: 16px;
        font-style: italic;
    }

.kpi-report-grid-rownum {
    color: var(--clr-text-tertiary);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.kpi-report-grid-delcol .tabulator-col-title {
    text-align: center;
}

.kpi-report-grid-del {
    padding: 3px 7px;
    font-size: 12px;
    opacity: 1;
    transition: background var(--transition-fast), color var(--transition-fast);
}

    .kpi-report-grid-del:hover {
        background: rgba(220,38,38,.12);
        color: var(--clr-danger, #dc2626);
    }

.kpi-report-grid-toolbar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    font-size: var(--text-sm);
    padding: 8px 10px;
    border-top: 1px solid var(--clr-border);
    background: var(--clr-bg-secondary);
}

/* Полноэкранный режим редактирования большой таблицы */
.kpi-report-grid-expanded {
    position: fixed;
    inset: 1rem;
    z-index: 1080;
    background: var(--clr-bg-primary);
    padding: 1rem;
    overflow: auto;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .55);
}

    .kpi-report-grid-expanded > label.kpi-label {
        display: none;
    }

    .kpi-report-grid-expanded .kpi-report-grid-host {
        flex: 1 1 auto;
        min-height: 0;
        border: 1px solid var(--clr-border);
        border-radius: var(--radius-sm);
    }

.kpi-report-colvis {
    margin-bottom: 2px;
    white-space: nowrap;
}

    .kpi-report-colvis .form-check-label {
        cursor: pointer;
        user-select: none;
    }

.kpi-report-grid-totals {
    color: var(--clr-text-secondary);
    font-weight: var(--fw-medium);
}

    .kpi-report-grid-totals b {
        color: var(--clr-text-primary);
    }

.kpi-report-grid-preview, .kpi-report-grid-detail {
    margin: 0;
    font-size: var(--text-sm);
}

    .kpi-report-grid-preview th, .kpi-report-grid-detail th {
        background: var(--clr-bg-secondary);
        font-weight: var(--fw-semibold);
    }

    .kpi-report-grid-preview td, .kpi-report-grid-detail td,
    .kpi-report-grid-preview th, .kpi-report-grid-detail th {
        padding: 6px 10px;
        border-bottom: 1px solid var(--clr-border);
        white-space: nowrap;
    }

/* Настройка колонок таблицы в конструкторе */
.kpi-report-grid-col .kpi-input, .kpi-report-grid-col .kpi-select {
    font-size: var(--text-sm);
}

#gridColumnsList .kpi-report-grid-col {
    background: var(--clr-bg-secondary);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    padding: 8px;
}

    #gridColumnsList .kpi-report-grid-col .kpi-report-grid-col-name {
        font-weight: var(--fw-medium);
    }

/* ===== Загрузка файлов: drag&drop и превью (Этап 4) ===== */
.kpi-report-dropzone {
    border: 2px dashed var(--clr-border);
    border-radius: var(--radius-md);
    padding: 14px;
    background: var(--clr-bg-secondary);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

    .kpi-report-dropzone.kpi-dragover {
        border-color: var(--clr-accent);
        background: rgba(13, 110, 253, .06);
    }

.kpi-report-drop-hint {
    color: var(--clr-text-tertiary);
    font-size: var(--text-xs);
}
.kpi-report-dropzone-disabled { opacity: .6; pointer-events: none; }
.kpi-report-file-preview {
    margin-top: 8px;
    font-size: var(--text-sm);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .kpi-report-file-preview .kpi-report-file-item {
        display: flex;
        align-items: center;
        gap: 8px;
        background: var(--clr-bg-secondary);
        border: 1px solid var(--clr-border);
        border-radius: var(--radius-sm);
        padding: 6px 10px;
    }

    .kpi-report-file-preview .kpi-report-file-name {
        font-weight: var(--fw-medium);
        word-break: break-all;
    }

    .kpi-report-file-preview .kpi-report-file-size {
        color: var(--clr-text-tertiary);
        white-space: nowrap;
    }

    .kpi-report-file-preview .kpi-report-file-remove {
        margin-left: auto;
        cursor: pointer;
        border: none;
        background: transparent;
        color: var(--clr-danger, #dc2626);
        font-size: 14px;
        line-height: 1;
    }
/* ===== Календарь активности пользователей (админ /Admin/Activity) ===== */
.kpi-activity-year {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.kpi-act-month {
    border: 1px solid var(--clr-border, #e6e8eb);
    border-radius: 10px;
    padding: 8px 10px;
    background: var(--clr-surface, #fff);
}

.kpi-act-month-title {
    font-weight: 600;
    font-size: .9rem;
    margin-bottom: 6px;
    text-align: center;
    cursor: pointer;
    border-radius: 6px;
    padding: 2px 0;
    transition: background .12s ease;
}

    .kpi-act-month-title:hover {
        background: rgba(33,150,243,.12);
    }

.kpi-act-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    font-size: .7rem;
}

.kpi-act-wd {
    text-align: center;
    color: var(--bs-secondary-color, #6c757d);
    font-size: .62rem;
    padding-bottom: 2px;
}

    .kpi-act-wd.we {
        color: #d9534f;
    }

.kpi-act-cell {
    text-align: center;
    padding: 3px 0;
    border-radius: 4px;
    line-height: 1.3;
    cursor: default;
    transition: transform .08s ease, box-shadow .08s ease;
    color: #222;
    border: 1px solid transparent;
}

    .kpi-act-cell.empty {
        background: transparent;
        border: none;
    }

    .kpi-act-cell.we {
        text-decoration: underline;
        text-decoration-color: rgba(217,83,79,.6);
        text-underline-offset: 2px;
    }

    .kpi-act-cell:hover {
        transform: scale(1.18);
        box-shadow: 0 2px 8px rgba(0,0,0,.25);
        z-index: 5;
        position: relative;
    }

.kpi-act-l0 {
    background: #E0E0E0;
}

.kpi-act-l1 {
    background: #FFC107;
}

.kpi-act-l2 {
    background: #FF9800;
}

.kpi-act-l3 {
    background: #D32F2F;
    color: #fff;
}

.kpi-act-today {
    border-color: #2196F3 !important;
    box-shadow: 0 0 0 2px rgba(33,150,243,.4);
    font-weight: 700;
}

.kpi-activity-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: .82rem;
    color: var(--bs-secondary-color, #6c757d);
}

.kpi-activity-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.kpi-act-dot {
    display: inline-block;
    width: 13px;
    height: 13px;
    border-radius: 3px;
}

.kpi-act-today.kpi-act-dot {
    background: #fff;
    border: 2px solid #2196F3;
}

.kpi-act-we-icon {
    color: #d9534f;
}

/* Поиск пользователя по ФИО */
.kpi-activity-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-secondary-color, #6c757d);
    pointer-events: none;
}

.kpi-activity-search .form-control {
    padding-left: 38px;
}

.kpi-activity-search-results {
    position: absolute;
    z-index: 1100;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, rgba(0,0,0,.15));
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.22);
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
}

.kpi-activity-search-item {
    padding: 9px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--bs-border-color, rgba(0,0,0,.08));
}

    .kpi-activity-search-item:last-child {
        border-bottom: none;
    }

    .kpi-activity-search-item:hover {
        background: var(--bs-tertiary-bg, #f2f4f7);
    }

.kpi-activity-search-name {
    font-weight: 600;
}

.kpi-activity-search-meta {
    font-size: .76rem;
    color: var(--bs-secondary-color, #6c757d);
}

.kpi-activity-search-empty {
    padding: 12px 14px;
    color: var(--bs-secondary-color, #6c757d);
    font-size: .85rem;
}

/* Подсветка активных дней выбранного пользователя */
.kpi-act-user-online {
    background: #c8e6c9 !important;
    color: #1b5e20 !important;
    box-shadow: inset 0 0 0 2px #2e7d32;
    font-weight: 700;
}

.kpi-activity-highlight-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #a5d6a7;
    background: #e8f5e9;
    color: #1b5e20;
    border-radius: 10px;
    font-size: .9rem;
}

    .kpi-activity-highlight-banner #userHighlightName {
        font-weight: 700;
    }

.kpi-activity-highlight-sub {
    opacity: .85;
}

.kpi-activity-highlight-banner .kpi-btn {
    margin-left: auto;
}

.kpi-act-online-dot {
    color: #2e7d32;
    font-size: .7rem;
}

.kpi-act-gradient {
    display: inline-block;
    width: 180px;
    height: 13px;
    border-radius: 3px;
    vertical-align: middle;
    background: linear-gradient(to right, #FFFFFF, #FFF176, #FFB300, #FB8C00, #E53935);
    border: 1px solid rgba(0,0,0,.15);
}

/* Тултип по дню */
.kpi-activity-tooltip {
    position: fixed;
    z-index: 1200;
    background: #1f2733;
    color: #f3f5f8;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: .8rem;
    max-width: 280px;
    box-shadow: 0 6px 22px rgba(0,0,0,.35);
    pointer-events: none;
}

.kpi-act-tip-date {
    font-weight: 700;
    margin-bottom: 2px;
}

.kpi-act-tip-wd {
    font-weight: 400;
    opacity: .8;
}

.kpi-act-tip-row {
    margin-bottom: 4px;
}

.kpi-act-tip-users {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .kpi-act-tip-users li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        padding: 2px 0;
        border-top: 1px solid rgba(255,255,255,.08);
    }

.kpi-act-tip-name {
    font-weight: 600;
}

.kpi-act-tip-email {
    opacity: .75;
    font-size: .74rem;
}

.kpi-act-tip-count {
    margin-left: auto;
    opacity: .9;
}

.kpi-act-tip-time {
    width: 100%;
    font-size: .72rem;
    opacity: .65;
}

.kpi-act-tip-more {
    margin-top: 4px;
    font-style: italic;
    opacity: .85;
}

.kpi-act-online {
    color: #4caf50;
    font-size: .6rem;
}

.kpi-act-offline {
    color: #78909c;
    font-size: .6rem;
}

/* Таблица месяца */
.kpi-activity-table td, .kpi-activity-table th {
    vertical-align: middle;
    font-size: .85rem;
}

.kpi-act-toggle {
    cursor: pointer;
    color: var(--bs-secondary-color, #6c757d);
    width: 24px;
    text-align: center;
}

.kpi-act-detail td {
    background: var(--clr-surface-2, #f7f8fa);
    padding: 0 8px;
}

.kpi-act-logins {
    padding: 6px 4px;
}

.kpi-act-ua {
    max-width: 320px;
    word-break: break-all;
    font-size: .74rem;
    color: var(--bs-secondary-color, #6c757d);
}

.kpi-user-link {
    color: #2196F3;
    text-decoration: none;
    cursor: pointer;
}

    .kpi-user-link:hover {
        text-decoration: underline;
    }

/* Статистика пользователя */
.kpi-activity-user-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.kpi-act-stat {
    flex: 1 1 150px;
    border: 1px solid var(--clr-border, #e6e8eb);
    border-radius: 8px;
    padding: 8px 10px;
    background: var(--clr-surface, #fff);
}

.kpi-act-stat-label {
    font-size: .76rem;
    color: var(--bs-secondary-color, #6c757d);
}

.kpi-act-stat-value {
    font-size: 1.05rem;
    font-weight: 700;
    margin-top: 2px;
}

/* Широкие модалки активности */
.kpi-modal-lg {
    max-width: 920px;
}

/* Переключатель режима «По пользователям / По организациям» — pill-shaped segmented control */
.kpi-activity-mode-toggle {
    position: relative;
    display: inline-flex;
    background: var(--clr-border, #e0e3e8);
    border-radius: 9999px;
    padding: 2px;
    gap: 0;
}

.kpi-activity-mode-slider {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 50%;
    height: calc(100% - 4px);
    background: var(--bs-primary, #2196F3);
    border-radius: 9999px;
    transition: transform .25s cubic-bezier(.4,0,.2,1), width .25s cubic-bezier(.4,0,.2,1);
    z-index: 0;
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(33,150,243,.35);
}

.kpi-activity-mode-toggle[data-active="orgs"] .kpi-activity-mode-slider {
    transform: translateX(100%);
}

.kpi-activity-mode-btn {
    position: relative;
    z-index: 1;
    border: none;
    background: transparent;
    font-size: .8rem;
    font-weight: 500;
    padding: 5px 14px;
    color: var(--bs-secondary-color, #6c757d);
    cursor: pointer;
    transition: color .2s ease;
    white-space: nowrap;
    border-radius: 9999px;
}

    .kpi-activity-mode-btn.active {
        color: #fff;
    }

    .kpi-activity-mode-btn:not(.active):hover {
        color: var(--bs-primary, #2196F3);
        opacity: .7;
    }

/* Вкладки модалки месяца */
.kpi-activity-month-tabs {
    border-bottom: 2px solid var(--clr-border, #e6e8eb);
}

.kpi-activity-tab-btn {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 8px 16px;
    font-size: .88rem;
    font-weight: 500;
    color: var(--bs-secondary-color, #6c757d);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}

    .kpi-activity-tab-btn:hover {
        color: var(--bs-primary, #2196F3);
    }

    .kpi-activity-tab-btn.active {
        color: var(--bs-primary, #2196F3);
        border-bottom-color: var(--bs-primary, #2196F3);
        font-weight: 600;
    }

/* Блок «не входили» */
.kpi-act-not-entered-block {
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--clr-surface-2, #f7f8fa);
    border: 1px solid var(--clr-border, #e6e8eb);
    border-radius: 8px;
}

.kpi-act-not-entered-title {
    font-size: .85rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 6px;
}

.kpi-act-not-entered-list {
    max-height: 140px;
    overflow-y: auto;
    font-size: .82rem;
    line-height: 1.6;
}

/* ===================== Организационная блок-схема ===================== */
.org-toolbar .org-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .org-toolbar .org-field .form-label {
        font-size: .72rem;
        margin: 0;
        color: var(--bs-secondary-color, #6c757d);
    }

.org-org-badge {
    background: #e0e7ff;
    color: #3730a3;
    font-weight: 600;
}

.org-role-badge {
    background: #f1f5f9;
    color: #475569;
    font-weight: 600;
    text-transform: capitalize;
}

.org-role-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

    .org-role-badges .org-role-badge {
        font-size: .7rem;
        padding: 2px 8px;
        border-radius: 10px;
        white-space: nowrap;
    }

.org-chart-wrap {
    max-width: 100vw;
    overflow-x: auto;
    padding: 8px 4px 40px;
}

.org-tree {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.org-connector {
    position: absolute;
    background: #94a3b8;
    z-index: 0;
    pointer-events: none;
}

.org-node {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
}

.org-children {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 22px 28px;
    justify-content: center;
    padding-top: 26px;
}

    .org-children.collapsed {
        display: none;
    }

.org-node-card {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 240px;
    max-width: 80vw;
    padding: 10px 12px;
    background: var(--clr-surface, #fff);
    border: 1px solid var(--clr-border, #e2e8f0);
    border-left: 4px solid #94a3b8;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    will-change: transform;
    animation: org-fade-in 0.3s ease both;
}

    .org-node-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
    }

    .org-node-card.org-node--active {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
    }

.org-node--match {
    border-color: #f59e0b !important;
}

@keyframes org-fade-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.org-toggle {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--clr-border, #e2e8f0);
    background: #fff;
    color: #475569;
    font-size: .7rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.org-node-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #334155;
    font-size: .95rem;
}

.org-node-body {
    min-width: 0;
    flex: 1 1 auto;
}

.org-node-name {
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.15;
    word-break: break-word;
}

.org-node-sub {
    font-size: .74rem;
    color: var(--bs-secondary-color, #6c757d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

/* Плашка роли/должности */
.org-role-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.org-role-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.5;
    border: 1px solid transparent;
    white-space: nowrap;
}

.org-role-organization {
    color: #6d28d9;
    background: #f3e8ff;
    border-color: #e9d5ff;
}

.org-role-department {
    color: #4338ca;
    background: #e0e7ff;
    border-color: #c7d2fe;
}

.org-role-director {
    color: #6d28d9;
    background: #f3e8ff;
    border-color: #e9d5ff;
}

.org-role-departmenthead {
    color: #0369a1;
    background: #e0f2fe;
    border-color: #bae6fd;
}

.org-role-specialist {
    color: #c2410c;
    background: #ffedd5;
    border-color: #fed7aa;
}

.org-role-employee {
    color: #475569;
    background: #f1f5f9;
    border-color: #e2e8f0;
}

.org-node-status {
    display: inline-block;
    margin-top: 3px;
    font-size: .68rem;
    padding: 1px 7px;
    border-radius: 999px;
    font-weight: 600;
}

.org-status-active {
    background: #dcfce7;
    color: #15803d;
}

.org-status-sickleave {
    background: #fef9c3;
    color: #a16207;
}

.org-status-dismissed {
    background: #fee2e2;
    color: #b91c1c;
}

/* Акценты по типу узла */
.org-node--organization > .org-node-card {
    border-left-color: #4f46e5;
    width: 280px;
}

    .org-node--organization > .org-node-card .org-node-icon {
        background: #e0e7ff;
        color: #4f46e5;
    }

.org-node--department > .org-node-card {
    border-left-color: #0ea5e9;
}

    .org-node--department > .org-node-card .org-node-icon {
        background: #e0f2fe;
        color: #0369a1;
    }

.org-node--director > .org-node-card {
    border-left-color: #7c3aed;
}

    .org-node--director > .org-node-card .org-node-icon {
        background: #f3e8ff;
        color: #7c3aed;
    }

.org-node--departmenthead > .org-node-card {
    border-left-color: #db2777;
}

    .org-node--departmenthead > .org-node-card .org-node-icon {
        background: #fce7f3;
        color: #db2777;
    }

.org-node--specialist > .org-node-card {
    border-left-color: #ca8a04;
}

    .org-node--specialist > .org-node-card .org-node-icon {
        background: #fef9c3;
        color: #a16207;
    }

.org-node--employee > .org-node-card .org-node-icon {
    background: #f1f5f9;
    color: #334155;
}

/* Счётчики */
.org-counters {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 240px;
    max-width: 80vw;
    position: relative;
    z-index: 2;
}

.org-group-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 2px;
}

.org-info {
    margin-left: auto;
    cursor: help;
    color: #94a3b8;
    font-size: .8rem;
}

    .org-info:hover,
    .org-info:focus {
        color: #475569;
    }

.org-counter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    border-radius: 8px;
    background: var(--clr-surface-2, #f8fafc);
    border: 1px solid var(--clr-border, #eef2f7);
}

.kpi-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .78rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--clr-border, #e2e8f0);
}

    .kpi-item .kpi-val {
        font-variant-numeric: tabular-nums;
    }

.kpi-label {
    font-weight: 500;
    color: var(--bs-secondary-color, #64748b);
    font-size: .7rem;
}

mark.org-hl {
    background: #fde68a;
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}

@media print {
    .org-toolbar, #collapseAllBtn, #expandAllBtn, #exportBtn {
        display: none !important;
    }

    .org-children.collapsed {
        display: flex !important;
    }

    .org-node-card {
        box-shadow: none;
    }
}

/* ==================== Поручения руководителя (kpi_assignments) ==================== */
/* Подсветка строки показателя с действующим поручением руководителя */
.kpi-assign-row {
    background: var(--clr-accent-bg, rgba(59,130,246,.06));
}

    .kpi-assign-row:hover {
        background: var(--clr-accent-bg, rgba(59,130,246,.10));
    }

[data-bs-theme="dark"] .kpi-assign-row {
    background: rgba(59,130,246,.12);
}

    [data-bs-theme="dark"] .kpi-assign-row:hover {
        background: rgba(59,130,246,.18);
    }

/* Блок поручения внутри ячейки значения */
.kpi-assignment-block {
    margin-top: 6px;
    padding: 6px 8px;
    border-left: 3px solid var(--clr-accent);
    border-radius: var(--radius-sm);
    background: var(--clr-surface, #fff);
    font-size: var(--text-xs);
    color: var(--clr-text-primary);
}

.kpi-assignment-label {
    font-weight: var(--fw-semibold);
    display: flex;
    gap: 8px;
    align-items: baseline;
    flex-wrap: wrap;
}

.kpi-assignment-deadline {
    color: var(--clr-accent);
    font-weight: var(--fw-medium);
}

.kpi-assignment-comment {
    margin-top: 4px;
    color: var(--clr-text-secondary);
    font-style: italic;
    white-space: pre-line;
}

/* ==================== Блок «План показателей и выполнение» (дашборды) ==================== */
.kpi-ind-exec-toolbar {
    position: relative;
}

/* Выпадающая панель мультивыбора районов/отделов */
.kpi-ind-exec-filter {
    position: absolute;
    z-index: 1050;
    top: 0;
    right: 1rem;
    width: min(380px, 92%);
    max-height: 80%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: var(--space-3);
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.kpi-ind-exec-links {
    display: flex;
    gap: var(--space-4);
    align-items: center;
}

.kpi-ind-exec-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: var(--text-sm);
    color: var(--clr-accent);
    cursor: pointer;
    text-align: left;
}

    .kpi-ind-exec-link:hover {
        text-decoration: underline;
    }

    .kpi-ind-exec-link:focus-visible {
        outline: 2px solid var(--clr-accent);
        outline-offset: 2px;
    }

.kpi-ind-exec-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.kpi-ind-exec-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 260px;
    overflow-y: auto;
    padding: var(--space-2);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
}

.kpi-ind-exec-check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: var(--text-sm);
    font-weight: normal;
    cursor: pointer;
}

    .kpi-ind-exec-check-row input[type="checkbox"] {
        accent-color: var(--clr-accent);
        flex-shrink: 0;
    }

.kpi-ind-exec-check-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kpi-ind-exec-check-total {
    flex-shrink: 0;
    font-size: var(--text-2xs);
    color: var(--clr-text-tertiary);
}

.kpi-ind-exec-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0 1rem;
}