/* 
Mobile Pages - Search & History
Home/search page, search results condensation, history page optimization
*/

/* ===== HISTORY PAGE MOBILE IMPROVEMENTS ===== */
@media (max-width: 768px) {
    /* Hide search input and entries selector on mobile */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        display: none !important;
    }
    
    /* Move table title higher and make it prominent */
    .table-header {
        padding: 12px 16px !important;
        margin-bottom: 8px !important;
    }
    
    .table-header h5 {
        font-size: 16px !important;
        margin-bottom: 4px !important;
    }
    
    /* Convert large buttons to small icons */
    .btn-group .btn {
        padding: 6px 8px !important;
        font-size: 12px !important;
        min-height: auto !important;
    }
    
    .btn-outline-primary,
    .btn-export {
        padding: 6px 8px !important;
        font-size: 0 !important; /* Hide text */
        min-width: 32px !important;
        min-height: 32px !important;
        position: relative !important;
    }
    
    /* Add icons via CSS */
    .btn-outline-primary:before {
        content: '⚙️';
        font-size: 14px !important;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .btn-export:before {
        content: none; /* Removed emoji to allow SVG image to show */
    }
    
    /* Compact action buttons in table */
    .btn-sm {
        min-width: 32px !important;
        min-height: 32px !important;
        padding: 4px !important;
        font-size: 12px !important;
        touch-action: manipulation;
    }
    
    /* Better spacing for action button groups */
    .btn-group .btn {
        margin-right: 2px !important;
    }
    
    .btn-group .btn:last-child {
        margin-right: 0 !important;
    }
    
    /* Move table up by reducing top margins */
    .container {
        padding-top: 8px !important;
    }
    
    .table-card {
        margin-top: 0 !important;
        margin-bottom: 16px !important;
    }
}


/* ===== HOME/SEARCH PAGE MOBILE OPTIMIZATION ===== */
@media (max-width: 768px) {
    /* Mobile-first container layout */
    .container {
        max-width: 100% !important;
        padding: 0 var(--hh-space-lg) !important;
        margin: 0 !important;
    }
    
    /* Hero section mobile optimization */
    .hero-section {
        padding: var(--hh-space-xl) 0 !important;
        text-align: center !important;
    }
    
    .hero-title {
        font-size: var(--hh-type-h2-size) !important;
        line-height: var(--hh-type-h2-lh) !important;
        margin-bottom: var(--hh-space-lg) !important;
    }
    
    .hero-subtitle {
        font-size: var(--hh-type-body-size) !important;
        margin-bottom: var(--hh-space-xl) !important;
    }
    
    /* Mobile-optimized tab buttons */
    .tab-button {
        flex: 1 !important;
        padding: var(--hh-space-lg) var(--hh-space-md) !important;
        font-size: var(--hh-type-body-size) !important;
        min-height: 52px !important; /* Touch target compliance */
        border-radius: var(--hh-radius-md) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: var(--hh-space-sm) !important;
        transition: all 0.2s ease !important;
        border: 2px solid var(--hh-color-borders-default) !important;
        background: var(--hh-color-base-white) !important;
        margin-bottom: var(--hh-space-sm) !important;
    }
    
    .tab-button.active {
        background: var(--hh-color-brand-slate) !important; /* Use slate instead of orange for distinction */
        color: var(--hh-color-text-inverse) !important;
        border-color: var(--hh-color-brand-slate) !important;
    }
    
    .tab-button:not(.active):hover {
        border-color: var(--hh-color-brand-slate) !important;
        background: var(--hh-color-brand-slate-300) !important; /* Use slate for consistency */
    }
    
    .tab-button:active {
        transform: scale(0.98) !important;
    }
    
    /* Mobile form container */
    .form-container {
        background: var(--hh-color-base-white) !important;
        border-radius: var(--hh-radius-lg) !important;
        padding: var(--hh-space-xl) var(--hh-space-lg) !important;
        margin: var(--hh-space-lg) 0 !important;
        box-shadow: var(--hh-shadow-lg) !important;
        border: 1px solid var(--hh-color-borders-subtle) !important;
    }
    
    /* Single property URL form */
    .form-row.single {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--hh-space-lg) !important;
    }
    
    .form-group {
        margin-bottom: var(--hh-space-lg) !important;
    }
    
    .form-group label {
        font-size: var(--hh-type-body-size) !important;
        font-weight: var(--hh-type-h4-weight) !important;
        margin-bottom: var(--hh-space-sm) !important;
        display: block !important;
    }
    
    /* Mobile-optimized inputs */
    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100% !important;
        padding: var(--hh-space-lg) !important;
        font-size: 16px !important; /* Prevent iOS zoom */
        border: 2px solid var(--hh-color-borders-default) !important;
        border-radius: var(--hh-radius-md) !important;
        min-height: 52px !important; /* Touch-friendly */
        box-sizing: border-box !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        background: var(--hh-color-base-white) !important;
    }
    
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea: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;
    }
    
    /* Market search form optimization */
    .form-row {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--hh-space-md) !important;
        margin-bottom: var(--hh-space-lg) !important;
    }
    
    /* Two-column layout for price inputs on mobile */
    .form-row.price-inputs {
        display: flex !important;
        flex-direction: row !important;
        gap: var(--hh-space-md) !important;
    }
    
    .form-row.price-inputs .form-group {
        flex: 1 !important;
        margin-bottom: 0 !important;
    }
    
    /* Primary action buttons */
    .btn-primary,
    .analyze-button,
    .search-button {
        width: 100% !important;
        padding: var(--hh-space-lg) !important;
        font-size: var(--hh-type-lg-size) !important;
        font-weight: var(--hh-type-h3-weight) !important;
        min-height: 56px !important; /* Generous touch target */
        border-radius: var(--hh-radius-md) !important;
        background: var(--hh-color-brand-primary) !important;
        color: var(--hh-color-text-inverse) !important;
        border: none !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        box-shadow: var(--hh-shadow-md) !important;
        margin-top: var(--hh-space-lg) !important;
    }
    
    .btn-primary:hover,
    .analyze-button:hover,
    .search-button:hover {
        background: var(--hh-color-brand-primary-600) !important;
        box-shadow: var(--hh-shadow-lg) !important;
        transform: translateY(-1px) !important;
    }
    
    .btn-primary:active,
    .analyze-button:active,
    .search-button:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }
    
    /* Progress indicators for mobile */
    .progress-bar-container {
        background: var(--hh-color-base-white) !important;
        border-radius: var(--hh-radius-md) !important;
        padding: var(--hh-space-lg) !important;
        margin: var(--hh-space-lg) 0 !important;
        box-shadow: var(--hh-shadow-md) !important;
    }
    
    .stages-container {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--hh-space-sm) !important;
    }
    
    .stage-item {
        padding: var(--hh-space-md) !important;
        border-radius: var(--hh-radius-sm) !important;
        border: 1px solid var(--hh-color-borders-subtle) !important;
        font-size: var(--hh-type-small-size) !important;
    }
    
    /* Loading states mobile optimization */
    .loading-spinner {
        margin: var(--hh-space-xl) auto !important;
        width: 40px !important;
        height: 40px !important;
    }
    
    .loading-text {
        text-align: center !important;
        font-size: var(--hh-type-body-size) !important;
        color: var(--hh-color-text-secondary) !important;
        margin-top: var(--hh-space-md) !important;
    }
}

/* ===== HOME/SEARCH PAGE COMPACT MOBILE ===== */
@media (max-width: 375px) {
    .container {
        padding: 0 var(--hh-space-md) !important;
    }
    
    .hero-section {
        padding: var(--hh-space-lg) 0 !important;
    }
    
    .hero-title {
        font-size: var(--hh-type-h3-size) !important;
    }
    
    .form-container {
        padding: var(--hh-space-lg) var(--hh-space-md) !important;
    }
    
    .tab-button {
        padding: var(--hh-space-md) var(--hh-space-sm) !important;
        font-size: var(--hh-type-small-size) !important;
        min-height: 48px !important;
    }
    
    .form-group input,
    .form-group select {
        padding: var(--hh-space-md) !important;
        min-height: 48px !important;
    }
    
    .btn-primary,
    .analyze-button,
    .search-button {
        min-height: 52px !important;
        font-size: var(--hh-type-body-size) !important;
        padding: var(--hh-space-md) !important;
    }
    
    /* Stack price inputs vertically on very small screens */
    .form-row.price-inputs {
        flex-direction: column !important;
        gap: var(--hh-space-sm) !important;
    }
}


/* ===== PHASE 2: SEARCH RESULTS PAGE CONDENSATION ===== */
@media (max-width: 768px) {
    /* Search criteria header condensation - 2 lines max */
    .search-criteria-header {
        padding: var(--hh-space-md) var(--hh-space-sm) !important;
        background: var(--hh-color-base-white) !important;
        border-radius: var(--hh-radius-md) !important;
        margin-bottom: var(--hh-space-lg) !important;
        box-shadow: var(--hh-shadow-sm) !important;
    }
    
    .search-criteria {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: var(--hh-space-xs) !important;
        margin-bottom: var(--hh-space-sm) !important; /* Reduced spacing */
    }
    
    .search-location {
        font-size: var(--hh-type-h4-size) !important;
        font-weight: var(--hh-type-h4-weight) !important;
        color: var(--hh-color-text-primary) !important;
        margin-right: var(--hh-space-md) !important;
        flex-shrink: 0 !important;
    }
    
    .search-criteria-tags {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: var(--hh-space-xs) !important;
        flex-grow: 1 !important;
    }
    
    .criteria-tag {
        background: var(--hh-color-brand-primary-300) !important;
        color: var(--hh-color-text-primary) !important;
        padding: var(--hh-space-xs) var(--hh-space-sm) !important;
        border-radius: var(--hh-radius-full) !important;
        font-size: var(--hh-type-small-size) !important;
        white-space: nowrap !important;
    }
    
    .search-results-count {
        font-size: var(--hh-type-body-size) !important;
        color: var(--hh-color-text-secondary) !important;
        margin: 0 !important;
        text-align: left !important;
    }
    
    /* Property cards - single line bed/bath/sqft */
    .property-card {
        padding: var(--hh-space-md) !important; /* Reduced padding */
        margin-bottom: var(--hh-space-md) !important; /* Reduced margin */
        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;
    }
    
    .property-image {
        height: 160px !important; /* Reduced from ~200px */
        width: 100% !important;
        object-fit: cover !important;
        border-radius: var(--hh-radius-sm) !important;
        margin-bottom: var(--hh-space-sm) !important;
    }
    
    /* Address and price on same line */
    .property-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        margin-bottom: var(--hh-space-sm) !important;
        gap: var(--hh-space-sm) !important;
    }
    
    .property-price {
        font-size: var(--hh-type-h4-size) !important;
        font-weight: var(--hh-type-h3-weight) !important;
        color: var(--hh-color-brand-primary) !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    
    .property-address {
        font-size: var(--hh-type-small-size) !important;
        color: var(--hh-color-text-secondary) !important;
        line-height: 1.3 !important;
        flex-grow: 1 !important;
        margin: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }
    
    /* Property details as single line pills */
    .property-details {
        display: flex !important;
        gap: var(--hh-space-xs) !important;
        margin: var(--hh-space-sm) 0 !important;
        flex-wrap: nowrap !important; /* Keep on same line */
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: var(--hh-space-xs) !important; /* Space for scrollbar */
    }
    
    .property-detail,
    .property-detail-pill {
        background: var(--hh-color-base-cloud) !important;
        color: var(--hh-color-text-primary) !important;
        padding: var(--hh-space-xs) var(--hh-space-sm) !important;
        border-radius: var(--hh-radius-full) !important;
        font-size: var(--hh-type-small-size) !important;
        font-weight: var(--hh-type-small-weight) !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        border: 1px solid var(--hh-color-borders-subtle) !important;
    }
    
    /* Combine bed/bath/sqft into single line */
    .beds-baths-sqft {
        display: flex !important;
        gap: var(--hh-space-xs) !important;
    }
    
    .beds-pill,
    .baths-pill,
    .sqft-pill {
        background: var(--hh-color-base-cloud) !important;
        padding: var(--hh-space-xs) var(--hh-space-sm) !important;
        border-radius: var(--hh-radius-full) !important;
        font-size: var(--hh-type-small-size) !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    
    /* Property action buttons */
    .property-actions {
        margin-top: var(--hh-space-md) !important;
        display: flex !important;
        gap: var(--hh-space-sm) !important;
    }
    
    .analyze-btn {
        flex-grow: 1 !important;
        padding: var(--hh-space-sm) var(--hh-space-md) !important;
        font-size: var(--hh-type-small-size) !important;
        min-height: 40px !important;
        border-radius: var(--hh-radius-sm) !important;
        background: var(--hh-color-brand-primary) !important;
        color: var(--hh-color-text-inverse) !important;
        border: none !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        touch-action: manipulation !important;
    }
    
    .analyze-btn:hover {
        background: var(--hh-color-brand-primary-600) !important;
        transform: translateY(-1px) !important;
    }
    
    .analyze-btn:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }
    
    /* Selection checkbox for bulk actions */
    .property-checkbox {
        width: 20px !important;
        height: 20px !important;
        flex-shrink: 0 !important;
        accent-color: var(--hh-color-brand-primary) !important;
    }
    
    /* Properties grid mobile optimization */
    .properties-grid {
        display: grid !important;
        grid-template-columns: 1fr !important; /* Single column on mobile */
        gap: var(--hh-space-md) !important;
        padding: 0 !important;
    }
    
    /* Results pagination */
    .load-more-container {
        text-align: center !important;
        padding: var(--hh-space-xl) 0 !important;
    }
    
    .load-more-btn {
        padding: var(--hh-space-md) var(--hh-space-xl) !important;
        font-size: var(--hh-type-body-size) !important;
        min-height: 48px !important;
        background: var(--hh-color-brand-sage) !important;
        color: var(--hh-color-text-inverse) !important;
        border: none !important;
        border-radius: var(--hh-radius-md) !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
        transition: all 0.2s ease !important;
    }
    
    .load-more-btn:hover {
        background: var(--hh-color-brand-sage-700) !important;
        transform: translateY(-1px) !important;
    }
}

/* Compact mobile - further condensation */
@media (max-width: 480px) {
    .search-criteria-header {
        padding: var(--hh-space-sm) !important;
    }
    
    .search-location {
        font-size: var(--hh-type-body-size) !important;
    }
    
    .criteria-tag {
        font-size: var(--hh-type-helper-size) !important;
        padding: 2px 8px !important;
    }
    
    .property-card {
        padding: var(--hh-space-sm) !important;
        margin-bottom: var(--hh-space-sm) !important;
    }
    
    .property-image {
        height: 140px !important;
    }
    
    .property-price {
        font-size: var(--hh-type-body-size) !important;
    }
    
    .property-address {
        font-size: var(--hh-type-helper-size) !important;
    }
    
    .property-detail-pill {
        font-size: var(--hh-type-helper-size) !important;
        padding: 2px 8px !important;
    }
    
    .analyze-btn {
        min-height: 36px !important;
        font-size: var(--hh-type-helper-size) !important;
        padding: var(--hh-space-xs) var(--hh-space-sm) !important;
    }
}