/* =====================================================================
   FSS UI - base + primitives (admin en portaal)
   ---------------------------------------------------------------------
   Poort van `app/admin/styles/{base,primitives}.css` uit de Next-app (branch
   feature/redesign-v3), beperkt tot de primitives van Task 0.7. Klassennamen
   zijn bewust gelijk gebleven (`admin-*`, `fss-*`), zodat de module-CSS van
   latere taken 1-op-1 meekomt. Tokens staan in `tokens.css`.

   Gates (tests/Unit/UiCssGatesTest.php): geen kleurverloop (behalve shimmer),
   geen glow/backdrop-filter/uppercase, lime nooit als tekst-, icoon- of
   lijnkleur, geen zichtbare randkleur op secundaire knop en statusbadge.
   ===================================================================== */

/* ---------- 1. BASE ---------------------------------------------------- */

body:has(.admin-chrome),
body:has(.portal-chrome),
body:has(.admin-auth-page) {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body:has(.portal-chrome) {
    background: var(--canvas-portal);
}

/* Preflight-lite (Next gebruikt Tailwind's preflight): zonder specificiteit, dus elke eigen regel wint hiervan.
   Links erven kleur, formulierelementen erven het lettertype, lijsten zijn kaal. */
:where(.admin-chrome, .portal-chrome, .admin-auth-page, .fss-teleported) :where(*, ::before, ::after) {
    border: 0 solid;
}

:where(.admin-chrome, .portal-chrome, .admin-auth-page, .fss-teleported) :where(a) {
    color: inherit;
    text-decoration: inherit;
}

:where(.admin-chrome, .portal-chrome, .admin-auth-page, .fss-teleported) :where(button, input, select, textarea, optgroup) {
    margin: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
}

:where(.admin-chrome, .portal-chrome, .admin-auth-page, .fss-teleported) :where(button, [role="button"]) {
    background: transparent;
    cursor: pointer;
}

:where(.admin-chrome, .portal-chrome, .admin-auth-page, .fss-teleported) :where(ul, ol) {
    margin: 0;
    padding: 0;
    list-style: none;
}

:where(.admin-chrome, .portal-chrome, .admin-auth-page, .fss-teleported) :where(table) {
    border-collapse: collapse;
    border-color: inherit;
}

:where(.admin-chrome, .portal-chrome, .admin-auth-page, .fss-teleported) :where(img, video) {
    display: block;
    max-width: 100%;
    vertical-align: middle;
}

/* Icons sit on the text line: inline next to text in a block parent; a flex parent centres them itself. */
:where(.admin-chrome, .portal-chrome, .admin-auth-page, .fss-teleported) :where(svg) {
    display: inline-block;
    max-width: 100%;
    vertical-align: -0.125em;
}

[x-cloak] {
    display: none !important;
}

.admin-chrome,
.portal-chrome,
.admin-auth-page {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--ink);
}

.admin-chrome *,
.portal-chrome *,
.admin-auth-page *,
.fss-teleported,
.fss-teleported * {
    box-sizing: border-box;
}

:is(.admin-chrome, .portal-chrome, .admin-auth-page, .fss-teleported) :is(h1, h2, h3, h4, h5, h6) {
    margin: 0;
    color: var(--ink);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    letter-spacing: -0.01em;
}

:is(.admin-chrome, .portal-chrome, .admin-auth-page) h1 {
    font-size: var(--text-2xl);
    line-height: 32px;
}

:is(.admin-chrome, .portal-chrome, .admin-auth-page, .fss-teleported) h2 {
    font-size: var(--text-xl);
    line-height: 28px;
}

:is(.admin-chrome, .portal-chrome, .admin-auth-page, .fss-teleported) h3 {
    font-size: var(--text-lg);
    line-height: 24px;
}

:is(.admin-chrome, .portal-chrome, .admin-auth-page, .fss-teleported) p {
    margin: 0 0 var(--space-3);
    color: var(--ink-2);
}

:is(.admin-chrome, .portal-chrome, .admin-auth-page, .fss-teleported) p:last-child {
    margin-bottom: 0;
}

:is(.admin-chrome, .portal-chrome) :is(td, th, time, .admin-num) {
    font-variant-numeric: tabular-nums;
}

.fss-display,
:is(.admin-chrome, .portal-chrome, .admin-auth-page) .admin-page-header h1,
:is(.admin-chrome, .portal-chrome) .admin-kpi-value {
    font-family: var(--font-display);
    font-weight: var(--font-semibold);
    letter-spacing: -0.025em;
}

:is(.admin-chrome, .portal-chrome, .admin-auth-page) .admin-page-header h1 {
    font-size: var(--text-h1);
    line-height: var(--lh-h1);
}

.fss-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
}

.fss-mono {
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    line-height: var(--lh-mono);
    letter-spacing: 0;
    font-variant-ligatures: none;
}

.admin-muted {
    color: var(--ink-2);
    font-size: var(--text-sm);
}

.admin-text-link {
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
    text-underline-offset: 2px;
}

.admin-text-link:hover {
    text-decoration-color: currentColor;
}

/* A bare link in running text, a list, a definition or help text looks like `.admin-text-link`, never like plain text.
   Everything but the link itself sits in `:where()`, so the rule weighs (0,0,1) and any app nav CSS wins; nav links are excluded. */
:where(.admin-content, .portal-content, .admin-card-body, .admin-drawer-body, .admin-modal, .fss-teleported) :where(p, li, dd, .admin-field-help):where(:not(nav *, [role="navigation"] *)) a:where(:not([class])) {
    color: var(--ink);
    font-weight: var(--font-medium);
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
    text-underline-offset: 2px;
}

:where(.admin-content, .portal-content, .admin-card-body, .admin-drawer-body, .admin-modal, .fss-teleported) :where(p, li, dd, .admin-field-help):where(:not(nav *, [role="navigation"] *)) a:where(:not([class])):hover {
    text-decoration-color: currentColor;
}

/* Focus: 2px ring met 2px ruimte, alleen bij toetsenbordgebruik (html[data-input]).
   The transparent outline stays invisible next to the ring but becomes visible in forced-colors mode. */
:is(.admin-chrome, .portal-chrome, .admin-auth-page, .fss-teleported) :focus-visible {
    border-radius: var(--radius-sm);
    box-shadow: var(--focus-ring);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

html[data-input="pointer"] :focus-visible:not(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
    box-shadow: none;
    outline: none;
}

@media (forced-colors: active) {
    :is(.admin-chrome, .portal-chrome, .admin-auth-page, .fss-teleported) :is(:focus, :focus-visible) {
        outline-color: CanvasText !important;
    }
}

:is(.admin-chrome, .portal-chrome) ::selection {
    background: var(--accent-soft);
    color: var(--ink);
}

.fss-skip-link {
    position: absolute;
    z-index: var(--z-skip);
    top: var(--space-2);
    left: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: var(--font-medium);
    text-decoration: none;
    transform: translateY(-200%);
}

.fss-skip-link:focus {
    transform: none;
}

.sr-only,
.fss-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    border: 0;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

@media (pointer: coarse) {
    :is(.admin-chrome, .portal-chrome, .admin-auth-page, .fss-teleported) .admin-btn {
        min-height: 44px;
    }

    :is(.admin-chrome, .portal-chrome, .admin-auth-page, .fss-teleported) .admin-btn--icon {
        min-width: 44px;
    }

    :is(.admin-chrome, .portal-chrome, .admin-auth-page, .fss-teleported)
        :is(.admin-input, .admin-field input:where(:not([type="checkbox"]):not([type="radio"])), .admin-field select, .admin-datatable-search input, .admin-datatable-filter select, .admin-datatable-pagesize select) {
        min-height: 44px;
    }
}

/* Minder beweging: systeem en schakelaar (html[data-motion="reduced"]). */
@media (prefers-reduced-motion: reduce) {
    :is(.admin-chrome, .portal-chrome, .admin-auth-page, .fss-teleported),
    :is(.admin-chrome, .portal-chrome, .admin-auth-page, .fss-teleported) * {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 1ms !important;
    }
}

html[data-motion="reduced"] :is(.admin-chrome, .portal-chrome, .admin-auth-page, .fss-teleported),
html[data-motion="reduced"] :is(.admin-chrome, .portal-chrome, .admin-auth-page, .fss-teleported) * {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
}

/* ---------- 2. KNOPPEN ------------------------------------------------- */

.admin-btn {
    position: relative;
    display: inline-flex;
    height: var(--control-md);
    flex: none;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    line-height: 20px;
    text-decoration: none;
    /* v2: hover/pressed zijn "instant" (80ms); de pressed-schaal is de enige transform. */
    transition:
        background var(--dur-instant) var(--ease-out),
        border-color var(--dur-instant) var(--ease-out),
        color var(--dur-instant) var(--ease-out),
        transform var(--dur-instant) var(--ease-out);
    white-space: nowrap;
}

.admin-btn > svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.admin-btn--sm {
    height: var(--control-sm);
    padding: 0 var(--space-2);
    font-size: var(--text-sm);
}

.admin-btn--lg {
    height: var(--control-lg);
    padding: 0 var(--space-4);
}

.admin-btn--block {
    width: 100%;
}

/* Large full-width button (login, onboarding): fills the column, content centred. */
.admin-btn--lg.admin-btn--block {
    display: flex;
    width: 100%;
}

.admin-btn--icon {
    width: var(--control-sm);
    height: var(--control-sm);
    padding: 0;
}

.admin-btn--icon.admin-btn--md {
    width: var(--control-md);
    height: var(--control-md);
}

.admin-btn--icon.admin-btn--lg {
    width: var(--control-lg);
    height: var(--control-lg);
}

.admin-btn--primary {
    /* v4 (design-v4): de primaire actie is inkt, zoals bij ElevenLabs en shadcn. Lime is een klein merkaccent
       (actieve markering, logo, grafiekpunt), geen knopvlak meer; gate `primary-ink` bewaakt dat. */
    background: var(--ink);
    color: #fff;
    box-shadow: var(--shadow-1);
}

.admin-btn--primary:hover:not(:disabled) {
    background: #27272a;
}

.admin-btn--primary:active:not(:disabled) {
    background: #3f3f46;
    transform: scale(0.98);
}

.admin-btn--secondary {
    /* Grey control fill, no shadow, no visible border: visible on a white card and on paper, and the same surface as the
       datatable "more filters"/"columns" buttons and the chips. Only inputs carry an outline. */
    border-color: transparent;
    background: var(--control-fill);
    box-shadow: none;
    color: var(--ink);
}

.admin-btn--secondary:hover:not(:disabled) {
    background: var(--control-fill-hover);
}

.admin-btn--secondary:active:not(:disabled) {
    background: var(--control-fill-active);
}

/* Icon-only secondary keeps the square icon size of its control size (no own colour). */
.admin-btn--secondary.admin-btn--icon {
    padding: 0;
}

.admin-btn--ghost {
    color: var(--ink-2);
}

.admin-btn--ghost:hover:not(:disabled) {
    background: var(--control-fill);
    color: var(--ink);
}

.admin-btn--ghost:active:not(:disabled) {
    background: var(--control-fill-hover);
}

/* Destructive icon action in a row: ghost at rest, danger tint on hover and keyboard focus.
   Must stay AFTER the ghost hover/active rules: same weight, so the order decides. */
.admin-btn--icon-danger:is(:hover, :focus-visible):not(:disabled) {
    background: var(--danger-bg);
    color: var(--danger);
}

.admin-btn--icon-danger:active:not(:disabled) {
    background: var(--danger-bg);
    color: var(--danger);
}

.admin-btn--danger {
    background: var(--danger-bg);
    color: var(--danger);
}

.admin-btn--danger:hover:not(:disabled) {
    background: color-mix(in srgb, var(--danger-bg), var(--danger) 8%);
}

.admin-btn--danger-solid {
    background: var(--danger-solid);
    color: #fff;
}

.admin-btn--danger-solid:hover:not(:disabled) {
    background: color-mix(in srgb, var(--danger-solid), #000 10%);
}

.admin-btn--link {
    height: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
    text-underline-offset: 3px;
}

.admin-btn--link:hover:not(:disabled) {
    text-decoration-color: currentColor;
}

/* Uitgeschakeld: eigen tokens, nooit opacity (dan zakt het contrast door). */
.admin-btn:disabled:not([data-loading]),
.admin-btn[aria-disabled="true"]:not([data-loading]) {
    background: var(--surface-2);
    color: var(--ink-disabled);
    cursor: not-allowed;
}

.admin-btn[data-loading="true"] {
    cursor: progress;
}

.admin-btn-spinner {
    display: inline-flex;
    flex: none;
    animation: admin-btn-spin 0.8s linear infinite;
}

@keyframes admin-btn-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes admin-skeleton-shimmer {
    from {
        background-position: 100% 50%;
    }

    to {
        background-position: 0 50%;
    }
}

@keyframes fss-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- 3. VELDEN -------------------------------------------------- */

.admin-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5);
}

.admin-field-label {
    color: var(--ink-2);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    line-height: 16px;
}

.admin-field-help {
    color: var(--ink-3);
    font-size: var(--text-xs);
    line-height: 16px;
}

/* Help text right after a control (outside an `x-fss::field`, which uses its own gap): 6px below the control. */
.admin-form :is(.admin-input, input:not([type="hidden"]), select, textarea, .admin-switch-field, .admin-segmented, .fss-combobox) + .admin-field-help {
    margin-top: var(--space-1-5);
}

/* Directly in the form the form gap is known, so the help text is pulled up to the same 6px. */
.admin-form > :is(.admin-input, input:not([type="hidden"]), select, textarea, .admin-switch-field, .admin-segmented, .fss-combobox) + .admin-field-help {
    margin-top: calc(var(--space-1-5) - var(--field-gap));
}

/* Inside a field or a stacked bare label the 6px already comes from the flex gap. */
:is(.admin-field, .admin-form > label:not([class]), .admin-field-grid > label:not([class])) > :is(.admin-input, input:not([type="hidden"]), select, textarea, .admin-switch-field, .admin-segmented, .fss-combobox) + .admin-field-help {
    margin-top: 0;
}

.admin-field-error {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1);
}

.admin-field :is(input, select, textarea):where(:not([type="checkbox"]):not([type="radio"])),
.admin-input,
.admin-textarea,
select.admin-select {
    width: 100%;
    min-height: var(--input-h);
    padding: 0 var(--space-3);
    border: 1px solid var(--line-field);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font-family: inherit;
    font-size: var(--text-base);
    line-height: 20px;
}

.admin-field textarea,
.admin-textarea {
    min-height: 96px;
    padding: var(--space-2) var(--space-3);
    resize: vertical;
}

:is(.admin-textarea, textarea).admin-textarea--compact {
    min-height: 64px;
}

:is(.admin-textarea, textarea).admin-textarea--tall {
    min-height: 160px;
}

.admin-field :is(input, select, textarea):where(:not([type="checkbox"]):not([type="radio"])):focus,
.admin-input:focus,
.admin-textarea:focus,
select.admin-select:focus {
    border-color: var(--selection-ink);
    box-shadow: var(--focus-ring);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.admin-field :is(input, select, textarea)[aria-invalid="true"],
.admin-field[data-invalid] :is(input, select, textarea) {
    border-color: var(--danger);
}

.admin-field :is(input, select, textarea):where(:disabled) {
    background: var(--surface-2);
    color: var(--ink-disabled);
}

.admin-check {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--text-base);
}

.admin-check input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--selection-ink);
}

.admin-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

.admin-field-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* ---------- 4. KAART --------------------------------------------------- */

.admin-card {
    padding: var(--card-pad);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-1);
}

.admin-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.admin-card-head h2,
.admin-card-head h3 {
    font-size: var(--text-md);
    line-height: 24px;
}

.admin-stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack);
}

.admin-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

/* ---------- 5. STATUSBADGE --------------------------------------------- */

.admin-status-badge {
    display: inline-flex;
    height: var(--badge-h);
    align-items: center;
    gap: var(--space-1-5);
    padding: 0 var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    line-height: 16px;
    white-space: nowrap;
}

.admin-status-badge[data-tone="success"] {
    background: var(--success-bg);
    color: var(--success);
}

.admin-status-badge[data-tone="warning"] {
    background: var(--warning-bg);
    color: var(--warning);
}

.admin-status-badge[data-tone="danger"] {
    background: var(--danger-bg);
    color: var(--danger);
}

.admin-status-badge[data-tone="info"] {
    background: var(--info-bg);
    color: var(--info);
}

/* One badge size everywhere: `data-size="sm"` is accepted for old markup but renders like every other badge. */

.admin-status-badge-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: var(--radius-full);
    background: currentColor;
}

/* ---------- 6. PAGINAKOP ----------------------------------------------- */

.admin-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    padding: 0;
    border-bottom: 0;
    margin: 0;
    background: none;
}

.admin-page-header-copy {
    display: flex;
    min-width: 0;
    flex: 1 1 320px;
    flex-direction: column;
    gap: var(--space-1);
}

.admin-page-header-kicker {
    color: var(--ink-3);
    font-size: var(--text-xs);
    line-height: 16px;
}

.admin-page-header-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-3);
}

.admin-page-header h1 {
    /* Lettertype, maat (28/32) en gewicht staan in base.css (display, zwaarder gescoped).
       Een lange titel wrapt op twee regels en wordt daarna afgekapt (de volledige titel staat in
       het `title`-attribuut); nooit `…` op één regel. */
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    line-height: 32px;
    overflow-wrap: anywhere;
}

.admin-page-header-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.admin-page-header-desc {
    margin: 0;
    color: var(--ink-2);
    font-size: var(--text-base);
    line-height: 20px;
}

.admin-page-header-actions {
    display: flex;
    flex: 0 1 auto;
    min-height: 32px;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.admin-page-header-primary {
    display: contents;
}

.admin-page-header-next {
    display: grid;
    align-items: baseline;
    gap: var(--space-1) var(--space-3);
    grid-template-columns: 16px minmax(0, auto) auto;
    justify-content: start;
    margin-top: var(--space-2);
    color: var(--ink);
    font-size: var(--text-base);
    line-height: 20px;
}

.admin-page-header-next-node {
    width: 8px;
    height: 8px;
    flex: none;
    align-self: start;
    margin: 6px 4px 0;
    border-radius: var(--radius-full);
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft), 0 0 0 5px var(--selection-ink);
}

.admin-page-header-next-label {
    color: var(--ink-2);
}

.admin-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    margin-bottom: var(--space-1);
    color: var(--ink-3);
    font-size: var(--text-xs);
    line-height: 16px;
}

.admin-breadcrumbs a {
    color: var(--ink-2);
    text-decoration: none;
}

.admin-breadcrumbs a:hover {
    color: var(--ink);
    text-decoration: underline;
}

/* Back link: a quiet text link with an arrow, no pill and no border. The gap below it separates it from the title. */
.admin-back-link {
    display: inline-flex;
    width: fit-content;
    min-height: 24px;
    align-items: center;
    gap: var(--space-1-5);
    margin-bottom: var(--space-3);
    padding: 0;
    border: 0;
    border-radius: var(--radius-xs);
    background: none;
    box-shadow: none;
    color: var(--ink-3);
    font-size: var(--text-sm, 13px);
    font-weight: var(--font-medium);
    line-height: 20px;
    text-decoration: none;
    transition: color var(--dur-fast, 120ms) var(--ease-out, ease-out);
}

.admin-back-link > svg {
    flex: none;
    transition: transform var(--dur-fast, 120ms) var(--ease-out, ease-out);
}

.admin-back-link:hover {
    background: none;
    color: var(--ink);
}

.admin-back-link:hover > svg {
    transform: translateX(-2px);
}

.admin-back-link:focus-visible {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    :is(.admin-chrome, .portal-chrome) .admin-page-header h1 {
        font-size: 24px;
        line-height: 28px;
    }

    .admin-page-header-next {
        grid-template-columns: 16px minmax(0, 1fr);
    }
}

/* Onder 1024 px draagt de vaste actiebalk de primaire actie; de knop in de kop verdwijnt. */
@media (max-width: 1023px) {
    .admin-page-header-primary[data-mobile-bar] {
        display: none;
    }
}

/* ---------- 7. PAGETABS (detailtabs, onderstreept) --------------------- */

.admin-tabs2 {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: var(--space-1);
    border-bottom: 1px solid var(--line);
    margin: 0;
}

/* The ONE gap between a page tab bar and the content below it. Page shells are flex columns with `gap: var(--stack)`, so the bar adds
   only what is missing to reach --tabs-gap (nothing by default). Change the rhythm here (or set --tabs-gap on a shell), never with a
   margin on the next block or on a wrapper around the bar. */
.admin-tabs2[data-variant="page"] {
    margin-bottom: calc(var(--tabs-gap) - var(--stack));
}

.admin-tabs2-scroll {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    gap: var(--space-1);
    /* The active-tab line sits 1px below the bar (on the border). With overflow-x: auto that 1px made the bar scroll vertically
       right after load; the extra pixel of padding over the border holds it, and overflow-y: hidden blocks the vertical scroll. */
    padding-bottom: 1px;
    margin-bottom: -1px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.admin-tabs2-scroll::-webkit-scrollbar {
    display: none;
}

.admin-tab2 {
    position: relative;
    display: inline-flex;
    height: 44px;
    flex: none;
    align-items: center;
    padding: 0 var(--space-3);
    color: var(--ink-3);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    gap: var(--space-2);
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.admin-tab2:hover {
    /* v4 (ElevenLabs): tabs zijn tekst met een inktstreep; hover kleurt alleen de tekst. */
    color: var(--ink);
}

.admin-tab2[aria-current="page"],
.admin-tab2[aria-selected="true"] {
    color: var(--ink);
}

.admin-tab2::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--selection-ink);
    content: "";
    opacity: 0;
    transform: scaleX(0.6);
    transition:
        opacity var(--dur-fast) var(--ease-out),
        transform var(--dur-base) var(--ease-out);
}

.admin-tab2[aria-current="page"]::after,
.admin-tab2[aria-selected="true"]::after {
    opacity: 1;
    transform: none;
}

.admin-tab2-count {
    display: inline-flex;
    min-width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-1-5);
    border-radius: var(--radius-full);
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-medium);
}

/* Scroll-hint: fade-randen die verschijnen waar de balk verder scrolt. */
.admin-tabs2::before,
.admin-tabs2-fade-end {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    width: 24px;
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease-out);
}

.admin-tabs2::before {
    left: 0;
    background: linear-gradient(to right, var(--tabs-fade-bg, var(--canvas)), transparent);
    content: "";
    opacity: 0;
}

.admin-tabs2-fade-end {
    right: 0;
    background: linear-gradient(to left, var(--tabs-fade-bg, var(--canvas)), transparent);
    opacity: 0;
}

.admin-tabs2[data-can-scroll-start]::before,
.admin-tabs2[data-can-scroll-end] .admin-tabs2-fade-end {
    opacity: 1;
}

/* Keyboard focus on a tab: an inset ring, because the scroll box clips everything outside the tab. */
.admin-tab2:focus-visible {
    box-shadow: inset 0 0 0 2px var(--focus-ring-color);
    outline: 2px solid transparent;
    outline-offset: -2px;
}

/* Level 2 (`x-fss::page-tabs level="2"`): sub-sections as a small segmented control under the level-1 line. Grey track
   (--control-fill), the chosen segment white with --shadow-1, left aligned, 32 px high (28 compact), no line. Same links,
   param and scroll script as level 1; on a phone the track scrolls with the same fades (in the track colour). */
.admin-tabs2[data-level="2"] {
    --tabs-l2-h: 32px;
    --tabs-fade-bg: var(--control-fill);
    width: fit-content;
    max-width: 100%;
    border-bottom: 0;
    border-radius: var(--radius-sm);
}

[data-density="compact"] .admin-tabs2[data-level="2"],
.admin-tabs2[data-level="2"][data-density="compact"] {
    --tabs-l2-h: 28px;
}

.admin-tabs2[data-level="2"] .admin-tabs2-scroll {
    height: var(--tabs-l2-h);
    align-items: stretch;
    padding: 2px;
    margin: 0;
    border-radius: var(--radius-sm);
    background: var(--control-fill);
    gap: 2px;
}

.admin-tabs2[data-level="2"] .admin-tab2 {
    height: auto;
    padding: 0 var(--space-3);
    border-radius: calc(var(--radius-sm) - 2px);
    color: var(--ink-2);
    font-size: var(--text-sm, 13px);
    gap: 6px;
    line-height: 18px;
}

.admin-tabs2[data-level="2"] .admin-tab2::after {
    display: none;
}

.admin-tabs2[data-level="2"] .admin-tab2:hover {
    background: var(--control-fill-hover);
    color: var(--ink);
}

.admin-tabs2[data-level="2"] .admin-tab2:is([aria-current="page"], [aria-selected="true"]) {
    background: var(--surface);
    box-shadow: var(--shadow-1);
    color: var(--ink);
}

/* Above the chosen-segment shadow; scoped to keyboard input so a mouse click keeps the plain chosen look. */
html:not([data-input="pointer"]) .admin-tabs2[data-level="2"] .admin-tab2:focus-visible {
    box-shadow: inset 0 0 0 2px var(--focus-ring-color);
}

.admin-tabs2[data-level="2"] .admin-tab2-count {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--control-fill-active);
    font-size: 11px;
}

.admin-tabs2[data-level="2"] .admin-tab2[aria-current="page"] .admin-tab2-count {
    background: var(--surface-2);
}

.admin-tabs2[data-level="2"]::before,
.admin-tabs2[data-level="2"] .admin-tabs2-fade-end {
    top: 2px;
    bottom: 2px;
}

.admin-tabs2[data-level="2"]::before {
    left: 2px;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.admin-tabs2[data-level="2"] .admin-tabs2-fade-end {
    right: 2px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

@media (forced-colors: active) {
    .admin-tabs2[data-level="2"] .admin-tabs2-scroll {
        border: 1px solid CanvasText;
    }

    .admin-tab2:is([aria-current="page"], [aria-selected="true"]) {
        forced-color-adjust: none;
        background: Highlight;
        color: HighlightText;
    }

    .admin-tab2:focus-visible {
        outline-color: CanvasText;
    }
}

/* ---------- 8. KPI ----------------------------------------------------- */

.admin-kpi-grid {
    display: grid;
    gap: var(--stack-cards);
    grid-template-columns: repeat(var(--kpi-cols, 4), minmax(0, 1fr));
}

@media (max-width: 1100px) {
    .admin-kpi-grid {
        grid-template-columns: repeat(min(var(--kpi-cols, 4), 3), minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .admin-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Phone: two columns, and in a grid with `data-kpi-more` tiles 5+ stay hidden until the grid has `data-expanded`. */
@media (max-width: 640px) {
    .admin-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-kpi-grid[data-kpi-more]:not([data-expanded]) > .admin-kpi:nth-child(n + 5) {
        display: none;
    }
}

.admin-kpi {
    position: relative;
    display: flex;
    min-height: 112px;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    background: var(--surface);
    /* v4: zelfde kaartvlak als `.admin-card` (hairline + shadow-xs). */
    box-shadow: var(--shadow-1);
    color: var(--ink);
    text-decoration: none;
    /* De tegel is een query-container: de waarde krimpt met de tegel mee (zie `.admin-kpi-value`).
       KpiTile staat altijd in een grid, dus zijn breedte komt van buiten — vereist voor inline-size. */
    container-type: inline-size;
}

html[data-density="compact"] .admin-kpi {
    min-height: 96px;
}

a.admin-kpi {
    transition:
        background-color var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--ease-out);
}

a.admin-kpi:hover {
    border-color: var(--line-field);
    background: color-mix(in srgb, var(--surface), var(--surface-2) 40%);
}

.admin-kpi-label {
    min-width: 0;
    flex: 1 1 auto;
    color: var(--ink-2);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    line-height: 18px;
}

.admin-kpi-value {
    flex: 1 0 100%;
    min-width: 0;
    overflow: hidden;
    color: var(--ink);
    margin-top: var(--space-1);
    font-size: min(clamp(22px, 2.4vw + 8px, 30px), max(16px, 14cqi));
    font-feature-settings: "tnum" 1;
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-semibold);
    letter-spacing: -0.01em;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-kpi-hint {
    flex: 1 0 100%;
    margin-top: var(--space-1);
    color: var(--ink-3);
    font-size: var(--text-xs);
    line-height: 16px;
}

.admin-kpi[data-tone="danger"] .admin-kpi-hint {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    color: var(--danger);
}

.admin-kpi[data-tone="warning"] .admin-kpi-hint {
    color: var(--warning);
}

.admin-kpi[data-tone="success"] .admin-kpi-hint {
    color: var(--success);
}

/* ---------- 9. BANNER -------------------------------------------------- */

.admin-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid transparent; /* g1-no-outlines: alleen vlak */
    border-radius: var(--radius-md);
    background: var(--info-bg);
    color: var(--ink);
    font-size: var(--text-base);
    line-height: 20px;
}

.admin-banner[data-tone="success"] {
    background: var(--success-bg);
}

.admin-banner[data-tone="warning"] {
    background: var(--warning-bg);
}

.admin-banner[data-tone="danger"] {
    background: var(--danger-bg);
}

.admin-banner[data-tone="neutral"] {
    background: var(--surface-2);
}

.admin-banner-mark {
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: var(--radius-full);
    background: var(--info);
}

.admin-banner[data-tone="success"] .admin-banner-mark {
    background: var(--success);
}

.admin-banner[data-tone="warning"] .admin-banner-mark {
    background: var(--warning);
}

.admin-banner[data-tone="danger"] .admin-banner-mark {
    background: var(--danger);
}

.admin-banner-copy {
    min-width: 0;
    flex: 1 1 240px;
}

.admin-banner-copy strong {
    display: block;
    font-weight: var(--font-semibold);
}

.admin-banner-copy p {
    margin: 0;
    color: var(--ink-2);
}

.admin-banner-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-left: var(--space-4);
}

/* Icon markup (Next `Banner`): a tone icon, a body with the title, the actions and an optional close button. */
.admin-banner {
    animation: admin-banner-in 200ms var(--ease-out) backwards;
}

.admin-banner-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: var(--ink-2);
}

.admin-banner-icon > svg {
    width: 20px;
    height: 20px;
}

.admin-banner[data-tone="info"] .admin-banner-icon {
    color: var(--info);
}

.admin-banner[data-tone="warning"] .admin-banner-icon {
    color: var(--warning);
}

.admin-banner[data-tone="danger"] .admin-banner-icon {
    color: var(--danger);
}

.admin-banner[data-tone="success"] .admin-banner-icon {
    color: var(--success);
}

.admin-banner-body {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-1);
}

.admin-banner-body > p {
    margin: 0;
    color: var(--ink);
}

.admin-banner-title {
    display: block;
    font-weight: var(--font-semibold);
}

.admin-banner-close {
    flex: 0 0 auto;
    border: 0;
    background: none;
    color: var(--ink-2);
    cursor: pointer;
}

@keyframes admin-banner-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

/* Inline: rail links, voor binnen een kaart of drawer. */
.admin-banner[data-variant="inline"] {
    padding: var(--space-1) 0 var(--space-1) var(--space-3);
    border: 0;
    border-left: 1px solid var(--info);
    border-radius: 0;
    background: none;
}

.admin-banner[data-variant="inline"][data-tone="success"] {
    border-left-color: var(--success);
}

.admin-banner[data-variant="inline"][data-tone="warning"] {
    border-left-color: var(--warning);
}

.admin-banner[data-variant="inline"][data-tone="danger"] {
    border-left-color: var(--danger);
}

/* ---------- 10. LEGE STAAT --------------------------------------------- */

.admin-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-12) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink-2);
    text-align: center;
}

.admin-empty-state[data-compact] {
    min-height: 0;
    padding: var(--space-5) var(--space-4);
}

.admin-empty-state > strong {
    font-size: 15px;
    font-weight: var(--font-semibold);
    line-height: 22px;
}

.admin-empty-state > p {
    max-width: 44ch;
    margin: 0;
    color: var(--ink-2);
}

.admin-empty-state-mark {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--surface-2);
}

.admin-empty-state-mark::before {
    width: 8px;
    height: 8px;
    border: 2px solid var(--line-strong);
    border-radius: var(--radius-full);
    content: "";
}

.admin-empty-state-icon {
    /* Next EmptyState with an icon: a small white tile with a hairline and shadow-1. */
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    color: var(--ink-2);
}

.admin-empty-state[data-kind="done"] .admin-empty-state-mark {
    background: var(--accent-soft);
}

.admin-empty-state[data-kind="done"] .admin-empty-state-mark::before {
    border-color: var(--selection-ink);
    background: var(--accent);
}

.admin-empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--space-2);
    gap: var(--space-2);
}

/* ---------- 11. DE LIJN, TIJDLIJN -------------------------------------- */

.fss-rail-node {
    display: inline-block;
    width: 8px;
    height: 8px;
    flex: none;
    border: 2px solid var(--line-strong);
    border-radius: var(--radius-full);
    background: var(--surface);
}

.fss-rail-node[data-state="done"] {
    border-color: var(--ink);
    background: var(--ink);
}

.fss-rail-node[data-state="now"] {
    border-color: var(--selection-ink);
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.fss-timeline {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    gap: var(--space-4);
    list-style: none;
}

.fss-timeline-filters {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
    gap: var(--space-1-5);
}

.fss-timeline-day {
    margin: var(--space-2) 0 0;
    color: var(--ink-3);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    line-height: 16px;
}

.fss-timeline-item {
    position: relative;
    display: grid;
    padding-left: var(--space-6);
    gap: var(--space-0-5, 2px);
}

.fss-timeline-item::before {
    position: absolute;
    top: 14px;
    bottom: -16px;
    left: 3px;
    width: 3px;
    background: var(--line);
    content: "";
}

.fss-timeline-item:last-child::before {
    display: none;
}

.fss-timeline-item > .fss-rail-node {
    position: absolute;
    top: 4px;
    left: 0;
}

.fss-timeline-title {
    color: var(--ink);
    font-weight: var(--font-medium);
}

.fss-timeline-body {
    color: var(--ink-2);
}

.fss-timeline-meta {
    color: var(--ink-3);
    font-size: var(--text-xs);
}

/* Chips (filters, presets) */
.fss-chip {
    display: inline-flex;
    height: 28px;
    align-items: center;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    background: var(--surface-2);
    color: var(--ink-2);
    cursor: pointer;
    font: inherit;
    font-size: var(--text-small, 13px);
    font-weight: 500;
    line-height: 1;
    transition: background-color var(--dur-instant) var(--ease-out), color var(--dur-instant) var(--ease-out);
}

.fss-chip:hover {
    background: var(--surface-pressed);
    color: var(--ink);
}

.fss-chip[aria-pressed="true"] {
    border-color: var(--selection-ink);
    background: var(--accent-soft);
    color: var(--accent-ink);
}

/* ---------- 12. SKELETON ----------------------------------------------- */

.admin-skeleton {
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-pressed) 37%, var(--surface-2) 63%);
    background-size: 400% 100%;
    animation: admin-skeleton-shimmer 1400ms ease infinite;
}

@media (prefers-reduced-motion: no-preference) {
    .admin-skeleton {
        background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-pressed) 50%, var(--surface-2) 75%);
        background-size: 200% 100%;
        animation: fss-shimmer 1.4s linear infinite;
    }
}

@keyframes fss-shimmer {
    to {
        background-position: -200% 0;
    }
}

/* ---------- 13. DATATABLE ---------------------------------------------- */

.admin-datatable-wrap {
    overflow: visible;
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-1);
}

.fss-datatable {
    container-type: inline-size;
    container-name: fss-datatable;
}

.admin-datatable-controls {
    display: flex;
    flex-direction: column;
    padding: var(--space-4) var(--space-4) var(--space-3);
    gap: var(--space-2);
}

.admin-datatable-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

/* Zoekveld: gevuld vlak zonder rand; bij focus wit met de focusring. */
.admin-datatable-search {
    position: relative;
    min-width: 220px;
    max-width: 360px;
    flex: 1 1 280px;
}

.admin-datatable-search > svg {
    position: absolute;
    top: 50%;
    left: var(--space-3);
    width: 16px;
    height: 16px;
    color: var(--ink-3);
    pointer-events: none;
    transform: translateY(-50%);
}

:is(.admin-datatable-controls, .fss-list-card-head) .admin-datatable-search input {
    width: 100%;
    height: var(--control-md);
    padding: 0 var(--space-8) 0 34px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--control-fill);
    box-shadow: none;
    color: var(--ink);
    font: inherit;
}

:is(.admin-datatable-controls, .fss-list-card-head) .admin-datatable-search input:hover {
    background: var(--control-fill-hover);
}

:is(.admin-datatable-controls, .fss-list-card-head) .admin-datatable-search input:focus {
    border-color: var(--focus-ring-color);
    background: var(--surface);
    box-shadow: var(--focus-ring);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.admin-datatable-search-clear {
    position: absolute;
    top: 50%;
    right: var(--space-1);
    transform: translateY(-50%);
}

/* "/"-hint rechts in het zoekveld (desktop, zolang het veld leeg en niet gefocust is). */
.admin-datatable-search-kbd {
    position: absolute;
    top: 50%;
    right: var(--space-2);
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-xs);
    background: var(--control-fill-hover);
    color: var(--ink-2);
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1;
    pointer-events: none;
    transform: translateY(-50%);
}

.admin-datatable-search:focus-within .admin-datatable-search-kbd {
    display: none;
}

@media (pointer: coarse) {
    .admin-datatable-search-kbd {
        display: none;
    }
}

/* Filter: het label staat in de control ("Klant: Alles"), geen kapjes erboven. */
.admin-datatable-filter {
    position: relative;
    display: inline-flex;
    height: var(--control-md);
    min-width: 0;
    align-items: center;
    gap: var(--space-1-5);
    padding: 0 var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--control-fill);
    color: var(--ink);
    font-size: var(--text-base);
}

.admin-datatable-filter > span {
    color: var(--ink-2);
    font-weight: var(--font-regular);
    line-height: 20px;
    white-space: nowrap;
}

.admin-datatable-filter > span::after {
    content: ":";
}

.admin-datatable-filter:hover {
    background: var(--control-fill-hover);
}

.admin-datatable-filter[data-active] {
    background: var(--control-fill-active);
}

:is(.admin-datatable-controls, .admin-datatable-sheetfilters, .admin-datatable-morefilters) .admin-datatable-filter select {
    width: auto;
    min-width: 0;
    max-width: 220px;
    height: auto;
    padding: 0;
    border: 0;
    background-color: transparent;
    box-shadow: none;
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    font-weight: var(--font-medium);
}

:is(.admin-datatable-controls, .admin-datatable-sheetfilters, .admin-datatable-morefilters) .admin-datatable-filter select:focus {
    box-shadow: none;
    outline: none;
}

html:not([data-input="pointer"]) .admin-datatable-filter:has(select:focus-visible) {
    box-shadow: var(--focus-ring);
}

.admin-datatable-footer .admin-datatable-pagesize select {
    height: var(--control-md);
    padding: 0 var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background-color: var(--control-fill);
    box-shadow: none;
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
}

.admin-datatable-footer .admin-datatable-pagesize select:hover {
    background-color: var(--control-fill-hover);
}

/* Meerkeuzefilter: de trigger deelt de look van het select-filter. */
.admin-datatable-filter--button {
    cursor: pointer;
    font: inherit;
}

.admin-datatable-filter--button > strong {
    color: var(--ink);
    font-weight: var(--font-medium);
    white-space: nowrap;
}

.admin-datatable-filter--button > svg {
    flex: none;
    color: var(--ink-3);
}

/* "Meer filters", "Filters (n)" en "Kolommen": secundaire knop op controlhoogte. */
.admin-datatable-more,
.admin-datatable-columns {
    display: inline-flex;
    height: var(--control-md);
    flex: none;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--control-fill);
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    line-height: 20px;
    white-space: nowrap;
    transition:
        background var(--dur-instant) var(--ease-out),
        border-color var(--dur-instant) var(--ease-out);
}

.admin-datatable-more:hover,
.admin-datatable-columns:hover {
    background: var(--control-fill-hover);
}

.admin-datatable-more:active,
.admin-datatable-columns:active {
    background: var(--control-fill-active);
}

.admin-datatable-more svg,
.admin-datatable-columns svg {
    color: var(--ink-2);
}

.admin-datatable-more[data-active] {
    border-color: var(--selection-ink);
}

/* "Kolommen" staat altijd rechts. */
.admin-datatable-toolbar > .fss-menu-host:last-child .admin-datatable-columns {
    margin-left: auto;
}

.admin-datatable-toolbar > .fss-menu-host:last-child {
    margin-left: auto;
}

.admin-datatable-more-count {
    display: inline-flex;
    min-width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-1-5);
    border-radius: var(--radius-full);
    background: var(--accent-soft);
    color: var(--selection-ink);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-semibold);
}

/* "Filters (n)" bestaat alleen in de kaartlijst-stand (smalle container). */
.admin-datatable-filtersbtn {
    display: none;
}

/* Popover "Meer filters" en de filter-Sheet: de filters staan gestapeld op volle breedte. */
.fss-popover-host {
    position: relative;
    display: inline-flex;
}

/* `.fss-menu` (later in this file) sets `position: absolute`; the double class keeps the panel fixed to the viewport, otherwise
   it stays at its old page position while the page scrolls. */
.fss-menu.fss-popover {
    position: fixed;
    width: 300px;
    padding: var(--space-3);
}

.admin-datatable-morefilters {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.admin-datatable-morefilters-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.admin-datatable-morefilters .admin-datatable-filter,
.admin-datatable-sheetfilters .admin-datatable-filter {
    width: 100%;
    justify-content: space-between;
}

.admin-datatable-morefilters .admin-datatable-filter select,
.admin-datatable-sheetfilters .admin-datatable-filter select {
    min-width: 0;
    max-width: none;
    flex: 1 1 auto;
    text-align: right;
}

.admin-datatable-sheetfilters {
    gap: var(--space-3);
}

.admin-datatable-sheetfilters .admin-datatable-filter {
    min-height: 44px;
}

.admin-datatable-sheetfoot > .admin-btn {
    flex: 1 1 0;
}

.admin-datatable-filter-multi {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-1);
}

.admin-datatable-filter-multi-title {
    color: var(--ink-2);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
}

.admin-datatable-filter-multi-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 calc(-1 * var(--space-2));
}

/* Elke optie is een menurij: vinkje + label, hover-vlak, controlhoogte. */
.admin-datatable-filter-multi-list .admin-checkbox-label {
    display: flex;
    min-height: var(--control-md);
    align-items: center;
    gap: 10px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--ink);
    cursor: pointer;
    font-size: var(--text-sm);
    transition: background-color var(--dur-fast) var(--ease-out);
}

.admin-datatable-filter-multi-list .admin-checkbox-label:hover {
    background: var(--surface-2);
}

.admin-datatable-filter-multi-list .admin-checkbox-label:has(input:checked) {
    font-weight: var(--font-medium);
}

.admin-datatable-filter-multi-list .admin-checkbox-label input {
    width: 16px;
    height: 16px;
    min-height: 0;
    flex: none;
    margin: 0;
    accent-color: var(--selection-ink);
    cursor: pointer;
}

.admin-datatable-more-clear {
    display: inline-flex;
    height: var(--control-sm);
    align-items: center;
    justify-content: center;
    gap: var(--space-1-5);
    padding: 0 var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--control-fill);
    color: var(--ink-2);
    cursor: pointer;
    font: inherit;
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
}

.admin-datatable-more-clear:hover {
    background: var(--control-fill-hover);
    color: var(--ink);
}

/* Actieve filters als verwijderbare chips + "Alles wissen". */
.admin-datatable-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.admin-datatable-chip {
    display: inline-flex;
    height: 28px;
    align-items: center;
    gap: var(--space-1-5);
    padding: 0 var(--space-1-5) 0 var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    background: var(--control-fill);
    color: var(--ink);
    font-size: var(--text-xs);
}

.admin-datatable-chip button {
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-full);
    background: none;
    color: var(--ink-2);
    cursor: pointer;
}

.admin-datatable-chip button:hover {
    background: var(--surface-pressed);
    color: var(--ink);
}

.admin-datatable-chips-clear {
    margin-left: var(--space-1);
}

/* Resultaattelling: 8px onder de controls, 12/16. */
.admin-datatable-count {
    margin: 0;
    padding: 0;
    color: var(--ink-3);
    font-size: var(--text-xs);
    line-height: 16px;
}

.admin-datatable-scroll {
    overflow-x: auto;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.admin-datatable {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-base);
}

.admin-datatable thead th {
    height: var(--thead-h);
    padding: 0 var(--space-3);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--sidebar-bg);
    color: var(--ink-3);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    line-height: 18px;
    text-align: left;
    white-space: nowrap;
}

.admin-datatable th[data-align="right"],
.admin-datatable td[data-align="right"] {
    text-align: right;
}

.admin-datatable th[data-align="center"],
.admin-datatable td[data-align="center"] {
    text-align: center;
}

/* Unit after a value ("/mnd", "GB"): smaller and muted, one small space from the value. */
.fss-unit {
    margin-left: var(--space-1);
    color: var(--ink-3);
    font-size: 0.857em;
}

/* Optional grouped datasets use the same controls in tables and mobile cards. */
.fss-table-group {
    background: var(--surface-2);
    color: var(--ink-2);
    text-align: left;
}

.fss-table-group th {
    padding: var(--space-1) var(--space-3);
    border-bottom: 1px solid var(--line);
    text-align: left;
}

.fss-table-group .fss-table-group-toggle {
    width: 100%;
    min-height: 44px;
    justify-content: flex-start;
    flex-wrap: wrap;
    text-align: left;
    white-space: normal;
}

.fss-table-group-toggle[aria-expanded="false"] > svg {
    transform: rotate(-90deg);
}

.admin-datatable-sort {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    font: inherit;
}

.admin-datatable-sort svg {
    width: 12px;
    height: 12px;
    flex: none;
    color: var(--ink-3);
    opacity: 0.55;
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.admin-datatable-sort:hover svg {
    opacity: 1;
}

th[aria-sort] .admin-datatable-sort {
    color: var(--ink);
}

th[aria-sort] .admin-datatable-sort svg {
    opacity: 1;
}

th[aria-sort="descending"] .admin-datatable-sort svg {
    transform: rotate(180deg);
}

.admin-datatable tbody td {
    height: var(--row-h);
    padding: 0 var(--space-3);
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    line-height: 20px;
    vertical-align: middle;
    transition: background-color var(--dur-fast) var(--ease-out);
}
/* Rijen komen 4 px omhoog en fadet binnen (180 ms), om en om 25 ms later, tot rij 12: gelijk aan DataTable in de Next-admin.
   Alleen een nieuw ingevoegde rij speelt dit af; een Livewire-morph van bestaande rijen doet niets. */
@keyframes fss-row-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}
.admin-datatable tbody tr {
    animation: fss-row-in 180ms var(--ease-out) backwards;
}
.admin-datatable tbody tr:nth-child(n+2) { animation-delay: 25ms; }
.admin-datatable tbody tr:nth-child(n+3) { animation-delay: 50ms; }
.admin-datatable tbody tr:nth-child(n+4) { animation-delay: 75ms; }
.admin-datatable tbody tr:nth-child(n+5) { animation-delay: 100ms; }
.admin-datatable tbody tr:nth-child(n+6) { animation-delay: 125ms; }
.admin-datatable tbody tr:nth-child(n+7) { animation-delay: 150ms; }
.admin-datatable tbody tr:nth-child(n+8) { animation-delay: 175ms; }
.admin-datatable tbody tr:nth-child(n+9) { animation-delay: 200ms; }
.admin-datatable tbody tr:nth-child(n+10) { animation-delay: 225ms; }
.admin-datatable tbody tr:nth-child(n+11) { animation-delay: 250ms; }
.admin-datatable tbody tr:nth-child(n+12) { animation-delay: 275ms; }
.admin-datatable tbody tr:nth-child(n+13) { animation-delay: 300ms; }
.admin-datatable tbody tr:last-child td {
    border-bottom: 0;
}

/* ONE hover for every table row in admin and portal: the shared datatable, the hand-made .admin-data-table and any other
   hand-made table that opts in with .fss-table. Rows that do something (link, drawer, method) also get the pointer; rows without a target stay on the default cursor. */
:is(.admin-datatable, .admin-data-table, .fss-table) tbody tr:not(.fss-table-group):not([data-selected]):hover > :is(td, th),
:is(.admin-datatable, .admin-data-table, .fss-table) tbody tr:has(a.admin-datatable-rowlink:focus-visible, [data-row-primary]:focus-visible) > :is(td, th) {
    background: var(--sidebar-bg);
}

:is(.admin-datatable, .admin-data-table, .fss-table) tbody tr:is([data-href], [data-row-event], [data-row-method]) {
    cursor: pointer;
}

.admin-datatable tbody tr[data-selected] td:first-child {
    box-shadow: inset 3px 0 0 var(--selection-ink);
}

.admin-datatable tbody tr[data-selected] td {
    background: var(--surface-2);
}

.admin-datatable td[data-mono] {
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    font-variant-ligatures: none;
}

.admin-datatable-select {
    width: 40px;
}

a.admin-datatable-rowlink {
    color: inherit;
    text-decoration: none;
}

.admin-datatable-cellmain {
    display: flex;
    flex-direction: column;
    padding: var(--space-1-5) 0;
}

.admin-datatable-cellmain > :first-child {
    font-weight: var(--font-regular, 400);
}

.admin-datatable-cellmain > :not(:first-child) {
    color: var(--ink-3);
    font-size: var(--text-xs);
}

.admin-datatable-footer {
    display: flex;
    min-height: 56px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--line);
    color: var(--ink-2);
    font-size: var(--text-sm);
    gap: var(--space-3);
}

.admin-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
}

.admin-pagination-pages {
    min-width: 56px;
    text-align: center;
}

/* Kaartlijst (mobiel): onder 768 px containerbreedte wordt elke rij een kaart. */
.fss-cardlist {
    display: none;
    flex-direction: column;
    gap: var(--space-2);
    padding: 0;
    margin: 0;
    list-style: none;
}

.fss-card {
    position: relative;
    display: grid;
    min-height: 64px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    column-gap: var(--space-3);
    row-gap: 2px;
    transition: background-color var(--dur-instant) var(--ease-out);
}

.fss-card[data-selected] {
    background: var(--accent-soft);
}

.fss-card-title {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    align-items: baseline;
    gap: var(--space-2);
    overflow: hidden;
    color: var(--ink);
    font-weight: var(--font-medium);
    text-overflow: ellipsis;
}

.fss-card-title a {
    color: inherit;
    text-decoration: none;
}

.fss-card-title a::after {
    position: absolute;
    inset: 0;
    content: "";
}

.fss-card-subtitle {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    color: var(--ink-3);
    font-size: var(--text-sm);
    line-height: 18px;
}

.fss-card-trailing {
    grid-column: 2;
    grid-row: 1;
    font-weight: var(--font-semibold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fss-card-badge {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
}

.fss-card-check {
    position: relative;
    z-index: 1;
}

/* Card with swipe actions (port of SwipeActions): the li is only the border; the content slides over the actions as the front.
   The front must be opaque, otherwise the actions show through. */
.fss-card[data-swipe] {
    display: block;
    padding: 0;
    overflow: hidden;
}

.fss-swipe {
    position: relative;
    overflow: hidden;
    border-radius: inherit;
}

.fss-swipe-actions {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
}

.fss-swipe-action {
    display: flex;
    width: 72px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 0;
    background: var(--surface-2);
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    font-size: var(--text-caption, 12px);
    font-weight: var(--font-medium);
    gap: 4px;
    line-height: 16px;
}

.fss-swipe-action[data-tone="danger"] {
    background: var(--danger-solid);
    color: #fff;
}

.fss-swipe-action[data-tone="accent"] {
    background: var(--accent);
    color: var(--accent-ink);
}

.fss-swipe-action:focus-visible {
    box-shadow: inset 0 0 0 2px var(--selection-ink), inset 0 0 0 4px var(--surface);
    outline: 2px solid transparent;
    outline-offset: -2px;
}

.fss-swipe-front {
    position: relative;
    display: grid;
    min-height: 64px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    column-gap: var(--space-3);
    row-gap: 2px;
    touch-action: pan-y;
}

.fss-card[data-swipe][data-interactive]:hover .fss-swipe-front {
    background: var(--surface-2);
}

.fss-card[data-swipe][data-selected] .fss-swipe-front {
    background: var(--accent-soft);
}

@container fss-datatable (max-width: 767px) {
    .fss-datatable[data-cards] .admin-datatable-scroll {
        display: none;
    }

    /* Kaartlijst: alleen zoeken + "Filters (n)"; kolommen kiezen heeft geen betekenis, en de filters zitten in de Sheet. */
    .fss-datatable[data-cards] .admin-datatable-toolbar > :not(.admin-datatable-search):not(.admin-datatable-filtersbtn) {
        display: none;
    }

    .fss-datatable[data-cards] .admin-datatable-filtersbtn {
        display: inline-flex;
    }

    .fss-datatable[data-cards] .admin-datatable-search {
        min-width: 0;
        max-width: none;
        flex: 1 1 120px;
    }

    .fss-datatable[data-cards] .fss-cardlist {
        display: grid;
    }
}

@media (max-width: 1023px) {
    .fss-datatable[data-cards] .admin-datatable-scroll {
        display: none;
    }

    .fss-datatable[data-cards] .fss-cardlist {
        display: grid;
    }
}

/* Bulkbalk: een zwevende pil onderin het venster. */
.fss-bulkbar {
    position: fixed;
    z-index: var(--z-sticky);
    right: 0;
    bottom: var(--space-6);
    left: 0;
    display: flex;
    max-width: calc(100vw - var(--space-8));
    align-items: center;
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
    border-radius: var(--radius-lg);
    margin: 0 auto;
    background: var(--night);
    box-shadow: var(--shadow-3);
    color: #fff;
    gap: var(--space-3);
    width: fit-content;
}

.fss-bulkbar .admin-btn {
    color: #fff;
}

.fss-bulkbar .admin-btn:hover {
    background: var(--night-2);
}

.fss-bulkbar .admin-btn[data-tone="danger"] {
    color: #ffb4ae;
}

/* ---------- 13b. VIEWS (lijn-tabs met teller) -------------------------- */

.fss-count {
    display: inline-flex;
    min-width: 20px;
    height: 18px;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border-radius: var(--radius-full);
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-medium, 500);
    line-height: 18px;
}

/* Views = navigation level 3: chips with a count, preferably in the toolbar of the table card. No line under the row of chips
   (that is level 1); the chosen chip is filled with the selection ink. */
.fss-views {
    position: relative;
    /* flow-root: the scroller's negative margin must not collapse through this box (it made the box 36 px high and 4 px too high in a block parent). */
    display: flow-root;
    min-width: 0;
    max-width: 100%;
    --fade-bg: var(--canvas);
}

/* Views above a list/card: the page rhythm (`--stack`, 24 px) goes above the block, 12 px between the chips and what they filter.
   Wrap the chips and the card/table that follows in this block; do not add margins to the chips. */
.fss-views-block {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-3);
}

.fss-views-scroller {
    position: relative;
    display: flex;
    /* Room for the focus ring (2px + 2px offset) inside the scroll box: overflow clips everything outside it. */
    padding: var(--space-1);
    margin: calc(var(--space-1) * -1);
    overflow-x: auto;
    overflow-y: hidden;
    gap: var(--space-1);
    scrollbar-width: none;
}

.fss-views-scroller::-webkit-scrollbar {
    display: none;
}

.fss-view {
    position: relative;
    display: inline-flex;
    height: var(--control-sm);
    flex: none;
    align-items: center;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
    font: inherit;
    font-size: var(--text-sm, 13px);
    font-weight: var(--font-medium, 500);
    gap: 6px;
    line-height: 18px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.fss-view:hover {
    background: var(--surface-2);
    color: var(--ink);
}

.fss-view[aria-pressed="true"] {
    background: var(--selection-ink);
    color: var(--surface);
}

.fss-view:focus-visible {
    border-radius: var(--radius-full);
    box-shadow: var(--focus-ring);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/* Count in the chip: a badge from 1, a dimmed number without a badge surface at 0 (it stays, so the view list never jumps). */
.fss-view-count {
    display: inline-flex;
    min-width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border-radius: var(--radius-full);
    background: var(--control-fill);
    color: var(--ink-2);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-medium, 500);
    line-height: 18px;
}

.fss-view:hover .fss-view-count {
    background: var(--control-fill-active);
}

.fss-view-count[data-zero] {
    min-width: 0;
    padding: 0;
    background: none;
    color: var(--ink-4);
}

.fss-view:hover .fss-view-count[data-zero] {
    background: none;
}

.fss-view[aria-pressed="true"] .fss-view-count {
    background: color-mix(in srgb, var(--surface) 18%, transparent);
    color: var(--surface);
}

.fss-view[aria-pressed="true"] .fss-view-count[data-zero] {
    background: none;
    color: color-mix(in srgb, var(--surface) 62%, transparent);
}

/* Scroll hint: an edge fades where the chips scroll on (fssTabs sets the data attributes). Inside a card the fade is white. */
.fss-views::before,
.fss-views-fade-end {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    width: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease-out);
}

.fss-views::before {
    left: 0;
    box-shadow: inset 18px 0 12px -8px var(--fade-bg);
    content: "";
}

.fss-views-fade-end {
    right: 0;
    box-shadow: inset -18px 0 12px -8px var(--fade-bg);
}

.fss-views[data-can-scroll-start]::before,
.fss-views[data-can-scroll-end] .fss-views-fade-end {
    opacity: 1;
}

:is(.admin-card, .admin-datatable-wrap) .fss-views {
    --fade-bg: var(--surface);
}

/* Touch: the chip keeps its look; an invisible margin around it makes the target 44 px high. */
@media (pointer: coarse) {
    .fss-views-scroller {
        padding-block: calc((44px - var(--control-sm)) / 2);
        margin-block: calc((44px - var(--control-sm)) / -2);
    }

    .fss-view::after {
        position: absolute;
        inset: calc((44px - var(--control-sm)) / -2) 0;
        content: "";
    }
}

@media (forced-colors: active) {
    .fss-view[aria-pressed="true"] {
        border: 1px solid Highlight;
        background: Highlight;
        color: HighlightText;
        forced-color-adjust: none;
    }

    .fss-view:focus-visible {
        outline-color: CanvasText;
    }
}

/* ---------- 14. MENU / POPOVER ----------------------------------------- */

.fss-menu-host {
    position: relative;
    display: inline-flex;
}

.fss-menu {
    position: absolute;
    z-index: var(--z-popover);
    top: calc(100% + 4px);
    min-width: 200px;
    padding: var(--space-1);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-2);
}

.fss-menu[data-align="end"] {
    right: 0;
}

.fss-menu[data-align="start"] {
    left: 0;
}

.fss-menu-item {
    display: flex;
    width: 100%;
    min-height: 32px;
    align-items: center;
    padding: 0 var(--space-2);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    font-size: var(--text-base);
    gap: var(--space-2);
    text-align: left;
    text-decoration: none;
}

.fss-menu-item:hover,
.fss-menu-item:focus-visible {
    background: var(--surface-2);
}

.fss-menu-item[data-tone="danger"] {
    color: var(--danger);
}

.fss-menu-item[data-checked]::before {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: var(--radius-full);
    background: var(--selection-ink);
    content: "";
}

.fss-menu-label {
    padding: var(--space-1-5) var(--space-2);
    color: var(--ink-3);
    font-size: var(--text-xs);
}

.fss-menu-sep {
    height: 1px;
    margin: var(--space-1) 0;
    background: var(--line);
}

.fss-menu.fss-tr-from {
    opacity: 0;
    transform: translateY(-4px);
}

.fss-menu.fss-tr-enter,
.fss-menu.fss-tr-leave {
    transition:
        opacity var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--ease-out);
}

.fss-menu.fss-tr-leave-to {
    opacity: 0;
}

/* ---------- 15. OVERLAYS: MODAL, DRAWER, SHEET ------------------------- */

.fss-tr-enter {
    transition:
        opacity var(--dur-slow) var(--ease-out),
        transform var(--dur-slow) var(--ease-out);
}

.fss-tr-leave {
    transition:
        opacity var(--dur-base) var(--ease-in),
        transform var(--dur-base) var(--ease-in);
}

.admin-modal2-scrim,
.admin-drawer-scrim {
    position: fixed;
    background: rgba(16, 21, 18, 0.4);
    inset: 0;
}

.admin-modal2-scrim.fss-tr-from,
.admin-drawer-scrim.fss-tr-from,
.admin-modal2-scrim.fss-tr-leave-to,
.admin-drawer-scrim.fss-tr-leave-to {
    opacity: 0;
}

.admin-modal2 {
    position: fixed;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    inset: 0;
}

.admin-modal2-panel {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 640px;
    max-height: calc(100dvh - var(--space-12));
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-3);
}

.admin-modal2-panel[data-size="sm"] {
    max-width: 480px;
}

.admin-modal2-panel[data-size="lg"] {
    max-width: 800px;
}

.admin-modal2-panel[data-size="xl"] {
    max-width: 960px;
}

.admin-modal2-panel.fss-tr-from,
.admin-modal2-panel.fss-tr-leave-to {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
}

.admin-modal2-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.admin-modal2-head {
    padding: var(--card-pad) var(--card-pad) 0;
}

.admin-modal2-head h2 {
    font-size: var(--text-xl);
    line-height: 28px;
}

.admin-modal2-head p {
    margin: var(--space-1) 0 0;
    color: var(--ink-2);
}

.admin-modal2-body {
    flex: 1 1 auto;
    padding: var(--card-pad);
    overflow-y: auto;
}

.admin-modal2-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    padding: 0 var(--card-pad) var(--card-pad);
    gap: var(--space-2);
}

.admin-drawer {
    position: fixed;
    z-index: var(--z-drawer);
    inset: 0;
}

/* Right-hand panel (Next `Drawer`): 64 px head, 24 px body, 72 px foot. */
.admin-drawer-panel {
    --drawer-width: 480px;

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    width: min(var(--drawer-width, 640px), 100%);
    max-width: 100%;
    flex-direction: column;
    overflow: hidden;
    border-left: 1px solid var(--line);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-3);
    touch-action: pan-y;
}

.admin-drawer-panel[data-size="lg"] {
    --drawer-width: 640px;
}

.admin-drawer-panel[data-size="xl"] {
    --drawer-width: 800px;
}

/* No dark rail along the edge: the panel is separated by its subtle border and shadow only. */
.admin-drawer-panel:focus-visible {
    outline: none;
}

/* Spring (`springSheet`: stiffness 341, damping 32.5, mass 1) as a linear() curve: 24 px + fade in, 180 ms ease-in out. */
.admin-drawer-panel.fss-tr-enter {
    transition:
        opacity var(--dur-base) var(--ease-out),
        transform 410ms var(--ease-spring-sheet);
}

.admin-drawer-panel.fss-tr-leave {
    transition:
        opacity 180ms var(--ease-in),
        transform 180ms var(--ease-in);
}

.admin-drawer-panel.fss-tr-from,
.admin-drawer-panel.fss-tr-leave-to {
    opacity: 0;
    transform: translateX(24px);
}

.admin-drawer-scrim.fss-tr-enter {
    transition: opacity var(--dur-base) var(--ease-out);
}

.admin-drawer-scrim.fss-tr-leave {
    transition: opacity var(--dur-fast) var(--ease-in);
}

.admin-drawer-head {
    display: flex;
    min-height: 64px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4) var(--space-3) var(--card-pad);
    border-bottom: 1px solid var(--line);
    gap: var(--space-3);
}

.admin-drawer-headings {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-1);
}

.admin-drawer-head h2 {
    margin: 0;
    color: var(--ink);
    font-size: var(--text-h2);
    font-weight: var(--font-semibold);
    letter-spacing: -0.01em;
    line-height: var(--lh-h2);
}

.admin-drawer-head .fss-subtitle,
.admin-modal2-head .fss-subtitle {
    margin: 0;
    color: var(--ink-3);
    font-size: var(--text-sm, 13px);
    line-height: 18px;
    overflow-wrap: anywhere;
}

.admin-drawer-head .fss-subtitle.fss-mono,
.admin-modal2-head .fss-subtitle.fss-mono {
    font-size: 12.5px;
}

.admin-drawer-desc {
    margin: 0;
    color: var(--ink-3);
    font-size: var(--text-xs);
    line-height: 16px;
}

.admin-drawer-close {
    display: inline-flex;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
}

.admin-drawer-close:hover:not(:disabled) {
    background: var(--surface-2);
    color: var(--ink);
}

.admin-drawer-body {
    flex: 1 1 auto;
    padding: var(--card-pad);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.admin-drawer-foot {
    display: flex;
    min-height: 72px;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    padding: var(--space-4) var(--card-pad);
    border-top: 1px solid var(--line);
    background: var(--surface);
    gap: var(--space-2);
}

.admin-drawer-foot .admin-form-actions {
    padding: 0;
}

/* Forms carry their action row as the last child of the <form>; here it sticks like the foot. */
.admin-drawer-body .admin-form > .admin-form-actions,
.admin-drawer-body > .admin-form-actions {
    position: sticky;
    z-index: 1;
    bottom: calc(var(--card-pad) * -1);
    min-height: 72px;
    margin: var(--card-pad) calc(var(--card-pad) * -1) calc(var(--card-pad) * -1);
    padding: var(--space-4) var(--card-pad);
    border-top: 1px solid var(--line);
    background: var(--surface);
}

.admin-drawer-body .admin-form > .admin-form-actions ~ .admin-form-actions {
    position: static;
    min-height: 0;
    margin: var(--space-4) 0 0;
    padding: 0;
    border-top: 0;
}

/* ACTIONS PINNED TO THE BOTTOM OF EVERY DRAWER.
   A form's action row (the last `.admin-form-actions` in a form inside a drawer body) always sits at the bottom edge of the
   panel: long content scrolls above it (sticky), short content leaves the row at the bottom (the body is a flex column and
   the form fills it; `margin-top: auto` pushes the row down). It is a CSS-only rule, so the buttons stay inside their <form>
   and keep submitting. Drawers that use the `footer` slot already have `.admin-drawer-foot` below the scrolling body.
   Selector weight (0,4,1) beats the older per-app overrides of the same rule. */
.admin-drawer-panel .admin-drawer-body:has(> form) {
    display: flex;
    flex-direction: column;
}

.admin-drawer-panel .admin-drawer-body > form {
    flex: 1 0 auto;
}

.admin-drawer-panel .admin-drawer-body form .admin-form-actions:last-child {
    position: sticky;
    z-index: 2;
    bottom: calc(var(--card-pad) * -1);
    min-height: 72px;
    margin: var(--space-6) calc(var(--card-pad) * -1) calc(var(--card-pad) * -1);
    padding: var(--space-4) var(--card-pad);
    border-top: 1px solid var(--line);
    background: var(--surface);
}

.admin-drawer-panel .admin-drawer-body > .admin-form > .admin-form-actions:last-child,
.admin-drawer-panel .admin-drawer-body > form.admin-form > .admin-form-actions:last-child {
    margin-top: auto;
}

/* Visual separation from the gap above the row when the form is as short as the panel. */
.admin-drawer-panel .admin-drawer-body > .admin-form {
    padding-bottom: 0;
}

/* Sheet: bottom-sheet met sleepgreep. Een Drawer wordt op <= 640 px vanzelf een Sheet. */
.fss-sheet-handle {
    display: none;
    width: 100%;
    padding: var(--space-2) 0 var(--space-1);
    cursor: grab;
    touch-action: none;
}

.fss-sheet-handle::before {
    display: block;
    width: 40px;
    height: 4px;
    border-radius: var(--radius-full);
    margin: 0 auto;
    background: var(--line-strong);
    content: "";
}

.fss-sheet-panel,
.admin-drawer-panel[data-side="bottom"] {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 94dvh;
    border-top: 1px solid var(--line);
    border-left: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding-bottom: env(safe-area-inset-bottom);
}

.fss-sheet-panel.fss-tr-from,
.fss-sheet-panel.fss-tr-leave-to,
.admin-drawer-panel[data-side="bottom"].fss-tr-from,
.admin-drawer-panel[data-side="bottom"].fss-tr-leave-to {
    opacity: 0;
    transform: translateY(24px);
}

.fss-sheet-panel[data-height="full"] {
    height: 94dvh;
}

.fss-sheet-panel .fss-sheet-handle,
.admin-drawer-panel[data-side="bottom"] .fss-sheet-handle {
    display: block;
}

@media (max-width: 640px) {
    .admin-drawer-panel {
        top: auto;
        left: 0;
        width: 100%;
        max-width: 100%;
        max-height: 94dvh;
        border-top: 1px solid var(--line);
        border-left: 0;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .admin-drawer-panel.fss-tr-from,
    .admin-drawer-panel.fss-tr-leave-to {
        opacity: 0;
        transform: translateY(24px);
    }

    .admin-drawer-panel .fss-sheet-handle {
        display: block;
    }

    .admin-drawer-head {
        padding: var(--space-3) var(--card-pad);
    }

    .admin-drawer-body {
        padding: var(--card-pad);
    }

    .admin-drawer-foot {
        padding: var(--space-4) calc(var(--card-pad) + env(safe-area-inset-right)) calc(var(--space-4) + env(safe-area-inset-bottom)) var(--card-pad);
    }

    .admin-drawer-body .admin-form > .admin-form-actions,
    .admin-drawer-body > .admin-form-actions {
        bottom: calc(var(--card-pad) * -1);
        margin: var(--card-pad) calc(var(--card-pad) * -1) calc(var(--card-pad) * -1);
        padding: var(--space-4) var(--card-pad) calc(var(--space-4) + env(safe-area-inset-bottom));
    }

    .admin-modal2 {
        align-items: flex-end;
        padding: var(--space-4) 0 0;
    }

    .admin-modal2-panel {
        max-width: none;
        max-height: calc(100dvh - var(--space-8));
        border-bottom: 0;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    .admin-modal2-panel.fss-tr-from,
    .admin-modal2-panel.fss-tr-leave-to {
        transform: translateY(100%);
    }

    .admin-modal2-head {
        padding: var(--space-4) var(--space-4) 0;
    }

    .admin-modal2-body {
        padding: var(--space-4);
    }

    .admin-modal2-foot {
        padding: 0 var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
    }
}

/* Waarschuwing "niet opgeslagen" binnen een drawer */
.fss-discard {
    position: absolute;
    z-index: 2;
    right: var(--space-4);
    bottom: var(--space-4);
    left: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-2);
}

.fss-discard strong {
    display: block;
    margin-bottom: var(--space-1);
}

.fss-discard-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: var(--space-3);
    gap: var(--space-2);
}

/* ---------- 16. CONFIRM ------------------------------------------------ */

.admin-confirm2-body {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.admin-confirm2-icon {
    display: inline-flex;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--surface-2);
    color: var(--ink-2);
    font-weight: var(--font-semibold);
}

.admin-confirm2-body[data-tone="danger"] .admin-confirm2-icon {
    background: var(--danger-bg);
    color: var(--danger);
}

.admin-confirm2-copy {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-3);
}

.admin-confirm2-copy > .admin-muted {
    color: var(--ink-2);
    font-size: var(--text-body);
    line-height: var(--lh-body);
}

.admin-confirm2-object {
    font-weight: var(--font-semibold);
    overflow-wrap: anywhere;
}

.admin-confirm2-consequences {
    display: flex;
    flex-direction: column;
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    margin: 0;
    background: var(--surface-2);
    color: var(--ink);
    font-size: var(--text-small);
    gap: var(--space-1);
    line-height: var(--lh-small);
    list-style: none;
}

.admin-confirm2-consequences li {
    position: relative;
    padding-left: var(--space-4);
}

.admin-confirm2-consequences li::before {
    position: absolute;
    top: 6px;
    left: 2px;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--ink-3);
    content: "";
}

/* ---------- 17. TOAST -------------------------------------------------- */

.admin-toast-region {
    position: fixed;
    z-index: var(--z-toast);
    right: var(--space-6);
    bottom: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    pointer-events: none;
}

/* Same look as the Next toast: icon, title + text, optional undo button, round-corner close; the tone is the left rail. */
.admin-toast {
    position: relative;
    display: flex;
    width: 360px;
    max-width: calc(100vw - var(--space-8));
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
    border-left: 3px solid var(--ink-2);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-2);
    font-size: var(--text-base);
    pointer-events: auto;
}

.admin-toast[data-tone="success"] {
    border-left-color: var(--success);
}

.admin-toast[data-tone="warning"] {
    border-left-color: var(--warning);
}

.admin-toast[data-tone="error"] {
    border-left-color: var(--danger);
}

.admin-toast[data-tone="info"] {
    border-left-color: var(--info);
}

.admin-toast-icon {
    display: inline-flex;
    flex: 0 0 auto;
    padding-top: 1px;
    color: var(--ink-3);
}

.admin-toast-icon .fss-icon,
.admin-toast-icon svg {
    width: 18px;
    height: 18px;
}

.admin-toast[data-tone="success"] .admin-toast-icon {
    color: var(--success);
}

.admin-toast[data-tone="warning"] .admin-toast-icon {
    color: var(--warning);
}

.admin-toast[data-tone="error"] .admin-toast-icon {
    color: var(--danger);
}

.admin-toast[data-tone="info"] .admin-toast-icon {
    color: var(--info);
}

.admin-toast-copy {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
}

.admin-toast-title {
    color: var(--ink);
    font-size: var(--text-body);
    font-weight: var(--font-semibold);
    line-height: var(--lh-body);
}

.admin-toast-body {
    color: var(--ink-2);
    font-size: var(--text-small);
    line-height: var(--lh-small);
}

.admin-toast-close {
    display: inline-flex;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    margin: -4px -4px -4px 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ink-3);
    cursor: pointer;
}

.admin-toast-close:hover {
    background: var(--surface-2);
    color: var(--ink);
}

.admin-toast-undo {
    display: inline-flex;
    height: 28px;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--space-1);
    margin: -4px 0;
    padding: 0 var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--control-fill);
    color: var(--ink);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--text-small);
    font-weight: var(--font-medium);
    white-space: nowrap;
}

.admin-toast-undo:hover {
    background: var(--control-fill-hover);
}

.admin-toast-undo .fss-icon,
.admin-toast-undo svg {
    width: 14px;
    height: 14px;
}

/* Undo toast: the rail is the track and its bar drains over the toast duration (remaining time to undo). */
.admin-toast[data-undo] {
    border-left-color: var(--line);
}

.admin-toast-progress {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -3px;
    width: 3px;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    background: var(--success);
    transform-origin: bottom;
    animation: fss-toast-drain var(--toast-ms, 6000ms) linear forwards;
}

.admin-toast[data-paused] .admin-toast-progress {
    animation-play-state: paused;
}

@keyframes fss-toast-drain {
    from {
        transform: scaleY(1);
    }

    to {
        transform: scaleY(0);
    }
}

html[data-motion="reduced"] .admin-toast-progress {
    animation: none;
}

.admin-toast.fss-tr-from,
.admin-toast.fss-tr-leave-to {
    opacity: 0;
    transform: translateY(8px);
}

@media (max-width: 1023px) {
    .admin-toast-region {
        bottom: calc(var(--space-4) + var(--bottom-nav-h, 0px) + env(safe-area-inset-bottom));
    }
}

@media (max-width: 640px) {
    .admin-toast-region {
        right: var(--space-4);
        left: var(--space-4);
    }

    .admin-toast {
        width: 100%;
        max-width: none;
    }
}

/* ---------- 18. COMBOBOX ----------------------------------------------- */

.fss-combobox {
    position: relative;
}

.fss-combobox-control {
    position: relative;
    display: flex;
    min-height: var(--input-h);
    flex-wrap: wrap;
    align-items: center;
    padding: 0 var(--space-2);
    border: 1px solid var(--line-field);
    border-radius: var(--radius-sm);
    background: var(--surface);
    gap: var(--space-1);
}

.fss-combobox-control:focus-within {
    border-color: var(--selection-ink);
    box-shadow: var(--focus-ring);
}

.fss-combobox-input {
    min-width: 80px;
    height: calc(var(--input-h) - 2px);
    flex: 1 1 80px;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    outline: none;
}

.fss-combobox-input:focus-visible {
    box-shadow: none;
}

.fss-combobox-single {
    color: var(--ink);
}

.fss-combobox-chip {
    display: inline-flex;
    height: 24px;
    align-items: center;
    padding: 0 var(--space-1) 0 var(--space-2);
    border-radius: var(--radius-full);
    background: var(--control-fill);
    font-size: var(--text-sm);
    gap: var(--space-1);
}

.fss-combobox-chip button {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: none;
    color: var(--ink-2);
    cursor: pointer;
}

.fss-combobox-list {
    position: absolute;
    z-index: var(--z-popover);
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    max-height: 260px;
    padding: var(--space-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    margin: 0;
    background: var(--surface);
    box-shadow: var(--shadow-2);
    list-style: none;
    overflow-y: auto;
}

.fss-combobox-option {
    display: flex;
    min-height: 32px;
    align-items: center;
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    gap: var(--space-2);
}

.fss-combobox-option[data-active] {
    background: var(--surface-2);
}

.fss-combobox-option[aria-selected="true"] {
    font-weight: var(--font-medium);
}

.fss-combobox-option[aria-selected="true"]::after {
    width: 6px;
    height: 6px;
    margin-left: auto;
    border-radius: var(--radius-full);
    background: var(--selection-ink);
    content: "";
}

.fss-combobox-group {
    padding: var(--space-1-5) var(--space-2);
    color: var(--ink-3);
    font-size: var(--text-xs);
}

.fss-combobox-empty {
    padding: var(--space-3);
    color: var(--ink-3);
    text-align: center;
}

/* ---------- 19. FILEDROPZONE ------------------------------------------- */

.fss-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-6) var(--space-4);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    cursor: pointer;
    gap: var(--space-1);
    text-align: center;
    transition: background var(--dur-fast) var(--ease-out);
}

/* The dropzone of a plain form (`<x-fss::file-input>`) is a button: same surface, button defaults removed. */
button.fss-dropzone {
    width: 100%;
    color: var(--ink);
    font: inherit;
}

button.fss-dropzone:focus-visible {
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--selection-ink);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.fss-file-input .fss-dropzone > svg {
    color: var(--ink-3);
}

.fss-dropzone[data-over] {
    border-color: var(--selection-ink);
    background: var(--accent-soft);
}

.fss-dropzone-hint {
    color: var(--ink-3);
    font-size: var(--text-xs);
}

.fss-dropzone-files {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: var(--space-3) 0 0;
    gap: var(--space-1-5);
    list-style: none;
}

.fss-dropzone-file {
    display: flex;
    align-items: center;
    padding: var(--space-1-5) var(--space-2) var(--space-1-5) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    gap: var(--space-2);
}

.fss-dropzone-file-name {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fss-dropzone-file-size {
    color: var(--ink-3);
    font-size: var(--text-xs);
}

.fss-progress {
    width: 100%;
    height: 4px;
    overflow: hidden;
    border-radius: var(--radius-full);
    margin-top: var(--space-2);
    background: var(--surface-2);
}

.fss-progress > span {
    display: block;
    height: 100%;
    background: var(--selection-ink);
    transition: width var(--dur-base) var(--ease-out);
}

/* ---------- 20. ACTIEBALK (mobiel) ------------------------------------- */

.fss-actionbar {
    position: fixed;
    z-index: var(--z-sticky);
    right: 0;
    bottom: var(--fss-bottom-nav-h, 0px);
    left: 0;
    display: none;
    align-items: center;
    min-height: 56px;
    padding: var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--surface);
    gap: var(--space-2);
}

.fss-actionbar > * {
    min-width: 0;
    flex: 1 1 0;
}

.fss-actionbar > * > .admin-btn,
.fss-actionbar > .admin-btn {
    width: 100%;
}

@media (max-width: 1023px) {
    .fss-actionbar {
        display: flex;
    }
}

/* ---------- 21. SHELL VOOR LAYOUT & STYLEGUIDE ------------------------- */

.fss-shell {
    max-width: var(--content-max);
    padding: var(--space-6) var(--page-pad) var(--space-16);
    margin: 0 auto;
}

@media (max-width: 640px) {
    .fss-shell {
        padding: var(--space-4) var(--space-4) calc(var(--space-16) + 56px);
    }
}

.fss-shell > * + * {
    margin-top: var(--stack);
}

.fss-tr-hold {
    transition: opacity var(--dur-base) var(--ease-in);
}

/* ---------- 20. OVERLAY-BEWEGING (gelijk aan Drawer/Modal/Sheet in de Next-admin) ---------------------------------
   Lade: komt 24 px + fade binnen op een rustige veer (~340 ms), sluit in 180 ms op ease-in. Modal: fade + scale .98 (200/140 ms).
   Bottom-sheet: 24 px + fade erin, uit naar onderen. De veer is benaderd met een cubic-bezier (framer-spring 341/32,5 heeft
   een dempingsfractie van 0,88: een kleine, rustige nadruk). Minder beweging laat de globale 1 ms-regel winnen. */
@media (min-width: 641px) {
    .admin-drawer-panel.fss-tr-from,
    .admin-drawer-panel.fss-tr-leave-to {
        opacity: 0;
        transform: translateX(24px);
    }

    .admin-drawer-panel.fss-tr-enter {
        transition:
            opacity var(--dur-base) var(--ease-out),
            transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .admin-drawer-panel.fss-tr-leave {
        transition:
            opacity 180ms var(--ease-in),
            transform 180ms var(--ease-in);
    }

    .admin-modal2-panel.fss-tr-from,
    .admin-modal2-panel.fss-tr-leave-to {
        opacity: 0;
        transform: scale(0.98);
    }

    .admin-modal2-panel.fss-tr-enter {
        transition:
            opacity var(--dur-base) var(--ease-out),
            transform var(--dur-base) var(--ease-out);
    }

    .admin-modal2-panel.fss-tr-leave {
        transition:
            opacity 140ms var(--ease-in),
            transform 140ms var(--ease-in);
    }
}

@media (max-width: 640px) {
    .admin-drawer-panel.fss-tr-from,
    .admin-modal2-panel.fss-tr-from,
    .fss-sheet-panel.fss-tr-from {
        opacity: 0;
        transform: translateY(24px);
    }

    .admin-drawer-panel.fss-tr-enter,
    .admin-modal2-panel.fss-tr-enter,
    .fss-sheet-panel.fss-tr-enter {
        transition:
            opacity var(--dur-base) var(--ease-out),
            transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .admin-drawer-panel.fss-tr-leave,
    .admin-modal2-panel.fss-tr-leave,
    .fss-sheet-panel.fss-tr-leave {
        transition:
            opacity 180ms var(--ease-in),
            transform 180ms var(--ease-in);
    }
}

/* Een tabel blijft een tabel: op smalle schermen krijgt het zoekveld de volle breedte (kaartlijsten: zie de container query). */
@media (max-width: 760px) {
    .admin-datatable-search {
        max-width: none;
        flex-basis: 100%;
    }

    .admin-datatable-toolbar > .fss-menu-host:last-child {
        margin-left: 0;
    }
}

/* ---------- 22. STAAFGRAFIEK (TrendChart) ------------------------------- */
/* Port of `app/admin/styles/modules/charts.css` (bar part). `--chart-h` is the height of the plot area; the labels sit below it.
   The grid lines are real elements (`.admin-chart-grid`), not a background gradient. */

.admin-chart {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
}

.admin-chart-plot {
    display: grid;
    align-items: start;
    gap: var(--space-3);
    grid-template-columns: auto minmax(0, 1fr);
}

.admin-chart-axis {
    display: flex;
    height: calc(var(--chart-h, 200px) + 16px);
    flex-direction: column;
    justify-content: space-between;
    margin: -8px 0;
    color: var(--ink-3);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    line-height: 16px;
    text-align: right;
    white-space: nowrap;
}

.admin-chart-bars {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    overflow-x: auto;
}

.admin-chart-grid {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    height: var(--chart-h, 200px);
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

.admin-chart-grid > span {
    display: block;
    height: 0;
    border-top: 1px solid var(--chart-grid);
}

.admin-chart-bar-col {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 28px;
    flex: 1 1 0;
    flex-direction: column;
    gap: var(--space-2);
}

.admin-chart-bar-track {
    display: flex;
    height: var(--chart-h, 200px);
    align-items: flex-end;
    background: var(--chart-track);
}

.admin-chart-bar-fill {
    width: 100%;
    max-width: 56px;
    border-radius: 4px 4px 0 0;
    margin: 0 auto;
    background: var(--chart-bar);
    animation: admin-chart-grow var(--dur-draw) var(--ease-draw) backwards;
    transform-origin: bottom;
}

@keyframes admin-chart-grow {
    from {
        transform: scaleY(0);
    }
}

.admin-chart-bar-fill[data-current] {
    background: var(--chart-current);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent), var(--ink) 30%);
}

.admin-chart-bars[data-accent="success"] .admin-chart-bar-fill:not([data-current]) {
    background: var(--chart-1);
}

.admin-chart-bars[data-accent="info"] .admin-chart-bar-fill:not([data-current]) {
    background: var(--chart-2);
}

.admin-chart-bars[data-accent="warning"] .admin-chart-bar-fill:not([data-current]) {
    background: var(--chart-3);
}

.admin-chart-bars[data-accent="danger"] .admin-chart-bar-fill:not([data-current]) {
    background: var(--chart-4);
}

.admin-chart-bar-label {
    color: var(--ink-3);
    font-size: var(--text-xs);
    line-height: 16px;
    text-align: center;
    white-space: nowrap;
}

.admin-chart-footnote {
    margin: 0;
    color: var(--ink-3);
    font-size: var(--text-xs);
    line-height: 16px;
}

.admin-chart-empty {
    display: flex;
    height: var(--chart-h, 200px);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    color: var(--ink-2);
    font-size: var(--text-base);
}

@media (prefers-reduced-motion: reduce) {
    .admin-chart-bar-fill {
        animation: none;
    }
}

html[data-motion="reduced"] .admin-chart-bar-fill {
    animation: none;
}

/* ---------- 23. RESOURCEGEBRUIK (runtime) ------------------------------- */
/* Port of the resource part of `app/admin/styles/modules/runtime.css` (card `<x-fss::runtime-resources-card>`). */

.admin-resources {
    display: grid;
    gap: var(--space-4);
}

.admin-resources-pod > header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.admin-resources h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
}

.admin-resources-trends {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.admin-resource-meter {
    display: block;
    height: 4px;
    margin-top: 6px;
    max-width: 240px;
    border-radius: 2px;
    background: var(--surface-2);
    overflow: hidden;
}

.admin-resource-meter > span {
    display: block;
    height: 100%;
    background: var(--chart-1);
}

.admin-resource-meter[data-tone="warning"] > span {
    background: var(--warning);
}

.admin-resource-meter[data-tone="danger"] > span {
    background: var(--danger);
}

/* =====================================================================
   Next-parity heads (admin-design-system §7): card heading + toolbar, eyebrow, next-step hint,
   and the KPI chevron (the empty-state icon tile lives with .admin-empty-state). Same values as app/admin/styles/primitives.css.
   ===================================================================== */
.admin-kicker {
    display: block;
    color: var(--ink-3);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: 0;
    line-height: 16px;
    text-transform: none;
}

.admin-page-header .admin-kicker,
.admin-card-heading .admin-kicker {
    display: none;
}

.admin-drawer-head .admin-kicker {
    display: block;
    color: var(--ink-3);
}

.admin-card-heading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.admin-card-heading > svg {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--ink-3);
}

.admin-card-heading > div {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-1);
}

.admin-card-heading h2,
.admin-card-heading h3,
.admin-card-heading h4 {
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
    line-height: 24px;
}

.admin-card-heading > p,
.admin-card-heading > div > p {
    margin: 0;
    color: var(--ink-2);
    font-size: var(--text-xs);
    line-height: 16px;
}

.admin-section-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.admin-section-toolbar > .admin-card-heading {
    margin-bottom: 0;
}

.admin-section-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.admin-page-header-next-copy {
    min-width: 0;
    flex: 0 1 auto;
}

.admin-page-header-next-hint {
    color: var(--ink-3);
}

.admin-kpi-chevron {
    position: absolute;
    top: var(--space-4);
    right: var(--space-3);
    display: inline-flex;
    color: var(--ink-3);
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-out);
}

a.admin-kpi:hover .admin-kpi-chevron,
a.admin-kpi:focus-visible .admin-kpi-chevron {
    opacity: 1;
}

/* ---------- CRM parity: KPI icon, done node, page-header avatar, avatar, timeline (chevron and icon tile live above) ---------- */
/* Ports from the Next primitives (KpiTile, EmptyState, PageHeader.leading, FaviconAvatar, Timeline). */

.admin-kpi-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex: none;
    align-items: center;
    justify-content: center;
    color: var(--ink-3);
}

/* Admin KPI labels are mono eyebrows without an icon (design v5); the portal shows the icon. */
.admin-chrome:not(.portal-chrome) .admin-kpi-icon {
    display: none;
}

.admin-kpi-value[data-text] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow-wrap: anywhere;
    font-size: var(--text-xl);
    line-height: 1.25;
    white-space: normal;
}

.admin-empty-state[data-kind="done"] > strong {
    font-size: 24px;
    line-height: 28px;
}

.admin-empty-state-node {
    width: 12px;
    height: 12px;
    margin-bottom: var(--space-2);
    border-radius: var(--radius-full);
    background: var(--accent);
    box-shadow: 0 0 0 6px var(--accent-soft), 0 0 0 7px var(--selection-ink);
}

.admin-page-header-leading {
    display: inline-flex;
    align-self: center;
}

@media (max-width: 1023px) {
    .admin-chrome:not(.portal-chrome) .admin-page-header-next-copy {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .admin-chrome:not(.portal-chrome) .admin-page-header-next-hint {
        display: none;
    }
}

.fss-avatar {
    --avatar: 32px;
    display: inline-grid;
    overflow: hidden;
    width: var(--avatar);
    height: var(--avatar);
    flex: none;
    place-items: center;
    border-radius: 9px;
    background: var(--ink);
    color: #ffffff;
    font-family: var(--font-display);
    font-size: calc(var(--avatar) * 0.4);
    font-weight: var(--font-semibold);
    letter-spacing: -0.01em;
    line-height: 1;
    user-select: none;
}

.fss-avatar[data-size="xs"] {
    --avatar: 20px;
    border-radius: 6px;
}

.fss-avatar[data-size="sm"] {
    --avatar: 28px;
    border-radius: 8px;
}

.fss-avatar[data-size="lg"] {
    --avatar: 44px;
    border-radius: 12px;
}

/* Initials: eight muted hues, white on each above 7:1. */
.fss-avatar[data-hue="0"] { background: #2f4b3a; }
.fss-avatar[data-hue="1"] { background: #3a4a63; }
.fss-avatar[data-hue="2"] { background: #6b4a2f; }
.fss-avatar[data-hue="3"] { background: #5a3d5c; }
.fss-avatar[data-hue="4"] { background: #2f5560; }
.fss-avatar[data-hue="5"] { background: #4f4f2f; }
.fss-avatar[data-hue="6"] { background: #6a3b3b; }
.fss-avatar[data-hue="7"] { background: #3d3d47; }

.fss-avatar[data-image] {
    border: 1px solid var(--line);
    background: var(--surface);
}

.fss-avatar img {
    width: 62%;
    height: 62%;
    object-fit: contain;
}

.admin-status-badge > svg {
    width: 12px;
    height: 12px;
    flex: none;
}

.fss-timeline-title a {
    color: inherit;
    text-decoration: none;
}

.fss-timeline-title a:hover {
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
    text-underline-offset: 3px;
}

.fss-timeline-title a:focus-visible {
    border-radius: 2px;
    box-shadow: var(--focus-ring);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.fss-timeline-icon {
    display: inline-flex;
    margin-right: var(--space-1);
    vertical-align: -2px;
    color: var(--ink-2);
}

/* --- ageing-bar (port of app/admin/styles/primitives.css, components/admin/charts/AgeingBar.tsx) --- */
.fss-ageing-track {
    display: flex;
    overflow: hidden;
    height: 12px;
    border-radius: 6px;
    background: var(--surface-2);
    gap: 3px;
}

.fss-ageing-track > span {
    min-width: 4px;
    flex: 1 1 0;
    border-radius: 3px;
}

.fss-ageing [data-bucket="current"] { background: #d3d4cf; }
.fss-ageing [data-bucket="d30"] { background: #8c9196; }
.fss-ageing [data-bucket="d60"] { background: #e5484d; }
.fss-ageing [data-bucket="older"] { background: #a61b1f; }
.fss-ageing [data-bucket="empty"] { background: transparent; }

.fss-ageing-legend {
    display: grid;
    margin: var(--space-4) 0 0;
    padding: 0;
    gap: var(--space-3);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
}

.fss-ageing .fss-ageing-legend > li {
    background: none;
}

.fss-ageing-legend > li > :is(a, div) {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: var(--space-1) 0;
    border-radius: var(--radius-sm);
    color: inherit;
    gap: 2px;
    text-decoration: none;
}

.fss-ageing-legend > li > a:hover .fss-ageing-amount {
    text-decoration: underline;
    text-decoration-color: var(--line-field);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.fss-ageing-legend > li > a:focus-visible {
    box-shadow: var(--focus-ring);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.fss-ageing-key {
    display: inline-flex;
    align-items: center;
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 11.5px;
    gap: 6px;
    letter-spacing: 0.02em;
    line-height: 16px;
}

.fss-ageing-key i {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 2px;
}

.fss-ageing-amount {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: var(--font-semibold);
    letter-spacing: -0.02em;
    line-height: 26px;
}

.fss-ageing-legend > li[data-bucket="d60"] .fss-ageing-amount,
.fss-ageing-legend > li[data-bucket="older"] .fss-ageing-amount {
    color: var(--danger);
}

.fss-ageing-legend > li[data-empty] .fss-ageing-amount {
    color: var(--ink-3);
}

.fss-ageing-count {
    color: var(--ink-3);
    font-size: 12px;
    line-height: 16px;
}

@media (max-width: 639px) {
    .fss-ageing-legend {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --- month-bars (port of app/admin/styles/primitives.css, components/admin/charts/MonthBars.tsx) --- */
/* The bar height is inline on .fss-monthbars-bar (Next: `--h`), so no extra local custom property is needed. */
.fss-monthbars {
    min-width: 0;
    margin: 0;
}

.fss-monthbars-plot {
    display: flex;
    height: 112px;
    align-items: flex-end;
    margin: 0;
    padding: 0;
    gap: 6px;
    list-style: none;
}

.fss-monthbars-plot > li {
    display: flex;
    min-width: 0;
    height: 100%;
    flex: 1 1 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    gap: 6px;
}

.fss-monthbars-bar {
    display: block;
    min-height: 2px;
    border-radius: 4px 4px 2px 2px;
    background: var(--ink);
}

.fss-monthbars-plot > li[data-zero] .fss-monthbars-bar {
    height: 1px;
    min-height: 1px;
    background: var(--line-field);
}

.fss-monthbars-plot > li[data-current] .fss-monthbars-bar {
    box-sizing: border-box;
    border: 1.5px solid var(--ink);
    background: var(--accent);
}

.fss-monthbars-label {
    overflow: hidden;
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 10.5px;
    line-height: 14px;
    text-align: center;
    white-space: nowrap;
}

.fss-monthbars-plot > li[data-current] .fss-monthbars-label {
    color: var(--ink);
}

@media (max-width: 639px) {
    .fss-monthbars-plot {
        gap: 3px;
    }

    .fss-monthbars-plot > li:nth-child(even):not([data-current]) .fss-monthbars-label {
        visibility: hidden;
    }
}

/* =====================================================================
   CARD (x-card): head / body / foot with one inner padding, one rhythm.
   `.admin-card` carries the padding (`--card-pad`) so head, body and foot always share the same
   inset. A `flush` card (lists, rows, tables) has no outer padding; its head and body pad themselves.
   ===================================================================== */
/* A card made with <x-fss::card> is structured: the card itself has no padding, the head, body and foot each pad with `--card-pad`
   (the one inset also used by the drawer, modal and table cells). The head ALWAYS has a divider. `flush` only removes the body padding. */
.admin-card[data-structured] {
    padding: 0;
}

.admin-card[data-structured] > .admin-card-head {
    flex-wrap: nowrap;
    margin: 0;
    padding: var(--space-3) var(--card-pad);
    min-height: 56px;
    border-bottom: 1px solid var(--line);
}

.admin-card-head > .admin-card-heading {
    min-width: 0;
    flex: 1 1 280px;
    margin-bottom: 0;
}

.admin-card-titleline {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.admin-card-count {
    color: var(--ink-3);
    font-size: var(--text-sm, 13px);
    font-weight: var(--font-regular);
}

.admin-card-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

.admin-card[data-structured] > .admin-card-body {
    padding: var(--card-pad);
}

.admin-card[data-structured][data-flush] > .admin-card-body {
    padding: 0;
}

/* Sub-section inside a card body ("SMS-herinneringen" with an icon): a modest title, then the content with the in-card rhythm. */
.admin-card .admin-card-section-title,
.admin-card h3.admin-card-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    color: var(--ink);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    line-height: 20px;
}

.admin-card-section-title > svg {
    flex: none;
    color: var(--ink-3);
}

.admin-card .admin-card-body > * + .admin-card-section-title {
    margin-top: var(--space-6);
}

/* Content rhythm inside a card body: paragraph margins are neutralised, consecutive elements get one gap
   (`--card-gap`), and an action row before the end gets slightly more (`--card-gap-action`). */
.admin-card .admin-card-body > * {
    margin-block: 0;
}

.admin-card .admin-card-body > * + * {
    margin-top: var(--card-gap);
}

.admin-card .admin-card-body > * + :is(.admin-card-actions, .admin-form-actions, .admin-btn, button.admin-btn) {
    margin-top: var(--card-gap-action);
}

.admin-card .admin-card-body > :is(.admin-btn, button.admin-btn) {
    width: fit-content;
}

.admin-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.admin-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--card-pad);
    border-top: 1px solid var(--line);
}

/* =====================================================================
   FORM RHYTHM: label, field, help text, then a clear gap before the next field.
   Zero specificity (`:where`) so a form that lays itself out as a grid or row keeps doing so.
   ===================================================================== */
:where(.admin-form) {
    display: flex;
    flex-direction: column;
    gap: var(--field-gap);
}

:where(.admin-form fieldset) {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--field-gap);
    padding: 0;
    margin: 0;
    border: 0;
}

:where(.admin-form p, .admin-form h3) {
    margin: 0;
}

/* A bare label directly in a form or field grid renders as a stacked field: label text (first span) 12px, control below. */
.admin-form > label:not([class]),
.admin-field-grid > label:not([class]) {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-1-5);
}

.admin-form > label:not([class]) > span:first-child,
.admin-field-grid > label:not([class]) > span:first-child {
    color: var(--ink-2);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    line-height: 16px;
}

.admin-form label > small,
.admin-form label > .admin-form-help {
    display: block;
    color: var(--ink-3);
    font-size: var(--text-xs);
    font-weight: var(--font-regular);
    line-height: 16px;
}

/* Radio / checkbox groups: the group label (`legend`) looks like every other label, the options sit close together
   (`--space-2`), and the next field follows after the normal field gap. */
.admin-form fieldset > legend {
    float: none;
    width: auto;
    padding: 0;
    margin: 0 0 var(--space-2);
    color: var(--ink);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    line-height: 16px;
}

.admin-form .admin-checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--ink);
    font-size: var(--text-base);
    font-weight: var(--font-regular);
    line-height: 20px;
}

/* A checkbox group: the options stack 8px apart through the gap of their wrapper (no negative margins, so nothing
   overlaps when a wrapper lays itself out differently). A grid of checks (`.admin-form-checks`) keeps its own gap. */
.admin-check-group,
:where(.admin-form fieldset:not(.admin-field-grid, .admin-form-checks):has(> .admin-checkbox-label)) {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Transitional, until every group is wrapped in `.admin-check-group`: consecutive checkbox labels loose in a form keep 8px.
   Directly in the form the form gap is known, so it is narrowed to 8px; in a plain (block) wrapper they get an 8px margin.
   Known flex/grid groups lay out their own gap and are excluded, so no rule here can make options overlap. */
.admin-form > .admin-checkbox-label + .admin-checkbox-label {
    margin-top: calc(var(--space-2) - var(--field-gap));
}

:where(.admin-form :not(fieldset, .admin-check-group, .admin-form-checks, .admin-row, .admin-radio-list, .admin-checkbox-group, .admin-segmented, .admin-checkbox-chips, [role="radiogroup"], .admin-field-grid, .admin-form-grid)) > .admin-checkbox-label + .admin-checkbox-label {
    margin-top: var(--space-2);
}

.admin-check-group > .admin-checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--ink);
    font-size: var(--text-base);
    font-weight: var(--font-regular);
    line-height: 20px;
}

/* The action row at the end of a form: a clear gap above it (the sticky drawer footer rules above still apply in a drawer). */
.admin-form > .admin-form-actions {
    margin-top: var(--space-2);
}

.admin-drawer-body .admin-form > .admin-form-actions {
    margin-top: var(--space-6);
}

/* =====================================================================
   FORM SECTIONS: a modest heading (like a card title), a clear gap above it (larger than the field gap),
   an optional muted description, then the fields with the normal rhythm. Works on a bare `<h3>` in a form
   and on the `.admin-form-section-title` class.
   ===================================================================== */
.admin-form h3,
.admin-form-section-title {
    margin: 0;
    color: var(--ink);
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
    line-height: 24px;
}

.admin-form > * + h3,
.admin-form > * + .admin-form-section-title,
.admin-form fieldset > * + h3 {
    margin-top: calc(var(--space-8) - var(--field-gap));
}

.admin-form h3 + *,
.admin-form-section-title + * {
    margin-top: calc(var(--space-3) - var(--field-gap));
}

.admin-form h3 + :is(p, .admin-form-section-desc),
.admin-form-section-title + :is(p, .admin-form-section-desc) {
    margin-top: calc(var(--space-1) - var(--field-gap));
    color: var(--ink-3);
    font-size: var(--text-xs);
    line-height: 16px;
}

.admin-form h3 + :is(p, .admin-form-section-desc) + * {
    margin-top: calc(var(--space-3) - var(--field-gap));
}

/* Drawer forms: the drawer body already insets the content; the form never adds a second horizontal inset. */
.admin-drawer-body .admin-form,
.admin-drawer-body form {
    padding-inline: 0;
    margin-inline: 0;
}

/* =====================================================================
   DATATABLE IN A CARD: description, toolbar, count and the first/last table cell share the card inset (`--card-pad`).
   In a padded card the controls sit flush with the card padding and the table runs edge to edge; in a `flush` card
   the controls and the outer cells pad themselves by the same amount.
   ===================================================================== */
.admin-datatable-controls {
    padding: var(--space-4) var(--card-pad) var(--space-3);
    gap: var(--space-3);
}

.admin-datatable thead th:first-child,
.admin-datatable tbody td:first-child {
    padding-left: var(--card-pad);
}

.admin-datatable thead th:last-child,
.admin-datatable tbody td:last-child {
    padding-right: var(--card-pad);
}

.admin-card[data-structured] > .admin-card-body > .fss-datatable:only-child .admin-datatable-controls {
    padding-top: var(--card-pad);
}

.admin-card[data-structured]:not([data-flush]) > .admin-card-body:has(> .fss-datatable:only-child) {
    padding: 0;
}

/* Column menu: every item shows its state as a check box (role menuitemcheckbox + aria-checked); hidden columns are visibly unchecked. */
.fss-menu-item[role="menuitemcheckbox"]::before {
    width: 16px;
    height: 16px;
    flex: none;
    border: 1px solid var(--line-field);
    border-radius: var(--radius-xs);
    background: var(--surface) center / 12px 12px no-repeat;
    content: "";
}

.fss-menu-item[role="menuitemcheckbox"][aria-checked="true"]::before {
    border-color: var(--ink);
    background-color: var(--ink);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.fss-menu-item[role="menuitemcheckbox"]:disabled {
    cursor: default;
    opacity: 0.6;
}

/* =====================================================================
   SELECT: no native arrow. One chevron of our own, 12px from the right edge, with enough right padding that text never runs
   under it. Same height and radius as the text inputs (those come from the field rules above).
   ===================================================================== */
:is(.admin-chrome, .portal-chrome, .fss-teleported) :is(.admin-field, .admin-form, .admin-datatable-filter, .admin-datatable-pagesize) select,
:is(.admin-chrome, .portal-chrome, .fss-teleported) select.admin-input,
:is(.admin-chrome, .portal-chrome, .fss-teleported) select:where(.admin-select) {
    padding-right: calc(var(--space-3) + 16px + var(--space-2));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-position: right var(--space-3) center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    -webkit-appearance: none;
    appearance: none;
    text-overflow: ellipsis;
}

:is(.admin-chrome, .portal-chrome, .fss-teleported) select[multiple] {
    background-image: none;
    padding-right: var(--space-3);
}

/* KPI tiles in one row always have the same height (stretch); a hint line is optional and never changes a neighbour's height. */
.admin-kpi-grid {
    align-items: stretch;
}

.admin-kpi-grid > .admin-kpi {
    height: 100%;
}

/* Loose content in a `flush` card body (text, forms, buttons next to rows or tables) gets the card inset and the body rhythm;
   rows, lists and tables run edge to edge. */
.admin-card[data-flush] > .admin-card-body > :is(p, form, fieldset, h3, h4, label, small, .admin-btn, button, .admin-card-actions, .admin-form-actions, .admin-form, .admin-field, .admin-banner) {
    margin-inline: var(--card-pad);
}

.admin-card[data-flush] > .admin-card-body > :is(p, form, fieldset, h3, h4, label, small, .admin-btn, button, .admin-card-actions, .admin-form-actions, .admin-form, .admin-field, .admin-banner):first-child {
    margin-top: var(--card-pad);
}

.admin-card[data-flush] > .admin-card-body > :is(p, form, fieldset, h3, h4, label, small, .admin-btn, button, .admin-card-actions, .admin-form-actions, .admin-form, .admin-field, .admin-banner):last-child {
    margin-bottom: var(--card-pad);
}

/* Same look for the legacy hand-made card head still around: divider, padding and title size match the card head. */
.pv-card > .pv-card-head {
    min-height: 56px;
    padding: var(--space-3) var(--card-pad);
    border-bottom: 1px solid var(--line);
}

.pv-card > .pv-card-head h2 {
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
    line-height: 24px;
}

/* A submit button or action link directly in a form keeps its natural width (the form is a flex column). */
.admin-form > :is(button, .admin-btn, a.admin-btn) {
    align-self: flex-start;
}

/* Plain labels stacked inside a plain wrapper of a form (not a direct child, not in a flex fieldset or a choice group):
   the same gap as between fields. Classed labels (checkbox, segmented option, chip) are never touched. */
:where(.admin-form *:not(fieldset, .admin-field-grid, .admin-form-grid, .admin-check-group, .admin-segmented, .admin-checkbox-chips, [role="radiogroup"], .admin-form-checks)) > label:not([class]) + label:not([class]) {
    margin-top: var(--field-gap);
}

/* Header text: the description under a card title is 13px muted; the actions never wrap under the text on a normal width. */
.admin-card-head .admin-card-heading p {
    color: var(--ink-3);
    font-size: var(--text-sm, 13px);
    line-height: 18px;
}

.admin-card-head-actions {
    flex: 0 0 auto;
}

/* =====================================================================
   SWITCH (<x-fss::switch>): track 36x20 with a knob; lime only when on. The native checkbox stays focusable (visually hidden).
   ===================================================================== */
.admin-switch-field {
    display: inline-flex;
    min-height: var(--input-h);
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    color: var(--ink);
}

.admin-switch-field[data-aligned] {
    padding-top: calc(16px + var(--space-1-5));
}

.admin-switch-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}

.admin-switch-track {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex: none;
    border-radius: var(--radius-full);
    background: var(--line-field);
    transition: background var(--dur-fast, 120ms) var(--ease-out, ease-out);
}

.admin-switch-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
    background: #fff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
    transition: transform var(--dur-fast, 120ms) var(--ease-out, ease-out);
}

.admin-switch-input:checked + .admin-switch-track {
    background: var(--accent);
}

.admin-switch-input:checked + .admin-switch-track .admin-switch-knob {
    transform: translateX(16px);
}

.admin-switch-input:focus-visible + .admin-switch-track {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
}

.admin-switch-input:disabled + .admin-switch-track {
    opacity: 0.5;
}

.admin-switch-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.admin-switch-label {
    font-size: var(--text-sm, 13px);
    font-weight: var(--font-medium);
    line-height: 18px;
}

.admin-switch-help {
    color: var(--ink-3);
    font-size: var(--text-xs);
    line-height: 16px;
}

/* =====================================================================
   SEGMENTED RADIO GROUP (<x-fss::radio-group>): one pill control. Like every field it ends with the form's field gap.
   ===================================================================== */
.admin-radio-group {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-1-5);
    padding: 0;
    margin: 0;
    border: 0;
}

.admin-radio-group > legend {
    padding: 0;
    margin: 0 0 var(--space-1-5);
    color: var(--ink);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    line-height: 16px;
}

.admin-segmented {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    flex-wrap: wrap;
    padding: 2px;
    gap: 2px;
    border: 1px solid var(--line-field);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.admin-segmented-option {
    position: relative;
    display: inline-flex;
    min-height: calc(var(--input-h) - 8px);
    align-items: center;
    padding: 0 var(--space-3);
    border-radius: calc(var(--radius-sm) - 2px);
    color: var(--ink-2);
    cursor: pointer;
    font-size: var(--text-sm, 13px);
    font-weight: var(--font-medium);
}

.admin-segmented-option > input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.admin-segmented-option:has(input:checked) {
    background: var(--surface);
    box-shadow: var(--shadow-1);
    color: var(--ink);
}

.admin-segmented-option:has(input:focus-visible) {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 1px;
}

/* =====================================================================
   COMBOBOX: one control with exactly the look of a normal input (single border, same height, radius and padding). The wrapper
   has no border; the inner input is bare so a form's generic input rules (border, height) never draw a second box.
   ===================================================================== */
.fss-combobox .fss-combobox-control {
    padding: 0 var(--space-3);
    box-shadow: var(--shadow-1);
}

.fss-combobox .fss-combobox-control:hover:not(:focus-within) {
    border-color: #a1a1aa;
}

.fss-combobox .fss-combobox-control .fss-combobox-input {
    width: auto;
    height: calc(var(--input-h) - 2px);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    outline: none;
}

/* A table inside a card has exactly one container: the card. The table wrapper draws no card of its own, and nothing clips the column menu. */
.admin-card .admin-datatable-wrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.admin-card .admin-datatable-scroll {
    border-radius: 0;
}

.admin-card .admin-card-body:has(> .fss-datatable) {
    overflow: visible;
}

@media (max-width: 640px) {
    .admin-card[data-structured] > .admin-card-head {
        flex-wrap: wrap;
    }

    .admin-card-head-actions {
        flex: 0 1 auto;
    }
}

/* Primary control of an action row (a real button for keyboard and screen readers): looks like the cell text. */
button.admin-datatable-rowlink,
.fss-card-title button.fss-card-primary {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: inherit;
}

.fss-card-title button.fss-card-primary::after {
    position: absolute;
    inset: 0;
    content: "";
}

/* ---------- 20. ROW, TABLE, KEYVALUE, SEGMENTED, SETTING-ROW, TAG ------------------------------------------------ */

/* Tag badge: same box as a status badge but squarer; the colour comes from the inline `--tag-color`. */
.admin-status-badge[data-variant="tag"] {
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--tag-color, var(--ink-3)) 14%, white);
    color: color-mix(in oklab, var(--tag-color, var(--ink-2)) 55%, black);
    font-weight: var(--font-medium);
}

/* Accent badge: the one lime surface outside active markers; the text stays ink. */
.admin-status-badge[data-tone="accent"] {
    background: var(--accent-soft);
    color: var(--ink);
}

/* A table with its own wrap but no DataTable around it (x-fss::table): the scroll area is the only thing that scrolls, no min-width. */
.fss-datatable > .admin-datatable-wrap > .admin-datatable-scroll {
    overflow-x: auto;
}

/* Row in a card (x-fss::row): one line plus an optional sub line, exactly one table row high. */
.fss-rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fss-row {
    position: relative;
    display: flex;
    min-height: var(--row-h);
    align-items: center;
    padding: 0 var(--card-pad);
    gap: var(--space-4);
    border-top: 1px solid var(--line);
}

.fss-rows > .fss-row:first-child,
.admin-card-head + .fss-rows > .fss-row:first-child {
    border-top: 0;
}

.fss-row[data-linked]:hover {
    background: var(--sidebar-bg);
}

.fss-row-lead {
    display: grid;
    min-width: 32px;
    height: 32px;
    flex: none;
    place-items: center;
    color: var(--ink-2);
    font-size: var(--text-xs);
    white-space: nowrap;
}

.fss-row-lead[data-icon] {
    width: 32px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.fss-row-body {
    min-width: 0;
    flex: 1 1 auto;
    padding: var(--space-2) 0;
}

.fss-row-title {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: var(--ink);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    line-height: 20px;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.fss-row-title::after {
    position: absolute;
    inset: 0;
    content: "";
}

/* The stretched ::after carries the focus indicator; the link itself shows none, so there is no double ring. */
a.fss-row-title:focus-visible {
    outline-width: 0;
    box-shadow: none;
}

a.fss-row-title:focus-visible::after {
    border-radius: inherit;
    box-shadow: inset 0 0 0 2px var(--focus-ring-color);
    outline: 2px solid transparent;
    outline-offset: -2px;
}

@media (forced-colors: active) {
    a.fss-row-title:focus-visible::after {
        outline-color: CanvasText;
    }
}

.fss-row-sub {
    overflow: hidden;
    color: var(--ink-3);
    font-size: var(--text-sm, 13px);
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fss-row-sub[data-mono] {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.fss-row-status {
    flex: none;
}

.fss-row-acts {
    position: relative;
    z-index: 1;
    display: flex;
    flex: none;
    justify-content: flex-end;
    gap: var(--space-1);
}

.fss-row-chevron {
    flex: none;
    color: var(--ink-3);
}

@media (max-width: 640px) {
    .fss-row {
        gap: var(--space-3);
    }

    .fss-row-status {
        max-width: 40%;
        overflow: hidden;
    }
}

/* Sortable list (x-fss::sortable-list / sortable-item): a row with a grip on the left; the dragged row lifts, the target row shows a ring. */
.fss-sortable-item {
    background: var(--surface);
}

.fss-sortable-item[data-dragging="true"] {
    z-index: 2;
    box-shadow: var(--shadow-2);
}

.fss-sortable-item[data-over="true"] {
    box-shadow: inset 0 0 0 2px var(--accent);
}

.fss-sortable-handle {
    display: inline-flex;
    width: 32px;
    height: 32px;
    flex: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    margin-left: calc(var(--space-2) * -1);
    background: transparent;
    color: var(--ink-3);
    cursor: grab;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.fss-sortable-handle:hover {
    background: var(--surface-2);
    color: var(--ink);
}

.fss-sortable-handle:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--focus-ring);
}

.fss-sortable-item[data-dragging="true"] .fss-sortable-handle {
    cursor: grabbing;
}

@media (pointer: coarse) {
    .fss-sortable-handle {
        width: 44px;
        height: 44px;
    }
}

/* Key-value list: properties of one object. dt is the small muted label, dd the value; no flex on dd, so inline content flows. */
.admin-keyvalue {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.admin-keyvalue > div {
    display: grid;
    min-height: var(--control-lg);
    align-items: baseline;
    padding: var(--space-2) 0;
    gap: var(--space-4);
    grid-template-columns: 144px minmax(0, 1fr);
}

.admin-keyvalue dt {
    color: var(--ink-3);
    font-size: var(--text-xs);
}

.admin-keyvalue dd {
    display: block;
    min-width: 0;
    margin: 0;
    color: var(--ink);
    font-size: var(--text-base);
    overflow-wrap: anywhere;
}

@media (max-width: 760px) {
    .admin-keyvalue > div {
        gap: 0;
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Segmented control made of buttons: the pressed one looks like the checked option of the radio variant. */
button.admin-segmented-option {
    border: 0;
    background: none;
    font-family: inherit;
}

.admin-segmented-option[aria-pressed="true"] {
    background: var(--surface);
    box-shadow: var(--shadow-1);
    color: var(--ink);
}

/* Radio group as a list: one row per option, radio on the left, label plus explanation, the chosen row on --surface-2. */
.admin-radio-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.admin-radio-list-option {
    display: flex;
    align-items: flex-start;
    padding: var(--space-3);
    gap: var(--space-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.admin-radio-list-option:has(input:checked) {
    background: var(--surface-2);
}

.admin-radio-list-option:has(input:focus-visible) {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 1px;
}

.admin-radio-list-option > input {
    margin: 2px 0 0;
    flex: none;
}

.admin-radio-list-text {
    display: flex;
    flex-direction: column;
    color: var(--ink);
    font-size: var(--text-base);
    line-height: 20px;
}

.admin-radio-list-text > small {
    color: var(--ink-3);
    font-size: var(--text-xs);
    line-height: 16px;
}

/* A setting with a control on the right (usually a switch). */
.admin-setting-rows {
    display: flex;
    flex-direction: column;
}

.admin-setting-row {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) 0;
    gap: var(--space-4);
}

.admin-setting-rows > .admin-setting-row + .admin-setting-row {
    border-top: 1px solid var(--line);
}

.admin-setting-row-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.admin-setting-row-label {
    color: var(--ink);
    font-size: var(--text-base);
    line-height: 20px;
}

.admin-setting-row-help {
    color: var(--ink-3);
    font-size: var(--text-xs);
    line-height: 16px;
}

.admin-setting-row-control {
    flex: none;
}

/* A DataTable is its own card (toolbar, chips, count, header, rows, footer: see the customers list). Wrapping it in another card
   gave a second inset and a card in a card on many pages; this guard makes a plain wrapper around nothing but the table invisible. */
:is(.admin-card, .admin-wide-card, .pv-card):not([data-structured]):has(> .fss-datatable:only-child, > :only-child > .fss-datatable:only-child) {
    padding: 0;
    background: none;
    box-shadow: none;
}

/* ---------- LIST CARD (x-fss::list-card) ------------------------------------------------------------------------------
   One card for both list kinds: a table (DataTable look) or a row list. Head, toolbar, chips, count, rows and footer share
   `--card-pad` left and right, one head line (56px, line under it) and one row rhythm (`--row-h`, `--row-pad-y`). */
.fss-list-card > .admin-datatable-wrap > .fss-list-card-head {
    flex-wrap: nowrap;
    min-height: 56px;
    margin: 0;
    padding: var(--space-3) var(--card-pad);
    border-bottom: 1px solid var(--line);
}

.fss-list-card-head .admin-card-head-actions {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    gap: var(--space-2);
}

/* Search in the head (a card with a title): right of the title, the same filled field as in the toolbar. */
.fss-list-card-head .admin-card-head-actions > .admin-datatable-search {
    width: 300px;
    min-width: 240px;
    max-width: 320px;
    flex: 0 1 300px;
}

/* A head with the search field keeps the one head height (56px incl. its line): the 40px field sets the vertical padding. */
.fss-list-card > .admin-datatable-wrap > .fss-list-card-head[data-search] {
    padding-block: max(0px, calc((56px - 1px - var(--control-md)) / 2));
}

/* Below the head the toolbar row only holds filters, "More filters" and "Columns". */
.fss-list-card-head + .admin-datatable-controls {
    padding-top: var(--space-3);
}

/* The head has its own line; the first row or table head must not draw a second one. */
.fss-list-card-head ~ .admin-datatable-scroll .admin-datatable thead th {
    border-top: 0;
}

.fss-list-card-head + .admin-datatable-controls ~ .admin-datatable-scroll .admin-datatable thead th {
    border-top: 1px solid var(--line);
}

.fss-list-card > .admin-datatable-wrap > :is(.fss-rows, .pv-rows) {
    margin: 0;
}

.fss-list-card > .admin-datatable-wrap > .admin-datatable-controls + :is(.fss-rows, .pv-rows) > :first-child {
    border-top: 1px solid var(--line);
}

/* Extra toolbar controls (slot `tools`): right, before "Columns". */
.admin-datatable-toolbar > .admin-datatable-tools {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

.admin-datatable-toolbar > .admin-datatable-tools + .fss-menu-host .admin-datatable-columns {
    margin-left: 0;
}

/* Narrow: the search field goes under the title, full width. */
@media (max-width: 640px) {
    .fss-list-card > .admin-datatable-wrap > .fss-list-card-head[data-search] {
        flex-wrap: wrap;
    }

    .fss-list-card-head[data-search] .admin-card-head-actions {
        width: 100%;
        flex: 1 1 100%;
    }

    .fss-list-card-head[data-search] .admin-card-head-actions > .admin-datatable-search {
        width: auto;
        max-width: none;
        flex: 1 1 auto;
    }
}


/* Long unbroken values (domains, slugs) wrap inside their cell instead of running into the next column. */
.admin-datatable td :is(.admin-datatable-cellmain, .admin-datatable-cellmain > *, a, span) { overflow-wrap: anywhere; }