/* =============================================================================
   responsive.css
   Mobile-first responsive styles for LDataBrain (phone + tablet)
   ============================================================================= */

/* ─── Mobile Sidebar Overlay ─── */
/* On screens < 768px the sidebar is an off-canvas drawer that slides in from the start side.
   It is controlled via body.sidebar-mobile-open toggled by the hamburger button. */

@media (max-width: 767.98px) {

    /* Backdrop */
    #sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 49;
        background: rgba(0, 0, 0, .55);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    body.sidebar-mobile-open #sidebar-backdrop {
        display: block;
    }

    /* The sidebar itself becomes a fixed overlay drawer */
    aside[data-sidebar="main"] {
        position: fixed !important;
        top: 4rem !important;          /* below topbar */
        bottom: 0 !important;
        inset-inline-start: 0 !important;
        width: 16rem !important;       /* 256px */
        max-width: 80vw !important;
        height: auto !important;
        z-index: 50 !important;
        transform: translateX(-110%);
        transition: transform .25s ease !important;
        display: flex !important;       /* always rendered, just off-screen */
        flex-direction: column !important;
        overflow-y: auto !important;
    }

    html[dir="rtl"] aside[data-sidebar="main"] {
        transform: translateX(110%);
    }

    body.sidebar-mobile-open aside[data-sidebar="main"] {
        transform: translateX(0) !important;
    }

    /* Override "only-md-flex" so the sidebar element is always in the DOM */
    aside[data-sidebar="main"].only-md-flex {
        display: flex !important;
    }

    /* When mobile sidebar is open, prevent body from scrolling */
    body.sidebar-mobile-open {
        overflow: hidden;
    }

    /* Collapsed mode should be ignored on mobile: always show full sidebar */
    body.sidebar-collapsed aside[data-sidebar="main"] {
        width: 16rem !important;
        min-width: 16rem !important;
    }
    body.sidebar-collapsed aside[data-sidebar="main"] .sb-text      { display: inline !important; }
    body.sidebar-collapsed aside[data-sidebar="main"] .caret-col    { display: flex !important; }
    body.sidebar-collapsed aside[data-sidebar="main"] .submenu .sb-text { display: inline !important; }
    body.sidebar-collapsed aside[data-sidebar="main"] summary       { justify-content: flex-start !important; }
    body.sidebar-collapsed aside[data-sidebar="main"] summary > div { justify-content: flex-start !important; }
    body.sidebar-collapsed aside[data-sidebar="main"] .submenu a,
    body.sidebar-collapsed aside[data-sidebar="main"] .submenu button {
        justify-content: flex-start !important;
        padding-left: 2rem !important;
    }
    body.sidebar-collapsed aside[data-sidebar="main"] .submenu {
        border-left: 2px solid rgba(255,255,255,0.22) !important;
        margin-left: 1rem !important;
        padding-left: .75rem !important;
        background: rgba(255,255,255,0.06) !important;
        border: 1px solid rgba(255,255,255,0.10) !important;
        border-radius: .5rem !important;
    }
}

/* ─── TopBar Mobile Optimizations ─── */
@media (max-width: 767.98px) {
    /* Reduce topbar horizontal padding */
    header[data-topbar] > div {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        gap: 0.5rem !important;
    }

    /* Smaller logo */
    header[data-topbar] img[alt="Logo"] {
        height: 1.75rem !important;
        width: auto !important;
    }

    /* Reduce button sizes slightly */
    header[data-topbar] button,
    header[data-topbar] a {
        min-width: 2.25rem;
        min-height: 2.25rem;
    }
}

/* ─── Main Content Responsive Padding ─── */
@media (max-width: 767.98px) {
    /* Less horizontal padding on mobile */
    #content {
        padding-inline-start: 0.75rem !important;
        padding-inline-end: 0.75rem !important;
        margin-inline-start: 0 !important;
    }

    /* Reduce vertical padding */
    #content.py-8 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    /* Tablet: moderate padding */
    #content {
        padding-inline-start: 1rem !important;
        padding-inline-end: 1rem !important;
    }
}

/* ─── Tables: Horizontal Scroll ─── */
/* Wrap DataTables in a scrollable container on small screens */
@media (max-width: 1023.98px) {
    .dataTables_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Ensure table doesn't collapse too much */
    .dataTables_wrapper table.dataTable {
        min-width: 600px;
    }

    /* Stack DataTables controls */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        float: none !important;
        text-align: start !important;
        margin-bottom: 0.75rem;
    }

    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        text-align: center !important;
        padding-top: 0.5rem;
    }

    /* Generic table scrolling (non-DataTables) */
    .table-responsive-wrapper,
    section table,
    .overflow-x-auto {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    section > table,
    section > div > table {
        min-width: 500px;
    }
}

/* ─── Forms: Stack on Mobile ─── */
@media (max-width: 639.98px) {
    /* Force single column grid on phones */
    .grid.grid-cols-1.md\:grid-cols-2,
    .grid.md\:grid-cols-2,
    .grid.md\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    /* Stack flex rows that are horizontal on desktop */
    .flex.flex-col.md\:flex-row {
        flex-direction: column !important;
    }

    /* Full-width buttons on very small screens */
    .flex-wrap.items-center.gap-2 > button,
    .flex-wrap.items-center.gap-2 > a {
        width: 100%;
        justify-content: center;
    }
}

/* ─── Cards & Panels ─── */
@media (max-width: 767.98px) {
    /* Reduce card padding on mobile */
    .rounded-2xl > .px-4.py-4,
    .rounded-2xl > .px-4.py-2,
    .rounded-2xl > div > .px-4 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Full-width cards (no side margin) */
    .rounded-2xl {
        border-radius: 0.75rem !important;
    }

    /* Page header adjustments */
    [data-page-header] h2 {
        font-size: 1.25rem !important;
    }
}

/* ─── Login Page Mobile ─── */
@media (max-width: 767.98px) {
    /* Login box full-width on mobile */
    section .w-\[90vw\],
    section .md\:w-\[60vw\] {
        width: 95vw !important;
    }

    /* Stack login grid to single column */
    section .grid.grid-cols-1.md\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
}

/* ─── Modals & Dropdowns ─── */
@media (max-width: 767.98px) {
    /* Dropdown menus: max width so they don't overflow viewport */
    #lang-panel,
    #user-panel {
        max-width: calc(100vw - 1rem) !important;
    }

    /* Ensure modals / overlays don't extend past viewport */
    .fixed.inset-0 {
        overflow-y: auto;
    }
}

/* ─── Typography scale for small screens ─── */
@media (max-width: 639.98px) {
    .text-2xl { font-size: 1.25rem !important; }
    .text-xl  { font-size: 1.1rem !important; }
    .text-lg  { font-size: 1rem !important; }
}

/* ─── Utility: Hide on mobile, show on desktop ─── */
.mobile-only  { display: none; }
.desktop-only { display: initial; }

@media (max-width: 767.98px) {
    .mobile-only  { display: initial !important; }
    .desktop-only { display: none !important; }
}

/* ─── Flex gap reduction on small screens ─── */
@media (max-width: 639.98px) {
    .gap-4 { gap: 0.75rem !important; }
    .gap-6 { gap: 1rem !important; }
    .space-y-5 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    }
}

/* ─── Ensure images/videos don't overflow ─── */
img, video, svg, canvas {
    max-width: 100%;
    height: auto;
}

/* ─── Touch-friendly tap targets ─── */
@media (max-width: 767.98px) {
    /* Ensure interactive elements have at least 44x44 tap area */
    .submenu a,
    .submenu button {
        min-height: 2.75rem;
        display: flex;
        align-items: center;
    }

    /* Sidebar summary items */
    aside[data-sidebar="main"] summary {
        min-height: 3rem;
    }
}

/* ─── Landscape phone adjustments ─── */
@media (max-height: 500px) and (orientation: landscape) {
    header[data-topbar] > div {
        height: 3rem !important;
    }

    aside[data-sidebar="main"] {
        top: 3rem !important;
    }

    #content {
        min-height: calc(100vh - 3rem) !important;
    }
}

/* ─── Print: hide nav chrome ─── */
@media print {
    header[data-topbar],
    aside[data-sidebar="main"],
    #sidebar-backdrop,
    #sidebarToggleBtn {
        display: none !important;
    }

    #content {
        margin: 0 !important;
        padding: 0.5rem !important;
    }
}

/* ─── Thin scrollbar utility ─── */
.scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: rgba(100,116,139,.4) transparent;
}
.scrollbar-thin::-webkit-scrollbar {
    height: 4px;
}
.scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
    background: rgba(100,116,139,.4);
    border-radius: 9999px;
}

/* ─── Settings tab bar: scrollable on mobile ─── */
@media (max-width: 639.98px) {
    section[data-page="general-settings"] .max-w-3xl {
        max-width: 100% !important;
    }

    section[data-page="general-settings"] .inline-flex.rounded-full {
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
    }
}

/* ─── DataFlow filters: stack on mobile ─── */
@media (max-width: 639.98px) {
    section .flex.flex-wrap.items-center.gap-3 .flex.items-center.gap-2 {
        width: 100%;
    }

    section .flex.flex-wrap.items-center.gap-3 select {
        width: 100% !important;
        min-width: unset !important;
    }
}