/* UI-08 — Tappr-Komponenten-Library
 * Quelle: tappr_docs/11_design.md + _design/desktop_handoff/...
 *
 * Wiederverwendbare Building-Blocks fuer Page-Migrationen ab UI-08.
 * Alle Werte ueber var(--tappr-*) aus tokens-tappr.css. Naming-Konvention
 * .tappr-* Prefix analog topbar-tappr.css (UI-04).
 *
 * Komponenten: page-header, card, kpi(-grid), btn (primary/ghost/danger),
 * badge (--ok/--warn/--info/--neutral/--error), table, panel, banner,
 * empty-state, grid-2.
 *
 * Animation/Polish gestuetzt durch emil-design-eng (instant Press-Feedback,
 * keine Animation auf high-frequency Aktionen) + web-design-guidelines
 * (focus-visible, touch-action, semantic HTML, prefers-reduced-motion).
 */

/* ─── Page-Header ─────────────────────────────────────────── */
.tappr-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 0 22px;
  border-bottom: 1px solid var(--tappr-border-2);
  margin-bottom: 28px;
}
.tappr-page-header-eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--tappr-mute);
  margin: 0 0 6px 0;
}
.tappr-page-header-title {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.5px;
  color: var(--tappr-ink);
  margin: 0;
  line-height: 1.2;
}
.tappr-page-header-subtitle {
  font-size: 14px;
  color: var(--tappr-mute);
  margin: 6px 0 0 0;
}
.tappr-page-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

/* .tappr-breadcrumb-bar — eigene Sticky-Leiste direkt unter der
 * Backoffice-Topbar (top: 60px). Cremiger Hintergrund analog Topbar,
 * dezente Borders oben + unten. Pfad-Items links, leerer Slot rechts
 * fuer spaetere Actions. */
.tappr-breadcrumb-bar {
  position: sticky;
  /* UI-TOPBAR-VISUAL-FIX-05 — top muss exakt der Topbar-Hoehe entsprechen
   * (--tappr-topbar-h = 58px). Vorher 60px → 2px-Schlitz durch den der
   * Page-BG beim Scrollen sichtbar war. */
  top: var(--tappr-topbar-h, 58px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 32px;
  background: var(--tappr-bg-softer);
  border-bottom: 1px solid var(--tappr-border-2);
  /* z-index 20 (unter --tappr-topbar-z 30, unter --tappr-topbar-dropdown-z 40,
   * damit Menue-Dropdowns aus der Topbar die Breadcrumb-Bar ueberlappen). */
  z-index: 20;
  font-size: 12.5px;
  color: var(--tappr-mute);
}
.tappr-breadcrumb-bar-pfad {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.tappr-breadcrumb-bar-item {
  color: var(--tappr-mute);
  text-decoration: none;
  transition: color 120ms ease;
  white-space: nowrap;
}
.tappr-breadcrumb-bar-item:hover {
  color: var(--tappr-ink);
}
/* Breadcrumb-Root-Skeleton: dezenter Platzhalter, bis topbar-tappr.js den
 * echten Venue-Namen aus der Session einsetzt (kein hartkodierter Name im
 * Markup, kein "support-tappr"-Blitz). is-loading wird beim Befuellen entfernt. */
.tappr-breadcrumb-root.is-loading {
  display: inline-block;
  min-width: 72px;
  height: 0.85em;
  border-radius: 4px;
  color: transparent;
  vertical-align: middle;
  background: linear-gradient(90deg, var(--tappr-bg-soft) 25%, var(--tappr-border) 50%, var(--tappr-bg-soft) 75%);
  background-size: 200% 100%;
  animation: tappr-breadcrumb-skeleton 1.2s ease-in-out infinite;
}
.tappr-breadcrumb-root.is-loading:hover { color: transparent; }
@keyframes tappr-breadcrumb-skeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.tappr-breadcrumb-bar-sep {
  width: 12px;
  height: 12px;
  display: inline-flex;
  align-items: center;
  color: var(--tappr-mute-2);
  flex-shrink: 0;
}
.tappr-breadcrumb-bar-current {
  color: var(--tappr-ink);
  /* UI-TOPBAR-VISUAL-FIX-02 — Demo nutzt <strong> (Browser-Default 700) */
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tappr-breadcrumb-bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ─── Card ────────────────────────────────────────────────── */
.tappr-card {
  background: var(--tappr-bg);
  border: 1px solid var(--tappr-border);
  border-radius: 10px;
  padding: 16px 18px;
}
.tappr-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--tappr-border-2);
  margin-bottom: 12px;
  gap: 12px;
}
.tappr-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--tappr-ink);
  margin: 0;
}
.tappr-card-body { /* default-flow */ }
.tappr-card-footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--tappr-border-2);
}

/* ─── KPI-Grid + KPI-Card ─────────────────────────────────── */
.tappr-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.tappr-kpi-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) {
  .tappr-kpi-grid,
  .tappr-kpi-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .tappr-kpi-grid,
  .tappr-kpi-grid--3 { grid-template-columns: 1fr; }
}
.tappr-kpi {
  padding: 16px 18px;
  background: var(--tappr-bg);
  border: 1px solid var(--tappr-border);
  border-radius: 10px;
  min-width: 0;
}
.tappr-kpi-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--tappr-mute);
  margin: 0;
}
.tappr-kpi-value {
  font-size: 28px;
  font-weight: 600;
  color: var(--tappr-ink);
  margin: 8px 0 0 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tappr-kpi-delta {
  font-size: 12px;
  color: var(--tappr-mute);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.tappr-kpi-delta--up { color: var(--tappr-ok); }
.tappr-kpi-delta--down { color: var(--tappr-red-text); }

/* ─── Buttons ─────────────────────────────────────────────── */
.tappr-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
  border: 1px solid var(--tappr-border);
  background: var(--tappr-bg);
  color: var(--tappr-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: transform 160ms var(--tappr-ease-out),
              background-color 160ms ease,
              color 160ms ease,
              border-color 160ms ease;
}
.tappr-btn:active { transform: scale(0.97); }
.tappr-btn:focus-visible {
  outline: 2px solid var(--tappr-red);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .tappr-btn:hover { background: var(--tappr-bg-soft); }
}
.tappr-btn[disabled],
.tappr-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}
.tappr-btn--primary {
  background: var(--tappr-red);
  color: #fff;
  border-color: var(--tappr-red);
}
@media (hover: hover) and (pointer: fine) {
  .tappr-btn--primary:hover {
    background: var(--tappr-red-text);
    border-color: var(--tappr-red-text);
  }
}
.tappr-btn--ghost {
  background: transparent;
  border-color: var(--tappr-border);
}
.tappr-btn--danger {
  background: var(--tappr-red-text);
  color: #fff;
  border-color: var(--tappr-red-text);
}
.tappr-btn--sm {
  padding: 6px 10px;
  font-size: 12px;
}
.tappr-btn--icon {
  width: 30px;
  height: 30px;
  padding: 0;
  justify-content: center;
}
.tappr-btn--icon-sm {
  width: 28px;
  height: 28px;
  padding: 0;
  justify-content: center;
}
.tappr-btn--lg {
  padding: 12px 20px;
  font-size: 15px;
  min-height: 48px;
  border-radius: 10px;
}
.tappr-btn--block {
  display: flex;
  width: 100%;
}
.tappr-btn--outline {
  background: var(--tappr-bg);
  border-color: var(--tappr-border);
}
@media (hover: hover) and (pointer: fine) {
  .tappr-btn--outline:hover {
    background: var(--tappr-bg-soft);
    border-color: var(--tappr-ink);
  }
}
.tappr-btn--text {
  background: transparent;
  border-color: transparent;
  color: var(--tappr-mute);
  padding-left: 4px;
  padding-right: 4px;
}
@media (hover: hover) and (pointer: fine) {
  .tappr-btn--text:hover {
    color: var(--tappr-red);
    background: transparent;
  }
}

/* ─── Badge ───────────────────────────────────────────────── */
.tappr-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--tappr-pill-bg);
  color: var(--tappr-mute);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-family: inherit;
  flex-shrink: 0;
}
.tappr-badge--ok      { background: var(--tappr-ok-soft);   color: var(--tappr-ok); }
/* Owner-Decision 17.05.: warn + info beide gelb (amber-soft + amber).
 * Fehler (--error) bleibt rot. Drei klare Severity-Farben. */
.tappr-badge--warn    { background: var(--tappr-warn-soft);      color: var(--tappr-warn); }
.tappr-badge--info    { background: var(--tappr-warn-soft);      color: var(--tappr-warn); }
.tappr-badge--neutral { background: var(--tappr-pill-bg);   color: var(--tappr-mute); }
.tappr-badge--error   { background: var(--tappr-red);       color: #fff; }
/* Block AR-C: weiches Coral fuer aktive Aktionen im Artikel-Listing.
 * Pattern analog --ok/--warn (soft-BG + sat-Text). */
.tappr-badge--promo   { background: var(--tappr-red-soft);  color: var(--tappr-red-text); }
.tappr-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  flex-shrink: 0;
}

/* ─── Table ───────────────────────────────────────────────── */
.tappr-table-wrap {
  /* overflow-x: clip + overflow-y: visible vermeiden den CSS-Spec-Effekt
   * "non-visible overflow-x setzt overflow-y zwangsweise auf auto",
   * der bei `overflow-x: auto` einen unerwuenschten zweiten vertikalen
   * Scrollbar zusaetzlich zum Body-Scroll erzeugt. Auf Mobile wird
   * horizontal-Scroll wieder aktiviert. */
  overflow-x: clip;
  overflow-y: visible;
  border: 1px solid var(--tappr-border);
  border-radius: 10px;
  /* UI-TABLE-FLAT-03 (18.05) — Wrapper-Innenraum weiss; thead trägt
   * den cremigen Ton allein, dadurch sichtbarer Header-Body-Kontrast.
   * Ersetzt UI-TOPBAR-VISUAL-FIX-14 (Wrapper cremig, Designwechsel
   * nach Owner-Sichttest). */
  background: var(--tappr-bg);
}
@media (max-width: 768px) {
  .tappr-table-wrap { overflow-x: auto; }
}
.tappr-table {
  width: 100%;
  border-collapse: collapse;
}
.tappr-table th {
  /* UI-TOPBAR-VISUAL-FIX-14 — Mockup-Werte (demo_31200c49.js:92-97):
   * padding 10×18, font 10.5, letter-spacing 1.2, border t.border.
   * UI-TABLE-FLAT-01 (18.05) — Background ueber neuen Token statt
   * --tappr-bg-softer, damit thead-Farbe unabhaengig vom Card-BG ist. */
  padding: 10px 18px;
  text-align: left;
  background: var(--tappr-table-header-bg);
  border-bottom: 1px solid var(--tappr-border);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--tappr-mute);
  font-weight: 600;
  white-space: nowrap;
}
.tappr-table td {
  /* UI-TOPBAR-VISUAL-FIX-14 — Mockup-Padding 14×18 (demo_31200c49.js:108) */
  padding: 14px 18px;
  border-bottom: 1px solid var(--tappr-border-2);
  font-size: 13px;
  color: var(--tappr-ink-2);
}
.tappr-table tr:last-child td { border-bottom: 0; }
.tappr-table tbody tr {
  transition: background-color 120ms ease;
}
/* UI-TABLE-FLAT-01 (18.05) — Zebra-Striping entfernt, Hover dezent ueber Token.
 * Vorher: nth-child(even) weiss + Hover pill-bg (UI-TABLE-ZEBRA-01).
 * Jetzt: flacher Body-BG, einziger Tonwechsel ueber Hover. */
@media (hover: hover) and (pointer: fine) {
  .tappr-table tbody tr:hover {
    background: var(--tappr-table-row-hover);
  }
}
.tappr-table-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ─── Panel (generic Container fuer Listen/Sektionen) ─────── */
.tappr-panel {
  background: var(--tappr-bg);
  border: 1px solid var(--tappr-border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tappr-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--tappr-border-2);
  gap: 12px;
}
.tappr-panel-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--tappr-ink);
  margin: 0;
}
.tappr-panel-body {
  padding: 8px 0;
}
.tappr-panel-body--padded {
  padding: 14px 18px;
}

/* ─── Empty-State ─────────────────────────────────────────── */
.tappr-empty-state {
  padding: 32px 16px;
  text-align: center;
  color: var(--tappr-mute);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.tappr-empty-state-icon {
  color: var(--tappr-mute-2);
  display: inline-flex;
}
.tappr-empty-state-text {
  font-size: 13px;
  margin: 0;
}

/* ─── Toast ─────────────────────────────────────────────────
 * Rebrand 18.05.: alte .toast-* Klassen auf tappr-* migriert.
 * Verhalten unverändert (Region top-right, Slide-in von rechts,
 * is-visible toggle). TABU-ZONE (kiosk-web/css/toast.css) bleibt
 * mit alten .toast-Namen — eigenes Mirror, unabhängiges System.
 */
.tappr-toast-region {
  position: fixed;
  top: var(--space-6);
  right: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: var(--z-toast);
  pointer-events: none;
}
.tappr-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 280px;
  max-width: 400px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--tappr-ink);
  color: var(--on-ink);
  font-size: var(--fs-body);
  font-weight: 500;
  box-shadow: var(--shadow-lift);
  pointer-events: auto;
  opacity: 0;
  transform: translateX(12px);
  transition:
    opacity var(--dur-state) var(--ease-smooth),
    transform var(--dur-state) var(--ease-smooth);
}
.tappr-toast.is-visible {
  opacity: 1;
  transform: translateX(0);
}
/* Saturierte Status-Hintergründe — weisse Schrift hat in beiden Themes
 * genug Kontrast. Owner-Decision 17.05.: Info+Warning = gelb-orange,
 * Success = gruen, Error = rot.
 * #b45309 (amber-700) statt --amber, weil --amber (#f59e0b) mit Weiss
 * nur ~2.3:1 Kontrast hätte. */
.tappr-toast--success { background: var(--tappr-ok); color: #fff; }
.tappr-toast--error   { background: var(--tappr-red-text);   color: #fff; }
.tappr-toast--warning { background: #b45309;      color: #fff; }
.tappr-toast-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}
.tappr-toast-body {
  flex: 1;
  min-width: 0;
}
.tappr-toast-title {
  font-weight: 600;
  margin-bottom: 2px;
}
.tappr-toast-msg {
  font-weight: 400;
  font-size: var(--fs-body-sm);
}
.tappr-toast-close {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: currentColor;
  opacity: 0.7;
  cursor: pointer;
  border-radius: var(--radius-xs);
}
.tappr-toast-close:hover { opacity: 1; }
.tappr-toast-close svg {
  width: 12px;
  height: 12px;
}
/* SB9: optionaler Inline-Action-Button im Toast (z.B. "Sofort
 * aktualisieren" im Save-Toast). Dezent, kein voller btn-Overhead. */
.tappr-toast-action {
  flex-shrink: 0;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm, 6px);
  color: currentColor;
  font: inherit;
  font-size: var(--fs-body-sm, 13px);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease;
}
.tappr-toast-action:hover {
  background: rgba(255, 255, 255, 0.12);
}
@media (max-width: 640px) {
  .tappr-toast-region {
    top: auto;
    bottom: var(--space-4);
    left: var(--space-4);
    right: var(--space-4);
  }
  .tappr-toast {
    max-width: 100%;
    min-width: 0;
  }
}

/* ─── Banner (Test-Modus, Onboarding etc.) ────────────────── */
.tappr-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid;
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.45;
}
.tappr-banner--warn {
  background: var(--tappr-red-soft);
  color: var(--tappr-red-text);
  border-color: rgba(178, 58, 31, 0.19);
}
.tappr-banner--info {
  background: var(--tappr-bg-soft);
  color: var(--tappr-ink-2);
  border-color: var(--tappr-border);
}
.tappr-banner--soft {
  background: var(--tappr-bg-softer);
  color: var(--tappr-ink-2);
  border-color: var(--tappr-border-2);
}
.tappr-banner-body {
  flex: 1;
  min-width: 0;
}
.tappr-banner-title {
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}
.tappr-banner-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* ─── Generic Layouts ─────────────────────────────────────── */
.tappr-grid-2 {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
}
@media (max-width: 1024px) {
  .tappr-grid-2 { grid-template-columns: 1fr; }
}

/* ─── Filter-Bar (UI-NOTIF-01, wiederverwendbar fuer UI-09+) ─── */
.tappr-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--tappr-bg);
  border: 1px solid var(--tappr-border);
  border-radius: 10px;
  margin-bottom: 16px;
}
.tappr-filter-bar-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--tappr-mute);
  margin-right: 4px;
}
.tappr-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  background: transparent;
  color: var(--tappr-ink-2);
  border: 1px solid var(--tappr-border);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 160ms var(--tappr-ease-out),
              background-color 160ms ease,
              color 160ms ease,
              border-color 160ms ease;
}
.tappr-filter-pill:active { transform: scale(0.97); }
.tappr-filter-pill:focus-visible {
  outline: 2px solid var(--tappr-red);
  outline-offset: 2px;
}
.tappr-filter-pill[aria-pressed="true"] {
  background: var(--tappr-ink);
  color: var(--tappr-bg);
  border-color: var(--tappr-ink);
}
@media (hover: hover) and (pointer: fine) {
  .tappr-filter-pill:hover:not([aria-pressed="true"]) {
    background: var(--tappr-bg-soft);
    color: var(--tappr-ink);
  }
}
.tappr-filter-select {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--tappr-border);
  background: var(--tappr-bg);
  color: var(--tappr-ink);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
.tappr-filter-select:focus-visible {
  outline: 2px solid var(--tappr-red);
  outline-offset: 2px;
}

/* Status-Tabs mit Count-Badge (innerhalb .tappr-filter-bar) */
.tappr-filter-bar-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px;
  background: var(--tappr-bg-soft);
  border-radius: 999px;
}
.tappr-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--tappr-mute);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: background 160ms var(--tappr-ease-out), color 160ms var(--tappr-ease-out);
}
.tappr-filter-tab:hover { color: var(--tappr-ink); }
.tappr-filter-tab[aria-selected="true"] {
  background: var(--tappr-bg);
  color: var(--tappr-ink);
  box-shadow: 0 1px 2px rgba(20,20,20,.06);
}
/* Block AR-C: Toggle-Button (z.B. "Mit Aktion") nutzt aria-pressed.
 * Coral-Akzent via box-shadow (kein Layout-Shift). */
.tappr-filter-tab[aria-pressed="true"] {
  background: var(--tappr-bg);
  color: var(--tappr-ink);
  box-shadow: 0 0 0 1px var(--tappr-red), 0 1px 2px rgba(20,20,20,.06);
}
.tappr-filter-tab[aria-selected="true"]:focus-visible,
.tappr-filter-tab:focus-visible {
  outline: 2px solid var(--tappr-red);
  outline-offset: 2px;
}
.tappr-filter-tab-icon {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tappr-filter-tab-count {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: inherit;
  opacity: 0.7;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--tappr-pill-bg);
}
.tappr-filter-tab[aria-selected="true"] .tappr-filter-tab-count {
  background: var(--tappr-bg-soft);
  opacity: 1;
}

/* Spacer schiebt Folgeelemente nach rechts */
.tappr-filter-bar-spacer { flex: 1; }

/* Pull-Down-Dropdown im Filter-Bar-Stil */
.tappr-filter-dropdown {
  position: relative;
  display: inline-block;
}
.tappr-filter-dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--tappr-border);
  background: var(--tappr-bg);
  color: var(--tappr-ink-2);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.tappr-filter-dropdown-btn:hover { border-color: var(--tappr-mute-2); }
.tappr-filter-dropdown-btn[aria-expanded="true"] {
  border-color: var(--tappr-red);
  background: var(--tappr-bg-softer);
}
.tappr-filter-dropdown-btn:focus-visible {
  outline: 2px solid var(--tappr-red);
  outline-offset: 2px;
}
.tappr-filter-dropdown-chevron {
  width: 12px;
  height: 12px;
  color: var(--tappr-mute);
  transition: transform 160ms var(--tappr-ease-out);
}
.tappr-filter-dropdown-btn[aria-expanded="true"] .tappr-filter-dropdown-chevron {
  transform: rotate(180deg);
}
.tappr-filter-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  padding: 4px;
  background: var(--tappr-bg);
  border: 1px solid var(--tappr-border);
  border-radius: 8px;
  box-shadow: var(--tappr-shadow);
  z-index: var(--tappr-modal-z, 40);
  display: none;
  flex-direction: column;
  gap: 2px;
}
.tappr-filter-dropdown-menu[data-state="open"] { display: flex; }
.tappr-filter-dropdown-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 5px;
  background: transparent;
  border: 0;
  color: var(--tappr-ink-2);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.tappr-filter-dropdown-menu button:hover { background: var(--tappr-bg-soft); }
.tappr-filter-dropdown-menu button[aria-checked="true"] {
  color: var(--tappr-ink);
  font-weight: 500;
}
.tappr-filter-dropdown-menu button[aria-checked="true"]::after {
  content: '✓';
  color: var(--tappr-red);
  margin-left: 12px;
}

/* .tappr-restore-btn — Wiederherstellen-Button (in archivierten Zeilen) */
.tappr-restore-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--tappr-border);
  background: var(--tappr-bg);
  color: var(--tappr-ink-2);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.tappr-restore-btn:hover {
  background: var(--tappr-ok-soft);
  border-color: var(--tappr-ok);
  color: var(--tappr-ok);
}
.tappr-restore-btn:focus-visible {
  outline: 2px solid var(--tappr-ok);
  outline-offset: 2px;
}

/* ─── UI-09 Welle 1: Library-Erweiterungen für Listen-Pages ─── */

/* .tappr-search: Suchleiste mit Icon links + optional Clear-Button */
.tappr-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 1;
  min-width: 180px;
  max-width: 320px;
}
.tappr-search-input {
  width: 100%;
  padding: 8px 10px 8px 34px;
  border: 1px solid var(--tappr-border);
  border-radius: 8px;
  background: var(--tappr-bg);
  color: var(--tappr-ink);
  font-size: 13px;
  font-family: inherit;
  line-height: 1.3;
}
.tappr-search-input:focus-visible {
  outline: 2px solid var(--tappr-red);
  outline-offset: 1px;
}
.tappr-search-input::placeholder { color: var(--tappr-mute-2); }
.tappr-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tappr-mute);
  pointer-events: none;
  display: inline-flex;
}
.tappr-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--tappr-mute);
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.tappr-search-clear[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .tappr-search-clear:hover { background: var(--tappr-bg-soft); color: var(--tappr-ink); }
}

/* .tappr-table-sortable: Header-Buttons mit Sort-Indikator */
.tappr-table th.tappr-table-sortable { padding: 0; }
.tappr-table-sort-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* UI-TOPBAR-VISUAL-FIX-14 — synchron mit th-padding 10×18 */
  padding: 10px 18px;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--tappr-mute);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  white-space: nowrap;
  touch-action: manipulation;
}
.tappr-table-sort-btn[aria-sort="ascending"],
.tappr-table-sort-btn[aria-sort="descending"] {
  color: var(--tappr-ink);
}
.tappr-table-sort-icon {
  display: inline-flex;
  width: 12px;
  height: 12px;
  opacity: 0;
  transition: opacity 120ms ease, transform 120ms ease;
}
.tappr-table-sort-btn[aria-sort="ascending"] .tappr-table-sort-icon,
.tappr-table-sort-btn[aria-sort="descending"] .tappr-table-sort-icon { opacity: 1; }
.tappr-table-sort-btn[aria-sort="descending"] .tappr-table-sort-icon { transform: rotate(180deg); }
.tappr-table-sort-btn:focus-visible {
  outline: 2px solid var(--tappr-red);
  outline-offset: -2px;
  border-radius: 4px;
}

/* .tappr-table-checkbox: Checkbox-Spalte */
.tappr-table-checkbox {
  width: 36px;
  text-align: center;
  padding-left: 14px;
  padding-right: 0;
}
.tappr-table-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--tappr-red);
}

/* .tappr-table-row-clickable: cursor + hover */
.tappr-table-row-clickable {
  cursor: pointer;
  transition: background-color 120ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .tappr-table-row-clickable:hover {
    background: var(--tappr-pill-bg);
  }
}

/* .tappr-table-thumb: Bild-Zelle */
.tappr-table-thumb {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  border: 1px solid var(--tappr-border);
  object-fit: cover;
  background: var(--tappr-bg-soft);
  display: block;
  flex-shrink: 0;
}
.tappr-table-thumb-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  border: 1px dashed var(--tappr-border);
  background: var(--tappr-bg-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tappr-mute-2);
  flex-shrink: 0;
}

/* .tappr-bulk-bar: sticky Bulk-Action-Bar */
.tappr-bulk-bar {
  /* UI-BULK-BAR-CREAM-01 (18.05) — Owner-Wunsch: cremig statt schwarz.
   * BG identisch zum Tabellen-Header (var(--tappr-bg-soft)). Border
   * gibt der hellen Bar Kontur. Dark-Mode greift ueber Tokens automatisch. */
  position: sticky;
  top: calc(var(--tappr-topbar-h, 58px) + 8px);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--tappr-bg-soft);
  color: var(--tappr-ink);
  border: 1px solid var(--tappr-border);
  border-radius: 10px;
  box-shadow: var(--tappr-shadow);
  margin-bottom: 12px;
  font-size: 13px;
  transform: translateY(-8px);
  opacity: 0;
  transition: transform 200ms var(--tappr-ease-out), opacity 200ms var(--tappr-ease-out);
}
.tappr-bulk-bar[data-state="open"] {
  transform: translateY(0);
  opacity: 1;
}
.tappr-bulk-bar[hidden] { display: none; }
.tappr-bulk-bar-count {
  font-weight: 600;
  margin-right: auto;
}
.tappr-bulk-bar-actions {
  display: flex;
  gap: 6px;
}
/* Buttons in der Bulk-Bar: Standard-Tappr-Button-Stil ueber Tokens
 * (weisser BG mit Border, gut sichtbar gegen den cremigen Bar-BG).
 * Loeschen-Button bleibt als Danger erkennbar ueber roten Text. */
.tappr-bulk-bar .tappr-btn {
  background: var(--tappr-bg);
  color: var(--tappr-ink);
  border-color: var(--tappr-border);
}
.tappr-bulk-bar .tappr-btn:hover {
  background: var(--tappr-bg-softer);
}
.tappr-bulk-bar .tappr-btn[data-bulk="trash"] {
  color: var(--tappr-red-text);
}
.tappr-bulk-bar .tappr-btn[data-bulk="trash"]:hover {
  background: var(--tappr-red-soft);
  border-color: var(--tappr-red-soft);
}

/* .tappr-actions-menu: Kebab-Menu pro Row */
.tappr-actions-menu-wrap {
  position: relative;
  display: inline-flex;
}
.tappr-actions-menu-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--tappr-mute);
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  touch-action: manipulation;
  transition: background-color 120ms ease, color 120ms ease;
}
.tappr-actions-menu-btn:focus-visible {
  outline: 2px solid var(--tappr-red);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .tappr-actions-menu-btn:hover {
    background: var(--tappr-bg-soft);
    color: var(--tappr-ink);
    border-color: var(--tappr-border);
  }
}
.tappr-actions-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 180px;
  padding: 6px;
  background: var(--tappr-bg);
  border: 1px solid var(--tappr-border);
  border-radius: 10px;
  box-shadow: var(--tappr-shadow);
  z-index: var(--tappr-topbar-dropdown-z, 40);
  transform-origin: top right;
  transform: scale(0.97);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms var(--tappr-ease-out), transform 160ms var(--tappr-ease-out);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tappr-actions-menu[data-state="open"] {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.tappr-actions-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: transparent;
  border: 0;
  color: var(--tappr-ink-2);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
  text-decoration: none;
}
.tappr-actions-menu-item:hover { background: var(--tappr-bg-soft); color: var(--tappr-ink); }
.tappr-actions-menu-item--danger { color: var(--tappr-red-text); }
.tappr-actions-menu-item--danger:hover { background: var(--tappr-red-soft); }

/* .tappr-modal: Overlay + zentriertes Modal-Restyling
 * (nutzt parallel zur alten .modal/.modal-backdrop-Klasse — alte
 *  modal.js-Logic sieht .modal weiter, neue CSS aliased via beide) */
.tappr-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--tappr-modal-z, var(--tappr-topbar-dropdown-z, 40));
  padding: 24px;
}
.tappr-modal-backdrop[hidden] { display: none; }
.tappr-modal-backdrop--stacked { z-index: var(--tappr-modal-stacked-z, 50); }
.tappr-modal {
  background: var(--tappr-bg);
  border: 1px solid var(--tappr-border);
  border-radius: 12px;
  box-shadow: var(--tappr-shadow);
  width: 100%;
  max-width: 560px;
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tappr-modal--lg { max-width: 720px; }
.tappr-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--tappr-border-2);
}
.tappr-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--tappr-ink);
  margin: 0;
}
.tappr-modal-subtitle {
  font-size: 13px;
  color: var(--tappr-mute);
  margin: 4px 0 0;
}
.tappr-modal-close {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--tappr-mute);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  font-family: inherit;
}
@media (hover: hover) and (pointer: fine) {
  .tappr-modal-close:hover { background: var(--tappr-bg-soft); color: var(--tappr-ink); }
}
.tappr-modal-close:focus-visible {
  outline: 2px solid var(--tappr-red);
  outline-offset: 2px;
}
.tappr-modal-body {
  padding: 18px;
  overflow-y: auto;
  flex: 1;
  font-size: 13px;
  color: var(--tappr-ink-2);
}
.tappr-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--tappr-border-2);
}
.tappr-modal-footer-left { margin-right: auto; }
.tappr-modal-hint {
  font-size: 13px;
  color: var(--tappr-mute);
  margin: 0 0 12px;
}

/* .tappr-tab-bar: Tab-Switch mit border-bottom-Style */
.tappr-tab-bar {
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid var(--tappr-border);
  margin-bottom: 16px;
}
.tappr-tab-bar-item {
  position: relative;
  padding: 10px 16px;
  background: transparent;
  border: 0;
  color: var(--tappr-mute);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
  transition: color 160ms ease;
}
.tappr-tab-bar-item:focus-visible {
  outline: 2px solid var(--tappr-red);
  outline-offset: -2px;
  border-radius: 4px;
}
.tappr-tab-bar-item[aria-selected="true"] {
  color: var(--tappr-ink);
  font-weight: 600;
}
.tappr-tab-bar-item[aria-selected="true"]::after {
  content: '';
  position: absolute;
  left: 8px; right: 8px;
  bottom: -1px;
  height: 2px;
  background: var(--tappr-red);
  border-radius: 2px 2px 0 0;
}
@media (hover: hover) and (pointer: fine) {
  .tappr-tab-bar-item:hover:not([aria-selected="true"]) { color: var(--tappr-ink-2); }
}

/* ─── UI-CREATE-01: Anlage-Dropdown + Form-Inputs ──────────── */

/* .tappr-dropdown-menu — Page-Header-Action-Dropdown mit 2-zeiligen Items
 * (Lightspeed-Style). Wrapper nutzt .tappr-actions-menu-wrap. */
.tappr-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 280px;
  padding: 6px;
  background: var(--tappr-bg);
  border: 1px solid var(--tappr-border);
  border-radius: 10px;
  box-shadow: var(--tappr-shadow);
  z-index: var(--tappr-topbar-dropdown-z, 40);
  transform-origin: top right;
  transform: scale(0.97);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms var(--tappr-ease-out), transform 160ms var(--tappr-ease-out);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tappr-dropdown-menu[data-state="open"] {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.tappr-dropdown-menu-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 7px;
  background: transparent;
  border: 0;
  color: var(--tappr-ink-2);
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  width: 100%;
}
.tappr-dropdown-menu-item:hover { background: var(--tappr-bg-soft); }
.tappr-dropdown-menu-item:focus-visible {
  outline: 2px solid var(--tappr-red);
  outline-offset: -1px;
}
.tappr-dropdown-menu-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--tappr-ink);
}
.tappr-dropdown-menu-item-description {
  font-size: 12px;
  color: var(--tappr-mute);
  line-height: 1.35;
}

/* .tappr-input — generischer Form-Input (auch fuer Edit-Pages Paket 3) */
.tappr-input {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--tappr-border);
  border-radius: 6px;
  background: var(--tappr-bg);
  color: var(--tappr-ink);
  font-size: 13px;
  font-family: inherit;
  line-height: 1.4;
  box-sizing: border-box;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.tappr-input::placeholder { color: var(--tappr-mute-2); }
.tappr-input:focus-visible {
  outline: 2px solid var(--tappr-red);
  outline-offset: 1px;
  border-color: var(--tappr-red);
}
.tappr-input--error {
  border-color: var(--tappr-red);
  background: var(--tappr-red-soft);
}
.tappr-input-with-suffix {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
}
.tappr-input-with-suffix .tappr-input { padding-right: 42px; }
.tappr-input-with-suffix-label {
  position: absolute;
  right: 10px;
  font-size: 12px;
  color: var(--tappr-mute);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

/* .tappr-select — Dropdown-Select-Styling */
.tappr-select {
  display: block;
  width: 100%;
  padding: 8px 28px 8px 10px;
  border: 1px solid var(--tappr-border);
  border-radius: 6px;
  background: var(--tappr-bg);
  color: var(--tappr-ink);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  box-sizing: border-box;
}
.tappr-select:focus-visible {
  outline: 2px solid var(--tappr-red);
  outline-offset: 1px;
  border-color: var(--tappr-red);
}
.tappr-select--error {
  border-color: var(--tappr-red);
  background-color: var(--tappr-red-soft);
}

/* .tappr-label — Form-Label (Versalien, mute) */
.tappr-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--tappr-mute);
  margin-bottom: 4px;
}

/* .tappr-form-row — vertikaler Stack: label + input + hint */
.tappr-form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}
.tappr-form-row-hint {
  font-size: 11px;
  color: var(--tappr-mute);
  margin-top: 2px;
}
.tappr-form-row-error {
  font-size: 11px;
  color: var(--tappr-red-text);
  margin-top: 2px;
}
/* .tappr-form-grid — Layout-Raster für Form-Felder */
.tappr-form-grid {
  display: grid;
  gap: var(--space-4, 16px);
}
.tappr-form-grid-2 {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 640px) {
  .tappr-form-grid-2 { grid-template-columns: 1fr; }
}
/* .tappr-form-error — Form-weite Fehlermeldung (versteckt bis .is-visible) */
.tappr-form-error {
  display: none;
  font-size: 13px;
  color: var(--tappr-red-text);
  margin-bottom: 12px;
  line-height: 1.4;
}
.tappr-form-error.is-visible { display: block; }

/* .tappr-table-row--error — invalide Zeile in Batch-Tabelle */
.tappr-table-row--error {
  background: var(--tappr-red-soft);
  box-shadow: inset 3px 0 0 var(--tappr-red);
}

/* ─── UI-CREATE-01: Erweiterte Form-Komponenten (Edit-Pages) ──── */

/* .tappr-textarea — mehrzeiliger Form-Input, vertikal resizable */
.tappr-textarea {
  display: block;
  width: 100%;
  min-height: 72px;
  padding: 8px 10px;
  border: 1px solid var(--tappr-border);
  border-radius: 6px;
  background: var(--tappr-bg);
  color: var(--tappr-ink);
  font-size: 13px;
  font-family: inherit;
  line-height: 1.4;
  box-sizing: border-box;
  resize: vertical;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.tappr-textarea::placeholder { color: var(--tappr-mute-2); }
.tappr-textarea:focus-visible {
  outline: 2px solid var(--tappr-red);
  outline-offset: 1px;
  border-color: var(--tappr-red);
}
.tappr-textarea--error {
  border-color: var(--tappr-red);
  background: var(--tappr-red-soft);
}
.tappr-textarea:disabled {
  background: var(--tappr-bg-soft);
  opacity: 0.7;
  cursor: not-allowed;
}

/* .tappr-checkbox — natives Input mit Label-Wrap */
.tappr-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--tappr-ink);
}
.tappr-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--tappr-red);
  cursor: pointer;
  flex-shrink: 0;
}
.tappr-checkbox:disabled,
.tappr-checkbox:disabled + *,
.tappr-checkbox-label:has(.tappr-checkbox:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

/* .tappr-toggle — Switch-Style, role=switch + aria-checked */
.tappr-toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  border: 0;
  border-radius: 999px;
  background: var(--tappr-border);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background-color 160ms var(--tappr-ease-out);
}
.tappr-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 160ms var(--tappr-ease-out);
}
.tappr-toggle[aria-checked="true"] { background: var(--tappr-red); }
.tappr-toggle[aria-checked="true"]::after { transform: translateX(16px); }
.tappr-toggle:focus-visible {
  outline: 2px solid var(--tappr-red);
  outline-offset: 2px;
}
.tappr-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* .tappr-radio-group — horizontaler Radio-Button-Wrap */
.tappr-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.tappr-radio-group label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--tappr-ink);
}
.tappr-radio-group input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--tappr-red);
  cursor: pointer;
}

/* .tappr-image-upload — Drop-Zone + Preview + Progress */
.tappr-image-upload {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tappr-image-upload-zone {
  min-height: 180px;
  border: 2px dashed var(--tappr-border-2);
  border-radius: 10px;
  background: var(--tappr-bg-softer);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.tappr-image-upload-zone:hover,
.tappr-image-upload-zone[data-state="dragover"] {
  border-color: var(--tappr-red);
  background: var(--tappr-red-soft);
}
.tappr-image-upload-zone-icon {
  width: 32px;
  height: 32px;
  color: var(--tappr-mute);
}
.tappr-image-upload-zone-text {
  font-size: 13px;
  color: var(--tappr-mute);
}
.tappr-image-upload-zone-hint {
  font-size: 11px;
  color: var(--tappr-mute-2);
}
.tappr-image-upload-preview {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--tappr-border);
}
.tappr-image-upload-preview img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
}
.tappr-image-upload-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
}
.tappr-image-upload-actions button {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  padding: 0;
}
.tappr-image-upload-actions button:hover { background: rgba(0, 0, 0, 0.8); }
.tappr-image-upload-progress {
  height: 3px;
  background: var(--tappr-border-2);
  border-radius: 999px;
  overflow: hidden;
}
.tappr-image-upload-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--tappr-red);
  transition: width 200ms linear;
}

/* .tappr-form-section — gruppiert mehrere .tappr-form-row in Card */
.tappr-form-section {
  background: var(--tappr-bg);
  border: 1px solid var(--tappr-border);
  border-radius: 10px;
  margin-bottom: 16px;
}
.tappr-form-section-header {
  padding: 14px 16px 0;
}
.tappr-form-section-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--tappr-mute);
  margin: 0;
}
.tappr-form-section-subtitle {
  font-size: 12px;
  color: var(--tappr-mute);
  margin-top: 2px;
}
.tappr-form-section-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
}
.tappr-form-section-body > .tappr-form-row:last-child { margin-bottom: 0; }

/* .tappr-collapsible — <details>-Wrap mit animiertem Chevron */
.tappr-collapsible {
  border: 1px solid var(--tappr-border);
  border-radius: 10px;
  margin-bottom: 12px;
  background: var(--tappr-bg);
}
.tappr-collapsible > summary {
  list-style: none;
  padding: 12px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: var(--tappr-ink);
}
.tappr-collapsible > summary::-webkit-details-marker { display: none; }
.tappr-collapsible > summary::after {
  content: '';
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / 12px 12px;
  transition: transform 160ms var(--tappr-ease-out);
}
.tappr-collapsible[open] > summary::after { transform: rotate(180deg); }
.tappr-collapsible-body {
  padding: 14px 16px 14px;
  border-top: 1px solid var(--tappr-border-2);
}

/* .tappr-action-footer — sticky Footer mit Save/Cancel/Delete */
.tappr-action-footer {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--tappr-bg);
  border-top: 1px solid var(--tappr-border);
  box-shadow: 0 -4px 14px rgba(20, 20, 20, 0.04);
  z-index: 30;
  margin-top: 24px;
}
.tappr-action-footer-spacer { flex: 1; }
.tappr-action-footer-danger { margin-right: auto; }

/* .tappr-row-list — sortierbare Item-Liste mit Drag-Grip */
.tappr-row-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tappr-border);
  border-radius: 10px;
  background: var(--tappr-bg);
  overflow: hidden;
}
.tappr-row-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--tappr-border-2);
  background: var(--tappr-bg);
  transition: background-color 120ms ease;
  position: relative;
}
.tappr-row-list-item:last-child { border-bottom: 0; }
.tappr-row-list-item:hover { background: var(--tappr-bg-softer); }
.tappr-row-list-item.drop-before { box-shadow: inset 0 2px 0 var(--tappr-red); }
.tappr-row-list-item.drop-after { box-shadow: inset 0 -2px 0 var(--tappr-red); }
.tappr-row-list-item[data-locked="true"] { opacity: 0.7; }
.tappr-row-list-grip {
  width: 16px;
  height: 16px;
  color: var(--tappr-mute);
  cursor: grab;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.tappr-row-list-grip:active { cursor: grabbing; }
.tappr-row-list-item[data-locked="true"] .tappr-row-list-grip {
  cursor: not-allowed;
  opacity: 0.4;
}
.tappr-row-list-content {
  flex: 1;
  min-width: 0;
}
.tappr-row-list-actions {
  display: flex;
  gap: 4px;
}
.tappr-row-list-empty {
  padding: 24px;
  text-align: center;
  color: var(--tappr-mute);
  font-size: 13px;
}

/* .tappr-multi-modal — Mehrfach-Auswahl-Modal-Body (in .tappr-modal eingesetzt) */
.tappr-multi-modal-search {
  padding: 0 18px 12px;
}
.tappr-multi-modal-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 360px;
  overflow-y: auto;
  padding: 0 18px;
}
.tappr-multi-modal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--tappr-border-2);
  cursor: pointer;
  transition: background-color 120ms ease;
}
.tappr-multi-modal-row:last-child { border-bottom: 0; }
.tappr-multi-modal-row:hover { background: var(--tappr-bg-softer); }
.tappr-multi-modal-row[data-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}
.tappr-multi-modal-row-meta {
  font-size: 12px;
  color: var(--tappr-mute);
  margin-left: auto;
}
.tappr-multi-modal-summary {
  font-size: 12px;
  color: var(--tappr-mute);
}
.tappr-multi-modal-create {
  padding: 10px 18px;
  border-top: 1px solid var(--tappr-border-2);
  display: flex;
  justify-content: center;
}

/* .tappr-char-counter — z.B. unter .tappr-textarea (z.B. „120 / 160") */
.tappr-char-counter {
  font-size: 11px;
  color: var(--tappr-mute);
  text-align: right;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.tappr-char-counter[data-warning="true"] { color: var(--tappr-red-text); }

/* .tappr-edit-topbar — sticky Sub-Topbar fuer Edit-Pages (unter Backoffice-Topbar) */
.tappr-edit-topbar {
  position: sticky;
  top: 60px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 32px;
  background: var(--tappr-bg);
  border-bottom: 1px solid var(--tappr-border);
  z-index: 10;
}
.tappr-edit-topbar-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--tappr-mute);
  text-decoration: none;
  font-size: 13px;
  cursor: pointer;
  transition: color 120ms ease;
}
.tappr-edit-topbar-back:hover { color: var(--tappr-ink); }
.tappr-edit-topbar-title {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  color: var(--tappr-ink);
  margin: 0;
  line-height: 1.2;
}
.tappr-edit-topbar-eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--tappr-mute);
  margin-bottom: 2px;
}
.tappr-edit-topbar-actions {
  display: flex;
  gap: 8px;
}

/* ─── UI-LIB-HARDWARE-01 — Hardware/Setup-Patterns ────────── */

/* 1. .tappr-card-grid — auto-fill Grid mit Mindest-Karten-Breite.
 * UI-DEVICES-CARD-REDESIGN-01-FIX2: minmax 320 → 290 damit 3 Karten
 * pro Reihe wieder Platz haben (Owner-Befund). */
.tappr-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}
@media (max-width: 768px) {
  /* minmax(0, 1fr) statt 1fr: verhindert dass die Spalte auf
   * min-content des breitesten unbrechbaren Inhalts (z.B. nowrap-Text)
   * expandiert. Mit `1fr` (= minmax(auto, 1fr)) ist die auto-Min gleich
   * der min-content der Card — eine Card mit nowrap-Text laenger als
   * der Viewport sprengt das Grid. */
  .tappr-card-grid { grid-template-columns: minmax(0, 1fr); }
}

/* 2. .tappr-status-card — Card mit data-status fuer Live-Status-Dot */
.tappr-status-card {
  position: relative;
  background: var(--tappr-bg);
  border: 1px solid var(--tappr-border);
  border-radius: 10px;
  padding: 16px 18px;
  transition: border-color 120ms ease;
}
.tappr-status-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.tappr-status-card-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--tappr-mute);
}
.tappr-status-card[data-status="online"] .tappr-status-card-dot { background: var(--tappr-ok); }
.tappr-status-card[data-status="offline"] .tappr-status-card-dot { background: var(--tappr-mute); }
.tappr-status-card[data-status="warning"] .tappr-status-card-dot { background: var(--tappr-warn); }
.tappr-status-card[data-status="error"] .tappr-status-card-dot { background: var(--tappr-red); }
.tappr-status-card-title {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--tappr-ink);
  min-width: 0;
}
.tappr-status-card-meta {
  font-size: 12px;
  color: var(--tappr-mute);
  margin-bottom: 12px;
}
.tappr-status-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--tappr-border-2);
}

/* 3. .tappr-pair-block — Container fuer Pair-Code-Setup */
.tappr-pair-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 28px 32px;
  background: var(--tappr-bg-soft);
  border: 1px solid var(--tappr-border);
  border-radius: 12px;
}

/* ─── UI-DEVICES-CARD-REDESIGN-01 — .tappr-device-card ───────────────
 * Status-First-Karte mit linkem Streifen, Icon-Box, Status-Indicator,
 * Meta-Block, optionalem Layout-Block + Action-Row.
 * Vorlage: Konzept 1 (Owner-Auftrag UI-DEVICES-CARD-REDESIGN-01).
 * Eigene Komponente neben .tappr-status-card (dort wo Karten ohne
 * linken Streifen + ohne Layout-Block reichen). */
.tappr-device-card {
  background: var(--tappr-bg);
  border: 1px solid var(--tappr-border);
  border-radius: 12px;
  overflow: hidden;
  /* UI-DEVICES-CARD-REDESIGN-01-FIX4: flex statt grid, damit Body
   * flex:1 mit eigener flex-column-Stack waechst und Layout/Actions
   * via margin-top:auto ans Card-Bottom rutschen koennen. */
  display: flex;
  box-shadow: var(--shadow-card);
  transition: box-shadow 150ms ease, transform 150ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .tappr-device-card:hover { box-shadow: var(--shadow-elev); }
}
.tappr-device-card:active {
  transform: scale(0.98);
  transition: transform 80ms ease-out;
}

.tappr-device-card-stripe {
  width: 6px;
  flex-shrink: 0;
  background: var(--tappr-ok);
}
.tappr-device-card-stripe[data-status="offline"] { background: #C5C0B6; }
.tappr-device-card-stripe[data-status="warning"] { background: var(--tappr-warn); }

.tappr-device-card-body {
  padding: 18px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tappr-device-card-head {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 14px;
}
.tappr-device-card-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--tappr-bg-soft);
  display: grid; place-items: center;
  color: var(--tappr-mute);
  flex-shrink: 0;
}
.tappr-device-card-titlewrap { flex: 1; min-width: 0; }
.tappr-device-card-name {
  font-size: 16px; font-weight: 600; letter-spacing: -0.2px;
  margin: 0; line-height: 1.2;
  color: var(--tappr-ink);
}
.tappr-device-card-type {
  /* UI-DEVICES-CARD-TYPO-01 (16.05) — alte 13.05-Optik: MONO uppercase. */
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tappr-mute);
  margin-top: 3px;
}
.tappr-device-card-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.8px;
  color: var(--tappr-ok); text-transform: uppercase;
  padding: 4px 0;
  flex-shrink: 0;
}
.tappr-device-card-status[data-status="offline"] { color: var(--tappr-mute); }
.tappr-device-card-status[data-status="warning"] { color: var(--tappr-warn); }
.tappr-device-card-status[data-status="neutral"] { color: var(--tappr-mute); }
.tappr-device-card-status-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: currentColor;
}

.tappr-device-card-meta {
  display: grid; gap: 6px;
  padding: 14px 0;
  border-top: 1px solid var(--tappr-border-2);
  border-bottom: 1px solid var(--tappr-border-2);
  margin-bottom: 14px;
}
.tappr-device-card-metarow {
  display: flex; justify-content: space-between;
  font-size: 12.5px;
  gap: 12px;
}
.tappr-device-card-metarow > span:first-child {
  /* UI-DEVICES-CARD-TYPO-01 (16.05) — Label MONO uppercase wie 13.05. */
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tappr-mute);
}
.tappr-device-card-metarow > span:last-child {
  color: var(--tappr-ink-2); font-weight: 500;
  text-align: right;
  /* Zahlenwerte in Tabellen-Spalten ausrichten */
  font-variant-numeric: tabular-nums;
}
/* UI-PRINTERS-CARD-REDESIGN-01 — Mono-Variante fuer technische Werte
 * (IP-Adresse, Papierbreite, Datum). Default ist Helvetica Neue. */
.tappr-device-card-metarow.is-mono > span:last-child {
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace);
}

.tappr-device-card-layout {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--tappr-bg-softer);
  border: 1px solid var(--tappr-border-2);
  border-radius: 8px;
  margin-bottom: 14px;
  /* UI-DEVICES-CARD-REDESIGN-01-FIX4: Layout-Block ans Bottom drueckt;
   * Actions sitzen direkt darunter (Body ist flex-column). */
  margin-top: auto;
}
/* Wenn kein Layout-Block: Actions selbst ans Bottom (z.B. Kueche). */
.tappr-device-card-body:not(:has(.tappr-device-card-layout)) .tappr-device-card-actions {
  margin-top: auto;
}
.tappr-device-card-layout-preview {
  width: 44px; height: 44px;
  border-radius: 6px;
  background: linear-gradient(135deg, #2a2a2a, #4a4a4a);
  flex-shrink: 0;
  position: relative;
}
.tappr-device-card-layout-preview::after {
  content: ""; position: absolute;
  inset: 6px 6px 16px 6px;
  background: rgba(255,255,255,0.18);
  border-radius: 2px;
}
/* State C — kein Layout zugewiesen: leerer Block mit Plus-Icon. */
.tappr-device-card-layout-preview[data-empty="true"] {
  background: var(--tappr-bg-soft);
  border: 1px dashed var(--tappr-border);
  display: grid; place-items: center;
  color: var(--tappr-mute-2);
}
.tappr-device-card-layout-preview[data-empty="true"]::after { display: none; }
.tappr-device-card-layout-text { flex: 1; min-width: 0; }
.tappr-device-card-layout-eyebrow {
  font-size: 9.5px; font-weight: 600; letter-spacing: 1px;
  color: var(--tappr-mute); text-transform: uppercase;
}
.tappr-device-card-layout-name {
  font-size: 13px; font-weight: 500; color: var(--tappr-ink);
  margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tappr-device-card-layout-btn {
  font-size: 12px; font-weight: 500;
  padding: 6px 10px;
  background: var(--tappr-bg);
  border: 1px solid var(--tappr-border);
  border-radius: 6px;
  color: var(--tappr-ink);
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
}
/* Pending-State des Layout-Blocks (z.B. nach Layout-Wechsel, vor Push). */
.tappr-device-card-layout[data-state="pending"] {
  background: rgba(230, 149, 0, 0.08);
  border-color: rgba(230, 149, 0, 0.35);
}
.tappr-device-card-layout[data-state="pending"] .tappr-device-card-layout-eyebrow {
  color: var(--tappr-warn);
}

.tappr-device-card-actions {
  display: flex; gap: 4px;
}
.tappr-device-card-iconbtn {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: none; background: transparent;
  color: var(--tappr-mute);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease;
  font-family: inherit;
}
@media (hover: hover) and (pointer: fine) {
  .tappr-device-card-iconbtn:hover {
    background: var(--tappr-bg-soft);
    color: var(--tappr-ink);
  }
  .tappr-device-card-iconbtn--danger:hover {
    background: var(--tappr-red-soft);
    color: var(--tappr-red-text);
  }
}
.tappr-device-card-iconbtn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}
.tappr-device-card-iconbtn[aria-disabled="true"]:hover {
  background: transparent;
  color: var(--tappr-mute);
}

/* 4. .tappr-pair-code — Grosse Anzeige des 6-stelligen Codes */
.tappr-pair-code {
  font-size: 28px;
  font-weight: 700;
  color: var(--tappr-red);
  letter-spacing: 6px;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace);
}

/* 5. .tappr-pair-qr — QR-Code-Container */
.tappr-pair-qr {
  width: 180px;
  height: 180px;
  background: #FFFFFF;
  border: 1px solid var(--tappr-border);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tappr-pair-qr svg,
.tappr-pair-qr img,
.tappr-pair-qr canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* 6. .tappr-type-picker — 3-Spalten-Grid fuer Typ-Auswahl */
.tappr-type-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  /* UI-DEVICES-CARD-REDESIGN-01-FIX: fieldset-Browser-Default
   * (Border + inline-margin + Padding) entfernen. */
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0;
}
@media (max-width: 768px) {
  .tappr-type-picker { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .tappr-type-picker { grid-template-columns: 1fr; }
}

/* 7. .tappr-type-tile — Einzelne Kachel im Type-Picker */
.tappr-type-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 14px;
  background: var(--tappr-bg);
  border: 1px solid var(--tappr-border);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  transition: border-color 120ms ease, background 120ms ease;
}
.tappr-type-tile:hover { border-color: var(--tappr-mute-2); }
.tappr-type-tile-icon {
  width: 28px;
  height: 28px;
  color: var(--tappr-mute);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tappr-type-tile-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--tappr-ink);
}
.tappr-type-tile-sub {
  font-size: 12px;
  color: var(--tappr-mute);
  line-height: 1.3;
}
.tappr-type-tile input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tappr-type-tile:has(input:checked),
.tappr-type-tile[aria-checked="true"] {
  border-color: var(--tappr-red);
  background: var(--tappr-red-soft);
}
.tappr-type-tile:has(input:checked) .tappr-type-tile-icon,
.tappr-type-tile[aria-checked="true"] .tappr-type-tile-icon {
  color: var(--tappr-red);
}
.tappr-type-tile:focus-visible {
  outline: 2px solid var(--tappr-red);
  outline-offset: 2px;
}

/* 8. .tappr-icon-action — Icon-Button fuer Card-Actions */
.tappr-icon-action {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--tappr-mute);
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms ease, color 120ms ease;
  position: relative;
  flex-shrink: 0;
}
.tappr-icon-action:hover {
  background: var(--tappr-bg-soft);
  color: var(--tappr-ink);
}
.tappr-icon-action:active { background: var(--tappr-bg-softer); }
.tappr-icon-action:focus-visible {
  outline: 2px solid var(--tappr-red);
  outline-offset: 2px;
}
.tappr-icon-action[aria-pressed="true"],
.tappr-icon-action[aria-expanded="true"] {
  background: var(--tappr-bg-softer);
  color: var(--tappr-ink);
}
.tappr-icon-action--danger:hover {
  background: var(--tappr-red-soft);
  color: var(--tappr-red);
}

/* 9. .tappr-actions-popup — Popup-Container fuer Icon-Action-Menues */
.tappr-actions-popup {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  max-width: 240px;
  padding: 4px;
  background: var(--tappr-bg);
  border: 1px solid var(--tappr-border);
  border-radius: 8px;
  box-shadow: var(--tappr-shadow);
  z-index: var(--tappr-modal-z, 40);
  display: none;
  flex-direction: column;
  gap: 2px;
}
.tappr-actions-popup[data-state="open"] { display: flex; }
.tappr-actions-popup-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  background: transparent;
  border: 0;
  color: var(--tappr-ink-2);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.tappr-actions-popup-item:hover {
  background: var(--tappr-bg-soft);
  color: var(--tappr-ink);
}
.tappr-actions-popup-item--danger { color: var(--tappr-red-text); }
.tappr-actions-popup-item--danger:hover {
  background: var(--tappr-red-soft);
  color: var(--tappr-red);
}
.tappr-actions-popup-sep {
  height: 1px;
  background: var(--tappr-border-2);
  margin: 4px 0;
}

/* ─── Trial-Pill (UI-TOPBAR-DRIFT-FIX-01) ─────────────────── */
.tappr-trial-pill {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--tappr-red);
  background: var(--tappr-red-soft);
  font-family: inherit;
  flex-shrink: 0;
}
.tappr-trial-pill[data-state="expired"] {
  color: var(--tappr-red-text);
  background: var(--tappr-red-soft);
}

/* ─── Reduced Motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tappr-btn,
  .tappr-table tbody tr,
  .tappr-filter-pill,
  .tappr-actions-menu,
  .tappr-dropdown-menu,
  .tappr-bulk-bar,
  .tappr-table-row-clickable,
  .tappr-input,
  .tappr-select {
    transition: background-color 100ms ease, color 100ms ease, border-color 100ms ease;
  }
  .tappr-btn:active,
  .tappr-filter-pill:active { transform: none; }
  .tappr-actions-menu,
  .tappr-dropdown-menu,
  .tappr-bulk-bar { transform: none; }
  .tappr-table-sort-icon { transition: opacity 80ms ease; }

  .tappr-toggle,
  .tappr-toggle::after,
  .tappr-image-upload-zone,
  .tappr-collapsible > summary::after,
  .tappr-action-footer,
  .tappr-row-list-item,
  .tappr-multi-modal-row,
  .tappr-edit-topbar-back {
    transition: background-color 100ms ease, color 100ms ease, border-color 100ms ease;
  }
  .tappr-toggle::after,
  .tappr-collapsible > summary::after { transition: none; }

  .tappr-filter-tab,
  .tappr-filter-dropdown-btn,
  .tappr-filter-dropdown-chevron,
  .tappr-restore-btn {
    transition: background-color 100ms ease, color 100ms ease, border-color 100ms ease;
  }
  .tappr-filter-dropdown-chevron { transition: none; }

  /* UI-LIB-HARDWARE-01 — Hardware-Patterns Reduced-Motion */
  .tappr-status-card,
  .tappr-type-tile,
  .tappr-icon-action {
    transition: background-color 100ms ease, color 100ms ease, border-color 100ms ease;
  }
}

/* ═══════════════════════════════════════════════════════════
 * UI-DASHBOARD-REDESIGN-01 — Live-Dashboard-Komponenten
 * Vorlage: /tmp/Dashboard Redesign.html (Owner-genehmigt).
 * ═══════════════════════════════════════════════════════════ */

/* Hero (dark live-card mit Right-Now-Zahl + Mini-Queue) */
.tappr-hero {
  /* UI-DASHBOARD-HERO-DARK-FIX — Hero ist theme-konstant dunkel.
   * Vorher var(--tappr-ink) → flippte im Dark-Mode auf hellbeige,
   * weisser Text wurde unsichtbar. Mockup zeigt Hero in beiden
   * Themes als gleichen dunklen Block. */
  background: #141414;
  color: #fff;
  border-radius: 14px;
  padding: 26px 28px;
  position: relative;
  overflow: hidden;
}
.tappr-hero::before {
  content: ""; position: absolute;
  top: -40px; right: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,106,71,0.25) 0%, transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}
.tappr-hero-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px; position: relative;
}
.tappr-hero-live {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--tappr-red);
}
.tappr-hero-pulse {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--tappr-red);
  box-shadow: 0 0 0 0 rgba(255,106,71,0.6);
  animation: tappr-hero-pulse 2s infinite;
}
@keyframes tappr-hero-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,106,71,0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(255,106,71,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,106,71,0); }
}
.tappr-hero-clock {
  font-family: var(--font-mono, var(--font-mono, ui-monospace, monospace));
  font-size: 12px; color: rgba(255,255,255,0.55);
}
.tappr-hero-num {
  font-size: 88px; font-weight: 600; letter-spacing: -3px;
  line-height: 0.95; margin-bottom: 4px;
}
.tappr-hero-label {
  font-size: 15px; color: rgba(255,255,255,0.7);
  margin-bottom: 22px;
}
.tappr-hero-queue {
  display: flex; gap: 8px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.1);
  flex-wrap: wrap;
}
.tappr-hero-q-item {
  flex: 1; min-width: 130px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
}
.tappr-hero-q-item[data-urgent="true"] { border-color: rgba(255,106,71,0.4); }
.tappr-hero-q-id {
  font-family: var(--font-mono, monospace);
  font-size: 11px; color: rgba(255,255,255,0.5);
}
.tappr-hero-q-name {
  font-size: 13px; font-weight: 500; color: #fff;
  margin: 4px 0 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tappr-hero-q-time {
  font-size: 11px; color: var(--tappr-red);
  display: inline-flex; align-items: center; gap: 4px;
}
.tappr-hero-q-item[data-urgent="true"] .tappr-hero-q-time {
  color: var(--tappr-red-text); font-weight: 600;
}
.tappr-hero-empty {
  font-size: 13px; color: rgba(255,255,255,0.5);
  padding: 12px 0 0; border-top: 1px solid rgba(255,255,255,0.1);
}

/* Insights — kompakte Karten mit Icon + Text + Action */
.tappr-insights {
  background: var(--tappr-bg);
  border: 1px solid var(--tappr-border);
  border-radius: 14px;
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.tappr-insights-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.tappr-insights-label {
  font-size: 11px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--tappr-mute);
}
.tappr-insights-count {
  background: var(--tappr-red-soft); color: var(--tappr-red);
  font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
}
.tappr-insight {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--tappr-border-2);
  align-items: center;
}
.tappr-insight:first-of-type { border-top: none; padding-top: 0; }
.tappr-insight-ic {
  width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--tappr-bg-soft); color: var(--tappr-ink-2);
}
.tappr-insight[data-kind="ok"] .tappr-insight-ic { background: var(--tappr-ok-soft); color: var(--tappr-ok); }
.tappr-insight[data-kind="warn"] .tappr-insight-ic { background: var(--tappr-warn-soft); color: var(--tappr-warn); }
.tappr-insight[data-kind="tip"] .tappr-insight-ic { background: var(--tappr-red-soft); color: var(--tappr-red); }
.tappr-insight-text {
  font-size: 13px; line-height: 1.4; color: var(--tappr-ink);
}
.tappr-insight-text small {
  display: block;
  font-size: 11.5px; color: var(--tappr-mute);
  margin-top: 2px;
}
.tappr-insight-action {
  font-size: 12px; font-weight: 600;
  color: var(--tappr-red); cursor: pointer;
  text-decoration: none;
}
.tappr-insight-empty {
  font-size: 13px; color: var(--tappr-mute);
  padding: 12px 0;
}

/* KPI-Tile mit Sparkline */
.tappr-kpi-tile {
  background: var(--tappr-bg);
  border: 1px solid var(--tappr-border);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 6px;
}
.tappr-kpi-tile-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--tappr-mute);
}
.tappr-kpi-tile-row {
  display: flex; justify-content: space-between; align-items: end;
  gap: 8px;
}
.tappr-kpi-tile-val {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 32px; font-weight: 500; letter-spacing: -0.8px;
  color: var(--tappr-ink); line-height: 1.1;
}
.tappr-kpi-tile-val small {
  font-family: var(--font-sans, 'DM Sans', system-ui, sans-serif);
  font-size: 14px; font-weight: 500; color: var(--tappr-mute);
}
.tappr-kpi-tile-spark {
  flex-shrink: 0; padding-bottom: 2px;
}
.tappr-kpi-tile-comp {
  font-size: 11px; color: var(--tappr-mute);
  display: inline-flex; align-items: baseline; gap: 4px; flex-wrap: wrap;
}
.tappr-kpi-tile-delta {
  font-size: 12px; font-weight: 600;
}
.tappr-kpi-tile-delta[data-dir="up-good"]   { color: var(--tappr-ok); }
.tappr-kpi-tile-delta[data-dir="down-good"] { color: var(--tappr-ok); }
.tappr-kpi-tile-delta[data-dir="up-bad"]    { color: var(--tappr-warn); }
.tappr-kpi-tile-delta[data-dir="down-bad"]  { color: var(--tappr-red); }
.tappr-kpi-tile-delta[data-dir="neutral"]   { color: var(--tappr-mute); }

/* Chart-Card (Tageskurve) */
.tappr-chart-card {
  background: var(--tappr-bg);
  border: 1px solid var(--tappr-border);
  border-radius: 14px;
  padding: 22px 24px;
}
.tappr-chart-head {
  display: flex; justify-content: space-between; align-items: end;
  margin-bottom: 18px;
  flex-wrap: wrap; gap: 14px;
}
.tappr-chart-title { font-size: 16px; font-weight: 600; }
.tappr-chart-sub { font-size: 12px; color: var(--tappr-mute); margin-top: 3px; }
.tappr-chart-legend {
  display: flex; gap: 14px;
  font-size: 11.5px; color: var(--tappr-ink-2);
}
.tappr-chart-legend-lg { display: inline-flex; align-items: center; gap: 6px; }
.tappr-chart-legend-sw { width: 14px; height: 3px; border-radius: 2px; }
.tappr-chart-body { position: relative; height: 200px; }
.tappr-chart-body svg { width: 100%; height: 100%; display: block; }
.tappr-chart-xaxis {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono, monospace);
  font-size: 10px; color: var(--tappr-mute-2);
  margin-top: 8px;
}
.tappr-chart-now {
  position: absolute;
  top: -8px; bottom: -16px;
  width: 0; border-left: 2px dashed var(--tappr-red);
}
.tappr-chart-now-label {
  position: absolute;
  top: -8px; transform: translateX(-50%);
  background: var(--tappr-red); color: #fff;
  padding: 2px 8px; border-radius: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  white-space: nowrap;
}

/* Top-Products-Liste */
.tappr-top-prods {
  background: var(--tappr-bg);
  border: 1px solid var(--tappr-border);
  border-radius: 14px;
  padding: 22px 24px;
}
.tappr-top-prods-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.tappr-top-prods-head h3 { font-size: 16px; font-weight: 600; margin: 0; }
.tappr-top-prods-link {
  font-size: 12.5px; color: var(--tappr-mute);
  text-decoration: none;
}
.tappr-top-prods-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--tappr-border-2);
  align-items: center;
}
.tappr-top-prods-row:first-of-type { border-top: none; padding-top: 0; }
.tappr-top-prods-img {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 14px; color: #fff;
  background: linear-gradient(135deg, var(--tappr-red), #FF8865);
}
.tappr-top-prods-info { min-width: 0; }
.tappr-top-prods-name {
  font-size: 13.5px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tappr-top-prods-bar {
  margin-top: 5px; height: 4px; border-radius: 999px;
  background: var(--tappr-bg-soft);
  overflow: hidden; position: relative;
}
.tappr-top-prods-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--tappr-red);
  border-radius: 999px;
}
.tappr-top-prods-stats { text-align: right; }
.tappr-top-prods-count {
  font-family: var(--font-mono, monospace);
  font-size: 13px; font-weight: 600;
}
.tappr-top-prods-rev {
  font-size: 11px; color: var(--tappr-mute);
  margin-top: 2px;
}

/* Activity-Feed */
.tappr-activity {
  background: var(--tappr-bg);
  border: 1px solid var(--tappr-border);
  border-radius: 14px;
  padding: 22px 24px;
}
.tappr-activity-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.tappr-activity-head h3 { font-size: 16px; font-weight: 600; margin: 0; }
.tappr-activity-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: var(--tappr-ok);
}
.tappr-activity-live-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--tappr-ok);
  animation: tappr-activity-pulse 2s infinite;
}
@keyframes tappr-activity-pulse {
  0%, 100% { opacity: 1; } 50% { opacity: 0.5; }
}
.tappr-activity-item {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 14px;
  padding: 8px 0;
  align-items: start;
  position: relative;
}
.tappr-activity-item::before {
  content: ""; position: absolute;
  left: 5px; top: 18px; bottom: -8px;
  border-left: 1px solid var(--tappr-border-2);
}
.tappr-activity-item:last-child::before { display: none; }
.tappr-activity-dot {
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--tappr-bg);
  border: 2px solid var(--tappr-mute-2);
  margin-top: 5px; z-index: 1;
}
.tappr-activity-item[data-kind="success"] .tappr-activity-dot { border-color: var(--tappr-ok); }
.tappr-activity-item[data-kind="new"]     .tappr-activity-dot { border-color: var(--tappr-red); background: var(--tappr-red); }
.tappr-activity-text {
  font-size: 13px; line-height: 1.45;
  color: var(--tappr-ink-2);
}
.tappr-activity-text strong { color: var(--tappr-ink); font-weight: 600; }
.tappr-activity-text small {
  display: block;
  font-size: 11.5px; color: var(--tappr-mute);
  margin-top: 2px;
}
.tappr-activity-time {
  font-family: var(--font-mono, monospace);
  font-size: 11px; color: var(--tappr-mute);
}
.tappr-activity-empty {
  font-size: 13px; color: var(--tappr-mute);
  padding: 16px 0;
}

/* Test-Mode-Pill (oben rechts im Header bei test-Venues) */
.tappr-test-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--tappr-warn-soft); color: var(--tappr-warn);
  font-size: 12px; font-weight: 600; letter-spacing: 0.3px;
}
.tappr-test-pill-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--tappr-warn);
}

/* UI-DASHBOARD-NEXTSTEPS-03 — Onboarding-Assistent als floating Side-Card LINKS.
 * Owner-Korrektur (NEXTSTEPS-02 war rechts): links zwischen Sidebar (Hybrid)
 * und Dashboard-Content. Im Top-Nav-Mode am linken Page-Rand. */
.tappr-nextsteps-float {
  position: fixed;
  left: 24px;
  top: 110px; /* unter Topbar (58) + Breadcrumb-Bar (~52) */
  width: 280px;
  max-height: calc(100vh - 134px);
  overflow-y: auto;
  background: var(--tappr-bg);
  border: 1px solid var(--tappr-border);
  border-radius: 14px;
  box-shadow: var(--shadow-elev);
  z-index: 25;
  display: flex;
  flex-direction: column;
}
/* Hybrid-Mode: Sidebar (230px) ist links → Card rueckt nach rechts. */
body.has-tappr-sidebar .tappr-nextsteps-float {
  left: calc(var(--tappr-sidebar-w, 230px) + 24px);
}
.tappr-nextsteps-float-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--tappr-border-2);
}
.tappr-nextsteps-float-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--tappr-ink);
  margin: 0;
  line-height: 1.3;
}
.tappr-nextsteps-float-sub {
  font-size: 11px;
  color: var(--tappr-mute);
  margin: 2px 0 0;
}
.tappr-nextsteps-float-close {
  flex-shrink: 0;
  background: transparent;
  border: 0;
  padding: 4px;
  border-radius: 6px;
  color: var(--tappr-mute);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit;
}
.tappr-nextsteps-float-close:hover {
  background: var(--tappr-bg-soft);
  color: var(--tappr-ink);
}
.tappr-nextsteps-float-list {
  list-style: none;
  margin: 0; padding: 4px;
  font-size: 12.5px;
  color: var(--tappr-ink-2);
}
.tappr-nextsteps-float-list .ns-item {
  border-radius: 6px;
}
.tappr-nextsteps-float-list .ns-item:hover { background: var(--tappr-bg-soft); }
.tappr-nextsteps-float-list a {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  color: inherit; text-decoration: none;
}
.tappr-nextsteps-float-list .ns-item.is-done .ns-mark { color: var(--tappr-ok); }
.tappr-nextsteps-float-list .ns-item.is-soon { opacity: 0.6; }
.tappr-nextsteps-float-list .ns-icon,
.tappr-nextsteps-float-list .ns-mark {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--tappr-mute);
}
.tappr-nextsteps-float-list .ns-label {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tappr-nextsteps-float-list .ns-arrow {
  color: var(--tappr-mute-2);
  flex-shrink: 0;
}
/* Bei schmaleren Viewports ausblenden — würde Dashboard-Content überlappen */
@media (max-width: 1700px) {
  .tappr-nextsteps-float { display: none; }
}

/* UI-COL-DRAG-01 (18.05) — Spalten-Reorder via HTML5 Drag-and-Drop.
 * Aktiv auf <th data-col-key> mit draggable=true. Locked-Spalten
 * (check, actions) tragen kein draggable und kein cursor:grab. */
.tappr-table th[data-col-key][draggable="true"] {
  cursor: grab;
  user-select: none;
}
.tappr-table th[data-col-key][draggable="true"]:active {
  cursor: grabbing;
}
.tappr-table th[data-col-key].col-drop-before {
  box-shadow: inset 2px 0 0 0 var(--tappr-red);
}
.tappr-table th[data-col-key].col-drop-after {
  box-shadow: inset -2px 0 0 0 var(--tappr-red);
}
.tappr-table th[data-col-key].col-dragging {
  opacity: 0.5;
}

/* UI-COL-DRAG-02 (18.05) — Drag-Handle-Icon im Header (iOS-Reorder-Stil).
 * pointer-events:none damit Sort-Klick auf <button> durchgereicht wird.
 * Cursor:grab bleibt auf dem <th> selbst (UI-COL-DRAG-01). */
.tappr-col-drag-handle {
  display: inline-flex;
  align-items: center;
  color: var(--tappr-mute);
  margin-right: 6px;
  pointer-events: none;
  vertical-align: middle;
}
.tappr-table th[data-col-key][draggable="true"]:hover .tappr-col-drag-handle {
  color: var(--tappr-ink-2);
}

/* UI-CATEGORY-ROW-ICONS-01 (18.05) — Block-C Row-Actions: 4 sichtbare Icons
 * statt Kebab-Dropdown. Klein, dezent, Hover wechselt Ton + leichter Bg. */
.tappr-row-actions {
  white-space: nowrap;
  text-align: right;
}
.tappr-row-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  margin-left: 4px;
  border: 0;
  background: transparent;
  color: var(--tappr-mute);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.tappr-row-action-btn:hover {
  background: var(--tappr-bg-soft);
  color: var(--tappr-ink-2);
}
.tappr-row-action-btn:focus-visible {
  outline: 2px solid var(--tappr-red);
  outline-offset: 1px;
}
.tappr-row-action-btn--danger:hover {
  color: var(--tappr-red-text);
  background: var(--tappr-red-soft);
}

/* UI-COL-DRAG-03 (18.05) — Hinweistext "Spalten verschiebbar" in Toolbar.
 * UI-COL-DRAG-04 (18.05): zentriert via flex:1, kleinerer Text (11px). */
.tappr-col-drag-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  font-size: 11px;
  color: var(--tappr-mute);
  white-space: nowrap;
}
.tappr-col-drag-hint-icon {
  display: inline-flex;
  align-items: center;
  color: var(--tappr-mute);
}
@media (max-width: 768px) {
  .tappr-col-drag-hint { display: none; }
}

/* UI-CATEGORY-NAME-INLINE-01 (18.05) — Teile 3+4: klickbarer Name + Inline-Stift.
 * Popover (Teil 5) folgt in eigenem Commit.
 * Block AR-B (19.05): .tappr-price-cell + .tappr-price-edit-btn als
 * Selektor-Aliasse fuer Inline-Preis-Edit im Artikel-Tab. */
.tappr-name-cell,
.tappr-price-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.tappr-name-link {
  color: var(--tappr-ink);
  font-weight: 600;
  cursor: pointer;
  transition: color 120ms ease;
}
.tappr-name-link:hover,
.tappr-name-link:focus-visible {
  color: var(--tappr-red);
  outline: none;
}
.tappr-name-edit-btn,
.tappr-price-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tappr-mute);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.tappr-name-edit-btn:hover,
.tappr-price-edit-btn:hover {
  background: var(--tappr-bg-soft);
  color: var(--tappr-ink-2);
}

/* UI-CATEGORY-NAME-INLINE-02 (18.05) — Teil 5: Schnell-Edit-Popover.
 * Position: absolute, an Stift-Trigger gebunden (JS setzt left/top).
 * Block AR-B (19.05): .tappr-price-popover als Selektor-Alias
 * hinzugefuegt, identische Styles fuer Inline-Preis-Edit im Artikel-Tab. */
.tappr-name-popover,
.tappr-price-popover {
  position: absolute;
  z-index: 50;
  background: var(--tappr-bg);
  border: 1px solid var(--tappr-border);
  border-radius: 10px;
  box-shadow: var(--tappr-shadow);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tappr-name-popover-label,
.tappr-price-popover-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--tappr-mute);
  font-weight: 600;
}
.tappr-name-popover-input,
.tappr-price-popover-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--tappr-border);
  border-radius: 6px;
  font-size: 14px;
  color: var(--tappr-ink);
  background: var(--tappr-bg);
  font-family: inherit;
}
.tappr-name-popover-input:focus,
.tappr-price-popover-input:focus {
  outline: none;
  border-color: var(--tappr-red);
}
.tappr-name-popover-error,
.tappr-price-popover-error {
  margin: 0;
  font-size: 12px;
  color: var(--tappr-red-text);
}
.tappr-name-popover-actions,
.tappr-price-popover-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}