/* =====================================================================
   Admin Button-System  ·  public/css/components/buttons.css
   Angel, 2026-06-23 — produktionsfertig, aus ANGEL-ADMIN-BUTTON-SYSTEM-SPEC.
   Drop-in: global VOR den per-Page-CSS einbinden (wie components/dropdowns.css).
   Tokens live-verifiziert (autofiles): --accent-primary #D03725,
   --accent-primary-text #ffffff (Auto-Kontrast, server-seitig je Tenant injiziert),
   --radius-md 10px. Neue semantische Button-Tokens unten definiert.
   HARTE REGELN: kein hardcoded white/#000 auf Buttons; nur Tokens;
   danger = Outline (bleibt vom rot-gebrandeten primary unterscheidbar);
   focus-visible auf jedem Button (a11y).
   ===================================================================== */

:root {
  --btn-danger: #dc2626;
  --btn-danger-hover: #b91c1c;
  --btn-danger-text: #ffffff;
  --btn-success: #10b981;
  --btn-success-hover: #059669;
  --btn-success-surface: rgba(16, 185, 129, .12);
  --btn-success-border: rgba(16, 185, 129, .34);
  --btn-surface: rgba(255, 255, 255, 0.07);
  --btn-surface-hover: rgba(255, 255, 255, 0.13);
  --btn-border: rgba(255, 255, 255, 0.14);
  --btn-border-hover: rgba(255, 255, 255, 0.24);
  --header-scroll-offset: 80px;
}

/* Basis */
.bln-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius-md, 10px);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.bln-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(208, 55, 37, .40); }

/* Größen */
.bln-btn--sm { padding: 7px 13px; font-size: 13px; }
.bln-btn--md { padding: 11px 18px; font-size: 14.5px; }

/* Primary — Text IMMER var(--accent-primary-text), NIE hardcoded white */
.bln-btn--primary { background: var(--accent-primary); color: var(--accent-primary-text, #fff); box-shadow: 0 2px 8px rgba(0,0,0,.28); }
.bln-btn--primary:hover { background: var(--accent-primary-hover, #bc2311); box-shadow: 0 4px 14px rgba(0,0,0,.34); }
.bln-btn--primary:active { transform: translateY(1px); filter: brightness(.94); }

/* Secondary — neutrale Glas-Fläche */
.bln-btn--secondary { background: var(--btn-surface); color: var(--text-primary, #f0f0f0); border-color: var(--btn-border); }
.bln-btn--secondary:hover { background: var(--btn-surface-hover); border-color: var(--btn-border-hover); }
.bln-btn--secondary:active { transform: translateY(1px); }

/* Danger — Outline by default, hover füllt solid (vom rot-gebrandeten primary unterscheidbar) */
.bln-btn--danger { background: transparent; color: var(--btn-danger); border-color: var(--btn-danger); }
.bln-btn--danger:hover { background: var(--btn-danger); color: var(--btn-danger-text); box-shadow: 0 4px 14px rgba(0,0,0,.34); }
.bln-btn--danger:active { transform: translateY(1px); filter: brightness(.94); }
.bln-btn--danger:focus-visible { box-shadow: 0 0 0 3px rgba(220,38,38,.40); }

/* Ghost — tertiär */
.bln-btn--ghost { background: transparent; color: var(--text-primary, #f0f0f0); border-color: transparent; }
.bln-btn--ghost:hover { background: var(--btn-surface); }
.bln-btn--ghost:active { transform: translateY(1px); }

/* Disabled — alle Varianten */
.bln-btn:disabled,
.bln-btn.is-disabled {
  opacity: .42;
  cursor: not-allowed;
  box-shadow: none;
  filter: none;
  transform: none;
  pointer-events: none;
}

/* Scroll-Offset für sticky Header (Header-Höhe 64px + Puffer) */
h1, h2, h3, h4, h5, h6 {
  scroll-margin-top: var(--header-scroll-offset);
}

/* =====================================================================
   Legacy compatibility layer — maps existing per-page .btn-* classes
   onto the new bln-btn system without touching every EJS file.
   Load buttons.css AFTER theme/design-system and BEFORE per-page CSS.
   ===================================================================== */

/* Base .btn when used alone */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius-md, 10px);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(208, 55, 37, .40);
}

/* Sizes */
.btn-sm,
.btn.btn-sm { padding: 7px 13px; font-size: 13px; }
.btn-md,
.btn.btn-md { padding: 11px 18px; font-size: 14.5px; }
.btn-full,
.btn.btn-full { width: 100%; }

/* Variant mapping */
.btn-primary,
.btn.btn-primary,
.btn-view,
.btn.btn-view {
  background: var(--accent-primary);
  color: var(--accent-primary-text, #fff);
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
}
.btn-primary:hover,
.btn.btn-primary:hover,
.btn-view:hover,
.btn.btn-view:hover {
  background: var(--accent-primary-hover, #bc2311);
  box-shadow: 0 4px 14px rgba(0,0,0,.34);
}
.btn-primary:active,
.btn.btn-primary:active,
.btn-view:active,
.btn.btn-view:active { transform: translateY(1px); filter: brightness(.94); }

.btn-success,
.btn.btn-success {
  background: var(--btn-success-surface);
  color: var(--btn-success);
  border-color: var(--btn-success-border);
  box-shadow: none;
}
.btn-success:hover,
.btn.btn-success:hover {
  background: rgba(16, 185, 129, .18);
  border-color: var(--btn-success);
  box-shadow: 0 4px 14px rgba(0,0,0,.24);
}
.btn-success:active,
.btn.btn-success:active { transform: translateY(1px); filter: brightness(.94); }

.btn-secondary,
.btn.btn-secondary,
.btn-warning,
.btn.btn-warning {
  background: var(--btn-surface);
  color: var(--text-primary, #f0f0f0);
  border-color: var(--btn-border);
}
.btn-secondary:hover,
.btn.btn-secondary:hover,
.btn-warning:hover,
.btn.btn-warning:hover {
  background: var(--btn-surface-hover);
  border-color: var(--btn-border-hover);
}
.btn-secondary:active,
.btn.btn-secondary:active,
.btn-warning:active,
.btn.btn-warning:active { transform: translateY(1px); }

.btn-danger,
.btn.btn-danger,
.btn-delete,
.btn.btn-delete {
  background: transparent;
  color: var(--btn-danger);
  border-color: var(--btn-danger);
}
.btn-danger:hover,
.btn.btn-danger:hover,
.btn-delete:hover,
.btn.btn-delete:hover {
  background: var(--btn-danger);
  color: var(--btn-danger-text);
  box-shadow: 0 4px 14px rgba(0,0,0,.34);
}
.btn-danger:active,
.btn.btn-danger:active,
.btn-delete:active,
.btn.btn-delete:active { transform: translateY(1px); filter: brightness(.94); }
.btn-danger:focus-visible,
.btn.btn-danger:focus-visible,
.btn-delete:focus-visible,
.btn.btn-delete:focus-visible { box-shadow: 0 0 0 3px rgba(220,38,38,.40); }

.btn-ghost,
.btn.btn-ghost,
.btn-outline,
.btn.btn-outline {
  background: transparent;
  color: var(--text-primary, #f0f0f0);
  border-color: transparent;
}
.btn-ghost:hover,
.btn.btn-ghost:hover,
.btn-outline:hover,
.btn.btn-outline:hover {
  background: var(--btn-surface);
}
.btn-ghost:active,
.btn.btn-ghost:active,
.btn-outline:active,
.btn.btn-outline:active { transform: translateY(1px); }

/* Disabled */
.btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled,
.btn-success:disabled,
.btn-warning:disabled,
.btn-ghost:disabled,
.btn-outline:disabled,
.btn.is-disabled,
.btn-primary.is-disabled,
.btn-secondary.is-disabled,
.btn-danger.is-disabled,
.btn-success.is-disabled,
.btn-warning.is-disabled,
.btn-ghost.is-disabled,
.btn-outline.is-disabled {
  opacity: .42;
  cursor: not-allowed;
  box-shadow: none;
  filter: none;
  transform: none;
  pointer-events: none;
}

/* =====================================================================
   Rollout-page override — body-scoped selectors beat per-page .action-btn
   and any leftover page-specific .btn-delete/.btn-view rules.
   ===================================================================== */
body .btn-view,
body .btn.btn-view {
  background: var(--accent-primary);
  color: var(--accent-primary-text, #fff);
  border: 1px solid var(--accent-primary);
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
}
body .btn-view:hover,
body .btn.btn-view:hover {
  background: var(--accent-primary-hover, #bc2311);
  box-shadow: 0 4px 14px rgba(0,0,0,.34);
}
body .btn-view:active,
body .btn.btn-view:active { transform: translateY(1px); filter: brightness(.94); }

body .btn-delete,
body .btn.btn-delete {
  background: transparent;
  color: var(--btn-danger);
  border: 1px solid var(--btn-danger);
}
body .btn-delete:hover,
body .btn.btn-delete:hover {
  background: var(--btn-danger);
  color: var(--btn-danger-text);
  box-shadow: 0 4px 14px rgba(0,0,0,.34);
}
body .btn-delete:active,
body .btn.btn-delete:active { transform: translateY(1px); filter: brightness(.94); }
body .btn-delete:focus-visible,
body .btn.btn-delete:focus-visible { box-shadow: 0 0 0 3px rgba(220,38,38,.40); }

/* Strong legacy overrides for pages that load their own button CSS later. */
body .btn-primary,
body .btn.btn-primary,
body .btn-view,
body .btn.btn-view {
  background: var(--accent-primary) !important;
  color: var(--accent-primary-text, #fff) !important;
  border: 1px solid var(--accent-primary) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.28) !important;
}
body .btn-primary:hover,
body .btn.btn-primary:hover,
body .btn-view:hover,
body .btn.btn-view:hover {
  background: var(--accent-primary-hover, #bc2311) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.34) !important;
}

body .btn-secondary,
body .btn.btn-secondary,
body .btn-warning,
body .btn.btn-warning {
  background: var(--btn-surface) !important;
  color: var(--text-primary, #f0f0f0) !important;
  border: 1px solid var(--btn-border) !important;
  box-shadow: none !important;
}
body .btn-secondary:hover,
body .btn.btn-secondary:hover,
body .btn-warning:hover,
body .btn.btn-warning:hover {
  background: var(--btn-surface-hover) !important;
  border-color: var(--btn-border-hover) !important;
}

body .btn-success,
body .btn.btn-success {
  background: var(--btn-success-surface) !important;
  color: var(--btn-success) !important;
  border: 1px solid var(--btn-success-border) !important;
  box-shadow: none !important;
}
body .btn-success:hover,
body .btn.btn-success:hover {
  background: rgba(16, 185, 129, .18) !important;
  border-color: var(--btn-success) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.24) !important;
}

body .btn-danger,
body .btn.btn-danger,
body .btn-delete,
body .btn.btn-delete {
  background: transparent !important;
  color: var(--btn-danger) !important;
  border: 1px solid var(--btn-danger) !important;
  box-shadow: none !important;
}
body .btn-danger:hover,
body .btn.btn-danger:hover,
body .btn-delete:hover,
body .btn.btn-delete:hover {
  background: var(--btn-danger) !important;
  color: var(--btn-danger-text) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.34) !important;
}
body .btn-danger.confirm,
body .btn.btn-danger.confirm,
body .btn-delete.confirm,
body .btn.btn-delete.confirm {
  background: var(--btn-danger) !important;
  color: var(--btn-danger-text) !important;
}