/* ══════════════════════════════════════════════
   LEGIO — Components
   Buttons, Cards, Badges, Inputs, Toasts
   ══════════════════════════════════════════════ */

/* ── Buttons ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--accent);
  color: var(--text-inverse);
  padding: 9px 18px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(0);
}
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  padding: 8px 18px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-secondary:hover {
  background: var(--bg-subtle);
  border-color: var(--text-muted);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-ghost:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: #FEF2F2;
  color: #DC2626;
  border: 1px solid #FECACA;
  padding: 8px 18px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-danger:hover {
  background: #DC2626;
  color: var(--text-inverse);
}

/* Full width variant */
.btn-full {
  width: 100%;
}

/* ── Inputs ── */
.input {
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 9px 14px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}
.input::placeholder {
  color: var(--text-muted);
}

/* ── Form Groups ── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

/* ── Cards ── */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}

/* ── Badges ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
  flex-shrink: 0;
}

/* ── Toast ── */
.toast-container {
  position: fixed;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  pointer-events: none;
}

.toast {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--text-primary);
  color: var(--text-inverse);
  padding: 10px 18px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  pointer-events: auto;
  animation: toastIn 0.25s ease, toastOut 0.2s ease 2.3s forwards;
}

.toast-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.toast--success .toast-icon { color: #4ADE80; }
.toast--warning .toast-icon { color: #F59E0B; }
.toast--error .toast-icon   { color: #F87171; }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(8px); }
}

/* ── Stub-Page für noch nicht implementierte Module ── */
.stub-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-8);
  text-align: center;
}

.stub-page-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: var(--accent-light);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
}

.stub-page-icon svg {
  width: 28px;
  height: 28px;
}

.stub-page h1 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.stub-page p {
  font-size: 15px;
  color: var(--text-secondary);
  max-width: 480px;
  line-height: 1.6;
  margin-bottom: var(--space-6);
}

.stub-page-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
}