body {
    background-color: #f5f6f8;
}
.navbar-brand {
    font-weight: 600;
}
.card {
    border: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border-radius: 12px;
}
.stat-card .stat-value {
    font-size: 1.6rem;
    font-weight: 700;
}
.stat-card .stat-label {
    color: #6b7280;
    font-size: 0.85rem;
}
table td, table th {
    vertical-align: middle;
}
.table-responsive {
    background: white;
    border-radius: 12px;
}

/* Фиксированная высота для графиков Chart.js — без неё canvas
   растягивается по ширине контейнера и становится "приплюснутым" */
.chart-wrap {
    position: relative;
    width: 100%;
    height: 360px;
}
@media (max-width: 768px) {
    .chart-wrap {
        height: 280px;
    }
}

/* Плашки быстрого выбора процента выплаты сотруднику */
.share-preset-btn {
    padding: 0.15rem 0.6rem;
    font-size: 0.8rem;
    border-radius: 999px;
}

/* Таблицы-списки на телефоне и узком экране (< 1200px): каждая строка — карточка, у значения подпись
   из data-label, кнопки действий внизу карточки. На широком экране — обычная таблица. */
@media (max-width: 1199.98px) {
    .table-stack thead {
        display: none;
    }
    .table-stack tbody tr {
        display: block;
        padding: 0.6rem 0.25rem;
        border-bottom: 1px solid var(--bs-border-color);
    }
    .table-stack tbody tr:last-child {
        border-bottom: 0;
    }
    .table-stack tbody td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
        padding: 0.15rem 0.25rem;
        border: 0;
        text-align: right;
    }
    .table-stack tbody td::before {
        content: attr(data-label);
        flex-shrink: 0;
        color: #6b7280;
        font-size: 0.85rem;
        text-align: left;
    }
    /* Пустые поля («—») на телефоне не показываем, чтобы карточка была короче */
    .table-stack tbody td.td-empty {
        display: none;
    }
    /* Первая ячейка — заголовок карточки */
    .table-stack tbody td.td-title {
        font-weight: 600;
        text-align: left;
    }
    .table-stack tbody td.td-actions {
        justify-content: flex-end;
        gap: 0.4rem;
        padding-top: 0.4rem;
    }
    .table-stack tbody td.td-actions::before,
    .table-stack tbody td.td-title::before,
    .table-stack tbody td[colspan]::before {
        content: none;
    }
    .table-stack tbody td[colspan] {
        display: block;
        text-align: center;
    }
    /* Кнопки побольше, чтобы попадать пальцем */
    .table-stack .td-actions .btn {
        padding: 0.3rem 0.9rem;
    }
}

/* То же для компактных таблиц (например, цены услуг): карточками — только на телефоне
   (< 768px). Правила — копия блока выше с другим классом и шириной. */
@media (max-width: 767.98px) {
    .table-stack-md thead {
        display: none;
    }
    .table-stack-md tbody tr {
        display: block;
        padding: 0.6rem 0.25rem;
        border-bottom: 1px solid var(--bs-border-color);
    }
    .table-stack-md tbody tr:last-child {
        border-bottom: 0;
    }
    .table-stack-md tbody td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
        padding: 0.15rem 0.25rem;
        border: 0;
        text-align: right;
    }
    .table-stack-md tbody td::before {
        content: attr(data-label);
        flex-shrink: 0;
        color: #6b7280;
        font-size: 0.85rem;
        text-align: left;
    }
    /* Пустые поля («—») на телефоне не показываем, чтобы карточка была короче */
    .table-stack-md tbody td.td-empty {
        display: none;
    }
    /* Первая ячейка — заголовок карточки */
    .table-stack-md tbody td.td-title {
        font-weight: 600;
        text-align: left;
    }
    .table-stack-md tbody td.td-actions {
        justify-content: flex-end;
        gap: 0.4rem;
        padding-top: 0.4rem;
    }
    .table-stack-md tbody td.td-actions::before,
    .table-stack-md tbody td.td-title::before,
    .table-stack-md tbody td[colspan]::before {
        content: none;
    }
    .table-stack-md tbody td[colspan] {
        display: block;
        text-align: center;
    }
    /* Кнопки побольше, чтобы попадать пальцем */
    .table-stack-md .td-actions .btn {
        padding: 0.3rem 0.9rem;
    }
}

/* Плашки выбора (сотрудники, класс авто, услуги) в форме работы */
.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.chip {
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
}