/* Минимальная система CSS переменных для тем */
/* Светлая тема (по умолчанию) - текущие цвета из системы */
:root {
    /* Основные цвета */
    --main-bg: #ecf0f1;  /* Текущий фон страницы */
    --main-text: #333333; /* Текущий цвет текста */
    
    /* Цвета для компонентов - светлая тема */
    --section-bg: #ffffff;
    --table-bg: #ffffff;
    --table-border: #ddd;
    --table-header-bg: #f5f5f5;
    --table-row-even: #f9f9f9;      /* Четные строки таблицы */
    --table-row-hover: #dddddd;     /* Hover эффект для строк */
    --button-bg: #4a90e2;
    --button-text: #ffffff;
    --input-bg: #ffffff;
    --input-border: #ddd;
    --modal-bg: #ffffff;
    
    /* Цвета для времени и уведомлений */
    --time-text: #2ecc71;        /* Зеленый цвет времени */
    --time-block-bg: #f4f5f7;    /* Чуть серее для блоков времени в светлой теме */
    --notice-bg: #f0f8ff;        /* Голубой фон уведомления */
    --notice-text: #333333;      /* Темный текст уведомления */
    --muted-text: #666666;       /* Приглушенный текст */
    
    /* Цвета для аудиоредактора */
    --editor-bg: #e8e8e8;
    --editor-border: #d0d0d0;
    --waveform-bg: #f5f5f5;
    --waveform-gradient-start: #ffffff;
    --waveform-gradient-end: #f0f0f0;
    
    /* Дополнительные цвета (пока не меняем) */
    --sidebar-bg: #2c3e50;  /* Оставляем темный сайдбар как есть */
    --header-bg: #34495e;   /* Оставляем темный хедер как есть */
    
    /* Цвета для предупреждений */
    --warning-bg: #fff3cd;
    --warning-text: #856404;
    --warning-border: #ffeeba;
    
    /* Переменные для плавного перехода */
    --transition-speed: 0.3s;
}

/* Темная тема - все компоненты (шаг 5) */
[data-theme="dark"] {
    --main-bg: #2c3e50;     /* Темно-синий фон */
    --main-text: #ecf0f1;   /* Светлый текст */
    
    /* Темные цвета для компонентов */
    --section-bg: #34495e;
    --table-bg: #34495e;
    --table-border: #4a5a6a;
    --table-header-bg: #2c3e50;
    --table-row-even: #2c3e50;      /* Четные строки темнее в темной теме */
    --table-row-hover: #4a5a6a;     /* Hover эффект для темной темы */
    --button-bg: #3498db;
    --button-text: #ffffff;
    --input-bg: #34495e;
    --input-border: #4a5a6a;
    --modal-bg: #34495e;
    
    /* Темные цвета для времени и уведомлений */
    --time-text: #1abc9c;        /* Светло-зеленый для темной темы */
    --time-block-bg: #273645;    /* Чуть светлее основного фона для блоков времени */
    --notice-bg: #2c3e50;        /* Темный фон уведомления */
    --notice-text: #ecf0f1;      /* Светлый текст уведомления */
    --muted-text: #95a5a6;       /* Светлый приглушенный текст */
    
    /* Темные цвета для аудиоредактора */
    --editor-bg: #2c3e50;
    --editor-border: #4a5a6a;
    --waveform-bg: #34495e;
    --waveform-gradient-start: #3a4a5c;
    --waveform-gradient-end: #2c3e50;
    
    /* Цвета для предупреждений */
    --warning-bg: #4a3a1a;
    --warning-text: #ffc107;
    --warning-border: #6b5020;
}

/* Применяем переменные ТОЛЬКО к body (минимальное влияние) */
html body {
    background-color: var(--main-bg) !important;
    color: var(--main-text) !important;
    transition: background-color var(--transition-speed) ease,
                color var(--transition-speed) ease;
}

/* Стили для кнопки переключения темы в footer */
footer {
    position: relative;
}

#theme-toggle {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    padding: 8px;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all var(--transition-speed) ease;
}

#theme-toggle:hover {
    background: rgba(0, 0, 0, 0.2);
    transform: translateY(-50%) scale(1.1);
}

/* Темная тема для кнопки */
[data-theme="dark"] #theme-toggle {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] #theme-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Применение темных стилей к компонентам - увеличиваем специфичность */
main .section {
    background-color: var(--section-bg) !important;
    color: var(--main-text) !important;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

table {
    background-color: var(--table-bg) !important;
    color: var(--main-text) !important;
    border-color: var(--table-border) !important;
}

table th {
    background-color: var(--table-header-bg) !important;
    color: var(--main-text) !important;
    border-color: var(--table-border) !important;
}

table td {
    border-color: var(--table-border) !important;
    color: var(--main-text) !important;
}

table tr {
    border-color: var(--table-border) !important;
}

/* Четные строки таблицы */
table tr:nth-child(even) {
    background-color: var(--table-row-even) !important;
}

/* Hover эффект для строк таблицы */
table tr:hover {
    background-color: var(--table-row-hover) !important;
}

.modal-content {
    background-color: var(--modal-bg) !important;
    color: var(--main-text) !important;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

/* Стили для заголовков в модальных окнах */
.modal-content h1,
.modal-content h2,
.modal-content h3 {
    color: var(--main-text) !important;
    transition: color var(--transition-speed) ease;
}

/* Стили для labels в модальных окнах */
.modal-content label {
    color: var(--main-text) !important;
    transition: color var(--transition-speed) ease;
}

/* Стили для всех полей ввода */
input[type="text"],
input[type="email"], 
input[type="password"],
input[type="number"],
input[type="time"],
input[type="date"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="file"],
select,
textarea {
    background-color: var(--input-bg) !important;
    color: var(--main-text) !important;
    border: 1px solid var(--input-border) !important;
    transition: background-color var(--transition-speed) ease, 
                color var(--transition-speed) ease,
                border-color var(--transition-speed) ease;
}

/* Специальные стили для input[type="file"] - кнопка "Обзор" */
.modal-content input[type="file"]::-webkit-file-upload-button {
    -webkit-appearance: button !important;
    background: var(--button-bg) !important;
    color: var(--button-text) !important;
    border: none !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    margin-right: 8px !important;
    font-size: 14px !important;
    transition: all var(--transition-speed) ease !important;
}

.modal-content input[type="file"]::-webkit-file-upload-button:hover {
    background: var(--button-bg) !important;
    opacity: 0.8 !important;
    transform: scale(1.02) !important;
}

/* Firefox стили для кнопки выбора файла */
.modal-content input[type="file"]::-moz-file-upload-button {
    -moz-appearance: button !important;
    background: var(--button-bg) !important;
    color: var(--button-text) !important;
    border: none !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    margin-right: 8px !important;
    font-size: 14px !important;
    transition: all var(--transition-speed) ease !important;
}

/* Стили для самого файлового поля */
.modal-content input[type="file"] {
    padding: 8px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
}

/* Стили для кнопок спинера в input[type="number"] - Chrome/Safari */
.modal-content input[type="number"]::-webkit-outer-spin-button,
.modal-content input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
    width: 20px !important;
    height: 20px !important;
    background: var(--button-bg) !important;
    color: var(--button-text) !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    opacity: 1 !important;
}

/* Альтернативный подход для Firefox */
.modal-content input[type="number"] {
    -moz-appearance: textfield !important;
}

/* Дополнительные стили для принудительной стилизации файлового поля */
input[type="file"]::file-selector-button {
    background: var(--button-bg) !important;
    color: var(--button-text) !important;
    border: none !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    margin-right: 8px !important;
    font-size: 14px !important;
}

input[type="file"]::file-selector-button:hover {
    opacity: 0.8 !important;
}

/* Стили для полей чисел - убираем стрелки спинера для чистоты */
input[type="number"] {
    -moz-appearance: textfield !important; /* Firefox */
}

/* Полностью убираем кнопки спинера в WebKit браузерах */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
    display: none !important;
}

/* При фокусе поля должны подсвечиваться */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="time"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="file"]:focus,
select:focus,
textarea:focus {
    border-color: var(--button-bg) !important;
    outline: none !important;
}

/* Placeholder для полей ввода */
input::placeholder,
textarea::placeholder {
    color: var(--muted-text) !important;
    opacity: 0.7;
}

/* Стили для кнопок в модальных окнах */
.modal-content button,
.modal-content .button {
    background-color: var(--button-bg) !important;
    color: var(--button-text) !important;
    border: none !important;
    transition: background-color var(--transition-speed) ease, transform 0.1s ease;
}

.modal-content button:hover,
.modal-content .button:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

/* Стили для времени на dashboard - используем ID dashboard-page */
#dashboard-page #time-info-section #current-time,
#dashboard-page #time-info-section #next-bell,
#dashboard-page #time-info-section #time-remaining {
    color: var(--time-text) !important;
    background-color: var(--time-block-bg) !important;
    padding: 15px 20px !important;
    border-radius: 10px !important;
    font-size: 56px !important;
    font-weight: bold !important;
    font-family: 'Orbitron', monospace !important;
    margin: 20px 0 !important;
    border: 1px solid var(--table-border) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    text-align: center !important;
    display: block !important;
    transition: color var(--transition-speed) ease, background-color var(--transition-speed) ease;
}

/* Стили для времени на главной странице (index.html) - простые, без блоков */
main #time-info-section #current-time, 
main #time-info-section #next-bell, 
main #time-info-section #time-remaining {
    color: var(--main-text) !important;
    background-color: transparent !important;
    text-align: center !important;
    font-size: 24px !important;
    font-weight: bold !important;
    padding: 10px 0 !important;
    border: none !important;
    box-shadow: none !important;
    margin: 10px 0 !important;
    transition: color var(--transition-speed) ease;
}

/* Стили для заголовков в секциях времени - увеличиваем специфичность */
.section#time-info-section h2 {
    color: var(--main-text) !important;
    transition: color var(--transition-speed) ease;
}

/* Центрирование заголовков времени на главной странице */
main #time-info-section h2 {
    text-align: center !important;
    color: var(--main-text) !important;
    margin-bottom: 5px !important;
    transition: color var(--transition-speed) ease;
}

/* Стили для уведомления о времени */
#time-notice {
    background-color: var(--notice-bg) !important;
    color: var(--notice-text) !important;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

/* Стили для приглушенного текста (timezone-info) */
#timezone-info {
    font-size: 12px !important;
    color: var(--muted-text) !important;
    margin-top: -10px !important;
    transition: color var(--transition-speed) ease;
}

/* Стили для уведомления о времени - убираем inline стили */
#time-notice {
    margin-top: 15px !important;
    padding: 10px !important;
    border-radius: 5px !important;
    font-size: 12px !important;
    background-color: var(--notice-bg) !important;
    color: var(--notice-text) !important;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

/* Общие стили для всех параграфов в секции времени */
#time-info-section p {
    color: var(--main-text) !important;
    transition: color var(--transition-speed) ease;
}

/* Стили для login страницы */
.login-container, .forgot-password-container {
    background-color: var(--modal-bg) !important;
    color: var(--main-text) !important;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

.login-container h1, .forgot-password-container h1 {
    color: var(--main-text) !important;
    transition: color var(--transition-speed) ease;
}

.form-group label {
    color: var(--main-text) !important;
    transition: color var(--transition-speed) ease;
}

.form-group input {
    background-color: var(--input-bg) !important;
    color: var(--main-text) !important;
    border-color: var(--input-border) !important;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease, border-color var(--transition-speed) ease;
}

/* Стили для аудиоредактора */
#audioEditorContainer {
    background: var(--editor-bg) !important;
    padding: 20px !important;
    border-radius: 8px !important;
    margin-bottom: 20px !important;
    border: 1px solid var(--editor-border) !important;
    transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease;
}

#audioEditorTitle {
    color: var(--main-text) !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    font-size: 14px !important;
    transition: color var(--transition-speed) ease;
}

#waveformContainer {
    position: relative !important;
    background: var(--waveform-bg) !important;
    border-radius: 4px !important;
    padding: 10px !important;
    margin-bottom: 15px !important;
    border: 1px solid var(--editor-border) !important;
    transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease;
}

#waveformProgressBar {
    position: relative !important;
    height: 80px !important;
    background: linear-gradient(to bottom, var(--waveform-gradient-start), var(--waveform-gradient-end)) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    border: 1px solid var(--editor-border) !important;
    transition: background var(--transition-speed) ease, border-color var(--transition-speed) ease;
}

/* Стили для сайдбара - исправляем белые границы в темной теме */
.sidebar {
    border-right-color: var(--table-border) !important;
    transition: border-color var(--transition-speed) ease;
}

.logo-section h1 {
    border-bottom-color: var(--table-border) !important;
    transition: border-color var(--transition-speed) ease;
}

/* Стили для галочек и крестиков в таблице звонков */
.active-true {
    color: #16ce16 !important; /* Зеленая галочка в светлой теме */
}

.active-false {
    color: #e74c3c !important; /* Красный крестик в светлой теме */
}

/* В темной теме изменяем цвета для лучшей видимости */
[data-theme="dark"] .active-true {
    color: #2ecc71 !important; /* Более яркий зеленый для темной темы */
}

[data-theme="dark"] .active-false {
    color: #ff6b6b !important; /* Более мягкий красный для темной темы */
}

/* Стили для страниц ошибок */
.error-container {
    background-color: var(--modal-bg) !important;
    color: var(--main-text) !important;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

/* Только для обычных заголовков h1, НЕ для цветных цифр ошибок */
.error-container h1:not(.error-303 h1):not(.error-400 h1):not(.error-401 h1):not(.error-403 h1):not(.error-404 h1):not(.error-500 h1) {
    color: var(--main-text) !important;
    transition: color var(--transition-speed) ease;
}

/* Цветные цифры ошибок остаются цветными в любой теме */
.error-303 h1 { color: #ff9800 !important; } /* Оранжевый для редиректов */
.error-400 h1 { color: #f44336 !important; } /* Красный для клиентских ошибок */
.error-401 h1 { color: #ff5722 !important; } /* Красно-оранжевый для неавторизованных */
.error-403 h1 { color: #e91e63 !important; } /* Розовый для запрещенных */
.error-404 h1 { color: #3b7dd8 !important; } /* Синий для не найденных */
.error-500 h1 { color: #e57373 !important; } /* Светло-красный для серверных ошибок */

.error-container p {
    color: var(--main-text) !important;
    transition: color var(--transition-speed) ease;
}

/* Стили для кнопки "На главную" на страницах ошибок */
.error-container a.home-button {
    background-color: var(--button-bg) !important;
    color: var(--button-text) !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    transition: all var(--transition-speed) ease;
}

.error-container a.home-button:hover {
    opacity: 0.9 !important;
    transform: scale(1.02) !important;
}