/* Variables */
:root {
  /* Colors */
  --base-bg-color: #f9f9f9;
  --highlight-color: #f5a0ac;
  --highlight-color-table: #f6d2d7;
  --clicked-color: #f5a0ac;
  --not-clickable-color: #d5d5d5;
  --border-color: #e8eae9;
  --slider-color: #812122;
  --slider-bg-color: #e8e8e8;
  --filtered-color: #808080;
  --filtered-hover-color: #292929;

  --translatey: -20%;

  /* Neutral Colors */
  --white: #ffffff;
  --gray-100: #fbfbfb;
  --gray-200: #f9f9f9;
  --gray-300: #f8f8f8;
  --gray-400: #ececec;
  --gray-500: #e0e0e0;
  --gray-600: #cccccc;
  --gray-700: #666666;
  --gray-800: #333333;
  --gray-900: #1a1a1a;
  --black: #000000;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;

  /* Sizes */
  --slider-handle-size: 20px;
  --slider-height: 4px;
  --tooltip-font-size: 12px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* SVG Base Styles */
#lyma-isometrie-svg,
#lyma-isometrie-svg g,
#lyma-isometrie-svg path,
#lyma-isometrie-svg rect,
#lyma-isometrie-svg polygon,
#lyma-isometrie-svg circle,
#lyma-isometrie-svg polyline,
#lyma-isometrie-svg use,
#lyma-isometrie-svg image,
#lyma-isometrie-svg line,
#lyma-isometrie-svg text {
  transition: all var(--transition-fast) !important;
  will-change: opacity, transform, fill, stroke;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* Basic Setup */
/* g * {
  fill: var(--base-bg-color) !important;
} */

/* Apartment Groups */
g[id^="A_"] {
  cursor: pointer;
}

g[id^="A_"],
g[id^="A_"] * {
  fill: inherit;
  transition: fill var(--transition-fast), stroke var(--transition-fast),
    opacity var(--transition-fast), transform var(--transition-fast),
    filter var(--transition-fast) !important;
}

/* g[id^="A_"].clicked {
  transform: translatey(-20px);
} */

g[id^="A_"].active {
  transform: translatey(calc(0.2 * var(--translatey)));
}

g[id^="A_"].clicked * {
  stroke-width: 3px !important;
  fill: var(--clicked-color) !important;
}

/* Environment Groups */
g[id^="E_"] {
  transition: all var(--transition-fast) !important;
  will-change: opacity, transform, fill, stroke;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

#lyma-isometrie-svg.filtering-active g[id^="E_"],
#lyma-isometrie-svg.clicked g[id^="E_"] {
  fill: var(--clicked-color) !important;
  opacity: 0.4;
  transition: fill var(--transition-fast), opacity var(--transition-fast);
  /* transform var(--transition-fast) !important;
  transform: translateY(var(--translatey)); */
}

#lyma-isometrie-svg.filtering-active g[id^="E_"] {
  opacity: 0.3;
}

#lyma-isometrie-svg.filtering-active g[id^="E_"]:hover,
#lyma-isometrie-svg.clicked g[id^="E_"]:hover {
  opacity: 0.6;
}

/* Floor Groups */
g[id^="F_"],
.floor {
  transform: translateY(0);
  transition: transform var(--transition-fast) !important;
}

g[id^="F_"].active {
  transform: translateY(calc(-0.1 * var(--translatey)));
}

g[id^="F_"].active ~ g,
g[id^="F_"].clicked ~ g {
  /* transform: translateY(var(--translatey)); */
  transition: transform var(--transition-fast) !important;
}

.floor.active {
  transform: translateY(var(--translatey));
  transition: transform var(--transition-normal) !important;
}

/* Filter States */

#lyma-isometrie-svg.clicked g[id^="A_"]:not(.clicked) * {
  fill: var(--not-clickable-color) !important;
  /* stroke: var(--gray-700) !important; */
}

g[id^="A_"].filtered-out * {
  /* fill: var(--gray-300) !important; */
  transition: all var(--transition-fast);
  /* transform: translatey(60px); */
  stroke: var(--gray-700) !important;
}

/* g[id^="A_"].filtered-out:hover * {
  /* fill: var(--gray-500) !important; 
  stroke: var(--gray-900) !important;
} */

g[id^="A_"].filtered-out.clicked * {
  fill: var(--highlight-color) !important;
  opacity: 1;
  stroke-width: 6px !important;
}

g[id^="A_"].filtered-out.active * {
  fill: #e5bbbb !important;
  cursor: not-allowed !important;
}

/* Table Styles */
.apartment-row {
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.apartment-row:not(.status-frei) {
  color: var(--gray-700);
}

.apartment-row.active {
  background-color: var(--highlight-color-table) !important;
}

.apartment-row:not(.status-frei).active {
  background-color: var(--gray-500) !important;
}

.status-indicator.status-2etappe {
  text-transform: capitalize;
}

.apartment-row.clicked {
  background-color: var(--gray-400) !important;
}

/* Mobile Cards */
.lyma-apartment-grid {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

.apartment-card {
  /* background: #fff; */
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  padding: 1rem;
}

.status-free {
  color: #107a53;
  font-weight: bold;
}

.status-reserved {
  color: #8d770b;
  font-weight: bold;
}

.status-unavailable {
  color: #7e130b;
  font-weight: bold;
}

.apartment-card-title {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.apartment-specs {
  display: grid;
  gap: 0.5rem;
}

.apartment-spec {
  display: flex;
  justify-content: space-between;
}

@media (max-width: 1400px) {
  .lyma-apartments-table .uk-table {
    display: none;
  }
}

@media (min-width: 1400px) {
  .lyma-apartment-grid {
    display: none;
  }
}

/* Accordion Content */
.accordion-content {
  background-color: var(--gray-300);
  padding: 15px;
  display: table-row;
  overflow: hidden;
  /* transition: all var(--transition-fast); */
}

.accordion-content td {
  padding: 0 !important;
}

.apartment-details {
  padding: 15px;
  /* background-color: var(--gray-200); */
  border-top: 1px solid var(--gray-600);
  width: 100%;
  border: transparent !important;
}

.apartment-details > div:nth-child(2) {
  padding-right: 30px;
}

/* Slider Base Styles */
.lyma-slider {
  height: var(--slider-height) !important;
  margin: 20px 0 40px 0;
}

.lyma-slider .noUi-background,
.lyma-slider .noUi-base {
  background-color: var(--slider-bg-color) !important;
  height: var(--slider-height) !important;
}

.lyma-slider .noUi-connect {
  background-color: var(--slider-color) !important;
  height: var(--slider-height) !important;
}

/* Slider Handle */
.lyma-slider .noUi-handle,
.noUi-handle {
  border-radius: 50% !important;
  background: var(--white) !important;
  border: 2px solid var(--slider-color) !important;
  box-shadow: var(--shadow-md) !important;
  width: var(--slider-handle-size) !important;
  height: var(--slider-handle-size) !important;
  right: calc(var(--slider-handle-size) / -2) !important;
  top: calc((var(--slider-handle-size) - var(--slider-height)) / -2) !important;
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.lyma-slider .noUi-handle:hover {
  transform: scale(1.1);
}

.lyma-slider .noUi-handle:active {
  transform: scale(0.95);
}

.noUi-handle:before,
.noUi-handle:after {
  display: none;
}

/* Slider Tooltips */
.noUi-tooltip {
  display: block !important;
  position: absolute;
  background: var(--white);
  color: #333;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--gray-600);
  font-size: var(--tooltip-font-size);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transform: translate(-50%, 0);
  left: 50%;
  bottom: -30px;
  z-index: 2;
}

/* Slider Pips */
.lyma-slider .noUi-pips {
  padding-top: 5px;
  height: 40px;
}

.lyma-slider .noUi-value {
  top: 10px;
  font-size: var(--tooltip-font-size);
  color: var(--gray-700);
  white-space: nowrap;
}

.lyma-slider .noUi-value:nth-child(2n) {
  display: block;
}

.lyma-slider .noUi-marker {
  height: 5px;
  width: 1px;
  background: var(--gray-600);
}

.lyma-slider .noUi-marker-large {
  height: 8px;
  background: var(--gray-700);
}

/* Filtered out Notification */
.uk-notification-message {
  background-color: var(--white);
  border-radius: 4px;
  box-shadow: var(--shadow-md);
  border-left: 4px solid var(--slider-color);
  padding: 15px;
}

.uk-notification-message [uk-icon="ban"] {
  color: var(--slider-color);
}

/* Table Sorting Styles */
.lyma-apartments-table th.sortable {
  position: relative;
  padding-right: 25px;
}

.lyma-apartments-table th.sortable:hover {
  background-color: var(--gray-200);
}

.lyma-apartments-table th .sort-indicator {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.3;
  transition: all var(--transition-fast);
}

.lyma-apartments-table th.sorting-asc .sort-indicator,
.lyma-apartments-table th.sorting-desc .sort-indicator {
  opacity: 1;
}

.lyma-apartments-table th.sorting-asc,
.lyma-apartments-table th.sorting-desc {
  background-color: var(--gray-200);
}

/* Animation for row reordering */
.lyma-apartments-table tbody tr {
  transition: background-color var(--transition-fast);
}

/* Reset filter button in notification */
.uk-notification-message .uk-button {
  background-color: var(--white);
  border: 1px solid var(--slider-color);
  color: var(--slider-color);
  transition: all var(--transition-fast);
}

.uk-notification-message .uk-button:hover {
  background-color: var(--slider-color);
  color: var(--white);
}

/* Custom Checkbox */
.checkbox-wrapper .tgl {
  display: none;
}

.checkbox-wrapper .tgl + .tgl-btn {
  outline: 0;
  display: block;
  width: 4em;
  height: 2em;
  position: relative;
  cursor: pointer;
  user-select: none;
  background: var(--gray-100);
  border-radius: 2em;
  padding: 2px;
  transition: all 0.4s ease;
  border: 1px solid var(--border-color);
}

.checkbox-wrapper .tgl + .tgl-btn:after {
  position: absolute;
  border-radius: 2em;
  background: var(--gray-100);
  transition: all 0.3s ease-in-out;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
  content: "";
  display: block;
  width: 50%;
  height: calc(100% - 4px);
  left: 2px;
  top: 2px;
}

.checkbox-wrapper .tgl:checked + .tgl-btn {
  background: var(--slider-color);
}

.checkbox-wrapper .tgl:checked + .tgl-btn:after {
  left: calc(50% - 2px);
}

.checkbox-wrapper .tgl + .tgl-btn:hover:after {
  will-change: transform;
}

.checkbox-wrapper .tgl + .tgl-btn:active {
  box-shadow: inset 0 0 0 2em var(--border-color);
}

.checkbox-wrapper .tgl + .tgl-btn:active:after {
  width: 55%;
}

.checkbox-wrapper .tgl:checked + .tgl-btn:active:after {
  left: calc(45% - 2px);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .noUi-tooltip {
    font-size: calc(var(--tooltip-font-size) - 1px);
    padding: 2px 6px;
  }

  .noUi-handle {
    height: calc(var(--slider-handle-size) - 4px) !important;
    width: calc(var(--slider-handle-size) - 4px) !important;
  }
}

.lyma-apartments-table td {
  white-space: nowrap;
  font-size: 16px;
}

.lyma-apartments-table .uk-table-shrink {
  width: 1%;
  white-space: nowrap;
}

/* Nur der bezeichnung darf umbrechen */
.lyma-apartments-table td:nth-child(2) {
  white-space: normal;
}

.apartment-details {
  padding: 20px;
  /* height:0px; */
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

.apartment-details .uk-button {
  min-width: 130px;
  padding: 0 20px;
}

.apartment-details .uk-button + .uk-button {
  margin-left: 10px;
}

@media (max-width: 960px) {
  .apartment-details .uk-flex-right {
    margin-top: 15px;
  }
}

.accordion-content {
  background: var(--gray-300);
}

.accordion-content td {
  padding: 0 !important;
}

.apartment-details {
  padding: 20px 0px 20px 0px !important;
  background-color: var(--gray-200);
  border-top: 1px solid var(--gray-400);
}
.apartment-details .uk-table td {
  font-size: 14px;
  padding: 16px 6px !important;
}

/* Wichtig für die korrekte Ausrichtung */
.uk-table tr.accordion-content td {
  padding: 0 !important;
}

.uk-table .apartment-details {
  margin: 0;
}

/* Buttons styling */
.apartment-details .uk-button {
  min-width: 130px;
}

.apartment-details .uk-button + .uk-button {
  margin-left: 10px;
}

/* Hervorhebung der aktiven Zeile */
.apartment-row.uk-active {
  background-color: var(--gray-100) !important;
  position: relative;
  z-index: 1;
}

/* Hervorhebung der ausgeklappten Details */
.accordion-content.uk-active {
  background-color: var(--gray-100);
}

/* Hover-Effekt für bessere Interaktivität */
.apartment-row:hover {
  background-color: var(--gray-200);
  cursor: pointer;
}

/* Smooth transition für die Hervorhebung */
.apartment-row,
.accordion-content {
  transition: all var(--transition-fast);
}

/* Grundstil für die Zeilen */
.apartment-row {
  transition: all var(--transition-fast);
}

/* Angeklickte Zeile */
.apartment-row.clicked {
  background-color: var(--highlight-color-table) !important;
}

/* Aufgeklappter Bereich nach geklickter Zeile */
.apartment-row.clicked + .accordion-content {
  background-color: var(--highlight-color-table) !important;
}

.apartment-row.clicked + .accordion-content .apartment-details {
  background-color: var(--highlight-color-table) !important;
}

/* Details im aufgeklappten Bereich
.apartment-row.clicked + .accordion-content .apartment-details {
  padding: 20px 30px;
} */

/* Button-Styling */
.apartment-details .uk-button {
  min-width: 130px;
}

.apartment-details .uk-button + .uk-button {
  margin-left: 10px;
}

/* Table Sorting Styles */
.lyma-apartments-table th.sortable {
  position: relative;
  padding-right: 25px;
  cursor: pointer;
}

.lyma-apartments-table th .sort-indicator {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.3;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
}

/* Größerer Icon */
.lyma-apartments-table th .sort-indicator[uk-icon] {
  width: 20px;
  height: 20px;
}

/* Active sort states */
.lyma-apartments-table th.sorting-asc .sort-indicator,
.lyma-apartments-table th.sorting-desc .sort-indicator {
  opacity: 1;
}

.lyma-apartments-table th.sorting-asc,
.lyma-apartments-table th.sorting-desc {
  background-color: var(--gray-200);
}

/* Vertikale Zentrierung des Headers */
.lyma-apartments-table th {
  vertical-align: middle;
  white-space: nowrap;
  line-height: 1.2;
  height: 40px; /* Feste Höhe für konsistentes Aussehen */
}

/* Active class at the end for overwrite */
g[id^="A_"].active * {
  fill: var(--highlight-color) !important;
}

/* 8. Responsive
---------------------------------------- */
@media (max-width: 960px) {
  .apartment-details .uk-flex-right {
    margin-top: 15px;
  }
}

@media (max-width: 768px) {
  .noUi-tooltip {
    font-size: calc(var(--tooltip-font-size) - 1px);
    padding: 2px 6px;
  }

  .noUi-handle {
    height: calc(var(--slider-handle-size) - 4px) !important;
    width: calc(var(--slider-handle-size) - 4px) !important;
  }
}

/*CUSTOM VISTARA*/

g[id^="F_Ebene0"].active ~ rect {
  opacity: 0.1;
  transition: fill var(--transition-fast);
}

g[id^="F_Ebene0"].active ~ g {
  opacity: 0.1;
  transition: fill var(--transition-fast);
}

g[id^="F_Ebene0"].active ~ g {
  opacity: 0.1;
  transition: fill var(--transition-fast);
}

/* g[id^="F_Ebene0"] * {
  stroke: var(--white);
}

g[id^="F_Ebene0"] g[id*="PP"] * {
  stroke: var(--white);
}

g[id*="PP"].active * {
  stroke: var(--white);
  fill: var(--white) !important;
} */

/* HIde Table elements on screen sizes */
.lyma-apartments-table {
  container-type: inline-size;
  container-name: table-container;
}

.lyma-apartment-grid-container {
  container-type: inline-size;
  container-name: cards-container;
}

.uk-table-striped tbody tr.apartment-row:nth-of-type(3n) {
  background: #fffefd;
}

.lyma-apartments-table th:nth-child(8),
.lyma-apartments-table td:nth-child(8) {
  display: none !important;
}

/* Show the last two columns when container is wider than 1200px */
@container table-container (min-width: 1060px) {
  .lyma-apartments-table th:nth-child(8),
  .lyma-apartments-table th:nth-child(9),
  .lyma-apartments-table td:nth-child(8),
  .lyma-apartments-table td:nth-child(9) {
    display: table-cell !important;
  }
}

@container cards-container (min-width: 540px) {
  .lyma-apartment-grid {
    grid-template-columns: 1fr 1fr;
  }
}