/* --- 1. Variables & Base Theme --- */
:root {
    --text-main: #1f2937; /* Темный текст для светлой темы */
    --text-muted: #6b7280;
}
.dark {
    --text-main: #ffffff; /* Светлый текст для темной темы */
    --text-muted: #9ca3af;
}

.text-theme-main { color: var(--text-main); }
.text-theme-muted { color: var(--text-muted); }

/* --- 2. Sidebar --- */
.sidebar { transition: all 0.3s ease; }
.sidebar.collapsed { width: 5rem; }
.sidebar.collapsed .hide-on-collapse { display: none; }
.sidebar.collapsed .nav-item { justify-content: center; }
.sidebar.collapsed .header-wrapper { justify-content: center; }

@media (max-width: 768px) {
    #sidebar.mobile-open {
        position: absolute; top: 80px; left: 0; width: 100%;
        height: calc(100vh - 80px); margin: 0; border-radius: 0;
        z-index: 40; display: flex !important;
    }
}

/* --- 3. Global & Reset --- */
body { 
    padding-bottom: constant(safe-area-inset-bottom); 
    padding-bottom: env(safe-area-inset-bottom); 
    color: var(--text-main); 
}
html, body { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* --- 4. Components (Scheduler & General) --- */
.flatpickr-confirm { 
    padding: 10px; 
    background: #2563eb; 
    color: white; 
    text-align: center; 
    cursor: pointer; 
    font-weight: bold; 
    border-top: 1px solid #1e3a8a; 
}
.form-item { width: 100%; box-sizing: border-box; }
.choices__list--dropdown {
    max-height: 470px; /* Увеличено */
}

/* --- 5. Buttons & Interactive Elements --- */
#translate-btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#translate-btn:disabled {
    opacity: 0.8;
    cursor: not-allowed;
}

.btn-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px; /* Толщина полоски прогресса */
    width: 0%;   /* Начальное состояние */
    background-color: rgba(255, 255, 255, 0.6); /* Полупрозрачный белый */
    transition: width 0.3s ease;
    pointer-events: none; /* Чтобы не мешал клику */
    z-index: 10;
}

/* --- 6. Localization & TomSelect Customization --- */
.ts-control { background-color: #f9fafb !important; border-color: #e5e7eb !important; border-radius: 0.75rem !important; }
.dark .ts-control { background-color: #00000033 !important; border-color: #ffffff1a !important; color: white !important; }

/* Увеличено на 25% (было 750px -> стало 940px) */
.ts-dropdown { 
    border-radius: 0.75rem !important; 
    max-height: 940px !important; 
    overflow-y: auto !important;
}

.optgroup-header { font-weight: bold; padding: 0.5rem; background: #f3f4f6; color: #374151; }
.dark .optgroup-header { background: #374151; color: #e5e7eb; }
#video-list-container:empty { display: none; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ПРИНУДИТЕЛЬНОЕ РАСКРЫТИЕ ВСЕХ TOMSELECT ВВЕРХ */
.ts-wrapper .ts-dropdown {
    position: absolute !important;
    bottom: 100% !important; /* Меню всегда над полем */
    top: auto !important;
    margin-bottom: 8px !important;
    z-index: 9999 !important;
    box-shadow: 0 -10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}

/* ПРИНУДИТЕЛЬНОЕ РАСКРЫТИЕ МЕНЮ КАНАЛОВ ВВЕРХ (Увеличено до 400px) */
#custom-channel-options {
    top: auto !important;                
    bottom: calc(100% + 4px) !important; /* Ставим точно над кнопкой + отступ 4px */
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    transform-origin: bottom center;
    z-index: 9999 !important;            
    max-height: 400px !important;
    overflow-y: auto !important;
}

.selectable-error-text {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    cursor: text;
}
/* --- 7. Subtitles Archive & Layout Fixes --- */

/* Контейнер всей карточки архива (чтобы не распирало сетку) */
.archive-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Строки с текстом (ID, даты, таймеры удаления) */
.archive-text-line {
    white-space: normal !important;
    word-break: break-all !important;
    overflow-wrap: break-word !important;
}

/* Контейнер для плашек с языками перевода */
.archive-languages-container {
    display: flex !important;
    flex-wrap: wrap !important; /* Разрешает перенос плашек на новые строки */
    gap: 6px !important;       /* Аккуратный отступ между плашками */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}