/**
 * Appointment List Page - Responsive Styles
 * Fixes tabs, search, and filter display on mobile/tablet
 */

/* ============================================
   Page Header - Responsive
   ============================================ */

/* Tablet - Keep inline (title left, button right) */
@media (min-width: 769px) and (max-width: 1024px) {
    .Polaris-Page-Header__Row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: var(--p-space-300) !important;
    }
    
    .Polaris-Page-Header__TitleWrapper {
        flex: 0 0 auto !important;
    }
    
    .Polaris-Page-Header__RightAlign {
        flex: 0 0 auto !important;
    }
}

/* Mobile - Stack vertically */
@media (max-width: 768px) {
    /* Page header - stack title and button */
    .Polaris-Page-Header__Row {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: var(--p-space-300) !important;
    }
    
    .Polaris-Page-Header__TitleWrapper {
        width: 100% !important;
        order: 1 !important;
    }
    
    .Polaris-Page-Header__RightAlign {
        width: 100% !important;
        order: 2 !important;
        margin-left: 0 !important;
    }
    
    .Polaris-Page-Header__PrimaryActionWrapper {
        width: 100% !important;
    }
    
    .Polaris-Page-Header__PrimaryActionWrapper .Polaris-Button {
        width: 100% !important;
        justify-content: center !important;
    }
    
    /* Title smaller on mobile */
    .Polaris-Header-Title {
        font-size: 1.25rem !important;
    }
}

/* ============================================
   Index Filters - Responsive Layout
   ============================================ */

/* Desktop - Default layout */
.Polaris-IndexFilters__IndexFiltersWrapper {
    min-height: 45px !important;
    height: auto !important;
}

.Polaris-Filters__Container .Polaris-InlineStack {
    flex-wrap: wrap !important;
    gap: var(--p-space-300) !important;
}

/* Ensure tabs and buttons don't overflow */
#tabs-section {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.Polaris-IndexFilters__ButtonWrap {
    flex-shrink: 0 !important;
    margin-left: auto !important;
}

/* ============================================
   Tablet View (768px - 1024px)
   ============================================ */

@media (max-width: 1024px) {
    .Polaris-IndexFilters__IndexFiltersWrapper {
        height: auto !important;
        min-height: 60px !important;
    }
    
    .Polaris-Filters__Container .Polaris-Box {
        padding: var(--p-space-300) !important;
    }
    
    .Polaris-Filters__Container .Polaris-InlineStack {
        flex-wrap: wrap !important;
        gap: var(--p-space-300) !important;
    }
    
    /* Tabs section */
    #tabs-section {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        margin-bottom: var(--p-space-200) !important;
    }
    
    /* Button wrap on new line */
    .Polaris-IndexFilters__ButtonWrap {
        flex: 0 0 auto !important;
        margin-left: 0 !important;
        width: auto !important;
    }
    
    /* Tabs */
    .Polaris-Tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    
    .Polaris-Tabs__Tab {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
}

/* ============================================
   Mobile View (< 768px)
   ============================================ */

@media (max-width: 768px) {
    .Polaris-IndexFilters__IndexFiltersWrapper {
        height: auto !important;
        min-height: 80px !important;
    }
    
    .Polaris-Filters__Container .Polaris-Box {
        padding: var(--p-space-200) !important;
    }
    
    .Polaris-Filters__Container .Polaris-InlineStack {
        flex-direction: row !important;
        align-items: center !important;
        gap: var(--p-space-300) !important;
        flex-wrap: wrap !important;
    }
    
    /* Tabs section - full width on first row */
    #tabs-section {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        order: 1 !important;
    }
    
    /* Search section - full width on first row */
    #search-section {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        order: 1 !important;
    }
    
    /* Button wrap - inline on second row, right-aligned */
    .Polaris-IndexFilters__ButtonWrap {
        flex: 0 0 auto !important;
        width: auto !important;
        margin-left: auto !important;
        order: 2 !important;
        display: flex !important;
        justify-content: flex-end !important;
    }
    
    .Polaris-IndexFilters__ButtonWrap .Polaris-InlineStack {
        width: auto !important;
        justify-content: flex-end !important;
        flex-direction: row !important;
        gap: var(--p-space-200) !important;
    }
    
    /* Tabs styling */
    .Polaris-Tabs__Wrapper {
        width: 100% !important;
    }
    
    .Polaris-Tabs__ButtonWrapper {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    
    .Polaris-Tabs {
        width: 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
    }
    
    .Polaris-Tabs__TabContainer {
        flex: 1 1 auto !important;
        min-width: 100px !important;
    }
    
    .Polaris-Tabs__Tab {
        width: 100% !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        padding: var(--p-space-300) var(--p-space-400) !important;
        justify-content: center !important;
    }
    
    /* Filter and Sort buttons - inline */
    #filter-button,
    #sort-button {
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
    }
    
    /* Search field */
    .Polaris-Filters__SearchField .Polaris-TextField {
        width: 100% !important;
    }
    
    .Polaris-TextField__Input {
        font-size: 16px !important; /* Prevent iOS zoom */
    }
}

/* ============================================
   Small Mobile (< 480px)
   ============================================ */

@media (max-width: 480px) {
    .Polaris-IndexFilters__IndexFiltersWrapper {
        min-height: 90px !important;
    }
    
    .Polaris-Filters__Container .Polaris-Box {
        padding: var(--p-space-150) !important;
    }
    
    /* Tabs - equal width */
    .Polaris-Tabs__TabContainer {
        flex: 1 1 50% !important;
        min-width: 0 !important;
    }
    
    .Polaris-Tabs__Tab {
        padding: var(--p-space-250) var(--p-space-300) !important;
        font-size: 0.875rem !important;
    }
    
    /* Buttons slightly smaller */
    #filter-button,
    #sort-button {
        min-width: 40px !important;
        min-height: 40px !important;
    }
    
    .Polaris-Button__Icon .Polaris-Icon {
        width: 18px !important;
        height: 18px !important;
    }
}

/* ============================================
   Search Active State - Mobile
   ============================================ */

@media (max-width: 768px) {
    /* When search is active, hide tabs */
    #search-section[style*="display: block"],
    #search-section[style*="display: flex"] {
        width: 100% !important;
    }
    
    /* Search cancel button */
    #search-cancel-btn {
        padding: var(--p-space-200) !important;
        cursor: pointer !important;
    }
    
    #search-cancel-btn:hover {
        background-color: var(--p-color-bg-surface-hover) !important;
        border-radius: var(--p-border-radius-200) !important;
    }
}

/* ============================================
   Scrollbar Styling
   ============================================ */

@media (max-width: 768px) {
    .Polaris-Tabs__ButtonWrapper::-webkit-scrollbar {
        height: 4px;
    }
    
    .Polaris-Tabs__ButtonWrapper::-webkit-scrollbar-track {
        background: var(--p-color-bg-surface-secondary);
    }
    
    .Polaris-Tabs__ButtonWrapper::-webkit-scrollbar-thumb {
        background: var(--p-color-border);
        border-radius: 2px;
    }
}

/* ============================================
   Touch Improvements
   ============================================ */

@media (max-width: 768px) {
    /* Better touch targets */
    .Polaris-Tabs__Tab,
    #filter-button,
    #sort-button {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    
    /* Touch feedback */
    .Polaris-Tabs__Tab:active {
        opacity: 0.7;
    }
    
    #filter-button:active,
    #sort-button:active {
        transform: scale(0.95);
    }
}

/* ============================================
   Landscape Mobile
   ============================================ */

@media (max-width: 768px) and (orientation: landscape) {
    .Polaris-IndexFilters__IndexFiltersWrapper {
        min-height: 60px !important;
    }
    
    .Polaris-Filters__Container .Polaris-InlineStack {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }
    
    #tabs-section {
        flex: 1 1 auto !important;
        width: auto !important;
    }
    
    .Polaris-IndexFilters__ButtonWrap {
        flex: 0 0 auto !important;
        width: auto !important;
    }
}

/* ============================================
   Fix for Specific Issues
   ============================================ */

/* Prevent tabs from being cut off */
.Polaris-Tabs__Outer {
    overflow: visible !important;
}

.Polaris-Tabs__Wrapper {
    overflow: visible !important;
}

/* Ensure buttons are always visible */
.Polaris-IndexFilters__ButtonWrap {
    z-index: 1 !important;
}

/* Prevent content from overlapping */
.Polaris-Filters__Container {
    overflow: visible !important;
}

.Polaris-Box {
    overflow: visible !important;
}

/* Fix for InlineStack wrapping */
.Polaris-InlineStack[style*="flex-wrap: inherit"] {
    flex-wrap: wrap !important;
}

/* ============================================
   Force Filter Button Visibility
   ============================================ */

/* Ensure buttons are ALWAYS visible - override any JS hiding */
.Polaris-IndexFilters__ButtonWrap {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#filter-toggle-wrapper {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#filter-button {
    display: inline-flex !important;
    visibility: visible !important;
}

/* Override any inline hiding styles */
.Polaris-IndexFilters__ButtonWrap[style*="display: none"],
#filter-toggle-wrapper[style*="display: none"] {
    display: flex !important;
}