/* ALPHA PRO — authentication pages (login, CSRF failure).
   Approved direction 24/10/2026: "plan sheet" — green drawing board + quiet paper form.
   RTL/LTR via logical properties only. No inline styles, no inline scripts (CSP-friendly). */

@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/ibm-plex-sans-condensed-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF;
}

:root {
  --ap-green-900: #0A3A33;
  --ap-green-800: #0B4A41;   /* brand panel, primary button */
  --ap-green-700: #0E5A4E;   /* focus, links, reveal button */
  --ap-green-busy: #3E6D63;
  --ap-paper: #F5F5F0;
  --ap-field: #FFFFFF;
  --ap-ink: #17201E;
  --ap-ink-2: #45514D;
  --ap-muted: #6D7873;
  --ap-line: #CDD3CB;
  --ap-line-2: #E3E6E0;
  --ap-red: #A3352A;
  --ap-red-bg: #FBEDEA;
  --ap-amber-ink: #7A4A06;
  --ap-radius: 7px;
  --ap-field-h: 50px;
  --ap-font: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ap-font-mark: 'IBM Plex Sans Condensed', 'IBM Plex Sans Arabic', sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body.auth {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--ap-paper);
  color: var(--ap-ink);
  font-family: var(--ap-font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.auth h1, .auth p { margin: 0; }
.auth a { color: var(--ap-green-700); }
.auth [hidden] { display: none !important; }
.auth-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- layout
   DOM order: .auth-pane, then .auth-brand. In RTL the pane is on the right,
   the green board on the left; in LTR it mirrors automatically. */
.auth-shell {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(380px, 41.7vw, 640px);
}
.auth-pane {
  display: flex;
  flex-direction: column;
  padding: 34px clamp(24px, 4vw, 56px);
  min-width: 0;
}
.auth-top { display: flex; justify-content: flex-start; min-height: 34px; }
.auth-body { margin: auto 0; padding: 40px 0; width: 100%; max-width: 380px; align-self: center; }
.auth-foot { font-size: 12px; color: var(--ap-muted); letter-spacing: .3px; }

/* ---------------------------------------------------------------- brand board */
.auth-brand {
  position: relative;
  overflow: hidden;
  background: var(--ap-green-800);
  color: #E8F1EC;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 56px;
}
.auth-brand::before,
.auth-brand::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.auth-brand::before {        /* fine plan-paper grid */
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 28px 28px;
}
.auth-brand::after {         /* major grid every 5 cells */
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 140px 140px;
}
.auth-mark { position: relative; z-index: 1; align-self: flex-start; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.auth-wordmark {
  font-family: var(--ap-font-mark);
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  letter-spacing: 5px;
  color: #fff;
  direction: ltr;
  margin: 0;
}
/* dimension line (cote) — same motif as the printed receipt */
.auth-cote { display: flex; align-items: center; align-self: stretch; height: 12px; margin-inline-end: 5px; color: rgba(255,255,255,.8); direction: ltr; }
.auth-cote b { flex: 1; border-top: 1px solid currentColor; }
.auth-cote i { position: relative; flex: none; width: 1px; height: 12px; background: currentColor; }
.auth-cote i::after { content: ""; position: absolute; top: 5px; left: -4.5px; width: 10px; height: 1.6px; background: currentColor; transform: rotate(-45deg); }
.auth-plan { position: relative; z-index: 1; width: 100%; max-width: 560px; height: auto; color: rgba(255,255,255,.28); }

/* ---------------------------------------------------------------- language switch (no JS) */
.auth-lang { display: inline-flex; margin: 0; border: 1px solid var(--ap-line); border-radius: 8px; overflow: hidden; background: #fff; }
.auth-lang button {
  appearance: none; border: 0; margin: 0; background: transparent;
  font: inherit; font-size: 13px; line-height: 1; color: var(--ap-ink-2);
  padding: 9px 14px; min-height: 34px; cursor: pointer;
}
.auth-lang button + button { border-inline-start: 1px solid var(--ap-line); }
.auth-lang button[aria-current="true"] { background: var(--ap-green-800); color: #fff; font-weight: 600; cursor: default; }
.auth-lang button:focus-visible { outline: 2px solid var(--ap-green-700); outline-offset: -2px; }

/* ---------------------------------------------------------------- form */
.auth-title { font-size: 30px; font-weight: 600; line-height: 1.25; letter-spacing: -.2px; }
.auth-lead { color: var(--ap-ink-2); font-size: 15px; line-height: 1.6; margin: 8px 0 28px !important; }
.auth-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.auth-label { font-size: 13.5px; font-weight: 600; color: var(--ap-ink-2); transition: color .15s; }
.auth-field:focus-within .auth-label { color: var(--ap-green-700); }
.auth-control {
  display: flex; align-items: center;
  height: var(--ap-field-h);
  background: var(--ap-field);
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius);
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.auth-control:focus-within { border-color: var(--ap-green-700); box-shadow: 0 0 0 3px rgba(14,90,78,.16); }
.auth-control input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; outline: 0; background: transparent;
  padding: 0 14px;
  font: inherit; font-size: 16px;            /* 16px: no zoom on iOS focus */
  color: var(--ap-ink);
  text-align: start;
}
.auth-control input[type="password"] { letter-spacing: 2px; }
.auth-field.is-invalid .auth-control { border-color: var(--ap-red); }
.auth-field.is-invalid .auth-control:focus-within { box-shadow: 0 0 0 3px rgba(163,53,42,.14); }
.auth-form.is-busy .auth-control { background: #F1F2EE; }
.auth-form.is-busy .auth-control input { color: var(--ap-muted); }
.auth-reveal {
  appearance: none; flex: none;
  border: 0; border-inline-start: 1px solid var(--ap-line-2);
  background: transparent; margin: 0;
  height: 26px; padding: 0 12px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ap-green-700);
  cursor: pointer;
}
.auth-reveal:focus-visible { outline: 2px solid var(--ap-green-700); outline-offset: 2px; border-radius: 4px; }
.auth-hint { font-size: 12.5px; color: var(--ap-amber-ink); }
.auth-hint--error { color: var(--ap-red); }
.auth-field > div:empty { display: none; }
.auth-submit {
  width: 100%; height: var(--ap-field-h); margin-top: 8px;
  border: 0; border-radius: var(--ap-radius);
  background: var(--ap-green-800); color: #fff;
  font: inherit; font-size: 16px; font-weight: 600; letter-spacing: .2px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  cursor: pointer;
}
.auth-submit:hover { background: var(--ap-green-900); }
.auth-submit:focus-visible { outline: 3px solid rgba(14,90,78,.35); outline-offset: 2px; }
.auth-submit[aria-disabled="true"] { background: var(--ap-green-busy); cursor: progress; }
.auth-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: auth-spin .8s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
.auth-note { margin-top: 22px !important; font-size: 12.5px; color: var(--ap-muted); line-height: 1.6; }
.auth-note a { font-weight: 600; text-decoration: none; }
.auth-note a:hover { text-decoration: underline; }

/* error / notice box: one message above the fields */
.auth-alert {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--ap-red-bg);
  border-inline-start: 3px solid var(--ap-red);
  border-start-end-radius: 6px; border-end-end-radius: 6px;
  padding: 11px 14px; margin: -6px 0 22px;
  font-size: 14px; color: #5E1E17;
}
.auth-alert:focus { outline: none; }
.auth-alert b { font-weight: 600; color: var(--ap-red); }

/* CSRF failure page */
.auth-blocked .auth-title { font-size: 28px; }
.auth-blocked .auth-lead { margin-bottom: 26px !important; }
.auth-button-link {
  display: inline-flex; align-items: center; justify-content: center; width: 100%;
  height: var(--ap-field-h); border-radius: var(--ap-radius);
  background: var(--ap-green-800); color: #fff !important;
  font-weight: 600; text-decoration: none;
}
.auth-button-link:hover { background: var(--ap-green-900); }
.auth-button-link:focus-visible { outline: 3px solid rgba(14,90,78,.35); outline-offset: 2px; }
.auth-code { margin-bottom: 16px; font-size: 12px; letter-spacing: 1.2px; font-weight: 600; color: var(--ap-red); text-transform: uppercase; }

/* Existing registration, account status and password setup share this frame. */
.auth-body > h1:not(.auth-title) { font-size: 26px; margin-bottom: 12px; }
.auth-body > p:not([class]), .auth .lead { color: var(--ap-ink-2); margin: 8px 0 20px; }
.auth .field { margin: 18px 0; }
.auth .field label { display: block; margin-bottom: 7px; font-size: 13.5px; font-weight: 600; }
.auth .field input, .auth .field select, .auth .field textarea {
  width: 100%; min-width: 0; min-height: var(--ap-field-h); padding: 10px 14px;
  border: 1px solid var(--ap-line); border-radius: var(--ap-radius);
  background: var(--ap-field); color: var(--ap-ink); font: inherit; font-size: 16px;
}
.auth .field input:focus, .auth .field select:focus, .auth .field textarea:focus {
  outline: 2px solid var(--ap-green-700); outline-offset: 2px;
}
.auth .helptext { font-size: 12px; color: var(--ap-muted); overflow-wrap: anywhere; }
.auth .errorlist, .auth .field [aria-invalid="true"] { color: var(--ap-red); }
.auth .btn { width: 100%; min-height: 50px; border: 0; border-radius: var(--ap-radius); background: var(--ap-green-800); color: white; font: inherit; cursor: pointer; padding: 10px; }
.auth .btn:focus-visible, .auth .links a:focus-visible { outline: 3px solid var(--ap-green-700); outline-offset: 3px; }
.auth .links { margin-top: 20px; font-size: 14px; }
.auth .status { padding: 16px; background: var(--ap-field); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); margin: 16px 0; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  .auth-spin { animation-duration: 2.4s; }
  .auth-control, .auth-label { transition: none; }
}

/* ---------------------------------------------------------------- responsive
   ≤ 900px: the board becomes a short band above the form (phone, tablet portrait).
   The language switch moves into the band so the form starts immediately. */
@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .auth-brand { grid-row: 1; height: 88px; padding: 0 20px 16px; justify-content: flex-end; }
  .auth-pane { grid-row: 2; padding: 22px 20px 20px; }
  .auth-top { position: absolute; top: 14px; inset-inline-end: 16px; min-height: 0; z-index: 2; }
  .auth-lang { background: transparent; border-color: rgba(255,255,255,.35); }
  .auth-lang button { color: #D8E6E0; padding: 7px 11px; min-height: 30px; font-size: 12px; }
  .auth-lang button + button { border-color: rgba(255,255,255,.35); }
  .auth-lang button[aria-current="true"] { background: #fff; color: var(--ap-green-800); }
  .auth-mark { gap: 7px; }
  .auth-wordmark { font-size: 24px; letter-spacing: 3px; }
  .auth-cote { height: 9px; }
  .auth-cote i { height: 9px; }
  .auth-cote i::after { top: 3.5px; width: 8px; left: -3.5px; }
  .auth-plan { position: absolute; width: 300px; inset-inline-end: -70px; top: -40px; color: rgba(255,255,255,.18); }
  .auth-body { margin: 0; padding: 0; max-width: 520px; }
  .auth-title { font-size: 24px; }
  .auth-lead { font-size: 14px; margin: 4px 0 20px !important; }
  .auth-field { margin-bottom: 14px; }
  .auth-note { margin-top: 16px !important; }
  .auth-foot { margin-top: 24px; width: 100%; max-width: 520px; align-self: center; }
}
/* Short viewports (phone landscape, or Android resizing for the keyboard):
   keep fields and button reachable while preserving the brand motifs. */
@media (max-width: 900px) and (max-height: 600px) {
  .auth-brand { height: 64px; padding-bottom: 12px; }
  .auth-wordmark { font-size: 20px; }
  .auth-top { top: 15px; }
  .auth:not(.auth-blocked) .auth-lead { display: none; }
  .auth-title { font-size: 21px; margin-bottom: 14px !important; }
}