/* 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(var(--accent-2-rgb),0.12); color: var(--accent-2); border-color: rgba(var(--accent-2-rgb),0.25); }
.type-icon.t-stagebox { background: rgba(var(--accent-rgb), 0.12); color: var(--accent); }
.type-icon.t-dante { background: rgba(var(--ok-rgb),0.12); color: var(--ok); border-color: rgba(var(--ok-rgb),0.25); }
.type-icon.t-interface { background: rgba(var(--warn-rgb),0.12); color: var(--warn); border-color: rgba(var(--warn-rgb),0.25); }
.type-icon.t-wireless { background: color-mix(in srgb, var(--domain-wireless) 12%, transparent); color: var(--domain-wireless); border-color: color-mix(in srgb, var(--domain-wireless) 25%, transparent); }
.type-icon.t-intercom { background: color-mix(in srgb, var(--domain-intercom) 12%, transparent); color: var(--domain-intercom); border-color: color-mix(in srgb, var(--domain-intercom) 25%, transparent); }
.type-icon.t-other { background: rgba(var(--ov-rgb), 0.08); color: var(--text-secondary); border-color: var(--border-strong); }
.type-icon.t-video { background: rgba(var(--accent-2-rgb),0.12); color: var(--accent-2); border-color: rgba(var(--accent-2-rgb),0.25); }
.type-icon.t-light { background: color-mix(in srgb, var(--domain-light) 12%, transparent); color: var(--domain-light); border-color: color-mix(in srgb, var(--domain-light) 25%, transparent); }
.type-icon.t-camera { background: rgba(var(--accent-2-rgb),0.12); color: var(--accent-2); border-color: rgba(var(--accent-2-rgb),0.25); } /* Kamera gehört zu Video: dieselbe Farbe, eigenes Symbol */

/* 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; }