/* ═══════════════════════════════════════════════════════════════════════
robopult — Design System v1 (rebranded from basestar.io)
KI-gestütztes Telefon-Management für moderne SaaS-Unternehmen
═══════════════════════════════════════════════════════════════════════
Struktur:
1. Reset + Root-Tokens (Light-Theme)
2. Dark-Theme Overrides
3. Legacy-Aliase (rueckwaerts-kompatibel, bleibt bis Phase-J)
4. Typography / Base-Elements
5. Base-Komponenten (bs-*)
6. Legacy-Layouts (Login, Sidebar, Tabs, Dialoge …)
7. Utilities
8. Responsive
Alle neuen Features IMMER mit bs-* Tokens/Klassen bauen.
Alte Klassen bleiben fuer bestehenden Code funktionsfaehig.
═══════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
/* ═══════════════════════════════════════════════════════════════════════
ROBOPULT DESIGN-SYSTEM „Digitale Manufaktur" V1.0
Brand-Anchor: Industrial Navy + Precision Emerald
90 % Neutrals (Slate), 10 % Akzent (Emerald), Navy für Brand-Moments
Single-Source: --rp-* Tokens. Bestehende --bs-* sind kompatible Aliases.
═══════════════════════════════════════════════════════════════════════ */
:root {
/* === Core Brand: Industrial Navy (Logo, Header, Autorität) === */
--rp-navy: #1A2B3C; /* Industrial Navy — Primärfarbe für Brand-Moments */
--rp-navy-strong: #0F1B2A; /* Hover/Active */
--rp-navy-soft: #E2E8F0; /* Soft-BG-Companion (gleicher Slate-Stack) */
/* === Foundation: Slate-Stack (90 % der UI) === */
--rp-slate-50: #F8FAFC;
--rp-slate-100: #F1F5F9;
--rp-slate-200: #E2E8F0;
--rp-slate-300: #CBD5E1;
--rp-slate-400: #94A3B8;
--rp-slate-500: #64748B;
--rp-slate-600: #475569;
--rp-slate-700: #334155;
--rp-slate-800: #1E293B;
--rp-slate-900: #0F172A;
/* === Brand-Akzent: Precision Emerald (Action-Buttons, "System Aktiv") === */
--rp-emerald-50: #ECFDF5;
--rp-emerald-100: #D1FAE5;
--rp-emerald-300: #6EE7B7;
--rp-emerald-400: #34D399;
--rp-emerald-500: #10B981; /* Precision Emerald — Brand-Akzent */
--rp-emerald-600: #059669;
--rp-emerald-700: #047857;
/* === Module-Akzente (kategorial — pro Modul ein Ton) === */
--rp-mod-attendant: var(--rp-emerald-500);
--rp-mod-attendant-soft: var(--rp-emerald-100);
--rp-mod-voicemail: #0891B2; /* cyan-600 — Stream/Tech */
--rp-mod-voicemail-soft: #CFFAFE;
--rp-mod-announcements: #D97706; /* amber-600 — Audio/Warmth */
--rp-mod-announcements-soft: #FEF3C7;
--rp-mod-team: #7C3AED; /* violet-600 — Friendly People */
--rp-mod-team-soft: #EDE9FE;
--rp-mod-platform: var(--rp-slate-600);
--rp-mod-platform-soft: var(--rp-slate-200);
/* === Status (semantisch, sparsam) === */
--rp-success: var(--rp-emerald-500);
--rp-success-soft: var(--rp-emerald-100);
--rp-warning: #D97706;
--rp-warning-soft: #FEF3C7;
--rp-danger: #EF4444;
--rp-danger-soft: #FEE2E2;
--rp-info: var(--rp-slate-600);
--rp-info-soft: var(--rp-slate-200);
/* === Shadows (modern, soft, layered — kein hartes Black) === */
--rp-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
--rp-shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.04);
--rp-shadow-md: 0 4px 12px -4px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
--rp-shadow-lg: 0 12px 24px -8px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.06);
--rp-shadow-xl: 0 24px 48px -12px rgba(15, 23, 42, 0.18), 0 8px 16px rgba(15, 23, 42, 0.08);
/* ─── Brand-Anchor: Navy für Sidebar-Logo, Wordmark, Header-Decoration ── */
--bs-brand-navy: var(--rp-navy);
--bs-brand-navy-hover: var(--rp-navy-strong);
/* ─── Backward-Compat: --bs-* aliasen auf RP-Tokens ───────────────── */
--bs-primary: var(--rp-slate-700); /* Buttons + Body-CTA (nicht zu dunkel) */
--bs-primary-hover: var(--rp-slate-800);
--bs-primary-strong: var(--rp-slate-900);
--bs-primary-soft: var(--rp-slate-100);
--bs-primary-fg: #ffffff;
--bs-accent: var(--rp-emerald-500); /* Brand-Akzent: System Aktiv, CTA */
--bs-accent-soft: var(--rp-emerald-100);
--bs-accent-cyan: var(--rp-emerald-400);
--bs-accent-sky: var(--rp-slate-600);
--bs-mod-attendant: var(--rp-mod-attendant);
--bs-mod-attendant-soft: var(--rp-mod-attendant-soft);
--bs-mod-voicemail: var(--rp-mod-voicemail);
--bs-mod-voicemail-soft: var(--rp-mod-voicemail-soft);
--bs-mod-announcements: var(--rp-mod-announcements);
--bs-mod-announcements-soft:var(--rp-mod-announcements-soft);
--bs-mod-team: var(--rp-mod-team);
--bs-mod-team-soft: var(--rp-mod-team-soft);
--bs-mod-platform: var(--rp-mod-platform);
--bs-mod-platform-soft: var(--rp-mod-platform-soft);
--bs-gradient-brand: linear-gradient(135deg, var(--rp-slate-800) 0%, var(--rp-emerald-500) 100%);
--bs-gradient-hero: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
--bs-gradient-text: linear-gradient(135deg, #ffffff 30%, #34d399 70%, #10b981 100%);
--bs-glow-indigo: radial-gradient(circle at 30% 30%, rgba(30,41,59,0.14), transparent 60%);
--bs-glow-purple: radial-gradient(circle at 70% 70%, rgba(16,185,129,0.14), transparent 60%);
/* --- Flaechen --- */
--bs-bg: #f8fafc;
--bs-bg-elevated: #ffffff;
--bs-bg-subtle: #f1f5f9;
--bs-bg-inset: #f8fafc;
/* --- Text --- */
--bs-fg: #0f172a;
--bs-fg-muted: #475569;
--bs-fg-subtle: #64748b;
/* --- Rahmen --- */
--bs-border: #e2e8f0;
--bs-border-hover: #cbd5e1;
--bs-border-strong: #94a3b8;
/* --- Status --- */
--bs-success: #10b981;
--bs-success-soft: #d1fae5;
--bs-warning: #f59e0b;
--bs-warning-soft: #fef3c7;
--bs-danger: #ef4444;
--bs-danger-soft: #fee2e2;
--bs-info: #475569; /* slate-600 — neutral info statt Sky-Blau */
--bs-info-soft: #f1f5f9; /* slate-100 */
/* --- Typography (Robopult: Outfit für Display + UI, JetBrains Mono für Code) --- */
--bs-font-sans: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;
--bs-font-display: 'Outfit', 'Space Grotesk', 'Inter', -apple-system, system-ui, sans-serif;
--bs-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
--bs-text-xs: 11px;
--bs-text-sm: 12px;
--bs-text-base: 14px;
--bs-text-md: 16px;
--bs-text-lg: 20px;
--bs-text-xl: 24px;
--bs-text-2xl: 32px;
--bs-weight-normal: 400;
--bs-weight-medium: 500;
--bs-weight-semibold: 600;
--bs-weight-bold: 700;
/* --- Spacing (4px grid) --- */
--bs-1: 4px; --bs-2: 8px; --bs-3: 12px; --bs-4: 16px;
--bs-5: 20px; --bs-6: 24px; --bs-8: 32px; --bs-10: 40px;
--bs-12: 48px; --bs-16: 64px;
/* --- Radii (Robopult Pillow-Scale, matched zur „Digitale Manufaktur"-Vorlage) --- */
--bs-r-sm: 8px; /* small chips, mono-tags */
--bs-r: 12px; /* default cards, inputs, buttons (rounded-xl) */
--bs-r-lg: 16px; /* prominent cards (rounded-2xl) */
--bs-r-xl: 24px; /* hero cards, panels (rounded-3xl) */
--bs-r-2xl: 32px; /* mega-panels */
--bs-r-3xl: 48px; /* hero-section / decorative wrappers (rounded-[3rem]) */
--bs-r-full: 999px;
/* --- Shadows --- */
--bs-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
--bs-shadow: 0 2px 4px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.08);
--bs-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.12);
--bs-shadow-glow: 0 0 0 3px rgba(30,41,59, 0.22);
/* --- Motion --- */
--bs-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--bs-transition-slow: 250ms cubic-bezier(0.16, 1, 0.3, 1);
/* --- Z-Index --- */
--bs-z-sidebar: 30;
--bs-z-banner: 40;
--bs-z-topbar: 50;
--bs-z-dialog: 100;
--bs-z-toast: 200;
}
/* ────── 2. Dark-Theme Overrides (Robopult Atmospheric Slate) ──────────────── */
[data-theme="dark"] {
--bs-primary: #cbd5e1; /* slate-300 — heller Stem für Dark */
--bs-primary-hover: #e2e8f0; /* slate-200 */
--bs-primary-strong: #f1f5f9; /* slate-100 */
--bs-primary-soft: rgba(203, 213, 225, 0.10);
--bs-primary-fg: #0f172a;
--bs-accent: #34d399; /* emerald-400 — heller Akzent für Dark */
--bs-accent-soft: rgba(52, 211, 153, 0.16);
--bs-accent-cyan: #6ee7b7; /* emerald-300 */
--bs-accent-sky: #94a3b8; /* slate-400 */
/* Module-Palette Dark — heller-saturierter, soft mit Alpha statt Pastell */
--bs-mod-attendant: #34d399;
--bs-mod-attendant-soft: rgba(52, 211, 153, 0.16);
--bs-mod-voicemail: #22d3ee; /* cyan-400 */
--bs-mod-voicemail-soft: rgba(34, 211, 238, 0.14);
--bs-mod-announcements: #fbbf24; /* amber-400 */
--bs-mod-announcements-soft:rgba(251, 191, 36, 0.14);
--bs-mod-team: #a78bfa; /* violet-400 */
--bs-mod-team-soft: rgba(167, 139, 250, 0.14);
--bs-mod-platform: #94a3b8; /* slate-400 */
--bs-mod-platform-soft: rgba(148, 163, 184, 0.14);
--bs-gradient-hero: radial-gradient(at 30% 20%, rgba(30,41,59,0.4), transparent 50%),
radial-gradient(at 70% 80%, rgba(16,185,129,0.10), transparent 50%),
linear-gradient(180deg, #060a13 0%, #0a0f18 100%);
--bs-bg: #060a13; /* slate-noir */
--bs-bg-elevated: #0d1320;
--bs-bg-subtle: #131a2a;
--bs-bg-inset: #08101c;
--bs-fg: #e6e6f0;
--bs-fg-muted: #9090a8;
--bs-fg-subtle: #5a5a72;
--bs-border: rgba(255, 255, 255, 0.06);
--bs-border-hover: rgba(255, 255, 255, 0.12);
--bs-border-strong: rgba(255, 255, 255, 0.18);
--bs-success-soft: rgba(16, 185, 129, 0.18);
--bs-warning-soft: rgba(245, 158, 11, 0.18);
--bs-danger-soft: rgba(239, 68, 68, 0.18);
--bs-info-soft: rgba(148, 163, 184, 0.16);
--bs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
--bs-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
--bs-shadow-lg: 0 20px 40px -20px rgba(0, 0, 0, 0.6);
--bs-shadow-glow: 0 0 0 3px rgba(52, 211, 153, 0.28);
--bs-glow-indigo: radial-gradient(circle at 30% 30%, rgba(30,41,59,0.32), transparent 60%);
--bs-glow-purple: radial-gradient(circle at 70% 70%, rgba(16,185,129,0.18), transparent 60%);
}
/* Wenn Theme auf 'auto' steht (oder nicht gesetzt): prefers-color-scheme */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bs-primary: #cbd5e1;
--bs-primary-hover: #e2e8f0;
--bs-primary-strong: #f1f5f9;
--bs-primary-soft: rgba(203, 213, 225, 0.10);
--bs-primary-fg: #0f172a;
--bs-accent: #34d399;
--bs-accent-soft: rgba(52, 211, 153, 0.16);
--bs-accent-cyan: #6ee7b7;
--bs-accent-sky: #94a3b8;
--bs-gradient-hero: radial-gradient(at 30% 20%, rgba(30,41,59,0.4), transparent 50%),
radial-gradient(at 70% 80%, rgba(16,185,129,0.10), transparent 50%),
linear-gradient(180deg, #060a13 0%, #0a0f18 100%);
--bs-bg: #060a13;
--bs-bg-elevated: #0d1320;
--bs-bg-subtle: #131a2a;
--bs-bg-inset: #08101c;
--bs-fg: #e6e6f0;
--bs-fg-muted: #9090a8;
--bs-fg-subtle: #5a5a72;
--bs-border: rgba(255, 255, 255, 0.06);
--bs-border-hover: rgba(255, 255, 255, 0.12);
--bs-border-strong: rgba(255, 255, 255, 0.18);
--bs-success-soft: rgba(16, 185, 129, 0.18);
--bs-warning-soft: rgba(245, 158, 11, 0.18);
--bs-danger-soft: rgba(239, 68, 68, 0.18);
--bs-info-soft: rgba(148, 163, 184, 0.16);
--bs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
--bs-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
--bs-shadow-lg: 0 20px 40px -20px rgba(0, 0, 0, 0.6);
--bs-shadow-glow: 0 0 0 3px rgba(71,85,105, 0.32);
--bs-glow-indigo: radial-gradient(circle at 30% 30%, rgba(30,41,59,0.22), transparent 60%);
--bs-glow-purple: radial-gradient(circle at 70% 70%, rgba(16,185,129,0.18), transparent 60%);
}
}
/* ────── 3. Legacy-Aliase (rueckwaerts-kompatibel) ──────────────────── */
:root {
--primary: var(--bs-primary);
--primary-dark: var(--bs-primary-hover);
--accent: var(--bs-accent-sky);
--success: var(--bs-success);
--warning: var(--bs-warning);
--danger: var(--bs-danger);
/* --gradient/-soft: Legacy-Aliases. War früher Indigo→Purple-Verlauf,
jetzt fix Emerald für saubere Modul-Avatare/Badges. Soft bleibt Hero-Gradient. */
--gradient: var(--rp-emerald-500);
--gradient-soft: var(--bs-gradient-hero);
--text: var(--bs-fg);
--text-secondary: var(--bs-fg-muted);
--text-muted: var(--bs-fg-subtle);
--border: var(--bs-border);
--border-hover: var(--bs-border-hover);
--bg: var(--bs-bg);
--bg-subtle: var(--bs-bg-subtle);
--card: var(--bs-bg-elevated);
--radius-sm: var(--bs-r-sm);
--radius: var(--bs-r);
--radius-lg: var(--bs-r-lg);
--radius-xl: var(--bs-r-xl);
--shadow-sm: var(--bs-shadow-sm);
--shadow: var(--bs-shadow);
--shadow-lg: var(--bs-shadow-lg);
--shadow-glow: var(--bs-shadow-glow);
--transition: var(--bs-transition);
}
/* ────── 4. Typography / Base-Elements ──────────────────────────────── */
html { height: 100%; background: var(--bs-bg); }
body { height: 100%; }
body {
font-family: var(--bs-font-sans);
background: var(--bs-bg);
color: var(--bs-fg);
font-size: var(--bs-text-base);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: background-color var(--bs-transition), color var(--bs-transition);
}
.view { min-height: 100vh; }
/* Focus-Visible — sichtbar ueberall */
:focus-visible {
outline: none;
box-shadow: var(--bs-shadow-glow);
border-radius: var(--bs-r-sm);
}
/* Selection */
::selection { background: var(--bs-primary-soft); color: var(--bs-fg); }
/* Scrollbars (dezent) */
* { scrollbar-width: thin; scrollbar-color: var(--bs-border-hover) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--bs-border-hover); border-radius: 10px; border: 2px solid var(--bs-bg); }
*::-webkit-scrollbar-thumb:hover { background: var(--bs-border-strong); }
/* ────── 5. Base-Komponenten (bs-*) ─────────────────────────────────── */
/* --- Brand Logo (inline usage) --- */
.bs-logo {
width: 36px; height: 36px;
display: inline-block;
vertical-align: middle;
}
.bs-brand {
display: inline-flex; align-items: center; gap: var(--bs-2);
font-family: var(--bs-font-sans);
font-weight: var(--bs-weight-bold);
font-size: var(--bs-text-lg);
letter-spacing: -0.01em;
color: var(--bs-fg);
text-decoration: none;
}
.bs-brand .bs-brand-accent { color: var(--bs-primary); }
/* --- Button --- */
.bs-btn {
display: inline-flex; align-items: center; justify-content: center;
gap: var(--bs-2);
height: 36px;
padding: 0 var(--bs-4);
border: 1px solid transparent;
border-radius: var(--bs-r-sm);
font-family: inherit;
font-size: var(--bs-text-base);
font-weight: var(--bs-weight-medium);
line-height: 1;
cursor: pointer;
white-space: nowrap;
user-select: none;
transition: all var(--bs-transition);
}
.bs-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.bs-btn svg { flex-shrink: 0; }
.bs-btn-primary {
background: var(--bs-primary);
color: var(--bs-primary-fg);
}
.bs-btn-primary:hover:not(:disabled) {
background: var(--bs-primary-hover);
}
.bs-btn-secondary {
background: var(--bs-bg-elevated);
color: var(--bs-fg);
border-color: var(--bs-border);
}
.bs-btn-secondary:hover:not(:disabled) {
background: var(--bs-bg-subtle);
border-color: var(--bs-border-hover);
}
.bs-btn-ghost {
background: transparent;
color: var(--bs-fg-muted);
}
.bs-btn-ghost:hover:not(:disabled) {
background: var(--bs-bg-subtle);
color: var(--bs-fg);
}
/* Tenant-User-Trash — ghost-Btn mit Danger-Hover (statt inline color:#dc2626) */
.tenant-user-del { color: var(--bs-fg-muted); }
.tenant-user-del:hover:not(:disabled) {
background: var(--bs-danger-soft);
color: var(--bs-danger);
}
.bs-btn-danger {
background: transparent;
color: var(--bs-danger);
border-color: var(--bs-danger-soft);
}
.bs-btn-danger:hover:not(:disabled) {
background: var(--bs-danger-soft);
border-color: var(--bs-danger);
}
.bs-btn-sm { height: 28px; padding: 0 var(--bs-3); font-size: var(--bs-text-sm); }
.bs-btn-lg { height: 44px; padding: 0 var(--bs-5); font-size: var(--bs-text-md); }
.bs-btn-block { width: 100%; }
.bs-btn-icon {
width: 36px; padding: 0;
border-color: var(--bs-border);
background: var(--bs-bg-elevated);
color: var(--bs-fg-muted);
}
.bs-btn-icon:hover:not(:disabled) { background: var(--bs-bg-subtle); color: var(--bs-fg); border-color: var(--bs-border-hover); }
.bs-btn-icon.bs-btn-sm { width: 28px; }
/* --- Card --- */
.bs-card {
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-lg);
padding: var(--bs-6);
}
.bs-card-interactive {
cursor: pointer;
transition: all var(--bs-transition);
}
.bs-card-interactive:hover {
border-color: var(--bs-border-hover);
box-shadow: var(--bs-shadow-sm);
transform: translateY(-1px);
}
.bs-card-compact { padding: var(--bs-4); }
/* --- Stat-Card --- */
.bs-stat-card {
display: flex; align-items: center; gap: var(--bs-3);
padding: var(--bs-4) var(--bs-5);
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r);
transition: all var(--bs-transition);
}
.bs-stat-card:hover { border-color: var(--bs-border-hover); }
.bs-stat-card-icon {
width: 40px; height: 40px;
border-radius: var(--bs-r-sm);
background: var(--bs-primary-soft);
color: var(--bs-primary);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.bs-stat-card-value {
font-size: var(--bs-text-xl);
font-weight: var(--bs-weight-bold);
color: var(--bs-fg);
line-height: 1.1;
}
.bs-stat-card-label {
font-size: var(--bs-text-xs);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--bs-fg-muted);
font-weight: var(--bs-weight-semibold);
margin-top: 2px;
}
/* --- Form --- */
.bs-field { display: flex; flex-direction: column; gap: var(--bs-2); margin-bottom: var(--bs-4); }
.bs-label {
font-size: var(--bs-text-sm);
font-weight: var(--bs-weight-medium);
color: var(--bs-fg-muted);
}
.bs-input, .bs-textarea, .bs-select {
width: 100%;
height: 38px;
padding: 0 var(--bs-3);
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-sm);
color: var(--bs-fg);
font-family: inherit;
font-size: var(--bs-text-base);
transition: all var(--bs-transition);
}
.bs-input:hover, .bs-textarea:hover, .bs-select:hover {
border-color: var(--bs-border-hover);
}
.bs-input:focus, .bs-textarea:focus, .bs-select:focus {
outline: none;
border-color: var(--bs-primary);
box-shadow: var(--bs-shadow-glow);
}
.bs-textarea { height: auto; min-height: 88px; padding: var(--bs-3); resize: vertical; line-height: 1.5; }
.bs-select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1,1 5,5 9,1'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--bs-3) center;
padding-right: var(--bs-8);
}
.bs-input[disabled], .bs-textarea[disabled], .bs-select[disabled] { opacity: 0.5; cursor: not-allowed; }
.bs-input::placeholder, .bs-textarea::placeholder { color: var(--bs-fg-subtle); }
.bs-help { font-size: var(--bs-text-xs); color: var(--bs-fg-subtle); margin-top: -2px; }
.bs-error-text { font-size: var(--bs-text-sm); color: var(--bs-danger); min-height: 18px; }
/* --- Badge / Pill --- */
.bs-badge {
display: inline-flex; align-items: center; gap: var(--bs-1);
padding: 2px var(--bs-2);
border-radius: var(--bs-r-sm);
font-size: var(--bs-text-xs);
font-weight: var(--bs-weight-semibold);
background: var(--bs-bg-subtle);
color: var(--bs-fg-muted);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.bs-badge-primary { background: var(--bs-primary-soft); color: var(--bs-primary); }
.bs-badge-success { background: var(--bs-success-soft); color: var(--bs-success); }
.bs-badge-warning { background: var(--bs-warning-soft); color: var(--bs-warning); }
.bs-badge-danger { background: var(--bs-danger-soft); color: var(--bs-danger); }
.bs-pill {
display: inline-flex; align-items: center; gap: var(--bs-1);
padding: var(--bs-1) var(--bs-3);
border-radius: var(--bs-r-full);
font-size: var(--bs-text-xs);
font-weight: var(--bs-weight-medium);
background: var(--bs-bg-subtle);
color: var(--bs-fg-muted);
}
.bs-pill-primary { background: var(--bs-primary-soft); color: var(--bs-primary); }
.bs-pill-success { background: var(--bs-success-soft); color: var(--bs-success); }
/* --- Switch --- */
.bs-switch {
position: relative;
width: 40px; height: 22px;
flex-shrink: 0;
display: inline-block;
}
.bs-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.bs-switch-slider {
position: absolute; inset: 0;
background: var(--bs-border-hover);
border-radius: var(--bs-r-full);
cursor: pointer;
transition: background var(--bs-transition);
}
.bs-switch-slider::before {
content: "";
position: absolute;
left: 3px; top: 3px;
width: 16px; height: 16px;
background: white;
border-radius: 50%;
box-shadow: var(--bs-shadow-sm);
transition: transform var(--bs-transition);
}
.bs-switch input:checked + .bs-switch-slider { background: var(--bs-primary); }
.bs-switch input:checked + .bs-switch-slider::before { transform: translateX(18px); }
.bs-switch input:focus-visible + .bs-switch-slider { box-shadow: var(--bs-shadow-glow); }
/* --- Empty / Loading / Error States --- */
.bs-empty-state {
text-align: center;
padding: var(--bs-10) var(--bs-5);
background: var(--bs-bg-elevated);
border: 1px dashed var(--bs-border);
border-radius: var(--bs-r-lg);
}
.bs-empty-icon {
width: 56px; height: 56px;
margin: 0 auto var(--bs-3);
display: flex; align-items: center; justify-content: center;
background: var(--bs-bg-subtle);
border-radius: var(--bs-r-full);
color: var(--bs-fg-muted);
}
.bs-empty-title {
font-size: var(--bs-text-md);
font-weight: var(--bs-weight-semibold);
color: var(--bs-fg);
margin-bottom: var(--bs-1);
}
.bs-empty-text { font-size: var(--bs-text-sm); color: var(--bs-fg-muted); max-width: 340px; margin: 0 auto; }
.bs-loading {
display: flex; align-items: center; justify-content: center; gap: var(--bs-2);
padding: var(--bs-10);
color: var(--bs-fg-muted);
font-size: var(--bs-text-sm);
}
.bs-spinner {
width: 18px; height: 18px;
border: 2px solid var(--bs-border);
border-top-color: var(--bs-primary);
border-radius: 50%;
animation: bs-spin 600ms linear infinite;
}
@keyframes bs-spin { to { transform: rotate(360deg); } }
.bs-error-banner {
display: flex; align-items: center; gap: var(--bs-3);
padding: var(--bs-3) var(--bs-4);
background: var(--bs-danger-soft);
color: var(--bs-danger);
border-radius: var(--bs-r-sm);
font-size: var(--bs-text-sm);
}
/* --- Theme Toggle (Segmented) --- */
.bs-theme-toggle {
display: inline-flex;
background: var(--bs-bg-subtle);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-full);
padding: 2px;
gap: 0;
}
.bs-theme-toggle button {
width: 26px; height: 26px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
border: none;
border-radius: var(--bs-r-full);
color: var(--bs-fg-muted);
cursor: pointer;
transition: all var(--bs-transition);
}
.bs-theme-toggle button:hover { color: var(--bs-fg); }
.bs-theme-toggle button.active {
background: var(--bs-bg-elevated);
color: var(--bs-primary);
box-shadow: var(--bs-shadow-sm);
}
.bs-theme-toggle button svg { width: 14px; height: 14px; }
/* ═══════ Login (Setup-Hint + Badge — Layout in §10 V4) ═══════════════ */
/* Legacy .view-auth / .login-card / .bg-orbs / .login-title / .login-subtitle
wurden in V4 (Robopult Split-Screen-Hero) durch §10 ersetzt — siehe ~Z.2467ff.
Hier bleiben nur die Setup-Hint-Styles, die im Login-Card-Body verwendet werden. */
.setup-hint {
margin-top: 24px;
padding: 16px;
background: rgba(245, 158, 11, 0.08);
border: 1px solid rgba(245, 158, 11, 0.2);
border-radius: var(--radius);
text-align: center;
}
.setup-hint p { color: var(--text-secondary); margin-bottom: 10px; font-size: 13px; }
.badge-new {
display: inline-block;
padding: 2px 10px;
background: var(--gradient);
color: white;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.03em;
margin-bottom: 8px;
}
#setup-box { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
#setup-box h3 { font-size: 16px; margin-bottom: 16px; }
/* ═══════ Forms ═══════════════════════════════════════════════════════ */
.field { margin-bottom: 16px; }
.field label, label {
display: block;
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
margin-bottom: 6px;
}
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], textarea, select {
width: 100%;
padding: 10px 14px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 14px;
font-family: inherit;
background: white;
color: var(--text);
transition: all var(--transition);
}
input:focus, textarea:focus, select:focus {
outline: none;
border-color: var(--primary);
box-shadow: var(--shadow-glow);
}
textarea { resize: vertical; min-height: 100px; }
.toggle { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; cursor: pointer; }
.toggle input { width: auto; margin: 0; }
.toggle span { color: var(--text); font-weight: 500; font-size: 14px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .grid-2 { grid-template-columns: 1fr; } }
.form-actions {
display: flex;
gap: 8px;
margin-top: 20px;
flex-wrap: wrap;
}
.inline-form {
display: flex;
gap: 8px;
padding: 12px;
background: var(--bg-subtle);
border-radius: var(--radius);
margin-top: 10px;
}
.inline-form input, .inline-form select { flex: 1; }
.error {
color: var(--danger);
font-size: 13px;
min-height: 18px;
margin: 8px 0;
}
/* ═══════ Buttons ═════════════════════════════════════════════════════ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 9px 16px;
border: none;
border-radius: var(--radius-sm);
font-size: 14px;
font-weight: 500;
font-family: inherit;
cursor: pointer;
transition: all var(--transition);
white-space: nowrap;
user-select: none;
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn svg { flex-shrink: 0; }
.btn-block { width: 100%; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-primary {
background: var(--gradient);
color: white;
box-shadow: 0 1px 2px rgba(30,41,59, 0.3);
}
.btn-primary:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(30,41,59, 0.4);
}
.btn-secondary {
background: var(--card);
color: var(--text);
border: 1px solid var(--border);
}
.btn-secondary:hover:not(:disabled) {
border-color: var(--border-hover);
background: var(--bg-subtle);
}
.btn-ghost {
background: transparent;
color: var(--text-secondary);
}
.btn-ghost:hover:not(:disabled) { background: var(--bg-subtle); color: var(--text); }
.btn-danger {
background: white;
color: var(--danger);
border: 1px solid rgba(239, 68, 68, 0.2);
}
.btn-danger:hover:not(:disabled) {
background: rgba(239, 68, 68, 0.06);
border-color: var(--danger);
}
.arrow {
transition: transform var(--transition);
}
.btn:hover .arrow { transform: translateX(3px); }
/* ═══════ App Layout ══════════════════════════════════════════════════ */
#view-app {
display: grid;
grid-template-columns: 260px 1fr;
min-height: 100vh;
}
.sidebar {
background: var(--card);
border-right: 1px solid var(--border);
padding: 24px 16px;
display: flex;
flex-direction: column;
gap: 20px;
position: sticky;
top: 0;
height: 100vh;
}
.sidebar-logo {
display: flex;
align-items: center;
gap: 10px;
padding: 0 8px;
font-weight: 700;
font-size: 16px;
letter-spacing: -0.01em;
}
.logo-dot {
width: 28px;
height: 28px;
border-radius: 8px;
background: var(--gradient);
box-shadow: 0 2px 8px rgba(30,41,59, 0.3);
position: relative;
}
.logo-dot::after {
content: '';
position: absolute;
inset: 6px;
border-radius: 3px;
background: white;
opacity: 0.9;
}
.sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.tab-btn {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border: none;
background: transparent;
color: var(--text-secondary);
font-weight: 500;
font-size: 14px;
font-family: inherit;
cursor: pointer;
border-radius: var(--radius-sm);
transition: all var(--transition);
text-align: left;
}
.tab-btn:hover { background: var(--bg-subtle); color: var(--text); }
.tab-btn.active {
background: var(--gradient);
color: white;
box-shadow: 0 2px 8px rgba(30,41,59, 0.25);
}
.tab-btn svg { flex-shrink: 0; }
.sidebar-footer {
border-top: 1px solid var(--border);
padding-top: 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.user-chip {
display: flex;
align-items: center;
gap: 10px;
padding: 8px;
}
.avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--gradient);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
flex-shrink: 0;
}
.user-info { min-width: 0; flex: 1; }
.user-name {
font-size: 13px;
font-weight: 500;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-role {
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* ═══════ Content ═════════════════════════════════════════════════════ */
.content {
padding: 32px;
max-width: 1400px;
width: 100%;
}
.page-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
gap: 16px;
flex-wrap: wrap;
}
.page-header h1 {
font-size: 26px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text);
}
.page-subtitle {
color: var(--text-muted);
font-size: 14px;
margin-top: 2px;
}
.page-actions { display: flex; gap: 8px; }
/* ═══════ Stats Row ═══════════════════════════════════════════════════ */
.stats-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
margin-bottom: 24px;
}
.stat-card {
background: var(--card);
padding: 16px 20px;
border-radius: var(--radius);
border: 1px solid var(--border);
display: flex;
align-items: center;
gap: 12px;
transition: all var(--transition);
}
.stat-card:hover { border-color: var(--border-hover); transform: translateY(-1px); }
.stat-icon {
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
background: var(--gradient-soft);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.stat-value { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1; }
.stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; letter-spacing: 0.02em; }
/* ═══════ Empty State ═════════════════════════════════════════════════ */
.empty-state {
padding: 60px 20px;
text-align: center;
background: var(--card);
border: 1px dashed var(--border);
border-radius: var(--radius-lg);
}
.empty-state .emoji { font-size: 48px; margin-bottom: 12px; display: block; }
.empty-state h3 { font-size: 16px; margin-bottom: 6px; color: var(--text); }
.empty-state p { color: var(--text-muted); font-size: 13px; }
/* ═══════ Cards ═══════════════════════════════════════════════════════ */
.card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px;
}
.editor-card { margin-bottom: 24px; box-shadow: var(--shadow-sm); }
.editor-card h3 { margin-bottom: 16px; font-size: 16px; }
/* ═══════ Voicemail List ══════════════════════════════════════════════ */
.voicemail-list { display: flex; flex-direction: column; gap: 8px; }
.voicemail-item {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px 18px;
display: flex;
align-items: center;
gap: 14px;
cursor: pointer;
transition: all var(--transition);
position: relative;
}
.voicemail-item:hover {
border-color: var(--border-hover);
transform: translateX(2px);
box-shadow: var(--shadow);
}
.voicemail-item.unread {
background: linear-gradient(to right, rgba(30,41,59, 0.04), transparent);
border-left: 3px solid var(--primary);
padding-left: 15px;
}
.vm-icon-wrap {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--gradient);
color: white;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(30,41,59, 0.25);
}
.vm-main { flex: 1; min-width: 0; }
.vm-from { font-weight: 600; font-size: 14px; color: var(--text); }
.vm-preview {
color: var(--text-secondary);
font-size: 13px;
margin-top: 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vm-meta-col {
text-align: right;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
flex-shrink: 0;
}
.vm-date { font-size: 12px; color: var(--text-muted); }
.vm-status-tag {
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 500;
}
.vm-status-pending { background: rgba(245, 158, 11, 0.1); color: #b45309; }
.vm-status-done { background: rgba(16, 185, 129, 0.1); color: #047857; }
.vm-status-error { background: rgba(239, 68, 68, 0.1); color: #b91c1c; }
/* Quick-Action-Buttons in Voicemail-Card (Hover-State per CSS, kein inline-onmouseover) */
.vm-quick-actions {
display: flex;
gap: 4px;
margin-top: 4px;
}
.vm-quick-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 1px solid var(--bs-border);
background: var(--bs-bg-elevated);
border-radius: 6px;
cursor: pointer;
color: var(--vm-q-color, var(--bs-fg-muted));
transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.vm-quick-btn:hover {
background: var(--vm-q-hover, var(--bs-primary));
color: var(--bs-primary-fg);
border-color: var(--vm-q-hover, var(--bs-primary));
}
.vm-quick-btn:focus-visible {
outline: 2px solid var(--vm-q-hover, var(--bs-primary));
outline-offset: 2px;
}
.vm-duration-badge {
padding: 2px 8px;
background: var(--bg-subtle);
border-radius: 999px;
font-size: 11px;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
/* ═══════ Announcements Grid ══════════════════════════════════════════ */
.announcement-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 16px;
}
.announcement-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px;
transition: all var(--transition);
}
.announcement-card:hover {
border-color: var(--border-hover);
box-shadow: var(--shadow);
}
.announcement-card h4 {
font-size: 15px;
font-weight: 600;
margin-bottom: 8px;
color: var(--text);
}
.announcement-card .text-snippet {
color: var(--text-secondary);
font-size: 13px;
margin-bottom: 10px;
line-height: 1.5;
}
.announcement-card .meta-row {
color: var(--text-muted);
font-size: 12px;
margin-bottom: 10px;
}
.announcement-card audio { width: 100%; margin: 10px 0; border-radius: 8px; }
.announcement-card .actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
/* ═══════ Tenant Grid ═════════════════════════════════════════════════ */
.tenant-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 14px;
}
.tenant-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px;
transition: all var(--transition);
}
.tenant-card:hover {
border-color: var(--primary);
box-shadow: var(--shadow);
}
.tenant-card h4 {
font-size: 16px;
font-weight: 600;
margin-bottom: 4px;
}
.tenant-card .sub {
color: var(--text-muted);
font-size: 13px;
margin-bottom: 12px;
}
.tenant-card .stats {
display: flex;
gap: 12px;
margin-bottom: 14px;
font-size: 12px;
color: var(--text-secondary);
}
.tenant-card .stats span strong { color: var(--text); font-weight: 600; }
.tenant-card .actions { display: flex; gap: 6px; }
/* ═══════ Dialog ══════════════════════════════════════════════════════ */
.dialog {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
animation: fadeIn 150ms ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.dialog-backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.5);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.dialog-inner {
position: relative;
background: var(--card);
border-radius: var(--radius-lg);
max-width: 520px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
box-shadow: var(--shadow-lg);
animation: slideUp 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.dialog-lg { max-width: 680px; }
.dialog-xl { max-width: 960px; }
.dialog-xxl { max-width: min(95vw, 1400px); width: 95vw; }
.dialog-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
background: var(--card);
z-index: 2;
}
.dialog-header h3 { font-size: 18px; font-weight: 600; }
.dialog-close {
width: 30px;
height: 30px;
border-radius: 8px;
border: none;
background: transparent;
color: var(--text-muted);
cursor: pointer;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition);
}
.dialog-close:hover { background: var(--bg-subtle); color: var(--text); }
.dialog-inner form, .dialog-inner .section-header,
.dialog-inner .field, .dialog-inner .grid-2,
.dialog-inner .form-actions, .dialog-inner .divider,
.dialog-inner .toggle, .dialog-inner .user-list,
.dialog-inner .inline-form {
margin-left: 24px;
margin-right: 24px;
}
.dialog-inner form { margin-bottom: 0; padding-top: 16px; }
.dialog-inner .form-actions { margin-top: 20px; margin-bottom: 24px; }
.section-header {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
margin: 24px 24px 12px 24px;
display: flex;
align-items: center;
gap: 8px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border);
}
.section-icon { font-size: 14px; }
.divider {
height: 1px;
background: var(--border);
margin: 24px 0;
}
/* ═══════ Voicemail Dialog ═══════════════════════════════════════════ */
.vm-info-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin: 0 24px 16px 24px;
padding: 16px;
background: var(--bg-subtle);
border-radius: var(--radius);
}
.vm-info-item { display: flex; flex-direction: column; gap: 2px; }
.vm-info-label {
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
}
#vm-audio {
width: calc(100% - 48px);
margin: 0 24px 16px 24px;
border-radius: 8px;
}
.transcript-header {
margin: 0 24px 8px 24px;
}
.transcript-label {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--primary);
}
.vm-transcript {
background: var(--gradient-soft);
border-radius: var(--radius);
padding: 16px 18px;
margin: 0 24px 20px 24px;
line-height: 1.6;
font-size: 14px;
white-space: pre-wrap;
color: var(--text);
border: 1px solid rgba(30,41,59, 0.15);
}
.vm-transcript:empty::before {
content: "Noch keine Transkription verfügbar";
color: var(--text-muted);
font-style: italic;
}
/* ═══════ Voicemail Dialog (aufgeraeumt) ═══════════════════════════════ */
.vm-dialog { max-width: 640px; }
.vm-dialog .dialog-header {
gap: 12px;
padding: 18px 20px;
}
.vm-dialog .dialog-close svg {
width: 18px; height: 18px;
}
.vm-avatar {
width: 40px; height: 40px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-weight: 600; font-size: 14px;
flex-shrink: 0;
}
.vm-body {
padding: 16px 20px;
display: flex; flex-direction: column; gap: 16px;
}
.vm-status-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.vm-status-btn {
padding: 10px 12px;
border: 1px solid var(--border);
background: white;
border-radius: 8px;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
font-size: 13px; font-weight: 500;
transition: all 0.15s;
}
.vm-status-btn:hover { border-color: var(--border-hover); background: var(--bg-subtle); }
.vm-status-btn svg { width: 15px; height: 15px; }
.vm-meta-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
padding: 12px 14px;
background: var(--bg-subtle);
border-radius: 8px;
}
.vm-meta-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vm-meta-label {
font-size: 10px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
}
.vm-meta-cell > span:last-child {
font-size: 13px;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.vm-dialog audio {
width: 100%;
border-radius: 8px;
}
.vm-block { display: flex; flex-direction: column; gap: 6px; }
.vm-block-header {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
}
.vm-block-icon svg { width: 13px; height: 13px; }
.vm-dialog .vm-transcript {
margin: 0;
padding: 14px 16px;
font-size: 13px;
}
.vm-dialog textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 8px;
font-family: inherit;
font-size: 13px;
resize: vertical;
line-height: 1.5;
}
.vm-dialog textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(30,41,59,0.1);
}
.vm-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.vm-field { display: flex; flex-direction: column; gap: 4px; }
.vm-field label {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
}
.vm-field label svg { width: 12px; height: 12px; }
.vm-field input {
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: 6px;
font-size: 13px;
font-family: inherit;
}
.vm-field input[type="text"] { font-family: 'JetBrains Mono', monospace; }
.vm-field input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(30,41,59,0.1);
}
.vm-footer {
display: flex;
gap: 8px;
padding: 14px 20px;
border-top: 1px solid var(--border);
background: var(--bg-subtle);
}
.vm-footer .btn { padding: 8px 14px; }
.vm-call-btn, .vm-icon-btn, .vm-danger-btn {
display: inline-flex; align-items: center; gap: 6px;
}
.vm-danger-btn { color: #dc2626; }
.vm-danger-btn:hover { background: #fee2e2; }
/* ═══════ User List (im Tenant-Dialog) ═══════════════════════════════ */
.user-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.user-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background: var(--bg-subtle);
border-radius: var(--radius-sm);
}
.user-row-info { display: flex; align-items: center; gap: 10px; }
.user-row .email { font-weight: 500; font-size: 13px; }
.user-row .role-badge {
font-size: 11px;
padding: 2px 8px;
border-radius: 999px;
background: var(--card);
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 500;
}
.user-row .role-badge.admin { background: var(--gradient); color: white; }
/* ═══════ Toast ══════════════════════════════════════════════════════ */
.toast {
position: fixed;
bottom: 24px;
right: 24px;
padding: 12px 18px;
background: var(--text);
color: white;
border-radius: var(--radius);
font-size: 14px;
font-weight: 500;
z-index: 1000;
box-shadow: var(--shadow-lg);
animation: slideUp 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.toast.success { background: var(--success); }
.toast.error { background: var(--danger); }
/* ═══════ Loading ═══════════════════════════════════════════════════ */
.loading-dots {
display: inline-flex;
gap: 4px;
align-items: center;
}
.loading-dots span {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--primary);
animation: bounce 1.4s infinite ease-in-out both;
}
.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce {
0%, 80%, 100% { transform: scale(0); }
40% { transform: scale(1); }
}
/* ═══════ Responsive ═════════════════════════════════════════════════ */
@media (max-width: 900px) {
#view-app { grid-template-columns: 1fr; }
.sidebar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
top: auto;
height: auto;
padding: 8px;
flex-direction: row;
gap: 0;
border-top: 1px solid var(--border);
border-right: none;
z-index: 50;
}
.sidebar-logo, .sidebar-footer { display: none; }
.sidebar-nav {
flex-direction: row;
justify-content: space-around;
width: 100%;
}
.tab-btn { flex-direction: column; gap: 2px; font-size: 11px; padding: 8px 6px; }
.content { padding: 20px 16px 100px 16px; }
.page-header h1 { font-size: 22px; }
}
/* ═══ ANN-CARD v2 ═════════════════════════════════════════════════════ */
.announcement-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
grid-auto-rows: 1fr;
gap: 16px;
}
.ann-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px;
display: flex;
flex-direction: column;
gap: 14px;
transition: all var(--transition);
position: relative;
}
.ann-card:hover {
border-color: var(--border-hover);
box-shadow: var(--shadow);
transform: translateY(-1px);
}
.ann-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.ann-card-status {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
flex: 1;
}
.ann-card-status .status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
display: inline-block;
}
.ann-card-status .status-dot.s-ready { background: var(--success); }
.ann-card-status .status-dot.s-pending { background: var(--warning); animation: pulse-soft 1.5s ease-in-out infinite; }
.ann-card-status .status-dot.s-error { background: var(--danger); }
@keyframes pulse-soft { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.ann-card h4 {
margin: 0;
font-size: 15px;
font-weight: 600;
color: var(--text);
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ann-card-delete {
width: 28px;
height: 28px;
padding: 0;
border: 1px solid transparent;
background: transparent;
color: var(--text-muted);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all var(--transition);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
opacity: 0.6;
}
.ann-card:hover .ann-card-delete { opacity: 1; }
.ann-card-delete:hover {
border-color: var(--danger);
color: var(--danger);
background: rgba(239,68,68,0.05);
}
.ann-card-delete svg { width: 14px; height: 14px; stroke-width: 2; }
.ann-card-voice {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--text-muted);
font-size: 12px;
font-weight: 500;
padding: 3px 10px;
background: var(--bg-subtle);
border-radius: 999px;
align-self: flex-start;
max-width: 100%;
}
.ann-card-voice svg { width: 12px; height: 12px; flex-shrink: 0; }
.ann-card-voice span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ann-card-text {
margin: 0;
padding: 10px 12px;
background: var(--bg-subtle);
border-radius: var(--radius-sm);
border-left: 3px solid var(--primary);
color: var(--text-secondary);
font-size: 13px;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
cursor: pointer;
transition: all var(--transition);
}
.ann-card-text:hover {
background: rgba(30,41,59,0.05);
border-left-color: var(--primary-dark);
}
.ann-card-audio { width: 100%; height: 34px; border-radius: var(--radius-sm); }
.ann-card-status-msg {
padding: 10px 12px;
background: var(--bg-subtle);
border-radius: var(--radius-sm);
color: var(--text-muted);
font-size: 12px;
font-style: italic;
}
.ann-card-divider {
height: 1px;
background: var(--border);
margin: 0 -18px;
}
.ann-card-assign-empty, .ann-card-assign {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 10px;
}
.ann-card-assign-hint {
margin: 0;
color: var(--text-muted);
font-size: 12px;
text-align: center;
font-style: italic;
}
/* Live-Status Banner */
.ann-card-live-status {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
}
.live-pulse {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.live-pulse.active {
background: var(--success);
box-shadow: 0 0 0 0 rgba(16,185,129,0.5);
animation: live-pulse-anim 2s ease-out infinite;
}
.live-pulse.idle { background: var(--text-muted); opacity: 0.5; }
@keyframes live-pulse-anim {
0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); }
70% { box-shadow: 0 0 0 7px rgba(16,185,129,0); }
100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
.live-text { font-weight: 600; color: var(--text); }
.live-spacer { flex: 1; }
.live-sync-hint {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--text-muted);
font-size: 11px;
font-weight: 500;
}
.live-sync-hint svg { width: 11px; height: 11px; }
/* CTA */
.assign-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 11px 16px;
border: 0;
border-radius: var(--radius-sm);
background: var(--gradient);
color: white;
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all var(--transition);
box-shadow: 0 2px 8px rgba(30,41,59,0.22);
}
.assign-cta:hover {
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(30,41,59,0.32);
}
.assign-cta svg { width: 15px; height: 15px; stroke-width: 2.2; }
/* Chips */
.assign-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 5px 5px 10px;
background: linear-gradient(135deg, rgba(30,41,59,0.08), rgba(16,185,129,0.05));
border: 1px solid rgba(30,41,59,0.18);
border-radius: 999px;
font-size: 12px;
color: var(--text);
max-width: 100%;
}
.chip-name {
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 130px;
}
.chip-slotid {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--text-muted);
background: rgba(255,255,255,0.6);
padding: 1px 6px;
border-radius: 999px;
}
.chip-status {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 10px;
padding: 1px 6px;
border-radius: 999px;
font-weight: 500;
}
.chip-status.fresh { background: rgba(16,185,129,0.15); color: #047857; }
.chip-status.stale { background: rgba(245,158,11,0.15); color: #b45309; }
.chip-status.none { background: rgba(148,163,184,0.15); color: var(--text-muted); }
.chip-x {
border: 0;
background: rgba(255,255,255,0.7);
color: var(--text-muted);
width: 18px;
height: 18px;
border-radius: 50%;
cursor: pointer;
font-size: 13px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition);
padding: 0;
}
.chip-x:hover { background: var(--danger); color: white; }
.chip-x svg { width: 12px; height: 12px; stroke-width: 2.2; }
/* Inline-Lucide-Icon im Chip-Status (statt ⇡ Emoji) */
.chip-status-icon { display: inline-flex; vertical-align: -1px; margin-right: 1px; }
.chip-status-icon svg { width: 10px; height: 10px; stroke-width: 2.2; }
/* Banner-Headline-Icon (statt ✓ Emoji) */
.ann-card-assigned-banner .banner-icon {
display: inline-flex;
vertical-align: -2px;
margin-right: 4px;
}
.ann-card-assigned-banner .banner-icon svg { width: 14px; height: 14px; stroke-width: 2.2; }
/* Detail-Dialog */
.det-voice-row { margin-bottom: 12px; }
.det-text {
margin: 0 0 16px 0;
padding: 14px 16px;
background: var(--bg-subtle);
border-radius: var(--radius-sm);
border-left: 3px solid var(--primary);
color: var(--text);
font-size: 14px;
line-height: 1.6;
max-height: 320px;
overflow-y: auto;
white-space: pre-wrap;
word-break: break-word;
}
.det-audio { width: 100%; height: 38px; margin-bottom: 20px; border-radius: var(--radius-sm); }
.det-section-title {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--text-muted);
margin-bottom: 10px;
}
.det-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 4px; }
/* ═══════ Impersonation-Banner (tenant UI) ═══════════════════════════ */
#impersonation-banner {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
background: linear-gradient(90deg, #f59e0b, #dc2626);
color: white;
padding: 8px 16px;
display: flex; align-items: center; justify-content: center;
gap: 12px;
font-size: 13px;
font-weight: 500;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
#impersonation-banner button {
background: white;
color: #dc2626;
border: none;
padding: 4px 12px;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
font-size: 12px;
}
#impersonation-banner button:hover { background: #fef3c7; }
/* ═══════════════════════════════════════════════════════════════════════
8. Dark-Theme Legacy-Overrides
Patcht bestehende Legacy-Regeln die "background: white" o.ae. hartcoden.
═══════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] body,
[data-theme="dark"] .view { background: var(--bs-bg); color: var(--bs-fg); }
/* Login Dark-Overrides — siehe §10 V4 (Z.~2618). Legacy-Regeln in V4 entfernt. */
/* Sidebar */
[data-theme="dark"] .sidebar { background: var(--bs-bg-elevated); border-color: var(--bs-border); }
[data-theme="dark"] .user-chip { background: var(--bs-bg-subtle); }
[data-theme="dark"] .tab-btn:hover { background: var(--bs-bg-subtle); color: var(--bs-fg); }
[data-theme="dark"] .tab-btn.active { background: var(--bs-primary-soft); color: var(--bs-primary); }
/* Cards / Panels */
[data-theme="dark"] .card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .voicemail-item,
[data-theme="dark"] .tenant-row,
[data-theme="dark"] .staff-row,
[data-theme="dark"] .feature-toggle,
[data-theme="dark"] .announcement-card,
[data-theme="dark"] .ann-card,
[data-theme="dark"] .tenant-avatar-sm,
[data-theme="dark"] .dialog-inner,
[data-theme="dark"] .audit-table {
background: var(--bs-bg-elevated);
border-color: var(--bs-border);
color: var(--bs-fg);
}
[data-theme="dark"] .feature-toggle.enabled { background: var(--bs-primary-soft); }
[data-theme="dark"] .audit-row { border-color: var(--bs-border); }
[data-theme="dark"] .audit-row.header { background: var(--bs-bg-subtle); color: var(--bs-fg-muted); }
/* Forms */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .bs-input,
[data-theme="dark"] .bs-textarea,
[data-theme="dark"] .bs-select {
background: var(--bs-bg-inset);
border-color: var(--bs-border);
color: var(--bs-fg);
}
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
border-color: var(--bs-primary);
}
/* Buttons (legacy) */
[data-theme="dark"] .btn-secondary { background: var(--bs-bg-elevated); color: var(--bs-fg); border-color: var(--bs-border); }
[data-theme="dark"] .btn-secondary:hover:not(:disabled) { background: var(--bs-bg-subtle); border-color: var(--bs-border-hover); }
[data-theme="dark"] .btn-ghost:hover:not(:disabled) { background: var(--bs-bg-subtle); color: var(--bs-fg); }
[data-theme="dark"] .btn-danger { background: transparent; color: var(--bs-danger); border-color: var(--bs-danger-soft); }
[data-theme="dark"] .btn-danger:hover:not(:disabled) { background: var(--bs-danger-soft); }
/* Dialog */
[data-theme="dark"] .dialog-backdrop { background: rgba(0, 0, 0, 0.6); }
[data-theme="dark"] .dialog-header { background: var(--bs-bg-elevated); border-color: var(--bs-border); }
/* Pills, Tabs, etc */
[data-theme="dark"] .feature-pills .pill { background: var(--bs-bg-subtle); color: var(--bs-fg-muted); }
[data-theme="dark"] .feature-pills .pill.active { background: var(--bs-primary-soft); color: var(--bs-primary); }
[data-theme="dark"] .vm-tabs { border-color: var(--bs-border); }
[data-theme="dark"] .tenant-dialog-tabs { border-color: var(--bs-border); }
/* Voicemail-Item strong tweaks */
[data-theme="dark"] .voicemail-item { background: var(--bs-bg-elevated); }
[data-theme="dark"] .voicemail-item .vm-preview { color: var(--bs-fg-muted); }
/* Transcript */
[data-theme="dark"] .vm-transcript { background: var(--bs-bg-subtle); border-color: var(--bs-border); }
/* Audit actor-type */
[data-theme="dark"] .audit-row .audit-actor-type.platform { background: var(--bs-primary); color: var(--bs-primary-fg); }
/* Audio Player */
[data-theme="dark"] audio {
filter: invert(0.85) hue-rotate(180deg);
}
/* Impersonation Banner stays bright regardless of theme (by design) */
/* ═══════════════════════════════════════════════════════════════════════
9. New App-Shell (basestar.io v2 layout)
Ueberschreibt #view-app, .sidebar, .content mit einer TopBar.
═══════════════════════════════════════════════════════════════════════ */
/* Shell-Grid: TopBar oben, Sidebar links, Content rechts */
#view-app {
display: grid;
grid-template-columns: 260px 1fr;
grid-template-rows: 64px 1fr;
grid-template-areas:
"sidebar topbar"
"sidebar content";
min-height: 100vh;
background: var(--bs-bg);
}
/* --- Sidebar (neu) --- */
.sidebar {
grid-area: sidebar;
background: var(--bs-bg-elevated);
border-right: 1px solid var(--bs-border);
display: flex;
flex-direction: column;
padding: var(--bs-5) var(--bs-3) var(--bs-3);
gap: var(--bs-4);
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
}
/* Logo-Lockup (kein link-blau, sauber typografisch) */
.sidebar-logo {
display: flex;
align-items: center;
gap: var(--bs-3);
padding: 0 var(--bs-3) var(--bs-2);
color: var(--bs-fg) !important;
text-decoration: none !important;
font-weight: var(--bs-weight-bold);
font-size: var(--bs-text-md);
line-height: 1.15;
letter-spacing: -0.01em;
border-radius: var(--bs-r);
transition: background var(--bs-transition);
}
.sidebar-logo:hover { background: var(--bs-bg-subtle); }
.sidebar-logo .logo-dot { display: none; } /* alter pink-Kreis weg */
.sidebar-logo svg { flex-shrink: 0; }
.sidebar-logo .bs-brand-accent { color: var(--bs-primary); }
/* Robopult-Mark: currentColor wird vom SVG vererbt — Slate-800 in Light, Slate-200 in Dark */
.sidebar-logo svg { color: var(--bs-primary); }
.sidebar-logo svg .rp-mark-bg { fill: var(--bs-bg-subtle); }
[data-theme="dark"] .sidebar-logo svg .rp-mark-bg { fill: rgba(255,255,255,0.06); }
/* Section-Divider-Label in Sidebar */
.sidebar-nav {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
padding: 0;
}
.sidebar-nav .nav-label {
font-size: 10px;
font-weight: var(--bs-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--bs-fg-subtle);
padding: var(--bs-4) var(--bs-3) var(--bs-1);
}
/* Tab-Button (Nav-Item) — neu */
.tab-btn {
display: flex;
align-items: center;
gap: var(--bs-3);
padding: var(--bs-2) var(--bs-3);
border: none;
background: transparent;
color: var(--bs-fg-muted);
border-radius: var(--bs-r-sm);
font-family: inherit;
font-size: var(--bs-text-base);
font-weight: var(--bs-weight-medium);
cursor: pointer;
text-align: left;
width: 100%;
transition: all var(--bs-transition);
}
.tab-btn:hover { background: var(--bs-bg-subtle); color: var(--bs-fg); }
.tab-btn svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.85; }
.tab-btn.active {
background: var(--bs-primary-soft);
color: var(--bs-primary);
font-weight: var(--bs-weight-semibold);
}
.tab-btn.active svg { opacity: 1; }
/* Sidebar Footer */
.sidebar-footer {
border-top: 1px solid var(--bs-border);
padding-top: var(--bs-3);
display: flex;
flex-direction: column;
gap: var(--bs-2);
}
/* Theme-Toggle in Sidebar */
#theme-toggle-host { display: flex; justify-content: center; padding-bottom: var(--bs-2); }
/* User-Chip (neu) */
.user-chip {
display: flex; align-items: center; gap: var(--bs-2);
padding: var(--bs-2) var(--bs-2);
background: transparent;
border-radius: var(--bs-r-sm);
}
.user-chip .avatar {
width: 32px; height: 32px;
background: var(--rp-emerald-500);
color: white;
border-radius: var(--bs-r-full);
display: flex; align-items: center; justify-content: center;
font-size: var(--bs-text-xs);
font-weight: var(--bs-weight-bold);
flex-shrink: 0;
}
.user-chip .user-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.user-chip .user-name { font-size: var(--bs-text-sm); font-weight: var(--bs-weight-medium); color: var(--bs-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip .user-role { font-size: 10px; color: var(--bs-fg-subtle); text-transform: uppercase; letter-spacing: 0.05em; font-weight: var(--bs-weight-semibold); }
/* --- TopBar --- */
.bs-topbar {
grid-area: topbar;
position: sticky;
top: 0;
z-index: var(--bs-z-topbar);
display: flex;
align-items: center;
gap: var(--bs-3);
padding: 0 var(--bs-6);
background: var(--bs-bg-elevated);
border-bottom: 1px solid var(--bs-border);
backdrop-filter: blur(8px);
}
.bs-topbar-left { display: flex; align-items: center; gap: var(--bs-3); flex: 1; min-width: 0; }
.bs-topbar-right { display: flex; align-items: center; gap: var(--bs-2); }
.bs-breadcrumb {
display: flex; align-items: center; gap: var(--bs-2);
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
}
.bs-breadcrumb .bc-sep { color: var(--bs-fg-subtle); opacity: 0.5; }
.bs-breadcrumb .bc-current { color: var(--bs-fg); font-weight: var(--bs-weight-semibold); }
.bs-topbar-search {
position: relative;
width: min(480px, 38vw);
}
.bs-topbar-search input {
width: 100%;
height: 36px;
padding: 0 var(--bs-4) 0 var(--bs-10);
background: var(--bs-bg-subtle);
border: 1px solid transparent;
border-radius: var(--bs-r-sm);
color: var(--bs-fg);
font-family: inherit;
font-size: var(--bs-text-sm);
transition: all var(--bs-transition);
}
.bs-topbar-search input:hover { background: var(--bs-bg-inset); }
.bs-topbar-search input:focus { outline: none; background: var(--bs-bg-elevated); border-color: var(--bs-primary); box-shadow: var(--bs-shadow-glow); }
.bs-topbar-search .search-icon { position: absolute; left: var(--bs-3); top: 50%; transform: translateY(-50%); color: var(--bs-fg-subtle); pointer-events: none; }
.bs-topbar-search kbd {
position: absolute; right: var(--bs-2); top: 50%; transform: translateY(-50%);
font-family: var(--bs-font-mono);
font-size: 10px;
padding: 2px 6px;
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-sm);
color: var(--bs-fg-subtle);
}
/* TopBar icon-button */
.bs-topbar-icon-btn {
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
border: none;
border-radius: var(--bs-r-sm);
color: var(--bs-fg-muted);
cursor: pointer;
transition: all var(--bs-transition);
position: relative;
}
.bs-topbar-icon-btn:hover { background: var(--bs-bg-subtle); color: var(--bs-fg); }
.bs-topbar-icon-btn .dot {
position: absolute; top: 8px; right: 9px;
width: 7px; height: 7px;
background: var(--bs-danger);
border-radius: 50%;
border: 2px solid var(--bs-bg-elevated);
}
.bs-topbar-divider {
width: 1px; height: 24px;
background: var(--bs-border);
margin: 0 var(--bs-1);
}
.bs-topbar-user {
display: flex; align-items: center; gap: var(--bs-2);
padding: 4px var(--bs-2) 4px 4px;
border-radius: var(--bs-r-full);
cursor: pointer;
transition: background var(--bs-transition);
border: 1px solid var(--bs-border);
background: transparent;
}
.bs-topbar-user:hover { background: var(--bs-bg-subtle); }
.bs-topbar-user .avatar {
width: 28px; height: 28px;
border-radius: var(--bs-r-full);
background: var(--rp-emerald-500);
color: white;
display: flex; align-items: center; justify-content: center;
font-size: var(--bs-text-xs);
font-weight: var(--bs-weight-bold);
}
.bs-topbar-user .name { font-size: var(--bs-text-sm); font-weight: var(--bs-weight-medium); color: var(--bs-fg); }
/* --- Content-Area (full-width für große Displays) --- */
.content {
grid-area: content;
padding: var(--bs-8) var(--bs-10);
max-width: none;
width: 100%;
min-height: 0;
overflow-x: hidden;
}
@media (min-width: 1600px) {
.content { padding: var(--bs-10) var(--bs-12); }
}
@media (min-width: 2200px) {
.content { padding: var(--bs-12) var(--bs-16); }
}
/* Page-Header innerhalb Content */
.page-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--bs-4);
margin-bottom: var(--bs-6);
padding-bottom: var(--bs-5);
border-bottom: 1px solid var(--bs-border);
}
.page-header h1 {
font-size: var(--bs-text-2xl);
font-weight: var(--bs-weight-bold);
letter-spacing: -0.02em;
color: var(--bs-fg);
margin: 0 0 var(--bs-1);
}
.page-header .page-subtitle {
color: var(--bs-fg-muted);
font-size: var(--bs-text-base);
}
.page-header .page-actions { display: flex; gap: var(--bs-2); flex-shrink: 0; }
/* Stats-Row: fluid grid, skaliert auf große Displays */
.stats-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--bs-4);
margin-bottom: var(--bs-8);
}
.stat-card {
display: flex; align-items: center; gap: var(--bs-3);
padding: var(--bs-5) var(--bs-6);
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-lg);
transition: all var(--bs-transition);
position: relative;
overflow: hidden;
}
.stat-card::before {
content: "";
position: absolute;
top: 0; right: 0;
width: 120px; height: 120px;
background: radial-gradient(circle at 80% 20%, var(--bs-primary-soft) 0%, transparent 60%);
pointer-events: none;
opacity: 0.4;
}
.stat-card:hover { border-color: var(--bs-border-hover); transform: translateY(-2px); box-shadow: var(--bs-shadow-sm); }
.stat-card .stat-icon {
width: 44px; height: 44px;
border-radius: var(--bs-r);
background: var(--bs-primary-soft);
color: var(--bs-primary);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.stat-card .stat-value {
font-size: var(--bs-text-xl);
font-weight: var(--bs-weight-bold);
color: var(--bs-fg);
line-height: 1.1;
letter-spacing: -0.02em;
}
.stat-card .stat-label {
font-size: var(--bs-text-xs);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--bs-fg-muted);
font-weight: var(--bs-weight-semibold);
margin-top: 2px;
}
/* ═══════════════════════════════════════════════════════════════════════
10. Login — Split-Screen Hero (basestar.io v2)
═══════════════════════════════════════════════════════════════════════ */
.view-auth {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 100vh;
background: var(--bs-bg);
padding: 0;
position: relative;
overflow: hidden;
}
/* alte bg-orbs ausblenden, wir haben was besseres */
.view-auth .bg-orbs { display: none; }
/* ═══════════════════════════════════════════════════════════════════════
Hero-Panel — Robopult „Digitale Manufaktur" V2
Industrial Navy Brand-Stage mit Emerald-Akzent + subtilen Surface-Layern.
═══════════════════════════════════════════════════════════════════════ */
.auth-hero {
position: relative;
/* Industrial-Navy-Stack mit subtilem Brand-Tone */
background:
radial-gradient(ellipse at 20% 0%, rgba(30, 51, 78, 0.55) 0%, transparent 55%),
radial-gradient(ellipse at 80% 100%, rgba(16, 185, 129, 0.22) 0%, transparent 60%),
linear-gradient(180deg, #0F1B2A 0%, #1A2B3C 50%, #0F1B2A 100%);
color: #F8FAFC;
padding: var(--bs-8) var(--bs-10);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--bs-8);
overflow: hidden;
isolation: isolate;
}
/* Atmospheric Mesh — slow drift, very subtle */
.auth-hero::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(circle at 75% 75%, rgba(16,185,129,0.18) 0%, transparent 45%),
radial-gradient(circle at 25% 25%, rgba(52,211,153,0.06) 0%, transparent 50%);
z-index: -1;
filter: blur(60px);
animation: hero-drift 22s ease-in-out infinite;
}
@keyframes hero-drift {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-2%, 2%) scale(1.06); }
}
/* Subtle Grid-Overlay — Brand „Manufaktur" precision-grid */
.auth-hero::after {
content: "";
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(248,250,252,0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(248,250,252,0.035) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: radial-gradient(circle at 30% 50%, black 0%, transparent 85%);
z-index: -1;
}
/* ── Top-Bar: Brand-Logo + Trust-Mini ─────────────────────────── */
.auth-hero-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--bs-4);
flex-shrink: 0;
}
.auth-hero-brand {
display: inline-flex;
align-items: center;
gap: var(--bs-3);
}
/* Inverse Robopult-Mark (Hero-Variante): weiße Stems + grüner Pult-Strich,
ohne Bg-Kreis — kontrastiert auf Industrial Navy. */
.rp-mark-inverse {
flex-shrink: 0;
filter: drop-shadow(0 6px 18px rgba(16, 185, 129, 0.30));
}
.rp-brand-wordmark {
font-family: var(--bs-font-display, 'Outfit', sans-serif);
font-weight: 700;
font-size: 20px;
letter-spacing: -0.025em;
color: #F8FAFC;
}
.rp-brand-wordmark-dot {
color: #10B981;
margin-left: 1px;
}
/* Status-Pill (oben rechts im Hero) — „System aktiv" */
.auth-hero-status {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: rgba(16, 185, 129, 0.10);
border: 1px solid rgba(16, 185, 129, 0.28);
border-radius: 999px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
color: #6EE7B7;
text-transform: uppercase;
}
.auth-hero-status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #10B981;
box-shadow: 0 0 8px rgba(16, 185, 129, 0.8);
animation: hero-pulse 2.4s ease-in-out infinite;
}
@keyframes hero-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.45; }
}
/* ── Hauptbereich: Headline + Lead + Features ─────────────────── */
.auth-hero-main { max-width: 560px; }
.auth-hero h2 {
font-family: var(--bs-font-display, 'Outfit', sans-serif);
font-size: clamp(40px, 4.6vw, 68px);
font-weight: 700;
line-height: 1.02;
letter-spacing: -0.045em;
margin-bottom: var(--bs-5);
color: #F8FAFC;
}
.auth-hero h2 .accent {
display: block;
background: linear-gradient(135deg, #34d399 0%, #10b981 60%, #34d399 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
font-style: italic;
font-weight: 400;
}
.auth-hero .auth-subtitle {
font-size: 16px;
line-height: 1.6;
color: rgba(226, 232, 240, 0.72);
margin-bottom: var(--bs-7);
max-width: 480px;
}
/* Features-Liste — clean Bullets mit Brand-Akzent */
.auth-features {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--bs-3);
margin-top: var(--bs-6);
}
.auth-feature {
display: flex;
align-items: center;
gap: var(--bs-3);
color: rgba(226, 232, 240, 0.92);
font-size: 14px;
font-weight: 500;
line-height: 1.4;
}
.auth-feature-icon {
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(16, 185, 129, 0.14);
color: #34d399;
border-radius: 8px;
flex-shrink: 0;
border: 1px solid rgba(16, 185, 129, 0.28);
}
/* ── Footer: Copyright + Trust-Marker ─────────────────────────── */
.auth-hero-bottom {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--bs-4);
color: rgba(226, 232, 240, 0.45);
font-size: 11px;
letter-spacing: 0.02em;
flex-shrink: 0;
flex-wrap: wrap;
}
.auth-hero-copy { font-weight: 500; }
.auth-hero-trust {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 500;
}
.auth-hero-trust-flag {
display: inline-flex;
align-items: center;
width: 14px;
height: 10px;
border-radius: 2px;
overflow: hidden;
box-shadow: 0 0 0 1px rgba(248, 250, 252, 0.15);
}
.auth-hero-trust-flag svg { display: block; }
/* Form-Panel (rechts) */
.auth-form-panel {
display: flex; align-items: center; justify-content: center;
padding: var(--bs-10);
background: var(--bs-bg);
position: relative;
}
.auth-form-panel .theme-toggle-wrap {
position: absolute; top: var(--bs-5); right: var(--bs-5);
}
.login-card {
width: 100%;
max-width: 420px;
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-xl);
padding: var(--bs-10);
box-shadow: var(--bs-shadow);
backdrop-filter: none;
-webkit-backdrop-filter: none;
animation: auth-slide-in 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes auth-slide-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.login-logo { display: flex; justify-content: center; margin-bottom: var(--bs-4); }
/* Login-Mark — Robopult Brand-Pattern „Digitale Manufaktur":
Industrial Navy Container + invertierter Fg, in beiden Modi maximaler Kontrast.
- Light: Bg = Industrial Navy (#1A2B3C), Fg = Weiß → dunkler Kreis auf weißer Card
- Dark : Bg = Slate-100 (#F1F5F9), Fg = Industrial Navy → heller Kreis auf dunkler Card
Der grüne Akzent-Strich bleibt in beiden Modi Precision Emerald (#10B981). */
.rp-mark-login .rp-mark-bg { fill: var(--rp-navy, #1A2B3C); }
.rp-mark-login .rp-mark-fg { fill: #ffffff; }
.login-logo svg { filter: drop-shadow(0 6px 24px rgba(26, 43, 60, 0.30)); }
[data-theme="dark"] .rp-mark-login .rp-mark-bg { fill: #F1F5F9; }
[data-theme="dark"] .rp-mark-login .rp-mark-fg { fill: var(--rp-navy, #1A2B3C); }
[data-theme="dark"] .login-logo svg { filter: drop-shadow(0 6px 24px rgba(241, 245, 249, 0.20)); }
.login-title {
font-family: var(--bs-font-display);
font-size: var(--bs-text-xl);
font-weight: var(--bs-weight-bold);
text-align: center;
letter-spacing: -0.04em;
margin-bottom: var(--bs-1);
color: var(--bs-fg);
background: none;
-webkit-text-fill-color: currentColor;
}
.login-subtitle {
text-align: center;
color: var(--bs-fg-muted);
font-size: var(--bs-text-sm);
margin-bottom: var(--bs-6);
}
/* Dark-Theme specific auth-form panel fix */
[data-theme="dark"] .auth-form-panel { background: var(--bs-bg); }
[data-theme="dark"] .login-card { background: var(--bs-bg-elevated); border-color: var(--bs-border); }
/* ═══════════════════════════════════════════════════════════════════════
11. Responsive — Shell breakpoints
═══════════════════════════════════════════════════════════════════════ */
/* < 1024px: Sidebar schmaler */
@media (max-width: 1100px) {
#view-app { grid-template-columns: 220px 1fr; }
.content { padding: var(--bs-6) var(--bs-6); }
.auth-hero { padding: var(--bs-8); }
.auth-hero h2 { font-size: clamp(32px, 5vw, 48px); }
}
/* Tablet: Hero weg bei Login, Shell bleibt */
@media (max-width: 900px) {
#view-app {
grid-template-columns: 1fr;
grid-template-rows: 64px 1fr 64px;
grid-template-areas:
"topbar"
"content"
"sidebar";
}
.sidebar {
position: fixed;
bottom: 0; left: 0; right: 0;
top: auto;
height: 64px;
padding: var(--bs-2);
flex-direction: row;
gap: 0;
border-top: 1px solid var(--bs-border);
border-right: none;
z-index: var(--bs-z-sidebar);
overflow: visible;
}
.sidebar-logo, .sidebar-footer, .sidebar-nav .nav-label { display: none !important; }
.sidebar-nav {
flex-direction: row;
justify-content: space-around;
width: 100%;
gap: 0;
}
.tab-btn { flex-direction: column; gap: 2px; font-size: 10px; padding: var(--bs-1) var(--bs-2); }
.tab-btn svg { width: 20px; height: 20px; }
.tab-btn.active { background: transparent; }
.tab-btn.active svg { color: var(--bs-primary); }
.content { padding: var(--bs-4) var(--bs-4) calc(64px + var(--bs-4)); }
.bs-topbar { padding: 0 var(--bs-4); }
.bs-topbar-search { display: none; }
.view-auth { grid-template-columns: 1fr; }
.auth-hero { display: none; }
.auth-form-panel { padding: var(--bs-5); min-height: 100vh; }
}
/* Mobile: TopBar kompakter */
@media (max-width: 560px) {
.bs-topbar { gap: var(--bs-2); padding: 0 var(--bs-3); }
.bs-topbar-user .name { display: none; }
.bs-breadcrumb .bc-crumb { display: none; }
.page-header { flex-direction: column; align-items: stretch; }
.page-header .page-actions { justify-content: stretch; }
.page-header .page-actions .btn { flex: 1; }
}
/* XL Desktop 32"+: Inhalte großzügiger verteilen */
@media (min-width: 1800px) {
#view-app { grid-template-columns: 280px 1fr; }
.stats-row { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.stat-card { padding: var(--bs-6) var(--bs-8); }
.stat-card .stat-value { font-size: 28px; }
}
@media (min-width: 2400px) {
#view-app { grid-template-columns: 320px 1fr; }
.content { max-width: 2000px; margin: 0 auto; }
.bs-topbar { padding: 0 var(--bs-12); }
}
/* ═══════════════════════════════════════════════════════════════════════
12. Dashboard-Komponenten (shared zwischen Tenant + Platform)
═══════════════════════════════════════════════════════════════════════ */
.dash-hero {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--bs-8);
align-items: center;
padding: var(--bs-8);
margin-bottom: var(--bs-6);
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-xl);
position: relative;
overflow: hidden;
}
.dash-hero::before {
content: "";
position: absolute;
top: -40%; right: -10%;
width: 60%; height: 180%;
background:
radial-gradient(circle at 30% 30%, rgba(30,41,59,0.16) 0%, transparent 55%),
radial-gradient(circle at 70% 70%, rgba(16,185,129,0.13) 0%, transparent 55%);
pointer-events: none;
opacity: 1;
filter: blur(20px);
}
[data-theme="dark"] .dash-hero::before {
background:
radial-gradient(circle at 30% 30%, rgba(30,41,59,0.28) 0%, transparent 55%),
radial-gradient(circle at 70% 70%, rgba(16,185,129,0.22) 0%, transparent 55%);
}
.dash-hero-left { position: relative; max-width: 720px; }
.dash-hero-chip {
display: inline-flex; align-items: center; gap: var(--bs-1);
padding: 4px 10px;
background: var(--bs-primary-soft);
color: var(--bs-primary);
border-radius: var(--bs-r-full);
font-size: 11px;
font-weight: var(--bs-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--bs-3);
}
.dash-hero-left h1 {
font-size: clamp(26px, 2.6vw, 36px);
font-weight: var(--bs-weight-bold);
letter-spacing: -0.02em;
margin-bottom: var(--bs-2);
color: var(--bs-fg);
line-height: 1.15;
}
.dash-hero-sub {
font-size: var(--bs-text-md);
color: var(--bs-fg-muted);
line-height: 1.55;
max-width: 640px;
margin-bottom: var(--bs-5);
}
.dash-hero-actions { display: flex; gap: var(--bs-2); flex-wrap: wrap; }
.dash-hero-right {
display: flex; align-items: center; justify-content: center;
width: 200px; height: 200px;
flex-shrink: 0;
position: relative;
}
.dash-decorate { width: 100%; height: 100%; filter: drop-shadow(0 12px 40px rgba(71,85,105, 0.30)); }
.dash-hero-left h1 {
font-family: var(--bs-font-display);
letter-spacing: -0.04em;
}
@media (max-width: 900px) { .dash-hero-right { display: none; } }
.dash-split {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--bs-6);
align-items: start;
margin-top: var(--bs-2);
}
@media (max-width: 1100px) { .dash-split { grid-template-columns: 1fr; } }
.dash-col { display: flex; flex-direction: column; gap: var(--bs-4); }
.section-card {
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-lg);
padding: var(--bs-5) var(--bs-6);
}
.section-card-header {
display: flex; align-items: center; justify-content: space-between;
gap: var(--bs-3);
margin-bottom: var(--bs-4);
padding-bottom: var(--bs-3);
border-bottom: 1px solid var(--bs-border);
}
.section-card-header h3 {
font-size: var(--bs-text-md);
font-weight: var(--bs-weight-semibold);
color: var(--bs-fg);
margin: 0;
}
.recent-feed { display: flex; flex-direction: column; gap: var(--bs-1); }
.recent-item {
display: grid;
grid-template-columns: 32px 1fr auto;
gap: var(--bs-3);
align-items: center;
padding: var(--bs-3);
border-radius: var(--bs-r-sm);
transition: background var(--bs-transition);
}
.recent-item:hover { background: var(--bs-bg-subtle); }
.recent-item + .recent-item { border-top: 1px solid var(--bs-border); }
.recent-icon-wrap {
width: 32px; height: 32px;
border-radius: var(--bs-r-sm);
background: var(--bs-bg-subtle);
display: flex; align-items: center; justify-content: center;
color: var(--bs-fg-muted);
}
.recent-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.recent-text .action { font-size: var(--bs-text-sm); color: var(--bs-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-text .meta { font-size: 11px; color: var(--bs-fg-subtle); font-family: var(--bs-font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-time { font-size: var(--bs-text-xs); color: var(--bs-fg-muted); white-space: nowrap; }
.quick-actions { display: flex; flex-direction: column; gap: var(--bs-2); }
.quick-action {
display: flex; align-items: center; gap: var(--bs-3);
padding: var(--bs-3);
background: var(--bs-bg-subtle);
border: 1px solid transparent;
border-radius: var(--bs-r-sm);
cursor: pointer;
transition: all var(--bs-transition);
font-family: inherit;
text-align: left;
width: 100%;
}
.quick-action:hover {
background: var(--bs-bg-elevated);
border-color: var(--bs-border-hover);
transform: translateX(2px);
}
.quick-action .qa-icon {
width: 36px; height: 36px;
border-radius: var(--bs-r-sm);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.quick-action .qa-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.quick-action .qa-label { font-size: var(--bs-text-sm); font-weight: var(--bs-weight-semibold); color: var(--bs-fg); }
.quick-action .qa-sub { font-size: 11px; color: var(--bs-fg-subtle); }
.quick-action .qa-arrow { color: var(--bs-fg-subtle); flex-shrink: 0; transition: transform var(--bs-transition); }
.quick-action:hover .qa-arrow { color: var(--bs-primary); transform: translateX(2px); }
/* ═══════════════════════════════════════════════════════════════════════
13. User-Menu Dropdown (TopBar)
═══════════════════════════════════════════════════════════════════════ */
.bs-user-menu-wrap { position: relative; }
.bs-user-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 260px;
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-lg);
box-shadow: var(--bs-shadow-lg);
padding: var(--bs-2);
z-index: calc(var(--bs-z-topbar) + 10);
animation: menu-pop 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes menu-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.bs-user-menu-header {
display: flex; align-items: center; gap: var(--bs-3);
padding: var(--bs-3);
border-bottom: 1px solid var(--bs-border);
margin-bottom: var(--bs-2);
}
.bs-user-menu-header .avatar {
width: 40px; height: 40px;
border-radius: var(--bs-r-full);
background: var(--rp-emerald-500);
color: white;
display: flex; align-items: center; justify-content: center;
font-weight: var(--bs-weight-bold);
flex-shrink: 0;
}
.bs-user-menu-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.bs-user-menu-name {
font-size: var(--bs-text-sm);
font-weight: var(--bs-weight-semibold);
color: var(--bs-fg);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bs-user-menu-role {
font-size: 10px;
color: var(--bs-fg-subtle);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: var(--bs-weight-semibold);
}
.bs-user-menu-section {
padding: var(--bs-2) var(--bs-3);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--bs-fg-subtle);
font-weight: var(--bs-weight-semibold);
}
.bs-user-menu button, .bs-user-menu a {
display: flex; align-items: center; gap: var(--bs-3);
width: 100%;
padding: var(--bs-3);
border: none;
background: transparent;
border-radius: var(--bs-r-sm);
color: var(--bs-fg);
font-size: var(--bs-text-sm);
font-family: inherit;
text-align: left;
cursor: pointer;
text-decoration: none;
transition: background var(--bs-transition);
}
.bs-user-menu button:hover, .bs-user-menu a:hover { background: var(--bs-bg-subtle); }
.bs-user-menu .danger { color: var(--bs-danger); }
.bs-user-menu .danger:hover { background: var(--bs-danger-soft); }
.bs-user-menu-divider { height: 1px; background: var(--bs-border); margin: var(--bs-2) 0; }
/* Theme-Toggle in Menu */
.bs-user-menu .bs-theme-toggle { width: 100%; justify-content: space-around; }
.bs-user-menu .bs-theme-toggle button { width: auto; height: 30px; flex: 1; padding: 0 6px; border-radius: var(--bs-r-sm); gap: 4px; font-size: 11px; }
.bs-user-menu .bs-theme-toggle button span { display: inline; }
.bs-user-menu .bs-theme-toggle button:hover { background: var(--bs-bg-subtle); }
/* ═══════════════════════════════════════════════════════════════════════
14. Dialog Sub-Tabs (shared: tdt-btn / pdt-btn / udt-btn)
═══════════════════════════════════════════════════════════════════════ */
.tenant-dialog-body { padding: 0 0 var(--bs-5) 0; }
.tenant-dialog-tabs {
display: flex;
border-bottom: 1px solid var(--bs-border);
padding: 0 var(--bs-5);
overflow-x: auto;
}
.tenant-dialog-tabs::-webkit-scrollbar { height: 0; }
.tdt-btn, .pdt-btn, .udt-btn {
padding: var(--bs-3) var(--bs-4);
border: none;
background: transparent;
color: var(--bs-fg-muted);
font-weight: var(--bs-weight-medium);
font-size: var(--bs-text-sm);
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all var(--bs-transition);
font-family: inherit;
white-space: nowrap;
}
.tdt-btn:hover, .pdt-btn:hover, .udt-btn:hover { color: var(--bs-fg); }
.tdt-btn.active, .pdt-btn.active, .udt-btn.active {
color: var(--bs-primary);
border-bottom-color: var(--bs-primary);
font-weight: var(--bs-weight-semibold);
}
.tdp { padding: var(--bs-5); }
.tdp .section-header {
margin: var(--bs-5) 0 var(--bs-3) 0;
padding-bottom: var(--bs-2);
border-bottom: 1px solid var(--bs-border);
}
.tdp .section-header:first-child { margin-top: 0; }
/* Tenant-User-Rows + Checklisten */
#tuser-list { display: flex; flex-direction: column; gap: var(--bs-2); }
.tuser-row {
display: grid;
grid-template-columns: 44px 1fr auto auto;
gap: var(--bs-4);
align-items: center;
padding: var(--bs-4) var(--bs-5);
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r);
cursor: pointer;
transition: all var(--bs-transition);
}
.tuser-row:hover { border-color: var(--bs-border-hover); }
.tuser-row .avatar {
width: 44px; height: 44px;
border-radius: var(--bs-r);
background: var(--rp-emerald-500);
color: white;
font-weight: var(--bs-weight-bold);
display: flex; align-items: center; justify-content: center;
font-size: var(--bs-text-sm);
flex-shrink: 0;
}
.tuser-row .main { min-width: 0; }
.tuser-row .email { font-size: var(--bs-text-sm); font-weight: var(--bs-weight-semibold); color: var(--bs-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tuser-row .meta { font-size: 11px; color: var(--bs-fg-subtle); margin-top: 2px; display: flex; gap: var(--bs-2); align-items: center; flex-wrap: wrap; }
.bs-checklist {
display: flex; flex-direction: column; gap: var(--bs-1);
max-height: 320px; overflow-y: auto;
}
.bs-checklist label {
display: flex; align-items: center; gap: var(--bs-3);
padding: var(--bs-2) var(--bs-3);
border-radius: var(--bs-r-sm);
cursor: pointer;
transition: background var(--bs-transition);
}
.bs-checklist label:hover { background: var(--bs-bg-subtle); }
.bs-checklist label.disabled { opacity: 0.5; cursor: not-allowed; }
.bs-checklist input[type="checkbox"] { width: auto; }
.bs-checklist .item-main { flex: 1; }
.bs-checklist .item-title { font-size: var(--bs-text-sm); font-weight: var(--bs-weight-medium); color: var(--bs-fg); }
.bs-checklist .item-sub { font-size: 11px; color: var(--bs-fg-subtle); }
/* ═══════════════════════════════════════════════════════════════════════
15. Ansage-Detail-Dialog (Ansagen-Claude Kontext) — Padding-Fix
═══════════════════════════════════════════════════════════════════════ */
.dialog-body-std {
padding: var(--bs-5) var(--bs-6);
display: flex;
flex-direction: column;
gap: var(--bs-3);
}
.dialog-body-std .det-voice-row,
.dialog-body-std .det-text,
.dialog-body-std .det-audio,
.dialog-body-std .det-section-title,
.dialog-body-std .det-chips {
margin: 0;
}
.dialog-footer-std {
padding: var(--bs-4) var(--bs-6);
border-top: 1px solid var(--bs-border);
display: flex;
gap: var(--bs-2);
margin-top: 0;
}
.ann-card-voice i,
.ann-card-voice svg { flex-shrink: 0; }
.ann-card-delete {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px;
border: 1px solid var(--bs-border);
background: transparent;
color: var(--bs-danger);
border-radius: var(--bs-r-sm);
cursor: pointer;
transition: all var(--bs-transition);
}
.ann-card-delete:hover { background: var(--bs-danger-soft); border-color: var(--bs-danger); }
.ann-card-delete svg { width: 15px; height: 15px; }
/* Live-sync-hint Icon */
.live-sync-hint svg { width: 11px; height: 11px; vertical-align: middle; }
/* ═══════════════════════════════════════════════════════════════════════
16. Legacy-Alignment — einheitliche Buttons/Inputs/Fields
Legacy-Klassen (.btn, .field, bare ) werden an bs-* angeglichen
damit alle Dialoge gleich aussehen.
═══════════════════════════════════════════════════════════════════════ */
/* Buttons */
.btn {
height: 36px;
padding: 0 var(--bs-4);
border-radius: var(--bs-r-sm);
font-size: var(--bs-text-base);
font-weight: var(--bs-weight-medium);
line-height: 1;
box-sizing: border-box;
border: 1px solid transparent;
transition: all var(--bs-transition);
}
.btn:disabled { opacity: 0.5; }
.btn-primary {
background: var(--bs-primary) !important;
color: var(--bs-primary-fg) !important;
box-shadow: none !important;
}
.btn-primary:hover:not(:disabled) {
background: var(--bs-primary-hover) !important;
transform: none !important;
}
.btn-secondary {
background: var(--bs-bg-elevated);
color: var(--bs-fg);
border-color: var(--bs-border);
}
.btn-secondary:hover:not(:disabled) {
background: var(--bs-bg-subtle);
border-color: var(--bs-border-hover);
}
.btn-ghost {
background: transparent;
color: var(--bs-fg-muted);
}
.btn-ghost:hover:not(:disabled) {
background: var(--bs-bg-subtle);
color: var(--bs-fg);
}
.btn-danger {
background: transparent;
color: var(--bs-danger);
border-color: var(--bs-danger-soft);
}
.btn-danger:hover:not(:disabled) {
background: var(--bs-danger-soft);
border-color: var(--bs-danger);
}
.btn-sm { height: 28px; padding: 0 var(--bs-3); font-size: var(--bs-text-sm); }
.btn-block { width: 100%; }
/* Form-Fields */
.field {
display: flex;
flex-direction: column;
gap: var(--bs-2);
margin-bottom: var(--bs-4);
}
.field label {
font-size: var(--bs-text-sm);
font-weight: var(--bs-weight-medium);
color: var(--bs-fg-muted);
margin: 0;
}
.field p {
font-size: var(--bs-text-xs);
color: var(--bs-fg-subtle);
margin: 0;
}
/* Bare Inputs (ohne bs-input Klasse) */
.dialog input[type="text"]:not(.bs-input),
.dialog input[type="email"]:not(.bs-input),
.dialog input[type="password"]:not(.bs-input),
.dialog input[type="number"]:not(.bs-input),
.dialog input[type="datetime-local"]:not(.bs-input),
.dialog input[type="search"]:not(.bs-input),
.dialog textarea:not(.bs-textarea),
.dialog select:not(.bs-select) {
width: 100%;
height: 38px;
padding: 0 var(--bs-3);
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-sm);
color: var(--bs-fg);
font-family: inherit;
font-size: var(--bs-text-base);
transition: all var(--bs-transition);
}
.dialog textarea:not(.bs-textarea) {
height: auto;
min-height: 88px;
padding: var(--bs-3);
resize: vertical;
line-height: 1.5;
}
.dialog select:not(.bs-select) {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1,1 5,5 9,1'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--bs-3) center;
padding-right: var(--bs-8);
}
.dialog input:focus, .dialog textarea:focus, .dialog select:focus {
outline: none;
border-color: var(--bs-primary);
box-shadow: var(--bs-shadow-glow);
}
/* Form-Actions Row (Buttons am Boden von Dialogs) — einheitlicher Abstand */
.dialog .form-actions {
display: flex;
gap: var(--bs-2);
align-items: center;
margin-top: var(--bs-5);
padding-top: var(--bs-4);
border-top: 1px solid var(--bs-border);
flex-wrap: wrap;
}
/* Section-Header in Dialogen */
.dialog .section-header {
font-size: var(--bs-text-xs);
font-weight: var(--bs-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--bs-fg-subtle);
margin: var(--bs-5) 0 var(--bs-3) 0;
padding-bottom: var(--bs-2);
border-bottom: 1px solid var(--bs-border);
display: flex;
align-items: center;
gap: var(--bs-2);
}
/* Focus-Visible — saubere abgerundete Outline, nicht eckige Box */
.tab-btn:focus-visible,
.tdt-btn:focus-visible,
.pdt-btn:focus-visible,
.udt-btn:focus-visible,
.vm-tab:focus-visible,
.dialog-close:focus-visible {
outline: 2px solid var(--bs-primary);
outline-offset: 2px;
border-radius: var(--bs-r-sm);
}
button:focus-visible {
outline: 2px solid var(--bs-primary);
outline-offset: 1px;
border-radius: var(--bs-r-sm);
}
/* ═══════════════════════════════════════════════════════════════════════
17. V4 Brand — Pure Precision (Neural-Pulse Logo + Atmospheric Vibes)
═══════════════════════════════════════════════════════════════════════ */
/* ─── Display-Typography (Hero/Login Headlines) ──────────────────── */
.bs-display {
font-family: var(--bs-font-display);
letter-spacing: -0.04em;
line-height: 0.98;
font-weight: 700;
}
.bs-display-xxl { font-size: clamp(56px, 8vw, 120px); letter-spacing: -0.06em; }
.bs-display-xl { font-size: clamp(40px, 5vw, 72px); letter-spacing: -0.05em; }
.bs-display-lg { font-size: clamp(28px, 3.5vw, 44px); letter-spacing: -0.04em; }
.bs-gradient-text {
background: var(--bs-gradient-text, linear-gradient(135deg, var(--bs-fg) 30%, var(--bs-primary) 70%, var(--bs-accent) 100%));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
[data-theme="light"] .bs-gradient-text,
:root:not([data-theme="dark"]) .bs-gradient-text {
/* In Light-Mode aus dem dunklen #fff-Anfang einen dunklen Anfang machen */
background: linear-gradient(135deg, #0f172a 30%, var(--bs-primary) 70%, var(--bs-accent) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* ─── Wordmark "robopult." — Outfit, Slate-Anthrazit + Emerald-Akzent ──── */
.bs-wordmark {
font-family: var(--bs-font-display);
display: inline-flex;
align-items: baseline;
gap: 0;
letter-spacing: -0.025em;
line-height: 1;
font-feature-settings: "ss01" on, "ss02" on, "cv01" on;
}
/* Robopult: robopult. */
.bs-wordmark-name,
.bs-wordmark-base,
.bs-wordmark-star {
font-weight: 600;
font-style: normal;
color: var(--bs-fg);
background: none;
-webkit-background-clip: initial;
background-clip: initial;
-webkit-text-fill-color: currentColor;
}
.bs-wordmark-name {
/* etwas tighteres Tracking, Outfit-spezifisch */
letter-spacing: -0.03em;
}
.bs-wordmark-star {
letter-spacing: -0.05em;
}
.bs-wordmark-dot {
color: var(--bs-accent);
font-weight: 700;
font-style: normal;
margin-left: 0.02em;
letter-spacing: 0;
}
/* ═══════════════════════════════════════════════════════════════════════
Status-Pill-Pattern (Robopult „Digitale Manufaktur" V1 — clean Pill mit
bg-50 / text-700 / border-100 + Status-Dot. Inspiration aus Vorlage.
Verwendung: Aktiv
═══════════════════════════════════════════════════════════════════════ */
.rp-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: var(--bs-r);
font-size: var(--bs-text-sm);
font-weight: var(--bs-weight-medium);
white-space: nowrap;
border: 1px solid;
}
.rp-pill::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
.rp-pill-success {
background: var(--rp-emerald-50);
color: var(--rp-emerald-700);
border-color: var(--rp-emerald-100);
}
.rp-pill-warning {
background: #FFFBEB;
color: #B45309;
border-color: #FEF3C7;
}
.rp-pill-danger {
background: #FEF2F2;
color: #B91C1C;
border-color: #FEE2E2;
}
.rp-pill-info {
background: var(--rp-slate-100);
color: var(--rp-slate-700);
border-color: var(--rp-slate-200);
}
[data-theme="dark"] .rp-pill-success {
background: rgba(16, 185, 129, 0.10);
color: var(--rp-emerald-300);
border-color: rgba(16, 185, 129, 0.20);
}
[data-theme="dark"] .rp-pill-warning {
background: rgba(217, 119, 6, 0.10);
color: #FCD34D;
border-color: rgba(217, 119, 6, 0.22);
}
[data-theme="dark"] .rp-pill-danger {
background: rgba(239, 68, 68, 0.10);
color: #FCA5A5;
border-color: rgba(239, 68, 68, 0.22);
}
[data-theme="dark"] .rp-pill-info {
background: rgba(255, 255, 255, 0.04);
color: var(--rp-slate-300);
border-color: rgba(255, 255, 255, 0.08);
}
/* ═══════════════════════════════════════════════════════════════════════
Brand-Anchor: Industrial Navy für Sidebar-Logo + Wordmark
Sidebar-Logo nutzt jetzt Navy als Foundation (statt Slate-700)
═══════════════════════════════════════════════════════════════════════ */
.sidebar-logo svg {
color: var(--bs-brand-navy);
}
[data-theme="dark"] .sidebar-logo svg {
color: var(--rp-slate-300);
}
/* Legacy basestar TLD-Klasse — bleibt kompatibel falls noch irgendwo verwendet */
.bs-wordmark-tld {
font-weight: 500;
color: var(--bs-primary);
font-size: 0.42em;
margin-left: 0.18em;
margin-bottom: 0.12em;
letter-spacing: -0.01em;
font-style: normal;
font-family: var(--bs-font-mono);
align-self: flex-end;
opacity: 0.85;
text-transform: uppercase;
font-weight: 600;
}
/* ─── Mono-Tag (GRID_ALIGN: TRUE etc.) ──────────────────────────── */
.bs-mono-tag {
font-family: var(--bs-font-mono);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--bs-fg-subtle);
font-weight: 500;
}
.bs-mono-tag-accent { color: var(--bs-primary); }
/* ─── Status-Pill mit Ping-Dot (Intelligence in Motion) ──────────── */
.bs-status-pill {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 5px 14px;
border-radius: var(--bs-r-full);
background: var(--bs-primary-soft);
border: 1px solid var(--bs-primary-soft);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--bs-primary);
font-family: var(--bs-font-display);
}
.bs-status-pill-dot {
position: relative;
display: inline-flex;
width: 7px;
height: 7px;
}
.bs-status-pill-dot::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--bs-primary);
opacity: 0.7;
animation: bs-ping 2s cubic-bezier(0,0,0.2,1) infinite;
}
.bs-status-pill-dot::after {
content: "";
position: absolute;
inset: 1.5px;
border-radius: 50%;
background: var(--bs-primary);
}
@keyframes bs-ping {
0% { transform: scale(1); opacity: 0.6; }
75%, 100% { transform: scale(2.2); opacity: 0; }
}
/* ─── Atmospheric Background (Login + Dashboard-Hero) ────────────── */
.bs-atmospheric {
position: relative;
overflow: hidden;
isolation: isolate;
}
.bs-atmospheric::before,
.bs-atmospheric::after {
content: "";
position: absolute;
width: 70vmax;
height: 70vmax;
border-radius: 50%;
filter: blur(120px);
opacity: 0.5;
z-index: -1;
pointer-events: none;
mix-blend-mode: plus-lighter;
}
.bs-atmospheric::before {
top: -25%;
left: -15%;
background: radial-gradient(circle, rgba(30,41,59,0.45) 0%, transparent 60%);
}
.bs-atmospheric::after {
bottom: -25%;
right: -15%;
background: radial-gradient(circle, rgba(16,185,129,0.40) 0%, transparent 60%);
}
[data-theme="light"] .bs-atmospheric::before,
:root:not([data-theme="dark"]) .bs-atmospheric::before { opacity: 0.18; }
[data-theme="light"] .bs-atmospheric::after,
:root:not([data-theme="dark"]) .bs-atmospheric::after { opacity: 0.16; }
/* ─── Noise Overlay (Tiefe) ───────────────────────────────────────── */
.bs-noise::before {
content: "";
position: fixed;
inset: 0;
opacity: 0.035;
z-index: 1;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
}
[data-theme="light"] .bs-noise::before,
:root:not([data-theme="dark"]) .bs-noise::before { opacity: 0.025; }
/* ─── Logo-Mark Animations ────────────────────────────────────────── */
.bs-logo-pulse-ring {
animation: bs-logo-orbit 12s linear infinite;
transform-origin: 50% 50%;
transform-box: fill-box;
}
@keyframes bs-logo-orbit {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.bs-logo-core-pulse {
animation: bs-core-pulse 3.2s ease-in-out infinite;
transform-origin: 50% 50%;
transform-box: fill-box;
}
@keyframes bs-core-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.85; transform: scale(0.94); }
}
/* ─── Bento-Card (Atmospheric Variant für Dashboard-Hero/Cards) ──── */
.bs-bento {
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-xl);
padding: var(--bs-6);
position: relative;
transition: all var(--bs-transition-slow);
}
.bs-bento:hover {
border-color: var(--bs-primary-soft);
box-shadow: 0 20px 40px -20px rgba(30,41,59, 0.25);
}
/* Override für Dark-Theme Bento (atmospheric glass-morph) */
[data-theme="dark"] .bs-bento {
background: rgba(255, 255, 255, 0.015);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .bs-bento {
background: rgba(255, 255, 255, 0.015);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
}
/* ═══════════════════════════════════════════════════════════════════════
18. Team-Tab — Mitarbeiter / Gruppen / FMC (Starface Bridge)
═══════════════════════════════════════════════════════════════════════ */
/* Sub-Tabs */
.team-subtabs {
display: flex;
gap: 4px;
border-bottom: 1px solid var(--bs-border);
margin-bottom: var(--bs-5);
flex-wrap: wrap;
}
.tt-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
color: var(--bs-fg-muted);
font-family: inherit;
font-size: var(--bs-text-base);
font-weight: var(--bs-weight-medium);
cursor: pointer;
transition: all var(--bs-transition);
margin-bottom: -1px;
}
.tt-btn:hover { color: var(--bs-fg); }
.tt-btn.active {
color: var(--bs-primary);
border-bottom-color: var(--bs-primary);
font-weight: var(--bs-weight-semibold);
}
.tt-btn .tt-icon { display: inline-flex; }
.tt-btn .tt-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 18px;
padding: 0 6px;
background: var(--bs-bg-subtle);
color: var(--bs-fg-subtle);
border-radius: var(--bs-r-full);
font-size: 10px;
font-weight: var(--bs-weight-semibold);
font-family: var(--bs-font-mono);
}
.tt-btn.active .tt-count {
background: var(--bs-primary-soft);
color: var(--bs-primary);
}
/* Toolbar (Search + State) */
.team-toolbar {
display: flex;
align-items: center;
gap: var(--bs-3);
margin-bottom: var(--bs-5);
}
.team-search {
position: relative;
flex: 1;
max-width: 400px;
}
.team-search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--bs-fg-subtle);
pointer-events: none;
display: inline-flex;
}
.team-search input {
padding-left: 36px;
height: 38px;
}
.team-state {
font-family: var(--bs-font-mono);
font-size: var(--bs-text-sm);
color: var(--bs-fg-subtle);
}
/* Grid */
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: var(--bs-3);
}
/* Card */
.team-card {
display: flex;
align-items: center;
gap: var(--bs-3);
padding: var(--bs-3) var(--bs-4);
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-lg);
cursor: pointer;
font-family: inherit;
text-align: left;
width: 100%;
transition: all var(--bs-transition);
color: inherit;
}
.team-card:hover {
border-color: var(--bs-primary-soft);
background: var(--bs-bg-elevated);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(30,41,59, 0.12);
}
[data-theme="dark"] .team-card:hover {
background: rgba(255, 255, 255, 0.03);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.team-card-body {
flex: 1;
min-width: 0;
}
.team-card-title {
font-weight: var(--bs-weight-semibold);
font-size: var(--bs-text-md);
color: var(--bs-fg);
margin-bottom: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.team-card-sub {
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.team-card-meta {
flex-shrink: 0;
}
/* Avatar */
.team-avatar {
position: relative;
width: 40px;
height: 40px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
border-radius: var(--bs-r-full);
color: #fff;
font-weight: var(--bs-weight-semibold);
font-size: 13px;
letter-spacing: 0.02em;
overflow: hidden;
}
.team-avatar-initials {
position: relative;
z-index: 0;
}
.team-avatar-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.team-avatar-group {
background: linear-gradient(135deg, #10b981 0%, #1e293b 100%);
}
.team-avatar-fmc {
background: linear-gradient(135deg, #b45309 0%, #1e293b 100%);
}
/* Empty State */
.team-empty {
grid-column: 1 / -1;
text-align: center;
padding: var(--bs-12) var(--bs-6);
}
/* ─── Dialog: Mitarbeiter (dlg-team-user) ──────────────────────────── */
.dialog-tabs {
display: flex;
gap: 4px;
padding: 0 var(--bs-6);
border-bottom: 1px solid var(--bs-border);
flex-wrap: wrap;
}
.dtu-tab, .dtg-tab {
padding: 10px 14px;
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
color: var(--bs-fg-muted);
font-family: inherit;
font-size: var(--bs-text-sm);
font-weight: var(--bs-weight-medium);
cursor: pointer;
transition: all var(--bs-transition);
margin-bottom: -1px;
}
.dtu-tab:hover:not(.disabled), .dtg-tab:hover:not(.disabled) { color: var(--bs-fg); }
.dtu-tab.active, .dtg-tab.active {
color: var(--bs-primary);
border-bottom-color: var(--bs-primary);
font-weight: var(--bs-weight-semibold);
}
.dtu-tab.disabled, .dtg-tab.disabled {
opacity: 0.4;
cursor: not-allowed;
}
.dtu-pane, .dtg-pane {
padding: var(--bs-5) var(--bs-6) var(--bs-6);
}
/* Header-Avatar im Dialog */
.dtu-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Avatar-Pane */
.dtu-avatar-preview-wrap {
display: flex;
justify-content: center;
padding: var(--bs-6) 0;
}
.dtu-avatar-preview .team-avatar {
width: 140px !important;
height: 140px !important;
font-size: 48px !important;
box-shadow: 0 8px 32px rgba(30,41,59, 0.25);
}
.dtu-avatar-actions {
display: flex;
gap: var(--bs-2);
justify-content: center;
flex-wrap: wrap;
}
.dtu-avatar-actions label {
cursor: pointer;
}
/* Skills-Pane */
.dtu-skills-list {
display: flex;
flex-direction: column;
gap: 4px;
max-height: 360px;
overflow-y: auto;
padding: var(--bs-2);
background: var(--bs-bg-subtle);
border-radius: var(--bs-r-sm);
margin-bottom: var(--bs-4);
}
.dtu-skill-item {
display: flex;
align-items: center;
gap: var(--bs-3);
padding: 8px 10px;
background: var(--bs-bg-elevated);
border-radius: var(--bs-r-sm);
cursor: pointer;
transition: background var(--bs-transition);
}
.dtu-skill-item:hover { background: var(--bs-primary-soft); }
.dtu-skill-name {
font-size: var(--bs-text-base);
color: var(--bs-fg);
}
/* Toggle-Row Helper */
.bs-toggle-row {
display: inline-flex;
align-items: center;
gap: var(--bs-2);
cursor: pointer;
font-size: var(--bs-text-base);
color: var(--bs-fg);
}
/* ─── Dialog: Gruppe (dlg-team-group) ──────────────────────────────── */
.dtg-section-title {
font-size: var(--bs-text-xs);
font-weight: var(--bs-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--bs-fg-subtle);
margin: var(--bs-5) 0 var(--bs-2);
}
.dtg-members-search {
position: relative;
}
.dtg-add-suggestions {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 10;
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-sm);
box-shadow: var(--bs-shadow-lg);
max-height: 280px;
overflow-y: auto;
margin-top: 4px;
}
.dtg-add-suggestions:empty { display: none; }
.dtg-suggestion {
display: flex;
align-items: center;
gap: var(--bs-3);
padding: 8px 12px;
background: transparent;
border: 0;
width: 100%;
text-align: left;
cursor: pointer;
font-family: inherit;
color: inherit;
transition: background var(--bs-transition);
}
.dtg-suggestion:hover { background: var(--bs-bg-subtle); }
.dtg-suggestion + .dtg-suggestion { border-top: 1px solid var(--bs-border); }
.dtg-sug-name { font-weight: var(--bs-weight-medium); font-size: var(--bs-text-base); color: var(--bs-fg); }
.dtg-sug-sub { font-size: var(--bs-text-xs); color: var(--bs-fg-muted); }
.dtg-sug-add {
margin-left: auto;
display: inline-flex;
width: 24px;
height: 24px;
align-items: center;
justify-content: center;
background: var(--bs-primary-soft);
color: var(--bs-primary);
border-radius: var(--bs-r-full);
}
.dtg-suggestion-empty {
padding: 10px 12px;
color: var(--bs-fg-subtle);
font-size: var(--bs-text-sm);
text-align: center;
}
.dtg-members-list {
display: flex;
flex-direction: column;
gap: 4px;
max-height: 400px;
overflow-y: auto;
}
.dtg-member {
display: flex;
align-items: center;
gap: var(--bs-3);
padding: 8px 12px;
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-sm);
}
.dtg-member-body { flex: 1; min-width: 0; }
.dtg-member-name { font-weight: var(--bs-weight-medium); font-size: var(--bs-text-base); color: var(--bs-fg); }
.dtg-member-sub { font-size: var(--bs-text-xs); color: var(--bs-fg-muted); }
.dtg-member-remove {
flex-shrink: 0;
width: 30px;
height: 30px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* ─── Status-Pills (für aktiv/inaktiv Badges) ──────────────────────── */
.bs-pill-success { background: var(--bs-success-soft); color: var(--bs-success); }
.bs-pill-warning { background: var(--bs-warning-soft); color: var(--bs-warning); }
/* ─── Loading + Empty Icon ─────────────────────────────────────────── */
.bs-empty-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
background: var(--bs-primary-soft);
color: var(--bs-primary);
border-radius: var(--bs-r-full);
margin: 0 auto var(--bs-4);
}
/* Responsive */
@media (max-width: 700px) {
.team-grid { grid-template-columns: 1fr; }
.dialog-tabs { padding: 0 var(--bs-3); overflow-x: auto; flex-wrap: nowrap; }
}
/* ═══════════════════════════════════════════════════════════════════════
19. KI-Attendant Tab
═══════════════════════════════════════════════════════════════════════ */
/* Status-Karte oben */
.att-status-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--bs-4);
padding: var(--bs-5) var(--bs-6);
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-xl);
margin-bottom: var(--bs-5);
position: relative;
overflow: hidden;
}
.att-status-card::before {
content: "";
position: absolute;
top: -50%;
right: -10%;
width: 50%;
height: 200%;
background: radial-gradient(circle, rgba(30,41,59,0.08), transparent 70%);
pointer-events: none;
}
.att-status-info {
display: flex;
align-items: center;
gap: var(--bs-4);
position: relative;
}
.att-status-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
background: var(--bs-bg-subtle);
color: var(--bs-fg-muted);
border-radius: var(--bs-r-lg);
flex-shrink: 0;
transition: all var(--bs-transition);
}
.att-status-icon-live {
background: var(--bs-mod-attendant);
color: #ffffff;
box-shadow: 0 6px 20px rgba(16,185,129, 0.30);
}
.att-status-title {
font-family: var(--bs-font-display);
font-size: var(--bs-text-lg);
font-weight: var(--bs-weight-bold);
letter-spacing: -0.02em;
color: var(--bs-fg);
margin-bottom: 2px;
}
.att-status-subtitle {
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
}
.att-status-actions {
display: flex;
align-items: center;
gap: var(--bs-3);
position: relative;
}
.att-status-badge {
font-family: var(--bs-font-mono);
font-size: 10px;
font-weight: var(--bs-weight-bold);
letter-spacing: 0.18em;
padding: 4px 10px;
border-radius: var(--bs-r-full);
}
.att-badge-live {
background: var(--bs-success-soft);
color: var(--bs-success);
}
.att-badge-off {
background: var(--bs-bg-subtle);
color: var(--bs-fg-subtle);
}
/* Sub-Tab Buttons (eigener Selektor — nicht .tt-btn weil eigene Reihe) */
.att-sub-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
color: var(--bs-fg-muted);
font-family: inherit;
font-size: var(--bs-text-base);
font-weight: var(--bs-weight-medium);
cursor: pointer;
transition: all var(--bs-transition);
margin-bottom: -1px;
}
.att-sub-btn:hover { color: var(--bs-fg); }
.att-sub-btn.active {
color: var(--bs-primary);
border-bottom-color: var(--bs-primary);
font-weight: var(--bs-weight-semibold);
}
.att-sub-btn .tt-icon { display: inline-flex; }
/* Pane */
.att-pane { padding: var(--bs-2) 0; }
.att-pane-intro {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--bs-4);
margin-bottom: var(--bs-5);
padding: var(--bs-4) var(--bs-5);
background: var(--bs-bg-subtle);
border-radius: var(--bs-r-lg);
}
.att-pane-intro p { color: var(--bs-fg-muted); font-size: var(--bs-text-base); margin: 0; flex: 1; }
.att-pane-intro em { color: var(--bs-primary); font-style: normal; font-weight: var(--bs-weight-medium); }
/* Form */
.att-form { max-width: 880px; }
.att-section-title {
font-family: var(--bs-font-display);
font-size: var(--bs-text-md);
font-weight: var(--bs-weight-semibold);
color: var(--bs-fg);
margin: var(--bs-6) 0 var(--bs-3);
padding-top: var(--bs-4);
border-top: 1px solid var(--bs-border);
}
.att-section-title:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.att-saved-state {
font-size: var(--bs-text-sm);
color: var(--bs-success);
font-weight: var(--bs-weight-medium);
margin-left: var(--bs-3);
}
/* Departments */
.att-dep-list {
display: flex;
flex-direction: column;
gap: var(--bs-2);
}
.att-dep-card {
display: flex;
align-items: center;
gap: var(--bs-4);
padding: var(--bs-4) var(--bs-5);
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-lg);
transition: all var(--bs-transition);
}
.att-dep-card:hover { border-color: var(--bs-primary-soft); }
.att-dep-inactive { opacity: 0.55; }
.att-dep-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: var(--bs-primary-soft);
color: var(--bs-primary);
border-radius: var(--bs-r);
flex-shrink: 0;
}
.att-dep-body { flex: 1; min-width: 0; }
.att-dep-head {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 4px;
}
.att-dep-name {
font-weight: var(--bs-weight-semibold);
font-size: var(--bs-text-md);
color: var(--bs-fg);
}
.att-dep-sub {
display: flex;
align-items: center;
gap: var(--bs-3);
flex-wrap: wrap;
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
}
.att-dep-ext {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--bs-font-mono);
color: var(--bs-fg);
}
.att-dep-kw {
display: inline-flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.att-kw-chip {
display: inline-flex;
padding: 2px 8px;
background: var(--bs-bg-subtle);
border-radius: var(--bs-r-full);
font-size: 11px;
color: var(--bs-fg-muted);
}
.att-kw-more {
font-size: 11px;
color: var(--bs-fg-subtle);
}
.att-dep-desc {
margin-top: 4px;
font-size: var(--bs-text-sm);
color: var(--bs-fg-subtle);
line-height: 1.4;
}
.att-dep-edit {
flex-shrink: 0;
gap: 6px;
}
/* Business Hours */
.att-hours-grid {
display: flex;
flex-direction: column;
gap: 4px;
background: var(--bs-bg-subtle);
padding: var(--bs-3);
border-radius: var(--bs-r-lg);
margin-bottom: var(--bs-5);
}
.att-hour-row {
display: grid;
grid-template-columns: 200px 1fr;
align-items: center;
gap: var(--bs-4);
padding: var(--bs-3) var(--bs-4);
background: var(--bs-bg-elevated);
border-radius: var(--bs-r-sm);
}
.att-hour-toggle {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
}
.att-hour-day {
font-weight: var(--bs-weight-medium);
color: var(--bs-fg);
}
.att-hour-times {
display: flex;
align-items: center;
gap: var(--bs-2);
}
.att-hour-times[data-disabled="1"] { opacity: 0.45; }
.att-hour-input {
width: 110px !important;
height: 34px !important;
font-family: var(--bs-font-mono) !important;
}
.att-hour-sep {
color: var(--bs-fg-subtle);
font-size: var(--bs-text-sm);
}
.att-hour-state {
margin-left: auto;
font-size: var(--bs-text-xs);
color: var(--bs-fg-subtle);
font-family: var(--bs-font-mono);
text-transform: uppercase;
letter-spacing: 0.12em;
}
/* Sessions */
.att-sessions-list {
display: flex;
flex-direction: column;
gap: var(--bs-2);
}
.att-sess-card {
display: flex;
align-items: center;
gap: var(--bs-3);
padding: var(--bs-3) var(--bs-4);
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-lg);
cursor: pointer;
font-family: inherit;
text-align: left;
width: 100%;
color: inherit;
transition: all var(--bs-transition);
}
.att-sess-card:hover {
border-color: var(--bs-primary-soft);
background: var(--bs-bg-elevated);
}
.att-sess-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--bs-r);
flex-shrink: 0;
}
.att-sess-transfer { background: var(--bs-accent-soft); color: var(--bs-accent); }
.att-sess-message { background: var(--bs-primary-soft); color: var(--bs-primary); }
.att-sess-completed { background: var(--bs-success-soft); color: var(--bs-success); }
.att-sess-default { background: var(--bs-bg-subtle); color: var(--bs-fg-muted); }
.att-sess-body { flex: 1; min-width: 0; }
.att-sess-head {
display: flex;
align-items: baseline;
gap: var(--bs-2);
margin-bottom: 2px;
}
.att-sess-caller {
font-weight: var(--bs-weight-semibold);
font-size: var(--bs-text-md);
color: var(--bs-fg);
font-family: var(--bs-font-mono);
}
.att-sess-time {
font-size: var(--bs-text-xs);
color: var(--bs-fg-subtle);
margin-left: auto;
}
.att-sess-sub {
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.att-sess-meta { flex-shrink: 0; }
/* Session Detail-Dialog */
.das-meta-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--bs-3);
padding: var(--bs-4);
background: var(--bs-bg-subtle);
border-radius: var(--bs-r-lg);
}
.das-meta-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.das-meta-full { grid-column: 1 / -1; }
.das-meta-lbl {
font-size: 10px;
font-weight: var(--bs-weight-semibold);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--bs-fg-subtle);
font-family: var(--bs-font-mono);
}
.das-meta-val {
font-size: var(--bs-text-base);
color: var(--bs-fg);
display: inline-flex;
align-items: center;
gap: 6px;
}
.das-messages {
display: flex;
flex-direction: column;
gap: var(--bs-2);
max-height: 460px;
overflow-y: auto;
padding: var(--bs-2);
}
.das-msg {
padding: var(--bs-3) var(--bs-4);
border-radius: var(--bs-r);
border: 1px solid var(--bs-border);
background: var(--bs-bg-elevated);
}
.das-msg-head {
display: flex;
align-items: center;
gap: var(--bs-2);
margin-bottom: 4px;
}
.das-msg-role {
font-size: 10px;
font-weight: var(--bs-weight-bold);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--bs-fg-subtle);
font-family: var(--bs-font-mono);
}
.das-msg-time {
margin-left: auto;
font-size: 10px;
color: var(--bs-fg-subtle);
font-family: var(--bs-font-mono);
}
.das-msg-text {
font-size: var(--bs-text-base);
color: var(--bs-fg);
line-height: 1.5;
}
.das-msg-user {
background: var(--bs-bg-subtle);
border-color: var(--bs-border);
}
.das-msg-user .das-msg-role { color: var(--bs-fg-muted); }
.das-msg-ai {
background: var(--bs-primary-soft);
border-color: rgba(30,41,59, 0.2);
}
.das-msg-ai .das-msg-role { color: var(--bs-primary); }
.das-msg-tool {
background: rgba(45, 212, 191, 0.10);
border-color: rgba(45, 212, 191, 0.2);
}
.das-msg-tool .das-msg-role { color: #2dd4bf; }
.das-msg-system {
background: var(--bs-bg-subtle);
border-style: dashed;
font-size: var(--bs-text-sm);
opacity: 0.85;
}
@media (max-width: 700px) {
.att-status-card { flex-direction: column; align-items: stretch; }
.att-status-actions { justify-content: flex-end; }
.att-hour-row { grid-template-columns: 1fr; gap: var(--bs-2); }
.att-pane-intro { flex-direction: column; align-items: stretch; }
.das-meta-grid { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════════════════════════
19b. KI-Attendant Erweiterungen (Stats-Dashboard, Prompt-Pane, Voice-Preview)
═══════════════════════════════════════════════════════════════════════ */
/* KPI-Row */
.att-kpi-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: var(--bs-3);
margin-bottom: var(--bs-5);
}
.att-kpi {
display: flex;
align-items: center;
gap: var(--bs-3);
padding: var(--bs-4) var(--bs-5);
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-lg);
transition: all var(--bs-transition);
}
.att-kpi:hover { border-color: var(--bs-primary-soft); }
.att-kpi-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--bs-r);
background: var(--bs-primary-soft);
color: var(--bs-primary);
flex-shrink: 0;
}
.att-kpi.kpi-week .att-kpi-icon { background: var(--bs-accent-soft); color: var(--bs-accent); }
.att-kpi.kpi-month .att-kpi-icon { background: rgba(45, 212, 191, 0.16); color: #2dd4bf; }
.att-kpi.kpi-total .att-kpi-icon { background: var(--bs-bg-subtle); color: var(--bs-fg-muted); }
.att-kpi.kpi-dur .att-kpi-icon { background: var(--bs-success-soft); color: var(--bs-success); }
.att-kpi-body { min-width: 0; }
.att-kpi-value {
font-family: var(--bs-font-display);
font-size: 24px;
font-weight: var(--bs-weight-bold);
letter-spacing: -0.04em;
color: var(--bs-fg);
line-height: 1;
}
.att-kpi-label {
font-size: var(--bs-text-xs);
color: var(--bs-fg-muted);
margin-top: 4px;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: var(--bs-weight-medium);
}
/* Stats-Grid */
.att-stats-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: var(--bs-3);
margin-bottom: var(--bs-3);
align-items: start; /* Cards size to content (kein Weißraum-Streck) */
}
@media (max-width: 900px) { .att-stats-grid { grid-template-columns: 1fr; } }
.att-stats-card {
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-lg);
padding: var(--bs-5);
margin-bottom: var(--bs-3);
}
.att-stats-card-head {
margin-bottom: var(--bs-4);
}
.att-stats-card-head h4 {
font-family: var(--bs-font-display);
font-size: var(--bs-text-md);
font-weight: var(--bs-weight-semibold);
letter-spacing: -0.02em;
color: var(--bs-fg);
margin-bottom: 2px;
}
.att-stats-card-head p {
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
margin: 0;
}
/* Outcome bars */
.att-outcome-bars {
display: flex;
flex-direction: column;
gap: var(--bs-2);
}
.att-outcome-row {
display: grid;
grid-template-columns: 28px 1fr 2fr 40px;
align-items: center;
gap: var(--bs-2);
}
.att-outcome-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: var(--bs-r-sm);
}
.att-outcome-label {
font-size: var(--bs-text-sm);
color: var(--bs-fg);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.att-outcome-bar-track {
height: 8px;
background: var(--bs-bg-subtle);
border-radius: var(--bs-r-full);
overflow: hidden;
}
.att-outcome-bar-fill {
height: 100%;
background: var(--bs-primary);
border-radius: var(--bs-r-full);
transition: width 400ms ease;
}
.att-outcome-bar-fill.att-sess-transfer { background: #2dd4bf; }
.att-outcome-bar-fill.att-sess-message { background: var(--bs-accent); }
.att-outcome-bar-fill.att-sess-completed { background: var(--bs-success); }
.att-outcome-bar-fill.att-sess-ooh { background: var(--bs-warning); }
.att-outcome-bar-fill.att-sess-error { background: var(--bs-danger); }
.att-outcome-count {
font-family: var(--bs-font-mono);
font-size: var(--bs-text-sm);
font-weight: var(--bs-weight-semibold);
color: var(--bs-fg);
text-align: right;
}
/* Top Departments */
.att-top-depts {
display: flex;
flex-direction: column;
gap: var(--bs-2);
}
.att-top-dept {
display: flex;
align-items: center;
gap: var(--bs-3);
padding: 8px 12px;
background: var(--bs-bg-subtle);
border-radius: var(--bs-r-sm);
}
.att-top-rank {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: var(--bs-primary-soft);
color: var(--bs-primary);
border-radius: var(--bs-r-full);
font-size: 11px;
font-weight: var(--bs-weight-bold);
font-family: var(--bs-font-mono);
}
.att-top-body { flex: 1; min-width: 0; }
.att-top-name {
font-weight: var(--bs-weight-medium);
font-size: var(--bs-text-sm);
color: var(--bs-fg);
}
.att-top-ext {
font-size: var(--bs-text-xs);
color: var(--bs-fg-muted);
font-family: var(--bs-font-mono);
}
.att-top-count {
font-family: var(--bs-font-mono);
font-size: var(--bs-text-sm);
font-weight: var(--bs-weight-semibold);
color: var(--bs-primary);
}
/* By-Hour + By-Day Bar Chart */
.att-byhour-chart, .att-byday-chart { padding: var(--bs-2) 0; }
.att-bars {
display: flex;
align-items: flex-end;
gap: 4px;
height: 140px;
padding: 0 4px;
}
.att-bar-col {
flex: 1;
min-width: 16px;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
height: 100%;
}
.att-bar-fill {
width: 100%;
/* Soft Slate-Mid für Chart-Bars — weniger aggressiv schwarz */
background: linear-gradient(180deg, #94a3b8, #64748b);
border-radius: var(--bs-r-sm) var(--bs-r-sm) 0 0;
min-height: 2px;
transition: height 400ms ease;
margin-top: auto;
}
[data-theme="dark"] .att-bar-fill {
background: linear-gradient(180deg, #475569, #334155);
}
.att-bar-fill-purple {
/* Akzent-Variante für Highlight-Bars (heutiger Tag etc.) */
background: linear-gradient(180deg, var(--bs-accent), #059669);
}
.att-bar-label {
font-size: 9px;
color: var(--bs-fg-subtle);
font-family: var(--bs-font-mono);
font-weight: var(--bs-weight-medium);
flex-shrink: 0;
}
/* Voice-Preview Row */
.att-voice-row {
display: flex;
gap: var(--bs-2);
align-items: stretch;
}
.att-voice-row select { flex: 1; }
.att-voice-row button {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.att-voice-preview-icon { display: inline-flex; }
/* Prompt-Preset-Bar */
.att-preset-bar {
display: flex;
align-items: center;
gap: var(--bs-2);
padding: var(--bs-3) var(--bs-4);
background: var(--bs-bg-subtle);
border-radius: var(--bs-r-lg);
margin-bottom: var(--bs-4);
flex-wrap: wrap;
}
.att-preset-bar .att-preset-select {
flex: 1;
min-width: 200px;
height: 36px !important;
}
.att-preset-info {
flex-basis: 100%;
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
margin-top: 4px;
font-style: italic;
}
.att-prompt-textarea {
font-family: var(--bs-font-mono) !important;
font-size: 13px !important;
line-height: 1.55 !important;
resize: vertical;
}
/* Test-Card */
.att-test-card {
padding: var(--bs-5);
background: var(--bs-bg-subtle);
border: 1px dashed var(--bs-border);
border-radius: var(--bs-r-lg);
}
.att-test-result {
margin-top: var(--bs-3);
padding: var(--bs-4);
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r);
}
.att-test-head {
display: flex;
align-items: center;
gap: var(--bs-3);
margin-bottom: var(--bs-3);
}
.att-test-outcome {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: var(--bs-r-full);
font-size: var(--bs-text-sm);
font-weight: var(--bs-weight-semibold);
}
.att-test-outcome.att-sess-transfer { background: rgba(45, 212, 191, 0.15); color: #2dd4bf; }
.att-test-outcome.att-sess-message { background: var(--bs-accent-soft); color: var(--bs-accent); }
.att-test-outcome.att-sess-completed { background: var(--bs-success-soft); color: var(--bs-success); }
.att-test-outcome.att-sess-error { background: var(--bs-danger-soft); color: var(--bs-danger); }
.att-test-outcome.att-sess-default { background: var(--bs-primary-soft); color: var(--bs-primary); }
.att-test-msgs { display: flex; flex-direction: column; gap: var(--bs-2); }
/* Sessions Filters */
.att-sess-filters {
display: flex;
gap: var(--bs-2);
margin-top: var(--bs-2);
flex-wrap: wrap;
}
.att-sess-filter {
height: 32px !important;
font-size: var(--bs-text-sm) !important;
max-width: 220px;
}
/* Sessions: zusätzliche Outcome-Klassen */
.att-sess-ooh { background: var(--bs-warning-soft); color: var(--bs-warning); }
.att-sess-error { background: var(--bs-danger-soft); color: var(--bs-danger); }
.att-sess-called {
font-size: 11px;
font-family: var(--bs-font-mono);
color: var(--bs-fg-subtle);
}
/* Hours-Toggle bei disabled */
.att-hour-times[data-disabled="0"] { opacity: 1; }
/* ═══════════════════════════════════════════════════════════════════════
20. Tenant-Integrationen Tab (API-Schlüssel-Verwaltung)
═══════════════════════════════════════════════════════════════════════ */
.ti-intro {
padding: var(--bs-4) var(--bs-5);
background: var(--bs-bg-subtle);
border-radius: var(--bs-r-lg);
margin-bottom: var(--bs-5);
}
.ti-intro h4 {
font-family: var(--bs-font-display);
font-size: var(--bs-text-md);
font-weight: var(--bs-weight-bold);
letter-spacing: -0.02em;
color: var(--bs-fg);
margin-bottom: 6px;
}
.ti-intro p {
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
line-height: 1.55;
margin: 0;
}
.ti-legend {
display: flex;
gap: var(--bs-5);
list-style: none;
margin-top: var(--bs-3);
padding: 0;
flex-wrap: wrap;
}
.ti-legend li {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
}
.ti-legend strong { color: var(--bs-fg); font-weight: var(--bs-weight-medium); }
.ti-legend-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--bs-primary);
}
.ti-legend-clear { background: var(--bs-warning); }
.ti-form {
display: flex;
flex-direction: column;
gap: var(--bs-4);
}
/* ─── Card ──────────────────────────────────────────────────────────── */
.ti-card {
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-lg);
overflow: hidden;
transition: border-color var(--bs-transition);
}
.ti-card:hover { border-color: var(--bs-border-hover); }
.ti-card-head {
display: flex;
align-items: center;
gap: var(--bs-3);
padding: var(--bs-4) var(--bs-5);
border-bottom: 1px solid var(--bs-border);
background: var(--bs-bg-subtle);
}
/* Card-Icon — einheitliches 38×38 Quadrat, Color-Code nach Domäne (KI / VM / Ansagen / DSGVO) */
.ti-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: var(--bs-r-sm);
flex-shrink: 0;
border: 1px solid transparent;
}
.ti-card-icon svg { width: 18px; height: 18px; stroke-width: 2; }
/* Domäne 1: KI-Attendant / OpenAI-Foundation — Slate-Primary */
.ti-icon-openai,
.ti-icon-model {
background: var(--bs-primary-soft);
color: var(--bs-primary);
border-color: rgba(30, 41, 59, 0.18);
}
/* Domäne 2: Voicemail-Operations — Teal/Cyan (Brand-Akzent für VM) */
.ti-icon-trans,
.ti-icon-poll,
.ti-icon-email {
background: rgba(13, 148, 136, 0.10);
color: #0d9488;
border-color: rgba(13, 148, 136, 0.22);
}
[data-theme="dark"] .ti-icon-trans,
[data-theme="dark"] .ti-icon-poll,
[data-theme="dark"] .ti-icon-email {
background: rgba(45, 212, 191, 0.14);
color: #2dd4bf;
}
/* Domäne 3: Ansagen-Engine — Precision Emerald */
.ti-icon-eleven,
.ti-icon-tts,
.ti-icon-quota {
background: rgba(16, 185, 129, 0.12);
color: var(--rp-emerald-500, #10B981);
border-color: rgba(16, 185, 129, 0.24);
}
[data-theme="dark"] .ti-icon-eleven,
[data-theme="dark"] .ti-icon-tts,
[data-theme="dark"] .ti-icon-quota {
background: rgba(16, 185, 129, 0.18);
color: #34d399;
}
/* Domäne 4: DSGVO / Danger — Red-Warning */
.ti-icon-retention {
background: rgba(239, 68, 68, 0.10);
color: #b91c1c;
border-color: rgba(239, 68, 68, 0.24);
}
[data-theme="dark"] .ti-icon-retention {
background: rgba(239, 68, 68, 0.16);
color: #fca5a5;
}
/* TTS-Banner im Tenant-Ansagen-Tab (Read-Only, Phase 13b) */
.ann-tts-banner {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 14px;
align-items: center;
padding: 12px 18px;
background: var(--bs-bg-subtle);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r);
margin-bottom: var(--bs-4);
}
.ann-tts-banner[data-provider="openai"] {
background: var(--bs-primary-soft);
border-color: var(--bs-border);
}
.ann-tts-banner[data-provider="elevenlabs"] {
background: var(--rp-mod-announcements-soft);
border-color: var(--rp-mod-announcements);
}
.ann-tts-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: var(--bs-bg-elevated);
border-radius: var(--bs-r-sm);
color: var(--rp-mod-announcements);
flex-shrink: 0;
}
.ann-tts-banner[data-provider="openai"] .ann-tts-icon { color: var(--bs-primary); }
.ann-tts-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.ann-tts-text strong {
font-family: var(--bs-font-display);
font-size: var(--bs-text-md);
font-weight: var(--bs-weight-semibold);
color: var(--bs-fg);
letter-spacing: -0.015em;
}
.ann-tts-text span {
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
line-height: 1.4;
}
.ann-tts-hint {
font-size: var(--bs-text-xs);
color: var(--bs-fg-subtle);
font-family: var(--bs-font-mono);
white-space: nowrap;
flex-shrink: 0;
}
@media (max-width: 700px) {
.ann-tts-banner { grid-template-columns: auto 1fr; }
.ann-tts-hint { grid-column: 1 / -1; text-align: right; }
}
/* ─── Kontingent-Banner im Tenant-Ansagen-Tab (Aufgabe 2b) ─── */
.ann-quota-banner {
display: flex;
flex-direction: column;
gap: 6px;
padding: 12px 18px;
background: var(--bs-bg-subtle);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r);
margin-bottom: var(--bs-4);
transition: border-color var(--bs-transition), background var(--bs-transition);
}
.ann-quota-banner[data-state="low"] {
border-color: rgba(245,158,11,0.40);
background: rgba(245,158,11,0.06);
}
.ann-quota-banner[data-state="depleted"] {
border-color: rgba(239,68,68,0.40);
background: rgba(239,68,68,0.06);
}
.ann-quota-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.ann-quota-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--bs-font-display);
font-size: var(--bs-text-sm);
color: var(--bs-fg);
}
.ann-quota-label strong { font-weight: var(--bs-weight-semibold); }
.ann-quota-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px; height: 26px;
background: var(--bs-bg-elevated);
border-radius: var(--bs-r-sm);
border: 1px solid var(--bs-border);
color: var(--rp-emerald-500, #10B981);
}
.ann-quota-counter {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
}
.ann-quota-dots { display: inline-flex; gap: 4px; }
.ann-quota-dot {
width: 9px; height: 9px;
border-radius: 50%;
flex-shrink: 0;
transition: background var(--bs-transition);
}
.ann-quota-dot-used { background: var(--rp-emerald-500, #10B981); }
.ann-quota-dot-free { background: var(--bs-border-strong); opacity: 0.5; }
.ann-quota-dot-unlimited {
width: auto; height: auto;
border-radius: 0;
font-size: 18px;
font-weight: 700;
color: var(--rp-emerald-500, #10B981);
line-height: 1;
}
.ann-quota-banner[data-state="depleted"] .ann-quota-dot-used { background: #b91c1c; }
.ann-quota-banner[data-state="low"] .ann-quota-dot-used { background: #b45309; }
.ann-quota-text { font-weight: 600; color: var(--bs-fg); }
.ann-quota-reset { color: var(--bs-fg-subtle); font-size: var(--bs-text-xs); }
.ann-quota-rev {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--bs-text-xs);
color: var(--bs-fg-muted);
padding-left: 34px;
}
.ann-quota-rev:empty { display: none; }
.ann-quota-rev svg { width: 12px; height: 12px; }
/* "Neue Ansage"-Button im depleted-Zustand */
.ann-btn-locked {
cursor: not-allowed;
opacity: 0.6;
position: relative;
}
/* ─── Revision-Indikator auf Ansage-Card (Aufgabe 3) ─── */
.ann-card-actions {
display: flex;
gap: 6px;
align-items: center;
}
.ann-card-action {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: 1px solid var(--bs-border);
background: var(--bs-bg-elevated);
border-radius: var(--bs-r-sm);
cursor: pointer;
color: var(--bs-fg-muted);
transition: all var(--bs-transition);
}
.ann-card-action:hover {
border-color: var(--rp-emerald-500, #10B981);
color: var(--rp-emerald-500, #10B981);
background: rgba(16,185,129,0.08);
}
.ann-card-action svg { width: 14px; height: 14px; stroke-width: 2; }
.ann-card-revise:hover {
border-color: var(--rp-emerald-500, #10B981);
color: var(--rp-emerald-500, #10B981);
}
.ann-card-rev-badge {
display: inline-flex;
align-items: center;
gap: 3px;
margin-left: 8px;
padding: 2px 7px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
background: rgba(16,185,129,0.10);
color: var(--rp-emerald-500, #10B981);
border: 1px solid rgba(16,185,129,0.28);
border-radius: 999px;
vertical-align: middle;
}
.ann-card-rev-badge svg { width: 11px; height: 11px; stroke-width: 2.4; }
.ann-card-revision {
border-left: 3px solid var(--rp-emerald-500, #10B981);
}
/* Editor-Hint bei Revision-Mode */
.ann-revision-hint {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 14px;
margin-bottom: 14px;
background: rgba(16,185,129,0.08);
border: 1px solid rgba(16,185,129,0.25);
border-left: 3px solid var(--rp-emerald-500, #10B981);
border-radius: var(--bs-r-sm);
font-size: 13px;
color: var(--bs-fg);
line-height: 1.5;
}
.ann-revision-hint-icon {
display: inline-flex;
align-items: center;
color: var(--rp-emerald-500, #10B981);
flex-shrink: 0;
margin-top: 1px;
}
.ann-revision-hint strong { color: var(--bs-fg); }
/* TTS-Provider-Radio-Group (Platform-Admin Tenant-Edit Integrationen) */
.ti-tts-options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 4px;
}
@media (max-width: 700px) {
.ti-tts-options { grid-template-columns: 1fr; }
}
.ti-tts-opt {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
background: var(--bs-bg-subtle);
border: 1.5px solid var(--bs-border);
border-radius: var(--bs-r);
cursor: pointer;
transition: all var(--bs-transition);
}
.ti-tts-opt:hover { border-color: var(--bs-primary-soft); }
.ti-tts-opt:has(input:checked) {
border-color: var(--rp-mod-announcements);
background: var(--rp-mod-announcements-soft);
}
[data-theme="dark"] .ti-tts-opt:has(input:checked) {
background: rgba(217, 119, 6, 0.10);
}
.ti-tts-opt input[type="radio"] {
margin-top: 3px;
accent-color: var(--rp-mod-announcements);
flex-shrink: 0;
}
.ti-tts-title {
font-family: var(--bs-font-display);
font-weight: var(--bs-weight-semibold);
font-size: var(--bs-text-sm);
color: var(--bs-fg);
}
.ti-tts-sub {
font-size: var(--bs-text-xs);
color: var(--bs-fg-muted);
margin-top: 2px;
}
.ti-card-title-wrap { flex: 1; min-width: 0; }
.ti-card-title-wrap h5 {
font-family: var(--bs-font-display);
font-size: var(--bs-text-md);
font-weight: var(--bs-weight-semibold);
letter-spacing: -0.02em;
color: var(--bs-fg);
margin-bottom: 2px;
}
.ti-card-title-wrap p {
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
margin: 0;
line-height: 1.4;
}
.ti-key-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background: var(--bs-success-soft);
color: var(--bs-success);
font-size: 11px;
font-weight: var(--bs-weight-semibold);
letter-spacing: 0.04em;
border-radius: var(--bs-r-full);
flex-shrink: 0;
white-space: nowrap;
}
.ti-card-body {
padding: var(--bs-5);
}
.ti-card-body .bs-field { margin-bottom: var(--bs-4); }
.ti-card-body .bs-field:last-child { margin-bottom: 0; }
.ti-card-body .grid-2 { gap: var(--bs-4); }
.ti-card-body .grid-2 .bs-field { margin-bottom: 0; }
.ti-actions {
margin-top: var(--bs-4);
padding-top: var(--bs-4);
border-top: 1px solid var(--bs-border);
}
/* ═════════════════════════════════════════════════════════════════════
Tenant-Edit-Modal — Akkordeon-Sektionen
3 Top-Level Gruppen (KI / Ansagen / Voicemail), aufklappbar via
═════════════════════════════════════════════════════════════════════ */
.ti-section {
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r);
overflow: hidden;
margin-bottom: var(--bs-3);
transition: border-color var(--bs-transition), box-shadow var(--bs-transition);
}
.ti-section:hover { border-color: var(--bs-border-hover); }
.ti-section[open] {
border-color: var(--bs-border-hover);
box-shadow: var(--bs-shadow-sm);
}
.ti-section-summary {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
cursor: pointer;
list-style: none;
user-select: none;
background: var(--bs-bg-elevated);
transition: background var(--bs-transition);
}
.ti-section-summary::-webkit-details-marker { display: none; }
.ti-section-summary::marker { content: ''; }
.ti-section-summary:hover { background: var(--bs-bg-subtle); }
.ti-section[open] .ti-section-summary {
border-bottom: 1px solid var(--bs-border);
}
.ti-section-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: var(--bs-r-sm);
flex-shrink: 0;
color: var(--bs-fg);
}
.ti-section-icon-ai { background: var(--bs-primary-soft); color: var(--bs-primary); }
.ti-section-icon-ann { background: rgba(16,185,129,0.12); color: var(--rp-emerald-500, #10B981); }
.ti-section-icon-vm { background: rgba(45,212,191,0.15); color: #0d9488; }
[data-theme="dark"] .ti-section-icon-vm { color: #2dd4bf; }
.ti-section-meta {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.ti-section-title {
font-family: var(--bs-font-display);
font-size: var(--bs-text-md);
font-weight: var(--bs-weight-semibold);
letter-spacing: -0.02em;
color: var(--bs-fg);
line-height: 1.2;
}
.ti-section-sub {
font-size: var(--bs-text-xs);
color: var(--bs-fg-muted);
line-height: 1.4;
}
.ti-section-chevron {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: var(--bs-r-sm);
color: var(--bs-fg-subtle);
transition: transform 0.2s ease, color var(--bs-transition), background var(--bs-transition);
flex-shrink: 0;
}
.ti-section[open] .ti-section-chevron {
transform: rotate(180deg);
color: var(--bs-primary);
}
.ti-section-summary:hover .ti-section-chevron {
background: var(--bs-bg-elevated);
color: var(--bs-fg);
}
.ti-section-body {
padding: var(--bs-4);
background: var(--bs-bg-subtle);
display: flex;
flex-direction: column;
gap: var(--bs-3);
}
/* Cards INNERHALB einer Sektion: kein doppelter Außen-Border + flacheres Look */
.ti-section-body > .ti-card {
margin-bottom: 0;
background: var(--bs-bg-elevated);
border-color: var(--bs-border);
}
.ti-section-body > .ti-card:hover { border-color: var(--bs-border-hover); }
/* Vereinheitlichte Info-Banner (ersetzt diverse inline-style Help-Boxen) */
.ti-info-banner {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 12px;
padding: 10px 12px;
background: var(--bs-bg-subtle);
border-left: 3px solid var(--bs-primary-soft);
border-radius: var(--bs-r-sm);
font-size: 12px;
color: var(--bs-fg-muted);
line-height: 1.5;
}
.ti-info-banner svg {
width: 14px;
height: 14px;
flex-shrink: 0;
margin-top: 2px;
color: var(--bs-primary);
}
.ti-info-banner strong { color: var(--bs-fg); font-weight: 600; }
.ti-info-banner:empty { display: none; }
/* ─── API-Key-Slots in OpenAI-Card (Realtime / TTS / Generic Fallback) ─── */
.ti-key-slot {
background: var(--bs-bg-subtle);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-sm);
padding: var(--bs-3) var(--bs-4);
margin-bottom: var(--bs-3);
}
.ti-key-slot:last-child { margin-bottom: 0; }
.ti-key-slot.ti-key-slot-fallback {
background: var(--bs-bg-subtle);
border-style: dashed;
opacity: 0.96;
}
.ti-key-slot-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.ti-key-slot-icon {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-sm);
color: var(--bs-fg-muted);
flex-shrink: 0;
}
.ti-key-slot-icon svg { width: 16px; height: 16px; stroke-width: 2; }
/* Forced-Centered-Wrapper für alle replaced Lucide-Icons */
.ti-key-slot-icon > span,
.ti-card-icon > span,
.ti-section-icon > span,
.ti-section-chevron > span {
display: inline-flex !important;
align-items: center;
justify-content: center;
line-height: 0;
}
.ti-key-slot-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ti-key-slot-title {
font-family: var(--bs-font-display);
font-weight: var(--bs-weight-semibold);
font-size: var(--bs-text-sm);
color: var(--bs-fg);
}
.ti-key-slot-sub {
font-size: 11px;
color: var(--bs-fg-muted);
line-height: 1.4;
}
/* 3-State Status-Badge (ok / fallback / missing) */
.ti-key-status {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
border-radius: 999px;
flex-shrink: 0;
white-space: nowrap;
}
.ti-key-status svg { width: 11px; height: 11px; stroke-width: 2.4; }
.ti-key-status-ok { background: rgba(16,185,129,0.12); color: #047857; border: 1px solid rgba(16,185,129,0.32); }
.ti-key-status-fallback { background: rgba(245,158,11,0.12); color: #b45309; border: 1px solid rgba(245,158,11,0.32); }
.ti-key-status-missing { background: rgba(239,68,68,0.10); color: #b91c1c; border: 1px solid rgba(239,68,68,0.28); }
[data-theme="dark"] .ti-key-status-ok { color: #6ee7b7; background: rgba(16,185,129,0.18); }
[data-theme="dark"] .ti-key-status-fallback { color: #fcd34d; background: rgba(245,158,11,0.18); }
[data-theme="dark"] .ti-key-status-missing { color: #fca5a5; background: rgba(239,68,68,0.16); }
/* ─── Kontingent-Card (Platform-Admin) ─── */
.ti-quota-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bs-4); }
@media (max-width: 600px) { .ti-quota-grid { grid-template-columns: 1fr; } }
.ti-quota-help {
margin-top: var(--bs-3);
padding: 10px 12px;
background: var(--bs-bg-subtle);
border-radius: var(--bs-r-sm);
border-left: 3px solid var(--bs-primary-soft);
font-size: 12px;
color: var(--bs-fg-muted);
line-height: 1.5;
}
.ti-quota-help strong { color: var(--bs-fg); }
/* Sub-tab body — wenn das integrations-Pane aktiv ist */
#tdp-integrations { padding: var(--bs-5) var(--bs-6) var(--bs-6); }
@media (max-width: 700px) {
.ti-card-head { flex-wrap: wrap; }
.ti-key-badge { order: 99; flex-basis: 100%; justify-content: flex-start; margin-top: 4px; }
.ti-card-body .grid-2 { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════════════════════════
21. Sidebar-Groups + Hamburger + Mobile-Drawer + Compact Stats
═══════════════════════════════════════════════════════════════════════ */
/* --- Sidebar Groups (Features oben / System unten) -------------------- */
.sidebar-section {
display: flex;
flex-direction: column;
gap: 2px;
}
.sidebar-section-features {
/* Features füllen den oberen Bereich */
flex: 1 1 auto;
}
.sidebar-section-system {
/* System sitzt am unteren Rand der nav, klar abgegrenzt */
flex: 0 0 auto;
}
.sidebar-section-divider {
height: 1px;
background: var(--bs-border);
margin: var(--bs-3) var(--bs-3);
flex-shrink: 0;
}
.sidebar-section-label {
font-size: 10px;
font-weight: var(--bs-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--bs-fg-subtle);
padding: var(--bs-1) var(--bs-3) var(--bs-2);
font-family: var(--bs-font-mono);
}
/* Sidebar-nav muss als Flex-Spalte über volle Höhe gehen, damit Features oben + System unten funktioniert */
.sidebar-nav {
display: flex !important;
flex-direction: column !important;
flex: 1;
min-height: 0;
}
/* --- Hamburger Button (Mobile only) ----------------------------------- */
.bs-hamburger {
display: none;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: transparent;
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-sm);
color: var(--bs-fg-muted);
cursor: pointer;
transition: all var(--bs-transition);
margin-right: var(--bs-2);
flex-shrink: 0;
}
.bs-hamburger:hover { background: var(--bs-bg-subtle); color: var(--bs-fg); }
.bs-hamburger:active { transform: scale(0.95); }
/* --- Sidebar-Backdrop ------------------------------------------------- */
.bs-sidebar-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: calc(var(--bs-z-sidebar) + 1);
opacity: 0;
pointer-events: none;
transition: opacity 220ms ease;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
/* --- Mobile (≤900px): Sidebar als Slide-in Drawer ─────────────────── */
@media (max-width: 900px) {
/* Hamburger sichtbar */
.bs-hamburger { display: inline-flex; }
/* Layout: TopBar oben + Content darunter (KEIN Bottom-Nav mehr) */
#view-app {
grid-template-columns: 1fr !important;
grid-template-rows: 64px 1fr !important;
grid-template-areas:
"topbar"
"content" !important;
}
/* Sidebar als Drawer: links, full-height, hidden by default */
.sidebar {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: auto !important;
bottom: auto !important;
width: 280px !important;
max-width: 85vw !important;
height: 100vh !important;
padding: var(--bs-4) !important;
flex-direction: column !important;
gap: var(--bs-2) !important;
background: var(--bs-bg-elevated) !important;
border-right: 1px solid var(--bs-border) !important;
border-top: 0 !important;
box-shadow: 8px 0 32px rgba(0, 0, 0, 0.18);
transform: translateX(-100%);
transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
z-index: calc(var(--bs-z-sidebar) + 2) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
/* Sidebar-Inhalte wieder sichtbar machen (Override des old bottom-nav-CSS) */
.sidebar-logo { display: flex !important; padding: 0 var(--bs-2) var(--bs-3) !important; }
.sidebar-footer { display: block !important; }
.sidebar-section-label { display: block !important; }
.sidebar-nav { flex-direction: column !important; gap: 2px !important; width: auto !important; padding-bottom: var(--bs-3) !important; }
.tab-btn { flex-direction: row !important; gap: var(--bs-3) !important; font-size: var(--bs-text-base) !important; padding: 10px 12px !important; justify-content: flex-start !important; }
.tab-btn svg { width: 18px !important; height: 18px !important; }
/* Geöffnet via body-Klasse */
body.sidebar-open .sidebar { transform: translateX(0); }
body.sidebar-open .bs-sidebar-backdrop {
display: block;
opacity: 1;
pointer-events: auto;
}
/* Content-Padding ohne bottom-nav-Buffer */
.content { padding: var(--bs-4) !important; }
}
/* --- Compact Stat-Cards auf Mobile ------------------------------------ */
@media (max-width: 700px) {
.stats-row {
grid-template-columns: repeat(2, 1fr) !important;
gap: var(--bs-2) !important;
margin-bottom: var(--bs-4) !important;
}
.stat-card {
flex-direction: row !important;
align-items: center !important;
gap: var(--bs-2) !important;
padding: var(--bs-3) !important;
border-radius: var(--bs-r) !important;
}
.stat-card::before { display: none; }
.stat-card .stat-icon {
width: 32px !important;
height: 32px !important;
flex-shrink: 0;
}
.stat-card .stat-icon svg { width: 16px !important; height: 16px !important; }
.stat-card .stat-value {
font-size: 18px !important;
line-height: 1 !important;
}
.stat-card .stat-label {
font-size: 9px !important;
letter-spacing: 0.04em !important;
margin-top: 2px !important;
}
/* KI-Attendant KPI-Cards */
.att-kpi-row {
grid-template-columns: repeat(2, 1fr) !important;
gap: var(--bs-2) !important;
}
.att-kpi {
padding: var(--bs-3) !important;
gap: var(--bs-2) !important;
}
.att-kpi-icon {
width: 32px !important;
height: 32px !important;
}
.att-kpi-icon svg { width: 14px !important; height: 14px !important; }
.att-kpi-value { font-size: 18px !important; }
.att-kpi-label { font-size: 9px !important; letter-spacing: 0.04em !important; }
}
/* --- Mobile XS (≤460px): nur 1 Spalte für Stats falls zu eng ---------- */
@media (max-width: 460px) {
.stats-row { grid-template-columns: 1fr !important; }
/* KI-Attendant trotzdem 2 Spalten — KPIs sind kompakter */
.att-kpi-row { grid-template-columns: repeat(2, 1fr) !important; }
}
/* ═══════════════════════════════════════════════════════════════════════
22. Tenant-Portal: Compliance-Settings ausblenden
Voicemail-Retention wird ausschließlich im Platform-Admin verwaltet,
damit Kunden nicht selbst an DSGVO-Aufbewahrungsfristen rumspielen können.
Voicemail-Claude besitzt diese DOM-Knoten weiterhin — wir verstecken sie
nur visuell (kein JS-Touch, kein Domain-Eingriff).
═══════════════════════════════════════════════════════════════════════ */
#btn-vm-retention,
#dialog-retention {
display: none !important;
}
/* ─── Retention-Card im Platform-Admin Integrationen-Tab ──────────────── */
.ti-card-danger {
border-color: var(--bs-warning-soft);
}
.ti-card-danger .ti-card-head {
background: rgba(245, 158, 11, 0.08);
}
.ti-icon-retention {
background: var(--bs-warning-soft);
}
.ti-key-badge-warn {
background: var(--bs-warning-soft);
color: var(--bs-warning);
}
.ti-retention-options {
display: flex;
flex-direction: column;
gap: 8px;
}
.ti-retention-opt {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 14px;
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-sm);
cursor: pointer;
transition: all var(--bs-transition);
}
.ti-retention-opt:hover {
border-color: var(--bs-primary-soft);
}
.ti-retention-opt input[type="radio"] {
margin: 4px 0 0;
flex-shrink: 0;
accent-color: var(--bs-primary);
}
.ti-retention-opt input[type="radio"]:checked ~ div .ti-ret-title {
color: var(--bs-primary);
font-weight: var(--bs-weight-semibold);
}
.ti-retention-opt:has(input:checked) {
border-color: var(--bs-primary);
background: var(--bs-primary-soft);
}
.ti-ret-title {
font-weight: var(--bs-weight-medium);
color: var(--bs-fg);
font-size: var(--bs-text-base);
}
.ti-ret-sub {
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
margin-top: 2px;
line-height: 1.4;
}
.ti-ret-sub code {
font-family: var(--bs-font-mono);
font-size: 0.92em;
background: var(--bs-bg-subtle);
padding: 1px 6px;
border-radius: 4px;
color: var(--bs-fg);
}
.ti-ret-custom {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
}
.ti-ret-unit {
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
font-family: var(--bs-font-mono);
}
/* ─── Bundle-Toggle-Cards (Phase 16, im Tenant-Edit-Dialog Sub-Tab "Pakete") ─── */
.bundle-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: var(--bs-3);
}
.bundle-card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--bs-3);
padding: var(--bs-5);
background: var(--bs-bg-elevated);
border: 1.5px solid var(--bs-border);
border-radius: var(--bs-r-lg);
cursor: pointer;
transition: all var(--bs-transition);
}
.bundle-card:hover { border-color: var(--bs-primary-soft); }
.bundle-card.bundle-active {
border-color: var(--bs-primary);
background: var(--bs-primary-soft);
}
.bundle-card-head {
display: flex;
align-items: flex-start;
gap: var(--bs-3);
}
.bundle-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: var(--bs-r);
background: var(--bs-bg-subtle);
color: var(--bs-fg-muted);
font-size: 18px;
flex-shrink: 0;
}
.bundle-card.bundle-active .bundle-card-icon {
background: linear-gradient(135deg, var(--bs-primary), var(--bs-accent));
color: #ffffff;
}
.bundle-card-title-wrap { flex: 1; min-width: 0; }
.bundle-card-title {
font-family: var(--bs-font-display);
font-size: var(--bs-text-md);
font-weight: var(--bs-weight-bold);
letter-spacing: -0.02em;
color: var(--bs-fg);
line-height: 1.2;
}
.bundle-card.bundle-active .bundle-card-title { color: var(--bs-primary); }
.bundle-card-key {
font-size: 10px;
font-family: var(--bs-font-mono);
color: var(--bs-fg-subtle);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-top: 2px;
}
.bundle-card-toggle {
flex-shrink: 0;
margin-top: 2px;
}
.bundle-card-desc {
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
line-height: 1.5;
}
.bundle-card-unlocks {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding-top: var(--bs-2);
border-top: 1px solid var(--bs-border);
}
.bundle-card.bundle-active .bundle-card-unlocks {
border-top-color: rgba(30,41,59, 0.2);
}
.bundle-unlock-chip {
display: inline-flex;
align-items: center;
padding: 3px 8px;
background: var(--bs-bg-subtle);
color: var(--bs-fg-muted);
font-size: 10px;
border-radius: var(--bs-r-full);
font-family: var(--bs-font-mono);
letter-spacing: 0.04em;
}
.bundle-card.bundle-active .bundle-unlock-chip {
background: rgba(255, 255, 255, 0.4);
color: var(--bs-primary);
}
[data-theme="dark"] .bundle-card.bundle-active .bundle-unlock-chip {
background: rgba(30,41,59, 0.18);
}
/* ─── Per-User-Feature-Access (Tenant-Portal Benutzer-Dialog Features-Tab) ─── */
.tu-bundle-list {
display: flex;
flex-direction: column;
gap: var(--bs-3);
}
.tu-bundle-card {
background: var(--bs-bg-elevated);
border: 1.5px solid var(--bs-border);
border-radius: var(--bs-r-lg);
overflow: hidden;
transition: all var(--bs-transition);
}
.tu-bundle-card.tu-bundle-active {
border-color: var(--bs-primary);
background: var(--bs-primary-soft);
}
.tu-bundle-card.tu-bundle-disabled {
opacity: 0.5;
pointer-events: none;
}
.tu-bundle-head {
display: flex;
align-items: center;
gap: var(--bs-3);
padding: var(--bs-4) var(--bs-5);
border-bottom: 1px solid var(--bs-border);
}
.tu-bundle-card.tu-bundle-active .tu-bundle-head {
border-bottom-color: rgba(30,41,59, 0.2);
}
.tu-bundle-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--bs-r);
background: var(--bs-bg-subtle);
color: var(--bs-fg-muted);
flex-shrink: 0;
}
.tu-bundle-card.tu-bundle-active .tu-bundle-icon {
background: linear-gradient(135deg, var(--bs-primary), var(--bs-accent));
color: #ffffff;
}
.tu-bundle-title-wrap { flex: 1; min-width: 0; }
.tu-bundle-title {
font-family: var(--bs-font-display);
font-size: var(--bs-text-md);
font-weight: var(--bs-weight-bold);
letter-spacing: -0.02em;
color: var(--bs-fg);
}
.tu-bundle-card.tu-bundle-active .tu-bundle-title { color: var(--bs-primary); }
.tu-bundle-desc {
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
margin-top: 2px;
line-height: 1.4;
}
.tu-bundle-toggle { flex-shrink: 0; }
.tu-bundle-features {
display: flex;
flex-direction: column;
padding: 4px var(--bs-3);
}
.tu-feat-row {
display: flex;
align-items: flex-start;
gap: var(--bs-3);
padding: 10px 12px;
border-radius: var(--bs-r-sm);
cursor: pointer;
transition: background var(--bs-transition);
}
.tu-feat-row:hover {
background: var(--bs-bg-subtle);
}
[data-theme="dark"] .tu-feat-row:hover {
background: rgba(255, 255, 255, 0.04);
}
.tu-feat-row input[type="checkbox"] {
margin: 2px 0 0;
flex-shrink: 0;
accent-color: var(--bs-primary);
}
.tu-feat-row.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.tu-feat-text { flex: 1; min-width: 0; }
.tu-feat-title {
font-size: var(--bs-text-base);
font-weight: var(--bs-weight-medium);
color: var(--bs-fg);
line-height: 1.3;
}
.tu-feat-key {
font-size: 11px;
color: var(--bs-fg-subtle);
font-family: var(--bs-font-mono);
margin-top: 2px;
letter-spacing: 0.02em;
}
.tu-bundle-orphan {
border-color: var(--bs-warning-soft);
}
.tu-bundle-orphan .tu-bundle-head {
background: rgba(245, 158, 11, 0.06);
}
/* ─── Ansage-Card: Zugewiesen-Banner mit Banner-Head + Chips-Row ──────── */
/* Struktur (von Ansagen-Claude):
.ann-card-assigned-banner
.banner-head (Pulse-Dot + Title + Sub + Refresh-Icon)
.assign-chips (Chip-Liste + "+" Button)
*/
.ann-card-assigned-banner {
display: block;
padding: 12px 14px;
border-radius: var(--bs-r);
background: var(--bs-bg-subtle);
border: 1px solid var(--bs-border);
}
.ann-card-assigned-banner.is-live {
background: rgba(16, 185, 129, 0.10);
border-color: rgba(16, 185, 129, 0.25);
}
.ann-card-assigned-banner.is-linked {
background: var(--bs-primary-soft);
border-color: rgba(30,41,59, 0.20);
}
[data-theme="dark"] .ann-card-assigned-banner.is-live {
background: rgba(16, 185, 129, 0.15);
border-color: rgba(16, 185, 129, 0.3);
}
/* Banner-Head: kompakte Single-Line-Row */
.ann-card-assigned-banner .banner-head {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.ann-card-assigned-banner .banner-pulse {
flex-shrink: 0;
display: inline-flex;
align-items: center;
}
.ann-card-assigned-banner .banner-text {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
gap: 1px;
}
.ann-card-assigned-banner .banner-text strong {
font-weight: var(--bs-weight-semibold);
font-size: var(--bs-text-base);
letter-spacing: -0.01em;
line-height: 1.15;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ann-card-assigned-banner.is-live .banner-text strong { color: var(--bs-success); }
.ann-card-assigned-banner.is-linked .banner-text strong { color: var(--bs-primary); }
.ann-card-assigned-banner .banner-sub {
font-size: 11px;
color: var(--bs-fg-muted);
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ann-card-assigned-banner .live-sync-hint {
flex-shrink: 0;
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--bs-bg-elevated);
color: var(--bs-fg-subtle);
border: 1px solid var(--bs-border);
transition: color var(--bs-transition);
}
.ann-card-assigned-banner.is-live .live-sync-hint { color: var(--bs-success); border-color: rgba(16,185,129,0.3); }
.ann-card-assigned-banner .live-sync-hint svg { width: 12px; height: 12px; }
/* Chip-Row im Banner — verkleinerte Optik, kein Truncate */
.ann-card-assigned-banner .assign-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
margin-top: 10px !important;
padding-top: 10px !important;
border-top: 1px dashed var(--bs-border) !important;
}
.ann-card-assigned-banner.is-live .assign-chips { border-top-color: rgba(16,185,129,0.25) !important; }
.ann-card-assigned-banner.is-linked .assign-chips { border-top-color: rgba(30,41,59,0.20) !important; }
/* Chip im Banner: solid weiss + ohne aggressive max-width */
.ann-card-assigned-banner .chip {
background: var(--bs-bg-elevated);
border-color: var(--bs-border);
}
.ann-card-assigned-banner .chip .chip-name {
max-width: 200px;
}
/* "+ Weiteres Modul" Mini-Button im Banner — klein, dezent */
.ann-card-assigned-banner .assign-add-btn {
width: 26px !important;
height: 26px !important;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--bs-bg-elevated);
border: 1px dashed var(--bs-border);
border-radius: 999px;
color: var(--bs-fg-muted);
cursor: pointer;
transition: all var(--bs-transition);
flex-shrink: 0;
}
.ann-card-assigned-banner .assign-add-btn:hover {
background: var(--bs-primary-soft);
border-color: var(--bs-primary);
border-style: solid;
color: var(--bs-primary);
}
.ann-card-assigned-banner .assign-add-btn svg,
.ann-card-assigned-banner .assign-add-btn i { width: 12px; height: 12px; }
/* Legacy-Klasse (frühere Implementierung — falls noch irgendwo gerendert) */
.assign-add-more {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: transparent;
border: 1px dashed var(--bs-border);
border-radius: var(--bs-r-sm);
color: var(--bs-fg-muted);
font-size: 12px;
font-weight: var(--bs-weight-medium);
cursor: pointer;
transition: all var(--bs-transition);
align-self: flex-start;
}
.assign-add-more:hover {
background: var(--bs-primary-soft);
border-color: var(--bs-primary);
border-style: solid;
color: var(--bs-primary);
}
.assign-add-more svg { width: 12px; height: 12px; }
/* ─── Module-Tab: 3-Sektionen-Layout (KI-Attendant / Voicemail / Ansagen) ─── */
.modules-sections {
display: flex;
flex-direction: column;
gap: var(--bs-6);
}
.modsec {
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-xl);
overflow: hidden;
}
.modsec-head {
display: flex;
align-items: center;
gap: var(--bs-4);
padding: var(--bs-5) var(--bs-6);
background: var(--bs-bg-subtle);
border-bottom: 1px solid var(--bs-border);
}
.modsec-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: var(--bs-r-lg);
flex-shrink: 0;
}
.modsec-icon-bot {
background: var(--bs-mod-attendant);
color: #ffffff;
box-shadow: 0 4px 16px rgba(16,185,129, 0.25);
}
.modsec-icon-vm {
background: rgba(16, 185, 129, 0.14);
color: #10b981;
}
.modsec-icon-ann {
background: var(--bs-primary-soft);
color: var(--bs-primary);
}
.modsec-title-wrap {
flex: 1;
min-width: 0;
}
.modsec-title-wrap h2 {
font-family: var(--bs-font-display);
font-size: var(--bs-text-lg);
font-weight: var(--bs-weight-bold);
letter-spacing: -0.025em;
color: var(--bs-fg);
margin: 0;
line-height: 1.2;
}
.modsec-title-wrap p {
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
margin: 4px 0 0;
line-height: 1.4;
}
.modsec-actions {
display: flex;
align-items: center;
gap: var(--bs-2);
flex-shrink: 0;
flex-wrap: wrap;
justify-content: flex-end;
}
.modsec-status:empty { display: none; }
.modsec-body {
padding: var(--bs-5) var(--bs-6);
}
.modsec-body .voicemail-list {
margin: 0;
}
/* AI-Attendant Auto-Placeholder-Card */
.modsec-att-card {
display: flex;
align-items: center;
gap: var(--bs-4);
padding: var(--bs-4) var(--bs-5);
background: linear-gradient(135deg, var(--bs-primary-soft), var(--bs-accent-soft));
border: 1px solid rgba(30,41,59, 0.2);
border-radius: var(--bs-r-lg);
}
[data-theme="dark"] .modsec-att-card {
background: linear-gradient(135deg, rgba(30,41,59,0.12), rgba(16,185,129,0.10));
border-color: rgba(30,41,59, 0.3);
}
.modsec-att-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: var(--bs-r-lg);
background: var(--bs-mod-attendant);
color: #ffffff;
flex-shrink: 0;
box-shadow: 0 6px 20px rgba(16,185,129, 0.30);
}
.modsec-att-body {
flex: 1;
min-width: 0;
}
.modsec-att-title {
font-family: var(--bs-font-display);
font-size: var(--bs-text-md);
font-weight: var(--bs-weight-semibold);
letter-spacing: -0.02em;
color: var(--bs-fg);
line-height: 1.2;
}
.modsec-att-sub {
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
margin-top: 4px;
line-height: 1.5;
}
.modsec-att-sub strong { color: var(--bs-primary); }
.modsec-att-mono {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
flex-shrink: 0;
}
/* Setup-Help (collapsible) */
.modsec-help {
margin-top: var(--bs-4);
padding: var(--bs-3) var(--bs-4);
background: var(--bs-bg-subtle);
border-radius: var(--bs-r-sm);
font-size: var(--bs-text-sm);
}
.modsec-help summary {
cursor: pointer;
font-weight: var(--bs-weight-medium);
color: var(--bs-fg-muted);
padding: 4px 0;
user-select: none;
}
.modsec-help summary:hover { color: var(--bs-primary); }
.modsec-help ol {
margin: 12px 0 4px 20px;
padding: 0;
color: var(--bs-fg-muted);
line-height: 1.7;
}
.modsec-help code {
font-family: var(--bs-font-mono);
font-size: 0.92em;
background: var(--bs-bg-elevated);
padding: 1px 6px;
border-radius: 4px;
color: var(--bs-fg);
}
@media (max-width: 700px) {
.modsec-head { flex-wrap: wrap; }
.modsec-actions { width: 100%; justify-content: flex-start; }
.modsec-att-card { flex-wrap: wrap; }
.modsec-att-mono { flex-direction: row; width: 100%; }
}
/* Slot-Item Badges (statt 📬/🔊/⚠ Emojis — Lucide-Icons mit Farb-Token-Mapping) */
.modsec-badge-icon {
display: inline-flex;
align-items: center;
vertical-align: -1px;
margin-right: 3px;
}
.modsec-badge-icon svg { width: 12px; height: 12px; stroke-width: 2.2; }
.modsec-badge-vm { background: rgba(16,185,129,0.10); color: var(--bs-success); }
.modsec-badge-routing { background: var(--bs-primary-soft); color: var(--bs-primary); }
.modsec-badge-warn { background: var(--bs-warning-soft); color: var(--bs-warning); }
/* Type-Badge (VM-Sync / Routing) — kleiner Tag oberhalb des Slot-Namens */
.modsec-type-badge {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 2px 6px;
border-radius: 4px;
margin-right: 6px;
font-weight: 600;
}
.modsec-type-vm { color: var(--bs-success); background: rgba(16,185,129,0.12); }
.modsec-type-routing { color: var(--bs-primary); background: var(--bs-primary-soft); }
/* Pill-Icon-Wrapper (z.B. ✓ Aktiv → check-circle Aktiv) */
.bs-pill-icon {
display: inline-flex;
align-items: center;
vertical-align: -1px;
margin-right: 2px;
}
.bs-pill-icon svg { width: 12px; height: 12px; stroke-width: 2.2; }
/* ═══════════════════════════════════════════════════════════════════════
ANN-CARD v3 — High-end SaaS Redesign (2026-04-26)
Ersetzt V2 komplett. Höhere Spezifität via #announcement-list.
Designprinzipien: viel breathing room, klare Hierarchie, Custom-Audio,
Single-Line-Banner mit klarer Trennung Status / Chips.
═══════════════════════════════════════════════════════════════════════ */
#announcement-list.announcement-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
grid-auto-rows: 1fr;
gap: var(--bs-5);
}
@media (max-width: 1500px) {
#announcement-list.announcement-grid { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
}
@media (max-width: 700px) {
#announcement-list.announcement-grid { grid-template-columns: 1fr; gap: var(--bs-3); }
}
/* ═ Card-Container ═══════════════════════════════════════════════════ */
#announcement-list .ann-card {
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-xl);
padding: var(--bs-6);
display: flex;
flex-direction: column;
gap: var(--bs-4);
transition: all var(--bs-transition-slow);
position: relative;
overflow: hidden;
}
#announcement-list .ann-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, transparent);
transition: background var(--bs-transition);
z-index: 1;
}
#announcement-list .ann-card:hover {
border-color: var(--bs-border-hover);
box-shadow: 0 12px 32px -16px rgba(15, 23, 42, 0.16);
transform: translateY(-2px);
}
#announcement-list .ann-card:hover::before {
background: linear-gradient(90deg, var(--bs-primary), var(--bs-accent));
}
[data-theme="dark"] #announcement-list .ann-card:hover {
box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.5);
}
/* ═ Header — Title + Status-Pill + Delete ═══════════════════════════ */
#announcement-list .ann-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--bs-3);
margin: 0;
}
#announcement-list .ann-card-status {
display: flex;
align-items: center;
gap: var(--bs-2);
min-width: 0;
flex: 1;
}
#announcement-list .ann-card h4 {
font-family: var(--bs-font-display);
font-size: var(--bs-text-md);
font-weight: var(--bs-weight-bold);
letter-spacing: -0.025em;
color: var(--bs-fg);
line-height: 1.2;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
}
/* Status-Pill statt nur Dot — viel klarer */
#announcement-list .ann-card-status .status-dot {
display: inline-flex;
align-items: center;
gap: 5px;
width: auto;
height: 22px;
padding: 0 9px;
border-radius: var(--bs-r-full);
font-size: 10px;
font-weight: var(--bs-weight-semibold);
letter-spacing: 0.06em;
text-transform: uppercase;
position: relative;
flex-shrink: 0;
font-family: var(--bs-font-mono);
background: transparent;
}
#announcement-list .ann-card-status .status-dot::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
#announcement-list .ann-card-status .status-dot.s-ready {
background: var(--bs-success-soft);
color: var(--bs-success);
}
#announcement-list .ann-card-status .status-dot.s-ready::after { content: "Bereit"; }
#announcement-list .ann-card-status .status-dot.s-pending {
background: var(--bs-warning-soft);
color: var(--bs-warning);
animation: ann-pulse-soft 1.6s ease-in-out infinite;
}
#announcement-list .ann-card-status .status-dot.s-pending::after { content: "Wird erstellt"; }
#announcement-list .ann-card-status .status-dot.s-error {
background: var(--bs-danger-soft);
color: var(--bs-danger);
}
#announcement-list .ann-card-status .status-dot.s-error::after { content: "Fehler"; }
@keyframes ann-pulse-soft { 0%,100% { opacity: 1; } 50% { opacity: 0.65; } }
#announcement-list .ann-card-delete {
width: 32px;
height: 32px;
padding: 0;
border: 1px solid transparent;
background: transparent;
color: var(--bs-fg-subtle);
border-radius: var(--bs-r-sm);
cursor: pointer;
transition: all var(--bs-transition);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
opacity: 0.5;
}
#announcement-list .ann-card:hover .ann-card-delete { opacity: 1; }
#announcement-list .ann-card-delete:hover {
border-color: var(--bs-danger-soft);
color: var(--bs-danger);
background: var(--bs-danger-soft);
}
#announcement-list .ann-card-delete svg { width: 16px; height: 16px; stroke-width: 2; }
/* ═ Voice — Mono-Tag-Pill ═══════════════════════════════════════════ */
#announcement-list .ann-card-voice {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--bs-fg-muted);
font-size: 11px;
font-weight: var(--bs-weight-semibold);
font-family: var(--bs-font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 10px;
background: var(--bs-bg-subtle);
border-radius: var(--bs-r-full);
align-self: flex-start;
max-width: 100%;
border: 1px solid var(--bs-border);
}
#announcement-list .ann-card-voice svg,
#announcement-list .ann-card-voice i {
width: 11px; height: 11px;
flex-shrink: 0;
color: var(--bs-primary);
}
#announcement-list .ann-card-voice span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ═ Quote-Text ═══════════════════════════════════════════════════════ */
#announcement-list .ann-card-text {
margin: 0;
padding: var(--bs-3) var(--bs-4);
background: var(--bs-bg-subtle);
border-radius: var(--bs-r);
border-left: 3px solid var(--bs-primary);
color: var(--bs-fg);
font-size: var(--bs-text-base);
line-height: 1.55;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
cursor: pointer;
transition: all var(--bs-transition);
font-style: italic;
position: relative;
}
#announcement-list .ann-card-text::before {
content: "“";
position: absolute;
left: 8px;
top: -2px;
font-size: 36px;
color: var(--bs-primary);
opacity: 0.18;
font-family: Georgia, serif;
pointer-events: none;
line-height: 1;
}
#announcement-list .ann-card-text:hover {
background: var(--bs-primary-soft);
border-left-color: var(--bs-primary-hover);
}
/* ═ Audio-Player — Native getuned (best effort) ═════════════════════ */
#announcement-list .ann-card-audio {
width: 100%;
height: 38px;
border-radius: var(--bs-r-sm);
background: var(--bs-bg-subtle);
margin: 0;
}
#announcement-list .ann-card-audio::-webkit-media-controls-enclosure {
border-radius: var(--bs-r-sm);
background: var(--bs-bg-subtle);
}
#announcement-list .ann-card-audio::-webkit-media-controls-panel {
background: var(--bs-bg-subtle);
}
[data-theme="dark"] #announcement-list .ann-card-audio { filter: invert(0.85) hue-rotate(180deg); }
#announcement-list .ann-card-status-msg {
padding: var(--bs-3) var(--bs-4);
background: var(--bs-bg-subtle);
border-radius: var(--bs-r-sm);
color: var(--bs-fg-muted);
font-size: var(--bs-text-sm);
font-style: italic;
text-align: center;
}
/* ═ Divider — visueller Schnitt ═════════════════════════════════════ */
#announcement-list .ann-card-divider {
height: 1px;
background: var(--bs-border);
margin: var(--bs-2) calc(var(--bs-6) * -1);
}
/* ═ Empty-State (noch nicht zugewiesen) ══════════════════════════════ */
#announcement-list .ann-card-assign-empty,
#announcement-list .ann-card-assign {
margin-top: auto;
display: flex;
flex-direction: column;
gap: var(--bs-3);
}
#announcement-list .ann-card-assign-hint {
margin: 0;
color: var(--bs-fg-subtle);
font-size: var(--bs-text-sm);
text-align: center;
font-style: italic;
}
#announcement-list .assign-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 12px 16px;
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-sm);
background: var(--bs-bg-elevated);
color: var(--bs-fg);
font-family: inherit;
font-size: var(--bs-text-base);
font-weight: var(--bs-weight-semibold);
cursor: pointer;
transition: all var(--bs-transition);
box-shadow: none;
}
#announcement-list .assign-cta:hover {
background: var(--bs-primary);
color: var(--bs-primary-fg);
border-color: var(--bs-primary);
transform: none;
box-shadow: 0 8px 20px -8px rgba(30,41,59, 0.55);
}
#announcement-list .assign-cta svg,
#announcement-list .assign-cta i {
width: 15px; height: 15px;
stroke-width: 2.2;
}
/* ═ Assigned-Banner — DAS HERZSTÜCK ═════════════════════════════════ */
#announcement-list .ann-card-assigned-banner {
display: flex;
flex-direction: column;
gap: var(--bs-3);
padding: var(--bs-4);
border-radius: var(--bs-r);
background: var(--bs-bg-subtle);
border: 1px solid var(--bs-border);
}
#announcement-list .ann-card-assigned-banner.is-live {
background: rgba(16, 185, 129, 0.08);
border-color: rgba(16, 185, 129, 0.3);
}
#announcement-list .ann-card-assigned-banner.is-linked {
background: var(--bs-primary-soft);
border-color: rgba(30,41,59, 0.25);
}
[data-theme="dark"] #announcement-list .ann-card-assigned-banner.is-live {
background: rgba(16, 185, 129, 0.14);
border-color: rgba(16, 185, 129, 0.35);
}
/* Banner-Head: 1 Row mit Pulse + Texte + Refresh-Icon */
#announcement-list .ann-card-assigned-banner .banner-head {
display: flex;
align-items: center;
gap: var(--bs-3);
min-width: 0;
}
#announcement-list .ann-card-assigned-banner .banner-pulse {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
flex-shrink: 0;
}
#announcement-list .ann-card-assigned-banner.is-live .banner-pulse {
border-color: rgba(16, 185, 129, 0.4);
background: rgba(16, 185, 129, 0.08);
}
#announcement-list .ann-card-assigned-banner.is-linked .banner-pulse {
border-color: rgba(30,41,59, 0.3);
background: var(--bs-bg-elevated);
}
#announcement-list .ann-card-assigned-banner .live-pulse {
width: 8px;
height: 8px;
border-radius: 50%;
}
#announcement-list .ann-card-assigned-banner .live-pulse.active {
background: var(--bs-success);
box-shadow: 0 0 0 0 rgba(16,185,129,0.5);
animation: ann-live-pulse 2s ease-out infinite;
}
#announcement-list .ann-card-assigned-banner .live-pulse.idle {
background: var(--bs-primary);
opacity: 0.65;
}
@keyframes ann-live-pulse {
0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.6); }
70% { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
#announcement-list .ann-card-assigned-banner .banner-text {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
gap: 2px;
}
#announcement-list .ann-card-assigned-banner .banner-text strong {
font-family: var(--bs-font-display);
font-weight: var(--bs-weight-bold);
font-size: var(--bs-text-base);
letter-spacing: -0.02em;
line-height: 1.15;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#announcement-list .ann-card-assigned-banner.is-live .banner-text strong { color: var(--bs-success); }
#announcement-list .ann-card-assigned-banner.is-linked .banner-text strong { color: var(--bs-primary); }
#announcement-list .ann-card-assigned-banner .banner-sub {
font-size: 11px;
color: var(--bs-fg-muted);
line-height: 1.3;
font-family: var(--bs-font-mono);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#announcement-list .ann-card-assigned-banner .live-sync-hint {
flex-shrink: 0;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--bs-bg-elevated);
color: var(--bs-fg-subtle);
border: 1px solid var(--bs-border);
}
#announcement-list .ann-card-assigned-banner.is-live .live-sync-hint {
color: var(--bs-success);
border-color: rgba(16,185,129,0.3);
}
#announcement-list .ann-card-assigned-banner .live-sync-hint svg,
#announcement-list .ann-card-assigned-banner .live-sync-hint i { width: 14px; height: 14px; }
/* Chip-Row im Banner — clean grid mit add-button */
#announcement-list .ann-card-assigned-banner .assign-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
margin-top: 0 !important;
padding-top: var(--bs-3) !important;
padding-bottom: 0;
border-top: 1px dashed var(--bs-border) !important;
}
#announcement-list .ann-card-assigned-banner.is-live .assign-chips { border-top-color: rgba(16,185,129,0.3) !important; }
#announcement-list .ann-card-assigned-banner.is-linked .assign-chips { border-top-color: rgba(30,41,59,0.25) !important; }
#announcement-list .ann-card-assigned-banner .chip {
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-full);
padding: 4px 4px 4px 10px;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--bs-fg);
max-width: 100%;
}
#announcement-list .ann-card-assigned-banner .chip-name {
font-weight: var(--bs-weight-semibold);
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
letter-spacing: -0.01em;
}
#announcement-list .ann-card-assigned-banner .chip-slotid {
font-family: var(--bs-font-mono);
font-size: 9px;
letter-spacing: 0.04em;
color: var(--bs-fg-subtle);
background: var(--bs-bg-subtle);
padding: 2px 6px;
border-radius: var(--bs-r-full);
text-transform: uppercase;
}
#announcement-list .ann-card-assigned-banner .chip-status {
font-size: 9px;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: var(--bs-weight-semibold);
padding: 2px 7px;
border-radius: var(--bs-r-full);
font-family: var(--bs-font-mono);
}
#announcement-list .ann-card-assigned-banner .chip-status.fresh {
background: rgba(16, 185, 129, 0.15);
color: var(--bs-success);
}
#announcement-list .ann-card-assigned-banner .chip-status.stale {
background: var(--bs-warning-soft);
color: var(--bs-warning);
}
#announcement-list .ann-card-assigned-banner .chip-status.none {
background: var(--bs-bg-subtle);
color: var(--bs-fg-subtle);
}
#announcement-list .ann-card-assigned-banner .chip-x {
border: 0;
background: transparent;
color: var(--bs-fg-subtle);
width: 22px;
height: 22px;
border-radius: 50%;
cursor: pointer;
font-size: 13px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--bs-transition);
padding: 0;
flex-shrink: 0;
}
#announcement-list .ann-card-assigned-banner .chip-x:hover {
background: var(--bs-danger);
color: var(--bs-primary-fg);
}
/* "+ Modul"-Add-Button im Banner — kompakt 28×28 */
#announcement-list .ann-card-assigned-banner .assign-add-btn {
width: 28px !important;
height: 28px !important;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--bs-bg-elevated);
border: 1px dashed var(--bs-border);
border-radius: 999px;
color: var(--bs-fg-subtle);
cursor: pointer;
transition: all var(--bs-transition);
flex-shrink: 0;
}
#announcement-list .ann-card-assigned-banner .assign-add-btn:hover {
background: var(--bs-primary);
border-color: var(--bs-primary);
border-style: solid;
color: var(--bs-primary-fg);
transform: scale(1.08);
}
#announcement-list .ann-card-assigned-banner .assign-add-btn svg,
#announcement-list .ann-card-assigned-banner .assign-add-btn i { width: 13px; height: 13px; }
/* ═ Page-Header (Ansagen-Tab Title) ═════════════════════════════════ */
#tab-announcements .page-header {
align-items: center;
margin-bottom: var(--bs-6);
padding-bottom: var(--bs-5);
border-bottom: 1px solid var(--bs-border);
}
#tab-announcements .page-header h1 {
font-family: var(--bs-font-display);
letter-spacing: -0.04em;
}
/* ═══════════════════════════════════════════════════════════════════════
Partner-SMTP-Editor (Phase Email-System 2026-04-27)
═══════════════════════════════════════════════════════════════════════ */
.psm-list { display: flex; flex-direction: column; gap: var(--bs-2); }
.psm-card {
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-lg);
padding: var(--bs-4);
display: flex;
flex-direction: column;
gap: var(--bs-3);
transition: border-color var(--bs-transition);
}
.psm-card:hover { border-color: var(--bs-primary-soft); }
.psm-card-off { opacity: 0.55; }
.psm-card-head { display: flex; align-items: center; gap: var(--bs-3); }
.psm-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
background: var(--bs-primary-soft);
color: var(--bs-primary);
border-radius: var(--bs-r);
flex-shrink: 0;
}
.psm-card-title-wrap { flex: 1; min-width: 0; }
.psm-card-purpose {
font-family: var(--bs-font-display);
font-weight: var(--bs-weight-bold);
font-size: var(--bs-text-base);
letter-spacing: -0.02em;
color: var(--bs-fg);
line-height: 1.2;
}
.psm-card-host {
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
margin-top: 2px;
font-family: var(--bs-font-mono);
}
.psm-port { color: var(--bs-fg-subtle); }
.psm-tls {
display: inline-block;
background: var(--bs-success-soft);
color: var(--bs-success);
font-size: 9px;
font-weight: var(--bs-weight-bold);
letter-spacing: 0.08em;
padding: 1px 6px;
border-radius: var(--bs-r-full);
margin-left: 6px;
}
.psm-state {
font-family: var(--bs-font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: var(--bs-weight-semibold);
padding: 3px 9px;
border-radius: var(--bs-r-full);
flex-shrink: 0;
}
.psm-state-on { background: var(--bs-success-soft); color: var(--bs-success); }
.psm-state-off { background: var(--bs-bg-subtle); color: var(--bs-fg-subtle); }
.psm-card-body {
display: flex;
flex-direction: column;
gap: 6px;
padding-top: var(--bs-3);
border-top: 1px solid var(--bs-border);
}
.psm-meta {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
}
.psm-card-actions {
display: flex;
gap: 6px;
justify-content: flex-end;
flex-wrap: wrap;
}
.psm-edit-wrap {
background: var(--bs-bg-subtle);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-lg);
padding: 0;
overflow: hidden;
}
.psm-edit-summary {
cursor: pointer;
padding: var(--bs-4) var(--bs-5);
font-weight: var(--bs-weight-semibold);
color: var(--bs-fg);
user-select: none;
list-style: none;
}
.psm-edit-summary::-webkit-details-marker { display: none; }
.psm-edit-summary:hover { color: var(--bs-primary); }
.psm-edit-wrap[open] .psm-edit-summary { border-bottom: 1px solid var(--bs-border); }
.psm-form {
padding: var(--bs-5);
display: flex;
flex-direction: column;
gap: var(--bs-3);
background: var(--bs-bg-elevated);
}
/* Email-Versand-Card im Tenant-Settings */
.tenant-email-card .te-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
background: var(--bs-primary-soft);
border-radius: var(--bs-r);
font-size: 18px;
flex-shrink: 0;
}
.te-mode-options {
display: flex;
flex-direction: column;
gap: 8px;
}
.te-mode-opt {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 14px;
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-sm);
cursor: pointer;
transition: all var(--bs-transition);
}
.te-mode-opt:hover { border-color: var(--bs-primary-soft); }
.te-mode-opt input[type="radio"] {
margin: 4px 0 0;
flex-shrink: 0;
accent-color: var(--bs-primary);
}
.te-mode-opt:has(input:checked) {
border-color: var(--bs-primary);
background: var(--bs-primary-soft);
}
.te-opt-title {
font-weight: var(--bs-weight-semibold);
color: var(--bs-fg);
font-size: var(--bs-text-base);
}
.te-mode-opt:has(input:checked) .te-opt-title { color: var(--bs-primary); }
.te-opt-sub {
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
margin-top: 2px;
line-height: 1.4;
}
/* Email-Card-Icon im Platform-Admin Integrationen-Tab */
.ti-icon-email { background: var(--bs-primary-soft); }
/* ═══════════════════════════════════════════════════════════════════════
KI-Attendant Tab 6: Postfach (Workflow-Tickets)
═══════════════════════════════════════════════════════════════════════ */
.att-msg-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--bs-3);
margin-bottom: var(--bs-4);
}
.att-msg-stat {
padding: var(--bs-4);
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-lg);
display: flex;
flex-direction: column;
gap: 4px;
}
.att-msg-stat-value {
font-family: var(--bs-font-display);
font-size: 28px;
font-weight: var(--bs-weight-bold);
letter-spacing: -0.03em;
line-height: 1;
color: var(--bs-fg);
}
.att-msg-stat-label {
font-size: 11px;
font-weight: var(--bs-weight-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bs-fg-muted);
font-family: var(--bs-font-mono);
}
.att-msg-stat-overdue { border-color: var(--bs-warning-soft); }
.att-msg-stat-overdue .att-msg-stat-value { color: var(--bs-warning); }
.att-msg-stat-new { border-color: var(--bs-primary-soft); }
.att-msg-stat-new .att-msg-stat-value { color: var(--bs-primary); }
.att-msg-filters {
display: flex;
gap: var(--bs-2);
margin-bottom: var(--bs-4);
flex-wrap: wrap;
}
.att-msg-filter { max-width: 220px; }
.att-msg-filter[type="search"] { flex: 1; min-width: 200px; max-width: none; }
.att-msg-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.att-msg-row {
display: grid;
grid-template-columns: 4px 1fr auto;
gap: var(--bs-3);
align-items: center;
padding: var(--bs-3) var(--bs-4);
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r);
cursor: pointer;
transition: all var(--bs-transition);
}
.att-msg-row:hover {
border-color: var(--bs-primary-soft);
background: var(--bs-bg-elevated);
transform: translateX(2px);
}
.att-msg-prio {
width: 4px;
height: 100%;
min-height: 40px;
border-radius: 2px;
flex-shrink: 0;
}
.att-msg-prio-urgent { background: var(--bs-danger); }
.att-msg-prio-high { background: var(--bs-warning); }
.att-msg-prio-normal { background: var(--bs-primary); }
.att-msg-prio-low { background: var(--bs-fg-subtle); }
.att-msg-body { min-width: 0; flex: 1; }
.att-msg-head {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 2px;
}
.att-msg-caller {
font-weight: var(--bs-weight-semibold);
font-size: var(--bs-text-base);
color: var(--bs-fg);
}
.att-msg-caller-num {
font-family: var(--bs-font-mono);
font-size: 11px;
color: var(--bs-fg-subtle);
}
.att-msg-cat {
font-size: 9px !important;
}
.att-msg-summary {
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.att-msg-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
flex-shrink: 0;
font-size: 11px;
}
.att-msg-status-pill {
font-family: var(--bs-font-mono);
font-size: 9px;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: var(--bs-weight-semibold);
padding: 3px 9px;
border-radius: var(--bs-r-full);
}
.att-msg-status-pill.att-msg-status-open { background: var(--bs-primary-soft); color: var(--bs-primary); }
.att-msg-status-pill.att-msg-status-in_progress { background: var(--bs-warning-soft); color: var(--bs-warning); }
.att-msg-status-pill.att-msg-status-snoozed { background: var(--bs-bg-subtle); color: var(--bs-fg-muted); }
.att-msg-status-pill.att-msg-status-done { background: var(--bs-success-soft); color: var(--bs-success); }
.att-msg-status-pill.att-msg-status-dropped { background: var(--bs-danger-soft); color: var(--bs-danger); }
.att-msg-due {
color: var(--bs-fg-muted);
font-family: var(--bs-font-mono);
font-size: 10px;
}
.att-msg-due.att-msg-overdue { color: var(--bs-danger); font-weight: var(--bs-weight-semibold); }
.att-msg-time {
color: var(--bs-fg-subtle);
font-family: var(--bs-font-mono);
font-size: 10px;
}
/* ═══════════════════════════════════════════════════════════════════════
Ticket-Detail-Modal (Phase 13f — Linear/Intercom-Pattern)
Hero-Header oben + 2-col Body (Activity left, Properties-Sidebar right)
═══════════════════════════════════════════════════════════════════════ */
.dam-dialog {
display: flex;
flex-direction: column;
max-height: 92vh;
padding: 0;
overflow: hidden;
}
/* Hero-Header */
.dam-hero {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 18px 24px 16px;
border-bottom: 1px solid var(--bs-border);
background: var(--bs-bg-elevated);
flex-shrink: 0;
}
.dam-hero-main {
display: flex;
align-items: flex-start;
gap: 14px;
flex: 1;
min-width: 0;
}
.dam-avatar {
width: 48px;
height: 48px;
flex-shrink: 0;
border-radius: 50%;
background: var(--bs-mod-attendant);
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--bs-font-display);
font-weight: var(--bs-weight-bold);
font-size: 18px;
letter-spacing: -0.02em;
user-select: none;
}
.dam-hero-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.dam-hero-toprow {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.dam-hero-name {
margin: 0;
font-family: var(--bs-font-display);
font-size: 20px;
font-weight: var(--bs-weight-bold);
letter-spacing: -0.025em;
color: var(--bs-fg);
line-height: 1.2;
}
.dam-hero-callerno {
font-size: 11px !important;
}
.dam-hero-callerno:empty,
.dam-hero-callerno[hidden] { display: none; }
/* Status + Priority Pills im Hero */
.dam-hero-pill {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 10px;
font-size: 10px;
font-weight: var(--bs-weight-semibold);
letter-spacing: 0.04em;
font-family: var(--bs-font-mono);
white-space: nowrap;
}
.dam-hero-pill[hidden] { display: none; }
/* Robopult-Status-Palette (Slate-Mono mit Akzenten) */
.dam-hero-status[data-status="open"] { background: var(--bs-primary-soft); color: var(--bs-primary); }
.dam-hero-status[data-status="in-progress"] { background: rgba(245,158,11,0.18); color: #b45309; }
.dam-hero-status[data-status="snoozed"] { background: var(--bs-bg-subtle); color: var(--bs-fg-muted); }
.dam-hero-status[data-status="done"] { background: var(--bs-success-soft); color: var(--bs-success); }
.dam-hero-status[data-status="dropped"] { background: var(--bs-danger-soft); color: var(--bs-danger); }
[data-theme="dark"] .dam-hero-status[data-status="open"] { color: var(--bs-fg); }
.dam-hero-prio[data-prio="urgent"] { background: var(--bs-danger); color: #ffffff; }
.dam-hero-prio[data-prio="high"] { background: rgba(245,158,11,0.18); color: #d97706; }
.dam-hero-prio[data-prio="normal"] { background: var(--bs-bg-subtle); color: var(--bs-fg-muted); }
.dam-hero-prio[data-prio="low"] { background: var(--bs-bg-subtle); color: var(--bs-fg-subtle); }
.dam-hero-summary {
margin: 0;
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.dam-hero-summary[hidden] { display: none; }
.dam-hero-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
font-size: var(--bs-text-xs);
color: var(--bs-fg-subtle);
font-family: var(--bs-font-mono);
letter-spacing: 0.01em;
}
.dam-hero-meta-id { font-weight: var(--bs-weight-medium); }
.dam-hero-meta-cat[hidden] { display: none; }
/* Lucide-tag-Icon vor der Kategorie via inline-SVG (mono-color) */
.dam-hero-meta-cat::before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
margin-right: 4px;
background-color: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
vertical-align: -1px;
opacity: 0.7;
}
.dam-hero-actions {
display: flex;
gap: 8px;
align-items: center;
flex-shrink: 0;
}
.dam-hero-close {
width: 32px !important;
height: 32px !important;
}
/* Action-Bar: alle Aktionen sticky-präsent zwischen Hero und Body */
.dam-actionbar {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 24px;
background: var(--bs-bg-elevated);
border-bottom: 1px solid var(--bs-border);
flex-shrink: 0;
flex-wrap: wrap;
}
/* Anrufen-Button — prominent mit Nummer-Anzeige */
.dam-actionbar-call {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
background: var(--bs-success);
color: #ffffff;
border-radius: var(--bs-r-sm);
text-decoration: none;
font-family: inherit;
font-weight: var(--bs-weight-semibold);
font-size: var(--bs-text-sm);
transition: all var(--bs-transition);
border: 0;
}
.dam-actionbar-call:hover {
background: #059669;
transform: translateY(-1px);
box-shadow: 0 4px 12px -4px rgba(16,185,129,0.4);
}
.dam-actionbar-call[hidden] { display: none; }
.dam-actionbar-call-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex-shrink: 0;
}
.dam-actionbar-call-icon svg { display: block; }
.dam-actionbar-call-label {
display: flex;
flex-direction: column;
gap: 1px;
line-height: 1.2;
}
.dam-actionbar-call-text {
font-size: 11px;
font-weight: var(--bs-weight-medium);
letter-spacing: 0.04em;
text-transform: uppercase;
opacity: 0.85;
}
.dam-actionbar-call-number {
font-family: var(--bs-font-mono);
font-size: var(--bs-text-sm);
font-weight: var(--bs-weight-bold);
letter-spacing: -0.01em;
}
/* Wiedervorlage-Group */
.dam-actionbar-snooze {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: var(--bs-bg-subtle);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-sm);
}
.dam-actionbar-group-label {
font-size: 10px;
font-weight: var(--bs-weight-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bs-fg-subtle);
font-family: var(--bs-font-mono);
margin-right: 4px;
}
.dam-actionbar-snooze .bs-btn {
padding: 4px 10px;
font-size: 11px;
}
.dam-actionbar-spacer {
flex: 1;
}
.dam-actionbar-done {
font-weight: var(--bs-weight-semibold);
}
.dam-actionbar-delete {
width: 32px;
height: 32px;
border: 1px solid var(--bs-border);
background: transparent;
color: var(--bs-fg-subtle);
border-radius: var(--bs-r-sm);
cursor: pointer;
font-size: 14px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all var(--bs-transition);
}
.dam-actionbar-delete:hover {
border-color: var(--bs-danger);
color: var(--bs-danger);
background: var(--bs-danger-soft);
}
/* ═══════════════════════════════════════════════════════════════════════
Pre-Launch-Polish (Empty-States + Loading + Reaktivieren + Inline-Links)
═══════════════════════════════════════════════════════════════════════ */
/* Tab 1: Stats-Empty-State wenn keine Anrufe */
.att-stats-empty {
display: flex;
align-items: center;
gap: 24px;
padding: 40px 32px;
background: var(--bs-bg-elevated);
border: 1px dashed var(--bs-border);
border-radius: var(--bs-r-xl);
}
.att-stats-empty-icon {
width: 72px;
height: 72px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--bs-mod-attendant-soft);
color: var(--bs-mod-attendant);
border-radius: var(--bs-r-lg);
}
.att-stats-empty-title {
font-family: var(--bs-font-display);
font-size: var(--bs-text-lg);
font-weight: var(--bs-weight-bold);
letter-spacing: -0.025em;
color: var(--bs-fg);
margin: 0 0 6px;
}
.att-stats-empty-text {
margin: 0 0 14px;
color: var(--bs-fg-muted);
line-height: 1.5;
font-size: var(--bs-text-sm);
}
.att-stats-empty-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
/* Tab 3: Test-Anruf Loading-State */
.att-test-loading {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 20px;
background: var(--bs-bg-subtle);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r);
}
.att-test-loading .bs-spinner {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.att-test-loading-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.att-test-loading-text strong {
font-size: var(--bs-text-sm);
color: var(--bs-fg);
font-weight: var(--bs-weight-semibold);
}
.att-test-loading-text span {
font-size: var(--bs-text-xs);
color: var(--bs-fg-muted);
}
.att-test-pending,
.att-test-error {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
border-radius: var(--bs-r-sm);
font-size: var(--bs-text-sm);
}
.att-test-pending {
background: var(--bs-warning-soft);
color: #92400e;
border-left: 3px solid var(--bs-warning);
}
.att-test-error {
background: var(--bs-danger-soft);
color: #991b1b;
border-left: 3px solid var(--bs-danger);
}
[data-theme="dark"] .att-test-pending {
background: rgba(245,158,11,0.10);
color: #fcd34d;
}
[data-theme="dark"] .att-test-error {
background: rgba(239,68,68,0.10);
color: #fca5a5;
}
/* Tab 6: Reaktivieren-Quick-Action im Done-Tab */
.att-msg-reactivate {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
margin-top: 4px;
background: transparent;
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-sm);
cursor: pointer;
font-family: inherit;
font-size: 11px;
font-weight: var(--bs-weight-medium);
color: var(--bs-fg-muted);
transition: all var(--bs-transition);
}
.att-msg-reactivate:hover {
border-color: var(--bs-mod-attendant);
color: var(--bs-mod-attendant);
background: var(--bs-mod-attendant-soft);
}
/* Department-Liste: Inline-Link zur Extension */
.att-dep-action-link {
text-decoration: none;
cursor: pointer;
border-bottom: 1px dashed currentColor;
transition: opacity var(--bs-transition);
}
.att-dep-action-link:hover {
opacity: 0.75;
border-bottom-style: solid;
}
@media (max-width: 700px) {
.dam-actionbar {
padding: 10px 16px;
gap: 8px;
}
.dam-actionbar-snooze {
flex-basis: 100%;
order: 3;
}
.dam-actionbar-spacer { display: none; }
}
/* Sidebar Cleanup — die alten Quick-Actions/Danger-Blocks sind jetzt im Action-Bar oben.
Falls noch CSS rumdaddelt: explizit hide */
.dam-sidebar .dam-quick-actions-block,
.dam-sidebar .dam-danger {
display: none;
}
/* Body: 2-col Activity + Sidebar */
.dam-body {
flex: 1;
display: grid;
grid-template-columns: 1fr 380px;
min-height: 0;
overflow: hidden;
}
@media (max-width: 1100px) {
.dam-body { grid-template-columns: 1fr 340px; }
}
@media (max-width: 900px) {
.dam-body { grid-template-columns: 1fr; }
}
/* Left: Activity-Stream */
.dam-activity {
overflow-y: auto;
padding: 18px 24px;
display: flex;
flex-direction: column;
gap: 22px;
min-height: 0;
}
.dam-activity-section {
display: flex;
flex-direction: column;
gap: 10px;
}
.dam-activity-head {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--bs-font-display);
font-size: var(--bs-text-sm);
font-weight: var(--bs-weight-semibold);
color: var(--bs-fg);
letter-spacing: -0.01em;
padding-bottom: 8px;
border-bottom: 1px solid var(--bs-border);
}
.dam-activity-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
color: var(--bs-fg-muted);
flex-shrink: 0;
}
.dam-activity-icon svg { display: block; }
.dam-activity-title { flex: 1; }
.dam-activity-count:empty { display: none; }
.dam-activity-body {
display: flex;
flex-direction: column;
gap: 6px;
}
.dam-activity-body .das-messages {
display: flex;
flex-direction: column;
gap: 6px;
}
/* Right: Properties-Sidebar */
.dam-sidebar {
overflow-y: auto;
padding: 18px 20px;
background: var(--bs-bg-subtle);
border-left: 1px solid var(--bs-border);
display: flex;
flex-direction: column;
gap: 18px;
min-height: 0;
}
@media (max-width: 900px) {
.dam-sidebar { border-left: 0; border-top: 1px solid var(--bs-border); }
}
.dam-props {
display: flex;
flex-direction: column;
gap: 12px;
}
.dam-props-section-title {
font-size: 10px;
font-weight: var(--bs-weight-semibold);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bs-fg-subtle);
font-family: var(--bs-font-mono);
margin-bottom: 4px;
}
.dam-prop {
display: flex;
flex-direction: column;
gap: 4px;
}
.dam-prop-label {
display: flex;
align-items: center;
gap: 6px;
font-size: var(--bs-text-xs);
font-weight: var(--bs-weight-medium);
color: var(--bs-fg-muted);
margin: 0;
}
.dam-prop-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
color: var(--bs-fg-subtle);
flex-shrink: 0;
}
.dam-prop-icon svg { display: block; }
.dam-prop-hint {
margin-left: auto;
padding: 1px 6px;
background: var(--bs-success-soft);
color: var(--bs-success);
border-radius: 8px;
font-size: 9px;
font-family: var(--bs-font-mono);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.dam-prop-input {
width: 100%;
height: 34px;
font-size: var(--bs-text-sm);
}
.dam-prop-input:is(textarea) {
height: auto;
min-height: 80px;
line-height: 1.5;
resize: vertical;
}
.dam-prop-summary { margin-top: 4px; }
.dam-props-actions {
display: flex;
align-items: center;
gap: 10px;
margin-top: 6px;
padding-top: 12px;
border-top: 1px solid var(--bs-border);
}
.dam-props-actions .bs-btn { flex: 1; }
.dam-props-actions .att-saved-state {
font-size: var(--bs-text-xs);
color: var(--bs-success);
white-space: nowrap;
}
/* Quick-Actions im Sidebar */
.dam-quick-actions-block {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 12px;
border-top: 1px solid var(--bs-border);
}
.dam-quick-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
/* Danger-Zone */
.dam-danger {
padding-top: 12px;
border-top: 1px solid var(--bs-border);
}
.dam-danger .bs-btn { width: 100%; }
/* Notes-Form-Layout (kompakter im neuen Pattern) */
.dam-note-form {
display: flex;
gap: 8px;
margin-bottom: 8px;
}
.dam-note-form input { flex: 1; }
/* CRM-Sync-Block in Sidebar (kompakter als die alte Block-Variante) */
.dam-sidebar .dam-sync-block {
padding: 12px 14px;
}
.dam-sidebar .dam-sync-block .dam-sync-link {
margin-top: 10px;
width: 100%;
justify-content: center;
}
/* Footer-Schließen-Button (versteckt — Hero hat eigenes Close) */
.dam-footer-dismiss { display: none; }
.dam-quick-actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
padding: 10px 0;
border-top: 1px dashed var(--bs-border);
border-bottom: 1px dashed var(--bs-border);
}
.dam-notes-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.dam-note {
padding: 10px 12px;
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-sm);
}
.dam-note-body {
font-size: var(--bs-text-sm);
color: var(--bs-fg);
line-height: 1.4;
margin-bottom: 6px;
}
.dam-note-meta {
display: flex;
align-items: center;
gap: 8px;
font-size: 10px;
color: var(--bs-fg-subtle);
font-family: var(--bs-font-mono);
}
.dam-note-meta span:first-child { font-weight: var(--bs-weight-semibold); }
.dam-note-meta span:nth-child(2) { flex: 1; }
.dam-note-del {
width: 18px;
height: 18px;
border: 0;
background: transparent;
color: var(--bs-fg-subtle);
cursor: pointer;
border-radius: 50%;
font-size: 12px;
}
.dam-note-del:hover {
background: var(--bs-danger);
color: var(--bs-primary-fg);
}
/* ═══════════════════════════════════════════════════════════════════════
KI-Attendant Tab 7: Extensions (Plugin-Framework)
═══════════════════════════════════════════════════════════════════════ */
.att-ext-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
gap: var(--bs-3);
}
.att-ext-card {
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-lg);
padding: var(--bs-4);
display: flex;
flex-direction: column;
gap: var(--bs-3);
transition: border-color var(--bs-transition);
}
.att-ext-card:hover { border-color: var(--bs-primary-soft); }
.att-ext-off { opacity: 0.55; }
.att-ext-head {
display: flex;
align-items: flex-start;
gap: var(--bs-3);
}
.att-ext-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: var(--bs-primary-soft);
color: var(--bs-primary);
border-radius: var(--bs-r);
flex-shrink: 0;
}
.att-ext-title-wrap { flex: 1; min-width: 0; }
.att-ext-name {
font-family: var(--bs-font-mono);
font-weight: var(--bs-weight-bold);
font-size: 13px;
color: var(--bs-primary);
letter-spacing: 0.02em;
}
.att-ext-method-url {
display: flex;
align-items: center;
gap: 6px;
margin-top: 4px;
font-size: 11px;
}
.att-ext-method {
font-size: 9px !important;
}
.att-ext-url {
color: var(--bs-fg-muted);
font-family: var(--bs-font-mono);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.att-ext-toggle-wrap {
flex-shrink: 0;
margin-top: 2px;
}
.att-ext-desc {
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.att-ext-foot {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: var(--bs-3);
border-top: 1px dashed var(--bs-border);
gap: var(--bs-2);
flex-wrap: wrap;
}
.att-ext-tested {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: var(--bs-fg-subtle);
font-family: var(--bs-font-mono);
}
.att-ext-tested svg { width: 11px; height: 11px; }
.att-ext-actions {
display: flex;
gap: 6px;
}
/* Test-Result-Box im Edit-Dialog */
.dae-test-result {
margin-top: var(--bs-4);
padding: var(--bs-3) var(--bs-4);
background: var(--bs-bg-subtle);
border-radius: var(--bs-r-sm);
border: 1px solid var(--bs-border);
}
.dae-test-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.dae-test-ok strong { color: var(--bs-success); }
.dae-test-fail strong { color: var(--bs-danger); }
.dae-test-body {
font-family: var(--bs-font-mono);
font-size: 11px;
color: var(--bs-fg-muted);
background: var(--bs-bg-elevated);
padding: 10px;
border-radius: var(--bs-r-sm);
max-height: 240px;
overflow: auto;
white-space: pre-wrap;
word-break: break-all;
margin: 0;
}
/* ─── Preset-Cards-Section (DocBee + Co.) ─────────────────────────────── */
.att-ext-presets-section {
margin-bottom: var(--bs-6);
padding: var(--bs-5);
background: linear-gradient(135deg, var(--bs-primary-soft), var(--bs-accent-soft));
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-xl);
}
[data-theme="dark"] .att-ext-presets-section {
background: linear-gradient(135deg, rgba(30,41,59,0.10), rgba(16,185,129,0.06));
}
.att-ext-presets-head {
margin-bottom: var(--bs-4);
}
.att-ext-presets-head h3 {
font-family: var(--bs-font-display);
font-size: var(--bs-text-lg);
font-weight: var(--bs-weight-bold);
letter-spacing: -0.025em;
color: var(--bs-fg);
margin: 0 0 4px;
}
.att-ext-presets-head p {
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
margin: 0;
}
.att-ext-presets-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: var(--bs-3);
}
.att-ext-preset-card {
display: flex;
flex-direction: column;
gap: var(--bs-2);
padding: var(--bs-4);
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-lg);
cursor: pointer;
transition: all var(--bs-transition);
}
.att-ext-preset-card:hover {
border-color: var(--bs-primary);
transform: translateY(-2px);
box-shadow: 0 8px 24px -8px rgba(30,41,59,0.25);
}
.att-ext-preset-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 4px;
}
.att-ext-preset-icon {
width: 40px;
height: 40px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.att-ext-icon-svg {
width: 100%;
height: 100%;
border-radius: var(--bs-r-sm);
display: block;
}
.att-ext-icon-emoji {
font-size: 24px;
}
.att-ext-preset-vendor {
flex: 1;
font-family: var(--bs-font-mono);
font-size: 10px;
font-weight: var(--bs-weight-bold);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--bs-fg-subtle);
}
.att-ext-preset-docs {
text-decoration: none;
font-size: 16px;
opacity: 0.6;
transition: opacity var(--bs-transition);
}
.att-ext-preset-docs:hover { opacity: 1; }
.att-ext-preset-name {
font-family: var(--bs-font-display);
font-weight: var(--bs-weight-semibold);
font-size: var(--bs-text-base);
color: var(--bs-fg);
letter-spacing: -0.02em;
line-height: 1.25;
}
.att-ext-preset-summary {
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.att-ext-preset-tags {
display: flex;
gap: 4px;
flex-wrap: wrap;
margin-top: 4px;
}
.att-ext-preset-use {
margin-top: var(--bs-2);
align-self: flex-start;
}
.att-ext-user-head {
margin-bottom: var(--bs-3);
padding-bottom: var(--bs-2);
border-bottom: 1px solid var(--bs-border);
}
.att-ext-user-head h3 {
font-family: var(--bs-font-display);
font-size: var(--bs-text-md);
font-weight: var(--bs-weight-semibold);
color: var(--bs-fg);
margin: 0;
}
/* ─── Setup-Wizard-Banner im Edit-Dialog ──────────────────────────────── */
.dae-preset-banner {
margin: 0 0 var(--bs-5) 0;
padding: var(--bs-4) var(--bs-5);
background: linear-gradient(135deg, var(--bs-primary-soft), var(--bs-accent-soft));
border: 1px solid rgba(30,41,59,0.25);
border-radius: var(--bs-r-lg);
}
[data-theme="dark"] .dae-preset-banner {
background: linear-gradient(135deg, rgba(30,41,59,0.12), rgba(16,185,129,0.08));
}
.dae-pb-head {
display: flex;
align-items: center;
gap: var(--bs-3);
padding-bottom: var(--bs-3);
border-bottom: 1px dashed rgba(30,41,59,0.25);
margin-bottom: var(--bs-3);
}
.dae-pb-icon {
width: 56px;
height: 56px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--bs-r);
background: var(--bs-bg-elevated);
padding: 4px;
box-shadow: 0 4px 14px -4px rgba(30,41,59,0.4);
}
.dae-pb-icon .att-ext-icon-svg {
width: 100%;
height: 100%;
}
.dae-pb-text {
flex: 1;
min-width: 0;
}
.dae-pb-vendor {
font-family: var(--bs-font-mono);
font-size: 10px;
font-weight: var(--bs-weight-bold);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--bs-primary);
}
.dae-pb-name {
font-family: var(--bs-font-display);
font-size: var(--bs-text-lg);
font-weight: var(--bs-weight-bold);
letter-spacing: -0.02em;
color: var(--bs-fg);
margin: 2px 0;
}
.dae-pb-summary {
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
line-height: 1.45;
}
.dae-pb-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--bs-3);
}
@media (max-width: 700px) {
.dae-pb-grid { grid-template-columns: 1fr; }
}
.dae-pb-section {
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-sm);
padding: 0;
display: flex;
flex-direction: column;
}
.dae-pb-section-title {
padding: 10px 14px;
font-weight: var(--bs-weight-semibold);
font-size: var(--bs-text-sm);
color: var(--bs-fg);
border-bottom: 1px solid var(--bs-border);
background: var(--bs-bg-subtle);
}
.dae-pb-section ol,
.dae-pb-section ul {
margin: 0;
padding: 12px 14px 14px 32px;
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
line-height: 1.6;
flex: 1;
}
.dae-pb-section li { margin-bottom: 6px; }
.dae-pb-section li:last-child { margin-bottom: 0; }
.dae-pb-security { border-color: rgba(245, 158, 11, 0.3); }
.dae-pb-security .dae-pb-section-title {
color: var(--bs-warning);
background: rgba(245, 158, 11, 0.06);
border-bottom-color: rgba(245, 158, 11, 0.3);
}
/* ═══════════════════════════════════════════════════════════════════════
Dashboard v2 — Bundle-Aware, klar segmentiert (2026-04-27)
Ersetzt komplett die alte dash-hero / dash-split Struktur.
═══════════════════════════════════════════════════════════════════════ */
#tab-dashboard {
display: flex;
flex-direction: column;
gap: var(--bs-6);
}
/* ─── Hero — schlicht, keine Decoration mehr ─────────────────────────── */
.dash2-hero {
padding-bottom: var(--bs-4);
border-bottom: 1px solid var(--bs-border);
}
.dash2-hero h1 {
font-family: var(--bs-font-display);
font-size: clamp(28px, 3vw, 40px);
font-weight: var(--bs-weight-bold);
letter-spacing: -0.04em;
line-height: 1.1;
color: var(--bs-fg);
margin: 0;
}
.dash2-hero-date {
font-family: var(--bs-font-mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--bs-fg-subtle);
margin: 6px 0 0;
}
/* ─── HEUTE — KPI-Row (clickable Cards, cross-domain) ────────────────── */
.dash2-kpis {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--bs-3);
}
.dash2-kpi {
display: grid;
grid-template-columns: 44px 1fr auto;
align-items: center;
gap: var(--bs-3);
padding: var(--bs-4) var(--bs-5);
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-left: 3px solid var(--kpi-color, var(--bs-primary));
border-radius: var(--bs-r-lg);
cursor: pointer;
font-family: inherit;
text-align: left;
color: inherit;
transition: all var(--bs-transition);
}
.dash2-kpi:hover {
border-color: var(--kpi-color, var(--bs-primary));
transform: translateY(-2px);
box-shadow: 0 8px 24px -12px rgba(15,23,42,0.18);
}
[data-theme="dark"] .dash2-kpi:hover {
box-shadow: 0 12px 32px -16px rgba(0,0,0,0.4);
}
.dash2-kpi-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: var(--bs-bg-subtle);
color: var(--kpi-color, var(--bs-primary));
border-radius: var(--bs-r);
}
.dash2-kpi-body { min-width: 0; }
.dash2-kpi-value {
font-family: var(--bs-font-display);
font-size: 28px;
font-weight: var(--bs-weight-bold);
letter-spacing: -0.03em;
line-height: 1;
color: var(--bs-fg);
}
.dash2-kpi-label {
font-size: 11px;
font-weight: var(--bs-weight-semibold);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bs-fg-muted);
font-family: var(--bs-font-mono);
margin-top: 2px;
}
.dash2-kpi-hint {
font-size: var(--bs-text-xs);
color: var(--kpi-color, var(--bs-fg-muted));
margin-top: 4px;
font-weight: var(--bs-weight-medium);
}
.dash2-kpi-arrow {
color: var(--bs-fg-subtle);
opacity: 0.5;
transition: all var(--bs-transition);
}
.dash2-kpi:hover .dash2-kpi-arrow {
color: var(--kpi-color, var(--bs-primary));
opacity: 1;
transform: translateX(2px);
}
/* ─── Domain-Section ──────────────────────────────────────────────────── */
.dash2-section {
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-xl);
overflow: hidden;
}
.dash2-section-head {
display: flex;
align-items: center;
gap: var(--bs-3);
padding: var(--bs-4) var(--bs-5);
border-bottom: 1px solid var(--bs-border);
}
.dash2-section-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--bs-r);
flex-shrink: 0;
}
/* Module-Icons mit fixen Robopult-Modul-Farben (friendly mid-tones) */
.dash2-icon-vm { background: var(--bs-mod-voicemail); color: #ffffff; box-shadow: 0 4px 14px -4px rgba(8,145,178,0.30); }
.dash2-icon-att { background: var(--bs-mod-attendant); color: #ffffff; box-shadow: 0 4px 14px -4px rgba(16,185,129,0.30); }
.dash2-icon-ann { background: var(--bs-mod-announcements); color: #ffffff; box-shadow: 0 4px 14px -4px rgba(217,119,6,0.30); }
.dash2-section-title-wrap { flex: 1; min-width: 0; }
.dash2-section-title-wrap h2 {
font-family: var(--bs-font-display);
font-size: var(--bs-text-lg);
font-weight: var(--bs-weight-bold);
letter-spacing: -0.025em;
color: var(--bs-fg);
margin: 0;
line-height: 1.2;
}
.dash2-section-title-wrap p {
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
margin: 2px 0 0;
line-height: 1.4;
}
.dash2-section-body {
padding: var(--bs-5);
}
/* ─── 2-Col-Grid innerhalb Section ────────────────────────────────────── */
.dash2-grid-2 {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: var(--bs-5);
}
@media (max-width: 900px) {
.dash2-grid-2 { grid-template-columns: 1fr; }
}
.dash2-subtitle {
font-size: 11px;
font-weight: var(--bs-weight-semibold);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bs-fg-subtle);
font-family: var(--bs-font-mono);
margin-bottom: var(--bs-2);
}
/* ─── Feed (Recent VMs / Recent Tickets) ──────────────────────────────── */
.dash2-feed {
display: flex;
flex-direction: column;
gap: 4px;
}
.dash2-feed-item {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 10px;
align-items: center;
padding: 10px 12px;
background: var(--bs-bg-subtle);
border: 1px solid transparent;
border-radius: var(--bs-r-sm);
cursor: pointer;
font-family: inherit;
text-align: left;
color: inherit;
transition: all var(--bs-transition);
}
.dash2-feed-item:hover {
background: var(--bs-bg-elevated);
border-color: var(--bs-primary-soft);
transform: translateX(2px);
}
.dash2-feed-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
flex-shrink: 0;
}
/* Feed-Icons innerhalb von Section-Cards: neutral Slate-Soft (Modul-Farbe
sitzt schon am Section-Header, doppelt wäre zu viel Akzent) */
.dash2-icon-vm-soft { background: var(--rp-slate-100); color: var(--rp-slate-600); }
.dash2-feed-body { min-width: 0; }
.dash2-feed-title {
font-weight: var(--bs-weight-semibold);
font-size: var(--bs-text-sm);
color: var(--bs-fg);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dash2-feed-snippet {
font-size: 11px;
color: var(--bs-fg-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 1px;
}
.dash2-feed-time {
font-size: 10px;
color: var(--bs-fg-subtle);
font-family: var(--bs-font-mono);
flex-shrink: 0;
}
/* Priority-Bar in Tickets-Feed */
.dash2-prio {
width: 3px;
height: 26px;
border-radius: 2px;
flex-shrink: 0;
}
.dash2-prio-urgent { background: var(--bs-danger); }
.dash2-prio-high { background: var(--bs-warning); }
.dash2-prio-normal { background: var(--bs-primary); }
.dash2-prio-low { background: var(--bs-fg-subtle); }
/* Empty-State innerhalb Feed */
.dash2-empty {
text-align: center;
padding: 24px 16px;
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
background: var(--bs-bg-subtle);
border-radius: var(--bs-r-sm);
}
/* ─── Mailboxen-Liste (rechte Spalte VM-Section) ─────────────────────── */
.dash2-mailboxes {
display: flex;
flex-direction: column;
gap: 4px;
}
.dash2-mailbox-item {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 10px;
align-items: center;
padding: 10px 12px;
background: var(--bs-bg-subtle);
border: 1px solid transparent;
border-radius: var(--bs-r-sm);
cursor: pointer;
font-family: inherit;
text-align: left;
color: inherit;
transition: all var(--bs-transition);
}
.dash2-mailbox-item:hover {
background: var(--bs-bg-elevated);
border-color: var(--bs-primary-soft);
}
.dash2-mailbox-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--bs-primary-soft);
color: var(--bs-primary);
flex-shrink: 0;
}
.dash2-mailbox-body { min-width: 0; }
.dash2-mailbox-name {
font-weight: var(--bs-weight-semibold);
font-size: var(--bs-text-sm);
color: var(--bs-fg);
}
.dash2-mailbox-num {
font-size: 10px;
color: var(--bs-fg-subtle);
font-family: var(--bs-font-mono);
letter-spacing: 0.04em;
margin-top: 1px;
}
.dash2-mailbox-count {
font-family: var(--bs-font-mono);
font-weight: var(--bs-weight-bold);
font-size: 13px;
color: var(--bs-primary);
background: var(--bs-primary-soft);
padding: 3px 10px;
border-radius: var(--bs-r-full);
flex-shrink: 0;
}
/* ─── KI-Attendant Stats-Lines (rechte Spalte Att-Section) ───────────── */
.dash2-att-stats {
display: flex;
flex-direction: column;
gap: 8px;
}
.dash2-stat-line {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: var(--bs-bg-subtle);
border-radius: var(--bs-r-sm);
}
.dash2-stat-line-label {
font-size: 11px;
font-weight: var(--bs-weight-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bs-fg-muted);
font-family: var(--bs-font-mono);
}
.dash2-stat-line-value {
font-family: var(--bs-font-display);
font-size: 20px;
font-weight: var(--bs-weight-bold);
color: var(--bs-fg);
letter-spacing: -0.02em;
}
/* ─── Ansagen-Stats (3 Mini-KPIs) ─────────────────────────────────────── */
.dash2-ann-summary {
display: grid;
}
.dash2-ann-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--bs-3);
}
@media (max-width: 700px) {
.dash2-ann-row { grid-template-columns: 1fr; }
}
.dash2-ann-stat {
text-align: center;
padding: var(--bs-4);
background: var(--bs-bg-subtle);
border-radius: var(--bs-r);
}
.dash2-ann-stat-value {
font-family: var(--bs-font-display);
font-size: 32px;
font-weight: var(--bs-weight-bold);
letter-spacing: -0.03em;
color: var(--bs-accent);
line-height: 1;
}
.dash2-ann-stat-label {
font-size: 11px;
font-weight: var(--bs-weight-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bs-fg-muted);
font-family: var(--bs-font-mono);
margin-top: 6px;
}
/* ─── Schnellzugriff-Footer ──────────────────────────────────────────── */
.dash2-quick {
margin-top: var(--bs-2);
}
.dash2-quick-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--bs-3);
}
.dash2-quick-tile {
display: flex;
align-items: center;
gap: 12px;
padding: var(--bs-3) var(--bs-4);
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-lg);
cursor: pointer;
font-family: inherit;
text-align: left;
color: inherit;
transition: all var(--bs-transition);
}
.dash2-quick-tile:hover {
border-color: var(--kpi-color, var(--bs-primary));
transform: translateX(2px);
}
.dash2-quick-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: var(--bs-bg-subtle);
color: var(--kpi-color, var(--bs-primary));
border-radius: var(--bs-r);
flex-shrink: 0;
}
.dash2-quick-text { flex: 1; min-width: 0; }
.dash2-quick-label {
font-weight: var(--bs-weight-semibold);
font-size: var(--bs-text-base);
color: var(--bs-fg);
}
.dash2-quick-sub {
font-size: 11px;
color: var(--bs-fg-muted);
margin-top: 1px;
}
.dash2-quick-tile svg:last-child {
color: var(--bs-fg-subtle);
opacity: 0.5;
transition: all var(--bs-transition);
}
.dash2-quick-tile:hover svg:last-child {
color: var(--kpi-color, var(--bs-primary));
opacity: 1;
transform: translateX(2px);
}
/* Hide alte dash-* Stuff nicht — wird einfach nicht mehr referenziert */
/* ═══════════════════════════════════════════════════════════════════════
Form-Symmetry-Layer (2026-04-27)
Vereinheitlicht Dialoge / Forms / Felder über ALLE bestehenden Patterns.
Höchste Specificity — überschreibt Section 9/16/17 wo nötig.
═══════════════════════════════════════════════════════════════════════ */
/* Dialog-Header: einheitliche Padding + Trennlinie */
.dialog .dialog-inner > .dialog-header {
padding: 20px 24px !important;
border-bottom: 1px solid var(--bs-border);
}
.dialog .dialog-inner > .dialog-header h3 {
font-family: var(--bs-font-display);
font-size: var(--bs-text-lg);
font-weight: var(--bs-weight-bold);
letter-spacing: -0.025em;
line-height: 1.2;
margin: 0;
color: var(--bs-fg);
}
.dialog .dialog-close {
width: 36px;
height: 36px;
border-radius: var(--bs-r-sm);
border: 1px solid transparent;
background: transparent;
color: var(--bs-fg-subtle);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
transition: all var(--bs-transition);
padding: 0;
}
.dialog .dialog-close:hover {
background: var(--bs-bg-subtle);
color: var(--bs-fg);
border-color: var(--bs-border);
}
/* Dialog-Body-Standard: einheitliche Innenpadding */
.dialog .dialog-body-std {
padding: 24px !important;
}
.dialog .dialog-body-std > form {
display: flex;
flex-direction: column;
gap: var(--bs-4);
}
.dialog .dialog-body-std > form > .grid-2:not(:last-child),
.dialog .dialog-body-std > form > .bs-field:not(:last-child) {
margin-bottom: 0;
}
/* Forms direkt im dialog-inner (legacy) — einheitliche Padding */
.dialog .dialog-inner > form {
padding: 24px !important;
margin: 0 !important;
display: flex;
flex-direction: column;
gap: var(--bs-4);
}
.dialog .dialog-inner > form > .bs-field,
.dialog .dialog-inner > form > .grid-2,
.dialog .dialog-inner > form > .field {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* bs-field: einheitlicher vertical-rhythm */
.dialog .bs-field {
display: flex;
flex-direction: column;
gap: var(--bs-2) !important;
margin-bottom: 0 !important; /* Gap auf form regelt Abstand */
}
.dialog .bs-field > .bs-label {
font-size: var(--bs-text-sm);
font-weight: var(--bs-weight-medium);
color: var(--bs-fg-muted);
margin: 0;
line-height: 1.3;
}
.dialog .bs-field > .bs-help {
font-size: var(--bs-text-xs);
color: var(--bs-fg-subtle);
margin: 4px 0 0;
line-height: 1.45;
}
/* grid-2: konsistenter Gap = bs-4 (16px) statt 12px legacy */
.dialog .grid-2,
.bs-card .grid-2,
.tdp .grid-2,
.ti-card-body .grid-2 {
gap: var(--bs-4) !important;
}
.dialog .grid-2 > .bs-field {
margin-bottom: 0 !important;
}
/* Inputs: einheitliche Höhe 38px (matched Section 16 Bare-Inputs) */
.dialog .bs-input,
.dialog input[type="text"]:not(.bs-mono-tag),
.dialog input[type="email"],
.dialog input[type="password"],
.dialog input[type="number"],
.dialog input[type="tel"],
.dialog input[type="search"],
.dialog input[type="url"],
.dialog input[type="datetime-local"],
.dialog select.bs-input,
.dialog select.bs-select {
width: 100%;
height: 38px;
box-sizing: border-box;
}
.dialog textarea.bs-input,
.dialog textarea.bs-textarea {
width: 100%;
height: auto;
min-height: 96px;
padding: 10px var(--bs-3) !important;
line-height: 1.5;
resize: vertical;
}
/* form-actions: einheitlicher Top-Border-Separator */
.dialog .form-actions {
display: flex;
gap: var(--bs-2);
align-items: center;
margin: var(--bs-2) 0 0 !important;
padding-top: var(--bs-4);
border-top: 1px solid var(--bs-border);
flex-wrap: wrap;
}
.dialog .form-actions:first-child {
/* Form-actions ohne vorherigen Inhalt brauchen keinen Border */
border-top: 0;
padding-top: 0;
}
/* dialog-footer-std: konsistent zu form-actions */
.dialog .form-actions.dialog-footer-std,
.dialog .dialog-footer-std {
margin: 0 !important;
padding: var(--bs-4) 24px !important;
border-top: 1px solid var(--bs-border);
}
/* Section-Header in Forms: einheitliche Optik */
.dialog .att-section-title,
.dialog .section-header {
font-family: var(--bs-font-display);
font-size: var(--bs-text-md);
font-weight: var(--bs-weight-semibold);
letter-spacing: -0.02em;
color: var(--bs-fg);
margin: var(--bs-3) 0 0 !important;
padding-top: var(--bs-3);
border-top: 1px solid var(--bs-border);
display: flex;
align-items: center;
gap: 8px;
}
.dialog .att-section-title:first-child,
.dialog .section-header:first-child {
margin-top: 0 !important;
padding-top: 0;
border-top: 0;
}
/* Dialog-Tabs (TDU/PDP/UDT) einheitlich */
.dialog .dialog-tabs,
.dialog .tenant-dialog-tabs {
display: flex;
gap: 0;
padding: 0 24px;
border-bottom: 1px solid var(--bs-border);
flex-wrap: wrap;
}
.dialog .dialog-tabs > button,
.dialog .tenant-dialog-tabs > button {
padding: 12px 16px;
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
color: var(--bs-fg-muted);
font-family: inherit;
font-size: var(--bs-text-sm);
font-weight: var(--bs-weight-medium);
cursor: pointer;
margin-bottom: -1px;
transition: color var(--bs-transition);
}
.dialog .dialog-tabs > button:hover,
.dialog .tenant-dialog-tabs > button:hover { color: var(--bs-fg); }
.dialog .dialog-tabs > button.active,
.dialog .tenant-dialog-tabs > button.active {
color: var(--bs-primary);
border-bottom-color: var(--bs-primary);
font-weight: var(--bs-weight-semibold);
}
/* Dialog-Padding-Reset für tdp/dtu/dtg/das Panes — sie packen ihren Inhalt selbst rein */
.dialog .tdp,
.dialog .dtu-pane,
.dialog .dtg-pane {
padding: 24px !important;
}
/* Toggle-Row einheitlich */
.dialog .bs-toggle-row {
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-size: var(--bs-text-base);
color: var(--bs-fg);
}
.dialog .bs-toggle-row input[type="checkbox"] {
flex-shrink: 0;
accent-color: var(--bs-primary);
}
@media (max-width: 700px) {
.att-msg-stats { grid-template-columns: 1fr; }
.att-ext-list { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════════════════════════
KI-Attendant Mode-Switch — Daily vs Config
Tab-Definitions: 'attendant' (Daily, alle User) + 'attendant_config'
(Setup, admin/owner). Beide rendern in #tab-attendant. body-Klassen
`att-mode-daily` / `att-mode-config` schalten Sub-Tabs sichtbar.
═══════════════════════════════════════════════════════════════════════ */
body.att-mode-daily .att-sub-btn[data-att-mode="config"],
body.att-mode-config .att-sub-btn[data-att-mode="daily"] {
display: none !important;
}
/* Status-Card: in Daily-Mode read-only, kleinere Optik */
body.att-mode-daily .att-status-card {
/* Read-Only-Look: schmaler, kein Schatten, dezenterer Hintergrund */
padding: var(--bs-3) var(--bs-5);
}
body.att-mode-daily .att-status-card .att-status-actions .bs-switch {
/* Switch ausblenden für Daily-User — kein Konfig-Recht */
display: none;
}
body.att-mode-daily .att-status-card .att-status-icon {
width: 36px;
height: 36px;
}
body.att-mode-daily .att-status-card .att-status-title {
font-size: var(--bs-text-md);
}
body.att-mode-daily .att-status-card .att-status-subtitle {
font-size: var(--bs-text-sm);
}
/* Mode-Hinweis war hier als ::after — entfernt (verursachte Layout-Bug) */
/* ═══════════════════════════════════════════════════════════════════════
Dashboard: KI-Attendant Section (zwischen Stats-Row + Dash-Split)
═══════════════════════════════════════════════════════════════════════ */
.dash-attendant-row {
margin-bottom: var(--bs-6);
}
.dash-attendant-row .section-card {
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-xl);
padding: 0;
overflow: hidden;
}
.dash-att-header {
display: flex !important;
align-items: center;
padding: var(--bs-4) var(--bs-5);
border-bottom: 1px solid var(--bs-border);
background: linear-gradient(90deg, var(--bs-primary-soft), var(--bs-accent-soft));
position: relative;
}
[data-theme="dark"] .dash-att-header {
background: linear-gradient(90deg, rgba(30,41,59,0.1), rgba(16,185,129,0.06));
}
.dash-att-header h3 {
font-family: var(--bs-font-display);
font-size: var(--bs-text-md);
font-weight: var(--bs-weight-bold);
letter-spacing: -0.025em;
color: var(--bs-fg);
}
.dash-att-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--bs-r);
background: var(--bs-mod-attendant);
color: #ffffff;
flex-shrink: 0;
box-shadow: 0 4px 14px -4px rgba(16,185,129,0.40);
}
.dash-att-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: var(--bs-4);
padding: var(--bs-5);
}
@media (max-width: 900px) {
.dash-att-grid { grid-template-columns: 1fr; }
}
.dash-att-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--bs-3);
align-self: start;
}
.dash-att-kpi {
background: var(--bs-bg-subtle);
border: 1px solid var(--bs-border);
border-left: 3px solid var(--kpi-color, var(--bs-primary));
border-radius: var(--bs-r);
padding: var(--bs-3) var(--bs-4);
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
gap: 2px 12px;
align-items: center;
}
.dash-att-kpi-icon {
grid-row: 1 / 3;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--bs-r-sm);
background: var(--bs-bg-elevated);
color: var(--kpi-color, var(--bs-primary));
}
.dash-att-kpi-value {
font-family: var(--bs-font-display);
font-size: 24px;
font-weight: var(--bs-weight-bold);
letter-spacing: -0.03em;
color: var(--kpi-color, var(--bs-fg));
line-height: 1;
}
.dash-att-kpi-label {
font-size: 10px;
font-weight: var(--bs-weight-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bs-fg-muted);
font-family: var(--bs-font-mono);
}
.dash-att-recent {
display: flex;
flex-direction: column;
min-width: 0;
}
.dash-att-section-title {
font-size: 10px;
font-weight: var(--bs-weight-semibold);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bs-fg-subtle);
font-family: var(--bs-font-mono);
margin-bottom: var(--bs-2);
}
.dash-att-recent-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.dash-att-recent-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: var(--bs-bg-subtle);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-sm);
cursor: pointer;
text-align: left;
font-family: inherit;
color: inherit;
transition: all var(--bs-transition);
}
.dash-att-recent-item:hover {
background: var(--bs-bg-elevated);
border-color: var(--bs-primary-soft);
transform: translateX(2px);
}
.dash-att-recent-body {
flex: 1;
min-width: 0;
}
.dash-att-recent-caller {
font-weight: var(--bs-weight-semibold);
font-size: var(--bs-text-sm);
color: var(--bs-fg);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dash-att-recent-summary {
font-size: 11px;
color: var(--bs-fg-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dash-att-recent-time {
font-size: 10px;
color: var(--bs-fg-subtle);
font-family: var(--bs-font-mono);
flex-shrink: 0;
}
/* ═══════════════════════════════════════════════════════════════════════
Extension-Dialog v2: Form-driven Builder (2026-04-27)
Ersetzt JSON-Textareas durch UI-Felder. „Think like a user"
═══════════════════════════════════════════════════════════════════════ */
/* Section-Title mit Sub-Untertitel im gleichen Heading */
.att-section-sub {
font-family: var(--bs-font-base);
font-weight: var(--bs-weight-regular);
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
letter-spacing: 0;
margin-left: 6px;
}
.bs-label-optional {
font-size: var(--bs-text-xs);
font-weight: var(--bs-weight-regular);
color: var(--bs-fg-subtle);
margin-left: 4px;
}
/* Form-Layout: einheitlicher Vertikal-Rhythmus */
#dae-form {
display: flex;
flex-direction: column;
gap: var(--bs-4);
}
#dae-form > .att-section-title {
margin-top: var(--bs-4);
padding-top: var(--bs-3);
border-top: 1px solid var(--bs-border);
font-family: var(--bs-font-display);
font-size: var(--bs-text-md);
font-weight: var(--bs-weight-semibold);
letter-spacing: -0.02em;
color: var(--bs-fg);
display: flex;
align-items: baseline;
gap: 6px;
}
#dae-form > .att-section-title:first-of-type {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
/* Erklär-Block — collapsible Pattern-Erklärung */
.dae-explainer {
background: linear-gradient(135deg, var(--bs-primary-soft), var(--bs-accent-soft));
border: 1px solid var(--bs-primary-soft);
border-radius: var(--bs-r);
overflow: hidden;
}
[data-theme="dark"] .dae-explainer {
background: linear-gradient(135deg, rgba(30,41,59,0.1), rgba(16,185,129,0.06));
border-color: rgba(30,41,59,0.2);
}
.dae-explainer-head {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
font-family: var(--bs-font-display);
font-size: var(--bs-text-sm);
}
.dae-explainer-icon {
font-size: 18px;
flex-shrink: 0;
}
.dae-explainer-head strong {
flex: 1;
font-weight: var(--bs-weight-semibold);
color: var(--bs-fg);
}
.dae-explainer-toggle {
width: 24px;
height: 24px;
border: 1px solid var(--bs-border);
background: var(--bs-bg-elevated);
color: var(--bs-fg-muted);
border-radius: var(--bs-r-sm);
cursor: pointer;
font-size: 14px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
.dae-explainer-body {
padding: 0 16px 14px;
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
}
.dae-explainer-steps {
margin: 0 0 8px;
padding-left: 22px;
display: flex;
flex-direction: column;
gap: 4px;
line-height: 1.5;
}
.dae-explainer-steps li strong {
color: var(--bs-fg);
}
.dae-explainer-steps code {
background: var(--bs-bg-subtle);
padding: 1px 5px;
border-radius: 3px;
font-size: 11px;
font-family: var(--bs-font-mono);
}
.dae-explainer-note {
margin: 6px 0 0;
font-size: var(--bs-text-xs);
color: var(--bs-fg-subtle);
font-style: italic;
}
.dae-explainer.collapsed .dae-explainer-body {
display: none;
}
/* Parameter-Builder */
.dae-params-builder {
display: flex;
flex-direction: column;
gap: var(--bs-3);
}
.dae-params-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.dae-param-row {
display: grid;
grid-template-columns: 1.4fr 1fr 1.6fr auto auto;
gap: 8px;
align-items: center;
padding: 10px 12px;
background: var(--bs-bg-subtle);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-sm);
position: relative;
}
.dae-param-row:focus-within {
border-color: var(--bs-primary);
box-shadow: 0 0 0 3px var(--bs-primary-soft);
}
.dae-param-row > .bs-input,
.dae-param-row > select.bs-input {
height: 36px;
font-size: var(--bs-text-sm);
}
.dae-param-name {
font-family: var(--bs-font-mono);
font-size: 12px !important;
}
.dae-param-required-wrap {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--bs-text-xs);
color: var(--bs-fg-muted);
white-space: nowrap;
cursor: pointer;
user-select: none;
}
.dae-param-required-wrap input[type="checkbox"] {
margin: 0;
accent-color: var(--bs-primary);
}
.dae-param-remove {
width: 32px;
height: 32px;
border: 1px solid var(--bs-border);
background: var(--bs-bg-elevated);
color: var(--bs-fg-subtle);
border-radius: var(--bs-r-sm);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
line-height: 1;
transition: all var(--bs-transition);
flex-shrink: 0;
}
.dae-param-remove:hover {
border-color: var(--bs-danger);
color: var(--bs-danger);
background: var(--bs-danger-soft);
}
/* Enum-Optionen Sub-Row (wenn Typ = Auswahl) */
.dae-param-enum {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 8px;
padding-top: 6px;
border-top: 1px dashed var(--bs-border);
margin-top: 4px;
font-size: var(--bs-text-xs);
color: var(--bs-fg-muted);
}
.dae-param-enum input {
flex: 1;
height: 32px;
font-size: var(--bs-text-xs);
}
.dae-param-enum-label {
white-space: nowrap;
}
@media (max-width: 700px) {
.dae-param-row {
grid-template-columns: 1fr 1fr;
grid-template-areas:
"name type"
"desc desc"
"req remove";
}
.dae-param-name { grid-area: name; }
.dae-param-type { grid-area: type; }
.dae-param-desc { grid-area: desc; }
.dae-param-required-wrap { grid-area: req; }
.dae-param-remove { grid-area: remove; justify-self: end; }
}
.dae-params-empty {
display: flex;
align-items: center;
gap: 10px;
padding: 16px;
background: var(--bs-bg-subtle);
border: 1px dashed var(--bs-border);
border-radius: var(--bs-r-sm);
color: var(--bs-fg-muted);
font-size: var(--bs-text-sm);
}
.dae-params-empty-icon {
font-size: 20px;
}
.dae-params-actions {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.dae-params-hint {
font-size: var(--bs-text-xs);
color: var(--bs-fg-subtle);
flex: 1;
min-width: 0;
}
/* Advanced (collapsible JSON-Textarea) */
.dae-advanced {
margin-top: 4px;
border: 1px dashed var(--bs-border);
border-radius: var(--bs-r-sm);
background: var(--bs-bg-subtle);
}
.dae-advanced > summary {
cursor: pointer;
padding: 10px 14px;
font-size: var(--bs-text-xs);
font-weight: var(--bs-weight-medium);
color: var(--bs-fg-muted);
font-family: var(--bs-font-mono);
letter-spacing: 0.02em;
list-style: none;
user-select: none;
display: flex;
align-items: center;
gap: 6px;
}
.dae-advanced > summary::-webkit-details-marker { display: none; }
.dae-advanced > summary::before {
content: "▸";
font-size: 10px;
transition: transform var(--bs-transition);
}
.dae-advanced[open] > summary::before {
transform: rotate(90deg);
}
.dae-advanced[open] > summary {
border-bottom: 1px dashed var(--bs-border);
background: var(--bs-bg-elevated);
}
.dae-advanced .dae-advanced-json {
font-family: var(--bs-font-mono) !important;
font-size: 12px !important;
border: 0 !important;
background: transparent !important;
padding: 12px 14px !important;
width: 100%;
resize: vertical;
min-height: 120px;
}
.dae-advanced[open] > * + * {
border-top: 1px dashed var(--bs-border);
}
/* Auth-Builder */
.dae-auth-builder {
display: flex;
flex-direction: column;
gap: var(--bs-3);
}
/* Timeout-Row mit ms-Tag rechts */
.dae-timeout-row {
display: flex;
align-items: center;
gap: 8px;
}
.dae-timeout-row > input {
flex: 1;
}
/* Headers-Builder (innerhalb advanced) */
.dae-headers-list {
display: flex;
flex-direction: column;
gap: 6px;
padding: 12px 14px 0;
}
.dae-header-row {
display: grid;
grid-template-columns: 1fr 1.5fr auto;
gap: 8px;
align-items: center;
}
.dae-header-row > .bs-input {
height: 34px;
font-family: var(--bs-font-mono);
font-size: 12px;
}
.dae-header-row .dae-param-remove {
width: 30px;
height: 30px;
font-size: 14px;
}
.dae-headers-advanced > #dae-headers-add {
margin: 8px 14px 12px !important;
}
/* ═══════════════════════════════════════════════════════════════════════
Setup-Fortschritts-Karte (KI-Konfig)
═══════════════════════════════════════════════════════════════════════ */
.att-setup-progress {
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r);
padding: 18px 22px;
margin-bottom: var(--bs-5);
}
.att-setup-head {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 14px;
}
.att-setup-title {
font-family: var(--bs-font-display);
font-size: var(--bs-text-md);
font-weight: var(--bs-weight-bold);
letter-spacing: -0.025em;
color: var(--bs-fg);
margin: 0;
}
.att-setup-sub {
margin: 4px 0 0;
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
}
.att-setup-head > div:first-child {
flex: 1;
}
/* Progress-Ring */
.att-setup-ring {
position: relative;
width: 56px;
height: 56px;
flex-shrink: 0;
}
.att-setup-ring-svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.att-setup-ring-bg {
fill: none;
stroke: var(--bs-border);
stroke-width: 2.5;
}
.att-setup-ring-fg {
fill: none;
stroke: url(#att-setup-grad);
stroke: var(--bs-primary);
stroke-width: 2.8;
stroke-linecap: round;
transition: stroke-dasharray 600ms ease;
}
.att-setup-ring-num {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--bs-font-mono);
font-size: 11px;
font-weight: var(--bs-weight-bold);
color: var(--bs-fg);
letter-spacing: -0.02em;
}
/* Checklist */
.att-setup-checklist {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 8px;
}
.att-setup-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: var(--bs-bg-subtle);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-sm);
font-size: var(--bs-text-sm);
cursor: pointer;
text-align: left;
font-family: inherit;
color: inherit;
transition: all var(--bs-transition);
}
.att-setup-item:hover {
background: var(--bs-bg-elevated);
border-color: var(--bs-primary-soft);
transform: translateX(2px);
}
.att-setup-item-icon {
width: 22px;
height: 22px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 12px;
font-weight: var(--bs-weight-bold);
}
.att-setup-item.done .att-setup-item-icon {
background: var(--bs-success);
color: #ffffff;
}
.att-setup-item.todo .att-setup-item-icon {
background: var(--bs-bg-elevated);
border: 1.5px dashed var(--bs-border);
color: var(--bs-fg-subtle);
}
.att-setup-item-label {
flex: 1;
color: var(--bs-fg);
font-weight: var(--bs-weight-medium);
}
.att-setup-item.done .att-setup-item-label {
color: var(--bs-fg-muted);
text-decoration: line-through;
text-decoration-color: var(--bs-border);
text-decoration-thickness: 1px;
}
.att-setup-item-arrow {
color: var(--bs-fg-subtle);
flex-shrink: 0;
opacity: 0;
transition: opacity var(--bs-transition);
}
.att-setup-item.todo:hover .att-setup-item-arrow {
opacity: 1;
}
/* ═══════════════════════════════════════════════════════════════════════
CRM-Sync-UI (2026-04-27)
Department-Auto-Aktion + Postfach-Sync-Indikatoren
═══════════════════════════════════════════════════════════════════════ */
/* Phase 13e: Outputs-Multi-Select im Department-Modal — analog zu Tab 2 */
.dad-outputs-section {
margin-top: var(--bs-3);
}
.dad-outputs-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.dad-output-row {
display: grid;
grid-template-columns: auto auto 1fr;
gap: 12px;
align-items: flex-start;
padding: 12px 16px;
background: var(--bs-bg-subtle);
border: 1.5px solid var(--bs-border);
border-radius: var(--bs-r-sm);
cursor: pointer;
transition: all var(--bs-transition);
}
.dad-output-row:hover {
border-color: var(--bs-primary-soft);
}
.dad-output-row.is-active {
border-color: var(--bs-primary);
background: var(--bs-primary-soft);
}
[data-theme="dark"] .dad-output-row.is-active {
background: rgba(30,41,59,0.08);
}
.dad-output-row > input[type="checkbox"] {
margin: 4px 0 0;
accent-color: var(--bs-primary);
}
.dad-output-icon {
font-size: 18px;
line-height: 1;
margin-top: 2px;
}
.dad-output-body {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.dad-output-body strong {
font-family: var(--bs-font-display);
font-weight: var(--bs-weight-semibold);
font-size: var(--bs-text-sm);
color: var(--bs-fg);
line-height: 1.2;
}
.dad-output-body > span {
font-size: var(--bs-text-xs);
color: var(--bs-fg-muted);
line-height: 1.4;
}
.dad-output-sub {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 4px;
padding-top: 8px;
border-top: 1px dashed var(--bs-border);
}
.dad-output-sub .bs-input {
width: 100%;
height: 36px;
font-size: var(--bs-text-sm);
}
.dad-output-sub .bs-label {
font-size: var(--bs-text-xs);
font-weight: var(--bs-weight-medium);
color: var(--bs-fg-muted);
margin: 0;
}
/* Department-Dialog: CRM-Auto-Section (gehighlighted-Container) */
.dad-crm-section {
background: var(--bs-primary-soft);
border: 1px solid var(--bs-primary-soft);
border-radius: var(--bs-r-sm);
padding: 14px 16px;
margin: 4px 0;
}
[data-theme="dark"] .dad-crm-section {
background: rgba(30,41,59,0.08);
border-color: rgba(30,41,59,0.18);
}
.dad-crm-head {
display: flex;
align-items: flex-start;
gap: 12px;
}
.dad-crm-icon {
font-size: 18px;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--bs-r-sm);
background: var(--bs-bg-elevated);
flex-shrink: 0;
}
.dad-crm-text {
flex: 1;
min-width: 0;
}
.dad-crm-text strong {
font-family: var(--bs-font-display);
font-weight: var(--bs-weight-semibold);
font-size: var(--bs-text-sm);
color: var(--bs-fg);
letter-spacing: -0.02em;
}
.dad-crm-section .bs-field {
margin: 0;
}
/* Department-Liste: CRM-Auto-Badge in Header */
.att-dep-crm {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: var(--bs-mod-attendant);
color: #ffffff;
border-radius: 10px;
font-size: 10px;
font-weight: var(--bs-weight-semibold);
letter-spacing: 0.04em;
font-family: var(--bs-font-mono);
}
.att-dep-crm svg {
flex-shrink: 0;
}
/* Department-Card: Sub-Line "wird ausgelöst" */
.att-dep-crm-line {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
margin-top: 6px;
background: var(--bs-primary-soft);
border-radius: var(--bs-r-sm);
font-size: var(--bs-text-xs);
color: var(--bs-fg-muted);
}
[data-theme="dark"] .att-dep-crm-line {
background: rgba(30,41,59,0.08);
}
.att-dep-crm-line strong {
color: var(--bs-primary);
font-weight: var(--bs-weight-semibold);
}
.att-dep-crm-line svg {
flex-shrink: 0;
color: var(--bs-primary);
}
/* Postfach-Card: CRM-Sync-Badge */
.att-msg-crm-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: var(--bs-success-soft);
color: var(--bs-success);
border-radius: 10px;
font-size: 10px;
font-weight: var(--bs-weight-semibold);
letter-spacing: 0.02em;
font-family: var(--bs-font-mono);
white-space: nowrap;
}
[data-theme="dark"] .att-msg-crm-badge {
background: rgba(16,185,129,0.12);
color: #6ee7b7;
}
.att-msg-crm-badge svg {
flex-shrink: 0;
}
.att-msg-crm-text {
max-width: 160px;
overflow: hidden;
text-overflow: ellipsis;
}
/* Postfach-Detail-Modal: Sync-Block */
.dam-sync-block {
background: linear-gradient(135deg, var(--bs-success-soft), var(--bs-bg-subtle));
border: 1px solid var(--bs-success);
border-left-width: 3px;
border-radius: var(--bs-r-sm);
padding: 12px 14px;
}
[data-theme="dark"] .dam-sync-block {
background: linear-gradient(135deg, rgba(16,185,129,0.08), var(--bs-bg-subtle));
border-color: rgba(16,185,129,0.4);
}
.dam-sync-head {
display: flex;
align-items: center;
gap: 12px;
}
.dam-sync-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--bs-success);
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.dam-sync-text {
flex: 1;
min-width: 0;
}
.dam-sync-title {
font-family: var(--bs-font-display);
font-weight: var(--bs-weight-semibold);
font-size: var(--bs-text-sm);
color: var(--bs-fg);
letter-spacing: -0.015em;
line-height: 1.2;
}
.dam-sync-meta {
margin-top: 3px;
font-size: var(--bs-text-xs);
color: var(--bs-fg-muted);
font-family: var(--bs-font-mono);
letter-spacing: -0.01em;
}
.dam-sync-block.dam-sync-pending {
background: var(--bs-warning-soft);
border-color: var(--bs-warning);
}
.dam-sync-block.dam-sync-pending .dam-sync-icon {
background: var(--bs-warning);
}
/* ═══════════════════════════════════════════════════════════════════════
Phase 5+6: Department-Mode-Cards + Postfach-Sub-Tabs (2026-04-27)
═══════════════════════════════════════════════════════════════════════ */
/* Department-Dialog: Mode-Choice-Cards (statt nacktem Dropdown) */
.dad-mode-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
@media (max-width: 700px) {
.dad-mode-cards { grid-template-columns: 1fr; }
}
.dad-mode-card {
display: grid;
grid-template-columns: auto 1fr;
gap: 10px;
padding: 14px 16px;
background: var(--bs-bg-subtle);
border: 1.5px solid var(--bs-border);
border-radius: var(--bs-r-sm);
cursor: pointer;
transition: all var(--bs-transition);
position: relative;
align-items: center;
font-size: var(--bs-text-sm);
}
.dad-mode-card:hover {
background: var(--bs-bg-elevated);
border-color: var(--bs-primary-soft);
}
.dad-mode-card.active {
background: var(--bs-primary-soft);
border-color: var(--bs-primary);
box-shadow: 0 0 0 3px var(--bs-primary-soft);
}
[data-theme="dark"] .dad-mode-card.active {
background: rgba(30,41,59,0.12);
}
.dad-mode-card input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.dad-mode-icon {
font-size: 22px;
line-height: 1;
flex-shrink: 0;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--bs-bg-elevated);
border-radius: var(--bs-r-sm);
}
.dad-mode-card.active .dad-mode-icon {
background: #ffffff;
}
[data-theme="dark"] .dad-mode-card.active .dad-mode-icon {
background: var(--bs-bg-elevated);
}
.dad-mode-body {
display: flex;
flex-direction: column;
min-width: 0;
gap: 2px;
}
.dad-mode-body strong {
font-family: var(--bs-font-display);
font-weight: var(--bs-weight-semibold);
color: var(--bs-fg);
letter-spacing: -0.015em;
font-size: var(--bs-text-sm);
line-height: 1.2;
}
.dad-mode-card.active .dad-mode-body strong {
color: var(--bs-primary);
}
.dad-mode-sub {
font-size: var(--bs-text-xs);
color: var(--bs-fg-muted);
line-height: 1.35;
}
/* Storage-Section + CRM-Section abgesetzt */
.dad-storage-section {
background: var(--bs-bg-subtle);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-sm);
padding: 12px 14px;
}
.dad-storage-section .bs-field { margin: 0; }
/* Department-Liste: Mode-Badge */
.att-dep-mode {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 8px;
border-radius: 10px;
font-size: 10px;
font-weight: var(--bs-weight-semibold);
font-family: var(--bs-font-mono);
letter-spacing: 0.03em;
white-space: nowrap;
}
.att-dep-mode-icon { font-size: 11px; line-height: 1; }
.att-dep-mode-transfer {
background: var(--bs-primary-soft);
color: var(--bs-primary);
}
[data-theme="dark"] .att-dep-mode-transfer {
background: rgba(255,255,255,0.06);
color: var(--bs-fg);
}
.att-dep-mode-ticket {
background: var(--bs-warning-soft);
color: #b45309;
}
[data-theme="dark"] .att-dep-mode-ticket {
background: rgba(245,158,11,0.15);
color: #fcd34d;
}
.att-dep-mode-both {
background: linear-gradient(135deg, var(--bs-primary), var(--bs-accent));
color: #ffffff;
}
/* Action-Line in Department-Card (was passiert konkret) */
.att-dep-action-line {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: 6px;
padding: 6px 10px;
background: var(--bs-bg-subtle);
border-radius: var(--bs-r-sm);
font-size: var(--bs-text-xs);
color: var(--bs-fg-muted);
}
.att-dep-action-line.att-dep-action-transfer {
background: var(--bs-primary-soft);
}
[data-theme="dark"] .att-dep-action-line.att-dep-action-transfer {
background: rgba(255,255,255,0.04);
}
.att-dep-action-fragment {
display: inline-flex;
align-items: center;
gap: 4px;
}
.att-dep-action-fragment.att-dep-action-crm {
color: var(--bs-primary);
font-weight: var(--bs-weight-medium);
}
.att-dep-action-sep {
color: var(--bs-fg-subtle);
font-weight: var(--bs-weight-bold);
}
.att-dep-action-warn {
color: var(--bs-warning) !important;
font-style: normal;
}
/* Postfach-Sub-Tabs (über der Tabelle) */
.att-msg-subtabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--bs-border);
margin: var(--bs-3) 0 var(--bs-3);
flex-wrap: wrap;
}
.att-msg-subtab {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 18px;
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
cursor: pointer;
color: var(--bs-fg-muted);
font-family: inherit;
font-size: var(--bs-text-sm);
font-weight: var(--bs-weight-medium);
transition: color var(--bs-transition), border-color var(--bs-transition);
}
.att-msg-subtab:hover { color: var(--bs-fg); }
.att-msg-subtab.active {
color: var(--bs-primary);
border-bottom-color: var(--bs-primary);
font-weight: var(--bs-weight-semibold);
}
.att-msg-subtab-icon {
font-size: 14px;
line-height: 1;
}
.att-msg-subtab-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 18px;
padding: 0 6px;
background: var(--bs-bg-subtle);
color: var(--bs-fg-muted);
border-radius: 9px;
font-size: 10px;
font-family: var(--bs-font-mono);
font-weight: var(--bs-weight-semibold);
}
.att-msg-subtab.active .att-msg-subtab-count {
background: var(--bs-primary);
color: #ffffff;
}
.att-msg-subtab-count:empty { display: none; }
/* Stats-Bar mit Icon */
.att-msg-stat {
position: relative;
}
.att-msg-stat-icon {
position: absolute;
top: 10px;
right: 12px;
color: var(--bs-fg-subtle);
opacity: 0.6;
}
.att-msg-stat-crm-day .att-msg-stat-value { color: var(--bs-primary); }
.att-msg-stat-crm-pending .att-msg-stat-value { color: var(--bs-warning); }
/* ═══════════════════════════════════════════════════════════════════════
Phase 9: MCP Tool-Discovery + Default-Args + Test-Result-Polish
═══════════════════════════════════════════════════════════════════════ */
/* Discover-Bar: prominent gehighlighteter Call-to-Action über Param-Builder */
.dae-discover-bar {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 16px;
background: linear-gradient(135deg, var(--bs-primary-soft), var(--bs-accent-soft));
border: 1px solid var(--bs-primary-soft);
border-radius: var(--bs-r-sm);
margin-bottom: var(--bs-3);
}
[data-theme="dark"] .dae-discover-bar {
background: linear-gradient(135deg, rgba(30,41,59,0.1), rgba(16,185,129,0.06));
border-color: rgba(30,41,59,0.2);
}
.dae-discover-info {
display: flex;
align-items: flex-start;
gap: 10px;
flex: 1;
min-width: 0;
}
.dae-discover-icon {
font-size: 18px;
flex-shrink: 0;
}
.dae-discover-info strong {
font-family: var(--bs-font-display);
font-weight: var(--bs-weight-semibold);
font-size: var(--bs-text-sm);
color: var(--bs-fg);
}
/* Tool-Picker-Modal: Tool-Cards */
.ddi-tool-list {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.ddi-tool-card {
display: flex;
flex-direction: column;
gap: 6px;
padding: 14px 16px;
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-sm);
cursor: pointer;
transition: all var(--bs-transition);
position: relative;
}
.ddi-tool-card:hover {
background: var(--bs-bg-elevated);
border-color: var(--bs-primary);
box-shadow: 0 4px 12px -4px rgba(30,41,59,0.25);
transform: translateY(-1px);
}
.ddi-tool-card.is-blocked {
background: var(--bs-bg-subtle);
border-style: dashed;
cursor: not-allowed;
opacity: 0.7;
}
.ddi-tool-card.is-blocked:hover {
transform: none;
box-shadow: none;
}
.ddi-tool-head {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.ddi-tool-name {
font-family: var(--bs-font-mono);
font-size: var(--bs-text-sm);
font-weight: var(--bs-weight-semibold);
color: var(--bs-fg);
letter-spacing: -0.01em;
}
.ddi-tool-cat {
text-transform: uppercase;
font-size: 9px;
letter-spacing: 0.06em;
}
.ddi-tool-current {
display: inline-flex;
align-items: center;
padding: 2px 8px;
background: var(--bs-success-soft);
color: var(--bs-success);
border-radius: 10px;
font-size: 10px;
font-weight: var(--bs-weight-semibold);
letter-spacing: 0.04em;
}
.ddi-tool-blocked {
display: inline-flex;
align-items: center;
padding: 2px 8px;
background: var(--bs-warning-soft);
color: var(--bs-warning);
border-radius: 10px;
font-size: 10px;
font-weight: var(--bs-weight-semibold);
font-family: var(--bs-font-mono);
}
.ddi-tool-desc {
margin: 0;
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
line-height: 1.4;
}
.ddi-tool-card.is-blocked .ddi-tool-desc {
font-style: italic;
}
.ddi-tool-meta {
font-size: var(--bs-text-xs);
color: var(--bs-fg-subtle);
font-family: var(--bs-font-mono);
}
.ddi-tool-cta {
position: absolute;
top: 14px;
right: 14px;
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--bs-text-xs);
font-weight: var(--bs-weight-semibold);
color: var(--bs-primary);
opacity: 0;
transition: opacity var(--bs-transition);
}
.ddi-tool-card:hover:not(.is-blocked) .ddi-tool-cta {
opacity: 1;
}
.ddi-blocked-section {
margin-top: var(--bs-4);
padding-top: var(--bs-3);
border-top: 1px dashed var(--bs-border);
}
.ddi-tool-list-blocked .ddi-tool-card {
pointer-events: none;
}
/* Analyze-Status-Banner (Phase 9.3): über Param-Actions */
.dae-analyze-status {
margin: 4px 0 8px;
padding: 10px 14px;
border-radius: var(--bs-r-sm);
font-size: var(--bs-text-sm);
line-height: 1.45;
}
.dae-analyze-status code {
background: var(--bs-bg-elevated);
padding: 1px 6px;
border-radius: 3px;
font-size: 11px;
font-family: var(--bs-font-mono);
}
.dae-analyze-loading {
background: var(--bs-bg-subtle);
color: var(--bs-fg-muted);
border-left: 3px solid var(--bs-fg-subtle);
}
.dae-analyze-ok {
background: var(--bs-success-soft);
color: var(--bs-fg);
border-left: 3px solid var(--bs-success);
}
[data-theme="dark"] .dae-analyze-ok {
background: rgba(16,185,129,0.08);
}
.dae-analyze-warn {
background: var(--bs-warning-soft);
color: var(--bs-fg);
border-left: 3px solid var(--bs-warning);
}
.dae-analyze-fail {
background: var(--bs-danger-soft);
color: var(--bs-fg);
border-left: 3px solid var(--bs-danger);
}
[data-theme="dark"] .dae-analyze-fail {
background: rgba(239,68,68,0.08);
}
/* ═══════════════════════════════════════════════════════════════════════
KI-Modell-Picker Radio-Cards (Phase 13b/c — Tenant-side)
═══════════════════════════════════════════════════════════════════════ */
.att-radio-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-bottom: var(--bs-4);
}
@media (max-width: 700px) {
.att-radio-group { grid-template-columns: 1fr; }
}
.att-radio-card {
display: grid;
grid-template-columns: auto 1fr;
gap: 12px;
padding: 14px 16px;
background: var(--bs-bg-elevated);
border: 1.5px solid var(--bs-border);
border-radius: var(--bs-r);
cursor: pointer;
transition: all var(--bs-transition);
align-items: flex-start;
position: relative;
}
.att-radio-card:hover {
border-color: var(--bs-primary-soft);
transform: translateY(-1px);
}
.att-radio-card.is-active {
border-color: var(--bs-primary);
background: var(--bs-primary-soft);
box-shadow: 0 0 0 3px var(--bs-primary-soft);
}
.att-radio-tier-mini.is-active {
border-color: var(--bs-success);
background: var(--bs-success-soft);
box-shadow: 0 0 0 3px var(--bs-success-soft);
}
[data-theme="dark"] .att-radio-card.is-active {
background: rgba(30,41,59,0.1);
}
[data-theme="dark"] .att-radio-tier-mini.is-active {
background: rgba(16,185,129,0.08);
}
.att-radio-card input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.att-radio-icon {
font-size: 22px;
line-height: 1;
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--bs-bg-subtle);
border-radius: var(--bs-r-sm);
flex-shrink: 0;
}
.att-radio-card.is-active .att-radio-icon { background: #ffffff; }
[data-theme="dark"] .att-radio-card.is-active .att-radio-icon { background: var(--bs-bg-elevated); }
.att-radio-body {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.att-radio-body strong {
font-family: var(--bs-font-display);
font-size: var(--bs-text-md);
font-weight: var(--bs-weight-bold);
letter-spacing: -0.025em;
color: var(--bs-fg);
line-height: 1.2;
}
.att-radio-card.is-active .att-radio-body strong { color: var(--bs-primary); }
.att-radio-tier-mini.is-active .att-radio-body strong { color: var(--bs-success); }
.att-radio-desc {
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
line-height: 1.45;
}
.att-radio-id {
font-size: 10px;
color: var(--bs-fg-subtle);
font-family: var(--bs-font-mono);
letter-spacing: 0.02em;
}
/* ═══════════════════════════════════════════════════════════════════════
Voll-Modus Outputs-Hint (Phase 13d) — verweist auf Per-Extension-Konfig
═══════════════════════════════════════════════════════════════════════ */
.att-outputs-fullmode-hint {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
background: var(--bs-bg-subtle);
border: 1px dashed var(--bs-border);
border-radius: var(--bs-r-sm);
margin-bottom: var(--bs-4);
}
.att-outputs-fullmode-icon {
font-size: 22px;
flex-shrink: 0;
}
.att-outputs-fullmode-text {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.att-outputs-fullmode-text strong {
font-family: var(--bs-font-display);
font-size: var(--bs-text-sm);
font-weight: var(--bs-weight-semibold);
color: var(--bs-fg);
}
.att-outputs-fullmode-text > span {
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
line-height: 1.5;
}
.att-outputs-fullmode-text a {
color: var(--bs-primary);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
/* ═══════════════════════════════════════════════════════════════════════
Derived-Mode-Banner (Phase 13c) — read-only, folgt dem KI-Modell
═══════════════════════════════════════════════════════════════════════ */
.att-derived-mode-banner {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 14px;
align-items: center;
padding: 14px 18px;
background: linear-gradient(135deg, var(--bs-primary-soft), var(--bs-accent-soft));
border: 1px solid var(--bs-primary-soft);
border-radius: var(--bs-r);
margin-bottom: var(--bs-4);
}
[data-theme="dark"] .att-derived-mode-banner {
background: linear-gradient(135deg, rgba(30,41,59,0.1), rgba(16,185,129,0.06));
border-color: rgba(30,41,59,0.2);
}
.att-derived-mode-icon {
font-size: 28px;
line-height: 1;
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--bs-bg-elevated);
border-radius: var(--bs-r-sm);
}
.att-derived-mode-text {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.att-derived-mode-text strong {
font-family: var(--bs-font-display);
font-size: var(--bs-text-md);
font-weight: var(--bs-weight-bold);
letter-spacing: -0.025em;
color: var(--bs-fg);
}
.att-derived-mode-text p,
.att-derived-mode-text span {
margin: 0;
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
line-height: 1.45;
}
.att-derived-mode-foot,
.att-derived-mode-hint {
font-size: var(--bs-text-xs);
color: var(--bs-fg-subtle);
font-family: var(--bs-font-mono);
letter-spacing: 0.02em;
text-align: right;
white-space: nowrap;
}
@media (max-width: 700px) {
.att-derived-mode-banner {
grid-template-columns: auto 1fr;
}
.att-derived-mode-foot,
.att-derived-mode-hint {
grid-column: 1 / -1;
text-align: left;
}
}
/* ═══════════════════════════════════════════════════════════════════════
Operation-Mode-Selector + Outputs (Phase 10) — Tab 2 Konfiguration
═══════════════════════════════════════════════════════════════════════ */
/* Mode-Cards (Voll vs. Einfach) */
.att-opmode-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-bottom: var(--bs-4);
}
@media (max-width: 700px) {
.att-opmode-cards { grid-template-columns: 1fr; }
}
.att-opmode-card {
display: grid;
grid-template-columns: auto 1fr;
gap: 14px;
padding: 16px 18px;
background: var(--bs-bg-elevated);
border: 1.5px solid var(--bs-border);
border-radius: var(--bs-r);
cursor: pointer;
transition: all var(--bs-transition);
align-items: flex-start;
position: relative;
}
.att-opmode-card:hover {
border-color: var(--bs-primary-soft);
transform: translateY(-1px);
}
.att-opmode-card.is-active {
border-color: var(--bs-primary);
background: var(--bs-primary-soft);
box-shadow: 0 0 0 3px var(--bs-primary-soft), 0 6px 16px -6px rgba(30,41,59,0.25);
}
[data-theme="dark"] .att-opmode-card.is-active {
background: rgba(30,41,59,0.1);
}
.att-opmode-card input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.att-opmode-icon {
font-size: 26px;
line-height: 1;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--bs-bg-subtle);
border-radius: var(--bs-r-sm);
flex-shrink: 0;
}
.att-opmode-card.is-active .att-opmode-icon {
background: #ffffff;
}
[data-theme="dark"] .att-opmode-card.is-active .att-opmode-icon {
background: var(--bs-bg-elevated);
}
.att-opmode-body {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.att-opmode-body strong {
font-family: var(--bs-font-display);
font-size: var(--bs-text-md);
font-weight: var(--bs-weight-bold);
letter-spacing: -0.025em;
color: var(--bs-fg);
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.att-opmode-card.is-active .att-opmode-body strong {
color: var(--bs-primary);
}
.att-opmode-pill {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 10px;
font-size: 10px;
font-weight: var(--bs-weight-semibold);
letter-spacing: 0.04em;
font-family: var(--bs-font-mono);
background: var(--bs-bg-subtle);
color: var(--bs-fg-muted);
white-space: nowrap;
}
.att-opmode-pill-mini {
background: var(--bs-success-soft);
color: var(--bs-success);
}
.att-opmode-sub {
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
line-height: 1.45;
}
/* Simple-Section (conditional) */
.att-simple-section {
margin-bottom: var(--bs-4);
}
.att-simple-action-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.att-simple-action-row {
display: grid;
grid-template-columns: auto auto 1fr;
gap: 12px;
align-items: center;
padding: 14px 16px;
background: var(--bs-bg-subtle);
border: 1.5px solid var(--bs-border);
border-radius: var(--bs-r-sm);
cursor: pointer;
transition: all var(--bs-transition);
}
.att-simple-action-row:hover {
border-color: var(--bs-primary-soft);
}
.att-simple-action-row.is-active {
border-color: var(--bs-primary);
background: var(--bs-primary-soft);
}
[data-theme="dark"] .att-simple-action-row.is-active {
background: rgba(30,41,59,0.08);
}
.att-simple-action-row input[type="radio"] {
margin: 0;
accent-color: var(--bs-primary);
}
.att-simple-action-icon {
font-size: 20px;
line-height: 1;
}
.att-simple-action-text {
display: flex;
flex-direction: column;
gap: 4px;
}
.att-simple-action-text strong {
font-family: var(--bs-font-display);
font-weight: var(--bs-weight-semibold);
font-size: var(--bs-text-sm);
color: var(--bs-fg);
}
.att-simple-action-text > span {
font-size: var(--bs-text-xs);
color: var(--bs-fg-muted);
line-height: 1.4;
}
.att-simple-ext-wrap {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 6px;
}
.att-simple-ext-wrap .bs-label {
font-size: var(--bs-text-xs);
font-weight: var(--bs-weight-medium);
color: var(--bs-fg-muted);
margin: 0;
}
.att-simple-ext-input {
height: 32px;
width: 110px;
font-size: var(--bs-text-sm);
}
.att-simple-ext-input:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* Outputs-Liste */
.att-outputs-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: var(--bs-4);
}
.att-output-row {
display: grid;
grid-template-columns: auto auto 1fr;
gap: 12px;
align-items: center;
padding: 12px 16px;
background: var(--bs-bg-subtle);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r-sm);
cursor: pointer;
transition: all var(--bs-transition);
}
.att-output-row:has(input:checked) {
border-color: var(--bs-primary-soft);
background: var(--bs-primary-soft);
}
[data-theme="dark"] .att-output-row:has(input:checked) {
background: rgba(30,41,59,0.08);
}
.att-output-row input[type="checkbox"] {
margin: 0;
accent-color: var(--bs-primary);
}
.att-output-icon {
font-size: 18px;
line-height: 1;
}
.att-output-text {
display: flex;
flex-direction: column;
gap: 4px;
}
.att-output-text strong {
font-family: var(--bs-font-display);
font-weight: var(--bs-weight-semibold);
font-size: var(--bs-text-sm);
color: var(--bs-fg);
}
.att-output-text > span {
font-size: var(--bs-text-xs);
color: var(--bs-fg-muted);
line-height: 1.4;
}
.att-output-email-wrap {
margin-top: 6px;
}
.att-output-email-input {
height: 32px;
font-size: var(--bs-text-sm);
}
.att-output-email-input:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* Hints — orange Warning + roter Error mit optionalem CTA */
.att-config-hints {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: var(--bs-4);
}
.att-config-hint {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-radius: var(--bs-r-sm);
font-size: var(--bs-text-sm);
line-height: 1.5;
}
.att-config-hint > span { flex: 1; }
.att-config-hint-warn {
background: var(--bs-warning-soft);
border-left: 3px solid var(--bs-warning);
color: var(--bs-fg);
}
.att-config-hint-error {
background: var(--bs-danger-soft);
border-left: 3px solid var(--bs-danger);
color: var(--bs-fg);
}
[data-theme="dark"] .att-config-hint-warn { background: rgba(245,158,11,0.08); }
[data-theme="dark"] .att-config-hint-error { background: rgba(239,68,68,0.08); }
/* Simple-Mode: Departments + Extensions Sub-Tabs ausgrauen */
body.att-opmode-simple .att-sub-btn[data-att-tab="departments"],
body.att-opmode-simple .att-sub-btn[data-att-tab="extensions"],
body.att-opmode-simple .att-sub-btn[data-att-tab="prompt"] {
opacity: 0.4;
position: relative;
}
body.att-opmode-simple .att-sub-btn[data-att-tab="departments"]::after,
body.att-opmode-simple .att-sub-btn[data-att-tab="extensions"]::after,
body.att-opmode-simple .att-sub-btn[data-att-tab="prompt"]::after {
content: "Nicht relevant";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
margin-top: 2px;
font-size: 9px;
letter-spacing: 0.04em;
color: var(--bs-fg-subtle);
white-space: nowrap;
font-family: var(--bs-font-mono);
pointer-events: none;
}
/* ═══════════════════════════════════════════════════════════════════════
KI-Modell-Picker (Phase 9.5) — Tab 2 Konfiguration
═══════════════════════════════════════════════════════════════════════ */
.att-model-picker {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 14px;
margin-bottom: var(--bs-4);
}
.att-model-picker[aria-busy="true"] {
display: block;
}
.att-model-card {
display: flex;
flex-direction: column;
gap: 10px;
text-align: left;
padding: 18px 20px;
background: var(--bs-bg-elevated);
border: 1.5px solid var(--bs-border);
border-radius: var(--bs-r);
cursor: pointer;
font-family: inherit;
color: inherit;
transition: all var(--bs-transition);
position: relative;
}
.att-model-card:hover {
border-color: var(--bs-primary-soft);
background: var(--bs-bg-elevated);
transform: translateY(-2px);
box-shadow: 0 6px 18px -6px rgba(30,41,59,0.18);
}
.att-model-card:focus-visible {
outline: 2px solid var(--bs-primary);
outline-offset: 2px;
}
.att-model-card.is-active {
border-color: var(--bs-primary);
background: var(--bs-primary-soft);
box-shadow: 0 0 0 3px var(--bs-primary-soft), 0 6px 18px -6px rgba(30,41,59,0.25);
}
[data-theme="dark"] .att-model-card.is-active {
background: rgba(30,41,59,0.1);
}
.att-model-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.att-model-name {
font-family: var(--bs-font-display);
font-size: var(--bs-text-md);
font-weight: var(--bs-weight-bold);
letter-spacing: -0.025em;
color: var(--bs-fg);
line-height: 1.2;
}
.att-model-card.is-active .att-model-name {
color: var(--bs-primary);
}
.att-model-badge-active {
display: inline-flex;
align-items: center;
padding: 3px 10px;
background: var(--bs-primary);
color: #ffffff;
border-radius: 10px;
font-size: 10px;
font-weight: var(--bs-weight-semibold);
letter-spacing: 0.04em;
font-family: var(--bs-font-mono);
white-space: nowrap;
flex-shrink: 0;
}
.att-model-id {
font-size: 10px;
color: var(--bs-fg-subtle);
font-family: var(--bs-font-mono);
word-break: break-all;
}
.att-model-id code {
background: transparent;
padding: 0;
}
.att-model-desc {
margin: 0;
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
line-height: 1.5;
}
/* Pricing-Box: prominent */
.att-model-pricing {
display: flex;
align-items: baseline;
gap: 6px;
flex-wrap: wrap;
padding: 10px 12px;
background: var(--bs-bg-subtle);
border-radius: var(--bs-r-sm);
border-left: 3px solid var(--bs-primary);
}
.att-model-card.is-active .att-model-pricing {
background: var(--bs-bg-elevated);
}
.att-model-price-main {
font-family: var(--bs-font-display);
font-size: 22px;
font-weight: var(--bs-weight-bold);
letter-spacing: -0.04em;
color: var(--bs-fg);
line-height: 1;
}
.att-model-card.is-active .att-model-price-main { color: var(--bs-primary); }
.att-model-price-sub {
font-size: var(--bs-text-xs);
color: var(--bs-fg-muted);
}
.att-model-price-usd {
margin-left: auto;
font-size: 10px;
font-family: var(--bs-font-mono);
color: var(--bs-fg-subtle);
}
/* Empfehlungs-Liste */
.att-model-recs {
display: flex;
flex-direction: column;
gap: 6px;
}
.att-model-recs-title {
font-size: 10px;
font-weight: var(--bs-weight-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bs-fg-subtle);
font-family: var(--bs-font-mono);
}
.att-model-recs ul {
margin: 0;
padding-left: 18px;
display: flex;
flex-direction: column;
gap: 3px;
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
line-height: 1.4;
}
/* Tier-spezifische Akzent-Farben */
.att-model-tier-mini .att-model-pricing {
border-left-color: var(--bs-success);
}
.att-model-tier-mini.is-active .att-model-price-main {
color: var(--bs-success);
}
.att-model-tier-mini.is-active {
border-color: var(--bs-success);
background: var(--bs-success-soft);
box-shadow: 0 0 0 3px var(--bs-success-soft), 0 6px 18px -6px rgba(16,185,129,0.25);
}
[data-theme="dark"] .att-model-tier-mini.is-active {
background: rgba(16,185,129,0.08);
}
.att-model-tier-mini.is-active .att-model-name {
color: var(--bs-success);
}
.att-model-tier-mini.is-active .att-model-badge-active {
background: var(--bs-success);
}
/* Tenant-Side Read-Only Modell-Info-Banner (Phase 9.6.1, Policy-Lock 27.04. spät)
Kein Pricing, kein Picker. Quelle: att.config.realtime_model{} aus /attendant/config */
.att-model-info-card {
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px 20px;
background: var(--bs-bg-subtle);
border: 1px solid var(--bs-border);
border-radius: var(--bs-r);
margin-bottom: var(--bs-4);
}
.att-model-info-header {
display: flex;
align-items: flex-start;
gap: 14px;
}
.att-model-info-icon {
font-size: 24px;
line-height: 1;
flex-shrink: 0;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--bs-r-sm);
background: var(--bs-bg-elevated);
}
.att-model-info-titleblock {
flex: 1;
min-width: 0;
}
.att-model-info-toprow {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.att-model-info-name {
font-family: var(--bs-font-display);
font-size: var(--bs-text-md);
font-weight: var(--bs-weight-bold);
color: var(--bs-fg);
letter-spacing: -0.025em;
line-height: 1.2;
}
.att-model-info-tier {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 10px;
font-size: 10px;
font-weight: var(--bs-weight-semibold);
letter-spacing: 0.04em;
font-family: var(--bs-font-mono);
white-space: nowrap;
}
.att-model-info-tier[data-tier="premium"] {
background: linear-gradient(135deg, #f59e0b, #ef4444);
color: #ffffff;
}
.att-model-info-tier:not([data-tier="premium"]) {
background: var(--bs-primary-soft);
color: var(--bs-primary);
}
.att-model-info-default {
display: inline-flex;
align-items: center;
padding: 3px 10px;
background: var(--bs-bg-elevated);
border: 1px solid var(--bs-border);
border-radius: 10px;
font-size: 10px;
font-weight: var(--bs-weight-medium);
letter-spacing: 0.04em;
color: var(--bs-fg-muted);
white-space: nowrap;
}
.att-model-info-id {
margin-top: 4px;
font-size: 11px;
color: var(--bs-fg-subtle);
font-family: var(--bs-font-mono);
word-break: break-all;
}
.att-model-info-desc {
margin: 0;
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
line-height: 1.5;
}
.att-model-info-foot {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 10px 12px;
background: var(--bs-bg-elevated);
border-radius: var(--bs-r-sm);
border-left: 3px solid var(--bs-primary-soft);
font-size: var(--bs-text-xs);
color: var(--bs-fg-muted);
line-height: 1.45;
}
.att-model-info-foot-icon {
font-size: 14px;
flex-shrink: 0;
}
/* Param-Row Default-Sub-Row (Phase 9.3 — unified UI) */
.dae-param-default-row {
grid-column: 1 / -1;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 10px;
padding-top: 8px;
margin-top: 4px;
border-top: 1px dashed var(--bs-border);
}
.dae-param-default-label {
font-size: var(--bs-text-xs);
font-weight: var(--bs-weight-medium);
color: var(--bs-fg-muted);
font-family: var(--bs-font-mono);
letter-spacing: 0.02em;
white-space: nowrap;
}
.dae-param-default-cell {
min-width: 0;
}
.dae-param-default-cell .dae-param-default-input,
.dae-param-default-cell .dae-param-default-select {
width: 100%;
height: 34px;
font-size: var(--bs-text-sm);
}
.dae-param-default-cell .dae-param-default-input::placeholder {
font-style: italic;
color: var(--bs-fg-subtle);
}
.dae-param-default-cell .dae-param-default-select {
border-color: var(--bs-primary-soft);
background: var(--bs-primary-soft);
color: var(--bs-fg);
font-weight: var(--bs-weight-medium);
}
[data-theme="dark"] .dae-param-default-cell .dae-param-default-select {
background: rgba(30,41,59,0.1);
border-color: rgba(30,41,59,0.3);
}
@media (max-width: 700px) {
.dae-param-default-row {
grid-template-columns: 1fr;
gap: 4px;
}
}
/* Test-Result-Polish: extrahierte Message + Raw-Body in Details */
.dae-test-msg {
margin-top: 10px;
padding: 12px 14px;
border-radius: var(--bs-r-sm);
font-size: var(--bs-text-sm);
line-height: 1.5;
color: var(--bs-fg);
}
.dae-test-msg-ok {
background: var(--bs-success-soft);
border-left: 3px solid var(--bs-success);
}
[data-theme="dark"] .dae-test-msg-ok {
background: rgba(16,185,129,0.08);
}
.dae-test-msg-fail {
background: var(--bs-danger-soft);
border-left: 3px solid var(--bs-danger);
}
[data-theme="dark"] .dae-test-msg-fail {
background: rgba(239,68,68,0.08);
}
.dae-test-raw {
margin-top: 8px;
border: 1px dashed var(--bs-border);
border-radius: var(--bs-r-sm);
background: var(--bs-bg-subtle);
}
.dae-test-raw > summary {
cursor: pointer;
padding: 8px 12px;
font-size: var(--bs-text-xs);
color: var(--bs-fg-muted);
font-family: var(--bs-font-mono);
list-style: none;
user-select: none;
}
.dae-test-raw > summary::-webkit-details-marker { display: none; }
.dae-test-raw > summary::before {
content: "▸ ";
display: inline-block;
transition: transform var(--bs-transition);
}
.dae-test-raw[open] > summary::before {
transform: rotate(90deg);
}
.dae-test-raw .dae-test-body {
margin: 0;
padding: 10px 12px;
border-top: 1px dashed var(--bs-border);
background: var(--bs-bg-elevated);
font-family: var(--bs-font-mono);
font-size: 11px;
color: var(--bs-fg);
overflow-x: auto;
white-space: pre-wrap;
word-break: break-word;
max-height: 300px;
overflow-y: auto;
}
/* Infinite-Scroll Sentinel + End-Marker (Phase 9.8) */
.att-msg-loadmore {
padding: 24px 16px;
display: flex;
justify-content: center;
align-items: center;
}
.att-msg-loadmore .bs-loading {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 18px;
background: var(--bs-bg-subtle);
border-radius: 999px;
font-size: var(--bs-text-sm);
color: var(--bs-fg-muted);
}
.att-msg-endmarker {
padding: 18px 16px;
display: flex;
justify-content: center;
align-items: center;
font-size: var(--bs-text-xs);
color: var(--bs-fg-subtle);
font-family: var(--bs-font-mono);
letter-spacing: 0.04em;
}
.att-msg-endmarker span {
padding: 6px 14px;
border: 1px dashed var(--bs-border);
border-radius: 999px;
}
/* CRM-View: erweiterte Card-Spalten */
.att-msg-row-crm .att-msg-summary {
margin-bottom: 6px;
}
.att-msg-crm-line {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding: 6px 10px;
background: var(--bs-success-soft);
border-radius: var(--bs-r-sm);
font-size: var(--bs-text-xs);
}
[data-theme="dark"] .att-msg-crm-line {
background: rgba(16,185,129,0.08);
}
.att-msg-crm-provider {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--bs-fg);
}
.att-msg-crm-provider strong {
color: var(--bs-success);
font-weight: var(--bs-weight-semibold);
}
.att-msg-crm-id-link {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--bs-primary);
text-decoration: none;
transition: opacity var(--bs-transition);
}
.att-msg-crm-id-link:hover { opacity: 0.75; }
.att-msg-crm-id {
color: var(--bs-fg-muted);
}
.att-msg-crm-synced-at {
color: var(--bs-fg-subtle);
font-family: var(--bs-font-mono);
margin-left: auto;
}
/* ═══════════════════════════════════════════════════════════════════════
Kunden-Modal V2 — 2-Spalten Layout (2026-05-01)
Sidebar links (Lucide-Icon + Label) + Content rechts.
Breit (1200px max), kein horizontaler Tab-Strip mit Mini-Scrollbar.
Hohe Spezifität via .dialog-tenant-v2 — überschreibt vm-dialog/dialog-lg.
═══════════════════════════════════════════════════════════════════════ */
.dialog-tenant-v2 .dialog-tenant-inner {
max-width: min(96vw, 1200px) !important;
width: 96vw;
/* FIXE Höhe statt max-height — Modal bleibt bei Tab-Wechsel konstant,
Ansicht „springt" nicht mehr je nach Inhalt. Content-Spalte scrollt
eigenständig wenn Inhalt überläuft. */
height: 88vh;
max-height: 88vh;
display: flex;
flex-direction: column;
overflow: hidden; /* Body scrollt eigenständig, nicht Inner */
padding: 0;
}
/* Header fix oben — kein eigener Scroll */
.dialog-tenant-v2 .dialog-header {
flex-shrink: 0;
padding: 18px 24px;
border-bottom: 1px solid var(--bs-border);
background: var(--bs-bg-elevated);
}
/* Body = horizontaler Container für Sidebar + Content */
.dialog-tenant-v2 .tenant-dialog-body-v2 {
display: grid;
grid-template-columns: 240px 1fr;
flex: 1;
min-height: 0; /* Verhindert Overflow durch flex-children */
padding: 0 !important;
background: var(--bs-bg-subtle);
}
/* Sidebar = vertikale Tab-Navigation */
.dialog-tenant-v2 .tenant-dialog-sidebar {
background: var(--bs-bg-subtle);
border-right: 1px solid var(--bs-border);
padding: 16px 12px;
overflow-y: auto;
}
.dialog-tenant-v2 .tenant-dialog-tabs {
display: flex !important;
flex-direction: column !important;
gap: 2px;
border-bottom: 0 !important;
padding: 0 !important;
flex-wrap: nowrap !important;
overflow: visible !important;
}
/* Tab-Buttons — vertikal, mit Icon + Label */
.dialog-tenant-v2 .tdt-btn {
display: flex !important;
align-items: center;
gap: 12px;
padding: 10px 14px !important;
background: transparent !important;
border: 1px solid transparent !important;
border-bottom: 1px solid transparent !important; /* überschreibt alten 2px-Border */
border-radius: 8px;
color: var(--bs-fg-muted) !important;
font-family: inherit;
font-size: 14px !important;
font-weight: 500 !important;
cursor: pointer;
text-align: left;
width: 100%;
margin-bottom: 0 !important;
transition: background var(--bs-transition), color var(--bs-transition);
}
.dialog-tenant-v2 .tdt-btn .tdt-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
flex-shrink: 0;
color: inherit;
}
.dialog-tenant-v2 .tdt-btn .tdt-icon svg {
width: 18px;
height: 18px;
stroke-width: 2;
}
.dialog-tenant-v2 .tdt-btn:hover {
background: var(--bs-bg-elevated) !important;
color: var(--bs-fg) !important;
border-bottom-color: transparent !important;
}
.dialog-tenant-v2 .tdt-btn.active {
background: var(--bs-primary) !important;
color: var(--bs-primary-fg) !important;
border-color: var(--bs-primary) !important;
font-weight: 600 !important;
}
.dialog-tenant-v2 .tdt-btn.active:hover {
background: var(--bs-primary-hover) !important;
color: var(--bs-primary-fg) !important;
}
/* Danger-Tab — separator + roter Akzent */
.dialog-tenant-v2 .tdt-btn-danger {
margin-top: 12px !important;
border-top: 1px solid var(--bs-border) !important;
padding-top: 14px !important;
border-radius: 0 8px 8px 0;
}
.dialog-tenant-v2 .tdt-btn-danger:not(.active) {
color: var(--bs-fg-muted) !important;
}
.dialog-tenant-v2 .tdt-btn-danger:not(.active):hover {
color: var(--bs-danger) !important;
background: var(--bs-danger-soft) !important;
}
.dialog-tenant-v2 .tdt-btn-danger.active {
background: var(--bs-danger) !important;
border-color: var(--bs-danger) !important;
color: #fff !important;
}
/* Content-Spalte — eigener Scrollbereich */
.dialog-tenant-v2 .tenant-dialog-content {
background: var(--bs-bg);
overflow-y: auto;
min-height: 0;
}
.dialog-tenant-v2 .tdp {
padding: 28px 32px !important;
max-width: 880px; /* Lesbarkeits-Limit für Forms innerhalb der breiten Spalte */
}
/* Mobile: Sidebar wird zu horizontalen Tabs oben */
@media (max-width: 860px) {
.dialog-tenant-v2 .dialog-tenant-inner {
width: 100vw;
max-width: 100vw !important;
height: 100vh;
max-height: 100vh;
border-radius: 0;
}
.dialog-tenant-v2 .tenant-dialog-body-v2 {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
}
.dialog-tenant-v2 .tenant-dialog-sidebar {
border-right: 0;
border-bottom: 1px solid var(--bs-border);
padding: 8px;
overflow-x: auto;
overflow-y: hidden;
}
.dialog-tenant-v2 .tenant-dialog-tabs {
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 4px;
}
.dialog-tenant-v2 .tdt-btn {
width: auto;
white-space: nowrap;
padding: 8px 12px !important;
}
.dialog-tenant-v2 .tdt-btn .tdt-label { font-size: 13px; }
.dialog-tenant-v2 .tdt-btn-danger {
margin-top: 0 !important;
border-top: 0 !important;
padding-top: 8px !important;
margin-left: auto !important;
}
.dialog-tenant-v2 .tdp {
padding: 20px 16px !important;
max-width: 100%;
}
}