/* Extracted from items/templates/list_view/list_view.html — list view styles. */
/* =============================================================
ULTRA SLEEK LIST VIEW STYLING v3.0 Full width, compact, modern design using theme variables
============================================================= */

/* CSS Variables for Panel (Theme-aware) */
:root {
    --panel-label-color: #64748b;
    --panel-value-color: #1e293b;
    --panel-input-bg: #f8fafc;
    --panel-input-border: #e2e8f0;
    --panel-input-focus: var(--primary-color);
    --panel-section-bg: #ffffff;
    --panel-hover-bg: #f1f5f9;
    --comment-bg: #f8fafc;
    --comment-reply-bg: #f1f5f9;
    --mention-color: var(--primary-color);
    --reaction-bg: #f1f5f9;
    --reaction-active-bg: var(--primary-light);
    --pinned-border: #60a5fa;
}

[data-theme="carbon"] {
    --panel-label-color: var(--text-muted);
    --panel-value-color: var(--text-primary);
    --panel-input-bg: var(--bg-secondary);
    --panel-input-border: var(--border-color);
    --panel-section-bg: var(--bg-primary);
    --panel-hover-bg: var(--bg-tertiary);
    --comment-bg: var(--bg-secondary);
    --comment-reply-bg: var(--bg-tertiary);
    --reaction-bg: var(--bg-tertiary);
    --reaction-active-bg: color-mix(in srgb, var(--primary-color) 30%, transparent);
}

[data-theme="graphite"] {
    --panel-label-color: #64748b;
    --panel-value-color: #1e293b;
}

/* The shell owns the viewport on a list page, and the panel takes whatever is
   left after anything above it. Subtracting a guessed pixel offset instead is
   what used to leave the table hanging past the bottom edge on RSR routes. */
.main-content:has(> .container-fluid > .list-view-container) {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.main-content > .container-fluid:has(> .list-view-container) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.list-view-container {
    /* One gutter, even on all four sides: the list is a panel sitting on the
       ground, not a slab welded to the window edges. Change it here and every
       page built on the shared list view follows. */
    --lv-gutter: 20px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    /* Flush right on purpose: the table wants that width more than the page
       wants a symmetrical frame. Top, left and bottom keep the gutter. */
    margin: var(--lv-gutter) 0 var(--lv-gutter) var(--lv-gutter);
}

/* The panel the table sits in, shared by the list page and by the same table
   embedded in a record tab (.lv-embed). One declaration, two consumers, so the
   two cannot drift the way two copies did. The frame is a border AND a two
   layer shadow: the hairline draws the edge, the shadow lifts it off the
   ground. */
.list-view-container,
.lv-embed {
    background: var(--bg-primary);
    border: 1px solid var(--border-color, #e2e8f0);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--text-primary, #0f172a) 5%, transparent),
                0 12px 32px -24px color-mix(in srgb, var(--text-primary, #0f172a) 32%, transparent);
}

/* The table reads its type from whatever frame it sits in, so every frame that
   holds one has to say the same thing: the list page, a record tab, the file
   explorer and the mails table. */
.list-view-container,
.lv-embed,
.pmf-shell,
.mt-wrap {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 13px;
    color: var(--text-primary);
}

/* A table in a record tab is bounded on all four sides, so its panel closes on
   all four. The toolbar is the first thing in it and the frame clips, so the
   top corners are rounded off the bar rather than off the column header. */
.lv-embed {
    border-radius: 14px;
    overflow: hidden;
}

/* Row rhythm. On the list page the row is set by its tallest cell control, the
   fill-rate badge: 11px text at line-height 1.4 plus 4px padding, 23.4px, plus
   the cell's own 8px. A tab carries no such control, so the height is named
   here or the same table reads shorter one screen away. On a cell, height is a
   minimum - a taller row still grows. */
.lv-embed .lv-table tbody td,
.pmf-shell .lv-table tbody td,
.mt-wrap .mt-table tbody td {
    height: 39.4px;
}

/* The list page bleeds off the right edge of the window, so its panel opens on
   that side and only the bottom left corner closes. Declared after the shared
   frame so it wins the border above. */
.list-view-container {
    border-right: 0;
    border-radius: 0 0 0 14px;
}

/* The panel deliberately does not clip its overflow - the column, filter and
   sort menus are absolutely positioned inside it and would be cut off - so the
   top and bottom rows round their own corners instead. */
.list-view-container > .lv-cmd-bar:first-child {
    border-radius: 13px 0 0 0;
}

.list-view-container > .lv-status-bar:last-child {
    border-radius: 0 0 0 13px;
}

/* Command Bar */
.lv-cmd-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background: var(--model-accent-subtle, var(--bg-secondary));
    border-bottom: 1px solid var(--model-accent-border, var(--border-color));
    flex-shrink: 0;
    gap: 8px;
    min-height: 44px;
}

.lv-cmd-left,
.lv-cmd-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.lv-cmd-divider {
    width: 1px;
    height: 18px;
    background: var(--border-color);
    margin: 0 4px;
}

/* Lists with no record specific tools start straight at Columns. */
.lv-cmd-left > .lv-cmd-divider:first-child {
    display: none;
}

.lv-cmd-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.12s ease;
    text-decoration: none;
}

.lv-cmd-btn:hover:not(:disabled) {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    text-decoration: none;
}

/* Toolbar controls use the Time Tracker scale: 28px ghost buttons that only
   show a surface on hover, so the bar reads as one quiet strip. */
.lv-cmd-bar .lv-cmd-btn {
    height: 28px;
    padding: 0 9px;
    gap: 6px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
}

.lv-cmd-bar .lv-cmd-btn:hover:not(:disabled),
.lv-cmd-bar .lv-cmd-btn.open {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.lv-cmd-bar .lv-cmd-btn i,
.lv-cmd-bar .lv-cmd-btn svg {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

/* Only the buttons that carry the record's own colour get a tint.
   --rec-color is what the list templates actually set; --model-accent is only
   defined on the engine pages, so it is the fallback, not the source. */
.lv-cmd-bar .lv-cmd-btn.accent {
    --btn-accent: var(--rec-color, var(--model-accent, var(--primary-color)));
    background: color-mix(in srgb, var(--btn-accent) 10%, transparent);
    color: var(--btn-accent);
    font-weight: 600;
}

.lv-cmd-bar .lv-cmd-btn.accent:hover:not(:disabled),
.lv-cmd-bar .lv-cmd-btn.accent.open {
    background: color-mix(in srgb, var(--btn-accent) 16%, transparent);
    color: var(--btn-accent);
}

/* The view you are already on. It is accented like any other current state, but
   it goes nowhere, so it does not answer the pointer like the ones that do. */
.lv-cmd-bar .lv-cmd-btn.is-current {
    cursor: default;
}
.lv-cmd-bar .lv-cmd-btn.is-current:hover {
    background: color-mix(in srgb, var(--btn-accent) 10%, transparent);
}

.lv-cmd-bar .lv-cmd-btn.danger {
    background: color-mix(in srgb, var(--danger-color) 8%, transparent);
    color: var(--danger-color);
}

.lv-cmd-bar .lv-cmd-btn.accent.has-filters {
    background: color-mix(in srgb, var(--btn-accent) 16%, transparent);
    box-shadow: none;
}

/* Overflow menu for the tools used less than once a session. */
.lv-smart-dropdown.lv-more-dropdown {
    min-width: 200px;
    padding: 4px;
    border-radius: 8px;
}

.lv-more-dropdown .lv-sd-item {
    width: 100%;
    gap: 8px;
    padding: 6px 8px;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 12px;
    color: var(--text-primary);
    text-align: left;
    text-decoration: none;
}

.lv-more-dropdown .lv-sd-item i {
    font-size: 14px;
    color: var(--text-secondary);
}

.lv-more-dropdown .lv-sd-item:hover:not(:disabled) {
    color: var(--text-primary);
    text-decoration: none;
}

.lv-more-dropdown .lv-sd-item:disabled {
    opacity: 0.5;
    cursor: default;
}

.lv-more-dropdown .lv-sd-divider {
    margin: 4px 0;
}

.lv-cmd-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.lv-cmd-btn.accent {
    color: var(--primary-color);
    font-weight: 600;
}

.lv-cmd-btn.accent:hover:not(:disabled) {
    background: var(--primary-light);
}

/* A toolbar button that picks which slice the page lists (a document kind, a
   roster scope): the pressed one carries the record colour, so the toolbar
   itself says what is on screen. */
.lv-cmd-bar .lv-cmd-btn[aria-pressed="true"] {
    background: color-mix(in srgb, var(--rec-color, var(--primary-color, #0ea5e9)) 14%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rec-color, var(--primary-color, #0ea5e9)) 30%, transparent);
    color: var(--rec-color, var(--primary-color, #0ea5e9));
    font-weight: 600;
}

.lv-cmd-btn.accent.has-filters {
    background: var(--primary-light);
    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.2);
}

.lv-cmd-btn.danger {
    color: var(--danger-color);
}

.lv-cmd-btn.danger:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.1);
}

.lv-cmd-btn i,
.lv-cmd-btn svg {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

.lv-btn-chevron {
    font-size: 12px !important;
    margin-left: 2px;
    transition: transform 0.2s ease;
}

.lv-cmd-btn.open .lv-btn-chevron {
    transform: rotate(180deg);
}

.lv-filter-count {
    background: var(--btn-accent, var(--primary-color));
    color: var(--bg-primary);
    font-variant-numeric: tabular-nums;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 10px;
    margin-left: 2px;
}

/* Smart Dropdowns (Columns & Filters) */
.lv-dropdown-wrapper {
    position: relative;
}

.lv-smart-dropdown {
    --lv-accent: var(--rec-color, var(--primary-color));
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 12px 32px color-mix(in srgb, var(--text-primary) 14%, transparent),
                0 2px 6px color-mix(in srgb, var(--text-primary) 8%, transparent);
    transform-origin: top left;
    min-width: 280px;
    max-height: 420px;
    display: none;
    flex-direction: column;
    z-index: 1000;
    overflow: hidden;
}

.lv-smart-dropdown.columns-dropdown {
    max-height: 520px;
    min-width: 310px;
    overflow: hidden;
    display: none;
    flex-direction: column;
}

.lv-smart-dropdown.columns-dropdown.show {
    display: flex;
    animation: dropdownSlide 0.15s ease-out;
}

.lv-smart-dropdown.show {
    display: flex;
    animation: dropdownSlide 0.15s ease-out;
}

@keyframes dropdownSlide {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lv-sd-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.lv-sd-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.lv-sd-actions {
    display: flex;
    gap: 8px;
}

.lv-sd-link {
    font-size: 11px;
    font-weight: 500;
    color: var(--primary-color);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.15s;
}

.lv-sd-link:hover {
    background: var(--primary-light);
}

.lv-sd-link.danger {
    color: var(--danger-color);
}

.lv-sd-link.danger:hover {
    background: color-mix(in srgb, var(--danger-color) 10%, transparent);
}

.lv-sd-search {
    padding: 8px 12px;
    position: relative;
    border-bottom: 1px solid var(--border-color);
}

.lv-sd-search i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 14px;
}

.lv-sd-search input {
    width: 100%;
    padding: 8px 10px 8px 32px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 12px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.15s;
}

.lv-sd-search input:focus {
    border-color: var(--lv-accent, var(--primary-color));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lv-accent, var(--primary-color)) 15%, transparent);
}

.lv-sd-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    max-height: 280px;
}

.lv-sd-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
}

.lv-sd-item:hover {
    background: var(--bg-secondary);
}

/* Checkboxes in the toolbar dropdowns are drawn by hand so the tick pops in
   with the record colour instead of the browser's default blue box. */
.lv-smart-dropdown input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1.5px solid color-mix(in srgb, var(--text-muted) 65%, transparent);
    border-radius: 4px;
    background: var(--bg-primary);
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.1s ease;
}

.lv-smart-dropdown input[type="checkbox"]::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4.5px;
    height: 8.5px;
    border: solid var(--bg-primary);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}

.lv-smart-dropdown input[type="checkbox"]:checked {
    background: var(--lv-accent);
    border-color: var(--lv-accent);
}

.lv-smart-dropdown input[type="checkbox"]:checked::after {
    transform: rotate(45deg) scale(1);
}

.lv-smart-dropdown label:hover > input[type="checkbox"]:not(:disabled):not(:checked) {
    border-color: var(--lv-accent);
}

.lv-smart-dropdown input[type="checkbox"]:active:not(:disabled) {
    transform: scale(0.86);
}

.lv-smart-dropdown input[type="checkbox"]:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--lv-accent) 45%, transparent);
    outline-offset: 2px;
}

.lv-smart-dropdown input[type="checkbox"]:disabled {
    opacity: 0.45;
    cursor: default;
}

.lv-sd-item-label {
    flex: 1;
    font-size: 12.5px;
    color: var(--text-secondary);
    transition: color 0.12s ease;
}

.lv-sd-item:has(input:checked) .lv-sd-item-label {
    color: var(--text-primary);
}

/* The field key only matters when two labels look alike, so it waits for hover. */
.lv-sd-item-field {
    font-size: 10px;
    color: var(--text-muted);
    font-family: 'SF Mono', Monaco, monospace;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.lv-sd-item:hover .lv-sd-item-field,
.lv-sd-item:focus-within .lv-sd-item-field {
    opacity: 1;
}

.lv-sd-divider {
    height: 1px;
    background: var(--border-color);
    margin: 8px 0;
}

/* Linked Fields section divider in column selector */
.lv-sd-section-divider {
    display: flex;
    align-items: center;
    padding: 6px 10px 2px;
    margin-top: 6px;
    border-top: 1px solid var(--border-color);
}

.lv-sd-section-divider-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.lv-sd-section-divider-label i {
    font-size: 13px;
}

.lv-sd-item-linked {
    padding-left: 14px;
}

.lv-sd-item-tag-linked {
    display: inline-flex;
    align-items: center;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: color-mix(in srgb, var(--info-color) 12%, transparent);
    color: var(--info-color);
    flex-shrink: 0;
    line-height: 1.4;
}

/* -- Column Selector Tabs -- */
.lv-col-tabs {
    display: flex;
    flex-shrink: 0;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.lv-col-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    border: none;
    background: none;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    position: relative;
}

.lv-col-tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 12px;
    right: 12px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: transparent;
    transition: background 0.15s;
}

.lv-col-tab:hover {
    color: var(--text-primary);
}

.lv-col-tab.active {
    color: var(--lv-accent, var(--primary-color));
}

.lv-col-tab.active::after {
    background: var(--lv-accent, var(--primary-color));
}

.lv-col-tab i {
    font-size: 15px;
}

.lv-col-tab-count {
    font-size: 10px;
    font-weight: 600;
    background: color-mix(in srgb, var(--text-muted) 12%, transparent);
    color: var(--text-muted);
    padding: 1px 6px;
    border-radius: 8px;
    min-width: 18px;
    text-align: center;
    line-height: 1.4;
    transition: background 0.15s, color 0.15s;
}

.lv-col-tab.active .lv-col-tab-count {
    background: color-mix(in srgb, var(--lv-accent, var(--primary-color)) 14%, transparent);
    color: var(--lv-accent, var(--primary-color));
}

/* -- Toolbar (search + select/deselect) -- */
.lv-col-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px 6px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.lv-col-toolbar .lv-sd-search {
    flex: 1;
    padding: 0;
    border-bottom: none;
    position: relative;
}

.lv-col-toolbar .lv-sd-search i {
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.lv-col-toolbar .lv-sd-search input {
    padding: 6px 8px 6px 28px;
    font-size: 12px;
}

.lv-col-toolbar-actions {
    display: flex;
    flex-shrink: 0;
    gap: 2px;
}

.lv-col-toolbar-actions .lv-sd-link {
    white-space: nowrap;
    font-size: 10.5px;
    padding: 4px 7px;
}

/* -- Tab Panels -- */
.lv-col-panel {
    display: none;
    flex: 1;
    min-height: 0;
}

.lv-col-panel.active {
    display: block;
    overflow-y: auto;
}

.lv-col-panel > .lv-sd-list {
    max-height: none;
    overflow: visible;
}

.lv-sd-loading {
    font-size: 12px;
    color: var(--text-muted);
    padding: 8px 16px;
    font-style: italic;
}

/* Custom Fields tab */
.lv-cf-tab-header {
    display: flex;
    justify-content: flex-end;
    padding: 6px 14px 4px;
    border-bottom: 1px solid var(--panel-input-border);
}
.lv-cf-manage-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--primary-color);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.15s;
}
.lv-cf-manage-link:hover { background: var(--panel-hover-bg); }
.lv-cf-manage-link i { font-size: 13px; }

.lv-sd-item-cf .lv-sd-item-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.lv-sd-item-hint {
    color: var(--text-muted);
    cursor: help;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}
.lv-cf-type-pill {
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
    color: var(--accent-color);
    border-radius: 4px;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.lv-sd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 16px;
    color: var(--text-muted);
    text-align: center;
}
.lv-sd-empty i {
    font-size: 32px;
    opacity: 0.4;
    margin-bottom: 8px;
}
.lv-sd-empty p { margin: 0 0 10px; font-size: 13px; }
.lv-sd-link.primary {
    background: var(--primary-color);
    color: #fff !important;
    padding: 5px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
}
.lv-sd-link.primary:hover { filter: brightness(1.1); }

/* Multi-user / multi-select chip pickers in side panel */
.lv-multi-picker {
    border: 1px solid var(--panel-input-border);
    border-radius: 6px;
    padding: 6px 8px;
    background: var(--panel-input-bg);
    min-height: 36px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    cursor: text;
    position: relative;
}
.lv-multi-picker:focus-within { border-color: var(--panel-input-focus); }
.lv-multi-chip {
    background: var(--primary-color);
    color: #fff;
    border-radius: 12px;
    padding: 2px 8px 2px 9px;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.4;
}
.lv-multi-chip-x {
    cursor: pointer;
    opacity: 0.8;
    margin-left: 1px;
    font-size: 14px;
    line-height: 1;
}
.lv-multi-chip-x:hover { opacity: 1; }
.lv-multi-input {
    border: none;
    background: transparent;
    outline: none;
    flex: 1;
    min-width: 80px;
    font-size: 12px;
    color: var(--panel-value-color);
    padding: 2px;
}
/* Parked on <body> while open and placed by openPanelMenu() in
   static/shared/js/list-view.js, which carries the note on why no panel menu can
   stay in its field row. Offsets and size come from JS. */
.lv-multi-options {
    position: absolute;
    min-width: 200px;
    background: var(--panel-section-bg);
    border: 1px solid var(--panel-input-border);
    border-radius: 6px;
    max-height: 220px;
    overflow-y: auto;
    z-index: 2100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.lv-multi-option {
    padding: 7px 10px;
    font-size: 12px;
    cursor: pointer;
    color: var(--panel-value-color);
}
.lv-multi-option:hover { background: var(--panel-hover-bg); }
.lv-multi-option.selected { background: var(--panel-hover-bg); opacity: 0.6; }

/* Custom-fields section in side panel.
   Custom fields reuse the normal .lv-detail-section / .lv-detail-field look so
   they match built-in fields — no tint. Only the section's Manage link and the
   per-field hint icon need their own (neutral) styling. */
.lv-detail-section-link {
    margin-left: auto;
    color: var(--text-muted);
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
}
.lv-detail-section-link:hover {
    background: var(--panel-hover-bg);
    color: var(--primary-color);
}
.lv-detail-field-hint {
    color: var(--text-muted);
    cursor: help;
    font-size: 11px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.lv-rel-group {
    margin-bottom: 2px;
}

.lv-rel-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
    user-select: none;
}

.lv-rel-group-header:hover {
    background: var(--bg-secondary);
}

.lv-rel-group-chevron {
    font-size: 14px;
    color: var(--text-muted);
    transition: transform 0.2s;
    flex-shrink: 0;
}

.lv-rel-group-chevron.open {
    transform: rotate(90deg);
}

.lv-rel-group-icon {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: var(--rel-ent-bg, var(--bg-secondary, #f8fafc));
    color: var(--rel-ent, var(--text-secondary, #475569));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

/* Group icons in the column picker wear the related entity's colour. The
   --ent-* tokens are theme aware (home/brand_colors.py), so these stay a light
   tint in graphite and turn into a translucent tint in carbon. */
.lv-rel-group-icon.deals { --rel-ent: var(--ent-deals, #4F46E5); --rel-ent-bg: var(--ent-deals-bg, #EEF2FF); }
.lv-rel-group-icon.jobs { --rel-ent: var(--ent-jobs, #1D4ED8); --rel-ent-bg: var(--ent-jobs-bg, #EFF6FF); }
.lv-rel-group-icon.contacts { --rel-ent: var(--ent-contacts, #059669); --rel-ent-bg: var(--ent-contacts-bg, #ECFDF5); }
.lv-rel-group-icon.companies { --rel-ent: var(--ent-companies, #E11D48); --rel-ent-bg: var(--ent-companies-bg, #FFF1F2); }
.lv-rel-group-icon.candidates { --rel-ent: var(--ent-candidates, #0284C7); --rel-ent-bg: var(--ent-candidates-bg, #F0F9FF); }
.lv-rel-group-icon.suppliers { --rel-ent: var(--ent-suppliers, #7C3AED); --rel-ent-bg: var(--ent-suppliers-bg, #F5F3FF); }

.lv-rel-group-name {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.lv-rel-group-badge {
    font-size: 10px;
    color: var(--text-muted);
    background: var(--bg-secondary);
    padding: 2px 7px;
    border-radius: 10px;
}

.lv-rel-group-items {
    padding-left: 14px;
    overflow: hidden;
    transition: max-height 0.25s ease;
}

.lv-rel-group-items.collapsed {
    max-height: 0 !important;
}

.lv-rel-col-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
}

.lv-rel-col-item:hover {
    background: var(--bg-secondary);
}

.lv-rel-col-item input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--primary-color);
    cursor: pointer;
}

.lv-rel-col-label {
    flex: 1;
    font-size: 12.5px;
    color: var(--text-primary);
}

.lv-rel-col-type {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-muted);
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Related column header cells in the table */
.lv-data-hdr[data-field^="rel__"] .lv-hdr-label {
    font-size: 12px;
}

.lv-data-hdr[data-field^="rel__"] .lv-rel-tag {
    display: inline-block;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: var(--primary-color, #4f46e5);
    color: var(--btn-primary-text, #ffffff);
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 4px;
    vertical-align: middle;
    font-weight: 600;
}

/* Related columns in entity colours. Every per-model rule used to carry its
   own light pastel hexes, which lit up as white boxes in the dark theme. Each
   header and cell now publishes its entity's theme-aware --ent-* tokens once,
   and the tag, count, pill, name tag and text rules below read them. */
.item-colors-on [data-rel-model="companies"] { --rel-ent: var(--ent-companies, #E11D48); --rel-ent-bg: var(--ent-companies-bg, #FFF1F2); --rel-ent-border: var(--ent-companies-border, #FECDD3); }
.item-colors-on [data-rel-model="candidates"] { --rel-ent: var(--ent-candidates, #0284C7); --rel-ent-bg: var(--ent-candidates-bg, #F0F9FF); --rel-ent-border: var(--ent-candidates-border, #BAE6FD); }
.item-colors-on [data-rel-model="contacts"] { --rel-ent: var(--ent-contacts, #059669); --rel-ent-bg: var(--ent-contacts-bg, #ECFDF5); --rel-ent-border: var(--ent-contacts-border, #A7F3D0); }
.item-colors-on [data-rel-model="suppliers"] { --rel-ent: var(--ent-suppliers, #7C3AED); --rel-ent-bg: var(--ent-suppliers-bg, #F5F3FF); --rel-ent-border: var(--ent-suppliers-border, #DDD6FE); }
.item-colors-on [data-rel-model="jobs"] { --rel-ent: var(--ent-jobs, #1D4ED8); --rel-ent-bg: var(--ent-jobs-bg, #EFF6FF); --rel-ent-border: var(--ent-jobs-border, #BFDBFE); }
.item-colors-on [data-rel-model="deals"] { --rel-ent: var(--ent-deals, #4F46E5); --rel-ent-bg: var(--ent-deals-bg, #EEF2FF); --rel-ent-border: var(--ent-deals-border, #C7D2FE); }
.item-colors-on [data-rel-model="emails"] { --rel-ent: var(--ent-mailbox, #2563EB); --rel-ent-bg: var(--ent-mailbox-bg, #EFF6FF); --rel-ent-border: var(--ent-mailbox-border, #BFDBFE); }

.item-colors-on .lv-data-hdr[data-rel-model] { border-top: 2px solid var(--rel-ent, transparent); }
.item-colors-on .lv-data-hdr[data-rel-model] .lv-rel-tag { background: var(--rel-ent, var(--primary-color, #4f46e5)); }
.item-colors-on td[data-rel-model] .lv-rel-count:not(.zero),
.item-colors-on td[data-rel-model] .lv-rel-pill,
.item-colors-on td[data-rel-model] .lv-rel-name-tag {
    background: var(--rel-ent-bg, var(--bg-secondary, #f8fafc));
    color: var(--rel-ent, var(--text-primary, #0f172a));
    border-color: var(--rel-ent-border, var(--border-color, #e2e8f0));
}
.item-colors-on td[data-rel-model] .lv-rel-name-tag:hover {
    background: color-mix(in srgb, var(--rel-ent, var(--primary-color, #4f46e5)) 22%, transparent);
    border-color: var(--rel-ent, var(--primary-color, #4f46e5));
}
.item-colors-on td[data-rel-model] .lv-rel-list-val { color: var(--rel-ent, var(--text-secondary, #475569)); }

/* Carbon: a solid tag with white text drops to about 2.5:1 on the lifted
   entity colours, so the header tag goes to the same tint as the cells. */
[data-theme="carbon"] .lv-data-hdr[data-field^="rel__"] .lv-rel-tag {
    background: color-mix(in srgb, var(--primary-color, #14b8a6) 18%, transparent);
    color: var(--accent-color, #5eead4);
}
[data-theme="carbon"] .item-colors-on .lv-data-hdr[data-rel-model] .lv-rel-tag {
    background: var(--rel-ent-bg, color-mix(in srgb, var(--primary-color, #14b8a6) 18%, transparent));
    color: var(--rel-ent, var(--accent-color, #5eead4));
}

/* Related column cell values */
td[data-field^="rel__"] {
    font-size: 12.5px;
    color: var(--text-secondary);
}

td[data-field^="rel__"] .lv-rel-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 6px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    background: var(--bg-secondary);
    color: var(--text-primary);
}

td[data-field^="rel__"] .lv-rel-count.zero {
    color: var(--text-muted);
}

/* Pill tags for list-type related columns */
.lv-rel-pill {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    margin: 0;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    white-space: nowrap;
    border: 1px solid var(--border-color);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

/* Disabled related column items in the selector */
.lv-rel-col-item.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.lv-rel-col-item.disabled input[type="checkbox"] {
    cursor: not-allowed;
}

/* Clickable name tags in related columns */
.lv-rel-name-tag {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    margin: 1px 3px 1px 0;
    background: var(--bg-secondary);
    color: var(--text-primary);
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid var(--border-color);
    line-height: 1.4;
}

.lv-rel-name-tag:hover {
    background: var(--primary-light);
    color: var(--primary-color);
    border-color: var(--primary-color);
    text-decoration: none;
}



.lv-rel-name-tags-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    align-items: center;
}

.lv-rel-overflow-tag {
    font-size: 10px;
    color: var(--text-muted);
    padding: 2px 4px;
    white-space: nowrap;
}

/* Reverse OneToOne field cells (description, lead_stage_connection, etc.) */
.lv-o2o-cell {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    overflow: hidden;
}

.lv-o2o-lead-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    overflow: hidden;
}

.lv-o2o-lead-name {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90px;
}

.lv-o2o-stage-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    background: #EEF2FF;
    color: #4F46E5;
    border: 1px solid rgba(79, 70, 229, 0.15);
    letter-spacing: 0.01em;
}

.lv-o2o-desc-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    max-width: 100%;
    overflow: hidden;
}

.lv-o2o-desc-badge i {
    font-size: 13px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.lv-o2o-desc-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lv-o2o-generic-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lv-o2o-empty {
    color: var(--text-muted);
    font-size: 12px;
}

/* OneToOne column header tag */
.lv-o2o-hdr-tag {
    display: inline-block;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 1px 4px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--info-color) 12%, transparent);
    color: var(--info-color);
    margin-left: 5px;
    vertical-align: middle;
    line-height: 1.4;
}

/* OneToOne detail panel styles */
.lv-o2o-detail {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 6px 0;
}

.lv-o2o-detail i {
    font-size: 15px;
    color: var(--text-muted);
    margin-top: 1px;
    flex-shrink: 0;
}

.lv-o2o-detail-desc {
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Column resize active state */
.lv-resize.active,
.lv-resize.active:hover {
    background: var(--primary-color);
}

body.col-resizing {
    cursor: col-resize !important;
    user-select: none;
}

body.col-resizing * {
    cursor: col-resize !important;
}

/* Filter Dropdown Specifics */
.filter-dropdown {
    min-width: 340px;
}

.lv-filter-builder {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
}

/* Native selects keep keyboard and screen reader behaviour; only the closed
   state is restyled to the 28px toolbar scale with a drawn chevron. */
.lv-filter-col-select,
.lv-filter-op-select,
.lv-filter-value-wrapper select {
    appearance: none;
    -webkit-appearance: none;
    height: 28px;
    min-width: 0;
    padding: 0 26px 0 9px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: inherit;
    font-size: 12px;
    background-color: var(--bg-primary);
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.lv-filter-col-select:hover,
.lv-filter-op-select:hover,
.lv-filter-value-input:hover,
.lv-filter-value-wrapper select:hover {
    border-color: color-mix(in srgb, var(--text-muted) 55%, var(--border-color));
}

.lv-filter-col-select optgroup {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 11px;
    padding-top: 4px;
}

.lv-filter-col-select optgroup option {
    font-weight: 400;
    color: var(--text-primary);
    font-size: 12px;
    padding-left: 8px;
}

.lv-filter-col-select:focus,
.lv-filter-op-select:focus,
.lv-filter-value-input:focus,
.lv-filter-value-wrapper select:focus {
    outline: none;
    border-color: var(--lv-accent, var(--primary-color));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lv-accent, var(--primary-color)) 15%, transparent);
}

.lv-filter-value-input {
    flex: 1;
    min-width: 0;
    height: 28px;
    padding: 0 9px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: inherit;
    font-size: 12px;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.lv-filter-add-btn {
    grid-column: 2;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: var(--lv-accent, var(--primary-color));
    color: var(--bg-primary);
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease, transform 0.1s ease;
}

.lv-filter-add-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--lv-accent, var(--primary-color)) 85%, var(--text-primary));
}

.lv-filter-add-btn:active:not(:disabled) {
    transform: scale(0.92);
}

/* Greyed until the filter can actually be added, so a click is never ignored. */
.lv-filter-add-btn:disabled {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    cursor: default;
}

.lv-filter-add-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--lv-accent, var(--primary-color)) 45%, transparent);
    outline-offset: 2px;
}

.lv-active-filters-list {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 150px;
    overflow-y: auto;
}

.lv-filter-chip-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px 5px 9px;
    background: color-mix(in srgb, var(--lv-accent, var(--primary-color)) 9%, transparent);
    border-radius: 6px;
    font-size: 12px;
    transform-origin: left center;
}

.lv-filter-chip-item.is-new {
    animation: lvPopIn 0.18s cubic-bezier(0.23, 1, 0.32, 1);
}

.lv-filter-chip-col {
    font-weight: 600;
    color: var(--lv-accent, var(--primary-color));
}

.lv-filter-chip-op {
    color: var(--text-muted);
}

.lv-filter-chip-val {
    color: var(--text-primary);
    font-weight: 500;
}

.lv-filter-chip-remove {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: var(--text-muted);
    border-radius: 50%;
    display: flex;
    transition: all 0.12s;
}

.lv-filter-chip-remove:hover {
    background: color-mix(in srgb, var(--danger-color) 12%, transparent);
    color: var(--danger-color);
}

.lv-filter-footer {
    display: flex;
    justify-content: flex-end;
    padding: 0 10px;
}

.lv-filter-footer .lv-sd-link {
    margin-bottom: 8px;
}

.lv-saved-filters {
    padding: 0 12px 12px;
}

.lv-saved-filters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}

.lv-saved-filters-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lv-saved-filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
}

.lv-saved-filter-item:hover {
    background: var(--bg-secondary);
}

.lv-saved-filter-item i {
    color: var(--text-muted);
}

.lv-saved-filter-name {
    flex: 1;
    font-size: 12px;
}

/* Search Box */
.lv-search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.lv-search-box > i {
    position: absolute;
    left: 9px;
    color: var(--text-muted);
    font-size: 13px;
}

.lv-search-box input {
    width: 220px;
    height: 28px;
    padding: 0 26px 0 28px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    font-family: inherit;
    font-size: 12px;
    color: var(--text-primary);
    outline: none;
    transition: all 0.15s ease;
}

.lv-search-box input::placeholder {
    color: var(--text-muted);
}

.lv-search-box input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-light);
}

.lv-search-clear {
    position: absolute;
    right: 4px;
    display: flex;
    background: none;
    border: none;
    cursor: pointer;
    padding: 3px;
    color: var(--text-muted);
    border-radius: 50%;
}

.lv-search-clear:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Header Bar */
.lv-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 16px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}


.lv-title {
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-primary);
}

.lv-title i {
    font-size: 16px;
    color: var(--rec-color, var(--model-accent, var(--primary-color)));
}

.lv-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lv-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

.lv-badge.sort {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.lv-badge.group {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.lv-badge button {
    display: flex;
    background: none;
    border: none;
    cursor: pointer;
    padding: 1px;
    color: inherit;
    border-radius: 50%;
    margin-left: 2px;
}

.lv-badge button:hover {
    background: rgba(0, 0, 0, 0.1);
}

.lv-count {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    padding: 3px 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
}

/* Filters Bar */
.lv-filters-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 6px 12px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.lv-select-all-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--primary-light, rgba(139, 124, 247, 0.08));
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
    color: var(--text-primary);
    flex-shrink: 0;
}

.lv-select-all-banner a {
    color: var(--primary-color, #8b7cf7);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.lv-select-all-banner a:hover {
    text-decoration: underline;
}

.lv-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px 3px 6px;
    background: var(--primary-light);
    border-radius: 4px;
    font-size: 11px;
    color: var(--primary-color);
    font-weight: 500;
}

.lv-filter-chip button {
    display: flex;
    background: none;
    border: none;
    cursor: pointer;
    padding: 1px;
    color: var(--primary-color);
    border-radius: 50%;
}

.lv-filter-chip button:hover {
    background: rgba(0, 0, 0, 0.1);
}

.lv-clear-all {
    font-size: 11px;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 500;
}

.lv-clear-all:hover {
    background: var(--bg-tertiary);
}

/* Table Container */
.lv-table-wrap {
    flex: 1;
    overflow: auto;
    position: relative;
    background: var(--bg-primary);
}

.lv-table-wrap::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.lv-table-wrap::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

.lv-table-wrap::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.lv-table-wrap::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Table */
.lv-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bg-primary);
}

.lv-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-secondary);
}

.lv-table th {
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    text-align: left;
    user-select: none;
    position: relative;
    background: var(--bg-secondary);
}

.lv-checkbox-hdr {
    width: 40px;
    padding: 8px 10px;
    text-align: center;
}

/* Spacer column: absorbs leftover table width so real columns keep their sizes */
.lv-spacer-hdr,
.lv-spacer-cell {
    width: auto;
    padding: 0;
    border: none;
    pointer-events: none;
    user-select: none;
    background: transparent;
}

/* Cell filter-by-value hover button */
td[data-field]:not(.lv-checkbox-cell):not(.lv-spacer-cell):not(.lv-fill-rate-cell):not(.lv-follow-cell) {
    position: relative;
}

/* The button sits on top of the cell text, so it needs to know the surface it
   is floating over to blend its scrim. Row states repaint that surface. */
.lv-table tbody tr > td { --lv-cell-bg: var(--bg-primary, #ffffff); }
.lv-table tbody tr:hover > td { --lv-cell-bg: var(--bg-secondary, #f8fafc); }
.lv-table tbody tr.selected > td,
.lv-table tbody tr.selected:hover > td { --lv-cell-bg: var(--primary-light, #eef2ff); }

/* Long cell values fade out before the button. The scrim lives on the cell, not
   on the button, so the hover scale cannot grow it over more of the value. */
td[data-field]:has(> .lv-cell-filter-btn)::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 20px;
    width: 42px;
    background: linear-gradient(to right, transparent, var(--lv-cell-bg) 70%);
    pointer-events: none;
    z-index: 2;
}

.lv-cell-filter-btn {
    position: absolute;
    top: 50%;
    right: 3px;
    transform: translateY(-50%);
    transform-origin: 100% 50%;
    display: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--lv-cell-bg);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 0;
    z-index: 3;
    pointer-events: auto;
    animation: lvFilterBtnIn 0.26s cubic-bezier(0.34, 1.4, 0.64, 1);
    transition: color 0.14s ease,
                border-color 0.14s ease,
                background 0.14s ease,
                box-shadow 0.18s ease,
                transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Click ripple */
.lv-cell-filter-btn::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 8px;
    border: 1.5px solid var(--rec-color, var(--primary-color));
    opacity: 0;
    pointer-events: none;
}

.lv-cell-filter-btn i {
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

td[data-field]:not(.lv-checkbox-cell):not(.lv-spacer-cell):not(.lv-fill-rate-cell):not(.lv-follow-cell):hover .lv-cell-filter-btn {
    display: flex;
}

.lv-cell-filter-btn:hover {
    color: var(--rec-color, var(--primary-color));
    border-color: color-mix(in srgb, var(--rec-color, var(--primary-color)) 45%, var(--border-color));
    background: color-mix(in srgb, var(--rec-color, var(--primary-color)) 12%, var(--lv-cell-bg));
    box-shadow: 0 2px 10px color-mix(in srgb, var(--rec-color, var(--primary-color)) 24%, transparent);
    transform: translateY(-50%) scale(1.14);
}

.lv-cell-filter-btn:hover i {
    transform: rotate(-10deg) scale(1.08);
}

.lv-cell-filter-btn:active {
    transform: translateY(-50%) scale(0.86);
    transition-duration: 0.06s;
}

.lv-cell-filter-btn:focus-visible {
    outline: none;
    border-color: var(--rec-color, var(--primary-color));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--rec-color, var(--primary-color)) 34%, transparent);
}

.lv-cell-filter-btn.is-punch {
    animation: lvFilterPunch 0.36s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lv-cell-filter-btn.is-punch::after {
    animation: lvFilterRing 0.5s ease-out;
}

.lv-cell-filter-btn.active-filter {
    display: flex;
    color: var(--rec-color, var(--primary-color));
    border-color: color-mix(in srgb, var(--rec-color, var(--primary-color)) 38%, var(--border-color));
    background: color-mix(in srgb, var(--rec-color, var(--primary-color)) 13%, var(--lv-cell-bg));
}

.lv-cell-filter-btn.active-filter:hover {
    border-color: var(--rec-color, var(--primary-color));
    background: color-mix(in srgb, var(--rec-color, var(--primary-color)) 22%, var(--lv-cell-bg));
}

@keyframes lvFilterBtnIn {
    0%   { opacity: 0; transform: translateY(-50%) translateX(7px) scale(0.55); }
    60%  { opacity: 1; transform: translateY(-50%) translateX(0) scale(1.12); }
    100% { opacity: 1; transform: translateY(-50%) translateX(0) scale(1); }
}

@keyframes lvFilterPunch {
    0%   { transform: translateY(-50%) scale(0.8); }
    45%  { transform: translateY(-50%) scale(1.3); }
    100% { transform: translateY(-50%) scale(1); }
}

@keyframes lvFilterRing {
    0%   { opacity: 0.6; transform: scale(0.65); }
    100% { opacity: 0;   transform: scale(2.2); }
}

@media (prefers-reduced-motion: reduce) {
    .lv-cell-filter-btn,
    .lv-cell-filter-btn.is-punch,
    .lv-cell-filter-btn.is-punch::after,
    .lv-cell-filter-flash {
        animation: none !important;
    }
    .lv-cell-filter-btn:hover,
    .lv-cell-filter-btn:active {
        transform: translateY(-50%);
    }
}

/* Command bar filter bubbles */
.lv-cmd-filter-bubbles {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.lv-cmd-bubble {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px 2px 8px;
    --bubble-accent: var(--rec-color, var(--primary-color));
    background: color-mix(in srgb, var(--bubble-accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--bubble-accent) 22%, transparent);
    border-radius: 100px;
    font-size: 11px;
    font-weight: 500;
    color: var(--bubble-accent);
    white-space: nowrap;
    max-width: 200px;
}

/* Only the filter that was just added pops in; the others stay still. */
.lv-cmd-bubble.is-new {
    animation: lvPopIn 0.18s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes bubbleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.lv-cmd-bubble-field {
    font-weight: 600;
    opacity: 0.7;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.lv-cmd-bubble-val {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

.lv-cmd-bubble-x {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--bubble-accent, var(--primary-color));
    cursor: pointer;
    padding: 0;
    font-size: 13px;
    opacity: 0.6;
    transition: all 0.12s;
    flex-shrink: 0;
}

.lv-cmd-bubble-x:hover {
    opacity: 1;
    background: color-mix(in srgb, var(--bubble-accent, var(--primary-color)) 18%, transparent);
}

@keyframes lv-cell-flash {
    0%   { background: color-mix(in srgb, var(--rec-color, var(--primary-color)) 26%, transparent); }
    55%  { background: color-mix(in srgb, var(--rec-color, var(--primary-color)) 14%, transparent); }
    100% { background: transparent; }
}
.lv-cell-filter-flash {
    animation: lv-cell-flash 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.lv-spacer-hdr {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.lv-data-hdr {
    padding: 8px 10px;
    cursor: pointer;
    transition: background 0.12s ease;
}

.lv-data-hdr:hover {
    background: var(--bg-tertiary);
}

.lv-data-hdr.drag-source {
    opacity: 0.5;
}

.lv-hdr-inner {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
}

.lv-hdr-label {
    flex: 1;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lv-hdr-sort {
    color: var(--primary-color);
    flex-shrink: 0;
}

.lv-hdr-filter-dot {
    width: 5px;
    height: 5px;
    background: var(--primary-color);
    border-radius: 50%;
    flex-shrink: 0;
}

.lv-hdr-chevron {
    color: var(--text-muted);
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.12s ease;
    font-size: 14px;
}

.lv-data-hdr:hover .lv-hdr-chevron {
    opacity: 1;
}

/* Column Header Menu (sort / hide) — anchors to .lv-table th, which is
   position:relative. Without these rules the buttons render as native
   controls inline in the header and shove the column labels sideways. */
.lv-col-menu {
    position: absolute;
    top: calc(100% - 2px);
    left: 6px;
    min-width: 176px;
    padding: 4px;
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--text-primary, #0f172a) 16%, transparent);
    z-index: 100;
    cursor: default;
    animation: dropdownSlide 0.12s ease-out;
}

/* A right-aligned column, and the last two before the spacer header, sit at
   the table edge — open their menus inward or they fall off screen. */
.lv-data-hdr.lv-align-right .lv-col-menu,
.lv-data-hdr:nth-last-child(-n+3) .lv-col-menu {
    left: auto;
    right: 6px;
}

.lv-col-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    border-radius: 6px;
    background: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
    white-space: nowrap;
    color: var(--text-primary, #0f172a);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.lv-col-menu button:hover {
    background: var(--bg-secondary, #f8fafc);
    color: var(--primary-color, #0ea5e9);
}

.lv-col-menu button i {
    flex-shrink: 0;
    font-size: 14px;
    color: var(--text-muted, #94a3b8);
}

.lv-col-menu button:hover i {
    color: var(--primary-color, #0ea5e9);
}

/* Column Resizer */
.lv-resize {
    position: absolute;
    top: 0;
    right: -2px;
    width: 4px;
    height: 100%;
    cursor: col-resize;
    z-index: 11;
    background: transparent;
}

.lv-resize:hover {
    background: var(--primary-color);
}

/* Table Body */
.lv-table tbody tr {
    border-bottom: 1px solid var(--bg-tertiary);
    transition: background 0.1s ease;
}

/* A data row opens its record on click, so the pointer has to say so. This lived
   in the racunoid stylesheet only, which is why invoices felt clickable and every
   other list did not. Rows with nowhere to go keep the arrow. */
.lv-data-row { cursor: pointer; }
/* A table whose rows go nowhere (exchange rates, a picker list) sets an empty
   detail url, and one row in a table can lack one while its neighbours have it. */
.lv-data-row[data-href="#"],
.lv-data-row[data-href=""] { cursor: default; }

.lv-table tbody tr:hover {
    background: var(--bg-secondary);
}

.lv-table tbody tr.selected {
    background: var(--primary-light);
}

.lv-table tbody tr.selected:hover {
    background: var(--primary-light);
}

.lv-table td {
    padding: 8px 10px;
    font-size: 12px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lv-checkbox-cell {
    text-align: center;
}

/* Fill Rate Column */
.lv-fill-rate-hdr {
    width: 180px !important;
    min-width: 150px;
}

.lv-fill-rate-cell {
    text-align: center;
}

.lv-fill-rate-badge {
    display: block;
    width: 100%;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.02em;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.lv-fill-rate-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--fill-width, 0%);
    border-radius: 12px;
    z-index: 0;
    transition: width 0.3s ease;
}

.lv-fill-rate-badge span {
    position: relative;
    z-index: 1;
}

.lv-fill-rate-badge.fill-red {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.lv-fill-rate-badge.fill-red::before {
    background: rgba(239, 68, 68, 0.3);
}

.lv-fill-rate-badge.fill-blue {
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
}

.lv-fill-rate-badge.fill-blue::before {
    background: rgba(37, 99, 235, 0.3);
}

.lv-fill-rate-badge.fill-green {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}

.lv-fill-rate-badge.fill-green::before {
    background: rgba(34, 197, 94, 0.3);
}

[data-theme="carbon"] .lv-fill-rate-badge.fill-red {
    background: rgba(239, 68, 68, 0.18);
    color: #f87171;
}

[data-theme="carbon"] .lv-fill-rate-badge.fill-red::before {
    background: rgba(239, 68, 68, 0.35);
}

[data-theme="carbon"] .lv-fill-rate-badge.fill-blue {
    background: rgba(37, 99, 235, 0.18);
    color: #93c5fd;
}

[data-theme="carbon"] .lv-fill-rate-badge.fill-blue::before {
    background: rgba(37, 99, 235, 0.35);
}

[data-theme="carbon"] .lv-fill-rate-badge.fill-green {
    background: rgba(34, 197, 94, 0.18);
    color: #4ade80;
}

[data-theme="carbon"] .lv-fill-rate-badge.fill-green::before {
    background: rgba(34, 197, 94, 0.35);
}

/* Following column */
.lv-follow-hdr {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    text-align: center;
}
.lv-follow-hdr .lv-hdr-inner {
    justify-content: center;
    padding: 0;
    cursor: pointer;
}
.lv-follow-hdr .lv-hdr-chevron {
    display: none !important;
}
.lv-follow-hdr .lv-resize {
    display: none !important;
}

.lv-follow-filter-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 200;
    min-width: 170px;
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    padding: 8px 0;
}
.lv-follow-filter-dropdown.show {
    display: block;
}
.lv-follow-filter-title {
    padding: 4px 12px 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #94a3b8);
}
.lv-follow-filter-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 12px;
    color: var(--text-primary, #1e293b);
    cursor: pointer;
    transition: background 0.12s;
}
.lv-follow-filter-opt:hover {
    background: var(--bg-tertiary, #f1f5f9);
}
.lv-follow-filter-opt input[type="radio"] {
    accent-color: var(--primary-color, #6366f1);
}
[data-theme="carbon"] .lv-follow-filter-dropdown {
    background: var(--bg-secondary, #1e1b2e);
    border-color: var(--border-color, #3d3654);
}
.lv-follow-cell {
    text-align: center;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    padding: 0 !important;
}
.lv-follow-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--text-muted, #94a3b8);
    font-size: 16px;
    opacity: 0.35;
}
.lv-follow-indicator:hover {
    background: var(--bg-tertiary, #f1f5f9);
    color: var(--primary-color);
    opacity: 0.7;
}
.lv-follow-indicator.is-following {
    color: var(--primary-color);
    opacity: 1;
}

/* Follow button in detail panel */
.lv-follow-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 9px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    border: none;
    background: transparent;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.12s ease, color 0.12s ease, transform 0.12s cubic-bezier(0.23, 1, 0.32, 1);
}
.lv-follow-btn i {
    font-size: 14px;
}
.lv-follow-btn:hover {
    background: var(--bg-tertiary, #f1f5f9);
    color: var(--text-primary);
}
.lv-follow-btn:active {
    transform: scale(0.97);
}
.lv-follow-btn.is-following {
    background: color-mix(in srgb, var(--rec-color, var(--primary-color)) 12%, transparent);
    color: var(--rec-color, var(--primary-color));
    font-weight: 600;
}

/* Company status badges */
.lv-company-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px 2px 7px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.lv-company-status-badge .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.lv-company-status-badge.status-hot  { background: rgba(239,68,68,.12); color: #ef4444; }
.lv-company-status-badge.status-hot  .status-dot { background: #ef4444; box-shadow: 0 0 5px rgba(239,68,68,.6); }
.lv-company-status-badge.status-warm { background: rgba(251,146,60,.12); color: #f97316; }
.lv-company-status-badge.status-warm .status-dot { background: #f97316; box-shadow: 0 0 5px rgba(251,146,60,.6); }
.lv-company-status-badge.status-cold { background: rgba(99,179,237,.12); color: #63b3ed; }
.lv-company-status-badge.status-cold .status-dot { background: #63b3ed; box-shadow: 0 0 5px rgba(99,179,237,.6); }

/* Document states (Racunoid invoices and expenses). Hot/warm/cold above is the
   Company vocabulary on the same badge; these are the billing lifecycle. */
.lv-company-status-badge.status-draft,
.lv-company-status-badge.status-cancelled {
    background: color-mix(in srgb, var(--text-secondary, #64748b) 12%, transparent);
    color: var(--text-secondary, #64748b);
}
.lv-company-status-badge.status-draft .status-dot,
.lv-company-status-badge.status-cancelled .status-dot { background: var(--text-secondary, #64748b); }

.lv-company-status-badge.status-open,
.lv-company-status-badge.status-sent {
    background: color-mix(in srgb, var(--info-color, #0284c7) 12%, transparent);
    color: var(--info-color, #0284c7);
}
.lv-company-status-badge.status-open .status-dot,
.lv-company-status-badge.status-sent .status-dot { background: var(--info-color, #0284c7); }

.lv-company-status-badge.status-overdue,
.lv-company-status-badge.status-uncollectible {
    background: color-mix(in srgb, var(--danger-color, #dc2626) 12%, transparent);
    color: var(--danger-color, #dc2626);
}
.lv-company-status-badge.status-overdue .status-dot,
.lv-company-status-badge.status-uncollectible .status-dot { background: var(--danger-color, #dc2626); }

.lv-company-status-badge.status-paid {
    background: color-mix(in srgb, var(--success-color, #16a34a) 12%, transparent);
    color: var(--success-color, #16a34a);
}
.lv-company-status-badge.status-paid .status-dot { background: var(--success-color, #16a34a); }

/* Pipeline run states (the RSR Errors and runs lists). */
.lv-company-status-badge.status-error,
.lv-company-status-badge.status-stale {
    background: color-mix(in srgb, var(--danger-color, #dc2626) 12%, transparent);
    color: var(--danger-color, #dc2626);
}
.lv-company-status-badge.status-error .status-dot,
.lv-company-status-badge.status-stale .status-dot { background: var(--danger-color, #dc2626); }
.lv-company-status-badge.status-done {
    background: color-mix(in srgb, var(--success-color, #16a34a) 12%, transparent);
    color: color-mix(in srgb, var(--success-color, #16a34a) 62%, var(--text-primary, #0f172a));
}
.lv-company-status-badge.status-done .status-dot { background: var(--success-color, #16a34a); }
.lv-company-status-badge.status-running,
.lv-company-status-badge.status-triggered {
    background: color-mix(in srgb, var(--info-color, #0284c7) 12%, transparent);
    color: var(--info-color, #0284c7);
}
.lv-company-status-badge.status-running .status-dot,
.lv-company-status-badge.status-triggered .status-dot { background: var(--info-color, #0284c7); }

/* Goal periods against today. Nobody sets these: they are read off the dates, so
   they are a state, not a stage, and only "live" earns a colour. */
/* The label leans toward the text colour, the way .rec-pill already does it, so
   a green or a blue that reads on the dark theme still reads on white. The dot
   keeps the pure colour: it carries no text. */
.lv-company-status-badge.status-live {
    background: color-mix(in srgb, var(--success-color, #16a34a) 12%, transparent);
    color: color-mix(in srgb, var(--success-color, #16a34a) 62%, var(--text-primary, #0f172a));
}
.lv-company-status-badge.status-live .status-dot { background: var(--success-color, #16a34a); }

.lv-company-status-badge.status-upcoming {
    background: color-mix(in srgb, var(--info-color, #0284c7) 12%, transparent);
    color: color-mix(in srgb, var(--info-color, #0284c7) 62%, var(--text-primary, #0f172a));
}
.lv-company-status-badge.status-upcoming .status-dot { background: var(--info-color, #0284c7); }

.lv-company-status-badge.status-ended {
    background: color-mix(in srgb, var(--text-secondary, #64748b) 12%, transparent);
    color: var(--text-secondary, #64748b);
}
.lv-company-status-badge.status-ended .status-dot { background: var(--text-secondary, #64748b); }

/* Lists whose model has no follow support (see get_follow_status). */
body.lv-no-follow .lv-follow-hdr,
body.lv-no-follow .lv-follow-cell,
body.lv-no-follow #panel-follow-btn,
body.lv-no-follow #bulk-follow-btn,
body.lv-no-follow #bulk-unfollow-btn { display: none !important; }

/* Organization switcher (Racunoid). Lives here because both command bars that
   render it load this stylesheet. */
.rac-org-switch__trigger {
    font-weight: 600;
    color: var(--text-primary);
}

.rac-org-switch__name {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rac-org-menu {
    min-width: 260px;
    padding: 6px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-primary);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--text-primary) 14%, transparent);
}

.rac-org-option {
    display: block;
    padding: 8px 10px;
    border-radius: 6px;
    white-space: normal;
}

.rac-org-option:hover,
.rac-org-option:focus {
    background: var(--bg-tertiary);
}

.rac-org-option.is-current {
    background: color-mix(in srgb, var(--rec-color, var(--primary-color)) 12%, transparent);
}

.rac-org-option__name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.rac-org-option__meta {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-secondary);
}

.lv-checkbox {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.lv-cell-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.12s ease;
}

.lv-cell-link:hover {
    text-decoration: underline;
}

.lv-external-link {
    color: var(--primary-color);
    text-decoration: none;
}

.lv-external-link:hover {
    text-decoration: underline;
}

/* Group Rows */
.lv-group-row {
    background: var(--bg-tertiary) !important;
    cursor: pointer;
    font-weight: 600;
}

.lv-group-row:hover {
    background: var(--border-color) !important;
}

.lv-group-inner {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
}

.lv-group-chev {
    transition: transform 0.15s ease;
    color: var(--text-muted);
}

.lv-group-chev.open {
    transform: rotate(90deg);
}

.lv-group-count {
    margin-left: auto;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 11px;
}

/* Loading States */
.lv-loading-row {
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
}

.lv-search-spinner {
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    background: var(--bg-secondary, #f5f5f5);
    border-radius: 8px;
    margin: 10px;
}

.lv-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* End of Results */
.lv-end-results {
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 11px;
    border-top: 1px solid var(--border-color);
}

/* Status Bar */
.lv-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 12px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.lv-filtered-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    color: var(--accent-color, #6366f1);
    background: color-mix(in srgb, var(--accent-color, #6366f1) 12%, transparent);
    border-radius: 3px;
    padding: 1px 5px;
    vertical-align: middle;
    letter-spacing: 0.02em;
}

/* Column Dropdown */
.lv-dropdown {
    position: fixed;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    z-index: 1000;
    overflow: hidden;
}

.lv-dd-section {
    padding: 6px;
}

.lv-dd-label {
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.lv-dd-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-primary);
    transition: all 0.1s ease;
}

.lv-dd-item:hover:not(.disabled) {
    background: var(--bg-secondary);
}

.lv-dd-item.disabled {
    opacity: 0.5;
    cursor: default;
}

.lv-dd-item.active {
    background: var(--primary-light);
    color: var(--primary-color);
}

.lv-dd-item i {
    font-size: 14px;
    color: var(--text-muted);
}

.lv-dd-item.active i {
    color: var(--primary-color);
}

.lv-dd-check {
    margin-left: auto;
    color: var(--primary-color);
}

.lv-dd-divider {
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}

.lv-dd-filter-row {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 6px 6px;
}

.lv-dd-filter-op {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-secondary);
    font-size: 12px;
    color: var(--text-primary);
    outline: none;
    cursor: pointer;
}

.lv-dd-filter-op:focus {
    border-color: var(--primary-color);
}

.lv-dd-filter-input {
    width: 100%;
    padding: 6px 28px 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-secondary);
    font-size: 12px;
    color: var(--text-primary);
    outline: none;
}

.lv-dd-filter-input:focus {
    border-color: var(--primary-color);
}

.lv-dd-filter-x {
    position: absolute;
    right: 10px;
    display: flex;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: var(--text-muted);
    border-radius: 50%;
}

.lv-dd-filter-x:hover {
    background: var(--bg-tertiary);
}

/* Filter widget container */
.lv-filter-widget-container {
    flex: 1;
    position: relative;
    min-width: 0;
    display: flex;
    gap: 4px;
}

.lv-filter-widget-container select {
    width: 100%;
    cursor: pointer;
}

.lv-filter-value-wrapper {
    flex: 1;
    min-width: 80px;
    display: flex;
    gap: 4px;
    position: relative;
}

.lv-filter-value-wrapper select {
    width: 100%;
    cursor: pointer;
}

/* "is any of" checklist: search on top, the values below, several ticked. */
.lv-pick {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lv-pick-list {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    padding: 2px 0;
}

.lv-pick-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 9px;
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
}

.lv-pick-item:hover {
    background: var(--bg-secondary);
}

.lv-pick-item input {
    margin: 0;
    accent-color: var(--lv-accent, var(--primary-color));
}

/* FK autocomplete in filter context */
.lv-filter-fk-wrap {
    width: 100%;
    position: relative;
}

/* Lives on <body>, placed from JS: both dropdowns that host a filter widget
   clip their own contents, so a panel drawn inside one is cut off. */
.lv-filter-fk-results {
    position: fixed;
    max-height: 240px;
    overflow-y: auto;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 12px 32px color-mix(in srgb, var(--text-primary) 14%, transparent),
                0 2px 6px color-mix(in srgb, var(--text-primary) 8%, transparent);
    z-index: 2100;
}

.lv-filter-fk-results[hidden] {
    display: none;
}

.lv-filter-fk-item {
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
    color: var(--text-primary);
}

.lv-filter-fk-item:hover {
    background: var(--bg-hover);
}

/* Drag & Drop */
.lv-drag-ghost {
    position: fixed;
    padding: 6px 12px;
    background: var(--primary-color);
    color: white;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    pointer-events: none;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.lv-drop-line {
    position: fixed;
    width: 2px;
    background: var(--primary-color);
    pointer-events: none;
    z-index: 9998;
}

/* Empty State */
.lv-empty {
    padding: 60px 20px;
    text-align: center;
    color: var(--text-muted);
}

.lv-empty i {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.3;
}

.lv-empty h4 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
}

.lv-empty p {
    margin: 0;
    font-size: 13px;
}

/* Assigned filter banner (shown when arriving from bulk-assign notification) */
.lv-assigned-filter-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    margin-bottom: 8px;
    background: color-mix(in srgb, var(--primary-color, #4f46e5) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color, #4f46e5) 30%, transparent);
    border-radius: 7px;
    font-size: 13px;
    color: var(--text-primary);
}

.lv-assigned-filter-banner i {
    color: var(--primary-color, #4f46e5);
    font-size: 15px;
    flex-shrink: 0;
}

.lv-assigned-filter-banner span {
    flex: 1;
}

.lv-assigned-filter-clear {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--primary-color, #4f46e5);
    background: transparent;
    border: 1px solid var(--primary-color, #4f46e5);
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.lv-assigned-filter-clear:hover {
    background: var(--primary-color, #4f46e5);
    color: #fff;
}

/* No backdrop-filter here: blurring a full-viewport scrim forces the whole
   table underneath to re-rasterise every frame of the slide, which is what
   made opening a record crawl. A flat scrim composites on the GPU. */
.lv-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.22s;
    z-index: 1000;
}

.lv-sidebar-overlay.show {
    opacity: 1;
    visibility: visible;
}

.lv-detail-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 480px;
    max-width: 100%;
    height: 100%;
    background: var(--bg-primary);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.32s;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    will-change: transform;
    backface-visibility: hidden;
}

.lv-detail-sidebar.show {
    transform: translateX(0);
    visibility: visible;
}

/* The panel is the list's own furniture, so it wears the same record colour
   hairline as the command bar and the same ghost controls. */
.lv-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 11px 12px 10px 14px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    box-shadow: inset 0 3px 0 var(--rec-color, var(--primary-color));
    flex-shrink: 0;
}

.lv-detail-header h3 {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lv-detail-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lv-detail-header-btn {
    height: 28px;
    padding: 0 10px;
    border: none;
    border-radius: 6px;
    background: var(--rec-color, var(--primary-color));
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: filter 0.12s ease, transform 0.12s cubic-bezier(0.23, 1, 0.32, 1);
}

.lv-detail-header-btn:hover {
    filter: brightness(0.93);
}

.lv-detail-close {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border: none;
    background: transparent;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: background 0.15s, color 0.15s;
}

.lv-detail-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.lv-detail-close i {
    font-size: 1.25rem;
}

.lv-detail-content {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0;
}

.lv-detail-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 20px;
    color: var(--text-secondary);
}

.lv-detail-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--text-muted);
    text-align: center;
}

.lv-detail-error i {
    font-size: 32px;
    margin-bottom: 8px;
    opacity: 0.5;
}

/* Detail Sections - COMPACT */
.lv-detail-section {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    background: var(--panel-section-bg);
}

.lv-detail-section:last-child {
    border-bottom: none;
}

.lv-detail-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    color: var(--panel-label-color);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.lv-detail-section-title i {
    font-size: 12px;
    opacity: 0.7;
}

/* Actions Section - COMPACT */
/* Record actions read as one quiet strip under the title: 28px ghost buttons
   that only show a surface on hover, exactly like the list toolbar. */
.lv-detail-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.lv-detail-actions {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
}

.lv-detail-btn {
    height: 28px;
    padding: 0 9px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.12s ease, color 0.12s ease, transform 0.12s cubic-bezier(0.23, 1, 0.32, 1);
}

.lv-detail-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    text-decoration: none;
}

.lv-detail-btn:active:not(.disabled-tooltip) {
    transform: scale(0.97);
}

.lv-detail-btn.primary {
    background: color-mix(in srgb, var(--rec-color, var(--primary-color)) 12%, transparent);
    color: var(--rec-color, var(--primary-color));
    font-weight: 600;
}

.lv-detail-btn.primary:hover {
    background: color-mix(in srgb, var(--rec-color, var(--primary-color)) 18%, transparent);
    color: var(--rec-color, var(--primary-color));
}

/* Delete sits apart at the far end and only turns red under the cursor, so a
   destructive action is reachable without shouting from every record. */
.lv-detail-toolbar .lv-detail-btn.danger {
    margin-left: auto;
    color: var(--text-secondary);
}

.lv-detail-btn.danger:hover {
    background: color-mix(in srgb, var(--danger-color) 12%, transparent);
    color: var(--danger-color);
}

.lv-detail-btn i {
    font-size: 14px;
}

.lv-detail-btn.icon-only {
    width: 28px;
    padding: 0;
    justify-content: center;
}

.lv-detail-btn.disabled-tooltip {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Split button: the main part acts on the newest CV, the arrow lists every
   CV. Menu styled after the column header menu. */
.lv-split {
    position: relative;
    display: inline-flex;
}

.lv-split > .lv-split-main {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.lv-split > .lv-split-caret {
    padding: 0 5px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    box-shadow: inset 1px 0 0 0 var(--border-color);
}

/* Parked on <body> while open and placed by openPanelMenu(); .lv-detail-toolbar
   keeps a transform of its own after lvPanelSectionIn, so the sections below it
   would otherwise paint over this menu. Offsets come from JS, the width stays the
   menu's own (fitWidth: false) because the caret is far narrower. */
.lv-cv-menu {
    position: absolute;
    min-width: 230px;
    max-width: 300px;
    max-height: 280px;
    overflow-y: auto;
    padding: 4px;
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--text-primary, #0f172a) 16%, transparent);
    z-index: 2100;
    animation: dropdownSlide 0.12s ease-out;
}

.lv-cv-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    border-radius: 6px;
    background: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    color: var(--text-primary, #0f172a);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.lv-cv-menu button:hover,
.lv-cv-menu button:focus-visible {
    background: var(--bg-secondary, #f8fafc);
    color: var(--primary-color, #0ea5e9);
    outline: none;
}

.lv-cv-menu button i {
    flex-shrink: 0;
    font-size: 14px;
    color: var(--text-muted, #94a3b8);
}

.lv-cv-menu button span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lv-cv-menu button small {
    display: block;
    font-size: 10.5px;
    color: var(--text-muted, #94a3b8);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* CV Preview Modal */
.cv-preview-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}
.cv-preview-overlay.active { display: flex; }
.cv-preview-modal {
    background: var(--bg-primary);
    border-radius: 12px;
    width: 90vw;
    max-width: 900px;
    height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    overflow: hidden;
}
.cv-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}
.cv-preview-header h4 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.cv-preview-close {
    background: none; border: none; cursor: pointer;
    color: var(--text-secondary); font-size: 20px; padding: 4px;
    border-radius: 6px; display: flex; align-items: center; justify-content: center;
}
.cv-preview-close:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.cv-preview-body { flex: 1; overflow: hidden; }
.cv-preview-body iframe { width: 100%; height: 100%; border: none; }
.cv-preview-loading {
    display: flex; align-items: center; justify-content: center;
    height: 100%; color: var(--text-secondary); font-size: 13px; gap: 8px;
}

/* Fields Section - COMPACT Inline Editable */
.lv-detail-fields {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* A field is a row of the record read sideways, so it behaves like a table
   row: full bleed hairline, one quiet surface under the cursor. */
.lv-detail-field {
    display: flex;
    align-items: flex-start;
    padding: 5px 6px;
    margin: 0 -6px;
    border-radius: 6px;
    border-bottom: 1px solid var(--border-color);
    gap: 8px;
}

.lv-detail-field:last-child {
    border-bottom: none;
}

.lv-detail-field-label {
    flex: 0 0 104px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--panel-label-color);
    padding-top: 5px;
    text-transform: capitalize;
}

.lv-detail-field-value {
    flex: 1;
    min-width: 0;
}

/* Editable Input Styles - COMPACT */
.lv-editable-input {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    font-size: 12px;
    font-weight: 500;
    color: var(--panel-value-color);
    outline: none;
    transition: all 0.15s;
}

.lv-detail-field:hover .lv-editable-input {
    border-color: var(--panel-input-border);
}

.lv-editable-input:focus {
    background: var(--panel-input-bg);
    border-color: var(--rec-color, var(--primary-color));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--rec-color, var(--primary-color)) 16%, transparent);
}

.lv-editable-input::placeholder {
    color: var(--text-muted);
    font-style: italic;
    font-weight: 400;
}

.lv-editable-input.modified {
    border-color: var(--notice-color);
    background: color-mix(in srgb, var(--notice-color) 8%, transparent);
}

/* Textarea for longer fields - COMPACT */
.lv-editable-textarea {
    width: 100%;
    min-height: 60px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    font-size: 12px;
    font-weight: 500;
    color: var(--panel-value-color);
    font-family: inherit;
    resize: vertical;
    outline: none;
    transition: all 0.15s;
}

.lv-detail-field:hover .lv-editable-textarea {
    border-color: var(--panel-input-border);
}

.lv-editable-textarea:focus {
    background: var(--panel-input-bg);
    border-color: var(--rec-color, var(--primary-color));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--rec-color, var(--primary-color)) 16%, transparent);
}

/* Toggle Switch for boolean fields */
.lv-toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
}

.lv-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.lv-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-color);
    transition: .2s;
    border-radius: 22px;
}

.lv-toggle-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .2s;
    border-radius: 50%;
}

.lv-toggle-switch input:checked + .lv-toggle-slider {
    background-color: var(--rec-color, var(--primary-color));
}

.lv-toggle-switch input:checked + .lv-toggle-slider:before {
    transform: translateX(18px);
}

.lv-toggle-switch.modified .lv-toggle-slider {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

/* FK Select Dropdown */
.lv-fk-select-wrapper {
    position: relative;
    width: 100%;
}

.lv-fk-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    background: transparent;
    font-size: 12px;
    font-weight: 500;
    color: var(--panel-value-color);
    transition: all 0.15s;
}

.lv-fk-display:hover {
    background: var(--panel-input-bg);
    border-color: var(--panel-input-border);
}

.lv-fk-display.modified {
    border-color: var(--notice-color);
    background: rgba(59, 130, 246, 0.05);
}

.lv-fk-display i {
    font-size: 14px;
    color: var(--text-muted);
}

/* Parked on <body> while open and placed from the trigger's rect by
   openPanelMenu(), the same mechanism .mini-cal uses. It cannot live inside the
   field row: lvPanelFieldIn keeps a transform on every .lv-detail-field (fill
   mode "both"), so each row is its own stacking context and the rows below it
   paint over the menu, and .lv-detail-content scrolls, so it also clips it.
   Offsets and size come from JS; z-index matches .mini-cal so it clears the
   panel (.lv-detail-sidebar, 1001). */
.lv-fk-dropdown {
    position: absolute;
    min-width: 220px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 2100;
    max-height: 250px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.lv-fk-search {
    flex: 0 0 auto;
    padding: 8px 10px;
    border: none;
    border-bottom: 1px solid var(--border-color);
    font-size: 12px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    outline: none;
}

/* Takes whatever height the menu was given and scrolls inside it, so a long
   department list never runs past the viewport. */
.lv-fk-options {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.lv-fk-option {
    padding: 8px 10px;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.12s;
}

.lv-fk-option:hover {
    background: var(--bg-secondary);
}

.lv-fk-loading,
.lv-fk-no-results,
.lv-fk-error {
    padding: 12px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
}

.lv-fk-error {
    color: var(--danger-color);
}

/* Notification Toast */
.lv-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 10000;
    animation: slideIn 0.2s ease;
    font-size: 13px;
}

.lv-notification.success {
    border-color: var(--success-color);
}

.lv-notification.success i {
    color: var(--success-color);
}

.lv-notification.error {
    border-color: var(--danger-color);
}

.lv-notification.error i {
    color: var(--danger-color);
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Select dropdown for choice fields - COMPACT */
.lv-editable-select {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    font-size: 12px;
    font-weight: 500;
    color: var(--panel-value-color);
    cursor: pointer;
    outline: none;
    transition: all 0.15s;
}

.lv-detail-field:hover .lv-editable-select {
    border-color: var(--panel-input-border);
}

.lv-editable-select:focus {
    background: var(--panel-input-bg);
    border-color: var(--rec-color, var(--primary-color));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--rec-color, var(--primary-color)) 16%, transparent);
}

/* Read-only display - COMPACT */
.lv-field-readonly {
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--panel-value-color);
}

.lv-field-readonly.empty {
    color: var(--text-muted);
    font-style: italic;
    font-weight: 400;
}

/* =============================================================
THREADED COMMENTS SECTION - REDDIT STYLE
============================================================= */

.lv-comments-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 150px;
    background: var(--bg-primary);
}

/* Comment Input Form - COMPACT */
.lv-comment-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
    position: relative;
}

.lv-comment-input-wrapper {
    position: relative;
}

.lv-comment-input {
    width: 100%;
    min-height: 60px;
    padding: 10px;
    padding-bottom: 36px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 12px;
    resize: none;
    font-family: inherit;
    background: var(--comment-bg);
    color: var(--text-primary);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.lv-comment-input:focus {
    outline: none;
    border-color: var(--rec-color, var(--primary-color));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--rec-color, var(--primary-color)) 16%, transparent);
}

.lv-comment-input::placeholder {
    color: var(--text-muted);
}

.lv-comment-toolbar {
    position: absolute;
    bottom: 6px;
    left: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lv-comment-tools {
    display: flex;
    gap: 2px;
}

.lv-comment-tool-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all 0.15s;
    font-size: 13px;
}

.lv-comment-tool-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.lv-comment-submit {
    padding: 4px 10px;
    background: var(--rec-color, var(--primary-color));
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background 0.15s;
}

.lv-comment-submit:hover {
    filter: brightness(0.93);
}

.lv-comment-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Mention Suggestions Dropdown */
.lv-mention-suggestions {
    position: absolute;
    bottom: 100%;
    left: 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 180px;
    overflow-y: auto;
    z-index: 100;
    display: none;
    min-width: 200px;
}

.lv-mention-suggestions.show {
    display: block;
}

.lv-mention-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.12s;
}

.lv-mention-item:hover,
.lv-mention-item.active {
    background: var(--bg-secondary);
}

.lv-mention-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
}

.lv-mention-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.lv-mention-email {
    font-size: 11px;
    color: var(--text-muted);
}

/* Comments List */
.lv-comments-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.lv-no-comments {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.lv-no-comments i {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 10px;
    opacity: 0.4;
}

.lv-no-comments p {
    margin: 0;
    font-size: 12px;
}

/* Individual Comment - COMPACT */
.lv-comment {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    position: relative;
}

.lv-comment:last-child {
    border-bottom: none;
}

.lv-comment.pinned {
    background: linear-gradient(to right, rgba(96, 165, 250, 0.08), transparent);
    border-left: 2px solid var(--pinned-border);
    margin-left: -16px;
    padding-left: 14px;
    margin-right: -16px;
    padding-right: 16px;
}

.lv-comment.pinned::before {
    content: '';
    position: absolute;
    top: 6px;
    right: 12px;
}

.lv-pinned-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    color: #2563eb;
    font-weight: 600;
    text-transform: uppercase;
}

.lv-comment-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rec-color, var(--primary-color)), color-mix(in srgb, var(--rec-color, var(--primary-color)) 70%, #000));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
}

.lv-comment-body {
    flex: 1;
    min-width: 0;
}

.lv-comment-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
    flex-wrap: wrap;
}

.lv-comment-author {
    font-weight: 600;
    font-size: 12px;
    color: var(--text-primary);
}

.lv-comment-time {
    font-size: 10px;
    color: var(--text-muted);
}

.lv-comment-edited {
    font-size: 9px;
    color: var(--text-muted);
    font-style: italic;
}

.lv-comment-text {
    font-size: 12px;
    color: var(--text-primary);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Mention highlight in comment text */
.lv-comment-text .mention {
    color: var(--mention-color);
    font-weight: 500;
    background: var(--primary-light);
    padding: 0 3px;
    border-radius: 3px;
}

/* Comment Actions Bar - COMPACT */
.lv-comment-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.lv-comment-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: none;
    background: transparent;
    border-radius: 4px;
    font-size: 11px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.lv-comment-action-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.lv-comment-action-btn.active {
    color: var(--primary-color);
}

.lv-comment-action-btn i {
    font-size: 13px;
}

.lv-like-count {
    font-weight: 600;
}

/* Reactions Container */
.lv-comment-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.lv-reaction-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: var(--reaction-bg);
    border: 1px solid transparent;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.lv-reaction-chip:hover {
    background: var(--reaction-active-bg);
}

.lv-reaction-chip.active {
    background: var(--reaction-active-bg);
    border-color: var(--primary-color);
}

.lv-reaction-emoji {
    font-size: 14px;
}

.lv-reaction-count {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-primary);
}

/* Emoji Picker */
.lv-emoji-picker {
    position: absolute;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 8px;
    display: none;
    z-index: 100;
}

.lv-emoji-picker.show {
    display: block;
}

.lv-emoji-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
}

.lv-emoji-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.12s;
}

.lv-emoji-btn:hover {
    background: var(--bg-secondary);
}

/* Nested Replies */
.lv-comment-replies {
    margin-top: 12px;
    margin-left: 0;
    padding-left: 20px;
    border-left: 2px solid var(--border-color);
}

.lv-comment-reply {
    padding: 12px 0;
    display: flex;
    gap: 10px;
}

.lv-comment-reply:first-child {
    padding-top: 0;
}

.lv-comment-reply .lv-comment-avatar {
    width: 28px;
    height: 28px;
    font-size: 10px;
}

/* Reply Input */
.lv-reply-form {
    margin-top: 10px;
    display: none;
}

.lv-reply-form.show {
    display: block;
}

.lv-reply-input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 12px;
    font-family: inherit;
    background: var(--comment-reply-bg);
    color: var(--text-primary);
    resize: none;
    min-height: 60px;
}

.lv-reply-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.lv-reply-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.lv-reply-cancel,
.lv-reply-submit {
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
}

.lv-reply-cancel {
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
}

.lv-reply-cancel:hover {
    background: var(--bg-secondary);
}

.lv-reply-submit {
    border: none;
    background: var(--primary-color);
    color: white;
}

.lv-reply-submit:hover {
    background: var(--primary-hover);
}

/* Edit Comment Form */
.lv-edit-form {
    margin-top: 8px;
}

.lv-edit-input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    background: var(--bg-primary);
    color: var(--text-primary);
    resize: none;
    min-height: 60px;
}

.lv-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

/* Comment Menu */
.lv-comment-menu {
    position: absolute;
    top: 12px;
    right: 0;
}

.lv-comment-menu-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    opacity: 0;
    transition: all 0.15s;
}

.lv-comment:hover .lv-comment-menu-btn {
    opacity: 1;
}

.lv-comment-menu-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.lv-comment-menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    min-width: 140px;
    display: none;
    z-index: 100;
    overflow: hidden;
}

.lv-comment-menu-dropdown.show {
    display: block;
}

.lv-comment-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.12s;
}

.lv-comment-menu-item:hover {
    background: var(--bg-secondary);
}

.lv-comment-menu-item.danger {
    color: var(--danger-color);
}

.lv-comment-menu-item i {
    font-size: 14px;
    width: 16px;
}

/* Responsive */
@media (max-width: 768px) {
    .lv-cmd-bar {
        flex-direction: column;
        gap: 8px;
        padding: 8px;
    }

    .lv-cmd-left,
    .lv-cmd-right {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .lv-search-box input {
        width: 100%;
    }

    .lv-detail-sidebar {
        width: 100%;
    }

    /* Dropdowns slide up from bottom on mobile */
    .lv-dropdown-wrapper {
        position: static;
    }

    .lv-smart-dropdown {
        position: fixed !important;
        top: auto !important;
        left: 10px !important;
        right: 10px !important;
        bottom: 10px !important;
        width: auto !important;
        min-width: auto !important;
        max-height: 70vh !important;
        z-index: 10000 !important;
        box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.25);
    }
}

/* =============================================================
   CREATE RELATED MODAL
============================================================= */
.cr-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    z-index: 11000;
    justify-content: center;
    align-items: center;
    animation: crFadeIn .2s ease;
}
.cr-overlay.show { display: flex; }

@keyframes crFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes crSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.cr-modal {
    background: var(--bg-primary, #fff);
    border-radius: 16px;
    width: 540px;
    max-width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,.25);
    animation: crSlideUp .25s ease;
    border: 1px solid var(--border-color, #e2e8f0);
    overflow: hidden;
}

.cr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.cr-header-left { display: flex; align-items: center; gap: 10px; }
.cr-header h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--text-primary, #1e293b); }
.cr-back-btn {
    background: none; border: none; cursor: pointer;
    color: var(--text-secondary, #64748b); font-size: 18px;
    padding: 4px; border-radius: 6px; display: flex; align-items: center;
    transition: all .15s;
}
.cr-back-btn:hover { background: var(--hover-bg, #f1f5f9); color: var(--text-primary); }
.cr-close {
    background: none; border: none; cursor: pointer;
    color: var(--text-secondary, #64748b); font-size: 22px;
    padding: 4px; border-radius: 6px; display: flex; align-items: center;
    transition: all .15s;
}
.cr-close:hover { background: var(--hover-bg, #f1f5f9); color: var(--text-primary); }

.cr-body {
    padding: 20px 22px;
    overflow-y: auto;
    flex: 1;
}

/* Step 1: Model picker cards */
.cr-source-info {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; border-radius: 10px;
    background: var(--hover-bg, #f1f5f9);
    margin-bottom: 18px; font-size: 12px;
    color: var(--text-secondary, #64748b);
}
.cr-source-info i { font-size: 16px; }
.cr-source-count {
    font-weight: 600; color: var(--text-primary, #1e293b);
    background: var(--primary-color, #6366f1); color: #fff;
    padding: 1px 8px; border-radius: 10px; font-size: 11px;
}

.cr-model-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.cr-model-card {
    display: flex; align-items: center; gap: 12px;
    padding: 16px;
    border-radius: 12px;
    border: 1.5px solid var(--border-color, #e2e8f0);
    cursor: pointer;
    transition: all .2s;
    background: var(--bg-primary, #fff);
}
.cr-model-card:hover {
    border-color: var(--card-color, #6366f1);
    box-shadow: 0 2px 12px rgba(99,102,241,.12);
    transform: translateY(-1px);
}
.cr-model-card-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.cr-model-card-text { display: flex; flex-direction: column; gap: 2px; }
.cr-model-card-label { font-weight: 600; font-size: 13px; color: var(--text-primary); }
.cr-model-card-sub { font-size: 11px; color: var(--text-secondary); }

/* Step 2: Mode toggle (Create New / Link Existing) */
.cr-mode-tabs {
    display: flex; gap: 4px;
    padding: 3px;
    background: var(--hover-bg, #f1f5f9);
    border-radius: 10px;
    margin-bottom: 20px;
}
.cr-mode-tab {
    flex: 1;
    padding: 9px 14px;
    border: none; border-radius: 8px;
    font-size: 13px; font-weight: 500;
    cursor: pointer;
    background: transparent;
    color: var(--text-secondary, #64748b);
    transition: all .2s;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.cr-mode-tab.active {
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #1e293b);
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    font-weight: 600;
}
.cr-mode-tab i { font-size: 15px; }

/* Quick form */
.cr-form { display: flex; flex-direction: column; gap: 14px; }
.cr-field { display: flex; flex-direction: column; gap: 5px; }
.cr-field-label {
    font-size: 12px; font-weight: 500;
    color: var(--text-secondary, #64748b);
    display: flex; gap: 4px; align-items: center;
}
.cr-field-label .required { color: #ef4444; font-size: 10px; }
.cr-field input, .cr-field select, .cr-field textarea {
    padding: 9px 12px;
    border: 1.5px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    font-size: 13px;
    background: var(--panel-input-bg, #f8fafc);
    color: var(--text-primary, #1e293b);
    transition: border-color .2s, box-shadow .2s;
    outline: none;
    font-family: inherit;
}
.cr-field input:focus, .cr-field select:focus, .cr-field textarea:focus {
    border-color: var(--primary-color, #6366f1);
    box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}
.cr-field textarea { resize: vertical; min-height: 60px; }

/* Link Existing: search */
.cr-search-box {
    position: relative;
    margin-bottom: 14px;
}
.cr-search-box i {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--text-secondary); font-size: 16px; pointer-events: none;
}
.cr-search-box input {
    width: 100%; padding: 10px 12px 10px 36px;
    border: 1.5px solid var(--border-color, #e2e8f0);
    border-radius: 10px; font-size: 13px;
    background: var(--panel-input-bg, #f8fafc);
    color: var(--text-primary); outline: none;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}
.cr-search-box input:focus {
    border-color: var(--primary-color, #6366f1);
    box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}

.cr-search-results {
    max-height: 260px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 4px;
}
.cr-search-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
    border: 1.5px solid transparent;
}
.cr-search-item:hover { background: var(--hover-bg, #f1f5f9); }
.cr-search-item.selected {
    border-color: var(--primary-color, #6366f1);
    background: rgba(99,102,241,.06);
}
.cr-search-item-check {
    width: 18px; height: 18px;
    border: 2px solid var(--border-color, #cbd5e1);
    border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all .15s;
    font-size: 11px; color: #fff;
}
.cr-search-item.selected .cr-search-item-check {
    background: var(--primary-color, #6366f1);
    border-color: var(--primary-color, #6366f1);
}
.cr-search-item-info { flex: 1; min-width: 0; }
.cr-search-item-name { font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-search-item-sub { font-size: 11px; color: var(--text-secondary); margin-top: 1px; }
.cr-search-empty {
    text-align: center; padding: 30px 10px;
    color: var(--text-secondary); font-size: 13px;
}
.cr-search-empty i { font-size: 28px; display: block; margin-bottom: 8px; opacity: .5; }
.cr-search-loading { text-align: center; padding: 24px; color: var(--text-secondary); font-size: 13px; }

/* Footer / actions */
.cr-footer {
    display: flex; justify-content: flex-end; gap: 8px;
    padding-top: 18px;
    border-top: 1px solid var(--border-color, #e2e8f0);
    margin-top: 6px;
}
.cr-btn {
    padding: 9px 20px; border-radius: 8px;
    font-size: 13px; font-weight: 500;
    cursor: pointer; border: none;
    transition: all .15s; display: flex; align-items: center; gap: 6px;
}
.cr-btn-secondary {
    background: var(--hover-bg, #f1f5f9);
    color: var(--text-primary);
}
.cr-btn-secondary:hover { background: var(--border-color, #e2e8f0); }
.cr-btn-primary {
    background: var(--primary-color, #6366f1);
    color: #fff;
}
.cr-btn-primary:hover { opacity: .9; }
.cr-btn-primary:disabled {
    opacity: .4; cursor: not-allowed;
}
.cr-btn .bx-loader-alt { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Success state */
.cr-success {
    text-align: center; padding: 30px 10px;
}
.cr-success-icon {
    width: 52px; height: 52px; border-radius: 50%;
    background: #ecfdf5; color: #059669;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; margin: 0 auto 14px;
}
.cr-success h4 { font-size: 15px; font-weight: 600; margin: 0 0 6px; color: var(--text-primary); }
.cr-success p { font-size: 13px; color: var(--text-secondary); margin: 0; }

[data-theme="carbon"] .cr-success-icon { background: rgba(5,150,105,.15); }
[data-theme="carbon"] .cr-modal { background: var(--bg-primary); border-color: var(--border-color); }
[data-theme="carbon"] .cr-field input,
[data-theme="carbon"] .cr-field select,
[data-theme="carbon"] .cr-field textarea {
    background: var(--panel-input-bg);
    border-color: var(--panel-input-border);
    color: var(--panel-value-color);
}
[data-theme="carbon"] .cr-field select option {
    background: var(--panel-input-bg);
    color: var(--panel-value-color);
}
[data-theme="carbon"] .cr-search-box input {
    background: var(--panel-input-bg);
    border-color: var(--panel-input-border);
    color: var(--panel-value-color);
}
[data-theme="carbon"] .cr-fk-wrap .cr-fk-search {
    background: var(--panel-input-bg);
    border-color: var(--panel-input-border);
    color: var(--panel-value-color);
}
[data-theme="carbon"] .cr-fk-results {
    background: var(--panel-section-bg);
    border-color: var(--panel-input-border);
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
[data-theme="carbon"] .cr-mode-tab {
    color: var(--panel-label-color);
}
[data-theme="carbon"] .cr-mode-tab.active {
    background: var(--panel-input-bg);
    color: var(--panel-value-color);
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
[data-theme="carbon"] .cr-mode-tabs {
    background: var(--panel-section-bg);
}
[data-theme="carbon"] .cr-model-card {
    background: var(--panel-section-bg);
    border-color: var(--panel-input-border);
}
[data-theme="carbon"] .cr-model-card:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,.3);
}
[data-theme="carbon"] .cr-btn-secondary {
    background: var(--panel-input-bg);
    color: var(--panel-value-color);
}
[data-theme="carbon"] .cr-btn-secondary:hover {
    background: var(--panel-input-border);
}
[data-theme="carbon"] .cr-source-info {
    background: var(--panel-section-bg);
}
[data-theme="carbon"] .cr-search-item:hover {
    background: var(--panel-input-bg);
}
[data-theme="carbon"] .cr-search-item.selected {
    background: rgba(99,102,241,.15);
    border-color: var(--primary-color);
}
[data-theme="carbon"] .cr-search-item-check {
    border-color: var(--panel-input-border);
}
[data-theme="carbon"] .cr-footer {
    border-top-color: var(--panel-input-border);
}

.cr-fk-wrap { position: relative; }
.cr-fk-wrap .cr-fk-search {
    width: 100%; padding: 9px 12px;
    border: 1.5px solid var(--border-color, #e2e8f0);
    border-radius: 8px; font-size: 13px;
    background: var(--panel-input-bg, #f8fafc);
    color: var(--text-primary); outline: none;
    transition: border-color .2s; box-sizing: border-box;
}
.cr-fk-wrap .cr-fk-search:focus {
    border-color: var(--primary-color, #6366f1);
    box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}
.cr-fk-results {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px; margin-top: 4px;
    max-height: 180px; overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 10;
}
.cr-fk-results .cr-search-item { padding: 8px 12px; }
.cr-fk-results .cr-search-item:hover { background: var(--hover-bg, #f1f5f9); }

/* =============================================================
   DATA QUALITY SCAN OVERLAY
============================================================= */
.dq-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.dq-overlay.show {
    display: flex;
    opacity: 1;
}
.dq-modal {
    background: var(--bg-primary);
    border-radius: 14px;
    width: 92vw;
    max-width: 860px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--border-color);
    animation: dqSlideUp 0.25s ease;
    overflow: hidden;
}
@keyframes dqSlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.dq-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.dq-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.dq-header-left i {
    font-size: 20px;
    color: var(--primary-color);
}
.dq-header-left h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.dq-model-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--primary-light);
    color: var(--primary-color);
    text-transform: capitalize;
}
.dq-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.dq-scan-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: none;
    border-radius: 7px;
    background: var(--primary-color);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}
.dq-scan-btn:hover { opacity: 0.85; }
.dq-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 20px;
    cursor: pointer;
    transition: all 0.12s ease;
}
.dq-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.dq-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* Empty State */
.dq-error {
    padding: 12px;
    margin-bottom: 16px;
    border: 1px solid var(--danger-color);
    border-radius: 6px;
    color: var(--danger-color);
    background: color-mix(in srgb, var(--danger-color) 8%, transparent);
}

.dq-empty-state {
    text-align: center;
    padding: 50px 20px;
}
.dq-empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 16px;
    background: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
}
.dq-empty-icon i {
    font-size: 28px;
    color: var(--primary-color);
}
.dq-empty-state h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 6px;
}
.dq-empty-state p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 24px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}
.dq-start-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.dq-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}
.dq-action-btn.primary {
    background: var(--primary-color);
    color: #fff;
}
.dq-action-btn.primary:hover { opacity: 0.88; }
.dq-action-btn.secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.dq-action-btn.secondary:hover { background: var(--border-color); }

/* Loading State */
.dq-loading {
    text-align: center;
    padding: 60px 20px;
}
.dq-loading-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: dqSpin 0.7s linear infinite;
    margin: 0 auto 14px;
}
@keyframes dqSpin { to { transform: rotate(360deg); } }
.dq-loading p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 16px;
}
.dq-progress-bar {
    width: 220px;
    height: 4px;
    background: var(--border-color);
    border-radius: 4px;
    margin: 0 auto 8px;
    overflow: hidden;
}
.dq-progress-fill {
    height: 100%;
    background: var(--primary-color);
    border-radius: 4px;
    width: 0%;
    transition: width 0.3s ease;
}
.dq-progress-text {
    font-size: 11px;
    color: var(--text-muted, var(--text-secondary));
}

/* Summary Cards */
.dq-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.dq-stat-card {
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}
.dq-stat-card .dq-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 4px;
}
.dq-stat-card .dq-stat-label {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
}
.dq-stat-card.critical .dq-stat-value { color: #ef4444; }
.dq-stat-card.warning .dq-stat-value { color: #3b82f6; }
.dq-stat-card.info .dq-stat-value { color: #3b82f6; }

/* Flags Toolbar */
.dq-flags-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 10px;
}
.dq-flags-toolbar-left { display: flex; align-items: center; gap: 8px; }
.dq-flags-toolbar-label {
    font-size: 12px;
    color: var(--text-secondary);
}
.dq-flags-toolbar-label strong { color: var(--text-primary); }
.dq-flags-toolbar-right { display: flex; align-items: center; gap: 6px; }

/* Export Button Group */
.dq-export-group {
    display: flex;
    align-items: stretch;
    border-radius: 7px;
    overflow: visible;
    position: relative;
    border: 1px solid var(--border-color);
}
.dq-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: none;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.12s ease;
    border-radius: 6px 0 0 6px;
}
.dq-export-btn:hover { background: var(--bg-tertiary); }
.dq-export-btn i { font-size: 14px; }
.dq-export-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    border: none;
    border-left: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.12s ease;
    border-radius: 0 6px 6px 0;
}
.dq-export-dropdown-toggle:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.dq-export-group.open .dq-export-dropdown-toggle i { transform: rotate(180deg); }
.dq-export-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 190px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 50;
    padding: 4px;
}
.dq-export-group.open .dq-export-dropdown { display: block; }
.dq-export-dropdown button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.1s ease;
    text-align: left;
}
.dq-export-dropdown button:hover { background: var(--bg-tertiary); }
.dq-export-dropdown button i { font-size: 14px; color: var(--text-secondary); }

/* Combined Filter Panel */
.dq-combined-filter {
    margin-bottom: 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
    overflow: hidden;
}
.dq-cf-section {
    border-bottom: 1px solid var(--border-color);
}
.dq-cf-section:last-child { border-bottom: none; }
.dq-cf-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    cursor: pointer;
    user-select: none;
    transition: background 0.1s ease;
}
.dq-cf-section-header:hover { background: var(--bg-tertiary); }
.dq-cf-section-check {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1.5px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
    transition: all 0.12s ease;
    cursor: pointer;
}
.dq-cf-section-check:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
}
.dq-cf-section-check.checked {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: #fff;
}
.dq-cf-section-check.partial {
    border-color: var(--primary-color);
    background: var(--primary-light);
}
.dq-cf-section-check.partial::after {
    content: '';
    width: 8px;
    height: 2px;
    background: var(--primary-color);
    border-radius: 1px;
}
.dq-cf-sev-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.dq-cf-sev-dot.critical { background: #ef4444; }
.dq-cf-sev-dot.warning { background: #3b82f6; }
.dq-cf-sev-dot.info { background: #3b82f6; }
.dq-cf-sev-dot.special { background: #8b5cf6; }
.dq-cf-section-label {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: capitalize;
}
.dq-cf-section-count {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}
.dq-cf-section-chevron {
    font-size: 15px;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}
.dq-cf-section.collapsed .dq-cf-section-chevron { transform: rotate(-90deg); }
.dq-cf-section-body {
    padding: 4px 14px 10px 38px;
}
.dq-cf-section.collapsed .dq-cf-section-body { display: none; }
.dq-cf-flag-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.1s ease;
}
.dq-cf-flag-row.disabled {
    opacity: 0.35;
    cursor: default;
}
.dq-cf-flag-check {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1.5px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    flex-shrink: 0;
    transition: all 0.12s ease;
}
.dq-cf-flag-row:not(.disabled):not(.unchecked) .dq-cf-flag-check {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}
.dq-cf-flag-label {
    flex: 1;
    font-size: 11.5px;
    color: var(--text-primary);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dq-cf-flag-row.disabled .dq-cf-flag-label { color: var(--text-secondary); }
.dq-cf-flag-count {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    padding: 0 5px;
    border-radius: 8px;
    min-width: 18px;
    text-align: center;
    line-height: 16px;
    flex-shrink: 0;
}
.dq-cf-flag-notfound {
    font-size: 10px;
    color: var(--text-secondary);
    font-style: italic;
    flex-shrink: 0;
}

/* Results Items */
.dq-items-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dq-item-card {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
    overflow: hidden;
    transition: border-color 0.15s ease;
}
.dq-item-card:hover { border-color: var(--primary-color); }
.dq-item-card.severity-critical { border-left: 3px solid #ef4444; }
.dq-item-card.severity-warning { border-left: 3px solid #3b82f6; }
.dq-item-card.severity-info { border-left: 3px solid #3b82f6; }
.dq-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
}
.dq-item-header:hover { background: var(--bg-tertiary); }
.dq-item-title-area {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.dq-item-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.12s ease;
}
.dq-item-link i {
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.12s ease;
    flex-shrink: 0;
}
.dq-item-link:hover { color: var(--primary-hover, var(--primary-color)); text-decoration: underline; }
.dq-item-link:hover i { opacity: 1; }
.dq-item-id {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
}
.dq-item-badges {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.dq-item-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 5px;
}
.dq-item-badge.critical { background: rgba(239, 68, 68, 0.12); color: #ef4444; }
.dq-item-badge.warning { background: rgba(59, 130, 246, 0.12); color: #2563eb; }
.dq-item-badge.info { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }
.dq-item-chevron {
    font-size: 16px;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
    margin-left: 8px;
}
.dq-item-card.expanded .dq-item-chevron { transform: rotate(180deg); }
.dq-item-detail {
    display: none;
    padding: 0 14px 12px;
    border-top: 1px solid var(--border-color);
}
.dq-item-card.expanded .dq-item-detail { display: block; }
.dq-field-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}
.dq-field-row:last-child { border-bottom: none; }
.dq-field-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    min-width: 100px;
    flex-shrink: 0;
    padding-top: 2px;
}
.dq-field-content {
    flex: 1;
    min-width: 0;
}
.dq-field-value {
    font-size: 12px;
    color: var(--text-primary);
    padding: 4px 8px;
    background: var(--bg-primary);
    border-radius: 5px;
    border: 1px solid var(--border-color);
    word-break: break-all;
    margin-bottom: 6px;
    font-family: 'SF Mono', 'Fira Code', monospace;
}
.dq-flag-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dq-flag-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-primary);
    line-height: 1.4;
}
.dq-flag-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 10px;
}
.dq-flag-icon.critical { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.dq-flag-icon.warning { background: rgba(59, 130, 246, 0.15); color: #2563eb; }
.dq-flag-icon.info { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }

/* No results */
.dq-no-results {
    text-align: center;
    padding: 40px 20px;
}
.dq-no-results i {
    font-size: 36px;
    color: #22c55e;
    margin-bottom: 10px;
}
.dq-no-results h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px;
}
.dq-no-results p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}

/* Pre-scan info */
.dq-prescan-info {
    margin: 0 auto 20px;
    max-width: 360px;
}
.dq-prescan-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}
.dq-prescan-card .dq-prescan-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dq-prescan-card .dq-prescan-icon i {
    font-size: 17px;
    color: var(--primary-color);
}
.dq-prescan-card .dq-prescan-text {
    text-align: left;
}
.dq-prescan-card .dq-prescan-count {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}
.dq-prescan-card .dq-prescan-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* View Tabs (Flags vs Duplicates) */
.dq-view-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 14px;
    padding: 3px;
    background: var(--bg-secondary);
    border-radius: 9px;
    border: 1px solid var(--border-color);
}
.dq-view-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: none;
    border-radius: 7px;
    background: transparent;
    font-size: 12.5px;
    font-weight: 500;
    font-family: inherit;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.12s ease;
    flex: 1;
    justify-content: center;
}
.dq-view-tab:hover { color: var(--text-primary); background: var(--bg-tertiary); }
.dq-view-tab.active {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.dq-view-tab i { font-size: 14px; }

/* Record-level flag badges (missing CV, etc) */
.dq-record-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 14px;
    border-top: 1px solid var(--border-color);
}
.dq-record-flag-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}
.dq-record-flag-badge.missing_cv {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
}
.dq-record-flag-badge.duplicate {
    background: rgba(236, 72, 153, 0.12);
    color: #db2777;
}
.dq-record-flag-badge i { font-size: 13px; }

/* Duplicates View */
.dq-dup-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dq-dup-group {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
    overflow: hidden;
    transition: border-color 0.15s ease;
}
.dq-dup-group:hover { border-color: var(--primary-color); }
.dq-dup-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    gap: 10px;
}
.dq-dup-group-header:hover { background: var(--bg-tertiary); }
.dq-dup-group-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}
.dq-dup-match-pct {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 28px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.dq-dup-match-pct.high { background: rgba(239, 68, 68, 0.12); color: #ef4444; }
.dq-dup-match-pct.medium { background: rgba(59, 130, 246, 0.12); color: #2563eb; }
.dq-dup-group-info {
    min-width: 0;
}
.dq-dup-group-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dq-dup-group-meta {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 1px;
}
.dq-dup-group-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.dq-dup-field-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 600;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.dq-dup-chevron {
    font-size: 16px;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}
.dq-dup-group.expanded .dq-dup-chevron { transform: rotate(180deg); }
.dq-dup-group-detail {
    display: none;
    padding: 0 14px 12px;
    border-top: 1px solid var(--border-color);
}
.dq-dup-group.expanded .dq-dup-group-detail { display: block; }
.dq-dup-record-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}
.dq-dup-record-row:last-child { border-bottom: none; }
.dq-dup-record-id {
    font-size: 10px;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    flex-shrink: 0;
}
.dq-dup-record-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--primary-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.dq-dup-record-link:hover { text-decoration: underline; }
.dq-dup-record-link i { font-size: 11px; opacity: 0; transition: opacity 0.12s; }
.dq-dup-record-link:hover i { opacity: 1; }
.dq-dup-empty {
    text-align: center;
    padding: 40px 20px;
}
.dq-dup-empty i {
    font-size: 36px;
    color: #22c55e;
    margin-bottom: 10px;
}
.dq-dup-empty h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px;
}
.dq-dup-empty p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}

/* Load more */
.dq-load-more {
    text-align: center;
    padding: 12px;
}
.dq-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.12s ease;
}
.dq-load-more-btn:hover { border-color: var(--primary-color); color: var(--primary-color); }

/* Responsive */
@media (max-width: 640px) {
    .dq-summary { grid-template-columns: repeat(2, 1fr); }
    .dq-modal { width: 98vw; max-height: 92vh; border-radius: 10px; }
    .dq-field-row { flex-direction: column; gap: 4px; }
    .dq-field-name { min-width: auto; }
}

/* ===== Fill Rate Hover Popover ===== */
.fr-popover {
    position: fixed;
    z-index: 10000;
    width: 320px;
    max-height: 480px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08);
    padding: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.fr-popover.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.fr-popover-header {
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.fr-popover-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}
.fr-popover-rate {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.fr-popover-rate.fill-red { color: #ef4444; }
.fr-popover-rate.fill-blue { color: #1d4ed8; }
.fr-popover-rate.fill-green { color: #16a34a; }
[data-theme="carbon"] .fr-popover-rate.fill-red { color: #f87171; }
[data-theme="carbon"] .fr-popover-rate.fill-blue { color: #93c5fd; }
[data-theme="carbon"] .fr-popover-rate.fill-green { color: #4ade80; }

.fr-bar-section {
    padding: 12px 16px 14px;
    border-bottom: 1px solid var(--border-color);
}
.fr-bar-label-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}
.fr-bar-legend {
    display: flex;
    gap: 12px;
}
.fr-bar-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.fr-bar-legend-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.fr-bar-legend-dot.critical { background: #ef4444; }
.fr-bar-legend-dot.important { background: #3b82f6; }
.fr-bar-legend-dot.nice { background: #94a3b8; }
.fr-bar-stats {
    font-size: 11px;
    color: var(--text-muted);
}
.fr-segmented-bar {
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background: var(--bg-tertiary, rgba(0,0,0,0.06));
    overflow: hidden;
    display: flex;
}
.fr-segment {
    height: 100%;
    transition: width 0.3s ease;
}
.fr-segment.critical-filled { background: #ef4444; }
.fr-segment.important-filled { background: #3b82f6; }
.fr-segment.nice-filled { background: #94a3b8; }
.fr-segment.critical-empty { background: rgba(239,68,68,0.15); }
.fr-segment.important-empty { background: rgba(59, 130, 246,0.12); }
.fr-segment.nice-empty { background: rgba(148,163,184,0.12); }

.fr-fields-section {
    max-height: 260px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0;
    flex: 1 1 auto;
    overscroll-behavior: contain;
}
.fr-fields-section::-webkit-scrollbar { width: 4px; }
.fr-fields-section::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
}
.fr-field-row {
    display: flex;
    align-items: center;
    padding: 5px 16px;
    gap: 10px;
    font-size: 12px;
    transition: background 0.1s;
}
.fr-field-row:hover { background: var(--bg-tertiary); }
.fr-field-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
}
.fr-field-icon.filled {
    background: rgba(34,197,94,0.12);
    color: #16a34a;
}
.fr-field-icon.missing {
    background: rgba(239,68,68,0.12);
    color: #ef4444;
}
.fr-field-name {
    flex: 1;
    color: var(--text-primary);
    font-weight: 500;
}
.fr-field-row.missing .fr-field-name { color: var(--text-secondary); }
.fr-field-importance {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 4px;
}
.fr-field-importance.critical {
    background: rgba(239,68,68,0.1);
    color: #ef4444;
}
.fr-field-importance.important {
    background: rgba(59, 130, 246,0.1);
    color: #2563eb;
}
.fr-field-importance.nice_to_have {
    background: rgba(148,163,184,0.1);
    color: #64748b;
}
.fr-field-weight {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    min-width: 16px;
    text-align: right;
}
.fr-section-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 8px 16px 4px;
    margin-top: 2px;
}
.fr-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: var(--text-muted);
    font-size: 12px;
    gap: 8px;
}
.fr-loading-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: fr-spin 0.6s linear infinite;
}
@keyframes fr-spin { to { transform: rotate(360deg); } }

/* =============================================================
   DOPAMINE MICRO-INTERACTIONS & POLISH
   ============================================================= */

.lv-table-wrap { scroll-behavior: smooth; }

.lv-table tbody tr:hover { box-shadow: inset 3px 0 0 0 var(--primary-color); }

@keyframes selectPulse {
    0%   { box-shadow: inset 3px 0 0 0 var(--primary-color), 0 0 0 0 rgba(99,102,241,0.15); }
    50%  { box-shadow: inset 3px 0 0 0 var(--primary-color), 0 0 0 3px rgba(99,102,241,0.08); }
    100% { box-shadow: inset 3px 0 0 0 var(--primary-color), 0 0 0 0 rgba(99,102,241,0); }
}
.lv-table tbody tr.selected { animation: selectPulse 0.4s ease-out; box-shadow: inset 3px 0 0 0 var(--primary-color); }

.lv-search-box input { transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
.lv-search-box input:focus { width: 260px; border-color: var(--primary-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 12%, transparent); }

.lv-cmd-btn { transition: background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease, transform 0.1s ease; }
.lv-cmd-btn:active:not(:disabled) { transform: scale(0.97); }
.lv-cmd-btn.accent:hover:not(:disabled) { box-shadow: 0 1px 4px color-mix(in srgb, var(--primary-color) 20%, transparent); }

@keyframes badgePop { 0% { transform: scale(0); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.lv-filter-count { animation: badgePop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: center; }

.lv-checkbox { transition: transform 0.12s ease; }
.lv-checkbox:checked { transform: scale(1.1); }
.lv-checkbox:active { transform: scale(0.9); }

@keyframes sortSlideIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.lv-hdr-sort { animation: sortSlideIn 0.2s ease-out; }

/* Dropdowns grow out of the button that opened them: short, fast to settle,
   never from zero, so opening one twenty times a day never feels slow. */
@keyframes lvPopIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
.lv-smart-dropdown.show,
.lv-smart-dropdown.columns-dropdown.show { animation: lvPopIn 0.16s cubic-bezier(0.23, 1, 0.32, 1); }

@keyframes lvCountBump { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
.lv-col-tab-count.is-bumped,
.lv-filter-count.is-bumped { animation: lvCountBump 0.28s cubic-bezier(0.23, 1, 0.32, 1); }

/* A column switched on in the picker lights up where it landed, then fades. */
@keyframes lvColArrive {
    from { box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--rec-color, var(--primary-color)) 16%, transparent); }
    to   { box-shadow: inset 0 0 0 100vmax transparent; }
}
.lv-col-arrived { animation: lvColArrive 0.7s cubic-bezier(0.23, 1, 0.32, 1); }

.lv-sd-item { transition: background-color 0.1s ease; }

@keyframes chipOut { to { opacity: 0; transform: scale(0.85); max-width: 0; padding: 0; margin: 0; } }
.lv-cmd-bubble.removing { animation: chipOut 0.2s ease-in forwards; overflow: hidden; }

.lv-fill-rate-badge::before { transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); }

.lv-title { transition: color 0.3s ease; }
.lv-title:hover { color: var(--primary-color); }

.lv-cell-link { position: relative; text-decoration: none !important; }
.lv-cell-link::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 0; height: 1px; background: var(--primary-color); transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.lv-cell-link:hover::after { width: 100%; }
.lv-cell-link:hover { text-decoration: none !important; }

.lv-resize:hover { box-shadow: 0 0 6px color-mix(in srgb, var(--primary-color) 40%, transparent); }

.lv-table-wrap::-webkit-scrollbar { width: 6px; height: 6px; }
.lv-table-wrap::-webkit-scrollbar-track { background: transparent; }
.lv-table-wrap::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-muted) 30%, transparent); border-radius: 10px; }
.lv-table-wrap::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text-muted) 55%, transparent); }

.lv-badge { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.lv-badge:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.06); }


.lv-spinner { animation: spin 0.7s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

.lv-hdr-label { transition: color 0.15s ease; }
.lv-data-hdr:hover .lv-hdr-label { color: var(--text-primary); }

.modal.fade .modal-dialog { transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease; }

@keyframes bannerSlide { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: translateY(0); } }
.lv-select-all-banner { animation: bannerSlide 0.2s ease-out; }

/* ── Sort/filter shuffle — rows flip in from alternating sides ── */
/* Filtering and sorting happen dozens of times a day, so rows only settle in
   with a short fade instead of flying in from alternating sides. */
@keyframes lvRowSettle {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: translateY(0); }
}
.lv-table tbody.shuffled tr { animation: lvRowSettle 0.16s cubic-bezier(0.23, 1, 0.32, 1) both; }
.lv-table tbody.shuffled tr:nth-child(1)  { animation-delay: 0.015s; }
.lv-table tbody.shuffled tr:nth-child(2)  { animation-delay: 0.03s; }
.lv-table tbody.shuffled tr:nth-child(3)  { animation-delay: 0.045s; }
.lv-table tbody.shuffled tr:nth-child(4)  { animation-delay: 0.06s; }
.lv-table tbody.shuffled tr:nth-child(5)  { animation-delay: 0.075s; }
.lv-table tbody.shuffled tr:nth-child(6)  { animation-delay: 0.09s; }
.lv-table tbody.shuffled tr:nth-child(7)  { animation-delay: 0.105s; }
.lv-table tbody.shuffled tr:nth-child(8)  { animation-delay: 0.12s; }
.lv-table tbody.shuffled tr:nth-child(9)  { animation-delay: 0.135s; }
.lv-table tbody.shuffled tr:nth-child(10) { animation-delay: 0.15s; }
.lv-table tbody.shuffled tr:nth-child(11) { animation-delay: 0.165s; }
.lv-table tbody.shuffled tr:nth-child(12) { animation-delay: 0.18s; }
.lv-table tbody.shuffled tr:nth-child(13) { animation-delay: 0.195s; }
.lv-table tbody.shuffled tr:nth-child(14) { animation-delay: 0.21s; }
.lv-table tbody.shuffled tr:nth-child(15) { animation-delay: 0.225s; }

/* ── Search results — rows scale in from center ── */
.lv-table tbody.search-reveal tr { animation: lvRowSettle 0.16s cubic-bezier(0.23, 1, 0.32, 1) both; }
.lv-table tbody.search-reveal tr:nth-child(1)  { animation-delay: 0.02s; }
.lv-table tbody.search-reveal tr:nth-child(2)  { animation-delay: 0.04s; }
.lv-table tbody.search-reveal tr:nth-child(3)  { animation-delay: 0.06s; }
.lv-table tbody.search-reveal tr:nth-child(4)  { animation-delay: 0.08s; }
.lv-table tbody.search-reveal tr:nth-child(5)  { animation-delay: 0.10s; }
.lv-table tbody.search-reveal tr:nth-child(6)  { animation-delay: 0.12s; }
.lv-table tbody.search-reveal tr:nth-child(7)  { animation-delay: 0.14s; }
.lv-table tbody.search-reveal tr:nth-child(8)  { animation-delay: 0.16s; }
.lv-table tbody.search-reveal tr:nth-child(9)  { animation-delay: 0.18s; }
.lv-table tbody.search-reveal tr:nth-child(10) { animation-delay: 0.20s; }

/* ── Group collapse/expand — smooth height ── */
@keyframes groupExpand {
    from { opacity: 0; max-height: 0; overflow: hidden; }
    to   { opacity: 1; max-height: 500px; }
}
.lv-group-row ~ tr:not(.lv-group-row) {
    animation: groupExpand 0.2s ease-out;
}

/* ── "All records loaded" — gentle fade ── */
@keyframes endFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 0.6; transform: translateY(0); }
}
.lv-end-results {
    animation: endFadeIn 0.3s ease-out;
}

/* ── Loading more — slide in indicator ── */
@keyframes loadMoreIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.lv-loading-row {
    animation: loadMoreIn 0.2s ease-out;
}

/* ── Active filter chips bar — items cascade in ── */
.lv-filters-bar .lv-cmd-bubble:nth-child(1) { animation-delay: 0.02s; }
.lv-filters-bar .lv-cmd-bubble:nth-child(2) { animation-delay: 0.06s; }
.lv-filters-bar .lv-cmd-bubble:nth-child(3) { animation-delay: 0.10s; }
.lv-filters-bar .lv-cmd-bubble:nth-child(4) { animation-delay: 0.14s; }
.lv-filters-bar .lv-cmd-bubble:nth-child(5) { animation-delay: 0.18s; }

/* ── Column header active sort — persistent glow ── */
.lv-data-hdr[data-sorted] {
    background: color-mix(in srgb, var(--primary-color) 6%, transparent);
    box-shadow: inset 0 -2px 0 0 var(--primary-color);
}

/* ── Data quality button — pulse when there are issues ── */
@keyframes subtlePulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.7; }
}

/* ── Smooth record count number change ── */
.lv-count {
    display: inline-block;
    transition: transform 0.15s ease;
}
.lv-count.updating {
    animation: countBump 0.3s ease-out;
}
@keyframes countBump {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.15); color: var(--primary-color); }
    100% { transform: scale(1); }
}

/* Show and the sort/grouping badges moved onto the command bar when the strip
   above the table was removed. They take the toolbar's 34px pill height so the
   row stays one straight line. */
.lv-status-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lv-cmd-bar .lv-badge {
    height: 28px;
    border-radius: 6px;
}

/* ── Record preview panel — arrival motion ──────────────────── */
/* The panel slides on a composited transform; everything inside it arrives on
   a short cascade so the eye lands on the title, then the fields, instead of
   the whole slab appearing at once. */
@keyframes lvPanelSectionIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes lvPanelFieldIn {
    from { opacity: 0; transform: translateX(10px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes lvPanelTitleIn {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
}

.lv-detail-sidebar.show .lv-detail-header h3 {
    animation: lvPanelTitleIn 0.28s cubic-bezier(0.23, 1, 0.32, 1) both;
}

.lv-detail-content .lv-detail-toolbar,
.lv-detail-content .lv-detail-section {
    animation: lvPanelSectionIn 0.3s cubic-bezier(0.23, 1, 0.32, 1) both;
}
.lv-detail-content > :nth-child(1) { animation-delay: 0.02s; }
.lv-detail-content > :nth-child(2) { animation-delay: 0.07s; }
.lv-detail-content > :nth-child(3) { animation-delay: 0.12s; }
.lv-detail-content > :nth-child(4) { animation-delay: 0.17s; }

.lv-detail-content .lv-detail-field {
    animation: lvPanelFieldIn 0.26s cubic-bezier(0.23, 1, 0.32, 1) both;
    animation-delay: 0.22s;
    border-radius: 6px;
    transition: background-color 0.14s ease, box-shadow 0.14s ease;
}
.lv-detail-content .lv-detail-field:nth-child(1)  { animation-delay: 0.10s; }
.lv-detail-content .lv-detail-field:nth-child(2)  { animation-delay: 0.12s; }
.lv-detail-content .lv-detail-field:nth-child(3)  { animation-delay: 0.14s; }
.lv-detail-content .lv-detail-field:nth-child(4)  { animation-delay: 0.16s; }
.lv-detail-content .lv-detail-field:nth-child(5)  { animation-delay: 0.175s; }
.lv-detail-content .lv-detail-field:nth-child(6)  { animation-delay: 0.19s; }
.lv-detail-content .lv-detail-field:nth-child(7)  { animation-delay: 0.20s; }
.lv-detail-content .lv-detail-field:nth-child(8)  { animation-delay: 0.21s; }
.lv-detail-content .lv-detail-field:nth-child(9)  { animation-delay: 0.22s; }
.lv-detail-content .lv-detail-field:nth-child(10) { animation-delay: 0.23s; }

/* Hover is a neutral surface, like a list row. Colour is reserved for the row
   you are actually editing, and it is the record colour, never a stray blue. */
.lv-detail-content .lv-detail-field:hover {
    background: var(--panel-hover-bg);
}
.lv-detail-content .lv-detail-field:focus-within {
    background: var(--panel-hover-bg);
    box-shadow: inset 2px 0 0 0 var(--rec-color, var(--primary-color));
}
.lv-detail-content .lv-detail-field:focus-within .lv-detail-field-label {
    color: var(--text-primary);
}
.lv-detail-field-label { transition: color 0.14s ease; }

.lv-detail-header-btn:active { transform: scale(0.96); }

.lv-detail-close i { transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1); }
.lv-detail-close:hover i { transform: rotate(90deg); }

/* Loading is a shape-of-the-answer skeleton, not a spinner, so the fields do
   not jump into place when the fetch lands. */
.lv-detail-skeleton {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.lv-sk-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.lv-sk-bar {
    height: 10px;
    border-radius: 999px;
    background-image: linear-gradient(
        90deg,
        color-mix(in srgb, var(--text-muted, #94a3b8) 13%, transparent) 0%,
        color-mix(in srgb, var(--text-muted, #94a3b8) 28%, transparent) 50%,
        color-mix(in srgb, var(--text-muted, #94a3b8) 13%, transparent) 100%
    );
    background-size: 300% 100%;
    animation: lvSkShimmer 1.3s ease-in-out infinite;
}
.lv-sk-bar.label { flex: 0 0 84px; }
.lv-sk-bar.value { flex: 1; height: 12px; }
.lv-sk-row:nth-child(2) .lv-sk-bar.value { max-width: 72%; }
.lv-sk-row:nth-child(3) .lv-sk-bar.value { max-width: 88%; }
.lv-sk-row:nth-child(4) .lv-sk-bar.value { max-width: 60%; }
.lv-sk-row:nth-child(5) .lv-sk-bar.value { max-width: 80%; }
.lv-sk-row:nth-child(6) .lv-sk-bar.value { max-width: 66%; }
.lv-sk-row:nth-child(7) .lv-sk-bar.value { max-width: 90%; }
.lv-sk-row:nth-child(2) .lv-sk-bar { animation-delay: 0.06s; }
.lv-sk-row:nth-child(3) .lv-sk-bar { animation-delay: 0.12s; }
.lv-sk-row:nth-child(4) .lv-sk-bar { animation-delay: 0.18s; }
.lv-sk-row:nth-child(5) .lv-sk-bar { animation-delay: 0.24s; }
.lv-sk-row:nth-child(6) .lv-sk-bar { animation-delay: 0.30s; }
.lv-sk-row:nth-child(7) .lv-sk-bar { animation-delay: 0.36s; }
@keyframes lvSkShimmer {
    from { background-position: 150% 0; }
    to   { background-position: -50% 0; }
}

/* Motion is feedback, never meaning: with reduced motion every list control
   still changes state and colour, only the movement is dropped. */
@media (prefers-reduced-motion: reduce) {
    [class*="lv-"]:not(.lv-spinner),
    [class*="lv-"] *:not(.lv-spinner),
    [class*="lv-"] *::before,
    [class*="lv-"] *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Sidebar tabs (ListConfig.detail_tabs). Same quiet strip as the toolbar: the record
   colour only marks the active tab. */
.lv-detail-tabs {
    display: flex;
    gap: 2px;
    padding: 0 10px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    overflow-x: auto;
    position: sticky;
    top: 0;
    z-index: 2;
}

.lv-detail-tab {
    height: 34px;
    padding: 0 10px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    white-space: nowrap;
}

.lv-detail-tab:hover { color: var(--text-primary); }

.lv-detail-tab.active {
    color: var(--rec-color, var(--primary-color));
    border-bottom-color: var(--rec-color, var(--primary-color));
}

.lv-detail-tab-panel[hidden] { display: none; }

/* Sidebar field search (ListConfig.sidebar_features "field_search"). */
.lv-detail-field-search-wrap { padding: 8px 14px; }
.lv-detail-field-search input { width: 100%; }
.lv-detail-search-empty { color: var(--text-muted); font-size: 12px; padding: 8px 0 0; }
.lv-detail-field[hidden], .lv-detail-section[hidden] { display: none; }

/* Sidebar fullscreen (ListConfig.sidebar_features "fullscreen"). */
.lv-detail-sidebar.fullscreen {
    width: calc(100vw - var(--sidebar-width, 260px));
    max-width: calc(100vw - var(--sidebar-width, 260px));
}

.lv-detail-sidebar.fullscreen .lv-detail-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
}

@media (max-width: 640px) {
    .lv-detail-sidebar.fullscreen { width: 100vw; max-width: 100vw; }
    .lv-detail-sidebar.fullscreen .lv-detail-fields { grid-template-columns: 1fr; }
}

/* Boolean cells as pills (ListConfig.cell_renderers boolean: "pill"). */
.lv-bool-pill {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.lv-bool-pill.is-yes {
    color: var(--success-color);
    background: color-mix(in srgb, var(--success-color) 12%, transparent);
}
.lv-bool-pill.is-no {
    color: var(--text-muted);
    background: var(--bg-tertiary);
}

/* Shared record lists use a compact, task-first surface on phones. */
.lv-mobile-controls,
.lv-mobile-list { display: none; }
.lv-mobile-primary,
.lv-mobile-tools { display: none; }

@media (max-width: 768px) {
    .main-content:has(> .container-fluid > .list-view-container) {
        height: 100dvh;
        min-height: 0;
    }

    .list-view-container {
        --lv-gutter: 0px;
        margin: 0;
        border-left: 0;
        border-bottom: 0;
        border-radius: 0;
        box-shadow: none;
        min-width: 0;
    }

    .list-view-container > .lv-cmd-bar:first-child,
    .list-view-container > .lv-status-bar:last-child { border-radius: 0; }

    .list-view-container .lv-cmd-bar {
        align-items: stretch;
        gap: 0;
        padding: 0;
    }
    .list-view-container .lv-cmd-left,
    .list-view-container .lv-cmd-right { display: none; }

    .lv-mobile-primary { display: grid; gap: 8px; padding: 10px 12px; }
    .lv-mobile-primary > .lv-search-box { width: 100%; }
    .lv-mobile-primary > .lv-search-box input,
    .lv-mobile-primary > .lv-search-box input:focus {
        width: 100%;
        height: 42px;
        font-size: 14px;
    }
    .lv-mobile-primary-actions { display: flex; gap: 8px; }
    .lv-mobile-primary-actions > .lv-cmd-btn,
    .lv-mobile-primary-actions > .lv-dropdown-wrapper { flex: 1 1 0; min-width: 0; }
    .list-view-container .lv-mobile-primary-actions .lv-cmd-btn {
        display: flex;
        justify-content: center;
        width: 100%;
        min-height: 40px;
        font-size: 13px;
        background: var(--bg-primary);
        border: 1px solid var(--border-color);
    }
    .list-view-container .lv-mobile-primary-actions .lv-cmd-btn.accent {
        background: color-mix(in srgb, var(--rec-color) 12%, var(--bg-primary));
    }

    .lv-mobile-tools {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        max-height: 42vh;
        overflow-y: auto;
        padding: 10px 12px 12px;
        border-top: 1px solid var(--border-color);
        background: var(--bg-primary);
    }
    .lv-mobile-tools[hidden] { display: none; }
    .lv-mobile-tools > * { min-width: 0; }
    .list-view-container .lv-mobile-tools .lv-cmd-btn {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        min-height: 40px;
        padding: 0 12px;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        color: var(--text-primary);
        font-size: 12px;
    }
    .lv-mobile-tools > .lv-semantic-search,
    .lv-mobile-tools > .sem-job-progress,
    .lv-mobile-tools > .lv-badge { grid-column: 1 / -1; }
    .lv-mobile-tools .lv-semantic-search,
    .lv-mobile-tools .lv-semantic-search .lv-search-box,
    .lv-mobile-tools .lv-semantic-search input { width: 100%; }
    .lv-mobile-tools .lv-semantic-search input { height: 40px; font-size: 13px; }
    .lv-mobile-tools #more-dropdown-btn::after { content: 'More'; }

    .lv-mobile-controls {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 6px;
        padding: 7px 12px;
        background: var(--bg-primary);
        border-bottom: 1px solid var(--border-color);
    }

    .lv-mobile-view-switch { display: inline-flex; flex: 0 0 auto; gap: 2px; padding: 2px; background: var(--bg-secondary); border-radius: 9px; }
    .lv-mobile-view-btn,
    .lv-mobile-icon-btn,
    .lv-mobile-select-all {
        min-height: 36px;
        border: 1px solid transparent;
        border-radius: 7px;
        background: transparent;
        color: var(--text-secondary);
        font: inherit;
        font-weight: 600;
        padding: 0 6px;
        cursor: pointer;
    }
    .lv-mobile-view-btn.is-active { background: var(--bg-primary); border-color: var(--border-color); color: var(--text-primary); }
    .lv-mobile-view-btn { font-size: 11px; }
    .lv-mobile-view-btn i { font-size: 14px; vertical-align: -2px; }
    #lv-mobile-sort,
    #lv-mobile-follow-filter {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 36px;
        border: 1px solid var(--border-color);
        border-radius: 7px;
        background: var(--bg-primary);
        color: var(--text-primary);
        font: inherit;
        padding: 0 6px;
    }
    .lv-mobile-tools #lv-mobile-follow-filter { grid-column: 1 / -1; width: 100%; min-height: 40px; }
    body.lv-no-follow #lv-mobile-follow-filter,
    body.lv-no-follow .lv-mobile-follow { display: none; }
    .lv-mobile-icon-btn { flex: 0 0 36px; border-color: var(--border-color); }
    .lv-mobile-icon-btn:disabled { opacity: .45; }
    .lv-mobile-tools .lv-mobile-select-all { grid-column: 1 / -1; min-height: 40px; padding: 0 12px; border-color: var(--border-color); background: var(--bg-secondary); text-align: left; color: var(--rec-color); }

    .list-view-container #lv-data-table { display: none; }
    .list-view-container.lv-mobile-table-mode #lv-data-table { display: table; }
    .list-view-container.lv-mobile-table-mode .lv-mobile-list { display: none; }
    .lv-mobile-list { display: grid; gap: 8px; align-content: start; padding: 10px 10px 20px; }
    .lv-mobile-record {
        min-width: 0;
        padding: 12px;
        border: 1px solid var(--border-color);
        border-left: 3px solid var(--rec-color);
        border-radius: 10px;
        background: var(--bg-primary);
    }
    .lv-mobile-record.selected { background: color-mix(in srgb, var(--rec-color) 7%, var(--bg-primary)); }
    .lv-mobile-record-head { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
    .lv-mobile-record-head > .lv-checkbox { margin-top: 5px; flex: 0 0 auto; }
    .lv-mobile-record-main { flex: 1; min-width: 0; }
    .lv-mobile-title {
        display: block;
        width: 100%;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--text-primary);
        font: inherit;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.35;
        text-align: left;
        text-decoration: none;
        overflow-wrap: anywhere;
    }
    .lv-mobile-title:hover { color: var(--rec-color); }
    .lv-mobile-record-id { display: block; margin-top: 2px; color: var(--text-muted); font-size: 11px; }
    .lv-mobile-follow { flex: 0 0 36px; width: 36px; height: 36px; opacity: 1; border: 0; background: var(--bg-secondary); }
    .lv-mobile-record-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin: 12px 0 10px 26px; }
    .lv-mobile-record-field { min-width: 0; }
    .lv-mobile-record-field span { display: block; margin-bottom: 2px; color: var(--text-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
    .lv-mobile-record-field strong { display: block; color: var(--text-primary); font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
    .lv-mobile-record-open { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 32px; padding: 4px 0 0 26px; border: 0; border-top: 1px solid var(--border-color); background: transparent; color: var(--rec-color); font: inherit; font-weight: 700; text-align: left; }
    .lv-mobile-record-open i { font-size: 18px; }
    .lv-mobile-group { width: 100%; min-height: 36px; border: 0; background: var(--bg-secondary); color: var(--text-primary); font: inherit; font-weight: 700; text-align: left; padding: 8px 12px; border-radius: 7px; }
    .lv-mobile-empty { padding: 36px 12px; color: var(--text-muted); text-align: center; }
    .lv-mobile-error { padding: 20px 12px; color: var(--danger-color); text-align: center; }
    .lv-mobile-error button { margin-left: 6px; border: 0; background: transparent; color: var(--rec-color); font: inherit; font-weight: 700; text-decoration: underline; }
    .lv-mobile-view-btn:focus-visible,
    .lv-mobile-icon-btn:focus-visible,
    .lv-mobile-select-all:focus-visible,
    .lv-mobile-record button:focus-visible,
    .lv-mobile-title:focus-visible { outline: 2px solid var(--rec-color); outline-offset: 2px; }
}