/* Kaart */
.s2b-exposed.card {
  margin-bottom: 16px;
  background: var(--bs-body-bg, #fff);
}

/* =========================
   TOPBAR GRID (6 controls)
   Phone:   2 kolommen → 3 rijen (2–2–2)
   Tablet:  3 kolommen → 2 rijen (3–3)
   Desktop: 6 kolommen → 1 rij     (6)
   ========================= */
.s2b-topbar{
  margin-bottom: 10px;
}
.s2b-topgrid{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0,1fr));    /* <576px: 2 kolommen */
  align-items: end;
  min-width: 0;
}
@media (min-width: 576px){
  .s2b-topgrid{ grid-template-columns: repeat(3, minmax(0,1fr)); } /* 576–991px: 3 kolommen */
}
@media (min-width: 992px){
  .s2b-topgrid{ grid-template-columns: repeat(6, minmax(0,1fr)); } /* ≥992px: 6 kolommen op één lijn */
}
.s2b-topgrid > .s2b-cell{ min-width: 0; }

/* Label boven input + netjes wrappen (altijd) */
.s2b-cell .form-item{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  margin: 0;
}
.s2b-cell .form-item > label{
  display: block;
  margin: 0 0 .35rem 0;
  font-weight: 700;
  font-size: 1.05rem;
  white-space: normal;
  overflow-wrap: anywhere;
}
.s2b-cell .form-item > .form-autocomplete,
.s2b-cell .form-item > select,
.s2b-cell .form-item > input:not([type="checkbox"]):not([type="radio"]){
  width: 100%;
  min-width: 0;
  border-radius: .5rem;
}

/* Favoriet: compacte checkbox (label naast vinkje) */
.s2b-cell--favoriet .form-item{
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.s2b-cell--favoriet .form-item > label{
  margin: 0;
  white-space: nowrap;
  font-size: .95rem;
}
.s2b-cell--favoriet .form-check{ margin: 0; }

/* ===== Advanced (range) panel ===== */
#s2b-advanced{
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: .5rem;
  background: var(--bs-tertiary-bg, #f8f9fa);
  padding: 12px;
  margin-bottom: 10px;
  transition: padding .25s ease, margin .25s ease, border-width .25s ease;
  overflow: hidden;
}
#s2b-advanced[data-open="0"]{
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  border-width: 0;
}
#s2b-advanced[data-open="0"] .s2b-ranges{ display: none; }

.s2b-ranges{
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px){
  .s2b-ranges{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px){
  .s2b-ranges{ grid-template-columns: repeat(5, 1fr); }
}

.s2b-range{
  background: #e9eef3;
  border: 1px solid var(--bs-border-color, #d0d7de);
  border-radius: .6rem;
  padding: 12px;
}
.s2b-range .form-item > label{ font-weight: 700; }
.s2b-range .container-inline{ display: grid; gap: 10px; }
.s2b-range .container-inline > .form-item{ display: block; margin-right: 0; }

/* Min/Max naast elkaar in range-tegels */
.s2b-range fieldset > .fieldset-wrapper,
.s2b-range .container-inline{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
}
.s2b-range .fieldset-wrapper .form-item,
.s2b-range .container-inline > .form-item{ min-width: 0; margin: 0; }
.s2b-range .form-control{ min-width: 0; width: 100%; white-space: nowrap; }
@media (max-width: 380px){
  .s2b-range .form-control{ padding-left: .5rem; padding-right: .5rem; }
  .s2b-range fieldset > .fieldset-wrapper{ gap: 6px; }
}

/* Inputs algemeen binnen exposed form */
.s2b-exposed input[type="text"],
.s2b-exposed input[type="search"],
.s2b-exposed input[type="number"],
.s2b-exposed select{
  width: 100%;
  border-radius: .5rem;
}

/* ===== Onderste actie-balk ===== */
.s2b-actions{
  display: flex;
  align-items: center;
  gap: 8px;
}
.s2b-actions__left .form-actions{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.s2b-actions__left .form-actions .s2b-clear{ margin-left: 0 !important; }
.s2b-actions__right{
  margin-left: auto;
  display: flex;
  align-items: center;
}

/* Buttons breken niet */
.s2b-exposed .btn{ white-space: nowrap; }

/* Verberg origin widgets als proxy gebruikt wordt */
.s2b-hidden-origin{ position: absolute !important; left: -9999px !important; }

/* Operator-selects definitief weg */
.s2b-range select[name$="[op]"],
.s2b-range select[name$="_op"],
.s2b-range .form-item--operator,
.s2b-range .form-type-select.operator{ display: none !important; }

/* Verberg lege range-kaartjes */
.s2b-range:not(:has(input:not([type="hidden"]), select, textarea)){ display: none !important; }

/* ——— Forceer label-boven bij Makelaar & Favoriet ——— */

/* 1) Geldt altijd: label boven, control eronder */
.s2b-cell--makelaar .form-item,
.s2b-cell--favoriet .form-item{
  display: flex;
  flex-direction: column;     /* label -> control */
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.s2b-cell--makelaar .form-item > label,
.s2b-cell--favoriet .form-item > label{
  order: 0;
  display: block;
  margin: 0 0 .35rem 0;
  font-weight: 700;
  white-space: normal;
}

/* Makelaar: select/auto-complete onder label */
.s2b-cell--makelaar .form-item > select,
.s2b-cell--makelaar .form-item > .form-autocomplete{ order: 1; width: 100%; }

/* 2) Favoriet kan Bootstrap .form-check gebruiken: label óók boven de checkbox */
.s2b-cell--favoriet .form-check{
  width: 100%;
  display: flex;
  flex-direction: column;     /* label -> checkbox */
  align-items: flex-start;
  gap: 6px;
}
.s2b-cell--favoriet .form-check-label{
  order: 0;
  margin: 0 0 .25rem 0;
  font-weight: 700;
}
.s2b-cell--favoriet .form-check-input{
  order: 1;
  margin-left: 0;
}

/* 3) Overrulet eventueel eerdere regel die de favoriet-rij horizontaal zette */
.s2b-cell--favoriet .form-item{ flex-direction: column !important; }
/* Normaliseer labelgroottes in de exposed filter topbar */
.s2b-exposed .s2b-topgrid .form-label,
.s2b-exposed .s2b-topgrid .form-check-label {
  font-size: 1rem;     /* zelfde als base */
  line-height: 1.25;
}

/* Zeker weten dat Favoriet niet kleiner valt */
.s2b-exposed .s2b-cell--favoriet .form-check-label,
.s2b-exposed .s2b-cell--favoriet label {
  font-size: 1rem;
  font-weight: 500;     /* optioneel, voor consistentie */
  margin-bottom: .25rem;
}
/* === PATCH: labels in topbar overal gelijk, incl. Favoriet === */
.s2b-exposed .s2b-topgrid .form-item > label,
.s2b-exposed .s2b-topgrid .form-check > .form-check-label,
.s2b-exposed .s2b-topgrid legend{
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.25;
  margin-bottom: .35rem;
}

/* Favoriet: label boven checkbox, zelfde typografie als andere labels */
.s2b-exposed .s2b-cell--favoriet .form-item{
  display: flex;
  flex-direction: column !important;
  align-items: flex-start;
  gap: 6px;
}
.s2b-exposed .s2b-cell--favoriet .form-check{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.s2b-exposed .s2b-cell--favoriet .form-check > .form-check-label{
  order: 0;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  margin: 0 0 .25rem 0;
}
.s2b-exposed .s2b-cell--favoriet .form-check-input{
  order: 1;
  margin-left: 0;
}
/* Titelbalk met toggle rechts */
.s2b-titlebar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:10px 0 12px;
}
.s2b-titlebar .page-title{
  margin:0;
  font-size:clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  font-weight:600;
}
.s2b-titlebar__actions{
  display:flex;
  align-items:center;
  gap:8px;
}

/* Optioneel: op hele smalle schermen iets compacter */
@media (max-width:576px){
  .s2b-titlebar{ gap:8px; }
  .s2b-titlebar__actions{ gap:6px; }
}

/* ============================================
   1. Zelfde tegel-stijl voor bovenste rij
   ============================================ */

/* De "tegels" onder zijn .s2b-range; geef .s2b-cell hetzelfde gevoel */
.s2b-exposed .s2b-topgrid {
  gap: .75rem;
}

.s2b-exposed .s2b-cell {
  background: #edf2f7;          /* zelfde soort grijs als de blokken eronder */
  border-radius: 14px;
  padding: .45rem .75rem .55rem; /* ruimte rond label + veld */
}

/* Label bovenin iets los van het veld */
.s2b-exposed .s2b-cell > label,
.s2b-exposed .s2b-cell .form-item > label {
  display: block;
  margin-bottom: .15rem;
  font-weight: 600;
}

/* Zorg dat de input/select niet tegen de randen plakt */
.s2b-exposed .s2b-cell select,
.s2b-exposed .s2b-cell input {
  margin-top: .1rem;
}

/* ============================================
   2. Dark mode: kaart + tegels donkerder maken
   ============================================ */

/* Pas deze wrapper indien nodig aan:
   - gebruik body.is-dark, of .schepen-container.is-dark,
   - wat jij nu voor dark mode gebruikt.                      */
body.is-dark .s2b-exposed,
.schepen-container.is-dark .s2b-exposed {
  background: #0b1120;           /* donkerder achtergrond voor hele filterkaart */
}

/* Bovenste rij + blokken eronder dezelfde donkere tegelkleur geven */
body.is-dark .s2b-exposed .s2b-cell,
body.is-dark .s2b-exposed .s2b-range,
.schepen-container.is-dark .s2b-exposed .s2b-cell,
.schepen-container.is-dark .s2b-exposed .s2b-range {
  background: #111827;
  border-radius: 14px;
}

/* Inputs/selects mogen zelf zwart/donker blijven */
body.is-dark .s2b-exposed select,
body.is-dark .s2b-exposed input,
.schepen-container.is-dark .s2b-exposed select,
.schepen-container.is-dark .s2b-exposed input {
  background: #020617;
  color: #f9fafb;
  border-color: #020617;
}
/* Bovenste rij labels (Trefwoord, Scheepstype, Scheepsmakelaar, Favoriet, Sorteren, Order)
   nooit afbreken op twee regels */
.s2b-exposed .s2b-topgrid .s2b-cell > label,
.s2b-exposed .s2b-topgrid .s2b-cell .form-item > label {
  white-space: nowrap;
  font-size: 0.85rem; /* eventueel iets kleiner zodat "Scheepsmakelaar" beter past */
}

/* Als je de labels onder (Lengte/Breedte/Tonnage...) NIET wilt beïnvloeden,
   laat je .s2b-range met rust, dus geen extra rules daarvoor. */
/* ============================================
   Dark mode: labels in exposed filter lichter
   ============================================ */

/* Pas de selector aan je dark-class aan: 
   ik ga nu uit van body.is-dark óf .schepen-container.is-dark */
body.is-dark .s2b-exposed label,
body.is-dark .s2b-exposed .form-item__label,
.schepen-container.is-dark .s2b-exposed label,
.schepen-container.is-dark .s2b-exposed .form-item__label {
  color: #e5e7eb;      /* lichtgrijs, goed leesbaar op donker */
}
/* ============================================
   DARK MODE: labels & teksten in exposed filter
   ============================================ */

/* Bovenste rij + "Meer filters" blokken */
body.is-dark .s2b-exposed,
body.s2b-dark .s2b-exposed,
body[data-theme="dark"] .s2b-exposed,
.schepen-container.is-dark .s2b-exposed,
.s2b-theme-dark .s2b-exposed {
  color: #e5e7eb;
}

/* Alle labels (bovenste rij + Lengte/Breedte/Tonnage/Bouwjaar/Vraagprijs) */
body.is-dark .s2b-exposed label,
body.is-dark .s2b-exposed .form-item__label,
body.s2b-dark .s2b-exposed label,
body.s2b-dark .s2b-exposed .form-item__label,
body[data-theme="dark"] .s2b-exposed label,
body[data-theme="dark"] .s2b-exposed .form-item__label,
.schepen-container.is-dark .s2b-exposed label,
.schepen-container.is-dark .s2b-exposed .form-item__label,
.s2b-theme-dark .s2b-exposed label,
.s2b-theme-dark .s2b-exposed .form-item__label {
  color: #e5e7eb !important;
}

/* Kleine tekst binnen de blokken (bijv. "Min" / "Max") */
body.is-dark .s2b-exposed .s2b-range span,
body.s2b-dark .s2b-exposed .s2b-range span,
body[data-theme="dark"] .s2b-exposed .s2b-range span,
.schepen-container.is-dark .s2b-exposed .s2b-range span,
.s2b-theme-dark .s2b-exposed .s2b-range span {
  color: #d1d5db;
}

/* Placeholders in inputs ook wat lichter */
body.is-dark .s2b-exposed input::placeholder,
body.s2b-dark .s2b-exposed input::placeholder,
body[data-theme="dark"] .s2b-exposed input::placeholder,
.schepen-container.is-dark .s2b-exposed input::placeholder,
.s2b-theme-dark .s2b-exposed input::placeholder {
  color: #9ca3af;
  opacity: 1;
}
/* Bovenste rij: alle cellen en labels gelijk uitlijnen */
.s2b-exposed .s2b-topgrid .s2b-cell {
  display: flex;
  flex-direction: column;
}

/* Alle labels in de bovenste rij exact dezelfde marge en lijnhoogte */
.s2b-exposed .s2b-topgrid .s2b-cell label {
  display: block;
  margin: 0 0 0.15rem 0;  /* geen extra top-marge */
  line-height: 1.2;
}

/* Form-item in de cellen: geen gekke extra marges (ook voor Favoriet) */
.s2b-exposed .s2b-topgrid .s2b-cell .form-item,
.s2b-exposed .s2b-topgrid .s2b-cell .js-form-item {
  margin-top: 0;
  margin-bottom: 0;
}
/* Specifiek: Favoriet-label gelijk trekken met de rest */
.s2b-exposed .s2b-cell--favoriet > label,
.s2b-exposed .s2b-cell--favoriet .form-item > label,
.s2b-exposed .s2b-cell--favoriet .js-form-item > label {
  position: relative;
  top: 2px;          /* eventueel 1px maken als 2 te veel is */
}

/* Voor de zekerheid ook eventuele marges neutraliseren */
.s2b-exposed .s2b-cell--favoriet .form-item,
.s2b-exposed .s2b-cell--favoriet .js-form-item {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}