/* ========================================================================== Tab Bar Styles - Availability Calendar Modernises the #filterArea tab bar to match the Quick Search tab style defined in quick_search_modern.css (#quickSearchTableHeading). Structure: 1. CSS variables 2. Shared styles (logged-in + public) - Tab cells & visual styling - Legacy element cleanup 3. Public-only layout overrides (scoped via .qs-public on ) - Wrapper margin/padding shifts - Action button styling ========================================================================== */ /* -------------------------------------------------------------------------- 1. CSS variables (shared) -------------------------------------------------------------------------- */ #filterArea { --qs-brand: #CD3740; --qs-brand-light: #FEF2F2; --qs-border: #E2E8F0; --qs-text: #1E293B; --qs-text-secondary: #64748B; --qs-radius-sm: 6px; } /* -------------------------------------------------------------------------- 2. Shared styles (logged-in + public) Only visual/tab styling — no layout shifts -------------------------------------------------------------------------- */ /* ---- Tab cells ---- */ #filterArea td.tab { background: transparent !important; border: none !important; border-bottom: 2px solid transparent !important; padding: 12px 24px 10px !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 14px !important; cursor: pointer; vertical-align: bottom !important; white-space: nowrap !important; letter-spacing: 0.01em; text-align: left !important; } #filterArea td.tab span { margin: 0 !important; padding: 0 !important; font-size: 13px !important; font-family: Arial, Helvetica, sans-serif !important; } /* Prevent the txtb class from overriding tab font */ #filterArea td.tab.txtb { font-family: Arial, Helvetica, sans-serif !important; font-weight: 400 !important; } /* Active tab */ #filterArea td.tab.tabActive { border-bottom: 2px solid var(--qs-brand) !important; color: var(--qs-brand) !important; font-weight: 400 !important; } #filterArea td.tab.tabActive span { color: var(--qs-brand) !important; font-weight: 400 !important; } /* Inactive tab */ #filterArea td.tab.tabInactive { color: var(--qs-text-secondary) !important; font-weight: 300 !important; border-bottom: 2px solid transparent !important; } #filterArea td.tab.tabInactive span { color: var(--qs-text-secondary) !important; font-weight: 300 !important; } #filterArea td.tab.tabInactive:hover { color: var(--qs-text) !important; background: var(--qs-brand-light) !important; border-bottom-color: var(--qs-border) !important; } #filterArea td.tab.tabInactive:hover span { color: var(--qs-text) !important; } /* Override legacy border classes */ #filterArea .redOverline { border-top: none !important; } /* ---- Legacy element cleanup (shared) ---- */ /* Hide the 5px spacer column before the first tab */ #filterArea > table.colDk td > table col:first-child { width: 0 !important; } /* Hide spacer cell (5px column td inside inner tab table) */ #filterArea > table.colDk td > table td.bb.printCollapse.redUnderline { display: none !important; } /* -------------------------------------------------------------------------- 3. Logged-in-only overrides (NOT public) Pull just the tab table out of the 70px parent wrapper so it aligns with the Quick Search tab bar position. -------------------------------------------------------------------------- */ html:not(.qs-public) #filterArea > table.colDk { background: #FFFFFF !important; border: none !important; border-collapse: collapse !important; width: calc(100% + 70px) !important; margin-left: -70px !important; padding-left: 16px !important; margin-bottom: 10px !important; position: relative !important; } html:not(.qs-public) #filterArea > table.colDk::after { display: none !important; } /* Reset cell backgrounds for logged-in tab bar */ html:not(.qs-public) #filterArea > table.colDk td { background: transparent !important; border: none !important; } /* Restore active tab underline */ html:not(.qs-public) #filterArea > table.colDk td.tab.tabActive { border-bottom: 2px solid var(--qs-brand) !important; } html:not(.qs-public) #filterArea > table.colDk td.tab.tabInactive { border-bottom: 2px solid transparent !important; } /* Inner tab table — auto width so tabs shrink to fit */ html:not(.qs-public) #filterArea > table.colDk td > table { background: transparent !important; width: auto !important; } html:not(.qs-public) #filterArea > table.colDk td > table col { width: auto !important; } /* Hide the 1px spacer row at top */ html:not(.qs-public) #filterArea > table.colDk > tbody > tr:first-child td { height: 0 !important; font-size: 0; line-height: 0; padding: 0 !important; } html:not(.qs-public) #filterArea > table.colDk > tbody > tr:first-child td img { display: none !important; } /* Hide the spacer image and
after the tab table */ html:not(.qs-public) #filterArea > table.colDk + img { display: none !important; } html:not(.qs-public) #filterArea > table.colDk + img + br { display: none !important; } /* -------------------------------------------------------------------------- 4. Public-only overrides (scoped via .qs-public on ) Applied when the page is loaded inside an iframe (public pages). The inline