/* =========================================================
   ۱۸) واکنش‌گرایی Tabulator (Responsive)
   هدف: تغییر ساختار نمایش برای موبایل/دسکتاپ
   وابستگی: universalFormatter در JS مقدار span.title و span.value تولید می‌کند
   نکته: در عرض بالا title مخفی می‌شود، در موبایل header مخفی و ردیف‌ها کارتی می‌شوند
   ========================================================= */
@media (min-width: 851px) {
    .tabulator-cell span.title {
        display: none !important;
    }

    .tabulator-cell span.value {
        display: inline !important;
        color: #fff;
    }
}

@media (max-width: 850px) {
    .tabulator-header {
        display: none !important;
    }

    .tabulator-row {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
        margin: 12px 0 !important;
        padding: 15px !important;
        border-radius: 14px !important;
        background: #1c1c1c !important;
        border: 1px solid #333 !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }

    .tabulator-cell {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 8px 0 !important;
        border: none !important;
        width: 100% !important;
    }

        .tabulator-cell span.title {
            font-weight: 600;
            color: #a9a9a9;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
        }

        .tabulator-cell span.value {
            color: #fff;
            text-align: left;
            direction: ltr;
            font-size: 14px;
        }
}