/* ================================================================= *
 * ГЛОБАЛЬНІ ЗМІННІ ТА ПРЕМІАЛЬНІ СТИЛІ BUSWAY                       *
 * ================================================================= */
:root {
    --busway-primary: #0077FF;
    --busway-navy: #091E42;
    --busway-light-bg: #F8F9FA;
    --busway-border: #E2E8F0;
    --busway-radius: 16px;
    --premium-blue: #0077FF;
    --dark-navy: #091E42;
    --soft-bg: #f4f7fa;
}
body {

    background-color: var(--soft-bg) !important;
    color: var(--dark-navy);
}
/* Преміальна картка */
.card-premium {
    background: #ffffff;
    border-radius: 20px !important;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 10px 30px rgba(0, 119, 255, 0.04) !important;
    transition: all 0.3s ease;
}

.card-premium:hover {
    box-shadow: 0 15px 35px rgba(0, 119, 255, 0.08) !important;
}
h4 {
    font-size: 1rem !important;
}

.text-success {
    text-align: center !important;
}
/*.bottom-element {*/
/*    margin: 0 0 100px 0 !important;*/
/*}*/

main {
    margin-bottom: 100px !important;
}

/* Текстові класи */
.text-navy {
    color: var(--busway-navy) !important;
}

/* ================================================================= *
 * АВАТАРКА ТА ХЕДЕР                                                 *
 * ================================================================= */
.user-avatar-wrapper img,
.user-avatar-wrapper div {
    transition: transform 0.2s ease;
}

.user-avatar-wrapper img:hover,
.user-avatar-wrapper div:hover {
    transform: scale(1.05);
}

.user-avatar-wrapper + div span {
    white-space: nowrap;
    overflow: hidden;
    margin: 0 0 0 7px;
    text-overflow: ellipsis;
    max-width: 130px; /* Запобігає занадто довгим іменам ламати макет на мобільних */
}
/*#notificationsDropdownToggle {*/
/*    transition: background-color 0.2s ease, border-color 0.2s ease;*/
/*}*/

/*#notificationsDropdownToggle:hover {*/
/*    background-color: #e9ecef !important;*/
/*    border-color: #cbd5e1 !important;*/
/*}*/

/* Покращені софт-кольори для бейджів та іконок */
.bg-soft-blue {
    background-color: #E0F2FE !important;
    color: #0077FF !important;
}

.bg-soft-red {
    background-color: #FFE4E6 !important;
    color: #EF4444 !important;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}





/* ================================================================= *
 * КНОПКИ ДІЙ ТА ІКОНКИ В ПРАВІЙ ПАНЕЛІ                             *
 * ================================================================= */
.btn-action {
    background-color: #F8F9FA;
    border: 1px solid #EAECF0;
    border-radius: 14px;
    padding: 12px 16px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
}

.btn-action:hover {
    background-color: #F1F5F9;
    border-color: #CBD5E1;
    transform: translateX(3px);
}
.icon-sm {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.bg-soft-blue {
    background-color: #E0F2FE;
    color: #0077FF;
}

.bg-soft-red {
    background-color: #FFE4E6;
    color: #EF4444;
}

/* ================================================================= *
 * ТАБЛИЦІ ТА АДАПТИВНІСТЬ                                          *
 * ================================================================= */
.table-hover tbody tr {
    transition: background-color 0.15s ease;
}

.table-hover tbody tr:hover {
    background-color: rgba(0, 119, 255, 0.02);
}


/* 1. БАЗОВІ СТИЛІ (Для мобільних телефонів від 0px і ширше) */



.flatpickr-calendar {
    z-index: 99999 !important;
}

/* Если вы используете свойство static: true, убедитесь, что контейнер имеет место */
.input-group-custom {
    position: relative;
}
/* Премиальные карточки */

.page-header {
    /*background: white;*/
    /*border-bottom: 1px solid rgba(0,0,0,0.05);*/
}

.btn-premium {
    background: linear-gradient(135deg, #0077FF 0%, #0056b3 100%);
    color: white;
    border-radius: 12px;
    padding: 10px 24px;
    font-weight: 600;
    border: none;
    transition: all 0.3s;
}

.btn-premium:hover {
    box-shadow: 0 8px 20px rgba(0, 119, 255, 0.3);
    color: white;
    transform: scale(1.02);
}

.btn-all {
    background: linear-gradient(135deg, #0077FF 0%, #0056b3 100%); border: none; font-size: 0.95rem; height: 100%; padding: 15px 0;
}

.breadcrumb-item+.breadcrumb-item::before {
    color: white !important;
}
/* Служебные цвета */
.bg-soft-blue { background: rgba(0, 119, 255, 0.1); color: #0077FF; }
.bg-soft-green { background: rgba(40, 167, 69, 0.1); color: #28a745; }
.bg-soft-purple { background: rgba(111, 66, 193, 0.1); color: #6f42c1; }

.icon-shape {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
}
/* Примусово ховаємо модалку, доки вона не активована Bootstrap */
.modal:not(.show) {
    display: none !important;
}

/* Виправляємо накладання фонів (якщо Tailwind заважає) */
.modal-backdrop {
    z-index: 1050 !important;
}
.modal {
    z-index: 1055 !important;
}

/* Гарантуємо роботу мишки в інпутах модалки */
.modal-open .modal {
    pointer-events: auto !important;
}

/* Стилі для прилиплої нижньої панелі пасажира BusWay */
.passenger-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    border-top: 1px solid #EAECF0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
    z-index: 1050;
    padding: 8px 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.passenger-nav-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 600px;
    margin: 0 auto;
}

.passenger-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #667085;
    font-size: 11px;
    font-weight: 500;
    transition: all 0.2s ease;
    flex: 1;
}

.nav-icon-wrap {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-bottom: 2px;
    font-size: 15px;
    transition: all 0.2s ease;
}

/* Активний стан пункту меню */
.passenger-nav-item.active {
    color: #0077FF;
    font-weight: 600;
}

.passenger-nav-item.active .nav-icon-wrap {
    background-color: #E0F2FE;
    color: #0077FF;
}

.passenger-nav-item:hover {
    color: #0077FF;
}

.passenger-nav-item:hover .nav-icon-wrap {
    background-color: #F2F4F7;
}

/* Особливий стиль для кнопки виходу */
.passenger-nav-item.text-danger:hover {
    color: #D92D20 !important;
}
.passenger-nav-item.text-danger:hover .logout-wrap {
    background-color: #FEE4E2;
}
.text-white {
    color: #FFFFFF !important;
}

.bg-container {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #161616;
    width: 100%;
    height: 238px;
    border-radius: 0 0 25px 25px;
    z-index: -1;
}

/* Компактный верхний баннер-строка */
.alert-top-bar {
    background-color: #f0f7ff; /* Мягкий фирменный голубой фон */
    border: 1px solid rgba(0, 119, 255, 0.18) !important;
    border-left: 4px solid #0077FF !important; /* Выделение синей полосой слева */
    position: relative;
}

/* Крестик строго в верхнем правом углу */
.btn-close-top-right {
    position: absolute;
    top: 8px;
    right: 10px;
    background: transparent;
    border: none;
    color: #64748b;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    cursor: pointer;
    z-index: 10; /* Гарантирует кликабельность */
}

.btn-close-top-right:hover {
    color: #0f172a;
    background-color: rgba(0, 0, 0, 0.06);
}

/* Вспомогательные классы размера */
.extra-small {
    font-size: 0.72rem;
}

.btn-xs {
    font-size: 0.8rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* 2. МАЛЕНЬКІ ПЛАНШЕТИ ТА МОБІЛЬНІ (>= 576px)
   З'являється трохи більше простору по боках, сітки стають двоколонковими. */
@media (min-width: 576px) {
    .busway-container {
        padding: 0 16px;
        max-width: 540px;
    }
}

/* 3. ПЛАНШЕТИ (>= 768px)
   Класичний поріг для планшетів та iPad. Тут вже можна розгортати таблиці та складні фільтри. */
@media (min-width: 768px) {
    .busway-container {
        max-width: 720px;
    }

    .row-responsive {
        flex-direction: row;
    }
    .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .card-premium {
        padding: 1rem !important;
    }
}

/* 4. МАЛЕНЬКІ НОУТБУКИ ТА ГОРИЗОНТАЛЬНІ ПЛАНШЕТИ (>= 992px)
   Стандартна точка для зникнення мобільних меню-бургерів і появи повноцінного десктопного сайдбару AdminLTE. */
@media (min-width: 992px) {
    .passenger-bottom-nav {
        max-width: 480px;
        left: 50%;
        transform: translateX(-50%);
        bottom: 20px;
        border-radius: 16px;
        border: 1px solid #EAECF0;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    }
}

/* 5. ВЕЛЕКІ ДЕСКТОПИ (>= 1200px)
   Для моніторів та великих екранів офісів перевізників. */
@media (min-width: 1200px) {
    .busway-container {
        max-width: 1140px;
    }
}

/* 6. ULTRA-WIDE МОНІТОРИ (>= 1400px)
   Обмежуємо максимальну ширину, щоб таблиці та інпути не розтягувалися на весь величезний екран. */
@media (min-width: 1400px) {
    .busway-container {
        max-width: 1320px;
    }
}