/* /Components/Layout/MainLayout.razor.rz.scp.css */
/*
    The topbar has to hold the application name, the restaurant selector and the account on a
    phone as well. The selector is the only one of the three that is doing work there, so the
    other two give way to it rather than pushing it off the edge.
*/

@media (max-width: 600px) {
    .topbar strong[b-17gtbvhgz9] {
        /* Enough to stay recognisable; the full name is in the tab title. */
        max-width: 96px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .topbar .user-name[b-17gtbvhgz9] {
        display: none;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-jsswx4t36u],
.components-reconnect-repeated-attempt-visible[b-jsswx4t36u],
.components-reconnect-failed-visible[b-jsswx4t36u],
.components-pause-visible[b-jsswx4t36u],
.components-resume-failed-visible[b-jsswx4t36u],
.components-rejoining-animation[b-jsswx4t36u] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-jsswx4t36u],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-jsswx4t36u],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-jsswx4t36u],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-jsswx4t36u],
#components-reconnect-modal.components-reconnect-retrying[b-jsswx4t36u],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-jsswx4t36u],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-jsswx4t36u],
#components-reconnect-modal.components-reconnect-failed[b-jsswx4t36u],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-jsswx4t36u] {
    display: block;
}


#components-reconnect-modal[b-jsswx4t36u] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-jsswx4t36u 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-jsswx4t36u 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-jsswx4t36u 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-jsswx4t36u]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-jsswx4t36u 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-jsswx4t36u {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-jsswx4t36u {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-jsswx4t36u {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-jsswx4t36u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-jsswx4t36u] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-jsswx4t36u] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-jsswx4t36u] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-jsswx4t36u] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-jsswx4t36u] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-jsswx4t36u] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-jsswx4t36u 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-jsswx4t36u] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-jsswx4t36u {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/StorePicker.razor.rz.scp.css */
/*
    The combobox that replaced the topbar's select. Everything here is the parts a native select
    did not have — the list, the rows, the footer. Heights, colours and radii come from the design
    system's tokens so the box still reads as the same control it was.
*/

.store-search[b-qtxd2kq684] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.store-search-input[b-qtxd2kq684] {
    height: var(--btn-h);
    width: 200px;
    border: 1px solid var(--cd-border-md);
    border-radius: var(--radius-md);
    padding: 0 32px 0 12px;
    font-size: 12px;
    font-family: inherit;
    color: var(--cd-text);
    background: var(--cd-white);
    outline: none;
    transition: border-color var(--cd-transition);
}

.store-search-input:focus[b-qtxd2kq684] {
    border-color: var(--cd-blue);
}

.store-search-input[b-qtxd2kq684]::placeholder {
    color: var(--cd-muted);
}

.store-search-list[b-qtxd2kq684] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 40;
    min-width: 100%;
    /* Wider than the closed box, because a restaurant name is longer than the field that shows
       it, and clipping the name is the one thing a picker must not do. */
    width: max-content;
    max-width: 340px;
    /* Ten rows or so, then it scrolls. Tall enough to choose from, short enough to leave the
       page behind it visible. */
    max-height: 320px;
    overflow-y: auto;
    background: var(--cd-white);
    border: 1px solid var(--cd-border);
    border-radius: var(--radius-md);
    box-shadow: 0 6px 20px rgb(0 0 0 / 12%);
    padding: 4px;
}

.store-search-option[b-qtxd2kq684] {
    padding: 6px 10px;
    border-radius: calc(var(--radius-md) - 2px);
    font-size: 12px;
    color: var(--cd-text);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.store-search-option.is-current[b-qtxd2kq684] {
    font-weight: 600;
}

/* One highlight, driven by the component rather than by :hover, so the mouse and the arrow keys
   cannot each light up a different row. */
.store-search-option.is-highlighted[b-qtxd2kq684] {
    background: var(--cd-blue-lt);
    color: var(--cd-blue-dk);
}

.store-search-empty[b-qtxd2kq684],
.store-search-more[b-qtxd2kq684] {
    padding: 6px 10px;
    font-size: 11px;
    color: var(--cd-muted);
}

.store-search-more[b-qtxd2kq684] {
    border-top: 1px solid var(--cd-border);
    margin-top: 4px;
}
/* /Components/Pages/Admin.razor.rz.scp.css */
/* One card per tool, each a link. Wide enough that the sentence underneath is a sentence rather
   than a truncated label — the old context menu gave you eight words and no clue what they did. */
.admin-tools[b-af8ntf1fr8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

.admin-tool[b-af8ntf1fr8] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    background: var(--cd-white);
    border: 1px solid var(--cd-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--cd-transition), box-shadow var(--cd-transition);
}

.admin-tool:hover[b-af8ntf1fr8] {
    border-color: var(--cd-blue);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .07);
}

.admin-tool strong[b-af8ntf1fr8] {
    font-size: 14px;
}
/* /Components/Pages/BusinessLinks.razor.rz.scp.css */
/*
    De tabel schuift zelf op een smal scherm, zodat de pagina er niet naast gaat staan. Zes
    kolommen plus twee knoppen passen niet op een telefoon en dat hoeft ook niet.
*/
.table-wrap[b-sdrvi4pmod] {
    overflow-x: auto;
}

[b-sdrvi4pmod] .data-table td.actions {
    white-space: nowrap;
    text-align: right;
}

[b-sdrvi4pmod] .data-table td.actions .btn + .btn {
    margin-left: 6px;
}

/* Dezelfde indeling als het formulier op de coupons- en instellingenpagina, zodat de twee
   formulieren in deze portal er niet ieder anders uitzien. */
.settings-grid[b-sdrvi4pmod] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 20px;
}

.settings-switches[b-sdrvi4pmod] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2px 20px;
    margin-top: 4px;
}

.settings-switch[b-sdrvi4pmod] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 0;
    font-size: 13px;
    cursor: pointer;
}
/* /Components/Pages/Coupons.razor.rz.scp.css */
/* Search on the left, the two buttons on the right, wrapping to two rows on a phone. */
.toolbar[b-cuo59f2bh1] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.toolbar[b-cuo59f2bh1]  .search {
    flex: 1 1 240px;
    min-width: 0;
    margin-bottom: 0;
}

.toolbar-actions[b-cuo59f2bh1] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.settings-grid[b-cuo59f2bh1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 20px;
}

.settings-switches[b-cuo59f2bh1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2px 20px;
}

.settings-switch[b-cuo59f2bh1] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 0;
    font-size: 13px;
    cursor: pointer;
}

.settings-actions[b-cuo59f2bh1] {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--cd-border);
    display: flex;
    gap: 8px;
}

/* The week as seven small toggles rather than seven checkbox rows: a coupon's days are read as a
   pattern, and a column of "Monday? Tuesday?" hides the pattern in the words. */
.availability[b-cuo59f2bh1] {
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--cd-border);
}

.days[b-cuo59f2bh1] {
    display: flex;
    gap: 6px;
    margin: 8px 0 12px;
    flex-wrap: wrap;
}

.day[b-cuo59f2bh1] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--cd-border);
    border-radius: var(--radius-pill);
    font-size: 12px;
    cursor: pointer;
    user-select: none;
}

.day.on[b-cuo59f2bh1] {
    background: var(--cd-blue-lt);
    border-color: var(--cd-blue);
}

/* The days column in the table, which is the one that would otherwise wrap mid-week. */
.when[b-cuo59f2bh1] {
    white-space: nowrap;
    font-size: 12px;
}

.paging[b-cuo59f2bh1] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}
/* /Components/Pages/CouponUsage.razor.rz.scp.css */
.back[b-qpw5k2lfz5] {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--cd-text-soft);
    text-decoration: none;
}

.back:hover[b-qpw5k2lfz5] {
    color: var(--cd-blue);
}

/* The revenue is the whole order, not the discount, and that is worth saying next to the table
   rather than leaving someone to work it out from a number that looks too high. */
.footnote[b-qpw5k2lfz5] {
    margin-top: 10px;
}

.paging[b-qpw5k2lfz5] {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
/* /Components/Pages/DeliveryAreas.razor.rz.scp.css */
/*
    Three tables of settings. Text left, amounts right, and the row for a range that is switched
    off reads as switched off rather than needing its badge to be found.
*/

[b-p41g9mb6sq] .data-table th,
[b-p41g9mb6sq] .data-table td {
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}

/* The amounts and the counts. */
[b-p41g9mb6sq] .data-table.zips th:nth-child(n+3):nth-child(-n+6),
[b-p41g9mb6sq] .data-table.zips td:nth-child(n+3):nth-child(-n+6),
[b-p41g9mb6sq] .data-table.polygons th:nth-child(n+2):nth-child(-n+4),
[b-p41g9mb6sq] .data-table.polygons td:nth-child(n+2):nth-child(-n+4),
[b-p41g9mb6sq] .data-table.requested th:nth-child(2),
[b-p41g9mb6sq] .data-table.requested td:nth-child(2) {
    text-align: right;
}

[b-p41g9mb6sq] .data-table td.actions {
    text-align: right;
    /* The three buttons stay on one line; the table scrolls if the window is too narrow. */
    white-space: nowrap;
}

[b-p41g9mb6sq] .data-table td.actions .btn + .btn {
    margin-left: 4px;
}

/* Switched off, and looking it. */
[b-p41g9mb6sq] .data-table tbody tr.inactive td:not(.actions) {
    opacity: .55;
}

[b-p41g9mb6sq] .data-table tbody tr.detail,
[b-p41g9mb6sq] .data-table tbody tr.detail:hover {
    background: var(--cd-surface);
    white-space: normal;
}

/*
    The form that adds or changes a range. Wraps rather than shrinks: six number fields squeezed
    onto one line are six fields nobody can hit.
*/
[b-p41g9mb6sq] .zip-form {
    max-width: 760px;
    padding: 4px 0 8px;
}

[b-p41g9mb6sq] .zip-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px 12px;
    margin: 10px 0;
}

[b-p41g9mb6sq] .badge + .badge {
    margin-left: 4px;
}
/* /Components/Pages/Loyalty.razor.rz.scp.css */
/*
    Dezelfde indeling als de andere formulieren in deze portal, zodat de instellingen hier niet
    anders ogen dan die op de coupons- en websitepagina.
*/
.settings-grid[b-6tih9zn4nr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0 20px;
}

.settings-switches[b-6tih9zn4nr] {
    display: grid;
    gap: 2px;
    margin-bottom: 8px;
}

.settings-switch[b-6tih9zn4nr] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 0;
    font-size: 13px;
    cursor: pointer;
}

/* De zoekregel boven de spaarstanden houdt de breedte van een veld, niet van de kaart. */
[b-6tih9zn4nr] .search {
    max-width: 320px;
}

.table-wrap[b-6tih9zn4nr] {
    overflow-x: auto;
    margin-top: 4px;
}

/* Punten zijn een kolom cijfers: rechts uitlijnen en op één breedte houden. */
[b-6tih9zn4nr] .data-table th.points,
[b-6tih9zn4nr] .data-table td.points {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    width: 120px;
}

/* De historie klapt open onder de klant, in dezelfde tabel, één niveau ingesprongen. */
[b-6tih9zn4nr] .data-table tr.ledger-row > td {
    background: var(--cd-bg);
    padding: 10px 14px;
}

.ledger-table[b-6tih9zn4nr] {
    font-size: 13px;
}

[b-6tih9zn4nr] .data-table td.actions {
    text-align: right;
    white-space: nowrap;
    width: 120px;
}
/* /Components/Pages/MasterGroups.razor.rz.scp.css */
/* Een mastergroep is een blok: plaatje, naam, en de namen die eronder hangen als chips. */
.master + .master[b-8pqlnre3c7] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--cd-border);
}

.master-head[b-8pqlnre3c7] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.master-title[b-8pqlnre3c7] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.master-actions[b-8pqlnre3c7] {
    margin-left: auto;
    display: flex;
    gap: 6px;
    white-space: nowrap;
}

.thumb[b-8pqlnre3c7] {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--radius-md, 6px);
    border: 1px solid var(--cd-border);
    flex: none;
}

/* Een lege plek even groot als een plaatje, zodat de rijen uitgelijnd blijven. */
.thumb-empty[b-8pqlnre3c7] {
    background: var(--cd-bg);
    border-style: dashed;
}

.names[b-8pqlnre3c7] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

/* De naam zelf is de knop: klikken maakt hem los, of deelt hem juist in.

   ⚠️ Niet --cd-section als achtergrond: dat is #1e2d40, een donkere band die het design system
   met witte tekst gebruikt. Met --cd-text erop wordt het donker op donker en leest er niets. */
.chip[b-8pqlnre3c7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    font-size: 12px;
    font-family: inherit;
    color: var(--cd-text);
    background: var(--cd-bg);
    border: 1px solid var(--cd-border);
    border-radius: 999px;
    cursor: pointer;
}

.chip:hover[b-8pqlnre3c7] {
    border-color: var(--cd-blue);
    color: var(--cd-blue);
}

.chip-x[b-8pqlnre3c7] {
    color: var(--cd-muted);
    font-size: 14px;
    line-height: 1;
}

.chip-add:hover[b-8pqlnre3c7] {
    background: var(--cd-blue-lt);
}

.chip-add:disabled[b-8pqlnre3c7] {
    opacity: .55;
    cursor: not-allowed;
    border-color: var(--cd-border);
    color: var(--cd-muted);
    background: var(--cd-bg);
}

[b-8pqlnre3c7] .field-input.target {
    max-width: 280px;
}

.settings-grid[b-8pqlnre3c7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0 20px;
}

.settings-switch[b-8pqlnre3c7] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 0;
    font-size: 13px;
    cursor: pointer;
}

/* De knop die de rest van een groep openvouwt. Geen kruisje, dus ook geen chip-uiterlijk dat
   suggereert dat je hem kunt losmaken. */
.chip-more[b-8pqlnre3c7] {
    font-style: italic;
    color: var(--cd-blue);
    background: transparent;
    border-style: dashed;
}
/* /Components/Pages/Menu.razor.rz.scp.css */
/*
    The menu reads as a menu: groups with a heading, items beneath, prices in a column on the
    right. Everything here serves that one shape.
*/

.menu-group + .menu-group[b-4y6vcn7j3f] {
    margin-top: 20px;
}

.menu-group-head[b-4y6vcn7j3f] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--cd-border);
}

/* No header row: a menu does not label its columns, and "Product | Prijs" above forty items is
   forty items of noise. */
[b-4y6vcn7j3f] .data-table.menu-items td {
    padding: 5px 0;
    border: 0;
}

[b-4y6vcn7j3f] .data-table.menu-items tr:hover {
    background: transparent;
}

/* Right-aligned and figure-spaced, so the prices line up on the decimal the way a printed menu
   does rather than drifting with the length of each name. */
[b-4y6vcn7j3f] .data-table.menu-items td.menu-price {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    width: 90px;
}

/* De twee knoppen naast elkaar, met ruimte ertussen: ze doen tegenovergestelde dingen en mogen
   niet als één blok lezen waar je in het voorbijgaan de verkeerde van raakt. */
.menu-actions[b-4y6vcn7j3f] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

/* Bezorgen of afhalen. Alleen zichtbaar als de twee kaarten echt verschillen, dus dit is een
   schakelaar die iets doet — hij hoort er ook uit te zien als een keuze en niet als een label. */
.menu-channels[b-4y6vcn7j3f] {
    display: flex;
    gap: 4px;
    margin-left: 16px;
}

.menu-channel[b-4y6vcn7j3f] {
    padding: 3px 10px;
    font-size: 12px;
    color: var(--cd-muted);
    background: transparent;
    border: 1px solid var(--cd-border);
    border-radius: var(--radius-md, 6px);
    cursor: pointer;
}

.menu-channel.is-current[b-4y6vcn7j3f] {
    color: var(--cd-white);
    background: var(--cd-blue);
    border-color: var(--cd-blue);
}

/* De naam met eventueel een uitverkocht-label ernaast. */
.item-name[b-4y6vcn7j3f] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Een uitverkocht product blijft leesbaar maar treedt terug. */
[b-4y6vcn7j3f] .data-table.menu-items tr.is-soldout td {
    color: var(--cd-muted);
}

/* De keuzes staan onder het product, ingesprongen, als losse plukjes tekst — geen tabel in een
   tabel, want het zijn er zelden meer dan een handvol. */
.choices[b-4y6vcn7j3f] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 3px;
}

.choice-set[b-4y6vcn7j3f] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    font-size: 12px;
    color: var(--cd-muted);
}

.choice-label[b-4y6vcn7j3f] {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 10px;
    color: var(--cd-muted);
}

.choice + .choice[b-4y6vcn7j3f]::before {
    content: "·";
    margin-right: 8px;
    color: var(--cd-border);
}

[b-4y6vcn7j3f] .data-table.menu-items td.menu-soldout {
    text-align: right;
    white-space: nowrap;
    width: 150px;
}

/* Welke kaart je leest, in de kop van de kaart zelf. Twee kleuren die verder nergens op deze
   pagina voorkomen, zodat 2.0 en 3.0 niet op elkaar lijken als je snel kijkt. Allebei komen ze
   van een kassa; het verschil dat het label noemt is wat je ermee kunt. */
.version[b-4y6vcn7j3f] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    margin-left: 10px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: .02em;
    white-space: nowrap;
}

.version strong[b-4y6vcn7j3f] {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* De 3.0-kaart: gepubliceerd door de kassa, hier alleen te lezen. */
.version-pos[b-4y6vcn7j3f] {
    color: #1c4f7c;
    background: #e3eef8;
    border: 1px solid #b9d3ea;
}

/* De 2.0-kaart: staat in deze tabellen en is hier aan te passen. */
.version-portal[b-4y6vcn7j3f] {
    color: #5a4a12;
    background: #f6efd9;
    border: 1px solid #e2d3a3;
}

/* De groepsknop staat rechts in de kop van de groep, los van de telling ernaast. */
.menu-group-head[b-4y6vcn7j3f]  .btn {
    margin-left: 12px;
}
/* /Components/Pages/Onboarding.razor.rz.scp.css */
.toolbar[b-jufbpz61kf] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.toolbar[b-jufbpz61kf]  .search {
    flex: 1 1 260px;
    max-width: 360px;
    margin-bottom: 0;
}

.table-wrap[b-jufbpz61kf] {
    overflow-x: auto;
}

/* Codes en serienummers zijn om over te typen of te vergelijken, niet om te lezen. */
[b-jufbpz61kf] .data-table th.code,
[b-jufbpz61kf] .data-table td.code {
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 12px;
    white-space: nowrap;
}

/* Een scraper-url is lang; hij mag afbreken maar niet de tabel oprekken. */
[b-jufbpz61kf] .data-table td.url {
    max-width: 340px;
    word-break: break-all;
}
/* /Components/Pages/OrderDetails.razor.rz.scp.css */
/*
    The payload, shown as it is stored. It is read rather than skimmed, so it gets a monospaced
    face and its own scroll box instead of pushing the page wide.
*/

[b-ivkk5r1sef] .payload {
    font-family: Consolas, "SF Mono", Menlo, Monaco, "Liberation Mono", monospace;
    font-size: 12px;
    line-height: 1.5;
    background: var(--cd-bg);
    border: 1px solid var(--cd-border);
    border-radius: var(--radius-md);
    padding: 12px;
    margin: 0;
    max-height: 60vh;
    overflow: auto;
    /* Long JSON string values would otherwise scroll the whole page sideways. */
    white-space: pre-wrap;
    word-break: break-word;
}

[b-ivkk5r1sef] .data-table th,
[b-ivkk5r1sef] .data-table td {
    text-align: left;
    vertical-align: top;
}
/* /Components/Pages/Orders.razor.rz.scp.css */
/*
    The design system right-aligns every cell of .data-table — a sensible default for the report
    tables it was written against, where every column is a number. This table is mostly names and
    addresses, and ragged-right text is hard to scan, so the text columns go back to the left and
    only the amount stays right.

    Local rather than a change to the stylesheet: the blanket rule is deliberate for reports, and
    flipping it globally would move every existing table.
*/

[b-59ozhovo3z] .data-table th,
[b-59ozhovo3z] .data-table td {
    text-align: left;
}

/* Received, requested, amount — the columns that line up better as figures. */
[b-59ozhovo3z] .data-table th:nth-child(9),
[b-59ozhovo3z] .data-table td:nth-child(9) {
    text-align: right;
}

[b-59ozhovo3z] .data-table td {
    vertical-align: top;
}
/* /Components/Pages/PaymentSettings.razor.rz.scp.css */
.settings-grid[b-0gz6bctig6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0 20px;
}

.block-intro[b-0gz6bctig6] {
    margin-bottom: 14px;
}

.settings-switches[b-0gz6bctig6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2px 20px;
    margin: 8px 0 4px;
}

.settings-switch[b-0gz6bctig6] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 0;
    font-size: 13px;
    cursor: pointer;
}

.settings-actions[b-0gz6bctig6] {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--cd-border);
}

/* The form for one row, set into the card below the table it belongs to. */
.edit-form[b-0gz6bctig6] {
    margin-top: 16px;
    padding: 16px;
    background: var(--cd-blue-lt);
    border-radius: var(--radius-lg);
}

/* One block per secret. Set apart from the plain fields above, because these behave differently:
   they show a state rather than a value, and only sprout an input when asked. */
.secrets[b-0gz6bctig6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px 20px;
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--cd-border);
}

.secret-head[b-0gz6bctig6] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--btn-h);
}

.secret-head .field-label[b-0gz6bctig6] {
    margin: 0;
}

.secret .field-hint[b-0gz6bctig6] {
    margin-top: 4px;
    display: block;
}

.paypal-status[b-0gz6bctig6] {
    margin-top: 14px;
}

/* The first and last few characters of a stored secret. Monospaced, because that is the only way
   the ends of two random strings can be compared at a glance. */
.secret-preview[b-0gz6bctig6] {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 12px;
    padding: 2px 6px;
    background: var(--cd-blue-lt);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

/* What the providers said, kept beside the fields rather than in a toast: an answer worth acting
   on should not disappear after four seconds. */
.checks[b-0gz6bctig6] {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--cd-border);
}

.check[b-0gz6bctig6] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 0;
    font-size: 13px;
}

/* The providers CashDesk no longer connects restaurants to. Folded away unless this one has such
   a connection, so setting up a new branch does not offer them as a choice. */
.legacy[b-0gz6bctig6] {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--cd-border);
}

.legacy > summary[b-0gz6bctig6] {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    list-style-position: outside;
}

.legacy > summary .field-hint[b-0gz6bctig6] {
    display: block;
    font-weight: 400;
    margin-top: 2px;
}

.legacy > .settings-grid[b-0gz6bctig6] {
    margin-top: 12px;
}
/* /Components/Pages/Reviews.razor.rz.scp.css */
/*
    A dense table, because the job is scanning down it for the reviews that went wrong. Everything
    here serves that: text stays left, scores stay narrow, and the ones worth looking at are
    marked without having to be read.
*/

[b-kjw716owte] .data-table th,
[b-kjw716owte] .data-table td {
    text-align: left;
    vertical-align: top;
}

/* The three score columns read better as figures. */
[b-kjw716owte] .data-table.reviews th:nth-child(n+4):nth-child(-n+6),
[b-kjw716owte] .data-table.reviews td:nth-child(n+4):nth-child(-n+6) {
    text-align: center;
    width: 72px;
}

/*
    Date and customer keep to one line. In three quarters of the width they were wrapping into
    "10-08-" / "2026", which costs a row of height on every line of a list built for scanning.
*/
[b-kjw716owte] .data-table.reviews td:nth-child(2),
[b-kjw716owte] .data-table.reviews td:nth-child(3),
[b-kjw716owte] .data-table.reviews th:nth-child(2),
[b-kjw716owte] .data-table.reviews th:nth-child(3) {
    white-space: nowrap;
}

/*
    The review itself. Clamped rather than truncated with an ellipsis on one line: two lines is
    usually the whole review, and the full text is one click away in the row below.
*/
[b-kjw716owte] .review-cell {
    max-width: 380px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*
    A low score marks the whole row. Colour alone would not do — the score badges are already
    coloured — so it is the left edge, which reads as a mark against the row rather than as
    another rating.
*/
[b-kjw716owte] .data-table tbody tr.attention td:first-child {
    box-shadow: inset 3px 0 0 var(--cd-danger-tx);
}

[b-kjw716owte] .data-table tbody tr.attention {
    background: var(--cd-danger-bg);
}

[b-kjw716owte] .data-table tbody tr.attention:hover {
    background: var(--cd-danger-bg);
}

[b-kjw716owte] .data-table tbody tr.detail,
[b-kjw716owte] .data-table tbody tr.detail:hover {
    background: var(--cd-surface);
}

[b-kjw716owte] .review-text {
    margin: 0;
    line-height: 1.6;
    max-width: 720px;
    /* Whatever the customer typed, including their line breaks. */
    white-space: pre-wrap;
}

[b-kjw716owte] .filter-chip .badge {
    margin-left: 6px;
}

/* The three standing averages, above the list. */
[b-kjw716owte] .averages {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

[b-kjw716owte] .averages .stat-card {
    /* Three across on a desktop, wrapping to one on a phone rather than shrinking to unreadable. */
    flex: 1 1 160px;
}

/*
    The list beside the weekly scores, three to one — the proportion the WebForms page used
    (col-lg-9 and col-lg-3).
*/
.reviews-layout[b-kjw716owte] {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 16px;
    align-items: start;

    /*
        The filter chips sit above the list and not above the weekly scores, because they filter
        one and not the other. That leaves the two panels starting at different heights unless the
        sidebar is dropped by exactly the row the chips take up — so both sides read from these,
        rather than from a number in one place and a matching number in another.

        The height is what .filter-chip is in the design system, and it is border-box, so the row
        is exactly that tall.
    */
    --chips-height: 26px;
    --chips-gap: 12px;
}

[b-kjw716owte] .filter-chips {
    margin-bottom: var(--chips-gap);
}

.reviews-side[b-kjw716owte] {
    margin-top: calc(var(--chips-height) + var(--chips-gap));
}

/*
    Below this the split stops working: the sidebar gets too narrow for four columns and the list
    needs every pixel it has. The weekly scores are context rather than the task, so they give way
    — the averages above stay, and they are the figure someone on a phone is after.
*/
@media (max-width: 1000px) {
    .reviews-layout[b-kjw716owte] {
        grid-template-columns: 1fr;
    }

    .reviews-side[b-kjw716owte] {
        display: none;
    }
}

/* Tighter than the page's own tables, because it lives in a quarter of the width. */
[b-kjw716owte] .data-table.weeks th,
[b-kjw716owte] .data-table.weeks td {
    padding: 7px 6px;
    font-size: 12px;
    white-space: nowrap;
}

[b-kjw716owte] .data-table.weeks th:not(:first-child),
[b-kjw716owte] .data-table.weeks td:not(:first-child) {
    text-align: right;
}

/* The review count, riding along with the week rather than taking a column of its own. */
[b-kjw716owte] .data-table.weeks td:first-child .field-hint {
    margin-left: 5px;
    font-size: 11px;
}

/* The order the review was left about, under the answer being written. */
[b-kjw716owte] .order-panel {
    border-top: 1px solid var(--cd-border);
    padding-top: 12px;
    max-width: 720px;
}

[b-kjw716owte] .order-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 12.5px;
    color: var(--cd-muted);
    margin-bottom: 8px;
}

[b-kjw716owte] .order-lines {
    margin: 0;
    padding-left: 18px;
    line-height: 1.7;
}
/* /Components/Pages/Slides.razor.rz.scp.css */
.table-wrap[b-3e72tt0dwf] {
    overflow-x: auto;
}

/* De volgorde is een cijferkolom: smal en rechts uitgelijnd. */
[b-3e72tt0dwf] .data-table th.order,
[b-3e72tt0dwf] .data-table td.order {
    width: 90px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Een miniatuur, niet de hele afbeelding — de oude tabel gaf de slide 50% van de breedte. */
.thumb[b-3e72tt0dwf] {
    max-width: 160px;
    max-height: 56px;
    border-radius: var(--radius-md, 6px);
    border: 1px solid var(--cd-border);
    display: block;
}

[b-3e72tt0dwf] .data-table td.actions {
    white-space: nowrap;
    text-align: right;
}

[b-3e72tt0dwf] .data-table td.actions .btn + .btn {
    margin-left: 6px;
}

.settings-grid[b-3e72tt0dwf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 20px;
}

.settings-switches[b-3e72tt0dwf] {
    display: grid;
    gap: 2px;
}

.settings-switch[b-3e72tt0dwf] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 0;
    font-size: 13px;
    cursor: pointer;
}
/* /Components/Pages/StoreDirectory.razor.rz.scp.css */
.toolbar[b-ab8nra59rm] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.toolbar[b-ab8nra59rm]  .search {
    flex: 1 1 260px;
    max-width: 360px;
    margin-bottom: 0;
}

.table-wrap[b-ab8nra59rm] {
    overflow-x: auto;
}

/* De branchekeuze staat in de tabel en hoort daar niet de volle breedte te nemen. */
[b-ab8nra59rm] .field-input.branch {
    width: 200px;
    margin-bottom: 0;
}

.settings-switch[b-ab8nra59rm] {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

/* Het store-ID is om te kopiëren, niet om te lezen: monospace en selecteerbaar. */
[b-ab8nra59rm] .data-table td.store-id {
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 12px;
    color: var(--cd-muted);
    white-space: nowrap;
    user-select: all;
}

/* De keten waar een vestiging onder hangt. Terughoudend gezet: het is context bij de naam
   ernaast, niet iets om zelf te lezen. */
[b-ab8nra59rm] .data-table td.chain {
    color: var(--cd-muted);
    white-space: nowrap;
}
/* /Components/Pages/StoreMaintenance.razor.rz.scp.css */
/* Two pickers with an arrow between them. Wraps to a column on a narrow screen, where the
   arrow would point the wrong way, so it is dropped rather than rotated. */
.pair[b-lskggl3xjy] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.pair[b-lskggl3xjy]  .form-field {
    flex: 1 1 0;
    min-width: 0;
}

.pair-arrow[b-lskggl3xjy] {
    color: var(--cd-text-soft);
    padding-bottom: 9px;
}

.pair-warning[b-lskggl3xjy] {
    color: var(--cd-amber-icon);
}

@media (max-width: 640px) {
    .pair[b-lskggl3xjy] {
        flex-direction: column;
        align-items: stretch;
    }

    .pair-arrow[b-lskggl3xjy] {
        display: none;
    }
}

/* What goes across. Two columns on a wide screen so eleven groups stay one glance rather than
   one scroll, and the descriptions still have room to be sentences. */
.choices[b-lskggl3xjy] {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--cd-border);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 4px 20px;
}

.choices-header[b-lskggl3xjy] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.choice[b-lskggl3xjy] {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    padding: 6px 0;
    cursor: pointer;
}

.choice input[b-lskggl3xjy] {
    margin-top: 2px;
    flex-shrink: 0;
}

.choice > span[b-lskggl3xjy] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.choice strong[b-lskggl3xjy] {
    font-size: 13px;
    font-weight: 600;
}

.transfer-note[b-lskggl3xjy] {
    margin-top: 12px;
}

.transfer-actions[b-lskggl3xjy] {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* The three figures someone weighs a wipe against, before the table of seventy rows. */
.wipe-summary[b-lskggl3xjy] {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 12px 0;
}

.wipe-summary strong[b-lskggl3xjy] {
    display: block;
    font-size: 18px;
    line-height: 1.3;
}

/* Deliberately set apart from the reading above it: the input and the red button are the point
   of no return, and should not read as one more row of the table. */
.wipe-confirm[b-lskggl3xjy] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--cd-border);
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.wipe-confirm[b-lskggl3xjy]  .form-field {
    flex: 1 1 260px;
    min-width: 0;
    margin-bottom: 0;
}

/*
    The id under the name. Monospaced and quiet: it is not what identifies the restaurant to a
    reader, but it is the only thing that identifies it to whatever they do about it next.
*/
.bulk-id[b-lskggl3xjy] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    color: var(--cd-muted);
}

/* The ids this run passed over, kept together so the whole block can be taken in one go. */
.bulk-skipped[b-lskggl3xjy] {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bulk-skipped textarea[b-lskggl3xjy] {
    resize: vertical;
    background: var(--cd-surface);
}

/* The run written out for a mail. Monospaced so the dashes line up while it is still on screen. */
.bulk-summary[b-lskggl3xjy] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    line-height: 1.5;
    resize: vertical;
    background: var(--cd-surface);
}

/* The button and how far it has got, on one line. */
.bulk-actions[b-lskggl3xjy] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
/* /Components/Pages/Times.razor.rz.scp.css */
/*
    Een rij per dag: de naam links op vaste breedte, de vensters daarnaast. Op een telefoon zakt
    de naam boven de vensters in plaats van dat de tijdvelden onleesbaar smal worden.
*/
.day[b-qzz0a01jtp] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid var(--cd-border);
}

.day:last-of-type[b-qzz0a01jtp] {
    border-bottom: 0;
}

.day-name[b-qzz0a01jtp] {
    flex: 0 0 96px;
    padding-top: 7px;
    font-size: 13px;
    font-weight: 600;
    text-transform: capitalize;
}

.day-windows[b-qzz0a01jtp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    min-width: 0;
}

.window[b-qzz0a01jtp] {
    display: flex;
    align-items: center;
    gap: 6px;
}

[b-qzz0a01jtp] .field-input.time {
    width: 104px;
    margin-bottom: 0;
}

.dash[b-qzz0a01jtp] {
    font-size: 13px;
    color: var(--cd-muted);
}

@media (max-width: 560px) {
    .day[b-qzz0a01jtp] {
        flex-direction: column;
        gap: 6px;
    }

    .day-name[b-qzz0a01jtp] {
        flex: none;
        padding-top: 0;
    }
}

/* De uitzonderingen: hetzelfde formulierraster als de andere pagina's. */
.exception-form[b-qzz0a01jtp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0 16px;
}

.exception-actions[b-qzz0a01jtp] {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.table-wrap[b-qzz0a01jtp] {
    overflow-x: auto;
}

[b-qzz0a01jtp] .data-table td.actions {
    white-space: nowrap;
    text-align: right;
}

[b-qzz0a01jtp] .data-table td.actions .btn + .btn {
    margin-left: 6px;
}
/* /Components/Pages/WebsiteSettings.razor.rz.scp.css */
/* Two or three columns depending on the width, so a block of eight fields is one glance rather
   than a column you have to scroll. The fields keep their own minimum, so nothing is squeezed
   narrower than the value it holds. */
.settings-grid[b-xchi62i9mz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0 20px;
}

.block-intro[b-xchi62i9mz] {
    margin-bottom: 14px;
}

/* The yes/no settings, apart from the fields above them: they read as a list of statements about
   the shop rather than as more boxes to fill in. */
.settings-switches[b-xchi62i9mz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2px 20px;
    margin: 8px 0 4px;
    padding-top: 12px;
    border-top: 1px solid var(--cd-border);
}

.settings-switch[b-xchi62i9mz] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 0;
    font-size: 13px;
    cursor: pointer;
}

.settings-switch input[b-xchi62i9mz] {
    flex-shrink: 0;
}

.settings-actions[b-xchi62i9mz] {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--cd-border);
}

/* The colour next to the box that sets it, because #dddddd means nothing until you see it. */
.colour-field[b-xchi62i9mz] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.colour-field[b-xchi62i9mz]  .field-input {
    flex: 1 1 auto;
    min-width: 0;
}

.colour-swatch[b-xchi62i9mz] {
    width: var(--btn-h);
    height: var(--btn-h);
    flex-shrink: 0;
    border: 1px solid var(--cd-border);
    border-radius: var(--radius-sm);
}