/* =========================================================
   ТЁМНАЯ ТЕМА («Ночь»)

   Включается атрибутом data-theme="dark" на <html>.
   Светлая тема не меняется: файл подключается последним
   и работает только при data-theme="dark".
   ========================================================= */

html[data-theme="dark"] {
    color-scheme: dark;

    --bg: #0A1020;
    --bg-deep: #060A15;
    --surface: #121A2C;
    --text: #E9EEFB;
    --muted: #9BA8C9;
    --muted-light: #7E8BAE;
    --muted-pale: #6C7899;
    --card: rgba(22, 30, 52, 0.66);
    --border: rgba(126, 152, 219, 0.16);
    --border-strong: rgba(138, 168, 236, 0.28);
    --shadow: 0 10px 34px rgba(2, 6, 20, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);

    --blue: #7C9BFF;
    --blue-deep: #B4C7FF;
    --blue-soft: #3E5AAE;

    --ok: #A9E36B;
    --danger: #FF8A8A;
    --warn: #F2E36B;
    --info: #9FB6FF;

    background: linear-gradient(160deg, #05070F 0%, #0A1020 45%, #0C1526 100%);
    background-attachment: fixed;
}

html[data-theme="dark"] body {
    background: transparent;
    color: var(--text);
}

/* Переливающиеся пятна — приглушённые, чтобы не слепили на тёмном */
html[data-theme="dark"] body::before {
    background: radial-gradient(circle, rgba(74, 110, 220, 0.36) 0%, rgba(48, 78, 170, 0.18) 42%, transparent 68%);
    filter: blur(110px);
}

html[data-theme="dark"] body::after {
    background: radial-gradient(circle, rgba(58, 92, 200, 0.30) 0%, rgba(40, 66, 150, 0.16) 45%, transparent 68%);
    filter: blur(110px);
}

/* --- Навбар и кнопки ------------------------------------------------- */
html[data-theme="dark"] .navbar {
    background: rgba(9, 14, 26, 0.72);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(18px);
}

html[data-theme="dark"] .logo-pill {
    background: rgba(24, 33, 56, 0.9) !important;
    border-color: var(--border-strong) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .logo-pill:hover { background: rgba(30, 41, 68, 0.95) !important; }

html[data-theme="dark"] .nav-links > a:not(.user-avatar) {
    background: rgba(24, 33, 56, 0.9) !important;
    border-color: var(--border-strong) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .nav-links > a:not(.user-avatar):hover {
    background: rgba(34, 46, 76, 0.95) !important;
}

html[data-theme="dark"] .logout-link { color: #FF9B9B !important; }

html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-outline {
    background: rgba(24, 33, 56, 0.8) !important;
    border-color: var(--border-strong) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-outline:hover {
    background: rgba(38, 52, 86, 0.92) !important;
    border-color: var(--blue) !important;
}

/* --- Формы ----------------------------------------------------------- */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background: rgba(16, 24, 42, 0.85) !important;
    color: var(--text) !important;
    border-color: var(--border-strong) !important;
}

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

/* Инлайн-стили с белыми заливками в шаблонах (формы, карточки, подсказки) */
html[data-theme="dark"] [style*="background: rgba(255,255,255"],
html[data-theme="dark"] [style*="background: rgba(255, 255, 255"] {
    background-color: rgba(22, 31, 52, 0.7) !important;
}

/* --- Карточки и стеклянные панели ----------------------------------- */
html[data-theme="dark"] .budget-card,
html[data-theme="dark"] .pl-card,
html[data-theme="dark"] .trip-form-card,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .template-card,
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .share-card {
    background: rgba(18, 26, 44, 0.78) !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow) !important;
}

html[data-theme="dark"] .pl-day,
html[data-theme="dark"] .pl-days-track > .pl-day {
    background: rgba(18, 26, 44, 0.9) !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] .pl-day-tab {
    background: rgba(20, 29, 49, 0.9) !important;
    border-color: var(--border-strong) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .pl-day-tab.is-active {
    background: var(--blue) !important;
    border-color: var(--blue) !important;
    color: #0A1020 !important;
}

html[data-theme="dark"] .pl-day-arrow {
    background: rgba(20, 29, 49, 0.9) !important;
    border-color: var(--border-strong) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .pl-metric { background: rgba(14, 22, 38, 0.9) !important; }
html[data-theme="dark"] .pl-table th,
html[data-theme="dark"] .pl-table td { border-bottom-color: rgba(126, 152, 219, 0.14) !important; }
html[data-theme="dark"] .pl-tag { background: rgba(92, 124, 220, 0.22) !important; color: #C3D2FF !important; }
html[data-theme="dark"] .pl-tag-warn { background: rgba(226, 190, 60, 0.2) !important; color: #F3DC8A !important; }

/* --- Маршрут, дни, таймлайн ----------------------------------------- */
html[data-theme="dark"] .day-tab,
html[data-theme="dark"] .days-ribbon .day-tab {
    background: rgba(20, 29, 49, 0.85) !important;
    border-color: var(--border-strong) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .day-tab.active,
html[data-theme="dark"] .days-ribbon .day-tab.active {
    background: rgba(124, 155, 255, 0.22) !important;
    border-color: var(--blue) !important;
}

html[data-theme="dark"] .trip-btn-secondary,
html[data-theme="dark"] .trip-btn-primary {
    background: rgba(22, 31, 52, 0.85) !important;
    border-color: var(--border-strong) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .timeline-item,
html[data-theme="dark"] .point-card {
    background: rgba(18, 26, 44, 0.85) !important;
    border-color: var(--border) !important;
}

/* --- Таблицы и мелочи ----------------------------------------------- */
html[data-theme="dark"] table,
html[data-theme="dark"] .expense-table { color: var(--text); }
html[data-theme="dark"] .expense-table tr,
html[data-theme="dark"] .expense-table td,
html[data-theme="dark"] .expense-table th { border-color: rgba(126, 152, 219, 0.14) !important; }
html[data-theme="dark"] .expense-table tbody tr:hover { background: rgba(124, 155, 255, 0.08) !important; }

html[data-theme="dark"] .toggle-row {
    background: rgba(18, 26, 44, 0.75) !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] .switch .slider { background: rgba(126, 152, 219, 0.25); }
html[data-theme="dark"] .switch input:checked + .slider { background: var(--blue); }

html[data-theme="dark"] .city-chip,
html[data-theme="dark"] .city-add-btn {
    background: rgba(124, 155, 255, 0.16) !important;
    border-color: rgba(124, 155, 255, 0.4) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .season-card,
html[data-theme="dark"] .budget-option {
    background: rgba(18, 26, 44, 0.85) !important;
    border-color: var(--border-strong) !important;
    color: var(--text) !important;
}

/* --- Flatpickr ------------------------------------------------------- */
html[data-theme="dark"] .flatpickr-calendar {
    background: #131C30 !important;
    border-color: var(--border-strong) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
}

html[data-theme="dark"] .flatpickr-calendar .flatpickr-day { color: var(--text) !important; }
html[data-theme="dark"] .flatpickr-calendar .flatpickr-day.prevMonthDay,
html[data-theme="dark"] .flatpickr-calendar .flatpickr-day.nextMonthDay { color: rgba(233, 238, 251, 0.32) !important; }
html[data-theme="dark"] .flatpickr-calendar .flatpickr-day:hover { background: rgba(124, 155, 255, 0.2) !important; }
html[data-theme="dark"] .flatpickr-current-month,
html[data-theme="dark"] .flatpickr-months .flatpickr-month { color: var(--text) !important; fill: var(--text) !important; }
html[data-theme="dark"] .flatpickr-weekday { color: var(--muted) !important; }
html[data-theme="dark"] .flatpickr-day.selected,
html[data-theme="dark"] .flatpickr-day.startRange,
html[data-theme="dark"] .flatpickr-day.endRange { background: var(--blue) !important; color: #0A1020 !important; }
html[data-theme="dark"] .flatpickr-input[readonly] { background: rgba(16, 24, 42, 0.85) !important; color: var(--text) !important; }

/* --- Переключатель темы в шапке ------------------------------------- */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--card);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.18s, border-color 0.18s, transform 0.12s;
    -webkit-backdrop-filter: var(--glass);
    backdrop-filter: var(--glass);
}

.theme-toggle:hover { border-color: var(--blue); }
.theme-toggle:active { transform: scale(0.97); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .theme-toggle-label { line-height: 1; }

@media (max-width: 560px) {
    .theme-toggle { padding: 8px 11px; }
    .theme-toggle .theme-toggle-label { display: none; }
}

/* Плавный переход при смене темы */
html.theme-anim,
html.theme-anim body,
html.theme-anim .navbar,
html.theme-anim .card,
html.theme-anim .navbar * {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* --- Панели маршрута, модалки, планировщик --------------------------- */
html[data-theme="dark"] .route-modal-content,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .day-panel,
html[data-theme="dark"] .map-box,
html[data-theme="dark"] .planner-card,
html[data-theme="dark"] .planner-day,
html[data-theme="dark"] .timeline-card,
html[data-theme="dark"] .timeline-item {
    background: #121A2C !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .route-modal { background: rgba(4, 8, 18, 0.72) !important; }

/* --- Тексты внутри плана и кнопок ------------------------------------ */
html[data-theme="dark"] .pl-time { color: var(--text) !important; }
html[data-theme="dark"] .pl-btn-secondary { color: var(--text) !important; }
html[data-theme="dark"] .pl-btn { color: #FFFFFF !important; }
html[data-theme="dark"] a.pl-btn.pl-btn-secondary { color: var(--text) !important; }
html[data-theme="dark"] .pl-good { color: #6BE5B0 !important; }
html[data-theme="dark"] .pl-bad { color: #FF8A8A !important; }
html[data-theme="dark"] .pl-sub,
html[data-theme="dark"] .pl-muted { color: var(--muted) !important; }

html[data-theme="dark"] .btn-confirm {
    background: var(--ok) !important;
    color: #0A1020 !important;
    border-color: transparent !important;
}

html[data-theme="dark"] .timeline-hint,
html[data-theme="dark"] .days-ribbon { color: var(--muted) !important; }

/* --- Логотип: в тёмной теме светлый знак ------------------------------ */
html[data-theme="dark"] .logo-icon-light { display: inline-block !important; }
html[data-theme="dark"] .logo-icon-dark { display: none !important; }

/* --- Страница технических работ --------------------------------------- */
html[data-theme="dark"] .mw-body {
    background: linear-gradient(180deg, #060A15 0%, #0A1020 55%, #0C1526 100%) !important;
}
html[data-theme="dark"] .mw-card {
    background: rgba(18, 26, 44, 0.88) !important;
    border-color: var(--border-strong) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55) !important;
}
html[data-theme="dark"] .mw-card h1 { color: var(--text) !important; }
html[data-theme="dark"] .mw-card p { color: var(--muted) !important; }
html[data-theme="dark"] .mw-badge {
    background: rgba(124, 155, 255, 0.16) !important;
    border-color: rgba(124, 155, 255, 0.4) !important;
    color: #BDD0FF !important;
}
html[data-theme="dark"] .mw-logo { filter: brightness(0) invert(1); }
html[data-theme="dark"] .mw-hint a { color: #B4C7FF !important; }

/* --- Шапка поверх контента и «залипшее» состояние ---------------------- */
/* style.css красит .navbar.solid в белый через !important — перебиваем. */
html[data-theme="dark"] .navbar,
html[data-theme="dark"] .navbar.solid,
html[data-theme="dark"] .navbar.navbar-transparent,
html[data-theme="dark"] .navbar.navbar-transparent.solid {
    background-color: rgba(8, 13, 24, 0.94) !important;
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.5) !important;
    border-bottom: 1px solid var(--border) !important;
}

/* На главной сверху шапка прозрачная — как и в светлой теме */
html[data-theme="dark"] .navbar.navbar-transparent:not(.solid) {
    background-color: transparent !important;
    box-shadow: none !important;
    border-bottom: none !important;
}

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

html[data-theme="dark"] .navbar .logo-go,
html[data-theme="dark"] .navbar.solid .logo-go {
    color: #8FA9FF !important;
    text-shadow: 0 0 14px rgba(124, 155, 255, 0.45) !important;
}

html[data-theme="dark"] .navbar .logo-pill,
html[data-theme="dark"] .navbar.solid .logo-pill,
html[data-theme="dark"] .navbar-transparent .logo-pill {
    background: rgba(24, 33, 56, 0.92) !important;
    border-color: var(--border-strong) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .navbar .logo-pill:hover,
html[data-theme="dark"] .navbar.solid .logo-pill:hover { background: rgba(32, 44, 72, 0.95) !important; }

html[data-theme="dark"] .navbar.solid .nav-links > a:not(.user-avatar),
html[data-theme="dark"] .navbar-transparent .nav-links > a:not(.user-avatar) {
    background: rgba(24, 33, 56, 0.92) !important;
    border-color: var(--border-strong) !important;
    color: var(--text) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .navbar .nav-btn,
html[data-theme="dark"] .navbar.solid .nav-btn,
html[data-theme="dark"] .navbar-transparent .nav-btn {
    background: rgba(124, 155, 255, 0.18) !important;
    border-color: rgba(124, 155, 255, 0.42) !important;
    color: #C6D4FF !important;
}

html[data-theme="dark"] .navbar .logout-link,
html[data-theme="dark"] .navbar.solid .logout-link,
html[data-theme="dark"] .navbar-transparent .logout-link {
    color: #FF9B9B !important;
    border-color: rgba(255, 155, 155, 0.5) !important;
    background: rgba(24, 33, 56, 0.85) !important;
}

html[data-theme="dark"] .theme-toggle {
    background: rgba(24, 33, 56, 0.92) !important;
    border-color: var(--border-strong) !important;
    color: var(--text) !important;
}

/* --- Селект категорий в бюджете (белый фон в style.css) -------------- */
html[data-theme="dark"] .select-trigger {
    background: rgba(20, 29, 48, 0.95) !important;
    border-color: var(--border-strong) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .select-trigger:hover {
    background: rgba(28, 39, 62, 0.98) !important;
    border-color: rgba(124, 155, 255, 0.5) !important;
}

html[data-theme="dark"] .select-options {
    background: #131C30 !important;
    border-color: var(--border-strong) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.65) !important;
}

/* --- Мелкие светлые элементы: чипы, бейджи, карусель ------------------ */
html[data-theme="dark"] .day-chip {
    background: rgba(24, 33, 56, 0.92) !important;
    border-color: var(--border-strong) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .travel-info-badge {
    background: rgba(24, 33, 56, 0.92) !important;
    border-color: var(--border-strong) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .pl-btn-secondary,
html[data-theme="dark"] a.pl-btn.pl-btn-secondary {
    background: rgba(24, 33, 56, 0.92) !important;
    border-color: var(--border-strong) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .status-badge {
    background: rgba(124, 155, 255, 0.18) !important;
    border-color: rgba(124, 155, 255, 0.4) !important;
    color: #C6D4FF !important;
}

html[data-theme="dark"] .status-badge.status-draft {
    background: rgba(254, 255, 138, 0.16) !important;
    border-color: rgba(254, 255, 138, 0.36) !important;
    color: #F3E98F !important;
}

html[data-theme="dark"] .carousel-nav-btn {
    background: rgba(24, 33, 56, 0.92) !important;
    color: var(--text) !important;
    border-color: var(--border-strong) !important;
}

html[data-theme="dark"] .template-card-footer {
    background: rgba(9, 14, 26, 0.55) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .template-card-footer a,
html[data-theme="dark"] .template-btn { color: var(--text) !important; }

/* --- Модалка «пример маршрута» --------------------------------------- */
html[data-theme="dark"] .route-modal-features li {
    background: rgba(24, 33, 56, 0.78) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .route-modal-body,
html[data-theme="dark"] .route-modal-header { color: var(--text) !important; }
/* Итоговая строка сметы в плане */
html[data-theme="dark"] .pl-table tfoot .pl-total td {
    color: var(--text) !important;
    border-top-color: rgba(126, 152, 219, 0.35) !important;
}

/* --- Окна и карточки билетов в тёмной теме -----------------------------
   Держим единый тёмный стиль: тёмные поверхности, светлый текст. */
html[data-theme="dark"] .pro-modal-card {
    background: linear-gradient(145deg, #16203A, #101827) !important;
    border-color: rgba(126, 152, 219, 0.35) !important;
    color: var(--text) !important;
}

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

html[data-theme="dark"] .pro-modal-card p {
    color: #B9C6E4 !important;
}

html[data-theme="dark"] .pro-modal-close {
    background: rgba(255, 255, 255, 0.12) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .pro-modal-close:hover {
    background: rgba(91, 127, 240, 0.35) !important;
}

html[data-theme="dark"] .pro-modal-secondary {
    background: rgba(255, 255, 255, 0.12) !important;
    color: var(--text) !important;
}

/* Карточки перелётов — и в окне, и на странице билетов */
html[data-theme="dark"] .flight-card {
    background: rgba(22, 32, 58, 0.92) !important;
    border-color: rgba(126, 152, 219, 0.28) !important;
    color: #E8EDFB !important;
}

html[data-theme="dark"] .flight-card:hover {
    border-color: rgba(126, 152, 219, 0.55) !important;
}

html[data-theme="dark"] .flight-card.is-purchased {
    background: rgba(22, 46, 40, 0.92) !important;
    border-color: rgba(61, 220, 151, 0.4) !important;
}

html[data-theme="dark"] .flight-direction {
    color: #A9BCF5 !important;
    background: rgba(91, 127, 240, 0.22) !important;
}

html[data-theme="dark"] .flight-route,
html[data-theme="dark"] .flight-date,
html[data-theme="dark"] .flight-price {
    color: #E8EDFB !important;
}

html[data-theme="dark"] .flight-meta {
    color: #93A2C4 !important;
}

html[data-theme="dark"] .flights-body a,
html[data-theme="dark"] .flights-body button {
    color: inherit;
}

/* Поле ввода даты и ссылки внутри окна билетов */
html[data-theme="dark"] .pro-modal-card input[type="date"],
html[data-theme="dark"] .pro-modal-card input[type="text"],
html[data-theme="dark"] .pro-modal-card input[type="number"] {
    background: #0F1729 !important;
    color: #E8EDFB !important;
    border-color: rgba(126, 152, 219, 0.35) !important;
}