/* ===================================================================
   np-loop — het kaartenraster van élke library (siteclickLibrary,
   library_shell.php) en van de hubtegels die dezelfde kaart tonen.

   Ronde 18 (f.549-556): de sectiepicker hing op `.siteclick-cards
   [data-card-items="6"]` — zes kolommen, wát de sidebar ook breed was, met
   een container-query-trap die pas onder 1224 px afschaalde. In een paneel
   van 390 px gaf dat zes kaarten van 55 px. Hier komt het aantal kolommen
   uit de CONTAINERBREEDTE: auto-fill vult de rij met kolommen van minstens
   --np-loop-min en verdeelt de rest gelijk. Puur CSS, geen JS-berekening.
   =================================================================== */
.np-loop {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--np-loop-min, 125px), 1fr));
    gap: var(--np-loop-gap, 12px);
    min-width: 0;
    align-content: start;
}

.np-loop-item {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    min-width: 0;
}

.np-loop-item .siteclick-card-title-small {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    line-height: 12px;
}

/* Selectie op de visual zelf (de kaart heeft geen eigen vlak); inset zodat de
   ring binnen de tegel blijft en het raster niet verspringt. */
.np-loop-item.is-active .sc-visual {
    outline: 2px solid var(--sc-color-primary);
    outline-offset: -2px;
    border-radius: 5px;
}

/* Wireframe-terugval in het screen-slot van de visual: het zwevende scherm ís
   de doos (en levert de definiete maat die container-type: size nodig heeft). */
.sc-visual-screen > .section-wireframe-host {
    position: absolute;
    inset: 0;
}

/* Sitekeuze (bron 'Andere sites'): kleinere tegels, dezelfde kaart. De
   organisatiekeuze staat erboven (de dark-sidebar-regels van visual-editor.css
   stylen de select via .siteclick-filter-item), de kruimel terug naar die
   keuze staat boven de secties van de gekozen site. */
.np-loop--sites {
    --np-loop-min: 110px;
}

.sc-lib-sites-org {
    margin-bottom: 12px;
}

.sc-lib-crumb {
    margin-bottom: 8px;
}

/* Source tabs and context chips (Pagina/Header/Footer) are .sc-tabs--sm
   strips (round 28, LST-8); siteclickLibrary hides a strip or a tab with
   [hidden], which the flex rules of sc-tabs.css would beat. */
.sc-lib-chips[hidden],
.sc-lib-toolbar .sc-tab[hidden] {
    display: none;
}

/* Een library die de nevenactie niet aanbiedt zet hem op [hidden]; shared.css'
   `.siteclick-container .button {display:inline-block}` wint anders van het
   attribuut (en de footer-collapse-regel van shared.css rekent er wél op). */
.siteclick-container .sc-lib .siteclick-panel-footer .button[hidden] {
    display: none;
}

/* 'Leeg beginnen' (round 21a, r.99-100): slot `blank` of library_shell.php,
   the first child of the content above the toolbar. The source picker
   (sub/sidebar_source.php) uses the same button in its top host
   [data-sp-blank]. [hidden] needs its own rule because display:flex beats the
   UA rule. */
.sc-lib-blank {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100px;
    margin: 0 0 12px;
    padding: 0 12px;
    border: 1px dashed var(--sc-color-border-strong);
    border-radius: 6px;
    background: transparent;
    color: var(--sc-color-text);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.sc-lib-blank .icon {
    font-size: 20px;
}

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

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

[data-sp-blank] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 1rem 1rem 0;
}

[data-sp-blank]:empty {
    display: none;
}

[data-sp-blank] > .sc-lib-blank {
    margin: 0;
}

/* Library groups (round 21a): one group per site (section library, data
   attribute = site id) or per organization (Site Creator, "org:{id}"). The
   current site comes first with larger cards. Markup comes from the server:
   section.sc-lib-group > header.sc-lib-group-head > img.sc-lib-group-favicon
   + span.sc-lib-group-title + span.sc-lib-group-org > img.sc-lib-group-org-logo
   + span; followed by .np-loop. */
.sc-lib-group {
    margin-bottom: 20px;
}

.sc-lib-group.is-current {
    --np-loop-min: 150px;
}

.sc-lib-group-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-bottom: 10px;
}

.sc-lib-group-favicon,
.sc-lib-group-org-logo {
    flex: none;
    object-fit: cover;
}

.sc-lib-group-favicon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
}

.sc-lib-group-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--sc-color-text);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-lib-group.is-current .sc-lib-group-title {
    font-size: 15px;
}

.sc-lib-group-org {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 50%;
    font-size: 12px;
    color: var(--sc-color-text-muted);
    white-space: nowrap;
}

.sc-lib-group-org > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.sc-lib-group-org-logo {
    width: 16px;
    height: 16px;
    border-radius: 3px;
}

/* Round 24 (r.217): the inner block grows with its grid instead of shrinking to
   the scroller, so its padding lands after the last card row. */
.sc-lib.siteclick-editor-sidebar .siteclick-panel-content-in {
    flex-shrink: 0;
}

/* Round 25b (r.448): tabs Secties · Pagina's per site group. Only a library
   opened with `pages: true` (siteclickLibrary sets .sc-lib-pages on the
   sidebar) shows them; elsewhere the sections pane is the group. */
.siteclick-sidebar-rest:not(.sc-lib-pages) .sc-lib-group-tabs {
    display: none;
}

/* ===================================================================
   Library head (round 28, LST-8, lijsten K5): the compact list bar of
   sc-list.css (count · search · filter dropdowns in one wrapping row, no
   drawer, no chips); here only what a sidebar adds. Colours only via
   tokens; the panel follows the theme.
   =================================================================== */
.sc-lib .sc-lib-toolbar {
    background: var(--sc-color-panel-bg);
}

.sc-lib-bar {
    flex-wrap: wrap;
    --sc-list-bar-gap: 8px;
    padding: 0 0 12px;
    box-shadow: inset 0 -1px 0 var(--sc-search-line);
}

/* The toolbar sticks in the sidebar; the page-bar glass of sc-list.css (a
   library inside .siteclick-content) does not apply here. */
.sc-lib .sc-lib-toolbar .sc-lib-bar {
    position: static;
    background: none;
    backdrop-filter: none;
}

/* The icon and font libraries write the number as a span. */
.sc-lib-bar .sc-list-count span {
    font-weight: var(--sc-font-weight-title);
    color: var(--sc-color-text-strong);
}

/* 40-sidebars.js marks a search with a term as .sc-lib-has-q. */
.sc-lib-has-q .sc-list-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sc-lib-bar .siteclick-filter-item[hidden] {
    display: none !important;
}

.sc-lib-contents {
    display: contents;
}

/* Library bar in a sidebar: row 1 count + search, row 2 every filter dropdown side by side, never wrapped. */
.sc-lib-bar .sc-lib-fields {
    flex: 1 0 100%;
    flex-wrap: nowrap;
    min-width: 0;
}

.sc-lib-fields .sc-list-field,
.sc-lib-fields .sc-dd {
    flex: 1 1 0;
    min-width: 0;
}

.sc-lib-fields .sc-dd-btn {
    width: 100%;
    max-width: none;
}

.sc-lib-fields .sc-dd-label {
    flex: 1 1 auto;
    min-width: 0;
}

/* =========================================================================
   Design library loop (round 18b; run 28c KRT-1): a design object is the hub
   card (<x-ds.card>, ds-card.css, linked next to this file by
   library_shell.php), in the hub grid (DesignObjectPreview::gridClass()).
   The grid keeps .np-loop as the paging hook of 49-library.js, so the card
   grid restates its columns here; the own site is no larger (r.253). The
   per-object CSS sits in the two <style> hosts of the sidebar, never visible.
   The .np-tile-art tile stays for the collection library and the 'none' tile
   of the delete sidebar.
   ========================================================================= */
.sc-lib style[data-dl-css],
.sc-lib style[data-dl-fonts] {
    display: none;
}

.np-loop.ds-cards { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.np-loop.ds-cards-colors { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.np-loop.ds-cards-stack { grid-template-columns: minmax(0, 1fr); }

.sc-dl-item {
    position: relative;
}

.sc-dl-item.ds-card.is-active {
    border-color: var(--sc-color-primary);
    box-shadow: 0 0 0 1px var(--sc-color-primary);
}

.sc-dl-item .np-tile-art {
    /* Self-contained: np-cardgrid.css does not load outside the editor. */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    text-align: center;
    height: 80px;
    padding: 8px;
    border: 1px solid var(--sc-color-border);
    border-radius: 8px;
    background: var(--sc-color-sample-dark);
    color: var(--sc-color-sample-light);
}

/* The caption follows the theme of the panel. */
.sc-dl-item .np-tile-art .siteclick-text-6,
.sc-lib .np-loop-item .siteclick-card-title-small {
    color: var(--sc-color-text);
}