/**
 * custom.css
 *
 * Дополнительные стили для более приятного вида.
 * Показываем, как мы можем кастомизировать "light" / "dark" темы,
 * и добавить небольшой UI-«гламур».
 */

/* Сбрасываем отступы, если нужно */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Базовый стиль для body */
body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
    /* Отступ вверху/внизу */
    padding-top: 56px;
    padding-bottom: 40px;
}

/* Навигационная панель (пример) */
.navbar {
    transition: background-color 0.3s ease;
}

/* Можно немного приукрасить hover у ссылок в navbar */
.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transition: background-color 0.2s;
}

/* Дополнительный контейнер */
.main-container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
}

/* Card-like контейнер */
.card-custom {
    border-radius: 6px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-body-bg);
}

/* Футер внизу */
footer {
    text-align: center;
    padding: 1rem 0;
    margin-top: 2rem;
    border-top: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
    font-size: 0.9rem;
}

/* ---------------------------------------------
 * Настройки для разных тем (bootstrap color modes)
 * --------------------------------------------- */

/* Light theme variables */
[data-bs-theme="light"] {
    --bs-body-bg: #f8f9fa;       /* светлый фон */
    --bs-body-color: #212529;    /* тёмный текст */
    --bs-border-color: #dee2e6;  /* светлая граница */
    --bs-link-color: #0d6efd;    /* bootstrap-синий */
}

/* Dark theme variables */
[data-bs-theme="dark"] {
    --bs-body-bg: #18191A;
    --bs-body-color: #e9ecef;
    --bs-border-color: #444;
    --bs-link-color: #0d99ff;
}

[data-bs-theme="dark"] .navbar {
    background-color: #212529 !important;
}

/* Пример: делаем заголовки чуток ярче */
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] .navbar-brand {
    color: #f8f9fa;
}