:root{
  --gold:#B97729; --gold-soft:#f6ecdf;
  --bg:#f5f4f1; --card:#fff; --ink:#1c1b19; --muted:#6f6b63; --line:#e6e2da;
  --red:#c2412d; --red-soft:#fbe9e5; --amber:#c98a0b; --amber-soft:#fdf3dc;
  --green:#2f8a4d; --green-soft:#e5f4ea; --nav:#1c1b19;
  --r:14px; --shadow:0 6px 24px rgba(28,27,25,.08);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 Inter,system-ui,sans-serif}
.hidden{display:none!important}
a{color:var(--gold)}
h1{font-size:22px;margin:0}
h2{font-size:17px;margin:0 0 12px}
h3{font-size:15px;margin:0 0 8px}
.muted{color:var(--muted)} .small{font-size:13px} .err{color:var(--red)}

/* Auth */
.auth{min-height:100vh;display:grid;place-items:center;padding:16px}
.auth-card{background:var(--card);padding:32px;border-radius:20px;box-shadow:var(--shadow);width:100%;max-width:380px;text-align:center}
.auth-card form{display:grid;gap:10px;margin:18px 0 10px}
.brand-lg{font-size:30px;font-weight:700;letter-spacing:-.5px}
.brand-lg span,.nav-brand .label{color:var(--gold)}

/* Inputs */
input,select,textarea{width:100%;font:inherit;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);border-color:transparent}
textarea{min-height:80px;resize:vertical}
label{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-bottom:4px}
.field{margin-bottom:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.btn{font:inherit;font-weight:600;padding:10px 16px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}
.btn.primary{background:var(--gold);border-color:var(--gold);color:#fff}
.btn.danger{color:var(--red)}
.btn.block{width:100%}
.btn:disabled{opacity:.6;cursor:wait}

/* Nav — floating icon rail that expands */
.nav{position:fixed;left:14px;top:14px;bottom:14px;width:64px;background:var(--nav);border-radius:20px;padding:12px 8px;display:flex;flex-direction:column;gap:4px;z-index:20;transition:width .2s;box-shadow:var(--shadow);overflow:hidden}
.nav.open{width:220px}
.nav-brand{display:flex;align-items:center;gap:10px;padding:6px 8px 14px;color:#fff;font-weight:700;font-size:18px}
.logo{background:var(--gold);border-radius:10px;min-width:32px;height:32px;display:grid;place-items:center;font-size:13px}
#navItems{flex:1;display:flex;flex-direction:column;gap:4px}
.nav-item{display:flex;align-items:center;gap:14px;padding:11px 12px;border-radius:12px;color:#cfcac0;background:none;border:0;font:inherit;cursor:pointer;white-space:nowrap;text-align:left;width:100%;position:relative}
.nav-item:hover{background:#2c2a27;color:#fff}
.nav-item.active{background:var(--gold);color:#fff}
.nav-item svg{min-width:22px;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav .label{opacity:0;transition:opacity .15s}
.nav.open .label{opacity:1}
.nav.open #navToggle svg{transform:rotate(180deg)}
.badge{position:absolute;left:30px;top:6px;background:var(--red);color:#fff;font-size:10px;font-weight:700;border-radius:9px;padding:1px 5px}
.nav-foot{display:flex;flex-direction:column;gap:4px}

main{margin-left:92px;padding:20px 24px 40px;max-width:1300px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:12px}
.who{font-size:13px;color:var(--muted)}

/* Cards */
.card{background:var(--card);border-radius:var(--r);padding:18px;box-shadow:0 1px 0 var(--line);border:1px solid var(--line)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:18px}
.stat .n{font-size:28px;font-weight:700}
.stat .l{font-size:13px;color:var(--muted)}
.stat.red .n{color:var(--red)} .stat.amber .n{color:var(--amber)} .stat.green .n{color:var(--green)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{justify-content:space-between}
.stack{display:grid;gap:14px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* Tables */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;padding:10px;border-bottom:1px solid var(--line)}
td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
tr.click{cursor:pointer} tr.click:hover td{background:#faf8f4}

.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.pill.red{background:var(--red-soft);color:var(--red)}
.pill.amber{background:var(--amber-soft);color:var(--amber)}
.pill.green{background:var(--green-soft);color:var(--green)}
.pill.grey{background:#eeebe5;color:var(--muted)}

.alert{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:10px;margin-bottom:8px;cursor:pointer}
.alert.red{background:var(--red-soft)} .alert.amber{background:var(--amber-soft)}
.alert b{min-width:90px}

/* Vehicle tiles (driver home) */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 16px;text-align:center;cursor:pointer;font-weight:600}
.tile svg{width:34px;height:34px;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block;margin:0 auto 8px}

/* Checklist */
.check-item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);gap:10px}
.seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;flex-shrink:0}
.seg button{font:inherit;font-size:13px;font-weight:600;border:0;background:#fff;padding:8px 14px;cursor:pointer}
.seg button.ok.on{background:var(--green);color:#fff}
.seg button.bad.on{background:var(--red);color:#fff}

.tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.tabs button{font:inherit;font-weight:600;font-size:13px;border:1px solid var(--line);background:#fff;padding:7px 12px;border-radius:999px;cursor:pointer}
.tabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}

.modal{position:fixed;inset:0;background:rgba(28,27,25,.45);display:grid;place-items:center;z-index:50;padding:16px}
.modal-card{background:#fff;border-radius:18px;padding:22px;width:100%;max-width:560px;max-height:90vh;overflow:auto}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:10px;z-index:60;font-size:14px}
.loading{padding:40px;text-align:center;color:var(--muted)}
.files a{display:inline-block;margin:4px 6px 0 0;font-size:13px}

/* Mobile: nav becomes bottom bar */
@media (max-width:760px){
  .nav{left:10px;right:10px;top:auto;bottom:10px;width:auto;height:64px;flex-direction:row;padding:8px;border-radius:18px}
  .nav.open{width:auto}
  .nav-brand,.nav .label,#navToggle{display:none}
  #navItems{flex-direction:row;justify-content:space-around}
  .nav-foot{flex-direction:row}
  .nav-item{padding:10px;justify-content:center}
  main{margin-left:0;padding:16px 16px 100px}
  .grid2,.two{grid-template-columns:1fr}
  .hide-m{display:none}
}

/* PIN login */
.name-list{display:grid;gap:8px;max-height:46vh;overflow:auto;margin-bottom:12px}
.name-btn{font:inherit;font-weight:600;padding:13px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;text-align:left}
.name-btn:hover{border-color:var(--gold);background:var(--gold-soft)}
.pin-dots{display:flex;gap:12px;justify-content:center;margin:14px 0 18px}
.pin-dots span{width:14px;height:14px;border-radius:50%;border:2px solid var(--gold)}
.pin-dots span.on{background:var(--gold)}
.pin-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:270px;margin:0 auto}
.pin-keys button{font:inherit;font-size:22px;font-weight:600;height:62px;border-radius:16px;border:1px solid var(--line);background:#fff;cursor:pointer}
.pin-keys button:active{background:var(--gold-soft)}
.pin-keys .fn{font-size:17px;background:#f3f1ec}
.pin-keys .go{background:var(--gold);color:#fff;border-color:var(--gold)}

/* ===== Horizontal floating menu + 70% content (overrides) ===== */
.nav{left:50%;right:auto;top:14px;bottom:auto;transform:translateX(-50%);width:auto;max-width:calc(100% - 28px);height:auto;flex-direction:row;align-items:center;padding:8px 10px;border-radius:18px;gap:6px}
.nav.open{width:auto}
.nav-brand{padding:0 10px 0 4px}
#navItems{flex-direction:row;flex:0 1 auto;gap:4px;overflow-x:auto;scrollbar-width:none}
#navItems::-webkit-scrollbar{display:none}
.nav-foot{flex-direction:row;gap:4px;border-left:1px solid #3a3733;padding-left:6px}
.nav-item{width:auto;padding:9px 12px;gap:8px}
.nav .label{opacity:1}
#navToggle{display:none}
.badge{left:22px;top:3px}
main{margin:0 auto;width:70%;max-width:none;padding:96px 0 40px}

@media (max-width:1100px){ .nav-item .label{display:none} .nav-brand .label{display:inline} main{width:85%} }
@media (max-width:760px){
  .nav{left:10px;right:10px;top:auto;bottom:10px;transform:none;max-width:none;justify-content:space-around}
  .nav-brand{display:none} .nav-foot{border:0;padding:0}
  #navItems{flex:1;justify-content:space-around}
  main{width:auto;padding:16px 16px 100px}
}

/* Menu matches content width */
@media (min-width:761px){
  .nav{width:70%;max-width:none;justify-content:flex-start}
  .nav.open{width:70%}
  #navItems{flex:1}
  .nav-foot{margin-left:auto}
}
@media (min-width:761px) and (max-width:1100px){ .nav,.nav.open{width:85%} }