/* OnlyDrive Design System 2026 — Customer, Driver, Login and workflow surfaces */

body.od-platform {
  --bg: var(--od-bg-primary);
  --panel: var(--od-surface-1);
  --panel2: var(--od-surface-2);
  --line: var(--od-border-subtle);
  --text: var(--od-text-primary);
  --muted: var(--od-text-secondary);
  --muted2: var(--od-text-muted);
  --blue: var(--od-accent-strong);
  --cyan: var(--od-accent);
  --green: var(--od-success);
  --amber: var(--od-warning);
  --red: var(--od-danger);
}

body.od-platform :is(.topbar, .customer-topbar) {
  border-bottom: 1px solid var(--od-border-subtle);
  background: rgba(5, 9, 13, 0.88);
  box-shadow: none;
  backdrop-filter: blur(16px);
}
body.od-platform .topbar-inner { width: min(100%, 92rem); max-width: none; padding-inline: clamp(var(--od-space-4), 3vw, var(--od-space-8)); }
body.od-platform > .wrap,
body.od-platform #driverMain { width: min(100%, 92rem); max-width: none; padding-inline: clamp(var(--od-space-4), 3vw, var(--od-space-8)); }

body.od-customer.od-platform :is(.customer-hero, .hero-panel, .hero-side) {
  border-color: var(--od-border-subtle);
  border-radius: var(--od-radius-xl);
  background: var(--od-surface-1);
  box-shadow: none;
}
body.od-customer.od-platform .customer-hero::before { opacity: .35; }
body.od-customer.od-platform .hero-copy { color: var(--od-text-secondary); }
body.od-customer.od-platform .tabs,
body.od-driver-operations.od-platform .driverControlBar {
  position: sticky;
  z-index: 30;
  top: calc(var(--od-topbar-height) + var(--od-space-2));
  display: flex;
  width: fit-content;
  max-width: 100%;
  gap: var(--od-space-1);
  margin: var(--od-space-5) 0;
  padding: var(--od-space-1);
  overflow-x: auto;
  border: 1px solid var(--od-border-subtle);
  border-radius: var(--od-radius-md);
  background: rgba(8, 14, 20, 0.92);
  box-shadow: var(--od-shadow-sm);
  backdrop-filter: blur(16px);
}
body.od-platform .tabs .tab,
body.od-driver-operations.od-platform .driverControlBar .tab {
  min-height: 2.25rem;
  padding: 0 var(--od-space-3);
  border: 0 !important;
  border-radius: var(--od-radius-sm);
  background: transparent !important;
  color: var(--od-text-muted) !important;
  font-size: var(--od-text-xs);
  font-weight: 620;
  white-space: nowrap;
}
body.od-platform .tabs .tab.active,
body.od-driver-operations.od-platform .driverControlBar .tab.active {
  border-color: transparent !important;
  background: var(--od-accent-soft) !important;
  box-shadow: none !important;
  color: var(--od-accent) !important;
}
body.od-driver-operations.od-platform .driverControlBar .tabIcon,
body.od-driver-operations.od-platform .iconAction .od-icon,
body.od-driver-operations.od-platform .topbar .btn .od-icon {
  display: inline-grid;
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  place-items: center;
}
body.od-driver-operations.od-platform .driverControlBar .tabIcon svg,
body.od-driver-operations.od-platform .iconAction .od-icon,
body.od-driver-operations.od-platform .topbar .btn .od-icon {
  width: 100%;
  height: 100%;
  stroke: currentColor;
}

body.od-customer.od-platform :is(.customer-quick-card, .customer-secondary-card, .cx-section-card, .cx-profile-shell),
body.od-driver-operations.od-platform :is(.missionControl, .osPanel, .availableMissions, .financialClarity, .timeboard, .identityHero) {
  border-color: var(--od-border-subtle);
  border-radius: var(--od-radius-lg);
  background: var(--od-surface-1);
  box-shadow: none;
}

body.od-driver-operations.od-platform .missionControl { background: linear-gradient(145deg, var(--od-surface-2), var(--od-surface-1)); }
body.od-driver-operations.od-platform .missionPrimaryAction { min-height: 3rem; font-size: var(--od-text-md); }
body.od-driver-operations.od-platform :is(.osEyebrow, .cx-eyebrow, .cx-panel-kicker) { color: var(--od-accent); letter-spacing: .06em; }

/* Create order: four explicit stages, route first, persistent summary. */
body.od-customer-order.od-platform { padding: clamp(var(--od-space-2), 2vw, var(--od-space-5)); }
body.od-customer-order.od-platform .wrap { width: min(100%, 80rem); max-width: none; }
body.od-customer-order.od-platform .card { border-radius: var(--od-radius-xl); background: var(--od-surface-1); box-shadow: var(--od-shadow-md); }
body.od-customer-order.od-platform .head { padding: var(--od-space-5); border-bottom-color: var(--od-border-subtle); }
body.od-customer-order.od-platform .content { padding: var(--od-space-5); }
body.od-customer-order.od-platform .section { padding: var(--od-space-4); border-color: var(--od-border-subtle); border-radius: var(--od-radius-lg); background: var(--od-bg-secondary); }
body.od-customer-order.od-platform .address-card { border-color: var(--od-border-subtle); border-radius: var(--od-radius-md); background: var(--od-surface-1); }
body.od-customer-order.od-platform .route-map-shell { border-color: var(--od-border-subtle); border-radius: var(--od-radius-lg); }
body.od-customer-order.od-platform .wizard-footer { padding: var(--od-space-3) var(--od-space-5); border-color: var(--od-border-subtle); background: rgba(8,14,20,.94); }
body.od-customer-order.od-platform .cx-progress-bar { height: .25rem; background: var(--od-surface-3); }
body.od-customer-order.od-platform .cx-progress-bar span { background: var(--od-accent); }
body.od-customer-order.od-platform .price { border-color: var(--od-border-subtle); background: var(--od-surface-1); }

/* Login: same brand, deliberately simpler than product workspaces. */
body.od-login.od-platform { overflow-x: hidden; }
body.od-login.od-platform .scene { min-height: 100vh; background: transparent; }
body.od-login.od-platform .visual { border-right: 1px solid var(--od-border-subtle); background: linear-gradient(145deg, rgba(12,20,27,.84), rgba(5,9,13,.35)); }
body.od-login.od-platform .visual::before { opacity: .28; }
body.od-login.od-platform .visual h1 { max-width: 12ch; font-size: clamp(2.6rem, 5vw, 5.3rem); font-weight: 520; letter-spacing: -.055em; line-height: .96; }
body.od-login.od-platform .visual p { max-width: 36rem; color: var(--od-text-secondary); }
body.od-login.od-platform .feature-grid { grid-template-columns: 1fr 1fr; }
body.od-login.od-platform .feature { border-color: var(--od-border-subtle); border-radius: var(--od-radius-md); background: rgba(255,255,255,.018); }
body.od-login.od-platform .feature .fi,
body.od-login.od-platform :is(.icon-label .i, .field-icon) { display: none; }
body.od-login.od-platform .login-shell { width: min(28rem, 100%); padding: clamp(var(--od-space-6), 5vw, var(--od-space-10)); border: 1px solid var(--od-border-subtle); border-radius: var(--od-radius-xl); background: var(--od-surface-1); box-shadow: var(--od-shadow-lg); }
body.od-login.od-platform .login-shell::before { display: none; }
body.od-login.od-platform .login-shell h2 { margin-bottom: var(--od-space-2); font-size: var(--od-text-3xl); font-weight: 560; }
body.od-login.od-platform .login-shell > p { color: var(--od-text-secondary); }
body.od-login.od-platform .field input { padding-left: .75rem; }
body.od-login.od-platform #btnLogin { width: 100%; min-height: var(--od-control-lg); margin-top: var(--od-space-5); border: 0; border-radius: var(--od-radius-md); background: var(--od-accent); color: var(--od-text-inverse); font-weight: 720; }
body.od-login.od-platform #btnLogin::after { display: none; }
body.od-login.od-platform .access-list { display: none; }
body.od-login.od-platform .route-strip { border-color: var(--od-border-subtle); background: rgba(255,255,255,.018); }

/* Standalone admin forms */
body.od-admin-standalone.od-platform .wrap { width: min(100%, 64rem); }
body.od-admin-standalone.od-platform :is(.card, .form-card) { border-color: var(--od-border-subtle); background: var(--od-surface-1); box-shadow: var(--od-shadow-md); }

/* Password lifecycle pages share the same restrained access surface. */
body.od-auth.od-platform {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  padding: var(--od-space-4);
  background:
    radial-gradient(circle at 12% 0, rgba(47,125,244,.10), transparent 30rem),
    var(--od-bg-primary);
}
body.od-auth.od-platform > .card {
  width: min(32rem, 100%);
  padding: clamp(var(--od-space-5), 5vw, var(--od-space-8));
  border: 1px solid var(--od-border-subtle);
  border-radius: var(--od-radius-xl);
  background: var(--od-surface-1);
  box-shadow: var(--od-shadow-lg);
  backdrop-filter: none;
}
body.od-auth.od-platform .title { color: var(--od-text-primary); font-size: var(--od-text-2xl); font-weight: 600; letter-spacing: -.03em; }
body.od-auth.od-platform .sub { color: var(--od-text-secondary); }
body.od-auth.od-platform .eyebrow { color: var(--od-accent); letter-spacing: .08em; }
body.od-auth.od-platform :is(button, .linkbtn) { min-height: var(--od-control-lg); border-radius: var(--od-radius-md); }
body.od-auth.od-platform .primary { border: 0; background: var(--od-accent); color: var(--od-text-inverse); }