/* iltz-layout.css */
:root {
    --iltz-sb-width: 280px; /* لازم يطابق عرض السايدبار */
}

/* ارتفاع الهيدر للتوافق مع NavMenu (يستخدمه inset/overlay) */
.iltz-layout {
    background: #fff;
    min-height: 100vh;
}

/* امنع الـoverflow العرضي اللي كان بيظهر في الموبايل */
html, body, .iltz-layout {
    overflow-x: hidden;
}

/* محتوى الصفحة */
.iltz-main {
    padding-top: var(--iltz-topbar-h);
    transition: margin .3s ease;
}

/* هامش المحتوى حسب الاتجاه (السايدبار ظاهر على الديسكتوب) */
.iltz-layout[dir="ltr"] .iltz-main {
    margin-left: var(--iltz-sb-width);
    margin-right: 0;
}

.iltz-layout[dir="rtl"] .iltz-main {
    margin-right: var(--iltz-sb-width);
    margin-left: 0;
}

/* لما السايدبار يتقفل (collapse) على الديسكتوب: المحتوى يتمدّ على كامل الشاشة */
.iltz-layout[dir="ltr"] .iltz-main.is-expanded {
    margin-left: 0;
}

.iltz-layout[dir="rtl"] .iltz-main.is-expanded {
    margin-right: 0;
}

/* موبايل: المحتوى ياخد العرض كامل دايمًا، بغض النظر عن أي ستايل تاني */
@media (max-width: 992px) {
    .iltz-layout .iltz-main {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-top: var(--iltz-topbar-h);
        width: 100%;
    }
}

/* زرار الدعم العائم */
.contact-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 60;
    width: 54px;
    height: 54px;
    border-radius: 999px;
    border: 0;
    background: linear-gradient(90deg,#0a71c0,#1ea9f1);
    color: #fff;
}

[dir="rtl"] .contact-fab {
    right: auto;
    left: 24px;
}

.contact-fab .pulse {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(30,169,241,.45);
    animation: iltz-pulse 2s infinite;
}

@keyframes iltz-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(30,169,241,.45);
    }

    70% {
        box-shadow: 0 0 0 18px rgba(30,169,241,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(30,169,241,0);
    }
}

/* ===== Sidebar brand (logo at the top) ===== */
.iltz-sidebrand {
    position: sticky; /* يثبت أعلى الـscroll داخل السايدبار */
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center; /* اللوجو في المنتصف */
    gap: 10px;
    padding: 14px 12px;
    background: var(--iltz-bg, #fff);
    border-bottom: 1px solid var(--iltz-border, #e9eef5);
    margin: -14px -12px 12px; /* تعويض padding الحاوية لإظهار خط الفصل بكامل العرض */
}

    .iltz-sidebrand img {
        height: 70px;
        width: auto;
        display: block;
        filter: drop-shadow(0 2px 6px rgba(10,113,192,.15));
    }

.iltz-sidebrand-name {
    font-weight: 700;
    font-size: 16px;
    color: var(--iltz-brand-dark, #085a9b);
    white-space: nowrap;
}

/* زر التبديل العائم للسايدبار (نظهره على الديسكتوب فقط بدون اعتماد على Bootstrap) */
.iltz-sb-toggle {
    display: none;
}

@media (min-width: 992px) {
    .iltz-sb-toggle {
        display: inline-flex;
        position: fixed;
        top: calc(var(--iltz-topbar-h, 64px) + 8px);
        z-index: 56;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        border: 1px solid var(--iltz-border, #e9eef5);
        background: #fff;
        box-shadow: var(--iltz-shadow, 0 10px 25px rgba(10,113,192,.08));
        align-items: center;
        justify-content: center;
        transition: background .2s ease, transform .06s ease, left .25s ease, right .25s ease;
    }

        .iltz-sb-toggle:hover {
            background: rgba(30,169,241,.06);
        }

        .iltz-sb-toggle i {
            font-size: 18px;
            color: var(--iltz-brand-dark, #085a9b);
        }

    /* موضع الزر حسب الاتجاه وحالة السايدبار */
    .iltz-layout[dir="ltr"] .iltz-sb-toggle.is-opened {
        left: calc(var(--iltz-sb-width, 280px) + 12px);
    }

    .iltz-layout[dir="ltr"] .iltz-sb-toggle.is-collapsed {
        left: 12px;
    }

    .iltz-layout[dir="rtl"] .iltz-sb-toggle.is-opened {
        right: calc(var(--iltz-sb-width, 280px) + 12px);
    }

    .iltz-layout[dir="rtl"] .iltz-sb-toggle.is-collapsed {
        right: 12px;
    }
}