/* ================================================================
   Kaleem Admin – Responsive / Mobile CSS
   ================================================================ */

/* ── Tables: always horizontally scrollable ─────────────── */
.fi-ta-ctn,
.fi-ta-wrap,
[class*="fi-ta-ctn"],
[class*="fi-ta-wrap"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

.fi-ta-table,
[class*="fi-ta-table"] {
    min-width: 560px;
}


/* ── Tablet (≤ 1024px) ───────────────────────────────────── */
@media (max-width: 1024px) {
    .fi-main-ctn {
        padding-inline-start: 0 !important;
    }

    .fi-wi-stats-overview-stats-ctn {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


/* ── Mobile (≤ 768px) ────────────────────────────────────── */
@media (max-width: 768px) {

    /* Page padding */
    .fi-page,
    [class*="fi-page"] {
        padding: 0.75rem !important;
    }

    .fi-section-content,
    [class*="fi-section-content"] {
        padding: 0.75rem !important;
    }

    /* Page heading smaller */
    h1[class*="fi-"],
    .fi-header-heading,
    [class*="fi-page-heading"] {
        font-size: 1.2rem !important;
    }

    /* Header stack on mobile */
    .fi-header,
    [class*="fi-header"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }

    .fi-header-actions,
    [class*="fi-header-actions"] {
        width: 100% !important;
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
    }

    .fi-header-actions .fi-btn,
    [class*="fi-header-actions"] button {
        flex: 1 1 auto;
        justify-content: center !important;
        font-size: 0.8rem !important;
        padding-inline: 0.625rem !important;
    }

    /* Breadcrumbs wrap */
    .fi-breadcrumbs ol {
        flex-wrap: wrap;
        gap: 0.2rem;
    }

    /* Stats: single column */
    .fi-wi-stats-overview-stats-ctn {
        grid-template-columns: 1fr !important;
    }

    .fi-wi-stats-overview-stat {
        min-width: 0 !important;
        padding: 1rem !important;
    }

    /* Forms: single column */
    .fi-fo-field-wrp,
    .fi-form-section-content .grid {
        grid-template-columns: 1fr !important;
    }

    /* Modals: full screen */
    [class*="fi-modal-window"] {
        width: 100vw !important;
        max-width: 100vw !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* Action bar */
    .fi-ac-actions,
    [class*="fi-ac-actions"] {
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
    }

    /* Filters */
    [class*="fi-ta-filters-ctn"] {
        flex-direction: column !important;
        width: 100% !important;
    }

    [class*="fi-ta-search-field"] {
        width: 100% !important;
    }

    /* Pagination */
    .fi-pagination,
    [class*="fi-pagination"] {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.25rem !important;
    }

    /* Tabs: horizontal scroll */
    .fi-tabs,
    [class*="fi-tabs"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none !important;
    }

    .fi-tabs::-webkit-scrollbar,
    [class*="fi-tabs"]::-webkit-scrollbar {
        display: none !important;
    }

    /* Topbar */
    .fi-topbar,
    header[class*="fi-topbar"] {
        padding-inline: 0.75rem !important;
    }

    /* Charts */
    [class*="fi-wi-chart"] canvas {
        max-height: 220px !important;
    }
}


/* ── Small mobile (≤ 480px) ──────────────────────────────── */
@media (max-width: 480px) {

    .fi-wi-stats-overview-stats-ctn {
        grid-template-columns: 1fr !important;
    }

    [class*="fi-wi-stats-overview-stat-value"] {
        font-size: 1.5rem !important;
    }

    /* Sidebar nav items – slightly more compact */
    .fi-sidebar-item-btn,
    .fi-sidebar-item-button,
    [class*="fi-sidebar-item-btn"] {
        padding: 0.4rem 0.625rem !important;
        font-size: 0.82rem !important;
    }

    [class*="fi-sidebar-group-label"] {
        font-size: 0.62rem !important;
        padding-block: 0.4rem !important;
    }
}


/* ── RTL fixes ───────────────────────────────────────────── */
[dir="rtl"] .fi-sidebar {
    border-left: none !important;
    border-right: 1px solid #e2e8f0 !important;
}

[dir="rtl"] .fi-sidebar-nav-item-icon {
    margin-inline-end: 0.5rem !important;
    margin-inline-start: 0 !important;
}