/* ================================================================
   Auth pages (Login / ForgotPassword / ResetPassword / confirmations)
   Sphinx Operations — enterprise-blue identity, light + dark.
   ================================================================ */

@import url('fonts.css'); /* self-hosted IBM Plex Sans Arabic (was render-blocking Google Fonts) */
@import url('icons/material-design-iconic-font/css/materialdesignicons.min.css?v=7.4.47');

:root{
    /* docs/21 phase 13 (SS41 - SS46). The render walk found these pages taking the institution's
       NAME and LOGO from IBrandingService and its COLOUR from nowhere - so a green-branded
       institution met a blue sign-in screen, on the first page anyone sees. The auth pages stay a
       separate visual world by decision (docs/21 SS9.5); what they may not be is a page where half
       the identity is configurable and half is typed in.
       Each falls back to the value it had, so an unset brand renders exactly as before. */
    --primary:var(--ds-primary,#2457d6); --primary-hover:var(--ds-primary-hover,#1e4bbd);
    --on-primary:var(--ds-on-primary,#fff); --primary-soft:var(--ds-primary-subtle,#dde6fa);
    --brand-1:#173a97; --brand-2:var(--ds-primary,#2457d6); --brand-3:#3b6fe0;
    --paper:#eef2f8; --card:#fff; --card-2:#f5f7fb;
    --ink:#111a2b; --ink-soft:#28324a; --muted:#54607a; --faint:#8492ad;
    --line:#e3e8f0; --line-strong:#cfd8e6; --field-bg:#fafbfd;
    --danger:#c62138; --danger-soft:#fdecee; --danger-line:#f4c4cb;
    --success:#1c8a4e; --success-soft:#e3f5ea; --success-line:#bfe6cd;
    --info:#1667a6; --info-soft:#e2eefb;
    --warning:#8a5a00; --warning-soft:#fff6e0; --warning-line:#f2d7a1;
    --shadow:0 12px 44px rgba(17,34,80,.12);
}
@media (prefers-color-scheme:dark){
    :root{
        /* The branding block writes a DARK VARIANT of the brand for this ground, so the same
           token is right here - reaching for the raw brand hex would put one ground'"'"'s number on
           the other'"'"'s row. */
        --primary:var(--ds-primary,#7ea8ff); --primary-hover:var(--ds-primary-hover,#9bbcff);
        --on-primary:var(--ds-on-primary,#0a1a3a); --primary-soft:var(--ds-primary-subtle,#1b2740);
        --brand-1:#0d1f52; --brand-2:#14337e; --brand-3:#1e4bbd;
        --paper:#0b0f16; --card:#151b27; --card-2:#1c2430;
        --ink:#e7ebf2; --ink-soft:#c7cede; --muted:#a3adc2; --faint:#7c869c;
        --line:#2a3446; --line-strong:#3a4761; --field-bg:#111725;
        --danger:#ef7183; --danger-soft:#2c1620; --danger-line:#5a2731;
        --success:#4cc281; --success-soft:#16281d; --success-line:#24503a;
        --info:#6fb2ee; --info-soft:#122535;
        --warning:#f2c066; --warning-soft:#2b2312; --warning-line:#5a4720;
        --shadow:0 14px 48px rgba(0,0,0,.5);
    }
}

* { font-family: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif; box-sizing: border-box; }

/* ── layout ─────────────────────────────────────────────────── */
body.auth-wrapper{
    margin:0; padding:0; width:100%; min-height:100vh; display:flex;
    background:var(--paper); color:var(--ink);
}

/* ── brand panel (the single brand moment) ──────────────────── */
.auth-bg-left{
    width:44%;
    background:linear-gradient(160deg, var(--brand-1) 0%, var(--brand-2) 58%, var(--brand-3) 100%);
    flex-direction:column; justify-content:center;
    padding:60px 52px; position:relative; overflow:hidden;
}
.auth-bg-left::before{
    content:''; position:absolute; width:460px; height:460px; border-radius:50%;
    background:rgba(255,255,255,.05); top:-150px; inset-inline-start:-140px;
}
.auth-bg-left::after{
    content:''; position:absolute; width:280px; height:280px; border-radius:50%;
    background:rgba(255,255,255,.06); bottom:-90px; inset-inline-end:-70px;
}
.auth-bg-content{ position:relative; z-index:1; color:#fff; text-align:start; width:100%; max-width:420px; margin-inline:auto; }

.auth-logo-big{ width:64px; margin-bottom:22px; filter:brightness(0) invert(1); opacity:.95; }
.auth-bg-content .ds-auth-brand{ font-size:26px; font-weight:700; margin:0 0 10px; color:#fff; line-height:1.4; }
.auth-bg-content p{ font-size:15px; color:rgba(255,255,255,.78); margin:0 0 34px; }

/* feature list — icon chip + title + description */
.auth-feature-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:18px; }
.auth-feature-list li{ display:flex; gap:13px; align-items:flex-start; color:#fff; }
.auth-feature-list li .feat-ic{
    width:38px; height:38px; border-radius:11px; flex:0 0 auto;
    background:rgba(255,255,255,.13); display:grid; place-items:center; font-size:18px; color:#fff;
}
.auth-feature-list li .feat-txt{ display:flex; flex-direction:column; }
.auth-feature-list li .feat-txt strong{ font-size:14px; font-weight:600; }
.auth-feature-list li .feat-txt span{ font-size:12.5px; color:rgba(255,255,255,.72); line-height:1.5; }

/* ── form panel ─────────────────────────────────────────────── */
.auth-form-side{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 24px;
}

.auth-card{
    width:100%; max-width:440px; background:var(--card);
    border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); overflow:hidden;
}

/* light header (no gradient) — one brand moment lives on the panel */
.auth-card-header{ padding:30px 34px 6px; text-align:center; background:var(--card); }
.auth-logo-sm{ width:48px; margin-bottom:12px; }
@media (min-width:992px){ .auth-logo-sm{ display:none; } }   /* panel already shows the logo on desktop */
.auth-title{ color:var(--ink); font-size:22px; font-weight:700; margin:0 0 5px; }
.auth-subtitle{ color:var(--muted); font-size:13.5px; margin:0; }

.auth-card-body{ padding:22px 34px 30px; }

/* ── language switcher ──────────────────────────────────────── */
.auth-lang{ display:flex; justify-content:center; gap:.4rem; margin:2px 0 20px; }
.auth-lang-btn{
    background:transparent; border:1px solid var(--line-strong); color:var(--muted);
    border-radius:999px; padding:.2rem .85rem; font-size:.78rem; cursor:pointer; font-family:inherit; line-height:1.6;
}
.auth-lang-btn:hover{ border-color:var(--primary); color:var(--primary); }
.auth-lang-btn.active{ background:var(--primary); border-color:var(--primary); color:var(--on-primary); font-weight:700; }

/* ── form fields ────────────────────────────────────────────── */
.auth-card-body .form-label{ font-weight:600; color:var(--ink-soft); font-size:13px; margin-bottom:6px; display:block; }
.auth-field{ position:relative; margin-bottom:18px; }
.auth-field .form-control{
    border-radius:10px; border:1.5px solid var(--line-strong); background:var(--field-bg); color:var(--ink);
    padding-block:11px; padding-inline:42px 42px; font-size:14px; width:100%; text-align:start;
    transition:border-color .15s, box-shadow .15s, background .15s;
}
.auth-field .form-control::placeholder{ color:var(--faint); }
.auth-field .form-control:focus{
    border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); background:var(--card); outline:none;
}
.auth-field .form-control.input-validation-error{ border-color:var(--danger); }
.auth-field-icon{
    position:absolute; inset-inline-start:14px; top:38px; transform:translateY(-2px);
    color:var(--faint); font-size:17px; pointer-events:none;
}
.auth-field .toggle-pass{
    position:absolute; inset-inline-end:12px; top:34px; color:var(--faint); cursor:pointer;
    font-size:17px; background:none; border:none; padding:2px;
}
.auth-field .toggle-pass:hover{ color:var(--primary); }
.field-validation-error{ color:var(--danger); font-size:12px; display:block; margin-top:4px; }

/* ── remember / forgot row ──────────────────────────────────── */
.auth-remember{ display:flex; align-items:center; gap:8px; margin-bottom:22px; font-size:13px; }
.auth-remember input[type=checkbox]{ width:15px; height:15px; accent-color:var(--primary); }
.auth-remember label{ color:var(--muted); margin:0; cursor:pointer; }
.auth-remember a{ margin-inline-start:auto; color:var(--primary); text-decoration:none; font-weight:600; }
.auth-remember a:hover{ text-decoration:underline; }

/* ── primary button (solid) ─────────────────────────────────── */
.btn-auth{
    display:flex; align-items:center; justify-content:center; gap:.4rem; width:100%; padding:12px; border:none;
    border-radius:10px; background:var(--primary); color:var(--on-primary) !important; font-size:15px; font-weight:600;
    letter-spacing:.2px; cursor:pointer; text-align:center; text-decoration:none;
    transition:background .15s, transform .08s;
}
.btn-auth:hover{ background:var(--primary-hover); }
.btn-auth:active{ transform:translateY(1px); }

/* ── secondary links ────────────────────────────────────────── */
.auth-back-link{ display:block; text-align:center; margin-top:18px; font-size:13px; color:var(--muted); }
.auth-back-link a{ color:var(--primary); font-weight:600; text-decoration:none; }
.auth-back-link a:hover{ text-decoration:underline; }

/* ── alerts / validation ────────────────────────────────────── */
.auth-alert{ border-radius:10px; padding:12px 16px; margin-bottom:20px; font-size:13px; text-align:start; }
.auth-alert-danger{ background:var(--danger-soft); border:1px solid var(--danger-line); color:var(--danger); }
.auth-alert-success{ background:var(--success-soft); border:1px solid var(--success-line); color:var(--success); }
/* ⛔ P-8 (board 2 §3, approved by the owner 2026-10-10 14:26Z) — the institution's notice on the set-up at sign-in (P6). */
.auth-alert-warning{ background:var(--warning-soft); border:1px solid var(--warning-line); color:var(--warning); }
.auth-alert ul{ margin:0; padding:0 18px 0 0; }
.auth-alert li{ margin-bottom:3px; }

/* ── confirmation box ───────────────────────────────────────── */
.auth-confirm-icon{
    width:76px; height:76px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:34px; margin:6px auto 20px;
}
.auth-confirm-icon.success{ background:var(--success-soft); color:var(--success); }
.auth-confirm-icon.info{ background:var(--info-soft); color:var(--info); }
.auth-confirm-text{ text-align:center; color:var(--ink-soft); font-size:14px; line-height:1.7; margin-bottom:24px; }

/* ── copyright ──────────────────────────────────────────────── */
/* docs/21 phase 14: --faint on --paper measured 2.79:1. A copyright line is small print, but small
   print a person cannot read is not small print - it is decoration. --muted clears AA on this ground. */
.auth-copyright{ margin-top:22px; font-size:12px; color:var(--muted); text-align:center; }

/* ── responsive ─────────────────────────────────────────────── */
@media (max-width:991px){
    .auth-card-header{ padding-top:26px; }
    .auth-card-body{ padding:20px 22px 24px; }
    .auth-bg-left{ display:none !important; }
}

/* Bootstrap helpers needed on auth pages (no full BS import) */
.d-none{ display:none !important; }
.d-lg-flex{ display:none !important; }
@media (min-width:992px){ .d-lg-flex{ display:flex !important; } }
.text-center{ text-align:center !important; }
.text-start{ text-align:start !important; }
.mt-3{ margin-top:1rem !important; }
.mb-3{ margin-bottom:1rem !important; }
.me-2{ margin-inline-end:.5rem !important; }

/* mdi fallback aliases for the few missing-name icons used on auth pages */
.mdi-eye-off-outline:before{content:""}
.mdi-email-check-outline:before{content:""}
.mdi-lock-check-outline:before{content:""}

/* ⛔ P-8 (board 2 §3, approved by the owner 2026-10-10 14:26Z) — the second step's code box (P2 · P6), the steps and the key of the set-up. */
.auth-otp{ text-align:center; font-size:20px; font-variant-numeric:tabular-nums; }
.auth-steps{ margin:0 0 20px; padding-inline-start:20px; display:grid; gap:10px; color:var(--ink-soft); text-align:start; }
.auth-secret{ margin-top:8px; padding:8px 12px; background:var(--card-2); border:1px solid var(--line); border-radius:10px;
    font-weight:600; font-variant-numeric:tabular-nums; text-align:center; }
/* P-8 (P6) — the square picture code beside the key: white ground in both themes (a scanner reads dark on light), sharp modules. */
.auth-qr-row{ display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin-top:8px; }
.auth-qr{ flex:0 0 auto; inline-size:150px; block-size:150px; padding:8px; background:#ffffff; border:1px solid var(--line);
    border-radius:10px; image-rendering:pixelated; }
.auth-qr-row .auth-secret{ margin-top:4px; }