/**
 * PSDM Properties Panel + CMYK/RGB color picker (designer) — BASE / CONTROLS.
 *
 * A Canva / Adobe-Express-density contextual inspector injected into the PrintCart
 * designer. Shows when an object is selected and writes back through the designer's
 * own scope funnels (setTextAttribute / setLayerAttribute / changeFill) so undo /
 * history / save keep working. Augments the native controls; does not replace it.
 *
 * This file owns: the panel shell (floating + sidebar variants), the sticky context
 * header, sections + captions, the control PRIMITIVES (label, segmented control,
 * stepper, color swatch, range, mini inputs), the scrollbar, and the color-picker
 * popover. The GRID re-composition + container-query responsive layout + collapsible
 * groups live in the sibling file psdm-properties-panel-layout.css (enqueued after).
 *
 * Tokens: var(--ax-*) (from the AX designer theme) WITH literal fallbacks so the panel
 * looks right when the AX theme is OFF. Accent is var(--ax-accent) everywhere — the
 * old hardcoded #0093d0 is gone.
 */

/* ---- Inspector panel: floating fallback ----------------------------------- */
#psdm-props {
    container-type: inline-size;               /* 360-700px responsive w/o media queries */
    --pp-row-h: 32px;
    --pp-label-w: 88px;
    --pp-accent: var(--ax-accent, #5258e4);
    --pp-tint: var(--ax-accent-100, #eef0fe);
    --pp-border: var(--ax-gray-300, #d5d9e2);
    --pp-border-soft: var(--ax-gray-200, #e8eaf0);
    --pp-ink: var(--ax-gray-900, #1f2530);
    --pp-ink-soft: var(--ax-gray-700, #4a4f5e);
    --pp-muted: var(--ax-gray-500, #8b909e);
    --pp-field: var(--ax-gray-100, #f1f3f7);
    --pp-r: var(--ax-r-sm, 8px);
    position: fixed; top: 84px; right: 14px; z-index: 99998;
    width: 264px; max-height: calc(100vh - 120px); overflow-y: auto;
    background: #fff; border: 1px solid var(--pp-border); border-radius: 12px;
    box-shadow: 0 8px 30px rgba(16, 24, 32, 0.16); color: var(--pp-ink); padding: 12px; display: none;
    font: 13px/1.4 var(--ax-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    scrollbar-width: thin; scrollbar-color: var(--ax-gray-300, #d5d9e2) transparent; scrollbar-gutter: stable;
}
#psdm-props.psdm-props-show { display: block; }

/* thin overlay-style scrollbar — kills the fat OS gutter */
#psdm-props::-webkit-scrollbar { width: 8px; }
#psdm-props::-webkit-scrollbar-track { background: transparent; }
#psdm-props::-webkit-scrollbar-thumb {
    background: var(--ax-gray-300, #d5d9e2);
    border: 2px solid transparent;
    border-radius: 8px;
    background-clip: content-box;
}
#psdm-props::-webkit-scrollbar-thumb:hover { background: var(--ax-gray-400, #c8ccd8); }

/* ---- sidebar-mount variant (the ACTIVE mode in the AX designer) -----------
   When PSDMProps.mount(container) hosts the panel inside a sidebar tab it flows
   in-container instead of floating. The extra class out-specifies the #psdm-props
   base so the floating panel is untouched when this modifier is absent. */
#psdm-props.psdm-properties-panel--sidebar {
    position: static; top: auto; right: auto;
    width: 100%; max-height: 100%; height: 100%;
    border: 0; border-radius: 0; box-shadow: none;
    padding: 14px; display: block; overflow-y: auto; box-sizing: border-box;
}

.nbd-sidebar #nav-psdm-properties .icon-nbd-baseline-tune { font-size: 26px !important; }

/* Full-screen dim panels stay click-through so a wedged overlay can never
   lock the app — but the tour POPUP (.nbd-tourStep: close ×, Prev/Next) must
   stay interactive, else its clicks fall through to whatever is underneath. */
body.psdm-props-active .nbd-bgTour,
body.psdm-props-active .overlay-main.active,
body.psdm-props-active .tour-guide.active { pointer-events: none; }
body.psdm-props-active .tour-guide.active .nbd-tourStep,
body.psdm-props-active .tour-guide.active .nbd-tourStep * { pointer-events: auto; }

.nbd-sidebar #tab-psdm-properties .tab-main { height: 100%; margin-top: 0; padding: 0; }

/* the panel is its OWN scroller — neutralise the designer's tab-scroll so we don't
   get a second, fat scrollbar nested around our thin one. */
.nbd-sidebar #psdm-props-sidebar-host {
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    background: #fff;
}

#psdm-props .psdm-pp-empty {
    display: none;
    color: var(--pp-muted);
    font-weight: 600;
    padding: 18px 2px;
}
#psdm-props.psdm-properties-panel--sidebar:not(.psdm-props-show) .psdm-pp-empty { display: block; }
#psdm-props.psdm-properties-panel--sidebar:not(.psdm-props-show) .psdm-pp-sections { display: none; }

/* ---- sticky context header ------------------------------------------------ */
#psdm-props .psdm-pp-head {
    position: sticky;
    /* stick ABOVE the scrollport by the panel padding so the border box lands
       flush at the panel top (top:0 would leave a 14px see-through band). */
    top: -14px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    /* -14px must mirror the sidebar variant's 14px panel padding above —
       change them together (the floating override below pairs with its 12px). */
    margin: -14px -14px 0;
    padding: 12px 14px 10px;
    background: #fff;
    border-bottom: 1px solid var(--pp-border-soft);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .01em;
    color: var(--pp-muted);
    text-transform: none;
}
/* the floating fallback uses a tighter pad — keep the sticky header aligned to it */
#psdm-props:not(.psdm-properties-panel--sidebar) .psdm-pp-head { margin: -12px -12px 0; padding: 10px 12px 8px; top: -12px; }
#psdm-props .psdm-pp-type {
    background: var(--pp-tint);
    color: var(--pp-accent);
    border-radius: var(--ax-r-pill, 99px);
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: none;
}

/* ---- sections: hairline divider + uppercase caption ----------------------- */
#psdm-props .psdm-pp-sec { border-top: 1px solid var(--pp-border-soft); padding: 12px 0; }
#psdm-props .psdm-pp-sec:first-child { border-top: 0; padding-top: 10px; }
#psdm-props .psdm-pp-sec:empty { display: none; padding: 0; border-top: 0; }
#psdm-props .psdm-pp-sectitle {
    font: 600 11px/1 var(--ax-font, inherit);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pp-muted);
    margin: 0 0 8px;
}

/* group label (col-1 of the inline-left grid; layout file places it) */
#psdm-props .psdm-pp-label {
    font: 500 12px/1.2 var(--ax-font, inherit);
    color: var(--pp-ink-soft);
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
}
button.psdm-pp-label.psdm-pp-collapse {
    appearance: none;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    padding: 0;
    width: 100%;
    display: flex;
    align-items: center;
}

#psdm-props .psdm-pp-row { display: flex; align-items: center; gap: 6px; }

/* ---- fused segmented control (Style / Align / Arrange / Fit / Flip / Group) - */
#psdm-props .psdm-pp-seg {
    display: flex;
    gap: 0;
    padding: 2px;
    height: var(--pp-row-h);
    box-sizing: border-box;
    background: var(--pp-field);
    border: 1px solid var(--pp-border-soft);
    border-radius: var(--pp-r);
}
#psdm-props .psdm-pp-btn {
    flex: 1;
    height: 100%;
    min-width: 28px;
    border: 0;
    background: transparent;
    border-radius: calc(var(--pp-r) - 3px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--pp-ink-soft);
    transition: background .12s, color .12s, box-shadow .12s;
    padding: 0;
}
#psdm-props .psdm-pp-seg .psdm-pp-btn:hover { background: rgba(16, 24, 32, .06); }
#psdm-props .psdm-pp-seg .psdm-pp-btn.psdm-on {
    background: #fff;
    color: var(--pp-accent);
    box-shadow: var(--ax-shadow-xs, 0 1px 2px rgba(16, 24, 32, .12));
}
#psdm-props .psdm-pp-btn i { font-style: normal; }

/* ---- selects + numeric inputs --------------------------------------------- */
#psdm-props select.psdm-pp-input,
#psdm-props input.psdm-pp-input {
    height: var(--pp-row-h);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-r);
    padding: 0 8px;
    font-size: 13px;
    color: var(--pp-ink);
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .12s, box-shadow .12s;
}
#psdm-props input.psdm-pp-input:disabled,
#psdm-props select.psdm-pp-input:disabled { background: var(--pp-field); color: var(--pp-muted); }
/* custom chevron for selects (appearance:none removes the native one) */
#psdm-props select.psdm-pp-input {
    padding-right: 26px;
    background-image: linear-gradient(45deg, transparent 50%, var(--pp-ink-soft) 50%), linear-gradient(135deg, var(--pp-ink-soft) 50%, transparent 50%);
    background-position: calc(100% - 14px) 14px, calc(100% - 9px) 14px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
#psdm-props .psdm-pp-input:focus-visible,
#psdm-props .psdm-pp-btn:focus-visible {
    outline: 0;
    border-color: var(--pp-accent);
    box-shadow: var(--ax-accent-ring, 0 0 0 3px rgba(82, 88, 228, .25));
}

/* ---- fused stepper [ − value + ] ------------------------------------------ */
#psdm-props .psdm-pp-stepper {
    display: flex;
    gap: 0;
    height: var(--pp-row-h);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-r);
    overflow: hidden;
    background: #fff;
}
#psdm-props .psdm-pp-stepper input {
    border: 0;
    border-inline: 1px solid var(--pp-border-soft);
    border-radius: 0;
    flex: 1;
    min-width: 0;
    height: 100%;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
#psdm-props .psdm-pp-step {
    width: 28px;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: #fff;
    cursor: pointer;
    font-size: 15px;
    color: var(--pp-ink-soft);
    line-height: 1;
    flex: 0 0 auto;
}
#psdm-props .psdm-pp-step:hover { background: var(--pp-field); }

/* ---- color swatch trigger (MUST keep .psdm-pp-colorbtn — picker whitelists it) */
#psdm-props .psdm-pp-colorbtn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: var(--pp-row-h);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-r);
    background: #fff;
    cursor: pointer;
    padding: 0 8px 0 5px;
    transition: border-color .12s, background .12s;
}
#psdm-props .psdm-pp-colorbtn:hover { border-color: var(--pp-accent); background: #fff; }
/* 20px chip — checkerboard EMPTY state sits behind via ::before so the inline
   background-color setChip() writes (style.background shorthand) paints over it. */
#psdm-props .psdm-pp-colorchip {
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
    flex: 0 0 auto;
    overflow: hidden;
}
#psdm-props .psdm-pp-colorchip::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        conic-gradient(#d9dde4 0 25%, transparent 0 50%, #d9dde4 0 75%, transparent 0);
    background-size: 8px 8px;
}
#psdm-props .psdm-pp-colorhex {
    font: 600 12px/1 var(--ax-font, inherit);
    color: var(--pp-ink-soft);
    letter-spacing: .01em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

/* ---- opacity range + numeric readout -------------------------------------- */
#psdm-props input[type="range"].psdm-pp-range {
    width: 100%;
    flex: 1;
    accent-color: var(--pp-accent);
}
#psdm-props input.psdm-oop-val { width: 44px; flex: 0 0 auto; text-align: center; font-variant-numeric: tabular-nums; }

/* ---- mini labeled inputs (spacing / position / size / shadow) ------------- */
#psdm-props .psdm-pp-mini { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#psdm-props .psdm-pp-mini > span {
    font-size: 10px;
    font-weight: 600;
    color: var(--pp-muted);
    text-transform: uppercase;
    letter-spacing: .02em;
}
#psdm-props .psdm-pp-mini input { height: 28px; }

/* ---- destructive actions (delete / remove mask) --------------------------- */
#psdm-props .psdm-pp-btn.psdm-danger { color: var(--ax-danger, #d33); }
#psdm-props .psdm-pp-btn.psdm-danger:hover { background: #fdecec; }

/* ---- the Actions section caption replaces its group label ----------------- */
#psdm-props .psdm-sec-actions .psdm-g-actions > .psdm-pp-label { display: none; }

/* textarea (custom SVG mask) */
#psdm-props textarea.psdm-pp-input { height: auto; padding: 6px 8px; resize: vertical; line-height: 1.3; font-family: inherit; }

/* per-path color list + filter grid + hints */
#psdm-props .psdm-pp-hint { font-size: 11px; color: var(--pp-muted); }
#psdm-props .psdm-cpaths { display: flex; flex-direction: column; gap: 4px; }

/* Effects/Shadow: demoted color swatch labelled so it isn't read as the fill */
#psdm-props .psdm-eff-color { margin-bottom: 8px; }
#psdm-props .psdm-eff-color .psdm-pp-colorbtn { height: var(--pp-row-h); }

/* ---- hide the native one-line object toolbar (panel replaces it) ---------- */
body.psdm-props-active .nbd-toolbar { display: none !important; }