/* =============================================
   Тема оформления (светлая / тёмная)
   Переменные объявлены здесь, т.к. site.css
   подключается на всех страницах через _Layout.
   ============================================= */
:root {
    --color-bg-grad-start: #f5f7fb;
    --color-bg-grad-end: #eef1f6;
    --color-surface: #ffffff;
    --color-surface-alpha: rgba(255, 255, 255, 0.8);
    --color-surface-alt: #f8f9fc;
    --color-surface-alt-2: #f3f4f6;
    --color-border: #e9ecef;
    --color-border-strong: #dee2e6;
    --color-text: #212529;
    --color-text-muted: #6c757d;
    --color-text-strong: #1a1a2e;
    --color-heading: #333333;
    --shadow-color: rgba(0, 0, 0, 0.06);
    --shadow-color-strong: rgba(0, 0, 0, 0.1);
    --color-hover-surface: #eef3ff;
    --color-link: #0077cc;
    --color-accent: #3a7bd5;
    --color-accent-2: #8fbaf3;
    --navbar-bg: #ffffff;
    --footer-bg: #f8f9fa;
    --mobile-nav-bg: #ffffff;
    --input-bg: #ffffff;
    --input-border: #dee2e6;
    --separator-bg: #eef1f6;
    color-scheme: light;
}

[data-theme="dark"] {
    --color-bg-grad-start: #14161a;
    --color-bg-grad-end: #1a1d23;
    --color-surface: #1e2128;
    --color-surface-alpha: rgba(30, 33, 40, 0.85);
    --color-surface-alt: #262a32;
    --color-surface-alt-2: #2a2e37;
    --color-border: #343841;
    --color-border-strong: #3d4149;
    --color-text: #e4e6eb;
    --color-text-muted: #9aa0ab;
    --color-text-strong: #f1f2f5;
    --color-heading: #f1f2f5;
    --shadow-color: rgba(0, 0, 0, 0.4);
    --shadow-color-strong: rgba(0, 0, 0, 0.55);
    --color-hover-surface: #2b3040;
    --color-link: #6ab0f3;
    --color-accent: #4a8ae0;
    --color-accent-2: #6f9bd6;
    --navbar-bg: #1a1d23;
    --footer-bg: #16181d;
    --mobile-nav-bg: #1a1d23;
    --input-bg: #262a32;
    --input-border: #3d4149;
    --separator-bg: #20232a;
    color-scheme: dark;
}

/* Плавный переход при переключении темы */
body, .card-custom, .sidebar, .custom-modal, .auth-container,
.action-box, .stats-table, .list-group-item, .contact-item,
.tariff-card, .toggle-box, .listing-card, .navbar, .site-footer,
.mobile-nav, .form-control {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

@media (max-width: 767.98px) {
    main {
        padding-top: calc(12px + env(safe-area-inset-top));
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    min-height: 100vh;
    color: var(--color-text);
    background: linear-gradient(180deg, var(--color-bg-grad-start) 0%, var(--color-bg-grad-end) 100%);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--color-text-muted);
    text-align: end;
}

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

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.form-control {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--color-text);
}

    .form-control:focus {
        background-color: var(--input-bg);
        color: var(--color-text);
    }

/* =============================================
   Bootstrap .text-dark/.bg-white — НЕ реагируют на data-bs-theme
   (это утилитарные классы с фиксированным цветом), поэтому чиним
   вручную. Дублируем здесь (а не только в _Layout.cshtml.css),
   т.к. .cshtml.css требует пересборки проекта (CSS isolation),
   а site.css подключается напрямую как статический файл.
   ============================================= */
html[data-theme="dark"] .navbar.bg-white,
html[data-theme="dark"] .navbar .bg-white {
    background-color: var(--navbar-bg) !important;
}

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

html[data-theme="dark"] .navbar .navbar-brand {
    color: var(--color-text) !important;
}

html[data-theme="dark"] .alert-light {
    background-color: var(--color-surface-alt) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

html[data-theme="dark"] .btn-outline-secondary {
    color: var(--color-text-muted) !important;
    border-color: var(--color-border-strong) !important;
}

    html[data-theme="dark"] .btn-outline-secondary:hover {
        background-color: var(--color-hover-surface) !important;
        color: var(--color-text) !important;
    }

/* =============================================
   Нативные поля ввода/select — .navbar-light, .form-select
   и подобные варианты Bootstrap игнорируют data-bs-theme,
   поэтому задаём цвета принудительно, как и для .card выше.
   color-scheme подсказывает браузеру красить нативные виджеты
   (выпадающий список select, чекбоксы, скроллбар) в тёмном виде.
   ============================================= */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background-color: var(--input-bg) !important;
    color: var(--color-text) !important;
    border-color: var(--input-border) !important;
    color-scheme: dark;
}

    html[data-theme="dark"] .form-control::placeholder {
        color: var(--color-text-muted) !important;
    }

    html[data-theme="dark"] .form-control:disabled,
    html[data-theme="dark"] .form-control[readonly] {
        background-color: var(--color-surface-alt) !important;
    }

/* =============================================
   Принудительная синхронизация "сырых" компонентов Bootstrap
   (без наших кастомных классов) с палитрой темы. Нативный
   data-bs-theme Bootstrap 5.3 не везде даёт достаточный контраст
   поверх наших полупрозрачных карточек, поэтому фиксируем явно.
   ============================================= */
html[data-theme="dark"] .card {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

html[data-theme="dark"] .card-header {
    background-color: var(--color-surface-alt) !important;
    border-bottom-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

html[data-theme="dark"] .table {
    color: var(--color-text) !important;
}

    html[data-theme="dark"] .table > :not(caption) > * > * {
        color: var(--color-text) !important;
        border-bottom-color: var(--color-border) !important;
        background-color: transparent !important;
    }

html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--color-hover-surface) !important;
    color: var(--color-text) !important;
}

html[data-theme="dark"] .table thead th {
    color: var(--color-text-muted) !important;
    border-bottom-color: var(--color-border-strong) !important;
    background-color: transparent !important;
}

html[data-theme="dark"] .modal-content {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    border-color: var(--color-border) !important;
}

html[data-theme="dark"] .dropdown-menu {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

html[data-theme="dark"] .dropdown-item {
    color: var(--color-text) !important;
}

    html[data-theme="dark"] .dropdown-item:hover,
    html[data-theme="dark"] .dropdown-item:focus {
        background-color: var(--color-hover-surface) !important;
    }

.theme-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--color-text-muted);
    padding: 0;
}

    .theme-toggle-btn:hover {
        background: var(--color-hover-surface);
        color: var(--color-accent);
    }

    .theme-toggle-btn svg {
        width: 20px;
        height: 20px;
    }

    .theme-toggle-btn .icon-sun {
        display: none;
    }

[data-theme="dark"] .theme-toggle-btn .icon-sun {
    display: inline-flex;
}

[data-theme="dark"] .theme-toggle-btn .icon-moon {
    display: none;
}