/* ============================================================
   Bigul Connect — shared AUTH FLOW layout
   ------------------------------------------------------------
   Loaded LAST on the 12 pages that share the
     .page > .brand-panel + .form-panel > .topbar + .card
   shell: client-login-mpin, client-login-otp,
   client-otp-verification, enter-mpin, reset-mpin,
   select-account, set-mpin, set-password, vendor-login,
   vendor-forgot-password, vendor-password-reset-otp,
   vendor-reset-password.

   Those 12 per-page stylesheets are byte-identical in every rule
   this file touches, so the uniformity requirements live here as
   a single source of truth rather than being copy-pasted twelve
   times and drifting apart again.

   Load order per page: fonts.css -> <page>.css -> animations.css
   -> auth-layout.css. Last wins, so no !important is needed
   except where a page rule is equally specific and later-scoped.
   ============================================================ */


/* ── 1. CARD CENTRED, HEADER PINNED TO THE LOGO ──────────────
   Two requirements pull against each other here:

     a) the card sits vertically centred in the panel, and
     b) the header row stays on the brand logo's horizontal axis.

   They cannot both hold while the two share one flex column. Each
   screen's card is a different height — Set MPIN has two OTP rows,
   Enter MPIN has one, Set Password has two text fields (323-483px in
   all) — so centring the group drags the header along with it. Measured
   across four pages the header centre came out at 189 / 212 / 230 / 269
   while the logo sat at a constant 88.

   Splitting them satisfies both. The card keeps centring in the normal
   flow; the header is lifted out of the flow and pinned to the logo's
   axis, so it lands identically on all 12 pages whatever the card does.

   padding-top reserves the header's band so a tall card can never centre
   up underneath it. Its value also reproduces the exact card centre the
   flow layout already produced (494px), so nothing but the header moves. */
.form-panel{
  justify-content:center;
  padding:152px 24px 64px;
  position:relative;
}

/* The brand logo starts at 24px and is 128px tall, so its centre is 88px.
   A 48px-tall row centred on that axis therefore starts at 64px.
   width/max-width mirror .card so the row stays flush with the card below
   it — the earlier `padding:0 56px` only inset the buttons within the row
   and did not align the row to anything. */
.topbar{
  position:absolute;
  top:64px;
  left:0;
  right:0;
  margin:0 auto;
  width:calc(100% - 48px);   /* = the panel's 24px of side padding */
  max-width:448px;           /* = .card's max-width */
  min-height:48px;
  padding:0;
}


/* ── 2. HEADER ROW ───────────────────────────────────────────
   The row holds "Back to Home" and the theme toggle, left and right,
   as the per-page stylesheets already lay it out (`space-between`).
   `align-items:center` centres both on the row's axis at y=88, which
   is the same axis the brand-panel logo is pinned to below — so the
   buttons line up with the logo across the two columns.

   A logo was briefly added to this row as well, then removed: it
   duplicated the brand-panel mark that sits directly opposite it. */

/* The in-card logo is the ONLY logo below 768px, because .brand-panel
   is display:none there. It is deliberately left to the per-page rules
   (visible < 768px, hidden >= 768px) — do not hide it globally or the
   mobile screens lose their branding entirely. */

/* Size the brand logo to match the pre-login home header (192x128).
   The panel constrained Monogram.svg to a 96x96 SQUARE box; because
   object-fit:contain preserves the artwork's 1.5:1 ratio, only 96x64 was
   ever painted — the same letterboxing that shrank the dashboard logo.
   Sizing the box to the real ratio paints 192x128, identical to
   `nav.topnav .logo img` on home.html. The panel is 42% wide (~538px at
   1280) less 56px padding each side, so 192px fits comfortably. */
.brand-logo{ width:192px; height:128px; object-fit:contain; }

/* Keep that logo on the axis shared with the header buttons. The button row
   sits at 64px with a 48px min-height, so its centre is 64 + 24 = 88px.
   A 128px-tall logo therefore has to start at 88 - 64 = 24px. */
.brand-panel{ padding-top:24px; position:relative; }


/* ── 2b. LEFT COPY BLOCK CENTRED ON THE CARD'S AXIS ───────────
   .brand-mid sat at a centre of 501px on every page, while the card's
   centre lands between 314 and 394 — so the left copy read as dropped
   well below the form.

   It can't be fixed by centring the CARD instead: the card's height
   varies by page (323-483px), so centring it would put its top edge at a
   different Y on every screen and bring back exactly the jumping that
   section 1 removes. The stable side has to move.

   Taking .brand-mid out of flow and pinning its centre to a fixed line
   gives a centre that is content-independent, so BOTH columns stay put
   between screens. The line is the middle of the card's occupied band:
   fixed card top (152px) + half a typical card (~400px) = 352px.
   With .brand-mid absolute, the panel's space-between now applies to
   just the logo and the footer, which keeps them pinned top and bottom. */
:root{
  --auth-card-top:152px;      /* matches section 1's fixed card top */
  --auth-card-band:400px;     /* median card height across the 12 pages */
}
.brand-mid{
  position:absolute;
  left:56px;                  /* = .brand-panel's horizontal padding */
  right:56px;
  top:calc(var(--auth-card-top) + var(--auth-card-band) / 2);
  transform:translateY(-50%);
}


/* ── 3. FORM TOP PORTION ──────────────────────────────────────
   Larger heading block for visibility and balance. */
.card{ padding:36px 32px 32px; }

.card-head{ margin-bottom:28px; }   /* select-account was the lone 32px */
.card-head h2{ font-size:28px; line-height:1.25; }
.card-head p{ font-size:15px; margin-top:6px; }


/* ── 4. RESPONSIVE ────────────────────────────────────────────
   Mirrors the breakpoints the per-page stylesheets already use
   (768 / 400 / 360). These must be restated here because this
   file loads last — otherwise the desktop values above would
   override the pages' own mobile rules at every width. */
@media (max-width:768px){
  /* .brand-panel is display:none here, so there is no logo to align to.
     Return the header to the normal flow above the card — pinning it would
     otherwise leave a 152px gap at the top of every mobile screen. */
  .topbar{
    position:static;
    width:auto;
    max-width:none;
    margin:0 0 28px;
  }
  .form-panel{ padding:32px 16px 48px; }
  .card{ padding:24px 20px 20px; }
}

/* Below 768px the brand panel is hidden, so .mobile-logo inside the card
   is the only branding on screen. The review asked for a larger logo, so
   lift it from 32px to 40px and give the label matching weight. */
@media (max-width:768px){
  .mobile-logo img{ width:40px; height:40px; }
  .mobile-logo span{ font-size:15px; }
}

@media (max-width:400px){
  .topbar{ margin-bottom:28px; min-height:40px; }
  .card{ padding:20px 16px 16px; }
  .card-head h2{ font-size:22px; }
  .card-head p{ font-size:14px; }
}


/* ── 5. BRAND LOGO GLOW REMOVED ──────────────────────────────
   The mark carried TWO overlapping glows:

     a) a static `filter:drop-shadow(0 0 20px rgba(83,103,252,0.5))`
        declared on .brand-logo in all 12 per-page stylesheets, and
     b) the `bg-logo-glow` keyframes that .anim-logo-glow
        (css/animations.css) pulses over the top of it, which animate
        the drop-shadow rather than any other property.

   Clearing only (a) would leave the pulse running, so both go.

   They are cleared HERE — not in the 12 page files, and deliberately not
   in animations.css — because home.html and index.html also put
   .anim-logo-glow on their hero wordmarks, and those keep their glow.
   Scoping to .brand-logo confines this to the auth flow.

   Specificity: this file loads last, so plain `.brand-logo` wins on source
   order against the pages' equally specific rule; the two-class and
   three-class forms outrank `.anim-logo-glow` and
   `html.light .anim-logo-glow` in animations.css. */
.brand-logo{ filter:none; }
.brand-logo.anim-logo-glow{ animation:none; }
html.light .brand-logo.anim-logo-glow{ animation:none; }

.error-box:empty,
.success-box:empty {
  display: none !important;
}

.error-box {
  margin-bottom: 20px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
  word-break: break-word;
}
html.light .error-box {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}

.success-box {
  margin-bottom: 20px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
  word-break: break-word;
}
html.light .success-box {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}