/* ========================================
   MOBILE PHONE FIXES - Global Override
   ======================================== */

/* Owner Property Details Page - Fix hidden buttons on mobile portrait */
@media (max-width: 767px) {
    /* Convert 4-column button grid to single column */
    div[style*="grid-template-columns: repeat(4, 1fr)"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        height: auto !important;
    }
    
    /* Make all buttons visible and full width */
    div[style*="grid-template-columns: repeat(4, 1fr)"] a {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        height: auto !important;
        min-height: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 12px 20px !important;
        font-size: 14px !important;
    }
    
    /* Fix information sections row grid */
    div[style*="grid-template-columns: repeat(auto-fit, minmax(400px"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        width: 100% !important;
    }
}

/* Property Detail Page - Fix 2-column grids on mobile portrait */
@media (max-width: 767px) {
    /* Property detail page container */
    .property-detail-container {
        padding: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Header buttons - stack vertically */
    .property-detail-container .header-top {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }
    
    .property-detail-container .header-top a {
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
        justify-content: center !important;
    }
    
    /* Property meta - stack items */
    .property-detail-container .property-meta {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    /* Location details section - change 2-column grid to single column */
    .property-detail-container div[style*="grid-template-columns: 1fr 1fr"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    /* Online status grid - single column */
    .property-detail-container div[style*="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    /* Reduce padding on mobile */
    .property-detail-container > div[style*="padding: 30px"] {
        padding: 15px !important;
    }
    
    /* Property title smaller on mobile */
    .property-detail-container .property-title {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }
}

/* ========================================
   GLOBAL MOBILE FIXES - All Pages
   ======================================== */

/* Fix ALL grid layouts on mobile portrait */
@media (max-width: 767px) {
    /* Convert all multi-column grids to single column */
    div[style*="grid-template-columns: 1fr 1fr"],
    div[style*="grid-template-columns: 1fr 1fr 1fr"],
    div[style*="grid-template-columns: 2fr 1fr"],
    div[style*="grid-template-columns: repeat(auto-fit, minmax(200px"],
    div[style*="grid-template-columns: repeat(auto-fit, minmax(220px"],
    div[style*="grid-template-columns: repeat(auto-fit, minmax(250px"],
    div[style*="grid-template-columns: repeat(auto-fit, minmax(300px"],
    div[style*="grid-template-columns: repeat(auto-fit, minmax(500px"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        width: 100% !important;
    }
    
    /* Section grids - single column */
    .section-grid,
    .quick-stats,
    .detailed-stats,
    .kpi-container,
    .values-grid,
    .feature-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        width: 100% !important;
    }
    
    /* Ensure all cards/containers fit mobile width */
    .stat-card,
    .section-card,
    .stat-detail-card,
    .kpi-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
    }
    
    /* Contact page grid - single column */
    .ct-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    /* Reduce large padding on mobile */
    div[style*="padding: 30px"],
    div[style*="padding: 40px"] {
        padding: 15px !important;
    }
    
    /* Form grids - stack fields */
    form div[style*="grid-template-columns"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    /* Home page hero section */
    .home-container .hero {
        padding: 20px 15px !important;
    }
    
    .home-container .hero h1 {
        font-size: 24px !important;
    }
    
    .home-container .cta-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .home-container .cta-buttons a {
        width: 100% !important;
        text-align: center !important;
    }
    
    /* Analytics section */
    .analytics-section {
        padding: 15px !important;
    }
    
    /* Reports page detailed section */
    div[style*="minmax(500px, 1fr)"] {
        min-width: 0 !important;
    }
}

/* Force mobile viewport behavior */
@viewport {
    width: device-width;
    initial-scale: 1.0;
    maximum-scale: 1.0;
    user-scalable: no;
}

/* Global mobile fixes - highest specificity */
html, body {
    overflow-x: hidden !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    position: relative !important;
}

/* Desktop sidebar fixes - prevent overlap */
@media (min-width: 768px) {
    html body .ps-layout .ps-sidebar,
    body > div.ps-layout > aside.ps-sidebar {
        position: relative !important;
        left: 0 !important;
        width: 280px !important;
        height: auto !important;
        z-index: 1 !important;
        flex-shrink: 0 !important;
        max-width: 280px !important;
    }
    
    html body .ps-layout .ps-main,
    body > div.ps-layout > main.ps-main {
        margin-left: 0 !important;
        padding: 20px !important;
        flex: 1 !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        max-width: none !important;
    }
    
    html body .ps-layout,
    body > div.ps-layout {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        position: relative !important;
    }
    
    /* Hide toggle button on desktop */
    html body .ps-sidebar-toggle,
    body > div.ps-layout > button.ps-sidebar-toggle {
        display: none !important;
    }
}

/* Fix all layout containers */
.ps-layout,
.ps-page-wrapper,
.td-page,
.ps-main,
body > div,
body > section,
body > main,
body > article,
.container,
.container-fluid {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Fix all grids and flex containers */
.ps-grid,
.grid,
.flex,
.row {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
}

/* Fix all cards and panels */
.ps-card,
.card,
.panel,
.space-card,
.property-card {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Fix all tables */
table,
.td-table,
.ps-table {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
}

/* Fix all images except logo */
img:not(.logo):not([alt*="logo"]):not([src*="logo"]) {
    max-width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
}

/* Logo specific fixes - apply to all devices */
.logo,
img[alt*="logo"],
img[src*="logo"],
.navbar-brand img,
.header-logo img,
.nav-logo img,
.ps-logo img {
    max-width: 120px !important;
    height: auto !important;
    width: auto !important;
    max-height: 40px !important;
}

/* Additional logo size constraints for navbars */
.navbar .logo,
.navbar img[alt*="logo"],
.navbar img[src*="logo"],
header .logo,
header img[alt*="logo"],
header img[src*="logo"] {
    max-width: 100px !important;
    max-height: 35px !important;
}

/* Fix all forms */
form,
input,
select,
textarea {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Unit Card Styles - Apply to all mobile devices (portrait and landscape) */
@media (max-width: 1024px) {
    .unit-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 15px !important;
        overflow: hidden !important;
    }
    
    .unit-image,
    .unit-image-placeholder {
        width: 100% !important;
        height: 180px !important;
        overflow: hidden !important;
        position: relative !important;
    }
    
    .unit-image img,
    .unit-image-placeholder img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        overflow: hidden !important;
    }
    
    .unit-image-placeholder svg {
        width: 48px !important;
        height: 48px !important;
    }
}

/* Landscape orientation specific fix - prevent top cutting */
@media (orientation: landscape) and (max-width: 1024px) {
    .unit-image,
    .unit-image-placeholder {
        height: 140px !important;
        min-height: 140px !important;
        max-height: 140px !important;
    }
    
    .unit-image img,
    .unit-image-placeholder img {
        height: 140px !important;
        object-fit: cover !important;
        object-position: center !important;
    }
}

/* Mobile specific layout */
@media (max-width: 767px) {
    /* Hide horizontal scroll completely - but allow body to scroll */
    html, body {
        overflow-x: hidden !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }
    
    /* Allow vertical scroll on body */
    body {
        overflow-y: auto !important;
        min-height: 100vh !important;
        height: auto !important;
    }
    
    /* Fix all containers */
    .ps-layout,
    .ps-page-wrapper,
    .td-page,
    .ps-main,
    body > div,
    body > section,
    body > main,
    .container,
    .container-fluid {
        overflow-x: hidden !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }
    
    /* Sidebar mobile fixes */
    .ps-sidebar {
        position: fixed !important;
        left: -100% !important;
        width: 250px !important;
        height: 100vh !important;
        z-index: 1000 !important;
        transition: left 0.3s ease !important;
        top: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important; /* Enable vertical scroll in sidebar */
    }

    .ps-sidebar.ps-sidebar-open {
        left: 0 !important;
        /* Ensure sidebar content is scrollable when open */
        max-height: 100vh !important;
        overflow-y: auto !important;
    }

    /* Main content mobile fixes */
    .ps-main {
        margin-left: 0 !important;
        padding: 60px 10px 20px !important;
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* Add overlay when sidebar is open */
    .ps-sidebar-overlay {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0,0,0,0.2) !important;
        z-index: 999 !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
    }

    .ps-sidebar-overlay.show {
        display: block !important;
        opacity: 1 !important;
    }
    
    /* Grid mobile fixes */
    .ps-grid,
    .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Cards mobile fixes */
    .ps-card,
    .card,
    .panel,
    .space-card,
    .property-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 10px !important;
        overflow-x: hidden !important;
    }
    
    /* Property Owner Mini Dashboard - Fix hidden sections on mobile portrait */
    .section-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        width: 100% !important;
    }
    
    .section-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 15px !important;
        margin-bottom: 10px !important;
    }
    
    .section-title {
        font-size: 16px !important;
        word-wrap: break-word !important;
    }
    
    .section-content {
        font-size: 14px !important;
    }
    
    /* Owner Dashboard Units Tables - Mobile fixes */
    #residential-units,
    #commercial-units,
    #event-units,
    #short-stay-units {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* Make table column headers black text on mobile */
    #residential-units table thead th,
    #commercial-units table thead th,
    #event-units table thead th,
    #short-stay-units table thead th,
    table thead th {
        color: #000000 !important;
    }
    
    /* Preserve table structure but allow horizontal scroll */
    #residential-units > div:first-child,
    #commercial-units > div:first-child,
    #event-units > div:first-child,
    #short-stay-units > div:first-child,
    #residential-units [data-searchable],
    #commercial-units [data-searchable],
    #event-units [data-searchable],
    #short-stay-units [data-searchable] {
        min-width: 700px !important;
    }
    
    /* Ensure column headers stay visible with sticky positioning - HIGHEST SPECIFICITY */
    html body #residential-units > div:first-child,
    html body #commercial-units > div:first-child,
    html body #event-units > div:first-child,
    html body #short-stay-units > div:first-child {
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
        background: #cccccc !important;
        background-color: #cccccc !important;
        background-image: none !important;
        color: #000000 !important;
        font-weight: 700 !important;
        padding: 15px !important;
        border-radius: 8px 8px 0 0 !important;
        border: 2px solid #999999 !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
        display: grid !important;
    }
    
    /* Ensure header text is BOLD and HIGHLY VISIBLE - LIGHT BACKGROUND BLACK TEXT */
    html body #residential-units > div:first-child > div,
    html body #commercial-units > div:first-child > div,
    html body #event-units > div:first-child > div,
    html body #short-stay-units > div:first-child > div {
        color: #000000 !important;
        background: #d0d0d0 !important;
        font-weight: 900 !important;
        font-size: 15px !important;
        text-shadow: none !important;
        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;
        -webkit-text-stroke: none !important;
        text-align: center !important;
        padding: 5px !important;
        border-radius: 4px !important;
    }
    
    /* Confirmed Deposits & Approved Payments tables - make scrollable */
    [data-collapsible] > div[data-section-body] > div[style*="display: grid"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
    
    /* Ensure 4-column grids don't squeeze on mobile */
    [data-collapsible] > div[data-section-body] > div[style*="display: grid"] > div[style*="grid-template-columns: 2fr 1fr 1fr 1fr"],
    [data-collapsible] [data-searchable][style*="grid-template-columns: 2fr 1fr 1fr 1fr"] {
        min-width: 600px !important;
    }
    
    /* Units/Houses Section Table - Make scrollable on mobile */
    #units-section table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        max-width: 100vw !important;
        white-space: nowrap !important;
    }
    
    #units-section table th,
    #units-section table td {
        padding: 8px 12px !important;
        font-size: 14px !important;
        min-width: 80px !important;
    }
    
    #units-section table th:first-child,
    #units-section table td:first-child {
        min-width: 100px !important;
    }
    
    #units-section table th:nth-child(2),
    #units-section table td:nth-child(2) {
        min-width: 150px !important;
    }
    
    /* Owner Mini Dashboard - Confirmed Deposits and Approved Payments tables */
    [data-collapsible] div[style*="display: grid; gap: 15px;"] {
        display: block !important;
        width: 100% !important;
    }
    
    [data-collapsible] div[style*="display: grid; gap: 15px;"] > div[style*="grid-template-columns: 2fr 1fr 1fr 1fr"] {
        display: none !important;
    }
    
    [data-collapsible] div[style*="display: grid; gap: 15px;"] > div[data-searchable] {
        display: block !important;
        width: 100% !important;
        margin-bottom: 15px !important;
        padding: 15px !important;
        background: white !important;
        border: 2px solid #28a745 !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }
    
    [data-collapsible] div[data-searchable] > div {
        display: block !important;
        width: 100% !important;
        margin-bottom: 10px !important;
        text-align: left !important;
    }
    
    [data-collapsible] div[data-searchable] > div:last-child {
        margin-bottom: 0 !important;
    }
    
    [data-collapsible] div[data-searchable] h3 {
        font-size: 14px !important;
        line-height: 1.4 !important;
        margin: 0 0 8px 0 !important;
    }
    
    [data-collapsible] div[data-searchable] p {
        font-size: 12px !important;
        margin: 0 0 5px 0 !important;
    }
    
    [data-collapsible] div[data-searchable] div[style*="text-align: center;"] {
        text-align: left !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 8px 0 !important;
        border-bottom: 1px solid #e8e8e8 !important;
    }
    
    [data-collapsible] div[data-searchable] div[style*="text-align: center;"]:last-child {
        border-bottom: none !important;
        justify-content: center !important;
        padding-top: 12px !important;
    }
    
    [data-collapsible] div[data-searchable] div[style*="color: #6c757d; font-size: 12px;"] {
        font-size: 11px !important;
        color: #6c757d !important;
        font-weight: 500 !important;
    }
    
    /* Owner Checklists Page - Space Type Buttons on mobile */
    .space-type-section .d-flex.flex-wrap {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }
    
    .space-type-btn {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 14px 20px !important;
        font-size: 14px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
    
    /* Filter buttons container */
    .space-type-section + div .d-flex.flex-wrap,
    div[style*="box-shadow: 0 5px 15px"] .d-flex.flex-wrap {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }
    
    /* Filter buttons */
    button.space-type-btn,
    .filter-btn {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
        text-align: center !important;
    }
    
    /* Edit Property Page - Notice Board Features text visibility */
    .ep-check {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .ep-check input[type="checkbox"] {
        flex-shrink: 0 !important;
        margin-top: 2px !important;
        width: 20px !important;
        height: 20px !important;
    }
    
    .ep-check > div {
        flex: 1 !important;
        min-width: 0 !important;
        overflow: visible !important;
    }
    
    .ep-check-label {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #374151 !important;
        display: block !important;
        margin-bottom: 4px !important;
        word-wrap: break-word !important;
    }
    
    .ep-check-help {
        font-size: 13px !important;
        color: #6b7280 !important;
        display: block !important;
        word-wrap: break-word !important;
        line-height: 1.4 !important;
    }
    
    /* Add Unit Form - Integration & Status checkbox text visibility */
    .au-check {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .au-check input[type="checkbox"] {
        flex-shrink: 0 !important;
        margin-top: 2px !important;
        width: 20px !important;
        height: 20px !important;
    }
    
    .au-check > div {
        flex: 1 !important;
        min-width: 0 !important;
        overflow: visible !important;
    }
    
    .au-check-label {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #374151 !important;
        display: block !important;
        margin-bottom: 4px !important;
        word-wrap: break-word !important;
    }
    
    .au-check-help {
        font-size: 13px !important;
        color: #6b7280 !important;
        display: block !important;
        word-wrap: break-word !important;
        line-height: 1.4 !important;
    }
    
    /* Tables mobile - Responsive wrapper for horizontal scroll */
    .table-responsive,
    .td-table-wrapper,
    .ps-table-wrapper,
    .reports-table {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        max-width: 100vw !important;
        display: block !important;
    }
    
    /* Ensure tables inside wrapper don't overflow */
    .table-responsive table,
    .td-table-wrapper table,
    .ps-table-wrapper table,
    .reports-table table {
        width: auto !important;
        min-width: 100% !important;
        max-width: none !important;
    }
    
    /* Base table styles */
    table,
    .td-table,
    .ps-table {
        font-size: 11px !important;
        width: auto !important;
        min-width: 100% !important;
        table-layout: auto !important;
    }
    
    table th,
    table td,
    .td-table th,
    .td-table td,
    .ps-table th,
    .ps-table td {
        padding: 6px 4px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 150px !important;
    }
    
    /* Allow text wrapping for description columns */
    table td:nth-child(2),
    table td.description,
    .td-table td.description,
    .ps-table td.description {
        white-space: normal !important;
        max-width: 200px !important;
    }
    
    /* Compact action buttons in tables */
    table td .btn,
    table td .ps-btn,
    table td .td-btn,
    table td button {
        width: auto !important;
        padding: 4px 8px !important;
        font-size: 10px !important;
        margin: 2px !important;
        display: inline-block !important;
    }
    
    /* Tenant dashboard header actions - fix hidden buttons on mobile */
    .td-header {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .td-header h2 {
        font-size: 1.2rem !important;
        margin-bottom: 0 !important;
    }
    
    .td-header .td-header-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
        justify-content: flex-start !important;
    }
    
    .td-header .td-header-actions .ps-btn {
        width: auto !important;
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 120px !important;
        padding: 6px 10px !important;
        font-size: 11px !important;
        margin-bottom: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* Table header improvements */
    table th,
    .td-table th,
    .ps-table th {
        font-size: 10px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        background: #f8f9fa !important;
    }
    
    /* Buttons mobile */
    button:not(#ps-btn-send):not(#ps-btn-answer):not(#ps-btn-decline):not(#ps-btn-end-call):not(.ps-call-btn):not(.ps-icon-btn):not(.ps-guest-btn),
    .btn,
    .ps-btn,
    .td-btn {
        width: 100% !important;
        margin-bottom: 8px !important;
        box-sizing: border-box !important;
    }
    
    /* Forms mobile - EXCLUDE CHAT WIDGET INPUTS */
    input:not(#ps-msg-input):not(#ps-guest-name),
    select,
    textarea {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
    }
    
    /* Results Grid Mobile */
    .results-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        padding: 10px !important;
    }
}

/* System Rights Page - Fix rights spilling out of cards on mobile */
@media (max-width: 767px) {
    /* Target the system rights grid specifically */
    body div[style*="grid-template-columns: repeat(auto-fit, minmax(350px"],
    body div[style*="grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        width: 100% !important;
    }

    /* Ensure cards fit within screen width */
    body div[style*="grid-template-columns: repeat(auto-fit, minmax(350px"] > div,
    body div[style*="grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)"] > div {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Fix list items to not overflow */
    body div[style*="grid-template-columns: repeat(auto-fit, minmax(350px"] ul,
    body div[style*="grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)"] ul {
        padding-left: 15px !important;
        margin: 5px 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    body div[style*="grid-template-columns: repeat(auto-fit, minmax(350px"] ul li,
    body div[style*="grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)"] ul li {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        padding-right: 5px !important;
    }

    /* Delegate Property Page - Fix rights list spilling */
    .rights-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .right-item {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        padding: 12px 15px !important;
    }

    /* QR Codes Page - Fix Property Details button overlap */
    body .container[style*="background: #e3f2fd"] > div[style*="margin-bottom: 40px"] {
        position: relative !important;
        padding-right: 0 !important;
    }

    body .container[style*="background: #e3f2fd"] > div[style*="margin-bottom: 40px"] > a[style*="Property Details"] {
        position: static !important;
        display: inline-block !important;
        margin-top: 15px !important;
    }

    /* QR Codes Page - Fix unit QR print button overflow */
    body .container[style*="background: #e3f2fd"] div[style*="grid-template-columns: repeat(auto-fill, minmax(350px"] {
        grid-template-columns: 1fr !important;
    }

    body .container[style*="background: #e3f2fd"] div[style*="display: flex; gap: 8px; flex-wrap: wrap"] {
        flex-direction: column !important;
        gap: 8px !important;
    }

    body .container[style*="background: #e3f2fd"] div[style*="display: flex; gap: 8px; flex-wrap: wrap"] a,
    body .container[style*="background: #e3f2fd"] div[style*="display: flex; gap: 8px; flex-wrap: wrap"] button {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* Advanced Communication Hub - Fix header button overflow */
    body div[style*="padding: 20px; width: 100%; margin: 0; background: #e3f2fd"] > div[style*="display: flex; justify-content: space-between"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }

    body div[style*="padding: 20px; width: 100%; margin: 0; background: #e3f2fd"] > div[style*="display: flex; justify-content: space-between"] > div[style*="display: flex; gap: 10px"] {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }

    body div[style*="padding: 20px; width: 100%; margin: 0; background: #e3f2fd"] > div[style*="display: flex; justify-content: space-between"] > div[style*="display: flex; gap: 10px"] button {
        width: 100% !important;
        text-align: center !important;
        padding: 12px 16px !important;
    }

    /* Import Checklists Page - Fix button overflow */
    .import-container form div[style*="display: flex; gap: 15px"] {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .import-container form div[style*="display: flex; gap: 15px"] button,
    .import-container form div[style*="display: flex; gap: 15px"] a {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* House Condition Report Form - Fix tenant present checkbox overflow */
    body .container[style*="max-width: 1200px"] div[style*="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px"] {
        grid-template-columns: 1fr !important;
    }

    body .container[style*="max-width: 1200px"] div[style*="display: flex; align-items: center; padding-top: 25px"] {
        padding-top: 10px !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    body .container[style*="max-width: 1200px"] label[style*="display: flex; align-items: center; gap: 12px; cursor: pointer; background: #f9fafb"] {
        padding: 8px 10px !important;
        flex-wrap: wrap !important;
        min-height: auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    body .container[style*="max-width: 1200px"] label[style*="display: flex; align-items: center; gap: 12px; cursor: pointer; background: #f9fafb"] input[type="checkbox"] {
        flex-shrink: 0 !important;
        width: 16px !important;
        height: 16px !important;
    }

    body .container[style*="max-width: 1200px"] label[style*="display: flex; align-items: center; gap: 12px; cursor: pointer; background: #f9fafb"] span {
        font-size: 10px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        word-break: break-all !important;
        overflow-wrap: break-word !important;
        flex: 1 !important;
        min-width: 0 !important;
        line-height: 1.2 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Tenant Dashboard - Make table column headers black for visibility on mobile */
    .td-page .td-table th,
    .td-panel .td-table th {
        color: #000 !important;
    }

    /* Properties browse pages - Fix budget input KES label overlap on mobile */
    .search-form-card .budget-input,
    .search-form-card input[id="min-budget"],
    .search-form-card input[id="max-budget"],
    .search-form-card input[id="cb-min-budget"],
    .search-form-card input[id="cb-max-budget"] {
        padding-left: 50px !important;
        font-size: 14px !important;
    }

    /* Hide placeholder text on mobile to prevent overlap with KES label */
    .search-form-card .budget-input::placeholder,
    .search-form-card input[id="min-budget"]::placeholder,
    .search-form-card input[id="max-budget"]::placeholder,
    .search-form-card input[id="cb-min-budget"]::placeholder,
    .search-form-card input[id="cb-max-budget"]::placeholder {
        color: transparent !important;
    }

    /* Target the KES currency label spans with inline style override */
    .search-form-card span[id="currency-min"],
    .search-form-card span[id="currency-max"],
    .search-form-card span[style*="position: absolute"][style*="KES"] {
        font-size: 12px !important;
        left: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: #666 !important;
    }

    /* Tenant Activity Timeline - Fix card overflow on mobile portrait */
    body div[style*="display: flex; padding: 20px; border-bottom: 1px solid #f3f4f6"] {
        flex-wrap: wrap !important;
        padding: 15px !important;
    }

    body div[style*="display: flex; padding: 20px; border-bottom: 1px solid #f3f4f6"] > div[style*="flex: 1"] {
        flex: 1 1 100% !important;
        padding-left: 0 !important;
        margin-top: 10px !important;
    }

    body div[style*="display: flex; padding: 20px; border-bottom: 1px solid #f3f4f6"] > div[style*="flex: 0 0 60px"] {
        flex: 0 0 50px !important;
    }

    body div[style*="display: flex; padding: 20px; border-bottom: 1px solid #f3f4f6"] > div[style*="flex: 0 0 80px"] {
        flex: 0 0 auto !important;
        text-align: left !important;
        margin-top: 10px !important;
    }

    body div[style*="display: flex; padding: 20px; border-bottom: 1px solid #f3f4f6"] div[style*="color: #6b7280; font-size: 14px"] {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
    }

    body div[style*="display: flex; gap: 15px; font-size: 12px; color: #9ca3af"] {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
}

/* Extra small phones */
@media (max-width: 480px) {
    .ps-grid,
    .grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }
    
    .ps-card,
    .card,
    .panel,
    .space-card,
    .property-card {
        padding: 8px !important;
    }
    
    /* Card-style tables for very small screens - converts rows to cards */
    table.card-table,
    .table-card-view table,
    .td-table.card-view,
    .ps-table.card-view {
        display: block !important;
        width: 100% !important;
    }
    
    table.card-table thead,
    .table-card-view table thead,
    .td-table.card-view thead,
    .ps-table.card-view thead {
        display: none !important;
    }
    
    table.card-table tbody,
    table.card-table tr,
    .table-card-view table tbody,
    .table-card-view table tr,
    .td-table.card-view tbody,
    .td-table.card-view tr,
    .ps-table.card-view tbody,
    .ps-table.card-view tr {
        display: block !important;
        width: 100% !important;
        margin-bottom: 10px !important;
        background: white !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        padding: 10px !important;
    }
    
    table.card-table td,
    .table-card-view table td,
    .td-table.card-view td,
    .ps-table.card-view td {
        display: flex !important;
        justify-content: space-between !important;
        padding: 8px 0 !important;
        border-bottom: 1px solid #eee !important;
        white-space: normal !important;
        max-width: none !important;
    }
    
    table.card-table td:last-child,
    .table-card-view table td:last-child,
    .td-table.card-view td:last-child,
    .ps-table.card-view td:last-child {
        border-bottom: none !important;
    }
    
    table.card-table td::before,
    .table-card-view table td::before,
    .td-table.card-view td::before,
    .ps-table.card-view td::before {
        content: attr(data-label) !important;
        font-weight: 600 !important;
        color: #667eea !important;
        margin-right: 10px !important;
        flex-shrink: 0 !important;
    }
}

/* Toggle button for mobile sidebar */
.ps-sidebar-toggle {
    display: none !important;
}

@media (max-width: 767px) {
    /* Force display with highest specificity */
    html body .ps-sidebar-toggle,
    body > div .ps-sidebar-toggle,
    * .ps-sidebar-toggle {
        display: block !important;
        position: fixed !important;
        top: 70px !important;
        left: 10px !important;
        z-index: 9999 !important;
        background: #ff6b35 !important;
        border: 2px solid white !important;
        border-radius: 5px !important;
        padding: 8px !important;
        cursor: pointer !important;
        overflow: visible !important;
        min-width: 50px !important;
        min-height: 50px !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .ps-sidebar-toggle span {
        display: block !important;
        width: 20px !important;
        height: 2px !important;
        background: white !important;
        margin: 4px 0 !important;
        transition: 0.3s !important;
    }
    
    /* Active state for toggle button - hide when sidebar is open */
    .ps-sidebar-toggle.ps-sidebar-toggle-active {
        display: none !important;
    }
    
    .ps-sidebar-toggle.ps-sidebar-toggle-active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px) !important;
    }
    
    .ps-sidebar-toggle.ps-sidebar-toggle-active span:nth-child(2) {
        opacity: 0 !important;
    }
    
    .ps-sidebar-toggle.ps-sidebar-toggle-active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px) !important;
    }
    
    /* Ensure sidebar is properly positioned */
    .ps-sidebar {
        position: fixed !important;
        left: -100% !important;
        width: 280px !important;
        height: 100vh !important;
        z-index: 1001 !important;
        transition: left 0.3s ease !important;
        top: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important; /* Enable vertical scroll */
        background: white !important;
        box-shadow: 2px 0 5px rgba(0,0,0,0.1) !important;
    }
    
    .ps-sidebar.ps-sidebar-open {
        left: 0 !important;
        /* Ensure sidebar content is scrollable when open */
        max-height: 100vh !important;
        overflow-y: auto !important;
    }
    
    /* Make nav labels visible on mobile - dark text on white sidebar background */
    .ps-sidebar a.nav-link,
    .ps-sidebar .nav-link {
        color: #333 !important;
        text-align: center !important;
        justify-content: center !important;
        align-items: center !important;
        display: flex !important;
        flex-direction: row !important;
    }
    
    .ps-sidebar a.nav-link .nav-label,
    .ps-sidebar .nav-link .nav-label {
        color: #333 !important;
        font-weight: 600 !important;
        text-align: center !important;
    }
    
    .ps-sidebar a.nav-link:hover,
    .ps-sidebar .nav-link:hover {
        background: rgba(102, 126, 234, 0.1) !important;
        color: #667eea !important;
    }
    
    /* Force all sidebar content to center align */
    .ps-sidebar > *,
    .ps-sidebar .ps-nav > *,
    .ps-sidebar .ps-nav,
    .ps-sidebar nav,
    .ps-sidebar nav > * {
        text-align: center !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    /* Force all nav items to center align */
    .ps-sidebar nav a,
    .ps-sidebar nav button,
    .ps-sidebar .nav-item,
    .ps-sidebar .nav-item a,
    .ps-sidebar .nav-item button {
        text-align: center !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    /* Override base template nav-link left alignment */
    html body .nav-link,
    html body .main-nav .nav-link {
        text-align: center !important;
        justify-content: center !important;
    }
    
    /* Add overlay when sidebar is open */
    .ps-sidebar-overlay {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0,0,0,0.2) !important;
        z-index: 1000 !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
    }

    .ps-sidebar-overlay.show {
        display: block !important;
        opacity: 1 !important;
    }
    
    /* Tenant Dashboard - Mobile fixes */
    .td-page {
        padding: 10px !important;
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    .td-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
        padding: 15px !important;
    }
    
    .td-header h2 {
        font-size: 1.5rem !important;
        margin: 0 !important;
    }
    
    .td-header-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }
    
    .td-header-actions .ps-btn {
        width: 100% !important;
        text-align: center !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .td-back {
        margin-bottom: 15px !important;
    }
    
    .td-back .ps-btn {
        width: 100% !important;
        text-align: center !important;
    }
    
    /* Tenant Dashboard Sections */
    .td-section {
        margin-bottom: 15px !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }
    
    .td-section summary {
        padding: 15px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        background: #f8f9fa !important;
        border-bottom: 2px solid #e9ecef !important;
    }
    
    .td-section summary .arrow {
        float: right !important;
        font-size: 12px !important;
    }
    
    .td-overflow {
        padding: 10px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Tenant Dashboard Tables */
    .td-table {
        width: 100% !important;
        min-width: 600px !important;
        font-size: 12px !important;
    }
    
    .td-table th,
    .td-table td {
        padding: 8px 6px !important;
        white-space: nowrap !important;
        text-align: left !important;
    }
    
    .td-table th {
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        background: #f0f0f0 !important;
        color: #000 !important;
    }
    
    /* Tenant Dashboard Status Badges */
    .td-status {
        display: inline-block !important;
        padding: 4px 8px !important;
        border-radius: 4px !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }
    
    .td-status-pending {
        background: #fff3cd !important;
        color: #856404 !important;
    }
    
    .td-status-accepted {
        background: #d4edda !important;
        color: #155724 !important;
    }
    
    .td-status-declined {
        background: #f8d7da !important;
        color: #721c24 !important;
    }
    
    .td-status-cancelled {
        background: #e2e3e5 !important;
        color: #383d41 !important;
    }
    
    /* Tenant Dashboard Buttons */
    .td-btn {
        display: inline-block !important;
        padding: 6px 10px !important;
        font-size: 11px !important;
        border-radius: 4px !important;
        text-decoration: none !important;
        margin: 2px !important;
        white-space: nowrap !important;
    }
    
    .td-btn-edit {
        background: #ffc107 !important;
        color: #000 !important;
    }
    
    .td-btn-cancel {
        background: #dc3545 !important;
        color: #fff !important;
    }
    
    .td-btn-success {
        background: #28a745 !important;
        color: #fff !important;
    }
    
    .td-btn-view {
        background: #17a2b8 !important;
        color: #fff !important;
    }
    
    .td-btn-receipt {
        background: #6c757d !important;
        color: #fff !important;
    }
    
    .td-btn-block {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin: 5px 0 !important;
    }
    
    /* Tenant Dashboard Maintenance Cards */
    .td-maint-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .td-maint-card {
        background: white !important;
        border: 1px solid #e9ecef !important;
        border-radius: 8px !important;
        padding: 15px !important;
    }
    
    .maintenance-header {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .maintenance-info h4 {
        font-size: 16px !important;
        margin: 0 0 10px 0 !important;
    }
    
    .maintenance-info p {
        font-size: 13px !important;
        margin: 5px 0 !important;
        line-height: 1.4 !important;
    }
    
    .td-priority {
        display: inline-block !important;
        padding: 3px 8px !important;
        border-radius: 12px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
    }
    
    .td-priority-completed {
        background: #d4edda !important;
        color: #155724 !important;
    }
    
    .td-priority-in_progress {
        background: #cce5ff !important;
        color: #004085 !important;
    }
    
    .td-priority-acknowledged {
        background: #fff3cd !important;
        color: #856404 !important;
    }
    
    .td-priority-default {
        background: #e2e3e5 !important;
        color: #383d41 !important;
    }
    
    .td-maint-desc {
        font-size: 13px !important;
        color: #6c757d !important;
        margin: 10px 0 !important;
    }
    
    .td-caretaker-label {
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #495057 !important;
        margin-top: 10px !important;
    }
    
    .td-maint-notes {
        font-size: 12px !important;
        color: #6c757d !important;
        padding: 8px !important;
        background: #f8f9fa !important;
        border-radius: 4px !important;
        margin-top: 5px !important;
    }
    
    .td-maint-date {
        font-size: 12px !important;
        color: #6c757d !important;
        margin-top: 10px !important;
    }
    
    .td-maint-actions {
        margin-top: 10px !important;
    }
    
    /* Tenant Dashboard Welcome Section */
    .td-welcome {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        color: white !important;
        padding: 20px !important;
        border-radius: 8px !important;
        margin-bottom: 20px !important;
    }
    
    .td-welcome h3 {
        font-size: 18px !important;
        margin: 0 0 10px 0 !important;
    }
    
    .td-welcome p {
        font-size: 14px !important;
        margin: 0 0 15px 0 !important;
        line-height: 1.4 !important;
    }
    
    .td-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .td-actions .ps-btn {
        width: 100% !important;
        text-align: center !important;
    }
    
    /* Tenant Dashboard Activate Section */
    .td-activate {
        background: #fff3cd !important;
        border: 2px solid #ffc107 !important;
        border-radius: 8px !important;
        padding: 20px !important;
        margin-bottom: 20px !important;
        text-align: center !important;
    }
    
    .td-activate h3 {
        font-size: 18px !important;
        margin: 0 0 10px 0 !important;
        color: #856404 !important;
    }
    
    .td-activate p {
        font-size: 14px !important;
        margin: 0 0 15px 0 !important;
        color: #856404 !important;
    }
    
    /* Tenant Dashboard Empty States */
    .td-empty {
        text-align: center !important;
        padding: 30px 15px !important;
    }
    
    .td-empty-emoji {
        font-size: 36px !important;
        margin-bottom: 10px !important;
    }
    
    /* Tenant Dashboard Actions Right */
    .td-actions-right {
        display: flex !important;
        justify-content: flex-end !important;
        margin-bottom: 10px !important;
    }
    
    .td-actions-right .ps-btn {
        font-size: 12px !important;
        padding: 8px 12px !important;
    }
    
    /* Tenant Dashboard Table Row States */
    .td-row-success {
        background: #d4edda !important;
    }
    
    .td-row-danger {
        background: #f8d7da !important;
    }
    
    .td-link-danger {
        color: #dc3545 !important;
        font-weight: 600 !important;
    }
    
    /* Space Tab Panels */
    .space-tab-panel {
        width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Table Headers for Different Space Types */
    .th-residential,
    .th-commercial,
    .th-event {
        background: #667eea !important;
        color: white !important;
    }
    
    .th-residential th,
    .th-commercial th,
    .th-event th {
        color: white !important;
        font-weight: 700 !important;
    }
}

/* ========================================
   OWNER/ADMIN SIDEBAR MENU FIXES - Mobile
   ======================================== */

/* Ensure owner/admin sidebar is completely hidden on mobile */
.sidebar-menu,
#sidebar-menu {
    display: none !important;
    left: -250px !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 250px !important;
}

/* Only show sidebar when explicitly opened */
.sidebar-menu.show,
#sidebar-menu.show {
    display: block !important;
    left: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Hide sidebar overlay on mobile by default */
.sidebar-overlay,
#sidebar-overlay {
    display: none !important;
    visibility: hidden !important;
    background: rgba(0,0,0,0.2) !important;
}

.sidebar-overlay.show,
#sidebar-overlay.show {
    display: block !important;
    visibility: visible !important;
}

/* Prevent white space from owner-layout on mobile */
@media (max-width: 767px) {
    .owner-layout {
        padding: 10px !important;
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* Show sidebar toggle button on mobile */
    #sidebar-menu-toggle {
        display: flex !important;
    }
}

/* ========================================
   MOBILE AUTHENTICATION MENU FIXES
   ======================================== */

/* When user IS authenticated: hide login/register, show logout */
body.user-authenticated .nav-login,
body.user-authenticated .nav-register,
body.user-authenticated .main-nav .nav-link[href*="login"],
body.user-authenticated .main-nav .nav-link[href*="register"] {
    display: none !important;
}

/* When user IS NOT authenticated: hide logout, show login/register */
body:not(.user-authenticated) .nav-logout,
body:not(.user-authenticated) .main-nav .nav-link[href*="logout"] {
    display: none !important;
}

/* Mobile menu authentication button styling */
@media (max-width: 768px) {
    .main-nav.active .nav-link.nav-login,
    .main-nav.active .nav-link.nav-register,
    .main-nav.active .nav-link.nav-logout {
        display: flex !important;
        width: 100% !important;
        justify-content: center !important;
        margin: 5px 0 !important;
    }
    
    /* User info display in mobile menu */
    .main-nav.active div[style*="flex"] {
        display: flex !important;
        width: 100% !important;
        justify-content: center !important;
        margin-bottom: 10px !important;
    }
}

/* ========================================
   REGISTRATION FORM MOBILE FIXES
   ======================================== */

/* Tenant Dashboard - Space Type Button Cards Mobile Fix */
@media (max-width: 767px) {
    html body .ps-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
    }

    html body .space-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 12px 14px !important;
        justify-content: center !important;
    }

    html body .space-card .space-label {
        font-size: 0.95rem !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }

    html body .space-card .space-emoji {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.5rem !important;
        flex-shrink: 0 !important;
    }

    html body .space-card > div:last-child {
        flex: 1 !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* Force visibility of terms section on all screen sizes */
html body .reg-terms {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    height: auto !important;
    min-height: auto !important;
}

html body .reg-terms .terms-opt {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    padding: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: auto !important;
}

html body .reg-terms .terms-opt label {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    height: auto !important;
}

html body .reg-terms .terms-opt input[type="checkbox"],
html body .reg-terms .terms-opt input[type="radio"] {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    pointer-events: auto !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
    width: 20px !important;
    height: 20px !important;
}

html body .reg-terms .terms-opt label span {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    flex: 1 !important;
    min-width: 0 !important;
    word-wrap: break-word !important;
    line-height: 1.4 !important;
    font-size: 14px !important;
}

@media (max-width: 767px) {
    /* Ensure reg-terms section is visible - highest specificity */
    html body .reg-terms {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        height: auto !important;
        min-height: auto !important;
    }
    
    /* Terms and conditions text visibility */
    html body .reg-terms .terms-opt {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        padding: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        height: auto !important;
    }
    
    html body .reg-terms .terms-opt label {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        align-items: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
        height: auto !important;
    }
    
    html body .reg-terms .terms-opt input[type="checkbox"],
    html body .reg-terms .terms-opt input[type="radio"] {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        pointer-events: auto !important;
        flex-shrink: 0 !important;
        margin-top: 2px !important;
        width: 20px !important;
        height: 20px !important;
    }
    
    html body .reg-terms .terms-opt label span {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        flex: 1 !important;
        min-width: 0 !important;
        word-wrap: break-word !important;
        line-height: 1.4 !important;
        font-size: 14px !important;
    }
    
    /* Password fields - ensure proper spacing and form submission */
    .reg-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .input-wrap {
        width: 100% !important;
    }
    
    .input-wrap input {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure form submits on Enter key */
    .reg-form input[type="password"] {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Password toggle button - prevent accidental triggers on mobile */
    .pw-toggle {
        padding: 0 !important;
        right: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
        pointer-events: auto !important;
        background: transparent !important;
        border: none !important;
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        touch-action: manipulation !important;
    }
    
    .pw-toggle svg {
        width: 20px !important;
        height: 20px !important;
        pointer-events: auto !important;
    }
    
    /* Increase input padding to prevent overlap with toggle button */
    .input-wrap input[type="password"] {
        padding-right: 48px !important;
    }
    
    /* Ensure input field receives taps, not the toggle button wrapper */
    .input-wrap {
        position: relative !important;
    }
}

/* ========================================
   MOBILE PORTRAIT MODE - SPACE TYPE CARDS FIX
   ======================================== */
@media (max-width: 480px) and (orientation: portrait) {
    /* Ensure ps-hero container doesn't cut off content */
    html body .ps-hero,
    html body .ps-layout .ps-hero {
        padding: 20px 10px !important;
        overflow: visible !important;
        height: auto !important;
        min-height: auto !important;
    }
    
    html body .ps-hero-title {
        font-size: 1.4rem !important;
        margin-bottom: 10px !important;
    }
    
    html body .ps-hero-desc {
        font-size: 0.95rem !important;
        margin-bottom: 20px !important;
    }
    
    /* Fix for tenant dashboard menu space type cards */
    html body .ps-hero .ps-grid,
    html body .td-page .ps-grid,
    html body .ps-layout .ps-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 0 5px !important;
    }
    
    html body .space-card {
        flex-direction: column !important;
        padding: 15px 10px !important;
        min-height: 100px !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 8px !important;
    }
    
    html body .space-card .space-emoji {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.6rem !important;
    }
    
    html body .space-card .space-label {
        font-size: 0.9rem !important;
        text-align: center !important;
        line-height: 1.3 !important;
    }
    
    /* Ensure all cards are visible */
    html body .space-card-residential,
    html body .space-card-commercial,
    html body .space-card-event,
    html body .space-card-shortstay {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Extra small phones - single column for better visibility */
@media (max-width: 360px) and (orientation: portrait) {
    html body .ps-hero .ps-grid,
    html body .td-page .ps-grid,
    html body .ps-layout .ps-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    
    html body .space-card {
        flex-direction: row !important;
        padding: 12px 16px !important;
        min-height: 60px !important;
    }
}

/* ========================================
   BROWSE SPACES PAGE - MOBILE FIXES
   ======================================== */
@media (max-width: 768px) {
    html body .browse-spaces .browse-cards {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    
    html body .browse-spaces .browse-card {
        padding: 20px !important;
    }
    
    html body .browse-spaces .card-icon {
        font-size: 2.5rem !important;
        margin-bottom: 15px !important;
    }
    
    html body .browse-spaces .browse-card h3 {
        font-size: 1.2rem !important;
    }
    
    html body .browse-spaces .browse-header h1 {
        font-size: 1.8rem !important;
    }
    
    html body .browse-spaces .card-btn {
        padding: 10px 16px !important;
        font-size: 0.9rem !important;
    }
}

/* Mobile portrait mode - single column */
@media (max-width: 480px) {
    html body .browse-spaces {
        padding: 15px 10px !important;
    }
    
    html body .browse-spaces .browse-cards {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    html body .browse-spaces .browse-card {
        padding: 18px 15px !important;
    }
    
    html body .browse-spaces .browse-header {
        margin-bottom: 25px !important;
    }
    
    html body .browse-spaces .browse-header h1 {
        font-size: 1.6rem !important;
    }
    
    html body .browse-spaces .browse-subtitle {
        font-size: 1rem !important;
    }
    
    html body .browse-spaces .card-icon {
        font-size: 2.2rem !important;
        margin-bottom: 12px !important;
    }
    
    html body .browse-spaces .browse-card h3 {
        font-size: 1.1rem !important;
        margin-bottom: 10px !important;
    }
    
    html body .browse-spaces .browse-card p {
        font-size: 0.9rem !important;
        margin-bottom: 15px !important;
    }
    
    html body .browse-spaces .card-btn {
        padding: 10px 20px !important;
        font-size: 0.9rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ========================================
   MOBILE LANDSCAPE MODE - NAV SIDEBAR SCROLL FIX
   ======================================== */
@media (max-width: 767px) and (orientation: landscape) {
    /* Ensure body can scroll when sidebar is open */
    html, body {
        position: relative !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: 100vh !important;
    }
    
    /* Make sidebar scrollable in landscape - ensure content stays visible */
    html body .ps-sidebar,
    html body .ps-sidebar.ps-sidebar-open {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
        max-height: 100vh !important;
        height: 100vh !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 10000 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    /* Ensure overlay doesn't cover sidebar */
    html body .ps-sidebar-overlay {
        z-index: 9999 !important;
    }
    
    /* Ensure sidebar header stays sticky */
    html body .ps-sidebar .ps-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
    }
    
    /* Ensure sidebar content doesn't get cut off */
    html body .ps-sidebar .ps-nav {
        padding-bottom: 60px !important; /* Extra padding at bottom for scrolling */
        min-height: calc(100vh - 100px) !important;
        position: relative !important;
        overflow: visible !important;
    }
    
    /* Ensure nav items stay visible during scroll */
    html body .ps-sidebar .ps-nav a,
    html body .ps-sidebar .ps-nav button,
    html body .ps-sidebar .nav-item {
        position: relative !important;
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
    }
    
    /* Force all nav items to center align in landscape mode */
    html body .ps-sidebar a.nav-link,
    html body .ps-sidebar .nav-link {
        text-align: center !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    html body .ps-sidebar > *,
    html body .ps-sidebar .ps-nav > *,
    html body .ps-sidebar .ps-nav,
    html body .ps-sidebar nav,
    html body .ps-sidebar nav > * {
        text-align: center !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    html body .ps-sidebar nav a,
    html body .ps-sidebar nav button,
    html body .ps-sidebar .nav-item,
    html body .ps-sidebar .nav-item a,
    html body .ps-sidebar .nav-item button {
        text-align: center !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    /* Allow the page to scroll when sidebar overlay is active */
    body.ps-sidebar-open {
        overflow: hidden !important; /* Prevent body scroll, only sidebar scrolls */
    }
}

/* ========================================
   PROPERTY UNITS TABLE - MOBILE FIXES
   ======================================== */
@media (max-width: 768px) {
    /* Table wrapper for horizontal scrolling */
    .units-table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
    }
    
    /* Force minimum table width to prevent column overlap */
    .units-table {
        min-width: 800px !important;
        font-size: 0.78rem !important;
    }
    
    /* Reduce header padding */
    .units-table thead th {
        padding: 10px 8px !important;
        font-size: 0.75rem !important;
        white-space: nowrap !important;
    }
    
    .units-table thead th:first-child {
        padding-left: 12px !important;
    }
    
    .units-table thead th:last-child {
        padding-right: 12px !important;
    }
    
    /* Reduce cell padding */
    .units-table td {
        padding: 10px 8px !important;
    }
}

/* Extra small phones */
@media (max-width: 480px) {
    .units-table {
        min-width: 700px !important;
        font-size: 0.75rem !important;
    }
    
    .units-table thead th {
        padding: 8px 6px !important;
        font-size: 0.7rem !important;
    }
    
    .units-table td {
        padding: 8px 6px !important;
    }
}

/* ========================================
   COMPANY & RESOURCES DROPDOWN FIXES - ALL SCREENS
   ======================================== */

/* Global dropdown fixes for all screen sizes */
.dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    margin-top: 8px !important;
    background: white !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    min-width: 220px !important;
    max-width: 320px !important;
    z-index: 99999 !important;
    max-height: 400px !important;
    overflow-y: auto !important;
    border: 1px solid #dee2e6 !important;
}

/* Ensure dropdown items are visible */
.dropdown-item {
    background: white !important;
    color: #333 !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid #e9ecef !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 14px !important;
}

.dropdown-item:hover {
    background: #f8f9fa !important;
    color: #667eea !important;
}

.dropdown-item:last-child {
    border-bottom: none !important;
}

/* Mobile specific dropdown fixes */
@media (max-width: 768px) {
    /* Fix dropdown positioning on mobile - increase top to avoid covering toggle button */
    html body .dropdown-menu,
    body .dropdown-menu,
    .nav-dropdown .dropdown-menu {
        position: fixed !important;
        top: 100px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        right: auto !important;
        margin-top: 10px !important;
        width: 90% !important;
        max-width: 300px !important;
        min-width: 280px !important;
        max-height: 70vh !important;
        z-index: 999999 !important;
        background: white !important;
        border-radius: 12px !important;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
    }
    
    /* Ensure dropdown items are visible with dark text on light background */
    .dropdown-item {
        background: white !important;
        color: #333 !important;
        padding: 14px 20px !important;
        border-bottom: 1px solid #e9ecef !important;
        font-size: 15px !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }
    
    .dropdown-item:last-child {
        border-bottom: none !important;
    }
    
    .dropdown-item:hover,
    .dropdown-item:active {
        background: #f8f9fa !important;
        color: #667eea !important;
    }
    
    /* Dropdown icon styling */
    .dropdown-icon {
        font-size: 18px !important;
        flex-shrink: 0 !important;
    }
    
    /* Add backdrop overlay when dropdown is open */
    .dropdown-menu.show::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: -1;
        pointer-events: none;
    }
}

/* Mobile landscape specific dropdown fixes */
@media (max-width: 768px) and (orientation: landscape) {
    .dropdown-menu {
        top: 80px !important;
        margin-top: 5px !important;
        max-height: 50vh !important;
    }
}

/* ========================================
   HOME PAGE - Hero & Find a Space (Mobile)
   ======================================== */
@media (max-width: 767px) {
    /* Hero row: stack on very small screens */
    .hero-row {
        flex-direction: column !important;
        gap: 10px !important;
        text-align: center !important;
    }

    .hero h1 {
        font-size: 1.2em !important;
        margin-bottom: 4px !important;
    }

    .hero .lead {
        font-size: 0.85em !important;
    }

    /* Find a Space: 2x2 grid on mobile */
    .fas-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .fas-card {
        padding: 14px 8px !important;
    }

    .fas-icon {
        font-size: 22px !important;
    }

    .fas-title {
        font-size: 12px !important;
    }

    .fas-desc {
        font-size: 10px !important;
    }

    .find-a-space-section {
        padding: 8px 12px 14px !important;
    }
}

/* ========================================
   LOGIN PAGE - Mobile Fix
   ======================================== */
@media (max-width: 767px) {
    .login-extras {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .remember-wrap {
        align-items: flex-start !important;
    }
}

@media (max-width: 767px) and (orientation: landscape) {
    .login-container {
        padding: 10px 15px !important;
        min-height: auto !important;
        align-items: flex-start !important;
    }

    .login-card {
        padding: 18px 24px !important;
        max-width: 360px !important;
    }

    .login-header {
        margin-bottom: 12px !important;
    }

    .login-header h1 {
        font-size: 1.3em !important;
    }

    .tagline {
        font-size: 0.85em !important;
    }

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

    .form-label {
        font-size: 0.85em !important;
        margin-bottom: 3px !important;
    }

    .form-input {
        padding: 7px 10px !important;
        font-size: 0.9em !important;
    }

    .login-extras {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .remember-wrap {
        align-items: flex-start !important;
    }

    .btn-login {
        padding: 9px !important;
        font-size: 0.9em !important;
        margin-top: 4px !important;
    }

    .login-footer {
        margin-top: 10px !important;
        padding-top: 8px !important;
    }

    .login-footer p {
        margin: 5px 0 !important;
        font-size: 0.85em !important;
    }
}

/* ========================================
   BROWSE PAGE SEARCH FORMS - Mobile Fix
   ======================================== */
@media (max-width: 767px) {
    .search-form-card {
        padding: 12px !important;
        margin-bottom: 16px !important;
        border-radius: 12px !important;
    }

    .form-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

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

    .form-group label {
        font-size: 12px !important;
        margin-bottom: 3px !important;
    }

    .form-group label svg {
        width: 14px !important;
        height: 14px !important;
    }

    .form-input {
        padding: 8px 10px !important;
        font-size: 16px !important; /* prevent iOS zoom */
        border-radius: 6px !important;
    }

    .select-filter {
        padding: 6px 8px !important;
        font-size: 16px !important; /* prevent iOS zoom */
        margin-bottom: 3px !important;
    }

    .search-button {
        width: 100% !important;
        padding: 10px !important;
        font-size: 14px !important;
    }

    .search-header {
        padding: 12px 16px !important;
        margin-bottom: 12px !important;
        border-radius: 12px !important;
    }

    .page-title {
        font-size: 1.3rem !important;
        gap: 8px !important;
    }

    .page-title svg {
        width: 24px !important;
        height: 24px !important;
    }

    .page-subtitle {
        font-size: 0.85rem !important;
    }
}

/* ========================================
   BROWSE PAGE SEARCH FORMS - Mobile Landscape
   ======================================== */
@media (max-width: 767px) and (orientation: landscape) {
    .form-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }

    .search-button {
        grid-column: 1 / -1 !important;
    }
}