/* ════════════════════════════════════════════════════════════════════════════
   editor-color-picker.css — BẢNG CHỌN MÀU RIÊNG CỦA WEB
   ----------------------------------------------------------------------------
   VÌ SAO CÓ FILE NÀY
   Mọi ô màu trong editor đều là <input type="color">. Bấm vào là trình duyệt
   bung bảng chọn màu CỦA HỆ ĐIỀU HÀNH — trên Windows đó là hộp thoại xám, chữ
   R G B, ống hút màu, hoàn toàn lạc so với giao diện còn lại. Khách nhìn thấy
   ngay là "giao diện cũ".

   CÁCH LÀM — không đụng logic sẵn có:
   • Vẫn giữ NGUYÊN 100% các <input type="color"> và mọi listener `input`/`change`
     đã gắn vào chúng (dcTextColor, dcFill, dcStroke, advStrokeColor, advShadowColor,
     text-color-picker, grad-color-1/2, text-stroke-color…).
   • color-picker.js chỉ chặn cú bấm mở hộp thoại hệ điều hành, bung bảng này lên
     thay, rồi GHI NGƯỢC giá trị vào chính ô input đó + bắn `input`/`change`.
     → Với phần code cũ thì không có gì thay đổi cả.

   Class dùng tiền tố `cp-` → không đá `dc-`, `adv-` hay ~2900 dòng CSS cũ.
   KHÔNG bọc trong @media: bảng này dùng chung cho cả mobile lẫn desktop.
   ════════════════════════════════════════════════════════════════════════════ */

.cp-pop {
    position: fixed;
    z-index: 3000;
    width: 246px;
    padding: 12px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #E7E9EF;
    border-radius: var(--r-md, 12px);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-user-select: none;
    user-select: none;
}

/* ── Ô chọn đậm/nhạt (bão hoà × độ sáng) ──
   Nền là màu thuần của sắc độ đang chọn; phủ 2 lớp gradient: trắng theo chiều
   ngang, đen theo chiều dọc. Đây là cách dựng chuẩn của mọi bảng màu HSV. */
.cp-sv {
    position: relative;
    height: 132px;
    border-radius: var(--r-md, 12px);
    cursor: crosshair;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .10);
    touch-action: none;
}
/* KHÔNG dùng overflow:hidden ở đây: nút tròn chỉ báo nằm ở mép ô (màu trắng là
   góc trên–trái, đen là dưới–trái) sẽ bị xén mất một nửa, nhìn như lỗi vẽ.
   Thay vào đó bo góc cho từng lớp phủ để vẫn gọn góc mà nút được hiện đủ. */
.cp-sv::before,
.cp-sv::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
}
.cp-sv::before { background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); }
.cp-sv::after { background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)); }

.cp-sv-dot {
    position: absolute;
    z-index: 2;
    width: 14px; height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .35), 0 1px 3px rgba(15, 23, 42, .35);
    pointer-events: none;
}

/* ── Thanh kéo sắc độ ──
   DÙNG ĐÚNG KHUÔN THANH KÉO CHUẨN của dự án (.dc-range): rãnh 4px bo tròn, nút
   tròn 15px nền trắng viền 2px. Chỉ khác đúng một chỗ: rãnh tô dải cầu vồng
   thay vì màu xám. Xem docs/UI-STANDARD.md §8. */
.cp-hue {
    display: block;
    width: 100%;
    height: 20px;
    margin: 12px 0 0;
    padding: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.cp-hue::-webkit-slider-runnable-track {
    height: 8px; border-radius: var(--r-pill, 999px);
    background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.cp-hue::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 15px; height: 15px; margin-top: -3.5px;
    border-radius: 50%; background: #fff; border: 2px solid #0F172A;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .35);
}
.cp-hue::-moz-range-track {
    height: 8px; border-radius: var(--r-pill, 999px);
    background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.cp-hue::-moz-range-thumb {
    width: 13px; height: 13px; border-radius: 50%;
    background: #fff; border: 2px solid #0F172A;
}

/* ── Hàng dưới: ô xem trước + mã màu ── */
.cp-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.cp-preview {
    flex: none; width: 30px; height: 30px; border-radius: var(--r-sm, 8px);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .16);
}
.cp-hex {
    flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 10px;
    box-sizing: border-box;
    border: 1px solid #E7E9EF; border-radius: var(--r-sm, 8px); outline: none;
    font-size: 12.5px; font-weight: 700; color: #0F172A;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    text-transform: uppercase;
}
.cp-hex:focus { border-color: #014089; box-shadow: 0 0 0 3px rgba(1, 64, 137, .12); }

/* ── Bảng màu bấm nhanh ── */
.cp-label {
    display: block; margin: 14px 0 8px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .6px;
    color: #94A3B8; text-transform: uppercase;
}
.cp-swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.cp-sw {
    width: 100%; aspect-ratio: 1 / 1; padding: 0; margin: 0;
    border: none; border-radius: var(--r-xs, 6px); cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .16);
    -webkit-appearance: none; appearance: none;
    transition: transform .12s ease, box-shadow .12s ease;
}
.cp-sw:hover { transform: scale(1.12); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .3), 0 2px 6px rgba(15, 23, 42, .2); }
.cp-sw.is-on { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px #014089; }

/* ── Nút Xong ── */
.cp-done {
    display: block; width: 100%; height: 34px; margin-top: 12px;
    border: none; border-radius: var(--r-sm, 8px);
    background: var(--brand, #014089); color: #fff;
    font-size: 13px; font-weight: 700; cursor: pointer;
    font-family: inherit;
    transition: background-color .15s ease, transform .1s ease;
}
.cp-done:hover { background: #003a7a; }
.cp-done:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
    .cp-sw, .cp-done { transition: none; }
}