/* Transpora Design System — Layout shells
   Breakpoints verified at: 1440 / 1024 / 768 / 390 */

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* ===== App shell (company workspace: sidebar + topbar) ===== */
.app-shell { display: flex; min-height: 100dvh; }
.app-main { flex: 1; min-width: 0; }
.app-content { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-6); max-width: 1200px; }

.sidebar-scrim {
  display: none;
  position: fixed; inset: 0;
  background: rgba(16,17,24,0.44);
  z-index: var(--z-overlay);
}

@media (max-width: 1024px) {
  .sidebar {
    position: fixed;
    left: 0; top: 0;
    transform: translateX(-100%);
    z-index: var(--z-modal);
    transition: transform var(--duration-slow) var(--ease-standard);
    box-shadow: var(--shadow-lg);
  }
  .app-shell[data-nav-open="true"] .sidebar { transform: translateX(0); }
  .app-shell[data-nav-open="true"] .sidebar-scrim { display: block; }
  .menu-toggle { display: flex; }
}

@media (max-width: 768px) {
  .app-content { padding: var(--space-4); gap: var(--space-4); }
  .topbar { padding: 0 var(--space-4); }
  .card-pad, .card-body { padding: var(--space-4); }
  .card-header { padding: var(--space-4); }
}

/* Dashboard-specific grids */
.dashboard-columns {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 1024px) {
  .dashboard-columns { grid-template-columns: 1fr; }
}

.schedule-row {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}
.schedule-row:last-child { border-bottom: none; }
.schedule-time { width: 64px; flex: none; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.schedule-info { flex: 1; min-width: 0; }
.schedule-title { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schedule-meta { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 2px; }
@media (max-width: 768px) {
  .schedule-row { flex-wrap: wrap; padding: var(--space-3) var(--space-4); }
}

.attn-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}
.attn-row:last-child { border-bottom: none; }
.attn-icon {
  width: 32px; height: 32px; flex: none;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--warning-bg); color: var(--warning-fg);
}
.attn-icon svg { width: 16px; height: 16px; }
.attn-text { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--text-primary); }
.attn-text strong { font-weight: var(--fw-medium); }

/* ===== Auth shell (login / register — centered card) ===== */
.auth-shell {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.auth-side {
  background: var(--surface-inverse);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-10);
}
.auth-side .brand { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-semibold); font-size: var(--fs-md); }
.auth-side .brand .mark {
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  background: var(--brand-500); display: flex; align-items: center; justify-content: center;
  font-weight: var(--fw-bold); font-size: var(--fs-sm);
}
.auth-side .pitch h2 { font-size: var(--fs-3xl); line-height: var(--lh-tight); max-width: 20ch; }
.auth-side .pitch p { margin-top: var(--space-4); color: rgba(255,255,255,0.68); max-width: 42ch; font-size: var(--fs-md); line-height: var(--lh-relaxed); }
.auth-side .workflow { display: flex; flex-direction: column; gap: var(--space-3); }
.auth-side .workflow-step { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); color: rgba(255,255,255,0.85); }
.auth-side .workflow-step .num {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
}
.auth-side .foot { font-size: var(--fs-xs); color: rgba(255,255,255,0.45); }

.auth-form-side {
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-8);
}
.auth-form-wrap { width: 100%; max-width: 380px; }
.auth-form-wrap .mobile-brand { display: none; }
.auth-heading { margin-bottom: var(--space-6); }
.auth-heading h1 { font-size: var(--fs-2xl); }
.auth-heading p { margin-top: var(--space-2); color: var(--text-secondary); font-size: var(--fs-sm); }
.auth-divider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-6) 0; color: var(--text-tertiary); font-size: var(--fs-xs); }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }
.auth-foot { margin-top: var(--space-6); text-align: center; font-size: var(--fs-sm); color: var(--text-secondary); }

.invite-banner {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
}
.invite-banner .mark {
  width: 40px; height: 40px; border-radius: var(--radius-md); flex: none;
  background: var(--brand-600); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--fw-bold);
}
.invite-banner .label { font-size: var(--fs-xs); color: var(--brand-700); }
.invite-banner .company { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--gray-900); }

@media (max-width: 1024px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-side { display: none; }
  .auth-form-side { padding: var(--space-6); }
  .auth-form-wrap .mobile-brand {
    display: flex; align-items: center; gap: var(--space-2);
    font-weight: var(--fw-semibold); font-size: var(--fs-md);
    margin-bottom: var(--space-8);
  }
  .auth-form-wrap .mobile-brand .mark {
    width: 28px; height: 28px; border-radius: var(--radius-sm);
    background: var(--brand-600); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: var(--fw-bold); font-size: var(--fs-sm);
  }
}

/* ===== Driver shell (mobile-first) ===== */
.driver-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 480px;
  margin: 0 auto;
  background: var(--surface-canvas);
  position: relative;
}
.driver-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-4) var(--space-3);
  background: var(--surface-canvas);
  position: sticky; top: 0; z-index: var(--z-sticky);
}
.driver-topbar .greeting { font-size: var(--fs-xs); color: var(--text-tertiary); }
.driver-topbar .name { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.driver-content { flex: 1; padding: 0 var(--space-4) var(--space-20); display: flex; flex-direction: column; gap: var(--space-4); }

.next-job-card {
  border-radius: var(--radius-xl);
  background: var(--surface-inverse);
  color: #fff;
  padding: var(--space-5);
  box-shadow: var(--shadow-md);
}
.next-job-card .eyebrow { font-size: var(--fs-xs); color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.05em; }
.next-job-card .ref { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin-top: var(--space-1); }
.next-job-card .route { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); font-size: var(--fs-sm); }
.next-job-card .route .line { flex: 1; height: 1px; background: rgba(255,255,255,0.25); position: relative; }
.next-job-card .route .line::after { content: "→"; position: absolute; right: -2px; top: -9px; color: rgba(255,255,255,0.5); }
.next-job-card .meta-row { display: flex; justify-content: space-between; margin-top: var(--space-4); font-size: var(--fs-xs); color: rgba(255,255,255,0.6); }
.next-job-card .cta { margin-top: var(--space-5); }

.job-card {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.job-card .slot { width: 44px; text-align: center; flex: none; }
.job-card .slot .time { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-secondary); }
.job-card .info { flex: 1; min-width: 0; }
.job-card .title { font-size: var(--fs-sm); font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-card .sub { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 2px; }
.job-card .chev { color: var(--text-tertiary); flex: none; width: 18px; height: 18px; }

.driver-bottom-nav {
  position: sticky; bottom: 0;
  display: flex;
  background: var(--surface-card);
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-2) var(--space-2) max(var(--space-2), env(safe-area-inset-bottom));
}
.driver-bottom-nav .nav-tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--space-2) 0;
  border-radius: var(--radius-md);
  color: var(--text-tertiary);
  min-height: 48px;
  justify-content: center;
}
.driver-bottom-nav .nav-tab svg { width: 22px; height: 22px; }
.driver-bottom-nav .nav-tab span { font-size: 11px; font-weight: var(--fw-medium); }
.driver-bottom-nav .nav-tab[aria-current="page"] { color: var(--brand-600); }
.driver-bottom-nav .nav-tab:hover { text-decoration: none; }

/* ===== Public tracking shell ===== */
.public-shell { min-height: 100dvh; display: flex; flex-direction: column; }
.public-header {
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}
.public-header .brand { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-semibold); }
.public-header .brand .mark {
  width: 26px; height: 26px; border-radius: var(--radius-sm);
  background: var(--brand-600); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--fw-bold); font-size: 13px;
}
.public-main { flex: 1; display: flex; justify-content: center; padding: var(--space-8) var(--space-4); }
.tracking-wrap { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: var(--space-4); }
.tracking-search-wrap { width: 100%; max-width: 720px; display: flex; flex-direction: column; gap: var(--space-6); }
.tracking-search-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); }
.tracking-result-row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border-subtle); text-decoration: none; color: inherit; }
.tracking-result-row:last-child { border-bottom: none; }
.tracking-result-row:hover { background: var(--surface-muted); }
.tracking-hero { text-align: center; }
.tracking-hero .ref { font-size: var(--fs-sm); color: var(--text-tertiary); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.tracking-hero .status-big { margin-top: var(--space-2); }
.route-card { display: flex; align-items: stretch; }
.route-point { flex: 1; display: flex; flex-direction: column; gap: var(--space-1); }
.route-point .label { font-size: var(--fs-xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }
.route-point .place { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.route-arrow { display: flex; align-items: center; padding: 0 var(--space-4); color: var(--text-tertiary); }
.route-arrow svg { width: 20px; height: 20px; }

@media (max-width: 768px) {
  .route-card.card-pad { padding: var(--space-4); }
  .route-arrow { padding: 0 var(--space-2); }
}
@media (max-width: 390px) {
  .tracking-hero .status-big .badge { font-size: var(--fs-sm); height: 28px; padding: 0 var(--space-3); }
}