/* =============================================================================
 * Tesla in-car browser overrides — Public Map App only. Loaded LAST.
 * PUBLIC-ONLY FILE: never overwritten by scripts/sync-map-app-public.sh.
 *
 * Baseline: MCU2 (Intel Atom, limited RAM/VRAM, Chromium, desktop UA,
 * touch-only). Scales to MCU3 (Ryzen). Always on — no detection.
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 1. Kill compositing costs: backdrop blur is the most expensive effect the
 *    app uses. Replace every glass surface with an opaque equivalent.
 * ------------------------------------------------------------------------- */
* {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Solid surfaces (light theme first, dark below) */
.osiris-map-panel {
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.18) !important;
}
html.dark .osiris-map-panel {
  background: rgb(13, 20, 28) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}
#bottom-panel-content {
  background: rgb(246, 247, 248) !important;
}
html.dark #bottom-panel-content {
  background: rgb(16, 23, 34) !important;
}
.wx-timeline-bar {
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}
html.dark .wx-timeline-bar {
  background: rgb(15, 23, 42) !important;
}
#toast-container .toast {
  backdrop-filter: none !important;
}
/* Map control buttons: opaque instead of blurred glass */
#map-controls-right button,
#gps-status-btn,
#bottom-panel-close {
  background: rgba(255, 255, 255, 0.94) !important;
}
html.dark #map-controls-right button,
html.dark #gps-status-btn,
html.dark #bottom-panel-close {
  background: rgba(20, 28, 40, 0.94) !important;
}

/* ---------------------------------------------------------------------------
 * 2. Animation diet: decorative keyframes off; keep only cheap, short
 *    functional transitions (panel open/close = opacity/transform 0.15s).
 * ------------------------------------------------------------------------- */
.map-marker-pulse,
.widget-skeleton,
.tile-fade-in,
.osiris-probe-pin::before,
.osiris-map-panel-loading,
.animate-fade-in-right,
.animate-fade-in-up,
.animate-spin {
  animation: none !important;
}
.osiris-probe-pin::before {
  transform: scale(1.4);
  opacity: 0.35;
}
/* No scale transforms on tap (repaint cost + visual jitter on slow GPUs) */
.active\:scale-95:active,
.hover\:scale-105:hover,
.group:hover .group-hover\:scale-105 {
  transform: none !important;
}
/* Shorten remaining transitions */
.bottom-panel,
#map-controls-right,
.toggle-checkbox,
.toggle-label {
  transition-duration: 0.15s !important;
}
/* Hover-only affordances are meaningless on touch — always show delete/etc. */
.opacity-0.group-hover\:opacity-100 {
  opacity: 1 !important;
}

/* ---------------------------------------------------------------------------
 * 3. Touch-first targets (min 44x44 px) + spacing
 * ------------------------------------------------------------------------- */
#bottom-panel-tabs .tab-btn {
  min-height: 44px;
  padding-left: 1.1rem;
  padding-right: 1.1rem;
}
[data-group-toggle] {
  min-height: 44px;
}
[data-toggle],
[data-wx-key] {
  min-height: 48px;
}
/* Toggle switches: enlarge the visual + the hit area */
.map-data-toggle,
.wx-forecast-toggle,
.toggle-checkbox {
  width: 1.75rem !important;
  height: 1.75rem !important;
}
[data-toggle] .relative.inline-block.w-10,
[data-wx-key] .relative.inline-block.w-10 {
  width: 3.5rem !important;
}
.toggle-label {
  height: 1.75rem !important;
}
/* Chart legend chips + close buttons */
.osiris-probe-chart-legend-btn {
  min-height: 44px;
  padding: 0.4rem 0.9rem;
}
.osiris-map-panel-close {
  width: 2.75rem !important;
  height: 2.75rem !important;
}
/* Wider gaps between the right-edge control buttons */
#map-controls-right {
  gap: 1rem !important;
}
/* Timeline bar: bigger play button + slider thumb spacing */
.wx-timeline-bar #wx-play-btn {
  width: 48px !important;
  height: 48px !important;
}
.wx-model-switch button {
  min-height: 44px;
  padding: 8px 14px;
}
input[type='range'] {
  min-height: 32px;
}

/* ---------------------------------------------------------------------------
 * 4. Tesla resolution breakpoints (desktop UA always; touch landscape first)
 *    1920x1080 / 1920x1200 = base | 2200x1300 | 2650x1440 | 1200x1920 portrait
 * ------------------------------------------------------------------------- */
@media (min-width: 2100px) {
  html { font-size: 17px; }
  #bottom-panel { width: min(440px, calc(100vw - 6rem)) !important; }
  #map-controls-right button,
  #bottom-panel-toggle { width: 3.5rem; height: 3.5rem; }
  body.discover-panel-open #map-controls-right {
    transform: translate(calc(-1 * min(440px, calc(100vw - 6rem)) - 0.75rem), -50%) !important;
  }
}
@media (min-width: 2500px) {
  html { font-size: 19px; }
  #bottom-panel { width: min(500px, calc(100vw - 7rem)) !important; }
  #map-controls-right button,
  #bottom-panel-toggle { width: 4rem; height: 4rem; }
  body.discover-panel-open #map-controls-right {
    transform: translate(calc(-1 * min(500px, calc(100vw - 7rem)) - 0.75rem), -50%) !important;
  }
  .wx-timeline-bar { width: min(640px, calc(100vw - 64px)); }
}
/* Legacy vertical screens (older Model S/X, 1200x1920) */
@media (orientation: portrait) and (min-width: 1000px) {
  #bottom-panel { width: min(420px, calc(100vw - 6rem)) !important; }
  body.discover-panel-open #map-controls-right {
    transform: translate(calc(-1 * min(420px, calc(100vw - 6rem)) - 0.75rem), -50%) !important;
  }
  .wx-timeline-bar { width: min(460px, calc(100vw - 48px)); }
}

/* ---------------------------------------------------------------------------
 * 5. Touch scroll + focus
 * ------------------------------------------------------------------------- */
#bottom-panel-tiles-scroll {
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
button:focus-visible,
input:focus-visible {
  outline: 2px solid #1392ec;
  outline-offset: 1px;
}