/* tz-datepicker.css — گاردهای سراسریِ پنجرهٔ تقویمِ شمسی
 *
 * همراهِ src/dist/js/tz-datepicker-fix.js. آن فایل *جای* پنجره را داخلِ صفحه
 * نگه می‌دارد، این فایل *اندازه* و حالتِ موبایلِ آن را درست می‌کند.
 *
 * 🔴 انتخابگرها عمداً نامِ کلاس را دو بار تکرار می‌کنند
 * (‏.datepicker-plot-area.datepicker-plot-area). قاعدهٔ رقیب در
 * taraz-admin-theme.css با وزنِ (۰٬۱٬۰) و !important نوشته شده؛ با تکرارِ نام
 * وزنِ ما (۰٬۲٬۰) می‌شود و دیگر مهم نیست این فایل قبل یا بعد از پوسته بار شود.
 */

/* ── عرضِ پنجره روی نمایشگرِ باریک ───────────────────────────────────────────
 * پوستهٔ تراز عرضِ ثابتِ ۳۲۰ پیکسل روی پنجره گذاشته است. روی گوشیِ باریک همان
 * عدد از عرضِ صفحه بیشتر می‌شود و چون خودِ پنجره overflow:hidden است، ستون‌های
 * آخرِ تقویم بریده می‌شوند. اینجا عرض به اندازهٔ صفحه محدود می‌شود.            */
@media (max-width: 380px) {
    .datepicker-plot-area.datepicker-plot-area {
        width: calc(100vw - 24px) !important;
        min-width: 0 !important;
    }
    /* نمای تمام‌صفحهٔ موبایل از این قاعده مستثناست (پایین‌تر) */
    .datepicker-container.pwt-mobile-view .datepicker-plot-area.datepicker-plot-area {
        width: 100% !important;
    }
}

/* دایرهٔ روزها هرگز از ستونِ خودش پهن‌تر نشود — پوستهٔ تراز عرضِ ثابتِ ۳۸ پیکسل
   به آن می‌دهد و روی صفحهٔ باریک ستون از ۳۸ کوچک‌تر می‌شود. */
.datepicker-plot-area .datepicker-day-view .table-days td span {
    max-width: 100%;
}

/* ── نمای تمام‌صفحهٔ موبایلِ خودِ افزونه ─────────────────────────────────────
 * افزونه روی گوشی پنجره را به یک لایهٔ تمام‌صفحه تبدیل می‌کند
 * (‏.datepicker-container.pwt-mobile-view) و انتظار دارد پنجره ۱۰۰٪ عرض و ارتفاع
 * بگیرد؛ ولی عرضِ ثابتِ !important پوستهٔ تراز آن را می‌شکست و لایهٔ تمام‌صفحه یک
 * کارتِ ۳۲۰ پیکسلیِ چسبیده به لبه می‌شد. اینجا برمی‌گردد به حالتِ درست.        */
.datepicker-container.pwt-mobile-view .datepicker-plot-area {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    border-radius: 0 !important;
    padding: 16px 12px !important;
    overflow: auto !important;
}