html {
  font-size: 16px;
}

body {
  font-family: "InterVariable", sans-serif;
  font-size: 16px;
  line-height: 1.4;
  background-color: #ffffff;
}

/* === FORM STACK === */
.bgs-form {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  max-width: 1100px;
  --bgs-form-control-height: 2.5rem;
}

.bgs-form-sm {
  max-width: 550px;
}
.bgs-form-md {
  max-width: 750px;
}
.bgs-form-lg {
  max-width: 1100px;
}

/* === GRID LAYOUT === */
.bgs-form-grid {
  display: grid;
  gap: 1.5rem 3rem;
  grid-template-columns: repeat(12, 1fr);
}

.bgs-form-grid--align-end {
  align-items: end;
}

/* Fluid variant of .bgs-form-grid: use together with .bgs-form-grid, e.g. class="bgs-form-grid bgs-form-grid--fluid".
Tracks shrink instead of overflowing, and collapse to a single column via a container query (based on the grid's own
available width, not the viewport) once span-4/6/8/12 columns can no longer fit their content.
Wrap the grid in a .bgs-form-grid-container ancestor for the container query to work. */
.bgs-form-grid-container {
  container-type: inline-size;
}

.bgs-form-grid--fluid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

@container (max-width: 936px) {
  .bgs-form-grid--fluid {
    grid-template-columns: 1fr;
  }

  .bgs-form-grid--fluid > * {
    grid-column: span 1 !important;
  }
}

/* Default: 1 columns per row
Its also possible to use .bgs-form-field without being wrapped in a .bgs-form-grid,
then it will automatically take the full width of the container. */
.bgs-form-field {
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  grid-column: span 12; /* default full width */
}

.bgs-form-label {
  font-weight: 600;
  font-size: 0.85rem !important;
  display: flex;
  align-items: center;
}

.bgs-form-field > .ui-inputfield,
.bgs-form-field > .ui-inputnumber > .ui-inputfield,
.bgs-form-field > .ui-selectonemenu,
.bgs-form-field > .ui-selectcheckboxmenu,
.bgs-form-field > .p-datepicker > .ui-inputfield,
.bgs-form-field > .ui-autocomplete > .ui-inputfield {
  min-height: var(--bgs-form-control-height);
}

.infoLabelIcon {
  display: inline-flex;
  align-items: center;
  margin-left: 0.25rem;
  color: var(--info-tooltip-color);
  cursor: pointer;
  line-height: 1;
  vertical-align: middle;
}

.pi.infoLabelIcon {
  font-size: 1.1rem;
}

.bgs-outline {
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 1rem;
}

/* Rounds the PrimeFaces panel content border (theme.css) to match .bgs-outline instead of stacking a second border */
body .ui-panel-notitle .ui-panel-content {
  border-radius: 8px;
}

/* === COLUMN UTILITIES === */
.span-3 {
  grid-column: span 3;
} /* 1/4 width */
.span-4 {
  grid-column: span 4;
} /* 1/3 width */
.span-6 {
  grid-column: span 6;
} /* 1/2 width */
.span-8 {
  grid-column: span 8;
} /* 2/3 width */
.span-12 {
  grid-column: span 12;
} /* full width */

/* === MEDIA QUERY BREAKPOINT === */
@media (max-width: 720px) {
  .bgs-form-grid {
    grid-template-columns: 1fr;
  }

  .bgs-form-field,
  .span-4,
  .span-6,
  .span-8,
  .span-12 {
    grid-column: span 1;
  }

  .ui-dialog {
    width: calc(100vw - 2rem) !important;
  }
}

.bgs-form-buttons {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 3rem;
}
.bgs-form-buttons .bgs-form-resetlink,
.bgs-form-buttons .bgs-form-resetlink:hover {
  font-size: 0.875rem;
  color: #6c757d;
}

/* === DATA GRID & NEW PANELS=== */
.bgs-data-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0.25rem 0;
}
.bgs-data-grid dt {
  font-weight: 600;
  white-space: normal;
}
.bgs-data-grid.sprache-texte-grid dt {
  font-size: 0.8rem;
  font-weight: 600;
  color: gray;
}
.bgs-data-grid dd {
  font-size: 1.125rem;
  margin: 0;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.bgs-data-grid dd a,
.bgs-data-grid dd .ui-link,
.bgs-data-grid dd .ui-commandlink {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.bgs-data-grid--stacked {
  grid-template-columns: 1fr;
  gap: 0.2rem 0;
}

.bgs-data-grid--stacked dt {
  font-weight: 600;
  white-space: normal;
  font-size: 0.9rem;
}
.bgs-data-grid--stacked dd {
  margin-bottom: 1rem;
}
.bgs-data-grid.sprache-texte-grid dd {
  margin-bottom: 0.25rem;
}

.bgs-data-grid--stacked.bgs-data-grid--2col {
  grid-template-columns: repeat(2, 1fr);
  column-gap: 2rem;
}

.bgs-data-grid--stacked.bgs-data-grid--2col > div {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  max-width: 500px;
}

.bgs-data-grid--stacked.bgs-data-grid--2col > div.bgs-data-grid__item--full-width {
  grid-column: 1 / -1;
  max-width: none;
}

.bgs-data-grid--stacked.bgs-data-grid--2col > div > dd {
  margin-bottom: 1rem;
}

/* Sprachversionen (DE/FR/...) nebeneinander statt untereinander */
.sprache-texte-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.5rem 2rem;
}

@media (max-width: 720px) {
  .bgs-data-grid {
    grid-template-columns: 1fr;
    gap: 0.25rem 0;
  }

  .bgs-data-grid dd {
    margin-bottom: 0.75rem;
  }

  .bgs-data-grid dd:last-child {
    margin-bottom: 0;
  }
}

body .ui-button.ui-button-flat {
  color: var(--text-color);
}

/* === overrides === */

/* Hide empty p:message components that have no content */
body .ui-message:empty {
  display: none;
}

body .ui-chkbox {
  align-items: start;
}

body .ui-chkbox .ui-chkbox-box {
  background: none;
}

body .ui-chkbox .ui-chkbox-box.ui-state-active,
body .ui-chkbox .ui-chkbox-box.ui-state-active.ui-state-hover {
  background: none;
  border-color: #ced4da;
}

body .ui-chkbox .ui-chkbox-box .ui-chkbox-icon.ui-icon-check:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: var(--primary-color);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.2287 6.60355C21.6193 6.99407 21.6193 7.62723 21.2287 8.01776L10.2559 18.9906C9.86788 19.3786 9.23962 19.3814 8.84811 18.9969L2.66257 12.9218C2.26855 12.5349 2.26284 11.9017 2.64983 11.5077L3.35054 10.7942C3.73753 10.4002 4.37067 10.3945 4.7647 10.7815L9.53613 15.4677L19.1074 5.89644C19.4979 5.50592 20.1311 5.50591 20.5216 5.89644L21.2287 6.60355Z'/%3E%3C/svg%3E")
    no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.2287 6.60355C21.6193 6.99407 21.6193 7.62723 21.2287 8.01776L10.2559 18.9906C9.86788 19.3786 9.23962 19.3814 8.84811 18.9969L2.66257 12.9218C2.26855 12.5349 2.26284 11.9017 2.64983 11.5077L3.35054 10.7942C3.73753 10.4002 4.37067 10.3945 4.7647 10.7815L9.53613 15.4677L19.1074 5.89644C19.4979 5.50592 20.1311 5.50591 20.5216 5.89644L21.2287 6.60355Z'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

body .ui-chkbox .ui-chkbox-box .ui-chkbox-icon {
  margin-left: unset;
  margin-top: unset;
  transform: translate(-50%, calc(-50% + 2px));
}

body .ui-selectcheckboxmenu-item .ui-chkbox .ui-chkbox-box .ui-chkbox-icon {
  transform: translate(-50%, calc(-50%));
}

body .ui-selectoneradio .ui-g .ui-g-12,
body .ui-selectmanycheckbox .ui-g .ui-g-12 {
  padding-left: 0;
  padding-bottom: 0;
}

.bgs-form-field .ui-selectonemenu .ui-selectonemenu-label {
  /* to make the width of the select menu not jump when selecting longer texts */
  width: 0;
  min-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* bgs:inputSelectMultiple --> p:selectCheckboxMenu */
body .ui-selectcheckboxmenu {
  min-height: var(--bgs-form-control-height, 2.5rem);
}

body .ui-selectcheckboxmenu .ui-selectcheckboxmenu-multiple-container.ui-inputfield {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-height: calc(var(--bgs-form-control-height, 2.5rem) - 2px);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

body .ui-selectcheckboxmenu .ui-selectcheckboxmenu-multiple-container .ui-selectcheckboxmenu-token {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.125rem 0.5rem;
  margin: 0;
}
body .ui-selectcheckboxmenu .ui-selectcheckboxmenu-multiple-container .ui-selectcheckboxmenu-token .ui-selectcheckboxmenu-token-label {
  padding: 0;
}
body .ui-selectcheckboxmenu .ui-selectcheckboxmenu-multiple-container .ui-selectcheckboxmenu-token .ui-selectcheckboxmenu-token-icon {
  position: unset;
  margin: unset;
  order: 1;
}

/* DATEPICKER */
body .p-datepicker {
  display: flex;
}

body .p-datepicker .ui-datepicker-trigger.ui-button,
body .p-datepicker .ui-datepicker-trigger.ui-button:focus {
  background: #fff;
  color: var(--primary-color);
  border-color: #ced4da;
  border-left-width: 0;
}

body .p-datepicker .ui-datepicker-trigger.ui-button:hover,
body .p-datepicker .ui-datepicker-trigger.ui-button.ui-state-hover {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}

body .p-datepicker .ui-datepicker-trigger.ui-button .ui-icon,
body .p-datepicker .ui-datepicker-trigger.ui-button:focus .ui-icon {
  color: var(--primary-color);
}

body .p-datepicker .ui-datepicker-trigger.ui-button:hover .ui-icon,
body .p-datepicker .ui-datepicker-trigger.ui-button.ui-state-hover .ui-icon {
  color: #fff;
}

body .ui-calendar.ui-trigger-calendar input.hasDatepicker {
  flex-grow: 1;
}

/* PrimeFaces inputNumber renders a wrapper element that needs explicit width handling. */
.bgs-form-field .ui-inputnumber {
  display: flex;
  width: 100%;
}

.bgs-form-field .ui-inputnumber .ui-inputfield {
  width: 100%;
}

.ui-autocomplete,
.ui-autocomplete input {
  width: 100%;
}

/* FILE UPLOAD */

.fileupload-file-entry {
  padding: 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: space-between;
  width: 100%;
}

.document-card-empty {
  color: var(--text-color-secondary);
  font-style: italic;
}

.document-card-list .ui-datalist-content,
.document-card-list .ui-datalist-data {
  margin: 0;
  padding: 0;
  list-style: none;
}

.document-card-list dd.document-card-category {
  margin-bottom: 0.5rem;
}

.document-card-list > div:last-child dd.document-card-category {
  margin-bottom: 0;
}

.document-card-entry {
  margin-bottom: 0.25rem;
  padding-left: 0;
}

/* file-upload buttonOnly: nur 1 Button anzeigen  */
body .ui-fileupload.buttonOnly .ui-fileupload-content {
  /* wird in uploadDokument.xml per js auf table gesetzt, wenn hier auf table gesetzt wird, flackert es beim Seiten-Oeffnen, weil zuerst eine leere Fehlermeldung angezeigt wird (ev PF-Fehler) */
  display: none;
  position: absolute;
  top: 30px;
  right: 30px;
  z-index: 999;
}

body .ui-fileupload.buttonOnly .ui-fileupload-content .ui-fileupload-files {
  margin: 0px;
}

body .ui-fileupload.buttonOnly .ui-fileupload-buttonbar {
  background: none;
  border: none;
  padding: 0;
  display: table;
}

body .ui-fileupload.buttonOnly.icon-only .ui-fileupload-buttonbar .ui-button.ui-fileupload-choose {
  width: 2.357rem;
}

body .ui-fileupload .ui-button {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 0.375rem 0.75rem;
}

body .ui-fileupload .ui-button .ui-button-text {
  padding: 0;
}

body .ui-fileupload.ui-button-secondary .ui-button:not(.ui-state-hover) {
  background-color: white;
  color: var(--primary-color);
}

body .ui-fileupload .ui-button .ui-icon {
  position: relative;
  top: unset;
  left: unset;
  margin: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body .ui-fileupload .ui-button .ui-icon::before {
  font-size: 1.5rem;
}

.ui-button.btn-doc-remove {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  color: var(--text-color-secondary);
  transition: color 0.2s;
}
.ui-button.btn-doc-remove:hover,
.ui-button.btn-doc-remove:focus {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--primary-color) !important;
}