/* =====================================
   RESPONSIVE - FLEXBOX VERSION
===================================== */

/* ===== تبلت ===== */
@media (max-width: 992px) {
    .grid-4 {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 16px !important;
    }

    .grid-4 .card {
        flex: 1 1 calc(50% - 16px) !important;
        min-width: 200px !important;
    }

    .grid-3 {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 16px !important;
    }

    .grid-3 .card {
        flex: 1 1 calc(50% - 16px) !important;
        min-width: 180px !important;
    }

    .content {
        padding: 18px !important;
    }
}

/* ===== موبایل ===== */
@media (max-width: 768px) {
    /* ===== هدر ===== */
    .topbar {
        padding: 0 12px !important;
    }
    .topbar-right strong {
        font-size: 14px !important;
    }

    /* ===== سایدبار ===== */
    .sidebar {
        width: 100% !important;
        min-height: auto !important;
        border-left: none !important;
        border-bottom: 1px solid var(--border) !important;
    }

    /* ===== layout ===== */
    .container {
        flex-direction: column !important;
    }

    /* ===== محتوا ===== */
    .content {
        padding: 10px !important;
        overflow-x: hidden !important;
    }

    /* ===== کارت‌های آماری (4 تایی) ===== */
    .grid-4 {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        justify-content: space-between !important;
    }

    .grid-4 .card {
        flex: 1 1 calc(50% - 6px) !important;
        min-width: 120px !important;
        max-width: 100% !important;
        padding: 14px 12px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .grid-4 .card h2 {
        font-size: 20px !important;
        margin: 4px 0 !important;
    }

    .grid-4 .card h3 {
        font-size: 12px !important;
        margin: 0 !important;
    }

    .grid-4 .card br {
        display: none !important;
    }

    /* ===== گریدهای ۲ و ۳ ===== */
    .grid-2,
    .grid-3 {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .grid-2 .card,
    .grid-3 .card {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 16px !important;
    }

    /* ===== همه کارت‌ها ===== */
    .card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        margin: 0 !important;
        border-radius: 14px !important;
    }

    /* ===== جدول‌ها ===== */
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: block !important;
        width: 100% !important;
    }

    .table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
        font-size: 12px !important;
        border-collapse: collapse !important;
    }

    .table th,
    .table td {
        padding: 6px 8px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    /* ===== فرم‌های فیلتر ===== */
    .card form {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .card form > div {
        width: 100% !important;
        min-width: unset !important;
        flex: none !important;
    }

    .card form .btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* ===== دکمه‌ها ===== */
    .btn {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 12px !important;
        font-size: 14px !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    /* ===== فیلدهای فرم ===== */
    form input,
    form select,
    form textarea {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
        padding: 10px 12px !important;
    }

    /* ===== لاگین ===== */
    .login-card {
        max-width: 100% !important;
        padding: 20px !important;
    }

    /* ===== نمودار ===== */
    #salesChart {
        max-height: 150px !important;
        width: 100% !important;
    }

    /* ===== وضعیت فاکتورها (جدول کوچک) ===== */
    .status-table {
        font-size: 12px !important;
    }
    .status-table th,
    .status-table td {
        padding: 4px 6px !important;
    }
}

/* ===== موبایل خیلی کوچک ===== */
@media (max-width: 400px) {
    body {
        font-size: 13px !important;
    }

    .grid-4 .card {
        flex: 1 1 100% !important;
    }

    .card {
        padding: 12px !important;
    }

    .btn {
        padding: 10px !important;
        font-size: 13px !important;
    }

    .table th,
    .table td {
        padding: 4px 6px !important;
        font-size: 10px !important;
    }
}