/* Generated from the inline stylesheet; the themed :root block stays inline in PHP. */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Manrope",system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);font-size:16px;line-height:1.45;
  padding-bottom:calc(var(--tabh) + env(safe-area-inset-bottom))}
/* a link is the app's green, not the browser's blue; the underline stays (see shared.css) */
a{color:var(--accent)}

.fhead{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--heading);color:#fff;padding:calc(11px + env(safe-area-inset-top)) 16px 11px}
.fh-title{font-weight:700;font-size:1rem}
.fwrap{max-width:560px;margin:0 auto;padding:16px 14px 24px}

/* bottom tabs - thumb reach, big targets, safe-area aware */
.ftabs{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;background:#fff;border-top:1px solid var(--border);
  padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -2px 12px rgba(0,0,0,.06)}
.ftabs a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:var(--tabh);
  text-decoration:none;color:var(--muted);font-size:.68rem;font-weight:700;letter-spacing:.01em}
.ftabs svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ftabs a.on{color:var(--accent)}
.ftabs a:active{background:var(--accent-soft)}

h1{margin:0 0 4px;font-size:1.35rem;color:var(--heading)}
h2{margin:0 0 12px;font-size:1.05rem;color:var(--heading)}
.sub{margin:0 0 20px;color:var(--muted);font-size:.86rem}
.sub a{color:var(--accent);font-weight:700;text-decoration:none;white-space:nowrap}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px;box-shadow:0 2px 14px rgba(0,0,0,.05);margin-bottom:14px}

label{display:block;margin:0 0 6px;font-weight:700;font-size:.8rem;color:var(--heading)}
input,select,textarea{width:100%;padding:13px 13px;margin-bottom:16px;border:1px solid var(--border);border-radius:10px;
  font:inherit;font-size:16px;background:#fff;color:var(--text)}
textarea{min-height:80px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
input[type=file]{padding:11px;background:#fafafa}
.clr{position:relative;display:flex;margin-bottom:16px}.clr input{flex:1 1 auto;padding-right:48px;margin-bottom:0}
.clr button{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0 0 2px;margin:0;border:0;border-radius:50%;background:#eef0f4;color:var(--muted);font:400 22px/1 system-ui,-apple-system,sans-serif;-webkit-appearance:none;appearance:none;cursor:pointer}
.clr button:active{background:var(--border);color:var(--text)}
/* iOS gives date fields an intrinsic width wider than half the screen; take it away */
input[type=date]{min-width:0;max-width:100%;-webkit-appearance:none;appearance:none;display:block;box-sizing:border-box;min-height:50px;text-align:left}
input[type=date]::-webkit-date-and-time-value{text-align:left}
button,.btn{display:inline-block;width:100%;padding:15px;border:0;border-radius:10px;background:var(--accent);color:#fff;
  font:inherit;font-weight:700;font-size:1.02rem;text-align:center;text-decoration:none;cursor:pointer}
button:hover,.btn:hover{background:var(--accent-hover)}
button:disabled{opacity:.5}

/* home: big buttons */
.clockbar{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px 18px;margin-bottom:14px;text-decoration:none;color:var(--text);box-shadow:0 2px 14px rgba(0,0,0,.05)}
.clockbar .dot{width:14px;height:14px;border-radius:50%;background:#b5b8c5;flex:0 0 auto;box-shadow:0 0 0 4px rgba(0,0,0,.05)}
.clockbar.on .dot{background:#2ecc71;box-shadow:0 0 0 4px rgba(46,204,113,.25)}
.clockbar .txt{flex:1;min-width:0}
.clockbar b{display:block;font-size:1.05rem}
.clockbar small{display:block;color:var(--muted);font-size:.82rem;margin-top:2px;overflow-wrap:anywhere}
.clockbar .go{font-size:1.6rem;color:var(--muted);line-height:1}
.clock-state{text-align:center;padding:26px 16px 22px}
.clock-state .big{font-size:1.6rem;font-weight:800;margin:6px 0 2px}
.clock-state .sub{margin:0}
.clock-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
.clock-stats div{background:var(--accent-soft);border-radius:12px;padding:12px;text-align:center}
.clock-stats b{display:block;font-size:1.25rem}
.clock-stats small{color:var(--muted);font-size:.78rem}
.clock-btn.out{background:#c0392b}
/* inspection issues: one card per reported item */
.hidepick{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.hidepick input{pointer-events:auto}
.issue{border:1px solid #e0a1a1;background:#fff7f7;border-radius:12px;padding:12px;margin-bottom:12px}
.issue-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.issue-head b{font-size:1.05rem;color:var(--heading)}
.issue-x{width:auto;padding:4px 12px;font-size:1.3rem;line-height:1;background:0;color:var(--muted);border:0;margin:0}
.sev{display:flex;gap:6px;margin-bottom:8px}
.sev label{flex:1;margin:0;position:relative}
.sev input{position:absolute;opacity:0;width:0;height:0}
.sev span{display:block;text-align:center;padding:10px 4px;border:1px solid var(--border);border-radius:8px;background:#fff;font-weight:700;font-size:.9rem}
.sev input:checked+span{background:var(--accent);color:#fff;border-color:var(--accent)}
.sev label:nth-child(3) input:checked+span{background:#a11b1b;border-color:#a11b1b}
.issue textarea{margin-bottom:8px;min-height:56px}
.issue-photo{display:inline-block;margin:0 0 6px}
.issue-photo input{position:absolute;opacity:0;width:0;height:0}
.issue-photo span{display:inline-block;padding:9px 14px;border:1px dashed var(--accent);border-radius:8px;color:var(--accent);font-weight:700;font-size:.9rem;cursor:pointer}
.issue-prev{display:flex;flex-wrap:wrap;gap:10px;padding-top:6px}
.repairs{margin-top:16px}
/* the driver's orders from Dispatch (index.php): one row each, opening its page */
.fh-refresh{width:40px;height:40px;border:0;border-radius:10px;background:transparent;color:#fff;font-size:1.35rem;line-height:1;padding:0;flex:0 0 auto;cursor:pointer;margin-left:auto}
.fh-refresh:active{background:rgba(255,255,255,.18)}
/* a screen one step down (signing, a document on its own, My hours): back, or an X, at the left of the bar */
.fhead:has(.fh-back){justify-content:flex-start}
.fh-back{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:44px;height:44px;margin:-6px 0 -6px -8px;border-radius:10px;color:#fff;text-decoration:none;font:400 2.1rem/1 system-ui,-apple-system,sans-serif}
.fh-back.x{background:rgba(255,255,255,.16);font-size:1.9rem;margin-right:4px}
.fh-back:active{background:rgba(255,255,255,.26)}
.fhead:has(.fh-back) .fh-title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tiles{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.tile{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--border);border-radius:16px;
  padding:22px 20px;text-decoration:none;color:var(--heading);box-shadow:0 2px 14px rgba(0,0,0,.05);min-height:104px}
.tile:active{background:var(--accent-soft)}
.tile .ic{flex:0 0 auto;width:56px;height:56px;border-radius:14px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center}
.tile .ic svg{width:28px;height:28px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tile b{display:block;font-size:1.15rem;line-height:1.2}
.tile small{display:block;color:var(--muted);font-size:.82rem;margin-top:3px;font-weight:400}

/* the customer field is a chooser: chevron and tint say so before it is tapped.
   .ispicker is added by JS, so with JS off it stays an ordinary typeable input.
   (.pickwrap itself is in shared.css) */
.pickwrap .pickchev{display:none;position:absolute;right:14px;top:23px;transform:translateY(-50%);color:var(--accent);font-size:0;pointer-events:none}
.pickwrap .pickchev::after{content:"";display:block;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.pickwrap input.ispicker{padding-right:38px;background:var(--accent-soft);border-color:var(--accent);cursor:pointer;caret-color:transparent}
.pickwrap input.ispicker + .pickchev{display:block}

/* picker boxes: a touch bigger than the office's, for gloves in a truck */
.pbox{min-height:60px;font-size:1.05rem}
.ps-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}

/* checkbox rows */
.chk{display:flex;align-items:center;gap:12px;padding:14px 4px;border-bottom:1px solid var(--border);cursor:pointer;margin:0;font-weight:600;font-size:.95rem;color:var(--text)}
.chk:last-of-type{border-bottom:0}
.chk input{width:26px;height:26px;margin:0;flex:0 0 auto;accent-color:var(--accent)}

html.offline .fh-title::after{content:" · offline";color:#ffd7a1;font-weight:700;font-size:.78rem}



/* submitted tickets: lock note, photo grid (search bar, table, chips and pager come from shared.css) */

/* ---- the drivers' history and outlook screens (trip.php?v=past, due.php) ---- */
.iss{margin:8px 0 0;padding:8px 10px;border-radius:8px;background:rgba(161,27,27,.07)}
.iss.fixed{background:rgba(45,106,79,.08)}
.iss b{font-size:.85rem;color:var(--danger)}
.iss.fixed b{color:var(--accent)}
.iss .fixed-by{color:var(--accent)}
/* the drivers' lists are the app's rows (shared.css .rows .r); what is theirs alone: */
.repairs h2,#myDispatch h2{font-size:1.05rem}
.rows .r.sum{background:var(--accent-soft)}                  /* fuel / service history: the totals row */
.rows .r.partial .top .fig{color:var(--muted)}               /* a partial fill's gallons */
.iss small{display:block;font-size:.8rem;color:var(--text);margin-top:3px;line-height:1.4}
.rows .r.svc{align-items:flex-start;gap:12px}                /* service due: the tick box beside it */
.rows .r.svc .t small{color:var(--text)}
.rows .r.svc .every{color:var(--muted)}
.rows .r.svc .gap{font-weight:700}
.rows .r.svc.due .gap{color:var(--danger)}
.rows .r.svc.soon .gap{color:#8a5200}
.rows .r.svc.fine .gap{color:var(--accent)}
.tile.warn .ic{background:rgba(161,27,27,.1)}
.tile.warn .ic svg{stroke:var(--danger)}
.tile small a{color:var(--accent);font-weight:600;text-decoration:none}


/* Docs (docs.php): the send button, and lists of documents that open on a tap */
.ftabs a{position:relative}
.ftabs .tbadge{position:absolute;top:5px;left:calc(50% + 5px);min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--danger);color:#fff;font-style:normal;font-size:.64rem;font-weight:800;line-height:17px;text-align:center}
.docsend{display:flex;align-items:center;gap:14px;width:100%;margin:0 0 14px;padding:14px 16px;border:1.5px dashed var(--accent);border-radius:14px;background:var(--accent-soft);color:var(--text);text-align:left;font:inherit;cursor:pointer}
.docsend svg{flex:0 0 auto;width:28px;height:28px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.docsend b{display:block;font-size:1.02rem;color:var(--accent-hover)}
.docsend small{display:block;color:var(--muted);font-size:.8rem;margin-top:2px;font-weight:400}
.r.doc.off .ic{background:rgba(0,0,0,.05);color:var(--muted)}
.dochead{margin:22px 0 10px}
.r.doc.tosign .ic{background:rgba(161,27,27,.1);color:var(--danger)}
.r.doc.tosign .t>b{color:var(--danger)}
/* the fill-in-and-sign screen: its buttons sit just above the bottom tabs */
body:has(#signFoot) .fwrap{padding-bottom:110px}
.signfoot{position:fixed;left:0;right:0;bottom:calc(var(--tabh) + env(safe-area-inset-bottom));z-index:29;display:flex;gap:8px;align-items:center;padding:10px 12px;background:#fff;border-top:1px solid var(--border);box-shadow:0 -3px 12px rgba(0,0,0,.08)}
.signfoot span{flex:1;font-weight:700;font-size:.9rem;color:var(--heading)}
.signfoot button{width:auto;margin:0;padding:12px 16px}
.signfoot #signDone:not(.ready){opacity:.55}
.signdoc{margin:0 -8px}
/* pdfview.js: a file the viewer cannot draw (a Word file...) - what it is, and the one button that saves or shares it */
.dv-file{max-width:420px;margin:12vh auto 0;padding:26px 20px;border-radius:16px;background:#fff;text-align:center;color:var(--text)}
.dv-file .dv-ext{display:inline-flex;align-items:center;justify-content:center;min-width:64px;height:64px;padding:0 10px;border-radius:14px;background:var(--accent-soft);color:var(--accent-hover);font-size:.95rem;font-weight:800;letter-spacing:.03em}
.dv-file p{margin:14px 0 18px;font-size:.95rem;line-height:1.45}
.dv-file .dv-go{display:block;text-decoration:none}
/* the Share button in the viewer's bar is a link styled like Download */
.dv-dl[role=button]{cursor:pointer}
/* My hours (hours.php): the row of ranges (.views.scroll) scrolls sideways on a phone; totals, then each day's cards */
.hupd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 14px}
.hupd a{flex:0 0 auto;padding:8px 2px}
.hviews{margin:0 0 12px}
.hviews a{padding:11px 14px;font-size:.85rem}   /* a finger's worth in the cab */
.hrange{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 12px}
.hrange b{display:block;font-size:1.02rem;color:var(--heading)}
.hrange small{display:block;color:var(--muted);font-size:.8rem;overflow-wrap:anywhere}
.hrange .btn{flex:0 0 auto;margin:0}
.htot{text-align:center;padding:20px 16px 16px}
.htot .big{font-size:2rem;font-weight:800;line-height:1.1;color:var(--heading)}
.htot .lbl{color:var(--muted);font-size:.82rem;margin-top:2px;overflow-wrap:anywhere}
.htot .note{margin:10px 0 0}
.hstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0 2px}
.hstats div{background:var(--accent-soft);border-radius:12px;padding:10px 4px}
.hstats b{display:block;font-size:1rem;white-space:nowrap}
.hstats small{color:var(--muted);font-size:.74rem}
.hstats .ot{background:rgba(138,90,0,.1)}
.hstats .ot b{color:var(--warn)}
.hby{margin-top:12px;text-align:left}
.hby div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--border);font-size:.9rem}
.hby span{min-width:0;overflow-wrap:anywhere}
.hby b{white-space:nowrap}
.rows .r .hot{color:var(--warn);font-weight:700}           /* My hours: overtime, a punch still to send */
.rows .r.pending .top b{color:#7a5200}
.htags{margin-top:5px;display:flex;flex-wrap:wrap;gap:4px}
.htags .chip+.chip{margin-left:0}
.hcust a{display:flex;justify-content:space-between;gap:12px;padding:14px 4px;border-top:1px solid var(--border);color:var(--text);text-decoration:none;font-weight:600}
.hcust a:first-child{border-top:0}
.hcust a.on{color:var(--accent-hover)}
.hcust a.on span::before{content:"\2713  "}
.hcust b{white-space:nowrap}
.hfoot{margin:4px 2px 0;text-align:left}
/* the clock's way into My hours */
.tile.hours-tile{margin:0 0 14px;min-height:0;padding:16px 18px}
.tile.hours-tile .go{margin-left:auto;font-size:1.6rem;color:var(--muted);line-height:1}

/* ---- Due (due.php) ---- */
/* a row that can be ticked: the box on the left, the service beside it */

/* ---- The time clock bar on the driver home (index.php) ---- */
/* front.css's .clockbar text is a steady small line; on the clock it needs to read at a glance
   from across the cab, so just these two lines get bumped - kept here since front.css is shared */
.clockbar .clockedin{font-size:1.55rem;font-weight:800;letter-spacing:.02em;line-height:1.2}
.clockbar .clockedin-cust{font-size:1.05rem;font-weight:700;text-transform:uppercase;color:var(--text);margin-top:3px}

/* ---- A company's order link (d.php) ---- */
.dsp-ask{display:flex;gap:10px}.dsp-ask>*{flex:1}
.dsp-ask .btn.ghost{border:1px solid var(--border)}
.dsp-said{font-size:.95rem;margin:0 0 12px}
.dsp-tk{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--border)}
.dsp-tk:first-of-type{border-top:0}
.dsp-tk img{width:56px;height:72px;object-fit:cover;border-radius:8px;background:#eee;flex:0 0 auto}
.dsp-tk b{display:block;color:var(--heading)}
.dsp-tk small{display:block;color:var(--muted);font-size:.8rem}
.dsp-foot{text-align:center;color:var(--muted);font-size:.78rem;margin:18px 0 0}
.dsp-tl{display:flex;gap:8px;align-items:center;padding:10px 0;border-top:1px solid var(--border)}
.dsp-tl:first-of-type{border-top:0}
.dsp-tl>div{flex:1;min-width:0}.dsp-tl b{display:block;color:var(--heading)}.dsp-tl small{display:block;color:var(--muted);font-size:.8rem}
.dsp-tl .btn{width:auto;flex:0 0 auto;margin:0}
.dsp-who{background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 35%,white);border-radius:10px;padding:9px 12px;margin:0 0 12px;font-size:.88rem;color:var(--text)}
.dsp-who b{color:var(--heading)}
.dlg .card{padding:18px}

/* ---- Privacy and terms pages (_legal.php) ---- */
.legal h2{font-size:1.05rem;color:var(--heading);margin:20px 0 6px}
.legal p,.legal li{font-size:.95rem;line-height:1.5;margin:0 0 10px}
.legal ul{padding-left:20px;margin:0 0 10px}
.legal .updated{color:var(--muted);font-size:.82rem;margin:0 0 14px}
.legal .other{margin-top:22px;padding-top:12px;border-top:1px solid var(--border);font-size:.9rem}

/* ---- The Add / Edit service popup in the drivers' app (_service_form.php): the office's form layout it needs ---- */
/* the drivers' app has none of the office's form layout (admin.css): the popup brings what it uses, here only */
#svcDlg .field{margin-bottom:12px}
#svcDlg input,#svcDlg select,#svcDlg textarea{margin-bottom:0}
#svcDlg .lede{margin:0 0 12px;color:var(--muted);font-size:.84rem;line-height:1.4}
#svcDlg .dlg-head h3{font-size:1.1rem;color:var(--heading)}
#svcDlg .vd-svcparts{border:1px solid var(--border);border-radius:8px}
#svcDlg .vd-svcparts>summary{padding:10px 12px;cursor:pointer}
#svcDlg .vd-svcparts[open]>summary{border-bottom:1px solid var(--border)}
#svcDlg .vd-svcparts .body{padding:10px 12px 12px}
#svcDlg .vd-svcparts .body>details{display:none}   /* "+ Add a new part" buys one: the office's job */
#svcDlg .svc-partrow button{width:auto}
#svcDlg .svc-totals{display:flex;justify-content:flex-end;gap:16px;flex-wrap:wrap;margin:-4px 0 14px;font-size:.82rem;color:var(--muted)}
#svcDlg .svc-totals b{color:var(--heading);font-variant-numeric:tabular-nums}
#svcDlg .svc-totals .tot{font-size:.95rem;font-weight:700;color:var(--heading)}
#svcDlg .svc-pick{display:block;font-size:.74rem;color:var(--danger);margin-top:4px}
#svcDlg .svc-note{display:block;font-size:.76rem;color:var(--muted);margin-top:8px}
#svcDlg select.needs-pick{border-color:var(--danger)}
.due-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.due-bar label{display:flex;gap:8px;align-items:center;margin:0;font-size:.9rem}
.due-bar input{width:22px;height:22px;margin:0;accent-color:var(--accent)}
.due-bar .btn{width:auto;flex:1 1 auto}
.due-bar small{flex:1 1 100%;color:var(--muted);font-size:.8rem}
.due-tick{flex:0 0 auto;margin:0;display:flex;align-items:center;padding:2px 0}
.due-tick input{width:24px;height:24px;margin:0;accent-color:var(--accent)}