/* ==========================================================================
   Auth pages (sign in / verify / complete profile)
   Loaded after main.css and dashboard-ui.css, which supply the shared
   language bar, icon buttons, checkbox and select styling.
   ========================================================================== */

.auth-brand-mark {
    block-size: 64px;
    inline-size: auto;
    aspect-ratio: 320 / 465;
    color: #C9A227;
    overflow: visible;
    margin-block-end: 20px;
}
.auth-mobile-hero .auth-brand-mark { block-size: 40px; margin-block-end: 8px; }

/* Input field ------------------------------------------------------------- */

.auth-field { position: relative; }
.auth-field .form-control,
.auth-field input[type="email"],
.auth-field input[type="text"] {
    inline-size: 100%;
    padding-block: 13px;
    padding-inline: 44px 14px;      /* icon sits on the leading edge */
    border: 1.5px solid var(--dsh-border);
    border-radius: 12px;
    background: var(--dsh-surface);
    color: var(--dsh-text);
    font-family: inherit;
    font-size: 15px;
    transition: border-color 0.2s var(--dsh-ease), box-shadow 0.2s var(--dsh-ease), background-color 0.2s var(--dsh-ease);
}
.auth-field .form-control::placeholder { color: var(--dsh-text-muted); }
.auth-field .form-control:hover { border-color: var(--dsh-text-muted); }
.auth-field .form-control:focus {
    outline: none;
    border-color: var(--dsh-accent);
    box-shadow: 0 0 0 4px var(--dsh-accent-soft);
}
.auth-field .input-icon,
.auth-field .auth-field-icon {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 14px;
    transform: translateY(-50%);
    color: var(--dsh-text-muted);
    pointer-events: none;
    transition: color 0.2s var(--dsh-ease);
}
.auth-field .form-control:focus ~ .input-icon,
.auth-field .form-control:focus ~ .auth-field-icon { color: var(--dsh-accent); }

/* Terms checkbox ---------------------------------------------------------- */

.auth-terms {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 15px;
    border: 1px solid var(--dsh-border);
    border-radius: 12px;
    background: var(--dsh-surface-2);
    cursor: pointer;
    transition: border-color 0.2s var(--dsh-ease), background-color 0.2s var(--dsh-ease);
}
.auth-terms:hover { border-color: var(--dsh-accent); }
.auth-terms:has(input:checked) { border-color: var(--dsh-accent); background: var(--dsh-accent-soft); }
.auth-terms input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    inline-size: 20px;
    block-size: 20px;
    flex: none;
    margin: 1px 0 0;
    border: 2px solid var(--dsh-border);
    border-radius: 6px;
    background: var(--dsh-surface);
    cursor: pointer;
    position: relative;
    transition: background-color 0.18s var(--dsh-ease), border-color 0.18s var(--dsh-ease);
}
.auth-terms input[type="checkbox"]:hover { border-color: var(--dsh-accent); }
.auth-terms input[type="checkbox"]:checked { background: var(--accent-btn); border-color: var(--accent-btn); }
.auth-terms input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    inset-block-start: 1px;
    inset-inline-start: 5px;
    inline-size: 5px;
    block-size: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
html[data-theme="dark"] .auth-terms input[type="checkbox"]:checked::after { border-color: #fff; }
.auth-terms input[type="checkbox"]:focus-visible { outline: 2px solid var(--dsh-accent); outline-offset: 2px; }
.auth-terms span { font-size: 12.5px; color: var(--dsh-text-soft); line-height: 1.65; }
.auth-terms a {
    color: var(--dsh-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}
.auth-terms a:hover { color: var(--dsh-text); }
/* On the dark card, gold-on-dark is fine but white reads strongest. */
html[data-theme="dark"] .auth-terms a { color: #FFFFFF; }
html[data-theme="dark"] .auth-terms a:hover { color: var(--dsh-accent); }

/* Submit ------------------------------------------------------------------ */

.auth-submit {
    inline-size: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-block-start: 16px;
    padding: 14px 22px;
    border: 0;
    border-radius: 12px;
    background: var(--accent-btn);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s var(--dsh-ease), box-shadow 0.2s var(--dsh-ease), filter 0.2s var(--dsh-ease);
    box-shadow: 0 4px 14px -4px var(--dsh-accent);
}
html[data-theme="dark"] .auth-submit { color: #fff; }
.auth-submit:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 10px 24px -6px var(--dsh-accent); }
.auth-submit:active { transform: translateY(0); }
.auth-submit:focus-visible { outline: 2px solid var(--dsh-accent); outline-offset: 3px; }
/* The arrow must point the way the language reads: in RTL "forward" is left,
   in LTR it is right. One icon, mirrored by direction. */
.auth-submit .auth-arrow { transition: transform 0.2s var(--dsh-ease); }
html[dir="ltr"] .auth-submit .auth-arrow { transform: scaleX(-1); }
html[dir="rtl"] .auth-submit:hover .auth-arrow { transform: translateX(-3px); }
html[dir="ltr"] .auth-submit:hover .auth-arrow { transform: scaleX(-1) translateX(-3px); }


.auth-links { display: flex; justify-content: center; gap: 18px; margin-block-start: 14px; }
.auth-links a, .auth-back {
    font-size: 12.5px;
    color: var(--dsh-text-muted);
    text-decoration: none;
    transition: color 0.2s var(--dsh-ease);
}
.auth-links a:hover, .auth-back:hover { color: var(--dsh-accent); }
.auth-back { display: inline-flex; align-items: center; gap: 6px; margin-block-start: 22px; }
/* "Back" points against the reading direction: left in LTR, right in RTL.
   The submit arrow is the opposite — it points forward — so the two flip
   on opposite conditions. The base icon is a left arrow. */
html[dir="rtl"] .auth-back svg { transform: scaleX(-1); }

.auth-form-header { margin-block-end: 22px; }
.auth-form-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-block-end: 8px;
}
/* The heading was wrapping mid-word and running into the language bar. */
.auth-form-header-row h2 { white-space: nowrap; margin: 0; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }
@media (max-width: 520px) {
    .auth-form-header-row { gap: 10px; }
    .auth-form-header-row h2 { flex: 1 1 100%; }
}

/* ==========================================================================
   Page shell — main.css paints these light unconditionally, which left a
   white panel behind dark cards (and near-invisible footer links) in dark mode.
   ========================================================================== */

.auth-form-wrap,
.auth-mobile-form-area { background: var(--dsh-bg); color: var(--dsh-text); }
.auth-form-header h2 { color: var(--dsh-text); }
.auth-form-header p { color: var(--dsh-text-muted); }
.auth-page label { color: var(--dsh-text-soft); }
.auth-page .form-group > label { font-size: 13px; font-weight: 600; margin-block-end: 7px; display: block; }

/* ==========================================================================
   Centred single-column sign-in
   ========================================================================== */

.au {
    position: relative;
    min-block-size: 100vh;
    min-block-size: 100dvh;
    display: grid;
    place-items: center;
    padding: clamp(64px, 9vh, 96px) clamp(18px, 5vw, 32px) clamp(32px, 6vh, 56px);
    background: var(--dsh-bg);
    color: var(--dsh-text);
    overflow-x: clip;
}
.au-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(58% 44% at 50% 0%, var(--dsh-accent-soft) 0%, transparent 64%),
        radial-gradient(44% 36% at 12% 88%, rgba(27, 67, 50, 0.06) 0%, transparent 66%);
}
html[data-theme="dark"] .au-bg {
    background:
        radial-gradient(58% 44% at 50% 0%, rgba(201, 162, 39, 0.10) 0%, transparent 64%),
        radial-gradient(46% 40% at 10% 90%, rgba(27, 67, 50, 0.40) 0%, transparent 68%);
}

/* Controls float in the top corner, clear of the column. */
.au-controls {
    position: absolute;
    inset-block-start: clamp(14px, 3vh, 24px);
    inset-inline-end: clamp(16px, 4vw, 28px);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
}

.au-col {
    position: relative;
    z-index: 2;
    inline-size: 100%;
    max-inline-size: 460px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.au-brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; margin-block-end: 22px; }
.au-mark {
    block-size: 40px;
    inline-size: auto;
    aspect-ratio: 320 / 465;
    flex: none;
    overflow: visible;
    color: #1B4332;
}
html[data-theme="dark"] .au-mark { color: #C9A227; }
.au-brand-text { font-size: 1.125rem; font-weight: 700; color: var(--dsh-text); line-height: 1; }

.au-card {
    inline-size: 100%;
    padding: clamp(24px, 4vw, 34px);
    border: 1px solid var(--dsh-border);
    border-radius: 20px;
    background: var(--dsh-surface);
    box-shadow: var(--dsh-shadow);
    text-align: start;
}
.au-title { font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.625rem); font-weight: 700; color: var(--dsh-text); margin: 0 0 6px; text-align: center; }
.au-sub { font-size: 13.5px; color: var(--dsh-text-muted); margin: 0 0 24px; text-align: center; line-height: 1.6; }

.au-group { margin-block-end: 16px; }
.au-group > label { display: block; font-size: 13px; font-weight: 600; color: var(--dsh-text-soft); margin-block-end: 8px; }
.au-error { color: var(--dsh-danger); font-size: 12.5px; margin-block-start: 7px; }

.au-note {
    margin-block-start: 22px;
    padding-block-start: 18px;
    border-block-start: 1px solid var(--dsh-border);
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--dsh-text-muted);
    text-align: center;
}


.au .auth-back { margin-block-start: 20px; }
.au .auth-links { margin-block-start: 10px; }

/* Resend block under the OTP card: how long the code has left, the resend
   button, and the way out to a different address. Grouped so the three read as
   one set of options rather than three stray links. */
.au-resend {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.au-expiry {
    margin: 18px 0 0;
    font-size: 12.5px;
    color: var(--dsh-text-muted);
}
/* Tabular figures stop the countdown from twitching as the digits change. */
.au-expiry strong {
    color: var(--dsh-text-soft);
    font-variant-numeric: tabular-nums;
}
/* The resend control is a <button> (it posts) wearing the .auth-back look, so
   it needs the button chrome removed to match the links around it. */
.au-resend .auth-back {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
    margin-block-start: 12px;
}
.au-resend .auth-back:disabled {
    opacity: 0.5;
    cursor: default;
    color: var(--dsh-text-muted);
}
.au-other-mail {
    margin-block-start: 12px;
    font-size: 12.5px;
    color: var(--dsh-text-muted);
    text-decoration: none;
    transition: color 0.2s var(--dsh-ease);
}
.au-other-mail:hover { color: var(--dsh-accent); }

@media (max-width: 560px) {
    .au { padding-block-start: 84px; }
    .au-controls { inset-inline: auto clamp(12px, 4vw, 16px); }
}

/* ==========================================================================
   Verify step — OTP entry
   ========================================================================== */

.au-badge {
    inline-size: 48px;
    block-size: 48px;
    margin-inline: auto;
    margin-block-end: 16px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--dsh-accent-soft);
    border: 1px solid var(--dsh-border);
    color: var(--dsh-accent);
}
.au-mail {
    display: inline-block;
    color: var(--dsh-text);
    font-weight: 700;
    unicode-bidi: isolate;   /* keeps the address intact inside RTL copy */
}
.au-otp-label {
    display: block;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--dsh-text-soft);
    margin-block-end: 12px;
}
.au-otp {
    display: flex;
    justify-content: center;
    gap: clamp(6px, 2vw, 10px);
}
.au-otp .otp-box {
    inline-size: clamp(42px, 13vw, 52px);
    block-size: clamp(50px, 15vw, 60px);
    padding: 0;
    text-align: center;
    font-family: inherit;
    font-size: clamp(20px, 6vw, 24px);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--dsh-text);
    background: var(--dsh-surface-2);
    border: 1.5px solid var(--dsh-border);
    border-radius: 12px;
    transition: border-color 0.18s var(--dsh-ease), box-shadow 0.18s var(--dsh-ease),
                background-color 0.18s var(--dsh-ease), transform 0.18s var(--dsh-ease);
}
.au-otp .otp-box:hover { border-color: var(--dsh-text-muted); }
.au-otp .otp-box:focus {
    outline: none;
    border-color: var(--dsh-accent);
    background: var(--dsh-surface);
    box-shadow: 0 0 0 4px var(--dsh-accent-soft);
    transform: translateY(-2px);
}
.au-otp .otp-box.filled { border-color: var(--dsh-accent); background: var(--dsh-accent-soft); }

/* Complete-profile step ---------------------------------------------------- */

.au-col-wide { max-inline-size: 560px; }
.au-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.au-req { color: var(--dsh-danger); }
.au-cancel { margin-block-start: 18px; text-align: center; }
.au-cancel button {
    background: none;
    border: 0;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
}
@media (max-width: 520px) { .au-row { grid-template-columns: 1fr; } }

/* ── Asaqefah SSO ──────────────────────────────────────────────────────────
   The company sign-in sits above the email form and looks like the primary
   button, because it is the primary way in for anyone who has an account. The
   rule below it says the email code is still there — not a fallback in small
   print, just the second option. */
.auth-sso { text-decoration: none; margin-block-start: 0; }
.auth-sso:hover { color: #fff; }
.auth-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-block: 18px 4px;
    color: var(--dsh-text-muted);
    font-size: 12.5px;
}
.auth-or::before, .auth-or::after {
    content: "";
    flex: 1;
    block-size: 1px;
    background: var(--dsh-border, currentColor);
    opacity: 0.4;
}