:root{
  --paper:#F6F4EF; --ink:#1B2430; --navy:#1E3A5F; --navy-dark:#16293F;
  --amber:#C77D2E; --green:#2F6E4E; --red:#A8402F; --border:#D8D3C7;
  --muted:#6B7280; --card:#FFFFFF;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:'Segoe UI',ui-sans-serif,system-ui,Arial,sans-serif;font-size:14px;}
a{color:var(--navy);}
.mono{font-family:'SF Mono',Consolas,'Courier New',monospace;}
.shell{display:grid;grid-template-columns:220px 1fr;min-height:100vh;}

.sidebar{background:var(--navy-dark);color:#DCE4EE;padding:20px 0;position:sticky;top:0;height:100vh;overflow-y:auto;}
.brand{font-size:16px;font-weight:700;letter-spacing:.2px;padding:0 20px 20px;
  border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:12px;color:#fff;}
.brand span{color:var(--amber);}
.nav-group{padding:6px 0;}
.nav-label{font-size:11px;color:#7C8CA0;padding:10px 20px 4px;}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 20px;color:#B9C6D6;
  text-decoration:none;font-size:13.5px;border-left:3px solid transparent;}
.nav-item .ico{width:16px;text-align:center;opacity:.85;}
.nav-item.active{background:rgba(199,125,46,.14);color:#fff;border-left-color:var(--amber);}
.nav-item:hover{color:#fff;}
.nav-details summary{list-style:none;}
.nav-details summary::-webkit-details-marker{display:none;}
.nav-details summary::after{content:'\25BE';float:right;margin-right:4px;opacity:.6;transition:transform .15s;}
.nav-details[open] summary::after{transform:rotate(180deg);}
.nav-subgroup{display:flex;flex-direction:column;}
.nav-item.nav-sub{padding-left:44px;font-size:12.5px;}

.main{display:flex;flex-direction:column;min-width:0;}
.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;border-bottom:1px solid var(--border);background:var(--paper);}
.user{display:flex;align-items:center;gap:8px;font-size:13px;}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;}

.content{padding:24px 28px;}
.page-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
.page-head h1{font-size:19px;margin:0;font-weight:700;}
.page-head .sub{color:var(--muted);font-size:12.5px;margin-top:3px;}

.kpi-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border:1px solid var(--border);
  border-radius:4px;overflow:hidden;background:#fff;margin-bottom:22px;}
.kpi{padding:14px 18px;border-right:1px solid var(--border);}
.kpi:last-child{border-right:none;}
.kpi .num{font-size:22px;font-weight:700;line-height:1;font-family:'SF Mono',Consolas,monospace;}
.kpi .lbl{font-size:11.5px;color:var(--muted);margin-top:6px;}
.kpi.hold .num{color:var(--red);} .kpi.cod .num{color:var(--amber);} .kpi.delivered .num{color:var(--green);}

.layout-2col{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start;}
@media(max-width:900px){.layout-2col{grid-template-columns:1fr;}}

.panel{background:#fff;border:1px solid var(--border);border-radius:4px;margin-bottom:20px;}
.panel-head{display:flex;justify-content:space-between;align-items:center;
  padding:12px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap;gap:8px;}
.panel-head h2{font-size:13.5px;margin:0;font-weight:700;}
.panel-head .count{font-size:11.5px;color:var(--muted);}
.panel-body{padding:16px;}

table{width:100%;border-collapse:collapse;font-size:13px;}
thead th{text-align:left;font-size:11px;color:var(--muted);font-weight:600;
  padding:9px 16px;border-bottom:1px solid var(--border);background:#FBFAF7;white-space:nowrap;}
tbody td{padding:10px 16px;border-bottom:1px solid #EDEAE2;vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
.order-code{font-family:'SF Mono',Consolas,monospace;font-weight:600;}
.zone-tag{display:inline-block;font-size:10.5px;padding:2px 7px;border-radius:2px;font-weight:600;white-space:nowrap;}
.zone-north{background:#EAF0F6;color:var(--navy);}
.zone-central{background:#FBF0E4;color:var(--amber);}
.zone-south{background:#E9F3EC;color:var(--green);}
.zone-default{background:#EFEDE7;color:var(--muted);}
.status{display:inline-flex;align-items:center;gap:5px;font-size:12px;white-space:nowrap;}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;}
.dot.new,.dot.assigned{background:#8A93A3;} .dot.on_hold,.dot.cancelled,.dot.failed{background:var(--red);}
.dot.routed,.dot.processing,.dot.accepted,.dot.picking,.dot.packed,.dot.booked{background:var(--navy);}
.dot.shipped,.dot.partially_shipped{background:var(--amber);}
.dot.delivered,.dot.submitted{background:var(--green);}
.split-badge{font-size:10.5px;color:var(--muted);border:1px solid var(--border);
  border-radius:2px;padding:1px 5px;margin-left:6px;}

.loc-row,.courier-row{display:flex;justify-content:space-between;align-items:center;
  padding:10px 16px;border-bottom:1px solid #EDEAE2;font-size:12.5px;}
.loc-row:last-child,.courier-row:last-child{border-bottom:none;}
.loc-name{font-weight:600;} .loc-sub{color:var(--muted);font-size:11px;}
.load-bar{width:70px;height:5px;background:#EDEAE2;border-radius:3px;overflow:hidden;}
.load-bar>div{height:100%;background:var(--navy);}
.load-bar.high>div{background:var(--red);}
.courier-dot{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block;margin-right:6px;}
.courier-dot.off{background:#C7C2B4;}
.fbr-note{font-size:11.5px;color:var(--muted);padding:12px 16px;line-height:1.5;}
.fbr-note b{color:var(--ink);}

.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:4px;border:1px solid var(--border);
  background:#fff;color:var(--ink);font-size:12.5px;cursor:pointer;text-decoration:none;font-weight:600;}
.btn:hover{border-color:var(--navy);} 
.btn-primary{background:var(--navy);border-color:var(--navy);color:#fff;}
.btn-primary:hover{background:var(--navy-dark);}
.btn-amber{background:var(--amber);border-color:var(--amber);color:#fff;}
.btn-danger{background:var(--red);border-color:var(--red);color:#fff;}
.btn-sm{padding:4px 10px;font-size:11.5px;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}

.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;}
.field{display:flex;flex-direction:column;gap:5px;}
.field label{font-size:11.5px;color:var(--muted);font-weight:600;}
.field input,.field select,.field textarea{padding:8px 10px;border:1px solid var(--border);border-radius:4px;font-size:13px;background:#fff;font-family:inherit;}
.field-check{display:flex;align-items:center;gap:8px;font-size:12.5px;}

.alert{padding:10px 16px;border-radius:4px;font-size:13px;margin-bottom:16px;border:1px solid transparent;}
.alert-success{background:#EAF5EE;color:var(--green);border-color:#CDE7D6;}
.alert-error{background:#FBEAE6;color:var(--red);border-color:#F1CDC4;}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:18px;flex-wrap:wrap;}
.tabs a{padding:9px 14px;font-size:12.5px;text-decoration:none;color:var(--muted);border-bottom:2px solid transparent;font-weight:600;}
.tabs a.active{color:var(--navy);border-bottom-color:var(--amber);}

.badge-role{font-size:10.5px;padding:2px 7px;border-radius:2px;background:#EAF0F6;color:var(--navy);font-weight:600;}
.empty-state{padding:40px 20px;text-align:center;color:var(--muted);font-size:13px;}
.search-box input{padding:8px 12px;border:1px solid var(--border);border-radius:4px;background:#fff;font-size:13px;min-width:220px;}
.select-inline{padding:6px 8px;border:1px solid var(--border);border-radius:4px;font-size:12.5px;}
.inline-form{display:inline;}
.print-slip{max-width:640px;margin:24px auto;background:#fff;border:1px solid var(--border);padding:28px;}
.print-slip h1{font-size:18px;margin:0 0 4px;} .print-slip table{margin-top:14px;}
.qr-box{width:110px;height:110px;border:1px dashed var(--border);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--muted);text-align:center;}