/* ═══ RideBack DRIVER app — light theme ═══
   Black header + black footer (both fixed), everything between is white.
   Scoped to .drv-app so the shared app.css (client app) is untouched. */

/* ── shell: white body, black chrome ──
   The frame is locked to the viewport height so ONLY the job list scrolls.
   (min-height alone let the frame grow and dragged the fixed footer off-screen.) */
.drv-app{overflow:hidden}
.drv-app .phone{
  background:#fff;
  height:100vh;height:100dvh;      /* dvh keeps it right when mobile browser chrome hides */
  max-height:100vh;max-height:100dvh;
  min-height:0;overflow:hidden
}
/* min-height:0 lets this flex child actually shrink and scroll internally */
.drv-app .app-body{
  background:#fff;color:#1a1a1a;
  flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch
}
/* desktop phone-frame preview keeps its fixed frame */
@media(min-width:500px){
  .drv-app .phone{height:min(880px,calc(100vh - 48px));max-height:min(880px,calc(100vh - 48px))}
  html.kb-open .drv-app .phone{height:min(880px,calc(100vh - 48px));max-height:min(880px,calc(100vh - 48px))}
}

/* header: black, never moves */
.drv-app .app-head{
  flex:none;position:relative;z-index:30;
  background:#0d0d0d;color:#fff;border-bottom:1px solid #1d1d1f
}
/* DRIVER pill (top right) — white */
.drv-app .app-role{color:#fff;border-color:rgba(255,255,255,.5)}

/* footer: black, fixed to the bottom */
.drv-app .tabbar{background:#0d0d0d;border-top:1px solid #1d1d1f;z-index:30;backdrop-filter:none}

/* ── tabs: light grey idle → bright white when selected (never red) ── */
.drv-app .tab{
  color:#83838c;font-size:.66rem;font-weight:600;letter-spacing:.03em;
  gap:5px;transition:color .16s ease
}
.drv-app .tab .t-ico{display:grid;place-items:center;width:24px;height:24px;font-size:0;line-height:0}
.drv-app .tab .t-ico svg{width:22px;height:22px;display:block;stroke:currentColor;fill:none}
.drv-app .tab.active{color:#fff}
.drv-app .tab.active .t-ico svg{stroke-width:1.9}
.drv-app .tab:active{opacity:.65}

/* ── stat cards: black boxes, white label + value ── */
.drv-app .mini{background:#0d0d0d;border:1px solid #0d0d0d;border-radius:13px}
.drv-app .mini b{color:#fff}
.drv-app .mini span{color:#e4e4e8}

/* ── section headings + empty states on white ── */
.drv-app .sec-title{color:#8a8a92}
.drv-app .empty{color:#8a8a92}

/* ── job cards on white ── */
.drv-app .job{
  background:#fff;border:1px solid #e6e6ec;border-radius:16px;
  box-shadow:0 2px 10px rgba(0,0,0,.05)
}
.drv-app .job-ref{color:#0a0a0a}
.drv-app .job-svc{color:#6b6b73}
.drv-app .job-route{color:#1a1a1a}
.drv-app .job-route span{color:#6b6b73}
.drv-app .job-meta{color:#6b6b73}
.drv-app .job-driver{background:#f6f6f8;border:1px solid #e6e6ec}
.drv-app .job-driver b{color:#0a0a0a}
.drv-app .job-driver span{color:#6b6b73}

/* status pills readable on a light card */
.drv-app .st-new{background:#e8f0fe;color:#1a56c4}
.drv-app .st-assigned{background:#fdf1e0;color:#9a5a00}
.drv-app .st-enroute{background:#fdeaea;color:#c11a15}
.drv-app .st-in_progress{background:#e8f0fe;color:#1a56c4}
.drv-app .st-completed{background:#e6f7ec;color:#12793f}
.drv-app .st-cancelled{background:#eeeef1;color:#66666f}

/* ── notifications on white ── */
.drv-app .notif{border-bottom:1px solid #ececf0}
.drv-app .notif b{color:#0a0a0a}
.drv-app .notif p{color:#6b6b73}
.drv-app .notif time{color:#9a9aa2}
.drv-app .notif.read .notif-dot{background:#d5d5db}

/* ── buttons on white ── */
.drv-app .btn-ghost{background:#fff;border:1.5px solid #dcdce1;color:#1a1a1a}
.drv-app .btn-ghost:active{background:#f4f4f6}

/* ── login screen (also light) ── */
.drv-loginlogo{height:84px;width:auto;display:block;margin:0 auto 10px;border-radius:16px}
.drv-app .app-login h1{color:#0a0a0a}
.drv-app .app-login p{color:#5a5a63}
.drv-app .app-login input,.drv-app .app-login select{
  background:#fafafa;border:1.5px solid #dcdce1;color:#111
}
.drv-app .app-login input::placeholder{color:#9a9aa2}
.drv-app .app-login input:focus,.drv-app .app-login select:focus{
  outline:0;border-color:#c9c9d2;background:#fff
}
.drv-password-field{position:relative;width:100%;margin-bottom:12px}
.drv-password-field input{margin-bottom:0!important;padding-right:52px!important}
.drv-password-toggle{
  position:absolute;right:3px;top:50%;transform:translateY(-50%);width:46px;height:46px;
  display:grid;place-items:center;border:0;background:transparent;color:#666b73;
  border-radius:10px;cursor:pointer;-webkit-tap-highlight-color:transparent
}
.drv-password-toggle:focus-visible{outline:2px solid #777;outline-offset:-4px}
.drv-password-toggle svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.drv-password-toggle .eye-off{display:none}
.drv-password-toggle.is-visible .eye-open{display:none}
.drv-password-toggle.is-visible .eye-off{display:block}
.drv-remember{
  display:flex;align-items:center;gap:9px;width:max-content;margin:0 0 14px 2px;
  color:#555a63;font-size:.82rem;line-height:1.2;cursor:pointer;user-select:none
}
.drv-app .app-login .drv-remember input{
  appearance:none;-webkit-appearance:none;width:19px;height:19px;min-width:19px;
  margin:0;padding:0;border:1.5px solid #b9bbc2;border-radius:5px;background:#fff;
  display:grid;place-content:center;cursor:pointer
}
.drv-app .app-login .drv-remember input::before{
  content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg) scale(0);transition:transform .12s ease
}
.drv-app .app-login .drv-remember input:checked{background:#e10600;border-color:#e10600}
.drv-app .app-login .drv-remember input:checked::before{transform:rotate(-45deg) scale(1)}
.drv-app .app-login .drv-remember input:focus-visible{outline:3px solid rgba(225,6,0,.2);outline-offset:2px}
.drv-app .drv-faceid-message{margin:0 0 10px;color:#666b73;font-size:.76rem;line-height:1.35;text-align:center}
.drv-app .app-hint{color:#7a7a82}
.drv-app .link-out{color:#8a8a92}
.drv-app .link-out:hover{color:#1a1a1a}

/* ═══ job filter tabs — square, sticky under the header ═══ */
.drv-seg{
  display:flex;gap:9px;align-items:stretch;
  padding:18px 14px 13px;background:#fff;border-bottom:1px solid #ececf0;
  position:relative;z-index:20;overflow:visible;flex:none
}
/* an explicit display: must not defeat the hidden attribute */
.drv-seg[hidden]{display:none}
.drv-seg-btn{
  position:relative;flex:1;min-width:0;border-radius:9px;   /* softly rounded corners */
  background:#fff;border:1.2px solid #d7d7dd;color:#4a4a53;
  font-family:var(--font-head);font-weight:600;font-size:.76rem;
  padding:11px 5px;cursor:pointer;transition:.15s;white-space:nowrap;
  overflow:visible                 /* must stay visible or the corner badge gets clipped */
}
.drv-seg-btn.on{background:#f3f3f6;border-color:#b9b9c2;color:#0a0a0a;font-weight:700}
/* count badge, square, top-right corner */
.drv-seg-n{
  position:absolute;top:-9px;right:-7px;border-radius:99px;z-index:2;
  min-width:21px;height:21px;padding:0 5px;
  background:#0a0a0a;color:#fff;border:2px solid #fff;   /* NOT selected: black bg, white number */
  font-family:var(--font-body);font-size:.63rem;font-weight:800;
  display:grid;place-items:center;line-height:1;
  box-shadow:0 1px 4px rgba(0,0,0,.18)
}
/* on the selected (black) tab the badge flips so it stays readable */
.drv-seg-btn.on .drv-seg-n{background:#0a0a0a;color:#fff;border-color:#fff}  /* selected: still the dark badge */
.drv-seg-n:empty{display:none}
/* $ earnings button */
.drv-earn{
  flex:none;width:46px;border-radius:9px;
  background:#0a0a0a;color:#fff;border:1.6px solid #0a0a0a;
  font-family:var(--font-head);font-weight:800;font-size:1.1rem;cursor:pointer;transition:.15s
}
.drv-earn:active{opacity:.8}

/* ═══ earnings modal ═══ */
.drv-modal{
  position:absolute;inset:0;z-index:60;background:rgba(10,10,10,.55);
  display:flex;align-items:center;justify-content:center;padding:20px
}
.drv-modal[hidden]{display:none}
.drv-modal-card{
  width:100%;max-width:390px;max-height:78%;background:#fff;
  display:flex;flex-direction:column;overflow:hidden;
  border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.45);animation:drvup .2s ease
}
@keyframes drvup{from{transform:scale(.94);opacity:0}to{transform:none;opacity:1}}
.drv-modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;background:linear-gradient(135deg,#e10600,#b30500);color:#fff;flex:none
}
.drv-modal-head h3{font-size:1.02rem;letter-spacing:.02em}
.drv-modal-x{background:none;border:0;color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;padding:0 4px}
.drv-modal-body{overflow-y:auto;padding:16px 18px 26px}
.drv-modal-body::-webkit-scrollbar{width:0}
/* filter chips */
.drv-earnfilters{display:flex;gap:7px;padding:13px 18px;border-bottom:1px solid #ececf0;overflow-x:auto;flex:none}
.drv-earnfilters::-webkit-scrollbar{height:0}
.drv-earnfilters button{
  flex:none;border-radius:8px;background:#fff;border:1.5px solid #d8d8de;color:#4a4a52;
  font-family:var(--font-body);font-weight:700;font-size:.74rem;padding:8px 13px;cursor:pointer;white-space:nowrap
}
.drv-earnfilters button.on{background:#e10600;border-color:#e10600;color:#fff}
/* KPI grid */
.drv-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.drv-kpi{background:#f5f5f7;border:1px solid #e6e6ec;padding:14px;border-radius:10px}
.drv-kpi b{display:block;font-family:var(--font-head);font-size:1.18rem;color:#0a0a0a;margin-bottom:3px}
.drv-kpi span{font-size:.6rem;font-weight:800;letter-spacing:.09em;color:#7a7a82}
/* the headline figure: deep green reads as money, not as a black slab */
.drv-kpi.hero{grid-column:1/-1;background:linear-gradient(135deg,#0f7a3d,#0b6b2e);border-color:#0b6b2e}
.drv-kpi.hero b{color:#fff;font-size:1.7rem}
.drv-kpi.hero span{color:#bfe6cd}
/* split rows */
.drv-split{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid #ececf0;font-size:.84rem;color:#5a5a63}
.drv-split b{font-family:var(--font-head);color:#0a0a0a}
/* per-trip breakdown */
.drv-erow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #f0f0f3}
.drv-erow b{font-size:.85rem;color:#0a0a0a;display:block}
.drv-erow span{font-size:.72rem;color:#8a8a92}
.drv-eamt{text-align:right;flex:none}
.drv-eamt b{font-family:var(--font-head);color:#0a0a0a}
/* job-action feedback: sits above the footer, never over it */
.drv-toast{
  position:absolute;left:14px;right:14px;bottom:calc(78px + env(safe-area-inset-bottom));z-index:50;
  padding:12px 14px;border-radius:12px;background:#0d0d0d;color:#fff;
  font-size:.84rem;font-weight:600;line-height:1.35;text-align:center;
  box-shadow:0 8px 26px rgba(0,0,0,.32);
  opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .18s ease,transform .18s ease
}
.drv-toast.is-open{opacity:1;transform:none}
.drv-toast.is-error{background:#c11a15}
@media(prefers-reduced-motion:reduce){.drv-toast{transition:none}}
.drv-app .job-actions .btn[aria-busy="true"]{opacity:.7}
.jc .job-actions{padding:0 14px 14px;display:grid;gap:8px}

/* paired job actions (Accept/Reject · Complete/Reset) side by side */
.jc .job-actions.jc-acts2{grid-template-columns:1fr 1fr}
.jc .job-actions .btn{margin:0;padding:13px 10px;font-size:.92rem;border-radius:10px}
.jc .job-actions .btn-ghost{background:#fff;border:1.5px solid #dcdce1;color:#3a3a42}
.jc .job-actions .btn-ghost:active{background:#f2f2f5}

/* footer: pinned to the bottom of the frame, above everything, always visible */
.drv-app .tabbar{position:absolute;left:0;right:0;bottom:0;z-index:40}
.drv-app .tabbar[hidden]{display:none !important}

/* ══ keyboard avoidance (see assets/js/keyboard-fix.js) ══
   Sign-in must stay a scroll container, and the whole phone frame shrinks
   by --kb so email, password and Sign In sit above the iPhone keyboard.
   .kb-open also fires when the native shell already resized the WebView
   (measured --kb is 0) — compact the logo/copy so the fields still fit. */
.drv-app .app-login{
  flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:34px 24px calc(24px + var(--kb, 0px));
  transition:padding .18s ease
}
html.kb-open .drv-app .phone{
  height:calc(100dvh - var(--kb, 0px));
  max-height:calc(100dvh - var(--kb, 0px))
}
/* The shared body is a grid that CENTRES the phone frame. Once the keyboard
   shrinks the frame, that centring pushed it DOWN by half the keyboard height:
   a black band above the header and the fields under the keyboard. On a phone,
   and whenever the keyboard is up, the frame is pinned to the top so the
   header never moves - only the sign-in area compacts and scrolls. */
.drv-app{align-items:start}
@media(min-width:500px){.drv-app{align-items:center}}
html.kb-open .drv-app{align-items:start}
html.kb-open .drv-loginlogo{height:48px;margin-bottom:4px}
html.kb-open .drv-app .app-login{padding-top:12px;padding-bottom:12px}
html.kb-open .drv-app .app-login h1{font-size:1.12rem;margin:8px 0 6px}
html.kb-open .drv-app .app-login > p{margin-bottom:12px;font-size:.8rem}
html.kb-open .drv-app .app-login .app-hint:not(#drvErr){display:none}
/* job list keeps its room too when a field is focused */
.drv-app .app-body{padding-bottom:calc(90px + var(--kb, 0px))}
/* earnings modal sits above the keyboard */
.drv-modal{padding-bottom:calc(20px + var(--kb, 0px))}