/* Kolorier - Farbwaehler-Popover + Farbschema-Panel + "Palette aus Bild"
   (P4-B, vormals "Coolors-Import" - P7-Nachzug umbenannt).
   Eigenstaendige Datei (siehe templates/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, .modal-overlay/.modal-box, .kolorier-swatch(-es|-dot),
   .kolorier-hex-input, .hint) statt sie zu duplizieren. Nur was es dort noch
   nicht gibt (Canvas-Farbwaehler, Alt/Neu-Vergleichsfeld, Paletten-Karten,
   Rollen-Raster, "Palette aus Bild"-Zeilen+Pipetten) ist hier neu.

   Mobil-Vorgabe (P4-B-Auftrag): alle Trefferflaechen >= 44px - siehe
   min-height/min-width unten bei Buttons, Swatches, Selects, Zeilen. */

/* ---------------------------------------------------------------------- */
/* Werkzeugleisten-Buttons (in #kolorier-palette-bar nachtraeglich          */
/* eingehaengt, siehe kolorier_farbwaehler.js::injectToolbar)              */
/* ---------------------------------------------------------------------- */

.kfw-toolbar-btn {
  min-height: 44px;
}

/* Farbplaetze der Kurz-Leiste oben (#kolorier-palette-swatches) sind ab P4-B
   klickbar (oeffnet das Farbschema-Panel) - das Element selbst bleibt
   aria-hidden (Dekor-Konvention aus script.js), daher hier ein sichtbarer
   Hinweis per Cursor + dezenter Hover, kein eigenes ARIA-Attribut noetig
   (der eigentliche Bedienweg ist der gleich daneben eingehaengte Button). */
#kolorier-palette-swatches.kfw-clickable {
  cursor: pointer;
  border-radius: 999px;
  padding: 4px 6px;
  margin: -4px -6px;
  transition: background 0.15s ease;
}
#kolorier-palette-swatches.kfw-clickable:hover { background: var(--accent-soft); }

/* ---------------------------------------------------------------------- */
/* Farbwaehler-Popover (wiederverwendbar - Task 2)                        */
/* ---------------------------------------------------------------------- */

.kfw-scrim {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: transparent;
}

.kfw-popover {
  position: fixed;
  z-index: 151;
  width: 300px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  background: var(--panel);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-strong);
  border: 1px solid var(--border);
}

.kfw-popover.hidden { display: none; }

.kfw-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 0;
}

.kfw-popover-title {
  font-family: "Syne", "Helvetica Neue", Helvetica, sans-serif;
  font-size: 0.88rem;
  color: var(--text-strong);
  margin: 0;
}

.kfw-popover-close {
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
}
.kfw-popover-close:hover { background: var(--bg-2); }

.kfw-popover-body {
  padding: 4px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* -- Canvas-Flaeche (Saettigung/Helligkeit) + Farbton-Streifen ---------- */

.kfw-picker-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.kfw-sv-wrap, .kfw-hue-wrap {
  position: relative;
  touch-action: none;   /* Drag soll auf dem Handy nicht gleichzeitig scrollen */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--border-strong);
}

.kfw-sv-canvas {
  display: block;
  width: 100%;
  height: 160px;
  cursor: crosshair;
}

.kfw-hue-canvas {
  display: block;
  width: 100%;
  height: 44px;   /* Trefferflaeche >= 44px (Mobil-Vorgabe), siehe Modul-Kopf CSS-Datei */
  cursor: crosshair;
}

/* Greifer: eigenes div statt Canvas-Neuzeichnen bei jeder Positionsaenderung
   - reine Positionierung per left/top, deutlich guenstiger als jedes Mal
   die ganze Flaeche neu zu rendern. */
.kfw-handle {
  position: absolute;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  margin-top: -9px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.kfw-hue-wrap .kfw-handle {
  top: 50%;
  width: 10px;
  height: 38px;
  margin-top: -19px;
  border-radius: 3px;
}

/* -- Alt/Neu-Vergleichsfeld (Photoshop-Stil) ----------------------------- */

.kfw-compare-row {
  display: flex;
  flex-direction: column;
  height: 88px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--border-strong);
}

.kfw-compare-half {
  flex: 1;
  min-height: 44px;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 4px 8px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 6px rgba(0, 0, 0, 0.25);
  color: rgba(255, 255, 255, 0.92);
}

.kfw-compare-old {
  cursor: pointer;
  position: relative;
}
.kfw-compare-old:hover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.12);
}

.kfw-compare-new { cursor: default; }

/* -- Name/HEX/RGB/CMYK-Felder -------------------------------------------- */

.kfw-name-row label,
.kfw-fields label {
  display: block;
  font-size: 0.68rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.kfw-name-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text-strong);
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
}

.kfw-fields { display: flex; flex-direction: column; gap: 10px; }

.kfw-field-group { display: flex; gap: 8px; }

.kfw-field-group.kfw-hex-group input { text-transform: uppercase; }

.kfw-num-input, .kfw-fields .kolorier-hex-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.82rem;
  text-align: center;
}

.kfw-field-group .kfw-field { flex: 1; min-width: 0; }

.kfw-cmyk-hint {
  margin: 2px 0 0;
  font-size: 0.68rem;
  color: var(--text-dim);
  line-height: 1.4;
}

.kfw-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 2px;
}

.kfw-actions .btn { min-height: 44px; }

/* ---------------------------------------------------------------------- */
/* Farbschema-Panel (Task 3: Paletten-Umschalter + Rollen-Editor)          */
/* ---------------------------------------------------------------------- */

.kfw-panel-box { max-width: 560px; }

.kfw-panel-intro {
  color: var(--text-dim);
  font-size: 0.82rem;
  margin: 0 0 14px;
}

.kfw-palette-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.kfw-palette-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
}

.kfw-palette-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  background: var(--accent-soft);
}

.kfw-palette-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.kfw-palette-card-name {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-strong);
  min-width: 120px;
}

.kfw-palette-card-badge {
  font-size: 0.66rem;
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.kfw-palette-card-activate { min-height: 44px; }

.kfw-rollen-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

.kfw-rollen-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}

.kfw-rollen-label {
  width: 92px;
  flex-shrink: 0;
  font-size: 0.76rem;
  color: var(--text);
}

.kfw-rollen-swatch {
  cursor: pointer;
  position: relative;
}

/* 'weiss' bleibt immer Papierweiss (server-seitig erzwungen) - der Swatch
   ist zwar sichtbar (informativ), aber bewusst NICHT editierbar, siehe
   kolorier_farbwaehler.js::renderRollenGrid. */
.kfw-rollen-swatch:disabled {
  cursor: not-allowed;
  opacity: 0.85;
}
.kfw-rollen-swatch:disabled:hover { transform: none; }

/* leicht sichtbare Stift-Andeutung auf editierbaren Swatches - unterscheidet
   sie optisch von den reinen Vorschau-Swatches anderswo (die haben keine
   .kfw-editable-Klasse und bleiben unveraendert). */
.kfw-editable-swatch::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px dashed transparent;
  transition: border-color 0.15s ease;
}
.kfw-editable-swatch:hover::after { border-color: var(--accent); }

.kfw-rollen-swatch.unbesetzt {
  background: repeating-linear-gradient(
    45deg, var(--bg-2), var(--bg-2) 4px, var(--border) 4px, var(--border) 8px
  );
}

.kfw-rollen-hex {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.74rem;
  color: var(--text-dim);
}

.kfw-panel-error {
  color: #a5324a;
  font-size: 0.8rem;
  margin: 0 0 12px;
}

/* ---------------------------------------------------------------------- */
/* "Palette aus Bild"-Dialog (Task 4, vormals "Coolors-Import" -           */
/* P7-Nachzug: Bild + Pipetten-Punkte ergaenzt, siehe kolorier_farbwaehler */
/* .js::ensureImportDialog/renderPipetten)                                */
/* ---------------------------------------------------------------------- */

.kfw-import-box { max-width: 640px; }

.kfw-import-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px 0;
}

/* Bild-Vorschau mit Pipetten-Overlay - dieselbe object-fit:contain-Technik
   (+ deren Geometrie-Nachbau bildBox() in kolorier_farbwaehler.js) wie die
   Haupt-Werkstatt-Vorschau (.kolorier-preview-wrap in style.css). Feste
   max-height, damit ein hochkantiges Foto den Dialog nicht sprengt. */
.kfw-import-image-wrap {
  position: relative;
  margin: 14px 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-2);
}
.kfw-import-image {
  display: block;
  width: 100%;
  max-height: 46vh;
  object-fit: contain;
}

/* Pipetten-Punkt: Fadenkreuz-Ring in der aktuell gesampelten Farbe, damit
   sofort erkennbar ist, wohin ein Zug die Farbe gerade verschiebt. touch-
   action:none wie kolorier_touch.js's Pinsel/kolorier_gruppen.js's Auswahl-
   Zug (dortiger Kommentar) - sonst kapert die Touch-Geste beim Ziehen auf
   Mobilgeraeten das Scrollen statt den Punkt zu bewegen. */
.kfw-pipette {
  position: absolute;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  margin-top: -11px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1.5px var(--text-strong), 0 2px 6px rgba(0, 0, 0, 0.35);
  cursor: grab;
  touch-action: none;
  -webkit-user-drag: none;
  user-select: none;
}
.kfw-pipette.dragging {
  cursor: grabbing;
  transform: scale(1.2);
  box-shadow: 0 0 0 2px var(--accent), 0 2px 8px rgba(0, 0, 0, 0.4);
}

.kfw-import-count-label {
  font-size: 0.78rem;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 8px;
}

.kfw-import-count-label input[type="range"] { width: 120px; }

.kfw-import-swatches {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0;
}

.kfw-import-swatch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

.kfw-import-swatch-row .kfw-import-hex-label {
  flex: 1;
  font-size: 0.82rem;
  color: var(--text-strong);
  min-width: 70px;
}

.kfw-role-select {
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font-size: 0.76rem;
  padding: 0 6px;
}

/* .kolorier-remove-color kommt aus style.css (dort klein/kompakt fuer die
   bestehende Paletten-Dialog-Liste) - hier gezielt auf die Mobil-Vorgabe
   (>= 44px Trefferflaeche) vergroessert, per Spezifitaet ueberschrieben statt
   die geteilte Basisklasse in style.css anzufassen (ausserhalb meiner
   Dateigrenze). Wirkt NUR innerhalb der Coolors-Import-Zeilen. */
.kfw-import-swatch-row .kolorier-remove-color {
  min-width: 44px;
  min-height: 44px;
  font-size: 1.1rem;
}

.kfw-import-empty {
  color: var(--text-dim);
  font-size: 0.82rem;
  font-style: italic;
}

/* ---------------------------------------------------------------------- */
/* Kleine Statusmeldungen (Erfolg/Fehler) - z.B. nach Rollen-Speichern     */
/* ---------------------------------------------------------------------- */

.kfw-status {
  font-size: 0.76rem;
  min-height: 1.2em;
}
.kfw-status.ok { color: #2f6b46; }
.kfw-status.err { color: #a5324a; }

@media (max-width: 480px) {
  .kfw-popover { width: calc(100vw - 24px); }
  .kfw-rollen-label { width: 74px; font-size: 0.7rem; }
}