/*
 * NEVANU — Glossar-Admin-spezifische Styles
 * Modul: Glossar (my.nevanu.ch)
 * Erstellt: 2026-04-28 (Block C Schritt 1) — Inline-Style-Extraktion
 *
 * Naming-Konvention: glossar-* prefix. Verwendet Design-Tokens aus
 * css/design-tokens.css (var(--k-*), var(--nv-*)) — keine hardcoded
 * Werte (siehe nevanu-code SKILL.md Stop-Regel #6).
 *
 * Geladen via index.php nach design-system.css.
 */

/* ============================================================
 * Modal-Container (Tag 2 Block C Schritt 1)
 *
 * Pattern-Wahl: dediziertes Modal-Backdrop statt nv-overlay-page
 * (full-page slide-in). Modale Sub-Sheets im Glossar-Editor
 * brauchen zentrierte Card auf Backdrop, nicht volle Page.
 * Konsistent mit anderen Modal-Pattern in my.nevanu.ch
 * (z.B. confirm-Dialogs).
 * ============================================================ */

.glossar-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  z-index: var(--z-blatt);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--nv-s4);
  animation: glossarModalFadeIn .2s ease;
}

@keyframes glossarModalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.glossar-modal-content {
  background: var(--k-card, #1a1a1a);
  border-radius: var(--nv-r-eingabe);
  max-width: 680px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  padding: 20px;
  color: var(--k-text);
}

.glossar-modal-content--wide {
  max-width: 780px;
}

.glossar-modal-header {
  display: flex;
  align-items: center;
  gap: var(--nv-s2);
  margin-bottom: var(--nv-s4);
}

.glossar-modal-header h3 {
  margin: 0;
  flex: 1;
}

.glossar-modal-header .glossar-modal-icon {
  color: var(--k-brand);
}

/* ============================================================
 * KI-Modal (Tag 2 Block 2 Item 4)
 * ============================================================ */

.glossar-ki-loading {
  display: none;
  text-align: center;
  padding: 32px;
}

.glossar-ki-loading-icon {
  font-size: 32px;
  animation: glossarSpin 1.5s linear infinite;
}

.glossar-ki-loading-text {
  margin-top: var(--nv-s2);
  font-size: var(--k-fs-body);
  color: var(--k-text2, #9CA3AF);
}

.glossar-modal-hint {
  font-size: var(--k-fs-body);
  color: var(--k-text2, #9CA3AF);
  margin-bottom: var(--nv-s3);
}

.glossar-modal-close {
  padding: var(--nv-s1) var(--nv-s2);
}

.glossar-modal-close .material-symbols-outlined {
  font-size: var(--k-fs-hervor);
}

.glossar-modal-submit {
  width: 100%;
}

.glossar-modal-submit .material-symbols-outlined {
  font-size: var(--k-fs-hervor);
  vertical-align: -3px;
  margin-right: var(--nv-s1);
}

.glossar-ki-result {
  display: none;
}

.glossar-ki-result-visible {
  display: block;
}

.glossar-ki-result-label {
  margin-bottom: var(--nv-s3);
  font-size: var(--k-fs-body);
  color: var(--k-text2, #9CA3AF);
}

.glossar-ki-result-sections {
  margin-top: var(--nv-s2);
}

.glossar-ki-result-sections ul {
  margin: var(--nv-s1) 0 0 20px;
  padding: 0;
}

.glossar-ki-result-sections li {
  margin-bottom: var(--nv-s1);
  font-size: var(--k-fs-body);
}

.glossar-ki-result-preview {
  border: 1px solid var(--k-border, #333);
  border-radius: var(--nv-r-marke);
  padding: var(--nv-s3);
  margin-bottom: var(--nv-s3);
  font-size: var(--k-fs-body);
  line-height: 1.5;
}

.glossar-ki-result-actions {
  display: flex;
  gap: var(--nv-s2);
}

.glossar-ki-result-actions > button {
  flex: 1;
}

.glossar-ki-result-actions > button.glossar-btn-primary {
  flex: 2;
}

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

/* ============================================================
 * Image-Picker-Modal (Tag 2 Block 2 Item 5)
 * ============================================================ */

.glossar-img-upload-zone {
  border: 2px dashed var(--k-border, #444);
  border-radius: var(--nv-r-marke);
  padding: var(--nv-s4);
  margin-bottom: var(--nv-s4);
}

.glossar-img-upload-btn {
  width: 100%;
  margin-top: var(--nv-s2);
}

.glossar-img-upload-btn .material-symbols-outlined {
  font-size: 16px;
  vertical-align: -2px;
  margin-right: var(--nv-s1);
}

.glossar-modal-backdrop--higher {
  z-index: var(--z-blatt-hoch);
}

.glossar-modal-backdrop--higher2 {
  z-index: calc(var(--z-blatt-hoch) + 1);
}

.glossar-modal-backdrop--higher3 {
  z-index: calc(var(--z-blatt-hoch) + 2);
  background: rgba(0, 0, 0, .7);
}

.glossar-version-btn {
  padding: var(--nv-s1) var(--nv-s2);
  font-size: var(--k-fs-caption);
}

.glossar-version-btn .material-symbols-outlined {
  font-size: var(--k-fs-body);
  vertical-align: -2px;
}

.glossar-img-upload-title {
  font-size: var(--k-fs-body);
  font-weight: 600;
  margin-bottom: var(--nv-s2);
}

.glossar-img-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--nv-s3);
}

.glossar-img-gallery-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--k-text3, #9CA3AF);
  font-size: var(--k-fs-body);
  padding: 20px;
}

.glossar-img-gallery-item {
  cursor: pointer;
  border: 1px solid var(--k-border, #333);
  border-radius: var(--nv-r-marke);
  overflow: hidden;
  background: var(--k-card, rgba(255, 255, 255, .02));
  transition: border-color .15s;
}

.glossar-img-gallery-item:hover {
  border-color: var(--k-brand);
}

.glossar-img-gallery-item img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  display: block;
}

.glossar-img-gallery-item-label {
  padding: var(--nv-s1) var(--nv-s2);
  font-size: var(--k-fs-micro);
  color: var(--k-text2, #9CA3AF);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Image-Section Vorschau im Editor */

/* ============================================================
 * Versions-Modal (Tag 2 Block 2 Item 7)
 * ============================================================ */

.glossar-versions-list {
  font-size: var(--k-fs-body);
}

.glossar-versions-empty {
  text-align: center;
  color: var(--k-text3, #9CA3AF);
  padding: 20px;
}

.glossar-versions-meta {
  font-size: var(--k-fs-caption);
  color: var(--k-text3, #9CA3AF);
  margin-bottom: var(--nv-s2);
}

.glossar-version-item {
  border: 1px solid var(--k-border, #333);
  border-radius: var(--nv-r-marke);
  padding: var(--nv-s3);
  margin-bottom: var(--nv-s2);
  display: flex;
  align-items: center;
  gap: var(--nv-s3);
}

.glossar-version-item-main {
  flex: 1;
}

.glossar-version-item-date {
  font-weight: 600;
}

.glossar-version-item-editor {
  font-size: var(--k-fs-caption);
  color: var(--k-text2, #9CA3AF);
}

.glossar-version-detail {
  background: var(--k-card, #1a1a1a);
  border-radius: var(--nv-r-eingabe);
  max-width: 780px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  padding: 20px;
  color: var(--k-text);
  font-family: monospace;
  font-size: var(--k-fs-caption);
  white-space: pre-wrap;
}

.glossar-version-detail-header {
  display: flex;
  align-items: center;
  gap: var(--nv-s2);
  margin-bottom: var(--nv-s3);
  font-family: system-ui;
  font-size: var(--k-fs-body);
}

.glossar-version-detail-header strong {
  flex: 1;
}

/* ============================================================
 * Section-Editor (Tag 2 Block 1+2)
 * ============================================================ */

/* ============================================================
 * Markdown-Toolbar (Tag 2 Block 2 Item 6)
 * ============================================================ */

/* ============================================================
 * SEO-Score (Tag 2 Block 2 Item 9)
 * ============================================================ */

/* ============================================================
 * Status-Pill-Group (Tag 2 Block 2 Item 8 / Block C Schritt 2)
 * Variante A (Stefan-Beschluss 2026-04-28): bleiben als sichtbare
 * Pills im Body, nicht im 3-Punkte-Menue.
 *
 * Verwendet vorhandenes nv-form-chip-Pattern aus design-system.css
 * (Z.1310-1338) als Basis. Pro Status eigene Active-Farbe.
 * ============================================================ */

.glossar-status-chips {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--nv-s2);
}

.glossar-status-chip {
  flex: 1;
  min-width: 100px;
  padding: var(--nv-s2) var(--nv-s4);
  font-size: var(--k-fs-body);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nv-s2);
}

.glossar-status-chip-icon {
  font-size: 16px;
  line-height: 1;
}

/* Active-State pro Status (Color-Coded). is-active wird via JS
 * setStatus() mit classList.toggle gesetzt. Override .nv-form-chip.active
 * NICHT — wir nutzen eigenen Klassenmodifier um die default
 * brand-color (rosa) nicht zu treffen. */