/* ============================================================
   States — Skeleton (oskel), No-Data, No-Search.
   Frames 7/8/9 aus dem Handoff.
   ============================================================ */

/* — Skeleton — */
.skel { background: rgba(255, 255, 255, .06); border-radius: 5px; animation: oskel 1.4s ease-in-out infinite; }
:root[data-theme="light"] .skel { background: rgba(20, 18, 16, .05); }
.skel--amber { background: rgba(224, 168, 60, .1); }
.skel-card__head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--sp-18); }
.skel-bars { display: flex; align-items: flex-end; gap: var(--sp-12); height: 200px; }
.skel-bar { width: 30px; border-radius: 5px; }
.skel-xaxis { display: flex; gap: var(--sp-24); margin-top: var(--sp-12); }

/* — Empty / No-Data — */
.empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--sp-32) var(--sp-24);
}
.empty__icon {
  width: 56px; height: 56px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; margin-bottom: var(--sp-16);
  border: 1px dashed var(--amber); color: var(--amber);
}
.empty__icon--neutral { border-color: var(--border-3); color: var(--text-muted); }
.empty__title { font-family: var(--f-head); font-size: var(--fs-card-h); margin-bottom: var(--sp-8); }
.empty__body { font-size: 13px; color: var(--text-muted); max-width: 380px; margin-bottom: var(--sp-18); }
.empty__actions { display: flex; gap: var(--sp-10); flex-wrap: wrap; justify-content: center; }
.empty__suggestions { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; }

/* — Category suggestion chip (No-Search-Results) — */
.cat-suggestion {
  border: 1px solid transparent;
  border-radius: 18px;
  padding: 8px 15px;
  font-size: 13px;
  transition: filter var(--t-fast);
}
.cat-suggestion:hover { filter: brightness(1.15); }
:root[data-theme="light"] .cat-suggestion:hover { filter: brightness(.95); }

/* — Active search field (No-Search-Results header) — */
.search-field {
  display: flex; align-items: center; gap: var(--sp-10);
  background: var(--card);
  border: 1px solid var(--border-1);
  border-radius: 11px;
  padding: 13px 16px;
  margin-bottom: var(--sp-18);
}
.search-field.is-active { border-color: rgba(224, 168, 60, .4); }
.search-field__icon { font-family: var(--f-mono); color: var(--text-muted); font-size: 15px; }
.search-field__query { flex: 1; color: var(--text-2); font-size: 14px; }
.search-field__clear { font-family: var(--f-mono); font-size: 13px; color: var(--text-muted); }
.search-field__clear:hover { color: var(--text); }