/* =====================================================
   AniGa – controls.css
   Status-Tabs, Filterleiste, Suche, Genre-Tags
   Teil von style.css — Reihenfolge der <link>-Tags in index.html
   entspricht der Kaskade und darf nicht vertauscht werden.
   ===================================================== */
/* ===== STATUS TABS ===== */
.status-tabs
{
  display: flex; gap: 6px; overflow-x: auto; margin-bottom: 18px; padding-bottom: 2px; scrollbar-width: none;
}
.status-tabs::-webkit-scrollbar
{
  display: none;
}
.status-tab
{
  padding: 7px 14px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--bg3);
  color: var(--text2); cursor: pointer;
  font-size: .78rem; font-weight: 500; white-space: nowrap;
  transition: all .2s; display: flex; align-items: center; gap: 5px;
}
@media (max-width: 430px)
{
  .status-tabs
  {
    flex-wrap: wrap; overflow-x: visible; gap: 5px;
  }
  .status-tab
  {
    padding: 6px 11px; font-size: .75rem;
  }
}
.status-tab.active
{
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.status-tab .cnt
{
  background: rgba(255,255,255,.18); padding: 0 5px; border-radius: 10px;
  font-size: .68rem; min-width: 18px; text-align: center;
}
.status-tab:not(.active) .cnt
{
  background: var(--border);
}

/* ===== FILTER BAR ===== */
.filter-bar
{
  display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; align-items: center;
}
.filter-input
{
  flex: 1; min-width: 0;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 9px 13px;
  color: var(--text); font-size: .88rem; outline: none;
}
.filter-input:focus
{
  border-color: var(--accent);
}
.filter-input::placeholder
{
  color: var(--text3);
}
.view-toggle
{
  display: flex; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden;
}
.view-btn
{
  padding: 8px 11px; border: none; background: none; color: var(--text2); cursor: pointer; transition: all .2s; display: flex; align-items: center;
}
.view-btn.active
{
  background: var(--accent); color: #fff;
}
.view-btn svg
{
  width: 16px; height: 16px;
}

/* ===== SEARCH ===== */
.search-bar
{
  display: flex; background: var(--bg3);
  border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden; transition: border-color .2s, box-shadow .2s;
  margin-bottom: 16px;
}
.search-bar:focus-within
{
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow);
}
.search-input
{
  flex: 1; background: none; border: none;
  padding: 13px 16px; color: var(--text); font-size: .97rem; outline: none;
}
.search-input::placeholder
{
  color: var(--text3);
}
.search-submit
{
  padding: 10px 22px; background: var(--accent); border: none;
  color: #fff; font-size: .88rem; font-weight: 600;
  cursor: pointer; transition: background .2s;
  display: flex; align-items: center; gap: 7px;
}
.search-submit:hover
{
  background: var(--accent2);
}
.search-submit svg
{
  width: 17px; height: 17px;
}
/* wrap: die Typ-Tabs in Vergleich/Nutzerliste zeigen alle Medientypen (5+) */
.type-toggle
{
  display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px;
}
.type-btn
{
  padding: 7px 16px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--bg3);
  color: var(--text2); cursor: pointer;
  font-size: .83rem; font-weight: 500; transition: all .2s;
}
.type-btn.active
{
  background: var(--accent); border-color: var(--accent); color: #fff;
}

/* ===== GENRE TAGS ===== */
.genre-tags
{
  display: flex; flex-wrap: wrap; gap: 5px;
}
.genre-tag
{
  background: var(--accent-glow); color: var(--accent);
  border: 1px solid rgba(124,77,255,.25);
  padding: 2px 9px; border-radius: 20px; font-size: .72rem;
}