/* interactive-boiler-table/boiler-styles.css */

/* Загальний контейнер */
.boiler-errors-wrapper {
    max-width: 100%; 
    margin: 20px auto;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    background-color: #f8f9fa; /* Трохи світліший фон */
    padding: 15px; 
    color: #333;
    border-radius: 8px;
    /* Встановлюємо розмір шрифту відносно батьківського елемента (контенту сторінки) */
    /* Це допоможе успадкувати загальний масштаб шрифтів вашої теми */
    font-size: 1em; /* Або спробуйте 0.95em, якщо текст всередині блоку має бути трохи меншим за основний */
    line-height: 1.6; 
}

.boiler-errors-wrapper * {
    box-sizing: border-box;
}

/* Стилі для форми фільтрів */
.boiler-errors-wrapper .filter-form {
    background: white;
    padding: 15px; 
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
    margin-bottom: 20px; 
}

.boiler-errors-wrapper .filter-grid-two-columns {
    display: grid;
    grid-template-columns: 1fr; 
    gap: 15px; 
}

@media (min-width: 601px) { /* Для планшетів і десктопів - два стовпці */
    .boiler-errors-wrapper .filter-grid-two-columns {
        grid-template-columns: 1fr 1fr;
    }
}

.boiler-errors-wrapper .filter-item {
    display: flex;
    flex-direction: column;
}

.boiler-errors-wrapper .filter-item label {
    margin-bottom: 5px; 
    font-weight: 500;
    color: #454545; /* Трохи світліший текст лейбла */
    font-size: 0.9em; /* Трохи менше базового (успадкованого від .boiler-errors-wrapper) */
}

/* Стилізація оригінальних селектів (вони можуть бути приховані Chosen) */
.boiler-errors-wrapper #brand-select,
.boiler-errors-wrapper #error-code-select,
.boiler-errors-wrapper #brand-select-ru,
.boiler-errors-wrapper #error-code-select-ru {
    display: block;
    width: 100%;
    padding: 10px 12px; /* Збільшив падінг для кращого вигляду */
    border: 1px solid #ced4da; /* Стандартний бордер Bootstrap */
    border-radius: 0.375rem; /* 6px */
    background-color: white;
    /* Шрифт для ОРИГІНАЛЬНОГО селекта, який може бути прихований */
    font-size: 1em !important; /* Успадковує від .boiler-errors-wrapper */
    line-height: 1.5 !important;
    color: #212529; /* Темний текст */
}

/* Стилізація елементів Chosen (або аналога) */
.boiler-errors-wrapper .chosen-container-single .chosen-single {
    font-size: 1em !important; /* Має відповідати font-size: 1em для .boiler-errors-wrapper */
    line-height: 1.5 !important; /* Відповідає селекту */
    color: #212529 !important;
    padding: 7px 12px !important; /* Підібрати, щоб висота була адекватною */
    height: auto !important; 
    min-height: 40px; /* Мінімальна висота, щоб виглядав як інші поля вводу */
    border-radius: 0.375rem !important;
    border: 1px solid #ced4da !important;
    background: white !important; 
    box-shadow: none !important;
    display: flex !important; /* Для вертикального центрування тексту */
    align-items: center !important; /* Для вертикального центрування тексту */
}

.boiler-errors-wrapper .chosen-container-single .chosen-single span {
    /* line-height тут вже не потрібен, бо батько flex */
    /* color успадковується або встановлюється Chosen */
    margin-right: 20px; /* Залишаємо місце для стрілки */
}

.boiler-errors-wrapper .chosen-container-single .chosen-single div b {
    background-position: 0px 7px !important; /* Трохи відцентрувати стрілку Chosen */
}
.boiler-errors-wrapper .chosen-container-active.chosen-with-drop .chosen-single div b {
    background-position: -18px 7px !important; /* Стрілка при відкритті */
}


.boiler-errors-wrapper .chosen-container .chosen-drop {
    border-radius: 0 0 0.375rem 0.375rem !important;
    border-color: #ced4da !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.07) !important;
    margin-top: -1px; /* Щоб список прилягав до поля */
}

.boiler-errors-wrapper .chosen-container .chosen-results li {
    font-size: 1em !important; /* Такий самий, як у вибраному елементі */
    line-height: 1.5 !important;
    padding: 8px 12px !important;
    color: #212529;
}
.boiler-errors-wrapper .chosen-container .chosen-results li.highlighted {
    background-color: #007bff !important; /* Колір при наведенні/виборі */
    color: white !important;
}


.boiler-errors-wrapper .chosen-container-single .chosen-search input[type="text"] {
    font-size: 0.95em !important; /* Трохи менший для поля пошуку */
    padding: 6px 8px !important;
}


.boiler-errors-wrapper #error-code-select:disabled,
.boiler-errors-wrapper #error-code-select-ru:disabled {
    /* Стилі для оригінального селекта, якщо він видимий */
    background-color: #e9ecef; 
    cursor: not-allowed;
    opacity: 0.7;
}
.boiler-errors-wrapper .chosen-container-disabled .chosen-single {
    background-color: #e9ecef !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}


/* Таблиця */
.boiler-errors-wrapper .table-wrapper {
    background: white;
    border-radius: 8px;
    overflow-x: auto; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
    margin-bottom: 20px;
    -webkit-overflow-scrolling: touch;
}

.boiler-errors-wrapper table {
    width: 100%; 
    min-width: 700px; /* Для десктопу можна і більше, напр. 800px */
    border-collapse: collapse;
    font-size: 1em !important; /* Успадковує 1em від .boiler-errors-wrapper */
}

.boiler-errors-wrapper thead {
    background-color: #eef1f5;
    position: sticky; 
    top: 0; 
    z-index: 10;
}

.boiler-errors-wrapper th {
    padding: 10px 12px; /* Зменшив для мобільних, можна повернути 12px 15px для десктопу */
    text-align: left;
    font-weight: 600;
    color: #2c3e50;
    border-bottom: 2px solid #dee2e6;
    white-space: nowrap;
    background-color: #eef1f5;
    font-size: 1em !important; /* Узгоджено з таблицею */
}

.boiler-errors-wrapper td {
    padding: 10px 12px; 
    border-bottom: 1px solid #e0e0e0;
    vertical-align: top;
    font-size: 1em !important; /* Узгоджено з таблицею */
}

.boiler-errors-wrapper .brand-column {
    font-weight: bold;
    min-width: 130px; 
    white-space: nowrap;
    color: #34495e;
}

.boiler-errors-wrapper th:nth-child(2), /* Код помилки */
.boiler-errors-wrapper td:nth-child(2) { 
    min-width: 100px; 
    white-space: nowrap;
}

.boiler-errors-wrapper tbody tr:nth-child(even) {
    background-color: #fdfdfd; 
}

.boiler-errors-wrapper tbody tr:hover {
    background-color: #e8f4f8 !important;
}

.boiler-errors-wrapper #boiler-errors-table td.no-data-message,
.boiler-errors-wrapper #boiler-errors-table-ru td.no-data-message {
    text-align: center;
    padding: 20px;
    color: #777;
    font-style: italic;
    white-space: normal; 
    font-size: 1em !important; 
}

/* Адаптація для мобільних */
@media (max-width: 767px) { /* Стандартна точка для планшетів у портретній орієнтації та мобільних */
    .boiler-errors-wrapper {
        padding: 10px;
        font-size: 0.95em; /* Базовий шрифт для мобільних трохи менший від десктопного батьківського */
    }
    .boiler-errors-wrapper .filter-form {
        padding: 10px;
    }
    .boiler-errors-wrapper table {
        min-width: 550px; /* Зменшуємо мінімальну ширину для мобільних */
    }
    .boiler-errors-wrapper th,
    .boiler-errors-wrapper td {
        padding: 8px 10px;
    }
    .boiler-errors-wrapper .brand-column {
        min-width: 110px;
    }
    .boiler-errors-wrapper th:nth-child(2), 
    .boiler-errors-wrapper td:nth-child(2) { /* Код помилки */
        min-width: 90px; 
    }
}

@media (max-width: 480px) { /* Дуже маленькі екрани */
    .boiler-errors-wrapper {
        font-size: 0.9em; /* Ще трохи менше */
    }
    .boiler-errors-wrapper .filter-item label {
        font-size: 0.9em; /* Відносно 0.9em основного блоку */
    }
    .boiler-errors-wrapper #brand-select,
    .boiler-errors-wrapper #error-code-select,
    .boiler-errors-wrapper #brand-select-ru,
    .boiler-errors-wrapper #error-code-select-ru {
        padding: 8px 10px;
        font-size: 1em !important; /* Успадковує 0.9em від .boiler-errors-wrapper */
    }
    .boiler-errors-wrapper table {
        min-width: 450px; 
    }
     .boiler-errors-wrapper .brand-column {
        min-width: 90px;
    }
    .boiler-errors-wrapper th:nth-child(2),
    .boiler-errors-wrapper td:nth-child(2) { /* Код помилки */
        min-width: 70px; 
    }
}