/* ============================================
   کلینیک خانه خوشبختی — استایل مشترک موبایل (Mobile-First)
   این فایل بعد از استایل‌های هر صفحه لینک می‌شود
   ============================================ */

/* overflow-x: clip به‌جای hidden — hidden در بعضی مرورگرها position:sticky را می‌شکند */
html, body { overflow-x: clip; }

/* جلوگیری از زوم خودکار ورودی‌ها در iOS */
@media (max-width: 768px) {
    input, select, textarea { font-size: 16px !important; }
}

@media (max-width: 900px) {
    /* ============ جمع‌شدن گریدهای چندستونه ============ */
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr 1fr"],
    [style*="repeat(3,1fr)"],
    [style*="repeat(3, 1fr)"],
    [style*="repeat(auto-fit,minmax(200px"],
    .grid-2, .form-grid, .form-grid-3, .form-row, .modal-grid, .modal-grid-3,
    .charts-grid, .charts-grid2, .btn-row, .actions-row {
        grid-template-columns: 1fr !important;
    }

    /* ============ جدول‌ها: اسکرول افقی ============ */
    /* min-width:auto — اجازه می‌دهد min-width اینلاینِ هر جدول اعمال شود */
    table { display: block; width: 100%; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; min-width: auto; }

    /* راپرهای جدول (اینلاین overflow-x یا کلاس‌های رایج) — اسکرول لمسی */
    div[style*="overflow-x:auto"],
    div[style*="overflow-x: auto"],
    .table-wrap, [class*="table-container"], [class*="table-scroll"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* ============ توپبار جمع‌شونده ============ */
    .topbar { flex-wrap: wrap; padding: 12px 15px !important; gap: 8px; }
    .topbar > div { flex-wrap: wrap; }

    /* ============ کاهش پدینگ کانتینرها ============ */
    .main-content, .container, .content, .wrap, .dashboard, .roles-container,
    .schedule-container, .calendar-scroll {
        padding: 12px 14px !important;
    }

    /* ============ مودال‌ها تمام‌عرض + اسکرول محتوا ============ */
    .modal-box, .modal-content, .modal-large {
        width: 96% !important;
        max-width: 100% !important;
        max-height: 90vh !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .modal-overlay { padding: 12px !important; align-items: flex-start; }
    .modal-overlay.show, .modal-overlay.active { padding: 12px !important; align-items: flex-start; }

    /* ============ دکمه‌های ستون‌چین ============ */
    .btn-primary, .btn, .btn-p, .tb-add, .toolbar-right {
        white-space: nowrap;
    }
    .action-group { flex-wrap: wrap; }

    /* ============ متن‌های بزرگ ============ */
    .stat-card h3, .stat-mini h3, .summary h3 { font-size: 1.6rem !important; }
    h2 { font-size: 1.25rem !important; }
    h3 { font-size: 1.05rem !important; }

    /* ============ کارت‌های شبکه‌ای ============ */
    .schedule-card, .stat-card, .summary, .factor { width: 100% !important; }

    /* ============ تب‌بارهای اسکرول‌شونده (تِب‌های صفحه و مودال) ============ */
    .tabs-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        max-width: 100%;
    }
    .tabs-scroll::-webkit-scrollbar { height: 4px; }
    .tabs-scroll::-webkit-scrollbar-thumb { background: #cbd6c4; border-radius: 4px; }
    .tabs-scroll .tab, .tabs-scroll .tab-btn { flex: 0 0 auto; }

    /* ============ تب‌های غیراسکرول (sms-panel / cases / chat-admin) ============ */
    .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        max-width: 100%;
    }
    .tabs .tab { flex: 0 0 auto; }

    /* ============ اهداف لمسی بزرگ‌تر ============ */
    .btn, .tb-btn, .tab-btn, .tb-add { min-height: 44px; }
    .tb-add, .tb-btn { min-width: 44px; }
    .tabs-scroll .tab-btn, .tabs .tab { min-height: 44px; }

    /* ============ نوار تأیید چسبان پایین — رعایت safe-area ============ */
    .fixed-bottom, .sc-fixed { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* ============ جدول‌های عریض: ستون روز/برچسب اول چسبان بماند (RTL ⇒ راست) ============ */
@media (max-width: 900px) {
    .mgtable thead th:first-child,
    .mgtable tbody td:first-child,
    .occ-table thead th:first-child,
    .occ-table tbody td:first-child {
        position: sticky;
        right: 0;
        z-index: 3;
        box-shadow: -1px 0 0 var(--c-border, #e0e8db);
    }
    .mgtable thead th:first-child,
    .occ-table thead th:first-child { z-index: 4; }
    /* راهنمای اسکرول افقی برای جدول‌های خیلی عریض (۲۴ ستون) */
    .mgtable, .occ-table { min-width: 720px; }
}

/* ============ مودال تب‌دار روی صفحه‌های کوچک: تمام‌صفحه ============ */
@media (max-width: 700px) {
    /* ⚠️ باید با همان دقتِ قاعده‌ی بالاتر (.modal-overlay.show/.active) نوشته شود،
       وگرنه پدینگ ۱۲px آن قاعده برنده می‌شود و مودال تمام‌صفحه نمی‌شود. */
    .modal-overlay,
    .modal-overlay.show,
    .modal-overlay.active { padding: 0 !important; align-items: stretch !important; }
    .modal-large,
    .modal-large.show {
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        padding: 14px !important;
    }
    .modal-large h3 {
        position: sticky;
        top: 0;
        z-index: 5;
        background: #fff;
        padding-bottom: 8px;
        margin-bottom: 10px;
    }
    .modal-large .tabs-scroll {
        position: sticky;
        top: 46px;
        z-index: 4;
        background: #fff;
        padding-bottom: 6px;
        scroll-snap-type: x proximity;
    }
    .modal-large .tabs-scroll .tab-btn { scroll-snap-align: start; min-height: 44px; }
}

/* ورودی‌های با عرض/حداقل‌عرض ثابت — تمام‌عرض در موبایل */
@media (max-width: 480px) {
    [style*="min-width:220px"],
    [style*="min-width:170px"],
    input[style*="width:180px"],
    [style*="min-width:240px"] {
        min-width: 100% !important;
        width: 100% !important;
    }
}

/* عرض‌های خیلی کوچک (۳۶۰px و کمتر) */
@media (max-width: 420px) {
    .tab { min-width: 70px !important; font-size: .72rem !important; padding: 8px 4px !important; }
    .option label { font-size: .7rem !important; padding: 7px 2px !important; }
}