/* ──────────────────────────────────────────────────────────────────
   RCHub Login – CSP-sikker styling udtrukket fra login.php
   Struktur: sidebase → kort → formular → handlinger → mobile overflow-værn.
   ────────────────────────────────────────────────────────────────── */
html, body {
  margin:0;
  background:#0d1822;
  padding:0;
  min-height:100vh;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

body {
  min-height:100dvh;
  background: radial-gradient(circle at top,#1e4976 0%,#1c2f40 48%,#0d1822 100%);
  font-family:'Source Sans 3',system-ui,sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:max(18px, env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) max(18px, env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
  box-sizing:border-box;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior-x:none;
  -webkit-overflow-scrolling:touch;
}

body *, body *::before, body *::after {
  box-sizing:border-box;
}

.lcard > .admin-login-logo {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 0 36px !important;
  padding: 0 !important;
  text-align: center !important;
}

.lcard > .admin-login-logo > img {
  display: block !important;
  max-width: 240px !important;
  max-height: 160px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  float: none !important;
  position: static !important;
}

.admin-login-title-wrap {
  width: 100%;
  text-align: center;
  margin: 10px 0 24px;
}

.admin-login-title {
  display: block;
  width: 100%;
  margin: 0 0 24px;
  text-align: center;
  color: rgba(255,255,255,.88);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.15;
}

.login-create-club-link {
  text-align: center;
  margin-top: 16px;
}

.login-create-club-link .llink {
  display: inline-block;
  color: rgba(255,255,255,.72);
}

.login-create-club-link .llink:hover, .login-create-club-link .llink:focus-visible {
  color: #fff;
}

:root {
  --login-input-bg:#506479;
  --login-input-bg-solid:#506479;
  --login-input-border:rgba(255,255,255,.13);
}

.lbox {
  width:min(430px,calc(100vw - 36px));
  max-width:100%;
  min-width:0;
  flex-shrink:0
}

.lcard {
  width:100%;
  max-width:100%;
  overflow:hidden
}

.lhd {
  text-align:center;
  margin-bottom:24px
}

.lclub {
  color:#fff;
  font-size:1.05rem;
  font-weight:700;
  margin:0 0 5px;
  line-height:1.25
}

.lsub {
  color:rgba(255,255,255,.62);
  font-size:.78rem;
  margin:0
}

.lcard {
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.15);
  border-radius:24px;
  box-shadow:0 24px 70px rgba(0,0,0,.28);
  padding:32px 30px;
  color:#fff;
  backdrop-filter:blur(18px)
}

/*
 * Iframe login shell
 *
 * A standalone login card is deliberately translucent because it sits on the
 * dark login gradient. In an iframe the host controls the page background;
 * keeping that translucency makes the host's light background wash through
 * the card. Match the public member login's iframe surface instead: the
 * surrounding iframe stays transparent, while the card itself is a stable,
 * readable blue surface.
 */
html.embedded-frame,
html.embedded-frame body {
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
}

html.embedded-frame .lcard {
  background:rgba(51,65,85,.96) !important;
  border-color:rgba(255,255,255,.16) !important;
  box-shadow:0 24px 70px rgba(15,23,42,.26) !important;
  color:#fff !important;
}

html.embedded-frame .lfi {
  background:#506479 !important;
  background-color:#506479 !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

.llbl {
  display:block;
  color:rgba(255,255,255,.58);
  font-size:.69rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:6px
}

.lfi {
  width:100%;
  box-sizing:border-box;
  padding:11px 14px;
  border-radius:8px;
  border:1.5px solid var(--login-input-border);
  background:var(--login-input-bg)!important;
  background-color:var(--login-input-bg)!important;
  background-image:none!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff;
  caret-color:#fff;
  color-scheme:dark;
  font-size:.85rem;
  font-family:'Source Sans 3',system-ui,sans-serif;
  outline:none;
  -webkit-appearance:none;
  appearance:none;
  transition:border-color .2s,box-shadow .2s,background-color .2s
}

.lfi:hover,.lfi:focus,.lfi:active {
  background:var(--login-input-bg)!important;
  background-color:var(--login-input-bg)!important;
  background-image:none!important;
  border-color:var(--login-input-border)!important;
  box-shadow:none!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff
}

.lfi:-webkit-autofill,.lfi:-webkit-autofill:hover,.lfi:-webkit-autofill:focus,.lfi:-webkit-autofill:active {
  -webkit-text-fill-color:#fff!important;
  caret-color:#fff!important;
  -webkit-box-shadow:0 0 0 1000px var(--login-input-bg-solid) inset!important;
  box-shadow:0 0 0 1000px var(--login-input-bg-solid) inset!important;
  border:1.5px solid var(--login-input-border)!important;
  background-color:var(--login-input-bg-solid)!important;
  background-image:none!important;
  transition:background-color 999999s ease-in-out 0s,color 999999s ease-in-out 0s
}

.lfi:autofill {
  box-shadow:0 0 0 1000px var(--login-input-bg-solid) inset!important;
  -webkit-text-fill-color:#fff!important;
  caret-color:#fff!important;
  background-color:var(--login-input-bg-solid)!important;
  background-image:none!important
}

.lpwrap {
  position:relative
}

.lpwrap .lfi {
  padding-right:44px
}

.lpwtog {
  position:absolute;
  right:11px;
  top:50%;
  transform:translateY(-50%);
  border:none;
  background:transparent;
  color:rgba(255,255,255,.68);
  cursor:pointer;
  padding:4px;
  font-size:.92rem
}

.lpwtog:hover {
  color:#fff
}

.lbtn {
  width:100%;
  padding:11px 16px;
  margin-top:4px;
  border-radius:8px;
  border:none;
  background:#1e4976;
  color:#fff;
  font-size:.9rem;
  font-weight:700;
  cursor:pointer;
  letter-spacing:.02em
}

.lbtn:hover {
  background:#163860
}

.lerr,.lok {
  font-size:.78rem;
  text-align:center;
  padding:10px 12px;
  border-radius:10px;
  margin:8px 0 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px
}

.lerr {
  color:#fecaca;
  background:rgba(192,57,43,.16);
  border:1px solid rgba(252,165,165,.34)
}

.lok {
  color:#86efac;
  background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.25)
}

.llink {
  background:none;
  border:none;
  color:rgba(255,255,255,.4);
  font-size:.73rem;
  cursor:pointer;
  font-family:inherit;
  padding:4px;
  text-decoration:underline;
  text-underline-offset:2px
}

.llink:hover {
  color:rgba(255,255,255,.75)
}

.lsetup {
  margin-top:12px;
  padding:12px 14px;
  border-radius:8px;
  background:rgba(59,130,246,.14);
  border:1px solid rgba(59,130,246,.28);
  color:#bfdbfe;
  font-size:.75rem;
  text-align:center;
  line-height:1.6
}

.lsetup a {
  color:#bfdbfe;
  font-weight:700
}


/* RCHub shared authentication master — authoritative for every login entrypoint. */
body > .lbox { width:min(430px,calc(100vw - 36px)) !important; }
.lbox .lcard {
  width:100% !important;
  padding:32px 30px !important;
  border-radius:24px !important;
  background:rgba(255,255,255,.09) !important;
  border:1px solid rgba(255,255,255,.15) !important;
  box-shadow:0 24px 70px rgba(0,0,0,.28) !important;
}
.lcard > .admin-login-logo { margin:0 0 36px !important; min-height:160px; }
.lcard > .admin-login-logo > img { width:auto !important; height:auto !important; max-width:240px !important; max-height:160px !important; }
#loginForm, #forgotForm { display:block; margin:0; }
#loginForm > div:not(.lerr):not(.lok), #forgotForm > div:not(.lerr):not(.lok),
#loginForm .form-row, #loginForm .form-row-password { margin:0 0 14px !important; }
#loginForm .forgot-link-row, #loginForm .csp-style-741eefcbea { margin:-2px 0 14px !important; text-align:center !important; }
.llbl { margin:0 0 6px !important; }
.lfi { height:46px !important; min-height:46px !important; padding:11px 14px !important; border-radius:8px !important; }
.lbtn { height:48px !important; min-height:48px !important; margin-top:4px !important; border-radius:8px !important; display:flex; align-items:center; justify-content:center; gap:6px; }
.login-create-club-link { margin-top:16px !important; }
@media (max-width:520px) {
  body { padding:18px !important; align-items:center !important; }
  body > .lbox { width:calc(100vw - 36px) !important; }
  .lbox .lcard { padding:32px 30px !important; }
}


/* Shared forgot-password state: same card, branding and spacing in every login system. */
.auth-forgot-card > .admin-login-logo {
  margin-bottom:24px !important;
  min-height:132px !important;
}
.auth-forgot-card > .admin-login-logo > img {
  max-height:132px !important;
}
.auth-forgot-title {
  margin:0 0 12px;
  color:#fff;
  font-size:1.45rem;
  font-weight:800;
  line-height:1.2;
  text-align:center;
}
.auth-forgot-help {
  margin:0 0 22px;
  color:rgba(255,255,255,.72);
  font-size:.95rem;
  line-height:1.5;
  text-align:left;
}
#forgotForm .auth-forgot-field {
  margin:0 0 14px !important;
}
.auth-forgot-back {
  margin:16px 0 0;
  text-align:center;
}
.auth-forgot-back .llink {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}

/* Standalone member.php uses the regular application shell around the shared
   authentication card. Neutralise only that shell so the common login UI is
   rendered identically to the dedicated authentication entry points. */
body.member-login-shell {
  display:block;
  padding:0;
}

body.member-login-shell .app {
  min-height:100dvh;
  width:100%;
  max-width:100%;
  background:transparent !important;
  box-shadow:none !important;
  display:flex;
  align-items:center;
  justify-content:center;
}

body.member-login-shell header {
  display:none !important;
}

body.member-login-shell .main {
  width:100%;
  max-width:100%;
  min-height:100dvh;
  margin:0 !important;
  padding:max(18px, env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) max(18px, env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px)) !important;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}

body.member-login-shell .member-join-link {
  margin:14px 0 0;
  text-align:center;
  color:rgba(255,255,255,.62);
  font-size:.78rem;
  line-height:1.45;
}

body.member-login-shell .member-join-link a {
  color:rgba(255,255,255,.72);
  text-decoration:underline;
  text-underline-offset:2px;
}

body.member-login-shell .member-join-link a:hover,
body.member-login-shell .member-join-link a:focus-visible {
  color:#fff;
}

/* Premium auth panels: keep credential fields consistently dark blue,
   including browser autofill and embedded member login. */
.auth-panel .lfi,
.auth-panel .lfi:hover,
.auth-panel .lfi:focus,
.auth-panel .lfi:active {
  background:#051c34 !important;
  background-color:#051c34 !important;
  background-image:none !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

.auth-panel .lfi:-webkit-autofill,
.auth-panel .lfi:-webkit-autofill:hover,
.auth-panel .lfi:-webkit-autofill:focus,
.auth-panel .lfi:-webkit-autofill:active,
.auth-panel .lfi:autofill {
  -webkit-text-fill-color:#fff !important;
  caret-color:#fff !important;
  -webkit-box-shadow:0 0 0 1000px #051c34 inset !important;
  box-shadow:0 0 0 1000px #051c34 inset !important;
  background-color:#051c34 !important;
  background-image:none !important;
}