/*
 * Дизайн-система ApiSeller/KeepUP.Ecom — редизайн 2026-09-01
 * Стиль: чистый минималистичный SaaS (в духе Stripe/Linear).
 * Полная свобода от прежней фирменной палитры (по согласованию с пользователем) -
 * один спокойный нейтральный фон + один акцентный цвет, без пестроты.
 *
 * НЕЙМСПЕЙС: все классы этой системы начинаются с "ui-" НАМЕРЕННО - в проекте
 * уже есть свои .btn/.card/.modal-overlay/.modal-title и т.п. в main_new.css
 * и в отдельных css-файлах модулей (например, background_tasks.css сам
 * определяет .btn/.btn-primary/.btn-danger по-своему), с другой механикой
 * (main_new.css модалки живут постоянно в DOM и переключаются классом .active
 * с fade-переходом, а не создаются/удаляются как модалки в модулях). Чтобы не
 * столкнуться с ними и ничего не сломать, здесь всё через префикс "ui-",
 * который в проекте раньше не использовался (проверено).
 *
 * ВАЖНО (себе на будущее): НЕ писать в этом комментарии подряд символы
 * "звёздочка-слэш" или "слэш-звёздочка" (как в шаблонах путей вида css-файл,
 * звёздочка-точка-css) - это преждевременно закрывает блок комментария и
 * ломает парсинг всего, что идёт дальше, включая :root ниже. Именно из-за
 * этого один раз уже пришлось чинить всю дизайн-систему - переменные
 * --ui-* переставали резолвиться, и все компоненты выглядели совсем
 * неоформленными (то самое "всё белое").
 *
 * Как использовать: подключить этот файл ПОСЛЕ tailwind.css/tailwind.js.
 * Классы Tailwind (flex, grid, отступы и т.п.) по-прежнему можно использовать
 * для раскладки - но всё, что отвечает за "лицо" интерфейса (кнопки, карточки,
 * бейджи, модалки, поля ввода, таблицы, навигация), должно идти через классы
 * из этого файла, а не через россыпь разрозненных утилитных классов, как
 * было раньше в каждом модуле по-своему.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Нейтральная шкала (slate) - фон, текст, границы */
    --ui-gray-50: #f8fafc;
    --ui-gray-100: #f1f5f9;
    --ui-gray-200: #e2e8f0;
    --ui-gray-300: #cbd5e1;
    --ui-gray-400: #94a3b8;
    --ui-gray-500: #64748b;
    --ui-gray-600: #475569;
    --ui-gray-700: #334155;
    --ui-gray-800: #1e293b;
    --ui-gray-900: #0f172a;

    /* Единственный акцентный цвет - для всех "главных" действий и активных
       состояний. Раньше эту роль в разных модулях играли то синий, то
       зелёный, то фиолетовый - теперь только один цвет отвечает за "основное
       действие/активно сейчас". */
    --ui-accent-50: #eef2ff;
    --ui-accent-100: #e0e7ff;
    --ui-accent-500: #6366f1;
    --ui-accent-600: #4f46e5;
    --ui-accent-700: #4338ca;

    /* Семантические цвета - ТОЛЬКО для статусов/уведомлений, не для обычных
       кнопок действия (см. правило выше) */
    --ui-success-50: #f0fdf4;
    --ui-success-100: #dcfce7;
    --ui-success-500: #22c55e;
    --ui-success-600: #16a34a;
    --ui-success-700: #15803d;
    --ui-danger-50: #fef2f2;
    --ui-danger-100: #fee2e2;
    --ui-danger-500: #ef4444;
    --ui-danger-600: #dc2626;
    --ui-danger-700: #b91c1c;
    --ui-warning-50: #fffbeb;
    --ui-warning-100: #fef3c7;
    --ui-warning-600: #d97706;
    --ui-warning-700: #b45309;

    --ui-bg: #f8fafc;
    --ui-surface: #ffffff;
    --ui-border: #e2e8f0;

    /* Шкала отступов - единая, чтобы не плодить произвольные px-3 py-1.5 /
       px-6 py-4 / px-2 py-0.5 и т.п. как было раньше */
    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-5: 20px;
    --ui-space-6: 24px;
    --ui-space-7: 28px;
    --ui-space-8: 32px;

    /* Единая шкала скруглений вместо разнобоя rounded/rounded-md/rounded-lg */
    --ui-radius-sm: 6px;
    --ui-radius-md: 10px;
    --ui-radius-lg: 14px;
    --ui-radius-full: 999px;

    --ui-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --ui-shadow-md: 0 4px 16px rgba(15, 23, 42, .08);
    --ui-shadow-lg: 0 16px 40px rgba(15, 23, 42, .14);

    --ui-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html, body {
    font-family: var(--ui-font);
    background: var(--ui-bg);
    color: var(--ui-gray-800);
}

h1, h2, h3, h4, h5, h6 { color: var(--ui-gray-900); font-weight: 600; letter-spacing: -0.01em; }

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

.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--ui-font);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    padding: 10px 16px;
    border-radius: var(--ui-radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.ui-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ui-accent-100); }
.ui-btn:disabled, .ui-btn.is-loading { opacity: .6; cursor: not-allowed; }

.ui-btn-sm { padding: 6px 12px; font-size: 13px; border-radius: var(--ui-radius-sm); gap: 4px; }
.ui-btn-lg { padding: 12px 20px; font-size: 15px; }

.ui-btn-primary { background: var(--ui-accent-600); color: #fff; }
.ui-btn-primary:hover:not(:disabled) { background: var(--ui-accent-700); }

.ui-btn-secondary { background: #fff; color: var(--ui-gray-700); border-color: var(--ui-border); }
.ui-btn-secondary:hover:not(:disabled) { background: var(--ui-gray-50); border-color: var(--ui-gray-300); }

.ui-btn-danger { background: var(--ui-danger-600); color: #fff; }
.ui-btn-danger:hover:not(:disabled) { background: var(--ui-danger-700); }

.ui-btn-ghost { background: transparent; color: var(--ui-gray-600); border-color: transparent; }
.ui-btn-ghost:hover:not(:disabled) { background: var(--ui-gray-100); color: var(--ui-gray-900); }

.ui-btn-icon { padding: 8px; border-radius: var(--ui-radius-sm); }

/* ------------------------------------------------------------------ */
/* Спиннер / индикация загрузки - единый на всё приложение             */
/* ------------------------------------------------------------------ */

.ui-spinner {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    display: inline-block;
    animation: ui-spin .6s linear infinite;
    flex-shrink: 0;
}
.ui-spinner-dark { border-color: rgba(15, 23, 42, .15); border-top-color: var(--ui-gray-600); }
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ */
/* Карточки / панели                                                   */
/* ------------------------------------------------------------------ */

.ui-card {
    position: relative;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-sm);
}
.ui-card-pad { padding: var(--ui-space-7); }
.ui-card-header { padding: var(--ui-space-5) var(--ui-space-7); border-bottom: 1px solid var(--ui-border); }

/* Маленький тег-пилюля в углу карточки, по образцу "Демо-данные" у
   референсных дашбордов маркетплейс-аналитики - для служебных пометок,
   не для статусов данных (для статусов - .ui-badge) */
.ui-tag-corner {
    position: absolute; top: var(--ui-space-4); right: var(--ui-space-5);
    font-size: 11px; font-weight: 500; font-style: italic;
    color: var(--ui-accent-500);
}

/* ------------------------------------------------------------------ */
/* Бейджи статусов                                                     */
/* ------------------------------------------------------------------ */

.ui-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    padding: 2px 10px;
    border-radius: var(--ui-radius-full);
    border: 1px solid transparent;
    white-space: nowrap;
}
/* Бейджи для КОРОТКИХ статус-меток (badge = "Ошибка", "3 заказа", не абзац
   текста) - для длинных сообщений (например, текст ошибки API) badge не
   подходит по смыслу, см. .ui-alert ниже. */
.ui-badge-success { background: var(--ui-success-50); color: var(--ui-success-700); border-color: var(--ui-success-100); }
.ui-badge-danger { background: var(--ui-danger-50); color: var(--ui-danger-700); border-color: var(--ui-danger-100); }
.ui-badge-warning { background: var(--ui-warning-50); color: var(--ui-warning-700); border-color: var(--ui-warning-100); }
.ui-badge-neutral { background: var(--ui-gray-100); color: var(--ui-gray-600); }
.ui-badge-accent { background: var(--ui-accent-50); color: var(--ui-accent-700); border-color: var(--ui-accent-100); }

/* ------------------------------------------------------------------ */
/* Алерты - для развёрнутого текста (ошибки API, предупреждения),      */
/* в отличие от .ui-badge (короткая метка) тут можно переносить строки  */
/* ------------------------------------------------------------------ */

.ui-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    line-height: 1.5;
    padding: 8px 12px;
    border-radius: var(--ui-radius-sm);
    border: 1px solid transparent;
    white-space: normal;
    word-break: break-word;
}
.ui-alert-danger { background: var(--ui-danger-50); color: var(--ui-danger-700); border-color: var(--ui-danger-100); }
.ui-alert-warning { background: var(--ui-warning-50); color: var(--ui-warning-700); border-color: var(--ui-warning-100); }
.ui-alert-neutral { background: var(--ui-gray-50); color: var(--ui-gray-600); border-color: var(--ui-border); }

/* ------------------------------------------------------------------ */
/* Пустое состояние графика (нет данных за период) - вместо голой сетки */
/* ------------------------------------------------------------------ */

.ui-chart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 180px;
    color: var(--ui-gray-400);
    font-size: 13px;
}
.ui-chart-empty svg, .ui-chart-empty i { width: 22px; height: 22px; color: var(--ui-gray-300); }

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

.ui-input, select.ui-input, textarea.ui-input {
    width: 100%;
    font-family: var(--ui-font);
    padding: 9px 12px;
    font-size: 14px;
    color: var(--ui-gray-800);
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ui-input:focus, select.ui-input:focus, textarea.ui-input:focus {
    outline: none;
    border-color: var(--ui-accent-500);
    box-shadow: 0 0 0 3px var(--ui-accent-100);
}
.ui-input::placeholder { color: var(--ui-gray-400); }
.ui-label { display: block; font-size: 13px; font-weight: 500; color: var(--ui-gray-700); margin-bottom: 6px; }

/* ------------------------------------------------------------------ */
/* Модалки (для модулей, которые создают/удаляют модалку через JS -    */
/* НЕ трогает main_new.css .modal-overlay/.modal-title - те работают   */
/* по-другому, через постоянный элемент в DOM + класс .active)         */
/* ------------------------------------------------------------------ */

.ui-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    padding: var(--ui-space-4);
}
.ui-modal-panel {
    background: #fff;
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-lg);
    width: 100%;
    max-width: 480px;
    max-height: 85vh;
    overflow-y: auto;
    padding: var(--ui-space-6);
}
.ui-modal-title { font-size: 17px; font-weight: 600; color: var(--ui-gray-900); margin-bottom: var(--ui-space-1); }
.ui-modal-subtitle { font-size: 13px; color: var(--ui-gray-500); margin-bottom: var(--ui-space-4); }
.ui-modal-actions { display: flex; justify-content: flex-end; gap: var(--ui-space-2); margin-top: var(--ui-space-6); }

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

.ui-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ui-table th {
    text-align: left;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--ui-gray-500);
    padding: 10px 12px;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-gray-50);
}
.ui-table td { padding: 12px; border-bottom: 1px solid var(--ui-border); color: var(--ui-gray-700); }
.ui-table tbody tr:hover td { background: var(--ui-gray-50); }
.ui-table tbody tr:last-child td { border-bottom: none; }

/* ------------------------------------------------------------------ */
/* KPI-карточки для аналитики/дашбордов - более плотный, "не белый"    */
/* вид по референсу пользователя (аналитика WB/Ozon-сервисов): цветные */
/* по смыслу подложки-тинты, крупное число + бейдж динамики, столбик   */
/* подстрок с доп. метриками. Не заменяет .ui-card - это отдельный,    */
/* более "плотный" вариант специально для стат-плиток дашбордов.       */
/* ------------------------------------------------------------------ */

.ui-kpi-card {
    position: relative;
    border-radius: var(--ui-radius-lg);
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    padding: var(--ui-space-5) var(--ui-space-6);
}
.ui-kpi-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--ui-space-3); gap: 8px; }
.ui-kpi-label { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; color: var(--ui-gray-600); }
.ui-kpi-icon {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.ui-kpi-icon svg, .ui-kpi-icon i { width: 15px; height: 15px; }
.ui-kpi-help { color: var(--ui-gray-300); flex-shrink: 0; }
.ui-kpi-help svg, .ui-kpi-help i { width: 14px; height: 14px; }

.ui-kpi-main { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ui-kpi-value { font-size: 28px; font-weight: 700; color: var(--ui-gray-900); letter-spacing: -0.02em; line-height: 1.15; }
.ui-kpi-sub { font-size: 12.5px; color: var(--ui-gray-500); margin-top: 4px; }

.ui-kpi-rows { margin-top: var(--ui-space-4); padding-top: var(--ui-space-3); border-top: 1px solid rgba(15, 23, 42, .06); display: flex; flex-direction: column; gap: 7px; }
.ui-kpi-row { display: flex; align-items: baseline; justify-content: space-between; font-size: 12.5px; gap: 8px; }
.ui-kpi-row-label { color: var(--ui-gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-kpi-row-value { color: var(--ui-gray-800); font-weight: 600; white-space: nowrap; }

/* Тинты - по смыслу группы метрики (нейтрально/расходы/выручка/прибыль),
   НЕ вместо акцентного цвета кнопок - тут отдельная, более широкая
   палитра специально для группировки данных на дашборде */
.ui-kpi-tint-blue { background: #eff6ff; border-color: #dbeafe; }
.ui-kpi-tint-purple { background: #f5f3ff; border-color: #ede9fe; }
.ui-kpi-tint-amber { background: var(--ui-warning-50); border-color: var(--ui-warning-100); }
.ui-kpi-tint-green { background: var(--ui-success-50); border-color: var(--ui-success-100); }

.ui-kpi-icon-blue { background: #dbeafe; color: #2563eb; }
.ui-kpi-icon-purple { background: #ede9fe; color: #7c3aed; }
.ui-kpi-icon-amber { background: var(--ui-warning-100); color: var(--ui-warning-700); }
.ui-kpi-icon-green { background: var(--ui-success-100); color: var(--ui-success-700); }
.ui-kpi-icon-neutral { background: var(--ui-gray-100); color: var(--ui-gray-600); }
.ui-kpi-icon-accent { background: var(--ui-accent-100); color: var(--ui-accent-700); }

/* Бейдж динамики (дельта к предыдущему периоду) - цвет по смыслу
   "хорошо/плохо" для конкретной метрики, а не по знаку числа напрямую
   (например, снижение расходов - зелёное, снижение выручки - красное) */
.ui-delta {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 12px; font-weight: 700;
    padding: 1px 8px; border-radius: var(--ui-radius-full);
    white-space: nowrap;
}
.ui-delta svg, .ui-delta i { width: 11px; height: 11px; }
.ui-delta-good { background: var(--ui-success-50); color: var(--ui-success-700); }
.ui-delta-bad { background: var(--ui-danger-50); color: var(--ui-danger-700); }
.ui-delta-neutral { background: var(--ui-gray-100); color: var(--ui-gray-500); }

/* ------------------------------------------------------------------ */
/* Навигация / сайдбар                                                  */
/* ------------------------------------------------------------------ */

.ui-sidebar { background: #fff; border-right: 1px solid var(--ui-border); }
.ui-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9.5px 12px;
    margin: 0 8px;
    border-radius: var(--ui-radius-sm);
    color: var(--ui-gray-600);
    font-size: 14px;
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease;
    cursor: pointer;
}
.ui-nav-item:hover { background: var(--ui-gray-100); color: var(--ui-gray-900); }
.ui-nav-item.active {
    background: var(--ui-accent-600);
    color: #fff;
    font-weight: 600;
}
.ui-nav-item.active:hover { background: var(--ui-accent-700); color: #fff; }
.ui-nav-item svg, .ui-nav-item i { width: 17px; height: 17px; flex-shrink: 0; }

/* Мелкая цветная точка-уведомление у пункта меню (как непрочитанные/
   новые фичи в референсных сервисах) - добавляется отдельным <span>
   внутри .ui-nav-item, не меняет разметку самого пункта */
.ui-nav-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--ui-danger-500);
    margin-left: auto; flex-shrink: 0;
}

/* Заголовок группы пунктов меню (опционально, для смысловой группировки
   разделов - например "МАРКЕТПЛЕЙСЫ" отдельно от остальных) */
.ui-nav-section-label {
    padding: var(--ui-space-4) 20px 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ui-gray-400);
}
.ui-nav-section-label:first-child { padding-top: var(--ui-space-2); }

/* Раскрывающаяся группа пунктов меню (например "Импорт данных": один пункт
   в сайдбаре, при клике раскрывающий вложенный список - "Загрузка из
   YML/XML", "Импорт МойСклад" и т.п.) */
.ui-nav-group-toggle {
    justify-content: space-between;
}
.ui-nav-group-toggle .ui-nav-chevron {
    width: 15px; height: 15px; flex-shrink: 0;
    color: var(--ui-gray-400);
    transition: transform .18s ease;
}
.ui-nav-group-toggle.open .ui-nav-chevron {
    transform: rotate(180deg);
}
.ui-nav-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s ease;
}
.ui-nav-submenu.open {
    max-height: 320px;
}
.ui-nav-submenu .ui-nav-item {
    padding-left: 40px;
    font-size: 13.5px;
}
.sidebar-collapsed .ui-nav-submenu { display: none; }
.sidebar-collapsed .ui-nav-group-toggle .ui-nav-chevron { display: none; }

/* ------------------------------------------------------------------ */
/* Пустые состояния / вспомогательное                                   */
/* ------------------------------------------------------------------ */

.ui-empty { text-align: center; color: var(--ui-gray-400); padding: var(--ui-space-8) var(--ui-space-4); }
.ui-divider { border: none; border-top: 1px solid var(--ui-border); margin: var(--ui-space-4) 0; }
.ui-toast {
    display: flex; align-items: center; gap: 10px;
    background: #fff; border: 1px solid var(--ui-border); box-shadow: var(--ui-shadow-md);
    border-radius: var(--ui-radius-md); padding: 12px 16px; font-size: 14px; color: var(--ui-gray-800);
}
.ui-toast-success { border-left: 3px solid var(--ui-success-600); }
.ui-toast-error { border-left: 3px solid var(--ui-danger-600); }
.ui-toast-warning { border-left: 3px solid var(--ui-warning-600); }