/**
 * View: [opm-all-views] — switcher + filters. Embeds table + grid (their CSS
 * loads too). Token-driven.
 */

.opm-all-views { width: 100%; max-width: var(--opm-content-max); margin: 0 auto; }

/* ----- View switcher ----- */
.opm-switch { display: flex; flex-direction: column; gap: var(--opm-space-2); margin-bottom: var(--opm-space-6); }
.opm-switch__label { font-size: var(--opm-fs-xs); font-weight: var(--opm-fw-medium); }
.opm-switch__buttons { display: flex; gap: var(--opm-space-3); }
.opm-switch__btn {
  min-width: 120px; height: 50px;
  background: var(--opm-color-bg); color: var(--opm-color-ink);
  border: 1px solid var(--opm-color-ink);
  font: inherit; font-weight: var(--opm-fw-medium); font-size: var(--opm-fs-sm);
  text-transform: uppercase; cursor: pointer;
  transition: background var(--opm-duration) var(--opm-ease), color var(--opm-duration) var(--opm-ease);
}
.opm-switch__btn.is-active { background: var(--opm-color-ink); color: var(--opm-color-bg); }

/* ----- Filters ----- */
.opm-filters { margin-bottom: var(--opm-space-6); }
.opm-filters__row { display: flex; flex-wrap: wrap; gap: var(--opm-space-8); margin-bottom: var(--opm-space-5); }
.opm-filter__label { display: block; font-size: var(--opm-fs-sm); font-weight: var(--opm-fw-medium); margin-bottom: var(--opm-space-2); }
.opm-filter--range { flex: 1 1 320px; min-width: 280px; }

/* Range accent uses the final colour contract: category colour via
   --opm-color-accent, default fallback via --opm-color-default. */
.opm-range { position: relative; height: 24px; }
.opm-range input[type="range"] {
  position: absolute; inset: 0; width: 100%; margin: 0; height: 24px; z-index: 1;
  -webkit-appearance: none; appearance: none; background: none; pointer-events: none;
}
.opm-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 10px; height: 10px; border-radius: 0; background: var(--opm-color-accent, var(--opm-color-default)); border: 0; cursor: pointer;
}
.opm-range input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 10px; height: 10px; border: 0; border-radius: 0; background: var(--opm-color-accent, var(--opm-color-default)); cursor: pointer; }
/* Visual rail only — never intercept pointer events from the thumbs above it. */
.opm-range__track { position: absolute; left: 0; right: 0; top: 11px; height: 1px; background: var(--opm-color-border-soft); pointer-events: none; z-index: 0; }
.opm-range__fill { position: absolute; top: 0; height: 1px; background: var(--opm-color-accent, var(--opm-color-default)); pointer-events: none; }
.opm-range__vals { display: flex; justify-content: space-between; font-size: var(--opm-fs-sm); margin-top: var(--opm-space-1); }

/* Chips (rooms / floors / status) */
.opm-chips { display: flex; flex-wrap: wrap; gap: var(--opm-space-2); align-items: center; }
.opm-chip {
  min-height: 30px; padding: 0 var(--opm-space-3);
  background: var(--opm-color-bg); color: var(--opm-color-ink);
  border: 1px solid var(--opm-color-ink); font: inherit; font-size: var(--opm-fs-sm);
  cursor: pointer; display: inline-flex; align-items: center; gap: var(--opm-space-2);
  transition: background var(--opm-duration) var(--opm-ease), color var(--opm-duration) var(--opm-ease);
}
.opm-chip.is-active { background: var(--opm-color-ink); color: var(--opm-color-bg); }
[data-opm-filter="floors"] .opm-chip.is-active::after,
[data-opm-filter="status"] .opm-chip.is-active::after { content: "✕"; font-size: var(--opm-fs-2xs); }

/* Feature checkboxes — hidden until "+ WIĘCEJ FILTRÓW" is pressed.
   The [hidden] attr alone loses to the grid display, so override it explicitly. */
.opm-filters__row--features { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--opm-space-3) var(--opm-space-4); }
.opm-filters__row--features[hidden] { display: none; }
.opm-check { display: inline-flex; align-items: center; gap: var(--opm-space-2); font-size: var(--opm-fs-sm); cursor: pointer; }
.opm-check input {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; margin: 0; flex: 0 0 auto;
  border: 1px solid #000; border-radius: 0;
  background: var(--opm-color-bg); cursor: pointer;
  display: inline-grid; place-content: center;
}
.opm-check input::before {
  content: ""; width: 10px; height: 10px;
  transform: scale(0); transition: transform var(--opm-duration) var(--opm-ease);
  background: #000;
}
.opm-check input:checked::before { transform: scale(1); }

.opm-filters__actions { display: flex; align-items: center; gap: var(--opm-space-5); }
.opm-filters__more { background: none; border: 0; font: inherit; font-size: var(--opm-fs-sm); cursor: pointer; color: var(--opm-color-ink); }
.opm-filters__clear { background: none; border: 1px solid var(--opm-color-ink); padding: var(--opm-space-1) var(--opm-space-4); font: inherit; font-weight: var(--opm-fw-medium); font-size: var(--opm-fs-sm); text-transform: uppercase; cursor: pointer; }

/* ----- Panels ----- */
.opm-panel[hidden] { display: none; }
.opm-panel__placeholder {
  padding: var(--opm-space-12) var(--opm-space-6);
  text-align: center; color: var(--opm-color-ink-muted);
  border: 1px dashed var(--opm-color-border-soft);
}

/* ----- Footer ----- */
.opm-all-views__footer { display: flex; flex-direction: column; align-items: center; gap: var(--opm-space-3); margin-top: var(--opm-space-6); }
.opm-all-views__udev {
  display: inline-flex; align-items: center; gap: var(--opm-space-2);
  border: 1px solid var(--opm-color-border); padding: var(--opm-space-2) var(--opm-space-4);
  font-size: var(--opm-fs-2xs); cursor: pointer;
}

.opm-all-views .opm-switch__btn,
.opm-all-views .opm-chip,
.opm-all-views .opm-filters__more,
.opm-all-views .opm-filters__clear {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  box-shadow: none;
  outline: none;
}

.opm-all-views .opm-switch__btn {
  border: 1px solid #000;
  background: #fff;
  color: #000;
}
.opm-all-views .opm-switch__btn:hover,
.opm-all-views .opm-switch__btn:focus-visible,
.opm-all-views .opm-switch__btn.is-active,
.opm-all-views .opm-switch__btn.is-active:hover,
.opm-all-views .opm-switch__btn.is-active:focus-visible {
  border-color: #000;
  background: #000;
  color: #fff;
}

.opm-all-views .opm-chip {
  border: 1px solid #000;
  border-radius: 0;
  background: #fff;
  color: #000;
}
.opm-all-views .opm-chip:hover,
.opm-all-views .opm-chip:focus-visible,
.opm-all-views .opm-chip.is-active,
.opm-all-views .opm-chip.is-active:hover,
.opm-all-views .opm-chip.is-active:focus-visible {
  border-color: #000;
  background: #000;
  color: #fff;
}

.opm-all-views .opm-filters__clear {
  border: 1px solid #000;
  border-radius: 0;
  background: #fff;
  color: #000;
}
.opm-all-views .opm-filters__clear:hover,
.opm-all-views .opm-filters__clear:focus-visible {
  border-color: #000;
  background: #000;
  color: #fff;
}

.opm-all-views .opm-filters__more {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #000;
  box-shadow: none;
}
.opm-all-views .opm-filters__more:hover,
.opm-all-views .opm-filters__more:focus-visible {
  color: #000;
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.opm-all-views .opm-switch__btn:focus,
.opm-all-views .opm-switch__btn:focus-visible,
.opm-all-views .opm-switch__btn:active,
.opm-all-views .opm-chip:focus,
.opm-all-views .opm-chip:focus-visible,
.opm-all-views .opm-chip:active,
.opm-all-views .opm-filters__clear:focus,
.opm-all-views .opm-filters__clear:focus-visible,
.opm-all-views .opm-filters__clear:active,
.opm-all-views .opm-filters__more:focus,
.opm-all-views .opm-filters__more:focus-visible,
.opm-all-views .opm-filters__more:active {
  outline: none;
  box-shadow: none;
}