/* ==========================================================================
   Экзаменационный портал — спокойная минималистичная тема.

   Принципы:
   - один нейтральный фон страницы, белые карточки, тонкие границы;
   - акцентный цвет (--primary-color) приходит из брендинга и используется
     дозированно: кнопки действия, ссылки, активные состояния;
   - никаких градиентов, размытий и «прыгающих» ховеров — интерфейс не должен
     отвлекать студента во время экзамена;
   - статусы (успех/ошибка/предупреждение) показываются мягкой заливкой,
     а не насыщенным цветным блоком.
   ========================================================================== */

:root {
    /* Переопределяются брендингом в base.html.
       --primary-strong — затемнённый акцент для текста на светлом фоне,
       --on-primary / --on-navbar — контрастный текст поверх заливки. */
    --primary-color: #4f6d8f;
    --primary-strong: #4f6d8f;
    --on-primary: #ffffff;
    --navbar-color: #2b323b;
    --on-navbar: #ffffff;
    --background: #f5f6f7;

    /* Поверхности и текст */
    --surface-page: #f5f6f7;
    --surface: #ffffff;
    --surface-muted: #f2f4f6;
    --surface-sunken: #eef0f3;
    --border: #e2e5e9;
    --border-strong: #cfd4da;

    --text: #232a31;
    --text-secondary: #59626c;
    --text-muted: #858e98;

    /* Приглушённые статусные цвета */
    --secondary-color: #6b7480;
    --success-color: #4a7c59;
    --danger-color: #b1554b;
    --warning-color: #9d7328;
    --info-color: #4c7385;

    --success-soft: #eef3ef;
    --danger-soft: #f8efee;
    --warning-soft: #f7f2e8;
    --info-soft: #eef2f5;
    --neutral-soft: #f1f3f5;

    /* Мягкая заливка акцентом: fallback + точный расчёт там, где поддерживается */
    --primary-soft: rgba(79, 109, 143, 0.09);
    --primary-ring: rgba(79, 109, 143, 0.18);
    --navbar-hover: rgba(255, 255, 255, 0.10);
    --navbar-line: rgba(255, 255, 255, 0.08);

    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(24, 29, 37, 0.05);
    --shadow: 0 1px 3px rgba(24, 29, 37, 0.06);
    --shadow-lg: 0 8px 24px rgba(24, 29, 37, 0.08);
}

@supports (background: color-mix(in srgb, red 10%, transparent)) {
    :root {
        --primary-soft: color-mix(in srgb, var(--primary-color) 9%, transparent);
        --primary-ring: color-mix(in srgb, var(--primary-color) 22%, transparent);
        --navbar-hover: color-mix(in srgb, var(--on-navbar) 12%, transparent);
        --navbar-line: color-mix(in srgb, var(--on-navbar) 10%, transparent);
    }
}

/* --------------------------------------------------------------------------
   Базовая типографика
   -------------------------------------------------------------------------- */

body {
    /* Фон намеренно нейтральный и не зависит от темы: цветной градиент на весь
       экран — главный источник визуального шума. Тема задаёт только акцент. */
    background: var(--surface-page);
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--text);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text);
    font-weight: 600;
    letter-spacing: -0.01em;
}

h1 { font-size: 1.6rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.15rem; }
h4 { font-size: 1.05rem; }
h5 { font-size: 0.975rem; }
h6 { font-size: 0.875rem; }

.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-weight: 600;
    letter-spacing: -0.02em;
}

.display-4 { font-size: 2rem; }

.lead {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-secondary);
}

small, .small { font-size: 0.8125rem; }

a {
    color: var(--primary-strong);
    text-decoration: none;
}

a:hover {
    color: var(--primary-strong);
    text-decoration: underline;
}

hr {
    border-top: 1px solid var(--border);
    opacity: 1;
}

/* Bootstrap красит <code> в ярко-розовый — в спокойной палитре это читается
   как ошибка. */
code, kbd, samp {
    color: var(--text-secondary);
    background: var(--surface-muted);
    border-radius: 4px;
    padding: 0.1em 0.35em;
    font-size: 0.85em;
}

pre code { background: transparent; padding: 0; }

.text-muted { color: var(--text-muted) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-primary { color: var(--primary-strong) !important; }
.text-success { color: var(--success-color) !important; }
.text-danger { color: var(--danger-color) !important; }
.text-warning { color: var(--warning-color) !important; }
.text-info { color: var(--info-color) !important; }
.text-dark { color: var(--text) !important; }

.fw-bold { font-weight: 600 !important; }

/* --------------------------------------------------------------------------
   Шапка
   -------------------------------------------------------------------------- */

.navbar {
    background: var(--navbar-color) !important;
    box-shadow: none;
    border-bottom: 1px solid var(--navbar-line);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    position: relative;
    z-index: 1030;
}

.navbar .container { max-width: 1320px; }

.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 44px;
    max-width: 280px;
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 600;
    color: var(--on-navbar) !important;
}

.brand-title {
    overflow: hidden;
    text-overflow: ellipsis;
}

.navbar-nav {
    align-items: center;
    gap: 2px;
}

.navbar .nav-link {
    color: var(--on-navbar) !important;
    opacity: 0.78;
    white-space: nowrap;
    font-size: 0.875rem;
    padding: 0.4rem 0.65rem !important;
    border-radius: var(--radius-sm);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.show {
    color: var(--on-navbar) !important;
    opacity: 1;
    background: var(--navbar-hover);
}

.navbar-toggler {
    border-color: var(--navbar-hover);
    padding: 0.3rem 0.5rem;
}

.navbar-toggler:focus { box-shadow: none; }

/* --------------------------------------------------------------------------
   Выпадающие меню
   -------------------------------------------------------------------------- */

.dropdown-menu {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 0.3rem;
    font-size: 0.875rem;
    color: var(--text);
    z-index: 1040;
}

.dropdown-item {
    border-radius: var(--radius-sm);
    padding: 0.42rem 0.6rem;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--surface-muted);
    color: var(--text);
}

.dropdown-item:active { background: var(--primary-soft); color: var(--text); }

.dropdown-divider { border-top-color: var(--border); }

.dropdown-submenu { position: relative; }

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
    display: none;
}

.dropdown-submenu:hover .dropdown-menu { display: block; }

/* --------------------------------------------------------------------------
   Каркас страницы и боковая навигация
   -------------------------------------------------------------------------- */

.app-shell {
    display: flex;
    flex: 1 0 auto;
    gap: 0;
    align-items: flex-start;
}

.sidebar-nav {
    position: sticky;
    top: 20px;
    flex: 0 0 auto;
    /* Ширины хватает самой длинной подписи («Пользователи») без переноса */
    width: 104px;
    margin: 20px 0 0 16px;
    padding: 8px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 9px 4px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.6875rem;
    line-height: 1.25;
    text-align: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-widget i {
    font-size: 1.1rem;
    color: var(--text-muted);
    transition: color 0.15s ease;
}

.nav-widget:hover {
    background: var(--surface-muted);
    color: var(--text);
    text-decoration: none;
}

.nav-widget:hover i { color: var(--primary-strong); }

/* Текущий раздел. В спокойной палитре акцентный цвет близок к цвету обычного
   текста, поэтому одного оттенка мало — добавляем заливку и полосу слева. */
.nav-widget.active {
    background: var(--surface-sunken);
    color: var(--text);
    font-weight: 500;
    box-shadow: inset 3px 0 0 var(--primary-strong);
}

.nav-widget.active i { color: var(--primary-strong); }

main.container { padding-bottom: 3rem; }

/* --------------------------------------------------------------------------
   Подвал продукта
   -------------------------------------------------------------------------- */

.site-footer {
    flex: 0 0 auto;
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.site-footer__inner {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.site-footer__product {
    display: inline-flex;
    align-items: center;
}

.site-footer__logo {
    display: block;
    width: 120px;
    height: 30px;
    max-width: 120px;
    max-height: 30px;
    object-fit: contain;
    object-position: left center;
}

.site-footer__copyright {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px 16px;
    color: var(--text-muted);
    font-size: 0.8125rem;
    text-align: right;
}

.site-footer__copyright a {
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   Карточки
   -------------------------------------------------------------------------- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: none;
    transition: border-color 0.15s ease;
}

/* Ховер-эффекты со сдвигом и тенью убраны намеренно: список карточек
   не должен «дышать» под курсором. */
.card:hover {
    transform: none;
    box-shadow: none;
}

.card-header {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: var(--radius) var(--radius) 0 0 !important;
    padding: 0.85rem 1.1rem;
    font-weight: 600;
    color: var(--text) !important;
}

/* Разноцветные шапки карточек (bg-primary/success/...) — основной источник
   пестроты. Приводим их к единому светлому виду, оставляя лишь тонкую
   цветную линию сверху как смысловой маркер. */
.card-header[class*="bg-"],
.modal-header[class*="bg-"] {
    background: var(--surface) !important;
    color: var(--text) !important;
}

.card-header[class*="bg-"] h1, .card-header[class*="bg-"] h2,
.card-header[class*="bg-"] h3, .card-header[class*="bg-"] h4,
.card-header[class*="bg-"] h5, .card-header[class*="bg-"] h6,
.card-header[class*="bg-"] p, .card-header[class*="bg-"] span,
.card-header[class*="bg-"] small, .card-header[class*="bg-"] strong,
.card-header[class*="bg-"] div, .card-header[class*="bg-"] label,
.modal-header[class*="bg-"] h1, .modal-header[class*="bg-"] h2,
.modal-header[class*="bg-"] h3, .modal-header[class*="bg-"] h4,
.modal-header[class*="bg-"] h5, .modal-header[class*="bg-"] h6,
.modal-header[class*="bg-"] p, .modal-header[class*="bg-"] span {
    color: var(--text) !important;
}

.card-header.text-white,
.card-header .text-white,
.modal-header.text-white,
.modal-header .text-white {
    color: var(--text) !important;
}

/* Полупрозрачный белый текст на светлой шапке был бы нечитаем.
   Селектор с [class*="bg-"] нужен, чтобы перебить правило для вложенных
   элементов цветных шапок выше. */
.card-header .text-white-50,
.card-header[class*="bg-"] .text-white-50,
.modal-header .text-white-50,
.modal-header[class*="bg-"] .text-white-50 {
    color: var(--text-secondary) !important;
}

.card-header i, .modal-header i { color: var(--text-secondary); }

.card-header a:not(.btn) { color: var(--primary-strong) !important; }

/* Кнопки, рассчитанные на тёмную шапку, переводим в нейтральный вид */
.card-header .btn-light,
.card-header .btn-outline-light,
.modal-header .btn-light,
.modal-header .btn-outline-light {
    background: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text) !important;
}

.card-header .btn-light:hover,
.card-header .btn-outline-light:hover {
    background: var(--surface-muted) !important;
    color: var(--text) !important;
}

.card-body { padding: 1.1rem; }

.card-title {
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.card-footer {
    background: var(--surface-muted);
    border-top: 1px solid var(--border);
    border-radius: 0 0 var(--radius) var(--radius);
}

/* Крупная карточка-заголовок страницы */
.hero-card {
    background: var(--surface) !important;
    border: 1px solid var(--border);
}

.hero-card .card-body { padding: 1.35rem 1.5rem; }

.hero-card h1, .hero-card h2, .hero-card h4 { margin-bottom: 0.25rem; }

/* Плитка с показателем */
.widget-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.widget-card h2, .widget-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0.55rem 0 0.15rem;
}

.widget-card p {
    color: var(--text-muted);
    font-size: 0.8125rem;
    margin-bottom: 0;
}

.icon-bubble {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--primary-soft);
    color: var(--primary-strong);
    font-size: 1.05rem;
    box-shadow: none;
}

.eyebrow {
    display: inline-flex;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.6875rem;
    margin-bottom: 4px;
}

.glass-panel {
    border-radius: var(--radius);
    background: var(--surface-muted);
    border: 1px solid var(--border);
}

/* --------------------------------------------------------------------------
   Кнопки
   -------------------------------------------------------------------------- */

/* Высота обычной кнопки совпадает с высотой поля ввода (38px),
   чтобы в строках фильтров и в input-group ничего не «ступенчатило». */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 38px;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    padding: 0.4rem 0.9rem;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn:focus, .btn:focus-visible {
    box-shadow: 0 0 0 3px var(--primary-ring);
}

.btn-lg { font-size: 0.9375rem; min-height: 42px; padding: 0.55rem 1.2rem; }
.btn-sm { font-size: 0.8125rem; min-height: 31px; padding: 0.25rem 0.6rem; }

/* Внутри составного поля кнопка всегда одной высоты с полем */
.input-group > .btn {
    min-height: 38px;
    font-size: 0.875rem;
    padding: 0.4rem 0.9rem;
}

/* Модификаторы input-group-sm/lg не должны менять скругление углов */
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
.input-group-sm > .btn,
.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text,
.input-group-lg > .btn {
    border-radius: var(--radius-sm);
}

.input-group > :not(:first-child):not(.dropdown-menu) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group > :not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn i { opacity: 0.85; }

.btn-primary {
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: var(--on-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--on-primary);
    filter: brightness(0.93);
    transform: none;
}

.btn-secondary {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text);
}

.btn-secondary:hover, .btn-secondary:focus {
    background: var(--surface-muted);
    border-color: var(--border-strong);
    color: var(--text);
}

.btn-success {
    background: var(--success-color);
    border: 1px solid var(--success-color);
    color: #ffffff;
}

.btn-success:hover, .btn-success:focus {
    background: var(--success-color);
    border-color: var(--success-color);
    color: #ffffff;
    filter: brightness(0.93);
}

.btn-danger {
    background: var(--danger-color);
    border: 1px solid var(--danger-color);
    color: #ffffff;
}

.btn-danger:hover, .btn-danger:focus {
    background: var(--danger-color);
    border-color: var(--danger-color);
    color: #ffffff;
    filter: brightness(0.93);
}

.btn-warning {
    background: var(--warning-soft);
    border: 1px solid #e2d3b4;
    color: #7d5b1e;
}

.btn-warning:hover, .btn-warning:focus {
    background: #f0e7d5;
    border-color: #d9c69f;
    color: #7d5b1e;
}

.btn-info {
    background: var(--info-color);
    border: 1px solid var(--info-color);
    color: #ffffff;
}

.btn-info:hover, .btn-info:focus {
    background: var(--info-color);
    border-color: var(--info-color);
    color: #ffffff;
    filter: brightness(0.93);
}

.btn-light {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
}

.btn-light:hover { background: var(--surface-muted); color: var(--text); }

.btn-dark {
    background: #3a424c;
    border: 1px solid #3a424c;
    color: #ffffff;
}

.btn-dark:hover { background: #2f363f; border-color: #2f363f; color: #ffffff; }

/* Контурные кнопки — единый спокойный вид, цветом отличается только текст */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-dark {
    background: var(--surface);
    border: 1px solid var(--border-strong);
}

.btn-outline-primary { color: var(--primary-strong); }
.btn-outline-secondary { color: var(--text-secondary); }
.btn-outline-success { color: var(--success-color); }
.btn-outline-danger { color: var(--danger-color); }
.btn-outline-warning { color: var(--warning-color); }
.btn-outline-info { color: var(--info-color); }
.btn-outline-dark { color: var(--text); }

.btn-outline-primary:hover, .btn-outline-primary:focus {
    background: var(--primary-soft);
    border-color: var(--primary-color);
    color: var(--primary-strong);
}

.btn-outline-secondary:hover, .btn-outline-secondary:focus {
    background: var(--surface-muted);
    border-color: var(--border-strong);
    color: var(--text);
}

.btn-outline-success:hover, .btn-outline-success:focus {
    background: var(--success-soft);
    border-color: var(--success-color);
    color: var(--success-color);
}

.btn-outline-danger:hover, .btn-outline-danger:focus {
    background: var(--danger-soft);
    border-color: var(--danger-color);
    color: var(--danger-color);
}

.btn-outline-warning:hover, .btn-outline-warning:focus {
    background: var(--warning-soft);
    border-color: var(--warning-color);
    color: var(--warning-color);
}

.btn-outline-info:hover, .btn-outline-info:focus {
    background: var(--info-soft);
    border-color: var(--info-color);
    color: var(--info-color);
}

.btn-outline-dark:hover, .btn-outline-dark:focus {
    background: var(--surface-muted);
    border-color: var(--border-strong);
    color: var(--text);
}

/* Неактивные кнопки должны читаться как подпись о состоянии,
   а не растворяться в карточке (контраст не ниже 4.5:1). */
.btn:disabled, .btn.disabled {
    opacity: 1;
    filter: none;
    background: var(--surface-muted);
    border-color: var(--border-strong);
    color: #5c646e;
    box-shadow: none;
}

.btn-group .btn { border-radius: var(--radius-sm); }

/* --------------------------------------------------------------------------
   Формы
   -------------------------------------------------------------------------- */

/* Подписи полей. Второе правило — страховка для шаблонов, где у <label>
   не проставлен класс form-label: иначе метка наследует размер body
   и шрифт «скачет» от формы к форме. */
.form-label,
form label:not(.form-check-label):not(.input-group-text):not(.btn):not(.option-item):not(.form-select):not(.nav-link) {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-secondary);
    margin-bottom: 0.3rem;
}

/* Модификаторы размера/цвета не должны менять вид подписи */
.form-label.small,
.form-label.text-muted,
form label.small,
form label.text-muted {
    font-size: 0.8125rem;
    color: var(--text-secondary) !important;
}

.form-check-label {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--text);
    margin-bottom: 0;
}

/* ЕДИНЫЙ РАЗМЕР ПОЛЕЙ.
   Модификаторы Bootstrap -sm/-lg намеренно приравнены к базовому размеру:
   на одной странице поля не должны отличаться высотой и кеглем. */
.form-control,
.form-select,
.form-control-sm,
.form-select-sm,
.form-control-lg,
.form-select-lg {
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    min-height: 38px;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text);
    background-color: var(--surface);
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* У select нужно место под стрелку */
.form-select,
.form-select-sm,
.form-select-lg {
    padding-right: 2.1rem;
    background-position: right 0.65rem center;
    background-size: 14px 11px;
}

.form-control::placeholder { color: var(--text-muted); opacity: 1; }

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-strong);
    box-shadow: 0 0 0 3px var(--primary-ring);
    background-color: var(--surface);
    color: var(--text);
}

/* Недоступное поле отличается только фоном: рамка остаётся такой же,
   иначе однотипные поля в одной строке выглядят по-разному. */
.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    background-color: var(--surface-muted);
    border-color: var(--border-strong);
    color: var(--text-secondary);
    opacity: 1;
}

/* Многострочное поле: та же рамка, высота задаётся числом строк */
textarea.form-control {
    min-height: 84px;
    line-height: 1.55;
    resize: vertical;
}

/* Поле выбора файла: кнопка внутри поля не должна ломать общую высоту */
.form-control[type="file"] {
    padding: 0.28rem 0.7rem;
}

.form-control[type="file"]::file-selector-button {
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.5;
    padding: 0.4rem 0.7rem;
    margin: -0.28rem 0.7rem -0.28rem -0.7rem;
    border: 0;
    border-right: 1px solid var(--border);
    border-radius: 0;
    background: var(--surface-muted);
    color: var(--text);
}

.form-control[type="file"]:hover::file-selector-button {
    background: var(--surface-sunken);
}

/* Поле выбора цвета: компактный образец той же высоты, что и соседние поля */
.form-control-color,
.form-control[type="color"] {
    width: 48px;
    min-width: 48px;
    flex: 0 0 auto;
    padding: 4px;
}

.form-control-color::-webkit-color-swatch { border: 0; border-radius: 3px; }
.form-control-color::-webkit-color-swatch-wrapper { padding: 0; }

/* Дата и время: у нативных виджетов свои отступы, выравниваем по общей сетке */
.form-control[type="date"],
.form-control[type="time"],
.form-control[type="datetime-local"] {
    line-height: 1.5;
}

.form-control[type="search"] { -webkit-appearance: none; appearance: none; }

.form-text { color: var(--text-muted); font-size: 0.8125rem; margin-top: 0.25rem; }

/* Флажок и его подпись выравниваем по центру строки.
   Инлайновые флажки и переключатели используют собственную раскладку Bootstrap. */
.form-check:not(.form-check-inline):not(.form-switch) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0;
    min-height: auto;
    margin-bottom: 0.25rem;
}

.form-check:not(.form-check-inline):not(.form-switch) > .form-check-input {
    float: none;
    margin-left: 0;
    margin-top: 0;
}

/* Флажок, стоящий в одной строке с полями ввода: занимает ту же высоту,
   поэтому его центр совпадает с центром соседних полей. */
.form-check.form-check-field:not(.form-check-inline):not(.form-switch) {
    min-height: 38px;
    margin-bottom: 0;
}

.form-check-input {
    border: 1px solid var(--border-strong);
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.form-check-input:focus {
    border-color: var(--primary-strong);
    box-shadow: 0 0 0 3px var(--primary-ring);
}

/* Составные поля: одинаковая высота и рамка у всех элементов группы */
.input-group > .form-control,
.input-group > .form-select,
.input-group > .btn,
.input-group-text {
    min-height: 38px;
    font-size: 0.875rem;
    line-height: 1.5;
}

.input-group-text {
    background: var(--surface-muted);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    padding: 0.4rem 0.7rem;
    font-weight: 400;
}

/* --------------------------------------------------------------------------
   Уведомления и статусы
   -------------------------------------------------------------------------- */

.alert {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface-muted);
    color: var(--text);
    font-size: 0.875rem;
    padding: 0.7rem 1rem;
}

.alert-success { background: var(--success-soft); border-color: #d5e3d8; color: #35624a; }
.alert-danger  { background: var(--danger-soft);  border-color: #ecd7d4; color: #8f4239; }
.alert-warning { background: var(--warning-soft); border-color: #e8dcc3; color: #7d5b1e; }
.alert-info    { background: var(--info-soft);    border-color: #d8e0e6; color: #3f6274; }
.alert-primary { background: var(--primary-soft); border-color: var(--primary-ring); color: var(--text); }
.alert-secondary, .alert-light, .alert-dark { background: var(--neutral-soft); border-color: var(--border); color: var(--text); }

.alert .btn-close { filter: none; opacity: 0.45; }

/* Бейджи-статусы: мягкая заливка вместо насыщенного пятна */
.badge {
    padding: 0.28em 0.6em;
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 0.75rem;
    background: var(--neutral-soft);
    color: var(--text-secondary);
}

.badge.bg-primary   { background: var(--primary-soft) !important; color: var(--primary-strong) !important; }
.badge.bg-success   { background: var(--success-soft) !important; color: var(--success-color) !important; }
.badge.bg-danger    { background: var(--danger-soft)  !important; color: var(--danger-color)  !important; }
.badge.bg-warning   { background: var(--warning-soft) !important; color: var(--warning-color) !important; }
.badge.bg-info      { background: var(--info-soft)    !important; color: var(--info-color)    !important; }
.badge.bg-secondary { background: var(--neutral-soft) !important; color: var(--text-secondary) !important; }
.badge.bg-light     { background: var(--neutral-soft) !important; color: var(--text-secondary) !important; }
.badge.bg-dark      { background: var(--surface-sunken) !important; color: var(--text) !important; }

/* Счётчик непрочитанных — единственное место, где яркая точка уместна */
.notif-counter.badge.bg-danger {
    background: var(--danger-color) !important;
    color: #ffffff !important;
    border-radius: var(--radius-pill);
    font-size: 0.65rem;
    padding: 0.15em 0.4em;
}

/* Фоновые утилиты вне карточек */
.bg-primary { background-color: var(--primary-color) !important; }
.bg-success { background-color: var(--success-color) !important; }
.bg-danger  { background-color: var(--danger-color) !important; }
.bg-info    { background-color: var(--info-color) !important; }
.bg-warning { background-color: var(--warning-soft) !important; }
.bg-secondary { background-color: var(--secondary-color) !important; }
.bg-light   { background-color: var(--surface-muted) !important; }

.border-primary { border-color: var(--primary-color) !important; }
.border { border-color: var(--border) !important; }
.border-top, .border-bottom, .border-start, .border-end { border-color: var(--border) !important; }

/* --------------------------------------------------------------------------
   Таблицы и списки
   -------------------------------------------------------------------------- */

/* На macOS полосы прокрутки скрыты, и широкая таблица выглядит обрезанной.
   Показываем постоянный скроллбар, чтобы прокрутка была очевидна.
   Свойство scrollbar-width здесь не задаём: при нём Chrome игнорирует
   ::-webkit-scrollbar и снова прячет полосу. */
.table-responsive::-webkit-scrollbar {
    height: 9px;
    -webkit-appearance: none;
}

.table-responsive::-webkit-scrollbar-track {
    background: var(--surface-muted);
    border-radius: var(--radius-pill);
}

.table-responsive::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--radius-pill);
}

.table {
    font-size: 0.875rem;
    color: var(--text);
    border-color: var(--border);
    margin-bottom: 0;
}

.table > thead {
    background: var(--surface-muted);
}

.table > thead th {
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    padding: 0.65rem 0.75rem;
    white-space: nowrap;
}

.table > tbody td {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--surface-muted);
    color: var(--text);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: transparent;
}

.list-group-item {
    border-color: var(--border);
    padding: 0.7rem 0.9rem;
    font-size: 0.875rem;
    color: var(--text);
}

.list-group-item:first-child { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.list-group-item:last-child { border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }

.list-group-item-action:hover { background: var(--surface-muted); }

.list-group-item.active {
    background: var(--primary-soft);
    border-color: var(--border);
    color: var(--text);
}

/* --------------------------------------------------------------------------
   Вкладки, пагинация, прогресс
   -------------------------------------------------------------------------- */

.nav-tabs {
    border-bottom: 1px solid var(--border);
    gap: 2px;
}

.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.55rem 0.9rem;
    background: transparent;
}

.nav-tabs .nav-link:hover:not(.active) {
    background: transparent;
    border-radius: 0;
    color: var(--text);
    border-bottom-color: var(--border-strong);
}

.nav-tabs .nav-link.active {
    background: transparent;
    color: var(--primary-strong);
    border-bottom-color: var(--primary-color);
    border-radius: 0;
}

.nav-pills .nav-link {
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    padding: 0.38rem 0.75rem;
}

.nav-pills .nav-link:hover:not(.active) { background: var(--surface-muted); color: var(--text); }

.nav-pills .nav-link.active {
    background: var(--primary-soft);
    color: var(--primary-strong);
}

.pagination { font-size: 0.875rem; }

.pagination .page-link {
    color: var(--text-secondary);
    border-color: var(--border);
    padding: 0.36rem 0.7rem;
}

.pagination .page-link:hover { background: var(--surface-muted); color: var(--text); }

.pagination .active .page-link,
.pagination .page-item.active .page-link {
    background: var(--primary-soft);
    border-color: var(--border);
    color: var(--primary-strong);
}

.pagination .disabled .page-link { color: var(--text-muted); background: var(--surface); }

.progress {
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
}

.progress-bar {
    background: var(--primary-color);
    transition: width 0.3s ease;
}

/* --------------------------------------------------------------------------
   Модальные окна
   -------------------------------------------------------------------------- */

.modal-content {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
}

.modal-header {
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 0.9rem 1.1rem;
}

.modal-title { font-size: 1rem; font-weight: 600; }

.modal-body { padding: 1.1rem; }

.modal-footer {
    border-top: 1px solid var(--border);
    padding: 0.8rem 1.1rem;
}

/* На светлой шапке инверсия крестика больше не нужна */
.modal-header .btn-close { filter: none; opacity: 0.5; }

/* --------------------------------------------------------------------------
   Экзамен: вопросы, варианты ответов, таймер
   -------------------------------------------------------------------------- */

.question-card { min-height: 420px; }

.option-item {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 0.7rem 0.9rem;
    margin: 6px 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.option-item:hover {
    background: var(--surface-muted);
    border-color: var(--border-strong);
}

.option-item:has(input:checked),
.option-item.selected {
    background: var(--primary-soft);
    border-color: var(--primary-color);
}

.option-item input { flex: 0 0 auto; }

.question-nav-btn {
    font-size: 0.8125rem;
    padding: 0.35rem 0;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
}

.question-nav-btn:hover {
    background: var(--surface-muted);
    border-color: var(--border-strong);
    color: var(--text);
}

.question-nav-btn.answered {
    background: var(--success-soft);
    border-color: #c9dccf;
    color: var(--success-color);
}

.question-nav-btn.active {
    background: var(--primary-soft) !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-strong) !important;
    font-weight: 600;
}

.timer {
    font-size: 1.05rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
    border: 1px solid var(--border);
    color: var(--text);
}

/* Мигание убрано намеренно: движение в поле зрения мешает сосредоточиться.
   О нехватке времени сообщает смена цвета. */
.timer.warning-timer {
    animation: none;
    background: var(--warning-soft);
    border-color: #e8dcc3;
    color: var(--warning-color);
}

/* --------------------------------------------------------------------------
   Аватары и превью тем
   -------------------------------------------------------------------------- */

.avatar-img, .avatar-initials { flex: 0 0 auto; }

.theme-preview {
    width: 100%;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    overflow: hidden;
}

.theme-preview-bar { height: 22px; }

.theme-preview-body {
    display: flex;
    gap: 8px;
    padding: 14px;
    background: var(--surface-page);
}

.theme-preview-swatch {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.theme-preview-sm {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* --------------------------------------------------------------------------
   Режим сдачи экзамена: убираем всё, что уводит внимание от вопроса
   -------------------------------------------------------------------------- */

/* Скрываем боковое меню и ссылки на другие разделы — во время экзамена
   в шапке остаются только уведомления и меню пользователя. */
body.exam-focus .sidebar-nav { display: none; }

body.exam-focus .navbar .nav-item:not(.dropdown) { display: none; }

body.exam-focus .navbar-toggler { display: none; }

.exam-footer-spacer { height: 88px; }

.exam-finish-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1020;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 0.7rem 0;
}

.exam-finish-footer .container {
    max-width: 1320px;
}

/* --------------------------------------------------------------------------
   Движение
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* --------------------------------------------------------------------------
   Мобильная адаптация
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    body { font-size: 0.9375rem; }

    .app-shell { display: block; }

    .sidebar-nav {
        position: static;
        width: auto;
        height: auto;
        margin: 12px;
        flex-direction: row;
        overflow-x: auto;
        gap: 4px;
        /* Тень у края появляется, только когда лента прокручивается, —
           иначе крайний пункт выглядит обрезанным без причины.
           Порядок важен: непрозрачные слои (local) идут первыми и закрывают
           тени (scroll), пока прокручивать нечего. */
        background:
            linear-gradient(to right, var(--surface), var(--surface)) 0 0 / 20px 100% no-repeat local,
            linear-gradient(to left, var(--surface), var(--surface)) 100% 0 / 20px 100% no-repeat local,
            radial-gradient(farthest-side at 0 50%, rgba(35, 42, 49, 0.20), rgba(35, 42, 49, 0)) 0 0 / 14px 100% no-repeat scroll,
            radial-gradient(farthest-side at 100% 50%, rgba(35, 42, 49, 0.20), rgba(35, 42, 49, 0)) 100% 0 / 14px 100% no-repeat scroll,
            var(--surface);
    }

    /* Горизонтальная лента: пункты делят ширину, но не сжимаются уже 78px
       и при нехватке места прокручиваются. */
    .nav-widget { min-width: 78px; flex: 1 0 auto; }

    .nav-widget.active { box-shadow: inset 0 -3px 0 var(--primary-strong); }

    .container { padding-left: 14px; padding-right: 14px; }

    .site-footer__inner {
        min-height: auto;
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .site-footer__copyright {
        flex-direction: column;
        justify-content: flex-start;
        gap: 2px;
        text-align: left;
    }

    .card-body { padding: 0.9rem; }

    #question-nav .row {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }

    #question-nav .col-3 { flex: 0 0 auto; width: 66px; }

    h2.card-title { font-size: 1.2rem; }
}