/* ================================================================
   PRODX design system — Collections app override layer.
   Loads AFTER _content/Prodx.Common.Ui/css/core.min.css, so these
   rules re-skin the shared (dark) components into the light PRODX
   palette and turn the slide-in drawer into a persistent sidebar.
   Scope: Collections app only. Fonts (Inter + Fira Code) are linked
   from Pages/_Layout.cshtml.
   ================================================================ */
:root
{
    --bg: #FAFAFA;
    --fg: #0A0A0A;
    --card: #FFFFFF;
    --border: #E5E5E5;
    --border-strong: #D4D4D4;
    --primary: #FF3900;
    --primary-hover: #E63300;
    --primary-fg: #FFFFFF;
    --primary-tint: #FFF1ED;      /* --accent (matches Collections design spec) */
    --primary-tint-fg: #CC2E00;   /* --accent-foreground */
    --accent-strong: #FFE4DA;
    --muted: #F5F5F5;
    --muted-fg: #595959;
    --muted-fg-strong: #404040;
    --muted-fg-soft: #8A8A8A;
    --success: #059669;
    --warning: #F59E0B;
    --error: #DC2626;
    --info: #2563EB;

    --radius: 8px;
    --radius-md: 6px;
    --radius-sm: 4px;
    --radius-full: 9999px;

    --shadow-2xs: 0 1px 2px rgba(0,0,0,0.03);
    --shadow-sm: 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-lg: 0 12px 32px -8px rgba(0,0,0,0.25);

    --sidebar-width: 190px;
    --topbar-height: 60px;

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------------------------------------------------------------- base */
body
{
    background-color: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    font-feature-settings: "ss01" 1, "cv11" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* sidebar width on the left. No top band: the legacy topbar is empty on every page (its only
       child, the mobile hamburger, is display:none), and every content page's toolbar lives in its
       card header. Reserving it by default + toggling it off per-page in JS made the content jump
       when switching tabs (the outgoing page's reset raced the incoming page's hide). */
    padding: 0 0 0 var(--sidebar-width);
}

/* Fira Code ligatures for code / IDs / numeric values */
code, pre, .mono, .num, .id { font-family: var(--font-mono); font-feature-settings: "liga" 1, "calt" 1; }

::placeholder,
.card ::placeholder { color: #9A9A9A !important; opacity: 1; }

.muted, .muted-light { color: var(--muted-fg) !important; }
.weak, .card .weak { color: #9A9A9A !important; }

/* scrollbar (8px, subtle) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(115,115,115,0.4); }



/* progress loader */
#loader { background-color: var(--primary); top: 0; height: 2px; }

/* ---------------------------------------------------------------- topbar (legacy, always empty → hidden) */
header
{
    display: none;
    background-color: var(--card);
    border-bottom: 1px solid var(--border);
    left: var(--sidebar-width);
    right: 0;
    top: 0;
    height: var(--topbar-height);
    padding: 0 12px 0 8px;
    visibility: visible;
}

    /* the hamburger toggle is redundant with a persistent sidebar (kept for mobile) */
    header > .button:first-child { display: none; }

    header > .button
    {
        color: var(--muted-fg);
        font-size: 13px;
        font-weight: 500;
        padding: 0 12px;
        height: var(--topbar-height);
        display: flex;
        align-items: center;
    }

        header > .button:hover { background-color: rgba(0,0,0,0.04); }
        header > .button.with-sub { padding-top: 0; padding-bottom: 0; }

        header > .button > .sub { color: var(--muted-fg); }
        header > .button:hover > .id { color: var(--fg); }

        header > .button > svg.icon,
        header > .button > svg.icon > * { fill: var(--muted-fg-strong); }

    header > .button > .count
    {
        background-color: var(--primary);
        border-radius: var(--radius-full);
    }

/* ---------------------------------------------------------------- sidebar */
#left
{
    background-color: var(--card);
    border-right: 1px solid var(--border);
    left: 0 !important;          /* persistent — never slides off screen */
    top: 0;
    width: var(--sidebar-width);
    transition: none;
    z-index: 1001;
    display: flex;
    flex-direction: column;
}

    /* brand block: orange grid mark + "Prodx" on line one, "Collections" caption beneath */
    #left > .brand
    {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        padding: 22px 18px 16px;
        box-sizing: border-box;
        /* shrink the block to the lockup (mark + "Prodx") width so the caption below
           can center against it rather than against the whole sidebar */
        width: fit-content;
    }

        #left > .brand > .brand-lockup
        {
            display: flex;
            align-items: center;
            gap: 9px;
        }

            /* brand mark: bare orange square grid (no container); native 68×43 aspect */
            #left > .brand > .brand-lockup > .brand-mark
            {
                height: 22px; flex: none;
                display: block; color: var(--primary);
            }

                #left > .brand > .brand-lockup > .brand-mark > svg { height: 22px; width: auto; display: block; }

            #left > .brand > .brand-lockup > .brand-word
            {
                font-weight: 800;
                letter-spacing: 0.04em;
                text-transform: uppercase;
                font-size: 18px;
                line-height: 1;
                color: var(--fg);
            }

        #left > .brand > .brand-app
        {
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            line-height: 1;
            color: var(--muted-fg);
            text-align: center;   /* centered under the mark + "Prodx" lockup */
        }

    /* nav menu → vertical list filling the sidebar */
    #left > .menu
    {
        position: static;
        left: auto;
        top: auto;
        bottom: auto;
        width: 100%;
        background-color: transparent;
        border: none;
        padding: 10px 10px 16px;
        flex: 1;
        overflow-y: auto;
    }

        #left > .menu > .separator { display: none; }

    /* account + sign out pinned to the sidebar bottom */
    #left > .side-foot
    {
        margin-top: auto;
        padding: 10px;
        border-top: 1px solid var(--border);
    }

        /* both are <button> so they're keyboard-reachable — neutralise the global button chrome
           (card background, border, centred text) that would otherwise box them in the sidebar */
        #left > .side-foot > .account,
        #left > .side-foot > .signout
        {
            -webkit-appearance: none; appearance: none;
            width: 100%; height: auto; margin: 0;
            background: transparent; border: none;
            font-family: var(--font-sans); text-transform: none; letter-spacing: normal;
            text-align: left;
        }

        #left > .side-foot > .account
        {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 6px 8px;
            border-radius: var(--radius-md);
            cursor: pointer;
        }

            #left > .side-foot > .account:hover { background-color: var(--muted); border: none; }

            #left > .side-foot > .account > .account-avatar
            {
                width: 30px; height: 30px;
                flex: 0 0 30px;
                display: grid;
                place-items: center;
                border-radius: 50%;
                background-color: var(--primary-tint);
                color: var(--primary);
            }

            #left > .side-foot > .account > .account-info { min-width: 0; line-height: 1.25; }
            #left > .side-foot > .account .account-name { font-size: 13px; font-weight: 600; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
            #left > .side-foot > .account .account-sub { font-size: 11.5px; color: var(--muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        #left > .side-foot > .signout
        {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 6px;
            padding: 8px 10px;
            border-radius: var(--radius-md);
            color: var(--muted-fg-strong);
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
        }

            #left > .side-foot > .signout:hover { background-color: var(--muted); color: var(--fg); border: none; }
            #left > .side-foot > .signout > svg { fill: none; stroke: currentColor; }

/* ---------------------------------------------------------------- menu items */
.menu
{
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px;
    width: 280px;
}

.menu > .item,
.menu > a > .item
{
    color: var(--muted-fg-strong);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.3;
    padding: 8px 12px 8px 40px;
    margin: 2px 0;
    border-radius: var(--radius-md);
}

    .menu > .item.with-icon,
    .menu > a > .item.with-icon { padding-left: 40px; }

    .menu > .item:hover,
    .menu > a > .item:hover { background-color: rgba(0,0,0,0.03); }

    .menu > .item.active,
    .menu > a.active > .item
    {
        background-color: var(--primary-tint);
        color: var(--primary-tint-fg);
    }

    .menu > .item.disabled,
    .menu > a.disabled > .item { color: #B8B8B8 !important; }

.menu > .item > svg.icon,
.menu > a > .item > svg.icon
{
    fill: currentColor;
    left: 12px;
    top: 8px;
    width: 18px;
    height: 18px;
    opacity: 0.85;
}

    .menu > .item.with-sub > svg.icon,
    .menu > a > .item.with-sub > svg.icon { top: 9px; }

.menu > .item > .sub,
.menu > a > .item > .sub { color: var(--muted-fg); }

.menu > .item.active > .sub,
.menu > a.active > .item > .sub { color: var(--primary-tint-fg); opacity: 0.75; }

.menu > .separator { border-top: 1px solid var(--border); margin: 8px 0; }
.menu > .separator.inset { margin: 8px 12px; }

/* dropdown popovers (selects) */
.menu.dropdown
{
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    color: var(--fg) !important;
}

/* ---------------------------------------------------------------- right panel */
#right
{
    background-color: var(--card);
    border-left: 1px solid var(--border);
    border-radius: 0;
    top: var(--topbar-height);
    box-shadow: -8px 0 24px rgba(0,0,0,0.08);
}

/* ---------------------------------------------------------------- cards */
.card
{
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-2xs);
}

    /* compact card header (shared kit reserves 104px for the old tall header) */
    .card.with-header { padding-top: 57px; }
    .card.with-header > .menu { top: 56px; }

    .card > .header
    {
        border-bottom: 1px solid var(--border);
        font-size: 15px;
        font-weight: 600;
        height: 56px;
        padding: 0 20px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .card > .header.with-icon { padding-left: 50px; }

        .card > .header > svg { color: var(--primary); fill: var(--primary); width: 18px; height: 18px; left: 20px; top: 50%; transform: translateY(-50%); }

        .card > .header > .buttons
        {
            border-left: none;
            padding: 0;
            top: 50%;
            transform: translateY(-50%);
            right: 16px;
            display: flex;
            gap: 8px;
        }

            .card > .header > .buttons::after { display: none; }

        .card > .header > .buttons .button > input[type="button"]
        {
            height: 32px;
            padding: 0 12px;
        }

    .card > .footer
    {
        border-top: 1px solid var(--border);
        padding: 14px 20px;
    }

    .card > .section > .header > .sub { color: var(--muted-fg); }

    .card .separator { border-top: 1px solid var(--border); }

/* editor tabs: the shared kit renders PdxTabs as a LEFT vertical menu
   (.card.with-menu reserves 280px on the left). The design uses a TOP horizontal
   underline tab bar. Restyle only — the tab logic/content is unchanged. */
.card.with-menu { padding-left: 0 !important; }
.card.with-header.with-menu { padding-top: 100px; }   /* 56px header + 44px tab bar */

.card > .menu
{
    position: absolute;
    left: 0; right: 0; top: 56px; bottom: auto;
    width: auto !important;
    height: 44px;
    overflow: visible !important;
    display: flex; flex-direction: row; align-items: stretch;
    background-color: #FCFCFC;
    border-bottom: 1px solid var(--border) !important;
    padding: 0 8px;
}
    .card > .menu::-webkit-scrollbar { display: none; }
    .card > .menu::after { display: none !important; }

    .card > .menu > .item
    {
        display: inline-flex; align-items: center; gap: 7px;
        height: 44px; padding: 0 14px !important;
        border: none !important;
        border-bottom: 2px solid transparent !important;
        border-radius: 0;
        color: var(--muted-fg);
        font-weight: 500;
    }

        .card > .menu > .item > svg.icon
        {
            position: static; left: auto; top: auto;
            width: 16px; height: 16px;
        }

        .card > .menu > .item:hover { background-color: rgba(0,0,0,0.02); color: var(--fg); }

        .card > .menu > .item.active
        {
            background-color: transparent !important;
            border-bottom: 2px solid var(--primary) !important;
            color: var(--primary-tint-fg) !important;
        }

            .card > .menu > .item.active::after { display: none !important; }

            .card > .menu > .item.active > svg.icon { fill: var(--primary); }

    /* card menu count pills (tab counts) */
    .card > .menu > .item > .count
    {
        background-color: var(--muted);
        color: var(--muted-fg-strong);
        border-radius: var(--radius-full);
        font-size: 10.5px; font-weight: 600;
        padding: 1px 7px; margin-left: 2px;
    }
    .card > .menu > .item.active > .count { background-color: var(--primary-tint); color: var(--primary-tint-fg); }

/* card header action button — compact, right-aligned, primary */
.card > .header > .button
{
    position: relative;
    margin-left: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    padding: 0;
}
    .card > .header > .button > input[type="button"]
    {
        height: 34px; width: auto; padding: 0 14px;
        font-size: 12.5px; font-weight: 600; text-transform: none; letter-spacing: 0;
        background: var(--primary); border: 1px solid var(--primary); color: #fff; border-radius: var(--radius-md);
    }
        .card > .header > .button > input[type="button"]:disabled { background: var(--muted); border-color: var(--border); color: #B8B8B8 !important; }
        .card > .header > .button > input[type="button"]:not(:disabled):hover { background: var(--primary-hover); border-color: var(--primary-hover); }
    .card > .header > .button > prodx-icon { display: inline-flex; margin-left: 6px; }
    .card > .header > .button > prodx-icon > svg,
    .card > .header > .button > svg { position: static; width: 15px; height: 15px; fill: currentColor; }

/* ================================================================
   Table action buttons (Edit/View/Save) — compact outline with icon
   ================================================================ */
table > tbody > tr > td .buttons { display: flex; justify-content: flex-end; gap: 6px; }
table > tbody > tr > td .button,
table > tbody > tr > td .input.button
{
    position: relative;
    display: inline-flex; align-items: center; height: auto; width: auto;
}
    table > tbody > tr > td .button > input[type="button"],
    table > tbody > tr > td .input.button > input[type="button"]
    {
        height: 30px; width: auto; padding: 0 12px 0 30px;
        font-size: 12.5px; font-weight: 600; text-transform: none; letter-spacing: 0;
        background: var(--card); border: 1px solid var(--border); color: var(--fg); border-radius: var(--radius-md);
    }
        table > tbody > tr > td .button > input[type="button"]:hover,
        table > tbody > tr > td .input.button > input[type="button"]:hover { background: var(--muted); border-color: var(--border-strong); }

    table > tbody > tr > td .button > prodx-icon,
    table > tbody > tr > td .input.button > prodx-icon
    {
        position: absolute !important; left: 10px; top: 50%; transform: translateY(-50%);
        display: inline-flex !important; align-items: center; pointer-events: none;
        margin: 0; right: auto; bottom: auto;
    }
    table > tbody > tr > td .button > prodx-icon > svg,
    table > tbody > tr > td .input.button > prodx-icon > svg,
    table > tbody > tr > td .button > svg,
    table > tbody > tr > td .input.button > svg
    {
        position: static !important; left: auto; top: auto;
        width: 14px !important; height: 14px !important;
        fill: var(--muted-fg) !important; display: block;
    }

/* ---------------------------------------------------------------- tables */
table { background-color: var(--card); }

    table > tbody > tr.light { background-color: #FCFCFC; }
    table > tbody > tr.selected { background-color: var(--primary-tint) !important; }

    table > tbody > tr > td
    {
        color: var(--fg);
        border-top: 1px solid var(--border);
        padding: 4px 16px;
        font-size: 13.5px;
        vertical-align: middle;
    }

    table > tbody > tr:hover > td { background-color: rgba(0,0,0,0.018); }

    table > thead > tr > th
    {
        color: var(--muted-fg);
        background-color: var(--muted);
        border-bottom: 1px solid var(--border);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.3px;
        text-transform: uppercase;
        padding: 11px 18px;
    }

    table > tbody > tr > td.dark { color: var(--muted-fg); }
    table > tbody > tr > td.darker { color: #8A8A8A; }
    table > tbody > tr > td.disabled { color: #B8B8B8 !important; }

    /* the shared kit draws heavy 2px vertical dividers on border-left/right + sticky
       cells. The design table has NO vertical column dividers (only horizontal row
       lines), so drop them all for a clean, consistent look. */
    table > tbody > tr > td.border-left,
    table > thead > tr > th.border-left,
    table > tbody > tr > td.sticky-right,
    table > thead > tr > th.sticky-right { border-left: none !important; }
    table > tbody > tr > td.border-right,
    table > thead > tr > th.border-right,
    table > tbody > tr > td.sticky-left,
    table > thead > tr > th.sticky-left { border-right: none !important; }

/* keep the primary accent readable on white for colored rows */
table.color > tbody > tr:nth-of-type(7n+1) > td,
table > tbody > tr.color-1 > td { color: var(--primary); }

/* sticky columns need an opaque background so rows don't bleed through */
table > tbody > tr > td.sticky-right,
table > tbody > tr > td.sticky-left { background-color: var(--card); }
table > thead > tr > th.sticky-right,
table > thead > tr > th.sticky-left { background-color: var(--muted); }

/* <Sort> header component — readable chevron, accent when active.
   .sort-btn is a real <button>, so strip the app's global button chrome and keep it reading as
   header text; the inherited th font/casing is what we want. */
.sort-btn
{
    -webkit-appearance: none; appearance: none;
    display: inline-flex; align-items: center;
    height: auto; margin: 0; padding: 0;
    background: transparent; border: none;
    font: inherit; color: inherit;
    text-transform: inherit; letter-spacing: inherit;
    cursor: pointer;
}
.sort-btn:hover { background: transparent; }
.sort-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-sm); }

th .info { color: inherit; }

/* Always-visible sort indicator: a compact stacked up/down chevron next to the header label.
   Both chevrons muted = "this column is sortable"; the active direction lights up in accent. */
/* Visually hidden but read aloud. Used to append sort state to a header's accessible name without
   an aria-label, which would have replaced the column name instead of adding to it. */
.sort-state
{
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.sort-ind { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; margin-left: 6px; line-height: 0; vertical-align: middle; }
.sort-ind svg { width: 13px !important; height: 13px !important; display: block; stroke-width: 2.75; color: var(--muted-fg-strong); fill: var(--muted-fg-strong); opacity: 0.9; }
.sort-ind .sort-up { margin-bottom: -4px; }
.sort-ind .sort-down { margin-top: -4px; }
    /* active column: highlight the chosen direction, fully fade the opposite one */
    .sort-ind.asc .sort-up,
    .sort-ind.desc .sort-down { color: var(--primary) !important; fill: var(--primary) !important; opacity: 1; }
    .sort-ind.asc .sort-down,
    .sort-ind.desc .sort-up { opacity: 0.25; }

/* ---------------------------------------------------------------- inputs */
input[type="text"],
input[type="date"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
textarea
{
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--fg);
}

    input[type="text"]:hover,
    input[type="date"]:hover,
    input[type="email"]:hover,
    input[type="number"]:hover,
    input[type="password"]:hover,
    input[type="search"]:hover,
    textarea:hover { background-color: var(--card); border-color: var(--border-strong); }

    input[type="text"]:focus,
    input[type="date"]:focus,
    input[type="email"]:focus,
    input[type="number"]:focus,
    input[type="password"]:focus,
    input[type="search"]:focus,
    textarea:focus { background-color: var(--card); border-color: var(--primary); outline: 2px solid var(--primary-tint); outline-offset: 0; }

/* modernize the shared floating-label inputs / dropdowns */
.input > .name
{
    color: var(--muted-fg);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.5px;
    top: 12px;
}
.input.button > .name { color: var(--fg); }

.input.with-name > input,
.input.with-name > textarea
{
    height: 56px;
    padding-top: 26px;
}

.input > svg.icon { fill: var(--muted-fg); opacity: 0.7; }
.input.button > svg.icon { fill: var(--primary-fg); opacity: 1; }
.input.with-name > svg.icon { top: 17px; }

input.dropdown { cursor: pointer; }

/* ---------------------------------------------------------------- buttons */
button,
input[type="button"],
input[type="file"],
input[type="submit"]
{
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--fg);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    font-size: 13px;
}

/* core.min.css also gives every `button` `height: 42px; line-height: 0`, which the reset above didn't
   cover. Any of this app's button classes that doesn't declare its own height was silently 42px tall with
   a collapsed line box — visible on `.ex-btn-danger-solid` (the confirm-modal Delete/Remove), `.ds-tab`,
   `.state-chip`, `.pdx-segment-opt` and `.pdxpop-item`. Scoped to `button` only: PdxButton and
   PdxRouteButton render `input[type="button"]` and are deliberately left on the shared sizing. Classes
   that DO set a height (.ex-btn 32px, .ex-btn-primary 34px, .fs-btn, .iconbtn) still win on specificity. */
button
{
    height: auto;
    line-height: normal;
}

    button:hover,
    input[type="button"]:hover,
    input[type="file"]:hover,
    input[type="submit"]:hover { background-color: var(--muted); border-color: var(--border-strong); }

    button:disabled,
    input[type="button"]:disabled,
    input[type="file"]:disabled,
    input[type="submit"]:disabled { background-color: var(--muted); color: #B8B8B8 !important; }

/* primary action buttons (marked .primary on the wrapper in the shared kit) */
.button.primary > input[type="button"],
.buttons > .button.primary input[type="button"],
input[type="submit"].primary,
.primary > input[type="submit"]
{
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--primary-fg);
}

    .button.primary > input[type="button"]:hover,
    input[type="submit"].primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); }

.input.button > input:not(:disabled) + prodx-icon > svg,
.input.button > svg { fill: var(--muted-fg-strong); }

/* toggle buttons (create wizard) */
.toggle-button.active,
.button.active > input[type="button"] { background-color: var(--primary-tint); border-color: var(--primary); color: var(--primary-tint-fg); }

/* ---------------------------------------------------------------- alerts */
.alert
{
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--fg);
    box-shadow: var(--shadow-sm);
}

    .alert.blue   { background-color: #DBEAFE !important; border-color: #BFDBFE !important; color: #1E40AF; }
    .alert.green  { background-color: #D1FAE5 !important; border-color: #A7F3D0 !important; color: #065F46; }
    .alert.red    { background-color: #FEE2E2 !important; border-color: #FECACA !important; color: #991B1B; }
    .alert.yellow { background-color: #FEF3C7 !important; border-color: #FDE68A !important; color: #92400E; }

/* ---------------------------------------------------------------- overmenu (page title bar) */
.overmenu
{
    background-color: transparent;
    left: var(--sidebar-width);
    right: 0;
    top: 0;
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    padding-right: 16px;
    box-sizing: border-box;
}

    .overmenu > .title { color: var(--fg); font-weight: 700; padding: 0 20px; font-size: 16px; letter-spacing: -0.01em; }

    /* overmenu search box → clean light pill */
    .overmenu.with-search .search,
    .overmenu > .search { display: flex; align-items: center; }

    .overmenu .search input[type="text"]
    {
        background-color: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        color: var(--fg);
        height: 36px;
    }
    .overmenu .search input[type="text"]:focus { border-color: var(--primary); outline: 2px solid var(--primary-tint); }

    .overmenu > .search > .filters,
    .builder
    {
        background-color: var(--card);
        border-color: var(--border);
    }

/* ---------------------------------------------------------------- empty states */
.empty
{
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; padding: 64px 24px; text-align: center; color: var(--muted-fg);
}
    .empty svg, .empty svg.icon { width: 34px; height: 34px; color: #D4D4D4; fill: #D4D4D4; opacity: 1; }
    .empty h3, .empty .first, .empty > div:first-of-type { color: var(--fg); font-weight: 600; font-size: 14px; }
    .empty .second { color: var(--muted-fg); font-size: 12.5px; }

/* compact dropdowns in table cells */
td .input:has(input.dropdown) { max-width: 220px; }
    .item.with-icon.active { color: var(--primary-tint-fg); }

/* ================================================================
   Exact buttons from the design (icon INSIDE, rounded). Used directly
   in the pages instead of the shared PdxButton where its internal
   two-line label layout fights the compact header/rows.
   ================================================================ */
.ex-btn
{
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 12px;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--card);
    font: 600 12.5px var(--font-sans); color: var(--fg);
    -webkit-text-fill-color: var(--fg);
    cursor: pointer; text-decoration: none; white-space: nowrap;
}
    .ex-btn:hover:not(:disabled) { background: var(--muted); border-color: var(--border-strong); }
    .ex-btn > svg, .ex-btn svg.icon { width: 14px !important; height: 14px !important; color: var(--muted-fg); fill: var(--muted-fg); flex: none; }
    /* :disabled is the real state on a <button>; .disabled covers the non-button variants (<a>, <span>).
       Colours are stated explicitly rather than left to opacity so both spellings land in the same place:
       the global `button:disabled` rule carries `color: #B8B8B8 !important`, and .ex-btn's own
       -webkit-text-fill-color outranks `color` in WebKit — so an opacity-only rule rendered differently
       in Chrome and Firefox. */
    .ex-btn:disabled, .ex-btn.disabled
    {
        pointer-events: none;
        background: var(--muted); border-color: var(--border);
        color: #B8B8B8; -webkit-text-fill-color: #B8B8B8;
    }
    .ex-btn:disabled > svg, .ex-btn:disabled svg.icon,
    .ex-btn.disabled > svg, .ex-btn.disabled svg.icon { color: #B8B8B8 !important; fill: #B8B8B8 !important; }

.ex-btn-primary
{
    display: inline-flex; align-items: center; gap: 7px;
    height: 34px; padding: 0 15px;
    border: none; border-radius: var(--radius-md);
    background: var(--primary); color: #fff;
    -webkit-text-fill-color: #fff;
    font: 600 12.5px var(--font-sans);
    cursor: pointer; text-decoration: none; white-space: nowrap;
}
    .ex-btn-primary:hover:not(:disabled) { background: var(--primary-hover); }
    .ex-btn-primary > svg, .ex-btn-primary svg.icon { width: 15px !important; height: 15px !important; color: #fff !important; fill: #fff !important; flex: none; }
    .ex-btn-primary:disabled, .ex-btn-primary.disabled
    {
        background: var(--muted); color: #B8B8B8; -webkit-text-fill-color: #B8B8B8;
        pointer-events: none;
    }
    .ex-btn-primary:disabled > svg, .ex-btn-primary:disabled svg.icon,
    .ex-btn-primary.disabled > svg, .ex-btn-primary.disabled svg.icon { color: #B8B8B8 !important; fill: #B8B8B8 !important; }

/* edit page wrapper (replaces the big m-12x card margin) + back-link breadcrumb */
.edit-wrap { padding: 12px 12px 24px; }
    .edit-wrap .edit-card { margin: 0 !important; }
.edit-crumbs { display: flex; align-items: center; gap: 6px; margin: 0 0 14px; font-size: 13px; }
    .edit-crumbs .crumb-link { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px 5px 7px; border-radius: var(--radius-md); color: var(--muted-fg); text-decoration: none; }
    .edit-crumbs .crumb-link:hover { background: rgba(0,0,0,0.03); color: var(--fg); }
    .edit-crumbs .crumb-link svg, .edit-crumbs .crumb-link svg.icon { width: 15px !important; height: 15px !important; color: currentColor; fill: currentColor; flex: none; }
    .edit-crumbs .crumb-sep { color: var(--muted-fg-soft); }
    .edit-crumbs .crumb-current { color: var(--fg); font-weight: 500; }

/* ================================================================
   COLLECTIONS-SPECIFIC
   ================================================================ */

/* collections list — toolbar in the topbar: [icon Collections] [search] ⋯ [buttons] */
.list-head-tools { display: flex; align-items: center; gap: 12px; width: 100%; }
    /* identical to the shared card header title (.card > .header) so Products & Collections don't jump */
    .list-toolbar-title { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; color: var(--fg); white-space: nowrap; }
    .list-toolbar-title > svg, .list-toolbar-title svg.icon { width: 18px; height: 18px; color: var(--primary); fill: var(--primary); flex: none; }
    /* search + state chips sit on the left; the spacer pushes selection actions + New collection right */
    .list-head-spacer { flex: 1 1 auto; }
    .list-selected-count { font-size: 12.5px; color: var(--muted-fg); white-space: nowrap; }
/* an empty overmenu title (we render our own toolbar) shouldn't reserve space */
.overmenu > .title:empty { display: none; padding: 0; }

/* search box (magnifier + flat input inside one rounded pill) */
.pdx-search
{
    position: relative; display: inline-flex; align-items: center; gap: 8px;
    height: 34px; padding: 0 11px; box-sizing: border-box;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
    .pdx-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255, 57, 0, 0.10); }
    .pdx-search-ico { color: var(--muted-fg); flex: none; }
    /* submit affordance in SearchBox — a real <button> wrapping the magnifier, so strip the global button
       chrome and let it read as the bare icon it replaced */
    .pdx-search-go
    {
        -webkit-appearance: none; appearance: none;
        display: inline-flex; align-items: center; justify-content: center;
        width: auto; height: auto; padding: 0; margin: 0;
        background: transparent; border: none; border-radius: var(--radius-sm);
        color: var(--muted-fg); cursor: pointer; flex: none;
    }
    .pdx-search-go:hover:not(:disabled) { background: transparent; color: var(--primary); }
    .pdx-search-go:disabled { background: transparent; opacity: 0.5; pointer-events: none; }
    .pdx-search-go:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
    /* the base input has its own border/height/bg — strip it so it sits flat inside the pill */
    .pdx-search .pdx-search-input
    {
        flex: 1; min-width: 0; height: auto; margin: 0; padding: 0;
        border: none !important; outline: none !important; box-shadow: none !important;
        background: transparent !important; border-radius: 0 !important;
        font-size: 13px; color: var(--fg);
    }
    .pdx-search .pdx-search-input:hover { border: none !important; }
    .pdx-search .pdx-search-input:focus { border: none !important; outline: none !important; box-shadow: none !important; }
    .list-head-search { width: 240px; height: 34px; }

/* ---------------- products page: card (header + rail + grid), matches Collections ---------------- */
.products-card
{
    margin: 12px;   /* small, even gap to the sidebar (matches the top gap) */
    display: flex; flex-direction: column;
    height: calc(100vh - 24px); box-sizing: border-box; overflow: hidden;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-2xs);
}
    .products-head
    {
        flex: none; display: flex; align-items: center; gap: 12px;
        height: 56px; padding: 0 20px; border-bottom: 1px solid var(--border);
    }
        .products-head-spacer { flex: 1; }

.products-layout
{
    flex: 1 1 auto; min-height: 0;
    display: flex; gap: 8px;
    padding: 12px;
    box-sizing: border-box; align-items: stretch;
}
    .products-rail { position: relative; flex: 0 0 var(--rail-w, 212px) !important; width: var(--rail-w, 212px) !important; max-width: var(--rail-w, 212px) !important; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
    /* the rail's right edge itself is the drag target — no visible handle, no extra gap.
       JS clamps to [200,440] + persists. */
    .rail-resizer { position: absolute; top: 0; bottom: 0; right: -5px; width: 10px; z-index: 3; cursor: col-resize; touch-action: none; }
    .rail-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; right: 5px; width: 2px; background: transparent; transition: background 120ms; }
    .rail-resizer:hover::after { background: var(--primary); }
    .products-rail-scroll
    {
        flex: 1 1 auto; min-height: 0; overflow-y: auto;
        background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    }
    .products-rail-title { position: sticky; top: 0; z-index: 3; background: var(--card); padding: 12px 14px; font-size: 13px; font-weight: 700; color: var(--fg); border-bottom: 1px solid var(--border); }
    /* rail filter search — sticky just under the title so it stays reachable in a long list */
    .products-rail-search { position: sticky; top: 41px; z-index: 2; display: flex; height: 32px; margin: 10px 12px 4px; }
    .products-rail-search .pdx-search-input { font-size: 12.5px; }
    .products-rail-search-clear { color: var(--muted-fg-soft); flex: none; }
    .products-rail-search-clear:hover { color: var(--fg); }
    .products-rail-empty { padding: 14px; font-size: 12.5px; color: var(--muted-fg); }
    .products-rail-group { padding: 12px 14px 4px; font-size: 12px; font-weight: 600; color: var(--muted-fg); }
    .products-rail-opt { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 14px; font-size: 13px; }
        /* filter checkbox — grey box, orange when checked (core draws a white/invisible box) */
        .products-rail-opt input[type="checkbox"] { margin: 0; flex: none; }
        .products-rail-opt input[type="checkbox"] + label
        {
            background-color: #fff !important;
            border: 1.5px solid var(--border-strong) !important;
            border-radius: 4px !important;
            width: 16px !important; height: 16px !important;
            display: inline-block !important; margin: 0 !important; flex: none; cursor: pointer;
        }
        .products-rail-opt input[type="checkbox"]:checked + label
        {
            background-color: var(--primary) !important;
            border-color: var(--primary) !important;
        }
        .products-rail-opt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .products-rail-opt > svg.icon { width: 15px; height: 15px; color: var(--muted-fg); fill: var(--muted-fg); flex: none; }
    .products-rail-foot
    {
        flex: none; max-height: 240px; overflow-y: auto;
        background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px;
    }
        /* narrow rail — stack the title over the buttons so they never overflow/clip */
        .products-rail-foot-head { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 10px; font-weight: 600; font-size: 13px; }
        /* grouped picks — muted group label on its own line, tinted pill chips below (matches prototype) */
        .products-pick-row { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 6px 0 2px; }
        .products-pick-label { color: var(--muted-fg); font-size: 11.5px; white-space: nowrap; }
        .products-pick-vals { display: flex; flex-wrap: wrap; gap: 6px; }
        .products-pick-chip
        {
            display: inline-flex; align-items: center; gap: 5px;
            padding: 4px 10px; border-radius: var(--radius-full);
            background: var(--primary-tint); border: 1px solid var(--accent-strong); color: var(--primary-tint-fg);
            font-size: 12px; font-weight: 500;
        }
            .products-pick-chip svg, .products-pick-chip svg.icon { width: 12px !important; height: 12px !important; color: currentColor; fill: currentColor; cursor: pointer; }
            .products-pick-chip svg:hover, .products-pick-chip svg.icon:hover { opacity: 0.6; }
        .products-target { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }

    .products-main
    {
        flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto;
        background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    }
        .products-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px 0; }
        .products-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--radius-full); font-size: 13px; }
        .products-chip-label { color: var(--muted-fg); }
        /* each value is a <button> that removes that filter — reset the global button chrome */
        .products-chip-val
        {
            -webkit-appearance: none; appearance: none;
            display: inline-flex; align-items: center;
            height: auto; padding: 0; margin: 0; border: none; background: transparent;
            font: 500 13px var(--font-sans); color: var(--fg);
            text-transform: none; letter-spacing: normal; cursor: pointer;
        }
        .products-chip-val:hover { color: var(--primary); background: transparent; }
        .products-chip-val > svg, .products-chip-val svg.icon { width: 13px !important; height: 13px !important; color: currentColor !important; fill: currentColor !important; }

    /* product tiles grid (matches design .prod-card spec) — square image, 2-line name clamp */
    #upcs
    {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)) !important;
        gap: 14px !important; padding: 14px !important;
    }
    #upcs > .upc
    {
        grid-column: auto !important; width: auto !important; max-width: none !important; float: none !important;
        display: flex; flex-direction: column; padding: 0 !important;
        background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md);
        overflow: hidden; transition: border-color 120ms, box-shadow 120ms; min-width: 0;
    }
        #upcs > .upc:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
        #upcs > .upc > .image
        {
            /* flex-center + max-size = bulletproof "contain", evenly padded, no overflow/clipping */
            aspect-ratio: 1; width: 100%; height: auto !important;
            display: flex !important; align-items: center; justify-content: center;
            padding: 12px !important; box-sizing: border-box;
            background: var(--card);   /* white — product photos are white-bg */
            overflow: hidden;
            opacity: 1 !important;   /* core fades product images to .75 — keep them sharp */
        }
            #upcs > .upc > .image img
            {
                position: static !important;
                width: auto !important; height: auto !important;
                max-width: 100% !important; max-height: 100% !important;   /* scale down to fit the padded box */
                object-fit: contain !important; object-position: center !important;
            }
        #upcs > .upc > .name
        {
            padding: 10px 12px 2px; font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--fg);
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
            text-decoration: none;   /* it's an <a> so it can be focused/opened in a new tab, styled as text */
        }
        #upcs > .upc > a.name:hover { text-decoration: underline; background: transparent; }
        #upcs > .upc > .amount { padding: 0 12px; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted-fg); }
        #upcs > .upc > .amount:last-child { padding-bottom: 12px; }

    /* filter option add-button — subtle by default, accent on hover (always visible) */
    .products-rail-opt > svg.icon { opacity: 0.5; transition: opacity 120ms, color 120ms; }
    .products-rail-opt:hover > svg.icon { opacity: 1; color: var(--primary); fill: var(--primary); }

/* table action button group (Edit / Save / Delete) — left-aligned so there's only a
   small gap after the divider, not a big one before the buttons */
.ex-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-start; width: 100%; }
    .ex-btn.danger:hover { border-color: #F5B5A8; color: var(--primary-tint-fg); }
    .ex-btn.danger > svg, .ex-btn.danger svg.icon { color: var(--primary) !important; fill: var(--primary) !important; }

/* fancy anchored popover (context picker) — same family as the filter popover */
.pdxpop { position: relative; display: inline-flex; }
.pdxpop-backdrop { position: fixed; inset: 0; z-index: 1099; }
.pdxpop-menu
{
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 1100;
    width: 460px; max-width: calc(100vw - 48px);
    background: var(--card); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.14);
    display: flex; flex-direction: column; overflow: hidden; max-height: 70vh;
}
    .ex-btn.open { border-color: var(--primary); color: var(--primary-tint-fg); background: var(--primary-tint); }
    .pdxpop-head { flex: 0 0 auto; padding: 12px 14px; border-bottom: 1px solid var(--border); font: 600 12.5px var(--font-sans); color: var(--fg); }
    /* in-popover search over the loaded contexts */
    .pdxpop-search { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; margin: 8px 10px; padding: 0 10px; height: 32px; border: 1px solid var(--border); border-radius: var(--radius-md); }
    .pdxpop-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255,57,0,0.10); }
    .pdxpop-search > .pdx-search-ico { color: var(--muted-fg); flex: none; }
    .pdxpop-search .pdx-search-input { flex: 1; min-width: 0; border: none !important; outline: none !important; box-shadow: none !important; background: transparent !important; height: auto; padding: 0; margin: 0; font-size: 13px; color: var(--fg); }
    .pdxpop-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; }
    .pdxpop-note { padding: 16px 12px; font-size: 12.5px; color: var(--muted-fg); line-height: 1.5; }
    .pdxpop-item
    {
        display: flex; align-items: center; gap: 10px; width: 100%;
        padding: 9px 10px; border: none; background: transparent; border-radius: var(--radius-md);
        cursor: pointer; text-align: left; color: var(--fg);
    }
    .pdxpop-item:hover:not(:disabled) { background: var(--muted); }
    .pdxpop-item:disabled { opacity: 0.5; cursor: default; }
    .pdxpop-item-main { flex: 1; min-width: 0; display: block; }
    .pdxpop-item, .pdxpop-item-name { color: var(--fg) !important; -webkit-text-fill-color: var(--fg) !important; }
    .pdxpop-item-name { display: block; font-size: 13px; font-weight: 500; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pdxpop-item-sub { display: block; font-size: 11px; line-height: 1.3; color: var(--muted-fg) !important; -webkit-text-fill-color: var(--muted-fg) !important; }
    .pdxpop-item-count { flex: none; font-size: 12px; color: var(--muted-fg); min-width: 20px; text-align: right; }
    .pdxpop-item > svg, .pdxpop-item svg.icon { flex: none; width: 15px !important; height: 15px !important; color: var(--muted-fg); fill: var(--muted-fg); }

/* collections list card — tidy margins, no fixed height cap */
/* Fill the viewport with an internal scroll (same model as .products-card) so the page body
   never scrolls. Otherwise this card grows to the full list height, a body scrollbar appears
   only on the longer page, and switching Products<->Collections toggles it — the "jump". */
.list-card
{
    margin: 12px !important;
    height: calc(100vh - 24px); box-sizing: border-box;
    display: flex; flex-direction: column; overflow: hidden;
}
    .list-card > .header { flex: none; }
    .list-card > .main { flex: 1 1 auto; min-height: 0; overflow: auto; }
    /* slim footer; the "1-N of N" count reads as muted meta, not body text */
    .list-card > .footer { flex: none; padding: 7px 16px; color: var(--muted-fg); font-size: 12px; }
    .list-card > .footer .num, .list-card > .footer .mono { color: var(--muted-fg); }
/* compact row cells so the Actions column has no big vertical dead space + tighter
   horizontal padding so the date columns fit without clipping */
.list-card table td, .list-card table th { padding-left: 9px; padding-right: 9px; }
.list-card table td { padding-top: 7px; padding-bottom: 7px; white-space: nowrap; }
.list-card table th { padding-top: 6px; padding-bottom: 6px; padding-left: 14px; }   /* slim header band + nudge labels ~3px right to align with column content */
/* small gap after the Actions/Context divider (not a big one) */
.list-card table td.border-left, .list-card table th.border-left { padding-left: 7px; }

/* inline-edit fields read as plain text (no box grid); border appears only on
   hover/focus so it's clear they're editable */
.list-card table td input[type="text"],
.list-card table td textarea
{
    border-color: transparent !important;
    background-color: transparent !important;
    overflow: hidden !important;   /* no dark scrollbar pill on hover */
}
    .list-card table td input[type="text"]:hover,
    .list-card table td textarea:hover { border-color: var(--border) !important; background-color: var(--card) !important; }
    .list-card table td input[type="text"]:focus,
    .list-card table td textarea:focus { border-color: var(--primary) !important; background-color: var(--card) !important; }

/* compact drag handle in normal flow (absolute + negative letter-spacing merged its
   dots into a dark pill on hover). Clean grip dots, small footprint. */
.list-card .source-drag-handle { width: 10px; margin-right: 6px; letter-spacing: 1px; font-size: 12px; }
.list-card td.sticky-left input[type="text"] { padding-left: 0; }
/* The NAME header must line its checkbox + label up with the row below. The body Name cell is a
   `td.with-input` (core.min.css pads that 0 14px), so the header th.sticky-left must match that 14px —
   otherwise the header sits ~3px left of the row. With the input's left padding zeroed, the label and
   the name value share the same start too. */
.list-card table th.sticky-left { padding-left: 14px; }

/* light scrollbars — the shared kit paints thumbs dark (#4b4b4b), which showed as a dark
   pill anywhere content overflowed (table inputs, products rail). ".card ..." override is
   needed because the kit's ".card ::-webkit-scrollbar-thumb" out-specifies the bare one. */
::-webkit-scrollbar-thumb,
.card ::-webkit-scrollbar-thumb { background-color: var(--border) !important; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover,
.card ::-webkit-scrollbar-thumb:hover { background-color: #B8B8B8 !important; }

/* sticky columns kept a white bg while the rest of the hovered/striped row shifted,
   so they stood out as "blocks". Match them to the row + kill stray core ::after. */
.list-card table tbody tr td.sticky-left::after,
.list-card table tbody tr td.sticky-right::after,
.list-card table thead tr th.sticky-left::after,
.list-card table thead tr th.sticky-right::after { display: none !important; }
.list-card table tbody tr.light td.sticky-left,
.list-card table tbody tr.light td.sticky-right { background-color: #FCFCFC !important; }
.list-card table tbody tr:hover td.sticky-left,
.list-card table tbody tr:hover td.sticky-right { background-color: #FAFAFA !important; }
    .list-card table td textarea { height: 34px !important; min-height: 34px; padding: 7px 10px; resize: none; }
    .list-card table td input[type="text"] { height: 34px; }

/* status pills (.crisp span) — the shared kit draws a solid black pill; re-skin
   to a light neutral badge that reads on white. Used for collection/context
   status and product slot labels. Filter chips set their own inline colors. */
.crisp
{
    background-color: var(--muted) !important;
    color: var(--muted-fg-strong) !important;
    border-radius: var(--radius-full);
    font-size: 10.5px; font-weight: 600;
    padding: 4px 10px; line-height: 1;
}

/* drag-and-drop reorder (sources table + collections list) */
tr[draggable="true"] { cursor: grab; }
tr[draggable="true"]:active { cursor: grabbing; }
tr.drag-over > td { border-top: 2px solid var(--primary) !important; }

.source-drag-handle
{
    color: #B8B8B8;
    cursor: grab;
    display: inline-block;
    font-size: 14px;
    letter-spacing: -2px;
    margin-right: 8px;
    user-select: none;
    width: 14px;
}
.source-drag-handle:hover { color: var(--muted-fg-strong); }

.clickable:hover { text-decoration: underline; cursor: pointer; }

/* Collections list "Aisle Context" checkbox column.
   Narrow fixed 96px on header + body; the whole cell is the click target
   (label fills the cell), and the visible box is drawn centred via ::after. */
th.aisle-context-head,
td.aisle-context-check { box-sizing: border-box; width: 96px; }

td.aisle-context-check { cursor: pointer; padding: 0; position: relative; }

td.aisle-context-check input[type="checkbox"] + label
{
    background-color: transparent !important;
    border: 0;
    border-radius: 0;
    display: block;
    height: 100%;
    margin: 0;
    position: absolute;
    inset: 0;
    width: 100%;
}

/* box visible on light: grey border, brand fill when checked */
td.aisle-context-check input[type="checkbox"] + label::after
{
    border: 2px solid var(--border-strong);
    border-radius: 3px;
    box-sizing: border-box;
    content: '';
    height: 15px;
    left: 50%;
    margin: -7.5px 0 0 -7.5px;
    position: absolute;
    top: 50%;
    transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out;
    width: 15px;
}

td.aisle-context-check input[type="checkbox"]:checked + label::after
{
    background-color: var(--primary);
    border-color: var(--primary);
}

/* FilterCombobox popup (parameters builder) — section divider on light */
.menu.compact.dropdown .item.divider,
.menu.compact.dropdown hr { border-color: var(--border) !important; }

/* product tiles (#upcs grid) → light cards */
#upcs > .upc
{
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
    #upcs > .upc .name { color: var(--fg); }
    #upcs > .upc .amount { color: var(--muted-fg); }

/* ---------------------------------------------------------------- no-topbar pages (toolbar lives in the card header, so reclaim the empty topbar band) */

/* ---------------------------------------------------------------- fullscreen (hide sidebar + topbar, content full width) */
body.pdx-fullscreen { padding-left: 0 !important; padding-top: 0 !important; }
    body.pdx-fullscreen #left { display: none !important; }
    body.pdx-fullscreen header { display: none !important; }
    body.pdx-fullscreen .overmenu { left: 0 !important; }
    /* card margins stay identical to no-topbar mode so toggling doesn't shift the card */

/* maximize/restore toggle button */
.fs-btn
{
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex: none; padding: 0;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--card); color: var(--primary); cursor: pointer;
}
    .fs-btn:hover { background: var(--primary-tint); border-color: var(--primary); }
    /* core forces button>svg to 24px + absolute offset — pin it centered and visible */
    .fs-btn > svg
    {
        width: 18px !important; height: 18px !important;
        position: static !important; top: auto !important; left: auto !important; right: auto !important;
        color: var(--primary) !important; stroke: var(--primary) !important; fill: none !important;
    }

/* ================================================================
   NEW-COLLECTION single page (form + sources on one card)
   ================================================================ */
.create-form { display: flex; flex-direction: column; gap: 12px; padding: 16px; max-width: 760px; }
    .create-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.create-section-head
{
    font-weight: 700; font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted-fg);
    padding: 12px 16px 4px; border-top: 1px solid var(--border);
}
.create-footer
{
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    padding: 14px 20px; border-top: 1px solid var(--border);
}
    .create-footer .ex-btn { margin-right: auto; }   /* Cancel on the left, Create on the right */

/* ================================================================
   PRODUCT VIEW (single product) — image left, details right
   ================================================================ */
.product-view { padding: 16px; }
    /* category trail under the back-link — each level searches Products for that category */
    .product-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin-top: 8px; }
    .product-crumb
    {
        -webkit-appearance: none; appearance: none;
        height: auto; padding: 2px 6px; border: none; background: transparent;
        font: 500 12.5px var(--font-sans); color: var(--muted-fg);
        text-transform: none; letter-spacing: normal;
        border-radius: var(--radius-sm); cursor: pointer;
    }
    .product-crumb:hover { color: var(--primary); background: var(--primary-tint); }
    /* Ancestor crumbs: context only, no filter link (see ProductViewPage_Breadcrumbs.razor) — no hover, no cursor. */
    .product-crumb-text { padding: 2px 6px; font: 500 12.5px var(--font-sans); color: var(--muted-fg); }
    .product-crumb-sep { color: var(--muted-fg-soft); font-size: 12px; }

    .product-view-body { display: flex; gap: 20px; margin-top: 14px; align-items: flex-start; }
    .product-view-image
    {
        flex: 0 0 40%; max-width: 40%;
        background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
        display: flex; align-items: center; justify-content: center; padding: 24px; min-height: 300px;
    }
        .product-view-image img { max-width: 100%; max-height: 360px; object-fit: contain; display: block; }
    .product-view-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
    .product-view-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
        /* each chip is a <button> that searches Products for that filter — the inline style carries the
           per-filter border/text colour, so only the global button chrome needs neutralising here */
        .product-view-chips .crisp
        {
            -webkit-appearance: none; appearance: none;
            height: auto; margin: 0;
            font-family: var(--font-sans); font-size: 13px; font-weight: 600;
            padding: 6px 12px; border-radius: 999px;
            text-transform: none; letter-spacing: normal;
            cursor: pointer; white-space: nowrap;
        }
@media (max-width: 760px)
{
    .product-view-body { flex-direction: column; }
    .product-view-image { flex-basis: auto; max-width: 100%; width: 100%; }
}

/* ================================================================
   IMAGE LIGHTBOX (click a product image) — with close X
   ================================================================ */
.pdx-img-overlay
{
    position: fixed; inset: 0; z-index: 1100;
    background: rgba(23, 23, 23, 0.55);
    display: flex; align-items: center; justify-content: center; padding: 40px;
}
.pdx-img-box
{
    position: relative; background: var(--card); border-radius: var(--radius);
    padding: 24px; max-width: 90vw; max-height: 90vh; box-shadow: var(--shadow-lg);
}
    .pdx-img-box img { display: block; max-width: 78vw; max-height: 78vh; object-fit: contain; }

/* shared close-X button (lightbox + modal) — override the kit's fat default button */
.pdx-img-close
{
    position: absolute; top: 10px; right: 10px;
    width: 34px !important; height: 34px !important; padding: 0 !important;
    display: flex; align-items: center; justify-content: center;
    background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: 8px;
    color: var(--muted-fg) !important; cursor: pointer; transition: background 120ms, color 120ms, border-color 120ms;
}
    .pdx-img-close:hover { background: var(--muted) !important; color: var(--fg) !important; border-color: var(--border-strong) !important; }
    .pdx-img-close > svg, .pdx-img-close svg.icon
    {
        width: 18px !important; height: 18px !important; position: static !important;
        top: auto !important; left: auto !important; right: auto !important;
        color: currentColor !important; fill: currentColor !important;
    }

/* ================================================================
   GENERIC CENTERED MODAL (create-source-from-picks, etc.)
   ================================================================ */
.pdx-modal-overlay
{
    position: fixed; inset: 0; z-index: 1100;
    background: rgba(23, 23, 23, 0.55);
    display: flex; align-items: flex-start; justify-content: center; padding: 48px 24px; overflow-y: auto;
}
.pdx-modal
{
    position: relative; width: 100%; max-width: 640px;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); overflow: hidden;
}
    /* wider variant for the New-collection form, so the Sources table isn't cramped */
    .pdx-modal.pdx-modal-wide { max-width: 900px; }
        /* Sources block inside the modal: drop the big framework gap, keep the table
           within the modal, and neutralise the source-name input's inline 280px
           min-width (which pushed the table — and the Add-source button — past the edge). */
        .pdx-modal-wide .descriptions { margin: 0 0 8px !important; padding: 0 !important; }
        .pdx-modal-wide .create-section-head { margin: 8px 0 4px; }
        .modal-sources { overflow-x: auto; }
            .modal-sources table td input[type="text"] { min-width: 0 !important; }
    .pdx-modal-head
    {
        display: flex; align-items: center; gap: 12px;
        height: 56px; padding: 0 16px 0 20px; border-bottom: 1px solid var(--border);
    }
        .pdx-modal-head .pdx-img-close { position: static; margin-left: auto; }
    .pdx-modal-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; max-height: calc(90vh - 130px); overflow-y: auto; }
    .pdx-modal-foot
    {
        display: flex; align-items: center; justify-content: flex-end; gap: 10px;
        padding: 14px 20px; border-top: 1px solid var(--border);
    }

.pdx-field-label { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted-fg); margin-top: 10px; }
    .pdx-field-label:first-child { margin-top: 0; }

.picks-list
{
    background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 8px 10px; max-height: 150px; overflow-y: auto;
}
    .picks-list-item { font-family: var(--font-mono); font-size: 12.5px; color: var(--fg); line-height: 1.7; }

/* segmented toggle (New collection / Existing collection) */
/* subtle segmented control (prototype): bordered container, grey-active half */
.pdx-segment { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 3px; background: var(--card); width: 100%; max-width: 420px; }
    .pdx-segment > .pdx-segment-opt
    {
        flex: 1; justify-content: center; padding: 8px 14px; border-radius: var(--radius-sm);
        border: none; background: transparent; color: var(--muted-fg); font-size: 13px; font-weight: 500; cursor: pointer;
        transition: background 120ms, color 120ms;
        /* Neutralize core.min.css's `button` reset (uppercase / 42px / 2px tracking / line-height:0) — this rule
           overrides padding/font but not those, so without this the toggle renders UPPERCASE and 42px tall. */
        text-transform: none; letter-spacing: normal; line-height: 1; height: auto;
    }
    .pdx-segment > .pdx-segment-opt.active { background: var(--muted); color: var(--fg); }
    .pdx-segment > .pdx-segment-opt:not(.active):hover { color: var(--fg); }
/* legacy pill variant (unused now, kept harmless) */
    .pdx-segment-opt-pill
    {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius-md);
        font-size: 13px; font-weight: 600; color: var(--fg); background: var(--card); cursor: pointer;
        transition: background 120ms, border-color 120ms, color 120ms;
    }
        .pdx-segment-opt > svg, .pdx-segment-opt svg.icon { width: 15px; height: 15px; }
        .pdx-segment-opt:hover { border-color: var(--border-strong); }
        .pdx-segment-opt.active { background: var(--primary-tint); border-color: var(--primary); color: var(--primary-tint-fg); }
        .pdx-segment-opt.active > svg, .pdx-segment-opt.active svg.icon { color: var(--primary-tint-fg); fill: var(--primary-tint-fg); }

/* picks rail — Clear + Add source sit together on the right */
.products-rail-foot-actions { display: flex; gap: 6px; }
    /* Clear + Create share one row (short labels) to save vertical space in the rail */
    .products-rail-foot-actions .ex-btn,
    .products-rail-foot-actions .ex-btn-primary { flex: 1; justify-content: center; min-width: 0; box-sizing: border-box; padding-left: 10px; padding-right: 10px; }

/* ================================================================
   INLINE SOURCE PARAMETER PANEL (design handoff: inline_sources)
   Clicking "Edit" on a source expands its parameter builder as a
   panel beneath the row (no modal-on-modal). Append-only; reuses
   existing :root tokens.
   ================================================================ */

.params-inline
{
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-2xs);
    overflow: hidden;
}
.params-inline .separator { display: none; }        /* the row border already separates */

/* "Edit" action shows an active (open) state */
.ex-btn.active
{
    background: var(--primary-tint);
    color: var(--primary-tint-fg);
    border-color: var(--accent-strong);
}

/* OR-between-groups label inside the inline panel */
.params-inline .or-between-groups
{
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-fg);
}

/* ================================================================
   PROTOTYPE — full-page collection editor (header + tabs + settings)
   ================================================================ */
/* editor card + custom tab bar (avoids the kit's absolute-positioned .card>.menu
   which overlaps the body when there's no card header) */
.editor-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-2xs); overflow: hidden; }
.ds-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); padding: 0 20px; }
.ds-tab { padding: 12px 14px; font-size: 13.5px; font-weight: 500; color: var(--muted-fg); background: transparent; border: none; border-bottom: 2px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; margin-bottom: -1px; }
.ds-tab > svg, .ds-tab svg.icon { width: 14px; height: 14px; }
.ds-tab:hover { color: var(--fg); }
.ds-tab.active { color: var(--fg); border-bottom-color: var(--primary); }
.ds-tab.active > svg, .ds-tab.active svg.icon { color: var(--primary); fill: var(--primary); }
.ds-tab-count { font-size: 11px; background: var(--muted); color: var(--muted-fg); padding: 1px 6px; border-radius: var(--radius-full); font-weight: 500; font-family: var(--font-mono); }
.ds-tab.active .ds-tab-count { background: var(--primary-tint); color: var(--primary-tint-fg); }
.editor-card-body { min-height: 460px; }
    .editor-card-body > .settings-grid { padding: 20px; }

/* header block: big editable title, state badge, id/schedule, actions */
.editor-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.editor-head-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.editor-title-row { display: flex; align-items: center; gap: 12px; }
.editor-title-input
{
    font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--fg);
    border: none !important; background: transparent !important; padding: 2px 4px !important;
    /* Fill the header row so long names aren't clipped; the state badge sits to the right. */
    flex: 1 1 auto; min-width: 0; max-width: none; height: auto !important; margin: 0 !important;
}
.editor-title-row > .state-badge { flex: none; }
.editor-title-input:hover { background: var(--muted) !important; border-radius: var(--radius-sm); }
.editor-title-input:focus { background: var(--card) !important; box-shadow: 0 0 0 2px var(--primary) !important; border-radius: var(--radius-sm); outline: none; }
.editor-head-sub { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted-fg); }
.editor-head-sub .mono { font-family: var(--font-mono); color: var(--muted-fg-soft); }
.editor-head-actions { display: flex; align-items: center; gap: 8px; }

/* spinner shown on the Products tab label while the post-save rebuild is being polled for */
.ds-tab-spin { width: 13px !important; height: 13px !important; color: var(--primary); fill: var(--primary); animation: pdx-spin 0.9s linear infinite; vertical-align: middle; }
@keyframes pdx-spin { to { transform: rotate(360deg); } }

/* state badge (read-out pill; Settings tab has the editable chips) */
.state-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-full); font-size: 11px; font-weight: 600; line-height: 1.3; border: 1px solid transparent; white-space: nowrap; }
.state-badge > svg, .state-badge svg.icon { width: 11px !important; height: 11px !important; color: currentColor !important; fill: currentColor !important; }
/* solid status pills (design system) — white icon+label on the status colour */
.state-badge.draft     { background: transparent; border-color: var(--border-strong); color: var(--muted-fg); }
.state-badge.ready,
.state-badge.scheduled { background: var(--info); color: #fff; }
.state-badge.active    { background: var(--success); color: #fff; }
.state-badge.paused    { background: var(--warning); color: #fff; }
.state-badge.build     { background: var(--primary-tint); color: var(--primary-tint-fg); }
.state-badge.canceled,
.state-badge.ended,
.state-badge.archived,
.state-badge.neutral   { background: var(--muted); color: var(--muted-fg); }

/* settings tab: 2-column form */
.settings-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; padding: 20px; }
.settings-col { display: flex; flex-direction: column; gap: 18px; }
.settings-field { display: flex; flex-direction: column; gap: 6px; }
.settings-label { font-size: 12px; font-weight: 500; color: var(--fg); }
.settings-help { font-size: 12px; color: var(--muted-fg); }
.settings-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Build tab — source cards with OR connectors between them */
.build-pane { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.build-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 2px; }
.build-head h2 { font-size: 16px; font-weight: 600; margin: 0; }
.build-head .sub { font-size: 12px; color: var(--muted-fg); }
.build-head .sub b { font-family: var(--font-mono); font-weight: 600; }
.src-connector { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--muted-fg); margin: 2px 0; }
.src-connector-line { height: 1px; background: var(--border); flex: 1; }
.src-connector-pill { padding: 2px 8px; border-radius: var(--radius-full); background: rgba(37,99,235,0.07); border: 1px solid rgba(37,99,235,0.25); color: var(--info); }

/* source list layout */
.build-sources { display: flex; flex-direction: column; gap: 14px; }
.build-add { align-self: flex-start; }
/* empty Build state — bordered box, centered, with a primary Add source */
.build-empty { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 44px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.ds-empty-icon { width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--muted); display: grid; place-items: center; color: var(--muted-fg-soft); }
.ds-empty-icon > svg, .ds-empty-icon svg.icon { width: 20px !important; height: 20px !important; }
.ds-empty-title { font-size: 15px; font-weight: 600; color: var(--fg); }
.ds-empty-sub { font-size: 13px; color: var(--muted-fg); }
.build-empty .ds-empty-sub { max-width: 380px; }
.build-empty-add { margin-top: 4px; }
.excludes-section { margin-top: 8px; display: flex; flex-direction: column; gap: 12px; }
.excludes-head { display: flex; flex-direction: column; gap: 3px; }
.excludes-head h3 { font-size: 14px; font-weight: 600; margin: 0; color: var(--error); }
.excludes-head .sub { font-size: 12px; color: var(--muted-fg); }

/* source card container + header row */
.source-group { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.source-group.exclude { border-color: rgba(220,38,38,0.25); background: rgba(220,38,38,0.02); }
.source-group-header { padding: 12px 16px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border); background: var(--muted); }
.source-group.exclude .source-group-header { background: rgba(220,38,38,0.04); border-bottom-color: rgba(220,38,38,0.15); }
.source-group-body { padding: 4px 16px 16px; }

/* source card header (grip · name+counts · slots · type · actions) */
.source-group-header .src-grip { color: var(--muted-fg-soft); cursor: grab; font-size: 14px; letter-spacing: -2px; user-select: none; flex: none; }
.source-group-header .src-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.src-name-input
{
    border: none !important; background: transparent !important; padding: 2px 4px !important; margin: 0 !important;
    font-size: 14px; font-weight: 600; color: var(--fg); height: auto !important; min-width: 0; width: 100%; max-width: none;
}
.src-name-input:hover { background: var(--card) !important; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--border); }
.src-name-input:focus { background: var(--card) !important; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--primary); outline: none; }
.src-sub { font-size: 11.5px; color: var(--muted-fg); padding-left: 4px; }
.source-group-header .src-slots, .source-group-header .src-field { display: flex; flex-direction: column; gap: 2px; flex: none; }
.src-slots-label, .src-field-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-fg-soft); }
.source-group-header .src-field input[type="number"] { width: 60px; text-align: center; font-family: var(--font-mono); padding: 4px 6px !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; background: var(--card) !important; height: auto !important; margin: 0 !important; }
.source-group-header .src-slots input
{
    width: 60px; text-align: center; font-family: var(--font-mono); padding: 4px 6px !important;
    border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; background: var(--card) !important; height: auto !important; margin: 0 !important;
}
.source-group-header .iconbtn
{
    flex: none; width: 30px; height: 30px; padding: 0 !important; display: inline-grid; place-items: center;
    border: none; background: transparent; border-radius: var(--radius-sm); color: var(--muted-fg); cursor: pointer;
}
.source-group-header .iconbtn:hover:not(:disabled) { background: var(--muted); color: var(--fg); }
.source-group-header .iconbtn.danger:hover:not(:disabled) { background: rgba(220,38,38,0.08); color: var(--error); }
.source-group-header .iconbtn > svg, .source-group-header .iconbtn svg.icon { width: 16px !important; height: 16px !important; }
/* the inline params builder sits flush inside the card body */
.source-group-body > .params-inline { border: none; box-shadow: none; border-radius: 0; background: transparent; }

/* generic icon-only button (param remove, source header actions) */
.iconbtn { width: 30px; height: 30px; padding: 0; display: inline-grid; place-items: center; border: none; background: transparent; border-radius: var(--radius-sm); color: var(--muted-fg); cursor: pointer; }
.iconbtn:hover:not(:disabled) { background: var(--muted); color: var(--fg); }
.iconbtn.danger:hover:not(:disabled) { background: rgba(220,38,38,0.08); color: var(--error); }
.iconbtn:disabled, .iconbtn.disabled { opacity: 0.4; pointer-events: none; background: transparent; }
.iconbtn > svg, .iconbtn svg.icon { width: 16px !important; height: 16px !important; }

/* ---------------------------------------------------------------
   Inline parameter editor — prototype "param-row" grid.
   One OR-group per bordered box; rows read "where / and / or … equals <value>".
   OR groups are joined by an "OR" pill; each group has its own Add parameter (AND).
   --------------------------------------------------------------- */
.params-inline { background: transparent; border: none; box-shadow: none; border-radius: 0; overflow: visible; display: flex; flex-direction: column; gap: 10px; padding: 8px 0 0; }

.or-group { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 6px 12px 10px; display: flex; flex-direction: column; background: var(--card); }
.source-group.exclude .or-group { border-color: rgba(220,38,38,0.18); }

.param-row { display: grid; grid-template-columns: 48px minmax(160px, 200px) 52px minmax(0, 1fr) 30px; align-items: center; gap: 10px; padding: 6px 0; }
.param-conn { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-fg-soft); text-align: right; }
.param-eq { font-size: 12px; color: var(--muted-fg); text-align: center; }
.param-type { min-width: 0; }
.param-type .input, .param-type .dropdown { min-width: 0 !important; width: 100% !important; margin: 0 !important; }
.param-value { min-width: 0; }
.param-value .input { min-width: 0 !important; width: 100%; margin: 0 !important; }
.param-value-empty { font-size: 12px; color: var(--muted-fg-soft); }

/* OR pill + line between groups (matches the source-to-source connector) */
.param-or { display: flex; align-items: center; gap: 8px; margin: 2px 0; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--muted-fg); }
.param-or-line { height: 1px; background: var(--border); flex: 1; }
.param-or .iconbtn { flex: none; }

/* group + source add buttons and the footer Save-source action */
.param-add-and { align-self: flex-start; margin-top: 6px; }
.param-add-or { align-self: flex-start; }
.params-foot { display: flex; justify-content: flex-end; padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--border); }

/* ================================================================
   PROTOTYPE — modal picks as named chips + subtle segmented toggle
   ================================================================ */
.picks-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pick-chip { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: var(--radius-full); background: var(--muted); border: 1px solid var(--border); font-size: 12.5px; font-weight: 500; color: var(--fg); white-space: nowrap; }
.pick-chip-more { color: var(--muted-fg); font-family: var(--font-mono); }
/* modal field row (label above each; two fields side by side) */
.pdx-field-row { display: flex; gap: 12px; align-items: flex-end; }
.pdx-field-col { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.pdx-field-col.pdx-field-slots { flex: 0 0 92px; }

/* upload modal */
.upload-dropzone { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--muted); cursor: pointer; text-align: center; color: var(--muted-fg); font-size: 13px; }
.upload-dropzone:hover { border-color: var(--primary); background: var(--primary-tint); color: var(--primary-tint-fg); }
.upload-dropzone > svg { width: 22px; height: 22px; }
.upload-dropzone input[type="file"] { font-size: 12px; color: var(--muted-fg); }
.upload-summary { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; background: var(--muted); }
.upload-summary-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--muted-fg); }
.upload-summary-row > code { font-family: var(--font-mono); color: var(--fg); font-weight: 600; }
.upload-notfound { display: flex; flex-wrap: wrap; gap: 6px; max-height: 120px; overflow-y: auto; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--muted); }
.upload-notfound > code { font-family: var(--font-mono); font-size: 11.5px; color: var(--error); }

/* ================================================================
   COLLECTIONS LIST — state filter chips (view-state only)
   ================================================================ */
/* tiny state filter chips, inline next to the search (match design) */
.list-state-chips { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.state-chip
{
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: var(--radius-full);
    background: var(--muted); border: 1px solid var(--border);
    font-size: 12px; font-weight: 500; color: var(--fg); cursor: pointer;
    transition: background 120ms, border-color 120ms, color 120ms;
}
    .state-chip:hover { background: var(--primary-tint); border-color: var(--accent-strong); color: var(--primary-tint-fg); }
    .state-chip.active { background: var(--primary-tint); border-color: var(--accent-strong); color: var(--primary-tint-fg); }
    .state-chip.disabled { opacity: 0.5; pointer-events: none; }
    .state-chip-count { font-size: 11px; color: var(--muted-fg-soft); }
    .state-chip.active .state-chip-count { color: var(--primary-tint-fg); }

/* list STATE cell — rounded state pill that opens a switcher (keeps our state icons) */
.state-cell { overflow: visible; position: relative; }
.state-switch { position: relative; display: inline-block; }
/* compact switcher: the solid bright state pill IS the trigger (icon + label + small caret) */
/* core.min.css forces button { height:42px; text-transform:uppercase; letter-spacing:2px } — undo it */
.state-badge-btn { -webkit-appearance: none; appearance: none; font-family: inherit; cursor: pointer; user-select: none; height: auto; padding: 2px 8px; line-height: 1.3; text-transform: none; letter-spacing: normal; width: auto; }
.state-badge-btn:hover { filter: brightness(0.95); }
.state-badge-caret { width: 11px !important; height: 11px !important; opacity: 0.85; margin-left: 1px; flex: none; }

/* row actions: sharp, slightly darker icons; no text-selection artifacts on the toolbar/headers */
.ex-actions { display: inline-flex; align-items: center; gap: 2px; user-select: none; }
.ex-actions .iconbtn { color: var(--muted-fg-strong); }
.ex-actions .iconbtn:hover:not(:disabled) { color: var(--fg); }
.ex-actions .iconbtn.danger:hover:not(:disabled) { color: var(--error); }
/* no text-selection artifacts when hovering/dragging rows; inputs stay selectable */
.list-card table, .list-head-tools, .list-state-chips { user-select: none; }
.list-card table input, .list-card table textarea { user-select: text; }
/* leading row-select checkbox (bulk add-to-context).
   core.min.css hides bare checkboxes (input[type=checkbox]{display:none} + custom label) — force ours visible. */
/* core forces thead>tr>th>input{height:63px} and hides bare checkboxes — override both, keep it 15px */
.list-select { -webkit-appearance: auto !important; appearance: auto !important; display: inline-block !important; accent-color: var(--primary); width: 15px !important; height: 15px !important; cursor: pointer; margin: 0 8px 0 0; flex: none; vertical-align: middle; }

/* confirm modal (delete) — icon + message, solid-red confirm */
.confirm-body { flex-direction: row !important; align-items: flex-start; gap: 12px; padding: 22px; }
.confirm-icon { width: 36px; height: 36px; border-radius: var(--radius-full); display: grid; place-items: center; flex: none; }
.confirm-icon.danger { background: rgba(220,38,38,0.10); color: var(--error); }
.confirm-icon > svg, .confirm-icon svg.icon { width: 17px !important; height: 17px !important; color: currentColor !important; fill: currentColor !important; }
.confirm-text { display: flex; flex-direction: column; gap: 3px; }
.confirm-title { font-size: 15px; font-weight: 600; color: var(--fg); }
.confirm-sub { font-size: 13px; color: var(--muted-fg); line-height: 1.5; }
.confirm-sub strong { color: var(--fg); font-weight: 600; }
/* solid destructive button — used only for explicit "Delete collection" confirmation */
.ex-btn-danger-solid { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--radius-md); font-size: 13px; font-weight: 600; color: #fff; background: var(--error); border: 1px solid var(--error); cursor: pointer; white-space: nowrap; }
.ex-btn-danger-solid:hover:not(:disabled) { background: #B91C1C; border-color: #B91C1C; }
.ex-btn-danger-solid > svg, .ex-btn-danger-solid svg.icon { width: 15px !important; height: 15px !important; color: #fff !important; fill: #fff !important; }
/* Above the sidebar (#left is z-index 1001) so a click anywhere outside the menu — including on the
   sidebar/chrome — lands on the catcher and closes it; still below modals (1099+). */
.state-menu-catcher { position: fixed; inset: 0; z-index: 1090; }
.state-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 1091; min-width: 248px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 4px; display: flex; flex-direction: column; gap: 2px; }
.state-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: none; border-radius: var(--radius-sm); padding: 7px 8px; cursor: pointer; }
.state-menu-item:hover { background: var(--muted); }
.state-menu-desc { flex: 1; min-width: 0; font-size: 11.5px; color: var(--muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.state-menu-check { width: 15px !important; height: 15px !important; color: var(--primary) !important; fill: var(--primary) !important; flex: none; }

/* ================================================================
   AISLE CONTEXTS tab — context rows + add panel (design system)
   ================================================================ */
.aisles-pane { display: flex; flex-direction: column; }
.aisles-loading { color: var(--muted-fg); font-size: 13px; }
.aisles-head-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.aisles-head { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.aisles-head h2 { font-size: 16px; font-weight: 600; margin: 0; }
.aisles-head .sub { font-size: 12px; color: var(--muted-fg); }

.ctx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ctx-name { font-size: 13.5px; font-weight: 600; color: var(--fg); }
.ctx-sub { font-size: 11.5px; color: var(--muted-fg); }
.ctx-sub .mono { font-family: var(--font-mono); }

/* serving-context cards with a status-coloured left spine */
.ctx-serving-list { display: flex; flex-direction: column; gap: 8px; }
.ctx-serving { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.ctx-serving-spine { width: 3px; align-self: stretch; flex: none; background: var(--muted-fg-soft); }
.ctx-serving.active .ctx-serving-spine { background: var(--success); }
.ctx-serving.paused .ctx-serving-spine { background: var(--warning); }
.ctx-serving.scheduled .ctx-serving-spine { background: var(--info); }
.ctx-serving.draft .ctx-serving-spine { background: var(--border-strong); }
.ctx-serving .ctx-main { padding-left: 16px; }

/* ghost "− Remove" action */
.ctx-remove { -webkit-appearance: none; appearance: none; font: inherit; height: auto; text-transform: none; letter-spacing: normal; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: none; border-radius: var(--radius-md); background: transparent; color: var(--muted-fg); font-size: 12.5px; font-weight: 500; cursor: pointer; flex: none; }
.ctx-remove:hover:not(:disabled) { color: var(--error); background: rgba(220,38,38,0.07); }
.ctx-remove:disabled, .ctx-remove.disabled { opacity: 0.5; pointer-events: none; background: transparent; }
.ctx-remove > svg, .ctx-remove svg.icon { width: 14px !important; height: 14px !important; color: currentColor !important; fill: currentColor !important; }

/* anchored "Add to a context" popover */
.ctx-add-wrap { position: relative; flex: none; }
/* Same reasoning as .state-menu-catcher above: at z-index 40 this sat BELOW the sidebar (1001), so a
   click on the sidebar/chrome never reached the catcher and the popover stayed open. Match the state
   menu's layer — above the sidebar, still below modals (1099+). */
.ctx-pop-backdrop { position: fixed; inset: 0; z-index: 1090; }
.ctx-pop { position: absolute; top: calc(100% + 6px); right: 0; width: 380px; max-width: 80vw; z-index: 1091; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 0; }
.ctx-pop-head { padding: 12px 14px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.ctx-pop-title { font-size: 13px; font-weight: 600; color: var(--fg); }
.ctx-add-search { display: flex; width: 100%; height: 32px; }
.ctx-add-search .pdx-search-input { font-size: 12.5px; }
.ctx-pop-body { max-height: 300px; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.ctx-pop-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-md); }
.ctx-pop-row:hover { background: var(--muted); }
.ctx-pop-note { padding: 20px 12px; text-align: center; font-size: 12.5px; color: var(--muted-fg); }

/* bottom info note */
.ctx-note { display: flex; align-items: center; gap: 7px; margin-top: 16px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 12px; color: var(--muted-fg); }
.ctx-note > svg, .ctx-note svg.icon { width: 14px !important; height: 14px !important; color: var(--muted-fg-soft) !important; fill: var(--muted-fg-soft) !important; flex: none; }

/* bigger empty box for "not serving anywhere yet" */
.aisles-empty { padding: 52px 20px; }

/* ================================================================
   DATE PICKER — light theme (core.min.css ships a dark #333 popup)
   ================================================================ */
.datepicker { background: var(--card) !important; border: 1px solid var(--border) !important; color: var(--fg) !important; box-shadow: var(--shadow-lg) !important; border-radius: var(--radius) !important; }
.datepicker > .footer { background: var(--card) !important; border-top: 1px solid var(--border) !important; }
.datepicker > .main > .month > .name { color: var(--fg); }
.datepicker > .main > .month > .name > .sub { color: var(--muted-fg); }
.datepicker > .main > .month > .week > .day { color: var(--fg); }
.datepicker > .main > .month > .week > .day:hover { background: var(--muted) !important; }
.datepicker > .main > .month > .week > .day:first-child,
.datepicker > .main > .month > .week > .day:last-child { color: var(--muted-fg); }
.datepicker > .main > .month > .week > .day.disabled { color: #CBCBCB !important; }
.datepicker > .main > .month > .week > .day.name { color: var(--muted-fg-soft); }
.datepicker > .main > .month > .week > .day.selected { background: var(--primary) !important; color: #fff !important; }
.datepicker > .main > .month > .week > .day.today { border-color: var(--primary) !important; }
.datepicker > .main > .separator { border-top-color: var(--border) !important; }

/* ---------------------------------------------------------------- responsive: collapse sidebar on narrow screens */
@media (max-width: 900px)
{
    body { padding-left: 0; }
    header, .overmenu { left: 0; }
    header > .button:first-child { display: flex; }   /* restore the toggle */
    #left { left: -100% !important; transition: left 150ms ease-in-out; }
    #left.visible { left: 0 !important; }
}