/* ============================================================
   MP-Analytics — slim dark layer ПОВЕРХ Bootstrap 5.3.
   Цель: применить tokens.css к уже существующим селекторам
   (.kpi-card, .sidebar, .badge-mp-*, alerts, tables) без
   переписывания шаблонов. Поэтапно — пока ТОЛЬКО KPI-карточки.
   ============================================================ */

/* Подложка под весь интерфейс — тёмная база из tokens.css.
   Bootstrap 5.3 в data-bs-theme="dark" сам разруливает свои
   переменные, нам нужно лишь подправить общий фон/шрифт. */
html, body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh);
    -webkit-font-smoothing: antialiased;
}

/* ====== KPI-карточки на дашборде ======================== */
.kpi-card {
    /* tokens.css определяет .card — используем те же приёмы. */
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    transition:
        transform var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease),
        border-color var(--dur) var(--ease);
}
.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--secondary);
}
.kpi-card .l {
    color: var(--text-muted);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    letter-spacing: 0.01em;
    text-transform: none;
}
.kpi-card .v {
    color: var(--text);
    font-size: var(--fs-display);
    font-weight: var(--fw-bold);
    letter-spacing: -0.02em;
    margin-top: var(--space-2);
    line-height: 1.1;
}

/* Первую (главную) KPI-карточку — выручка месяц — выделим
   акцентом, как в подсказке tokens.css (.card--accent). */
.row.g-3 > .col-md-3:nth-child(3) .kpi-card {
    background:
        radial-gradient(120% 120% at 0% 0%,
                        rgba(123, 47, 190, 0.18),
                        transparent 60%),
        var(--surface);
    box-shadow: var(--shadow-glow);
    border-color: rgba(77, 91, 255, 0.35);
}

/* ====== Sidebar ====================================================== */
.sidebar {
    background: var(--surface);
    border-right: 1px solid var(--border);
    min-height: 100vh;
    padding-top: var(--space-2);
}

/* Шапка с логотипом и юзером */
.sidebar > div:first-child {
    padding: var(--space-5) var(--space-5) var(--space-4) !important;
    border-bottom: 1px solid var(--border) !important;
}
.sidebar > div:first-child strong {
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    letter-spacing: -0.01em;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.sidebar > div:first-child small {
    color: var(--text-muted) !important;
    font-size: var(--fs-small);
}

/* Ссылки навигации */
.sidebar a {
    display: block;
    padding: var(--space-2) var(--space-5);
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--fs-body);
    position: relative;
    transition: color var(--dur-fast) var(--ease),
                background var(--dur-fast) var(--ease);
}
.sidebar a:hover {
    background: var(--surface-2);
    color: var(--text);
}

/* Активный пункт меню — акцентная полоса слева (градиент) */
.sidebar a.active {
    color: var(--text);
    background: var(--surface-2);
    font-weight: var(--fw-medium);
}
.sidebar a.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: var(--accent-gradient);
    border-radius: var(--radius-pill);
}

/* Заголовки разделов */
.sidebar h6 {
    font-size: 11px;
    text-transform: uppercase;
    margin: var(--space-5) var(--space-5) var(--space-2);
    letter-spacing: 0.08em;
    font-weight: var(--fw-semibold);
    color: var(--text-faint);
}
/* Бренд-цвета задаются явными классами (не позиционно), чтобы добавление
   новых разделов в сайдбар не съезжало раскраску. */
.sidebar h6.sb-mp-wb { color: var(--wb-violet); }
.sidebar h6.sb-mp-ozon { color: var(--ozon-blue); }

/* Дерево «кабинет → разделы». <details> = нативное раскрытие без JS. */
.sidebar details.sb-cabinet {
    margin: 0 var(--space-3);
}
.sidebar details.sb-cabinet > summary {
    list-style: none;
    cursor: pointer;
    padding: var(--space-2) var(--space-3);
    color: var(--text);
    font-weight: var(--fw-semibold);
    font-size: 13px;
    border-radius: var(--radius-sm);
    user-select: none;
}
.sidebar details.sb-cabinet > summary::-webkit-details-marker { display: none; }
.sidebar details.sb-cabinet > summary::marker { content: ""; }
/* Chevron: CSS-стрелка из двух border'ов — гармонирует с темой. */
.sidebar details.sb-cabinet > summary::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 10px;
    margin-left: 2px;
    border-right: 2px solid var(--text-faint);
    border-bottom: 2px solid var(--text-faint);
    transform: rotate(-45deg);
    transition: transform 0.18s ease;
    vertical-align: 2px;
}
.sidebar details.sb-cabinet[open] > summary::before {
    transform: rotate(45deg);
    vertical-align: -1px;
    border-color: var(--text-muted);
}
.sidebar details.sb-cabinet > summary:hover::before {
    border-color: var(--text);
}
.sidebar details.sb-cabinet > summary:hover {
    background: var(--surface-2);
}
.sidebar a.sb-section {
    padding-left: calc(var(--space-5) + 1em);
    font-size: 13px;
}

/* ====== Columns picker (⚙ в data-таблице) ============================ */
/* CSS-флаг для non-default колонок: применяется СЕРВЕРОМ, чтобы они не
   моргали видимыми до выполнения JS. JS его снимает. */
.col-hidden-default { display: none !important; }
.col-hidden { display: none !important; }
.cols-picker {
    max-height: 60vh;
    overflow-y: auto;
    min-width: 240px;
}
.cols-picker label.dropdown-item {
    cursor: pointer;
    padding: 4px 8px;
}
.cols-picker label.dropdown-item:hover {
    background: var(--surface-2);
}

/* Кнопка «Выйти» внизу */
.sidebar form {
    padding: var(--space-5) !important;
}
.sidebar form .btn {
    border-color: var(--border);
    color: var(--text-muted);
}
.sidebar form .btn:hover {
    border-color: var(--secondary);
    color: var(--text);
    background: var(--surface-2);
}

/* ====== Tables ======================================================= */

/* Карточка-обёртка таблицы (используется на дашборде, отчётах) */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.card h6 {
    font-size: var(--fs-h2);
    font-weight: var(--fw-semibold);
    color: var(--text);
    margin-bottom: var(--space-4);
}

/* Базовые таблицы Bootstrap — спокойнее, без жёсткого striped */
.table {
    color: var(--text);
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border);
}
.table > thead {
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    text-transform: none;
    letter-spacing: 0.01em;
}
.table > thead th {
    background: transparent !important;
    color: var(--text) !important;
    border-bottom: 1px solid var(--border);
    font-weight: var(--fw-semibold);
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}
/* Ссылки сортировки в заголовках data-views — наследуют яркий цвет */
.table > thead th a {
    color: var(--text) !important;
    text-decoration: none;
}
.table > thead th a:hover {
    color: var(--primary) !important;
}
.table > tbody tr {
    transition: background var(--dur-fast) var(--ease);
}
.table > tbody tr:hover {
    background: var(--surface-2);
}
.table > tbody td {
    border-color: var(--border);
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
    vertical-align: middle;
}

/* Strip-классы Bootstrap слишком ярко чередуют на тёмном — приглушим */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: rgba(255, 255, 255, 0.015);
}

/* Sticky-заголовок в data-views — обязательно контрастный текст,
   потому что sticky-фон --surface-2 близок к фону страницы. */
table.data-table {
    font-size: var(--fs-small);
}
table.data-table > thead th,
table.data-table th {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    position: sticky;
    top: 0;
    z-index: 1;
    font-weight: var(--fw-semibold);
}
table.data-table > thead th a {
    color: var(--text) !important;
    font-weight: var(--fw-semibold);
}

/* Numeric cells (выручка/количество) — табличные цифры */
.text-end {
    font-variant-numeric: tabular-nums;
}

/* ====== Бейджи ======================================================= */

/* Мягкие статусные бейджи (вместо плотных Bootstrap-цветов) */
.badge.bg-success {
    background: rgba(34, 197, 94, 0.15) !important;
    color: var(--success) !important;
}
.badge.bg-danger {
    background: rgba(239, 68, 68, 0.15) !important;
    color: var(--danger) !important;
}
.badge.bg-warning,
.badge.bg-warning.text-dark {
    background: rgba(245, 158, 11, 0.15) !important;
    color: var(--warning) !important;
}
.badge.bg-secondary {
    background: rgba(156, 163, 175, 0.15) !important;
    color: var(--text-muted) !important;
}
.badge.bg-primary {
    background: rgba(0, 91, 255, 0.18) !important;
    color: var(--primary) !important;
}
.badge {
    font-weight: var(--fw-semibold);
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    font-size: var(--fs-small);
    letter-spacing: 0.01em;
}
/* Маркетплейс-бейджи остаются плотными (узнаваемые бренд-цвета) */
.badge-mp-wb,
.badge-mp-ozon {
    color: #fff !important;
    padding: 2px var(--space-2);
}
.badge-mp-wb { background: var(--wb-violet) !important; }
.badge-mp-ozon { background: var(--ozon-blue) !important; }

/* ====== Headings ===================================================== */
h1, h2, h3, h4, h5, h6 {
    color: var(--text);
    letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-display); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-h1); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-h1); font-weight: var(--fw-bold); }
h4 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); }
.text-muted { color: var(--text-muted) !important; }

/* ====== Forms (input / select) ======================================= */
.form-control,
.form-select {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-sm);
    transition: border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}
.form-control:focus,
.form-select:focus {
    background: var(--surface-2);
    border-color: var(--secondary);
    color: var(--text);
    box-shadow: 0 0 0 3px rgba(123, 47, 190, 0.18);
}
.form-control::placeholder { color: var(--text-faint); }
.form-label { color: var(--text-muted); font-size: var(--fs-small); }
.form-text { color: var(--text-faint); }
.form-select option {
    background: var(--surface);
    color: var(--text);
}

/* Поле в составе формы login — крупнее */
.card .form-control, .card .form-select { padding: var(--space-3); }

/* ====== Buttons ====================================================== */
.btn {
    border-radius: var(--radius-sm);
    font-weight: var(--fw-semibold);
    transition: filter var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease),
                background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
}
.btn-primary {
    background: var(--accent-gradient);
    border: none;
    color: #fff;
}
.btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    color: #fff;
}
.btn-primary:active,
.btn-primary:focus {
    filter: brightness(0.95);
    box-shadow: 0 0 0 3px rgba(77, 91, 255, 0.25);
}
.btn-outline-primary {
    border-color: var(--primary);
    color: var(--primary);
    background: transparent;
}
.btn-outline-primary:hover {
    background: rgba(0, 91, 255, 0.12);
    color: var(--primary);
    border-color: var(--primary);
}
.btn-outline-secondary {
    border-color: var(--border);
    color: var(--text-muted);
    background: transparent;
}
.btn-outline-secondary:hover {
    border-color: var(--secondary);
    color: var(--text);
    background: var(--surface-2);
}
.btn-link {
    color: var(--primary);
    text-decoration: none;
}
.btn-link:hover { color: var(--secondary); text-decoration: underline; }
.btn-sm { font-size: var(--fs-small); padding: var(--space-2) var(--space-3); }

/* ====== Alerts (мягкие) ============================================== */
.alert {
    border: 1px solid;
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
}
.alert-danger {
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.08);
    color: var(--text);
}
.alert-warning {
    border-color: rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.08);
    color: var(--text);
}
.alert-success {
    border-color: rgba(34, 197, 94, 0.35);
    background: rgba(34, 197, 94, 0.08);
    color: var(--text);
}
.alert-info {
    border-color: rgba(0, 91, 255, 0.35);
    background: rgba(0, 91, 255, 0.08);
    color: var(--text);
}
.alert strong { color: var(--text); }
.alert code { color: var(--text); background: var(--surface-2);
              padding: 1px 4px; border-radius: 4px; }

/* ====== Pagination =================================================== */
.pagination .page-link {
    background: transparent;
    border-color: var(--border);
    color: var(--text-muted);
}
.pagination .page-link:hover {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border);
}
.pagination .page-item.active .page-link {
    background: var(--accent-gradient);
    border-color: transparent;
    color: #fff;
}

/* ====== Modal (детали записи) ======================================== */
.modal-content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.modal-header {
    border-bottom: 1px solid var(--border);
}
.modal-title { color: var(--text); font-weight: var(--fw-semibold); }
.modal code {
    color: var(--text);
    background: var(--surface-2);
    padding: 1px 4px;
    border-radius: 4px;
}

/* ====== Code-inline в плашках ======================================== */
code {
    color: var(--primary);
    background: rgba(0, 91, 255, 0.08);
    padding: 0 4px;
    border-radius: 4px;
    font-size: 0.9em;
}