/* ─────────────────────────────────────────────────────────────────────────────
   Traveler Delivery design system — ported from the Next.js app (globals.css +
   Tailwind tokens) onto Bootstrap. Single light theme. Orange is the accent,
   not the whole product.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  --brand-50: #fff4ec; --brand-100: #ffe6d5; --brand-200: #ffc9a8; --brand-400: #ff8a47;
  --brand-500: #ff6a1a; --brand-600: #f15a09; --brand-700: #c4470a;
  --brand: var(--brand-500);
  --brandblue-500: #2149c9; --brandblue-600: #1b3c9c; --brandblue-700: #16307d;
  --app-bg: #f8f9fb;
  --zinc-50: #fafafa; --zinc-100: #f4f4f5; --zinc-200: #e4e4e7; --zinc-300: #d4d4d8; --zinc-400: #a1a1aa;
  --zinc-500: #71717a; --zinc-600: #52525b; --zinc-700: #3f3f46; --zinc-900: #18181b;
  --bs-body-font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-color: var(--zinc-900);
  --bs-border-color: var(--zinc-200);
  --bs-link-color: var(--brandblue-500);
  --bs-link-hover-color: var(--brandblue-700);
  --bs-border-radius: .5rem;
  --bs-border-radius-lg: .75rem;
  color-scheme: light;
}
html { font-size: 15px; }
body { background: var(--app-bg); color: var(--zinc-900); -webkit-font-smoothing: antialiased; min-height: 100vh; }
.tabular-nums { font-variant-numeric: tabular-nums; }
* { scrollbar-width: thin; }

/* Buttons */
.btn { border-radius: .55rem; font-weight: 500; }
.btn-brand { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }
.btn-brand:hover, .btn-brand:focus, .btn-brand:active { background: var(--brand-600) !important; border-color: var(--brand-600) !important; color: #fff !important; }
.btn-outline-secondary { color: var(--zinc-700); border-color: var(--zinc-300); background: #fff; }
.btn-outline-secondary:hover { background: var(--zinc-100); color: var(--zinc-900); border-color: var(--zinc-300); }
.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus {
  box-shadow: 0 0 0 .2rem rgba(255, 106, 26, .2); border-color: var(--brand-400);
}
.form-check-input:checked { background-color: var(--brand-500); border-color: var(--brand-500); }
.text-brand { color: var(--brand-600) !important; }

/* Cards, tables */
.card { border-color: var(--zinc-200); border-radius: .75rem; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.card-header { background: #fff; border-bottom-color: var(--zinc-200); border-radius: .75rem .75rem 0 0 !important; }
.table { --bs-table-bg: #fff; }
.table > thead > tr > th, .table thead.table-light th {
  background: var(--zinc-50); color: var(--zinc-500); font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; border-bottom-color: var(--zinc-200);
}
.table-responsive.border, .table-responsive.rounded { border-radius: .75rem !important; overflow: hidden; }
.alert { border-radius: .75rem; }

/* Status pills (Next.js StatusPill tones) */
.pill { display: inline-flex; align-items: center; border-radius: 999px; padding: .1rem .55rem; font-size: .75rem; font-weight: 500; white-space: nowrap; line-height: 1.5; }
.pill-neutral { background: var(--zinc-100); color: var(--zinc-700); }
.pill-blue    { background: #dbeafe; color: #1d4ed8; }
.pill-indigo  { background: #e0e7ff; color: #4338ca; }
.pill-amber   { background: #fef3c7; color: #92400e; }
.pill-green   { background: #d1fae5; color: #047857; }
.pill-red     { background: #fee2e2; color: #b91c1c; }
.pill-purple  { background: #f3e8ff; color: #7e22ce; }

/* ── Dashboard shell (admin + client): fixed white sidebar on large screens ── */
.td-sidebar { position: fixed; inset: 0 auto 0 0; width: 16rem; z-index: 30; display: none; flex-direction: column; background: #fff; border-right: 1px solid var(--zinc-200); }
.td-sidebar .td-logo { height: 4rem; display: flex; align-items: center; padding: 0 1.25rem; border-bottom: 1px solid var(--zinc-200); }
.td-sidebar .td-logo img { height: 34px; width: auto; }
.td-sidebar .td-nav { flex: 1; overflow-y: auto; padding: .75rem; }
.td-nav-link { display: flex; align-items: center; gap: .65rem; padding: .55rem .75rem; margin-bottom: .2rem; border-radius: .55rem; color: var(--zinc-600); font-size: .92rem; font-weight: 500; text-decoration: none; }
.td-nav-link .ico { color: var(--zinc-400); display: inline-flex; }
.td-nav-link:hover { background: var(--zinc-100); color: var(--zinc-900); }
.td-nav-link.active { background: var(--brand-50); color: var(--brand-700); }
.td-nav-link.active .ico { color: var(--brand-600); }
.td-account { border-top: 1px solid var(--zinc-200); padding: .75rem; display: flex; align-items: center; gap: .6rem; }
.td-avatar { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; background: var(--brand-100); color: var(--brand-700); font-weight: 700; font-size: .85rem; flex-shrink: 0; }
.td-account .who { min-width: 0; flex: 1; }
.td-account .who div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-icon-btn { width: 32px; height: 32px; display: grid; place-items: center; border-radius: .5rem; color: var(--zinc-400); background: transparent; border: 0; }
.td-icon-btn:hover { background: var(--zinc-100); color: var(--zinc-700); }
.td-header { position: sticky; top: 0; z-index: 20; height: 4rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 0 1rem; background: rgba(255,255,255,.92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--zinc-200); }
.td-header .mobile-logo img { height: 28px; }
.td-mobile-nav { display: flex; gap: .25rem; overflow-x: auto; padding: .5rem; background: #fff; border-bottom: 1px solid var(--zinc-200); }
.td-mobile-nav .td-nav-link { white-space: nowrap; margin: 0; padding: .4rem .65rem; font-size: .85rem; }
.td-main { max-width: 80rem; margin: 0 auto; padding: 1.5rem 1rem; }
@media (min-width: 992px) {
  .td-sidebar { display: flex; }
  .td-content { padding-left: 16rem; }
  .td-header .mobile-logo, .td-mobile-nav { display: none !important; }
}
@media (min-width: 576px) { .td-main { padding: 1.5rem; } .td-header { padding: 0 1.5rem; } }

/* Page heading (Next.js PageHeading) */
.page-title { font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.page-subtitle { color: var(--zinc-500); font-size: .9rem; margin-top: .25rem; }
h1.h3 { font-weight: 700; letter-spacing: -.01em; }

/* ── Auth / public pages ── */
.td-auth { min-height: 100vh; display: grid; place-items: center; padding: 3rem 1.25rem; }
.td-auth-card { width: 100%; max-width: 26rem; }

/* ── Driver app (mobile): max-w-md column + bottom tab bar ── */
.drv-wrap { max-width: 28rem; margin: 0 auto; min-height: 100vh; padding-bottom: 6rem; background: var(--app-bg); }
.drv-top { position: sticky; top: 0; z-index: 30; height: 3.5rem; display: flex; align-items: center; gap: .5rem; padding: 0 1rem; background: rgba(255,255,255,.95); backdrop-filter: blur(6px); border-bottom: 1px solid var(--zinc-200); }
.drv-top img { height: 26px; }
.drv-top .title { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drv-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; max-width: 28rem; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(255,255,255,.95); backdrop-filter: blur(6px); border-top: 1px solid var(--zinc-200); padding-bottom: env(safe-area-inset-bottom); }
.drv-nav a { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .55rem 0 .5rem; font-size: .7rem; font-weight: 500; color: var(--zinc-400); text-decoration: none; }
.drv-nav a.active { color: var(--brand-600); }
.drv-main { padding: 1rem; }
.touch { min-height: 48px; }
.card-tap:active { background: var(--zinc-50); }