/**
 * control-colorpicker.css — eigenständiges Styling für den ColorPicker-Dialog
 * aus control-colorpicker.js.
 *
 * Abhängigkeit: control-slider.css muss ebenfalls geladen sein — die RGB-Regler
 * im "Eigene Farbe"-Editor verwenden dessen .slider-wrap/.slider-rail-System.
 *
 * Das komplette Markup wird von control-colorpicker.js erzeugt; diese Datei
 * enthält bewusst kein eigenes HTML-Beispiel, weil der Dialog ausschließlich
 * über die JS-API (ControlColorPicker.open()) erzeugt/geöffnet wird.
 *
 * Theming: eigenständig lauffähig (Fallback-Werte für alle var()-Aufrufe),
 * übernimmt aber automatisch --color-primary/--color-surface/--color-text/
 * --color-text-muted/--color-border/--color-divider des Hosts, falls vorhanden.
 * Nutzt außerdem eigene, mit "cp-" geprefixte Button-Klassen statt eines
 * externen Button-Systems, damit keine unausgesprochene Abhängigkeit zu z.B.
 * .btn/.btn-outline eines Hosts entsteht.
 */

:root {
  --cp-radius: 6px;
  --cp-row-h: 36px;
}

#cp-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9000;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
#cp-overlay * {
  box-sizing: border-box;
}
#cp-overlay.open {
  display: flex;
}

#cp-panel {
  background: var(--color-surface, #fff);
  border-radius: 12px;
  padding: 20px 16px 16px;
  width: 320px;
  max-width: calc(100vw - 32px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
}

#cp-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted, #888);
  text-align: center;
  margin-bottom: 12px;
  letter-spacing: 0.01em;
}

/* ── generischer Button-Grundstil (kein Abhängigkeit von einem Host-.btn) ── */
.cp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--cp-row-h);
  border: 1.5px solid var(--color-border, #ddd);
  border-radius: var(--cp-radius);
  background: var(--color-surface, #fff);
  color: inherit;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0 12px;
}
.cp-btn:active {
  opacity: 0.7;
}
.cp-btn-primary {
  background: var(--color-primary, #2f6fed);
  border-color: var(--color-primary, #2f6fed);
  color: #fff;
}

#cp-preview-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.cp-preview-box {
  height: var(--cp-row-h);
  border-radius: var(--cp-radius);
  border: 1.5px solid var(--color-border, #ddd);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text, #222);
  transition: background 0.15s ease, color 0.15s ease;
  background: #fff;
}
.cp-preview-box span {
  pointer-events: none;
}

.cp-swap-area {
  position: relative;
  height: 168px;
  margin-bottom: 6px;
}
.cp-swap-area > #cp-grid,
.cp-swap-area > #cp-custom-editor {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

#cp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.cp-swatch,
.cp-custom-slot {
  height: var(--cp-row-h);
  border-radius: var(--cp-radius);
  border: 1.5px solid var(--color-border, #ddd);
  background: var(--color-surface, #fff);
  cursor: pointer;
  padding: 0;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.1s ease, opacity 0.1s ease;
}
.cp-swatch:active,
.cp-custom-slot:active {
  opacity: 0.7;
}
.cp-swatch.selected,
.cp-custom-slot.selected {
  box-shadow: inset 0 0 0 2px var(--color-surface, #fff), 0 0 0 2px var(--color-primary, #2f6fed);
}

.cp-sections {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}
.cp-divider {
  height: 1px;
  background: var(--color-divider, #eee);
  flex-shrink: 0;
  margin-bottom: 6px;
}

#cp-custom-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.cp-custom-slot img {
  width: 16px;
  height: 16px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0.95;
  transition: filter 0.12s ease;
}

.cp-custom-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  min-height: var(--cp-row-h);
}
.cp-custom-row label {
  display: none;
}
.cp-custom-row input[type="text"] {
  height: var(--cp-row-h);
  border: 1.5px solid var(--color-border, #ddd);
  border-radius: var(--cp-radius);
  padding: 0 8px;
  font-family: inherit;
  font-size: 16px; /* mind. 16px, sonst zoomt iOS Safari beim Fokussieren */
  text-align: center;
  background: var(--color-surface, #fff);
  color: var(--color-text, #222);
}

/* Daumenfarbe der drei RGB-Regler (aus control-slider.css: --slider-thumb-color) */
#cp-r-slider { --slider-thumb-color: #e63946; }
#cp-g-slider { --slider-thumb-color: #2e9e44; }
#cp-b-slider { --slider-thumb-color: #1e6fd9; }

#cp-hex-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: center;
  min-height: var(--cp-row-h);
}
#cp-hex-input {
  height: var(--cp-row-h);
  border: 1.5px solid var(--color-border, #ddd);
  border-radius: var(--cp-radius);
  padding: 0 10px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 16px;
  text-align: center;
  text-transform: uppercase;
  background: var(--color-surface, #fff);
  color: var(--color-text, #222);
  -webkit-appearance: none;
  appearance: none;
}

#cp-footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}