/* ======================================== CINNext - Modern Design System testing light and dark mode ======================================== */ .ticket-create-wizard { overflow: hidden; } .ticket-create-progress { display: flex; gap: 0.5rem; margin-bottom: 1rem; } .ticket-create-progress span { flex: 1 1 0; height: 0.25rem; border-radius: 999px; background: var(--cin-border-secondary, #e5e7eb); } .ticket-create-progress span.is-active { background: var(--cin-primary, #1b3661); } .ticket-create-slider-wrap { overflow: hidden; } .ticket-create-slider { display: flex; width: 100%; transition: transform 220ms ease; } .ticket-create-step { flex: 0 0 100%; min-width: 100%; } .ticket-create-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.25rem; } .ticket-create-customer-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; } [data-bs-theme=light] { /* CIN Brand Colors */ /* --cin-primary: #1b3661; */ --cin-primary-hover: #152b4d; --cin-primary-light: #2a4875; /* --cin-secondary: #5b8def; */ /* Soft-UI Accent Colors */ --cin-soft-primary: #5B4DFF; --cin-soft-primary-light: #8B80FF; /* Modern Backgrounds */ --cin-background: #f3f4f6; --cin-background-rgb: 243, 244, 246; --cin-bg-secondary: #f9fafb; --cin-bg-tertiary: #f3f4f6; --cin-bg-elevated: #ffffff; /* Text Colors */ --cin-foreground: #111827; --cin-text-secondary: #6b7280; --cin-text-muted: #9ca3af; --cin-text-inverse: #ffffff; /* Borders */ --cin-border: #f1f5f9; --cin-border-secondary: #e5e7eb; --cin-thread-border: #e2e8f0; /* Shadows - Modern soft shadows */ --cin-shadow-xs: 0 1px 3px 0 rgb(0 0 0 / 0.05); --cin-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --cin-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --cin-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --cin-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); /* Spacing System */ --cin-spacing-xs: 0.5rem; --cin-spacing-sm: 0.75rem; --cin-spacing: 1rem; --cin-spacing-lg: 1.5rem; --cin-spacing-xl: 2rem; --cin-spacing-2xl: 3rem; /* Surface Colors - Tailwind: bg-white, bg-slate-50, bg-slate-100 */ --cin-surface: #ffffff; --cin-surface-subtle: #f9fafb; --cin-surface-raised: #f3f4f6; --cin-surface-hover: #f3f4f6; --cin-surface-active: #e5e7eb; /* Accent/Focus - Tailwind: bg-accent, ring */ --cin-accent: #f9fafb; --cin-accent-foreground: #111827; --cin-accent-soft: #e8f0ff; --cin-accent-hover: #0056a0; --cin-ring: #5B4DFF; /* Status/Semantic Colors - Tailwind: bg-green-600, bg-yellow-600, etc. */ --cin-success: #10b981; --cin-success-light: #d1fae5; --cin-warning: #f59e0b; --cin-warning-light: #fef3c7; --cin-danger: #ef4444; --cin-danger-light: #fee2e2; --cin-info: #3b82f6; --cin-info-light: #dbeafe; /* Ticket Status Colors - Communication Module */ --cin-ticket-open: #fbbf24; --cin-ticket-progress: #3b82f6; --cin-ticket-waiting: #9ca3af; --cin-ticket-customer: #fb923c; --cin-ticket-approved: #10b981; --cin-ticket-closed: #059669; --cin-task-review: #8b5cf6; /* Avatar */ --cin-avatar-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* CRM Tags */ --cin-tag-font-weight: 500; /* Communication/Chat Colors */ --cin-chat-sent: #1b3661; --cin-chat-received: #f3f4f6; --cin-chat-system: #fef3c7; /* Bootstrap Variables — now managed in bs-override/bootstrap.scss */ /* Legacy */ --nav-tabs-link-active-color: #000; --icon-eye-closed: url('data:image/svg+xml,'); } [data-bs-theme=dark] { /* Native form controls (select dropdown panels, date pickers, scrollbars) follow the dark theme instead of rendering a white UA panel with the inherited light text. */ color-scheme: dark; /* CIN Brand Colors */ /* --cin-primary: #5b8def; */ --cin-primary-hover: #4a7cd8; --cin-primary-light: #6c9df0; /* --cin-secondary: #8ba3e0; */ /* Soft-UI Accent Colors */ --cin-soft-primary: #7B6DFF; --cin-soft-primary-light: #9B90FF; /* Modern Backgrounds */ --cin-background: #0d1117; --cin-background-rgb: 13, 17, 23; --cin-bg-secondary: #161b22; --cin-bg-tertiary: #1f2937; --cin-bg-elevated: #1f2937; /* Text Colors */ --cin-foreground: #e6edf3; --cin-text-secondary: #9ca3af; --cin-text-muted: #6b7280; --cin-text-inverse: #0d1117; /* Borders */ --cin-border: #30363d; --cin-border-secondary: #21262d; --cin-thread-border: #3b4252; /* Shadows - Darker for dark mode */ --cin-shadow-xs: 0 1px 3px 0 rgb(0 0 0 / 0.3); --cin-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4); --cin-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5); --cin-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.6), 0 4px 6px -4px rgb(0 0 0 / 0.6); --cin-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.7), 0 8px 10px -6px rgb(0 0 0 / 0.7); /* Spacing System */ --cin-spacing-xs: 0.5rem; --cin-spacing-sm: 0.75rem; --cin-spacing: 1rem; --cin-spacing-lg: 1.5rem; --cin-spacing-xl: 2rem; --cin-spacing-2xl: 3rem; /* Surface Colors - Tailwind: bg-white, bg-slate-50, bg-slate-100 */ --cin-surface: #161b22; --cin-surface-subtle: #1f2937; --cin-surface-raised: #2a2d35; --cin-surface-hover: #1f2937; --cin-surface-active: #2a2d35; /* Accent/Focus - Tailwind: bg-accent, ring */ --cin-accent: #1f2937; --cin-accent-foreground: #e6edf3; --cin-accent-soft: #1a2942; --cin-accent-hover: #4a7cd8; --cin-ring: #7B6DFF; /* Status/Semantic Colors - Tailwind: bg-green-600, bg-yellow-600, etc. */ --cin-success: #10b981; --cin-success-light: #064e3b; --cin-warning: #f59e0b; --cin-warning-light: #422006; --cin-danger: #ef4444; --cin-danger-light: #450a0a; --cin-info: #3b82f6; --cin-info-light: #172554; /* Ticket Status Colors - Communication Module */ --cin-ticket-open: #fbbf24; --cin-ticket-progress: #3b82f6; --cin-ticket-waiting: #9ca3af; --cin-ticket-customer: #fb923c; --cin-ticket-approved: #10b981; --cin-ticket-closed: #059669; --cin-task-review: #a78bfa; /* CRM Tags */ --cin-tag-font-weight: 500; /* Communication/Chat Colors */ --cin-chat-sent: #5b8def; --cin-chat-received: #1f2937; --cin-chat-system: #422006; /* Bootstrap Variables — now managed in bs-override/bootstrap.scss */ --bs-border-color: var(--cin-border); /* Legacy */ --nav-tabs-link-active-color: #fff; --icon-eye-closed: url('data:image/svg+xml,'); } /* Firefox */ @supports (-moz-appearance: none) { * { scrollbar-width: thin; scrollbar-color: rgba(var(--bs-primary-rgb), 0.5) rgba(var(--bs-primary-rgb), 0.3); } .dropdown-menu { scrollbar-color: rgba(var(--bs-primary-rgb), 0.5) var(--bs-dropdown-bg); } } /* Chrome, Edge und Safari */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { box-shadow: inset 0 0 0 3px rgba(var(--bs-primary-rgb), 0.3); border-radius: 5px; } ::-webkit-scrollbar-thumb { border-radius: 5px; box-shadow: inset 0 0 0 6px rgba(var(--bs-primary-rgb), 0.5); cursor: grab; } /* Paint behind the scrollbar gutter, including the rounded ends of the menu. */ .dropdown-menu { background-clip: border-box; } /* Keep the opaque scroll track inside the menu's rounded corners. */ .dropdown-menu::-webkit-scrollbar { background-color: transparent; } .dropdown-menu::-webkit-scrollbar-track { background-color: var(--bs-dropdown-bg); margin-top: max(var(--bs-dropdown-padding-y), var(--bs-dropdown-border-radius)); margin-bottom: max(var(--bs-dropdown-padding-y), var(--bs-dropdown-border-radius)); } /* Drag'n'Drop */ .drag-handle { cursor: grab; color: rgba(var(--bs-emphasis-color-rgb), .45); transition: color .2s ease; &:focus, &:hover { color: rgba(var(--bs-emphasis-color-rgb), .75); } &:active { cursor: grabbing; } } /* Login / Auth */ .authentication-divider::after { position: absolute; left: 0; right: 0; height: 1px; content: ""; background-color: var(--bs-primary); } /* Navigation */ .nav-tabs .nav-link { color: var(--nav-tabs-link-active-color) !important; } .nav-tabs .nav-link.active { color: var(--bs-link-color) !important; } /* Nav Line (Underline Tabs) */ .nav.nav-line { border-bottom: 1px solid var(--bs-border-color); scrollbar-width: none; min-height: fit-content; /* Detail tabs (Kommunikation/Intern/Aufgaben/Historie): keep on one row and scroll sideways when they don't fit — essential in the popup/mobile detail where this is the only tab switcher. */ flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; &::-webkit-scrollbar { display: none; } .nav-item { flex-shrink: 0; } .nav-link { border: 0; border-bottom: 2px solid transparent; /* margin-bottom: -1px; */ padding: var(--cin-spacing-xs) var(--cin-spacing); color: var(--cin-text-secondary); background: transparent; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; &:hover, &:focus { color: var(--cin-foreground); border-bottom-color: var(--bs-primary); border-bottom-width: 1px; } &.active { color: var(--cin-foreground); border-bottom-color: var(--bs-primary); font-weight: 600; } &.disabled { color: var(--cin-text-muted); border-bottom-color: transparent; } } } html, body { overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .crm-db-outage-banner { position: fixed; top: 0.75rem; left: 50%; z-index: 2105; width: min(calc(100% - 1.5rem), 46rem); transform: translateX(-50%); pointer-events: none; } .crm-db-outage-banner[hidden] { display: none !important; } .crm-db-outage-banner__inner { display: flex; align-items: center; gap: 0.75rem; min-height: 3.25rem; padding: 0.625rem 0.875rem; border: 1px solid color-mix(in srgb, var(--bs-warning) 50%, var(--bs-border-color)); border-radius: 0.5rem; color: var(--bs-body-color); background: color-mix(in srgb, var(--bs-warning) 16%, var(--bs-body-bg)); box-shadow: var(--cin-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1)); pointer-events: auto; } .crm-db-outage-banner .bi { flex: 0 0 auto; color: var(--bs-warning-text-emphasis, #8a6d3b); font-size: 1.35rem; } .crm-db-outage-banner__copy { display: grid; gap: 0.125rem; min-width: 0; } .crm-db-outage-banner__copy strong, .crm-db-outage-banner__copy span { overflow-wrap: anywhere; } .crm-db-outage-banner__copy span, .crm-db-outage-banner__retry { color: var(--bs-secondary-color); font-size: 0.875rem; line-height: 1.35; } .crm-db-outage-banner__retry { margin-left: auto; white-space: nowrap; } @media (max-width: 575.98px) { .crm-db-outage-banner { top: 0.5rem; width: calc(100% - 1rem); } .crm-db-outage-banner__inner { align-items: flex-start; } .crm-db-outage-banner__retry { display: none; } } p { margin-bottom: var(--cin-spacing); line-height: 1.6; } small, .text-small { font-size: 0.875rem; color: var(--cin-text-secondary); } normal, .text-normal { font-size: 1rem; color: var(--cin-text-secondary); } @media (min-width: 768px) { .layout-shell { height: 100dvh !important; } #main { -webkit-overflow-scrolling: touch; } } /* ======================================== Modern Layout System ======================================== */ /* Topbar Styles */ .topbar { flex-shrink: 0; /* Verhindere, dass Topbar schrumpft */ z-index: 1020; } .topbar .btn-light { /* background-color: var(--cin-bg-secondary); */ border: 1px solid var(--cin-border); } .topbar .btn-light:hover { background-color: var(--cin-bg-tertiary); transform: translateY(-1px); } .avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; /* font-size: 14px; */ } .topbar #global-username { font-weight: 600; color: var(--cin-text-primary); font-size: 0.9375rem; } .profile-status-indicator { --profile-status-color: #16a34a; background-color: var(--profile-status-color) !important; transition: background-color 0.18s ease, opacity 0.18s ease; &[data-state="online"] { --profile-status-color: #16a34a; } &[data-state="pause"] { --profile-status-color: #d97706; } &[data-state="date"] { --profile-status-color: #0284c7; } &[data-state="absent"] { --profile-status-color: #6b7280; } &[data-state="dnd"] { --profile-status-color: #dc2626; } &[data-state="offline"] { --profile-status-color: #6b7280; } &.is-offline { opacity: 0.45; } } #my-status { /* --profile-status-color: #16a34a; */ box-shadow: inset 0px 0px 8px 3px var(--profile-status-color); &[data-state="pause"] { --profile-status-color: #d97706; } &[data-state="date"] { --profile-status-color: #0284c7; } &[data-state="absent"] { --profile-status-color: #6b7280; } &[data-state="dnd"] { --profile-status-color: #dc2626; } &[data-state="offline"] { --profile-status-color: #6b7280; } } [data-mobile-topbar-actions] { min-width: 0; } [data-mobile-topbar-actions]>#searchform { min-width: 0; } [data-mobile-topbar-actions]>#searchform>[data-mobile-search-toggle], [data-mobile-topbar-actions]>#global-new>button, [data-mobile-topbar-actions]>#profile>[data-profile-button] { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; } [data-mobile-topbar-actions]>#profile>[data-profile-button] { border-width: 2px; border-color: var(--profile-status-color, var(--bs-primary)); } [data-mobile-topbar-actions] .profile-status-indicator { display: none; } [data-mobile-topbar-actions] #search { width: min(46vw, 13rem); } [data-mobile-topbar-actions] #search-dropdown .dropdown-menu { min-width: min(92vw, 24rem); } /* Modern Card Styles */ .card { &.card-shadow { transition: box-shadow 0.2s ease, transform 0.2s ease; &:hover { box-shadow: var(--box-shadow); /* box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); */ } } .card-header:first-child { /* border-radius: var(--bs-border-radius-xl) var(--bs-border-radius-xl) 0 0; */ } .card-footer { background-color: transparent; border-top: 1px solid var(--cin-border); padding: var(--cin-spacing-lg); } } /* Sidebar Styles — now in bs-override/bootstrap.sidebar.scss */ .multi-button.control-next { right: calc(var(--bs-card-spacer-x) + .5rem); position: absolute; top: 0; bottom: 0; z-index: 1; height: auto; } .multi-button.control-next button { position: absolute; right: 0; bottom: 0; display: flex; align-items: center; } .input-group-prepend { -webkit-box-flex: 0; flex: 0 0 24%; flex-grow: 0; flex-shrink: 0; flex-basis: 24%; max-width: 24%; } .icon.icon-primary { color: var(--bs-primary); } button.anim:not(:disabled) .icon.icon-primary { animation-name: opacity_change; animation-duration: 3s; animation-iteration-count: 1; animation-direction: normal; } *:disabled .icon.icon-primary { opacity: 0.5; } @keyframes opacity_change { 0% { opacity: 1; } 25% { opacity: .5; } 50% { opacity: 1; } 75% { opacity: .5; } 100% { opacity: 1; } } .btn-password-action { position: absolute; top: 3px; width: 28px; height: 30px; background: 0; border: 0; } [data-passwordtogglefor] { /* background-color: var(--bs-btn-disabled-bg); -webkit-mask-image: var(--icon-eye-closed) !important; mask-image: var(--icon-eye-closed) !important; */ right: 4px; z-index: 9; } [data-passwordrandomizefor] { right: 32px; z-index: 9; } [type="password"], [aria-type=password][type="text"] { padding-right: calc(1.5em + 0.75rem); background-repeat: no-repeat; background-position: right calc(0.375em + 0.1875rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } .btn-password-action { /* -webkit-mask-position: right 36px center, right 8px center; */ mask-position: center center; mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-repeat: no-repeat; /* -webkit-mask-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); */ } .input-group:has([type="password"]) button[data-passwordtogglefor] { background-color: var(--bs-primary, #000); -webkit-mask-image: url('data:image/svg+xml,') !important; mask-image: url('data:image/svg+xml,') !important; } .input-group:has([aria-type=password][type="text"]) button[data-passwordtogglefor] { background-color: var(--bs-primary, #000); -webkit-mask-image: url('data:image/svg+xml,') !important; mask-image: url('data:image/svg+xml,') !important; } [type="password"]~button[data-passwordtogglefor] { background-color: var(--bs-primary, #000); -webkit-mask-image: url('data:image/svg+xml,') !important; mask-image: url('data:image/svg+xml,') !important; } [aria-type=password][type="text"]~button[data-passwordtogglefor] { background-color: var(--bs-primary, #000); -webkit-mask-image: url('data:image/svg+xml,') !important; mask-image: url('data:image/svg+xml,') !important; } button[data-passwordrandomizefor] { background-color: var(--bs-primary, #000); -webkit-mask-image: url('data:image/svg+xml,') !important; mask-image: url('data:image/svg+xml,') !important; } input[type=password].password-create, input[type=text][aria-type=password].password-create, .was-validated input[type=password].password-create.form-control:invalid, .was-validated input[type=password].password-create.form-control.is-invalid, .was-validated input[type=text][aria-type=password].password-create.form-control:invalid, .was-validated input[type=text][aria-type=password].password-create.form-control.is-invalid, .was-validated input[type=password].password-create.form-control:valid, .was-validated input[type=password].password-create.form-control.is-valid, .was-validated input[type=text][aria-type=password].password-create.form-control:valid, .was-validated input[type=text][aria-type=password].password-create.form-control.is-valid { padding-right: calc(1.5em + 0.75rem + 28px); } .was-validated input[type=password].form-control:invalid, .was-validated input[type=password].form-control.is-invalid, .was-validated input[type=text][aria-type=password].form-control:invalid, .was-validated input[type=text][aria-type=password].form-control.is-invalid, .was-validated input[type=password].form-control:valid, .was-validated input[type=password].form-control.is-valid, .was-validated input[type=text][aria-type=password].form-control:valid, .was-validated input[type=text][aria-type=password].form-control.is-valid { background-position: right 0.15rem top 0.15rem; background-size: 0.75rem 0.75rem; } .card-body>.bs-progress { border-top-left-radius: var(--bs-card-border-radius); border-top-right-radius: var(--bs-card-border-radius); } .icon-link>.bi { height: unset; } /* .bi { vertical-align: -0.125em; fill: currentColor; } */ .FileDropperBS .bi { width: 1rem; height: 1rem; } .btn-circle { width: 30px; height: 30px; text-align: center; padding: 0; font-size: 12px; line-height: 1.428571429; border-radius: 15px; } .btn-circle.btn-lg { width: 50px; height: 50px; padding: 0; font-size: 18px; line-height: 1.33; border-radius: 25px; } .btn-circle.btn-xl { width: 70px; height: 70px; padding: 0; font-size: 24px; line-height: 1.33; border-radius: 35px; } .btn-circle .icon { vertical-align: sub; } /** Dashboard Widgets */ .dashboard-widgets-editing #dashboard-widgets.grid-stack>.grid-stack-item>.grid-stack-item-content { cursor: grab; } #dashboard-widgets.grid-stack { min-height: 12.5rem; } #dashboard-widgets.grid-stack>.grid-stack-item>.grid-stack-item-content { height: auto !important; min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; position: absolute; inset: 5px; } #dashboard-widgets.grid-stack>.grid-stack-item>.grid-stack-item-content>* { width: 100%; height: 100%; min-width: 0; min-height: 0; } #dashboard-widgets.grid-stack>.dashboard-widget-item.grid-stack-item { position: absolute !important; transition: opacity 0.2s ease !important; } #dashboard-widgets.grid-stack .grid-stack-placeholder>.placeholder-content { border-radius: var(--bs-border-radius-xl); background: rgba(var(--cin-background-rgb), 0.45); border: 2px dashed rgba(var(--bs-primary-rgb), 0.25); } #dashboard-widgets.grid-stack .ui-resizable-handle, #dashboard-widgets.grid-stack .gs-resize-handle { opacity: 0; transition: opacity 0.2s ease; } .dashboard-widgets-editing #dashboard-widgets.grid-stack .ui-resizable-handle, .dashboard-widgets-editing #dashboard-widgets.grid-stack .gs-resize-handle { opacity: 1; } .dashboard-widget-item { transition: opacity 0.2s ease, transform 0.2s ease; } .dashboard-widget-item:not(.grid-stack-item) { position: relative; } .dashboard-widget-surface { width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; } .dashboard-widget-content { width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: auto; } .dashboard-widget-content-stage { width: 100%; min-width: 100%; height: 100%; min-height: 100%; } .dashboard-widget-preview, .dashboard-widget-error { display: flex; width: 100%; height: 100%; min-width: 0; min-height: 0; align-items: center; justify-content: center; gap: 0.75rem; padding: 1.5rem; color: var(--cin-text-muted); text-align: center; } .dashboard-widget-preview i { font-size: 2rem; } .dashboard-widget-error { color: var(--bs-danger); } /* Widget Visibility Toggle Button (Eye Icon) - Bottom Right */ .dashboard-widget-visibility-toggle { position: absolute; bottom: 0.5rem; right: 4.5rem; z-index: 10; opacity: 0; transition: opacity 0.2s ease, background-color 0.2s ease; padding: 0.25rem 0.5rem; border-radius: 0.25rem; } .dashboard-widget-visibility-toggle i { font-size: 1rem; } /* Buttons nur im Edit-Mode zeigen */ .dashboard-widgets-editing .dashboard-widget-visibility-toggle { opacity: 1; } .dashboard-widget-visibility-toggle:hover { opacity: 1 !important; background-color: rgba(var(--bs-secondary-rgb), 0.2); } /* Inaktives Widget (visuelles Feedback im Edit-Mode) */ .dashboard-widget-inactive { opacity: 0.5; } .dashboard-widget-inactive::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0, 0.05) 10px, rgba(0, 0, 0, 0.05) 20px); pointer-events: none; border-radius: inherit; } .dashboard-widgets-editing .dashboard-widget-item[draggable="true"] { cursor: grab; user-select: none; } .dashboard-widget-dragging { opacity: 0.65; cursor: grabbing !important; } .dashboard-widget-drop-target::after { content: ''; position: absolute; inset: 0.5rem; border: 2px dashed rgba(13, 110, 253, 0.5); border-radius: 0.75rem; pointer-events: none; } .dashboard-widgets-editing .dashboard-widget-item { position: relative; } .dashboard-widgets-editing #dashboard-widgets.grid-stack>.dashboard-widget-item.grid-stack-item { position: absolute !important; } .dashboard-widget-resize-handle { position: absolute; bottom: 0.5rem; right: 2rem; z-index: 10; opacity: 0; transition: opacity 0.2s ease, background-color 0.2s ease; padding: 0.25rem 0.5rem; border-radius: 0.25rem; cursor: nwse-resize; } .dashboard-widget-resize-handle svg { width: 1rem; height: 1rem; } .dashboard-widgets-editing .dashboard-widget-resize-handle { opacity: 1; } .dashboard-widget-resize-handle:hover { opacity: 1 !important; background-color: rgba(var(--bs-secondary-rgb), 0.2); } .dashboard-widget-resize-handle:active { transform: scale(0.95); } .dashboard-widget-resizing { opacity: 0.85; outline: 2px dashed var(--bs-primary); outline-offset: 2px; transition: outline 0.1s ease; } /** Accordion */ /** Modals */ /* CRM.modal.on() opens .window-modal — a standard centered Bootstrap modal (NOT .side-modal, which is the slide-in side panel). Widen the DEFAULT/md modal to 520px via Bootstrap's own width variable so .modal-dialog picks it up (incl. inside its min-width media query). Sizes sm/lg/xl are excluded so they keep their own widths. */ .window-modal:not(.modal-sm):not(.modal-lg):not(.modal-xl) { --bs-modal-width: 520px; } .side-modal { --bs-modal-zindex: 1055; --bs-modal-width: 500px; --bs-modal-padding: 1rem; --bs-modal-margin: 0.5rem; --bs-modal-color: ; --bs-modal-bg: var(--bs-body-bg); --bs-modal-border-color: var(--bs-border-color-translucent); --bs-modal-border-width: var(--bs-border-width); --bs-modal-border-radius: var(--bs-border-radius-lg); --bs-modal-box-shadow: var(--bs-box-shadow-sm); --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - (var(--bs-border-width))); --bs-modal-header-padding-x: 1rem; --bs-modal-header-padding-y: 1rem; --bs-modal-header-padding: 1rem 1rem; --bs-modal-header-border-color: var(--bs-border-color); --bs-modal-header-border-width: var(--bs-border-width); --bs-modal-title-line-height: 1.5; --bs-modal-footer-gap: 0.5rem; --bs-modal-footer-bg: ; --bs-modal-footer-border-color: var(--bs-border-color); --bs-modal-footer-border-width: var(--bs-border-width); outline: 0; background-color: var(--bs-body-bg); position: fixed; top: 0; min-height: 100dvh; width: 100%; right: -100%; transition: right 0.5s cubic-bezier(.17, .67, .83, .67); z-index: var(--bs-modal-zindex); } .side-modal.show { right: 0%; } /* Slot-Breiten (Zwischen-Step MS): Slide 1 = 75 %, Slide 2 = 65 %, ab Slide 3 = 55 %. data-slot wird beim Öffnen gesetzt. Off-screen bleibt einheitlich right:-100% (100 % der Viewport-Breite schiebt jede Breite ganz raus). Mobil (< 768px) greift keine Regel → Basis 100 %. */ @media (min-width: 768px) { .side-modal[data-slot="1"] { width: 75%; } .side-modal[data-slot="2"] { width: 65%; } .side-modal[data-slot="3"] { width: 55%; } } .side-modal-content { position: relative; display: flex; flex-direction: column; width: 100%; color: var(--bs-modal-color); pointer-events: auto; background-color: var(--bs-modal-bg); background-clip: padding-box; outline: 0; } /* Modal Backdrops — Overlay-Stack (Zwischen-Step MS): GENAU EIN geteilter Backdrop (#crm-overlay-backdrop). Weil es physisch nur einen Blur-Knoten gibt, kann sich der Blur bei beliebig vielen (N) gestapelten Overlays NIE verstärken. Der Stack-Manager in Application.js setzt dessen z-index (oberstes Overlay minus 5) und toggelt .show. Der frühere `.modal-backdrop.show + .modal-backdrop.show`-Geschwister-Hack (nur für exakt 2) entfällt ersatzlos. Farbe tokenisiert für Light + Dark (keine Hardcoded Colors). */ [data-bs-theme="light"] { --cin-overlay-backdrop: rgba(255, 255, 255, 0.3); } [data-bs-theme="dark"] { --cin-overlay-backdrop: rgba(0, 0, 0, 0.45); } #crm-overlay-backdrop:not(.show) { display: none !important; } .modal-backdrop.show { background-color: var(--cin-overlay-backdrop, rgba(255, 255, 255, 0.3)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Klon-Quellen der Basis-Shells (modal.tpl / side-modal.tpl) sind nie sichtbar. */ #crm-overlay-templates { display: none !important; } /* Modal Header/Footer: grauer Hintergrund — theme-aware, der alte Hex-Wert #f3f4f678 blieb im Dark-Mode hell und machte transparente Selects unlesbar (helle Schrift auf hellem Grund). */ .window-modal .modal-header, .window-modal .modal-footer { background-color: var(--cin-surface-raised); } .window-modal .modal-body { background-color: var(--cin-surface-raised); } /* This menu participates in the modal layout; Popper must not offset it a second time. */ .communication-ticket-link .dropdown-menu { transform: none !important; } /* .window-modal .modal-body .form-control, .window-modal .modal-body .form-select, .window-modal .modal-body .border.rounded { background-color: var(--cin-surface, #fff); } */ /* Email compose */ .email-compose-layout { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "fields" "editor" "attachments"; gap: 1rem; min-width: 0; } .email-compose-fields { grid-area: fields; } .email-compose-editor-column { grid-area: editor; } .email-compose-divider { grid-area: divider; } .email-compose-attachments { grid-area: attachments; } .permission-preset-toolbar { width: 22rem; max-width: 100%; min-height: 2.25rem; border-bottom: var(--bs-border-width) solid var(--bs-border-color); } .permission-preset-toolbar:focus-within { border-bottom-color: var(--bs-primary); } .permission-preset-toolbar .permission-preset-field { width: 0; min-width: 0; } .permission-preset-toolbar .permission-preset-field .form-control { min-width: 0; min-height: 2.25rem; padding: .375rem 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: .875rem; } .permission-preset-field > .dropdown-toggle-split { display: none; } .permission-preset-toolbar .permission-preset-action { flex: 0 0 6.25rem; padding-inline: .25rem; white-space: nowrap; } .permission-preset-toolbar .permission-preset-delete { flex: 0 0 2rem; padding-inline: .25rem; } .permission-preset-field .dropdown-menu { min-width: 100%; width: 18rem; max-width: calc(100vw - 2rem); } .permission-preset-field .dropdown-item { white-space: normal; overflow-wrap: anywhere; } .email-compose-recipient-line { min-width: 0; } .email-compose-subject-line, .email-compose-subject-control { min-width: 0; } .email-compose-subject-control .form-control { border-bottom-right-radius: 0; } .email-compose-subject-options-toggle { display: flex; width: 3rem; min-width: 3rem; height: calc(3.5rem + 2px); align-items: center; justify-content: center; padding: 0; border: 0; border-bottom: var(--bs-border-width) solid var(--bs-border-color); border-radius: 0; box-shadow: none; color: var(--bs-body-color); text-decoration: none; } .email-compose-subject-options-toggle:hover { border-bottom-color: var(--bs-border-color); color: var(--bs-primary); } .email-compose-subject-line:focus-within .email-compose-subject-options-toggle { border-bottom-color: var(--bs-primary); } .email-compose-subject-options-menu { width: max-content; min-width: 15rem; max-width: min(20rem, calc(100vw - 1rem)); } .email-compose-subject-options-menu legend { float: none; width: auto; font-size: inherit; } .email-compose-subject-options-menu .form-check-label { cursor: pointer; } .email-compose-ccbcc-toggle { flex: 0 0 auto; border: 0; border-bottom: var(--bs-border-width) solid var(--bs-border-color); border-radius: 0; box-shadow: none; } .email-compose-ccbcc-toggle:hover { border-bottom-color: var(--bs-border-color); } .email-compose-ccbcc-toggle:focus-visible, .email-compose-recipient-line:has(#toDropdown :focus) .email-compose-ccbcc-toggle { border-bottom-color: var(--bs-primary); } .email-compose-layout-toggle .bi-layout-split { display: inline-block; transition: transform .2s ease; } .email-compose-layout-toggle .email-compose-layout-icon-stacked { transform: rotate(90deg); } .email-compose-editor-shell { display: flex; flex-direction: column; min-height: clamp(320px, 42vh, 520px); overflow: visible; } .email-compose-form .ql-toolbar.ql-snow { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: flex-start; max-width: 100%; white-space: normal; border: 0; border-bottom: var(--bs-border-width) solid var(--bs-border-color); } .email-compose-form .ql-toolbar.ql-snow .ql-formats { flex: 0 0 auto; } .email-compose-form .ql-toolbar.ql-snow .kb-table-controls { position: relative; } .email-compose-form .ql-toolbar.ql-snow .kb-table-menu { --bs-dropdown-min-width: 19rem; width: 20rem; max-width: calc(100vw - 2rem); color: var(--bs-body-color); white-space: normal; z-index: var(--bs-dropdown-zindex); } .email-compose-form .ql-toolbar.ql-snow .kb-table-menu button.btn { display: inline-flex; float: none; align-items: center; justify-content: center; width: auto; min-width: 0; height: auto; min-height: 1.9375rem; padding: .25rem .5rem; color: var(--bs-btn-color); background-color: var(--bs-btn-bg); border: var(--bs-btn-border-width) solid var(--bs-btn-border-color); } .email-compose-form .ql-toolbar.ql-snow .kb-table-menu button.btn.w-100 { width: 100% !important; } .email-compose-form .ql-toolbar.ql-snow .kb-table-menu .kb-table-border-color { flex: 0 0 2.5rem; width: 2.5rem; height: 1.9375rem; padding: .125rem; } .email-compose-form .email-compose-editor-quill.ql-container.ql-snow { display: flex; flex: 1 1 auto; flex-direction: column; min-height: clamp(220px, 42vh, 520px); height: clamp(220px, 42vh, 520px) !important; border: 0; } .email-compose-editor-quill .ql-editor { flex: 1 1 auto; min-height: 0; max-width: 100%; overflow: auto; overflow-wrap: anywhere; } .email-compose-editor-quill .ql-editor .email-compose-reply-history { cursor: default; user-select: text; } .email-compose-editor-quill .ql-editor table { width: fit-content; min-width: 0; max-width: 100%; border-collapse: collapse; table-layout: auto; } .email-compose-editor-quill .ql-editor td { border: 1px solid var(--bs-border-color); padding: .3rem .6rem; overflow-wrap: anywhere; word-break: break-word; vertical-align: top; } .email-compose-editor-quill .ql-editor table:has(td[data-kb-table-width="stretch"]) { width: 100%; min-width: 100%; table-layout: fixed; } .email-compose-editor-quill .ql-editor table:has(td[style*="border-color: transparent"]):hover td[style*="border-color: transparent"] { border-color: var(--bs-border-color) !important; border-style: dashed; } .email-compose-form .ql-toolbar button.ql-table.ql-active { color: var(--bs-primary); } .email-compose-editor-text { height: clamp(220px, 42vh, 520px); min-height: 220px; resize: vertical; } .email-compose-mobile-attachment-backdrop, .email-compose-mobile-attachment-sheet { display: none; } @media (min-width: 1200px) { .modal-body:has(.email-compose-form.email-compose-layout-split) { min-height: 0; overflow: hidden; } .modal-body:has(.email-compose-form.email-compose-layout-split)>.email-compose, .email-compose-form.email-compose-layout-split, .email-compose-form.email-compose-layout-split .email-compose-layout { height: 100%; min-height: 0; } .email-compose-form.email-compose-layout-split .email-compose-layout { grid-template-columns: minmax(0, 2fr) auto minmax(18rem, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "editor divider fields" "editor divider attachments"; } .email-compose-form.email-compose-layout-split .email-compose-divider { align-self: stretch; height: 100%; min-height: 0; } .email-compose-form.email-compose-layout-stacked .email-compose-divider { display: none !important; } .email-compose-form.email-compose-layout-split .email-compose-mailbox-field, .email-compose-form.email-compose-layout-split .email-compose-recipient-field, .email-compose-form.email-compose-layout-split .email-compose-cc-field, .email-compose-form.email-compose-layout-split .email-compose-bcc-field { width: 100%; } .email-compose-form.email-compose-layout-split .email-compose-editor-column, .email-compose-form.email-compose-layout-split .email-compose-attachments { min-height: 0; } .email-compose-form.email-compose-layout-split .email-compose-attachments { overflow-y: auto; } .email-compose-form.email-compose-layout-split .email-compose-editor-shell { height: 100%; min-height: 0; overflow: visible !important; } .email-compose-form.email-compose-layout-split .email-compose-editor-quill.ql-container, .email-compose-form.email-compose-layout-split .email-compose-editor-text { flex: 1 1 auto; height: auto !important; min-height: 0; resize: none; } } @media (max-width: 1199.98px) { .email-compose-layout-toggle { display: none; } } @media (max-width: 767.98px) { .email-compose-modal .modal-dialog { width: 100vw; max-width: none; height: var(--email-compose-visual-height, 100dvh); max-height: var(--email-compose-visual-height, 100dvh); margin: 0 !important; padding: 0 !important; } .email-compose-modal .modal-content { height: 100%; max-height: 100%; overflow: hidden; border: 0; border-radius: 0; } .email-compose-modal .modal-header, .email-compose-modal .modal-footer { flex: 0 0 auto; } .email-compose-modal .modal-body { display: block !important; min-height: 0; overflow-x: hidden; overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .email-compose-modal .modal-body>.email-compose, .email-compose-modal .email-compose-form, .email-compose-modal .email-compose-layout { height: auto !important; min-height: 0; overflow: visible; } .email-compose-modal .email-compose-layout { grid-template-areas: "fields" "editor"; gap: .75rem; } .email-compose-modal .email-compose-attachments { display: none; } .email-compose-modal .email-compose-editor-column, .email-compose-modal .email-compose-editor-shell { min-height: 0; overflow: visible; } .email-compose-modal .email-compose-editor-quill.ql-container.ql-snow { display: block; height: auto !important; min-height: 0; overflow: visible; } .email-compose-modal .email-compose-editor-quill .ql-editor { height: auto; min-height: clamp(12rem, 35dvh, 22rem); overflow: visible; } .email-compose-modal .email-compose-editor-text-wrap { min-height: 0; } .email-compose-modal .email-compose-editor-text { height: clamp(12rem, 35dvh, 22rem); min-height: 12rem; } .email-compose-modal .email-compose-form:not(.email-compose-mobile-history-expanded) .email-compose-reply-history, .email-compose-modal .email-compose-form:not(.email-compose-mobile-history-expanded) .ql-editor p:has(+ .email-compose-reply-history) { display: none; } .email-compose-mobile-history-toggle { min-height: 2.75rem; padding-inline: 0; } .email-compose-modal .modal-footer { gap: .5rem; padding-bottom: max(var(--bs-modal-padding), env(safe-area-inset-bottom)); } .email-compose-modal .modal-footer .button-cancel { display: none; } .email-compose-mobile-attachments-toggle, .email-compose-modal .modal-footer .btn { min-height: 2.75rem; } .email-compose-mobile-attachments-toggle { display: inline-flex; align-items: center; gap: .375rem; } .email-compose-mobile-attachment-backdrop { position: absolute; inset: 0; z-index: 4; display: block; visibility: hidden; background: rgba(var(--bs-black-rgb), .45); opacity: 0; pointer-events: none; transition: opacity .2s ease, visibility .2s ease; } .email-compose-mobile-attachment-backdrop.show { visibility: visible; opacity: 1; pointer-events: auto; } .email-compose-mobile-attachment-sheet { position: absolute; right: 0; bottom: 0; left: 0; z-index: 5; display: flex; flex-direction: column; max-height: min(70%, 32rem); padding-bottom: env(safe-area-inset-bottom); visibility: hidden; color: var(--bs-body-color); background: var(--bs-body-bg); border-top: var(--bs-border-width) solid var(--bs-border-color); border-radius: 1rem 1rem 0 0; box-shadow: 0 -.5rem 1.5rem rgba(var(--bs-black-rgb), .2); transform: translateY(100%); pointer-events: none; transition: transform .2s ease, visibility .2s ease; } .email-compose-mobile-attachment-sheet.show { visibility: visible; transform: translateY(0); pointer-events: auto; } .email-compose-mobile-attachment-sheet-body { min-height: 0; overscroll-behavior: contain; } .email-compose-mobile-attachments-close { flex: 0 0 auto; width: 2.75rem; height: 2.75rem; background-size: 1rem; } .email-compose-mobile-attachment-sheet .email-compose-attachment-remove { width: 2.75rem; height: 2.75rem; } .email-compose-form .ql-toolbar.ql-snow .kb-table-menu { position: fixed !important; inset: 1rem !important; width: auto; max-width: none; height: max-content; max-height: calc(100vh - 2rem); transform: none !important; overflow-y: auto; } .email-compose-editor-shell, .email-compose-editor-text { min-height: 300px; } .email-compose-editor-quill.ql-container { min-height: 200px; height: 200px !important; } .email-compose-editor-quill .ql-editor { min-height: 0; } .email-compose-editor-text { height: 200px; } .email-compose-modal .email-compose-editor-shell, .email-compose-modal .email-compose-editor-quill.ql-container { height: auto !important; min-height: 0; } .email-compose-modal .email-compose-editor-text { height: clamp(12rem, 35dvh, 22rem); min-height: 12rem; } } @media (max-width: 767.98px) and (prefers-reduced-motion: reduce) { .email-compose-mobile-attachment-backdrop, .email-compose-mobile-attachment-sheet { transition: none; } } /** PAGES */ /* address | contact | order info */ #address-info-list .card.btype, #contact-info-list .card.btype, #order-info-list .card.btype { border-color: var(--bs-primary); } #address-info-list .card[data-color=warning], #contact-info-list .card[data-color=warning], #order-info-list .card[data-color=warning] { border-color: var(--bs-warning); } [data-droppable].hovered { border: 2px dashed var(--cin-foreground); } #matching-table tr.import-mapping-drop-row>* { background-color: color-mix(in sRGB, var(--bs-info) 35%, var(--bs-body-bg)) !important; } [data-droppable="true"], [data-droppable="1"] { background-color: color-mix(in sRGB, var(--bs-success) 50%, white 50%); } [data-droppable=false], [data-droppable=0] { background-color: color-mix(in sRGB, var(--bs-danger) 50%, white 50%); } /** Buttons */ .btn-inline { -webkit-mask-position: center center; mask-position: center center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100%; mask-size: 100%; position: absolute; top: 0; bottom: 0; right: 0; width: 28px; background: 0; border: 0; } .btn-inline-check { -webkit-mask-image: url('data:image/svg+xml,') !important; mask-image: url('data:image/svg+xml,') !important; } .btn-inline-remove { -webkit-mask-image: url('data:image/svg+xml,') !important; mask-image: url('data:image/svg+xml,') !important; } .btn-inline-primary { background-color: var(--bs-primary, #008577) !important; } .btn-inline-secondary { background-color: var(--bs-secondary) !important; } .btn-inline-success { background-color: var(--bs-success) !important; } .btn-inline-info { background-color: var(--bs-info) !important; } .btn-inline-warning { background-color: var(--bs-warning) !important; } .btn-inline-danger { background-color: var(--bs-danger) !important; } .btn-inline-light { background-color: var(--bs-light) !important; } .btn-inline-dark { background-color: var(--bs-dark) !important; } [data-required="1"] td[data-droppable="true"] { position: relative; padding-right: 1rem; } [data-required="1"] td[data-droppable="true"]:not(:empty)~button { display: inline-block !important; } [data-required="1"] td[data-droppable="true"]::after { content: ''; position: absolute; top: 0; right: 0; height: 16px; width: 16px; background-color: var(--bs-success); -webkit-mask-position: right center; mask-position: right center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2hlY2siIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTEwLjk3IDQuOTdhLjc1Ljc1IDAgMCAxIDEuMDcgMS4wNWwtMy45OSA0Ljk5YS43NS43NSAwIDAgMS0xLjA4LjAyTDQuMzI0IDguMzg0YS43NS43NSAwIDEgMSAxLjA2LTEuMDZsMi4wOTQgMi4wOTMgMy40NzMtNC40MjV6Ii8+Cjwvc3ZnPg==); mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2hlY2siIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTEwLjk3IDQuOTdhLjc1Ljc1IDAgMCAxIDEuMDcgMS4wNWwtMy45OSA0Ljk5YS43NS43NSAwIDAgMS0xLjA4LjAyTDQuMzI0IDguMzg0YS43NS43NSAwIDEgMSAxLjA2LTEuMDZsMi4wOTQgMi4wOTMgMy40NzMtNC40MjV6Ii8+Cjwvc3ZnPg==); } [data-required="1"] td[data-droppable="true"]:empty::after { content: ''; position: absolute; top: 0; right: 0; height: 100%; width: 16px; background-color: var(--bs-warning); -webkit-mask-position: right center; mask-position: right center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktZXhjbGFtYXRpb24iIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTcuMDAyIDExYTEgMSAwIDEgMSAyIDAgMSAxIDAgMCAxLTIgME03LjEgNC45OTVhLjkwNS45MDUgMCAxIDEgMS44IDBsLS4zNSAzLjUwN2EuNTUzLjU1MyAwIDAgMS0xLjEgMHoiLz4KPC9zdmc+); mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktZXhjbGFtYXRpb24iIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTcuMDAyIDExYTEgMSAwIDEgMSAyIDAgMSAxIDAgMCAxLTIgME03LjEgNC45OTVhLjkwNS45MDUgMCAxIDEgMS44IDBsLS4zNSAzLjUwN2EuNTUzLjU1MyAwIDAgMS0xLjEgMHoiLz4KPC9zdmc+); } [dropped]:not([dropped="0"])::after { content: ''; position: absolute; top: 0; left: -16px; height: 100%; width: 16px; background-color: var(--bs-success); -webkit-mask-position: right center; mask-position: right center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2hlY2siIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTEwLjk3IDQuOTdhLjc1Ljc1IDAgMCAxIDEuMDcgMS4wNWwtMy45OSA0Ljk5YS43NS43NSAwIDAgMS0xLjA4LjAyTDQuMzI0IDguMzg0YS43NS43NSAwIDEgMSAxLjA2LTEuMDZsMi4wOTQgMi4wOTMgMy40NzMtNC40MjV6Ii8+Cjwvc3ZnPg==); mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2hlY2siIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTEwLjk3IDQuOTdhLjc1Ljc1IDAgMCAxIDEuMDcgMS4wNWwtMy45OSA0Ljk5YS43NS43NSAwIDAgMS0xLjA4LjAyTDQuMzI0IDguMzg0YS43NS43NSAwIDEgMSAxLjA2LTEuMDZsMi4wOTQgMi4wOTMgMy40NzMtNC40MjV6Ii8+Cjwvc3ZnPg==); } .d-table-header-group { display: table-header-group !important; } .valid .valid-feedback { display: block; } .invalid .invalid-feedback { display: block; } @media (min-width: 576px) { .d-sm-table-header-group { display: table-header-group !important; } .w-sm-50 { width: 50% !important; } .w-sm-75 { width: 75% !important; } } @media (min-width: 768px) { .d-md-table-header-group { display: table-header-group !important; } .w-md-auto { width: auto !important; } .w-md-25 { width: 25% !important; } .w-md-50 { width: 50% !important; } .w-md-75 { width: 75% !important; } .w-md-100 { width: 100% !important; } .h-md-auto { height: auto !important; } .h-md-25 { height: 25% !important; } .h-md-50 { height: 50% !important; } .h-md-75 { height: 75% !important; } .h-md-100 { height: 100% !important; } .vh-md-25 { height: 25vh !important; } .vh-md-50 { height: 50vh !important; } .vh-md-75 { height: 75vh !important; } .vh-md-100 { height: 100vh !important; } /* Slides sind mobil immer 100 % breit (Basis .side-modal: width:100%, right:-100%) — keine Slot-Overrides mehr (Zwischen-Step MS). */ } @media (min-width: 992px) { .d-lg-table-header-group { display: table-header-group !important; } .w-lg-auto { width: auto !important; } .w-lg-25 { width: 25% !important; } .w-lg-50 { width: 50% !important; } .w-lg-75 { width: 75% !important; } .w-lg-100 { width: 100% !important; } } @media (min-width: 1200px) { .d-xl-table-header-group { display: table-header-group !important; } .w-xl-auto { width: auto !important; } .w-xl-25 { width: 25% !important; } .w-xl-50 { width: 50% !important; } .w-xl-75 { width: 75% !important; } .w-xl-100 { width: 100% !important; } } @media (min-width: 1400px) { .d-xxl-table-header-group { display: table-header-group !important; } .w-xxl-auto { width: auto !important; } .w-xxl-25 { width: 25% !important; } .w-xxl-50 { width: 50% !important; } .w-xxl-75 { width: 75% !important; } .w-xxl-100 { width: 100% !important; } } /* ======================================== communication - Modern Split-View Design Based on Prototyp ======================================== */ /* Container */ .communication-container { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; background-color: var(--cin-background); margin: -1.5rem; } /* Page Header */ .page-header-subtitle { font-size: 1.125rem; color: var(--cin-text-muted); font-weight: 500; margin: 0.5rem 0 0 0; } /* Main Content - Split View */ .communication-main { flex: 1; display: flex; overflow: hidden; min-height: 0; } /* Left Panel */ .communication-left-panel { width: 48%; position: relative; container-type: inline-size; container-name: comm-panel; } .communication-panel-inner { padding: 0; flex: 1 1 auto; } /* Header mit Tabs + Workspace-Buttons: horizontales Padding */ .communication-header { padding-top: 0.5rem; padding-left: 1rem; padding-right: 1rem; flex-shrink: 0; } .communication-list-container { flex: 1; min-height: 0; display: flex; flex-direction: column; } .communication-list-container .list, .communication-list-container .row.list, .communication-list-container ul.list { flex: 1; min-height: 0; overflow-y: auto; } .custom-crm-tag-card-filter-btn { --custom-crm-tag-card-color: var(--bs-primary); border-color: color-mix(in srgb, var(--custom-crm-tag-card-color) 35%, transparent); color: var(--custom-crm-tag-card-color); background-color: color-mix(in srgb, var(--custom-crm-tag-card-color) 10%, transparent); } .custom-crm-tag-card-filter-btn:hover, .custom-crm-tag-card-filter-btn:focus-visible { border-color: var(--custom-crm-tag-card-color); color: var(--custom-crm-tag-card-color); background-color: color-mix(in srgb, var(--custom-crm-tag-card-color) 18%, transparent); } .custom-crm-tag-card-filter-btn.active { border-color: var(--custom-crm-tag-card-color); color: #ffffff; background-color: var(--custom-crm-tag-card-color); } /* Tabs */ .communication-tabs { display: flex; flex-direction: column; height: 100%; overflow: hidden; } .communication-tabs-list { display: flex; border-bottom: 1px solid var(--cin-border); padding: 0 1rem; flex-shrink: 0; } .communication-tab { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border: none; background: none; cursor: pointer; font-size: 0.875rem; font-weight: 500; color: var(--cin-text-secondary); border-bottom: 2px solid transparent; transition: all 0.2s; white-space: nowrap; } .communication-tab:hover { color: var(--bs-primary); background-color: rgba(var(--bs-primary-rgb), 0.05); } .communication-tab.active { color: var(--bs-primary); border-bottom-color: var(--bs-primary); } .communication-tab i { font-size: 1rem; } /* Communication Tabs - Never wrap */ #comm-tabs { flex-wrap: nowrap; } /* Communication Tabs - Badge Styling */ #comm-tabs .nav-link { position: relative; } #comm-tabs .nav-link i { font-size: 1.125rem; flex-shrink: 0; } /* #comm-tabs.nav-floating .tab-text { display: inline; } */ .nav-floating.dropdown-menu.show .tab-text { display: inline-block !important; } .communication-left-panel:has(#comm-tabs.nav-floating.dropdown-menu.show) { overflow: visible !important; z-index: 10; } /* Workspace-Mode-Buttons */ .workspace-mode-btn { padding: 0.375rem 0.625rem; border-radius: 0.375rem; transition: all 0.2s ease-in-out; } .workspace-mode-btn:hover { background-color: var(--cin-surface-hover); border-color: var(--bs-primary); color: var(--bs-primary); } .workspace-mode-btn.active { background-color: var(--bs-primary); border-color: var(--bs-primary); color: var(--cin-text-inverse); } @media (max-width: 767.98px) { .communication-header { min-height: 0; padding: 0; } } /* Tab Content */ .communication-tab-content { flex: 1; overflow: hidden; display: flex; flex-direction: column; } /* Filters */ .communication-filters { border-bottom: 1px solid var(--cin-border); background-color: var(--cin-background); padding: 1.5rem; flex-shrink: 0; } .filter-search-row { display: flex; gap: 0.5rem; align-items: center; } input.search-icon { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-search%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M11.742%2010.344a6.5%206.5%200%201%200-1.397%201.398h-.001q.044.06.098.115l3.85%203.85a1%201%200%200%200%201.415-1.414l-3.85-3.85a1%201%200%200%200-.115-.1zM12%206.5a5.5%205.5%200%201%201-11%200%205.5%205.5%200%200%201%2011%200%22/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 8px center; background-size: 16px 16px; padding-left: 32px; } .search-input { width: 100%; padding: 0.5rem 0.75rem 0.5rem 2.5rem; border: 1px solid var(--cin-border); border-radius: 1rem; font-size: 0.875rem; background: var(--cin-bg-elevated); box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05); } .search-input:focus { outline: none; border-color: var(--bs-primary); box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.1); } .btn-reset-filter { width: 2.5rem; height: 2.5rem; border-radius: 1rem; border: none; background-color: var(--cin-border); color: var(--cin-text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .btn-reset-filter:hover { background-color: var(--cin-background); color: var(--bs-primary); } /* Communication Item */ .comm-item { padding: 1rem; border-radius: 0.75rem; border: 1px solid var(--cin-border); cursor: pointer; transition: all 0.2s; } .comm-item:hover { background-color: var(--cin-background); border-color: var(--cin-border); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05); } .comm-item-selected { background-color: rgba(var(--bs-primary-rgb), 0.05) !important; } [data-bs-theme="dark"] .comm-item-selected { background-color: rgba(var(--bs-primary-rgb), 0.15) !important; } .comm-item-unread, .list [data-isread="0"] .card { box-shadow: inset 4px 0 0 #3b82f6, 0 16px 28px rgba(42, 107, 99, 0.08); } .list [data-isread="0"] .comm-item-avatar { background-color: color-mix(in srgb, var(--cin-danger) 5%, var(--cin-background)) !important; border-color: color-mix(in srgb, var(--cin-danger) 10%, var(--cin-border)) !important; color: var(--cin-danger) !important; } .list [data-isread="1"] .comm-item-avatar { background-color: color-mix(in srgb, var(--cin-success) 5%, var(--cin-background)) !important; border-color: color-mix(in srgb, var(--cin-success) 10%, var(--cin-border)) !important; color: var(--cin-success) !important; } .list [data-isread="0"] .comm-item-subject { font-weight: 700 !important; } .comm-item-content { display: flex; flex-direction: column; gap: 0.5rem; } .comm-item-avatar { width: 40px; height: 40px; background: var(--cin-background); border: 1px solid var(--cin-border); color: var(--cin-text-secondary); position: relative; } .comm-item-icon { font-size: 1.25rem; } .comm-item-select-checkbox { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; opacity: 0; z-index: 10; pointer-events: none; transition: opacity 0.15s ease-in-out; } /* Mail selection mode: show checkbox, hide icon */ .mail-selection-mode .comm-item-select-checkbox { opacity: 1; pointer-events: auto; } .mail-selection-mode .comm-item-icon { opacity: 0; pointer-events: none; } .mail-selection-mode .mail-item-wrapper[data-queue-status]:not([data-queue-status=""]) { & .comm-item-select-checkbox { display: none !important; opacity: 0; pointer-events: none; } & .comm-item-icon { opacity: 1; } } .mail-item-wrapper[data-queue-status]:not([data-queue-status=""]) .comm-item-avatar { cursor: default !important; } /* Gruppen-Header ("Dieses Jahr", "Heute", etc.) */ .listjs-group { margin-bottom: 0.75rem; } .inner-listjs-group { padding: 0.5rem 1rem; background-color: var(--bs-tertiary-bg); border-top: 2px solid var(--cin-border); border-bottom: 2px solid var(--cin-border); border-radius: 0; } [data-bs-theme="dark"] .inner-listjs-group { background-color: var(--bs-tertiary-bg); } .inner-listjs-group .label { padding: 0; font-size: 0.875rem; font-weight: 700; color: var(--bs-emphasis-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Mail-Items: Kein horizontales Margin, kein Gap, kein Hover-Shadow */ .mail-item.card { margin-left: 0; margin-right: 0; margin-bottom: 0; border-radius: 0; transition: background-color 0.15s ease; outline: none !important; box-shadow: none !important; } .mail-item.card:not(.comm-item-selected):hover { background-color: var(--bs-tertiary-bg); box-shadow: none !important; } .comm-item-type-badge.type-email, .comm-item-type-badge[data-type=email] { background-color: rgba(59, 130, 246, 0.1); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.2); } .comm-item-type-badge.type-ticket, .comm-item-type-badge[data-type=ticket] { background-color: rgba(168, 85, 247, 0.1); color: #a855f7; border: 1px solid rgba(168, 85, 247, 0.2); } .comm-item-type-badge[data-type=email] .bi-ticket-perforated, .comm-item-type-badge[data-type=email] .type-ticket { display: none; } .comm-item-type-badge[data-type=ticket] .bi-envelope, .comm-item-type-badge[data-type=ticket] .type-email { display: none; } [data-bs-theme="dark"] .comm-item-type-badge.type-email { background-color: rgba(59, 130, 246, 0.15); color: #60a5fa; } [data-bs-theme="dark"] .comm-item-type-badge.type-ticket { background-color: rgba(168, 85, 247, 0.15); color: #c084fc; } .comm-item-actions { flex-shrink: 0; } .comm-item-labels { display: flex; gap: 0.25rem; flex-wrap: wrap; } .comm-item-badges { display: flex; gap: 0.5rem; color: var(--cin-text-muted); font-size: 1rem; } .mail-item-wrapper[data-status="new"] { & .status-badge.status, & .tag-badge.status { display: none; } } .mail-meta-indicator { align-items: center; justify-content: center; line-height: 1; } .mail-priority-high, .read-receipt-failed { color: var(--bs-danger); } .mail-priority-low, .read-receipt-declined { color: var(--bs-secondary-color); } .read-receipt-requested, .read-receipt-receipt { color: var(--bs-info); } .read-receipt-pending { color: var(--bs-warning); } .read-receipt-confirmed, .read-receipt-received { color: var(--bs-success); } .mail-metadata-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 500; } .badge.tag-badge, .badge.preview-badge { font-weight: var(--cin-tag-font-weight, 500) !important; } /* === Einheitlicher CRM-Tag Klick-Chip-Selector (Detail-Zuweisung + Toolbar-Filter) === Inaktiv = dezent grau (nur Border + Text); aktiv = Tag-Farbe im Admin-Style (der Inline-Style aus CinCrmTags.chipStyle überschreibt den Grau-Default). Beide Themes via --cin-* / --bs-*-Variablen. */ .crm-tag-selector { min-width: 240px; max-width: 340px; } .crm-tag-selector-section+.crm-tag-selector-section { margin-top: 0.25rem; } .crm-tag-chip { display: inline-flex; align-items: center; padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 500; line-height: 1.15; cursor: pointer; /* Farbe/Rand/BG kommen INLINE aus CinCrmTags (aktiv = Tag-Farbe, inaktiv = grau — jeweils im Admin-Style gefüllt/gestrichelt). Hier nur Form + Hover-Feedback. */ transition: box-shadow 0.12s ease; } .crm-tag-chip:hover { box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.18); } /* „Neuer Tag"-Feld sieht schon wie die künftige Pille aus (Live-Vorschau via CinCrmTags.chipStyle): passt sich der Textlänge an (width:auto + size-Attribut), Text zentriert. input.-Selektor schlägt Bootstraps .form-control{width:100%}. */ input.crm-tag-create-name { width: auto; text-align: center; } /* Runde Farbanzeige: Box abrunden UND den inneren Swatch clippen (border-radius am input allein reicht nicht — der ::-color-swatch hat eigene eckige Kanten). overflow:hidden clippt ihn rund. */ .crm-tag-create-color.form-control-color { width: 2rem; /* Höhe fix = Breite → garantiert 32×32 Quadrat, in JEDEM Kontext. !important ist nötig, weil `.task-form .form-control { height:38px }` (crm.css:6043) dieselbe Spezifität hat, aber später in der Datei steht → würde die Aufgaben-Swatch sonst auf 38px zwingen (Projekte/.project-form nicht, daher die zwei Größen). Bootstraps min-height (1.5em-basiert) ebenfalls überstimmen. */ height: 2rem !important; min-height: 2rem !important; padding: 0; flex-shrink: 0; border-radius: 0.5rem; overflow: hidden; } .crm-tag-create-color.form-control-color::-webkit-color-swatch-wrapper { padding: 0; } .crm-tag-create-color.form-control-color::-webkit-color-swatch { border: 0; border-radius: 0.4rem !important; } .crm-tag-create-color.form-control-color::-moz-color-swatch { border: 0; border-radius: 0.4rem !important; } /* Internal Notes — der Thread selbst rendert in Team-Chat-Optik (tc-*-Klassen aus team-chat.css, gemeinsamer Renderer CommunicationUtils.renderInternalNoteThread); hier lebt nur noch der Composer. */ .internal-notes-composer textarea { resize: none; max-height: 120px; } /* Auch die im Kontakt-Popup umbenannten Panes (Suffix -cpop gegen ID-Kollision mit einem evtl. offenen Postfach) müssen dieselbe Flex-Fill-Höhe bekommen — sonst „rutscht" z. B. der Intern- Composer in die Mitte statt an den unteren Rand. */ #internal-tab-pane.active, #internal-tab-pane-cpop.active { display: flex; flex-direction: column; flex: 1; min-height: 0; } /* Resize Handle */ .communication-resize-handle { width: 8px; background-color: var(--cin-border); cursor: col-resize; border-radius: 9999px; transition: all 0.2s; flex-shrink: 0; position: relative; /* Anker für das absolut positionierte .workspace-lock-btn */ } .communication-resize-handle:hover { background-color: var(--bs-primary); box-shadow: 0 0 10px rgba(var(--bs-primary-rgb), 0.3); } /* Right Panel - Detail */ .communication-right-panel { flex: 1; } .communication-right-panel.is-hidden { display: none !important; } .communication-right-panel>.card-body { display: flex; flex-direction: column; min-height: 0; padding: 0; } #detail-view { flex: 1; display: flex; flex-direction: column; min-height: 0; } #detail-view>.d-flex, #detail-view>p, #detail-view>.detail-subject-row { padding-inline: var(--bs-card-spacer-x); } #detail-view>.d-flex:first-child { padding-top: var(--bs-card-spacer-y); } #detail-view>.tab-content { padding-inline: 0; } #communication-tab-pane.active, #communication-tab-pane-cpop.active { display: flex; flex-direction: column; flex: 1; min-height: 0; } #tasks-tab-pane.active, #tasks-tab-pane-cpop.active, #history-tab-pane.active, #history-tab-pane-cpop.active { display: flex; flex-direction: column; flex: 1; min-height: 0; } /* Detail Empty State */ .detail-empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--cin-text-muted); padding: 2rem; } .detail-empty-icon { font-size: 4rem; margin-bottom: 1rem; opacity: 0.3; } .detail-empty-title { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--cin-text-secondary); } .detail-empty-text { font-size: 0.875rem; text-align: center; max-width: 24rem; } /* Detail Content */ .detail-content { flex: 1; background-color: var(--cin-surface-raised); } .mail-detail-modal .modal-dialog { max-width: min(1200px, calc(100vw - 2rem)); height: calc(100dvh - 2rem); } .mail-detail-modal .modal-content { height: 100%; } .mail-detail-modal .modal-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mail-detail-modal .modal-body { display: flex; min-height: 0; overflow: hidden; padding: 0; /* Split/focus render on the white .communication-right-panel.card; the popup instead inherits the global grey `.window-modal .modal-body { background: #f3f4f678 }`, which shows through the transparent tab-row and header area. Override it to the white card surface so the popup matches the split view. (The thread canvas keeps its own --cin-surface-raised via .detail-content.) */ background-color: var(--cin-surface); } .mail-detail-modal-content { min-height: 0; overflow: hidden; /* The popup has NO .card ancestor (split/focus render inside .communication-right-panel.card), so Bootstrap's --bs-card-bg (defined only within .card) is undefined here and card-surfaced children (.thread-message …) fall back to the GREY --bs-body-bg (#f3f4f6). Re-provide the card surface variable so those children render white on the grey canvas, exactly like the split view. Theme-aware: --cin-surface is #fff (light) / #161b22 (dark), matching Bootstrap .card. */ --bs-card-bg: var(--cin-surface); /* Same reason: --bs-card-spacer-* are defined only inside .card. Without them the detail-view tab-row (padding-inline/top: var(--bs-card-spacer-*)) collapses to 0 in the popup, so the thread-order toggle sits flush against the edge instead of aligning with the action buttons below. Re-provide Bootstrap's card spacing so the popup matches the split view. */ --bs-card-spacer-x: 1rem; --bs-card-spacer-y: 1rem; /* This element also carries the `.detail-content` class (see communication.js #ensureMailDetailModal), whose `background-color: var(--cin-surface-raised)` (GREY) is the outer popup canvas. The transparent tab-row sits directly on it → grey band. Override to white here (later rule, same specificity, so it wins over .detail-content). The INNER #detail-content keeps --cin-surface-raised for the thread canvas, exactly like split view (where the tab-row shows the white .card and only the thread area is raised). */ background-color: var(--cin-surface); } .detail-header { background-color: var(--bs-card-bg, var(--bs-body-bg)); border-bottom: 1px solid var(--cin-border); } .detail-header-actions { min-width: 0; } .detail-badge-bar, .detail-action-bar { display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem; flex-wrap: wrap; min-width: 0; } /* Second row: action buttons sit below the informational badges. */ .detail-action-bar { margin-top: 0.5rem; } .detail-badge-bar .btn, .detail-badge-bar .badge, .detail-action-bar .btn, .detail-action-bar .ticket-sla-badge { flex-shrink: 0; } .detail-badge-bar .btn, .detail-action-bar .btn, .detail-action-bar .ticket-sla-badge { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 32px; } .detail-ticket-number { display: inline-flex; align-items: center; margin-left: 0.45rem; padding-left: 0.45rem; border-left: 1px solid currentColor; font-weight: 700; } @media (min-width: 1200px) { .detail-badge-bar, .detail-action-bar { justify-content: flex-end; } } .mail-read-progress { height: 3px; overflow: hidden; background: transparent; flex: 0 0 auto; & .line { inset: 0; width: 100%; height: 100%; opacity: 0.4; background: var(--bs-primary); } & .mail-read-progress-bar { inset: 0 auto 0 0; height: 100%; background: var(--bs-primary); } } .btn-close-detail { background: none; border: none; cursor: pointer; color: var(--cin-text-muted); padding: 0.25rem; border-radius: 0.5rem; transition: all 0.2s; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-left: 0.5rem; } .btn-close-detail:hover { background-color: var(--cin-bg-secondary); color: var(--bs-primary); } .detail-subject { margin: 0; } .detail-meta { display: none; } .detail-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--cin-avatar-gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%)); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 1.25rem; flex-shrink: 0; } .detail-from-info { flex: 1; } .detail-from-name { font-weight: 600; font-size: 1rem; color: var(--cin-foreground); } .detail-from-email { font-size: 0.875rem; color: var(--cin-text-muted); } .detail-from-badges { display: flex; align-items: center; gap: 0.5rem; } .detail-time { font-size: 0.875rem; color: var(--cin-text-secondary); } .detail-labels-row { display: none; } .detail-labels { display: flex; gap: 0.5rem; flex-wrap: wrap; flex: 1; } .detail-status-actions { display: flex; gap: 0.5rem; flex-shrink: 0; } .detail-status-badge { white-space: nowrap; } /* Status Dropdown */ .detail-status-dropdown { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; } .status-dropdown-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: var(--cin-text-muted); letter-spacing: 0.05em; } .status-select { padding: 0.5rem 0.75rem; border: 1px solid var(--cin-border); border-radius: 0.5rem; background: var(--cin-bg-elevated); color: var(--cin-foreground); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.2s; flex: 1; min-width: 0; height: 32px; } .status-select:hover { border-color: var(--bs-primary); } .status-select:focus { outline: none; border-color: var(--bs-primary); box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.1); } .control-item { display: flex; flex-direction: column; align-items: stretch; gap: 0.35rem; min-width: 0; } .control-label { font-size: 0.75rem; font-weight: 500; color: var(--cin-text-muted); margin-bottom: 0; } /* Assignment Display Button */ .detail-assignment-control { position: relative; min-width: 0; } .assignment-display-btn { display: inline-flex; align-items: center; justify-content: flex-start; gap: 0.5rem; padding: 0.5rem 0.75rem; background: var(--cin-bg-elevated); border: 1px solid var(--cin-border); border-radius: 0.5rem; color: var(--cin-foreground); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.2s; width: 100%; min-width: 0; height: 37px; overflow: hidden; } .assignment-display-btn:hover { background: var(--cin-bg-secondary); border-color: var(--bs-primary); } .assignment-display-btn i.bi-chevron-down { margin-left: auto; font-size: 0.75rem; color: var(--cin-text-muted); } .detail-assignment-control .dropdown-menu { min-width: 100%; } .assignment-dd-avatar { width: 2rem; height: 2rem; background: var(--cin-background); border: 1px solid var(--cin-border); color: var(--cin-text-secondary); font-size: 1rem; } .assignment-dropdown-entry:disabled { opacity: 0.75; } .assignment-dd-check { min-width: 1.5rem; text-align: right; } /* Detail Subject Row */ .detail-subject-row { display: block; padding: 0.625rem 0 0.75rem 0; } /* Type Badge Visibility */ .comm-item-type-badge .type-text { display: inline; } /* Detail Tag Editor */ .detail-tag-editor { display: flex; align-items: flex-end; min-width: 0; } .detail-tag-editor .btn { height: 37px; } /* Assignment Row */ .detail-assignment-row { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; background: var(--cin-bg-elevated); border-top: 1px solid var(--cin-border); gap: 1rem; } .assignment-info { display: flex; align-items: center; gap: 0.75rem; flex: 1; } .assignment-label { font-size: 0.875rem; font-weight: 500; color: var(--cin-text-secondary); } .assignment-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; } .assignment-badge.assignment-user { background-color: rgba(59, 130, 246, 0.1); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.2); } .assignment-badge.assignment-group { background-color: rgba(16, 185, 129, 0.1); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.2); } .assignment-badge.assignment-none { background-color: rgba(156, 163, 175, 0.1); color: #9ca3af; border: 1px solid rgba(156, 163, 175, 0.2); } [data-bs-theme="dark"] .assignment-badge.assignment-user { background-color: rgba(59, 130, 246, 0.15); color: #60a5fa; } [data-bs-theme="dark"] .assignment-badge.assignment-group { background-color: rgba(16, 185, 129, 0.15); color: #34d399; } [data-bs-theme="dark"] .assignment-badge.assignment-none { background-color: rgba(156, 163, 175, 0.15); color: #d1d5db; } .assignment-actions { display: flex; gap: 0.5rem; } .btn-assign { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: var(--cin-bg-elevated); border: 1px solid var(--cin-border); border-radius: 0.5rem; color: var(--cin-foreground); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.2s; } .btn-assign:hover { background: var(--cin-background); border-color: #10b981; color: #10b981; } /* Watchlist Row */ .detail-watchlist-row { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; background: var(--cin-bg-elevated); border-top: 1px solid var(--cin-border); gap: 1rem; } .watchlist-info { display: flex; align-items: center; gap: 0.75rem; flex: 1; } .watchlist-label { font-size: 0.875rem; font-weight: 500; color: var(--cin-text-secondary); } .watchers-list { display: flex; flex-wrap: wrap; gap: 0.5rem; } .watcher-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; background-color: rgba(139, 92, 246, 0.1); color: #8b5cf6; border: 1px solid rgba(139, 92, 246, 0.2); } .watchlist-badge.watchlist-none { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; background-color: rgba(156, 163, 175, 0.1); color: #9ca3af; border: 1px solid rgba(156, 163, 175, 0.2); } [data-bs-theme="dark"] .watcher-badge { background-color: rgba(139, 92, 246, 0.15); color: #a78bfa; } [data-bs-theme="dark"] .watchlist-badge.watchlist-none { background-color: rgba(156, 163, 175, 0.15); color: #d1d5db; } .watchlist-actions { display: flex; gap: 0.5rem; } .btn-watchlist { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; background: var(--cin-bg-elevated); border: 1px solid var(--cin-border); border-radius: 0.5rem; color: var(--cin-foreground); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.2s; } .btn-watchlist:hover { background: var(--cin-background); border-color: #8b5cf6; color: #8b5cf6; } .btn-watchlist i { font-size: 1rem; } .detail-body { padding: 2rem; overflow-y: auto; } .mail-detail-skeleton { display: flex; min-height: 10rem; flex-direction: column; align-items: flex-start; gap: 0.65rem; color: var(--bs-secondary-color); } .mail-detail-skeleton .placeholder { min-height: 0.85rem; border-radius: 999px; } /* Thread View */ .thread-message { border: 1px solid var(--cin-thread-border, #e2e8f0); border-radius: 0rem 0.75rem 0.75rem 0rem; background-color: var(--bs-card-bg, var(--bs-body-bg)); width: 95%; } .thread-message.thread-message--outgoing { align-self: flex-end; border-radius: 0.75rem 0rem 0rem 0.75rem; } .thread-activity-event { display: flex; align-items: flex-start; gap: 0.625rem; width: min(100%, 40rem); align-self: center; padding: 0.625rem 0.875rem; border: 1px solid var(--cin-thread-border, #e2e8f0); border-radius: 0.5rem; background-color: var(--cin-surface-subtle, var(--bs-tertiary-bg)); color: var(--cin-text-secondary); } .thread-activity-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; flex: 0 0 1.75rem; border-radius: 999px; background-color: rgba(var(--bs-primary-rgb), 0.1); color: var(--bs-primary); } .thread-activity-content { min-width: 0; flex: 1; } .thread-activity-text { color: var(--cin-foreground); font-size: 0.875rem; font-weight: 600; line-height: 1.35; } .thread-activity-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.125rem; color: var(--cin-text-muted); font-size: 0.75rem; } .thread-activity-event.status-green .thread-activity-icon { /* background-color: rgba(34, 197, 94, 0.12); */ color: #16a34a; } .thread-activity-event.status-yellow .thread-activity-icon, .thread-activity-event.status-orange .thread-activity-icon { /* background-color: rgba(245, 158, 11, 0.12); */ color: #d97706; } .thread-activity-event.status-red .thread-activity-icon { /* background-color: rgba(239, 68, 68, 0.12); */ color: #dc2626; } .thread-activity-event.status-gray .thread-activity-icon { /* background-color: rgba(107, 114, 128, 0.12); */ color: #6b7280; } .thread-activity-event.status-blue .thread-activity-icon { /* background-color: rgba(59, 130, 246, 0.12); */ color: #2563eb; } .thread-activity-icon { background-color: var(--cin-surface); } .ticket-history-thread { background-color: var(--cin-background); } .ticket-history-timeline { position: relative; display: flex; flex-direction: column; gap: 0.75rem; padding-left: 3rem; } .ticket-history-timeline::before { content: ""; position: absolute; top: 2.75rem; bottom: 1rem; left: 1.25rem; width: 3px; border-radius: 999px; background-color: var(--cin-border); } .ticket-history-date-separator { display: flex; align-items: center; gap: 1rem; margin: 0.25rem 0 0.5rem -3rem; color: var(--cin-text-secondary); font-size: 0.875rem; font-weight: 600; } .ticket-history-date-separator::before, .ticket-history-date-separator::after { content: ""; height: 1px; flex: 1; background-color: var(--cin-border); } .ticket-history-date-separator span { position: relative; z-index: 1; padding: 0.375rem 0.875rem; border: 1px solid var(--cin-border); border-radius: 999px; background-color: var(--cin-surface); color: var(--cin-foreground); } .ticket-history-event { position: relative; align-self: stretch; width: 100%; min-height: 4.25rem; margin: 0; padding: 1rem 1.25rem; border-radius: 0.75rem; background-color: var(--cin-surface); box-shadow: var(--cin-shadow-sm, none); } .ticket-history-event .ticket-history-icon { position: absolute; top: 0.875rem; left: -2.625rem; z-index: 1; width: 2rem; height: 2rem; flex-basis: 2rem; border: 2px solid var(--cin-background); box-shadow: 0 2px 6px rgba(15, 23, 42, 0.16); } .ticket-history-event .thread-activity-content { padding-left: 0; } /* Aufgaben-Detail-Historie (task-form Reiter „Historie") — jeder Eintrag als sauberer weißer Container mit Rahmen auf dem hellgrauen Pane. Bewusst OHNE Schatten/Schwebe-Effekt (CRM-weite Vorgabe). Ersetzt die frühere „py-2 border-bottom"-Divider-Zeile. */ .task-history-list { display: flex; flex-direction: column; gap: 0.5rem; } .task-history-item { padding: 0.75rem 1rem; border: 1px solid var(--cin-border); border-radius: 0.5rem; background-color: var(--cin-surface); } .thread-message-header { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--cin-border); background-color: var(--cin-surface-subtle, var(--bs-tertiary-bg)); cursor: pointer; transition: background-color 0.15s ease; } .thread-message-header:hover { background-color: rgba(var(--bs-primary-rgb), 0.05); } [data-bs-theme="dark"] .thread-message-header:hover { background-color: rgba(var(--bs-primary-rgb), 0.15); } .thread-message-avatar { width: 2rem; height: 2rem; border-radius: 50%; background: linear-gradient(135deg, var(--cin-primary, #1b3661), var(--cin-primary-hover, #2a4a7a)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .thread-message-avatar .avatar-initials { font-size: 0.7rem; font-weight: 600; color: #fff; } /* Ein Avatar, hinter dem ein CRM-Kontakt steht, ist anklickbar. Der Ring zeigt das an, ohne die Grösse zu verändern — sonst würde die Zeile springen, sobald die Auflösung eines Kontakts eintrifft. */ .mail-contact-avatar { transition: box-shadow 0.15s ease-in-out; } .mail-contact-avatar:hover, .mail-contact-avatar:focus-visible { box-shadow: 0 0 0 2px var(--bs-body-bg, #fff), 0 0 0 4px var(--cin-primary, #1b3661); outline: none; } .thread-message-meta { flex: 1; min-width: 0; } .thread-message-from { font-weight: 600; font-size: 0.875rem; color: var(--cin-foreground); } .thread-message-to { font-size: 0.75rem; color: var(--cin-text-muted); overflow-wrap: anywhere; white-space: normal; } .direction.mail-direction-read .direction-icon { color: var(--bs-primary); } .direction.mail-direction-queued .direction-icon { color: var(--bs-primary); } .mail-queue-detail { min-width: 0; } .mail-queue-detail iframe { height: 55vh; min-height: 240px; background: white; } .mail-queue-detail pre { white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; } .mail-queue-failure { display: none; } .mail-item-wrapper[data-queue-status="failed"] .mail-queue-failure { display: block; } .mail-direction-answer-dot { display: none; } .direction.mail-direction-answered .mail-direction-answer-dot { position: absolute; right: 0; bottom: 0.2rem; display: block; width: 0.45rem; height: 0.45rem; border: 1px solid var(--bs-body-bg); border-radius: 50%; background-color: #2ecc71; } .thread-message-time { font-size: 0.75rem; color: var(--cin-text-muted); white-space: nowrap; text-align: right; } .thread-message-side { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 0.375rem; flex-shrink: 0; } .thread-message-body { padding: 2rem; color: var(--cin-foreground); } .mail-detail-html { max-width: 100%; overflow-x: auto; color-scheme: light; } .mail-detail-html img { max-width: 100%; height: auto; } .mail-detail-html table { max-width: 100%; } .thread-message-body .mail-detail-pre { white-space: pre-wrap; word-break: break-word; margin-bottom: 0; color: var(--cin-foreground); } /* Render sanitized HTML mails on their own light canvas so provider colors stay readable in dark mode. */ /* [data-bs-theme=dark] { .mail-detail-html { color: #212529; background-color: #ffffff; border-radius: var(--bs-border-radius); padding: 0.75rem; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); } .mail-detail-pre { color: var(--cin-foreground) !important; } .mail-detail-html a:not([style]) { color: #0d6efd; } } */ [data-bs-theme=dark] { .mail-detail-html, .mail-detail-pre { color: var(--cin-foreground); /* color: var(--cin-foreground) !important; */ } .mail-detail-html * { color: inherit; /* color: inherit !important; */ } .mail-detail-html a { color: var(--cin-info); /* color: var(--cin-info) !important; */ } } .thread-message-attachments { padding: 0.5rem 2rem 0.75rem; border-top: 1px solid var(--cin-border); } .thread-message--attachments-top { display: flex; flex-direction: column; } .thread-message--attachments-top>.thread-message-header { order: 0; } .thread-message--attachments-top>.ics-calendar-banner { order: 1; } .thread-message--attachments-top>.thread-message-attachments { order: 2; border-top: 0; border-bottom: 1px solid var(--cin-border); } .thread-message--attachments-top>.thread-message-body { order: 3; } .thread-message--attachments-top>.alert { order: 4; } .thread-attachments-title { font-size: 0.75rem; font-weight: 600; color: var(--cin-text-muted); margin-bottom: 0.5rem; } .thread-attachments-title i { margin-right: 0.25rem; } .thread-attachments-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.5rem; } .thread-attachment-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5rem; border-radius: 0.375rem; border: 1px solid var(--cin-border); background-color: var(--cin-background); font-size: 0.8125rem; } .thread-attachment-item i { color: var(--cin-text-muted); } .thread-attachment-info { min-width: 0; flex: 1; } .thread-attachment-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cin-foreground); } .thread-attachment-link { display: inline-flex; min-width: 0; max-width: 100%; text-decoration: none; } .thread-attachment-link:hover .thread-attachment-name { text-decoration: underline; } .thread-attachment-size { font-size: 0.6875rem; color: var(--cin-text-muted); } .thread-attachment-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 0.25rem; } .thread-attachment-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border: 1px solid var(--cin-border); border-radius: 0.375rem; background: var(--cin-bg-elevated); color: var(--cin-text-secondary); text-decoration: none; transition: all 0.15s ease-in-out; } .thread-attachment-btn:hover { background-color: var(--bs-primary); border-color: var(--bs-primary); color: #fff; } .thread-attachment-btn:disabled { opacity: 0.55; cursor: not-allowed; } .thread-message-actions { display: flex; align-items: center; gap: 0.375rem; flex-shrink: 0; margin-left: 0; } .btn-thread-action { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border: 1px solid var(--cin-thread-border, #e2e8f0); border-radius: 0.375rem; background-color: var(--cin-surface, #fff); color: var(--cin-text-muted); cursor: pointer; transition: all 0.15s ease; } .btn-thread-action:hover { color: #fff; background-color: var(--cin-primary, var(--bs-primary)); border-color: var(--cin-primary, var(--bs-primary)); } .detail-attachments { padding: 2rem; border-top: 1px solid var(--cin-border); } .attachments-title { font-size: 1rem; font-weight: 600; color: var(--cin-foreground); margin: 0 0 1rem 0; } .attachments-list { display: flex; flex-direction: column; gap: 0.75rem; } .attachment-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background-color: var(--cin-background); border-radius: 0.5rem; border: 1px solid var(--cin-border); } .attachment-item i { font-size: 1.5rem; color: var(--cin-danger); } .attachment-info { flex: 1; } .attachment-name { font-weight: 600; font-size: 0.875rem; color: var(--cin-foreground); } .attachment-size { font-size: 0.75rem; color: var(--cin-text-muted); } .btn-download-attachment { background: none; border: 1px solid var(--cin-border); cursor: pointer; padding: 0.5rem; border-radius: 0.5rem; color: var(--cin-text-secondary); transition: all 0.2s; } .btn-download-attachment:hover { background-color: var(--bs-primary); border-color: var(--bs-primary); color: white; } .detail-actions { padding: 2rem; border-top: 1px solid var(--cin-border); display: flex; gap: 0.75rem; flex-wrap: wrap; } .btn-detail-action { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border: 1px solid var(--cin-border); background: var(--cin-bg-elevated); border-radius: 0.75rem; cursor: pointer; font-weight: 500; font-size: 0.875rem; color: var(--cin-foreground); transition: all 0.2s; } .btn-detail-action:hover { background-color: var(--cin-background); border-color: var(--cin-border); } .btn-reply:hover { background-color: var(--bs-primary); border-color: var(--bs-primary); color: white; } .btn-delete:hover { background-color: var(--cin-danger); border-color: var(--cin-danger); color: var(--cin-text-inverse); } /* Status Badge Colors */ .list [data-watchers="0"] .observation { display: none; } /* Status Badge: gleiche Höhe wie Type Badge */ .status-badge, .tag-badge { &.status-blue, &[data-status-color=blue] { background-color: rgba(59, 130, 246, 0.1); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.2); } &.status-purple, &[data-status-color=purple] { background-color: rgba(168, 85, 247, 0.1); color: #a855f7; border: 1px solid rgba(168, 85, 247, 0.2); } &.status-yellow, &[data-status-color=yellow] { background-color: rgba(234, 179, 8, 0.1); color: #eab308; border: 1px solid rgba(234, 179, 8, 0.2); } &.status-cyan, &[data-status-color=cyan] { background-color: rgba(6, 182, 212, 0.1); color: #06b6d4; border: 1px solid rgba(6, 182, 212, 0.2); } &.status-orange, &[data-status-color=orange] { background-color: rgba(249, 115, 22, 0.1); color: #f97316; border: 1px solid rgba(249, 115, 22, 0.2); } &.status-green, &[data-status-color=green] { background-color: rgba(34, 197, 94, 0.1); color: #22c55e; border: 1px solid rgba(34, 197, 94, 0.2); } &.status-gray, &[data-status-color=gray] { background-color: rgba(156, 163, 175, 0.1); color: #9ca3af; border: 1px solid rgba(156, 163, 175, 0.2); } &.status-red, &[data-status-color=red] { background-color: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.2); } &.status-secondary, &[data-status-color=secondary] { background-color: rgba(107, 114, 128, 0.1); color: #6b7280; border: 1px solid rgba(107, 114, 128, 0.2); } &.status-success, &[data-status-color=success] { background-color: rgba(34, 197, 94, 0.1); color: #16a34a; border: 1px solid rgba(34, 197, 94, 0.2); } &.status-warning, &[data-status-color=warning] { background-color: rgba(245, 158, 11, 0.12); color: #d97706; border: 1px solid rgba(245, 158, 11, 0.24); } &.status-danger, &[data-status-color=danger] { background-color: rgba(239, 68, 68, 0.1); color: #dc2626; border: 1px solid rgba(239, 68, 68, 0.2); } /* Type Badge */ &.type-ticket { background-color: rgba(168, 85, 247, 0.1); color: #a855f7; border: 1px solid rgba(168, 85, 247, 0.2); font-weight: 600; } } /* Ticket Info Section */ .detail-ticket-info { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; padding: 1rem; margin-top: 1rem; background-color: var(--cin-bg-elevated); border-radius: 0.5rem; border: 1px solid var(--cin-border); } .ticket-sla-summary { margin-top: 0; padding-bottom: 0.75rem; } .ticket-sla-toggle { display: inline-flex; align-items: center; gap: 0.375rem; max-width: 100%; } /* SLA button styled like the other outline action buttons (icon + "SLA"); the state is conveyed by the border/text colour and the icon, not by a text label. status-secondary = ok (grey neutral), status-success = met (green), status-warning = at_risk / "Gefährdet" (orange), status-danger = breached / "Verletzt" (red). */ .ticket-sla-badge { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 32px; padding: 0.25rem 0.65rem; border: 1px solid currentColor; border-radius: var(--bs-btn-border-radius, 0.375rem); background-color: transparent; font: inherit; font-size: 0.8125rem; font-weight: 500; line-height: 1; cursor: pointer; color: #6b7280; } .ticket-sla-badge.status-success { color: #16a34a; } .ticket-sla-badge.status-warning { color: #d97706; } .ticket-sla-badge.status-danger { color: #dc2626; } .ticket-sla-badge:hover, .ticket-sla-badge:focus-visible { background-color: color-mix(in srgb, currentColor 8%, transparent); } [data-bs-theme="dark"] .ticket-sla-badge { color: #9ca3af; } [data-bs-theme="dark"] .ticket-sla-badge.status-success { color: #4ade80; } [data-bs-theme="dark"] .ticket-sla-badge.status-warning { color: #fbbf24; } [data-bs-theme="dark"] .ticket-sla-badge.status-danger { color: #f87171; } /* "Kd.-Zuordnung" button — review state. Like the SLA button it changes color by state, but the color is the LIVE admin hex of the "Zuordnung prüfen" system tag, injected inline as --assign-review-color (see communication.js #resolveAssignmentReview). The button stays a normal .btn.btn-sm (so it matches the neighboring action buttons); .is-review just recolors the outline. When the tag is cleared (assignment done) the template renders the plain btn-outline-primary blue. */ .ticket-assign-badge.is-review { border: 1px solid var(--assign-review-color, #f97316); color: var(--assign-review-color, #f97316); background-color: transparent; } .ticket-assign-badge.is-review:hover, .ticket-assign-badge.is-review:focus, .ticket-assign-badge.is-review:focus-visible { border-color: var(--assign-review-color, #f97316); color: var(--assign-review-color, #f97316); background-color: color-mix(in srgb, var(--assign-review-color, #f97316) 12%, transparent); } .ticket-priority-badge.priority-urgent { background-color: rgba(239, 68, 68, 0.14); color: #dc2626; } .ticket-priority-badge.priority-high { background-color: rgba(249, 115, 22, 0.14); color: #ea580c; } .ticket-priority-badge.priority-normal { background-color: rgba(59, 130, 246, 0.12); color: #2563eb; } .ticket-priority-badge.priority-low { background-color: rgba(34, 197, 94, 0.14); color: #16a34a; } [data-bs-theme="dark"] .ticket-priority-badge.priority-urgent { color: #fca5a5; } [data-bs-theme="dark"] .ticket-priority-badge.priority-high { color: #fdba74; } [data-bs-theme="dark"] .ticket-priority-badge.priority-normal { color: #93c5fd; } [data-bs-theme="dark"] .ticket-priority-badge.priority-low { color: #86efac; } .ticket-sla-card { margin-top: 0.75rem; padding: 1rem; border: 1px solid var(--cin-border); border-radius: 0.5rem; background-color: var(--cin-bg-secondary); } .ticket-sla-summary:hover .ticket-sla-card.collapse:not(.show) { display: block; } .ticket-sla-summary[data-sla-status="at_risk"] .ticket-sla-card { border-color: rgba(245, 158, 11, 0.45); background-color: rgba(245, 158, 11, 0.08); } .ticket-sla-summary[data-sla-status="breached"] .ticket-sla-card { border-color: rgba(239, 68, 68, 0.45); background-color: rgba(239, 68, 68, 0.08); } .ticket-sla-summary[data-sla-status="met"] .ticket-sla-card { border-color: rgba(16, 185, 129, 0.35); background-color: rgba(16, 185, 129, 0.07); } /* Teilprojekt L (vereinfacht): SLA-Container im Task-Formular (Seite + Modal) auf weißes Surface, damit die Karte auf dem subtilen Panel bzw. im Modal klar als Karte lesbar ist. Nur .task-sla-card (nicht die Postfach-Ticket-SLA). Die Status-Tints (at_risk/breached/met) haben höhere Spezifität und bleiben erhalten. */ .task-sla-card { background-color: var(--cin-surface); } .ticket-sla-card-header, .ticket-sla-meta, .ticket-sla-progress-labels { display: flex; align-items: center; gap: 1rem; } .ticket-sla-card-header { justify-content: space-between; margin-bottom: 0.875rem; } .ticket-sla-title { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; font-size: 1rem; font-weight: 700; color: var(--cin-foreground); } .ticket-sla-level { display: inline-flex; align-items: center; gap: 0.375rem; flex-shrink: 0; padding: 0.25rem 0.625rem; border: 1px solid var(--cin-border-secondary); border-radius: 999px; background-color: var(--cin-surface); color: var(--cin-foreground); font-size: 0.875rem; font-weight: 600; } .ticket-sla-meta { justify-content: space-between; flex-wrap: wrap; margin-bottom: 0.875rem; color: var(--cin-text-secondary); } .ticket-sla-meta-item { display: inline-flex; align-items: center; gap: 0.375rem; min-width: min(100%, 12rem); font-size: 0.875rem; } .ticket-sla-meta-label { font-weight: 600; } .ticket-sla-progress { position: relative; height: 0.625rem; overflow: hidden; border-radius: 999px; background-color: var(--cin-surface-active); } .ticket-sla-progress-fill { height: 100%; min-width: 0.125rem; } .ticket-sla-warning-marker { position: absolute; top: 0; bottom: 0; width: 1px; background-color: rgba(17, 24, 39, 0.55); } .ticket-sla-progress-labels { justify-content: space-between; margin-top: 0.5rem; font-size: 0.75rem; color: var(--cin-text-secondary); } [data-bs-theme="dark"] .ticket-sla-warning-marker { background-color: rgba(230, 237, 243, 0.65); } /* --- Reminder-Engine: task-eigene SLA-Panel-Anpassungen (Ticket-Panel bleibt unberuehrt) --- */ /* Kopf wie das alte Ticket-SLA: Titel + Erinnerung-Toggle links, Level-Pille oben rechts. Nutzt die Basis .ticket-sla-card-header (space-between) + .ticket-sla-meta (Meta-Reihe). */ .task-sla-summary .task-sla-header { flex-wrap: wrap; row-gap: 0.5rem; } .task-sla-summary .ticket-sla-title-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; min-width: 0; } /* „Gefaehrdet ab X%" + Kanal-Chip LINKSBUENDIG in einer Flex-Zeile (kann nie ueberlaufen). Der Connector ist ein Flex-Item NEBEN dem Label (nicht darueber): border-bottom = waagerechter Strich, border-right = Aufwaerts-Tick am rechten Ende. Der Spacer (flex-basis 100%-Schwelle%) schiebt das rechte Ende genau unter den Warn-Marker. Rein %-basiert -> resize-fest, kein JS. */ .task-sla-summary .task-sla-warning-zone { margin-top: 0.5rem; } .task-sla-summary .task-sla-warning-line { display: flex; align-items: center; flex-wrap: nowrap; } /* Label + Kanal-Chip behalten ihre natuerliche Breite (schrumpfen nicht). */ .task-sla-summary .task-sla-warning-text, .task-sla-summary .task-sla-warning-line>.task-reminder-sla80 { flex: 0 0 auto; } .task-sla-summary .task-sla-warning-line>.task-reminder-sla80 { margin-left: 0.5rem; } .task-sla-summary .task-sla-warning-connector { flex: 1 1 0; min-width: 0; height: 0.55rem; margin-left: 0.6rem; border-bottom: 1px dashed color-mix(in srgb, var(--cin-border-secondary) 70%, var(--cin-text-secondary)); border-right: 1px dashed color-mix(in srgb, var(--cin-border-secondary) 70%, var(--cin-text-secondary)); pointer-events: none; } .task-sla-summary .task-sla-warning-spacer { flex: 0 1 auto; } /* Lead-Segment (Icon + Label + Wert) der Start- UND der Gefaehrdet-Zeile auf gleiche min-width -> die Kanal-Chips beider Zeilen fluchten vertikal (Request Bild 2). Der Warn-Text erbt die inline-flex- Optik von .ticket-sla-meta-item; das Start-Lead-Wrapper-Span braucht sie explizit. */ .task-sla-summary .task-sla-lead { display: inline-flex; align-items: center; gap: 0.375rem; min-width: 12.5rem; } /* Reminder-Kanal-Gruppen sitzen auf einer eigenen neutralen Surface-Insel (Chip), damit sie auf jedem SLA-Karten-Tint (weiss/gelb/rot/gruen) konstant lesbar bleiben — Muster wie die Level-Pille. */ .task-sla-summary .task-reminder-inline { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.15rem 0.6rem; border: 1px solid color-mix(in srgb, var(--cin-border-secondary) 70%, var(--cin-text-secondary)); border-radius: 999px; background-color: color-mix(in srgb, var(--cin-surface-raised) 50%, transparent); } .task-sla-summary .task-reminder-start { margin-left: 0.5rem; } .task-sla-summary .task-reminder-ch { display: inline-flex; align-items: center; gap: 0.25rem; margin: 0; font-size: 0.8rem; font-weight: 500; color: var(--cin-text-secondary); cursor: pointer; } .task-sla-summary .task-reminder-ch input { margin: 0; } /* Kanal-Checkbox: unchecked = solides weisses Feld + definierter Rand -> auf jedem Karten-Tint klar sichtbar (bewusste Design-Wahl des Nutzers). Checked bleibt der Bootstrap-Primary-Fill unberuehrt. */ .task-sla-summary .task-reminder-ch input:not(:checked) { background-color: #fff; border-color: color-mix(in srgb, var(--cin-border-secondary) 55%, var(--cin-text-secondary)); } /* Master-Toggle als gleiche neutrale Chip-Insel wie die Kanal-Gruppen (Lesbarkeit auf Tint). */ .task-sla-summary .task-reminder-master { cursor: pointer; white-space: nowrap; padding: 0.15rem 0.6rem; border: 1px solid color-mix(in srgb, var(--cin-border-secondary) 70%, var(--cin-text-secondary)); border-radius: 999px; background-color: color-mix(in srgb, var(--cin-surface-raised) 50%, transparent); color: var(--cin-text-secondary); } /* Punkt 1: Bootstrap-form-switch bringt padding-left:2.5em + margin-left:-2.5em am Input mit — im Flex-Titel zieht das den Switch in den Titel. Das Chip-padding oben killt das padding-left; hier noch den negativen Input-Margin neutralisieren, damit der Switch sauber im Chip sitzt. */ .task-sla-summary .task-reminder-master .form-check-input { margin-left: 0; margin-top: 0; float: none; } /* Aktiver Ausloeser (mind. ein Kanal gewaehlt) faerbt seinen Text gruen — animiert. Die Kanal- Checkboxen behalten ihre eigene Farbe (explizit gesetzt), nur Icon/Label/Wert werden gruen. */ .task-sla-summary .task-sla-meta-start, .task-sla-summary .task-sla-warning-text { transition: color 0.25s ease; } .task-sla-summary .task-reminder-active { color: var(--bs-success); } /* Status/Prioritaet: das Status-Label kann durch den „x/y abgezeichnet"-Chip 2-zeilig werden (v.a. in der schmalen col-6 auf Mobile) und wuerde sein Select nach unten schieben. Beide Spalten als Flex-Column mit dem Select am unteren Rand -> die Selects stehen auf gleicher Hoehe (die Grid-Zeile ist ohnehin gleich hoch). */ .task-form-field-col { display: flex; flex-direction: column; /* Container fuer die Icon-only-Collapse-Query des Status-/Prioritaets-Dropdowns (siehe unten). */ container-type: inline-size; } .task-form-field-col>.form-select { margin-top: auto; } /* Aufgabe-Karte als Query-Container: im Popup stehen drei Karten nebeneinander (Aufgabe ~33rem), da ist die Status-/Prioritaets-Spalte (col-md-3, ~118px) schmaler als die 8rem-Icon-only-Schwelle unten und das Label wuerde nie erscheinen. Unterhalb ~40rem Kartenbreite deshalb umbrechen: Titel volle Breite, Status + Prioritaet je zur Haelfte (~260px) auf der naechsten Zeile -> jedes Label passt komplett. Gilt breitenabhaengig (auch fuer ein eng gezogenes Split-View-Panel), nicht nur "im Popup". */ .task-aufgabe-col { container-type: inline-size; container-name: taskcard; } @container taskcard (max-width: 40rem) { .task-form-title-col { width: 100%; } .task-form-field-col { width: 50%; } } /* Status-/Prioritaets-Dropdown (farbiges Icon+Label statt nacktem hat in Firefox eine deutlich größere intrinsische Mindestbreite und schrumpft mit flex-shrink-0 nicht → Datum + Toggle + × drückten das × aus dem Popup (in Chrome schrumpft das Date-Input genug, um zu passen). Grid-Stack wie bei „Zuweisung": Zeile 1 = Titel + ×, Zeile 2 = Datum + Erledigt-Schalter. Deterministisch, unabhängig von Eigenbreiten. */ .project-milestone-row { /* !important: die Zeile trägt Bootstraps .d-flex (display:flex!important) → sonst gewinnt flex. */ display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; } .project-milestone-title { grid-column: 1; grid-row: 1; min-width: 0; } .project-milestone-remove { grid-column: 2; grid-row: 1; } .project-milestone-due { grid-column: 1; grid-row: 2; min-width: 0; /* Inline-style max-width:170px aufheben → das Date-Input füllt die Zeile statt zu überlaufen. */ max-width: none !important; } .project-milestone-row>.form-switch { grid-column: 2; grid-row: 2; justify-self: center; } } /* Breites Panel/Popup (>640px, Labels sichtbar): 9 beschriftete Reiter überschreiten die Zeilenbreite (z. B. im XL-Popup) → sonst horizontaler Scroll + der bewusst sichtbare dünne Scrollbalken. Stattdessen UMBRECHEN: die Leiste bleibt einzeilig, wenn sie passt, und bricht sonst auf zwei Zeilen um — nie ein Scrollbalken, jeder Reiter erreichbar. !important, weil die Utility-Klassen .flex-nowrap/.overflow-x-auto am