/* 
Mobile Tables & DataTables
Responsive DataTable fixes, DataTable controls, properties page table optimization
*/

/* ===== RESPONSIVE DATATABLE FIXES ===== */
@media (max-width: 768px) {
    /* DataTable responsive wrapper */
    .dataTables_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Table container with horizontal scroll */
    table.dataTable {
        width: 100% !important;
        margin: 0 !important;
        border-collapse: collapse;
    }
    
    /* Hide less important columns on mobile */
    table.dataTable th:nth-child(4), /* Sq Ft */
    table.dataTable td:nth-child(4),
    table.dataTable th:nth-child(6), /* Renovation */
    table.dataTable td:nth-child(6),
    table.dataTable th:nth-child(8), /* Cash-on-Cash */
    table.dataTable td:nth-child(8),
    table.dataTable th:nth-child(9), /* IRR */
    table.dataTable td:nth-child(9) {
        display: none;
    }
    
    /* Adjust remaining column widths */
    table.dataTable th:nth-child(1), /* Address */
    table.dataTable td:nth-child(1) {
        min-width: 140px;
        max-width: 160px;
    }
    
    table.dataTable th:nth-child(2), /* Price */
    table.dataTable td:nth-child(2) {
        min-width: 80px;
        max-width: 100px;
    }
    
    table.dataTable th:nth-child(3), /* Beds/Baths */
    table.dataTable td:nth-child(3) {
        min-width: 60px;
        max-width: 80px;
    }
    
    table.dataTable th:nth-child(5), /* Investment */
    table.dataTable td:nth-child(5) {
        min-width: 80px;
        max-width: 100px;
    }
    
    table.dataTable th:nth-child(7), /* NPV */
    table.dataTable td:nth-child(7) {
        min-width: 80px;
        max-width: 100px;
    }
    
    table.dataTable th:nth-child(10), /* Analyzed */
    table.dataTable td:nth-child(10) {
        min-width: 80px;
        max-width: 100px;
    }
    
    table.dataTable th:nth-child(11), /* Actions */
    table.dataTable td:nth-child(11) {
        min-width: 60px;
        max-width: 80px;
    }
    
    /* Improve text wrapping */
    table.dataTable td {
        word-wrap: break-word;
        word-break: break-word;
        white-space: normal;
        line-height: 1.3;
        padding: 8px 4px !important;
        font-size: 12px;
    }
    
    table.dataTable th {
        padding: 8px 4px !important;
        font-size: 11px;
        font-weight: 600;
    }
}

@media (max-width: 480px) {
    /* More aggressive column hiding for very small screens */
    table.dataTable th:nth-child(3), /* Beds/Baths */
    table.dataTable td:nth-child(3),
    table.dataTable th:nth-child(5), /* Investment */
    table.dataTable td:nth-child(5) {
        display: none;
    }
    
    /* Adjust remaining columns for iPhone SE */
    table.dataTable th:nth-child(1), /* Address */
    table.dataTable td:nth-child(1) {
        min-width: 120px;
        max-width: 140px;
    }
    
    table.dataTable th:nth-child(2), /* Price */
    table.dataTable td:nth-child(2) {
        min-width: 70px;
        max-width: 90px;
    }
    
    table.dataTable th:nth-child(7), /* NPV */
    table.dataTable td:nth-child(7) {
        min-width: 70px;
        max-width: 90px;
    }
    
    table.dataTable th:nth-child(10), /* Analyzed */
    table.dataTable td:nth-child(10) {
        min-width: 70px;
        max-width: 90px;
    }
    
    table.dataTable th:nth-child(11), /* Actions */
    table.dataTable td:nth-child(11) {
        min-width: 60px;
        max-width: 80px;
        padding-left: 2px !important;
        padding-right: 2px !important;
    }
    
    /* Smaller text for very small screens */
    table.dataTable td {
        font-size: 11px;
        padding: 6px 3px !important;
    }
    
    table.dataTable th {
        font-size: 10px;
        padding: 6px 3px !important;
    }
    
    /* Better action buttons for mobile */
    table.dataTable td .btn-sm {
        min-width: 24px !important;
        min-height: 24px !important;
        padding: 2px !important;
        margin: 1px !important;
        font-size: 10px !important;
        border-width: 1px !important;
    }
    
    /* Make action button container more compact */
    table.dataTable td .btn-group {
        display: flex;
        flex-wrap: nowrap;
        gap: 2px;
    }
}

/* ===== DATATABLE CONTROLS MOBILE FIXES ===== */
@media (max-width: 768px) {
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        float: none;
        text-align: center;
        margin-bottom: 10px;
    }
    
    .dataTables_wrapper .dataTables_length select {
        width: auto;
        display: inline-block;
    }
    
    .dataTables_wrapper .dataTables_filter input {
        width: 200px;
        margin-left: 5px;
    }
    
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none;
        text-align: center;
        margin-top: 10px;
    }
    
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 8px 12px;
        margin: 2px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .dataTables_wrapper .dataTables_filter input {
        width: 150px;
    }
    
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 6px 8px;
        font-size: 11px;
    }
}


/* ===== PROPERTIES PAGE MOBILE OPTIMIZATION (DataTable focus) ===== */
@media (max-width: 768px) {
    /* Properties page container optimization */
    .container {
        padding: var(--hh-space-sm) var(--hh-space-md) !important;
        max-width: 100% !important;
    }
    
    /* Table card mobile optimization */
    .table-card {
        margin: var(--hh-space-sm) 0 !important;
        border-radius: var(--hh-radius-md) !important;
        box-shadow: var(--hh-shadow-sm) !important;
        background: var(--hh-color-base-white) !important;
        border: 1px solid var(--hh-color-borders-default) !important;
    }
    
    /* Table header mobile optimization */
    .table-header {
        padding: var(--hh-space-lg) var(--hh-space-md) !important;
        background: var(--hh-color-base-cloud) !important;
        border-bottom: 1px solid var(--hh-color-borders-default) !important;
        border-radius: var(--hh-radius-md) var(--hh-radius-md) 0 0 !important;
    }
    
    .table-header h5 {
        font-size: var(--hh-type-h4-size) !important;
        font-weight: var(--hh-type-h4-weight) !important;
        margin-bottom: var(--hh-space-xs) !important;
    }
    
    .table-header .text-muted {
        font-size: var(--hh-type-small-size) !important;
        margin-bottom: 0 !important;
    }
    
    /* Control buttons mobile optimization */
    .btn-group .btn {
        min-height: 44px !important; /* Touch target compliance */
        min-width: 44px !important;
        padding: var(--hh-space-sm) var(--hh-space-md) !important;
        font-size: var(--hh-type-small-size) !important;
        margin-right: var(--hh-space-xs) !important;
        border-radius: var(--hh-radius-sm) !important;
        touch-action: manipulation !important;
    }
    
    .btn-outline-primary {
        border-color: var(--hh-color-brand-primary) !important;
        color: var(--hh-color-brand-primary) !important;
        background: var(--hh-color-base-white) !important;
    }
    
    .btn-outline-primary:hover,
    .btn-outline-primary:focus {
        background: var(--hh-color-brand-primary) !important;
        color: var(--hh-color-text-inverse) !important;
        border-color: var(--hh-color-brand-primary) !important;
    }
    
    .btn-export {
        background: var(--hh-color-brand-sage) !important;
        color: var(--hh-color-text-inverse) !important;
        border-color: var(--hh-color-brand-sage) !important;
    }
    
    .btn-export:hover,
    .btn-export:focus {
        background: var(--hh-color-brand-sage-700) !important;
        border-color: var(--hh-color-brand-sage-700) !important;
    }
    
    /* Enhanced properties DataTable mobile optimization */
    .table-responsive {
        border-radius: 0 0 var(--hh-radius-md) var(--hh-radius-md) !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
    }
    
    #propertyTable {
        width: 100% !important;
        min-width: 1200px !important; /* Ensure horizontal scroll for all columns */
        font-size: var(--hh-type-small-size) !important;
        border-collapse: collapse !important;
        margin-bottom: 0 !important;
    }
    
    /* Table header styling for mobile */
    #propertyTable thead th {
        background: var(--hh-color-base-cloud) !important;
        color: var(--hh-color-text-primary) !important;
        font-size: var(--hh-type-small-size) !important;
        font-weight: var(--hh-type-h4-weight) !important;
        padding: var(--hh-space-md) var(--hh-space-sm) !important;
        border-bottom: 2px solid var(--hh-color-borders-strong) !important;
        white-space: nowrap !important;
        text-align: left !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
    }
    
    /* Table body styling for mobile */
    #propertyTable tbody td {
        padding: var(--hh-space-md) var(--hh-space-sm) !important;
        font-size: var(--hh-type-small-size) !important;
        border-bottom: 1px solid var(--hh-color-borders-subtle) !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
    }
    
    #propertyTable tbody tr {
        transition: background-color 0.2s ease !important;
    }
    
    #propertyTable tbody tr:hover {
        background: var(--hh-color-base-offWhite) !important;
    }
    
    #propertyTable tbody tr:nth-child(even) {
        background: rgba(245, 245, 245, 0.5) !important;
    }
    
    #propertyTable tbody tr:nth-child(even):hover {
        background: var(--hh-color-base-offWhite) !important;
    }
    
    /* Column width optimization for mobile horizontal scroll */
    #propertyTable th:nth-child(1), /* Address */
    #propertyTable td:nth-child(1) {
        min-width: 180px !important;
        max-width: 220px !important;
    }
    
    #propertyTable th:nth-child(2), /* Price */
    #propertyTable td:nth-child(2) {
        min-width: 100px !important;
        text-align: right !important;
    }
    
    #propertyTable th:nth-child(3), /* Beds/Baths */
    #propertyTable td:nth-child(3) {
        min-width: 90px !important;
        text-align: center !important;
    }
    
    #propertyTable th:nth-child(4), /* Sq Ft */
    #propertyTable td:nth-child(4) {
        min-width: 80px !important;
        text-align: right !important;
    }
    
    #propertyTable th:nth-child(5), /* Investment */
    #propertyTable td:nth-child(5) {
        min-width: 110px !important;
        text-align: right !important;
    }
    
    #propertyTable th:nth-child(6), /* Renovation */
    #propertyTable td:nth-child(6) {
        min-width: 100px !important;
        text-align: right !important;
    }
    
    #propertyTable th:nth-child(7), /* NPV */
    #propertyTable td:nth-child(7) {
        min-width: 100px !important;
        text-align: right !important;
    }
    
    #propertyTable th:nth-child(8), /* Cash-on-Cash */
    #propertyTable td:nth-child(8) {
        min-width: 110px !important;
        text-align: right !important;
    }
    
    #propertyTable th:nth-child(9), /* IRR */
    #propertyTable td:nth-child(9) {
        min-width: 80px !important;
        text-align: right !important;
    }
    
    #propertyTable th:nth-child(10), /* Analyzed */
    #propertyTable td:nth-child(10) {
        min-width: 100px !important;
    }
    
    #propertyTable th:nth-child(11), /* Actions */
    #propertyTable td:nth-child(11) {
        min-width: 120px !important;
        text-align: center !important;
    }
    
    /* Action buttons in table mobile optimization */
    #propertyTable .btn-sm {
        min-height: 36px !important;
        min-width: 36px !important;
        padding: var(--hh-space-xs) var(--hh-space-sm) !important;
        font-size: var(--hh-type-small-size) !important;
        margin: 0 var(--hh-space-xs) !important;
        border-radius: var(--hh-radius-sm) !important;
        touch-action: manipulation !important;
    }
    
    #propertyTable .btn-sm:first-child {
        margin-left: 0 !important;
    }
    
    #propertyTable .btn-sm:last-child {
        margin-right: 0 !important;
    }
    
    /* View button */
    #propertyTable .btn-primary {
        background: var(--hh-color-brand-primary) !important;
        border-color: var(--hh-color-brand-primary) !important;
        color: var(--hh-color-text-inverse) !important;
    }
    
    #propertyTable .btn-primary:hover {
        background: var(--hh-color-brand-primary-600) !important;
        border-color: var(--hh-color-brand-primary-600) !important;
    }
    
    /* Delete button */
    #propertyTable .btn-outline-danger {
        border-color: var(--hh-color-status-error) !important;
        color: var(--hh-color-status-error) !important;
        background: var(--hh-color-base-white) !important;
    }
    
    #propertyTable .btn-outline-danger:hover {
        background: var(--hh-color-status-error) !important;
        color: var(--hh-color-text-inverse) !important;
        border-color: var(--hh-color-status-error) !important;
    }
    
    /* DataTable controls mobile optimization */
    .dataTables_wrapper .dataTables_length {
        margin-bottom: var(--hh-space-md) !important;
    }
    
    .dataTables_wrapper .dataTables_length select {
        min-height: 44px !important; /* Touch target compliance */
        padding: var(--hh-space-sm) var(--hh-space-md) !important;
        font-size: var(--hh-type-body-size) !important;
        border: 1px solid var(--hh-color-borders-default) !important;
        border-radius: var(--hh-radius-sm) !important;
        background: var(--hh-color-base-white) !important;
    }
    
    .dataTables_wrapper .dataTables_filter input {
        min-height: 44px !important; /* Touch target compliance */
        padding: var(--hh-space-sm) var(--hh-space-md) !important;
        font-size: 16px !important; /* Prevent iOS zoom */
        border: 1px solid var(--hh-color-borders-default) !important;
        border-radius: var(--hh-radius-sm) !important;
        background: var(--hh-color-base-white) !important;
        width: 100% !important;
        max-width: 300px !important;
        margin-left: var(--hh-space-sm) !important;
    }
    
    .dataTables_wrapper .dataTables_filter input:focus {
        outline: none !important;
        border-color: var(--hh-color-brand-primary) !important;
        box-shadow: 0 0 0 3px rgba(224, 122, 95, 0.1) !important;
    }
    
    /* Pagination mobile optimization */
    .dataTables_wrapper .dataTables_paginate {
        margin-top: var(--hh-space-lg) !important;
        text-align: center !important;
    }
    
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        min-height: 44px !important; /* Touch target compliance */
        min-width: 44px !important;
        padding: var(--hh-space-sm) var(--hh-space-md) !important;
        margin: 0 var(--hh-space-xs) !important;
        border: 1px solid var(--hh-color-brand-slate) !important;
        background: var(--hh-color-base-white) !important;
        color: var(--hh-color-brand-slate) !important;
        border-radius: var(--hh-radius-sm) !important;
        font-size: var(--hh-type-small-size) !important;
        text-decoration: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        touch-action: manipulation !important;
        transition: all 0.2s ease !important;
    }
    
    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background: var(--hh-color-brand-slate) !important;
        color: var(--hh-color-text-inverse) !important;
        border-color: var(--hh-color-brand-slate) !important;
        text-decoration: none !important;
    }
    
    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background: var(--hh-color-brand-primary) !important;
        color: var(--hh-color-text-inverse) !important;
        border-color: var(--hh-color-brand-primary) !important;
    }
    
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
        opacity: 0.5 !important;
        pointer-events: none !important;
    }
    
    /* DataTable info mobile optimization */
    .dataTables_wrapper .dataTables_info {
        padding: var(--hh-space-md) 0 !important;
        font-size: var(--hh-type-small-size) !important;
        color: var(--hh-color-text-secondary) !important;
        text-align: center !important;
    }
    
    /* Loading state mobile optimization */
    .dataTables_wrapper .dataTables_processing {
        background: rgba(255, 255, 255, 0.9) !important;
        color: var(--hh-color-text-primary) !important;
        font-size: var(--hh-type-body-size) !important;
        padding: var(--hh-space-xl) !important;
        border-radius: var(--hh-radius-md) !important;
        box-shadow: var(--hh-shadow-md) !important;
    }
    
    /* Empty state mobile optimization */
    .dataTables_empty {
        padding: var(--hh-space-xl) var(--hh-space-lg) !important;
        text-align: center !important;
        font-size: var(--hh-type-body-size) !important;
        color: var(--hh-color-text-secondary) !important;
    }
    
    /* Mobile-specific horizontal scroll indicator */
    .table-responsive::after {
        content: "← Scroll to view more columns →";
        position: sticky;
        right: 0;
        bottom: 0;
        background: var(--hh-color-brand-primary-300);
        color: var(--hh-color-text-primary);
        padding: var(--hh-space-xs) var(--hh-space-sm);
        font-size: var(--hh-type-helper-size);
        text-align: center;
        border-radius: var(--hh-radius-sm) var(--hh-radius-sm) 0 0;
        z-index: 5;
        opacity: 0.8;
    }
    
    /* Property modal mobile optimization */
    .modal-dialog {
        margin: var(--hh-space-md) !important;
        max-width: calc(100vw - 24px) !important;
    }
    
    .modal-content {
        border-radius: var(--hh-radius-md) !important;
    }
    
    .modal-header {
        padding: var(--hh-space-lg) var(--hh-space-lg) var(--hh-space-md) !important;
        border-bottom: 1px solid var(--hh-color-borders-default) !important;
    }
    
    .modal-title {
        font-size: var(--hh-type-h3-size) !important;
        font-weight: var(--hh-type-h3-weight) !important;
    }
    
    .modal-body {
        padding: var(--hh-space-lg) !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
    }
    
    .modal-footer {
        padding: var(--hh-space-md) var(--hh-space-lg) var(--hh-space-lg) !important;
        border-top: 1px solid var(--hh-color-borders-default) !important;
    }
    
    .modal-footer .btn {
        min-height: 44px !important;
        min-width: 44px !important;
        touch-action: manipulation !important;
    }
}

/* ===== PROPERTIES PAGE COMPACT MOBILE ===== */
@media (max-width: 480px) {
    /* Ultra-compact for very small screens */
    .container {
        padding: var(--hh-space-xs) var(--hh-space-sm) !important;
    }
    
    .table-header {
        padding: var(--hh-space-md) var(--hh-space-sm) !important;
    }
    
    .table-header h5 {
        font-size: var(--hh-type-body-size) !important;
    }
    
    .table-header .text-muted {
        font-size: var(--hh-type-helper-size) !important;
    }
    
    /* More compact buttons for very small screens */
    .btn-group .btn {
        min-height: 40px !important;
        min-width: 40px !important;
        padding: var(--hh-space-xs) !important;
        font-size: var(--hh-type-helper-size) !important;
    }
    
    /* More compact table for very small screens */
    #propertyTable {
        min-width: 1000px !important; /* Reduced but still scrollable */
        font-size: var(--hh-type-helper-size) !important;
    }
    
    #propertyTable thead th {
        padding: var(--hh-space-sm) var(--hh-space-xs) !important;
        font-size: var(--hh-type-helper-size) !important;
    }
    
    #propertyTable tbody td {
        padding: var(--hh-space-sm) var(--hh-space-xs) !important;
        font-size: var(--hh-type-helper-size) !important;
    }
    
    /* More compact action buttons */
    #propertyTable .btn-sm {
        min-height: 32px !important;
        min-width: 32px !important;
        padding: var(--hh-space-xs) !important;
        font-size: var(--hh-type-helper-size) !important;
    }
    
    /* Compact pagination */
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        min-height: 40px !important;
        min-width: 40px !important;
        padding: var(--hh-space-xs) var(--hh-space-sm) !important;
        font-size: var(--hh-type-helper-size) !important;
    }
    
    /* More compact modal for very small screens */
    .modal-dialog {
        margin: var(--hh-space-sm) !important;
        max-width: calc(100vw - 16px) !important;
    }
    
    .modal-header {
        padding: var(--hh-space-md) var(--hh-space-md) var(--hh-space-sm) !important;
    }
    
    .modal-title {
        font-size: var(--hh-type-h4-size) !important;
    }
    
    .modal-body {
        padding: var(--hh-space-md) !important;
    }
    
    .modal-footer {
        padding: var(--hh-space-sm) var(--hh-space-md) var(--hh-space-md) !important;
    }
    
    /* Hide scroll indicator text on very small screens */
    .table-responsive::after {
        content: "← Scroll →";
        font-size: var(--hh-type-helper-size);
        padding: var(--hh-space-xs);
    }
}