/**
 * Login by Alee — authentication page design.
 *
 * Sections 1-13 are the original design stylesheet, scoped to .login-by-alee.
 * Section 14 holds the classes that replace the design's inline styles
 * (including the colours its script applied inline).
 * Section 15 is the sign-in error notice, which the mockup had no element for.
 */

/* ---------- 1. TOKENS ---------- */
:root {
  --bg: #FFFFFF;
  --panel: #F6F5F4;
  --border: #E5E4E2;
  --text: #3A3A3A;
  --text-muted: #6B6B6B;
  --accent: #B582BA;
  --accent-bg: #E0CBE2;

  --c-purple1: #E0CBE2; --c-purple1-text: #5F3762;
  --c-purple:  #B683BA; --c-purple-text:  #542E57;
  --c-lpurple: #B099C7; --c-lpurple-text: #422D58;
  --c-green:   #C1D83F; --c-green-text:   #647312;
  --c-orange:  #FAD294; --c-orange-text:  #845100;
  --c-teal:    #4AC3D4; --c-teal-text:    #15646F;
}

/* ---------- 2. BASE ---------- */
body.login-by-alee,
body.login-by-alee *,
body.login-by-alee *::before,
body.login-by-alee *::after { box-sizing: border-box; }

/* Targeted reset in place of a blanket `*` reset. */
body.login-by-alee h1,
body.login-by-alee h2,
body.login-by-alee h3,
body.login-by-alee h4,
body.login-by-alee h5,
body.login-by-alee h6,
body.login-by-alee p,
body.login-by-alee ul,
body.login-by-alee ol,
body.login-by-alee li,
body.login-by-alee figure,
body.login-by-alee blockquote,
body.login-by-alee pre,
body.login-by-alee hr,
body.login-by-alee fieldset,
body.login-by-alee form,
body.login-by-alee input,
body.login-by-alee select,
body.login-by-alee textarea,
body.login-by-alee button { margin: 0; }

body.login-by-alee h1,
body.login-by-alee h2,
body.login-by-alee h3,
body.login-by-alee h4,
body.login-by-alee h5,
body.login-by-alee h6,
body.login-by-alee p,
body.login-by-alee ul,
body.login-by-alee ol,
body.login-by-alee li,
body.login-by-alee figure,
body.login-by-alee blockquote,
body.login-by-alee form,
body.login-by-alee fieldset { padding: 0; }

body.login-by-alee {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #FAF9F8;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px;
  position: relative;
  overflow-x: hidden;
  margin: 0;
}

/* ---------- 3. DECORATIVE BACKGROUND CIRCLES ---------- */
.bg-shape-1 {
  position: absolute; width: 400px; height: 400px; border-radius: 50%;
  background: var(--c-purple1); opacity: 0.3; top: -100px; left: -100px; z-index: 0;
}
.bg-shape-2 {
  position: absolute; width: 350px; height: 350px; border-radius: 50%;
  background: var(--c-teal); opacity: 0.15; bottom: -80px; right: -80px; z-index: 0;
}

/* ---------- 4. HEADER LOGO BAR ---------- */
.auth-brand-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  z-index: 1;
}
.auth-brand-bar .logo-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--c-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(182, 131, 186, 0.3);
  flex-shrink: 0;
}
.auth-brand-bar span {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* ---------- 5. AUTH CONTAINER CARD ---------- */
.auth-card {
  background: var(--bg);
  width: 100%;
  max-width: 480px;
  border-radius: 20px;
  border: 5px solid var(--c-purple);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  padding: 36px 32px;
  z-index: 1;
  transition: all 0.2s ease;
}

/* ---------- 6. MODE TABS (Sign In / Register) ---------- */
.auth-tabs {
  display: flex;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 24px;
}
.auth-tab-btn {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.auth-tab-btn.active {
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* ---------- 7. ROLE SELECTOR PILLS ---------- */
.role-selector-group {
  margin-bottom: 22px;
}
.role-label {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.role-pills {
  display: flex;
  gap: 8px;
}
.role-pill {
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  border: 2px solid var(--border);
  background: var(--panel);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}
.role-pill:hover {
  border-color: var(--c-purple);
}
.role-pill.active {
  border-color: var(--c-purple);
  background: var(--accent-bg);
  color: var(--c-purple-text);
}

/* ---------- 8. FORM CONTROLS ---------- */
.form-group {
  margin-bottom: 18px;
}
.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.form-control {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  transition: all 0.15s ease;
}
.form-control:focus {
  outline: none;
  border-color: var(--c-purple);
  box-shadow: 0 0 0 3px rgba(182, 131, 186, 0.2);
}
.toggle-pw-btn {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

/* ---------- 9. FORM UTILITY ROW ---------- */
.form-options-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  margin-bottom: 22px;
}
.remember-me {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 600;
  user-select: none;
}
.remember-me input {
  accent-color: var(--c-purple);
  width: 16px;
  height: 16px;
}
.forgot-link {
  color: var(--c-purple-text);
  font-weight: 700;
  text-decoration: none;
}
.forgot-link:hover {
  text-decoration: underline;
  color: var(--c-purple-text);
}

/* ---------- 10. BUTTONS ---------- */
.btn-submit {
  width: 100%;
  padding: 13px;
  border-radius: 10px;
  border: none;
  background: var(--text);
  color: var(--bg);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  transition: opacity 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-submit:hover {
  opacity: 0.92;
}

/* ---------- 11. DIVIDER ---------- */
.auth-divider {
  display: none;
  align-items: center;
  text-align: center;
  margin: 22px 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}
.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--border);
}
.auth-divider span {
  padding: 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---------- 12. SSO BUTTONS ---------- */
.sso-group {
  display: none;
  gap: 12px;
}
.btn-sso {
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--panel);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s ease;
}
.btn-sso:hover {
  background: var(--border);
}

/* ---------- 13. TERMS FOOTER & DYNAMIC VISIBILITY ---------- */
.auth-terms-footer {
  font-size: 11.5px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 20px;
  line-height: 1.4;
}
.auth-terms-footer a {
  color: var(--text);
  font-weight: 700;
  text-decoration: underline;
}

.form-section { display: none; }
.form-section.active { display: block; }

/* ---------- 14. CLASSES REPLACING THE DESIGN'S INLINE STYLES ---------- */

/* was: style="font-size: 18px;" on the emoji inside each role pill */
.role-pill-icon { font-size: 18px; }

/* was: style="display: none;" on the teacher-only registration field.
   Now a class, so the script toggles it instead of writing inline styles. */
.form-group.is-hidden { display: none; }

/* was: style="background: var(--c-purple); color: #fff;" on the register submit */
.btn-submit--register { background: var(--c-purple); color: #fff; }

/* was: the card border colour the script set inline via card.style.borderColor.
   The mockup ran updateAccentColor() on load with the Student role active, so
   the card's real starting border is teal, not the --c-purple declared above. */
.auth-card.accent-student { border-color: var(--c-teal); }
.auth-card.accent-teacher { border-color: var(--c-purple); }
.auth-card.accent-admin   { border-color: var(--c-orange); }

/* ---------- 15. SIGN-IN ERROR NOTICE ---------- */
/* Not in the mockup: shown only when a sign-in attempt fails, so the default
   render of the page is unchanged. */
.auth-error {
  background: #FDECEC;
  border: 1.5px solid #E5A3A3;
  color: #8A2B2B;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 20px;
}