/*******************************
   TABULATOR EXTENSIONS
   Nested rows, toggle cells, detail holder and row highlight.
*******************************/

/* Nested row / detail box */
.nested-wrap {
  width: 100%;
  max-width: calc(100vw - 280px);
  overflow-x: auto;
  overflow-y: hidden;
  background-color: #1b1b1b;
  border-top: 1px solid var(--bulma-border);
  box-shadow:
    inset 0 15px 15px -15px rgba(255, 255, 255, 0.15),
    inset 0 -15px 15px -15px rgba(255, 255, 255, 0.10);
  transition: box-shadow 0.2s ease;
}

.nested-wrap:hover {
  background-color: #1f1f1f;
  box-shadow:
    inset 0 15px 15px -15px rgba(255, 255, 255, 0.25),
    inset 0 -15px 15px -15px rgba(255, 255, 255, 0.20);
}

.nested-grid {
  display: block;
  min-width: 100%;
}

.nested-box {
  min-width: 100%;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  padding-bottom: 0;
  color: var(--bulma-text);
  box-shadow: none;
}

.nested-box:last-child {
  padding-bottom: 1rem;
}

.nested-title {
  font-weight: 600;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--bulma-primary);
}

.nested-wrap .tabulator-placeholder-contents {
  font-size: 0.95rem !important;
  font-weight: 450 !important;
}

.product-bundle-items-table .tabulator-tableholder,
.product-bundle-items-summary-table .tabulator-tableholder {
  scrollbar-gutter: stable;
}

/* Toggle cell */
.toggle-cell {
  cursor: pointer;
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  color: var(--bulma-primary);
  user-select: none;
}

.toggle-cell:hover {
  background-color: var(--bulma-primary-soft);
  color: var(--bulma-primary);
}

.toggle-cell iconify-icon {
  font-size: 1.2rem;
  vertical-align: middle;
}

.toggle-cell.is-loading {
  display: flex;
  align-items: center;
  justify-content: center;
}

#table .tabulator-cell.toggle-cell {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#table .tabulator-cell.toggle-cell .toggle-cell {
  height: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

#table .tabulator-cell.toggle-cell iconify-icon {
  display: block;
  line-height: 1;
  vertical-align: middle;
}

#table .tabulator-cell.toggle-cell .toggle-cell.is-loading {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Kein Pointer auf ganzen Rows */
.tabulator-row,
.tabulator-row:hover {
  cursor: default !important;
}

/* Detail holder animation */
.js-detail-holder {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    max-height 220ms ease,
    opacity 180ms ease,
    transform 180ms ease;
}

.js-detail-holder.is-open {
  opacity: 1;
  transform: translateY(0);
}

.js-detail-holder.is-preparing {
  visibility: hidden;
  position: relative;
}

/* Light theme deviations */
html[data-theme="light"] .nested-wrap {
  padding: 0.5rem 0.75rem 0.75rem;
  background-color: var(--bulma-scheme-main);
}

html[data-theme="light"] .nested-box {
  border: 0 solid var(--bulma-border);
}

/* Row highlight animation */
@keyframes tabRowFlashBg {
  0% {
    background-color: rgba(255, 230, 120, 0.42);
  }
  100% {
    background-color: rgba(255, 230, 120, 0);
  }
}

.tabulator-row.tabulator-highlight .tabulator-cell {
  animation: tabRowFlashBg var(--flash-ms, 2800ms) ease-out;
  outline: 1px solid transparent;
  outline-offset: -1px;
}