/* Login Layout (processed) — icons inside #header1 enabled */
:root {
    --primary: #5b6cff;
    --primary-ink: #1f2a44;
    --muted: #63708a;
    --bg: #e9ecef;
    --card: #ffffff;
    --border: #d6dde7;
}

/* Base */
body {
    background: var(--bg);
    font-family: "Almarai", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Layout wrapper */
.auth-wrap {
    min-height: calc(var(--vh, 1vh) * 100);
    display: grid;
    grid-template-rows: auto 1fr auto; /* header / body / footer */
    position: relative;
    max-width: 1180px;
    margin-inline: auto;
    padding: 24px 16px;
    overflow: hidden;
}

/* Decorative patterns */
.pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.pattern-left {
    background: repeating-linear-gradient(135deg, rgba(91,108,255,.08) 0 14px, transparent 14px 46px);
    clip-path: polygon(0 0, 21% 0, 8% 50%, 21% 100%, 0 100%);
    opacity: .35;
}

.pattern-right {
    background: repeating-linear-gradient(-45deg, rgba(31,42,68,.06) 0 12px, transparent 12px 40px);
    clip-path: polygon(79% 0, 100% 0, 100% 100%, 79% 100%, 92% 50%);
    opacity: .25;
}

/* Header */
.auth-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: relative;
    z-index: 2;
}

.logo-stack {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-direction: row-reverse;
}

.brand-logo {
    height: 80px;
    width: auto;
    object-fit: contain;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--border);
    padding: 10px;
    box-shadow: 0 6px 12px rgba(31,42,68,.08);
}

    .brand-logo.client {
        height: 76px;
    }

/* Titles (centered) */
.titles {
    /*text-align: center;*/
    position: absolute;
    left: 50%;
    /*transform: translateX(-50%);*/
    white-space: nowrap;
}

    .titles h1 {
        margin: 0;
        font-size: clamp(26px, 2.4vw, 32px);
        font-weight: 800;
        letter-spacing: .25px;
        color: var(--primary-ink);
    }

    .titles h2 {
        margin: 4px 0 0;
        font-size: 16px;
        color: var(--muted);
        letter-spacing: .8px;
    }

/* Body & Footer */
.auth-body {
    display: grid;
    place-items: center;
    padding: 20px 0;
    position: relative;
    z-index: 2;
}

.auth-footer {
    margin-top: 10px;
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    position: relative;
    z-index: 2;
}

/* Language toggle */
.lang-toggle {
    position: absolute;
    top: 8px;
    inset-inline-start: 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    padding: 8px 12px;
    cursor: pointer;
    box-shadow: 0 6px 12px rgba(31,42,68,.08);
}

/* Unified footer (like home page) */
.foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--muted);
    font-size: 13px;
    padding-top: 22px;
    border-top: 1px dashed var(--border);
}

.date {
    opacity: .95;
}
/* اجعل الصفحة 3 صفوف: هيدر / محتوى / فوتر */


/* ===== Header Icons (modular) ===== */

/* Capsule base */
.hdrIcon {
    --size: 28px;
    --radius: 8px;
    width: var(--size);
    height: var(--size);
    display: inline-grid;
    place-items: center;
    color: var(--primary); /* icon color */
    background: #eef3ff; /* soft bg */
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 3px 8px rgba(91,108,255,.12);
}

    /* Draw icon via SVG mask */
    .hdrIcon::before {
        content: "";
        display: block;
        width: 60%;
        height: 60%;
        background: currentColor;
        -webkit-mask-image: var(--icon);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
        mask-image: var(--icon);
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
    }

/* Named icons */
.icon-warehouse { /* Warehouse */
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10L12 5l9 5v9H3z'/%3E%3Crect x='10' y='13' width='4' height='6'/%3E%3C/svg%3E");
}

.icon-hr { /* Human Resources */
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20a8 8 0 0 1 16 0z'/%3E%3C/svg%3E");
}

.icon-sadad { /* SADAD (card) */
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='6' width='18' height='12' rx='3'/%3E%3Crect x='6' y='13' width='5' height='2'/%3E%3Crect x='14' y='13' width='5' height='2'/%3E%3C/svg%3E");
}

/* Sizes */
.hdrIcon--sm {
    --size: 24px;
    --radius: 7px;
}

.hdrIcon--lg {
    --size: 32px;
    --radius: 10px;
}

/* Re-enable icons inside #header1 (override any previous hide rules) */
#header1 .headerIcons {
    display: flex !important;
    align-items: center;
    gap: 6px;
}

#header1 .hdrIcon {
    display: inline-grid !important;
}

/* Align title row nicely */
#LoginHeader .h4#header1 {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 800;
    font-size: clamp(20px, 2.4vw, 24px);
    line-height: 1.25;
}

html[dir="rtl"] #LoginHeader .h4#header1 {
    flex-direction: row-reverse;
}

/* reCAPTCHA centering helper */
.col-12.just #dvCaptcha {
    display: inline-block;
}

/* ===== Media queries ===== */
@media (max-width:360px) {
    .col-12.just #dvCaptcha {
        transform: scale(.9);
        transform-origin: center;
    }
    /* منع خروج reCAPTCHA */
    #dvCaptcha {
        transform: scale(.9);
        transform-origin: center;
    }

    /* تصغير إضافي للعنوان */
    #LoginHeader .h4#header1 {
        font-size: clamp(17px, 5.2vw, 20px);
    }

    /* الأيقونات أصغر */
    #header1 .hdrIcon {
        --size: 22px;
    }
}

@media (max-width:600px) {
    .titles {
        position: static;
        transform: none;
        margin-inline: auto;
    }
        .titles h1 {
            font-size: clamp(22px, 6vw, 26px); /* كان ~22px ضمن الميديا */
        }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}
/* --- أساسيات الجوال --- */
@media (max-width: 600px) {
    /* تمركز الكارت وتقليل الهوامش العلوية */
    .login-box {
        width: 100%;
        max-width: 560px;
        margin: 18px auto 0;
    }
    /* شاشات صغيرة جدًا (≤430px) */
    @media (max-width: 430px) {
        .brand-logo {
            height: 60px;
        }
        /* بدلاً من 48px في mobile-polish */
    }
    /* العنوان في الهيدر */
    #LoginHeader .h4#header1 {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin: 0;
        font-weight: 800;
        font-size: clamp(18px, 5.5vw, 22px); /* أصغر من الديسكتوب */
        line-height: 1.25;
    }

    html[dir="rtl"] #LoginHeader .h4#header1 {
        flex-direction: row-reverse;
    }

    /* مجموعة الأيقونات في الهيدر */
    #header1 .headerIcons {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    #header1 .hdrIcon {
        --size: 24px;
    }
        /* تصغير الكبسولة قليلاً */
        #header1 .hdrIcon::before {
            width: 60%;
            height: 60%;
        }

    /* حقول الإدخال */
    #LoginformDiv .input-group {
        border-radius: 14px;
        overflow: hidden;
    }

    #LoginformDiv .form-control,
    #LoginformDiv .input-group-text {
        height: 44px;
    }

    /* تمركز أزرار الدعوة/الانتقال أسفل الصفحة */
    .cta-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 14px 16px;
        justify-content: center;
        align-items: center;
        align-content: center;
        min-height: 55vh;
        margin-inline: auto;
        text-align: center;
    }

    .cta {
        min-width: 240px;
        padding: 12px 14px;
        border-radius: 14px;
    }

    /* جعل أزرار تسجيل الدخول/الرئيسية تتكدس في الوسط */
    .login-box .btn {
        min-height: 44px;
    }

        .login-box .btn + .btn {
            margin-inline-start: 8px;
        }
}



/* إخفاء الزخرفة الثقيلة على الشاشات الضيقة */
@media (max-width: 480px) {
    .pattern-left, .pattern-right {
        opacity: .12;
    }
}

/* إصلاح تكبير iOS عند التركيز على الحقول */
input, select, textarea {
    font-size: 16px;
}
/* ===== إصلاحات الجوال لـ .login-box ===== */
@media (max-width: 600px) {
    /* الصندوق نفسه */
    .login-box {
        width: 100%;
        max-width: 560px; /* يبقى جميل على التابلت */
        margin: 16px auto 0;
        padding-inline: 12px; /* يمنع الالتصاق بحواف الشاشة */
    }
        /* الكارت */
        .login-box .card.card-outline {
            border-radius: 16px;
            box-shadow: 0 12px 28px rgba(31,42,68,.10);
            overflow: hidden; /* يمنع خروج الحواف/الأيقونات */
        }

        .login-box .card-header#LoginHeader {
            padding: 8px 12px;
        }

    /* العنوان */
    #LoginHeader .h4#header1 {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin: 0;
        font-weight: 800;
        font-size: clamp(18px, 5.5vw, 22px);
        line-height: 1.25;
    }

    html[dir="rtl"] #LoginHeader .h4#header1 {
        flex-direction: row-reverse;
    }

    /* الحقول */
    #LoginformDiv .input-group {
        border-radius: 14px;
        overflow: hidden; /* يمنع بروز input-group-text */
        margin-bottom: 10px;
    }

    #LoginformDiv .form-control,
    #LoginformDiv .input-group-text {
        height: 44px; /* حجم لمسي مريح */
        font-size: 16px; /* يمنع تكبير iOS عند التركيز */
        box-sizing: border-box;
    }

    /* الأزرار */
    .login-box .col-12.text-center .btn {
        min-height: 44px;
        border-radius: 12px;
        width: 100%; /* ازرار كاملة العرض على الشاشات الصغيرة */
        max-width: 320px;
    }

        .login-box .col-12.text-center .btn + .btn {
            margin-top: 8px; /* مسافة بين الأزرار المكدسة */
            margin-inline-start: 0;
        }

    /* reCAPTCHA لا يخرج عن الصندوق */
    #dvCaptcha {
        display: inline-block;
    }
}

@media (max-width: 360px) {
    /* تصغير reCAPTCHA عند الشاشات الأضيق */
    #dvCaptcha {
        transform: scale(.9);
        transform-origin: center;
    }
}

/* بعض الشاشات كان فيها حاويات بعرض ثابت 595px: صحّحها بدون لمس HTML */
#Auth_2,
#OTP_Expired,
#Jawwal_Miss,
.container[style*="width:595px"] {
    width: 100% !important;
    max-width: 560px;
    margin-inline: auto;
}