/* =====================================================================
   SAFAR — صفحة تسجيل الدخول (v3)                        css/login-v3.css
   ---------------------------------------------------------------------
   Used by Shared/LoginLayout.razor + Pages/SignIn.razor (replaces
   login-v2.css / login-v2.js, which are no longer referenced).

   • Three sign-in methods in a segmented control built from hidden radio
     inputs (#sl-m-user / #sl-m-ad / #sl-m-eauth) so switching works even
     before the Blazor circuit connects.
   • Light + dark: every colour is a --sl-* token on .sl-shell;
     .sl-shell.sl-dark swaps them (ThemeName cookie = "dark").
   • RTL/LTR: the layout sets dir on .sl-shell; only logical properties
     (inline-start/end) are used, so no per-direction overrides.
   • Breakpoints: 960px (card stacks, brand panel compacts), 560px (phone),
     600px = mobile PWA design (screens 11/12): blue hero + card, OTP page.
   • Phase 3 (2026-10): remember me, Face ID (passkeys), Thiqa +968 / "or",
     the OTP page (Pages/SignInOtp.razor, .sl-otp*).
   ===================================================================== */

.sl-shell {
    --sl-bg: #eef3fa;
    --sl-bg-accent-1: rgba(0, 100, 209, .10);
    --sl-bg-accent-2: rgba(0, 177, 153, .08);
    --sl-surface: #ffffff;
    --sl-surface-2: #f3f6fb;
    --sl-surface-3: #e9eef6;
    --sl-border: #d6dfeb;
    --sl-border-strong: #b9c6d8;
    --sl-text: #17212e;
    --sl-muted: #5a6677;
    --sl-primary: #0064d1;
    --sl-primary-hover: #0052ab;
    --sl-primary-contrast: #ffffff;
    --sl-primary-soft: #e7f0fc;
    --sl-focus: rgba(0, 100, 209, .28);
    --sl-danger: #b3261e;
    --sl-danger-soft: #fdeceb;
    --sl-danger-border: #f3c2bf;
    --sl-warn: #8a5300;
    --sl-warn-soft: #fff4df;
    --sl-warn-border: #f4d9a6;
    --sl-info: #0b5cad;
    --sl-info-soft: #e8f2fd;
    --sl-info-border: #bcd7f5;
    --sl-dot-used: #d05a52;
    --sl-dot-free: #c9d3e0;
    --sl-brand-from: #0064d1;
    --sl-brand-to: #003b7e;
    --sl-brand-text: #ffffff;
    --sl-brand-muted: rgba(255, 255, 255, .80);
    --sl-logo-plate: #ffffff;
    --sl-shadow: 0 24px 60px -24px rgba(16, 42, 84, .35), 0 2px 6px rgba(16, 42, 84, .06);
    --sl-radius: 20px;
    --sl-radius-sm: 12px;
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--sl-bg);
    color: var(--sl-text);
    font-size: 15px;
    line-height: 1.5;
    isolation: isolate;
    overflow-x: hidden;
    color-scheme: light;
}

/* ---- Dark twin (SAFAR blue dark) ---------------------------------- */
.sl-shell.sl-dark {
    --sl-bg: #111418;
    --sl-bg-accent-1: rgba(77, 155, 255, .10);
    --sl-bg-accent-2: rgba(0, 177, 153, .06);
    --sl-surface: #1b1f25;
    --sl-surface-2: #232830;
    --sl-surface-3: #2b313a;
    --sl-border: #323a45;
    --sl-border-strong: #46505e;
    --sl-text: #e6ebf1;
    --sl-muted: #9ba6b4;
    --sl-primary: #4d9bff;
    --sl-primary-hover: #74b1ff;
    --sl-primary-contrast: #0b1522;
    --sl-primary-soft: rgba(77, 155, 255, .14);
    --sl-focus: rgba(77, 155, 255, .35);
    --sl-danger: #ff8a80;
    --sl-danger-soft: rgba(255, 107, 107, .10);
    --sl-danger-border: rgba(255, 138, 128, .35);
    --sl-warn: #ffc166;
    --sl-warn-soft: rgba(255, 183, 77, .10);
    --sl-warn-border: rgba(255, 193, 102, .32);
    --sl-info: #8cc2ff;
    --sl-info-soft: rgba(77, 155, 255, .10);
    --sl-info-border: rgba(140, 194, 255, .30);
    --sl-dot-used: #ff8a80;
    --sl-dot-free: #3b4451;
    --sl-brand-from: #0d4a93;
    --sl-brand-to: #0a2446;
    --sl-brand-muted: rgba(230, 238, 248, .78);
    --sl-logo-plate: #f4f7fb;
    --sl-shadow: 0 24px 60px -20px rgba(0, 0, 0, .65), 0 2px 6px rgba(0, 0, 0, .3);
    color-scheme: dark;
}

.sl-shell *,
.sl-shell *::before,
.sl-shell *::after {
    box-sizing: border-box;
}

.sl-shell .rzi {
    font-size: 1.25em;
    line-height: 1;
    vertical-align: middle;
    flex: none;
}

/* Soft decorative backdrop */
.sl-backdrop {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(60rem 36rem at 12% -10%, var(--sl-bg-accent-1), transparent 60%),
        radial-gradient(48rem 30rem at 100% 110%, var(--sl-bg-accent-2), transparent 60%);
}

/* ---- Top bar ------------------------------------------------------ */
.sl-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px clamp(16px, 4vw, 40px);
}

.sl-topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--sl-text);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05rem;
    min-width: 0;
}

    .sl-topbar__brand:hover {
        color: var(--sl-text);
        text-decoration: none;
    }

    .sl-topbar__brand img {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: var(--sl-logo-plate);
        object-fit: contain;
        padding: 2px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
    }

.sl-topbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sl-iconbtn,
.sl-langbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    min-width: 40px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--sl-border);
    background: var(--sl-surface);
    color: var(--sl-text);
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s, border-color .15s, color .15s;
}

.sl-iconbtn {
    padding: 0;
    width: 40px;
}

    .sl-iconbtn:hover,
    .sl-langbtn:hover {
        border-color: var(--sl-primary);
        color: var(--sl-primary);
        text-decoration: none;
    }

    .sl-iconbtn:focus-visible,
    .sl-langbtn:focus-visible {
        outline: 3px solid var(--sl-focus);
        outline-offset: 2px;
    }

/* The theme button carries both icons; CSS shows the one for the other mode
   (.sl-iconbtn prefix: Radzen's .rzi display rule would otherwise win) */
.sl-iconbtn .sl-theme-icon--light { display: none; }
.sl-dark .sl-iconbtn .sl-theme-icon--light { display: inline-block; }
.sl-dark .sl-iconbtn .sl-theme-icon--dark { display: none; }

/* ---- Main / card -------------------------------------------------- */
.sl-main {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px clamp(16px, 4vw, 40px) 24px;
}

.sl-card {
    width: 100%;
    max-width: 1060px;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    background: var(--sl-surface);
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius);
    box-shadow: var(--sl-shadow);
    overflow: hidden;
}

/* ---- Brand panel -------------------------------------------------- */
.sl-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 44px 40px;
    color: var(--sl-brand-text);
    background: linear-gradient(155deg, var(--sl-brand-from) 0%, var(--sl-brand-to) 100%);
    overflow: hidden;
}

    .sl-brand::after {
        /* faint concentric rings */
        content: "";
        position: absolute;
        inset-block-end: -140px;
        inset-inline-end: -140px;
        width: 360px;
        height: 360px;
        border-radius: 50%;
        border: 44px solid rgba(255, 255, 255, .06);
        box-shadow: 0 0 0 60px rgba(255, 255, 255, .035);
        pointer-events: none;
    }

.sl-brand__logo {
    width: 84px;
    height: 84px;
    border-radius: 22px;
    background: var(--sl-logo-plate);
    display: grid;
    place-items: center;
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45);
}

    .sl-brand__logo img {
        width: 72px;
        height: 72px;
        object-fit: contain;
    }

.sl-brand__title {
    margin: 6px 0 0;
    font-size: clamp(1.45rem, 2.2vw, 1.9rem);
    font-weight: 800;
    line-height: 1.25;
    color: inherit;
}

.sl-brand__text {
    margin: 0;
    color: var(--sl-brand-muted);
    font-size: 1rem;
}

.sl-brand__list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

    .sl-brand__list li {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border-radius: 12px;
        background: rgba(255, 255, 255, .08);
        border: 1px solid rgba(255, 255, 255, .12);
        font-weight: 600;
        font-size: .95rem;
    }

        .sl-brand__list li .rzi {
            width: 34px;
            height: 34px;
            display: grid;
            place-items: center;
            border-radius: 10px;
            background: rgba(255, 255, 255, .14);
            font-size: 20px;
        }

.sl-brand__note {
    margin: auto 0 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--sl-brand-muted);
    font-size: .875rem;
}

/* ---- Form side ---------------------------------------------------- */
.sl-side {
    padding: 36px 44px 40px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sl-org {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

    .sl-org img {
        height: 64px;
        width: auto;
        max-width: 100%;
        object-fit: contain;
    }

/* NSG logo is black/red artwork: give it a light plate in dark mode */
.sl-dark .sl-org img {
    background: var(--sl-logo-plate);
    padding: 8px 14px;
    border-radius: 12px;
    height: 72px;
}

.sl-shell .sl-title {
    margin: 0;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--sl-text);
}

.sl-shell .sl-subtitle {
    margin: 4px 0 20px;
    text-align: center;
    color: var(--sl-muted);
    font-size: .95rem;
}

/* ---- Segmented method switch (radio + label) ---------------------- */
.sl-radio {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.sl-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    margin-bottom: 22px;
    background: var(--sl-surface-2);
    border: 1px solid var(--sl-border);
    border-radius: 14px;
}

.sl-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    margin: 0;
    padding: 8px 10px;
    border-radius: 10px;
    color: var(--sl-muted);
    font-weight: 700;
    font-size: .9rem;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: background-color .15s, color .15s, box-shadow .15s;
}

    .sl-tab .rzi {
        font-size: 20px;
    }

    .sl-tab:hover {
        color: var(--sl-text);
        background: var(--sl-surface-3);
    }

#sl-m-user:checked ~ .sl-tabs .sl-tab--user,
#sl-m-ad:checked ~ .sl-tabs .sl-tab--ad,
#sl-m-eauth:checked ~ .sl-tabs .sl-tab--eauth {
    background: var(--sl-surface);
    color: var(--sl-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px var(--sl-border);
}

#sl-m-user:focus-visible ~ .sl-tabs .sl-tab--user,
#sl-m-ad:focus-visible ~ .sl-tabs .sl-tab--ad,
#sl-m-eauth:focus-visible ~ .sl-tabs .sl-tab--eauth {
    outline: 3px solid var(--sl-focus);
    outline-offset: 1px;
}

.sl-pane { display: none; }

#sl-m-user:checked ~ .sl-panels .sl-pane--user,
#sl-m-ad:checked ~ .sl-panels .sl-pane--ad,
#sl-m-eauth:checked ~ .sl-panels .sl-pane--eauth {
    display: block;
    animation: sl-fade .2s ease-out;
}

@keyframes sl-fade {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

.sl-pane__intro {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 18px;
    color: var(--sl-muted);
    font-size: .92rem;
}

    .sl-pane__intro .rzi {
        color: var(--sl-primary);
    }

/* ---- Fields ------------------------------------------------------- */
.sl-form {
    display: grid;
    gap: 16px;
    margin: 0;
}

.sl-field {
    display: grid;
    gap: 6px;
}

.sl-shell .sl-label {
    margin: 0;
    font-weight: 700;
    font-size: .88rem;
    color: var(--sl-text);
}

.sl-input {
    position: relative;
    display: flex;
    align-items: center;
}

    .sl-input > .rzi {
        position: absolute;
        inset-inline-start: 14px;
        color: var(--sl-muted);
        pointer-events: none;
    }

.sl-shell input.sl-control {
    width: 100%;
    height: 50px;
    margin: 0;
    padding-block: 0;
    padding-inline: 46px 14px;
    border: 1px solid var(--sl-border-strong);
    border-radius: var(--sl-radius-sm);
    background: var(--sl-surface);
    color: var(--sl-text);
    font: inherit;
    font-size: 1rem;
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}

    .sl-shell input.sl-control::placeholder {
        color: var(--sl-muted);
        opacity: .8;
    }

    .sl-shell input.sl-control:hover {
        border-color: var(--sl-muted);
    }

    .sl-shell input.sl-control:focus {
        outline: none;
        border-color: var(--sl-primary);
        box-shadow: 0 0 0 4px var(--sl-focus);
    }

    .sl-shell input.sl-control:disabled {
        background: var(--sl-surface-2);
        cursor: not-allowed;
    }

    /* Chrome autofill in dark mode */
    .sl-shell input.sl-control:-webkit-autofill {
        -webkit-text-fill-color: var(--sl-text);
        -webkit-box-shadow: 0 0 0 1000px var(--sl-primary-soft) inset;
        caret-color: var(--sl-text);
    }

/* dir="ltr" fields (domain user, mobile) inside an RTL page: the icon stays on the
   page's start side, so keep room for it on both sides */
.sl-shell input.sl-control[dir="ltr"] {
    padding-inline: 46px;
}

.sl-input--password input.sl-control {
    padding-inline-end: 50px;
}

.sl-eye {
    position: absolute;
    inset-inline-end: 6px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--sl-muted);
    cursor: pointer;
}

    .sl-eye:hover { color: var(--sl-primary); background: var(--sl-primary-soft); }
    .sl-eye:focus-visible { outline: 3px solid var(--sl-focus); }
    .sl-eye .sl-eye--off { display: none; }
    .sl-eye.is-on .sl-eye--on { display: none; }
    .sl-eye.is-on .sl-eye--off { display: inline-block; }

.sl-caps {
    display: none;
    align-items: center;
    gap: 6px;
    color: var(--sl-warn);
    font-size: .82rem;
    font-weight: 600;
}

    .sl-caps.is-on { display: flex; }

.sl-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: .9rem;
}

.sl-shell .sl-link {
    color: var(--sl-primary);
    font-weight: 600;
    text-decoration: none;
}

    .sl-shell .sl-link:hover {
        color: var(--sl-primary-hover);
        text-decoration: underline;
    }

.sl-hint {
    color: var(--sl-muted);
    font-size: .82rem;
}

/* ---- Buttons ------------------------------------------------------ */
.sl-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 50px;
    padding: 0 18px;
    border-radius: var(--sl-radius-sm);
    border: 1px solid transparent;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s, border-color .15s, color .15s, transform .05s;
}

    .sl-btn:active { transform: translateY(1px); }
    .sl-btn:focus-visible { outline: 3px solid var(--sl-focus); outline-offset: 2px; }

.sl-btn--primary {
    background: var(--sl-primary);
    color: var(--sl-primary-contrast);
}

    .sl-btn--primary:hover {
        background: var(--sl-primary-hover);
        color: var(--sl-primary-contrast);
        text-decoration: none;
    }

.sl-btn--outline {
    background: transparent;
    border-color: var(--sl-primary);
    color: var(--sl-primary);
}

    .sl-btn--outline:hover {
        background: var(--sl-primary-soft);
        color: var(--sl-primary);
        text-decoration: none;
    }

.sl-btn[disabled],
.sl-btn.is-disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

.sl-btn__spinner {
    display: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    animation: sl-spin .7s linear infinite;
}

.sl-btn.is-busy { pointer-events: none; opacity: .85; }
.sl-btn.is-busy .sl-btn__spinner { display: inline-block; }
.sl-btn.is-busy .sl-btn__icon { display: none; }

@keyframes sl-spin { to { transform: rotate(360deg); } }

/* ---- Alerts & attempts meter ------------------------------------- */
.sl-alert {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 10px;
    align-items: start;
    padding: 12px 14px;
    border-radius: var(--sl-radius-sm);
    border: 1px solid;
    font-size: .92rem;
}

    .sl-alert > .rzi { grid-row: span 2; margin-top: 1px; }
    .sl-alert__text { font-weight: 600; }

.sl-alert--danger { background: var(--sl-danger-soft); border-color: var(--sl-danger-border); color: var(--sl-danger); }
.sl-alert--warn { background: var(--sl-warn-soft); border-color: var(--sl-warn-border); color: var(--sl-warn); }
.sl-alert--info { background: var(--sl-info-soft); border-color: var(--sl-info-border); color: var(--sl-info); }

.sl-attempts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    font-weight: 600;
    font-size: .86rem;
}

.sl-dots {
    display: inline-flex;
    gap: 5px;
}

    .sl-dots span {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--sl-dot-free);
    }

        .sl-dots span.is-used { background: var(--sl-dot-used); }

.sl-attempts__last {
    flex-basis: 100%;
    font-weight: 700;
}

/* ---- e-Authentication options ------------------------------------ */
.sl-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.sl-option {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--sl-border);
    border-radius: 16px;
    background: var(--sl-surface-2);
    min-width: 0;
}

.sl-option__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .sl-option__head .rzi {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border-radius: 12px;
        background: var(--sl-primary-soft);
        color: var(--sl-primary);
        font-size: 24px;
    }

.sl-shell .sl-option__title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--sl-text);
}

.sl-shell .sl-option__text {
    margin: 0;
    color: var(--sl-muted);
    font-size: .88rem;
    flex: 1;
}

.sl-option form { display: grid; gap: 10px; margin: 0; }

.sl-option .sl-btn { min-height: 46px; }

/* ---- Footer ------------------------------------------------------- */
.sl-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 18px;
    padding: 6px 16px 18px;
    color: var(--sl-muted);
    font-size: .82rem;
}

.sl-footer__secure {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* =====================================================================
   المرحلة 3 (موبايل PWA): تذكّرنى، الدخول بالبصمة، ثقة (PKI)، رمز التحقق
   | Phase 3 (mobile PWA): remember me, Face ID (passkeys), Thiqa (PKI), OTP
   ===================================================================== */
.sl-shell {
    --sl-check-text: var(--sl-text);
    --sl-divider: var(--sl-border);
    --sl-chip-bg: var(--sl-surface-2);
    --sl-chip-text: var(--sl-text);
    --sl-otp-empty-bg: var(--sl-surface-2);
    --sl-otp-empty-border: var(--sl-border-strong);
    --sl-otp-fill-bg: var(--sl-primary-soft);
    --sl-otp-fill-border: #9cc0ef;
    --sl-otp-active-bg: var(--sl-surface);
    --sl-otp-active-border: var(--sl-primary);
}

.sl-shell.sl-dark {
    --sl-otp-fill-border: rgba(140, 194, 255, .45);
}

/* نص للقارئ الصوتى فقط | screen-reader only */
.sl-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---- تذكّرنى | remember me ----------------------------------------- */
.sl-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    margin: 0;
    color: var(--sl-check-text);
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}

    .sl-check input {
        flex: none;
        width: 18px;
        height: 18px;
        margin: 0;
        accent-color: var(--sl-primary);
        cursor: pointer;
    }

/* ---- الدخول بالبصمة / Face ID ------------------------------------- */
.sl-btn--ghost {
    background: var(--sl-surface);
    border-color: var(--sl-border-strong);
    color: var(--sl-text);
    font-weight: 600;
}

    .sl-btn--ghost:hover {
        border-color: var(--sl-primary);
        color: var(--sl-primary);
        text-decoration: none;
    }

/* يظهر فقط حيث يدعمه المتصفح (login-v3.js يضيف html.sl-has-passkey) | only where the browser supports it */
.sl-passkey { display: none; }
.sl-has-passkey .sl-passkey { display: inline-flex; }

.sl-passkey-status {
    display: none;
    color: var(--sl-danger);
    font-size: .85rem;
    font-weight: 600;
    text-align: center;
}

    .sl-passkey-status.is-on { display: block; }

/* ---- نص الترحيب القصير للموبايل | the short welcome line for phones ---- */
.sl-brand__text--short { display: none; }

/* ---- ثقة (PKI): «أو» ومقدمة +968 تظهران على الموبايل فقط | "or" and +968 show on phones only ---- */
.sl-or { display: none; }
.sl-input__prefix { display: none; }

/* ---- رمز التحقق (Pages/SignInOtp.razor) | the sign-in code page --- */
.sl-otp {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    padding: 22px 28px 28px;
    background: var(--sl-surface);
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius);
    box-shadow: var(--sl-shadow);
}

.sl-otp__back {
    align-self: flex-start;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--sl-chip-bg);
    color: var(--sl-chip-text);
    text-decoration: none;
}

    .sl-otp__back:hover { color: var(--sl-primary); text-decoration: none; }
    .sl-otp__back:focus-visible { outline: 3px solid var(--sl-focus); outline-offset: 2px; }
    .sl-otp__back .rzi { font-size: 24px; }
    [dir="rtl"] .sl-otp__back .rzi { transform: scaleX(-1); }   /* الرجوع لليمين فى العربية | back points right in RTL */

.sl-otp__form {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    margin: 0;
}

.sl-otp__head {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.sl-otp__icon {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    background: var(--sl-primary-soft);
    color: var(--sl-primary);
}

    .sl-otp__icon .rzi { font-size: 34px; }

.sl-shell .sl-otp__title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--sl-text);
}

.sl-shell .sl-otp__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--sl-muted);
}

.sl-otp__phone {
    font-weight: 600;
    color: var(--sl-text);
    unicode-bidi: isolate;
    white-space: nowrap;
}

.sl-otp .sl-alert { margin-top: 18px; }

.sl-shell .sl-otp__label {
    margin: 26px 0 8px;
    font-weight: 700;
    font-size: .88rem;
    color: var(--sl-text);
}

.sl-otp__boxes {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

/* بلا JS: حقل عادى | without JS: a plain field */
.sl-shell input.sl-otp__input {
    grid-column: 1 / -1;
    height: 56px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--sl-border-strong);
    border-radius: 14px;
    background: var(--sl-surface);
    color: var(--sl-text);
    font: inherit;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .5em;
    text-align: center;
}

.sl-otp__box { display: none; }

/* مع JS: الحقل شفاف فوق 6 مربعات | with JS: a transparent field over 6 boxes */
.sl-js .sl-otp__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.sl-js .sl-otp__boxes { margin-top: 30px; }

.sl-js .sl-shell input.sl-otp__input {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: transparent;
    -webkit-text-fill-color: transparent;
    caret-color: transparent;
    font-size: 16px;   /* ≥16px: لا تكبير تلقائى فى iOS | no auto-zoom on iOS */
    letter-spacing: 0;
    box-shadow: none;
}

    .sl-js .sl-shell input.sl-otp__input::selection { background: transparent; }
    .sl-js .sl-shell input.sl-otp__input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px transparent inset; transition: background-color 9999s; }

.sl-js .sl-otp__box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    border-radius: 14px;
    border: 1px solid var(--sl-otp-empty-border);
    background: var(--sl-otp-empty-bg);
    color: var(--sl-text);
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    transition: border-color .12s, background-color .12s;
}

    .sl-js .sl-otp__box.is-filled {
        border-color: var(--sl-otp-fill-border);
        background: var(--sl-otp-fill-bg);
    }

    .sl-js .sl-otp__box.is-active {
        border: 2px solid var(--sl-otp-active-border);
        background: var(--sl-otp-active-bg);
    }

        .sl-js .sl-otp__box.is-active:empty::after {
            content: "";
            width: 2px;
            height: 24px;
            border-radius: 1px;
            background: var(--sl-otp-active-border);
            animation: sl-blink 1s steps(1) infinite;
        }

@keyframes sl-blink { 50% { opacity: 0; } }

.sl-otp__resend {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--sl-muted);
    font-size: 13px;
    text-align: center;
}

.sl-otp__time {
    font-weight: 700;
    color: var(--sl-text);
    font-variant-numeric: tabular-nums;
}

.sl-otp__again {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--sl-primary);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

    .sl-otp__again:hover { background: var(--sl-primary-soft); }
    .sl-otp__again:focus-visible { outline: 3px solid var(--sl-focus); }
    .sl-otp__again[disabled] { opacity: .5; cursor: default; }
    .sl-otp__again .rzi { font-size: 18px; }

.sl-js .sl-otp__resend:not(.is-ready) .sl-otp__again,
.sl-js .sl-otp__resend.is-ready .sl-otp__wait { display: none; }

.sl-otp__spacer { flex: 1 0 28px; }

.sl-otp .sl-check {
    flex: none;
    margin-bottom: 14px;
}

/* ---- Responsive --------------------------------------------------- */
@media (max-width: 960px) {
    .sl-card {
        grid-template-columns: 1fr;
        max-width: 620px;
    }

    .sl-brand {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px 16px;
        padding: 22px 26px;
    }

    .sl-brand__logo { width: 60px; height: 60px; border-radius: 16px; }
    .sl-brand__logo img { width: 50px; height: 50px; }
    .sl-brand__heading { flex: 1; min-width: 0; }
    .sl-brand__title { margin: 0; font-size: 1.3rem; }
    .sl-brand__text { font-size: .9rem; }
    .sl-brand__list,
    .sl-brand__note { display: none; }

    .sl-side { padding: 28px 28px 32px; }
}

@media (max-width: 560px) {
    .sl-shell { font-size: 14px; }
    .sl-topbar { padding: 10px 14px; }
    .sl-topbar__brand span { display: none; }
    .sl-main { padding: 0 10px 14px; align-items: flex-start; }
    .sl-card { border-radius: 16px; }
    .sl-brand { padding: 16px 18px; }
    .sl-brand__logo { display: none; } /* the top bar already shows the product logo */
    .sl-brand__title { font-size: 1.12rem; }
    .sl-brand__text { font-size: .82rem; }
    .sl-side { padding: 20px 16px 24px; }
    .sl-org img { height: 48px; }
    .sl-dark .sl-org img { height: 58px; }
    .sl-shell .sl-title { font-size: 1.3rem; }
    .sl-tab {
        flex-direction: column;
        gap: 2px;
        min-height: 58px;
        padding: 6px 4px;
        font-size: .76rem;
        hyphens: none;
    }
    .sl-options { grid-template-columns: 1fr; }
    .sl-langbtn span { display: none; }
    .sl-langbtn { padding: 0; width: 40px; }
}

/* =====================================================================
   موبايل PWA (شاشتا 11 و12 من لوحة التصميم) — ≤600px
   الشريط العلوى + لوحة الشعار = رأس أزرق، والنموذج بطاقة بيضاء فوقه.
   | Mobile PWA (design screens 11 & 12) — ≤600px: the top bar + brand panel
   | become a blue hero, the form is a white card over it.
   الألوان رموز --sl-* (الصفحة تعمل قبل اتصال Blazor، فلا تعتمد --home-*)
   | colours are --sl-* tokens (the page works before Blazor connects, so not --home-*)
   ===================================================================== */
@media (max-width: 600px) {
    .sl-shell {
        --sl-bg: #f3f5f9;
        --sl-surface: #ffffff;
        --sl-surface-2: #eef1f6;
        --sl-surface-3: #e6eaf1;
        --sl-border: #e3e8f0;
        --sl-border-strong: #d5dce7;
        --sl-text: #0f1b2d;
        --sl-muted: #4f5b6d;
        --sl-primary: #1d4ed8;
        --sl-primary-hover: #1e3a8a;
        --sl-primary-contrast: #ffffff;
        --sl-primary-soft: #e7eefc;
        --sl-focus: rgba(29, 78, 216, .25);
        --sl-danger: #8a1810;
        --sl-danger-soft: #fdeceb;
        --sl-warn: #6b4100;
        --sl-warn-soft: #fff3d6;
        --sl-info: #334155;
        --sl-info-soft: #f5f7fb;
        --sl-dot-used: #c2410c;
        --sl-dot-free: rgba(107, 65, 0, .22);
        --sl-radius-sm: 14px;
        --sl-hero: #1d4ed8;
        --sl-hero-text: #ffffff;
        --sl-hero-muted: #dbe6fb;
        --sl-hero-plate: #ffffff;
        --sl-btn: #1d4ed8;
        --sl-btn-hover: #1e40af;
        --sl-btn-text: #ffffff;
        --sl-btn-off: #cfd6e2;
        --sl-btn-off-text: #4f5b6d;
        --sl-input-bg: #ffffff;
        --sl-tab-active: #ffffff;
        --sl-check-text: #334155;
        --sl-divider: #e3e8f0;
        --sl-chip-bg: #f1f4f9;
        --sl-chip-text: #334155;
        --sl-otp-empty-bg: #f5f7fb;
        --sl-otp-empty-border: #d5dce7;
        --sl-otp-fill-bg: #f1f5ff;
        --sl-otp-fill-border: #b9cdf6;
        --sl-otp-active-bg: #ffffff;
        --sl-otp-active-border: #1d4ed8;
        --sl-card-shadow: 0 12px 30px rgba(15, 27, 45, .10);
        font-size: 14px;
    }

    .sl-shell.sl-dark {
        --sl-bg: #0e141c;
        --sl-surface: #161e29;
        --sl-surface-2: #0e141c;
        --sl-surface-3: #1f2937;
        --sl-border: #243042;
        --sl-border-strong: #33415a;
        --sl-text: #e6ebf2;
        --sl-muted: #9aa6b8;
        --sl-primary: #8fb0ff;
        --sl-primary-hover: #c7d7ff;
        --sl-primary-contrast: #0e141c;
        --sl-primary-soft: #1c2a44;
        --sl-focus: rgba(91, 140, 255, .35);
        --sl-danger: #ffb4ab;
        --sl-danger-soft: #3a1a1a;
        --sl-warn: #f5c451;
        --sl-warn-soft: #3a2c10;
        --sl-info: #c3ccd8;
        --sl-info-soft: #1f2937;
        --sl-dot-used: #f5c451;
        --sl-dot-free: rgba(245, 196, 81, .25);
        --sl-hero: #3d6be8;
        --sl-hero-plate: #ffffff;
        --sl-btn: #3d6be8;
        --sl-btn-hover: #5b8cff;
        --sl-btn-off: #3a475c;
        --sl-btn-off-text: #9aa6b8;
        --sl-input-bg: #121a24;
        --sl-tab-active: #161e29;
        --sl-check-text: #c3ccd8;
        --sl-divider: #243042;
        --sl-chip-bg: #1f2937;
        --sl-chip-text: #c3ccd8;
        --sl-otp-empty-bg: #1f2937;
        --sl-otp-empty-border: #33415a;
        --sl-otp-fill-bg: #1c2a44;
        --sl-otp-fill-border: #2f4a80;
        --sl-otp-active-bg: #161e29;
        --sl-otp-active-border: #5b8cff;
    }

    .sl-backdrop { display: none; }

    /* ---- الرأس الأزرق: الشريط العلوى | the blue hero: top bar ---- */
    .sl-topbar {
        justify-content: flex-end;
        padding: 18px 20px 0;
        padding-top: max(18px, env(safe-area-inset-top));
        background: var(--sl-hero);
        color: var(--sl-hero-text);
    }

    .sl-topbar__brand { display: none; }   /* الشعار فى لوحة الترحيب | the logo is in the welcome panel */
    .sl-topbar__actions { gap: 8px; }
    .sl-langbtn { order: -1; }              /* English ثم الوضع الداكن | English, then dark mode */

    .sl-iconbtn,
    .sl-langbtn {
        height: 36px;
        min-width: 36px;
        border-radius: 18px;
        border-color: rgba(255, 255, 255, .4);
        background: transparent;
        color: var(--sl-hero-text);
        font-size: 13px;
        font-weight: 500;
    }

    .sl-iconbtn { width: 36px; }
    .sl-iconbtn .rzi { font-size: 18px; }
    .sl-langbtn { width: auto; padding: 0 12px; }
    .sl-langbtn .rzi { display: none; }
    .sl-langbtn span { display: inline; }

        .sl-iconbtn:hover,
        .sl-langbtn:hover {
            border-color: #ffffff;
            background: rgba(255, 255, 255, .12);
            color: var(--sl-hero-text);
        }

        .sl-iconbtn:focus-visible,
        .sl-langbtn:focus-visible { outline-color: rgba(255, 255, 255, .55); }

    /* ---- الرأس الأزرق: الترحيب | the blue hero: welcome ---- */
    .sl-main {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 0;
    }

    .sl-card {
        flex: 1 0 auto;
        display: flex;
        flex-direction: column;
        max-width: none;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
    }

    .sl-brand {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 14px;
        padding: 22px 20px 64px;
        background: var(--sl-hero);
        color: var(--sl-hero-text);
    }

        .sl-brand::after { display: none; }

    .sl-brand__logo {
        display: grid;
        flex: none;
        width: 60px;
        height: 60px;
        border-radius: 18px;
        background: var(--sl-hero-plate);
        box-shadow: none;
    }

        .sl-brand__logo img { width: 50px; height: 50px; }

    .sl-brand__heading {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .sl-brand__title {
        margin: 0;
        font-size: 24px;
        font-weight: 700;
        line-height: 1.3;
    }

    .sl-brand__text {
        color: var(--sl-hero-muted);
        font-size: 13px;
        line-height: 1.5;
    }

    .sl-brand__text--full { display: none; }
    .sl-brand__text--short { display: inline; }

    /* ---- البطاقة فوق الرأس | the card over the hero ---- */
    .sl-side {
        position: relative;
        flex: 1 0 auto;
        margin: -44px 14px 0;
        padding: 18px 16px;
        background: var(--sl-surface);
        border-radius: 22px;
        box-shadow: var(--sl-card-shadow);
    }

    .sl-org,
    .sl-shell .sl-subtitle { display: none; }

    .sl-shell .sl-title {   /* يبقى للقارئ الصوتى (aria-labelledby) | kept for screen readers */
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    /* ---- التبويبات | tabs ---- */
    .sl-tabs {
        gap: 4px;
        padding: 4px;
        margin-bottom: 14px;
        background: var(--sl-surface-2);
        border: 0;
        border-radius: 14px;
    }

    .sl-tab {
        flex-direction: row;
        gap: 0;
        min-height: 40px;
        height: 40px;
        padding: 0 4px;
        border-radius: 10px;
        color: var(--sl-muted);
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap;
    }

        .sl-tab .rzi { display: none; }
        .sl-tab:hover { background: transparent; color: var(--sl-text); }

    #sl-m-user:checked ~ .sl-tabs .sl-tab--user,
    #sl-m-ad:checked ~ .sl-tabs .sl-tab--ad,
    #sl-m-eauth:checked ~ .sl-tabs .sl-tab--eauth {
        background: var(--sl-tab-active);
        color: var(--sl-primary);
        font-weight: 700;
        box-shadow: 0 1px 4px rgba(15, 27, 45, .12);
    }

    /* ---- الحقول | fields ---- */
    .sl-form { gap: 14px; }

    .sl-shell .sl-label {
        font-size: 12px;
        font-weight: 600;
        color: var(--sl-muted);
    }

    .sl-input > .rzi { display: none; }

    .sl-shell input.sl-control,
    .sl-shell input.sl-control[dir="ltr"] {
        height: 50px;
        padding-inline: 14px;
        border-color: var(--sl-border-strong);
        border-radius: 14px;
        background: var(--sl-input-bg);
        font-size: 15px;
    }

        .sl-shell input.sl-control:hover { border-color: var(--sl-muted); }
        .sl-shell input.sl-control:disabled { background: var(--sl-surface-2); }

    .sl-shell .sl-input--password input.sl-control { padding-inline-end: 50px; }

    .sl-hint { font-size: 12px; }

    /* الرسالة بعد الحقول كما فى التصميم؛ تنبيه «غير مفعّل» يبقى أولاً | the message after the fields; the "not enabled" note stays first */
    .sl-form > * { order: 3; }
    .sl-form > .sl-field { order: 1; }
    .sl-form > .sl-alert { order: 2; }
    .sl-form > .sl-alert--info { order: 0; }

    /* ---- التنبيهات | alerts ---- */
    .sl-alert {
        gap: 2px 8px;
        padding: 10px 12px;
        border: 0;
        border-radius: 12px;
        font-size: 13px;
        line-height: 1.6;
    }

        .sl-alert > .rzi { font-size: 18px; margin-top: 2px; }
        .sl-alert__text { font-weight: 500; }

    .sl-attempts { gap: 4px 10px; font-size: 12.5px; }
    .sl-dots { gap: 4px; }
    .sl-dots span { width: 8px; height: 8px; }

    /* ---- تذكّرنى + نسيت كلمة المرور | remember me + forgot ---- */
    .sl-row {
        flex-wrap: nowrap;
        gap: 8px;
        font-size: 13px;
    }

    .sl-check { font-size: 13px; font-weight: 400; }
    .sl-check input { width: 20px; height: 20px; accent-color: var(--sl-btn); }
    .sl-shell .sl-row .sl-link { font-size: 13px; white-space: nowrap; }

    /* ---- الأزرار | buttons ---- */
    .sl-btn {
        min-height: 50px;
        border-radius: 14px;
        font-size: 14px;
    }

    .sl-btn--primary {
        min-height: 52px;
        background: var(--sl-btn);
        color: var(--sl-btn-text);
        font-size: 15px;
    }

        .sl-btn--primary:hover { background: var(--sl-btn-hover); color: var(--sl-btn-text); }
        .sl-btn--primary .sl-btn__icon { display: none; }

        .sl-btn--primary[disabled] {   /* الحساب مقفل | the account is locked */
            opacity: 1;
            background: var(--sl-btn-off);
            color: var(--sl-btn-off-text);
        }

    .sl-btn--ghost,
    .sl-option .sl-btn--outline {
        border-color: var(--sl-border-strong);
        background: var(--sl-surface);
        color: var(--sl-text);
        font-weight: 500;
    }

        .sl-btn--ghost:hover,
        .sl-option .sl-btn--outline:hover {
            border-color: var(--sl-primary);
            background: var(--sl-surface);
            color: var(--sl-text);
        }

        .sl-btn--ghost .rzi,
        .sl-option .sl-btn--outline .rzi { font-size: 20px; }

    /* ---- ثقة (PKI) ---- */
    .sl-pane__intro {
        margin: 0 0 14px;
        padding: 12px 14px;
        border-radius: 14px;
        background: var(--sl-info-soft);
        color: var(--sl-info);
        font-size: 13px;
        line-height: 1.7;
    }

        .sl-pane__intro .rzi { display: none; }

    .sl-pane--ad .sl-pane__intro { display: none; }   /* التلميح تحت الحقل يكفى | the hint under the field is enough */

    .sl-options {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .sl-option {
        gap: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .sl-option__head,
    .sl-shell .sl-option__text { display: none; }

    .sl-option form { gap: 6px; }
    .sl-option form .sl-btn { margin-top: 8px; }
    .sl-option .sl-btn { min-height: 50px; }
    .sl-option .sl-btn--primary { min-height: 52px; }
    .sl-option .sl-hint { margin-top: 6px; }

    /* +968 | الرقم دائماً من اليسار | the number always reads left to right */
    .sl-input--phone .sl-input__prefix {
        position: absolute;
        left: 14px;
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--sl-muted);
        font-size: 15px;
        pointer-events: none;
    }

        .sl-input--phone .sl-input__prefix::after {
            content: "";
            width: 1px;
            height: 24px;
            background: var(--sl-border-strong);
        }

    .sl-shell .sl-input--phone input.sl-control[dir="ltr"] {
        padding-left: 70px;
        padding-right: 14px;
    }

    .sl-or {
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--sl-muted);
        font-size: 12px;
    }

        .sl-or::before,
        .sl-or::after {
            content: "";
            flex: 1;
            height: 1px;
            background: var(--sl-divider);
        }

    /* ---- التذييل | footer ---- */
    .sl-footer {
        gap: 2px 12px;
        padding: 14px 20px 18px;
        padding-bottom: max(18px, env(safe-area-inset-bottom));
        font-size: 11px;
    }

    /* ---- رمز التحقق: شاشة كاملة بلا شريط ولا تذييل | the code: full screen, no bar or footer ---- */
    .sl-shell--otp { background: var(--sl-surface); }

    .sl-shell--otp .sl-topbar,
    .sl-shell--otp .sl-footer { display: none; }

    .sl-otp {
        flex: 1 0 auto;
        max-width: none;
        min-height: 100vh;
        min-height: 100dvh;
        padding: 14px 20px 22px;
        padding-top: max(14px, env(safe-area-inset-top));
        padding-bottom: max(22px, env(safe-area-inset-bottom));
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .sl-otp__head { margin-top: 36px; }

    .sl-otp__submit[disabled] {
        opacity: 1;
        background: var(--sl-btn-off);
        color: var(--sl-btn-off-text);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sl-pane,
    .sl-btn__spinner,
    .sl-otp__box::after { animation: none !important; }
    .sl-shell * { transition: none !important; }
}