/* /Components/Datasheet/Datasheet.razor.rz.scp.css */
/* Wrapper */
.selectable-table-wrapper[b-lxyyj5n43g] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Status bar — count + refresh on the left, sort indicator on the right. The
   .status-spacer in the middle absorbs remaining width so Refresh stays pinned
   next to the count whether or not the sort label exists. */
.table-status[b-lxyyj5n43g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    background: var(--content-bg);
    border-bottom: 1px solid var(--divider);
    flex-shrink: 0;
}

.status-selection[b-lxyyj5n43g] {
    font-weight: 600;
    color: var(--accent-primary);
}

.status-spacer[b-lxyyj5n43g] {
    flex: 1;
}

.status-sort[b-lxyyj5n43g] {
    color: var(--text-tertiary);
}

/* Refresh icon lives in the status row next to the count — icon-only, subtle. */
.status-refresh[b-lxyyj5n43g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 3px;
    background: none;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}

.status-refresh:hover[b-lxyyj5n43g] {
    background: var(--surface-hover);
    color: var(--text-primary);
}

/* Touch-device context-menu trigger. Hidden on mouse-first devices so the
   status bar stays clean; shown on pointer:coarse devices where right-click
   isn't a reliable affordance. Matches .status-refresh visually so the two
   read as a pair. */
.context-menu-trigger[b-lxyyj5n43g] {
    display: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 3px;
    background: none;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}

.context-menu-trigger:hover[b-lxyyj5n43g] {
    background: var(--surface-hover);
    color: var(--text-primary);
}

@media (pointer: coarse) {
    .context-menu-trigger[b-lxyyj5n43g] { display: inline-flex; }
}

/* Scroll container */
.table-scroll[b-lxyyj5n43g] {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    outline: none;
}

/* Table */
.selectable-table[b-lxyyj5n43g] {
    width: 100%;
    user-select: none;
    border-collapse: collapse;
    font-size: 0.8125rem;
    table-layout: auto;
}

/* Row selector — visible bar for click/drag row highlighting. Locked at 20px
   (width + min-width + max-width) so table-layout:auto can't compress the
   narrow bar away when the table runs out of horizontal space. */
th.col-row-selector[b-lxyyj5n43g],
td.col-row-selector[b-lxyyj5n43g] {
    width: 20px;
    min-width: 20px;
    max-width: 20px;
    padding: 0 !important;
    cursor: pointer;
    user-select: none;
}

th.col-row-selector[b-lxyyj5n43g] {
    background: var(--surface);
    border-bottom: 2px solid var(--divider);
}

/* Header row — disable native touch scroll inside thead so drag-select and
   drag-reorder gestures don't accidentally pan the page on a touchscreen. */
.selectable-table thead[b-lxyyj5n43g] {
    touch-action: none;
}

td.col-row-selector[b-lxyyj5n43g] {
    background: var(--surface);
    border-right: 1px solid var(--divider-light);
    transition: background 0.1s;
}

td.col-row-selector:hover[b-lxyyj5n43g] {
    background: var(--color-blue-10);
}

/* Record-selector bar, two visual states:
   • Row merely "touched" by the current cell selection (user clicked a data cell,
     selected a column, etc.) → pale teal. Subtle — not the primary subject.
   • Row *explicitly* selected via the selector (click, shift-range, drag across
     selectors, corner button, Ctrl+A) → strong darkblue bar. The authoritative
     "I picked this row" signal. */
.row-highlighted td.col-row-selector[b-lxyyj5n43g] {
    background: var(--color-blue-10);
    transition: none;
}

/* Darkblue selector is reserved for rows the user *explicitly* selected via
   the record selector. Mere cell focus (row-focused) does NOT elevate to
   darkblue — when the column is selected, row 0's selector stays "touched"
   just like every other row's. */
.row-selector-selected td.col-row-selector[b-lxyyj5n43g] {
    background: var(--color-darkblue) !important;
    color: var(--color-white);
    transition: none;
}

.selectable-table thead[b-lxyyj5n43g] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--content-bg);
}

.selectable-table th[b-lxyyj5n43g],
[b-lxyyj5n43g] .selectable-table th {
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 2px solid var(--divider);
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.8rem;
    white-space: nowrap;
    background: var(--content-bg);
}

.selectable-table td[b-lxyyj5n43g],
[b-lxyyj5n43g] .selectable-table td {
    padding: 0.3rem 0.75rem;
    border-bottom: 1px solid var(--divider-light);
    color: var(--text-primary);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Checkbox column — wide enough for the header to accommodate the sort
   diamond next to the checkbox, but the checkbox itself stays horizontally
   centered in the column so header and body cells line up vertically. */
th.col-checkbox[b-lxyyj5n43g],
td.col-checkbox[b-lxyyj5n43g] {
    /* Fixed at 64px regardless of available horizontal space — with
       table-layout: auto, plain `width` gets treated as a preferred hint and
       the browser happily compresses this column when other columns demand
       more room. `min-width` is respected strictly, so the checkbox + sort
       diamond never get squeezed together on narrow viewports. */
    width: 64px;
    min-width: 64px;
    max-width: 64px;
    text-align: center !important;
    padding: 0.3rem !important;
    vertical-align: middle;
}

/* Header needs relative positioning so the sort diamond can sit in the
   right edge without pushing the checkbox off-center. */
th.col-checkbox[b-lxyyj5n43g] {
    position: relative;
}

.col-checkbox input[type="checkbox"][b-lxyyj5n43g] {
    width: 15px;
    height: 15px;
    margin: 0 auto;
    display: block;
    cursor: pointer;
    accent-color: var(--accent-primary);
}

/* The header's wrapper is just the checkbox container — absolute-positioned
   sort-btn sits alongside it, so removing/showing the diamond never shifts
   the checkbox's horizontal position. */
.col-checkbox-header[b-lxyyj5n43g] {
    display: block;
}

/* Sort diamond in the checkbox column header — mirrors SortableHeader's
   .sort-btn but pinned to the right edge of the header cell. */
.col-checkbox-header .sort-btn[b-lxyyj5n43g] {
    position: absolute;
    top: 50%;
    right: 2px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 2px;
    color: var(--text-muted);
    transition: color 0.1s, background 0.1s;
}

.col-checkbox-header .sort-btn:hover[b-lxyyj5n43g] {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-primary);
}

.col-checkbox-header .sort-btn.sort-active[b-lxyyj5n43g] {
    color: var(--accent-primary);
}

/* Rows */
.data-row[b-lxyyj5n43g] {
    cursor: pointer;
    transition: background 0.1s;
}

.data-row:hover[b-lxyyj5n43g] {
    background: var(--row-hover);
}

/* Checkbox-checked (persistent, database state). The Unify darkblue palette is
   inherently desaturated (navy-gray at light tints), so we mix the darkblue
   hue with white at a proportion that keeps the blue readable. */
.row-selected[b-lxyyj5n43g] {
    background: color-mix(in srgb, var(--color-darkblue) 20%, white);
}

.row-selected:hover[b-lxyyj5n43g] {
    background: color-mix(in srgb, var(--color-darkblue) 30%, white);
}

/* Row-level tints from the selection are intentionally absent.
   • .row-selector-selected only drives the strong darkblue selector bar (above).
   • .row-highlighted only drives the light-teal selector bar (above).
   The <tr> background stays white so selected cells stand out on their own via
   the cell-selected / cell-edge-* styles. */

/* The focused cell is indicated on the cell itself (outline on td.cell-focused
   above) — no row-level border. */


/* ── Context menu ── */

.context-menu[b-lxyyj5n43g] {
    position: fixed;
    z-index: 1000;
    min-width: 180px;
    background: var(--content-bg);
    border: 1px solid var(--input-border);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    padding: 0.2rem 0;
}

.context-menu-item[b-lxyyj5n43g] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.3rem 0.75rem;
    border: none;
    background: none;
    color: var(--text-primary);
    font-size: 0.8rem;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s;
    white-space: nowrap;
}

.context-menu-item:hover[b-lxyyj5n43g] {
    background: var(--surface-hover);
}

.context-menu-icon[b-lxyyj5n43g] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--text-tertiary);
}

.context-menu-label[b-lxyyj5n43g] {
    flex: 1;
    min-width: 0;
}

/* Right-aligned shortcut hint on context menu entries. Muted weight so the
   label is still the visual anchor — the shortcut is discovery, not action. */
.context-menu-shortcut[b-lxyyj5n43g] {
    margin-left: 1.25rem;
    font-size: 0.72rem;
    color: var(--text-tertiary);
    font-family: var(--font-mono, ui-monospace, monospace);
}

.context-menu-divider[b-lxyyj5n43g] {
    height: 1px;
    background: var(--divider);
    margin: 0.2rem 0;
}

/* Placeholder rows during virtualization loading */
.row-placeholder td[b-lxyyj5n43g] {
    height: 36px;
    border-bottom: 1px solid var(--divider-light);
}

/* ── Column reorder drag ── */

[b-lxyyj5n43g] th.col-dragging {
    opacity: 0.5;
    background: var(--surface-hover) !important;
}

/* ── Cell mode ── */

/* Focused cell — the anchor cursor. Darkblue outline only; NO background
   override so the cell keeps the tint of its selection state (pale teal for a
   selected cell, white when selection is empty). This avoids a white "hole"
   punched through a column or range selection. */
[b-lxyyj5n43g] td.cell-focused {
    outline: 2px solid var(--color-darkblue);
    outline-offset: -2px;
    z-index: 1;
    position: relative;
}

/* Selected cells in range */
[b-lxyyj5n43g] td.cell-selected {
    background: var(--color-blue-10) !important;
    color: var(--text-primary);
}

/* Selection range outer frame — use inset box-shadow so the 2px "borders" don't
   add to the box size and shift neighboring cells. Each edge class sets its own
   custom property; the composed box-shadow combines up to four insets. */
[b-lxyyj5n43g] td.cell-edge-top    { --cell-edge-t: inset 0 2px 0 0 var(--color-darkblue); }
[b-lxyyj5n43g] td.cell-edge-bottom { --cell-edge-b: inset 0 -2px 0 0 var(--color-darkblue); }
[b-lxyyj5n43g] td.cell-edge-left   { --cell-edge-l: inset 2px 0 0 0 var(--color-darkblue); }
[b-lxyyj5n43g] td.cell-edge-right  { --cell-edge-r: inset -2px 0 0 0 var(--color-darkblue); }
[b-lxyyj5n43g] td.cell-edge-top,
[b-lxyyj5n43g] td.cell-edge-bottom,
[b-lxyyj5n43g] td.cell-edge-left,
[b-lxyyj5n43g] td.cell-edge-right {
    box-shadow:
        var(--cell-edge-t, 0 0 transparent),
        var(--cell-edge-b, 0 0 transparent),
        var(--cell-edge-l, 0 0 transparent),
        var(--cell-edge-r, 0 0 transparent);
}

/* (.cell-focused inside a selection is just outline + inherited selection tint —
   see the combined .cell-focused / .cell-selected rules above.) */

/* Column header — two visual states mirroring the record selector:
   • Touched (col has any cell in selection) → light teal
   • Selected (user clicked the header explicitly) → strong darkblue bar */
[b-lxyyj5n43g] th.col-in-selection {
    background: var(--color-blue-10) !important;
}

[b-lxyyj5n43g] th.col-header-selected {
    background: var(--color-darkblue) !important;
    color: var(--color-white) !important;
}

/* ── Link cells ──
   Cells that navigate to another record when activated (double-click / Enter).
   Visual convention mirrors the legacy Access datasheet: darkblue text, with a
   hover underline to match web-link expectations. Reserved future palette:
   purple for cells that launch external tools (Teams phone links, email).

   Specificity note: the generic `.selectable-table tbody td` rule below sets
   `cursor: cell` at (0,1,2). We match that specificity and override by rule
   order so link cells get the pointer hand, not the cell crosshair. */
[b-lxyyj5n43g] .selectable-table tbody td.cell-link,
[b-lxyyj5n43g] .selectable-table tbody td .cell-link {
    color: var(--color-darkblue);
    cursor: pointer;
}

[b-lxyyj5n43g] .selectable-table tbody td.cell-link:hover,
[b-lxyyj5n43g] .selectable-table tbody td .cell-link:hover {
    text-decoration: underline;
}

/* Text mode — allow native text selection in the focused cell */
[b-lxyyj5n43g] td.cell-text-mode {
    user-select: text !important;
    cursor: text !important;
}

/* Data cells — cursor hint in cell mode */
[b-lxyyj5n43g] .selectable-table tbody td {
    cursor: cell;
}

/* Row selector — clickable control */
.selectable-table tbody td.col-row-selector[b-lxyyj5n43g] {
    cursor: pointer !important;
}

/* Checkbox — standard form control */
.selectable-table tbody td.col-checkbox[b-lxyyj5n43g] {
    cursor: default !important;
}

/* ── Find bar ── */

.find-bar[b-lxyyj5n43g] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    /* Neutral surface background (like the toolbar) with a solid darkblue left
       band so the find bar reads as an "active tool" via the stripe rather than
       via a tint. Keeps the header area color-clean; the lime highlight on the
       find-match cells does the visual heavy lifting for the search itself. */
    background: var(--surface);
    border-bottom: 1px solid var(--divider);
    border-left: 3px solid var(--color-darkblue);
    flex-shrink: 0;
    animation: find-bar-slide-in-b-lxyyj5n43g 0.15s ease-out;
}

@keyframes find-bar-slide-in-b-lxyyj5n43g {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.find-input[b-lxyyj5n43g] {
    flex: 0 1 280px;
    padding: 0.3rem 0.5rem;
    font-size: 0.8125rem;
    font-family: inherit;
    border: 1px solid var(--input-border);
    border-radius: 4px;
    background: var(--content-bg);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.15s;
}

.find-input:focus[b-lxyyj5n43g] {
    border-color: var(--accent-primary);
}

.find-count[b-lxyyj5n43g] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    min-width: 60px;
    text-align: center;
    white-space: nowrap;
}

.find-nav-btn[b-lxyyj5n43g] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}

.find-nav-btn:hover:not(:disabled)[b-lxyyj5n43g] {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.find-nav-btn:disabled[b-lxyyj5n43g] {
    opacity: 0.35;
    cursor: default;
}

.find-close-btn[b-lxyyj5n43g] {
    margin-left: 0.25rem;
}

/* Find match highlights on cells — Unify lime palette.
   All matches get the pale cream tint; the one the user is currently cycled to
   via Enter / prev/next pops in the deeper olive. */
[b-lxyyj5n43g] td.find-match {
    background: var(--color-lime-20) !important;
}

[b-lxyyj5n43g] td.find-current {
    background: var(--color-lime-70) !important;
}

/* ── Touch / pointer-coarse adjustments ─────────────────────────────────────
   Taps differ from clicks in two ways that matter here:
     1. No hover state to telegraph a target — users can't explore with the
        mouse; they just tap. Bigger hit targets reduce mis-taps.
     2. Browsers add a 300ms wait after tap before firing click unless
        touch-action: manipulation opts out.
   The query targets pointer:coarse rather than hover:none so a Surface in
   dual-input mode keeps compact sizing when a mouse is available. */
.status-refresh[b-lxyyj5n43g],
.find-nav-btn[b-lxyyj5n43g],
.sort-btn[b-lxyyj5n43g],
.context-menu-item[b-lxyyj5n43g],
.context-menu-trigger[b-lxyyj5n43g] {
    touch-action: manipulation;
}

@media (pointer: coarse) {
    /* Bump icon-only buttons toward the 44px WCAG minimum. We fall short on
       width (36px) because a truly 44px button crowds the status bar on a
       phone-sized viewport; 36px is the practical compromise for finger-
       accurate tapping without blowing out the layout. */
    .status-refresh[b-lxyyj5n43g],
    .find-nav-btn[b-lxyyj5n43g] {
        width: 36px;
        height: 36px;
    }

    .sort-btn[b-lxyyj5n43g] {
        width: 32px;
        height: 32px;
    }

    /* Taller context-menu rows on touch — the labels stay the same but the
       increased padding gives finger taps a safer target. */
    .context-menu-item[b-lxyyj5n43g] {
        padding: 0.6rem 0.75rem;
        font-size: 0.875rem;
    }
}
/* /Components/Datasheet/SortableHeader.razor.rz.scp.css */
.sortable-header[b-9mpyyoryw2] {
    cursor: pointer;
    user-select: none;
    transition: background 0.1s;
    position: relative;
}

.sortable-header:hover[b-9mpyyoryw2] {
    background: var(--surface-hover);
}

.header-label[b-9mpyyoryw2] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* ── Sort arrow button ── */

.sort-btn[b-9mpyyoryw2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 2px;
    color: var(--text-muted);
    transition: color 0.1s, background 0.1s;
    vertical-align: middle;
    margin-left: 0.15rem;
}

.sort-btn:hover[b-9mpyyoryw2] {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-primary);
}

.sort-btn.sort-active[b-9mpyyoryw2] {
    color: var(--accent-primary);
}

/* Kill the 300ms tap delay so a header tap sorts instantly on touch. */
.sort-btn[b-9mpyyoryw2],
.sortable-header[b-9mpyyoryw2],
.col-resize-handle[b-9mpyyoryw2] {
    touch-action: manipulation;
}

/* Wider resize handle on touch — a 5px target is impossible to drag with a
   finger. Keeps the visual 1px border intact; only the invisible hit area
   grows. */
@media (pointer: coarse) {
    .col-resize-handle[b-9mpyyoryw2] {
        width: 20px;
        right: -8px;
    }

    .sort-btn[b-9mpyyoryw2] {
        width: 32px;
        height: 32px;
    }
}

/* Multi-sort ordinal badge. Shows "1", "2", etc. beside the sort arrow so
   users can tell primary from secondary at a glance without hovering. Hidden
   by default (SortableHeader only renders it when 2+ sort columns are active). */
.sort-ordinal[b-9mpyyoryw2] {
    display: inline-block;
    margin-left: 1px;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    color: var(--accent-primary);
    vertical-align: super;
}

/* ── Column resize handle ── */

.col-resize-handle[b-9mpyyoryw2] {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    border-right: 1px solid var(--input-border);
    transition: border-color 0.1s, background 0.1s;
    z-index: 3;
}

.col-resize-handle:hover[b-9mpyyoryw2] {
    border-right-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
}
/* /Components/Datasheet/Subform.razor.rz.scp.css */
/* ──────────────────────────────────────────────────────────────────────
   Subform — wraps a <Datasheet> with the conventions every detail-tab
   subform wants: title on the left, action buttons on the right, Find
   icon further right. Colors for Access parity: Add=accent, Remove=red,
   Create=accent, Delete=red, Refresh=neutral, List=lime.
   ────────────────────────────────────────────────────────────────────── */

.subform[b-f5bqg47tng] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 0.5rem;
}

.subform-header[b-f5bqg47tng] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.subform-title[b-f5bqg47tng] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--accent-primary);
    margin: 0;
    line-height: 1.2;
}

.subform-actions-spacer[b-f5bqg47tng] { flex: 1; }

.subform-actions[b-f5bqg47tng] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.subform-icon-btn[b-f5bqg47tng] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--divider);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.subform-icon-btn:hover[b-f5bqg47tng] {
    background: var(--surface-hover);
    color: var(--text-primary);
    border-color: var(--text-secondary);
}
/* /Components/Datasheet/SubformActions.razor.rz.scp.css */
/* ──────────────────────────────────────────────────────────────────────
   SubformActions — shared button styling for the subform action cluster.
   Access parity on semantics: primary=accent (Create/Add), danger=red
   (Remove/Delete), secondary=neutral (Refresh).
   ────────────────────────────────────────────────────────────────────── */

.subform-action-cluster[b-6i52xltxsm] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.subform-btn[b-6i52xltxsm] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.7rem;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    height: 28px;
}

.subform-btn-glyph[b-6i52xltxsm] {
    font-size: 0.95rem;
    line-height: 1;
    font-weight: 600;
}

.subform-btn-primary[b-6i52xltxsm] {
    background: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
}

.subform-btn-primary:hover[b-6i52xltxsm] {
    filter: brightness(1.1);
}

.subform-btn-danger[b-6i52xltxsm] {
    background: var(--danger, #c0392b);
    color: #fff;
    border-color: var(--danger, #c0392b);
}

.subform-btn-danger:hover[b-6i52xltxsm] {
    filter: brightness(1.1);
}

.subform-btn-secondary[b-6i52xltxsm] {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--divider);
}

.subform-btn-secondary:hover[b-6i52xltxsm] {
    background: var(--surface-hover);
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

.subform-btn-icon-only[b-6i52xltxsm] {
    width: 28px;
    padding: 0;
    justify-content: center;
}
/* /Components/EntityList/EntityList.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   EntityList — Generic list/results panel layout
   Entity-specific column widths belong in the wrapper component's CSS.
   ═══════════════════════════════════════════════════════════════════ */

.entity-list[b-jhq534hhdd] {
    height: 100%;
    min-width: 0;
    background: var(--content-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Content gutter for the datasheet. Matches the FormHeader's 1.25rem
   horizontal padding so the title, subtitle, count row ("2,463 groups")
   and grid columns all share the same left edge. Toolbar stays
   edge-to-edge as chrome. Mirrors the detail-form subform layout. */
.entity-list-body[b-jhq534hhdd] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 0 1.25rem;
}

/* ── Loading state ── */

.status-loading[b-jhq534hhdd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex: 1;
    color: var(--text-tertiary);
    font-size: 0.9rem;
}

.status-loading p[b-jhq534hhdd] {
    margin: 0;
}

.loading-spinner[b-jhq534hhdd] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--divider);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin-b-jhq534hhdd 0.8s linear infinite;
}

@keyframes spin-b-jhq534hhdd {
    to { transform: rotate(360deg); }
}

/* ── Error state — same centered-column shape as loading/empty so the list
   area doesn't jump when transitioning between states. Inner wording sits in
   a <p> that carries the red-tinted card treatment (see app.css .status-error p). */

.status-error[b-jhq534hhdd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 0.5rem;
    color: var(--color-danger);
    font-size: 0.9rem;
    padding: 2rem;
    text-align: center;
}

/* ── Empty state ── */

.status-empty[b-jhq534hhdd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex: 1;
    color: var(--text-tertiary);
    font-size: 0.9rem;
}

.status-empty p[b-jhq534hhdd] {
    margin: 0;
}

.status-watermark[b-jhq534hhdd] {
    opacity: 0.15;
}
/* /Components/EntityList/EntitySearch.razor.rz.scp.css */
/* ================================================================
   ENTITY SEARCH — Three-column tabbed search form.
   Fills the tab content area. Quick Find | Build/AI/Saved/History | Current Query
   ================================================================ */

.entity-search[b-ucg616pxd0] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--content-bg);
}

.search-top[b-ucg616pxd0] {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(360px, 1fr);
    gap: 0;
    overflow: hidden;
    min-height: 0;
    border-bottom: 1px solid var(--divider);
}

.search-col[b-ucg616pxd0] {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.1rem;
    overflow-y: auto;
    min-height: 0;
}

.search-col + .search-col[b-ucg616pxd0] {
    border-left: 1px solid var(--divider);
}

.search-bottom[b-ucg616pxd0] {
    display: flex;
    flex-direction: column;
    padding: 0.85rem 1.1rem;
    min-height: 110px;
    max-height: 40vh;
    flex-shrink: 0;
    overflow: hidden;
}

.bottom-head[b-ucg616pxd0] {
    margin-bottom: 0.6rem;
    flex-shrink: 0;
}

.bottom-head .col-heading[b-ucg616pxd0] {
    margin: 0;
}

.bottom-body[b-ucg616pxd0] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    overflow-y: auto;
    min-height: 0;
}

.col-heading[b-ucg616pxd0] {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.85rem 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.col-heading-count[b-ucg616pxd0] {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
}

/* ── Tabs ── */

.tab-strip[b-ucg616pxd0] {
    display: flex;
    gap: 0.15rem;
    margin-bottom: 0.9rem;
    border-bottom: 1px solid var(--divider);
}

.tab-btn[b-ucg616pxd0] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    margin-bottom: -1px;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
    border-radius: 6px 6px 0 0;
}

.tab-btn:hover[b-ucg616pxd0] {
    color: var(--text-primary);
    background: var(--surface-hover);
}

.tab-icon[b-ucg616pxd0] {
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.12s;
}

.tab-btn:hover .tab-icon[b-ucg616pxd0] { opacity: 1; }

.tab-active[b-ucg616pxd0] {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
    font-weight: 600;
}

.tab-active .tab-icon[b-ucg616pxd0] { opacity: 1; }

.tab-badge[b-ucg616pxd0] {
    display: inline-block;
    min-width: 1.2rem;
    padding: 0.05rem 0.35rem;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 600;
    text-align: center;
    background: var(--row-selected);
    color: var(--text-secondary);
}

.tab-body[b-ucg616pxd0] {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    flex: 1;
    min-height: 0;
}

.tab-hint[b-ucg616pxd0] {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
}

/* ── AI ── */

.ai-panel[b-ucg616pxd0] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ai-header[b-ucg616pxd0] {
    display: flex;
    gap: 0.6rem;
    padding: 0.75rem 0.85rem;
    background: var(--color-blue-10);
    border: 1px solid var(--color-blue-40);
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.ai-sparkle[b-ucg616pxd0] {
    flex-shrink: 0;
    color: var(--accent-primary);
    margin-top: 0.1rem;
}

.ai-textarea[b-ucg616pxd0] {
    resize: vertical;
    min-height: 4rem;
    font-family: inherit;
}

.ai-actions[b-ucg616pxd0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ai-coming-soon[b-ucg616pxd0] {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

/* ── Query card (right column) ── */

.query-card[b-ucg616pxd0] {
    padding: 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--content-bg);
    min-height: 3rem;
    transition: border-color 0.15s, background 0.15s;
}

.query-card-empty[b-ucg616pxd0] {
    border-style: dashed;
    background: var(--surface);
}

/* ── Description hint (used inside Save dialog labels) ── */

.description-hint[b-ucg616pxd0] {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.qf-field-label[b-ucg616pxd0] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
}

/* ── Viewing-as row (Saved tab header) ── */

.viewing-as-row[b-ucg616pxd0] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0;
    margin-bottom: 0.5rem;
}

.viewing-as-label[b-ucg616pxd0] {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

.viewing-as-row .user-picker[b-ucg616pxd0] {
    max-width: 280px;
    min-width: 0;
}

/* ── Saved / History shared styles ── */

.saved-for-user[b-ucg616pxd0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: var(--surface-hover);
    border-radius: 5px;
    font-size: 0.8rem;
}

.saved-for-user-label[b-ucg616pxd0] { color: var(--text-muted); }
.saved-for-user-value[b-ucg616pxd0] { color: var(--text-primary); font-weight: 500; }

.saved-group-heading[b-ucg616pxd0] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.75rem;
    margin-bottom: 0.3rem;
}

.saved-empty[b-ucg616pxd0] {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
    padding: 0.5rem 0;
}

.saved-list[b-ucg616pxd0] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.saved-item[b-ucg616pxd0] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 4px;
    transition: background 0.1s;
}

.saved-item:hover[b-ucg616pxd0]         { background: var(--surface-hover); }
.saved-item-active[b-ucg616pxd0]        { background: var(--row-selected); }

.saved-item-name[b-ucg616pxd0] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--text-primary);
    text-align: left;
    padding: 0.4rem 0.5rem;
}

.saved-item-name:hover .saved-item-title[b-ucg616pxd0] { color: var(--accent-primary); }

.saved-item-title[b-ucg616pxd0] {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.saved-item-desc[b-ucg616pxd0] {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.saved-item-owner[b-ucg616pxd0] {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.saved-badge[b-ucg616pxd0] {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;
    border-radius: 10px;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--accent-primary);
    color: var(--content-bg);
    vertical-align: middle;
}

.saved-item-actions[b-ucg616pxd0] {
    display: flex;
    flex-shrink: 0;
}

.saved-action[b-ucg616pxd0] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 0.25rem 0.35rem;
    transition: color 0.1s;
}

.saved-action:hover[b-ucg616pxd0] { color: var(--accent-primary); }

.saved-rename-input[b-ucg616pxd0] {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    padding: 0.25rem 0.4rem;
}

/* ── Field input (shared inside tab body) ── */

[b-ucg616pxd0] .field-input {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1.5px solid var(--input-border);
    border-radius: 5px;
    font-size: 0.85rem;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
    background: var(--content-bg);
}

[b-ucg616pxd0] .field-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 10%, transparent);
}

[b-ucg616pxd0] .field-input:disabled {
    background: var(--surface-hover);
    color: var(--text-muted);
}

/* ── Footer ── */

.search-footer[b-ucg616pxd0] {
    padding: 0.75rem 1.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--divider);
    background: var(--content-bg);
    flex-shrink: 0;
}

.footer-left[b-ucg616pxd0]   { display: flex; align-items: center; gap: 1rem; }
.footer-actions[b-ucg616pxd0] { display: flex; gap: 0.5rem; }

.close-after-search[b-ucg616pxd0] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.close-after-search input[type="checkbox"][b-ucg616pxd0] {
    accent-color: var(--accent-primary);
}

/* ── Buttons ── */

.btn[b-ucg616pxd0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem 1.1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    border: 1.5px solid transparent;
    white-space: nowrap;
}

.btn-primary[b-ucg616pxd0] {
    background: var(--accent-primary);
    color: var(--content-bg);
    border-color: var(--accent-primary);
}

.btn-primary:hover:not(:disabled)[b-ucg616pxd0] {
    background: var(--accent-primary-hover);
    border-color: var(--accent-primary-hover);
}

.btn-primary:disabled[b-ucg616pxd0] { opacity: 0.5; cursor: default; }

.btn-secondary[b-ucg616pxd0] {
    background: var(--content-bg);
    color: var(--text-secondary);
    border-color: var(--border);
}

.btn-secondary:hover:not(:disabled)[b-ucg616pxd0] {
    border-color: var(--text-tertiary);
    color: var(--text-primary);
}

.btn-secondary:disabled[b-ucg616pxd0] { opacity: 0.5; cursor: default; }

.btn-accent[b-ucg616pxd0] {
    background: var(--color-success-action);
    color: var(--content-bg);
    border-color: var(--color-success-action);
}

.btn-accent:hover:not(:disabled)[b-ucg616pxd0] { background: var(--color-success-action-hover); }
.btn-accent:disabled[b-ucg616pxd0] { opacity: 0.4; cursor: default; }

/* ── Save dialog ── */

.dialog-backdrop[b-ucg616pxd0] {
    position: fixed;
    inset: 0;
    background: var(--backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.save-dialog-panel[b-ucg616pxd0] {
    background: var(--content-bg);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    width: 460px;
    max-width: 92vw;
    padding: 1.25rem 1.5rem 1rem;
}

.dialog-header[b-ucg616pxd0] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.dialog-title[b-ucg616pxd0] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-heading);
    margin: 0;
}

.dialog-close[b-ucg616pxd0] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
}

.dialog-close:hover[b-ucg616pxd0] { background: var(--surface-hover); color: var(--text-primary); }

.dialog-body[b-ucg616pxd0] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.dialog-field[b-ucg616pxd0] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.dialog-label[b-ucg616pxd0] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.dialog-option[b-ucg616pxd0] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.dialog-option input[type="checkbox"][b-ucg616pxd0] {
    accent-color: var(--accent-primary);
}

.dialog-footer[b-ucg616pxd0] {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--divider);
}

.dialog-actions[b-ucg616pxd0] { display: flex; gap: 0.5rem; }
/* /Components/EntityList/EntityToolbar.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   EntityToolbar — Context-specific action bar for entity pages.
   Sits at the top of each tab's content area.
   ═══════════════════════════════════════════════════════════════════ */

.entity-toolbar[b-ad9sotcsvd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.5rem;
    /* 2px divider separates the toolbar "chrome" from the data rows
       so the status row can visually merge with the grid below it. */
    border-bottom: 2px solid var(--divider);
    background: var(--surface);
    min-height: 36px;
    gap: 0.5rem;
}

.toolbar-left[b-ad9sotcsvd] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Right-aligned auxiliary actions (AI assistant, etc.). Separated from the
   list-operation tools on the left so the visual split reads clearly. */
.toolbar-right[b-ad9sotcsvd] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.toolbar-separator[b-ad9sotcsvd] {
    width: 1px;
    height: 1.1rem;
    background: var(--border);
    margin: 0 0.15rem;
}

/* ── Dropdown trigger button ── */

.toolbar-btn[b-ad9sotcsvd] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.65rem;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    white-space: nowrap;
}

.toolbar-btn:hover[b-ad9sotcsvd] {
    background: var(--divider);
    border-color: var(--input-border);
}

.toolbar-caret[b-ad9sotcsvd] {
    font-size: 0.6rem;
    color: var(--text-muted);
    line-height: 1;
}

/* Count next to a toolbar button label — e.g. "Selection (22)". Muted so it
   reads as metadata rather than part of the label. */
.toolbar-badge[b-ad9sotcsvd] {
    color: var(--text-tertiary);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

/* ── Dropdown wrapper ── */

.toolbar-dropdown[b-ad9sotcsvd] {
    position: relative;
}

/* ── Dropdown menu ── */

/* Per-row container so a submenu positions against its own row rather
   than the parent menu. Without this wrapper, .toolbar-submenu's absolute
   positioning escapes to .toolbar-menu and every row's submenu appears at
   the top-right of the menu. */
.toolbar-menu-row[b-ad9sotcsvd] {
    position: relative;
}

.toolbar-menu[b-ad9sotcsvd] {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 2px;
    min-width: 180px;
    background: var(--content-bg);
    border: 1px solid var(--input-border);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 0.2rem 0;
    z-index: 100;
    outline: none;
}

.toolbar-menu-item[b-ad9sotcsvd] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.3rem 0.75rem;
    border: none;
    background: none;
    color: var(--text-primary);
    font-size: 0.8rem;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s;
    white-space: nowrap;
}

.menu-icon[b-ad9sotcsvd] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--text-tertiary);
}

.toolbar-icon[b-ad9sotcsvd] {
    flex-shrink: 0;
}

.toolbar-menu-item:hover[b-ad9sotcsvd] {
    background: var(--surface-hover);
}

.toolbar-menu-danger[b-ad9sotcsvd] {
    color: var(--color-danger);
}

.toolbar-menu-danger:hover[b-ad9sotcsvd] {
    background: var(--color-red-10);
}

.toolbar-menu-label[b-ad9sotcsvd] {
    flex: 1;
    min-width: 0;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* Submenu flyout — relative-positioned parent item, absolute-positioned
   child menu. Opens to the right with a 2px overlap against the parent
   so moving the cursor between parent and submenu doesn't cross empty
   space (a common cascading-menu UX pitfall). */
.toolbar-menu-item.toolbar-menu-parent[b-ad9sotcsvd] {
    position: relative;
}

.toolbar-submenu-caret[b-ad9sotcsvd] {
    flex-shrink: 0;
    color: var(--text-tertiary);
    margin-left: auto;
    opacity: 0.7;
}

.toolbar-submenu-open .toolbar-submenu-caret[b-ad9sotcsvd] {
    opacity: 1;
    color: var(--text-primary);
}

.toolbar-submenu[b-ad9sotcsvd] {
    position: absolute;
    top: -0.2rem;
    left: calc(100% - 2px);
    min-width: 180px;
    background: var(--content-bg);
    border: 1px solid var(--input-border);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 0.2rem 0;
    z-index: 101;
    outline: none;
}

.toolbar-menu-divider[b-ad9sotcsvd] {
    height: 1px;
    background: var(--divider);
    margin: 0.3rem 0;
}
/* /Components/EntityList/ListComparisonDialog.razor.rz.scp.css */
/* Dialog chrome + Venn styles live in global wwwroot/dialog.css so all
   Venn-based set-op dialogs share them. This file holds only styles
   specific to ListComparisonDialog (the Set A/B picker). */

/* ── Sets Row: A and B side by side ── */

.sets-row[b-98004qjv03] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.set-column[b-98004qjv03] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.set-label[b-98004qjv03] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-primary);
}

.set-a-info[b-98004qjv03] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.6rem 0.75rem;
    background: var(--surface);
    border: 1.5px solid var(--input-border);
    border-radius: 6px;
    min-height: 60px;
    justify-content: center;
}

.set-a-name[b-98004qjv03] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
}

.set-a-count[b-98004qjv03] {
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

/* ── Set B: Multi-select list ── */

.set-b-list[b-98004qjv03] {
    border: 1.5px solid var(--input-border);
    border-radius: 6px;
    max-height: 140px;
    overflow-y: auto;
}

.set-b-item[b-98004qjv03] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    transition: background 0.1s;
    border-bottom: 1px solid var(--divider-light);
}

.set-b-item:last-child[b-98004qjv03] {
    border-bottom: none;
}

.set-b-item:hover[b-98004qjv03] {
    background: var(--surface-hover);
}

.set-b-selected[b-98004qjv03] {
    background: var(--row-selected);
}

.set-b-item input[type="checkbox"][b-98004qjv03] {
    accent-color: var(--accent-primary);
    flex-shrink: 0;
}

.set-b-name[b-98004qjv03] {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.set-b-count[b-98004qjv03] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.set-b-hint[b-98004qjv03] {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

/* ── Footer: "Close source lists" checkbox ── */

.close-sources-option[b-98004qjv03] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.close-sources-option input[type="checkbox"][b-98004qjv03] {
    accent-color: var(--accent-primary);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-mxp5bwkxo3] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-mxp5bwkxo3] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-state[b-2a2816r6gn] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show:not(.components-reconnect-retrying) .components-reconnect-first-attempt-visible[b-2a2816r6gn],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-2a2816r6gn],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-2a2816r6gn],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-2a2816r6gn],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-2a2816r6gn],
#components-reconnect-modal.components-reconnect-reloading .components-reconnect-reloading-visible[b-2a2816r6gn] {
    display: flex;
}

#components-reconnect-modal[b-2a2816r6gn] {
    font-family: var(--font-family);
    background-color: var(--content-bg);
    color: var(--text-primary);
    width: 22rem;
    margin: auto;
    padding: 0;
    border: none;
    outline: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-2a2816r6gn 0.5s both;

    &[open] {
        animation: components-reconnect-modal-slideUp-b-2a2816r6gn 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-2a2816r6gn 0.5s ease-in-out 0.3s;
        animation-fill-mode: both;
    }
}

#components-reconnect-modal[b-2a2816r6gn]::backdrop {
    background-color: var(--backdrop);
    animation: components-reconnect-modal-fadeInOpacity-b-2a2816r6gn 0.5s ease-in-out;
    opacity: 1;
}

.components-reconnect-accent[b-2a2816r6gn] {
    height: 3px;
    background: var(--accent-primary);
}

@keyframes components-reconnect-modal-slideUp-b-2a2816r6gn {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-2a2816r6gn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-2a2816r6gn {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-2a2816r6gn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 2rem 1.75rem;
}

.components-reconnect-state[b-2a2816r6gn] {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

#components-reconnect-modal h3[b-2a2816r6gn] {
    margin: 0;
    text-align: center;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
}

#components-reconnect-modal p[b-2a2816r6gn] {
    margin: 0 0 0.25rem;
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

#components-reconnect-modal button[b-2a2816r6gn] {
    border: none;
    background-color: var(--accent-primary);
    color: var(--color-white);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: 500;
    padding: 0.5rem 1.5rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    margin-top: 0.25rem;
    transition: background-color var(--transition-fast);
}

#components-reconnect-modal button:hover[b-2a2816r6gn] {
    background-color: var(--accent-primary-hover);
}

.components-reconnect-spinner[b-2a2816r6gn] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border-light);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    margin-bottom: 0.5rem;
    animation: components-reconnect-spin-b-2a2816r6gn 0.8s linear infinite;
}

.components-reconnect-icon[b-2a2816r6gn] {
    width: 40px;
    height: 40px;
    color: var(--color-warning);
    margin-bottom: 0.25rem;
}

.components-reconnect-icon svg[b-2a2816r6gn] {
    width: 100%;
    height: 100%;
}

.components-reconnect-icon-success[b-2a2816r6gn] {
    color: var(--color-success-action);
}

@keyframes components-reconnect-spin-b-2a2816r6gn {
    to {
        transform: rotate(360deg);
    }
}
/* /Components/Pages/Campaigns/CampaignSchedule.razor.rz.scp.css */
.page-header[b-q7v90b43pw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.page-header h1[b-q7v90b43pw] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
}

.btn-primary[b-q7v90b43pw] {
    padding: 0.5rem 1.25rem;
    background: var(--accent-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-primary:hover[b-q7v90b43pw] {
    background: var(--accent-primary-hover);
}

/* Tabs */
.tab-bar[b-q7v90b43pw] {
    display: flex;
    gap: 0;
    margin-bottom: 1.25rem;
    border-bottom: 2px solid #e5e7eb;
}

.tab[b-q7v90b43pw] {
    padding: 0.6rem 1.25rem;
    border: none;
    background: none;
    font-size: 0.875rem;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}

.tab:hover[b-q7v90b43pw] {
    color: var(--accent-primary);
}

.tab.active[b-q7v90b43pw] {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}

/* Table */
.table-container[b-q7v90b43pw] {
    overflow-x: auto;
}

.data-table[b-q7v90b43pw] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.data-table th[b-q7v90b43pw] {
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 2px solid #e5e7eb;
    font-weight: 600;
    color: #555;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    position: sticky;
    top: 0;
    background: #fff;
}

.data-table td[b-q7v90b43pw] {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cell-muted[b-q7v90b43pw] {
    color: #888;
}

/* Sortable columns */
.sortable[b-q7v90b43pw] {
    cursor: pointer;
    user-select: none;
}

.sortable:hover[b-q7v90b43pw] {
    color: var(--accent-primary);
}

[b-q7v90b43pw] .sort-icon {
    font-size: 0.65rem;
    margin-left: 0.25rem;
    color: #ccc;
}

[b-q7v90b43pw] .sort-icon.active {
    color: var(--accent-primary);
}

/* Column widths */
.col-id[b-q7v90b43pw] { width: 60px; }
.col-name[b-q7v90b43pw] { min-width: 180px; }
.col-project[b-q7v90b43pw] { min-width: 140px; }
.col-user[b-q7v90b43pw] { min-width: 120px; }
.col-date[b-q7v90b43pw] { min-width: 160px; }
.col-status[b-q7v90b43pw] { width: 100px; }
.col-actions[b-q7v90b43pw] { width: 100px; white-space: nowrap; }

/* Status badges */
.status-badge[b-q7v90b43pw] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
}

.status-scheduled[b-q7v90b43pw] {
    background: #eef2ff;
    color: var(--text-secondary);
}

.status-processing[b-q7v90b43pw] {
    background: #fff7ed;
    color: #c2410c;
}

.status-failed[b-q7v90b43pw] {
    background: #fef2f2;
    color: #dc2626;
}

.status-sent[b-q7v90b43pw] {
    background: #f0fdf4;
    color: #16a34a;
}

/* Action buttons */
.action-btn[b-q7v90b43pw] {
    padding: 0.25rem 0.4rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    color: #555;
    font-size: 0.8rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    margin-right: 0.25rem;
}

.action-btn:hover[b-q7v90b43pw] {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.action-delete:hover[b-q7v90b43pw] {
    border-color: #dc2626;
    color: #dc2626;
}

/* Delete confirmation modal */
.modal-backdrop[b-q7v90b43pw] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal[b-q7v90b43pw] {
    background: #fff;
    border-radius: 10px;
    padding: 1.5rem 2rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    max-width: 400px;
    width: 90%;
}

.modal p[b-q7v90b43pw] {
    margin: 0 0 1.25rem 0;
    font-size: 0.95rem;
    color: #333;
}

.modal-actions[b-q7v90b43pw] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.btn-secondary[b-q7v90b43pw] {
    padding: 0.4rem 1rem;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #333;
    font-size: 0.85rem;
    cursor: pointer;
}

.btn-secondary:hover[b-q7v90b43pw] {
    border-color: #999;
}

.btn-danger[b-q7v90b43pw] {
    padding: 0.4rem 1rem;
    border: none;
    border-radius: 6px;
    background: #dc2626;
    color: #fff;
    font-size: 0.85rem;
    cursor: pointer;
}

.btn-danger:hover[b-q7v90b43pw] {
    background: #b91c1c;
}

/* /Components/Pages/Contacts/ContactDetail.razor.rz.scp.css */
/* Header */
.detail-header[b-ljwgr6a4ok] {
    margin-bottom: 1.5rem;
}

.btn-back[b-ljwgr6a4ok] {
    display: inline-block;
    background: none;
    border: none;
    color: var(--accent-primary);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0;
    margin-bottom: 0.75rem;
    font-family: inherit;
}

.btn-back:hover[b-ljwgr6a4ok] {
    text-decoration: underline;
}

.contact-identity[b-ljwgr6a4ok] {
    margin: 0;
}

.identity-main[b-ljwgr6a4ok] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.identity-main h1[b-ljwgr6a4ok] {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
}

.contact-id[b-ljwgr6a4ok] {
    font-size: 0.85rem;
    color: #999;
}

.identity-subtitle[b-ljwgr6a4ok] {
    color: #555;
    font-size: 1rem;
    margin: 0.25rem 0 0 0;
}

.identity-tags[b-ljwgr6a4ok] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.tag[b-ljwgr6a4ok] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    background: #f3f4f6;
    color: #555;
}

.tag-primary[b-ljwgr6a4ok] {
    background: #eef2ff;
    color: var(--text-secondary);
}

/* Body layout */
.detail-body[b-ljwgr6a4ok] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.detail-columns[b-ljwgr6a4ok] {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 2rem;
}

.detail-main[b-ljwgr6a4ok] {
    min-width: 0;
}

/* Sections */
.section[b-ljwgr6a4ok] {
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #e5e7eb;
}

.section:last-child[b-ljwgr6a4ok] {
    border-bottom: none;
}

.section h2[b-ljwgr6a4ok] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #888;
    margin: 0 0 0.75rem 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Field grid */
.field-grid[b-ljwgr6a4ok] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 2rem;
}

.field[b-ljwgr6a4ok] {
    min-width: 0;
}

.field-wide[b-ljwgr6a4ok] {
    grid-column: 1 / -1;
}

.field-label[b-ljwgr6a4ok] {
    display: block;
    font-size: 0.75rem;
    color: #888;
    margin-bottom: 0.1rem;
}

.field-value[b-ljwgr6a4ok] {
    display: block;
    font-size: 0.9rem;
    color: #333;
    word-break: break-word;
}

.ext[b-ljwgr6a4ok] {
    color: #888;
    margin-left: 0.5rem;
    font-size: 0.85rem;
}

/* Flags */
.flag-private[b-ljwgr6a4ok] {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    background: #fef3c7;
    color: #92400e;
}

.flag-warn[b-ljwgr6a4ok] {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    background: #fef3c7;
    color: #92400e;
}

.flag-error[b-ljwgr6a4ok] {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    background: #fee2e2;
    color: #991b1b;
}

/* Address */
.address-block[b-ljwgr6a4ok] {
    font-size: 0.9rem;
    color: #333;
    line-height: 1.5;
}

/* Notes */
.notes-content[b-ljwgr6a4ok] {
    font-size: 0.9rem;
    color: #333;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.admin-note[b-ljwgr6a4ok] {
    background: #fefce8;
    border-left: 3px solid #eab308;
    padding: 0.75rem 1rem;
    border-radius: 0 6px 6px 0;
}

/* Sidebar */
.detail-sidebar[b-ljwgr6a4ok] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sidebar-card[b-ljwgr6a4ok] {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1rem;
}

.sidebar-card h3[b-ljwgr6a4ok] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.75rem 0;
}

.sidebar-field[b-ljwgr6a4ok] {
    margin-bottom: 0.6rem;
}

.sidebar-field:last-child[b-ljwgr6a4ok] {
    margin-bottom: 0;
}

.sidebar-label[b-ljwgr6a4ok] {
    display: block;
    font-size: 0.7rem;
    color: #999;
}

.sidebar-value[b-ljwgr6a4ok] {
    display: block;
    font-size: 0.85rem;
    color: #333;
    word-break: break-all;
}

.sidebar-by[b-ljwgr6a4ok] {
    display: block;
    font-size: 0.7rem;
    color: #aaa;
}

/* Tabs */
.related-data[b-ljwgr6a4ok] {
    border-top: 1px solid #e5e7eb;
    padding-top: 1rem;
}

.tab-bar[b-ljwgr6a4ok] {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 0;
}

.tab[b-ljwgr6a4ok] {
    padding: 0.6rem 1.25rem;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-family: inherit;
    color: #666;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.tab:hover[b-ljwgr6a4ok] {
    color: #333;
}

.tab.active[b-ljwgr6a4ok] {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
    font-weight: 600;
}

.tab-count[b-ljwgr6a4ok] {
    display: inline-block;
    min-width: 1.2rem;
    padding: 0.05rem 0.35rem;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
    background: #f0f0f0;
    color: #666;
    margin-left: 0.3rem;
}

.tab.active .tab-count[b-ljwgr6a4ok] {
    background: #eef2ff;
    color: var(--text-secondary);
}

.tab-content[b-ljwgr6a4ok] {
    padding: 1rem 0;
    overflow-x: auto;
}

/* Related tables */
.related-table[b-ljwgr6a4ok] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.related-table th[b-ljwgr6a4ok] {
    text-align: left;
    padding: 0.5rem 0.65rem;
    border-bottom: 2px solid #e5e7eb;
    font-weight: 600;
    color: #555;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.related-table td[b-ljwgr6a4ok] {
    padding: 0.45rem 0.65rem;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
}

.related-table tbody tr:hover[b-ljwgr6a4ok] {
    background: #f8f9ff;
}

/* States */
.btn-link[b-ljwgr6a4ok] {
    background: none;
    border: none;
    color: var(--accent-primary);
    cursor: pointer;
    font-size: 0.9rem;
    margin-top: 1rem;
    font-family: inherit;
}

.btn-link:hover[b-ljwgr6a4ok] {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 900px) {
    .detail-columns[b-ljwgr6a4ok] {
        grid-template-columns: 1fr;
    }

    .detail-sidebar[b-ljwgr6a4ok] {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sidebar-card[b-ljwgr6a4ok] {
        flex: 1;
        min-width: 200px;
    }

    .field-grid[b-ljwgr6a4ok] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Contacts/ContactList.razor.rz.scp.css */
.page-header h1[b-wht8lxavt6] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 1.25rem 0;
}

/* Search */
.search-bar[b-wht8lxavt6] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.search-input[b-wht8lxavt6] {
    flex: 1;
    max-width: 600px;
    padding: 0.6rem 0.85rem;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.search-input:focus[b-wht8lxavt6] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 10%, transparent);
}

.result-count[b-wht8lxavt6] {
    font-size: 0.85rem;
    color: #666;
    white-space: nowrap;
}

/* Table */
.table-container[b-wht8lxavt6] {
    overflow-x: auto;
}

.data-table[b-wht8lxavt6] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.data-table th[b-wht8lxavt6] {
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 2px solid #e5e7eb;
    font-weight: 600;
    color: #555;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    position: sticky;
    top: 0;
    background: #fff;
}

.data-table td[b-wht8lxavt6] {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clickable-row[b-wht8lxavt6] {
    cursor: pointer;
    transition: background 0.1s;
}

.clickable-row:hover[b-wht8lxavt6] {
    background: #f5f5ff;
}

.cell-muted[b-wht8lxavt6] {
    color: #888;
}

/* Name cell */
.contact-name[b-wht8lxavt6] {
    font-weight: 500;
}

.contact-fullname[b-wht8lxavt6] {
    display: block;
    font-size: 0.75rem;
    color: #999;
    margin-top: 1px;
}

/* Column widths */
.col-id[b-wht8lxavt6] { width: 60px; }
.col-name[b-wht8lxavt6] { min-width: 160px; }
.col-company[b-wht8lxavt6] { min-width: 140px; }
.col-title[b-wht8lxavt6] { min-width: 120px; }
.col-email[b-wht8lxavt6] { min-width: 160px; }
.col-phone[b-wht8lxavt6] { min-width: 120px; }
.col-location[b-wht8lxavt6] { min-width: 120px; }
.col-type[b-wht8lxavt6] { width: 80px; }
.col-updated[b-wht8lxavt6] { width: 80px; }

/* Badge */
.badge[b-wht8lxavt6] {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    background: #eef2ff;
    color: var(--text-secondary);
}

/* Pagination */
.pagination[b-wht8lxavt6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    padding: 0.75rem 0;
}

.page-btn[b-wht8lxavt6] {
    padding: 0.4rem 1rem;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #333;
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.page-btn:hover:not(:disabled)[b-wht8lxavt6] {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.page-btn:disabled[b-wht8lxavt6] {
    opacity: 0.4;
    cursor: default;
}

.page-info[b-wht8lxavt6] {
    font-size: 0.85rem;
    color: #666;
}

/* /Components/Pages/Groups/GroupDetail.razor.rz.scp.css */
/* ──────────────────────────────────────────────────────────────────────
   GroupDetail — detail page shell + Group tab form + tab placeholders.
   Phase 1: read-only Group tab, Contacts datasheet subform, placeholders
   for Notes and Developer. Phase 2+ adds inline editing and the Notes
   subform.
   ────────────────────────────────────────────────────────────────────── */

.detail-page[b-nuv9grd6ow] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Padded tab container — keeps the tab strip and content aligned with the
   FormHeader above while letting the toolbar run edge-to-edge at the top. */
.detail-tabs[b-nuv9grd6ow] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 0 1.25rem 0.5rem;
}

/* ID badge lives in the FormHeader's RightContent slot on detail forms.
   Stays local CSS because it's detail-form-specific styling of a slot,
   not something other forms need. */
.id-badge[b-nuv9grd6ow] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.55rem;
    background: var(--row-selected);
    border: 1px solid var(--divider);
    border-radius: 4px;
    font-size: 0.75rem;
    height: 30px;
    box-sizing: border-box;
}

.id-badge-label[b-nuv9grd6ow] { color: var(--text-secondary); }
.id-badge-value[b-nuv9grd6ow] { font-weight: 600; font-family: 'Menlo', 'Consolas', monospace; color: var(--text-primary); }

/* ── Group tab (read-only view) ── */

.group-tab[b-nuv9grd6ow] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 0.25rem;
}

.form-grid[b-nuv9grd6ow] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.form-section[b-nuv9grd6ow] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-section-title[b-nuv9grd6ow] {
    margin: 0.25rem 0 0.1rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.form-field[b-nuv9grd6ow] {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: baseline;
    gap: 0.5rem;
}

.form-field label[b-nuv9grd6ow] {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-align: right;
}

.form-value[b-nuv9grd6ow] {
    font-size: 0.85rem;
    color: var(--text-primary);
    min-height: 1.2em;
}

.form-value-muted[b-nuv9grd6ow] { color: var(--text-secondary); }

.form-value-summary[b-nuv9grd6ow] {
    white-space: pre-wrap;
    line-height: 1.5;
    padding: 0.35rem 0.5rem;
    background: var(--surface-subtle, #f7f7f8);
    border: 1px solid var(--divider);
    border-radius: 4px;
    font-size: 0.85rem;
    min-height: 5em;
}

.form-audit[b-nuv9grd6ow] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--divider);
    font-size: 0.78rem;
    color: var(--text-secondary);
    align-self: flex-end;
}

.form-audit-row[b-nuv9grd6ow] {
    display: flex;
    gap: 0.4rem;
    align-items: baseline;
}

.form-audit-label[b-nuv9grd6ow] {
    font-weight: 500;
    min-width: 80px;
    text-align: right;
}

.form-audit-user[b-nuv9grd6ow] {
    background: none;
    border: none;
    padding: 0;
    color: var(--accent-primary);
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color 0.12s;
}

.form-audit-user:hover[b-nuv9grd6ow] {
    text-decoration-color: var(--accent-primary);
}

.phase-note[b-nuv9grd6ow] {
    margin: 0.5rem 0 0;
    padding: 0.4rem 0.6rem;
    background: var(--surface-subtle, #fff8e0);
    border: 1px dashed var(--divider);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* ── Tab placeholders (Notes, Developer in Phase 1) ── */

.tab-placeholder[b-nuv9grd6ow] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 0.25rem;
}

/* Custom "List" button for the Contacts subform — lime accent to mirror
   the Access datasheet's green "List" button (distinct from Add which is
   the main accent color). */
.subform-btn-accent[b-nuv9grd6ow] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.7rem;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1;
    background: var(--accent-secondary, #8bc34a);
    color: var(--accent-primary);
    border: 1px solid var(--accent-secondary, #8bc34a);
    border-radius: 4px;
    cursor: pointer;
    transition: filter 0.12s;
    height: 28px;
}

.subform-btn-accent:hover[b-nuv9grd6ow] { filter: brightness(1.05); }

/* Narrow State column ::deep drops into the scoped datasheet */
[b-nuv9grd6ow] .col-state { width: 60px; text-align: center; }
/* /Components/SearchBuilder/CriteriaBuilderRow.razor.rz.scp.css */
.criteria-builder-row[b-rpdfkuis7m] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.builder-select[b-rpdfkuis7m] {
    padding: 0.4rem 0.5rem;
    border: 1.5px solid var(--input-border);
    border-radius: 5px;
    font-size: 0.85rem;
    font-family: inherit;
    background: var(--content-bg);
    transition: border-color 0.15s;
}

.builder-select:focus[b-rpdfkuis7m] {
    outline: none;
    border-color: var(--accent-primary);
}

.builder-select:disabled[b-rpdfkuis7m] {
    background: var(--surface-hover);
    color: var(--text-muted);
}

.builder-logic[b-rpdfkuis7m]    { width: 70px; }
.builder-field[b-rpdfkuis7m]    { min-width: 150px; }
.builder-operator[b-rpdfkuis7m] { min-width: 140px; }

.builder-value[b-rpdfkuis7m] {
    min-width: 140px;
    max-width: 200px;
}

.field-input[b-rpdfkuis7m] {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1.5px solid var(--input-border);
    border-radius: 5px;
    font-size: 0.85rem;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.field-input:focus[b-rpdfkuis7m] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 10%, transparent);
}

.field-input:disabled[b-rpdfkuis7m] {
    background: var(--surface-hover);
    color: var(--text-muted);
}

.builder-group-toggle[b-rpdfkuis7m] {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.builder-group-toggle input[type="checkbox"][b-rpdfkuis7m] {
    display: none;
}

.group-paren[b-rpdfkuis7m] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--border);
    padding: 0.2rem 0.15rem;
    transition: color 0.15s;
}

.builder-group-toggle input:checked + .group-paren[b-rpdfkuis7m] {
    color: var(--accent-primary);
}

.btn[b-rpdfkuis7m] {
    padding: 0.5rem 1.1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    border: 1.5px solid transparent;
    white-space: nowrap;
}

.btn-sm[b-rpdfkuis7m] { padding: 0.35rem 0.8rem; font-size: 0.8rem; }

.btn-accent[b-rpdfkuis7m] {
    background: var(--color-success-action);
    color: var(--content-bg);
    border-color: var(--color-success-action);
}

.btn-accent:hover:not(:disabled)[b-rpdfkuis7m] { background: var(--color-success-action-hover); }
.btn-accent:disabled[b-rpdfkuis7m]              { opacity: 0.4; cursor: default; }
/* /Components/SearchBuilder/FilterClauseView.razor.rz.scp.css */
.filter-chip[b-iiisxwa0b1] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--row-selected);
    border: 1px solid var(--row-highlighted-selected);
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    line-height: 1.3;
    align-self: flex-start;
}

.chip-quick[b-iiisxwa0b1] {
    border-style: dashed;
}

.chip-negated[b-iiisxwa0b1] {
    background: var(--color-red-10);
    border-color: var(--color-red-40);
}

.chip-field[b-iiisxwa0b1]  { font-weight: 500; color: var(--text-primary); }
.chip-op[b-iiisxwa0b1]     { color: var(--text-secondary); }
.chip-value[b-iiisxwa0b1]  { color: var(--text-secondary); font-style: italic; }

.chip-not-inline[b-iiisxwa0b1] {
    padding: 0 0.3rem;
    font-size: 0.65rem;
    line-height: 1.3;
}

.chip-remove[b-iiisxwa0b1] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    color: var(--text-muted);
    padding: 0 0.15rem;
    margin-left: 0.15rem;
    transition: color 0.1s;
}

.chip-remove:hover[b-iiisxwa0b1] { color: var(--color-danger); }
/* /Components/SearchBuilder/FilterGroupView.razor.rz.scp.css */
.filter-group[b-ph3d1p386e] {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--content-bg);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.55rem 0.7rem;
    transition: border-color 0.15s, background 0.15s;
}

.filter-group-root[b-ph3d1p386e] {
    border-color: var(--border);
    background: var(--surface);
}

.filter-group-quickfind[b-ph3d1p386e] {
    border-color: var(--color-blue-40);
    background: var(--color-blue-10);
}

.filter-group-label[b-ph3d1p386e] {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-darkblue);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.15rem 0.25rem;
}

.filter-group-negated[b-ph3d1p386e] {
    border-color: var(--color-danger);
    background: var(--color-red-10);
}

.filter-group-header[b-ph3d1p386e] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px dashed var(--divider);
}

.filter-group-header-spacer[b-ph3d1p386e] { flex: 1; }

.chip-logic-toggle[b-ph3d1p386e] {
    background: var(--color-darkblue-10);
    color: var(--color-darkblue);
    border: 1px solid var(--color-darkblue-20);
    border-radius: 4px;
    padding: 0.1rem 0.45rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s;
}

.chip-logic-toggle:hover[b-ph3d1p386e] {
    background: var(--color-darkblue-20);
}

.chip-not-toggle[b-ph3d1p386e] {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.1rem 0.45rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.chip-not-toggle:hover[b-ph3d1p386e] {
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.chip-not-toggle-on[b-ph3d1p386e] {
    background: var(--color-red);
    color: var(--content-bg);
    border-color: var(--color-red);
}

.filter-group-action[b-ph3d1p386e] {
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0 0.35rem;
}

.filter-group-action:hover[b-ph3d1p386e] { color: var(--color-danger); }

.filter-group-body[b-ph3d1p386e] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.filter-group-empty[b-ph3d1p386e] {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
    padding: 0.35rem 0;
}

.filter-group-footer[b-ph3d1p386e] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding-top: 0.35rem;
    border-top: 1px dashed var(--divider);
}

.filter-group-add[b-ph3d1p386e] {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-family: inherit;
    transition: background 0.12s, color 0.12s;
}

.filter-group-add:hover[b-ph3d1p386e] {
    background: var(--surface-hover);
    color: var(--accent-primary);
}
/* /Components/SearchBuilder/QuickFindPanel.razor.rz.scp.css */
.quick-find-panel[b-e5h3kdoyc0] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.qf-field-row[b-e5h3kdoyc0] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.qf-field-label[b-e5h3kdoyc0] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.field-input[b-e5h3kdoyc0] {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1.5px solid var(--input-border);
    border-radius: 5px;
    font-size: 0.85rem;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
    background: var(--content-bg);
}

.field-input:focus[b-e5h3kdoyc0] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 10%, transparent);
}
/* /Components/Shared/FormHeader.razor.rz.scp.css */
/* ──────────────────────────────────────────────────────────────────────
   FormHeader — shared Title / Subtitle / right-slot header for Search,
   List, and Detail forms. Sits directly under the EntityToolbar.
   ────────────────────────────────────────────────────────────────────── */

.form-header[b-6dcvpjkunt] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.25rem 0.75rem;
}

.form-header-text[b-6dcvpjkunt] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.form-header-title[b-6dcvpjkunt] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
    /* Semantic role, defined once in app.css as the page-title colour.
       Never use a palette token directly here — a theme retint needs a
       single pivot, and component files shouldn't know which palette
       entry the semantic points at. */
    color: var(--color-page-title);
    line-height: 1.2;
}

.form-header-subtitle[b-6dcvpjkunt] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Editable subtitle — always an input, styled to read as plain text at
   rest. Transparent borders give a subtle hover hint and a clear focus
   ring without the "form field" heaviness. Text cursor on hover signals
   editability — no button-like pointer, since this isn't a click action. */
.form-header-subtitle-input[b-6dcvpjkunt] {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 0.1rem 0.35rem;
    margin-left: -0.35rem;
    font: inherit;
    color: var(--text-secondary);
    text-align: left;
    outline: none;
    min-width: 12rem;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
    cursor: text;
}

.form-header-subtitle-input:hover[b-6dcvpjkunt] {
    border-color: var(--divider);
    background: var(--surface-hover);
}

.form-header-subtitle-input:focus[b-6dcvpjkunt] {
    border-color: var(--accent-primary);
    background: var(--surface);
    color: var(--text-primary);
}

.form-header-aside[b-6dcvpjkunt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
/* /Components/Shared/TabSet.razor.rz.scp.css */
/* ──────────────────────────────────────────────────────────────────────
   TabSet — reusable tab strip + switched body.
   Mirrors the styling EntitySearch had inline so the look is consistent
   everywhere tabs appear (detail forms, search tabs, future subform hosts).
   ────────────────────────────────────────────────────────────────────── */

.tabset[b-w4lvet3yxf] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

.tab-strip[b-w4lvet3yxf] {
    display: flex;
    gap: 0.15rem;
    border-bottom: 1px solid var(--divider);
}

.tab-btn[b-w4lvet3yxf] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    margin-bottom: -1px;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
    border-radius: 6px 6px 0 0;
}

.tab-btn:hover[b-w4lvet3yxf] {
    color: var(--text-primary);
    background: var(--surface-hover);
}

.tab-active[b-w4lvet3yxf] {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
    font-weight: 600;
}

.tab-badge[b-w4lvet3yxf] {
    display: inline-block;
    min-width: 1.2rem;
    padding: 0.05rem 0.35rem;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 600;
    text-align: center;
    background: var(--row-selected);
    color: var(--text-secondary);
}

.tab-body[b-w4lvet3yxf] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding-top: 0.9rem;
}

/* ::deep lets the flex column propagate to the <div class="tab-page"> that
   <TabPage> emits — scoped CSS otherwise stops at the TabSet boundary. */
.tab-body[b-w4lvet3yxf]  .tab-page {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
/* /Components/Shared/ToastHost.razor.rz.scp.css */
/* Bottom-right corner stack — matches common toast patterns. Non-blocking. */
.toast-host[b-6fd8tix77o] {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    pointer-events: none; /* only individual toasts catch clicks */
}

.toast[b-6fd8tix77o] {
    pointer-events: auto;
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius-md, 6px);
    font-size: 0.875rem;
    max-width: 360px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    animation: toast-slide-in-b-6fd8tix77o 0.15s ease-out;
}

.toast-info[b-6fd8tix77o] {
    background: var(--color-darkestgray, #2a2d2d);
    color: #fff;
}

.toast-warning[b-6fd8tix77o] {
    background: #8a6d3b;
    color: #fff;
}

.toast-error[b-6fd8tix77o] {
    background: #a94442;
    color: #fff;
}

@keyframes toast-slide-in-b-6fd8tix77o {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
/* /Components/Shared/Tooltip.razor.rz.scp.css */
/* display: contents makes the anchor element itself generate no box — the
   wrapped element participates in its parent's layout as if it weren't wrapped.
   This keeps both cases working without the Tooltip knowing anything about
   its context:
     • SortableHeader: the sort-btn stays inline next to the label (flex
       wrapper used to break onto line 2).
     • NavMenu: the nav-link fills its <li> the same as before wrapping.
   Events still fire because the element is present in the DOM; only its
   layout box is suppressed. */
.tooltip-anchor[b-mv3v058ri8] {
    display: contents;
}

.tooltip-popup[b-mv3v058ri8] {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.65rem;
    background: var(--color-darkestgray, #2a2d2d);
    color: #fff;
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 400;
    border-radius: var(--radius-md, 6px);
    box-shadow: var(--shadow-md, 0 2px 8px rgba(0,0,0,0.15));
    animation: tooltip-fade-in-b-mv3v058ri8 0.15s ease-out;
}

.tooltip-text[b-mv3v058ri8] {
    line-height: 1.3;
}

.tooltip-shortcut[b-mv3v058ri8] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    padding-left: 0.5rem;
    opacity: 0.75;
}

.tooltip-shortcut kbd[b-mv3v058ri8] {
    font-family: inherit;
    font-size: inherit;
    background: rgba(255, 255, 255, 0.15);
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.tooltip-shortcut-hint[b-mv3v058ri8] {
    opacity: 0.8;
}

@keyframes tooltip-fade-in-b-mv3v058ri8 {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* /Components/Shared/UserPickerInput.razor.rz.scp.css */
.user-picker[b-t2tpiqx72m] {
    position: relative;
    width: 100%;
}

.user-picker-input[b-t2tpiqx72m] {
    width: 100%;
}

.user-picker-menu[b-t2tpiqx72m] {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 2px);
    background: var(--content-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: 50;
    max-height: 18rem;
    overflow-y: auto;
    padding: 0.25rem;
}

.user-picker-option[b-t2tpiqx72m] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    width: 100%;
    padding: 0.45rem 0.55rem;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--text-primary);
    transition: background 0.1s;
}

.user-picker-option:hover[b-t2tpiqx72m],
.user-picker-option-active[b-t2tpiqx72m] {
    background: var(--surface-hover);
}

.user-picker-name[b-t2tpiqx72m] {
    font-weight: 500;
}

.user-picker-sub[b-t2tpiqx72m] {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.user-picker-empty[b-t2tpiqx72m] {
    padding: 0.5rem 0.6rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
}