/* Общие стили */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f9fc !important;
}


/* Навбар */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #2946a0;
    padding: 20px 5%;
    position: relative;
}

/* Обновлённый стиль для центрирования */
.nav-left {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /* Убираем pointer-events: none */
}

.main-link {
    color: white;
    text-decoration: none;
    font-size: 1.3rem;
    /* Убираем pointer-events: auto, так как больше не нужно */
}

.nav-right {
    margin-left: auto;
    z-index: 1; /* Поднимаем над центрированным элементом */
}
/* Баннер */
.banner {
    position: relative;
    width: 100%;
    height: 450px; /* Увеличенная высота баннера */
    overflow: hidden;
}

.banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 2.2rem;
    text-align: center;
    width: 90%;
    text-shadow: 0 0 15px rgba(0,0,0,0.8), 0 0 5px rgba(0,0,0,0.8);
    font-weight: 600;
    letter-spacing: 1px;
    padding: 10px;
}

/* Контейнер для аудиторий */
/* Обновленные стили для контейнера аудиторий */
.classrooms-container {
    width: 100%;
    padding: 40px 5%;
    max-width: 1600px;
    margin: 0 auto;
    box-sizing: border-box;
}

.classroom-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5%;
    justify-content: space-between;
}

.classroom-card {
    width: 31.66%; /* Три колонки с отступами */
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
}

.classroom-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

.classroom-image {
    height: 280px;
    overflow: hidden;
}

.classroom-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.classroom-card:hover .classroom-image img {
    transform: scale(1.05);
}

.classroom-info {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.classroom-info h3 {
    color: #2946a0;
    font-size: 1.5rem;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
}

.classroom-info h3 i {
    margin-right: 10px;
    font-size: 1.3rem;
}

.classroom-info p {
    color: #555;
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
}

/* Адаптивность */
@media (max-width: 1024px) {
    .classroom-card {
        width: 48%; /* Две колонки на планшетах */
    }
}

@media (max-width: 768px) {
    .classroom-card {
        width: 100%; /* Одна колонка на мобильных */
    }

    .classroom-image {
        height: 240px;
    }
}

/* Адаптивность */

/* Стили для practice.html */
.booking-container {
    padding: 30px 5%;
    max-width: 1200px;
    margin: 0 auto;
}

.floor-selector, .date-selector {
    margin-bottom: 20px;
}

/* Общие стили для кнопок статусов */
/* Общие стили для всех кнопок статусов */
.status-btn {
    width: 100%;
    display: inline-block;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    min-width: 95px;
    text-align: center;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    user-select: none;
    position: relative;
    top: 0;
}

/* Анимация при наведении для ВСЕХ кнопок (кроме truly inactive) */
.status-btn:not(.unavailable):hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    top: -2px; /* Дополнительный эффект "поднятия" */
}

/* Свободно (зелёная) */
.status-btn.available {
    background-color: #4CAF50;
    color: white;
}

.status-btn.waiting {
    background-color: #fcb030;
    color: white;
}

.status-btn.expired {
    background-color: #7ba27c;
    color: white;
}

/* Занято (красная) - теперь тоже с анимацией */
.status-btn.booked {
    background-color: #F44336;
    color: white;
    cursor: pointer; /* Оставляем курсор-указатель */
}

.status-btn.booked:hover {
    background-color: #e53935; /* Чуть темнее при наведении */
}

/* Недоступно (серая) - без анимации */
.status-btn.unavailable {
    background-color: #9E9E9E;
    color: white;
    cursor: not-allowed; /* Курсор "недоступно" */
    opacity: 0.9;
}

.status-legend {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 2px;
}

.status-legend.available {
    background-color: #4CAF50;
}

.status-legend.waiting {
    background-color: #fcb030;
}

.status-legend.expired {
    background-color: #7ba27c;
}

.status-legend.booked {
    background-color: #F44336;
}

.status-legend.unavailable {
    background-color: #9E9E9E;
}

/* Стили для form.html */
.form-container {
    max-width: 600px;
    margin: 30px auto;
    padding: 30px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.form-container h1 {
    color: #2946a0;
    margin-top: 0;
}

.booking-time {
    color: #666;
    margin-bottom: 25px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
}

.form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

.submit-btn {
    width: 100%;
    padding: 12px;
    background-color: #2946a0;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

.submit-btn:hover {
    background-color: #1d3580;
}

/* Адаптивность */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }

    .banner-text {
        font-size: 1.5rem;
    }

    .classroom-type {
        width: 100%;
    }

    .status-btn {
        width: 70px;
        padding: 6px;
        font-size: 0.8rem;
    }

    .form-container {
        margin: 20px;
        padding: 20px;
    }
}

/* Базовые настройки */
:root {
    font-size: 16px; /* Базовый размер для rem */
}

/* Общие стили для форм авторизации/регистрации */
.auth-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f4f9fc;
    padding: 2%;
}

.auth-container {
    display: flex;
    background: white;
    border-radius: 0.625rem;
    box-shadow: 0 0.3125rem 1.25rem rgba(0,0,0,0.1);
    overflow: hidden;
    width: 90%;
    max-width: 56.25rem;
}

.auth-logo {
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5%;
    background-color: #f3f3f3;
}

.logo-img {
    width: 80%;
    max-width: 20rem;
    height: auto;
    object-fit: contain;
}

.auth-form {
    width: 60%;
    padding: 5%;
}

.auth-form h1 {
    color: #2946a0;
    text-align: center;
    margin-bottom: 1.875rem;
    font-size: 1.8rem;
}

.auth-form .form-group {
    margin-bottom: 1.25rem;
}

.auth-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #333;
    font-size: 1rem;
}

.auth-form input {
    width: 100%;
    padding: 0.75rem;
    border: 0.0625rem solid #ddd;
    border-radius: 0.25rem;
    font-size: 1rem;
    box-sizing: border-box;
}

.submit-btn {
    width: 100%;
    padding: 0.75rem;
    background-color: #2946a0;
    color: white;
    border: none;
    border-radius: 0.25rem;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: 1.25rem 0;
}

.submit-btn:hover {
    background-color: #1d3580;
}

.auth-footer {
    text-align: center;
    color: #666;
    font-size: 0.9rem;
}

.auth-footer a {
    color: #2946a0;
    text-decoration: none;
}

.auth-footer a:hover {
    text-decoration: underline;
}

/* Адаптивность */
@media (max-width: 768px) {
    .auth-container {
        flex-direction: column;
        width: 95%;
    }

    .auth-logo, .auth-form {
        width: 100%;
    }

    .auth-logo {
        padding: 10%;
    }

    .auth-form {
        padding: 10%;
    }
}

@media (max-width: 480px) {
    :root {
        font-size: 14px;
    }

    .auth-form h1 {
        font-size: 1.5rem;
    }

    .auth-container {
        width: 100%;
        border-radius: 0;
    }

    .logo-img {
        max-width: 15rem;
    }
}


/* Пользовательское меню */
.user-menu {
    position: relative;
    display: flex;
    align-items: center;
    color: white;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.user-menu:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.user-icon {
    font-size: 1.5rem;
    margin-right: 8px;
}

.username {
    margin-right: 8px;
    font-size: 1rem;
}

.dropdown-arrow {
    font-size: 0.8rem;
    transition: transform 0.3s;
}

.dropdown-arrow.rotate {
    transform: rotate(180deg);
}

.dropdown-menu {
    min-width: 220px;
    max-width: 90vw;
    white-space: normal;
    word-wrap: break-word;
}

.dropdown-menu.show {
    display: block;
}

.dropdown-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    color: #333;
    text-decoration: none;
    font-size: 0.95rem;
    transition: background-color 0.2s;
}

.dropdown-item i {
    margin-right: 10px;
    color: #555;
    width: 16px;
    text-align: center;
}

.dropdown-item:hover {
    background-color: #f5f5f5;
    color: #2946a0;
}

.dropdown-item:hover i {
    color: #2946a0;
}

/* Адаптивность */
@media (max-width: 480px) {
    .username {
        display: none;
    }

    .user-menu {
        padding: 5px;
    }

    .dropdown-menu {
        width: 150px;
    }
}
/* Стили для таблицы аудиторий */
.table-auditories {
    width: 100%;
    min-width: 950px; /* Шире, чтобы избежать переноса текста */
}

.table-auditories th,
.table-auditories td {
    padding: 12px 10px; /* Увеличил отступы */
    vertical-align: middle; /* Выравнивание по центру */
    text-align: center; /* Текст по центру */
}

.table-auditories th {
    white-space: nowrap; /* Заголовки не переносятся */
}

.table-auditories td:first-child {
    font-weight: bold; /* Номер аудитории жирным */
    width: 120px; /* Фиксированная ширина для колонки с номером */
}



/* Стили для серых линий */
.divider-line {
    border: none;
    height: 1px;
    background-color: #808080;
    margin: 12px 0;
}

/* Стили для выравнивания кнопок */
.buttons-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: 15px !important;
}

.confirm-btn, .cancel-btn {
    margin: 0 !important;
    padding: 8px 20px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}



/* Добавьте в styles.css */
.status-btn.booking {
    background-color: #42a5f5;
    color: white;
}

.status-legend.booking {
    background-color: #42a5f5;
}



/* Заголовок регистрации */
.registration-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.registration-step {
    color: #6c757d;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

/* Подсказка для пароля */
.password-hint {
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 0.3rem;
}

/* Ссылка "Назад" */
.back-link {
    display: inline-block;
    margin-top: 1rem;
    color: #2946a0;
    text-decoration: none;
    font-size: 0.9rem;
}

.back-link:hover {
    text-decoration: underline;
}

/* Стили для select */
select {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: white;
    color: #495057;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

select:focus {
    border-color: #2946a0;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(41, 70, 160, 0.25);
}



/*======================= SWEETALERT ===============================*\


/* Стили для компактного отображения окна бронирования */
.custom-swal-title.tight-title {
    margin-bottom: 5px !important; /* Уменьшаем отступ под заголовком */
    padding-bottom: 0 !important;
}

.swal2-html-container.tight-container {
    padding-top: 0 !important; /* Убираем верхний отступ */
    margin-top: -5px !important; /* Поднимаем контент ближе к заголовку */
}

.swal2-actions.tight-actions {
    margin-top: 10px !important; /* Уменьшаем отступ над кнопками */
}

.custom-swal-popup .swal2-title + .swal2-html-container {
    margin-top: 0 !important; /* Убираем отступ между заголовком и контентом */
}


/* Фикс отступов заголовка */
.custom-swal-title {
    margin-bottom: 8px !important;
    padding-bottom: 0 !important;
}

/* Кастомные стили для SweetAlert2 (универсальные)
.swal2-popup {
    font-family: 'Arial', sans-serif !important;
    border-radius: 8px !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2) !important;
    width: auto !important;
    max-width: 450px !important;
    padding: 1.5rem !important;
}

.swal2-title {
    color: #2946a0 !important;
    font-size: 1.5rem !important;
    margin-bottom: 1rem !important;
    text-align: center !important;
}

.swal2-html-container {
    text-align: left !important;
    margin: 1rem 0 !important;
    font-size: 1rem !important;
    color: #333 !important;
}

.swal2-html-container p {
    margin-bottom: 0.8rem !important;
}

.swal2-html-container strong {
    color: #2946a0;
    min-width: 100px;
    display: inline-block;
}

.swal2-confirm {
    background-color: #2946a0 !important;
    border: none !important;
    padding: 10px 25px !important;
    border-radius: 4px !important;
    transition: background-color 0.3s !important;
    font-size: 1rem !important;
    margin-top: 1rem !important;
}

.swal2-confirm:hover {
    background-color: #1d3580 !important;
}

/* Стили для success-уведомлений
.swal2-success .swal2-title {
    color: #2946a0 !important;
}

.swal2-success [class^=swal2-success-line] {
    background-color: #4CAF50 !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(76, 175, 80, 0.3) !important;
}

/* Стили для info-уведомлений (окна о занятых аудиториях)
.swal2-icon.swal2-info {
    color: #2946a0 !important;
    border-color: #2946a0 !important;
}

/* Стили для всплывающих окон
.custom-swal-popup {
    border-radius: 12px !important;
    max-width: 500px !important;
}

.custom-swal-title {
    color: #2946a0 !important;
    font-size: 1.5rem !important;
    text-align: center !important;
}

.swal2-icon.swal2-question {
    color: #2946a0 !important;
    border-color: #2946a0 !important;
}

.swal2-confirm {
    background-color: #4CAF50 !important;
    transition: all 0.3s !important;
}

.swal2-confirm:hover {
    background-color: #3d8b40 !important;
}

.swal2-cancel {
    transition: all 0.3s !important;
}

.swal2-cancel:hover {
    background-color: #d32f2f !important;
}

/* Адаптивность */
@media (max-width: 576px) {
    .swal2-popup {
        width: 90% !important;
        padding: 1rem !important;
    }

    .swal2-title {
        font-size: 1.3rem !important;
    }

    .swal2-html-container {
        font-size: 0.9rem !important;
    }
}

/* Стиль только для кнопки SweetAlert */
/*.swal-confirm-btn {
    background-color: #2946a0 !important;
    border: none !important;
    padding: 10px 24px !important;
    font-size: 1rem !important;
    transition: background-color 0.3s !important;
}

.swal-confirm-btn:hover {
    background-color: #1d3580 !important;
}*/

@media (max-width: 480px) {
    .auth-form {
        padding: 8% 5%;
    }

    .auth-form h1 {
        font-size: 1.4rem;
    }

    .auth-form label,
    .auth-form input {
        font-size: 0.95rem;
    }

    .submit-btn {
        font-size: 0.95rem;
        padding: 0.6rem;
    }
}

.auth-container {
    box-sizing: border-box;
}

.auth-form input,
.auth-form label {
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .auth-logo {
        text-align: center;
        padding: 20px 10px;
        display: none;
    }

    .logo-img {
        max-width: 150px;
        height: auto;
        margin: 0 auto;
    }

    .auth-container {
        align-items: center;
    }
}

.auth-form h1 {
    margin-bottom: 1.5rem;
}

.auth-form .form-group {
    margin-bottom: 1.5rem;
}

.auth-footer {
    margin-top: 1rem;
}

.auth-form {
    padding: 2rem;
    box-sizing: border-box;
}

@media (max-width: 480px) {
    .auth-form {
        padding: 1.5rem 1rem;
    }
}

.auth-form h1 {
    margin-bottom: 1.5rem;
}

.auth-form .form-group {
    margin-bottom: 1.5rem;
}

.auth-footer {
    margin-top: 1rem;
}

.auth-page {
    height: 100vh;
    overflow: hidden;
}

.auth-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 2rem 1rem;
    box-sizing: border-box;
    overflow: hidden;
}

.auth-container {
    max-height: 100%;
    /*overflow: auto;*/
    box-sizing: border-box;
}

/* Цвет навбара */
.custom-navbar {
    background-color: #2946a0 !important;
}

/* Обёртка для выпадающих меню, чтобы текст не вылазил */
.dropdown-menu {
    min-width: 200px;
    word-wrap: break-word;
    white-space: normal;
}

/* Отступы логотипа и кнопки профиля */
.navbar .navbar-brand,
.navbar .navbar-nav:last-child {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Корректная позиция бургер-кнопки */
@media (max-width: 991.98px) {
    .navbar-toggler {
        margin-left: auto;
        margin-right: 1rem;
    }
}

/* Ограничение ширины и обёртка текста внутри dropdown */
.dropdown-menu {
    min-width: 220px;
    max-width: 90vw;
    white-space: normal;
    word-wrap: break-word;
}

/* Отступ после навбара для мобильных */
@media (max-width: 768px) {
    .container {
        margin-top: 1rem;
    }
}

/* Исправление: бургер-кнопка справа от логотипа */
@media (max-width: 991.98px) {
    .navbar {
        flex-wrap: nowrap;
    }
    .navbar > .container,
    .navbar > .container-fluid,
    .navbar > .container-lg,
    .navbar > .container-md,
    .navbar > .container-sm,
    .navbar > .container-xl,
    .navbar > .container-xxl {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
    }
    .navbar-brand {
        margin-right: auto;
    }
    .navbar-toggler {
        margin-left: auto;
    }
}



/* Увеличенные внешние отступы навбара по краям */
.navbar .navbar-brand {
    margin-left: 2rem;
}

.navbar .navbar-nav:last-child {
    margin-right: 2rem;
}



/* Жесткое устранение горизонтального скролла */


.navbar {
    
    
}

@media (max-width: 991.98px) {
    .navbar > .container-fluid {
        flex-wrap: wrap !important;
    }
}

@media (max-width: 480px) {
    .navbar-brand {
        font-size: 1.1rem;
    }
}

.navbar-brand,
.navbar-toggler {
    overflow: hidden;
    white-space: nowrap;
}

.nav-link {
    color: rgb(255 255 255 / 80%) !important;
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    font-weight: 600 !important;
    color: rgb(255 255 255 / 100%) !important;
}

/* Обёртка для адаптивной таблицы */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.page-title{width:100%;font-size:24px;font-weight:600;margin: 30px 0 30px 0;color:#263238;text-shadow:0px 2px 6px rgba(0,0,0,.2);}

 .status-badge {
     display: inline-flex;
     align-items: center;
     /*padding: 0.35rem 0.65rem;*/
     border-radius: 0.25rem;
     font-size: 0.875rem;
     margin-right: 0.5rem;
     margin-bottom: 0.5rem;
 }

.status-text {
    padding-left: 5px;
}

/* Альтернативный вариант (если нужно скрывать только текст, но оставлять иконку) */

.status-text-lg-only {
    padding-left: 5px;
}

.required-field::after {
    content: " *";
    color: red;
}

.rotate-animation {
    animation: rotate 1s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/*@media (max-width: 991.98px) {
    .status-text-lg-only {
        display: none !important;
    }
}*/

.container{width:100%;min-height:calc(100vh - 98px);padding-bottom:15px;/*padding-top:50px;*/box-sizing: border-box;}

.container .page-title{width:100%;font-size:24px;font-weight:600;margin: 30px 0 30px 0;color:#263238;text-shadow:0px 2px 6px rgba(0,0,0,.2);}

.container .form .in{width:100%;position:relative;margin-top:30px;}

.container .form input,.container .form select{padding: .375rem .75rem;width:300px;height:30px;font-size:14px;padding-left:15px;border-radius:15px;max-width:100%;box-shadow:0px 1px 6px rgba(0,0,0,0.2);position:relative;outline:none;clear:both;border:none}

.container .form textarea{padding-top: 5px;font-size: 14px;padding-left: 15px;border-radius: 15px;max-width: 100%;box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);width: 75%;border:none;}

.container .form select + label{position:absolute;left:0;top:0;}

.container .form select:valid + label{top:-30px;}

.container .form select:focus:valid + label{top:-30px;}

.container .submit{width:200px;height:40px;font-size:14px;text-align: center;color:#fff;background: #ee0979;background: -webkit-linear-gradient(to right, #ff6a00, #ee0979);background: linear-gradient(to right, #ff6a00, #ee0979);box-shadow:0px 1px 6px rgba(0,0,0,0.4);border-radius:20px;margin-top:1px;cursor: pointer;}

.container .restart{width:200px;height:40px;font-size:14px;text-align: center;color:#fff;background: #ff6a00;background: -webkit-linear-gradient(to right, #fff300, #ff6a00);background: linear-gradient(to right, #fff300, #ff6a00);box-shadow:0px 1px 6px rgba(0,0,0,0.4);border-radius:20px;margin-top:1px;cursor: pointer;}

.container .item{width:100%;margin-top:15px;background:#fff;border-radius:3px;box-shadow:0px 2px 6px rgba(0,0,0,0.4);padding:15px;display:flex;flex-wrap:wrap;align-items: center;}