/* Tessa Drive v36 - precision cockpit visual layer */
:root {
  --cockpit-bg: #070a0e;
  --cockpit-surface: #0e1319;
  --cockpit-surface-raised: #141a21;
  --cockpit-line: rgba(224, 235, 245, 0.09);
  --cockpit-line-strong: rgba(224, 235, 245, 0.16);
  --cockpit-text: #f4f7fa;
  --cockpit-secondary: #a4adb8;
  --cockpit-muted: #6f7884;
  --cockpit-cyan: #68d7f2;
  --cockpit-green: #62d5aa;
  --cockpit-violet: #9b9df8;
  --cockpit-amber: #f2c66d;
  --cockpit-coral: #f18da4;

  --bg: var(--cockpit-bg);
  --surface: var(--cockpit-surface);
  --surface-raised: var(--cockpit-surface-raised);
  --line: var(--cockpit-line);
  --line-strong: var(--cockpit-line-strong);
  --text: var(--cockpit-text);
  --text-secondary: var(--cockpit-secondary);
  --text-muted: var(--cockpit-muted);
  --blue: var(--cockpit-cyan);
  --blue-strong: #239ab7;
  --mint: var(--cockpit-green);
  --green: var(--cockpit-green);
  --yellow: var(--cockpit-amber);
  --red: var(--cockpit-coral);

  --v26-bg: var(--cockpit-bg);
  --v26-surface: var(--cockpit-surface);
  --v26-surface-raised: var(--cockpit-surface-raised);
  --v26-line: var(--cockpit-line);
  --v26-line-strong: var(--cockpit-line-strong);
  --v26-cyan: var(--cockpit-cyan);
  --v26-green: var(--cockpit-green);
  --v26-violet: var(--cockpit-violet);
  --v26-amber: var(--cockpit-amber);
  --v26-coral: var(--cockpit-coral);

  --aurora-bg: var(--cockpit-bg);
  --aurora-surface: rgba(14, 19, 25, 0.88);
  --aurora-surface-strong: rgba(20, 26, 33, 0.96);
  --aurora-line: var(--cockpit-line);
  --aurora-line-strong: rgba(104, 215, 242, 0.34);
  --aurora-violet: var(--cockpit-violet);
  --aurora-magenta: var(--cockpit-cyan);
  --aurora-pink: var(--cockpit-coral);
  --aurora-cyan: var(--cockpit-cyan);
  --aurora-green: var(--cockpit-green);
  --aurora-coral: var(--cockpit-coral);
  --aurora-amber: var(--cockpit-amber);
}

html,
body {
  background: var(--cockpit-bg);
}

body {
  color: var(--cockpit-text);
}

.app-shell {
  background: #090d12;
}

.ambient-scene {
  display: none;
}

.header {
  border-bottom-color: var(--cockpit-line);
  background: rgba(8, 12, 16, 0.91);
  box-shadow: none;
  backdrop-filter: saturate(125%) blur(22px);
  -webkit-backdrop-filter: saturate(125%) blur(22px);
}

body.is-scrolled .header {
  border-bottom-color: var(--cockpit-line-strong);
  background: rgba(8, 12, 16, 0.97);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.brand-mark {
  border-color: rgba(104, 215, 242, 0.26);
  background: #111820;
  color: var(--cockpit-cyan);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.brand-overline,
.section-eyebrow {
  color: #8d98a5;
  letter-spacing: 0;
}

.header h1,
.section-title,
.metrics-section-heading h2 {
  letter-spacing: 0;
}

.connection-pill,
.header-icon-button {
  border-color: var(--cockpit-line);
  background: #11171e;
  box-shadow: none;
}

.connection-pill.online {
  border-color: rgba(98, 213, 170, 0.22);
  color: #a4ebd2;
  box-shadow: none;
}

.header-icon-button:hover {
  border-color: rgba(104, 215, 242, 0.28);
  background: #17212a;
}

.bottom-nav {
  border-color: var(--cockpit-line-strong);
  background: rgba(12, 17, 23, 0.94);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.48), inset 0 1px rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.nav-item {
  color: #78828e;
}

.nav-item.active {
  background: #17242c;
  color: #eef9fb;
}

.nav-item.active .nav-icon {
  color: var(--cockpit-cyan);
  filter: none;
}

.nav-item.active .nav-icon::after {
  background: var(--cockpit-green);
  box-shadow: 0 0 8px rgba(98, 213, 170, 0.68);
}

.nav-label {
  letter-spacing: 0;
}

/* Vehicle and energy overview */
.vehicle-scene {
  background: #111820;
}

.vehicle-map .leaflet-tile-pane {
  filter: saturate(0.38) brightness(0.6) contrast(1.16);
}

.vehicle-scene-shade {
  background:
    linear-gradient(180deg, rgba(7, 10, 14, 0.24) 0%, rgba(7, 10, 14, 0.04) 40%, rgba(7, 10, 14, 0.96) 100%),
    linear-gradient(90deg, rgba(7, 10, 14, 0.52), transparent 54%, rgba(7, 10, 14, 0.24));
}

#overviewEnergy .status-badge {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(9, 13, 18, 0.76);
  color: #d9e1e8;
}

#overviewEnergy .status-badge[data-state="online"] {
  color: var(--cockpit-cyan);
}

.vehicle-scene-car img {
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.7)) contrast(1.04);
}

.vehicle-location-pulse {
  border-color: rgba(104, 215, 242, 0.36);
  box-shadow: 0 0 0 16px rgba(104, 215, 242, 0.045), 0 0 38px rgba(104, 215, 242, 0.16);
}

.vehicle-energy-sheet {
  background: #090d12;
}

.vehicle-energy-sheet::before {
  right: 0;
  left: 0;
  background: linear-gradient(90deg, transparent, rgba(104, 215, 242, 0.78), transparent);
  box-shadow: none;
}

.battery-primary-value strong {
  color: #f7fafc;
}

.battery-primary-range span,
.drive-session-panel .spine-node small,
.drive-session-panel .session-readout dt {
  color: #77828e;
  letter-spacing: 0;
}

#batteryBarFill {
  background: linear-gradient(90deg, var(--cockpit-violet), var(--cockpit-cyan) 58%, var(--cockpit-green));
  box-shadow: 0 0 12px rgba(104, 215, 242, 0.24);
}

.home-action-strip {
  gap: 0;
}

.home-action-strip button {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.home-action-strip button + button {
  border-left: 1px solid var(--cockpit-line);
}

.home-action-strip button > span {
  border-color: var(--cockpit-line);
  background: #121920;
  box-shadow: none;
}

.home-action-strip button:hover {
  background: rgba(255, 255, 255, 0.025);
  color: #edf2f5;
}

.drive-session-panel {
  border-top-color: var(--cockpit-line-strong);
}

.drive-session-heading > button {
  border-color: var(--cockpit-line-strong);
  background: #111820;
  color: var(--cockpit-cyan);
  box-shadow: none;
}

.drive-session-panel .spine-node-now strong {
  color: var(--cockpit-cyan);
  text-shadow: none;
}

.drive-session-panel .spine-line,
.battery-main-track > span {
  background: #202832;
}

.drive-session-panel .spine-line::before {
  background: var(--cockpit-violet);
  box-shadow: 0 0 8px rgba(155, 157, 248, 0.52);
}

.drive-session-panel .spine-line::after {
  background: var(--cockpit-cyan);
  box-shadow: 0 0 8px rgba(104, 215, 242, 0.52);
}

.drive-session-panel .spine-line i {
  background: linear-gradient(90deg, var(--cockpit-violet), var(--cockpit-cyan));
  box-shadow: none;
}

.drive-session-panel .session-readout,
.drive-session-panel .session-readout > div + div,
.drive-session-panel .session-disclosure {
  border-color: var(--cockpit-line);
}

.drive-session-panel .energy-insight strong {
  color: var(--cockpit-green);
  text-shadow: none;
}

/* Shared view surfaces */
#metricsGrid.metrics-grid,
#activitySection.activity-section,
#recentSection.recent-section,
#chargesSection.charges-section,
.tesla-control-view {
  background: #090d12;
}

#metricsGrid .pulse-odometer,
#metricsGrid .pulse-signal,
#metricsGrid .pulse-ledger,
#metricsGrid .pulse-sync,
#activitySection .activity-metrics,
#activitySection .chart-panel,
#recentSection .trip-item,
#chargesSection .charge-overview-card,
#chargesSection .charge-item.charge-session,
#chargesSection .charge-efficiency-history,
.tesla-control-hero,
.tesla-command-grid button {
  border-color: var(--cockpit-line-strong);
  border-radius: 8px;
  background: var(--cockpit-surface);
  box-shadow: none;
}

#metricsGrid .metrics-count,
#chargesSection .charge-overview-badge,
#chargesSection .charge-history-count {
  border-color: rgba(104, 215, 242, 0.2);
  background: rgba(104, 215, 242, 0.065);
  color: var(--cockpit-cyan);
  box-shadow: none;
}

#metricsGrid .pulse-odometer {
  background: linear-gradient(145deg, #121923, #0c1117);
}

#metricsGrid .pulse-odometer::before {
  background: linear-gradient(90deg, transparent, var(--cockpit-cyan), transparent) 0 0 / 100% 1px no-repeat;
}

#metricsGrid .pulse-odometer::after,
#metricsGrid .pulse-radar,
#metricsGrid .pulse-sweep {
  display: none;
}

#metricsGrid .pulse-signal {
  background: #0d1319 !important;
}

#metricsGrid .pulse-ledger {
  background: #0d1319;
}

#metricsGrid .pulse-sync {
  background: #0d151b !important;
}

#metricsGrid .pulse-odometer .metric-label,
#metricsGrid .metric-label,
#activitySection .activity-metric span {
  color: #909aa6;
}

#metricsGrid .pulse-odometer .metric-value,
#metricsGrid .pulse-signal .metric-value {
  text-shadow: none;
}

#activitySection .period-control,
#activitySection .chart-control,
#chargesSection .charge-period-control {
  border-color: var(--cockpit-line-strong);
  background: #0c1117;
}

#activitySection .period-control button.active,
#activitySection .chart-control button.active,
#chargesSection .charge-period-control button.active {
  background: #1a3039;
  color: #effcff;
  box-shadow: inset 0 0 0 1px rgba(104, 215, 242, 0.18);
}

#activitySection .activity-metrics,
#activitySection .chart-panel {
  background: #0e141b;
}

.activity-day-strip button {
  border-color: var(--cockpit-line);
  background: #0b1016;
}

.activity-day-strip button.active {
  border-color: rgba(104, 215, 242, 0.42);
  background: #14242c;
  box-shadow: none;
}

#recentSection .list-heading-icon,
#chargesSection .charges-heading-icon {
  border-color: rgba(104, 215, 242, 0.2);
  background: rgba(104, 215, 242, 0.07);
  color: var(--cockpit-cyan);
  box-shadow: none;
}

#recentSection .trip-item[open],
#chargesSection .charge-item.charge-session[open] {
  border-color: rgba(104, 215, 242, 0.32);
  background: #111820;
  box-shadow: none;
}

#recentSection .trip-map .leaflet-tile-pane {
  filter: brightness(0.46) contrast(1.18) saturate(0.38);
}

#recentSection .trip-map .leaflet-overlay-pane {
  filter: drop-shadow(0 0 4px rgba(104, 215, 242, 0.32));
}

#chargesSection .charge-overview-card {
  background: linear-gradient(145deg, #111922, #0d1218);
}

#chargesSection .charge-overview-card::before {
  background: linear-gradient(90deg, var(--cockpit-cyan), var(--cockpit-green));
  box-shadow: none;
}

#chargesSection .charge-overview-energy strong {
  color: var(--cockpit-cyan);
  text-shadow: none;
}

#chargesSection .charge-overview-cost > b {
  color: var(--cockpit-coral);
}

#chargesSection .charge-soc-track i {
  background: linear-gradient(90deg, var(--cockpit-violet), var(--cockpit-cyan), var(--cockpit-green));
  box-shadow: none;
}

.tesla-control-hero {
  border-top-color: var(--cockpit-cyan);
  background: #10161d;
}

.tesla-primary-button,
.tesla-charge-limit button,
.tesla-dialog-actions .tesla-dialog-confirm {
  background: #176f85;
  box-shadow: none;
}

.error {
  border-color: rgba(241, 141, 164, 0.22);
  background: rgba(241, 141, 164, 0.07);
}

/* Compact phones */
@media (max-width: 959px) {
  body {
    padding-bottom: calc(98px + var(--safe-bottom));
  }

  .main-content {
    padding-bottom: calc(104px + var(--safe-bottom));
  }

  .bottom-nav {
    right: 10px;
    bottom: calc(8px + var(--safe-bottom));
    left: 10px;
    width: auto;
    height: 68px;
    padding: 5px;
    border-radius: 8px;
  }

  .nav-item {
    min-width: 0;
    min-height: 56px;
    border-radius: 6px;
  }

  .nav-item.active {
    box-shadow: inset 0 0 0 1px rgba(104, 215, 242, 0.08);
  }

  .vehicle-scene {
    height: 286px;
  }

  .vehicle-scene-car {
    bottom: 24px;
    width: min(248px, 70vw);
  }

  .vehicle-energy-sheet {
    padding-right: 16px;
    padding-left: 16px;
  }

  .battery-primary {
    min-height: 98px;
  }

  .battery-primary-value strong {
    font-size: 62px;
  }

  .battery-main-track {
    padding: 13px 0 15px;
  }

  .home-action-strip {
    padding: 10px 0 12px;
  }

  .home-action-strip button {
    min-height: 58px;
  }

  .home-action-strip small,
  .drive-session-panel .spine-node small,
  .drive-session-panel .session-readout dt {
    font-size: 8px;
  }

  .drive-session-heading h2,
  .live-charge-header h2 {
    font-size: 20px;
  }

  #metricsGrid.metrics-grid,
  #activitySection.activity-section,
  #recentSection.recent-section,
  #chargesSection.charges-section,
  .tesla-control-view {
    padding-bottom: calc(118px + var(--safe-bottom));
  }
}

/* Wide cockpit layout */
@media (min-width: 960px) {
  body {
    padding-bottom: 0;
    background: #05070a;
  }

  .app-shell {
    width: min(1180px, 100%);
    max-width: 1180px;
    min-height: 100svh;
    overflow: visible;
    border-right: 1px solid rgba(255, 255, 255, 0.045);
    border-left: 1px solid rgba(255, 255, 255, 0.045);
    box-shadow: 0 0 70px rgba(0, 0, 0, 0.32);
  }

  .header {
    margin-left: 94px;
    padding: calc(10px + var(--safe-top)) 24px 9px;
  }

  .main-content {
    min-height: calc(100svh - 82px);
    margin-left: 94px;
    padding-bottom: 48px;
  }

  .bottom-nav {
    position: fixed;
    z-index: 1100;
    top: calc(102px + var(--safe-top));
    right: auto;
    bottom: auto;
    left: max(12px, calc(50vw - 578px));
    display: grid;
    width: 72px;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 7px;
    gap: 4px;
    grid-template-columns: 1fr;
    border-radius: 8px;
    transform: none;
  }

  .nav-item {
    min-width: 0;
    min-height: 64px;
    flex-direction: column;
    gap: 5px;
    border-radius: 6px;
  }

  .nav-icon {
    width: 28px;
    height: 28px;
  }

  .nav-label {
    font-size: 9px;
  }

  #overviewEnergy.vehicle-home {
    display: grid;
    padding: 0;
    grid-template-columns: minmax(0, 1.35fr) minmax(350px, 0.78fr);
  }

  .vehicle-scene {
    height: auto;
    min-height: 700px;
    border-right: 1px solid var(--cockpit-line);
  }

  .vehicle-scene-car {
    bottom: 54px;
    width: min(430px, 72%);
  }

  .vehicle-scene-header {
    top: 26px;
    right: 24px;
    left: 24px;
  }

  .vehicle-scene-header p {
    max-width: 320px;
    font-size: 14px;
  }

  .vehicle-map-credit {
    bottom: 18px;
    left: 24px;
  }

  .vehicle-live-readout {
    right: 24px;
    bottom: 18px;
    font-size: 9px;
  }

  .vehicle-energy-sheet {
    min-width: 0;
    min-height: 578px;
    padding: 26px 28px 20px;
  }

  .vehicle-energy-sheet::before {
    display: none;
  }

  .battery-primary {
    min-height: 108px;
  }

  .battery-primary-value strong {
    font-size: 66px;
  }

  .home-action-strip button {
    min-height: 64px;
  }

  .drive-session-panel,
  .live-charge-panel {
    padding-top: 22px;
  }

  .drive-session-panel .spine-node strong {
    font-size: 19px;
  }

  #metricsGrid.metrics-grid {
    padding: 34px 28px 54px;
  }

  #metricsGrid .pulse-deck {
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  }

  #metricsGrid .pulse-odometer {
    min-height: 196px;
  }

  #metricsGrid .pulse-ledger {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #metricsGrid .pulse-ledger-item {
    min-height: 94px;
    border: 0;
    border-right: 1px solid var(--cockpit-line);
  }

  #metricsGrid .pulse-ledger-item:last-child {
    border-right: 0;
  }

  #metricsGrid .pulse-ledger-item:nth-child(-n + 2) {
    border-bottom: 0;
  }

  #activitySection.activity-section,
  #chargesSection.charges-section {
    width: min(100%, 980px);
    margin: 0 auto;
    padding: 34px 32px 64px;
  }

  #recentSection.recent-section,
  .tesla-control-view {
    width: min(100%, 900px);
    margin: 0 auto;
    padding: 34px 28px 64px;
  }

  #activitySection .section-heading {
    align-items: end;
    grid-template-columns: minmax(0, 1fr) minmax(460px, auto);
  }

  #activitySection .activity-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #activitySection .activity-metric:nth-child(n) {
    border-right: 1px solid var(--cockpit-line);
  }

  #activitySection .activity-metric:nth-child(4n) {
    border-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vehicle-location-pulse,
  #metricsGrid .pulse-core-dot,
  .connection-pill.online::before {
    animation: none;
  }
}

/* Final accessibility and interaction pass */
:where(button, summary, a, input, select):focus-visible {
  outline: 2px solid var(--cockpit-cyan);
  outline-offset: 3px;
}

.header-icon-button,
.nav-item,
.home-action-strip button,
.period-control button,
.chart-control button {
  min-height: 44px;
}

.error {
  min-height: min(360px, calc(100svh - 170px));
  margin: 24px 16px;
  border: 1px solid rgba(241, 141, 164, 0.22);
  border-radius: 18px;
  background: rgba(241, 141, 164, 0.07);
}

.error p {
  max-width: 34ch;
  margin-inline: auto;
  line-height: 1.55;
}

@media (max-width: 480px) {
  :root { --page: 12px; }

  .header-top { gap: 8px; }
  .header-actions { gap: 6px; }
  .connection-pill { max-width: 128px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .vehicle-energy-sheet { padding-inline: 12px; }
  .battery-primary { grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 10px; }
  .battery-primary-value,
  .battery-primary-range { min-width: 0; }
  .battery-primary-range { overflow: hidden; }
  .battery-primary-range span,
  .battery-primary-range strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .battery-primary-range b { font-size: clamp(20px, 7vw, 27px); }
  .home-action-strip button { min-height: 56px; }
  .bottom-nav { right: auto; left: 8px; width: calc(100vw - 16px); max-width: calc(100vw - 16px); }
  .bottom-nav .nav-item { min-width: 0; }
}