/* Universal Plywood Warehouse Manager Branding + PWA Fix */
:root{
  --up-sidebar:#0f172a;
  --up-sidebar-deep:#071326;
  --up-green:#16a34a;
  --up-text:#eaf2ff;
  --up-muted:#91a4c7;
  --up-line:rgba(148,163,184,.18);
}

body{
  background:#f3f6fb;
}

.sidebar{
  width:300px !important;
  background:linear-gradient(180deg,#0f172a 0%,#071326 100%) !important;
  color:var(--up-text) !important;
  height:100vh !important;
  overflow:hidden !important;
  box-shadow:1px 0 0 rgba(148,163,184,.18);
}

.logo{
  min-height:92px !important;
  padding:16px 18px !important;
  border-bottom:1px solid var(--up-line) !important;
  background-image:url('../branding/up-logo-white.png') !important;
  background-repeat:no-repeat !important;
  background-position:18px center !important;
  background-size:245px auto !important;
}

.logo > *{
  opacity:0 !important;
  pointer-events:none !important;
}

.nav{
  padding:14px 12px !important;
  overflow-y:auto !important;
  scrollbar-width:thin;
  scrollbar-color:rgba(226,232,240,.75) transparent;
}

.nav::-webkit-scrollbar{width:8px}
.nav::-webkit-scrollbar-thumb{background:rgba(226,232,240,.75);border-radius:999px}
.nav::-webkit-scrollbar-track{background:transparent}

.nav-section{
  color:#8ea3c7;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin:18px 8px 8px;
}

.nav a{
  display:flex !important;
  align-items:center !important;
  gap:13px !important;
  min-height:46px !important;
  color:#b7cef6 !important;
  font-weight:700 !important;
  border-radius:0 !important;
  padding:11px 12px !important;
  margin:2px -12px 2px -12px !important;
  border-left:3px solid transparent;
}

.nav a .wh-nav-icon{
  width:24px;
  text-align:center;
  color:#9ec5ff;
  font-size:17px;
  flex:0 0 24px;
}

.nav a.active,
.nav a:hover{
  background:linear-gradient(90deg,rgba(22,163,74,.20),rgba(15,23,42,.0)) !important;
  color:#37f777 !important;
  border-left-color:#16a34a !important;
}

.nav a.active .wh-nav-icon,
.nav a:hover .wh-nav-icon{
  color:#37f777;
}

.warehouse-live-card{
  margin:12px 12px 14px;
  padding:16px;
  border:1px solid var(--up-line);
  border-radius:16px;
  background:rgba(15,23,42,.62);
  color:#dbeafe;
}

.warehouse-live-card strong{
  display:block;
  color:#fff;
  margin-bottom:7px;
  font-size:14px;
}

.warehouse-live-card span{
  display:block;
  color:#8ea3c7;
  font-size:13px;
  line-height:1.45;
}

.side-foot{
  border-top:1px solid var(--up-line) !important;
  padding:18px 14px !important;
  background:rgba(7,19,38,.82);
}

.side-foot strong{
  display:block;
  color:#fff;
}

.side-foot small{
  color:#8ea3c7;
}

.side-foot a{
  display:block;
  margin-top:13px;
  text-align:center;
  background:rgba(127,29,29,.38);
  border:1px solid rgba(248,113,113,.35);
  color:#fff !important;
  border-radius:14px;
  padding:12px 14px;
  font-weight:800;
  text-decoration:none;
}

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

.topbar{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:20px;
  padding:18px 20px;
  box-shadow:0 8px 24px rgba(15,23,42,.05);
}

.topbar h1{
  letter-spacing:-.02em;
}

.card{
  border-radius:20px !important;
}

.wh-install-btn{
  display:none;
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:9999;
  background:#16a34a;
  color:#fff;
  border:0;
  border-radius:999px;
  padding:14px 18px;
  font-weight:900;
  box-shadow:0 16px 45px rgba(22,163,74,.32);
  cursor:pointer;
}

.wh-install-btn.show{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.login-card::before{
  content:'';
  display:block;
  width:100%;
  height:96px;
  margin:0 0 18px;
  background:url('../branding/up-logo-white.png') center center / contain no-repeat, #071326;
  border-radius:18px;
}

.login-card h1{
  margin-top:0;
}

@media(max-width:1000px){
  .sidebar{
    position:relative !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
  }

  .logo{
    background-size:240px auto !important;
  }

  main{
    margin-left:0 !important;
    width:100% !important;
  }

  .nav{
    max-height:none !important;
  }
}