/* ==========================================================================
   Static card, scrolling list (2026-06-17)
   The directory card is pinned to the viewport — the window never scrolls.
   Inside the card:
     • the big "Clients" title + New Client button scroll AWAY (decorative),
     • the toolbar (search / Status / Sort / count) PINS,
     • the column header row PINS directly under the toolbar,
     • only the rows scroll under them (infinite-scroll loads more),
     • a quiet loading / end-of-list note sits at the bottom of the scroll.
   Scoped to the clients index route via `main.clients-index-page`.

   The whole block is gated on `:has()` support: on a browser without it the
   card would otherwise collapse (height:100% against an unconstrained parent),
   so we degrade gracefully to a normal scrolling page instead.
   ========================================================================== */
@supports selector(:has(*)) {
html:has(main.clients-index-page),
body:has(main.clients-index-page) { height:100%; overflow:hidden; }

.ollira-stage:has(main.clients-index-page) { height:100vh; min-height:0; overflow:hidden; }

main.clients-index-page { min-height:0; height:100%; display:flex; flex-direction:column; overflow:hidden; }

/* the card itself becomes a flex column that fills the main slot */
main.clients-index-page > .cdx {
    flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden;
}

/* the scroll region carries the title, the (sticky) toolbar and the list.
   the right margin is pulled out toward the card edge so the scrollbar hugs
   the edge, while the matching padding keeps the row/toolbar content inset
   symmetrically (no horizontal shift). */
main.clients-index-page .cdx__scroll {
    flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;
    scrollbar-gutter:stable;
    margin:0 -22px 0 0; padding:0 12px 4px 0;
    /* modern slim scrollbar (Firefox) */
    scrollbar-width:thin;
    scrollbar-color:#d4d4da transparent;
}
/* WebKit/Blink: a thin rounded pill that floats clear of the content via a
   transparent border, darkening on hover; the track stays invisible. */
main.clients-index-page .cdx__scroll::-webkit-scrollbar { width:12px; }
main.clients-index-page .cdx__scroll::-webkit-scrollbar-track { background:transparent; }
main.clients-index-page .cdx__scroll::-webkit-scrollbar-thumb {
    background:#d4d4da; border-radius:999px;
    border:4px solid transparent; background-clip:padding-box;
}
main.clients-index-page .cdx__scroll:hover::-webkit-scrollbar-thumb { background:#c5c5cc; background-clip:padding-box; }
main.clients-index-page .cdx__scroll::-webkit-scrollbar-thumb:hover { background:#ababb3; background-clip:padding-box; }

/* title → toolbar breathing room now rides with the (scrolling) title, since
   the toolbar's own top margin is dropped so it can pin flush */
main.clients-index-page .cdx__headrow { margin-bottom:20px; }

/* toolbar pins to the top of the scroll region; opaque so rows pass behind it.
   z-index above the sticky thead (10) and rows. */
main.clients-index-page .cdx__bar {
    position:sticky; top:0; z-index:30; background:#fff;
    margin:0; padding-bottom:16px;
}

/* column header pins directly UNDER the sticky toolbar. --cdx-stuck-top is the
   measured toolbar height (set by JS so it tracks toolbar wrap/resize). */
main.clients-index-page .cdx__table th { top: var(--cdx-stuck-top, 0px); }

/* no drop shadow under the pinned header — Armen finds it ugly. Keep only the
   quiet 1px hairline (the default), no blur, on both pinned toolbar+header. */
main.clients-index-page .cdx__table.is-stuck th { box-shadow:inset 0 -1px 0 #f0f0f2; }

/* infinite-scroll footer — a quiet centered spinner while loading, then a calm
   "All N clients" note at the end. Replaces the old noisy pagination footer;
   lives inside the scroll region, below the rows. */
main.clients-index-page .cdx__infload {
    display:flex; align-items:center; justify-content:center; gap:9px;
    padding:18px 0 10px; color:#a1a1a6; font-size:12.5px; font-weight:500;
}
/* re-assert the UA hide — `display:flex` above beats `[hidden]{display:none}`,
   so without this the JS `infLoad.hidden = true` is a no-op and a stale
   "Loading…" line lingers on single-page / idle states. */
main.clients-index-page .cdx__infload[hidden] { display:none; }
main.clients-index-page .cdx__infspin {
    width:15px; height:15px; border-radius:999px; flex:none;
    border:2px solid #e1e3ea; border-top-color:#a1a1a6; display:none;
    animation:cdxInfSpin .7s linear infinite;
}
main.clients-index-page .cdx__infload.is-loading .cdx__infspin { display:block; }
/* a failed page load parks here as a tappable retry, in the danger tone */
main.clients-index-page .cdx__infload--error { color:#b42318; cursor:pointer; }
main.clients-index-page .cdx__infload--error:hover { color:#9a1d14; }
@keyframes cdxInfSpin { to { transform:rotate(360deg); } }
} /* @supports selector(:has(*)) */