/**
 * ServiceHub – UX/Design-Refresh
 *
 * Additive Schicht ohne Breaking Changes.
 *  • Empty-States mit Icon + CTA
 *  • Skeleton-Loader für Tabellen / Karten
 *  • Status-Pipeline (Workflow-Anzeige für Rechnungen / Aufträge / Angebote)
 *  • Mahnstufen-Pill mit Farb-Codierung nach Tagen
 *  • Inline-Row-Aktionen (3-Punkt-Menü und Quick-Actions)
 *  • Sticky-Filter-Bar
 *  • Badge-Vereinheitlichung (.db-badge--* alias auf .badge--*)
 *  • Toast-Feedback
 *  • Touch-freundliche Aktion-Cells (44 px)
 */

/* ═══ EMPTY STATES ═══════════════════════════════════════════════ */
.sh-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  background: var(--color-surface, #fff);
  border: 1px dashed var(--color-border, #e2e8f0);
  border-radius: var(--radius-lg, 12px);
  color: var(--color-text-secondary, #475569);
}
.sh-empty__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-surface-alt, #f1f5f9);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--color-text-muted, #94a3b8);
}
.sh-empty__icon svg { width: 28px; height: 28px; }
.sh-empty__title {
  font-size: var(--text-lg, 1rem);
  font-weight: 600;
  color: var(--color-text, #1e293b);
  margin: 0 0 4px;
}
.sh-empty__desc {
  font-size: var(--text-sm, 0.8125rem);
  margin: 0 0 20px;
  max-width: 380px;
  line-height: 1.5;
}
.sh-empty__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.sh-empty--inline { padding: 24px 16px; border: 0; background: transparent; }

/* ═══ SKELETON LOADERS ═══════════════════════════════════════════ */
@keyframes sh-skeleton-pulse {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.sh-skeleton {
  display: inline-block;
  background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
  background-size: 200px 100%;
  background-repeat: no-repeat;
  border-radius: 4px;
  animation: sh-skeleton-pulse 1.4s ease-in-out infinite;
  height: 14px;
  width: 100%;
}
.sh-skeleton--lg  { height: 22px; }
.sh-skeleton--xl  { height: 32px; }
.sh-skeleton--circle { border-radius: 50%; }
.sh-skeleton-row {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr 1fr 1fr 80px;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-surface-alt, #f1f5f9);
}
.sh-skeleton-row > .sh-skeleton:nth-child(2) { width: 70%; }
.sh-skeleton-row > .sh-skeleton:nth-child(3) { width: 60%; }
.sh-skeleton-row > .sh-skeleton:nth-child(4) { width: 50%; }
.sh-skeleton-card {
  padding: 16px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-lg, 12px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ═══ STATUS-PIPELINE (z. B. Entwurf → Freigegeben → Versendet → Bezahlt) */
.sh-pipeline {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 8px 0 16px;
  flex-wrap: wrap;
}
.sh-pipeline__step {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  font-size: var(--text-xs, 0.6875rem);
  font-weight: 500;
  background: var(--color-surface-alt, #f1f5f9);
  color: var(--color-text-muted, #94a3b8);
  position: relative;
  border-radius: 4px;
}
.sh-pipeline__step:not(:last-child) { margin-right: 6px; }
.sh-pipeline__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; opacity: 0.6;
}
.sh-pipeline__step--done {
  background: var(--color-success-bg, #dcfce7);
  color: var(--color-success-text, #166534);
}
.sh-pipeline__step--current {
  background: var(--elmetic-accent, #e73d25);
  color: #fff;
  box-shadow: 0 1px 3px rgba(231,61,37,0.3);
}
.sh-pipeline__step--current .sh-pipeline__dot { opacity: 1; }
.sh-pipeline__step--cancelled {
  background: var(--color-error-bg, #fee2e2);
  color: var(--color-error-text, #991b1b);
}

/* ═══ MAHNSTUFEN-PILL ═════════════════════════════════════════════ */
.sh-overdue {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: var(--text-xs, 0.6875rem);
  font-weight: 600;
  white-space: nowrap;
}
.sh-overdue--ok {
  background: var(--color-success-bg, #dcfce7);
  color: var(--color-success-text, #166534);
}
.sh-overdue--soon {
  background: var(--color-info-bg, #dbeafe);
  color: var(--color-info-text, #1e40af);
}
.sh-overdue--warn {
  background: var(--color-warning-bg, #fef3c7);
  color: var(--color-warning-text, #92400e);
}
.sh-overdue--critical {
  background: var(--color-error-bg, #fee2e2);
  color: var(--color-error-text, #991b1b);
}
.sh-overdue--severe {
  background: var(--color-error, #dc2626);
  color: #fff;
}
.sh-overdue__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}

/* ═══ INLINE ROW-ACTIONS ═════════════════════════════════════════ */
.sh-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sh-row-actions .btn-sm {
  padding: 4px 10px;
  font-size: var(--text-xs, 0.6875rem);
}
.sh-row-action-icon {
  width: 32px; height: 32px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-muted, #94a3b8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 150ms ease;
}
.sh-row-action-icon:hover {
  background: var(--color-surface-alt, #f1f5f9);
  color: var(--color-text, #1e293b);
  border-color: var(--color-border, #e2e8f0);
}
.sh-row-action-icon svg { width: 16px; height: 16px; }
.sh-row-action-icon--danger:hover { color: var(--color-error, #dc2626); }
.sh-row-action-icon--success:hover { color: var(--color-success, #16a34a); }

/* ═══ STICKY-FILTER-BAR ══════════════════════════════════════════ */
.sh-filter-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--color-surface, #fff);
  padding: 12px 16px;
  margin: 0 -16px 16px;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.sh-filter-bar .input,
.sh-filter-bar .select { min-width: 200px; }

/* ═══ STATUS-BADGE-ALIASE — alle Schreibweisen auf einer Linie ═══
   Vorher: .db-badge--ok / .badge-success / .status-badge--success — drei Sets.
   Hier vereinheitlichen wir die Optik.                              */
.db-badge,
.status-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: var(--text-xs, 0.6875rem);
  font-weight: 500;
  line-height: 1.6;
}
.db-badge--ok,
.status-badge--success {
  background: var(--color-success-bg, #dcfce7);
  color: var(--color-success-text, #166534);
}
.db-badge--warn,
.status-badge--warning {
  background: var(--color-warning-bg, #fef3c7);
  color: var(--color-warning-text, #92400e);
}
.db-badge--danger,
.status-badge--danger {
  background: var(--color-error-bg, #fee2e2);
  color: var(--color-error-text, #991b1b);
}
.db-badge--info,
.status-badge--info {
  background: var(--color-info-bg, #dbeafe);
  color: var(--color-info-text, #1e40af);
}
.db-badge--neutral,
.status-badge--neutral {
  background: var(--color-surface-alt, #f1f5f9);
  color: var(--color-text-secondary, #475569);
}
.status-badge--accent {
  background: var(--elmetic-accent-dim, rgba(231,61,37,0.1));
  color: var(--elmetic-accent, #e73d25);
}

/* ═══ TOAST ══════════════════════════════════════════════════════ */
.sh-toast-stack {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: var(--z-tooltip, 1100);
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
  max-width: 360px;
}
.sh-toast {
  pointer-events: auto;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-left: 4px solid var(--color-info, #3b82f6);
  padding: 12px 16px;
  border-radius: var(--radius, 8px);
  box-shadow: var(--shadow-lg, 0 10px 15px rgba(0,0,0,0.08));
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--text-sm, 0.8125rem);
  color: var(--color-text, #1e293b);
  animation: sh-toast-in 200ms ease-out;
  max-width: 360px;
}
@keyframes sh-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sh-toast--success { border-left-color: var(--color-success, #16a34a); }
.sh-toast--warning { border-left-color: var(--color-warning, #f59e0b); }
.sh-toast--error   { border-left-color: var(--color-error, #dc2626); }
.sh-toast__icon {
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: 1px;
  color: var(--color-info, #3b82f6);
}
.sh-toast--success .sh-toast__icon { color: var(--color-success, #16a34a); }
.sh-toast--warning .sh-toast__icon { color: var(--color-warning, #f59e0b); }
.sh-toast--error   .sh-toast__icon { color: var(--color-error, #dc2626); }
.sh-toast__body { flex: 1; min-width: 0; }
.sh-toast__title { font-weight: 600; line-height: 1.3; margin: 0; }
.sh-toast__desc  { color: var(--color-text-secondary, #475569); margin: 2px 0 0; line-height: 1.4; }
.sh-toast__close {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border: 0; background: transparent;
  border-radius: 4px;
  cursor: pointer;
  color: var(--color-text-muted, #94a3b8);
  display: flex; align-items: center; justify-content: center;
}
.sh-toast__close:hover { background: var(--color-surface-alt, #f1f5f9); }

/* ═══ SH-DIALOG (Confirm/Prompt/Choice) ══════════════════════════ */
.sh-dialog {
  border: 0;
  padding: 0;
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-xl, 0 20px 25px rgba(0,0,0,0.10));
  max-width: 480px;
  width: calc(100vw - 32px);
  background: var(--color-surface, #fff);
}
.sh-dialog::backdrop {
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(2px);
}
.sh-dialog__header {
  padding: 20px 24px 8px;
}
.sh-dialog__title {
  font-size: var(--text-lg, 1rem);
  font-weight: 600;
  margin: 0;
  color: var(--color-text, #1e293b);
}
.sh-dialog__body {
  padding: 8px 24px 16px;
  font-size: var(--text-sm, 0.8125rem);
  color: var(--color-text-secondary, #475569);
  line-height: 1.5;
}
.sh-dialog__body label { display: block; margin-bottom: 6px; font-weight: 500; color: var(--color-text, #1e293b); }
.sh-dialog__body input[type="text"],
.sh-dialog__body input[type="number"],
.sh-dialog__body textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius, 8px);
  font-size: var(--text-sm, 0.8125rem);
  font-family: inherit;
}
.sh-dialog__choices {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 4px;
}
.sh-dialog__choice {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius, 8px);
  cursor: pointer;
  transition: all 150ms ease;
}
.sh-dialog__choice:hover {
  border-color: var(--elmetic-accent, #e73d25);
  background: var(--elmetic-accent-light, #fef3f2);
}
.sh-dialog__choice input[type="radio"],
.sh-dialog__choice input[type="checkbox"] { margin-top: 2px; }
.sh-dialog__choice-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sh-dialog__choice-title { display: block; font-weight: 500; color: var(--color-text, #1e293b); font-size: var(--text-sm, 0.8125rem); line-height: 1.35; }
.sh-dialog__choice-desc  { display: block; font-size: var(--text-xs, 0.6875rem); color: var(--color-text-muted, #94a3b8); line-height: 1.4; }
.sh-dialog__footer {
  padding: 12px 24px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--color-surface-alt, #f1f5f9);
  background: var(--color-bg, #f8fafc);
  border-radius: 0 0 var(--radius-lg, 12px) var(--radius-lg, 12px);
}
.sh-dialog__error {
  color: var(--color-error, #dc2626);
  font-size: var(--text-xs, 0.6875rem);
  margin: 4px 0 0;
  display: none;
}
.sh-dialog__error.is-visible { display: block; }
.sh-dialog__preview {
  background: var(--color-surface-alt, #f1f5f9);
  border-radius: var(--radius, 8px);
  padding: 12px;
  font-size: var(--text-xs, 0.6875rem);
  margin-top: 12px;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
}
.sh-dialog__preview-label { color: var(--color-text-muted, #94a3b8); }
.sh-dialog__preview-value { color: var(--color-text, #1e293b); font-weight: 500; }

/* ═══ TABELLE: VERBESSERUNG FÜR ALLE LIST-VIEWS ══════════════════ */
.table tbody tr,
.data-table tbody tr,
.sh-table tbody tr,
.db-table tbody tr {
  transition: background 120ms ease;
}
.table tbody tr.row--danger td,
.data-table tbody tr.row--danger td { box-shadow: inset 3px 0 0 var(--color-error, #dc2626); }
.table tbody tr.row--warning td { box-shadow: inset 3px 0 0 var(--color-warning, #f59e0b); }
.table tbody tr.row--success td { box-shadow: inset 3px 0 0 var(--color-success, #16a34a); }

/* ═══ KPI-CARD POLISH ═════════════════════════════════════════════ */
.sh-kpi-card {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-lg, 12px);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 150ms ease;
}
.sh-kpi-card[data-clickable="true"] {
  cursor: pointer;
}
.sh-kpi-card[data-clickable="true"]:hover {
  border-color: var(--elmetic-accent, #e73d25);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md, 0 4px 6px rgba(0,0,0,0.07));
}
.sh-kpi-card__label {
  font-size: var(--text-xs, 0.6875rem);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-text-muted, #94a3b8);
  font-weight: 500;
}
.sh-kpi-card__value {
  font-size: var(--text-2xl, 1.375rem);
  font-weight: 700;
  color: var(--color-text, #1e293b);
  line-height: 1.2;
}
.sh-kpi-card__sub {
  font-size: var(--text-xs, 0.6875rem);
  color: var(--color-text-muted, #94a3b8);
}
.sh-kpi-card--danger .sh-kpi-card__value { color: var(--color-error, #dc2626); }
.sh-kpi-card--warn   .sh-kpi-card__value { color: var(--color-warning, #f59e0b); }
.sh-kpi-card--ok     .sh-kpi-card__value { color: var(--color-success, #16a34a); }

/* ═══ MOBILE / TOUCH ══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .sh-empty { padding: 32px 16px; }
  .sh-pipeline__step { padding: 8px 12px; font-size: var(--text-sm, 0.8125rem); }
  .sh-row-action-icon { width: 40px; height: 40px; }
  .sh-filter-bar { flex-direction: column; align-items: stretch; }
  .sh-filter-bar .input, .sh-filter-bar .select { min-width: 0; width: 100%; }
  .sh-toast-stack {
    bottom: 12px; right: 12px; left: 12px;
    max-width: none;
  }
  .sh-toast { max-width: none; }
}