/* ── Color Picker Component ──────────────────────────────────────────────────
   Shared widget used across admin pages for all color selection UI.
   JS counterpart: assets/js/color-picker.js
   PHP helper:     includes/color-picker.php
   ────────────────────────────────────────────────────────────────────────── */

.cp-wrap { display: flex; flex-direction: column; gap: 0.4rem; }

/* ── Preset swatch row ───────────────────────────────────────────────────── */
.cp-swatches { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.cp-swatch {
    width: 24px; height: 24px; border-radius: 5px;
    border: 2px solid transparent;
    cursor: pointer; padding: 0; flex-shrink: 0;
    transition: transform 0.1s, border-color 0.12s, box-shadow 0.12s;
    outline: none;
}
.cp-swatch:hover { transform: scale(1.18); }
.cp-swatch:focus-visible {
    box-shadow: 0 0 0 3px var(--accent-ring, rgba(99,102,241,0.35));
}
.cp-swatch--active {
    border-color: #fff;
    box-shadow: 0 0 0 2.5px var(--accent-primary, #6366f1), 0 2px 8px rgba(0,0,0,0.22);
    transform: scale(1.12);
}

/* ── Input row (swatch-btn + hex field) ──────────────────────────────────── */
.cp-input-row { display: flex; align-items: center; gap: 0.5rem; }

/* Clickable color block that opens the OS picker */
.cp-swatch-btn {
    flex-shrink: 0; width: 36px; height: 36px; border-radius: 6px;
    border: 2px solid var(--border-light, #d1d5db); cursor: pointer;
    position: relative; overflow: hidden; padding: 0; background: #6c757d;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}
.cp-swatch-btn:hover { border-color: var(--accent-primary, #6366f1); }
.cp-swatch-btn:focus-visible {
    border-color: var(--accent-primary, #6366f1);
    box-shadow: 0 0 0 3px var(--accent-ring, rgba(99,102,241,0.35));
}
.cp-swatch-btn input[type="color"] {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; border: none; padding: 0; margin: 0;
}

/* Hex text field */
.cp-hex {
    flex: 1; min-width: 0; box-sizing: border-box;
    padding: 0.48rem 0.7rem;
    font-family: 'Inter', sans-serif; font-size: 0.82rem;
    color: var(--text-light, #111); background: var(--bg-light, #fff);
    border: 1px solid var(--border-light, #d1d5db); border-radius: 6px;
    outline: none; transition: border-color 0.15s;
}
.cp-hex:focus { border-color: var(--accent-primary, #6366f1); }
.cp-hex[readonly] { opacity: 0.65; cursor: default; }