/* ==========================================================================
   Nizam — sign-in screen
   --------------------------------------------------------------------------
   Scoped entirely to `body.nz-login-body`, loaded only by
   resources/views/layouts/auth-login.blade.php. Nothing here leaks into the
   authenticated application.

   Direction: the same "Ledger" system as the rest of Nizam — flat surfaces,
   hairlines instead of shadows, 3px radius, Almarai, one blue accent.

   Two things drove the layout:

   1. The brand panel is deep blue, and public/img/logo-small.png is a dark
      indigo wordmark on a transparent ground. Reversed out on blue it is
      unreadable, so the logo lives on the WHITE column and the blue column
      carries type only. Do not move the <img> onto .nz-login-brand without a
      white-knockout asset to go with it.

   2. Arabic RTL must put the two columns on opposite sides from English LTR.
      That is done with DOM order plus a plain two-column grid: the brand
      panel is FIRST in the markup, so the inline axis puts it on the right in
      RTL and on the left in LTR. There is no direction-specific rule below,
      and no physical left/right anywhere in this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

/* nizam-compat.css sets `body{background: … !important}`, so this has to shout
   back to own the ground on this one screen. */
body.nz-login-body{
  background: var(--nz-bg) !important;
  font-family: var(--nz-font);
  color: var(--nz-ink);
  margin: 0;
  min-block-size: 100vh;
  min-block-size: 100dvh;
}

.nz-login{
  min-block-size: 100vh;
  min-block-size: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* one column until the panel appears */
}

/* --------------------------------------------------------------------------
   Brand panel — the ledger field
   -------------------------------------------------------------------------- */

.nz-login-brand{
  display: none;                            /* desktop only; see the media query */
  position: relative;
  overflow: hidden;
  background-color: var(--nz-blue-900);
  color: var(--nz-white);
  padding-block: var(--nz-space-10);
  padding-inline-start: 104px;              /* clears the margin rule below */
  padding-inline-end: var(--nz-space-10);
}

/*
 * Ruled paper, not decoration for its own sake: hard-edged 1px hairlines at a
 * fixed rhythm. The colour stops are coincident so nothing actually blends —
 * this is a repeating rule, not a gradient fill.
 */
.nz-login-brand::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, .05) 0, rgba(255, 255, 255, .05) 1px,
      transparent 1px, transparent 40px
    );
  pointer-events: none;
}

/* The margin rule down the ledger. Logical inset, so it sits on the binding
   side in both directions. */
.nz-login-brand::after{
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 72px;
  inline-size: 1px;
  background: rgba(255, 255, 255, .12);
  pointer-events: none;
}

.nz-login-brand-inner{
  position: relative;                       /* above the rules */
  z-index: 1;
  block-size: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--nz-space-5);
  max-inline-size: 30rem;
}

.nz-login-eyebrow{
  margin: 0;
  font-size: var(--nz-text-sm);
  font-weight: var(--nz-fw-bold);
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .72);
}

.nz-login-statement{
  margin: 0;
  font-size: var(--nz-text-2xl);
  font-weight: var(--nz-fw-bold);
  line-height: var(--nz-lh-tight);
  text-wrap: balance;
}

.nz-login-brand-note{
  margin: 0;
  font-size: var(--nz-text-base);
  line-height: var(--nz-lh-body);
  color: rgba(255, 255, 255, .78);
}

/* --------------------------------------------------------------------------
   Form column
   -------------------------------------------------------------------------- */

.nz-login-main{
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  padding: var(--nz-space-5);
}

.nz-login-topbar{
  inline-size: 100%;
  max-inline-size: 25rem;                   /* same column as the form below */
  margin-inline: auto;
  display: flex;
  justify-content: flex-end;                /* logical: follows the direction */
  align-items: center;
  gap: var(--nz-space-3);
  min-block-size: var(--nz-tap-min);
}

.nz-login-center{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-block: var(--nz-space-6);
}

.nz-login-col{
  inline-size: 100%;
  max-inline-size: 25rem;                   /* 400px — a comfortable single column */
}

.nz-login-foot{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--nz-space-2) var(--nz-space-5);
  padding-block-start: var(--nz-space-4);
  font-size: var(--nz-text-sm);
  color: var(--nz-ink-2);
}

.nz-login-foot a{
  color: var(--nz-brand);
  text-decoration: none;
  padding-block: var(--nz-space-2);         /* real hit area on a phone */
}
.nz-login-foot a:hover,
.nz-login-foot a:focus{ color: var(--nz-brand-hover); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Brand area inside the form column
   -------------------------------------------------------------------------- */

.nz-login-mark{
  display: inline-flex;
  margin-block-end: var(--nz-space-6);
}

.nz-login-mark img{
  block-size: 34px;
  inline-size: auto;
  max-inline-size: 100%;
  display: block;
}

.nz-login-title{
  margin: 0 0 var(--nz-space-1);
  font-size: var(--nz-text-2xl);
  font-weight: 800;                          /* Almarai ExtraBold ships on disk */
  line-height: var(--nz-lh-tight);
  color: var(--nz-ink);
}

.nz-login-sub{
  margin: 0 0 var(--nz-space-6);
  font-size: var(--nz-text-base);
  color: var(--nz-ink-2);
}

/* --------------------------------------------------------------------------
   Fields
   -------------------------------------------------------------------------- */

.nz-login-form{ display: block; }

.nz-field{ margin-block-end: var(--nz-space-4); }

.nz-field-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--nz-space-3);
  margin-block-end: var(--nz-space-2);
}

.nz-field-label{
  font-size: var(--nz-text-sm);
  font-weight: var(--nz-fw-bold);
  color: var(--nz-ink);
}

/* A required field has to be identifiable by more than colour. The asterisk
   is decorative — the <input required> attribute is what is announced. */
.nz-req{
  color: var(--nz-due-fg);
  margin-inline-start: 2px;
}

.nz-field-link{
  display: inline-flex;
  align-items: center;
  min-block-size: 32px;
  padding-block: var(--nz-space-1);
  font-size: var(--nz-text-sm);
  color: var(--nz-brand);
  text-decoration: none;
}
.nz-field-link:hover, .nz-field-link:focus{
  color: var(--nz-brand-hover);
  text-decoration: underline;
}

.nz-input-wrap{ position: relative; }

.nz-login-body .nz-input{
  inline-size: 100%;
  block-size: 46px;                          /* over the 44px floor */
  padding-inline: var(--nz-space-3);
  border: 1px solid var(--nz-field-edge);    /* 3.38:1 — WCAG 1.4.11 */
  border-radius: var(--nz-radius);
  background: var(--nz-surface);
  color: var(--nz-ink);
  font-family: var(--nz-font);
  font-size: var(--nz-text-base);
  line-height: 1.4;
  box-shadow: none;
  transition: border-color var(--nz-transition), box-shadow var(--nz-transition);
}

.nz-login-body .nz-input::placeholder{ color: var(--nz-ink-2); opacity: 1; }

.nz-login-body .nz-input:focus{
  outline: none;
  border-color: var(--nz-focus);
  box-shadow: var(--nz-focus-ring);
}

/* Room for the toggle button so the caret never runs underneath it. */
.nz-login-body .nz-input-has-toggle{ padding-inline-end: 48px; }

.nz-input-error .nz-input,
.nz-login-body .nz-input-error{
  border-color: var(--nz-due-fg);
}

.nz-field-error{
  display: block;
  margin-block-start: var(--nz-space-2);
  font-size: var(--nz-text-sm);
  color: var(--nz-due-fg);
}

/* --------------------------------------------------------------------------
   Password visibility toggle
   -------------------------------------------------------------------------- */

.nz-login-body .nz-pw-toggle{
  position: absolute;
  inset-inline-end: 1px;
  inset-block-start: 1px;
  block-size: 44px;
  inline-size: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--nz-ink-2);
  border-radius: var(--nz-radius);
  cursor: pointer;
}
.nz-login-body .nz-pw-toggle:hover{ color: var(--nz-ink); }
.nz-login-body .nz-pw-toggle:focus-visible{
  outline: none;
  box-shadow: var(--nz-focus-ring);
  color: var(--nz-ink);
}
.nz-login-body .nz-pw-toggle svg{
  inline-size: 20px;
  block-size: 20px;
  stroke: currentColor;
}

/* --------------------------------------------------------------------------
   Remember me
   -------------------------------------------------------------------------- */

/* Two classes deep on purpose. nizam-compat.css matches this row as
   `label:has(> input[type=checkbox])` and pins it to a 28px app-wide default;
   the sign-in screen wants the 44px comfortable target instead, and a single
   class would lose the cascade to it. */
.nz-login-body .nz-remember{
  display: flex;
  align-items: center;
  gap: var(--nz-space-2);
  min-block-size: var(--nz-tap-min);
  cursor: pointer;
  font-size: var(--nz-text-base);
  color: var(--nz-ink);
  margin-block-end: var(--nz-space-3);
  inline-size: fit-content;
}

.nz-login-body .nz-remember input[type="checkbox"]{
  -webkit-appearance: none;
  appearance: none;
  inline-size: 24px;
  block-size: 24px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--nz-field-edge);
  border-radius: var(--nz-radius-sm);
  background: var(--nz-surface);
  cursor: pointer;
  flex-shrink: 0;
  display: inline-grid;
  place-content: center;
  transition: background var(--nz-transition), border-color var(--nz-transition);
}
.nz-login-body .nz-remember input[type="checkbox"]::before{
  content: "";
  inline-size: 12px;
  block-size: 8px;
  /* Physical, not logical: a tick is a glyph, and a logical border would
     mirror it into a backwards check in RTL. */
  border-left: 2px solid var(--nz-on-brand);
  border-bottom: 2px solid var(--nz-on-brand);
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0;
}
.nz-login-body .nz-remember input[type="checkbox"]:checked{
  background: var(--nz-brand);
  border-color: var(--nz-brand);
}
.nz-login-body .nz-remember input[type="checkbox"]:checked::before{ opacity: 1; }
.nz-login-body .nz-remember:hover input[type="checkbox"]{ border-color: var(--nz-brand); }
.nz-login-body .nz-remember input[type="checkbox"]:focus-visible{
  outline: none;
  box-shadow: var(--nz-focus-ring);
  border-radius: var(--nz-radius-sm);
}

/* --------------------------------------------------------------------------
   Primary action
   -------------------------------------------------------------------------- */

.nz-login-body .nz-login-submit{
  inline-size: 100%;
  min-block-size: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--nz-brand);
  border-radius: var(--nz-radius);
  background: var(--nz-brand);
  color: var(--nz-on-brand);
  font-family: var(--nz-font);
  font-size: var(--nz-text-base);
  font-weight: var(--nz-fw-bold);
  cursor: pointer;
  transition: background var(--nz-transition), border-color var(--nz-transition);
}
.nz-login-body .nz-login-submit:hover{
  background: var(--nz-brand-hover);
  border-color: var(--nz-brand-hover);
  color: var(--nz-on-brand);
}
.nz-login-body .nz-login-submit:active{
  background: var(--nz-blue-900);
  border-color: var(--nz-blue-900);
}
.nz-login-body .nz-login-submit:focus-visible{
  outline: none;
  box-shadow: var(--nz-focus-ring);
}

.nz-login-register{
  margin-block-start: var(--nz-space-5);
  font-size: var(--nz-text-sm);
  color: var(--nz-ink-2);
}
.nz-login-register a{ color: var(--nz-brand); text-decoration: none; font-weight: var(--nz-fw-bold); }
.nz-login-register a:hover, .nz-login-register a:focus{ color: var(--nz-brand-hover); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Status banner
   --------------------------------------------------------------------------
   "Business inactive", "user inactive", "login not allowed" all come back as
   a flashed `status` with success = 0. layouts/auth2 only rendered the toast
   hook when status.success was TRUTHY, so those three messages were being
   dropped on the floor. They are shown here instead, in the page, where an
   error about the account you just tried to use belongs.
   -------------------------------------------------------------------------- */

.nz-login-alert{
  display: flex;
  align-items: flex-start;
  gap: var(--nz-space-2);
  padding: var(--nz-space-3);
  margin-block-end: var(--nz-space-5);
  border: 1px solid var(--nz-due-edge);
  border-radius: var(--nz-radius);
  background: var(--nz-due-bg);
  color: var(--nz-due-fg);
  font-size: var(--nz-text-sm);
  line-height: var(--nz-lh-body);
}
.nz-login-alert svg{
  inline-size: 18px;
  block-size: 18px;
  flex-shrink: 0;
  margin-block-start: 3px;
  stroke: currentColor;
}
.nz-login-alert-ok{
  border-color: var(--nz-paid-edge);
  background: var(--nz-paid-bg);
  color: var(--nz-paid-fg);
}

/* --------------------------------------------------------------------------
   Language switcher
   --------------------------------------------------------------------------
   Same <details> / .change_lang markup the rest of the auth screens use, so
   the existing handler keeps working; only the skin is different.
   -------------------------------------------------------------------------- */

.nz-lang{ position: relative; }

.nz-lang > summary{
  display: inline-flex;
  align-items: center;
  gap: var(--nz-space-2);
  min-block-size: var(--nz-tap-min);
  padding-inline: var(--nz-space-3);
  border: 1px solid var(--nz-line-strong);
  border-radius: var(--nz-radius);
  background: var(--nz-surface);
  color: var(--nz-ink);
  font-size: var(--nz-text-sm);
  font-weight: var(--nz-fw-bold);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.nz-lang > summary::-webkit-details-marker{ display: none; }
.nz-lang > summary:hover{ border-color: var(--nz-field-edge); }
.nz-lang > summary:focus-visible{ outline: none; box-shadow: var(--nz-focus-ring); }
.nz-lang > summary svg{ inline-size: 16px; block-size: 16px; stroke: currentColor; flex-shrink: 0; }

.nz-lang-menu{
  position: absolute;
  z-index: 30;
  inset-block-start: calc(100% + 4px);
  inset-inline-end: 0;                       /* opens inward in both directions */
  min-inline-size: 12rem;
  margin: 0;
  padding: var(--nz-space-1);
  list-style: none;
  background: var(--nz-surface);
  border: 1px solid var(--nz-line-strong);
  border-radius: var(--nz-radius);
  box-shadow: var(--nz-shadow-md);
}
.nz-lang-menu li{ list-style: none; }
.nz-lang-menu a{
  display: flex;
  align-items: center;
  min-block-size: var(--nz-tap-min);
  padding-inline: var(--nz-space-3);
  border-radius: var(--nz-radius-sm);
  color: var(--nz-ink);
  font-size: var(--nz-text-md);
  text-decoration: none;
  cursor: pointer;
}
.nz-lang-menu a:hover,
.nz-lang-menu a:focus{ background: var(--nz-brand-soft); color: var(--nz-brand-hover); }
.nz-lang-menu a[aria-current="true"]{ font-weight: var(--nz-fw-bold); color: var(--nz-brand); }

/* --------------------------------------------------------------------------
   Demo-environment shop picker. Only rendered when APP_ENV=demo; kept out of
   the login column so it cannot push the form around.
   -------------------------------------------------------------------------- */

.nz-login-demo{
  inline-size: 100%;
  max-inline-size: 25rem;
  margin-block-start: var(--nz-space-6);
  padding-block-start: var(--nz-space-5);
  border-block-start: 1px solid var(--nz-line);
}

/* --------------------------------------------------------------------------
   ≥992px — the split appears
   -------------------------------------------------------------------------- */

@media (min-width: 992px){
  .nz-login{
    /* The form column is first in the DOM, so it lands on the reading-start
       side - right in RTL, left in LTR - and the brand panel takes the other
       side. That is the whole mirroring mechanism. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  }
  .nz-login-brand{ display: block; }
  .nz-login-main{ padding: var(--nz-space-6) var(--nz-space-10); }
  .nz-login-col{ max-inline-size: 25rem; }
}

@media (min-width: 1280px){
  .nz-login{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .nz-login-mark img{ block-size: 38px; }
  .nz-login-brand{ padding-inline-start: 136px; }
  .nz-login-brand::after{ inset-inline-start: 96px; }
}

/* --------------------------------------------------------------------------
   Small screens — the form is the whole job
   -------------------------------------------------------------------------- */

@media (max-width: 575px){
  .nz-login-main{ padding: var(--nz-space-4); }
  .nz-login-title{ font-size: var(--nz-text-xl); }
  .nz-login-mark{ margin-block-end: var(--nz-space-5); }
  .nz-login-mark img{ block-size: 30px; }
  .nz-login-center{ padding-block: var(--nz-space-4); }
}

/* Short landscape phone: stop the vertical centring from pushing the submit
   button off the bottom. */
@media (max-height: 560px){
  .nz-login-center{ justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce){
  .nz-login-body *{ transition: none !important; }
}