/* ════════════════════════════════════════════════════════════════════════
 * IronRoute GPS — State Cleanup F4 (CEO P0 Fix · 2026-05-03)
 *  G0.1 Light theme defaults · G0.2 HUD hidden no-trip
 *  Onboarding layout fixes (icon overlap)
 * ════════════════════════════════════════════════════════════════════════ */

/* ──────────────── G0.1 LIGHT THEME DEFAULTS ──────────────── */
html[data-theme="light"] {
  --color-bg:           #F4F1EA;
  --color-bg-elev:      #FFFFFF;
  --color-bg-card:      #FFFFFF;
  --color-surface:      #FAF7F0;
  --color-text:         #0A1428;
  --color-text-muted:   #4A5570;
  --color-text-on-gold: #0A1428;
  --color-border:       rgba(10,20,40,0.10);
  --color-border-strong:rgba(10,20,40,0.22);
}

html[data-theme="light"] body {
  background: var(--color-bg);
  color: var(--color-text);
}

html[data-theme="light"] .search-header,
html[data-theme="light"] .bottom-sheet,
html[data-theme="light"] .side-menu,
html[data-theme="light"] .bottom-nav,
html[data-theme="light"] .map-controls .map-ctrl-btn {
  background: var(--color-bg-elev);
  color: var(--color-text);
}
html[data-theme="light"] .search-input { background: var(--color-bg-elev); color: var(--color-text); }
html[data-theme="light"] .search-input::placeholder { color: var(--color-text-muted); }
html[data-theme="light"] .map-ctrl-btn { color: var(--color-text); border: 1px solid var(--color-border); }
html[data-theme="light"] .nav-tab { color: var(--color-text-muted); }
html[data-theme="light"] .nav-tab.active { color: var(--color-accent); }
html[data-theme="light"] .quick-tiles .tile { background: var(--color-bg-elev); color: var(--color-text); border: 1px solid var(--color-border); }
html[data-theme="light"] .tile-icon { color: var(--color-accent); }
html[data-theme="light"] .menu-tagline,
html[data-theme="light"] .app-tagline,
html[data-theme="light"] .menu-app-name { color: var(--color-text); }
html[data-theme="light"] .menu-item { color: var(--color-text); }
html[data-theme="light"] .menu-item:hover { background: rgba(212,168,75,0.10); }
html[data-theme="light"] .sheet-title,
html[data-theme="light"] .settings-heading { color: var(--color-text); }
html[data-theme="light"] .empty-state { color: var(--color-text-muted); }
html[data-theme="light"] .toggle-option,
html[data-theme="light"] .lang-option,
html[data-theme="light"] .theme-option {
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
html[data-theme="light"] .theme-option.active,
html[data-theme="light"] .lang-option.active {
  background: var(--color-accent);
  color: var(--color-text-on-gold);
}

/* ──────────────── G0.2 HIDE HUD/BANNER WHEN NO TRIP ──────────────── */
.ir-hidden-no-trip,
html.ir-trip-idle #hud-bottom,
html.ir-trip-idle #trip-hud,
html.ir-trip-idle .trip-hud,
html.ir-trip-idle #nav-banner,
html.ir-trip-idle .nav-banner,
html.ir-trip-idle #turn-banner,
html.ir-trip-idle .turn-by-turn-banner,
html.ir-trip-idle #speed-badge,
html.ir-trip-idle .speed-badge,
html.ir-trip-idle #hos-countdown-strip,
html.ir-trip-idle .hos-countdown-strip,
html.ir-trip-idle #trip-arrival-bar,
html.ir-trip-idle #trip-cost-bar,
html.ir-trip-idle #hud-overlay-bottom,
html.ir-trip-idle .ir-pretrip-banner {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Quick action cards visible always (G0.2 spec) */
html.ir-trip-idle .quick-tiles,
html.ir-trip-idle #quickTiles { display: block !important; }

/* ──────────────── ONBOARDING LAYOUT FIXES ──────────────── */
/* Icon overlap fix — guarantee gap between SVG icon and label text */
.ob-bullets li { gap: 14px !important; align-items: center !important; }
.ob-bullets li svg { flex: 0 0 24px !important; width: 24px !important; height: 24px !important; }
.ob-bullets li > span { flex: 1 1 auto !important; min-width: 0 !important; }
.ob-tile,
.ob-card-row,
.ob-vehicle-card,
.ob-role-card,
.ob-perm-card {
  display: flex !important; align-items: center !important; gap: 14px !important;
}
.ob-tile > svg,
.ob-card-row > svg,
.ob-vehicle-card > svg,
.ob-role-card > svg,
.ob-perm-card > .ob-perm-ico {
  flex: 0 0 32px !important; width: 32px; height: 32px;
}
.ob-tile > .ob-tile-text,
.ob-card-row > .ob-card-row-text,
.ob-vehicle-card > .ob-vehicle-text,
.ob-role-card > .ob-role-text,
.ob-perm-card > .ob-perm-text {
  flex: 1 1 auto; min-width: 0;
}
.ob-tile-text > strong,
.ob-card-row-text > strong { display: block; font-size: 15px; }
.ob-tile-text > small,
.ob-card-row-text > small { display: block; font-size: 12px; opacity: 0.72; }

/* Sticky header / footer guarantees */
.ob-card .ob-header { position: sticky; top: 0; z-index: 5; }
.ob-card .ob-footer { position: sticky; bottom: 0; z-index: 5; }

/* Body padding so content doesn't slide under sticky bars */
.ob-body { padding: 20px 22px 24px 22px !important; }

/* Make Skip / Back / X visibly tappable */
.ob-h-btn { width: 44px !important; height: 44px !important; }
.ob-h-btn svg { width: 22px; height: 22px; }
.ob-h-actions { gap: 6px; }
.ob-skip { height: 36px !important; padding: 0 14px !important; }

/* Step label always visible */
.ob-step-label { font-size: 12px; line-height: 1; }

/* Light-mode onboarding (still card surface, but adjust contrast) */
html[data-theme="light"] .ob-backdrop {
  background: radial-gradient(circle at 30% 20%, #FFF8E7 0%, #F4F1EA 60%, #E8DFC7 100%);
  background-color: #F4F1EA;
}
html[data-theme="light"] .ob-card {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF7F0 100%);
  color: #0A1428;
  border-color: rgba(10,20,40,0.12);
}
html[data-theme="light"] .ob-h1,
html[data-theme="light"] .ob-h3,
html[data-theme="light"] .ob-sub { color: #0A1428; }
html[data-theme="light"] .ob-sub { opacity: .76; }
html[data-theme="light"] .ob-bullets li {
  background: #FFFFFF; color: #0A1428;
  border: 1px solid rgba(10,20,40,0.12);
}
html[data-theme="light"] .ob-btn-secondary { color: #0A1428; border-color: rgba(10,20,40,0.18); }
html[data-theme="light"] .ob-btn-ghost { color: #4A5570; }
html[data-theme="light"] .ob-tabs { background: rgba(10,20,40,0.06); }
html[data-theme="light"] .ob-tab { color: #4A5570; }
html[data-theme="light"] .ob-tab.on { background: #0A1428; color: #FFFFFF; }
html[data-theme="light"] .ob-field input,
html[data-theme="light"] .ob-field select,
html[data-theme="light"] .ob-field-inline input {
  background: #FFFFFF; color: #0A1428; border-color: rgba(10,20,40,0.18);
}
html[data-theme="light"] .ob-header { background: rgba(255,255,255,.92); border-bottom-color: rgba(10,20,40,0.10); }
html[data-theme="light"] .ob-footer { background: rgba(255,255,255,.95); border-top-color: rgba(10,20,40,0.10); }

/* ──────────────── PERMISSIONS MODAL ──────────────── */
.ir-perm-modal {
  position: fixed; inset: 0; z-index: 10001;
  display: none; align-items: center; justify-content: center;
  background: rgba(3,13,28,.7); backdrop-filter: blur(4px);
}
.ir-perm-modal[aria-hidden="false"] { display: flex; }
.ir-perm-card {
  width: min(440px, 92vw); padding: 24px;
  background: var(--color-bg-elev, #fff); color: var(--color-text, #0A1428);
  border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.ir-perm-icon {
  width: 56px; height: 56px; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(212,168,75,0.15); color: #D4A84B;
  border-radius: 50%; font-size: 28px;
}
.ir-perm-card h3 {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 20px; margin: 0 0 8px; text-align: center;
}
.ir-perm-card p { font-size: 14px; line-height: 1.5; margin: 0 0 14px; opacity: .85; }
.ir-perm-card ul { padding: 0 0 0 18px; margin: 0 0 18px; font-size: 14px; line-height: 1.7; }
.ir-perm-card .ir-perm-actions {
  display: flex; gap: 10px;
}
.ir-perm-card .ir-perm-btn {
  flex: 1; min-height: 48px; border-radius: 999px;
  font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid transparent;
}
.ir-perm-card .ir-perm-btn-primary {
  background: linear-gradient(180deg, #E2B656, #D4A84B);
  color: #0A1428;
}
.ir-perm-card .ir-perm-btn-secondary {
  background: transparent; color: var(--color-text);
  border-color: var(--color-border-strong, rgba(0,0,0,0.18));
}

/* Toast */
.ir-toast {
  position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%);
  z-index: 10002;
  background: rgba(0,0,0,0.86); color: #fff;
  padding: 10px 16px; border-radius: 999px;
  font-size: 13px; opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s;
}
.ir-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ──────────────── Permissions Dashboard ──────────────── */
.ir-perms-dash {
  display: flex; flex-direction: column; gap: 8px;
  padding: 8px 0;
}
.ir-perms-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--color-surface, #FAF7F0);
  border: 1px solid var(--color-border, rgba(0,0,0,.08));
  border-radius: 12px;
}
.ir-perms-row .ir-perms-emoji { font-size: 22px; flex: 0 0 28px; }
.ir-perms-row .ir-perms-text { flex: 1 1 auto; min-width: 0; }
.ir-perms-row .ir-perms-text strong { display: block; font-size: 14px; }
.ir-perms-row .ir-perms-text small { display: block; font-size: 12px; opacity: .72; }
.ir-perms-row .ir-perms-state {
  font-size: 12px; padding: 4px 10px; border-radius: 999px;
  font-weight: 600;
}
.ir-perms-state.granted { background: rgba(46,171,111,.15); color: #2EAB6F; }
.ir-perms-state.denied  { background: rgba(217,83,79,.15);  color: #D9534F; }
.ir-perms-state.deferred,
.ir-perms-state.unset   { background: rgba(232,177,74,.15); color: #B89438; }
.ir-perms-state.coming  { background: rgba(74,159,232,.15); color: #4A9FE8; }
.ir-perms-row .ir-perms-action {
  min-height: 36px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--color-border-strong, rgba(0,0,0,.18));
  background: transparent; color: var(--color-text); cursor: pointer;
  font-size: 12px;
}
.ir-perms-row .ir-perms-action:hover { background: rgba(212,168,75,0.10); }