/**
 * Семантические токены темы + тёмная тема: поверхности, инпуты, календари, селекты.
 * Цвета задаются JSON в /themes/*.json через Theme.js.
 */

:root {
    --bg: var(--gray-50);
    --surface: #ffffff;
    --surface-elevated: #ffffff;
    --surface-muted: var(--gray-100);
    --text: var(--gray-800);
    --text-muted: var(--gray-500);
    --border: var(--gray-200);
    --border-strong: var(--gray-300);
    --overlay: rgba(15, 23, 42, 0.45);
    --logo-filter: none;
    --header-bg: rgba(255, 255, 255, 0.92);
    --input-bg: #ffffff;
    --input-text: var(--gray-900);
    --dropdown-bg: #ffffff;
    --calendar-bg: #ffffff;
}

body {
    background: var(--bg);
    color: var(--text);
}

html {
    background: var(--bg);
}

.header {
    background: var(--header-bg);
    border-bottom-color: var(--border);
}

.logo img {
    filter: var(--logo-filter);
    transition: filter 0.2s ease;
}

/* Поверхности */
.card,
.page-card,
.sidebar,
.stat-card,
.activity-section,
.welcome-card ~ *,
.modal-content,
.dropdown-menu,
.custom-select-menu,
.toast,
.notifications-install-promo,
.diary-entry-card,
.vehicle-card,
.notification-card,
.feed-post,
.garage-empty,
.diary-empty,
.notifications-empty,
.fields-modal-content,
.confirm-modal .modal-content {
    background-color: var(--surface);
    border-color: var(--border);
    color: var(--text);
}

.sidebar {
    background: var(--surface) !important;
}

/* Инпуты / селекты */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
textarea,
select,
.custom-select-trigger,
.form-group .input-with-icon > input,
.form-group > input,
.form-group > textarea,
.diary-filter .diary-date-input,
.diary-filter .input-with-icon > input,
.input-select,
.vinpad-field {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
    border-color: var(--border-strong) !important;
}

/* Автозаполнение браузера (иначе жёлтый/белый фон поверх тёмной темы) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--input-text) !important;
    caret-color: var(--input-text);
    box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
    -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
    border-color: var(--border-strong) !important;
    transition: background-color 99999s ease-out 0s;
}

.form-group label,
.diary-filter label {
    color: var(--text-muted);
}

.input-with-icon > i,
.input-with-icon i:first-child,
.form-group .input-with-icon > i {
    color: var(--gray-400) !important;
}

.custom-select-menu {
    background: var(--dropdown-bg) !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow-lg);
}

.custom-select-option {
    color: var(--text);
}

.custom-select-option:hover:not(.is-disabled),
.custom-select-option.is-selected {
    background: var(--primary-50);
    color: var(--primary-700);
}

.dropdown-menu {
    background: var(--dropdown-bg) !important;
    border-color: var(--border) !important;
    color: var(--text);
}

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

.dropdown-item:hover,
.dropdown-item.active,
.lang-item.active,
.theme-item.active,
.theme-item.is-pressing,
.theme-item:active {
    background: var(--primary-50);
    color: var(--primary-700);
}

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

.dropdown-submenu {
    background: var(--surface-muted);
}

.account-toggle {
    background: var(--surface);
    border-color: var(--border);
    color: var(--primary-600);
}

/* Календарь flatpickr */
.flatpickr-calendar {
    background: var(--calendar-bg) !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow-xl) !important;
}

.flatpickr-months,
.flatpickr-weekdays,
.flatpickr-current-month,
.flatpickr-current-month .cur-year-select,
.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: var(--calendar-bg) !important;
    color: var(--text) !important;
}

.flatpickr-day {
    color: var(--text) !important;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
    background: var(--primary-50) !important;
    border-color: var(--primary-200) !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--primary-500) !important;
    border-color: var(--primary-500) !important;
    color: #fff !important;
}

.flatpickr-day.today {
    border-color: var(--primary-400) !important;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--gray-400) !important;
}

.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator {
    color: var(--text) !important;
    background: transparent !important;
}

.datepicker-clear {
    background: var(--surface-muted);
    border-color: var(--border);
    color: var(--text-muted);
}

/* Модалки */
/* Модалки: fixed-оверлей + blur (absolute/z-index:-1 ломают размытие) */
.modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    background: rgba(15, 23, 42, 0.4) !important;
    backdrop-filter: blur(12px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
}

.modal-content {
    position: relative;
    z-index: 1;
}

/* PWA-плашка обновления */
.pwa-update-banner {
    background: rgba(15, 23, 42, 0.4) !important;
    backdrop-filter: blur(12px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
}

html[data-theme="dark"] .modal-overlay,
html[data-theme="dark"] .pwa-update-banner,
html[data-theme="dark"] #notification-detail-modal .modal-overlay {
    /* Полупрозрачный scrim — не сплошная заливка, иначе blur не видно */
    background: rgba(2, 8, 20, 0.55) !important;
    backdrop-filter: blur(14px) saturate(1.3) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.3) !important;
}

html[data-theme="dark"] .modal,
html[data-theme="dark"] #notification-detail-modal.modal {
    background: transparent !important;
}

.modal-content {
    background: var(--surface-elevated) !important;
    color: var(--text);
}

.modal-close {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text-muted) !important;
}

.modal-close:hover {
    background: var(--surface-muted) !important;
    color: var(--text) !important;
}

.modal-title,
.modal-subtitle {
    color: var(--text);
}

.modal-subtitle {
    color: var(--text-muted) !important;
}

/* Нижняя навигация PWA */
.dashboard-bottom-nav {
    background: var(--header-bg) !important;
    border-top-color: var(--border) !important;
}

.bottom-nav-item {
    color: var(--text-muted);
}

.bottom-nav-item.is-active {
    color: var(--primary-600);
}

/* Кнопки ghost / outline */
.btn-outline,
.btn-ghost {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text);
}

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

/* Чипы / теги */
.chip {
    background: var(--surface-muted);
    border-color: var(--border);
    color: var(--text);
}

.chip.chip-active,
.chip.active {
    background: var(--primary-50);
    border-color: var(--primary-300);
    color: var(--primary-700);
}

/* Тосты */
.toast-container .toast {
    background: var(--surface-elevated);
    border-color: var(--border);
    color: var(--text);
    box-shadow: var(--shadow-lg);
}

/* Тёмная тема: доп. гармонизация жёстких #fff */
html[data-theme="dark"] .vehicle-modal .modal-content.vehicle-modal-content,
html[data-theme="dark"] .vehicle-form-section,
html[data-theme="dark"] .feed-composer,
html[data-theme="dark"] .feed-filters,
html[data-theme="dark"] .diary-filters,
html[data-theme="dark"] .diary-cost-total,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .page-card,
html[data-theme="dark"] .card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] body.dashboard-page {
    background: var(--bg) !important;
    background-image: none !important;
}

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

html[data-theme="dark"] .nav-item.active,
html[data-theme="dark"] .sidebar-nav .nav-item.active {
    background: var(--primary-50);
    color: var(--primary-600);
}

html[data-theme="dark"] .nav-item:hover {
    background: var(--surface-muted);
}

html[data-theme="dark"] .user-details h3,
html[data-theme="dark"] .user-name,
html[data-theme="dark"] .dashboard-page-header h1,
html[data-theme="dark"] .page-subtitle,
html[data-theme="dark"] .muted {
    color: var(--text);
}

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

html[data-theme="dark"] .btn-primary {
    color: #0b1220;
    background: linear-gradient(135deg, var(--primary-500), #0284c7);
    border-color: var(--primary-500);
}

html[data-theme="dark"] .btn-primary:hover {
    color: #0b1220;
    filter: brightness(1.08);
}

html[data-theme="dark"] .welcome-card {
    color: #fff;
}

html[data-theme="dark"] .flatpickr-months .flatpickr-prev-month svg,
html[data-theme="dark"] .flatpickr-months .flatpickr-next-month svg {
    fill: var(--text);
}

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

html[data-theme="dark"] .notification-card.is-unread {
    background: var(--primary-50);
    border-color: var(--primary-200);
}

html[data-theme="dark"] .diary-image-thumb,
html[data-theme="dark"] .feed-post-images img {
    border-color: var(--border);
}

html[data-theme="dark"] .color-swatch {
    box-shadow: inset 0 0 0 1px var(--border);
}

/* Жёсткие #fff / white в модулях → поверхности темы */
html[data-theme="dark"] .auth-modal .modal-content,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .toast,
html[data-theme="dark"] .custom-select-trigger,
html[data-theme="dark"] .custom-select-menu,
html[data-theme="dark"] .iti__country-list,
html[data-theme="dark"] .iti__selected-flag,
html[data-theme="dark"] .field-toggle,
html[data-theme="dark"] .vehicle-card,
html[data-theme="dark"] .vehicle-modal-content,
html[data-theme="dark"] .diary-entry-card,
html[data-theme="dark"] .diary-filters,
html[data-theme="dark"] .diary-filter-panel,
html[data-theme="dark"] .feed-composer,
html[data-theme="dark"] .feed-post,
html[data-theme="dark"] .feed-filters,
html[data-theme="dark"] .notification-card,
html[data-theme="dark"] .notifications-install-promo,
html[data-theme="dark"] .help-card,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .activity-section,
html[data-theme="dark"] .page-card,
html[data-theme="dark"] .avatar-cropper-modal .modal-content,
html[data-theme="dark"] .cropper-panel,
html[data-theme="dark"] .dashboard-bottom-nav,
html[data-theme="dark"] .pwa-install-banner,
html[data-theme="dark"] .calendar,
html[data-theme="dark"] .fp-calendar,
html[data-theme="dark"] .flatpickr-calendar,
html[data-theme="dark"] .garage-empty,
html[data-theme="dark"] .diary-empty,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .confirm-dialog,
html[data-theme="dark"] .dropdown-menu {
    background: var(--surface) !important;
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text);
}

html[data-theme="dark"] .header,
html[data-theme="dark"] .header.header-dashboard {
    background: var(--header-bg) !important;
    border-bottom-color: var(--border) !important;
}

html[data-theme="dark"] .logo span {
    color: var(--primary-600);
}

html[data-theme="dark"] .field-toggle:has(input:checked),
html[data-theme="dark"] .chip.active,
html[data-theme="dark"] .chip.chip-active,
html[data-theme="dark"] .segmented-control .is-active,
html[data-theme="dark"] .tabs .tab.active,
html[data-theme="dark"] .tab-btn.active {
    background: var(--primary-50) !important;
    border-color: var(--primary-300) !important;
    color: var(--primary-700) !important;
}

html[data-theme="dark"] .password-toggle,
html[data-theme="dark"] .toggle-password,
html[data-theme="dark"] .input-with-icon .password-toggle {
    color: var(--text-muted) !important;
}

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

html[data-theme="dark"] .iti__country:hover,
html[data-theme="dark"] .iti__country.iti__highlight {
    background: var(--primary-50) !important;
}

html[data-theme="dark"] .diary-tag-work,
html[data-theme="dark"] .diary-tag-parts,
html[data-theme="dark"] .diary-tag-fuel,
html[data-theme="dark"] .diary-tag-other {
    filter: saturate(0.9) brightness(0.85);
}

html[data-theme="dark"] .nav-divider,
html[data-theme="dark"] hr {
    border-color: var(--border);
    background: var(--border);
}

html[data-theme="dark"] .skeleton,
html[data-theme="dark"] .skeleton-line {
    background: linear-gradient(90deg, var(--surface-muted), var(--border), var(--surface-muted)) !important;
}

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

html[data-theme="dark"] .btn-danger,
html[data-theme="dark"] .btn-error {
    color: #0b1220;
}

html[data-theme="dark"] table,
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td {
    border-color: var(--border);
    color: var(--text);
}

html[data-theme="dark"] .table thead th {
    background: var(--surface-muted);
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border-strong);
}

/* Режим просмотра модалок (дневник / авто) — перекрывает #fff !important */
html[data-theme="dark"] .vehicle-modal-view input,
html[data-theme="dark"] .vehicle-modal-view textarea,
html[data-theme="dark"] .vehicle-modal-view select,
html[data-theme="dark"] .vehicle-modal-view .input-with-suffix input,
html[data-theme="dark"] .vehicle-modal-view .custom-select-trigger,
html[data-theme="dark"] .diary-entry-modal.vehicle-modal-view input,
html[data-theme="dark"] .diary-entry-modal.vehicle-modal-view textarea,
html[data-theme="dark"] .diary-entry-modal.vehicle-modal-view select,
html[data-theme="dark"] .diary-entry-modal.vehicle-modal-view input:disabled,
html[data-theme="dark"] .diary-entry-modal.vehicle-modal-view textarea:disabled,
html[data-theme="dark"] .diary-entry-modal.vehicle-modal-view select:disabled,
html[data-theme="dark"] .vehicle-modal-view .form-group input:disabled,
html[data-theme="dark"] .vehicle-modal-view .form-group textarea:disabled,
html[data-theme="dark"] .vehicle-modal-view .form-group select:disabled,
html[data-theme="dark"] #diary-entry-body,
html[data-theme="dark"] #diary-entry-title,
html[data-theme="dark"] .vehicle-modal-content textarea,
html[data-theme="dark"] .vehicle-modal-content input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]) {
    background: var(--input-bg) !important;
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
    -webkit-text-fill-color: var(--input-text) !important;
    border-color: var(--border-strong) !important;
    caret-color: var(--input-text);
}

html[data-theme="dark"] .vehicle-form-section,
html[data-theme="dark"] .diary-entry-modal .modal-content,
html[data-theme="dark"] .vehicle-modal .modal-content.vehicle-modal-content {
    background: var(--surface) !important;
    color: var(--text);
}

html[data-theme="dark"] .diary-entry-card,
html[data-theme="dark"] .diary-filters,
html[data-theme="dark"] .diary-cost-total,
html[data-theme="dark"] .chip:not(.chip-active) {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text);
}

html[data-theme="dark"] .diary-filter .diary-date-input,
html[data-theme="dark"] .diary-filter .input-with-icon > input,
html[data-theme="dark"] .input-with-suffix input,
html[data-theme="dark"] .color-hex-input {
    background: var(--input-bg) !important;
    color: var(--input-text) !important;
    border-color: var(--border-strong) !important;
}

html[data-theme="dark"] .feed-composer,
html[data-theme="dark"] .feed-post,
html[data-theme="dark"] .feed-filters,
html[data-theme="dark"] .feed-comment-form textarea,
html[data-theme="dark"] .notification-card,
html[data-theme="dark"] .notifications-panel,
html[data-theme="dark"] .help-card,
html[data-theme="dark"] .help-support-form textarea,
html[data-theme="dark"] .flatpickr-calendar,
html[data-theme="dark"] .avatar-cropper-modal .modal-content,
html[data-theme="dark"] .toast {
    background: var(--surface) !important;
    color: var(--text);
    border-color: var(--border);
}

html[data-theme="dark"] .feed-comment-form textarea,
html[data-theme="dark"] .help-support-form textarea,
html[data-theme="dark"] .auth-modal input,
html[data-theme="dark"] .auth-modal textarea {
    background: var(--input-bg) !important;
    color: var(--input-text) !important;
}