/* ====================================================================
   Color Picker (dc-cp-*)
   --------------------------------------------------------------------
   Sections:
   1) Root & tokens
   2) Controls row
   3) Trigger (pill, swatch, text)
   4) Inputs (hex, clear)
   5) Panel & picker container
   6) SV (saturation/value) area
   7) Hue slider
   8) Presets
   9) Accessibility & reduced motion
   ==================================================================== */

/* ─────────────────────────────────────────
   1) Root & tokens
   ───────────────────────────────────────── */
.dc-cp-root {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    color: #0f172a;
    position: relative;
}
.dc-cp-label { font-weight: 600; margin-bottom: 2px; }
.dc-cp-help  { font-size: 12px; color:#4a4f55; margin: 0 0 8px; }

/* ─────────────────────────────────────────
   2) Controls row
   ───────────────────────────────────────── */
.dc-cp-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ─────────────────────────────────────────
   3) Trigger (pill, swatch, text)
   ───────────────────────────────────────── */
.dc-cp-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    flex: 0 0 auto;
    min-width: 140px;
    height: 40px;
    padding: 0;
    background: #fff;
    border: 1px solid #c6ccd3;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    appearance: none;
    transition: border-color .15s ease;
}
.dc-cp-trigger:hover { border-color:#9cd1ff; }
.dc-cp-trigger:focus { outline: 3px solid #409cff44; outline-offset: 2px; }

.dc-cp-swatch {
    width: 40px;
    height: 100%;
    display: block;
    border-radius: 3px;
    box-shadow: inset -1px 0 0 #cbd5e1;
}

.dc-cp-trigger-text {
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    color: #0f172a;
}

/* ─────────────────────────────────────────
   4) Inputs (hex, clear)
   ───────────────────────────────────────── */
.dc-cp-hex {
    width: 110px;
    padding: 6px 8px;
    border: 1px solid #c6ccd3;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    transition: border-color .15s ease;
    flex: 0 0 auto;
}
.dc-cp-hex:hover { border-color:#9cd1ff; }

.dc-cp-clear {
    border: 1px solid #c6ccd3;
    background: #fff;
    border-radius: 4px;
    padding: 6px 10px;
    transition: border-color .15s ease;
    cursor: pointer;
    flex: 0 0 auto;
}
.dc-cp-clear:hover { border-color:#9cd1ff; }

/* ─────────────────────────────────────────
   5) Panel & picker container
   ───────────────────────────────────────── */
.dc-cp-panel {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    z-index: 20;
    background: #fff;
    border: 1px solid #e6e9ef;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(16,24,40,.12);
    padding: 10px;
    width: 260px;
}
.dc-cp-picker {
    display: flex;
    gap: 10px;
    pointer-events: auto;
}

/* ─────────────────────────────────────────
   6) SV (saturation/value) area
   ───────────────────────────────────────── */
.dc-cp-sv {
    position: relative;
    width: 220px;
    height: 160px;
    border-radius: 6px;
    overflow: hidden;
    cursor: crosshair;
    border: 1px solid transparent;
    transition: border-color .15s ease;
}
.dc-cp-sv:hover { border-color:#9cd1ff; }
.dc-cp-sv-white { position:absolute; inset:0; background:linear-gradient(to right, #fff, rgba(255,255,255,0)); }
.dc-cp-sv-black { position:absolute; inset:0; background:linear-gradient(to top, #000, transparent); }
.dc-cp-sv-thumb {
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0,0,0,.4);
    transform: translate(-6px, -6px);
}

/* ─────────────────────────────────────────
   7) Hue slider (vertical)
   ───────────────────────────────────────── */
.dc-cp-hue {
    position: relative;
    width: 25px;
    height: 160px;
    border-radius: 6px;
    background: linear-gradient(to bottom, red, #ff0, #0f0, #0ff, #00f, #f0f, red);
    border: 1px solid transparent;
    transition: border-color .15s ease;
}
.dc-cp-hue:hover { border-color:#9cd1ff; }
.dc-cp-hue-thumb {
    position: absolute;
    left: 0;
    right: 0;
    height: 10px;
    border: 2px solid #fff;
    border-radius: 6px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.4);
    transform: translateY(-5px);
}

/* ─────────────────────────────────────────
   8) Presets (swatch grid)
   ───────────────────────────────────────── */
.dc-cp-presets {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.dc-cp-preset {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: 1px solid #c6ccd3;
    cursor: pointer;
    transition: border-color .15s ease;
}
.dc-cp-preset:hover { border-color:#9cd1ff; }

/* ─────────────────────────────────────────
   9) Accessibility & reduced motion
   ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .dc-cp-trigger,
    .dc-cp-hex,
    .dc-cp-clear,
    .dc-cp-sv,
    .dc-cp-hue,
    .dc-cp-preset {
        transition: none !important;
    }
}

/* ===================================================================
   DcToggle (BEM, dc-ts- prefix)
   -------------------------------------------------------------------
   Block:    .dc-ts-toggle
   Elements: __input, __track, __label, __slider
   Mods:     --primary|--success|--neutral|--danger
             --layout-single|--layout-dual
             --disabled
   State:    input:checked drives track/slider visuals via siblings
   =================================================================== */

/* -----------------------
   Root block
   ----------------------- */
.dc-ts-toggle {
    --dc-ts-w: 140px;
    --dc-ts-h: 40px;
    /* dynamic theme tokens, manipulated by variant + input state */
    --dc-ts-border: #e9ecef;
    --dc-ts-bg: #e9ecef;

    display: inline-flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    user-select: none;
}
.dc-ts-toggle--disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* -----------------------
   Input (a11y source of truth)
   Visually hidden but focusable
   ----------------------- */
.dc-ts-toggle__input {
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    /* Keep it clickable by spanning the label area */
    cursor: inherit;
}

/* Focus ring on track when keyboard focusing the input */
.dc-ts-toggle__input:focus-visible + .dc-ts-toggle__track {
    outline: 3px solid #9ec9ff;
    outline-offset: 2px;
    border-color: #4a90e2;
}

/* -----------------------
   Track (background)
   ----------------------- */
.dc-ts-toggle__track {
    position: relative;
    width: var(--dc-ts-w);
    height: var(--dc-ts-h);
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--dc-ts-border);
    background: var(--dc-ts-bg);
    transition:
            background-color 0.25s ease,
            border-color 0.25s ease;
}

/* -----------------------
   Labels (inside track)
   ----------------------- */
.dc-ts-toggle__label {
    position: absolute;
    inset-block: 0; /* top & bottom = 0 */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    pointer-events: none;
    z-index: 1;
}

/* Dual layout places fixed ON/OFF sides */
.dc-ts-toggle--layout-dual .dc-ts-toggle__label--on  { left: 0; }
.dc-ts-toggle--layout-dual .dc-ts-toggle__label--off { right: 0; }

/* Single layout uses one active label that flips side */
.dc-ts-toggle--layout-single .dc-ts-toggle__label--left  { left: 0; }
.dc-ts-toggle--layout-single .dc-ts-toggle__label--right { right: 0; }

/* -----------------------
   Slider plate
   ----------------------- */
.dc-ts-toggle__slider {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 2px;
    width: calc(50% - 2px); /* half width minus left padding */
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    z-index: 2;
    transition: transform 0.22s ease;
}

/* Slider position (driven by modelValue via class) */
.dc-ts-toggle__slider--left  { transform: translateX(0%); }
.dc-ts-toggle__slider--right { transform: translateX(100%); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .dc-ts-toggle__track,
    .dc-ts-toggle__slider {
        transition: none;
    }
}

/* ===================================================================
   Variants
   Note: we use the input's :checked state to flip tokens
   =================================================================== */

/* -------- Primary -------- */
.dc-ts-toggle--primary .dc-ts-toggle__input:not(:checked) + .dc-ts-toggle__track {
    --dc-ts-border: #e9ecef;
    --dc-ts-bg: #e9ecef;
}
.dc-ts-toggle--primary .dc-ts-toggle__input:checked + .dc-ts-toggle__track {
    --dc-ts-border: #4a90e2;
    --dc-ts-bg: #4a90e2;
}

/* -------- Success -------- */
.dc-ts-toggle--success .dc-ts-toggle__input:not(:checked) + .dc-ts-toggle__track {
    --dc-ts-border: #cbd5e1;
    --dc-ts-bg: #cbd5e1;
}
.dc-ts-toggle--success .dc-ts-toggle__input:checked + .dc-ts-toggle__track {
    --dc-ts-border: #28a745;
    --dc-ts-bg: #28a745;
}

/* -------- Neutral -------- */
.dc-ts-toggle--neutral .dc-ts-toggle__input:not(:checked) + .dc-ts-toggle__track {
    --dc-ts-border: #6c757d;
    --dc-ts-bg: #6c757d;
}
.dc-ts-toggle--neutral .dc-ts-toggle__input:checked + .dc-ts-toggle__track {
    --dc-ts-border: #4a90e2;
    --dc-ts-bg: #4a90e2;
}

/* -------- Danger -------- */
.dc-ts-toggle--danger .dc-ts-toggle__input:not(:checked) + .dc-ts-toggle__track {
    --dc-ts-border: #dc3545;
    --dc-ts-bg: #dc3545;
}
.dc-ts-toggle--danger .dc-ts-toggle__input:checked + .dc-ts-toggle__track {
    --dc-ts-border: #4a90e2;
    --dc-ts-bg: #4a90e2;
}