/* P0: responsive and touch-safe presentation for the local demonstration copy. */
html, body, #root, .app { max-width: 100%; overflow-x: hidden; }
.main, .main > *, .card { min-width: 0; }

.vitaqm-brand-subtitle {
  display: block !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.15 !important;
}

.vitaqm-table-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  contain: layout paint;
  overflow-x: auto !important;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.card:has(> .vitaqm-table-scroll) { overflow: hidden; }
.vitaqm-table-scroll > table { min-width: 1160px; }
.vitaqm-table-scroll > table th:nth-child(2),
.vitaqm-table-scroll > table td:nth-child(2) { min-width: 190px; }
.vitaqm-table-scroll > table th:nth-child(3),
.vitaqm-table-scroll > table td:nth-child(3),
.vitaqm-table-scroll > table th:nth-child(4),
.vitaqm-table-scroll > table td:nth-child(4) { min-width: 130px; }
.vitaqm-table-scroll > table th:nth-child(5),
.vitaqm-table-scroll > table td:nth-child(5) { min-width: 140px; }
.vitaqm-table-scroll > table th:nth-child(7),
.vitaqm-table-scroll > table td:nth-child(7) { min-width: 130px; }
.vitaqm-table-scroll > table th:nth-child(8),
.vitaqm-table-scroll > table td:nth-child(8) { min-width: 210px; }
.vitaqm-table-scroll > table th:last-child,
.vitaqm-table-scroll > table td:last-child { min-width: 390px; }

.vitaqm-search-clear {
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px !important;
  height: 44px;
  padding: 0 !important;
  border: 1px solid #cbd8df;
  border-radius: 9px;
  background: #fff;
  color: #425f6a;
  font-size: 24px;
  line-height: 1;
}

.vitaqm-equipment-actions {
  order: 1;
  width: auto;
  margin-left: auto;
  justify-content: flex-end !important;
  margin: 0;
}
.vitaqm-equipment-actions > .row { flex-wrap: wrap; }
.head:has(.vitaqm-equipment-actions) { align-items: flex-end; }
.head:has(.vitaqm-equipment-actions) > :first-child { order: 0; }
.head:has(.vitaqm-equipment-actions) > .equipment-projection-summary {
  order: 2;
  flex: 0 0 100%;
}
.vitaqm-search-clear:hover,
.vitaqm-search-clear:focus-visible { border-color: #268c83; color: #166c65; outline: 3px solid rgba(38,140,131,.15); }

.vitaqm-native-select-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.vitaqm-touch-select {
  width: 100%;
  min-height: 44px;
  padding: 8px 36px 8px 12px;
  border: 1px solid #c8d6dd;
  border-radius: 9px;
  background: #fff;
  color: #19333d;
  text-align: left;
  position: relative;
}
.vitaqm-touch-select::after {
  content: "▾";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}
.vitaqm-touch-combobox[aria-expanded="true"] { border-color: #268c83 !important; box-shadow: 0 0 0 3px rgba(38,140,131,.14) !important; }
.vitaqm-touch-picker {
  position: fixed;
  z-index: 100000;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  border: 1px solid #b8ccd3;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 16px 44px rgba(24,54,66,.24);
}
.vitaqm-touch-picker-option {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #18343e;
  text-align: left;
  white-space: normal;
}
.vitaqm-touch-picker-option:hover,
.vitaqm-touch-picker-option:focus-visible { background: #e8f5f3; color: #0e625c; outline: none; }
.vitaqm-touch-picker-empty { padding: 14px 12px; color: #637982; }

/* Ein Fenster darf nie aus dem Bild ragen -- das gilt auf jedem Geraet. */
dialog,
[role="dialog"] {
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100dvh - 24px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

/* Die feste Obergrenze von 720 px gehoert auf kleine Bildschirme, nicht auf
   jeden.
   Aus dem Betrieb gemeldet am 14.09.2026 (Rueckmeldungen 4, 5, 6 und 9):
   „Das Aufploppende Fenster ist zu klein. Einige Zeilen und Spalten sind
   nicht zu sehen."
   Nachgemessen auf einem 1600 px breiten Bildschirm: Das Projektionsfenster
   der Geraeteliste war 720 px breit, die Tabelle darin 2920 px (20 Spalten),
   und es rollte nicht waagerecht. Die Spalten waren nicht erreichbar. Das
   eigene CSS des Fensters sagt `min(1540px, 100vw - 48px)` -- diese Regel
   hier hat es mit `!important` ueberschrieben, und zwar jedes Fenster der
   Anwendung. */
@media (max-width: 900px) {
  dialog,
  [role="dialog"] {
    max-width: min(calc(100vw - 24px), 720px) !important;
  }
}

.vitaqm-image-lightbox {
  width: min(1100px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 52px 18px 16px;
  border: 0;
  border-radius: 14px;
  background: #102029;
  color: #fff;
}
.vitaqm-image-lightbox::backdrop { background: rgba(8,22,29,.78); }
.vitaqm-image-lightbox img { display: block; max-width: 100%; max-height: calc(100dvh - 130px); margin: 0 auto; object-fit: contain; }
.vitaqm-image-lightbox p { margin: 10px 0 0; text-align: center; }
.vitaqm-image-lightbox-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 9px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 26px;
}

.vp-svg,
.plan-svg,
[data-floorplan] svg { touch-action: none !important; user-select: none; -webkit-user-select: none; }

@media (max-width: 1500px) {
  .equipment-projection-summary { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .equipment-projection-metric { min-height: 72px; }
  .equipment-legacy-source-table th:nth-child(n+4):nth-child(-n+6),
  .equipment-legacy-source-table td:nth-child(n+4):nth-child(-n+6) {
    position: static !important;
    left: auto !important;
    box-shadow: none !important;
  }
}

@media (max-width: 980px) {
  .equipment-projection-summary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  dialog, [role="dialog"] { width: calc(100vw - 16px) !important; max-width: none !important; }
  .vitaqm-equipment-actions { width: 100%; justify-content: flex-start !important; margin-left: 0; }
}

@media (pointer: coarse) {
  button, [role="button"], a, input, select, textarea { min-height: 44px; }
  .equipment-row-clickable td { padding-top: 12px; padding-bottom: 12px; }
  .vitaqm-touch-picker-option { min-height: 50px; font-size: 16px; }
  main img { touch-action: manipulation; }
}

@media (max-height: 780px) {
  dialog, [role="dialog"] { max-height: calc(100dvh - 12px) !important; }
  .vitaqm-touch-picker { max-height: min(280px, 42dvh) !important; }
}