/* ============================================================================
 *  mobile.css — بهینه‌سازی موبایل  (v37)
 * ============================================================================
 *
 *  مشکلاتی که با تست واقعی روی iPhone SE (۳۷۵px) پیدا و اینجا رفع شدند:
 *
 *   ۱) پورتال مشتری روی موبایل سرریز افقی داشت (scrollWidth تا ۴۳۵px)
 *      علت: لایوت مشتری قانون .main-col{width:100%} را نداشت، پس ستون
 *      اصلی عرض دسکتاپ را نگه می‌داشت و صفحه به راست کشیده می‌شد.
 *
 *   ۲) زوم خودکار iOS: سافاری هر فیلدی با فونت کمتر از ۱۶px را که لمس شود
 *      بزرگ‌نمایی می‌کند و کاربر گیر می‌افتد.
 *
 *   ۳) جدول‌ها روی موبایل بریده می‌شدند (بدون اسکرول افقی).
 *
 *   ۴) گریدهای دوستونی (فرم‌ها، صفحه تسک، پروژه مشتری) در ۳۷۵px
 *      فشرده و ناخوانا می‌شدند.
 *
 *   ۵) دکمه‌ها کوچک‌تر از ۴۴px بودند (استاندارد لمسی اپل/گوگل).
 *
 *  این فایل بعد از بقیه CSSها لود می‌شود تا بتواند override کند.
 * ========================================================================= */

/* ---------------------------------------------------------------- سراسری */
* { -webkit-tap-highlight-color: rgba(249,115,22,.15); }

html, body {
    max-width: 100%;
    overflow-x: hidden;      /* آخرین سد در برابر سرریز افقی */
}

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

/* ============================================================ تبلت و پایین‌تر */
@media (max-width: 1024px) {
    /* ستون اصلی باید تمام عرض را بگیرد — نبودِ این قانون در لایوت مشتری
       عاملِ اصلی سرریز افقی بود */
    .main-col { width: 100% !important; min-width: 0; }
    .app-shell { max-width: 100vw; overflow-x: hidden; }
    .page { padding: 16px !important; max-width: 100%; }
}

/* ================================================================== موبایل */
@media (max-width: 768px) {

    /* ---- جلوگیری از زوم خودکار iOS ----
       سافاری روی فیلدی با فونت < 16px زوم می‌کند. ۱۶px حداقل امن است. */
    input, select, textarea,
    .input, input.input, select.input, textarea.input {
        font-size: 16px !important;
    }

    /* ---- هدف لمسی استاندارد (≥۴۴px) ---- */
    .btn, button, a.btn, input[type="submit"] {
        min-height: 42px;
        padding: 10px 14px;
    }
    .btn-sm { min-height: 38px; font-size: 12.5px; }
    .btn-ghost.btn-sm { min-height: 36px; }

    /* ---- جدول‌ها: اسکرول افقی به‌جای بریدگی ---- */
    .card > table,
    .table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    .table th, .table td { white-space: nowrap; }
    /* ستون اول (معمولاً عنوان) بچسبد تا هنگام اسکرول گم نشود */
    .table thead th:first-child,
    .table tbody td:first-child {
        position: sticky;
        right: 0;
        background: var(--surface);
        z-index: 1;
    }

    /* ---- گریدها یک‌ستونی شوند ---- */
    .stat-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    [style*="grid-template-columns:1fr 320px"],
    [style*="grid-template-columns:1fr 340px"],
    [style*="grid-template-columns: 1fr 320px"],
    [style*="grid-template-columns: 1fr 340px"] {
        grid-template-columns: 1fr !important;
    }
    .tset-grid,
    .rcp-grid,
    .pgrid { grid-template-columns: 1fr !important; }

    /* کارت چسبان در ستون کناری روی موبایل نباید بچسبد */
    [style*="position:sticky"] { position: static !important; }

    /* ---- نوار ابزار ---- */
    .toolbar {
        flex-direction: column;
        align-items: stretch !important;
        gap: 12px;
    }
    .toolbar h2 { font-size: 17px !important; }
    .toolbar > div:last-child { display: flex; gap: 8px; flex-wrap: wrap; }

    /* ---- کارت‌ها ---- */
    .card { padding: 15px !important; border-radius: 14px; }
    .page { padding: 12px !important; }

    /* ---- فرم‌ها ---- */
    .field { margin-bottom: 12px; }
    form [style*="grid-template-columns:repeat(auto-fit"],
    form [style*="grid-template-columns: repeat(auto-fit"] {
        grid-template-columns: 1fr !important;
    }

    /* ---- تقویم شمسی روی موبایل ---- */
    .jdp-pop { width: calc(100vw - 24px) !important; max-width: 320px; }
    .jdp-d { padding: 10px 0 !important; font-size: 14px !important; }

    /* ---- مودال‌ها ---- */
    .rcp-box { max-width: 100% !important; padding: 15px !important; }

    /* ---- سایدبار تمام‌عرض روی موبایل کوچک ---- */
    .sidebar { width: min(300px, 88vw) !important; }

    /* ---- متن‌ها ---- */
    .stat-value { font-size: 20px !important; }
    .chart-title { font-size: 13.5px !important; }
}

/* ============================================================ موبایل باریک */
@media (max-width: 420px) {
    .stat-grid { grid-template-columns: 1fr !important; }
    .toolbar > div:last-child .btn { flex: 1; justify-content: center; }
}

/* ================================================= بهبود لمس و دسترس‌پذیری */
@media (hover: none) and (pointer: coarse) {
    /* افکت hover روی لمس معنا ندارد و باعث «چسبیدن» حالت می‌شود */
    .nav-item:hover { transform: none; }
    .card:hover { box-shadow: none; }

    /* نوار اسکرول جدول قابل دیدن باشد */
    .table::-webkit-scrollbar { height: 4px; }
    .table::-webkit-scrollbar-thumb {
        background: var(--signal); border-radius: 4px; opacity: .5;
    }
}

/* ======================================================== نمایشگر رسانه v37
 *  گالری خروجی محتوا — استفاده در پورتال مشتری و پنل
 * ------------------------------------------------------------------------ */
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
}
@media (max-width: 480px) {
    .media-grid { grid-template-columns: 1fr; }
}

.media-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--hairline);
    background: var(--surface-raised, rgba(127,127,127,.06));
}
.media-item img,
.media-item video {
    display: block;
    width: 100%;
    /* ⚠️ ارتفاع ثابت با object-fit:cover — بدون این، تصویر باریک یا
       کوچک یک کادر سیاهِ بلند اشغال می‌کرد (در تست بصری دیده شد).
       نسخه کامل با کلیک در نمایشگر تمام‌صفحه دیده می‌شود. */
    height: 190px;
    object-fit: cover;
    background: var(--surface-raised, #f1f3f5);
}
.media-item video { background: #000; object-fit: contain; }
@media (max-width: 480px) {
    /* روی موبایل کارت تمام‌عرض است؛ ارتفاع کمتر یعنی موارد بیشتری
       بدون اسکرول دیده می‌شود */
    .media-item img, .media-item video { height: 200px; }
}
.media-item video { cursor: pointer; }

.media-badge {
    position: absolute; top: 8px; inset-inline-start: 8px;
    background: rgba(0,0,0,.65); color: #fff;
    font-size: 10.5px; padding: 3px 8px; border-radius: 99px;
    display: flex; align-items: center; gap: 4px;
    backdrop-filter: blur(4px);
}
.media-cap {
    padding: 9px 11px; font-size: 12px; line-height: 1.9;
    border-top: 1px solid var(--hairline);
}
.media-file {
    display: flex; align-items: center; gap: 10px;
    padding: 14px; text-decoration: none; color: var(--text);
}
.media-file i { font-size: 22px; color: var(--signal); }

/* ---- نمایشگر تمام‌صفحه (lightbox) ---- */
.mv-back {
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(0,0,0,.92);
    display: none; align-items: center; justify-content: center;
    padding: 16px;
}
.mv-back.open { display: flex; }
.mv-back img, .mv-back video {
    max-width: 100%; max-height: 88vh;
    border-radius: 10px; object-fit: contain;
}
.mv-close {
    position: absolute; top: 14px; inset-inline-end: 14px;
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255,255,255,.15); color: #fff;
    border: 0; cursor: pointer; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
}
.mv-close:hover { background: rgba(255,255,255,.28); }
.mv-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,.15); color: #fff;
    border: 0; cursor: pointer; font-size: 20px;
    display: flex; align-items: center; justify-content: center;
}
.mv-prev { inset-inline-start: 12px; }
.mv-next { inset-inline-end: 12px; }
.mv-caption {
    position: absolute; bottom: 16px; inset-inline: 16px;
    color: #fff; font-size: 12.5px; text-align: center;
    background: rgba(0,0,0,.5); padding: 8px 12px; border-radius: 9px;
}