/* Vehicle unified visual theme ---------------------------------------------
   Final visual-only override. Loaded after all feature CSS so every PWA page,
   sheet and popup shares the Vehicle overview palette without changing layout
   or behavior. Semantic success/warning/danger colors remain untouched. */

:root {
  --app-bg: #071019;
  --app-bg-deep: #040a11;
  --surface-1: #0c1927;
  --surface-2: #0a1622;
  --surface-3: #102231;
  --surface-soft: rgba(255,255,255,.035);
  --surface-hover: rgba(255,255,255,.065);
  --panel-bg: #0c1927;
  --panel-border: rgba(168,198,220,.16);
  --border-soft: rgba(168,198,220,.12);
  --border-strong: rgba(168,198,220,.22);
  --text: #f5f9fc;
  --text-secondary: #b2c1ce;
  --muted: #8497a8;
  --accent: #35dfc1;
  --accent-strong: #18bfa7;
  --accent-soft: rgba(53,223,193,.11);
  --accent-border: rgba(53,223,193,.28);
  --vehicle-page-bg:
    radial-gradient(circle at 50% -10%, rgba(53,223,193,.10), transparent 31%),
    radial-gradient(circle at 104% 30%, rgba(117,167,255,.055), transparent 32%),
    linear-gradient(180deg, #091521 0%, #071019 58%, #050c13 100%);
  --vehicle-card-bg:
    linear-gradient(145deg, rgba(255,255,255,.035), transparent 40%),
    #0c1927;
  --vehicle-panel-bg:
    radial-gradient(circle at 10% 0%, rgba(53,223,193,.08), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,.035), transparent 40%),
    #0c1927;
  --vehicle-popup-bg:
    radial-gradient(circle at 12% 0%, rgba(53,223,193,.10), transparent 29%),
    linear-gradient(145deg, rgba(255,255,255,.035), transparent 40%),
    #0a1622;
  --vehicle-overlay: rgba(1,7,12,.78);
  --vehicle-header-bg: rgba(8,19,29,.82);
  --vehicle-inner-bg: rgba(3,11,18,.42);
  --vehicle-shadow-card: 0 18px 44px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.035);
  --vehicle-shadow-float: 0 32px 100px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.055);
}

/* Page canvases ----------------------------------------------------------- */
html,
body,
.app,
.map-wrap,
.vehicle-home,
.app-content-page,
.control-page,
.camera-page,
.map-wrap.content-page-active,
.map-wrap.home-active,
.map-wrap[data-view-mode="history"],
.map-wrap:is([data-view-mode="charge-history"], [data-view-mode="refuel-history"]) {
  color: var(--text);
}

.vehicle-home,
.app-content-page,
.control-page,
.camera-page,
.map-wrap.content-page-active,
.map-wrap.home-active,
.map-wrap:is([data-view-mode="charge-history"], [data-view-mode="refuel-history"]) {
  background: var(--vehicle-page-bg);
}

/* Shared shell ------------------------------------------------------------ */
.app-shell-header {
  border-color: var(--border-soft);
  background: rgba(7,16,25,.90);
  box-shadow: 0 16px 38px rgba(0,0,0,.22);
}

.view-tabs {
  border-color: var(--border-strong);
  background: rgba(9,20,31,.94);
  box-shadow: 0 22px 54px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.055);
}

.view-tab {
  color: var(--muted);
}

.view-tab.active {
  border-color: rgba(53,223,193,.18);
  background: linear-gradient(180deg, rgba(53,223,193,.18), rgba(53,223,193,.09));
  color: var(--accent);
}

/* Main cards / feature surfaces ------------------------------------------ */
.status-panel,
.vehicle-energy-card,
.vehicle-weekly-card,
.vehicle-monthly-card,
.app-content-page .remote-section,
.app-content-page .live-camera-panel,
.camera-page .event-panel,
.chart-card,
.trip-events-panel {
  border-color: var(--border-soft);
  background: var(--vehicle-card-bg);
  box-shadow: var(--vehicle-shadow-card);
}

.status-panel,
.map-wrap[data-view-mode="history"] .status-panel,
.map-wrap:is([data-view-mode="charge-history"], [data-view-mode="refuel-history"]) .status-panel,
.map-wrap[data-view-mode="live"] .status-panel {
  border-color: var(--border-strong);
  background: var(--vehicle-panel-bg);
  box-shadow: var(--vehicle-shadow-float);
}

/* Keep Vehicle hero's richer composition, but use the same base palette. */
.vehicle-hero-card {
  border-color: rgba(53,223,193,.14);
  background:
    radial-gradient(ellipse at 50% 54%, rgba(53,223,193,.13), transparent 34%),
    radial-gradient(circle at 96% 0%, rgba(117,167,255,.09), transparent 34%),
    linear-gradient(150deg, rgba(255,255,255,.045), transparent 40%),
    #0c1927;
}

/* History / event / charging inner surfaces ------------------------------ */
.history-controls,
.map-wrap[data-view-mode="history"] .history-controls,
.map-wrap:is([data-view-mode="charge-history"], [data-view-mode="refuel-history"]) .history-controls,
.camera-page .event-panel .history-controls,
.history-calendar,
.trip-replay-bar,
.trip-detail-grid > div,
.metrics > div,
.remote-action-card,
.remote-seat-card,
.remote-temperature-control button,
.remote-pill,
.remote-segmented,
.live-camera-modes {
  border-color: var(--border-soft);
  background: var(--vehicle-inner-bg);
}

.trip-item,
.event-item,
.camera-page .event-panel #eventList > .event-item,
.camera-page .event-panel #eventList > .event-item.event-auto,
.camera-page .event-panel #eventList > .event-item.event-manual,
.camera-page .event-panel #eventList > .event-item.event-sentry,
.charge-session-item {
  border-color: var(--border-soft);
  background:
    linear-gradient(145deg, rgba(255,255,255,.035), transparent 48%),
    rgba(255,255,255,.022);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.trip-item:hover,
.event-item:hover,
.camera-page .event-panel #eventList > .event-item:hover,
.charge-session-item:hover {
  border-color: var(--accent-border);
  background:
    linear-gradient(145deg, rgba(53,223,193,.055), transparent 54%),
    rgba(255,255,255,.03);
}

.history-title-icon,
.camera-page .event-panel .history-head > div:not(.history-head-actions)::before,
.admin-heading-icon,
.account-avatar,
.pwa-install-guide-logo,
.vehicle-notification-icon,
.admin-usage-card .admin-usage-icon {
  border-color: var(--accent-border);
  background-color: var(--accent-soft);
  color: var(--accent);
}

.history-view-switch,
.history-calendar-nav,
.history-calendar-today,
.history-back-button,
.icon-button,
.home-icon-button,
.history-collapse-button,
.live-camera-icon-button,
.event-download-button,
.trip-events-button {
  border-color: var(--border-soft);
  background: var(--surface-soft);
  color: var(--text-secondary);
}

.history-view-button.active,
.history-calendar-nav:hover,
.history-calendar-today:hover,
.history-back-button:hover,
.icon-button:hover,
.home-icon-button:hover,
.history-collapse-button:hover,
.live-camera-icon-button:hover,
.event-download-button:not(.disabled):hover,
.trip-events-button:hover {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent);
}

.history-controls select,
.remote-climate-options select,
.account-language-select-wrap select,
.admin-filter-field,
.admin-search-field,
.auth-panel input,
.change-password-form input,
.password-field input {
  border-color: var(--border-soft);
  background: rgba(3,11,18,.54);
  color: var(--text);
}

.history-controls select:focus,
.remote-climate-options select:focus,
.account-language-select-wrap select:focus,
.admin-filter-field:focus-within,
.admin-search-field:focus-within,
.auth-panel input:focus,
.change-password-form input:focus,
.password-field:focus-within {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px rgba(53,223,193,.10);
}

/* Charging History header = Trip History typography ---------------------- */
.map-wrap:is([data-view-mode="charge-history"], [data-view-mode="refuel-history"]) .history-head strong {
  font-size: clamp(19px, 4.8vw, 24px);
  line-height: normal;
  letter-spacing: -.035em;
}

.map-wrap:is([data-view-mode="charge-history"], [data-view-mode="refuel-history"]) .history-head small {
  color: var(--muted);
  font-size: 11px;
  line-height: normal;
}

.map-wrap:is([data-view-mode="charge-history"], [data-view-mode="refuel-history"]) .history-title-icon {
  width: 44px;
  height: 44px;
  border-radius: 15px;
}

.map-wrap:is([data-view-mode="charge-history"], [data-view-mode="refuel-history"]) .history-title-icon svg {
  width: 23px;
  height: 23px;
}

.map-wrap:is([data-view-mode="charge-history"], [data-view-mode="refuel-history"]) .history-head-actions #chargeHistoryCount {
  min-height: 30px;
  padding: 6px 10px;
  font-size: 10px;
}

@media (max-width: 420px) {
  .map-wrap:is([data-view-mode="charge-history"], [data-view-mode="refuel-history"]) .history-title-icon {
    width: 40px;
    height: 40px;
    border-radius: 13px;
  }

  .map-wrap:is([data-view-mode="charge-history"], [data-view-mode="refuel-history"]) .history-head-actions #chargeHistoryCount {
    max-width: 72px;
    min-height: 30px;
    padding: 6px 10px;
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
  }

  .map-wrap:is([data-view-mode="charge-history"], [data-view-mode="refuel-history"]) .history-head small {
    display: block;
  }
}

/* Modals / sheets / popup overlays --------------------------------------- */
.qr-scanner,
.sepay-payment-modal,
.account-info-panel,
.pwa-install-guide-panel,
.notification-panel,
.change-password-panel,
.admin-page {
  background: var(--vehicle-overlay);
  backdrop-filter: blur(24px) saturate(125%);
}

.qr-scanner-panel,
.sepay-payment-card,
.account-info-card,
.pwa-install-guide-card,
.notification-card,
.password-dialog-card,
.admin-shell {
  border-color: var(--border-strong);
  background: var(--vehicle-popup-bg);
  box-shadow: var(--vehicle-shadow-float);
}

.account-info-head,
.pwa-install-guide-head,
.password-dialog-header,
.admin-head {
  border-color: var(--border-soft);
  background: var(--vehicle-header-bg);
}

.notification-toolbar,
.account-sheet-footer,
.admin-list-toolbar {
  border-color: var(--border-soft);
  background: rgba(7,16,25,.90);
}

.account-info-field,
.account-vehicle-box,
.account-language-box,
.account-notification-box,
.change-password-toggle,
.pwa-install-guide-step,
.vehicle-notification:hover,
.admin-user-card,
.admin-usage-card,
.sepay-payment-summary > div,
.sepay-transfer-content code,
.sepay-payment-state,
.upgrade-panel {
  border-color: var(--border-soft);
  background-color: rgba(255,255,255,.028);
}

/* Popup/button chrome uses Vehicle teal; semantic states stay semantic. */
.qr-scanner-head button,
.notification-toolbar button,
.pwa-install-guide-cancel,
.password-cancel-button,
.sepay-transfer-content button,
.account-vehicle-actions button,
.button.secondary {
  border-color: var(--border-soft);
  background: var(--surface-soft);
  color: var(--text-secondary);
}

.qr-scanner-head button:hover,
.notification-toolbar button:hover,
.pwa-install-guide-cancel:hover,
.password-cancel-button:hover,
.sepay-transfer-content button:hover,
.account-vehicle-actions button:hover,
.button.secondary:hover {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent);
}

.pwa-install-guide-primary,
.password-submit-button,
.admin-search #adminSearchButton,
.button.primary {
  border-color: rgba(53,223,193,.48);
  background: linear-gradient(135deg, #48e7ca, #18bfa7);
  color: #03251f;
  box-shadow: 0 12px 28px rgba(24,191,167,.18);
}

/* Payment is part of the same shell. Keep white QR and semantic payment
   success/review states, but normalize the surrounding chrome. */
.sepay-payment-card {
  color: var(--text);
}

.sepay-payment-summary > div,
.sepay-transfer-content code {
  border-color: var(--border-soft);
  background: var(--vehicle-inner-bg);
}

.sepay-transfer-content code {
  color: var(--text-secondary);
}

.sepay-payment-state:not(.success):not(.review) {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent);
}

/* Admin/account text hierarchy ------------------------------------------- */
.account-info-head h2,
.notification-head h2,
.password-dialog-header h2,
.admin-head h2,
.pwa-install-guide-head h2,
.sepay-payment-head h2 {
  color: var(--text);
}

.account-info-field span,
.account-language-copy > small,
.account-notification-copy small,
.notification-head small,
.vehicle-notification-copy small,
.admin-heading small,
.admin-status,
.pwa-install-guide-body > small,
#qrScannerStatus,
#sepayPaymentHint,
.sepay-payment-summary span {
  color: var(--muted);
}

/* QR camera canvas is intentionally near-black, while payment QR remains
   white for scan reliability. */
#qrScannerVideo {
  background: #071019;
}

/* Runtime-created event clip picker -------------------------------------- */
.event-clip-picker {
  background: var(--vehicle-overlay);
  backdrop-filter: blur(24px) saturate(125%);
  -webkit-backdrop-filter: blur(24px) saturate(125%);
}

.event-clip-picker-card {
  border-color: var(--border-strong);
  background: var(--vehicle-popup-bg);
  box-shadow: var(--vehicle-shadow-float);
}

.event-clip-picker-eyebrow {
  color: var(--accent);
}

.event-clip-picker-head h3 {
  color: var(--text);
}

.event-clip-picker-head p,
.event-clip-picker-option-copy small,
.event-clip-picker-chevron {
  color: var(--muted);
}

.event-clip-picker-close,
.event-clip-picker-option {
  border-color: var(--border-soft);
  background: var(--surface-soft);
  color: var(--text-secondary);
}

.event-clip-picker-option:hover:not(:disabled),
.event-clip-picker-option:focus-visible:not(:disabled),
.event-clip-picker-option-360 {
  border-color: var(--accent-border);
  background: var(--accent-soft);
}

.event-clip-picker-camera-icon {
  border: 1px solid var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent);
}

.event-clip-picker-option-copy strong {
  color: var(--text);
}

/* Runtime PWA update banner uses inline-injected CSS, so the important
   declarations below intentionally win and keep it in the Vehicle palette. */
#pwaUpdateBanner .pwa-update-card {
  border-color: var(--border-strong) !important;
  background: var(--vehicle-popup-bg) !important;
  color: var(--text) !important;
  box-shadow: var(--vehicle-shadow-float) !important;
}

#pwaUpdateBanner .pwa-update-card span {
  color: var(--muted) !important;
}

#pwaUpdateBanner .pwa-update-card button {
  border: 1px solid rgba(53,223,193,.48) !important;
  background: linear-gradient(135deg, #48e7ca, #18bfa7) !important;
  color: #03251f !important;
}

/* Live map actions use the same neutral + teal interaction treatment as
   Vehicle controls instead of provider-specific green/blue chrome. */
.map-wrap[data-view-mode="live"] #googleMapsLink,
.map-wrap[data-view-mode="live"] #appleMapsLink {
  border-color: var(--border-strong);
  background: var(--surface-soft);
  color: var(--text-secondary);
}

.map-wrap[data-view-mode="live"] #googleMapsLink:hover,
.map-wrap[data-view-mode="live"] #appleMapsLink:hover {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent);
}

.map-wrap:is([data-view-mode="charge-history"], [data-view-mode="refuel-history"]) .history-head-actions #chargeHistoryCount {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}

@media (max-width: 420px) {
  .map-wrap:is([data-view-mode="charge-history"], [data-view-mode="refuel-history"]) .history-head-actions #chargeHistoryCount {
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}