/* Wiring for the plain-HTML/CSS replacements of React's useState-driven
   open/close toggles in Header/MobileNav/NotificationCenter/HeaderActions.
   Not present in the original app (which conditionally rendered instead of
   hiding), so these rules live separately from the ported per-component
   CSS files rather than editing them. */

/* Mobile nav: checkbox-driven, see templates/layout.html. */
.mobile-nav-checkbox { display: none; }
.mobile-nav-checkbox:not(:checked) ~ .mobile-nav-overlay,
.mobile-nav-checkbox:not(:checked) ~ .mobile-nav { display: none; }
.mobile-nav-checkbox:checked ~ .mobile-nav-overlay { display: block; }
.mobile-nav-checkbox:checked ~ .mobile-nav { display: flex; left: 0; }
/* The toggle button lives inside header-left now (templates/layout.html),
   not as a sibling of the checkbox, so it can't be hidden via a ~
   selector while the drawer is open - the drawer's overlay already sits
   above it (z-index) and has its own explicit close (X) button, so a
   visible-but-covered hamburger underneath is harmless. */
label.mobile-nav-toggle { display: none; }
@media (max-width: 768px) {
  label.mobile-nav-toggle { display: block; }
}

/* Header actions / notification bell: native <details> disclosure instead
   of a JS popover hook. Hide the default marker triangle and let the
   existing .header-actions-popover/.notification-panel absolute
   positioning show/hide via [open]. */
details.header-actions-menu, details.notification-center { position: relative; }
details.header-actions-menu > summary,
details.notification-center > summary {
  list-style: none;
  cursor: pointer;
}
details.header-actions-menu > summary::-webkit-details-marker,
details.notification-center > summary::-webkit-details-marker {
  display: none;
}
details.header-actions-menu:not([open]) > .header-actions-popover,
details.notification-center:not([open]) > .notification-panel {
  display: none;
}
/* .header-actions-popover is `position: fixed` in HeaderActions.css, sized
   for React's JS-computed menuStyle (usePopover) - with no top/left set that
   resolves to its in-flow static position rather than actually anchoring
   under the button. Same fix as .th-filter-menu below: absolute against the
   <details>'s own relative positioning. */
details.header-actions-menu > .header-actions-popover {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.25rem;
}

/* Bulk-actions bar (Playlists and Missing Tracks, DESIGN.md §8.6): hidden
   until at least one row checkbox is checked, via :has() rather than
   JS-tracked selection state. Keyed off ".bulk-select-scope" - a real
   <form> on the Playlists page (whose row actions never nest a <form> of
   their own), but a plain <div> on Missing Tracks, whose per-track/
   per-playlist actions (Retry, Rematch, etc.) are plain hx-post buttons
   using hx-include/hx-vals specifically so a real wrapping <form> there
   wouldn't illegally nest inside them. DataTable.css sets this same
   selector's positive (checked) state to `display: flex` - this file only
   needs the higher-specificity hidden-by-default half. */
.bulk-select-scope > .bulk-actions-bar {
  display: none;
}
.bulk-select-scope:has(input.row-select:checked) > .bulk-actions-bar {
  display: flex;
}

/* Column-header filter popovers (Playlists and Collections tables):
   <details>/<summary> instead of React's JS-positioned document.body
   portal (usePopover in PlaylistsPage.tsx). This overrides .th-filter-menu
   below to `position: absolute` (anchored under its own header cell)
   against .th-filter's own `position: relative`.
   ponytail: fixed top-left corner of the header cell rather than
   React's flip-to-stay-onscreen logic - fine for a table where headers sit
   near the top of the viewport already; revisit if a header near the
   bottom/edge of the page ever clips the popover. */
details.th-filter { position: relative; }
details.th-filter > summary {
  list-style: none;
  cursor: pointer;
}
details.th-filter > summary::-webkit-details-marker { display: none; }
details.th-filter > .th-filter-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.25rem;
}
details.th-filter:not([open]) > .th-filter-menu {
  display: none;
}

/* Visual styling for the popovers above - originally Playlists-only
   (PlaylistsPage.css), moved here once the Collections table adopted the
   same pattern, so both pages share one copy. */
.th-with-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.375rem;
}

.th-label {
  display: inline-flex;
  align-items: center;
}

.th-filter {
  position: relative;
  display: inline-flex;
}

.th-filter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-weight: 400;
}

.th-filter-btn:hover,
.th-filter-btn.active {
  color: var(--primary-color);
  background: rgba(47, 143, 255, 0.1);
}

.th-filter-menu {
  position: fixed;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 170px;
  padding: 0.25rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--card-shadow);
  font-weight: 400;
  text-transform: none;
}

.th-filter-option {
  padding: 0.375rem 0.625rem;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 0.8125rem;
  text-align: left;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.th-filter-option:hover {
  background: var(--surface-hover);
}

.th-filter-option.active {
  color: var(--primary-color);
  font-weight: 600;
}

.th-filter-menu-range {
  padding: 0.5rem;
  gap: 0.5rem;
}

.th-filter-menu-range label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: none;
}

.th-filter-menu-range input {
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--text-primary);
  font-size: 0.8125rem;
  width: 100px;
}

/* Expando-toggle caret (Missing Tracks/Missing Films/TV Shows count
   badges, home.html and collection_list.html): the badge toggles a
   sibling row's visibility via JS, not a native <details> disclosure, so
   there's no built-in open/closed marker - this chevron flips in step
   with the button's own .is-open class (set by the same click handler
   that toggles the row) to give the same "what did I click, is it open"
   affordance a <details> arrow would. */
.expando-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.expando-caret {
  transition: transform 0.15s ease;
}
.expando-toggle.is-open .expando-caret {
  transform: rotate(180deg);
}