/* ============================================================
   | responsive.css
   | لایهٔ مکمل واکنش‌گرایی سراسری — بعد از panel.css بارگذاری می‌شود.
   | هدف: تقویت رفتار موبایل بدون تغییر استایل‌های موجود پنل.
   ============================================================ */

/* ---------- 1) جلوگیری از سرریز افقی صفحه (بدون شکستن sticky) ---------- */
@supports (overflow: clip) {
    html,
    body {
        overflow-x: clip;
    }
}

img,
picture,
video,
canvas {
    max-width: 100%;
    height: auto;
}

iframe,
embed,
object {
    max-width: 100%;
}

/* ---------- 2) فاصلهٔ محتوا در نمایشگرهای کوچک ---------- */
@media (max-width: 991.98px) {
    .page-content {
        padding-left: 14px;
        padding-right: 14px;
    }
}

@media (max-width: 575.98px) {
    .page-content {
        padding-left: 10px;
        padding-right: 10px;
    }

    .page-content .card,
    .page-content .panel {
        border-radius: 12px;
    }
}

/* ---------- 3) عنوان‌ها و دکمه‌ها روی موبایل ---------- */
@media (max-width: 767.98px) {
    .page-content > .container-fluid > h1 {
        font-size: 1.2rem;
    }

    /* متن دکمه‌ها به‌جای بریدگی، در صورت نیاز به خط بعد برود */
    .btn {
        white-space: normal;
    }
}

/* ---------- 4) جلوگیری از زوم خودکار مرورگرهای موبایل هنگام فوکوس ---------- */
@media (max-width: 575.98px) {
    input,
    select,
    textarea {
        font-size: 16px;
    }
}

/* ---------- 5) جدول‌های بدون پوشش: اسکرول افقی به‌جای سرریز ---------- */
@media (max-width: 767.98px) {
    .page-content table.table-scroll-x {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}