/* Основний стиль таблиці */
.table {
    width: 100%; /* Таблиця займає всю ширину контейнера */
    color: #212529;
    border-collapse: collapse;
    font-weight: normal; /* Нормальний шрифт для тіла таблиці */
    text-align: left; /* Вирівнювання тексту в клітинках за лівим краєм */
}

/* Стилі для шапки таблиці */
.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
    padding: 0.75rem;
    text-align: left; /* Вирівнюємо текст заголовків за лівим краєм */
    font-weight: bold; /* Заголовки залишаються жирними */
}

/* Стилі для рядків таблиці */
.table tbody tr {
    border-top: 1px solid #dee2e6;
}

/* Стиль для клітинок таблиці */
.table th, .table td {
    padding: 0.75rem;
    vertical-align: middle; /* Вирівнюємо по вертикалі посередині */
    border-top: 1px solid #dee2e6;
    text-align: left; /* Вирівнюємо текст за лівим краєм */
    font-weight: normal; /* Звичайний шрифт для тіла таблиці */
}

/* Стиль для table-striped (чергування кольорів рядків) */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: #e3e4e5; /* Темніший сірий фон для непарних рядків */
}

/* Стиль для table-hover (підсвічування при наведенні курсора) */
.table-hover tbody tr:hover {
    background-color: #d6d8db; /* Темніший сірий колір при наведенні */
    transition: background-color 0.3s ease; /* Плавний перехід кольору */
}

/* Оформлення таблиці з рамкою навколо (для .table-bordered) */
.table-bordered {
    border: 1px solid #dee2e6;
}

.table-bordered th, .table-bordered td {
    border: 1px solid #dee2e6;
}

/* Стиль для table-bordered (рамки для таблиці) */
.table-bordered {
    border: 1px solid #dee2e6; /* Рамка навколо всієї таблиці */
}

.table-bordered th, .table-bordered td {
    border: 1px solid #dee2e6; /* Рамки навколо кожної клітинки */
}

/* Оформлення рамки навколо шапки */
.table-bordered thead th {
    border-bottom-width: 2px; /* Товстіша рамка для заголовків */
}

.table-borderless th, .table-borderless td, .table-borderless thead th, .table-borderless tbody tr {
    border: none; /* Видаляємо всі рамки в таблиці */
}

/* Стиль для таблиці з горизонтальною прокруткою */
.table-scroll {
    display: block;                    /* Робимо таблицю блочним елементом */
    width: 100%;                      /* Фіксована ширина у 100% */
    overflow-x: auto;                 /* Горизонтальна прокрутка */
    -webkit-overflow-scrolling: touch;/* Для плавної прокрутки на iOS */
    table-layout: fixed;              /* Фіксуємо ширину колонок */
}

/* Обмежуємо ширину для кожної комірки та вмикаємо перенесення тексту */
.table-scroll th,
.table-scroll td {
    max-width: 30%;              /* Максимальна ширина комірки (30% від ширини таблиці) */
    white-space: normal;         /* Дозволяємо переносити рядки */
    word-wrap: break-word;       /* Перенесення слів при досягненні межі */
    overflow-wrap: break-word;   /* Більш сучасний аналог для перенесення слів */
}

/* Стилі для різних кольорів рядків таблиці */
.table-primary {
    background-color: #cfe2ff; /* Світло-блакитний фон */
    color: #084298; /* Темно-блакитний текст */
}

.table-secondary {
    background-color: #e2e3e5; /* Світло-сірий фон */
    color: #41464b; /* Темно-сірий текст */
}

.table-success {
    background-color: #d1e7dd; /* Світло-зелений фон */
    color: #0f5132; /* Темно-зелений текст */
}

.table-warning {
    background-color: #fff3cd; /* Світло-жовтий фон */
    color: #664d03; /* Темно-жовтий текст */
}

.table-danger {
    background-color: #f8d7da; /* Світло-червоний фон */
    color: #842029; /* Темно-червоний текст */
}

.table-info {
    background-color: #cff4fc; /* Світло-блакитний фон */
    color: #055160; /* Темно-блакитний текст */
}

.table-light {
    background-color: #f8f9fa; /* Світлий фон */
    color: #6c757d; /* Темний текст */
}

.table-dark {
    background-color: #212529; /* Темний фон */
    color: #fff; /* Білий текст */
}