/**
 * Login hub (login.html) — 3-Layer Glassmorphism
 * Layer 1 — body pad gradient
 * Layer 2 — .card translucent glass
 * Layer 3 — role buttons + theme select floating glass
 *
 * Loads AFTER theme-light so Light mode is not opaque white.
 */

/* L1/L2/L3 paint from staff-glass-master.css — change master only */
body.hub-role-page {
  --hub-ink: var(--glass-ink, #f1f5f9);
  --hub-muted: var(--glass-muted, #94a3b8);
  --hub-l1: var(--glass-l1-pad);
  --hub-l2-bg: var(--glass-l2-bg);
  --hub-l2-blur: var(--glass-l2-blur);
  --hub-l2-border: var(--glass-l2-border);
  --hub-l2-border-top: var(--glass-l2-border-top);
  --hub-l2-shadow: var(--glass-l2-shadow);
  --hub-l3-bg: var(--glass-l3-bg);
  --hub-l3-border: var(--glass-l3-border);
  --hub-l3-shadow: var(--glass-l3-shadow);
}

html[data-theme="light"] body.hub-role-page {
  --hub-ink: var(--glass-ink, #0f172a);
  --hub-muted: var(--glass-muted, #334155);
}

/* Layer 1 */
html body.hub-role-page,
html[data-theme="light"] body.hub-role-page {
  margin: 0 !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.25rem !important;
  background: var(--hub-l1) !important;
  background-image: var(--hub-l1) !important;
  background-attachment: fixed !important;
  color: var(--hub-ink) !important;
}

/* Layer 2 — glass card */
html body.hub-role-page .card,
html[data-theme="light"] body.hub-role-page .card {
  width: min(440px, 100%) !important;
  padding: 2rem 1.75rem 1.5rem !important;
  border-radius: 20px !important;
  text-align: center !important;
  background: var(--hub-l2-bg) !important;
  background-image: none !important;
  -webkit-backdrop-filter: var(--hub-l2-blur) !important;
  backdrop-filter: var(--hub-l2-blur) !important;
  border: var(--hub-l2-border) !important;
  border-top: var(--hub-l2-border-top) !important;
  box-shadow: var(--hub-l2-shadow) !important;
  color: var(--hub-ink) !important;
}

html body.hub-role-page .brand,
html[data-theme="light"] body.hub-role-page .brand {
  color: var(--hub-ink) !important;
}

html body.hub-role-page .sub,
html body.hub-role-page .hint,
html[data-theme="light"] body.hub-role-page .sub,
html[data-theme="light"] body.hub-role-page .hint {
  color: var(--hub-muted) !important;
  opacity: 1 !important;
}

/* Layer 3 — theme switch + role buttons */
html body.hub-role-page .ui-theme-switch__select,
html[data-theme="light"] body.hub-role-page .ui-theme-switch__select {
  background: var(--hub-l3-bg) !important;
  border: var(--hub-l3-border) !important;
  border-top-color: rgba(255, 255, 255, 0.7) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: var(--hub-l3-shadow) !important;
  color: var(--hub-ink) !important;
}

html body.hub-role-page .btn,
html[data-theme="light"] body.hub-role-page .btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 0.9rem 1rem !important;
  border-radius: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-top-color: rgba(255, 255, 255, 0.65) !important;
  box-shadow: var(--hub-l3-shadow) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease !important;
}

html body.hub-role-page .btn--admin,
html[data-theme="light"] body.hub-role-page .btn--admin {
  background: rgba(37, 99, 235, 0.45) !important;
}

html body.hub-role-page .btn--agent,
html[data-theme="light"] body.hub-role-page .btn--agent {
  background: rgba(5, 150, 105, 0.45) !important;
}

html body.hub-role-page .btn--sub-agent,
html[data-theme="light"] body.hub-role-page .btn--sub-agent {
  background: rgba(91, 33, 182, 0.45) !important;
}

html body.hub-role-page .btn--member,
html[data-theme="light"] body.hub-role-page .btn--member {
  background: rgba(124, 58, 237, 0.45) !important;
}

/* Light L3 — richer tinted glass (match Dark depth) */
html[data-theme="light"] body.hub-role-page .btn--admin {
  background:
    linear-gradient(180deg, rgba(96, 165, 250, 0.55) 0%, rgba(37, 99, 235, 0.72) 100%) !important;
}
html[data-theme="light"] body.hub-role-page .btn--agent {
  background:
    linear-gradient(180deg, rgba(52, 211, 153, 0.5) 0%, rgba(5, 150, 105, 0.7) 100%) !important;
}
html[data-theme="light"] body.hub-role-page .btn--sub-agent {
  background:
    linear-gradient(180deg, rgba(167, 139, 250, 0.55) 0%, rgba(91, 33, 182, 0.72) 100%) !important;
}
html[data-theme="light"] body.hub-role-page .btn--member {
  background:
    linear-gradient(180deg, rgba(192, 132, 252, 0.55) 0%, rgba(124, 58, 237, 0.72) 100%) !important;
}

html[data-theme="light"] body.hub-role-page .btn {
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  border-top-color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.35) !important;
  box-shadow:
    0 8px 22px rgba(30, 64, 175, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}

html[data-theme="light"] body.hub-role-page .ui-theme-switch__select {
  background: rgba(255, 255, 255, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  border-top-color: #fff !important;
  box-shadow: var(--hub-l3-shadow) !important;
}

html[data-theme="light"] body.hub-role-page .btn:hover {
  box-shadow:
    0 12px 28px rgba(30, 64, 175, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

html body.hub-role-page .btn:hover,
html[data-theme="light"] body.hub-role-page .btn:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.08) !important;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}