/* ============================================================================
   P5-B: Bedienung fuer benannte Gruppen (Kolorier-Modus)

   Eigenstaendige Datei (siehe index.html-Kommentar: "eigenstaendige Kolorier-
   Module ... statt Zuwachs in style.css") - nutzt aber bewusst die
   vorhandenen Bausteine aus style.css weiter (--Variablen, .btn/.btn.primary/
   .btn.ghost, .variant-check, .name-field, .kolorier-swatch, .hint, select)
   statt sie zu duplizieren. Nur was es dort noch nicht gibt (Gruppen-Karten,
   Auswahl-Leiste, Auswahl-Canvas) ist hier neu.

   Mobil-Vorgabe (P5-B-Auftrag): alle Trefferflaechen >= 44px im Schmalformat
   (<=768px) - siehe min-height/min-width in der Media-Query unten. Desktop
   bleibt unveraendert.
   ============================================================================ */

/* ---------------------------------------------------------------------- */
/* Auswahl-Canvas auf der Vorschau (persistente Punkte, siehe kolorier_gruppen.js) */
/* ---------------------------------------------------------------------- */

.kolorier-gruppen-canvas {
  position: absolute;
  pointer-events: none;
  z-index: 6;
}

#img-kolorier-preview.kolorier-gruppen-sammeln-aktiv {
  cursor: copy;
}

/* ---------------------------------------------------------------------- */
/* Panel-Rahmen (gleiche Optik wie .batch-list/.pdf-gallery aus style.css - */
/* hier eigens definiert, damit diese Datei ohne Aenderung an style.css   */
/* auskommt)                                                               */
/* ---------------------------------------------------------------------- */

.kolorier-gruppen-panel {
  margin-top: 20px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: var(--shadow);
}

.kolorier-gruppen-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.kolorier-gruppen-panel h3 {
  margin: 0;
  font-family: "Syne", "Helvetica Neue", Helvetica, sans-serif;
  font-size: 0.95rem;
  color: var(--text-strong);
}

.kolorier-gruppen-luecke {
  font-size: 0.78rem;
  color: var(--text-dim);
}

/* Luecke im Lehrmaterial (Auftrag 3): sichtbar machen, dass noch Gruppen
   ohne Rolle offen sind - derselbe Farbton wie die uebrigen Fehler-/
   Statushinweise in diesem Modulsatz (siehe .kfw-status.err in
   kolorier_farbwaehler.css), hier nur als dezenter Hinweis, kein Fehler. */
.kolorier-gruppen-luecke.warn {
  color: #a5324a;
  font-weight: 600;
}

/* ---------------------------------------------------------------------- */
/* Auswahl-Leiste (Sammeln-Umschalter + Leeren + Statuszeile)             */
/* ---------------------------------------------------------------------- */

.kolorier-gruppen-sammel-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px dashed var(--border);
}

.kolorier-gruppen-sammel-bar .hint {
  color: var(--text-dim);
  font-size: 0.8rem;
}

/* ---------------------------------------------------------------------- */
/* Neue-Gruppe-Formular                                                    */
/* ---------------------------------------------------------------------- */

.kolorier-gruppen-neu-form {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.kolorier-gruppen-rolle-feld {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.kolorier-gruppen-status {
  margin: 6px 0 14px;
  font-size: 0.8rem;
}
.kolorier-gruppen-status.ok { color: #2f6b46; }
.kolorier-gruppen-status.err { color: #a5324a; }

/* ---------------------------------------------------------------------- */
/* Gruppenliste                                                            */
/* ---------------------------------------------------------------------- */

.kolorier-gruppen-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.kolorier-gruppen-liste:empty { margin-top: 0; }

#kolorier-gruppen-liste-hinweis { margin-top: 8px; }

.kolorier-gruppe-karte {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kolorier-gruppe-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.kolorier-gruppe-name {
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kolorier-gruppe-anzahl {
  flex-shrink: 0;
  font-size: 0.72rem;
  color: var(--text-dim);
}

.kolorier-gruppe-rolle-zeile {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.kolorier-gruppe-rolle-select {
  font-size: 0.76rem;
  padding: 5px 10px;
}

.kolorier-gruppe-rolle-fehlt {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #a5324a;
  background: rgba(165, 50, 74, 0.1);
  border-radius: 999px;
  padding: 2px 8px;
}

.kolorier-gruppe-aktionen {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.kolorier-gruppe-aktionen .btn {
  padding: 7px 12px;
  font-size: 0.74rem;
}

/* 'aktuelle Farbe' wiederverwendet .kolorier-swatch (Rundung/Hover/Rahmen
   aus style.css) - hier nur der deaktivierte Zustand (keine Farbe gewaehlt),
   gleiche Schraffur wie .kfw-rollen-swatch.unbesetzt in kolorier_farbwaehler.css
   fuer "hier ist noch nichts hinterlegt". */
.kolorier-gruppe-btn-aktuelle-farbe:disabled {
  cursor: not-allowed;
  background: repeating-linear-gradient(
    45deg, var(--panel), var(--panel) 4px, var(--border) 4px, var(--border) 8px
  );
}
.kolorier-gruppe-btn-aktuelle-farbe:disabled:hover { transform: none; }

.kolorier-gruppe-btn-loeschen:hover:not(:disabled) {
  color: #a5324a;
}

/* =======================================================================
   Handytaugliches Layout (Auftrag 4), ab Schmalformat <= 768px. Auf dem
   Desktop (> 768px) bleibt ALLES wie oben definiert.
   ======================================================================= */
@media (max-width: 768px) {
  .kolorier-gruppen-sammel-bar .variant-check {
    min-height: 44px;
    padding: 4px 2px;
    display: inline-flex;
    align-items: center;
  }
  .kolorier-gruppen-sammel-bar .btn,
  .kolorier-gruppen-neu-form .btn {
    min-height: 44px;
    padding: 10px 16px;
  }
  .kolorier-gruppen-neu-form input[type="text"],
  .kolorier-gruppen-rolle-feld select,
  .kolorier-gruppe-rolle-select {
    min-height: 44px;
  }
  .kolorier-gruppen-liste {
    grid-template-columns: 1fr;
  }
  .kolorier-gruppe-aktionen .btn {
    min-height: 44px;
    padding: 10px 14px;
  }
  .kolorier-gruppe-btn-aktuelle-farbe {
    width: 44px;
    height: 44px;
  }
}