/*
 * Layer-Quickmenu – 5 gestapelte Kacheln unten rechts.
 * Eigenständiges, paralleles UI-Modul, siehe
 * .proxkida/plans/2026-08-24-layer-quickmenu.md
 */

.lqm-stack {
  position: fixed;
  right: 10px;
  bottom: 40px;
  z-index: 950;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  font-family: Arial, Helvetica, sans-serif;
  -webkit-user-select: none;
  user-select: none;
}

.lqm-tile-wrap {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  /* Containing Block fuer .lqm-aufbau-subpanel (siehe dort) - bewusst
     NICHT .lqm-flyout, da dessen overflow-x:auto laut CSS-Spezifikation
     automatisch auch overflow-y:auto erzwingt und ein nach oben
     ausfahrendes Panel sonst unsichtbar abschneiden wuerde. */
  position: relative;
}

.lqm-tile {
  width: 92px;
  height: 86px;
  background: rgba(255, 255, 255, 0.96);
  border: 2px solid #2f3f55;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: box-shadow 120ms ease-out;
}

.lqm-tile:hover {
  box-shadow: 0 2px 12px rgba(0, 116, 217, 0.5);
}

.lqm-tile-wrap.lqm-open .lqm-tile {
  border-color: #0074d9;
  background: #eaf4ff;
}

.lqm-tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 3px;
  width: 100%;
  height: 44px;
}

.lqm-tile-cell {
  background: #dde5ee;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2f3f55;
  font-size: 13px;
}

.lqm-tile-cell.lqm-cell-active {
  background: #2d7dd2;
  color: #fff;
}

.lqm-tile-cell.lqm-cell-empty {
  background: transparent;
  border: 1px dashed #c3ccd8;
}

.lqm-tile-label {
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.1;
  color: #2f3f55;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lqm-flyout {
  margin-right: 8px;
  display: flex;
  flex-direction: row-reverse;
  align-items: stretch;
  gap: 6px;
  max-width: calc(100vw - 120px);
  overflow-x: auto;
  padding: 2px;
  scrollbar-width: thin;
}

.lqm-flyout-item {
  display: flex;
  flex: 0 0 86px;
  min-height: 82px;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 5px;
  cursor: pointer;
  font-size: 11px;
  color: #222;
  text-align: center;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid #b8c7dc;
  border-radius: 7px;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.28);
}

.lqm-flyout-item:hover {
  background: #eaf4ff;
  border-color: #0074d9;
}

.lqm-flyout-item.lqm-item-disabled {
  cursor: default;
  color: #9aa5b1;
}

.lqm-flyout-item.lqm-item-active {
  background: #ddecfb;
  border-color: #2d7dd2;
}

.lqm-flyout-icon {
  font-size: 18px;
  color: #2f3f55;
  flex-shrink: 0;
}

.lqm-flyout-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.lqm-flyout-text span {
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.lqm-flyout-text small {
  font-size: 10px;
  color: #b3862f;
  font-style: italic;
}

.lqm-flyout-eye {
  color: #2e8b57;
  font-size: 12px;
}

.lqm-flyout-item.lqm-item-active .lqm-flyout-eye {
  color: #2e8b57;
}

.lqm-flyout-item:not(.lqm-item-active) .lqm-flyout-eye {
  color: #9aa5b1;
}

.lqm-flyout-add {
  position: relative;
  flex: 0 0 86px;
}

.lqm-flyout-add-toggle {
  height: 82px;
  box-sizing: border-box;
  color: #0074d9;
  font-weight: bold;
}

.lqm-wms-form {
  position: absolute;
  right: 0;
  bottom: 90px;
  z-index: 2;
  width: 280px;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255, 255, 255, 0.99);
  border: 1px solid #b8c7dc;
  border-radius: 7px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.lqm-wms-form.lqm-hidden {
  display: none;
}

.lqm-wms-url-input {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 7px;
  font-size: 12px;
  border: 1px solid #b8c7dc;
  border-radius: 4px;
}

.lqm-wms-fetch-btn {
  align-self: flex-start;
  padding: 5px 12px;
  font-size: 12px;
  border: 1px solid #0074d9;
  background: #0074d9;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

.lqm-wms-fetch-btn:hover {
  background: #005fb3;
}

.lqm-wms-status {
  font-size: 11px;
  color: #555;
}

.lqm-wms-layer-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 160px;
  overflow-y: auto;
}

.lqm-wms-layer-entry {
  padding: 5px 7px;
  font-size: 11px;
  background: #f5f8fb;
  border: 1px solid #dbe3ee;
  border-radius: 4px;
  cursor: pointer;
}

.lqm-wms-layer-entry:hover {
  background: #eaf4ff;
  border-color: #0074d9;
}

/* "Aufbau"-Kachel: gruppierte Unterkategorien (z.B. "Staende" mit den
   Unterpunkten 4-/2-taegiger Markt) fahren nach oben aus einer
   Ausfahrkachel aus. Wird per JS direkt an .lqm-tile-wrap angehaengt
   (containing block, siehe dort) statt an .lqm-flyout-add - letzteres
   liegt innerhalb von .lqm-flyout, dessen overflow-x:auto ein nach oben
   ausfahrendes absolut positioniertes Element sonst clippen wuerde. */
.lqm-aufbau-subpanel {
  position: absolute;
  right: 0;
  bottom: 90px;
  z-index: 2;
  width: 210px;
  box-sizing: border-box;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(255, 255, 255, 0.99);
  border: 1px solid #b8c7dc;
  border-radius: 7px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.lqm-aufbau-subpanel.lqm-hidden {
  display: none;
}

.lqm-aufbau-subitem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: 12px;
  color: #222;
  text-align: left;
  background: #f5f8fb;
  border: 1px solid #dbe3ee;
  border-radius: 4px;
  cursor: pointer;
}

.lqm-aufbau-subitem:hover {
  background: #eaf4ff;
  border-color: #0074d9;
}

.lqm-aufbau-subitem.lqm-item-active {
  background: #ddecfb;
  border-color: #2d7dd2;
}

.lqm-aufbau-subitem .lqm-flyout-icon {
  font-size: 14px;
}

.lqm-aufbau-subitem .lqm-flyout-text {
  flex: 1 1 auto;
  align-items: flex-start;
  width: auto;
}

.lqm-aufbau-subitem.lqm-item-active .lqm-flyout-eye {
  color: #2e8b57;
}

.lqm-aufbau-subitem:not(.lqm-item-active) .lqm-flyout-eye {
  color: #9aa5b1;
}

/* DWD-Testpanel bleibt erhalten, wird aber aus dem Weg der neuen
   Kachel-Spalte inkl. aufgeklappter Liste geschoben (siehe Plan Abschnitt 5).
   Breite muss Kachel (84px) + Abstand (8px) + max. Flyout-Breite (280px) +
   Stack-Abstand vom Rand (10px) abdecken. */
.dwd-test-panel {
  right: 400px !important;
}

@media (max-width: 640px) {
  .lqm-tile {
    width: 66px;
    height: 66px;
  }

  .lqm-tile-grid {
    height: 32px;
  }

  .lqm-stack {
    right: 6px;
    bottom: 34px;
    gap: 6px;
  }

  .lqm-flyout {
    max-width: calc(100vw - 80px);
    gap: 4px;
  }

  .lqm-flyout-item,
  .lqm-flyout-add {
    flex-basis: 62px;
  }

  .lqm-flyout-item,
  .lqm-flyout-add-toggle {
    min-height: 62px;
    height: 62px;
    font-size: 9px;
  }

  .lqm-flyout-icon {
    font-size: 14px;
  }

  .lqm-wms-form {
    width: min(280px, calc(100vw - 80px));
    bottom: 70px;
  }

  .dwd-test-panel {
    right: 280px !important;
  }
}