/* ==========================================================================
   Ta'lam login pages (student, teacher, admin) — shared by <x-auth.login-shell>
   Scoped under .tl-login so the older auth styles (style.css) are untouched.
   ========================================================================== */

/* Tokens sit on :root so SweetAlert, which renders outside .tl-login, can use
   them too. This file only loads on the login pages. */
:root {
  /* Student & teacher: colours sampled from the Ta'lam banner */
  --tl-primary: #5019bd;
  --tl-primary-deep: #3a0f94;
  --tl-primary-rgb: 80, 25, 189;
  --tl-greeting: var(--tl-primary);
  --tl-navy: #1a2d72;
  --tl-muted: #5c6283;
  --tl-line: #d9d2ee;
  --tl-line-hover: var(--tl-line-hover);
  --tl-field: #fbfaff;
  --tl-icon: var(--tl-icon);
  --tl-icon-strong: var(--tl-icon-strong);
  --tl-tint: #f1ecff;
  --tl-divider: #ece8f6;
  --tl-lilac: #f1ecff;
  --tl-sky: #e6f3fe;
  --tl-gold: #e7b250;
  --tl-danger: #b42339;
  --tl-display: "Baloo Bhaijaan 2", "Nunito", system-ui, sans-serif;
  --tl-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Admin: colours sampled from the Talaam badge (navy wordmark, star orange) */
:root:has(.tl-login--admin) {
  --tl-primary: #0b2a66;
  --tl-primary-deep: #061a45;
  --tl-primary-rgb: 11, 42, 102;
  --tl-greeting: #b4500f;
  --tl-navy: #0b2a66;
  --tl-muted: #56607a;
  --tl-line: #d2d9e6;
  --tl-line-hover: #9fb0cf;
  --tl-field: #f8fafd;
  --tl-icon: #8592ad;
  --tl-icon-strong: #5d6a86;
  --tl-tint: #e9eef8;
  --tl-divider: #e6ebf3;
}

.tl-login {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "brand"
    "form";
  background: #fff;
  color: var(--tl-navy);
  font-family: var(--tl-body);
}

.tl-login [x-cloak] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Brand panel: banner card on a classroom-style Arabic alphabet chart
   -------------------------------------------------------------------------- */

.tl-login__brand {
  grid-area: brand;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 24px 16px 44px;
  background: linear-gradient(160deg, var(--tl-lilac) 0%, var(--tl-sky) 100%);
}

.tl-chart {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  grid-auto-rows: 64px;
  align-content: center;
  padding: 8px;
  direction: rtl; /* the chart reads from ا at the top right, as in a classroom */
  font-family: var(--tl-display);
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 1;
  color: rgba(var(--tl-primary-rgb), 0.07);
  pointer-events: none;
  user-select: none;
}

.tl-chart span {
  display: grid;
  place-items: center;
}

/* ت ع ل م — the letters of تعلّم, the platform's name */
.tl-chart .is-brand {
  color: rgba(var(--tl-primary-rgb), 0.2);
}

.tl-banner {
  width: min(100%, 600px);
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 24px 48px -26px rgba(58, 15, 148, 0.45),
    0 6px 16px -10px rgba(26, 45, 114, 0.25);
}

.tl-banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   Admin brand panel: the Talaam badge set as a seal on deep navy
   -------------------------------------------------------------------------- */

.tl-login--admin .tl-login__brand {
  background: radial-gradient(circle at 50% 45%, #1d3f86 0%, #0d2457 50%, #081a42 100%);
}

.tl-seal {
  position: relative;
  width: min(232px, 64vw, 25vh); /* height-aware so short phones still see Log in */
  aspect-ratio: 1;
  margin: 0;
}

.tl-seal__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.tl-seal__ring circle {
  fill: none;
  stroke: var(--tl-gold);
  stroke-width: 0.6;
  opacity: 0.5;
}

.tl-seal__ring text {
  font-family: var(--tl-body);
  font-size: 8.8px;
  font-weight: 800;
  letter-spacing: 1.2px;
  fill: var(--tl-gold);
}

.tl-seal__disc {
  position: absolute;
  inset: 13%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: #f7f7f7; /* the badge's own background, so the photo edges disappear */
  box-shadow:
    0 0 0 2px var(--tl-gold),
    0 26px 50px -18px rgba(0, 0, 0, 0.6);
}

.tl-seal__disc img {
  display: block;
  width: 94%;
  height: auto;
}

/* --------------------------------------------------------------------------
   Form column
   -------------------------------------------------------------------------- */

.tl-login__form-col {
  grid-area: form;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  margin-top: -20px; /* slides up over the banner band like a sheet on small screens */
  padding: 32px 20px 20px;
  border-radius: 24px 24px 0 0;
  background: #fff;
}

.tl-login__form-wrap {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.tl-login__intro {
  margin-bottom: 28px;
}

.tl-login__greeting {
  margin: 0 0 2px;
  text-align: left;
  font-family: var(--tl-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.6rem);
  line-height: 1.35;
  color: var(--tl-greeting);
}

.tl-login__title {
  margin: 0 0 8px;
  font-family: var(--tl-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 1.35rem + 0.9vw, 2rem);
  line-height: 1.15;
  color: var(--tl-navy);
}

.tl-login__lede {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--tl-muted);
  text-wrap: pretty;
}

.tl-group + .tl-group {
  margin-top: 20px;
}

.tl-label {
  display: block;
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--tl-navy);
}

.tl-field {
  position: relative;
}

.tl-field__icon {
  position: absolute;
  top: 50%;
  left: 17px;
  transform: translateY(-50%);
  font-size: 1rem;
  color: var(--tl-icon);
  pointer-events: none;
  transition: color 0.2s;
}

.tl-input {
  display: block;
  width: 100%;
  height: 54px;
  padding: 0 16px 0 46px;
  border: 1.5px solid var(--tl-line);
  border-radius: 14px;
  background: var(--tl-field);
  font-family: var(--tl-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--tl-navy);
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.tl-input--password {
  padding-right: 58px;
}

.tl-input:hover {
  border-color: var(--tl-line-hover);
}

.tl-input:focus {
  outline: none;
  border-color: var(--tl-primary);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(var(--tl-primary-rgb), 0.14);
}

.tl-field:focus-within .tl-field__icon {
  color: var(--tl-primary);
}

.tl-input[aria-invalid="true"] {
  border-color: var(--tl-danger);
  background: #fff8f9;
}

.tl-input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 4px rgba(180, 35, 57, 0.14);
}

.tl-field__toggle {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-size: 1.05rem;
  color: var(--tl-icon-strong);
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
}

.tl-field__toggle:hover {
  color: var(--tl-primary);
  background: var(--tl-tint);
}

.tl-field__toggle:focus-visible {
  outline: 3px solid rgba(var(--tl-primary-rgb), 0.4);
  outline-offset: 0;
}

.tl-error {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 8px 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tl-danger);
}

.tl-hint {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 10px 0 0;
  padding: 5px 10px;
  border-radius: 8px;
  background: #fff4dc;
  font-size: 0.875rem;
  font-weight: 600;
  color: #7a4b00;
}

.tl-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 54px;
  margin-top: 28px;
  border: 0;
  border-radius: 14px;
  background: var(--tl-primary);
  font-family: var(--tl-body);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 12px 24px -12px rgba(var(--tl-primary-rgb), 0.7);
  transition: background-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.tl-submit:hover {
  background: var(--tl-primary-deep);
}

.tl-submit:active {
  transform: translateY(1px);
}

.tl-submit:focus-visible {
  outline: 3px solid rgba(var(--tl-primary-rgb), 0.4);
  outline-offset: 3px;
}

.tl-submit[disabled] {
  cursor: progress;
  opacity: 0.8;
}

.tl-submit__label,
.tl-submit__busy {
  align-items: center;
  gap: 10px;
}

.tl-submit__label {
  display: inline-flex;
}

.tl-submit__label .fa-arrow-right {
  transition: transform 0.2s;
}

.tl-submit:hover .tl-submit__label .fa-arrow-right {
  transform: translateX(3px);
}

/* Every item carries the same inline padding and the row is pulled back by it,
   so text lines up with the form edge and links stay 44px tap targets when wrapped. */
.tl-login__alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 24px -8px 0;
  padding-top: 12px;
  /* divider drawn inset by the same 8px so it stays flush with the form */
  background: linear-gradient(var(--tl-divider), var(--tl-divider)) 8px 0 / calc(100% - 16px) 1px no-repeat;
  font-size: 0.925rem;
  line-height: 1.4;
  color: var(--tl-muted);
}

.tl-login__alt > span,
.tl-login__alt a {
  padding: 0 8px;
}

.tl-login__alt > span {
  padding-right: 2px;
}

.tl-login__alt a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-radius: 10px;
  font-weight: 700;
  color: var(--tl-primary);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s;
}

.tl-login__alt a:hover {
  background: var(--tl-tint);
}

.tl-login__alt a:focus-visible {
  outline: 3px solid rgba(var(--tl-primary-rgb), 0.4);
  outline-offset: 0;
}

.tl-login__footer {
  margin-top: auto; /* sits at the bottom of tall screens */
  padding-top: 32px;
  font-size: 0.85rem;
  text-align: center;
  color: var(--tl-muted);
}

/* SweetAlert lives outside .tl-login; this file only loads on the login pages */
body .swal2-popup {
  border-radius: 20px;
  font-family: "Nunito", system-ui, sans-serif;
}

body .swal2-title {
  color: var(--tl-navy);
}

body .swal2-styled.swal2-confirm {
  border-radius: 12px;
  background-color: var(--tl-primary);
  font-weight: 700;
}

body .swal2-styled.swal2-confirm:focus {
  box-shadow: 0 0 0 3px rgba(var(--tl-primary-rgb), 0.35);
}

/* --------------------------------------------------------------------------
   Small phones: tighter rhythm so the Log in button stays near the first screen
   -------------------------------------------------------------------------- */

@media (max-width: 575.98px) {
  .tl-login__brand {
    padding: 16px 16px 40px;
  }

  .tl-login__form-col {
    padding-top: 28px;
  }

  .tl-login__intro {
    margin-bottom: 22px;
  }

  .tl-group + .tl-group {
    margin-top: 16px;
  }

  .tl-submit {
    margin-top: 24px;
  }
}

/* --------------------------------------------------------------------------
   Tablets in portrait: more breathing room around the logo
   -------------------------------------------------------------------------- */

@media (min-width: 576px) and (orientation: portrait) {
  .tl-login__brand {
    padding: 40px 32px 60px;
  }

  .tl-login__form-col {
    padding-top: 44px;
  }

  .tl-banner {
    border-radius: 24px;
  }

  .tl-seal {
    width: 300px;
  }
}

/* --------------------------------------------------------------------------
   Small phones in landscape (too narrow to split): keep the logo compact
   so the form starts on the first screen
   -------------------------------------------------------------------------- */

@media (orientation: landscape) and (max-width: 699.98px) {
  .tl-login__brand {
    padding: 16px 16px 36px;
  }

  .tl-banner {
    width: min(100%, 360px);
  }

  .tl-seal {
    width: min(190px, 48vh);
  }
}

/* --------------------------------------------------------------------------
   Landscape screens (desktop, tablets, large phones): brand panel on the left,
   form on the right. The brand panel stays pinned while a tall form scrolls.
   -------------------------------------------------------------------------- */

@media (orientation: landscape) and (min-width: 700px) {
  .tl-login {
    grid-template-columns: 7fr minmax(400px, 5fr);
    grid-template-rows: 1fr;
    grid-template-areas: "brand form";
  }

  .tl-login__brand {
    position: sticky;
    top: 16px;
    align-self: start;
    height: calc(100vh - 32px);
    height: calc(100dvh - 32px);
    margin: 16px;
    padding: clamp(20px, 5vh, 48px) clamp(24px, 4vw, 64px);
    border-radius: 28px;
  }

  .tl-chart {
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    grid-auto-rows: 100px;
    align-content: space-evenly;
    padding: 16px;
    font-size: 3.4rem;
  }

  .tl-banner {
    width: min(100%, 760px);
    border-radius: 24px;
  }

  /* bounded by height too, so the seal fits short landscape screens */
  .tl-seal {
    width: min(440px, 100%, 64vh);
  }

  .tl-login__form-col {
    margin-top: 0;
    padding: clamp(24px, 6vh, 40px) clamp(28px, 5vw, 88px) 20px;
    border-radius: 0;
  }

  /* auto margins centre the form vertically and keep the footer at the bottom */
  .tl-login__form-wrap {
    margin: auto;
  }
}

/* --------------------------------------------------------------------------
   Load sequence — skipped entirely when reduced motion is requested
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .tl-rise {
    animation: tl-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(var(--i, 0) * 70ms);
  }

  .tl-banner,
  .tl-seal__disc {
    animation: tl-banner-in 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both;
  }

  /* the seal's ring turns into place once, like a stamp being set */
  .tl-seal__ring {
    animation: tl-seal-turn 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both;
  }
}

@keyframes tl-seal-turn {
  from {
    opacity: 0;
    transform: rotate(-40deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes tl-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes tl-banner-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}