/* 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: #8b5cf6;
    --accent-hover: #a78bfa;
    --text-color: #f8fafc;
    --text-muted: #94a3b8;
    --bg-color: rgba(30, 41, 59, 0.85);
    --bg-solid: #1e293b;
    --paper-color: #0f172a;
    --border-color: rgba(139, 92, 246, 0.3);
    --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: #1e293b;
    --cab-text: #f8fafc;
    --cab-text-muted: #94a3b8;
    --cab-border: rgba(139, 92, 246, 0.25);
    --cab-accent: #8b5cf6;
}

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

/* Адаптивный фон */
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(139, 92, 246, 0.15) !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 для адаптации под темные и сепия темы
   ========================================== */
[data-theme="dark"] .swal2-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 {
    color: var(--text-color, #f8fafc) !important;
}

[data-theme="sepia"] .swal2-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 {
    color: var(--text-color, #3e2723) !important;
}