/* ============================================================
   Dashboard — стили главной страницы
   ============================================================ */

/* --------------------------------------------------------
   Круги «Ваша загрузка»
   -------------------------------------------------------- */
.dash-circles {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-8);
    padding: var(--space-5) var(--space-4);
    margin-bottom: var(--space-5);
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    flex-wrap: wrap;
}

.dash-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 0 0 200px;
}

.dash-circle-ring {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: conic-gradient(
        var(--border-default) 0,
        var(--bg-subtle) 0
    );
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background 300ms ease;
}

.dash-circle-ring::after {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: var(--bg-surface);
    transition: background 200ms ease;
}

.dash-circle-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.dash-circle-value {
    font-size: 24px;
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.dash-circle-label {
    font-size: 13px;
    font-weight: var(--fw-medium);
    color: var(--text-primary);
    text-align: center;
}

.dash-circle-hint {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.4;
    min-height: 28px;
    max-width: 100%;
    word-wrap: break-word;
}

.dash-circle-hint-extra {
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 500;
}

.dash-circle.is-empty .dash-circle-value {
    color: var(--text-tertiary);
}

.dash-circle.is-empty .dash-circle-hint {
    color: var(--text-tertiary);
}

.dash-circle.has-overdue .dash-circle-hint {
    color: var(--color-danger-text);
    font-weight: var(--fw-medium);
}

/* --------------------------------------------------------
   Кастомный тултип для кольца
   -------------------------------------------------------- */
.dash-tooltip {
    position: fixed;
    z-index: var(--z-tooltip, 700);
    padding: 8px 12px;
    background: var(--text-primary, #0f1419);
    color: var(--text-inverse, #ffffff);
    border-radius: var(--radius-md, 7px);
    font-size: 12px;
    line-height: 1.4;
    box-shadow: 0 8px 24px rgba(15, 20, 25, 0.18), 0 2px 6px rgba(15, 20, 25, 0.12);
    pointer-events: none;
    opacity: 0;
    transition: opacity 120ms ease, transform 120ms ease;
    transform: translateY(-2px);
    max-width: 240px;
    white-space: nowrap;
}

.dash-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.dash-tooltip::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 0;
    height: 0;
    margin-left: -5px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--text-primary, #0f1419);
}

.dash-tooltip.is-below::after {
    bottom: auto;
    top: -5px;
    border-top: none;
    border-bottom: 5px solid var(--text-primary, #0f1419);
}

.dash-tooltip-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}

.dash-tooltip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dash-tooltip-text {
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------
   Нижний блок: 2 колонки
   -------------------------------------------------------- */
.dash-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    align-items: stretch;
}

@media (max-width: 900px) {
    .dash-bottom {
        grid-template-columns: 1fr;
    }
}

.dash-card-fixed {
    display: flex;
    flex-direction: column;
    height: 550px;
    min-height: 0;
    overflow: hidden;
}

.dash-card-fixed .card-header {
    flex-shrink: 0;
}

/* ============================================================
   Список отсутствующих сегодня (Вариант A)
   — цветная полоса слева по категории причины
   — ФИО + бейдж «осталось N дней»
   — должность · отдел
   — иконка + название причины + дата окончания
   — заместитель
   ============================================================ */
.dash-absent-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Контейнер строки: полоса + тело */
.dash-absent-row {
    position: relative;
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--border-subtle);
    transition: background var(--duration-fast) var(--ease);
}

.dash-absent-row:last-child {
    border-bottom: none;
}

.dash-absent-row:hover {
    background: var(--bg-surface-2);
}

/* Цветная полоса слева — по категории причины.
   Дефолт (data-color="neutral") — серая. */
.dash-absent-stripe {
    width: 3px;
    flex-shrink: 0;
    background: var(--text-tertiary);
}

.dash-absent-row[data-color="neutral"] .dash-absent-stripe { background: var(--text-tertiary); }
.dash-absent-row[data-color="info"]    .dash-absent-stripe { background: var(--color-info); }
.dash-absent-row[data-color="danger"]  .dash-absent-stripe { background: var(--color-danger); }
.dash-absent-row[data-color="warning"] .dash-absent-stripe { background: var(--color-warning); }
.dash-absent-row[data-color="success"] .dash-absent-stripe { background: var(--color-success); }
.dash-absent-row[data-color="accent"]  .dash-absent-stripe { background: var(--accent-primary); }

/* Тело строки */
.dash-absent-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: var(--space-3) var(--space-4);
}

/* Шапка: ФИО + бейдж справа */
.dash-absent-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
}

.dash-absent-name {
    font-size: 13px;
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    line-height: 1.35;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Бейдж «осталось N дней» */
.dash-absent-badge {
    font-size: 11px;
    font-weight: var(--fw-medium);
    white-space: nowrap;
    flex-shrink: 0;
    padding: 1px 8px;
    border-radius: var(--radius-sm);
    line-height: 1.5;
}

.dash-absent-badge.is-warning {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
    border: 1px solid var(--color-warning-border);
}

.dash-absent-badge.is-normal {
    background: var(--bg-subtle);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
}

.dash-absent-badge.is-neutral {
    background: transparent;
    color: var(--text-tertiary);
    border: 1px solid transparent;
}

/* Должность · Отдел */
.dash-absent-sub {
    font-size: 11px;
    color: var(--text-tertiary);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Строка причины: [иконка] Название ....... до 25.09 */
.dash-absent-reason {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-top: 2px;
}

.dash-absent-reason svg {
    flex-shrink: 0;
    color: var(--text-tertiary);
}

.dash-absent-row[data-color="danger"]  .dash-absent-reason svg { color: var(--color-danger); }
.dash-absent-row[data-color="warning"] .dash-absent-reason svg { color: var(--color-warning); }
.dash-absent-row[data-color="info"]    .dash-absent-reason svg { color: var(--color-info); }
.dash-absent-row[data-color="success"] .dash-absent-reason svg { color: var(--color-success); }
.dash-absent-row[data-color="accent"]  .dash-absent-reason svg { color: var(--accent-primary); }

.dash-absent-reason-name {
    color: var(--text-primary);
    flex-shrink: 0;
}

.dash-absent-reason-date {
    color: var(--text-tertiary);
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Строка заместителя */
.dash-absent-substitute {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-tertiary);
    line-height: 1.4;
    margin-top: 2px;
    word-wrap: break-word;
}

.dash-absent-substitute svg {
    flex-shrink: 0;
    color: var(--text-tertiary);
    opacity: 0.8;
}

.dash-absent-substitute strong {
    color: var(--text-secondary);
    font-weight: var(--fw-medium);
}

/* --------------------------------------------------------
   Пустое состояние
   -------------------------------------------------------- */
.dash-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 13px;
}

.dash-empty svg {
    display: block;
    margin: 0 auto 8px;
    width: 40px;
    height: 40px;
    opacity: 0.5;
}

/* --------------------------------------------------------
   Адаптив
   -------------------------------------------------------- */
@media (max-width: 599px) {
    .dash-absent-body {
        padding: var(--space-3);
    }

    .dash-absent-name {
        white-space: normal;
    }

    .dash-absent-sub {
        white-space: normal;
    }

    .dash-absent-badge {
        font-size: 10px;
    }

    .dash-absent-reason {
        flex-wrap: wrap;
    }

    .dash-absent-reason-date {
        margin-left: 0;
    }
}
/* ============================================================
   Быстрые ссылки под кругами — отдельная строка.
   «На приёмке», «Запрос». Работает как есть, без возни с кругом.
   ============================================================ */
.dash-quick-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: 0;
    margin-top: var(--space-3);
    margin-bottom: var(--space-5);
}

.dash-quick-filters:empty {
    display: none;
}

.dash-quick-filter {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--accent-text);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease);
    white-space: nowrap;
}

.dash-quick-filter::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-warning);
    flex-shrink: 0;
}

.dash-quick-filter[data-status="pending_extension"]::before {
    background: var(--color-info);
}

.dash-quick-filter:hover {
    color: var(--accent-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dash-quick-filter:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* ============================================================
   Быстрые ссылки ВНУТРИ второго круга.
   Круги выравниваются по высоте (stretch), «Всего» — на одной линии.
   ============================================================ */
.dash-circles {
    align-items: stretch;
}

.dash-circle {
    justify-content: flex-start;
}

.dash-circle-quick {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-top: 4px;
}

.dash-circle-quick:empty {
    display: none;
}

.dash-circle-quick .dash-quick-filter {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: var(--fw-medium);
    color: var(--accent-text);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease);
    white-space: nowrap;
}

.dash-circle-quick .dash-quick-filter::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-warning);
    flex-shrink: 0;
}

.dash-circle-quick .dash-quick-filter[data-status="pending_extension"]::before {
    background: var(--color-info);
}

.dash-circle-quick .dash-quick-filter:hover {
    color: var(--accent-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dash-circle-quick .dash-quick-filter:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* Убрать точку-маркер у ссылок внутри второго круга */
.dash-circle-quick .dash-quick-filter::before {
    display: none;
}

/* Убрать лишний отступ у quick, чтобы был только gap родителя */
.dash-circle-quick {
    margin-top: 0;
}

/* Для второго круга — тот же gap, что у всех, но чуть плотнее */
#dashCircleReviewWrap {
    gap: 6px;
}

/* ============================================================
   Увеличенные круги + более толстое кольцо.
   Размер 120px, кольцо 8px, число 32px.
   ============================================================ */
.dash-circle-ring {
    width: 120px;
    height: 120px;
}

.dash-circle-ring::after {
    inset: 8px;   /* толщина кольца остаётся 8px */
}

.dash-circle-value {
    font-size: 32px;
}

.dash-circle-label {
    font-size: 14px;
    font-weight: var(--fw-semibold);
}

.dash-circle-hint {
    font-size: 13px;
}

/* ============================================================
   Кольцо в 3 раза толще.
   Внешний 132px, кольцо 24px, отверстие 84px.
   ============================================================ */
.dash-circle-ring {
    width: 132px;
    height: 132px;
}

.dash-circle-ring::after {
    inset: 24px;
}

.dash-circle-value {
    font-size: 28px;
}

.dash-circle-label {
    font-size: 14px;
    font-weight: var(--fw-semibold);
}

.dash-circle-hint {
    font-size: 13px;
}

/* ============================================================
   Кольцо широкое — почти до цифр.
   Внешний 140px, кольцо 38px, отверстие 64px.
   ============================================================ */
.dash-circle-ring {
    width: 140px;
    height: 140px;
}

.dash-circle-ring::after {
    inset: 38px;
}

.dash-circle-value {
    font-size: 32px;
}

.dash-circle-label {
    font-size: 14px;
    font-weight: var(--fw-semibold);
}

.dash-circle-hint {
    font-size: 13px;
}

/* Уменьшить число внутри круга */
.dash-circle-value {
    font-size: 24px;
}

/* ============================================================
   Мобильный дашборд — компактные строки вместо кругов.
   Показывается только на узких экранах (≤ 599px).
   На десктопе #dashMobile скрыт через inline style="display:none".
   ============================================================ */
.dash-mobile {
    display: none;
}

@media (max-width: 599px) {
    /* Круги на мобилке не нужны */
    .dash-circles {
        display: none !important;
    }

    /* Показываем мобильный блок */
    .dash-mobile {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-bottom: var(--space-4);
    }

    /* Основная строка — ссылка на раздел */
    .dash-mobile-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 14px;
        background: var(--bg-surface);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-md);
        text-decoration: none;
        color: var(--text-primary);
        transition: background var(--duration-fast) var(--ease),
                    border-color var(--duration-fast) var(--ease);
    }

    .dash-mobile-row:hover,
    .dash-mobile-row:focus-visible {
        background: var(--bg-surface-2);
        border-color: var(--border-strong);
        text-decoration: none;
        outline: none;
    }

    .dash-mobile-label {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
        flex: 1;
        min-width: 0;
    }

    /* Три зоны справа: три пары (точка + число) */
    .dash-mobile-zones {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        flex-shrink: 0;
    }

    .dash-mobile-zone {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 14px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        color: var(--text-primary);
    }

    .dash-mobile-dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    /* Цвета точек по типу зоны */
    .dash-mobile-zone--in_work  .dash-mobile-dot { background: var(--color-success); }
    .dash-mobile-zone--soon     .dash-mobile-dot { background: var(--color-warning); }
    .dash-mobile-zone--overdue  .dash-mobile-dot { background: var(--color-danger); }

    /* Если в зоне 0 — приглушаем точку и число */
    .dash-mobile-zone--in_work:has(.dash-mobile-num:not(:empty)) {}
    .dash-mobile-zone--overdue .dash-mobile-num:only-child { color: var(--text-tertiary); }

    /* Подстроки-ссылки (Запрос: N, Ожидает принятия: N и т.д.) */
    .dash-mobile-sublinks {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 0 4px 4px 14px;
        margin-top: -2px;
    }

    .dash-mobile-sublinks:empty {
        display: none;
    }

    .dash-mobile-sublink {
        display: inline-block;
        font-size: 13px;
        color: var(--accent-text);
        text-decoration: none;
        padding: 4px 0;
        transition: color var(--duration-fast) var(--ease);
    }

    .dash-mobile-sublink:hover,
    .dash-mobile-sublink:focus-visible {
        color: var(--accent-hover);
        text-decoration: underline;
        text-underline-offset: 2px;
        outline: none;
    }
}

/* ============================================================
   Фикс размеров иконок в блоке «Отсутствующие сегодня».
   ============================================================
   Проблема: иконка «Замещает» рендерилась с разными размерами
   в разных карточках — где-то наследовался размер от родителя,
   где-то data-size игнорировался. Итог: «пляшущие» иконки.
   Решение: жёстко задаём width/height в CSS — это гарантирует
   единый размер независимо от inline-атрибутов.
   ============================================================ */

/* КОРЕНЬ ПРОБЛЕМЫ — не SVG, а его РОДИТЕЛЬ <span data-icon>.
   Flex-контейнер .dash-absent-substitute сжимал именно span,
   потому что у span не было flex-shrink: 0. SVG внутри span
   сжимался вместе с родителем до 6-7px.

   Фикс: фиксированная ширина span + flex-shrink: 0.
   SVG внутри растягивается на 100% span. */

.dash-absent-row span[data-icon] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0 !important;
}

.dash-absent-substitute span[data-icon] {
    width: 13px !important;
    height: 13px !important;
}

.dash-absent-reason span[data-icon] {
    width: 14px !important;
    height: 14px !important;
}

.dash-absent-row svg {
    width: 100% !important;
    height: 100% !important;
    flex-shrink: 0 !important;
}

.dash-absent-substitute svg {
    opacity: 0.7;
}