/* ========================================
   CIN CRM - Modern Design System testing light and dark mode
   ======================================== */

.ticket-create-wizard {
  overflow: hidden;
}

.ticket-create-progress {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.ticket-create-progress span {
  flex: 1 1 0;
  height: 0.25rem;
  border-radius: 999px;
  background: var(--cin-border-secondary, #e5e7eb);
}

.ticket-create-progress span.is-active {
  background: var(--cin-primary, #1b3661);
}

.ticket-create-slider-wrap {
  overflow: hidden;
}

.ticket-create-slider {
  display: flex;
  width: 100%;
  transition: transform 220ms ease;
}

.ticket-create-step {
  flex: 0 0 100%;
  min-width: 100%;
}

.ticket-create-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.ticket-create-customer-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.75rem;
}

[data-bs-theme=light] {
  /* CIN Brand Colors */
  /* --cin-primary: #1b3661; */
  --cin-primary-hover: #152b4d;
  --cin-primary-light: #2a4875;
  /* --cin-secondary: #5b8def; */

  /* Soft-UI Accent Colors */
  --cin-soft-primary: #5B4DFF;
  --cin-soft-primary-light: #8B80FF;

  /* Modern Backgrounds */
  --cin-background: #f3f4f6;
  --cin-background-rgb: 243, 244, 246;
  --cin-bg-secondary: #f9fafb;
  --cin-bg-tertiary: #f3f4f6;
  --cin-bg-elevated: #ffffff;

  /* Text Colors */
  --cin-foreground: #111827;
  --cin-text-secondary: #6b7280;
  --cin-text-muted: #9ca3af;
  --cin-text-inverse: #ffffff;

  /* Borders */
  --cin-border: #f1f5f9;
  --cin-border-secondary: #e5e7eb;
  --cin-thread-border: #e2e8f0;

  /* Shadows - Modern soft shadows */
  --cin-shadow-xs: 0 1px 3px 0 rgb(0 0 0 / 0.05);
  --cin-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --cin-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --cin-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --cin-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* Spacing System */
  --cin-spacing-xs: 0.5rem;
  --cin-spacing-sm: 0.75rem;
  --cin-spacing: 1rem;
  --cin-spacing-lg: 1.5rem;
  --cin-spacing-xl: 2rem;
  --cin-spacing-2xl: 3rem;

  /* Surface Colors - Tailwind: bg-white, bg-slate-50, bg-slate-100 */
  --cin-surface: #ffffff;
  --cin-surface-subtle: #f9fafb;
  --cin-surface-raised: #f3f4f6;
  --cin-surface-hover: #f3f4f6;
  --cin-surface-active: #e5e7eb;

  /* Accent/Focus - Tailwind: bg-accent, ring */
  --cin-accent: #f9fafb;
  --cin-accent-foreground: #111827;
  --cin-accent-soft: #e8f0ff;
  --cin-accent-hover: #0056a0;
  --cin-ring: #5B4DFF;

  /* Status/Semantic Colors - Tailwind: bg-green-600, bg-yellow-600, etc. */
  --cin-success: #10b981;
  --cin-success-light: #d1fae5;
  --cin-warning: #f59e0b;
  --cin-warning-light: #fef3c7;
  --cin-danger: #ef4444;
  --cin-danger-light: #fee2e2;
  --cin-info: #3b82f6;
  --cin-info-light: #dbeafe;

  /* Ticket Status Colors - Communication Module */
  --cin-ticket-open: #fbbf24;
  --cin-ticket-progress: #3b82f6;
  --cin-ticket-waiting: #9ca3af;
  --cin-ticket-customer: #fb923c;
  --cin-ticket-approved: #10b981;
  --cin-ticket-closed: #059669;
  --cin-task-review: #8b5cf6;

  /* Avatar */
  --cin-avatar-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  /* CRM Tags */
  --cin-tag-font-weight: 500;

  /* Communication/Chat Colors */
  --cin-chat-sent: #1b3661;
  --cin-chat-received: #f3f4f6;
  --cin-chat-system: #fef3c7;

  /* Bootstrap Variables — now managed in bs-override/bootstrap.scss */

  /* Legacy */
  --nav-tabs-link-active-color: #000;
  --icon-eye-closed: url('data:image/svg+xml,<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/><path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299l.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/><path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709z"/><path fill-rule="evenodd" d="M13.646 14.354l-12-12 .708-.708 12 12-.708.708z"/></svg>');
}

[data-bs-theme=dark] {
  /* Native form controls (select dropdown panels, date pickers, scrollbars)
     follow the dark theme instead of rendering a white UA panel with the
     inherited light text. */
  color-scheme: dark;

  /* CIN Brand Colors */
  /* --cin-primary: #5b8def; */
  --cin-primary-hover: #4a7cd8;
  --cin-primary-light: #6c9df0;
  /* --cin-secondary: #8ba3e0; */

  /* Soft-UI Accent Colors */
  --cin-soft-primary: #7B6DFF;
  --cin-soft-primary-light: #9B90FF;

  /* Modern Backgrounds */
  --cin-background: #0d1117;
  --cin-background-rgb: 13, 17, 23;
  --cin-bg-secondary: #161b22;
  --cin-bg-tertiary: #1f2937;
  --cin-bg-elevated: #1f2937;

  /* Text Colors */
  --cin-foreground: #e6edf3;
  --cin-text-secondary: #9ca3af;
  --cin-text-muted: #6b7280;
  --cin-text-inverse: #0d1117;

  /* Borders */
  --cin-border: #30363d;
  --cin-border-secondary: #21262d;
  --cin-thread-border: #3b4252;

  /* Shadows - Darker for dark mode */
  --cin-shadow-xs: 0 1px 3px 0 rgb(0 0 0 / 0.3);
  --cin-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
  --cin-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5);
  --cin-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.6), 0 4px 6px -4px rgb(0 0 0 / 0.6);
  --cin-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.7), 0 8px 10px -6px rgb(0 0 0 / 0.7);

  /* Spacing System */
  --cin-spacing-xs: 0.5rem;
  --cin-spacing-sm: 0.75rem;
  --cin-spacing: 1rem;
  --cin-spacing-lg: 1.5rem;
  --cin-spacing-xl: 2rem;
  --cin-spacing-2xl: 3rem;

  /* Surface Colors - Tailwind: bg-white, bg-slate-50, bg-slate-100 */
  --cin-surface: #161b22;
  --cin-surface-subtle: #1f2937;
  --cin-surface-raised: #2a2d35;
  --cin-surface-hover: #1f2937;
  --cin-surface-active: #2a2d35;

  /* Accent/Focus - Tailwind: bg-accent, ring */
  --cin-accent: #1f2937;
  --cin-accent-foreground: #e6edf3;
  --cin-accent-soft: #1a2942;
  --cin-accent-hover: #4a7cd8;
  --cin-ring: #7B6DFF;

  /* Status/Semantic Colors - Tailwind: bg-green-600, bg-yellow-600, etc. */
  --cin-success: #10b981;
  --cin-success-light: #064e3b;
  --cin-warning: #f59e0b;
  --cin-warning-light: #422006;
  --cin-danger: #ef4444;
  --cin-danger-light: #450a0a;
  --cin-info: #3b82f6;
  --cin-info-light: #172554;

  /* Ticket Status Colors - Communication Module */
  --cin-ticket-open: #fbbf24;
  --cin-ticket-progress: #3b82f6;
  --cin-ticket-waiting: #9ca3af;
  --cin-ticket-customer: #fb923c;
  --cin-ticket-approved: #10b981;
  --cin-ticket-closed: #059669;
  --cin-task-review: #a78bfa;

  /* CRM Tags */
  --cin-tag-font-weight: 500;

  /* Communication/Chat Colors */
  --cin-chat-sent: #5b8def;
  --cin-chat-received: #1f2937;
  --cin-chat-system: #422006;

  /* Bootstrap Variables — now managed in bs-override/bootstrap.scss */
  --bs-border-color: var(--cin-border);

  /* Legacy */
  --nav-tabs-link-active-color: #fff;
  --icon-eye-closed: url('data:image/svg+xml,<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/><path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299l.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/><path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709z"/><path fill-rule="evenodd" d="M13.646 14.354l-12-12 .708-.708 12 12-.708.708z"/></svg>');
}

/* Firefox */
@supports (-moz-appearance: none) {
  * {
    scrollbar-width: thin;
    scrollbar-color:
      rgba(var(--bs-primary-rgb), 0.5) rgba(var(--bs-primary-rgb), 0.3);
  }
}

/* Chrome, Edge und Safari */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0 3px rgba(var(--bs-primary-rgb), 0.3);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  box-shadow: inset 0 0 0 6px rgba(var(--bs-primary-rgb), 0.5);
  cursor: grab;
}

/* Drag'n'Drop */
.drag-handle {
  cursor: grab;
  color: rgba(var(--bs-emphasis-color-rgb), .45);
  transition: color .2s ease;

  &:focus,
  &:hover {
    color: rgba(var(--bs-emphasis-color-rgb), .75);
  }

  &:active {
    cursor: grabbing;
  }
}

/* Login / Auth */
.authentication-divider::after {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  content: "";
  background-color: var(--bs-primary);
}

/* Navigation */
.nav-tabs .nav-link {
  color: var(--nav-tabs-link-active-color) !important;
}

.nav-tabs .nav-link.active {
  color: var(--bs-link-color) !important;
}

/* Nav Line (Underline Tabs) */
.nav.nav-line {
  border-bottom: 1px solid var(--bs-border-color);
  scrollbar-width: none;
  min-height: fit-content;
  /* Detail tabs (Kommunikation/Intern/Aufgaben/Historie): keep on one row and scroll sideways when
     they don't fit — essential in the popup/mobile detail where this is the only tab switcher. */
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  &::-webkit-scrollbar {
    display: none;
  }

  .nav-item {
    flex-shrink: 0;
  }

  .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    /* margin-bottom: -1px; */
    padding: var(--cin-spacing-xs) var(--cin-spacing);
    color: var(--cin-text-secondary);
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;

    &:hover,
    &:focus {
      color: var(--cin-foreground);
      border-bottom-color: var(--bs-primary);
      border-bottom-width: 1px;
    }

    &.active {
      color: var(--cin-foreground);
      border-bottom-color: var(--bs-primary);
      font-weight: 600;
    }

    &.disabled {
      color: var(--cin-text-muted);
      border-bottom-color: transparent;
    }
  }
}



html,
body {
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p {
  margin-bottom: var(--cin-spacing);
  line-height: 1.6;
}

small,
.text-small {
  font-size: 0.875rem;
  color: var(--cin-text-secondary);
}

normal,
.text-normal {
  font-size: 1rem;
  color: var(--cin-text-secondary);
}

@media (min-width: 768px) {
  .layout-shell {
    height: 100dvh !important;
  }

  #main {
    -webkit-overflow-scrolling: touch;
  }
}

/* ========================================
   Modern Layout System
   ======================================== */

/* Topbar Styles */
.topbar {
  flex-shrink: 0;
  /* Verhindere, dass Topbar schrumpft */
  z-index: 1020;
}

.topbar .btn-light {
  /* background-color: var(--cin-bg-secondary); */
  border: 1px solid var(--cin-border);
}

.topbar .btn-light:hover {
  background-color: var(--cin-bg-tertiary);
  transform: translateY(-1px);
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* font-size: 14px; */
}

.topbar #global-username {
  font-weight: 600;
  color: var(--cin-text-primary);
  font-size: 0.9375rem;
}

.profile-status-indicator {
  --profile-status-color: #16a34a;
  background-color: var(--profile-status-color) !important;
  transition: background-color 0.18s ease, opacity 0.18s ease;

  &[data-state="online"] {
    --profile-status-color: #16a34a;
  }

  &[data-state="pause"] {
    --profile-status-color: #d97706;
  }

  &[data-state="date"] {
    --profile-status-color: #0284c7;
  }

  &[data-state="absent"] {
    --profile-status-color: #6b7280;
  }

  &[data-state="dnd"] {
    --profile-status-color: #dc2626;
  }

  &[data-state="offline"] {
    --profile-status-color: #6b7280;
  }

  &.is-offline {
    opacity: 0.45;
  }
}

#my-status {
  /* --profile-status-color: #16a34a; */
  box-shadow: inset 0px 0px 8px 3px var(--profile-status-color);

  &[data-state="pause"] {
    --profile-status-color: #d97706;
  }

  &[data-state="date"] {
    --profile-status-color: #0284c7;
  }

  &[data-state="absent"] {
    --profile-status-color: #6b7280;
  }

  &[data-state="dnd"] {
    --profile-status-color: #dc2626;
  }

  &[data-state="offline"] {
    --profile-status-color: #6b7280;
  }
}

[data-mobile-topbar-actions] {
  min-width: 0;
}

[data-mobile-topbar-actions]>#searchform {
  min-width: 0;
}

[data-mobile-topbar-actions]>#searchform>[data-mobile-search-toggle],
[data-mobile-topbar-actions]>#global-new>button,
[data-mobile-topbar-actions]>#profile>[data-profile-button] {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

[data-mobile-topbar-actions]>#profile>[data-profile-button] {
  border-width: 2px;
  border-color: var(--profile-status-color, var(--bs-primary));
}

[data-mobile-topbar-actions] .profile-status-indicator {
  display: none;
}

[data-mobile-topbar-actions] #search {
  width: min(46vw, 13rem);
}

[data-mobile-topbar-actions] #search-dropdown .dropdown-menu {
  min-width: min(92vw, 24rem);
}



/* Modern Card Styles */
.card {
  &.card-shadow {
    transition: box-shadow 0.2s ease, transform 0.2s ease;

    &:hover {
      box-shadow: var(--box-shadow);
      /* box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); */
    }
  }

  .card-header:first-child {
    border-radius: var(--bs-border-radius-xl) var(--bs-border-radius-xl) 0 0;
  }

  .card-footer {
    background-color: transparent;
    border-top: 1px solid var(--cin-border);
    padding: var(--cin-spacing-lg);
  }
}

/* Sidebar Styles — now in bs-override/bootstrap.sidebar.scss */

.multi-button.control-next {
  right: calc(var(--bs-card-spacer-x) + .5rem);
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  height: auto;
}

.multi-button.control-next button {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
}

.input-group-prepend {
  -webkit-box-flex: 0;
  flex: 0 0 24%;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 24%;
  max-width: 24%;
}

.icon.icon-primary {
  color: var(--bs-primary);
}

button.anim:not(:disabled) .icon.icon-primary {
  animation-name: opacity_change;
  animation-duration: 3s;
  animation-iteration-count: 1;
  animation-direction: normal;
}

*:disabled .icon.icon-primary {
  opacity: 0.5;
}

@keyframes opacity_change {
  0% {
    opacity: 1;
  }

  25% {
    opacity: .5;
  }

  50% {
    opacity: 1;
  }

  75% {
    opacity: .5;
  }

  100% {
    opacity: 1;
  }
}

.btn-password-action {
  position: absolute;
  top: 3px;
  width: 28px;
  height: 30px;
  background: 0;
  border: 0;
}

[data-passwordtogglefor] {
  /* background-color: var(--bs-btn-disabled-bg);
  -webkit-mask-image: var(--icon-eye-closed) !important;
  mask-image: var(--icon-eye-closed) !important; */
  right: 4px;
  z-index: 9;
}

[data-passwordrandomizefor] {
  right: 32px;
  z-index: 9;
}

[type="password"],
[aria-type=password][type="text"] {
  padding-right: calc(1.5em + 0.75rem);
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.btn-password-action {
  /* -webkit-mask-position: right 36px center, right 8px center; */
  mask-position: center center;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  /* -webkit-mask-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); */
}

[type="password"]~button[data-passwordtogglefor] {
  background-color: var(--bs-primary, #000);
  -webkit-mask-image: url('data:image/svg+xml,<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/><path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299l.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/><path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709z"/><path fill-rule="evenodd" d="M13.646 14.354l-12-12 .708-.708 12 12-.708.708z"/></svg>') !important;
  mask-image: url('data:image/svg+xml,<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/><path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299l.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/><path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709z"/><path fill-rule="evenodd" d="M13.646 14.354l-12-12 .708-.708 12 12-.708.708z"/></svg>') !important;
}

[aria-type=password][type="text"]~button[data-passwordtogglefor] {
  background-color: var(--bs-primary, #000);
  -webkit-mask-image: url('data:image/svg+xml,<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M 10 7 C 12.21 7 14 8.79 14 11 C 14 13.21 12.21 15 10 15 C 7.79 15 6 13.21 6 11 C 6 8.79 7.79 7 10 7 Z M 10 8.5 C 8.62 8.5 7.5 9.62 7.5 11 C 7.5 12.38 8.62 13.5 10 13.5 C 11.38 13.5 12.5 12.38 12.5 11 C 12.5 9.62 11.38 8.5 10 8.5 Z M 10 3.5 C 14.61 3.5 18.6 6.65 19.7 11.06 C 19.8 11.46 19.56 11.87 19.16 11.97 C 18.75 12.07 18.35 11.83 18.25 11.43 C 17.31 7.68 13.92 5 10 5 C 6.08 5 2.69 7.68 1.75 11.43 C 1.65 11.83 1.25 12.08 0.84 11.98 C 0.44 11.88 0.2 11.47 0.3 11.07 C 1.4 6.65 5.39 3.5 10 3.5 Z"/></svg>') !important;
  mask-image: url('data:image/svg+xml,<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M 10 7 C 12.21 7 14 8.79 14 11 C 14 13.21 12.21 15 10 15 C 7.79 15 6 13.21 6 11 C 6 8.79 7.79 7 10 7 Z M 10 8.5 C 8.62 8.5 7.5 9.62 7.5 11 C 7.5 12.38 8.62 13.5 10 13.5 C 11.38 13.5 12.5 12.38 12.5 11 C 12.5 9.62 11.38 8.5 10 8.5 Z M 10 3.5 C 14.61 3.5 18.6 6.65 19.7 11.06 C 19.8 11.46 19.56 11.87 19.16 11.97 C 18.75 12.07 18.35 11.83 18.25 11.43 C 17.31 7.68 13.92 5 10 5 C 6.08 5 2.69 7.68 1.75 11.43 C 1.65 11.83 1.25 12.08 0.84 11.98 C 0.44 11.88 0.2 11.47 0.3 11.07 C 1.4 6.65 5.39 3.5 10 3.5 Z"/></svg>') !important;
}

button[data-passwordrandomizefor] {
  background-color: var(--bs-primary, #000);
  -webkit-mask-image: url('data:image/svg+xml,<svg width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M 10 2.5 C 5.86 2.5 2.5 5.86 2.5 10 C 2.5 14.14 5.86 17.5 10 17.5 C 14.14 17.5 17.5 14.14 17.5 10 C 17.5 9.62 17.47 9.25 17.42 8.89 C 17.35 8.44 17.68 8 18.14 8 C 18.51 8 18.84 8.26 18.9 8.62 C 18.96 9.07 19 9.53 19 10 C 19 14.97 14.97 19 10 19 C 5.03 19 1 14.97 1 10 C 1 5.03 5.03 1 10 1 C 12.31 1 14.41 1.87 16 3.29 L 16 2.25 C 16 1.84 16.34 1.5 16.75 1.5 C 17.16 1.5 17.5 1.84 17.5 2.25 L 17.5 5.25 C 17.5 5.66 17.16 6 16.75 6 L 13.75 6 C 13.34 6 13 5.66 13 5.25 C 13 4.84 13.34 4.5 13.75 4.5 L 15.1 4.5 C 13.76 3.26 11.97 2.5 10 2.5 Z"/></svg>') !important;
  mask-image: url('data:image/svg+xml,<svg width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M 10 2.5 C 5.86 2.5 2.5 5.86 2.5 10 C 2.5 14.14 5.86 17.5 10 17.5 C 14.14 17.5 17.5 14.14 17.5 10 C 17.5 9.62 17.47 9.25 17.42 8.89 C 17.35 8.44 17.68 8 18.14 8 C 18.51 8 18.84 8.26 18.9 8.62 C 18.96 9.07 19 9.53 19 10 C 19 14.97 14.97 19 10 19 C 5.03 19 1 14.97 1 10 C 1 5.03 5.03 1 10 1 C 12.31 1 14.41 1.87 16 3.29 L 16 2.25 C 16 1.84 16.34 1.5 16.75 1.5 C 17.16 1.5 17.5 1.84 17.5 2.25 L 17.5 5.25 C 17.5 5.66 17.16 6 16.75 6 L 13.75 6 C 13.34 6 13 5.66 13 5.25 C 13 4.84 13.34 4.5 13.75 4.5 L 15.1 4.5 C 13.76 3.26 11.97 2.5 10 2.5 Z"/></svg>') !important;
}

input[type=password].password-create,
input[type=text][aria-type=password].password-create,
.was-validated input[type=password].password-create.form-control:invalid,
.was-validated input[type=password].password-create.form-control.is-invalid,
.was-validated input[type=text][aria-type=password].password-create.form-control:invalid,
.was-validated input[type=text][aria-type=password].password-create.form-control.is-invalid,
.was-validated input[type=password].password-create.form-control:valid,
.was-validated input[type=password].password-create.form-control.is-valid,
.was-validated input[type=text][aria-type=password].password-create.form-control:valid,
.was-validated input[type=text][aria-type=password].password-create.form-control.is-valid {
  padding-right: calc(1.5em + 0.75rem + 28px);
}

.was-validated input[type=password].form-control:invalid,
.was-validated input[type=password].form-control.is-invalid,
.was-validated input[type=text][aria-type=password].form-control:invalid,
.was-validated input[type=text][aria-type=password].form-control.is-invalid,
.was-validated input[type=password].form-control:valid,
.was-validated input[type=password].form-control.is-valid,
.was-validated input[type=text][aria-type=password].form-control:valid,
.was-validated input[type=text][aria-type=password].form-control.is-valid {
  background-position: right 0.15rem top 0.15rem;
  background-size: 0.75rem 0.75rem;
}

.card-body>.bs-progress {
  border-top-left-radius: var(--bs-card-border-radius);
  border-top-right-radius: var(--bs-card-border-radius);
}

.icon-link>.bi {
  height: unset;
}

/*
.bi {
  vertical-align: -0.125em;
  fill: currentColor;
} */

.FileDropperBS .bi {
  width: 1rem;
  height: 1rem;
}

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}

.btn-circle.btn-lg {
  width: 50px;
  height: 50px;
  padding: 0;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 25px;
}

.btn-circle.btn-xl {
  width: 70px;
  height: 70px;
  padding: 0;
  font-size: 24px;
  line-height: 1.33;
  border-radius: 35px;
}

.btn-circle .icon {
  vertical-align: sub;
}


/** Dashboard Widgets */
.dashboard-widgets-editing #dashboard-widgets.grid-stack>.grid-stack-item>.grid-stack-item-content {
  cursor: grab;
}

#dashboard-widgets.grid-stack {
  min-height: 12.5rem;
}

#dashboard-widgets.grid-stack>.grid-stack-item>.grid-stack-item-content {
  height: auto !important;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: absolute;
  inset: 5px;
}

#dashboard-widgets.grid-stack>.grid-stack-item>.grid-stack-item-content>* {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

#dashboard-widgets.grid-stack>.dashboard-widget-item.grid-stack-item {
  position: absolute !important;
  transition: opacity 0.2s ease !important;
}

#dashboard-widgets.grid-stack .grid-stack-placeholder>.placeholder-content {
  border-radius: var(--bs-border-radius-xl);
  background: rgba(var(--cin-background-rgb), 0.45);
  border: 2px dashed rgba(var(--bs-primary-rgb), 0.25);
}

#dashboard-widgets.grid-stack .ui-resizable-handle,
#dashboard-widgets.grid-stack .gs-resize-handle {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.dashboard-widgets-editing #dashboard-widgets.grid-stack .ui-resizable-handle,
.dashboard-widgets-editing #dashboard-widgets.grid-stack .gs-resize-handle {
  opacity: 1;
}

.dashboard-widget-item {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.dashboard-widget-item:not(.grid-stack-item) {
  position: relative;
}

.dashboard-widget-surface {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.dashboard-widget-content {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.dashboard-widget-content-stage {
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%;
}

.dashboard-widget-preview,
.dashboard-widget-error {
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem;
  color: var(--cin-text-muted);
  text-align: center;
}

.dashboard-widget-preview i {
  font-size: 2rem;
}

.dashboard-widget-error {
  color: var(--bs-danger);
}

/* Widget Visibility Toggle Button (Eye Icon) - Bottom Right */
.dashboard-widget-visibility-toggle {
  position: absolute;
  bottom: 0.5rem;
  right: 4.5rem;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.2s ease, background-color 0.2s ease;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

.dashboard-widget-visibility-toggle i {
  font-size: 1rem;
}

/* Buttons nur im Edit-Mode zeigen */
.dashboard-widgets-editing .dashboard-widget-visibility-toggle {
  opacity: 1;
}

.dashboard-widget-visibility-toggle:hover {
  opacity: 1 !important;
  background-color: rgba(var(--bs-secondary-rgb), 0.2);
}

/* Inaktives Widget (visuelles Feedback im Edit-Mode) */
.dashboard-widget-inactive {
  opacity: 0.5;
}

.dashboard-widget-inactive::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(45deg,
      transparent,
      transparent 10px,
      rgba(0, 0, 0, 0.05) 10px,
      rgba(0, 0, 0, 0.05) 20px);
  pointer-events: none;
  border-radius: inherit;
}

.dashboard-widgets-editing .dashboard-widget-item[draggable="true"] {
  cursor: grab;
  user-select: none;
}

.dashboard-widget-dragging {
  opacity: 0.65;
  cursor: grabbing !important;
}

.dashboard-widget-drop-target::after {
  content: '';
  position: absolute;
  inset: 0.5rem;
  border: 2px dashed rgba(13, 110, 253, 0.5);
  border-radius: 0.75rem;
  pointer-events: none;
}

.dashboard-widgets-editing .dashboard-widget-item {
  position: relative;
}

.dashboard-widgets-editing #dashboard-widgets.grid-stack>.dashboard-widget-item.grid-stack-item {
  position: absolute !important;
}

.dashboard-widget-resize-handle {
  position: absolute;
  bottom: 0.5rem;
  right: 2rem;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.2s ease, background-color 0.2s ease;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  cursor: nwse-resize;
}

.dashboard-widget-resize-handle svg {
  width: 1rem;
  height: 1rem;
}

.dashboard-widgets-editing .dashboard-widget-resize-handle {
  opacity: 1;
}

.dashboard-widget-resize-handle:hover {
  opacity: 1 !important;
  background-color: rgba(var(--bs-secondary-rgb), 0.2);
}

.dashboard-widget-resize-handle:active {
  transform: scale(0.95);
}

.dashboard-widget-resizing {
  opacity: 0.85;
  outline: 2px dashed var(--bs-primary);
  outline-offset: 2px;
  transition: outline 0.1s ease;
}

/** Accordion */


/** Modals */
/* CRM.modal.on() opens .window-modal — a standard centered Bootstrap modal (NOT .side-modal, which is
   the slide-in side panel). Widen the DEFAULT/md modal to 520px via Bootstrap's own width variable so
   .modal-dialog picks it up (incl. inside its min-width media query). Sizes sm/lg/xl are excluded so
   they keep their own widths. */
.window-modal:not(.modal-sm):not(.modal-lg):not(.modal-xl) {
  --bs-modal-width: 520px;
}

.side-modal {
  --bs-modal-zindex: 1055;
  --bs-modal-width: 500px;
  --bs-modal-padding: 1rem;
  --bs-modal-margin: 0.5rem;
  --bs-modal-color: ;
  --bs-modal-bg: var(--bs-body-bg);
  --bs-modal-border-color: var(--bs-border-color-translucent);
  --bs-modal-border-width: var(--bs-border-width);
  --bs-modal-border-radius: var(--bs-border-radius-lg);
  --bs-modal-box-shadow: var(--bs-box-shadow-sm);
  --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - (var(--bs-border-width)));
  --bs-modal-header-padding-x: 1rem;
  --bs-modal-header-padding-y: 1rem;
  --bs-modal-header-padding: 1rem 1rem;
  --bs-modal-header-border-color: var(--bs-border-color);
  --bs-modal-header-border-width: var(--bs-border-width);
  --bs-modal-title-line-height: 1.5;
  --bs-modal-footer-gap: 0.5rem;
  --bs-modal-footer-bg: ;
  --bs-modal-footer-border-color: var(--bs-border-color);
  --bs-modal-footer-border-width: var(--bs-border-width);
  outline: 0;
  background-color: var(--bs-body-bg);
  position: fixed;
  top: 0;
  min-height: 100dvh;
  width: 100%;
  right: -100%;
  transition: right 0.5s cubic-bezier(.17, .67, .83, .67);
  z-index: var(--bs-modal-zindex);
}

.side-modal.show {
  right: 0%;
}

/* Slot-Breiten (Zwischen-Step MS): Slide 1 = 75 %, Slide 2 = 65 %, ab Slide 3 = 55 %.
   data-slot wird beim Öffnen gesetzt. Off-screen bleibt einheitlich right:-100% (100 % der
   Viewport-Breite schiebt jede Breite ganz raus). Mobil (< 768px) greift keine Regel → Basis 100 %. */
@media (min-width: 768px) {
  .side-modal[data-slot="1"] {
    width: 75%;
  }

  .side-modal[data-slot="2"] {
    width: 65%;
  }

  .side-modal[data-slot="3"] {
    width: 55%;
  }
}

.side-modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--bs-modal-color);
  pointer-events: auto;
  background-color: var(--bs-modal-bg);
  background-clip: padding-box;
  outline: 0;
}

/* Modal Backdrops — Overlay-Stack (Zwischen-Step MS):
   GENAU EIN geteilter Backdrop (#crm-overlay-backdrop). Weil es physisch nur einen Blur-Knoten
   gibt, kann sich der Blur bei beliebig vielen (N) gestapelten Overlays NIE verstärken. Der
   Stack-Manager in Application.js setzt dessen z-index (oberstes Overlay minus 5) und toggelt .show.
   Der frühere `.modal-backdrop.show + .modal-backdrop.show`-Geschwister-Hack (nur für exakt 2)
   entfällt ersatzlos. Farbe tokenisiert für Light + Dark (keine Hardcoded Colors). */
[data-bs-theme="light"] {
  --cin-overlay-backdrop: rgba(255, 255, 255, 0.3);
}

[data-bs-theme="dark"] {
  --cin-overlay-backdrop: rgba(0, 0, 0, 0.45);
}

#crm-overlay-backdrop:not(.show) {
  display: none !important;
}

.modal-backdrop.show {
  background-color: var(--cin-overlay-backdrop, rgba(255, 255, 255, 0.3));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Klon-Quellen der Basis-Shells (modal.tpl / side-modal.tpl) sind nie sichtbar. */
#crm-overlay-templates {
  display: none !important;
}

/* Modal Header/Footer: grauer Hintergrund — theme-aware, der alte Hex-Wert
   #f3f4f678 blieb im Dark-Mode hell und machte transparente Selects unlesbar
   (helle Schrift auf hellem Grund). */
.window-modal .modal-header,
.window-modal .modal-footer {
  background-color: var(--cin-surface-raised);
}

.window-modal .modal-body {
  background-color: var(--cin-surface-raised);
}

/* .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);
}

#matching-table tr.import-mapping-drop-row>* {
  background-color: color-mix(in sRGB, var(--bs-info) 35%, var(--bs-body-bg)) !important;
}

[data-droppable="true"],
[data-droppable="1"] {
  background-color: color-mix(in sRGB, var(--bs-success) 50%, white 50%);
}

[data-droppable=false],
[data-droppable=0] {
  background-color: color-mix(in sRGB, var(--bs-danger) 50%, white 50%);
}

/** Buttons */
.btn-inline {
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  mask-size: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 28px;
  background: 0;
  border: 0;
}

.btn-inline-check {
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16"><path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/></svg>') !important;
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16"><path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/></svg>') !important;
}

.btn-inline-remove {
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16"><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/></svg>') !important;
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16"><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/></svg>') !important;
}

.btn-inline-primary {
  background-color: var(--bs-primary, #008577) !important;
}

.btn-inline-secondary {
  background-color: var(--bs-secondary) !important;
}

.btn-inline-success {
  background-color: var(--bs-success) !important;
}

.btn-inline-info {
  background-color: var(--bs-info) !important;
}

.btn-inline-warning {
  background-color: var(--bs-warning) !important;
}

.btn-inline-danger {
  background-color: var(--bs-danger) !important;
}

.btn-inline-light {
  background-color: var(--bs-light) !important;
}

.btn-inline-dark {
  background-color: var(--bs-dark) !important;
}

[data-required="1"] td[data-droppable="true"] {
  position: relative;
  padding-right: 1rem;
}

[data-required="1"] td[data-droppable="true"]:not(:empty)~button {
  display: inline-block !important;
}

[data-required="1"] td[data-droppable="true"]::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 16px;
  width: 16px;
  background-color: var(--bs-success);
  -webkit-mask-position: right center;
  mask-position: right center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2hlY2siIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTEwLjk3IDQuOTdhLjc1Ljc1IDAgMCAxIDEuMDcgMS4wNWwtMy45OSA0Ljk5YS43NS43NSAwIDAgMS0xLjA4LjAyTDQuMzI0IDguMzg0YS43NS43NSAwIDEgMSAxLjA2LTEuMDZsMi4wOTQgMi4wOTMgMy40NzMtNC40MjV6Ii8+Cjwvc3ZnPg==);
  mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2hlY2siIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTEwLjk3IDQuOTdhLjc1Ljc1IDAgMCAxIDEuMDcgMS4wNWwtMy45OSA0Ljk5YS43NS43NSAwIDAgMS0xLjA4LjAyTDQuMzI0IDguMzg0YS43NS43NSAwIDEgMSAxLjA2LTEuMDZsMi4wOTQgMi4wOTMgMy40NzMtNC40MjV6Ii8+Cjwvc3ZnPg==);
}

[data-required="1"] td[data-droppable="true"]:empty::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 16px;
  background-color: var(--bs-warning);
  -webkit-mask-position: right center;
  mask-position: right center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktZXhjbGFtYXRpb24iIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTcuMDAyIDExYTEgMSAwIDEgMSAyIDAgMSAxIDAgMCAxLTIgME03LjEgNC45OTVhLjkwNS45MDUgMCAxIDEgMS44IDBsLS4zNSAzLjUwN2EuNTUzLjU1MyAwIDAgMS0xLjEgMHoiLz4KPC9zdmc+);
  mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktZXhjbGFtYXRpb24iIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTcuMDAyIDExYTEgMSAwIDEgMSAyIDAgMSAxIDAgMCAxLTIgME03LjEgNC45OTVhLjkwNS45MDUgMCAxIDEgMS44IDBsLS4zNSAzLjUwN2EuNTUzLjU1MyAwIDAgMS0xLjEgMHoiLz4KPC9zdmc+);
}

[dropped]:not([dropped="0"])::after {
  content: '';
  position: absolute;
  top: 0;
  left: -16px;
  height: 100%;
  width: 16px;
  background-color: var(--bs-success);
  -webkit-mask-position: right center;
  mask-position: right center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2hlY2siIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTEwLjk3IDQuOTdhLjc1Ljc1IDAgMCAxIDEuMDcgMS4wNWwtMy45OSA0Ljk5YS43NS43NSAwIDAgMS0xLjA4LjAyTDQuMzI0IDguMzg0YS43NS43NSAwIDEgMSAxLjA2LTEuMDZsMi4wOTQgMi4wOTMgMy40NzMtNC40MjV6Ii8+Cjwvc3ZnPg==);
  mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2hlY2siIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTEwLjk3IDQuOTdhLjc1Ljc1IDAgMCAxIDEuMDcgMS4wNWwtMy45OSA0Ljk5YS43NS43NSAwIDAgMS0xLjA4LjAyTDQuMzI0IDguMzg0YS43NS43NSAwIDEgMSAxLjA2LTEuMDZsMi4wOTQgMi4wOTMgMy40NzMtNC40MjV6Ii8+Cjwvc3ZnPg==);
}

.d-table-header-group {
  display: table-header-group !important;
}

.valid .valid-feedback {
  display: block;
}

.invalid .invalid-feedback {
  display: block;
}

@media (min-width: 576px) {
  .d-sm-table-header-group {
    display: table-header-group !important;
  }

  .w-sm-50 {
    width: 50% !important;
  }

  .w-sm-75 {
    width: 75% !important;
  }
}

@media (min-width: 768px) {
  .d-md-table-header-group {
    display: table-header-group !important;
  }

  .w-md-auto {
    width: auto !important;
  }

  .w-md-25 {
    width: 25% !important;
  }

  .w-md-50 {
    width: 50% !important;
  }

  .w-md-75 {
    width: 75% !important;
  }

  .w-md-100 {
    width: 100% !important;
  }

  .h-md-auto {
    height: auto !important;
  }

  .h-md-25 {
    height: 25% !important;
  }

  .h-md-50 {
    height: 50% !important;
  }

  .h-md-75 {
    height: 75% !important;
  }

  .h-md-100 {
    height: 100% !important;
  }

  .vh-md-25 {
    height: 25vh !important;
  }

  .vh-md-50 {
    height: 50vh !important;
  }

  .vh-md-75 {
    height: 75vh !important;
  }

  .vh-md-100 {
    height: 100vh !important;
  }

  /* Slides sind mobil immer 100 % breit (Basis .side-modal: width:100%, right:-100%) —
     keine Slot-Overrides mehr (Zwischen-Step MS). */
}

@media (min-width: 992px) {
  .d-lg-table-header-group {
    display: table-header-group !important;
  }

  .w-lg-auto {
    width: auto !important;
  }

  .w-lg-25 {
    width: 25% !important;
  }

  .w-lg-50 {
    width: 50% !important;
  }

  .w-lg-75 {
    width: 75% !important;
  }

  .w-lg-100 {
    width: 100% !important;
  }
}

@media (min-width: 1200px) {
  .d-xl-table-header-group {
    display: table-header-group !important;
  }

  .w-xl-auto {
    width: auto !important;
  }

  .w-xl-25 {
    width: 25% !important;
  }

  .w-xl-50 {
    width: 50% !important;
  }

  .w-xl-75 {
    width: 75% !important;
  }

  .w-xl-100 {
    width: 100% !important;
  }
}

@media (min-width: 1400px) {
  .d-xxl-table-header-group {
    display: table-header-group !important;
  }

  .w-xxl-auto {
    width: auto !important;
  }

  .w-xxl-25 {
    width: 25% !important;
  }

  .w-xxl-50 {
    width: 50% !important;
  }

  .w-xxl-75 {
    width: 75% !important;
  }

  .w-xxl-100 {
    width: 100% !important;
  }
}

/* ========================================
   communication - Modern Split-View Design
   Based on Prototyp
   ======================================== */

/* Container */
.communication-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background-color: var(--cin-background);
  margin: -1.5rem;
}

/* Page Header */
.page-header-subtitle {
  font-size: 1.125rem;
  color: var(--cin-text-muted);
  font-weight: 500;
  margin: 0.5rem 0 0 0;
}

/* Main Content - Split View */
.communication-main {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

/* Left Panel */
.communication-left-panel {
  width: 48%;
  position: relative;
  container-type: inline-size;
  container-name: comm-panel;
}

.communication-panel-inner {
  padding: 0;
  flex: 1 1 auto;
}

/* Header mit Tabs + Workspace-Buttons: horizontales Padding */
.communication-header {
  padding-top: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  flex-shrink: 0;
}

.communication-list-container {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.communication-list-container .list,
.communication-list-container .row.list,
.communication-list-container ul.list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.custom-crm-tag-card-filter-btn {
  --custom-crm-tag-card-color: var(--bs-primary);
  border-color: color-mix(in srgb, var(--custom-crm-tag-card-color) 35%, transparent);
  color: var(--custom-crm-tag-card-color);
  background-color: color-mix(in srgb, var(--custom-crm-tag-card-color) 10%, transparent);
}

.custom-crm-tag-card-filter-btn:hover,
.custom-crm-tag-card-filter-btn:focus-visible {
  border-color: var(--custom-crm-tag-card-color);
  color: var(--custom-crm-tag-card-color);
  background-color: color-mix(in srgb, var(--custom-crm-tag-card-color) 18%, transparent);
}

.custom-crm-tag-card-filter-btn.active {
  border-color: var(--custom-crm-tag-card-color);
  color: #ffffff;
  background-color: var(--custom-crm-tag-card-color);
}

/* Tabs */
.communication-tabs {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.communication-tabs-list {
  display: flex;
  border-bottom: 1px solid var(--cin-border);
  padding: 0 1rem;
  flex-shrink: 0;
}

.communication-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cin-text-secondary);
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  white-space: nowrap;
}

.communication-tab:hover {
  color: var(--bs-primary);
  background-color: rgba(var(--bs-primary-rgb), 0.05);
}

.communication-tab.active {
  color: var(--bs-primary);
  border-bottom-color: var(--bs-primary);
}

.communication-tab i {
  font-size: 1rem;
}

/* Communication Tabs - Never wrap */
#comm-tabs {
  flex-wrap: nowrap;
}

/* Communication Tabs - Badge Styling */
#comm-tabs .nav-link {
  position: relative;
}

#comm-tabs .nav-link i {
  font-size: 1.125rem;
  flex-shrink: 0;
}

/* #comm-tabs.nav-floating .tab-text {
  display: inline;
} */

.nav-floating.dropdown-menu.show .tab-text {
  display: inline-block !important;
}

.communication-left-panel:has(#comm-tabs.nav-floating.dropdown-menu.show) {
  overflow: visible !important;
  z-index: 10;
}

/* Workspace-Mode-Buttons */
.workspace-mode-btn {
  padding: 0.375rem 0.625rem;
  border-radius: 0.375rem;
  transition: all 0.2s ease-in-out;
}

.workspace-mode-btn:hover {
  background-color: var(--cin-surface-hover);
  border-color: var(--bs-primary);
  color: var(--bs-primary);
}

.workspace-mode-btn.active {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: var(--cin-text-inverse);
}

@media (max-width: 767.98px) {
  .communication-header {
    min-height: 0;
    padding: 0;
  }

}

/* Tab Content */
.communication-tab-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Filters */
.communication-filters {
  border-bottom: 1px solid var(--cin-border);
  background-color: var(--cin-background);
  padding: 1.5rem;
  flex-shrink: 0;
}

.filter-search-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

input.search-icon {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-search%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M11.742%2010.344a6.5%206.5%200%201%200-1.397%201.398h-.001q.044.06.098.115l3.85%203.85a1%201%200%200%200%201.415-1.414l-3.85-3.85a1%201%200%200%200-.115-.1zM12%206.5a5.5%205.5%200%201%201-11%200%205.5%205.5%200%200%201%2011%200%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 8px center;
  background-size: 16px 16px;
  padding-left: 32px;
}

.search-input {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2.5rem;
  border: 1px solid var(--cin-border);
  border-radius: 1rem;
  font-size: 0.875rem;
  background: var(--cin-bg-elevated);
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05);
}

.search-input:focus {
  outline: none;
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.1);
}

.btn-reset-filter {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 1rem;
  border: none;
  background-color: var(--cin-border);
  color: var(--cin-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.btn-reset-filter:hover {
  background-color: var(--cin-background);
  color: var(--bs-primary);
}

/* Communication Item */
.comm-item {
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--cin-border);
  cursor: pointer;
  transition: all 0.2s;
}

.comm-item:hover {
  background-color: var(--cin-background);
  border-color: var(--cin-border);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05);
}

.comm-item-selected {
  background-color: rgba(var(--bs-primary-rgb), 0.05) !important;
}

[data-bs-theme="dark"] .comm-item-selected {
  background-color: rgba(var(--bs-primary-rgb), 0.15) !important;
}

.comm-item-unread,
.list [data-isread="0"] .card {
  box-shadow: inset 4px 0 0 #3b82f6, 0 16px 28px rgba(42, 107, 99, 0.08);
}

.list [data-isread="0"] .comm-item-avatar {
  background-color: color-mix(in srgb, var(--cin-danger) 5%, var(--cin-background)) !important;
  border-color: color-mix(in srgb, var(--cin-danger) 10%, var(--cin-border)) !important;
  color: var(--cin-danger) !important;
}

.list [data-isread="1"] .comm-item-avatar {
  background-color: color-mix(in srgb, var(--cin-success) 5%, var(--cin-background)) !important;
  border-color: color-mix(in srgb, var(--cin-success) 10%, var(--cin-border)) !important;
  color: var(--cin-success) !important;
}

.list [data-isread="0"] .comm-item-subject {
  font-weight: 700 !important;
}

.comm-item-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.comm-item-avatar {
  width: 40px;
  height: 40px;
  background: var(--cin-background);
  border: 1px solid var(--cin-border);
  color: var(--cin-text-secondary);
  position: relative;
}

.comm-item-icon {
  font-size: 1.25rem;
}

.comm-item-select-checkbox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  opacity: 0;
  z-index: 10;
  pointer-events: none;
  transition: opacity 0.15s ease-in-out;
}

/* Mail selection mode: show checkbox, hide icon */
.mail-selection-mode .comm-item-select-checkbox {
  opacity: 1;
  pointer-events: auto;
}

.mail-selection-mode .comm-item-icon {
  opacity: 0;
  pointer-events: none;
}

/* 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;
}

/* === Einheitlicher CRM-Tag Klick-Chip-Selector (Detail-Zuweisung + Toolbar-Filter) ===
   Inaktiv = dezent grau (nur Border + Text); aktiv = Tag-Farbe im Admin-Style (der Inline-Style aus
   CinCrmTags.chipStyle überschreibt den Grau-Default). Beide Themes via --cin-* / --bs-*-Variablen. */
.crm-tag-selector {
  min-width: 240px;
  max-width: 340px;
}

.crm-tag-selector-section + .crm-tag-selector-section {
  margin-top: 0.25rem;
}

.crm-tag-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.15;
  cursor: pointer;
  /* Farbe/Rand/BG kommen INLINE aus CinCrmTags (aktiv = Tag-Farbe, inaktiv = grau — jeweils im
     Admin-Style gefüllt/gestrichelt). Hier nur Form + Hover-Feedback. */
  transition: box-shadow 0.12s ease;
}

.crm-tag-chip:hover {
  box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.18);
}

/* „Neuer Tag"-Feld sieht schon wie die künftige Pille aus (Live-Vorschau via CinCrmTags.chipStyle):
   passt sich der Textlänge an (width:auto + size-Attribut), Text zentriert. input.-Selektor schlägt
   Bootstraps .form-control{width:100%}. */
input.crm-tag-create-name {
  width: auto;
  text-align: center;
}

/* Runde Farbanzeige: Box abrunden UND den inneren Swatch clippen (border-radius am input allein
   reicht nicht — der ::-color-swatch hat eigene eckige Kanten). overflow:hidden clippt ihn rund. */
.crm-tag-create-color.form-control-color {
  width: 2rem;
  /* Höhe fix = Breite → garantiert 32×32 Quadrat, in JEDEM Kontext. !important ist nötig, weil
     `.task-form .form-control { height:38px }` (crm.css:6043) dieselbe Spezifität hat, aber später in
     der Datei steht → würde die Aufgaben-Swatch sonst auf 38px zwingen (Projekte/.project-form nicht,
     daher die zwei Größen). Bootstraps min-height (1.5em-basiert) ebenfalls überstimmen. */
  height: 2rem !important;
  min-height: 2rem !important;
  padding: 0;
  flex-shrink: 0;
  border-radius: 0.5rem;
  overflow: hidden;
}

.crm-tag-create-color.form-control-color::-webkit-color-swatch-wrapper {
  padding: 0;
}

.crm-tag-create-color.form-control-color::-webkit-color-swatch {
  border: 0;
  border-radius: 0.4rem !important;
}

.crm-tag-create-color.form-control-color::-moz-color-swatch {
  border: 0;
  border-radius: 0.4rem !important;
}

/* Internal Notes */
.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;
}

/* Auch die im Kontakt-Popup umbenannten Panes (Suffix -cpop gegen ID-Kollision mit einem evtl.
   offenen Postfach) müssen dieselbe Flex-Fill-Höhe bekommen — sonst „rutscht" z. B. der Intern-
   Composer in die Mitte statt an den unteren Rand. */
#internal-tab-pane.active,
#internal-tab-pane-cpop.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Resize Handle */
.communication-resize-handle {
  width: 8px;
  background-color: var(--cin-border);
  cursor: col-resize;
  border-radius: 9999px;
  transition: all 0.2s;
  flex-shrink: 0;
  position: relative; /* Anker für das absolut positionierte .workspace-lock-btn */
}

.communication-resize-handle:hover {
  background-color: var(--bs-primary);
  box-shadow: 0 0 10px rgba(var(--bs-primary-rgb), 0.3);
}

/* Right Panel - Detail */
.communication-right-panel {
  flex: 1;
}

.communication-right-panel.is-hidden {
  display: none !important;
}

.communication-right-panel>.card-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
}

#detail-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#detail-view>.d-flex,
#detail-view>p,
#detail-view>.detail-subject-row {
  padding-inline: var(--bs-card-spacer-x);
}

#detail-view>.d-flex:first-child {
  padding-top: var(--bs-card-spacer-y);
}

#detail-view>.tab-content {
  padding-inline: 0;
}

#communication-tab-pane.active,
#communication-tab-pane-cpop.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

#tasks-tab-pane.active,
#tasks-tab-pane-cpop.active,
#history-tab-pane.active,
#history-tab-pane-cpop.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Detail Empty State */
.detail-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--cin-text-muted);
  padding: 2rem;
}

.detail-empty-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.3;
}

.detail-empty-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--cin-text-secondary);
}

.detail-empty-text {
  font-size: 0.875rem;
  text-align: center;
  max-width: 24rem;
}

/* Detail Content */
.detail-content {
  flex: 1;
  background-color: var(--cin-surface-raised);
}

.mail-detail-modal .modal-dialog {
  max-width: min(1200px, calc(100vw - 2rem));
  height: calc(100dvh - 2rem);
}

.mail-detail-modal .modal-content {
  height: 100%;
}

.mail-detail-modal .modal-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-detail-modal .modal-body {
  display: flex;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  /* Split/focus render on the white .communication-right-panel.card; the popup instead inherits the
     global grey `.window-modal .modal-body { background: #f3f4f678 }`, which shows through the
     transparent tab-row and header area. Override it to the white card surface so the popup matches
     the split view. (The thread canvas keeps its own --cin-surface-raised via .detail-content.) */
  background-color: var(--cin-surface);
}

.mail-detail-modal-content {
  min-height: 0;
  overflow: hidden;
  /* The popup has NO .card ancestor (split/focus render inside .communication-right-panel.card),
     so Bootstrap's --bs-card-bg (defined only within .card) is undefined here and card-surfaced
     children (.thread-message …) fall back to the GREY --bs-body-bg (#f3f4f6). Re-provide the card
     surface variable so those children render white on the grey canvas, exactly like the split
     view. Theme-aware: --cin-surface is #fff (light) / #161b22 (dark), matching Bootstrap .card. */
  --bs-card-bg: var(--cin-surface);
  /* Same reason: --bs-card-spacer-* are defined only inside .card. Without them the detail-view
     tab-row (padding-inline/top: var(--bs-card-spacer-*)) collapses to 0 in the popup, so the
     thread-order toggle sits flush against the edge instead of aligning with the action buttons
     below. Re-provide Bootstrap's card spacing so the popup matches the split view. */
  --bs-card-spacer-x: 1rem;
  --bs-card-spacer-y: 1rem;
  /* This element also carries the `.detail-content` class (see communication.js #ensureMailDetailModal),
     whose `background-color: var(--cin-surface-raised)` (GREY) is the outer popup canvas. The transparent
     tab-row sits directly on it → grey band. Override to white here (later rule, same specificity, so it
     wins over .detail-content). The INNER #detail-content keeps --cin-surface-raised for the thread canvas,
     exactly like split view (where the tab-row shows the white .card and only the thread area is raised). */
  background-color: var(--cin-surface);
}

.detail-header {
  background-color: var(--bs-card-bg, var(--bs-body-bg));
  border-bottom: 1px solid var(--cin-border);
}

.detail-header-actions {
  min-width: 0;
}

.detail-badge-bar,
.detail-action-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-width: 0;
}

/* Second row: action buttons sit below the informational badges. */
.detail-action-bar {
  margin-top: 0.5rem;
}

.detail-badge-bar .btn,
.detail-badge-bar .badge,
.detail-action-bar .btn,
.detail-action-bar .ticket-sla-badge {
  flex-shrink: 0;
}

.detail-badge-bar .btn,
.detail-action-bar .btn,
.detail-action-bar .ticket-sla-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 32px;
}

.detail-ticket-number {
  display: inline-flex;
  align-items: center;
  margin-left: 0.45rem;
  padding-left: 0.45rem;
  border-left: 1px solid currentColor;
  font-weight: 700;
}

@media (min-width: 1200px) {
  .detail-badge-bar,
  .detail-action-bar {
    justify-content: flex-end;
  }
}

.mail-read-progress {
  height: 3px;
  overflow: hidden;
  background: transparent;
  flex: 0 0 auto;

  & .line {
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    background: var(--bs-primary);
  }

  & .mail-read-progress-bar {
    inset: 0 auto 0 0;
    height: 100%;
    background: var(--bs-primary);
  }
}


.btn-close-detail {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--cin-text-muted);
  padding: 0.25rem;
  border-radius: 0.5rem;
  transition: all 0.2s;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 0.5rem;
}

.btn-close-detail:hover {
  background-color: var(--cin-bg-secondary);
  color: var(--bs-primary);
}

.detail-subject {
  margin: 0;
}

.detail-meta {
  display: none;
}

.detail-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cin-avatar-gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.detail-from-info {
  flex: 1;
}

.detail-from-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--cin-foreground);
}

.detail-from-email {
  font-size: 0.875rem;
  color: var(--cin-text-muted);
}

.detail-from-badges {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.detail-time {
  font-size: 0.875rem;
  color: var(--cin-text-secondary);
}

.detail-labels-row {
  display: none;
}

.detail-labels {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 1;
}

.detail-status-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.detail-status-badge {
  white-space: nowrap;
}

/* Status Dropdown */
.detail-status-dropdown {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.status-dropdown-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--cin-text-muted);
  letter-spacing: 0.05em;
}

.status-select {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--cin-border);
  border-radius: 0.5rem;
  background: var(--cin-bg-elevated);
  color: var(--cin-foreground);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  flex: 1;
  min-width: 0;
  height: 32px;
}

.status-select:hover {
  border-color: var(--bs-primary);
}

.status-select:focus {
  outline: none;
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.1);
}

.control-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  min-width: 0;
}

.control-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--cin-text-muted);
  margin-bottom: 0;
}

/* Assignment Display Button */
.detail-assignment-control {
  position: relative;
  min-width: 0;
}

.assignment-display-btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--cin-bg-elevated);
  border: 1px solid var(--cin-border);
  border-radius: 0.5rem;
  color: var(--cin-foreground);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  min-width: 0;
  height: 37px;
  overflow: hidden;
}

.assignment-display-btn:hover {
  background: var(--cin-bg-secondary);
  border-color: var(--bs-primary);
}

.assignment-display-btn i.bi-chevron-down {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--cin-text-muted);
}

.detail-assignment-control .dropdown-menu {
  min-width: 100%;
}

.assignment-dd-avatar {
  width: 2rem;
  height: 2rem;
  background: var(--cin-background);
  border: 1px solid var(--cin-border);
  color: var(--cin-text-secondary);
  font-size: 1rem;
}

.assignment-dropdown-entry:disabled {
  opacity: 0.75;
}

.assignment-dd-check {
  min-width: 1.5rem;
  text-align: right;
}

/* Detail Subject Row */
.detail-subject-row {
  display: block;
  padding: 0.625rem 0 0.75rem 0;
}

/* Type Badge Visibility */
.comm-item-type-badge .type-text {
  display: inline;
}

/* Detail Tag Editor */
.detail-tag-editor {
  display: flex;
  align-items: flex-end;
  min-width: 0;
}

.detail-tag-editor .btn {
  height: 37px;
}

/* Assignment Row */
.detail-assignment-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: var(--cin-bg-elevated);
  border-top: 1px solid var(--cin-border);
  gap: 1rem;
}

.assignment-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}

.assignment-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cin-text-secondary);
}

.assignment-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.assignment-badge.assignment-user {
  background-color: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.assignment-badge.assignment-group {
  background-color: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.assignment-badge.assignment-none {
  background-color: rgba(156, 163, 175, 0.1);
  color: #9ca3af;
  border: 1px solid rgba(156, 163, 175, 0.2);
}

[data-bs-theme="dark"] .assignment-badge.assignment-user {
  background-color: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

[data-bs-theme="dark"] .assignment-badge.assignment-group {
  background-color: rgba(16, 185, 129, 0.15);
  color: #34d399;
}

[data-bs-theme="dark"] .assignment-badge.assignment-none {
  background-color: rgba(156, 163, 175, 0.15);
  color: #d1d5db;
}

.assignment-actions {
  display: flex;
  gap: 0.5rem;
}

.btn-assign {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--cin-bg-elevated);
  border: 1px solid var(--cin-border);
  border-radius: 0.5rem;
  color: var(--cin-foreground);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-assign:hover {
  background: var(--cin-background);
  border-color: #10b981;
  color: #10b981;
}

/* Watchlist Row */
.detail-watchlist-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: var(--cin-bg-elevated);
  border-top: 1px solid var(--cin-border);
  gap: 1rem;
}

.watchlist-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}

.watchlist-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cin-text-secondary);
}

.watchers-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.watcher-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  background-color: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
  border: 1px solid rgba(139, 92, 246, 0.2);
}

.watchlist-badge.watchlist-none {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  background-color: rgba(156, 163, 175, 0.1);
  color: #9ca3af;
  border: 1px solid rgba(156, 163, 175, 0.2);
}

[data-bs-theme="dark"] .watcher-badge {
  background-color: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
}

[data-bs-theme="dark"] .watchlist-badge.watchlist-none {
  background-color: rgba(156, 163, 175, 0.15);
  color: #d1d5db;
}

.watchlist-actions {
  display: flex;
  gap: 0.5rem;
}

.btn-watchlist {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background: var(--cin-bg-elevated);
  border: 1px solid var(--cin-border);
  border-radius: 0.5rem;
  color: var(--cin-foreground);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-watchlist:hover {
  background: var(--cin-background);
  border-color: #8b5cf6;
  color: #8b5cf6;
}

.btn-watchlist i {
  font-size: 1rem;
}

.detail-body {
  padding: 2rem;
  overflow-y: auto;
}

.mail-detail-skeleton {
  display: flex;
  min-height: 10rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
  color: var(--bs-secondary-color);
}

.mail-detail-skeleton .placeholder {
  min-height: 0.85rem;
  border-radius: 999px;
}

/* Thread View */
.thread-message {
  border: 1px solid var(--cin-thread-border, #e2e8f0);
  border-radius: 0rem 0.75rem 0.75rem 0rem;
  background-color: var(--bs-card-bg, var(--bs-body-bg));
  width: 95%;
}

.thread-message.thread-message--outgoing {
  align-self: flex-end;
  border-radius: 0.75rem 0rem 0rem 0.75rem;
}

.thread-activity-event {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  width: min(100%, 40rem);
  align-self: center;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--cin-thread-border, #e2e8f0);
  border-radius: 0.5rem;
  background-color: var(--cin-surface-subtle, var(--bs-tertiary-bg));
  color: var(--cin-text-secondary);
}

.thread-activity-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 1.75rem;
  border-radius: 999px;
  background-color: rgba(var(--bs-primary-rgb), 0.1);
  color: var(--bs-primary);
}

.thread-activity-content {
  min-width: 0;
  flex: 1;
}

.thread-activity-text {
  color: var(--cin-foreground);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
}

.thread-activity-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.125rem;
  color: var(--cin-text-muted);
  font-size: 0.75rem;
}

.thread-activity-event.status-green .thread-activity-icon {
  /* background-color: rgba(34, 197, 94, 0.12); */
  color: #16a34a;
}

.thread-activity-event.status-yellow .thread-activity-icon,
.thread-activity-event.status-orange .thread-activity-icon {
  /* background-color: rgba(245, 158, 11, 0.12); */
  color: #d97706;
}

.thread-activity-event.status-red .thread-activity-icon {
  /* background-color: rgba(239, 68, 68, 0.12); */
  color: #dc2626;
}

.thread-activity-event.status-gray .thread-activity-icon {
  /* background-color: rgba(107, 114, 128, 0.12); */
  color: #6b7280;
}

.thread-activity-event.status-blue .thread-activity-icon {
  /* background-color: rgba(59, 130, 246, 0.12); */
  color: #2563eb;
}

.thread-activity-icon {
  background-color: var(--cin-surface);
}

.ticket-history-thread {
  background-color: var(--cin-background);
}

.ticket-history-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-left: 3rem;
}

.ticket-history-timeline::before {
  content: "";
  position: absolute;
  top: 2.75rem;
  bottom: 1rem;
  left: 1.25rem;
  width: 3px;
  border-radius: 999px;
  background-color: var(--cin-border);
}

.ticket-history-date-separator {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0.25rem 0 0.5rem -3rem;
  color: var(--cin-text-secondary);
  font-size: 0.875rem;
  font-weight: 600;
}

.ticket-history-date-separator::before,
.ticket-history-date-separator::after {
  content: "";
  height: 1px;
  flex: 1;
  background-color: var(--cin-border);
}

.ticket-history-date-separator span {
  position: relative;
  z-index: 1;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--cin-border);
  border-radius: 999px;
  background-color: var(--cin-surface);
  color: var(--cin-foreground);
}

.ticket-history-event {
  position: relative;
  align-self: stretch;
  width: 100%;
  min-height: 4.25rem;
  margin: 0;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  background-color: var(--cin-surface);
  box-shadow: var(--cin-shadow-sm, none);
}

.ticket-history-event .ticket-history-icon {
  position: absolute;
  top: 0.875rem;
  left: -2.625rem;
  z-index: 1;
  width: 2rem;
  height: 2rem;
  flex-basis: 2rem;
  border: 2px solid var(--cin-background);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.16);
}

.ticket-history-event .thread-activity-content {
  padding-left: 0;
}

/* Aufgaben-Detail-Historie (task-form Reiter „Historie") — jeder Eintrag als sauberer weißer
   Container mit Rahmen auf dem hellgrauen Pane. Bewusst OHNE Schatten/Schwebe-Effekt (CRM-weite
   Vorgabe). Ersetzt die frühere „py-2 border-bottom"-Divider-Zeile. */
.task-history-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.task-history-item {
  padding: 0.75rem 1rem;
  border: 1px solid var(--cin-border);
  border-radius: 0.5rem;
  background-color: var(--cin-surface);
}

.thread-message-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--cin-border);
  background-color: var(--cin-surface-subtle, var(--bs-tertiary-bg));
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.thread-message-header:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.05);
}

[data-bs-theme="dark"] .thread-message-header:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.15);
}

.thread-message-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cin-primary, #1b3661), var(--cin-primary-hover, #2a4a7a));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.thread-message-avatar .avatar-initials {
  font-size: 0.7rem;
  font-weight: 600;
  color: #fff;
}

.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%;
}

/* SLA button styled like the other outline action buttons (icon + "SLA"); the state is conveyed by
   the border/text colour and the icon, not by a text label. status-secondary = ok (grey neutral),
   status-success = met (green), status-warning = at_risk / "Gefährdet" (orange), status-danger =
   breached / "Verletzt" (red). */
.ticket-sla-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 32px;
  padding: 0.25rem 0.65rem;
  border: 1px solid currentColor;
  border-radius: var(--bs-btn-border-radius, 0.375rem);
  background-color: transparent;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  color: #6b7280;
}

.ticket-sla-badge.status-success {
  color: #16a34a;
}

.ticket-sla-badge.status-warning {
  color: #d97706;
}

.ticket-sla-badge.status-danger {
  color: #dc2626;
}

.ticket-sla-badge:hover,
.ticket-sla-badge:focus-visible {
  background-color: color-mix(in srgb, currentColor 8%, transparent);
}

[data-bs-theme="dark"] .ticket-sla-badge {
  color: #9ca3af;
}

[data-bs-theme="dark"] .ticket-sla-badge.status-success {
  color: #4ade80;
}

[data-bs-theme="dark"] .ticket-sla-badge.status-warning {
  color: #fbbf24;
}

[data-bs-theme="dark"] .ticket-sla-badge.status-danger {
  color: #f87171;
}

/* "Kd.-Zuordnung" button — review state. Like the SLA button it changes color by state, but the
   color is the LIVE admin hex of the "Zuordnung prüfen" system tag, injected inline as
   --assign-review-color (see communication.js #resolveAssignmentReview). The button stays a normal
   .btn.btn-sm (so it matches the neighboring action buttons); .is-review just recolors the outline.
   When the tag is cleared (assignment done) the template renders the plain btn-outline-primary blue. */
.ticket-assign-badge.is-review {
  border: 1px solid var(--assign-review-color, #f97316);
  color: var(--assign-review-color, #f97316);
  background-color: transparent;
}

.ticket-assign-badge.is-review:hover,
.ticket-assign-badge.is-review:focus,
.ticket-assign-badge.is-review:focus-visible {
  border-color: var(--assign-review-color, #f97316);
  color: var(--assign-review-color, #f97316);
  background-color: color-mix(in srgb, var(--assign-review-color, #f97316) 12%, transparent);
}

.ticket-priority-badge.priority-urgent {
  background-color: rgba(239, 68, 68, 0.14);
  color: #dc2626;
}

.ticket-priority-badge.priority-high {
  background-color: rgba(249, 115, 22, 0.14);
  color: #ea580c;
}

.ticket-priority-badge.priority-normal {
  background-color: rgba(59, 130, 246, 0.12);
  color: #2563eb;
}

.ticket-priority-badge.priority-low {
  background-color: rgba(34, 197, 94, 0.14);
  color: #16a34a;
}

[data-bs-theme="dark"] .ticket-priority-badge.priority-urgent {
  color: #fca5a5;
}

[data-bs-theme="dark"] .ticket-priority-badge.priority-high {
  color: #fdba74;
}

[data-bs-theme="dark"] .ticket-priority-badge.priority-normal {
  color: #93c5fd;
}

[data-bs-theme="dark"] .ticket-priority-badge.priority-low {
  color: #86efac;
}

.ticket-sla-card {
  margin-top: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--cin-border);
  border-radius: 0.5rem;
  background-color: var(--cin-bg-secondary);
}

.ticket-sla-summary:hover .ticket-sla-card.collapse:not(.show) {
  display: block;
}

.ticket-sla-summary[data-sla-status="at_risk"] .ticket-sla-card {
  border-color: rgba(245, 158, 11, 0.45);
  background-color: rgba(245, 158, 11, 0.08);
}

.ticket-sla-summary[data-sla-status="breached"] .ticket-sla-card {
  border-color: rgba(239, 68, 68, 0.45);
  background-color: rgba(239, 68, 68, 0.08);
}

.ticket-sla-summary[data-sla-status="met"] .ticket-sla-card {
  border-color: rgba(16, 185, 129, 0.35);
  background-color: rgba(16, 185, 129, 0.07);
}

/* Teilprojekt L (vereinfacht): SLA-Container im Task-Formular (Seite + Modal) auf weißes Surface,
   damit die Karte auf dem subtilen Panel bzw. im Modal klar als Karte lesbar ist. Nur .task-sla-card
   (nicht die Postfach-Ticket-SLA). Die Status-Tints (at_risk/breached/met) haben höhere Spezifität
   und bleiben erhalten. */
.task-sla-card {
  background-color: var(--cin-surface);
}

.ticket-sla-card-header,
.ticket-sla-meta,
.ticket-sla-progress-labels {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ticket-sla-card-header {
  justify-content: space-between;
  margin-bottom: 0.875rem;
}

.ticket-sla-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--cin-foreground);
}

.ticket-sla-level {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--cin-border-secondary);
  border-radius: 999px;
  background-color: var(--cin-surface);
  color: var(--cin-foreground);
  font-size: 0.875rem;
  font-weight: 600;
}

.ticket-sla-meta {
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 0.875rem;
  color: var(--cin-text-secondary);
}

.ticket-sla-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-width: min(100%, 12rem);
  font-size: 0.875rem;
}

.ticket-sla-meta-label {
  font-weight: 600;
}

.ticket-sla-progress {
  position: relative;
  height: 0.625rem;
  overflow: hidden;
  border-radius: 999px;
  background-color: var(--cin-surface-active);
}

.ticket-sla-progress-fill {
  height: 100%;
  min-width: 0.125rem;
}

.ticket-sla-warning-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: rgba(17, 24, 39, 0.55);
}

.ticket-sla-progress-labels {
  justify-content: space-between;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--cin-text-secondary);
}

[data-bs-theme="dark"] .ticket-sla-warning-marker {
  background-color: rgba(230, 237, 243, 0.65);
}

/* --- Reminder-Engine: task-eigene SLA-Panel-Anpassungen (Ticket-Panel bleibt unberuehrt) --- */
/* Kopf wie das alte Ticket-SLA: Titel + Erinnerung-Toggle links, Level-Pille oben rechts.
   Nutzt die Basis .ticket-sla-card-header (space-between) + .ticket-sla-meta (Meta-Reihe). */
.task-sla-summary .task-sla-header {
  flex-wrap: wrap;
  row-gap: 0.5rem;
}

.task-sla-summary .ticket-sla-title-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  min-width: 0;
}

/* „Gefaehrdet ab X%" + Kanal-Chip LINKSBUENDIG in einer Flex-Zeile (kann nie ueberlaufen). Der
   Connector ist ein Flex-Item NEBEN dem Label (nicht darueber): border-bottom = waagerechter Strich,
   border-right = Aufwaerts-Tick am rechten Ende. Der Spacer (flex-basis 100%-Schwelle%) schiebt das
   rechte Ende genau unter den Warn-Marker. Rein %-basiert -> resize-fest, kein JS. */
.task-sla-summary .task-sla-warning-zone {
  margin-top: 0.5rem;
}

.task-sla-summary .task-sla-warning-line {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

/* Label + Kanal-Chip behalten ihre natuerliche Breite (schrumpfen nicht). */
.task-sla-summary .task-sla-warning-text,
.task-sla-summary .task-sla-warning-line > .task-reminder-sla80 {
  flex: 0 0 auto;
}

.task-sla-summary .task-sla-warning-line > .task-reminder-sla80 {
  margin-left: 0.5rem;
}

.task-sla-summary .task-sla-warning-connector {
  flex: 1 1 0;
  min-width: 0;
  height: 0.55rem;
  margin-left: 0.6rem;
  border-bottom: 1px dashed color-mix(in srgb, var(--cin-border-secondary) 70%, var(--cin-text-secondary));
  border-right: 1px dashed color-mix(in srgb, var(--cin-border-secondary) 70%, var(--cin-text-secondary));
  pointer-events: none;
}

.task-sla-summary .task-sla-warning-spacer {
  flex: 0 1 auto;
}

/* Lead-Segment (Icon + Label + Wert) der Start- UND der Gefaehrdet-Zeile auf gleiche min-width ->
   die Kanal-Chips beider Zeilen fluchten vertikal (Request Bild 2). Der Warn-Text erbt die inline-flex-
   Optik von .ticket-sla-meta-item; das Start-Lead-Wrapper-Span braucht sie explizit. */
.task-sla-summary .task-sla-lead {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 12.5rem;
}

/* Reminder-Kanal-Gruppen sitzen auf einer eigenen neutralen Surface-Insel (Chip), damit sie auf
   jedem SLA-Karten-Tint (weiss/gelb/rot/gruen) konstant lesbar bleiben — Muster wie die Level-Pille. */
.task-sla-summary .task-reminder-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.15rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--cin-border-secondary) 70%, var(--cin-text-secondary));
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--cin-surface-raised) 50%, transparent);
}

.task-sla-summary .task-reminder-start {
  margin-left: 0.5rem;
}

.task-sla-summary .task-reminder-ch {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--cin-text-secondary);
  cursor: pointer;
}

.task-sla-summary .task-reminder-ch input {
  margin: 0;
}

/* Kanal-Checkbox: unchecked = solides weisses Feld + definierter Rand -> auf jedem Karten-Tint klar
   sichtbar (bewusste Design-Wahl des Nutzers). Checked bleibt der Bootstrap-Primary-Fill unberuehrt. */
.task-sla-summary .task-reminder-ch input:not(:checked) {
  background-color: #fff;
  border-color: color-mix(in srgb, var(--cin-border-secondary) 55%, var(--cin-text-secondary));
}

/* Master-Toggle als gleiche neutrale Chip-Insel wie die Kanal-Gruppen (Lesbarkeit auf Tint). */
.task-sla-summary .task-reminder-master {
  cursor: pointer;
  white-space: nowrap;
  padding: 0.15rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--cin-border-secondary) 70%, var(--cin-text-secondary));
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--cin-surface-raised) 50%, transparent);
  color: var(--cin-text-secondary);
}

/* Punkt 1: Bootstrap-form-switch bringt padding-left:2.5em + margin-left:-2.5em am Input mit — im
   Flex-Titel zieht das den Switch in den Titel. Das Chip-padding oben killt das padding-left; hier
   noch den negativen Input-Margin neutralisieren, damit der Switch sauber im Chip sitzt. */
.task-sla-summary .task-reminder-master .form-check-input {
  margin-left: 0;
  margin-top: 0;
  float: none;
}

/* Aktiver Ausloeser (mind. ein Kanal gewaehlt) faerbt seinen Text gruen — animiert. Die Kanal-
   Checkboxen behalten ihre eigene Farbe (explizit gesetzt), nur Icon/Label/Wert werden gruen. */
.task-sla-summary .task-sla-meta-start,
.task-sla-summary .task-sla-warning-text {
  transition: color 0.25s ease;
}

.task-sla-summary .task-reminder-active {
  color: var(--bs-success);
}

/* Status/Prioritaet: das Status-Label kann durch den „x/y abgezeichnet"-Chip 2-zeilig werden (v.a.
   in der schmalen col-6 auf Mobile) und wuerde sein Select nach unten schieben. Beide Spalten als
   Flex-Column mit dem Select am unteren Rand -> die Selects stehen auf gleicher Hoehe (die Grid-Zeile
   ist ohnehin gleich hoch). */
.task-form-field-col {
  display: flex;
  flex-direction: column;
  /* Container fuer die Icon-only-Collapse-Query des Status-/Prioritaets-Dropdowns (siehe unten). */
  container-type: inline-size;
}

.task-form-field-col > .form-select {
  margin-top: auto;
}

/* Status-/Prioritaets-Dropdown (farbiges Icon+Label statt nacktem <select>): der per JS aufgebaute
   Container ersetzt optisch das Select und wird deshalb genauso am Boden der Spalte ausgerichtet. */
.task-form-field-col > .task-option-dd-mount {
  margin-top: auto;
  width: 100%;
}

/* Toggle als Form-Control: volle Breite, Inhalt linksbuendig, kein Umbruch. Der .form-select-Style
   liefert Rahmen/Radius/Hoehe + den Caret-Hintergrund (caret:false vermeidet einen doppelten Pfeil). */
.task-option-dd-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Label-Zone fuellt die Restbreite und schrumpfbar (min-width:0), damit der Text SAUBER mit Ellipsis
   abschneidet statt unter den .form-select-Caret zu laufen. Icon bleibt fix, Label truncatet. */
.task-option-dd-toggle .dropdown-toggle-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.task-option-dd-toggle .task-option-dd-item {
  display: flex !important; /* schlaegt Bootstraps .d-inline-flex (!important), damit das Label truncatet */
  width: 100%;
  min-width: 0;
}

.task-option-dd-item > .text-truncate {
  min-width: 0;
}

/* Icons im Dropdown (Liste + zugeklapptes Feld) auf Feld-Textgroesse; Farbe kommt inline. */
.task-option-dd-item .bi {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

/* Sehr schmale Spalte (z.B. Split-View-Detailpanel): das zugeklappte Feld zeigt nur noch das farbige
   Icon + Caret (kleinster Eingriff, gleiche Logik wie die kollabierenden Badges). Das Label bleibt per
   Hover-Tooltip UND in der aufgeklappten Liste sichtbar — die Container-Query trifft NUR das Feld
   (.task-option-dd-toggle), nie die Menue-Eintraege. Container = .task-form-field-col (oben gesetzt). */
@container (max-width: 8rem) {
  .task-option-dd-toggle .task-option-dd-item > .text-truncate {
    display: none;
  }
}

/* Abhaengigkeiten-Karten-Titel: der „blockiert"-Badge bleibt IMMER im Container. Der Titel-Text darf
   schrumpfen/truncaten (min-width:0), das Badge nie (flex-shrink:0). In schmalen Karten kollabiert das
   Badge per Container-Query auf das Schloss-Icon (Text „blockiert" aus, Tooltip bleibt). */
.task-dependencies-card {
  container-type: inline-size;
}

.task-dep-title,
.task-dep-title-text {
  min-width: 0;
}

.task-dependencies-card .task-dep-blocked,
.task-dependencies-card .task-dep-conflict {
  flex-shrink: 0;
}

.task-dep-blocked-label,
.task-dep-conflict-label {
  margin-left: 0.25rem;
}

@container (max-width: 15rem) {
  .task-dep-blocked-label,
  .task-dep-conflict-label {
    display: none;
  }
}

/* Unteraufgaben-Karten-Kopf: analog zur Abhaengigkeiten-Karte bleibt die Kopfzeile einzeilig — der
   Titel-Text truncatet (min-width:0), der „x/y erledigt"-Zaehler bleibt drin (flex-shrink:0) und
   kollabiert in schmalen Karten per Container-Query auf „x/y" (Wort „erledigt" aus, Tooltip/Zahl bleibt),
   statt umzubrechen. */
.task-subtasks-card {
  container-type: inline-size;
}

.task-subtasks-title,
.task-subtasks-title-text {
  min-width: 0;
}

@container (max-width: 20rem) {
  .task-subtask-counter-label {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .detail-ticket-info {
    grid-template-columns: 1fr;
  }

  /* Punkt 2: Auf Mobile NUR den Connector (+ Spacer) ausblenden — „Gefaehrdet ab X%" und die
     Chat/Mail-Checkboxen bleiben sichtbar/bedienbar und duerfen umbrechen. */
  .task-sla-summary .task-sla-warning-connector,
  .task-sla-summary .task-sla-warning-spacer {
    display: none;
  }

  .task-sla-summary .task-sla-warning-line {
    flex-wrap: wrap;
    gap: 0.5rem 0;
  }

  /* bild1: Chat/Mail-Chips auf Mobile rechtsbuendig. Meta gestapelt (jede Zeile volle Breite), der
     Chip wird per margin-left:auto an den rechten Zeilenrand geschoben — Start-Zeile UND Gefaehrdet-Zeile. */
  .task-sla-summary .task-sla-meta {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .task-sla-summary .task-sla-meta > .ticket-sla-meta-item {
    min-width: 0;
  }

  .task-sla-summary .task-reminder-start,
  .task-sla-summary .task-sla-warning-line > .task-reminder-sla80 {
    margin-left: auto;
  }

  /* Mobile: feste Lead-Breite aufheben (Chips sind hier ohnehin rechtsbuendig -> kein Overflow). */
  .task-sla-summary .task-sla-lead {
    min-width: 0;
  }

  .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);
}

.dashboard-widgets-bordered .dashboard-widget-item .crm-surface-panel {
  border-color: var(--bs-primary) !important;
}


.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
   ======================================== */

body.dashboard-widget-management-open {
  overflow: hidden;
}

body.dashboard-widget-management-open #navigation,
body.dashboard-widget-management-open #global-topbar,
body.dashboard-widget-management-open #user-state-panel,
body.dashboard-widget-management-open [data-module="dashboard"] .dashboard-widget-content {
  pointer-events: none;
  user-select: none;
}

#dashboard-widgets.dashboard-widget-breakpoint-preview {
  outline: 2px dashed var(--bs-primary);
  outline-offset: -2px;
  box-sizing: border-box;
  flex: 0 1 auto;
}

/* 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);
}

/* Sidebar Options */
.widget-sidebar-options {
  padding: 0 1.5rem 1rem;
}

.widget-option-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.875rem;
  background-color: var(--cin-surface-subtle, var(--cin-surface));
  border: 1px solid var(--cin-border);
  border-radius: var(--bs-border-radius);
  font-size: 0.875rem;
  color: var(--cin-foreground);
  cursor: pointer;
  transition: background-color 150ms;
}

.widget-option-toggle: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-id="activities-list"] {
  align-self: stretch;
}

.dashboard-widget-item[data-widget-id="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;
}

/* ── 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,
.contact-mail-popup {
  color: var(--cin-text-muted, var(--bs-secondary-color));
  font-size: 1.1rem;
}

.contact-phone-popup:hover,
.contact-mail-popup:hover {
  color: var(--cin-primary, var(--bs-primary));
}

/* Ansprechpartner-Tabelle: „Kontaktieren"-Icons (Telefon · Mobil · @), gleiches Prinzip wie die
   Kontaktliste. Fehlt der Wert → blass & inaktiv. Blässe per Opacity (theme-sicher, keine Fixfarbe —
   #9ca3af4d würde Dark-Mode nicht mitgehen). */
.reference-medium-icon {
  color: var(--cin-text-muted, var(--bs-secondary-color));
  font-size: 1.1rem;
  line-height: 1;
  text-decoration: none;
}

.reference-medium-icon:hover {
  color: var(--cin-primary, var(--bs-primary));
}

.reference-medium-icon.is-empty {
  opacity: 0.3;
  pointer-events: none;
  cursor: default;
}

/* Markierte (aufgeklappte) Ansprechpartner-Zeile: Bootstraps .table-active ist ein dunkler Emphasis-
   Overlay (im Light-Mode kräftiges Grau). Stattdessen das App-Standard-Auswahlblau (wie comm-item-selected
   und der Tabellen-Hover) nutzen — gescopt auf die Referenz-Tabelle (.table-active wird sonst nirgends
   genutzt → global nebenwirkungsfrei). */
.reference-item .table > tbody > tr.table-active > * {
  --bs-table-bg-state: rgba(var(--bs-primary-rgb), 0.05);
}

[data-bs-theme="dark"] .reference-item .table > tbody > tr.table-active > * {
  --bs-table-bg-state: rgba(var(--bs-primary-rgb), 0.15);
}

/* Kontakte K-b: Inline-Editor im Split-Panel.
   Vorher lag der Editor im .modal-body (mit Innenabstand); inline fehlt der → Inhalt klebt am Rand
   UND .tab-content{overflow-y:auto} lässt overflow-x per CSS-Spec zu auto rechnen → die Bootstrap-.row
   (negative Ränder) erzeugt eine horizontale Scrollbar. Fix: Innenabstand pro Sektion (Projekte-Optik)
   + overflow-x explizit hidden; nur vertikal scrollen. Alles auf .is-inline gescopt → Modal unberührt. */
.contact-detail.is-inline {
  min-height: 0;
}

.contact-detail.is-inline > .contact-detail-header {
  padding: 0.75rem 1rem 0;
}

.contact-detail.is-inline > .contact-detail-tabs {
  padding-left: 1rem;
  padding-right: 1rem;
}

.contact-detail.is-inline > .tab-content {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  padding: 0 1rem 1rem;
}

.contact-detail.is-inline > .contact-inline-actions {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
}

/* Split/Inline: bei enger Breite passen nicht alle Reiter in eine Zeile. .nav-line hat overflow-x:auto,
   versteckt aber global den Scrollbalken (scrollbar-width:none) → wirkt abgeschnitten. Hier den dünnen
   Balken wieder einblenden (erscheint per overflow-x:auto nur bei Überlauf). Gescopt auf Kontakte-Editor
   UND Projekt-Formular (Split & Popup) — andere .nav-line (z. B. Postfach) bleiben unberührt. */
.contact-detail.is-inline .contact-detail-tabs,
#project-detail-content .nav.nav-line {
  scrollbar-width: thin;
}

.contact-detail.is-inline .contact-detail-tabs::-webkit-scrollbar,
#project-detail-content .nav.nav-line::-webkit-scrollbar {
  display: block;
  height: 6px;
}

/* Detail-Reiter → Icons bei schmalem Panel (Mobile ODER enge Split-View), wie das Postfach.
   Die Detail-Container sind Query-Container; misst wird die PANEL-Breite, nicht der Viewport, damit
   auch eine schmal gezogene Split-View einklappt. Der AKTIVE Reiter behält sein Label (Discoverability).
   Eigener Klassenname (.detail-tab-label/.detail-tab-ic) statt .tab-text — Letzteres wird global von der
   Postfach-Mobile-Regel (.tab-text{display:none}) versteckt und würde auch das aktive Label schlucken. */
#contact-detail-content,
#project-detail-content {
  container-type: inline-size;
  container-name: detailpanel;
}

/* Das eigenständige Projekt-Popup (ProjectView.openProjectPopup) rendert das Formular in einen
   Modal-Body statt in #project-detail-content. Damit die „Zuweisung"-Container-Queries auch dort
   greifen (schmales Popup → Felder untereinander), wird ein Modal-Body mit Projekt-Formular selbst
   zum detailpanel-Container. */
.modal:has(.project-form) .modal-body {
  container-type: inline-size;
  container-name: detailpanel;
}

/* Kein eigener Icon-Abstand nötig: .nav.nav-line .nav-link ist bereits inline-flex mit gap:0.5rem
   (= exakt der Postfach-Wert). Ein früheres margin-right am Icon stapelte darauf (→ ~0.9rem, zu weit).
   Bei verstecktem Label (Icon-only) entfällt der gap automatisch, da das <span> aus dem Flow fällt. */

@container detailpanel (max-width: 640px) {

  .contact-detail-tabs .nav-link:not(.active) .detail-tab-label,
  #project-detail-content .nav.nav-line .nav-link:not(.active) .detail-tab-label {
    display: none;
  }

  /* Bei schmalem Panel klebt der horizontale Reiter-Scrollbalken sonst am vertikalen Inhalts-Scrollbalken
     (beide trafen sich oben rechts). Reiterleiste höher ziehen (Platz oben ist da) + etwas Abstand nach
     unten, damit sich die Scrollbalken nicht berühren. !important, weil pt-3/mb-0 (Bootstrap) sonst gewinnen.
     Kontakte hat bereits mb-3 (kein Kontakt der Scrollbalken) → nur die Projekt-Reiterleiste betroffen. */
  #project-detail-content .project-form>.nav.nav-line {
    padding-top: 0.25rem !important;
    margin-bottom: 0.5rem !important;
  }

  /* Teilprojekt F/②: „Zuweisung" bei schmalem Panel/Popup — Zeilen-Felder untereinander statt
     nebeneinander (lange externe Ansprechpartner-Namen wurden sonst abgeschnitten). Aufteilung:
     Ersteller  → Zeile 1: Rolle-Select + Name · Zeile 2: Beteiligung-Radios.
     Mitglied/Team/Extern → Zeile 1: Art + Ziel (+ Entfernen) · Zeile 2: Rolle · Zeile 3: ext. Ansprechpartner. */
  /* CSS-Grid statt flex-wrap: deterministische Platzierung unabhängig von den Eigenbreiten der Felder
     (bei ~340px Popup-Breite passten sie sonst nicht sauber nebeneinander). UNPREFIXED (die Klassen
     gibt es nur im Projekt-Formular) → gilt sowohl im Inline-Panel (#project-detail-content) ALS AUCH
     im eigenständigen Projekt-Popup (Modal-Body ist ebenfalls detailpanel-Container, s. unten). */
  .project-creator-row {
    /* !important: die Zeile trägt Bootstraps .d-flex (display:flex!important) → sonst gewinnt flex und das Grid greift nie. */
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.5rem;
    align-items: center;
  }
  .project-creator-row>select {
    grid-column: 1;
    grid-row: 1;
  }
  .project-creator-name {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }
  .project-creator-participation {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .project-member-row>.d-flex {
    /* !important: der Wrapper trägt .d-flex (display:flex!important) → sonst greift das Grid nie. */
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
  }
  .project-member-kind {
    grid-column: 1;
    grid-row: 1;
  }
  .project-member-account,
  .project-member-team,
  .project-member-ext-company {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }
  .project-member-remove {
    grid-column: 3;
    grid-row: 1;
  }
  .project-member-role {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: none !important;
  }
  .project-member-ext-person {
    grid-column: 1 / -1;
    grid-row: 3;
    min-width: 0;
  }

  /* Aufgaben-Reiter im schmalen Popup/Panel: der Karten-Kopf (Titel + Zähler + „Neue Aufgabe") lief in
     Firefox nach rechts über — der Button trägt flex-shrink-0, der Titel schrumpfte nicht (Firefox gibt
     Form-/Textinhalten eine größere intrinsische Mindestbreite als Chrome). Titel schrumpfbar machen
     (Zähler-Text umbricht) + Button notfalls in die nächste Zeile umbrechen lassen (nie abgeschnitten). */
  .task-ctx-head {
    flex-wrap: wrap;
  }
  .task-ctx-head>.card-title {
    min-width: 0;
  }
  .task-ctx-head>.task-ctx-new {
    margin-left: auto;
  }

  /* Meilenstein-Zeilen: das native <input type="date"> hat in Firefox eine deutlich größere intrinsische
     Mindestbreite und schrumpft mit flex-shrink-0 nicht → Datum + Toggle + × drückten das × aus dem Popup
     (in Chrome schrumpft das Date-Input genug, um zu passen). Grid-Stack wie bei „Zuweisung":
     Zeile 1 = Titel + ×, Zeile 2 = Datum + Erledigt-Schalter. Deterministisch, unabhängig von Eigenbreiten. */
  .project-milestone-row {
    /* !important: die Zeile trägt Bootstraps .d-flex (display:flex!important) → sonst gewinnt flex. */
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
  }
  .project-milestone-title {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }
  .project-milestone-remove {
    grid-column: 2;
    grid-row: 1;
  }
  .project-milestone-due {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    /* Inline-style max-width:170px aufheben → das Date-Input füllt die Zeile statt zu überlaufen. */
    max-width: none !important;
  }
  .project-milestone-row>.form-switch {
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
  }
}

/* Breites Panel/Popup (>640px, Labels sichtbar): 9 beschriftete Reiter überschreiten die Zeilenbreite
   (z. B. im XL-Popup) → sonst horizontaler Scroll + der bewusst sichtbare dünne Scrollbalken. Stattdessen
   UMBRECHEN: die Leiste bleibt einzeilig, wenn sie passt, und bricht sonst auf zwei Zeilen um — nie ein
   Scrollbalken, jeder Reiter erreichbar. !important, weil die Utility-Klassen .flex-nowrap/.overflow-x-auto
   am <ul> selbst !important sind. Unter 640px greift weiter der Icon-Kollaps (einzeilig). */
@container detailpanel (min-width: 641px) {

  .contact-detail.is-inline .contact-detail-tabs,
  #project-detail-content .nav.nav-line {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
  }
}

/* Grauer Split-Detail-Hintergrund wie bei Projekte (#project-detail-content) — weiße Karten heben sich
   ab. Light = Modal-Grau, Dark = --cin-background; im Popup transparent (kein doppeltes Grau). */
#contact-detail-content {
  background-color: #f3f4f678;
}

[data-bs-theme="dark"] #contact-detail-content {
  background-color: var(--cin-background);
}

.workspace-popup-body #contact-detail-content {
  background-color: transparent;
}

/* Ausgewählte Zeile in der Kontakt-Split-Liste (analog Postfach/Projekte-Auswahl) */
#table-contacts tbody.list tr.contact-row-selected > * {
  --bs-table-bg-state: rgba(var(--bs-primary-rgb), 0.12) !important;
  --bs-table-color-state: inherit !important;
}

/* Category Dropdown — taller rows for edit/delete buttons */
#dropdown-category .dropdown-item {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

/* 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;
}

/* ==========================================================================
   Aufgaben (Tasks) — Split-View, Liste, Detail
   ========================================================================== */

/* Toolbar als weiße Card. 3-Zonen-Grid: links #+Suche · Mitte View-Toggle · rechts Filter+Anlegen. */
.task-toolbar {
  padding-inline: 0.75rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

/* Suche: Desktop gedeckelt, Mobile füllt sie die Zeile. */
.task-search-group {
  max-width: 320px;
}

/* Mobile: Grid → einzeilige Flex-Leiste. Mitte (Views) ist d-none, Filter hinter Trichter, „+" als FAB
   → übrig bleiben [#][Suche][Trichter]. Die Suche wächst, damit alles in eine Zeile passt. */
@media (max-width: 767.98px) {
  .task-toolbar {
    display: flex;
    flex-wrap: nowrap;
  }

  .task-toolbar>div:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }

  .task-toolbar>div:last-child {
    flex: 0 0 auto;
  }

  .task-search-group {
    max-width: none;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* FAB soll die letzte Listenzeile nicht verdecken. */
  #task-list {
    padding-bottom: 4.5rem;
  }
}

/* Detail-Panel = Karten-Default (weiß/dunkel wie Projekte). Das Grau liegt jetzt auf
   #task-detail-content (getabtes Karten-Layout), damit die weißen Karten sich abheben — ein
   zweites Grau am Panel würde den halbtransparenten Ton doppeln (siehe #task-detail-content unten). */

/* Inputs/Selects (Toolbar-Filter + Detail-Formular) weiß — das Projekt setzt --bs-body-bg
   global auf grau, .form-control erbt das; hier explizit auf Surface, wie im Modal. */
.task-toolbar .form-control,
.task-toolbar .form-select,
#task-detail-content .form-control,
#task-detail-content .form-select {
  background-color: var(--cin-surface);
}

/* Task-Formular auch im Modal (dort fehlt der #task-detail-content-Wrapper): Inputs/Selects weiß,
   inkl. der disabled Ersteller-Felder — Bootstrap graut disabled sonst über --bs-secondary-bg.
   Die :disabled-Varianten (0,3,0) schlagen Bootstraps .form-control:disabled unabhängig von der
   Ladereihenfolge. */
.task-form .form-control,
.task-form .form-select,
.task-form .form-control:disabled,
.task-form .form-select:disabled {
  background-color: var(--cin-surface);
}

/* Aufgaben-Detail (getabtes Karten-Layout wie Projekte): grauer Split-Hintergrund + weiße Karten,
   fester Kopf/Reiter/Aktionsbalken, nur der aktive Tab scrollt. Analog #project-detail-content.
   WICHTIG: CRM.renderHtml→renderID rendert #task-detail-template als outerHTML → es entsteht ein
   (id-entfernter) Wrapper-<div> UM das <form>. Ohne füllende Flex-Spalte am Wrapper reicht die
   Höhenkette NICHT durch → das Formular wird content-hoch, überläuft #task-detail-content (das bewusst
   NICHT scrollt) und die Aktionsleiste wird unten abgeschnitten — nur bei hohem Übersicht-Inhalt
   sichtbar, im kurzen Historie-Reiter aber vorhanden. Darum muss — exakt wie Projekte
   (#project-detail-content > div) — der Wrapper selbst eine füllende Flex-Spalte sein.
   Im Modal (globales „+Neu", Kommunikation-Aufgaben-Tab) greift dieser #task-detail-content-Scope NICHT
   → das Formular fließt natürlich, der Modal-Body scrollt; die Aktionsleiste ist dort per
   .task-form-in-modal verborgen (Modal-Footer liefert die Aktionen). */
#task-detail-content > div {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#task-detail-content .task-form {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#task-detail-content .task-form > .tab-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Wie Projekte/Kontakte: ohne dies rechnet overflow-x per CSS-Spec zu auto → die Bootstrap-.row
     (negative Ränder) erzeugt eine störende horizontale Scrollbar. Nur vertikal scrollen. */
  overflow-x: hidden;
}

/* Grauer Split-Detail-Hintergrund wie Projekte — weiße Karten heben sich ab.
   Light = Modal-Grau; Dark = --cin-background; im Popup transparent (kein doppeltes Grau). */
#task-detail-content {
  background-color: #f3f4f678;
}

[data-bs-theme="dark"] #task-detail-content {
  background-color: var(--cin-background);
}

/* Im Popup wird #task-detail-view (samt #task-detail-content) in den bereits grauen Modal-Body
   relociert — dort KEINE zweite Grau-Schicht. */
.workspace-popup-body #task-detail-content {
  background-color: transparent;
}

/* Referenz-Pille im Kopf ist klickbar (Build B) — ersetzt den früheren „Öffnen"-Button. Cursor +
   dezenter Hover; das ↗-Icon signalisiert „öffnet". Greift auf beide Pillen-Varianten
   (comm-item-type-badge für Mail/Ticket, task-ctx-badge für übrige Typen). */
.task-header-context .task-ctx-openable,
.calendar-event-context .task-ctx-openable {
  cursor: pointer;
}

.task-header-context .task-ctx-openable:hover,
.calendar-event-context .task-ctx-openable:hover {
  opacity: 0.85;
}

.task-header-context .task-ctx-openable:focus-visible,
.calendar-event-context .task-ctx-openable:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 1px;
}

.task-ctx-open-ic {
  font-size: 0.75em;
  opacity: 0.85;
}

/* Mailcow-Push „Kuh-Toggle" (Kalender S3, pro-User) — HORIZONTALER Schiebeschalter oben rechts im
   Termin-Header des Dialogs. Bewusst so gebaut, dass der KNOPF (die Kuh) GROESSER ist als die duenne
   Rail und oben/unten darueber hinausragt — der Knopf dominiert, nicht die Spur. AUS = monochrom &
   links, EIN = farbig & rechts. Hover aendert die Kuh NICHT (bleibt grau); Farbwechsel + Bounce
   passieren erst beim Klick. Slide ist smooth ohne Positions-Overshoot; die Kuh macht GENAU EINEN
   sanften Scale-Bounce, der zur Mitte der Animation aufbaut und am Ende weich auslaeuft. Kein
   box-shadow; Farben ueber --cin-* / --bs-*. Kein rechteckiges Outline am Button (das „Quadrat") — der
   Tastatur-Fokus-Ring sitzt auf der runden Rail. <button role="switch">, im read-only Dialog aktiv. */
.cow-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 2.2rem;
  padding: 0;
  margin: 0;
  border: 0;
  /* Bootstrap-Reboot/UA-Button-Chrome abschalten (Appearance, Innen-Rahmen) — nichts leckt durch. */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  cursor: pointer;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

/* Duenne Rail — KLEINER als der Knopf, damit die Kuh darueber hinausragt (overflow bleibt sichtbar). */
.cow-toggle-track {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 3.4rem;
  height: 1.3rem;
  padding: 0;
  border-radius: 50rem;
  border: 1px solid var(--bs-border-color);
  background-color: var(--bs-tertiary-bg);
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.16s ease;
}

/* Grosser Knopf — traegt den horizontalen Slide (translateX) und ragt ueber die Rail hinaus. */
.cow-toggle-knob {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  transform: translateX(0);
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.4, 1);
  will-change: transform;
}

/* Die Kuh — traegt Filter (grau/farbig) + den einzelnen Pop-Scale (getrennt vom Slide-Knopf, damit
   sich beide nicht ueber dieselbe transform-Property blockieren). Hover fasst sie NICHT an. */
.cow-toggle-cow {
  display: inline-block;
  position: relative;
  top: -0.18rem;          /* KUH-POSITION: negativer Wert = weiter nach oben */
  font-size: 2rem;        /* KUH-GROESSE: hier den Wert aendern */
  line-height: 1;
  transform: scale(1);
  filter: grayscale(1);   /* solide Graustufe (nicht mehr halbtransparent) */
  transition: filter 0.35s ease;
}

/* EIN-Zustand: Rail faerbt sich primaer, Knopf gleitet nach rechts, Kuh wird farbig + „poppt". */
.cow-toggle[aria-checked="true"] .cow-toggle-track {
  /* BLAUER TOGGLE-BG (an): kleinerer Prozentwert = sanfter (aktuell 10%). Kein farbiger Rand. */
  background-color: color-mix(in srgb, var(--cin-primary, var(--bs-primary)) 10%, var(--bs-body-bg));
}

.cow-toggle[aria-checked="true"] .cow-toggle-knob {
  transform: translateX(1.3rem);
}

.cow-toggle[aria-checked="true"] .cow-toggle-cow {
  filter: none;
  animation: cow-pop 0.48s ease-out both;
}

/* EIN sanfter Bounce: baut zur Mitte auf (Peak ~42 %), dann weiches, langsames Auslaufen auf 1 —
   ease-out streckt den Ruecklauf, so wirkt das Ende weicher als der Aufbau. */
@keyframes cow-pop {
  0%   { transform: scale(1); }
  42%  { transform: scale(1.17); }
  100% { transform: scale(1); }
}

/* Keine Hover-Animation (Nutzer-Wunsch): Bewegung passiert NUR beim Klick (Slide + Pop). Der Press
   gibt ein kurzes taktiles Feedback beim Klick selbst — kein Effekt bei reinem Ueberfahren. */
.cow-toggle:active .cow-toggle-track {
  transform: scale(0.97);
}

/* „Sichtbares Quadrat" entfernt: kein Outline am rechteckigen Button. Tastatur-Fokus zeigt einen
   runden Ring an der Rail (Outline folgt dem border-radius der Pille). */
/* Kein Rahmen/Ring bei Hover ODER Klick/Fokus (UA- und Bootstrap-Reboot-Fokusrahmen neutralisiert). */
.cow-toggle:focus,
.cow-toggle:focus-visible {
  outline: none;
}

.cow-toggle::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* Info-Stern neben dem Kuh-Toggle: dezent, etwas groesser als Standard, oeffnet ein Erklaer-Popover. */
.cow-info {
  font-size: 1.15rem;         /* INFO-STERN-GROESSE: hier den Wert aendern */
  line-height: 1;
  color: var(--cin-text-secondary);
  text-decoration: none;
}

.cow-info:hover,
.cow-info:focus-visible {
  color: var(--bs-primary);
  text-decoration: none;
}

/* RSVP-Teilnahme-Buttons „Deine Teilnahme" (S2) — drei Farben: Zusagen=blau, Vielleicht=orange,
   Absagen=rot. Blasser Tint-Hintergrund (kein Vollton) + farbiger Rahmen; aktiv = staerkerer Tint +
   fett. Theme-aware ueber --cin-* + color-mix. !important schlaegt das Bootstrap-.btn-Grundgeruest. */
.event-rsvp-btn {
  --rsvp-color: var(--cin-primary, var(--bs-primary));
  border: 1px solid var(--rsvp-color) !important;
  background-color: transparent !important;
  color: var(--rsvp-color) !important;
  transition: background-color 0.15s ease;
}

/* Nur der markierte (aktive) Button bekommt einen Hintergrund — sonst transparent, damit sich die
   Auswahl klar abhebt. Aktiv fuegt NUR den Tint hinzu, nichts weiter (kein Fett/Rahmen-/Textwechsel,
   auch kein Hover-Hintergrund). */
.event-rsvp-btn.is-active {
  background-color: color-mix(in srgb, var(--rsvp-color) 22%, transparent) !important;
}

.event-rsvp-btn.rsvp-accepted  { --rsvp-color: var(--cin-success); }
.event-rsvp-btn.rsvp-tentative { --rsvp-color: var(--cin-warning); }
.event-rsvp-btn.rsvp-declined  { --rsvp-color: var(--cin-danger); }

/* Erinnerungs-Zeile: sanftes Ein-/Ausblenden statt hartem display-Umschalten. Zusammengeklappt nimmt
   sie keinen Platz; is-visible faehrt Hoehe, Deckkraft und Abstand weich auf. Dauer = Einblend-Tempo. */
.cow-reminder-wrap {
  overflow: hidden;
  max-height: 0;
  margin-bottom: 0;
  opacity: 0;
  transition: max-height 0.45s ease, opacity 0.4s ease, margin-bottom 0.45s ease;
}

.cow-reminder-wrap.is-visible {
  max-height: 6rem;
  margin-bottom: 1rem;
  opacity: 1;
}

/* CRM-interner Erinnerungs-Block: gleiche Reveal-Animation wie oben, groessere Hoehe fuer die zwei
   Konfig-Zeilen (Wochentage + Frequenz/Uhrzeit/Kanaele). */
.crm-reminder-wrap {
  overflow: hidden;
  max-height: 0;
  margin-bottom: 0;
  opacity: 0;
  transition: max-height 0.45s ease, opacity 0.4s ease, margin-bottom 0.45s ease;
}

.crm-reminder-wrap.is-visible {
  max-height: 18rem;
  margin-bottom: 0.5rem;
  opacity: 1;
}

/* Termintag im Kontinuierlich-Modus markieren: dezenter Punkt unter der Wochentag-Pille. currentColor
   passt sich Aktiv/Inaktiv und beiden Themes automatisch an (kein Hardcoded-Color, kein box-shadow). */
.event-reminder-days .btn.is-appointment-day {
  position: relative;
}

.event-reminder-days .btn.is-appointment-day::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
  transform: translateX(-50%);
}

@media (prefers-reduced-motion: reduce) {
  .cow-toggle-track,
  .cow-toggle-knob,
  .cow-toggle-cow,
  .cow-reminder-wrap,
  .crm-reminder-wrap {
    transition-duration: 0.01ms;
  }

  .cow-toggle[aria-checked="true"] .cow-toggle-cow {
    animation: none;
  }
}

/* === Kalender: externe Kontakt-Teilnehmer (S5) ============================
   Groessere, gut lesbare Pille (Name + Entfernen) + ein dedizierter, klar
   sichtbarer „Einladen"-Toggle rechts daneben (ICS-E-Mail-Einladung pro
   Kontakt). Theme-aware ueber Bootstrap-Subtle-/Primary-Variablen. */
.event-contact-chips {
  gap: 0.5rem;
}

.event-contact-item {
  gap: 0.375rem;
}

.event-contact-chip {
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.4rem 0.75rem;
  line-height: 1.2;
}

.event-contact-chip .event-contact-chip-remove {
  cursor: pointer;
  font-size: 0.75rem;
  opacity: 0.6;
  transition: opacity 0.12s ease;
}

.event-contact-chip .event-contact-chip-remove:hover {
  opacity: 1;
}

.event-contact-notify-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.32rem 0.6rem;
  line-height: 1;
  white-space: nowrap;
}

.event-contact-notify-toggle .event-notify-label {
  font-size: 0.78rem;
  font-weight: 500;
}

/* AUS-Zustand des Einladen-Toggles (Default fuer neu hinzugefuegte Kontakte): ausgegraut = transparenter
   (weisser) Hintergrund + grauer Rand + graue Schrift/Icon (die Hover-Optik, nur blau->grau). Hover faerbt
   Rand/Schrift blau (signalisiert klickbar); Klick macht ihn AN (btn-primary, blau/weiss). Zwei-Klassen-
   Spezifitaet schlaegt Bootstraps .btn, daher kein !important noetig. */
.event-contact-notify-toggle.event-notify-off {
  color: var(--bs-secondary-color);
  border: 1px solid var(--bs-border-color);
  background-color: transparent;
}

.event-contact-notify-toggle.event-notify-off:not(:disabled):hover {
  color: var(--cin-primary, var(--bs-primary));
  border-color: var(--cin-primary, var(--bs-primary));
  background-color: transparent;
}

/* === Kalender: einklappbare Dialog-Container (Deine Teilnahme / Termin / Urlaub-Aktionen) =========
   Gemeinsamer Mechanismus: der Kopf (.event-collapse-head) bleibt sichtbar, der .event-collapse-body
   faehrt weich zu. Die max-height wird per JS auf scrollHeight gemessen (fuer hohen Inhalt sauber,
   Prinzip wie cow-reminder-wrap). Zustand ueber data-collapsed am .event-collapse-card. Theme-aware,
   kein box-shadow. */
.event-collapse-body {
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.35s ease;
}

.event-collapse-card[data-collapsed="true"] .event-collapse-body {
  max-height: 0;
  opacity: 0;
}

/* Kollabierte Kurzfassung (z. B. Status-Kreis) nur sichtbar wenn zu. */
.event-collapse-summary {
  display: none;
}

.event-collapse-card[data-collapsed="true"] .event-collapse-summary {
  display: inline-flex;
  align-items: center;
}

/* Runder Einklapp-Indikator: kleiner, blauer Pfeil, sitzt zentriert und straddelt die untere Kante der
   Karte (leicht in den Abstand zur naechsten Karte). Dreht sich beim Zuklappen. */
.event-collapse-card {
  position: relative;
}

.event-collapse-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 1px solid var(--bs-primary);
  border-radius: 50%;
  background-color: var(--bs-card-bg, var(--cin-surface));
  color: var(--bs-primary);
  line-height: 1;
  font-size: 0.8rem;
  transition: transform 0.3s ease, background-color 0.15s ease;
}

.event-collapse-toggle:hover {
  background-color: color-mix(in srgb, var(--bs-primary) 14%, var(--bs-card-bg, #fff));
}

.event-collapse-card[data-collapsed="true"] .event-collapse-toggle {
  transform: rotate(180deg);
}

/* Fuss = absoluter, zentrierter Griff an der Kartenunterkante — ausserhalb des einklappbaren Body, daher
   immer sichtbar (auch zusammengeklappt zum Wieder-Aufklappen). */
.event-collapse-foot {
  position: absolute;
  left: 50%;
  bottom: -0.8rem;
  transform: translateX(-50%);
  margin: 0;
  z-index: 3;
}

/* Status-Kreis der „Deine Teilnahme"-Kurzfassung: farbiger Kreis (Wahl), weisses Icon. */
.event-participation-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  color: #fff;
  font-size: 0.85rem;
  line-height: 1;
}

.event-participation-circle.rsvp-accepted     { background-color: var(--cin-success); }
.event-participation-circle.rsvp-tentative    { background-color: var(--cin-warning); }
.event-participation-circle.rsvp-declined     { background-color: var(--cin-danger); }
.event-participation-circle.rsvp-needs-action { background-color: var(--bs-secondary-color); }

@media (prefers-reduced-motion: reduce) {
  .event-collapse-body,
  .event-collapse-toggle {
    transition-duration: 0.01ms;
  }
}

/* Teilnehmer-Tabelle im Termin-Dialog: kompakt, GANZ subtiles Zebra + blauer Hover (Tabellen-Standard).
   Feste Spaltenbreiten (table-layout: fixed), damit das Anhaken eines Users mit langem Status-Text
   („Noch nicht eingeladen") die Tabelle NICHT verschiebt. */
.event-attendee-table {
  table-layout: fixed;
}

.event-attendee-table th:nth-child(2),
.event-attendee-table td:nth-child(2) {
  width: 6rem;
}

.event-attendee-table th:nth-child(3),
.event-attendee-table td:nth-child(3) {
  width: 12rem;
}

/* Mobil (< md): Verfuegbarkeit + Status auf Icon-Breite schrumpfen (Badges sind dort icon-only, s.
   #rsvpBadge/d-none d-md-inline) — sonst fressen 6rem+12rem die „Benutzer"-Spalte auf und der Name/
   Header bricht um. Muss NACH den Basis-Breiten stehen (gleiche Spezifitaet, Quell-Reihenfolge gewinnt). */
@media (max-width: 767.98px) {
  .event-attendee-table th:nth-child(2),
  .event-attendee-table td:nth-child(2),
  .event-attendee-table th:nth-child(3),
  .event-attendee-table td:nth-child(3) {
    width: 3rem;
  }
}

/* Zebra exakt nach App-Standard (wie contact.tpl / .comm-table): ungerade Zeilen --cin-surface,
   gerade --cin-surface-subtle. Beide Werte sind theme-aware Design-Tokens (der subtile Ton ist bewusst
   dezent) — kein table-striped/Opacity-Trick, der zu dunkel geriet. */
.event-attendee-table > tbody > tr:nth-child(odd) > * {
  background-color: var(--cin-surface) !important;
  --bs-table-bg: var(--cin-surface) !important;
}

.event-attendee-table > tbody > tr:nth-child(even) > * {
  background-color: var(--cin-surface-subtle) !important;
  --bs-table-bg: var(--cin-surface-subtle) !important;
}

.event-attendee-table > :not(caption) > * > * {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}

.event-attendee-table thead th {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
}

.event-attendee-table .event-attendee-status {
  white-space: nowrap;
}

.event-attendee-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"] .event-attendee-table.table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: rgba(var(--bs-primary-rgb), 0.15) !important;
}

/* Verfuegbarkeits-Button: transformiert sich beim Klick selbst (Icon + Farbe) — kein Zusatz-Icon. */
.event-avail-btn.is-free {
  border-color: var(--cin-success) !important;
  color: var(--cin-success) !important;
}

.event-avail-btn.is-busy {
  border-color: var(--cin-danger) !important;
  color: var(--cin-danger) !important;
}

/* Info-Zeile unter einem externen Kontakt ohne einladbare (opt-in-)Mail (S5-Umbau). */
.event-contact-nomail {
  flex-basis: 100%;
  font-size: 0.75rem;
}

/* Externe-Kontakt-Suchergebnisse: per JS als position:fixed unter dem Feld platziert, damit sie NICHT vom
   Modal-Body (overflow) abgeschnitten werden. Ohne Modal-Transform ist fixed = Viewport-bezogen. */
.event-contact-results {
  position: fixed;
  z-index: 2100;
  max-height: 260px;
  overflow-y: auto;
}

/* Item 4: „E-Mail-Tags öffnen"-Pille an der Zuweisungs-Warnung — Pillen-Optik wie die Kontext-Pille,
   in Blau (Primär). Theme-sicher über --bs-primary*. */
.task-tag-connect-pill {
  padding: 0.1rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.4;
  border-radius: 50rem;
  border: 1px solid var(--bs-primary, #0d6efd);
  color: var(--bs-primary, #0d6efd);
  background-color: var(--bs-primary-bg-subtle, rgba(13, 110, 253, 0.1));
  cursor: pointer;
  transition: background-color 0.12s ease, opacity 0.12s ease;
}

.task-tag-connect-pill:hover {
  background-color: var(--bs-primary-border-subtle, rgba(13, 110, 253, 0.2));
}

.task-tag-connect-pill:focus-visible {
  outline: 2px solid var(--bs-primary, #0d6efd);
  outline-offset: 1px;
}

/* Aufgaben-Formular im Modal/Popup (globales „+Neu", Kommunikation-Aufgaben-Tab, Popup-Modus): die
   weißen Karten vom Modal-Hintergrund abheben. Im Dark-Mode den Modal-Hintergrund auf --cin-background
   setzen, damit die --bs-card-bg-Karten sichtbar kontrastieren (analog .modal:has(.project-form)).
   Light-Mode braucht es nicht (Modal-Grau vs. weiße Karten passt bereits). */
[data-bs-theme="dark"] .modal:has(.task-form) .modal-content,
[data-bs-theme="dark"] .modal:has(.task-form) .modal-header,
[data-bs-theme="dark"] .modal:has(.task-form) .modal-body,
[data-bs-theme="dark"] .modal:has(.task-form) .modal-footer {
  background-color: var(--cin-background) !important;
}

/* Split-View: linke Liste + Resize-Handle + rechtes Detail */
.task-main {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

.task-left-panel {
  width: 50%;
  position: relative;
}

.task-right-panel {
  flex: 1;
}

.task-resize-handle {
  width: 8px;
  background-color: var(--cin-border);
  cursor: col-resize;
  border-radius: 9999px;
  transition: all 0.2s;
  flex-shrink: 0;
  position: relative;
}

.task-resize-handle:hover {
  background-color: var(--bs-primary);
  box-shadow: 0 0 10px rgba(var(--bs-primary-rgb), 0.3);
}

/* === Workspace-Gerüst: Lock-Icon an der Trennleiste (Split-Breite einfrieren) ===
   Sitzt mittig oben auf der 8px-Leiste und ragt symmetrisch über beide Panels. DAUERHAFT sichtbar,
   dezent grau (nur Icon + Border); beim Hover blau. Offen/geschlossen unterscheidet nur das Icon
   (bi-unlock / bi-lock), kein Farbwechsel. Variablen sind Light/Dark-tauglich. */
.workspace-lock-btn {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  width: 22px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--cin-border);
  background-color: var(--cin-surface);
  color: var(--bs-secondary-color);
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.workspace-lock-btn:hover,
.workspace-lock-btn:focus-visible {
  border-color: var(--bs-primary);
  color: var(--bs-primary);
  outline: none;
}

/* === Generisches Split-Gerüst (WorkspaceLayout) — modulunabhängige Split-Optik ===
   Gleiche Maße wie die .task-* Klassen oben; genutzt von Projekte (project.tpl) und künftig weiteren
   Modulen. Aufgaben migriert später auf diese Klassen (dann .task-* entfernen). Resize/Lock-Verhalten
   teilt sich die generische .workspace-lock-btn oben. */
.workspace-main {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

.workspace-left-panel {
  width: 50%;
  position: relative;
}

.workspace-right-panel {
  flex: 1;
}

.workspace-resize-handle {
  width: 8px;
  background-color: var(--cin-border);
  cursor: col-resize;
  border-radius: 9999px;
  transition: all 0.2s;
  flex-shrink: 0;
  position: relative;
}

.workspace-resize-handle:hover {
  background-color: var(--bs-primary);
  box-shadow: 0 0 10px rgba(var(--bs-primary-rgb), 0.3);
}

@media (max-width: 767.98px) {
  .workspace-main {
    flex-direction: column;
  }

  /* Mobile = Popup (WorkspaceLayout erzwingt es): das Detail ist ein Vollbild-Modal, nicht mehr
     darunter gestapelt → die Liste nutzt die VOLLE Höhe. (Früher max-height:45% = der „Höhe"-Bug.) */
  .workspace-left-panel {
    width: 100% !important;
    max-height: none;
  }

  .workspace-resize-handle {
    display: none;
  }

  /* Split/Popup-Umschalter sind auf Mobile sinnlos (Popup ist erzwungen) → ausblenden. */
  .workspace-mode-buttons {
    display: none !important;
  }
}

/* Filter-Trichter (Aufgaben + Projekte): Desktop rendert die Selects INLINE (statisches „Dropdown"),
   Mobile klappt sie hinter einen Trichter-Button ein → die Toolbar bleibt einzeilig. Eine einzige
   Select-Gruppe (IDs unverändert → Filterlogik im JS bleibt unangetastet), Muster wie Postfachs nav-md-line. */
@media (min-width: 768px) {
  .workspace-filter-funnel>.workspace-filter-fields.dropdown-menu {
    display: flex !important;
    position: static;
    flex-direction: row;
    gap: 0.5rem;
    min-width: 0;
    margin: 0;
    /* !important, weil das Template-Element .p-2 (padding:.5rem !important) trägt — sonst bliebe der
       Trichter-Inhalt eingerückt/höher; hier soll er flush inline sitzen. */
    padding: 0 !important;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
}

@media (max-width: 767.98px) {

  /* Im aufgeklappten Trichter volle Breite (schlägt das .w-auto der Selects). */
  .workspace-filter-funnel>.workspace-filter-fields .form-select {
    width: 100% !important;
  }

  .workspace-filter-funnel>.workspace-filter-fields .form-select:not(:last-child) {
    margin-bottom: 0.5rem;
  }

  /* Projekt-Suche darf mobil schrumpfen/wachsen (Desktop: min-width 320px), damit die Leiste einzeilig
     bleibt und die FAB die letzte Listenzeile nicht verdeckt. */
  .project-search-group {
    min-width: 0;
    flex: 1 1 auto;
  }

  #project-list {
    padding-bottom: 4.5rem;
  }
}

/* Desktop-Breite explizit als min-width-Query, damit sie NICHT die Mobile-Regel oben überschreibt
   (gleiche Spezifität → sonst gewänne die spätere Quelle). */
@media (min-width: 768px) {
  .project-search-group {
    min-width: 320px;
  }
}

/* Kompakte Projekt-Liste im linken Split-Panel (ersetzt die frühere Tabelle) */
.project-list-item {
  cursor: pointer;
  border-bottom: 1px solid var(--cin-border);
  transition: background-color 0.12s ease;
}

.project-list-item:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.05);
}

.project-list-item.active {
  background-color: rgba(var(--bs-primary-rgb), 0.1);
}

[data-bs-theme="dark"] .project-list-item.active {
  background-color: rgba(var(--bs-primary-rgb), 0.18);
}

/* Inline-Aktionsleiste des Projekt-Formulars: nur im Split-Detail (#project-detail-content) sichtbar.
   Im Modal (globales „+Neu", Kontakt-Tab) verborgen — dort liefern die Modal-Footer-Buttons die
   Speichern/Abbrechen-Aktionen. So bleiben die Modal-Aufrufer (topbar.js, contact-edit.js) unberührt. */
.project-form-actions {
  display: none;
}

#project-detail-content .project-form-actions {
  display: flex;
  flex-shrink: 0;
}

/* 2b: Im Split-Detail füllt das getabte Formular die Panel-Höhe; NUR der aktive Tab-Inhalt scrollt,
   Reiter-Nav und Aktionsleiste bleiben sichtbar. Bewusst auf #project-detail-content gescopt — im
   Modal (topbar „+Neu", Kontakt-Tab) greift das NICHT, dort fließt das Formular natürlich und der
   Modal-Body scrollt. */
/* SimpleRenderer.renderID liefert einen (id-entfernten) Wrapper-<div> um das <form>; damit die
   Flex-Höhenkette #project-detail-content → Wrapper → .project-form durchreicht (und der aktive Tab
   scrollen kann statt die Aktionsleiste unten abzuschneiden), muss der Wrapper selbst eine füllende
   Flex-Spalte sein. */
#project-detail-content > div {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#project-detail-content .project-form {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#project-detail-content .project-form > .tab-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Wie beim Kontakte-Editor: ohne dies rechnet overflow-x per CSS-Spec zu auto → die Bootstrap-.row
     (negative Ränder) erzeugt eine störende horizontale Scrollbar. Nur vertikal scrollen. */
  overflow-x: hidden;
}

/* Testweise: grauer Hintergrund im Split-Detail (wie der Modal-Body), damit die weißen Karten
   sichtbar abgehoben werden. Light = Modal-Grau; Dark = --cin-background. */
#project-detail-content {
  background-color: #f3f4f678;
}

[data-bs-theme="dark"] #project-detail-content {
  background-color: var(--cin-background);
}

/* Im Popup wird #project-detail-content in den (bereits grauen) Modal-Body relociert — dort KEINE
   zweite Grau-Schicht auflegen, sonst stapeln sich zwei halbtransparente Grautöne (innen dunkler). */
.workspace-popup-body #project-detail-content {
  background-color: transparent;
}

.task-list-container {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ---- Vorgang-gruppierte Liste ---- */
.task-list>.task-group+.task-group {
  border-top: 1px solid var(--cin-border);
}

/* Gruppen-Kopfzeile */
.task-group-header {
  cursor: pointer;
  color: var(--cin-foreground);
  transition: background-color 0.15s;
}

.task-group-header:hover {
  background-color: var(--cin-surface-subtle) !important;
}

.task-group-chevron,
.task-group-icon {
  color: var(--cin-text-muted);
  font-size: 0.85rem;
}

.task-group-name {
  color: var(--cin-foreground);
}

/* Gruppen-Körper: weiß wie die Card, nur feine Trennlinien */
.task-group-body {
  background-color: var(--cin-surface);
  border-top: 1px solid var(--cin-border);
}

.task-group-body>.task-row+.task-row {
  border-top: 1px solid var(--cin-border);
}

/* Aufgaben-Zeile */
.task-row {
  cursor: pointer;
  padding-left: 12px;
  transition: background-color 0.15s;
}

.task-row:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.05);
}

.task-row-selected {
  background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
}

.task-row-done {
  opacity: 0.7;
}

.task-row-done .task-row-title {
  text-decoration: line-through;
  color: var(--cin-text-muted);
}

.task-row-title {
  color: var(--cin-foreground);
}

/* Subtask-UI: Unteraufgaben-Sektion im Detail (Punkt „Subtask-UI zuerst"). Theme-aware, kein box-shadow. */
.task-subtask-row {
  border-radius: var(--bs-border-radius-sm);
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  cursor: pointer;
}
.task-subtask-row:hover {
  background-color: var(--bs-primary-bg-subtle);
}
.task-subtask-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: var(--bs-secondary-color);
}
.task-subtask-dot.is-done {
  background-color: var(--cin-success, var(--bs-success));
}

/* Subtask-UI (B1): eingerückte Unteraufgaben-Zeile in der Aufgaben-Liste + Verbindungs-Icon. */
.task-row.task-row-child {
  padding-left: 1.75rem;
}
.task-row-branch {
  font-size: 0.8rem;
  opacity: 0.7;
}

/* Subtask-UI (Block A): gesperrtes „Übergeordnete Aufgabe"-Feld — rote Markierung signalisiert
   „bewusst festgelegt / nicht änderbar" (ohne Bootstraps volle .is-invalid-Optik). !important, weil
   .form-select:disabled sonst die Rahmenfarbe überschreibt. */
.task-parent-select.is-locked {
  border-color: var(--bs-danger) !important;
  color: var(--cin-text-muted);
  cursor: not-allowed;
}

/* Subtask-UI (Block C): zentrierter Leerzustand der „Unteraufgaben"-Karte — Optik wie die „Termin"-Karte
   (Icon → Text → Button, füllt die Kartenhöhe). */
.task-subtasks-card .task-subtasks-empty {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  padding: 0.5rem 0;
}
.task-subtasks-card .task-subtasks-empty-ic {
  font-size: 1.75rem;
  color: var(--cin-text-muted);
  opacity: 0.75;
}

/* Block D: „+" am Vorgang-Kopf der Aufgaben-Liste (neue Aufgabe mit Bezug zum Vorgang). */
.task-group-add {
  color: var(--cin-text-muted);
  text-decoration: none;
  line-height: 1;
}
.task-group-add:hover {
  color: var(--bs-primary);
}

/* Teilprojekt F5: Aufgaben im Projekt-/Kontext-Reiter liegen in .task-ctx-list (nicht .task-group-body),
   deshalb greift der Gruppen-Trenner dort nicht. Gleicher 1px-Trenner für optische 1:1-Parität. */
.task-ctx-list > .task-row + .task-row {
  border-top: 1px solid var(--cin-border);
}

/* Prioritäts-Punkt (Zeile: 8px) */
.task-prio-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  display: inline-block;
  background-color: var(--cin-text-muted);
}

.task-prio-low {
  background-color: var(--cin-text-muted);
}

.task-prio-medium {
  background-color: var(--bs-primary);
}

.task-prio-high {
  background-color: var(--bs-secondary);
}

.task-prio-urgent {
  background-color: var(--bs-danger);
}

/* Einheitliches Status-/Prioritäts-Icon-Vokabular (Teilprojekt: admin-konfigurierbares Aussehen).
   Farbige Icons statt reiner Punkte in Liste/Kanban/Detail/Panes. Die Farbe kommt inline aus
   task_option (var(--cin-*) waere theme-aware, aber das etablierte Admin-Muster CalendarType/SlaPolicy
   nutzt fixe Hex — bewusst uebernommen, damit der Admin-Farbwaehler exakt greift). Groesse/Ausrichtung
   hier zentral; die Icons erben die Textfarbe NICHT (inline color gewinnt). */
.task-row-marks {
  line-height: 1;
}

.task-status-icon,
.task-prio-icon {
  font-size: 0.95rem;
  line-height: 1;
  vertical-align: middle;
}

/* Meta-Spalten (feste Breiten für Ausrichtung wie im Prototyp) */
/* Feste Spaltenbreiten (Tags | Fällig | Avatare) sorgen dafür, dass das Fälligkeitsdatum
   IMMER an derselben vertikalen Linie steht — unabhängig davon, ob Tags oder Avatare
   vorhanden sind (Ausrichtung wie im Prototyp-Mockup). Jede Spalte ist rechtsbündig; leere
   Spalten (z. B. keine Tags) belegen ihre Breite trotzdem, damit nichts „nachrutscht". */
.task-row-meta {
  display: grid;
  /* Abzeichnung (x/y) | Tags | SLA | Fällig | Avatare — feste Spalten, Datum fluchtet immer. */
  grid-template-columns: 40px 28px 22px 82px 64px;
  align-items: center;
  gap: 0.5rem;
}

.task-row-completion {
  justify-self: end;
  white-space: nowrap;
}

/* Teilprojekt L: SLA-Badge-Spalte in der Task-Liste. */
.task-row-sla {
  justify-self: end;
}

/* Teilprojekt L: kompaktes SLA-Badge (Icon-Pille) für Liste, Kanban und Postfach-Aufgaben-Tab.
   Farbpalette wie die Ticket-Status-Badges (.tag-badge.status-*) — theme-neutral (light+dark). */
.task-sla-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
}

.task-sla-badge.status-secondary {
  color: #6b7280;
  background-color: rgba(107, 114, 128, 0.12);
}

.task-sla-badge.status-success {
  color: #16a34a;
  background-color: rgba(34, 197, 94, 0.14);
}

.task-sla-badge.status-warning {
  color: #d97706;
  background-color: rgba(245, 158, 11, 0.16);
}

.task-sla-badge.status-danger {
  color: #dc2626;
  background-color: rgba(239, 68, 68, 0.14);
}

.task-row-tags {
  min-width: 0;
  justify-self: end;
}

/* Teilprojekt M — CRM-Tag-Picker (Formular-Dropdown) + Toolbar-„#"-Filter: scrollbar bei vielen
   Tags, damit das Dropdown nicht aus dem Modal/Viewport läuft. Picker breiter (viel Platz da). */
.task-crm-tag-menu,
.project-crm-tag-menu {
  min-width: 320px;
  max-width: 460px;
  /* An den Content orientieren: wächst mit der Liste, scrollt erst, wenn sie höher als der
     verfügbare Viewport wird (nicht schon bei einer festen Pixelhöhe). */
  max-height: 78vh;
  overflow-y: auto;
}

.task-crm-tag-filter .dropdown-menu {
  min-width: 240px;
  max-width: 320px;
  max-height: 320px;
  overflow-y: auto;
}

/* Picker-Zeile: Toggle linksbündig — Bootstrap-form-check-Padding/-Float neutralisieren (das war
   der linke Leerraum), Tag direkt dahinter. Jede Zeile startet damit optisch gleich. */
.task-crm-tag-toggle {
  padding-left: 0;
  min-height: auto;
}

.task-crm-tag-toggle .form-check-input {
  margin-left: 0;
  margin-top: 0;
  float: none;
}

/* Tag-Beschreibung: klein + grau, linksbündig unter dem Toggle (weniger präsent, weniger Umbrüche). */
.task-crm-tag-desc {
  font-size: 0.72rem;
  line-height: 1.25;
  color: var(--cin-text-secondary);
  margin-top: 0.1rem;
}

.task-row-due {
  white-space: nowrap;
  justify-self: end;
}

.task-row-overdue {
  color: var(--bs-danger) !important;
  font-weight: 500;
}

/* Avatar-Kreise (überlappend) — rechtsbündig in der festen Meta-Spalte. */
.task-row-avatars {
  display: flex;
  justify-content: flex-end;
  justify-self: end;
}

.task-avatar {
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
  background-color: var(--cin-surface-raised, var(--cin-surface-subtle));
  color: var(--cin-text-secondary);
  box-shadow: 0 0 0 2px var(--cin-surface);
  flex-shrink: 0;
}

.task-avatar+.task-avatar {
  margin-left: -6px;
}

.task-avatar-external {
  background-color: #fef3c7;
  color: #b45309;
}

[data-bs-theme="dark"] .task-avatar-external {
  background-color: #451a03;
  color: #fcd34d;
}

.task-avatar-more {
  background-color: var(--cin-surface-subtle);
  color: var(--cin-text-muted);
}

/* Detail-Formular */
.task-form .form-label {
  font-weight: 500;
}

/* Read-only Kontext-/Personen-Badge oben im Detail */
/* Löschen-Button im Aufgaben-Modal linksbündig; Abbrechen/Speichern bleiben rechts.
   DOM-Reihenfolge im Footer ist [Abbrechen][Löschen][Speichern]. order:-1 rutscht Löschen
   visuell ganz nach links, margin-right:auto schiebt die restlichen Buttons nach rechts.
   !important, da Bootstrap .modal-footer > * ein margin auf jedes Kind setzt. */
.modal-footer .task-modal-delete-left {
  order: -1;
  margin-right: auto !important;
}

/* Frueherer linker Footer-Button (z. B. „Absagen" links von „Löschen"): nur nach links ruecken,
   KEIN margin-right:auto — sonst entstuende eine Luecke zwischen den beiden linken Buttons. Nur der
   LETZTE linke Button traegt task-modal-delete-left und schiebt die rechte Gruppe weg. */
.modal-footer .cal-footer-left {
  order: -1;
}

/* ===== Timeline-Tab (C4) — chronologische Terminliste ===== */
.timeline-toolbar {
  max-width: 820px;
  margin: 0 auto;
  padding: 0.25rem 0.75rem;
  display: flex;
  justify-content: flex-end;
}

.timeline-list {
  max-width: 820px;
  margin: 0 auto;
  padding: 0.5rem 0;
}

/* „Heute"-Trenner zwischen Vergangenem und Kommendem. */
.timeline-today {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0 0.5rem;
  color: var(--cin-primary, var(--bs-primary));
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.timeline-today::before,
.timeline-today::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--bs-border-color);
}

.timeline-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--bs-border-color);
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.timeline-row:hover {
  background-color: var(--bs-primary-bg-subtle);
}

.timeline-date {
  flex: 0 0 3rem;
  text-align: center;
  line-height: 1.15;
}

.timeline-day {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--bs-body-color);
}

.timeline-mon {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

.timeline-year {
  font-size: 0.65rem;
  color: var(--bs-secondary-color);
}

.timeline-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.timeline-main {
  flex: 1;
  min-width: 0;
}

.timeline-row.is-cancelled {
  opacity: 0.7;
}

.timeline-badge-cancelled {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
  font-size: 0.65rem;
  vertical-align: middle;
}

.task-ctx-badge {
  max-width: 280px;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  /* Höhe 1:1 zur Ticket-Pille (Bootstrap .badge): font 0.75rem + line-height 1, sonst wirkt die Pille
     durch die geerbte Zeilenhöhe höher als das Ticket-Badge. */
  font-size: 0.75rem;
  line-height: 1;
  font-weight: 500;
  border: 1px solid var(--cin-border);
  background-color: var(--cin-surface-subtle);
  color: var(--cin-text-secondary);
}

.task-ctx-badge i {
  font-size: 0.8rem;
}

/* Trenner „|" zwischen Typwort und Bezeichnung (wie die Ticket-Pille) — dezent. */
.task-ctx-sep {
  opacity: 0.5;
  font-weight: 400;
}

/* Personen-Badge (manuelle Aufgabe) — dezent rosa/akzent wie im Prototyp */
.task-ctx-person {
  background-color: rgba(var(--bs-primary-rgb), 0.08);
  border-color: rgba(var(--bs-primary-rgb), 0.25);
  color: var(--bs-primary);
}

.task-ctx-external {
  background-color: #fef3c7;
  border-color: #fde68a;
  color: #b45309;
}

[data-bs-theme="dark"] .task-ctx-external {
  background-color: #451a03;
  border-color: #78350f;
  color: #fcd34d;
}

/* Kontext-Badge-Farben je Bezugstyp (project/customer/…).
   ticket/email/communication nutzen KEIN task-ctx-*, sondern 1:1 den Postfach-Badge
   (.comm-item-type-badge, gebaut in TaskForm.#commTypeBadge) — daher hier nicht enthalten. */
.task-ctx-project {
  background-color: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.2);
  color: #8b5cf6;
}

.task-ctx-socialmedia,
.task-ctx-customer {
  background-color: rgba(236, 72, 153, 0.1);
  border-color: rgba(236, 72, 153, 0.2);
  color: #ec4899;
}

.task-ctx-calendar {
  background-color: rgba(6, 182, 212, 0.1);
  border-color: rgba(6, 182, 212, 0.2);
  color: #06b6d4;
}

.task-ctx-task {
  background-color: rgba(13, 148, 136, 0.1);
  border-color: rgba(13, 148, 136, 0.2);
  color: #0d9488;
}

.task-ctx-team {
  background-color: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.2);
  color: #6366f1;
}

.task-ctx-employee {
  background-color: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.2);
  color: #10b981;
}

.task-ctx-lead {
  background-color: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}

/* Zuweisungs-Steuerbutton links (quadratisch, wie Prototyp h-9 w-9) */
.task-assignee-toggle i {
  font-size: 1rem;
  line-height: 1;
}

/* Konsistente Eingabefelder im GESAMTEN Aufgaben-Formular (Nutzer-Feedback 2026-07-17):
   eine Schriftgröße (0.875rem) und eine Höhe (38px) für alle einzeiligen Inputs/Selects —
   deterministisch gesetzt, damit kein Feld (z. B. Ersteller-Zeile: 35px/1rem) aus der
   Reihe fällt. Textarea (Beschreibung) behält ihre Mehrzeilen-Höhe, nur die Schrift gleich. */
.task-form .form-control,
.task-form .form-select {
  font-size: 0.875rem;
  height: 38px;
}

.task-form textarea.form-control {
  height: auto;
}

/* Steuer-Button (+/×) ebenfalls auf 38px, damit er nicht kleiner als die Felder wirkt. */
.task-assignee-toggle {
  width: 38px;
  height: 38px;
  padding: 0;
}

/* Extern-Zuweisung: Firma → Ansprechpartner (Cascade, Dropdown-Komponente).
   Beide Dropdowns liegen NEBENEINANDER in derselben Zeile (flex-row im Template) und teilen
   sich die verbleibende Breite; min-width:0 erlaubt das Schrumpfen statt Umbruch. */
.task-assignee-external-wrap {
  flex: 1 1 0;
  min-width: 0;
}

/* Die Dropdown-Komponente rendert (ohne form-floating) einen input-group-Container mit
   Suchfeld (.form-control) + Split-Toggle-Button. Beide auf die Zeilenhöhe bringen und das
   Menü über die volle Breite des Containers öffnen. */
.task-assignee-external-wrap .dropdown-text .btn {
  height: 38px;
  display: flex;
  align-items: center;
}

.task-assignee-external-wrap .dropdown-menu {
  width: 100%;
}

/* Ersteller-Zeile (Teilprojekt K7): der "+"-Button (Zuweisung hinzufügen) nimmt dieselbe
   Breite ein wie die ×-Steuer-Buttons der Zusatz-Zeilen — alles fluchtet. */
.task-assignee-add {
  width: 38px;
  height: 38px;
  padding: 0;
}

/* Gemeinsame feste Breite für die Art-Selects (Ersteller / Zuständiger / Team / Extern) —
   sonst richtet sich jedes nach seinem längsten Text und die Spalte flattert. */
.task-assignee-kind-width {
  width: 124px;
}

/* Einheitliche vertikale Ausrichtung der Zuweisungs-Zeilen (Nutzer-Wunsch 2026-07-21):
   Ersteller-Zeile UND Zuständigen-Zeilen nutzen dasselbe feste Spalten-Raster → alle Spalten
   fluchten. Jede Zeile ist ein eigenes Grid; feste Spaltenbreiten (statt auto) sorgen dafür,
   dass die Spalten über die Zeilen hinweg identisch sind. Fehlende Elemente (kein Benachrichtigen-
   Toggle beim Ersteller, kein „Erledigt" beim Beobachter) lassen ihre Spalte einfach leer.
   Spalten: [Steuer +/×] [Art-Select] [Ziel flexibel] [Beteiligung] [Benachrichtigen] [Erledigt]. */
.task-assignee-grid {
  display: grid;
  grid-template-columns: 38px 124px minmax(0, 1fr) 292px 44px 104px;
  align-items: center;
  gap: 0.5rem;
}

.task-assignee-grid>.task-assignee-add,
.task-assignee-grid>.task-assignee-toggle {
  grid-column: 1;
  justify-self: start;
}

.task-assignee-grid>.task-assignee-kind-width {
  grid-column: 2;
}

.task-assignee-grid>.task-creator-name,
.task-assignee-grid>.task-assignee-member,
.task-assignee-grid>.task-assignee-team,
.task-assignee-grid>.task-assignee-external-wrap {
  grid-column: 3;
  min-width: 0;
}

.task-assignee-grid>.task-creator-participation,
.task-assignee-grid>.task-assignee-participation {
  grid-column: 4;
  justify-self: start;
  flex-wrap: nowrap;
}

.task-assignee-grid>.task-assignee-notify {
  grid-column: 5;
  justify-self: start;
}

.task-assignee-grid>.task-part-complete {
  grid-column: 6;
  justify-self: end;
}

/* Warn-/Info-Nachricht (Tag-Warnung, Dubletten-Hinweis) UNTER der Zeile über die volle Breite
   (eigene Grid-Zeile) — statt in der „Erledigt"-Spalte, wo sie sonst umbricht. */
.task-assignee-grid>.task-assignee-tag-warn-msg {
  grid-column: 1 / -1;
}

/* Mobile/Popup: das 6-Spalten-Fixraster (~602px) passt nicht auf ein Handy → Horizontal-Scroll.
   Auf eine Spalte umbrechen (alles untereinander), alle festen Spaltenzuweisungen zurücksetzen und die
   Beteiligungs-Radios (waren nowrap in der 292px-Spalte) umbrechen lassen. Garantiert kein H-Scroll. */
@media (max-width: 767.98px) {
  .task-assignee-grid {
    grid-template-columns: 1fr;
    row-gap: 0.5rem;
  }

  .task-assignee-grid>* {
    grid-column: 1 !important;
  }

  .task-assignee-grid>.task-creator-participation,
  .task-assignee-grid>.task-assignee-participation {
    flex-wrap: wrap;
  }

  .task-creator-part-option,
  .task-assignee-part-option {
    white-space: normal;
  }
}

.task-creator-row .form-select:disabled,
.task-creator-row .form-control:disabled {
  background-color: var(--cin-surface);
  color: var(--cin-text-secondary);
}

/* 3 Radio-Optionen (Beteiligt/Beobachten/Nicht beteiligt) — ohne Border, klickbare Labels. */
.task-creator-part-option {
  cursor: pointer;
  white-space: nowrap;
  color: var(--cin-text-secondary);
}

.task-creator-part-option:has(input:checked) {
  color: var(--cin-text);
  font-weight: 500;
}

.task-creator-part-option input {
  cursor: pointer;
}

/* Beteiligung pro Zuständigem (beteiligt/beobachten) — gleiche Optik wie beim Ersteller. */
.task-assignee-part-option {
  cursor: pointer;
  white-space: nowrap;
  color: var(--cin-text-secondary);
}

.task-assignee-part-option:has(input:checked) {
  color: var(--cin-text);
  font-weight: 500;
}

.task-assignee-part-option input {
  cursor: pointer;
}

/* Teilprojekt O — Sichtbarkeits-Radiogruppe (gleiche Optik wie die Ersteller-Beteiligung). */
/* Teil-Erledigung: „x/y abgezeichnet"-Chip neben dem Status-Label (Nutzer-Wunsch 2026-07-21). */
.task-completion-count {
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.1rem 0.45rem;
  border-radius: var(--bs-border-radius-pill);
  background-color: var(--cin-surface-subtle, var(--bs-tertiary-bg));
  color: var(--cin-text-secondary);
  white-space: nowrap;
}

.task-completion-count.is-complete {
  background-color: color-mix(in srgb, var(--bs-success) 15%, transparent);
  color: var(--bs-success);
}

/* Info-Button neben „Status" (Teil-Erledigung) — gleiche dezente Optik wie das Sichtbar-Popover. */
.task-completion-info {
  text-decoration: none;
  color: var(--cin-text-secondary);
  vertical-align: baseline;
}

.task-completion-info:hover,
.task-completion-info:focus-visible {
  color: var(--bs-primary);
}

/* Placeholder-Text im Aufgaben-Formular grau (Nutzer-Wunsch 2026-07-21) — sonst wirkt er wie
   bereits eingetragener Text. */
.task-form input::placeholder,
.task-form textarea::placeholder {
  color: var(--cin-text-secondary);
  opacity: 1;
}

/* Sichtbarkeit-Heading „SICHTBAR FÜR" — Caps, etwas prominenter (Nutzer-Wunsch 2026-07-21). */
.task-visibility-heading {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--cin-text-secondary);
}

/* ⓘ-Info-Button neben „Sichtbar für": kein Link-Look, dezent. */
.task-visibility-info {
  text-decoration: none;
  color: var(--cin-text-secondary);
  vertical-align: baseline;
}

.task-visibility-info:hover,
.task-visibility-info:focus-visible {
  color: var(--bs-primary);
}

.task-visibility-option {
  cursor: pointer;
  white-space: nowrap;
  color: var(--cin-text-secondary);
}

.task-visibility-option:has(input:checked) {
  color: var(--cin-text);
  font-weight: 500;
}

.task-visibility-option input {
  cursor: pointer;
}

/* O — „nur du"-Hinweis als blauer Tag (theme-sicher via transparent-Mix, mit Abstand). */
.task-visibility-onlyme {
  margin-left: 0.75rem;
  padding: 0.2rem 0.65rem;
  border-radius: var(--bs-border-radius-pill);
  border: var(--bs-border-width) solid color-mix(in srgb, var(--bs-primary) 25%, transparent);
  background-color: color-mix(in srgb, var(--bs-primary) 15%, transparent);
  color: var(--bs-primary);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
}

/* O4a — Warnung: Zuständiger/Team außerhalb des Tags bzw. Dublette (amber, nicht-blockierend).
   Sowohl der Member- als auch der Team-Select bekommen den Warn-Rahmen (je nach Zeilen-Art). */
.task-assignee-row.task-assignee-tag-warn .task-assignee-member,
.task-assignee-row.task-assignee-tag-warn .task-assignee-team {
  border-color: var(--bs-warning);
}

.task-assignee-tag-warn-msg {
  color: var(--bs-warning-text-emphasis);
  font-size: 0.75rem;
  line-height: 1.2;
}

/* Benachrichtigen-Toggle (Teilprojekt K) — kompakt, in der Zuweisungs-Zeile zentriert. */
.task-assignee-notify {
  display: flex;
  align-items: center;
  min-height: 38px;
}

.task-assignee-notify .form-check-label {
  cursor: pointer;
  line-height: 1;
  margin-left: 0.25rem;
}

.task-assignee-notify .form-check-label i {
  font-size: 1rem;
  vertical-align: middle;
}

/* Kanban-Board */
.task-kanban {
  display: flex;
}

.task-kanban.d-none {
  display: none !important;
}

.task-kanban-column {
  flex: 1 1 0;
  min-width: 220px;
  background-color: var(--cin-surface);
  border: 1px solid var(--cin-border);
  border-top: 3px solid var(--cin-text-muted);
}

.task-kanban-col-todo {
  border-top-color: var(--cin-ticket-waiting);
}

.task-kanban-col-in_progress {
  border-top-color: var(--cin-ticket-progress);
}

.task-kanban-col-review {
  border-top-color: var(--cin-task-review);
}

.task-kanban-col-waiting {
  border-top-color: var(--cin-ticket-customer);
}

.task-kanban-col-done {
  border-top-color: var(--bs-success);
}

.task-kanban-column-header {
  border-bottom: 1px solid var(--cin-border);
}

.task-kanban-column-count {
  background-color: var(--cin-surface-subtle);
  color: var(--cin-text-secondary);
}

.task-kanban-col-over {
  background-color: rgba(var(--bs-primary-rgb), 0.06);
}

.task-kanban-empty {
  opacity: 0.6;
}

.task-kanban-card {
  cursor: grab;
  border: 1px solid var(--cin-border);
  background-color: var(--cin-surface);
  transition: box-shadow 0.15s, border-color 0.15s;
}

.task-kanban-card:hover {
  border-color: rgba(var(--bs-primary-rgb), 0.35);
  box-shadow: var(--cin-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
}

.task-kanban-card:active {
  cursor: grabbing;
}

.task-kanban-card-dragging {
  opacity: 0.5;
}

.task-kanban-card-selected {
  border-color: var(--bs-primary);
  background-color: rgba(var(--bs-primary-rgb), 0.08);
}

.task-kanban-card-title {
  color: var(--cin-foreground);
}

/* ===== Aufgaben-Gantt (Teilprojekt H.5a — read-only Zeit-Gantt) ===== */
.task-gantt-scroll,
.task-gantt-inner {
  position: relative;
}

/* Sticky-Kopfzeile (Datumsachse) */
.task-gantt-headrow {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: var(--cin-surface);
  border-bottom: 1px solid var(--cin-border);
}

/* Sticky-Ecke oben links + Sticky-Label-Spalte links (bleiben beim Scrollen stehen) */
.task-gantt-corner {
  position: sticky;
  left: 0;
  z-index: 30;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  background-color: var(--cin-surface);
  border-right: 1px solid var(--cin-border);
}

.task-gantt-labels {
  position: sticky;
  left: 0;
  z-index: 10;
  flex-shrink: 0;
  background-color: var(--cin-surface);
  border-right: 1px solid var(--cin-border);
}

.task-gantt-header-svg,
.task-gantt-chart {
  display: block;
  flex-shrink: 0;
}

.task-gantt-bodyrow {
  display: flex;
}

/* Zeilen im linken Label-Panel */
.task-gantt-group-row,
.task-gantt-task-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0 0.75rem;
  border-bottom: 1px solid var(--cin-border);
  text-align: left;
  cursor: pointer;
  color: var(--cin-text);
}

.task-gantt-group-row {
  appearance: none;
  font: inherit;
  background: transparent;
  border-top: 0;
  border-left: 0;
  border-right: 0;
}

.task-gantt-task-row {
  padding-left: 2rem;
}

.task-gantt-group-row:hover,
.task-gantt-task-row:hover {
  background-color: var(--cin-surface-hover);
}

/* SVG-Chrome theme-aware via CSS-Klassen (var() greift nicht in SVG-Präsentationsattributen) */
.task-gantt-weekend { fill: var(--cin-surface-subtle); }
.task-gantt-grid { stroke: var(--cin-border); stroke-width: 1; }
.task-gantt-rowline { stroke: var(--cin-border-secondary); stroke-width: 1; }
.task-gantt-axis-text { fill: var(--cin-text-muted); }
.task-gantt-today { stroke: var(--cin-danger); stroke-width: 2; }
.task-gantt-today-dash { stroke-dasharray: 4 3; }
.task-gantt-today-text { fill: var(--cin-danger); font-weight: 600; }
.task-gantt-dep { stroke: var(--cin-warning); stroke-width: 2; opacity: 0.9; }
.task-gantt-dep-head { fill: var(--cin-warning); opacity: 0.9; }
.task-gantt-gbar-track { fill: var(--cin-border); }
.task-gantt-gbar-fill { fill: var(--cin-text-muted); }
/* Balkentext sitzt auf einem fixen Status-Hex-Balken (theme-unabhängig) → muss in beiden Themes hell bleiben. */
.task-gantt-bar-text { fill: #fff; font-weight: 500; pointer-events: none; }

.task-gantt-bar,
.task-gantt-gbar {
  cursor: pointer;
}

/* H.5b — Engine-Signale. Rot = Konflikt: NUR Balken mit Datums-Konflikt bekommen den roten Rand (dazu das
   Warn-Dreieck in Label-Zeile/Liste/Kanban/Detail). Der kritische Pfad bleibt ruhig — er wird allein ueber
   kraeftigere Verbindungspfeile gezeigt (gleiche Farbe wie normale Pfeile, nur staerker), keine Balken-Optik. */
.task-gantt-bar-conflict .task-gantt-bar-rect {
  stroke: var(--cin-danger);
  stroke-width: 2;
}

.task-gantt-dep-critical {
  stroke-width: 3;
  opacity: 1;
}

.task-gantt-dep-head-critical {
  opacity: 1;
}

/* Mobile: Detail wird zum Vollbild-Popup (WorkspaceLayout) → Liste nutzt die volle Höhe. */
@media (max-width: 767.98px) {
  .task-main {
    flex-direction: column;
  }

  .task-left-panel {
    width: 100% !important;
    max-height: none;
  }

  .task-resize-handle {
    display: none;
  }

  .task-kanban-column {
    width: 85vw;
  }

  /* Kanban ist für Mobile ungeeignet (Views „fallen weg", Umschalter ist mobil ausgeblendet): immer
     die Liste zeigen, unabhängig vom internen View-Zustand. Die Liste wird in #renderList ohnehin auch
     im Kanban-Modus befüllt, ist also sofort nutzbar. IDs (1,0,0) schlagen die .d-none/.d-flex-Utilities
     (0,1,0) trotz deren !important. Desktop-Kanban-Wahl bleibt erhalten (kommt im Querformat zurück). */
  #task-kanban-view {
    display: none !important;
  }

  #task-list-view {
    display: flex !important;
  }
}

/* Kleinstschrift-Utility für Aufgaben-Zeilen (Kanban-Karten + Vorgangs-Tab) */
.fs-8 {
  font-size: 0.72rem;
}

/* Aufgaben-Tab im Kommunikations-Detail (Teilprojekt D) — Zeilen zum Vorgang */
.mail-task-row {
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.mail-task-row:hover {
  background-color: var(--cin-hover, rgba(13, 110, 253, 0.06));
}

.mail-task-dot {
  font-size: 0.6rem;
  line-height: 1;
}

/* Formular-Aktionen im Modal ausblenden (Modal hat eigene Footer-Buttons) */
.task-form-in-modal .task-form-actions {
  display: none !important;
}

/* Dashboard-Widget "Aufgaben-Übersicht" (Teilprojekt D) */
.task-stats-bar {
  height: 6px;
  width: 100%;
  border-radius: 999px;
  background-color: var(--cin-muted, rgba(0, 0, 0, 0.08));
  overflow: hidden;
}

.task-stats-bar-fill {
  height: 100%;
  border-radius: 999px;
  background-color: var(--cin-success);
  transition: width 0.3s ease;
}

.task-stats-row {
  display: grid;
  gap: 0.75rem 1rem;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.task-stats-cell {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}

.task-stats-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

.task-stats-icon-slate {
  color: #64748b;
  background-color: rgba(100, 116, 139, 0.12);
}

.task-stats-icon-blue {
  color: #2563eb;
  background-color: rgba(37, 99, 235, 0.12);
}

.task-stats-icon-red {
  color: var(--cin-danger);
  background-color: var(--cin-danger-light);
}

.task-stats-icon-green {
  color: var(--cin-success);
  background-color: var(--cin-success-light);
}

.task-stats-value {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--cin-foreground);
}

.task-stats-value-danger {
  color: var(--cin-danger);
}

.task-stats-label {
  font-size: 0.72rem;
  color: var(--cin-muted-foreground, #6b7280);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-bs-theme="dark"] .task-stats-icon-slate {
  color: #94a3b8;
  background-color: rgba(148, 163, 184, 0.15);
}

[data-bs-theme="dark"] .task-stats-icon-blue {
  color: #60a5fa;
  background-color: rgba(96, 165, 250, 0.15);
}

/* ===================================================================
   Teilprojekt E — Projekte-Modul
   =================================================================== */

.project-stats-row {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.project-stat-card {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
}

.project-stat-icon {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

.project-stat-icon-slate { color: #64748b; background-color: rgba(100, 116, 139, 0.12); }
.project-stat-icon-blue  { color: #2563eb; background-color: rgba(37, 99, 235, 0.12); }
.project-stat-icon-green { color: #16a34a; background-color: rgba(22, 163, 74, 0.12); }
.project-stat-icon-red   { color: #dc2626; background-color: rgba(220, 38, 38, 0.12); }

[data-bs-theme="dark"] .project-stat-icon-slate { color: #94a3b8; background-color: rgba(148, 163, 184, 0.15); }
[data-bs-theme="dark"] .project-stat-icon-blue  { color: #60a5fa; background-color: rgba(96, 165, 250, 0.15); }
[data-bs-theme="dark"] .project-stat-icon-green { color: #4ade80; background-color: rgba(74, 222, 128, 0.15); }
[data-bs-theme="dark"] .project-stat-icon-red   { color: #f87171; background-color: rgba(248, 113, 113, 0.15); }

.project-stat-body { min-width: 0; text-align: center; }

.project-stat-value {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--cin-foreground);
}

.project-stat-label {
  font-size: 0.8125rem;
  color: var(--cin-text-muted);
}

.project-quickstats-row {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.project-overview-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.project-team-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.project-avatar {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cin-primary);
  background-color: rgba(var(--bs-primary-rgb), 0.12);
}

/* Projekt-Formular-Popup: die Karten-Gruppierung (wie im Kontakt-Popup) vom Modal-Hintergrund
   abheben. Im Dark-Mode den Modal-Hintergrund auf --cin-background setzen, damit die
   --bs-card-bg-Karten sichtbar kontrastieren (analog .modal:has(.contact-detail)). */
[data-bs-theme="dark"] .modal:has(.project-form) .modal-content,
[data-bs-theme="dark"] .modal:has(.project-form) .modal-header,
[data-bs-theme="dark"] .modal:has(.project-form) .modal-body,
[data-bs-theme="dark"] .modal:has(.project-form) .modal-footer {
  background-color: var(--cin-background) !important;
}

/* ============================================================================
   Termin-Karte (AppointmentCard) — Rückverknüpfung Kalender ↔ Projekt/Aufgabe.
   1/3-Karte neben „Zeitplan & Budget/Aufwand". Keine Schatten (CRM-Konvention),
   theme-sicher über --cin-* / --bs-*. Datum groß, Titel darunter, Klick → Popup.
   ========================================================================== */
.appointment-card .card-title .appt-subtitle {
  font-weight: 500;
}

/* Leer-/Platzhalter-Zustand: zentriert, füllt die Kartenhöhe. */
.appointment-card .appt-empty {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  padding: 0.5rem 0;
}

.appointment-card .appt-empty-ic {
  font-size: 1.75rem;
  color: var(--cin-text-muted);
  opacity: 0.75;
}

/* Zusammenfassung des nächsten Termins — klickbarer Block (öffnet das Bearbeiten-Popup). */
/* Gemeinsame Kachel-Optik (Summary-Tile + Listen-Zeilen im Popup): Layout, Rahmen, Transition. */
.appointment-card .appt-next,
.appt-list-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-align: left;
  padding: 0.5rem;
  border: 1px solid var(--cin-border);
  border-radius: var(--bs-border-radius, 0.5rem);
  color: inherit;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* Listen-Zeilen (Popup „+X weitere"): volle Breite, neutrale abgehobene Kachel. */
.appt-list-row {
  width: 100%;
  background-color: var(--cin-surface-raised);
}

.appt-list-row:hover {
  border-color: var(--bs-primary);
  background-color: var(--cin-surface-hover);
}

.appt-list-row:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* „Termin anlegen"-Schnell-Icon in der Kontaktliste (Spalte „Kontaktieren"): nur mit calendar.edit.
   Container-Klasse .can-cal-edit setzt contact.js einmalig — ListJS-Klone erben die Regel, ohne dass
   der (nur bei Routing laufende) data-permission-Scan die dynamischen Zeilen erreichen müsste. */
#table-contacts:not(.can-cal-edit) .contact-appt-create {
  display: none !important;
}

/* Summary-Kachel: füllt die Breite zwischen den Blätter-Pfeilen; blaue Fläche (Nutzerwunsch),
   Hover minimal kräftiger — Border- + Stift-Icon-Reveal bleiben der eigentliche Hover-Signalträger. */
.appointment-card .appt-next {
  flex: 1 1 auto;
  min-width: 0;
  background-color: rgba(var(--bs-primary-rgb), 0.05);
}

.appointment-card .appt-next:hover {
  border-color: var(--bs-primary);
  background-color: rgba(var(--bs-primary-rgb), 0.12);
}

.appointment-card .appt-next:focus-visible,
.appt-list-row:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 1px;
}

/* Blätter-Pfeile: schlanke Zonen ohne Rahmen/Hintergrund, links/rechts der Kachel. */
.appt-viewport-row {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
}

.appt-nav {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.15rem;
  border: 0;
  background: transparent;
  color: var(--cin-text-muted);
  transition: color 0.15s ease;
}

.appt-nav:hover:not(:disabled) {
  color: var(--bs-primary);
}

.appt-nav:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Datum-Badge: Start groß (Plan). Rahmen + Tageszahl in der Termin-Farbe (--appt-accent).
   Solider Chip-Hintergrund (--cin-surface), damit die Tageszahl auch auf der blauen Summary-Kachel
   klar lesbar bleibt (nicht „blau auf blau"). Theme-sicher (light #fff / dark #161b22). */
.appt-date-badge {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 3rem;
  padding: 0.25rem 0;
  border: 1px solid var(--appt-accent, var(--cin-border));
  border-radius: var(--bs-border-radius, 0.5rem);
  background-color: var(--cin-surface);
  line-height: 1;
}

.appt-date-badge.appt-date-badge-sm {
  width: 2.5rem;
}

.appt-date-day {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--appt-accent, var(--cin-foreground));
}

.appt-date-badge-sm .appt-date-day {
  font-size: 1.25rem;
}

.appt-date-mon {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--cin-text-muted);
}

.appt-next-body {
  min-width: 0;
  flex: 1 1 auto;
}

.appointment-card .appt-title,
.appt-list-row .appt-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--cin-foreground);
}

.appointment-card .appt-meta,
.appt-list-row .appt-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--cin-text-muted);
  margin-top: 0.1rem;
}

.appointment-card .appt-meta i,
.appt-list-row .appt-meta i {
  flex-shrink: 0;
  font-size: 0.85em;
}

/* Bearbeiten-Hinweis rechts im Block — erscheint dezent beim Hover. */
.appointment-card .appt-next-edit {
  flex-shrink: 0;
  color: var(--cin-text-muted);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.appointment-card .appt-next:hover .appt-next-edit,
.appointment-card .appt-next:focus-visible .appt-next-edit {
  opacity: 0.8;
}

.appointment-card .appt-more {
  text-decoration: none;
  font-weight: 500;
}

.appointment-card .appt-more:hover {
  text-decoration: underline;
}