/* ============================================================
   MOBILE RESPONSIVE FIXES — trader_market_app
   Covers: layout, sidebar, tables, forms, buttons, inputs
   ============================================================ */

/* ── 1. BASE LAYOUT ─────────────────────────────────────── */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

#wrapper {
    overflow-x: hidden;
}

/* ── 2. SIDEBAR MOBILE ──────────────────────────────────── */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        z-index: 1050 !important;
        width: 230px !important;
    }

    .sidebar.toggled {
        transform: translateX(0) !important;
    }

    /* Overlay backdrop when sidebar open */
    body.sidebar-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.45);
        z-index: 1049;
    }

    #content-wrapper,
    .sidebar ~ #content-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ── 3. TOPBAR / NAVBAR ─────────────────────────────────── */
@media (max-width: 768px) {
    .topbar {
        padding: 0 10px !important;
        flex-wrap: nowrap !important;
    }

    .navbar-nav .dropdown {
        position: static;
    }

    /* Ensure hamburger is always visible */
    #sidebarToggleTop {
        display: inline-block !important;
        font-size: 18px;
        padding: 6px 10px;
    }
}

/* ── 4. CONTENT AREA ────────────────────────────────────── */
@media (max-width: 768px) {
    #content {
        padding: 0 !important;
    }

    .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ── 5. TABLES ──────────────────────────────────────────── */
/* Make every table horizontally scrollable on mobile */
@media (max-width: 991px) {
    /* Wrap all tables that don't already have table-responsive */
    .container-fluid table,
    .container table,
    #table-container-wrapper,
    #table-container,
    #product-container-wrapper {
        display: block;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Keep table itself as table layout */
    .container-fluid table table,
    .container table table {
        display: table;
    }

    table.table {
        min-width: 550px;
    }

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

    table.table thead th {
        font-size: 11px !important;
    }
}

/* ── 6. FORMS — COLUMN STACKING ─────────────────────────── */
@media (max-width: 576px) {
    /* Force all sm-columns to full-width on XS */
    .row > [class*="col-sm-"],
    .row > [class*="col-md-"],
    .row > [class*="col-xl-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Hide pure spacer columns (no content, no class utility) */
    .col-sm-1:not([class*="mb"]):not([class*="mt"]):empty,
    .col-sm-2:not([class*="mb"]):not([class*="mt"]):empty {
        display: none !important;
    }

    .form-group {
        margin-bottom: 12px !important;
    }

    .form-group label {
        font-size: 13px;
        margin-bottom: 4px;
    }
}

/* ── 7. INPUTS & SELECTS ────────────────────────────────── */
@media (max-width: 768px) {
    .form-control,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="tel"],
    input[type="search"],
    select,
    textarea {
        width: 100% !important;
        font-size: 14px !important;
        min-height: 40px !important;
        box-sizing: border-box !important;
    }

    select.form-control {
        width: 100% !important;
    }
}

/* ── 8. BUTTONS ─────────────────────────────────────────── */
@media (max-width: 576px) {
    /* Ensure buttons have proper touch targets */
    .btn {
        min-height: 38px !important;
        font-size: 13px !important;
        padding: 6px 12px !important;
    }

    /* Button rows: wrap and stack */
    .row .btn,
    .d-sm-flex .btn,
    .mt-4.btn,
    .mt-3.btn {
        margin-bottom: 6px !important;
        margin-right: 4px !important;
    }

    /* Filter button row */
    .row > div > .btn {
        margin-top: 8px !important;
    }

    /* Full-width submit buttons */
    button[type="submit"].form-control,
    button.form-control {
        width: 100% !important;
        margin-top: 10px !important;
    }
}

/* ── 9. CARDS ───────────────────────────────────────────── */
@media (max-width: 576px) {
    .card {
        margin-bottom: 12px !important;
    }

    .card-body {
        padding: 10px !important;
    }

    /* Dashboard stat cards */
    .col-xl-3.col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ── 10. DASHBOARD WELCOME BANNER ──────────────────────── */
@media (max-width: 576px) {
    /* Welcome banner image on mobile */
    .col-sm-5 img.img-fluid {
        display: none !important;
    }

    .col-sm-2:empty {
        display: none !important;
    }

    h1.h3, h3 {
        font-size: 18px !important;
    }
}

/* ── 11. SEARCH BAR ─────────────────────────────────────── */
@media (max-width: 768px) {
    .search-container {
        width: 100% !important;
        margin: 6px 0 !important;
        float: none !important;
    }

    .search-container input {
        width: 100% !important;
        font-size: 13px !important;
    }

    /* Product search bar wrapper */
    .col-sm-5[style*="border-radius:77px"] {
        border-radius: 10px !important;
        margin-top: 8px !important;
        width: 100% !important;
    }
}

/* ── 12. PAGE HEADINGS ROW ──────────────────────────────── */
@media (max-width: 576px) {
    .d-sm-flex.align-items-center.justify-content-between {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px;
    }
}

/* ── 13. FOOTER ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .sticky-footer {
        margin-left: 0 !important;
        padding: 8px 12px !important;
        font-size: 11px !important;
    }

    .sticky-footer .row {
        flex-direction: column !important;
        text-align: center !important;
    }

    .sticky-footer .col-md-6 {
        margin-bottom: 4px;
    }

    #content-wrapper {
        padding-bottom: 80px !important;
    }
}

/* ── 14. MODALS ─────────────────────────────────────────── */
@media (max-width: 576px) {
    .modal-dialog {
        margin: 10px !important;
        max-width: calc(100% - 20px) !important;
    }

    .modal-body {
        padding: 12px !important;
    }
}

/* ── 15. LOGIN PAGE ─────────────────────────────────────── */
@media (max-width: 576px) {
    .container[style*="margin-top:100px"] {
        margin-top: 30px !important;
    }

    .card-body .p-5 {
        padding: 20px !important;
    }
}

/* ── 16. PRINT INVOICE PAGES ────────────────────────────── */
@media (max-width: 768px) {
    .print-only-desktop {
        display: none !important;
    }

    table.invoice-table {
        font-size: 11px !important;
    }
}

/* ── 17. FILTER ROWS (report pages) ────────────────────── */
@media (max-width: 768px) {
    .row.mt-3 > div,
    .row > .col-md-3,
    .row > .col-md-4,
    .row > .col-md-6 {
        margin-bottom: 8px !important;
    }

    /* Date inputs in filter rows */
    input[type="date"].form-control {
        width: 100% !important;
    }
}

/* ── 18. SALARY / LEDGER DETAIL PAGES ──────────────────── */
@media (max-width: 576px) {
    .col-sm-6 > table,
    .col-sm-4 > table {
        font-size: 11px !important;
        width: 100% !important;
    }
}

/* ── 19. IMAGE OVERFLOW FIX ─────────────────────────────── */
@media (max-width: 768px) {
    img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ── 20. MISC UTILITY ───────────────────────────────────── */
@media (max-width: 576px) {
    /* Prevent horizontal scroll from inline styles */
    [style*="width:"] {
        max-width: 100% !important;
    }

    /* Number inputs */
    input[type="number"] {
        -moz-appearance: textfield;
    }

    /* POS pages */
    #cart-container,
    #product-list {
        width: 100% !important;
        overflow-x: auto !important;
    }
}

/* ── 21. SB-ADMIN-2 SIDEBAR TOGGLED STATE ───────────────── */
@media (max-width: 768px) {
    body.sidebar-toggled .sticky-footer {
        margin-left: 0 !important;
    }

    /* When sidebar is NOT toggled on desktop - keep correct margin */
    body:not(.sidebar-toggled) #content-wrapper {
        margin-left: 0;
    }
}

/* ── 22. CHART CONTAINERS ───────────────────────────────── */
@media (max-width: 576px) {
    .chart-container {
        padding: 8px !important;
    }

    canvas {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ── 23. TABLE SCROLL HINT (subtle shadow indicator) ────── */
@media (max-width: 991px) {
    .container-fluid table::-webkit-scrollbar,
    #table-container::-webkit-scrollbar,
    #table-container-wrapper::-webkit-scrollbar {
        height: 5px;
    }

    .container-fluid table::-webkit-scrollbar-track,
    #table-container::-webkit-scrollbar-track,
    #table-container-wrapper::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }

    .container-fluid table::-webkit-scrollbar-thumb,
    #table-container::-webkit-scrollbar-thumb,
    #table-container-wrapper::-webkit-scrollbar-thumb {
        background: #0A4657;
        border-radius: 4px;
    }
}

/* ── 24. POS / ADD ITEM PAGES ───────────────────────────── */
@media (max-width: 768px) {
    #pos-layout,
    .pos-wrapper {
        flex-direction: column !important;
    }

    #product-panel,
    #cart-panel {
        width: 100% !important;
        margin-bottom: 10px;
    }

    /* Input groups in POS */
    .input-group {
        width: 100% !important;
    }

    .input-group .form-control,
    .input-group .btn {
        font-size: 13px !important;
    }
}

/* ── 25. ALERT / MESSAGE BOXES ──────────────────────────── */
@media (max-width: 576px) {
    .alert {
        font-size: 13px !important;
        padding: 10px !important;
    }
}

/* ============================================================
   PATCH 2 — Sidebar scroll + fixed topbar improvements
   ============================================================ */

/* ── Sidebar: guaranteed scroll on ALL mobile browsers ── */
@media (max-width: 768px) {
    ul.sidebar {
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        /* Enough bottom padding so last nav-item + its open submenu clears the screen */
        padding-bottom: 100px !important;
        /* Use dynamic viewport height where supported (avoids browser chrome clipping) */
        height: 100svh !important;
    }

    /* Prevent the collapse panel itself from clipping when it opens */
    ul.sidebar .collapse.show,
    ul.sidebar .collapsing {
        overflow: visible !important;
    }

    /* Give every submenu enough tap area on mobile */
    ul.sidebar .collapse-inner a.collapse-item {
        padding: 10px 16px !important;
        display: block !important;
        line-height: 1.5 !important;
        font-size: 13px !important;
        border-radius: 4px !important;
    }
}

/* ── Standard topbar: keep it sticky on ALL pages ── */
@media (max-width: 768px) {
    nav.navbar.topbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 1020 !important;
        width: 100% !important;
    }

    /* Prevent topbar content from overflowing on very small screens */
    nav.navbar.topbar .navbar-nav {
        flex-wrap: nowrap !important;
        overflow: hidden !important;
    }
}

/* ── page-top-header: extra safety for standalone pages ── */
@media (max-width: 768px) {
    .page-top-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1030 !important;
    }

    /* Compact the large h3 title inside the fixed header */
    .page-top-header h3 {
        font-size: 14px !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        padding: 6px 0 !important;
    }

    /* The spacer div that compensates for fixed header height */
    .page-body-offset {
        height: 70px !important;
        display: block !important;
    }
}