/* ============================================
   РЖД-Медицина: элегантный корпоративный стиль
   ============================================ */

/* Системные шрифты — быстрее, чем Google Fonts */
body, h1, h2, h3, h4, h5, h6, .card, .btn, input, select, textarea {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}




:root {
    --rzd-red:        #D32F2F;   /* Мягкий красный (не ядрёный) */
    --rzd-red-dark:   #B71C1C;   /* Для hover */
    --rzd-red-soft:   #FCEAEA;   /* Светлая подложка */
    --rzd-gray:       #5F6368;
    --rzd-gray-light: #F5F6F7;
    --rzd-border:     #E4E6E8;
    --rzd-dark:       #202124;
    --rzd-white:      #FFFFFF;
}

/* ============================================
   1. ТИПОГРАФИКА
   ============================================ */
body {
    font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    color: var(--rzd-dark) !important;
    background: var(--rzd-gray-light) !important;
}

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

a { color: var(--rzd-red); transition: color 0.15s ease; }
a:hover { color: var(--rzd-red-dark); text-decoration: none; }

/* ============================================
   2. КНОПКИ: только главные красные
   ============================================ */

/* Главные CTA — мягкий красный с тенью */
.btn-primary,
button[type="submit"].btn-primary,
.btn-success {
    background: var(--rzd-red) !important;
    background-image: none !important;
    border: 1px solid var(--rzd-red-dark) !important;
    color: var(--rzd-white) !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.15s ease !important;
}

.btn-primary:hover,
.btn-success:hover {
    background: var(--rzd-red-dark) !important;
    border-color: var(--rzd-red-dark) !important;
    box-shadow: 0 2px 6px rgba(211, 47, 47, 0.25) !important;
}

/* Обычные кнопки — светлые с серой рамкой */
.btn-secondary,
.btn-default,
.btn-outline-secondary,
.cancel-btn {
    background: var(--rzd-white) !important;
    background-image: none !important;
    border: 1px solid var(--rzd-border) !important;
    color: var(--rzd-dark) !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}

.btn-secondary:hover,
.btn-default:hover {
    background: var(--rzd-gray-light) !important;
    border-color: var(--rzd-gray) !important;
}

/* Не красить btn-info, btn-dark, btn-block автопоиска в красный */
.btn-info,
.btn-dark {
    background: var(--rzd-gray) !important;
    background-image: none !important;
    border: 1px solid var(--rzd-gray) !important;
    color: var(--rzd-white) !important;
}

.btn-info:hover,
.btn-dark:hover {
    background: #404346 !important;
}

/* ============================================
   3. КАРТОЧКИ (карточки метрик, формы)
   ============================================ */

.card {
    background: var(--rzd-white) !important;
    border: 1px solid var(--rzd-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
}

/* Заголовок карточки — БЕЛЫЙ, а не красный */
.card > .card-header,
.card .card-header {
    background: var(--rzd-white) !important;
    background-image: none !important;
    color: var(--rzd-dark) !important;
    border-bottom: 1px solid var(--rzd-border) !important;
    padding: 16px 20px !important;
    font-weight: 600 !important;
    border-left: 4px solid var(--rzd-red) !important;
    border-radius: 0 !important;
}

.card .card-header h1,
.card .card-header h2,
.card .card-header h3,
.card .card-header h4,
.card .card-header h5,
.card .card-header .card-title {
    color: var(--rzd-dark) !important;
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

.card-body {
    padding: 20px !important;
    background: var(--rzd-white) !important;
}

/* ============================================
   4. SIDEBAR (боковое меню)
   ============================================ */

.sidebar,
.app-sidebar,
aside.sidebar {
    background: var(--rzd-white) !important;
    border-right: 1px solid var(--rzd-border) !important;
}

.sidebar .nav-link,
.app-sidebar .nav-link,
aside .nav-link {
    color: var(--rzd-dark) !important;
    border-radius: 8px !important;
    margin: 2px 8px !important;
    padding: 10px 14px !important;
    font-weight: 500 !important;
    transition: all 0.15s ease !important;
}

.sidebar .nav-link:hover,
.app-sidebar .nav-link:hover {
    background: var(--rzd-red-soft) !important;
    color: var(--rzd-red) !important;
}

/* Активный пункт — мягкая подложка с красным текстом, а не заливка */
.sidebar .nav-link.active,
.app-sidebar .nav-link.active,
.sidebar .nav-item.active > .nav-link,
aside .nav-link.active {
    background: var(--rzd-red-soft) !important;
    color: var(--rzd-red) !important;
    font-weight: 600 !important;
    border-left: 3px solid var(--rzd-red) !important;
}

/* Иконки в sidebar */
.sidebar .nav-link i,
.app-sidebar .nav-link i {
    color: inherit !important;
    margin-right: 10px !important;
}

/* Секции/заголовки в sidebar */
.sidebar .sidebar-header,
.app-sidebar .sidebar-header {
    color: var(--rzd-gray) !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
    padding: 16px 16px 6px !important;
    font-weight: 700 !important;
}

/* ============================================
   5. ПРОГРЕСС-БАРЫ
   ============================================ */

.progress {
    background: var(--rzd-gray-light) !important;
    border-radius: 6px !important;
    height: 8px !important;
    overflow: hidden !important;
}

.progress-bar,
.progress .progress-bar {
    background: var(--rzd-red) !important;
    background-image: none !important;
    border-radius: 6px !important;
}

/* ============================================
   6. БЕЙДЖИ И МЕТКИ
   ============================================ */

.badge-primary,
.badge.bg-primary {
    background: var(--rzd-red) !important;
    color: var(--rzd-white) !important;
}

.badge {
    border-radius: 4px !important;
    font-weight: 500 !important;
}

/* Бейдж "Инфоклиника" на карточке курса */
.card .badge,
.course-card .badge {
    background: var(--rzd-red-soft) !important;
    color: var(--rzd-red-dark) !important;
    font-weight: 600 !important;
    padding: 5px 10px !important;
}

/* ============================================
   7. ФОРМЫ
   ============================================ */

.form-control {
    border: 1px solid var(--rzd-border) !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    background: var(--rzd-white) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.form-control:focus {
    border-color: var(--rzd-red) !important;
    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.12) !important;
    outline: none !important;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--rzd-red) !important;
}

.form-check-input:checked {
    background-color: var(--rzd-red) !important;
    border-color: var(--rzd-red) !important;
}

/* ============================================
   8. ТАБЛИЦЫ
   ============================================ */

.table thead th {
    background: var(--rzd-gray-light) !important;
    color: var(--rzd-dark) !important;
    font-weight: 600 !important;
    border-bottom: 2px solid var(--rzd-red) !important;
    text-transform: none !important;
}

.table-hover tbody tr:hover {
    background: var(--rzd-red-soft) !important;
}

/* ============================================
   9. HEADER (шапка сайта)
   ============================================ */

.app-header,
.navbar {
    background: var(--rzd-white) !important;
    border-bottom: 1px solid var(--rzd-border) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

.app-header .nav-link,
.navbar .nav-link {
    color: var(--rzd-dark) !important;
    font-weight: 500 !important;
}

.app-header .nav-link:hover {
    color: var(--rzd-red) !important;
}

/* ============================================
   10. ПАГИНАЦИЯ
   ============================================ */

.pagination .page-link {
    color: var(--rzd-dark) !important;
    border-color: var(--rzd-border) !important;
    background: var(--rzd-white) !important;
}

.pagination .page-item.active .page-link {
    background: var(--rzd-red) !important;
    border-color: var(--rzd-red) !important;
    color: var(--rzd-white) !important;
}

.pagination .page-link:hover {
    background: var(--rzd-red-soft) !important;
    color: var(--rzd-red) !important;
}

/* ============================================
   11. ФОРМА ВХОДА — мягкий вид
   ============================================ */

/* Заголовок "Мой аккаунт" */
.auth-card .card-header,
.login-card .card-header {
    background: var(--rzd-white) !important;
    color: var(--rzd-dark) !important;
    border-left: none !important;
    border-bottom: 2px solid var(--rzd-red) !important;
}

/* Поля входа — шире, с отступом */
input[name="email"],
input[name="password"],
input[type="email"],
input[type="password"] {
    height: 48px !important;
    border-radius: 8px !important;
    font-size: 15px !important;
}

/* ============================================
   12. БАННЕР сверху — светлый, тонкий акцент
   ============================================ */

.breadcrumb-section {
    background: var(--rzd-white) !important;
    background-image: none !important;
    border-bottom: 3px solid var(--rzd-red) !important;
    padding: 28px 0 !important;
}

.breadcrumb-section .blakish-overlay {
    display: none !important;
}

.breadcrumb-section h1,
.breadcrumb-section h2,
.breadcrumb-section .breadcrumb-head,
.breadcrumb-section .breadcrumb-item,
.breadcrumb-section .breadcrumb-item.active {
    color: var(--rzd-dark) !important;
    font-weight: 600 !important;
}

.breadcrumb-section .breadcrumb-item a {
    color: var(--rzd-red) !important;
}

/* Убираем жёлтое свечение снизу */
.breadcrumb-section::after {
    display: none !important;
}

/* ============================================
   13. DROPDOWN, TABS
   ============================================ */

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--rzd-red-soft) !important;
    color: var(--rzd-red) !important;
}

.dropdown-item.active {
    background: var(--rzd-red) !important;
    color: var(--rzd-white) !important;
}

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
    background: var(--rzd-red-soft) !important;
    color: var(--rzd-red) !important;
    border-color: transparent transparent var(--rzd-red) transparent !important;
    border-bottom: 2px solid var(--rzd-red) !important;
    font-weight: 600 !important;
}

/* ============================================
   14. Убираем навязчивый красно-градиентный фон
   ============================================ */

.gradient-bg {
    background: var(--rzd-red) !important;
    background-image: none !important;
}
/* ============================================
   ВАРИАНТЫ ОТВЕТОВ В ТЕСТАХ (возвращены)
   ============================================ */

/* Обёртка варианта — карточка с рамкой */
label:has(> input[type="radio"]),
label:has(> input[type="checkbox"]) {
    display: flex !important;
    align-items: center !important;
    padding: 14px 18px !important;
    margin-bottom: 10px !important;
    background: #FFFFFF !important;
    border: 2px solid #E4E6E8 !important;
    border-radius: 8px !important;
    color: #202124 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    line-height: 1.4 !important;
}

label:has(> input[type="radio"]):hover,
label:has(> input[type="checkbox"]):hover {
    border-color: #D32F2F !important;
    background: #FCEAEA !important;
}

/* Выбранный вариант */
label:has(> input[type="radio"]:checked),
label:has(> input[type="checkbox"]:checked) {
    border-color: #D32F2F !important;
    background: #FCEAEA !important;
    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.12) !important;
}

/* Нативный radio/checkbox скрываем */
label > input[type="radio"],
label > input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Кружок .cr — кастомный индикатор */
label .cr {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    border: 2px solid #5F6368 !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    margin-right: 14px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    transition: all 0.15s ease !important;
}

label .cr .cr-icon {
    color: transparent !important;
    font-size: 10px !important;
    line-height: 1 !important;
}

label:hover .cr {
    border-color: #D32F2F !important;
}

/* Отмеченный — красный кружок */
label input[type="radio"]:checked ~ .cr,
label input[type="checkbox"]:checked ~ .cr {
    border-color: #D32F2F !important;
    background: #D32F2F !important;
}

label input[type="radio"]:checked ~ .cr .cr-icon,
label input[type="checkbox"]:checked ~ .cr .cr-icon {
    color: #FFFFFF !important;
}

/* ============================================
   КАРТОЧКИ МЕТРИК на дашборде (.avg-card-head)
   ============================================ */

.avg-card-head {
    background: #FFFFFF !important;
    background-image: none !important;
    color: #202124 !important;
    border-left: 4px solid #D32F2F !important;
    border-bottom: 1px solid #E4E6E8 !important;
    padding: 14px 20px !important;
    border-radius: 0 !important;
}

.avg-card-head h5,
.avg-card-head h4,
.avg-card-head h3 {
    color: #202124 !important;
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

/* Убираем градиент с карточек целиком */
.avg-card,
.card.avg-card,
[class*="avg-card"] {
    background: #FFFFFF !important;
    background-image: none !important;
    border: 1px solid #E4E6E8 !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
}