/* ===== cq toast host positioning ===== */
.cq-back-icon-btn{
  min-width: 3rem;
  width: auto;
  height: 2.5rem;
  padding: 0 .7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .45rem;
  border: 1px solid rgba(115, 103, 240, .22);
  background: var(--bs-body-bg, #fff);
  color: var(--bs-heading-color, #5d596c);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  overflow: visible;
}

.cq-back-icon-btn:hover,
.cq-back-icon-btn:focus{
  color: var(--bs-primary, #7367f0);
  border-color: rgba(115, 103, 240, .36);
  background: rgba(115, 103, 240, .06);
}

.cq-back-icon-btn .icon-base{
  font-size: 1.2rem;
}

.cq-report-back-btn .ms-1{
  display: none !important;
}

[data-bs-theme="dark"] .cq-back-icon-btn,
[data-theme="dark"] .cq-back-icon-btn{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
  color: #d7d2e6;
  box-shadow: none;
}

[data-bs-theme="dark"] .cq-back-icon-btn:hover,
[data-bs-theme="dark"] .cq-back-icon-btn:focus,
[data-theme="dark"] .cq-back-icon-btn:hover,
[data-theme="dark"] .cq-back-icon-btn:focus{
  background: rgba(115, 103, 240, .12);
  border-color: rgba(140, 127, 255, .34);
  color: #fff;
}

#cq-toast-host.cq-toast-host {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 1090; /* above most Vuexy elements */
  display: flex;
  flex-direction: column;
  gap: .75rem;
  max-width: min(520px, calc(100vw - 2.5rem));
}

/* Make our bs-toasts consistent */
#cq-toast-host .bs-toast {
  width: 100%;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.12) !important;
  padding: .75rem 1rem !important;
}

/* Vuexy uses bg-label-* on bs-toast */
#cq-toast-host .bs-toast.bg-label-danger  { background: var(--bs-danger-bg-subtle) !important;  border-left: 6px solid var(--bs-danger-border-subtle) !important; }
#cq-toast-host .bs-toast.bg-label-warning { background: var(--bs-warning-bg-subtle) !important; border-left: 6px solid var(--bs-warning-border-subtle) !important; }
#cq-toast-host .bs-toast.bg-label-success { background: var(--bs-success-bg-subtle) !important; border-left: 6px solid var(--bs-success-border-subtle) !important; }
#cq-toast-host .bs-toast.bg-label-info    { background: var(--bs-info-bg-subtle) !important;    border-left: 6px solid var(--bs-info-border-subtle) !important; }

/* Icon sizing (Vuexy icon-xs is tiny) */
#cq-toast-host .bs-toast i.icon-xs {
  font-size: 1.6rem !important;
  width: 1.6rem !important;
  height: 1.6rem !important;
  line-height: 1.6rem !important;
  flex: 0 0 1.6rem;
  margin-top: 2px;
}

/* Text blocks */
#cq-toast-host .cq-toast-title { line-height: 1.2; margin-bottom: 2px; }
#cq-toast-host .cq-toast-body  { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }

/* Details formatting */
#cq-toast-host .cq-toast-details summary { cursor: pointer; user-select: none; }
#cq-toast-host .cq-toast-pre {
  margin-top: .5rem;
  padding: .5rem .75rem;
  border-radius: .5rem;
  background: rgba(0,0,0,.04);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .8rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
#cq-toast-host .cq-toast-list { padding-left: 1.1rem; }
#cq-toast-host .cq-toast-list li { margin-bottom: .5rem; }
/* ===== Extras: nicer typography & controls ===== */
#cq-toast-host .bs-toast .toast-body {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

#cq-toast-host .cq-toast-msg {
  line-height: 1.35;
}

#cq-toast-host .cq-toast-details {
  margin-top: .35rem;
}

#cq-toast-host .cq-toast-summary {
  color: var(--bs-body-color);
  font-weight: 600;
}

#cq-toast-host .cq-toast-pre {
  border: 1px solid rgba(0,0,0,.06);
}

#cq-toast-host .cq-toast-copy {
  margin-top: .5rem;
}

/* =========================================================
   cq: modal stacking + detail sidepanel coexistence

   Why this exists:
   - The detail drawer uses an extremely high z-index.
   - Bootstrap modals create a separate .modal-backdrop element.
   - When a modal is opened from inside the drawer (or a second modal is opened on top
     of a first modal), the backdrop can end up ABOVE the dialog and swallow clicks.

   Strategy:
   - Use a deterministic z-index ladder (CSS vars) and let JS (invoice_page_end.html)
     stack multiple modals by adding small offsets.
   ========================================================= */

:root{
  /* Detail drawer baseline (matches your inline style) */
  --cq-z-detail: 2147483000;

  /* Base modal levels above the drawer */
  --cq-z-modal-backdrop: calc(var(--cq-z-detail) + 900);
  --cq-z-modal:          calc(var(--cq-z-detail) + 1000);

  /* Each additional stacked modal will add a small offset via JS */
  --cq-z-modal-stack-step: 20;
}

/* When detail sidepanel is open: keep Bootstrap modals above it */
body.cq-detail-open .modal-backdrop{ z-index: var(--cq-z-modal-backdrop) !important; }
body.cq-detail-open .modal{ z-index: var(--cq-z-modal) !important; }

/* Ensure modal stays interactive above cq detail overlay */
body.cq-detail-open .modal,
body.cq-detail-open .modal-dialog,
body.cq-detail-open .modal-content{
  pointer-events: auto !important;
}

/* While a Bootstrap modal is open, disable clicks on the cq detail backdrop */
body.cq-detail-open.modal-open #cq-detail-backdrop{
  pointer-events: none !important;
}

/* Value Assistance: ensure the actual dialog beats any backdrop.
   (Bootstrap renders click-targets on .modal-dialog/.modal-content.) */
body.cq-detail-open #valueAssistanceModal,
body.cq-detail-open #valueAssistanceModal .modal-dialog,
body.cq-detail-open #valueAssistanceModal .modal-content{
  z-index: calc(var(--cq-z-modal) + 100) !important;
}

/* Make label-danger text not overly red; keep only icon red */
#cq-toast-host .bs-toast.bg-label-danger .cq-toast-text,
#cq-toast-host .bs-toast.bg-label-danger .cq-toast-text * {
  color: var(--bs-body-color) !important;
}

/* =========================================================
   cq: shared form validation language

   Goal:
   - one subtle, production-ready visual system across WebUI/Admin/Invoice
   - valid should feel calm, not loud
   - invalid should be clear, but not scream
   ========================================================= */
:root{
  --cq-valid-accent: 88, 194, 122;
  --cq-invalid-accent: 234, 84, 85;
  --cq-valid-bg: rgba(var(--cq-valid-accent), .015);
  --cq-invalid-bg: rgba(var(--cq-invalid-accent), .04);
  --cq-valid-ring: rgba(var(--cq-valid-accent), .05);
  --cq-invalid-ring: rgba(var(--cq-invalid-accent), .17);
  --cq-valid-focus-ring: rgba(var(--cq-valid-accent), .1);
  --cq-invalid-focus-ring: rgba(var(--cq-invalid-accent), .24);
  --cq-valid-border: rgba(152, 168, 188, .24);
  --cq-invalid-border: rgba(var(--cq-invalid-accent), .5);
}

.form-control,
.form-select,
textarea.form-control{
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background-color .18s ease,
    color .18s ease;
}

.form-control.is-valid,
.form-select.is-valid,
textarea.form-control.is-valid,
.was-validated .form-control:valid,
.was-validated .form-select:valid,
.was-validated textarea.form-control:valid{
  border-color: var(--cq-valid-border) !important;
  background-color: var(--cq-valid-bg) !important;
  box-shadow:
    inset 0 0 0 1px var(--cq-valid-ring),
    0 1px 2px rgba(15, 23, 42, .03) !important;
  padding-right: 1.9rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23f6fcf7' stroke='%2358c27a' stroke-opacity='.82'/%3E%3Cpath d='M4.9 8.15 6.95 10.2 11.05 6.05' fill='none' stroke='%2358c27a' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: .82rem .82rem !important;
  background-position: right .62rem center !important;
}

.form-control.is-invalid,
.form-select.is-invalid,
textarea.form-control.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid,
.was-validated textarea.form-control:invalid{
  border-color: var(--cq-invalid-border) !important;
  background-color: var(--cq-invalid-bg) !important;
  box-shadow:
    inset 0 0 0 1px rgba(var(--cq-invalid-accent), .12),
    0 1px 2px rgba(15, 23, 42, .03) !important;
  padding-right: 1.9rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23fff8f8' stroke='%23ea5455' stroke-opacity='.9'/%3E%3Crect x='7.3' y='3.7' width='1.4' height='5.35' rx='.7' fill='%23ea5455'/%3E%3Ccircle cx='8' cy='11.35' r='.84' fill='%23ea5455'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: .82rem .82rem !important;
  background-position: right .62rem center !important;
}

.form-control.is-valid:focus,
.form-select.is-valid:focus,
textarea.form-control.is-valid:focus,
.was-validated .form-control:valid:focus,
.was-validated .form-select:valid:focus,
.was-validated textarea.form-control:valid:focus{
  border-color: rgba(152, 168, 188, .34) !important;
  box-shadow:
    inset 0 0 0 1px rgba(var(--cq-valid-accent), .06),
    0 0 0 .16rem var(--cq-valid-focus-ring) !important;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
textarea.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus,
.was-validated .form-select:invalid:focus,
.was-validated textarea.form-control:invalid:focus{
  border-color: rgba(var(--cq-invalid-accent), .58) !important;
  box-shadow:
    inset 0 0 0 1px rgba(var(--cq-invalid-accent), .16),
    0 0 0 .16rem var(--cq-invalid-focus-ring) !important;
}

[data-bs-theme="dark"] .form-control.is-valid,
[data-theme="dark"] .form-control.is-valid,
[data-bs-theme="dark"] .form-select.is-valid,
[data-theme="dark"] .form-select.is-valid,
[data-bs-theme="dark"] textarea.form-control.is-valid,
[data-theme="dark"] textarea.form-control.is-valid,
[data-bs-theme="dark"] .was-validated .form-control:valid,
[data-theme="dark"] .was-validated .form-control:valid,
[data-bs-theme="dark"] .was-validated .form-select:valid,
[data-theme="dark"] .was-validated .form-select:valid,
[data-bs-theme="dark"] .was-validated textarea.form-control:valid,
[data-theme="dark"] .was-validated textarea.form-control:valid{
  background-color: rgba(var(--cq-valid-accent), .04) !important;
  border-color: rgba(178, 193, 213, .18) !important;
  box-shadow:
    inset 0 0 0 1px rgba(var(--cq-valid-accent), .1),
    0 1px 2px rgba(0, 0, 0, .16) !important;
}

[data-bs-theme="dark"] .form-control.is-invalid,
[data-theme="dark"] .form-control.is-invalid,
[data-bs-theme="dark"] .form-select.is-invalid,
[data-theme="dark"] .form-select.is-invalid,
[data-bs-theme="dark"] textarea.form-control.is-invalid,
[data-theme="dark"] textarea.form-control.is-invalid,
[data-bs-theme="dark"] .was-validated .form-control:invalid,
[data-theme="dark"] .was-validated .form-control:invalid,
[data-bs-theme="dark"] .was-validated .form-select:invalid,
[data-theme="dark"] .was-validated .form-select:invalid,
[data-bs-theme="dark"] .was-validated textarea.form-control:invalid,
[data-theme="dark"] .was-validated textarea.form-control:invalid{
  background-color: rgba(var(--cq-invalid-accent), .085) !important;
  border-color: rgba(255, 163, 164, .3) !important;
  box-shadow:
    inset 0 0 0 1px rgba(var(--cq-invalid-accent), .2),
    0 1px 2px rgba(0, 0, 0, .16) !important;
}

/* Vuexy adds extra wrapper validation on input-groups, date fields and select2.
   Keep valid wrappers calm and neutral instead of green-framed. */
form.was-validated .input-group:has(:valid),
form .input-group:has(.is-valid) {
  box-shadow: none !important;
}

form.was-validated .input-group:has(:valid)::before,
form .input-group:has(.is-valid)::before {
  box-shadow: none !important;
}

form.was-validated .input-group:has(:valid) .input-group-text,
form.was-validated .input-group:has(:valid) .form-control,
form.was-validated .input-group:has(:valid) .form-select,
form.was-validated .input-group:has(:valid) .flatpickr-wrapper .flatpickr-input,
form .input-group:has(.is-valid) .input-group-text,
form .input-group:has(.is-valid) .form-control,
form .input-group:has(.is-valid) .form-select,
form .input-group:has(.is-valid) .flatpickr-wrapper .flatpickr-input {
  border-color: var(--cq-valid-border) !important;
  box-shadow: none !important;
}

form.was-validated .input-group:has(:valid) .input-group-text,
form .input-group:has(.is-valid) .input-group-text {
  background-color: rgba(var(--cq-valid-accent), .01) !important;
}

form .form-select.is-valid ~ .select2-container.select2-container--default .select2-selection,
form .form-select.is-valid ~ .select2-container.select2-container--default.select2-container--focus .select2-selection,
form .form-select.is-valid ~ .select2-container.select2-container--default.select2-container--open .select2-selection,
form.was-validated .form-select:valid ~ .select2-container.select2-container--default .select2-selection,
form.was-validated .form-select:valid ~ .select2-container.select2-container--default.select2-container--focus .select2-selection,
form.was-validated .form-select:valid ~ .select2-container.select2-container--default.select2-container--open .select2-selection {
  border-color: var(--cq-valid-border) !important;
  background-color: var(--cq-valid-bg) !important;
  box-shadow: inset 0 0 0 1px var(--cq-valid-ring) !important;
}

/* Shared validation tooltip language */
.tooltip.cq-error-tooltip {
  --bs-tooltip-bg: rgba(24, 31, 47, .96);
  --bs-tooltip-color: #fff8f8;
  --bs-tooltip-opacity: 1;
  --bs-tooltip-padding-x: .78rem;
  --bs-tooltip-padding-y: .62rem;
  --bs-tooltip-border-radius: .78rem;
  --bs-tooltip-max-width: 260px;
  z-index: 1090;
}

.tooltip.cq-error-tooltip .tooltip-inner {
  position: relative;
  text-align: left;
  font-size: .78rem;
  line-height: 1.35;
  letter-spacing: .01em;
  border: 1px solid rgba(255, 121, 121, .28);
  box-shadow:
    0 14px 34px rgba(10, 12, 20, .22),
    inset 0 1px 0 rgba(255, 255, 255, .03);
}

.tooltip.cq-error-tooltip .tooltip-inner::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: .78rem 0 0 .78rem;
  background: linear-gradient(180deg, rgba(234, 84, 85, .95), rgba(255, 159, 67, .88));
}

.tooltip.cq-error-tooltip .tooltip-arrow::before {
  border-top-color: rgba(24, 31, 47, .96) !important;
  border-bottom-color: rgba(24, 31, 47, .96) !important;
}

/* centraQuest DataTables layout and result-cell styling. */
/* ==========================================================================
       Vuexy / Bootstrap aware variables (Light + Dark)
       - Vuexy nutzt je nach Setup meist: html.dark-style / body.dark-style
       - falls bei dir anders: ergänze den Selector (z.B. [data-theme="dark"])
       ========================================================================== */

    :root{
      --cq-sticky-top: 64px;

      /* Table surfaces */
      --cq-dt-head-bg: var(--bs-body-bg, #fff);
      --cq-dt-row-odd: rgba(var(--bs-primary-rgb, 99,89,255), .03);
      --cq-dt-row-hover: rgba(var(--bs-primary-rgb, 99,89,255), .06);

      /* Text */
      --cq-dt-head-text: var(--bs-emphasis-color, rgba(33,37,41,.90));
      --cq-dt-body-text: var(--bs-body-color, rgba(33,37,41,.78));

      /* Lines */
      --cq-dt-border: rgba(var(--bs-body-color-rgb, 33,37,41), .10);
      --cq-dt-row-sep: rgba(var(--bs-body-color-rgb, 33,37,41), .06);

      /* Responsive details (panel + pills) */
      --cq-child-td-bg: rgba(var(--bs-body-color-rgb, 33,37,41), .04);
      --cq-child-td-border: rgba(var(--bs-body-color-rgb, 33,37,41), .12);

      --cq-details-bg: rgba(var(--bs-body-color-rgb, 33,37,41), .06);
      --cq-details-border: rgba(var(--bs-body-color-rgb, 33,37,41), .16);
      --cq-details-shadow: 0 .125rem .25rem rgba(0,0,0,.06);

      --cq-pill-bg: rgba(var(--bs-body-bg-rgb, 255,255,255), .85);
      --cq-pill-border: rgba(var(--bs-body-color-rgb, 33,37,41), .18);

      --cq-title: var(--bs-secondary-color, rgba(33,37,41,.65));
      --cq-data: var(--bs-emphasis-color, rgba(33,37,41,.92));
    }

    /* Dark mode overrides (Vuexy typisch: .dark-style) */
    html.dark-style, body.dark-style{
      --cq-dt-head-bg: rgba(var(--bs-body-bg-rgb, 30,33,46), 1);
      --cq-dt-row-odd: rgba(255,255,255,.02);
      --cq-dt-row-hover: rgba(255,255,255,.04);

      --cq-dt-border: rgba(255,255,255,.12);
      --cq-dt-row-sep: rgba(255,255,255,.08);

      --cq-child-td-bg: rgba(255,255,255,.035);
      --cq-child-td-border: rgba(255,255,255,.12);

      --cq-details-bg: rgba(255,255,255,.04);
      --cq-details-border: rgba(255,255,255,.12);
      --cq-details-shadow: 0 .125rem .25rem rgba(0,0,0,.25);

      --cq-pill-bg: rgba(0,0,0,.12);
      --cq-pill-border: rgba(255,255,255,.12);

      --cq-title: rgba(255,255,255,.65);
      --cq-data: rgba(255,255,255,.92);
    }


    /* ==========================================================================
       DataTables Layout & Look (global)
       ========================================================================== */

    /* --- Flex height rules (global) --- */
    .cq-datatable-host{
      display:flex;
      flex-direction:column;
      height:100%;
      min-height:0;
      overflow:hidden;
    }

    .dataTables_wrapper{
      flex:1 1 auto;
      position:relative;
      display:flex;
      flex-direction:column;
      min-height:0;
      overflow:hidden;
    }

    .dataTables_scroll{
      flex:1 1 auto;
      display:flex;
      flex-direction:column;
      min-height:0;
      overflow:hidden;
    }
    .dt-scroll{
      flex:1 1 auto;
      display:flex;
      flex-direction:column;
      min-height:0;
      overflow:hidden;
    }

    .dataTables_scrollBody{
      flex:1 1 auto !important;
      min-height: unset;
      height: unset;
      overflow-y:auto !important;
      overflow-x:auto !important;
      scrollbar-gutter: stable both-edges;
    }
    .dt-scroll-body{
      flex:1 1 auto !important;
      min-height: unset;
      height: unset;
      overflow-y:auto !important;
      overflow-x:auto !important;
      scrollbar-gutter: stable both-edges;
    }

    .dataTables_scrollBody::-webkit-scrollbar-button{
      width:0;
      height:0;
      display:none;
    }

/* Dropdowns inside scrollBody get clipped by overflow; z-index helps once overflow is toggled in JS */
.dataTables_scrollBody .dropdown-menu{ z-index: 2001; }

    /* --- Helper visibility --- */
    .hide-on-wide-screens{ display:block; }
    @media (min-width: 992px){ .hide-on-wide-screens{ display:none; } }

    /* --- Status button --- */
    .status{
      border:none;
      cursor:pointer;
      padding:3px;
      border-radius:20%;
      z-index:10;
      padding-top:55px;
      padding-left:0; /* negative padding wirkt nicht -> neutral */
    }

    /* --- Header normal statt UPPERCASE --- */
    table.dataTable thead th .dt-column-title,
    table.dataTable thead th{
      text-transform:none !important;
      font-weight:600;
      color: var(--cq-dt-head-text);
    }

    /* --- Sticky Header --- */
    .dataTables_wrapper .dataTables_scrollHead{
      position:sticky;
      top: var(--cq-sticky-top);
      z-index:5;
      background: var(--cq-dt-head-bg);
      border-bottom: 1px solid var(--cq-dt-border);
    }
    table.dataTable thead th{
      position:sticky;
      top:0;
      background: var(--cq-dt-head-bg);
      border-bottom: 1px solid var(--cq-dt-border);
    }

    /* DataTables ships its own processing indicator with animated dots.
       The markup is generated by the library and is hard to theme reliably
       across versions, so centraQuest uses the custom Ajax overlay below. */
    .dataTables_wrapper .dt-processing,
    .dataTables_wrapper .dataTables_processing{
      display:none !important;
    }
    .cq-dt-processing-panel{
      position:absolute !important;
      left:50% !important;
      top:50% !important;
      transform:translate(-50%, -50%) !important;
      z-index:20;
      width:auto !important;
      min-width:12rem;
      margin:0 !important;
      padding:.65rem .9rem !important;
      border:1px solid rgba(var(--bs-body-color-rgb, 33,37,41), .08) !important;
      border-radius:.5rem !important;
      background:rgba(var(--bs-body-bg-rgb, 255,255,255), .92) !important;
      color:var(--bs-body-color) !important;
      box-shadow:0 .45rem 1.25rem rgba(47,43,61,.12) !important;
      backdrop-filter:saturate(160%) blur(8px);
    }
    .cq-dt-processing-panel.d-none{
      display:none !important;
    }
    html.dark-style .cq-dt-processing-panel,
    body.dark-style .cq-dt-processing-panel{
      border-color:rgba(255,255,255,.12) !important;
      background:rgba(var(--bs-body-bg-rgb, 30,33,46), .88) !important;
      box-shadow:0 .45rem 1.25rem rgba(0,0,0,.32) !important;
    }
    .cq-dt-processing{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      white-space:nowrap;
      font-size:.82rem;
      font-weight:600;
      line-height:1.2;
    }
    .cq-dt-processing-spinner{
      width:1rem;
      height:1rem;
      border-radius:50%;
      border:2px solid rgba(var(--bs-primary-rgb, 115,103,240), .18);
      border-top-color:rgb(var(--bs-primary-rgb, 115,103,240));
      animation:cq-dt-spin .72s linear infinite;
      flex:0 0 auto;
    }
    @keyframes cq-dt-spin{ to{ transform:rotate(360deg); } }

    /* --- Zebra + Hover (theme aware) --- */
    table.dataTable tbody tr:nth-child(odd){ background: var(--cq-dt-row-odd); }
    table.dataTable tbody tr:hover{ background: var(--cq-dt-row-hover); }

    /* --- Row separators --- */
    table.dataTable tbody tr{ border-bottom: 1px solid var(--cq-dt-row-sep); }

    /* --- Body text --- */
    table.dataTable tbody td{
      padding-top:.6rem; padding-bottom:.6rem;
      color: var(--cq-dt-body-text);
    }
    table.dataTable thead th{ padding-top:.65rem; padding-bottom:.65rem; }

    /* --- Numerik/Währung rechts --- */
    .dt-col-numeric, .dt-col-currency, .dt-col-id{ text-align:right; }

    /* --- Toolbars harmonisieren --- */
    .dataTables_length, .dataTables_filter, .dt-buttons{ margin:0 .25rem 0 0; }
    .dataTables_wrapper .dt-action-buttons{
      align-items:center;
      gap:.5rem;
    }
    .dataTables_wrapper .dataTables_length{
      display:flex;
      align-items:center;
    }
    .dataTables_wrapper .dataTables_length label{
      display:flex;
      align-items:center;
      gap:.4rem;
      margin:0;
      line-height:1;
      white-space:nowrap;
      color:var(--bs-secondary-color);
      font-size:.86rem;
    }
    .dataTables_wrapper .dataTables_length select{
      width:auto;
      min-width:4.75rem;
      height:31px;
      padding:.25rem 1.85rem .25rem .6rem;
      border-radius:.45rem;
      border-color:var(--bs-border-color);
      background-color:var(--bs-paper-bg, var(--bs-body-bg));
      color:var(--bs-body-color);
    }
    @media (min-width: 768px){
      /* keep buttons + search on one line */
      .dataTables_wrapper .dt-action-buttons{ flex-wrap:nowrap !important; }
    }
    .dataTables_wrapper .dataTables_filter{ display:flex; align-items:center; }
    .dataTables_wrapper .dataTables_filter label{
      display:flex;
      align-items:center;
      gap:.4rem;
      margin:0;
      line-height:1;
      white-space:nowrap;
    }
    .dataTables_filter input{
      border-radius:.6rem;
      height:31px;
      padding:.25rem .5rem;
      margin:0;
      width: clamp(160px, 22vw, 260px) !important;
      flex: 0 0 auto;
    }

    /* --- Control/Checkbox schmal --- */
    .dt-col-ctrl, .dt-col-check{ width:42px; text-align:center; }

    /* --- Badge/Note schöner (light/dark friendly) --- */
    .cq-note{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.35rem .5rem;
      border-radius:.5rem;
      background: rgba(var(--bs-warning-rgb, 255,193,7), .18);
      color: var(--bs-warning-text-emphasis, #b45309);
      border: 1px solid rgba(var(--bs-warning-rgb, 255,193,7), .28);
    }

    .cq-result-badges{
      display:inline-flex;
      align-items:center;
      flex-wrap:wrap;
      gap:.25rem;
      max-width:24rem;
      vertical-align:middle;
    }
    .cq-result-badge{
      font-weight:600;
      letter-spacing:0;
      line-height:1.15;
      max-width:13rem;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .cq-result-money{
      display:inline-block;
      min-width:5.5rem;
      text-align:right;
      font-variant-numeric:tabular-nums;
      font-weight:600;
      color:var(--bs-emphasis-color);
    }
    .cq-result-avatar{
      position:relative;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:2rem;
      height:2rem;
      border-radius:999px;
      overflow:visible;
      color:#fff;
      background:linear-gradient(135deg, var(--bs-primary, #7367f0), var(--bs-info, #00cfe8));
      font-size:.72rem;
      font-weight:700;
      box-shadow:0 .18rem .55rem rgba(var(--bs-primary-rgb, 115,103,240), .22);
      vertical-align:middle;
    }
    .cq-result-avatar img{
      width:100%;
      height:100%;
      border-radius:999px;
      object-fit:cover;
      display:block;
    }
    .cq-avatar-status{
      position:absolute;
      right:-1px;
      bottom:-1px;
      width:.58rem;
      height:.58rem;
      border-radius:999px;
      border:2px solid var(--bs-body-bg, #fff);
      background:#a8aaae;
    }
    .cq-avatar-status-active{ background:#28c76f; }
    .cq-avatar-status-inactive{ background:#ea5455; }
    .cq-avatar-status-idle{ background:#ff9f43; }
    .cq-json-summary{
      display:inline-flex;
      align-items:flex-start;
      gap:.45rem;
      max-width:22rem;
      min-width:12rem;
      padding:.42rem .52rem;
      border:1px solid rgba(var(--bs-body-color-rgb, 33,37,41), .08);
      border-radius:.55rem;
      background:rgba(var(--bs-body-bg-rgb, 255,255,255), .62);
      box-shadow:0 .12rem .4rem rgba(47,43,61,.06);
      vertical-align:middle;
    }
    .cq-json-summary-icon{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:1.45rem;
      height:1.45rem;
      border-radius:.4rem;
      color:rgb(var(--bs-primary-rgb, 115,103,240));
      background:rgba(var(--bs-primary-rgb, 115,103,240), .1);
      flex:0 0 auto;
    }
    .cq-json-summary-body{
      display:grid;
      gap:.12rem;
      min-width:0;
    }
    .cq-json-summary-title{
      color:var(--bs-emphasis-color);
      font-size:.72rem;
      font-weight:700;
      line-height:1.15;
    }
    .cq-json-summary-text{
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
      color:var(--bs-secondary-color);
      font-family:var(--bs-font-monospace, monospace);
      font-size:.72rem;
      line-height:1.28;
      word-break:break-word;
    }
    html.dark-style .cq-json-summary,
    body.dark-style .cq-json-summary{
      border-color:rgba(255,255,255,.1);
      background:rgba(255,255,255,.04);
      box-shadow:none;
    }

    /* --- Avatar inline --- */
    .cq-inline{ display:inline-flex; align-items:center; gap:.5rem; min-height:26px; }
    .cq-avatar{ width:26px; height:26px; border-radius:50%; object-fit:cover; }

    /* --- Trunkierung --- */
    .cq-trunc{ max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

    .cq-clamp-2{
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }


    /* ==========================================================================
       DataTables Responsive (Details) - Vuexy-like rounded pills (GLOBAL)
       ========================================================================== */

    /* Child-row Hintergrund + Abgrenzung */
    table.dataTable > tbody > tr.child > td{
      padding: .75rem 1.25rem !important;
      background: var(--cq-child-td-bg);
      border-top: 1px solid var(--cq-child-td-border);
    }

    /* Parent row leicht betonen wenn offen */
    table.dataTable > tbody > tr.parent{
      background: rgba(var(--bs-primary-rgb, 99,89,255), .05);
    }
    html.dark-style table.dataTable > tbody > tr.parent,
    body.dark-style table.dataTable > tbody > tr.parent{
      background: rgba(255,255,255,.03);
    }

    /* Wrapper (Panel) */
    table.dataTable > tbody > tr.child ul.dtr-details{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:.5rem .6rem;
      width:100%;
      margin:0;
      padding:.75rem;
      list-style:none;

      border-radius:1rem;
      background: var(--cq-details-bg);
      border:1px solid var(--cq-details-border);
      box-shadow: var(--cq-details-shadow);
    }

    /* Pill */
    table.dataTable > tbody > tr.child ul.dtr-details > li{
      display:inline-flex;
      align-items:center;
      gap:.5rem;

      padding:.35rem .65rem;
      border-radius:999px;
      background: var(--cq-pill-bg);
      border: 1px solid var(--cq-pill-border);

      white-space:nowrap;
      max-width:100%;
    }

    table.dataTable > tbody > tr.child ul.dtr-details > li.meta-muted{
      opacity:.85;
      border-style:dashed;
    }

    /* Title / Value */
    table.dataTable > tbody > tr.child ul.dtr-details span.dtr-title{
      font-size:.75rem;
      font-weight:600;
      color: var(--cq-title);
      letter-spacing:.15px;
    }
    table.dataTable > tbody > tr.child ul.dtr-details span.dtr-data{
      font-size:.85rem;
      font-weight:600;
      color: var(--cq-data);
      white-space:normal;
    }


    /* ==========================================================================
       Responsive control button (triangle) - theme aware
       ========================================================================== */

    table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control{
      position: relative;
      padding-left: 2.25rem !important;
    }

    table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
    table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before{
      content:"▸";
      position:absolute;
      left:.65rem;
      top:50%;
      transform:translateY(-50%);
      width:1.35rem;
      height:1.35rem;
      display:grid;
      place-items:center;

      border-radius:999px;
      background: rgba(var(--bs-secondary-rgb,108,117,125), .14);
      border: 1px solid rgba(var(--bs-secondary-rgb,108,117,125), .22);
      color: var(--cq-data);
      font-size:.9rem;
      line-height:1;
    }

    table.dataTable.dtr-inline > tbody > tr.parent > td.dtr-control:before{
      content:"▾";
      background: rgba(var(--bs-primary-rgb, 99,89,255), .18);
      border-color: rgba(var(--bs-primary-rgb, 99,89,255), .30);
    }


    /* ==========================================================================
       Mobile tweaks
       ========================================================================== */
    @media (max-width: 767.98px){
      #header_section .col-xxl-2:nth-of-type(n+5){ display:none !important; }
      .dt-action-buttons{ display:none !important; }

      .dataTables_wrapper .dataTables_filter input{
        height:32px;
        padding-top:2px;
        padding-bottom:2px;
      }
      .dataTables_wrapper .dt-action-buttons .btn{
        padding-top:.25rem;
        padding-bottom:.25rem;
      }
    }

    /* Selected row */
    table.dataTable tbody tr.selected{
      background: rgba(var(--bs-primary-rgb,99,89,255), .10) !important;
    }
    table.dataTable tbody tr.cq-row-deleted{
      background: rgba(var(--bs-danger-rgb), .12) !important;
    }
    table.dataTable tbody tr.cq-row-deleted:hover{
      background: rgba(var(--bs-danger-rgb), .18) !important;
    }