/* =============================================================================
   android-fixes.css
   اصلاح مشکلات ظاهری اختصاصی گوشی‌های اندروید (نیازمندی ۲).

   چرا این فایل جدا از mobile-fixes.css است؟
   mobile-fixes.css مشکلات چیدمانیِ صفحه‌ی اصلی سایت را پوشش می‌دهد (که در
   آیفون هم لازم بود). مشکلاتی که فقط در اندروید (Chrome Android، Samsung
   Internet، Firefox Android) دیده می‌شوند و در آیفون/Safari دیده نمی‌شوند،
   ریشه‌ی متفاوتی دارند:
     - موتور رندر پیش‌فرض این مرورگرها به‌طور پیش‌فرض روی input/select/button
       ظاهر بومی سیستم‌عامل (Material) را اعمال می‌کند مگر صراحتاً خاموش شود.
     - واحد ۱۰۰vh در اندروید ارتفاع نوار آدرس را حساب نمی‌کند و باعث می‌شود
       محتوا زیر نوار آدرس/نویگیشن پنهان یا بریده شود (این باگ در iOS Safari
       مدرن با dvh حل شده اما اندروید WebView قدیمی‌تر به آن نیاز دارد).
     - فوکوس‌شدن input با فونت کوچک‌تر از ۱۶px باعث Zoom خودکار ناخواسته
       می‌شود.
     - Tap Highlight آبی پیش‌فرض اندروید روی دکمه‌ها/لینک‌ها.
     - اسکرول افقی ناخواسته وقتی هر عنصری (جدول، مودال، تصویر) کمی از عرض
       صفحه بیرون بزند - در اندروید بر خلاف iOS به‌صورت خودکار "Rubber-band"
       نمی‌شود و اسکرول افقی واقعی و ماندگار ایجاد می‌کند.
   این فایل بعد از style.css، mobile-fixes.css و panel-extras.css لود می‌شود
   تا با اولویت یکسان CSS، آخرین و قطعی باشد. هیچ رنگ/فونت جدیدی تعریف
   نمی‌شود؛ فقط از متغیرهای موجود در style.css استفاده می‌شود.
   ============================================================================= */

/* -----------------------------------------------------------------------
   ۰) ایمنی سراسری - جلوگیری قطعی از اسکرول افقی، در تمام صفحات (نه فقط
      صفحه اصلی) و در تمام اندازه‌های موبایل/تبلت اندرویدی
   ----------------------------------------------------------------------- */
html {
    overflow-x: hidden;
    width: 100%;
}
body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
    /* حذف رنگ آبی/خاکستری هایلایت پیش‌فرض اندروید هنگام لمس دکمه/لینک */
    -webkit-tap-highlight-color: transparent;
}

/* هر عنصری که به هر دلیل عریض‌تر از صفحه شود (تصویر بزرگ، جدول، iframe)
   به‌جای اسکرول افقی کل صفحه، در صورت امکان جمع می‌شود */
img, video, iframe, svg, table {
    max-width: 100%;
}

/* باگ شناخته‌شده Flexbox/Grid در Chrome/Samsung Internet: فرزندان فلکس یا
   گرید بدون min-width:0 با محتوای طولانی (مثل ایمیل/لینک/عدد فارسی)
   می‌توانند از عرض کانتینر خودشان بیرون بزنند و اسکرول افقی ایجاد کنند */
.panel-main, .panel-content, .panel-card, .form-grid, .field-group,
.panel-topbar, .panel-user-box, .data-table-wrap, .stats-banner-grid,
.analytics-cards, .transfer-users-grid, .bulk-transfer-bar {
    min-width: 0;
}

/* همان باگ، اما در صفحه‌ی جزئیات آگهی: ستون گرید سمت راست (کادر مشاور)
   وقتی متن دکمه‌ی «چت با مشاور درباره این آگهی» جا نمی‌شد، به‌جای Wrap
   شدن، کل ردیف Grid را عریض‌تر از صفحه می‌کرد. در دسکتاپ/آیفون به‌خاطر
   تفاوت جزئی متریک فونت این آستانه رد نمی‌شد، اما در Chrome/Samsung
   Internet اندروید رد می‌شد و باعث اسکرول/بریدگی افقی کل کادر مشاور و
   شماره تماس می‌شد. */
.detail-layout, .detail-layout > *,
.consultant-card, .consultant-profile, .consultant-profile > div,
.consultant-phone-box, .spec-item,
.listing-grid > *, .listing-grid-3 > *, .category-grid > *,
.consultants-grid > *, .panel-cards > *, .footer-grid > * {
    min-width: 0;
}

/* دکمه‌های تمام‌عرض (مثل «چت با مشاور») مجازند در صورت طولانی بودن متن،
   به‌جای بیرون‌زدن از کادر، به دو خط بشکنند - فقط برای دکمه‌های
   block (تمام‌عرض)؛ روی دکمه‌های معمولی هیچ اثری ندارد و ظاهر دسکتاپ هم
   تغییر نمی‌کند چون آنجا عرض کافی هست و اصلاً نیازی به شکستن خط نیست */
.btn-block {
    white-space: normal;
    line-height: 1.35;
    text-align: center;
}

/* شماره تماس مشاور: تضمین می‌کند در صورت فشرده‌شدن کادر، عدد به‌جای
   بیرون‌زدن از کادر، در صورت نیاز بشکند */
.consultant-phone-box .phone-number {
    overflow-wrap: anywhere;
    max-width: 100%;
}

/* روی موبایل/تبلت که .detail-layout تک‌ستونه می‌شود، sticky دیگر معنی
   ندارد و می‌تواند باعث هم‌پوشانی کادر مشاور با محتوای زیرش هنگام
   اسکرول شود؛ در این اندازه‌ها به حالت عادی (static) برمی‌گردد */
@media (max-width: 1024px) {
    .consultant-card {
        position: static;
        top: auto;
    }
}

/* کارت‌های مشخصات (متراژ/تعداد اتاق/سال ساخت/طبقه) در گوشی‌های خیلی
   باریک (۳۲۰ تا ۳۸۰ پیکسل) با ۴ ستون بیش از حد فشرده می‌شدند؛ در این
   اندازه‌ها ۲ ستونه می‌شوند تا اعداد/برچسب‌ها فضای کافی داشته باشند */
@media (max-width: 420px) {
    .spec-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* -----------------------------------------------------------------------
   ۱) واحد ارتفاع کامل صفحه - جایگزینی امن ۱۰۰vh با dvh (با fallback)
      در اندروید، نوار آدرس/نویگیشن ارتفاع واقعی viewport را کم می‌کند و
      100vh باعث برش پایین صفحه (هدر، پنل، مودال‌های تمام‌صفحه) می‌شود.
   ----------------------------------------------------------------------- */
@supports (height: 100dvh) {
    .login-page,
    .panel-body,
    .panel-sidebar {
        min-height: 100dvh;
    }
    .panel-sidebar {
        height: 100dvh;
    }
}

/* -----------------------------------------------------------------------
   ۲) input/select/button/checkbox/radio - یکسان‌سازی ظاهر بومی اندروید
      با ظاهر Premium پروژه (بدون این کار، Chrome Android/Samsung Internet
      این عناصر را با استایل Material پیش‌فرض سیستم نمایش می‌دهد که با تم
      طلایی/تیره پروژه هماهنگ نیست)
   ----------------------------------------------------------------------- */
input, select, textarea, button {
    -webkit-appearance: none;
    appearance: none;
    border-radius: var(--radius-md);
    font-family: inherit;
}

/* رفع Zoom خودکار ناخواسته هنگام فوکوس روی input در Chrome/Samsung
   Internet (وقتی font-size کمتر از ۱۶px باشد) */
.form-input, .form-select, textarea.form-input,
input[type="text"], input[type="password"], input[type="number"],
input[type="tel"], input[type="email"], input[type="search"] {
    font-size: max(16px, 0.95rem);
}

/* فلش سفارشی select (چون appearance:none فلش بومی را حذف می‌کند) */
select.form-select, .form-select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A227' stroke-width='2'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: left 12px center;
    background-size: 16px;
    padding-inline-start: 34px;
}

input[type="checkbox"], input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-brand);
}

/* دکمه‌ها: حذف افکت فشار خاکستری بومی اندروید + تضمین پاسخ‌گویی لمسی سریع */
.btn, button, a {
    touch-action: manipulation;
}

/* -----------------------------------------------------------------------
   ۳) Backdrop-filter (افکت شیشه‌ای/Glass Effect) - Fallback برای نسخه‌های
      قدیمی‌تر Chrome Android/Samsung Internet که از backdrop-filter
      پشتیبانی نمی‌کنند؛ به‌جای محو‌شدگی، رنگ پس‌زمینه کمی تیره‌تر/کدرتر
      می‌شود تا خوانایی حفظ شود (افت ظاهری جزئی، نه خرابی کامل UI)
   ----------------------------------------------------------------------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #panel-toast-stack .panel-toast,
    .bulk-transfer-bar,
    .mobile-menu-panel {
        background: var(--color-surface) !important;
    }
}

/* -----------------------------------------------------------------------
   ۴) جدول‌های داده (لیست آگهی‌ها، تاریخچه انتقال و ...) - اسکرول افقی
      کنترل‌شده به‌جای بریدگی یا اسکرول کل صفحه
   ----------------------------------------------------------------------- */
@media (max-width: 900px) {
    .data-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--radius-md);
    }
    /* پوشش تمام قالب‌های موجود که جدول را بدون wrapper اختصاصی رندر می‌کنند
       (لیست مشاوران، مدیران، دسته‌بندی‌ها، مناطق، بنرها، تاریخچه انتقال و ...) */
    .panel-card:has(> .data-table),
    .panel-card:has(> table.data-table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* -----------------------------------------------------------------------
   ۵) Modal / Stepper / Toast - رفتار صحیح روی صفحه‌های کوچک اندرویدی با
      کیبورد باز (که ارتفاع Viewport را به‌شدت کم می‌کند)
   ----------------------------------------------------------------------- */
@media (max-width: 768px) {
    .panel-modal-overlay { padding: 10px; align-items: flex-end; }
    .panel-modal {
        max-height: 86dvh;
        width: 100%;
        max-width: 100%;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        margin-bottom: 0;
    }

    /* ستون‌های فرم روی موبایل همیشه تک‌ستونه تا هیچ فیلدی بریده/فشرده نشود */
    .form-grid { grid-template-columns: 1fr !important; }
    .permission-grid { grid-template-columns: 1fr 1fr !important; }

    .panel-card { padding: 16px; }
    .panel-content { padding: 14px !important; }

    /* جدول‌های پنل روی موبایل کارت‌مانند نمایش داده می‌شوند (اگر قالب از
       data-label استفاده کند)؛ اینجا فقط از سرریز جلوگیری می‌شود */
    .data-table th, .data-table td {
        white-space: normal;
        word-break: break-word;
    }
}

@media (max-width: 480px) {
    .permission-grid { grid-template-columns: 1fr !important; }
    .transfer-summary-box { font-size: 0.82rem; }
    .stepper-dot { width: 22px !important; height: 22px !important; }
}

/* -----------------------------------------------------------------------
   ۶) اسلایدرها/گالری تصاویر - جلوگیری از پرش/لرزش اسکرول افقی در
      Chrome Android هنگام Swipe (باگ شناخته‌شده Scroll-snap ترکیبی با
      transform روی نسخه‌های قدیمی‌تر)
   ----------------------------------------------------------------------- */
.listing-gallery, .pcard-media, .banner-strip {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

/* -----------------------------------------------------------------------
   ۷) اصلاح دکمه‌های شناور (چت، منوی موبایل) که در برخی گوشی‌های اندرویدی
      با ناحیه‌ی امن (Safe Area) نوار ناوبری نرم‌افزاری هم‌پوشانی دارند
   ----------------------------------------------------------------------- */
.chat-fab {
    bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 16px));
}
@media (max-width: 768px) {
    .chat-fab {
        bottom: max(18px, calc(env(safe-area-inset-bottom, 0px) + 12px));
    }
    .bulk-transfer-bar {
        bottom: max(8px, env(safe-area-inset-bottom, 0px));
    }
}