/* Login page (general/auth/login): university-blue hero with the logos and the
   campus photo, the sign-in card beside it (under it on phones), quick-service
   tiles and a footer. The hero keeps the university blues in both themes; the
   card's colours are page tokens that dark mode redefines. */
.view-auth-login {
  --auth-deep: #01227f;
  --auth-deep-rgb: 1 34 127;
  --auth-brand: #0b4cb3;
  --auth-light: #1a73d8;
  --auth-accent: #2fb2f0;
  --auth-submit-top: #1a63d6;
  --auth-hero:
    radial-gradient(900px 600px at 20% 10%, rgb(var(--uh-white-rgb) / 0.12), transparent 60%),
    linear-gradient(160deg, #0a3fb0 0%, var(--auth-brand) 40%, var(--auth-deep) 100%);
  --auth-wave: rgb(var(--uh-white-rgb) / 0.14);

  --auth-card: rgb(var(--uh-white-rgb) / 0.96);
  --auth-card-edge: rgb(var(--uh-white-rgb) / 0.7);
  --auth-ink: #0b1f4d;
  --auth-muted: #6b7486;
  --auth-field: #ffffff;
  --auth-field-border: #d9e1ee;
  --auth-icon-tile: #e8f0fb;
  --auth-icon: #0b2d7a;
  --auth-tile: #ffffff;
  --auth-shadow: 0 30px 80px rgb(0 18 64 / 0.35);
  --auth-tile-shadow: 0 8px 20px rgb(11 37 69 / 0.07);

  /* Cairo for every text on the page: the app's font tokens (headings use
     --font-display in base.css) point at it here. */
  --font-display: "Cairo", sans-serif;
  --font-body: "Cairo", sans-serif;
  --font-numeric: "Cairo", sans-serif;

  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--auth-ink);
  background: var(--auth-deep);
}

html.dark-theme .view-auth-login {
  --auth-hero:
    radial-gradient(900px 600px at 20% 10%, rgb(var(--uh-white-rgb) / 0.06), transparent 60%),
    linear-gradient(160deg, #0a2a70 0%, #071c52 45%, #040f2e 100%);
  --auth-wave: rgb(var(--uh-white-rgb) / 0.08);

  --auth-card: var(--uh-card);
  --auth-card-edge: var(--uh-border);
  --auth-ink: var(--uh-heading);
  --auth-muted: var(--uh-muted);
  --auth-field: var(--uh-surface);
  --auth-field-border: var(--uh-border);
  --auth-icon-tile: rgb(var(--auth-deep-rgb) / 0.45);
  --auth-icon: #9cc4ff;
  --auth-tile: var(--uh-surface);
  --auth-shadow: 0 30px 80px rgb(0 0 0 / 0.5);
  --auth-tile-shadow: none;

  background: #040f2e;
}

/* Password reset uses the same screen, in sea rather than the login blue,
   with a labelled badge so the two pages are not the same at a glance. */
.view-auth-reset {
  --auth-deep: #014a6e;
  --auth-deep-rgb: 1 74 110;
  --auth-brand: #0b6d94;
  --auth-light: #1493c9;
  --auth-accent: #7ad7f5;
  --auth-submit-top: #1aa0cc;
  --auth-hero:
    radial-gradient(900px 600px at 20% 10%, rgb(var(--uh-white-rgb) / 0.14), transparent 60%),
    linear-gradient(155deg, #0c87b0 0%, #0b6488 46%, #01364f 100%);
  --auth-icon-tile: #e5f6fb;
  --auth-icon: #015575;
}

html.dark-theme .view-auth-reset {
  --auth-hero:
    radial-gradient(900px 600px at 20% 10%, rgb(var(--uh-white-rgb) / 0.06), transparent 60%),
    linear-gradient(155deg, #0a455c 0%, #062c3d 48%, #021820 100%);
  --auth-icon: #9adff5;
  --auth-icon-tile: rgb(10 80 105 / 0.55);
  background: #021820;
}

.view-auth-reset .uh-auth__card {
  border-top: 4px solid var(--auth-accent);
}

.uh-auth__badge {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--auth-icon-tile);
  color: var(--auth-icon);
  font-size: 0.92rem;
  font-weight: 800;
}

.uh-auth__badge .bx {
  font-size: 1.15rem;
}

/* Page grid: on wide screens the card on the start side (right in RTL), the
   hero and the campus beside it, the footer across. Past 1760px the content
   stays centred (--auth-gutter grows) while the blue and the photo still run
   to the edges; the empty first row takes any spare height above the hero. */
.uh-auth {
  --auth-gutter: max(clamp(24px, 4vw, 64px), (100vw - 1760px) / 2);

  position: relative;
  isolation: isolate;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(440px, 600px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  grid-template-areas:
    "panel ."
    "panel hero"
    "panel campus"
    "footer footer";
  column-gap: clamp(24px, 4vw, 96px);
  padding: 40px var(--auth-gutter) 0;
  overflow: hidden;
  background: var(--auth-hero);
}

.uh-auth__waves {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--auth-wave);
  stroke-width: 1.5;
  pointer-events: none;
}

.uh-auth__rule {
  display: block;
  width: 56px;
  height: 3px;
  border-radius: 3px;
  background: var(--auth-accent);
}

/* Hero: logos, university name */
.uh-auth__hero {
  grid-area: hero;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 24px;
  color: var(--uh-on-color);
  text-align: center;
}

.uh-auth__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.5vw, 36px);
}

.uh-auth__seal {
  width: clamp(150px, 14vw, 230px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  padding: 6px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 14px 34px rgb(0 18 64 / 0.35);
  object-fit: contain;
}

/* The logo file is blue on transparent: drawn white on the blue hero. */
.uh-auth__logo {
  display: block;
  width: clamp(280px, 30vw, 460px);
  height: auto;
  filter: brightness(0) invert(1) drop-shadow(0 6px 18px rgb(0 18 64 / 0.35));
}

/* .view-auth-login outranks base.css's html.dark-theme h1. */
.view-auth-login .uh-auth__university {
  margin: 4px 0 0;
  color: var(--uh-on-color);
  font-size: clamp(1.4rem, 2.3vw, 2.1rem);
  font-weight: 800;
  line-height: 1.4;
  text-shadow: 0 4px 18px rgb(0 18 64 / 0.4);
}

.uh-auth__university-en {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0.88;
}

/* Campus photo, faded into the blue on every side but the bottom. */
.uh-auth__campus {
  grid-area: campus;
  align-self: end;
  margin-top: 24px;
  margin-inline: 0 calc(-1 * var(--auth-gutter));
}

.uh-auth__campus img {
  display: block;
  width: 100%;
  height: clamp(200px, 42vh, 820px);
  object-fit: cover;
  object-position: center bottom;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%),
    linear-gradient(to left, transparent 0%, #000 14%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%),
    linear-gradient(to left, transparent 0%, #000 14%, #000 100%);
  mask-composite: intersect;
}

/* Card */
.uh-auth__panel {
  grid-area: panel;
  align-self: center;
  padding-block: 24px;
}

.uh-auth__card {
  display: flex;
  flex-direction: column;
  padding: 44px 40px 36px;
  border: 1px solid var(--auth-card-edge);
  border-radius: 28px;
  background: var(--auth-card);
  box-shadow: var(--auth-shadow);
  backdrop-filter: blur(8px);
}

.uh-auth__card > .uh-auth__rule {
  align-self: center;
  margin-bottom: 22px;
}

.view-auth-login .uh-auth__card h2 {
  margin: 0 0 10px;
  color: var(--auth-ink);
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  font-weight: 800;
  text-align: center;
}

.uh-auth__lead {
  margin: 0 0 28px;
  color: var(--auth-muted);
  font-size: 1rem;
  text-align: center;
}

.uh-auth .alert {
  border: 0;
  border-radius: 12px;
  font-size: 0.92rem;
}

.uh-auth__hint {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--uh-info-tint);
  color: var(--uh-info-emphasis);
  font-size: 0.92rem;
  font-weight: 700;
}

/* Fields: icon tile, label over the input, show / hide at the end. */
.uh-field {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 86px;
  margin-bottom: 16px;
  padding-block: 12px;
  padding-inline: 12px 18px;
  border: 1px solid var(--auth-field-border);
  border-radius: 16px;
  background: var(--auth-field);
  cursor: text;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.uh-field:focus-within {
  border-color: var(--auth-light);
  box-shadow: 0 0 0 4px rgb(26 115 216 / 0.14);
}

.uh-field__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  flex: 0 0 auto;
  border-radius: 14px;
  background: var(--auth-icon-tile);
  color: var(--auth-icon);
  font-size: 1.6rem;
}

.uh-field__body {
  flex: 1 1 auto;
  min-width: 0;
}

.uh-field label {
  display: block;
  margin-bottom: 4px;
  color: var(--auth-ink);
  font-size: 1rem;
  font-weight: 700;
  cursor: text;
}

.uh-field input {
  display: block;
  width: 100%;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--auth-ink);
  font-family: inherit;
  font-size: 1rem;
  outline: none;
}

.uh-field input::placeholder {
  color: var(--auth-muted);
  opacity: 0.75;
}

.uh-field__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--auth-muted);
  font-size: 1.5rem;
  cursor: pointer;
}

.uh-field__toggle:hover,
.uh-field__toggle:focus-visible {
  background: var(--auth-icon-tile);
  color: var(--auth-icon);
}

.uh-auth__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  height: 64px;
  margin-top: 10px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--auth-submit-top) 0%, var(--auth-deep) 100%);
  color: var(--uh-on-color);
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  box-shadow: 0 14px 28px rgb(var(--auth-deep-rgb) / 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.uh-auth__submit .bx {
  font-size: 1.8rem;
}

.uh-auth__submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 32px rgb(var(--auth-deep-rgb) / 0.36);
}

.uh-auth__submit:active {
  transform: translateY(0);
}

a.uh-auth__submit {
  text-decoration: none;
}

.uh-auth__submit:disabled {
  opacity: 0.65;
  cursor: progress;
  transform: none;
  box-shadow: none;
}

.uh-auth__links {
  margin: 16px 0 0;
  text-align: center;
}

.uh-auth__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--auth-light);
  font-weight: 700;
  text-decoration: none;
}

.uh-auth__link:hover,
.uh-auth__link:focus-visible {
  color: var(--auth-deep);
  text-decoration: underline;
}

html.dark-theme .uh-auth__link:hover,
html.dark-theme .uh-auth__link:focus-visible {
  color: var(--auth-icon);
}

.uh-auth__status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.uh-auth__status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--auth-icon-tile);
  color: var(--auth-icon);
  font-size: 2.4rem;
  box-shadow: 0 0 0 3px var(--auth-card), 0 0 0 4px var(--auth-icon);
}

.uh-auth__status-icon .bx {
  font-size: 2.4rem;
}

/* Quick services */
.uh-auth__services {
  margin-top: 30px;
}

.uh-auth__services-title {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 18px;
  color: var(--auth-muted);
  font-size: 0.92rem;
}

.uh-auth__services-title::before,
.uh-auth__services-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--auth-field-border);
}

.uh-auth__tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.uh-auth__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 6px 16px;
  border: 1px solid var(--auth-field-border);
  border-radius: 18px;
  background: var(--auth-tile);
  color: var(--auth-ink);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.45;
  box-shadow: var(--auth-tile-shadow);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.uh-auth__tile .bx {
  color: var(--auth-icon);
  font-size: 2.1rem;
}

.uh-auth__tile:hover,
.uh-auth__tile:focus-visible {
  transform: translateY(-2px);
  border-color: var(--auth-light);
  box-shadow: 0 12px 24px rgb(11 37 69 / 0.12);
}

/* Footer band */
.uh-auth__footer {
  grid-area: footer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-inline: calc(-1 * var(--auth-gutter));
  padding: 18px var(--auth-gutter);
  background: rgb(0 14 56 / 0.55);
  color: rgb(var(--uh-white-rgb) / 0.9);
  font-size: 0.88rem;
}

.uh-auth__footer p {
  margin: 0;
}

.uh-auth__tagline {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  direction: ltr;
}

/* The cyan dash sits before the tagline on wide screens, the brand above it on phones. */
.uh-auth__tagline::before {
  content: "";
  width: 48px;
  height: 2px;
  border-radius: 2px;
  background: var(--auth-accent);
}

.uh-auth__tagline-brand {
  display: none;
  font-size: 1.35rem;
  font-weight: 800;
}

.uh-auth__copyright {
  text-align: center;
  line-height: 1.7;
}

/* Two lines in the desktop band, one line on phones. */
.uh-auth__copyright-dash {
  display: none;
}

/* Theme toggle, top corner, glass on the blue */
.uh-theme-toggle {
  position: fixed;
  top: 16px;
  inset-inline-end: 16px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid rgb(var(--uh-white-rgb) / 0.3);
  border-radius: 999px;
  background: rgb(var(--uh-white-rgb) / 0.14);
  color: var(--uh-on-color);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  backdrop-filter: blur(6px);
  cursor: pointer;
}

.uh-theme-toggle .bx {
  font-size: 1.1rem;
}

.uh-theme-toggle:hover,
.uh-theme-toggle:focus-visible {
  background: rgb(var(--uh-white-rgb) / 0.24);
}

/* Over the white card (light theme, scrolled on phones): dark text on frosted
   white. login.js sets is-over-light while the card is under the button. */
html:not(.dark-theme) .uh-theme-toggle.is-over-light {
  border-color: var(--auth-field-border);
  background: rgb(var(--uh-white-rgb) / 0.9);
  color: var(--auth-ink);
  box-shadow: 0 6px 18px rgb(11 37 69 / 0.12);
}

html:not(.dark-theme) .uh-theme-toggle.is-over-light:hover,
html:not(.dark-theme) .uh-theme-toggle.is-over-light:focus-visible {
  background: #ffffff;
  color: var(--auth-icon);
}

.uh-theme-toggle {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Big screens (27" and up at 100%): a larger card and hero. */
@media (min-width: 1800px) and (min-height: 950px) {
  .uh-auth {
    grid-template-columns: minmax(440px, 680px) minmax(0, 1fr);
  }

  .uh-auth__card {
    padding: 56px 52px 44px;
  }

  .uh-auth__lead,
  .uh-field label,
  .uh-field input {
    font-size: 1.1rem;
  }

  .uh-field {
    min-height: 96px;
  }

  .uh-field__icon {
    width: 66px;
    height: 66px;
  }

  .uh-auth__submit {
    height: 72px;
    font-size: 1.35rem;
  }

  .uh-auth__tile {
    padding-block: 22px 20px;
    font-size: 1.05rem;
  }

  .uh-auth__seal {
    width: 250px;
  }

  .uh-auth__logo {
    width: 500px;
  }

  .uh-auth__footer {
    font-size: 0.95rem;
  }
}

/* Short laptop screens (1366x768, 1280x720): a tighter hero and card so the
   page fits without scrolling. */
@media (min-width: 1200px) and (max-height: 820px) {
  .uh-auth {
    padding-top: 24px;
  }

  .uh-auth__hero {
    gap: 10px;
    padding-top: 8px;
  }

  .uh-auth__seal {
    width: 136px;
  }

  .uh-auth__logo {
    width: 290px;
  }

  .view-auth-login .uh-auth__university {
    font-size: 1.5rem;
  }

  .uh-auth__panel {
    padding-block: 12px;
  }

  .uh-auth__card {
    padding: 28px 32px 24px;
  }

  .uh-auth__card > .uh-auth__rule {
    margin-bottom: 14px;
  }

  .view-auth-login .uh-auth__card h2 {
    font-size: 1.8rem;
  }

  .uh-auth__lead {
    margin-bottom: 18px;
  }

  .uh-field {
    min-height: 72px;
    margin-bottom: 12px;
    padding-block: 8px;
  }

  .uh-field__icon {
    width: 50px;
    height: 50px;
  }

  .uh-auth__submit {
    height: 54px;
  }

  .uh-auth__services {
    margin-top: 20px;
  }

  .uh-auth__services-title {
    margin-bottom: 12px;
  }

  .uh-auth__tile {
    padding-block: 12px 10px;
    gap: 6px;
  }

  .uh-auth__tile .bx {
    font-size: 1.7rem;
  }

  .uh-auth__footer {
    padding-block: 12px;
  }
}

/* Tablets and phones: hero, campus strip, the card over it, footer. */
@media (max-width: 1199.98px) {
  .uh-auth {
    --auth-gutter: 16px;

    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      "hero"
      "campus"
      "panel"
      "footer";
    padding: 0 16px;
  }

  .uh-auth__hero {
    margin-inline: -16px;
    padding: 56px 16px 28px;
    border-radius: 0 0 40px 40px;
    background: linear-gradient(180deg, var(--auth-deep) 0%, rgb(var(--auth-deep-rgb) / 0.6) 100%);
  }

  /* Rule under the name on phones, as in the mobile design. */
  .uh-auth__hero > .uh-auth__rule {
    order: 3;
  }

  .uh-auth__university-en {
    display: none;
  }

  /* Phones and tablets: the seal's white disc gets a black ring. */
  .uh-auth__seal {
    width: clamp(96px, 28vw, 150px);
    border: 3px solid #000000;
  }

  .uh-auth__logo {
    width: clamp(180px, 50vw, 320px);
  }

  .uh-auth__campus {
    margin: -12px -16px 0;
  }

  .uh-auth__campus img {
    height: auto;
    max-height: 340px;
    aspect-ratio: 16 / 9;
    object-position: center 30%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 80%, transparent 100%);
  }

  .uh-auth__panel {
    width: min(640px, 100%);
    justify-self: center;
    margin-top: -40px;
    padding-block: 0 28px;
  }

  .uh-auth__card {
    padding: 32px 22px 26px;
  }

  .uh-auth__card > .uh-auth__rule {
    display: none;
  }

  .view-auth-login .uh-auth__card h2,
  .uh-auth__lead {
    text-align: start;
  }

  .uh-auth__footer {
    flex-direction: column;
    margin-inline: -16px;
    padding: 24px 16px 28px;
    background: none;
    text-align: center;
  }

  .uh-auth__tagline {
    flex-direction: column;
    gap: 6px;
  }

  .uh-auth__tagline::before {
    display: none;
  }

  .uh-auth__tagline-brand {
    display: block;
  }

  .uh-auth__copyright {
    font-size: 0.78rem;
    opacity: 0.75;
  }

  .uh-auth__copyright-break {
    display: none;
  }

  .uh-auth__copyright-dash {
    display: inline;
  }
}

@media (max-width: 420px) {
  .uh-field {
    gap: 12px;
    min-height: 78px;
    padding-inline: 10px 12px;
  }

  .uh-field__icon {
    width: 50px;
    height: 50px;
    font-size: 1.4rem;
  }

  .uh-auth__tiles {
    gap: 8px;
  }

  .uh-auth__tile {
    padding: 14px 4px 12px;
    font-size: 0.82rem;
  }

  .uh-auth__tile .bx {
    font-size: 1.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .uh-field,
  .uh-auth__submit,
  .uh-auth__tile,
  .uh-theme-toggle {
    transition: none;
  }
}