/* ===== Stabiles Grid-Layout für das Bewertungsformular ===== */

/* Spaltenbreiten (responsiv, aber stabil) */
:root {
  --label-col: clamp(12rem, 20vw, 18rem);
  --role-col: clamp(16rem, 24vw, 22rem);
  --note-col: clamp(12rem, 18vw, 16rem);
}

#form {
  width: 90%;
  margin: 1em auto;
  padding: 1em;
}

.rating-flex-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em 1em;
  justify-content: flex-start;
  align-items: stretch;
  margin-bottom: 3em;
  margin-top: 1.5em;
  padding: 0.8em;
}

.category.flex-grid-card {
  flex: 1 1 auto;
  width: 100%;
  background: var(--card);
  border-radius: 1.1em;
  box-shadow: var(--shadow-sm);
  padding: 1.6em 1.2em 1.9em 1.2em;
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* Kopfzeile (Kategorie) */
.category-title-row {
  text-align: center;
  font-size: 1.35em;
  font-weight: bold;
  color: #432371;
  margin-bottom: 1.2em;
  letter-spacing: 0.01em;
  margin-top: 0.5em;
  text-transform: uppercase;
  width: 100%;
}

/* Grid-Row für Item/Subitem: stabile Spalten */
.item-row,
.subitem-row {
  display: grid;
  column-gap: 1rem;
  row-gap: 0.4rem;
  align-items: center;
  margin-bottom: 0.8em;
  background: none;
  padding: 0.1em 0;
  justify-content: flex-end;
}

.item-row .rating-btns.rating-empty {
  background: none;
  border: none;
  box-shadow: none;
  min-height: 0;
  padding: 0;
}
.item-row .rating-btns.rating-empty > * {
  display: none;
}

.subitem-row .rating-btns.rating-empty.subitem-filler {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  min-height: 0;
}
.subitem-row .rating-btns.rating-empty.subitem-filler > * {
  display: none;
}

/* Spaltenkonfiguration: Default (1 Rolle) */
.item-row,
.subitem-row {
  grid-template-columns: var(--label-col) var(--role-col) var(--note-col);
}

/* Für 2 Rollen */
.item-row.cols-2,
.subitem-row.cols-2 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* Für 3 Rollen (falls später benötigt) */
.item-row.cols-3,
.subitem-row.cols-3 {
  grid-template-columns: var(--label-col) var(--role-col) var(--role-col) var(--role-col) var(--note-col);
}

.item-row {
  font-weight: 700;
  color: #432371;
  font-size: 1.11em;
  background: #f0eafe;
  border-radius: 0.7em;
}
.subitem-row {
  margin-left: 0.8em;
  font-weight: 500;
  color: #432371;
  font-size: 1.04em;
  background: #f7f3ff;
  border-left: 5px solid #ded7ec;
  padding-left: 0.2em;
  margin-right: 10px;
  justify-content: flex-end;
}

/* Label-Bereich: feste Spalte, Inhalt darf umbrechen */
.item-label, .subitem-label {
  display: flex;
  align-items: center;
  gap: 0.4em;
  padding-right: 0.5em;
  padding-left: 0.5em;
  word-break: break-word;
  min-width: 0; /* wichtig für Grid */
}

/* Pro-Rolle-Zellen: nehmen genau eine Grid-Spalte ein, Inhalt wrappt */
.rating-btns, .subitem-ratings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
  justify-content: flex-end;
}

.subitem-exp-selector-row {
  display: flex;
  gap: 7px;
  border-radius: 2em;
  width: fit-content;
  min-width: 266px;
  justify-content: center;
}

.subitem-btn-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 1em;
  padding: 0.2em;
}

/* Notizfeld: füllt die Notiz-Spalte vollständig */
.note-field, .subitem-note-field {
  width: 90%;
  border: 1px solid #d0d0e0;
  border-radius: 4px;
  padding: 3px 6px;
  background: #fff;
  transition: border-color 0.2s;
  justify-content: flex-end;
}
.note-field:focus, .subitem-note-field:focus {
  border-color: #5ab5fa;
  outline: none;
}

/* Role-Badge – visuelle Darstellung der Rating Types */
.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.22em 0.6em;
  border-radius: 999px;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  line-height: 1;
}

/* Icon im Badge etwas schmaler halten */
.role-badge-icon {
  display: inline-block;
  width: 1.1em;
  text-align: center;
}

/* Farbgebung pro Rollen-Typ (links = aktiv/grün, rechts = passiv/blau) */
.role-badge[data-role-type="doing"],
.role-badge[data-role-type="doer"],
.role-badge[data-role-type="giving"],
.role-badge[data-role-type="wear"],
.role-badge[data-role-type="myself"],
.role-badge[data-role-type="smell"],
.role-badge[data-role-type="top"],
.role-badge[data-role-type="actor"] {
  background: #e6f6ec;
  color: #217a38;
  border: 1px solid #bde7c8;
}

.role-badge[data-role-type="getting"],
.role-badge[data-role-type="target"],
.role-badge[data-role-type="receiving"],
.role-badge[data-role-type="receiver"],
.role-badge[data-role-type="see"],
.role-badge[data-role-type="partner"],
.role-badge[data-role-type="bottom"],
.role-badge[data-role-type="viewer"] {
  background: #e7f0ff;
  color: #1b5fb1;
  border: 1px solid #c8ddff;
}

/* Neutrale Typen */
.role-badge[data-role-type="general"] {
  background: #f1f3f5;
  color: #495057;
  border: 1px solid #e9ecef;
}
.role-badge[data-role-type="smell"] {
  background: #fff6db;
  color: #8a6a00;
  border: 1px solid #ffe9a3;
}

/* Optional: Chip-Paare für die Legende der Rating Types */
.rating-type-chip-pair {
  display: inline-flex;
  gap: 0.5em;
  align-items: center;
}
.rating-type-chip-pair .role-badge {
  font-size: 0.82em;
}

.role-label {
  font-size: 0.72em;
  font-weight: 300;
  margin-bottom: 0.15em;
  color: #9177b6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.item-experience-points {
  display: flex;
  flex-wrap: wrap;
  margin-left: 0.1em;
}

/* Examples Toggle-Buttons: begrenze Breite auf Zelle */
.examples-group, .examples-toggle-group {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.2em;
  gap: 0.3em;
  padding: 0.1em;
  max-width: 100%;
  background: #ede5ff;
  border-radius: 0.5em;
}

.example-toggle-btn {
  background: #f5f5f5;
  border: 1px solid #ded7ec;
  border-radius: 1em;
  padding: 0.1em 0.4em;
  cursor: pointer;
  font-size: 0.85em;
  transition: background 0.15s, color 0.15s, border 0.15s;
}
.example-toggle-btn.selected {
  background: #640ecd;
  color: #fff;
  border-color: #640ecd;
}

/* No-Go-Status für Example-Toggles */
.example-toggle-btn.no-go.selected {
  background: #e53935; 
  border-color: #e53935;
  color: #fff;
  text-decoration: line-through;
}

.example-toggle-btn.favorite:not(.no-go) {
  box-shadow: 0 0 0 1px rgb(19, 222, 114) inset;
  color: #333;
  background-color: rgb(136, 255, 125);
  border: 1px solid rgb(0, 171, 71);
}

/* Buttons (Experience/Subitem Points) */
.experience-point,
.subitem-point {
  font-size: 1em;
  width: 1.7em;
  height: 1.7em;
  line-height: 2.2em;
  border-radius: 50%;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.15em;
  box-shadow: 0 0 0 1.5px #d3d3e0;
  cursor: pointer;
  background: #f6f6fa;
  color: #222;
  transition: box-shadow 0.15s, filter 0.18s, background 0.15s;
  outline: none;
}
.experience-point.selected,
.subitem-point.selected,
.experience-point:focus,
.subitem-point:focus {
  box-shadow: 0 0 0 2.5px #2b6cb0cc;
  filter: brightness(1.07);
}
.experience-point.faded,
.subitem-point.faded {
  opacity: 0.2;
}

.subitem-row .rating-btns .subitem-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    position: relative;
    width: 100%;
    justify-content: flex-end;
    margin-right:10px;
  }
  .subitem-exp-btn {
    background: var(--accent-soft);
    border: 1px solid var(--border);
    color: var(--text);
    font: 600 0.58rem/1 var(--font-ui,'Lato',sans-serif);
    padding: 6px 10px 6px;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: .04em;
    transition: background .18s, border-color .18s, color .18s;
  }
  .subitem-exp-btn:hover,
  .subitem-exp-btn.open {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
  }
  .subitem-ratings-block {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .subitem-exp-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .subitem-exp-panel .experience-point.exp-mode,
  .subitem-exp-panel .experience-point {
    cursor: pointer;
  }
  .subitem-exp-panel .experience-point.faded { opacity: .28; }
  .subitem-exp-panel .experience-point.selected { filter: brightness(1.05); }
  @keyframes fadeInExp {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @media (max-width: 700px) {
    .subitem-row .rating-btns .subitem-inline {
      flex-wrap: wrap;
      gap: 8px 10px;
    }
    .subitem-ratings-block,
    .subitem-exp-panel {
      width: 100%;
    }
  }
  @media (prefers-color-scheme: dark) {
    .subitem-exp-btn {
      background: #2a2331;
      border-color: var(--border);
      color: var(--text-dim);
    }
    .subitem-exp-btn:hover,
    .subitem-exp-btn.open {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
    }
  }

/* Farben/States der Punkte (unverändert) */
.experience-point[data-value="yes"],
.subitem-point[data-value="yes"] { background: #21a743; color: #fff; }
.experience-point[data-value="yes_but_dislike"],
.subitem-point[data-value="yes_but_dislike"] { background: #ff5933; color: #222; }
.experience-point[data-value="never_tried"],
.subitem-point[data-value="never_tried"] { background: #640ecd; color: #fff; }
.experience-point[data-value="dont_want"],
.subitem-point[data-value="dont_want"] { background: #2f2b2b; color: #fff; }
.experience-point[data-value="love"],
.subitem-point[data-value="love"] { background: #178a35; color: #fff; }
.experience-point[data-value="like"],
.subitem-point[data-value="like"] { background: #27c94a; color: #fff; }
.experience-point[data-value="okay"],
.subitem-point[data-value="okay"] { background: #68db86; color: #222; }
.experience-point[data-value="punishment"],
.subitem-point[data-value="punishment"] { background: #9cb953; color: #fff; }
.experience-point[data-value="very_interested"],
.subitem-point[data-value="very_interested"] { background: #7e3ff2; color: #fff; }
.experience-point[data-value="open"],
.subitem-point[data-value="open"] { background: #b18cff; color: #222; }
.experience-point[data-value="hesitant"],
.subitem-point[data-value="hesitant"] { background: #a17fd1; color: #fff; }
.experience-point[data-value="fantasy"],
.subitem-point[data-value="fantasy"] { background: #37046b; color: #fff; }
.experience-point[data-value="maybe_different"],
.subitem-point[data-value="maybe_different"] { background: #ff9800; color: #fff; }
.experience-point[data-value="soft_limit"],
.subitem-point[data-value="soft_limit"] { background: #fb6900; color: #222; }
.experience-point[data-value="hard_limit"],
.subitem-point[data-value="hard_limit"] { background: #2f2b2b; color: #fff; }

/* Info-Button für Subitems */
.info-btn {
  background: none;
  border: none;
  color: #555;
  cursor: pointer;
  font-size: 1em;
  margin-left: 4px;
  opacity: 0.7;
  vertical-align: middle;
}
.info-btn:hover {
  opacity: 1;
  color: #0076c9;
}

/* Legende */
.legend {
  width: 70%;
  background: #f7f7fa;
  border: 1px solid #e0e0e0;
  border-radius: 0.5em;
  padding: 1em;
  margin: 1em auto;
  font-size: 1.03em;
  box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}
.legend-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10px 24px;
}
.legend-grid-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 2.2em;
  padding: 2px 0;
}
.legend-label { flex: 1 1 0; }

/* Sticky Legend Toggle */
#legend-toggle {
  position: fixed;
  right: 16px;
  bottom: calc(66px + env(safe-area-inset-bottom));
  z-index: 10010;
  border: none;
  border-radius: 999px;
  background: #8361d9;
  color: #fff;
  font: 600 14px/1.1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  width:40px;
  height:40px;
}
#legend-toggle:focus-visible,
#legend-toggle:hover { background:#5a5a5a; }

#legend-toggle:active { outline: 2px solid #60a5fa; outline-offset: 2px; }

#btn-view {
 position: fixed;
  right: 16px;
  bottom: calc(116px + env(safe-area-inset-bottom));
  z-index: 10010;
  border: none;
  border-radius: 999px;
  background: #8361d9;
  color: #fff;
  font: 600 14px/1.1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  width:40px;
  height:40px;   
}

#btn-view:focus-visible,
#btn-view:hover { background:#5a5a5a; }

#btn-view:active { outline: 2px solid #60a5fa; outline-offset: 2px; }

#btn-load-for-edit {
 position: fixed;
  right: 16px;
  bottom: calc(166px + env(safe-area-inset-bottom));
  z-index: 10010;
  border: none;
  border-radius: 999px;
  background: #8361d9;
  color: #fff;
  font: 600 14px/1.1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  width:40px;
  height:40px;   
}

#btn-load-for-edit:focus-visible,
#btn-load-for-edit:hover { background:#5a5a5a; }

#btn-load-for-edit:active { outline: 2px solid #60a5fa; outline-offset: 2px; }

#btn-coffee {
 position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 10010;
  border: none;
  border-radius: 999px;
  background: #8361d9;
  color: #fff;
  font: 600 14px/1.1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  width:40px;
  height:40px;   
}

#btn-coffee:focus-visible,
#btn-coffee:hover { background:#5a5a5a; }

#btn-coffee:active { outline: 2px solid #60a5fa; outline-offset: 2px; }


/* Legend Panel (Overlay) */
#legend-panel {
  position: fixed;
  right: 10%;
  bottom: calc(15vh + env(safe-area-inset-bottom));
  width: 80%;
  max-height: min(70vh, 80vh);
  overflow: auto;
  z-index: 10000;
  background: #eae2fb;
  color: #111827;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  box-shadow: 0 16px 500px rgba(0,0,0,.82);
  padding: 14px;
  transform: translateY(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
#legend-panel.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
@media (max-width: 640px) {
  #legend-panel { left: 16px; right: 16px; width: auto; }
}


/* Responsive */
@media (max-width: 900px) {
  .rating-flex-grid { gap: 1.2em 1em; }
  .category.flex-grid-card { min-width: 220px; max-width: 98vw; }
}

@media (max-width: 700px) {
  /* Auf eine Spalte umschalten */
  .legend-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
  .item-row, .subitem-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  }
 .item-row.cols-2,
.subitem-row.cols-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
  .category.flex-grid-card { min-width: 0; width: 100%; max-width: 100vw; }
  .item-label, .subitem-label {word-break: keep-all; justify-content: center; text-align:center;}
  .subitem-row .rating-btns .subitem-inline {display:grid; grid-template-columns: 1fr 0.5fr 2fr;}
  .rating-btns, .subitem-ratings { justify-content: center; }
}