/* ============================================================
   CSB Heap Design — Patch 3 v3
   ------------------------------------------------------------
   Login screen — full mockup match.
   - Hide blue logo, replace with CSS-drawn "CSB" mint badge
   - Add "Welcome back" serif header
   - Add OR divider between Google and PIN
   - Add "PIN" mono label above the inputs
   - Add footer "Trouble signing in?" line
   - All visual: no position, no flex changes, no pointer-events
   ============================================================ */

/* ---------- Black canvas ---------- */
body:has(#login-screen:not(.hidden)) {
  background: #000000 !important;
}

#login-screen {
  background: #000000 !important;
}

/* ---------- The card ---------- */
#login-screen .login-card {
  background: #0a0a0a !important;
  border: 1px solid #1a1a1a !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6) !important;
  padding: 36px 32px 28px !important;
}

/* ---------- HIDE the blue logo ---------- */
#login-screen .login-card img {
  display: none !important;
}

/* ---------- ADD: CSS-drawn "CSB" green badge above the subtitle ----------
   We attach this as a ::before on the subtitle since it's the first
   visible element after the (now hidden) logo. */
#login-screen .login-subtitle {
  position: relative !important;
  /* Push the subtitle text down to make room for our pseudo-elements */
  padding-top: 90px !important;
  font-size: 13px !important;
  color: #999999 !important;
  margin-bottom: 20px !important;
}

#login-screen .login-subtitle::before {
  content: 'CSB' !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 44px !important;
  height: 44px !important;
  background: #3ecf8e !important;
  color: #000000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
  border-radius: 4px !important;
}

/* ---------- ADD: "Welcome back" serif header ---------- */
#login-screen .login-subtitle::after {
  content: 'Welcome back' !important;
  position: absolute !important;
  top: 56px !important;
  left: 0 !important;
  right: 0 !important;
  font-family: ui-serif, Georgia, 'Times New Roman', serif !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  color: #fafafa !important;
  letter-spacing: -0.3px !important;
  text-align: center !important;
}

/* ---------- Google button container (unchanged from v2) ---------- */
#login-screen #google-signin-btn {
  background: #ffffff !important;
  border: 1px solid #1a1a1a !important;
  border-radius: 4px !important;
  padding: 4px !important;
  margin: 16px 0 !important;
}

/* ---------- "Sign in with PIN instead" link gets the OR divider ----------
   We use a ::before on .admin-link to draw a line + "OR" + line above it. */
#login-screen .admin-link {
  position: relative !important;
  color: #999999 !important;
  font-size: 13px !important;
  text-decoration: underline !important;
  text-decoration-color: #2a2a2a !important;
  text-underline-offset: 4px !important;
  margin-top: 32px !important;
  padding-top: 28px !important;
}

#login-screen .admin-link::before {
  content: 'OR' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  color: #525252 !important;
  text-align: center !important;
  background-image: linear-gradient(to right, transparent 0%, transparent 40%, #1a1a1a 40%, #1a1a1a 45%, transparent 45%, transparent 55%, #1a1a1a 55%, #1a1a1a 60%, transparent 60%, transparent 100%) !important;
  background-size: 100% 1px !important;
  background-position: center 5px !important;
  background-repeat: no-repeat !important;
  text-decoration: none !important;
  cursor: default !important;
  pointer-events: none !important;
}

#login-screen .admin-link:hover {
  color: #3ecf8e !important;
  text-decoration-color: #3ecf8e !important;
}

/* ---------- "PIN" mono label above the input row ----------
   The pin-login-section wraps both .pin-input-group and .login-btn.
   We add the label as ::before on .pin-input-group. */
#login-screen .pin-input-group {
  position: relative !important;
  padding-top: 22px !important;
  margin-top: 8px !important;
}

#login-screen .pin-input-group::before {
  content: 'PIN' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 1.5px !important;
  color: #999999 !important;
  text-transform: uppercase !important;
}

/* ---------- PIN input boxes ---------- */
#login-screen .pin-digit {
  background: #000000 !important;
  border: 1px solid #1a1a1a !important;
  color: #fafafa !important;
  border-radius: 4px !important;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
}
#login-screen .pin-digit:focus {
  border-color: #3ecf8e !important;
  box-shadow: 0 0 0 3px rgba(62, 207, 142, 0.15) !important;
  background: #000000 !important;
}
#login-screen .pin-digit.has-value {
  border-color: #3ecf8e !important;
  background: #000000 !important;
}

/* ---------- Log In button ---------- */
#login-screen .login-btn {
  background: #3ecf8e !important;
  color: #000000 !important;
  border-radius: 4px !important;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}
#login-screen .login-btn:hover {
  filter: brightness(1.1) !important;
  box-shadow: 0 4px 16px rgba(62, 207, 142, 0.25) !important;
}
#login-screen .login-btn:disabled {
  background: #1a1a1a !important;
  color: #525252 !important;
  filter: none !important;
  box-shadow: none !important;
}

/* ---------- PIN error ---------- */
#login-screen .pin-error {
  color: #ef4444 !important;
  font-size: 12px !important;
}

/* ---------- Footer "Trouble signing in?" line ----------
   We attach it as ::after on the .login-card itself so it
   appears at the bottom regardless of which sections are open. */
#login-screen .login-card {
  position: relative !important;
  padding-bottom: 64px !important; /* room for the footer */
}

#login-screen .login-card::after {
  content: 'Trouble signing in? Ask your manager.' !important;
  position: absolute !important;
  bottom: 20px !important;
  left: 0 !important;
  right: 0 !important;
  text-align: center !important;
  font-family: -apple-system, 'Inter', sans-serif !important;
  font-size: 11px !important;
  color: #525252 !important;
}

/* HOTFIX v3.1: Google container darker, remove PIN label */
#login-screen #google-signin-btn {
  background: transparent !important;
  border: 1px solid #1a1a1a !important;
  padding: 8px !important;
}
#login-screen .pin-input-group {
  padding-top: 0 !important;
}
#login-screen .pin-input-group::before {
  display: none !important;
}