/* =============================================================================
   ניהול עמדות — Login screen
   auth.css — self-contained, loaded AFTER the theme + app.extra.css
   -----------------------------------------------------------------------------
   A premium two-panel sign-in. Left (inline-start / right in RTL) is a living
   brand HERO with an animated aurora backdrop; the inline-end side is a crisp,
   focused auth card. Fully mobile-first & stacked below 900px.

   Themed entirely through existing custom properties with var(--token, fallback)
   so it looks polished in BOTH "Midnight" (dark/gold) and "Aurora" (light/indigo).
   No hardcoded brand colors — only neutral overlays via color-mix / rgba.
   RTL-native (logical properties). Respects prefers-reduced-motion.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   [01] Full-viewport shell — override the centered .auth from the theme
   -------------------------------------------------------------------------- */
.auth {
  display: block;
  min-block-size: 100vh;
  min-block-size: 100dvh;
  padding: 0;
  text-align: start;
  background: var(--bg-canvas, #05070b);
}

/* Flash messages surfaced by the layout: float them as a top toast so they
   never disturb the split layout. */
.auth > .flashes {
  position: fixed;
  inset-block-start: max(var(--space-4, 1rem), env(safe-area-inset-top, 0px));
  inset-inline: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: var(--space-2, .5rem);
  inline-size: min(92%, 26rem);
  margin-inline: auto;
}

/* -----------------------------------------------------------------------------
   [02] Split container
   -------------------------------------------------------------------------- */
.login {
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
  min-block-size: 100dvh;
  isolation: isolate;
}

/* -----------------------------------------------------------------------------
   [03] HERO / BRAND panel
   -------------------------------------------------------------------------- */
.login__hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6, 1.5rem);
  padding-inline: clamp(1.25rem, 6vw, 4rem);
  padding-block: clamp(1.5rem, 5vw, 3.5rem);
  color: var(--text-strong, #f4f7fb);
  background:
    radial-gradient(120% 120% at 100% 0%,
      color-mix(in srgb, var(--accent, #e6bb56) 20%, transparent), transparent 55%),
    radial-gradient(120% 120% at 0% 100%,
      color-mix(in srgb, var(--accent, #e6bb56) 12%, transparent), transparent 52%),
    linear-gradient(160deg,
      color-mix(in srgb, var(--bg-canvas, #05070b) 88%, var(--accent, #e6bb56) 12%),
      var(--bg-canvas, #05070b) 70%);
  border-block-end: 1px solid var(--border-hair, rgba(255, 255, 255, .1));
}

/* --- Animated aurora backdrop --- */
.login__hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.login__aurora {
  position: absolute;
  inline-size: 42vmax;
  block-size: 42vmax;
  border-radius: 50%;
  filter: blur(64px);
  opacity: .55;
  mix-blend-mode: screen;
  will-change: transform;
}
.login__aurora--1 {
  inset-block-start: -14%;
  inset-inline-end: -10%;
  background: radial-gradient(circle at 30% 30%,
    color-mix(in srgb, var(--accent, #e6bb56) 85%, transparent), transparent 68%);
  animation: aurora-drift-1 18s var(--ease-inout, ease-in-out) infinite alternate;
}
.login__aurora--2 {
  inset-block-end: -18%;
  inset-inline-start: -12%;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--info, #6aaee8) 80%, transparent), transparent 66%);
  animation: aurora-drift-2 22s var(--ease-inout, ease-in-out) infinite alternate;
}
.login__aurora--3 {
  inset-block-start: 34%;
  inset-inline-start: 30%;
  inline-size: 30vmax;
  block-size: 30vmax;
  opacity: .4;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--accent-strong, var(--accent, #f2d089)) 70%, transparent), transparent 64%);
  animation: aurora-drift-3 26s var(--ease-inout, ease-in-out) infinite alternate;
}

/* Fine dot-grid texture, softly faded toward the edges */
.login__grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    color-mix(in srgb, var(--text-strong, #fff) 16%, transparent) 1px, transparent 1.4px);
  background-size: 26px 26px;
  opacity: .35;
  -webkit-mask-image: radial-gradient(120% 90% at 70% 20%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 70% 20%, #000 30%, transparent 78%);
}

/* Light theme: dots need to be dark to stay visible on paper */
:root[data-theme="light"] .login__grid {
  background-image: radial-gradient(
    color-mix(in srgb, var(--text-strong, #0e1420) 14%, transparent) 1px, transparent 1.4px);
  opacity: .5;
}
:root[data-theme="light"] .login__aurora { mix-blend-mode: multiply; opacity: .4; }

/* --- Hero content --- */
.login__hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
  max-inline-size: 30rem;
}

.login__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3, .75rem);
}
.auth-footer {
  text-align: center;
  font-size: .74rem;
  color: var(--text-faint, #55637a);
  padding-block: 1.1rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
  padding-inline: 1rem;
}
@media (min-width: 900px) {
  .auth-footer {
    position: fixed;
    inset-block-end: max(.7rem, env(safe-area-inset-bottom, 0px));
    inset-inline: 0;
    padding: 0;
    z-index: 5;
    pointer-events: none;
  }
}

.login__logo {
  display: grid;
  place-content: center;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  flex: 0 0 auto;
  border-radius: var(--radius-lg, 18px);
  color: var(--on-accent, #221802);
  background: var(--accent-grad, linear-gradient(135deg, #f2d089, #d6a53c));
  box-shadow:
    0 8px 26px var(--accent-glow, rgba(214, 165, 60, .3)),
    var(--shadow-inset-hi, inset 0 1px 0 rgba(255, 255, 255, .18));
}
.login__logo svg { inline-size: 1.75rem; block-size: 1.75rem; }
.login__logo img {
  inline-size: auto;
  block-size: auto;
  max-inline-size: 2.4rem;
  max-block-size: 2.4rem;
  object-fit: contain;
}

.login__wordmark {
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  font-weight: var(--weight-bold, 700);
  letter-spacing: var(--tracking-tight, -0.01em);
  color: var(--text-strong, #f4f7fb);
}

.login__headline {
  margin-block-start: var(--space-2, .5rem);
  font-size: clamp(1.6rem, 4.4vw, 2.75rem);
  line-height: 1.12;
  font-weight: var(--weight-bold, 700);
  letter-spacing: var(--tracking-tight, -0.01em);
  color: var(--text-strong, #f4f7fb);
  text-wrap: balance;
}
.login__headline em {
  font-style: normal;
  background: var(--accent-grad, linear-gradient(135deg, #f2d089, #d6a53c));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.login__tagline {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: var(--leading-relaxed, 1.65);
  color: var(--text-muted, #8b97ab);
  max-inline-size: 34ch;
}

.login__features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, .5rem) var(--space-3, .75rem);
  margin-block-start: var(--space-3, .75rem);
  padding: 0;
  list-style: none;
}
.login__features li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, .5rem);
  padding-inline: var(--space-3, .75rem);
  padding-block: var(--space-2, .5rem);
  border-radius: var(--radius-pill, 999px);
  font-size: var(--text-sm, .8125rem);
  font-weight: var(--weight-medium, 500);
  color: var(--text-body, #dbe1ea);
  background: color-mix(in srgb, var(--bg-elevated, rgba(24, 31, 43, .72)) 70%, transparent);
  border: 1px solid var(--border-hair, rgba(255, 255, 255, .1));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.login__features li::before {
  content: "";
  inline-size: .45rem;
  block-size: .45rem;
  border-radius: 50%;
  background: var(--accent, #e6bb56);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #e6bb56) 24%, transparent);
}

.login__version {
  position: relative;
  z-index: 1;
  font-size: var(--text-xs, .75rem);
  color: var(--text-faint, #55637a);
  letter-spacing: var(--tracking-wide, .04em);
}

/* -----------------------------------------------------------------------------
   [04] AUTH panel + card
   -------------------------------------------------------------------------- */
.login__panel {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-inline: var(--space-4, 1rem);
  padding-block: var(--space-6, 1.5rem);
}

.login__card {
  inline-size: 100%;
  max-inline-size: 25rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
  padding-inline: clamp(1.25rem, 4vw, 2rem);
  padding-block: clamp(1.5rem, 4vw, 2.25rem);
  border-radius: var(--radius-xl, 24px);
  background: var(--glass-bg, linear-gradient(155deg, rgba(32, 41, 57, .72), rgba(14, 19, 27, .62)));
  background-color: var(--bg-elevated, rgba(24, 31, 43, .72));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur, 16px) + 4px)) saturate(140%);
  backdrop-filter: blur(calc(var(--glass-blur, 16px) + 4px)) saturate(140%);
  border: 1px solid var(--border-hair, rgba(255, 255, 255, .1));
  box-shadow: var(--shadow-lg, 0 18px 48px rgba(0, 0, 0, .58)),
              var(--shadow-inset-hi, inset 0 1px 0 rgba(255, 255, 255, .05));
  animation: login-card-in var(--dur-slow, 250ms) var(--ease-out, cubic-bezier(.22, 1, .36, 1)) both;
}

.login__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, .25rem);
  margin-block-end: var(--space-1, .25rem);
}
.login__title {
  font-size: var(--text-xl, 1.375rem);
  font-weight: var(--weight-bold, 700);
  color: var(--text-strong, #f4f7fb);
  letter-spacing: var(--tracking-tight, -0.01em);
}
.login__subtitle {
  font-size: var(--text-sm, .8125rem);
  line-height: var(--leading-normal, 1.5);
  color: var(--text-muted, #8b97ab);
}

/* Password form: tighten default field spacing inside the card */
.login__card form { margin: 0; }
.login__card .field:last-of-type { margin-block-end: var(--space-2, .5rem); }

/* Warning shown when Google isn't configured */
.login__card .flash code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .85em;
  padding-inline: .3em;
  padding-block: .05em;
  border-radius: var(--radius-xs, 6px);
  background: color-mix(in srgb, var(--text-strong, #fff) 10%, transparent);
}

/* -----------------------------------------------------------------------------
   [05] "או" divider — refined override (scoped, element stays usable)
   -------------------------------------------------------------------------- */
.login .or-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3, .75rem);
  margin-block: var(--space-1, .25rem);
  color: var(--text-faint, #55637a);
  font-size: var(--text-xs, .75rem);
  font-weight: var(--weight-medium, 500);
  letter-spacing: var(--tracking-wide, .04em);
  text-transform: uppercase;
}
.login .or-divider::before,
.login .or-divider::after {
  content: "";
  flex: 1 1 auto;
  block-size: 1px;
  background: linear-gradient(to inline-end, transparent, var(--border-hair, rgba(255, 255, 255, .12)));
}
.login .or-divider::after {
  background: linear-gradient(to inline-start, transparent, var(--border-hair, rgba(255, 255, 255, .12)));
}
.login .or-divider span {
  padding-inline: var(--space-1, .25rem);
}

/* -----------------------------------------------------------------------------
   [06] Dev login (collapsed details)
   -------------------------------------------------------------------------- */
.login__dev {
  margin-block-start: var(--space-1, .25rem);
  padding-block-start: var(--space-4, 1rem);
  border-block-start: 1px solid var(--border-hair, rgba(255, 255, 255, .1));
}
.login__dev > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, .5rem);
  cursor: pointer;
  list-style: none;
  min-block-size: var(--touch, 44px);
  font-size: var(--text-sm, .8125rem);
  font-weight: var(--weight-medium, 500);
  color: var(--text-muted, #8b97ab);
  transition: color var(--transition, 200ms);
}
.login__dev > summary::-webkit-details-marker { display: none; }
.login__dev > summary::before {
  content: "";
  inline-size: .5rem;
  block-size: .5rem;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--dur-fast, 150ms) var(--ease-out, ease);
}
.login__dev[open] > summary::before { transform: rotate(45deg); }
.login__dev > summary:hover { color: var(--text-body, #dbe1ea); }
.login__dev > form { margin-block-start: var(--space-3, .75rem); }

/* -----------------------------------------------------------------------------
   [07] Desktop split (≥900px): hero + card side by side
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .login {
    flex-direction: row;
    align-items: stretch;
  }
  .login__hero {
    flex: 1 1 54%;
    justify-content: space-between;
    gap: var(--space-8, 2rem);
    border-block-end: 0;
    border-inline-end: 1px solid var(--border-hair, rgba(255, 255, 255, .1));
  }
  .login__hero-inner { margin-block: auto; gap: var(--space-5, 1.25rem); }
  .login__panel {
    flex: 1 1 46%;
    align-items: center;
    min-block-size: 100dvh;
    overflow-y: auto;
    padding-inline: clamp(1.5rem, 4vw, 3.5rem);
  }
  .login__card { max-inline-size: 26rem; }
  /* the wordmark also appears large in the headline area, so keep the top
     lockup tidy on desktop */
  .login__brand { margin-block-end: var(--space-2, .5rem); }
}

/* Large screens: give the hero a touch more presence */
@media (min-width: 1280px) {
  .login__hero { flex-basis: 56%; }
  .login__panel { flex-basis: 44%; }
}

/* -----------------------------------------------------------------------------
   [08] Mobile refinements (<900px): compact centered brand header
   -------------------------------------------------------------------------- */
@media (max-width: 899.98px) {
  .login__hero {
    align-items: center;
    text-align: center;
    padding-block: clamp(1.75rem, 8vw, 2.75rem) clamp(1.5rem, 6vw, 2.25rem);
  }
  .login__hero-inner { align-items: center; }
  .login__brand { flex-direction: column; gap: var(--space-2, .5rem); }
  .login__logo { margin: auto; }
  .login__tagline { margin-inline: auto; }
  .login__features { justify-content: center; }
  .login__version { display: none; }
  .login__panel {
    flex: 1 1 auto;
    padding-block-start: 0;
    margin-block-start: calc(var(--space-6, 1.5rem) * -1);
  }
  .login__card { box-shadow: var(--shadow-lg, 0 18px 48px rgba(0, 0, 0, .5)); }
}

/* Very short viewports: trim hero height so the card stays reachable */
@media (max-width: 899.98px) and (max-height: 640px) {
  .login__headline,
  .login__features { display: none; }
}

/* -----------------------------------------------------------------------------
   [09] Motion
   -------------------------------------------------------------------------- */
@keyframes login-card-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes aurora-drift-1 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-6%, 8%, 0) scale(1.12); }
}
@keyframes aurora-drift-2 {
  from { transform: translate3d(0, 0, 0) scale(1.05); }
  to   { transform: translate3d(8%, -6%, 0) scale(1); }
}
@keyframes aurora-drift-3 {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: .35; }
  to   { transform: translate3d(5%, 6%, 0) scale(1.1); opacity: .5; }
}

.login__hero-inner > * {
  animation: login-card-in var(--dur-slow, 250ms) var(--ease-out, ease) both;
}
.login__hero-inner > *:nth-child(1) { animation-delay: 40ms; }
.login__hero-inner > *:nth-child(2) { animation-delay: 90ms; }
.login__hero-inner > *:nth-child(3) { animation-delay: 140ms; }
.login__hero-inner > *:nth-child(4) { animation-delay: 190ms; }

@media (prefers-reduced-motion: reduce) {
  .login__card,
  .login__hero-inner > *,
  .login__aurora {
    animation: none !important;
  }
}

/* ---- Explicit login-method labels (added) ---- */
.login__method {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-strong, #1a2233);
  margin-block: 1.15rem .55rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.login__method::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--accent, #6366f1);
  flex: 0 0 auto;
}
.login__method-help {
  text-align: center;
  margin-block-start: .45rem;
}
.login__note {
  text-align: center;
  margin-block-start: 1rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--border-hair, rgba(0, 0, 0, .08));
  color: var(--text-muted, #8b97ab);
}
.login__copyright {
  text-align: center;
  margin-block-start: 1.1rem;
  font-size: .78rem;
  color: var(--text-faint, #55637a);
}