/* CoachIQ look for Moodle's own login pages (log in, forgotten password,
   change password). Only loaded on pages using the "login" layout, and every
   rule is scoped to body.pagelayout-login so nothing else in Moodle changes.
   The form, its fields and how it submits are Moodle's, untouched. */

body.pagelayout-login {
  --ciq-ground: #0B0C0C;
  --ciq-card: #161919;
  --ciq-well: #0F1111;
  --ciq-line: #1E2222;
  --ciq-line-2: #2C3232;
  --ciq-ink: #F3F5F4;
  --ciq-ink-2: #C7CECB;
  --ciq-muted: #8E9895;
  --ciq-font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background:
    radial-gradient(900px 480px at 50% -10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    var(--ciq-ground) !important;
  background-attachment: fixed !important;
  color: var(--ciq-ink);
  font-family: var(--ciq-font);
  min-height: 100vh;
}
html:has(body.pagelayout-login) { background: var(--ciq-ground, #0B0C0C); }
body.pagelayout-login #page-wrapper,
body.pagelayout-login #page,
body.pagelayout-login #page-content,
body.pagelayout-login #region-main-box,
body.pagelayout-login #region-main { background: transparent !important; border: 0 !important; box-shadow: none !important; }
body.pagelayout-login #page { padding-top: 0 !important; }

body.pagelayout-login .login-wrapper {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 16px;
}
body.pagelayout-login .login-container {
  width: 100%; max-width: 440px; margin: 0 auto; padding: 36px 32px 28px !important;
  background: var(--ciq-card) !important; color: var(--ciq-ink);
  border: 1px solid var(--ciq-line); border-radius: 20px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55) !important;
}

/* Logo: the hook adds the CoachIQ brand logo above the form when one is uploaded. */
body.pagelayout-login .login-logo { margin-bottom: 24px; text-align: center; }
body.pagelayout-login .login-logo img { max-height: 48px; width: auto; }

body.pagelayout-login h1,
body.pagelayout-login h2,
body.pagelayout-login .login-heading {
  font-family: var(--ciq-font); color: var(--ciq-ink); font-weight: 800; font-stretch: 125%;
}
body.pagelayout-login .login-heading { font-size: 22px; line-height: 1.2; text-align: center; margin-bottom: 22px !important; }
body.pagelayout-login h2.login-heading { font-size: 16px; text-align: left; margin-bottom: 10px !important; }

body.pagelayout-login .form-control,
body.pagelayout-login input[type="text"],
body.pagelayout-login input[type="email"],
body.pagelayout-login input[type="password"] {
  background: var(--ciq-well) !important; color: var(--ciq-ink) !important;
  border: 1.5px solid var(--ciq-line-2) !important; border-radius: 12px !important;
  min-height: 52px; font: 500 16px var(--ciq-font); box-shadow: none !important;
}
body.pagelayout-login .form-control::placeholder { color: var(--ciq-muted); opacity: 1; }
body.pagelayout-login .form-control:focus { border-color: var(--accent) !important; outline: none; }
body.pagelayout-login input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 40px var(--ciq-well) inset !important; -webkit-text-fill-color: var(--ciq-ink) !important;
}

body.pagelayout-login .btn {
  font: 700 15px var(--ciq-font); border-radius: 12px; min-height: 46px; padding: 0 22px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
body.pagelayout-login .btn-primary,
body.pagelayout-login #loginbtn {
  background: var(--accent) !important; border-color: var(--accent) !important; color: var(--on-accent) !important;
}
body.pagelayout-login #loginbtn { width: 100%; min-height: 52px; font-size: 16px; }
body.pagelayout-login .btn-primary:hover,
body.pagelayout-login #loginbtn:hover { filter: brightness(1.08); }
body.pagelayout-login .btn-secondary {
  background: transparent !important; color: var(--ciq-ink) !important; border: 1px solid var(--ciq-line-2) !important;
}
body.pagelayout-login .btn-secondary:hover { background: var(--ciq-well) !important; }
body.pagelayout-login .btn:focus-visible,
body.pagelayout-login a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }

body.pagelayout-login a { color: var(--accent); }
body.pagelayout-login .login-form-forgotpassword { text-align: center; }
body.pagelayout-login .login-form-forgotpassword a { color: var(--ciq-ink-2); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
body.pagelayout-login .login-divider { border-top: 1px solid var(--ciq-line); margin: 20px 0; }
body.pagelayout-login .login-instructions,
body.pagelayout-login .text-muted,
body.pagelayout-login label,
body.pagelayout-login .form-text { color: var(--ciq-ink-2) !important; }
body.pagelayout-login .alert { border-radius: 12px; border: 0; font-size: 14px; }
body.pagelayout-login .alert-danger { background: color-mix(in srgb, #FF6A4D 16%, var(--ciq-card)); color: #FFB3A3; }
body.pagelayout-login .alert-info,
body.pagelayout-login .alert-success { background: color-mix(in srgb, var(--accent) 12%, var(--ciq-card)); color: var(--ciq-ink); }

/* Forgotten / change password forms (Moodle form layout). */
body.pagelayout-login .mform fieldset { border: 0; padding: 0; }
body.pagelayout-login .mform legend,
body.pagelayout-login .mform .ftoggler a { color: var(--ciq-ink) !important; font: 700 16px var(--ciq-font); }
body.pagelayout-login .mform .col-md-3,
body.pagelayout-login .mform .col-md-9 { flex: 0 0 100%; max-width: 100%; }
body.pagelayout-login .box.generalbox,
body.pagelayout-login .box.py-3 { background: transparent; color: var(--ciq-ink-2); }

/* Moodle's footer (help and "powered by" links) isn't needed on a login screen. */
body.pagelayout-login #page-footer,
body.pagelayout-login .btn-footer-popover,
body.pagelayout-login .footer-popover { display: none !important; }

@media (max-width: 480px) {
  body.pagelayout-login .login-wrapper { padding: 16px; align-items: flex-start; }
  body.pagelayout-login .login-container { padding: 28px 20px 22px !important; border-radius: 16px !important; }
}