/* Fiber Global palette from fiberglobal.com: deep green #10765C, sage #609B8B, mint #E4F2EE, charcoal #404040, gray #8F8F8F */
:root{--g:#10765C;--g2:#0c5d48;--sage:#609B8B;--mint:#E4F2EE;--ch:#2e3533;--ch2:#404040;--gray:#8F8F8F;--line:#d9e2df;
--bg:#f4f7f6;--red:#b42318;--amber:#b54708;--amberbg:#fff4e5;--redbg:#fdecea;--okbg:#e7f4ee;--blue:#2563a8}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ch);font:14px/1.4 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--g)}
header.top{background:var(--ch);color:#fff;display:flex;align-items:center;gap:14px;padding:0 16px;height:52px;position:sticky;top:0;z-index:1000}
header.top .brand{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-weight:600;white-space:nowrap}
header.top .brand img{height:30px;width:auto}
header.top .brand small{color:#a9c9bf;font-weight:400}
nav.main{display:flex;gap:2px;overflow-x:auto;flex:1;scrollbar-width:none}
nav.main a{color:#d6e4df;text-decoration:none;padding:16px 7px;font-size:13px;white-space:nowrap;border-bottom:3px solid transparent}
nav.main a:hover{color:#fff}
nav.main a.on{color:#fff;border-bottom-color:var(--sage)}
.user{color:#a9c9bf;font-size:12px;white-space:nowrap}
main{padding:16px;max-width:1500px;margin:0 auto}
h1{font-size:20px;margin:4px 0 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
h1 .sp{flex:1}
h2{font-size:15px;margin:0 0 10px;color:var(--ch2)}
.card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:14px;margin-bottom:14px}
.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))}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:10px;margin-bottom:14px}
.kpi{background:#fff;border:1px solid var(--line);border-left:4px solid var(--g);border-radius:6px;padding:10px 12px}
.kpi .l{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--gray)}
.kpi .v{font-size:24px;font-weight:650;color:var(--ch);margin-top:2px}
.kpi .s{font-size:12px;color:var(--gray)}
.kpi.warn{border-left-color:var(--amber)}.kpi.bad{border-left-color:var(--red)}.kpi.fin{border-left-color:var(--sage)}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--gray);font-weight:600;background:#fafcfb;white-space:nowrap}
tr:hover td{background:#fafcfb}
td.r,th.r{text-align:right}
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:6px;margin-bottom:14px}
.tw table{border:0}
.badge{display:inline-block;padding:1px 7px;border-radius:10px;font-size:11px;font-weight:600;white-space:nowrap;background:#eef1f0;color:var(--ch2)}
.b-Available{background:#eef1f0}.b-Planned{background:#e6eefb;color:#1d4f91}.b-Dispatched{background:#fff4e5;color:#93370d}
.b-In-Transit{background:#fdf2fa;color:#9e165f}.b-Delivered{background:var(--okbg);color:var(--g2)}.b-Invoiced{background:#e8e4f7;color:#4a3aa8}
.b-Cancelled{background:#f2f2f2;color:#888;text-decoration:line-through}
.b-Approved,.b-Matched,.b-Paid{background:var(--okbg);color:var(--g2)}
.b-Conditional,.b-Pending,.b-Partially-Paid,.b-Estimate,.b-Draft{background:var(--amberbg);color:var(--amber)}
.b-Do-Not-Use,.b-Exception,.b-Overdue,.b-Disputed,.b-Rejected,.b-Partially-Paid---Overdue{background:var(--redbg);color:var(--red)}
.b-Sent,.b-Open,.b-Contract{background:#e6eefb;color:#1d4f91}
.demo{background:#fff1c2;color:#7a5a00;border:1px dashed #d4a800}
.example{background:#eef;color:#446;border:1px dashed #99a}
.btn,button{display:inline-block;background:var(--g);color:#fff;border:0;border-radius:5px;padding:7px 12px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover,button:hover{background:var(--g2)}
.btn.sec,button.sec{background:#fff;color:var(--g);border:1px solid var(--sage)}
.btn.sec:hover,button.sec:hover{background:var(--mint)}
.btn.danger,button.danger{background:#fff;color:var(--red);border:1px solid #e7b1ab}
.btn.sm,button.sm{padding:3px 8px;font-size:12px}
form.inline{display:inline}
label{display:block;font-size:12px;color:var(--ch2);font-weight:600;margin-bottom:3px}
input,select,textarea{width:100%;padding:7px 8px;border:1px solid #c8d3cf;border-radius:5px;font:inherit;background:#fff;color:var(--ch)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--sage);border-color:var(--sage)}
input[type=checkbox]{width:auto}
.fg{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px 12px}
.fg .w2{grid-column:span 2}.fg .wf{grid-column:1/-1}
fieldset{border:1px solid var(--line);border-radius:6px;padding:10px 12px 12px;margin:0 0 12px;background:#fff}
legend{font-weight:650;color:var(--g);padding:0 6px}
.flash{padding:9px 12px;border-radius:5px;margin-bottom:12px;border:1px solid}
.flash.ok{background:var(--okbg);border-color:#b6dccb;color:var(--g2)}
.flash.err{background:var(--redbg);border-color:#f0b8b2;color:var(--red)}
.flash.warn{background:var(--amberbg);border-color:#f5cf9b;color:var(--amber)}
.muted{color:var(--gray)}.small{font-size:12px}.nowrap{white-space:nowrap}
.hint{background:var(--mint);border:1px solid #c5e0d7;border-radius:5px;padding:8px 10px;font-size:13px}
.warnbox{background:var(--amberbg);border:1px solid #f5cf9b;border-radius:5px;padding:8px 10px;font-size:13px;color:#7a2e0e}
.badbox{background:var(--redbg);border:1px solid #f0b8b2;border-radius:5px;padding:8px 10px;font-size:13px;color:var(--red)}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.toolbar input,.toolbar select{width:auto}
.tabs{display:flex;gap:4px;margin-bottom:12px;flex-wrap:wrap}
.tabs a{padding:6px 12px;border-radius:5px;text-decoration:none;color:var(--ch2);background:#fff;border:1px solid var(--line)}
.tabs a.on{background:var(--g);color:#fff;border-color:var(--g)}
/* board */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:10px;overflow-x:auto;padding-bottom:6px}
.col{background:#e9efed;border-radius:6px;padding:8px;min-height:200px}
.col h3{margin:0 0 8px;font-size:12px;text-transform:uppercase;color:var(--ch2);display:flex;justify-content:space-between}
.ld{background:#fff;border:1px solid var(--line);border-left:4px solid var(--sage);border-radius:5px;padding:8px;margin-bottom:8px;font-size:12.5px}
.ld.carrier{border-left-color:var(--blue)}.ld.none{border-left-color:#c9c9c9}
.ld .t{display:flex;justify-content:space-between;gap:6px;font-weight:650;margin-bottom:3px}
.ld .a{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.legend span{display:inline-flex;align-items:center;gap:4px;margin-right:12px;font-size:12px}
.legend i{width:12px;height:12px;border-radius:2px;display:inline-block}
.chartbox{position:relative;height:260px}
.reasons{margin:4px 0 0;padding-left:18px;font-size:12px}
.reasons li{margin:1px 0}
/* routes */
#map{height:480px;border-radius:6px;border:1px solid var(--line)}
.rt{border-top:4px solid var(--g)}
.stops{list-style:none;margin:0;padding:0;min-height:36px}
.stop{display:flex;gap:8px;align-items:flex-start;padding:7px;border:1px solid var(--line);border-radius:5px;margin-bottom:6px;background:#fff;cursor:grab}
.stop.locked{cursor:default;background:#f6f8f7}
.stop.dragging{opacity:.4}
.stop .n{flex:0 0 24px;height:24px;border-radius:12px;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:12px}
.stop .b{flex:1;min-width:0}
.stop .m{display:flex;flex-direction:column;gap:2px}
.stop .m button{padding:0 6px;font-size:11px}
.stop.late{border-color:#f0b8b2;background:#fff8f7}
.dropzone{border:2px dashed #c8d3cf;border-radius:5px;padding:6px;min-height:40px}
.pin{width:26px;height:26px;border-radius:13px;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4);font-size:12px}
footer{color:var(--gray);font-size:12px;text-align:center;padding:20px}
@media (max-width:900px){.g2,.g3,.g4{grid-template-columns:1fr}.fg .w2{grid-column:auto}main{padding:10px}
 header.top .brand small,.user{display:none}#map{height:340px}.kpi .v{font-size:20px}}
@media print{header.top,.noprint,footer,.flash{display:none!important}body,main{background:#fff;padding:0}}

h1 .btn,h1 button{font-size:14px}
@media (min-width:1100px){.kpis.k10{grid-template-columns:repeat(6,minmax(0,1fr))}}
details.qe{display:inline-block;position:relative}
details.qe summary{list-style:none}details.qe summary::-webkit-details-marker{display:none}
details.qe[open]{display:block;width:100%}
.qf{background:#f6faf8;border:1px solid var(--line);border-radius:5px;padding:8px;margin-top:6px;display:flex;flex-direction:column;gap:4px}
.qf label{margin:2px 0 0;font-size:11px}.qf input,.qf select{padding:4px 6px;font-size:12px}
.gs{margin:0}.gs input{width:200px;background:#3b4341;border:1px solid #56605d;color:#fff;padding:6px 9px}
.gs input::placeholder{color:#a9b5b1}.gs input:focus{background:#fff;color:var(--ch);width:260px}
.umenu{display:flex;align-items:center;gap:8px;white-space:nowrap}.umenu .ulink{color:#a9c9bf;font-size:12px}
.umenu button.sec{background:transparent;color:#d6e4df;border-color:#56605d}
th.sa:after{content:" \25B2";font-size:9px}th.sd:after{content:" \25BC";font-size:9px}
.filters{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;align-items:end;background:#fff;border:1px solid var(--line);border-radius:6px;padding:10px;margin-bottom:12px}
.filters label{font-size:11px}.filters .act{display:flex;gap:6px;align-items:end}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#2e3533 0%,#10765C 140%)}
.login{background:#fff;border-radius:8px;padding:28px;width:min(380px,92vw);box-shadow:0 8px 30px rgba(0,0,0,.25)}
.login .lg{display:flex;align-items:center;gap:10px;margin-bottom:18px}.login .lg img{height:44px}
.login .lg b{font-size:20px;color:var(--ch)}.login .lg span{display:block;color:var(--gray);font-size:12px}
.login label{margin-top:10px}.login button{width:100%;margin-top:16px;padding:10px}
@media (max-width:900px){.gs input{width:110px}.gs input:focus{width:150px}.umenu .user,.umenu .ulink{display:none}}
.dl-card{max-width:560px}.dl-stop{border-left:3px solid var(--sage);padding:4px 0 4px 10px;margin:10px 0}
button.big{width:100%;padding:14px;font-size:16px;margin-top:4px}.pod{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.warn-t{color:#b26b00}.ok-t{color:#10765C}
/* source labels */
.badge.src-s{background:#e7f5ff;color:#1864ab}.badge.src-p{background:#fff4e6;color:#a8590f}.badge.src-d{background:#f3f0ff;color:#5f3dc4}.badge.src-e{background:#ebfbee;color:#2b8a3e}
/* toasts */
#gtoasts{position:fixed;right:16px;bottom:16px;z-index:9999;display:flex;flex-direction:column;gap:8px;max-width:360px}
.toast{background:#1b1e23;color:#fff;border-radius:8px;padding:10px 14px;box-shadow:0 4px 14px #0005;font-size:13px;border-left:5px solid #adb5bd;animation:tin .25s}
.toast b{display:block;font-size:14px}.toast.arrived,.toast.pu_arrived{border-color:#51cf66}.toast.departed,.toast.pu_departed{border-color:#4dabf7}.toast.eta{border-color:#9775fa}.toast.late_risk{border-color:#ff922b}.toast.exception{border-color:#ff6b6b}
@keyframes tin{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
.nbell{position:relative;text-decoration:none;font-size:16px;margin-right:6px}.nbell i{position:absolute;top:-6px;right:-8px;background:#c92a2a;color:#fff;border-radius:8px;font-size:10px;font-style:normal;padding:0 4px}

/* business unit switcher */
.buswitch{display:inline-flex;border:1px solid #3d6b59;border-radius:7px;overflow:hidden;margin:0 8px;flex:none}
.buswitch a{color:#cfe3da;padding:4px 10px;font-size:12.5px;text-decoration:none;border-left:1px solid #3d6b59}
.buswitch a:first-child{border-left:0}.buswitch a.on{background:#fff;color:#0f3d2e;font-weight:700}
.bu-tag{font-size:11px;padding:1px 6px;border-radius:9px;background:#eef2ff;color:#3b5bdb}.bu-tag.Monarch{background:#fff4e6;color:#d9480f}
.flash.info{background:#e7f5ff;border-color:#a5d8ff;color:#1864ab}
.badge.src-x{background:#f1f3f5;color:#868e96}.badge.src-o{background:#e6fcf5;color:#087f5b}
.verdict{display:inline-block;padding:6px 16px;border-radius:8px;font-weight:700;font-size:22px}
.verdict.take{background:#d3f9d8;color:#2b8a3e}.verdict.marg{background:#fff3bf;color:#a8590f}.verdict.pass{background:#ffe3e3;color:#c92a2a}
.bhgrid{display:grid;grid-template-columns:380px 1fr;gap:14px}.bhgrid input,.bhgrid select{width:100%}
.bhgrid .row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}

.scnbar{background:#FFF4E5;border:1px solid #F0B46A;color:#6B3E00}
.buswitch.scnswitch a.on.scn{background:#C2410C;color:#fff}
.badge.scn{background:#FFEDD5;color:#9A3412;border:1px solid #FDBA74}
td .bad{color:#c92a2a;font-weight:600}
/* header: never clip nav items. Wide screens: one row. Laptops/tablets: nav gets its own full-width row and wraps. Phones: header scrolls away. */
header.top{height:auto;min-height:52px;flex-wrap:wrap;row-gap:0}
nav.main{min-width:0;flex-wrap:wrap;overflow:visible}
@media (max-width:1760px){
 header.top{padding-top:6px}
 header.top nav.main{order:10;flex:1 0 100%;border-top:1px solid rgba(255,255,255,.12);margin:4px -16px 0;padding:0 10px}
 nav.main a{padding:9px 8px 8px}
 header.top .umenu{margin-left:auto}
}
@media (max-width:700px){
 header.top{position:static;gap:8px;padding:6px 10px 0}
 header.top nav.main{margin:4px -10px 0;padding:0 4px}
 nav.main a{padding:8px 7px;font-size:12.5px}
 header.top .brand span{display:none}
 .buswitch{margin:0}.buswitch a{padding:4px 7px}
 .gs input{width:96px}
}

/* Projected (Fleet Plan v3) tiles: hatched + lighter so they never read as actuals */
.kpi.proj{background:repeating-linear-gradient(135deg,#fbfdfc 0 8px,#eef4f1 8px 16px);border:1px dashed #9cb8ad;color:#4a5f58}
.kpi.proj .v{color:#5b7a70}.kpi.proj.pend .v{color:#9aa8a3;font-size:1.1em}
.badge.b-proj{background:#e6eeeb;color:#4a6a60;border:1px dashed #8fb0a4;font-weight:600}
.proj-card{border:1px dashed #9cb8ad}
.badge.warn{background:#fff4e6;color:#a8590f;border:1px solid #ffd8a8}
.badge.demo{background:#f3f0ff;color:#5f3dc4}
/* route map modal (dispatch board) */
.rm-back{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:2000;align-items:center;justify-content:center;padding:12px}
.rm-back.on{display:flex}.rm-box{background:#fff;border-radius:10px;width:min(920px,100%);max-height:96vh;display:flex;flex-direction:column;padding:12px 14px;gap:8px;box-shadow:0 10px 40px rgba(0,0,0,.3)}
.rm-head{display:flex;justify-content:space-between;align-items:center;font-size:16px}#rmMap{height:min(60vh,520px);border-radius:8px;border:1px solid #ddd}
.rm-grid{display:flex;flex-wrap:wrap;gap:4px 18px}.rm-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:middle}
.rm-pin span{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;color:#fff;font:700 11px/1 sans-serif;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.chip .rmb{padding:0 5px;font-size:11px;margin-left:4px}
@media (max-width:600px){.rm-box{padding:8px;max-height:100vh;border-radius:6px}#rmMap{height:52vh}.rm-head{font-size:14px}}