/*
 * Mobile Responsive Fixes
 */

/* Always hidden on desktop — shown only inside the media query */
#mws-mobile-nav-panel,
#mws-mobile-nav-overlay,
#mws-mobile-nav-btn {
    display: none;
}

@media only screen and (max-width: 768px) {

    /* ── Prevent horizontal page overflow ── */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
    }

    /* ── Layout: hide desktop sidebar, full-width content ── */
    #mws-sidebar,
    #mws-sidebar-bg,
    #mws-sidebar-stitch,
    #mws-nav-collapse {
        display: none !important;
    }
    #mws-wrapper,
    #mws-container {
        margin-left: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }
    .container,
    #mws-container .container {
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
        box-sizing: border-box !important;
    }

    /* ── Mobile hamburger button — top-left of header ── */
    #mws-mobile-nav-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 8px;
        left: 8px;
        z-index: 9999;
        background: #2c3e50;
        color: #fff;
        border: none;
        border-radius: 6px;
        width: 42px;
        height: 42px;
        font-size: 20px;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    }

    /* ── Slide-in nav panel ── */
    #mws-mobile-nav-overlay {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: 8000;
        background: rgba(0,0,0,0.6);
        -webkit-tap-highlight-color: transparent;
    }
    #mws-mobile-nav-overlay.open { display: block; }

    #mws-mobile-nav-panel {
        display: none;
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: 260px;
        z-index: 9000;
        background-color: #1e2a35;
        background-image: url(../images/core/mws-dark-bg.png);
        background-blend-mode: multiply;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: 4px 0 20px rgba(0,0,0,0.6);
    }
    #mws-mobile-nav-panel.open { display: block; }
    #mws-mobile-nav-panel .mobile-nav-close {
        color: #fff;
        font-size: 16px;
        padding: 14px 18px;
        display: block;
        background: rgba(0,0,0,0.3);
        border-bottom: 1px solid rgba(255,255,255,0.12);
        cursor: pointer;
        text-decoration: none;
        font-weight: bold;
    }
    #mws-mobile-nav-panel ul { margin: 0; padding: 0; list-style: none; }
    #mws-mobile-nav-panel ul li { background: transparent; }
    #mws-mobile-nav-panel ul li a {
        display: block;
        padding: 13px 18px;
        color: #ffffff !important;
        text-decoration: none !important;
        font-size: 15px;
        border-bottom: 1px solid rgba(255,255,255,0.07);
        background: transparent;
    }
    #mws-mobile-nav-panel ul li a:active,
    #mws-mobile-nav-panel ul li a:hover { background: rgba(255,255,255,0.1) !important; }

    /* ── Header ── */
    #mws-header {
        padding: 0 8px 0 58px !important;
    }
    #mws-logo-container {
        width: 110px !important;
        height: 44px !important;
    }
    #mws-user-functions { display: none !important; }

    /* ── Profile bar ── */
    #profile-bar,
    .profile-bar {
        padding: 6px 8px !important;
        font-size: 12px !important;
    }

    /* ── Stat widgets: 2 per row ── */
    .mws-stat-container {
        display: flex !important;
        flex-wrap: wrap !important;
        text-align: left !important;
        width: 100% !important;
        box-sizing: border-box;
        margin-bottom: 8px !important;
    }
    /* kill the clear:both divs inside the flex container */
    .mws-stat-container > div[style*="clear"] { display: none !important; }
    .mws-stat {
        width: calc(50% - 6px) !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 56px !important;
        margin: 3px !important;
        display: flex !important;
        align-items: center;
        box-sizing: border-box;
        flex-shrink: 0;
    }
    .mws-stat .mws-stat-icon {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        background-size: 34px 34px !important;
        float: none !important;
        flex-shrink: 0;
    }
    .mws-stat .mws-stat-content {
        padding: 4px 6px !important;
        min-width: 0;
        overflow: hidden;
    }
    .mws-stat .mws-stat-title {
        font-size: 10px !important;
        white-space: normal !important;
        line-height: 13px !important;
        display: block;
    }
    .mws-stat .mws-stat-value {
        font-size: 20px !important;
        line-height: 28px !important;
        display: block;
    }

    /* ── Panels ── */
    .mws-panel,
    .mws-panel.grid_8 {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        float: none !important;
        box-sizing: border-box;
    }
    .mws-panel-header {
        padding: 8px 10px !important;
        font-size: 13px !important;
    }
    .mws-panel-header-tools { display: none; }

    /* ── Tables: scrollable — only DataTables and mws-table, NOT FullCalendar ── */
    .dataTables_wrapper {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    table.dataTable,
    table.mws-table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        width: 100% !important;
        max-width: 100% !important;
    }
    table.dataTable thead,
    table.dataTable tbody,
    table.dataTable tfoot,
    table.mws-table thead,
    table.mws-table tbody,
    table.mws-table tfoot {
        display: table !important;
        width: 100%;
    }
    table.dataTable th,
    table.dataTable td,
    table.mws-table th,
    table.mws-table td {
        padding: 5px 7px !important;
        white-space: nowrap;
        font-size: 12px !important;
    }

    /* FullCalendar: never touch its tables */
    .fc table,
    .fc thead,
    .fc tbody,
    .fc td,
    .fc th {
        display: revert !important;
        overflow: visible !important;
    }

    /* ── DataTable controls ── */
    .dataTables_length,
    .dataTables_filter,
    .dataTables_info,
    .dataTables_paginate {
        display: block !important;
        width: 100% !important;
        float: none !important;
        text-align: left !important;
        margin: 0 0 6px 0 !important;
        box-sizing: border-box;
    }
    .dataTables_filter input[type="search"] {
        width: 60% !important;
        box-sizing: border-box;
    }
    .dataTables_length select {
        width: auto !important;
    }
    .paginate_button {
        padding: 3px 7px !important;
        font-size: 12px !important;
        display: inline-block !important;
    }

    /* ── Buttons in tables ── */
    .mws-table td .btn,
    table.dataTable td .btn {
        padding: 3px 6px !important;
        font-size: 11px !important;
        margin-bottom: 2px !important;
    }
    /* Dropdown actions align right on small screens */
    .dropdown-content {
        right: 0 !important;
        left: auto !important;
    }

    /* ── Forms ── */
    .mws-form-label {
        width: 100% !important;
        float: none !important;
        margin-bottom: 2px !important;
    }
    .mws-form-item {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
    }
    input.large, select.large, textarea.large,
    .mws-form-item input, .mws-form-item select, .mws-form-item textarea {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* ── action bars ── */
    .call1action, .call2action {
        padding: 6px 8px !important;
    }
    .call1action input, .call1action select,
    .call2action input, .call2action select {
        width: 100% !important;
        margin-bottom: 6px !important;
        box-sizing: border-box;
        display: block !important;
    }

    /* ── Invoice filter card ── */
    .inv-filter-card {
        padding: 8px !important;
    }
    .inv-filter-card .mws-form-row {
        flex-wrap: wrap !important;
    }
    .inv-filter-card input,
    .inv-filter-card select {
        width: 100% !important;
        margin-bottom: 6px !important;
        box-sizing: border-box;
    }

    /* ── FullCalendar ── */
    .fc-toolbar {
        display: block !important;
    }
    .fc-toolbar .fc-left,
    .fc-toolbar .fc-center,
    .fc-toolbar .fc-right {
        display: block !important;
        float: none !important;
        text-align: center !important;
        margin-bottom: 6px !important;
    }
    .fc-toolbar h2 { font-size: 15px !important; }
    .fc-button { padding: 4px 8px !important; font-size: 12px !important; }
    #scheduler-container, .fc {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .fc-view-container { min-width: 500px; }

    /* ── Select2 ── */
    .select2-container { width: 100% !important; }

    /* ── Summary/totals rows ── */
    .mws-summary { display: block !important; }
    .mws-summary li {
        width: 48% !important;
        display: inline-block !important;
        vertical-align: top;
        box-sizing: border-box;
    }

    /* ── Tabs ── */
    .mws-tabs li { font-size: 12px !important; }
    .mws-tabs li a { padding: 6px 10px !important; }

    /* ── Grid cols ── */
    .grid_4, .grid_6, .grid_8, .grid_12 {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
    }
}