/* Preview-wide dark production treatment.
   This file is intentionally imported last so legacy concept-specific blue layers
   cannot override the shared canvas, header or primary-navigation treatment. */

:root {
  --app-bg: #080a09;
  --app-bg-deep: #050706;
  --app-bg-raised: #0d0f0e;
  --app-surface: #111413;
  --app-surface-deep: #0b0d0c;
  --app-surface-raised: #171a19;
  --app-border: rgba(255,255,255,.12);
  --app-border-soft: rgba(255,255,255,.08);
}

/* Application canvases: Home's near-black background on every screen and subflow. */
body .demo-stage,
body .phone-shell-wrap,
body .persistent-bottom-nav-shell,
body .persistent-bottom-nav-shell > .app-scroll-region,
body .phone-shell,
body .home-screen,
body .home-neutral,
body .dashboard-home-screen,
body .home-v2-screen,
body .reference-home-screen,
body .locked-home-screen,
body .events-screen,
body .reference-alerts-screen,
body .event-history-redesign,
body .event-detail-screen,
body .event-detail-redesign,
body .live-screen,
body .live-refined,
body .live-layout-v3,
body .location-screen,
body .location-screen-v2,
body .location-refined,
body .settings-screen,
body .settings-detail-redesign,
body .notification-preferences-screen,
body .vehicle-screen,
body .vehicle-overview-screen,
body .vehicle-assignment-screen,
body .assignment-flow-shell,
body .assignment-flow-content,
body .reassign-shell,
body .reassign-step,
body .system-health-screen,
body .onboarding-shell,
body .onboarding-overlay {
  background-color: #050706 !important;
  background-image: none !important;
  color: #f5f7fb;
}

/* Shared and legacy headers all inherit one black treatment. */
body .app-screen-header,
body .standard-screen-header,
body .unified-screen-header,
body .persistent-bottom-nav-shell.has-unified-header > .unified-screen-header,
body .unified-screen-header.back-only-header,
body .alerts-header,
body .event-history-header,
body .event-detail-header,
body .live-header,
body .live-redesign-header,
body .location-header,
body .settings-subheader,
body .settings-detail-header,
body .vehicle-concept-header,
body .vehicle-v3-header,
body .saved-alert-vault-header,
body .home-header,
body .home-v2-header,
body .home-redesign-header,
body .reference-home-header,
body .locked-home-header,
body .preview-reference-header {
  background: #050706 !important;
  background-image: none !important;
  border-bottom-color: rgba(255,255,255,.09) !important;
  box-shadow: none !important;
}

/* Header actions stay legible without reintroducing blue surface blocks. */
body .app-screen-header-action,
body .standard-header-action,
body .unified-menu-trigger,
body .unified-back-trigger,
body .unified-close-trigger,
body .unified-header-action,
body .unified-alert-entry,
body .live-header-action,
body .home-header-alert,
body .home-redesign-header-action {
  background-color: #111413 !important;
  background-image: none !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* Raised content uses neutral charcoal rather than navy/blue-grey. */
body .event-history-card,
body .reference-alerts-filter-panel,
body .reference-alert-empty,
body .saved-alert-vault-entry > button,
body .saved-alert-vault-header,
body .saved-alert-vault-empty,
body .event-detail-assessment,
body .event-detail-media-actions,
body .event-detail-feedback,
body .event-detail-quick-actions button:not(.primary),
body .location-directions-notice,
body .location-status-list,
body .location-map-status,
body .location-vehicle-label,
body .settings-detail-card,
body .settings-static-row,
body .settings-logout-card,
body .account-card,
body .notification-intro,
body .notification-group > button,
body .notification-summary,
body .assignment-current,
body .assignment-options button,
body .vehicle-assignment-card,
body .reassign-current-card,
body .reassign-new-card,
body .reassign-info-card,
body .calibration-list,
body .first-protection-card,
body .system-health-hero,
body .system-health-group,
body .system-health-recommendation,
body .system-health-overall,
body .add-methods button,
body .add-help-card,
body .device-found-card,
body .placement-visual,
body .onboarding-field input,
body .home-redesign-menu,
body > .home-redesign-menu-layer .home-redesign-menu,
body > .home-redesign-menu-layer .home-redesign-menu-head,
body .home-support-feedback {
  background-color: #101312 !important;
  background-image: linear-gradient(180deg, #121514 0%, #0b0d0c 100%) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 10px 24px rgba(0,0,0,.15) !important;
}

/* Floating informational surfaces use the same neutral dark family. */
body .event-alert,
body .live-badge,
body .live-snapshot-notice,
body .live-camera-notice,
body .live-recording-notice,
body .live-quality-notice {
  background: rgba(16,19,18,.94) !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* Shared compact footer: sizing changes only the container, not icon/label scale. */
body .persistent-bottom-nav-shell > .app-primary-bottom-nav,
body .persistent-bottom-nav-shell.home-shell-active > .app-primary-bottom-nav,
body .persistent-bottom-nav-shell.live-shell-active > .app-primary-bottom-nav,
body .persistent-bottom-nav-shell.events-shell-active > .app-primary-bottom-nav,
body .persistent-bottom-nav-shell.event-detail-shell-active > .app-primary-bottom-nav,
body .persistent-bottom-nav-shell.location-shell-active > .app-primary-bottom-nav,
body .persistent-bottom-nav-shell.settings-main-shell-active > .app-primary-bottom-nav,
body .persistent-bottom-nav-shell.notification-preferences-shell-active > .app-primary-bottom-nav,
body .persistent-bottom-nav-shell.system-health-shell-active > .app-primary-bottom-nav,
body .persistent-bottom-nav-shell.health-shell-active > .app-primary-bottom-nav,
body .persistent-bottom-nav-shell.vehicle-shell-active > .app-primary-bottom-nav,
body .persistent-bottom-nav-shell.assignment-shell-active > .app-primary-bottom-nav {
  box-sizing: border-box !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: calc(76px + env(safe-area-inset-bottom)) !important;
  min-height: calc(76px + env(safe-area-inset-bottom)) !important;
  padding: 4px 10px calc(4px + env(safe-area-inset-bottom)) !important;
  display: grid !important;
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 0 !important;
  background: #181a1d !important;
  background-image: none !important;
  box-shadow: 0 -8px 22px rgba(0,0,0,.26) !important;
}

body .persistent-bottom-nav-shell > .app-primary-bottom-nav button,
body .persistent-bottom-nav-shell > .app-primary-bottom-nav button.active {
  min-height: 62px !important;
  gap: 6px !important;
  border-radius: 12px !important;
  color: #fff !important;
  background: transparent !important;
}

body .persistent-bottom-nav-shell > .app-primary-bottom-nav button.active {
  background: rgba(255,255,255,.07) !important;
}

body .persistent-bottom-nav-shell > .app-primary-bottom-nav button span,
body .persistent-bottom-nav-shell > .app-primary-bottom-nav .bottom-nav-icon,
body .persistent-bottom-nav-shell > .app-primary-bottom-nav button.active span,
body .persistent-bottom-nav-shell > .app-primary-bottom-nav button.active .bottom-nav-icon {
  color: #fff !important;
}

body .persistent-bottom-nav-shell > .app-primary-bottom-nav button::before,
body .persistent-bottom-nav-shell > .app-primary-bottom-nav button::after,
body .persistent-bottom-nav-shell > .app-primary-bottom-nav button.active::before,
body .persistent-bottom-nav-shell > .app-primary-bottom-nav button.active::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Consistent footer clearance, with extra Home breathing room below the final CTA. */
body .persistent-bottom-nav-shell > .app-scroll-region > .app-nav-spacer {
  display: block !important;
  flex: 0 0 calc(96px + env(safe-area-inset-bottom)) !important;
  min-height: calc(96px + env(safe-area-inset-bottom)) !important;
  background: #050706 !important;
}

body .persistent-bottom-nav-shell.home-shell-active > .app-scroll-region > .app-nav-spacer {
  flex-basis: calc(104px + env(safe-area-inset-bottom)) !important;
  min-height: calc(104px + env(safe-area-inset-bottom)) !important;
}

body .persistent-bottom-nav-shell.live-shell-active > .app-scroll-region > .app-nav-spacer,
body .persistent-bottom-nav-shell.location-shell-active > .app-scroll-region > .app-nav-spacer,
body .persistent-bottom-nav-shell.assignment-confirm-shell-active > .app-scroll-region > .app-nav-spacer {
  display: none !important;
  min-height: 0 !important;
  flex-basis: 0 !important;
}

/* Deployment marker: dark preview audit finalized. */

/* Home content must size to its contents so footer clearance starts after the CTA. */
body .persistent-bottom-nav-shell.home-shell-active > .app-scroll-region > .preview-reference-home {
  height: auto !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
}

/* New shared raised navigation dock from the approved Home reference. */
body .persistent-bottom-nav-shell > .app-primary-bottom-nav,
body .persistent-bottom-nav-shell.home-shell-active > .app-primary-bottom-nav,
body .persistent-bottom-nav-shell.live-shell-active > .app-primary-bottom-nav,
body .persistent-bottom-nav-shell.events-shell-active > .app-primary-bottom-nav,
body .persistent-bottom-nav-shell.event-detail-shell-active > .app-primary-bottom-nav,
body .persistent-bottom-nav-shell.location-shell-active > .app-primary-bottom-nav,
body .persistent-bottom-nav-shell.settings-main-shell-active > .app-primary-bottom-nav,
body .persistent-bottom-nav-shell.notification-preferences-shell-active > .app-primary-bottom-nav,
body .persistent-bottom-nav-shell.system-health-shell-active > .app-primary-bottom-nav,
body .persistent-bottom-nav-shell.health-shell-active > .app-primary-bottom-nav,
body .persistent-bottom-nav-shell.vehicle-shell-active > .app-primary-bottom-nav,
body .persistent-bottom-nav-shell.assignment-shell-active > .app-primary-bottom-nav {
  left: 14px !important;
  right: 14px !important;
  bottom: 8px !important;
  width: auto !important;
  height: calc(74px + env(safe-area-inset-bottom)) !important;
  min-height: calc(74px + env(safe-area-inset-bottom)) !important;
  padding: 5px 8px calc(5px + env(safe-area-inset-bottom)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, rgba(27,30,26,.985), rgba(17,19,17,.995)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 12px 30px rgba(0,0,0,.30) !important;
}

body .persistent-bottom-nav-shell > .app-primary-bottom-nav button,
body .persistent-bottom-nav-shell > .app-primary-bottom-nav button span,
body .persistent-bottom-nav-shell > .app-primary-bottom-nav .bottom-nav-icon {
  color: #a8aba8 !important;
}

body .persistent-bottom-nav-shell > .app-primary-bottom-nav button,
body .persistent-bottom-nav-shell > .app-primary-bottom-nav button.active {
  min-height: 60px !important;
  gap: 5px !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 12px !important;
  font-weight: 430 !important;
}

body .persistent-bottom-nav-shell > .app-primary-bottom-nav .bottom-nav-icon {
  width: 27px !important;
  height: 27px !important;
  flex-basis: 27px !important;
}

body .persistent-bottom-nav-shell > .app-primary-bottom-nav button.active,
body .persistent-bottom-nav-shell > .app-primary-bottom-nav button.active span,
body .persistent-bottom-nav-shell > .app-primary-bottom-nav button.active .bottom-nav-icon {
  color: #b9f33d !important;
}

/* Specificity guard against older per-screen navigation colour and sizing rules. */
body .persistent-bottom-nav-shell.persistent-bottom-nav-shell > .app-primary-bottom-nav button,
body .persistent-bottom-nav-shell.persistent-bottom-nav-shell > .app-primary-bottom-nav button span,
body .persistent-bottom-nav-shell.persistent-bottom-nav-shell > .app-primary-bottom-nav .bottom-nav-icon {
  color: #a8aba8 !important;
}

body .persistent-bottom-nav-shell.persistent-bottom-nav-shell > .app-primary-bottom-nav .bottom-nav-icon {
  width: 27px !important;
  height: 27px !important;
  flex-basis: 27px !important;
}

body .persistent-bottom-nav-shell.persistent-bottom-nav-shell > .app-primary-bottom-nav button.active,
body .persistent-bottom-nav-shell.persistent-bottom-nav-shell > .app-primary-bottom-nav button.active span,
body .persistent-bottom-nav-shell.persistent-bottom-nav-shell > .app-primary-bottom-nav button.active .bottom-nav-icon {
  color: #b9f33d !important;
}