/* ─── Telerik Window host ────────────────────────────────────────────────── */
/* The .k-window element is centered inside the overlay via margin:auto.     */
/* Zero that margin so no gap appears between the window edge and component. */
.ui-modal-telerik-window.k-window {
    margin: 0 !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 32px rgba(26,31,36,0.18), 0 2px 8px rgba(26,31,36,0.1) !important;
    overflow: hidden !important;
}

/* Strip content padding, fill full height, propagate flex column down. */
.ui-modal-telerik-window .k-window-content {
    padding: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.ui-modal-shell {
    background: var(--ui-modal-bg);
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

    /* Lock only the checkbox on the required leaf item itself.
    :not(:has(.k-animation-container)) excludes group-level items —
    groups always have a .k-animation-container direct child wrapping
    their children, leaf items never do.                              */
    .ui-modal-shell .k-treeview-item:not(:has(.k-animation-container)):has(.ui-modal-tree-leaf-required) .k-checkbox-wrap {
        pointer-events: none;
        opacity: 0.55;
        cursor: not-allowed;
    }


/* ─── Close bar ──────────────────────────────────────────────────────────── */
.ui-modal-topbar-close {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 8px 14px;
    background: var(--ui-modal-bg-elev);
    border-bottom: 1px solid var(--ui-modal-line);
    flex-shrink: 0;
}

/* ─── Main topbar ────────────────────────────────────────────────────────── */
.ui-modal-topbar {
    display: grid;
    grid-template-columns: 260px 1fr;
    align-items: center;
    gap: 0;
    padding: 0;
    background: var(--ui-modal-bg-elev);
    border-bottom: 1px solid var(--ui-modal-line);
    flex-shrink: 0;
}

.ui-modal-topbar-left {
    display: flex;
    align-items: center;
    padding: 12px 18px 12px 22px;
}

.ui-modal-topbar-right {
    display: flex;
    justify-content: space-between; /* combo group grows left, save button sits right */
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
}

/* ─── Close button ───────────────────────────────────────────────────────── */
.ui-modal-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ui-modal-bg-subtle);
    border: 1px solid var(--ui-modal-line);
    border-radius: 6px;
    color: var(--ui-modal-ink-3);
    cursor: pointer;
    transition: all 0.15s;
}

    .ui-modal-close:hover {
        background: var(--ui-modal-bg-rail);
        color: var(--ui-modal-ink);
    }

/* ─── Mode toggle ────────────────────────────────────────────────────────── */
.ui-modal-mode-toggle {
    display: inline-flex;
    background: var(--ui-modal-bg-rail);
    border: 1px solid var(--ui-modal-line);
    border-radius: 9px;
    padding: 3px;
    gap: 2px;
}

.ui-modal-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ui-modal-ink-3);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.18s var(--ui-modal-ease);
    letter-spacing: -0.005em;
}

    .ui-modal-mode-btn:hover {
        color: var(--ui-modal-ink);
    }

    .ui-modal-mode-btn.is-active {
        background: var(--ui-modal-bg-elev);
        color: var(--ui-modal-ink);
        box-shadow: 0 1px 2px rgba(26,31,36,0.06);
    }

/* ─── View name field (legacy — superseded by combobox) ──────────────────── */
.ui-modal-view-name-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 12px;
    background: var(--ui-modal-bg-elev);
    border: 1px solid var(--ui-modal-line);
    border-radius: 9px;
    transition: border-color 0.15s;
}

    .ui-modal-view-name-wrap:focus-within {
        border-color: var(--ui-modal-ink-3);
    }

.ui-modal-view-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    color: var(--ui-modal-ink-4);
    font-size: 9px;
}

.ui-modal-view-input {
    font-size: 12px;
    font-weight: 500;
    color: var(--ui-modal-ink);
    background: transparent;
    border: none;
    outline: none;
    min-width: 130px;
}

    .ui-modal-view-input::placeholder {
        color: var(--ui-modal-ink-4);
    }

.ui-modal-field-count {
    font-size: 11px;
    color: var(--ui-modal-ink-3);
    padding-left: 8px;
    border-left: 1px solid var(--ui-modal-line);
    font-variant-numeric: tabular-nums;
}

/* ─── Save button ────────────────────────────────────────────────────────── */
/*
 * TelerikButton renders .k-button alongside our class. Telerik's theme
 * sets background, border, and padding on .k-button at equal specificity
 * and loads after this file, so !important is required on the overridden
 * properties. Everything else (color, font, transition) doesn't need it.
 */
.ui-modal-save-btn.k-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px !important;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--ui-modal-font-ui);
    color: var(--ui-modal-ink-2);
    background: transparent !important;
    border: 1px solid var(--ui-modal-line) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: color 0.18s var(--ui-modal-ease), background 0.18s var(--ui-modal-ease), border-color 0.18s var(--ui-modal-ease);
    white-space: nowrap;
    -webkit-appearance: none;
    appearance: none;
}

    .ui-modal-save-btn.k-button:hover {
        background: var(--ui-modal-bg-rail) !important;
        border-color: var(--ui-modal-ink-3) !important;
        color: var(--ui-modal-ink);
    }

    .ui-modal-save-btn.k-button.k-disabled,
    .ui-modal-save-btn.k-button:disabled {
        opacity: 0.4 !important;
        cursor: not-allowed !important;
        background: transparent !important;
        border-color: var(--ui-modal-line) !important;
    }

    .ui-modal-save-btn.k-button:focus-visible {
        outline: 2px solid var(--ui-modal-accent);
        outline-offset: 2px;
        box-shadow: none !important;
    }

    .ui-modal-save-btn.k-button .k-button-icon {
        font-size: 13px !important;
        color: currentColor;
    }

/* ─── Shell body ─────────────────────────────────────────────────────────── */
.ui-modal-shell-body {
    display: flex;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    align-items: flex-start;
}

/* ─── Layout grids ───────────────────────────────────────────────────────── */
.ui-modal-composer {
    display: grid;
    grid-template-columns: 260px 1fr;
    flex: 1;
    width: 100%;
    min-height: 0;
}

.ui-modal-studio {
    display: grid;
    grid-template-columns: 280px 1fr;
    flex: 1;
    width: 100%;
    align-items: flex-start;
}

    .ui-modal-composer > *,
    .ui-modal-studio > * {
        min-width: 0;
        min-height: 0;
    }

/* ─── Tree / left panel ──────────────────────────────────────────────────── */
.ui-modal-tree-panel {
    padding: 28px 18px 20px 22px;
    border-right: 1px solid var(--ui-modal-line);
    background: var(--ui-modal-bg-rail);
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: visible;
    align-self: stretch;
}

/* ─── Active / right panel ───────────────────────────────────────────────── */
.ui-modal-active-panel {
    padding: 0;
    border-left: 1px solid var(--ui-modal-line);
    background: var(--ui-modal-bg-elev);
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: visible;
}

/* ─── Studio header ──────────────────────────────────────────────────────── */
.ui-modal-studio-header {
    margin-bottom: 2px;
}

.ui-modal-studio-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ui-modal-accent);
    margin-bottom: 12px;
}

.ui-modal-studio-title {
    font-family: var(--ui-modal-font-display);
    font-weight: 400;
    font-size: 21px;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--ui-modal-ink);
    margin: 0 0 8px;
}

    .ui-modal-studio-title em {
        font-style: italic;
        font-weight: 300;
        color: var(--ui-modal-ink-2);
    }

.ui-modal-studio-sub {
    font-size: 12px;
    line-height: 1.55;
    color: var(--ui-modal-ink-3);
}

/* ─── Eyebrow atoms ──────────────────────────────────────────────────────── */
.ui-modal-rail-eyebrow-num {
    font-family: var(--ui-modal-font-mono);
    font-size: 9px;
    color: var(--ui-modal-ink-3);
    font-weight: 500;
    letter-spacing: 0;
}

.ui-modal-rail-eyebrow-divider {
    width: 10px;
    height: 1px;
    background: var(--ui-modal-line-2);
    display: inline-block;
}

/* ─── Search ─────────────────────────────────────────────────────────────── */
.ui-modal-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.ui-modal-search-icon {
    position: absolute;
    left: 10px;
    color: var(--ui-modal-ink-4);
    font-size: 13px;
    pointer-events: none;
}

.ui-modal-search-input {
    width: 100%;
    padding: 9px 30px 9px 30px; /* right padding makes room for the clear button */
    background: var(--ui-modal-bg-elev);
    border: 1px solid var(--ui-modal-line);
    border-radius: 8px;
    font-size: 12px;
    color: var(--ui-modal-ink);
    outline: none;
    transition: all 0.18s var(--ui-modal-ease);
}

    .ui-modal-search-input:focus {
        border-color: var(--ui-modal-accent);
        background: var(--ui-modal-bg-card);
        box-shadow: 0 0 0 3px rgba(15,94,92,0.08);
    }

    .ui-modal-search-input::placeholder {
        color: var(--ui-modal-ink-4);
    }

.ui-modal-search-clear {
    position: absolute;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--ui-modal-ink-3);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--ui-transition-base), background var(--ui-transition-base);
}

    .ui-modal-search-clear:hover {
        opacity: 1;
        background: var(--ui-modal-line);
    }

/* ─── Tree meta line ─────────────────────────────────────────────────────── */
.ui-modal-tree-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    color: var(--ui-modal-ink-3);
    padding: 0 2px;
}

.ui-modal-tree-meta-dot {
    color: var(--ui-modal-ink-5);
}

/* ══════════════════════════════════════════════════════════════════════════
   TREE VIEW
   ══════════════════════════════════════════════════════════════════════════

   VERIFIED TELERIK DOM STRUCTURE
   ──────────────────────────────
   li.k-treeview-item
     span.k-treeview-top | .k-treeview-mid | .k-treeview-bot
       span.k-treeview-toggle        (expand/collapse — group rows only)
       span.k-checkbox-wrap
         input.k-checkbox
       span.k-treeview-leaf
         span.ui-modal-tree-group-row  OR  span.ui-modal-tree-leaf-row

     div.k-animation-container
       div.k-child-animation-container
         ul.k-treeview-group

   HOVER BEHAVIOUR — TOGGLE COVERAGE
   ───────────────────────────────────
   Telerik's theme applies a positive margin-left to the row element
   (.k-treeview-top/mid/bot) equal to the toggle width, and pulls the toggle
   itself leftward with a negative margin so it sits in that reserved gap.
   Any background applied directly to the row element therefore starts to the
   RIGHT of the toggle — the toggle is always left uncovered.

   Fix: ::before pseudo-element on the row, extended left by the toggle
   offset (default 24px), paints the hover fill across the full visual width
   including the toggle. Row children are given z-index: 1 so they sit above
   the pseudo-element. Adjust left: -24px if your theme uses a different
   toggle reservation width (inspect .k-treeview-top margin-left in DevTools).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tree container ── */
.ui-modal-tree {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    /* ── Telerik root ── */
    .ui-modal-tree .k-treeview {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        font-family: var(--ui-modal-font-ui);
    }

    /* ── Tree item ── */
    .ui-modal-tree .k-treeview-item {
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
    }

    /* ── Child group UL ── */
    .ui-modal-tree .k-treeview-group {
        margin: 0 !important;
        padding-left: 14px !important;
        position: relative !important;
    }

    /* ── Animation containers ── */
    .ui-modal-tree .k-animation-container,
    .ui-modal-tree .k-child-animation-container {
        overflow: visible !important;
    }

    /* ── ALL THREE row position classes (top / mid / bot) ─────────────────────
 * Telerik assigns one of these depending on the item's position in the list.
 * Every layout and interaction rule must target all three.
 */
    .ui-modal-tree .k-treeview-top,
    .ui-modal-tree .k-treeview-mid,
    .ui-modal-tree .k-treeview-bot {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        padding: 5px 7px !important;
        border-radius: 4px !important;
        cursor: pointer !important;
        transition: background 0.12s !important;
        background: transparent !important;
        outline: none !important;
        box-shadow: none !important;
        width: 100% !important;
    }

        /* ── Group rows: extra vertical padding ── */
        .ui-modal-tree .k-treeview-top:has(.ui-modal-tree-group-row),
        .ui-modal-tree .k-treeview-mid:has(.ui-modal-tree-group-row),
        .ui-modal-tree .k-treeview-bot:has(.ui-modal-tree-group-row) {
            padding: 7px 8px !important;
        }

    /* ── Group rows: hover that engulfs the expand/collapse toggle ────────────
 *
 * ROOT CAUSE: Telerik's theme applies a positive margin-left to the row
 * element (.k-treeview-top/mid/bot) equal to the toggle width, and pulls
 * the toggle itself left with a negative margin so it visually sits in that
 * gap. The row's own background rectangle therefore starts to the RIGHT of
 * the toggle — no matter what background we apply to the row element, the
 * toggle is always left uncovered.
 *
 * FIX: Use a ::before pseudo-element on the row to paint the hover fill.
 * The pseudo-element is taken out of the row's margin box using a negative
 * left value that extends it back to the item's true left edge, covering
 * the toggle. position: relative on .k-treeview-item establishes the
 * stacking context so the pseudo-element doesn't bleed outside the item.
 *
 * The negative left offset (--tree-toggle-w) should match the width Telerik
 * reserves for the toggle in your theme. Default Telerik SASS theme = 24px.
 * Inspect .k-treeview-top margin-left in DevTools and adjust if needed.
 */
    .ui-modal-tree .k-treeview-item {
        position: relative !important;
    }

    .ui-modal-tree .k-treeview-top,
    .ui-modal-tree .k-treeview-mid,
    .ui-modal-tree .k-treeview-bot {
        position: relative !important;
    }

        .ui-modal-tree .k-treeview-top::before,
        .ui-modal-tree .k-treeview-mid::before,
        .ui-modal-tree .k-treeview-bot::before {
            content: '' !important;
            position: absolute !important;
            inset: 0 !important;
            left: -24px !important; /* extend leftward to cover the toggle — adjust to match theme */
            border-radius: 4px !important;
            background: transparent !important;
            pointer-events: none !important;
            z-index: 0 !important;
            transition: background 0.12s !important;
        }

        /* Fire on both CSS :hover and Telerik JS .k-hover */
        .ui-modal-tree .k-treeview-top:has(.ui-modal-tree-group-row):hover::before,
        .ui-modal-tree .k-treeview-mid:has(.ui-modal-tree-group-row):hover::before,
        .ui-modal-tree .k-treeview-bot:has(.ui-modal-tree-group-row):hover::before,
        .ui-modal-tree .k-treeview-top:has(.ui-modal-tree-group-row).k-hover::before,
        .ui-modal-tree .k-treeview-mid:has(.ui-modal-tree-group-row).k-hover::before,
        .ui-modal-tree .k-treeview-bot:has(.ui-modal-tree-group-row).k-hover::before {
            background: var(--ui-modal-bg-elev) !important;
        }

    /* Ensure all row children sit above the pseudo-element */
    .ui-modal-tree .k-treeview-toggle,
    .ui-modal-tree .k-checkbox-wrap,
    .ui-modal-tree .k-treeview-leaf {
        position: relative !important;
        z-index: 1 !important;
    }

    /* ── Focus ── */
    .ui-modal-tree .k-treeview-top:focus,
    .ui-modal-tree .k-treeview-mid:focus,
    .ui-modal-tree .k-treeview-bot:focus {
        outline: none !important;
        box-shadow: none !important;
    }

    .ui-modal-tree .k-treeview-top:focus-visible,
    .ui-modal-tree .k-treeview-mid:focus-visible,
    .ui-modal-tree .k-treeview-bot:focus-visible {
        outline: 2px solid var(--ui-modal-accent) !important;
        outline-offset: 1px !important;
    }

    /* ── Kill ALL hover/k-hover on .k-treeview-leaf ───────────────────────────
 *
 * Telerik's JS adds .k-hover to .k-treeview-leaf on mouse-enter.
 * Because the leaf starts after .k-treeview-toggle, that hover fill
 * excludes the toggle. We suppress it entirely here — hover background
 * is driven exclusively by the row element rules above.
 */
    .ui-modal-tree .k-treeview-leaf,
    .ui-modal-tree .k-treeview-leaf:hover,
    .ui-modal-tree .k-treeview-leaf.k-hover {
        background: transparent !important;
        background-color: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

    /* ── .k-treeview-leaf — content wrapper ── */
    .ui-modal-tree .k-treeview-leaf {
        display: flex !important;
        align-items: center !important;
        flex: 1 !important;
        min-width: 0 !important;
        gap: 0 !important;
        cursor: pointer !important;
    }

    /* ── Expand/collapse toggle ───────────────────────────────────────────────
 * Always transparent background — the row's hover background covers it.
 * Explicit reset of any .k-hover Telerik may inject onto the toggle itself.
 */
    .ui-modal-tree .k-treeview-toggle,
    .ui-modal-tree .k-treeview-toggle:hover,
    .ui-modal-tree .k-treeview-toggle.k-hover {
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }

    .ui-modal-tree .k-treeview-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 16px !important;
        height: 16px !important;
        flex-shrink: 0 !important;
        cursor: pointer !important;
        color: var(--ui-modal-ink-3) !important;
    }

        .ui-modal-tree .k-treeview-toggle .k-svg-icon {
            width: 14px !important;
            height: 14px !important;
            color: var(--ui-modal-ink-3) !important;
        }

            .ui-modal-tree .k-treeview-toggle .k-svg-icon svg {
                width: 14px !important;
                height: 14px !important;
                fill: var(--ui-modal-ink-3) !important;
            }

                .ui-modal-tree .k-treeview-toggle .k-svg-icon svg path {
                    fill: var(--ui-modal-ink-3) !important;
                }

    /* ── Selected rows ── */
    .ui-modal-tree .k-treeview-item.k-selected > .k-treeview-top,
    .ui-modal-tree .k-treeview-item.k-selected > .k-treeview-mid,
    .ui-modal-tree .k-treeview-item.k-selected > .k-treeview-bot {
        background: var(--ui-modal-accent-soft) !important;
    }

    /* ── Checkbox ── */
    .ui-modal-tree .k-checkbox-wrap {
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }

    .ui-modal-tree input.k-checkbox {
        width: 14px !important;
        height: 14px !important;
        flex-shrink: 0 !important;
        cursor: pointer !important;
        margin: 0 !important;
        border-radius: 3px !important;
        box-shadow: none !important;
        accent-color: var(--ui-modal-accent) !important;
    }

        .ui-modal-tree input.k-checkbox:not(:checked):not(:indeterminate) {
            background-color: var(--ui-modal-bg-elev) !important;
            border: 1.5px solid var(--ui-modal-line-2) !important;
        }

        .ui-modal-tree input.k-checkbox:checked {
            background-color: var(--ui-modal-accent) !important;
            border-color: var(--ui-modal-accent) !important;
        }

            .ui-modal-tree input.k-checkbox:checked::after {
                border-color: #ffffff !important;
            }

        .ui-modal-tree input.k-checkbox:indeterminate {
            background-color: var(--ui-modal-warm-soft) !important;
            border-color: var(--ui-modal-warm) !important;
        }

            .ui-modal-tree input.k-checkbox:indeterminate::after {
                border-color: var(--ui-modal-warm) !important;
                background-color: var(--ui-modal-warm) !important;
            }

    /* ── Vertical connector line ── */
    .ui-modal-tree .k-animation-container .k-treeview-group {
        position: relative !important;
        padding-left: 14px !important;
        margin: 2px 0 5px !important;
    }

        .ui-modal-tree .k-animation-container .k-treeview-group::before {
            content: '' !important;
            position: absolute !important;
            left: 7px !important;
            top: 4px !important;
            bottom: 4px !important;
            width: 1px !important;
            background: var(--ui-modal-line) !important;
            pointer-events: none !important;
        }

/* ── Semantic group-row span ── */
.ui-modal-tree-group-row {
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
    min-width: 0 !important;
    gap: 6px !important;
    padding: 0 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: var(--ui-modal-ink-2) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

/* ── Semantic leaf-row span ── */
.ui-modal-tree-leaf-row {
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
    min-width: 0 !important;
    padding: 0 !important;
    font-size: 11.5px !important;
    font-weight: 400 !important;
    color: var(--ui-modal-ink-2) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
}

/* ── Group name span ── */
.ui-modal-tree-group-name {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* ── Selection count pill ── */
.ui-modal-tree-pill {
    font-family: var(--ui-modal-font-mono) !important;
    font-size: 9px !important;
    font-weight: 500 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    flex-shrink: 0 !important;
    line-height: 1.4 !important;
    margin-left: 4px !important;
}

.ui-modal-tree-pill-none {
    color: var(--ui-modal-ink-4) !important;
    background: var(--ui-modal-bg-elev) !important;
    border: 1px solid transparent !important;
}

.ui-modal-tree-pill-some {
    color: var(--ui-modal-warm) !important;
    background: var(--ui-modal-warm-soft) !important;
    border: 1px solid rgba(184,84,10,0.12) !important;
    font-weight: 600 !important;
}

.ui-modal-tree-pill-all {
    color: var(--ui-modal-accent) !important;
    background: var(--ui-modal-accent-soft) !important;
    border: 1px solid rgba(15,94,92,0.12) !important;
    font-weight: 600 !important;
}

/* ─── Active panel — header ──────────────────────────────────────────────── */
.ui-modal-active-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 28px 18px 14px;
    border-bottom: 1px solid var(--ui-modal-line);
    gap: 10px;
}

.ui-modal-active-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ui-modal-accent);
    margin-bottom: 5px;
}

.ui-modal-active-title {
    font-family: var(--ui-modal-font-display);
    font-style: italic;
    font-size: 16px;
    font-weight: 400;
    color: var(--ui-modal-ink);
    letter-spacing: -0.015em;
}

.ui-modal-active-count {
    font-family: var(--ui-modal-font-display);
    font-size: 26px;
    font-weight: 400;
    color: var(--ui-modal-ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.025em;
    line-height: 1;
}

/* ─── Active panel — field list ──────────────────────────────────────────── */
.ui-modal-active-list {
    display: flex;
    flex-direction: column;
}

.ui-modal-active-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ui-modal-active-group-header {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-bottom: 5px;
}

.ui-modal-active-group-rule {
    width: 12px;
    height: 1px;
    background: var(--ui-modal-accent);
    display: inline-block;
    flex-shrink: 0;
}

.ui-modal-active-group-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-modal-ink-2);
    font-size: 11px;
}

.ui-modal-active-group-name {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ui-modal-ink);
    flex: 1;
}

.ui-modal-active-group-count {
    font-family: var(--ui-modal-font-mono);
    font-size: 10px;
    color: var(--ui-modal-ink-4);
    font-weight: 500;
}

.ui-modal-active-fields {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ui-modal-active-field {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 8px 6px 10px;
    background: transparent;
    border-radius: 5px;
    transition: all 0.15s var(--ui-modal-ease);
}

    .ui-modal-active-field:hover {
        background: var(--ui-modal-bg-card);
        box-shadow: 0 1px 2px rgba(26,31,36,0.04);
    }

.ui-modal-active-field-label {
    font-size: 11.5px;
    color: var(--ui-modal-ink-2);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-modal-active-field-remove {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--ui-modal-ink-4);
    border: none;
    border-radius: 3px;
    cursor: pointer;
    opacity: 0;
    transition: all 0.15s var(--ui-modal-ease);
    flex-shrink: 0;
    font-size: 11px;
}

.ui-modal-active-field:hover .ui-modal-active-field-remove {
    opacity: 1;
}

.ui-modal-active-field-remove:hover {
    background: var(--ui-modal-warm-soft);
    color: var(--ui-modal-warm);
}

/* ─── Active panel — empty state ─────────────────────────────────────────── */
.ui-modal-active-empty {
    padding: 28px 8px;
    font-size: 12px;
    color: var(--ui-modal-ink-4);
    text-align: center;
    line-height: 1.6;
    font-style: italic;
    font-family: var(--ui-modal-font-display);
}

/* ─── Grid header cell ───────────────────────────────────────────────────── */
.ui-modal-grid-head-cell {
    background: var(--ui-modal-bg-elev) !important;
    font-size: 11px;
    font-weight: 600;
    color: var(--ui-modal-ink);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 10px 12px !important;
    border-bottom: 1.5px solid var(--ui-modal-line-strong) !important;
    white-space: nowrap;
}

/* ─── Active panel — Telerik grid reset ──────────────────────────────────── */
/*
 * All rules scoped to .ui-modal-active-list so only this grid is affected.
 * Telerik's theme loads after this file — !important is required on overrides.
 */

.ui-modal-active-list .k-grid-header {
    display: none !important;
}

.ui-modal-active-list .k-grid {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

    .ui-modal-active-list .k-grid-content,
    .ui-modal-active-list .k-grid-content-sticky,
    .ui-modal-active-list .k-grid .k-grid-container {
        background: transparent !important;
        background-color: transparent !important;
    }

    .ui-modal-active-list .k-grid table,
    .ui-modal-active-list .k-grid .k-table {
        border-collapse: collapse !important;
        border: none !important;
        background: transparent !important;
    }

    .ui-modal-active-list .k-grid tbody,
    .ui-modal-active-list .k-grid .k-table-tbody {
        background: transparent !important;
        background-color: transparent !important;
    }

    .ui-modal-active-list .k-grid td,
    .ui-modal-active-list .k-grid .k-table-td {
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        background-color: transparent !important;
        vertical-align: middle;
    }

    .ui-modal-active-list .k-table-alt-row,
    .ui-modal-active-list .k-grid tr.k-table-alt-row,
    .ui-modal-active-list .k-table-alt-row > td,
    .ui-modal-active-list .k-table-alt-row > .k-table-td,
    .ui-modal-active-list .k-grid .k-table-alt-row td {
        background: transparent !important;
        background-color: transparent !important;
    }

    .ui-modal-active-list .k-grid tr.k-selected,
    .ui-modal-active-list .k-grid tr.k-selected > td,
    .ui-modal-active-list .k-grid tr.k-selected > .k-table-td {
        background: transparent !important;
        background-color: transparent !important;
    }

    .ui-modal-active-list .k-grid tr.k-hover > td,
    .ui-modal-active-list .k-grid tr:hover > td {
        background: var(--ui-modal-bg-card) !important;
        background-color: var(--ui-modal-bg-card) !important;
    }

    .ui-modal-active-list .k-grid td:first-child {
        padding-left: 4px !important;
    }

    .ui-modal-active-list .k-grid td:last-child {
        padding-right: 8px !important;
    }

/* ─── Drag handle column ─────────────────────────────────────────────────── */
.ui-modal-active-list .k-drag-col {
    width: 32px !important;
    padding-left: 10px !important;
}

.ui-modal-active-list .k-drag-cell {
    color: var(--ui-modal-ink-5) !important;
    font-size: 12px;
}

/* ─── Order numeric textbox ──────────────────────────────────────────────── */
.ui-modal-order-input {
    width: 100% !important;
}

    .ui-modal-order-input .k-input-inner {
        font-family: var(--ui-modal-font-mono);
        font-size: 12px;
        font-weight: 500;
        color: var(--ui-modal-ink);
        text-align: center;
        padding: 4px 2px 4px 8px !important;
    }

    .ui-modal-order-input .k-input-spinner {
        opacity: 1 !important;
    }

    .ui-modal-order-input .k-spinner-increase,
    .ui-modal-order-input .k-spinner-decrease {
        border-color: var(--ui-modal-line-2) !important;
        color: var(--ui-modal-ink-3) !important;
    }

        .ui-modal-order-input .k-spinner-increase:hover,
        .ui-modal-order-input .k-spinner-decrease:hover {
            background: var(--ui-modal-bg-rail) !important;
            color: var(--ui-modal-ink) !important;
        }

/* ─── Field body — name + path stacked ──────────────────────────────────── */
.ui-modal-field-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 8px;
    min-width: 0;
}

.ui-modal-field-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--ui-modal-ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-modal-field-path {
    font-family: var(--ui-modal-font-mono);
    font-size: 9px;
    font-weight: 500;
    color: var(--ui-modal-ink-4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Remove button ──────────────────────────────────────────────────────── */
.ui-modal-field-remove.k-button {
    opacity: 0;
    transition: opacity 0.12s, background 0.12s, color 0.12s;
    color: var(--ui-modal-ink-4) !important;
}

.ui-modal-active-list .k-grid tr.k-hover .ui-modal-field-remove.k-button,
.ui-modal-active-list .k-grid tr:hover .ui-modal-field-remove.k-button {
    opacity: 1;
}

.ui-modal-field-remove.k-button:hover {
    background: var(--ui-modal-warm-soft) !important;
    color: var(--ui-modal-warm) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   VIEW NAME COMBOBOX  (TelerikComboBox-based)

   POPUP SCOPING STRATEGY
   ──────────────────────
   TelerikComboBox renders its dropdown popup by appending a
   .k-animation-container node directly to <body>, outside this component's
   DOM subtree. Ancestor selectors like .ui-modal-shell cannot reach it.

   PopupClass="ui-modal-combo-popup" (set on the TelerikComboBox element)
   injects that class onto the .k-animation-container Telerik creates,
   giving a stable component-specific scope for all popup rules below.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Badge + combobox group — fills available topbar space ───────────────── */
/*
   .ui-modal-topbar-right uses justify-content: space-between so this group
   grows leftward and the save button stays pinned right.
*/
.ui-modal-combo-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 0;
    min-width: 0;
    margin-right: 12px;
}

/* ── Mode badge ──────────────────────────────────────────────────────────── */
.ui-modal-combo-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid transparent;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

    .ui-modal-combo-badge.is-new {
        background: var(--ui-modal-warm-soft);
        color: var(--ui-modal-warm);
        border-color: rgba(184, 84, 10, 0.15);
    }

    .ui-modal-combo-badge.is-edit {
        background: var(--ui-modal-accent-soft);
        color: var(--ui-modal-accent-ink);
        border-color: rgba(15, 94, 92, 0.15);
    }

.ui-modal-combo-badge-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ui-modal-combo-badge.is-new .ui-modal-combo-badge-dot {
    background: var(--ui-modal-warm);
}

.ui-modal-combo-badge.is-edit .ui-modal-combo-badge-dot {
    background: var(--ui-modal-accent);
}

/* ── Combobox outer wrapper ───────────────────────────────────────────────── */
/*
   Carries the single outer border for the entire [ View | input | N fields ]
   control. TelerikComboBox and the field count chip have no borders of their
   own — they sit flush inside this wrapper separated only by internal dividers.
*/
.ui-modal-combo-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    flex: 1 1 0;
    min-width: 0;
    border-radius: 9px;
    overflow: hidden;
    border: 1px solid var(--ui-modal-line);
    background: var(--ui-modal-bg-elev);
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .ui-modal-combo-wrap:focus-within {
        border-color: var(--ui-modal-ink-3);
        box-shadow: 0 0 0 3px rgba(26, 31, 36, 0.05);
    }

    .ui-modal-combo-wrap.is-edit {
        border-left: 2px solid var(--ui-modal-accent);
    }

/* ── "View" prefix label ─────────────────────────────────────────────────── */
.ui-modal-combo-view-label {
    display: flex;
    align-items: center;
    padding: 0 9px 0 10px;
    border-right: 1px solid var(--ui-modal-line);
    flex-shrink: 0;
    font-family: var(--ui-modal-font-ui);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ui-modal-ink-4);
    white-space: nowrap;
}

/* ── Telerik ComboBox chrome ─────────────────────────────────────────────── */
/*
   Border and border-radius stripped — the wrapper provides the outer edge.
*/
.ui-modal-tb-combobox.k-combobox {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: 100% !important;
}

    .ui-modal-tb-combobox.k-combobox:focus-within {
        border: none !important;
        box-shadow: none !important;
    }

.ui-modal-tb-combobox .k-input-inner {
    font-family: var(--ui-modal-font-ui) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--ui-modal-ink) !important;
    background: transparent !important;
    padding: 6px 10px !important;
}

    .ui-modal-tb-combobox .k-input-inner::placeholder {
        color: var(--ui-modal-ink-4) !important;
        font-weight: 400 !important;
    }

.ui-modal-tb-combobox .k-clear-value,
.ui-modal-tb-combobox .k-input-button {
    color: var(--ui-modal-ink-4) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

    .ui-modal-tb-combobox .k-clear-value:hover,
    .ui-modal-tb-combobox .k-input-button:hover {
        color: var(--ui-modal-ink) !important;
        background: var(--ui-modal-bg-subtle) !important;
    }

/* ── Field count — right section of the unified control ─────────────────── */
/*
   Flex sibling of TelerikComboBox — NOT absolutely positioned.
   Internal left border divider only; no outer border of its own.
*/
.ui-modal-combo-field-count {
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-left: 1px solid var(--ui-modal-line);
    flex-shrink: 0;
    font-family: var(--ui-modal-font-ui);
    font-size: 11px;
    font-weight: 500;
    color: var(--ui-modal-ink-3);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

/* ── Validation error ────────────────────────────────────────────────────── */
.ui-modal-combo-error {
    display: block;
    font-size: 11px;
    color: #c0392b;
    margin-top: 4px;
    line-height: 1.4;
    white-space: normal;
}

/* ── Dropdown popup ──────────────────────────────────────────────────────── */
.ui-modal-combo-popup .k-list-container {
    background: var(--ui-modal-bg-card) !important;
    border: 1px solid var(--ui-modal-line) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 6px rgba(26, 31, 36, 0.05), 0 12px 32px rgba(26, 31, 36, 0.10) !important;
    overflow: hidden !important;
}

.ui-modal-combo-popup .k-list .k-list-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 12px !important;
    font-family: var(--ui-modal-font-ui) !important;
    font-size: 12.5px !important;
    color: var(--ui-modal-ink-2) !important;
    background: transparent !important;
    cursor: pointer !important;
    transition: background 0.12s !important;
}

    .ui-modal-combo-popup .k-list .k-list-item:hover {
        background: var(--ui-modal-bg-subtle) !important;
    }

    .ui-modal-combo-popup .k-list .k-list-item.k-selected,
    .ui-modal-combo-popup .k-list .k-list-item.k-focus {
        background: var(--ui-modal-accent-soft) !important;
        color: var(--ui-modal-accent-ink) !important;
    }

.ui-modal-combo-popup .k-list .k-list-item-text {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
}

.ui-modal-combo-item-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-modal-combo-item-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: var(--ui-modal-ink-5);
    opacity: 0;
    transition: opacity 0.12s, background 0.12s, color 0.12s;
    padding: 0;
}

.ui-modal-combo-popup .k-list .k-list-item:hover .ui-modal-combo-item-delete {
    opacity: 1;
}

.ui-modal-combo-item-delete:hover {
    background: var(--ui-modal-warm-soft) !important;
    color: var(--ui-modal-warm) !important;
}

.ui-modal-combo-no-data {
    display: block;
    padding: 12px;
    font-size: 12px;
    color: var(--ui-modal-ink-3);
    font-style: italic;
    font-family: var(--ui-modal-font-display);
    line-height: 1.5;
}

    .ui-modal-combo-no-data strong {
        font-style: normal;
        color: var(--ui-modal-ink);
        font-family: var(--ui-modal-font-ui);
        font-weight: 600;
    }

/* ─── Save button wrapper ────────────────────────────────────────────────── */
.ui-modal-save-wrap {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* ── Required column badge ───────────────────────────────────────────
   Rendered in both the active-fields grid and the available-columns
   tree. The SVG lock icon is injected via the Razor ItemTemplate and
   field-body Template — see the .req-lock-icon rule below.           */
.ui-modal-shell .ui-modal-required-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px 2px 5px;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    border-radius: 4px;
    background: #e3f0ef;
    color: #0a4644;
    border: 0.5px solid #a8cece;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.5;
    vertical-align: middle;
    margin-left: 6px;
}

/* Lock icon inside the badge                                         */
.ui-modal-shell .ui-modal-required-badge .req-lock-icon {
    display: block;
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    opacity: 0.8;
}

/* Label + badge on the same row, path below                          */
.ui-modal-shell .ui-modal-field-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .ui-modal-shell .ui-modal-field-body .ui-modal-label-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
    }

        /* Reset the column-child override — gap handles spacing in the row  */
        .ui-modal-shell .ui-modal-field-body .ui-modal-label-row .ui-modal-required-badge {
            align-self: auto;
            margin-left: 0;
        }