/* ============================================================
 * ServiceHub Design-System — Erweiterungs-Komponenten
 * ============================================================
 *
 * Eingefuehrt: Session 2026-05-04 nach UX-Review von ChatGPT
 *  (siehe chatgpt-design-2.md im Projekt-Workspace).
 *
 * Ergaenzt das bestehende sh-design-system.css (835 Zeilen) um
 * vier explizit gefehlte Komponenten:
 *   - .sh-toast    (success | error | warning | info)
 *   - .sh-dialog   (confirm | danger | form)
 *   - .sh-skeleton (line | card | table-row)
 *   - .sh-tabs     (horizontal | mobile-scroll)
 *
 * Strategie laut ChatGPT:
 *   "Nicht riesig bauen. Nur Basisvarianten."
 *
 * Verwendet die bestehenden Tokens:
 *   --elmetic-accent, --elmetic-border, --elmetic-white
 *   --space-1..6, --text-xs/sm/lg/xl
 *   --radius / --radius-sm
 *   --shadow-sm
 *   --color-success/warning/error
 * ============================================================ */

/* ══════════════════════════════════════════
   1. TOASTS — Inline-Feedback fuer Save/Send/Book
   ══════════════════════════════════════════ */

.sh-toast-container {
  position: fixed;
  top: var(--space-4, 16px);
  right: var(--space-4, 16px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9000;
  pointer-events: none;
}
.sh-toast-container > .sh-toast { pointer-events: auto; }

.sh-toast {
  min-width: 280px;
  max-width: 420px;
  background: var(--elmetic-white, #fff);
  border: 1px solid var(--elmetic-border, #c0bebe);
  border-left: 4px solid var(--text-muted, #5c5c5c);
  border-radius: var(--radius, 6px);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
  padding: 12px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  animation: sh-toast-in 200ms ease-out;
}
.sh-toast__body { flex: 1 1 0; }
.sh-toast__title {
  font-size: var(--text-sm, 0.8125rem);
  font-weight: 700;
  color: var(--text, #2d2d2d);
  margin: 0 0 2px;
}
.sh-toast__msg {
  font-size: var(--text-sm, 0.8125rem);
  color: var(--text-muted, #5c5c5c);
  margin: 0;
  line-height: 1.4;
}
.sh-toast__close {
  background: transparent;
  border: 0;
  color: var(--text-muted, #5c5c5c);
  cursor: pointer;
  font-size: 16px;
  padding: 0;
  width: 20px;
  height: 20px;
  line-height: 1;
  flex-shrink: 0;
}
.sh-toast__close:hover { color: var(--text, #2d2d2d); }

.sh-toast--success { border-left-color: var(--color-success, #0d7d3e); }
.sh-toast--success .sh-toast__title { color: var(--color-success, #0d7d3e); }
.sh-toast--error { border-left-color: var(--color-error, #b91c1c); }
.sh-toast--error .sh-toast__title { color: var(--color-error, #b91c1c); }
.sh-toast--warning { border-left-color: var(--color-warning, #b45309); }
.sh-toast--warning .sh-toast__title { color: var(--color-warning, #b45309); }
.sh-toast--info { border-left-color: var(--elmetic-accent, #E73D25); }
.sh-toast--info .sh-toast__title { color: var(--elmetic-accent, #E73D25); }

@keyframes sh-toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════
   2. DIALOGS — Modal-Confirm fuer kritische Aktionen
   ══════════════════════════════════════════ */

.sh-dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 8500;
  animation: sh-dialog-fade 150ms ease-out;
}

.sh-dialog {
  background: var(--elmetic-white, #fff);
  border-radius: var(--radius, 6px);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
  min-width: 360px;
  max-width: 540px;
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: sh-dialog-in 200ms ease-out;
}
.sh-dialog__head {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--elmetic-border, #c0bebe);
}
.sh-dialog__title {
  font-size: var(--text-lg, 1rem);
  font-weight: 700;
  color: var(--text, #2d2d2d);
  margin: 0;
}
.sh-dialog__body {
  padding: 16px 20px;
  overflow-y: auto;
  font-size: var(--text-sm, 0.8125rem);
  color: var(--text, #2d2d2d);
  line-height: 1.5;
}
.sh-dialog__body p { margin: 0 0 8px; }
.sh-dialog__body p:last-child { margin-bottom: 0; }
.sh-dialog__foot {
  padding: 12px 20px;
  border-top: 1px solid var(--elmetic-border, #c0bebe);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  background: var(--bg-subtle, #f5f5f5);
}

/* Variants */
.sh-dialog--danger .sh-dialog__title { color: var(--color-error, #b91c1c); }
.sh-dialog--danger .sh-dialog__head { border-bottom-color: var(--color-error, #b91c1c); }
.sh-dialog--confirm .sh-dialog__title { color: var(--text, #2d2d2d); }

@keyframes sh-dialog-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes sh-dialog-in { from { transform: translateY(8px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }

/* ══════════════════════════════════════════
   3. SKELETONS — Loading-Placeholder statt Spinner
   ══════════════════════════════════════════ */

.sh-skeleton {
  display: block;
  background: linear-gradient(90deg,
    var(--bg-subtle, #eef0f3) 0%,
    var(--elmetic-border, #dadcde) 50%,
    var(--bg-subtle, #eef0f3) 100%);
  background-size: 200% 100%;
  animation: sh-skeleton-shimmer 1.4s linear infinite;
  border-radius: var(--radius-sm, 4px);
  height: 14px;
  width: 100%;
}
.sh-skeleton--line { height: 14px; }
.sh-skeleton--line-sm { height: 10px; max-width: 60%; }
.sh-skeleton--line-lg { height: 20px; max-width: 80%; }
.sh-skeleton--card {
  height: 100px;
  border-radius: var(--radius, 6px);
}
.sh-skeleton--table-row {
  height: 36px;
  margin-bottom: 4px;
}
.sh-skeleton--avatar {
  height: 40px;
  width: 40px;
  border-radius: 50%;
}

@keyframes sh-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sh-skeleton { animation: none; opacity: 0.6; }
}

/* ══════════════════════════════════════════
   4. TABS — Horizontal Navigation in Detailseiten
   ══════════════════════════════════════════ */

.sh-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--elmetic-border, #c0bebe);
  padding: 0;
  margin: 0 0 16px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}
.sh-tabs--mobile-scroll {
  /* Smooth touch-scroll auf Mobile */
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.sh-tabs__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
}
.sh-tabs__link,
.sh-tabs__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: var(--text-sm, 0.8125rem);
  font-weight: 500;
  color: var(--text-muted, #5c5c5c);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: color 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}
.sh-tabs__link:hover,
.sh-tabs__btn:hover {
  color: var(--text, #2d2d2d);
}
.sh-tabs__item--active .sh-tabs__link,
.sh-tabs__item--active .sh-tabs__btn,
.sh-tabs__link[aria-selected="true"],
.sh-tabs__btn[aria-selected="true"] {
  color: var(--elmetic-accent, #E73D25);
  border-bottom-color: var(--elmetic-accent, #E73D25);
  font-weight: 600;
}
.sh-tabs__count {
  display: inline-flex;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill, 9999px);
  background: var(--bg-subtle, #f5f5f5);
  color: var(--text-muted, #5c5c5c);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.sh-tabs__item--active .sh-tabs__count {
  background: var(--elmetic-accent, #E73D25);
  color: #fff;
}

/* ══════════════════════════════════════════
   Reduced Motion
   ══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .sh-toast, .sh-dialog, .sh-dialog-backdrop {
    animation: none;
  }
}