/* ══════════════════════════════════════════════════════════════════
Sell.ly CRM — Auto-generated CSS bundle
DO NOT EDIT — modify files in styles/ instead.
Generated: 2026-07-27T14:14:44Z
══════════════════════════════════════════════════════════════════ */
/* Design tokens & CSS variables */
/* ══════════════════════════════════════════════════════════════════
Sell.ly CRM — Design System
Apple-style Dark Mode Glassmorphism — SVG Icons, no emoji.
══════════════════════════════════════════════════════════════════ */
/* ── Design Tokens ─────────────────────────────────────────────── */
:root {
/* Surface — deep dark with subtle blue undertone */
--bg-primary: #060a14;
--bg-secondary: #0c1222;
--bg-card: rgba(12, 18, 34, 0.75);
--bg-hover: rgba(30, 41, 64, 0.5);
--bg-input: rgba(12, 18, 34, 0.5);
--bg-elevated: rgba(18, 26, 48, 0.9);
/* Glass — opaque dark panels (no blur for performance) */
--glass-bg: rgba(12, 18, 34, 0.92);
--glass-bg-solid: rgba(12, 18, 34, 0.97);
--glass-border: rgba(148, 163, 184, 0.07);
--glass-border-hover: rgba(99, 102, 241, 0.35);
--glass-border-subtle: rgba(148, 163, 184, 0.04);
/* Text */
--text-primary: #f1f5f9;
--text-secondary: #94a3b8;
--text-muted: #64748b;
--text-accent: #a5b4fc;
/* Brand — refined indigo palette */
--accent: #6366f1;
--accent-hover: #818cf8;
--accent-soft: rgba(99, 102, 241, 0.12);
--accent-glow: rgba(99, 102, 241, 0.2);
--accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%);
/* Status */
--success: #34d399;
--danger: #f87171;
--warning: #fbbf24;
--info: #60a5fa;
/* Calendar / event-type colors (reused by Termin & Quickactions) */
--event-call: #2f6fb2;
--event-meeting: #2f8f9d;
--event-task: #a93b6e;
--event-deadline: #8c1f2f;
--event-followup: #c98a2b;
/* ── Chart palette (dashboard KPIs) ─────────────────────────────
Categorical, CVD-ordered, ≥3:1 on the dark bg; bound stably per
category key by widget/color.rs. */
--chart-cat-1: #6366f1; --chart-cat-2: #22d3ee; --chart-cat-3: #f59e0b;
--chart-cat-4: #ec4899; --chart-cat-5: #34d399; --chart-cat-6: #a78bfa;
--chart-cat-7: #f87171; --chart-cat-8: #38bdf8; --chart-cat-9: #fbbf24;
--chart-cat-10: #2dd4bf; --chart-cat-11: #c084fc; --chart-cat-12: #fb923c;
--chart-neutral: #475569;
--chart-grid: rgba(255, 255, 255, 0.07);
--chart-axis: rgba(255, 255, 255, 0.35);
--chart-stroke: rgba(255, 255, 255, 0.14);
--chart-stroke-hover: rgba(255, 255, 255, 0.35);
/* Sequential (single-metric trend) + diverging (signed delta) */
--chart-seq-1: #312e81; --chart-seq-2: #4f46e5; --chart-seq-3: #6366f1;
--chart-seq-4: #22a3d4; --chart-seq-5: #67e8f9;
--chart-pos: #34d399; --chart-neg: #f87171;
/* Spacing */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
/* Radius */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 18px;
--radius-xl: 20px;
--radius-full: 9999px;
/* Pipeline board — harmonised with the app / contact-profile glass look */
--pl-surface: var(--glass-bg); /* columns · cards · toolbar chips */
--pl-surface-alt: rgba(0, 0, 0, 0.22); /* darker inset: value block · avatar panel */
--pl-count-badge: #e11d48; /* coral count badge (matches profile pipeline) */
--pl-bullet: var(--accent); /* indigo field dots */
--pl-avatar: var(--accent-gradient); /* VN avatar (like .cp-avatar) */
/* Admin section rail (collapsed icon rail → hover/edit-expand overlay) */
--admin-rail-w: 76px;
--admin-rail-w-open: 284px;
--app-rail-w: 64px; /* width of the global app sidebar (foundation/_layout) */
/* Shadows — richer depth */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0,0,0,0.2);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45), 0 0 1px rgba(0,0,0,0.2);
--shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 1px rgba(0,0,0,0.2);
--shadow-glow: 0 0 24px var(--accent-glow), 0 0 48px rgba(99,102,241,0.08);
--shadow-inner-glow: inset 0 1px 0 rgba(255,255,255,0.03);
/* Transitions */
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
/* The one easing curve — for @keyframes animation timing-functions. */
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
/* Font */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}
/* ============================================================
User appearance — makes the Darstellung settings actually take
effect app-wide. Driven by attributes the JS sets on :
data-theme="light|dark" · data-font-size="small|medium|large"
data-compact="0|1" · data-has-bg + --app-bg-image
These override the base tokens in foundation/_tokens.css (their
`:root[...]` specificity wins regardless of order).
============================================================ */
/* ── Light theme: override the dark tokens ───────────────────── */
:root[data-theme="light"] {
--bg-primary: #eef2f7;
--bg-secondary: #e2e8f0;
--bg-card: rgba(255, 255, 255, 0.8);
--bg-hover: rgba(15, 23, 42, 0.05);
--bg-input: #ffffff;
--bg-elevated: #ffffff;
--glass-bg: rgba(255, 255, 255, 0.86);
--glass-bg-solid: rgba(255, 255, 255, 0.97);
--glass-border: rgba(15, 23, 42, 0.1);
--glass-border-hover: rgba(99, 102, 241, 0.4);
--glass-border-subtle: rgba(15, 23, 42, 0.06);
--text-primary: #0f172a;
--text-secondary: #475569;
--text-muted: #64748b;
--text-accent: #4f46e5;
--accent-soft: rgba(99, 102, 241, 0.1);
--accent-glow: rgba(99, 102, 241, 0.18);
--chart-grid: rgba(15, 23, 42, 0.08);
--chart-axis: rgba(15, 23, 42, 0.4);
--chart-stroke: rgba(15, 23, 42, 0.14);
--shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.1);
--shadow-md: 0 4px 16px rgba(15, 23, 42, 0.12);
--shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.16);
--shadow-inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
/* `System` (auto): follow the OS preference — reuse the light overrides when
the OS asks for light. (Dark is the base, so no auto+dark block needed.) */
@media (prefers-color-scheme: light) {
:root[data-theme="auto"] {
--bg-primary: #eef2f7;
--bg-secondary: #e2e8f0;
--bg-card: rgba(255, 255, 255, 0.8);
--bg-hover: rgba(15, 23, 42, 0.05);
--bg-input: #ffffff;
--bg-elevated: #ffffff;
--glass-bg: rgba(255, 255, 255, 0.86);
--glass-bg-solid: rgba(255, 255, 255, 0.97);
--glass-border: rgba(15, 23, 42, 0.1);
--glass-border-hover: rgba(99, 102, 241, 0.4);
--glass-border-subtle: rgba(15, 23, 42, 0.06);
--text-primary: #0f172a;
--text-secondary: #475569;
--text-muted: #64748b;
--text-accent: #4f46e5;
--accent-soft: rgba(99, 102, 241, 0.1);
--accent-glow: rgba(99, 102, 241, 0.18);
--shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.1);
--shadow-md: 0 4px 16px rgba(15, 23, 42, 0.12);
--shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.16);
}
}
/* ── Font size: scale the rem base on ─────────────────── */
:root { font-size: 16px; }
:root[data-font-size="small"] { font-size: 14.5px; }
:root[data-font-size="large"] { font-size: 18px; }
/* ── Compact mode: tighten the spacing scale ─────────────────── */
:root[data-compact="1"] {
--space-xs: 3px;
--space-sm: 6px;
--space-md: 11px;
--space-lg: 16px;
--space-xl: 22px;
--space-2xl: 32px;
}
/* ── Background image layer (behind the translucent UI) ──────── */
/* PAINT-ORDER-FALLE: body::before (z:-1) malt VOR dem body-Hintergrund,
aber body selbst malt danach OPAK drüber (Reihenfolge im Root-Context:
html-Canvas → negative-z-Kinder → Block-Hintergründe). Mit aktivem Bild
muss body deshalb durchsichtig sein — html behält --bg-primary als
Grund unter dem Bild, der Scrim unten hält Text lesbar. */
:root[data-has-bg="1"] body {
background: transparent;
}
/* WICHTIG: Die Bild-Ebene liegt auf den HTML-Pseudos (:root::before), NICHT
auf body::before — das ist vom Ambient-Glow (_reset.css) belegt. Ein Element
hat nur EIN ::before; die Regeln kollidierten und das Bild landete im
600px-Glow-Kreis (opacity .25) oben links. */
:root[data-has-bg="1"]::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
background-image: var(--app-bg-image);
/* Modus pro Hintergrund (Admin-kuratiert), via JS-Vars gesteuert:
Füllen (cover) · Einpassen (contain) · Zentriert (auto) · Kacheln. */
background-size: var(--app-bg-size, cover);
background-position: var(--app-bg-position, center);
background-repeat: var(--app-bg-repeat, no-repeat);
/* Fläche um nicht-füllende Motive: kuratierte Farbe oder App-Standard. */
background-color: var(--app-bg-color, var(--bg-primary));
pointer-events: none;
}
/* A subtle scrim keeps text legible over busy images/GIFs. */
:root[data-has-bg="1"]::after {
content: "";
position: fixed;
inset: 0;
z-index: -1;
background: var(--bg-primary);
opacity: 0.35;
pointer-events: none;
}
/* Browser reset & box-sizing */
/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
font-family: var(--font-sans);
background: var(--bg-primary);
color: var(--text-primary);
font-size: 14px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
height: 100vh;
overflow-y: hidden;
}
/* Ambient glow — static, no animation, no blur (GPU-friendly) */
body::before {
content: ''; position: fixed; z-index: -1;
width: 600px; height: 600px; border-radius: 50%;
pointer-events: none; opacity: 0.25;
background: radial-gradient(circle, rgba(99, 102, 241, 0.15), transparent 70%);
top: -10%; left: -5%;
}
/* Typography base */
/* ── Typography ────────────────────────────────────────────────── */
h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; }
h2 { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; }
h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }
.page-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: var(--space-xl); padding-bottom: var(--space-lg);
border-bottom: 1px solid var(--glass-border);
}
.page-title { color: var(--text-primary); }
.page-subtitle { color: var(--text-secondary); font-size: 0.875rem; margin-top: var(--space-xs); }
/* Button system */
/* ── Buttons ───────────────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
padding: var(--space-sm) var(--space-lg);
border-radius: var(--radius-sm); border: 1px solid transparent;
font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500;
cursor: pointer; transition: all var(--transition-fast);
white-space: nowrap;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-full { width: 100%; }
.btn-primary {
background: var(--accent); color: white; border-color: var(--accent);
}
.btn-primary:hover:not(:disabled) {
background: var(--accent-hover); box-shadow: var(--shadow-glow);
}
.btn-secondary {
background: transparent; color: var(--text-primary);
border-color: var(--glass-border);
}
.btn-secondary:hover:not(:disabled) {
background: var(--bg-hover); border-color: var(--accent);
}
.btn-danger {
background: var(--danger); color: white; border-color: var(--danger);
}
.btn-ghost {
background: transparent; color: var(--text-secondary); border: none;
}
.btn-ghost:hover:not(:disabled) { color: var(--text-primary); }
.spinner {
width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3);
border-top-color: white; border-radius: 50%;
animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Forms & inputs */
/* ── Form ──────────────────────────────────────────────────────── */
.form-group { margin-bottom: var(--space-md); }
.form-label {
display: block; font-size: 0.8125rem; font-weight: 500;
color: var(--text-secondary); margin-bottom: var(--space-xs);
}
.input {
width: 100%; padding: var(--space-sm) var(--space-md);
background: var(--bg-input); border: 1px solid var(--glass-border);
border-radius: var(--radius-sm); color: var(--text-primary);
font-family: var(--font-sans); font-size: 0.875rem;
transition: border-color var(--transition-fast);
outline: none;
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.input-error { border-color: var(--danger); }
.form-error { font-size: 0.75rem; color: var(--danger); margin-top: var(--space-xs); }
/* ── .input-field: the app-wide control class (inputs, selects, textareas) ──
Previously unstyled → rendered as native white boxes. Themed here to match
the dark glass UI everywhere it's used (settings, admin, IT cockpit, inbox). */
.input-field {
width: 100%;
padding: var(--space-sm) var(--space-md);
background: var(--bg-input);
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 0.875rem;
line-height: 1.4;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
outline: none;
}
.input-field::placeholder { color: var(--text-muted); }
.input-field:hover { border-color: var(--glass-border-hover); }
.input-field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.input-field:disabled { opacity: 0.55; cursor: not-allowed; }
/* Native selects: dark background + custom chevron (no white OS control). */
select.input-field {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
padding-right: calc(var(--space-md) * 2.4);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right var(--space-md) center;
}
/* The popup list follows the OS theme; this styles it where supported. */
select.input-field option { background: #0c1222; color: var(--text-primary); }
textarea.input-field { resize: vertical; min-height: 84px; }
/* Kill the native (white) number spinner — clean dark field; min/max still validate. */
input[type="number"].input-field { -moz-appearance: textfield; appearance: textfield; }
input[type="number"].input-field::-webkit-outer-spin-button,
input[type="number"].input-field::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Tint native checkboxes/radios so they read on dark. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); cursor: pointer; }
/* ── Cards ─────────────────────────────────────────────────────── */
.card {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-sm), var(--shadow-inner-glow);
transition: all var(--transition-normal);
}
.card:hover {
border-color: var(--glass-border-hover);
box-shadow: var(--shadow-md), var(--shadow-inner-glow);
}
.card-header {
padding: var(--space-md) var(--space-lg);
border-bottom: 1px solid var(--glass-border);
}
.card-title { font-size: 0.9375rem; font-weight: 600; }
.card-body { padding: var(--space-lg); }
/* Cards, stat cards, dashboard grid, activities */
/* ── Stat Cards ────────────────────────────────────────────────── */
.kpi-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--space-md); margin-bottom: var(--space-xl);
}
.stat-card {
background: var(--glass-bg);
border: 1px solid var(--glass-border); border-radius: var(--radius-md);
padding: var(--space-lg); display: flex; align-items: center; gap: var(--space-md);
transition: all var(--transition-normal);
box-shadow: var(--shadow-sm), var(--shadow-inner-glow);
position: relative; overflow: hidden;
animation: cardEnter 0.5s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
.stat-card::before {
content: ''; position: absolute; inset: 0;
background: var(--glass-shine); pointer-events: none;
}
.stat-card:nth-child(1) { animation-delay: 0ms; }
.stat-card:nth-child(2) { animation-delay: 80ms; }
.stat-card:nth-child(3) { animation-delay: 160ms; }
.stat-card:nth-child(4) { animation-delay: 240ms; }
.stat-card:hover {
border-color: var(--glass-border-hover);
box-shadow: var(--shadow-glow), var(--shadow-md);
transform: translateY(-3px);
}
.stat-icon {
width: 48px; height: 48px; border-radius: var(--radius-md);
background: var(--accent-gradient);
display: flex; align-items: center; justify-content: center;
color: white; flex-shrink: 0;
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}
.stat-icon svg { width: 22px; height: 22px; }
.stat-content { flex: 1; }
.stat-value {
font-size: 1.625rem; font-weight: 700; display: block;
letter-spacing: -0.02em; line-height: 1.2;
}
.stat-label { font-size: 0.8125rem; color: var(--text-secondary); margin-top: 2px; }
.stat-change { font-size: 0.75rem; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-full); }
.stat-change.positive { background: rgba(52, 211, 153, 0.15); color: var(--success); }
.stat-change.negative { background: rgba(248, 113, 113, 0.15); color: var(--danger); }
/* ── Dashboard Grid ────────────────────────────────────────────── */
.dashboard-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: var(--space-md);
}
/* ── Activities ────────────────────────────────────────────────── */
.activity-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.activity-item {
display: flex; justify-content: space-between; align-items: center;
padding: var(--space-sm) 0; border-bottom: 1px solid rgba(99, 102, 241, 0.08);
}
.activity-item:last-child { border-bottom: none; }
.activity-action { font-size: 0.875rem; display: block; }
.activity-detail { font-size: 0.8125rem; color: var(--text-muted); }
.activity-time { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }
/* Table styles */
/* ── Table ─────────────────────────────────────────────────────── */
.table-container {
background: var(--glass-bg);
border: 1px solid var(--glass-border); border-radius: var(--radius-md);
overflow: hidden;
}
.data-table { width: 100%; border-collapse: collapse; }
.data-table thead { background: rgba(15, 23, 42, 0.5); }
.data-table th {
padding: var(--space-md) var(--space-lg); text-align: left;
font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.05em; color: var(--text-muted);
border-bottom: 1px solid var(--glass-border);
}
.data-table td {
padding: var(--space-md) var(--space-lg);
border-bottom: 1px solid rgba(99, 102, 241, 0.06);
font-size: 0.875rem;
}
.table-row { transition: background var(--transition-fast); }
.table-row:hover { background: var(--bg-hover); }
.table-row.clickable { cursor: pointer; }
.cell-name { display: flex; align-items: center; gap: var(--space-md); font-weight: 500; }
.contact-avatar {
width: 34px; height: 34px; border-radius: 50%;
flex-shrink: 0;
background: var(--accent-gradient); color: white;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 0.75rem; letter-spacing: -0.02em;
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}
/* ── Status Badges ─────────────────────────────────────────────── */
.status-badge {
font-size: 0.75rem; font-weight: 600; padding: 2px 10px;
border-radius: var(--radius-full);
}
.status-lead { background: rgba(59, 130, 246, 0.15); color: var(--info); }
.status-qualified { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
.status-customer { background: rgba(34, 197, 94, 0.15); color: var(--success); }
.status-churned { background: rgba(239, 68, 68, 0.15); color: var(--danger); }
.status-archived { background: rgba(100, 116, 139, 0.15); color: var(--text-muted); }
/* Status badges */
/* ── Modal ─────────────────────────────────────────────────────── */
.modal-backdrop {
position: fixed; inset: 0; z-index: 200;
background: rgba(0, 0, 0, 0.75);
display: flex; align-items: center; justify-content: center;
animation: fadeIn 0.2s ease;
}
.modal {
background: var(--bg-secondary); border: 1px solid var(--glass-border);
border-radius: var(--radius-lg); width: 90%; max-width: 500px;
box-shadow: var(--shadow-lg); animation: slideUp 0.25s ease;
}
.modal-header {
display: flex; justify-content: space-between; align-items: center;
padding: var(--space-lg); border-bottom: 1px solid var(--glass-border);
}
.modal-title { font-size: 1.125rem; font-weight: 600; }
.modal-close {
background: none; border: none; color: var(--text-muted);
font-size: 1.25rem; cursor: pointer; padding: var(--space-xs);
transition: color var(--transition-fast);
}
.modal-close:hover { color: var(--text-primary); }
.modal-body { padding: var(--space-lg); }
.modal-form { display: flex; flex-direction: column; gap: var(--space-sm); }
.modal-actions {
display: flex; justify-content: flex-end; gap: var(--space-sm);
margin-top: var(--space-md); padding-top: var(--space-md);
border-top: 1px solid var(--glass-border);
}
/* Modal dialogs */
/* ── Login ─────────────────────────────────────────────────────── */
.login-page {
min-height: 100vh; display: flex; align-items: center; justify-content: center;
background: radial-gradient(ellipse at 50% 50%, rgba(99, 102, 241, 0.08) 0%, transparent 70%);
}
.login-card {
background: var(--glass-bg);
border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
padding: var(--space-2xl); width: 100%; max-width: 400px;
box-shadow: var(--shadow-lg);
}
.login-brand { text-align: center; margin-bottom: var(--space-xl); }
.brand-icon-large { font-size: 3rem; color: var(--accent); display: block; margin-bottom: var(--space-sm); }
.brand-icon-large svg {
/* 72 statt 64 — gleiche Begründung wie .brand-icon im Layout-CSS.
Von Jo am 2026-07-23 so abgenommen („Login passt"). */
width: 72px; height: 72px;
filter: drop-shadow(0 6px 18px rgba(99, 102, 241, 0.45));
}
.login-brand h1 { font-size: 2rem; letter-spacing: -0.03em; }
.login-subtitle { color: var(--text-muted); font-size: 0.875rem; }
.login-form { display: flex; flex-direction: column; gap: var(--space-sm); }
.login-error {
background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3);
color: var(--danger); padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-sm); font-size: 0.8125rem;
}
/* Neutral instruction (2FA second step) — informational, not an error. */
.login-hint {
background: rgba(99, 102, 241, 0.08); border: 1px solid rgba(99, 102, 241, 0.25);
color: var(--text-secondary); padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-sm); font-size: 0.8125rem;
}
/* Utilities, header actions, view toggle */
/* ── Utilities ─────────────────────────────────────────────────── */
.text-danger { color: var(--danger); }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ── Header Actions ────────────────────────────────────────────── */
.header-actions { display: flex; align-items: center; gap: var(--space-md); }
/* ── View Toggle ───────────────────────────────────────────────── */
.view-toggle {
display: flex; background: var(--bg-input);
border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
overflow: hidden;
}
.toggle-btn {
padding: 7px 16px; background: none; border: none;
color: var(--text-muted); cursor: pointer; font-size: 1rem;
display: inline-flex; align-items: center; justify-content: center;
transition: all var(--transition-fast);
}
/* Divider between the two segments so the icons don't sit cramped together. */
.view-toggle .toggle-btn + .toggle-btn { border-left: 1px solid var(--glass-border); }
.toggle-btn.active {
background: var(--accent); color: white;
}
.toggle-btn:hover:not(.active) { color: var(--text-primary); }
/* ── Contact Grid ──────────────────────────────────────────────── */
.contacts-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
/* Equal-height cards: 1fr auto-rows make every row the same height, and the
card/link fill their cell (see .contact-card{-link} height:100%). */
grid-auto-rows: 1fr;
gap: var(--space-md);
animation: fadeIn 0.3s ease;
}
/* ── Notification bell (topbar) ─────────────────────────────────── */
.nb-bell-wrap {
position: relative;
display: flex;
align-items: center;
}
.nb-bell {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--glass-border);
background: var(--glass-bg);
color: var(--text-secondary);
cursor: pointer;
transition: all 0.2s;
}
.nb-bell:hover {
color: var(--text-primary);
border-color: var(--glass-border-hover);
}
.nb-bell .icon-inline svg {
width: 18px;
height: 18px;
}
.nb-badge {
position: absolute;
top: -3px;
right: -3px;
min-width: 17px;
height: 17px;
padding: 0 4px;
border-radius: 9px;
background: var(--danger);
color: #fff;
font-size: 10px;
font-weight: 700;
line-height: 17px;
text-align: center;
}
/* Click-away layer under the panel */
.nb-overlay {
position: fixed;
inset: 0;
z-index: 900;
}
.nb-panel {
position: absolute;
top: 48px;
right: 0;
width: 340px;
max-height: 70vh;
display: flex;
flex-direction: column;
background: var(--bg-elevated);
border: 1px solid var(--glass-border);
border-radius: 14px;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
z-index: 901;
overflow: hidden;
}
.nb-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid var(--glass-border-subtle);
}
.nb-head h4 {
margin: 0;
font-size: 0.9rem;
color: var(--text-primary);
}
.nb-readall {
border: none;
background: none;
color: var(--accent-hover);
font-size: 0.75rem;
cursor: pointer;
}
.nb-readall:hover {
text-decoration: underline;
}
.nb-list {
overflow-y: auto;
}
.nb-empty {
margin: 0;
padding: 24px 16px;
text-align: center;
color: var(--text-muted);
font-size: 0.85rem;
}
.nb-item {
display: flex;
gap: 10px;
width: 100%;
padding: 12px 16px;
border: none;
border-bottom: 1px solid var(--glass-border-subtle);
background: none;
text-align: left;
cursor: pointer;
transition: background 0.15s;
}
.nb-item:hover {
background: var(--accent-soft);
}
.nb-item:last-child {
border-bottom: none;
}
.nb-dot {
flex: 0 0 8px;
width: 8px;
height: 8px;
margin-top: 5px;
border-radius: 50%;
background: transparent;
}
.nb-item.unread .nb-dot {
background: var(--accent);
}
/* Per-type SVG icon (replaces the old emoji in the title) */
.nb-icon {
flex: 0 0 18px;
width: 18px; height: 18px;
margin-top: 2px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--accent);
}
.nb-icon svg { width: 16px; height: 16px; display: block; }
.nb-icon-warn { color: #fbbf24; }
.nb-icon-ok { color: #34d399; }
.nb-icon-cal { color: #a5b4fc; }
.nb-icon-info { color: #94a3b8; }
.nb-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.nb-title {
color: var(--text-primary);
font-size: 0.82rem;
font-weight: 600;
}
.nb-item.unread .nb-title {
color: #fff;
}
.nb-msg {
color: var(--text-secondary);
font-size: 0.78rem;
line-height: 1.35;
}
.nb-time {
color: var(--text-muted);
font-size: 0.7rem;
margin-top: 2px;
}
/* App layout, top bar, sidebar */
/* ── App Layout ────────────────────────────────────────────────── */
.app-layout {
display: flex; height: 100vh;
}
.app-content-area {
flex: 1; margin-left: 64px; display: flex; flex-direction: column;
height: 100vh;
/* Allow shrinking below content width so wide children (e.g. the pipeline
board) scroll horizontally instead of expanding past the viewport. */
min-width: 0;
/* A small top breather so the region isn't crammed against the very edge —
trimmed from 10→4 to tighten the gap between the top bar and the tab row
(the reclaimed space lets content, esp. the dashboard grid, grow). */
padding-top: 4px;
}
/* Fixed shell: the top bar stays put; only .app-main scrolls. This keeps the
top bar (search + avatar) at the same place on every page — a content
scrollbar lives inside .app-main, below the bar, and never shifts it.
scrollbar-gutter keeps the main content itself from jumping too. */
.app-main {
flex: 1; min-height: 0; min-width: 0; padding: var(--space-md);
overflow-y: auto; scrollbar-gutter: stable;
}
/* ── Top Bar (slim — no Kopfzeile, collapsed search on the right) ─ */
.topbar {
display: flex; align-items: center; justify-content: space-between;
padding: var(--space-sm) var(--space-md);
border-bottom: 1px solid var(--glass-border);
background: var(--glass-bg-solid);
gap: var(--space-lg);
min-height: 56px;
}
/* Empty flex filler when a page has no custom topbar content. */
.topbar-spacer { flex: 1; min-width: 0; }
/* Custom top-bar slot (e.g. profile pipeline, a page's slim action row) */
.topbar-slot { flex: 1; min-width: 0; display: flex; }
/* Slim page-action row inside the topbar slot (replaces old page-headers). */
.tb-page-actions {
flex: 1; min-width: 0;
display: flex; align-items: center; gap: var(--space-sm);
}
.tb-page-actions .spacer { flex: 1; }
/* Subtle context text (e.g. "23 Kontakte", calendar range) in the slot. */
.tb-page-context {
color: var(--text-secondary); font-size: 0.85rem; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
}
/* Bare top bar: no background/border — content floats on the page bg */
.topbar-bare { background: transparent; border-bottom: none; padding-bottom: var(--space-sm); }
/* Keep a small top pad on bare pages so the scroll container (app-main,
overflow-y:auto) does not clip the first content row's hover lift + glow
(e.g. contact/company cards translateY(-2px) + shadow-glow). `~` (not `+`):
the recent-tabs row may sit between the bar and the main. */
.topbar-bare ~ .app-main { padding-top: 18px; }
/* Profile pages (contact/company: .cp-layout): the recent-tabs row itself
separates content from the bar — drop the extra pad so the gap below the
pills (6px row padding) matches the 4px above them. Scoped via :has()
because list pages need the 18px as hover-lift clip room (see above). */
.tb-tabs ~ .app-main:has(.cp-layout) { padding-top: 0; }
/* Profile topbar: trim the bottom pad and release the 56px min-height so the
Zurück/pipeline row sits as close above the chips as the cards sit below
them (measured 12px vs 6px; 6/6 after). Only profiles have .cp-topbar-inner. */
.topbar-bare:has(.cp-topbar-inner) { padding-bottom: 2px; min-height: 0; }
.topbar-actions {
display: flex; align-items: center; gap: var(--space-md);
}
.topbar-avatar {
width: 36px; height: 36px; border-radius: 50%;
background: var(--accent-soft); color: var(--accent-hover);
display: flex; align-items: center; justify-content: center;
font-size: 0.75rem; font-weight: 600; cursor: pointer;
transition: box-shadow var(--transition-fast);
}
.topbar-avatar:hover { box-shadow: 0 0 0 2px var(--accent); }
/* ── Recent-profile tabs row (browser-tab pills under the topbar) ── */
.tb-tabs {
display: flex; align-items: center; gap: 8px;
/* Bottom padding gives the pills clearance from the scroll clip edge
(overflow-x:auto forces vertical clipping) and breathing room to the
content below; a smaller top padding lifts the row toward the topbar. */
padding: 4px var(--space-md) 6px;
overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
/* Fade the right edge as scroll affordance when the row overflows. */
mask-image: linear-gradient(to right, black calc(100% - 28px), transparent);
-webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent);
}
.tb-tabs::-webkit-scrollbar { display: none; }
/* Reveal a thin scrollbar while hovering the row (discoverable scrolling). */
.tb-tabs:hover {
scrollbar-width: thin;
scrollbar-color: var(--glass-border-hover) transparent;
mask-image: none;
-webkit-mask-image: none;
}
.tb-tabs:hover::-webkit-scrollbar { display: block; height: 4px; }
.tb-tabs:hover::-webkit-scrollbar-thumb {
background: var(--glass-border-hover); border-radius: 2px;
}
/* Pill wrapper — carries visual state + is the drop target. */
.tb-tab {
display: inline-flex; align-items: center;
height: 30px; padding: 0 5px 0 0;
max-width: 210px; flex-shrink: 0; overflow: hidden;
background: var(--bg-hover);
border: 1px solid var(--glass-border);
border-radius: var(--radius-full);
transition: background var(--transition-fast), border-color var(--transition-fast),
opacity var(--transition-fast);
animation: tbTabIn 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Opacity+scale only — no translateY, which the overflow-clipped row would
crop at the top edge during the animation. */
@keyframes tbTabIn {
from { opacity: 0; transform: scale(0.94); }
to { opacity: 1; transform: scale(1); }
}
.tb-tab:hover { background: var(--glass-bg-solid); border-color: var(--glass-border-hover); }
.tb-tab.active { background: var(--accent-soft); border-color: var(--accent); }
/* Drag-and-drop reordering feedback. */
.tb-tab.dragging { opacity: 0.4; }
.tb-tab.drag-over { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
/* The draggable + clickable link area (icon + label). */
.tb-tab-link {
display: inline-flex; align-items: center; gap: 7px;
flex: 1; min-width: 0; height: 100%;
padding: 0 6px 0 11px;
color: var(--text-secondary); text-decoration: none;
font-size: 0.8rem; cursor: pointer;
transition: color var(--transition-fast);
}
.tb-tab:hover .tb-tab-link, .tb-tab.active .tb-tab-link { color: var(--text-primary); }
.tb-tab-link:active { cursor: grabbing; }
.tb-tab-icon { display: flex; flex-shrink: 0; opacity: 0.75; }
.tb-tab-icon svg { width: 13px; height: 13px; }
.tb-tab-label {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
min-width: 0;
}
.tb-tab-close {
display: flex; align-items: center; justify-content: center;
width: 18px; height: 18px; flex-shrink: 0;
border: none; border-radius: 50%;
background: transparent; color: var(--text-muted);
font-size: 0.85rem; line-height: 1; cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
}
.tb-tab-close:hover { background: rgba(255, 255, 255, 0.12); color: var(--text-primary); }
/* ── Sidebar ───────────────────────────────────────────────────── */
.sidebar {
width: 64px; height: 100vh; position: fixed; left: 0; top: 0;
background: var(--glass-bg-solid);
border-right: 1px solid var(--glass-border);
display: flex; flex-direction: column; z-index: 100;
transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
}
/* Expanded via pointer — .sb-open is the JS-tracked pointer-inside state that
survives the per-page remount (a freshly mounted sidebar under the cursor
gets no :hover from Chrome until the mouse moves, so route changes would
otherwise replay the expand animation every time). */
.sidebar:hover,
.sidebar.sb-open {
width: 240px;
}
/* padding-left 11 statt 24 — gerechnet, nicht geraten: Die eingeklappte Leiste
ist 64 px breit, die Nav-Icons darunter sitzen bei padding-left 20 in einer
20-px-Box, ihre Mitte liegt also auf x = 30. Das Marken-Icon stand bei
padding-left 24 in einer 38-px-Box → Mitte x = 43, gut ein Dutzend Pixel
weiter rechts als die ganze Navigation darunter. Genau das sah aus der Ferne
„nicht mittig" aus. 11 + 38/2 = 30 bringt es auf dieselbe Achse.
Der gap war kurzzeitig 7 — gerechnet als 11 + 38 + 7 = 56, also bündig mit
den Nav-Beschriftungen. Zwei Dinge sprechen dagegen. Erstens klebte die
Wortmarke: der Vogel füllt seine 38-px-Box horizontal wirklich aus, 7 px
daneben liest sich „Sell.ly" als angewachsen (Jo, 2026-07-23). Zweitens ging
die Rechnung ohnehin nicht auf — im Browser gemessen starten die Nav-Labels
bei 60, nicht bei 56. Mit space-md beginnt die Wortmarke bei 65: 5 px neben
der Nav-Kante statt 4 px auf der anderen Seite, derselbe Versatz, aber mit
Luft. Bei 1.25 rem Fettschrift über kleinen Labels sieht das niemand; das
Kleben schon. */
.sidebar-brand {
display: flex; align-items: center; gap: var(--space-md);
padding: var(--space-lg) var(--space-lg) var(--space-lg) 11px;
border-bottom: 1px solid var(--glass-border);
min-height: 56px;
}
.brand-icon {
color: var(--accent); display: flex; align-items: center;
filter: drop-shadow(0 0 6px var(--accent-glow));
flex-shrink: 0;
}
/* 38 statt 24 (Jo, 2026-07-23 — 28 und 34 waren beide noch zu klein): der
Elster-Glyph ist ein Strich, keine Fläche, und wirkt bei gleicher Boxgröße
deutlich kleiner als das gefüllte Schild davor. Mit der inhaltsgenauen viewBox
in `icons::LOGO` füllt er die 38 px Breite jetzt wirklich aus; senkrecht
braucht er nur ~31 px, weil der Vogel breit und flach ist. */
.brand-icon svg { width: 38px; height: 38px; }
.brand-text {
font-size: 1.25rem; font-weight: 700; color: var(--text-primary);
letter-spacing: -0.03em;
background: var(--accent-gradient); -webkit-background-clip: text;
-webkit-text-fill-color: transparent; background-clip: text;
white-space: nowrap; opacity: 0;
transition: opacity 0.2s ease;
}
.sidebar:hover .brand-text,
.sidebar.sb-open .brand-text { opacity: 1; }
.sidebar-nav { flex: 1; padding: var(--space-md) var(--space-xs); }
.sidebar-footer { padding: var(--space-md) var(--space-xs); border-top: 1px solid var(--glass-border); }
.nav-item {
display: flex; align-items: center; gap: var(--space-md);
padding: 10px 0; margin-bottom: 2px;
padding-left: 20px;
border-radius: var(--radius-sm); position: relative;
color: var(--text-secondary); text-decoration: none;
transition: all var(--transition-fast); cursor: pointer;
border: none; background: none; width: 100%; font-size: 0.875rem;
font-family: var(--font-sans);
white-space: nowrap; overflow: hidden;
}
.nav-item:hover {
background: var(--bg-hover); color: var(--text-primary);
}
.nav-item.active {
background: var(--accent-soft); color: var(--accent-hover);
}
.nav-item.active::before {
content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 3px; height: 20px; border-radius: 0 3px 3px 0;
background: var(--accent-gradient);
box-shadow: 0 0 8px var(--accent-glow);
}
.nav-icon {
width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
flex-shrink: 0; color: inherit; opacity: 0.65;
transition: opacity var(--transition-fast);
}
.nav-icon svg { width: 18px; height: 18px; }
.nav-item:hover .nav-icon { opacity: 1; }
.nav-item.active .nav-icon { opacity: 1; }
.nav-item.active .nav-icon svg { filter: drop-shadow(0 0 6px var(--accent-glow)); }
/* Filled-when-active icons (admin shield + opted-in nav items): solid indigo
silhouette like the shield. Pill/bar/hover-stability come from .nav-item.active. */
.admin-shield-active .nav-icon svg,
.nav-item.nav-fill.active .nav-icon svg {
fill: var(--accent);
stroke: var(--accent);
}
.nav-label {
opacity: 0; white-space: nowrap;
transition: opacity 0.2s ease;
}
.sidebar:hover .nav-label,
.sidebar.sb-open .nav-label { opacity: 1; }
/* ── Native checkboxes: dark chrome + accent — no white squares in the dark UI ── */
input[type="checkbox"] {
color-scheme: dark;
accent-color: var(--accent, #6366f1);
}
/* Login page */
/* ── Skeleton Loading ──────────────────────────────────────────── */
.skeleton {
position: relative; overflow: hidden;
}
.skeleton::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(99,102,241,0.05), transparent);
animation: shimmer 1.5s infinite;
}
.skeleton-icon {
width: 40px; height: 40px; border-radius: var(--radius-sm);
background: rgba(99, 102, 241, 0.1);
}
.skeleton-content { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.skeleton-line {
height: 14px; border-radius: 4px;
background: rgba(99, 102, 241, 0.1);
}
.skeleton-line.wide { width: 70%; }
.skeleton-line.narrow { width: 40%; }
@keyframes shimmer { to { transform: translateX(100%); } }
/* ── Utilities ─────────────────────────────────────────────────── */
.text-danger { color: var(--danger); }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Contact cards, grid, profile */
/* ── Contact Card ──────────────────────────────────────────────── */
.contact-card {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
padding: var(--space-lg);
transition: all var(--transition-normal);
cursor: pointer;
/* Fill the (equal-height) grid cell so every card is the same size, with a
floor so sparse cards don't collapse. box-sizing keeps padding inside. */
box-sizing: border-box;
height: 100%;
min-height: 148px;
}
.contact-card:hover {
border-color: var(--accent);
box-shadow: var(--shadow-glow);
transform: translateY(-2px);
}
.contact-card-header {
display: flex; align-items: center; gap: var(--space-md);
margin-bottom: var(--space-md);
padding-bottom: var(--space-md);
border-bottom: 1px solid var(--glass-border);
}
.contact-card-avatar {
width: 40px; height: 40px; border-radius: 50%;
background: linear-gradient(135deg, var(--accent), #a855f7);
color: white; display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 0.8125rem; flex-shrink: 0;
}
.contact-card-meta { flex: 1; min-width: 0; }
.contact-card-name {
display: block; font-weight: 600; font-size: 0.9375rem;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.contact-card-nr {
font-size: 0.75rem; color: var(--text-muted); font-family: var(--font-mono);
}
.contact-card-body {
display: flex; flex-direction: column; gap: 6px;
}
.contact-card-row {
display: flex; align-items: center; gap: var(--space-sm);
font-size: 0.8125rem; color: var(--text-secondary);
}
.card-icon {
width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
flex-shrink: 0; color: var(--text-muted);
}
.card-icon svg { width: 16px; height: 16px; }
/* ── Status Dots ───────────────────────────────────────────────── */
.status-dot {
width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.status-dot.status-lead { background: var(--info); }
.status-dot.status-qualified { background: var(--warning); }
.status-dot.status-customer { background: var(--success); }
.status-dot.status-churned { background: var(--danger); }
.status-dot.status-archived { background: var(--text-muted); }
/* ── Table Number Column ───────────────────────────────────────── */
.cell-number {
font-family: var(--font-mono); font-size: 0.8125rem;
color: var(--text-muted);
}
/* ── Form Row (side by side) ───────────────────────────────────── */
.form-row {
display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md);
}
/* ── Empty State ───────────────────────────────────────────────── */
.empty-state {
text-align: center; padding: var(--space-2xl);
color: var(--text-muted);
}
.empty-icon {
display: flex; align-items: center; justify-content: center;
margin: 0 auto var(--space-md);
color: var(--text-muted);
}
.empty-icon svg { width: 48px; height: 48px; }
.empty-state h3 { color: var(--text-secondary); margin-bottom: var(--space-xs); }
.empty-state p { font-size: 0.875rem; }
/* ── Contact Card Link ─────────────────────────────────────────── */
/* height:100% so the card fills the equal-height grid cell (see .contacts-grid). */
.contact-card-link { text-decoration: none; color: inherit; display: block; height: 100%; }
/* ── Profile Header ────────────────────────────────────────────── */
.profile-header {
margin-bottom: var(--space-lg);
padding-bottom: var(--space-lg);
border-bottom: 1px solid var(--glass-border);
}
.back-link {
display: inline-flex; align-items: center; gap: var(--space-sm);
color: var(--text-muted); text-decoration: none;
font-size: 0.8125rem; margin-bottom: var(--space-md);
transition: color var(--transition-fast);
}
.back-link:hover { color: var(--accent); }
.back-icon { display: flex; align-items: center; }
.back-icon svg { width: 16px; height: 16px; }
.profile-header-info {
display: flex; align-items: center; gap: var(--space-md);
}
.profile-name {
font-size: 1.5rem; font-weight: 700;
}
.profile-nr {
font-family: var(--font-mono); font-size: 0.875rem;
color: var(--text-muted);
}
/* ── Profile Layout ────────────────────────────────────────────── */
.profile-layout {
display: grid;
grid-template-columns: 320px 1fr;
gap: var(--space-lg);
align-items: start;
}
@media (max-width: 900px) {
.profile-layout { grid-template-columns: 1fr; }
}
/* ── Profile Sidebar ───────────────────────────────────────────── */
.profile-sidebar {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
padding: var(--space-lg);
position: sticky; top: var(--space-lg);
}
.profile-avatar-section {
text-align: center;
padding-bottom: var(--space-lg);
margin-bottom: var(--space-lg);
border-bottom: 1px solid var(--glass-border);
}
.profile-avatar {
width: 72px; height: 72px; border-radius: 50%;
background: linear-gradient(135deg, var(--accent), #a855f7);
color: white; display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 1.5rem; margin: 0 auto var(--space-md);
}
.profile-sidebar-name {
font-size: 1.125rem; font-weight: 600; margin-bottom: var(--space-xs);
}
/* ── Profile Sections ──────────────────────────────────────────── */
.profile-section {
margin-bottom: var(--space-lg);
}
.profile-section:last-child { margin-bottom: 0; }
.profile-section-title {
font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.08em; color: var(--text-muted);
margin-bottom: var(--space-md);
}
/* ── Detail Rows ───────────────────────────────────────────────── */
.detail-row {
display: flex; align-items: flex-start; gap: var(--space-md);
padding: var(--space-sm) 0;
}
.detail-icon {
width: 18px; height: 18px; display: flex; align-items: center;
justify-content: center; color: var(--text-muted); flex-shrink: 0;
margin-top: 2px;
}
.detail-icon svg { width: 16px; height: 16px; }
.detail-content { flex: 1; min-width: 0; }
.detail-label {
display: block; font-size: 0.6875rem; color: var(--text-muted);
text-transform: uppercase; letter-spacing: 0.05em;
}
.detail-value {
display: block; font-size: 0.875rem; word-break: break-word;
}
/* ── Tags ──────────────────────────────────────────────────────── */
.tags-list { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.tag {
padding: 2px 10px; border-radius: var(--radius-full);
background: rgba(99, 102, 241, 0.12); color: var(--accent);
font-size: 0.75rem; font-weight: 500;
}
/* ── Profile Actions ───────────────────────────────────────────── */
.profile-actions {
display: flex; flex-direction: column; gap: var(--space-sm);
padding-top: var(--space-lg);
border-top: 1px solid var(--glass-border);
}
.btn-danger-ghost {
display: flex; align-items: center; justify-content: center; gap: var(--space-sm);
padding: var(--space-sm) var(--space-lg);
background: none; border: 1px solid rgba(239, 68, 68, 0.2);
border-radius: var(--radius-sm);
color: var(--danger); cursor: pointer; font-family: var(--font-sans);
font-size: 0.875rem; transition: all var(--transition-fast);
}
.btn-danger-ghost svg { width: 16px; height: 16px; }
.btn-danger-ghost:hover {
background: rgba(239, 68, 68, 0.1);
border-color: var(--danger);
}
/* ── Glass Panel (right side) ──────────────────────────────────── */
.glass-panel {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
padding: var(--space-lg);
}
.section-header {
display: flex; align-items: center; gap: var(--space-sm);
margin-bottom: var(--space-lg);
}
.section-icon {
width: 20px; height: 20px; display: flex; align-items: center;
color: var(--accent);
}
.section-icon svg { width: 18px; height: 18px; }
.section-header h3 { flex: 1; font-size: 1rem; font-weight: 600; }
.section-count {
background: rgba(99, 102, 241, 0.12); color: var(--accent);
padding: 2px 8px; border-radius: var(--radius-full);
font-size: 0.75rem; font-weight: 600;
}
.section-empty {
color: var(--text-muted); font-size: 0.875rem;
text-align: center; padding: var(--space-lg) 0;
}
/* ── Deal Cards ────────────────────────────────────────────────── */
.deals-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.deal-card {
display: flex; align-items: center; justify-content: space-between;
padding: var(--space-md);
border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
transition: all var(--transition-fast);
}
.deal-card:hover {
border-color: var(--accent);
background: rgba(99, 102, 241, 0.04);
}
/* ── Filterleiste + Pagination (Kontakt-Übersicht) ───────────────────────── */
.contacts-filterbar {
display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm);
margin-bottom: var(--space-md);
}
.contacts-filterbar .spacer { flex: 1 1 auto; }
.contacts-search { position: relative; display: flex; align-items: center; min-width: 240px; }
.contacts-search-ic {
position: absolute; left: 10px; display: inline-flex; width: 15px; height: 15px;
color: var(--text-muted); pointer-events: none;
}
.contacts-search-ic svg { width: 100%; height: 100%; }
.contacts-search-input {
width: 100%; padding: 8px 12px 8px 32px; font-size: 0.85rem;
color: var(--text-primary); background: var(--bg-input);
border: 1px solid var(--glass-border); border-radius: var(--radius-md);
transition: border-color 0.15s;
}
.contacts-search-input:focus { outline: none; border-color: var(--glass-border-hover); }
.contacts-filter-input, .contacts-filter-select {
padding: 8px 12px; font-size: 0.82rem; color: var(--text-secondary);
background: var(--bg-input); border: 1px solid var(--glass-border);
border-radius: var(--radius-md); transition: border-color 0.15s;
}
.contacts-filter-input { min-width: 180px; }
.contacts-filter-input:focus, .contacts-filter-select:hover, .contacts-filter-select:focus {
outline: none; border-color: var(--glass-border-hover); color: var(--text-primary);
}
.contacts-filter-reset {
padding: 8px 12px; font-size: 0.8rem; color: var(--text-muted);
background: transparent; border: 1px solid var(--glass-border);
border-radius: var(--radius-md); cursor: pointer; transition: color 0.15s, border-color 0.15s;
}
.contacts-filter-reset:hover { color: var(--text-primary); border-color: var(--glass-border-hover); }
.contacts-result-count { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }
.contacts-pager {
display: flex; align-items: center; justify-content: center; gap: var(--space-md);
margin-top: var(--space-lg);
}
.contacts-pager-btn {
padding: 7px 14px; font-size: 0.82rem; color: var(--text-secondary);
background: var(--bg-input); border: 1px solid var(--glass-border);
border-radius: var(--radius-md); cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.contacts-pager-btn:hover:not(:disabled) { border-color: var(--glass-border-hover); color: var(--text-primary); }
.contacts-pager-btn:disabled { opacity: 0.4; cursor: default; }
.contacts-pager-info { font-size: 0.82rem; color: var(--text-muted); }
/* Tag-Chips auf Karte + in Tabelle. */
.contact-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.cell-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.contact-tag-chip {
display: inline-block; padding: 1px 8px; font-size: 0.72rem; line-height: 1.5;
color: var(--text-secondary); background: var(--accent-soft);
border: 1px solid var(--glass-border); border-radius: 999px; white-space: nowrap;
}
/* ── Präzise-Filter: Toggle + Builder ────────────────────────────────────── */
.contacts-filter-toggle {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 12px; font-size: 0.82rem; color: var(--text-secondary);
background: var(--bg-input); border: 1px solid var(--glass-border);
border-radius: var(--radius-md); cursor: pointer; white-space: nowrap;
transition: border-color 0.15s, color 0.15s;
}
.contacts-filter-toggle:hover { color: var(--text-primary); border-color: var(--glass-border-hover); }
.contacts-filter-toggle svg { width: 15px; height: 15px; }
.contacts-filter-toggle.on { color: var(--accent); border-color: var(--accent); }
.cf-builder {
display: flex; flex-direction: column; gap: var(--space-sm);
margin-bottom: var(--space-md); padding: var(--space-md);
background: var(--glass-bg); border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
}
/* Each condition is a compact, left-aligned chip-row (fixed field/op widths,
a capped value field) — not a full-bleed stretch across the whole panel. */
.cf-row {
display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm);
padding: 8px; border-radius: var(--radius-md);
background: var(--bg-input); border: 1px solid var(--glass-border);
}
.cf-field { flex: 0 0 200px; min-width: 0; }
.cf-op { flex: 0 0 150px; min-width: 0; }
.cf-val { flex: 0 1 300px; min-width: 150px; }
.cf-val-sm { flex: 0 0 145px; min-width: 0; }
.cf-and { color: var(--text-muted); font-size: 0.85rem; }
/* push the remove button to the row's trailing edge */
.cf-row-remove { margin-left: auto; }
.cf-row-remove {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; flex-shrink: 0;
background: transparent; border: 1px solid var(--glass-border);
border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer;
transition: color 0.15s, border-color 0.15s;
}
.cf-row-remove:hover { color: var(--danger); border-color: var(--danger); }
.cf-row-remove svg { width: 14px; height: 14px; }
.cf-add {
display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
padding: 7px 12px; font-size: 0.82rem; color: var(--accent);
background: transparent; border: 1px dashed var(--glass-border);
border-radius: var(--radius-md); cursor: pointer; transition: border-color 0.15s;
}
.cf-add:hover { border-color: var(--accent); }
.cf-add svg { width: 14px; height: 14px; }
/* ═══ Lead-Import-Wizard (/contacts → „Importieren") ════════════════════════ */
.imp-modal { max-width: 62rem; width: 94%; display: flex; flex-direction: column; max-height: 88vh; }
.imp-modal .modal-header { display: flex; align-items: center; gap: var(--space-md); }
/* Body wächst NUR mit dem Inhalt (flex 0) — sonst klebt der Fuß-Button am
unteren Modalrand mit Leerraum darüber (User-Feedback). */
.imp-body { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
/* Kompakte zentrierte Inhalts-Spalte (Muster esign-Wizard); Zuordnung/
Prüfung brauchen die breite Variante für ihre Tabellen. */
.imp-center {
width: min(640px, 100%); margin: 0 auto;
display: flex; flex-direction: column; gap: var(--space-md);
}
.imp-center.is-wide { width: min(920px, 100%); }
.imp-foot { display: flex; }
.imp-foot-inner {
width: min(640px, 100%); margin: 0 auto;
display: flex; align-items: center; gap: var(--space-sm);
}
.imp-foot-inner.is-wide { width: min(920px, 100%); }
.imp-foot-inner .spacer { flex: 1 1 auto; }
/* Stepper-Pills im Kopf (Muster esign-Wizard, eigene Klassen) */
.imp-steps { display: flex; gap: 6px; margin-left: auto; margin-right: var(--space-sm); }
.imp-step {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 12px; border-radius: var(--radius-full);
background: var(--bg-input); color: var(--text-secondary);
border: 1px solid var(--glass-border); font-size: 0.76rem; font-weight: 600;
cursor: pointer; transition: var(--transition-fast); white-space: nowrap;
}
.imp-step.is-active { color: var(--text-primary); border-color: var(--glass-border-hover); }
.imp-step.is-done { color: var(--success); border-color: rgba(52, 211, 153, 0.35); }
.imp-step-n {
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px; border-radius: 50%;
background: rgba(255, 255, 255, 0.08); font-size: 0.66rem;
}
/* Schritt 1: Quelle */
.imp-source { display: flex; flex-direction: column; gap: var(--space-md); }
.imp-hint { margin: 0; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; }
.imp-dropzone {
display: flex; align-items: center; justify-content: center;
padding: var(--space-lg); border: 1px dashed var(--glass-border-hover);
border-radius: var(--radius-md); color: var(--text-secondary);
font-size: 0.88rem; cursor: pointer; transition: var(--transition-fast);
}
.imp-dropzone:hover { color: var(--text-primary); border-color: var(--text-accent); }
.imp-file-input { display: none; }
.imp-paste { font-family: var(--font-mono); font-size: 0.78rem; resize: vertical; }
.imp-parsed { font-size: 0.85rem; font-weight: 600; color: var(--success); }
.imp-jobs { display: flex; flex-direction: column; gap: 4px; }
.imp-job {
display: grid; grid-template-columns: minmax(0, 1fr) 44px auto auto;
gap: var(--space-md); align-items: center;
font-size: 0.78rem; color: var(--text-secondary);
padding: 5px 10px; background: var(--bg-input);
border: 1px solid var(--glass-border); border-radius: var(--radius-md);
}
.imp-job-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imp-job-src { font-weight: 700; font-size: 0.68rem; color: var(--text-muted); }
.imp-job-when { color: var(--text-muted); white-space: nowrap; }
/* Schritt 1: Hinweis auf die Lead-Quellen (Web-to-Lead) */
.imp-autoline {
display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap;
padding: var(--space-sm) var(--space-md);
background: rgba(99, 102, 241, 0.06); border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
}
.imp-autoline-txt { flex: 1 1 240px; font-size: 0.8rem; color: var(--text-secondary); }
/* ── Lead-Quellen-Modal (Webformulare + API) ── */
.src-modal { max-width: 52rem; }
.src-new { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.src-new .input-field { flex: 1 1 220px; }
.src-form {
display: flex; flex-direction: column; gap: 6px;
padding: var(--space-sm) var(--space-md);
background: var(--bg-input); border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
}
.src-form.is-paused { opacity: 0.55; }
.src-form-head { display: flex; align-items: baseline; gap: var(--space-md); }
.src-form-name { font-weight: 700; color: var(--text-primary); }
.src-form-meta { margin-left: auto; font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }
.src-form-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.src-del:hover { color: var(--danger); }
.src-form-target { font-size: 0.72rem; font-weight: 700; color: var(--text-accent); white-space: nowrap; }
/* Mini-Editor je Formular (aufklappbar) */
.src-edit {
display: flex; flex-direction: column; gap: var(--space-sm);
border-top: 1px solid var(--glass-border); padding-top: var(--space-sm);
}
.src-edit-row { display: flex; flex-direction: column; gap: 4px; }
.src-edit-save { align-self: flex-end; }
.src-api {
display: flex; flex-direction: column; gap: 6px;
border-top: 1px solid var(--glass-border); padding-top: var(--space-md);
}
.src-code {
margin: 0; padding: var(--space-sm) var(--space-md);
background: var(--bg-input); border: 1px solid var(--glass-border);
border-radius: var(--radius-md); font-family: var(--font-mono);
font-size: 0.72rem; white-space: pre-wrap; word-break: break-all;
color: var(--text-secondary);
}
/* Schritt 2: Zuordnung */
.imp-mapping { display: flex; flex-direction: column; gap: 6px; }
.imp-map-row {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 260px auto;
gap: var(--space-md); align-items: center;
}
.imp-map-row.is-dupe .imp-map-sel { border-color: rgba(251, 191, 36, 0.55); }
.imp-map-col { font-weight: 600; color: var(--text-primary); font-size: 0.85rem;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imp-map-sample { color: var(--text-muted); font-size: 0.78rem;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imp-map-warn { color: var(--warning); font-size: 0.72rem; white-space: nowrap; }
.imp-map-hint { margin: 4px 0 0; color: var(--warning); font-size: 0.8rem; }
/* Schritt 3: Prüfung */
.imp-check { display: flex; flex-direction: column; gap: var(--space-md); }
.imp-sumline { display: flex; align-items: baseline; gap: var(--space-md); flex-wrap: wrap; }
.imp-sum-num { font-weight: 700; color: var(--text-primary); }
.imp-sum-bad { color: var(--warning); font-size: 0.85rem; }
.imp-sum-note { color: var(--text-muted); font-size: 0.78rem; }
.imp-options { display: flex; gap: var(--space-lg); flex-wrap: wrap; }
.imp-opt { display: flex; flex-direction: column; gap: 4px; min-width: 16rem; }
.imp-preview { overflow-x: auto; }
.imp-table td, .imp-table th { white-space: nowrap; max-width: 16rem;
overflow: hidden; text-overflow: ellipsis; }
.imp-cell-num { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.imp-row-bad td { color: var(--warning); }
.imp-cell-check { font-size: 0.78rem; }
.imp-empty { color: var(--text-muted); font-size: 0.85rem; }
/* Schritt 4: Import */
.imp-run { display: flex; flex-direction: column; gap: var(--space-md); }
.imp-progress { display: flex; align-items: center; gap: var(--space-md); }
.imp-progress-bar {
flex: 1 1 auto; height: 10px; border-radius: var(--radius-full);
background: var(--bg-input); border: 1px solid var(--glass-border); overflow: hidden;
}
.imp-progress-fill { height: 100%; background: var(--text-accent); transition: width 0.2s ease; }
.imp-progress-label { font-size: 0.82rem; color: var(--text-secondary); white-space: nowrap; }
.imp-result { display: flex; flex-direction: column; gap: var(--space-sm); }
.imp-result-line { display: flex; gap: var(--space-md); align-items: baseline; flex-wrap: wrap; }
.imp-res-ok { font-weight: 700; color: var(--success); }
.imp-res-skip { color: var(--warning); }
.imp-res-err { color: var(--danger); }
.imp-skiplist { max-height: 300px; overflow-y: auto; }
/* Anleitung (personalisierte Web-to-Lead-Doku) */
.doc-modal { max-width: 58rem; }
.doc-modal .modal-header { display: flex; align-items: center; gap: var(--space-md); }
.doc-copy { margin-left: auto; }
.doc-body { gap: var(--space-sm); }
.doc-sec {
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--text-muted); margin-top: var(--space-sm);
}
.doc-key { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-accent); }
.doc-hint { color: var(--text-muted); font-size: 0.78rem; white-space: normal; }
.src-edit-foot { display: flex; align-items: center; gap: var(--space-sm); }
.src-edit-foot .spacer { flex: 1 1 auto; }
.src-rotate:hover { color: var(--warning); }
/* Pipeline & deals */
.deal-info { flex: 1; min-width: 0; }
.deal-title { display: block; font-weight: 500; font-size: 0.875rem; }
.deal-value { font-size: 0.8125rem; color: var(--text-muted); font-family: var(--font-mono); }
.deal-stage {
padding: 3px 10px; border-radius: var(--radius-full);
font-size: 0.75rem; font-weight: 500; white-space: nowrap;
}
/* ── Activity Timeline ─────────────────────────────────────────── */
.timeline { display: flex; flex-direction: column; }
.timeline-item {
display: flex; gap: var(--space-md);
padding: var(--space-md) 0;
border-bottom: 1px solid rgba(148, 163, 184, 0.06);
}
.timeline-item:last-child { border-bottom: none; }
.timeline-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--accent); flex-shrink: 0;
margin-top: 6px;
}
.timeline-content { flex: 1; min-width: 0; }
.timeline-action {
display: block; font-size: 0.875rem; font-weight: 500;
text-transform: capitalize;
}
.timeline-detail {
display: block; font-size: 0.8125rem; color: var(--text-secondary);
margin-top: 2px;
}
.timeline-meta {
display: block; font-size: 0.75rem; color: var(--text-muted);
margin-top: 4px;
}
/* ── Tasks ──────────────────────────────────────────────────── */
.task-filters {
display: flex; gap: var(--space-sm); margin-bottom: var(--space-lg);
}
.filter-btn {
padding: 6px 16px; border-radius: var(--radius-full);
background: var(--glass-bg); border: 1px solid var(--glass-border);
color: var(--text-secondary); cursor: pointer; font-size: 0.8125rem;
transition: all var(--transition-fast);
}
.filter-btn:hover { border-color: rgba(99, 102, 241, 0.3); }
.filter-btn.active {
background: rgba(99, 102, 241, 0.15); border-color: var(--accent);
color: var(--accent); font-weight: 600;
}
.task-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.task-item {
display: flex; align-items: center; gap: var(--space-md);
padding: var(--space-md) var(--space-lg);
}
.task-check {
width: 22px; height: 22px; border-radius: 6px;
border: 2px solid var(--glass-border); display: flex;
align-items: center; justify-content: center;
font-size: 0.75rem; flex-shrink: 0; cursor: pointer;
transition: all var(--transition-fast);
}
.task-check.completed {
background: rgba(34, 197, 94, 0.2); border-color: #22c55e; color: #22c55e;
}
.task-body { flex: 1; min-width: 0; }
.task-title { display: block; font-weight: 500; margin-bottom: 2px; }
.task-meta { display: block; font-size: 0.75rem; color: var(--text-muted); }
.priority-badge {
padding: 2px 10px; border-radius: var(--radius-full);
font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
}
.priority-low { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }
.priority-medium { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.priority-high { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.priority-urgent { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
/* ── Notes ──────────────────────────────────────────────────── */
.notes-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.note-card {
padding: var(--space-md);
border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
position: relative;
transition: all var(--transition-fast);
}
.note-card:hover { border-color: rgba(99, 102, 241, 0.3); }
.note-pin {
position: absolute; top: 8px; right: 8px;
background: rgba(99, 102, 241, 0.15); color: var(--accent);
padding: 1px 8px; border-radius: var(--radius-full);
font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
}
.note-content {
font-size: 0.875rem; line-height: 1.5;
white-space: pre-wrap; margin: 0 0 var(--space-sm);
}
.note-meta {
font-size: 0.75rem; color: var(--text-muted);
}
/* ── Animations ────────────────────────────────────────────────── */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes cardEnter {
from { transform: translateY(12px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes pulseGlow {
0%, 100% { box-shadow: 0 0 8px var(--accent-glow); }
50% { box-shadow: 0 0 20px var(--accent-glow), 0 0 40px rgba(99,102,241,0.06); }
}
/* ── Glass Panel (universal — opaque, no blur) ───────────────── */
.glass-panel {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
padding: var(--space-lg);
box-shadow: var(--shadow-sm);
transition: border-color var(--transition-fast);
}
.glass-panel:hover {
border-color: var(--glass-border-hover);
}
/* ── Premium Scrollbar ────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.15); border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.25); }
/* ── Loading Text ─────────────────────────────────────────────── */
.loading-text {
text-align: center; padding: var(--space-2xl);
color: var(--text-muted); font-size: 0.875rem;
animation: pulseGlow 2s ease-in-out infinite;
}
/* ── Empty State ──────────────────────────────────────────────── */
.empty-state {
text-align: center; padding: var(--space-2xl) var(--space-lg);
color: var(--text-muted);
}
.empty-icon { display: block; margin: 0 auto var(--space-md); opacity: 0.4; }
.empty-icon svg { width: 48px; height: 48px; }
/* ── Error Banner ────────────────────────────────────────────── */
.error-banner {
background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.3);
border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md);
color: #ef4444; font-size: 0.875rem; margin-bottom: var(--space-md);
}
/* ── Selection Glow ───────────────────────────────────────────── */
::selection { background: rgba(99, 102, 241, 0.3); color: white; }
/* ── Companies Page ──────────────────────────────────────────── */
.companies-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: var(--space-md);
}
.company-card { padding: var(--space-lg); }
.company-header { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-md); }
.company-avatar {
width: 42px; height: 42px; border-radius: var(--radius-md);
background: var(--accent-gradient); color: white;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 1rem; flex-shrink: 0;
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}
.company-name { font-weight: 600; font-size: 1rem; display: block; }
.company-industry { font-size: 0.8125rem; color: var(--text-secondary); }
.company-details { display: flex; flex-direction: column; gap: var(--space-xs); }
.company-detail {
display: flex; align-items: center; gap: var(--space-sm);
font-size: 0.8125rem; color: var(--text-muted);
}
.company-detail .detail-icon { width: 14px; height: 14px; opacity: 0.5; }
.company-detail .detail-icon svg { width: 14px; height: 14px; }
/* ══════════════════════════════════════════════════════════════
Pipeline Board — redesign (.pl-*), flat designer palette, no shadows
══════════════════════════════════════════════════════════════ */
/* ── Toolbar (lives in the AppLayout topbar slot) ── */
.pl-toolbar { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; }
.pl-nav-btn {
width: 34px; height: 34px; flex-shrink: 0; border: 1px solid var(--glass-border);
border-radius: var(--radius-md); background: var(--pl-surface); color: var(--text-primary);
font-size: 1.15rem; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all var(--transition-fast);
}
.pl-nav-btn:hover { background: var(--bg-hover); border-color: var(--glass-border-hover); }
.pl-select { position: relative; flex-shrink: 0; }
.pl-select-btn {
display: flex; align-items: center; gap: 10px; min-width: 160px; height: 34px; padding: 0 14px;
border: 1px solid var(--glass-border); border-radius: var(--radius-md); background: var(--pl-surface);
color: var(--text-primary); font-size: 0.9375rem; font-weight: 700; cursor: pointer;
transition: border-color var(--transition-fast);
}
.pl-select-btn:hover { border-color: var(--glass-border-hover); }
.pl-select-caret { margin-left: auto; color: var(--text-muted); font-size: 0.85rem; }
.pl-select-menu {
position: absolute; top: calc(100% + 6px); left: 0; z-index: 200; min-width: 200px;
background: var(--glass-bg-solid); border: 1px solid var(--glass-border);
border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 6px;
max-height: 320px; overflow-y: auto;
}
.pl-select-item {
display: block; width: 100%; text-align: left; padding: 8px 10px; border: none;
border-radius: var(--radius-sm); background: transparent; color: var(--text-primary);
font-size: 0.875rem; cursor: pointer;
}
.pl-select-item:hover { background: var(--bg-hover); }
.pl-viewtoggle { display: flex; gap: 4px; padding: 3px; border-radius: var(--radius-md);
background: var(--pl-surface); border: 1px solid var(--glass-border); flex-shrink: 0; }
.pl-vbtn {
width: 32px; height: 28px; border: none; border-radius: 7px; background: transparent;
color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: all var(--transition-fast);
}
.pl-vbtn:hover { color: var(--text-primary); }
.pl-vbtn.active { background: var(--accent-soft); color: var(--accent-hover); }
.pl-vbtn svg { width: 16px; height: 16px; }
.pl-new-btn {
margin-left: auto; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px;
flex-shrink: 0; border: none; border-radius: var(--radius-md); background: var(--accent); color: #fff;
font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: background var(--transition-fast);
}
.pl-new-btn:hover { background: var(--accent-hover); }
.pl-new-btn svg { width: 15px; height: 15px; }
/* ── Board + columns ── */
/* Rollback-Banner: erklärt, warum eine verschobene Karte zurückspringt
(fehlende Berechtigung / fehlgeschlagener Move). */
.pl-move-error {
position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
z-index: 1200; padding: 10px 18px;
background: rgba(248, 113, 113, 0.12);
border: 1px solid rgba(248, 113, 113, 0.45);
color: var(--danger); border-radius: var(--radius-md);
font-size: 0.875rem; white-space: nowrap;
backdrop-filter: blur(12px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
/* Pipeline is a full-height page: the board fills the content area so its
horizontal scrollbar sits at the very bottom edge, and the ENTIRE board area
(not just the height of the cards) scrolls sideways. Scoped via :has() so
only the pipeline page turns .app-main into a fill-flex column. */
.app-main:has(.pl-board) {
display: flex; flex-direction: column; min-height: 0; padding-bottom: 0;
}
.pl-board {
flex: 1 1 auto; min-height: 0;
display: flex; gap: var(--space-xs);
overflow: auto;
padding-bottom: 2px;
scroll-behavior: smooth; scrollbar-width: thin;
scrollbar-color: var(--glass-border-hover) transparent;
overscroll-behavior-x: contain;
}
.pl-board::-webkit-scrollbar { height: 10px; }
.pl-board::-webkit-scrollbar-track { background: transparent; }
.pl-board::-webkit-scrollbar-thumb {
background: var(--glass-border-hover); border-radius: 5px;
border: 2px solid transparent; background-clip: padding-box;
}
.pl-board::-webkit-scrollbar-thumb:hover { background: var(--accent); background-clip: padding-box; }
.pl-column { flex: 0 0 330px; max-width: 330px; display: flex; flex-direction: column; gap: var(--space-xs); }
.pl-column.drag-over { box-shadow: inset 0 0 0 2px var(--glass-border-hover); border-radius: var(--radius-xl); }
.pl-column.drag-over .pl-col-stack { pointer-events: none; }
.pl-col-head {
display: flex; align-items: stretch; height: 56px; flex-shrink: 0; overflow: hidden;
border-radius: var(--radius-xl); background: var(--pl-surface);
border: 1px solid var(--glass-border);
/* Stick to the top of the vertically-scrolling board so a full column's
cards scroll UNDER the stage header instead of covering it. z-index lifts
it above the cards (incl. hover-transformed ones). Shared by all three
board modes (box/graph/list) and the contact + company boards. */
position: sticky; top: 0; z-index: 5;
}
.pl-col-value {
width: 92px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center;
padding: 0 10px; background: var(--pl-surface-alt);
}
.pl-col-value-label { font-size: 0.625rem; font-weight: 700; color: var(--text-secondary); line-height: 1.15; }
.pl-col-value-num { font-size: 0.8125rem; font-weight: 700; color: var(--text-primary); }
.pl-col-title {
flex: 1; min-width: 0; display: flex; align-items: center; padding: 0 12px;
font-size: 1.0625rem; font-weight: 700; color: var(--text-primary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pl-col-count {
align-self: center; margin-right: 12px; flex-shrink: 0;
min-width: 28px; height: 28px; padding: 0 8px; border-radius: var(--radius-full);
background: var(--pl-count-badge); color: #fff; font-size: 0.8125rem; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
.pl-col-stack { display: flex; flex-direction: column; gap: var(--space-xs); position: relative; z-index: 1; }
/* ── Deal cards (shared — glass look, like the contact profile) ── */
.pl-card {
background: var(--pl-surface); border: 1px solid var(--glass-border);
border-radius: var(--radius-lg); cursor: grab; overflow: hidden;
transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.pl-card:hover { border-color: var(--glass-border-hover); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.pl-card:active { cursor: grabbing; }
.pl-avatar {
width: 48px; height: 48px; flex-shrink: 0; border-radius: var(--radius-full);
background: var(--pl-avatar); color: #fff;
display: flex; align-items: center; justify-content: center; font-size: 0.95rem; font-weight: 700;
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.28);
}
.pl-card-name { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); margin: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-fields { display: flex; flex-direction: column; gap: 3px; }
.pl-field { display: flex; align-items: center; gap: 7px; font-size: 0.8125rem; min-width: 0; }
.pl-dot { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: var(--pl-bullet); }
.pl-flabel { color: var(--text-secondary); flex-shrink: 0; }
.pl-fval { color: var(--text-primary); font-weight: 600; margin-left: auto;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Two-tone split — darker inset avatar panel, like the column header pill */
.pl-card-avatarwrap {
align-self: stretch; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
padding: 0 16px; background: var(--pl-surface-alt);
}
/* Box mode */
.pl-card--box { display: flex; align-items: stretch; }
.pl-card--box .pl-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 12px; }
/* Graph mode — clean split: left info panel (darker) | right activity chart */
.pl-card--graph { display: flex; align-items: stretch; }
.pl-card--graph .pl-card-left {
flex: 0 0 45%; min-width: 0; display: flex; flex-direction: column; gap: 8px;
padding: 12px; background: var(--pl-surface-alt);
}
.pl-card--graph .pl-card-left .pl-avatar { width: 44px; height: 44px; }
.pl-card-chart { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.pl-chart-head { display: flex; align-items: center; justify-content: space-between; }
.pl-chart-title { font-size: 0.875rem; font-weight: 700; color: var(--text-primary); }
.pl-chart-count {
font-size: 0.6875rem; font-weight: 700; color: var(--accent-hover);
background: var(--accent-soft); border-radius: var(--radius-full); padding: 1px 8px;
}
.pl-chart-svg { width: 100%; flex: 1; min-height: 60px; display: block; }
.pl-chart-svg polyline {
fill: none; stroke: var(--accent-hover); stroke-width: 1.75;
vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round;
}
.pl-chart-empty {
flex: 1; min-height: 60px; display: flex; align-items: center; justify-content: center;
border-radius: var(--radius-sm); background: rgba(0, 0, 0, 0.18);
color: var(--text-muted); font-size: 0.75rem; text-align: center;
}
/* List mode */
.pl-card--list { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius-full); }
.pl-list-name { font-weight: 700; color: var(--text-primary); font-size: 0.875rem; flex: 0 1 auto;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-list-owner { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--text-secondary); flex-shrink: 0; }
.pl-list-value { margin-left: auto; font-weight: 700; color: var(--text-primary); font-size: 0.8125rem; flex-shrink: 0; }
.pl-empty { font-size: 0.8125rem; color: var(--text-muted); padding: var(--space-md); text-align: center; }
.pl-create-err { color: var(--danger); font-size: 0.8125rem; margin: 0 0 4px; }
/* ── Calendar Page ───────────────────────────────────────────── */
.calendar-view { display: flex; flex-direction: column; gap: var(--space-md); }
.calendar-day { display: flex; flex-direction: column; }
.day-header {
display: flex; justify-content: space-between; align-items: center;
padding-bottom: var(--space-sm); margin-bottom: var(--space-sm);
border-bottom: 1px solid var(--glass-border);
}
.day-date { font-weight: 600; font-size: 1rem; }
.day-count { font-size: 0.8125rem; color: var(--text-muted); }
.day-tasks { display: flex; flex-direction: column; gap: var(--space-xs); }
.calendar-task {
display: flex; justify-content: space-between; align-items: center;
padding: var(--space-sm) 0;
}
.calendar-task .task-title { font-size: 0.875rem; }
/* ── Settings Page ───────────────────────────────────────────── */
.settings-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: var(--space-md);
}
.settings-section { padding: var(--space-lg); }
.section-header {
display: flex; align-items: center; gap: var(--space-sm);
margin-bottom: var(--space-lg); padding-bottom: var(--space-sm);
border-bottom: 1px solid var(--glass-border);
}
.section-icon { width: 20px; height: 20px; color: var(--accent); opacity: 0.7; }
.section-icon svg { width: 20px; height: 20px; }
.setting-row {
display: flex; justify-content: space-between; align-items: center;
padding: var(--space-sm) 0; border-bottom: 1px solid var(--glass-border-subtle);
}
.setting-row:last-child { border-bottom: none; }
.setting-info { flex: 1; }
.setting-label { font-size: 0.875rem; font-weight: 500; display: block; }
.setting-desc { font-size: 0.75rem; color: var(--text-muted); }
.setting-value { font-size: 0.875rem; color: var(--text-secondary); font-weight: 500; }
.color-dot { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; }
.toggle-dot {
width: 36px; height: 20px; border-radius: 10px;
background: rgba(100, 116, 139, 0.3); position: relative;
flex-shrink: 0;
}
.toggle-dot::after {
content: ''; position: absolute; top: 2px; left: 2px;
width: 16px; height: 16px; border-radius: 50%;
background: var(--text-muted); transition: all var(--transition-fast);
}
.toggle-dot.active { background: var(--accent-soft); }
.toggle-dot.active::after { left: 18px; background: var(--accent); }
/* ═══════════════════════════════════════════════════════════════
Contact Profile Page — cp-* classes
═══════════════════════════════════════════════════════════════ */
/* ── Pipeline Bar ───────────────────────────────────────────── */
.cp-pipeline-bar {
display: flex; align-items: center; gap: var(--space-md);
padding: var(--space-md); margin-bottom: var(--space-lg);
background: var(--glass-bg); border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
}
.cp-back-btn {
display: flex; align-items: center; gap: var(--space-xs);
color: var(--text-secondary); text-decoration: none; font-size: 0.875rem;
cursor: pointer; transition: color 0.2s;
}
.cp-back-btn:hover { color: var(--text-primary); }
/* ══════════════════════════════════════════════════════════════════
Aufgaben — the /tasks overview, a THREE-COLUMN board (.tsk-* namespace).
Columns left→right by urgency, colour-coded so the split is glanceable:
• Überfällig → danger / red (past-due)
• Heute → warning / amber (due today — the STRONGEST cue)
• Anstehend → neutral slate (future + undated)
This file: page frame, toolbar, board/columns/cards, drag&drop states,
undo/error feedback, worker avatar. Siblings (same .tsk-* namespace):
• _tasks_team.css — team workload strip + person picker
• _tasks_modal.css — create-task modal + link search
Uses only foundation/_tokens.css custom properties. Does NOT collide
with the profile tasks (.cp-task*) or the old page (.task-*).
══════════════════════════════════════════════════════════════════ */
/* ── Page root under AppLayout ─────────────────────────────────── */
.tsk-page {
display: flex;
flex-direction: column;
gap: var(--space-lg);
padding: var(--space-lg);
max-width: 1280px;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
}
/* ── Toolbar — the two segmented toggles ("Nur meine" · "Erledigte") ── */
.tsk-toolbar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-sm);
}
.tsk-seg {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 3px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-full);
}
.tsk-seg-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 16px;
border: none;
border-radius: var(--radius-full);
background: transparent;
color: var(--text-secondary);
font-family: var(--font-sans);
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: color var(--transition-fast), background var(--transition-fast);
}
.tsk-seg-btn:hover {
color: var(--text-primary);
background: var(--bg-hover);
}
.tsk-seg-btn.is-active {
color: #fff;
background: var(--accent);
box-shadow: 0 2px 10px var(--accent-glow);
}
.tsk-seg-btn.is-active:hover { background: var(--accent-hover); }
/* ── Board — three equal columns side by side ──────────────────── */
.tsk-board {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-lg);
align-items: start;
}
/* Stack on narrow viewports so cards never get crushed. */
@media (max-width: 1000px) {
.tsk-board { grid-template-columns: 1fr; }
}
/* ── A single column — colour driven by its modifier ───────────── */
.tsk-col {
display: flex;
flex-direction: column;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-top: 3px solid var(--tsk-accent);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
min-width: 0;
}
/* Each column publishes a --tsk-accent read by its dot, count, cards' rail. */
.tsk-col--overdue { --tsk-accent: var(--danger); --tsk-accent-soft: rgba(248, 113, 113, 0.12); }
.tsk-col--today { --tsk-accent: var(--warning); --tsk-accent-soft: rgba(251, 191, 36, 0.14); }
.tsk-col--upcoming { --tsk-accent: var(--text-secondary); --tsk-accent-soft: rgba(148, 163, 184, 0.12); }
/* "Heute" is the STRONGEST cue — a brighter amber frame + a warm glow so it
dominates even the red overdue column. */
.tsk-col--today {
border-color: rgba(251, 191, 36, 0.34);
box-shadow: var(--shadow-md), 0 6px 22px rgba(251, 191, 36, 0.11);
}
/* ── Column header ─────────────────────────────────────────────── */
.tsk-col-head {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-md);
border-bottom: 1px solid var(--glass-border-subtle);
background: linear-gradient(180deg, var(--tsk-accent-soft), transparent);
}
.tsk-col-dot {
width: 10px;
height: 10px;
flex-shrink: 0;
border-radius: 50%;
background: var(--tsk-accent);
box-shadow: 0 0 0 4px var(--tsk-accent-soft);
}
.tsk-col-title {
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.01em;
color: var(--text-primary);
}
.tsk-col--today .tsk-col-title { font-size: 1rem; }
.tsk-col--upcoming .tsk-col-title { color: var(--text-secondary); }
.tsk-col-count {
margin-left: auto;
min-width: 22px;
padding: 2px 9px;
border-radius: var(--radius-full);
background: var(--tsk-accent-soft);
color: var(--tsk-accent);
font-size: 0.75rem;
font-weight: 700;
font-family: var(--font-mono);
text-align: center;
line-height: 1.4;
}
.tsk-col--upcoming .tsk-col-count { color: var(--text-secondary); }
/* ── Column body — the stack of cards ──────────────────────────── */
.tsk-col-body {
display: flex;
flex-direction: column;
gap: var(--space-sm);
padding: var(--space-sm);
}
.tsk-col-empty {
padding: var(--space-lg) var(--space-md);
text-align: center;
color: var(--text-muted);
font-size: 0.8125rem;
}
/* ── Full-height board: columns scroll INTERNALLY (desktop) ────────────
Browsing one long column must not drag the whole page along — toolbar
and team strip stay put, each .tsk-col-body gets its own scrollbar.
Same :has() fill-flex chain as the pipeline board; every flex link
needs min-height:0 or the columns refuse to shrink below content.
The stacked mobile layout (≤1000px) keeps normal page scrolling —
three tiny scroll areas would be worse than one page. */
@media (min-width: 1001px) {
.app-main:has(.tsk-board) {
display: flex;
flex-direction: column;
min-height: 0;
}
.app-main:has(.tsk-board) .tsk-page {
flex: 1 1 auto;
min-height: 0;
}
/* Fixed chrome above the board: without flex-shrink:0 the fill-flex
column crushes toolbar and team strip to make room for the board. */
.app-main:has(.tsk-board) .tsk-toolbar,
.app-main:has(.tsk-board) .tsk-team {
flex-shrink: 0;
}
.tsk-board {
flex: 1 1 auto;
min-height: 0;
/* Equal-height columns (base rule: start) — an empty column is a
full-height drop target instead of a stub. */
align-items: stretch;
}
.tsk-col {
min-height: 0;
}
.tsk-col-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--glass-border-hover) transparent;
/* Reaching a column's end must not hand the wheel to the page. */
overscroll-behavior: contain;
}
}
/* ── Task card ─────────────────────────────────────────────────── */
.tsk-card {
display: flex;
flex-direction: column;
gap: 8px;
padding: 11px 12px;
background: rgba(0, 0, 0, 0.18);
border: 1px solid var(--glass-border-subtle);
border-left: 3px solid var(--tsk-accent);
border-radius: var(--radius-md);
transition: background var(--transition-fast), transform var(--transition-fast),
border-color var(--transition-fast);
}
.tsk-card:hover {
background: var(--bg-hover);
transform: translateY(-1px);
}
.tsk-card.is-done {
border-left-color: transparent;
opacity: 0.6;
}
.tsk-card-head {
display: flex;
align-items: flex-start;
gap: 10px;
}
/* Foot aligns under the title (checkbox 22px + 10px gap). */
.tsk-card-foot {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
padding-left: 32px;
}
/* ── Complete-toggle checkbox ──────────────────────────────────── */
.tsk-check {
width: 22px;
height: 22px;
flex-shrink: 0;
margin-top: 1px;
display: flex;
align-items: center;
justify-content: center;
border: 1.5px solid var(--glass-border);
border-radius: 7px;
background: transparent;
color: #fff;
font-size: 0.72rem;
line-height: 1;
cursor: pointer;
transition: background var(--transition-fast), border-color var(--transition-fast),
transform var(--transition-fast);
}
.tsk-check:hover {
border-color: var(--success);
background: rgba(52, 211, 153, 0.15);
}
.tsk-check.is-done {
background: var(--success);
border-color: var(--success);
}
.tsk-check.is-done:hover { transform: scale(1.05); }
/* ── Title ─────────────────────────────────────────────────────── */
.tsk-title {
flex: 1;
min-width: 0;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.35;
color: var(--text-primary);
word-break: break-word;
}
.tsk-card.is-done .tsk-title {
text-decoration: line-through;
color: var(--text-muted);
font-weight: 500;
}
/* ── Due date (foot, left — pushes avatar+chip to the right edge) ── */
.tsk-due {
display: inline-flex;
align-items: center;
gap: 5px;
margin-right: auto;
font-size: 0.75rem;
color: var(--text-muted);
white-space: nowrap;
}
.tsk-col--overdue .tsk-due { color: var(--danger); font-weight: 600; }
.tsk-col--today .tsk-due { color: var(--warning); font-weight: 600; }
.tsk-card.is-done .tsk-due { color: var(--text-muted); font-weight: 400; }
/* ── Profile chip (contact / company anchor, foot right) ───────── */
.tsk-link {
display: inline-flex;
align-items: center;
gap: 5px;
max-width: 100%;
padding: 3px 10px;
border: 1px solid var(--glass-border);
border-radius: var(--radius-full);
background: rgba(0, 0, 0, 0.20);
color: var(--text-secondary);
font-size: 0.75rem;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color var(--transition-fast), background var(--transition-fast),
border-color var(--transition-fast), transform var(--transition-fast);
}
.tsk-link-ico { display: inline-flex; align-items: center; flex-shrink: 0; }
.tsk-link svg { width: 12px; height: 12px; flex-shrink: 0; display: block; }
.tsk-link:hover {
color: var(--text-accent);
background: var(--accent-soft);
border-color: var(--glass-border-hover);
transform: translateY(-1px);
}
/* ── Priority badge (head, right) ──────────────────────────────── */
.tsk-prio {
flex-shrink: 0;
margin-left: auto;
padding: 2px 8px;
border-radius: var(--radius-full);
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
white-space: nowrap;
border: 1px solid transparent;
}
.tsk-prio--low {
color: var(--text-muted);
background: rgba(100, 116, 139, 0.14);
border-color: rgba(100, 116, 139, 0.22);
}
.tsk-prio--medium {
color: var(--info);
background: rgba(96, 165, 250, 0.14);
border-color: rgba(96, 165, 250, 0.26);
}
.tsk-prio--high {
color: var(--warning);
background: rgba(251, 191, 36, 0.15);
border-color: rgba(251, 191, 36, 0.30);
}
.tsk-prio--urgent {
color: var(--danger);
background: rgba(248, 113, 113, 0.16);
border-color: rgba(248, 113, 113, 0.35);
box-shadow: 0 0 12px rgba(248, 113, 113, 0.18);
}
/* ── Per-page empty-state text (glass wrapper reuses .empty-state) ── */
.tsk-empty {
color: var(--text-muted);
font-size: 0.875rem;
text-align: center;
}
/* ── Drag & drop ───────────────────────────────────────────────────
Dropping a card on a column re-targets its due date (Heute → today,
Anstehend → +3 Tage, Überfällig → gestern); the hovered column glows in
its own accent and its header announces the rule via .tsk-drop-hint. */
.tsk-card[draggable="true"] { cursor: grab; }
.tsk-card[draggable="true"]:active { cursor: grabbing; }
.tsk-card.is-dragging {
opacity: 0.45;
transform: scale(0.98);
border-style: dashed;
}
.tsk-col.drag-over {
border-color: var(--tsk-accent);
box-shadow: inset 0 0 0 2px var(--tsk-accent), 0 6px 26px var(--tsk-accent-soft);
}
/* Children must not steal dragleave/drop from the column (hover flicker). */
.tsk-col.drag-over .tsk-col-body { pointer-events: none; }
/* Header hint while hovering: what the drop will set ("→ heute"). Sits right
before the count, pushed to the right edge together with it. */
.tsk-drop-hint {
margin-left: auto;
padding: 2px 9px;
border-radius: var(--radius-full);
background: var(--tsk-accent);
color: #0b0f19;
font-size: 0.6875rem;
font-weight: 800;
letter-spacing: 0.02em;
white-space: nowrap;
}
/* The count keeps its own margin-left:auto; with the hint present both sit
right — cancel the count's auto so they cluster instead of spreading. */
.tsk-drop-hint + .tsk-col-count { margin-left: 0; }
/* ── Move feedback: rollback banner + undo chip (fixed, bottom-center) ── */
.tsk-move-error {
position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
z-index: 1200; padding: 10px 18px;
background: rgba(248, 113, 113, 0.12);
border: 1px solid rgba(248, 113, 113, 0.45);
color: var(--danger); border-radius: var(--radius-md);
font-size: 0.875rem; white-space: nowrap;
backdrop-filter: blur(12px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
/* A drop rewrites the due date irreversibly — the chip offers the way back. */
.tsk-undo {
position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
z-index: 1190;
display: flex; align-items: center; gap: 14px;
max-width: min(90vw, 560px);
padding: 10px 12px 10px 18px;
background: var(--glass-bg-heavy, rgba(15, 20, 34, 0.92));
border: 1px solid var(--glass-border);
border-radius: var(--radius-full);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
backdrop-filter: blur(12px);
animation: tsk-undo-in 160ms ease-out;
}
@keyframes tsk-undo-in {
from { opacity: 0; transform: translate(-50%, 8px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
.tsk-undo-text {
color: var(--text-secondary);
font-size: 0.8125rem;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tsk-undo-btn {
flex-shrink: 0;
padding: 6px 14px;
border: none;
border-radius: var(--radius-full);
background: var(--accent);
color: #fff;
font-family: var(--font-sans);
font-size: 0.8125rem;
font-weight: 700;
cursor: pointer;
transition: background var(--transition-fast), transform var(--transition-fast);
}
.tsk-undo-btn:hover { background: var(--accent-hover); transform: translateY(-1px); }
/* ── Worker avatar (card foot + picker items) ──────────────────────
The profile chips are CONTACTS — this small initials disc is the only
thing on a card that says WHOSE work it is. Colour is a stable per-name
hash across six muted hues; the full name sits in the tooltip. */
.tsk-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
flex-shrink: 0;
border-radius: 50%;
border: 1px solid var(--glass-border);
font-size: 0.5625rem;
font-weight: 800;
letter-spacing: 0.02em;
cursor: default;
}
.tsk-avatar--0 { background: rgba(96, 165, 250, 0.18); color: #93c5fd; }
.tsk-avatar--1 { background: rgba(52, 211, 153, 0.16); color: #6ee7b7; }
.tsk-avatar--2 { background: rgba(251, 191, 36, 0.16); color: #fcd34d; }
.tsk-avatar--3 { background: rgba(196, 181, 253, 0.16); color: #c4b5fd; }
.tsk-avatar--4 { background: rgba(244, 114, 182, 0.16); color: #f9a8d4; }
.tsk-avatar--5 { background: rgba(45, 212, 191, 0.16); color: #5eead4; }
/* ── Column quick-add ("+ Aufgabe" → inline title input) ─────────── */
.tsk-add {
padding: 9px 12px;
border: 1px dashed var(--glass-border);
border-radius: var(--radius-md);
background: transparent;
color: var(--text-muted);
font-family: var(--font-sans);
font-size: 0.8125rem;
font-weight: 600;
text-align: left;
cursor: pointer;
transition: color var(--transition-fast), border-color var(--transition-fast),
background var(--transition-fast);
}
.tsk-add:hover {
color: var(--text-accent);
border-color: var(--glass-border-hover);
background: var(--accent-soft);
}
/* Toolbar create button (right edge) — the modal's page-level entry point. */
.tsk-new-btn {
margin-left: auto;
padding: 8px 16px;
border: none;
border-radius: var(--radius-full);
background: var(--accent);
color: #fff;
font-family: var(--font-sans);
font-size: 0.8125rem;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
box-shadow: 0 2px 10px var(--accent-glow);
transition: background var(--transition-fast), transform var(--transition-fast);
}
.tsk-new-btn:hover { background: var(--accent-hover); transform: translateY(-1px); }
/* ══════════════════════════════════════════════════════════════════
Aufgaben — team scope UI (.tsk-* namespace, split from _tasks.css):
the workload strip (one chip per member, click = scope the board) and
the person picker dropdown with its member search. Card/board styles
live in _tasks.css, the create modal in _tasks_modal.css.
══════════════════════════════════════════════════════════════════ */
/* ── Team workload strip (between toolbar and board) ───────────────
One chip per member: avatar · name · overdue/today/upcoming counts ·
stacked distribution bar. Click scopes the board to that person; the
active chip gets the accent ring; idle members ("frei") are dimmed. */
.tsk-team {
display: flex;
gap: 10px;
overflow-x: auto;
padding-bottom: 4px;
scrollbar-width: thin;
}
.tsk-team-chip {
display: flex;
align-items: center;
gap: 10px;
flex: 0 0 auto;
min-width: 170px;
padding: 10px 14px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
cursor: pointer;
text-align: left;
transition: background var(--transition-fast), border-color var(--transition-fast),
transform var(--transition-fast), box-shadow var(--transition-fast);
}
.tsk-team-chip:hover {
background: var(--bg-hover);
border-color: var(--glass-border-hover);
transform: translateY(-1px);
}
.tsk-team-chip.is-active {
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent), 0 4px 16px var(--accent-glow);
}
.tsk-team-chip.is-idle { opacity: 0.55; }
.tsk-team-chip.is-idle:hover { opacity: 0.85; }
.tsk-team-chip .tsk-avatar {
width: 28px;
height: 28px;
font-size: 0.6875rem;
}
.tsk-team-info {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
flex: 1;
}
.tsk-team-top {
display: flex;
align-items: center;
gap: 10px;
}
.tsk-team-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.8125rem;
font-weight: 700;
color: var(--text-primary);
}
.tsk-team-free {
font-size: 0.6875rem;
font-weight: 600;
color: var(--text-muted);
}
.tsk-team-counts {
display: flex;
align-items: center;
gap: 9px;
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 700;
}
.tsk-tc { display: inline-flex; align-items: center; gap: 4px; }
.tsk-tc::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
opacity: 0.85;
}
.tsk-tc--overdue { color: var(--danger); }
.tsk-tc--today { color: var(--warning); }
.tsk-tc--upcoming { color: var(--text-secondary); }
.tsk-tc.is-zero { opacity: 0.35; }
.tsk-team-bar {
display: flex;
height: 4px;
border-radius: var(--radius-full);
background: rgba(148, 163, 184, 0.12);
overflow: hidden;
}
.tsk-team-seg { height: 100%; transition: width var(--transition-fast); }
.tsk-team-seg--overdue { background: var(--danger); }
.tsk-team-seg--today { background: var(--warning); }
.tsk-team-seg--upcoming { background: rgba(148, 163, 184, 0.55); }
/* ── Person picker (toolbar) — calendar-userpick pattern, .tsk-scoped ── */
.tsk-ownerpick { position: relative; }
.tsk-ownerpick-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-full);
color: var(--text-secondary);
font-family: var(--font-sans);
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: color var(--transition-fast), border-color var(--transition-fast),
background var(--transition-fast);
}
.tsk-ownerpick-btn:hover { color: var(--text-primary); background: var(--bg-hover); }
/* A non-default scope must be visible at a glance — accent ring like an
active filter, so nobody mistakes one person's board for the whole team. */
.tsk-ownerpick-btn.is-filtered {
color: var(--text-accent);
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent), 0 2px 12px var(--accent-glow);
}
.tsk-ownerpick-ico { display: inline-flex; }
.tsk-ownerpick-ico svg { width: 14px; height: 14px; display: block; }
.tsk-ownerpick-caret { font-size: 0.7rem; opacity: 0.7; }
/* No full-screen backdrop here: a fixed inset-0 layer would swallow wheel
events and freeze page scrolling while the menu is open — outside clicks
close via a window mousedown listener in picker.rs instead. */
.tsk-ownerpick-menu {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 1100;
min-width: 240px;
max-height: 340px;
overflow-y: auto;
padding: 6px;
background: var(--glass-bg-heavy, rgba(15, 20, 34, 0.96));
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
backdrop-filter: blur(14px);
}
.tsk-ownerpick-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 10px;
border: none;
border-radius: var(--radius-md);
background: transparent;
color: var(--text-secondary);
font-family: var(--font-sans);
font-size: 0.8125rem;
font-weight: 600;
text-align: left;
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
}
.tsk-ownerpick-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.tsk-ownerpick-item.is-active { background: var(--accent-soft); color: var(--text-accent); }
.tsk-ownerpick-sep { height: 1px; margin: 6px 4px; background: var(--glass-border-subtle); }
.tsk-ownerpick-empty {
padding: 12px 10px;
color: var(--text-muted);
font-size: 0.8125rem;
text-align: center;
}
/* Member search head of the dropdown: magnifier + borderless input on a
subtle inset field, separated from the list below. */
.tsk-ownerpick-search {
display: flex;
align-items: center;
gap: 8px;
margin: 2px 2px 6px;
padding: 8px 10px;
background: rgba(0, 0, 0, 0.25);
border: 1px solid var(--glass-border-subtle);
border-radius: var(--radius-md);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.tsk-ownerpick-search:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent-glow);
}
.tsk-ownerpick-search-ico { display: inline-flex; color: var(--text-muted); flex-shrink: 0; }
.tsk-ownerpick-search-ico svg { width: 14px; height: 14px; display: block; }
.tsk-ownerpick-search-input {
flex: 1;
min-width: 0;
border: none;
background: transparent;
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 0.8125rem;
outline: none;
}
.tsk-ownerpick-search-input::placeholder { color: var(--text-muted); }
/* ══════════════════════════════════════════════════════════════════
Aufgaben — create-task modal (.tsk-* namespace, split from _tasks.css):
overlay/dialog anatomy, form fields, priority chips, and the
contact/company link search. Board styles live in _tasks.css, the
team strip + person picker in _tasks_team.css.
══════════════════════════════════════════════════════════════════ */
/* ── Create-task modal ─────────────────────────────────────────────
Same overlay/head/body/actions anatomy as the dashboard's .wc-modal,
.tsk-scoped. The body scrolls, the footer stays pinned. */
.tsk-modal-overlay {
position: fixed;
inset: 0;
z-index: 1300;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(4, 7, 14, 0.62);
backdrop-filter: blur(6px);
}
.tsk-modal {
display: flex;
flex-direction: column;
width: min(560px, 94vw);
max-height: 86vh;
background: var(--glass-bg-heavy, rgba(15, 20, 34, 0.97));
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
animation: tsk-modal-in 160ms ease-out;
}
@keyframes tsk-modal-in {
from { opacity: 0; transform: translateY(10px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.tsk-modal-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--glass-border-subtle);
}
.tsk-modal-title {
margin: 0;
font-size: 1rem;
font-weight: 700;
color: var(--text-primary);
}
.tsk-modal-x {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
background: transparent;
color: var(--text-muted);
font-size: 1.05rem;
line-height: 1;
cursor: pointer;
transition: color var(--transition-fast), border-color var(--transition-fast);
}
.tsk-modal-x:hover { color: var(--danger); border-color: rgba(248, 113, 113, 0.45); }
.tsk-modal-body {
display: flex;
flex-direction: column;
gap: 14px;
padding: 18px 20px;
overflow-y: auto;
/* Link-search results auto-scroll into view (modal_link.rs) — glide,
don't jump. */
scroll-behavior: smooth;
}
/* Fields: stacked label + control; rows split into equal columns. */
.tsk-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tsk-field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.tsk-field-label {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
}
.tsk-field-input {
padding: 10px 12px;
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
background: rgba(0, 0, 0, 0.25);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 0.875rem;
outline: none;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.tsk-field-input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent-glow);
}
.tsk-field-input::placeholder { color: var(--text-muted); }
.tsk-field-textarea { resize: vertical; min-height: 72px; }
.tsk-field-select { appearance: auto; cursor: pointer; }
/* Dark theme for the native date/time picker glyphs. */
.tsk-field-input[type="date"], .tsk-field-input[type="time"] { color-scheme: dark; }
/* Priority: one chip per level, reusing the card badges' colour rules
(.tsk-prio--*); the picked chip lights up via outline + full opacity. */
.tsk-prio-row { display: flex; gap: 8px; flex-wrap: wrap; }
.tsk-prio-choice {
padding: 7px 14px;
border-radius: var(--radius-full);
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.02em;
cursor: pointer;
opacity: 0.55;
transition: opacity var(--transition-fast), transform var(--transition-fast),
box-shadow var(--transition-fast);
}
.tsk-prio-choice:hover { opacity: 0.85; }
.tsk-prio-choice.is-active {
opacity: 1;
transform: translateY(-1px);
box-shadow: 0 0 0 1.5px currentColor;
}
.tsk-modal-error {
padding: 10px 12px;
border: 1px solid rgba(248, 113, 113, 0.45);
border-radius: var(--radius-md);
background: rgba(248, 113, 113, 0.12);
color: var(--danger);
font-size: 0.8125rem;
}
.tsk-modal-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
padding: 14px 20px;
border-top: 1px solid var(--glass-border-subtle);
}
.tsk-modal-btn {
padding: 9px 18px;
border-radius: var(--radius-full);
font-family: var(--font-sans);
font-size: 0.8125rem;
font-weight: 700;
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast),
transform var(--transition-fast);
}
.tsk-modal-btn--ghost {
border: 1px solid var(--glass-border);
background: transparent;
color: var(--text-secondary);
}
.tsk-modal-btn--ghost:hover { color: var(--text-primary); background: var(--bg-hover); }
.tsk-modal-btn--primary {
border: none;
background: var(--accent);
color: #fff;
box-shadow: 0 2px 10px var(--accent-glow);
}
.tsk-modal-btn--primary:hover:not(:disabled) { background: var(--accent-hover); transform: translateY(-1px); }
.tsk-modal-btn--primary:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
/* ── Link picker inside the modal (contact/company via global search) ── */
.tsk-link-search {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
background: rgba(0, 0, 0, 0.25);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.tsk-link-search:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent-glow);
}
.tsk-link-search-ico { display: inline-flex; color: var(--text-muted); flex-shrink: 0; }
.tsk-link-search-ico svg { width: 14px; height: 14px; display: block; }
.tsk-link-search-input {
flex: 1;
min-width: 0;
border: none;
background: transparent;
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 0.875rem;
outline: none;
}
.tsk-link-search-input::placeholder { color: var(--text-muted); }
.tsk-link-results {
display: flex;
flex-direction: column;
gap: 2px;
max-height: 180px;
overflow-y: auto;
margin-top: 6px;
padding: 4px;
border: 1px solid var(--glass-border-subtle);
border-radius: var(--radius-md);
background: rgba(0, 0, 0, 0.18);
}
.tsk-link-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border: none;
border-radius: var(--radius-md);
background: transparent;
color: var(--text-secondary);
font-family: var(--font-sans);
font-size: 0.8125rem;
font-weight: 600;
text-align: left;
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
}
.tsk-link-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.tsk-link-item-ico { display: inline-flex; flex-shrink: 0; color: var(--text-muted); }
.tsk-link-item-ico svg { width: 13px; height: 13px; display: block; }
.tsk-link-item-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsk-link-item-sub {
margin-left: auto;
color: var(--text-muted);
font-size: 0.6875rem;
white-space: nowrap;
}
.tsk-link-empty {
margin-top: 6px;
padding: 10px;
color: var(--text-muted);
font-size: 0.8125rem;
text-align: center;
}
/* Linked entity chip (replaces the search until unlinked). */
.tsk-linkchip {
display: inline-flex;
align-items: center;
gap: 8px;
max-width: 100%;
padding: 8px 8px 8px 14px;
border: 1px solid var(--accent);
border-radius: var(--radius-full);
background: var(--accent-soft);
color: var(--text-accent);
font-size: 0.8125rem;
font-weight: 600;
align-self: flex-start;
}
.tsk-linkchip-ico { display: inline-flex; flex-shrink: 0; }
.tsk-linkchip-ico svg { width: 13px; height: 13px; display: block; }
.tsk-linkchip-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsk-linkchip-x {
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 50%;
background: transparent;
color: var(--text-accent);
font-size: 0.95rem;
line-height: 1;
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
}
.tsk-linkchip-x:hover { background: rgba(248, 113, 113, 0.18); color: var(--danger); }
/* ── Pipeline board: stage-member cards (contacts/companies without a deal) ──
Deals bleiben die "vollen" Karten; Member-Karten tragen einen Entity-Badge
und einen dezenten Akzentstreifen, damit beide Typen unterscheidbar sind. */
.pl-card--member {
border-left: 2px solid var(--accent, #818cf8);
}
.pl-member-badge {
display: inline-block;
margin-left: 6px;
padding: 1px 7px;
border-radius: 999px;
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--accent, #818cf8);
background: color-mix(in srgb, var(--accent, #818cf8) 14%, transparent);
vertical-align: middle;
white-space: nowrap;
}
.pl-card--list .pl-member-badge {
margin-left: auto;
}
/* ── Standalone calendar page ─────────────────────────────────── */
/* Full-height page: turn the scroll shell into a fill-flex column (scoped via
:has() so only the calendar page is affected) and trim the top padding so the
agenda uses the whole viewport — toolbar hugs the top, grid reaches the very
bottom edge. Mirrors the pipeline board's `.app-main:has(.pl-board)` pattern. */
.app-main:has(.cal-grid) {
display: flex; flex-direction: column; min-height: 0;
padding-top: 8px; padding-bottom: var(--space-sm);
}
.cal-toolbar {
display: flex; align-items: center; gap: var(--space-md);
margin-bottom: var(--space-sm); flex-wrap: wrap;
}
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-today-btn {
padding: 6px 14px; border-radius: var(--radius-sm); border: 1px solid var(--glass-border);
background: var(--glass-bg); color: var(--text-primary); font-size: 0.8125rem;
font-weight: 600; cursor: pointer; transition: all var(--transition-fast);
}
.cal-today-btn:hover { background: var(--bg-hover); }
/* Segmented view switch */
.cal-viewswitch {
display: flex; gap: 4px; padding: 4px; border-radius: 12px;
background: rgba(0, 25, 47, 0.55); border: 1px solid var(--glass-border);
}
.cal-vbtn {
padding: 6px 14px; border: none; border-radius: 9px; background: transparent;
color: var(--text-secondary); font-size: 0.8125rem; font-weight: 600; cursor: pointer;
transition: all var(--transition-fast); white-space: nowrap;
}
.cal-vbtn:hover { color: var(--text-primary); }
.cal-vbtn.active { background: #00284b; color: #fff; }
/* User picker */
.cal-userpick { position: relative; margin-left: auto; }
.cal-userpick-btn {
display: flex; align-items: center; gap: 8px; padding: 7px 14px;
border-radius: var(--radius-sm); border: 1px solid var(--glass-border);
background: var(--glass-bg); color: var(--text-primary); font-size: 0.8125rem;
font-weight: 600; cursor: pointer; transition: all var(--transition-fast);
}
.cal-userpick-btn:hover { border-color: var(--glass-border-hover); }
.cal-userpick-caret { color: var(--text-muted); font-size: 0.85rem; }
.cal-userpick-menu {
position: absolute; top: calc(100% + 6px); right: 0; z-index: 100; min-width: 220px;
background: var(--glass-bg-solid); border: 1px solid var(--glass-border);
border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
padding: 6px; max-height: 320px; overflow-y: auto;
}
.cal-userpick-item {
display: block; width: 100%; text-align: left; padding: 8px 10px; border: none;
border-radius: var(--radius-sm); background: transparent; color: var(--text-primary);
font-size: 0.8125rem; cursor: pointer; transition: background var(--transition-fast);
}
.cal-userpick-item:hover { background: var(--bg-hover); }
/* Grid — vertical stack (headrow · all-day lane · scrollable body) that grows
to fill the page height. `display:flex; flex-direction:column` is explicit so
the sections always stack even if another page defines a `.cal-*` grid. */
.cal-grid {
padding: 0; overflow: hidden;
display: flex; flex-direction: column;
flex: 1 1 auto; min-height: 0;
}
.cal-headrow {
display: flex; border-bottom: 1px solid var(--glass-border);
}
.cal-time-spacer { width: 52px; flex-shrink: 0; }
.cal-dayhead {
flex: 1; min-width: 0; padding: 8px 4px 7px;
display: flex; flex-direction: column; align-items: center; gap: 2px;
border-left: 1px solid var(--glass-border-subtle);
}
.cal-dayhead-wd {
font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.05em; color: var(--text-muted);
}
.cal-dayhead-num {
display: flex; align-items: center; justify-content: center;
min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px;
font-size: 1.125rem; font-weight: 700; color: var(--text-primary); line-height: 1;
}
.cal-dayhead.today .cal-dayhead-wd { color: var(--accent-hover); }
.cal-dayhead.today .cal-dayhead-num { background: var(--accent); color: #fff; }
.cal-dayhead.weekend { background: rgba(255, 255, 255, 0.012); }
.cal-dayhead.weekend .cal-dayhead-num { color: var(--text-secondary); }
/* All-day lane */
.cal-allday {
display: flex; border-bottom: 1px solid var(--glass-border);
min-height: 30px; background: rgba(255, 255, 255, 0.008);
}
.cal-allday-label {
width: 52px; flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end;
padding-right: 6px; font-size: 0.5625rem; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.03em; color: var(--text-muted);
}
.cal-allday-cell {
flex: 1; min-width: 0; border-left: 1px solid var(--glass-border-subtle);
padding: 3px 4px; display: flex; flex-direction: column; gap: 3px;
}
.cal-allday-chip {
font-size: 0.6875rem; font-weight: 600; color: var(--text-primary);
padding: 2px 7px; border-radius: 4px; cursor: pointer;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
transition: filter var(--transition-fast);
}
.cal-allday-chip:hover { filter: brightness(1.15); }
.cal-scroll {
flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin;
}
.cal-body { display: flex; position: relative; }
.cal-timerail { width: 52px; flex-shrink: 0; }
.cal-trow {
height: 48px; box-sizing: border-box; display: flex; justify-content: flex-end;
padding-right: 6px; align-items: flex-start;
}
.cal-trow .cp-cal-time { font-size: 0.6875rem; color: var(--text-muted); transform: translateY(-7px); }
.cal-col {
flex: 1; min-width: 0; position: relative;
border-left: 1px solid var(--glass-border-subtle); user-select: none;
}
.cal-col.weekend { background: rgba(255, 255, 255, 0.012); }
.cal-cell {
height: 48px; box-sizing: border-box; position: relative;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
/* faint half-hour divider at the vertical middle */
background-image: linear-gradient(to bottom,
transparent calc(50% - 0.5px), rgba(255, 255, 255, 0.022) calc(50% - 0.5px),
rgba(255, 255, 255, 0.022) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}
.cal-cell:hover::after {
content: "+"; position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-size: 1rem; font-weight: 600; color: var(--text-muted);
background: rgba(99, 102, 241, 0.05); opacity: 0.55; pointer-events: none;
}
/* Event chip (Outlook-style) — left/width set inline for overlap columns */
.cal-event {
position: absolute; box-sizing: border-box;
border-radius: 5px; padding: 3px 7px; overflow: hidden; cursor: grab;
display: flex; flex-direction: column; gap: 1px; z-index: 2;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
transition: filter var(--transition-fast), box-shadow var(--transition-fast);
}
.cal-event:hover { filter: brightness(1.12); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35); z-index: 6; }
.cal-event:active { cursor: grabbing; }
.cal-event-title {
font-size: 0.75rem; font-weight: 700; color: var(--text-primary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
/* Reserve room for the status circle (top-right) so the title truncates
cleanly BEFORE it — no „…" running under the circle. */
padding-right: 20px;
}
.cal-event-time { font-size: 0.625rem; color: var(--text-secondary); pointer-events: none; }
.cal-event-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize; }
.cal-event-resize:hover { background: rgba(255, 255, 255, 0.18); }
.cal-event.provisional {
left: 2px !important; right: 2px; width: auto !important;
background: rgba(99, 102, 241, 0.25); border: 1px dashed var(--accent);
pointer-events: none; box-shadow: none;
}
/* ── Termin-Ausgang-Kreis (Linksklick=erschienen, Rechtsklick=Menü) ── */
.cal-event-status {
position: absolute; top: 4px; right: 5px;
width: 15px; height: 15px; padding: 0;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.55);
background: rgba(0, 0, 0, 0.18);
color: #fff; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
z-index: 5;
transition: background 0.12s, border-color 0.12s, transform 0.1s;
}
.cal-event-status:hover { border-color: #fff; transform: scale(1.12); }
.cal-event-status-ico { display: flex; }
.cal-event-status-ico svg { width: 10px; height: 10px; }
.cal-event-status-done { background: #34d399; border-color: #34d399; color: #06281c; }
.cal-event-status-noshow { background: #fbbf24; border-color: #fbbf24; }
.cal-event-status-cancelled { background: #f87171; border-color: #f87171; }
/* ── Rechtsklick-Ausgang-Menü ── */
.cal-status-menu-backdrop { position: fixed; inset: 0; z-index: 9999; }
.cal-status-menu {
position: fixed; min-width: 158px; padding: 5px;
background: #161b2b;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
display: flex; flex-direction: column; gap: 2px;
}
.cal-status-menu-item {
display: flex; align-items: center; gap: 9px;
padding: 7px 10px;
border: none; background: transparent;
color: rgba(255, 255, 255, 0.85);
font-size: 0.78rem; font-weight: 500;
text-align: left; border-radius: 7px; cursor: pointer; white-space: nowrap;
}
.cal-status-menu-item:hover { background: rgba(255, 255, 255, 0.08); }
.cal-status-menu-item::before {
content: ""; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}
.cal-status-menu-item-done::before { background: #34d399; }
.cal-status-menu-item-noshow::before { background: #fbbf24; }
.cal-status-menu-item-cancelled::before { background: #f87171; }
.cal-status-menu-item-open::before {
background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.45);
}
/* Current-time indicator (Outlook red line) */
.cal-nowline {
position: absolute; left: 0; right: 0; height: 0;
border-top: 2px solid #ef4444; z-index: 7; pointer-events: none;
}
.cal-nowline-dot {
position: absolute; left: -1px; top: -5px; width: 9px; height: 9px;
border-radius: 50%; background: #ef4444;
}
/* Create/edit modal */
.cal-modal-backdrop {
position: fixed; inset: 0; z-index: 4000;
background: rgba(0, 0, 0, 0.2); display: flex; align-items: center; justify-content: center;
/* no backdrop blur — the calendar behind stays sharp (Outlook-style) */
}
.cal-modal {
width: 380px; max-width: calc(100vw - 32px); max-height: calc(100vh - 48px); overflow-y: auto;
display: flex; flex-direction: column; gap: var(--space-sm);
background: var(--glass-bg-solid); border: 1px solid var(--glass-border);
border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--space-md);
}
.cal-modal-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 4px;
}
/* Meeting-link readout (detail popup + modal link row) */
.cal-link {
flex: 1; min-width: 0; font-size: 0.8125rem; color: var(--accent-hover);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none;
}
.cal-link:hover { text-decoration: underline; }
.cal-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-chip {
display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px;
border-radius: 999px; background: var(--bg-hover); border: 1px solid var(--glass-border);
font-size: 0.75rem; color: var(--text-primary);
}
.cal-chip-x {
border: none; background: rgba(255, 255, 255, 0.08); color: var(--text-muted);
width: 16px; height: 16px; border-radius: 50%; cursor: pointer; line-height: 1;
display: inline-flex; align-items: center; justify-content: center; font-size: 0.65rem;
}
.cal-chip-x:hover { background: var(--danger); color: #fff; }
.cal-contact-search { position: relative; }
.cal-contact-results {
position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 10;
background: var(--glass-bg-solid); border: 1px solid var(--glass-border);
border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 4px;
max-height: 200px; overflow-y: auto;
}
.cal-contact-item {
display: block; width: 100%; text-align: left; padding: 7px 10px; border: none;
border-radius: var(--radius-sm); background: transparent; color: var(--text-primary);
font-size: 0.8125rem; cursor: pointer;
}
.cal-contact-item:hover { background: var(--bg-hover); }
/* ── Modal polish (create/edit) ─────────────────────────────── */
.cal-icon-btn {
width: 30px; height: 30px; flex-shrink: 0; border: none; border-radius: 8px;
background: transparent; color: var(--text-muted); cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all var(--transition-fast);
}
.cal-icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.cal-icon-btn svg { width: 17px; height: 17px; }
.cal-modal-title-h { font-size: 1.0625rem; font-weight: 700; color: var(--text-primary); }
/* Borderless Outlook-style title — bottom hairline only */
.cal-modal-title-input {
width: 100%; box-sizing: border-box; padding: 6px 2px 9px; font-size: 1.25rem; font-weight: 700;
color: var(--text-primary); background: transparent;
border: none; border-bottom: 1px solid var(--glass-border);
font-family: var(--font-sans); outline: none; transition: border-color var(--transition-fast);
}
.cal-modal-title-input:focus { border-bottom-color: var(--accent); }
.cal-modal-title-input::placeholder { color: var(--text-muted); font-weight: 600; }
.cal-field { display: flex; align-items: center; gap: 12px; }
.cal-field-ic { flex-shrink: 0; color: var(--text-muted); display: flex; width: 18px; justify-content: center; }
.cal-field-ic svg { width: 17px; height: 17px; }
.cal-field-grow { flex: 1; min-width: 0; }
/* ── Wide Outlook-compose modal (borderless rows, icon gutter) ── */
.cal-modal-wide {
width: 600px; max-width: calc(100vw - 32px);
padding: var(--space-md) var(--space-lg) var(--space-lg);
gap: 14px;
}
/* Top-align the icon gutter for multi-line rows (chips, swatches, notes) */
.cal-field-top { align-items: flex-start; }
.cal-field-top .cal-field-ic { margin-top: 5px; }
.cal-stack { display: flex; flex-direction: column; gap: 8px; }
/* Horizontal "when" row — toggle + date + time inline → grows wide, not tall */
.cal-when { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cal-times { display: flex; align-items: center; gap: 8px; }
.cal-field-link { margin-top: -6px; }
.cal-field-link .cal-link { font-size: 0.8125rem; }
/* Borderless underline inputs (the Outlook signature) */
.cal-uline {
width: 100%; box-sizing: border-box; padding: 6px 2px; font-size: 0.9rem;
color: var(--text-primary); background: transparent; color-scheme: dark;
border: none; border-bottom: 1px solid var(--glass-border);
font-family: var(--font-sans); outline: none;
transition: border-color var(--transition-fast);
}
.cal-uline:focus { border-bottom-color: var(--accent); }
.cal-uline::placeholder { color: var(--text-muted); }
.cal-uline:disabled { color: var(--text-secondary); opacity: 0.8; }
.cal-uline-date { width: auto; flex: 0 1 auto; }
.cal-uline-time { width: auto; flex: 0 0 92px; }
select.cal-uline { cursor: pointer; }
select.cal-uline option { background: var(--glass-bg-solid); color: var(--text-primary); }
.cal-uline-notes {
width: 100%; box-sizing: border-box; padding: 6px 2px; font-size: 0.9rem; line-height: 1.5;
color: var(--text-primary); background: transparent;
border: none; border-bottom: 1px solid var(--glass-border);
font-family: var(--font-sans); outline: none; resize: vertical;
min-height: 46px; max-height: 140px;
transition: border-color var(--transition-fast);
}
.cal-uline-notes:focus { border-bottom-color: var(--accent); }
.cal-uline-notes::placeholder { color: var(--text-muted); }
/* iOS-style toggle switch */
.cal-switch-wrap { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; flex-shrink: 0; }
.cal-switch { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
.cal-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cal-switch-knob {
position: absolute; inset: 0; border-radius: 999px;
background: var(--bg-hover); border: 1px solid var(--glass-border);
transition: background var(--transition-fast), border-color var(--transition-fast);
}
.cal-switch-knob::before {
content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
border-radius: 50%; background: var(--text-secondary);
transition: transform var(--transition-fast), background var(--transition-fast);
}
.cal-switch input:checked + .cal-switch-knob { background: var(--accent); border-color: transparent; }
.cal-switch input:checked + .cal-switch-knob::before { transform: translateX(16px); background: #fff; }
.cal-switch input:disabled + .cal-switch-knob { opacity: 0.5; }
.cal-switch-lbl { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
/* Footer separator for the wide modal */
.cal-modal-foot { margin-top: 6px; padding-top: var(--space-md); border-top: 1px solid var(--glass-border); }
/* Narrow viewports: let the wide card shrink gracefully */
@media (max-width: 620px) {
.cal-modal-wide { width: 100%; padding: var(--space-md); }
.cal-when { gap: 10px; }
}
/* ── Event detail (peek) popup ──────────────────────────────── */
.cal-detail {
width: 360px; max-width: calc(100vw - 32px); max-height: calc(100vh - 48px); overflow-y: auto;
display: flex; flex-direction: column;
background: var(--glass-bg-solid); border: 1px solid var(--glass-border);
border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
}
.cal-detail-head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
padding: 14px 14px 12px;
}
.cal-detail-titlewrap { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
.cal-detail-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.cal-detail-title { font-size: 1.0625rem; font-weight: 700; color: var(--text-primary); line-height: 1.3; }
.cal-detail-acts { display: flex; gap: 2px; flex-shrink: 0; }
.cal-detail-body {
display: flex; flex-direction: column; gap: 14px;
padding: 14px 16px 16px; border-top: 1px solid var(--glass-border);
}
.cal-detail-row { display: flex; align-items: center; gap: 11px; }
.cal-detail-ic { flex-shrink: 0; color: var(--text-muted); display: flex; width: 16px; justify-content: center; }
.cal-detail-ic svg { width: 16px; height: 16px; }
.cal-detail-when { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); }
.cal-detail-sub { font-size: 0.8125rem; color: var(--text-secondary); }
.cal-detail-badge { font-size: 0.75rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.cal-detail-join {
display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
padding: 8px 14px; border-radius: var(--radius-sm); text-decoration: none;
background: var(--accent); color: #fff; font-size: 0.8125rem; font-weight: 600;
transition: filter var(--transition-fast);
}
.cal-detail-join:hover { filter: brightness(1.1); }
.cal-detail-join svg { width: 15px; height: 15px; }
.cal-detail-sec { display: flex; flex-direction: column; gap: 7px; }
.cal-detail-label {
display: flex; align-items: center; gap: 6px;
font-size: 0.6875rem; font-weight: 600; color: var(--text-muted);
text-transform: uppercase; letter-spacing: 0.04em;
}
.cal-detail-label svg { width: 13px; height: 13px; }
.cal-detail-atts { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-detail-att {
display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px;
background: var(--bg-hover); border: 1px solid var(--glass-border);
font-size: 0.75rem; font-weight: 500; color: var(--text-primary); text-decoration: none;
transition: all var(--transition-fast);
}
.cal-detail-att:hover { border-color: var(--accent); color: var(--accent-hover); }
.cal-detail-profile {
display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
font-size: 0.8125rem; font-weight: 600; color: var(--accent-hover); text-decoration: none;
}
.cal-detail-profile:hover { text-decoration: underline; }
.cal-detail-profile svg { width: 15px; height: 15px; }
.cal-detail-notes {
margin: 0; font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.5; white-space: pre-wrap;
}
.cal-detail-ai-btn {
align-self: flex-start; padding: 7px 13px; border-radius: var(--radius-sm);
border: 1px dashed var(--glass-border-hover); background: var(--accent-soft);
color: var(--accent-hover); font-size: 0.8125rem; font-weight: 600; cursor: pointer;
transition: background var(--transition-fast);
}
.cal-detail-ai-btn:hover { background: rgba(99, 102, 241, 0.18); }
.cal-detail-ai-status { margin: 0; font-size: 0.8125rem; color: var(--text-muted); font-style: italic; }
.cal-detail-ai-text {
margin: 0; font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.55; white-space: pre-wrap;
background: rgba(99, 102, 241, 0.07); border-left: 2px solid var(--accent);
padding: 9px 12px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.cal-detail-del {
display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
padding: 7px 12px; border: none; border-radius: var(--radius-sm); cursor: pointer;
background: rgba(248, 113, 113, 0.12); color: var(--danger);
font-size: 0.8125rem; font-weight: 600; transition: background var(--transition-fast);
}
.cal-detail-del:hover { background: rgba(248, 113, 113, 0.2); }
.cal-detail-del svg { width: 14px; height: 14px; }
/* Calendar & Contact Profile */
.cp-back-btn:hover { color: var(--text-primary); border-color: var(--accent); }
.cp-back-btn svg { width: 16px; height: 16px; }
/* ── Pipeline bar inside the top header (transparent, fills the slot) ── */
.cp-topbar-inner {
display: flex; align-items: center; gap: var(--space-md);
width: 100%; min-width: 0;
}
.cp-topbar-inner > .cp-back-btn,
.cp-topbar-inner > .cp-outcome-btns { flex-shrink: 0; }
/* All header controls share one height + glass box (Zurück · Pipeline · Lupe) */
.cp-topbar-inner .cp-back-btn {
height: 40px; padding: 0 var(--space-lg);
background: var(--glass-bg); border: 1px solid var(--glass-border);
border-radius: 15px;
}
.cp-topbar-inner .cp-pill-track {
height: 40px; position: relative; overflow: hidden;
background: var(--glass-bg); border-color: var(--glass-border);
}
/* ── Pipeline Pill Area ────────────────────────────────────── */
.cp-pills-area {
flex: 1; display: flex; flex-direction: column; gap: 6px;
min-width: 0;
}
.cp-pill-row {
display: flex; align-items: center; gap: var(--space-sm);
}
.cp-pill-label {
font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.05em; color: var(--text-muted);
white-space: nowrap; min-width: 80px;
}
.cp-pill-track {
display: flex; flex: 1; overflow: hidden;
border-radius: var(--radius-full);
border: 1px solid rgba(100, 116, 139, 0.12);
}
/* Progress fill inside the bordered pill (shows how far in the pipeline).
Tinted with the tenant's selected accent (--accent) via color-mix, keeping the
translucent gradient + glow so the glass pill still reads through it. */
.cp-pill-fill {
position: absolute; left: 0; top: 0; bottom: 0; z-index: 0;
border-radius: var(--radius-full);
background: linear-gradient(90deg,
color-mix(in srgb, var(--accent) 45%, transparent),
color-mix(in srgb, var(--accent) 68%, transparent));
box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 30%, transparent);
transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.cp-pill-stages {
position: relative; z-index: 1; flex: 1; height: 100%;
display: flex; align-items: center; justify-content: space-between;
padding: 0 var(--space-lg);
}
.cp-pill-seg {
padding: 0 6px; font-size: 0.8125rem; font-weight: 600;
background: transparent; color: var(--text-muted); border: none;
cursor: pointer; transition: color 0.18s ease;
white-space: nowrap; flex-shrink: 0;
}
.cp-pill-seg:hover { color: var(--text-primary); }
/* Read-only (kein contacts:/companies:write): Pill ist reine Fortschrittsanzeige. */
.cp-pill-seg:disabled { cursor: default; }
.cp-pill-seg:disabled:hover { color: var(--text-muted); }
.cp-pill-seg.past:disabled:hover { color: rgba(255, 255, 255, 0.92); }
.cp-pill-seg.active:disabled:hover { color: #fff; }
.cp-pill-seg.past { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 2px rgba(0,0,0,0.35); }
.cp-pill-seg.active { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.45); }
/* Faint chevron between stages (›) */
.cp-pill-sep {
color: rgba(255, 255, 255, 0.45); flex-shrink: 0;
font-size: 1rem; padding: 0 1px; user-select: none;
}
.cp-outcome-btns { display: flex; gap: var(--space-sm); flex-shrink: 0; }
.cp-won-btn, .cp-lost-btn {
padding: 8px var(--space-lg); border-radius: var(--radius-sm);
font-size: 0.8125rem; font-weight: 600; border: none; cursor: pointer;
transition: all var(--transition-fast);
}
.cp-won-btn { background: rgba(34, 197, 94, 0.15); color: var(--success); }
.cp-won-btn:hover { background: rgba(34, 197, 94, 0.3); }
.cp-lost-btn { background: rgba(248, 113, 113, 0.15); color: var(--danger); }
.cp-lost-btn:hover { background: rgba(248, 113, 113, 0.3); }
/* ── Floating search pill (pipeline bar) ───────────────────────
Collapsed: just the magnifier, no background (floating).
Open: expands to a field; the pipeline (flex:1) shrinks in sync.
Width transition drives both movements as one animation. */
.cp-search-pill {
flex-shrink: 0; display: flex; align-items: center;
width: 40px; height: 40px; overflow: hidden;
border-radius: var(--radius-full);
background: var(--glass-bg); border: 1px solid var(--glass-border);
transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.32s ease;
}
.cp-search-pill.open {
width: 360px;
border-color: var(--glass-border-hover);
}
.cp-search-input {
flex: 1; min-width: 0;
background: transparent; border: none; outline: none;
color: var(--text-primary); font-family: var(--font-sans);
font-size: 0.875rem; padding: 0;
opacity: 0; transition: opacity 0.22s ease 0.06s, padding 0.28s ease;
}
/* Collapsed: no padding so the magnifier isn't pushed out / clipped */
.cp-search-pill.open .cp-search-input {
opacity: 1; padding: 0 var(--space-sm) 0 var(--space-md);
}
.cp-search-input::placeholder { color: var(--text-muted); }
.cp-search-icon {
flex-shrink: 0; width: 40px; height: 40px; padding: 0;
display: flex; align-items: center; justify-content: center;
background: transparent; border: none; cursor: pointer;
color: var(--text-muted); transition: color 0.2s ease;
}
.cp-search-icon:hover { color: var(--text-primary); }
.cp-search-icon svg { width: 18px; height: 18px; }
/* Search results dropdown (wired to /api/v1/search) */
.cp-search { position: relative; flex-shrink: 0; }
.cp-search-results {
position: absolute; top: calc(100% + 8px); right: 0;
width: 340px; max-height: 60vh; overflow-y: auto;
background: var(--glass-bg-solid); border: 1px solid var(--glass-border);
border-radius: var(--radius-md); padding: var(--space-xs);
box-shadow: var(--shadow-lg); z-index: 200;
}
.cp-search-group {
font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.05em; color: var(--text-muted); padding: 8px 10px 4px;
}
.cp-search-item {
display: flex; flex-direction: column; gap: 1px;
padding: 8px 10px; border-radius: var(--radius-sm);
color: var(--text-primary); text-decoration: none;
font-size: 0.85rem; transition: background 0.15s;
}
.cp-search-item:hover { background: var(--bg-hover); }
.cp-search-item small { color: var(--text-muted); font-size: 0.72rem; }
.cp-search-empty { padding: 14px; text-align: center; color: var(--text-muted); font-size: 0.82rem; }
/* ── Two-Column Layout ──────────────────────────────────────── */
.cp-layout { display: flex; gap: var(--space-sm); align-items: flex-start; height: calc(100vh - 120px); }
.cp-left {
width: 330px; flex-shrink: 0; display: flex; flex-direction: column; gap: var(--space-sm);
position: sticky; top: 0; max-height: calc(100vh - 120px);
overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.cp-left::-webkit-scrollbar { display: none; }
.cp-unified-layout { display: flex; flex-direction: column; gap: 11px; }
.cp-right {
flex: 1; min-width: 0; display: flex; flex-direction: column;
position: sticky; top: 0; max-height: calc(100vh - 120px);
}
/* ── Right Column: tabs · collapsing editor box · scrollable body ───── */
.cp-right > .cp-tabs { flex-shrink: 0; margin-bottom: var(--space-sm); }
/* Editor/action box: hides on scroll-down, reveals on scroll-up. One eased
transition per toggle — smooth, no per-scroll-tick reflow. */
.cp-right-editor {
flex-shrink: 0; display: flex; flex-direction: column; gap: var(--space-sm);
overflow: hidden;
max-height: 640px; opacity: 1; transform: translateY(0);
transition: max-height 0.34s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.22s ease, transform 0.34s ease, margin 0.34s ease;
will-change: max-height, opacity, transform;
}
.cp-right-editor.collapsed {
max-height: 0; opacity: 0; transform: translateY(-10px);
margin: 0; pointer-events: none;
}
.cp-right-body {
flex: 1; overflow-y: auto; display: flex; flex-direction: column;
gap: var(--space-sm); padding-top: var(--space-sm);
scrollbar-width: none; -ms-overflow-style: none;
}
.cp-right-body::-webkit-scrollbar { display: none; }
/* ── E-Mail Composer (Figma: Selly Email.svg) ──────────────────
A centred column of floating rounded fields on the editor card:
To · Betreff (each with a trailing square action), then a body
block with the send button docked bottom-right inside it. */
.cp-note-editor.cp-mail {
padding: 0;
min-height: 0;
}
.cp-mail-body {
width: 56%;
max-width: 540px;
margin: 18px auto;
display: flex;
flex-direction: column;
gap: 10px;
}
/* An / Betreff — a floating rounded field + trailing square action. */
.cp-mail-row { display: flex; align-items: stretch; gap: 8px; }
.cp-mail-field {
flex: 1; min-width: 0;
background: var(--bg-hover);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
padding: 11px 15px;
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 0.8125rem;
outline: none;
transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.cp-mail-field::placeholder { color: var(--text-muted); }
.cp-mail-field:focus {
background: var(--bg-elevated);
border-color: var(--glass-border-hover);
box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Trailing square button (recipient chevron / template icon). */
.cp-mail-sq {
flex: 0 0 auto;
width: 42px;
display: flex; align-items: center; justify-content: center;
background: var(--bg-hover);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
color: var(--text-secondary);
cursor: pointer;
transition: all 0.18s ease;
}
.cp-mail-sq:hover {
color: var(--text-primary);
background: var(--accent-soft);
border-color: var(--glass-border-hover);
}
.cp-mail-sq svg { width: 15px; height: 15px; display: block; }
/* Template tools in the Betreff row: the .cp-tpl-wrap wrappers dissolve
(display:contents) so the squares become row flex items and stretch like
the other squares; the "Als Vorlage speichern" popover then anchors to the
row itself and opens right below it. */
.cp-mail-row { position: relative; }
.cp-mail-row .cp-tpl-wrap { display: contents; }
.cp-mail-row .cp-tpl-save { top: calc(100% + 6px); right: 0; }
.cp-mail-sq.open {
color: var(--text-primary);
background: rgba(99, 102, 241, 0.15);
border-color: var(--glass-border-hover);
}
.cp-mail-sq.flash-ok { color: #22c55e; background: rgba(34, 197, 94, 0.12); }
/* Company: the square hosts a real