/* Strong, page-scoped dark theme for login */
html.page-login, body.page-login {
  background: radial-gradient(1200px 600px at 50% -200px, rgba(123,97,255,.08), transparent 60%), #0a0a0a !important;
  color: #e5ecf2 !important;
  min-height: 100vh;
}

/* Ensure html also takes the class in case theme binds on html */
html.page-login { background-color: #0e1316 !important; }

/* Container spacing stays clean on small screens */
body.page-login .container { padding-left: 12px; padding-right: 12px; }

/* Accent used across the login page */
body.page-login {
  --login-accent: #7b61ff;       /* purple */
  --login-accent-2: #9a86ff;     /* lighter purple for glow */
  --login-bg: #0e1316;
  --login-surface: #131a20;
  --login-border: rgba(255,255,255,.08);
  --login-text: #e5ecf2;
  --login-text-dim: #9aa6af;
  --login-input-bg: #0f151a;
  --login-input-bd: #26303a;
  --login-radius: 10px;
}

/* Page spacing */
body.page-login section.module {
  padding-top: 56px;
  padding-bottom: 40px;
}

/* Center the login card in the viewport (both axes) */
body.page-login section.module {
  min-height: 100vh;
  display: flex;
  align-items: center;         /* vertical center */
  justify-content: center;     /* horizontal center (as fallback) */
  padding-top: 0;              /* avoid pushing it to the top */
  padding-bottom: 0;
}

body.page-login section.module > .container {
  flex: 1 1 auto;
  display: flex;
  align-items: center;         /* vertical center */
  justify-content: center;     /* horizontal center */
}

body.page-login section.module > .container > .row {
  width: 100%;
  justify-content: center;     /* keep current horizontal centering */
}

/* Login card with purple outline + glow */
body.page-login .login-card {
  background: var(--login-surface);
  border-radius: 14px;
  border: 1px solid var(--login-border);
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 0 2px rgba(123,97,255,.10); /* subtle base glow */
  transition: box-shadow .25s ease, transform .1s ease;
}

body.page-login .login-card:hover {
  box-shadow:
    0 14px 36px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 0 3px rgba(123,97,255,.18); /* purple glow */
  transform: translateY(-1px);
}

body.page-login .login-card__header { padding: 1.1rem 1.2rem .2rem; }
body.page-login .login-card__logo { height: 120px; opacity:.96; }
body.page-login .login-card__title {
  margin: .45rem 0 0;
  color: var(--login-text);
  font-weight: 700;
  letter-spacing:.2px;
}

body.page-login .login-card__body { padding: 1.1rem 1.2rem 1.25rem; }
body.page-login .login-card__body .form-group { margin-bottom: 1.05rem; }

/* Inputs: seamless icon + field (icon looks inside the box) */
body.page-login .input-group {
  align-items: stretch;
}

body.page-login .input-group-prepend .input-group-text {
  background: var(--login-input-bg);
  color: #c7d0d8;
  border: 1px solid var(--login-input-bd);
  border-right: 0;
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  padding: 0 .75rem;
  /* subtle inner separator on the right edge of the icon block */
  box-shadow: inset -1px 0 0 rgba(255,255,255,.06);
}

body.page-login .input-group .form-control {
  background: var(--login-input-bg);
  color: var(--login-text);
  border: 1px solid var(--login-input-bd);
  border-left: 0;
  height: 46px;
  padding: .55rem .9rem;
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
  /* Squarer pill radius */
  border-top-right-radius: var(--login-radius);
  border-bottom-right-radius: var(--login-radius);
}

/* Input font for username + password */
body.page-login .form-control {
  font-family: "Inter","Roboto","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  font-weight: 500;
}

/* Password: smaller, cleaner dots (WebKit) + slight letter spacing */
body.page-login input[type="password"] {
  -webkit-text-security: circle; /* smaller hollow dots */
  text-security: circle;
  letter-spacing: .06em;
}

body.page-login .input-group .form-control::placeholder { color:#8fa1b2; }

/* Options row: more space below actions and before options */
body.page-login .login-card__actions { margin-bottom: 34px; }
body.page-login .login-card__meta {
  margin-top: 20px;
  row-gap: .6rem;
}

/* Lay out the three options evenly across the row */
body.page-login .login-card__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  column-gap: 12px;
}

/* Remove chip circles, make subtle, small, and ALL CAPS */
body.page-login .login-card__remember {
  display: inline-flex; align-items: center; cursor: pointer; gap: .45rem;
}
body.page-login .login-card__remember input.login-check {
  margin: 0 .45rem 0 0; width: 14px; height: 14px; accent-color: var(--login-accent);
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid #3a4653;
  border-radius: 3px;
  background: var(--login-input-bg);
  display: inline-block;
  position: relative;
  cursor: pointer;
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
body.page-login .login-card__remember input.login-check:hover {
  border-color: var(--login-accent);
  box-shadow: 0 0 0 3px rgba(123,97,255,.18);
}
body.page-login .login-card__remember input.login-check:checked {
  background: var(--login-accent);
  border-color: var(--login-accent);
  box-shadow: 0 0 0 3px rgba(123,97,255,.18);
}
/* Optional tiny check mark */
body.page-login .login-card__remember input.login-check:checked::after {
  content: '';
  position: absolute;
  left: 3px; top: 1px;
  width: 6px; height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

body.page-login .login-card__actions { margin-bottom: 34px; }
body.page-login .login-card__meta {
  margin-top: 20px;
  row-gap: .6rem;
}

/* Flatten links so both anchors become grid items (columns 2 and 3) */
body.page-login .login-card__links { display: contents; }
body.page-login .login-card__links .sep { display: none; }

/* Subtle, smaller, darker ALL CAPS text for all three options */
body.page-login .login-card__remember label,
body.page-login .login-card__links a {
  text-transform: uppercase;
  font-size: .62rem;
  letter-spacing: .9px;
  color: #798491; /* darker, more subtle */
  margin: 0;
  padding: 0;
}

/* Remove any residual boxes/borders from links */
body.page-login .login-card__links a {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
body.page-login .login-card__links a:hover {
  color: #9aa6af;
}

/* Make the card a touch taller so options sit lower */
body.page-login .login-card__body { padding-bottom: 1.75rem; }

/* Ensure icon + input heights still match nicely */
body.page-login .input-group .form-control,
body.page-login .input-group-prepend .input-group-text { height: 48px; }

/* Improve clickable area: clicking wrapper toggles checkbox (JS already added) */
body.page-login .login-card__remember:hover { opacity: .98; }

/* Buttons: pill + purple primary */
body.page-login .btn {
  border-radius: 999px;
  font-weight: 700;
  letter-spacing:.2px;
  padding: .6rem 1rem;
}

body.page-login .btn.btn-primary {
  background: linear-gradient(135deg, var(--login-accent), var(--login-accent-2));
  border: 1px solid rgba(255,255,255,.06);
  color: #fff;
  box-shadow: 0 8px 18px rgba(123,97,255,.25);
}

body.page-login .btn.btn-primary:hover {
  filter: brightness(1.04);
  box-shadow: 0 10px 22px rgba(123,97,255,.32);
}

body.page-login .btn.btn-outline-accent {
  color: var(--login-text);
  border: 1px solid #3a4653;
  background: transparent;
}

body.page-login .btn.btn-outline-accent:hover {
  background: #1b242d;
}

/* Links */
body.page-login .login-card__links a { color: #c5d0db; }
body.page-login .login-card__links a:hover { color: #fff; text-decoration:none; }

/* Remember me alignment */
body.page-login .login-card__meta {
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; margin-top:.35rem;
}

/* Alerts */
body.page-login .alert-danger {
  background: rgba(255, 77, 77, .1);
  color: #ff9a9a;
  border-color: rgba(255,77,77,.35);
  border-radius: 10px;
}

/* Footer strip */
body.page-login .login-minibar {
  position: fixed; left: 0; right: 0; bottom: 10px;
  display:flex; gap:.6rem; align-items:center; justify-content:center;
  color: var(--login-text-dim); font-size:.9rem;
  pointer-events:none;
}

body.page-login .login-minibar__logo { height: 22px; opacity:.85; }

/* Container widths on small screens */
@media (max-width: 576px) {
  body.page-login .container { padding-left: 16px; padding-right: 16px; }
  body.page-login .login-card__body { padding: 1rem 1rem 1.15rem; }
}

/* --- Bring back the purple glow effects on hover and while typing --- */

/* Smooth transitions on the pill parts */
body.page-login .input-group .form-control,
body.page-login .input-group-prepend .input-group-text {
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}

/* Hover: subtle purple ring around the whole pill (icon + input) */
body.page-login .input-group:hover .input-group-text,
body.page-login .input-group:hover .form-control {
  border-color: var(--login-accent);
  box-shadow: 0 0 0 2px rgba(123,97,255,.14);
}

/* Focus/typing: stronger unified ring + accent border */
body.page-login .input-group:focus-within .input-group-text,
body.page-login .input-group:focus-within .form-control {
  border-color: var(--login-accent);
  box-shadow: 0 0 0 3px rgba(123,97,255,.26);
}

/* When the field has content, keep a lighter glow so it still feels active */
body.page-login .input-group .form-control:not(:placeholder-shown) {
  border-color: var(--login-accent-2);
  box-shadow: 0 0 0 2px rgba(123,97,255,.16);
}

/* Caret and selection to match accent */
body.page-login .input-group .form-control {
  caret-color: var(--login-accent-2);
}
body.page-login .input-group .form-control::selection {
  background: rgba(123,97,255,.28);
  color: #fff;
}

/* Keep the icon slightly brighter when active */
body.page-login .input-group:focus-within .input-group-text i {
  color: #e5e9f0;
}

/* Autofill fix so the purple glow stays consistent */
body.page-login .input-group .form-control:-webkit-autofill,
body.page-login .input-group .form-control:-webkit-autofill:hover,
body.page-login .input-group .form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--login-text);
  -webkit-box-shadow: 0 0 0 30px var(--login-input-bg) inset !important;
  box-shadow: 0 0 0 30px var(--login-input-bg) inset !important;
  transition: background-color 9999s ease-out 0s;
}

/* Background: purer black + subtle purple vignette */
html.page-login, body.page-login {
  background: radial-gradient(1200px 600px at 50% -200px, rgba(123,97,255,.08), transparent 60%), #0a0a0a !important;
  color: #e5ecf2 !important;
  min-height: 100vh;
}

/* Active-input surface */
body.page-login {
  --login-input-bg-active: #121a21;
}

/* Login card: faint purple glow by default */
body.page-login .login-card {
  background: var(--login-surface);
  border-radius: 14px;
  border: 1px solid var(--login-border);
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 0 2px rgba(123,97,255,.10); /* subtle base glow */
  transition: box-shadow .25s ease, transform .1s ease;
}

/* Brighter card glow while any field inside is focused (modern browsers) */
body.page-login .login-card:has(input:focus, input:focus-visible) {
  box-shadow:
    0 14px 36px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 0 4px rgba(123,97,255,.28);
  transform: translateY(-1px);
}

/* Input + icon pills transition */
body.page-login .input-group .form-control,
body.page-login .input-group-prepend .input-group-text {
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}

/* Hover: subtle ring only while hovering the group */
body.page-login .input-group:hover .input-group-text,
body.page-login .input-group:hover .form-control {
  border-color: var(--login-accent);
  box-shadow: 0 0 0 2px rgba(123,97,255,.14);
}

/* Focus/typing (active): stronger unified ring only while focused */
body.page-login .input-group:focus-within .input-group-text,
body.page-login .input-group:focus-within .form-control {
  border-color: var(--login-accent);
  box-shadow: 0 0 0 3px rgba(123,97,255,.26);
  background: var(--login-input-bg-active);
}

/* REMOVE persistent glow after typing (ensure no residual) */
body.page-login .input-group .form-control:not(:placeholder-shown) {
  box-shadow: none;
  border-color: var(--login-input-bd);
}

/* Slightly brighter icon while focused */
body.page-login .input-group:focus-within .input-group-text i { color: #e5e9f0; }

/* Caret and selection match accent */
body.page-login .input-group .form-control { caret-color: var(--login-accent-2); }
body.page-login .input-group .form-control::selection { background: rgba(123,97,255,.28); color: #fff; }

/* Autofill fix keeps consistent look */
body.page-login .input-group .form-control:-webkit-autofill,
body.page-login .input-group .form-control:-webkit-autofill:hover,
body.page-login .input-group .form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--login-text);
  -webkit-box-shadow: 0 0 0 30px var(--login-input-bg) inset !important;
  box-shadow: 0 0 0 30px var(--login-input-bg) inset !important;
  transition: background-color 9999s ease-out 0s;
}

/* Keep pills aligned (matches earlier sizing) */
body.page-login .input-group .form-control,
body.page-login .input-group-prepend .input-group-text { height: 48px; }

/* Tweaks: keep full-group glow while focused/typing, add separator line, squarer corners, more spacing, new input font, smaller password dots */

/* Squarer pill radius + separator line between icon and input */
body.page-login { --login-radius: 10px; }
body.page-login .input-group-prepend .input-group-text {
  border-top-left-radius: var(--login-radius);
  border-bottom-left-radius: var(--login-radius);
  /* subtle inner separator on the right edge of the icon block */
  box-shadow: inset -1px 0 0 rgba(255,255,255,.06);
}
body.page-login .input-group .form-control {
  border-top-right-radius: var(--login-radius);
  border-bottom-right-radius: var(--login-radius);
}

/* Keep the purple ring ON for the entire group while focused/typing */
body.page-login .input-group:focus-within .input-group-text,
body.page-login .input-group:focus-within .form-control {
  border-color: var(--login-accent);
  box-shadow: 0 0 0 3px rgba(123,97,255,.26);
  background: var(--login-input-bg-active);
}
/* If content is present AND focused, do NOT cancel the glow */
body.page-login .input-group:focus-within .form-control:not(:placeholder-shown) {
  border-color: var(--login-accent);
  box-shadow: 0 0 0 3px rgba(123,97,255,.26);
}

/* When not focused, remove any residual ring */
body.page-login .input-group:not(:focus-within) .form-control,
body.page-login .input-group:not(:focus-within) .input-group-text {
  box-shadow: none;
  border-color: var(--login-input-bd);
}

/* Make input background subtly brighter only during focus */
body.page-login .input-group:focus-within .form-control { background: var(--login-input-bg-active); }

/* Slightly brighter icon only while focused */
body.page-login .input-group:focus-within .input-group-text i { color: #e5e9f0; }