/* Client details beside the clients list (2026-10-08): the whole page scrolls
   instead of the profile pane scrolling inside a window-sized box. The pane
   ends with room for the "Create New Client" dock header, so the last card sits
   just above it when scrolled to the bottom; --dock-clearance is set by the app
   shell (58px when the dock is shown, else 0). The list stays in view beside
   it: sticky under the top bar, window-tall, scrolling on its own. The pane is
   marked data-detail-pane by patches/build-revenue.mjs; the split container and
   the list are its parent and sibling. On phones the list is already hidden
   behind the profile, so only the page scroll and the clearance apply. */
div:has(> div[data-detail-pane]){height:auto!important;align-items:flex-start}
div[data-detail-pane]{overflow:visible!important;min-height:calc(100vh - var(--topbar-h) - var(--space-6));padding-bottom:calc(var(--dock-clearance,0px) + 16px)!important}
div:has(> div[data-detail-pane]) > div:not([data-detail-pane]){position:sticky;top:calc(var(--topbar-h) + var(--space-6));height:calc(100vh - var(--topbar-h) - var(--space-6));align-self:flex-start}
/* The narrow list's toolbar stacks into a column, where the search field's
   flex:1 starts from zero height and shrinks it to its text (20px). Keep it as
   tall as in the full-width list. The label is marked data-client-search by
   patches/build-revenue.mjs. */
label[data-client-search]{min-height:46px}
/* Narrow list: search and Filter & sort on one row, the button as a 46px icon
   on the right with the active-filter count as a badge. The toolbar, button,
   label and badge are marked by patches/build-revenue.mjs. */
[data-client-toolbar=compact]{flex-direction:row!important;align-items:center!important}
[data-client-toolbar=compact] label[data-client-search]{flex:1 1 auto;min-width:0}
[data-client-toolbar=compact] > div:last-child{flex:none}
[data-client-toolbar=compact] [data-client-filter]{flex:none!important;position:relative;width:46px;height:46px;min-width:46px;padding:0!important;gap:0!important;justify-content:center}
[data-client-toolbar=compact] [data-filter-label]{display:none}
[data-filter-badge]{display:none}
[data-client-toolbar=compact] [data-filter-badge]{display:grid;place-items:center;position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:9px;background:var(--accent);color:var(--bg,#0b0b0c);font-size:11px;font-weight:700;line-height:1}
/* Subscription card, top right (2026-10-15): status badge, then Invoice,
   Session history and Delete. Buttons get a 36px hit area (were 27px) with
   space between them; 16px separate the badge from the buttons and Delete
   from the others. Only Delete turns red on hover. Classes from the compiled
   ClientProfile CSS. */
._subTopRight_abgbz_158{gap:var(--space-2);flex-wrap:wrap;justify-content:flex-end}
._subTopRight_abgbz_158 > :not(button){margin-right:var(--space-2)}
._subDel_abgbz_159{align-items:center;justify-content:center;min-width:36px;min-height:36px;padding:8px;cursor:pointer}
._subDel_abgbz_159:not([aria-label="Delete subscription"]):hover{color:var(--text-hi)}
._subDel_abgbz_159[aria-label="Delete subscription"]{margin-left:var(--space-2)}