@import 'LMS.Web.Client.s3b00fzm3z.bundle.scp.css';
@import '_content/Blazicons/Blazicons.ugzwxlf6d1.bundle.scp.css';

/* /Components/Layout/AdminNavMenu.razor.rz.scp.css */
/* Sidebar nav — Partner Portaal design. Sits on --lms-ink, so everything here is white-alpha.
   PortalIcon renders its <svg> in its own scope, so any rule targeting an icon needs ::deep. */

.nav[b-nes2bdsh52] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 12px;
    /* scrollbar-hide from the design */
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.nav[b-nes2bdsh52]::-webkit-scrollbar {
    display: none;
}

.nav-group[b-nes2bdsh52] {
    margin-bottom: 20px;
}

.nav-group-label[b-nes2bdsh52] {
    padding: 0 12px;
    margin-bottom: 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, .3);
}

.nav-items[b-nes2bdsh52] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-item[b-nes2bdsh52] {
    display: flex;
    flex-direction: column;
}

/* ── Top-level link ──────────────────────────────────────────────
   Shared by <a> and <button>, so the button primitives get reset here. */
.nav-link[b-nes2bdsh52] {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    gap: 12px;
    border: none;
    border-radius: 12px;
    background: transparent;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    color: rgba(255, 255, 255, .7);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

/* hover:hover keeps the highlight off touch devices, where a tap leaves the row stuck in its
   hover state until the next tap elsewhere. */
@media (hover: hover) {
    .nav-link:hover[b-nes2bdsh52] {
        background: rgba(255, 255, 255, .05);
        color: #ffffff;
    }
}

.nav-link.active[b-nes2bdsh52] {
    background: var(--lms-accent);
    color: #ffffff;
    box-shadow: 0 6px 18px -8px rgba(241, 93, 57, .9);
}

.nav-link--muted[b-nes2bdsh52] {
    font-size: 13px;
    color: rgba(255, 255, 255, .6);
}

.nav-label[b-nes2bdsh52] {
    flex: 1;
    min-width: 0;
}

.nav-badge[b-nes2bdsh52] {
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    border-radius: 999px;
    padding: 2px 6px;
    background: var(--lms-accent);
    color: #ffffff;
}

.nav-link.active .nav-badge[b-nes2bdsh52] {
    background: rgba(0, 0, 0, .25);
}

.nav-admin-tag[b-nes2bdsh52] {
    font-size: 8.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 4px;
    padding: 2px 4px;
    background: rgba(255, 255, 255, .15);
    color: rgba(255, 255, 255, .6);
}

.nav-link[b-nes2bdsh52]  .nav-chevron {
    color: rgba(255, 255, 255, .35);
    transition: transform .2s ease;
}

.nav-link.active[b-nes2bdsh52]  .nav-chevron {
    color: #ffffff;
}

.nav-link[b-nes2bdsh52]  .nav-chevron.open {
    transform: rotate(90deg);
}

/* ── Sub-nav (Instellingen sections) ─────────────────────────────
   grid-rows 0fr → 1fr is the design's collapse trick: animates height without a fixed max-height. */
.nav-subtree[b-nes2bdsh52] {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .3s ease, opacity .3s ease;
}

.nav-subtree.open[b-nes2bdsh52] {
    grid-template-rows: 1fr;
    opacity: 1;
}

.nav-subtree-clip[b-nes2bdsh52] {
    overflow: hidden;
}

.nav-subtree-rail[b-nes2bdsh52] {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 4px 0 4px 22px;
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, .15);
}

.nav-sublink[b-nes2bdsh52] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 12.5px;
    text-align: left;
    text-decoration: none;
    color: rgba(255, 255, 255, .55);
    transition: background-color .15s ease, color .15s ease;
}

@media (hover: hover) {
    .nav-sublink:hover[b-nes2bdsh52] {
        background: rgba(255, 255, 255, .05);
        color: #ffffff;
    }
}

.nav-sublink.active[b-nes2bdsh52] {
    background: rgba(255, 255, 255, .1);
    color: #ffffff;
    font-weight: 600;
}

.nav-subdot[b-nes2bdsh52] {
    position: absolute;
    left: -13.5px;
    height: 6px;
    width: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .2);
    transition: background-color .15s ease;
}

.nav-sublink.active .nav-subdot[b-nes2bdsh52] {
    background: var(--lms-accent);
}

.nav-sublink[b-nes2bdsh52]  svg {
    color: rgba(255, 255, 255, .35);
    flex-shrink: 0;
}

.nav-sublink.active[b-nes2bdsh52]  svg {
    color: var(--lms-accent);
}

.nav-sublabel[b-nes2bdsh52] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Footer ──────────────────────────────────────────────────────── */
.nav-footer[b-nes2bdsh52] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 12px;
}

.nav-logout-form[b-nes2bdsh52] {
    margin: 0;
    display: flex;
}

/* ── Mobile dropdown ─────────────────────────────────────────────────
   Below lg the nav is a light dropdown panel under the topbar rather than the ink rail (see
   PortalChrome.razor.css), so every white-alpha colour above has to flip to dark-alpha. Rows also
   grow to the client mobile menu's tap-target size (17px text, ~14px padding). */
@media (max-width: 1023px) {
    .nav[b-nes2bdsh52] {
        padding: 12px;
    }

    .nav-group[b-nes2bdsh52] {
        margin-bottom: 12px;
    }

    .nav-group-label[b-nes2bdsh52] {
        color: rgba(5, 3, 22, .45);
    }

    .nav-link[b-nes2bdsh52] {
        border-radius: 14px;
        padding: 13px 16px;
        font-size: 17px;
        color: rgba(5, 3, 22, .8);
    }

    /* Active row keeps the accent fill — white text still reads on it. */
    .nav-link.active[b-nes2bdsh52] {
        box-shadow: none;
    }

    .nav-link--muted[b-nes2bdsh52] {
        font-size: 16px;
        color: rgba(5, 3, 22, .6);
    }

    .nav-admin-tag[b-nes2bdsh52] {
        background: rgba(5, 3, 22, .1);
        color: rgba(5, 3, 22, .55);
    }

    .nav-link[b-nes2bdsh52]  .nav-chevron {
        color: rgba(5, 3, 22, .35);
    }

    .nav-subtree-rail[b-nes2bdsh52] {
        border-left-color: rgba(5, 3, 22, .15);
    }

    .nav-sublink[b-nes2bdsh52] {
        padding: 11px 12px;
        font-size: 15px;
        color: rgba(5, 3, 22, .6);
    }

    .nav-sublink.active[b-nes2bdsh52] {
        background: rgba(5, 3, 22, .08);
        color: var(--lms-dark);
    }

    .nav-subdot[b-nes2bdsh52] {
        background: rgba(5, 3, 22, .2);
    }

    .nav-sublink[b-nes2bdsh52]  svg {
        color: rgba(5, 3, 22, .35);
    }

    .nav-footer[b-nes2bdsh52] {
        border-top-color: rgba(5, 3, 22, .1);
        padding: 8px 12px 12px;
    }
}
/* /Components/Layout/AdminShell.razor.rz.scp.css */
/* Portal layout body. The sidebar and topbar live in PortalChrome.razor.css — CSS isolation is
   scoped per component, so those rules had to move with their markup. Tokens: wwwroot/app.css. */

.portal-body[b-t2ggbvk4od] {
    min-height: 100vh;
    background: var(--lms-bg);
    /* Clears the fixed topbar (64px). */
    padding-top: 64px;
}

.portal-container[b-t2ggbvk4od] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 16px;
    /* Backstop against a page widening the document. clip rather than hidden: it does not create a
       scroll container, so overflow-y stays visible and things that deliberately escape upward
       (chart tooltips, MudBlazor popovers anchored inside) still render. */
    overflow-x: clip;
}

/* Development-only exception dump inside the ErrorBoundary fallback. */
.portal-error-detail[b-t2ggbvk4od] {
    margin: 0;
    max-height: 40vh;
    overflow: auto;
    font-size: 11px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Breakpoints (design: sm 640, md 768, lg 1024) ─────────────── */
@media (min-width: 768px) {
    .portal-container[b-t2ggbvk4od] {
        padding: 24px 28px;
    }
}

@media (min-width: 1024px) {
    /* Make room for the permanent sidebar. */
    .portal-body[b-t2ggbvk4od] {
        padding-left: 262px;
    }
}
/* /Components/Layout/PortalBrand.razor.rz.scp.css */
/* Brand block — design: h-16, px-5, border-b white/10. Sits on --lms-ink.
   The logo line mirrors the client AnimatedLogo: inline-flex, gap-1.5, serif, semibold. */
.brand[b-3xucgmiqm9] {
    position: relative;
    display: flex;
    align-items: center;
    height: 64px;
    flex-shrink: 0;
    padding: 0 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.brand-logo[b-3xucgmiqm9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
    font-family: "Fraunces", ui-serif, Georgia, serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    color: #ffffff;
}

/* Two-tone from the design's wordmark: the fixed part white, the changing part accent.
   ::deep because PortalIcon renders the <svg> in its own scope, not this component's. */
.brand-logo[b-3xucgmiqm9]  .brand-clock {
    flex-shrink: 0;
    color: var(--lms-accent);
}

.brand-word[b-3xucgmiqm9] {
    display: inline-block;
    color: var(--lms-accent);
    /* Reserve the widest word ("Wellness") so the sidebar edge never shifts mid-swap. */
    min-width: 6.5ch;
    transition: opacity 600ms ease-out, filter 600ms ease-out, transform 600ms ease-out;
}

.brand-word.hidden[b-3xucgmiqm9] {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(6px);
}

@media (prefers-reduced-motion: reduce) {
    .brand-word[b-3xucgmiqm9] {
        transition: none;
    }
}
/* /Components/Layout/PortalChrome.razor.rz.scp.css */
/* Portal chrome — fixed 262px ink sidebar + fixed topbar. Moved out of AdminShell.razor.css
   together with the markup, because CSS isolation is scoped per component. Tokens: wwwroot/app.css.

   z-index budget. MudThemeProvider emits MudBlazor's scale at runtime (Popover 1200, Dialog 1400,
   Snackbar 1500, Tooltip 1600), so the chrome has to stay under 1200 — otherwise a MudSelect
   dropdown opening over the sidebar would render behind it. */
/* Mobile: the nav drops down from under the topbar, matching the client site's mobile menu
   (Client/Layout/NavMenu.razor) — full width, light surface, dark text, roomy rows, square edges.
   The ink rail only appears from lg, where it is permanent.

   Sits *below* the topbar in z-order so the closed state can hide behind it. visibility keeps the
   panel's shadow from bleeding out under the bar while closed — but it is *delayed*, never
   transitioned: visibility is a discrete property, and animating it alongside a transform on a
   fixed, scrollable element leaves iOS Safari painting a dead composited layer that outlives the
   close (it survives SPA navigation and only clears on a full page load). The opacity fade is the
   second half of that guard — a stale layer at opacity 0 has nothing to paint. */
.portal-sidebar[b-nhgybmgcx4] {
    position: fixed;
    z-index: 1070;
    top: 64px;
    left: 0;
    right: 0;
    /* Fills everything under the topbar. height, not max-height: max-height only caps the panel,
       leaving it content-sized and stopping short of the bottom. dvh, not vh — on iOS Safari 100vh
       is the *large* viewport, so the panel ran under the browser's bottom bar. */
    height: calc(100dvh - 64px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    /* Same surface as the topbar it drops out of — a distinct tint read as a stray blue block. */
    background: var(--lms-bg);
    color: var(--lms-dark);
    border-top: 1px solid rgba(5, 3, 22, .08);
    box-shadow: 0 18px 30px -12px rgba(5, 3, 22, .28);
    /* translate3d, not translateY: keeps the panel on its own compositor layer for the whole slide
       instead of Safari promoting and demoting it mid-transition. */
    transform: translate3d(0, -100%, 0);
    opacity: 0;
    visibility: hidden;
    backface-visibility: hidden;
    transition: transform .3s ease, opacity .3s ease, visibility 0s linear .3s;
}

.portal-sidebar.open[b-nhgybmgcx4] {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    visibility: visible;
    /* No delay on the way in — the panel has to be paintable before the slide starts. */
    transition: transform .3s ease, opacity .3s ease, visibility 0s;
}

/* Starts below the topbar, so the bar stays tappable while the menu is open — same as the client. */
.portal-backdrop[b-nhgybmgcx4] {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1060;
    background: rgba(0, 0, 0, .2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Same delayed-visibility guard as the panel — an opacity-0 backdrop that stays "visible" is
       another layer Safari can leave stranded. */
    transition: opacity .3s ease, visibility 0s linear .3s;
}

.portal-backdrop.open[b-nhgybmgcx4] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .3s ease, visibility 0s;
}

/* The topbar already shows where you are; the sidebar brand is redundant in the dropdown. */
.portal-sidebar[b-nhgybmgcx4]  .brand {
    display: none;
}

/* ── Topbar ────────────────────────────────────────────────────────
   Fixed rather than sticky: the chrome is no longer a sibling of the page content, so there is
   nothing for sticky to stick within. AdminShell offsets .portal-body by this height.
   Opaque on purpose — a translucent bar let content ghost through as it scrolled underneath. */
.portal-topbar[b-nhgybmgcx4] {
    position: fixed;
    z-index: 1080; /* under the sidebar, over page content */
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    height: 64px;
    align-items: center;
    gap: 16px;
    padding: 0 16px;
    border-bottom: 1px solid var(--lms-line);
    background: var(--lms-bg);
}

.portal-menu-btn[b-nhgybmgcx4] {
    display: flex;
    align-items: center;
    border: none;
    background: transparent;
    padding: 6px;
    margin-left: -6px;
    color: var(--lms-dark);
    cursor: pointer;
}

/* Three absolutely-placed bars so each can be animated on its own: the outer two rotate onto the
   middle row to form the cross, the middle one fades out under them. */
.portal-burger[b-nhgybmgcx4] {
    position: relative;
    display: block;
    height: 14px;
    width: 20px;
}

.portal-burger span[b-nhgybmgcx4] {
    position: absolute;
    left: 0;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    background: currentColor;
    transition: top .25s ease, transform .25s ease, opacity .15s ease;
}

.portal-burger span:nth-child(1)[b-nhgybmgcx4] {
    top: 0;
}

.portal-burger span:nth-child(2)[b-nhgybmgcx4] {
    top: 6px;
}

.portal-burger span:nth-child(3)[b-nhgybmgcx4] {
    top: 12px;
}

.portal-menu-btn.open .portal-burger span:nth-child(1)[b-nhgybmgcx4] {
    top: 6px;
    transform: rotate(45deg);
}

.portal-menu-btn.open .portal-burger span:nth-child(2)[b-nhgybmgcx4] {
    opacity: 0;
}

.portal-menu-btn.open .portal-burger span:nth-child(3)[b-nhgybmgcx4] {
    top: 6px;
    transform: rotate(-45deg);
}

.portal-titles[b-nhgybmgcx4] {
    min-width: 0;
    flex: 1;
}

.portal-title[b-nhgybmgcx4] {
    margin: 0;
    font-family: "Fraunces", ui-serif, Georgia, serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--lms-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-subtitle[b-nhgybmgcx4] {
    font-size: 12px;
    color: var(--lms-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* min-width:0 + ellipsis below: a flex item won't shrink under its content's min-content width, and
   a center name or e-mail local part has no break opportunity — without this the account block
   pushes the bar past the viewport. */
.portal-account[b-nhgybmgcx4] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    padding-left: 4px;
}

.portal-avatar[b-nhgybmgcx4] {
    display: flex;
    height: 36px;
    width: 36px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--lms-dark);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
}

.portal-account-text[b-nhgybmgcx4] {
    display: none;
    min-width: 0;
    max-width: 200px;
    line-height: 1.25;
}

.portal-account-name[b-nhgybmgcx4],
.portal-account-sub[b-nhgybmgcx4] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-account-name[b-nhgybmgcx4] {
    font-size: 13px;
    font-weight: 600;
    color: var(--lms-dark);
}

.portal-account-sub[b-nhgybmgcx4] {
    font-size: 11px;
    color: var(--lms-faint);
}

/* ── Breakpoints (design: sm 640, md 768, lg 1024) ─────────────── */
/* Below lg the bar reads avatar → title → hamburger: the menu button belongs under the thumb on
   the side people reach for, and the identity leads. Reordering with `order` rather than moving
   the markup keeps the DOM in reading order for screen readers and keeps the desktop bar
   (where the hamburger is hidden anyway) untouched. */
@media (max-width: 1023px) {
    .portal-account[b-nhgybmgcx4] {
        order: -1;
        padding-left: 0;
    }

    /* Optical alignment flips with the button: the negative margin has to move to the other edge. */
    .portal-menu-btn[b-nhgybmgcx4] {
        order: 1;
        margin-left: 0;
        margin-right: -6px;
    }
}

@media (min-width: 640px) {
    .portal-account-text[b-nhgybmgcx4] {
        display: block;
    }
}

@media (min-width: 768px) {
    .portal-topbar[b-nhgybmgcx4] {
        padding: 0 28px;
    }

    .portal-title[b-nhgybmgcx4] {
        font-size: 22px;
    }
}

@media (min-width: 1024px) {
    /* Permanent ink rail: undo the mobile dropdown entirely. */
    .portal-sidebar[b-nhgybmgcx4] {
        z-index: 1100;
        top: 0;
        right: auto;
        width: 262px;
        height: 100dvh;
        background: var(--lms-ink);
        color: var(--lms-ink-text);
        border-top: none;
        border-right: 1px solid rgba(255, 255, 255, .1);
        box-shadow: none;
        /* Permanent rail: nothing to slide or fade, so drop the mobile transition state entirely —
           a leftover delayed-visibility transition would flicker it on a resize across lg. */
        transform: none;
        opacity: 1;
        visibility: visible;
        transition: none;
    }

    .portal-sidebar[b-nhgybmgcx4]  .brand {
        display: flex;
    }

    .portal-backdrop[b-nhgybmgcx4] {
        display: none;
    }

    .portal-menu-btn[b-nhgybmgcx4] {
        display: none;
    }

    /* Topbar starts where the permanent sidebar ends. */
    .portal-topbar[b-nhgybmgcx4] {
        left: 262px;
    }
}
/* /Components/Pages/Admin.razor.rz.scp.css */
/* Dashboard — Partner Portaal design (admin/dashboard.jsx + portal-ui.jsx), translated to plain CSS.
   Hand-written for the same reason as AdminShell.razor.css: portal pages load MudBlazor's CSS and
   Tailwind's preflight would reset the baseline it relies on. Tokens: wwwroot/app.css.
   Design breakpoints: sm 640, md 768, lg 1024. */

.db[b-1f2jz06ces] {
    padding-bottom: 40px;
}

/* ── Shared primitives ──────────────────────────────────────────── */
.db-card[b-1f2jz06ces] {
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 0 0 1px var(--lms-line-light);
}

.db-card--pad[b-1f2jz06ces] {
    padding: 20px;
}

.db-card--clip[b-1f2jz06ces] {
    overflow: hidden;
}

.db-eyebrow[b-1f2jz06ces] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--lms-accent);
}

.db-h3[b-1f2jz06ces] {
    margin: 4px 0 0;
    font-family: "Fraunces", ui-serif, Georgia, serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--lms-dark);
}

.db-h3--tight[b-1f2jz06ces] {
    margin-bottom: 16px;
    font-size: 19px;
}

.db-italic[b-1f2jz06ces] {
    font-style: italic;
    color: var(--lms-accent);
}

.db-empty[b-1f2jz06ces] {
    margin: 0;
    padding: 28px 20px;
    text-align: center;
    font-size: 13.5px;
    color: var(--lms-muted);
}

/* Noise overlay on the dark panels — verbatim from the design's .grain. */
.db-banner[b-1f2jz06ces], .db-steps[b-1f2jz06ces] {
    position: relative;
    overflow: hidden;
}

.grain[b-1f2jz06ces]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.03 0 0 0 0 0.12 0 0 0 0.45 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.18'/></svg>");
    mix-blend-mode: multiply;
    opacity: .35;
}

.stripe[b-1f2jz06ces] {
    background-image: repeating-linear-gradient(135deg, rgba(5, 3, 22, .14) 0 7px, transparent 7px 20px);
}

/* Oversized decorative icons bleeding out of the dark panels. */
.db-glyph[b-1f2jz06ces] {
    position: absolute;
    pointer-events: none;
    line-height: 0;
}

.db-glyph--right[b-1f2jz06ces] {
    right: -64px;
    top: -64px;
    color: rgba(241, 93, 57, .15);
}

.db-glyph--left[b-1f2jz06ces] {
    left: -32px;
    bottom: -80px;
    color: rgba(255, 255, 255, .1);
}

/* ── Buttons ────────────────────────────────────────────────────── */
.db-btn[b-1f2jz06ces] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 12px;
    padding: 10px 16px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s ease, background .15s ease, box-shadow .15s ease;
}

.db-btn--primary[b-1f2jz06ces] {
    background: var(--lms-accent);
    color: #ffffff;
    border-bottom: 3px solid var(--lms-accent-edge);
}

.db-btn--primary:hover[b-1f2jz06ces] {
    filter: brightness(1.05);
}

.db-btn--onDark[b-1f2jz06ces] {
    background: rgba(255, 255, 255, .1);
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}

.db-btn--onDark:hover[b-1f2jz06ces] {
    background: rgba(255, 255, 255, .16);
}

.db-btn--ghost[b-1f2jz06ces] {
    background: #ffffff;
    color: var(--lms-muted);
    box-shadow: inset 0 0 0 1px var(--lms-line-light);
}

.db-btn--ghost:hover[b-1f2jz06ces] {
    color: var(--lms-dark);
    box-shadow: inset 0 0 0 1px var(--lms-line);
}

.db-btn--block[b-1f2jz06ces] {
    width: 100%;
}

.db-link[b-1f2jz06ces] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: transparent;
    padding: 0;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--lms-accent);
    cursor: pointer;
}

.db-link:hover[b-1f2jz06ces] {
    color: var(--lms-dark);
}

/* ── Greeting banner ────────────────────────────────────────────── */
.db-banner[b-1f2jz06ces] {
    border-radius: 24px;
    background: linear-gradient(to bottom right, var(--lms-dark), var(--lms-dark-warm));
    color: #ffffff;
    padding: 24px;
    margin-bottom: 24px;
}

.db-banner-inner[b-1f2jz06ces] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.db-banner-meta[b-1f2jz06ces] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    font-size: 13px;
}

.db-banner-date[b-1f2jz06ces] {
    color: rgba(255, 255, 255, .6);
}

.db-banner-pending[b-1f2jz06ces] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: none;
    background: transparent;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    color: var(--lms-accent);
    cursor: pointer;
    text-underline-offset: 3px;
}

.db-banner-pending:hover[b-1f2jz06ces] {
    text-decoration: underline;
}

.db-banner-title[b-1f2jz06ces] {
    margin: 12px 0 0;
    font-family: "Fraunces", ui-serif, Georgia, serif;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.08;
    color: var(--lms-pure-white);
}

.db-banner-title-alt[b-1f2jz06ces] {
    font-weight: 300;
}

.db-banner-actions[b-1f2jz06ces] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Content grid ───────────────────────────────────────────────────
   Single grid for everything under the banner. Mobile is one column and pure
   DOM order; the 3-column placement (and the stappenplan's row span) only kicks
   in at lg, where there is room for it. */
.db-grid[b-1f2jz06ces] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

/* Cards that share a row with a taller neighbour stretch to match it. Without
   pushing their footer down, that stretch would read as dead space inside the card. */
.db-card--fill[b-1f2jz06ces] {
    display: flex;
    flex-direction: column;
}

.db-card--fill .db-card-foot[b-1f2jz06ces],
.db-card--fill .db-reviews-foot[b-1f2jz06ces] {
    margin-top: auto;
}

.db-card--fill .db-sources[b-1f2jz06ces],
.db-card--fill .db-slots[b-1f2jz06ces],
.db-card--fill .db-histo[b-1f2jz06ces] {
    flex: 1 1 auto;
}

.db-kpi[b-1f2jz06ces] {
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 0 0 1px var(--lms-line-light);
    padding: 16px;
    transition: box-shadow .3s ease, transform .3s ease;
}

.db-kpi:hover[b-1f2jz06ces] {
    box-shadow: 0 0 0 1px var(--lms-line-light), 0 20px 25px -5px rgba(5, 3, 22, .1);
    transform: translateY(-2px);
}

.db-kpi-icon[b-1f2jz06ces] {
    display: flex;
    height: 36px;
    width: 36px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.db-kpi-icon--ink[b-1f2jz06ces] {
    background: var(--lms-line-light);
    color: var(--lms-dark);
}

.db-kpi-icon--accent[b-1f2jz06ces] {
    background: rgba(241, 93, 57, .15);
    color: var(--lms-accent);
}

.db-kpi-icon--blue[b-1f2jz06ces] {
    background: var(--lms-primary);
    color: var(--lms-muted);
}

.db-kpi-icon--lav[b-1f2jz06ces] {
    background: var(--lms-lavender);
    color: var(--lms-muted);
}

.db-kpi-label[b-1f2jz06ces] {
    margin-top: 14px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .13em;
    line-height: 1.35;
    color: var(--lms-faint);
}

.db-kpi-value[b-1f2jz06ces] {
    margin-top: 4px;
    font-family: "Fraunces", ui-serif, Georgia, serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
    color: var(--lms-dark);
    font-variant-numeric: tabular-nums;
}

/* ── Visits chart ───────────────────────────────────────────────── */
.db-chart-head[b-1f2jz06ces] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.db-range[b-1f2jz06ces] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.db-range-btn[b-1f2jz06ces] {
    border: none;
    border-radius: 8px;
    background: transparent;
    padding: 6px 10px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--lms-muted);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    white-space: nowrap;
}

.db-range-btn:hover[b-1f2jz06ces] {
    background: var(--lms-primary);
}

.db-range-btn.active[b-1f2jz06ces] {
    background: var(--lms-dark);
    color: #ffffff;
}

/* Plot area: y-axis gutter on the left, gridlines behind the bars.
   --db-label-h is shared so the gridline box can stop exactly where the bar
   tracks stop, which is what keeps a line's value aligned with the bar heights. */
.db-plot[b-1f2jz06ces] {
    --db-label-h: 24px;
    --db-axis-w: 28px; /* widened once there is room — see the 640px breakpoint */
    position: relative;
    padding-left: var(--db-axis-w);
}

.db-plot-lines[b-1f2jz06ces] {
    position: absolute;
    top: 0;
    left: var(--db-axis-w);
    right: 0;
    bottom: calc(var(--db-label-h) + 8px);
}

.db-grid-line[b-1f2jz06ces] {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid rgba(5, 3, 22, .07);
}

.db-axis-label[b-1f2jz06ces] {
    position: absolute;
    top: 0;
    right: 100%;
    padding-right: 6px;
    transform: translateY(-50%);
    font-size: 9.5px;
    line-height: 1;
    color: var(--lms-faint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.db-chart[b-1f2jz06ces] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 176px;
    /* Backstop for the same reason as .db-bar-label: never let the bar row widen the card. */
    max-width: 100%;
}

/* Below sm a 30-column chart has ~6px per bar — not enough for a day number under every
   fifth one, so only the weekday initials remain. */
@media (max-width: 639px) {
    .db-plot--30 .db-bar-num[b-1f2jz06ces] {
        display: none;
    }
}

.db-bar-col[b-1f2jz06ces] {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    height: 100%;
    min-width: 0;
}

.db-bar-track[b-1f2jz06ces] {
    display: flex;
    flex: 1 1 auto;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    min-height: 0;
}

.db-bar[b-1f2jz06ces] {
    position: relative;
    width: 100%;
    max-width: 26px;
    min-height: 2px;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(to top, var(--lms-dark), var(--lms-dark-mid));
    transition: background .15s ease;
}

.db-bar:hover[b-1f2jz06ces] {
    background: linear-gradient(to top, var(--lms-accent), var(--lms-accent-top));
}

.db-bar--now[b-1f2jz06ces] {
    background: linear-gradient(to top, var(--lms-accent), var(--lms-accent-top));
}

.db-bar-tip[b-1f2jz06ces] {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    border-radius: 4px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 1px var(--lms-line-light);
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--lms-dark);
    white-space: nowrap;
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: none;
}

.db-bar:hover .db-bar-tip[b-1f2jz06ces] {
    opacity: 1;
}

/* overflow:hidden matters for layout, not just looks: a flex track can shrink below its
   content, but text cannot, so without clipping the 30-day labels push the chart wider than
   its card and the whole page gains a horizontal scrollbar. */
.db-bar-label[b-1f2jz06ces] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    width: 100%;
    height: var(--db-label-h);
    overflow: hidden;
    font-size: 10px;
    line-height: 1;
    color: var(--lms-faint);
    font-variant-numeric: tabular-nums;
}

.db-bar-dow[b-1f2jz06ces] {
    font-size: 9px;
    text-transform: lowercase;
    color: var(--lms-faint);
}

.db-bar-num[b-1f2jz06ces] {
    font-weight: 600;
    color: var(--lms-muted);
}

.db-bar-label--now[b-1f2jz06ces],
.db-bar-label--now .db-bar-dow[b-1f2jz06ces],
.db-bar-label--now .db-bar-num[b-1f2jz06ces] {
    font-weight: 700;
    color: var(--lms-accent);
}

/* Weekend columns get a faint band behind the bar, so the week rhythm is legible
   even in the 30-day view where most day numbers are suppressed. Translucent
   rather than a solid tint: the bars sit above the gridlines, so an opaque band
   would hide the y-axis lines behind it. */
.db-bar-col--weekend .db-bar-track[b-1f2jz06ces] {
    background: rgba(5, 3, 22, .035);
    border-radius: 6px 6px 0 0;
}

.db-bar-col--weekend .db-bar-num[b-1f2jz06ces] {
    color: var(--lms-dark);
}

.db-chart-legend[b-1f2jz06ces] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--lms-faint);
}

.db-chart-swatch[b-1f2jz06ces] {
    height: 10px;
    width: 10px;
    border-radius: 3px;
    background: rgba(5, 3, 22, .035);
    box-shadow: inset 0 0 0 1px var(--lms-line-light);
}

.db-chart-foot[b-1f2jz06ces] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 20px;
    margin-top: 16px;
    border-top: 1px solid var(--lms-line-light);
    padding-top: 12px;
    font-size: 12px;
    color: var(--lms-muted);
}

/* Fraunces is a display serif — at ~15px its numerals get hard to read, so small
   inline figures stay in Poppins and only the big display numbers use the serif. */
.db-chart-foot strong[b-1f2jz06ces] {
    font-size: 14px;
    font-weight: 700;
    color: var(--lms-dark);
    font-variant-numeric: tabular-nums;
}

/* ── Card head / foot ───────────────────────────────────────────── */
.db-card-head[b-1f2jz06ces] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--lms-line-light);
    padding: 16px 20px;
}

.db-card-foot[b-1f2jz06ces] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 16px;
    border-top: 1px solid var(--lms-line-light);
    padding-top: 12px;
    font-size: 12px;
    color: var(--lms-muted);
}

.db-foot-inline[b-1f2jz06ces] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.db-live[b-1f2jz06ces] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--lms-accent);
}

/* ── Recent requests ────────────────────────────────────────────── */
.db-rows[b-1f2jz06ces] {
    display: flex;
    flex-direction: column;
}

.db-row[b-1f2jz06ces] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    cursor: pointer;
    transition: background .15s ease;
}

.db-row + .db-row[b-1f2jz06ces] {
    border-top: 1px solid var(--lms-line-light);
}

.db-row:hover[b-1f2jz06ces] {
    background: var(--lms-lavender-soft);
}

.db-avatar[b-1f2jz06ces] {
    display: flex;
    height: 36px;
    width: 36px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--lms-primary);
    font-size: 12px;
    font-weight: 600;
    color: var(--lms-dark);
}

.db-row-body[b-1f2jz06ces] {
    min-width: 0;
    flex: 1;
}

.db-row-top[b-1f2jz06ces] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.db-row-name[b-1f2jz06ces] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--lms-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-row-ago[b-1f2jz06ces] {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--lms-faint);
}

.db-row-sub[b-1f2jz06ces] {
    font-size: 12px;
    color: var(--lms-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-kind[b-1f2jz06ces] {
    font-weight: 500;
    color: var(--lms-muted);
}

.db-kind--lm[b-1f2jz06ces] {
    color: var(--lms-accent);
}

.db-price[b-1f2jz06ces] {
    display: none;
    flex-shrink: 0;
    border: 2px solid var(--lms-dark);
    border-radius: 12px;
    background: #ffffff;
    padding: 4px 10px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--lms-dark);
    font-variant-numeric: tabular-nums;
}

/* ── Status pills ───────────────────────────────────────────────── */
.db-pill[b-1f2jz06ces] {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.db-pill-dot[b-1f2jz06ces] {
    height: 6px;
    width: 6px;
    border-radius: 999px;
    background: currentColor;
    opacity: .7;
}

.db-pill--pending[b-1f2jz06ces] {
    background: #fffbeb;
    color: #b45309;
    box-shadow: inset 0 0 0 1px #fde68a;
}

.db-pill--accepted[b-1f2jz06ces] {
    background: #ecfdf5;
    color: #047857;
    box-shadow: inset 0 0 0 1px #a7f3d0;
}

.db-pill--rejected[b-1f2jz06ces] {
    background: #fff1f2;
    color: #be123c;
    box-shadow: inset 0 0 0 1px #fecdd3;
}

.db-pill--cancelled[b-1f2jz06ces], .db-pill--expires[b-1f2jz06ces] {
    background: var(--lms-line-light);
    color: var(--lms-muted);
    box-shadow: inset 0 0 0 1px var(--lms-line);
}

/* ── Source split ───────────────────────────────────────────────── */
.db-sources[b-1f2jz06ces] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.db-source-head[b-1f2jz06ces] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.db-source-label[b-1f2jz06ces] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--lms-muted);
}

/* ::deep — these classes land on PortalIcon's own <svg>, which carries no scope attribute. */
[b-1f2jz06ces] .db-source-icon {
    color: var(--lms-accent);
}

.db-source-value[b-1f2jz06ces] {
    font-size: 12px;
    color: var(--lms-muted);
    font-variant-numeric: tabular-nums;
}

.db-source-value strong[b-1f2jz06ces] {
    font-size: 14px;
    font-weight: 700;
    color: var(--lms-dark);
    font-variant-numeric: tabular-nums;
}

.db-source-track[b-1f2jz06ces] {
    height: 10px;
    border-radius: 999px;
    background: var(--lms-primary);
    overflow: hidden;
}

.db-source-fill[b-1f2jz06ces] {
    height: 100%;
    border-radius: 999px;
}

.db-fill--dark[b-1f2jz06ces] {
    background: var(--lms-dark);
}

.db-fill--mid[b-1f2jz06ces] {
    background: var(--lms-dark-mid);
}

.db-fill--accent[b-1f2jz06ces] {
    background: var(--lms-accent);
}

.db-fill--muted[b-1f2jz06ces] {
    background: rgba(5, 3, 22, .5);
}

/* ── Upcoming slots ─────────────────────────────────────────────── */
.db-slots[b-1f2jz06ces] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
}

.db-slot[b-1f2jz06ces] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 12px;
    background: var(--lms-lavender-soft);
    padding: 12px;
    overflow: hidden;
}

.db-slot-stripe[b-1f2jz06ces] {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 6px;
}

.db-slot-time[b-1f2jz06ces] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 48px;
    flex-shrink: 0;
    padding-left: 4px;
}

.db-slot-hour[b-1f2jz06ces] {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: var(--lms-dark);
    font-variant-numeric: tabular-nums;
}

.db-slot-dur[b-1f2jz06ces] {
    margin-top: 2px;
    font-size: 9px;
    color: var(--lms-faint);
}

.db-slot-div[b-1f2jz06ces] {
    align-self: stretch;
    width: 1px;
    background: var(--lms-line-light);
}

.db-slot-body[b-1f2jz06ces] {
    min-width: 0;
    flex: 1;
}

.db-slot-title[b-1f2jz06ces] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--lms-dark);
    min-width: 0;
}

.db-slot-title span[b-1f2jz06ces] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-1f2jz06ces] .db-slot-icon {
    flex-shrink: 0;
    color: var(--lms-accent);
}

.db-slot-meta[b-1f2jz06ces] {
    font-size: 11.5px;
    color: var(--lms-muted);
}

.db-slot-price[b-1f2jz06ces] {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--lms-dark);
    font-variant-numeric: tabular-nums;
}

/* ── Stappenplan ────────────────────────────────────────────────── */
.db-steps[b-1f2jz06ces] {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    background: linear-gradient(to bottom right, var(--lms-dark), var(--lms-dark-warm));
    color: #ffffff;
    padding: 24px;
}

.db-steps .db-eyebrow[b-1f2jz06ces] {
    color: var(--lms-accent);
}

/* Spanning three grid rows makes this the tallest cell on the page. space-between
   spreads the head/progress/steps/actions over that height instead of leaving one
   large gap above the buttons. */
.db-steps-inner[b-1f2jz06ces] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    height: 100%;
}

.db-steps-head[b-1f2jz06ces] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.db-steps-title[b-1f2jz06ces] {
    margin: 4px 0 0;
    font-family: "Fraunces", ui-serif, Georgia, serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--lms-pure-white);
}

.db-steps-sub[b-1f2jz06ces] {
    margin: 4px 0 0;
    max-width: 24rem;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .55);
}

.db-steps-count[b-1f2jz06ces] {
    font-family: "Fraunces", ui-serif, Georgia, serif;
    font-size: 38px;
    font-weight: 600;
    line-height: 1;
    color: var(--lms-accent);
    font-variant-numeric: tabular-nums;
}

.db-steps-total[b-1f2jz06ces] {
    font-size: 24px;
    color: rgba(255, 255, 255, .3);
}

.db-progress[b-1f2jz06ces] {
    height: 8px;
    flex-shrink: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .15);
    overflow: hidden;
}

.db-progress-fill[b-1f2jz06ces] {
    height: 100%;
    border-radius: 999px;
    background: var(--lms-accent);
    transition: width .3s ease;
}

.db-step-list[b-1f2jz06ces] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.db-step[b-1f2jz06ces] {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: 8px;
    background: transparent;
    padding: 8px;
    margin: 0 -8px;
    text-align: left;
    font-family: inherit;
    font-size: 13px;
    color: rgba(255, 255, 255, .6);
    cursor: pointer;
    transition: background .15s ease;
}

.db-step:hover[b-1f2jz06ces] {
    background: rgba(255, 255, 255, .1);
}

.db-step.done[b-1f2jz06ces] {
    color: rgba(255, 255, 255, .85);
}

.db-step-mark[b-1f2jz06ces] {
    display: flex;
    height: 16px;
    width: 16px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
}

.db-step.done .db-step-mark[b-1f2jz06ces] {
    border-color: transparent;
    background: var(--lms-accent);
    color: #ffffff;
}

.db-step-label[b-1f2jz06ces] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-step.done .db-step-label[b-1f2jz06ces] {
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, .3);
}

[b-1f2jz06ces] .db-step-arrow {
    opacity: 0;
    transition: opacity .15s ease;
}

.db-step:hover[b-1f2jz06ces]  .db-step-arrow {
    opacity: 1;
}

.db-steps-actions[b-1f2jz06ces] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Reviews ────────────────────────────────────────────────────── */
.db-reviews[b-1f2jz06ces] {
    display: flex;
    flex-direction: column;
    padding: 24px;
}

.db-score[b-1f2jz06ces] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-top: 12px;
}

.db-score-num[b-1f2jz06ces] {
    font-family: "Fraunces", ui-serif, Georgia, serif;
    font-size: 44px;
    font-weight: 600;
    line-height: 1;
    color: var(--lms-dark);
    font-variant-numeric: tabular-nums;
}

.db-score-side[b-1f2jz06ces] {
    padding-bottom: 4px;
}

.db-stars[b-1f2jz06ces] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--lms-accent);
}

.db-score-sub[b-1f2jz06ces] {
    margin-top: 4px;
    font-size: 12px;
    color: var(--lms-faint);
}

.db-histo[b-1f2jz06ces] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
}

.db-histo-row[b-1f2jz06ces] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.db-histo-star[b-1f2jz06ces] {
    display: flex;
    width: 32px;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: var(--lms-muted);
    font-variant-numeric: tabular-nums;
}

.db-histo-track[b-1f2jz06ces] {
    height: 8px;
    flex: 1;
    border-radius: 999px;
    background: var(--lms-primary);
    overflow: hidden;
}

.db-histo-fill[b-1f2jz06ces] {
    height: 100%;
    border-radius: 999px;
}

.db-histo-num[b-1f2jz06ces] {
    width: 28px;
    flex-shrink: 0;
    text-align: right;
    font-size: 11px;
    color: var(--lms-faint);
    font-variant-numeric: tabular-nums;
}

.db-reviews-foot[b-1f2jz06ces] {
    margin-top: auto;
    padding-top: 20px;
}

.db-nudge[b-1f2jz06ces] {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 12px;
    background: rgba(241, 93, 57, .1);
    padding: 10px 12px;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--lms-accent);
}

/* PortalIcon renders the star outline; the score/histogram want it solid. */
.db-stars[b-1f2jz06ces]  svg.filled,
.db-histo[b-1f2jz06ces]  svg.filled {
    fill: currentColor;
}

.db-stars[b-1f2jz06ces]  svg.faded {
    opacity: .25;
}

/* ── Breakpoints ────────────────────────────────────────────────── */
@media (min-width: 640px) {
    /* KPIs pair up; every other card stays full width until the 3-column layout
       at lg gives them somewhere sensible to sit. */
    .db-grid[b-1f2jz06ces] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .db-grid > :not(.db-kpi)[b-1f2jz06ces] {
        grid-column: 1 / -1;
    }

    /* Fifth KPI is alone on its row — span it so the row doesn't end in a gap. */
    .db-grid > .db-kpi:nth-child(5)[b-1f2jz06ces] {
        grid-column: 1 / -1;
    }

    .db-plot[b-1f2jz06ces] {
        --db-axis-w: 38px;
    }

    .db-chart[b-1f2jz06ces] {
        gap: 6px;
    }

    .db-price[b-1f2jz06ces] {
        display: block;
    }
}

@media (min-width: 768px) {
    .db-banner[b-1f2jz06ces] {
        padding: 32px;
    }

    .db-banner-title[b-1f2jz06ces] {
        font-size: 36px;
    }

    .db-grid[b-1f2jz06ces] {
        gap: 20px;
    }

    .db-kpi[b-1f2jz06ces] {
        padding: 18px;
    }

    .db-kpi-value[b-1f2jz06ces] {
        font-size: 30px;
    }

    .db-steps-title[b-1f2jz06ces] {
        font-size: 27px;
    }
}

@media (min-width: 1024px) {
    .db-grid[b-1f2jz06ces] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Release the full-width spans applied from 640px up, so the placement rules
       below can take over. Same specificity as the 640px rules, so source order
       decides — these must stay above them. */
    .db-grid > :not(.db-kpi)[b-1f2jz06ces],
    .db-grid > .db-kpi:nth-child(5)[b-1f2jz06ces] {
        grid-column: auto;
    }

    /* Chart and recent requests span the two columns left of the stappenplan.
       Selector is scoped to .db-grid > so it outranks the reset above. */
    .db-grid > .db-cell--wide[b-1f2jz06ces] {
        grid-column: 1 / span 2;
    }

    /* Stappenplan: one column, starting under Website-klikken (row 2), two rows tall
       so its bottom lines up with the chart. Explicitly placed items are positioned
       before auto-placement runs, so KPIs 4 and 5 fill row 2 columns 1-2 around it
       and the chart drops to row 3.

       Everything after that auto-packs without gaps: recent requests (wide) takes
       row 4 columns 1-2, the source split fills row 4 column 3, then Vandaag (wide)
       and reviews close row 5 — a full final row, so nothing dangles. */
    .db-grid > .db-cell--steps[b-1f2jz06ces] {
        grid-column: 3;
        grid-row: 2 / span 2;
    }

    /* Two-line labels on the narrower lg columns would otherwise shift the KPI
       numbers out of alignment across the row. */
    .db-kpi-label[b-1f2jz06ces] {
        min-height: 2.3em;
    }

    .db-banner-inner[b-1f2jz06ces] {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
}
/* /Components/Pages/AdminBookings/AdminBookings.razor.rz.scp.css */
/* Boekingen (Admin) — read-only variant of the Last Minutes list. Shared primitives (.pui-*) live
   in wwwroot/app.css; only the center bar and the row layout are page-specific. The table/card switch
   is a CONTAINER query keyed off the list's own width, same reason as LastMinutes.razor.css. */

.ab-centerbar[b-5tsvhxu05l] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-bottom: 18px;
}

.ab-centerbar-label[b-5tsvhxu05l] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--lms-faint);
}

/* Searchable combobox: the input filters an absolutely-positioned result list. Reuses the shared
   .pui-dd-panel / .pui-dd-option kit (wwwroot/app.css) for the list itself. */
.ab-combo[b-5tsvhxu05l] {
    position: relative;
    flex: 1 1 320px;
    min-width: 0;
    max-width: 420px;
}

.ab-combo-input[b-5tsvhxu05l] {
    width: 100%;
}

.ab-combo-panel[b-5tsvhxu05l] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 40;
    max-height: 320px;
    overflow-y: auto;
}

.ab-combo-empty[b-5tsvhxu05l] {
    padding: 10px 14px;
    font-size: 12.5px;
    color: var(--lms-faint);
}

.ab-filters[b-5tsvhxu05l] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.ab-filter-right[b-5tsvhxu05l] {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    align-items: stretch;
    gap: 10px;
}

    .ab-filter-right > *[b-5tsvhxu05l] {
        min-width: 0;
    }

    .ab-filter-right[b-5tsvhxu05l]  .pui-dd {
        flex: 1 1 auto;
        min-width: 0;
    }

.ab-search[b-5tsvhxu05l] {
    flex: 1 1 180px;
}

.ab-list[b-5tsvhxu05l] {
    container-type: inline-size;
}

.ab-rows > * + *[b-5tsvhxu05l] {
    border-top: 1px solid var(--lms-line-light);
}

.ab-row.is-expired[b-5tsvhxu05l] {
    opacity: .55;
}

/* ── Cells shared by both layouts ───────────────────────────────────────── */
.ab-date[b-5tsvhxu05l] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 12px;
    background: var(--lms-primary);
    padding: 6px 0;
}

.ab-date.is-overnight[b-5tsvhxu05l] {
    background: rgba(241, 93, 57, .12);
}

.ab-date-plus[b-5tsvhxu05l] {
    position: absolute;
    top: -5px;
    right: -5px;
    border-radius: 999px;
    background: var(--lms-accent);
    padding: 0 4px;
    font-size: 9px;
    font-weight: 700;
    line-height: 15px;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

.ab-date-month[b-5tsvhxu05l] {
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--lms-faint);
}

.ab-date-day[b-5tsvhxu05l] {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--lms-dark);
    font-variant-numeric: tabular-nums;
}

.ab-date-dow[b-5tsvhxu05l] {
    font-size: 9px;
    color: var(--lms-faint);
}

.ab-time[b-5tsvhxu05l] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--lms-dark);
    font-variant-numeric: tabular-nums;
}

.ab-overnight-tag[b-5tsvhxu05l] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--lms-accent);
}

.ab-overnight-tag svg[b-5tsvhxu05l] {
    flex-shrink: 0;
}

.ab-overnight-flag[b-5tsvhxu05l] {
    font-weight: 600;
    color: var(--lms-accent);
}

.ab-deal[b-5tsvhxu05l] {
    min-width: 0;
}

.ab-deal-title[b-5tsvhxu05l] {
    font-size: 13px;
    font-weight: 600;
    color: var(--lms-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ab-deal-meta[b-5tsvhxu05l] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    font-size: 10.5px;
    color: var(--lms-faint);
}

.ab-deal-ref[b-5tsvhxu05l] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    text-transform: uppercase;
}

.ab-deal-flag[b-5tsvhxu05l] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Klant / bron cell */
.ab-source[b-5tsvhxu05l] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 11.5px;
    color: var(--lms-muted);
}

.ab-customer[b-5tsvhxu05l] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--lms-dark);
}

.ab-provider[b-5tsvhxu05l] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    background: rgba(224, 234, 245, .6);
    padding: 1px 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--lms-muted);
}

.ab-source-none[b-5tsvhxu05l] {
    color: var(--lms-faint);
}

/* ── Card layout (narrow) ───────────────────────────────────────────────── */
.ab-thead[b-5tsvhxu05l] {
    display: none;
    border-radius: 20px 20px 0 0;
}

.ab-row[b-5tsvhxu05l] {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    grid-template-areas:
        "date deal  price"
        "date cat   cat"
        "foot foot  foot";
    align-items: center;
    gap: 8px 12px;
    padding: 14px 16px;
}

    .ab-row > .ab-date[b-5tsvhxu05l] {
        grid-area: date;
        align-self: start;
    }

    .ab-row > .ab-deal[b-5tsvhxu05l] {
        grid-area: deal;
    }

    .ab-row > .ab-price-cell[b-5tsvhxu05l] {
        grid-area: price;
    }

    .ab-row > .ab-cat-cell[b-5tsvhxu05l] {
        grid-area: cat;
    }

    .ab-row > .ab-time[b-5tsvhxu05l] {
        display: none;
    }

.ab-time-inline[b-5tsvhxu05l] {
    font-weight: 600;
    color: var(--lms-muted);
    font-variant-numeric: tabular-nums;
}

.ab-foot[b-5tsvhxu05l] {
    grid-area: foot;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px dashed var(--lms-line-light);
}

.ab-source[b-5tsvhxu05l] {
    margin-left: auto;
    justify-content: flex-end;
}

/* ── Table layout (wide) ────────────────────────────────────────────────── */
/* 52+96+132+104+112 fixed + 150 + 160 min + 6×12 gap ≈ 878 — clear that before switching. */
@container (min-width: 880px) {
    .ab-thead[b-5tsvhxu05l],
    .ab-row[b-5tsvhxu05l] {
        display: grid;
        grid-template-columns: 52px 96px 132px minmax(150px, 1fr) 104px 112px minmax(140px, 190px);
        grid-template-areas: none;
        align-items: center;
        gap: 12px;
        padding: 12px 20px;
    }

        .ab-row > .ab-date[b-5tsvhxu05l],
        .ab-row > .ab-deal[b-5tsvhxu05l],
        .ab-row > .ab-price-cell[b-5tsvhxu05l],
        .ab-row > .ab-cat-cell[b-5tsvhxu05l] {
            grid-area: auto;
            align-self: center;
        }

    .ab-foot[b-5tsvhxu05l] {
        display: contents;
    }

    .ab-thead[b-5tsvhxu05l] {
        border-bottom: 1px solid var(--lms-line-light);
        background: rgba(224, 234, 245, .4);
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 9.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .14em;
        color: var(--lms-faint);
    }

    .ab-row > .ab-time[b-5tsvhxu05l] {
        display: block;
    }

    .ab-time-inline[b-5tsvhxu05l] {
        display: none;
    }

    .ab-foot[b-5tsvhxu05l],
    .ab-source[b-5tsvhxu05l] {
        margin: 0;
        padding: 0;
        border: none;
    }

    .ab-source[b-5tsvhxu05l] {
        justify-content: flex-start;
    }
}

@media (hover: hover) {
    .ab-row:hover[b-5tsvhxu05l] {
        background: rgba(224, 234, 245, .4);
    }
}
/* /Components/Pages/Arrangements/Arrangements.razor.rz.scp.css */
/* Arrangementen — Partner Portaal design (admin/arrangementen.jsx). Shared primitives live in
   wwwroot/app.css as .pui-*; only the list is page-specific.

   Same container query as the Last Minutes list, and for the same reason: from lg the permanent
   262px sidebar plus container padding takes ~320px off the viewport, so a viewport breakpoint
   would claim room for the table that isn't there. */

.ar-filters[b-psfe835of7] {
    margin-bottom: 16px;
}

.ar-search[b-psfe835of7] {
    width: 100%;
}

.ar-list[b-psfe835of7] {
    container-type: inline-size;
}

.ar-rows > * + *[b-psfe835of7] {
    border-top: 1px solid var(--lms-line-light);
}

/* Offline arrangements stay legible but read as parked. */
.ar-row.is-inactive[b-psfe835of7] {
    opacity: .6;
}

/* ── Cells shared by both layouts ───────────────────────────────────────── */
.ar-prio[b-psfe835of7] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ar-prio-arrows[b-psfe835of7] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* 28px squares styled like .pui-iconbtn — the design's bare 13px glyphs were the smallest targets
   on the page and all but invisible on desktop. */
.ar-prio-arrow[b-psfe835of7] {
    display: flex;
    height: 28px;
    width: 28px;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: #ffffff;
    padding: 0;
    color: var(--lms-muted);
    cursor: pointer;
    box-shadow: inset 0 0 0 1px var(--lms-line);
    transition: color .15s ease, box-shadow .15s ease;
}

.ar-prio-arrow:disabled[b-psfe835of7] {
    opacity: .3;
    cursor: not-allowed;
}

/* ::deep: the class lands on PortalIcon's <svg>, which carries its own scope attribute.
   PortalIcon has no chevronUp, so both arrows are chevronRight, rotated. */
.ar-prio-arrows[b-psfe835of7]  .ar-arrow-up {
    transform: rotate(-90deg);
}

.ar-prio-arrows[b-psfe835of7]  .ar-arrow-down {
    transform: rotate(90deg);
}

.ar-prio-badge[b-psfe835of7] {
    display: flex;
    height: 32px;
    width: 32px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--lms-dark);
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

.ar-main[b-psfe835of7] {
    min-width: 0;
}

.ar-title-row[b-psfe835of7] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ar-title[b-psfe835of7] {
    margin: 0;
    font-family: "Fraunces", ui-serif, Georgia, serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--lms-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Two lines then clipped — descriptions run to 600 characters and would otherwise set the row
   height for the whole table. */
.ar-desc[b-psfe835of7] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--lms-muted);
}

.ar-actions[b-psfe835of7] {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Card layout (narrow) ───────────────────────────────────────────────── */
.ar-thead[b-psfe835of7] {
    display: none;
}

.ar-row[b-psfe835of7] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "prio  main"
        "price price"
        "foot  foot";
    align-items: center;
    gap: 10px 12px;
    padding: 14px 16px;
}

.ar-row > .ar-prio[b-psfe835of7] { grid-area: prio; align-self: start; }
.ar-row > .ar-main[b-psfe835of7] { grid-area: main; }
.ar-row > .ar-price-cell[b-psfe835of7] { grid-area: price; }

.ar-foot[b-psfe835of7] {
    grid-area: foot;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--lms-line-light);
}

/* Card footer reads: status pill hard left, then the switch, then edit/delete on the right.
   `order` rather than markup order — the DOM has to stay online-then-actions to line up with the
   table columns once .ar-foot becomes display:contents. */
.ar-online-pill[b-psfe835of7] {
    order: 0;
    margin-right: auto;
}

.ar-online[b-psfe835of7] {
    order: 1;
    display: flex;
    align-items: center;
}

.ar-actions[b-psfe835of7] {
    order: 2;
}

/* The status lives with the switch that controls it on a card; the table has a Prio/title row
   wide enough to carry it next to the name instead. */
.ar-title-pill[b-psfe835of7] {
    display: none;
}

/* ── Table layout (wide) ────────────────────────────────────────────────── */
/* 74+104+48+116 fixed + 230 min + 4×12 gap = 620 — the threshold has to clear that or the last
   column clips before the layout switches. Prio is 74px rather than the design's 70: the badge is
   32 and the arrows are 28, plus the 6px gap between them. Actions is 116px: three 32px .pui-iconbtn
   squares (maak-last-minute, bewerken, verwijderen) plus the 6px gaps between them. */
@container (min-width: 660px) {
    .ar-thead[b-psfe835of7],
    .ar-row[b-psfe835of7] {
        display: grid;
        grid-template-columns: 74px minmax(230px, 1fr) 104px 48px 116px;
        grid-template-areas: none;
        align-items: center;
        gap: 12px;
        padding: 12px 20px;
    }

    /* Named placements have to be cleared explicitly: a grid-area pointing at an area that no
       longer exists resolves to a missing line name, which is not the same as auto placement. */
    .ar-row > .ar-prio[b-psfe835of7],
    .ar-row > .ar-main[b-psfe835of7],
    .ar-row > .ar-price-cell[b-psfe835of7] {
        grid-area: auto;
        align-self: center;
    }

    /* Unwrap the card's action group so online / actions land in their own columns. */
    .ar-foot[b-psfe835of7] {
        display: contents;
    }

    .ar-thead[b-psfe835of7] {
        border-bottom: 1px solid var(--lms-line-light);
        background: rgba(224, 234, 245, .4);
        border-radius: 16px 16px 0 0;
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 9.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .14em;
        color: var(--lms-faint);
    }

    .ar-th--center[b-psfe835of7] { text-align: center; }
    .ar-th--right[b-psfe835of7] { text-align: right; }

    /* Swap which of the two status pills is shown: the Online column is 48px, nowhere near enough
       for a pill, so in the table it goes back beside the title. */
    .ar-online-pill[b-psfe835of7] {
        display: none;
    }

    .ar-title-pill[b-psfe835of7] {
        display: inline-flex;
    }

    /* The card ordering must not survive into the grid, or the two cells swap columns. */
    .ar-actions[b-psfe835of7],
    .ar-online[b-psfe835of7] {
        order: 0;
    }

    .ar-online[b-psfe835of7] {
        justify-content: center;
    }

    .ar-actions[b-psfe835of7] {
        justify-content: flex-end;
    }

    .ar-search[b-psfe835of7] {
        width: auto;
        max-width: 280px;
    }
}

@media (hover: hover) {
    .ar-row:hover[b-psfe835of7] {
        background: rgba(224, 234, 245, .4);
    }

    .ar-prio-arrow:hover:not(:disabled)[b-psfe835of7] {
        color: var(--lms-dark);
        box-shadow: inset 0 0 0 1px var(--lms-line-input);
    }
}
/* /Components/Pages/CenterSettings/CenterSettings.razor.rz.scp.css */
/* ===== Instellingen page — Partner Portaal design =====
   Colors come from the --lms-* tokens in wwwroot/app.css (:root, so they inherit into this
   scoped sheet). Don't hardcode hexes here — the C# mirror is Common/BrandPalette.cs.
   Scoped to this page; child components are reached via ::deep.  */

.st-page[b-dnut3y69tz] { max-width: 1200px; margin: 0 auto; }

/* ── Segmented tab bar ─────────────────────────────────────────── */
.st-page[b-dnut3y69tz]  .st-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 2px 2px 6px;
    margin-bottom: 24px;
}
.st-page[b-dnut3y69tz]  .st-tabs::-webkit-scrollbar { display: none; }

.st-page[b-dnut3y69tz]  .st-tab {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(5, 3, 22, .12);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    color: rgba(5, 3, 22, .7);
    background: #ffffff;
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
}
.st-page[b-dnut3y69tz]  .st-tab svg { color: var(--lms-accent); }
.st-page[b-dnut3y69tz]  .st-tab:hover { color: var(--lms-dark); border-color: rgba(5, 3, 22, .25); }
.st-page[b-dnut3y69tz]  .st-tab.active {
    background: var(--lms-dark);
    border-color: var(--lms-dark);
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(5, 3, 22, .1);
}
.st-page[b-dnut3y69tz]  .st-tab.active svg { color: var(--lms-accent); }

/* ── Content card ──────────────────────────────────────────────── */
.st-page[b-dnut3y69tz]  .st-card {
    border-radius: 16px;
    background: var(--lms-lavender-soft);
    box-shadow: inset 0 0 0 1px rgba(5, 3, 22, .1);
    padding: 20px;
}
@media (min-width: 768px) { .st-page[b-dnut3y69tz]  .st-card { padding: 28px; } }

.st-page[b-dnut3y69tz]  .st-intro {
    font-size: 13.5px;
    color: rgba(5, 3, 22, .65);
    margin: 0 0 16px;
    max-width: 36rem;
    line-height: 1.55;
}

.st-page[b-dnut3y69tz]  .st-narrow { max-width: 42rem; }

/* ── Fields ────────────────────────────────────────────────────── */
.st-page[b-dnut3y69tz]  .st-field { display: flex; flex-direction: column; }

.st-page[b-dnut3y69tz]  .st-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.st-page[b-dnut3y69tz]  .st-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(5, 3, 22, .8);
}
.st-page[b-dnut3y69tz]  .st-label svg { color: var(--lms-accent); }

.st-page[b-dnut3y69tz]  .st-counter {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: rgba(5, 3, 22, .4);
}
.st-page[b-dnut3y69tz]  .st-counter.warn { color: var(--lms-accent); }

.st-page[b-dnut3y69tz]  .st-input-wrap {
    display: flex;
    align-items: center;
    border: 1px solid rgba(5, 3, 22, .2);
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.st-page[b-dnut3y69tz]  .st-input-wrap:focus-within {
    border-color: var(--lms-accent);
    box-shadow: 0 0 0 2px rgba(241, 93, 57, .15);
}
.st-page[b-dnut3y69tz]  .st-input-wrap > svg { margin-left: 16px; color: rgba(5, 3, 22, .4); flex-shrink: 0; }

.st-page[b-dnut3y69tz]  .st-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: 12px 16px;
    font-size: 14px;
    font-family: inherit;
    color: var(--lms-dark);
}
.st-page[b-dnut3y69tz]  .st-input::placeholder { color: rgba(5, 3, 22, .35); }

.st-page[b-dnut3y69tz]  .st-textarea {
    width: 100%;
    border: 1px solid rgba(5, 3, 22, .2);
    border-radius: 12px;
    background: #ffffff;
    padding: 12px 16px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.6;
    color: var(--lms-dark);
    outline: none;
    resize: vertical;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.st-page[b-dnut3y69tz]  .st-textarea::placeholder { color: rgba(5, 3, 22, .35); }
.st-page[b-dnut3y69tz]  .st-textarea:focus {
    border-color: var(--lms-accent);
    box-shadow: 0 0 0 2px rgba(241, 93, 57, .15);
}

.st-page[b-dnut3y69tz]  .st-hint {
    margin: 6px 0 0;
    font-size: 11.5px;
    color: rgba(5, 3, 22, .5);
}

/* ── Layout helpers ────────────────────────────────────────────── */
.st-page[b-dnut3y69tz]  .st-stack { display: flex; flex-direction: column; gap: 20px; }

.st-page[b-dnut3y69tz]  .st-grid2 { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 768px) { .st-page[b-dnut3y69tz]  .st-grid2 { grid-template-columns: 1fr 1fr; } }

.st-page[b-dnut3y69tz]  .st-pagina-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 1024px) {
    .st-page[b-dnut3y69tz]  .st-pagina-grid { grid-template-columns: 1fr 360px; }
    .st-page[b-dnut3y69tz]  .st-preview-col { position: sticky; top: 88px; align-self: start; }
}

/* ── Live preview ──────────────────────────────────────────────── */
.st-page[b-dnut3y69tz]  .st-preview-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: rgba(5, 3, 22, .45);
    margin-bottom: 8px;
}

/* Phone mockup that mirrors the mobile deluxe page */
.st-page[b-dnut3y69tz]  .st-phone {
    width: 300px;
    max-width: 100%;
    margin: 0 auto;
    background: var(--lms-dark);
    border-radius: 36px;
    padding: 10px;
    box-shadow: 0 18px 40px -14px rgba(5, 3, 22, .45);
}
.st-page[b-dnut3y69tz]  .st-phone-screen {
    border-radius: 27px;
    overflow: hidden;
    background: var(--lms-lavender-soft);
}

.st-page[b-dnut3y69tz]  .st-phone-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
}
.st-page[b-dnut3y69tz]  .st-phone-logo {
    height: 20px;
    width: auto;
    object-fit: contain;
    display: block;
}
.st-page[b-dnut3y69tz]  .st-phone-menu span {
    display: block;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--lms-dark);
    margin: 2.5px 0;
}

.st-page[b-dnut3y69tz]  .st-phone-hero {
    position: relative;
    height: 150px;
    border-radius: 0 0 18px 18px;
    overflow: hidden;
    background-color: var(--lms-primary);
    background-image: repeating-linear-gradient(135deg, rgba(5, 3, 22, .09) 0 8px, transparent 8px 22px);
}
.st-page[b-dnut3y69tz]  .st-phone-hero img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.st-page[b-dnut3y69tz]  .st-preview-hero-tag {
    position: absolute;
    bottom: 10px;
    left: 14px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(5, 3, 22, .4);
}
.st-page[b-dnut3y69tz]  .st-phone-dots {
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 4px;
}
.st-page[b-dnut3y69tz]  .st-phone-dots span {
    height: 5px;
    width: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
}
.st-page[b-dnut3y69tz]  .st-phone-dots span.on { background: #ffffff; }

.st-page[b-dnut3y69tz]  .st-phone-body { padding: 14px 16px 18px; }
.st-page[b-dnut3y69tz]  .st-phone-name {
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--lms-dark);
}
.st-page[b-dnut3y69tz]  .st-phone-meta { margin-top: 8px; }
.st-page[b-dnut3y69tz]  .st-phone-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    background: rgba(241, 93, 57, .15);
    color: var(--lms-accent);
    font-size: 10.5px;
    font-weight: 500;
    padding: 4px 9px;
}
.st-page[b-dnut3y69tz]  .st-phone-address {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    color: rgba(0, 0, 0, .55);
}
.st-page[b-dnut3y69tz]  .st-phone-address svg { color: var(--lms-dark); flex-shrink: 0; }

.st-page[b-dnut3y69tz]  .st-phone-title {
    margin: 14px 0 0;
    font-family: 'Fraunces', ui-serif, Georgia, serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--lms-dark);
}
.st-page[b-dnut3y69tz]  .st-phone-sub {
    margin: 2px 0 0;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--lms-accent);
}
.st-page[b-dnut3y69tz]  .st-phone-desc {
    margin: 8px 0 0;
    font-size: 10.5px;
    line-height: 1.6;
    color: rgba(0, 0, 0, .6);
    white-space: pre-line;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.st-page[b-dnut3y69tz]  .st-phone-more {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--lms-accent);
}
.st-page[b-dnut3y69tz]  .st-preview-note {
    margin: 12px 4px 0;
    font-size: 11.5px;
    line-height: 1.6;
    color: rgba(5, 3, 22, .5);
}
.st-page[b-dnut3y69tz]  .st-preview-note strong { color: rgba(5, 3, 22, .7); }

/* ── Save bar ──────────────────────────────────────────────────── */
.st-page[b-dnut3y69tz]  .st-savebar {
    position: sticky;
    bottom: 16px;
    z-index: 5;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(5, 3, 22, .12), 0 10px 24px -8px rgba(5, 3, 22, .18);
    padding: 12px 20px;
}
.st-page[b-dnut3y69tz]  .st-savebar-status { font-size: 12.5px; color: rgba(5, 3, 22, .6); }
.st-page[b-dnut3y69tz]  .st-savebar-status .dirty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    color: var(--lms-accent);
}
.st-page[b-dnut3y69tz]  .st-savebar-actions { display: flex; align-items: center; gap: 8px; }

.st-page[b-dnut3y69tz]  .st-btn-ghost {
    border: none;
    background: transparent;
    border-radius: 12px;
    padding: 10px 16px;
    font-size: 13.5px;
    font-weight: 500;
    font-family: inherit;
    color: rgba(5, 3, 22, .7);
    cursor: pointer;
    transition: background .15s;
}
.st-page[b-dnut3y69tz]  .st-btn-ghost:hover:not(:disabled) { background: var(--lms-lavender); }
.st-page[b-dnut3y69tz]  .st-btn-ghost:disabled { opacity: .4; cursor: not-allowed; }

.st-page[b-dnut3y69tz]  .st-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    border-bottom: 3px solid var(--lms-accent-edge);
    border-radius: 12px;
    background: var(--lms-accent);
    color: #ffffff;
    padding: 10px 20px;
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: filter .15s;
}
.st-page[b-dnut3y69tz]  .st-btn-primary:hover:not(:disabled) { filter: brightness(1.05); }
.st-page[b-dnut3y69tz]  .st-btn-primary:disabled {
    opacity: .4;
    cursor: not-allowed;
    border-bottom-width: 0;
}

.st-page[b-dnut3y69tz]  .st-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(5, 3, 22, .25);
    border-radius: 12px;
    background: #ffffff;
    color: var(--lms-dark);
    padding: 10px 16px;
    font-size: 13.5px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .15s;
}
.st-page[b-dnut3y69tz]  .st-btn-outline:hover:not(:disabled) { border-color: rgba(5, 3, 22, .5); }
.st-page[b-dnut3y69tz]  .st-btn-outline:disabled { opacity: .4; cursor: not-allowed; }

/* ── Selection chips (facilities / payments) ───────────────────── */
.st-page[b-dnut3y69tz]  .st-chip-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
@media (min-width: 640px) { .st-page[b-dnut3y69tz]  .st-chip-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .st-page[b-dnut3y69tz]  .st-chip-grid { grid-template-columns: repeat(4, 1fr); } }

.st-page[b-dnut3y69tz]  .st-chip-grid-2 { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .st-page[b-dnut3y69tz]  .st-chip-grid-2 { grid-template-columns: 1fr 1fr; } }

.st-page[b-dnut3y69tz]  .st-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(5, 3, 22, .15);
    border-radius: 12px;
    background: #ffffff;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    color: var(--lms-dark);
    text-align: left;
    cursor: pointer;
    transition: all .15s ease;
}
.st-page[b-dnut3y69tz]  .st-chip svg:first-child { color: var(--lms-accent); flex-shrink: 0; }
.st-page[b-dnut3y69tz]  .st-chip:hover { border-color: rgba(5, 3, 22, .4); background: var(--lms-bg); }
.st-page[b-dnut3y69tz]  .st-chip .st-chip-label { flex: 1; min-width: 0; }
.st-page[b-dnut3y69tz]  .st-chip.on {
    background: var(--lms-dark);
    border-color: var(--lms-dark);
    color: #ffffff;
}
.st-page[b-dnut3y69tz]  .st-chip.on svg:first-child { color: var(--lms-accent); }

.st-page[b-dnut3y69tz]  .st-chip-check {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    width: 20px;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(5, 3, 22, .2);
    flex-shrink: 0;
}
.st-page[b-dnut3y69tz]  .st-chip.on .st-chip-check {
    background: var(--lms-accent);
    color: #ffffff;
    box-shadow: none;
}

/* ── Toggle rows (reservations / vacation) ─────────────────────── */
.st-page[b-dnut3y69tz]  .st-optrow {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(5, 3, 22, .12);
    padding: 14px 16px;
}
.st-page[b-dnut3y69tz]  .st-opticon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    width: 36px;
    border-radius: 8px;
    background: rgba(241, 93, 57, .1);
    color: var(--lms-accent);
    flex-shrink: 0;
}
.st-page[b-dnut3y69tz]  .st-optrow-text { flex: 1; min-width: 0; }
.st-page[b-dnut3y69tz]  .st-optrow-title { font-size: 13.5px; font-weight: 600; color: var(--lms-dark); }
.st-page[b-dnut3y69tz]  .st-optrow-sub { font-size: 11.5px; color: rgba(5, 3, 22, .55); }

.st-page[b-dnut3y69tz]  .st-toggle {
    position: relative;
    height: 24px;
    width: 44px;
    border: none;
    border-radius: 999px;
    background: rgba(5, 3, 22, .2);
    cursor: pointer;
    transition: background .15s;
    flex-shrink: 0;
    padding: 0;
}
.st-page[b-dnut3y69tz]  .st-toggle .knob {
    position: absolute;
    top: 2px;
    left: 2px;
    height: 20px;
    width: 20px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    transition: left .15s;
}
.st-page[b-dnut3y69tz]  .st-toggle.on { background: #10b981; }
.st-page[b-dnut3y69tz]  .st-toggle.on .knob { left: 22px; }

/* ── White list card (opening hours) ───────────────────────────── */
.st-page[b-dnut3y69tz]  .st-list-card {
    border-radius: 16px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(5, 3, 22, .1);
    overflow: hidden;
}
.st-page[b-dnut3y69tz]  .st-list-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 10px 16px;
}
.st-page[b-dnut3y69tz]  .st-list-row + .st-list-row { border-top: 1px solid rgba(5, 3, 22, .08); }
.st-page[b-dnut3y69tz]  .st-day {
    width: 6.5rem;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--lms-dark);
    flex-shrink: 0;
}
.st-page[b-dnut3y69tz]  .st-time-group {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 290px;
    flex: 0 0 auto;
}
.st-page[b-dnut3y69tz]  .st-time-tag {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(5, 3, 22, .4);
    width: 3rem;
}

/* Column headers above the hours list — same widths/gaps as a .st-list-row so each label sits
   over its time-group. */
.st-page[b-dnut3y69tz]  .st-hours-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 0 16px 8px;
}
.st-page[b-dnut3y69tz]  .st-hours-head-day {
    width: 6.5rem;
    flex-shrink: 0;
}
.st-page[b-dnut3y69tz]  .st-hours-head-col {
    width: 290px;
    flex: 0 0 auto;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(5, 3, 22, .4);
}
.st-page[b-dnut3y69tz]  .st-link-danger {
    margin-left: auto;
    border: none;
    background: none;
    padding: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: #c0293b;
    cursor: pointer;
}
.st-page[b-dnut3y69tz]  .st-link-danger:hover { text-decoration: underline; }

/* Compact MudBlazor pickers inside the hours card. 132px so the time still reads next to the
   picker's clock + clear icons — 105px left the "14:00" cramped against the adornments. */
.st-page[b-dnut3y69tz]  .st-list-row .mud-input-control { margin: 0; width: 132px; }
.st-page[b-dnut3y69tz]  .st-list-row .mud-input-control .mud-input { background: #ffffff; }
.st-page[b-dnut3y69tz]  .st-list-row .mud-input-control .mud-input input { font-size: 14px; }
.st-page[b-dnut3y69tz]  .st-list-row .mud-input-control-helper-container { display: none; }

/* Placeholder card (design's dashed empty state) */
.st-page[b-dnut3y69tz]  .st-placeholder {
    max-width: 36rem;
    border: 2px dashed rgba(5, 3, 22, .15);
    border-radius: 16px;
    background: rgba(255, 255, 255, .5);
    padding: 40px;
    text-align: center;
}
.st-page[b-dnut3y69tz]  .st-placeholder-icon {
    margin: 0 auto 16px;
    display: flex;
    height: 56px;
    width: 56px;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--lms-primary);
    color: var(--lms-accent);
}
.st-page[b-dnut3y69tz]  .st-placeholder h3 {
    margin: 0;
    font-family: 'Fraunces', ui-serif, Georgia, serif;
    font-size: 19px;
    font-weight: 600;
    color: var(--lms-dark);
}
.st-page[b-dnut3y69tz]  .st-placeholder p {
    margin: 6px 0 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(5, 3, 22, .6);
}
/* /Components/Pages/LastMinutes/Components/ImplementWeekTemplate.razor.rz.scp.css */
/* Slot count badge on a template row. Sits between the name and the check, so it must not shrink
   or wrap — the name is the part allowed to ellipse. */
.tpl-count[b-c1fdvlhy1z] {
    flex-shrink: 0;
    font-size: 11.5px;
    color: var(--lms-faint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* On the selected (dark) row the muted grey drops below contrast. */
.pui-choice.active .tpl-count[b-c1fdvlhy1z] {
    color: rgba(255, 255, 255, .7);
}
/* /Components/Pages/LastMinutes/Components/SlotFormModal.razor.rz.scp.css */
/* Slot form — layout tweaks specific to this form. The field primitives themselves are the shared
   .pui-* kit in wwwroot/app.css. */

/* With "overnachting" off there is no Einddatum cell, so Einduur would auto-place into column 1 —
   landing under the date instead of under Startuur. Pinning it to column 2 keeps the two times in
   one column whichever mode the form is in. Only from sm: below that the grid is a single column
   and everything stacks anyway. */
@media (min-width: 640px) {
    .slot-endtime[b-phmzvnynj9] {
        grid-column: 2;
    }
}
/* /Components/Pages/LastMinutes/LastMinutes.razor.rz.scp.css */
/* Last Minutes — Partner Portaal design (admin/lastminutes.jsx), translated to plain CSS.
   Shared primitives (buttons, pills, chips, stat strip, empty state) live in wwwroot/app.css
   as .pui-*; only the slot list is page-specific. Tokens: wwwroot/app.css.

   The table/card switch is a CONTAINER query, not a media query: from lg the permanent 262px
   sidebar and the container padding take ~320px off the viewport, so a viewport breakpoint would
   claim there is room for the 8-column grid when there isn't. Keying off the list's own inline
   size is the only measure that tells the truth at every width. */

.lm-filters[b-8x67l1njmn] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

/* Category dropdown + search.

   flex-wrap with a real min size on the search is what makes this self-adjusting: a flex line is
   filled using each item's hypothetical size, so a long selected category ("Beauty & massage")
   grows the dropdown's basis until the pair no longer fits, at which point the search drops to its
   own line. Both carry flex-grow, so once they are alone on a line they each fill the full width —
   the same behaviour as the client search page's filter row, without a breakpoint deciding it.

   align-items: stretch keeps the two controls exactly the same height whatever their text size.
   min-width: 0 on the children is separate and still needed: flex items default to min-width:auto
   and neither control's text wraps, so without it the row would push past the viewport instead of
   ellipsing. */
.lm-filter-right[b-8x67l1njmn] {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    align-items: stretch;
    gap: 10px;
}

    .lm-filter-right > *[b-8x67l1njmn] {
        min-width: 0;
    }

    /* Basis auto = the trigger's own content width, so the wrap point follows the label length.
       ::deep is required: .pui-dd is PortalSelect's own root and carries that component's scope
       attribute, so a plain selector here compiles to .pui-dd[b-thispage] and matches nothing. */
    .lm-filter-right[b-8x67l1njmn]  .pui-dd {
        flex: 1 1 auto;
        min-width: 0;
    }

.lm-search[b-8x67l1njmn] {
    /* Below ~180px the search is unusable, so that is the width it wraps rather than shrink past. */
    flex: 1 1 180px;
}

.lm-list[b-8x67l1njmn] {
    container-type: inline-size;
}

.lm-rows > * + *[b-8x67l1njmn] {
    border-top: 1px solid var(--lms-line-light);
}

/* Expired slots stay readable but visibly inactive — they are history, not work. */
.lm-row.is-expired[b-8x67l1njmn] {
    opacity: .55;
}

/* ── Cells shared by both layouts ───────────────────────────────────────── */
.lm-date[b-8x67l1njmn] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 12px;
    background: var(--lms-primary);
    padding: 6px 0;
}

/* Overnight slots get an accent tint plus a "+1" corner badge, so the block cannot be read as a
   single day at a glance. */
.lm-date.is-overnight[b-8x67l1njmn] {
    background: rgba(241, 93, 57, .12);
}

.lm-date-plus[b-8x67l1njmn] {
    position: absolute;
    top: -5px;
    right: -5px;
    border-radius: 999px;
    background: var(--lms-accent);
    padding: 0 4px;
    font-size: 9px;
    font-weight: 700;
    line-height: 15px;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

.lm-date-month[b-8x67l1njmn] {
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--lms-faint);
}

/* Poppins, matching the stat figures — the display serif is reserved for headings. */
.lm-date-day[b-8x67l1njmn] {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--lms-dark);
    font-variant-numeric: tabular-nums;
}

.lm-date-dow[b-8x67l1njmn] {
    font-size: 9px;
    color: var(--lms-faint);
}

.lm-time[b-8x67l1njmn] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--lms-dark);
    font-variant-numeric: tabular-nums;
}

/* Sits above the hours in the table layout — the hours alone read as same-day. */
.lm-overnight-tag[b-8x67l1njmn] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--lms-accent);
}

.lm-overnight-tag svg[b-8x67l1njmn] {
    flex-shrink: 0;
}

.lm-overnight-flag[b-8x67l1njmn] {
    font-weight: 600;
    color: var(--lms-accent);
}

.lm-deal[b-8x67l1njmn] {
    min-width: 0;
}

.lm-deal-title[b-8x67l1njmn] {
    font-size: 13px;
    font-weight: 600;
    color: var(--lms-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lm-deal-meta[b-8x67l1njmn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    font-size: 10.5px;
    color: var(--lms-faint);
}

.lm-deal-ref[b-8x67l1njmn] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    text-transform: uppercase;
}

.lm-deal-flag[b-8x67l1njmn] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.lm-actions[b-8x67l1njmn] {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Card layout (narrow) ───────────────────────────────────────────────── */
/* .lm-thead is table chrome; the cards carry their own labels. */
.lm-thead[b-8x67l1njmn] {
    display: none;
    border-radius: 20px 20px 0 0;
}

.lm-row[b-8x67l1njmn] {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    grid-template-areas:
        "date deal  price"
        "date cat   cat"
        "foot foot  foot";
    align-items: center;
    gap: 8px 12px;
    padding: 14px 16px;
}

    .lm-row > .lm-date[b-8x67l1njmn] {
        grid-area: date;
        align-self: start;
    }

    .lm-row > .lm-deal[b-8x67l1njmn] {
        grid-area: deal;
    }

    .lm-row > .lm-price-cell[b-8x67l1njmn] {
        grid-area: price;
    }

    .lm-row > .lm-cat-cell[b-8x67l1njmn] {
        grid-area: cat;
    }

    /* The time is redundant next to the date block on a card — it moves into the deal meta line. */
    .lm-row > .lm-time[b-8x67l1njmn] {
        display: none;
    }

.lm-time-inline[b-8x67l1njmn] {
    font-weight: 600;
    color: var(--lms-muted);
    font-variant-numeric: tabular-nums;
}

.lm-foot[b-8x67l1njmn] {
    grid-area: foot;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px dashed var(--lms-line-light);
}

.lm-online[b-8x67l1njmn] {
    margin-left: auto;
}

/* ── Table layout (wide) ────────────────────────────────────────────────── */
/* 52+96+132+104+112+44+72 fixed + 150 min + 7×12 gap ≈ 846 — the query threshold has to clear
   that, or the last column clips before the layout switches. */
@container (min-width: 860px) {
    .lm-thead[b-8x67l1njmn],
    .lm-row[b-8x67l1njmn] {
        display: grid;
        grid-template-columns: 52px 96px 132px minmax(150px, 1fr) 104px 112px 44px 72px;
        grid-template-areas: none;
        align-items: center;
        gap: 12px;
        padding: 12px 20px;
    }
        /* Drop the card's named placements. A grid-area naming an area that no longer exists resolves
       to a line name that isn't there, which is not the same as auto placement — it has to be
       cleared explicitly or the cells land in the wrong columns. */
        .lm-row > .lm-date[b-8x67l1njmn],
        .lm-row > .lm-deal[b-8x67l1njmn],
        .lm-row > .lm-price-cell[b-8x67l1njmn],
        .lm-row > .lm-cat-cell[b-8x67l1njmn] {
            grid-area: auto;
            align-self: center;
        }
    /* Unwrap the card's action group so status / online / actions land in their own columns.
       DOM order already matches the header, so no explicit placement is needed. */
    .lm-foot[b-8x67l1njmn] {
        display: contents;
    }

    .lm-thead[b-8x67l1njmn] {
        border-bottom: 1px solid var(--lms-line-light);
        background: rgba(224, 234, 245, .4);
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 9.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .14em;
        color: var(--lms-faint);
    }

    .lm-th--center[b-8x67l1njmn] {
        text-align: center;
    }

    .lm-th--right[b-8x67l1njmn] {
        text-align: right;
    }

    .lm-row > .lm-time[b-8x67l1njmn] {
        display: block;
    }
    /* Everything below undoes card-only styling. */
    .lm-time-inline[b-8x67l1njmn],
    .lm-foot[b-8x67l1njmn]::before {
        display: none;
    }

    .lm-foot[b-8x67l1njmn],
    .lm-online[b-8x67l1njmn] {
        margin: 0;
        padding: 0;
        border: none;
    }

    .lm-online[b-8x67l1njmn] {
        display: flex;
        justify-content: center;
    }

    .lm-actions[b-8x67l1njmn] {
        justify-content: flex-end;
    }
}

@media (hover: hover) {
    .lm-row:hover[b-8x67l1njmn] {
        background: rgba(224, 234, 245, .4);
    }
}
/* /Components/Pages/Media.razor.rz.scp.css */
/* Media page chrome (design: admin/media.jsx). The shared .pui-* kit in wwwroot/app.css carries the
   page frame, cards, buttons and fields; everything here is the slot and tile geometry the kit has no
   equivalent for. Hand-written CSS rather than Tailwind, like the other portal pages. */

.md-count[b-lbc4f415nj] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--lms-primary);
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--lms-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* At the limit the counter is the only warning the page gives, so it changes colour. */
.md-count.is-full[b-lbc4f415nj] {
    background: rgba(241, 93, 57, .14);
    color: var(--lms-accent);
}

/* Labels styled as buttons — they open the hidden file input. */
.md-uploadbtn[b-lbc4f415nj] {
    cursor: pointer;
}

.md-card[b-lbc4f415nj] {
    padding: 20px;
}

.md-card-head[b-lbc4f415nj],
.md-extras-head[b-lbc4f415nj] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.md-extras-head[b-lbc4f415nj] {
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 16px;
}

.md-cardtitle[b-lbc4f415nj] {
    margin: 4px 0 0;
    font-family: "Fraunces", ui-serif, Georgia, serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--lms-dark);
}

.md-italic[b-lbc4f415nj] {
    font-style: italic;
    color: var(--lms-accent);
}

.md-help[b-lbc4f415nj] {
    margin: 6px 0 0;
    max-width: 52ch;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--lms-muted);
}

.md-badge[b-lbc4f415nj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(224, 234, 245, .7);
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--lms-muted);
}

.md-badge--accent[b-lbc4f415nj] {
    background: rgba(241, 93, 57, .1);
    color: var(--lms-accent);
}

/* Crop progress in the upload modal. Green once every photo is framed, amber while any still needs it —
   the upload button is disabled until then, so the badge has to say why. */
.md-badge--ok[b-lbc4f415nj] {
    background: rgba(16, 185, 129, .12);
    color: #047857;
}

.md-badge--todo[b-lbc4f415nj] {
    background: rgba(245, 158, 11, .14);
    color: #b45309;
}

/* ── Top row: logo + fotokwaliteit ──────────────────────────────────────── */
/* align-items: stretch, unlike the row that used to hold the hoofdafbeelding here. Both cards in this row
   are text and a square, so neither dictates a height the other cannot fill — the quality panel simply
   takes whatever the logo card ends up at, and the two read as one band.

   The hoofdafbeelding moved out to its own full-width row below: a 16:9 frame in the wide column set the
   row height, and the narrow column could not fill it without inventing content. */
.md-top[b-lbc4f415nj] {
    display: grid;
    align-items: stretch;
    gap: 16px;
    margin-bottom: 16px;
}

@media (min-width: 1024px) {
    .md-top[b-lbc4f415nj] {
        grid-template-columns: 280px minmax(0, 1fr);
    }
}

.md-logo-wrap[b-lbc4f415nj] {
    margin-top: 14px;
}

/* Pushes the bottom note of each card to the bottom of the card, so the logo column ends level with the
   panel beside it instead of leaving a gap under the note. */
.md-top > .md-card[b-lbc4f415nj] {
    display: flex;
    flex-direction: column;
}

.md-top > .md-card > .md-note[b-lbc4f415nj] {
    margin-top: auto;
}

/* The auto margin above collapses to zero the moment a card's content already fills the row, which took the
   note's own 14px away with it. So the guaranteed gap lives on the block before the note instead: auto only
   ever adds to it. */
.md-logo-wrap[b-lbc4f415nj],
.md-quality-list[b-lbc4f415nj] {
    margin-bottom: 14px;
}

.md-hero-card[b-lbc4f415nj] {
    margin-bottom: 16px;
}

.md-hero-wrap[b-lbc4f415nj] {
    margin-top: 16px;
}

/* The frame is 16:9 and now spans the page, which on a wide screen makes it tall enough to push the alt
   text under the fold. Capped by height, so it keeps its ratio and simply centres. */
@media (min-width: 1024px) {
    .md-hero-wrap[b-lbc4f415nj] {
        margin-inline: auto;
        max-width: min(100%, calc((100vh - 320px) * 16 / 9));
    }
}

/* ── Slots ──────────────────────────────────────────────────────────────── */
.md-slot[b-lbc4f415nj] {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background: rgba(224, 234, 245, .35);
}

/* Square and full-width. The design's fixed 168px box sat centred in a 280px card, so the card carried
   36px of dead space either side of it and a short column besides. */
.md-slot--logo[b-lbc4f415nj] {
    aspect-ratio: 1;
    width: 100%;
    border-radius: 20px;
}

/* Below the two-column breakpoint the card spans the page, and a square that wide is absurd for a
   logo — cap it there instead. */
@media (max-width: 1023px) {
    .md-slot--logo[b-lbc4f415nj] {
        width: min(100%, 200px);
    }
}

.md-slot--hero[b-lbc4f415nj] {
    aspect-ratio: 16 / 9;
    width: 100%;
}

/* The empty state is the click target — a dashed well, matching the design's placeholder slot. */
.md-slot-empty[b-lbc4f415nj] {
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px dashed var(--lms-line);
    border-radius: inherit;
    padding: 12px;
    font-size: 11.5px;
    text-align: center;
    color: var(--lms-faint);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

/* Marks a slot action that still needs doing — the alt-text button on a photo without one. Amber rather than
   neutral, matching the crop button in the upload list: a step that is missing should not look optional. */
.md-slot-act--todo[b-lbc4f415nj] {
    background: #fffbeb;
    color: #b45309;
}

/* At the image limit an empty slot has nothing to offer: same treatment as a disabled button, and pointer
   events go so the label cannot reach its file input. */
.md-slot-empty.is-disabled[b-lbc4f415nj] {
    cursor: not-allowed;
    pointer-events: none;
    opacity: .55;
}

.md-slot-img[b-lbc4f415nj] {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* Always visible rather than hover-only: on touch there is no hover, and these are the only way to
   replace or remove a slot's photo. */
.md-slot-actions[b-lbc4f415nj] {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
}

.md-slot-act[b-lbc4f415nj] {
    display: flex;
    height: 28px;
    width: 28px;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 9px;
    background: rgba(255, 255, 255, .92);
    padding: 0;
    color: var(--lms-muted);
    cursor: pointer;
    box-shadow: 0 4px 10px -4px rgba(5, 3, 22, .35);
    transition: background .15s ease, color .15s ease;
}

/* ── Note under the logo ────────────────────────────────────────────────── */
.md-note[b-lbc4f415nj] {
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    font-size: 11.5px;
}

/* ::deep because the icon is rendered by PortalIcon — a child component's elements never carry this
   page's scope attribute. Same reason below for the tip and pending rows. */
.md-note[b-lbc4f415nj]  svg {
    color: var(--lms-accent);
}

/* ── Alt text of the hoofdafbeelding ────────────────────────────────────── */
.md-alt[b-lbc4f415nj] {
    margin-top: 16px;
}

/* Character counter in the alt-text editor. Tabular so it does not jitter while typing. */
.md-alt-count[b-lbc4f415nj] {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--lms-muted);
}

.md-alt-value[b-lbc4f415nj] {
    border-radius: 12px;
    background: rgba(224, 234, 245, .45);
    padding: 11px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--lms-dark);
}

.md-alt-value.is-empty[b-lbc4f415nj] {
    color: var(--lms-faint);
}

/* ── Extra photos ───────────────────────────────────────────────────────── */
/* One per row on a phone. Two columns put a 4:3 photo at about 160px wide, which is too small to judge a crop
   on and left no room for the actions sitting on top of it. */
.md-extras-grid[b-lbc4f415nj] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

@media (min-width: 640px) {
    .md-extras-grid[b-lbc4f415nj] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .md-extras-grid[b-lbc4f415nj] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.md-extras-empty[b-lbc4f415nj] {
    margin: 0;
}

.md-tile-frame[b-lbc4f415nj] {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 14px;
    background: rgba(224, 234, 245, .35);
}

.md-tile-photo[b-lbc4f415nj] {
    display: block;
    height: 100%;
    width: 100%;
    border: none;
    padding: 0;
    background: transparent;
    cursor: zoom-in;
}

.md-tile-photo img[b-lbc4f415nj] {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.md-tile-index[b-lbc4f415nj] {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    height: 24px;
    width: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--lms-dark);
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.md-tile-x[b-lbc4f415nj],
.md-tile-movebtn[b-lbc4f415nj] {
    display: flex;
    height: 24px;
    width: 24px;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, .92);
    padding: 0;
    color: var(--lms-muted);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, opacity .15s ease;
}

.md-tile-x[b-lbc4f415nj] {
    position: absolute;
    top: 8px;
    right: 8px;
}

/* Same "still to do" tint as the slot actions, for a gallery photo with no alt text yet. */
.md-tile-movebtn--todo[b-lbc4f415nj] {
    background: #fffbeb;
    color: #b45309;
}

.md-tile-move[b-lbc4f415nj] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
}

.md-tile-roles[b-lbc4f415nj] {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: flex;
    gap: 4px;
}

/* ── Touch targets ───────────────────────────────────────────────────────────
   24px and 28px are fine for a mouse and too small for a fingertip — the WCAG floor is 44px and these sit on
   top of a photo, so a miss taps the photo instead of the button and opens the preview.

   Keyed on the pointer rather than on width: a small window on a laptop still has a mouse, and a large tablet
   still has fingers. Both selectors are needed — Firefox on Android reports hover: none but not always
   pointer: coarse. */
@media (hover: none), (pointer: coarse) {
    .md-tile-x[b-lbc4f415nj],
    .md-tile-movebtn[b-lbc4f415nj] {
        height: 40px;
        width: 40px;
        border-radius: 12px;
    }

    .md-slot-act[b-lbc4f415nj] {
        height: 40px;
        width: 40px;
        border-radius: 12px;
    }

    /* More room between them too, so neighbouring buttons are not one 80px blur. */
    .md-slot-actions[b-lbc4f415nj],
    .md-tile-move[b-lbc4f415nj],
    .md-tile-roles[b-lbc4f415nj] {
        gap: 8px;
    }

    /* The icons scale with the buttons — a 13px glyph in a 40px box looks like a rendering mistake.
       ::deep because PortalIcon is a child component, so its <svg> never carries this page's scope
       attribute. It sets width/height as attributes rather than inline styles, so CSS wins. */
    .md-tile-x[b-lbc4f415nj]  svg,
    .md-tile-movebtn[b-lbc4f415nj]  svg,
    .md-slot-act[b-lbc4f415nj]  svg {
        width: 18px;
        height: 18px;
    }

    /* The index badge grows with them, or it reads as a shrunken button. */
    .md-tile-index[b-lbc4f415nj] {
        height: 30px;
        width: 30px;
        font-size: 13px;
    }

    /* Four 40px buttons in a row need a wider frame than a 4:3 phone tile gives at two columns — the grid is
       one column on a phone for this reason, but the logo slot is capped at 200px, so its actions wrap
       instead of overflowing. */
    .md-slot-actions[b-lbc4f415nj] {
        flex-wrap: wrap;
        justify-content: flex-end;
        max-width: calc(100% - 16px);
    }
}

.md-tile-movebtn:disabled[b-lbc4f415nj] {
    opacity: .35;
    cursor: not-allowed;
}

.md-tile-label[b-lbc4f415nj] {
    margin-top: 8px;
    overflow: hidden;
    font-size: 12px;
    color: var(--lms-dark);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.md-tile-label.is-empty[b-lbc4f415nj] {
    color: var(--lms-faint);
}

/* ── Tips footer ────────────────────────────────────────────────────────── */
.md-tips[b-lbc4f415nj] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    border-top: 1px solid var(--lms-line-light);
    margin-top: 20px;
    padding-top: 14px;
    font-size: 12px;
    color: var(--lms-muted);
}

.md-tip[b-lbc4f415nj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.md-tip[b-lbc4f415nj]  svg {
    flex-shrink: 0;
    color: var(--lms-accent);
}

/* ── Pending uploads (inside PortalModal) ───────────────────────────────── */
.md-pending-intro[b-lbc4f415nj] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 14px;
}

.md-pending-list[b-lbc4f415nj] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Stacked on phones: a filename, an alt field and a remove button do not fit one narrow row. */
.md-pending-row[b-lbc4f415nj] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    border-radius: 12px;
    background: rgba(224, 234, 245, .35);
    padding: 10px 12px;
}

.md-pending-file[b-lbc4f415nj] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 12.5px;
    color: var(--lms-dark);
}

.md-pending-file[b-lbc4f415nj]  svg {
    flex-shrink: 0;
    color: var(--lms-accent);
}

.md-pending-name[b-lbc4f415nj] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.md-pending-size[b-lbc4f415nj] {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--lms-faint);
    font-variant-numeric: tabular-nums;
}

.md-pending-alt[b-lbc4f415nj] {
    grid-column: 1 / -1;
}

.md-pending-alt input[b-lbc4f415nj] {
    padding: 8px 12px;
    font-size: 13px;
}

.md-pending-more[b-lbc4f415nj] {
    margin-top: 12px;
}

.md-pending-actions[b-lbc4f415nj] {
    display: flex;
    gap: 6px;
}

/* ── Crop editor (Cropper.Blazor inside PortalModal) ────────────────────── */
/* cropper.js needs a container with a real height, and its <img> must be a block that never overflows.
   ::deep throughout: the image and cropper's own chrome are rendered by the library, so they do not
   carry this page's scope attribute. */
.md-crop[b-lbc4f415nj] {
    overflow: hidden;
    border-radius: 14px;
    background: rgba(5, 3, 22, .85);
    height: min(52vh, 380px);
    /* Dragging inside the editor must not scroll the modal body behind it. */
    touch-action: none;
}

/* cropper.js measures the <img> to size its own container, so the image has to fill this box exactly —
   with only max-width it would report its natural height and the editor would overflow the wrapper. */
.md-crop[b-lbc4f415nj]  img {
    display: block;
    width: 100%;
    height: 100%;
}

.md-crop[b-lbc4f415nj]  .cropper-container {
    max-width: 100%;
}

.md-crop-fail[b-lbc4f415nj] {
    align-items: flex-start;
}

/* Shown above the editor when an existing photo is being reframed, to say the original survives it. */
.md-crop-note[b-lbc4f415nj] {
    align-items: flex-start;
    margin-bottom: 12px;
}

/* ── Photo quality ───────────────────────────────────────────────────────────
   One colour scale for both the panel and the crop editor's live verdict, so "kan beter" looks the same
   wherever it is said. Amber and rose rather than a hard red: none of this blocks anything. */
/* margin-top matches .md-logo-wrap, so the rows start at the same distance below their card's intro text as
   the logo slot does in the card beside it. */
.md-quality-list[b-lbc4f415nj] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.md-quality-row[b-lbc4f415nj] {
    border-radius: 12px;
    background: rgba(224, 234, 245, .28);
    padding: 10px 12px;
}

.md-quality-row-head[b-lbc4f415nj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.md-quality-name[b-lbc4f415nj] {
    font-size: 13px;
    font-weight: 700;
    color: var(--lms-dark);
}

.md-quality-state[b-lbc4f415nj] {
    flex-shrink: 0;
    border-radius: 8px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
}

.md-quality-state.is-good[b-lbc4f415nj],
.md-quality-badge.is-good[b-lbc4f415nj] {
    background: rgba(16, 185, 129, .14);
    color: #047857;
}

.md-quality-state.is-fair[b-lbc4f415nj],
.md-quality-badge.is-fair[b-lbc4f415nj] {
    background: rgba(245, 158, 11, .16);
    color: #b45309;
}

.md-quality-state.is-poor[b-lbc4f415nj],
.md-quality-badge.is-poor[b-lbc4f415nj] {
    background: rgba(225, 29, 72, .12);
    color: #be123c;
}

.md-quality-state.is-unknown[b-lbc4f415nj],
.md-quality-badge.is-unknown[b-lbc4f415nj] {
    background: rgba(224, 234, 245, .8);
    color: var(--lms-muted);
}

/* ── Skeletons ───────────────────────────────────────────────────────────────
   Shown while a re-check runs. Placeholders rather than a spinner over the panel: the shape of what is coming
   back stays on screen, so the card does not collapse and then jump when the numbers land.

   The animation is decorative, so it is dropped for anyone who asked for less motion — the shapes still read
   as "not here yet" without it. */
.md-skeleton[b-lbc4f415nj] {
    display: block;
    border-radius: 6px;
    background-image: linear-gradient(
        90deg,
        rgba(224, 234, 245, .5) 25%,
        rgba(224, 234, 245, .95) 37%,
        rgba(224, 234, 245, .5) 63%);
    background-size: 400% 100%;
    animation: md-shimmer-b-lbc4f415nj 1.4s ease-in-out infinite;
}

@keyframes md-shimmer-b-lbc4f415nj {
    from { background-position: 100% 0; }
    to   { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .md-skeleton[b-lbc4f415nj] {
        animation: none;
    }
}

/* Same shapes, standing still: used for the empty state, where the placeholders are filling space rather than
   standing in for something that is loading. Flat and a shade fainter, so it reads as "nothing yet". */
.md-quality-list--idle .md-skeleton[b-lbc4f415nj] {
    animation: none;
    background-image: none;
    background-color: rgba(224, 234, 245, .45);
}

.md-skeleton--name[b-lbc4f415nj]   { width: 92px;  height: 13px; }
.md-skeleton--state[b-lbc4f415nj]  { width: 74px;  height: 18px; border-radius: 8px; }
.md-skeleton--line[b-lbc4f415nj]   { width: 100%;  height: 10px; margin-top: 10px; }
.md-skeleton--line-short[b-lbc4f415nj] { width: 62%; height: 10px; margin-top: 8px; }
.md-skeleton--badge[b-lbc4f415nj]  { width: 84px;  height: 22px; border-radius: 10px; }

.md-quality-issue[b-lbc4f415nj] {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--lms-muted);
}

/* The raw numbers. Tabular figures so they do not jitter while the live measurement updates. */
.md-quality-facts[b-lbc4f415nj] {
    margin: 6px 0 0;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--lms-muted);
    opacity: .85;
}

/* No margin-top here: it is a .md-note inside .md-top, so the rule above pushes it to the bottom of the card
   and the gap above it comes from .md-quality-list. */
.md-quality-analyse[b-lbc4f415nj] {
    align-items: flex-start;
    gap: 10px;
}

/* Live verdict under the crop editor. Tinted by level, since it changes while the partner drags. */
.md-crop-quality[b-lbc4f415nj] {
    margin-top: 12px;
    border-radius: 12px;
    padding: 10px 12px;
    background: rgba(224, 234, 245, .28);
    transition: background .2s ease;
}

.md-crop-quality.is-fair[b-lbc4f415nj] {
    background: rgba(245, 158, 11, .1);
}

.md-crop-quality.is-poor[b-lbc4f415nj] {
    background: rgba(225, 29, 72, .08);
}

.md-crop-quality-head[b-lbc4f415nj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.md-crop-quality-head .md-quality-facts[b-lbc4f415nj] {
    margin: 0;
}

/* Cropper's own frame, tinted to the portal's accent instead of its default blue. */
.md-crop[b-lbc4f415nj]  .cropper-view-box {
    outline-color: var(--lms-accent);
}

.md-crop[b-lbc4f415nj]  .cropper-line,
.md-crop[b-lbc4f415nj]  .cropper-point {
    background-color: var(--lms-accent);
}

.md-crop-bar[b-lbc4f415nj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
}

.md-crop-hint[b-lbc4f415nj] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--lms-muted);
}

.md-crop-hint[b-lbc4f415nj]  svg {
    flex-shrink: 0;
    color: var(--lms-accent);
}

.md-crop-tools[b-lbc4f415nj] {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* The modal panel is narrower than the page, so the filename column only splits off from sm up. */
@media (min-width: 768px) {
    .md-pending-row[b-lbc4f415nj] {
        grid-template-columns: minmax(0, 200px) minmax(0, 1fr) auto;
    }

    .md-pending-alt[b-lbc4f415nj] {
        grid-column: auto;
    }
}

@media (hover: hover) {
    .md-slot-empty:hover[b-lbc4f415nj] {
        border-color: var(--lms-accent);
        background: rgba(241, 93, 57, .05);
        color: var(--lms-accent);
    }

    .md-slot-act:hover[b-lbc4f415nj] {
        background: #ffffff;
        color: var(--lms-dark);
    }

    .md-slot-act--no:hover[b-lbc4f415nj],
    .md-tile-x:hover[b-lbc4f415nj] {
        background: #ffffff;
        color: #e11d48;
    }

    .md-tile-movebtn:hover:not(:disabled)[b-lbc4f415nj] {
        background: #ffffff;
        color: var(--lms-dark);
    }
}
/* /Components/Pages/Requests/Components/RequestDetailModal.razor.rz.scp.css */
/* Request detail modal. Panels, fields and pills come from the shared .pui-* kit; this file only
   covers the layout that is specific to this view. */

.rd-statusline[b-g40mdys9mc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.rd-meta[b-g40mdys9mc] {
    font-size: 12px;
    color: var(--lms-faint);
}

.rd-panel[b-g40mdys9mc] {
    border-radius: 16px;
    background: #ffffff;
    padding: 16px;
    box-shadow: inset 0 0 0 1px var(--lms-line-light);
}

.rd-panel-bar[b-g40mdys9mc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rd-panel-head[b-g40mdys9mc] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}

.rd-panel-main[b-g40mdys9mc] {
    min-width: 0;
}

.rd-panel-title[b-g40mdys9mc] {
    font-family: "Fraunces", ui-serif, Georgia, serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--lms-dark);
}

.rd-panel-sub[b-g40mdys9mc] {
    margin-top: 2px;
    font-size: 13px;
    color: var(--lms-muted);
}

/* ── Fact list ──────────────────────────────────────────────────────────── */
.rd-facts[b-g40mdys9mc] {
    margin: 14px 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rd-facts > div[b-g40mdys9mc] {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.rd-facts dt[b-g40mdys9mc] {
    flex-shrink: 0;
    width: 128px;
    font-size: 12px;
    color: var(--lms-faint);
}

.rd-facts dd[b-g40mdys9mc] {
    margin: 0;
    min-width: 0;
    font-size: 13px;
    color: var(--lms-dark);
}

.rd-inline[b-g40mdys9mc] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* ── Contact ────────────────────────────────────────────────────────────── */
.rd-contact[b-g40mdys9mc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin-top: 10px;
}

.rd-contact-link[b-g40mdys9mc] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 12.5px;
    text-decoration: none;
    color: var(--lms-dark);
    box-shadow: inset 0 0 0 1px var(--lms-line-light);
    transition: box-shadow .15s ease;
}

.rd-contact-link svg[b-g40mdys9mc] {
    flex-shrink: 0;
    color: var(--lms-accent);
}

.rd-contact-link span[b-g40mdys9mc] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Customer edit ──────────────────────────────────────────────────────── */
.rd-editform[b-g40mdys9mc] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.rd-editform-actions[b-g40mdys9mc] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ── Visitor message ────────────────────────────────────────────────────── */
.rd-message[b-g40mdys9mc] {
    border-radius: 16px;
    background: rgba(224, 234, 245, .6);
    padding: 16px;
}

.rd-message-text[b-g40mdys9mc] {
    margin: 8px 0 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--lms-muted);
}

/* ── Timeline ───────────────────────────────────────────────────────────── */
.rd-timeline[b-g40mdys9mc] {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rd-tl-item[b-g40mdys9mc] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

/* Ring rather than a filled dot for steps that have not happened yet. */
.rd-tl-dot[b-g40mdys9mc] {
    height: 9px;
    width: 9px;
    flex-shrink: 0;
    margin-top: 4px;
    border-radius: 999px;
    background: var(--lms-line-input);
}

.rd-tl-dot--done[b-g40mdys9mc] {
    background: var(--lms-accent);
}

.rd-tl-dot--wait[b-g40mdys9mc] {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--lms-accent);
}

.rd-tl-title[b-g40mdys9mc] {
    font-size: 13px;
    font-weight: 600;
    color: var(--lms-dark);
}

.rd-tl-time[b-g40mdys9mc] {
    font-size: 11.5px;
    color: var(--lms-faint);
    font-variant-numeric: tabular-nums;
}

.rd-tl-note[b-g40mdys9mc] {
    margin-top: 2px;
    font-size: 12px;
    font-style: italic;
    color: var(--lms-muted);
}

/* ── Destructive block ──────────────────────────────────────────────────── */
.rd-danger[b-g40mdys9mc] {
    border-radius: 16px;
    background: #fff1f2;
    padding: 16px;
    box-shadow: inset 0 0 0 1px #fecdd3;
}

.rd-danger .pui-eyebrow[b-g40mdys9mc] {
    color: #be123c;
}

.rd-danger-text[b-g40mdys9mc] {
    margin: 8px 0 10px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #9f1239;
}

.rd-danger-btn[b-g40mdys9mc] {
    margin-top: 10px;
}

.rd-confirm[b-g40mdys9mc] {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.rd-confirm-actions[b-g40mdys9mc] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

@media (min-width: 640px) {
    .rd-contact[b-g40mdys9mc] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (hover: hover) {
    .rd-contact-link:hover[b-g40mdys9mc] {
        box-shadow: inset 0 0 0 1px var(--lms-line-input);
    }
}
/* /Components/Pages/Requests/Requests.razor.rz.scp.css */
/* Aanvragen — Partner Portaal design (admin/aanvragen.jsx). Shared primitives live in
   wwwroot/app.css as .pui-*; only the list is page-specific.

   Same container query as the other portal lists: from lg the permanent 262px sidebar plus the
   container padding takes ~320px off the viewport, so a viewport breakpoint would claim room for
   the 7-column grid that isn't there. */

.rq-filters[b-i0b4x6glj7] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}


/* Phones: the status chips wrap two per row at half width each instead of scrolling sideways —
   five of them in a scroller means the last ones are never seen. calc(50% - 3px) is half the row
   minus half the 6px gap. */
.rq-filters .pui-chips[b-i0b4x6glj7] {
    flex-wrap: wrap;
    overflow-x: visible;
}

.rq-filters .pui-chip[b-i0b4x6glj7] {
    flex: 1 1 calc(50% - 3px);
    justify-content: center;
}

@media (min-width: 768px) {
    .rq-filters .pui-chip[b-i0b4x6glj7] {
        flex: 0 0 auto;
    }
}

/* Phones: the two dropdowns share one row at half each, search takes the next in full.
   calc(50% - 5px) is half the row minus half the 10px gap. */
.rq-filter-right[b-i0b4x6glj7] {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    align-items: stretch;
    gap: 10px;
}

    .rq-filter-right > *[b-i0b4x6glj7] {
        min-width: 0;
    }

    /* ::deep is required: .pui-dd is PortalSelect's own root, so it carries that component's scope
       attribute. Without it this compiles to .pui-dd[b-thispage] and never matches anything. */
    .rq-filter-right[b-i0b4x6glj7]  .pui-dd {
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
    }

.rq-search[b-i0b4x6glj7] {
    flex: 1 1 100%;
}

/* From md all three share one line: the dropdowns sit at a readable fixed width and the search
   takes the rest. A media query rather than a container query — the filter row is outside
   .rq-list, so it has no query container to key off. */
@media (min-width: 768px) {
    .rq-filter-right[b-i0b4x6glj7]  .pui-dd {
        flex: 0 1 190px;
    }

    .rq-search[b-i0b4x6glj7] {
        flex: 1 1 200px;
    }
}

.rq-list[b-i0b4x6glj7] {
    container-type: inline-size;
}

.rq-rows > * + *[b-i0b4x6glj7] {
    border-top: 1px solid var(--lms-line-light);
}

/* Open requests are the work; an accent edge makes them findable in a mixed list. */
.rq-row.is-pending[b-i0b4x6glj7] {
    box-shadow: inset 3px 0 0 var(--lms-accent);
}

/* An inset shadow is clipped by the element's own radius, so the edge rule only follows the card's
   rounded corners if the outer rows carry them. On a card the first row is the card's top edge; in
   the table layout the header takes that job, so the first row's radius is dropped again below. */
.rq-rows > :first-child[b-i0b4x6glj7] {
    border-top-left-radius: 16px;
}

.rq-rows > :last-child[b-i0b4x6glj7] {
    border-bottom-left-radius: 16px;
}

.rq-row[b-i0b4x6glj7] {
    cursor: pointer;
}

.rq-row:focus-visible[b-i0b4x6glj7] {
    outline: 2px solid var(--lms-accent);
    outline-offset: -2px;
}

/* ── Cells shared by both layouts ───────────────────────────────────────── */
.rq-visitor[b-i0b4x6glj7] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.rq-avatar[b-i0b4x6glj7] {
    display: flex;
    height: 36px;
    width: 36px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--lms-primary);
    font-size: 12px;
    font-weight: 600;
    color: var(--lms-dark);
}

.rq-visitor-body[b-i0b4x6glj7] {
    min-width: 0;
}

.rq-name[b-i0b4x6glj7] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--lms-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rq-ago[b-i0b4x6glj7] {
    font-size: 11px;
    color: var(--lms-faint);
}

/* lm vs arr is a functional two-way distinction, so they keep separate tints: accent for
   last-minutes, neutral lavender for arrangements. */
.rq-kind[b-i0b4x6glj7] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.rq-kind svg[b-i0b4x6glj7] {
    flex-shrink: 0;
}

.rq-kind--lm[b-i0b4x6glj7] {
    background: rgba(241, 93, 57, .1);
    color: var(--lms-accent);
}

.rq-kind--arr[b-i0b4x6glj7] {
    background: var(--lms-lavender);
    color: var(--lms-muted);
}

.rq-item[b-i0b4x6glj7] {
    min-width: 0;
}

.rq-item-title[b-i0b4x6glj7] {
    font-size: 13px;
    color: var(--lms-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rq-item-sub[b-i0b4x6glj7] {
    font-size: 11px;
    color: var(--lms-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rq-has-msg[b-i0b4x6glj7] {
    color: var(--lms-accent);
}

.rq-when[b-i0b4x6glj7] {
    font-size: 12.5px;
    color: var(--lms-muted);
    font-variant-numeric: tabular-nums;
}

.rq-actions[b-i0b4x6glj7] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rq-chevron[b-i0b4x6glj7] {
    color: var(--lms-line-input);
}

.rq-more[b-i0b4x6glj7] {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

/* ── Card layout (narrow) ───────────────────────────────────────────────── */
.rq-thead[b-i0b4x6glj7] {
    display: none;
}

.rq-row[b-i0b4x6glj7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "visitor price"
        "item    item"
        "when    when"
        "foot    foot";
    align-items: center;
    gap: 8px 12px;
    padding: 14px 16px;
}

.rq-row > .rq-visitor[b-i0b4x6glj7] { grid-area: visitor; }
.rq-row > .rq-price-cell[b-i0b4x6glj7] { grid-area: price; }
.rq-row > .rq-item[b-i0b4x6glj7] { grid-area: item; }
.rq-row > .rq-when[b-i0b4x6glj7] { grid-area: when; }

/* Kind and status ride together on the footer line with the actions. */
.rq-row > .rq-kind-cell[b-i0b4x6glj7] { grid-area: foot; justify-self: start; }
.rq-row > .rq-status[b-i0b4x6glj7] { grid-area: foot; justify-self: center; }
.rq-row > .rq-actions[b-i0b4x6glj7] { grid-area: foot; justify-self: end; }

.rq-row > .rq-kind-cell[b-i0b4x6glj7],
.rq-row > .rq-status[b-i0b4x6glj7],
.rq-row > .rq-actions[b-i0b4x6glj7] {
    margin-top: 2px;
    padding-top: 10px;
}

/* ── Table layout (wide) ────────────────────────────────────────────────── */
/* 112+162+86+112+74 fixed + 150+130 min + 6×12 gap = 898 — the threshold has to clear that or the
   last column clips before the layout switches. */
@container (min-width: 940px) {
    .rq-thead[b-i0b4x6glj7],
    .rq-row[b-i0b4x6glj7] {
        display: grid;
        grid-template-columns:
            minmax(150px, 1fr) 112px minmax(130px, 1fr) 162px 86px 112px 74px;
        grid-template-areas: none;
        align-items: center;
        gap: 12px;
        padding: 12px 20px;
    }

    /* Named placements must be cleared explicitly: a grid-area pointing at an area that no longer
       exists resolves to a missing line name, which is not the same as auto placement. */
    .rq-row > .rq-visitor[b-i0b4x6glj7],
    .rq-row > .rq-kind-cell[b-i0b4x6glj7],
    .rq-row > .rq-item[b-i0b4x6glj7],
    .rq-row > .rq-when[b-i0b4x6glj7],
    .rq-row > .rq-price-cell[b-i0b4x6glj7],
    .rq-row > .rq-status[b-i0b4x6glj7],
    .rq-row > .rq-actions[b-i0b4x6glj7] {
        grid-area: auto;
        justify-self: stretch;
        margin: 0;
        padding: 0;
    }

    .rq-thead[b-i0b4x6glj7] {
        border-bottom: 1px solid var(--lms-line-light);
        background: rgba(224, 234, 245, .4);
        border-radius: 16px 16px 0 0;
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 9.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .14em;
        color: var(--lms-faint);
    }

    .rq-th--right[b-i0b4x6glj7] {
        text-align: right;
    }

    .rq-actions[b-i0b4x6glj7] {
        justify-content: flex-end;
    }

    /* The header row now sits above the first row, so only the bottom corner still needs to
       follow the card. */
    .rq-rows > :first-child[b-i0b4x6glj7] {
        border-top-left-radius: 0;
    }
}

@media (hover: hover) {
    .rq-row:hover[b-i0b4x6glj7] {
        background: rgba(224, 234, 245, .4);
    }
}
/* /Components/Pages/Reviews.razor.rz.scp.css */
/* The design's Stub state (Partner Portaal.html): dashed panel, blue icon tile, serif heading. */
.reviews-stub[b-cb2bn3iens] {
    border: 2px dashed var(--lms-line);
    border-radius: 16px;
    background: rgba(255, 255, 255, .6);
    padding: 56px;
    text-align: center;
}

.reviews-stub-icon[b-cb2bn3iens] {
    margin: 0 auto 16px;
    display: flex;
    height: 64px;
    width: 64px;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--lms-primary);
    color: var(--lms-accent);
}

.reviews-stub h3[b-cb2bn3iens] {
    margin: 0;
    font-family: "Fraunces", ui-serif, Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--lms-dark);
}

.reviews-stub p[b-cb2bn3iens] {
    margin: 8px auto 0;
    max-width: 28rem;
    font-size: 14px;
    line-height: 1.6;
    color: var(--lms-muted);
}
/* /Components/Pages/WeekTemplate/Components/TemplateSlotModal.razor.rz.scp.css */
/* Seven-across weekday picker. Fixed columns rather than a wrapping row: the days must line up
   between the "Startdag" and "Eindigt op" pickers so the pair reads as one control. */
.ts-days[b-ukys8174on] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.ts-day[b-ukys8174on] {
    border: none;
    border-radius: 8px;
    background: #ffffff;
    padding: 8px 0;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--lms-muted);
    cursor: pointer;
    box-shadow: inset 0 0 0 1px var(--lms-line);
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.ts-day.active[b-ukys8174on] {
    background: var(--lms-dark);
    color: #ffffff;
    box-shadow: none;
}

/* Pushes Annuleren/Opslaan to the far side, so Delete cannot be hit on the way to Save. */
.ts-delete[b-ukys8174on] {
    margin-right: auto;
}

@media (hover: hover) {
    .ts-day:hover:not(.active)[b-ukys8174on] {
        box-shadow: inset 0 0 0 1px var(--lms-line-input);
    }
}
/* /Components/Pages/WeekTemplate/Components/WeekAgenda.razor.rz.scp.css */
/* Week agenda grid. Column template and row height mirror the design (56px gutter, 7 equal days,
   34px per hour). Below 768px the seven columns collapse to one — the day picker at the top of the
   card switches between them. */

.wa[b-ozovn0atvz] {
    border-radius: 16px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--lms-line-light);
}

.wa-scroll[b-ozovn0atvz] {
    overflow-x: auto;
}

/* 56 + 7×~115 — below this the day columns stop being usable, so the mobile layout takes over. */
.wa-inner[b-ozovn0atvz] {
    min-width: 860px;
}

/* ── Day picker (narrow screens only) ───────────────────────────────────── */
/* Seven fixed fractions rather than a scroller: two-letter labels fit on any phone, so nothing
   needs to be swiped into view. */
.wa-daypicker[b-ozovn0atvz] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    border-bottom: 1px solid var(--lms-line-light);
    padding: 8px;
}

.wa-daypick[b-ozovn0atvz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    border: none;
    border-radius: 10px;
    background: transparent;
    padding: 6px 0;
    font-family: inherit;
    color: var(--lms-muted);
    cursor: pointer;
    box-shadow: inset 0 0 0 1px var(--lms-line-light);
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.wa-daypick.active[b-ozovn0atvz] {
    background: var(--lms-dark);
    color: #ffffff;
    box-shadow: none;
}

.wa-daypick-name[b-ozovn0atvz] {
    font-size: 11.5px;
    font-weight: 600;
}

.wa-daypick-count[b-ozovn0atvz] {
    font-size: 10px;
    opacity: .7;
    font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
    .wa-daypicker[b-ozovn0atvz] {
        display: none;
    }
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.wa-head[b-ozovn0atvz] {
    position: sticky;
    top: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: 56px repeat(7, minmax(0, 1fr));
    border-bottom: 1px solid var(--lms-line-light);
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(4px);
}

/* A button, so the whole cell is the add target. */
.wa-head-day[b-ozovn0atvz] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px;
    border: none;
    border-left: 1px solid var(--lms-line-light);
    background: transparent;
    padding: 10px 8px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease;
}

.wa-head-main[b-ozovn0atvz] {
    display: block;
    min-width: 0;
}

.wa-head-name[b-ozovn0atvz] {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--lms-dark);
}

.wa-head-count[b-ozovn0atvz] {
    display: block;
    font-size: 10.5px;
    color: var(--lms-faint);
}

/* Affordance only — the click lands on the header cell around it. */
.wa-add[b-ozovn0atvz] {
    display: flex;
    height: 24px;
    width: 24px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--lms-faint);
    transition: background .15s ease, color .15s ease;
}

/* ── Body ───────────────────────────────────────────────────────────────── */
.wa-body[b-ozovn0atvz] {
    position: relative;
    display: grid;
    grid-template-columns: 56px repeat(7, minmax(0, 1fr));
}

.wa-gutter[b-ozovn0atvz] {
    position: relative;
}

.wa-hour[b-ozovn0atvz] {
    position: absolute;
    right: 8px;
    font-size: 10px;
    color: var(--lms-faint);
    font-variant-numeric: tabular-nums;
}

.wa-day[b-ozovn0atvz] {
    position: relative;
    border-left: 1px solid var(--lms-line-light);
}

/* Weekend columns get a faint wash so the week's shape is readable at a glance. */
.wa-day.is-weekend[b-ozovn0atvz] {
    background: rgba(224, 234, 245, .25);
}

.wa-line[b-ozovn0atvz] {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid var(--lms-line-light);
}

/* ── Slot blocks ────────────────────────────────────────────────────────── */
.wa-slot[b-ozovn0atvz] {
    position: absolute;
    left: 4px;
    right: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    border: none;
    border-radius: 12px;
    padding: 6px 8px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

/* A block that carries over from the previous day loses its top rounding, and one that runs into the
   next day loses its bottom — the flat edge reads as "this continues" across the column break. */
.wa-slot.is-cont[b-ozovn0atvz] {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.wa-slot.is-open[b-ozovn0atvz] {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

/* The carried-over block is the same slot seen again, so it sits back a little. */
.wa-slot.is-cont .wa-slot-time[b-ozovn0atvz] {
    opacity: .8;
}

.wa-slot-time[b-ozovn0atvz] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.wa-slot-time svg[b-ozovn0atvz] {
    flex-shrink: 0;
    opacity: .7;
}

/* Two lines then clipped: a 38px block cannot show more, and a clipped label beats a stretched one. */
.wa-slot-label[b-ozovn0atvz] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.2;
}

.wa-slot-price[b-ozovn0atvz] {
    font-size: 10px;
    opacity: .75;
    font-variant-numeric: tabular-nums;
}

.wa-slot--accent[b-ozovn0atvz] {
    background: rgba(241, 93, 57, .15);
    color: var(--lms-dark);
    box-shadow: inset 0 0 0 1px rgba(241, 93, 57, .35);
}

.wa-slot--lavender[b-ozovn0atvz] {
    background: var(--lms-lavender);
    color: var(--lms-dark);
    box-shadow: inset 0 0 0 1px var(--lms-line);
}

.wa-slot--blue[b-ozovn0atvz] {
    background: var(--lms-primary);
    color: var(--lms-dark);
    box-shadow: inset 0 0 0 1px var(--lms-line);
}

.wa-slot--dark[b-ozovn0atvz] {
    background: var(--lms-dark);
    color: #ffffff;
}

/* ── Mobile: one day at a time ───────────────────────────────────────────── */
/* The gutter keeps its 56px and the selected column takes the rest; the other six are hidden, so the
   grid markup stays identical in both layouts. Last in the file on purpose — scoped CSS gives every
   rule the same specificity, so these have to come after the seven-column defaults to win. */
@media (max-width: 767px) {
    .wa-inner[b-ozovn0atvz] {
        min-width: 0;
    }

    .wa-head[b-ozovn0atvz],
    .wa-body[b-ozovn0atvz] {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .wa-head-day:not(.is-active)[b-ozovn0atvz],
    .wa-day:not(.is-active)[b-ozovn0atvz] {
        display: none;
    }

    /* Nothing to scroll sideways any more — a stray overflow would only shift the sticky header. */
    .wa-scroll[b-ozovn0atvz] {
        overflow-x: visible;
    }
}

@media (hover: hover) {
    .wa-head-day:hover[b-ozovn0atvz] {
        background: rgba(224, 234, 245, .45);
    }

    .wa-head-day:hover .wa-add[b-ozovn0atvz] {
        background: var(--lms-accent);
        color: #ffffff;
    }

    .wa-slot:hover[b-ozovn0atvz] {
        transform: translateY(-1px);
        box-shadow: 0 8px 18px -8px rgba(5, 3, 22, .45);
    }
}
/* /Components/Pages/WeekTemplate/WeekTemplate.razor.rz.scp.css */
/* Week Templates page chrome. The agenda itself is styled in Components/WeekAgenda.razor.css. */

/* One row at every width: the dropdown takes the free space and the two icon buttons ride beside it,
   so mobile keeps duplicate/delete within reach of the schema being picked. */
.wt-switcher[b-qiimr7ro2h] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

/* PortalSelect's own kit lives in app.css and caps its panel at 220px — a schema label carries its
   name plus a slot count, so both trigger and panel get more room here. ::deep because the select is
   a child component and does not carry this page's scope attribute. */
.wt-switcher-select[b-qiimr7ro2h] {
    position: relative;
    min-width: 0;
    flex: 1 1 auto;
}

/* Trigger and icon buttons share one height — the kit's defaults differ (32px button vs a
   padding-sized trigger), which read as misaligned sitting side by side. */
.wt-switcher-select[b-qiimr7ro2h]  .pui-dd-trigger {
    width: 100%;
    height: 36px;
}

.wt-switcher-actions .pui-iconbtn[b-qiimr7ro2h] {
    height: 36px;
    width: 36px;
}

.wt-switcher-select[b-qiimr7ro2h]  .pui-dd-panel {
    max-width: min(340px, calc(100vw - 32px));
    max-height: 320px;
    overflow-y: auto;
}

.wt-switcher-actions[b-qiimr7ro2h] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
}

/* The kit splits the header actions 50/50 on phones, but "Gebruik deze week" does not fit half a
   phone width — stack them full-width instead. */
@media (max-width: 639px) {
    .pui-head-actions[b-qiimr7ro2h] {
        flex-direction: column;
    }

    .pui-head-actions > *[b-qiimr7ro2h] {
        width: 100%;
    }
}

/* The category legend rides in the stat strip's last cell and needs to wrap freely, so it opts out
   of the strip's baseline row. */
.wt-cats[b-qiimr7ro2h] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wt-hint[b-qiimr7ro2h] {
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--lms-faint);
}

.wt-hint-icon[b-qiimr7ro2h] {
    vertical-align: -1px;
}

@media (min-width: 768px) {
    /* On desktop the dropdown keeps its natural width and the buttons park at the far right. */
    .wt-switcher-select[b-qiimr7ro2h] {
        flex: 0 1 320px;
    }

    .wt-switcher-actions[b-qiimr7ro2h] {
        margin-left: auto;
    }
}