/* themes/themes.css */
/* ==========================================
   TriLingva — Премиальная Единая Дизайн-Система
   ========================================== */

:root {
    --global-font-size: 16px;
    --global-font-family: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
    
    /* --- Светлая Тема (Дефолтная / Нежная бежево-стеклянная) --- */
    --bg-grad-start: #fbf6ef;
    --bg-grad-end: #eedbc5;
    --accent-color: #b5854d;
    --accent-hover: #c39255;
    --text-color: #3d2a17;
    --text-muted: #8d7b68;
    --bg-color: rgba(255, 250, 240, 0.95);
    --bg-solid: #fffaf0;
    --paper-color: #fcf8f2;
    --border-color: rgba(181, 133, 77, 0.25);
    --success-color: #2e7d32;
    --danger-color: #c62828;
    --gold-color: #f59e0b;
    --shadow-color: rgba(93, 64, 55, 0.08);
    --glass-blur: blur(12px);
    
    /* Дополнительные переменные кабинета */
    --cab-bg: #fffaf0;
    --cab-card-bg: #ffffff;
    --cab-text: #3d2a17;
    --cab-text-muted: #8d7b68;
    --cab-border: rgba(181, 133, 77, 0.2);
    --cab-accent: #b5854d;
}

/* --- Классическая уютная тема (Сепия / Винтажная бумага) --- */
[data-theme="sepia"], .theme-sepia {
    --bg-grad-start: #e4d3b8;
    --bg-grad-end: #cbb493;
    --accent-color: #5d4037;
    --accent-hover: #4e342e;
    --text-color: #3e2723;
    --text-muted: #795548;
    --bg-color: rgba(253, 245, 230, 0.96);
    --bg-solid: #fdf5e6;
    --paper-color: #faf3e0;
    --border-color: rgba(93, 64, 55, 0.25);
    --success-color: #388e3c;
    --danger-color: #d32f2f;
    --gold-color: #f59e0b;
    --shadow-color: rgba(93, 64, 55, 0.15);
    --glass-blur: blur(10px);

    /* Личный кабинет */
    --cab-bg: #fdf5e6;
    --cab-card-bg: #faf3e0;
    --cab-text: #3e2723;
    --cab-text-muted: #795548;
    --cab-border: rgba(93, 64, 55, 0.2);
    --cab-accent: #5d4037;
}

/* --- Премиальная Тёмная тема (Глубокий космос / Угольный неон) --- */
[data-theme="dark"], .theme-dark {
    --bg-grad-start: #0f172a;
    --bg-grad-end: #020617;
    --accent-color: #c4b5fd;
    --accent-hover: #8b5cf6;
    --text-color: #f8fafc;
    --text-muted: #cbd5e1;
      --bg-color: rgba(60, 68, 85, 0.92);
      --bg-solid: #495366;
      --paper-color: #3f4859;
    --border-color: rgba(196, 181, 253, 0.38);
    --success-color: #10b981;
    --danger-color: #f43f5e;
    --gold-color: #fbbf24;
    --shadow-color: rgba(0, 0, 0, 0.6);
    --glass-blur: blur(16px);

    /* Личный кабинет */
    --cab-bg: #0f172a;
    --cab-card-bg: #363d4a;
    --cab-text: #f8fafc;
    --cab-text-muted: #cbd5e1;
    --cab-border: rgba(196, 181, 253, 0.32);
    --cab-accent: #c4b5fd;
}

/* ==========================================
   Универсальные Стилевые Токены (Премиум)
   ========================================== */

/* Адаптивный фон */
body.themed-body {
    background: linear-gradient(135deg, var(--bg-grad-start), var(--bg-grad-end)) !important;
    color: var(--text-color) !important;
    transition: background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.4s ease;
}

/* Стеклянные карточки-контейнеры */
.themed-container {
    background: var(--bg-color) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 12px 40px var(--shadow-color) !important;
    transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

/* Монолитный дизайн кнопок */
.themed-btn {
    background: var(--accent-color) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    cursor: pointer;
}

.themed-btn:hover:not(:disabled) {
    background: var(--accent-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15) !important;
}

.themed-btn.secondary {
    background: rgba(181, 133, 77, 0.1) !important;
    color: var(--accent-color) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .themed-btn.secondary, .theme-dark .themed-btn.secondary {
    background: rgba(196, 181, 253, 0.16) !important;
    color: #c4b5fd !important;
}

.themed-btn.secondary:hover:not(:disabled) {
    background: rgba(181, 133, 77, 0.25) !important;
    color: var(--accent-hover) !important;
}

/* Заголовки */
.themed-title {
    color: var(--text-color) !important;
    transition: color 0.4s ease;
}

/* ==========================================
   Глобальная адаптация чата под темы оформления
   ========================================== */

/* 1. Общие правила для всех тем (светлая / сепия) */
.chat-modal-layout {
    background: var(--bg-solid) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}
.chat-contacts-panel {
    background: var(--paper-color) !important;
    border-right: 1px solid var(--border-color) !important;
}
.chat-panel-header {
    background: var(--bg-solid) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}
.chat-search-container {
    background: var(--paper-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
}
.chat-search-box {
    background: var(--bg-solid) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}
.contact-item {
    border-bottom: 1px solid var(--border-color) !important;
}
.contact-item:hover {
    background: rgba(181, 133, 77, 0.08) !important;
}
.contact-item.active {
    background: rgba(181, 133, 77, 0.15) !important;
}
.contact-name {
    color: var(--text-color) !important;
}
.contact-last-msg {
    color: var(--text-muted) !important;
}
.chat-messages-area {
    background: var(--bg-solid) !important;
}
.msg-bubble.theirs {
    background: var(--paper-color) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}
.msg-bubble.mine {
    background: rgba(181, 133, 77, 0.2) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}
.chat-input-wrapper {
    background: var(--paper-color) !important;
    border-top: 1px solid var(--border-color) !important;
}
.chat-input-field {
    background: var(--bg-solid) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}
.chat-input-field:empty:before {
    color: var(--text-muted) !important;
}
.msg-time {
    color: var(--text-muted) !important;
}

/* 2. Тёмная тема */
[data-theme="dark"] .contact-item:hover, .theme-dark .contact-item:hover {
    background: rgba(139, 92, 246, 0.15) !important;
}
[data-theme="dark"] .contact-item.active, .theme-dark .contact-item.active {
    background: rgba(139, 92, 246, 0.25) !important;
}
[data-theme="dark"] .msg-bubble.mine, .theme-dark .msg-bubble.mine {
    background: rgba(139, 92, 246, 0.3) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(139, 92, 246, 0.4) !important;
}
[data-theme="dark"] .msg-bubble.theirs, .theme-dark .msg-bubble.theirs {
    background: #0f172a !important;
    color: #f8fafc !important;
    border: 1px solid rgba(139, 92, 246, 0.2) !important;
}
[data-theme="dark"] .chat-contacts-panel, .theme-dark .chat-contacts-panel {
    background: #0f172a !important;
}
[data-theme="dark"] .chat-messages-area, .theme-dark .chat-messages-area {
    background: #020617 !important;
}
[data-theme="dark"] .emoji-palette, .theme-dark .emoji-palette {
    background: #1e293b !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
}
[data-theme="dark"] .emoji-item:hover, .theme-dark .emoji-item:hover {
    background: rgba(139, 92, 246, 0.2) !important;
}
[data-theme="dark"] .chat-mobile-thread-close, .theme-dark .chat-mobile-thread-close,
[data-theme="dark"] .chat-mobile-close-btn, .theme-dark .chat-mobile-close-btn {
    color: #f8fafc !important;
}

/* Мобильный чат в темной теме */
@media (max-width: 600px) {
    [data-theme="dark"] #chat-admin-modal .chat-main-panel,
    .theme-dark #chat-admin-modal .chat-main-panel {
        background: #020617 !important;
    }
}

/* ==========================================
   Стили SweetAlert2 для адаптации под темные и сепия темы
   ========================================== */

/* --- Светлая тема: кнопки по умолчанию --- */
.themed-swal-confirm.swal2-confirm {
    background-color: #3085d6 !important;
    color: #fff !important;
}
.themed-swal-cancel.swal2-cancel {
    background-color: #d33 !important;
    color: #fff !important;
}

/* --- Тёмная тема --- */
[data-theme="dark"] .swal2-popup,
.theme-dark .swal2-popup,
body.theme-dark .swal2-popup,
[data-theme="dark"] .themed-swal-popup,
body.theme-dark .themed-swal-popup {
    background-color: var(--bg-solid, #1e293b) !important;
    color: var(--text-color, #f8fafc) !important;
    border: 1px solid var(--border-color, rgba(139, 92, 246, 0.3)) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}
[data-theme="dark"] .swal2-title,
[data-theme="dark"] .swal2-html-container,
[data-theme="dark"] .swal2-content,
[data-theme="dark"] .swal2-html-container p,
[data-theme="dark"] .swal2-html-container h3,
[data-theme="dark"] .swal2-html-container b,
.theme-dark .swal2-popup .swal2-title,
.theme-dark .swal2-popup .swal2-html-container,
.theme-dark .swal2-popup .swal2-content,
.theme-dark .swal2-popup .swal2-html-container p,
.theme-dark .swal2-popup .swal2-html-container h3,
.theme-dark .swal2-popup .swal2-html-container b,
body.theme-dark .swal2-popup .swal2-title,
body.theme-dark .swal2-popup .swal2-html-container,
body.theme-dark .swal2-popup .swal2-content,
body.theme-dark .swal2-popup .swal2-html-container p,
body.theme-dark .swal2-popup .swal2-html-container h3,
body.theme-dark .swal2-popup .swal2-html-container b {
    color: var(--text-color, #f8fafc) !important;
}
/* Тёмная тема: кнопки */
[data-theme="dark"] .themed-swal-confirm.swal2-confirm,
body.theme-dark .themed-swal-confirm.swal2-confirm {
    background-color: #6366f1 !important;
    color: #fff !important;
}
[data-theme="dark"] .themed-swal-cancel.swal2-cancel,
body.theme-dark .themed-swal-cancel.swal2-cancel {
    background-color: #475569 !important;
    color: #e2e8f0 !important;
}

/* Тёмная тема: тосты (уведомления) */
[data-theme="dark"] .swal2-popup.swal2-toast,
body.theme-dark .swal2-popup.swal2-toast {
    background-color: var(--bg-solid, #1e293b) !important;
    color: var(--text-color, #f8fafc) !important;
    border: 1px solid rgba(139, 92, 246, 0.25) !important;
}
[data-theme="dark"] .swal2-popup.swal2-toast .swal2-title,
body.theme-dark .swal2-popup.swal2-toast .swal2-title {
    color: var(--text-color, #f8fafc) !important;
}

/* --- Сепия тема --- */
[data-theme="sepia"] .swal2-popup,
.theme-sepia .swal2-popup,
body.theme-sepia .swal2-popup,
[data-theme="sepia"] .themed-swal-popup,
body.theme-sepia .themed-swal-popup {
    background-color: var(--bg-solid, #fdf5e6) !important;
    color: var(--text-color, #3e2723) !important;
    border: 1px solid var(--border-color, rgba(93, 64, 55, 0.25)) !important;
    box-shadow: 0 10px 30px rgba(93, 64, 55, 0.15) !important;
}
[data-theme="sepia"] .swal2-title,
[data-theme="sepia"] .swal2-html-container,
[data-theme="sepia"] .swal2-content,
[data-theme="sepia"] .swal2-html-container p,
[data-theme="sepia"] .swal2-html-container h3,
[data-theme="sepia"] .swal2-html-container b,
.theme-sepia .swal2-popup .swal2-title,
.theme-sepia .swal2-popup .swal2-html-container,
.theme-sepia .swal2-popup .swal2-content,
.theme-sepia .swal2-popup .swal2-html-container p,
.theme-sepia .swal2-popup .swal2-html-container h3,
.theme-sepia .swal2-popup .swal2-html-container b,
body.theme-sepia .swal2-popup .swal2-title,
body.theme-sepia .swal2-popup .swal2-html-container,
body.theme-sepia .swal2-popup .swal2-content,
body.theme-sepia .swal2-popup .swal2-html-container p,
body.theme-sepia .swal2-popup .swal2-html-container h3,
body.theme-sepia .swal2-popup .swal2-html-container b {
    color: var(--text-color, #3e2723) !important;
}
/* Сепия тема: кнопки */
[data-theme="sepia"] .themed-swal-confirm.swal2-confirm,
body.theme-sepia .themed-swal-confirm.swal2-confirm {
    background-color: #8d6e63 !important;
    color: #fff !important;
}
[data-theme="sepia"] .themed-swal-cancel.swal2-cancel,
body.theme-sepia .themed-swal-cancel.swal2-cancel {
    background-color: #bcaaa4 !important;
    color: #3e2723 !important;
}

/* Сепия тема: тосты */
[data-theme="sepia"] .swal2-popup.swal2-toast,
body.theme-sepia .swal2-popup.swal2-toast {
    background-color: var(--bg-solid, #fdf5e6) !important;
    color: var(--text-color, #3e2723) !important;
    border: 1px solid rgba(93, 64, 55, 0.2) !important;
}
[data-theme="sepia"] .swal2-popup.swal2-toast .swal2-title,
body.theme-sepia .swal2-popup.swal2-toast .swal2-title {
    color: var(--text-color, #3e2723) !important;
}

/* ==========================================
   Стилизация полей ввода (.letter-input, .hybrid-input) под темы
   ========================================== */
/* Тёмная тема */
[data-theme="dark"] .letter-input,
[data-theme="dark"] .hybrid-input,
.theme-dark .letter-input,
.theme-dark .hybrid-input,
body.theme-dark .letter-input,
body.theme-dark .hybrid-input {
    background-color: var(--paper-color, #111827) !important;
    color: var(--text-color, #f8fafc) !important;
    border: 1px solid var(--border-color, rgba(196, 181, 253, 0.38)) !important;
}

[data-theme="dark"] .letter-input:focus,
[data-theme="dark"] .hybrid-input:focus,
.theme-dark .letter-input:focus,
.theme-dark .hybrid-input:focus,
body.theme-dark .letter-input:focus,
body.theme-dark .hybrid-input:focus {
    background-color: var(--paper-color, #111827) !important;
    border-color: var(--accent-color, #c4b5fd) !important;
}

[data-theme="dark"] .letter-input.correct,
[data-theme="dark"] .hybrid-input.correct,
.theme-dark .letter-input.correct,
.theme-dark .hybrid-input.correct,
body.theme-dark .letter-input.correct,
body.theme-dark .hybrid-input.correct {
      background-color: #10b981 !important;
      border-color: #34d399 !important;
      color: #ffffff !important;
}

[data-theme="dark"] .letter-input.incorrect,
[data-theme="dark"] .hybrid-input.incorrect,
.theme-dark .letter-input.incorrect,
.theme-dark .hybrid-input.incorrect,
body.theme-dark .letter-input.incorrect,
body.theme-dark .hybrid-input.incorrect {
    background-color: #991b1b !important;
    border-color: #dc2626 !important;
    color: #fecaca !important;
}

/* Сепия */
[data-theme="sepia"] .letter-input,
[data-theme="sepia"] .hybrid-input,
.theme-sepia .letter-input,
.theme-sepia .hybrid-input,
body.theme-sepia .letter-input,
body.theme-sepia .hybrid-input {
    background-color: #ffffff !important;
    color: var(--text-color, #3e2723) !important;
    border: 1px solid var(--border-color, rgba(93, 64, 55, 0.25)) !important;
}

[data-theme="sepia"] .letter-input:focus,
[data-theme="sepia"] .hybrid-input:focus,
.theme-sepia .letter-input:focus,
.theme-sepia .hybrid-input:focus,
body.theme-sepia .letter-input:focus,
body.theme-sepia .hybrid-input:focus {
    background-color: #ffffff !important;
    border-color: var(--accent-color, #5d4037) !important;
}

[data-theme="sepia"] .letter-input.correct,
[data-theme="sepia"] .hybrid-input.correct,
.theme-sepia .letter-input.correct,
.theme-sepia .hybrid-input.correct,
body.theme-sepia .letter-input.correct,
body.theme-sepia .hybrid-input.correct {
    background-color: #d4edda !important;
    border-color: #28a745 !important;
    color: #155724 !important;
}

[data-theme="sepia"] .letter-input.incorrect,
[data-theme="sepia"] .hybrid-input.incorrect,
.theme-sepia .letter-input.incorrect,
.theme-sepia .hybrid-input.incorrect,
body.theme-sepia .letter-input.incorrect,
body.theme-sepia .hybrid-input.incorrect {
    background-color: #f8d7da !important;
    border-color: #dc3545 !important;
    color: #721c24 !important;
}

/* ==========================================
   Цветовые подсказки в тренажёрах поверх тем
   ========================================== */
[data-theme="dark"] .letter-input.color-hint-progress,
[data-theme="dark"] .hybrid-input.color-hint-progress,
.theme-dark .letter-input.color-hint-progress,
.theme-dark .hybrid-input.color-hint-progress,
body.theme-dark .letter-input.color-hint-progress,
body.theme-dark .hybrid-input.color-hint-progress,
[data-theme="sepia"] .letter-input.color-hint-progress,
[data-theme="sepia"] .hybrid-input.color-hint-progress,
.theme-sepia .letter-input.color-hint-progress,
.theme-sepia .hybrid-input.color-hint-progress,
body.theme-sepia .letter-input.color-hint-progress,
body.theme-sepia .hybrid-input.color-hint-progress {
    background-color: rgba(0, 123, 255, 0.08) !important;
    border-color: rgba(0, 123, 255, 0.46) !important;
    color: #007bff !important;
}

[data-theme="dark"] .letter-input.color-hint-correct,
[data-theme="dark"] .hybrid-input.color-hint-correct,
.theme-dark .letter-input.color-hint-correct,
.theme-dark .hybrid-input.color-hint-correct,
body.theme-dark .letter-input.color-hint-correct,
body.theme-dark .hybrid-input.color-hint-correct,
[data-theme="sepia"] .letter-input.color-hint-correct,
[data-theme="sepia"] .hybrid-input.color-hint-correct,
.theme-sepia .letter-input.color-hint-correct,
.theme-sepia .hybrid-input.color-hint-correct,
body.theme-sepia .letter-input.color-hint-correct,
body.theme-sepia .hybrid-input.color-hint-correct {
    background-color: rgba(40, 167, 69, 0.1) !important;
    border-color: rgba(40, 167, 69, 0.3) !important;
    color: #28a745 !important;
}

[data-theme="dark"] .letter-input.color-hint-wrong,
[data-theme="dark"] .hybrid-input.color-hint-wrong,
.theme-dark .letter-input.color-hint-wrong,
.theme-dark .hybrid-input.color-hint-wrong,
body.theme-dark .letter-input.color-hint-wrong,
body.theme-dark .hybrid-input.color-hint-wrong,
[data-theme="sepia"] .letter-input.color-hint-wrong,
[data-theme="sepia"] .hybrid-input.color-hint-wrong,
.theme-sepia .letter-input.color-hint-wrong,
.theme-sepia .hybrid-input.color-hint-wrong,
body.theme-sepia .letter-input.color-hint-wrong,
body.theme-sepia .hybrid-input.color-hint-wrong {
    background-color: rgba(220, 53, 69, 0.1) !important;
    border-color: rgba(220, 53, 69, 0.48) !important;
    color: #dc3545 !important;
}

/* --- Virtual Keyboard Dark Theme --- */
[data-theme="dark"] .virtual-keyboard-container,
.theme-dark .virtual-keyboard-container,
body.theme-dark .virtual-keyboard-container {
    background-color: #1f2937 !important;
}
[data-theme="dark"] .virtual-keyboard-container .kb-key,
.theme-dark .virtual-keyboard-container .kb-key,
body.theme-dark .virtual-keyboard-container .kb-key {
    background-color: #374151 !important;
    color: #f3f4f6 !important;
    box-shadow: 0 1px 0 #111827 !important;
}
[data-theme="dark"] .virtual-keyboard-container .kb-key:active,
.theme-dark .virtual-keyboard-container .kb-key:active,
body.theme-dark .virtual-keyboard-container .kb-key:active {
    background-color: #4b5563 !important;
    transform: translateY(2px);
}
[data-theme="dark"] .virtual-keyboard-container .kb-action-btn,
.theme-dark .virtual-keyboard-container .kb-action-btn,
body.theme-dark .virtual-keyboard-container .kb-action-btn,
[data-theme="dark"] .virtual-keyboard-container .kb-native-toggle,
.theme-dark .virtual-keyboard-container .kb-native-toggle,
body.theme-dark .virtual-keyboard-container .kb-native-toggle {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #e5e7eb !important;
}
[data-theme="dark"] .virtual-keyboard-container .kb-special,
.theme-dark .virtual-keyboard-container .kb-special,
body.theme-dark .virtual-keyboard-container .kb-special {
    background-color: #4b5563 !important;
    color: #fff !important;
}
[data-theme="dark"] .virtual-keyboard-container .kb-special[style*="4ade80"],
.theme-dark .virtual-keyboard-container .kb-special[style*="4ade80"],
body.theme-dark .virtual-keyboard-container .kb-special[style*="4ade80"] {
    background-color: #10b981 !important;
}