.permission-error {
    background: var(--color-danger-bg);
    color: var(--color-danger);
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    margin: 0 40px;
}

/* ---------- Логин бэк-офиса: доп. штрих поверх общих .login-* из css/shared.css ---------- */

.login-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-primary);
    background: #eef0fe;
    padding: 4px 11px;
    border-radius: var(--radius-pill);
    margin-bottom: 12px;
}

.admin-layout {
    /* Устарел вместе со старой (без сайдбара) вёрсткой — оставлен only for
       reports.html, который сам скоро станет заглушкой-редиректом. Новая
       раскладка бэк-офиса — ниже, класс .content-scroll. */
    flex: 1;
    overflow-y: auto;
    padding: 0 40px 40px;
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* ==========================================================================
   Шаг 19 — оболочка бэк-офиса: sticky-шапка + сайдбар + один общий скролл
   ========================================================================== */

body.backoffice-body {
    /* Только на страницах бэк-офиса (admin/index.html) — единственный
       скролл на экране должен быть внутри .content-scroll, не на body.
       Страница чата (index.html) этот класс не подключает, её вёрстка не
       затронута. height (не min-height, как в общем style.css) — жёсткий
       потолок: без него body мог бы растянуться выше 100vh под высоким
       содержимым и вызвать скролл окна поверх overflow: hidden. */
    height: 100vh;
    overflow: hidden;
}

.app-header--sticky {
    flex-shrink: 0;
    /* Пункт 4, Шаг 28: было var(--color-surface) (#fff), а у .sidebar —
       var(--color-bg) (#fcfcfd) — на стыке шапки и сайдбара был заметен
       едва уловимый шов. В клиентской части (style.css) ни шапка, ни
       сайдбар вообще не задают свой background — оба просто наследуют фон
       body, поэтому там перехода не видно. Здесь делаем то же самое явно
       (а не убираем совсем, т.к. шапка sticky и должна перекрывать контент
       под собой при скролле) — тот же цвет, что у сайдбара. */
    background: var(--color-bg);
}

.admin-shell {
    display: flex;
    flex: 1;
    min-height: 0;
}

.sidebar {
    width: 236px;
    flex-shrink: 0;
    background: var(--color-bg);
    padding: 18px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
}

.sidebar-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: none;
    background: none;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: var(--color-text-muted);
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background 0.12s ease, color 0.12s ease;
}

.sidebar-nav-item:hover {
    background: #eceefb;
    color: var(--color-text);
}

.sidebar-nav-item.active {
    background: #eef0fe;
    color: var(--accent-primary);
}

.sidebar-nav-item.active::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 18px;
    border-radius: 0 3px 3px 0;
    background: var(--accent-primary);
}

/* Ссылка "К чатам" в шапке бэк-офиса — своя запись, чтобы не трогать общий
   .admin-link из style.css (он может использоваться и на странице чата). */
.back-to-chat-link {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 13px;
    font-family: inherit;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.back-to-chat-link svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.back-to-chat-link:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    transform: translateY(-1px);
}

.sidebar-nav-item svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

/* ---------- Блок пользователя внизу сайдбара ----------
   margin-top: auto на самом футере — сайдбар уже flex-column, поэтому
   поднимает этот блок к самому низу, а пункты меню выше остаются
   упакованы сверху, без нужды в дополнительной обёртке для nav-items.
   Общая раскладка .sidebar-footer/.sidebar-user*/.logout-button (база) —
   в css/shared.css (Шаг 35), идентична клиентскому чату. border-top ниже —
   сознательно другой, чем у клиента (см. docs/CSS_AUDIT_STEP35.md §4). */
.sidebar-footer {
    border-top: 1px solid var(--color-border);
}

.sidebar-footer .logout-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: transform 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.sidebar-footer .logout-button svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.sidebar-footer .logout-button:hover {
    transform: translateY(-1px);
}

.content-scroll {
    flex: 1;
    min-height: 0;
    min-width: 768px;
    overflow-y: auto;
    padding: 26px 30px 26px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.content-section.hidden {
    display: none;
}

/* Недостающее звено flex-цепочки: #admin-content — обычный <div> без
   display:flex, поэтому flex:1/min-height:0 на #section-conversations
   (см. ниже) не имели эффекта — flex-свойства применяются только когда
   элемент сам является flex-item, т.е. когда РОДИТЕЛЬ — flex-контейнер.
   Без этого #section-conversations вёл себя как обычный блок, рос под
   контент, и скроллиться начинал уже .content-scroll целиком, а не
   список чатов внутри. */
#admin-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.content-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.panel-title-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin: 0 0 16px;
}

.panel-title-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    color: var(--accent-primary);
}

.panel-title-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.admin-panel .panel-title-row h2 {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
}

/* ---------- Дашборд ---------- */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
}

.kpi-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -10px rgba(30, 32, 60, 0.18), 0 2px 6px rgba(30, 32, 60, 0.05);
}

.kpi-card-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(91, 110, 245, 0.14), rgba(217, 119, 87, 0.10));
    color: var(--accent-primary);
    flex-shrink: 0;
}

.kpi-card-icon svg {
    width: 17px;
    height: 17px;
}

.kpi-card-value {
    font-size: 23px;
    font-weight: 700;
    line-height: 1.1;
}

.kpi-card-label {
    font-size: 12px;
    color: var(--color-text-muted);
}

/* Шаг 28: bar-графики Chart.js на дашборде (расходы/токены по дням) —
   заменили прежний inline-SVG mini-chart. Canvas требует контейнер с явной
   высотой (Chart.js слушает изменение размера родителя через ResizeObserver,
   иначе схлопывается до 0). */
.dashboard-charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

.chart-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 22px 24px;
}

.chart-card h3 {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--color-text-muted);
    font-weight: 600;
}

.chart-card-canvas-wrap {
    position: relative;
    height: 190px;
    width: 100%;
}

/* Пирог топ-моделей — та же карточка, но чуть выше (нужно место под
   легенду снизу, position: 'bottom' в опциях Chart.js). */
.chart-card-canvas-wrap--pie {
    height: 230px;
}

.dashboard-mini-list {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 18px 20px;
}

.dashboard-mini-list h3 {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--color-text-muted);
    font-weight: 600;
}

.dashboard-mini-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 12.5px;
}

.dashboard-mini-row:last-child {
    border-bottom: none;
}

.dashboard-mini-row-action {
    color: var(--color-text);
    font-weight: 600;
}

.dashboard-mini-row-meta {
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* dashboard-top-columns: слева текстовый топ-список сотрудников (без
   изменений), справа карточка с пирогом моделей — .chart-card уже задаёт
   свой собственный вид, поэтому колонки просто выравниваются в grid. */
.dashboard-top-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

/* ---------- Постраничная выдача (везде, где список) ---------- */

.pager {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.pager-btn {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--color-border);
    border-radius: 7px;
    background: var(--color-surface);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
}

.pager-btn:hover:not(:disabled) {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.pager-btn--active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
}

.pager-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pager-ellipsis {
    padding: 0 4px;
    color: var(--color-text-muted);
    font-size: 12px;
}

.pager-info {
    margin-left: 8px;
    font-size: 12px;
    color: var(--color-text-muted);
}

/* ---------- Настройки организации ---------- */

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.settings-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.settings-field label {
    font-size: 13px;
    font-weight: 600;
}

.settings-field input[type="text"],
.settings-field input[type="number"] {
    padding: 9px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: inherit;
    outline: none;
}

.settings-field input:focus {
    border-color: var(--accent-primary);
}

.settings-field textarea {
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    min-height: 110px;
    resize: vertical;
}

.settings-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.settings-type-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.settings-hint {
    font-size: 12px;
    color: var(--color-text-muted);
    margin: 2px 0 0;
}

.settings-save-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--color-border);
}

.settings-save-button {
    padding: 10px 22px;
    border: none;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-soft));
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 6px 14px -6px rgba(91, 110, 245, 0.5);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.settings-save-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -6px rgba(91, 110, 245, 0.55);
}

.settings-save-button:active {
    transform: translateY(0);
}

.settings-saved-note {
    font-size: 12px;
    color: var(--color-success-admin);
}

.btn-danger {
    border-color: #f3c6c1 !important;
    color: var(--color-danger) !important;
}

.btn-danger:hover {
    border-color: var(--color-danger) !important;
    background: var(--color-danger-bg);
}

.admin-panel {
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 24px;
}

.admin-panel h2 {
    margin: 0 0 16px;
    font-size: 16px;
}

.admin-form {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.admin-form input,
.admin-form select {
    padding: 9px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: inherit;
    outline: none;
}

.admin-form input:focus,
.admin-form select:focus {
    border-color: var(--accent-primary);
}

.admin-form button {
    padding: 9px 16px;
    border: none;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-soft));
    color: white;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 6px 14px -6px rgba(91, 110, 245, 0.5);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.admin-form button:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -6px rgba(91, 110, 245, 0.55);
}

.admin-form button:active {
    transform: translateY(0);
}

.admin-form--user input {
    flex: 1;
    min-width: 160px;
}

/* Пункт 8, Шаг 28: поле пароля + кнопка «Сгенерировать» — обёртка ведёт
   себя как один элемент формы (flex:1, как остальные input), а внутри неё
   уже input (растягивается) + кнопка (по контенту). */
.password-field-group {
    display: flex;
    gap: 6px;
    flex: 1;
    min-width: 220px;
}

.password-field-group input {
    min-width: 0;
}

.password-field-group .btn-secondary {
    flex-shrink: 0;
    padding: 9px 12px;
    font-size: 12px;
}

/* Пункт 6/7/8, Шаг 28: иконка + текст в одной кнопке (создание команды,
   создание сотрудника, «Сгенерировать»). display:flex здесь только у
   этого варианта — обычные .admin-form button текстовые, без этого класса,
   не затрагиваются. */
.btn-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-with-icon svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Пункт 7, Шаг 28 (уточнено по фидбэку): «Добавить модель» И иконка — обе
   части зелёные, не только значок. Составной селектор (.btn-secondary +
   .btn-icon-accent-green) нужен, чтобы гарантированно перебить
   `.btn-secondary { color: var(--color-text) }` независимо от порядка
   правил в файле — специфичность двух классов выше одного. */
.btn-secondary.btn-icon-accent-green {
    color: var(--color-success-admin);
    border-color: #bfe6cf;
}

.btn-secondary.btn-icon-accent-green:hover:not(:disabled) {
    color: #15803d;
    border-color: var(--color-success-admin);
    background: #f0faf4;
}

.btn-icon-accent-green svg {
    color: inherit;
}

.admin-error {
    color: var(--color-danger);
    font-size: 13px;
    margin: -8px 0 12px;
}

/* Шаг 16 — пояснительные подсказки (напр. "редактирование через curl") */
.admin-hint {
    color: var(--color-text-muted);
    font-size: 12px;
    margin: 10px 0 0;
}

.admin-hint code {
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    background: var(--color-surface-hover);
    padding: 1px 5px;
    border-radius: var(--radius-xs);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.admin-table th {
    text-align: left;
    color: var(--color-text-muted);
    font-weight: 600;
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.admin-table td {
    padding: 10px;
    border-bottom: 1px solid var(--color-border);
}

/* Переписки — блок должен занимать всё доступное пространство по высоте
   (без скролла страницы), скроллятся только список чатов и сама переписка.
   Секция целиком растягивается внутри .content-scroll (flex-колонка), а
   .admin-panel/.conversations-browser растягиваются вглубь неё. */
#section-conversations {
    flex: 1;
    min-height: 0;
}

#section-conversations .admin-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#section-conversations .panel-title-row,
#section-conversations .admin-form {
    flex-shrink: 0;
}

.conversations-browser {
    display: flex;
    align-items: stretch;
    gap: 16px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.admin-conversations-list {
    width: 320px;
    height: 100%;
    min-height: 0;
    flex-shrink: 0;
    overflow-y: auto;
    border-right: 1px solid var(--color-border);
    padding-right: 12px;
}

#conv-user-select {
    width: 320px;
}

.admin-conversation-item {
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    margin-bottom: 2px;
}

.admin-conversation-item:hover {
    background: var(--color-surface-hover);
}

.admin-conversation-item.active {
    background: #eef0fe;
    color: var(--accent-primary);
    font-weight: 600;
}

.admin-conversation-messages {
    flex: 1;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-left: 4px;
}

.admin-conversation-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 0 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.admin-conversation-meta.hidden {
    display: none;
}

.admin-conversation-meta-email {
    font-weight: 700;
    font-size: 13.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-conversation-meta-date {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--color-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.admin-conversation-meta-date svg {
    width: 12px;
    height: 12px;
    opacity: 0.7;
}

.admin-conversation-messages-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.admin-message-row {
    margin-bottom: 12px;
    font-size: 13px;
}

/* Пункт 10, Шаг 28: строка роли ("Сотрудник"/"Ассистент") + дата/время
   сообщения справа — раньше дата была только у чата целиком (шапка). */
.admin-message-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 3px;
}

.admin-message-role {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.admin-message-time {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--color-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.admin-message-time svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    opacity: 0.7;
}

.admin-message-content {
    white-space: pre-wrap;
    line-height: 1.4;
}

.admin-message-row--user .admin-message-content {
    background: #eef0fe;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
}

.admin-message-row--assistant .admin-message-content {
    background: var(--color-surface-hover);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
}

.admin-message-row--system_summary .admin-message-content {
    background: #fff8e1;
    color: #8a6d00;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-style: italic;
}

/* Шаг 23.2: history_summary — новая роль, до этого шага реальное сжатие
   истории чата хранилось под тем же role='system_summary', что и заголовок
   чата (см. backend/models.py, backend/chat_logic.py) — обе показывались
   одинаковой жёлтой строкой выше, отличить можно было только по тексту.
   Роли разведены на уровне БД — даём резюме истории СВОЙ цвет (не жёлтый
   заголовка), чтобы админ визуально отличал "это заголовок" от "это
   реально сжатая история" в списке сообщений чата, не читая содержимое.
   font-style: italic сохранён у обеих — это по-прежнему общий сигнал
   "сгенерировано AI, не реплика человека". */
.admin-message-row--history_summary .admin-message-content {
    background: #e6f4f1;
    color: #1f6f5c;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-style: italic;
}

.status-active {
    color: var(--color-success-admin);
    font-weight: 600;
}

.status-inactive {
    color: var(--color-danger);
    font-weight: 600;
}

/* Пункт 9, Шаг 28: приглушённые цвета всей строки неактивного сотрудника —
   текст и кнопки блекнут (opacity), не только колонка «Статус». Сама
   .status-inactive (выше) сохраняет полную яркость — иначе статус вообще
   перестанет читаться на приглушённом фоне. */
.admin-table tr.row-inactive {
    color: var(--color-text-muted);
    opacity: 0.55;
}

.admin-table tr.row-inactive .status-inactive {
    opacity: 1;
}

.admin-table tr.row-inactive:hover {
    opacity: 0.8;
}

/* Пункт 9, Шаг 28: тогл «Неактивные» — фильтр справа в заголовке раздела
   «Сотрудники». Тот же чекбокс-как-тогл паттерн, без сторонних библиотек. */
.inactive-filter-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
    user-select: none;
}

.inactive-filter-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.inactive-filter-toggle-track {
    position: relative;
    width: 34px;
    height: 20px;
    border-radius: var(--radius-pill);
    background: var(--color-border);
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.inactive-filter-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease;
}

.inactive-filter-toggle input:checked+.inactive-filter-toggle-track {
    background: var(--accent-primary);
}

.inactive-filter-toggle input:checked+.inactive-filter-toggle-track::after {
    transform: translateX(14px);
}

.inactive-filter-toggle input:focus-visible+.inactive-filter-toggle-track {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.admin-table button {
    padding: 5px 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.1s ease, border-color 0.1s ease, color 0.1s ease;
}

.admin-table button:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    transform: translateY(-1px);
}

/* Шаг 22 — каталог моделей: детализация + цены */

.panel-title-action {
    margin-left: auto;
}

.admin-table-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.model-alias-hint {
    font-size: 11px;
    color: var(--color-text-muted);
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    margin-top: 2px;
}

.modal-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.modal-checkbox-row--standalone {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}

/* Шаг 14 — аудит-лог */

.audit-json {
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 11px;
    color: var(--color-text-muted);
}

.audit-load-more {
    margin-top: 4px;
    padding: 8px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}

.audit-load-more:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* ==========================================================================
   Шаг 19 — перенесено из reports.css: раздел «Отчётность» теперь живёт
   внутри общей оболочки бэк-офиса (admin/index.html), отдельного reports.css
   больше не подключаем.
   ========================================================================== */

.reports-totals {
    font-size: 14px;
    font-weight: 600;
    margin: 4px 0 16px;
    color: var(--color-text-muted);
}

/* .calendar-nav/.calendar-month-label уже определены в общем style.css
   (там же, где клиентская модалка «Календарь расходов») — переиспользуем
   как есть, здесь только контейнер-тулбар и её собственный отступ снизу. */
.calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.calendar-toolbar .admin-form {
    margin-bottom: 0;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* .calendar-grid — переехал в css/shared.css (Шаг 35), идентичен клиентскому чату. */

.calendar-cell {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-sm);
    padding: 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 11px;
    cursor: default;
    border: 1px solid var(--color-border);
}

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

.calendar-day-num {
    font-weight: 600;
    color: var(--color-text-muted);
}

/* .calendar-day-cost: база (font-weight/font-size/align-self) — в
   css/shared.css. Цвет здесь не задаётся сознательно — наследуется
   (см. docs/CSS_AUDIT_STEP35.md §2), кроме .calendar-heat-4 ниже. */

.calendar-heat-0 {
    background: #f7f8fb;
}

.calendar-heat-1 {
    background: #dde3fb;
}

.calendar-heat-2 {
    background: #b7c2f5;
}

.calendar-heat-3 {
    background: #8a99ea;
}

.calendar-heat-4 {
    background: var(--accent-primary);
    color: white;
}

.calendar-heat-4 .calendar-day-num,
.calendar-heat-4 .calendar-day-cost {
    color: white;
}

.calendar-legend {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    font-size: 11px;
    color: var(--color-text-muted);
}

.calendar-legend-cell {
    width: 16px;
    height: 16px;
    border-radius: var(--radius-xs);
    border: 1px solid var(--color-border);
}

.reports-export-buttons {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

/* Шаг 19: экспорт — акцентная (основная) кнопка CSV, PDF вторична */
.reports-export-buttons .btn-accent {
    padding: 9px 18px;
    border: none;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-soft));
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 6px 14px -6px rgba(91, 110, 245, 0.5);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.reports-export-buttons .btn-accent:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -6px rgba(91, 110, 245, 0.55);
}

.reports-export-buttons button:not(.btn-accent) {
    padding: 9px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.reports-export-buttons button:not(.btn-accent):hover:not(:disabled) {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    transform: translateY(-1px);
}

.reports-export-buttons button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.schedule-inactive-row {
    opacity: 0.55;
}

.btn-accent-outline {
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
    font-weight: 600;
}

.btn-accent-outline:hover:not(:disabled) {
    background: #eef0fe;
}

/* ---------- Правки по итогам ревью (Шаг 19.1) ---------- */

/* Стиль "уведомления" — заменяет обычный .admin-hint там, где текст важнее
   просто мелкой серой подсказки (пояснения к каталогу моделей, плановым
   отчётам, настройкам организации). Всегда с отступом снизу 16px. */
.notice {
    background: #eef0fe;
    border: 1px solid #d8ddfb;
    color: var(--color-text);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 16px;
}

.notice code {
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    background: rgba(255, 255, 255, 0.65);
    padding: 1px 5px;
    border-radius: var(--radius-xs);
}

.notice--muted {
    background: #f7f8fb;
    border-color: var(--color-border);
    color: var(--color-text-muted);
    font-size: 12px;
}

/* Настройки — смысловые блоки вместо одной сплошной формы */
.settings-block {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
}

.settings-block:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.settings-block h3 {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
}

/* ==========================================================================
   Правки по итогам ревью (доп. сессия) — модалки, зебра-таблицы, иконки
   ========================================================================== */

/* ---------- Общая инфраструктура модалок ---------- */

/* .modal-overlay/.modal-box: базовые правила (включая padding:0 — фикс
   Шага 28, теперь единственное определение в css/shared.css, не
   переопределение поверх клиентского). Ниже — только то, что у бэк-офиса
   осознанно отличается от клиента: свой z-index/фон оверлея и своя
   структура/размер бокса (.modal-header/.modal-body/.modal-footer вместо
   padding на самом .modal-box) — см. docs/CSS_AUDIT_STEP35.md §3-4.
   Шаг 39 (третий инцидент с этим же классом — двойной padding вернулся,
   т.к. style.css безусловно задавал padding на .modal-box, а
   admin/index.html продолжает подключать style.css): модалки бэк-офиса
   НЕ получают .modal-box--padded (см. style.css) — они всегда используют
   .modal-header/.modal-body/.modal-footer, никогда не наследуют клиентский
   padding, независимо от того, что ещё загружено на странице. */
.modal-overlay {
    background: rgba(20, 22, 34, 0.45);
    z-index: 100;
}

.modal-box {
    max-width: 460px;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-box--wide {
    max-width: 640px;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.modal-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.modal-close-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    cursor: pointer;
    flex-shrink: 0;
}

.modal-close-btn:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
}

.modal-close-btn svg {
    width: 16px;
    height: 16px;
}

.modal-body {
    padding: 20px 22px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
}

.modal-footer--split {
    justify-content: space-between;
}

.modal-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.modal-field label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.modal-field input[type="text"],
.modal-field input[type="number"],
.modal-field select {
    padding: 9px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    outline: none;
}

.modal-field input[type="text"]:focus,
.modal-field input[type="number"]:focus,
.modal-field select:focus {
    border-color: var(--accent-primary);
}

.modal-field input:disabled {
    background: #f7f8fb;
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.modal-field-readonly {
    padding: 9px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    background: #f7f8fb;
    color: var(--color-text-muted);
}

.modal-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 6px;
    max-height: 220px;
    overflow-y: auto;
}

.modal-checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}

.modal-checkbox-row:hover {
    background: #f7f8fb;
}

.modal-checkbox-row input[type="checkbox"],
.modal-checkbox-row input[type="radio"] {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    accent-color: var(--accent-primary);
    cursor: pointer;
}

.modal-checkbox-row-hint {
    margin-left: auto;
    font-size: 11px;
    color: var(--color-text-muted);
}

.modal-checkbox-empty {
    padding: 10px;
    font-size: 12.5px;
    color: var(--color-text-muted);
}

.modal-note {
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
}

.modal-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.modal-error {
    color: var(--color-danger);
    font-size: 13px;
    margin: 0;
}

/* Кнопки в футере модалок */
.btn-secondary {
    padding: 9px 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.btn-secondary:hover:not(:disabled) {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    transform: translateY(-1px);
}

.btn-secondary:active:not(:disabled) {
    transform: translateY(0);
}

.btn-primary {
    padding: 9px 18px;
    border: none;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-soft));
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 6px 14px -6px rgba(91, 110, 245, 0.5);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -6px rgba(91, 110, 245, 0.55);
}

.btn-primary:active:not(:disabled) {
    transform: translateY(0);
}

.btn-success {
    padding: 9px 18px;
    border: none;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--color-success-admin), #12a86b);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 6px 14px -6px rgba(22, 163, 74, 0.45);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.btn-success:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -6px rgba(22, 163, 74, 0.5);
}

.btn-success:active:not(:disabled) {
    transform: translateY(0);
}

.btn-solid-danger {
    padding: 9px 18px;
    border: none;
    border-radius: var(--radius-sm);
    background: #dc2626;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.12s ease;
}

.btn-solid-danger:hover:not(:disabled) {
    background: var(--color-danger);
    transform: translateY(-1px);
}

.btn-solid-danger:active:not(:disabled) {
    transform: translateY(0);
}

.modal-footer button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ---------- Кастомный confirm (замена нативного alert/confirm) ---------- */

.confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 22, 34, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 24px;
}

.confirm-overlay.hidden {
    display: none;
}

.confirm-box {
    background: var(--color-surface);
    border-radius: 18px;
    box-shadow: var(--shadow-modal);
    border: 1px solid var(--color-border-subtle);
    width: 100%;
    max-width: 360px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.confirm-box-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--color-danger-bg);
    color: #dc2626;
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirm-box-icon svg {
    width: 20px;
    height: 20px;
}

.confirm-box h4 {
    margin: 0;
    font-size: 15px;
}

.confirm-box p {
    margin: 0;
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.confirm-box-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}

/* ---------- Иконка-кнопка в таблицах (Редактировать / Посмотреть) ---------- */

.icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    font-size: 12px;
    font-family: inherit;
    color: var(--color-text);
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.1s ease, border-color 0.1s ease, color 0.1s ease;
}

.icon-btn svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.icon-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    transform: translateY(-1px);
}

.row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* ---------- Зебра-таблицы (Сотрудники, Аудит-лог) ---------- */

.admin-table--zebra tbody tr:nth-child(odd) {
    background: #fafafc;
}

.admin-table tbody tr:hover {
    background: #eef0fe;
}

/* ---------- Роль/статус бейджи (Сотрудники) ---------- */

.role-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
}

.role-badge-icon {
    width: 14px;
    height: 14px;
    color: var(--accent-primary);
    flex-shrink: 0;
}

.email-cell {
    font-weight: 600;
}

/* ---------- Аудит-лог: типографика колонок ---------- */

.audit-cell-time {
    font-size: 11.5px;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.audit-cell-actor {
    font-weight: 700;
}

.audit-cell-action {
    color: var(--color-text-muted);
    font-style: italic;
}

.audit-detail-block {
    margin-bottom: 14px;
}

.audit-detail-block:last-child {
    margin-bottom: 0;
}

.audit-detail-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
    margin: 0 0 6px;
}

.audit-detail-pre {
    margin: 0;
    padding: 12px 14px;
    background: #f7f8fb;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.audit-detail-meta {
    font-size: 12.5px;
    color: var(--color-text-muted);
    margin: 0 0 14px;
}

/* ---------- Переписки: визуальное различение отправителя/даты ---------- */

.admin-conversation-item-title {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-conversation-item-owner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 11px;
    color: var(--color-text-muted);
    font-weight: 500;
}

.admin-conversation-item-owner-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

.admin-conversation-item-owner-date {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    width: 110px;
    justify-content: flex-end;
    white-space: nowrap;
}

.admin-conversation-item-owner-date svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    opacity: 0.7;
}

/* Пункт 10, Шаг 28 (усилено по повторному фидбэку — было 14px 18px,
   визуально не считывалось как "заметно больше"): 16px 18px даёт высоту
   поля ~50px против ~38px у обычного .admin-form select — разница теперь
   однозначно заметна на глаз. ID-селектор гарантированно перебивает
   `.admin-form select` (специфичность 1,0,0 vs 0,1,1) независимо от
   порядка правил в файле, так что это не вопрос каскада — если по-прежнему
   не видно разницы, дело в кэше браузера (см. бамп ?v в index.html). */
#conv-user-select {
    padding: 16px 18px;
    font-size: 14px;
    border-radius: var(--radius-md);
}

/* Пункт 10, Шаг 28 (уточнено по фидбэку): было на всю ширину минус 4px —
   должно быть ~80px и по центру, как .conversation-separator в клиентской
   части (там 56px auto), просто пошире по прямому запросу. margin: 4px auto
   — 4px сверху/снизу (как и просили), auto лево/право для центрирования. */
.admin-conversation-separator {
    width: 80px;
    height: 1px;
    background: var(--color-border);
    margin: 4px auto;
}

/* ---------- Команды: колонка "Действия", ширина полей ---------- */

#team-name-input {
    width: 360px;
    flex: 0 0 auto;
}

/* ---------- Календарь трат: кликабельные дни ---------- */

.calendar-cell--clickable {
    cursor: pointer;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.calendar-cell--clickable:hover {
    box-shadow: 0 0 0 2px var(--accent-primary) inset;
}

.calendar-day-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.calendar-day-detail-stat {
    background: #f7f8fb;
    border-radius: var(--radius-sm);
    padding: 12px 14px;
}

.calendar-day-detail-stat-label {
    display: block;
    font-size: 11px;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

.calendar-day-detail-stat-value {
    display: block;
    font-size: 16px;
    font-weight: 700;
}

.calendar-day-detail-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.calendar-day-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12.5px;
    padding: 6px 0;
    border-bottom: 1px solid var(--color-border);
}

.calendar-day-detail-row:last-child {
    border-bottom: none;
}

.calendar-day-detail-row-name {
    color: var(--color-text);
}

.calendar-day-detail-row-value {
    color: var(--color-text-muted);
    font-weight: 600;
    white-space: nowrap;
}

/* ===========================================================================
   Находка после Шага 25: чипы вложений в разделе «Переписки» — раздел
   появился на Шаге 9.5, до вложений (Шаг 24), и никогда не обновлялся.
   Переменные — те же, что уже используются в остальном admin.css
   (--color-border/--color-surface/--color-text-muted/--accent-primary),
   новых не заводится.
   =========================================================================== */

.admin-message-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.admin-message-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 12px;
    cursor: pointer;
    max-width: 260px;
}

.admin-message-attachment-chip svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.admin-message-attachment-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-message-attachment-chip:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* ==========================================================================
   Шаг 28, пункт 11 — flatpickr (аудит-лог, поля "С какого момента"/"До
   какого момента"): лёгкая тема поверх дефолтных стилей библиотеки, чтобы
   попап календаря не выглядел чужеродно рядом с остальным бэк-офисом.
   Переопределяются только цвета/радиусы через CSS-переменные flatpickr
   сам не предоставляет — приходится точечно бить по его классам.
   ========================================================================== */

.flatpickr-custom-title {
    padding: 8px 10px 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    text-align: center;
}

.flatpickr-calendar {
    border-radius: var(--radius);
    box-shadow: var(--shadow-dropdown);
    font-family: inherit;
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
    display: none;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.flatpickr-day.today {
    border-color: var(--accent-primary);
}

.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
    background: var(--color-surface-hover);
}

#audit-from-input,
#audit-to-input {
    cursor: pointer;
    background: var(--color-surface);
    min-width: 170px;
}