/* Shared styling for every full-screen auth page -- login, register, and the
   password-reset flow. Extracted verbatim from what used to be inline in
   login.html so the pages cannot drift apart; the only change is that the four
   backdrop/logo images are referenced by their stable /static/ URL instead of
   a {% static %} tag (a .css file is not run through the template engine).

   Requires v2.css to be linked FIRST -- it reads --accent, --font-body, etc.

   Structure a page renders (see auth_base.html):
     .auth > .auth__stage > (.auth__bg, .auth__scrim, .auth__geo, .auth__inner)
                          > (.auth__brand, .auth__card)
            > .auth__foot */

html, body { height: 100%; }
body { margin: 0; background: var(--auth-page, #eef1f5); color: var(--auth-ink); }

/* --- theme --------------------------------------------------------------
   Everything that differs between the two themes lives here as a token, so the
   rules below are written once. The plus-mark SVGs are whole data URIs rather
   than a stroke colour because a var() cannot be interpolated into a data URI. */
.auth {
  --auth-accent: var(--accent);
  --auth-page:   #f0f3f7;
  --auth-img:    url('/static/images/icon/login-defender-light.jpg');
  --auth-fill:   #8e9290;
  --auth-logo:   url('/static/images/icon/logo-transcal-light.png');
  --auth-logo-shadow: drop-shadow(0 .3rem 1.2rem rgba(23,33,48,.28));
  --auth-scrim:
    linear-gradient(90deg, rgba(248,250,252,.24) 0%, rgba(248,250,252,.08) 30%, rgba(248,250,252,.74) 64%, rgba(248,250,252,.94) 100%),
    linear-gradient(180deg,
      rgba(248,250,252,.62) 0%, rgba(248,250,252,.50) 16%, rgba(248,250,252,.30) 30%,
      rgba(248,250,252,.14) 42%, rgba(248,250,252,.04) 54%, rgba(248,250,252,0) 68%,
      rgba(248,250,252,.18) 100%);
  --auth-scrim-narrow:
    linear-gradient(180deg, rgba(248,250,252,.80) 0%, rgba(248,250,252,.36) 24%, rgba(248,250,252,.90) 60%, rgba(248,250,252,.96) 100%);
  --auth-ink:    #172130;
  --auth-ink-2:  rgba(31,39,51,.78);
  --auth-ink-3:  rgba(31,39,51,.58);
  --auth-ink-4:  rgba(31,39,51,.42);
  --auth-glow:   0 1px 12px rgba(255,255,255,.9);
  --auth-glass:  rgba(255,255,255,.72);
  --auth-line:   rgba(23,33,48,.12);
  --auth-line-2: rgba(23,33,48,.08);
  --auth-shadow: 0 2rem 4.2rem rgba(23,33,48,.20);
  --auth-field:  rgba(255,255,255,.72);
  --auth-field-focus: rgba(255,255,255,.95);
  --auth-foot:   rgba(247,249,251,.94);
  --hatch:       rgba(23,33,48,.05);
  --auth-rule:   rgba(23,33,48,.09);
  --auth-danger: #c0392b;
  --auth-plus:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54'%3E%3Cpath d='M27 22v10M22 27h10' stroke='%23172130' stroke-opacity='.26' stroke-width='1'/%3E%3C/svg%3E");
  --auth-plus-sm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cpath d='M23 19v8M19 23h8' stroke='%23172130' stroke-opacity='.20' stroke-width='1'/%3E%3C/svg%3E");
  position: relative; min-height: 100svh; overflow: hidden;
  display: flex; flex-direction: column;
}

[data-theme="dark"] .auth {
  --auth-page:   #07090b;
  --auth-img:    url('/static/images/icon/login-defender.jpg');
  --auth-fill:   #12181c;
  --auth-logo:   url('/static/images/icon/logo-transcal-dark.png');
  --auth-logo-shadow: drop-shadow(0 .3rem 1.4rem rgba(0,0,0,.7));
  --auth-scrim:
    linear-gradient(90deg, rgba(4,6,8,.28) 0%, rgba(4,6,8,.14) 30%, rgba(4,6,8,.72) 64%, rgba(4,6,8,.92) 100%),
    linear-gradient(180deg,
      rgba(4,6,8,.97) 0%, rgba(4,6,8,.94) 16%, rgba(4,6,8,.82) 30%,
      rgba(4,6,8,.58) 42%, rgba(4,6,8,.28) 54%, rgba(4,6,8,.06) 68%,
      rgba(4,6,8,.30) 100%);
  --auth-scrim-narrow:
    linear-gradient(180deg, rgba(4,6,8,.72) 0%, rgba(4,6,8,.34) 24%, rgba(4,6,8,.88) 60%, rgba(4,6,8,.95) 100%);
  --auth-ink:    #eef3f8;
  --auth-ink-2:  rgba(226,235,243,.72);
  --auth-ink-3:  rgba(226,235,243,.55);
  --auth-ink-4:  rgba(226,235,243,.38);
  --auth-glow:   0 1px 10px rgba(0,0,0,.9);
  --auth-glass:  rgba(13,17,21,.58);
  --auth-line:   rgba(255,255,255,.13);
  --auth-line-2: rgba(255,255,255,.07);
  --auth-shadow: 0 2.4rem 5rem rgba(0,0,0,.62);
  --auth-field:  rgba(255,255,255,.04);
  --auth-field-focus: rgba(255,255,255,.07);
  --auth-foot:   rgba(8,10,12,.93);
  --hatch:       rgba(255,255,255,.055);
  --auth-rule:   rgba(255,255,255,.07);
  --auth-danger: #ff6b5b;
  --auth-plus:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54'%3E%3Cpath d='M27 22v10M22 27h10' stroke='%23ffffff' stroke-opacity='.22' stroke-width='1'/%3E%3C/svg%3E");
  --auth-plus-sm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cpath d='M23 19v8M19 23h8' stroke='%23ffffff' stroke-opacity='.16' stroke-width='1'/%3E%3C/svg%3E");
}

.auth__stage { position: relative; flex: 1; display: flex; overflow: hidden; }

.auth__bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--auth-img);
  background-size: auto 108%;
  background-position: left top;
  background-repeat: no-repeat;
  background-color: var(--auth-fill);
}
.auth__scrim { position: absolute; inset: 0; z-index: 1; background: var(--auth-scrim); }

.auth__geo {
  position: absolute; inset: 0 0 0 auto; width: min(42%, 620px); z-index: 1; pointer-events: none;
  background-image:
    repeating-linear-gradient(115deg, var(--auth-rule) 0 1.5px, transparent 1.5px 128px),
    repeating-linear-gradient(115deg, var(--hatch) 0 96px, transparent 96px 232px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 52%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 52%, #000 100%);
}
.auth__geo::before, .auth__geo::after {
  content: ""; position: absolute; pointer-events: none;
  background-image: var(--auth-plus);
  background-size: 54px 54px;
}
.auth__geo::before { top: 9%;    right: 4%;  width: 172px; height: 118px; }
.auth__geo::after  { bottom: 16%; right: 11%; width: 226px; height: 118px; opacity: .8; }

.auth__inner {
  position: relative; z-index: 2; flex: 1; min-width: 0;
  width: 100%; max-width: 1500px; margin: 0 auto;
  padding: clamp(1.4rem, 3.4vw, 3rem) clamp(1.2rem, 4vw, 3.4rem);
  display: grid; grid-template-columns: 1fr minmax(400px, 480px);
  gap: clamp(2rem, 5vw, 5rem); align-items: start;
}

/* --- brand ------------------------------------------------------------- */
.auth__brand { max-width: 42rem; }
.auth__logo {
  display: block; width: clamp(190px, 20vw, 268px); aspect-ratio: 5.4898;
  background-image: var(--auth-logo);
  background-repeat: no-repeat; background-position: left center; background-size: contain;
  filter: var(--auth-logo-shadow);
}
.auth__wordmark {
  margin: clamp(.7rem, 1.4vw, 1.1rem) 0 0;
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(1.35rem, 3vw, 2.5rem); line-height: 1;
  letter-spacing: clamp(.18em, .42vw, .34em); text-transform: uppercase;
  color: var(--auth-ink); text-shadow: var(--auth-glow);
  white-space: nowrap;
}
.auth__coords {
  margin-top: clamp(1rem, 2.2vw, 1.7rem); font-size: .66rem; letter-spacing: .16em;
  line-height: 1.7; color: var(--auth-ink-2); font-variant-numeric: tabular-nums;
  text-shadow: var(--auth-glow);
}
.auth__coords::before {
  content: ""; display: block; width: 26px; height: 1px; margin-bottom: .65rem;
  background: var(--auth-ink-4);
}
.auth__coords span { display: block; }

/* --- card -------------------------------------------------------------- */
.auth__card {
  position: relative; justify-self: end; align-self: center; width: 100%;
  background: var(--auth-glass);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  backdrop-filter: blur(22px) saturate(1.15);
  border: 1px solid var(--auth-line); border-radius: 20px;
  box-shadow: var(--auth-shadow);
  padding: clamp(1.8rem, 2.9vw, 2.7rem);
}
.auth__title {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  line-height: 1.1; margin: 0; color: var(--auth-ink);
}
.auth__sub { margin: .5rem 0 1.85rem; font-size: .92rem; color: var(--auth-ink-3); }
.auth__field { margin-bottom: 1.15rem; }
.auth__field > label {
  display: block; font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  color: var(--auth-ink-2); margin-bottom: .4rem;
}
.auth__input { position: relative; display: flex; align-items: stretch; }
.auth__input .lead {
  display: flex; align-items: center; justify-content: center; width: 54px; flex: none;
  border: 1px solid var(--auth-line); border-right: 0;
  border-radius: 12px 0 0 12px; background: var(--auth-field);
  color: var(--auth-ink-3); font-size: .92rem;
}
.auth__input input {
  flex: 1; min-width: 0; height: 55px;
  border: 1px solid var(--auth-line); border-radius: 0 12px 12px 0;
  background: var(--auth-field); padding: 0 1rem; color: var(--auth-ink);
  font-family: inherit; font-size: .96rem;
}
.auth__input input::placeholder { color: var(--auth-ink-4); }
.auth__input:focus-within .lead, .auth__input:focus-within input {
  border-color: color-mix(in srgb, var(--auth-accent) 70%, transparent);
  background: var(--auth-field-focus);
}
.auth__input input:focus { outline: 0; }
.auth__peek {
  position: absolute; right: 4px; top: 4px; bottom: 4px; width: 44px;
  display: grid; place-items: center; cursor: pointer;
  background: none; border: 0; color: var(--auth-ink-3); font-size: .95rem;
}
.auth__peek:hover { color: var(--auth-ink); }
.auth__input--pw input { padding-right: 52px; }
.auth__submit {
  width: 100%; height: 56px; margin-top: .7rem;
  font-size: .86rem; letter-spacing: .14em; text-transform: uppercase;
}
.auth__or {
  display: flex; align-items: center; gap: .9rem; margin: 1.4rem 0 .95rem;
  color: var(--auth-ink-4); font-size: .76rem;
}
.auth__or::before, .auth__or::after { content: ""; flex: 1; height: 1px; background: var(--auth-line); }
.auth__help {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; height: 48px; border-radius: 12px;
  border: 1px solid var(--auth-line); background: var(--auth-field);
  color: var(--auth-ink-2); font-size: .88rem; font-weight: 600;
  font-family: inherit; cursor: pointer; text-decoration: none;
  transition: border-color .14s, background .14s, color .14s;
}
.auth__help:hover {
  border-color: color-mix(in srgb, var(--auth-accent) 60%, transparent);
  background: var(--auth-field-focus); color: var(--auth-ink);
}
.auth__help i { color: var(--auth-accent); font-size: .95rem; }

/* --- shared additions for register / password-reset --------------------
   These did not exist on the login-only page. They reuse the tokens above so
   both themes are covered for free. */

/* A row that lays two fields side by side, collapsing to one on narrow cards. */
.auth__row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 460px) { .auth__row { grid-template-columns: 1fr; } }

/* A plain-text link line under the card body (e.g. "Forgot your password?"). */
.auth__links {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem;
  margin-top: 1rem; font-size: .84rem;
}
.auth__links a { color: var(--auth-accent); text-decoration: none; font-weight: 600; }
.auth__links a:hover { text-decoration: underline; }

/* Muted helper / fine print (password rules, "we'll email you", etc.). */
.auth__note { font-size: .78rem; line-height: 1.55; color: var(--auth-ink-3); margin: .4rem 0 0; }

/* Django renders field + non-field errors as <ul class="errorlist">. */
.errorlist, .auth__errors {
  list-style: none; margin: .4rem 0 0; padding: 0;
  font-size: .78rem; line-height: 1.5; color: var(--auth-danger);
}
.auth__errors--top {
  margin: 0 0 1.3rem; padding: .8rem 1rem; border-radius: 12px;
  background: color-mix(in srgb, var(--auth-danger) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--auth-danger) 40%, transparent);
}

/* Confirmation pages (reset link sent / password changed) have no form, just a
   centred message and one action, so the card sits centred and narrower. */
.auth__card--message { max-width: 30rem; margin: 0 auto; justify-self: center; text-align: center; }
.auth__icon {
  width: 60px; height: 60px; margin: 0 auto 1.4rem; border-radius: 16px;
  display: grid; place-items: center; font-size: 1.5rem;
  background: color-mix(in srgb, var(--auth-accent) 14%, transparent); color: var(--auth-accent);
}
.auth__card--message .auth__sub { margin-bottom: 1.6rem; }
.auth__card--message .auth__submit { text-transform: uppercase; }

/* --- footer ------------------------------------------------------------- */
.auth__foot {
  position: relative; z-index: 2; margin-top: auto;
  background: var(--auth-foot);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-top: 1px solid var(--auth-line);
}
.auth__foot-geo {
  position: absolute; inset: 0 0 0 auto; width: min(34%, 460px); pointer-events: none;
  background-image:
    var(--auth-plus-sm),
    repeating-linear-gradient(115deg, var(--hatch) 0 1px, transparent 1px 13px);
  background-position: right 6% bottom 18%, 0 0;
  background-size: 46px 46px, auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 60%);
}
.auth__foot-inner {
  position: relative; width: 100%; max-width: 1500px; margin: 0 auto;
  padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1.2rem, 4vw, 3.4rem) 0;
  display: grid; gap: 1.1rem clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .5fr);
  align-items: start;
}
.fbrand { display: flex; align-items: flex-start; gap: clamp(.9rem, 2vw, 1.5rem); }
.fbrand__logo {
  width: clamp(132px, 15vw, 186px); aspect-ratio: 5.4898; flex: none;
  background-image: var(--auth-logo);
  background-repeat: no-repeat; background-position: left center; background-size: contain;
  opacity: .9;
}
.fbrand__rule { width: 1px; align-self: stretch; background: var(--auth-line); flex: none; }
.fbrand__meta { font-size: .76rem; line-height: 1.6; color: var(--auth-ink-3); }
.fcol h5 {
  font-size: .63rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--auth-ink); margin: 0 0 .55rem; font-weight: 700;
}
.fcol ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem;
           font-size: .78rem; line-height: 1.6; color: var(--auth-ink-3); }
.fcol a { color: inherit; }
.fcol a:hover { color: var(--auth-ink); text-decoration: underline; }
.fcol i { width: 1.05rem; text-align: center; color: var(--auth-accent); margin-right: .4rem; }
.auth__foot-bar {
  position: relative; width: 100%; max-width: 1500px; margin: clamp(.8rem, 1.8vw, 1.2rem) auto 0;
  padding: .85rem clamp(1.2rem, 4vw, 3.4rem) clamp(.9rem, 1.8vw, 1.3rem);
  border-top: 1px solid var(--auth-line-2);
  font-size: .72rem; color: var(--auth-ink-4); text-align: center;
}

/* --- narrow -------------------------------------------------------------- */
@media (max-width: 900px) {
  .auth__inner { grid-template-columns: 1fr; gap: 1.8rem; }
  .auth__bg { height: 100%; background-position: 42% center; }
  .auth__scrim { background: var(--auth-scrim-narrow); }
  .auth__geo { display: none; }
  .auth__card { justify-self: stretch; margin-top: 0; }
  .auth__wordmark { white-space: normal; letter-spacing: .2em; }
  .auth__foot-inner { grid-template-columns: 1fr 1fr; }
  .fbrand { grid-column: 1 / -1; }
  .auth__foot-geo { width: 40%; }
}
@media (max-width: 520px) { .auth__foot-inner { grid-template-columns: 1fr; } }

/* Short laptops: keep the page from scrolling on a 768px-tall screen by
   trimming rhythm rather than dropping content. */
@media (min-width: 901px) and (max-height: 860px) {
  .auth__inner { padding-top: 1.1rem; padding-bottom: .9rem; }
  .auth__coords { margin-top: .9rem; }
  .auth__card { margin-top: 0; padding: 1.4rem 1.6rem; }
  .auth__sub { margin-bottom: 1.1rem; }
  .auth__field { margin-bottom: .8rem; }
  .auth__submit { height: 48px; }
  .auth__or { margin: 1rem 0 .75rem; }
  .auth__foot-inner { padding-top: .85rem; }
  .auth__foot-bar { margin-top: .6rem; padding-top: .65rem; padding-bottom: .8rem; }
}