/* bibliothek.css — Stile für die Bibliothek-View und ihre Komponenten.
 *
 * Domänen-Tokens werden in design-tokens.css definiert (Tom-Aktion: einfügen).
 * Bis dahin: Fallback-Werte inline.
 *
 * Wireframe-Referenz: §1 Domänen-Farben, §2 Confidence-Badge, §7 Bibliothek-View.
 */

/* ── Domänen-Tokens (in design-tokens.css einfügen wenn vorhanden) ────────── */
/* Tom-Aktion: diesen Block nach styles/design-tokens.css übertragen */
:root {
  --domain-logistik:         #e8e0f5;
  --domain-logistik-strong:  #7c5fbf;
  --domain-logistik-dark:    #2e2842;

  --domain-termin:           #ddeeff;
  --domain-termin-strong:    #3a7abf;
  --domain-termin-dark:      #1e2f42;

  --domain-bedarf:           #ffeedd;
  --domain-bedarf-strong:    #c47830;
  --domain-bedarf-dark:      #42301e;

  --domain-doku:             #eaeaea;
  --domain-doku-strong:      #606060;
  --domain-doku-dark:        #2a2a2a;

  --domain-reise:            #d8f5e8;
  --domain-reise-strong:     #3a9060;
  --domain-reise-dark:       #1e3a2c;

  --domain-gesundheit:       #fde8e8;
  --domain-gesundheit-strong: #c45050;
  --domain-gesundheit-dark:  #3c1e1e;

  --domain-schule:           #fff3cc;
  --domain-schule-strong:    #b08000;
  --domain-schule-dark:      #3a2e00;

  --domain-sonstiges:        #ece8e0;
  --domain-sonstiges-strong: #7a7060;
  --domain-sonstiges-dark:   #2e2a24;

  --z-fab:          65;
  --confidence-dot: 8px;
}

/* ── Bibliothek-Container ─────────────────────────────────────────────────── */
#view-bibliothek {
  padding: var(--space-4, 1rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
}

/* ── Suchleiste ───────────────────────────────────────────────────────────── */
.bibliothek__suche {
  position: relative;
}

.bibliothek__suche-input {
  width: 100%;
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  padding-left: calc(var(--space-4, 1rem) + 1.5rem);
  border: 1px solid var(--border-subtle, #e0ddd8);
  border-radius: var(--radius-lg, 12px);
  background: var(--bg-secondary, #fff);
  color: var(--text-primary, #1a1a1a);
  font-size: var(--font-size-md, 1rem);
  line-height: 1.5;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.75rem center;
}

.bibliothek__suche-input:focus {
  outline: 2px solid var(--primary, #3a7abf);
  outline-offset: 2px;
  border-color: var(--primary, #3a7abf);
}

/* ── Filter-Chips ─────────────────────────────────────────────────────────── */
.bibliothek__chips {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2, 0.5rem);
  overflow-x: auto;
  padding-bottom: var(--space-1, 0.25rem);
  scrollbar-width: none;
}

.bibliothek__chips::-webkit-scrollbar {
  display: none;
}

.bibliothek__chip {
  white-space: nowrap;
  padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
  border-radius: var(--radius-full, 9999px);
  border: 1px solid var(--border-subtle, #e0ddd8);
  background: var(--bg-tertiary, #f5f3ef);
  color: var(--text-secondary, #6b6860);
  font-size: var(--font-size-sm, 0.875rem);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
  flex-shrink: 0;
}

.bibliothek__chip:hover,
.bibliothek__chip[aria-pressed="true"] {
  background: var(--primary-subtle, #ddeeff);
  color: var(--primary, #3a7abf);
  border-color: var(--primary, #3a7abf);
}

.bibliothek__chip--bestaetigung[aria-pressed="true"],
.bibliothek__chip--bestaetigung:hover {
  background: var(--warning-subtle, #fff3cd);
  color: var(--warning, #b08000);
  border-color: var(--warning, #b08000);
}

/* ── Ergebnisliste ────────────────────────────────────────────────────────── */
.bibliothek__ergebnisse {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}

/* ── Karte ────────────────────────────────────────────────────────────────── */
.bibliothek__karte {
  background: var(--bg-secondary, #fff);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  border-left: 4px solid var(--karten-domain-color, var(--border-subtle, #e0ddd8));
  cursor: pointer;
  transition: box-shadow 120ms ease, transform 80ms ease;
}

.bibliothek__karte:hover {
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.12));
  transform: translateY(-1px);
}

.bibliothek__karte:focus {
  outline: 2px solid var(--primary, #3a7abf);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .bibliothek__karte {
    transition: none;
  }
  .bibliothek__karte:hover {
    transform: none;
  }
}

/* ── Karten-Kopfzeile ─────────────────────────────────────────────────────── */
.bibliothek__karte-kopf {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  margin-bottom: var(--space-2, 0.5rem);
  flex-wrap: wrap;
}

.bibliothek__domain-chip {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px var(--space-2, 0.5rem);
  border-radius: var(--radius-full, 9999px);
}

.bibliothek__quelle-icon {
  font-size: var(--font-size-sm, 0.875rem);
  line-height: 1;
}

.bibliothek__zeit {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--text-muted, #9a9490);
  margin-left: auto;
}

/* ── Snippet ──────────────────────────────────────────────────────────────── */
.bibliothek__snippet {
  font-size: var(--font-size-md, 1rem);
  color: var(--text-primary, #1a1a1a);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

/* ── Confidence-Badge (Wireframe §2) ──────────────────────────────────────── */
.bibliothek__confidence {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  cursor: help;
}

.bibliothek__confidence-dot {
  display: inline-block;
  width: var(--confidence-dot, 8px);
  height: var(--confidence-dot, 8px);
  border-radius: 50%;
  background: var(--border-subtle, #d0cdc8);
  transition: background 80ms ease;
}

.bibliothek__confidence--hoch .bibliothek__confidence-dot--gefuellt {
  background: var(--positive, #3a9060);
}
.bibliothek__confidence--mittel .bibliothek__confidence-dot--gefuellt {
  background: var(--warning, #b08000);
}
.bibliothek__confidence--niedrig .bibliothek__confidence-dot--gefuellt {
  background: var(--negative, #c45050);
}

/* ── Status-States ────────────────────────────────────────────────────────── */
.bibliothek__laden {
  text-align: center;
  padding: var(--space-8, 2rem);
  color: var(--text-muted, #9a9490);
}

.bibliothek__empty {
  text-align: center;
  padding: var(--space-8, 2rem) var(--space-4, 1rem);
  color: var(--text-secondary, #6b6860);
}

.bibliothek__empty-hint {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--text-muted, #9a9490);
  margin-top: var(--space-2, 0.5rem);
}

.bibliothek__fehler {
  padding: var(--space-4, 1rem);
  background: var(--negative-subtle, #fde8e8);
  border-radius: var(--radius-md, 8px);
  color: var(--negative, #c45050);
}

.bibliothek__fehler-detail {
  font-size: var(--font-size-sm, 0.875rem);
  opacity: 0.7;
  margin-top: var(--space-1, 0.25rem);
}

/* ── Dark Mode ────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --domain-logistik:  var(--domain-logistik-dark,  #2e2842);
    --domain-termin:    var(--domain-termin-dark,    #1e2f42);
    --domain-bedarf:    var(--domain-bedarf-dark,    #42301e);
    --domain-doku:      var(--domain-doku-dark,      #2a2a2a);
    --domain-reise:     var(--domain-reise-dark,     #1e3a2c);
    --domain-gesundheit: var(--domain-gesundheit-dark, #3c1e1e);
    --domain-schule:    var(--domain-schule-dark,    #3a2e00);
    --domain-sonstiges: var(--domain-sonstiges-dark, #2e2a24);
  }
}