/* === RESET & BASE === */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } input, textarea, select, button { font-family: inherit; font-size: inherit; color: inherit; } input, textarea, select { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.5rem 0.75rem; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15); } /* Default Theme (Dark Violet) — wird von themes.css ueberschrieben */ :root { --color-primary: #8b5cf6; --color-primary-dark: #7c3aed; --color-primary-light: rgba(139, 92, 246, 0.1); --color-bg: #09090b; --color-surface: #18181b; --color-surface-hover: #27272a; --color-text: #fafafa; --color-text-muted: #a1a1aa; --color-text-light: #71717a; --color-border: #27272a; --color-border-light: #1e1e22; --color-success: #34d399; --color-success-light: rgba(52, 211, 153, 0.12); --color-error: #f87171; --color-error-light: rgba(248, 113, 113, 0.12); --color-warning: #fbbf24; --color-warning-light: rgba(251, 191, 36, 0.12); --color-favorite: #fbbf24; --radius: 10px; --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 6px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3); --shadow-lg: 0 10px 25px rgba(0,0,0,0.5), 0 4px 10px rgba(0,0,0,0.3); } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--color-bg); color: var(--color-text); line-height: 1.6; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--color-primary); } h1 { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; } h2 { font-size: 1.1rem; font-weight: 600; } /* === THEME DEFINITIONEN === */ /* 5 Themes: Dark Violet (Default), Dark Blue, Linear, Light Violet, Light Blue */ /* Aktives Theme: data-theme Attribut auf */ /* --- DARK VIOLET (Default) --- */ [data-theme="dark-violet"], :root { --color-primary: #8b5cf6; --color-primary-dark: #7c3aed; --color-primary-light: rgba(139, 92, 246, 0.1); --color-bg: #09090b; --color-surface: #18181b; --color-surface-hover: #27272a; --color-text: #fafafa; --color-text-muted: #a1a1aa; --color-text-light: #71717a; --color-border: #27272a; --color-border-light: #1e1e22; --color-success: #34d399; --color-success-light: rgba(52, 211, 153, 0.12); --color-error: #f87171; --color-error-light: rgba(248, 113, 113, 0.12); --color-warning: #fbbf24; --color-warning-light: rgba(251, 191, 36, 0.12); --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 6px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3); --shadow-lg: 0 10px 25px rgba(0,0,0,0.5), 0 4px 10px rgba(0,0,0,0.3); --login-gradient: linear-gradient(135deg, #09090b 0%, #0f0a1f 50%, #09090b 100%); } /* --- DARK BLUE --- */ [data-theme="dark-blue"] { --color-primary: #3b82f6; --color-primary-dark: #2563eb; --color-primary-light: rgba(59, 130, 246, 0.1); --color-bg: #0a0a12; --color-surface: #131320; --color-surface-hover: #1e1e30; --color-text: #f0f0ff; --color-text-muted: #9898b0; --color-text-light: #686880; --color-border: #1e1e30; --color-border-light: #16162a; --login-gradient: linear-gradient(135deg, #0a0a12 0%, #0a1020 50%, #0a0a12 100%); } /* --- LINEAR (wie Linear.app) --- */ [data-theme="linear"] { --color-primary: #5e6ad2; --color-primary-dark: #4e5bc2; --color-primary-light: rgba(94, 106, 210, 0.1); --color-bg: #1a1a1e; --color-surface: #1f1f23; --color-surface-hover: #2c2c32; --color-text: #eeeeef; --color-text-muted: #8a8a93; --color-text-light: #5c5c66; --color-border: #2e2e33; --color-border-light: #26262b; --color-success: #4dba87; --color-success-light: rgba(77, 186, 135, 0.12); --color-error: #e5484d; --color-error-light: rgba(229, 72, 77, 0.12); --color-warning: #f5a623; --color-warning-light: rgba(245, 166, 35, 0.12); --shadow: 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 2px 8px rgba(0,0,0,0.35); --shadow-lg: 0 8px 24px rgba(0,0,0,0.4); --login-gradient: linear-gradient(135deg, #1a1a1e 0%, #1e1e25 50%, #1a1a1e 100%); } /* --- DARK SILVER (Ultra-Dark, farbloser Silber-Akzent) --- */ [data-theme="dark-silver"] { --color-primary: #a0a0ab; --color-primary-dark: #8a8a95; --color-primary-light: rgba(160, 160, 171, 0.08); --color-bg: #050506; --color-surface: #0e0e10; --color-surface-hover: #18181b; --color-text: #e4e4e7; --color-text-muted: #7a7a85; --color-text-light: #4e4e58; --color-border: #1c1c20; --color-border-light: #131316; --color-success: #34d399; --color-success-light: rgba(52, 211, 153, 0.10); --color-error: #f87171; --color-error-light: rgba(248, 113, 113, 0.10); --color-warning: #fbbf24; --color-warning-light: rgba(251, 191, 36, 0.10); --shadow: 0 1px 2px rgba(0,0,0,0.6); --shadow-md: 0 3px 8px rgba(0,0,0,0.6); --shadow-lg: 0 10px 30px rgba(0,0,0,0.7); --login-gradient: linear-gradient(135deg, #050506 0%, #0a0a0d 50%, #050506 100%); } /* --- LIGHT VIOLET --- */ [data-theme="light-violet"] { --color-primary: #7c3aed; --color-primary-dark: #6d28d9; --color-primary-light: #ede9fe; --color-bg: #fafaf9; --color-surface: #ffffff; --color-surface-hover: #f5f3ff; --color-text: #1c1917; --color-text-muted: #78716c; --color-text-light: #a8a29e; --color-border: #e7e5e4; --color-border-light: #f5f5f4; --color-success: #059669; --color-success-light: #ecfdf5; --color-error: #dc2626; --color-error-light: #fef2f2; --color-warning: #d97706; --color-warning-light: #fffbeb; --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04); --shadow-lg: 0 10px 15px rgba(0,0,0,0.06), 0 4px 6px rgba(0,0,0,0.03); --login-gradient: linear-gradient(135deg, #faf5ff 0%, #fafaf9 50%, #f5f3ff 100%); } /* --- LIGHT BLUE --- */ [data-theme="light-blue"] { --color-primary: #2563eb; --color-primary-dark: #1d4ed8; --color-primary-light: #eff6ff; --color-bg: #f8fafc; --color-surface: #ffffff; --color-surface-hover: #f0f7ff; --color-text: #0f172a; --color-text-muted: #64748b; --color-text-light: #94a3b8; --color-border: #e2e8f0; --color-border-light: #f1f5f9; --color-success: #059669; --color-success-light: #ecfdf5; --color-error: #dc2626; --color-error-light: #fef2f2; --color-warning: #d97706; --color-warning-light: #fffbeb; --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04); --shadow-lg: 0 10px 15px rgba(0,0,0,0.06), 0 4px 6px rgba(0,0,0,0.03); --login-gradient: linear-gradient(135deg, #eff6ff 0%, #f8fafc 50%, #e0f2fe 100%); } /* Light-Theme Alert-Borders */ [data-theme="light-violet"] .alert--success, [data-theme="light-blue"] .alert--success { border-color: #a7f3d0; } [data-theme="light-violet"] .alert--error, [data-theme="light-blue"] .alert--error { border-color: #fecaca; } [data-theme="light-violet"] .alert--warning, [data-theme="light-blue"] .alert--warning { border-color: #fde68a; } /* Theme-Switcher Vorschau-Dots */ .theme-dot { width: 20px; height: 20px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: all 0.2s; display: inline-block; } .theme-dot:hover { transform: scale(1.2); } .theme-dot--active { border-color: var(--color-text); box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-text); } .theme-dot--dark-violet { background: #8b5cf6; } .theme-dot--dark-blue { background: #3b82f6; } .theme-dot--linear { background: linear-gradient(135deg, #5e6ad2, #8a8a93); } .theme-dot--dark-silver { background: linear-gradient(135deg, #333, #999); } .theme-dot--light-violet { background: linear-gradient(135deg, #fafaf9 50%, #7c3aed 50%); } .theme-dot--light-blue { background: linear-gradient(135deg, #f8fafc 50%, #2563eb 50%); } /* === Icon System (SVG inline, Linear-Style) === */ /* Monochrome, 1px stroke, currentColor */ .icon { display: inline-block; width: 16px; height: 16px; vertical-align: middle; flex-shrink: 0; } .icon--sm { width: 14px; height: 14px; } .icon--lg { width: 20px; height: 20px; } /* Icons als background-image SVG (currentColor via filter) */ .icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* === Navigation === */ .nav { background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: 0 2rem; display: flex; align-items: center; height: 60px; box-shadow: var(--shadow); position: sticky; top: 0; z-index: 100; } .nav-brand a { font-weight: 700; font-size: 1.15rem; color: var(--color-primary); text-decoration: none; margin-right: 2.5rem; letter-spacing: -0.02em; } .nav-links { display: flex; gap: 0.25rem; align-items: center; flex: 1; } .nav-link { color: var(--color-text-muted); text-decoration: none; padding: 0.5rem 1rem; border-radius: var(--radius); font-size: 0.875rem; font-weight: 500; transition: all 0.15s; } .nav-link:hover { background: var(--color-bg); color: var(--color-text); } .nav-link--active { background: var(--color-primary-light); color: var(--color-primary); } .nav-link--right { margin-left: auto; } .nav-profile { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; text-decoration: none; padding: 0.25rem 0.75rem; border-radius: var(--radius); transition: background 0.15s; } .nav-profile:hover { background: var(--color-surface-hover); } .nav-profile--active { background: var(--color-surface-hover); } .nav-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; } .nav-avatar-img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .nav-profile-info { display: flex; flex-direction: column; line-height: 1.2; } .nav-profile-name { color: var(--color-text); font-size: 0.8rem; font-weight: 600; } .nav-profile-role { color: var(--color-text-muted); font-size: 0.65rem; } .nav-link--logout { margin-left: auto; color: var(--color-text-muted); } .nav-link--logout:hover { color: var(--color-error); background: var(--color-error-light); } /* === Main Content === */ .main { padding: 0; width: 100%; } /* Container-Varianten: tragen das Padding, damit .main padding-frei bleibt. * So koennen Module mit eigener Sidebar (mod-layout, msg-layout) edge-to-edge * im .main sitzen, waehrend normaler Content bequem Abstand hat. */ .container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 2rem; } .container--narrow { width: 100%; max-width: 640px; margin: 0 auto; padding: 2rem; } .container--wide { width: 100%; max-width: none; margin: 0; padding: 2rem; } /* ============================================================ * Sidebar-Layout (body[data-layout="sidebar"]) * Haupt-Navi wandert in eine fixe linke Spalte, Modul-Submenues * werden zu ausklappbaren Unterelementen. * * Breiten-Management via CSS-Variable --sidebar-width. Beim Collapse * wird nur die Variable geaendert, alles andere (Sidebar, Content, * Transitions) folgt automatisch. * ============================================================ */ body[data-layout="sidebar"] { --sidebar-width: 240px; --sidebar-gap: 0.5rem; } /* Collapsed-Mode: Sidebar verschwindet komplett (translateX), * und die Variable wird auf 0 gesetzt damit .main die ganze Breite bekommt. */ body[data-layout="sidebar"][data-sidebar-collapsed="1"] { --sidebar-width: 0px; --sidebar-gap: 0px; } body[data-layout="sidebar"] .nav { display: none; } /* Gap wird ueber margin-left erzeugt, NICHT ueber padding-left. * Dadurch bleibt .main's Padding einheitlich bei 2rem und alle Views * die sich mit 'margin: -2rem' in .main rausziehen (z.B. .mod-layout, * .quote-builder, .auto-editor-wrap) funktionieren konsistent. */ body[data-layout="sidebar"] .main { margin-left: calc(var(--sidebar-width) + var(--sidebar-gap)); width: calc(100% - var(--sidebar-width) - var(--sidebar-gap)); padding: 0; min-height: 100vh; transition: margin-left 0.2s ease, width 0.2s ease; } .app-sidebar { display: none; position: fixed; left: 0; top: 0; width: 240px; /* fixe Breite; Collapse via transform: translateX() */ height: 100vh; background: var(--color-surface); border-right: 1px solid var(--color-border); box-shadow: var(--shadow); overflow-y: auto; z-index: 100; flex-direction: column; transition: transform 0.2s ease; } body[data-layout="sidebar"] .app-sidebar { display: flex; } /* Collapsed: Sidebar komplett nach links aus dem Viewport schieben. */ body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar { transform: translateX(-100%); } /* Peek-Mode: Wenn die Sidebar eingeklappt ist und die Maus kurz am linken * Bildschirmrand verweilt, faehrt sie als schwebendes Panel ein. Nicht volle * Hoehe, sondern mit Abstand oben (ca. 1 Fingerbreit) und unten (2-3 Fingerbreit), * damit sie wie ein eigenstaendiges Floating-Panel wirkt. */ body[data-layout="sidebar"][data-sidebar-collapsed="1"][data-sidebar-peek="1"] .app-sidebar { transform: translateX(0); top: 4.5rem; bottom: 6.5rem; left: 0; height: auto; border-radius: 0 var(--radius) var(--radius) 0; border: 1px solid var(--color-border); border-left: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); } .app-sidebar-brand { padding: 0.85rem 1rem; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; } .app-sidebar-brand-name { font-weight: 700; font-size: 1.05rem; color: var(--color-primary); text-decoration: none; letter-spacing: -0.02em; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Avatar-Button im Brand: oeffnet das Settings-Modal beim Klick. */ .app-sidebar-avatar-btn { background: none; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; transition: transform 0.15s, box-shadow 0.15s; } .app-sidebar-avatar-btn:hover { transform: scale(1.06); box-shadow: 0 0 0 3px var(--color-primary-light); } .app-sidebar-nav { padding: 0.5rem 0; overflow-y: auto; flex: 1; min-height: 0; } .app-sidebar-module { display: block; } .app-sidebar-link { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 1.25rem; color: var(--color-text-muted); text-decoration: none; font-size: 0.85rem; font-weight: 500; border-left: 3px solid transparent; cursor: pointer; } .app-sidebar-link:hover { background: var(--color-bg); color: var(--color-text); } .app-sidebar-link--active { background: var(--color-primary-light); color: var(--color-primary); border-left-color: var(--color-primary); } .app-sidebar-link-icon { display: flex; align-items: center; opacity: 0.85; } .app-sidebar-link-label { flex: 1; } .app-sidebar-link-chevron { transition: transform 0.15s; opacity: 0.6; font-size: 0.7rem; } .app-sidebar-module--expanded > .app-sidebar-link .app-sidebar-link-chevron { transform: rotate(90deg); } .app-sidebar-submenu { display: none; padding: 0.25rem 0 0.5rem 0; background: var(--color-bg); } .app-sidebar-module--expanded .app-sidebar-submenu { display: block; } .app-sidebar-subitem { display: block; padding: 0.4rem 1.25rem 0.4rem 3rem; color: var(--color-text-muted); text-decoration: none; font-size: 0.8rem; border-left: 3px solid transparent; } .app-sidebar-subitem:hover { color: var(--color-text); background: var(--color-surface); } .app-sidebar-subitem--active { color: var(--color-primary); font-weight: 600; border-left-color: var(--color-primary); } .app-sidebar-footer { margin-top: auto; border-top: 1px solid var(--color-border); padding: 0.75rem 1rem; display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .app-sidebar-footer-btn { background: none; border: none; padding: 0.4rem; border-radius: var(--radius); color: var(--color-text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; text-decoration: none; } .app-sidebar-footer-btn:hover { background: var(--color-bg); color: var(--color-text); } .app-sidebar-footer-profile { margin-left: auto; } /* Accordion-Toggle: kleiner Button rechtsbuendig ueber der Footer-Trennlinie. * Zeigt "1" im Accordion-Modus (nur ein Bereich offen) und "∞" im * Mehrfach-Modus. */ .app-sidebar-mode-toggle-row { display: flex; justify-content: flex-end; padding: 0.25rem 0.75rem 0.5rem; flex-shrink: 0; } .app-sidebar-mode-toggle { background: none; border: none; padding: 0.15rem 0.4rem; border-radius: var(--radius); color: var(--color-text-muted); cursor: pointer; font-size: 0.8rem; font-weight: 600; line-height: 1; min-width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; } .app-sidebar-mode-toggle:hover { background: var(--color-bg); color: var(--color-text); } .app-sidebar-mode-toggle .mode-label--manual { display: none; font-size: 0.95rem; } .app-sidebar-mode-toggle[data-accordion-mode="0"] .mode-label--accordion { display: none; } .app-sidebar-mode-toggle[data-accordion-mode="0"] .mode-label--manual { display: inline; } /* Collapse-Button in der Sidebar-Brand (nur sichtbar wenn expanded) */ .app-sidebar-collapse-btn { background: none; border: none; color: var(--color-text-muted); cursor: pointer; padding: 0.35rem; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .app-sidebar-collapse-btn:hover { background: var(--color-bg); color: var(--color-text); } /* Floating-Button ausserhalb der Sidebar, nur sichtbar wenn Sidebar collapsed. * Erlaubt dem User die Sidebar wieder einzublenden. */ .sidebar-floating-toggle { display: none; position: fixed; top: 0.75rem; left: 0.75rem; z-index: 110; width: 36px; height: 36px; border-radius: var(--radius); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow); color: var(--color-text-muted); cursor: pointer; align-items: center; justify-content: center; padding: 0; transition: background 0.15s, color 0.15s; } .sidebar-floating-toggle:hover { background: var(--color-primary-light); color: var(--color-primary); } /* Im collapsed Mode: Floating-Button einblenden. */ body[data-layout="sidebar"][data-sidebar-collapsed="1"] .sidebar-floating-toggle { display: flex; } /* Im Sidebar-Modus die alten Modul-eigenen Sidebars verstecken * (crm/_layout.php, knowledge/_layout.php, settings/_layout.php etc. * nutzen alle .mod-sidebar). */ body[data-layout="sidebar"] .mod-sidebar { display: none !important; } body[data-layout="sidebar"] .mod-layout { display: block !important; margin: 0 !important; } body[data-layout="sidebar"] .mod-content { margin-left: 0 !important; padding: 0 !important; } body[data-layout="sidebar"] .msg-layout { margin: 0 !important; } /* Height-Overrides im Sidebar-Modus: Module die ihre Full-Height mit * 'calc(100vh - 60px)' (Topnav-Hoehe abziehen) berechnen, muessen im * Sidebar-Modus die volle Viewport-Hoehe nutzen, weil es keine Top-Nav * mehr gibt. Betrifft mod-layout, msg-layout, auto-editor-wrap. */ body[data-layout="sidebar"] .mod-layout, body[data-layout="sidebar"] .msg-layout, body[data-layout="sidebar"] .auto-editor-wrap { height: 100vh !important; min-height: 100vh !important; } /* Responsive: Bei schmalen Bildschirmen Sidebar auto-collapsed. * Das ueberschreibt die Variable, User-Toggle ist auf Mobile ignoriert. */ @media (max-width: 900px) { body[data-layout="sidebar"] { --sidebar-width: 0px; --sidebar-gap: 0px; } body[data-layout="sidebar"] .app-sidebar { transform: translateX(-100%); } body[data-layout="sidebar"] .sidebar-floating-toggle { display: flex; } } /* ============================================================ * Settings-Modal (Vollbild-Overlay mit iframe) * Wird vom Avatar-Button im Sidebar-Brand (oder Top-Nav-Profil) * geoeffnet. Der iframe laedt die Settings-Routen mit ?embed=1, * sodass das embed-Layout ohne App-Sidebar gerendert wird. * ============================================================ */ .settings-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 2rem; } .settings-modal[hidden] { display: none; } /* Container: max. 2/3 der Fensterbreite, zentriert, fixe Hoehe. */ .settings-modal-container { width: 100%; max-width: 66.666%; min-width: 720px; height: 100%; max-height: calc(100vh - 4rem); display: flex; flex-direction: column; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); } @media (max-width: 1100px) { .settings-modal-container { max-width: 92%; min-width: 0; } } .settings-modal-header { display: flex; align-items: center; justify-content: space-between; background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: 0.85rem 1.25rem; flex-shrink: 0; } .settings-modal-header h2 { margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--color-text); } .settings-modal-close { background: none; border: none; color: var(--color-text-muted); cursor: pointer; padding: 0.35rem; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; } .settings-modal-close:hover { background: var(--color-bg); color: var(--color-text); } .settings-modal-body { flex: 1; min-height: 0; display: flex; overflow: hidden; position: relative; } /* Der Fragment-Wrapper fuellt den Modal-Body und wird beim AJAX-Load ersetzt. */ .settings-fragment { display: flex; flex: 1; min-height: 0; } .settings-flash { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 10; pointer-events: none; } .settings-flash .flash { pointer-events: auto; } /* ============================================================ * Settings-Unterseiten-Layout * Eigene Klassen statt missbrauchter .crm-*: feste Nav links, * scrollender Content rechts. Fuellt den Eltern-Container * (Settings-Modal-Body oder Full-Page bei Direkt-Aufruf). * ============================================================ */ .settings-layout { display: flex; flex: 1; min-height: 0; background: var(--color-bg); } .settings-nav { width: 220px; flex-shrink: 0; background: var(--color-surface); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; overflow-y: auto; } .settings-nav-inner { flex: 1; padding: 0.75rem 0.5rem; overflow-y: auto; } .settings-nav-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.85rem; border-radius: var(--radius); color: var(--color-text-muted); text-decoration: none; font-size: 0.85rem; font-weight: 500; margin-bottom: 0.15rem; } .settings-nav-item:hover { background: var(--color-bg); color: var(--color-text); } .settings-nav-item--active { background: var(--color-primary-light); color: var(--color-primary); } .settings-nav-item--logout { border-top: 1px solid var(--color-border); color: var(--color-error); margin: 0; border-radius: 0; padding: 0.85rem 1rem; flex-shrink: 0; } .settings-nav-icon { display: flex; align-items: center; opacity: 0.85; } .settings-nav-label { flex: 1; } .settings-content { flex: 1; min-width: 0; overflow-y: auto; padding: 2rem 2.5rem; } /* Avatar-Farbauswahl: Runde Dots mit Hover/Active/Selected-State. */ .avatar-color-dot { cursor: pointer; display: inline-block; } .avatar-color-dot input { display: none; } .avatar-color-dot span { display: block; width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; box-sizing: content-box; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; } .avatar-color-dot:hover span { transform: scale(1.15); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15); } .avatar-color-dot--selected span, .avatar-color-dot input:checked + span { border-color: var(--color-text); transform: scale(1.1); box-shadow: 0 0 0 3px var(--color-primary-light); } /* Passwort-Block eingeklappt (details/summary) */ details.section-card > summary::-webkit-details-marker { display: none; } details.section-card > summary { user-select: none; } details.section-card[open] > summary svg { transform: rotate(180deg); } /* Top-Nav Profil-Button (im Topnav-Layout) */ .nav-profile--btn { background: none; border: none; cursor: pointer; font-family: inherit; color: inherit; } /* === Page Header === */ .page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } .page-header h1 { margin-bottom: 0; } .page-actions { display: flex; gap: 0.5rem; align-items: center; } /* === Breadcrumb === */ .breadcrumb { font-size: 0.8rem; color: var(--color-text-muted); } .breadcrumb a { color: var(--color-text-muted); text-decoration: none; } .breadcrumb a:hover { color: var(--color-primary); } /* === Alerts === */ .alert { padding: 0.875rem 1.25rem; border-radius: var(--radius); margin-bottom: 1.25rem; font-size: 0.875rem; font-weight: 500; display: flex; align-items: center; gap: 0.5rem; } .alert--success { background: var(--color-success-light); color: var(--color-success); border: 1px solid rgba(52, 211, 153, 0.2); } .alert--error { background: var(--color-error-light); color: var(--color-error); border: 1px solid rgba(248, 113, 113, 0.2); } .alert--warning { background: var(--color-warning-light); color: var(--color-warning); border: 1px solid rgba(251, 191, 36, 0.2); } /* Flash Toast (fixed bottom center) */ .flash-toast-container { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem; align-items: center; pointer-events: none; } .flash-toast { padding: 0.75rem 1.5rem; border-radius: var(--radius); font-size: 0.85rem; font-weight: 500; box-shadow: var(--shadow-lg); pointer-events: auto; animation: flash-in 0.3s ease, flash-out 0.3s ease 3.5s forwards; max-width: 500px; } .flash-toast--success { background: var(--color-success); color: #fff; } .flash-toast--error { background: var(--color-error); color: #fff; } .flash-toast--warning { background: var(--color-warning); color: #000; } @keyframes flash-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes flash-out { from { opacity: 1; } to { opacity: 0; transform: translateY(10px); } } /* === Cards === */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem; margin-bottom: 1.25rem; box-shadow: var(--shadow); transition: box-shadow 0.2s; } .card:hover { box-shadow: var(--shadow-md); } .card h2 { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; color: var(--color-text); } .card h3 { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.5rem; } /* === Section Cards (Bildgenerator-Style) === */ .section-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: visible; box-shadow: var(--shadow); } .section-card-header { padding: 1rem 1rem 0 1rem; display: flex; justify-content: space-between; align-items: center; } .section-card-header h2 { font-size: 0.95rem; font-weight: 700; margin: 0; } .section-card-body { padding: 1rem; } /* === Module Grid === */ .module-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .module-card { display: block; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.25rem 1.5rem; text-decoration: none; color: var(--color-text); transition: all 0.2s; box-shadow: var(--shadow); } .module-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-1px); } .module-card h3 { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.25rem; } .module-card p { font-size: 0.8rem; color: var(--color-text-muted); margin: 0; } /* === Product Cards with Previews === */ .product-card { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); text-decoration: none; color: var(--color-text); transition: all 0.2s; box-shadow: var(--shadow); overflow: hidden; } .product-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-1px); } .product-previews { padding: 0.5rem; height: 220px; } .product-preview-grid { display: flex; flex-wrap: wrap; gap: 4px; border-radius: var(--radius); overflow: hidden; height: 100%; align-content: stretch; } .product-preview-grid img { object-fit: cover; display: block; border-radius: 4px; } /* 1 Bild: volle Breite */ .pc-1 img { width: 100%; height: 100%; } /* 2 Bilder nebeneinander */ .pc-2 img { width: calc(50% - 2px); height: 100%; } /* 3 Bilder nebeneinander */ .pc-3 img { width: calc(33.33% - 3px); height: 100%; } /* 4 Bilder: 2x2 */ .pc-4 img { width: calc(50% - 2px); height: calc(50% - 2px); } /* Kein Bild: Platzhalter */ .product-previews-empty { height: 220px; background: var(--color-bg); display: flex; align-items: center; justify-content: center; color: var(--color-text-light); font-size: 0.8rem; margin: 0.5rem; border-radius: var(--radius); } .product-card-info { padding: 1rem; padding-top: 0; margin-top: auto; } .product-card-info h3 { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.375rem; } /* === Image Grid === */ .image-grid { display: flex; gap: 0.75rem; flex-wrap: wrap; } .image-thumb { width: 160px; height: 160px; object-fit: cover; border-radius: var(--radius); border: 2px solid transparent; cursor: pointer; transition: all 0.15s; } .image-thumb:hover { border-color: var(--color-primary); transform: scale(1.02); } .image-thumb--favorite { border-color: var(--color-favorite); } .image-thumb-wrap { position: relative; display: inline-block; } .image-thumb-label { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.6); color: #fff; font-size: 0.7rem; padding: 3px 8px; border-radius: 0 0 6px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .favorite-star { position: absolute; top: 6px; left: 6px; width: 22px; height: 22px; background: var(--color-favorite); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); } /* === Favorites Section === */ .favorites-section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem; margin-bottom: 1.25rem; box-shadow: var(--shadow); } .favorites-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .favorites-header h2 { font-size: 0.95rem; font-weight: 700; margin: 0; } /* === Module Card (Bildgenerator) === */ .gen-module { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.75rem 1rem 1rem 1rem; box-shadow: var(--shadow); display: flex; flex-direction: column; justify-content: space-between; } .gen-module .gen-form { margin-top: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--color-border-light); } .gen-module-generations { flex: 1; } /* Generierte Bilder: 3 nebeneinander */ .gen-module-generations .image-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; } .gen-module-generations .image-grid .gen-thumb-wrap, .gen-module-generations .image-grid .gen-loading { width: 100%; height: auto; aspect-ratio: 1; } .gen-module-generations .image-grid .gen-thumb-wrap .image-thumb { width: 100% !important; height: 100% !important; aspect-ratio: 1; } .gen-module-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; } .gen-module-header h3 { font-size: 0.95rem; font-weight: 700; margin: 0; } .gen-module-actions { display: flex; gap: 0.375rem; } .gen-module-images { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.75rem; border-top: 1px solid var(--color-border-light); padding-top: 0.5rem; } .gen-module-img-section label { font-size: 0.75rem; font-weight: 500; color: var(--color-text-muted); display: block; margin-bottom: 0.375rem; } .gen-module-img-section img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--color-border); } .gen-module-generations { margin-top: 0rem; padding-top: 0.5rem; border-top: 1px solid var(--color-border-light); } .gen-module-gen-header { font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 0.5rem; } .gen-module-gen-header span { color: var(--color-primary); font-weight: 500; } /* === Generate Form === */ .gen-form { display: flex; flex-direction: column; gap: 0.5rem; border-top: 1px solid var(--color-border-light); } .gen-form textarea.auto-grow { width: 100%; padding: 0.625rem 0.875rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 0.875rem; font-family: inherit; color: var(--color-text); background: var(--color-surface); resize: none; overflow: hidden; min-height: 44px; } .gen-form textarea.auto-grow:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15); } /* === Forms === */ .form-group { margin-bottom: 1.125rem; } .form-group label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.375rem; color: var(--color-text); } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0.625rem 0.875rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 0.875rem; background: var(--color-surface); color: var(--color-text); transition: border-color 0.15s, box-shadow 0.15s; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15); } .form-group textarea { min-height: 44px; resize: none; overflow: hidden; } /* === Buttons === */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.625rem 1.25rem; border: 1px solid transparent; border-radius: var(--radius); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.15s; text-decoration: none; white-space: nowrap; } .btn--primary { background: var(--color-primary); color: #fff; } .btn--primary:hover { background: var(--color-primary-dark); box-shadow: var(--shadow-md); } .btn--outline { background: var(--color-surface); color: var(--color-text-muted); border-color: var(--color-border); } .btn--outline:hover { border-color: var(--color-primary); color: var(--color-primary); } .btn--danger { background: var(--color-error); color: #fff; } .btn--danger:hover { background: #dc2626; } .btn--success { background: var(--color-success); color: #fff; } .btn--success:hover { background: #059669; } .btn--sm { padding: 0.375rem 0.75rem; font-size: 0.8rem; } .btn--full { width: 100%; } .btn--icon { padding: 0.5rem; width: 36px; height: 36px; border-radius: var(--radius); background: var(--color-bg); color: var(--color-text-muted); border: 1px solid var(--color-border); } .btn--icon:hover { background: var(--color-border-light); color: var(--color-text); } /* === Login === */ .login-container { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 1rem; background: var(--login-gradient, linear-gradient(135deg, #09090b 0%, #0f0a1f 50%, #09090b 100%)); } .login-branding { text-align: center; margin-bottom: 1.5rem; } .login-branding-logo { font-weight: 700; font-size: 1.5rem; letter-spacing: -0.03em; color: var(--color-text); } .login-branding-logo span { color: var(--color-primary); } .login-branding-tagline { font-size: 2rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.04em; margin-top: 0.75rem; color: var(--color-text); } .login-branding-tagline em { font-style: normal; background: linear-gradient(135deg, var(--color-primary), #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .login-box { width: 100%; max-width: 420px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 2.5rem; box-shadow: var(--shadow-lg); } .login-title { text-align: center; margin-bottom: 2rem; color: var(--color-text); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; } .login-legal { text-align: center; margin-top: 1.25rem; font-size: 0.7rem; color: var(--color-text-muted); line-height: 1.5; max-width: 320px; } .login-legal a { color: var(--color-primary); text-decoration: none; } .login-legal a:hover { text-decoration: underline; } /* === Tags/Badges === */ .badge { display: inline-flex; align-items: center; padding: 0.2rem 0.625rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; } .badge--success { background: var(--color-success-light); color: var(--color-success); } .badge--warning { background: var(--color-warning-light); color: var(--color-warning); } .badge--error { background: var(--color-error-light); color: var(--color-error); } .badge--muted { background: #f3f4f6; color: var(--color-text-muted); } /* Farben fuer Auswahl-Options (Lead-Phase etc.) — bewusst heller Hintergrund + sattere Textfarbe */ .badge--blue { background: #dbeafe; color: #1e40af; } .badge--purple { background: #ede9fe; color: #6d28d9; } .badge--teal { background: #ccfbf1; color: #0f766e; } .badge--green { background: #dcfce7; color: #166534; } .badge--yellow { background: #fef3c7; color: #92400e; } .badge--orange { background: #ffedd5; color: #9a3412; } .badge--red { background: #fee2e2; color: #991b1b; } .badge--pink { background: #fce7f3; color: #9d174d; } .badge--brown { background: #f5e8d8; color: #78350f; } .badge--gray { background: #e5e7eb; color: #374151; } /* Inline-Edit in Tabellen-Zellen */ .db-cell--editable { cursor: pointer; position: relative; } .db-cell--editable:hover { background: var(--color-surface-hover); } .db-cell--editable:hover::after { content: "▾"; position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); font-size: 0.7rem; color: var(--color-text-muted); pointer-events: none; } /* === Floating Chat-FAB === */ .chat-fab { position: fixed; bottom: 20px; right: 20px; width: 56px; height: 56px; border-radius: 50%; background: var(--color-primary); color: #fff; border: none; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; text-decoration: none; z-index: 9998; transition: transform 0.2s; } .chat-fab:hover { transform: scale(1.08); color: #fff; } /* Editor-Fokus im Portal-Chat-Modal: keine Browser-Default-Outline */ #portal-chat-modal .msg-editor, #portal-chat-modal .msg-editor:focus, #portal-chat-modal .msg-editor:focus-visible { outline: none !important; box-shadow: none !important; border: none !important; } #portal-chat-modal .msg-input-box { transition: border-color 0.15s; } #portal-chat-modal .msg-input-box:focus-within { border-color: var(--color-primary); } /* Schmale Benachrichtigungs-Pille am unteren Fensterrand (interne User) */ .msg-pill { position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.5rem; background: #fff; color: var(--color-text); border: 1px solid var(--color-border); border-radius: 999px; padding: 0.5rem 1rem; box-shadow: 0 4px 16px rgba(0,0,0,0.12); font-size: 0.85rem; font-weight: 500; text-decoration: none; z-index: 9998; transition: transform 0.15s, box-shadow 0.15s; } .msg-pill:hover { transform: translateX(-50%) translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.16); color: var(--color-primary); } .msg-pill svg { flex-shrink: 0; color: var(--color-primary); } .chat-fab-badge { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; background: #dc2626; color: #fff; border: 2px solid #fff; border-radius: 999px; font-size: 0.7rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } /* === Tables === */ table { width: 100%; border-collapse: collapse; } th { text-align: left; padding: 0.75rem 1rem; font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted); border-bottom: 2px solid var(--color-border); } td { padding: 0.75rem 1rem; font-size: 0.85rem; border-bottom: 1px solid var(--color-border-light); } tr:hover td { background: var(--color-surface-hover); } /* === Utilities === */ .text-muted { color: var(--color-text-muted); } .text-sm { font-size: 0.8rem; } .text-xs { font-size: 0.7rem; } .mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; } .flex { display: flex; } .flex-between { display: flex; justify-content: space-between; align-items: center; } .gap-1 { gap: 0.5rem; } .gap-2 { gap: 1rem; } h1 { font-size: 1.375rem; font-weight: 700; margin-bottom: 0.75rem; letter-spacing: -0.02em; } h2 { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; } a { color: var(--color-primary); } a:hover { color: var(--color-primary-dark); } /* === File Input === */ .file-input-wrap { position: relative; display: inline-flex; align-items: center; } .file-input-wrap input[type="file"] { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .file-input-label { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 1rem; background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius); font-size: 0.8rem; color: var(--color-text-muted); cursor: pointer; transition: all 0.15s; } .file-input-label:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light); } /* === Upload Area === */ .upload-area { border: 2px dashed var(--color-border); border-radius: var(--radius); padding: 1.5rem; text-align: center; color: var(--color-text-muted); transition: all 0.15s; cursor: pointer; position: relative; } .upload-area:hover { border-color: var(--color-primary); background: var(--color-primary-light); } .upload-area input[type="file"] { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } /* === Image Hover Upload === */ .img-hover-upload, .img-ref-select { position: relative; cursor: pointer; border-radius: var(--radius); overflow: hidden; } .img-hover-upload img, .img-ref-select img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--color-border); display: block; } .img-placeholder { width: 100%; aspect-ratio: 1; background: var(--color-bg); border-radius: var(--radius); border: 1px dashed var(--color-border); display: flex; align-items: center; justify-content: center; color: var(--color-text-light); font-size: 0.75rem; } .img-hover-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 600; opacity: 0; transition: opacity 0.2s; border-radius: var(--radius); cursor: pointer; z-index: 1; } .img-hover-upload:hover .img-hover-overlay, .img-ref-select:hover .img-hover-overlay { opacity: 1; } /* Vorlage: File-Input ueber dem Overlay */ .img-hover-file { z-index: 3; } /* Referenz: Overlay ist klickbar, oeffnet Popup */ .img-hover-file { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; } /* Image Reference Popup */ .img-ref-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.5rem; box-shadow: 0 20px 60px rgba(0,0,0,0.3); z-index: 1000; min-width: 320px; max-width: 500px; } .img-ref-popup-title { font-size: 0.9rem; font-weight: 700; color: var(--color-text); margin-bottom: 1rem; } .img-ref-popup-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 999; } .img-ref-popup button[type="submit"] { transition: all 0.15s; border-radius: var(--radius) !important; overflow: hidden; border-width: 2px !important; } .img-ref-popup button[type="submit"]:hover { border-color: var(--color-primary) !important; } /* Image Download Button */ .image-download-btn { position: absolute; bottom: 24px; right: 4px; width: 26px; height: 26px; background: rgba(0,0,0,0.6); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; text-decoration: none; opacity: 0; transition: opacity 0.2s; } .image-thumb-wrap:hover .image-download-btn { opacity: 1; } /* === Generation Loading Spinner === */ .gen-loading { width: 80px; height: 80px; background: var(--color-bg); border-radius: var(--radius); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; } .gen-spinner { width: 24px; height: 24px; border: 3px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: gen-spin 0.8s linear infinite; } @keyframes gen-spin { to { transform: rotate(360deg); } } /* === Generation Thumbnails === */ .gen-thumb-wrap { position: relative; display: inline-block; cursor: pointer; } .gen-thumb-wrap .gen-fav-btn, .gen-thumb-wrap .gen-del-btn { position: absolute; width: 22px; height: 22px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; opacity: 0; transition: opacity 0.15s; z-index: 5; } .gen-thumb-wrap:hover .gen-fav-btn, .gen-thumb-wrap:hover .gen-del-btn { opacity: 1; } .gen-fav-btn { top: 4px; left: 4px; background: rgba(0,0,0,0.5); color: #9ca3af; } .gen-fav-btn:hover, .gen-fav-btn.active { background: var(--color-favorite); color: #fff; } .gen-del-btn { top: 4px; right: 4px; background: rgba(220,38,38,0.8); color: #fff; font-size: 14px; } .gen-del-btn:hover { background: var(--color-error); } /* === Lightbox === */ .lightbox { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.9); z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; } .lightbox-close { position: absolute; top: 16px; right: 20px; background: none; border: none; color: #fff; font-size: 2rem; cursor: pointer; z-index: 2001; } .lightbox-img { max-width: 90vw; max-height: 75vh; object-fit: contain; border-radius: var(--radius); } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.15); border: none; color: #fff; font-size: 2rem; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; } .lightbox-nav:hover { background: rgba(255,255,255,0.3); } .lightbox-prev { left: 16px; } .lightbox-next { right: 16px; } .lightbox-thumbs { display: flex; gap: 8px; margin-top: 16px; } .lightbox-thumbs img { width: 200px; height: 200px; object-fit: cover; border-radius: 4px; border: 2px solid transparent; cursor: pointer; opacity: 0.6; transition: all 0.15s; } .lightbox-thumbs img:hover { opacity: 1; } .lightbox-thumbs img.active { border-color: #fff; opacity: 1; } .lightbox-actions { display: flex; gap: 8px; margin-top: 12px; } .lightbox-actions button { padding: 6px 16px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.1); color: #fff; font-size: 0.8rem; cursor: pointer; transition: all 0.15s; } .lightbox-actions button:hover { background: rgba(255,255,255,0.25); } /* === Custom Confirm Dialog === */ .confirm-dialog { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 3000; display: flex; align-items: center; justify-content: center; } .confirm-dialog-box { background: var(--color-surface); border-radius: var(--radius); padding: 1.5rem; max-width: 360px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,0.3); text-align: center; } .confirm-dialog-box p { font-size: 0.9rem; color: var(--color-text); margin-bottom: 1.25rem; } .confirm-dialog-box .confirm-btns { display: flex; gap: 0.5rem; justify-content: center; } /* Lightbox Favorite indicator */ .lightbox-thumbs img.is-fav { border-color: var(--color-favorite); box-shadow: 0 0 0 2px var(--color-favorite); } /* === SetCard Module Items === */ .setcard-mod-item { position: relative; } .setcard-mod-remove { position: absolute; top: 6px; right: 6px; background: rgba(220,38,38,0.85); color: #fff; border: none; width: 22px; height: 22px; border-radius: 50%; font-size: 14px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s; padding: 0; z-index: 5; } .setcard-mod-item:hover .setcard-mod-remove { opacity: 1; } .setcard-mod-remove:hover { background: rgba(220,38,38,1); } /* === Editable Module Header === */ .mod-name-display { cursor: default; } .mod-name-input { font-size: 0.95rem; font-weight: 700; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.25rem 0.5rem; background: var(--color-bg); color: var(--color-text); width: 100%; margin: 0; text-align: left; -webkit-user-select: text; user-select: text; } .mod-name-input:focus { outline: none; border-color: var(--color-primary); } /* === Module Drag Handle === */ .mod-drag-handle { color: var(--color-text-light); cursor: grab; font-size: 0.9rem; padding: 0 0.25rem; user-select: none; transition: color 0.15s; } .mod-drag-handle:hover { color: var(--color-text-muted); } .gen-module.dragging { opacity: 0.4; } .gen-module.drag-over { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(59,130,246,0.2); } /* === Module Icons === */ .mod-icon { color: #9ca3af; cursor: pointer; transition: color 0.15s; display: flex; align-items: center; background: none; border: none; padding: 2px; } .mod-icon--settings:hover { color: var(--color-primary); } .mod-icon--delete:hover { color: var(--color-error); } /* === Module Inline Settings === */ .mod-settings { overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease; max-height: 0; opacity: 0; padding: 0 0; border-top: 1px solid var(--color-border-light); margin-top: 0; } .mod-settings.open { max-height: 2000px; opacity: 1; padding: 1rem 0; margin-top: 0.75rem; display: block; } /* === Referenz-Bild Lösch-Button === */ .ref-delete-btn { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; background: rgba(220,38,38,0.85); color: #fff; border: none; border-radius: 50%; font-size: 14px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 0.15s; display: flex; align-items: center; justify-content: center; z-index: 5; } .ref-img-wrap:hover .ref-delete-btn { opacity: 1; } .ref-delete-btn:hover { background: rgba(220,38,38,1); } /* === Referenz Upload Box === */ .ref-upload-box { width: 160px; height: 160px; position: relative; cursor: pointer; border-radius: var(--radius); overflow: hidden; } .ref-upload-input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; } .ref-upload-placeholder { width: 100%; height: 100%; border: 2px dashed var(--color-border); background: var(--color-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--color-text-light); transition: all 0.15s; } .ref-upload-box:hover .ref-upload-placeholder, .ref-upload-box.drag-over .ref-upload-placeholder { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light); } /* === CRM Layout with Sidebar === */ .mod-layout { display: flex; min-height: calc(100vh - 60px); margin: -2rem; } .mod-sidebar { width: 200px; background: var(--color-surface); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; flex-shrink: 0; transition: width 0.2s; } .mod-sidebar.collapsed { width: 52px; } .mod-sidebar.collapsed .mod-nav-label { display: none; } .mod-sidebar.collapsed .mod-sidebar-toggle { transform: rotate(180deg); } .mod-sidebar-inner { flex: 1; padding: 0.75rem 0.5rem; } .mod-nav-item { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.75rem; border-radius: var(--radius); color: var(--color-text-muted); text-decoration: none; font-size: 0.85rem; font-weight: 500; transition: all 0.15s; margin-bottom: 0.25rem; } .mod-nav-item:hover { background: var(--color-bg); color: var(--color-text); } .mod-nav-item.active { background: var(--color-primary-light); color: var(--color-primary); } .mod-nav-icon { font-size: 1rem; flex-shrink: 0; } .mod-sidebar-toggle { background: none; border: none; border-top: 1px solid var(--color-border); padding: 0.5rem; color: var(--color-text-muted); cursor: pointer; font-size: 1rem; transition: transform 0.2s; } .mod-sidebar-toggle:hover { color: var(--color-text); } .mod-content { flex: 1; padding: 2rem; min-width: 0; } .mod-sub-nav { display: flex; gap: 0.25rem; margin-bottom: 1.25rem; } .mod-sub-link { padding: 0.4rem 1rem; border-radius: var(--radius); font-size: 0.8rem; font-weight: 500; color: var(--color-text-muted); text-decoration: none; transition: all 0.15s; } .mod-sub-link:hover { background: var(--color-bg); color: var(--color-text); } .mod-sub-link.active { background: var(--color-primary); color: #fff; } /* === CRM Price List Table === */ .pl-table { width: 100%; border-collapse: collapse; } .pl-table th { text-align: left; padding: 0.5rem 0.625rem; font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); border-bottom: 2px solid var(--color-border); white-space: nowrap; } .pl-table td { padding: 0.125rem 0.25rem; border-bottom: 1px solid var(--color-border-light); } .pl-cell { width: 100%; border: none; background: transparent; padding: 0.375rem 0.4rem; font-size: 0.85rem; color: var(--color-text); } .pl-cell:focus { outline: none; background: var(--color-primary-light); border-radius: 4px; } .pl-cell--name { font-weight: 500; } .pl-cell--price { text-align: right; font-variant-numeric: tabular-nums; } .pl-table tr:hover { background: var(--color-bg); } .pl-desc-row td { border-bottom: 1px solid var(--color-border-light) !important; } .pl-cell--desc { font-size: 0.75rem; color: var(--color-text-muted); border: none; background: transparent; width: 100%; padding: 0.125rem 0.4rem; } .pl-cell--desc:focus { outline: none; background: var(--color-primary-light); border-radius: 4px; } /* === CRM Activity === */ .crm-activity { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem 0; border-bottom: 1px solid var(--color-border-light); } .crm-activity:hover .act-delete { opacity: 1 !important; } .crm-activity-icon { font-size: 1rem; } /* === CRM Compact Detail === */ .crm-compact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem 0.75rem; } .crm-field label { display: block; font-size: 0.7rem; color: var(--color-text-muted); margin-bottom: 0.125rem; } .crm-field input, .crm-field select { width: 100%; padding: 0.4rem 0.625rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 0.85rem; background: var(--color-bg); color: var(--color-text); } .crm-field input:focus, .crm-field select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15); } .crm-field-group-line { margin-top: 0.625rem; margin-bottom: 0.375rem; border-top: 1px solid var(--color-border-light); padding-top: 0.5rem; } .crm-field-group-line:first-child, .crm-field-group-line.is-first { margin-top: 0; padding-top: 0; border-top: 0; } .crm-field-group-line span { font-size: 0.65rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; } /* === CRM Column Toggle === */ .col-toggle { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.75rem; border: 1px solid var(--color-border); border-radius: 999px; font-size: 0.8rem; cursor: pointer; transition: all 0.15s; user-select: none; } .col-toggle:hover { border-color: var(--color-primary); } .col-toggle.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .col-toggle input { display: none; } /* === Modal Overlay === */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 1000; } .modal-content { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.5rem; box-shadow: 0 8px 32px rgba(0,0,0,0.5); max-height: 90vh; overflow-y: auto; color: var(--color-text); } /* === Quote Builder === */ .mod-content--fullwidth { padding: 0 !important; } .quote-builder .page-header { padding: 1rem 2rem; margin: 0; border-bottom: 1px solid var(--color-border); background: var(--color-surface); } .quote-builder-grid { display: grid; grid-template-columns: 1fr 320px; min-height: calc(100vh - 130px); } .quote-document { padding: 2rem; background: var(--color-bg); overflow-y: auto; } .quote-document-inner { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 2.5rem 2.5rem 1.5rem; max-width: 820px; min-height: 1122px; margin: 0 auto; box-shadow: 0 1px 4px rgba(0,0,0,0.06); position: relative; display: flex; flex-direction: column; } .quote-document-inner .qd-footer { margin-top: auto; } .qd-company-header { font-size: 0.65rem; color: var(--color-text); padding-top: 2rem; padding-bottom: 0.25rem; margin-bottom: 0.25rem; } .qd-top-row { display: flex; justify-content: space-between; gap: 2rem; margin-bottom: 1.5rem; } .qd-customer-block { flex: 1; min-width: 0; } .qd-customer-empty { } .qb-search-wrap { display: flex; gap: 0.5rem; align-items: center; } .qb-search-wrap input { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 0.85rem; } .qb-search-wrap input:focus { outline: none; border-color: var(--color-primary); } .qb-search-results { position: absolute; z-index: 10; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-md); max-height: 250px; overflow-y: auto; width: 350px; margin-top: 0.25rem; } .qb-search-result { padding: 0.625rem 0.75rem; cursor: pointer; font-size: 0.85rem; border-bottom: 1px solid var(--color-border-light); } .qb-search-result:hover { background: var(--color-bg); } .qb-search-result:last-child { border-bottom: none; } .qb-search-result-name { font-weight: 500; } .qb-search-result-sub { font-size: 0.75rem; color: var(--color-text-muted); } .qd-meta { flex-shrink: 0; } .qd-meta table { font-size: 0.8rem; } .qd-meta td { padding: 0.15rem 0; border-bottom: none; } .qd-meta td:first-child { color: var(--color-text); padding-right: 1rem; white-space: nowrap; } .qd-meta td:last-child { font-weight: 400; } .qd-meta-input { border: none; background: transparent; font-size: 0.8rem; font-weight: 500; color: var(--color-text); padding: 0.15rem 0.25rem; width: 110px; border-radius: 4px; } .qd-meta-input:focus { outline: none; background: var(--color-primary-light); } .qd-title { font-size: 1.3rem; margin: 0 0 0.5rem; font-weight: 700; } .qd-billing { font-size: 0.8rem; font-weight: 400; margin-bottom: 0.75rem; } .qd-billing strong { font-weight: 700; } .qd-notice { font-size: 0.8rem; color: var(--color-text); margin-bottom: 1.25rem; line-height: 1.5; } .text-right, .qd-table th.text-right { text-align: right; } .qd-status-select { padding: 0.3rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; border: none; cursor: pointer; appearance: auto; } .qd-status-select--draft { background: var(--color-bg); color: var(--color-text-muted); } .qd-status-select--sent { background: #fff3cd; color: #856404; } .qd-status-select--accepted { background: #d4edda; color: #155724; } .qd-status-select--rejected { background: #f8d7da; color: #721c24; } .qd-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; margin-bottom: 1.5rem; } .qd-table th { text-align: left; padding: 0.5rem 0.4rem; font-size: 0.7rem; font-weight: 700; border-bottom: 2px solid var(--color-text); white-space: nowrap; } .qd-table td { padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--color-border-light); vertical-align: top; } .qd-table .qd-item-name { font-weight: 500; } .qd-table .qd-item-desc { font-size: 0.7rem; color: var(--color-text-muted); margin-top: 0.15rem; } .qd-table input[type="number"], .qd-table input.qb-edit { width: 60px; border: 1px solid var(--color-border-light); border-radius: 4px; padding: 0.3rem 0.4rem; font-size: 0.8rem; text-align: center; background: var(--color-bg); font-variant-numeric: tabular-nums; } .qd-table input.qb-edit { width: 100%; text-align: left; } .qd-table input[type="number"]:focus, .qd-table input.qb-edit:focus { outline: none; border-color: var(--color-primary); background: #fff; } .qd-table .qd-remove { background: none; border: none; color: var(--color-error); cursor: pointer; font-size: 1rem; padding: 0; opacity: 0.5; } .qd-table .qd-remove:hover { opacity: 1; } .qd-totals { width: 60%; margin-left: 40%; margin-bottom: 1.5rem; } .qd-totals-row { display: flex; justify-content: space-between; padding: 0.375rem 0; font-size: 0.85rem; } .qd-totals-row--bold { font-weight: 700; font-size: 0.85rem; border-top: 2px solid var(--color-text); padding-top: 0.5rem; } .qd-terms { font-size: 0.75rem; line-height: 1.7; margin-bottom: 1rem; } .qd-terms strong { font-weight: 700; } .qd-notes-section { margin-bottom: 1rem; } .qd-notes-input { width: 100%; border: 1px dashed var(--color-border); border-radius: var(--radius); padding: 0.5rem 0.75rem; font-size: 0.8rem; resize: none; background: transparent; color: var(--color-text); } .qd-notes-input:focus { outline: none; border-color: var(--color-primary); border-style: solid; } .qd-footer { display: grid; grid-template-columns: 1fr 1.4fr 1fr 0.7fr; gap: 0.75rem; font-size: 9px; color: var(--color-text-muted); border-top: 1px solid var(--color-border); padding-top: 1rem; line-height: 1.5; } .qd-footer > div:last-child { text-align: right; } /* Quote Sidebar */ .quote-sidebar { background: var(--color-surface); border-left: 1px solid var(--color-border); padding: 1.25rem; overflow-y: auto; max-height: calc(100vh - 130px); position: sticky; top: 0; } .qs-header { margin-bottom: 0.5rem; } .qs-header h3 { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 700; } .qs-header select { width: 100%; padding: 0.4rem 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 0.8rem; background: #fff; } .qs-hint { font-size: 0.75rem; color: var(--color-text-muted); margin-bottom: 1rem; } .qs-category { margin-bottom: 1rem; } .qs-category-name { font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.02em; padding: 0.4rem 0.5rem; background: var(--color-bg); border-radius: var(--radius); margin-bottom: 0.25rem; } .qs-item { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.5rem; border-radius: var(--radius); cursor: pointer; transition: background 0.15s; } .qs-item:hover { background: var(--color-primary-light); } .qs-item-name { font-size: 0.85rem; font-weight: 500; } .qs-item-nr { font-size: 0.7rem; color: var(--color-text-muted); } .qs-item-price { font-size: 0.8rem; color: var(--color-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; } /* Quantity Modal Tier List */ .qb-tier-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 0.375rem; } .qb-tier-item { padding: 0.375rem 0.5rem; border: 1px solid var(--color-border-light); border-radius: var(--radius); font-size: 0.75rem; text-align: center; } .qb-tier-item strong { display: block; font-size: 0.85rem; } /* === AI Chat Widget === */ .ai-widget { position: fixed; bottom: 20px; right: 20px; z-index: 9999; } .ai-widget-btn { width: 56px; height: 56px; border-radius: 50%; background: var(--color-primary); color: #fff; border: none; font-size: 1.5rem; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.2); transition: transform 0.2s; display: flex; align-items: center; justify-content: center; } .ai-widget-btn:hover { transform: scale(1.1); } .ai-widget-panel { display: none; position: absolute; bottom: 70px; right: 0; width: 380px; height: 520px; background: #fff; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.15); border: 1px solid var(--color-border); flex-direction: column; overflow: hidden; } .ai-widget--open .ai-widget-panel { display: flex; } .ai-widget--open .ai-widget-btn { display: none; } .ai-widget-header { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; background: var(--color-primary); color: #fff; font-weight: 600; font-size: 0.9rem; } .ai-widget-close { background: none; border: none; color: #fff; font-size: 1.3rem; cursor: pointer; opacity: 0.8; } .ai-widget-close:hover { opacity: 1; } .ai-widget-messages { flex: 1; overflow-y: auto; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; } .ai-widget-welcome { text-align: center; padding: 2rem 1rem; color: var(--color-text-muted); font-size: 0.85rem; } .ai-widget-msg { max-width: 85%; padding: 0.5rem 0.75rem; border-radius: 12px; font-size: 0.85rem; line-height: 1.5; word-wrap: break-word; } .ai-widget-msg--user { background: var(--color-primary); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; } .ai-widget-msg--ai { background: var(--color-bg); color: var(--color-text); align-self: flex-start; border-bottom-left-radius: 4px; } .ai-widget-msg--typing { background: var(--color-bg); color: var(--color-text-muted); align-self: flex-start; font-style: italic; } .ai-widget-input { display: flex; gap: 0.375rem; padding: 0.625rem; border-top: 1px solid var(--color-border); } .ai-widget-input input { flex: 1; border: 1px solid var(--color-border); border-radius: 999px; padding: 0.5rem 0.875rem; font-size: 0.85rem; outline: none; } .ai-widget-input input:focus { border-color: var(--color-primary); } .ai-widget-input button { background: var(--color-primary); color: #fff; border: none; border-radius: 50%; width: 36px; height: 36px; cursor: pointer; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; } /* === Messenger === */ .msg-layout { display: flex; height: calc(100vh - 60px); margin: -2rem; } .msg-sidebar { width: 240px; background: var(--color-surface); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; flex-shrink: 0; } .msg-sidebar-header { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border); } .msg-sidebar-header h2 { margin: 0; font-size: 1rem; } .msg-new-channel-btn { background: none; border: 1px solid var(--color-border); color: var(--color-text-muted); width: 24px; height: 24px; border-radius: 4px; cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; } .msg-new-channel-btn:hover { background: var(--color-surface-hover); } .msg-channel-list { flex: 1; overflow-y: auto; padding: 0.5rem 0; } .msg-section-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.375rem 1rem; color: var(--color-text-muted); font-weight: 600; } .msg-channel-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 1rem; color: var(--color-text-muted); text-decoration: none; font-size: 0.85rem; cursor: pointer; border-radius: 6px; margin: 0 0.25rem; } .msg-channel-item:hover { background: var(--color-surface-hover); color: var(--color-text); } .msg-channel-item.active { background: var(--color-primary); color: #fff; } .msg-channel-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .msg-unread { background: var(--color-error); color: #fff; font-size: 0.65rem; padding: 0.1rem 0.4rem; border-radius: 999px; font-weight: 700; } .msg-chat { flex: 1; display: flex; flex-direction: column; background: var(--color-bg); } .msg-chat-header { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--color-border); background: var(--color-surface); min-height: 52px; } .msg-header-avatar { width: 28px; height: 28px; border-radius: 6px; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.75rem; } .msg-messages { flex: 1; overflow-y: auto; padding: 0.5rem 1.25rem; display: flex; flex-direction: column; } .msg-message { display: flex; gap: 0.75rem; padding: 0.5rem 0; position: relative; } .msg-message:hover { background: var(--color-surface-hover); margin: 0 -1.25rem; padding-left: 1.25rem; padding-right: 1.25rem; } .msg-message:hover .msg-actions { display: flex; } .msg-compact { padding: 0.1rem 0; } .msg-compact .msg-compact-time { width: 36px; flex-shrink: 0; font-size: 0.65rem; color: transparent; text-align: center; padding-top: 0.15rem; } .msg-compact:hover .msg-compact-time { color: var(--color-text-muted); } .msg-avatar { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; margin-top: 2px; } .msg-avatar-img { width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; margin-top: 2px; object-fit: cover; } .msg-dm-avatar { width: 24px; height: 24px; border-radius: 6px; background: var(--color-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.65rem; flex-shrink: 0; } .msg-dm-avatar-img { width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0; object-fit: cover; } .msg-body { flex: 1; min-width: 0; } .msg-meta { display: flex; gap: 0.5rem; align-items: baseline; margin-bottom: 0.1rem; } .msg-meta strong { font-size: 0.9rem; } .msg-time { font-size: 0.7rem; color: var(--color-text-muted); } .msg-edited { font-size: 0.65rem; color: var(--color-text-muted); } .msg-content { font-size: 0.9rem; line-height: 1.5; word-wrap: break-word; } .msg-system { justify-content: center; padding: 0.25rem 0; } .msg-system-text { font-size: 0.75rem; color: var(--color-text-muted); font-style: italic; } .msg-date-divider { display: flex; align-items: center; gap: 1rem; padding: 1rem 0 0.5rem; } .msg-date-divider::before, .msg-date-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); } .msg-date-divider span { font-size: 0.7rem; color: var(--color-text-muted); font-weight: 600; white-space: nowrap; padding: 0.15rem 0.75rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); } .msg-input-area { padding: 0 1.25rem 1rem; } .msg-input-box { border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); overflow: hidden; } .msg-toolbar-top { display: flex; gap: 1px; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--color-border); align-items: center; } .msg-toolbar-bottom { display: flex; justify-content: space-between; align-items: center; padding: 0.3rem 0.5rem; border-top: 1px solid var(--color-border); } .msg-editor { padding: 0.6rem 0.75rem; font-size: 0.85rem; color: var(--color-text); min-height: 24px; max-height: 200px; overflow-y: auto; outline: none; line-height: 1.5; word-wrap: break-word; } .msg-editor:empty::before { content: attr(data-placeholder); color: var(--color-text-muted); pointer-events: none; } .msg-editor a { color: var(--color-primary); text-decoration: underline; } .msg-editor blockquote { border-left: 3px solid var(--color-border); padding-left: 0.5rem; margin: 0.25rem 0; color: var(--color-text-muted); } .msg-editor code { background: var(--color-bg); padding: 0.1rem 0.3rem; border-radius: 3px; font-size: 0.8rem; } .msg-send-btn { background: var(--color-primary); color: #fff; border: none; border-radius: 6px; padding: 0.35rem 0.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; } .msg-send-btn:hover { background: var(--color-primary-dark); } .msg-actions { display: none; position: absolute; top: -4px; right: 8px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 6px; box-shadow: var(--shadow); gap: 2px; padding: 2px; z-index: 5; } .msg-action-btn { background: none; border: none; cursor: pointer; font-size: 0.8rem; padding: 0.2rem 0.35rem; border-radius: 4px; opacity: 0.7; } .msg-action-btn:hover { background: var(--color-bg); opacity: 1; } .msg-reactions { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; } .msg-reaction-btn { display: inline-flex; align-items: center; gap: 3px; padding: 0.15rem 0.4rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-bg); font-size: 0.75rem; cursor: pointer; } .msg-reaction-btn:hover { border-color: var(--color-primary); } .msg-reaction-own { background: var(--color-primary-light); border-color: var(--color-primary); } .msg-reaction-btn span { font-size: 0.65rem; color: var(--color-text-muted); } .msg-has-unread .msg-channel-name { font-weight: 700; color: var(--color-text); } .msg-pinned { border-left: 2px solid var(--color-warning); padding-left: 0.5rem; } .msg-toolbar { display: flex; gap: 2px; align-items: center; } .msg-tb-btn { background: none; border: none; cursor: pointer; padding: 0.25rem; border-radius: 4px; font-size: 0.8rem; color: var(--color-text-muted); width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; } .msg-tb-btn:hover { background: var(--color-surface-hover); color: var(--color-text); } .msg-tb-sep { width: 1px; height: 16px; background: var(--color-border); margin: 0 4px; } .msg-fav-btn:hover { color: var(--color-warning) !important; } @media (max-width: 600px) { .msg-sidebar { width: 60px; } .msg-channel-name, .msg-section-label { display: none; } .msg-dm-avatar { display: none; } .msg-toolbar { display: none; } } /* === Kanban Board === */ .kanban-board { display: flex; gap: 0.75rem; overflow-x: auto; min-height: 500px; padding-bottom: 1rem; } .kanban-column { flex: 1; min-width: 220px; background: var(--color-bg); border-radius: var(--radius); display: flex; flex-direction: column; } .kanban-column-header { display: flex; justify-content: space-between; align-items: center; padding: 0.625rem 0.75rem; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); } .kanban-count { background: var(--color-border); border-radius: 999px; padding: 0.1rem 0.5rem; font-size: 0.7rem; } .kanban-cards { flex: 1; padding: 0 0.5rem 0.5rem; min-height: 100px; } .kanban-cards.drag-over { background: var(--color-primary-light); border-radius: var(--radius); } .kanban-card { background: var(--color-surface); border: 1px solid var(--color-border-light); border-radius: var(--radius); padding: 0.625rem; margin-bottom: 0.5rem; cursor: grab; transition: box-shadow 0.15s, opacity 0.15s; } .kanban-card:hover { box-shadow: var(--shadow-md); } .kanban-card.dragging { opacity: 0.4; } .kanban-card-link { text-decoration: none; color: inherit; display: block; } .kanban-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; } .kanban-card-nr { font-size: 0.7rem; color: var(--color-text-muted); } .kanban-card-title { font-size: 0.85rem; font-weight: 500; line-height: 1.3; } .kanban-card-meta { display: flex; gap: 0.5rem; margin-top: 0.375rem; font-size: 0.7rem; color: var(--color-text-muted); } /* === Dashboard Widget Grid === */ .dash-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; min-height: 200px; } .dash-widget { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; transition: box-shadow 0.2s; } .dash-widget:hover { box-shadow: var(--shadow-md); cursor: pointer; } .dash-widget-header { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--color-border); } .dash-widget-title { font-size: 0.8rem; font-weight: 600; } .dash-widget-body { padding: 0.75rem; } .dash-widget-remove { background: none; border: none; color: var(--color-text-muted); cursor: pointer; font-size: 1rem; padding: 0 0.25rem; } .dash-widget-remove:hover { color: var(--color-error); } .dash-widget-resize { position: absolute; bottom: 0; right: 0; width: 16px; height: 16px; cursor: se-resize; background: linear-gradient(135deg, transparent 50%, var(--color-text-muted) 50%); opacity: 0.3; border-radius: 0 0 10px 0; } .dash-widget-resize:hover { opacity: 0.7; } .dash-grid.editing .dash-widget { cursor: grab; border-style: dashed; position: relative; } .dash-grid.editing .dash-widget:active { cursor: grabbing; } .dash-grid.editing .dash-widget-actions { display: flex !important; } .dash-grid.editing .dash-widget-resize { display: block !important; } @media (max-width: 900px) { .dash-grid { grid-template-columns: repeat(2, 1fr); } .dash-widget { grid-column: span 1 !important; } } @media (max-width: 600px) { .dash-grid { grid-template-columns: 1fr; } .dash-widget { grid-column: 1 / -1 !important; grid-row: auto !important; } } /* === Database Module === */ .db-table-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; } .db-table-card { text-decoration: none; color: inherit; transition: border-color 0.15s, box-shadow 0.15s; } .db-table-card:hover { border-color: var(--color-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.08); color: inherit; } .db-table-card--system { border-left: 3px solid var(--color-primary); } .db-table-card-header { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.75rem; } .db-table-icon { font-size: 1.75rem; line-height: 1; } .db-table-name { font-weight: 600; font-size: 0.95rem; } .db-table-desc { font-size: 0.8rem; margin-top: 0.25rem; } .db-table-meta { margin-top: auto; padding-top: 0.5rem; border-top: 1px solid var(--color-border); } /* Spreadsheet */ .db-spreadsheet { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .db-spreadsheet th { padding: 0.5rem 0.75rem; text-align: left; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); border-bottom: 2px solid var(--color-border); white-space: nowrap; background: var(--color-surface); position: sticky; top: 0; z-index: 1; } .db-spreadsheet td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--color-border); min-width: 120px; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .db-spreadsheet tbody tr { cursor: pointer; transition: background 0.1s; } .db-spreadsheet tbody tr:hover td { background: var(--color-surface-hover, rgba(255,255,255,0.03)); } .db-col-num { width: 40px; min-width: 40px !important; color: var(--color-text-muted); font-size: 0.75rem; text-align: center !important; } .db-col-actions { width: 40px; min-width: 40px !important; text-align: center !important; } .db-sort-link { text-decoration: none; color: inherit; display: inline-flex; align-items: center; gap: 0.25rem; } .db-sort-link:hover { color: var(--color-primary); } .db-sort-arrow { font-size: 0.7rem; } .db-col-type { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; } .db-url-link { font-size: 0.8rem; } .db-name-link { display:flex; flex-direction:column; text-decoration:none; color:var(--color-text); padding:0.375rem 0; margin:-0.375rem 0; min-height:100%; } .db-name-link:hover { color:var(--color-primary); } .db-row-delete { background: none; border: none; color: var(--color-text-muted); font-size: 1.1rem; cursor: pointer; padding: 0.25rem; line-height: 1; opacity: 0; transition: opacity 0.15s, color 0.15s; } .db-spreadsheet tbody tr:hover .db-row-delete { opacity: 1; } .db-row-delete:hover { color: var(--color-error); } /* Edit Panel / Overlay */ .db-edit-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1000; display: flex; align-items: center; justify-content: center; } .db-edit-panel { width: 90%; max-width: 560px; max-height: 85vh; overflow-y: auto; } .db-edit-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--color-text-muted); line-height: 1; padding: 0.25rem; } .db-edit-close:hover { color: var(--color-text); } /* Relation Dropdown */ .db-relation-input-wrap { position: relative; } .db-relation-search { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 0.85rem; background: var(--color-surface); color: var(--color-text); } .db-relation-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); max-height: 200px; overflow-y: auto; z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .db-relation-option { padding: 0.5rem 0.75rem; cursor: pointer; font-size: 0.85rem; } .db-relation-option:hover { background: var(--color-primary-light, rgba(255,255,255,0.05)); } .db-multiselect-wrap { display: flex; flex-wrap: wrap; gap: 0.25rem; } /* Column Settings */ .db-column-item { display: flex; gap: 0.75rem; padding: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius); margin-bottom: 0.75rem; background: var(--color-surface); transition: box-shadow 0.15s; } .db-column-item:hover { box-shadow: 0 1px 4px rgba(0,0,0,0.06); } .db-column-item.db-dragging { opacity: 0.5; box-shadow: 0 4px 16px rgba(0,0,0,0.15); } .db-column-drag { cursor: grab; color: var(--color-text-muted); font-size: 1rem; padding-top: 0.25rem; user-select: none; } .db-column-drag:active { cursor: grabbing; } .db-column-fields { flex: 1; min-width: 0; } .db-col-delete { background: none; border: none; color: var(--color-error); font-size: 0.8rem; cursor: pointer; padding: 0; opacity: 0.7; } .db-col-delete:hover { opacity: 1; } /* Tenant Module Cards */ .tm-module-card { display:flex; flex-direction:column; gap:0.75rem; padding:1rem; border:1px solid var(--color-border); border-radius:var(--radius); cursor:pointer; background:var(--color-surface); transition:all 0.15s; } .tm-module-card:hover { border-color: var(--color-text-muted); } .tm-module-card--active { border-color: var(--color-primary); background: var(--color-primary-light, rgba(139,92,246,0.06)); } .tm-module-toggle { display:flex; align-items:center; justify-content:space-between; } .tm-module-toggle input[type="checkbox"] { width:18px; height:18px; accent-color: var(--color-primary); cursor:pointer; } .tm-module-status { font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; padding:0.15rem 0.5rem; border-radius:10px; } .tm-module-card--active .tm-module-status { color:var(--color-success); background:rgba(34,197,94,0.12); } .tm-module-card:not(.tm-module-card--active) .tm-module-status { color:var(--color-text-muted); background:rgba(128,128,128,0.1); } /* Demo / Workflow View */ .demo-flow { max-width: 700px; } .demo-step { display: flex; gap: 1rem; align-items: flex-start; } .demo-step-number { width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; margin-top: 1rem; } .demo-step-content { flex: 1; } .demo-step-content h3 { margin: 0; font-size: 1rem; } .demo-step-content p { font-size: 0.85rem; color: var(--color-text-muted); margin: 0.5rem 0; line-height: 1.5; } .demo-step-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; } .demo-step-icon { color: var(--color-primary); flex-shrink: 0; } .demo-arrow { text-align: center; font-size: 1.25rem; color: var(--color-text-muted); padding: 0.25rem 0; margin-left: 15px; } .demo-detail { background: var(--color-bg); border-radius: var(--radius); padding: 0.75rem; margin-top: 0.5rem; font-size: 0.8rem; } .demo-detail strong { display: block; margin-bottom: 0.375rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); } .demo-detail ul { margin: 0; padding-left: 1.25rem; } .demo-detail li { margin-bottom: 0.25rem; } .demo-status-flow { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.25rem; } .demo-flow-arrow { color: var(--color-text-muted); font-size: 0.85rem; } /* Filter Panel */ .filter-row { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.5rem; flex-wrap:wrap; } .filter-row select, .filter-row input { padding:0.375rem 0.5rem; border:1px solid var(--color-border); border-radius:var(--radius); font-size:0.8rem; background:var(--color-surface); color:var(--color-text); } .filter-row select:focus, .filter-row input:focus { border-color:var(--color-primary); outline:none; } .filter-connector { flex-shrink:0; font-size:0.75rem; } /* Reminder checkboxes */ .reminder-done { width:22px; height:22px; border-radius:50%; border:2px solid var(--color-border) !important; display:flex; align-items:center; justify-content:center; font-size:0.75rem !important; color:var(--color-text-muted); transition:all 0.15s; } .reminder-done:hover { border-color:var(--color-primary) !important; color:var(--color-primary); } .mini-cal-grid button:hover { background:var(--color-primary-light, rgba(139,92,246,0.1)) !important; border-color:var(--color-primary) !important; } /* Messenger: Format button active state */ .msg-tb-btn--active { background:var(--color-primary) !important; color:#fff !important; border-radius:4px; } /* Messenger: Tabs */ .msg-tab:hover { color:var(--color-text) !important; } .msg-tab--active { color:var(--color-text) !important; font-weight:600 !important; border-bottom-color:var(--color-primary) !important; } #msg-search-overlay a:hover { background:var(--color-primary-light, rgba(139,92,246,0.1)); } #msg-files-tab { background:var(--color-bg); } /* Messenger: File links in messages */ .msg-content a[href*="/uploads/"] { color:var(--color-primary); text-decoration:none; font-weight:500; } .msg-content a[href*="/uploads/"]:hover { text-decoration:underline; } /* Demo Mockups (Fenster-Stil) */ .demo-mockup { border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; margin-top: 0.75rem; } .demo-mockup-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: var(--color-bg); border-bottom: 1px solid var(--color-border); } .demo-mockup-dot { width: 8px; height: 8px; border-radius: 50%; } .demo-mockup-title { font-size: 0.7rem; color: var(--color-text-muted); margin-left: 0.25rem; } .demo-mockup-body { padding: 1rem; font-size: 0.85rem; } .demo-kpi { padding: 0.5rem; background: var(--color-bg); border-radius: var(--radius); } .demo-kpi-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); margin-bottom: 0.25rem; } .demo-kpi-value { font-size: 0.85rem; display: flex; align-items: center; gap: 0.375rem; } .demo-bar { flex: 1; height: 6px; background: var(--color-border); border-radius: 3px; overflow: hidden; } .demo-bar-fill { height: 100%; background: var(--color-success); border-radius: 3px; } .demo-kb-result { padding: 0.625rem; background: var(--color-bg); border-radius: var(--radius); margin-bottom: 0.5rem; } .demo-kb-result:last-child { margin-bottom: 0; } .demo-thread { display: flex; flex-direction: column; gap: 0.5rem; } .demo-thread-msg { padding: 0.5rem 0.75rem; border-radius: var(--radius); } .demo-thread-customer { background: var(--color-bg); border-left: 2px solid var(--color-text-muted); } .demo-thread-agent { background: var(--color-primary-light, rgba(139,92,246,0.06)); border-left: 2px solid var(--color-primary); } /* === Bildgenerator: KI-Chat-Modus === */ .gen-module--chat { border-left: 3px solid var(--color-primary); grid-column: 1 / -1; /* volle Breite im Module-Grid */ } .gen-module--chat .chat-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); gap: 1.5rem; padding: 0.75rem 1rem 1rem; } .gen-module--chat .chat-main { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; } .gen-module--chat .chat-side { border-left: 1px solid var(--color-border); padding-left: 1.25rem; min-width: 0; } @media (max-width: 900px) { .gen-module--chat .chat-panel { grid-template-columns: 1fr; } .gen-module--chat .chat-side { border-left: none; border-top: 1px solid var(--color-border); padding-left: 0; padding-top: 1rem; } } .chat-upload { padding: 1rem; } .chat-upload-box { display: block; border: 2px dashed var(--color-border); border-radius: var(--radius); padding: 1.5rem 1rem; text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s; margin-bottom: 0.75rem; } .chat-upload-box:hover { border-color: var(--color-primary); background: var(--color-bg); } .chat-upload-box input[type="file"] { display: none; } .chat-upload-placeholder { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; color: var(--color-text-muted); font-size: 0.85rem; } .chat-source { display: flex; align-items: center; gap: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-border); } .chat-messages { display: flex; flex-direction: column; gap: 0.5rem; max-height: 420px; overflow-y: auto; padding: 0.25rem; } /* Option-Buttons fuer Chat-Fragen */ .chat-options { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.25rem 0 0.5rem; align-self: flex-start; max-width: 100%; } .chat-option-btn { padding: 0.4rem 0.85rem; border: 1px solid var(--color-primary); background: var(--color-surface); color: var(--color-primary); border-radius: 999px; font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: background 0.15s, color 0.15s, transform 0.1s; white-space: nowrap; } .chat-option-btn:hover { background: var(--color-primary); color: #fff; } .chat-option-btn:active { transform: scale(0.97); } .chat-options.locked { pointer-events: none; } .chat-options.locked .chat-option-btn { opacity: 0.4; border-color: var(--color-border); background: transparent; color: var(--color-text-muted); } .chat-options.locked .chat-option-btn.selected { opacity: 1; background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .chat-msg { padding: 0.5rem 0.75rem; border-radius: var(--radius); font-size: 0.85rem; line-height: 1.4; max-width: 90%; white-space: pre-wrap; word-wrap: break-word; } .chat-msg--assistant { background: var(--color-bg); border: 1px solid var(--color-border); align-self: flex-start; } .chat-msg--user { background: var(--color-primary-light, rgba(139,92,246,0.08)); border: 1px solid var(--color-primary); color: var(--color-text); align-self: flex-end; } .chat-send-form { display: flex; flex-direction: column; gap: 0.5rem; } .chat-send-form textarea { resize: vertical; min-height: 2.5rem; } .chat-finalize { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed var(--color-border); } .chat-final-prompt { font-size: 0.78rem; font-family: var(--font-mono, ui-monospace, Menlo, monospace); line-height: 1.45; white-space: pre; overflow-x: auto; min-height: 320px; resize: vertical; tab-size: 2; } .gen-reuse-btn { position: absolute; bottom: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; border: none; background: rgba(0,0,0,0.6); color: #fff; font-size: 0.75rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; } .gen-reuse-btn:hover { background: var(--color-primary); } /* ============================================================ RecordView — generische Detail-Ansicht fuer Listen-Eintraege Layout identisch zur alten Kunden-Detail-Ansicht: kompakter Header + 2/3+1/3 Grid + EINE Stammdaten-Karte mit Kategorien als Trennlinien (nicht als eigene Karten). ============================================================ */ /* ---- Header (Back + Name + Firma + #Nummer | Verlauf + Loeschen) ---- */ .record-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; } .record-title-line { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; min-width: 0; } .record-back { color: var(--color-text-muted); font-size: 0.85rem; text-decoration: none; } .record-back:hover { color: var(--color-text); } .record-title { font-size: 1.25rem; font-weight: 700; color: var(--color-text); } .record-subtitle { color: var(--color-text-muted); font-size: 0.95rem; } .record-badge { font-size: 0.7rem; } .record-autosave { margin-left: 0.5rem; } .record-actions { display: flex; gap: 0.375rem; flex-shrink: 0; } .record-delete { color: var(--color-error); border-color: var(--color-error); } .record-delete:hover { background: var(--color-error); color: #fff; } /* ---- 2-Spalten-Grid ---- */ .record-view { display: grid; grid-template-columns: 1fr 340px; gap: 1.25rem; align-items: start; } .record-primary { min-width: 0; display: flex; flex-direction: column; gap: 1rem; } .record-sidebar { display: flex; flex-direction: column; gap: 1rem; } /* Sidebar section-cards etwas kompakter */ .record-sidebar .section-card .section-card-header { padding: 0.75rem 1rem; } .record-sidebar .section-card .section-card-header h2 { font-size: 0.95rem; } .record-sidebar .section-card .section-card-body { padding: 0.75rem 1rem; } /* Stammdaten-Card: Header-Aktionen rechts */ .record-fields-head-actions { display: flex; gap: 0.375rem; } /* ---- Feature-Add-Button: quadratisch, oben rechts im section-card-header ---- */ .feature-add-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: none; background: var(--color-primary); color: #fff; border-radius: var(--radius); font-size: 1rem; font-weight: 600; line-height: 1; cursor: pointer; transition: background 0.15s, transform 0.1s; } .feature-add-btn:hover { background: var(--color-primary-hover, var(--color-primary)); transform: scale(1.05); } .feature-add-btn:active { transform: scale(0.95); } /* ---- Feature-Popup: zentriertes Overlay fuer Add-Formulare ---- */ .feature-popup-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; } .feature-popup { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); width: 90%; max-width: 480px; max-height: 85vh; overflow-y: auto; } .feature-popup-header { display: flex; justify-content: space-between; align-items: center; padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--color-border-light); } .feature-popup-header h3 { margin: 0; font-size: 1rem; } .feature-popup-close { background: none; border: 0; color: var(--color-text-muted); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 0.25rem; } .feature-popup-close:hover { color: var(--color-text); } .feature-popup-body { padding: 1rem 1.25rem; } .feature-popup-body .crm-field { margin-bottom: 0.75rem; } .feature-popup-body textarea, .feature-popup-body input[type="text"], .feature-popup-body input[type="file"], .feature-popup-body select { width: 100%; padding: 0.5rem 0.625rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 0.85rem; background: var(--color-bg); color: var(--color-text); } .feature-popup-body textarea { resize: vertical; min-height: 100px; font-family: inherit; } .feature-popup-actions { display: flex; gap: 0.5rem; justify-content: flex-end; padding: 0.75rem 1.25rem; border-top: 1px solid var(--color-border-light); } /* ---- Feature: activities (Gespraechsverlauf) — im Primary-Slot, gross ---- */ .record-activity-add { display: flex; gap: 0.5rem; margin-bottom: 1rem; } .record-activity-type { padding: 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 0.85rem; width: 120px; } .record-activity-input { flex: 1; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 0.85rem; } .record-activity-list { display: flex; flex-direction: column; } .record-activity { display: flex; gap: 0.75rem; padding: 0.5rem 0; align-items: flex-start; } .record-activity-icon { flex-shrink: 0; width: 1.75rem; text-align: center; font-size: 1rem; line-height: 1.2; } .record-activity-body { flex: 1; min-width: 0; } .record-activity-content { font-size: 0.85rem; word-break: break-word; } .record-activity-date { margin-top: 0.15rem; } .record-activity-delete button { background: none; border: 0; color: var(--color-text-muted); cursor: pointer; opacity: 0.5; transition: opacity 0.15s; font-size: 1rem; padding: 0 0.25rem; } .record-activity-delete button:hover { opacity: 1; color: var(--color-error); } /* ---- Feature: reminders (Sidebar) ---- */ .record-reminder-add-wrap { position: relative; } .record-reminder-popup { position: absolute; right: 0; top: calc(100% + 0.25rem); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.75rem; z-index: 100; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); width: 260px; } .record-reminder-popup .reminder-popup-title { width: 100%; padding: 0.375rem 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 0.8rem; margin-bottom: 0.5rem; background: var(--color-bg); color: var(--color-text); } .mini-cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; } .mini-cal-head button { background: none; border: 0; cursor: pointer; color: var(--color-text-muted); font-size: 0.8rem; padding: 0 0.25rem; } .mini-cal-title { font-size: 0.75rem; font-weight: 600; color: var(--color-text); } .mini-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; text-align: center; font-size: 0.7rem; } .mini-cal-weekday { font-size: 0.6rem; color: var(--color-text-muted); padding: 0.15rem; font-weight: 600; } .mini-cal-day { background: none; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; padding: 0.25rem; font-size: 0.7rem; color: var(--color-text); } .mini-cal-day:hover { border-color: var(--color-border); } .mini-cal-day.is-today { font-weight: 700; color: var(--color-primary); } .mini-cal-day.is-selected { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .mini-cal-day.is-past { opacity: 0.3; pointer-events: none; } .mini-cal-footer { display: flex; gap: 0.375rem; margin-top: 0.5rem; align-items: center; } .mini-cal-footer .reminder-popup-time { flex: 1; padding: 0.2rem 0.375rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 0.7rem; background: var(--color-bg); color: var(--color-text); } .reminder-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0; border-bottom: 1px solid var(--color-border-light); font-size: 0.8rem; } .reminder-item:last-child { border-bottom: 0; } .reminder-item.is-done { opacity: 0.5; } .reminder-item.is-done .reminder-title { text-decoration: line-through; } .reminder-done { background: none; border: 1px solid var(--color-border); border-radius: 50%; width: 18px; height: 18px; cursor: pointer; font-size: 0.7rem; display: flex; align-items: center; justify-content: center; padding: 0; color: var(--color-text); flex-shrink: 0; } .reminder-title { flex: 1; min-width: 0; word-break: break-word; } .reminder-date { white-space: nowrap; } .reminder-date.is-overdue { color: var(--color-error); font-weight: 600; } .reminder-delete { background: none; border: 0; cursor: pointer; color: var(--color-text-muted); font-size: 0.9rem; padding: 0 0.25rem; opacity: 0.5; transition: opacity 0.15s; } .reminder-delete:hover { opacity: 1; color: var(--color-error); } /* ---- Feature: notes (Sidebar) ---- */ .record-note-add { display: flex; gap: 0.375rem; margin-bottom: 0.5rem; } .record-note-add input[type="text"] { flex: 1; padding: 0.375rem 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 0.8rem; } .note-item { display: flex; gap: 0.5rem; padding: 0.375rem 0; border-bottom: 1px solid var(--color-border-light); font-size: 0.8rem; align-items: flex-start; } .note-item:last-child { border-bottom: 0; } .note-icon { flex-shrink: 0; color: var(--color-text-muted); } .note-text { flex: 1; min-width: 0; cursor: text; padding: 0.125rem; border-radius: var(--radius); word-break: break-word; } .note-date { white-space: nowrap; flex-shrink: 0; } .note-delete { display: inline; flex-shrink: 0; } .note-delete button { background: none; border: 0; color: var(--color-text-muted); cursor: pointer; font-size: 0.9rem; padding: 0 0.15rem; opacity: 0.5; transition: opacity 0.15s; } .note-delete button:hover { opacity: 1; color: var(--color-error); } .note-inline-edit { width: 100%; padding: 0.25rem 0.375rem; border: 1px solid var(--color-primary); border-radius: var(--radius); font-size: 0.8rem; background: var(--color-surface); color: var(--color-text); } /* ---- Feature: attachments ---- */ .record-attach-upload { margin-bottom: 0.5rem; } .record-attach-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--color-border-light); font-size: 0.8rem; } .record-attach-row:last-child { border-bottom: 0; } .record-attach-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .record-attach-del { background: none; border: 0; color: var(--color-text-muted); cursor: pointer; font-size: 0.9rem; opacity: 0.5; transition: opacity 0.15s; } .record-attach-del:hover { opacity: 1; color: var(--color-error); } /* ---- Context-Extras (z.B. Ausschreibungen beim Lieferanten) ---- */ .record-invitations { display: flex; flex-direction: column; gap: 0.5rem; } .record-invitation { display: block; padding: 0.5rem 0.625rem; border: 1px solid var(--color-border); border-radius: var(--radius); text-decoration: none; color: var(--color-text); transition: background 0.15s; } .record-invitation:hover { background: var(--color-bg); } .record-invitation-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; } .record-invitation-title { font-size: 0.85rem; font-weight: 500; } /* ---- Audit-Popup-Eintraege ---- */ .record-audit-entry { padding: 0.5rem 0; border-bottom: 1px solid var(--color-border-light); font-size: 0.8rem; } .record-audit-entry:last-child { border-bottom: 0; } .record-audit-changes { margin-top: 0.375rem; color: var(--color-text-muted); font-size: 0.75rem; word-break: break-word; } .record-audit-changes div { margin: 0.1rem 0; } /* Einheitliches Datum/Uhrzeit-Format fuer Feature-Listen: Datum und Uhrzeit untereinander, kompakt, wenig Platz */ .record-datetime { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; line-height: 1.1; font-size: 0.65rem; } .record-datetime-date { font-weight: 500; white-space: nowrap; } .record-datetime-time { font-weight: 400; opacity: 0.85; } .record-datetime.is-overdue { color: var(--color-error); font-weight: 600; } /* Mobile: Spalten zu Stapel kollabieren */ @media (max-width: 960px) { .record-view { grid-template-columns: 1fr; } } /* === Landing Page === */ .lp { --lp-max: 1200px; color: var(--color-text); } .lp-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 0.75rem 2rem; display: flex; justify-content: space-between; align-items: center; background: color-mix(in srgb, var(--color-bg) 85%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border); } .lp-logo { font-weight: 700; font-size: 1.15rem; color: var(--color-text); text-decoration: none; letter-spacing: -0.03em; flex-shrink: 0; } .lp-logo span { color: var(--color-primary); } .lp-nav-center { display: flex; gap: 0.25rem; align-items: center; position: absolute; left: 50%; transform: translateX(-50%); } .lp-nav-right { display: flex; gap: 0.5rem; align-items: center; } .lp-nav-link { color: var(--color-text-muted); text-decoration: none; font-size: 0.85rem; padding: 0.4rem 0.75rem; border-radius: var(--radius); transition: color 0.15s; } .lp-nav-link:hover { color: var(--color-text); } .lp-chevron { display: inline-block; width: 10px; height: 10px; margin-left: 3px; vertical-align: middle; opacity: 0.5; transition: transform 0.15s; } .lp-nav-dropdown:hover .lp-chevron { opacity: 0.8; transform: rotate(180deg); } .lp-hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; padding: 6rem 2rem 4rem; } .lp-hero::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(ellipse at 30% 50%, rgba(139,92,246,0.08) 0%, transparent 50%), radial-gradient(ellipse at 70% 50%, rgba(124,58,237,0.05) 0%, transparent 50%); animation: lp-glow 15s ease-in-out infinite alternate; pointer-events: none; } @keyframes lp-glow { 0% { transform: translate(0,0) rotate(0deg); } 100% { transform: translate(-5%,3%) rotate(3deg); } } .lp-hero-content { position: relative; max-width: 720px; } .lp-hero h1 { font-size: 3.5rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.04em; margin-bottom: 1.25rem; } .lp-hero h1 em { font-style: normal; background: linear-gradient(135deg, var(--color-primary), #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .lp-hero p { font-size: 1.15rem; color: var(--color-text-muted); line-height: 1.7; max-width: 540px; margin: 0 auto 2rem; } .lp-hero-cta { display: flex; gap: 0.75rem; justify-content: center; } .lp-btn { display: inline-flex; align-items: center; padding: 0.7rem 1.5rem; border-radius: var(--radius); font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: all 0.2s; border: none; cursor: pointer; } .lp-btn--primary { background: var(--color-primary); color: #fff; } .lp-btn--primary:hover { background: var(--color-primary-dark); box-shadow: 0 0 30px rgba(139,92,246,0.3); } .lp-btn--outline { background: transparent; color: var(--color-text); border: 1px solid var(--color-border); } .lp-btn--outline:hover { border-color: var(--color-text-muted); background: rgba(255,255,255,0.03); } .lp-section { padding: 5rem 2rem; max-width: var(--lp-max); margin: 0 auto; } .lp-section-title { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 0.75rem; text-align: center; } .lp-section-sub { font-size: 1rem; color: var(--color-text-muted); text-align: center; max-width: 600px; margin: 0 auto 3rem; line-height: 1.7; } .lp-grid { display: grid; gap: 1.25rem; } .lp-grid--3 { grid-template-columns: repeat(3, 1fr); } .lp-grid--4 { grid-template-columns: repeat(4, 1fr); } .lp-grid--5 { grid-template-columns: repeat(5, 1fr); } .lp-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.5rem; transition: all 0.25s; } .lp-card:hover { border-color: var(--color-primary-light); transform: translateY(-2px); } .lp-card-icon { font-size: 1.75rem; margin-bottom: 0.75rem; } .lp-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; } .lp-card p { font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.6; } .lp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; counter-reset: step; } .lp-step { position: relative; padding-top: 3rem; text-align: center; } .lp-step::before { counter-increment: step; content: counter(step); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2.25rem; height: 2.25rem; background: var(--color-primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; } .lp-step h3 { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.375rem; } .lp-step p { font-size: 0.8rem; color: var(--color-text-muted); line-height: 1.6; } .lp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; padding: 3rem 0; } .lp-stat { text-align: center; } .lp-stat-value { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.03em; background: linear-gradient(135deg, var(--color-primary), #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .lp-stat-label { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 0.25rem; } .lp-cta-banner { text-align: center; padding: 5rem 2rem; position: relative; } .lp-cta-banner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(139,92,246,0.06) 0%, transparent 70%); } .lp-cta-banner h2 { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 0.75rem; position: relative; } .lp-cta-banner p { color: var(--color-text-muted); margin-bottom: 2rem; position: relative; } .lp-footer { border-top: 1px solid var(--color-border); padding: 2rem; text-align: center; font-size: 0.8rem; color: var(--color-text-light); } .lp-footer a { color: var(--color-text-muted); text-decoration: none; margin: 0 0.75rem; } .lp-footer a:hover { color: var(--color-primary); } .lp-divider { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--color-border), transparent); margin: 0; } /* Navigation Dropdowns */ .lp-nav-dropdown { position: relative; padding-bottom: 1.5rem; margin-bottom: -1.5rem; } .lp-dropdown-content { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 200px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); padding: 0.5rem; z-index: 200; } .lp-nav-dropdown:hover .lp-dropdown-content, .lp-nav-dropdown:hover .lp-mega-dropdown { display: block; } .lp-dropdown-content a { display: block; padding: 0.5rem 0.75rem; color: var(--color-text-muted); text-decoration: none; font-size: 0.8rem; border-radius: 8px; } .lp-dropdown-content a:hover { background: var(--color-surface-hover); color: var(--color-text); } /* Mega-Dropdown (Notion-Style, zentriert im Fenster) */ .lp-mega-dropdown { display: none; position: fixed; top: 48px; left: 50%; transform: translateX(-50%); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; box-shadow: 0 16px 48px rgba(0,0,0,0.5); padding: 1.75rem 2.5rem; z-index: 200; width: 700px; max-width: 90vw; } .lp-mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 3rem; } .lp-mega-grid--3 { grid-template-columns: 1fr 1fr 1fr; } .lp-mega-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); font-weight: 600; padding: 0.25rem 0.5rem; margin-bottom: 0.25rem; } .lp-mega-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.5rem; border-radius: 8px; text-decoration: none; color: var(--color-text); transition: background 0.15s; } .lp-mega-item:hover { background: var(--color-surface-hover); } .lp-mega-icon { display: inline-block; width: 30px; height: 20px; vertical-align: middle; flex-shrink: 0; color: var(--color-text-muted); } .lp-mega-item strong { font-size: 0.8rem; font-weight: 600; display: block; } .lp-mega-item span { font-size: 0.7rem; color: var(--color-text-muted); display: block; margin-top: 1px; } /* Feature-Card groß */ .lp-feature-card { transition: all 0.25s; } .lp-feature-card:hover { border-color: rgba(139,92,246,0.3); transform: translateY(-2px); } /* Footer Grid */ .lp-footer { border-top: none; padding: 0; text-align: left; } .lp-footer a:hover { color: var(--color-primary); } /* === Responsive === */ @media (max-width: 768px) { .nav { flex-wrap: wrap; height: auto; padding: 0.75rem 1rem; } .nav-links { flex-wrap: wrap; width: 100%; } .nav-link--logout { margin-left: 0; } .container, .container--narrow, .container--wide { padding: 1rem; } .module-grid { grid-template-columns: 1fr 1fr; } .page-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; } .lp-hero h1 { font-size: 2.25rem; } .lp-hero-grid { grid-template-columns: 1fr !important; text-align: center; } .lp-hero-grid .lp-hero-cta { justify-content: center; } .lp-grid--3, .lp-grid--4, .lp-grid--5 { grid-template-columns: 1fr; } .lp-feature-grid { grid-template-columns: 1fr !important; } .lp-feature-grid .lp-card { grid-column: span 1 !important; grid-template-columns: 1fr !important; } .lp-steps { grid-template-columns: 1fr 1fr; gap: 1.5rem; } .lp-stats { grid-template-columns: repeat(2, 1fr); } .lp-footer-grid { grid-template-columns: 1fr 1fr !important; } .lp-contact-grid { grid-template-columns: 1fr !important; gap: 2rem !important; } .lp-funktionen-grid { grid-template-columns: 1fr !important; } .lp-nav-center { display: none; } .lp-nav-right { gap: 0.25rem; } }