/* =========================================================================
   AdaptiveLUG login/auth overlay for Element Web.
   Injected by nginx (sub_filter) into Element's index.html. It targets only the
   pre-login auth pages (.mx_AuthPage), so the in-app experience still follows
   the theme selected in config.json.

   Element 1.12 uses the Compound design system and renders logged-out pages in
   the OS theme (light), which clashes with the light-on-dark AdaptiveLUG
   wordmark. Rather than chase renamed classes we re-declare the relevant
   Compound colour TOKENS (CSS custom properties) for the auth subtree - cards,
   fields, buttons and text all derive from these. config.json also sets
   use_system_theme:false so Element honours the dark default_theme logged out.
   ========================================================================= */

.mx_AuthPage {
  /* Surfaces */
  --cpd-color-bg-canvas-default: #0F1216;
  --cpd-color-bg-canvas-default-level-1: #171B21;
  --cpd-color-bg-subtle-primary: #1E242C;
  --cpd-color-bg-subtle-secondary: #171B21;
  --cpd-color-bg-action-secondary-rest: #0F1216;
  /* Text + icons */
  --cpd-color-text-primary: #F2F4F7;
  --cpd-color-text-secondary: #AAB3BD;
  --cpd-color-icon-primary: #F2F4F7;
  --cpd-color-icon-secondary: #AAB3BD;
  /* Borders */
  --cpd-color-border-interactive-primary: #3A424C;
  --cpd-color-border-interactive-secondary: #2A313A;
  /* Brand accent: primary button + links in AdaptiveLUG orange */
  --cpd-color-bg-action-primary-rest: #F15A22;
  --cpd-color-bg-action-primary-hovered: #C2410C;
  --cpd-color-bg-action-primary-pressed: #C2410C;
  --cpd-color-text-on-solid-primary: #0A0C0F;
  --cpd-color-text-action-accent: #F15A22;
  --cpd-color-text-action-primary: #F2F4F7;
  --cpd-color-text-link-external: #F15A22;

  /* Legacy (pre-Compound) variables. */
  --background: #0F1216;
  --primary-content: #F2F4F7;
  --secondary-content: #AAB3BD;
  --accent: #F15A22;

  /* Branded background image behind the modal. */
  background-color: #0F1216 !important;
  background-image: url('/adlug/element-login-bg.svg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* A single, solid dark card. Drop Element's frosted "modal with blur" panel so
   the card is one uniform dark surface on every auth page. */
.mx_AuthPage_modalBlur { display: none !important; }
.mx_AuthPage_modal,
.mx_AuthPage_modalContent,
.mx_AuthBody,
.mx_AuthPage .mx_AuthBody,
.mx_Welcome .mx_AuthBody {
  background-color: #171B21 !important;
  color: #F2F4F7 !important;
}

/* -------------------------------------------------------------------------
   Wordmark: lift it OUT of the card and centre it above, for a bit of interest.
   We hide Element's built-in logo (and the two-column left header panel that
   held it on the sign-in/create/forgot pages) and draw a centred wordmark just
   above the modal with a pseudo-element. Note: collapsing the left panel also
   removes the per-page language picker from those pages (it remains on the
   welcome screen and in in-app settings).
   ------------------------------------------------------------------------- */
/* Hide Element's built-in logo on EVERY auth page. The welcome page renders it
   as an <img>, the sign-in/create/forgot pages render it in the left header
   column - match by the image source to catch both. */
.mx_AuthHeaderLogo,
.mx_AuthPage img[src*="adlug-wordmark"] { display: none !important; }
.mx_AuthHeader { display: none !important; }

/* Centre the card in the viewport and pin the footer to the bottom. */
.mx_AuthPage {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  overflow-y: auto !important;
}
.mx_AuthFooter {
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: 16px;
}

/* Wordmark centred just above the card (anchored to the card itself). */
.mx_AuthPage_modal { overflow: visible !important; }
.mx_AuthPage_modalContent {
  position: relative !important;
  overflow: visible !important;
  margin-top: 90px;            /* top padding: wordmark + breathing room above it */
}
.mx_AuthPage_modalContent::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -60px;                  /* ~30px below the card's top edge */
  transform: translateX(-50%);
  width: 240px;
  height: 49px;
  /* Centre-anchored wordmark so the glyphs sit dead-centre regardless of font
     width (the default wordmark is left-anchored with empty space on the right). */
  background: url('/adlug/adlug-wordmark-centered.svg') center center / contain no-repeat;
  pointer-events: none;
}

/* Give the form column comfortable width now that it is single-column. */
.mx_AuthBody { min-width: 320px; }

/* Strong, visible keyboard focus for accessibility. */
.mx_AuthPage input:focus-visible,
.mx_AuthPage button:focus-visible,
.mx_AuthPage a:focus-visible {
  outline: 3px solid #F15A22 !important;
  outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
  .mx_AuthPage * { animation: none !important; transition: none !important; }
}