/* ==========================================================================
   TourMatrix Bridge — Responsive Overlay
   Phase 3, Option G: Mobile-Responsive UI

   Breakpoints (Bootstrap 4):
   - xs: < 576px   (phones)
   - sm: < 768px   (phones landscape)
   - md: < 992px   (tablets)
   - lg: >= 992px  (desktop — current baseline)
   ========================================================================== */

/* ── Remove mobile blocking overlay ────────────────────────────────────── */
.hide-smaller-screens {
    display: none !important;
}

/* ── Navbar / Header ──────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .navbar {
        padding: 0.5rem 1rem;
        height: auto !important;
        min-height: 50px;
    }

    .navbar .navbar-brand img {
        max-height: 35px;
    }

    /* Mobile hamburger button */
    .btn-hamburger-mobile {
        display: block !important;
        cursor: pointer;
        padding: 8px;
        z-index: 1060;
    }

    .btn-hamburger-mobile span {
        display: block;
        width: 22px;
        height: 2px;
        background: #495057;
        margin: 5px 0;
        transition: all 0.3s ease;
        transform-origin: center;
    }

    /* Hamburger → X animation when active */
    .btn-hamburger-mobile.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .btn-hamburger-mobile.active span:nth-child(2) {
        opacity: 0;
    }

    .btn-hamburger-mobile.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }
}

@media (min-width: 992px) {
    .btn-hamburger-mobile {
        display: none !important;
    }
}

/* ── Off-Canvas Navigation (replaces sidebar rules) ────────────────────── */
@media (max-width: 991.98px) {
    /* Convert horizontal nav bar into fixed off-canvas panel */
    #nav_second_row {
        position: fixed !important;
        left: -300px;
        top: 0;
        width: 280px !important;
        height: 100vh !important;
        z-index: 1050;
        transition: left 0.3s ease;
        background: #1C293C;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0 !important;
        margin: 0 !important;
    }

    #nav_second_row.mobile-open {
        left: 0 !important;
    }

    /* Stack menu items vertically */
    #nav_second_row .main_menu {
        display: flex;
        flex-direction: column !important;
        padding: 60px 0 20px 0 !important;
        margin: 0 !important;
        width: 100%;
        background: #1C293C;
        border-top: none;
        box-shadow: none;
    }

    /* Menu items — full width, touch-friendly */
    #nav_second_row .menu_item_main {
        width: 100%;
        position: relative;
    }

    #nav_second_row .menu_item {
        width: 100%;
        padding: 14px 16px 14px 16px !important;
        min-height: 48px;
        font-size: 14px;
        white-space: normal;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        box-sizing: border-box;
    }

    /* Submenus — override absolute positioning to static accordion */
    #nav_second_row .menu {
        position: static !important;
        display: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
        transition: none !important;
        box-shadow: none !important;
        background: rgba(0, 0, 0, 0.15) !important;
        width: 100% !important;
        min-width: 0 !important;
        border-radius: 0 !important;
        padding: 0 !important;
    }

    /* Show submenu when parent is expanded (accordion) */
    #nav_second_row .menu_item_main.expanded > .menu_item > .menu {
        display: flex !important;
        flex-direction: column;
    }

    /* Override hover-show rule — only click-expand on mobile */
    #nav_second_row .menu_item_main[data-has-submenu="true"] > .menu_item:hover > .menu {
        display: none !important;
    }

    #nav_second_row .menu_item_main[data-has-submenu="true"].expanded > .menu_item:hover > .menu {
        display: flex !important;
        flex-direction: column;
    }

    /* Second-level submenu items */
    #nav_second_row .menu .menu_item {
        padding-left: 40px !important;
        font-size: 13px;
        min-height: 44px;
    }

    /* Third-level submenu */
    #nav_second_row .menu .menu_item .menu {
        position: static !important;
        background: rgba(0, 0, 0, 0.1) !important;
    }

    #nav_second_row .menu .menu_item:hover > .menu {
        display: none !important;
    }

    #nav_second_row .menu .menu_item_main.expanded > .menu_item > .menu,
    #nav_second_row .menu .menu_item.expanded > .menu {
        display: flex !important;
        flex-direction: column;
    }

    #nav_second_row .menu .menu .menu_item {
        padding-left: 55px !important;
    }

    /* Arrow rotation for mobile */
    #nav_second_row .menu_arrow {
        transform: rotate(90deg);
        transition: transform 0.3s ease;
        flex-shrink: 0;
    }

    #nav_second_row .menu_arrow.expanded {
        transform: rotate(270deg);
    }

    /* Disable desktop blur effect on mobile */
    #nav_second_row:hover + .content-contr {
        filter: none !important;
        pointer-events: auto !important;
    }

    /* Overlay behind sidebar */
    .sidebar-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1040;
    }

    .sidebar-backdrop.active {
        display: block;
    }

    /* Content area takes full width */
    .content-contr {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* Prevent background scroll when sidebar is open */
    body.mobile-sidebar-open {
        overflow: hidden !important;
    }
}

/* ── Content & Wrapper ────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    /* Prevent page-level horizontal overflow */
    html, body {
        overflow-x: hidden;
    }

    .content-contr {
        overflow-x: hidden;
        max-width: 100%;
        box-sizing: border-box;
    }

    .data-content {
        overflow-x: hidden;
        max-width: 100%;
    }
}

@media (max-width: 767.98px) {
    .wrapper {
        padding: 10px !important;
    }

    .data-content {
        padding: 0 !important;
    }

    .content-contr {
        padding: 0 !important;
    }
}

/* ── Tables ────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    /* DataTables wrapper — scroll inside, not the page */
    .dataTables_wrapper {
        width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Keep table as table (not display:block) so DataTables layout works */
    .dataTables_wrapper table {
        width: 100% !important;
        min-width: 600px;
    }

    /* Non-DataTable tables — wrap in scrollable container */
    table:not(.dataTable) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    table:not(.dataTable) thead {
        display: table;
        width: 100%;
    }

    table:not(.dataTable) tbody {
        display: table;
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    /* Reduce table cell padding */
    .table td, .table th {
        padding: 6px 8px;
        font-size: 12px;
    }
}

/* ── Cards & Grid ─────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    /* Stack multi-column layouts */
    .search-card-list {
        flex-direction: column !important;
    }

    /* Booking/enquiry list header rows */
    #mainHeding-user-list,
    .room-booking-header {
        flex-direction: column !important;
    }

    #mainHeding-user-list div {
        flex-basis: auto !important;
        width: 100% !important;
        height: auto !important;
    }

    .room-booking-header-left,
    .room-booking-header-right {
        width: 100% !important;
    }

    .room-booking-header-right {
        flex-wrap: wrap !important;
        gap: 6px;
    }

    /* Hotels client wrapper */
    .hotels-client-wrapper {
        flex-direction: column !important;
    }

    .hotels-client-single {
        width: 100% !important;
    }

    /* Flex containers */
    .flex-container {
        flex-wrap: wrap !important;
    }
}

/* ── Forms ─────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    /* Prevent iOS zoom on input focus */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Full width inputs */
    .form-control {
        width: 100% !important;
    }

    /* Stack form groups */
    .form-group .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ── Dashboard (Phase 2 KPIs) ─────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .dashboard-stats {
        flex-direction: column !important;
    }

    .dashboard-stats > div,
    .stat-card {
        width: 100% !important;
        margin-bottom: 10px;
    }

    /* Chart container */
    canvas {
        max-width: 100% !important;
        height: auto !important;
    }
}

@media (max-width: 575.98px) {
    .dashboard-stats .card {
        padding: 12px !important;
    }
}

/* ── Typography ───────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    h1, .h1 { font-size: 1.5rem; }
    h2, .h2 { font-size: 1.3rem; }
    h3, .h3 { font-size: 1.15rem; }
    h4, .h4 { font-size: 1rem; }

    /* Reduce cut-text width on mobile */
    .cut-text {
        width: 150px !important;
    }
}

/* ── Buttons & Touch Targets ──────────────────────────────────────────── */
@media (max-width: 767.98px) {
    /* Minimum 44px touch targets */
    .btn, button,
    a.btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .btn-sm {
        min-height: 36px;
        padding: 6px 12px !important;
    }
}

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

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

/* ── Tariff Pages ─────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .tariffBorder3 {
        padding: 10px !important;
    }

    .tablinks2,
    .selectedButtonmotherdaterange {
        font-size: 11px !important;
        padding: 6px 10px !important;
    }

    .matherdaterangecard {
        padding: 10px !important;
    }
}

/* ── Quote/Booking Action Buttons ─────────────────────────────────────── */
@media (max-width: 767.98px) {
    .popup-room-rate-table td {
        display: block;
        width: 100% !important;
    }

    /* Stack action button rows */
    .action-buttons,
    .quote-actions {
        flex-direction: column !important;
        gap: 8px;
    }
}

/* ── System Alert Sidebar ─────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .system-alert-sidebar {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ── Print (no changes for mobile) ────────────────────────────────────── */
@media print {
    #nav_second_row,
    .btn-hamburger-mobile,
    .sidebar-backdrop,
    .hide-smaller-screens {
        display: none !important;
    }
}