/* =========================================================================
   NOX AI – Zentrales Button-System
   -------------------------------------------------------------------------
   Semantisches Konzept: Varianten folgen der Funktion, nicht der Optik.
     primary    → orange, die EINE Hauptaktion pro View
     secondary  → navy gefüllt, wichtige Sekundäraktionen
     ghost      → transparent/outline, neutrale Aktionen (Abbrechen, Zurück)
     success    → grün, positive Bestätigungen (Approve)
     danger     → rot, destruktive Aktionen (Löschen, Verwerfen)
   Größen: --sm (Listen/Karten), --md (Standard), --lg (CTAs in Modals)
   Einheitlich: border-radius 8px, Fokus-Ring, Disabled-State, Transition
   -------------------------------------------------------------------------
   Am Ende: Rückwärts-kompatible Aliase für bestehende Klassennamen im
   Dashboard, damit kein Markup angepasst werden muss.
   ========================================================================= */

/* ── Basis ────────────────────────────────────────────────────────────── */
.btn,
.btn-primary,
.btn-secondary,
.btn-execute,
.btn-reschedule,
.btn-confirm,
.btn-cancel,
.btn-approve,
.btn-skip,
.btn-send,
.btn-hs-detail,
.btn-hs-open,
.modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font);
  font-weight: 600;
  line-height: 1.2;
  border: 1.5px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease,
              color .15s ease, box-shadow .15s ease, transform .08s ease;
  -webkit-appearance: none;
  appearance: none;
  /* Default = md-Größe */
  padding: .6rem 1.1rem;
  font-size: .88rem;
}

.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-execute:focus-visible,
.btn-reschedule:focus-visible,
.btn-confirm:focus-visible,
.btn-cancel:focus-visible,
.btn-approve:focus-visible,
.btn-skip:focus-visible,
.btn-send:focus-visible,
.btn-hs-detail:focus-visible,
.btn-hs-open:focus-visible,
.modal-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 90, 138, .25);
}

.btn:disabled,
.btn[disabled],
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-execute:disabled,
.btn-reschedule:disabled,
.btn-confirm:disabled,
.btn-cancel:disabled,
.btn-approve:disabled,
.btn-skip:disabled,
.btn-send:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none !important;
}

.btn:not(:disabled):active,
.btn-primary:not(:disabled):active,
.btn-secondary:not(:disabled):active,
.btn-execute:not(:disabled):active,
.btn-reschedule:not(:disabled):active,
.btn-confirm:not(:disabled):active,
.btn-cancel:not(:disabled):active,
.btn-approve:not(:disabled):active,
.btn-skip:not(:disabled):active,
.btn-send:not(:disabled):active,
.btn-hs-detail:not(:disabled):active,
.btn-hs-open:not(:disabled):active,
.modal-btn:not(:disabled):active {
  transform: translateY(1px);
}

/* ── Größen-Modifier (neue API) ──────────────────────────────────────── */
.btn--sm { padding: .4rem .85rem; font-size: .78rem; border-radius: 7px; }
.btn--md { padding: .6rem 1.1rem;  font-size: .88rem; border-radius: 8px; }
.btn--lg { padding: .85rem 1.75rem; font-size: .95rem; border-radius: 9px; }

/* ── Varianten (neue API) ────────────────────────────────────────────── */
.btn--primary {
  background: var(--orange);
  color: #fff;
  font-weight: 700;
}
.btn--primary:not(:disabled):hover { background: var(--orange-h); }

.btn--secondary {
  background: var(--navy);
  color: #fff;
}
.btn--secondary:not(:disabled):hover { background: var(--navy-light); }

.btn--ghost {
  background: var(--white);
  color: var(--navy);
  border-color: var(--border);
}
.btn--ghost:not(:disabled):hover {
  border-color: var(--navy);
  background: var(--bg);
}

.btn--success {
  background: var(--success);
  color: #fff;
}
.btn--success:not(:disabled):hover { background: #15803d; }

.btn--danger {
  background: var(--error);
  color: #fff;
}
.btn--danger:not(:disabled):hover { background: #b91c1c; }


/* =========================================================================
   Rückwärts-kompatible Aliase für bestehende Klassennamen
   (mappen die alten Klassen auf die neuen Varianten – kein HTML-Refactor
   nötig, einheitliche Optik entsteht automatisch)
   ========================================================================= */

/* Primary – orange, Hauptaktion */
.btn-primary,
.btn-hs-detail,
.btn-hs-detail:visited {
  padding: .85rem 1.75rem;
  font-size: .95rem;
  font-weight: 700;
  border-radius: 9px;
  background: var(--orange);
  color: #fff;
}
.btn-primary:not(:disabled):hover,
.btn-hs-detail:not(:disabled):hover { background: var(--orange-h); }

/* btn-hs-detail kommt häufig mit kleinerer Schrift in Listen vor → md-Größe */
.btn-hs-detail {
  padding: .5rem 1rem;
  font-size: .82rem;
  border-radius: 8px;
}

/* Secondary (navy gefüllt) – wichtige Folgeaktionen */
.btn-execute,
.btn-confirm,
.btn-send,
.btn-approve { /* approve bleibt grün, unten überschrieben */
  background: var(--navy);
  color: #fff;
  padding: .5rem 1rem;
  font-size: .82rem;
  border-radius: 8px;
}
.btn-execute:not(:disabled):hover,
.btn-confirm:not(:disabled):hover,
.btn-send:not(:disabled):hover { background: var(--navy-light); }

/* Ghost (outline) – neutrale Aktionen */
.btn-secondary {
  padding: .85rem 1.5rem;
  font-size: .95rem;
  border-radius: 9px;
  background: var(--white);
  color: var(--navy);
  border: 1.5px solid var(--border);
}
.btn-secondary:not(:disabled):hover {
  border-color: var(--navy);
  background: var(--bg);
}

.btn-reschedule,
.btn-skip,
.btn-cancel,
.btn-hs-open,
.btn-hs-open:visited {
  background: var(--bg);
  color: var(--navy);
  border: 1px solid var(--border);
  padding: .4rem .85rem;
  font-size: .78rem;
  border-radius: 7px;
}
.btn-reschedule:not(:disabled):hover,
.btn-skip:not(:disabled):hover,
.btn-cancel:not(:disabled):hover,
.btn-hs-open:not(:disabled):hover {
  border-color: var(--navy-light);
  background: var(--border);
}
.btn-skip { color: var(--muted); }
.btn-hs-open,
.btn-hs-open:visited { color: var(--orange); }
.btn-hs-open:hover { color: var(--orange-h); }

/* Success – Bestätigungen */
.btn-approve {
  background: var(--success);
  color: #fff;
  padding: .5rem 1rem;
  font-size: .82rem;
  border-radius: 8px;
}
.btn-approve:not(:disabled):hover { background: #15803d; }

/* Modal-Buttons (historische API) */
.modal-btn {
  padding: .6rem 1.2rem;
  font-size: .85rem;
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
}
.modal-btn.primary {
  background: var(--orange);
  color: #fff;
  font-weight: 700;
  border-color: transparent;
}
.modal-btn.primary:not(:disabled):hover { background: var(--orange-h); }
.modal-btn.secondary {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
}
.modal-btn.secondary:not(:disabled):hover {
  border-color: var(--navy-light);
  background: var(--border);
}

/* Danger – destruktive Aktionen (Löschen, Als verloren markieren) */
.btn-danger {
  background: #c0392b;
  color: #fff;
  padding: .5rem 1rem;
  font-size: .82rem;
  border-radius: 8px;
  font-weight: 600;
}
.btn-danger:not(:disabled):hover { background: #a0311f; }

/* Modifier: macht aus jedem Sekundär-/Approve-/Confirm-Button einen
   destruktiven Button, ohne die Klassen-Basis zu tauschen. */
.btn-approve.is-danger,
.btn-confirm.is-danger,
.btn-execute.is-danger,
.btn-send.is-danger {
  background: #c0392b;
  color: #fff;
}
.btn-approve.is-danger:not(:disabled):hover,
.btn-confirm.is-danger:not(:disabled):hover,
.btn-execute.is-danger:not(:disabled):hover,
.btn-send.is-danger:not(:disabled):hover { background: #a0311f; }

/* Modifier: visueller Akzent (Orange) auf einem Navy-gefüllten Button –
   z.B. um im Quick-Reschedule-Panel eine der Datums-Optionen besonders
   hervorzuheben. */
.btn-confirm.is-highlight,
.btn-execute.is-highlight,
.btn-send.is-highlight {
  background: var(--orange);
  color: #fff;
}
.btn-confirm.is-highlight:not(:disabled):hover,
.btn-execute.is-highlight:not(:disabled):hover,
.btn-send.is-highlight:not(:disabled):hover { background: var(--orange-h); }

/* Kleine Context-Buttons – werden unverändert gelassen, bekommen nur den
   gemeinsamen Fokus-Ring über die Basis. Explizit NICHT in dieses System
   gezogen: .logout-btn (Sidebar, transparentes navy-Glass), .linkedin-btn
   (LinkedIn-Brand-Blau), .add-product-btn (gestrichelte Add-Kachel),
   .idea-btn.* (Marketing-Modul), .copy-btn / .idea-copy-btn (Icon-Knöpfe)
   – das sind bewusst eigenständige Komponenten, nicht Teil der
   allgemeinen Aktions-Hierarchie. */