/* ========================================
   ПЕРЕОПРЕДЕЛЕНИЕ ЦВЕТОВОЙ ПАЛИТРЫ
   Обеспечивает совместимость с COLOR_PALETTE.md
   ======================================== */

/* Дополнительные CSS переменные для полной совместимости */
:root {
    /* Основная цветовая палитра */
    --primary-color: #2D80C2;        /* Синий - основной цвет */
    --primary-dark: #1F5A8A;         /* Темно-синий */
    --primary-light: #4A9BD4;        /* Светло-синий */
    
    --accent-color: #B26914;         /* Оранжевый - акцентный */
    --accent-dark: #8B4F0F;          /* Темно-оранжевый */
    --accent-light: #D18B3A;         /* Светло-оранжевый */
    
    --danger-color: #CE5130;         /* Красный - опасность */
    --danger-dark: #A03E26;          /* Темно-красный */
    --danger-light: #E66B4A;         /* Светло-красный */
    
    --success-color: #728322;        /* Зеленый - успех */
    --success-dark: #5A681B;         /* Темно-зеленый */
    --success-light: #8FA42E;        /* Светло-зеленый */
    
    --warning-color: #B26914;        /* Оранжевый - предупреждение */
    --warning-dark: #8B4F0F;         /* Темно-оранжевый */
    --warning-light: #D18B3A;        /* Светло-оранжевый */
    
    --info-color: #0F8893;           /* Бирюзовый - информация */
    --info-dark: #0C6B73;            /* Темно-бирюзовый */
    --info-light: #2BA5B0;           /* Светло-бирюзовый */
    
    --purple-color: #CA45A5;         /* Фиолетовый - специальный */
    --purple-dark: #A03684;          /* Темно-фиолетовый */
    --purple-light: #E066C6;         /* Светло-фиолетовый */
    
    --secondary-color: #565F67;      /* Серый - вторичный цвет */
    --secondary-dark: #3A4147;       /* Темно-серый */
    --secondary-light: #7A8289;      /* Светло-серый */
    
    /* Дополнительные утилиты */
    --border-radius: 8px;
    --border-radius-lg: 12px;
    --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    --box-shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.15);
    --transition: all 0.3s ease;
}

/* Темная тема */
[data-theme="dark"] {
    --primary-color: #4A9BD4;        /* Светло-синий для темной темы */
    --primary-dark: #2D80C2;         /* Основной синий */
    --primary-light: #6BB3E8;        /* Очень светло-синий */
    
    --accent-color: #D18B3A;         /* Светло-оранжевый для темной темы */
    --accent-dark: #B26914;          /* Основной оранжевый */
    --accent-light: #E6A85C;         /* Очень светло-оранжевый */
    
    --danger-color: #E66B4A;         /* Светло-красный для темной темы */
    --danger-dark: #CE5130;          /* Основной красный */
    --danger-light: #F0856A;         /* Очень светло-красный */
    
    --success-color: #8FA42E;        /* Светло-зеленый для темной темы */
    --success-dark: #728322;         /* Основной зеленый */
    --success-light: #A8C23A;        /* Очень светло-зеленый */
    
    --warning-color: #D18B3A;        /* Светло-оранжевый для темной темы */
    --warning-dark: #B26914;         /* Основной оранжевый */
    --warning-light: #E6A85C;        /* Очень светло-оранжевый */
    
    --info-color: #2BA5B0;           /* Светло-бирюзовый для темной темы */
    --info-dark: #0F8893;            /* Основной бирюзовый */
    --info-light: #4BC7D2;           /* Очень светло-бирюзовый */
    
    --purple-color: #E066C6;         /* Светло-фиолетовый для темной темы */
    --purple-dark: #CA45A5;          /* Основной фиолетовый */
    --purple-light: #F085D8;         /* Очень светло-фиолетовый */
    
    --secondary-color: #7A8289;      /* Светло-серый для темной темы */
    --secondary-dark: #565F67;       /* Основной серый */
    --secondary-light: #9CA3AF;      /* Очень светло-серый */

    /* Поверхности/текст для всего ЛК */
    --lk-bg: #0b0f14;
    --lk-surface: #121821;
    --lk-surface-2: #151e28;
    --lk-border: rgba(148, 163, 184, 0.18);
    --lk-text: #e5e7eb;
    --lk-muted: rgba(229, 231, 235, 0.72);
}

/* Базовое оформление контента в темной теме */
body[data-layout-mode="dark"],
html[data-layout-mode="dark"] body {
    background-color: var(--lk-bg);
    color: var(--lk-text);
}

body[data-layout-mode="dark"] .page-content,
body[data-layout-mode="dark"] .main-content,
html[data-layout-mode="dark"] body .page-content,
html[data-layout-mode="dark"] body .main-content {
    background-color: var(--lk-bg);
}

body[data-layout-mode="dark"] .card,
html[data-layout-mode="dark"] body .card {
    background-color: var(--lk-surface);
    border: 1px solid var(--lk-border);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

body[data-layout-mode="dark"] .card-header.bg-white {
    background-color: transparent !important;
    border-bottom: 1px solid var(--lk-border);
}

body[data-layout-mode="dark"] .text-muted,
body[data-layout-mode="dark"] .form-text,
html[data-layout-mode="dark"] body .text-muted,
html[data-layout-mode="dark"] body .form-text {
    color: var(--lk-muted) !important;
}

body[data-layout-mode="dark"] .dropdown-menu,
html[data-layout-mode="dark"] body .dropdown-menu {
    background-color: var(--lk-surface);
    border: 1px solid var(--lk-border);
}

body[data-layout-mode="dark"] .dropdown-item,
html[data-layout-mode="dark"] body .dropdown-item {
    color: var(--lk-text);
}

body[data-layout-mode="dark"] .dropdown-item:hover,
body[data-layout-mode="dark"] .dropdown-item:focus {
    background-color: rgba(148, 163, 184, 0.10);
    color: var(--lk-text);
}

body[data-layout-mode="dark"] .table,
html[data-layout-mode="dark"] body .table {
    color: var(--lk-text);
}

body[data-layout-mode="dark"] .table-light {
    --bs-table-bg: rgba(148, 163, 184, 0.10);
    --bs-table-color: var(--lk-text);
}

body[data-layout-mode="dark"] .border-bottom,
body[data-layout-mode="dark"] .border-top,
body[data-layout-mode="dark"] .dropdown-divider,
html[data-layout-mode="dark"] body .border-bottom,
html[data-layout-mode="dark"] body .border-top,
html[data-layout-mode="dark"] body .dropdown-divider {
    border-color: var(--lk-border) !important;
}

/* Универсальные переопределения "светлых" утилит Bootstrap */
body[data-layout-mode="dark"] .bg-white,
body[data-layout-mode="dark"] .bg-light,
html[data-layout-mode="dark"] body .bg-white,
html[data-layout-mode="dark"] body .bg-light {
    background-color: var(--lk-surface) !important;
}

body[data-layout-mode="dark"] .text-dark,
html[data-layout-mode="dark"] body .text-dark {
    color: var(--lk-text) !important;
}

body[data-layout-mode="dark"] a,
html[data-layout-mode="dark"] body a {
    color: var(--primary-color);
}

body[data-layout-mode="dark"] a:hover,
html[data-layout-mode="dark"] body a:hover {
    color: var(--primary-light);
}

body[data-layout-mode="dark"] .modal-content,
body[data-layout-mode="dark"] .offcanvas,
html[data-layout-mode="dark"] body .modal-content,
html[data-layout-mode="dark"] body .offcanvas {
    background-color: var(--lk-surface);
    color: var(--lk-text);
    border-color: var(--lk-border);
}

body[data-layout-mode="dark"] .list-group-item,
html[data-layout-mode="dark"] body .list-group-item {
    background-color: var(--lk-surface);
    color: var(--lk-text);
    border-color: var(--lk-border);
}

body[data-layout-mode="dark"] .form-control,
body[data-layout-mode="dark"] .form-select,
html[data-layout-mode="dark"] body .form-control,
html[data-layout-mode="dark"] body .form-select {
    background-color: rgba(18, 24, 33, 0.85);
    color: var(--lk-text);
    border-color: var(--lk-border);
}

body[data-layout-mode="dark"] .form-control::placeholder,
html[data-layout-mode="dark"] body .form-control::placeholder {
    color: rgba(229, 231, 235, 0.45);
}

/* Логотип/шапка сайдбара из vertical-menu.php (там жестко прописаны светлые цвета) */
body[data-layout-mode="dark"] .modern-sidebar,
html[data-layout-mode="dark"] body .modern-sidebar {
    background-color: var(--lk-surface) !important;
    border-right-color: var(--lk-border) !important;
    box-shadow: 0 0 20px rgba(0,0,0,0.35) !important;
}

body[data-layout-mode="dark"] .sidebar-logo,
html[data-layout-mode="dark"] body .sidebar-logo {
    border-bottom-color: var(--lk-border) !important;
    background: linear-gradient(135deg, rgba(21, 30, 40, 0.95) 0%, rgba(18, 24, 33, 0.95) 100%) !important;
}

body[data-layout-mode="dark"] .logo-link,
html[data-layout-mode="dark"] body .logo-link {
    background: rgba(74, 155, 212, 0.08) !important;
    border-color: rgba(74, 155, 212, 0.18) !important;
}

body[data-layout-mode="dark"] .logo-link:hover,
html[data-layout-mode="dark"] body .logo-link:hover {
    background: rgba(74, 155, 212, 0.14) !important;
}

body[data-layout-mode="dark"] .modern-sidebar .menu-title,
html[data-layout-mode="dark"] body .modern-sidebar .menu-title {
    color: var(--lk-muted) !important;
}

body[data-layout-mode="dark"] .modern-sidebar .menu-link,
html[data-layout-mode="dark"] body .modern-sidebar .menu-link {
    color: var(--lk-text) !important;
}

body[data-layout-mode="dark"] .modern-sidebar .menu-link:hover,
html[data-layout-mode="dark"] body .modern-sidebar .menu-link:hover {
    background-color: rgba(148, 163, 184, 0.10) !important;
}

/* Если SVG логотип тёмный — инвертируем для dark */
body[data-layout-mode="dark"] .sidebar-logo .logo-image-horizontal,
html[data-layout-mode="dark"] body .sidebar-logo .logo-image-horizontal {
    filter: brightness(0) invert(1);
    opacity: 0.95;
}

/* Дополнительные классы для фона */
.bg-accent { background-color: var(--accent-color) !important; }
.bg-accent-dark { background-color: var(--accent-dark) !important; }
.bg-accent-light { background-color: var(--accent-light) !important; }

.bg-purple { background-color: var(--purple-color) !important; }
.bg-purple-dark { background-color: var(--purple-dark) !important; }
.bg-purple-light { background-color: var(--purple-light) !important; }

/* Дополнительные классы для текста */
.text-accent { color: var(--accent-color) !important; }
.text-accent-dark { color: var(--accent-dark) !important; }
.text-accent-light { color: var(--accent-light) !important; }

.text-purple { color: var(--purple-color) !important; }
.text-purple-dark { color: var(--purple-dark) !important; }
.text-purple-light { color: var(--purple-light) !important; }

/* Дополнительные классы для границ */
.border-accent { border-color: var(--accent-color) !important; }
.border-purple { border-color: var(--purple-color) !important; }

/* Кнопки с новыми цветами */
.btn-accent {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-dark));
    border: none;
    color: white;
    box-shadow: 0 4px 15px rgba(178, 105, 20, 0.3);
    transition: var(--transition);
}

.btn-accent:hover {
    background: linear-gradient(135deg, var(--accent-dark), var(--accent-color));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(178, 105, 20, 0.4);
}

.btn-purple {
    background: linear-gradient(135deg, var(--purple-color), var(--purple-dark));
    border: none;
    color: white;
    box-shadow: 0 4px 15px rgba(202, 69, 165, 0.3);
    transition: var(--transition);
}

.btn-purple:hover {
    background: linear-gradient(135deg, var(--purple-dark), var(--purple-color));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(202, 69, 165, 0.4);
}

/* Бейджи с новыми цветами */
.badge-accent {
    background-color: var(--accent-color);
    color: white;
}

.badge-purple {
    background-color: var(--purple-color);
    color: white;
}

/* Прогресс-бары с новыми цветами */
.progress-accent .progress-bar {
    background: linear-gradient(90deg, var(--accent-color), var(--accent-light));
}

.progress-purple .progress-bar {
    background: linear-gradient(90deg, var(--purple-color), var(--purple-light));
}

/* Карточки с градиентными заголовками */
.card-accent .card-header {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-dark));
}

.card-purple .card-header {
    background: linear-gradient(135deg, var(--purple-color), var(--purple-dark));
}

/* Адаптивность */
@media (max-width: 768px) {
    .btn-accent, .btn-purple {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }
}

/* Анимации */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* Улучшенные тени для новых цветов */
.shadow-accent {
    box-shadow: 0 4px 20px rgba(178, 105, 20, 0.15) !important;
}

.shadow-purple {
    box-shadow: 0 4px 20px rgba(202, 69, 165, 0.15) !important;
}