/**
 * idf-color-picker v0.1.0 - Skin fuer den Farbwaehler (Issue 771-Nachlauf)
 *
 * Joerg, 30.08.2026, an der Gantt-Farbe im Unternehmen-Fenster: der
 * Entfernen-Knopf stand allein in einem Kasten unter dem Hex-Feld statt
 * daneben.
 *
 * Der Baustein hatte bis hierher GAR KEIN CSS. Sein README sagte, die
 * empfohlenen Regeln staenden in idf-core.css - dort stand nichts, und der
 * Loader hielt das mit einem Kommentar ausdruecklich fest ("color-picker hat
 * KEIN eigenes CSS"). Ergebnis: drei Elemente ohne Layout, die untereinander
 * fielen. Ein Baustein, dessen Aussehen davon abhaengt, dass sein Konsument
 * es nachbaut, ist keiner.
 *
 * Warum das Formular es nicht mitgestylt hat: `blocks/forms` nimmt
 * `input[type="color"]` ausdruecklich aus dem Feld-Skin heraus, und seine
 * Regeln greifen nur auf DIREKTE Kinder von `label`. Die drei Teile stecken
 * eine Ebene tiefer, in dem `div`, an das der Picker gehaengt wird.
 *
 * Geometrie kommt aus den Formular-Variablen, damit der Waehler neben einem
 * normalen Eingabefeld auf derselben Linie steht.
 *
 * Markup (aus idf-color-picker.js):
 *   <div class="idf-color-picker">
 *     <input type="color" class="cp-swatch">
 *     <input type="text"  class="cp-hex">
 *     <button class="idf-list-delete-btn cp-clear"><i class="fa-regular fa-trash"></i></button>
 *   </div>
 */

.idf-color-picker {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

/* Die Farbflaeche ist quadratisch und so hoch wie ein Eingabefeld. Der
   native Waehler bringt innen einen eigenen Rand mit; das Padding von 2px
   haelt die Flaeche davon frei, sonst sieht sie aus wie hineingequetscht. */
.idf-color-picker .cp-swatch {
  flex: 0 0 auto;
  width: var(--idf-form-h, 40px);
  height: var(--idf-form-h, 40px);
  padding: 2px;
  border: var(--idf-form-border);
  border-radius: var(--idf-form-radius);
  background: var(--white);
  cursor: pointer;
}

/* Das Hex-Feld traegt den Feld-Skin selbst: es steht eine Ebene zu tief,
   als dass `blocks/forms` es erwischen wuerde (siehe Kopf). Werte deshalb
   aus denselben Variablen, nicht daneben erfunden. */
.idf-color-picker .cp-hex {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--idf-form-h, 40px);
  padding: var(--idf-form-padding);
  border: var(--idf-form-border);
  border-radius: var(--idf-form-radius);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--idf-form-font);
}
.idf-color-picker .cp-hex:focus {
  outline: none;
  border-color: var(--ink);
}

/* Der Entfernen-Knopf IST die Standard-Loesch-Pille (.idf-list-delete-btn
   aus functions/list-view/grid-css) - Groesse, Deckkraft, Hover und Icon
   kommen von dort, hier steht nur, dass sie in der Zeile nicht schrumpft.
   Joerg, 30.08.2026: "Immer gleiches Pattern, keine neue Buttons erfinden."
   Voraussetzung ist damit das Listen-CSS; beide Konsumenten (Unternehmen,
   Gantt-Diagramm-Detail) laden es ueber $useListEngine. */
.idf-color-picker .cp-clear { flex: 0 0 auto; }

/* Am Handy stehen Flaeche und Feld weiter untereinander als nebeneinander -
   dort ist die Zeile ohnehin voll. Kanon-Breakpoint 600. */
@media (max-width: 600px) {
  .idf-color-picker { flex-wrap: wrap; }
  .idf-color-picker .cp-hex { flex: 1 1 100%; }
}