/* Aufklappbares Eigenschaften-Filter-Panel – Technische Maße als Von–Bis.
   Folgt dem Farbschema des Filter-Moduls (maschinen_markt_filter.css): HELLE
   Basis, Dark-Mode ausschließlich über `html.mm-dark .mm_filter …` (gleiche
   Hex-Werte wie dort). Früher wurden hier direkt die Dark-Variablen
   (var(--color-text,#fff)) genutzt → im Hellmodus weiße Schrift auf Weiß. */
.mm_f_specs_body { padding: 4px 0 2px; }

/* Suchfeld mit „×"-Button zum schnellen Leeren. Der Wrapper traegt den Rand-
   Abstand (statt des Inputs), damit der Button sauber vertikal zentriert. */
.mm_f_specsearch_wrap { position: relative; margin: 6px 0; }
.mm_f_specsearch_wrap .mm_f_specsearch { margin: 0; padding-right: 30px; }
.mm_f_specsearch_clear {
  position: absolute; top: 50%; right: 5px; transform: translateY(-50%);
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px;
  background: transparent; color: #999; cursor: pointer;
  font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.mm_f_specsearch_clear:hover { color: #e85d26; background: #f0f0f0; }
.mm_f_specsearch_clear[hidden] { display: none; }

/* Hoehenbegrenzter Scroll-Container fuer die Maß-Zeilen – wie die Hersteller-
   Facette (.mm_f_scroll), damit das Panel nicht zu viel Platz einnimmt. */
.mm_f_specscroll { max-height: 300px; overflow-y: auto; padding-right: 6px; }
/* dezente Scrollbar */
.mm_f_specscroll { scrollbar-width: thin; scrollbar-color: #c7ccd3 transparent; }
.mm_f_specscroll::-webkit-scrollbar { width: 8px; }
.mm_f_specscroll::-webkit-scrollbar-thumb { background: #c7ccd3; border-radius: 4px; }
.mm_f_specscroll::-webkit-scrollbar-track { background: transparent; }
html.mm-dark .mm_filter .mm_f_specscroll,
.mm_filter.mm_dark .mm_f_specscroll { scrollbar-color: #4a4b52 transparent; }
html.mm-dark .mm_filter .mm_f_specscroll::-webkit-scrollbar-thumb,
.mm_filter.mm_dark .mm_f_specscroll::-webkit-scrollbar-thumb { background: #4a4b52; }

/* Chip-Leiste der aktiven Maß-Filter – direkt unter den Facetten-Chips. */
.mm_spec_chips { margin-top: 6px; }
/* .mm_filter_chips setzt display:flex → [hidden] greift sonst nicht (leere Lücke). */
.mm_spec_chips[hidden] { display: none; }

/* Zähler-Badge am Gruppenkopf: „wie viele Filter dieser Gruppe sind aktiv" */
.mm_filter .mm_f_group > summary { position: relative; padding-right: 34px; }
.mm_f_badge {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: #e85d26;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.mm_f_badge[hidden] { display: none; }

.mm_f_specs_hint {
  font-size: 12.5px;
  color: #777;
  margin: 4px 2px 8px;
  line-height: 1.45;
}

/* Zweizeilig: Merkmalsname oben über die volle Breite, darunter Wertebereich
   links und Von/Bis rechts.
   Vorher standen Name und Felder nebeneinander – bei der 320px-Sidebar blieben
   für den Namen nur ~150px, lange Merkmale wurden zu „Tischaufspannflä…"
   gekürzt. Das Grid mit `display: contents` am Label-Wrapper hebt b und
   .mm_f_specmeta auf die Grid-Ebene, sodass die Meta-Zeile die Höhe mit den
   Eingabefeldern teilt – die Zeile bleibt dadurch kompakt (~65px statt 93px,
   wenn Felder eine eigene Zeile bekämen). */
.mm_f_specrow {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "name name"
    "meta inputs";
  align-items: center;
  gap: 1px 8px;
  padding: 7px 0 8px;
  border-top: 1px solid #e6e6e6;
}
.mm_f_speclabel { display: contents; }
.mm_f_speclabel b { grid-area: name; }
.mm_f_specmeta { grid-area: meta; }
.mm_f_specinputs { grid-area: inputs; }
.mm_f_specrow:first-child { border-top: 0; }
/* Ohne diese Regel würde das explizite display:flex das [hidden]-Attribut
   überstimmen und die „weitere Maße"-Zeilen blieben immer sichtbar. */
.mm_f_specrow[hidden] { display: none; }

/* Aktive Zeile (von/bis gesetzt) hervorheben: dezenter Orange-Tint + Akzentstreifen
   links (inset box-shadow → kein Layout-Shift) + betontes Label. */
.mm_f_specrow_active {
  background: #fff6f2;
  box-shadow: inset 3px 0 0 #e85d26;
  border-radius: 4px;
  padding-left: 8px;
}
.mm_f_specrow_active .mm_f_speclabel b { color: #c04b1e; }
.mm_f_specrow_active .mm_f_von,
.mm_f_specrow_active .mm_f_bis { border-color: #e85d26; font-weight: 600; }

.mm_f_speclabel b {
  display: block;
  font-weight: 500;
  font-size: 13px;
  color: #333;
  /* Kein nowrap/ellipsis mehr: in der eigenen Zeile darf der Name umbrechen
     statt gekürzt zu werden. */
  overflow-wrap: anywhere;
  line-height: 1.3;
}
.mm_f_specmeta {
  font-size: 11px;
  color: #999;
  font-variant-numeric: tabular-nums;
}

.mm_f_specinputs {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.mm_f_specinputs input {
  width: 58px;
  height: 30px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  color: #333;
  text-align: center;
  font-size: 12.5px;
  font-family: inherit;
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
}
.mm_f_specinputs input::-webkit-outer-spin-button,
.mm_f_specinputs input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mm_f_specinputs input:focus { border-color: #e85d26; }
.mm_f_specinputs input::placeholder { color: #999; }
/* Rechts neben den Feldern steht nur die Maschinenanzahl (die Einheit nennt
   der Wertebereich links). min-width statt fester Breite, damit vierstellige
   Zahlen nicht umbrechen. */
.mm_f_specunit {
  font-size: 11px;
  color: #999;
  min-width: 26px;
  white-space: nowrap;
}
.mm_f_specn { font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; }

.mm_f_specmore {
  background: transparent;
  border: 0;
  color: #e85d26;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  padding: 9px 0 2px;
}
.mm_f_specmore:hover { color: #c04b1e; }

/* ===================================================================
   Dark-Mode – identische Palette wie maschinen_markt_filter.css.
   Beide Dark-Konventionen abdecken: globale Seite (html.mm-dark) UND
   der modul-eigene Dark-Toggle (.mm_filter.mm_dark).
   =================================================================== */
html.mm-dark .mm_filter .mm_f_specs_hint,
.mm_filter.mm_dark .mm_f_specs_hint { color: #868b91; }
html.mm-dark .mm_filter .mm_f_specsearch_clear,
.mm_filter.mm_dark .mm_f_specsearch_clear { color: #7c8288; }
html.mm-dark .mm_filter .mm_f_specsearch_clear:hover,
.mm_filter.mm_dark .mm_f_specsearch_clear:hover { color: #e85d26; background: #2a2b31; }
html.mm-dark .mm_filter .mm_f_specrow,
.mm_filter.mm_dark .mm_f_specrow { border-top-color: #3a3b42; }
html.mm-dark .mm_filter .mm_f_speclabel b,
.mm_filter.mm_dark .mm_f_speclabel b { color: #e6e6e6; }
html.mm-dark .mm_filter .mm_f_specmeta,
.mm_filter.mm_dark .mm_f_specmeta { color: #868b91; }
html.mm-dark .mm_filter .mm_f_specinputs input,
.mm_filter.mm_dark .mm_f_specinputs input { background: #1e1f24; border-color: #4a4b52; color: #e6e6e6; }
html.mm-dark .mm_filter .mm_f_specinputs input::placeholder,
.mm_filter.mm_dark .mm_f_specinputs input::placeholder { color: #7c8288; }
html.mm-dark .mm_filter .mm_f_specinputs input:focus,
.mm_filter.mm_dark .mm_f_specinputs input:focus { border-color: #e85d26; }
html.mm-dark .mm_filter .mm_f_specunit,
.mm_filter.mm_dark .mm_f_specunit { color: #868b91; }
html.mm-dark .mm_filter .mm_f_specrow_active,
.mm_filter.mm_dark .mm_f_specrow_active { background: rgba(232, 93, 38, .14); box-shadow: inset 3px 0 0 #e85d26; }
html.mm-dark .mm_filter .mm_f_specrow_active .mm_f_speclabel b,
.mm_filter.mm_dark .mm_f_specrow_active .mm_f_speclabel b { color: #ff8b5e; }
html.mm-dark .mm_filter .mm_f_specrow_active .mm_f_von,
html.mm-dark .mm_filter .mm_f_specrow_active .mm_f_bis,
.mm_filter.mm_dark .mm_f_specrow_active .mm_f_von,
.mm_filter.mm_dark .mm_f_specrow_active .mm_f_bis { border-color: #e85d26; }