/* ============================================================================
   ReBox — shared/css/staff-auth-v2.css

   ONE shared visual redesign for the team-login pages (driver, merchant,
   admin). Linked ONLY on driver-login.html / merchant-login.html /
   admin-login.html — never on the password-reset pages — so it re-skins
   just these three pages without touching anything else that reuses the
   same class names (auth-tokens.css keeps doing that job everywhere else).

   Scope: presentation only. No selector here is read by any JS file — the
   IDs, form structure, submit handlers, session/role checks and redirect
   logic in driver-login.js / merchant-login.js / admin-login.js are
   completely untouched by this file.

   The three pages intentionally render identically: no page text here
   names which portal it is (no "driver"/"merchant"/"admin" wording, no
   role badge). All three ship the same brand-forward, professional look;
   the actual account type is verified after sign-in on the server side,
   exactly as before.
   ============================================================================ */

.staff-login-page {
  background: radial-gradient(120% 100% at 50% 0%, #eef8ec 0%, #fffaf1 42%, #fff8ee 100%);
}

.staff-auth-v2 {
  position: relative;
  max-width: 448px;
  padding: 0 0 30px;
  background: var(--surface-1);
  border: 1px solid rgba(87, 179, 90, 0.12);
  border-radius: 28px;
  box-shadow: 0 24px 60px -20px rgba(36, 92, 54, 0.28), 0 4px 18px rgba(36, 92, 54, 0.08);
  overflow: hidden;
}

/* ---- decorative ambient blobs behind the whole card ---- */
.staff-auth-v2::before,
.staff-auth-v2::after {
  content: '';
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
}
.staff-auth-v2::before {
  width: 180px; height: 180px;
  top: -70px; inset-inline-end: -60px;
  background: radial-gradient(circle, rgba(255, 194, 71, 0.35), transparent 70%);
}
.staff-auth-v2::after {
  width: 140px; height: 140px;
  bottom: -50px; inset-inline-start: -50px;
  background: radial-gradient(circle, rgba(74, 144, 194, 0.18), transparent 70%);
}

/* ---- brand band ---- */
.staff-auth-band {
  position: relative;
  z-index: 1;
  padding: 34px 26px 30px;
  background: linear-gradient(135deg, #4fa653 0%, #3f9945 55%, #2f7a3a 100%);
  overflow: hidden;
  border-radius: 28px 28px 40% 40% / 28px 28px 26px 26px;
}
.staff-auth-band__glow {
  position: absolute;
  inset: -40% -20% auto auto;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 70%);
  pointer-events: none;
}
.staff-auth-band .login-brand { margin-bottom: 0; position: relative; z-index: 1; }
.staff-auth-band .login-brand .brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  width: 76px; height: 76px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 24px rgba(21, 54, 30, 0.25);
}
.staff-auth-band .login-brand .brand img {
  height: 40px; width: auto; filter: none;
}
.staff-auth-band .login-brand h1 {
  color: #fff;
  font-size: clamp(21px, 5vw, 25px);
  font-weight: 800;
  letter-spacing: -0.3px;
}
.staff-auth-band .login-brand p {
  color: rgba(255, 255, 255, 0.86);
  font-size: 13.5px;
  margin-top: 7px;
  max-width: 320px;
}

/* ---- form area ---- */
.staff-auth-v2 .auth-form-card {
  position: relative;
  z-index: 1;
  margin: 22px 22px 0;
  padding: 4px;
  border: 0;
  box-shadow: none;
  background: transparent;
  width: auto;
}
.staff-auth-v2 .auth-form-card form { padding: 0; }

.staff-auth-v2 .field { margin-bottom: 17px; }
.staff-auth-v2 .field-label {
  font-size: 13.5px;
  font-weight: 700;
  color: #2b3128;
  margin-bottom: 8px;
}
.staff-auth-v2 .auth-input-wrap,
.staff-auth-v2 .auth-input-wrap .input { min-height: 54px; }
.staff-auth-v2 .auth-input-wrap .input {
  border-radius: 16px;
  border: 1.5px solid #e6ebe3;
  background: #fbfcfa;
  padding-inline-end: 46px;
  font-size: 15px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.staff-auth-v2 .auth-input-wrap .input::placeholder { color: #a7ada2; }
.staff-auth-v2 .auth-input-wrap .input:focus {
  background: #fff;
  border-color: var(--rebox-green);
  box-shadow: 0 0 0 4px rgba(87, 179, 90, 0.14);
}
.staff-auth-v2 .auth-field-icon { color: #8b9587; font-size: 20px; }
.staff-auth-v2 .auth-input-wrap .pw-toggle {
  border-radius: 12px;
  border: 1px solid #e6ebe3;
  background: #fff;
  color: #3f9945;
  font-weight: 800;
}
.staff-auth-v2 .auth-input-wrap .pw-toggle:hover { background: #eef8ec; border-color: rgba(87,179,90,.4); }

.staff-auth-v2 .field-error {
  background: rgba(217, 48, 37, 0.08);
  color: #c22a20;
  border-radius: 13px;
  font-size: 13px;
}

.staff-auth-v2 .staff-submit,
.staff-auth-v2 .btn-primary {
  min-height: 54px;
  border-radius: 16px;
  font-size: 15.5px;
  background: linear-gradient(135deg, #5cb85f, #3f9945);
  box-shadow: 0 12px 26px -8px rgba(63, 153, 69, 0.55);
  transition: transform 0.12s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.staff-auth-v2 .btn-primary:hover { opacity: 1; box-shadow: 0 16px 30px -8px rgba(63, 153, 69, 0.6); transform: translateY(-1px); }
.staff-auth-v2 .btn-primary:active { transform: translateY(0) scale(0.98); }

.staff-auth-v2 .auth-forgot-row { margin-top: 16px; }
.staff-auth-v2 .auth-forgot-link { color: #6f7a6b; font-weight: 700; }
.staff-auth-v2 .auth-forgot-link:hover { color: #2f7a3a; }

/* ---- protected-access note ---- */
.staff-login-page .staff-login-security {
  max-width: 448px;
  margin: 16px auto 0;
  border: 1px solid rgba(87, 179, 90, 0.16);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(36, 92, 54, 0.05);
}
.staff-login-page .staff-login-security > .icon { color: #3f9945; }
.staff-login-page .staff-login-security strong { color: #2b3128; }

/* ---- responsive ---- */
@media (min-width: 768px) {
  .staff-auth-v2 { max-width: 480px; }
  .staff-auth-band { padding: 42px 32px 34px; }
  .staff-auth-v2 .auth-form-card { margin: 26px 30px 0; }
  .staff-login-page .staff-login-security { max-width: 480px; }
}

@media (max-width: 400px) {
  .staff-auth-v2 { border-radius: 24px; }
  .staff-auth-band { padding: 28px 18px 26px; border-radius: 24px 24px 36% 36% / 24px 24px 22px 22px; }
  .staff-auth-v2 .auth-form-card { margin-inline: 16px; }
}

@media (max-width: 600px) {
  body.staff-login-page {
    padding: 16px 10px;
  }
  /* auth-tokens.css turns this into an edge-to-edge, square-cornered sheet
     on small screens (its rule uses !important on max-width only). We want
     a deliberate floating rounded card instead, so every property that
     shapes it is restated explicitly here rather than relied on to "win"
     by load order against a file this one does not control. */
  .staff-auth-v2 {
    width: calc(100% - 20px);
    max-width: 460px;
    margin: 10px auto;
    min-height: 0;
    border-radius: 26px;
  }
  .staff-auth-band {
    padding: 28px 18px 26px;
    border-radius: 26px 26px 36% 36% / 26px 26px 22px 22px;
  }
  .staff-auth-v2 .auth-form-card { margin-inline: 16px; }
}