/* ==========================================
   CSS ПЕРЕМЕННЫЕ И ГЛОБАЛЬНЫЕ НАСТРОЙКИ
   ========================================== */

/* Определение цветовых переменных и размеров */
:root {
    --bs-primary: #0072bc;
    --bs-secondary: #ef7f1a;

    --bs-btn-color: #fff;
}

/* Глобальные стили для всего документа */
* {
    font-family: "Open Sans", system-ui;
}

/* ==========================================
   СТИЛИ ШАПКИ И ПОДВАЛА
   ========================================== */

/* Основные стили header и footer */
#main-header {
    position: relative;
    z-index: 1030;
}

/* ==========================================
   СТИЛИ НАВИГАЦИИ
   ========================================== */

/* Состояния ссылок навигации */

/* Исправление фона navbar на мобильных устройствах */
@media (max-width: 990px) {
    .navbar-collapse.show {
        background-color: var(--bs-primary) !important;
        border-radius: 0.5rem;
        margin-top: 1rem;
        padding: 1rem;
    }
}

.collapsing {
    transition: none !important;
    height: auto !important;
}


/* ==========================================
   ПЕРЕОПРЕДЕЛЕНИЕ BOOTSTRAP ЦВЕТОВ
   ========================================== */

/* Основные цветовые классы */
.bg-primary { background-color: var(--bs-primary) !important; }
.text-primary { color: var(--bs-primary) !important; }
.bg-secondary { background-color: var(--bs-secondary) !important; }
.text-secondary { color: var(--bs-secondary) !important; }

/* Стили основных кнопок */
.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: var(--bs-btn-color) !important;
}
.btn-primary:hover {
    background-color: color-mix(in srgb, var(--bs-primary) 85%, black) !important;
    border-color: color-mix(in srgb, var(--bs-primary) 85%, black) !important;
    color: var(--bs-white) !important;
}

.btn-secondary {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
}
.btn-secondary:hover {
    background-color: color-mix(in srgb, var(--bs-secondary) 85%, black) !important;
    border-color: color-mix(in srgb, var(--bs-secondary) 85%, black) !important;
}

/* Стили outline кнопок */
.btn-outline-primary {
    background-color: transparent;
    border-color: var(--bs-primary) !important;
}
.btn-outline-primary:hover {
    background-color: transparent;
    border-color: color-mix(in srgb, var(--bs-primary) 85%, black) !important;
    color: var(--bs-primary) !important;
}

.btn-outline-secondary {
    background-color: transparent;
    border-color: var(--bs-secondary) !important;
}
.btn-outline-secondary:hover {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
}

.nav-pills .nav-link {
    color: var(--bs-black);
    background-color: whitesmoke;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: var(--bs-white);
    background-color: var(--bs-primary);
}

.badge.bg-primary {
    background-color: var(--bs-primary) !important;
}
.badge.bg-secondary {
    background-color: var(--bs-secondary) !important;
}

/* ==========================================
   СТИЛИ КОМПОНЕНТОВ BOOTSTRAP
   ========================================== */

.carousel-item {
    transition: transform 0.6s ease-in-out !important;
}

.carousel-fade .carousel-item {
    transition: opacity 0.6s ease-in-out !important;
}

/* Карусель индикаторы */
.carousel-indicators button.active {
    background-color: var(--bs-primary) !important;
}

/* Ссылки в футере */
.text-decoration-none:hover {
    color: var(--bs-primary) !important;
}

/* Пагинация */
.active>.page-link, .page-link.active {
    z-index: 3;
    color: var(--bs-pagination-active-color);
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Выпадающие списки */
.dropdown-item.active, .dropdown-item:active {
    background-color: var(--bs-secondary) !important;
    color: #fff !important;
}

.dropdown-item:hover {
    background-color: var(--bs-secondary) !important;
    color: #fff !important;
}


/* ==========================================
   СТИЛИ ТАБЛИЦ
   ========================================== */

/* Основные стили таблиц */
.table-rounded {
    border: 1px solid silver;
    border-radius: 8px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    vertical-align: middle;
}

.table-filters {
    border-radius: 0.5rem;
    border: dashed 1px var(--bs-blue);
    padding: 1rem;
    margin-bottom: 1rem;
}


.courses-table {
    border-collapse: collapse;
    width: 100%;
}

.courses-table th {
    background-color: var(--bs-primary);
    color: var(--bs-white);
    border: 1px solid var(--bs-primary);
    padding: 0.5rem;
    text-align: center;
    vertical-align: middle;
}


.courses-table td {
    border: 1px solid silver;
    padding: 0.5rem;
    vertical-align: middle;

}


/* ==========================================
   АНИМАЦИИ И ИНДИКАТОРЫ ЗАГРУЗКИ
   ========================================== */

/* Анимация для индикатора загрузки потоков */
@keyframes loading-animation {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

.loading-indicator {
    height: 0.5rem;
    background-color: #e9ecef;
    border-radius: 2px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out;
}

.loading-indicator.show {
    opacity: 1;
    visibility: visible;
}

.loading-bar {
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, #0d6efd 0%, #0d6efd 50%, #0a58ca 50%, #0a58ca 100%);
    background-size: 200% 100%;
    animation: loading-animation 1.5s ease-in-out infinite;
}

.selectize-control {
    position: relative;
}

/* спиннер при загрузке */
.selectize-control.loading::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 16px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border: 2px solid #ccc;
    border-top-color: #333;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    z-index: 10;
}

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

.course-direction-card {
    transition: all 0.3s ease;
}

.course-direction-card:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15) !important;
}


/* ==========================================
   СТИЛИ МОДАЛЬНЫХ ОКОН И ПОЗИЦИОНИРОВАНИЕ
   ========================================== */

/* Стили для таблицы заявок в модалке переноса */
.sticky-top {
    position: sticky;
    top: 0;
    z-index: 10;
}


.doc-link {
    display: flex;
    text-decoration: none;
    color: #000;
    padding: 0.5rem;
    border-radius: 0.5rem;
}
.doc-link:hover {
    color: var(--bs-primary);
}
.doc-link__icon {
    margin-right: 0.5rem;
    color: var(--bs-primary);
}