/* Approved authenticated Bistam Driver dashboard. All visible values are populated from live Bistam API state. */
#app-view { display: grid; gap: 14px; }
#app-view.hidden { display: none; }

.driver-status-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 24px;
  border: 1px solid rgba(0, 127, 115, .14);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(230, 250, 246, .98), rgba(255, 255, 255, .98));
  color: var(--ink);
  box-shadow: 0 20px 48px rgba(18, 51, 47, .09);
}
.driver-status-hero::after {
  position: absolute;
  top: -82px;
  right: -46px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: rgba(0, 166, 147, .08);
  content: "";
  pointer-events: none;
}
.driver-status-hero .eyebrow { color: var(--green); }
.driver-status-hero h1 { max-width: none; margin: 2px 0 7px; color: var(--ink); font-size: clamp(30px, 7vw, 46px); letter-spacing: -.035em; }
.driver-status-hero p:last-child { margin: 0; color: var(--muted); }
.driver-status-copy { position: relative; z-index: 1; min-width: 0; }
.driver-status-hero .online-button {
  border-color: rgba(0, 127, 115, .16);
  background: white;
  color: var(--ink);
  box-shadow: 0 12px 30px rgba(18, 51, 47, .08);
}
.driver-status-hero .online-button small { color: var(--muted); }
.driver-status-hero .online-button.online { border-color: var(--green); background: var(--green); color: white; box-shadow: 0 14px 32px rgba(0, 127, 115, .22); }
.driver-status-hero .online-button.online small { color: rgba(255, 255, 255, .78); }

#home-panel.driver-panel {
  display: grid;
  gap: 16px;
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
#home-panel.driver-panel.hidden { display: none; }
#active-section,
#offers-section {
  padding: 20px;
  border: 1px solid rgba(22, 77, 70, .10);
  border-radius: 25px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 14px 36px rgba(18, 51, 47, .07);
}

.driver-readiness-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.driver-readiness-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid rgba(22, 77, 70, .10);
  border-radius: 24px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 14px 36px rgba(18, 51, 47, .07);
}
.driver-readiness-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.driver-readiness-heading h3 { margin: 2px 0 0; color: var(--ink); font-size: 19px; letter-spacing: -.02em; }
.driver-readiness-heading .eyebrow { margin-bottom: 3px; }
.driver-readiness-state { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 30px; padding: 6px 10px; border-radius: 999px; background: var(--warning-soft); color: #725426; font-size: 11px; font-weight: 850; }
.driver-readiness-state.ready { background: var(--turquoise-soft); color: var(--green); }
.driver-readiness-state.blocked { background: var(--danger-soft); color: var(--danger); }
.driver-readiness-list { display: grid; gap: 0; }
.driver-readiness-list > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line); }
.driver-readiness-list > div:first-child { border-top: 0; }
.driver-readiness-list span { color: var(--muted); font-size: 12px; }
.driver-readiness-list strong { min-width: 0; color: var(--ink); font-size: 13px; text-align: right; overflow-wrap: anywhere; }

.driver-empty-ride { display: grid; gap: 5px; padding: 24px 18px; border: 1px dashed rgba(0, 127, 115, .25); border-radius: 20px; background: rgba(231, 248, 244, .48); text-align: center; }
.driver-empty-ride strong { color: var(--ink); font-size: 17px; }
.driver-empty-ride span { color: var(--muted); font-size: 13px; line-height: 1.5; }

.ride-card.driver-offer-card,
.ride-card.active-ride-card { padding: 20px; border-radius: 23px; }
.ride-card.driver-offer-card { border-color: rgba(0, 127, 115, .20); box-shadow: 0 18px 42px rgba(0, 127, 115, .09); }
.ride-card.driver-offer-card .ride-card-top > strong,
.ride-card.active-ride-card .ride-card-top > strong { font-size: 18px; }
.ride-card-kicker { margin: 0 0 4px; color: var(--green); font-size: 10px; font-weight: 900; letter-spacing: .10em; text-transform: uppercase; }
.ride-card-title { margin: 0; color: var(--ink); font-size: 22px; letter-spacing: -.025em; }
.ride-metrics.ride-metrics-four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.ride-metrics.ride-metrics-four .ride-metric { display: grid; gap: 3px; min-width: 0; padding: 13px 12px; border-radius: 15px; background: #f2f8f6; text-align: left; }
.ride-metrics.ride-metrics-four .ride-metric small { color: var(--muted); font-size: 10px; font-weight: 800; }
.ride-metrics.ride-metrics-four .ride-metric strong { display: block; overflow: hidden; color: var(--ink); font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.ride-metrics.ride-metrics-four .ride-metric.payout strong { color: var(--green); }

.ride-progress { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 2px 0 16px; }
.ride-progress-step { display: grid; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 800; text-align: center; }
.ride-progress-step::before { width: 100%; height: 4px; border-radius: 999px; background: var(--line); content: ""; }
.ride-progress-step.done,
.ride-progress-step.current { color: var(--green); }
.ride-progress-step.done::before,
.ride-progress-step.current::before { background: var(--green); }
.ride-progress-step.current::before { box-shadow: 0 0 0 3px rgba(0, 127, 115, .10); }

.driver-offer-card .drive-action,
.active-ride-card .drive-action { min-height: 54px; }
.active-ride-card a.drive-action { display: grid; place-items: center; text-decoration: none; }
.active-ride-card [data-driver-cancel] { border-color: rgba(170, 45, 62, .20); color: var(--danger); }

@media (max-width: 600px) {
  .driver-status-hero { grid-template-columns: 1fr; padding: 20px; }
  .driver-status-hero .online-button { width: 100%; }
  .driver-readiness-grid { grid-template-columns: 1fr; }
  #active-section, #offers-section, .driver-readiness-card { padding: 17px; border-radius: 22px; }
}

@media (max-width: 390px) {
  .ride-metrics.ride-metrics-four { grid-template-columns: 1fr 1fr; }
  .ride-progress-step { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .driver-status-hero .online-button { transition: none; }
}