:root{
  --bg:#f6f4ef; --panel:#ffffff; --ink:#151412; --muted:#6e6a60; --line:#e6e1d6; --soft:#f1ede3;
  --brand:#111111; --brand-2:#2b2925; --brand-ink:#d9c98a; --accent:#b3a272; --gold:#b3a272; --gold-hi:#e3d69c; --gold-lo:#7c6a3a;
  --a:#1f7a4d; --b:#2d6cb5; --c:#7a7f86; --p:#8a4fbf;
  --danger:#b33a3a; --warn:#b7791f; --ok:#1f7a4d;
  --radius:10px; --shadow:0 1px 2px rgba(0,0,0,.05),0 2px 8px rgba(0,0,0,.04);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.45}
a{color:#7c6a3a;text-decoration:none} a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
.hidden{display:none!important}

/* layout */
.app{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.side{background:#000;overflow-y:auto;overscroll-behavior:contain;color:#cfc6a8;border-right:1px solid #2a261c;padding:18px 12px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px}
.logo{display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 8px 18px;text-align:center}
.logo img{width:170px;height:auto;display:block;margin:6px 0 4px}
.logo svg{flex:none}
.logo small{display:block;font-weight:600;color:var(--gold);font-size:10.5px;letter-spacing:2.2px;text-transform:uppercase}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:#cfc6a8;font-weight:500;border-left:2px solid transparent}
.nav a:hover{background:rgba(179,162,114,.10);color:var(--gold-hi);text-decoration:none}
.nav a.active{background:rgba(179,162,114,.16);color:var(--gold-hi);border-left-color:var(--gold)}
.nav .cnt{margin-left:auto;background:rgba(179,162,114,.25);color:var(--gold-hi);border-radius:999px;padding:0 7px;font-size:11px}
.side .foot{margin-top:auto;font-size:12px;color:#8f8770;padding:8px;border-top:1px solid #2a261c}
.side .foot button{background:none;border:1px solid var(--gold-lo);color:var(--gold-hi);border-radius:6px;padding:4px 8px;cursor:pointer;margin-top:6px}
.main{padding:22px 28px 60px;min-width:0}
.topbar{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.topbar h1{font-size:22px;margin:0;font-weight:700;letter-spacing:.2px}
.topbar .sub{color:var(--muted)}
.topbar .grow{flex:1}
.btn.menu-btn{display:none}

/* controls */
.btn{border:1px solid var(--line);background:var(--panel);padding:7px 12px;border-radius:8px;cursor:pointer;font-weight:500;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn:hover{border-color:#c9cfc8}
.btn.primary{background:#111;border-color:#111;color:var(--gold-hi)}
.btn.primary:hover{background:#2b2925;border-color:var(--gold-lo)}
.btn.danger{color:var(--danger)}
.btn.sm{padding:4px 9px;font-size:12.5px}
.btn:disabled{opacity:.5;cursor:default}
input:not([type]),input[type=text],input[type=search],input[type=email],input[type=password],input[type=number],input[type=date],input[type=url],select,textarea{
  border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 10px;min-width:0;width:100%}
textarea{min-height:70px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid #e6dcb8;border-color:var(--gold)}
label.f{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);font-weight:500}
label.chk{display:inline-flex;align-items:center;gap:6px;font-size:13px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card.pad{padding:16px}
.card h3{margin:0 0 10px;font-size:14px;font-weight:650}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpi{padding:14px 16px}
.kpi .v{font-size:26px;font-weight:700;margin-top:2px}
.kpi{border-top:3px solid var(--gold)}
.kpi .l{color:var(--muted);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.4px}
.kpi a{color:inherit}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.filters select,.filters input{width:auto}
.filters input[type=search]{min-width:260px;flex:1}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:4px 10px;font-size:12.5px;cursor:pointer}
.chip:hover{border-color:var(--gold)}
.chip.on{background:#111;border-color:#111;color:var(--gold-hi)}

/* table */
.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
table{border-collapse:collapse;width:100%;min-width:1180px}
#dtable td:nth-child(2){min-width:230px}
#dtable td:nth-child(1),#dtable td:nth-child(9){white-space:nowrap}
th,td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{position:sticky;top:0;background:#faf8f2;font-size:12px;color:var(--muted);font-weight:600;cursor:pointer;white-space:nowrap;user-select:none}
tbody tr{cursor:pointer} tbody tr:hover{background:#faf7ee}
td .nm{font-weight:600}
td .sm{color:var(--muted);font-size:12px}
.count{color:var(--muted);font-size:12.5px;margin:8px 2px}

/* badges */
.bdg{display:inline-block;border-radius:6px;padding:1px 7px;font-size:11.5px;font-weight:600;border:1px solid transparent;white-space:nowrap}
.s-A{background:#f3eedd;color:#6b5a26;border-color:#e2d6ad} .s-B{background:#e5eef9;color:var(--b)} .s-C{background:#eef0f2;color:var(--c)} .s-P{background:#f1e8fa;color:var(--p)}
.cl{background:var(--soft);color:#3c4a42}
.ds-Verified{background:#e3f3ea;color:var(--ok)} .ds-Publicly{background:#e5eef9;color:#2d6cb5} .ds-Needs{background:#fdf2df;color:var(--warn)} .ds-Outdated{background:#fbe6e6;color:var(--danger)} .ds-Unknown{background:#eef0f2;color:#666}
.dem-High{background:#fbe9de;color:#a24a14} .dem-Medium{background:#fdf2df;color:var(--warn)} .dem-Low{background:#eef0f2;color:#666}
.stage{background:#f3eedd;color:#5e5029}
.overdue{color:var(--danger);font-weight:600}

/* drawer */
.drawer-bg{position:fixed;inset:0;background:rgba(15,25,20,.35);z-index:40}
.drawer{position:fixed;top:0;right:0;height:100vh;width:min(860px,100vw);background:var(--bg);z-index:41;overflow:auto;box-shadow:-8px 0 24px rgba(0,0,0,.12)}
.drawer .hd{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);padding:14px 20px;display:flex;align-items:flex-start;gap:12px;z-index:2}
.drawer .hd h2{margin:0;font-size:19px}
.drawer .hd .meta{color:var(--muted);font-size:12.5px;margin-top:3px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.drawer .bd{padding:18px 20px;display:grid;gap:14px}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:-18px -20px 0;padding:0 20px;background:#fff;overflow-x:auto}
.tabs button{border:none;background:none;padding:10px 12px;cursor:pointer;color:var(--muted);font-weight:600;border-bottom:2px solid transparent}
.tabs button.on{color:var(--ink);border-bottom-color:var(--gold)}
.kv{display:grid;grid-template-columns:170px 1fr;gap:6px 14px;font-size:13.5px}
.kv dt{color:var(--muted)} .kv dd{margin:0;word-break:break-word}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
.form .full{grid-column:1/-1}
.section-t{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700;margin:6px 0 2px;grid-column:1/-1;border-top:1px solid var(--line);padding-top:12px}
.quick{display:flex;gap:6px;flex-wrap:wrap}

/* timeline */
.tl{display:grid;gap:8px}
.tl .it{border-left:3px solid var(--line);padding:4px 0 4px 10px}
.tl .it.stg{border-left-color:var(--gold)}
.tl .it .h{font-size:12px;color:var(--muted)}

/* kanban */
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:250px;gap:12px;overflow:auto;padding-bottom:10px}
.col{background:#eeeae0;border-radius:var(--radius);padding:8px;min-height:300px}
.col h4{margin:4px 6px 8px;font-size:12.5px;display:flex;justify-content:space-between;color:#3c4a42}
.col.drop{outline:2px dashed var(--gold)}
.kc{background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-bottom:8px;cursor:grab;font-size:13px}
.kc .t{font-weight:600}
.kc .m{color:var(--muted);font-size:12px;margin-top:2px;display:flex;gap:5px;flex-wrap:wrap;align-items:center}

/* market map */
.mm td,.mm th{text-align:center} .mm td:first-child,.mm th:first-child{text-align:left}
.mm td.n{cursor:pointer;font-weight:600}
.mm td.n:hover{background:#f3eedd}
.mm td.z{color:#c3c8c3}
#map{height:460px;border-radius:var(--radius);border:1px solid var(--line)}
.legend{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--muted);margin-top:8px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px;vertical-align:middle}

/* events */
.ev{display:grid;grid-template-columns:78px 1fr auto;gap:12px;padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer;background:#fff}
.ev:hover{background:#faf7ee}
.ev .dt{text-align:center;border:1px solid var(--line);border-radius:8px;padding:4px}
.ev .dt b{display:block;font-size:20px} .ev .dt span{font-size:11px;color:var(--muted);text-transform:uppercase}
.month{font-weight:700;padding:14px 12px 6px;color:#3c4a42;background:#faf8f2;border-bottom:1px solid var(--line)}

/* login */
.login{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,#1c1a15,#000 70%)}
.login .box{background:#000;color:#e9e2c9;border:1px solid #3a3424;border-radius:14px;padding:28px;width:min(380px,92vw);box-shadow:0 10px 40px rgba(0,0,0,.6);text-align:center}
.login .box img{width:240px;max-width:80%;height:auto;display:block;margin:6px auto 10px}
.login .box form,.login .box .fields{text-align:left}
.login label.f{color:#a89f84;text-align:left}
.login input{background:#16150f;border-color:#3a3424;color:#f1ead0}
.login .btn.primary{background:linear-gradient(180deg,#e3d69c,#b3a272 55%,#8a7744);color:#111;border-color:#8a7744;font-weight:700}
.login h1{margin:4px 0 2px;font-size:15px;letter-spacing:3px;text-transform:uppercase;color:var(--gold-hi);font-weight:600}
.login p{margin:0 0 18px}
.err{color:var(--danger);font-size:13px;margin-top:8px}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#1d2621;color:#fff;padding:9px 16px;border-radius:8px;z-index:99;font-size:13px}
.empty{padding:30px;text-align:center;color:var(--muted)}
.note{background:#fdf6e7;border:1px solid #f1dfb5;color:#7a5a17;border-radius:8px;padding:8px 12px;font-size:12.5px}
.muted{color:var(--muted)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.right{margin-left:auto}
.list-plain{margin:0;padding-left:18px}

@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;z-index:50;width:240px;transform:translateX(-100%);transition:.2s}
  .side.open{transform:none}
  .btn.menu-btn{display:inline-flex}
  .main{padding:14px 16px 60px}
  .g2,.g3,.g4{grid-template-columns:1fr 1fr}
  .form{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr}
  .kv dt{margin-top:6px}
  .filters input[type=search]{min-width:0;width:100%;flex:1 1 100%}
}
@media (max-width:520px){ .g2,.g3,.g4{grid-template-columns:1fr} }

/* order & leave statuses */
.ts-Requested{background:#fdf2df;color:#b7791f}.ts-Pendingapproval{background:#fff1d6;color:#8a5a00;border:1px dashed #d9a441}.ts-Confirmed{background:#e5eef9;color:#2d6cb5}.ts-Intransit{background:#efe7fa;color:#7a44b0}
.ts-Delivered{background:#e3f3ea;color:#1f7a4d}.ts-Invoiced{background:#f3eedd;color:#6b5a26}.ts-Paid{background:#d9efe2;color:#145c39}.ts-Cancelled,.ts-Rejected{background:#fbe6e6;color:#b33a3a}
.ts-Approved{background:#e3f3ea;color:#1f7a4d}.ts-Pending{background:#fdf2df;color:#b7791f}
details summary{margin:4px 0}

.nav-h{font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;color:#7c6a3a;padding:14px 10px 4px;font-weight:700}
.nav a{padding:7px 10px}
.pr-Urgent{background:#fbe6e6;color:#b33a3a}.pr-High{background:#fdf2df;color:#b7791f}.pr-Normal{background:#eef0f2;color:#555}.pr-Low{background:#f4f4f4;color:#888}
table.sch{min-width:1100px;table-layout:fixed}table.sch td{height:74px;cursor:pointer;padding:5px}table.sch td:first-child{cursor:default}
table.sch th.today,table.sch td.today{background:#fbf7ea}table.sch td.leave{background:repeating-linear-gradient(135deg,#faf3df 0 6px,#fff 6px 12px)}
table.sch td:hover:not(:first-child){outline:1px dashed var(--gold);outline-offset:-2px}
.sch-t{border-radius:6px;padding:4px 6px;margin-bottom:4px;font-size:11.5px;line-height:1.3;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sch-t div{opacity:.8;overflow:hidden;text-overflow:ellipsis}
.sch-l{font-size:11px;font-weight:600;color:#b7791f;margin-bottom:3px}

.bdg.tag{background:#111;color:var(--gold-hi);font-weight:500}

.side .foot{flex:none}
.side::-webkit-scrollbar{width:6px}.side::-webkit-scrollbar-thumb{background:#2a261c;border-radius:3px}
/* calendar */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.cal-h{background:#faf8f2;padding:8px;font-size:12px;font-weight:600;color:var(--muted);text-align:center}
.cal-d{background:#fff;min-height:118px;padding:6px;cursor:pointer;display:flex;flex-direction:column;gap:3px;min-width:0}
.cal-d:hover{background:#fdfbf5}.cal-d.out{background:#faf9f6;color:#b8b2a3}.cal-d.today{box-shadow:inset 0 0 0 2px var(--gold)}
.cal-d.st-free{background:#f3faf6}.cal-d.st-leave{background:repeating-linear-gradient(135deg,#faf3df 0 6px,#fff 6px 12px)}.cal-d.st-busy{background:#fff}
.cal-n{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:13px;gap:4px}
.cal-a{font-weight:500;font-size:10.5px;color:var(--muted);white-space:nowrap}.cal-s{font-weight:600;font-size:10.5px;color:#6b5a26}
.cal-t{border-radius:5px;padding:2px 5px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.cal-more{font-size:11px;color:var(--muted)}.cal-lv{font-size:10.5px;color:#b7791f;margin-top:auto}
@media (max-width:900px){.cal-d{min-height:80px}.cal-a{display:none}.cal-t{font-size:10px}}

/* fleet cost bars */
.pbar{flex:1;height:10px;background:#efe9da;border-radius:5px;overflow:hidden}.pbar div{height:100%;border-radius:5px}
.fc{display:grid;grid-template-columns:160px 1fr 190px;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);cursor:pointer}
.fc:hover{background:#fdfbf5}.fc-b{display:grid;gap:6px}.fc-r{display:flex;align-items:center;gap:10px}.fc-l{width:70px;font-size:12px;color:var(--muted)}.fc-v{width:110px;text-align:right;font-weight:600;font-size:13px}
.fc-x{text-align:right}
@media (max-width:900px){.fc{grid-template-columns:1fr}.fc-x{text-align:left}}

/* P&L */
table.pl{min-width:0;width:100%}table.pl td{padding:5px 8px;border-bottom:1px solid #f1ede3}table.pl td.r{text-align:right;white-space:nowrap}
.pl-g td{font-size:11.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--gold-lo);font-weight:700;padding-top:14px!important;border-bottom:1px solid var(--line)!important}
.pl-i{padding-left:18px!important}.pl-t td{font-weight:600;border-top:1px solid var(--line)}.pl-s td{font-weight:800;background:#faf7ee;border-top:2px solid #111}.neg{color:var(--danger)}
.np{display:flex;gap:6px;align-items:stretch;height:180px;padding-top:6px}.np-c{flex:1;display:flex;flex-direction:column;align-items:center;min-width:0}
.np-t,.np-btm{height:72px;width:100%;display:flex;justify-content:center}.np-t{align-items:flex-end}.np-btm{align-items:flex-start}
.np-b{width:60%;max-width:30px;border-radius:4px}.np-t .np-b{border-radius:4px 4px 0 0}.np-btm .np-b{border-radius:0 0 4px 4px}
.np-z{height:1px;width:100%;background:#cfc8b6}.np-l{font-size:11px;color:var(--muted);margin-top:6px}
/* loyalty */
.bdg.loy{border:1px solid transparent}
.loy-0{background:#eef0f3;color:#3b4250;border-color:#d5d9e0!important}
.loy-1{background:#f6edd0;color:#6b5418;border-color:#e3d69c!important}
.loy-2{background:#e6ecf2;color:#1f3a56;border-color:#b9c7d6!important}
.loy-3{background:#000;color:#e3d69c;border-color:#000!important}
.lbar{height:8px;background:#efe9da;border-radius:4px;overflow:hidden;max-width:260px}.lbar i{display:block;height:100%;background:#7c6a3a;border-radius:4px}
/* golden hooves */
.ghc{vertical-align:-2px;flex:none}
.bdg.ghb{background:#fbf6e4;color:#5e5029;border:1px solid #e3d69c;display:inline-flex;align-items:center;gap:4px}
.zmat th,.zmat td{padding:4px;font-size:12px;white-space:nowrap}.zmat tbody th{text-align:right;color:var(--muted)}
.zsel{padding:3px 4px!important;font-size:12px!important;border-radius:6px;min-width:62px}
.z-local{background:#f4f1e8}.z-near{background:#efe4c0}.z-mid{background:#e3d09a}.z-long{background:#c9b06a}
/* languages, live trip */
.bdg.lng{background:#111;color:#fff;letter-spacing:.5px;font-size:10.5px}
.tlx{margin-top:10px}.tlx-i{display:flex;gap:10px;align-items:flex-start;padding:6px 0;position:relative}
.tlx-i>i{width:12px;height:12px;border-radius:50%;border:2px solid #cfc6ad;background:#fff;margin-top:4px;flex:none}
.tlx-i.done>i{background:#7c6a3a;border-color:#7c6a3a}.tlx-i>div{flex:1}.tlx-i .bdg{margin-left:4px}
.ts-Awaitingreturn{background:#fff1d6;color:#8a5a00}
.perf{display:flex;gap:6px;align-items:center}

/* Serif used for names on the driver & truck card */
@font-face{font-family:"Playfair Display";font-weight:700;font-style:normal;font-display:swap;src:url(vendor/fonts/playfair-display-700.woff2) format("woff2")}