*{box-sizing:border-box} html,body{height:100%;margin:0}
body{font-family:Arial,Helvetica,sans-serif;background:#f4f6f8;color:#17202a}
:root{--navy:#102b4e;--blue:#1f5f9d;--light:#eef5fb;--green:#2e8b57;--orange:#d9822b;--red:#b94a48}
header{background:var(--navy);color:white;padding:16px 22px;display:flex;align-items:center;justify-content:space-between}
.brand{font-size:22px;font-weight:800}.tag{font-size:11px;opacity:.8}
nav{background:white;border-bottom:1px solid #d9e0e6;display:flex;gap:6px;padding:8px 16px;overflow:auto}
nav button{border:0;background:white;padding:10px 14px;border-radius:8px;font-weight:700;color:#38516b;cursor:pointer}
nav button.active{background:var(--light);color:var(--navy)}
main{padding:18px;max-width:1250px;margin:auto}.grid{display:grid;gap:14px}.stats{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:white;border:1px solid #dce3e9;border-radius:12px;padding:16px;box-shadow:0 1px 3px #0000000a}
.stat{font-size:28px;font-weight:800;margin-top:5px}.muted{color:#687786;font-size:13px}
.toolbar{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap}
button.primary{background:var(--blue);color:white;border:0;border-radius:8px;padding:10px 14px;font-weight:700;cursor:pointer}
button.secondary{background:white;border:1px solid #cdd6de;border-radius:8px;padding:9px 12px;font-weight:700;cursor:pointer}
select.statusSelect{width:auto;padding:7px 9px;font-weight:700;font-size:12px}
input,select,textarea{padding:9px;border:1px solid #cdd6de;border-radius:7px;background:white}
input,textarea{width:100%}
label{font-size:12px;font-weight:700;color:#526579;display:block;margin-bottom:4px}
.formgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.full{grid-column:1/-1}
.calendar{display:grid;grid-template-columns:1fr 1fr;gap:14px}.truck h3{margin:0 0 10px;color:var(--navy)}
.booking{border-left:5px solid var(--blue);padding:14px;margin:11px 0;background:#f8fafc;border-radius:8px}
.booking .top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.booking .top .titleline{font-weight:800;font-size:16px}
.booking .meta{color:#687786;font-size:13px;margin-top:4px}
.pill{font-size:11px;padding:4px 7px;border-radius:12px;background:#e7eef5}
.section-title{font-size:18px;font-weight:800;margin:4px 0 14px}
.hidden{display:none}
.modal{position:fixed;inset:0;background:#0008;display:none;align-items:center;justify-content:center;padding:18px;z-index:60}
.modal.show{display:flex}
.modalbox{background:white;border-radius:14px;max-width:700px;width:100%;max-height:90vh;overflow:auto;padding:20px}
.notice{padding:12px;background:#edf7ef;border:1px solid #c9e6d0;border-radius:8px;margin-bottom:12px}
.error{padding:10px 12px;background:#fbeaea;border:1px solid #e3b8b8;border-radius:8px;margin-bottom:12px;color:var(--red);font-weight:700;font-size:13px}
@media(max-width:800px){.stats,.calendar{grid-template-columns:1fr 1fr}.formgrid{grid-template-columns:1fr}.full{grid-column:auto}}
@media(max-width:520px){.stats,.calendar{grid-template-columns:1fr}main{padding:10px}}

/* Login is a real, isolated full-screen page — never coexists with the app */
#loginScreen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--navy);z-index:50}
#loginScreen.hidden{display:none}
.loginbox{background:white;border-radius:14px;padding:28px;width:100%;max-width:340px;box-shadow:0 10px 30px #0004}
.loginbox h1{font-size:20px;color:var(--navy);margin:0 0 4px}
.loginbox .tag{color:#687786;opacity:1;margin-bottom:18px;display:block}
.loginbox button{width:100%;margin-top:18px}
#app.hidden{display:none}

/* Hover tooltip showing the phone number over the Call button */
.tooltip{position:relative;display:inline-block}
.tooltip:hover::after{
  content:attr(data-tip); position:absolute; bottom:130%; left:50%; transform:translateX(-50%);
  background:var(--navy); color:white; padding:5px 9px; border-radius:6px; font-size:11px;
  white-space:nowrap; z-index:10;
}
.tooltip:hover::before{
  content:""; position:absolute; bottom:112%; left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:var(--navy);
}

.mapPreview{width:100%;height:140px;border:1px solid #cdd6de;border-radius:8px;margin-top:6px;display:none}
.paySelect.cash{background:#eee}.paySelect.eft{background:#fff0d8}.paySelect.cardpay{background:#e4f3ea}
.truckBadge{background:#dde7f0;color:var(--navy)}

/* Status-driven visual language: colour tells the story before you read a word */
.booking.st-assigned{border-left-color:var(--blue)}
.booking.st-inprogress{border-left-color:var(--orange)}
.booking.st-completed{border-left-color:var(--green);background:#f5faf6}
.statusSelect.st-assigned{background:#eef5fb}
.statusSelect.st-inprogress{background:#fdeedd}
.statusSelect.st-completed{background:#e6f4ea}

.actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;align-items:center}
.iconBtn{padding:9px 11px;min-width:38px;text-align:center;line-height:1}

/* Edit ▾ menu — collapses "Edit Job / Edit Client / Delete" into one control */
.editMenu{position:relative;display:inline-block}
.editMenu summary{list-style:none;cursor:pointer;background:white;border:1px solid #cdd6de;border-radius:8px;padding:9px 12px;font-weight:700;color:#38516b;user-select:none}
.editMenu summary::-webkit-details-marker{display:none}
.editMenu[open] summary{background:var(--light)}
.editMenu .menuBody{position:absolute;top:110%;right:0;background:white;border:1px solid #cdd6de;border-radius:9px;box-shadow:0 8px 24px #0003;padding:6px;display:flex;flex-direction:column;gap:2px;min-width:160px;z-index:20}
.editMenu .menuBody button{text-align:left;background:none;border:0;padding:9px 10px;border-radius:6px;font-weight:600;cursor:pointer;color:#17202a;font-size:13px}
.editMenu .menuBody button:hover{background:#f2f5f8}
.editMenu .menuBody button.danger{color:var(--red)}

/* Mobile / driver-in-the-field sizing: bigger tap targets, less chrome.
   Drivers use this one-handed in a truck cab, sometimes with gloves —
   44px is the practical minimum for a reliable tap. */
@media(max-width:640px){
  header{padding:12px 14px}
  .brand{font-size:18px}
  main{padding:10px}
  .card{padding:12px}
  .booking{padding:13px}
  .booking .top .titleline{font-size:18px}
  .booking .meta{font-size:14px}
  .actions{gap:8px}
  .actions .iconBtn{min-width:52px;padding:13px 12px;font-size:17px}
  .actions .statusSelect{padding:12px 10px;font-size:14px;flex:1;min-width:130px}
  .editMenu summary{padding:12px 14px}
  .editMenu .menuBody button{padding:13px 12px;font-size:15px}
  button.primary,button.secondary{padding:12px 14px}
  /* tooltips are pointless on touch devices — the number shows on tap anyway */
  .tooltip:hover::after,.tooltip:hover::before{display:none}
}

/* History page filter bar */
.filterbar{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;align-items:end;margin-bottom:14px}
.filterbar .field label{margin-bottom:4px}
@media(max-width:900px){.filterbar{grid-template-columns:1fr 1fr}}
.historyStats{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:14px;padding:12px 14px;background:var(--light);border-radius:8px}
.historyStats div b{display:block;font-size:20px;color:var(--navy)}

/* Client-name and address autosuggest dropdowns */
.autocomplete-wrap{position:relative}
.suggestList{position:absolute;top:100%;left:0;right:0;background:white;border:1px solid #cdd6de;border-top:none;border-radius:0 0 8px 8px;max-height:190px;overflow:auto;z-index:70;display:none;box-shadow:0 10px 24px #0002}
.suggestItem{padding:9px 12px;cursor:pointer;font-size:13px;border-bottom:1px solid #f0f2f4}
.suggestItem:last-child{border-bottom:none}
.suggestItem:hover{background:#f2f6fa}
.suggestItem .sub{color:#8a97a3;font-size:11px}

/* Locked (driver-completed) job styling */
.lockedPill{background:#e6f4ea;color:var(--green);font-weight:700}

/* Payment-on-complete confirm modal */
.paymodal-choices{display:flex;gap:10px;margin-top:16px}
.paymodal-choices button{flex:1;padding:16px 10px;font-size:15px}