/* NordicPass 3.0 · adaptive appearance layer · 2026-10-07
   Auto follows prefers-color-scheme. Light/Dark are explicit account overrides.
   Kept separate from layout CSS so the approved light design remains the baseline. */

:root {
  --np-theme-surface: #ffffff;
  --np-theme-surface-2: #f7f9fb;
  --np-theme-surface-3: #eef3f6;
  --np-theme-field: #ffffff;
  --np-theme-map: #d9ebf2;
  --np-theme-map-filter: none;
}

.settings-interface-fields { grid-template-columns: minmax(0, 1fr); }
.settings-interface-fields + .setting-switches { padding-top: 7px; }

html[data-theme="dark"] {
  --ice: #08131f;
  --paper: #101c28;
  --snow: #0b1722;
  --sand: #161b20;
  --ink: #e8eef4;
  --muted: #94a6b6;
  --line: #293a49;
  --blue-100: #112d3b;
  --red-100: #351b24;
  --danger: #ef8189;
  --shadow: 0 18px 52px rgba(0, 0, 0, .28);
  --soft-shadow: 0 8px 28px rgba(0, 0, 0, .22);
  --np-theme-surface: #101c28;
  --np-theme-surface-2: #0c1823;
  --np-theme-surface-3: #172634;
  --np-theme-field: #0c1823;
  --np-theme-map: #0b1721;
  --np-theme-map-filter: brightness(.63) invert(1) contrast(.9) hue-rotate(180deg) saturate(.64);
}

html[data-theme="dark"],
html[data-theme="dark"] body {
  background: var(--ice);
  color: var(--ink);
}

html[data-theme="dark"] body,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] button {
  color-scheme: dark;
}

html[data-theme="dark"] .content-view,
html[data-theme="dark"] .trips-view,
html[data-theme="dark"] section[data-view="trips"],
html[data-theme="dark"] section[data-view="places"],
html[data-theme="dark"] section[data-view="more"],
html[data-theme="dark"] section[data-view="settings"],
html[data-theme="dark"] section[data-view="sharing"],
html[data-theme="dark"] section[data-view="account"],
html[data-theme="dark"] section[data-view="alarms"],
html[data-theme="dark"] section[data-view="journal"],
html[data-theme="dark"] .public-share-app .public-share-view {
  background: linear-gradient(180deg, #0b1722 0%, #08131f 100%) !important;
}

html[data-theme="dark"] .map-view,
html[data-theme="dark"] .trip-map,
html[data-theme="dark"] .share-map,
html[data-theme="dark"] #place-picker-map {
  background: var(--np-theme-map) !important;
}

/* Only dim/invert the raster basemap. Vector route lines, markers and photos stay natural. */
html[data-theme="dark"] .leaflet-tile-pane {
  filter: var(--np-theme-map-filter);
}
html .leaflet-tile-pane { transition: filter .18s ease; }

html[data-theme="dark"] .trip-card,
html[data-theme="dark"] .trip-hero-card,
html[data-theme="dark"] .trip-hero-stats,
html[data-theme="dark"] .trip-list-row,
html[data-theme="dark"] .trips-empty,
html[data-theme="dark"] .empty-card,
html[data-theme="dark"] .panel-card,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .menu-card,
html[data-theme="dark"] .place-card,
html[data-theme="dark"] .timeline-card,
html[data-theme="dark"] .owner-section,
html[data-theme="dark"] .currency-card,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .share-row,
html[data-theme="dark"] .permission-toggle,
html[data-theme="dark"] .stats-row,
html[data-theme="dark"] .modal-shell,
html[data-theme="dark"] .journal-mock-row,
html[data-theme="dark"] section[data-view="journal"] #journal-list.journal-mock-list,
html[data-theme="dark"] #sharing-view .share-trip-option {
  background: var(--np-theme-surface) !important;
  border-color: var(--line) !important;
  color: var(--ink);
}

html[data-theme="dark"] .trip-card.is-current .trip-card-main {
  background: linear-gradient(135deg, #102a40, #173c56);
}

html[data-theme="dark"] .secondary-button,
html[data-theme="dark"] .danger-button,
html[data-theme="dark"] .icon-action,
html[data-theme="dark"] .journal-expense-action,
html[data-theme="dark"] .timeline-expense-action {
  background: var(--np-theme-surface-3) !important;
  border-color: var(--line) !important;
  color: #dbe9f2 !important;
}
html[data-theme="dark"] .danger-button,
html[data-theme="dark"] .icon-action.danger { color: var(--danger) !important; }

html[data-theme="dark"] .places-toolbar input,
html[data-theme="dark"] .form-grid input,
html[data-theme="dark"] .form-grid select,
html[data-theme="dark"] .modal-form input,
html[data-theme="dark"] .modal-form select,
html[data-theme="dark"] .modal-form textarea,
html[data-theme="dark"] .field-grid input,
html[data-theme="dark"] .field-grid select,
html[data-theme="dark"] .settings-fields select,
html[data-theme="dark"] .place-note-field textarea,
html[data-theme="dark"] .alarm-threshold select,
html[data-theme="dark"] .auth-form input {
  background: var(--np-theme-field) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #6f8598 !important; }

html[data-theme="dark"] .country-chip,
html[data-theme="dark"] .chip,
html[data-theme="dark"] .modal-close,
html[data-theme="dark"] .alarm-status-icon,
html[data-theme="dark"] #sharing-view .share-status,
html[data-theme="dark"] .public-share-app .public-share-readonly-pill,
html[data-theme="dark"] .share-url,
html[data-theme="dark"] #sharing-view .share-link-legacy,
html[data-theme="dark"] .alarm-rule-note,
html[data-theme="dark"] .alarm-metrics > div,
html[data-theme="dark"] #sharing-view .share-current-trip,
html[data-theme="dark"] .place-search-selected,
html[data-theme="dark"] .place-search-result-pin {
  background: var(--np-theme-surface-3) !important;
  color: #c3d5e2 !important;
}
html[data-theme="dark"] .chip.is-active { background: #1f526f !important; color: #fff !important; }

html[data-theme="dark"] .glass-card {
  background: rgba(13, 26, 38, .94) !important;
  border-color: rgba(121, 159, 184, .24) !important;
  color: var(--ink);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .32);
}
html[data-theme="dark"] .live-badge,
html[data-theme="dark"] .menu-icon {
  background: linear-gradient(145deg, #143344, #271c2b) !important;
  color: #d8e9f2 !important;
}
html[data-theme="dark"] .live-battery-shell { background: #0b1722; border-color: #b7ccda; }

html[data-theme="dark"] .round-button,
html[data-theme="dark"] .desktop-map-search,
html[data-theme="dark"] .desktop-map-zoom,
html[data-theme="dark"] .desktop-map-control-button {
  background: rgba(13, 26, 38, .96) !important;
  border-color: rgba(121, 159, 184, .28) !important;
  color: #dceaf3 !important;
}
html[data-theme="dark"] .desktop-map-search input { color: var(--ink) !important; }
html[data-theme="dark"] .desktop-map-search-results {
  background: #0d1a26 !important;
  border-color: var(--line) !important;
  color: var(--ink);
}
html[data-theme="dark"] .desktop-map-search-results button:hover,
html[data-theme="dark"] .desktop-map-search-results button:focus-visible { background: #172837 !important; }

html[data-theme="dark"] .leaflet-control-zoom a,
html[data-theme="dark"] .leaflet-control-layers,
html[data-theme="dark"] .leaflet-control-attribution {
  background: rgba(13, 26, 38, .94) !important;
  border-color: var(--line) !important;
  color: #c9dbe7 !important;
}
html[data-theme="dark"] .leaflet-control-zoom a { border-bottom-color: var(--line) !important; }
html[data-theme="dark"] .leaflet-control-attribution a { color: #74c8eb !important; }
html[data-theme="dark"] .leaflet-popup-content-wrapper,
html[data-theme="dark"] .leaflet-popup.np-map-highlight-popup .leaflet-popup-content-wrapper,
html[data-theme="dark"] .leaflet-popup-tip {
  background: #101d29 !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] .trip-map-layers {
  background: rgba(13, 26, 38, .96) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

html[data-theme="dark"] .budget-progress,
html[data-theme="dark"] .sensor-progress::-webkit-progress-bar { background: #263645; }
html[data-theme="dark"] .security-copy,
html[data-theme="dark"] .empty-inline { background: #112b39; color: #b8cedd; }

html[data-theme="dark"] .error-card,
html[data-theme="dark"] .alert.error,
html[data-theme="dark"] #sharing-view .share-status.is-revoked {
  background: #321a22 !important;
  border-color: #63313b !important;
  color: #f1a2a7 !important;
}
html[data-theme="dark"] .alert.info { background: #112d3b; border-color: #23506a; color: #c8e8f5; }
html[data-theme="dark"] .alert.warning { background: #302917; border-color: #62552b; color: #ead18b; }
html[data-theme="dark"] #sharing-view .share-status.is-expired { background: #30291e !important; color: #d7ba89 !important; }

html[data-theme="dark"] .place-search-result {
  background: var(--np-theme-surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] .place-search-result:hover,
html[data-theme="dark"] .place-search-result:focus-visible { background: #152633 !important; }

html[data-theme="dark"] .journal-mock-row.is-interactive:hover { background: #142431 !important; }
html[data-theme="dark"] .journal-mock-thumb { box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
html[data-theme="dark"] .journal-mock-thumb-crossing { background: #351b21 !important; color: #ed8388 !important; }
html[data-theme="dark"] .journal-mock-thumb-campsite { background: #173023 !important; color: #79c98d !important; }
html[data-theme="dark"] .journal-mock-thumb-stellplatz { background: #172837 !important; color: #8db7dc !important; }
html[data-theme="dark"] .journal-mock-thumb-parking { background: #1b2933 !important; color: #94b4c4 !important; }
html[data-theme="dark"] .journal-mock-thumb-place { background: #12302e !important; color: #6bc9bc !important; }

/* Budget statistics is deliberately scoped by its own variable set. */
html[data-theme="dark"] .npb-page {
  --npb-ink: #e8eef4;
  --npb-muted: #97a8b5;
  --npb-green: #6cc1a6;
  --npb-deep: #bce1d4;
  --npb-sand: #0b1722;
  --npb-card: #101c28;
  --npb-line: #293a49;
}
html[data-theme="dark"] .npb-filter,
html[data-theme="dark"] .npb-panel,
html[data-theme="dark"] .npb-summary,
html[data-theme="dark"] .npb-expense-row,
html[data-theme="dark"] .npb-diesel-summary > div,
html[data-theme="dark"] .npb-diesel-source-grid > div {
  background: #101c28 !important;
  border-color: #293a49 !important;
}
html[data-theme="dark"] .npb-filter-menu label:hover { background: #172633; }
html[data-theme="dark"] .npb-reset { background: #172633; color: #dce9f1; border-color: #293a49; }
html[data-theme="dark"] .npb-error { background: #321a22; color: #f1a2a7; border-color: #63313b; }

/* Authentication/recovery pages keep the mountain atmosphere but remove the white glare. */
html[data-theme="dark"] .auth-card {
  background: rgba(13, 26, 38, .985) !important;
  border-color: rgba(143, 178, 199, .18) !important;
  color: var(--ink);
  box-shadow: 0 28px 78px rgba(0, 0, 0, .38) !important;
}
html[data-theme="dark"] .auth-card h1,
html[data-theme="dark"] .auth-form label { color: var(--ink) !important; }
html[data-theme="dark"] .auth-card > p { color: var(--muted) !important; }

/* Keep branded dark navigation stable in both modes. */
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .mobile-nav { color-scheme: dark; }

@media (prefers-reduced-motion: reduce) {
  html .leaflet-tile-pane { transition: none; }
}

/* Secondary content surfaces that use explicit light gradients in the base layout. */
html[data-theme="dark"] .overnight-strip,
html[data-theme="dark"] .data-tile,
html[data-theme="dark"] .budget-hero-grid > div,
html[data-theme="dark"] .budget-category,
html[data-theme="dark"] .owner-live-strip,
html[data-theme="dark"] .climate-card,
html[data-theme="dark"] .trip-hero-stats > div,
html[data-theme="dark"] .recorded-weather > div,
html[data-theme="dark"] .visit-card,
html[data-theme="dark"] .place-detail-hero,
html[data-theme="dark"] #sharing-view .share-trip-picker {
  background: var(--np-theme-surface) !important;
  border-color: var(--line) !important;
  color: var(--ink);
}
html[data-theme="dark"] .overnight-breakdown > span,
html[data-theme="dark"] .site-pill {
  background: var(--np-theme-surface-3) !important;
  color: #b9cbd8 !important;
}
html[data-theme="dark"] .metric-icon,
html[data-theme="dark"] .place-marker {
  background: linear-gradient(145deg, #133142, #2b1d2a) !important;
  color: #7bc8e8 !important;
}
html[data-theme="dark"] .place-detail-hero,
html[data-theme="dark"] .security-note {
  background: #112a37 !important;
}
html[data-theme="dark"] .security-note { border-color: #275067 !important; }
html[data-theme="dark"] .security-note p,
html[data-theme="dark"] .climate-meta,
html[data-theme="dark"] .place-note,
html[data-theme="dark"] .place-detail-note,
html[data-theme="dark"] .public-share-app .public-share-note-list article p,
html[data-theme="dark"] #sharing-view .share-targets-summary {
  color: #a8bdcb !important;
}

/* Camping Service form and vehicle dashboard follow adaptive appearance. */
html[data-theme="dark"] .camping-service-stat,
html[data-theme="dark"] .service-form-group{background:var(--np-theme-surface)!important;border-color:var(--line)!important}
html[data-theme="dark"] .journal-service-action.is-recorded{background:#17433c!important;border-color:#2b7e70!important;color:#c3f1e1!important}