/* ============================================================
   VBO ERP — Merged Semantic CSS
   Sources: vbo.css + vbostyles.css + navbar-responsive.css
   All design tokens in :root, all values use --vbo-* variables.
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS (:root)
   ============================================================ */
:root {

  /* --- Bootstrap 5.3 accordion overrides (neutralise default blue) --- */
  --bs-accordion-active-bg:    transparent;
  --bs-accordion-active-color: inherit;
  --bs-accordion-btn-bg:       transparent;

  /* --- Bootstrap primary color override --- */
  --bs-primary:          var(--color-primary);
  --bs-primary-rgb:      var(--color-primary-rgb);
  --bs-link-color:       var(--color-primary);
  --bs-body-line-height: 1;
  
  /* --- Brand colors (set externally in app CSS) --- */
  --vbo-color-brand:          var(--main-text-color);
  --vbo-color-label:          var(--color-label, var(--color-text-lo, #6a8096));

  /* --- Primary palette --- */
  --vbo-color-primary:        var(--color-primary, #084298);
  --vbo-color-primary-hover:  var(--color-primary-hover, #06357a);
  --vbo-color-primary-active: var(--color-primary-active, #052c65);

  /* --- Text scale --- */
  --vbo-color-text-hi:    var(--color-text-hi, #1a1a1a);
  --vbo-color-text-lo:    var(--color-text-lo, #6a8096);
  --vbo-color-text-white: #ffffff;
  --vbo-color-text-dark:  #000000;
  --vbo-color-text-link:  var(--color-primary, #084298);
  --vbo-color-text-heading: #003366;
  --vbo-color-text-muted: rgba(0, 0, 0, 0.7);
  --vbo-color-file-text:  var(--color-file-text, rgba(0, 0, 0, 0.50));

  /* --- Background colors --- */
  --vbo-color-bg-white:       var(--color-white, #ffffff);
  --vbo-color-bg-transparent: transparent;
  --vbo-color-bg-light:       #e0e0e0;
  --vbo-color-bg-image:       #b0bdd0;
  --vbo-color-bg-hover:       #808080;
  --vbo-color-bg-hover-row:   var(--color-hover-row, #f8f9fa);
  --vbo-color-bg-field:       var(--color-field-bg, #ffffff);
  --vbo-color-bg-field-ro:    var(--color-field-bg-ro, #f8f9fa);
  --vbo-color-bg-disabled:    var(--color-disabled-bg, #e9ecef);

  /* --- Semantic status colors --- */
  --vbo-color-danger:        var(--bs-danger, #dc3545);
  --vbo-color-danger-bg:     rgba(255, 0, 0, 0.1);
  --vbo-color-danger-border: rgb(213, 0, 0);

  /* --- Border colors --- */
  --vbo-color-border:         var(--color-border, #ced4da);
  --vbo-color-border-light:   var(--color-border-light, #e9ecef);
  --vbo-color-border-dark:    #A4A4A4;
  --vbo-color-border-black:   #000000;

  /* --- Disabled state --- */
  --vbo-color-disabled-border: var(--color-disabled-border, #dee2e6);
  --vbo-color-disabled-text:   var(--color-disabled-text, #adb5bd);
  --vbo-color-disabled-btn:    var(--color-disabled-btn, #7a8ca8);

  /* --- Toolbar --- */
  --vbo-color-toolbar-danger:          var(--color-toolbar-danger, #adb5bd);
  --vbo-color-toolbar-danger-hover:    var(--color-toolbar-danger-hover, #dc3545);
  --vbo-color-toolbar-danger-hover-bg: var(--color-toolbar-danger-hover-bg, #fff0f0);

  /* --- Divider --- */
  --vbo-color-divider:      var(--color-divider, var(--color-border, #ced4da));
  --vbo-color-divider-text: var(--color-divider-text, var(--color-text-lo, #6a8096));

  /* --- Workflow tab --- */
  --vbo-color-workflow-border: var(--color-workflow-border, #cbd5e1);
  --vbo-color-workflow-accent: var(--color-workflow-accent, #0d6efd);
  --vbo-color-workflow-bg:     var(--color-workflow-bg, #f8fbff);
  --vbo-color-workflow-text:          #ffffff;
  --vbo-color-workflow-selected-text: #000000;
  --vbo-color-workflow-selected-bg:   #ffffff;

  /* --- Action badge --- */
  --vbo-color-action-badge: var(--vbo-color-text-heading, #003366);

  /* --- Select2 --- */
  --vbo-color-s2-selected: var(--main-text-color);

  /* --- Typography --- */
  --vbo-font-family-base:   "Roboto", "Helvetica", "Arial", sans-serif;
  --vbo-font-size-base:     1rem;
  --vbo-font-size-hi:       var(--font-size-hi, 14px);
  --vbo-font-size-lo:       var(--font-size-lo, 12px);
  --vbo-font-size-sm:       0.9375rem;
  --vbo-font-size-lg:       1.125rem;
  --vbo-font-size-xl:       1.375rem;
  --vbo-font-size-xxl:      1.5625rem;
  --vbo-font-size-icon:     1.125rem;
  --vbo-font-size-app-title: 1.1rem;
  --vbo-font-size-badge:    0.75rem;
  --vbo-font-weight-normal: 400;
  --vbo-font-weight-medium: 500;
  --vbo-font-weight-bold:   700;

  /* --- Spacing scale --- */
  --vbo-space-0:  0px;
  --vbo-space-1:  0.25rem;
  --vbo-space-2:  0.5rem;
  --vbo-space-3:  0.75rem;
  --vbo-space-4:  1rem;
  --vbo-space-5:  1.25rem;
  --vbo-space-6:  1.5rem;
  --vbo-space-7:  2rem;
  --vbo-space-8:  3rem;

  /* --- Layout spacing --- */
  --vbo-grid-gap:                    var(--grid-gap, 16px);
  --vbo-toolbar-padding-left:        14px;
  --vbo-toolbar-padding-left-mobile: 27px;
  --vbo-toolbar-padding-top:         6px;
  --vbo-panel-content-padding:       10px 14px;
  --vbo-panel-offset-left:           4px;
  --vbo-container-padding-x:         20px;

  /* --- Border Radius --- */
  --vbo-radius-sm:   0.375rem;
  --vbo-radius-md:   45%;
  --vbo-radius-lg:   15%;
  --vbo-radius-pill: 16px;
  --vbo-radius-card: 8px;
  --vbo-radius-tab:  10px;
  --vbo-radius-badge: 999px;

  /* --- Shadows --- */
  --vbo-shadow-workflow: inset 0 2px 2px 0 rgba(0,0,0,0.14),
                         inset 0 3px 1px -2px rgba(0,0,0,0.2),
                         inset 0 1px 5px 0 rgba(0,0,0,0.12);
  --vbo-shadow-table:    0 2px 8px rgba(0,0,0,0.1);
  --vbo-shadow-card:     0 2px 4px rgba(0,0,0,0.1);

  /* --- Component dimensions --- */
  --vbo-size-logo-w:             80px;
  --vbo-size-logo-h:             50px;
  --vbo-size-dashboard-btn:      64px;
  --vbo-size-icon-btn:           29px;
  --vbo-size-icon-btn-sm:        32px;
  --vbo-size-icon-upload:        22px;
  --vbo-size-icon-cell:          30px;
  --vbo-size-icon-upload-wrap:   30px;
  --vbo-size-icon-scale:         1.3;
  --vbo-size-toolbar-icon:       1.35rem;
  --vbo-size-toolbar-icon-field: 1.1rem;
  --vbo-size-toolbar-sep-w:      1px;
  --vbo-size-toolbar-sep-h:      20px;
  --vbo-size-header-min-h:       52px;
  --vbo-size-form-height:        var(--form-height, 34px);
  --vbo-size-toolbar-height:     39px;
  --vbo-size-workflow-height:    45px;
  --vbo-size-progress-height:    39px;
  --vbo-size-frame-min-height:   300px;
  --vbo-size-map-min-height:     300px;
  --vbo-size-dashboard-box-h:    200px;
  --vbo-size-favorite-span-h:    45px;
  --vbo-size-3d-top-offset:      64px;
  --vbo-size-grouping-height:    18px;
  --vbo-size-hidden-input:       1px;
  --vbo-size-accordion-input-w:  10px;
  --vbo-size-multilang-width:    500px;
  --vbo-size-image-wait-min-h:   400px;
  --vbo-size-image-center-shift: 50px;
  --vbo-size-image-inner-max-w:  200px;
  --vbo-size-image-select-min-w: 40px;
  --vbo-size-scroll-col-narrow:  17px;
  --vbo-size-tree-ao-width:      5px;
  --vbo-size-accordion-opt-right: 45px;
  --vbo-size-resize-handle:      6px;
  --vbo-size-tab-cell-label-w:   160px;
  --vbo-size-tab-min-w:          60px;
  --vbo-size-tab-max-w:          240px;
  --vbo-size-badge-h:            1.8rem;
  --vbo-size-title-min-w:        40px;

  /* --- Field / icon positioning --- */
  --vbo-field-icon-top:          calc(100% - 2rem);
  --vbo-field-icon-right:        0.75rem;
  --vbo-field-trigger-top:       1.85rem;
  --vbo-field-trigger-size:      2.25rem;
  --vbo-field-input-icon-pad:    2.4rem;
  --vbo-field-timestamp-offset:  32px;
  --vbo-field-label-margin-b:    4px;
  --vbo-field-icon-top-legacy:   20px;

  /* --- Negative / special offsets --- */
  --vbo-offset-msg-green:        -20px;
  --vbo-margin-top-checkbox:     22px;
  --vbo-size-checkbox-icon-w:    24px;
  --vbo-margin-top-btn-panel:    13px;
  --vbo-margin-top-btn-image:    14px;
  --vbo-margin-top-progress:     19px;
  --vbo-margin-top-export:       13px;
  --vbo-margin-top-file-link:    2px;
  --vbo-padding-top-grouping:    2px;
  --vbo-margin-bottom-sort-icon: 4px;
  --vbo-margin-top-tabbed-doc:   2px;
  --vbo-progress-inner-top:      23px;
  --vbo-padding-top-form-check:  8px;
  --vbo-margin-tab-sep-x:        4px;

  /* --- Workflow indicator geometry --- */
  --vbo-workflow-margin-top:      25px;
  --vbo-workflow-underline-h:     4px;
  --vbo-workflow-underline-neg:   -4px;
  --vbo-workflow-underline-right: 5px;
  --vbo-workflow-underline-left:  2px;
  --vbo-workflow-bar-h:           6px;

  /* --- Section divider geometry --- */
  --vbo-sd-gap:        8px;
  --vbo-sd-pre-width:  20px;
  --vbo-sd-line-h:     1px;
  --vbo-sd-margin-y:   16px;
  --vbo-sd-height:     20px;
  --vbo-sd-margin-b:   10px;

  /* --- Table --- */
  --vbo-table-cell-pad:   10px 15px;
  --vbo-table-cell-pad-m: 10px 0;
  --vbo-table-cell-gap-m: 10px;
  --vbo-table-border-radius: 8px;
  --vbo-table-mb-card-mb: 15px;
  --vbo-table-mb-pad:     15px;

  /* --- Breadcrumb --- */
  --vbo-breadcrumb-icon-margin-x: 4px;

  /* --- Z-index --- */
  --vbo-z-overlay:        10001;
  --vbo-z-table-head:     50;
  --vbo-z-tab-active:     2;
  --vbo-z-tab-active-bar: 3;
  --vbo-z-resize-handle:  100;
  --vbo-z-3d-btn:         5;
  --vbo-z-3d-panel:       1;
  
  /* --- Select2 color override --- */
   --s2-selected: var(--main-text-color);
}


/* ============================================================
   2. BASE
   ============================================================ */

html, body {
  font-family: var(--vbo-font-family-base);
  overflow-x: clip;   /* NICHT hidden: hidden macht html/body zum Scroll-Container und bricht position:sticky (Header sticky-top scrollt sonst weg). clip verhindert horizontalen Scroll ohne Scroll-Container. */
}

/* Select2 explizit auf die App-Schrift pinnen (Absicherung). Das select2-Theme nutzt
   font-family:inherit; damit die Dropdowns immer dieselbe Schrift wie die Inputs zeigen,
   unabhaengig davon was auf body/Container vererbt wird. Theme-agnostisch
   (.select2-container = Selection + Suchfeld; .select2-results__option = Ergebnisliste).
   HINWEIS: appl20.css (Material-Legacy) wird im Bootstrap-Design NICHT geladen und ist
   NICHT die Ursache; der echte Schrift-Bug war die Font-SIZE (siehe naechster Block). */
.select2-container,
.select2-results__option {
  font-family: var(--vbo-font-family-base);
}

/* ...und die Feld-Schriftgroesse (14px, --vbo-font-size-hi) statt Theme-1rem/16px,
   passend zu .form-control. Spezifitaet = Theme (0,4,0); vbo-styles laedt nach dem
   select2-Theme -> gewinnt ohne !important. Deckt geschlossene Selection, Suchfeld
   und Ergebnisliste ab. */
.select2-container .select2-selection__rendered,
.select2-container .select2-dropdown .select2-search .select2-search__field,
.select2-container .select2-dropdown .select2-results__options .select2-results__option {
  font-size: var(--vbo-font-size-hi);
}

/* select2-Suchfeld ist in aktuellen Versionen ein <textarea> -> Browser-Default resize:both
   zeigt einen Resize-Griff (diagonale Rillen), der im Multiselect unten links aus dem Feld ragt.
   Kein Oeffnen-Icon, sondern der Textarea-Griff -> abschalten. */
.select2-container .select2-search__field {
  resize: none;
}

.container-fluid {
  overflow-x: hidden;
  padding-left: var(--vbo-container-padding-x);
  padding-right: var(--vbo-container-padding-x);
}


/* ============================================================
   3. APP HEADER
   ============================================================ */

.vbo-app-header {
  min-height: var(--vbo-size-header-min-h);
  padding-top: 0.15rem;
  padding-bottom: 0 !important;
  overflow: visible !important;
}

/* No wrapping; tabs/title shrink before toolbar/logo */
.vbo-app-header .container-fluid {
  overflow: visible !important;
  flex-wrap: nowrap;
  min-width: 0;
}

/* Logo and toggler never shrink */
.vbo-app-header .navbar-toggler,
.vbo-app-header #LogoPlace {
  flex-shrink: 0;
}

/* Title shrinks with ellipsis before disappearing */
#ApplicationTitle {
  font-size: var(--vbo-font-size-app-title);
  line-height: 1.15;
  flex-shrink: 1;
  min-width: var(--vbo-size-title-min-w);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Toolbar never shrinks */
.vbo-menubar {
  flex-shrink: 0;
}

#LogoPlace {
  width: var(--vbo-size-logo-w);
  height: var(--vbo-size-logo-h);
  display: block;
}

@media only screen and (max-width: 600px) {
  #ApplicationTitle { display: none; }
}

.navbar {
  background-color: var(--vbo-color-bg-white) !important;
}

.vbo-navbar-nav {
  flex-direction: row;
}


/* ============================================================
   4. TOOLBAR
   ============================================================ */

#titleToolbar {
  font-size: var(--vbo-font-size-hi);
  color: var(--vbo-color-text-hi);
  padding-left: var(--vbo-container-padding-x);
  padding-right: var(--vbo-container-padding-x);
  padding-top: var(--vbo-toolbar-padding-top);
}

#statusToolbar {
  padding-left: var(--vbo-toolbar-padding-left);
}

@media (max-width: 639px) {
  #titleToolbar,
  #statusToolbar {
    padding-left: var(--vbo-toolbar-padding-left-mobile);
  }
}

#workspacebuttons .btn i,
#titleToolbar .btn i,
#statusToolbar .btn i,
#menubar .btn i {
  font-size: var(--vbo-size-toolbar-icon) !important;
  line-height: 1;
}

#titleToolbar .dropdown-toggle::after,
#statusToolbar .dropdown-toggle::after,
#titleToolbar .accordion-button::after,
#statusToolbar .accordion-button::after {
  display: none !important;
}

#menubar .btn {
  display: flex;
  align-items: center;
}

/* Einheitlicher, kompakter Abstand aller Toolbar-Icons (wie Stern<->Roboter).
   Die Buttons stammen aus verschiedenen Templates mit unterschiedlichen p-*-Utilities
   (p-2 / p-0 / gar keins beim Hilfe-Link) -> hier vereinheitlicht. Nur direkte Kinder
   von #menubar, damit die Chat-Karte (verschachtelte .btn) unberuehrt bleibt.
   Bootstrap p-* sind !important, daher hier ebenfalls !important. */
#menubar > .btn {
  padding: 0.25rem !important;
}
#menubar > .btn > .bi { margin: 0 !important; }

#id_c_Delete i,
#id_c_Close i {
  transition: color .15s;
}

#id_c_Delete:hover i,
#id_c_Close:hover i {
  color: var(--vbo-color-toolbar-danger-hover);
}

#id_c_Delete:hover,
#id_c_Close:hover {
  background: var(--vbo-color-toolbar-danger-hover-bg) !important;
}

.vbo-toolbar-sep {
  width: var(--vbo-size-toolbar-sep-w);
  height: var(--vbo-size-toolbar-sep-h);
  background: var(--vbo-color-border-light);
  margin: 0 var(--vbo-margin-tab-sep-x);
  flex-shrink: 0;
}


/* ============================================================
   5. LAYOUT — Grid
   ============================================================ */

#id_PanelContent {
  padding: var(--vbo-panel-content-padding);
}

.vbo-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--vbo-grid-gap);
  padding: var(--vbo-space-0);
}
@media (min-width: 640px) {
  .vbo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .vbo-grid { grid-template-columns: repeat(12, 1fr); }
}


/* ============================================================
   6. FORM GRID
   ============================================================ */

.vbo-form-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: auto;
  gap: var(--vbo-grid-gap);
  margin: 0;
  align-content: start;
  align-items: stretch;
  position: relative;
  padding-bottom: 3px;
}

.vbo-form-group {
  grid-column: var(--x-d, auto) / span var(--w-d, 1);
  grid-row:    var(--y-d, auto) / span var(--h-d, 1);
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Grid-Items haben default min-width:auto und schrumpfen nicht unter ihre
     Inhalts-Mindestbreite -> in den schmaleren 2-/1-Spalten-Layouts sprengt langer
     Feldinhalt (Labels, Input-Groups, eingebettete Tabellen mit min-width) das Grid
     nach rechts (rechte Spalte abgeschnitten). min-width:0 laesst die Spur schrumpfen. */
  min-width: 0;
}

.vbo-form-group:not(:has(label))::before {
  content: "";
  display: block;
  height: calc(1.5em + 0.375rem);
}

@media (max-width: 992px) {
  .vbo-form-grid { grid-template-columns: repeat(2, 1fr); }
  .vbo-form-group {
    grid-column: var(--x-t, auto) / span var(--w-t, 1);
    grid-row:    var(--y-t, auto) / span var(--h-t, 1);
  }
  .vbo-grid-item { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .vbo-tab,
  #ApplicationTitle { display: none !important; }
}

@media (max-width: 576px) {
  .vbo-form-grid { grid-template-columns: 1fr; }
  .vbo-form-group {
    grid-column: var(--x-m, auto) / span var(--w-m, 1);
    grid-row:    var(--y-m, auto) / span var(--h-m, 1);
  }
}

.vbo-grid-item {
  min-width: 0;
  align-self: end;
}

.vbo-form-group:has(> .vbo-sd) {
  height: var(--vbo-sd-height) !important;
  min-height: 0 !important;
  align-self: center !important;
  overflow: visible;
  margin-top: calc(-1 * var(--vbo-grid-gap));
  margin-bottom: var(--vbo-sd-margin-b);
}


/* ============================================================
   7. WORKSPACE TABS
   ============================================================ */

#workspacebuttons {
  padding-bottom: 0;
  margin-bottom: -1px;
  display: flex;
  align-items: flex-end;
  line-height: 0;
  position: relative;
  overflow: visible !important;  /* must stay visible for active-tab seam */
  flex-shrink: 1;
  min-width: 0;
  align-self: flex-end;
}

.vbo-tab-bar {
  border-bottom: 1px solid var(--vbo-color-border);
  position: relative;
  overflow: visible;
}

.vbo-tab {
  padding: 6px 14px 9px;
  border: 1px solid var(--vbo-color-border);
  border-bottom: none;
  border-radius: var(--vbo-radius-tab) var(--vbo-radius-tab) 0 0;
  background: rgba(var(--bs-light-rgb), var(--bs-bg-opacity));
  margin-bottom: -1px;
  position: relative;
  overflow: visible;          /* must stay visible for ::after seam */
  flex-shrink: 1;
  min-width: var(--vbo-size-tab-min-w);
  max-width: var(--vbo-size-tab-max-w);
}

/* Tab text: truncates with ellipsis, close button unaffected */
.vbo-tab > span[name] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex-shrink: 1;
}

/* Close button never shrinks */
.vbo-tab > button {
  flex-shrink: 0;
}

.vbo-tab-active {
  background: var(--vbo-color-bg-white);
  border-bottom: none;
  z-index: var(--vbo-z-tab-active);
}

.vbo-tab-active::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: var(--vbo-workflow-underline-h);
  background: var(--vbo-color-bg-white);
  z-index: var(--vbo-z-tab-active-bar);
}

.vbo-tab-inactive {
  margin-bottom: -3px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--vbo-color-border-light);
}

.vbo-tab-active .btn i,
.vbo-tab-inactive span,
.vbo-tab-inactive .btn i {
  color: var(--vbo-color-primary);
}

ul.nav-tabs { overflow: visible !important; }

.nav-tabs .nav-link {
  --bs-nav-link-color:       var(--vbo-color-primary);
  --bs-nav-link-hover-color: var(--vbo-color-primary-hover);
  color: var(--vbo-color-primary);
}
.nav-tabs .nav-link:hover {
  color: var(--vbo-color-primary-hover);
}

.nav-tabs .nav-link.active {
  border-bottom: 2px solid var(--vbo-color-bg-white);
  margin-bottom: -1px;
  z-index: var(--vbo-z-tab-active);
  position: relative;
}

.tab-content {
  border-top: 1px solid var(--vbo-color-border-light);
}


/* ============================================================
   8. WORKFLOW TABS (legacy inline tabs)
   ============================================================ */

.vbo-workflow-tab {
  height: var(--vbo-size-workflow-height);
  border-radius: var(--vbo-radius-pill) var(--vbo-radius-pill) 0px 0px;
  margin: var(--vbo-workflow-margin-top) var(--vbo-space-2) var(--vbo-space-0) var(--vbo-space-0);
  padding-top: var(--vbo-space-2);
  cursor: pointer;
  box-shadow: var(--vbo-shadow-workflow);
}

.vbo-workflow-card {
  display: inline-block;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--vbo-color-workflow-border);
  border-bottom: 2px solid var(--vbo-color-workflow-accent);
  border-top-left-radius: var(--vbo-radius-card);
  border-top-right-radius: var(--vbo-radius-card);
  background: var(--vbo-color-workflow-bg);
  color: var(--vbo-color-workflow-accent);
  font-weight: var(--vbo-font-weight-bold);
}

.vbo-workflow-menu-item { float: left; color: var(--vbo-color-workflow-text); }

.vbo-workflow-selected-label {
  display: block;
  background-color: var(--vbo-color-workflow-selected-bg);
  color: var(--vbo-color-workflow-selected-text);
}
.vbo-workflow-selected-underline {
  display: block;
  width: calc(100% - 10px);
  height: var(--vbo-workflow-underline-h);
  margin: var(--vbo-workflow-underline-neg) var(--vbo-workflow-underline-right) 0 var(--vbo-workflow-underline-left);
  background-color: var(--vbo-color-workflow-selected-bg);
}
.vbo-workflow-selected-bar {
  display: block;
  height: var(--vbo-workflow-bar-h);
  margin: var(--vbo-space-0) var(--vbo-space-2) var(--vbo-space-0) var(--vbo-space-0);
  background-color: var(--vbo-color-workflow-selected-bg);
}


/* ============================================================
   9. FORM ELEMENTS
   ============================================================ */

.form-label {
  font-size: var(--vbo-font-size-lo);
  color: var(--vbo-color-text-lo);
  margin-bottom: var(--vbo-field-label-margin-b);
}

.form-control {
  height: var(--vbo-size-form-height);
  padding-top: 0;
  padding-bottom: 0;
  font-size: var(--vbo-font-size-hi);
  color: var(--vbo-color-text-hi);
}

.form-control:disabled {
  background: var(--vbo-color-bg-field-ro);
  border-color: var(--vbo-color-border-light);
  color: var(--vbo-color-text-lo);
  font-size: var(--vbo-font-size-hi);
  cursor: default;
}

input:not(:disabled, .is-invalid).form-control {
  background: var(--vbo-color-bg-field);
  border-color: var(--vbo-color-border);
  color: var(--vbo-color-text-hi);
}

.form-check-input:checked {
  background-color: var(--vbo-color-primary);
  border-color: var(--vbo-color-primary);
}

.form-check-input:disabled:checked {
  background-color: var(--vbo-color-disabled-btn);
  border-color: var(--vbo-color-disabled-btn);
}

.form-check { padding-top: var(--vbo-padding-top-form-check); }

.form-check-label {
  font-size: var(--vbo-font-size-hi);
  color: var(--vbo-color-text-hi);
}


/* ============================================================
   10. FIELDS & LABELS
   ============================================================ */

.vbo-mandatory {
  color: var(--vbo-color-danger);
  font-weight: var(--vbo-font-weight-bold);
  line-height: 1;
  float: left;
}

.vbo-field-label {
  display: inline-flex;
  align-items: center;
  gap: var(--vbo-space-1);
  margin-bottom: var(--vbo-space-1);
  font-weight: var(--vbo-font-weight-medium);
  color: var(--vbo-color-label);
}

.vbo-field-wrapper {
  display: block;
  position: relative;
  width: 100%;
}

.vbo-field-wrapper-hidden { display: none !important; }

.vbo-field-wrapper .vbo-field-label {
  min-height: 1rem;
  display: block;
}

.vbo-label-mandatory { white-space: nowrap; width: 100%; }

.vbo-checkbox-label            { margin-top: 0.25em; color: var(--vbo-color-label); }
.vbo-checkbox-label--with-field { margin-left: var(--vbo-space-2); }
.vbo-checkbox-label--standalone { height: var(--vbo-size-workflow-height); margin-top: var(--vbo-margin-top-checkbox); }
.vbo-checkbox-label-icon        { width: var(--vbo-size-checkbox-icon-w); }

.vbo-input-right { text-align: right; }

.vbo-input-with-icon       { width: calc(100% - 25px); }
.vbo-input-email-with-icon { max-width: calc(100% - 25px); }
.vbo-input-with-icon,
.vbo-input-email-with-icon,
.vbo-input-phone-with-icon {
  padding-right: var(--vbo-field-input-icon-pad) !important;
}

.vbo-input-group > .form-control:not(:disabled) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.vbo-input-group > .form-control:disabled {
  border-top-right-radius: var(--bs-border-radius) !important;
  border-bottom-right-radius: var(--bs-border-radius) !important;
}
.input-group .btn,
.vbo-input-group .btn {
  height: var(--vbo-size-form-height);
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  align-items: center;
}
.vbo-input-group .btn {
  border-color: var(--bs-border-color) !important;
  background-color: var(--bs-body-bg);
  margin-left: -1px;
}
.vbo-input-group .btn i { color: var(--vbo-color-primary); }

.vbo-input-icon-right { position: relative; }
.vbo-input-icon-right .form-control { padding-right: var(--vbo-field-input-icon-pad); }

.vbo-input-action-icon {
  color: var(--vbo-color-text-white);
  background-color: var(--vbo-color-brand);
  border-radius: var(--vbo-radius-lg);
}
.vbo-input-action-icon-wrap {
  height: var(--vbo-size-icon-btn);
  border-radius: var(--vbo-radius-md);
  padding: var(--vbo-space-0);
}
.vbo-input-upload-icon {
  font-size: var(--vbo-size-icon-upload);
  padding: 1px;
}
.vbo-input-upload-icon-wrap {
  width: var(--vbo-size-icon-btn-sm);
  text-align: center;
}

.vbo-field-icon {
  position: absolute;
  right: var(--vbo-field-icon-right);
  top: var(--vbo-field-icon-top);
  color: var(--vbo-color-text-lo);
  font-size: var(--vbo-size-toolbar-icon-field);
  pointer-events: none;
}

.vbo-field-icon-legacy {
  position: absolute;
  right: var(--vbo-space-0);
  top: var(--vbo-field-icon-top-legacy);
}

.vbo-field-date-trigger {
  position: absolute;
  right: var(--vbo-space-0);
  top: var(--vbo-field-trigger-top);
  width: var(--vbo-field-trigger-size);
  height: var(--vbo-field-trigger-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--vbo-radius-sm);
  cursor: pointer;
}
.vbo-field-date-trigger:hover { opacity: 0.9; }

.vbo-field-time-trigger { right: var(--vbo-space-0); }

.vbo-field-timestamp-date { right: var(--vbo-field-timestamp-offset); }
.vbo-field-timestamp-time { right: var(--vbo-space-0); }

.vbo-field-textarea         { color: var(--vbo-color-text-muted); }
.vbo-field-textarea-display { color: var(--vbo-color-text-muted); overflow: auto; white-space: pre; }

.vbo-field-msg-green-top   { margin-bottom: var(--vbo-offset-msg-green); }
.vbo-field-msg-green-inner { position: relative; top: var(--vbo-offset-msg-green); }

.vbo-field-file-wrap   { display: flex; }
.vbo-field-file-icon   { width: var(--vbo-size-icon-btn-sm); text-align: center; }
.vbo-field-file-body   { padding: 5px 0 0 var(--vbo-size-icon-btn-sm); flex-grow: 1; }
.vbo-field-file-btn    { color: var(--vbo-color-primary); }
.vbo-field-file-input  { background-color: var(--vbo-color-bg-white); color: var(--vbo-color-file-text); }
.vbo-field-file-upload-btn { display: flex; float: left; padding: 5px 3px 0 3px; color: var(--vbo-color-primary); }
.vbo-field-file-pointer { cursor: pointer; }
.vbo-field-file-table-btn {
  transform-origin: center;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.vbo-field-file-link        { color: var(--vbo-color-text-dark); vertical-align: middle; height: var(--vbo-size-icon-cell); overflow-wrap: break-word; }
.vbo-field-file-link-margin { margin-top: var(--vbo-margin-top-file-link); }

.vbo-select-error {
  border: 1px solid var(--vbo-color-danger) !important;
  border-bottom: 1px solid var(--vbo-color-danger-border) !important;
  box-shadow: 0 1px 0 0 var(--vbo-color-danger) !important;
}
.vbo-select-error-bg { background-color: var(--vbo-color-danger-bg) !important; }
.vbo-select-error--focus,
.vbo-select-container--focus .vbo-select-error {
  border-bottom: 2px solid var(--vbo-color-danger-border) !important;
}

.vbo-grouping {
  width: 100%;
  height: var(--vbo-size-grouping-height);
  border-bottom: 1px solid var(--vbo-color-border-light);
  vertical-align: center;
  font-weight: var(--vbo-font-weight-bold);
  padding-top: var(--vbo-padding-top-grouping);
}


/* ============================================================
   11. SECTION DIVIDER
   ============================================================ */

.vbo-sd {
  display: flex;
  align-items: center;
  gap: var(--vbo-sd-gap);
  margin: var(--vbo-sd-margin-y) 0;
}
.vbo-sd-pre  { flex: 0 0 var(--vbo-sd-pre-width); height: var(--vbo-sd-line-h); background: var(--vbo-color-divider); }
.vbo-sd-txt  { font-size: var(--vbo-font-size-hi); font-weight: var(--vbo-font-weight-medium); color: var(--vbo-color-divider-text); white-space: nowrap; }
.vbo-sd-post { flex: 1; height: var(--vbo-sd-line-h); background: var(--vbo-color-divider); }


/* ============================================================
   12. BUTTONS
   ============================================================ */

.btn-primary {
  --bs-btn-bg:                    var(--vbo-color-primary);
  --bs-btn-border-color:          var(--vbo-color-primary);
  --bs-btn-hover-bg:              var(--vbo-color-primary-hover);
  --bs-btn-hover-border-color:    var(--vbo-color-primary-hover);
  --bs-btn-active-bg:             var(--vbo-color-primary-active);
  --bs-btn-active-border-color:   var(--vbo-color-primary-active);
  --bs-btn-disabled-bg:           var(--vbo-color-disabled-btn);
  --bs-btn-disabled-border-color: var(--vbo-color-disabled-btn);
  --bs-btn-disabled-color:        var(--vbo-color-disabled-text);
  width: 100%;
  height: var(--vbo-size-form-height);
  font-size: var(--vbo-font-size-hi);
  padding-top: 3px;
}

.btn-primary:disabled {
  background: var(--vbo-color-bg-disabled);
  border-color: var(--vbo-color-disabled-border);
  color: var(--vbo-color-disabled-text);
  opacity: 1;
}

.btn-link {
  --bs-btn-color:       var(--vbo-color-primary);
  --bs-btn-hover-color: var(--vbo-color-primary-hover);
}

table .btn,
.table .btn {
  transform: scale(var(--vbo-size-icon-scale));
  transform-origin: center;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--vbo-color-primary) !important;
}
table .btn:hover,
.table .btn:hover {
  color: var(--vbo-color-primary-hover) !important;
}

/* Action badge — pill-shaped inline action label in the toolbar */
.vbo-action-badge {
  display: inline-flex;
  align-items: center;
  align-self: center;
  padding: 4px 10px;
  height: var(--vbo-size-badge-h);
  font-size: var(--vbo-font-size-badge);
  line-height: 1.2;
  border: 1px solid var(--vbo-color-action-badge);
  border-radius: var(--vbo-radius-badge);
  color: var(--vbo-color-action-badge);
  cursor: pointer;
  vertical-align: middle;
}

.vbo-btn-dashboard-wrap { width: 100%; height: var(--vbo-size-dashboard-box-h); text-align: center; vertical-align: middle; }
.vbo-btn-dashboard-icon { vertical-align: middle; height: var(--vbo-size-icon-cell); }
.vbo-btn-dashboard      { width: var(--vbo-size-dashboard-btn) !important; height: var(--vbo-size-dashboard-btn) !important; min-width: initial !important; }

.vbo-btn-panel       { width: 100%; margin-top: var(--vbo-margin-top-btn-panel); }
.vbo-btn-panel-hidden { display: none; float: left; margin: var(--vbo-space-3) var(--vbo-space-3) var(--vbo-space-5) var(--vbo-space-0); }
.vbo-btn-panel-icon  { float: left; margin: var(--vbo-space-3) var(--vbo-space-3) var(--vbo-space-5) var(--vbo-space-0); }
.vbo-btn-panel-image { width: 100%; margin-top: var(--vbo-margin-top-btn-image); }
.vbo-btn-list-image  { background-color: var(--vbo-color-brand); color: var(--vbo-color-text-white); }

.vbo-btn-upload-span { margin: var(--vbo-space-0); padding: var(--vbo-space-0); width: var(--vbo-size-icon-upload-wrap); height: var(--vbo-size-icon-upload-wrap); display: inline-block; }
.vbo-btn-upload-wrap { margin-top: var(--vbo-space-0); padding-top: var(--vbo-space-4); }

.vbo-btn-menu-logout     { padding-left: var(--vbo-space-5) !important; }
.vbo-confirm-dialog-float { float: left; margin: var(--vbo-space-3) var(--vbo-space-3) var(--vbo-space-5) var(--vbo-space-0); }

.vbo-favorite-item      { border-bottom: 1px solid var(--vbo-color-border-black); }
.vbo-favorite-btn       { min-width: var(--vbo-size-icon-btn-sm); width: var(--vbo-size-icon-btn-sm); padding: var(--vbo-space-0); }
.vbo-favorite-row-btn   { min-width: var(--vbo-size-icon-btn-sm); width: var(--vbo-size-icon-btn-sm); padding: var(--vbo-space-0); }
.vbo-favorite-row-label { display: inline-flex; align-items: center; }


/* ============================================================
   13. ICONS
   ============================================================ */

.vbo-icon        { transform: scale(var(--vbo-size-icon-scale)); }
.vbo-icon-delete { background-color: var(--vbo-color-brand); color: var(--vbo-color-text-white); }
.vbo-icon-img    { vertical-align: bottom; }
.vbo-icon-box    { width: 100%; text-align: center; }


/* ============================================================
   14. BREADCRUMB
   ============================================================ */

.vbo-breadcrumb-btn {
  font-size: var(--vbo-font-size-hi) !important;
  color: var(--vbo-color-primary);
  background: none !important;
  border: none;
  padding: var(--vbo-space-0) !important;
  cursor: pointer;
}
.vbo-breadcrumb-icon {
  font-size: var(--vbo-font-size-hi) !important;
  color: var(--vbo-color-text-lo);
  margin: 0 var(--vbo-breadcrumb-icon-margin-x);
}


/* ============================================================
   15. PANELS
   ============================================================ */

.vbo-panel-filter-header,
.accordion-button.vbo-panel-filter-header,
.accordion-button.vbo-panel-filter-header:not(.collapsed) {
  background-color: var(--vbo-color-bg-white) !important;
  --bs-accordion-btn-bg: var(--vbo-color-bg-white);
  --bs-accordion-active-bg: var(--vbo-color-bg-white);
  box-shadow: none !important;
  font-size: var(--vbo-font-size-sm);
  height: var(--vbo-size-toolbar-height) !important;
  min-height: var(--vbo-size-toolbar-height);
  color: var(--vbo-color-brand);
}

.vbo-panel-filter-animate   { left: var(--vbo-panel-offset-left); width: 100%; overflow: hidden; }
.vbo-panel-absolute          { left: var(--vbo-panel-offset-left); width: 100%; }
.vbo-panel-collapsible       { background-color: var(--vbo-color-bg-white); }

.vbo-panel-relative          { position: relative; top: var(--vbo-space-0); left: var(--vbo-space-0); width: 100%; }
.vbo-panel-relative-input    { display: none; background-color: var(--vbo-color-bg-transparent); width: var(--vbo-size-accordion-input-w); }
.vbo-panel-relative-no-title { position: relative; top: var(--vbo-space-0); left: var(--vbo-space-0); }

.vbo-panel-shadow {
  width: 100%; height: 100%;
  padding: var(--vbo-space-2); margin: var(--vbo-space-2);
  box-sizing: border-box;
}

.vbo-toggle:hover,
.vbo-menu-toggle:hover { background: var(--vbo-color-bg-hover) !important; }

.vbo-message,
.alert {
  font-size: var(--vbo-font-size-hi);
  margin-left: 5px;
  margin-right: var(--vbo-container-padding-x);
  border-radius: var(--bs-border-radius);
}


/* ============================================================
   16. TABLES (new style)
   ============================================================ */

.vbo-table-wrapper { width: 100%; }

.vbo-table-container {
  box-sizing: border-box;
  width: 100%;
  overflow: auto;
  border: 1px solid var(--vbo-color-border);
  border-radius: var(--vbo-table-border-radius);
  background: var(--vbo-color-bg-white);
  box-shadow: var(--vbo-shadow-table);
  float: left;
}

.vbo-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

.vbo-table th,
.vbo-table td {
  box-sizing: border-box;
  padding: var(--vbo-table-cell-pad);
  vertical-align: middle;   /* Text-Zellen mittig wie die Aktion-Button-Zelle (align-middle) - sonst stehen sie oben */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  overflow-wrap: break-word;
}

.vbo-table thead {
  position: sticky;
  top: 0;
  z-index: var(--vbo-z-table-head);
}

.vbo-table thead th {
  background: var(--vbo-color-bg-white);
  color: var(--vbo-color-text-lo);
  font-size: var(--vbo-font-size-lo);
  font-weight: var(--vbo-font-weight-medium);
  border-bottom: 1px solid var(--vbo-color-border);
  position: relative;
}

.vbo-table thead tr:first-child th { border-bottom: 0 !important; }
.vbo-table thead tr:last-child th  { border-bottom: 1px solid var(--vbo-color-border) !important; }

.vbo-table tbody td {
  border-bottom: 1px solid var(--vbo-color-border-light);
  background: var(--vbo-color-bg-white);
  font-size: var(--vbo-font-size-hi);
  color: var(--vbo-color-text-hi);
}

.vbo-table tbody tr:hover td { background: var(--vbo-color-bg-hover-row); }

.vbo-table th:nth-child(2)::after,
.vbo-table td:nth-child(2)::after {
  content: '';
  position: absolute;
  right: -1px; top: 0; bottom: 0;
  width: 1px;
}

table.vbo-table th:nth-child(1),
table.vbo-table td:nth-child(1) {
  padding: 0 2px !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

table.vbo-table td:nth-child(1) { align-items: center; }
table.vbo-table td:nth-child(1) .mdl-button { margin: 0 !important; }

.tbl-no-border { border: none; }

/* Kontakt-Zelle (E-Mail/Telefon) im Table-Mode: Icon inline und mittig zum Text
   statt per festem top/left-Offset (der nach vertical-align:middle schief sass).
   line-height = Icon-Hoehe (material-icons 24px): der Text zentriert sich in derselben
   Zeilenbox wie das mittig ausgerichtete Icon, ohne die Zeile hoeher zu machen. */
.vbo-style-table-cell-contact1 { line-height: 24px; }
.vbo-style-table-cell-contact1 > a { vertical-align: middle; margin-right: 6px; }
.vbo-table-cell-contact2 {
  position: static;
  left: auto;
  top: auto;
  vertical-align: middle;
}

.vbo-th {
  background: var(--vbo-color-bg-white);
  color: var(--vbo-color-text-lo);
  font-size: var(--vbo-font-size-lo);
  font-weight: var(--vbo-font-weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-bottom: 1px solid var(--vbo-color-border) !important;
}
.vbo-th-sortable         { cursor: pointer; }
.vbo-th-sortable:hover   { color: var(--vbo-color-text-hi); }
.vbo-sort-primary        { color: var(--vbo-color-primary); opacity: 1; }
.vbo-sort-secondary      { color: var(--vbo-color-primary); opacity: 0.5; }
.vbo-sort-inactive       { color: var(--vbo-color-text-lo); }
.vbo-th-sortable:hover .vbo-sort-inactive { color: var(--vbo-color-text-hi); }

.vbo-resize-handle {
  position: absolute;
  top: 0; right: 0;
  width: var(--vbo-size-resize-handle);
  height: 100%;
  cursor: col-resize;
  background: transparent;
  z-index: var(--vbo-z-resize-handle);
}
.vbo-resize-handle:hover,
.vbo-resize-handle.active { background: rgba(0,0,0,0.5); }

@media (max-width: 768px) {
  .vbo-table-container {
    max-height: none !important;
    overflow: visible;
    border: none;
    box-shadow: none;
    background: transparent;
  }
  .vbo-table { display: block; min-width: 0 !important; }
  .vbo-table thead { display: none; }
  .vbo-table tbody { display: block; }
  .vbo-table tr {
    display: block;
    margin-bottom: var(--vbo-table-mb-card-mb);
    border: 1px solid var(--vbo-color-border);
    border-radius: var(--vbo-table-border-radius);
    background: var(--vbo-color-bg-white);
    box-shadow: var(--vbo-shadow-card);
    padding: var(--vbo-table-mb-pad);
  }
  .vbo-table td:nth-child(1) { display: flex; }
  .vbo-table td {
    display: grid;
    grid-template-columns: var(--vbo-size-tab-cell-label-w) 1fr;
    gap: var(--vbo-table-cell-gap-m);
    padding: var(--vbo-table-cell-pad-m);
    border: none;
    background: var(--vbo-color-bg-white) !important;
    white-space: normal;
    text-align: left !important;
  }
  .vbo-table td::before {
    content: attr(data-label);
    font-weight: var(--vbo-font-weight-medium);
    color: var(--vbo-color-text-lo);
    font-size: var(--vbo-font-size-lo);
  }
  .vbo-table th:nth-child(1),
  .vbo-table th:nth-child(2),
  .vbo-table td:nth-child(1),
  .vbo-table td:nth-child(2) {
    position: static !important;   /* Inline-Sticky (style="position:sticky;left:0") in Kachelansicht neutralisieren */
    left: auto !important;
    min-width: 0 !important;       /* Inline min-width:60px der Button-Zelle aufheben */
  }
  /* Kachel-Tabelle nie breiter als der Container: die per <style> gesetzte Breite
     (calc(100vw-22px) bzw. min-width:1107px/99.9% ab 640px) laeuft zwischen ~640-768px
     ueber die verfuegbare Breite hinaus -> horizontaler Scroll / abgeschnittene Kachel. */
  .vbo-table.classtable {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .tbl-no-border tbody tr { height: unset; }
}


/* ============================================================
   17. TABLES (legacy fixed-column / tree)
   ============================================================ */

.vbo-table-outer        { width: 100%; border-collapse: collapse; table-layout: fixed; }
.vbo-table-header       { white-space: normal; border-collapse: collapse; padding: var(--vbo-space-0); position: relative; table-layout: fixed; }
.vbo-table-body-inner   { border-collapse: collapse; table-layout: fixed; }
.vbo-table-content      { border-collapse: collapse; table-layout: fixed; }
.vbo-table-body-wrapper { white-space: normal; overflow-y: scroll; overflow-x: auto; width: 100%; }
.vbo-table-tbody        { border-width: 0px; padding: var(--vbo-space-0); }
.vbo-table-row          { overflow: hidden; padding: var(--vbo-space-0); border-width: 0px; }
.vbo-table-row-shaded    { background-color: var(--vbo-color-bg-light); }
.vbo-table-row-shaded td { white-space: nowrap; padding-left: var(--vbo-space-0) !important; text-align: left !important; }
.vbo-table-col-header    { white-space: nowrap; overflow: hidden; }
.vbo-table-col-sort-icon { vertical-align: bottom; margin-bottom: var(--vbo-margin-bottom-sort-icon); font-size: var(--vbo-font-size-lg); }
.vbo-table-cell-contact  { padding-left: var(--vbo-space-8); }
.vbo-table-cell-edit     { overflow: visible; }
.vbo-table-cell-graphic  { text-align: center; }
.vbo-table-cell-graphic-img { height: var(--vbo-size-icon-cell); width: var(--vbo-size-icon-cell); object-fit: contain; }
.vbo-table-cell-icon-color { text-align: center; }

@media (max-width: 639px) {
  .vbo-table-header tbody { display: none; }
  .vbo-table-body,
  .vbo-table-body > tbody,
  .vbo-table-body tr,
  .vbo-table-body td { display: block; width: 100%; }
  .vbo-table-body tr { height: 100% !important; border-bottom: 2px solid var(--vbo-color-border-dark); }
  .vbo-table-body td { text-align: left; padding-left: 50%; position: relative; border: none !important; }
  .vbo-table-body td::before {
    content: attr(data-label);
    position: absolute; left: 0; width: 50%;
    padding-left: var(--vbo-toolbar-padding-left);
    font-weight: var(--vbo-font-weight-bold);
    text-align: left;
    color: var(--vbo-color-text-heading);
  }
  .vbo-table-fluid { width: calc(100vw - 37px); }
  .vbo-layout-panel        { margin-right: var(--vbo-space-2); }
  .vbo-field-in-table      { padding: var(--vbo-space-0) !important; }
  .vbo-icon-field-in-table { bottom: var(--vbo-space-0) !important; }
  .vbo-mobile-only         { display: none; }
}
@media (min-width: 640px) {
  .vbo-table-fluid { width: 100%; }
}

.vbo-table-fixed-col-wrap   { overflow: hidden; }
.vbo-table-fixed-col        { border-collapse: collapse; border-spacing: var(--vbo-space-0); padding: var(--vbo-space-0); border: 0px; table-layout: fixed; }
.vbo-table-fixed-col-header { white-space: normal; border-collapse: collapse; padding: var(--vbo-space-0); position: relative; table-layout: fixed; }
.vbo-table-fixed-col-body   { border-collapse: collapse; table-layout: fixed; }
.vbo-table-fixed-col-tbody  { border-width: 0px; padding: var(--vbo-space-0); }
.vbo-table-fixed-col-td         { overflow: hidden; border-width: 0px; }
.vbo-table-fixed-col-td-nowrap  { white-space: nowrap; padding-bottom: var(--vbo-space-0); }
.vbo-table-fixed-col-td-narrow  { width: var(--vbo-size-scroll-col-narrow); }
.vbo-table-fixed-col-td-top     { overflow: hidden; border-width: 0px; vertical-align: top; }
.vbo-table-fixed-col-td-top2    { overflow: hidden; vertical-align: top; }
.vbo-table-fixed-col-tr     { overflow: hidden; padding: var(--vbo-space-0); border-width: 0px; border-spacing: var(--vbo-space-0); }
.vbo-table-fixed-col-div    { position: relative; overflow: visible; top: var(--vbo-space-0); left: var(--vbo-space-0); border-width: 0px; }
.vbo-table-fixed-col-scroll { position: relative; overflow-y: auto; overflow-x: auto; top: var(--vbo-space-0); left: var(--vbo-space-0); }
.vbo-table-fixed-col-input  { background-color: var(--vbo-color-bg-transparent); width: var(--vbo-size-hidden-input); height: var(--vbo-size-hidden-input); }


/* ============================================================
   18. TREE TABLE
   ============================================================ */

.vbo-tree-table        { border-collapse: collapse; table-layout: fixed; }
.vbo-tree-table-header { white-space: normal; border-collapse: collapse; padding: var(--vbo-space-0); position: relative; table-layout: fixed; }
.vbo-tree-tbody { border-width: 0px; padding: var(--vbo-space-0); }
.vbo-tree-tr    { overflow: hidden; padding: var(--vbo-space-0); border-width: 0px; border-spacing: var(--vbo-space-0); }
.vbo-tree-th    { white-space: nowrap; padding-left: var(--vbo-space-4); text-align: left; }
.vbo-tree-scroll { white-space: normal; overflow-y: scroll; overflow-x: auto; }
.vbo-tree-input { background-color: var(--vbo-color-bg-transparent); width: var(--vbo-size-hidden-input); height: var(--vbo-size-hidden-input); }
.vbo-tree-row-shaded    { background-color: var(--vbo-color-bg-light); }
.vbo-tree-row-shaded td { white-space: nowrap; padding-left: var(--vbo-space-4); text-align: left; }
.vbo-tree-ao { background-color: var(--vbo-color-bg-transparent); width: var(--vbo-size-tree-ao-width); }


/* ============================================================
   19. LABELS / CONTENT BLOCKS
   ============================================================ */

/* Standalone-Label (kein <label>) exakt auf die Control-Box daneben ausrichten. Der Feld-Wrapper
   sitzt oben in der Gruppe: [Label-Band][Control]. Feld-Label-Band = min-height:1rem + margin-bottom
   (--vbo-space-1); Control = --vbo-size-form-height. Wir reservieren GENAU dieses Band als Platzhalter
   (statt der generischen ~27px) und geben dem Label die Control-Hoehe -> deckt sich mit der Control-Box. */
.vbo-form-group:has(> .vbo-label-block)::before { height: calc(1rem + var(--vbo-space-1)); }
.vbo-label-block         { width: 100%; height: var(--vbo-size-form-height); display: flex; align-items: center; }
.vbo-label1-block        { width: 100%; }
.vbo-label2-block        { width: 100%; }
.vbo-label3-block        { width: 100%; }
.vbo-label10-block       { width: 100%; }
.vbo-label-big           { width: 100%; font-size: var(--vbo-font-size-xxl); }
.vbo-label-chart-wrap    { background-color: var(--vbo-color-bg-transparent); }
.vbo-label-chart-iframe  { vertical-align: top; width: 100%; height: 100%; border: none; background-color: var(--vbo-color-bg-transparent); }
.vbo-label-export        { width: 100%; padding: var(--vbo-space-0); margin-top: var(--vbo-space-4); }
.vbo-label-export-custom { width: 100%; padding: var(--vbo-space-0); margin-top: var(--vbo-margin-top-export); }
.vbo-label-filter-hidden    { display: none; }
.vbo-label-filter-clickable { width: 100%; cursor: pointer; }
.vbo-label-filter-table     { border-collapse: collapse; border-spacing: var(--vbo-space-0); padding: var(--vbo-space-0); border: 0px; }
.vbo-label-warning      { width: 100%; }
.vbo-label-url          { width: 100%; }
.vbo-label-title        { width: 100%; }
.vbo-label-no-underline { width: 100%; }

.vbo-progress-wrap {
  align-self: center;
  width: 100%;
  margin-top: 0;
  padding: 0 12px;
  box-sizing: border-box;
}

.vbo-progress-inner {
  display: block;
  text-align: center;
  color: var(--vbo-color-text-hi);
  font-size: var(--vbo-font-size-hi);
  font-weight: var(--vbo-font-weight-medium);
  white-space: nowrap;
  margin-bottom: var(--vbo-space-1);
}

.vbo-progress-wrap .progress {
  position: relative;
  width: 100%;
  height: calc(var(--vbo-size-progress-height) / 3);
  padding: 3px;
  box-sizing: border-box;
  background-color: var(--vbo-color-bg-white);
  border: 1px solid var(--vbo-color-border);
  border-radius: var(--vbo-radius-sm);
  overflow: hidden;
}

.vbo-progress-fill {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  height: auto;
  border-radius: calc(var(--vbo-radius-sm) - 2px);
  background-color: var(--vbo-color-primary);
}

/* ============================================================
   20. MEDIA / IMAGE COMPONENTS
   ============================================================ */

.vbo-image-wait-box {
  width: 100%; min-height: var(--vbo-size-image-wait-min-h);
  background-color: var(--vbo-color-bg-transparent);
  overflow: hidden;
  background-size: contain; background-repeat: no-repeat; background-position: center top;
  text-align: center;
}
.vbo-image-inner-box    { float: left; position: relative; left: calc(50% - var(--vbo-size-image-center-shift)); max-width: var(--vbo-size-image-inner-max-w); }
.vbo-image-select-box   { float: left; min-width: var(--vbo-size-image-select-min-w); }
.vbo-image-btn-box      { float: left; padding-left: var(--vbo-space-7); }
.vbo-image-wrap         { width: 100%; background-color: var(--vbo-color-bg-transparent); }
.vbo-image              { vertical-align: top; width: 100%; height: 100%; border: none; background-color: var(--vbo-color-bg-image); }
.vbo-image-noscale-wrap { width: 100%; background-color: var(--vbo-color-bg-transparent); overflow: auto; }
.vbo-image-noscale      { vertical-align: top; border: none; }
.vbo-frame-wrap         { width: 100%; min-height: var(--vbo-size-frame-min-height); }
.vbo-frame              { border: 0; }
.vbo-map-wrap           { width: 100%; min-height: var(--vbo-size-map-min-height); }
.vbo-map-iframe         { border: 0; }
.vbo-calendar-wrap      { width: 100%; height: 100%; background-color: var(--vbo-color-bg-transparent); }


/* ============================================================
   21. DROPDOWN / SELECT2
   ============================================================ */

.vbo-dropdown-table { width: 100%; border-collapse: collapse; border-spacing: var(--vbo-space-0); padding: var(--vbo-space-0); border: 0px; }
.vbo-dropdown-td    { vertical-align: middle; }

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear,
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear { all: unset; position: absolute; }

.select2-container { width: 100% !important; }

.select2-container--bootstrap-5 .select2-selection {
  min-height: var(--vbo-size-form-height);   /* exakt die Projekt-Feldhoehe (.form-control = 34px) */
  border-radius: var(--vbo-radius-sm);
}

/* Multiselect-Chips kompakter, damit sie ins Feld-Layout passen (Default-Theme ist
   zu gross/hoch). Kleinere Schrift, engeres Padding, geringere Zeilenhoehe. */
.select2-container--bootstrap-5 .select2-selection--multiple {
  padding-block: 1px;                  /* weniger vertikales Innen-Padding (Theme: .375rem) */
  padding-inline: .5rem;
}
/* KEIN Flex (bricht hier um). Vertikale Zentrierung ueber line-height + vertical-align. */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
  padding-block: 0;
  min-height: calc(var(--vbo-size-form-height) - 4px);    /* volle Feld-Innenhoehe -> Platz zum Zentrieren */
  line-height: calc(var(--vbo-size-form-height) - 4px);   /* Inline-Zentrierung */
  align-items: center;                                     /* falls Rendered nativ Flex ist -> mittig */
  display: inline-flex;                                    /* inline-level, damit das GESCHWISTER-Suchfeld
                                                              auf gleicher Zeile bleibt (nicht darunter) */
  vertical-align: middle;
}
/* Suchfeld/Placeholder ist Geschwister der <ul> und wird vom Theme als display:block;width:100%
   gerendert -> landet unter dem Feld. Inline neben die (leere) Liste holen, Feldhoehe fuellen. */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-search--inline {
  display: inline-block;
  width: auto;
  height: auto;
  vertical-align: middle;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-search--inline .select2-search__field {
  height: calc(var(--vbo-size-form-height) - 6px);
  min-height: 0;
  margin: 0;
  padding-block: 0;
  line-height: calc(var(--vbo-size-form-height) - 6px);   /* = Hoehe -> einzeiliger Text/Placeholder vertikal mittig */
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
  vertical-align: middle;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
  font-size: .8125rem;                 /* ~13px */
  line-height: 1.4;
  padding: 0 .375rem;
  margin: 1px 4px 1px 0;               /* engere vertikale Chip-Abstaende */
  border-radius: var(--vbo-radius-sm);
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice__remove {
  padding: 0 .25rem 0 0;               /* engeres "x" */
  font-size: 1rem;
  line-height: 1.4;
}

.select2-container--disabled .select2-selection--single {
  background-color: var(--vbo-color-bg-field-ro) !important;
  border-color: var(--vbo-color-border-light) !important;
}

.select2-container--disabled .select2-selection__rendered {
  color: var(--vbo-color-text-lo) !important;
  font-size: var(--vbo-font-size-hi) !important;
}


/* ============================================================
   22. ACCORDION
   ============================================================ */

.vbo-accordion-input         { background-color: var(--vbo-color-bg-transparent); width: var(--vbo-size-accordion-input-w); }
.vbo-accordion-tab-opt-wrap  { position: absolute; right: var(--vbo-size-accordion-opt-right); }
.vbo-accordion-tab-opt-input { pointer-events: auto; }
.vbo-tabbed-doc-wrap         { position: absolute; }
.vbo-tabbed-doc-table        { margin-top: var(--vbo-margin-top-tabbed-doc); }
.vbo-tabbed-doc-input        { background-color: var(--vbo-color-bg-transparent); width: var(--vbo-size-accordion-input-w); }


/* ============================================================
   23. MULTILANG TABLE
   ============================================================ */

.vbo-multilang-wrap  { white-space: normal; overflow: visible !important; width: var(--vbo-size-multilang-width) !important; }
.vbo-multilang-table { border-collapse: collapse; table-layout: fixed; width: 100%; text-align: left !important; }


/* ============================================================
   24. OVERLAYS
   ============================================================ */

#overlayVBO,
.vbo-overlay {
  z-index: var(--vbo-z-overlay);
  display: none;
  background-color: var(--vbo-color-bg-transparent);
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

#idWait { visibility: hidden; }


/* ============================================================
   25. 3D / SPECIAL PANELS
   ============================================================ */

.vbo-3d-wrap  { width: 100%; text-align: right; }
.vbo-3d-btn   { position: fixed; right: var(--vbo-space-4); top: var(--vbo-space-0); z-index: var(--vbo-z-3d-btn); }
.vbo-3d-input { width: var(--vbo-size-hidden-input); height: var(--vbo-size-hidden-input); }
.vbo-3d-panel { position: fixed; width: 100%; height: calc(100vh - var(--vbo-size-3d-top-offset)); top: var(--vbo-size-3d-top-offset); left: var(--vbo-space-0); z-index: var(--vbo-z-3d-panel); }


/* ============================================================
   26. VOICE RECORDER
   ============================================================ */

.vbo-voice-recorder { width: 100%; height: 100%; }


/* ============================================================
   27. HIDDEN SUBMIT
   ============================================================ */

.vbo-hidden-submit {
  padding: var(--vbo-space-0);
  background-color: var(--vbo-color-bg-transparent);
  width: var(--vbo-size-hidden-input);
  height: var(--vbo-size-hidden-input);
  border: none;
}


/* ============================================================
   28. UTILITIES
   ============================================================ */

.vbo-overflow-hidden   { overflow: hidden; }
.vbo-visibility-hidden { visibility: hidden; }
.vbo-visibility-shown  { visibility: visible; }
.vbo-hidden            { display: none; }
.vbo-width-full        { width: 100%; }
.vbo-main-text-color   { color: var(--vbo-color-brand); }


/* ============================================================
   29. PATCH
   ============================================================ */

.vbo-th-buttons {
  width: 60px;
  white-space: nowrap;
  overflow: visible;
}

.vbo-table-instance { display: block; }