/* ══════════════════════════════════════════════════════════════
   Control: Buttons
   Zentrale Button-Klassen — alle Varianten, Größen, Zustände.
   Basis-Reset gilt für alle Varianten via Selektor-Liste.
   Verwendung:
     <button class="btn-primary">Speichern</button>
     <button class="btn-secondary btn-sm">Abbrechen</button>
     <button class="btn-danger btn-xs">Löschen</button>
     <button class="btn-ghost btn-icon" title="Schließen"> … </button>
     <button class="btn-memory">Memory löschen</button>
   ══════════════════════════════════════════════════════════════ */


/* ── Base Reset ────────────────────────────────────────────────── */
/* Gilt für alle Varianten — kein separate .btn Klasse nötig */

.btn-primary,
.btn-secondary,
.btn-danger,
.btn-ghost,
.btn-memory {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    font-size: 0.875rem;       /* 14px */
    font-weight: 500;
    line-height: 1;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
    white-space: nowrap;
    text-decoration: none;     /* für <a class="btn-…"> */
    vertical-align: middle;
    font-family: inherit;
    box-sizing: border-box;
}


/* ── Varianten ─────────────────────────────────────────────────── */

/* Primary — gefüllt, Brand-Farbe */
.btn-primary {
    background-color: var(--z-primary);
    color: white;
    border-color: var(--z-primary);
}
.btn-primary:hover {
    background-color: var(--z-primary-hover);
    border-color: var(--z-primary-hover);
}

/* Secondary — subtle Hintergrund, neutral */
.btn-secondary {
    background-color: var(--z-bg-subtle);
    color: var(--z-text-mid);
    border-color: var(--z-border);
}
.btn-secondary:hover {
    background-color: var(--z-bg-hover);
    border-color: var(--z-border);
}

/* Danger — gefüllt, Rot */
.btn-danger {
    background-color: #dc2626;
    color: white;
    border-color: #dc2626;
}
.btn-danger:hover {
    background-color: #b91c1c;
    border-color: #b91c1c;
}

/* Ghost — kein Hintergrund, nur Text */
.btn-ghost {
    background: transparent;
    color: var(--z-text-muted);
    border-color: transparent;
}
.btn-ghost:hover {
    background-color: var(--z-bg-hover);
}

/* Memory — Outline neutral, Hover → Danger-Ton */
/* Spezialklasse für den "Memory löschen"-Button im Chat */
.btn-memory {
    background-color: var(--z-bg-input);
    color: var(--z-text-mid);
    border-color: var(--z-border);
}
.btn-memory:hover {
    background-color: var(--z-error-bg);
    color: var(--z-error-text);
    border-color: var(--z-error-border);
}


/* ── Größen ────────────────────────────────────────────────────── */
/* Als Modifier auf eine Variante draufsetzen:
   <button class="btn-primary btn-sm"> oder <button class="btn-secondary btn-xs"> */

/* Standard: 14px, 0.5rem 1rem  (im Base Reset oben) */

/* Small — 13px, etwas weniger Padding */
.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;      /* 13px */
    border-radius: 0.4375rem;
}

/* Extra Small — 12px, kompakt */
.btn-xs {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;        /* 12px */
    border-radius: 0.375rem;
    gap: 0.25rem;
}

/* Icon-only — quadratisch, kein Text-Padding */
.btn-icon {
    padding: 0.4375rem;
    gap: 0;
}
.btn-sm.btn-icon {
    padding: 0.3125rem;
}
.btn-xs.btn-icon {
    padding: 0.25rem;
}


/* ── Disabled ──────────────────────────────────────────────────── */

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled,
.btn-ghost:disabled,
.btn-memory:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}


/* ── Dark Mode Anpassungen ─────────────────────────────────────── */

[data-theme="dark"] .btn-danger {
    background-color: #b91c1c;
    border-color: #b91c1c;
}
[data-theme="dark"] .btn-danger:hover {
    background-color: #991b1b;
    border-color: #991b1b;
}