/* ============================================================
   DriveTracker – styles.css
   Layers on top of ui-theme/theme.css (Slate + Orange kit).

   Structure:
     1. CSS custom properties (brand tokens mapped to dark dashboard)
     2. Root / body dark overrides
     3. Scrollbar
     4. Map & Leaflet overrides
     5. Animated car marker
     6. Telemetry grid  (uses .metric-card from theme, overridden dark)
     7. App header      (uses bg-slate-800 from theme)
     8. Vehicle selector (uses .form-select from theme, overridden dark)
     9. Wake-lock indicator
    10. CTA button (extends .btn-primary / .btn-danger from theme)
    11. Status bar
    12. History bottom sheet
    13. SW update toast
    14. Accuracy badge
    15. History FAB
    16. Accessibility utility
   ============================================================ */

/* ── 1. Design tokens ────────────────────────────────────── */
:root {
  /* Brand (orange from theme preset — #f97316 = brand-500) */
  --brand:        #f97316;
  --brand-dark:   #ea580c;
  --brand-darker: #c2410c;

  /* Semantic CTA colours — green/red kept intentionally */
  --start-bg:    #22c55e;
  --start-dark:  #15803d;
  --stop-bg:     #ef4444;
  --stop-dark:   #b91c1c;

  /* Surfaces — light theme (mirrors theme's slate scale) */
  --surface:     #f8fafc;   /* slate-50  */
  --surface-2:   #ffffff;   /* white     */
  --surface-3:   #f1f5f9;   /* slate-100 */
  --surface-4:   #e2e8f0;   /* slate-200 */
  --border:      #f1f5f9;   /* slate-100 */
  --border-mid:  #e2e8f0;   /* slate-200 */

  /* Text — dark-on-light */
  --text:        #1e293b;   /* slate-800 */
  --text-muted:  #64748b;   /* slate-500 */
}

/* ── 2. Root / body — light theme, iOS-safe viewport height ────── */
*, *::before, *::after { box-sizing: border-box; }

/*
  iOS Safari treats 100vh as the viewport INCLUDING the browser chrome,
  so content overflows and the bottom CTA button gets clipped.
  Fix: set html to -webkit-fill-available, body to 100dvh with fallback.
  dvh (dynamic viewport height) shrinks/grows as the toolbar shows/hides.
*/
html {
  height: -webkit-fill-available;  /* iOS Safari ≤ 15 fallback */
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;                     /* non-iOS fallback */
  min-height: -webkit-fill-available;    /* iOS Safari ≤ 15  */
  min-height: 100dvh;                    /* modern — dynamic viewport */
  height: 100dvh;                        /* flex container needs explicit height */
  background: var(--surface);
  color: var(--text);
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  overflow: hidden;
}

/* ── 3. Scrollbar ────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--brand); border-radius: 2px; }

/* ── 4. Map & Leaflet overrides ──────────────────────────── */
#map {
  width: 100%;
  height: 100%;
  background: #e2e8f0;   /* slate-200 — visible while light tiles load */
  z-index: 0;
}

.leaflet-control-attribution {
  font-size: 9px !important;
  background: rgba(255,255,255,.8) !important;
  color: #94a3b8 !important;
}
.leaflet-control-attribution a { color: #64748b !important; }

/* ── 5. Animated car marker ──────────────────────────────── */
.car-marker-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--brand);          /* orange brand accent */
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 0 rgba(249,115,22,.7);
  animation: pulse-ring 2s cubic-bezier(.455,.03,.515,.955) infinite;
  font-size: 18px;
  line-height: 1;
}

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0   rgba(249,115,22,.7); }
  70%  { box-shadow: 0 0 0 12px rgba(249,115,22,0);  }
  100% { box-shadow: 0 0 0 0   rgba(249,115,22,0);   }
}

/* ── 6. Telemetry cards — theme styles + iOS-safe sizing ─── */
.telemetry-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 8px;
}

.metric-card {
  /* Ensure rounded corners render on iOS (theme uses rounded-xl = 0.75rem) */
  border-radius: 0.75rem !important;
  -webkit-border-radius: 0.75rem !important;
  padding: 10px 14px !important;
  transition: border-color .2s;
  /* Prevent iOS from collapsing the card in a flex/grid container */
  min-width: 0;
}
.metric-card.active-card { border-color: var(--brand) !important; }

.metric-value {
  font-size: 28px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  line-height: 1 !important;
}

/* Speed card goes orange (brand) when moving > 2 mph */
.metric-card.speed-active .metric-value { color: var(--brand) !important; }

/* ── 7. App header ───────────────────────────────────────── */
/*
   Theme provides bg-slate-800 + shadow-lg; we just add border-bottom
   and slot our custom elements into the flex row.
*/
#app-header {
  position: relative;
  z-index: 10;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  border-bottom: 1px solid #1e293b;   /* subtle separator on slate-800 */
}

/* Logo — white "Drive" + orange "Tracker" */
.logo {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: #fff;
  white-space: nowrap;
}
.logo span { color: var(--brand); }

/* ── 8. Vehicle selector — iOS-safe ─────────────────────── */
/*
   iOS Safari ignores many custom select styles unless -webkit-appearance: none
   is set explicitly. Font-size MUST be >= 16px or iOS will auto-zoom the page
   when the select is tapped, which is jarring on a phone mount.
   We use font-size: 16px here and scale the text down visually with transform
   so it still fits in the header without triggering the zoom.
*/
#vehicle-select.form-select {
  background-color: var(--surface-3) !important;
  border-color: var(--border-mid) !important;
  color: var(--text) !important;
  min-height: 36px !important;
  padding: 6px 28px 6px 10px !important;
  font-size: 16px !important;             /* ≥ 16px — prevents iOS auto-zoom */
  transform: scale(0.8125);              /* visually 13px (16 × 0.8125) */
  transform-origin: left center;
  font-weight: 600;
  flex: 1;
  max-width: 246px;                       /* wider to compensate for scale */
  -webkit-appearance: none !important;   /* iOS Safari explicit prefix */
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  border-radius: 8px !important;
}
#vehicle-select.form-select:focus {
  outline: 2px solid rgb(249 115 22 / .5);
  outline-offset: 0;
  border-color: transparent !important;
}
#vehicle-select.form-select:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ── 9. Wake-lock indicator ──────────────────────────────── */
#wakelock-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
  transition: background .3s;
}
#wakelock-status.active {
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
}

/* ── 10. CTA button ──────────────────────────────────────── */
/*
   Full-width footer button. Key iOS fixes:
   - padding-bottom adds env(safe-area-inset-bottom) so the button
     clears the iPhone home indicator bar on notched devices.
   - margin-bottom also respects the safe area so there's breathing room.
   - min-height: 60px guarantees a comfortable tap target even when
     safe-area-inset-bottom is 0 (non-notched devices).
*/
#cta-btn {
  position: relative;
  width: calc(100% - 32px);
  margin: 0 16px;
  /* Bottom margin = 12px + home indicator safe area */
  margin-bottom: max(12px, calc(12px + env(safe-area-inset-bottom)));
  padding: 18px 18px;
  /* Bottom padding absorbs extra safe-area space elegantly */
  padding-bottom: max(18px, calc(18px + env(safe-area-inset-bottom) / 2));
  min-height: 60px;
  border: none;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, transform .1s, box-shadow .2s;
  outline: none;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
}

/* Start state — green (session not running) */
#cta-btn.start {
  background: var(--start-bg);
  box-shadow: 0 4px 20px rgba(34,197,94,.35);
}
#cta-btn.start:hover  { background: #16a34a; }
#cta-btn.start:active { transform: scale(.98); background: var(--start-dark); }

/* Stop state — red (session running) */
#cta-btn.stop {
  background: var(--stop-bg);
  box-shadow: 0 4px 20px rgba(239,68,68,.35);
}
#cta-btn.stop:hover  { background: #dc2626; }
#cta-btn.stop:active { transform: scale(.98); background: var(--stop-dark); }

/* Blinking REC dot inside the Stop button */
#cta-btn.stop::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  animation: blink 1s step-start infinite;
  flex-shrink: 0;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── 11. Status bar ──────────────────────────────────────── */
#status-bar {
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  padding: 4px 16px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-align: center;
  flex-shrink: 0;
  min-height: 24px;
  letter-spacing: .03em;
}

/* ── 12. History bottom sheet ────────────────────────────── */
#history-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  z-index: 100;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
#history-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

#history-panel {
  background: var(--surface-2);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  width: 100%;
  max-height: 75vh;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-mid);
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.32,.72,0,1);
}
#history-overlay.open #history-panel { transform: translateY(0); }

#history-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#history-header h2 {
  font-size: 16px;
  font-weight: 800;
  margin: 0;
  letter-spacing: -.3px;
  color: var(--text);
}

/* Close button uses theme .btn-secondary — just needs dark override */
#history-close {
  background: var(--surface-3);
  border: 1px solid var(--border-mid);
  color: var(--text);
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s;
}
#history-close:hover { background: var(--surface-4); }

#history-list {
  overflow-y: auto;
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* History item uses .card structure, dark override */
.history-item {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.history-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.history-item-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.history-item-date {
  font-size: 11px;
  color: var(--text-muted);
}
.history-item-stats {
  display: flex;
  gap: 16px;
}
.history-stat { display: flex; flex-direction: column; gap: 1px; }
.history-stat-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  font-weight: 600;
}
.history-stat-value {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.history-item-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}

/* Export / delete buttons — use theme .btn-secondary pattern, dark */
.export-btn {
  background: transparent;
  border: 1px solid var(--border-mid);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, color .15s;
  touch-action: manipulation;
}
.export-btn:hover { border-color: var(--brand); color: var(--brand); }
.export-btn.delete-btn { color: #ef4444; border-color: #ef4444; }
.export-btn.delete-btn:hover { background: rgba(239,68,68,.1); }

.empty-history {
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  padding: 40px 0;
}

/* ── 13. SW update toast ─────────────────────────────────── */
#update-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--surface-3);
  border: 1px solid var(--border-mid);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  gap: 12px;
  align-items: center;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .3s;
  white-space: nowrap;
}
#update-toast.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Update button uses theme .btn-primary style */
#update-reload-btn {
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
#update-reload-btn:hover { background: var(--brand-dark); }

/* ── 14. GPS accuracy badge ──────────────────────────────── */
#accuracy-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  background: rgba(0,0,0,.7);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  pointer-events: none;
}

/* ── 15. History FAB ─────────────────────────────────────── */
#history-fab {
  position: absolute;
  bottom: 80px;
  right: 16px;
  z-index: 10;
  background: var(--surface-2);
  border: 1px solid var(--border-mid);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,.5);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ── 16. Accessibility ───────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}