/* ============================================================
   ROOT VARIABLES - СВЕТЛАЯ ТЕМА
   ============================================================ */
:root {
    --bg-primary: #eee;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #6c757d;
    --border-color: #eaeaea;
    --card-bg: #ffffff;
    --header-bg: #ffffff;
    --dropdown-bg: #ffffff;
    --input-bg: #ffffff;
    --input-border: #ced4da;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --accent-color: #0d6efd;
    --accent-hover: #0b5ed7;
    --success: #198754;
    --danger: #dc3545;
    --warning: #ffc107;
    --info: #0dcaf0;
    
    /* Цвета обычного sidebar в светлой теме: глубокий синий + cyan-акцент. */
    --sidebar-bg-start: #12345b;
    --sidebar-bg-mid: #0f2744;
    --sidebar-bg-end: #0b1b31;
    --sidebar-text: rgba(255, 255, 255, 0.9);
    --sidebar-text-hover: #ffffff;
    --sidebar-active-bg: rgba(56, 189, 248, 0.18);
    --sidebar-hover-bg: rgba(255, 255, 255, 0.1);
    --sidebar-active-border: rgba(125, 211, 252, 0.35);
    
    /* Цвета для таблиц */
    --table-hover-bg: rgba(0, 0, 0, 0.075);
    --table-striped-bg: rgba(0, 0, 0, 0.05);
    --table-active-bg: rgba(0, 0, 0, 0.1);
    
    /* Переменные для кнопок */
    --btn-primary-bg: #0d6efd;
    --btn-primary-border: #0d6efd;
    --btn-primary-hover: #0b5ed7;
}

/* ============================================================
   ТЕМНАЯ ТЕМА
   ============================================================ */
[data-theme="dark"],
body.dark-mode {
    --bg-primary: #41345b;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-color: #334155;
    --card-bg: #1e293b;
    --header-bg: #282828;
    --dropdown-bg: #1e293b;
    --input-bg: #0f172a;
    --input-border: #475569;
    --shadow-color: rgba(0, 0, 0, 0.5);
    --accent-color: #818cf8;
    --accent-hover: #a5b4fc;
    
    /* Градиент сайдбара в тёмной теме — чёрный → фиолетовый (#673AB7) → чёрный */
    --sidebar-bg-start: #000000;
    --sidebar-bg-mid: #673AB7;    /* deep purple 500 */
    --sidebar-bg-end: #000000;
    --sidebar-text: #94a3b8;
    --sidebar-text-hover: #ffffff;
    --sidebar-active-bg: rgba(129, 140, 248, 0.2);
    --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
    --sidebar-active-border: rgba(129, 140, 248, 0.3);
    
    --table-hover-bg: rgba(129, 140, 248, 0.08);
    --table-striped-bg: rgba(255, 255, 255, 0.03);
    --table-active-bg: rgba(129, 140, 248, 0.12);
    
    --btn-primary-bg: #818cf8;
    --btn-primary-border: #818cf8;
    --btn-primary-hover: #a5b4fc;
}

/* ============================================================
   БАЗОВЫЕ СТИЛИ
   ============================================================ */
body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease !important;
}

/* ============================================================
   КНОПКИ
   ============================================================ */

/* Основные кнопки */
.btn-primary {
    background-color: var(--btn-primary-bg) !important;
    border-color: var(--btn-primary-border) !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--btn-primary-hover) !important;
    border-color: var(--btn-primary-hover) !important;
    color: #ffffff !important;
}

.btn-secondary {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: #5a6268 !important;
    border-color: #5a6268 !important;
    color: #ffffff !important;
}

.btn-success {
    background-color: var(--success) !important;
    border-color: var(--success) !important;
    color: #ffffff !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: #157347 !important;
    border-color: #157347 !important;
    color: #ffffff !important;
}

.btn-danger {
    background-color: var(--danger) !important;
    border-color: var(--danger) !important;
    color: #ffffff !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: #bb2d3b !important;
    border-color: #bb2d3b !important;
    color: #ffffff !important;
}

.btn-warning {
    background-color: var(--warning) !important;
    border-color: var(--warning) !important;
    color: #000000 !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background-color: #ffca2c !important;
    border-color: #ffca2c !important;
    color: #000000 !important;
}

.btn-info {
    background-color: var(--info) !important;
    border-color: var(--info) !important;
    color: #000000 !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background-color: #3dd5f3 !important;
    border-color: #3dd5f3 !important;
    color: #000000 !important;
}

.btn-light {
    background-color: #f8f9fa !important;
    border-color: #f8f9fa !important;
    color: #000000 !important;
}

.btn-light:hover,
.btn-light:focus,
.btn-light:active {
    background-color: #e9ecef !important;
    border-color: #e9ecef !important;
    color: #000000 !important;
}

.btn-dark {
    background-color: #212529 !important;
    border-color: #212529 !important;
    color: #ffffff !important;
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
    background-color: #1c1f23 !important;
    border-color: #1c1f23 !important;
    color: #ffffff !important;
}

/* Outline кнопки */
.btn-outline-primary {
    background-color: transparent !important;
    border-color: var(--accent-color) !important;
    color: var(--accent-color) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: #ffffff !important;
}

.btn-outline-secondary {
    background-color: transparent !important;
    border-color: #6c757d !important;
    color: #6c757d !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
}

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

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active {
    background-color: var(--success) !important;
    border-color: var(--success) !important;
    color: #ffffff !important;
}

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

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active {
    background-color: var(--danger) !important;
    border-color: var(--danger) !important;
    color: #ffffff !important;
}

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

.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:active {
    background-color: var(--warning) !important;
    border-color: var(--warning) !important;
    color: #000000 !important;
}

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

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active {
    background-color: var(--info) !important;
    border-color: var(--info) !important;
    color: #000000 !important;
}

.btn-outline-light {
    background-color: transparent !important;
    border-color: #f8f9fa !important;
    color: #f8f9fa !important;
}

.btn-outline-light:hover,
.btn-outline-light:focus,
.btn-outline-light:active {
    background-color: #f8f9fa !important;
    border-color: #f8f9fa !important;
    color: #000000 !important;
}

.btn-outline-dark {
    background-color: transparent !important;
    border-color: #212529 !important;
    color: #212529 !important;
}

.btn-outline-dark:hover,
.btn-outline-dark:focus,
.btn-outline-dark:active {
    background-color: #212529 !important;
    border-color: #212529 !important;
    color: #ffffff !important;
}

/* Ссылки-кнопки */
.btn-link {
    color: var(--accent-color) !important;
    background-color: transparent !important;
    border: none !important;
}

.btn-link:hover,
.btn-link:focus {
    color: var(--accent-hover) !important;
    text-decoration: underline !important;
    background-color: transparent !important;
}

/* ============================================================
   САЙДБАР - ИСПРАВЛЕН КОНФЛИКТ
   ============================================================ */

/* ✅ Применяем стили ТОЛЬКО для не-админ сайдбара */
.sidebar:not(.admin-sidebar) {
    background: linear-gradient(160deg, var(--sidebar-bg-start) 0%, var(--sidebar-bg-mid) 50%, var(--sidebar-bg-end) 100%) !important;
    border-right: 1px solid var(--border-color) !important;
    transition: background 0.3s ease !important;
    color: var(--sidebar-text) !important;
}

.sidebar:not(.admin-sidebar) .sidebar-link {
    color: var(--sidebar-text) !important;
    transition: all 0.3s ease !important;
}

.sidebar:not(.admin-sidebar) .sidebar-link:hover,
.sidebar:not(.admin-sidebar) .sidebar-link.active {
    background-color: var(--sidebar-active-bg) !important;
    color: var(--sidebar-text-hover) !important;
    border-radius: 8px !important;
}

.sidebar:not(.admin-sidebar) .menu-section-toggle {
    color: var(--sidebar-text) !important;
}

.sidebar:not(.admin-sidebar) .menu-section-toggle:hover {
    background-color: var(--sidebar-hover-bg) !important;
    color: var(--sidebar-text-hover) !important;
}

.sidebar:not(.admin-sidebar) .menu-section-content .sidebar-link {
    color: var(--sidebar-text) !important;
}

.sidebar:not(.admin-sidebar) .menu-section-content .sidebar-link:hover,
.sidebar:not(.admin-sidebar) .menu-section-content .sidebar-link.active {
    background-color: var(--sidebar-hover-bg) !important;
    color: var(--sidebar-text-hover) !important;
}

.sidebar:not(.admin-sidebar) i {
    color: var(--menu-icon-color, var(--sidebar-text)) !important;
    opacity: 0.7;
}

.sidebar:not(.admin-sidebar) .sidebar-link:hover i,
.sidebar:not(.admin-sidebar) .sidebar-link.active i {
    color: var(--menu-icon-color, var(--sidebar-text-hover)) !important;
    opacity: 1;
}

.sidebar:not(.admin-sidebar) .admin-link {
    color: var(--sidebar-text) !important;
}

.sidebar:not(.admin-sidebar) .admin-link:hover {
    background: var(--sidebar-active-bg) !important;
    color: var(--sidebar-text-hover) !important;
}

/* ============================================================
   ОСТАЛЬНЫЕ КОМПОНЕНТЫ
   ============================================================ */
.content,
.content-wrapper,
.main-content,
.page-content,
.wrapper {
    color: var(--text-primary) !important;
    background-color: var(--bg-primary) !important;
}

.site-header,
.mobile-header,
.navbar,
.header {
    background-color: var(--header-bg) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.navbar .navbar-brand,
.navbar .nav-link {
    color: var(--text-primary) !important;
}

/* ============================================================
   КАРТОЧКИ
   ============================================================ */
.card {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 1px 3px var(--shadow-color) !important;
}

.card-header {
    background-color: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    padding: 1rem 1.25rem !important;
}

.card-footer {
    background-color: var(--bg-secondary) !important;
    border-top: 1px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
}

/* ============================================================
   ТАБЛИЦЫ
   ============================================================ */
.table {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    background-color: transparent !important;
}

.table thead th {
    background-color: var(--bg-secondary) !important;
    border-bottom: 2px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.table-hover tbody tr:hover {
    background-color: var(--table-hover-bg) !important;
}

/* ============================================================
   ФОРМЫ
   ============================================================ */
.form-control,
.form-select,
.input-group-text {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(129, 140, 248, 0.25) !important;
}

/* ============================================================
   МОДАЛЬНЫЕ ОКНА
   ============================================================ */
.modal-content {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.modal-header {
    background-color: var(--bg-secondary) !important;
    border-bottom-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* ------------------------------------------------------------
   Содержимое, которое подгружается в модальные окна приёма
   (шаблоны auscultation / externalexamination / medical_hystory
   modal_detail.html). В них цвета заданы жёстко (белые карточки,
   #1e293b текст), а свой <style> они дописывают в конец <head>,
   поэтому перебиваем их значениями темы через !important.
   ------------------------------------------------------------ */
:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) :is(.auscultation-detail, .examination-detail, .medical-history-detail),
:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) :is(.metric-value, .vital-value, .info-value, .section-title h3, .notes-content) {
    color: var(--text-primary) !important;
}

:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) :is(.metric-label, .vital-label, .info-label, .update-info, .metric-value small, .vital-value small) {
    color: var(--text-muted) !important;
}

:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) :is(.metric-card, .section-card) {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) .section-title {
    background: var(--bg-secondary) !important;
    border-bottom-color: var(--border-color) !important;
}

:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) .detail-badge {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) .detail-badge:hover {
    background: var(--bg-secondary) !important;
}

:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) :is(.notes-content, .update-info) {
    background: var(--bg-secondary) !important;
}

:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) .warning-alert {
    background: rgba(255, 193, 7, 0.15) !important;
    border-color: rgba(255, 193, 7, 0.35) !important;
    color: var(--warning) !important;
}

/* В модалке УЗИ блоки <pre> окрашены inline-стилем (#f8f9fa). */
:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) .modal-body pre {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* ------------------------------------------------------------
   Модальное окно диагноза страницы приёма
   (medical_card/appointments/diagnosis_modal_form.html).
   В шаблоне цвета заданы жёстко (серый #f8f9fa, белые результаты
   поиска, жёлтая карточка быстрого создания) и свой <style> он
   дописывает в конец <head>, поэтому перебиваем значениями темы.
   ------------------------------------------------------------ */
:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) :is(.search-section, .search-results, .preliminary-list-container) {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) .search-results-header {
    background: var(--bg-tertiary) !important;
    border-bottom-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) .search-result-item {
    border-bottom-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) .search-result-item:hover {
    background: var(--bg-tertiary) !important;
}

:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) .search-result-name {
    color: var(--text-primary) !important;
}

:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) .quick-create-section {
    background: rgba(255, 193, 7, 0.12) !important;
    border-color: rgba(255, 193, 7, 0.35) !important;
    color: var(--text-primary) !important;
}

:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) .diagnosis-list {
    background: var(--input-bg) !important;
    color: var(--text-primary) !important;
}

:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) .diagnosis-list option {
    background: var(--input-bg) !important;
    color: var(--text-primary) !important;
}

:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) .diagnosis-list option:hover {
    background: var(--bg-tertiary) !important;
}

/* Окно быстрого создания диагноза (#simpleQuickModal) собрано с инлайновыми
   цветами (белая карточка, подписи #333, серый футер), поэтому перебиваем их
   !important: инлайновые обычные объявления уступают важным из CSS. Шапка
   окна получает тот же градиент страницы, что и остальные шапки модалок. */
:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) #simpleQuickModal > div {
    background: var(--card-bg) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}

:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) #simpleQuickModal > div > div:first-child {
    background: linear-gradient(135deg, #1a2e6b 0%, #3F51B5 100%) !important;
    color: #ffffff !important;
}

:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) #simpleQuickModal label {
    color: var(--text-primary) !important;
}

:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) #simpleQuickModal :is(select, input, textarea) {
    background: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) #simpleQuickModal > div > div:nth-child(2) > div:last-child {
    background: rgba(16, 185, 129, 0.12) !important;
    border-left-color: #10b981 !important;
}

:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) #simpleQuickModal > div > div:nth-child(2) > div:last-child small {
    color: #6ee7b7 !important;
}

:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) #simpleQuickModal > div > div:last-child {
    background: var(--bg-secondary) !important;
    border-top-color: var(--border-color) !important;
}

/* ============================================================
   ВЫПАДАЮЩИЕ СПИСКИ
   ============================================================ */
.dropdown-menu {
    background-color: var(--dropdown-bg) !important;
    border-color: var(--border-color) !important;
}

.dropdown-item {
    color: var(--text-primary) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* ============================================================
   АЛЕРТЫ
   ============================================================ */
.alert-success {
    background-color: rgba(25, 135, 84, 0.15) !important;
    border-left: 4px solid var(--success) !important;
    color: var(--text-primary) !important;
}

.alert-danger {
    background-color: rgba(220, 53, 69, 0.15) !important;
    border-left: 4px solid var(--danger) !important;
    color: var(--text-primary) !important;
}

.alert-warning {
    background-color: rgba(255, 193, 7, 0.15) !important;
    border-left: 4px solid var(--warning) !important;
    color: var(--text-primary) !important;
}

.alert-info {
    background-color: rgba(13, 202, 240, 0.15) !important;
    border-left: 4px solid var(--info) !important;
    color: var(--text-primary) !important;
}

/* ============================================================
   ПАГИНАЦИЯ
   ============================================================ */
.pagination .page-link {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.pagination .page-link:hover {
    background-color: var(--bg-secondary) !important;
    color: var(--accent-color) !important;
}

.pagination .page-item.active .page-link {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: #ffffff !important;
}

/* ============================================================
   КНОПКА ПЕРЕКЛЮЧЕНИЯ ТЕМЫ
   ============================================================ */
.theme-toggle-btn {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    color: var(--text-primary) !important;
    font-size: 1.2rem !important;
}

.theme-toggle-btn:hover {
    transform: scale(1.1) !important;
    background: var(--accent-color) !important;
    color: #ffffff !important;
    border-color: var(--accent-color) !important;
}

/* ============================================================
   ПРОЧЕЕ
   ============================================================ */
a {
    color: var(--accent-color);
    text-decoration: none;
}

a:hover {
    color: var(--accent-hover);
}

/* ============================================================
   СКРОЛЛБАР - ТЕМНАЯ ТЕМА
   ============================================================ */
[data-theme="dark"] ::-webkit-scrollbar,
body.dark-mode ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

[data-theme="dark"] ::-webkit-scrollbar-track,
body.dark-mode ::-webkit-scrollbar-track {
    background: var(--bg-tertiary) !important;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb,
body.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--border-color) !important;
    border-radius: 5px !important;
}

[data-theme="dark"] .text-muted,
body.dark-mode .text-muted {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .bg-light,
body.dark-mode .bg-light {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .border,
body.dark-mode .border {
    border-color: var(--border-color) !important;
}

/* Убираем конфликт с !important */
[data-theme="dark"] .sidebar:not(.admin-sidebar),
body.dark-mode .sidebar:not(.admin-sidebar) {
    background: linear-gradient(160deg, var(--sidebar-bg-start) 0%, var(--sidebar-bg-mid) 50%, var(--sidebar-bg-end) 100%) !important;
}

/* Гарантируем читаемость текста в сайдбаре */
.sidebar:not(.admin-sidebar) .sidebar-link,
.sidebar:not(.admin-sidebar) .menu-section-toggle,
.sidebar:not(.admin-sidebar) .menu-section-text {
    color: var(--sidebar-text) !important;
}

.sidebar:not(.admin-sidebar) .sidebar-link:hover,
.sidebar:not(.admin-sidebar) .menu-section-toggle:hover,
.sidebar:not(.admin-sidebar) .sidebar-link.active {
    color: var(--sidebar-text-hover) !important;
}

/* Бейджи в сайдбаре */
.sidebar:not(.admin-sidebar) .badge {
    color: #ffffff !important;
}

/* Иконки в сайдбаре */
.sidebar:not(.admin-sidebar) i {
    color: var(--menu-icon-color, var(--sidebar-text)) !important;
}

.sidebar:not(.admin-sidebar) .sidebar-link:hover i,
.sidebar:not(.admin-sidebar) .sidebar-link.active i {
    color: var(--menu-icon-color, var(--sidebar-text-hover)) !important;
}

/* ============================================================
   SELECT2 (bootstrap-5 тема) — ТЁМНЫЙ РЕЖИМ
   CDN select2-bootstrap-5-theme грузится в extra_head ПОСЛЕ
   этого файла и красит виджеты в белый (var(--bs-*));
   здесь перебиваем его через !important.
   ============================================================ */
:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) .select2-container--bootstrap-5 .select2-selection {
    background: var(--bg-input) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) .select2-container--bootstrap-5 .select2-selection__rendered {
    color: var(--text-primary) !important;
}

:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) .select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder {
    color: var(--text-muted) !important;
}

:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) .select2-container--bootstrap-5 .select2-dropdown {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) .select2-container--bootstrap-5 .select2-results__option {
    color: var(--text-primary) !important;
    background: transparent !important;
}

:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) .select2-container--bootstrap-5 .select2-results__option--highlighted {
    background: var(--primary) !important;
    color: #ffffff !important;
}

:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) .select2-container--bootstrap-5 .select2-results__option--selected {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) .select2-container--bootstrap-5 .select2-search__field {
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
}

:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
    color: #ffffff !important;
}

:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) .select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear {
    color: var(--text-muted) !important;
}

:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) .select2-container--bootstrap-5 .select2-selection__arrow b {
    border-color: var(--text-secondary) transparent transparent transparent !important;
}

/* ============================================================
   PET-FORM (карточка питомца) — ТЁМНЫЙ РЕЖИМ
   В client_create.html фон задан жёстко (#fafbff).
   ============================================================ */
:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) .pet-form {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) .pet-form .pet-header {
    border-bottom-color: var(--border-color) !important;
}

:is(body.dark-mode, .dark-theme, [data-theme="dark"], [data-bs-theme="dark"]) .pet-form .pet-header .pet-number {
    color: var(--text-primary) !important;
}