:root{
  --brand-blue: #FF3333;
  --brand-dark: #072146;
  --brand-light: #f6f9ff;
  --success-green: #28a745;
  --warning-yellow: #f0ad4e;
  --neutral-gray: #6c757d;
  --card-radius: 12px;
  --shadow: 0 8px 30px rgba(10,35,77,0.06);
  --max-width: 1100px;
}
*{box-sizing:border-box}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto, "Helvetica Neue", Arial; background: #f4f7fb; color:var(--brand-dark); margin:0;}
a{color:var(--brand-blue); text-decoration:none;}
.container{max-width:var(--max-width); margin:24px auto; padding:0 16px;}
/* sidebar */
.app-shell{display:flex; min-height:100vh;}
.sidebar{width:260px; background:linear-gradient(180deg,var(--brand-dark),var(--brand-blue)); color:#fff; padding:18px 12px; position:fixed; left:0; top:0; bottom:0;}
.sidebar .brand{font-weight:800; font-size:1.15rem; text-align:center; margin-bottom:18px;}
.sidebar nav a{display:block; padding:12px 14px; border-radius:10px; color:#fff; margin:6px 0; font-weight:600;}
.sidebar nav a:hover, .sidebar nav a.active{background:rgba(255,255,255,0.08);}
.main{margin-left:280px; flex:1; padding:28px;}
.header{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;}
.card{background:#fff; border-radius:var(--card-radius); padding:18px; box-shadow:var(--shadow); margin-bottom:18px;}
.table{width:100%; border-collapse:collapse;}
.table th, .table td{padding:10px; border-bottom:1px solid #eef4fb; text-align:left;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media(max-width:880px){ .sidebar{position:relative;width:100%;height:auto;} .main{margin-left:0;padding:16px;} .form-row{grid-template-columns:1fr;} }
.button{background:var(--brand-blue); color:#fff; padding:10px 12px; border-radius:8px; border:none; cursor:pointer; font-weight:700;}
.button.ghost{background:transparent; color:var(--brand-blue); border:1px solid rgba(11,94,215,0.12);}
.status-pill{display:inline-block;padding:6px 10px;border-radius:999px;font-weight:800;}
.status-delivered{background:linear-gradient(90deg,#e6fff0,#f6fff8); color:var(--success-green);}
.status-intransit{background:linear-gradient(90deg,#eef6ff,#f8fbff); color:var(--brand-blue);}
.status-onhold{background:linear-gradient(90deg,#fff8e6,#fffdf5); color:var(--warning-yellow);}
.status-picked{background:#f1f3f6;color:var(--neutral-gray);}
.small{font-size:0.9rem;color:#6b8293;}