/* ============================================================
   Feed-AI — Globales Button-System
   Alle Änderungen hier wirken auf ALLE Seiten.

   Typen:      .btn-primary  .btn-secondary  .btn-danger  .btn-ghost
   Row-Aktionen: .btn-view  .btn-edit  .btn-dup  .btn-del
   Größen:     .btn-sm  .btn-lg  .btn-block
   Font:       Standard = DM Sans  |  .btn-syne = Syne (für Hero-CTAs)
   ============================================================ */

/* ── Basis ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    background   0.15s ease,
    border-color 0.15s ease,
    color        0.15s ease,
    opacity      0.15s ease,
    transform    0.15s ease,
    box-shadow   0.15s ease;
  -webkit-user-select: none;
  user-select: none;
  vertical-align: middle;
}

/* Disabled für alle Typen */
.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  pointer-events: none;
}

/* ── Größen ─────────────────────────────────────────────────── */
.btn-sm {
  padding: 5px 12px;
  font-size: 12px;
  border-radius: 8px;
  gap: 4px;
}

.btn-lg {
  padding: 14px 32px;
  font-size: 16px;
  border-radius: 12px;
  gap: 8px;
}

.btn-block {
  display: flex;
  width: 100%;
}

/* ── Font-Variante ──────────────────────────────────────────── */
.btn-syne {
  font-family: 'Syne', sans-serif;
}

/* ── PRIMARY: Hauptaktion (Accent-Farbe = grün/theme) ───────── */
.btn-primary {
  background: var(--accent);
  color: var(--btn-text);
  border-color: transparent;
}
.btn-primary:hover:not(:disabled):not([disabled]) {
  opacity: 0.88;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px var(--glow, rgba(0,229,160,0.3));
}
.btn-primary:active:not(:disabled) {
  transform: translateY(0);
  opacity: 1;
}

/* ── SECONDARY: Sekundäraktion (outlined/neutral) ───────────── */
.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover:not(:disabled):not([disabled]) {
  background: var(--card2);
  border-color: var(--accent);
  color: var(--text);
}
.btn-secondary:active:not(:disabled) {
  background: var(--card2);
}

/* ── DANGER: Gefährliche/Destruktive Aktion (rot) ───────────── */
.btn-danger {
  background: rgba(239, 68, 68, 0.08);
  color: #EF4444;
  border-color: rgba(239, 68, 68, 0.25);
}
.btn-danger:hover:not(:disabled):not([disabled]) {
  background: rgba(239, 68, 68, 0.18);
  border-color: #EF4444;
  color: #EF4444;
}
.btn-danger:active:not(:disabled) {
  background: rgba(239, 68, 68, 0.25);
}

/* ── GHOST: Dezent (kein Hintergrund, kein Border) ──────────── */
.btn-ghost {
  background: transparent;
  color: var(--muted);
  border-color: transparent;
}
.btn-ghost:hover:not(:disabled):not([disabled]) {
  background: var(--card2);
  color: var(--text);
  border-color: transparent;
}

/* ── ROW-AKTIONEN: Kleine Buttons in Tabellen ───────────────── */

/* Ansehen (grün) */
.btn-view {
  background: transparent;
  color: var(--accent);
  border-color: rgba(0, 229, 160, 0.2);
}
.btn-view:hover:not(:disabled):not([disabled]) {
  background: rgba(0, 229, 160, 0.08);
  border-color: rgba(0, 229, 160, 0.5);
}

/* Bearbeiten (blau) */
.btn-edit {
  background: transparent;
  color: #4488FF;
  border-color: rgba(68, 136, 255, 0.2);
}
.btn-edit:hover:not(:disabled):not([disabled]) {
  background: rgba(68, 136, 255, 0.08);
  border-color: #4488FF;
}

/* Duplizieren (orange) */
.btn-dup {
  background: transparent;
  color: #F59E0B;
  border-color: rgba(245, 158, 11, 0.2);
}
.btn-dup:hover:not(:disabled):not([disabled]) {
  background: rgba(245, 158, 11, 0.08);
  border-color: #F59E0B;
}

/* Löschen (rot, kompakter als .btn-danger) */
.btn-del {
  background: rgba(239, 68, 68, 0.06);
  color: #EF4444;
  border-color: rgba(239, 68, 68, 0.2);
}
.btn-del:hover:not(:disabled):not([disabled]) {
  background: rgba(239, 68, 68, 0.15);
  border-color: #EF4444;
}

/* ── High Contrast Theme Override ───────────────────────────── */
[data-theme="hc"] .btn-primary {
  font-weight: 900;
  color: #000000 !important;
  border: 2px solid #000000;
}
[data-theme="hc"] .btn-secondary,
[data-theme="hc"] .btn-ghost {
  border-width: 2px;
  font-weight: 700;
}
[data-theme="hc"] .btn-danger,
[data-theme="hc"] .btn-del {
  border-width: 2px;
  font-weight: 700;
}

/* ── Light/ChorusX: Sicherstellen dass btn-text stimmt ──────── */
[data-theme="light"] .btn-primary,
[data-theme="chorusx"] .btn-primary {
  color: var(--btn-text) !important;
}
[data-theme="light"] .btn-secondary {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}
[data-theme="light"] .btn-secondary:hover {
  background: var(--card2);
  border-color: var(--accent);
}