/*!
 * Responsive overrides for AIGWebApp
 * Ensures primary dashboards, data grids, and forms adapt gracefully on tablets and phones.
 */

body.mobile-responsive {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body.mobile-responsive img,
body.mobile-responsive svg,
body.mobile-responsive video {
    max-width: 100%;
    height: auto;
}

body.mobile-responsive .main-container {
    min-height: 100vh;
}

@media (max-width: 1280px) {
    body.mobile-responsive .panel {
        padding: 1.5rem !important;
    }
}

@media (max-width: 1024px) {
    body.mobile-responsive .main-container {
        padding-left: 0;
    }

    body.mobile-responsive .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(280px, 85vw);
        transform: translateX(-100%);
        transition: transform .3s ease;
        z-index: 60;
    }

    body.mobile-responsive .sidebar.show,
    body.mobile-responsive.toggle-sidebar .sidebar {
        transform: translateX(0);
    }

    body.mobile-responsive .main-content {
        margin-left: 0 !important;
        width: 100%;
    }

    body.mobile-responsive header .horizontal-menu {
        overflow-x: auto;
        scrollbar-width: thin;
        -ms-overflow-style: none;
    }

    body.mobile-responsive header .horizontal-menu::-webkit-scrollbar {
        height: 6px;
    }

    body.mobile-responsive header .horizontal-menu::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.5);
        border-radius: 9999px;
    }
}

@media (max-width: 900px) {
    body.mobile-responsive header .horizontal-menu {
        display: none;
    }

    body.mobile-responsive header .horizontal-logo {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 1024px) {
    body.mobile-responsive .panel {
        padding: 1.25rem !important;
    }

    body.mobile-responsive .panel .flex.items-center,
    body.mobile-responsive .panel .flex.justify-between,
    body.mobile-responsive .panel .flex[class*="md:flex-row"],
    body.mobile-responsive .panel .flex[class*="lg:flex-row"] {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: stretch;
        gap: .75rem;
    }

    body.mobile-responsive .panel .flex.items-center > *,
    body.mobile-responsive .panel .flex.justify-between > * {
        width: 100%;
    }
}

@media (max-width: 1024px) {
    body.mobile-responsive .panel [class*="grid-cols-6"],
    body.mobile-responsive .panel [class*="grid-cols-5"],
    body.mobile-responsive .panel [class*="grid-cols-4"],
    body.mobile-responsive .panel [class*="grid-cols-3"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.mobile-responsive .panel [class*="col-span-6"],
    body.mobile-responsive .panel [class*="col-span-5"],
    body.mobile-responsive .panel [class*="col-span-4"],
    body.mobile-responsive .panel [class*="col-span-3"] {
        grid-column: span 2 / span 2 !important;
    }
}

@media (max-width: 768px) {
    body.mobile-responsive .panel {
        padding: 1rem !important;
    }

    body.mobile-responsive .panel [class*="grid-cols-"],
    body.mobile-responsive .panel [class*="grid-cols-2"] {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }

    body.mobile-responsive .panel [class*="col-span-"] {
        grid-column: span 1 / span 1 !important;
    }

    body.mobile-responsive .panel form .flex,
    body.mobile-responsive .panel .flex.items-center,
    body.mobile-responsive .panel .flex.justify-between {
        flex-direction: column;
        align-items: stretch;
    }

    body.mobile-responsive .panel form .flex > *,
    body.mobile-responsive .panel .flex.items-center > *,
    body.mobile-responsive .panel .flex.justify-between > * {
        width: 100%;
    }
}

body.mobile-responsive .panel table {
    width: 100%;
}

body.mobile-responsive .table-responsive,
body.mobile-responsive .panel.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

body.mobile-responsive .table-responsive table,
body.mobile-responsive .panel.table-responsive table {
    min-width: 720px;
}

@media (max-width: 768px) {
    body.mobile-responsive .panel table {
        min-width: 640px;
    }
}

body.mobile-responsive .panel {
    overflow-x: auto;
}

body.mobile-responsive .panel::-webkit-scrollbar {
    height: 6px;
}

body.mobile-responsive .panel::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.35);
    border-radius: 9999px;
}

body.mobile-responsive .dx-datagrid {
    max-width: 100%;
}

body.mobile-responsive .dx-datagrid .dx-datagrid-headers,
body.mobile-responsive .dx-datagrid .dx-datagrid-rowsview {
    overflow-x: auto !important;
}

@media (max-width: 768px) {
    body.mobile-responsive .dx-datagrid .dx-datagrid-rowsview table {
        min-width: 640px;
    }
}

@media (max-width: 640px) {
    body.mobile-responsive .page-title,
    body.mobile-responsive h1,
    body.mobile-responsive h2 {
        font-size: 1.35rem;
    }

    body.mobile-responsive h3 {
        font-size: 1.2rem;
    }

    body.mobile-responsive .btn,
    body.mobile-responsive button,
    body.mobile-responsive input,
    body.mobile-responsive select {
        font-size: .95rem;
    }
}

body.mobile-responsive .panel .card {
    width: 100%;
}

body.mobile-responsive .panel .toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

body.mobile-responsive .panel .toolbar > * {
    flex: 1 1 auto;
    min-width: 180px;
}