/* app/static/css/dark_theme.css */

/* --- Глобальні змінні та стилі для темної теми --- */
html.dark-mode {
    --bg-color: #121212;
    --text-color: #e0e0e0;
    --card-bg-color: #1e1e1e;
    --border-color: #444444;
    --header-bg-color: #1e1e1e;
    --link-color: #4dabf7;
    --light-bg: #1e1e1e;
}

/* --- Загальні елементи --- */
html.dark-mode body {
    background-color: var(--bg-color);
    color: var(--text-color);
}
/* --- ▼▼▼ ВИДАЛЕНО .public-footer з цього списку ▼▼▼ --- */
html.dark-mode .navbar, html.dark-mode .card, html.dark-mode .modal-content, html.dark-mode #filterPanel, html.dark-mode .list-group-item, html.dark-mode .card-header, html.dark-mode #folderManagerPanel {
    background-color: var(--card-bg-color) !important;
    color: var(--text-color);
    border-color: var(--border-color) !important;
}

/* --- ▼▼▼ ДОДАНО НОВИЙ СТИЛЬ ДЛЯ ФУТЕРА ▼▼▼ --- */
html.dark-mode .public-footer {
    background: none !important; /* Прозорий фон, як у page-link */
    color: var(--text-color); /* Світлий текст */
    border-color: var(--border-color) !important; /* Встановлюємо темну рамку */
}
/* --- ▲▲▲ КІНЕЦЬ НОВОГО СТИЛЮ ▲▲▲ --- */

html.dark-mode .navbar-brand, html.dark-mode .nav-link, html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, html.dark-mode h4, html.dark-mode h5, html.dark-mode h6, html.dark-mode .modal-title, html.dark-mode .form-label, html.dark-mode .logo-text span, html.dark-mode .document-link, html.dark-mode .document-link span, html.dark-mode .text-muted, html.dark-mode .public-footer a, html.dark-mode .counter-value, html.dark-mode .counter-label, html.dark-mode .page-header h1, html.dark-mode .nav a {
    color: var(--text-color) !important;
}
html.dark-mode .form-control,
html.dark-mode .form-select,
html.dark-mode .custom-select {
    background-color: var(--bg-color);
    color: var(--text-color);
    border-color: var(--border-color);
}
html.dark-mode .custom-select option {
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* ▼▼▼ ВИПРАВЛЕННЯ: Випадаючий список кількості записів (DataTables) ▼▼▼ */

/* 1. Стилізуємо саму кнопку <select> */
html.dark-mode .dataTables_length select {
    background-color: var(--bg-color) !important;  /* Темний фон */
    color: var(--text-color) !important;           /* Світлий текст */
    border-color: var(--border-color) !important; /* Темна рамка */
}

/* 2. Стилізуємо опції <option> всередині списку */
html.dark-mode .dataTables_length select option {
    background-color: var(--bg-color);
    color: var(--text-color);
}


html.dark-mode .form-control:focus, html.dark-mode .form-select:focus {
    background-color: var(--bg-color);
    color: var(--text-color);
    border-color: var(--link-color);
}
html.dark-mode #folderManagerPanel .nav-pills .nav-link.active, html.dark-mode #folderManagerPanel .nav-pills .show > .nav-link {
    background-color: var(--ukraine-blue) !important;
    color: white !important;
}
html.dark-mode #folderManagerPanel .nav-pills .nav-link {
    color: var(--text-color) !important;
}
html.dark-mode .slide-title {
    color: var(--text-color) !important;
}

html.dark-mode .close,
html.dark-mode .chat-close {
    color: var(--text-color);
    text-shadow: none;
    opacity: 0.75;
}
html.dark-mode .close:hover,
html.dark-mode .chat-close:hover {
    color: var(--text-color);
    opacity: 1;
}

/* --- Стилі для компонентів чату --- */
html.dark-mode .chat-container, html.dark-mode .chat-header, html.dark-mode .toast-header, html.dark-mode .toast-body {
    background-color: var(--card-bg-color) !important;
    border-color: var(--border-color);
}
html.dark-mode .chat-title, html.dark-mode .toast-header strong {
    color: var(--text-color);
}
html.dark-mode .chat-messages {
    background-color: var(--bg-color) !important;
    border-color: var(--border-color);
}
html.dark-mode .message.incoming {
    background-color: #3a3b3c;
    color: var(--text-color);
}
html.dark-mode .message.incoming small {
    color: #a0a0a0;
}
html.dark-mode .chat-input-area textarea {
    background-color: #333;
    color: var(--text-color);
    border-color: var(--border-color);
}

/* --- Стилі для заголовків таблиць (DataTables) --- */
html.dark-mode .dataTables_scrollHead {
    background-color: var(--card-bg-color) !important;
}
html.dark-mode .dataTables_scrollHead th {
    color: var(--text-color);
    border-bottom: 1px solid var(--border-color) !important;
}
html.dark-mode .dataTables_scrollHead table {
    border-bottom-color: var(--border-color) !important;
}
html.dark-mode .select2-container--default .select2-selection--multiple {
    background-color: var(--bg-color);
    border-color: var(--border-color);
}
html.dark-mode .select2-dropdown {
    background-color: var(--card-bg-color);
    border-color: var(--border-color);
}
html.dark-mode .select2-search__field {
    background-color: transparent !important;
    color: var(--text-color) !important;
}

html.dark-mode .select2-container--bootstrap4 .select2-selection--multiple {
    background-color: var(--bg-color) !important;
    border-color: var(--border-color) !important;
}
html.dark-mode .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
    background-color: #5a6268; /* Темніший фон для вибраних у темній темі */
    color: var(--text-color);
    border-color: #4e555b;
}
html.dark-mode .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
    color: rgba(255, 255, 255, 0.6);
}
html.dark-mode .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: white;
}
html.dark-mode .select2-container--bootstrap4 .select2-dropdown {
     background-color: var(--card-bg-color);
     border-color: var(--border-color);
}
html.dark-mode .select2-container--bootstrap4 .select2-results__option {
    color: var(--text-color);
}

html.dark-mode .select2-container--bootstrap4 .select2-search--dropdown .select2-search__field {
     background-color: var(--bg-color) !important;
     color: var(--text-color) !important;
     border-color: var(--border-color) !important;
}

/* --- ОНОВЛЕНО: Стилі для зміни розміру колонок --- */
html.dark-mode table.dataTable thead th.dt-colresizable-hover,
html.dark-mode table td.dt-colresizable-hover {
    background-color: #333 !important; /* Темно-сірий фон при наведенні */
    border-left-color: var(--link-color) !important;
    border-right-color: var(--link-color) !important;
}


/* --- Компоненти DataTables --- */
html.dark-mode .table {
    color: var(--text-color); border-color: var(--border-color);
}
html.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05);
}
html.dark-mode .dataTables_paginate .page-link {
    background-color: #333; border-color: var(--border-color); color: var(--text-color);
}
html.dark-mode .page-link:hover { background-color: #444; }
html.dark-mode .dataTables_length, html.dark-mode .dataTables_filter, html.dark-mode .dataTables_info {
    color: var(--text-color);
}
html.dark-mode .flatpickr-calendar {
    background: var(--card-bg-color); border-color: var(--border-color); box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
html.dark-mode .flatpickr-month, html.dark-mode .flatpickr-weekday, html.dark-mode .numInput, html.dark-mode .flatpickr-day {
    color: var(--text-color);
}
html.dark-mode .flatpickr-day:hover { background: #333; }
html.dark-mode .flatpickr-day.selected { background: var(--link-color); border-color: var(--link-color); }
html.dark-mode .flatpickr-time input { color: var(--text-color); }
html.dark-mode .sidebar-flap {
    background-color: var(--ukraine-blue) !important;
}

html.dark-mode .counter-block {
    background-color: var(--card-bg-color) !important;
}
html.dark-mode .counter-box {
    background-color: #333 !important; color: var(--ukraine-yellow) !important;
}
html.dark-mode .yellow-counter .counter-box {
    background-color: var(--ukraine-yellow) !important; color: #2c3e50 !important;
}
html.dark-mode .navbar-collapse {
    background-color: var(--card-bg-color) !important;
}
.theme-switch-wrapper { display: flex; align-items: center; gap: 10px; }
.theme-switch { display: inline-block; height: 24px; position: relative; width: 50px; }
.theme-switch input { display: none; }
.slider { background-color: #ccc; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: .4s; border-radius: 34px; }
.slider:before { background-color: #fff; bottom: 4px; content: ""; height: 16px; left: 4px; position: absolute; transition: .4s; width: 16px; border-radius: 50%; }
input:checked + .slider { background-color: var(--link-color); }
input:checked + .slider:before { transform: translateX(26px); }
html.dark-mode .navbar-dark .theme-switch input:checked + .slider { background-color: #66bbff; }


/* ▼▼▼ ПОЧАТОК НОВИХ СТИЛІВ ДЛЯ МОДАЛЬНИХ ВІКОН ▼▼▼ */

/* Виправлення ефекту наведення на папку */
html.dark-mode #folderManagerPanel .folder-item:hover {
    background-color: #3a3b3c !important;
}

/* Загальні стилі для модального вікна */
html.dark-mode .modal-content {
    background-color: var(--card-bg-color);
    color: var(--text-color);
    border-color: var(--border-color);
}
html.dark-mode .modal-header {
    background-color: var(--card-bg-color);
    border-bottom-color: var(--border-color);
}
html.dark-mode .modal-footer {
    background-color: var(--card-bg-color);
    border-top: none; /* <-- Ось зміна, яка прибирає межу */
}

html.dark-mode .modal-body {
    background-color: var(--card-bg-color); /* Робимо фон тіла модалки темним */
}
html.dark-mode .modal-body,
html.dark-mode .modal-body p,
html.dark-mode .modal-body strong,
html.dark-mode .modal-body label {
    color: var(--text-color) !important;
}

/* Стилі для полів вводу та вибору всередині модальних вікон */
html.dark-mode .modal .form-control,
html.dark-mode .modal .form-select,
html.dark-mode .modal select {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

html.dark-mode .modal .form-control::placeholder {
    color: #6c757d;
}

/* Стилі для опцій випадаючого списку */
html.dark-mode .modal select option {
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* ▲▲▲ КІНЕЦЬ НОВИХ СТИЛІВ ▲▲▲ */


/* Стилі для плагіна Select2 */
html.dark-mode .select2-container--default .select2-selection--multiple,
html.dark-mode .select2-container--default .select2-selection--single {
    background-color: var(--bg-color);
    border-color: var(--border-color);
}
html.dark-mode .select2-container--default .select2-selection__rendered {
    color: var(--text-color);
}
html.dark-mode .select2-dropdown {
    background-color: var(--card-bg-color);
    border-color: var(--border-color);
}
html.dark-mode .select2-search__field {
    color: var(--text-color);
    background-color: transparent;
}
html.dark-mode .select2-results__option {
    color: var(--text-color);
}

/* Стилі для плагіна Flatpickr (календар) */
/* --- Стилі для плагіна Flatpickr (календар) - РОЗШИРЕНО --- */
.flatpickr-calendar {
    /* Гарантуємо найвищий пріоритет відображення */
    z-index: 9999 !important;
}

html.dark-mode .flatpickr-calendar {
    background: var(--card-bg-color) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important; /* Більш виражена тінь для темної теми */
}

/* Назва місяця та кнопки навігації */
html.dark-mode .flatpickr-month,
html.dark-mode .flatpickr-current-month .flatpickr-monthDropdown-months,
html.dark-mode .flatpickr-current-month input.cur-year,
html.dark-mode .flatpickr-months .flatpickr-prev-month,
html.dark-mode .flatpickr-months .flatpickr-next-month {
    color: var(--text-color) !important;
    fill: var(--text-color) !important;
}

/* Назви днів тижня */
html.dark-mode .flatpickr-weekday {
    color: rgba(224, 224, 224, 0.7) !important; /* Трохи світліший сірий */
}

/* Числа місяця (дні) */
html.dark-mode .flatpickr-day {
    color: var(--text-color); /* Світлий текст */
    border-color: transparent; /* Прибираємо рамку */
}

/* Дрібніші числа (попередній/наступний місяць) */
html.dark-mode .flatpickr-day.prevMonthDay,
html.dark-mode .flatpickr-day.nextMonthDay {
    color: rgba(224, 224, 224, 0.4) !important; /* Більш прозорий сірий */
}

/* Наведення на день */
html.dark-mode .flatpickr-day:hover,
html.dark-mode .flatpickr-day:focus {
    background: #333; /* Темно-сірий фон при наведенні */
    border-color: #333;
    color: var(--text-color); /* Залишаємо світлий текст */
}

/* Вибраний день / дні в діапазоні */
html.dark-mode .flatpickr-day.selected,
html.dark-mode .flatpickr-day.startRange,
html.dark-mode .flatpickr-day.endRange,
html.dark-mode .flatpickr-day.selected.inRange,
html.dark-mode .flatpickr-day.startRange.inRange,
html.dark-mode .flatpickr-day.endRange.inRange,
html.dark-mode .flatpickr-day.selected:focus,
html.dark-mode .flatpickr-day.startRange:focus,
html.dark-mode .flatpickr-day.endRange:focus,
html.dark-mode .flatpickr-day.selected:hover,
html.dark-mode .flatpickr-day.startRange:hover,
html.dark-mode .flatpickr-day.endRange:hover,
html.dark-mode .flatpickr-day.inRange { /* Проміжні дні діапазону */
    background: var(--link-color) !important; /* Синій фон */
    border-color: var(--link-color) !important;
    color: white !important; /* Білий текст */
    box-shadow: none; /* Прибираємо тінь */
}

/* Сьогоднішній день */
html.dark-mode .flatpickr-day.today {
    border-color: var(--text-color); /* Світла рамка */
    color: var(--text-color);
}
html.dark-mode .flatpickr-day.today:hover,
html.dark-mode .flatpickr-day.today:focus {
    background: #333;
    border-color: var(--text-color);
    color: var(--text-color);
}

/* Недоступні дні */
html.dark-mode .flatpickr-day.disabled,
html.dark-mode .flatpickr-day.disabled:hover {
    color: rgba(224, 224, 224, 0.2) !important; /* Дуже прозорий сірий */
    background: transparent !important;
}


/* Час (якщо використовується) */
html.dark-mode .flatpickr-time input,
html.dark-mode .flatpickr-time .numInputWrapper span {
    color: var(--text-color);
}
html.dark-mode .flatpickr-time .flatpickr-am-pm:hover {
    background: #333;
}}

/* --- Виправлення для випадаючого списку місяців Flatpickr у темній темі --- */

/* Контейнер випадаючого списку місяців */
html.dark-mode .flatpickr-months .flatpickr-monthDropdown-months {
    background-color: var(--card-bg-color) !important; /* Фон як у картки */
    border-color: var(--border-color) !important;
    border-radius: 4px; /* Додамо заокруглення */
    box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* Додамо тінь */
}

/* Окремий місяць у списку */
html.dark-mode .flatpickr-months .flatpickr-monthDropdown-month {
    color: var(--text-color) !important; /* Світлий колір тексту */
    background-color: var(--card-bg-color) !important; /* ТЕМНИЙ фон */
    font-size: 0.9rem !important; /* Зменшуємо розмір шрифту */
    padding: 2px 5px !important; /* Зменшуємо падінги */
}

/* Місяць при наведенні або активний */
html.dark-mode .flatpickr-months .flatpickr-monthDropdown-month:hover,
html.dark-mode .flatpickr-months .flatpickr-monthDropdown-month:focus,
html.dark-mode .flatpickr-current-month span.cur-month:hover { /* Також для кнопки вибору поточного місяця */
    background-color: #333 !important; /* Темно-сірий фон при наведенні */
    color: white !important;
}

/* Виправлення розміру шрифту для поточно вибраного місяця та року */
html.dark-mode .flatpickr-current-month .numInputWrapper,
html.dark-mode .flatpickr-current-month .cur-month {
    font-size: inherit !important; /* Успадковуємо розмір шрифту від батьківського */
}
html.dark-mode .numInput.cur-year {
    font-size: inherit !important; /* Також для року */
}

/* Колір стрілок навігації місяцями */
html.dark-mode .flatpickr-prev-month svg,
html.dark-mode .flatpickr-next-month svg {
    fill: var(--text-color) !important; /* Світлий колір стрілок */
    opacity: 0.7;
}
html.dark-mode .flatpickr-prev-month:hover svg,
html.dark-mode .flatpickr-next-month:hover svg {
    opacity: 1;
    fill: var(--link-color) !important; /* Синій при наведенні */
}

/* ▼▼▼ ВИПРАВЛЕННЯ ДЛЯ ІКОНОК НА МОБІЛЬНІЙ ВЕРСІЇ ТАБЛИЦІ ▼▼▼ */

/* Робимо хрестик закриття бічної панелі світлим */
html.dark-mode #filterPanel .close {
    color: var(--text-color);
    text-shadow: none;
    opacity: 0.85;
}

/* Робимо іконку "меню" (плюс/мінус) від DataTables Responsive світлою та помітною */
html.dark-mode table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before {
    border-color: var(--text-color);
    background-color: var(--link-color); /* Робимо фон синім для кращої видимості */
}

html.dark-mode table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td.dtr-control:before {
    background-color: #dc3545; /* Робимо фон червоним, коли рядок розкрито */
}

/* ▼▼▼ ВИПРАВЛЕННЯ ДЛЯ ІКОНКИ "МЕНЮ" В ТЕМНОМУ РЕЖИМІ ▼▼▼ */

/* Замінюємо стандартну темну SVG-іконку на світлу версію */
html.dark-mode .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(224, 224, 224, 0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Робимо рамку самої кнопки світлішою, щоб її було видно */
html.dark-mode .navbar-toggler {
    border-color: var(--border-color);
}

/* ▼▼▼ ВИПРАВЛЕННЯ ДЛЯ ВКЛАДОК (TABS) В ТЕМНОМУ РЕЖИМІ ▼▼▼ */

/* Стиль для неактивних вкладок */
html.dark-mode #folderManagerPanel .nav-tabs .nav-link {
    border-color: transparent;
    color: var(--text-color);
}

/* Стиль для активної вкладки */
html.dark-mode #folderManagerPanel .nav-tabs .nav-link.active {
    background-color: var(--ukraine-blue); /* Синій фон */
    color: white !important; /* Білий текст */
    border-color: var(--ukraine-blue);
}

/* Колір нижньої межі для панелі вкладок */
html.dark-mode #folderManagerPanel .nav-tabs {
    border-bottom-color: var(--border-color);
}

/* ▼▼▼ СТИЛІ ДЛЯ ІКОНОК ПЕРЕМИКАЧА ТЕМИ ▼▼▼ */

.slider:before {
    /* Додаємо властивості для фонового зображення */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px; /* Розмір іконки всередині кружечка */
}

/* Іконка сонця для світлої теми (за замовчуванням) */
.slider:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f39c12'%3E%3Cpath d='M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.106a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.836 17.836a.75.75 0 00-1.06-1.06l-1.59 1.591a.75.75 0 101.06 1.06l1.59-1.591zM12 18a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.964 17.836a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM4.5 12a.75.75 0 01-.75.75H1.5a.75.75 0 010-1.5h2.25a.75.75 0 01.75.75zM6.106 6.106a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59z'/%3E%3C/svg%3E");
}

/* Іконка місяця для темної теми (коли перемикач активний) */
input:checked + .slider:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f1c40f'%3E%3Cpath fill-rule='evenodd' d='M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-3.845 2.08-7.168 5.168-9.002a.75.75 0 01.819.162z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

/* ▼▼▼ ВИПРАВЛЕННЯ СТИЛІВ ТАБЛИЦЬ АДМІН-ПАНЕЛІ ▼▼▼ */

/* 1. Стилізуємо всі заголовки таблиць в темному режимі */
html.dark-mode .table thead th {
    background-color: #343a40; /* Темно-сірий фон */
    color: var(--text-color) !important;   /* Світлий текст */
    border-color: var(--border-color); /* Темні межі */
}

/* 2. Виправляємо колір тексту в тілі таблиці (для колонки "Деталі" в логах) */
html.dark-mode .table tbody td {
    color: var(--text-color);
    border-color: var(--border-color);
}

/* 3. Налаштовуємо колір при наведенні на рядок */
html.dark-mode .table-hover tbody tr:hover {
    background-color: #2a2a2e; /* Трішки світліший темний, не такий інтенсивний */
    color: var(--text-color);
}

/* 4. Виправлення для "смугастих" таблиць (як у логах) */
html.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--card-bg-color); /* Використовуємо фон картки */
}
html.dark-mode .table-striped tbody tr:nth-of-type(even) {
    background-color: #2c2c2e; /* Трохи інший відтінок */
}

/* 5. Яскравіший ховер для "смугастих" таблиць */
html.dark-mode .table-striped.table-hover tbody tr:hover {
     background-color: #3a3b3c;
}

/* ▲▲▲ КІНЕЦЬ ВИПРАВЛЕНЬ ▲▲▲ */

/* ▼▼▼ ВИПРАВЛЕННЯ ДЛЯ ТЕКСТУ В <pre> (Журнал логів) ▼▼▼ */

html.dark-mode pre,
html.dark-mode .table td pre {
    color: #e0e0e0 !important; /* Робимо текст світлим (успадковує --text-color) */
    background-color: #2a2a2e; /* Додаємо легкий темний фон */
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

/* ▼▼▼ ВИПРАВЛЕННЯ ДЛЯ ІНПУТІВ В МОДАЛЬНИХ ВІКНАХ ▼▼▼ */

/* Задаємо :focus для полів у модалках */
html.dark-mode .modal .form-control:focus,
html.dark-mode .modal .form-select:focus {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--link-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(77, 171, 247, 0.25);
}

/* Виправлення для білого фону автозаповнення (Chrome/Edge) */
html.dark-mode .modal input:-webkit-autofill,
html.dark-mode .modal input:-webkit-autofill:hover,
html.dark-mode .modal input:-webkit-autofill:focus,
html.dark-mode .modal input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--bg-color) inset !important;
    -webkit-text-fill-color: var(--text-color) !important;
    caret-color: var(--text-color) !important;
}

/* Виправлення для інпутів типу "file" */
html.dark-mode .modal .form-control-file {
    color: var(--text-color);
}

/* --- Виправлення 'x' у випадаючому списку фільтрів (Desktop Dark Mode) --- */
/*
html.dark-mode .filter-dropdown-group .dropdown-menu .btn-close {
    color: #ff8a80;
    opacity: 0.8;
    text-shadow: none;
}
html.dark-mode .filter-dropdown-group .dropdown-menu .btn-close:hover {
    color: #ff8a80;
    opacity: 1;
}
*/
/* --- Кінець старого стилю --- */

/* --- ▼▼▼ ВИПРАВЛЕННЯ ДЛЯ СТАТИЧНИХ СТОРІНОК (PRESENTATION, USER_GUIDE) ▼▼▼ --- */

/* 1. Робимо фон контейнерів темним */
html.dark-mode .presentation-container,
html.dark-mode .guide-container {
    background-color: var(--card-bg-color) !important;
    border-color: var(--border-color) !important;
}

/* 2. Робимо світлим основний текст (параграфи, списки, lead), який був сірим/чорним */
html.dark-mode .presentation-container .lead,
html.dark-mode .presentation-container p,
html.dark-mode .presentation-container li,
html.dark-mode .guide-container .lead,
html.dark-mode .guide-section p,
html.dark-mode .guide-section li {
    color: var(--text-color) !important;
    opacity: 0.9;
}

/* 3. Робимо світлими заголовки (h1, h2, h3), які були синіми */
html.dark-mode .presentation-container h1,
html.dark-mode .presentation-container h3,
html.dark-mode .guide-header h1,
html.dark-mode .guide-section h2,
html.dark-mode .guide-section h3,
html.dark-mode .guide-section strong {
    color: var(--text-color) !important;
}

/* 4. Замінюємо сині галочки "✓" на світло-сині для кращого контрасту */
html.dark-mode .presentation-container ul li::before,
html.dark-mode .guide-section li::before {
     color: var(--link-color) !important;
}

/* 5. Налаштовуємо бейджі (плашки) в довіднику */
html.dark-mode .guide-section .badge {
    background-color: var(--link-color) !important;
    color: white !important;
}
html.dark-mode .guide-section .badge.bg-info {
     background-color: var(--ukraine-yellow) !important;
     color: #000 !important; /* Чорний текст на жовтому */
}
/* --- ▲▲▲ КІНЕЦЬ ВИПРАВЛЕННЯ ▲▲▲ --- */

/* --- ▼▼▼ ПОЧАТОК ЗМІН: Уніфікація вигляду фільтрів (Desktop/Mobile) ▼▼▼ --- */

/* * 1. Специфічне правило для .btn-info (жовтий) у темному режимі.
 * Воно має такий самий високий пріоритет і перебиває сірий стиль.
 */
html.dark-mode .filter-dropdown-group .dropdown-toggle.btn-info,
html.dark-mode .filter-group-wrapper .dropdown-toggle.btn-info {
    background-color: var(--ukraine-yellow) !important;
    border-color: var(--ukraine-yellow) !important;
    color: var(--primary-text) !important; /* Чорний текст на жовтому */
}

/* * 2. Специфічне правило для інших кнопок (синій) у темному режимі.
 * (Це правило у вас вже, ймовірно, є, але переконайтесь, що воно тут)
 */
html.dark-mode .filter-dropdown-group .dropdown-toggle:not(.btn-info),
html.dark-mode .filter-group-wrapper .dropdown-toggle:not(.btn-info) {
    background-color: var(--ukraine-blue) !important;
    border-color: var(--ukraine-blue) !important;
    color: white !important;
}

/* 2. Стилі для меню */
html.dark-mode .filter-dropdown-group .dropdown-menu,
html.dark-mode .filter-group-wrapper .dropdown-menu {
    background-color: var(--card-bg-color);
    border-color: var(--border-color);
}

/* 3. Стилі для тексту в меню */
html.dark-mode .filter-dropdown-group .dropdown-item-text,
html.dark-mode .filter-group-wrapper .dropdown-item-text {
    color: var(--text-color);
}

/* 4. Стилі для бейджа-лічильника */
html.dark-mode .filter-dropdown-group .dropdown-toggle .badge,
html.dark-mode .filter-group-wrapper .dropdown-toggle .badge { /* <-- Додано */
     background-color: rgba(255, 255, 255, 0.2);
     /* ▼▼▼ ВИПРАВЛЕНО: Текст має бути темним на світлому фоні ▼▼▼ */
     color: var(--primary-text) !important;
}

/* 5. Стилі для хрестика "Видалити значення" (в меню) */
html.dark-mode .filter-dropdown-group .dropdown-menu .btn-close,
html.dark-mode div#filters-info .filter-group-wrapper .dropdown-menu li span.dropdown-item-text button.btn-close { /* <-- Більш специфічний селектор */
    color: #ff8a80; /* Світло-червоний для темного фону */
    opacity: 0.8;
    text-shadow: none;
}
html.dark-mode .filter-dropdown-group .dropdown-menu .btn-close:hover,
html.dark-mode div#filters-info .filter-group-wrapper .dropdown-menu li span.dropdown-item-text button.btn-close:hover { /* <-- Більш специфічний селектор */
    color: #ff8a80;
    opacity: 1;
}

/* 6. Стилі для хрестика "Видалити групу" (біля кнопки) */
html.dark-mode .clear-filter-group,
html.dark-mode .clear-global-search {
    color: #ff8a80 !important; /* Світло-червоний */
    opacity: 0.8 !important;
}
html.dark-mode .clear-filter-group:hover,
html.dark-mode .clear-global-search:hover {
    opacity: 1 !important;
    color: #ff8a80 !important;
}

/* --- Стилі для .btn-outline-primary в темній темі --- */
html.dark-mode .btn-outline-primary {
    color: var(--link-color);
    border-color: var(--link-color);
}
html.dark-mode .btn-outline-primary:hover {
    color: white;
    background-color: var(--link-color);
    border-color: var(--link-color);
}

/* --- Стилізація Глобального Пошуку (Dark Mode) --- */
html.dark-mode #global-search-container {
    background-color: #333123; /* Темно-жовтий */
    border-color: #57533c;     /* Темно-жовта рамка */
}

/* --- ▼▼▼ ПОЧАТОК: Фінальне виправлення Select2 v9 (Темна тема) --- */

/* 1. Синій колір (Hover), АЛЕ ТІЛЬКИ для НЕ обраних елементів */
html.dark-mode .select2-container--bootstrap4 .select2-dropdown .select2-results__option--highlighted:not(.select2-results__option--selected) {
    background-color: var(--link-color); /* Синій */
    color: white;
}

/* 2. Зелений колір (Selected), для ВСІХ обраних елементів */
/* (Цей селектор спрацює і при наведенні, і без нього) */
html.dark-mode .select2-container--bootstrap4 .select2-dropdown .select2-results__option.select2-results__option--selected {
    background-color: #28a745 !important; /* Зелений */
    color: white !important;
}

/* --- ▼▼▼ ПОЧАТОК: Збільшення іконок сортування DataTables (Table View, Темна тема) --- */

/* 1. Збільшуємо розмір шрифту ТА ВІДСУВАЄМО ВПРАВО */
html.dark-mode .table-responsive table.dataTable thead .sorting::before,
html.dark-mode .table-responsive table.dataTable thead .sorting::after,
html.dark-mode .table-responsive table.dataTable thead .sorting_asc::before,
html.dark-mode .table-responsive table.dataTable thead .sorting_asc::after,
html.dark-mode .table-responsive table.dataTable thead .sorting_desc::before,
html.dark-mode .table-responsive table.dataTable thead .sorting_desc::after {
    font-size: 1.1em;
    right: 0.8em;
}

/* 2. Розсовуємо їх по вертикалі */
html.dark-mode .table-responsive table.dataTable thead .sorting::before,
html.dark-mode .table-responsive table.dataTable thead .sorting_asc::before {
    top: 0.8em;
}
html.dark-mode .table-responsive table.dataTable thead .sorting::after,
html.dark-mode .table-responsive table.dataTable thead .sorting_desc::after {
    top: 1.6em;
}

/* --- ▲▲▲ КІНЕЦЬ: Збільшення іконок сортування DataTables --- */

/* --- ▼▼▼ ПОЧАТОK: Приховуємо сортування на колонці '+' (Картотека, Темна тема) --- */
html.dark-mode .table-responsive table.dataTable thead th.dt-orderable-false::before,
html.dark-mode .table-responsive table.dataTable thead th.dt-orderable-false::after {
    display: none !important;
}
/* --- ▲▲▲ КІНЕЦЬ: Приховуємо сортування --- */

/* --- ▼▼▼ ПІДСВІТКА АКТИВНОЇ ВКЛАДКИ (НОВЕ, ТЕМНА ТЕМА) ▼▼▼ --- */

/* Стиль для десктопної версії (PC) */
html.dark-mode header.navbar-light .navbar-nav .nav-link.active {
    color: var(--ukraine-yellow) !important; /* Жовтий колір */
    font-weight: 700;
}

/* Стиль для мобільного меню (бургер, темна тема) */
@media (max-width: 991.98px) {
    html.dark-mode .navbar-collapse .navbar-nav .nav-link.active {
        background-color: rgba(255, 215, 0, 0.15) !important; /* Легкий жовтий фон */
        color: var(--ukraine-yellow) !important;
        font-weight: 600;
    }
}
/* --- ▲▲▲ КІНЕЦЬ БЛОКУ ПІДСВІТКИ ▲▲▲ --- */
/* --- dark_theme.css --- */

/* Робимо стрілки навігації року білими та видимими в темній темі */
html.dark-mode .flatpickr-current-month .numInputWrapper span.arrowUp,
html.dark-mode .flatpickr-current-month .numInputWrapper span.arrowDown {
    opacity: 1 !important; /* Завжди видимі */
}

/* Задаємо колір самих стрілок через псевдоелементи */
html.dark-mode .flatpickr-current-month .numInputWrapper span.arrowUp::after {
    border-bottom-color: var(--text-color) !important; /* Використовуємо змінну для білого кольору */
}

html.dark-mode .flatpickr-current-month .numInputWrapper span.arrowDown::after {
    border-top-color: var(--text-color) !important; /* Використовуємо змінну для білого кольору */
}

/* Опціонально: колір при наведенні в темній темі */
html.dark-mode .flatpickr-current-month .numInputWrapper span.arrowUp:hover,
html.dark-mode .flatpickr-current-month .numInputWrapper span.arrowDown:hover {
    background: rgba(255,255,255,0.1);
}