/* Worker Portal (mobile-first) */

/* ---------- Auth (OTP login) ---------- */
body.worker-auth{
  min-height:100vh;
  background:
    radial-gradient(900px 500px at 10% 10%, rgba(78,115,223,.22), transparent 55%),
    radial-gradient(900px 500px at 90% 15%, rgba(28,200,138,.20), transparent 60%),
    linear-gradient(180deg, #f7f9ff 0%, #f4fbf8 100%) fixed;
}
body.worker-auth #content{ padding:0 !important; }
body.worker-auth .auth-card{
  border: 0;
  border-radius: 18px;
  overflow: hidden;
}
body.worker-auth .auth-card .form-control{
  border-radius: .85rem;
  padding: .85rem 1rem;
  font-size: 1.05rem;
}
body.worker-auth .auth-card .btn{
  border-radius: .85rem;
  padding: .8rem 1rem;
  font-weight: 600;
}
body.worker-auth .wm-otp-input{
  text-align:center;
  letter-spacing: .35em;
  font-variant-numeric: tabular-nums;
  font-size: 1.2rem;
}

@media (max-width: 576px){
  body.worker-auth .auth-wrap{ padding: 14px; }
  body.worker-auth .auth-card{ border-radius: 16px; }
}

/* ---------- Portal (requests/vault) ---------- */
body.worker-portal{
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 55%, #ffffff 100%) fixed;
}

/* leave room for bottom nav on mobile */
body.worker-portal #content{ padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
@media (min-width: 768px){
  body.worker-portal #content{ padding-bottom: 1rem; }
}

.wm-bottom-nav{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  background: rgba(255,255,255,.92);
  border-top: 1px solid rgba(15,23,42,.10);
  backdrop-filter: saturate(180%) blur(10px);
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  transition: transform .18s ease, opacity .18s ease;
  will-change: transform, opacity;
}

.wm-bottom-nav.is-hidden{
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}
.wm-bottom-nav .wm-nav{
  display:flex;
  gap: 10px;
  align-items: stretch;
  justify-content: space-between;
  max-width: 720px;
  margin: 0 auto;
}
.wm-bottom-nav .wm-nav form{ flex: 1 1 0; }
.wm-bottom-nav .wm-nav form button{ width: 100%; }
.wm-bottom-nav .wm-nav a,
.wm-bottom-nav .wm-nav button{
  flex: 1 1 0;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 4px;
  padding: 10px 8px;
  border-radius: 14px;
  text-decoration:none;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(2,6,23,.02);
  color: #0f172a;
  font-size: .78rem;
}
.wm-bottom-nav .wm-nav a.active{
  border-color: rgba(13,110,253,.35);
  background: rgba(13,110,253,.08);
  color: #0d6efd;
  font-weight: 700;
}
.wm-bottom-nav .wm-nav i{ font-size: 1.1rem; line-height: 1; }

@media (min-width: 768px){
  .wm-bottom-nav{ display:none; }
}

/* small utility: make card actions easier to tap */
.wm-tap-card{
  border-radius: 16px;
}
.wm-tap-card .btn{
  border-radius: 12px;
}