/* Gemeinsame Komponenten: Tabs/Reiter-Panels, Typ-Icons der Gewerke, Karten-Formular. */

/* ============ TABS ============ */
.tabs { display: flex; gap: 4px; border: 1px solid var(--border); border-radius: 10px; padding: 4px; margin-bottom: 24px; background: var(--bg-card); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ============ DEVICE TYPE ICONS ============ */
.type-icon {
  width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(var(--accent-rgb), 0.25);
}
.type-icon svg { width: 19px; height: 19px; }
.type-icon.t-console { background: rgba(79,140,255,0.12); color: var(--accent-2); border-color: rgba(79,140,255,0.25); }
.type-icon.t-stagebox { background: rgba(var(--accent-rgb), 0.12); color: var(--accent); }
.type-icon.t-dante { background: rgba(110,231,168,0.12); color: var(--ok); border-color: rgba(110,231,168,0.25); }
.type-icon.t-interface { background: rgba(255,190,90,0.12); color: var(--warn); border-color: rgba(255,190,90,0.25); }
.type-icon.t-wireless { background: rgba(200,140,255,0.12); color: var(--domain-wireless); border-color: rgba(200,140,255,0.25); }
.type-icon.t-intercom { background: rgba(255,140,140,0.12); color: var(--domain-intercom); border-color: rgba(255,140,140,0.25); }
.type-icon.t-other { background: rgba(154,167,189,0.12); color: var(--text-secondary); border-color: var(--border-strong); }
.type-icon.t-video { background: rgba(79,140,255,0.12); color: var(--accent-2); border-color: rgba(79,140,255,0.25); }
.type-icon.t-light { background: rgba(255,210,90,0.12); color: var(--domain-light); border-color: rgba(255,210,90,0.25); }
.type-icon.t-camera { background: rgba(255,140,90,0.12); color: var(--domain-camera); border-color: rgba(255,140,90,0.25); }

/* Karten-Formular in voller Breite (Import-Kandidatenliste über dem Schaltplan). */
.form-card.wide { max-width: none; }

/* Kompakter Button (32 px) in Seitenleisten und Dialogen der Projektseite. */
.btn.btn-compact { padding: 0 12px; height: 32px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; }
.btn.btn-compact svg { width: 14px; height: 14px; }