/*
 * Освежение темы Argon Dashboard 1 (Bootstrap 4).
 *
 * Файл подключается ПОСЛЕ argon.min.css, поэтому работает как слой переопределений.
 * Разметку не трогаем: обновляются только токены оформления — скругления, тени,
 * типографика, плотность таблиц.
 *
 * Написано на нативных CSS-переменных без SCSS-синтаксиса намеренно: node_modules
 * в проекте нет, а laravel-mix 5 на Node 20 не собирается. Благодаря этому исходник
 * и public/css/app.css совпадают дословно, и будущий `npm run prod` даст тот же результат.
 */

:root {
    /* Скругления: в Argon 1 они мелкие (.375rem) и выдают возраст темы */
    --ui-radius-sm: 8px;
    --ui-radius: 12px;
    --ui-radius-lg: 16px;

    /* Тени: вместо одного тяжёлого размытия — два слоя, ближний и рассеянный */
    --ui-shadow-xs: 0 1px 2px rgba(18, 38, 63, .06);
    --ui-shadow-sm: 0 1px 2px rgba(18, 38, 63, .04), 0 2px 8px rgba(18, 38, 63, .06);
    --ui-shadow: 0 1px 3px rgba(18, 38, 63, .05), 0 8px 24px rgba(18, 38, 63, .08);
    --ui-shadow-lg: 0 2px 6px rgba(18, 38, 63, .06), 0 16px 40px rgba(18, 38, 63, .10);

    --ui-border: #e9ecf2;
    --ui-border-strong: #dbe0ea;
    --ui-muted: #8898aa;
    --ui-text: #3c4858;
    --ui-surface: #ffffff;
    --ui-canvas: #f6f7fb;
}

/* ── Основа ─────────────────────────────────────────────────────────────── */

body {
    background-color: var(--ui-canvas);
    color: var(--ui-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Карточки ───────────────────────────────────────────────────────────── */

.card {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-sm);
}

.card.shadow,
.card-profile.shadow {
    box-shadow: var(--ui-shadow) !important;
}

.card-header {
    background-color: transparent;
    border-bottom-color: var(--ui-border);
}

.card-stats .card-title {
    min-height: 40px;
}

/* ── Кнопки ─────────────────────────────────────────────────────────────── */

.btn {
    border-radius: var(--ui-radius-sm);
    font-weight: 600;
    letter-spacing: .01em;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

.btn:not(:disabled):not(.disabled):active {
    transform: translateY(1px);
}

/* Argon поднимает кнопку при наведении — на плотных панелях это дёргает вёрстку */
.btn:hover {
    transform: none;
    box-shadow: var(--ui-shadow-xs);
}

.btn-sm {
    padding: .4rem .8rem;
    font-size: .8125rem;
}

.btn:focus,
.btn.focus {
    box-shadow: 0 0 0 3px rgba(94, 114, 228, .18);
}

/* ── Поля ввода ─────────────────────────────────────────────────────────── */

.form-control,
.custom-select {
    border-radius: var(--ui-radius-sm);
    border-color: var(--ui-border-strong);
    color: var(--ui-text);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:focus,
.custom-select:focus {
    border-color: #8f9df0;
    box-shadow: 0 0 0 3px rgba(94, 114, 228, .15);
}

.form-control::placeholder {
    color: #aab4c4;
}

.form-control-sm {
    font-size: .8125rem;
}

/* ── Таблицы ────────────────────────────────────────────────────────────── */

.table thead th {
    padding: .75rem 1.5rem;
    background-color: #fafbfd;
    border-top: 0;
    border-bottom: 1px solid var(--ui-border);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--ui-muted);
}

.table td {
    padding: .8rem 1.5rem;
    border-top-color: #f2f4f8;
    vertical-align: middle;
}

/* Моноширинные цифры: в статистике колонки чисел должны выстраиваться
   разряд под разрядом, иначе сравнивать значения глазами тяжело */
.table td,
.table tfoot td,
.table tr.font-weight-bold td {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

.table-hover tbody tr:hover {
    background-color: #f8f9fc;
}

/* Итоговая строка должна читаться как итог, а не как ещё одна строка данных */
.table tr.font-weight-bold td {
    background-color: #fafbfd;
    border-top: 2px solid var(--ui-border-strong);
}

.table .sorted {
    cursor: pointer;
    user-select: none;
}

.table .sorted:hover {
    color: var(--ui-text);
}

/* ── Шапка страницы ─────────────────────────────────────────────────────── */

/* Фотоподложка с градиентной маской — самая заметная примета темы 2018 года.
   Заменяем на ровный градиент. !important нужен: картинка задана инлайн-стилем. */
.header {
    background-image: none !important;
    background-color: #4c5ec9;
}

.header .mask.bg-gradient-default {
    background: linear-gradient(87deg, #3f51b5 0%, #5e72e4 60%, #7b8cff 100%) !important;
    opacity: 1 !important;
}

.header .display-2 {
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

/* ── Навигация ──────────────────────────────────────────────────────────── */

.navbar-vertical.navbar-light {
    border-right: 1px solid var(--ui-border);
    box-shadow: none;
}

.navbar-vertical .navbar-nav .nav-link {
    border-radius: var(--ui-radius-sm);
    margin: .1rem .5rem;
    padding-top: .55rem;
    padding-bottom: .55rem;
    font-size: .875rem;
}

.navbar-vertical .navbar-nav .nav-link:hover {
    background-color: #f2f4fa;
}

.navbar-vertical .navbar-nav .nav-link.active {
    background-color: #edf0fe;
    color: #4c5ec9;
}

/* ── Мелочи ─────────────────────────────────────────────────────────────── */

.dropdown-menu {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-lg);
}

.badge {
    border-radius: 6px;
    font-weight: 600;
    letter-spacing: .02em;
}

.alert {
    border-radius: var(--ui-radius-sm);
}

.modal-content {
    border: 0;
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-lg);
}

.page-item .page-link,
.page-item span {
    border-radius: var(--ui-radius-sm) !important;
    margin: 0 2px;
    border-color: var(--ui-border-strong);
}

.custom-control-label::before {
    border-radius: 5px !important;
    border-color: var(--ui-border-strong);
}

.footer {
    background: transparent;
}