/* --- Глобальні стилі та кольорова схема --- */
:root {
    --ukraine-blue: #0057B8;
    --ukraine-yellow: #FFD700;
    --primary-text: #212529;
    --secondary-text: #6c757d;
    --light-bg: #f8f9fa;
    --border-color: #dee2e6;
    --warning-color: #ffc107;
}

body, html {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--light-bg);
    color: var(--primary-text);
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Запобігання горизонтальному скролу */
    scrollbar-gutter: stable;
}

/* --- Хедер та Навігація --- */
header {
    background-color: #ffffff;
    padding: 10px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* --- Оновлені стилі для логотипу --- */

/* Встановлюємо синій колір для всього логотипу, перебиваючи стиль Bootstrap */
header .navbar-brand.logo-text,
header .logo-text {
    color: #0057B8 !important; /* Синій колір для "Закупівельні" */
    font-size: 22px;
    font-weight: 600;
}

/* Встановлюємо жовтий колір для слова "практики" всередині логотипу */
header .navbar-brand.logo-text span,
header .logo-text span {
    color: #FFD700; /* Жовтий колір */
    font-weight: 600; /* Жирність для контрасту */
}

header nav a {
    text-decoration: none;
    color: #212529;
    font-size: 15px;
    font-weight: 500;
    margin: 0 12px;
    transition: color 0.2s;
}
header nav a:hover {
    color: var(--ukraine-blue);
}

.auth-links a {
     text-decoration: none;
     color: #212529 !important; /* Робимо чорним і додаємо !important */
     font-size: 15px;
     font-weight: 500;
     margin: 0 12px;
}

/* --- Стилізація кнопок --- */
.btn-primary {
    background-color: var(--ukraine-blue);
    border-color: var(--ukraine-blue);
    color: #fff;
}
.btn-primary:hover {
    background-color: #00418a;
    border-color: #00418a;
}
.btn-info {
    background-color: var(--ukraine-yellow);
    border-color: var(--ukraine-yellow);
    color: var(--primary-text);
}
.btn-info:hover {
    background-color: #e6c300;
    border-color: #e6c300;
}
.btn-warning {
    background-color: var(--warning-color);
    border-color: var(--warning-color);
}


/* --- Форми та Картки (для login, register, dashboard) --- */
.card {
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}
.card-header {
    background-color: #fff;
    font-size: 1.25rem;
    font-weight: 500;
    border-bottom: 1px solid var(--border-color);
}
.form-control:focus {
    border-color: var(--ukraine-blue);
    box-shadow: 0 0 0 0.2rem rgba(0, 87, 184, 0.25);
}

/* --- Футер --- */
.public-footer {
    text-align: center;
    padding: 20px;
    background-color: #ffffff;
    border-top: 1px solid var(--border-color);
    width: 100%;
}

/* --- НОВІ СТИЛІ ДЛЯ СТОРІНКИ "ВИБРАНЕ" --- */
.favorites-container {
    display: flex;
    gap: 20px;
}

.folders-sidebar {
    flex: 0 0 280px;
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    height: fit-content;
}

.folders-sidebar h3 {
    margin-top: 0;
    font-size: 1.2rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    margin-bottom: 10px;
}

#folder-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#folder-list .folder-item {
    padding: 10px;
    cursor: pointer;
    border-radius: 5px;
    margin-bottom: 5px;
    transition: background-color 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#folder-list .folder-item:hover, #folder-list .folder-item.active {
    background-color: #e9ecef;
}

.folder-item.active {
    font-weight: bold;
    color: var(--ukraine-blue);
}

.content-main {
    flex: 1;
    min-width: 0;
}

#folder-content-view {
    display: none; /* Приховано за замовчуванням */
}

#folder-content-view .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#folder-name-display {
    margin: 0;
}

.btn-add-to-favorites {
    color: var(--warning-color);
    border-color: var(--warning-color);
}
.btn-add-to-favorites:hover {
    color: #fff;
    background-color: var(--warning-color);
}

/* --- ІСНУЮЧІ СТИЛІ ДЛЯ ТАБЛИЦЬ ТА ЧАТУ --- */
.dataTables_scrollHead {
    position: sticky !important;
    top: 0;
    z-index: 10;
    background-color: #fff;
}
.dataTables_scrollHead table {
    border-bottom: 2px solid #ddd;
}
.dataTables_scrollBody {
    /* КРИТИЧНЕ ВИПРАВЛЕННЯ: Примусове використання скролу для резервування місця */
    overflow-y: scroll !important;
}
.button-container .btn {
    margin-right: 5px;
}
.editable-cell {
    cursor: pointer;
    background-color: #f0f8ff;
}
.editable-cell:hover { background-color: #e6f0fa; }
table {
    table-layout: auto;
    width: 100%;
    border-collapse: collapse;
}
table th, table td {
    white-space: normal !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: none;
    min-width: 150px;
    padding: 8px;
    text-align: left;
}
.dataTables_wrapper {
    width: 100%;
    overflow-x: hidden;
}
.dataTables_wrapper table {
    word-break: break-word;
    width: 100%;
}
.table-responsive {
    /* Клас table-responsive тепер керує горизонтальним скролом */
    width: 100%;
    overflow-x: auto;
}
.toggle-button {
    margin-left: 5px;
    font-size: 12px;
    padding: 2px 6px;
    background: none;
    border: 1px solid var(--ukraine-blue);
    color: var(--ukraine-blue);
    border-radius: 3px;
    cursor: pointer;
}
.toggle-button:hover {
    background-color: var(--ukraine-blue);
    color: white;
}

.short-text, .full-text {
    display: inline;
}

.short-text {
    cursor: pointer;
}

.full-text {
    display: none;
}

.filter-clear-btn {
    font-size: 0.9em;
    padding: 2px 8px;
}

.ml-1 {
    margin-left: 5px;
}

.mb-1 {
    margin-bottom: 5px;
}

.filter-btn {
    font-size: 0.9em;
    padding: 2px 8px;
    position: relative;
}

.filter-close-icon {
    position: absolute;
    top: -5px;
    right: -5px;
    color: red;
    font-size: 12px;
    cursor: pointer;
    padding: 2px;
}

.filter-undo-icon {
    color: var(--ukraine-blue);
    font-size: 14px;
    cursor: pointer;
    padding: 2px;
}

.undo-state {
    background-color: #f8f9fa;
    border-color: var(--ukraine-blue);
}

table.dataTable thead th[data-is-resizable=true] {
    border-left: 1px solid transparent;
    border-right: 1px dashed #bfbfbf;
}

table.dataTable thead th.dt-colresizable-hover {
    cursor: col-resize !important;
    background-color: #eaeaea;
    border-left: 1px solid #bfbfbf;
}

table.dataTable thead th.dt-colresizable-bound-min,
table.dataTable thead th.dt-colresizable-bound-max {
    opacity: 0.2;
    cursor: not-allowed !important;
}

table td.dt-colresizable-hover {
    cursor: col-resize;
    background-color: #eaeaea;
    border-right: 1px dashed #bfbfbf;
}

.container-fluid {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: 0;
    margin-right: 0;
}

.message {
    margin-bottom: 10px;
    padding: 8px 12px;
    border-radius: 15px;
    max-width: 80%;
    word-wrap: break-word;
}

.message.outgoing {
    background-color: #fff3cd;
    margin-left: auto;
}

.message.incoming {
    background-color: #d1ecf1;
    margin-right: auto;
}

.message small {
    display: block;
    font-size: 0.8em;
    color: #666;
}

.message a {
    color: var(--ukraine-blue);
    text-decoration: underline;
}

.chat-button {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
}

.chat-button .btn {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

#newMessageToast {
    min-width: 250px;
}

#newMessageToast .toast-header {
    background-color: var(--ukraine-blue);
    color: white;
}

.modal-content {
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.modal-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.modal-body {
    background-color: #fff;
}

#user-messages, #admin-messages {
    background-color: #f9f9f9;
    border-radius: 5px;
}

#user-message-input, #admin-message-input {
    border-radius: 5px;
    border: 1px solid #ced4da;
}

#user-send-button, #admin-send-button {
    width: 100%;
    border-radius: 5px;
}

#user-file-input, #admin-file-input {
    border: none;
    padding: 0;
}

.chat-container {
    position: fixed;
    bottom: 60px;
    left: 20px;
    width: 400px;
    max-height: 500px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

.chat-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.chat-title {
    margin: 0;
    font-size: 1.25rem;
}

.chat-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

.chat-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.chat-messages {
    height: 300px;
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 5px;
    margin-bottom: 10px;
}

.chat-input-area {
    display: flex;
    flex-direction: column;
}

.chat-input-area textarea {
    resize: none;
    border-radius: 5px;
    border: 1px solid #ced4da;
}

.chat-input-area input[type="file"] {
    border: none;
    padding: 0;
}

.chat-input-area button {
    width: 100%;
    border-radius: 5px;
}

.read-status {
    display: block;
    font-size: 0.8em;
    color: #28a745;
    margin-top: 5px;
}

/* --- Виправлення для мобільного меню --- */
@media (max-width: 991.98px) {
    /* Розміщуємо елементи в стовпчик і по центру */
    .navbar-collapse {
        text-align: center;
        padding: 1rem 0;
    }

    /* Відокремлюємо основну навігацію від кнопок входу/виходу */
    .navbar-collapse .navbar-nav.mx-auto {
        margin-bottom: 1rem;
    }

    /* Стилі для посилань всередині мобільного меню */
    .navbar-collapse .nav-item {
        padding: 0.5rem 0;
    }

    /* Блок з посиланнями на вхід/реєстрацію */
    .navbar-collapse .auth-links {
        padding-top: 1rem;
        border-top: 1px solid #dee2e6;
    }
}

/* Адаптація висоти слайдера для мобільних пристроїв */
@media (max-width: 767.98px) {
    .swiper-container {
        height: auto; /* Дозволяємо висоті автоматично підлаштовуватися під вміст */
    }

    /* Зменшуємо вертикальні відступи всередині слайда на мобільних */
    .swiper-slide {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

/* --- ФІКС КОЛЬОРУ ПОСИЛАНЬ В ХЕДЕРІ --- */
header.navbar-light .navbar-nav .nav-link {
    color: #212529 ;
}

/* --- Заміна стандартної іконки DataTables Responsive --- */

/* Сховати стандартну іконку */
/* --- Повне приховування стандартної іконки DataTables Responsive --- */

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
    content: '' !important; /* Повністю прибираємо контент */
    display: none !important; /* Гарантовано ховаємо елемент */
    /* Додаткові скидання стилів про всяк випадок */
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    height: auto !important;
    width: auto !important;
    position: static !important; /* Скидаємо позиціонування */
    top: auto !important;
    left: auto !important;
}

table.dataTable.dtr-inline > tbody > tr.parent > td.dtr-control::before,
table.dataTable.dtr-inline > tbody > tr.parent > th.dtr-control::before {
    content: '' !important; /* Повністю прибираємо контент */
    display: none !important; /* Гарантовано ховаємо елемент */
    /* Додаткові скидання стилів про всяк випадок */
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    height: auto !important;
    width: auto !important;
    position: static !important; /* Скидаємо позиціонування */
    top: auto !important;
    left: auto !important;
}

/* --- Стилі для іконки Font Awesome (ЗАЛИШТЕ ЯК Є, якщо вони вже додані) --- */
/* Ці стилі додають іконки '+' та '-' */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::after,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::after {
    font-family: "Font Awesome 5 Free";
    content: "\f0fe"; /* Іконка fa-plus-square */
    font-weight: 900;
    color: #007bff;
    font-size: 1.4em;
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

table.dataTable.dtr-inline > tbody > tr.parent > td.dtr-control::after,
table.dataTable.dtr-inline > tbody > tr.parent > th.dtr-control::after {
    font-family: "Font Awesome 5 Free";
    content: "\f146"; /* Іконка fa-minus-square */
    font-weight: 900;
    color: #dc3545;
    font-size: 1.4em;
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

/* Відступ для тексту, щоб не накладався на іконку (ЗАЛИШТЕ ЯК Є) */
table.dataTable.dtr-inline > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline > tbody > tr > th.dtr-control {
    position: relative;
    padding-left: 30px;
}

/* --- ▼▼▼ НОВИЙ БЛОК ▼▼▼ --- */
/* --- Виправлення для <select> пагінації DataTables --- */
/* Прибираємо стрілку Bootstrap 4, яка накладається на текст */
.dataTables_length select.custom-select {
    background-image: none !important;
    padding-right: 0.75rem !important; /* Повертаємо стандартний відступ */
}
/* --- ▲▲▲ КІНЕЦЬ НОВОГО БЛОКУ ▲▲▲ --- */


/* --- Кастомізація пагінації DataTables --- */

/* Колір активної сторінки (використовуємо ваш синій) */
.pagination .page-item.active .page-link {
    background-color: #0057B8; /* Ukraine blue */
    border-color: #0057B8;
    color: white; /* Білий текст на синьому фоні */
}

/* Колір тексту звичайних сторінок */
.pagination .page-item .page-link {
    color: #0057B8; /* Ukraine blue */
}

/* Колір при наведенні (можна зробити світлішим синім) */
.pagination .page-item .page-link:hover {
    background-color: #e9ecef; /* Світло-сірий фон Bootstrap */
    border-color: #dee2e6;
    color: #00418c; /* Темніший синій при наведенні */
}

/* Колір неактивних кнопок (Поперед./Наст.) */
.pagination .page-item.disabled .page-link {
    color: #6c757d; /* Стандартний сірий Bootstrap */
}

/* --- Покращення пагінації DataTables (мобільна версія) --- */

/* 1. Вирівнювання номера активної сторінки */
.pagination .page-item.active .page-link {
    display: flex; /* Використовуємо flexbox для вирівнювання */
    align-items: center; /* Вертикальне вирівнювання по центру */
    justify-content: center; /* Горизонтальне вирівнювання по центру */
    line-height: 1; /* Прибираємо стандартний line-height, який може заважати */
    padding-top: 0.5rem; /* Зменшуємо верхній падінг, якщо потрібно */
    padding-bottom: 0.5rem; /* Зменшуємо нижній падінг */
}

/* 2. Заміна тексту "Поперед." та "Наст." на іконки Font Awesome */
.pagination .page-item#mobile-table_previous .page-link::before,
.pagination .page-item#mobile-table_next .page-link::before,
.pagination .page-item#table_previous .page-link::before, /* <-- Додано */
.pagination .page-item#table_next .page-link::before { /* <-- Додано */
    font-family: "Font Awesome 5 Free"; /* Вибираємо кнопку "Наст." */
    font-family: "Font Awesome 5 Free"; /* Використовуємо Font Awesome */
    font-weight: 900; /* Важливо для FA5 */
    font-size: 0.9em; /* Трохи менший розмір іконки */
}

/* Приховуємо текст */
.pagination .page-item#mobile-table_previous .page-link,
.pagination .page-item#mobile-table_next .page-link,
.pagination .page-item#table_previous .page-link, /* <-- Додано */
.pagination .page-item#table_next .page-link { /* <-- Додано */
    font-size: 0; /* Приховуємо текст */
    padding-left: 0.75rem; /* Коригуємо відступи для іконки */
    padding-right: 0.75rem;
}

/* Встановлюємо іконку стрілки вліво */
.pagination .page-item#mobile-table_previous .page-link::before,
.pagination .page-item#table_previous .page-link::before { /* <-- Додано */
    content: "\f053";
    content: "\f053"; /* Код іконки fa-chevron-left */
    font-size: 1rem; /* Відновлюємо розмір для іконки */
}

/* Встановлюємо іконку стрілки вправо */
.pagination .page-item#mobile-table_next .page-link::before,
.pagination .page-item#table_next .page-link::before { /* <-- Додано */
    content: "\f054"; /* Код іконки fa-chevron-right */
    font-size: 1rem; /* Відновлюємо розмір для іконки */
}

/* Додатково: Зробимо неактивні стрілки трохи світлішими */
.pagination .page-item.disabled#mobile-table_previous .page-link::before,
.pagination .page-item.disabled#mobile-table_next .page-link::before,
.pagination .page-item.disabled#table_previous .page-link::before, /* <-- Додано */
.pagination .page-item.disabled#table_next .page-link::before {
    opacity: 0.6;
}

/* Сховати всі номери сторінок, КРІМ активної */
/* --- Повна кастомізація пагінації DataTables --- */

/* --- Загальні стилі для контейнера пагінації --- */
.dataTables_wrapper .dataTables_paginate {
    padding-top: 0.5em; /* Додаємо трохи місця зверху */
}

/* --- Стилі для всіх кнопок пагінації (LI елементи) --- */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: none !important;        /* Прибираємо рамки LI */
    padding: 0 2px !important;    /* Невеликий відступ між кнопками */
    margin: 0 !important;
    background: none !important;    /* Гарантуємо прозорий фон LI */
    box-shadow: none !important;
}

/* --- Стилі для всіх посилань (A елементи) всередині кнопок --- */
.dataTables_wrapper .dataTables_paginate .paginate_button a.page-link {
    width: 38px;                 /* Фіксована ширина */
    height: 38px;                /* Фіксована висота */
    display: inline-flex !important; /* Використовуємо flex для центрування */
    align-items: center;
    justify-content: center;
    padding: 0 !important;       /* Скидаємо внутрішні відступи */
    border: 1px solid #dee2e6 !important; /* Стандартна світла рамка Bootstrap */
    border-radius: 0.25rem;      /* Стандартне заокруглення Bootstrap */
    background: none !important;  /* Прозорий фон */
    box-shadow: none !important;
    position: relative;          /* Для псевдоелементів */
    color: #0057B8 !important;   /* Синій колір за замовчуванням (для іконок) */
    font-size: 0 !important;     /* **Приховуємо текст за замовчуванням** */
}

/* --- Стилі для АКТИВНОЇ кнопки пагінації (номер сторінки) --- */
.dataTables_wrapper .dataTables_paginate .paginate_button.active a.page-link {
    /* Фон і рамка не потрібні, бо ми хочемо просто текст */
    background: none !important;
    border: none !important; /* Прибираємо рамку */
    color: #212529;   /* **ЧОРНИЙ колір тексту** */
    font-weight: bold;           /* Жирний шрифт */
    font-size: 1rem !important; /* **ВІДНОВЛЮЄМО РОЗМІР ШРИФТУ** */
    cursor: default;             /* Немає сенсу клікати на активну */
}

/* --- Стилі для НЕАКТИВНИХ кнопок (сірі стрілки) --- */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled a.page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled a.page-link:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled a.page-link:focus {
    color: #6c757d !important; /* Сірий колір Bootstrap */
    cursor: default !important;
    background: none !important;
    border-color: #dee2e6 !important;
    box-shadow: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled a.page-link::before {
     opacity: 0.6; /* Робимо іконку напівпрозорою */
}

/* --- Наведення на НЕ-активні та НЕ-disabled кнопки --- */
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.active):not(.disabled) a.page-link:hover {
     background-color: #e9ecef !important; /* Світло-сірий фон */
     border-color: #dee2e6 !important;
}

/* --- Іконки Font Awesome через ::before (ТІЛЬКИ для навігаційних кнопок) --- */
.dataTables_wrapper .dataTables_paginate .paginate_button.first a.page-link::before,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous a.page-link::before,
.dataTables_wrapper .dataTables_paginate .paginate_button.next a.page-link::before,
.dataTables_wrapper .dataTables_paginate .paginate_button.last a.page-link::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 1rem !important; /* Розмір іконки */
    line-height: 1;
}

/* Конкретні іконки */
.dataTables_wrapper .dataTables_paginate .paginate_button.first a.page-link::before { content: "\f100"; } /* fa-angle-double-left */
.dataTables_wrapper .dataTables_paginate .paginate_button.previous a.page-link::before { content: "\f104"; } /* fa-angle-left */
.dataTables_wrapper .dataTables_paginate .paginate_button.next a.page-link::before { content: "\f105"; } /* fa-angle-right */
.dataTables_wrapper .dataTables_paginate .paginate_button.last a.page-link::before { content: "\f101"; } /* fa-angle-double-right */

/* --- Приховування зайвих номерів сторінок (ТІЛЬКИ ДЛЯ МОБІЛЬНОЇ ВЕРСІЇ) --- */
#mobile-table_paginate .paginate_button:not(.previous):not(.next):not(.first):not(.last):not(.active),
#table_paginate .paginate_button:not(.previous):not(.next):not(.first):not(.last):not(.active) { /* <-- Додано */
    display: none !important;
}

/* --- Додаткові стилі для випадаючих списків фільтрів --- */

/* Контейнер для групи з випадаючим списком */
.filter-dropdown-group {
    display: inline-flex; /* Вирівнюємо кнопку та хрестик групи */
    align-items: center;
    margin-right: 8px;
    margin-bottom: 5px;
}

/* Налаштування кнопки dropdown */
.filter-dropdown-group .dropdown-toggle {
    font-size: 0.85rem; /* Розмір як у бейджів */
    padding: 0.25em 0.5em;
    background-color: #6c757d; /* Сірий фон для кнопки групи */
    border-color: #6c757d;
    color: white;
}
html.dark-mode .filter-dropdown-group .dropdown-toggle {
     background-color: #5a6268;
     border-color: #5a6268;
     color: var(--text-color);
}


/* Стилі для меню dropdown */
.filter-dropdown-group .dropdown-menu {
    padding: 0.5rem;
    font-size: 0.85rem;
    max-height: 250px; /* Обмеження висоти для довгих списків */
    overflow-y: auto;
}
html.dark-mode .filter-dropdown-group .dropdown-menu {
    background-color: var(--card-bg-color);
    border-color: var(--border-color);
}


/* Елемент списку в dropdown */
.filter-dropdown-group .dropdown-item-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0.5rem; /* Зменшені падінги */
    white-space: normal; /* Дозволяємо перенос тексту */
    color: var(--primary-text);
}
html.dark-mode .filter-dropdown-group .dropdown-item-text {
    color: var(--text-color);
}

.filter-dropdown-group .dropdown-item-text .filter-value-text {
    margin-right: 10px; /* Відступ між текстом і кнопкою */
    word-break: break-word; /* Перенос довгих значень */
}

/* Кнопка видалення в dropdown */
.filter-dropdown-group .dropdown-item-text .remove-filter-btn {
    flex-shrink: 0; /* Щоб кнопка не зменшувалась */
}

/* Кнопка видалення групи поруч з dropdown */
.filter-dropdown-group .remove-group {
    margin-left: 3px;
}

/* Стилізація бейджа-лічильника в кнопці dropdown */
.filter-dropdown-group .dropdown-toggle .badge {
    margin-left: 5px;
    background-color: rgba(0, 0, 0, 0.2); /* Напівпрозорий темний фон */
    color: white;
}
html.dark-mode .filter-dropdown-group .dropdown-toggle .badge {
     background-color: rgba(255, 255, 255, 0.2);
     color: var(--text-color);
}

/* Забезпечуємо, щоб бейджі глобального пошуку виглядали так само */
.filter-badge-group.global-search .filter-badge {
    /* Стилі вже мають бути застосовані з попередніх правил */
}

/* --- Кастомізація розміру Select2 --- */

.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    line-height: inherit; padding-left: 0;
}
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
     height: calc(1.5em + .75rem); top: 0;
}

.select2-container--bootstrap4 .select2-selection__clear {
    margin-top: 0.3rem !important;
}

/* --- ▼▼▼ ПРИХОВУЄМО ВИБРАНІ ЕЛЕМЕНТИ В MULTI-SELECT ▼▼▼ --- */


/* --- Виправлення 'x' у випадаючому списку фільтрів (Desktop) --- */
/*
.filter-dropdown-group .dropdown-menu .btn-close {
    background-image: none !important;
    content: "\00d7";
    font-size: 1.25rem;
    font-weight: bold;
    color: #dc3545;
    opacity: 0.7;
    padding: 0 0.25rem;
    margin: 0;
    line-height: 1;
    text-shadow: none;
    border: none;
    background-color: transparent;
    flex-shrink: 0;
}
.filter-dropdown-group .dropdown-menu .btn-close:hover {
    color: #dc3545;
    opacity: 1;
}
*/
/* --- Кінець старого стилю 'x' --- */


/* --- Виправлення для тосту (SMS), який перекриває хедер на мобільних --- */
@media (max-width: 991.98px) {
    /*
     * 1. Переміщуємо тост у НИЖНІЙ правий кут,
     * щоб він не заважав хедеру.
     */
    div[aria-live="polite"][aria-atomic="true"][style*="position: fixed"] {
        top: auto !important; /* Скидаємо inline-стиль 'top: 20px' */
        bottom: 20px !important; /* Встановлюємо нову позицію знизу */
        /* 'right: 20px' з inline-стилю продовжує працювати */
    }

    /*
     * 2. Залишаємо виправлення ширини з минулого разу,
     * щоб він не був занадто широким.
     */
    #newMessageToast {
        width: auto;
        max-width: 280px;
    }
}

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

/* * Забороняємо Bootstrap ховати скролбар і додавати padding.
 * Це повністю прибирає причину "стрибка".
 * Побічний ефект: сторінка залишається прокручуваною під модалкою.
 */
body.modal-open {
    overflow: auto !important;
    padding-right: 0 !important;
}
/* --- ▲▲▲ КІНЕЦЬ ВИРІШЕННЯ ▲▲▲ --- */

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

/* 1. Застосовуємо стилі мобільного контейнера до десктопного */
.filter-dropdown-group,
.filter-group-wrapper { /* <-- Додано .filter-group-wrapper */
    display: inline-flex; /* <-- Змінено на inline-flex для обох */
    align-items: center;
    margin-right: 8px; /* <-- Уніфіковано відступ */
    margin-bottom: 5px;
    position: relative; /* Залишаємо для кнопки .clear-filter-group */
}

/* 2. Застосовуємо стилі мобільної кнопки до десктопної */
.filter-dropdown-group .dropdown-toggle,
.filter-group-wrapper .dropdown-toggle {
    font-size: 0.85rem;
    padding: 0.25em 0.5em;
    background-color: var(--ukraine-blue); /* <-- Має бути синій */
    border-color: var(--ukraine-blue);     /* <-- Має бути синій */
    color: white;
}

/* 3. Застосовуємо стилі мобільного випадаючого меню до десктопного */
.filter-dropdown-group .dropdown-menu,
.filter-group-wrapper .dropdown-menu { /* <-- Додано .filter-group-wrapper */
    padding: 0.5rem;
    font-size: 0.85rem;
    max-height: 250px;
    overflow-y: auto;
}

/* 4. Застосовуємо стилі мобільного пункту меню до десктопного */
.filter-dropdown-group .dropdown-item-text,
.filter-group-wrapper .dropdown-item-text { /* <-- Додано .filter-group-wrapper */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0.5rem;
    white-space: normal;
    color: var(--primary-text);
}

.filter-dropdown-group .dropdown-item-text .filter-value-text,
.filter-group-wrapper .dropdown-item-text .filter-value-text { /* <-- Додано */
    margin-right: 10px;
    word-break: break-word;
}

/* 5. Застосовуємо стилі мобільного бейджа-лічильника до десктопного */
.filter-dropdown-group .dropdown-toggle .badge,
.filter-group-wrapper .dropdown-toggle .badge { /* <-- Додано .filter-group-wrapper */
    margin-left: 5px;
    background-color: rgba(0, 0, 0, 0.2);
    color: white;
}

/* 6. (ВАЖЛИВО) Перевизначаємо стиль десктопної кнопки "Очистити групу" */
/* Це скидає стиль круглої кнопки і робить її схожою на мобільну '×' */
.clear-filter-group,
.clear-global-search {
    /* Скидання позиціонування та розміру */
    position: static !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;

    /* Скидання Bootstrap 4 .btn-close (прибираємо SVG) */
    background: none !important;
    text-shadow: none !important;
    opacity: 0.7 !important;

    /* Встановлення стилю (ТЕПЕР ВЖЕ ІСНУЮЧОГО '×') */
    /* 'content' та 'font-family' рядки видалено */
    font-size: 1.25rem !important; /* Робимо 'x' видимим */
    font-weight: bold;
    color: #dc3545 !important; /* Червоний колір */
    padding: 0 0.25rem !important;
    margin-left: 3px !important; /* Відступ як у мобільної версії */
    line-height: 1;
}

/* 7. Застосовуємо стилі червоного 'x' (вже існує) до десктопного меню */
.filter-dropdown-group .dropdown-menu .btn-close,
div#filters-info .filter-group-wrapper .dropdown-menu li span.dropdown-item-text button.btn-close {
    background-image: none !important;
    content: "\00d7" !important; /* <-- ВАЖЛИВО: Додаємо сам 'x' */
    font-size: 1.25rem;
    font-weight: bold;
    color: #dc3545;
    opacity: 0.7;
    padding: 0 0.25rem;
    margin: 0;
    line-height: 1;
    text-shadow: none;
    border: none;
    background-color: transparent;
    flex-shrink: 0;

    /* Скидання стилів, які можуть прийти з BS4 для <button> */
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    -webkit-appearance: none; /* Для iOS */
}

.filter-dropdown-group .dropdown-menu .btn-close:hover,
div#filters-info .filter-group-wrapper .dropdown-menu li span.dropdown-item-text button.btn-close:hover {
    color: #dc3545;
    opacity: 1;
}

/* --- Стилізація Глобального Пошуку (Desktop) --- */
#global-search-container {
    /* 1. "Пофарбувати" - додаємо жовтий фон */
    background-color: #fffde7; /* Світло-жовтий */
    border: 1px solid #e6db55; /* Жовта рамка */
    border-radius: 0.25rem;
    padding: 0.5rem 1rem;

    /* 2. "Не широко" - видалено flex-grow та margin-left */
}

/* 3. Виправлення для input (щоб він став в один рядок з міткою) */
#global-search-container #global-search-input.form-control {
    width: auto;      /* Скидаємо 'width: 100%' від .form-control */
    flex-grow: 1;     /* Змушуємо input заповнити решту місця */
}



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

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

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

/* --- ▲▲▲ КІНЕЦЬ: Фінальне виправлення Select2 --- */

#mobile-table_paginate .ellipsis,
#table_paginate .ellipsis {
    display: none !important;
}

.modal-footer {
    border-top: none;
}

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

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

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

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

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

/* Стиль для десктопної версії (PC) */
header.navbar-light .navbar-nav .nav-link.active {
    color: var(--ukraine-blue) !important; /* Яскравий синій колір */
    font-weight: 700; /* Робимо жирним */
}

/* Стиль для мобільного меню (бургер) */
@media (max-width: 991.98px) {
    .navbar-collapse .navbar-nav .nav-link.active {
        /* Додаємо легкий фон, щоб виділити в списку */
        background-color: rgba(0, 87, 184, 0.1);
        border-radius: 5px;
        color: var(--ukraine-blue);
        font-weight: 600;
    }
}

.flatpickr-current-month .numInputWrapper span.arrowUp,
.flatpickr-current-month .numInputWrapper span.arrowDown {
    opacity: 1 !important;
}

/* Опціонально: можна додати легкий фон при наведенні, щоб було зрозуміліше, що це кнопки */
.flatpickr-current-month .numInputWrapper span.arrowUp:hover,
.flatpickr-current-month .numInputWrapper span.arrowDown:hover {
    background: rgba(0,0,0,0.1);
}

@media (max-width: 991.98px) {
    /* Розширюємо зону натискання */
    .flatpickr-current-month .numInputWrapper span.arrowUp,
    .flatpickr-current-month .numInputWrapper span.arrowDown {
        width: 25px !important; /* Робимо зону ширшою (стандартно близько 14px) */
        opacity: 1 !important;  /* Гарантуємо видимість на мобільних */
    }

    /* Збільшуємо розмір верхньої стрілки */
    .flatpickr-current-month .numInputWrapper span.arrowUp::after {
        border-width: 6px !important; /* Стандартний розмір ~4px */
        top: 30% !important;          /* Коригуємо позицію по вертикалі */
        left: calc(50% - 6px) !important; /* Центруємо по горизонталі */
    }

    /* Збільшуємо розмір нижньої стрілки */
    .flatpickr-current-month .numInputWrapper span.arrowDown::after {
        border-width: 6px !important;
        top: 60% !important;          /* Коригуємо позицію по вертикалі */
        left: calc(50% - 6px) !important; /* Центруємо по горизонталі */
    }
}

/* --- Виправлення накладання стрілок на рік в календарі --- */
.flatpickr-current-month .numInputWrapper {
    width: 75px !important; /* Збільшуємо ширину контейнера з роком */
}

.flatpickr-current-month .numInputWrapper input.cur-year {
    padding-right: 20px !important; /* Додаємо відступ справа для тексту, звільняючи місце стрілкам */
}

.flatpickr-current-month .numInputWrapper span.arrowUp,
.flatpickr-current-month .numInputWrapper span.arrowDown {
    right: 0 !important; /* Гарантовано притискаємо стрілки до правого краю */
}

.flatpickr-current-month .numInputWrapper span.arrowUp,
.flatpickr-current-month .numInputWrapper span.arrowDown {
    border: none !important;
}

.highlight-complainant {
    background-color: #ffebee; /* Світло-червоний для Скаржника */
    color: #c62828;
    font-weight: bold;
    padding: 0 2px;
    border-radius: 2px;
}

.highlight-customer {
    background-color: #e3f2fd; /* Світло-синій для Замовника */
    color: #1565c0;
    font-weight: bold;
    padding: 0 2px;
    border-radius: 2px;
}

.highlight-board {
    background-color: #e8f5e9; /* Світло-зелений для Колегії */
    color: #2e7d32;
    font-weight: bold;
    padding: 0 2px;
    border-radius: 2px;
}

/* Стиль для кнопок АМКУ/ДАСУ в хедері */
.nav-item.nav-link.nav-btn-yellow-outline {
    border: 2px solid var(--ukraine-yellow) !important;
    border-radius: 8px;
    padding: 5px 15px !important;
    margin-top: 2px;
    margin-bottom: 2px;
    color: var(--ukraine-blue) !important;
    font-weight: 600 !important;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-item.nav-link.nav-btn-yellow-outline:hover {
    background-color: var(--ukraine-yellow) !important;
    color: #212529 !important; /* Темний текст на жовтому фоні */
    text-decoration: none;
}

/* Адаптація для мобільного меню (щоб не розтягувались на весь екран) */
@media (max-width: 991.98px) {
    .nav-item.nav-link.nav-btn-yellow-outline {
        display: inline-flex;
        margin: 10px auto;
        min-width: 200px;
    }
}

/* --- Стилі для блоку помилки 403 (Ліміт вичерпано) --- */
/* --- Виправлення ширини блоку лімітів --- */
.limit-exceeded-container {
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px; /* Трохи більше заокруглення */
    padding: 4rem 2rem;  /* Більше відступів всередині для "повітря" */
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Більша тінь для ефекту "спливаючого вікна" */

    /* --- РОЗМІРИ ТА ЦЕНТРУВАННЯ --- */
    display: block;          /* Гарантуємо блочне відображення */
    width: 80% !important;   /* Займає 80% ширини контейнера */
    min-width: 700px;        /* Не менше 700px на десктопі (вирішує вашу проблему) */
    max-width: 1000px;       /* Обмеження, щоб не було на весь ультра-широкий монітор */
    margin: 3rem auto !important; /* Центрування по горизонталі та відступи зверху/знизу */
}

.limit-icon-circle {
    width: 90px;
    height: 90px;
    background-color: rgba(255, 193, 7, 0.15);
    color: var(--warning-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem auto;
    font-size: 2.5rem; /* Трохи більша іконка */
}

.limit-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 2.5rem;
}

/* --- Адаптація для мобільних (щоб не ламалося на телефоні) --- */
@media (max-width: 768px) {
    .limit-exceeded-container {
        width: 95% !important; /* На мобільному майже на всю ширину */
        min-width: auto;       /* Скидаємо фіксовану мінімальну ширину */
        padding: 2rem 1rem;
        margin: 1rem auto !important;
    }

    .limit-actions {
        flex-direction: column;
        gap: 10px;
    }

    .limit-actions .btn {
        width: 100%;
    }
}

/* --- Темна тема (оновлена для нових розмірів) --- */
html.dark-mode .limit-exceeded-container {
    background-color: var(--card-bg-color);
    border-color: #555;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* --- Виправлення клікабельності хрестиків --- */
.filter-dropdown-group,
.filter-group-wrapper {
    z-index: 1; /* Базовий рівень */
}

/* Гарантуємо, що кнопка видалення групи поверх інших елементів */
.clear-filter-group,
.clear-global-search {
    cursor: pointer !important;
    position: relative; /* Щоб z-index спрацював */
    z-index: 10;
}

/* Гарантуємо, що кнопка видалення елемента в меню клікабельна */
.dropdown-item-text .btn-close {
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* Стиль для контейнера з паролем */
.password-field-container {
    position: relative;
}

/* Кнопка перемикання */
.password-toggle-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #6c757d;
    z-index: 10;
    padding: 5px;
}

.password-toggle-btn:hover {
    color: #0057B8;
}

/* Відступ у полі, щоб текст не налізав на іконку */
.password-field-container input {
    padding-right: 40px;
}

/* --- ПРИХОВУВАННЯ ВИБРАНИХ ЕЛЕМЕНТІВ (TAGS) --- */

/* --- ФІНАЛЬНИЙ СТИЛЬ SELECT2 (ВИРІВНЮВАННЯ ЗЛІВА) --- */

/* 1. КОНТЕЙНЕР */
.select2-container--bootstrap4 .select2-selection--multiple {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

/* 2. ПОЛЕ ВВОДУ: Строго зліва + розтягування */
.select2-container--bootstrap4 .select2-selection--multiple .select2-search__field {
    height: 36px !important;
    line-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-grow: 1; /* Займає вільне місце */
    width: auto !important; /* Дозволяємо браузеру керувати шириною */
    min-width: 50px !important;
    text-align: left !important; /* <--- ТЕКСТ ЗАВЖДИ ЗЛІВА */
}

/* 3. Коли йде друк (клас додається через JS), розтягуємо інпут на 100% */
.select2-container--bootstrap4 .select2-selection--multiple.typing-in-progress .select2-search__field {
    width: 100% !important;
}

/* 4. НАТИВНИЙ ПЛЕЙСХОЛДЕР */
.select2-container--bootstrap4 .select2-selection--multiple .select2-search__field::placeholder {
    color: transparent !important;
}

/* 5. КОНТЕЙНЕР ТЕКСТУ: Вирівнювання по лівому краю */
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* <--- ВСЕ ЗЛІВА */
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    max-width: 100%;
    flex-grow: 0; /* Не розтягується більше ніж текст */
}

/* 6. НАШ КАСТОМНИЙ ТЕКСТ (::before) - ВИПРАВЛЕНО ДЛЯ IOS */
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered::before {
    content: attr(data-placeholder);
    display: inline-block !important; /* Важливо для роботи ширини */
    margin-right: 8px;
    white-space: nowrap !important;
    text-overflow: ellipsis !important; /* Три крапки в кінці */
    overflow: hidden !important; /* Обрізаємо зайве */
    color: #6c757d;
    font-weight: 400;

    /* Обмеження ширини, щоб текст не вилазив за рамку */
    max-width: 65vw; /* Займає не більше 65% ширини екрану */
    vertical-align: middle;
}

/* Додатково гарантуємо, що контейнер не дозволяє вилазити вмісту */
.select2-container--bootstrap4 .select2-selection--multiple {
    overflow: hidden !important;
}

/* 7. ЛОГІКА ДЛЯ ДРУКУ: Ховаємо текст, коли йде введення */
.select2-container--bootstrap4 .select2-selection--multiple.typing-in-progress .select2-selection__rendered::before {
    display: none !important;
}
/* Коли йде друк, ховаємо сам контейнер рендерингу, щоб інпут зайняв все місце */
.select2-container--bootstrap4 .select2-selection--multiple.typing-in-progress .select2-selection__rendered {
    display: none !important;
}

/* 8. ПРИХОВУВАННЯ "ЧІПСІВ" */
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
    display: none !important;
}