/**
 * dashboard.css
 * Страница: рабочий стол
 * Блок: сводные блоки модулей
 *
 * Внутри:
 * 1. Рамка блока: заголовок, значок, ссылка «подробнее»
 * 2. Тело блока и крутилка на время счёта
 * 3. Цифры внутри блока — общий вид для всех модулей
 */

/* 1. Рамка блока
   ------------------------------------------------------------------ */

.dashboard-block {
    height: 100%;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background: var(--bs-body-bg);

    /* Отсчёт для отметки «обновлено»: она прижата к углу карточки. */
    position: relative;
}

/* Правая часть шапки: «подробнее» и кнопки блока — вместе, вплотную. */
.dashboard-block-tools {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-left: auto;
}

/*
 * Шапка блока низкая: у всех блоков одна высота, кнопка её не растит
 * (замечание Александра 08.09.2026 — «какие огромные заголовки»,
 * а у графика из-за кнопки ещё выше).
 *
 * Выравнивание по середине, а не по базовой линии: с кнопкой в строке
 * базовая линия тянет её вниз и добавляет блоку высоты.
 */
.dashboard-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .375rem .875rem;
    border-bottom: 1px solid var(--bs-border-color);
}

/*
 * Кнопка действия не выше строки заголовка, а значок в ней —
 * по центру.
 *
 * Значок шрифтовой, и у него своё смещение по базовой линии
 * (`vertical-align` у `.bi::before`): в обычной кнопке он садится
 * ниже середины, и снизу зазор выходит больше, чем сверху. Гибкая
 * раскладка с `line-height: 1` ставит его ровно и не зависит
 * от шрифта.
 */
.dashboard-block-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding: 0 .35rem;
    line-height: 1;
}

.dashboard-block-action .bi {
    line-height: 1;
}

.dashboard-block-action .bi::before {
    vertical-align: 0;
}

.dashboard-block-title {
    font-weight: 600;
}

.dashboard-block-title .bi {
    color: var(--bs-secondary-color);
    margin-right: .25rem;
}

/* Ссылка «подробнее» приглушена: она нужна, но заголовок важнее. */
.dashboard-block-more {
    font-size: .8125rem;
    color: var(--bs-secondary-color);
    text-decoration: none;
    white-space: nowrap;
}

.dashboard-block-more:hover {
    color: var(--bs-primary);
}

/* 2. Тело блока
   ------------------------------------------------------------------ */

.dashboard-block-body {
    padding: .875rem;

    /*
     * Снизу оставлено место под отметку «обновлено»: она прижата
     * к углу карточки и лежит поверх, а не в потоке. Без запаса
     * содержимое наезжало бы на неё в коротких блоках.
     */
    padding-bottom: 1.9rem;
}

/* 3. Цифры внутри блока
   ------------------------------------------------------------------
   Общий вид для всех модулей: блок склада и блок товаров должны
   выглядеть одинаково, иначе главная превратится в лоскутное одеяло
   (правило 0.8). */

.dashboard-figures {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.dashboard-figure {
    min-width: 4.5rem;
}

.dashboard-figure-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.dashboard-figure-label {
    display: block;
    font-size: .8125rem;
    color: var(--bs-secondary-color);
}

/* То, что требует внимания: пропавшие товары, склады без связки.
   Цифра красная, подпись обычная — иначе блок пестрит. */
.dashboard-figure.attention .dashboard-figure-value {
    color: var(--bs-danger);
}

.dashboard-note {
    margin-top: .75rem;
    font-size: .8125rem;
    color: var(--bs-secondary-color);
}

/*
 * Отметка «обновлено»: когда блок последний раз перечитал себя.
 *
 * Стоит там же и выглядит так же, как прежние строки «обновлено
 * столько-то назад», которые блоки писали каждый по-своему: мелким
 * серым, внизу, внутри отступов тела. Своим видом она спорить
 * с цифрами не должна — это служебная строка, а не число
 * (замечание Александра 08.09.2026: крупным чёрным и вплотную
 * к краю она читалась как часть данных).
 *
 * Пустая, пока содержимое не приехало: отступа от пустой строки
 * не бывает, и блок не подпрыгивает, когда она появится.
 */
/*
 * Отметка прижата к правому нижнему углу **карточки**, а не стоит
 * под текстом содержимого.
 *
 * Разница видна, когда блоки разной высоты: в потоке отметка вставала
 * сразу за текстом, и в соседних блоках оказывалась на разной высоте —
 * взгляд искал её заново в каждом (замечание Александра 08.09.2026).
 * Поверх — у всех блоков одно и то же место.
 */
.dashboard-block-updated {
    position: absolute;
    right: .875rem;
    bottom: .55rem;
    font-size: .75rem;
    color: var(--bs-gray-500);
}

/*
 * Ссылка в подвале блока («Посмотреть детали» у графика заказов,
 * `DashboardBlock::footerLink()`) — тот же приём и тот же ряд,
 * что у отметки «обновлено» выше, только у левого края: тоже
 * поверх содержимого, не в потоке, чтобы блок не вырастал выше
 * соседних в ряду (задача №8 трекера, то же рассуждение, что
 * у `.dashboard-block-updated`).
 */
.dashboard-block-details {
    position: absolute;
    left: .875rem;
    bottom: .55rem;
}