/* Seite / Intro */
.ppsconfig {
  margin: 6px 0 18px;
  color: var(--dark-grey);
}

/* ========= Material-Auswahl ============================================ */

#material-buttons{
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  padding:10px;
}

/* Pill-Buttons (Buttons, Links oder Spans sind erlaubt) */
#material-buttons button,
#material-buttons a,
#material-buttons .pill {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--dark-grey) 18%, transparent);
  background: color-mix(in srgb, var(--bg-color-light) 92%, transparent);
  color: var(--primary-color);
  font: inherit;
  font-weight: 600;
  padding: 10px 14px;
  margin-right: 10px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s ease, box-shadow .2s ease, border-color .2s ease, transform .06s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
}

#material-buttons button:hover,
#material-buttons a:hover,
#material-buttons .pill:hover {
  background: color-mix(in srgb, var(--secondary-color) 85%, transparent);
  transform: translateY(-1px);
}

#material-buttons,
#material-buttons:where(:not(:has(*))) { overflow-y: visible; }

/* active/selected Zustände – deckt mehrere Varianten ab */
#material-buttons .is-active,
#material-buttons .active,
#material-buttons .selected,
#material-buttons [aria-pressed="true"]{
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 12%, var(--bg-color-light));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 20%, transparent);
  color: var(--primary-color);
}

#material-info {
  color: var(--dark-grey);
}

/* ========= Filter-Card ================================================== */

.filter-section {
  margin-top: 14px;
  background: color-mix(in srgb, var(--bg-color-light) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--dark-grey) 18%, transparent);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  backdrop-filter: saturate(140%) blur(6px);
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

/* Label + Control Stapel */
.filter-section > div {
  display: grid;
  gap: 6px;
  align-content: start;
}

.filter-section label {
  color: var(--primary-color);
  font-weight: 600;
  font-size: 0.95rem;
}

/* Inputs & Selects – identisch zu Suchfilter-Stil */
.filter-section select,
.filter-section input[type="number"] {
  height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--dark-grey) 18%, transparent);
  background: #fff;
  color: var(--font-color);
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
  min-width: 0; /* truncation vermeiden */
}

.filter-section select:focus,
.filter-section input[type="number"]:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 22%, transparent);
}

/* Number-Spinner ausblenden */
.filter-section input[type="number"]::-webkit-outer-spin-button,
.filter-section input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.filter-section input[type="number"] { -moz-appearance: textfield; }

/* Länge-Tooltip/Info */
#length-type-tooltip {
  grid-column: 1 / -1;
  background: color-mix(in srgb, var(--secondary-color) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--dark-grey) 14%, transparent);
  color: var(--primary-color);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.92rem;
}

#length-reset-message {
  grid-column: 1 / -1;
  color: var(--accent-color);
  font-weight: 600;
}

/* Reset-Button */
#reset-filters {
  align-self: end;
  justify-self: start;
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--dark-grey) 18%, transparent);
  background: #fff;
  color: var(--primary-color);
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease, border-color .15s ease, transform .06s ease;
}
#reset-filters:hover {
  background: var(--secondary-color);
  transform: translateY(-1px);
}

/* ========= Responsiv ==================================================== */

@media (max-width: 1100px){
  .filter-section { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 800px){
  .filter-section { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .filter-section { grid-template-columns: 1fr; }
  #reset-filters { justify-self: stretch; }
}

/* ========= Darkmode ===================================================== */

body.darkmode #material-buttons button,
body.darkmode #material-buttons a,
body.darkmode #material-buttons .pill {
  background: rgba(34,34,34,.9);
  border-color: #2a2a2a;
  color: var(--font-color-dark);
}
body.darkmode #material-buttons .is-active,
body.darkmode #material-buttons .active,
body.darkmode #material-buttons .selected,
body.darkmode #material-buttons [aria-pressed="true"] {
  background: rgba(60,60,60,.9);
  box-shadow: 0 0 0 4px rgba(45,98,204,.25);
}

body.darkmode .filter-section {
  background: rgba(28,28,28,.9);
  border-color: #2a2a2a;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}
body.darkmode .filter-section select,
body.darkmode .filter-section input[type="number"] {
  background: #1f1f1f;
  color: var(--font-color-dark);
  border-color: #2a2a2a;
}
body.darkmode #length-type-tooltip {
  background: rgba(40,40,40,.85);
  border-color: #2a2a2a;
  color: var(--font-color-dark);
}
body.darkmode #reset-filters {
  background: #1f1f1f;
  color: var(--font-color-dark);
  border-color: #2a2a2a;
}


/* ==========================================================================
   Prüfstift-Konfigurator – Ergebnis-Tabelle
   nutzt :root-Variablen
   ========================================================================== */

/* Optionales Wrapper-Pattern, falls div darum: .results-table-wrap */
.results-table-wrap{
  width: 100%;
  margin-top: 16px;
  border-radius: 14px;
  overflow: hidden;            /* runde Ecken für den Block */
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  border: 1px solid color-mix(in srgb, var(--dark-grey) 18%, transparent);
  backdrop-filter: saturate(140%) blur(6px);
  background: color-mix(in srgb, var(--bg-color-light) 85%, transparent);
}

/* Tabelle */
#results-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  background: transparent;
}

/* Kopf (sticky, Glas, Blur) */
#results-table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: center;
  font-weight: 700;
  color: var(--primary-color);
  padding: 12px;
  background: color-mix(in srgb, var(--secondary-color) 92%, transparent);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid color-mix(in srgb, var(--dark-grey) 15%, transparent);
  box-shadow: 0 8px 12px -8px rgba(0,0,0,.12);
}

/* Zellen */
#results-table td{
  padding: 12px 10px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--font-color);
  border-top: 1px solid color-mix(in srgb, var(--dark-grey) 12%, transparent);
  background: color-mix(in srgb, var(--bg-color-light) 92%, transparent);
}

/* Zebra – sehr subtil */
#results-table tbody tr:nth-child(odd) td{
  background: color-mix(in srgb, var(--secondary-color) 86%, transparent);
}

/* Hover – soft highlight */
#results-table tbody tr{
  transition: background .18s ease, box-shadow .18s ease;
  cursor: pointer;
}
#results-table tbody tr:hover td{
  background: color-mix(in srgb, var(--secondary-color) 80%, transparent);
  box-shadow: inset 0 0 0 9999px rgba(255,255,255,.03);
}

/* Erste Spalte: Art.-Nr. explizit markierbar und kein Handcursor */
#results-table td:first-child{
  user-select: text;
  cursor: text;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--primary-color);
}

/* Spalten-Feintuning (optional) – breitere Produktspalten auf kleinen Screens */
@media (max-width: 960px){
  #results-table th:nth-child(2),
  #results-table td:nth-child(2){ text-align: left; }
}

/* Mobile: horizontales Scrollen auf dem Table selbst erlauben,
   falls kein Wrapper verwendet wird */
@media (max-width: 800px){
  #results-table{
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #results-table thead, #results-table tbody, #results-table tr{
    display: table;
    width: 100%;
    table-layout: fixed;
  }
}

/* Darkmode */
body.darkmode .results-table-wrap{
  background: rgba(28,28,28,.9);
  border-color: #2a2a2a;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
body.darkmode #results-table thead th{
  color: var(--font-color-dark);
  background: rgba(40,40,40,.85);
  border-bottom-color: #2a2a2a;
}
body.darkmode #results-table td{
  color: var(--font-color-dark);
  background: rgba(34,34,34,.88);
  border-top-color: #2a2a2a;
}
body.darkmode #results-table tbody tr:nth-child(odd) td{
  background: rgba(42,42,42,.9);
}
body.darkmode #results-table tbody tr:hover td{
  background: rgba(50,50,50,.92);
}