/* Product detail tabs (Figma 2026-07): key/value tables styled after the
   baubook.at info pages, in baubook.info theme colors. */

/* section bar (dark) and subsection bar (light) inside the tables */
.productdetail-table tr.bb-section > th {
  background-color: var(--bs-primary, #48625e);
  color: #fff;
  font-weight: 400;
  padding: 0.5rem 0.75rem;
}

.productdetail-table tr.bb-subsection > th {
  background-color: var(--bs-secondary-bg, #e9edec);
  font-weight: 400;
  padding: 0.4rem 0.75rem;
}

/* progressive indentation: level-2 bars, level-3 bars and the data rows
   below them each move one step further right */
.productdetail-table tr.bb-subsection > th {
  padding-left: 1.25rem;
}

.productdetail-table tr.bb-level-3 > th {
  padding-left: 2.25rem;
}

.productdetail-table tr.bb-row-indent > td:first-child {
  padding-left: 2.25rem;
}

.productdetail-table tr.bb-row-indent-deep > td:first-child {
  padding-left: 3.25rem;
}

/* values right-aligned, units in their own left-aligned column */
.productdetail-table td.bb-unit {
  width: 9rem;
  text-align: left;
  padding-left: 1rem;
  white-space: nowrap;
}

/* criteria hierarchy: each level bar and its criteria step one unit
   further right */
.productdetail-table tr.bb-crit-level-0 > th,
.productdetail-table tr.bb-crit-level-0 > td:first-child {
  padding-left: 0.75rem;
}

.productdetail-table tr.bb-crit-level-1 > th,
.productdetail-table tr.bb-crit-level-1 > td:first-child {
  padding-left: 1.9rem;
}

.productdetail-table tr.bb-crit-level-2 > th,
.productdetail-table tr.bb-crit-level-2 > td:first-child {
  padding-left: 3.05rem;
}

.productdetail-table tr.bb-crit-level-3 > td:first-child {
  padding-left: 4.2rem;
}

/* criterion state like the Zentrale view: green check = fulfilled,
   grey box = relevant but not fulfilled, blue dot = individual evidence */
.bb-crit-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  margin-right: 0.6rem;
  border-radius: 3px;
  vertical-align: -0.15rem;
}

/* reset the theme's global .plone-icon rules (nav margins, 18px height,
   padding) inside the chip */
.bb-crit-status .plone-icon {
  display: block;
  width: 0.8rem;
  height: 0.8rem;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

.bb-crit-status--fulfilled {
  background: #4c9a52;
  color: #fff;
}

.bb-crit-status--unfulfilled {
  background: var(--bs-secondary-bg, #d6dcda);
  color: #000;
}

.bb-crit-status--evidence {
  background: #5b8fc9;
  border-radius: 50%;
}

/* chip legend directly below the tab bar */
.bb-crit-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
}

.bb-crit-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Anwendungsfall columns (e.g. oea Oeko-Klassen A/B): lettered chips
   leading each criterion row in place of the single status chip,
   colored by the product's fulfillment state for that application;
   "none" = the criterion is not relevant for the application */
.bb-af-cells {
  display: inline-flex;
  gap: 0.25rem;
  margin-right: 0.6rem;
}

.bb-af-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1;
}

.bb-af--fulfilled {
  background: #4c9a52;
  color: #fff;
}

/* relevant but not fulfilled paints red like the Zentrale AF header */
.bb-af--unfulfilled {
  background: #c9534f;
  color: #fff;
}

.bb-af--evidence {
  background: #5b8fc9;
  color: #fff;
}

.bb-af--none {
  background: transparent;
  border: 1px solid var(--bs-border-color, #d6dcda);
  color: var(--bs-secondary-color, #6a7370);
}

/* the "not relevant" sample chip in the legend is empty; a zero-width
   space gives it the same text baseline as the lettered chips (empty
   inline boxes would align on their bottom edge instead) */
.bb-af-cell:empty::before {
  content: "\200b";
}

/* per-platform application legend row: summary chip (green = every
   relevant criterion fulfilled) + title linking the description modal */
.productdetail-table tr.bb-af-legend > td {
  font-size: 0.875rem;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.bb-af-legend-label {
  margin-right: 0.9rem;
  color: var(--bs-secondary-color, #6a7370);
}

.bb-af-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-right: 1.4rem;
}

/* BNB/QNG Steckbrief matrix (Qualitaetsniveaus), Zentrale look:
   narrow level columns 1-5, cell filled where the level requires the
   criterion, colored by the product's fulfillment status */
.bb-bnb-matrix .bb-bnb-head > th {
  background: var(--bs-tertiary-bg, #f3f5f4);
  font-weight: 400;
}

.bb-qn-col,
.bb-qn-cell {
  width: 1.9rem;
  min-width: 1.9rem;
  text-align: center;
}

/* tight grid: small cell padding; the criterion column keeps its
   distance from the last level cell (bars keep their own padding via
   the more specific .productdetail-table rules) */
.bb-bnb-matrix > tbody > tr > th,
.bb-bnb-matrix > tbody > tr > td {
  padding: 0.15rem 0.3rem;
}

.bb-bnb-matrix > tbody > tr > th:last-child,
.bb-bnb-matrix > tbody > tr > td:last-child {
  padding-left: 0.75rem;
}

/* the level numbers 1-5 sit on the same green as fulfilled cells */
.bb-bnb-matrix .bb-bnb-head > th.bb-qn-col {
  --bs-table-bg: #bbeebb;
  --bs-table-color: #000;
  background: #bbeebb;
  color: #000;
  font-weight: 400;
  font-size: 85%;
}

.bb-qn-cell .plone-icon {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

/* bootstrap's .table cell rule (specificity 0-1-2) paints color and
   background straight onto every td -- state colors must go through its
   CSS variables to win */
.bb-qn--fulfilled {
  --bs-table-bg: #bbeebb;
  --bs-table-color: #1c7a26;
  background: #bbeebb;
  color: #1c7a26;
}

.bb-qn--unfulfilled {
  --bs-table-bg: var(--bs-secondary-bg, #d6dcda);
  --bs-table-color: #000;
  background: var(--bs-secondary-bg, #d6dcda);
  color: #000;
}

.bb-qn--evidence {
  --bs-table-bg: #cfe0f3;
  background: #cfe0f3;
}

/* "admin only" marker in the dark platform bar */
.bb-crit-admin-hint {
  font-size: 0.7rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 0.25rem;
  padding: 0.1rem 0.35rem;
  margin-left: 0.5rem;
  vertical-align: middle;
}

/* criterion numbers (Sortierung-based, e.g. "6.1.4") in a fixed slot so
   the titles line up */
.bb-crit-number {
  display: inline-block;
  padding-right: 0.75rem;
}

/* platform bars toggle their rows */
.bb-crit-toggle > th {
  cursor: pointer;
  user-select: none;
}

.bb-crit-toggle > th::after {
  content: "\25be";
  float: right;
  transition: transform 0.15s ease;
}

.bb-crit-toggle.bb-collapsed > th::after {
  transform: rotate(-90deg);
}

/* hero: product title and index above the tab navigation */
.bb-product-hero {
  margin-bottom: 1.25rem;
  gap: 0.5rem 1.5rem;
}

.bb-product-hero-title {
  font-size: 1.75rem;
  margin-bottom: 0;
}

.bb-product-hero-index {
  font-size: 1.25rem;
  color: var(--bs-secondary-color, #6c757d);
}

/* product images: horizontal strip with a fixed height. The images sit
   inside the relatedmedia markup (#related-images, optionally wrapped in
   .slick-slider), so the flex row has to live on those containers. */
.bb-product-images #related-images,
.bb-product-images #related-images .slick-slider {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.bb-product-images .image-item {
  margin-bottom: 0 !important;
}

.bb-product-images img {
  height: 110px;
  width: auto;
  object-fit: contain;
}

/* platform links flow inline instead of one per line */
.bb-platform-links a {
  display: inline-block;
  margin-right: 1rem;
}

/* retailer logos: fixed-width white cards with the centred logo, same
   look as the Haendler listing */
.bb-seller-card {
  width: 140px;
  text-decoration: none;
}

.bb-seller-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  height: 90px;
  padding: 0.5rem;
}

.bb-seller-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.bb-seller-name {
  text-align: center;
  font-size: 0.85rem;
}

/* description buttons look like quiet links (body color, dotted
   underline), color on hover */
.bb-crit-info {
  color: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
}

.bb-crit-info:hover,
.bb-crit-info:focus {
  color: var(--bs-primary, #48625e);
  text-decoration: underline;
}



/* life cycle phase matrix (modal), after the Zentrale's Lebensphasen
   popup: short codes + units on a tinted label area, white value cells
   with a fine inner grid, darker lines for the frame, the header, the
   group bars and the split between labels and values */
.bb-lca-matrix {
  --bb-grid: #d3d9d7;
  --bb-grid-strong: #8a9693;
  --bb-head-bg: #dfe6e4;
  --bb-label-bg: #f3f5f4;
  --bb-group-bg: #e3e8e6;
  --bs-table-bg: #fff;
  --bs-table-color: #000;
  --bs-border-color: var(--bb-grid);
  width: auto;
  font-size: 0.8rem;
  margin-bottom: 0;
  border: 1px solid var(--bb-grid-strong);
}

.bb-lca-matrix > :not(caption) > * > * {
  padding: 0.12rem 0.45rem;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid var(--bb-grid);
}

/* column header: phase codes bold on the tinted band, the scenario line
   smaller; a strong line closes the header */
.bb-lca-matrix > thead > tr > th {
  --bs-table-bg: var(--bb-head-bg);
  background: var(--bb-head-bg);
  font-weight: 400;
  text-align: center;
  vertical-align: bottom;
}

.bb-lca-matrix > thead > tr > th:first-child,
.bb-lca-matrix > thead > tr > th:nth-child(2) {
  text-align: left;
  font-weight: 400;
  color: var(--bs-secondary-color, #6a7370);
}

/* scenario names are single long words: a minimum column width plus
   hyphenation keeps them to a few lines (Energie-rück-gewinnung) */
.bb-lca-matrix > thead > tr:nth-child(2) > th {
  font-weight: 400;
  font-size: 0.68rem;
  line-height: 1.1;
  white-space: normal;
  min-width: 4.5rem;
  overflow-wrap: break-word;
  hyphens: auto;
  padding-top: 0;
}

.bb-lca-matrix > thead > tr:last-child > th {
  border-bottom: 2px solid var(--bb-grid-strong);
}

/* label area (code + unit) tinted, strong line towards the values */
.bb-lca-matrix > tbody > tr > td:first-child,
.bb-lca-matrix > tbody > tr > td.bb-unit {
  --bs-table-bg: var(--bb-label-bg);
  background: var(--bb-label-bg);
}

.bb-lca-matrix > :not(caption) > * > *:nth-child(2) {
  border-right: 2px solid var(--bb-grid-strong);
}

.bb-lca-matrix > tbody > tr > td.bb-unit {
  width: auto;
  padding-left: 0.45rem;
  color: var(--bs-secondary-color, #6a7370);
}

/* group bars span the grid, strong line above */
.bb-lca-matrix > tbody > tr.bb-subsection > th {
  --bs-table-bg: var(--bb-group-bg);
  background: var(--bb-group-bg);
  font-weight: 400;
  text-align: left;
  padding: 0.2rem 0.45rem;
  border-top: 2px solid var(--bb-grid-strong);
  border-right: 1px solid var(--bb-grid-strong);
}

/* values: white, right-aligned tabular numbers, row highlight on hover
   to follow a long row */
.bb-lca-matrix > tbody > tr > td.text-end {
  font-variant-numeric: tabular-nums;
}

.bb-lca-matrix > tbody > tr:not(.bb-subsection):hover > td {
  --bs-table-bg: #fbf8ea;
  background: #fbf8ea;
}

/* the opener sits in the dark section bar next to the title */
.productdetail-table tr.bb-section > th .bb-lca-matrix-btn {
  font-size: 0.75rem;
  padding: 0.1rem 0.5rem;
  white-space: nowrap;
}

button.bb-crit-info {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* description and matrix dialogs: native <dialog> in the top layer
   (stacking, Escape and focus trap are the browser's), bootstrap's
   modal-content look inside */
dialog.bb-dialog {
  /* bootstrap's .modal-content/.modal-header/.modal-body read these from
     .modal; provide them here */
  --bs-modal-padding: 1rem;
  --bs-modal-color: var(--bs-body-color, #212529);
  --bs-modal-bg: var(--bs-body-bg, #fff);
  --bs-modal-border-color: var(--bs-border-color-translucent, rgba(0, 0, 0, 0.175));
  --bs-modal-border-width: var(--bs-border-width, 1px);
  --bs-modal-border-radius: var(--bs-border-radius-lg, 0.5rem);
  --bs-modal-box-shadow: var(--bs-box-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15));
  --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg, 0.5rem) - var(--bs-border-width, 1px));
  --bs-modal-header-padding-x: 1rem;
  --bs-modal-header-padding-y: 1rem;
  --bs-modal-header-padding: 1rem 1rem;
  --bs-modal-header-border-color: var(--bs-border-color, #dee2e6);
  --bs-modal-header-border-width: var(--bs-border-width, 1px);
  --bs-modal-title-line-height: 1.5;
  width: min(100% - 2rem, 800px);
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 0;
  border-radius: var(--bs-modal-border-radius);
  background: transparent;
  color: var(--bs-modal-color);
  overflow: visible;
  /* a dialog inside a table cell must not inherit the cell's text styles */
  font-size: 1rem;
  text-align: left;
  white-space: normal;
}

dialog.bb-dialog-xl {
  width: min(100% - 2rem, 1140px);
}

dialog.bb-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

dialog.bb-dialog > .modal-content {
  max-height: calc(100vh - 2rem);
}

/* the close form sits at the right edge like bootstrap's bare button */
dialog.bb-dialog .modal-header form {
  margin: 0 0 0 auto;
}

dialog.bb-dialog .modal-title {
  font-size: 1.05rem;
  font-weight: 400;
}

dialog.bb-dialog .modal-body {
  overflow: auto;
  font-size: 0.9rem;
}

dialog.bb-dialog .modal-body > :last-child {
  margin-bottom: 0;
}

/* lock the page behind an open dialog */
body:has(dialog.bb-dialog[open]) {
  overflow: hidden;
}