/* One list system (round 27, LST-1, contract D4/D8; round 28 LST-1, lijsten §B1–§B3/§D7):
   bar v2 in two rows, glass dropdown, prefilters, chips, rows (+ compact), 'Meer',
   bulk cap, the small table and the loading state. Colours only via tokens;
   one control height --sc-control-h for every control in the bar.
   Run 29a (LST-1, lijsten §B1/§B3/§B4): bar v3 — one height --sc-list-h for search, prefilter,
   tool, view, action, help, chip and drawer field; .sc-list-tool (no .button); 'Opties' only
   ≤ 767; sort and period in the drawer; the darker glass and a stacking context per open list;
   only the bar sticks (top --sc-top); avatar rows, the tile table scrolls with fades.
   Run 30a (LST-1, lijsten §B1–§B5/§B7/§B10/§D3): bar v4 — 28 px on every bar root (also a JS bar
   without .sc-list, r.41/42/45), row 1 never wraps, the prefilters are a borderless scroll strip
   (sc-tabs.js fades; data-sc-pre-row from scList puts it under row 1), the status line above,
   the bare bar of an empty list, 18 px to the result, one 'Meer' loader (the aria-busy ring),
   the rows a table inside a list, the compact drawer and the dropdown in the top layer (popover). */

/* Not in :root: an x-sc.dropdown in a form or sidebar keeps --sc-control-h (36). */
.sc-list,
.sc-list-bar,
.sc-lib-bar {
    --sc-list-h: 28px;
    --sc-list-bar-gap: 8px;
    --sc-list-search-w: 240px;
}

.sc-list {
    position: relative;
}

/* An open sheet lifts its list (and its tile) above the next list or tile on the page (r.106);
   dropdowns and the period pop sit in the top layer (popover) and need no lift. */
.sc-list:has(.sc-list-overflow[aria-expanded="true"]) {
    z-index: 30;
}

.siteclick-tile:has(.sc-list-overflow[aria-expanded="true"]) {
    position: relative;
    z-index: 30;
}

/* Status line (slot status, V4): its own line above row 1, never sticky; text left, buttons right. */
.sc-list-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--sc-color-text-muted);
}

/* Row 1: count, prefilters, tools on one line. No surface of its own; .sc-list-head = the pre-28 markup of pages not yet on the bar. */
.sc-list-bar,
.sc-list-head {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px var(--sc-list-bar-gap);
    padding: 6px 0;
}

/* The prefilter strip did not fit (scList.fitPre): it moves under row 1 and scrolls there. */
.sc-list-bar[data-sc-pre-row] {
    flex-wrap: wrap;
}

.sc-list-bar[data-sc-pre-row] > .sc-list-pre {
    order: 9;
    flex: 1 1 100%;
}

/* On a page only the bar sticks, right below the header bar, as glass (the page head and the tabs
   scroll along, sc-pagehead.css); in panels it scrolls along. */
.siteclick-content .sc-list-bar,
.siteclick-content .sc-list-head {
    top: var(--sc-top);
    position: sticky;
    z-index: 2;
    background: var(--sc-glass-bg-bar);
    -webkit-backdrop-filter: var(--sc-glass-blur);
    backdrop-filter: var(--sc-glass-blur);
}

/* Compact (sidebars, panels, half switcher): one row that scrolls along; 0–1 field inline after the search.
   Bare (an empty list without a filter, ListQuery::bare): only the actions and help, right, no glass. */
.sc-list-bar--compact,
.siteclick-content .sc-list-bar--compact,
.sc-list-bar--bare,
.siteclick-content .sc-list-bar--bare {
    position: static;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.sc-list-bar--bare {
    justify-content: flex-end;
}

.sc-list-bar--bare:not(:has(> *)) {
    display: none;
}

.sc-list-bar--compact:not(.sc-lib-bar) {
    padding: 0;
    margin-bottom: 16px;
}

/* Compact with ≥ 2 fields: the Filter toggle opens form.sc-list-fields as a drawer, the last line of the bar. */
.sc-list-bar--compact:has(.sc-list-filter-toggle) {
    flex-wrap: wrap;
}

.sc-list-bar--compact:has(.sc-list-filter-toggle) > .sc-list-fields {
    flex: 1 1 100%;
    flex-wrap: wrap;
}

/* Basis 0, not its content (292 px): count + tools stay on row 1 down to a 302 px bar; only the drawer wraps (fix-30a W1). */
.sc-list-bar--compact:has(.sc-list-filter-toggle) > .sc-list-tools {
    flex: 1 1 0;
}

.sc-list-bar--compact .sc-list-tools {
    flex: 1 1 auto;
    margin-left: 0;
}

.sc-list-bar--compact .sc-list-fields {
    flex-wrap: nowrap;
}

.sc-list-count {
    flex: none;
    white-space: nowrap;
    font-size: 12px;
    color: var(--sc-color-text-muted);
}

.sc-list-count b {
    font-weight: var(--sc-font-weight-title);
    color: var(--sc-color-text-strong);
}

.sc-list-tools,
.sc-list-sheet {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--sc-list-bar-gap);
    margin-left: auto;
}

/* The tools shrink only through the search (min 160 px); the strip shrinks first. */
.sc-list-tools {
    flex: 0 1 auto;
    min-width: 0;
}

.sc-list-sheet {
    flex: none;
}

.sc-list-sheet {
    margin-left: 0;
}

.sc-list-bar .sc-list-overflow,
.sc-list-bar .sc-list-mfilter {
    display: none;
}

/* The sticky sentinel scList puts right before a page bar (data-sc-stuck): no box of its own. */
.sc-list-stick {
    display: block;
    height: 0;
}

/* One tool button (Filter, views, help, 'Opties'): no .button, so no fight with shared.css. */
.sc-list-tool {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--sc-list-h);
    margin: 0;
    padding: 0 10px;
    border: 0;
    border-radius: var(--sc-radius-md);
    background: var(--sc-button-neutral-bg);
    color: var(--sc-button-neutral-text);
    font: inherit;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.sc-list-tool:hover,
.sc-list-tool[aria-expanded="true"] {
    background: var(--sc-button-neutral-bg-hover);
    color: var(--sc-button-neutral-text-hover);
}

.sc-list-tool .icon {
    font-size: 1em;
}

/* Fixed square: on a narrow bar the search shrinks, never the help button (A52, NAFIX-fix31b-1). */
.sc-list-help {
    flex: none;
    width: var(--sc-list-h);
    padding: 0;
}

/* The action slot: a .button keeps its colour, the label sits in the middle (r.103). */
/* Same size for every variant: 0.9rem on --sc-list-h, icon and label on one axis, 6px apart (r.18). The
   .button.button-small/-medium selectors (0,4,0) beat shared.css's own !important size rules (0,3,0). */
.siteclick-container .sc-list-actions .button,
.siteclick-container .sc-list-actions .button.button-small,
.siteclick-container .sc-list-actions .button.button-medium {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--sc-list-h) !important;
    font-size: 13px !important;
    line-height: 1 !important;
    padding: 0 10px !important;
    white-space: nowrap;
}

.siteclick-container .sc-list-actions .button i,
.siteclick-container .sc-list-actions .button.button-small i,
.siteclick-container .sc-list-actions .button.button-medium i {
    font-size: 1em !important;
    margin: 0 !important;
}

/* The display above beats the UA [hidden] rule (fix31 A56). */
.siteclick-container .sc-list-actions .button[hidden] {
    display: none;
}

.sc-list-tools .button,
.sc-list-tools select,
.sc-list-fields input,
.sc-list-fields select {
    box-sizing: border-box;
    height: var(--sc-list-h);
    margin: 0;
}

.sc-list-actions {
    display: inline-flex;
    gap: 6px;
}

.sc-list-filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--sc-radius-full);
    background: var(--sc-color-primary);
    color: var(--sc-color-white);
    font-size: 11px;
    transition: transform var(--sc-dur-fast) var(--sc-ease-out);
}

.sc-list-filter-badge[hidden] {
    display: none;
}

/* Prefilters: a named filter as a button with its count; the pressed one is the active state (no chip).
   One scroll strip (r.31): no wrap, no scrollbar, the edge fades of the tab strips (data-sc-fade, sc-tabs.js). */
.sc-list-pre {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.sc-list-pre::-webkit-scrollbar {
    display: none;
}

.sc-list-pre[data-sc-fade="l"] {
    mask-image: linear-gradient(to right, transparent, var(--sc-color-black) 24px);
}

.sc-list-pre[data-sc-fade="r"] {
    mask-image: linear-gradient(to left, transparent, var(--sc-color-black) 24px);
}

.sc-list-pre[data-sc-fade="l r"] {
    mask-image: linear-gradient(to right, transparent, var(--sc-color-black) 24px, var(--sc-color-black) calc(100% - 24px), transparent);
}

/* Borderless chips on the surface ground (r.33, r.171-176): dot · label · count; pressed keeps the weight. */
.sc-pre {
    box-sizing: border-box;
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    height: var(--sc-list-h);
    padding: 0 10px;
    border: 0;
    border-radius: var(--sc-radius-full);
    background: var(--sc-color-surface);
    color: var(--sc-pre-ink);
    font: inherit;
    font-size: 11px;
    white-space: nowrap;
    cursor: pointer;
}

.sc-pre b {
    font-weight: var(--sc-font-weight-title);
    color: var(--sc-color-primary-text);
}

.sc-pre:hover {
    background: var(--sc-color-surface-alt);
}

.sc-pre[aria-pressed="true"] {
    background: var(--sc-color-surface-alt);
    color: var(--sc-pre-ink-active);
}

/* Level dot of a prefilter (pre[].level); the level colours belong to the page (health.css). */
.sc-pre-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: var(--sc-radius-full);
    background: var(--sc-color-text-subtle);
}

.sc-list-fields input,
.sc-list-fields select {
    padding: 0 8px;
    border: thin solid var(--sc-color-border-strong);
    border-radius: var(--sc-radius-md);
    background: var(--sc-color-bg);
    color: var(--sc-color-text);
    font: inherit;
    font-size: 13px;
}

/* Search: icon inside the field, clear button right once there is text; an xs loader in its place while loading. */
.sc-list-search {
    position: relative;
    display: flex;
    flex: 0 1 var(--sc-list-search-w);
    align-items: center;
    min-width: 160px;
    height: var(--sc-list-h);
    margin: 0;
}

.sc-list-search .icon-search-1 {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--sc-color-text-subtle);
    pointer-events: none;
}

.sc-list-search input {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 26px 0 28px;
    border: thin solid var(--sc-color-border-strong);
    border-radius: var(--sc-radius-md);
    background: var(--sc-color-bg);
    color: var(--sc-color-text);
    font: inherit;
    font-size: 13px;
}

.siteclick-container .sc-list-search input[type="search"] {
    /* M1-28a 6b: shared.css (.siteclick-container input[type=search]) set 0.6rem, the icon covered the placeholder;
       run 29a: and 32px high (r.104); run 30a: 28 px, icon at 8. */
    height: 100%;
    padding: 0 26px 0 28px;
}

.sc-list-search input::-webkit-search-cancel-button {
    display: none;
}

.sc-list-clear {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: var(--sc-radius-sm);
    background: transparent;
    color: var(--sc-color-text-subtle);
    cursor: pointer;
}

.sc-list-has-q .sc-list-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sc-list-search-loader {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
}

.sc-list.is-loading .sc-list-search-loader {
    display: inline-flex;
}

.sc-list.is-loading .sc-list-clear {
    display: none;
}

.sc-list-clear:hover {
    color: var(--sc-color-text-strong);
}

/* Views: one segment, the pressed view in the primary tint (r.111). */
.sc-list-views {
    display: inline-flex;
    overflow: hidden;
    border-radius: var(--sc-radius-md);
    background: var(--sc-color-surface-alt);
}

.sc-list-view {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sc-list-h);
    height: var(--sc-list-h);
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--sc-color-text-muted);
    cursor: pointer;
}

.sc-list-view .icon {
    font-size: 14px;
}

.sc-list-view:hover {
    color: var(--sc-color-text-strong);
}

.sc-list-view[aria-pressed="true"] {
    background: var(--sc-color-primary-soft);
    color: var(--sc-color-primary-text);
    font-weight: var(--sc-font-weight-title);
}

/* Row 2: the open drawer or the chips (never both), 'Alles wissen' right.
   Its entry animation (fill both) makes it a stacking context, so the chip
   dropdown's z-index stays inside it: lift the row above the positioned
   .sc-list-body (nafix 28d N-1), below the sticky bar (z 2). */
.sc-list-row2 {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px var(--sc-list-bar-gap);
    padding: 0;
    animation: sc-list-in var(--sc-motion, var(--sc-dur-base) var(--sc-ease-out)) both;
}

.sc-list-row2[hidden],
.sc-list-fields:not([data-open]),
.sc-list-fields[data-open] ~ .sc-list-chips {
    display: none;
}

.sc-list-chips:empty {
    display: none;
}

.sc-list-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px var(--sc-list-bar-gap);
    margin: 0;
}

.sc-list-field {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sc-list-field-label {
    margin: 0;
    font-size: 12px;
    color: var(--sc-color-text-muted);
}

.sc-field-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: var(--sc-radius-full);
    background: transparent;
    color: var(--sc-color-text-subtle);
    font-size: 10px;
    cursor: pointer;
}

.sc-field-clear[hidden] {
    display: none;
}

/* Glass dropdown (x-sc.dropdown / scDropdown): .sc-dd-panel is the one glass panel, also the header menu (sc-more). */
.sc-dd-panel {
    border: thin solid var(--sc-color-hairline);
    border-radius: var(--sc-radius-md);
    background: var(--sc-glass-bg-strong);
    -webkit-backdrop-filter: var(--sc-glass-blur);
    backdrop-filter: var(--sc-glass-blur);
    box-shadow: var(--sc-shadow-pop);
}

.sc-dd {
    position: relative;
    display: inline-flex;
}

/* A dropdown in a form field (@input_select_1/2) fills the field; 0,3,0 beats .sc-dd-btn (0,1,0) and its max-width (40n DD_FULL). */
.siteclick-form-component > .sc-dd {
    display: flex;
    width: 100%;
}

.siteclick-form-component > .sc-dd > .sc-dd-btn {
    width: 100%;
    max-width: none;
    justify-content: space-between;
}

.sc-dd-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--sc-list-h, var(--sc-control-h));
    max-width: 260px;
    padding: 0 8px;
    border-radius: var(--sc-radius-md);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

/* In the bar and the drawer the dropdown is a borderless control (r.34); a chosen filter in the primary tint.
   0,2,0 beats .sc-dd-btn (0,1,0); the sort always has a value and keeps the neutral ground. */
.sc-list-bar .sc-dd-btn,
.sc-list-fields .sc-dd-btn {
    border: 0;
    background: var(--sc-button-neutral-bg);
    color: var(--sc-button-neutral-text);
}

.sc-list-bar .sc-dd-btn:hover,
.sc-list-fields .sc-dd-btn:hover {
    background: var(--sc-button-neutral-bg-hover);
}

.sc-list-bar .sc-dd[data-has-value]:not(.sc-list-sort) .sc-dd-btn,
.sc-list-fields .sc-dd[data-has-value]:not(.sc-list-sort) .sc-dd-btn {
    background: var(--sc-color-primary-soft);
    color: var(--sc-color-primary-text);
}

.sc-dd-label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sc-dd-btn .icon-arrow-bottom-small {
    font-size: 10px;
    color: var(--sc-color-text-subtle);
}

.sc-dd-visual {
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: var(--sc-radius-sm);
    object-fit: contain;
}

.sc-dd-pop {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    min-width: max(100%, 220px);
    max-width: 340px;
    max-height: min(360px, 60vh);
    padding: 4px;
    animation: sc-list-in var(--sc-motion, var(--sc-dur-base) var(--sc-ease-out)) both;
}

/* Dropdown v4 (D3, r.38): the pop is a popover in the top layer, placed by scDropdown.float on --sc-dd-x|y|w
   (0,2,0, wins from .sc-dd-pop). */
.sc-dd-pop[popover] {
    position: fixed;
    inset: auto;
    top: var(--sc-dd-y, 0);
    left: var(--sc-dd-x, 0);
    margin: 0;
    color: inherit;
    min-width: max(var(--sc-dd-w, 0px), 220px);
    max-width: 340px;
    max-height: min(360px, 60vh);
    overflow: hidden;
}

.sc-dd select[hidden] {
    /* M1-28a 6a: shared.css (.siteclick-container select, display block) showed the dropdown's own select. */
    display: none;
}

.sc-dd-pop[hidden] {
    display: none;
}

.sc-dd-opts {
    min-height: 0;
    overflow-y: auto;
}

.sc-dd-search {
    box-sizing: border-box;
    flex: none;
    width: 100%;
    height: 28px;
    margin: 0 0 4px;
    padding: 0 10px;
    border: thin solid var(--sc-color-border-strong);
    border-radius: var(--sc-radius-sm);
    background: transparent;
    color: var(--sc-color-text);
    font: inherit;
    font-size: 13px;
}

.sc-dd-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 30px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--sc-radius-sm);
    background: transparent;
    color: var(--sc-color-text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.sc-dd-opt[hidden] {
    display: none;
}

.sc-dd-opt:hover,
.sc-dd-opt:focus-visible {
    background: var(--sc-color-surface-alt);
    outline: none;
}

.sc-dd-opt[aria-selected="true"] {
    color: var(--sc-color-primary-text);
}

/* Single: the chosen option carries a check right (multi has its box). */
.sc-dd-opt[aria-selected="true"]:not(:has(.sc-dd-box))::after {
    content: '';
    flex: none;
    width: 4px;
    height: 8px;
    margin: 0 3px 2px auto;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Groups from <optgroup> (a heading before its options). */
.sc-dd-group {
    padding: 8px 10px 4px;
    font-size: 11px;
    font-weight: var(--sc-font-weight-title);
    color: var(--sc-color-text-muted);
}

.sc-dd-group[hidden] {
    display: none;
}

/* Multi: '{n} gekozen' + 'Wissen', a square box per option, 'Gereed' over the full width (r.36). */
.sc-dd-head {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 10px;
    font-size: 12px;
    color: var(--sc-color-text-muted);
}

.sc-dd-clear {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--sc-color-primary-text);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.sc-dd-head .sc-dd-clear[hidden] {
    display: none;
}

.sc-dd-box {
    position: relative;
    box-sizing: border-box;
    flex: none;
    width: 16px;
    height: 16px;
    border: thin solid var(--sc-color-border-strong);
    border-radius: var(--sc-radius-sm);
}

.sc-dd-opt[aria-selected="true"] .sc-dd-box {
    border-color: var(--sc-color-primary);
    background: var(--sc-color-primary);
}

.sc-dd-opt[aria-selected="true"] .sc-dd-box::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid var(--sc-color-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.sc-dd-none {
    padding: 8px 10px;
    font-size: 13px;
    color: var(--sc-color-text-muted);
}

.sc-dd-none[hidden] {
    display: none;
}

.sc-dd-opt-label {
    flex: 1 1 auto;
}

.sc-dd-opt-count {
    color: var(--sc-color-text-muted);
    font-size: 12px;
}

.sc-dd-foot {
    display: flex;
    flex: none;
    padding: 4px 0 0;
}

.sc-dd-done {
    width: 100%;
}

/* Active filters (drawer closed), in row 2 right under the Filter button. */
.sc-list-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.sc-chip {
    animation: sc-list-in var(--sc-dur-fast) var(--sc-ease-out) both;
}

.sc-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-sizing: border-box;
    height: var(--sc-list-h);
    padding: 0 6px 0 10px;
    border-radius: var(--sc-radius-full);
    background: var(--sc-color-surface-alt);
    color: var(--sc-color-text);
    font-size: 12px;
}

.sc-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: var(--sc-radius-full);
    background: transparent;
    color: var(--sc-color-text-subtle);
    font-size: 10px;
    cursor: pointer;
}

.sc-chip-remove:hover {
    color: var(--sc-color-text-strong);
}

.sc-chip-clear {
    height: var(--sc-list-h);
    margin-left: auto;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: var(--sc-color-primary-text);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

/* Body: siteclickUi.refresh locks the height and shows its loader; appended items fade in. */
.sc-list-body {
    position: relative;
    min-height: 48px;
}

/* 18 px from the last control to the result (r.39): bar padding 6 + 12. */
.sc-list > .sc-list-body {
    margin-top: 12px;
}

.sc-list-in {
    animation: sc-list-in var(--sc-motion, var(--sc-dur-base) var(--sc-ease-out)) both;
}

@keyframes sc-list-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
}

.sc-list-empty[hidden],
.sc-list-more[hidden],
.sc-list-more-note[hidden],
.sc-list-capped[hidden] {
    display: none;
}

/* M1-28b: .siteclick-container .button (0,2,0) showed 'Filters wissen' on an unfiltered empty list. */
.sc-list-empty .sc-list-reset[hidden] {
    display: none;
}

.sc-list-capped {
    padding: 12px 0;
    font-size: 12px;
    color: var(--sc-color-text-muted);
    text-align: center;
}

.sc-list-empty {
    padding: 32px 0;
    text-align: center;
    color: var(--sc-color-text-muted);
}

.sc-list-empty p,
.sc-list-empty-text {
    margin: 0 0 12px;
    font-size: 13px;
}

/* 'x van y zichtbaar' right above 'Meer' (r.105). */
.sc-list-more-note {
    margin: 16px 0 0;
    font-size: 12px;
    color: var(--sc-color-text-muted);
    text-align: center;
}

.sc-list-more-note + .sc-list-more,
.siteclick-container .sc-list-more-note + .sc-list-more:not([hidden]) {
    margin-top: 8px;
}

.sc-list-more {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px auto 0;
    margin-inline: auto;
}

.siteclick-container .sc-list-more:not([hidden]) {
    /* M1-28a 6c: .siteclick-container .button (inline-block, margin 0) left-aligned 'Meer'. */
    display: flex;
    width: fit-content;
    margin: 16px auto 0;
}

/* Rows (x-sc.list-row). */
.sc-rows {
    display: flex;
    flex-direction: column;
}

.sc-row {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 56px;
    padding: 8px 12px;
    border-bottom: thin solid var(--sc-color-hairline);
    color: var(--sc-color-text);
    text-decoration: none;
}

a.sc-row:hover {
    background: var(--sc-color-surface);
}

/* Run 38a (LST-1, P10c): inside a list no hover ground; the title lights up (muted → strong) instead. */
.sc-list a.sc-row:hover {
    background: none;
}

.sc-list .sc-row[data-sidebar-toggle] {
    cursor: pointer;
}

/* The five cell kinds of x-sc.list-row: outside a list the cell is no box (the flex row as before). */
.sc-row-cell {
    display: contents;
}

/* Inside a list the rows are a table (r.319): every column as wide as its widest cell, so a missing
   status or action keeps its column. The main cell takes the rest (max-width 0 lets its ellipsis work). */
.sc-list .sc-rows {
    display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

/* Run 40a (APP-LST, O4): a row border adds to the cell height and shifts the pill off the middle, so the row
   line is an inset shadow on the cells (0,2,0 beats .sc-row 0,1,0; .sc-row outside a list is unchanged). */
.sc-list .sc-row {
    display: table-row;
    border-bottom: 0;
    font-size: 13px;
}

.sc-list .sc-row > * {
    box-shadow: inset 0 -1px 0 var(--sc-color-hairline);
}

/* 'Uitgebreide lijst' (view list, run 38a LST-1): 52 px rows including padding (border-box, 40n), visual 32 px. */
.sc-list .sc-row > * {
    box-sizing: border-box;
    display: table-cell;
    height: 52px;
    padding: 8px;
    vertical-align: middle;
}

.sc-list .sc-row > .is-empty {
    padding: 0;
}

/* Metas are never conditional, only their content (r.4): an empty meta keeps its column without padding. */
.sc-list .sc-row > .sc-row-meta:empty {
    padding: 0;
}

/* Run 38a (LST-1, P10c): the visual and the title sit on the line of the count and the hairline (no indent);
   only the table view keeps its 12 px (its header x-sc.list-head runs along). */
.sc-list .sc-row > :first-child {
    padding-left: 0;
}

.sc-list .sc-row > :last-child {
    padding-right: 0;
}

.sc-list .sc-row--table > :first-child {
    padding-left: 12px;
}

.sc-list .sc-row--table > :last-child {
    padding-right: 12px;
}

/* Without a visual the main cell starts at the edge too. */
.sc-list .sc-row:not(.sc-row--table) > .is-empty:first-child + .sc-row-cell--main {
    padding-left: 0;
}

/* 'Lijst' (view compact, or a :compact row): one line of 26 px (36 px under 768) without a visual or sub line. */
:is(.sc-list .sc-row--compact, .sc-list[data-sc-list-view="compact"] .sc-row:not(.sc-row--table)) > * {
    height: 26px;
    padding-block: 0;
}

:is(.sc-list .sc-row--compact, .sc-list[data-sc-list-view="compact"] .sc-row:not(.sc-row--table)) > .sc-row-cell--visual,
:is(.sc-list .sc-row--compact, .sc-list[data-sc-list-view="compact"] .sc-row:not(.sc-row--table)) .sc-row-sub {
    display: none;
}

:is(.sc-list .sc-row--compact, .sc-list[data-sc-list-view="compact"] .sc-row:not(.sc-row--table)) > .sc-row-cell--main {
    padding-left: 0;
}

:is(.sc-list .sc-row--compact, .sc-list[data-sc-list-view="compact"] .sc-row:not(.sc-row--table)) .sc-row-title {
    font-size: 13px;
    line-height: 18px;
    font-weight: var(--sc-font-weight-text);
}

.sc-list .sc-row-cell--main {
    width: 100%;
    max-width: 0;
}

.sc-list .sc-row-visual {
    display: block;
}

.sc-list .sc-row > .sc-row-meta {
    max-width: 240px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sc-row-visual {
    flex: none;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: var(--sc-radius-sm);
}

/* An avatar fills the visual and keeps its round shape and status (r.120). */
.sc-row-visual:has(.sc-avatar) {
    overflow: visible;
}

.sc-row-visual .sc-avatar {
    --sc-avatar-size: 40px;
}

.sc-list .sc-row-visual {
    width: 32px;
    height: 32px;
}

.sc-list .sc-row-visual .sc-avatar {
    --sc-avatar-size: 32px;
}

.sc-row--compact .sc-row-visual .sc-avatar {
    --sc-avatar-size: 24px;
}

/* shared.css drops the small status dot 6px (top 6px, vertical-align top) below the text middle. */
.sc-row .siteclick-status.siteclick-status-small {
    top: 0 !important;
    vertical-align: middle;
}

.sc-row-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sc-row-title {
    overflow: hidden;
    font-size: 13px;
    line-height: 18px;
    font-weight: var(--sc-font-weight-title);
    color: var(--sc-color-text-strong);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sc-row-sub {
    overflow: hidden;
    font-size: 12px;
    color: var(--sc-color-text-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sc-row-meta {
    flex: 0 0 140px;
    overflow: hidden;
    font-size: 13px;
    color: var(--sc-color-text-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Run 38a (LST-1, P10c): in a list the title is muted 14 px (weight ui; 'Lijst' text) and lights up to strong
   on hover/focus, the sub and metas from subtle to muted; the table view keeps its title weight. */
.sc-list .sc-row-title {
    font-size: 13px;
    color: var(--sc-color-text-muted);
    transition: color var(--sc-dur-fast);
    line-height: 18px;
}

.sc-list .sc-row:not(.sc-row--table) .sc-row-title {
    font-weight: var(--sc-font-weight-ui);
}

.sc-list .sc-row-sub,
.sc-list .sc-row-meta {
    color: var(--sc-color-text-subtle);
    transition: color var(--sc-dur-fast);
}

.sc-list :is(a.sc-row, .sc-row[data-sidebar-toggle]):is(:hover, :focus-visible) .sc-row-title {
    color: var(--sc-color-text-strong);
}

.sc-list :is(a.sc-row, .sc-row[data-sidebar-toggle]):is(:hover, :focus-visible) :is(.sc-row-sub, .sc-row-meta) {
    color: var(--sc-color-text-muted);
}

.sc-row--compact {
    gap: 12px;
    min-height: 36px;
    padding: 4px 12px;
}

.sc-row--compact .sc-row-visual {
    width: 24px;
    height: 24px;
}

.sc-row--compact .sc-row-title {
    font-size: 13px;
}

.sc-row-status,
.sc-row-actions {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 8px;
}

/* A status cell never breaks over two lines; the pill sits without the shared.css margin (0,3,0 beats 0,2,0) so it centres.
   display: flex (not inline-flex) drops the line-box strut, so the pill sits on the cell's vertical middle (40n PILL_MID). */
.sc-list .sc-row-status {
    display: flex;
    font-size: 13px;
    color: var(--sc-color-text-subtle);
    white-space: nowrap;
    transition: color var(--sc-dur-fast);
}

.sc-list :is(a.sc-row, .sc-row[data-sidebar-toggle]):is(:hover, :focus-visible) .sc-row-status {
    color: var(--sc-color-text-muted);
}

.sc-list .sc-row-status .siteclick-status {
    margin: 0;
}

/* Small table (tile 'Sites in één oogopslag', health/updates): 32 px rows, the first 10 with a fade;
   expanding is the tile's (.sc-tile-table.is-expanded, UIX-5). */
.sc-table-mini {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.sc-table-mini th,
.sc-table-mini td {
    height: 32px;
    max-width: 240px;
    padding: 0 8px;
    overflow: hidden;
    border-bottom: thin solid var(--sc-color-hairline);
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sc-table-mini th {
    color: var(--sc-color-text-muted);
    font-weight: var(--sc-font-weight-title);
}

.sc-tile-table .sc-table-mini tbody tr:nth-child(n+11) {
    display: none;
}

.sc-table-mini.is-fade {
    mask-image: linear-gradient(to bottom, var(--sc-color-text) calc(100% - 64px), transparent);
}

/* r.110: a wide table scrolls inside its tile with the edge fades of the tab strips (sc-tabs.js).
   When the body is the list root itself, only its .sc-list-body scrolls (the bar stays put). */
.sc-tile-table-body:not(.sc-list),
.sc-tile-table-body.sc-list > .sc-list-body {
    overflow-x: auto;
}

.sc-tile-table-body .sc-table-mini {
    min-width: 100%;
    width: max-content;
}

.sc-tile-table-body:not(.sc-list)[data-sc-fade="l"],
.sc-tile-table-body.sc-list > .sc-list-body[data-sc-fade="l"] {
    mask-image: linear-gradient(to right, transparent, var(--sc-color-black) 24px);
}

.sc-tile-table-body:not(.sc-list)[data-sc-fade="r"],
.sc-tile-table-body.sc-list > .sc-list-body[data-sc-fade="r"] {
    mask-image: linear-gradient(to left, transparent, var(--sc-color-black) 24px);
}

.sc-tile-table-body:not(.sc-list)[data-sc-fade="l r"],
.sc-tile-table-body.sc-list > .sc-list-body[data-sc-fade="l r"] {
    mask-image: linear-gradient(to right, transparent, var(--sc-color-black) 24px, var(--sc-color-black) calc(100% - 24px), transparent);
}

.sc-tile-table.is-expanded .sc-table-mini tbody tr {
    display: table-row;
}

.sc-tile-table.is-expanded .sc-table-mini.is-fade {
    mask-image: none;
}

/* ≤ 767: row 1 = count + search; Filter, views and actions in a glass sheet behind 'Opties';
   the prefilters always on their own scroll line. */
@media (max-width: 767px) {
    :is(.sc-list .sc-row--compact, .sc-list[data-sc-list-view="compact"] .sc-row:not(.sc-row--table)) > * {
        height: 36px;
    }

    .sc-list-bar {
        flex-wrap: wrap;
    }

    .sc-list-bar > .sc-list-pre {
        order: 9;
        flex: 1 1 100%;
    }

    .sc-list-tools {
        position: relative;
        flex: 1 1 100%;
        flex-wrap: nowrap;
    }

    .sc-list-search {
        flex: 1 1 auto;
        width: 100%;
    }

    .sc-list-bar .sc-list-overflow {
        display: inline-flex;
        flex: none;
    }

    .sc-list-sheet {
        position: absolute;
        top: calc(100% + 4px);
        right: 0;
        z-index: 10;
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 8px;
        border: thin solid var(--sc-color-hairline);
        border-radius: var(--sc-radius-md);
        background: var(--sc-glass-bg-strong);
        -webkit-backdrop-filter: var(--sc-glass-blur);
        backdrop-filter: var(--sc-glass-blur);
        box-shadow: var(--sc-shadow-pop);
    }

    .sc-list-sheet[data-open] {
        display: flex;
    }

    /* Run 38a (LST-1, P10a): with a search or prefilters row 1 is count + 'Filter' (+ help) until the button
       is clicked or the server opened it for an active filter (data-sc-mopen); then the layout above. */
    .sc-list-bar .sc-list-mfilter {
        display: inline-flex;
        flex: none;
        margin-left: auto;
    }

    .sc-list-bar[data-sc-mopen] .sc-list-mfilter,
    .sc-list-bar:has(> .sc-list-mfilter):not([data-sc-mopen]) > :is(.sc-list-pre, .sc-list-fields),
    .sc-list-bar:has(> .sc-list-mfilter):not([data-sc-mopen]) > .sc-list-tools > :is(.sc-list-search, .sc-list-overflow),
    .sc-list-bar:has(> .sc-list-mfilter):not([data-sc-mopen]) + .sc-list-row2 {
        display: none;
    }

    .sc-list-bar:has(> .sc-list-mfilter):not([data-sc-mopen]) > .sc-list-tools {
        flex: none;
    }

    .sc-row-meta,
    .sc-list .sc-row > .sc-row-meta {
        display: none;
    }
}