/* ==========================================================================

   Premade Filter Bar (mw-*)

   Scope: only styles elements inside #premade-filter-bar

   Safe for Bootstrap Barrio / theme-agnostic

   ========================================================================== */



:root {

  --mw-bg: #ffffff;

  --mw-text: #111827;              /* gray-900 */

  --mw-muted: #6b7280;             /* gray-500 */

  --mw-border: #e5e7eb;            /* gray-200 */

  --mw-border-strong: #d1d5db;     /* gray-300 */

  --mw-chip-bg: #f8fafc;           /* gray-50 */

  --mw-chip-border: #e5e7eb;       /* gray-200 */

  --mw-chip-text: #111827;

  --mw-focus: #2563eb;             /* blue-600 */

  --mw-focus-ring: rgba(37, 99, 235, .35);

  --mw-shadow: 0 8px 28px rgba(0,0,0,.08);

  --mw-radius: 10px;

  --mw-radius-sm: 8px;

  --mw-radius-pill: 999px;

  --mw-gap: .5rem;

  --mw-z: 1200;

  --mw-font: inherit;

  --mw-font-size: 14px;

}



/* Dark mode (Bootstrap 5.3 data-bs-theme or class .dark) */

[data-bs-theme="dark"] #premade-filter-bar,

.dark #premade-filter-bar {

  --mw-bg: #0f172a;               /* slate-900 */

  --mw-text: #e5e7eb;             /* gray-200 */

  --mw-muted: #9ca3af;            /* gray-400 */

  --mw-border: #1f2937;           /* gray-800 */

  --mw-border-strong: #374151;    /* gray-700 */

  --mw-chip-bg: #111827;          /* gray-900 */

  --mw-chip-border: #374151;      /* gray-700 */

  --mw-chip-text: #e5e7eb;

  --mw-focus: #60a5fa;            /* blue-400 */

  --mw-focus-ring: rgba(96, 165, 250, .35);

  --mw-shadow: 0 8px 28px rgba(0,0,0,.45);

}



/* High contrast preference */

@media (prefers-contrast: more) {

  #premade-filter-bar {

    --mw-focus-ring: rgba(37, 99, 235, .6);

    --mw-border: #9ca3af;

    --mw-border-strong: #6b7280;

  }

}



/* Reduce motion */

@media (prefers-reduced-motion: reduce) {

  #premade-filter-bar * {

    transition: none !important;

    animation: none !important;

  }

}



/* Print: hide the filter bar */

@media print {

  #premade-filter-bar { display: none !important; }

}



/* ==========================================================================

   Root wrapper

   ========================================================================== */



#premade-filter-bar.mw-filter {

  position: relative;

  font-family: var(--mw-font);

  font-size: var(--mw-font-size);

  color: var(--mw-text);

  background: var(--mw-bg);

  border-bottom: 1px solid var(--mw-border);

  padding: .5rem 0;

}



/* Optional sticky behavior (opt-in with data-sticky="1") */

#premade-filter-bar[data-sticky="1"] {

  position: sticky;

  top: var(--mw-sticky-top, 0);

  z-index: var(--mw-z);

  backdrop-filter: saturate(180%) blur(6px);

}



/* Collapsed header row */

#premade-filter-bar .mw-filter__collapsed {

  display: flex;

  align-items: center;

  gap: .75rem;

  min-height: 36px;

}



/* Toggle button */

#premade-filter-bar .mw-filter__toggle {

  display: inline-flex;

  align-items: center;

  gap: .5rem;

  border: 1px solid var(--mw-border-strong);

  background: var(--mw-bg);

  border-radius: var(--mw-radius-pill);

  padding: .4rem .75rem;

  line-height: 1;

  cursor: pointer;

  font-weight: 600;

  color: var(--mw-text);

  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease, transform .06s ease;

  user-select: none;

}



#premade-filter-bar .mw-filter__toggle::after {

  content: "";

  display: inline-block;

  width: .45rem;

  height: .45rem;

  border-right: 2px solid currentColor;

  border-bottom: 2px solid currentColor;

  transform: rotate(45deg);

  transition: transform .15s ease;

  margin-left: .25rem;

  opacity: .8;

}



#premade-filter-bar .mw-filter__toggle[aria-expanded="true"]::after {

  transform: rotate(-135deg);

}



#premade-filter-bar .mw-filter__toggle:hover {

  border-color: var(--mw-border);

  box-shadow: 0 1px 0 rgba(0,0,0,.02);

}



#premade-filter-bar .mw-filter__toggle:active {

  transform: translateY(1px);

}



#premade-filter-bar .mw-filter__toggle:focus-visible {

  outline: 3px solid var(--mw-focus);

  outline-offset: 2px;

  box-shadow: 0 0 0 4px var(--mw-focus-ring);

}



/* Summary + chips (collapsed inline) */

#premade-filter-bar .mw-filter__summary {

  color: var(--mw-muted);

  font-size: 12px;

}



/* Chips list areas */

#premade-filter-bar .mw-filter__chips {

  display: flex;

  flex-wrap: wrap;

  gap: .5rem;

}



/* Chip */

#premade-filter-bar .mw-chip {

  appearance: none;

  border: 1px solid var(--mw-chip-border);

  background: var(--mw-chip-bg);

  color: var(--mw-chip-text);

  border-radius: var(--mw-radius-pill);

  padding: .25rem .6rem;

  font-size: 12px;

  line-height: 1.2;

  cursor: pointer;

  transition: border-color .15s ease, background .15s ease, transform .06s ease;

}



#premade-filter-bar .mw-chip:hover {

  border-color: var(--mw-border-strong);

}



#premade-filter-bar .mw-chip:active {

  transform: translateY(1px);

}



#premade-filter-bar .mw-chip:focus-visible {

  outline: 2px solid var(--mw-focus);

  outline-offset: 2px;

  box-shadow: 0 0 0 2px var(--mw-focus-ring);

}



/* Expanded area */

#premade-filter-bar .mw-filter__expanded {

  margin-top: .5rem;

}



/* Hidden handling */

#premade-filter-bar [hidden] {

  display: none !important;

}



/* Rows */

#premade-filter-bar .mw-filter__row {

  display: flex;

  align-items: center;

  gap: 1rem;

  flex-wrap: wrap;

  margin: .25rem 0;

}



#premade-filter-bar .mw-filter__row--chips {

  justify-content: space-between;

}



#premade-filter-bar .mw-filter__row--status {

  color: var(--mw-muted);

  font-size: 12px;

  min-height: 20px;

}



/* Clear all button */

#premade-filter-bar .mw-filter__clear-all {

  border: 1px solid var(--mw-border-strong);

  background: var(--mw-bg);

  color: var(--mw-text);

  border-radius: var(--mw-radius-pill);

  padding: .3rem .6rem;

  cursor: pointer;

  font-size: 12px;

}

#premade-filter-bar .mw-filter__clear-all:hover {

  border-color: var(--mw-border);

}

#premade-filter-bar .mw-filter__clear-all:focus-visible {

  outline: 2px solid var(--mw-focus);

  outline-offset: 2px;

  box-shadow: 0 0 0 2px var(--mw-focus-ring);

}



/* Controls (each dropdown group) */

#premade-filter-bar .mw-filter__control {

  position: relative;

  min-width: 170px;

}



#premade-filter-bar .mw-filter__control-toggle {

  border: 1px solid var(--mw-border-strong);

  background: var(--mw-bg);

  color: var(--mw-text);

  border-radius: var(--mw-radius);

  padding: .35rem .6rem;

  cursor: pointer;

  line-height: 1.2;

  min-height: 34px;

  width: 100%;

  text-align: left;

  transition: border-color .15s ease, box-shadow .15s ease;

}



#premade-filter-bar .mw-filter__control-toggle:focus-visible {

  outline: 2px solid var(--mw-focus);

  outline-offset: 2px;

  box-shadow: 0 0 0 2px var(--mw-focus-ring);

}



#premade-filter-bar .mw-filter__control-toggle[aria-expanded="true"] {

  border-color: var(--mw-border);

}



/* Dropdown */

#premade-filter-bar .mw-filter__dropdown {

  position: absolute;

  z-index: var(--mw-z);

  left: 0;

  top: calc(100% + 6px);

  min-width: 260px;

  max-width: 360px;

  max-height: 320px;

  overflow: auto;

  background: var(--mw-bg);

  border: 1px solid var(--mw-border-strong);

  border-radius: var(--mw-radius);

  box-shadow: var(--mw-shadow);

  padding: .5rem;

}



/* Dropdown placement helpers for RTL */

[dir="rtl"] #premade-filter-bar .mw-filter__dropdown {

  right: 0;

  left: auto;

}



/* Search input (for Tune/Box) */

#premade-filter-bar .mw-filter__search {

  width: 100%;

  padding: .45rem .6rem;

  margin-bottom: .5rem;

  font-size: 14px;

  color: var(--mw-text);

  background: var(--mw-bg);

  border: 1px solid var(--mw-border-strong);

  border-radius: var(--mw-radius-sm);

  transition: border-color .15s ease, box-shadow .15s ease;

}



#premade-filter-bar .mw-filter__search::placeholder {

  color: var(--mw-muted);

}



#premade-filter-bar .mw-filter__search:focus {

  border-color: var(--mw-focus);

  box-shadow: 0 0 0 3px var(--mw-focus-ring);

  outline: none;

}



/* List & options */

#premade-filter-bar .mw-filter__list {

  list-style: none;

  margin: 0;

  padding: 0;

}



#premade-filter-bar .mw-filter__option {

  display: block;

  padding: .38rem .5rem;

  border-radius: var(--mw-radius-sm);

  cursor: pointer;

  user-select: none;

  line-height: 1.2;

  transition: background .12s ease, border-color .12s ease;

}



#premade-filter-bar .mw-filter__option:hover {

  background: rgba(37, 99, 235, .06); /* subtle blue */

}



#premade-filter-bar .mw-filter__option.is-selected {

  background: rgba(37, 99, 235, .12);

  border: 1px solid rgba(37, 99, 235, .22);

}



/* Checkbox list (themes) */

#premade-filter-bar .mw-filter__list--checkbox .mw-filter__option {

  padding: .25rem .25rem;

}

#premade-filter-bar .mw-filter__list--checkbox label {

  display: flex;

  align-items: center;

  gap: .5rem;

  margin: 0;

  padding: .35rem .3rem;

  border-radius: var(--mw-radius-sm);

  cursor: pointer;

}

#premade-filter-bar .mw-filter__list--checkbox label:hover {

  background: rgba(37, 99, 235, .06);

}

#premade-filter-bar .mw-filter__list--checkbox input[type="checkbox"] {

  accent-color: var(--mw-focus);

}



/* Price fieldset (radios) */

#premade-filter-bar .mw-filter__fieldset {

  display: grid;

  gap: .4rem;

  margin: 0;

  padding: .1rem;

  border: 0;

}

#premade-filter-bar .mw-filter__fieldset label {

  display: flex;

  align-items: center;

  gap: .5rem;

  cursor: pointer;

  padding: .25rem .35rem;

  border-radius: var(--mw-radius-sm);

}

#premade-filter-bar .mw-filter__fieldset label:hover {

  background: rgba(37, 99, 235, .06);

}

#premade-filter-bar .mw-filter__fieldset input[type="radio"] {

  accent-color: var(--mw-focus);

}



/* Special-day toggle line */

#premade-filter-bar .mw-filter__toggleline {

  display: inline-flex;

  align-items: center;

  gap: .5rem;

  cursor: pointer;

  user-select: none;

}

#premade-filter-bar .mw-filter__checkbox {

  accent-color: var(--mw-focus);

}



/* Collapsed modifier */

#premade-filter-bar.mw-filter--collapsed .mw-filter__expanded {

  display: none;

}



/* Mobile adaptations */

@media (max-width: 768px) {

  #premade-filter-bar .mw-filter__control {

    min-width: 48%;

    flex: 1 1 48%;

  }

  #premade-filter-bar .mw-filter__dropdown {

    position: static;

    top: auto;

    left: auto;

    right: auto;

    min-width: 100%;

    max-width: none;

    max-height: 240px;

    box-shadow: none;

    border: 1px solid var(--mw-border);

    margin-top: .4rem;

  }

  #premade-filter-bar .mw-filter__row--chips {

    gap: .5rem;

  }

}



/* Narrow screens: stack controls full width */

@media (max-width: 520px) {

  #premade-filter-bar .mw-filter__control {

    min-width: 100%;

    flex-basis: 100%;

  }

}



/* Custom scrollbars (WebKit/Chromium) */

#premade-filter-bar .mw-filter__dropdown::-webkit-scrollbar {

  width: 10px;

}

#premade-filter-bar .mw-filter__dropdown::-webkit-scrollbar-track {

  background: transparent;

}

#premade-filter-bar .mw-filter__dropdown::-webkit-scrollbar-thumb {

  background: var(--mw-border-strong);

  border-radius: 8px;

  border: 2px solid transparent;

  background-clip: padding-box;

}



/* Focus states for interactive elements inside the bar */

#premade-filter-bar button:focus-visible,

#premade-filter-bar input:focus-visible {

  outline: 2px solid var(--mw-focus);

  outline-offset: 2px;

  box-shadow: 0 0 0 2px var(--mw-focus-ring);

}



/* Utility: subtle badge style (if needed later) */

#premade-filter-bar .mw-badge {

  display: inline-block;

  padding: .15rem .4rem;

  border-radius: var(--mw-radius-pill);

  border: 1px solid var(--mw-border-strong);

  background: var(--mw-chip-bg);

  color: var(--mw-chip-text);

  font-size: 11px;

  line-height: 1;

}

/* Keep the filter bar above the page, but not covering the grid. */

#premade-filter-bar {

  position: sticky; /* or your current sticky solution */

  top: 0;

  z-index: 40;      /* less than modal/zoom (which are higher), more than grid */

}



/* Only the visible dropdown surface should receive clicks. */

#premade-filter-bar .mw-filter__dropdown {

  position: absolute;

  z-index: 41;        /* above the bar, below any modal */

  pointer-events: auto;

}



/* Prevent any accidental overlay on top of the grid */

#premade-filter-bar, 

#premade-filter-bar * {

  pointer-events: auto;

}



/* Ensure the grid sits in its own stacking context */

.premade-grid {

  position: relative;

  z-index: 1;

}