/*
 * Kummerkasten – Eigene Dropdown-Liste für <select>-Felder (Kategorie,
 * Nachrichtenart, Status). Ersetzt nur die Optik. Das native <select> bleibt
 * als unsichtbare, aber voll funktionale Ebene erhalten (Formularversand,
 * native Required-Prüfung, siehe assets/js/select.js) - ohne JavaScript
 * bleibt das Feld ein gewöhnliches <select> mit den Basisregeln aus
 * forms.css, dieses Stylesheet greift dann schlicht nicht.
 */

.kk-select {
  position: relative;
}

.kk-select__trigger {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  justify-content: space-between;
  text-align: left;
  transition: border-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.kk-select__trigger,
.kk-select__trigger:hover,
.kk-select__trigger:focus-visible {
  background: var(--color-surface);
  color: var(--color-ink);
}

.kk-select__trigger:hover {
  border-color: var(--color-ink-muted);
  transform: none;
  box-shadow: none;
}

.kk-select__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kk-select__value--placeholder {
  color: var(--color-ink-faint);
}

.kk-select__trigger .kk-icon {
  color: var(--color-ink-muted);
  flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-standard);
}

.kk-select--open .kk-select__trigger .kk-icon {
  transform: rotate(180deg);
  color: var(--color-accent);
}

.field--invalid .kk-select__trigger {
  border-color: var(--color-danger-ink);
}

.field--valid .kk-select__trigger {
  border-color: var(--color-success-ink);
}

/* Deckungsgleich unter dem sichtbaren Button (nicht am Bildschirmrand
   versteckt): so zeigt die native Pflichtfeld-Blase im Fehlerfall exakt auf
   den sichtbaren Button, statt an eine unsichtbare, entfernte Stelle zu
   springen. pointer-events:none reicht die Klicks an den Button darüber
   weiter. */
.kk-select__native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: none;
  opacity: 0;
  pointer-events: none;
}

/* Safari kann für required <select> einen roten System-Hintergrund anwenden.
   Der Fehler wird hier bewusst nur durch Rahmen/Fokus angezeigt, nie als
   vollflächiger Alarmzustand. */
select:invalid {
  background-color: var(--color-surface) !important;
  color: var(--color-ink) !important;
}

.kk-select__listbox {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-height: 16rem;
  overflow-y: auto;
  display: none;
}

.kk-select--open .kk-select__listbox {
  display: block;
  animation: kk-select-in var(--duration-fast) var(--ease-standard) both;
}

.kk-select__option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--color-ink);
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.kk-select__option .kk-icon {
  color: var(--color-accent);
  opacity: 0;
  flex-shrink: 0;
  transition: opacity var(--duration-fast) var(--ease-standard);
}

.kk-select__option--selected .kk-icon {
  opacity: 1;
}

.kk-select__option--selected {
  font-weight: 600;
}

.kk-select__option--active {
  background: var(--color-surface);
}

.kk-select__option:hover {
  background: var(--color-surface);
}

.kk-select__option[aria-disabled="true"] {
  color: var(--color-ink-faint);
  cursor: not-allowed;
}

@keyframes kk-select-in {
  from {
    opacity: 0;
    transform: translateY(-0.35rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}