/* =========================================
   ФАЙЛ: static/css/base/theme.css 
========================================= */

/* БАЗОВІ ЗМІННІ (LIGHT THEME) - ПАСТЕЛЬНА ПАЛІТРА */
:root {
    --bg-main: #f2f2f7;
    --bg-surface: #ffffff;
    --bg-input: #f8f9fa;
    --text-primary: #333333;
    --text-secondary: #8e8e93;
    --border-color: #d1d1d6;
    --border-strong: #d1d1d6;
    
    --color-primary: #7ea8f8;     
    --color-success: #82c99b;     
    --color-danger:  #f08a84;     
    --color-warning: #f8c77e;     
    --color-teal:    #5ac8fa;     /* Наш бірюзовий */
    --color-magic:   #5ac8fa;     /* Сектор "Тести" на Dashboard */
    
    --text-on-primary: #ffffff;
    
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-main: 0 4px 15px rgba(0, 0, 0, 0.08);
    
    --border-radius: 12px;
    --border-radius-sm: 8px;
    --font-main: 'Manrope', sans-serif;
    --font-family: 'Manrope', sans-serif;

    --text-xs:   11px;
    --text-sm:   13px;
    --text-base: 15px;
    --text-lg:   17px;
    --text-xl:   22px;
}

/* ТЕМНА ТЕМА - ПАСТЕЛЬНА ПАЛІТРА */
html[data-theme="dark"] {
    --bg-main: #121212;
    --bg-surface: #1e1e1e;
    --bg-input: #2a2a2a;
    --text-primary: #ffffff;
    --text-secondary: #a0a0a0;
    --border-color: #333333;
    --border-strong: #3d3d3d;
    color-scheme: dark;
    
    --color-primary: #5c8ae6;
    --color-success: #5eb07d;
    --color-danger:  #d96b66;
    --color-warning: #d6a15c;
    --color-teal:    #64d2ff;
    --color-magic:   #64d2ff;     /* Сектор "Тести" на Dashboard */
    
    --text-on-primary: #ffffff;
    
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-main: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* ГЛОБАЛЬНІ СТИЛІ */
body {
    margin: 0;
    padding: 0;
    min-width: 1200px;
    width: 100vw;
    overflow: hidden;
    height: 100dvh;
    font-family: var(--font-main);
    background-color: var(--bg-main);
    color: var(--text-primary);
    transition: background-color 0.3s, color 0.3s;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

svg, svg * {
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    touch-action: manipulation !important;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

.custom-dropdown { position: relative; width: 100%; user-select: none; }
.dropdown-selected { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 12px 15px; color: var(--text-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 14px; transition: all 0.2s ease; }
.dropdown-selected:hover { border-color: var(--color-primary); }
.dropdown-options { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); margin-top: 4px; z-index: 100; max-height: 200px; overflow-y: auto; box-shadow: var(--shadow-main); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.2s ease; }
.dropdown-options.show { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-options div { padding: 10px 15px; color: var(--text-primary); cursor: pointer; font-size: 14px; transition: background 0.2s ease; }
.dropdown-options div:hover { background: var(--bg-input); color: var(--color-primary); }

.modal { display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); justify-content: center; align-items: center; backdrop-filter: blur(4px); animation: _modal-bg-in 0.22s ease both; }
.modal > * { animation: _modal-content-in 0.26s cubic-bezier(0.34, 1.5, 0.64, 1) both; }
.modal.closing { display: flex !important; pointer-events: none !important; animation: _modal-bg-out 0.18s ease both; }
.modal.closing > * { animation: _modal-content-out 0.18s ease both; }
@keyframes _modal-bg-in       { from { opacity: 0; }                                        to { opacity: 1; } }
@keyframes _modal-content-in  { from { opacity: 0; transform: scale(0.92) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes _modal-bg-out      { from { opacity: 1; }                                        to { opacity: 0; } }
@keyframes _modal-content-out { from { opacity: 1; transform: scale(1) translateY(0); }     to { opacity: 0; transform: scale(0.94) translateY(6px); } }

/* ── Плавне перемикання теми ─────────────────────────────────────── */
html.theme-transitioning,
html.theme-transitioning * { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, fill 0.3s ease, box-shadow 0.3s ease !important; }

.global-actions { position: fixed; top: 15px; right: 20px; z-index: 9999; display: flex; gap: 6px; }
.global-actions .btn-panel { width: 34px; padding: 0; box-shadow: var(--shadow-sm); }
.lang-code-badge { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; line-height: 1; }
.btn-util { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-surface); border: 1px solid var(--border-color); color: var(--text-secondary); display: flex; justify-content: center; align-items: center; cursor: pointer; font-size: 16px; transition: all 0.2s ease; box-shadow: var(--shadow-sm); outline: none; }
.btn-util:hover { color: var(--color-primary); border-color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-main); }