/* === EVA 3 PRO GLOBAL THEME ENGINE === */

:root {
    /* --- LIGHT THEME (День) --- */
    --bg-main: #E0E5EC;
    --text-main: #374151;
    --text-sub: #9CA3AF;

    --shadow-flat: 6px 6px 12px rgba(163, 177, 198, 0.6),
        -6px -6px 12px rgba(255, 255, 255, 0.5);

    --shadow-pressed: inset 4px 4px 8px rgba(163, 177, 198, 0.6),
        inset -4px -4px 8px rgba(255, 255, 255, 0.8);

    --shadow-sm-inset: inset 2px 2px 5px rgba(163, 177, 198, 0.6),
        inset -2px -2px 5px rgba(255, 255, 255, 0.8);

    --border-light: rgba(255, 255, 255, 0.2);
    --input-bg: #E0E5EC;

    /* Цвета скроллбара (Светлые) */
    --scroll-track: transparent;
    --scroll-thumb: #CBD5E1;

    /* Цвета тумблеров */
    --toggle-off: #E0E5EC;
    --toggle-knob: #E0E5EC;

    --overlay-bg: rgba(224, 229, 236, 0.85);
    /* Светлый полупрозрачный фон */
}

/* --- DARK THEME (Ночь) --- */
.dark {
    --bg-main: #18181B;
    /* Темный графит */
    --text-main: #b4becc;
    /* Твой настроенный цвет */
    --text-sub: #94A3B8;

    /* Тени (Инверсия) */
    --shadow-flat: 6px 6px 12px rgba(0, 0, 0, 0.6),
        -2px -2px 8px rgba(255, 255, 255, 0.06);

    --shadow-pressed: inset 5px 5px 10px rgba(0, 0, 0, 0.6),
        inset -2px -2px 8px rgba(255, 255, 255, 0.06);

    --shadow-sm-inset: inset 3px 3px 6px rgba(0, 0, 0, 0.6),
        inset -1px -1px 4px rgba(255, 255, 255, 0.06);

    --border-light: rgba(255, 255, 255, 0.08);
    --input-bg: #181a1e;

    /* Цвета скроллбара (Темные) */
    --scroll-track: #1F2125;
    --scroll-thumb: #334155;

    /* Цвета тумблеров */
    --toggle-off: #0f1115;
    /* Темный фон выключенного тумблера */
    --toggle-knob: #374151;
    /* Темная ручка */

    --overlay-bg: rgba(0, 0, 0, 0.85);
    /* Темный полупрозрачный фон */
}

/* === БАЗОВЫЕ НАСТРОЙКИ === */

.bg-theme,
body {
    background-color: var(--bg-main) !important;
    color: var(--text-main) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Исправление читаемости текста в темной теме */
.dark .text-slate-600,
.dark .text-slate-700,
.dark .text-slate-800,
.dark .text-gray-600,
.dark .text-gray-700 {
    color: var(--text-main) !important;
}

.dark .text-slate-400,
.dark .text-slate-500 {
    color: var(--text-sub) !important;
}

/* === NEUMORPHISM OVERRIDES (ИСПРАВЛЕНО) === */
/* Добавил сюда .neu-button и .icon-box из stats */
.neu-flat,
.review-card,
.glow-card-bg,
.neu-btn,
.neu-button,
.icon-box {
    background: var(--bg-main) !important;
    box-shadow: var(--shadow-flat) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-main) !important;
}

/* Вдавленные элементы + активное состояние кнопок stats */
/* ВАЖНО: .neu-pressed теперь управляется из login.css, убираем отсюда */
.neu-pressed {
    background: var(--input-bg) !important;
    box-shadow: var(--shadow-pressed) !important;
    color: var(--text-main) !important;
}

.clean-input,
textarea,
input[type="text"],
select,
.neu-btn:active,
.neu-button:active {
    background: var(--input-bg) !important;
    box-shadow: var(--shadow-pressed) !important;
    color: var(--text-main) !important;
    border: 1px solid transparent !important;
}

.dark .clean-input,
.dark textarea {
    border: none !important;
}

/* === SCROLLBAR FIX (Исправление белых полос) === */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--scroll-track) !important;
}

::-webkit-scrollbar-thumb {
    background-color: var(--scroll-thumb) !important;
    border-radius: 4px;
    border: 2px solid var(--scroll-track);
    /* Отступ */
}

::-webkit-scrollbar-corner {
    background: var(--scroll-track) !important;
}

/* === CONTROLS FIX (Тумблеры и Кнопки) === */

/* 1. Тумблеры в настройках (.neu-checkbox) */
.neu-checkbox {
    background-color: var(--toggle-off) !important;
    box-shadow: var(--shadow-sm-inset) !important;
}

/* Ручка тумблера */
.neu-checkbox::after {
    background-color: var(--text-sub) !important;
    /* Серый цвет ручки */
    box-shadow: var(--shadow-flat) !important;
}

/* Активный тумблер (оставляем цветным) */
.neu-checkbox:checked::after {
    background-color: #7C3AED !important;
}

/* 2. Тумблер Debug (который в хедере) */
#debug-mode-toggle+div {
    background-color: var(--toggle-off) !important;
    border: 1px solid var(--border-light);
}

/* 3. Кнопка "Создать" (+) */
.neu-btn {
    background: var(--bg-main) !important;
    color: var(--text-sub) !important;
    /* Цвет плюсика */
}

.neu-btn:hover {
    color: #fff !important;
    /* При наведении белый */
    background: #7C3AED !important;
    /* И фиолетовый фон */
}

/* === CHIPS FIX === */
.chip {
    background: var(--bg-main) !important;
    box-shadow: var(--shadow-flat) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-light) !important;
    font-size: 0.9rem;
    /* Уменьши размер (было 0.9rem) */
    font-weight: 500;
    /* Сделай менее жирным (было 700) */
    padding: 4px 10px;
    /* Поиграй с отступами, если они слишком большие */
}

/* Крестик в обычной теме */
.chip-delete {
    background: rgba(0, 0, 0, 0.05);
    /* Чуть темнее белого */
    color: #9CA3AF;
    /* Цвет иконки */
}

/* Крестик в ТЕМНОЙ теме */
.dark .chip-delete {
    background: rgba(255, 255, 255, 0.1);
    /* Полупрозрачный белый фон */
    color: #94A3B8;
    /* Цвет иконки */
}

/* При наведении (одинаково для всех) */
.chip-delete:hover {
    background: #EF4444 !important;
    color: white !important;
}

/* === SLIDERS FIX === */
input[type=range].single-slider::-webkit-slider-runnable-track,
.range-track,
.dual-range-track {
    background: var(--input-bg) !important;
    box-shadow: var(--shadow-sm-inset) !important;
}

input[type=range]::-webkit-slider-thumb {
    border-color: var(--bg-main) !important;
}

/* === MODALS === */
.modal-overlay {
    background-color: var(--overlay-bg) !important;
    /* Теперь цвет берется из темы */
    backdrop-filter: blur(8px);
    /* Размытие фона */
}

/* Фикс пузырей на странице логина */
.dark .blob {
    opacity: 0.2 !important;
    /* Делаем их едва заметными в темноте */
    filter: blur(80px) grayscale(50%);
    /* Чуть гасим цвета */
}

/* === TEXTAREA FIXES (Убираем лаги и красим уголки) === */

textarea {
    /* 1. УБИРАЕМ ЛАГИ */
    /* Мы запрещаем анимировать размеры (height), анимируем только цвета */
    transition: background-color 0.2s, box-shadow 0.2s, color 0.2s, border-color 0.2s !important;

    /* Разрешаем тянуть только вертикально (чтобы не ломать верстку вбок) */
    resize: vertical !important;
}

/* 2. КРАСИМ УГОЛОК (Resizer) */
textarea::-webkit-resizer {
    /* Убираем стандартный белый фон */
    background-color: transparent;
    border-radius: 4px;

    /* Рисуем аккуратный треугольник цветом нашего текста (--text-sub) */
    background-image: linear-gradient(135deg, transparent 80%, var(--text-sub) 80%);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 100% 100%;
}

/* Скрываем уголок, если поле заблокировано или не имеет скролла, если нужно */
textarea:disabled::-webkit-resizer {
    display: none;
}

/* === SELECT DROPDOWN FIX === */
select option {
    background-color: var(--bg-main) !important;
    color: var(--text-main) !important;
}

/* === REVIEW CARD CHECKBOXES (Dark Mode Fix) === */
.review-select-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.375rem;
    border: 2px solid #CBD5E1;
    background-color: white;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.review-select-checkbox:checked {
    background-color: #7C3AED;
    border-color: #7C3AED;
}

.review-select-checkbox:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
}

/* Dark mode */
.dark .review-select-checkbox {
    background-color: #374151;
    border-color: #4B5563;
}

.dark .review-select-checkbox:checked {
    background-color: #7C3AED;
    border-color: #7C3AED;
}