/* IndexTable specific styles for Booking page */

/* Cancel button styling in search field */
.Polaris-TextField__Suffix {
    color: var(--p-color-text);
    font-size: var(--p-font-size-300);
    line-height: var(--p-font-line-height-400);
    cursor: pointer;
    user-select: none;
}

.Polaris-TextField__Suffix:hover {
    color: var(--p-color-text-hover, var(--p-color-text));
}

/* Sort and Filter button tooltips */
.Polaris-Tooltip-TooltipOverlay__Content span span::after {
    content: "Search and filter (F)" !important;
}

.Polaris-Tooltip-TooltipOverlay__Content span::after {
    content: "Sort" !important;
}

/* IndexTable row hover effect */
.Polaris-IndexTable__TableRow:hover {
    background-color: var(--p-color-bg-surface-hover);
}

/* IndexTable cell padding */
.Polaris-IndexTable__TableCell {
    padding: var(--p-space-table-cell-padding, var(--p-space-150));
}

/* ============================================
   Sort Popover Styling (Matching React App)
   ============================================ */

/* Sort Popover Container */
#sort-popover.Polaris-Popover {
    z-index: var(--p-z-index-5, 513);
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: var(--p-space-100);
    background: var(--p-color-bg-surface);
    border: 1px solid var(--p-color-border);
    border-radius: var(--p-border-radius-200);
    box-shadow: var(--p-shadow-400);
    min-width: 200px;
    max-width: 240px;
    overflow: hidden;
}

.Polaris-Popover__Content {
    padding: 0;
}

/* Sort by Header */
#sort-popover .Polaris-Box > div:first-child {
    padding: var(--p-space-200) var(--p-space-300);
    border-bottom: 1px solid var(--p-color-border-secondary);
}

#sort-popover .Polaris-Box > div:first-child .Polaris-Text--root {
    color: var(--p-color-text);
    font-size: var(--p-font-size-325);
    line-height: var(--p-font-line-height-400);
    font-weight: var(--p-font-weight-medium);
    margin: 0;
    padding: 0;
}

/* Radio Buttons Container */
#sort-popover .Polaris-Stack {
    padding: var(--p-space-100) 0;
    gap: 0;
}

/* Sort Field Option Labels */
.sort-field-option {
    width: 100%;
    text-align: left;
    padding: var(--p-space-200) var(--p-space-300);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--p-space-200);
    transition: background-color var(--p-motion-duration-150) var(--p-motion-ease);
    line-height: var(--p-font-line-height-400);
    margin: 0;
    border: none;
    background: transparent;
}

.sort-field-option:hover {
    background-color: var(--p-color-bg-surface-hover);
}

.sort-field-option:active {
    background-color: var(--p-color-bg-surface-active);
}

/* Radio Button Input */
.sort-field-option input[type="radio"] {
    width: 1rem;
    height: 1rem;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: var(--p-color-border-focus);
}

.sort-field-option input[type="radio"]:checked {
    accent-color: var(--p-color-border-focus);
}

/* Radio Button Label Text */
.sort-field-option .Polaris-Text--root {
    color: var(--p-color-text);
    font-size: var(--p-font-size-325);
    line-height: var(--p-font-line-height-400);
    margin: 0;
    padding: 0;
    flex: 1;
}

.sort-field-option input[type="radio"]:checked + .Polaris-Text--root {
    color: var(--p-color-text);
    font-weight: var(--p-font-weight-medium);
}

/* Direction Buttons Section */
#sort-popover .Polaris-Box > div:last-child {
    border-top: 1px solid var(--p-color-border-secondary);
    padding: var(--p-space-200) var(--p-space-300);
}

#sort-direction-buttons {
    width: 100%;
    display: flex;
    gap: var(--p-space-200);
    flex-direction: column;
    align-items: stretch;
}

/* Ensure proper gap between direction buttons */
#sort-direction-buttons .sort-direction-btn + .sort-direction-btn {
    margin-top: var(--p-space-200);
}

/* Sort Direction Buttons */
.sort-direction-btn {
    width: 100%;
    padding: var(--p-space-150) var(--p-space-300);
    border: 1px solid var(--p-color-border);
    border-radius: var(--p-border-radius-200);
    background: var(--p-color-bg-surface);
    cursor: pointer;
    transition: background-color var(--p-motion-duration-150) var(--p-motion-ease),
                border-color var(--p-motion-duration-150) var(--p-motion-ease),
                color var(--p-motion-duration-150) var(--p-motion-ease);
    color: var(--p-color-text);
    font-size: var(--p-font-size-325);
    line-height: var(--p-font-line-height-400);
    font-weight: var(--p-font-weight-regular);
    text-align: center;
    white-space: nowrap;
    outline: none;
    margin: 0;
    box-sizing: border-box;
}

.sort-direction-btn:hover:not(.active) {
    background-color: var(--p-color-bg-surface-hover);
    border-color: var(--p-color-border-hover);
}

.sort-direction-btn.active {
    background-color: var(--p-color-bg-surface-selected) !important;
    border-color: var(--p-color-border-focus) !important;
    color: var(--p-color-text) !important;
    font-weight: var(--p-font-weight-medium);
}

.sort-direction-btn:focus {
    outline: 2px solid var(--p-color-border-focus);
    outline-offset: 2px;
}

.sort-direction-btn:not(.active) {
    background-color: var(--p-color-bg-surface) !important;
    border-color: var(--p-color-border) !important;
}

/* Filter and Sort button icons */
.Polaris-IndexFilters__ActionWrap .Polaris-Icon {
    fill: var(--p-color-icon);
}

.Polaris-IndexFilters__ActionWrap .Polaris-Icon:hover {
    fill: var(--p-color-icon-hover);
}

/* Ensure popover doesn't get cut off */
.Polaris-IndexFilters__ButtonWrap {
    position: relative;
    overflow: visible;
}

/* ============================================
   IndexTable Header Styling (Matching React App)
   ============================================ */

/* Table Headers - Let Polaris CSS (polaris-react.css) handle defaults:
   Polaris default styles from polaris-react.css:
   - background: var(--p-color-bg-surface-secondary)
   - color: var(--p-color-text-secondary)
   - font-size: var(--p-font-size-300)
   - padding: var(--p-space-200) var(--p-space-150)
   - font-weight: var(--p-font-weight-medium)
   
   We only add bottom border to match React app visual
*/

/* Header container - add bottom border separator */
.Polaris-IndexTable__StickyTableHeader {
    border-bottom: 1px solid var(--p-color-border-secondary) !important;
}

.Polaris-IndexTable__StickyTableHeadings {
    border-bottom: 1px solid var(--p-color-border-secondary) !important;
}

/* Table headers - inherit Polaris defaults, only add bottom border */
.Polaris-IndexTable__TableHeading {
    /* Remove conflicting borders - let Polaris handle background/color */
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--p-color-border-secondary) !important;
    /* Background: var(--p-color-bg-surface-secondary) from Polaris */
    /* Color: var(--p-color-text-secondary) from Polaris */
}

/* Table header text - ensure proper inheritance */
.Polaris-IndexTable__TableHeading .Polaris-Text--root {
    margin: 0;
    padding: 0;
    /* Color and font-size inherited from parent (.Polaris-IndexTable__TableHeading) */
    /* Font-size: var(--p-font-size-300) from Polaris */
    font-family: var(--p-font-family-sans) !important;
}

/* Ensure table headers in thead have bottom border */
.Polaris-IndexTable__Table thead th.Polaris-IndexTable__TableHeading {
    border-bottom: 1px solid var(--p-color-border-secondary) !important;
    /* Background: var(--p-color-bg-surface-secondary) from Polaris */
}

/* Table header container */
.Polaris-IndexTable__StickyTableHeader .Polaris-IndexTable__StickyTableHeadings {
    border-bottom: 1px solid var(--p-color-border-secondary) !important;
}

/* ============================================
   Smooth Table Updates (Prevent Shake on Cancel)
   ============================================ */

/* Smooth transitions for table body updates */
.Polaris-IndexTable-ScrollContainer {
    will-change: contents;
    transition: opacity 0.1s ease;
}

.Polaris-IndexTable__Table tbody {
    transition: opacity 0.1s ease;
}

/* Prevent layout shift during table updates */
.Polaris-IndexTable__Table {
    contain: layout style;
}

/* Smooth rendering for table rows */
.Polaris-IndexTable__TableRow {
    transition: background-color 0.15s ease, opacity 0.1s ease;
}

/* ============================================
   Prevent Tabs Layout Shift on Cancel
   ============================================ */

/* Ensure tabs maintain horizontal layout during transitions */
.Polaris-Tabs__Outer {
    display: block;
    flex: 1;
    min-width: 0;
    width: auto;
    max-width: 100%;
    transition: opacity 0.15s ease, flex 0.15s ease;
}

.Polaris-Tabs__Wrapper {
    width: 100%;
    display: block;
}

.Polaris-Tabs__ButtonWrapper {
    width: 100%;
}

.Polaris-Tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100%;
}

/* Ensure tabs don't wrap vertically */
.Polaris-Tabs__TabContainer {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Search section transition - hide immediately to prevent layout shift */
.Polaris-Filters__SearchField {
    transition: opacity 0.15s ease;
    min-width: 0;
}

/* Search section transition - hide immediately to prevent layout shift */
.Polaris-Filters__SearchField {
    transition: opacity 0.15s ease;
    min-width: 0;
}

/* Only apply display: none when explicitly hidden with a class, not when being shown */
.Polaris-Filters__SearchField.search-hidden {
    display: none !important;
    flex: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
}

/* ============================================
   Prevent Layout Shift During Loading
   ============================================ */

/* Ensure table container has stable height during loading */
.Polaris-IndexTable__IndexTableWrapper {
    min-height: 200px;
    transition: min-height 0.2s ease;
}

/* Loading panel styling */
.Polaris-IndexTable__LoadingPanel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--p-color-bg-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: opacity 0.2s ease;
}

.Polaris-IndexTable__LoadingPanelRow {
    display: flex;
    align-items: center;
    gap: var(--p-space-200);
}

/* Prevent content flash during initial load */
.Polaris-IndexTable-ScrollContainer {
    opacity: 1;
    transition: opacity 0.2s ease;
}

.Polaris-IndexTable-ScrollContainer.loading {
    opacity: 0.5;
}