/**
 * Раздел «Сотрудники»: отчёт «Движение и текучесть» (.hr-report) и сводки под
 * реестром сотрудников (.hr-panel).
 *
 * Собственный файл, а не утилиты Tailwind: панель отдаёт только свою сборку
 * Filament, и классов вроде grid-cols-4 в ней просто нет. Цвета берём из темы
 * Filament 4 — там переменные вида --gray-200 уже готовые цвета (oklch), не
 * RGB-тройки, поэтому прозрачность делаем через color-mix(). У каждой
 * переменной есть запасное значение: переименуют тему — отчёт останется
 * читаемым, а не превратится в белые пятна.
 */

.hr-report {
    --hr-border: var(--gray-200, #e5e7eb);
    --hr-surface: var(--gray-50, #f9fafb);
    --hr-text: var(--gray-900, #111827);
    --hr-text-muted: var(--gray-500, #6b7280);
    --hr-accent: var(--primary-600, #1c8437);
    --hr-danger: var(--danger-600, #dc2626);
    --hr-warning: var(--warning-500, #f59e0b);

    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    color: var(--hr-text);
}

:is(.dark) .hr-report {
    --hr-border: var(--gray-700, #374151);
    --hr-surface: var(--gray-800, #1f2937);
    --hr-text: var(--gray-100, #f3f4f6);
    --hr-text-muted: var(--gray-400, #9ca3af);
    --hr-accent: var(--primary-500, #22a34a);
    --hr-danger: var(--danger-500, #ef4444);
}

/* ── Подпись выбранных условий ───────────────────────────────────────────── */

.hr-report__scope {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: var(--hr-text-muted);
}

.hr-report__scope-period {
    font-weight: 600;
    color: var(--hr-text);
}

.hr-report__scope-sep {
    opacity: 0.5;
}

.hr-report__subtitle {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hr-text-muted);
    margin-bottom: 0.75rem;
}

/* ── Карточки показателей ────────────────────────────────────────────────── */

.hr-report__grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .hr-report__grid--2,
    .hr-report__grid--3,
    .hr-report__grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .hr-report__grid--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hr-report__grid--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.hr-report__card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--hr-border);
    background: var(--hr-surface);
}

.hr-report__card-label {
    font-size: 0.75rem;
    color: var(--hr-text-muted);
}

.hr-report__card-value {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.hr-report__card-hint {
    font-size: 0.75rem;
    color: var(--hr-text-muted);
    line-height: 1.35;
}

.is-success {
    color: var(--hr-accent);
}

.is-danger {
    color: var(--hr-danger);
}

.is-warning {
    color: var(--hr-warning);
}

.is-muted {
    color: var(--hr-text-muted);
}

/* ── Ранняя текучесть: полоски ───────────────────────────────────────────── */

.hr-report__split {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 1024px) {
    .hr-report__split {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }
}

.hr-report__bars {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.hr-report__bar-row {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr) minmax(6.5rem, auto);
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8125rem;
}

.hr-report__bar-row.is-total {
    padding-top: 0.5rem;
    border-top: 1px solid var(--hr-border);
    font-weight: 600;
}

.hr-report__bar-label {
    color: var(--hr-text-muted);
}

.hr-report__bar-row.is-total .hr-report__bar-label {
    color: var(--hr-text);
}

.hr-report__bar-track {
    height: 0.625rem;
    background: color-mix(in oklab, var(--hr-border) 70%, transparent);
    overflow: hidden;
}

.hr-report__bar-fill {
    height: 100%;
    background: var(--hr-danger);
    /* Ноль процентов тоже должен быть виден — иначе строка выглядит сломанной */
    min-width: 2px;
}

.hr-report__bar-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.hr-report__bar-count {
    display: block;
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--hr-text-muted);
}

/* ── Таблица разреза ─────────────────────────────────────────────────────── */

.hr-report__table-wrap {
    overflow-x: auto;
}

.hr-report__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.hr-report__table th,
.hr-report__table td {
    padding: 0.5rem 0.625rem;
    border-bottom: 1px solid var(--hr-border);
    text-align: left;
    white-space: nowrap;
}

.hr-report__table th {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hr-text-muted);
    position: sticky;
    top: 0;
    background: var(--hr-surface);
}

.hr-report__table td.is-numeric,
.hr-report__table th.is-numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.hr-report__table tbody tr:hover td {
    background: color-mix(in oklab, var(--hr-surface) 65%, transparent);
}

.hr-report__table-name {
    font-weight: 500;
    white-space: normal;
    min-width: 12rem;
}

.hr-report__table-sub {
    display: block;
    font-size: 0.6875rem;
    color: var(--hr-text-muted);
}

.hr-report__empty {
    padding: 1.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--hr-text-muted);
}

/* ── Примечания ──────────────────────────────────────────────────────────── */

.hr-report__notes {
    padding: 1rem 1.25rem;
    border: 1px solid var(--hr-border);
    background: var(--hr-surface);
}

.hr-report__notes ul {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0;
    padding-left: 1.1rem;
    list-style: disc;
    font-size: 0.8125rem;
    color: var(--hr-text-muted);
    line-height: 1.45;
}


/* ════════════════════════════════════════════════════════════════════════════
   Сводки под реестром: топ должностей, стаж, штат по подразделениям.

   Раньше это были графики Chart.js, и на двух десятках подразделений столбцы
   схлопывались в двухпиксельные полоски без единой подписи. Здесь всё наоборот:
   высота строки фиксирована и не зависит от их числа, число всегда на виду,
   строка кликается и выставляет фильтр реестру.
   ════════════════════════════════════════════════════════════════════════════ */

.hr-panel {
    --hr-border: var(--gray-200, #e5e7eb);
    --hr-surface: var(--gray-50, #f9fafb);
    --hr-text: var(--gray-900, #111827);
    --hr-text-muted: var(--gray-500, #6b7280);
    --hr-staff: var(--primary-600, #1c8437);
    --hr-left: var(--danger-500, #ef4444);
    --hr-danger: var(--danger-600, #dc2626);
    --hr-warning: var(--warning-500, #f59e0b);
    --hr-hover: color-mix(in oklab, var(--primary-500, #22a34a) 10%, transparent);

    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    color: var(--hr-text);
}

:is(.dark) .hr-panel {
    --hr-border: var(--gray-700, #374151);
    --hr-surface: var(--gray-800, #1f2937);
    --hr-text: var(--gray-100, #f3f4f6);
    --hr-text-muted: var(--gray-400, #9ca3af);
    --hr-staff: var(--primary-500, #22a34a);
    --hr-danger: var(--danger-500, #ef4444);
}

.hr-panel__list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ── Строка списка ───────────────────────────────────────────────────────────
   Ширину списка НЕ ограничиваем. Соблазн поставить max-width, чтобы числа не
   убегали к краю на широком мониторе, выходит боком: у отдалённого браузера
   вьюпорт бывает и 3800 CSS-пикселей, и тогда предел в 82rem съедает две трети
   блока. Таблица реестра над сводками растягивается на всю ширину — сводки
   должны вести себя так же. ─────────────────────────────────────────────── */

.hr-panel__row {
    display: grid;
    grid-template-columns: minmax(7rem, 17rem) minmax(0, 1fr) minmax(4.5rem, auto);
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: left;
    font: inherit;
    font-size: 0.8125rem;
    color: inherit;
    cursor: pointer;
    transition: background-color .12s ease;
}

.hr-panel__row.is-dual {
    grid-template-columns: minmax(8rem, 18rem) minmax(0, 1fr) minmax(4.5rem, auto) minmax(5.5rem, auto);
}

.hr-panel__row:hover,
.hr-panel__row:focus-visible {
    background: var(--hr-hover);
    outline: none;
}

/* Выбранная строка — это и есть текущий фильтр реестра. Полоска слева, а не
   заливка целиком: заливка спорила бы с наведением мыши. */
.hr-panel__row.is-active {
    background: var(--hr-hover);
    box-shadow: inset 3px 0 0 0 var(--hr-staff);
    font-weight: 600;
}

.hr-panel__row:disabled {
    opacity: .6;
    cursor: progress;
}

.hr-panel__row-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hr-panel__row.is-active .hr-panel__row-label {
    color: var(--hr-staff);
}

.hr-panel__row-value,
.hr-panel__row-metric {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}

.hr-panel__row-sub {
    display: block;
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--hr-text-muted);
}

/* ── Полоски ─────────────────────────────────────────────────────────────── */

.hr-panel__bars {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.hr-panel__track {
    display: block;
    height: 0.625rem;
    background: color-mix(in oklab, var(--hr-border) 70%, transparent);
    overflow: hidden;
}

.hr-panel__track.is-thin {
    height: 0.3125rem;
}

.hr-panel__fill {
    display: block;
    height: 100%;
    /* Ноль тоже должен читаться как ноль, а не как обрыв вёрстки */
    min-width: 2px;
    transition: width .2s ease;
}

.hr-panel__fill.is-staff {
    background: var(--hr-staff);
}

.hr-panel__fill.is-left {
    background: var(--hr-left);
}

/* ── Полоса стажа: одна шкала слева направо ──────────────────────────────── */

.hr-panel__stack {
    display: flex;
    width: 100%;
    height: 2.25rem;
    overflow: hidden;
}

.hr-panel__segment {
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: filter .12s ease;
    overflow: hidden;
    white-space: nowrap;
}

.hr-panel__segment:hover,
.hr-panel__segment:focus-visible {
    filter: brightness(1.15);
    outline: none;
}

.hr-panel__segment.is-active {
    box-shadow: inset 0 0 0 2px var(--hr-text);
}

.hr-panel__segment.is-fresh,
.hr-panel__swatch.is-fresh { background: #3b82f6; }

.hr-panel__segment.is-young,
.hr-panel__swatch.is-young { background: #22c55e; }

.hr-panel__segment.is-mid,
.hr-panel__swatch.is-mid { background: #1c8437; }

.hr-panel__segment.is-senior,
.hr-panel__swatch.is-senior { background: #eab308; }

.hr-panel__segment.is-veteran,
.hr-panel__swatch.is-veteran { background: #8b5cf6; }

/* ── Легенда ─────────────────────────────────────────────────────────────── */

.hr-panel__legend {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hr-panel__legend-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.3rem 0.5rem;
    border: 0;
    background: transparent;
    text-align: left;
    font: inherit;
    font-size: 0.8125rem;
    color: inherit;
    cursor: pointer;
    transition: background-color .12s ease;
}

.hr-panel__legend-row:hover,
.hr-panel__legend-row:focus-visible {
    background: var(--hr-hover);
    outline: none;
}

.hr-panel__legend-row.is-active {
    background: var(--hr-hover);
    box-shadow: inset 3px 0 0 0 var(--hr-staff);
    font-weight: 600;
}

.hr-panel__legend-count,
.hr-panel__legend-share {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.hr-panel__legend-count {
    min-width: 2.5rem;
    font-weight: 600;
}

.hr-panel__legend-share {
    min-width: 3.5rem;
    color: var(--hr-text-muted);
}

.hr-panel__legend-top {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--hr-text-muted);
}

.hr-panel__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.hr-panel__swatch {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    flex: none;
}

.hr-panel__swatch.is-staff { background: var(--hr-staff); }
.hr-panel__swatch.is-left { background: var(--hr-left); }

/* ── Подписи снизу ───────────────────────────────────────────────────────── */

.hr-panel__foot {
    padding-top: 0.25rem;
    border-top: 1px solid var(--hr-border);
    font-size: 0.75rem;
    color: var(--hr-text-muted);
    line-height: 1.4;
}

.hr-panel__foot a {
    color: var(--hr-staff);
    text-decoration: underline;
}

.hr-panel__empty {
    padding: 1.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--hr-text-muted);
}