/**
 * Status-Badge
 *
 * Eine Darstellung des Moderationsstatus fuer das ganze Werkzeug: in Listen,
 * in der Legende, auf der Mitarbeiterseite und in den Revisionen. Legende und
 * Tabelle verwenden dasselbe Markup:
 *
 *   <td class="views-field-moderation-state moderation-state__published">
 *     <span>Veroeffentlicht</span>
 *   </td>
 *
 * Loest drei Probleme des vorherigen Themes:
 *  - der Status war in Tabellen ein Kreis mit silbengetrenntem Text
 *    ("Veroef-fent-licht"), in der Legende eine 118px breite Pille und auf
 *    der Mitarbeiterseite reiner Fliesstext,
 *  - "Entwurf" war rot und damit von einer Fehlermeldung nicht zu
 *    unterscheiden,
 *  - "Neu" trug exakt die Farbe der Primaerschaltflaechen.
 *
 * Der Status "created" hatte im alten Theme ueberhaupt keine Farbe und
 * fiel auf Grau zurueck; er ist hier ergaenzt.
 *
 * Aufbau: Die Zustandsregeln setzen nur Custom Properties auf dem
 * Container (td bzw. Feldelement), die Grundform liest sie auf dem Span.
 * Dadurch treffen Form- und Farbregeln nie dasselbe Element und koennen
 * sich nicht ueber die Selektorspezifitaet gegenseitig aushebeln.
 */

/* ---------- Farbwerte je Bedeutung ---------- */

:root {
  --zp-status-neutral-fg: #4a5568;
  --zp-status-neutral-bg: #eef0f3;
  --zp-status-neutral-bd: rgba(74, 85, 104, .22);

  --zp-status-info-fg: #013888;
  --zp-status-info-bg: #e0e9f6;
  --zp-status-info-bd: rgba(1, 56, 136, .3);

  --zp-status-progress-fg: #8a5200;
  --zp-status-progress-bg: #fbeed6;
  --zp-status-progress-bd: rgba(138, 82, 0, .32);

  --zp-status-ok-fg: #14663a;
  --zp-status-ok-bg: #dcefe4;
  --zp-status-ok-bd: rgba(20, 102, 58, .32);

  --zp-status-attention-fg: #a8460f;
  --zp-status-attention-bg: #fbe4d8;
  --zp-status-attention-bd: rgba(168, 70, 15, .34);

  /* Rot ist ausschliesslich echten Fehlern vorbehalten -- es wurde frei,
     als "Entwurf" auf Bernstein umgezogen ist. */
  --zp-status-error-fg: #9b1c14;
  --zp-status-error-bg: #fbe0de;
  --zp-status-error-bd: rgba(155, 28, 20, .34);
}

.gin--dark-mode {
  --zp-status-neutral-fg: #9aa4b2;
  --zp-status-neutral-bg: rgba(154, 164, 178, .16);
  --zp-status-neutral-bd: rgba(154, 164, 178, .3);

  --zp-status-info-fg: #8fb4f0;
  --zp-status-info-bg: rgba(143, 180, 240, .18);
  --zp-status-info-bd: rgba(143, 180, 240, .34);

  --zp-status-progress-fg: #dec15f;
  --zp-status-progress-bg: rgba(222, 193, 95, .18);
  --zp-status-progress-bd: rgba(222, 193, 95, .34);

  --zp-status-ok-fg: #32cea4;
  --zp-status-ok-bg: rgba(50, 206, 164, .16);
  --zp-status-ok-bd: rgba(50, 206, 164, .32);

  --zp-status-attention-fg: #e59468;
  --zp-status-attention-bg: rgba(229, 148, 104, .18);
  --zp-status-attention-bd: rgba(229, 148, 104, .34);

  --zp-status-error-fg: #f39b9d;
  --zp-status-error-bg: rgba(243, 155, 157, .16);
  --zp-status-error-bd: rgba(243, 155, 157, .34);
}

/* ---------- Zustaende: setzen nur die Variablen ---------- */

/* Voreinstellung, damit ein unbekannter Zustand nicht ungestylt bleibt. */
[class*="moderation-state__"],
[class*="staffbase-state__"],
.field--name-moderation-state,
.staffbase-sync-badge,
.zp-badge {
  --zp-bg: var(--zp-status-neutral-bg);
  --zp-fg: var(--zp-status-neutral-fg);
  --zp-bd: var(--zp-status-neutral-bd);
}

/* Neu und Angelegt: informativ, noch keine Bearbeitung erfolgt. */
.moderation-state__new,
.moderation-state__created,
.zp-badge--new,
.zp-badge--created {
  --zp-bg: var(--zp-status-info-bg);
  --zp-fg: var(--zp-status-info-fg);
  --zp-bd: var(--zp-status-info-bd);
}

/* Entwurf: in Arbeit. Bewusst Bernstein statt Rot -- ein Entwurf ist ein
   regulaerer Zwischenschritt im Freigabeprozess, kein Fehler. */
.moderation-state__draft,
.zp-badge--draft {
  --zp-bg: var(--zp-status-progress-bg);
  --zp-fg: var(--zp-status-progress-fg);
  --zp-bd: var(--zp-status-progress-bd);
}

/* Veroeffentlicht: aktiv in myZINKPOWER. */
.moderation-state__published,
.zp-badge--published {
  --zp-bg: var(--zp-status-ok-bg);
  --zp-fg: var(--zp-status-ok-fg);
  --zp-bd: var(--zp-status-ok-bd);
}

/* Archiv beantragt: wartet auf Entscheidung. */
.moderation-state__request-archive,
.zp-badge--request-archive {
  --zp-bg: var(--zp-status-attention-bg);
  --zp-fg: var(--zp-status-attention-fg);
  --zp-bd: var(--zp-status-attention-bd);
}

/* Archiviert: abgeschlossen. Bleibt neutral. */
.moderation-state__archive,
.moderation-state__archived,
.zp-badge--archive {
  --zp-bg: var(--zp-status-neutral-bg);
  --zp-fg: var(--zp-status-neutral-fg);
  --zp-bd: var(--zp-status-neutral-bd);
}

/* Geplant zur Veroeffentlichung: terminiert, laeuft automatisch. */
.moderation-state__scheduled-for-publishing,
.zp-badge--scheduled-for-publishing {
  --zp-bg: var(--zp-status-info-bg);
  --zp-fg: var(--zp-status-info-fg);
  --zp-bd: var(--zp-status-info-bd);
}

/* Geplante Archivierung ist die folgenschwerere der beiden Terminierungen. */
.moderation-state__scheduled-for-archiving,
.zp-badge--scheduled-for-archiving {
  --zp-bg: var(--zp-status-attention-bg);
  --zp-fg: var(--zp-status-attention-fg);
  --zp-bd: var(--zp-status-attention-bd);
}

/* ---------- Staffbase-Synchronisationsstatus ---------- */

/*
 * Der Sync-Status erscheint an zwei Stellen mit unterschiedlichem Markup:
 *
 *  - Mitarbeiterseite und Verlaufsreiter rendern SyncStatusBadge::build()
 *    aus medialine_zinkpower_staffbase_interface:
 *      <span class="staffbase-sync-badge staffbase-sync-badge--synced">
 *
 *  - Die Uebersichtsspalte nutzt das Views-Feld mit Zustandsklasse an der
 *    Zelle -- dasselbe Muster wie der Moderationsstatus:
 *      <td class="... staffbase-state__synced"><span>Synced</span></td>
 *
 * Beide laufen hier zusammen, damit ein Zustand ueberall gleich aussieht.
 * Die Zustandsnamen stammen aus StaffbaseSyncStatus::STATE_*.
 */

.staffbase-state__synced,
.staffbase-sync-badge--synced {
  --zp-bg: var(--zp-status-ok-bg);
  --zp-fg: var(--zp-status-ok-fg);
  --zp-bd: var(--zp-status-ok-bd);
}

.staffbase-state__queued,
.staffbase-sync-badge--queued {
  --zp-bg: var(--zp-status-info-bg);
  --zp-fg: var(--zp-status-info-fg);
  --zp-bd: var(--zp-status-info-bd);
}

.staffbase-state__processing,
.staffbase-sync-badge--processing {
  --zp-bg: var(--zp-status-progress-bg);
  --zp-fg: var(--zp-status-progress-fg);
  --zp-bd: var(--zp-status-progress-bd);
}

.staffbase-state__never,
.staffbase-sync-badge--never {
  --zp-bg: var(--zp-status-neutral-bg);
  --zp-fg: var(--zp-status-neutral-fg);
  --zp-bd: var(--zp-status-neutral-bd);
}

/* Ein fehlgeschlagener Abgleich ist ein echter Fehler -- hier ist Rot richtig. */
.staffbase-state__failed,
.staffbase-sync-badge--failed {
  --zp-bg: var(--zp-status-error-bg);
  --zp-fg: var(--zp-status-error-fg);
  --zp-bd: var(--zp-status-error-bd);
}

/* ---------- Grundform: liest die Variablen ---------- */

.zp-badge,
td[class*="moderation-state__"] > span,
td[class*="staffbase-state__"] > span,
.staffbase-sync-badge,
.views-field-moderation-state .moderation-state span,
.field--name-moderation-state .field__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 2px 10px;
  border-radius: 11px;
  border: 1px solid var(--zp-bd);
  background: var(--zp-bg);
  color: var(--zp-fg);
  font-size: var(--gin-font-size-xs, .75rem);
  font-weight: var(--gin-font-weight-semibold, 600);
  line-height: 1.3;
  text-align: start;

  /* Beendet "Oes-ter-reich" und "Veroef-fent-licht". */
  hyphens: manual;
  white-space: nowrap;

  /* Das alte Theme zwang die Pille auf die volle Spaltenbreite. */
  width: auto;
}

/* Farbpunkt: macht die Zustaende auch ohne Farbwahrnehmung unterscheidbar. */
.zp-badge::before,
td[class*="moderation-state__"] > span::before,
td[class*="staffbase-state__"] > span::before,
.staffbase-sync-badge::before,
.field--name-moderation-state .field__item::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Die terminierten Zustaende tragen eine Uhr statt des Punktes. */
.zp-badge--scheduled-for-publishing::before,
.zp-badge--scheduled-for-archiving::before,
td.moderation-state__scheduled-for-publishing > span::before,
td.moderation-state__scheduled-for-archiving > span::before {
  content: "\f017";
  font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
  font-weight: 900;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  font-size: 10px;
}

/* ---------- Legende ---------- */

.zp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gin-spacing-xs, 8px);
  align-items: center;
}