/* listview.css — CesiviListView Phase 1
   CSS Grid list-view layout replacing the legacy <table> approach.
   No dependency on allitems.css.
   ---------------------------------------------------------------------- */

/* ── CSS Variables ───────────────────────────────────────────────────── */
:root {
    --lv-font:           inherit;
    --lv-font-size:      0.875rem;
    --lv-row-height:     34px;
    --lv-header-height:  36px;
    --lv-border:         #e0e0e0;
    --lv-header-bg:      #f5f5f5;
    --lv-header-fg:      #323130;
    --lv-header-border:  #c8c6c4;
    --lv-row-bg:         #ffffff;
    --lv-row-alt-bg:     #fafafa;
    --lv-hover-bg:       #f0f6ff;
    --lv-selected-bg:    #deecf9;
    --lv-selected-border:#0078d4;
    --lv-focus-outline:  var(--focus-ring-color, #0078d4);
    --lv-link:           #0078d4;
    --lv-link-hover:     #005a9e;
    --lv-cell-pad-v:     5px;
    --lv-cell-pad-h:     8px;
    --lv-shadow:         0 2px 8px rgba(0,0,0,0.08);
}

/* ── Outer container ─────────────────────────────────────────────────── */
.cesivi-listview {
    font-family:    var(--lv-font);
    font-size:      var(--lv-font-size);
    color:          #323130;
    position:       relative;
    contain:        layout;
}

/* ── Scrollable wrapper ──────────────────────────────────────────────── */
.cesivi-lv-wrap {
    overflow-x:     auto;
    overflow-y:     auto;
    max-height:     calc(100vh - 260px);
    border:         1px solid var(--lv-border);
    border-radius:  3px;
    box-shadow:     var(--lv-shadow);
    background:     #fff;
    /* Reserve width so horizontal scrollbar doesn't appear for zero items */
    min-width:      100%;
}

/* ── CSS Grid container (Phase 7: real <table> with display:grid trick) ─ */
/* The <table id="sp-list-table"> element IS the CSS Grid container.       */
/* <thead>, <tbody>, <tfoot>, <tr> use display:contents so their children  */
/* participate directly in the grid — but remain in DOM for CSS selectors. */
.cesivi-lv-grid {
    display:            grid;
    /* JS sets --lv-col-tpl as an inline CSS variable via
       tableEl.style.setProperty('--lv-col-tpl', '40px 300px 150px ...').
       We consume it here. Without this rule the grid defaults to a single
       full-width column and all headers/cells stack vertically, one per row
       — symptom: "Modified", "Modified By" each on their own line instead
       of in a table row. */
    grid-template-columns: var(--lv-col-tpl);
    grid-auto-rows:     minmax(var(--lv-row-height), auto);
    width:              max-content;
    min-width:          100%;
    position:           relative;
}

/* When the grid IS a <table>, suppress table-layout formatting */
table.cesivi-lv-grid {
    border-collapse:    separate;
    border-spacing:     0;
    table-layout:       fixed;
}

/* thead/tbody/tfoot/tr become "transparent" to CSS Grid layout */
table.cesivi-lv-grid thead,
table.cesivi-lv-grid tbody,
table.cesivi-lv-grid tfoot,
table.cesivi-lv-grid tr {
    display:            contents;
}

/* ── Header row ──────────────────────────────────────────────────────── */
/* Works for both .lv-header-row div (old) and <tr class="lv-header-row"> (new) */
.lv-header-row {
    display:            contents;
}

.lv-th {
    position:           sticky;
    top:                0;
    z-index:            5;
    background:         var(--lv-header-bg);
    color:              var(--lv-header-fg);
    font-weight:        600;
    font-size:          0.8125rem;
    padding:            0 var(--lv-cell-pad-h);
    height:             var(--lv-header-height);
    line-height:        var(--lv-header-height);
    border-bottom:      2px solid var(--lv-header-border);
    border-right:       1px solid var(--lv-border);
    white-space:        nowrap;
    overflow:           hidden;
    text-overflow:      ellipsis;
    user-select:        none;
    cursor:             default;
    box-sizing:         border-box;
}

.lv-th:last-child {
    border-right:       none;
}

.lv-th-label {
    vertical-align:     middle;
}

.lv-sort-indicator {
    color:              #605e5c;
    font-size:          0.7em;
    margin-left:        2px;
}

.lv-th.lv-sorted-asc,
.lv-th.lv-sorted-desc {
    background:         #e8f0fe;
    color:              #1a1a1a;
}

/* Checkbox header */
.lv-th-checkbox {
    text-align:         center;
    cursor:             default;
}

/* Numeric header — right-align */
.lv-th-num {
    text-align:         right;
}

/* ── Data rows ───────────────────────────────────────────────────────── */
.lv-row {
    display:            contents;
}

/* Zebra stripe — every even data row */
.cesivi-lv-grid .lv-row:nth-child(even) .lv-td,
table.cesivi-lv-grid tbody tr.lv-row:nth-child(even) td.lv-td {
    background:         var(--lv-row-alt-bg);
}

/* ── Data cells ──────────────────────────────────────────────────────── */
.lv-td {
    padding:            var(--lv-cell-pad-v) var(--lv-cell-pad-h);
    border-bottom:      1px solid var(--lv-border);
    border-right:       1px solid transparent;
    background:         var(--lv-row-bg);
    overflow:           hidden;
    text-overflow:      ellipsis;
    white-space:        nowrap;
    align-content:      center;
    box-sizing:         border-box;
    min-height:         var(--lv-row-height);
    transition:         background 80ms;
}

.lv-td:last-child {
    border-right:       none;
}

/* Numeric cells — right-align */
.lv-td-num {
    text-align:         right;
}

/* Hover highlight (JS-managed class on cells in the same row) */
.lv-td.lv-row-hover {
    background:         var(--lv-hover-bg) !important;
}

/* Selection highlight */
.lv-td.lv-row-selected {
    background:         var(--lv-selected-bg) !important;
    border-bottom-color:var(--lv-selected-border);
}

/* Checkbox column */
.lv-td-checkbox {
    text-align:         center;
    padding:            0;
    vertical-align:     middle;
}

.lv-row-checkbox,
.lv-select-all-checkbox {
    cursor:             pointer;
    width:              16px;
    height:             16px;
    vertical-align:     middle;
}

/* ── Cell value renderers ────────────────────────────────────────────── */

/* Title link */
.lv-val-title.lv-title-link {
    color:              var(--lv-link);
    text-decoration:    none;
    font-weight:        400;
}
.lv-val-title.lv-title-link:hover {
    text-decoration:    underline;
    color:              var(--lv-link-hover);
}

/* Number/currency — right-align */
.lv-val-number,
.lv-val-currency,
.lv-val-counter {
    display:            block;
    text-align:         right;
}

/* Boolean */
.lv-bool-yes {
    color:              #107c10;
    font-weight:        600;
}
.lv-bool-no {
    color:              #a19f9d;
}

/* Choice pill */
.lv-val-choice {
    display:            inline-block;
    padding:            1px 8px;
    border-radius:      12px;
    background:         #eff6fc;
    color:              #004578;
    font-size:          0.8125rem;
    white-space:        nowrap;
}

/* URL */
.lv-val-url {
    color:              var(--lv-link);
    text-decoration:    none;
}
.lv-val-url:hover {
    text-decoration:    underline;
}

/* Attachment icon */
.lv-attachment-icon {
    font-size:          1rem;
}

/* Note (truncated with tooltip) */
.lv-val-note {
    display:            block;
    overflow:           hidden;
    text-overflow:      ellipsis;
    white-space:        nowrap;
    max-width:          100%;
}

/* ── Empty state ─────────────────────────────────────────────────────── */
.lv-empty-row {
    grid-column:        1 / -1;
}

.lv-empty-cell {
    padding:            24px 16px;
    color:              #605e5c;
    text-align:         center;
    font-style:         italic;
    font-size:          0.875rem;
}

/* ── Status/error messages ───────────────────────────────────────────── */
.lv-status-msg {
    padding:            16px;
    color:              #605e5c;
    text-align:         center;
}
.lv-msg-warn {
    color:              #bc4b09;
}
.lv-msg-error {
    color:              #a4262c;
    background:         #fdf6f6;
    border-left:        3px solid #a4262c;
    padding-left:       12px;
}

/* ── Loading indicator ───────────────────────────────────────────────── */
.lv-loading {
    padding:            20px 16px;
    color:              #605e5c;
    text-align:         center;
    animation:          lv-pulse 1.4s ease-in-out infinite;
}
@keyframes lv-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

/* ── Pagination bar ──────────────────────────────────────────────────── */
.lv-pager {
    display:            flex;
    align-items:        center;
    justify-content:    space-between;
    padding:            8px 12px;
    border-top:         1px solid var(--lv-border);
    font-size:          0.8125rem;
    color:              #605e5c;
    background:         #fafafa;
}

.lv-pager-info {
    flex:               1;
}

.lv-pager-btns {
    display:            flex;
    gap:                8px;
}

.lv-pager-btn {
    display:            inline-block;
    padding:            4px 12px;
    border:             1px solid var(--lv-border);
    border-radius:      3px;
    background:         #fff;
    color:              var(--lv-link);
    text-decoration:    none;
    font-size:          0.8125rem;
    cursor:             pointer;
    transition:         background 100ms;
}
.lv-pager-btn:hover {
    background:         #f0f6ff;
    border-color:       var(--lv-focus-outline);
    text-decoration:    none;
}

/* ── Focus / accessibility ───────────────────────────────────────────── */
.lv-th:focus,
.lv-td:focus {
    outline:            2px solid var(--lv-focus-outline);
    outline-offset:     -2px;
}

/* ── Responsive tweaks ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .cesivi-lv-wrap {
        max-height:     calc(100vh - 180px);
    }
    :root {
        --lv-font-size: 0.8rem;
        --lv-cell-pad-h: 5px;
        --lv-row-height: 30px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE 2 — Sort / Filter / Pagination / Selection
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Sortable header ─────────────────────────────────────────────────── */
.lv-th.lv-th-sortable {
    cursor:             pointer;
    user-select:        none;
}
.lv-th.lv-th-sortable:hover {
    background:         #ebebeb;
}
.lv-th.lv-th-sortable:focus {
    outline:            2px solid var(--lv-focus-outline);
    outline-offset:     -2px;
}

/* ── Inline filter row ───────────────────────────────────────────────── */
.lv-filter-row {
    display:            contents;
}

.lv-filter-cell {
    position:           sticky;
    top:                var(--lv-header-height);
    z-index:            4;
    background:         #f0f8ff;
    border-bottom:      1px solid var(--lv-header-border);
    border-right:       1px solid var(--lv-border);
    padding:            2px 4px;
    display:            flex;
    align-items:        center;
    gap:                2px;
    overflow:           visible;
    box-sizing:         border-box;
}

.lv-filter-cell-ctrl {
    justify-content:    center;
}

.lv-filter-cell.lv-filter-active {
    background:         #e8f4fd;
}

.lv-filter-op {
    flex:               0 0 auto;
    font-size:          0.7rem;
    border:             1px solid #c8c6c4;
    border-radius:      2px;
    padding:            1px 2px;
    background:         #fff;
    cursor:             pointer;
    max-width:          72px;
}

.lv-filter-input {
    flex:               1 1 auto;
    min-width:          0;
    border:             1px solid #c8c6c4;
    border-radius:      2px;
    padding:            2px 4px;
    font-size:          0.8125rem;
    background:         #fff;
    outline:            none;
}
.lv-filter-input:focus {
    border-color:       var(--lv-focus-outline);
    box-shadow:         0 0 0 1px var(--lv-focus-outline);
}
.lv-filter-input.lv-filter-input-active {
    border-color:       var(--lv-focus-outline);
    background:         #f0f8ff;
}

.lv-filter-go-btn {
    flex:               0 0 auto;
    border:             none;
    background:         transparent;
    cursor:             pointer;
    color:              var(--lv-link);
    font-size:          0.7rem;
    padding:            0 2px;
    line-height:        1;
}
.lv-filter-go-btn:hover {
    color:              var(--lv-link-hover);
}

.lv-filter-clear-btn {
    border:             none;
    background:         transparent;
    cursor:             pointer;
    color:              #a4262c;
    font-size:          0.9rem;
    padding:            2px 4px;
    border-radius:      2px;
    line-height:        1;
}
.lv-filter-clear-btn:hover {
    background:         #fdf6f6;
}

/* ── Page size selector (#sp-pagesize backward-compat) ──────────────── */
.lv-pagesize-sel,
#sp-pagesize {
    border:             1px solid var(--lv-border);
    border-radius:      2px;
    padding:            2px 4px;
    font-size:          0.8125rem;
    background:         #fff;
    cursor:             pointer;
}

/* ── Enhanced pagination bar ─────────────────────────────────────────── */
.lv-pager-enhanced {
    display:            flex;
    align-items:        center;
    justify-content:    space-between;
    flex-wrap:          wrap;
    gap:                8px;
    padding:            8px 12px;
    border-top:         1px solid var(--lv-border);
    font-size:          0.8125rem;
    color:              #605e5c;
    background:         #fafafa;
}

.lv-pager-info {
    flex:               1;
    white-space:        nowrap;
}

.lv-pager-nav {
    display:            flex;
    align-items:        center;
    gap:                6px;
    flex-wrap:          nowrap;
}

.lv-pager-label {
    color:              #323130;
    font-size:          0.8125rem;
    padding:            0 4px;
    white-space:        nowrap;
}

.lv-pager-size {
    display:            flex;
    align-items:        center;
    gap:                4px;
    white-space:        nowrap;
}

.lv-pager-size-label {
    font-size:          0.8125rem;
    color:              #605e5c;
}

.lv-pager-size-sel {
    border:             1px solid var(--lv-border);
    border-radius:      2px;
    padding:            2px 4px;
    font-size:          0.8125rem;
    background:         #fff;
    cursor:             pointer;
}

/* First/last page buttons — smaller */
.lv-pager-first,
.lv-pager-last {
    font-size:          0.75rem;
    padding:            4px 8px;
}

/* ── Bulk action bar ─────────────────────────────────────────────────── */
.lv-bulk-bar {
    display:            flex;
    align-items:        center;
    gap:                8px;
    padding:            6px 12px;
    background:         #deecf9;
    border:             1px solid #0078d4;
    border-radius:      3px;
    margin-bottom:      6px;
    flex-wrap:          wrap;
    animation:          lv-bar-in 150ms ease-out;
}
@keyframes lv-bar-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.lv-bulk-count {
    font-weight:        600;
    font-size:          0.875rem;
    color:              #004578;
    flex:               1;
}

.lv-bulk-btn {
    padding:            4px 12px;
    border:             1px solid #c8c6c4;
    border-radius:      3px;
    background:         #fff;
    font-size:          0.8125rem;
    cursor:             pointer;
    transition:         background 100ms;
}
.lv-bulk-btn:hover {
    background:         #f0f6ff;
    border-color:       var(--lv-focus-outline);
}
.lv-bulk-btn-danger {
    color:              #a4262c;
    border-color:       #f3c2c2;
}
.lv-bulk-btn-danger:hover {
    background:         #fdf6f6;
    border-color:       #a4262c;
}

/* ── Filter row adjusts sticky top when visible ──────────────────────── */
/* When filter row is present the data cells need not overlap it.        */
.cesivi-lv-grid:has(.lv-filter-row) .lv-td {
    /* browsers that support :has() — shift sticky top for filter row */
    /* (optional enhancement — no functional impact if unsupported) */
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE 3 — Inline Edit / Context Menu
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Inline edit cell state ──────────────────────────────────────────── */
.lv-td.lv-cell-editing {
    padding:            0;
    overflow:           visible;
    z-index:            10;
    position:           relative;
    background:         #fffde7 !important;
    outline:            2px solid var(--lv-focus-outline);
    outline-offset:     -2px;
}

.lv-td.lv-cell-saving {
    opacity:            0.6;
}

.lv-td.lv-cell-has-error {
    outline-color:      #a4262c !important;
}

.lv-cell-error {
    position:           absolute;
    bottom:             calc(100% + 2px);
    left:               0;
    background:         #a4262c;
    color:              #fff;
    font-size:          0.75rem;
    padding:            2px 8px;
    border-radius:      2px;
    white-space:        nowrap;
    z-index:            20;
    max-width:          260px;
    overflow:           hidden;
    text-overflow:      ellipsis;
    pointer-events:     none;
}

/* ── Cell editor widgets ──────────────────────────────────────────────── */
.lv-cell-editor {
    width:              100%;
    height:             100%;
    min-height:         var(--lv-row-height);
    border:             none;
    outline:            none;
    background:         transparent;
    font:               inherit;
    font-size:          var(--lv-font-size);
    padding:            var(--lv-cell-pad-v) var(--lv-cell-pad-h);
    box-sizing:         border-box;
    resize:             none;
}

.lv-editor-note {
    min-height:         80px;
    position:           absolute;
    top:                0;
    left:               0;
    width:              max(100%, 220px);
    background:         #fffde7;
    border:             1px solid var(--lv-focus-outline);
    border-top:         none;
    z-index:            15;
    box-shadow:         0 4px 8px rgba(0,0,0,0.15);
}

/* ── Context menu ────────────────────────────────────────────────────── */
.lv-ctx-menu {
    position:           fixed;
    z-index:            9999;
    background:         #ffffff;
    border:             1px solid #c8c6c4;
    border-radius:      4px;
    box-shadow:         0 4px 16px rgba(0,0,0,0.18);
    min-width:          160px;
    padding:            4px 0;
    font-size:          0.875rem;
    user-select:        none;
}

.lv-ctx-item {
    display:            flex;
    align-items:        center;
    gap:                8px;
    width:              100%;
    padding:            7px 14px;
    border:             none;
    background:         transparent;
    cursor:             pointer;
    text-align:         left;
    color:              #323130;
    font-size:          0.875rem;
    line-height:        1.3;
    white-space:        nowrap;
}
.lv-ctx-item:hover {
    background:         #f0f6ff;
    color:              #0078d4;
}
.lv-ctx-item:focus {
    outline:            2px solid var(--lv-focus-outline);
    outline-offset:     -2px;
}

.lv-ctx-icon {
    width:              18px;
    text-align:         center;
    flex:               0 0 auto;
}

.lv-ctx-label {
    flex:               1;
}

.lv-ctx-sep {
    border:             none;
    border-top:         1px solid #edebe9;
    margin:             4px 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE 4 — Column Formatters
   ═══════════════════════════════════════════════════════════════════════ */

/* Cells with a formatter applied */
.lv-td[data-formatted] {
    overflow:       visible;
}

/* Office UI Fabric icon rendering (iconName) */
.lv-fmt-icon {
    font-family:    'FabricMDL2Icons', 'Segoe MDL2 Assets', sans-serif;
    font-size:      1rem;
    speak:          none;
    -webkit-font-smoothing: antialiased;
}

/* Formatted badges */
.lv-fmt-badge {
    display:        inline-block;
    padding:        2px 8px;
    border-radius:  12px;
    font-size:      0.8125rem;
    font-weight:    500;
    white-space:    nowrap;
}

/* Color indicator dot (commonly used in SP column formatting) */
.lv-fmt-dot {
    display:        inline-block;
    width:          10px;
    height:         10px;
    border-radius:  50%;
    margin-right:   5px;
    vertical-align: middle;
    flex-shrink:    0;
}

/* ── Phase 5: Grouping ───────────────────────────────────────────────── */
.lv-group-header {
    display:        flex;
    align-items:    center;
    grid-column:    1 / -1;
    padding:        6px 8px;
    background:     var(--lv-header-bg, #f3f2f1);
    border-bottom:  1px solid var(--lv-border, #e0e0e0);
    cursor:         pointer;
    user-select:    none;
    font-weight:    600;
    font-size:      var(--lv-font-size, 0.875rem);
}

.lv-group-header:hover {
    background: var(--lv-hover-bg, #deecf9);
}

.lv-group-chevron {
    display:      inline-block;
    width:        16px;
    margin-right: 6px;
    font-size:    0.75rem;
    color:        var(--lv-link, #0078d4);
    flex-shrink:  0;
}

.lv-group-label {
    flex: 1;
}

.lv-group-collapsed .lv-group-chevron {
    color: #888;
}

/* ── Phase 5: Aggregate footer ───────────────────────────────────────── */
.lv-footer-row {
    display:        contents;
}

.lv-footer-td {
    background:     var(--lv-header-bg, #f3f2f1);
    border-top:     2px solid var(--lv-border, #e0e0e0);
    font-weight:    600;
    font-size:      var(--lv-font-size, 0.875rem);
    padding:        4px 8px;
    white-space:    nowrap;
}

/* ── Phase 5: View switcher (embedded web part mode) ─────────────────── */
.lv-view-switcher {
    display:        flex;
    align-items:    center;
    gap:            8px;
    padding:        4px 8px;
    margin-bottom:  4px;
    font-size:      var(--lv-font-size, 0.875rem);
}

.lv-view-switcher-label {
    font-weight:    600;
    color:          #666;
}

.lv-view-switcher-select {
    border:         1px solid var(--lv-border, #e0e0e0);
    border-radius:  3px;
    padding:        2px 6px;
    font-size:      var(--lv-font-size, 0.875rem);
    background:     white;
    cursor:         pointer;
}

/* ── Phase 6: Column resize handle ──────────────────────────────────── */
.lv-resize-handle {
    position:   absolute;
    right:      0;
    top:        0;
    bottom:     0;
    width:      5px;
    cursor:     col-resize;
    z-index:    2;
    background: transparent;
}

.lv-resize-handle:hover,
.lv-th:hover .lv-resize-handle {
    background: var(--lv-link, #0078d4);
    opacity:    0.4;
}

/* Header cells need relative positioning for the handle */
.lv-th {
    position: relative;
}

/* ── Phase 6: Real-time update toast ─────────────────────────────────── */
.lv-rt-toast {
    position:       fixed;
    bottom:         16px;
    right:          16px;
    background:     #0078d4;
    color:          white;
    padding:        10px 16px;
    border-radius:  4px;
    box-shadow:     0 2px 8px rgba(0,0,0,.25);
    font-size:      0.875rem;
    z-index:        10000;
    animation:      lv-toast-in 0.2s ease;
}

/* ── Phase 6: Export toast ───────────────────────────────────────────── */
.lv-export-toast {
    position:       fixed;
    bottom:         56px;
    right:          16px;
    background:     #107c10;
    color:          white;
    padding:        8px 14px;
    border-radius:  4px;
    box-shadow:     0 2px 6px rgba(0,0,0,.2);
    font-size:      0.85rem;
    z-index:        10000;
    animation:      lv-toast-in 0.15s ease;
}

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

/* ── Dark mode (system preference) ──────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    :root {
        --lv-header-bg:     #2d2d2d;
        --lv-header-fg:     #f3f2f1;
        --lv-header-border: #444;
        --lv-row-bg:        #1f1f1f;
        --lv-row-alt-bg:    #252525;
        --lv-border:        #3a3a3a;
        --lv-hover-bg:      #1e3a5f;
        --lv-selected-bg:   #1e3a5f;
        --lv-link:          #6ab4f5;
        --lv-link-hover:    #9dcef8;
    }
    .lv-val-choice {
        background: #003366;
        color: #9dcef8;
    }
    .cesivi-listview {
        color: #f3f2f1;
    }
}

/* ──────────────────────────────────────────────────────────────────────
   Modern toolbar menu bar (PLAN-1025) — three dropdowns: View, Format, Dev.
   These styles used to live in allitems.css, which PLAN-1044 replaced with
   listview.css but forgot to migrate. Without them the dropdown buttons
   render as unstyled inline text links.
   ────────────────────────────────────────────────────────────────────── */
.ms-toolbar-menus {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background-color: var(--spm-surface, #f4f4f4);
    border-bottom: 1px solid var(--spm-border, #e1e1e1);
    flex-wrap: nowrap;
    min-height: 34px;
}
.ms-toolbar-dropdown { display: inline-block; }
.ms-toolbar-menu-btn {
    font-size: 12px;
    padding: 3px 10px;
    border: 1px solid var(--spm-border, #e1e1e1);
    background: var(--spm-bg, #fff);
    color: var(--spm-text, #333);
    border-radius: 3px;
    white-space: nowrap;
}
.ms-toolbar-menu-btn:hover {
    background: var(--spm-surface, #f4f4f4);
    border-color: var(--spm-text-secondary, #999);
}
.ms-toolbar-menu-btn-dev {
    border-color: #f97316;
    color: #c05f00;
}
.ms-toolbar-dropdown-menu { font-size: 12px; min-width: 200px; }
.dropdown-menu-scrollable { max-height: 70vh; overflow-y: auto; }

/* Legacy hidden static toolbar container (PLAN-1025 dropdown-forwarding target) */
#sp-legacy-toolbar { display: none !important; }

/* ──────────────────────────────────────────────────────────────────────
   Overlay / popup elements that default to HIDDEN. These rules lived in
   allitems.css (PLAN-1044 didn't migrate them). Without them every list
   view shows the ECB menu, doc-info panel, command palette, find bar,
   note popup, and the no-results message all stacked inline below the
   grid as raw unformatted text fragments.
   ────────────────────────────────────────────────────────────────────── */

/* ECB (row context menu) — shown via JS on right-click / ⋯ button */
.sp-ecb-menu {
    position: absolute;
    background: #fff;
    border: 1px solid #c8c6c4;
    box-shadow: 2px 2px 6px rgba(0,0,0,.22);
    padding: 4px 0;
    font-size: 12px;
    min-width: 180px;
    z-index: 1300;
    border-radius: 2px;
}
.sp-ecb-hidden { display: none !important; }

/* Doc info panel (hover on document → metadata tooltip) */
.sp-doc-info-panel {
    position: absolute;
    background: #fff;
    border: 1px solid #c8c6c4;
    box-shadow: 2px 2px 6px rgba(0,0,0,.18);
    padding: 8px 12px;
    font-size: 12px;
    z-index: 1200;
    min-width: 210px;
    max-width: 290px;
    pointer-events: auto;
    border-radius: 2px;
}
.sp-doc-info-hidden { display: none !important; }

/* Command palette (Ctrl+K) — fixed-positioned modal, default hidden */
#sp-cmd-palette {
    display: none;
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 480px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    z-index: 1400;
    padding: 12px;
}
#sp-cmd-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.2);
    z-index: 1399;
}

/* Find bar (Ctrl+F) — fixed top-right, shown only when .sp-find-open */
#sp-find-bar {
    position: fixed;
    top: 8px;
    right: 8px;
    z-index: 700;
    display: none;
    background: #fff;
    border: 1px solid #c8c8c8;
    border-radius: 6px;
    padding: 5px 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    align-items: center;
    gap: 6px;
    font-size: 0.85em;
}
#sp-find-bar.sp-find-open { display: flex; }

/* Row-note popup — shown via JS on note-icon click */
#sp-note-popup {
    position: fixed;
    display: none;
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    padding: 10px 12px;
    min-width: 240px;
    max-width: 320px;
    z-index: 800;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    font-size: 0.85em;
}

/* No-results empty state — only shown when grid actually has no rows.
   The element is rendered unconditionally in Razor; the listview code
   toggles its visibility based on row count. Default hidden so it
   doesn't appear on initial page render before the JS runs. */
#sp-allitems-no-results { display: none; }
#sp-allitems-no-results.sp-no-results-active { display: block; }

/* Print-only header — hidden in normal view */
.sp-allitems-print-header { display: none; }
@media print {
    .sp-allitems-print-header { display: flex !important; }
}

/* Drop-zone overlay for document upload — fixed-positioned, default hidden.
   Shown only while a drag is in progress; the JS toggles .sp-dz-hidden. */
#sp-dropzone-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0, 120, 212, 0.10);
    border: 3px dashed #0072c6;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
.sp-dz-hidden { display: none !important; }
.sp-dz-inner { text-align: center; color: #0072c6; font-size: 16px; font-weight: 600; }

/* Upload progress popup (bottom-right), shown only when uploading */
#sp-upload-progress {
    position: fixed; bottom: 20px; right: 20px; width: 360px; z-index: 9998;
    background: white; border: 1px solid #d2d0ce; border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    display: none;
}
#sp-upload-progress.sp-up-active { display: block; }

/* Bulk Edit side panel — fixed-positioned overlay, default hidden */
.sp-bulkedit-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    height: 100vh;
    background: #fff;
    border-left: 1px solid #c8c6c4;
    box-shadow: -4px 0 16px rgba(0,0,0,.15);
    z-index: 9200;
    display: flex;
    flex-direction: column;
    font-size: 13px;
}
.sp-bulkedit-hidden { display: none !important; }
.sp-bulkedit-backdrop { position: fixed; inset: 0; z-index: 9199; background: rgba(0,0,0,.25); }
.sp-bulkedit-backdrop.sp-bulkedit-hidden { display: none !important; }

/* Filter-value chooser popover — default hidden (opens on filter-icon click) */
.sp-filter-chooser,
#sp-filter-chooser,
.sp-filter-values-popover { display: none; }
.sp-filter-chooser.sp-filter-chooser-open,
#sp-filter-chooser.sp-filter-chooser-open,
.sp-filter-values-popover.open { display: block; }

/* Column-filter dropdown (per-header filter popover) — position:absolute,
   anchored to the header cell. Default hidden. */
#sp-col-filter-dropdown,
.sp-col-filter-dropdown {
    position: absolute;
    background: #fff;
    border: 1px solid #c8c6c4;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    padding: 8px;
    min-width: 220px;
    z-index: 1100;
    border-radius: 3px;
    display: block;
}
.sp-col-filter-hidden { display: none !important; }

/* Clear multi-sort button — only rendered meaningfully when a multi-sort
   is active. JS should toggle .sp-msort-clear-active to show. */
#sp-msort-clear { display: none; }
#sp-msort-clear.sp-msort-clear-active { display: inline-block; }

/* ──────────────────────────────────────────────────────────────────────
   Legacy toolbar containers — hidden when the modern toolbar menus exist.
   PLAN-1044 replaced allitems.css with listview.css, but the rules that
   hid these legacy containers (PLAN-766 + PLAN-1025) weren't carried over.
   Without these rules, both the #sp-secondary-toolbar (old ribbon-style
   panel with ~50 buttons grouped by category) AND the old `.ms-toolbar-right`
   / `.ms-toolbar-left` button strips render on top of the new View/Format/
   Dev menu bar — symptom: every list view shows a huge double toolbar with
   all actions both in the new dropdowns AND in the old flat ribbon.

   Gate on #sp-toolbar-menus so pages that still legitimately use the old
   toolbars are unaffected.
   ────────────────────────────────────────────────────────────────────── */

/* PLAN-766 original: secondary toolbar hidden by default, shown only when
   explicitly given .expanded (e.g. the old Show/Hide Toolbar button). */
.ms-action-strip-secondary {
    display: none !important;
}
.ms-action-strip-secondary.expanded {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 0;
    padding: 4px 8px 6px;
}

/* PLAN-1025: the ~50 legacy buttons injected into .ms-toolbar-right by the
   phase IIFEs are replaced by View / Format / Dev dropdowns. Keep them in
   the DOM (dropdowns click them by id) but invisible. */
.ms-webpart-page:has(#sp-toolbar-menus) .ms-toolbar-right,
.ms-webpart-page:has(#sp-toolbar-menus) .ms-toolbar-left {
    display: none !important;
}