/*
 * SrnControl(TM) - shared authentication layout (login + register).
 *
 * Root cause this fixes:
 *   The auth pages used <body class="layout-fluid">. Tabler ships
 *   `.layout-fluid .container, .layout-fluid [class*=" container-"] {
 *      max-width: 100%
 *   }`  (specificity 0,2,0)
 *   which overrides the narrow `.container-tight { max-width: 30rem }`
 *   (specificity 0,1,0). The result was an auth card stretched across the
 *   whole viewport.
 *
 * The rules below are scoped to .srn-auth-page / .srn-auth-container and use
 * equal-or-higher specificity, so they win regardless of stylesheet order and
 * do not affect any dashboard page.
 */

/* Full-height auth page. flex-start + auto margins centres short forms but
   never clips the top of the page when a form is taller than the viewport. */
.srn-auth-page {
  min-height: 100vh;
  justify-content: flex-start;
}

/* Compact auth column: ~440px on desktop, fluid on small screens. */
.srn-auth-page .srn-auth-container {
  width: 100%;
  max-width: 27.5rem; /* 440px */
  margin-inline: auto;
  margin-block: auto;
}

/* Text brand (SrnControl by SRN Cloud) above the card. */
.srn-auth-page .srn-auth-brand {
  line-height: 1.15;
}

/* Copyright / trademark notices below the card. */
.srn-auth-page .srn-auth-notice {
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* Full-page background for the auth screens (srn-long.png), slightly darkened
   and blurred. Opt in by putting `srn-auth-bg` on <body>; used by both login
   and register. The blur lives on a fixed ::before layer so the form itself
   stays crisp. Tune with the filter value; the negative inset hides the soft
   edge a blur creates. */
.srn-auth-bg {
  position: relative;
}

.srn-auth-bg::before {
  content: "";
  position: fixed;
  inset: -2rem;
  z-index: -1;
  pointer-events: none;
  background-image: url("/srn-long.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(6px) brightness(0.55);
}