/* responsive-fix.css — Hayak Platform Global Responsive Overrides */

/* 1. Global Box-Sizing and Overflow Control */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

img, video, iframe, svg, canvas {
    max-width: 100%;
    height: auto;
}

/* 2. Responsive Touch Targets */
button, 
.btn, 
a.btn, 
.btn-hayak-solid,
.btn-hayak-outline,
.btn-hero-solid,
.btn-hero-outline,
.btn-search-round,
.btn-host-solid,
.btn-corporate,
.btn-add-service-red,
.btn-control-filter,
.btn-control-export,
.pill-btn,
.browse-tab-btn,
.client-account-nav__link {
    min-height: 44px;
    touch-action: manipulation;
}

.form-control,
.form-select,
select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="date"] {
    min-height: 44px;
    font-size: 14px;
}

/* 3. Universal Table Horizontal Scroll Container */
.table-responsive,
.hayak-table-responsive,
.table-scroll-wrapper {
    width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
}

/* Auto horizontal scroll containers on mobile for all platform tables */
@media (max-width: 991.98px) {
    .cat-table,
    .category-table,
    .emp-table,
    .support-table,
    .properties-table-v2,
    .finance-table,
    .reviews-custom-table,
    .reviews-table,
    .promo-table,
    .verification-table,
    .admin-mgmt-table,
    .fs-tbl,
    .receipt-table,
    .invoice-table {
        display: block;
        width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* Force table width behavior inside scroll wrappers */
.table-responsive > table,
.table-responsive > .table,
.hayak-table-responsive > table,
.table-scroll-wrapper > table {
    margin-bottom: 0;
    white-space: nowrap;
}

/* 4. Dashboard Header & Search Bar Responsiveness */
.provider-header-main .search-bar,
.search-bar {
    width: 100% !important;
    max-width: 450px;
}

@media (max-width: 991.98px) {
    .provider-header-main,
    header.header {
        padding: 12px 16px !important;
        height: auto !important;
        flex-wrap: wrap;
        gap: 10px;
    }

    .provider-header-main .search-bar,
    .search-bar {
        max-width: 100% !important;
        order: 3;
        width: 100% !important;
    }

    .header-left,
    .header-right-toggle {
        gap: 10px;
    }
}

/* 5. Mobile Off-Canvas Sidebar Layout */
@media (max-width: 991.98px) {
    .dashboard-container {
        flex-direction: column;
        min-height: 100vh;
    }

    .sidebar {
        position: fixed !important;
        top: 0;
        bottom: 0;
        z-index: 1050;
        width: 280px !important;
        height: 100vh !important;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
        transition: transform 0.3s ease-in-out !important;
    }

    /* RTL Direction Mobile Slide */
    [dir="rtl"] .sidebar {
        right: 0 !important;
        left: auto !important;
        transform: translateX(100%);
    }

    [dir="rtl"] html[data-sidebar-collapsed="true"] .sidebar {
        transform: translateX(100%) !important;
    }

    [dir="rtl"] html:not([data-sidebar-collapsed="true"]) .sidebar {
        transform: translateX(0) !important;
    }

    /* LTR Direction Mobile Slide */
    [dir="ltr"] .sidebar {
        left: 0 !important;
        right: auto !important;
        transform: translateX(-100%);
    }

    [dir="ltr"] html[data-sidebar-collapsed="true"] .sidebar {
        transform: translateX(-100%) !important;
    }

    [dir="ltr"] html:not([data-sidebar-collapsed="true"]) .sidebar {
        transform: translateX(0) !important;
    }

    /* Show all sidebar labels when expanded on mobile */
    html:not([data-sidebar-collapsed="true"]) .sidebar .sidebar-brand-name,
    html:not([data-sidebar-collapsed="true"]) .sidebar .sidebar-menu li a span,
    html:not([data-sidebar-collapsed="true"]) .sidebar .menu-label,
    html:not([data-sidebar-collapsed="true"]) .sidebar .night-mode-label span,
    html:not([data-sidebar-collapsed="true"]) .sidebar .logout-btn span,
    html:not([data-sidebar-collapsed="true"]) .sidebar .sidebar-chevron {
        display: inline-block !important;
    }

    .main-content {
        width: 100% !important;
        margin: 0 !important;
    }

    .content-area {
        padding: 16px !important;
    }
}

/* 6. Search Overlay Card (Public & Browse) */
@media (max-width: 767.98px) {
    .search-outer-container,
    .search-container {
        width: 100% !important;
        padding: 0 12px !important;
        margin-top: -30px !important;
    }

    .search-card {
        flex-direction: column !important;
        border-radius: 16px !important;
        padding: 16px !important;
        gap: 12px !important;
    }

    .search-col {
        width: 100% !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: 1px solid #f1f5f9 !important;
        padding: 8px 0 !important;
    }

    .search-col:last-of-type {
        border-bottom: none !important;
    }

    .btn-search-round {
        width: 100% !important;
        border-radius: 10px !important;
        height: 48px !important;
    }

    .filter-pills-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start !important;
        padding: 4px 12px 12px !important;
        gap: 8px !important;
        scrollbar-width: none;
    }

    .filter-pills-container::-webkit-scrollbar {
        display: none;
    }

    .pill-btn {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
}

/* 7. Grid Responsiveness (KPIs, Cards, Form Columns) */
@media (max-width: 991.98px) {
    .kpi-cards-row-7 {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .kpi-grid-4,
    .bookings-analysis-summary,
    .security-summary {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .info-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

@media (max-width: 575.98px) {
    .kpi-cards-row-7 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .kpi-grid-4,
    .bookings-analysis-summary,
    .security-summary {
        grid-template-columns: 1fr !important;
    }

    .hero-title {
        font-size: 1.85rem !important;
        line-height: 1.3 !important;
    }

    .hero-emblem {
        font-size: 1.5rem !important;
    }

    .hero-btns {
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 16px;
    }

    .btn-hero-solid,
    .btn-hero-outline {
        width: 100% !important;
        text-align: center;
    }

    .btn-save {
        width: 100% !important;
    }
}

/* 8. Client Account Horizontal Navigation */
.client-account-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 8px !important;
    gap: 8px !important;
    scrollbar-width: none;
}

.client-account-nav::-webkit-scrollbar {
    display: none;
}

.client-account-nav__link {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* 9. Property & Experience Detail Page Responsiveness */
@media (max-width: 767.98px) {
    .property-header-section {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .property-price-col {
        text-align: start !important;
    }

    .booking-card {
        position: static !important;
        width: 100% !important;
        margin-top: 24px !important;
    }

    .custom-tabs {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        padding-bottom: 8px !important;
        scrollbar-width: none;
    }

    .custom-tabs::-webkit-scrollbar {
        display: none;
    }
}

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