/* register.css — page-specific styles for this page only.
   Shared header/footer/buttons/marketing base now live in base.css
   (loaded before this file on every page). */

/* ===== PAGE-SPECIFIC ===== */

/* Forcing min-height:100vh on <main> means it always fills the full
   viewport regardless of content, so the footer sits below the fold
   and requires a scroll to reach. */
main{ flex:1; min-height:100vh; display:flex; flex-direction:column; }

.login-page-wrap {
  flex:1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 20px 40px;
  background: #f7f7f8;
}

.login-card {
  background: #ffffff;
  width: 100%;
  max-width: 420px;
  border-radius: 18px;
  padding: 48px 44px 40px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
  text-align: center;
}

.login-card h2 {
  font-size: 30px;
  font-weight: 800;
  color: var(--color-text);
  margin: 0 0 10px;
  display: inline-block;
  position: relative;
  padding-bottom: 14px;
}

.login-card h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-blue);
}

.login-divider {
  font-size: 13.5px;
  color: var(--color-text-muted);
  margin: 28px 0 24px;
}

/* ===== Flash-message toasts (login/register) =====
   Separate from the alert-modal on purpose: the modal is reserved for
   real failures on *this* submission (form.errors). Success/info/warning
   messages carried over from another view (e.g. "logged out",
   "account created") are not failures and shouldn't look like one. */
.toast-stack {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 320px;
}

.toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  animation: toastSlideIn 0.25s ease;
}

.toast-hide {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast-close {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: inherit;
  opacity: 0.7;
  padding: 0;
}
.toast-close:hover { opacity: 1; }

.toast-success { background: #ecfdf3; color: #046c4e; }
.toast-info    { background: #eff6ff; color: #1d4ed8; }
.toast-warning { background: #fffbeb; color: #92400e; }
.toast-error   { background: #fef2f2; color: #b91c1c; }
.toast-debug   { background: #f3f4f6; color: #374151; }

@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ===== Error popup (login/register) ===== */
.alert-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 21, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
  animation: alertFadeIn 0.2s ease;
}

.alert-modal {
  background: #ffffff;
  width: 100%;
  max-width: 380px;
  border-radius: 16px;
  padding: 28px 26px 24px;
  text-align: left;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  animation: alertPopIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.alert-modal-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fef2f2;
  color: #dc2626;
  font-size: 20px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.alert-modal-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--color-text);
  margin: 0 0 12px;
}

.alert-modal-list {
  margin: 0 0 20px;
  padding-left: 18px;
  color: #b91c1c;
  font-size: 13.5px;
  line-height: 1.6;
}

.alert-modal-list li { margin-bottom: 4px; }
.alert-modal-list li:last-child { margin-bottom: 0; }

.alert-modal-btn {
  width: 100%;
  border: none;
  border-radius: 999px;
  background: var(--color-blue);
  color: #ffffff;
  font-size: 14.5px;
  font-weight: 700;
  padding: 12px 0;
  cursor: pointer;
  transition: background 0.15s ease;
}
.alert-modal-btn:hover { background: var(--color-blue-hover); }

@keyframes alertFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes alertPopIn {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Style the Django form.as_p output to match the design */
.login-form {
  text-align: left;
}

.login-form p {
  margin: 0 0 18px;
}

.login-form p.has-error input {
  border-color: #dc2626;
}

.login-form label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
}

.login-form input[type="text"],
.login-form input[type="email"],
.login-form input[type="password"] {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-size: 14.5px;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: #ffffff;
  transition: border-color 0.15s ease;
}

.login-form input[type="text"]:focus,
.login-form input[type="email"]:focus,
.login-form input[type="password"]:focus {
  outline: none;
  border-color: var(--color-blue);
}

.login-extra-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -4px 0 22px;
  font-size: 13.5px;
}

.login-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text);
  font-weight: 600;
}

.login-remember input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-blue);
}

.login-forgot {
  color: var(--color-text);
  font-weight: 600;
}

.login-submit-btn {
  width: 100%;
  border: none;
  border-radius: 999px;
  background: var(--color-blue);
  color: #ffffff;
  font-size: 15.5px;
  font-weight: 700;
  padding: 14px 0;
  cursor: pointer;
  transition: background 0.15s ease;
}

.login-submit-btn:hover {
  background: var(--color-blue-hover);
}

.login-footer-links {
  display: flex;
  justify-content: space-between;
  margin-top: 26px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
}

.login-register-row {
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--color-text-muted);
}

.login-register-row a {
  color: var(--color-blue);
  font-weight: 600;
}
.role-toggle {
  position: relative;
  display: flex;
  background: #f1f1f3;
  border-radius: 999px;
  padding: 4px;
  margin: 0 0 22px;
  width: 100%;
}

.role-toggle-option {
  position: relative;
  flex: 1;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-muted);
  opacity: 0.45;
  cursor: pointer;
  border-radius: 999px;
  transition: color 0.25s ease, opacity 0.25s ease;
  user-select: none;
}

.role-toggle-option span {
  display: block;
  width: 100%;
  text-align: center;
  line-height: 1;
  pointer-events: none;
}

.role-toggle-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}

.role-toggle-option.is-active {
  color: var(--color-text);
  opacity: 1;
}

.role-toggle-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              right 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  pointer-events: none;
}

/* Teacher is the first (left) option, Student is the second (right) option.
   The thumb starts on the left by default (under Teacher), and should only
   move right when STUDENT is the one actually checked. */
.role-toggle:has(input[value="STUDENT"]:checked) .role-toggle-thumb {
  left: auto;
  right: 4px;
}
.field-label-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.field-label-row label {
  margin-bottom: 0;
}

.field-tooltip {
  position: relative;
  display: inline-flex;
}

.field-tooltip-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #6b7280;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}

.field-tooltip-icon:hover,
.field-tooltip-icon:focus {
  background: var(--color-blue);
  color: #ffffff;
  outline: none;
}

.field-tooltip-popup {
  position: absolute;
  bottom: calc(100% + 10px);
  /* Anchored from the icon's right edge, extending leftward, instead of
     from its left edge extending rightward — the icon sits after the
     field label (left-ish/middle of the row), so extending left keeps
     the popup within the viewport on narrow screens instead of running
     off the right edge while invisible (which used to force the whole
     page horizontally scrollable). */
  right: 0;
  width: 240px;
  max-width: calc(100vw - 32px);
  background: #1f2430;
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  padding: 12px 14px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  z-index: 20;
  text-align: left;
}

.field-tooltip-popup ul {
  margin: 0;
  padding-left: 16px;
}

.field-tooltip-popup li {
  margin-bottom: 4px;
}

.field-tooltip-popup li:last-child {
  margin-bottom: 0;
}

.field-tooltip-popup::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 14px;
  border: 6px solid transparent;
  border-top-color: #1f2430;
}

.field-tooltip-icon:hover ~ .field-tooltip-popup,
.field-tooltip-icon:focus ~ .field-tooltip-popup,
.field-tooltip:focus-within .field-tooltip-popup {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}