/* ATS Express — application styles (Bootstrap 5 based) */
:root {
  --ats-red: #ED3237;
  --ats-red-dark: #C4242A;
  --ats-red-soft: #FDECEC;
  --ats-blue: #00AFEF;
  --ats-blue-soft: #E5F7FE;
  --ats-ink: #1D2330;
  --ats-muted: #6B7385;
  --ats-line: #E6E8EE;
  --ats-bg: #F5F6F9;
  --ats-sidebar-w: 256px;
  --bs-primary: #ED3237;
  --bs-primary-rgb: 237, 50, 55;
  --bs-link-color: #C4242A;
  --bs-link-color-rgb: 196, 36, 42;
  --bs-link-hover-color: #9E1C21;
  --bs-body-font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-color: #1D2330;
  --bs-border-color: #E6E8EE;
}
body { background: var(--ats-bg); font-size: .925rem; }
.btn-primary { --bs-btn-bg: var(--ats-red); --bs-btn-border-color: var(--ats-red); --bs-btn-hover-bg: var(--ats-red-dark); --bs-btn-hover-border-color: var(--ats-red-dark); --bs-btn-active-bg: #A91E23; --bs-btn-active-border-color: #A91E23; --bs-btn-disabled-bg: var(--ats-red); --bs-btn-disabled-border-color: var(--ats-red); }
.btn-outline-primary { --bs-btn-color: var(--ats-red); --bs-btn-border-color: var(--ats-red); --bs-btn-hover-bg: var(--ats-red); --bs-btn-hover-border-color: var(--ats-red); --bs-btn-active-bg: var(--ats-red-dark); --bs-btn-active-border-color: var(--ats-red-dark); }
.btn-info { --bs-btn-color: #fff; --bs-btn-bg: var(--ats-blue); --bs-btn-border-color: var(--ats-blue); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #0097CE; --bs-btn-hover-border-color: #0097CE; }
.text-bg-primary { background-color: var(--ats-red) !important; }
.text-bg-info { background-color: var(--ats-blue) !important; color: #fff !important; }
.text-primary { color: var(--ats-red) !important; }
.bg-primary { background-color: var(--ats-red) !important; }
.form-control:focus, .form-select:focus { border-color: #F59A9D; box-shadow: 0 0 0 .2rem rgba(237, 50, 55, .15); }
.form-check-input:checked { background-color: var(--ats-red); border-color: var(--ats-red); }
.nav-pills .nav-link.active { background: var(--ats-red); }
.page-item.active .page-link { background: var(--ats-red); border-color: var(--ats-red); }
.page-link { color: var(--ats-red-dark); }
a { text-decoration: none; }

/* ---------- shell ---------- */
.ats-sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--ats-sidebar-w); background: #fff;
  border-right: 1px solid var(--ats-line); display: flex; flex-direction: column; z-index: 1040;
}
.ats-sidebar .brand { padding: 18px 20px 14px; border-bottom: 1px solid var(--ats-line); }
.ats-sidebar .brand img { height: 46px; }
.ats-sidebar .brand small { display: block; color: var(--ats-muted); font-size: .72rem; letter-spacing: .04em; margin-top: 4px; }
.ats-nav { overflow-y: auto; padding: 10px 10px 24px; flex: 1; }
.ats-nav .nav-section { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: #9AA1B1; padding: 16px 12px 6px; font-weight: 600; }
.ats-nav a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; color: #3A4252; font-weight: 500; }
.ats-nav a i { font-size: 1.05rem; color: #8C93A3; width: 20px; text-align: center; }
.ats-nav a:hover { background: var(--ats-bg); color: var(--ats-ink); }
.ats-nav a.active { background: var(--ats-red-soft); color: var(--ats-red-dark); }
.ats-nav a.active i { color: var(--ats-red); }
.ats-nav .nav-cta { background: var(--ats-red); color: #fff; margin: 6px 0 4px; justify-content: center; }
.ats-nav .nav-cta i { color: #fff; }
.ats-nav .nav-cta:hover { background: var(--ats-red-dark); color: #fff; }
.ats-main { margin-left: var(--ats-sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
.ats-topbar {
  position: sticky; top: 0; z-index: 1030; background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ats-line); padding: 10px 24px; display: flex; align-items: center; gap: 12px;
}
.ats-topbar h1 { font-size: 1.15rem; margin: 0; font-weight: 650; }
.ats-topbar .quick-track { max-width: 260px; }
.ats-content { padding: 22px 24px 40px; flex: 1; }
.ats-footer { padding: 14px 24px; color: var(--ats-muted); font-size: .78rem; border-top: 1px solid var(--ats-line); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--ats-red); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .8rem; }
@media (max-width: 991.98px) {
  .ats-sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(0,0,0,.15); }
  .ats-sidebar.show { transform: none; }
  .ats-main { margin-left: 0; }
  .ats-content { padding: 16px 14px 32px; }
  .ats-topbar { padding: 10px 14px; }
  .ats-backdrop { position: fixed; inset: 0; background: rgba(15,18,25,.4); z-index: 1035; display: none; }
  .ats-backdrop.show { display: block; }
}

/* ---------- components ---------- */
.card { border: 1px solid var(--ats-line); border-radius: 12px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.card-header { background: #fff; border-bottom: 1px solid var(--ats-line); font-weight: 600; padding: 12px 16px; border-radius: 12px 12px 0 0 !important; }
.card-header .small { font-weight: 400; }
.stat-card { padding: 16px 18px; display: flex; flex-direction: row; gap: 14px; align-items: center; height: 100%; }
.stat-card .icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex: none; }
.stat-card .value { font-size: 1.45rem; font-weight: 700; line-height: 1.1; }
.stat-card .label { color: var(--ats-muted); font-size: .8rem; }
.icon-red { background: var(--ats-red-soft); color: var(--ats-red); }
.icon-blue { background: var(--ats-blue-soft); color: #0089BC; }
.icon-green { background: #E8F7EE; color: #1B8A4B; }
.icon-amber { background: #FFF4E0; color: #B26A00; }
.icon-slate { background: #EEF0F4; color: #4A5265; }
.icon-purple { background: #F1ECFC; color: #6A3FC1; }
.table { --bs-table-hover-bg: #FAFAFC; margin-bottom: 0; }
.table > thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ats-muted); font-weight: 600; background: #FAFBFC; border-bottom-width: 1px; white-space: nowrap; }
.table td { vertical-align: middle; }
.cn { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight: 600; letter-spacing: .02em; }
.filters { background: #fff; border: 1px solid var(--ats-line); border-radius: 12px; padding: 12px; margin-bottom: 16px; }
.filters .form-label { font-size: .72rem; color: var(--ats-muted); margin-bottom: 2px; text-transform: uppercase; letter-spacing: .04em; }
.form-label { font-weight: 500; margin-bottom: .3rem; }
.required::after { content: " *"; color: var(--ats-red); }
.section-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ats-muted); font-weight: 650; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.section-title i { color: var(--ats-red); }
.dl-grid { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; margin: 0; }
.dl-grid dt { color: var(--ats-muted); font-weight: 500; }
.dl-grid dd { margin: 0; }
.empty-state { text-align: center; padding: 36px 16px; color: var(--ats-muted); }
.empty-state i { font-size: 2rem; display: block; margin-bottom: 8px; color: #C3C8D2; }
.badge { font-weight: 600; letter-spacing: .01em; }
.text-bg-light { color: #4A5265 !important; border: 1px solid var(--ats-line); }

/* price summary on booking */
.price-box { background: #FBFBFD; border: 1px dashed #D5D9E2; border-radius: 10px; padding: 12px 14px; }
.price-box .row-line { display: flex; justify-content: space-between; padding: 3px 0; font-size: .88rem; }
.price-box .total { border-top: 1px solid var(--ats-line); margin-top: 6px; padding-top: 8px; font-weight: 700; font-size: 1.15rem; }
.sticky-summary { position: sticky; top: 76px; }

/* tracking timeline */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline li { position: relative; padding: 0 0 18px 30px; }
.timeline li::before { content: ""; position: absolute; left: 8px; top: 18px; bottom: -2px; width: 2px; background: var(--ats-line); }
.timeline li:last-child::before { display: none; }
.timeline .dot { position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid #C3C8D2; }
.timeline li.current .dot { border-color: var(--ats-red); box-shadow: 0 0 0 4px var(--ats-red-soft); }
.timeline .t-title { font-weight: 600; }
.timeline .t-meta { color: var(--ats-muted); font-size: .8rem; }

/* auth & public pages */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.auth-hero { background: linear-gradient(150deg, #ED3237 0%, #C4242A 60%, #8E1519 100%); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth-hero::after { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; border: 70px solid rgba(255,255,255,.07); right: -170px; bottom: -190px; }
.auth-hero h2 { font-weight: 700; font-size: 2rem; max-width: 420px; }
.auth-hero .logo-chip { background: #fff; border-radius: 14px; padding: 10px 14px; display: inline-block; }
.auth-hero .logo-chip img { height: 54px; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 32px 20px; background: #fff; }
.auth-form .inner { width: 100%; max-width: 380px; }
@media (max-width: 860px) { .auth-wrap { grid-template-columns: 1fr; } .auth-hero { display: none; } }
.public-head { background: #fff; border-bottom: 3px solid var(--ats-red); }
.public-head img { height: 48px; }
.track-hero { background: linear-gradient(150deg, #ED3237, #B31E24); color: #fff; padding: 42px 0 70px; }
.track-card { margin-top: -46px; }

/* rider mobile */
.rider-shell { max-width: 640px; margin: 0 auto; }
.rider-top { background: var(--ats-red); color: #fff; padding: 14px 16px; position: sticky; top: 0; z-index: 10; }
.task-card { border-left: 4px solid var(--ats-blue); }
.task-card.pickup { border-left-color: var(--ats-red); }
.sig-pad { border: 2px dashed #C3C8D2; border-radius: 10px; width: 100%; height: 180px; touch-action: none; background: #fff; }

.status-pill { display: inline-flex; align-items: center; gap: 6px; }
.drag-handle { cursor: grab; color: #9AA1B1; }
.kbd { font-family: ui-monospace, Consolas, monospace; background: #EEF0F4; padding: 1px 6px; border-radius: 4px; font-size: .8rem; }
.demo-banner { background: #FFF4E0; color: #7A4A00; border-bottom: 1px solid #F3DDB3; padding: 6px 24px; font-size: .82rem; }
@media print { .no-print { display: none !important; } }

/* ---------- installable app (PWA) ---------- */
.pwa-banner { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 2000; background: #fff; border: 1px solid var(--ats-line);
  border-radius: 14px; box-shadow: 0 10px 30px rgba(16,24,40,.18); padding: 10px 10px 10px 12px; display: flex; align-items: center; gap: 10px; max-width: 520px; margin: 0 auto; }
.pwa-banner img { width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--ats-line); }
.pwa-banner .pwa-txt { flex: 1; line-height: 1.2; font-size: .85rem; }
.pwa-banner .pwa-txt b { display: block; }
.pwa-banner .pwa-txt span { color: var(--ats-muted); font-size: .78rem; }
.pwa-banner .pwa-go { background: var(--ats-red); color: #fff; border: 0; border-radius: 9px; padding: 8px 14px; font-weight: 600; }
.pwa-banner .pwa-x, .pwa-head .pwa-x { background: none; border: 0; font-size: 1.5rem; line-height: 1; color: #9AA1B1; padding: 0 4px; }
.pwa-modal { position: fixed; inset: 0; background: rgba(15,18,25,.45); z-index: 2100; display: none; align-items: flex-end; justify-content: center; }
.pwa-modal.open { display: flex; }
.pwa-sheet { background: #fff; width: 100%; max-width: 440px; border-radius: 18px 18px 0 0; padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); }
@media (min-width: 576px) { .pwa-modal { align-items: center; } .pwa-sheet { border-radius: 18px; } }
.pwa-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pwa-head img { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--ats-line); }
.pwa-head strong { flex: 1; font-size: 1.05rem; }
.pwa-body ol { padding-left: 1.2rem; margin: 0 0 8px; }
.pwa-body li { margin: 6px 0; }
.pwa-ico { display: inline-block; min-width: 1.4em; text-align: center; background: #EEF0F4; border-radius: 6px; padding: 0 4px; }
.pwa-note { font-size: .8rem; color: #7A4A00; background: #FFF4E0; border-radius: 8px; padding: 8px 10px; margin: 6px 0 0; }
.pwa-ok { width: 100%; background: var(--ats-red); color: #fff; border: 0; border-radius: 10px; padding: 11px; font-weight: 600; margin-top: 8px; }
/* When opened from the home screen, leave room for the phone's status bar / notch */
.ats-standalone .ats-topbar, .ats-standalone .rider-top { padding-top: max(10px, env(safe-area-inset-top)); }