*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f3f6fb;color:#0f172a}.app{display:flex;min-height:100vh}.sidebar{width:290px;background:#071326;color:white;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column}.logo{display:flex;gap:12px;align-items:center;padding:22px;border-bottom:1px solid rgba(255,255,255,.1)}.logo-mark{width:48px;height:48px;border-radius:14px;background:#16a34a;display:flex;align-items:center;justify-content:center;font-weight:900}.logo span{display:block;color:#9fb1d1;font-size:13px}.nav{padding:12px;overflow:auto;flex:1}.nav a{display:block;color:#dbeafe;text-decoration:none;font-weight:800;padding:13px 14px;border-radius:12px;margin:4px 0}.nav a.active,.nav a:hover{background:rgba(22,163,74,.22);color:white}.side-foot{padding:16px;border-top:1px solid rgba(255,255,255,.1)}.side-foot a{color:#86efac}main{margin-left:290px;width:calc(100% - 290px);padding:24px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}.topbar h1{margin:0;font-size:30px}.topbar p{margin:6px 0 0;color:#64748b}.btn,button{background:#16a34a;color:white;border:0;border-radius:12px;padding:11px 16px;font-weight:800;cursor:pointer;text-decoration:none;display:inline-block}.grid{display:grid;gap:16px}.grid.two{grid-template-columns:1fr 1fr}.grid.four{grid-template-columns:repeat(4,1fr)}.card{background:white;border:1px solid #e5e7eb;border-radius:18px;padding:18px;box-shadow:0 8px 24px rgba(15,23,42,.05);margin-bottom:16px}.kpi span{color:#64748b;font-size:13px}.kpi strong{display:block;font-size:30px;margin-top:8px}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:10px;border-bottom:1px solid #e5e7eb;text-align:left;font-size:14px;vertical-align:top}.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#e2e8f0;font-size:12px;font-weight:800}.badge.danger{background:#fee2e2;color:#991b1b}.badge.good{background:#dcfce7;color:#166534}.form-grid{display:grid;gap:10px}.form-grid input,.form-grid select,.form-grid textarea,input,select{border:1px solid #dbe3ef;border-radius:12px;padding:11px;background:white;width:100%}.form-grid textarea{min-height:90px}.alert{padding:12px 14px;border-radius:12px;margin-bottom:12px}.alert.danger{background:#fee2e2;color:#991b1b}.alert.success{background:#dcfce7;color:#166534}.muted{color:#64748b}.wallboard{background:#071326;color:white;border-radius:24px;padding:24px;min-height:70vh}.wallboard .card{background:#0f2a55;border-color:rgba(255,255,255,.1);color:white}.login-body,.install-body{background:#071326;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}.login-card,.install-card{width:min(680px,100%);background:white;border-radius:22px;padding:28px}code{background:rgba(15,23,42,.08);padding:2px 6px;border-radius:6px}@media(max-width:1000px){.sidebar{position:relative;width:100%}.app{display:block}main{margin-left:0;width:100%}.grid.two,.grid.four{grid-template-columns:1fr}}


/* === UP WAREHOUSE UI MATCH MANAGEMENT SIDEBAR + LOGIN STYLE V3 === */
:root{
  --up-sidebar:#0b1630;
  --up-sidebar-deep:#071326;
  --up-green:#18a34a;
  --up-green-bright:#4cff8b;
  --up-muted:#8da6cd;
  --up-link:#c2d3ef;
  --up-line:rgba(255,255,255,.08);
}

.sidebar{
  width:284px !important;
  background:linear-gradient(180deg,#0d1831 0%,#071326 100%) !important;
  color:#eef4ff !important;
  height:100vh !important;
  overflow:hidden !important;
  border-right:1px solid rgba(255,255,255,.08) !important;
  box-shadow:none !important;
}

.logo{
  min-height:86px !important;
  padding:14px 14px 14px 14px !important;
  border-bottom:1px solid var(--up-line) !important;
  background:#0b1630 url('../branding/up-logo-white.png?v=warehouse-ui-v3') no-repeat 16px center !important;
  background-size:232px auto !important;
}
.logo > *{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

.nav{
  padding:10px 12px 0 !important;
  overflow-y:auto !important;
  scrollbar-width:thin !important;
  scrollbar-color:rgba(255,255,255,.55) transparent !important;
}
.nav::-webkit-scrollbar{width:7px}
.nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.55);border-radius:999px}
.nav::-webkit-scrollbar-track{background:transparent}

.nav-section{
  color:#8397ba !important;
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
  margin:16px 8px 8px !important;
}

.nav a{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  min-height:46px !important;
  color:var(--up-link) !important;
  text-decoration:none !important;
  font-weight:700 !important;
  font-size:16px !important;
  line-height:1.2 !important;
  border-radius:0 !important;
  border-left:3px solid transparent !important;
  padding:10px 14px !important;
  margin:2px -12px !important;
  background:transparent !important;
}

.nav a .wh-nav-icon{
  width:22px !important;
  min-width:22px !important;
  text-align:center !important;
  font-size:16px !important;
  color:#a9c0e8 !important;
}

.nav a.active,
.nav a:hover{
  color:var(--up-green-bright) !important;
  background:linear-gradient(90deg,rgba(22,163,74,.20),rgba(6,15,30,0)) !important;
  border-left-color:var(--up-green) !important;
}
.nav a.active .wh-nav-icon,
.nav a:hover .wh-nav-icon{ color:var(--up-green-bright) !important; }

.warehouse-live-card{
  margin:16px 10px 14px !important;
  padding:14px 16px !important;
  border-radius:16px !important;
  border:1px solid rgba(89,113,160,.25) !important;
  background:rgba(9,21,42,.85) !important;
}
.warehouse-live-card strong{
  display:block !important;
  color:#ffffff !important;
  font-size:14px !important;
  margin-bottom:7px !important;
}
.warehouse-live-card span{
  display:block !important;
  color:#86a1ca !important;
  font-size:13px !important;
  line-height:1.45 !important;
}

.side-foot{
  margin-top:auto !important;
  border-top:1px solid var(--up-line) !important;
  background:#09162d !important;
  padding:14px 10px 12px !important;
}
.side-foot.up-user-ready{ padding-top:12px !important; }
.up-user-row{ display:flex !important; align-items:center !important; gap:12px !important; margin-bottom:12px !important; }
.up-user-avatar{
  width:36px !important;
  height:36px !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,#1fb85b,#0f8d43) !important;
  color:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:18px !important;
  flex:0 0 36px !important;
}
.up-user-meta strong,
.side-foot strong{
  display:block !important;
  color:#fff !important;
  font-size:15px !important;
  line-height:1.2 !important;
  margin:0 !important;
}
.up-user-meta small,
.side-foot small{
  display:block !important;
  color:#8ea3c7 !important;
  font-size:13px !important;
  margin-top:3px !important;
}
.side-foot .up-logout,
.side-foot > a{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  text-decoration:none !important;
  background:linear-gradient(180deg,rgba(91,13,32,.55),rgba(58,8,22,.72)) !important;
  border:1px solid rgba(246,92,131,.32) !important;
  color:#ffffff !important;
  font-weight:800 !important;
  border-radius:16px !important;
  height:44px !important;
}
.side-foot > a::before{ content:'↪'; }

main{
  margin-left:284px !important;
  width:calc(100% - 284px) !important;
  min-height:100vh !important;
  background:#f3f6fb !important;
}

/* Login page */
.login-body{
  background:radial-gradient(circle at top left,#0e1e3f 0%,#071326 46%,#020814 100%) !important;
  min-height:100vh !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:34px !important;
}
.login-card{
  width:min(720px,100%) !important;
  background:#ffffff !important;
  border-radius:26px !important;
  padding:28px 28px 26px !important;
  box-shadow:0 30px 80px rgba(0,0,0,.36) !important;
  border:1px solid rgba(255,255,255,.16) !important;
}
.login-card::before{
  content:'' !important;
  display:block !important;
  width:100% !important;
  height:98px !important;
  border-radius:20px !important;
  margin:0 0 22px !important;
  background:#000000 url('../branding/up-logo-white.png?v=warehouse-login-black') center center / contain no-repeat !important;
}
.login-card h1{
  margin:0 0 8px !important;
  font-size:28px !important;
  line-height:1.1 !important;
  color:#071a38 !important;
}
.login-card p{
  margin:0 0 18px !important;
  color:#3f4f68 !important;
  font-size:15px !important;
}
.login-card label{
  display:block !important;
  font-size:15px !important;
  font-weight:700 !important;
  color:#0e1d36 !important;
  margin:14px 0 7px !important;
}
.login-card input{
  width:100% !important;
  height:48px !important;
  border-radius:14px !important;
  border:1px solid #d4ddec !important;
  background:#edf3fb !important;
  color:#102340 !important;
  padding:0 14px !important;
  outline:none !important;
  box-shadow:none !important;
}
.login-card input:focus{
  border-color:#16a34a !important;
  box-shadow:0 0 0 4px rgba(22,163,74,.12) !important;
  background:#ffffff !important;
}
.login-card button,
.login-card .btn,
.login-card input[type=submit]{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:118px !important;
  height:46px !important;
  margin-top:18px !important;
  border:none !important;
  border-radius:14px !important;
  background:#16a34a !important;
  color:#ffffff !important;
  font-weight:800 !important;
  font-size:16px !important;
  cursor:pointer !important;
}
.login-card .alert,
.login-card .error,
.login-card .danger{
  border-radius:14px !important;
  padding:12px 14px !important;
  margin:0 0 14px !important;
  background:#fff1f2 !important;
  color:#9f1239 !important;
  border:1px solid #fecdd3 !important;
}

@media (max-width: 900px){
  .sidebar{ width:100% !important; height:auto !important; position:relative !important; }
  main{ margin-left:0 !important; width:100% !important; }
  .logo{ background-size:220px auto !important; }
}