/* ============================================================
   search.css — Centrale zoek-UI styling voor alle ATS-modules
   Kleurpalet / variabelen zijn gebaseerd op het bestaande ATS
   (--col-accent, --col-dark, --col-border, enz.)
   ============================================================ */

/* ── Wrapper ─────────────────────────────────────────────── */
.atsSearch {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* ── Veldrij (input + iconen) ────────────────────────────── */
.atsSearch__field {
  position: relative;
  display: flex;
  align-items: center;
  height: 38px;
  border: 1.5px solid var(--col-border, #e0d8d5);
  border-radius: 8px;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  overflow: hidden;
}

.atsSearch__field:focus-within {
  border-color: var(--col-accent, #E25322);
  box-shadow: 0 0 0 3px rgba(226, 83, 34, .12);
}

/* ── Zoekicoon ───────────────────────────────────────────── */
.atsSearch__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0 8px 0 10px;
  color: var(--col-muted, #a89890);
  pointer-events: none;
}

/* ── Input ───────────────────────────────────────────────── */
.atsSearch__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13.5px;
  color: var(--col-text, #3c2c2d);
  padding: 0 4px;
  /* verberg native × in Chrome/Safari */
}
.atsSearch__input::-webkit-search-cancel-button,
.atsSearch__input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}
.atsSearch__input::placeholder {
  color: var(--col-muted, #a89890);
}

/* ── Wis-knop ────────────────────────────────────────────── */
.atsSearch__clear {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-right: 3px;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: var(--col-muted, #a89890);
  cursor: pointer;
  transition: color .12s, background .12s;
}
.atsSearch__clear:hover {
  color: var(--col-accent, #E25322);
  background: rgba(226, 83, 34, .08);
}
.atsSearch__clear svg {
  width: 14px;
  height: 14px;
}
.atsSearch__clear[hidden] { display: none !important; }

/* ── Spinner ─────────────────────────────────────────────── */
.atsSearch__spinner {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  border: 2px solid transparent;
  border-top-color: var(--col-accent, #E25322);
  border-radius: 50%;
  display: none;
  animation: atsSearchSpin .7s linear infinite;
}
.atsSearch.is-loading .atsSearch__spinner { display: block; }

@keyframes atsSearchSpin {
  to { transform: rotate(360deg); }
}

/* ── Foutmelding ─────────────────────────────────────────── */
.atsSearch__error {
  font-size: 12px;
  color: #dc2626;
  min-height: 0;
  padding: 0 4px;
  display: none;
}
.atsSearch.has-error .atsSearch__error { display: block; }

/* ── Actieve-zoekopdracht indicator op border ────────────── */
.atsSearch.has-value .atsSearch__field {
  border-color: var(--col-accent, #E25322);
}
.atsSearch.has-value .atsSearch__icon {
  color: var(--col-accent, #E25322);
}

/* ── Toegankelijkheid: sr-only ───────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Resultaatregel ──────────────────────────────────────── */
.atsSearch__meta {
  font-size: 12px;
  color: var(--col-muted, #a89890);
  padding: 2px 4px 0;
}
.atsSearch__meta strong {
  color: var(--col-text, #3c2c2d);
  font-weight: 600;
}

/* ── Lege-staat bericht (in de module zelf plaatsen) ─────── */
.atsEmptyState {
  text-align: center;
  padding: 40px 20px;
  color: var(--col-muted, #a89890);
  font-size: 14px;
}
.atsEmptyState strong {
  display: block;
  font-size: 15px;
  color: var(--col-text, #3c2c2d);
  margin-bottom: 6px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Desktop (>1024px): zoekveld inline naast filters */
@media (min-width: 1025px) {
  .atsSearch {
    min-width: 240px;
    max-width: 340px;
  }
}

/* Tablet (768–1024px): zoekveld op eigen rij, volledige breedte */
@media (min-width: 768px) and (max-width: 1024px) {
  .atsSearch {
    width: 100%;
    max-width: 100%;
  }
}

/* Mobiel (<768px): volledig breed, grote touch-target */
@media (max-width: 767px) {
  .atsSearch {
    width: 100%;
    max-width: 100%;
  }
  .atsSearch__field {
    height: 44px;          /* minimale touch-target hoogte */
  }
  .atsSearch__input {
    font-size: 15px;       /* voorkomt iOS zoom bij focus */
  }
  .atsSearch__clear {
    width: 40px;
    height: 40px;
  }
}

/* ── Filter-toolbar integratie ──────────────────────────────
   Gebruik .atsFilterRow als wrapper voor zoek + filters samen
────────────────────────────────────────────────────────────── */
.atsFilterRow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

@media (max-width: 767px) {
  .atsFilterRow {
    flex-direction: column;
    align-items: stretch;
  }
  .atsFilterRow > * {
    width: 100%;
  }
}