/* =================================================================== */
/*        2. СПІЛЬНІ СТИЛІ ДЛЯ ТАБЛИЦІ (ЕКРАН)                        */
/* =================================================================== */

/* Загальна обгортка для таблиць (КТП та ТЗ) */
.data-table {
    border: 1px solid #000;
}

/* Шапка таблиці */
.table-header {
    background-color: #f8f9fa;
    font-weight: bold;
    border-bottom: 1px solid #000;
}

/* Рядок даних */
.responsive-table-row {
    border-bottom: 1px solid #000;
}
/* Прибираємо подвійну рамку внизу останнього рядка */
.data-table > div:last-child > .responsive-table-row:last-child,
.data-table > .responsive-table-row:last-child {
    border-bottom: none; 
}

/* Спільні стилі для всіх комірок */
.table-cell {
    padding: 8px;
    word-break: break-word;
    display: flex;
    align-items: center; /* Вертикальне вирівнювання */
}

/* Бокові межі між комірками (тільки для десктопу) */
@media (min-width: 992px) {
    .table-cell {
        border-right: 1px solid #000;
    }
    .table-cell:last-child {
        border-right: none;
    }
    
    /* Вирівнювання на десктопі */
    .table-cell.text-center {
        justify-content: center;
        text-align: center;
    }
    .table-cell.text-start {
        justify-content: flex-start;
        text-align: left;
    }
    .table-header .table-cell {
        justify-content: center;
        text-align: center;
    }
}


/* =================================================================== */
/*        3. АДАПТИВНІ СТИЛІ ДЛЯ ТАБЛИЦІ (ОНОВЛЕНО)                   */
/* =================================================================== */
@media (max-width: 991.98px) {
    /* Ховаємо десктопну шапку */
    .data-table .table-header {
        display: none;
    }

    /* Кожен рядок стає схожим на "картку" */
    .data-table .responsive-table-row {
        border-bottom: 2px solid #000; /* Робимо жирніший розділювач між "картками" */
    }
     .data-table > div:last-child > .responsive-table-row:last-child,
    .data-table > .responsive-table-row:last-child {
        border-bottom: none; 
    }

    /* Кожна комірка стає блоком на всю ширину */
    .data-table .table-cell {
        display: block; /* Змінюємо flex на block */
        width: 100% !important; /* Займає всю ширину */
        text-align: center; /* <<< ЦЕНТРУЄМО ДАНІ */
        padding: 8px;
        padding-top: 28px; /* Робимо місце зверху для заголовка */
        position: relative; /* Необхідно для позиціонування псевдо-елемента */
        border-bottom: 1px dashed #ccc; /* Розділювач між полями всередині картки */
        min-height: 55px; /* Мінімальна висота для естетики */
    }

    /* Прибираємо нижню межу в останньої комірки "картки" */
    .data-table .responsive-table-row .table-cell:last-child {
        border-bottom: none;
    }

    /* Створюємо мобільний заголовок з атрибута data-label */
    .data-table .table-cell::before {
        content: attr(data-label); /* Беремо текст з атрибута */
        font-weight: bold;
        color: #495057;
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%); /* <<< ЦЕНТРУЄМО ЗАГОЛОВОК */
        font-size: 0.85em;
        text-transform: uppercase;
    }
    
    /* Якщо в рядку лише одне повідомлення, як "не знайдено" */
    .data-table .table-cell.col-12::before {
        display: none; /* Ховаємо псевдо-заголовок, він тут не потрібен */
    }
    .data-table .table-cell.col-12 {
        padding-top: 8px; /* Повертаємо нормальний відступ */
    }
}


/* =================================================================== */
/*             4. СТИЛІ ДЛЯ ДРУКУ (ОНОВЛЕНО ДЛЯ ПОЛІВ)                */
/* =================================================================== */
@media print {
    @page {
        size: A4;
        /* 
           ОСЬ ТУТ КЕРУВАННЯ ПОЛЯМИ СТОРІНКИ 
           Порядок: верхнє, праве, нижнє, ліве поле.
        */
        margin: 1cm 1.5cm 1.5cm 2.5cm !important; 
    }
    
    body {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 10pt;
        background: #fff !important;
        width: auto !important;
        min-width: 0 !important;
    }

    .print {
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
        width: 100%;
    }
    
    .d-print-none,
    nav,
    footer {
        display: none !important;
    }
    
    /* Ховаємо мобільні заголовки при друці */
    .table-cell::before,
    .table-cell::after {
        content: none !important;
        display: none !important;
    }
    
    /* Повертаємо табличний вигляд для друку */
    .table-header {
        display: flex !important; /* Показуємо шапку */
    }

    .table-cell {
        width: auto !important; 
        padding: 5px !important;
        display: flex !important;
        align-items: center !important; /* Вирівнювання по центру вертикалі */
        text-align: center !important;   /* Вирівнювання по центру горизонталі */
        justify-content: center !important; /* Центрування контенту всередині flex */
        border-bottom: none !important;
        position: static !important;
        min-height: auto !important;
        border-right: 1px solid #000 !important;
    }
    /* Для комірок, де текст має бути зліва */
    .table-cell.text-start { 
        justify-content: flex-start !important; 
        text-align: left !important; 
    }

    .table-cell:last-child {
        border-right: none !important;
    }
    
    .row, [class*="col-"] { flex-shrink: 0 !important; }
    
    /* Ширина колонок для КТП */
    .ktp-table .col-1 { width: 8% !important; }
    .ktp-table .col-6 { width: 54% !important; }
    .ktp-table .col-3 { width: 20% !important; }
    .ktp-table .col-2 { width: 18% !important; }
    
    /* Ширина колонок для ТЗ */
    .tz-table .col-2:first-of-type { width: 15% !important; }
    .tz-table .col-6 { width: 45% !important; }
    .tz-table .tz-col-termin { width: 25% !important; }
    .tz-table .tz-col-vidmitka { width: 15% !important; }
}

/* =================================================================== */
/*        5. ВИПРАВЛЕННЯ ДЛЯ ФОРМ НА МОБІЛЬНИХ ПРИСТРОЯХ            */
/* =================================================================== */

/* 
   Це правило змушує випадаючі списки (<select>) всередині ваших форм
   не виходити за межі контейнера на будь-якій ширині екрану.
*/
.comments_auto .form-select {
    max-width: 100%;       /* Гарантує, що елемент не буде ширшим за батьківський контейнер */
    overflow: hidden;          /* Ховає будь-який вміст, що виходить за межі */
    text-overflow: ellipsis; /* Додає три крапки (...) до тексту, який не вміщується */
}


/* =================================================================== */
/*        6. ВИПРАВЛЕННЯ АДАПТИВНОСТІ ДЛЯ ТАБЛИЦЬ СТАТИСТИКИ        */
/* =================================================================== */

@media (max-width: 576px) {
    /* Робимо текст в комірках таблиць статистики меншим */
    .tab-content .table td,
    .tab-content .table th {
        font-size: 0.85rem !important; /* Зменшуємо шрифт (важливо, щоб перебити fs-5) */
        padding: 0.5rem 0.25rem;       /* Зменшуємо бокові відступи */
        vertical-align: middle;        /* Центруємо по вертикалі */
    }

    /* Можна також трохи зменшити шрифт у верхньому блоці */
    .card-body .list-group-item {
        font-size: 1rem !important; /* Робимо текст трохи меншим за fs-5 */
    }
    .card-body .list-group-item .badge {
        font-size: 1.1rem !important; /* І бейджі теж */
    }
    
    /* Зробимо текст кнопок-вкладок трохи меншим */
    .nav-tabs .nav-link {
        font-size: 0.9rem;
        padding: 0.5rem 0.4rem;
    }
}


/* ================================================== */
/*        7. ФІНАЛЬНИЙ ЧИСТИЙ КОД ДЛЯ ВКЛАДОК       */
/* ================================================== */

/* Базовий контейнер для вкладок, додає нижню лінію */
.nav-tabs {
    border-bottom: 1px solid #dee2e6;
}

/* 
   Стиль для ВСІХ кнопок-вкладок (базовий стан)
   Це те, як виглядають неактивні вкладки.
*/
.nav-tabs .nav-link {
    background-color: #f8f9fa; /* Світло-сірий фон */
    color: #6c757d;           /* Приглушений сірий текст */
    border: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6; 
    margin-bottom: -1px; /* Компенсація, щоб вкладки "стояли" на нижній лінії */
    margin-right: 2px;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* 
   Стиль при наведенні курсору на НЕАКТИВНУ вкладку.
   ЦЕ ПРАЦЮЄ ТІЛЬКИ НА ДЕСКТОПІ!
*/
.nav-tabs .nav-link:not(.active):hover {
    background-color: #0d6efd; /* Яскраво-синій фон */
    color: #ffffff;           /* Білий текст */
    border-color: #0d6efd;
}

/* 
   Стиль для АКТИВНОЇ вкладки (після кліку).
   Це те, що ви бачите і на десктопі, і на мобільних після вибору вкладки.
*/
.nav-tabs .nav-link.active {
    background-color: #ffffff;    /* Білий фон */
    color: #0d6efd;           /* Синій текст */
    font-weight: 600;         /* Жирніший текст */
    border-color: #dee2e6 #dee2e6 #ffffff; /* Рамка зливається з контентом */
}

/* Прибираємо стандартну синю тінь при фокусі (клік/Tab) */
.nav-tabs .nav-link:focus {
    box-shadow: none;
}

/* =================================================================== */
/*   8. АДАПТАЦІЯ ТАБЛИЦІ СТАТИСТИКИ ПО МІСЯЦЯХ (ВИПРАВЛЕНО)        */
/* =================================================================== */

/* 
  Ці правила будуть застосовуватися ТІЛЬКИ на екранах, 
  вужчих за 768px.
*/
@media (max-width: 767.98px) {
    
    /* 1. Примусово робимо таблицю фіксованою, щоб керувати шириною */
    .stats-monthly-table {
        table-layout: fixed;
        width: 100%;
    }

    /* 2. Задаємо ширину для кожної колонки індивідуально */
    .stats-monthly-table .col-month           { width: 28%; } /* Місяць */
    .stats-monthly-table th:nth-child(2),
    .stats-monthly-table td:nth-child(2)      { width: 25%; } /* Приписів */
    .stats-monthly-table th:nth-child(3),
    .stats-monthly-table td:nth-child(3)      { width: 29%; } /* Перевірено ТЗ */
    .stats-monthly-table th:nth-child(4),
    .stats-monthly-table td:nth-child(4)      { width: 18%; } /* Порушень */

    /* 3. (ВАЖЛИВЕ ВИПРАВЛЕННЯ) Додаємо правило переносу для ВСІХ комірок */
    /* Це змусить текст, який не влазить, переноситись на новий рядок, 
       а не вилазити за межі комірки. */
    .stats-monthly-table th,
    .stats-monthly-table td {
        overflow-wrap: break-word; /* Сучасний стандарт */
        word-wrap: break-word;     /* Старіша версія для сумісності */
    }

    /* 4. Додатково стилізуємо заголовки для кращої читабельності */
    .stats-monthly-table th {
        font-size: 0.8rem;
        padding: 0.5rem 0.2rem;
        vertical-align: middle;
        line-height: 1.2;
    }
}


/* =================================================================== */
/*   12. ФІНАЛЬНА СТИЛІЗАЦІЯ SELECT2 (КУЛЕНЕПРОБИВНА ВЕРСІЯ)       */
/* =================================================================== */

/* Вибираємо контейнер для МНОЖИННОГО вибору, оскільки він має свою структуру */
.select2-container--bootstrap-5 .select2-selection--multiple {
    /* 1. Мінімальна висота: Робимо її ідентичною до .form-control.
       Використання min-height дозволяє контейнеру рости, коли додаються інспектори. */
    min-height: calc(1.5em + .75rem + 2px);

    /* 2. Вертикальне вирівнювання: Ключове правило для красивого вигляду.
       Робить так, щоб текст-підказка був ідеально по центру. */
    display: flex;
    align-items: center;

    /* 3. Відступи: Трохи коригуємо, щоб відповідати .form-control */
    padding: .375rem .75rem;

    /* 4. Шрифт: Гарантуємо, що розмір шрифту такий самий, як у всіх полів */
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;

    /* 5. Рамка: Переконуємося, що колір рамки стандартний */
    border: 1px solid var(--bs-border-color, #dee2e6);
}

/* Вибираємо контейнер вибору, коли він активний (у фокусі) */
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .25);
}

/* Стилізуємо сам текст-підказку ("Натисніть, щоб обрати...") */
.select2-container--bootstrap-5 .select2-selection__placeholder {
    color: #6c757d;
}

/* Стилізуємо поле пошуку, яке з'являється всередині */
.select2-container--bootstrap-5 .select2-search--inline .select2-search__field {
    /* Прибираємо зайві відступи, щоб поле пошуку не зсувало все вниз */
    margin-top: 0;
    padding: 0;
    line-height: 1.5; /* Висота рядка як у основного тексту */
}

/* Коригуємо вигляд обраних елементів ("тегів") */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    /* Робимо теги трохи меншими і з меншими відступами для компактності */
    margin-top: 0.2rem;
    padding: 0.1rem 0.5rem;
}


/* НАФТОГАЗ і Укргазвидобування*/
.company-name-wrapper {
    display: inline-block; /* Щоб ширина дорівнювала контенту */
    text-align: center;    /* Центруємо нижній рядок */
    line-height: 1.2;
}
.company-name--top {
    display: flex;                  /* Включаємо Flexbox */
    justify-content: space-between; /* Рівномірно розподіляємо літери по всій ширині */
    width: 100%;                    /* Займаємо всю ширину батьківського блоку */
}