/* ==========================================================================
 * AGS Portal styles — visual language borrowed from the ERP login page
 * (AGS-red accent, calm canvas, glass card) so the hop from portal to tenant
 * login feels like one product.
 *
 * Structure: theme tokens (dark default + light via prefers-color-scheme AND
 * via [data-theme] for the manual toggle) → base → components → doc pages.
 * RTL-first: LOGICAL properties only (inset-inline, margin-block, start/end) —
 * the page defaults to Arabic and flips with dir="ltr". All motion freezes
 * under prefers-reduced-motion.
 *
 * Fonts: deliberately a SYSTEM stack. Self-hosting a Latin+Arabic family
 * without a subsetting build step costs 200KB+ and fights the "instant load,
 * zero dependencies" property; Segoe UI / SF / Roboto all ship strong Arabic.
 * ========================================================================== */

/* ── Theme tokens — DARK (default) ── */
:root {
  color-scheme: dark;
  --bg: #0a1020;
  --card: rgba(17, 24, 43, 0.82);
  --card-border: rgba(255, 255, 255, 0.09);
  --text: #eef1f8;
  --text-2: #a3acc2;            /* secondary: labels, hints, footer */
  --field-bg: rgba(255, 255, 255, 0.05);
  --field-solid: #151d33;       /* opaque ≈ of field-bg over card, for autofill */
  --field-border: rgba(255, 255, 255, 0.34); /* ≥3:1 vs fill+card (WCAG 1.4.11) */
  --accent: #e8323c;            /* brand red — large text / graphics only */
  --btn-from: #de2933;          /* button gradient, darkened for AA white text */
  --btn-to: #a4141f;
  --link: #ff97a0;
  --focus: #ffffff;             /* neutral focus ring (red would read as error) */
  --error-text: #ff8a92;
  --error-bg: rgba(232, 50, 60, 0.12);
  --error-border: rgba(232, 50, 60, 0.38);
  --ok-text: #86dcab;
  --ok-bg: rgba(125, 216, 160, 0.1);
  --ok-border: rgba(125, 216, 160, 0.3);
  --warn-text: #ffce85;
  --glow-a: rgba(232, 50, 60, 0.22);
  --glow-b: rgba(46, 74, 158, 0.28);
  --shadow: 0 24px 70px rgba(2, 6, 18, 0.55);
}

/* ── Theme tokens — LIGHT ──
 * Two selectors on purpose (CSS cannot share a block without a preprocessor):
 * the media query covers "no manual choice, system is light"; [data-theme]
 * covers the manual toggle. KEEP THE TWO BLOCKS IDENTICAL. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f4f6fb;
    --card: #ffffff;
    --card-border: rgba(15, 23, 42, 0.1);
    --text: #101828;
    --text-2: #4a5468;
    --field-bg: #f8fafc;
    --field-solid: #f8fafc;
    --field-border: rgba(15, 23, 42, 0.48); /* ≥3:1 vs fill+card (WCAG 1.4.11) */
    --accent: #d7202b;
    --btn-from: #d7202b;
    --btn-to: #a3111c;
    --link: #b3222c;
    --focus: #1e293b;
    --error-text: #b3222c;
    --error-bg: #fdecec;
    --error-border: rgba(211, 47, 47, 0.35);
    --ok-text: #146c3d;
    --ok-bg: #e9f7ef;
    --ok-border: rgba(20, 108, 61, 0.3);
    --warn-text: #8a5a00;
    --glow-a: rgba(232, 50, 60, 0.1);
    --glow-b: rgba(46, 74, 158, 0.1);
    --shadow: 0 18px 50px rgba(15, 23, 42, 0.1);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6fb;
  --card: #ffffff;
  --card-border: rgba(15, 23, 42, 0.1);
  --text: #101828;
  --text-2: #4a5468;
  --field-bg: #f8fafc;
  --field-solid: #f8fafc;
  --field-border: rgba(15, 23, 42, 0.48); /* ≥3:1 vs fill+card (WCAG 1.4.11) */
  --accent: #d7202b;
  --btn-from: #d7202b;
  --btn-to: #a3111c;
  --link: #b3222c;
  --focus: #1e293b;
  --error-text: #b3222c;
  --error-bg: #fdecec;
  --error-border: rgba(211, 47, 47, 0.35);
  --ok-text: #146c3d;
  --ok-bg: #e9f7ef;
  --ok-border: rgba(20, 108, 61, 0.3);
  --warn-text: #8a5a00;
  --glow-a: rgba(232, 50, 60, 0.1);
  --glow-b: rgba(46, 74, 158, 0.1);
  --shadow: 0 18px 50px rgba(15, 23, 42, 0.1);
}

/* ── Base ── */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { min-height: 100%; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans",
    "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  display: grid;
  place-items: center;
  padding: 20px 16px;
  transition: background-color 0.25s ease, color 0.25s ease;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

::selection { background: rgba(232, 50, 60, 0.3); }

/* Visible-only-for-keyboard focus: neutral ring, offset so it never melts
 * into an accent border or the red button. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* Feather-style inline icons inherit text color everywhere. */
.icon {
  width: 1em; height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.noscript {
  position: fixed;
  inset-block-start: 0; inset-inline: 0;
  z-index: 10;
  background: var(--error-bg);
  color: var(--error-text);
  border-block-end: 1px solid var(--error-border);
  padding: 12px 16px;
  text-align: center;
  font-size: 0.9rem;
}

/* ── Ambient canvas ── */
.aurora { position: fixed; inset: 0; overflow: hidden; z-index: 0; }
.orb {
  position: absolute;
  width: 55vmax; height: 55vmax;
  border-radius: 50%;
  filter: blur(90px);
  animation: drift 26s ease-in-out infinite alternate;
}
.orb-a { background: var(--glow-a); inset-block-start: -20vmax; inset-inline-start: -15vmax; }
.orb-b { background: var(--glow-b); inset-block-end: -22vmax; inset-inline-end: -12vmax; animation-delay: -13s; }
@keyframes drift { to { transform: translate3d(6vmax, 4vmax, 0) scale(1.08); } }

/* ── Top controls (theme + language) ── */
.top-controls {
  position: fixed;
  inset-block-start: 14px;
  inset-inline-end: 16px;
  z-index: 2;
  display: flex;
  gap: 8px;
}
.control-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--card);
  color: var(--text-2);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.control-btn:hover { color: var(--text); border-color: var(--field-border); }
.icon-btn { padding: 8px 10px; }
.control-btn .icon { font-size: 1.05rem; }
/* Theme button shows the theme you'll GET: sun while dark, moon while light. */
.icon-moon { display: none; }
:root[data-theme="light"] .icon-sun { display: none; }
:root[data-theme="light"] .icon-moon { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .icon-sun { display: none; }
  :root:not([data-theme="dark"]) .icon-moon { display: block; }
}

/* ── Page column: card + legal footer ── */
.page {
  position: relative;
  z-index: 1;
  width: min(430px, 100%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  /* Keep the card clear of the fixed corner controls on short/small screens. */
  margin-block-start: 40px;
}

/* ── Card ── */
.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 34px 30px 22px;
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  animation: rise 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

.card-head { text-align: center; margin-block-end: 24px; }
.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-block-end: 16px;
  direction: ltr;                /* a logo lockup never flips with the layout */
}
.brand-mark { width: 40px; height: 40px; }
.brand-mark rect { fill: var(--accent); }
.brand-mark text {
  fill: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 38px;
  font-weight: 800;
}
.wordmark {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--accent);
  direction: ltr;                /* the wordmark is a Latin logo — never flips */
}
.wordmark span { color: var(--text); font-weight: 600; }
.card-head h1 { font-size: 1.25rem; font-weight: 700; margin-block-end: 6px; }
.card-head .sub { font-size: 0.85rem; color: var(--text-2); line-height: 1.6; }

/* ── Fields ── */
.field { margin-block-end: 16px; }
.field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-2);
  margin-block-end: 6px;
}
.field input {
  width: 100%;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;               /* ≥16px: prevents iOS zoom-on-focus */
  padding: 11px 13px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input::placeholder { color: var(--text-2); opacity: 1; } /* full opacity: AA 4.5:1 in light theme */
.field input:focus-visible {
  /* Transparent (not none): invisible normally — the accent border + ring
   * below carry focus — but painted in the system highlight color under
   * Windows High Contrast / forced-colors, where box-shadow is stripped. */
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232, 50, 60, 0.18);
}
.field.invalid input { border-color: var(--error-border); }
.field .hint { font-size: 0.74rem; color: var(--text-2); margin-block-start: 5px; line-height: 1.5; }

/* Dark-theme autofill: kill the browser's yellow/white flash. */
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--field-solid) inset;
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
}

/* Codes/usernames/passwords are Latin — never flip them inside the RTL layout */
.ltr { direction: ltr; text-align: start; unicode-bidi: plaintext; }

/* Live company-name confirm under the code field. */
.code-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  margin-block-start: 6px;
  animation: fade-in 0.2s ease both;
}
.code-status .icon { font-size: 0.9rem; }
.code-status .icon-ok, .code-status .icon-warn { display: none; }
.code-status.ok { color: var(--ok-text); }
.code-status.ok .icon-ok { display: block; }
.code-status.warn { color: var(--warn-text); }
.code-status.warn .icon-warn { display: block; }
@keyframes fade-in { from { opacity: 0; } }

/* LTR island: passwords are Latin, so the input is LTR — the eye button must
 * resolve its inline-end against the SAME direction as the input's padding,
 * or they land on opposite sides in the RTL layout. */
.password-box { position: relative; direction: ltr; }
.password-box input { padding-inline-end: 46px; }
.eye {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--text-2);
  font-size: 1.1rem;
  cursor: pointer;
  transition: color 0.15s ease;
}
.eye:hover { color: var(--text); }
.eye .icon-eye-off { display: none; }
.eye[aria-pressed="true"] .icon-eye { display: none; }
.eye[aria-pressed="true"] .icon-eye-off { display: block; }

.caps-warning {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--warn-text);
  margin-block-start: 6px;
  animation: fade-in 0.2s ease both;
}

/* ── Remember-code checkbox (native input, themed via accent-color) ── */
.remember {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.82rem;
  color: var(--text-2);
  cursor: pointer;
  margin-block-end: 18px;
  -webkit-user-select: none;
  user-select: none;
}
.remember input {
  width: 16px; height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Submit ── */
.submit {
  width: 100%;
  min-height: 48px;              /* stable height when dots replace the label */
  background: linear-gradient(135deg, var(--btn-from), var(--btn-to));
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.submit:hover:not(:disabled) {
  /* 1.03 max: brighter would push the gradient's light end under the 4.5:1
   * white-text ratio while hovered — the lift + shadow carry the hover cue. */
  filter: brightness(1.03);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(232, 50, 60, 0.3);
}
.submit:active:not(:disabled) { transform: translateY(0); filter: brightness(0.97); }
.submit:disabled { opacity: 0.65; cursor: not-allowed; }

.submit-dots { display: none; gap: 6px; }
.submit.loading .submit-label { display: none; }
.submit.loading .submit-dots { display: flex; }
.submit-dots i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: bounce 1.2s ease-in-out infinite;
}
.submit-dots i:nth-child(2) { animation-delay: 0.15s; }
.submit-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px); } }

/* ── Messages (single visual slot, two live regions) ── */
.message {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-block-start: 14px;
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 0.84rem;
  line-height: 1.6;
  border: 1px solid transparent;
  animation: fade-in 0.2s ease both;
}
.message .icon, .message .spinner { margin-block-start: 0.2em; font-size: 1rem; }
/* Server messages are Arabic even in the English UI — let each message pick
 * its own direction from its first strong character. Must live on the TEXT
 * container: .message is a flex box, whose blockified items do not inherit
 * unicode-bidi, so the property would never reach the actual paragraph. */
.message .message-body { unicode-bidi: plaintext; }
.message.error { color: var(--error-text); background: var(--error-bg); border-color: var(--error-border); }
.message.status { color: var(--ok-text); background: var(--ok-bg); border-color: var(--ok-border); }
/* Underlined: these are the critical recovery links (Continue now / open
 * directly) — bold alone is too weak an affordance inside message text. */
.message a { color: inherit; font-weight: 700; text-decoration: underline; }

/* Status box modes: progress (spinner) / success (check) / info (i). */
.message.status .spinner, .message.status .icon-ok, .message.status .icon-info { display: none; }
.message.status.is-progress .spinner { display: block; }
.message.status.is-success .icon-ok { display: block; }
.message.status.is-info .icon-info { display: block; }

.spinner {
  width: 1em; height: 1em;
  border-radius: 50%;
  border: 2px solid var(--ok-border);
  border-block-start-color: var(--ok-text);
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Card extras ── */
.help-line {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-2);
  margin-block-start: 18px;
}
.help-line a { color: var(--link); font-weight: 600; text-decoration: none; }
.help-line a:hover { text-decoration: underline; }

.security-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.74rem;
  color: var(--text-2);
  line-height: 1.6;
  margin-block-start: 16px;
  padding-block-start: 14px;
  border-block-start: 1px solid var(--card-border);
}
.security-note .icon { font-size: 0.95rem; margin-block-start: 0.2em; }

/* ── Legal footer (below the card) ── */
.page-foot {
  text-align: center;
  font-size: 0.74rem;
  color: var(--text-2);
  animation: rise 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) 0.08s both;
}
.foot-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-block-end: 6px;
}
/* Padding + negative margin: grow the tap target (~24px) without moving the
 * visual text (WCAG 2.5.8 readiness — the raw text is only ~12px tall). */
.foot-links a { color: var(--text-2); text-decoration: none; padding: 6px 4px; margin-block: -6px; }
.foot-links a:hover { color: var(--text); text-decoration: underline; }
.copyright { letter-spacing: 0.04em; direction: ltr; } /* "© 2026 AGS…" is Latin */

/* ── Small screens ── */
@media (max-width: 380px) {
  body { padding: 12px; }
  .card { padding: 26px 18px 18px; border-radius: 14px; }
  .page { margin-block-start: 52px; }
}

/* ── Doc pages (terms.html / privacy.html placeholders) ── */
.doc-page { display: block; padding: 40px 16px; }
.doc {
  max-width: 640px;
  margin-inline: auto;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 32px 28px;
  box-shadow: var(--shadow);
}
.doc h1 { font-size: 1.3rem; margin-block-end: 14px; }
.doc section + section { margin-block-start: 24px; padding-block-start: 20px; border-block-start: 1px solid var(--card-border); }
/* Same size as h1: the AR and EN sections are equal-status parallel copies —
 * only ONE may be an h1, but neither title may look subordinate. */
.doc h2 { font-size: 1.3rem; margin-block-end: 14px; }
.doc ul { margin: 8px 0 12px; padding-inline-start: 22px; }
.doc li { margin-block-end: 6px; }
.doc-meta { color: var(--text-2); font-size: 0.78rem; margin-block-start: 10px; }
.doc p { font-size: 0.9rem; color: var(--text-2); line-height: 1.8; margin-block-end: 8px; }
.doc .back { display: inline-block; margin-block-start: 18px; color: var(--link); font-size: 0.85rem; font-weight: 600; text-decoration: none; }
.doc .back:hover { text-decoration: underline; }

/* ── Reduced motion: freeze every animation and transition ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  /* The progress spinner must still LOOK like progress when frozen. */
  .spinner { border-color: var(--ok-text); border-block-start-color: var(--ok-border); }
}

/* ── Admin-controlled announcement banner (portal-config.json) ──
 * Sits above the card inside .page (inherits its flex gap). Levels reuse the
 * theme's semantic tokens so both light and dark render correctly. */
.announcement {
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.86rem;
  line-height: 1.55;
  text-align: center;
  border: 1px solid var(--card-border);
  background: var(--card);
  color: var(--text);
}
.announcement--warning {
  color: var(--warn-text);
  border-color: var(--warn-text);
  background: color-mix(in srgb, var(--warn-text) 10%, transparent);
}
.announcement--critical {
  color: var(--error-text);
  border-color: var(--error-border);
  background: var(--error-bg);
}