/* ============================================================================
   iesmac-auth.css
   ============================================================================
   Auth front-door styling (login, register, forgot/reset password, OTP, 2FA).
   Extracted from the inline <style> block in fragments/auth/auth-layout.html
   so the layout carries no large inline style block (UI-standards gate).

   Scope: everything is namespaced under .auth-page / .auth-topbar so it cannot
   leak into the authenticated admin shell.

   LOAD ORDER: linked LAST in auth-layout's <head> — after head-vendor-css,
   head-skin-css (iesmac-support.css) and iesmac-marketing.css — so these
   auth-specific rules win the cascade. Keep that position if you move the link.
   ============================================================================ */

/* ========================================================================
   Skip-link (accessibility) — hidden by default, visible on keyboard focus
   ======================================================================== */
.auth-page .skip-link {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #222222;
  color: #ffffff;
  font-weight: 600;
  padding: 12px 24px;
  text-decoration: none;
  border-radius: 0 0 10px 10px;
  z-index: 10000;
  transition: top 0.2s ease-out;
  outline-offset: -2px;
}
.auth-page .skip-link:focus,
.auth-page .skip-link:focus-visible {
  top: 0;
  outline: 2px solid #ffffff;
}

/* ========================================================================
   Theme toggle — defensive override for auth-topbar context.
   Pins the show/hide of the toggle labels so they render correctly
   regardless of cascade order from the shared stylesheets.
   ======================================================================== */
.auth-topbar .theme-control-toggle .theme-control-toggle-label {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--phoenix-gray-700, #5f5f5f);
  transition: background-color 160ms ease, color 160ms ease;
  margin: 0;
}
.auth-topbar .theme-control-toggle .theme-control-toggle-label:hover {
  background-color: var(--phoenix-gray-200, #f1f1f1);
  color: var(--phoenix-primary, #1A8294);
}
.auth-topbar .theme-control-toggle .theme-control-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.auth-topbar .theme-control-toggle .theme-control-toggle-label i,
.auth-topbar .theme-control-toggle .theme-control-toggle-label .ti {
  font-size: 18px !important;
  width: 18px;
  height: 18px;
  line-height: 1;
}
:root:not(.dark) .auth-topbar .theme-control-toggle .theme-control-toggle-light {
  display: inline-flex !important;
}
:root:not(.dark) .auth-topbar .theme-control-toggle .theme-control-toggle-dark {
  display: none !important;
}
html.dark .auth-topbar .theme-control-toggle .theme-control-toggle-light {
  display: none !important;
}
html.dark .auth-topbar .theme-control-toggle .theme-control-toggle-dark {
  display: inline-flex !important;
}
html.dark .auth-topbar .theme-control-toggle .theme-control-toggle-label:hover {
  background-color: var(--phoenix-gray-800, #2a2a2a);
  color: var(--phoenix-primary, #8bc8d5);
}

/* ========================================================================
   Split-screen auth shell (Zoho/Linear): left brand panel + right form.
   Collapses to a single centered column below lg.
   ======================================================================== */
.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  background-color: var(--phoenix-body-bg);
}
@media (min-width: 992px) {
  .auth-page { grid-template-columns: 1.05fr 1fr; }
}

/* --- Left brand panel (always-dark teal, marketing language) --- */
.auth-brand-panel {
  display: none;
  position: relative;
  overflow: hidden;
  flex-direction: column;
  justify-content: space-between;
  padding: 3rem;
  color: #e8f1f3;
  background:
    radial-gradient(70% 80% at 85% 0%, color-mix(in srgb, var(--mk-accent, #2FBFD4) 22%, transparent), transparent 60%),
    linear-gradient(160deg, var(--mk-dark, #0b1d23), var(--mk-dark-2, #123039));
}
@media (min-width: 992px) { .auth-brand-panel { display: flex; } }
.auth-brand-panel::before {              /* dot grid */
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 20%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 30% 20%, #000 30%, transparent 75%);
  pointer-events: none;
}
.auth-brand-panel > * { position: relative; z-index: 1; }
.auth-brand-panel .ap-logo { display: inline-flex; align-items: center; gap: .6rem; }
.auth-brand-panel .ap-logo img { height: 34px; width: auto; }
.auth-brand-panel .ap-logo span { font-weight: 900; letter-spacing: -.02em; font-size: 1.25rem; color: #fff; }
.auth-brand-panel .ap-headline {
  font-weight: 900; letter-spacing: -.025em; line-height: 1.1;
  font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem); color: #fff; margin: 0 0 1rem;
}
.auth-brand-panel .ap-sub { color: rgba(232,241,243,.72); font-size: 1.05rem; line-height: 1.6; max-width: 42ch; }
.auth-brand-panel .ap-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.auth-brand-panel .ap-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem 1rem; border-radius: 100rem;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
  font-size: .82rem; font-weight: 700; color: #d9e8eb;
}
.auth-brand-panel .ap-foot { font-size: .8rem; color: rgba(232,241,243,.55); }

/* --- Right form column: topbar + centered card + footer, with brand glow --- */
.auth-form-col {
  position: relative;
  display: flex; flex-direction: column; min-height: 100vh;
  background-color: var(--phoenix-body-bg);
}
.auth-form-col::before {                 /* faint brand glow behind the card */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(40rem 30rem at 50% -10%, color-mix(in srgb, var(--phoenix-primary) 12%, transparent), transparent);
  pointer-events: none;
}
.auth-form-col > * { position: relative; z-index: 1; }

.auth-page .auth-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; flex-shrink: 0;
}
.auth-page .auth-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; color: var(--phoenix-body-color); text-decoration: none; }
.auth-page .auth-brand img { height: 28px; width: auto; }

.auth-page .auth-content {
  flex: 1 0 auto;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
}
.auth-page .auth-card-wrap { width: 100%; max-width: 440px; }

/* Glass-ish card with a gradient top accent — matches marketing surfaces */
.auth-page .auth-card-wrap .card {
  border-radius: 1.25rem;
  border: 1px solid var(--mk-border, rgba(49,55,74,.12));
  box-shadow: 0 24px 64px -28px color-mix(in srgb, var(--phoenix-primary) 35%, transparent);
  position: relative; overflow: hidden;
}
.auth-page .auth-card-wrap .card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(92deg, var(--phoenix-primary), var(--mk-accent, #2FBFD4));
}

/* Title/subtitle — Phoenix semantic vars auto-flip in dark mode */
.auth-page .auth-title {
  margin: 0 0 6px 0;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--phoenix-emphasis-color, var(--phoenix-gray-1100));
}
.auth-page .auth-subtitle {
  margin: 0 0 1.5rem 0;
  font-size: .875rem;
  color: var(--phoenix-secondary-color, var(--phoenix-gray-700));
}

/* Larger tap targets on mobile */
@media (max-width: 575.98px) {
  .auth-page .form-control,
  .auth-page .form-select {
    min-height: 44px;
  }
  .auth-page .btn {
    min-height: 44px;
    font-size: 15px;
  }
}

/* Footer styling override for auth pages — left-aligned on mobile,
   split layout on desktop */
.auth-page .footer {
  flex-shrink: 0;
  height: auto;
  min-height: 0;
  padding: 10px 24px;
  background: transparent;
  border-top: 1px solid var(--phoenix-border-color);
}
