/* ========================================
CIN CRM - Modern Design System testing light and dark mode
======================================== */
[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;
/* 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] {
/* 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;
/* 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,');
}
/* Scrollbars */
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 0px 3px rgba(var(--bs-primary-rgb), 0.3);
border-radius: 5px;
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
-webkit-box-shadow: inset 0 0 0px 6px rgba(var(--bs-primary-rgb), 0.5);
cursor: grab;
}
/* 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(--cin-border-secondary);
}
.nav-line .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;
}
.nav-line .nav-link:hover,
.nav-line .nav-link:focus {
color: var(--cin-foreground);
border-bottom-color: var(--cin-border-secondary);
}
.nav-line .nav-link.active {
color: var(--cin-foreground);
border-bottom-color: var(--bs-link-color);
font-weight: 600;
}
.nav-line .nav-link.disabled {
color: var(--cin-text-muted);
border-bottom-color: transparent;
}
html,
body {
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
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 {
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.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); */
}
[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 {
background: transparent;
height: auto !important;
overflow: visible;
display: flex;
flex-direction: column;
position: absolute;
inset: 5px;
}
#dashboard-widgets.grid-stack>.grid-stack-item>.grid-stack-item-content>* {
height: 100%;
}
#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;
}
/* 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 */
.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;
right: -100%;
transition: right 0.5s cubic-bezier(.17, .67, .83, .67);
z-index: var(--bs-modal-zindex);
}
.side-modal.show {
right: 0%;
}
.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 */
.modal-backdrop.show {
background-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* Wenn bereits ein Backdrop existiert, wird jeder weitere transparent.
Greift wenn ein Side-Modal offen ist und ein reguläres Modal darüber öffnet. */
.modal-backdrop.show+.modal-backdrop.show {
background-color: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* Modal Header/Footer: grauer Hintergrund */
.window-modal .modal-header,
.window-modal .modal-footer {
background-color: #f3f4f678;
}
.window-modal .modal-body {
background-color: #f3f4f678;
}
.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-editor-shell {
display: flex;
flex-direction: column;
min-height: clamp(320px, 42vh, 520px);
}
.email-compose-editor-quill.ql-container {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: clamp(220px, 42vh, 520px);
height: clamp(220px, 42vh, 520px) !important;
}
.email-compose-editor-quill .ql-editor {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
.email-compose-editor-text {
height: clamp(220px, 42vh, 520px);
min-height: 220px;
resize: vertical;
}
@media (max-width: 767.98px) {
.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;
}
}
/** 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);
}
[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;
}
.side-modal {
right: -75%;
}
.side-modal-65 {
width: 65% !important;
right: -65%;
}
}
@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 {
border-top: 1px solid var(--bs-border-color);
padding: 0.5rem 0.75rem 0.75rem;
}
.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);
}
/* Focus Mode - Vertical Tabs */
.communication-left-panel.focus-mode {
width: 90px !important;
max-width: 90px;
min-width: 90px;
}
.communication-left-panel.focus-mode .workspace-mode-btn {
width: 100%;
justify-content: center;
}
.communication-left-panel.focus-mode .card-body>div:first-child {
flex-direction: column;
gap: 0.5rem;
}
/* Focus-Mode X-Button */
.focus-mode-close-btn {
position: absolute;
top: 0.25rem;
right: 0.25rem;
padding: 0rem;
border-radius: 0.375rem;
z-index: 100;
display: none;
min-width: auto;
width: auto;
min-height: auto;
}
.focus-mode-close-btn i {
font-size: 0.75rem;
}
.communication-left-panel.focus-mode .workspace-mode-buttons {
display: none !important;
}
.communication-left-panel.focus-mode .focus-mode-close-btn {
display: flex !important;
align-items: center;
justify-content: center;
}
/* Focus-Mode: Search Button anzeigen, normale Suche verstecken */
.communication-left-panel.focus-mode .focus-mode-search-button {
display: block !important;
}
.communication-left-panel.focus-mode .communication-search-control {
display: none !important;
}
/* Focus-Mode Search Popover */
.focus-search-popover {
position: fixed;
z-index: 1050;
background-color: #ffffff !important;
border: 1px solid var(--cin-border);
border-radius: 0.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
min-width: 400px;
max-width: 500px;
}
[data-bs-theme="dark"] .focus-search-popover {
background-color: var(--cin-background) !important;
}
.focus-search-popover-content {
padding: 1rem;
}
.focus-search-header {
border-color: var(--cin-border) !important;
}
.focus-search-header h6 {
color: var(--cin-text-primary);
font-weight: 600;
}
.focus-search-popover #focus-search-input::placeholder {
color: transparent;
}
/* Focus-Mode: Minimal Mail-Liste (nur Icons) */
.communication-left-panel.focus-mode .mail-item .comm-item-body {
padding: 0.5rem;
}
/* Main Container: vertikal zentriert */
.communication-left-panel.focus-mode .mail-item .comm-item-body>.d-flex {
flex-direction: column !important;
align-items: center !important;
gap: 0.5rem !important;
}
/* Verstecke Content-Container (enthält Name, Betreff, Preview, etc.) */
.communication-left-panel.focus-mode .mail-item .flex-fill {
display: none !important;
}
/* Avatar größer */
.communication-left-panel.focus-mode .comm-item-avatar {
width: 3rem !important;
height: 3rem !important;
}
/* Type-Icon anzeigen */
.communication-left-panel.focus-mode .comm-item-type-badge {
background: transparent !important;
border: none !important;
padding: 0 !important;
}
.communication-left-panel.focus-mode .comm-item-type-badge span {
display: none !important;
}
.communication-left-panel.focus-mode .comm-item-type-badge i {
font-size: 1.5rem !important;
color: var(--cin-text-secondary) !important;
}
/* Zeige nur das richtige Icon basierend auf Typ */
.communication-left-panel.focus-mode .mail-item-wrapper[data-type="email"] .bi-ticket-perforated {
display: none !important;
}
.communication-left-panel.focus-mode .mail-item-wrapper[data-type="ticket"] .bi-envelope {
display: none !important;
}
@media (max-width: 767.98px) {
.communication-header {
min-height: 0;
padding: 0;
}
.communication-header .workspace-mode-buttons {
display: none !important;
}
}
/* 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-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;
}
/* Gruppen-Header ("Dieses Jahr", "Heute", etc.) */
.listjs-group {
margin-bottom: 0.75rem;
}
.inner-listjs-group {
padding: 0.5rem 1rem;
background-color: #ffffff;
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(--cin-background);
}
.inner-listjs-group .label {
padding: 0;
font-size: 0.875rem;
font-weight: 600;
color: var(--cin-text-secondary);
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:hover {
background-color: inherit;
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;
}
}
.badge-important {
color: var(--cin-danger) !important;
}
.badge.tag-badge,
.badge.preview-badge {
font-weight: var(--cin-tag-font-weight, 500) !important;
}
/* Internal Notes */
.internal-note-avatar {
width: 1.75rem;
height: 1.75rem;
background: var(--bs-primary);
color: #fff;
}
.internal-note-own .internal-note-bubble {
background-color: var(--cin-chat-sent);
color: #fff;
}
.internal-note-other .internal-note-bubble {
background-color: var(--bs-tertiary-bg);
color: var(--bs-body-color);
}
.internal-note-resolved .internal-note-bubble {
opacity: 0.55;
}
.internal-notes-composer textarea {
resize: none;
max-height: 120px;
}
#internal-tab-pane.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;
}
.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 {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
#tasks-tab-pane.active,
#history-tab-pane.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;
}
.mail-detail-modal-content {
min-height: 0;
overflow: hidden;
}
.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 {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.5rem;
flex-wrap: wrap;
min-width: 0;
}
.detail-badge-bar .btn,
.detail-badge-bar .badge {
flex-shrink: 0;
}
.detail-badge-bar .btn {
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 {
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;
}
/* 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;
}
.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;
}
.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: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.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-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%;
}
.ticket-sla-badge {
border: 0;
cursor: pointer;
font: inherit;
}
.ticket-sla-badge:hover,
.ticket-sla-badge:focus-visible {
filter: brightness(0.96);
}
.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);
}
.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);
}
@media (max-width: 767.98px) {
.detail-ticket-info {
grid-template-columns: 1fr;
}
.ticket-sla-card-header,
.ticket-sla-progress-labels {
align-items: flex-start;
flex-direction: column;
gap: 0.5rem;
}
}
.ticket-info-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.ticket-info-label {
font-size: 0.75rem;
font-weight: 500;
color: var(--cin-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.ticket-info-value {
font-size: 0.875rem;
font-weight: 600;
color: var(--cin-foreground);
}
.ticket-info-value.priority-urgent {
color: #ef4444;
}
.ticket-info-value.priority-high {
color: #f97316;
}
.ticket-info-value.priority-medium {
color: #eab308;
}
.ticket-info-value.priority-low {
color: #22c55e;
}
/* Dark mode adjustments for status badges */
[data-bs-theme="dark"] {
& .status-badge,
& .tag-badge {
&.status-blue,
&[data-status-color=blue] {
background-color: rgba(59, 130, 246, 0.15);
color: #60a5fa;
}
&.status-purple,
&[data-status-color=purple] {
background-color: rgba(168, 85, 247, 0.15);
color: #c084fc;
}
&.status-yellow,
&[data-status-color=yellow] {
background-color: rgba(234, 179, 8, 0.15);
color: #fbbf24;
}
&.status-cyan,
&[data-status-color=cyan] {
background-color: rgba(6, 182, 212, 0.15);
color: #22d3ee;
}
&.status-orange,
&[data-status-color=orange] {
background-color: rgba(249, 115, 22, 0.15);
color: #fb923c;
}
&.status-green,
&[data-status-color=green] {
background-color: rgba(34, 197, 94, 0.15);
color: #4ade80;
}
&.status-gray,
&[data-status-color=gray] {
background-color: rgba(156, 163, 175, 0.15);
color: #d1d5db;
}
&.status-red,
&[data-status-color=red] {
background-color: rgba(239, 68, 68, 0.15);
color: #f87171;
}
&.status-secondary,
&[data-status-color=secondary] {
background-color: rgba(156, 163, 175, 0.15);
color: #d1d5db;
}
&.status-success,
&[data-status-color=success] {
background-color: rgba(34, 197, 94, 0.15);
color: #86efac;
}
&.status-warning,
&[data-status-color=warning] {
background-color: rgba(245, 158, 11, 0.16);
color: #fcd34d;
}
&.status-danger,
&[data-status-color=danger] {
background-color: rgba(239, 68, 68, 0.15);
color: #fca5a5;
}
&.type-ticket {
background-color: rgba(168, 85, 247, 0.15);
color: #c084fc;
}
}
}
/* Status Change Modal */
.status-change-modal h4 {
margin: 0 0 1rem 0 !important;
font-size: 1.25rem !important;
font-weight: 600 !important;
color: var(--cin-foreground) !important;
}
.status-change-modal .current-status {
margin: 0 0 1.5rem 0;
font-size: 0.875rem;
color: var(--cin-text-secondary);
display: flex;
align-items: center;
gap: 0.5rem;
}
.status-options-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.status-option {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1rem;
background: var(--cin-bg-elevated);
border: 2px solid var(--cin-border);
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.2s;
}
.status-option:hover {
border-color: var(--bs-primary);
background: var(--cin-background);
transform: translateY(-2px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.status-option-badge {
font-size: 0.875rem;
font-weight: 500;
padding: 0.25rem 0.75rem;
border-radius: 0.375rem;
}
.status-option i {
color: var(--cin-text-muted);
font-size: 1rem;
}
.status-reason-section {
margin-top: 1.5rem;
}
.status-reason-section label {
display: block;
margin-bottom: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--cin-foreground);
}
.status-reason-section textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--cin-border);
border-radius: 0.5rem;
background: var(--cin-bg-elevated);
color: var(--cin-foreground);
font-family: inherit;
font-size: 0.875rem;
resize: vertical;
transition: border-color 0.2s;
}
.status-reason-section textarea:focus {
outline: none;
border-color: var(--bs-primary);
}
[data-bs-theme="dark"] .status-option:hover {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
/* Empty State (for empty tabs) */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem 2rem;
text-align: center;
flex: 1;
}
.empty-icon {
font-size: 4rem;
color: var(--cin-border);
margin-bottom: 1rem;
}
.empty-title {
font-size: 1.125rem;
font-weight: 600;
color: var(--cin-text-secondary);
margin: 0 0 0.5rem 0;
}
.empty-text {
font-size: 0.875rem;
color: var(--cin-text-muted);
max-width: 24rem;
}
/* Responsive */
@media (max-width: 768px) {
.communication-main {
flex-direction: column;
}
.communication-left-panel {
width: 100% !important;
}
.communication-resize-handle {
display: none;
}
.tab-text {
display: none;
}
.communication-tab {
padding: 0.75rem 0.5rem;
}
.mail-detail-modal .modal-dialog {
max-width: 100%;
height: calc(100dvh - 1rem);
margin: 0.5rem;
}
}
/* ========================================
Dashboard UI Migration 2026-03-26
======================================== */
/* Surface Variants (aus Design-Audit Anhang A) */
.crm-surface-shell {
background-color: var(--cin-background);
color: var(--cin-foreground);
}
.crm-surface-panel {
background-color: var(--cin-surface);
border: 1px solid var(--cin-border);
color: var(--cin-foreground);
}
.crm-surface-elevated {
background-color: var(--cin-surface);
border: 1px solid var(--cin-border);
box-shadow: var(--cin-shadow-sm);
color: var(--cin-foreground);
}
.crm-surface-muted {
background-color: var(--cin-surface-subtle);
border: 1px solid var(--cin-border-secondary);
color: var(--cin-foreground);
}
.crm-hover-surface {
transition: background-color 200ms ease;
}
.crm-hover-surface:hover {
background-color: var(--cin-surface-hover);
}
.crm-hover-surface-strong {
transition: background-color 200ms ease;
}
.crm-hover-surface-strong:hover {
background-color: var(--cin-surface-active);
}
/* Text Variants */
.crm-text-strong {
color: var(--cin-foreground);
font-weight: 600;
}
.crm-text-soft {
color: var(--cin-text-secondary);
}
.crm-text-muted {
color: var(--cin-text-muted);
}
/* Hover Shadow */
.hover-shadow-lg {
transition: box-shadow 300ms ease;
}
.hover-shadow-lg:hover {
box-shadow: var(--cin-shadow-lg);
}
/* Translate on Hover */
.hover-translate-y-1 {
transition: transform 300ms ease;
}
.hover-translate-y-1:hover {
transform: translateY(-0.25rem);
}
/* Active Scale */
.active-scale-98:active {
transform: scale(0.98);
}
/* Widget Icon Component */
.widget-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
min-width: 2.75rem;
min-height: 2.75rem;
flex-shrink: 0;
padding: 0.75rem;
border-radius: var(--bs-border-radius-lg);
transition: all 300ms ease;
}
@media (min-width: 768px) {
.widget-icon {
padding: 1rem;
}
}
.widget-icon-default {
background-color: var(--cin-surface-subtle);
color: var(--cin-text-secondary);
transition: background-color 200ms ease, color 200ms ease;
}
.dashboard-widget-item:hover .widget-icon-default {
background-color: var(--bs-primary);
color: white;
}
.widget-icon-primary {
background-color: var(--bs-primary);
/* CIN Brand Blue */
color: white;
box-shadow: 0 10px 15px -3px rgba(var(--bs-primary-rgb), 0.3);
}
/* Hover-Effekt: Default → Primary */
.group:hover .widget-icon-default {
background-color: var(--bs-primary);
color: white;
}
/* Metric Card Component */
.metric-card {
position: relative;
height: 100%;
padding: 1rem;
border-radius: var(--bs-border-radius-lg);
border: 1px solid var(--cin-border);
transition: all 300ms ease;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 200px;
}
@media (min-width: 768px) {
.metric-card {
padding: 1.75rem;
}
}
/* Standard-Karte */
.metric-card-default {
background-color: var(--cin-surface);
box-shadow: var(--cin-shadow-sm);
}
.metric-card-default:hover {
box-shadow: var(--cin-shadow-lg);
border-color: var(--cin-border-secondary);
transform: translateY(-0.25rem);
}
.metric-card-default:active {
transform: scale(0.98);
box-shadow: var(--cin-shadow-md);
}
/* Primary-Karte (hervorgehoben) */
.metric-card-primary {
background-color: var(--cin-surface);
box-shadow: 0 20px 25px -5px rgba(var(--bs-primary-rgb), 0.1),
0 8px 10px -6px rgba(var(--bs-primary-rgb), 0.1);
border-color: transparent;
z-index: 10;
transform: scale(1.05);
ring: 1px solid var(--cin-border);
}
/* Dark Mode Overrides */
[data-bs-theme=dark] .metric-card-primary {
box-shadow: none;
ring-color: var(--cin-border);
}
/* Metric Value */
.metric-card-value {
font-size: 2rem;
font-weight: bold;
line-height: 1.2;
}
@media (min-width: 768px) {
.metric-card-value {
font-size: 2.5rem;
}
}
/* Change Badge */
.metric-card-change {
position: static;
padding: 0.375rem 0.75rem;
border-radius: var(--bs-border-radius);
font-size: 0.75rem;
font-weight: bold;
display: inline-flex;
align-items: center;
gap: 0.375rem;
min-height: 32px;
margin-left: auto;
flex-shrink: 0;
white-space: nowrap;
}
.metric-card-change-up {
background-color: var(--cin-success-light);
color: var(--cin-ticket-closed);
}
.metric-card-change-down {
background-color: var(--cin-danger-light);
color: var(--cin-danger);
/* rose-600 */
}
[data-bs-theme=dark] .metric-card-change-down {
background-color: rgba(225, 29, 72, 0.2);
color: #fecdd3;
}
/* Edit-Mode Hover States (zukünftig) */
.dashboard-widget-item[data-hovered=true] {
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.6) inset,
0 0 18px rgba(37, 99, 235, 0.25);
}
/* ========================================
Phone API Panel Layout
======================================== */
#main-wrapper {
/* Drag'n'Drop Zones for user states panel */
#user-states-layout-dropzones {
inset: 0;
z-index: 9999;
pointer-events: none;
.user-state-layout-dropzone {
min-width: 5.5rem;
opacity: 0;
transform: scale(0.95);
transition: opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease;
pointer-events: none;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
&.user-state-layout-dropzone-top {
top: 0.5rem;
left: 50%;
transform: translateX(-50%) scale(0.95);
}
&.user-state-layout-dropzone-bottom {
bottom: 0.5rem;
left: 50%;
transform: translateX(-50%) scale(0.95);
}
&.user-state-layout-dropzone-left {
top: 50%;
left: 0.5rem;
transform: translateY(-50%) scale(0.95);
}
&.user-state-layout-dropzone-right {
top: 50%;
right: 0.5rem;
transform: translateY(-50%) scale(0.95);
}
&.is-drop-target {
box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.35), 0 8px 24px rgba(13, 110, 253, 0.28);
}
}
&.phone-layout-drag-active {
.user-state-layout-dropzone {
opacity: 1;
pointer-events: auto;
}
.user-state-layout-dropzone-top,
.user-state-layout-dropzone-bottom {
transform: translateX(-50%) scale(1);
}
.user-state-layout-dropzone-left,
.user-state-layout-dropzone-right {
transform: translateY(-50%) scale(1);
}
}
}
#user-state-panel {
order: 1;
#user-state-list-wrapper {
min-width: 0;
.user-state-search-wrapper {
display: inline-flex;
align-items: center;
flex-shrink: 0;
.user-state-search-toggle-input {
width: 0;
min-width: 0;
margin-left: 0;
opacity: 0;
padding-left: 0;
padding-right: 0;
transition: width 180ms ease, opacity 180ms ease, margin-left 180ms ease, border-width 180ms ease, padding 180ms ease;
}
&.is-open .user-state-search-toggle-input {
width: min(18rem, 35vw);
margin-left: 0.5rem;
opacity: 1;
padding: .25rem .5rem;
}
}
.user-state-list {
min-height: 0;
min-width: 0;
flex: 1 1 auto;
align-items: center;
.user-state-item {
--phone-status-color: #16a34a;
/* border: 1px solid var(--bs-border-color-translucent); */
/* border-radius: 0.625rem; */
padding: 0.5rem 0.625rem;
/* background: var(--bs-body-bg); */
transition: border-color 180ms ease, background-color 180ms ease;
flex: 0 0 auto;
min-width: 120px;
max-width: 360px;
&:hover {
border-color: var(--bs-border-color);
background-color: var(--bs-tertiary-bg);
}
[data-eplatformstatus=online] {
--phone-status-color: #16a34a;
}
[data-eplatformstatus=busy] {
--phone-status-color: #6ccf8a;
}
[data-eplatformstatus=pause] {
--phone-status-color: #d97706;
}
[data-eplatformstatus=date] {
--phone-status-color: #0284c7;
}
[data-eplatformstatus=absent] {
--phone-status-color: #6b7280;
}
[data-eplatformstatus=dnd] {
--phone-status-color: #dc2626;
}
[data-eplatformstatus=offline] {
--phone-status-color: #6b7280;
}
&[data-active="0"] {
opacity: 0.65;
}
.phone-status-chip {
width: 2rem;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
color: #fff;
background-color: var(--phone-status-color);
padding-top: .25rem;
padding-bottom: .25rem;
border: 1px solid var(--phone-status-color);
}
}
}
}
}
#main-wrapper-inner {
min-width: 0;
order: 2;
margin-top: 0 !important;
}
&[data-phone-layout=left],
&[data-phone-layout=right] {
#user-state-panel {
/* width: min(200px, 20%); */
flex: 0 0 auto;
max-width: 200px;
#user-state-list-wrapper {
flex-direction: column;
align-items: stretch !important;
height: 100dvh;
.user-state-search-wrapper,
.user-state-search-wrapper.is-open .user-state-search-toggle-input {
width: 100%;
}
.user-state-list {
flex-direction: column;
align-items: stretch;
.user-state-item {
min-width: 0;
max-width: none;
}
}
}
}
#main-wrapper-inner {
flex: 1 1 auto;
width: auto;
}
}
&[data-phone-layout=top],
&[data-phone-layout=bottom] {
flex-direction: column;
}
&[data-phone-layout=top] {
#user-state-panel {
/* order: 1; */
}
#main-wrapper-inner {
order: 2;
margin-top: 0 !important;
}
}
&[data-phone-layout=bottom] {
#user-state-panel {
order: 2;
}
#main-wrapper-inner {
order: 1;
margin-top: 0 !important;
}
}
&[data-phone-layout=right] {
#user-state-panel {
order: 2;
}
#main-wrapper-inner {
order: 1;
margin-top: 0 !important;
}
}
}
@media (max-width: 767.98px) {
#main-wrapper {
gap: 0;
}
}
/* Widget Resize Handle */
.widget-resize-handle {
position: absolute;
bottom: 0;
right: 0;
width: 16px;
height: 16px;
cursor: ns-resize;
opacity: 0.3;
transition: opacity 200ms ease;
background: linear-gradient(135deg,
transparent 50%,
var(--cin-text-muted) 50%);
border-bottom-right-radius: var(--bs-border-radius);
pointer-events: auto;
}
.widget-resize-handle:hover {
opacity: 0.8;
}
/* Responsive Border-Radius für Widgets */
.rounded-widget {
border-radius: var(--bs-border-radius-lg);
/* 1rem = 16px */
}
@media (min-width: 768px) {
.rounded-widget {
border-radius: var(--bs-border-radius-xl);
/* 1.5rem = 24px */
}
}
/* ========================================
Widget-Verwaltungs-Sidebar
======================================== */
/* Sidebar Container */
.widget-sidebar {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 320px;
background-color: var(--cin-surface);
border-left: 1px solid var(--cin-border);
box-shadow: var(--cin-shadow-xl);
z-index: 1030;
transform: translateX(100%);
transition: transform 300ms ease-in-out;
display: flex;
flex-direction: column;
}
.widget-sidebar[data-open="true"] {
transform: translateX(0);
}
.widget-sidebar[data-collapsed="true"] {
transform: translateX(100%);
}
/* Backdrop (Mobile) */
.widget-sidebar-backdrop {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
inset: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1020;
opacity: 0;
pointer-events: none;
transition: opacity 300ms ease-in-out;
}
.widget-sidebar-backdrop[data-open="true"] {
opacity: 1;
pointer-events: auto;
}
/* Hide backdrop on desktop */
@media (min-width: 1024px) {
.widget-sidebar-backdrop {
display: none;
}
}
/* Collapse Toggle Button (now outside sidebar) */
.widget-sidebar-toggle {
position: fixed;
top: 50%;
transform: translateY(-50%);
z-index: 1035;
border: 1px solid var(--cin-border);
border-right: none;
border-radius: var(--bs-border-radius-lg) 0 0 var(--bs-border-radius-lg);
background-color: var(--cin-surface);
padding: 0.75rem;
box-shadow: var(--cin-shadow-lg);
opacity: 0;
pointer-events: none;
transition: right 300ms ease-in-out, background-color 150ms, opacity 150ms ease;
cursor: pointer;
}
.widget-sidebar-toggle:hover {
background-color: var(--cin-surface-hover);
}
/* Hide button when sidebar is closed */
.widget-sidebar-toggle[data-open="false"] {
display: none;
}
.widget-sidebar-toggle[data-open="true"][data-visible="true"] {
opacity: 1;
pointer-events: auto;
}
/* Button position when sidebar is open and expanded */
.widget-sidebar-toggle[data-open="true"][data-collapsed="false"] {
right: 320px;
}
/* Button position when sidebar is open but collapsed */
.widget-sidebar-toggle[data-open="true"][data-collapsed="true"] {
right: 0;
}
/* Sidebar Content */
.widget-sidebar-content {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
position: relative;
z-index: 50;
}
/* Header */
.widget-sidebar-header {
flex-shrink: 0;
padding: 1.5rem;
border-bottom: 1px solid var(--cin-border);
}
.widget-sidebar-header h2 {
font-size: 1.25rem;
font-weight: 700;
color: var(--cin-foreground);
margin-bottom: 0.5rem;
}
.widget-sidebar-header .subtitle {
font-size: 0.875rem;
color: var(--cin-text-muted);
margin-bottom: 1rem;
}
.widget-sidebar-close-btn {
position: absolute;
top: 1.5rem;
right: 1.5rem;
padding: 0.5rem;
background-color: transparent;
border: none;
border-radius: var(--bs-border-radius-lg);
color: var(--cin-foreground);
cursor: pointer;
transition: background-color 150ms;
}
.widget-sidebar-close-btn:hover {
background-color: var(--cin-surface-hover);
}
/* Device Selector */
.device-selector {
display: flex;
gap: 0.5rem;
}
.device-selector button {
flex: 1;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
font-weight: 600;
border: 1px solid var(--cin-border);
border-radius: var(--bs-border-radius);
background-color: var(--cin-surface);
color: var(--cin-text-secondary);
cursor: pointer;
transition: all 150ms;
}
.device-selector button:hover {
background-color: var(--cin-surface-hover);
}
.device-selector button[data-active="true"] {
background-color: var(--cin-accent-soft);
color: var(--bs-primary);
border-color: var(--bs-primary);
}
/* Widget List Container */
.widget-list-container {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 0.5rem;
}
/* Category Header */
.widget-category-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem;
border-radius: var(--bs-border-radius-lg);
cursor: pointer;
transition: background-color 150ms;
}
.widget-category-header:hover {
background-color: var(--cin-surface-hover);
}
.widget-category-header .category-title {
display: flex;
align-items: center;
gap: 0.5rem;
}
.widget-category-header .category-title i {
color: var(--cin-text-muted);
font-size: 1.125rem;
}
.widget-category-header .category-title span {
font-size: 0.875rem;
font-weight: 700;
color: var(--cin-foreground);
}
.widget-category-header .category-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.5rem;
height: 1.5rem;
padding: 0 0.5rem;
font-size: 0.75rem;
font-weight: 600;
background-color: var(--cin-accent-soft);
color: var(--bs-primary);
border-radius: 0.375rem;
}
.widget-category-header .chevron {
transition: transform 200ms;
color: var(--cin-text-muted);
}
.widget-category-header[data-open="true"] .chevron {
transform: rotate(180deg);
}
/* Category Content */
.widget-category-content {
padding: 0.5rem 1rem 0.5rem 2.5rem;
display: none;
}
.widget-category-content[data-open="true"] {
display: block;
}
/* Category Actions */
.widget-category-actions {
display: flex;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.widget-category-actions button {
flex: 1;
padding: 0.5rem 0.75rem;
font-size: 0.75rem;
font-weight: 700;
border: 1px solid var(--cin-border);
border-radius: var(--bs-border-radius-lg);
background-color: var(--cin-surface);
color: var(--cin-text-secondary);
cursor: pointer;
transition: background-color 150ms;
}
.widget-category-actions button:hover {
background-color: var(--cin-surface-hover);
}
/* Widget Item Card */
.widget-item-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.75rem;
margin-bottom: 0.5rem;
border: 1px solid var(--cin-border);
border-radius: var(--bs-border-radius-lg);
background-color: var(--cin-surface);
cursor: pointer;
transition: all 150ms;
}
.widget-item-card:hover {
border-color: var(--cin-border-secondary);
}
.widget-item-card[data-visible="false"] {
background-color: var(--cin-surface-subtle);
border-color: var(--cin-border-secondary);
}
.widget-item-card .widget-icon {
display: flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
flex-shrink: 0;
border-radius: var(--bs-border-radius-lg);
background-color: var(--cin-accent-soft);
color: var(--bs-primary);
}
.widget-item-card[data-visible="false"] .widget-icon {
background-color: var(--cin-surface-subtle);
color: var(--cin-text-muted);
}
.widget-item-card .widget-info {
flex: 1;
min-width: 0;
}
.widget-item-card .widget-title {
font-size: 0.75rem;
font-weight: 700;
color: var(--cin-foreground);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.widget-item-card[data-visible="false"] .widget-title {
color: var(--cin-text-muted);
}
.widget-item-card .widget-type {
font-size: 0.625rem;
font-weight: 600;
color: var(--cin-text-muted);
}
.widget-item-card .widget-toggle-btn {
display: flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
flex-shrink: 0;
border-radius: var(--bs-border-radius-lg);
background-color: var(--cin-accent-soft);
color: var(--bs-primary);
border: none;
cursor: pointer;
transition: background-color 150ms;
}
.widget-item-card .widget-toggle-btn:hover {
background-color: rgba(var(--cin-background-rgb), 0.85);
}
.widget-item-card[data-visible="false"] .widget-toggle-btn {
background-color: var(--cin-surface-subtle);
color: var(--cin-text-muted);
}
/* Pulse Animation */
@keyframes widgetPulse {
0% {
box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0.35);
}
70% {
box-shadow: 0 0 0 10px rgba(var(--bs-primary-rgb), 0);
}
100% {
box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0);
}
}
.widget-pulse {
animation: widgetPulse 900ms ease-out;
}
/* Footer */
.widget-sidebar-footer {
flex-shrink: 0;
padding: 1rem;
border-top: 1px solid var(--cin-border);
background-color: var(--cin-surface);
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.widget-sidebar-footer button {
width: 100%;
padding: 0.75rem 1rem;
font-size: 0.875rem;
font-weight: 700;
border-radius: var(--bs-border-radius-xl);
border: none;
cursor: pointer;
transition: all 150ms;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.widget-sidebar-footer .reset-layout-btn {
background-color: var(--cin-surface-subtle);
color: var(--cin-text-secondary);
}
.widget-sidebar-footer .reset-layout-btn:hover {
background-color: var(--cin-surface-hover);
}
.widget-sidebar-footer .save-close-btn {
background-color: #10b981;
color: #ffffff;
}
.widget-sidebar-footer .save-close-btn:hover {
background-color: #059669;
}
/* Activities Widget — Grid-freundlich, Liste scrollt intern */
.dashboard-widget-item[data-widget="activities-list"] {
align-self: stretch;
}
.dashboard-widget-item[data-widget="activities-list"] [data-role="activities-list"] {
flex: 1;
min-height: 0;
overflow-y: auto;
max-height: 500px;
}
/* === bs-calendar Theme Integration === */
/* Light Theme */
[data-bs-theme=light] .bs-calendar {
--bs-body-bg: var(--cin-surface);
--bs-border-color: var(--cin-border);
}
/* Dark Theme */
[data-bs-theme=dark] .bs-calendar {
--bs-body-bg: var(--cin-background);
--bs-border-color: var(--cin-border);
--bs-body-color: var(--cin-foreground);
--bs-secondary-color: var(--cin-text-muted);
}
/* Events harmonisieren */
.bs-calendar .badge {
border-radius: var(--bs-border-radius-sm);
}
/* Event-Text: bs-calendar setzt automatisch weiße/schwarze Farbe basierend auf Hintergrund
Problem: .text-small aus crm.css überschreibt dies mit grauer Farbe
Lösung: Spezifischere Regel für Kalender-Events */
.bs-calendar [data-appointment] small,
.bs-calendar [data-appointment] .text-small {
color: inherit !important;
}
/* Heute-Markierung */
.bs-calendar .today {
background-color: var(--cin-accent-soft) !important;
}
/* === Dashboard Calendar Widget View Toggle === */
[data-widget="calendar"] [data-role="view-toggle"] button {
background: transparent;
border: none;
color: var(--cin-text-muted);
transition: all 0.2s ease;
}
[data-widget="calendar"] [data-role="view-toggle"] button:hover {
color: var(--cin-text-secondary);
}
[data-widget="calendar"] [data-role="view-toggle"] button.active {
background: var(--bs-body-bg);
color: var(--cin-foreground);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
[data-bs-theme=dark] [data-widget="calendar"] [data-role="view-toggle"] button.active {
box-shadow: none;
}
/* ── Contact Tags Column ── */
[data-col="tags"] {
width: 200px;
max-width: 200px;
}
.contact-tags-cell {
max-width: 200px;
}
.tooltip-tags .tooltip-inner {
background-color: var(--cin-surface, #fff) !important;
border: 1px solid var(--cin-border, #dee2e6);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
max-width: 280px;
}
.tooltip-tags .tooltip-arrow::before {
border-top-color: var(--cin-surface, #fff) !important;
}
/* ── Kommunikations-Tab (Kontaktdetails) ── */
.comm-search-icon {
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--cin-text-muted);
z-index: 2;
}
.comm-search-input {
padding-left: 2.2rem !important;
}
.comm-filter-select {
max-width: 180px;
}
.comm-time-group {
margin-bottom: 1rem;
}
.comm-time-group-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.4rem 0;
margin-bottom: 0.25rem;
font-weight: 600;
font-size: 0.85rem;
color: var(--cin-foreground);
}
.comm-time-group-badge {
font-size: 0.7rem;
font-weight: 500;
color: #fff !important;
}
.comm-table {
border: 1px solid var(--cin-border);
border-radius: var(--bs-border-radius);
overflow: hidden;
}
.comm-table .table {
margin-bottom: 0 !important;
}
.comm-table .table thead th {
background-color: var(--cin-surface) !important;
--bs-table-bg: var(--cin-surface) !important;
}
.comm-table .table tbody tr td {
height: 58px;
vertical-align: middle;
cursor: pointer;
background-color: var(--cin-surface) !important;
--bs-table-bg: var(--cin-surface) !important;
}
.comm-table .table.table-hover>tbody>tr:hover>* {
--bs-table-bg-state: rgba(var(--bs-primary-rgb), 0.05) !important;
--bs-table-color-state: inherit !important;
}
[data-bs-theme="dark"] .comm-table .table.table-hover>tbody>tr:hover>* {
--bs-table-bg-state: rgba(var(--bs-primary-rgb), 0.15) !important;
}
.comm-row.comm-unread {
font-weight: 600;
}
.comm-row .comm-icon {
width: 1.5rem;
text-align: center;
color: var(--cin-text-muted);
}
.comm-row.comm-unread .comm-icon {
color: var(--bs-primary);
}
.comm-row .comm-subject {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.875rem;
}
.comm-row .comm-preview {
font-size: 0.78rem;
color: var(--cin-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 400 !important;
}
.comm-row .comm-meta {
flex-shrink: 0;
text-align: right;
font-size: 0.75rem;
color: var(--cin-text-muted);
white-space: nowrap;
}
.comm-row .comm-from {
font-size: 0.78rem;
color: var(--cin-text-muted);
margin-bottom: 0.1rem;
}
.comm-direction-badge {
font-size: 0.65rem;
padding: 0.1rem 0.35rem;
border-radius: 3px;
}
@media (max-width: 575.98px) {
.comm-table .table .comm-col-date {
display: none !important;
}
.comm-table .table .comm-col-type {
display: none !important;
}
.comm-table .table thead th {
font-size: 0.65rem !important;
}
.comm-table .table tbody tr td {
height: auto;
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important;
}
#comm-content .comm-filter-select {
max-width: 100% !important;
}
}
/* ── Anwender-Tour ── */
.crm-tour {
inset: 0;
pointer-events: none;
position: fixed;
z-index: 2050;
}
.crm-tour-backdrop {
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
background: rgba(13, 27, 42, 0.66);
pointer-events: auto;
position: fixed;
}
.crm-tour-highlight {
border: 2px solid rgba(var(--bs-primary-rgb), 0.95);
border-radius: 0.5rem;
box-shadow:
0 0 0 2px rgba(255, 255, 255, 0.85),
0 0 24px rgba(var(--bs-primary-rgb), 0.55);
pointer-events: none;
position: fixed;
}
.crm-tour-tooltip {
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: 0.5rem;
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.24);
color: var(--bs-body-color);
max-width: calc(100vw - 1.5rem);
padding: 1rem;
pointer-events: auto;
position: fixed;
width: min(22rem, calc(100vw - 1.5rem));
z-index: 2070;
}
.crm-tour-tooltip-header,
.crm-tour-actions,
.crm-tour-step-actions {
align-items: center;
display: flex;
}
.crm-tour-tooltip-header {
justify-content: space-between;
margin-bottom: 0.5rem;
}
.crm-tour-counter {
color: var(--bs-secondary-color);
font-size: 0.8rem;
font-weight: 600;
}
.crm-tour-title {
font-size: 1rem;
font-weight: 700;
line-height: 1.3;
margin: 0 0 0.5rem;
}
.crm-tour-text {
color: var(--bs-secondary-color);
font-size: 0.9rem;
line-height: 1.45;
margin-bottom: 1rem;
}
.crm-tour-actions {
gap: 0.75rem;
justify-content: space-between;
}
.crm-tour-step-actions {
gap: 0.5rem;
}
.crm-tour-tooltip-pulse {
animation: crm-tour-tooltip-pulse 180ms ease-out;
}
@keyframes crm-tour-tooltip-pulse {
0% {
transform: translateX(0);
}
35% {
transform: translateX(-4px);
}
70% {
transform: translateX(4px);
}
100% {
transform: translateX(0);
}
}
@media (max-width: 575.98px) {
.crm-tour-tooltip {
padding: 0.875rem;
}
.crm-tour-actions {
align-items: stretch;
flex-direction: column;
}
.crm-tour-step-actions {
justify-content: flex-end;
}
}
/* ── Opt-in Toggle Icons ── */
.medium-optin-toggle {
cursor: pointer;
transition: color 0.15s ease;
}
.medium-optin-toggle:hover {
opacity: 0.7;
}
.medium-optin-toggle.text-danger {
color: var(--cin-danger, var(--bs-danger)) !important;
}
/* ── Contact Phone Popup ── */
.contact-phone-popover .popover-body {
padding: 0.25rem 0;
min-width: 180px;
}
.contact-phone-popup {
color: var(--cin-text-muted, var(--bs-secondary-color));
font-size: 1.1rem;
}
.contact-phone-popup:hover {
color: var(--cin-primary, var(--bs-primary));
}
/* bs-calendar Event Detail Popup */
#wcCalendarInfoWindowModal .modal-content {
border-radius: 0.75rem !important;
box-shadow: none !important;
}
/* bs-calendar Month View: thin borders on day cells */
#cin-calendar td[data-month-date] {
border-width: 3px !important;
border-style: solid !important;
border-color: rgba(var(--bs-tertiary-bg-rgb), var(--bs-bg-opacity)) !important;
border-radius: 0.75rem !important;
}
/* bs-calendar Week/Day View: visual gap between day columns */
#cin-calendar .wc-day-week-view {
--bs-border-color: #fff !important;
border-right-width: 3px !important;
}
[data-bs-theme=dark] #cin-calendar .wc-day-week-view {
--bs-border-color: var(--cin-background) !important;
}
#cin-calendar [data-day-hour] {
border-top-width: 3px !important;
border-top-color: #fff !important;
}
[data-bs-theme=dark] #cin-calendar [data-day-hour] {
border-top-color: var(--cin-background) !important;
}
/* bs-calendar KW column: prevent line break on two-digit weeks */
.bs-calendar-wrapper td.bg-body-tertiary.text-muted.fw-bold.text-center {
white-space: nowrap !important;
min-width: 36px !important;
}
/* ICS Calendar Invitation Banner */
.ics-calendar-banner {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 2rem;
border-radius: 0;
background: #0067b4;
color: #fff;
font-size: 0.8125rem;
font-weight: 500;
}
.ics-calendar-banner .btn-ics-calendar-action {
background: transparent;
color: #fff;
border: 1px solid #fff;
border-radius: 0.25rem;
font-weight: 500;
font-size: 0.75rem;
white-space: nowrap;
}
.ics-calendar-banner .btn-ics-calendar-action:hover {
background: rgba(255, 255, 255, 0.15);
color: #fff;
border-color: #fff;
}