/* _content/Kuramo.App/Components/Components/ChatConversation.razor.rz.scp.css */
/* De inhoud van .chat-message-html komt uit @((MarkupString)message.Html) en wordt dus pas op
   runtime aangemaakt. Zulke elementen krijgen het scope-attribuut van Blazor niet, want dat wordt
   bij het compileren aan de markup van dit component toegevoegd. Zonder ::deep zou
   `.chat-message-html h1` compileren naar `.chat-message-html h1[b-<hash>]` en nooit matchen.
   Met ::deep verhuist het attribuut naar de container: `.chat-message-html[b-<hash>] h1`. */
.chat-message-html[b-wn0zneatdh] {
    line-height: 1.5;
}

/* Lettergrootte-klassen die het model via <span class="..."> mag zetten. De allow-list is dezelfde
   als in ChatMessageHtmlSanitizer; houd de drie (sanitizer, deze CSS, systeemprompt) in sync. */
.chat-message-html[b-wn0zneatdh]  .tekst-extraklein { font-size: 0.75em; }
.chat-message-html[b-wn0zneatdh]  .tekst-klein { font-size: 0.85em; }
.chat-message-html[b-wn0zneatdh]  .tekst-groot { font-size: 1.25em; }
.chat-message-html[b-wn0zneatdh]  .tekst-extragroot { font-size: 1.5em; }

.chat-message-html[b-wn0zneatdh]  h1,
.chat-message-html[b-wn0zneatdh]  h2,
.chat-message-html[b-wn0zneatdh]  h3,
.chat-message-html[b-wn0zneatdh]  h4,
.chat-message-html[b-wn0zneatdh]  h5,
.chat-message-html[b-wn0zneatdh]  h6 {
    margin: 0.4em 0 0.2em;
    font-size: 1.05rem;
    font-weight: 600;
}

.chat-message-html[b-wn0zneatdh]  p {
    margin: 0.3em 0;
}

.chat-message-html[b-wn0zneatdh]  ul,
.chat-message-html[b-wn0zneatdh]  ol {
    margin: 0.3em 0;
    padding-left: 1.4em;
}

.chat-message-html[b-wn0zneatdh]  li {
    margin: 0.15em 0;
}

.chat-message-html[b-wn0zneatdh]  pre,
.chat-message-html[b-wn0zneatdh]  code {
    background-color: var(--mud-palette-background-grey);
    border-radius: 4px;
    padding: 0.1em 0.3em;
    font-family: monospace;
}

.chat-message-html[b-wn0zneatdh]  pre {
    padding: 0.5em;
    overflow-x: auto;
}

.chat-message-html[b-wn0zneatdh]  blockquote {
    margin: 0.3em 0;
    padding-left: 0.8em;
    border-left: 3px solid var(--mud-palette-lines-default);
}

.chat-message-html[b-wn0zneatdh]  a {
    color: var(--mud-palette-primary);
}

/* Simple overview tables. The content is user-visible data (werkorders, statussen); it must stay
   readable and never push the chat column into horizontal page scroll, so the table can scroll
   inside its own box. Palette variables keep it correct in both light and dark themes. */
.chat-message-html[b-wn0zneatdh]  table {
    border-collapse: collapse;
    margin: 0.4em 0;
    width: 100%;
    display: block;
    overflow-x: auto;
    font-size: 0.9rem;
}

.chat-message-html[b-wn0zneatdh]  th,
.chat-message-html[b-wn0zneatdh]  td {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 0.3em 0.5em;
    text-align: left;
    vertical-align: top;
}

.chat-message-html[b-wn0zneatdh]  th {
    background-color: var(--mud-palette-background-grey);
    font-weight: 600;
}

.chat-message-html[b-wn0zneatdh]  caption {
    caption-side: top;
    padding: 0.2em 0;
    font-weight: 600;
    text-align: left;
}

/* Typing indicator shown while a turn is in flight (see the _isBusy block in the markup).
   Three dots fading in and out on a staggered delay — the conventional "still working" signal in a
   chat transcript, and the only feedback during the stretch where Claude is thinking or running
   tools and no text has arrived yet. */
.chat-typing-dots[b-wn0zneatdh] {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    line-height: 1;
}

.chat-typing-dots span[b-wn0zneatdh] {
    width: 0.4em;
    height: 0.4em;
    border-radius: 50%;
    background-color: var(--mud-palette-text-secondary);
    animation: chat-typing-blink-b-wn0zneatdh 1.2s infinite ease-in-out;
}

.chat-typing-dots span:nth-child(2)[b-wn0zneatdh] {
    animation-delay: 0.2s;
}

.chat-typing-dots span:nth-child(3)[b-wn0zneatdh] {
    animation-delay: 0.4s;
}

@keyframes chat-typing-blink-b-wn0zneatdh {
    0%, 80%, 100% {
        opacity: 0.25;
    }

    40% {
        opacity: 1;
    }
}

/* Motion is decoration here — the dots plus the label already say "busy" without it. */
@media (prefers-reduced-motion: reduce) {
    .chat-typing-dots span[b-wn0zneatdh] {
        animation: none;
        opacity: 0.6;
    }
}

/* Greeting card in an empty chat (MudPaper/MudButton are child components, hence ::deep from the wrapper). */
.chat-empty[b-wn0zneatdh]  .chat-greeting {
    width: 100%;
    max-width: 640px;
    text-align: left;
    color: var(--mud-palette-text-primary);
    border-radius: 12px;
}

.chat-empty[b-wn0zneatdh]  .chat-greeting-title {
    font-weight: 600;
    line-height: 1.2;
}

.chat-empty[b-wn0zneatdh]  .chat-greeting-suggestions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 8px;
}

.chat-empty[b-wn0zneatdh]  .chat-greeting-suggestion {
    justify-content: flex-start;
    text-align: left;
    text-transform: none;
    white-space: normal;
    line-height: 1.35;
    padding: 8px 12px;
}
/* _content/Kuramo.App/Components/Components/CoWorkHost.razor.rz.scp.css */
/* The assistant launcher and panel (CoWorkHost). Colours are MudBlazor palette variables, so every theme works.

   z-index: ABOVE the page, BELOW MudBlazor's dialogs and popovers. MudBlazor defaults: drawer 1100, popover 1200, appbar 1300,
   dialog 1400, snackbar 1500, tooltip 1600 (theme variables --mud-zindex-*). The panel sits at popover - 50 = 1150: above the
   drawer and the page, under the app bar (the panel never reaches into it: see the top/max-height rules), and under the
   popovers (the model/effort menus of the conversation inside the panel are MudBlazor popovers and must open ABOVE it) and
   under dialogs (rename/share/delete). */
.cowork-launcher[b-vqqgpyz6ai],
.cowork-panel[b-vqqgpyz6ai] {
    z-index: calc(var(--mud-zindex-popover, 1200) - 50);
}

/* ---------- launcher ---------- */
.cowork-launcher[b-vqqgpyz6ai] {
    position: fixed;
    right: 16px;
    bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 500;
    font-size: .92rem;
    color: var(--mud-palette-primary-text);
    background: var(--mud-palette-primary);
    padding: 11px 16px 11px 13px;
    border-radius: 99px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
}

.cowork-launcher[hidden][b-vqqgpyz6ai] {
    display: none;
}

.cowork-launcher:focus-visible[b-vqqgpyz6ai],
.cowork-panel button:focus-visible[b-vqqgpyz6ai] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.cowork-launcher:focus-visible[b-vqqgpyz6ai] {
    outline-color: var(--mud-palette-text-primary);
}

.cowork-launcher-kbd[b-vqqgpyz6ai] {
    font-family: ui-monospace, Consolas, monospace;
    font-size: .68rem;
    opacity: .85;
    border: 1px solid currentColor;
    border-radius: 4px;
    padding: 0 4px;
}

.cowork-badge[b-vqqgpyz6ai] {
    font-size: .72rem;
    font-weight: 600;
    background: var(--mud-palette-warning);
    color: var(--mud-palette-black);
    border-radius: 99px;
    padding: 1px 8px;
}

/* ---------- panel ---------- */
.cowork-panel[b-vqqgpyz6ai] {
    position: fixed;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
}

.cowork-panel[hidden][b-vqqgpyz6ai] {
    display: none;
}

.cowork-panel[data-mode="compact"][b-vqqgpyz6ai],
.cowork-panel[data-mode="wide"][b-vqqgpyz6ai] {
    right: 16px;
    bottom: 16px;
    min-width: 320px;
    min-height: 360px;
    max-width: calc(100vw - 32px);
    /* never under the app bar */
    max-height: calc(100dvh - var(--mud-appbar-height, 64px) - 32px);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .3);
}

/* Side panel: full height under the app bar, the page makes room (see DockPushCss in CoWorkHost.razor). */
.cowork-panel[data-mode="dock"][b-vqqgpyz6ai] {
    top: var(--mud-appbar-height, 64px);
    right: 0;
    bottom: 0;
    min-width: 320px;
    max-width: min(640px, calc(100vw - 200px));
    border-width: 0 0 0 1px;
    border-radius: 0;
}

.cowork-resizing[b-vqqgpyz6ai] {
    user-select: none;
}

/* drag handles (left edge, top edge, corner; the side panel only has the left edge) */
.cowork-rz[b-vqqgpyz6ai] {
    position: absolute;
    z-index: 2;
    touch-action: none;
}

.cowork-rz-l[b-vqqgpyz6ai] {
    left: -5px;
    top: 12px;
    bottom: 12px;
    width: 10px;
    cursor: ew-resize;
}

.cowork-rz-t[b-vqqgpyz6ai] {
    top: -5px;
    left: 12px;
    right: 12px;
    height: 10px;
    cursor: ns-resize;
}

.cowork-rz-tl[b-vqqgpyz6ai] {
    left: -6px;
    top: -6px;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
}

.cowork-panel[data-mode="dock"] .cowork-rz-l[b-vqqgpyz6ai] {
    left: -4px;
    top: 0;
    bottom: 0;
}

.cowork-rz:hover[b-vqqgpyz6ai],
.cowork-resizing .cowork-rz[b-vqqgpyz6ai] {
    background: color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
    border-radius: 4px;
}

.cowork-size-badge[b-vqqgpyz6ai] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: var(--mud-palette-text-primary);
    color: var(--mud-palette-surface);
    font-family: ui-monospace, Consolas, monospace;
    font-size: .8rem;
    padding: 4px 10px;
    border-radius: 6px;
    pointer-events: none;
    z-index: 5;
}

.cowork-size-badge[hidden][b-vqqgpyz6ai] {
    display: none;
}

/* ---------- header ---------- */
.cowork-head[b-vqqgpyz6ai] {
    flex: none;
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

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

.cowork-grow[b-vqqgpyz6ai] {
    flex: 1;
}

.cowork-name[b-vqqgpyz6ai] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    font-size: 1rem;
}

.cowork-name-text[b-vqqgpyz6ai] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cowork-ib[b-vqqgpyz6ai] {
    flex: none;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.cowork-ib:hover[b-vqqgpyz6ai] {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

.cowork-sizes[b-vqqgpyz6ai] {
    display: inline-flex;
    flex: none;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 7px;
    overflow: hidden;
}

.cowork-ib:disabled[b-vqqgpyz6ai],
.cowork-size:disabled[b-vqqgpyz6ai] {
    opacity: .4;
    cursor: not-allowed;
}

.cowork-ib:disabled:hover[b-vqqgpyz6ai] {
    background: transparent;
    color: var(--mud-palette-text-secondary);
}

.cowork-size[b-vqqgpyz6ai] {
    width: 30px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 0;
    border-right: 1px solid var(--mud-palette-lines-default);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.cowork-size:last-child[b-vqqgpyz6ai] {
    border-right: 0;
}

.cowork-size[aria-pressed="true"][b-vqqgpyz6ai] {
    background: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
    color: var(--mud-palette-primary);
}

.cowork-size svg[b-vqqgpyz6ai] {
    width: 18px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.3;
}

.cowork-size svg .f[b-vqqgpyz6ai] {
    fill: currentColor;
    stroke: none;
}

.cowork-chip[b-vqqgpyz6ai] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
    font-size: .78rem;
    padding: 3px 10px 3px 6px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
}

.cowork-chip-text[b-vqqgpyz6ai] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- body: the conversation fills the rest ---------- */
.cowork-body[b-vqqgpyz6ai] {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    overflow: hidden;
}

/* The composer row of the conversation is built for the wide chat page (attach, mic, two menus, field, send). In a narrow
   panel it wraps: tools on the first line, the field and the send button on the second. */
.cowork-body[b-vqqgpyz6ai]  #chatbot-composer {
    flex-wrap: wrap;
}

.cowork-body[b-vqqgpyz6ai]  #chatbot-composer .mud-input-control {
    /* the whole row minus the send button, so the field always starts a line of its own */
    flex: 1 1 calc(100% - 116px);
    min-width: 8rem;
    order: 5;
}

.cowork-body[b-vqqgpyz6ai]  #chatbot-composer > .mud-button-root:not(.mud-icon-button) {
    order: 6;
}

/* ---------- one screen on a phone ---------- */
@media (max-width: 640px) {
    .cowork-launcher[b-vqqgpyz6ai] {
        padding: 12px;
        /* UNDER the temporary navigation drawer (1100) so an open drawer covers the button; the panel (one screen) stays above it. */
        z-index: calc(var(--mud-zindex-drawer, 1100) - 50);
    }

    .cowork-launcher-label[b-vqqgpyz6ai],
    .cowork-launcher-kbd[b-vqqgpyz6ai] {
        display: none;
    }

    /* only a dot on the corner of the round button */
    .cowork-badge[b-vqqgpyz6ai] {
        position: absolute;
        top: -2px;
        right: -2px;
        width: 14px;
        height: 14px;
        padding: 0;
        font-size: 0;
        border: 2px solid var(--mud-palette-surface);
    }

    .cowork-panel[data-mode][b-vqqgpyz6ai] {
        top: calc(var(--mud-appbar-height, 64px) + 8px);
        left: 8px;
        right: 8px;
        bottom: 8px;
        width: auto !important;
        height: auto !important;
        min-width: 0;
        min-height: 0;
        max-width: none;
        max-height: none;
        border-width: 1px;
        border-radius: 12px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, .3);
    }

    .cowork-rz[b-vqqgpyz6ai],
    .cowork-sizes[b-vqqgpyz6ai] {
        display: none;
    }
}
/* _content/Kuramo.App/Components/Components/OfferComponent.razor.rz.scp.css */
/* The table Offerteregels (plan offerteregel-productregel 9, design v9): rows of 48 px, every button, menu and field at least 44 px (tablet without a mouse); the remarks of
   a line stand as grey text under its name and are changed in the dialog of the line (plan productregel-dialogs 3.6). Colours only from the MudBlazor palette. */
.offer-lines[b-ehamfhgz9i] {
    padding: 12px 16px;
    /* Plan productregel-dialogs 2.6 and 3.10: the table never scrolls sideways. Its own width decides the layout (an open CoWork panel counts, not the window). */
    container-type: inline-size;
    container-name: offer-lines;
    /* Plan productregel-1i: the green of a filled-in size and of a counter, the yellow of a size that is not done; palette mixes only, >= 4.5:1 in both themes
       (OfferLinesStatusThemeTests reads these percentages). The mark (✓ ! –) and its text carry the meaning, the colour only helps. */
    --ols-ok-bg: color-mix(in srgb, var(--mud-palette-success) 16%, var(--mud-palette-surface));
    --ols-ok-text: color-mix(in srgb, var(--mud-palette-success) 30%, var(--mud-palette-text-primary));
    --ols-todo-bg: color-mix(in srgb, var(--mud-palette-warning) 20%, var(--mud-palette-surface));
    --ols-todo-text: color-mix(in srgb, var(--mud-palette-warning) 25%, var(--mud-palette-text-primary));
}

.offer-lines-title[b-ehamfhgz9i] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.offer-lines-table[b-ehamfhgz9i] {
    width: 100%;
    border-collapse: collapse;
    color: var(--mud-palette-text-primary);
}

.offer-lines-table th[b-ehamfhgz9i] {
    text-align: left;
    font-weight: 600;
    padding: 6px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.offer-lines-table td[b-ehamfhgz9i] {
    padding: 2px 8px;
    height: 48px;
    vertical-align: middle;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.col-pos[b-ehamfhgz9i] {
    width: 48px;
}

/* The Code is a share of the width, never a fixed minimum: under 900 px it gets a row of its own. */
.col-code[b-ehamfhgz9i] {
    width: 40%;
}

.col-qty[b-ehamfhgz9i] {
    width: 96px;
}

.col-price[b-ehamfhgz9i] {
    width: 120px;
    white-space: nowrap;
}

.col-act[b-ehamfhgz9i] {
    white-space: nowrap;
    text-align: right;
}

.col-menu[b-ehamfhgz9i] {
    width: 48px;
}

/* Plan productregel-1i: Buiten and Binnen are one mark each, Ingevuld the four counters. */
.col-out[b-ehamfhgz9i],
.col-in[b-ehamfhgz9i] {
    width: 64px;
    text-align: center;
}

.col-fill[b-ehamfhgz9i] {
    min-width: 0;
}

/* With the status columns the Code takes 30 % instead of 40 %: measured on a replica with the real CSS (review of 1i), at 40 % the four counters stood one per
   line and a line became 190 px high. The counters stay on one line (never one pill per line); only a phone lets them wrap. */
.offer-lines-table.ols-on th.col-code[b-ehamfhgz9i] {
    width: 30%;
}

.ols-label[b-ehamfhgz9i],
.ols-head-short[b-ehamfhgz9i] {
    display: none;
}

/* A mark is a button of at least 44 x 44 px (a tablet without a mouse); "–" has the same size without being a button. */
.ols-mark[b-ehamfhgz9i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 22px;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    background: none;
    color: var(--mud-palette-text-primary);
}

button.ols-mark[b-ehamfhgz9i],
button.ols-pill[b-ehamfhgz9i] {
    cursor: pointer;
}

.ols-ok[b-ehamfhgz9i] {
    background-color: var(--ols-ok-bg);
    color: var(--ols-ok-text);
}

.ols-todo[b-ehamfhgz9i] {
    background-color: var(--ols-todo-bg);
    color: var(--ols-todo-text);
}

.ols-na[b-ehamfhgz9i] {
    color: var(--mud-palette-text-secondary);
    font-weight: 400;
}

.ols-pills[b-ehamfhgz9i] {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 4px;
}

.ols-pill[b-ehamfhgz9i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 22px;
    font: inherit;
    font-size: 0.8rem;
    background: none;
    color: var(--mud-palette-text-secondary);
}

.ols-pill-on[b-ehamfhgz9i] {
    border-color: transparent;
    background-color: var(--ols-ok-bg);
    color: var(--ols-ok-text);
}

.ols-pill-zero[b-ehamfhgz9i] {
    color: var(--mud-palette-text-secondary);
}

.ols-count[b-ehamfhgz9i] {
    font-weight: 700;
}

.ols-mark:focus-visible[b-ehamfhgz9i],
.ols-pill:focus-visible[b-ehamfhgz9i] {
    outline: 2px solid var(--mud-palette-text-primary);
    outline-offset: 2px;
}

.ols-mark:disabled[b-ehamfhgz9i],
.ols-pill:disabled[b-ehamfhgz9i] {
    cursor: default;
    opacity: 0.6;
}

/* Plan productregel-afronding 10 (Controleur CK21): from 1100 px of table width the name keeps 9.5rem, enough for "2DKOV · 1200 × 2000" on one line, on an element inside
   the cell (a min-width on a td differs per browser). The Code has no minimum and gives the room. Measured on the real app (1440, 1366, 1280, 1152 and 1024 px, with and
   without the menu): one line from 1100 px of table width, two lines below that (the hard spaces in the size), no sideways scrolling. Under 900 px the two-row layout
   gives the name the full width anyway. */
@container offer-lines (min-width: 1100px) {
    .offer-lines-table .col-name .offer-line-name[b-ehamfhgz9i] {
        display: inline-block;
        min-width: 9.5rem;
    }
}

/* Under 1200 px of the table: only the numbers, in the fixed order Algemeen · Indeling · Uitvoering · Opties; the header names them short. Measured on a replica
   with the real CSS: with the words the counters need about 356 px and the Code keeps about 250 px at 1200 px; under that the Code would shrink below the width of its
   field, so the words go (the numbers need about 204 px). A screen of 1440 px with the menu open gives about 1130 px: numbers; 1440 px without the menu: words. */
@container offer-lines (max-width: 1199.98px) {
    .ols-word[b-ehamfhgz9i] {
        display: none;
    }

    .ols-head-short[b-ehamfhgz9i] {
        display: inline;
        font-weight: 400;
        color: var(--mud-palette-text-secondary);
    }
}

/* Under 900 px every line is two rows: Pos, the Code over the full width and the menu on top; Naam (with its remark), Aantal, Prijs and Samenstellen below. */
@container offer-lines (max-width: 899.98px) {
    .offer-lines-table[b-ehamfhgz9i],
    .offer-lines-table tbody[b-ehamfhgz9i] {
        display: block;
    }

    /* The column headers stay for a screen reader (role columnheader), out of sight. */
    .offer-lines-table thead[b-ehamfhgz9i] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .offer-lines-table tr.offer-line[b-ehamfhgz9i] {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) auto auto auto 48px;
        grid-template-areas:
            "pos code code code code menu"
            ". name qty price act act";
        column-gap: 8px;
        row-gap: 4px;
        align-items: center;
        padding: 6px 0;
        border-bottom: 1px solid var(--mud-palette-lines-default);
    }

    .offer-lines-table tr.offer-line > td[b-ehamfhgz9i] {
        display: block;
        width: auto;
        min-width: 0;
        height: auto;
        padding: 0;
        border-bottom: none;
    }

    .offer-lines-table tr.offer-line > .col-pos[b-ehamfhgz9i] {
        grid-area: pos;
    }

    .offer-lines-table tr.offer-line > .col-code[b-ehamfhgz9i] {
        grid-area: code;
    }

    .offer-lines-table tr.offer-line > .col-name[b-ehamfhgz9i] {
        grid-area: name;
        overflow-wrap: anywhere;
    }

    .offer-lines-table tr.offer-line > .col-qty[b-ehamfhgz9i] {
        grid-area: qty;
        width: 96px;
    }

    .offer-lines-table tr.offer-line > .col-price[b-ehamfhgz9i] {
        grid-area: price;
    }

    .offer-lines-table tr.offer-line > .col-act[b-ehamfhgz9i] {
        grid-area: act;
    }

    .offer-lines-table tr.offer-line > .col-menu[b-ehamfhgz9i] {
        grid-area: menu;
        justify-self: end;
    }

    /* Plan productregel-1i (768): a third row with Buiten, Binnen and the four numbers, each with its label. The columns of this layout get two more: Buiten and Binnen
       take their own width, the numbers the rest. */
    .offer-lines-table tr.offer-line.offer-line-status[b-ehamfhgz9i] {
        grid-template-columns: 40px auto auto minmax(0, 1fr) auto auto auto 48px;
        grid-template-areas:
            "pos code code code code code code menu"
            ". name name name qty price act act"
            ". out in fill fill fill fill fill";
    }

    .offer-lines-table tr.offer-line > .col-out[b-ehamfhgz9i] {
        grid-area: out;
    }

    .offer-lines-table tr.offer-line > .col-in[b-ehamfhgz9i] {
        grid-area: in;
    }

    .offer-lines-table tr.offer-line > .col-fill[b-ehamfhgz9i] {
        grid-area: fill;
    }

    .offer-lines-table tr.offer-line > .col-out[b-ehamfhgz9i],
    .offer-lines-table tr.offer-line > .col-in[b-ehamfhgz9i],
    .offer-lines-table tr.offer-line > .col-fill[b-ehamfhgz9i] {
        display: flex;
        align-items: center;
        gap: 4px;
        width: auto;
        text-align: left;
        white-space: normal;
    }

    .offer-lines-table tr.offer-line .ols-label[b-ehamfhgz9i] {
        display: inline;
        font-size: 0.875rem;
        color: var(--mud-palette-text-secondary);
    }

    .offer-lines-table tr.offer-line .ols-label-fill[b-ehamfhgz9i] {
        display: none;
    }
}

/* A phone: Aantal, Prijs and Samenstellen do not fit next to the Naam, and the Code needs every pixel. Row 1 is Pos and the Code, row 2 the Naam with its Prijs,
   row 3 Aantal, Samenstellen and the menu; the block gives up its side padding. */
@container offer-lines (max-width: 519.98px) {
    .offer-lines-table[b-ehamfhgz9i] {
        margin: 0 -16px;
        width: calc(100% + 32px);
    }

    .offer-lines-table tr.offer-line[b-ehamfhgz9i] {
        grid-template-columns: 32px minmax(0, 1fr) auto 48px;
        grid-template-areas:
            "pos code code code"
            ". name price price"
            ". qty act menu";
    }

    .offer-lines-table tr.offer-line > .col-qty[b-ehamfhgz9i] {
        width: auto;
        max-width: 120px;
    }

    .offer-lines-table tr.offer-line > .col-price[b-ehamfhgz9i],
    .offer-lines-table tr.offer-line > .col-act[b-ehamfhgz9i] {
        justify-self: end;
    }

    /* Plan productregel-1i (375): a block under the Naam with labels: Buiten and Binnen on one line, Ingevuld with the words of the groups under it. */
    .offer-lines-table tr.offer-line.offer-line-status[b-ehamfhgz9i] {
        grid-template-columns: 32px auto auto minmax(0, 1fr) auto 48px;
        grid-template-areas:
            "pos code code code code code"
            ". name name name price price"
            ". out in in in in"
            ". fill fill fill fill fill"
            ". qty qty qty act menu";
    }

    .offer-lines-table tr.offer-line > .col-fill[b-ehamfhgz9i] {
        flex-wrap: wrap;
    }

    .offer-lines-table tr.offer-line .ols-pills[b-ehamfhgz9i] {
        flex-wrap: wrap;
    }

    .offer-lines-table tr.offer-line .ols-label-fill[b-ehamfhgz9i] {
        display: block;
        width: 100%;
    }

    .offer-lines-table tr.offer-line .ols-word[b-ehamfhgz9i] {
        display: inline;
    }
}

.offer-lines-hidden[b-ehamfhgz9i] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.offer-line-chip[b-ehamfhgz9i] {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 0.8rem;
    background: color-mix(in srgb, var(--mud-palette-warning) 18%, var(--mud-palette-surface));
}

.offer-line-remark[b-ehamfhgz9i], .offer-line-muted[b-ehamfhgz9i] {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.offer-lines-add[b-ehamfhgz9i] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

[b-ehamfhgz9i] .offer-line-btn,
[b-ehamfhgz9i] .offer-line-menu .mud-icon-button {
    min-height: 44px;
    min-width: 44px;
}

/* The Aantal field of a line is as high as the Code field in the same row (PositionProductField.razor.css, .pp-compact): plan compacte-velden 2.3, the Aantal cell keeps
   its 44 px. On the list AllowedOwnSizes of CompactFieldsTests. */
[b-ehamfhgz9i] .offer-line-qty .mud-input-slot {
    min-height: 44px;
}



/* Plan offerte-vergrendelen-na-opdracht 6.2: the notice above the head from Opdracht on, shorter on a phone. */
.offer-lock-short[b-ehamfhgz9i] {
    display: none;
}

@media (max-width: 599.98px) {
    .offer-lock-long[b-ehamfhgz9i] {
        display: none;
    }

    .offer-lock-short[b-ehamfhgz9i] {
        display: inline;
    }
}

/* Review point 14: who may revert, under the status list, and the short explanation under the Omschrijving on Info. */
.offer-status-help[b-ehamfhgz9i] {
    margin: 4px 8px 0;
    font-size: var(--kz-help-size, 0.75rem);
    color: var(--mud-palette-text-secondary);
}
/* _content/Kuramo.App/Components/Components/OfferLineNotes.razor.rz.scp.css */
/* The Tekentafel and the photos of a line: next to each other only when the tab itself is at least 880 px wide (the large dialog on a wide screen), under each other
   otherwise, also in the small dialog (600 px) and on a phone, where the canvas of 400 px scrolls sideways in its own box. A container query on the tab, not a media
   query on the window (bug review 1d, B8): the window is wide while the small dialog is not. */
.oln[b-8xa961k9je] {
    container-type: inline-size;
    container-name: oln;
}

.oln-media[b-8xa961k9je] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.oln-drawing[b-8xa961k9je] {
    min-width: 0;
    overflow-x: auto;
}

.oln-heading[b-8xa961k9je] {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 6px 0;
}

.oln-help[b-8xa961k9je] {
    font-size: 0.875rem;
    line-height: 14px;
    min-height: 14px;
    color: var(--mud-palette-text-secondary);
    margin: 8px 0;
}

@container oln (min-width: 880px) {
    .oln-media[b-8xa961k9je] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* _content/Kuramo.App/Components/Components/OfferLinePrices.razor.rz.scp.css */
/* The table of the tab Prijsopgave (moved with the component from the product rule card): rows of at least 44 px, lines between the rows; colours only from the palette.
   Six columns as design v9 (plan productregel-dialogs 3.11): on a phone the table scrolls sideways in its own box, the dialog itself does not. */
.prc-scroll[b-8ckf545rs3] {
    overflow-x: auto;
}

.prc-table[b-8ckf545rs3] {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
}

.prc-table th[b-8ckf545rs3], .prc-table td[b-8ckf545rs3] {
    padding: 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    text-align: left;
    min-height: 44px;
}

.prc-help[b-8ckf545rs3] {
    font-size: 0.875rem;
    line-height: 14px;
    min-height: 14px;
    color: var(--mud-palette-text-secondary);
    margin: 4px 0;
}

/* Plan prijslijsten-per-vak (mockup 9.10): a vak "waarvan" under its Raam, in the secondary text colour; its amount is part of the Raam. */
.prc-part td[b-8ckf545rs3] {
    color: var(--mud-palette-text-secondary);
}

.prc-part td:first-child[b-8ckf545rs3] {
    padding-left: 24px;
}
/* _content/Kuramo.App/Components/Components/OfferLooseLineDialog.razor.rz.scp.css */
/* The content of the small dialog of a loose part (plan productregel-dialogs 3.5 and 3.9, mockup 6.7). The head, the tabs and the foot are those of the large dialog and
   are styled once for both in app.css, under the class kz-line-dialog of the dialog (code review 1d, R1), as is the box of the dialog (always full screen, plan
   productregel-1e 3.7). Here only what is its own: the content in one column of at most 640 px on the left under the tabs (the panels of MudTabs, PanelClass; on a phone
   the full width), so it is not stretched over a wide screen while the head, the tabs and the foot run over the full width; the fields, Product and Kleur over the full
   width, Aantal, Breedte and Hoogte next to each other; one column on a phone, where the line in the foot may wrap. The fields have no size of their own: wwwroot/fields.css
   makes them 40 px with a mouse and 48 px on any touch input (plan compacte-velden). Colours only from the MudBlazor palette. */
[b-1u9jr1j86y] .olld-column {
    max-width: 640px;
}

.olld-fields[b-1u9jr1j86y] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 16px;
}

.olld-wide[b-1u9jr1j86y] {
    grid-column: 1 / -1;
}

.olld-help[b-1u9jr1j86y] {
    font-size: 0.875rem;
    line-height: 14px;
    min-height: 14px;
    margin: 4px 0 0 0;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 599.98px) {
    .olld-fields[b-1u9jr1j86y] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* As specific as the rule of the foot in app.css (three classes); this bundle loads after app.css, so it wins on a phone. */
    .olld-foot .olld-summary[b-1u9jr1j86y] {
        white-space: normal;
    }
}
/* _content/Kuramo.App/Components/Components/OfferProgressBar.razor.rz.scp.css */
/* The progress bar of an aanvraag (plan offerte-voortgang 4.1). The block is a container (CS3), so an open CoWork panel counts, not the window:
   >= 860 px every name, 560-859 px the dots plus the current step (the other names stay as hidden text), < 560 px one line with a row of dashes.
   Colours only from var(--status-<groep>) (ThemeColors.StatusGroupColor, per mode on the layout) and --mud-palette-*. Dots of 28 px, 32 px on a touch screen;
   nothing in the bar can be tapped. */
.ofp[b-ka92i2a91u] {
    container-type: inline-size;
    container-name: ofp;
    margin: 8px 0 4px 0;
}

.ofp-inner[b-ka92i2a91u] {
    padding: 10px 4px 6px 4px;
    border-top: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* One class per group: every rule below reads --g. */
.ofp-g-aanvraag[b-ka92i2a91u] { --g: var(--status-aanvraag); }
.ofp-g-calculatie[b-ka92i2a91u] { --g: var(--status-calculatie); }
.ofp-g-verzonden[b-ka92i2a91u] { --g: var(--status-verzonden); }
.ofp-g-opdracht[b-ka92i2a91u] { --g: var(--status-opdracht); }
.ofp-g-bestellen[b-ka92i2a91u] { --g: var(--status-bestellen); }
.ofp-g-gereed[b-ka92i2a91u] { --g: var(--status-gereed); }
.ofp-g-gefactureerd[b-ka92i2a91u] { --g: var(--status-gefactureerd); }
.ofp-g-afgerond[b-ka92i2a91u] { --g: var(--status-afgerond); }
.ofp-g-afgekeurd[b-ka92i2a91u] { --g: var(--status-afgekeurd); }

.ofp-steps[b-ka92i2a91u] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
}

.ofp-step[b-ka92i2a91u] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
    padding: 0 2px;
}

/* The line from the previous step to this one, in the colour of this step once it is reached. */
.ofp-step[b-ka92i2a91u]::before {
    content: "";
    position: absolute;
    top: 13px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--mud-palette-lines-default);
    z-index: 0;
}

.ofp-step:first-child[b-ka92i2a91u]::before {
    display: none;
}

.ofp-done[b-ka92i2a91u]::before,
.ofp-current[b-ka92i2a91u]::before {
    background: var(--g);
}

.ofp-dot[b-ka92i2a91u] {
    position: relative;
    z-index: 1;
    width: 28px;
    height: 28px;
    box-sizing: border-box;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    border: 2px solid var(--mud-palette-lines-inputs);
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-surface);
}

.ofp-fixed .ofp-dot[b-ka92i2a91u] {
    border-radius: 6px;
}

.ofp-done .ofp-dot[b-ka92i2a91u] {
    border-color: var(--g);
    background: color-mix(in srgb, var(--g) 16%, var(--mud-palette-surface));
    color: var(--g);
}

.ofp-current .ofp-dot[b-ka92i2a91u] {
    border-color: var(--g);
    background: var(--g);
    color: var(--mud-palette-surface);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--g) 22%, transparent);
}

.ofp-name[b-ka92i2a91u] {
    margin-top: 6px;
    font-size: 0.6875rem;
    line-height: 1.25;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.ofp-done .ofp-name[b-ka92i2a91u] {
    color: var(--mud-palette-text-primary);
}

.ofp-current .ofp-name[b-ka92i2a91u] {
    color: var(--g);
    font-weight: 600;
    font-size: 0.75rem;
}

.ofp-date[b-ka92i2a91u] {
    margin-top: 2px;
    font-size: 0.6875rem;
    color: var(--mud-palette-text-secondary);
}

/* Read by a screen reader, not shown. */
.ofp-sr[b-ka92i2a91u] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.ofp-rejected[b-ka92i2a91u] {
    padding: 10px 14px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--status-afgekeurd) 12%, var(--mud-palette-surface));
    color: var(--status-afgekeurd);
    border-left: 4px solid var(--status-afgekeurd);
    font-weight: 600;
}

.ofp-unknown[b-ka92i2a91u] {
    padding: 10px 14px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 4%, var(--mud-palette-surface));
    color: var(--mud-palette-text-primary);
    border-left: 4px solid var(--mud-palette-lines-inputs);
}

/* The phone line: only under 560 px. */
.ofp-phone[b-ka92i2a91u] {
    display: none;
    padding: 2px 4px;
}

.ofp-phone-head[b-ka92i2a91u] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.ofp-phone-name[b-ka92i2a91u] {
    font-weight: 600;
    color: var(--g);
}

.ofp-phone-no[b-ka92i2a91u] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.ofp-phone-dots[b-ka92i2a91u] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 4px;
    margin-top: 8px;
}

.ofp-pd[b-ka92i2a91u] {
    height: 8px;
    border-radius: 4px;
    background: var(--mud-palette-lines-default);
}

.ofp-pd.ofp-done[b-ka92i2a91u] {
    background: color-mix(in srgb, var(--g) 55%, var(--mud-palette-surface));
}

.ofp-pd.ofp-current[b-ka92i2a91u] {
    background: var(--g);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--g) 30%, transparent);
}

@media (any-pointer: coarse) {
    .ofp-dot[b-ka92i2a91u] {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .ofp-step[b-ka92i2a91u]::before {
        top: 15px;
    }
}

/* Tablet upright and an open CoWork panel: only the dots and the current step; the other names and dates stay as hidden text. */
@container ofp (max-width: 859.98px) {
    .ofp-step:not(.ofp-current) .ofp-name[b-ka92i2a91u],
    .ofp-step:not(.ofp-current) .ofp-date[b-ka92i2a91u] {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .ofp-current .ofp-name[b-ka92i2a91u],
    .ofp-current .ofp-date[b-ka92i2a91u] {
        white-space: nowrap;
    }
}

/* Phone: one line with the current step and a row of dashes. The list is only hidden visually (CS1): a screen reader keeps the steps and aria-current,
   the phone line itself is aria-hidden. */
@container ofp (max-width: 559.98px) {
    .ofp-steps[b-ka92i2a91u] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .ofp-phone[b-ka92i2a91u] {
        display: block;
    }
}
/* _content/Kuramo.App/Components/Components/ProductionNoteReactionComponent.razor.rz.scp.css */
.production-reaction-unread[b-hsqbg1thk2] {
    border-left: 3px solid var(--mud-palette-error);
}
/* _content/Kuramo.App/Components/Components/ViewRowButton.razor.rz.scp.css */
/* MudFab Size.Small is 40px; 32px keeps dense table rows as low as the old text button. */
.view-row-button[b-oosu3pfpcj]  .mud-fab {
    width: 32px;
    height: 32px;
    min-height: 32px;
}

.view-row-button[b-oosu3pfpcj]  .mud-fab .mud-icon-root {
    font-size: 1.125rem;
}
/* _content/Kuramo.App/Components/Pages/Uren/UrenWeekRoosterComponent.razor.rz.scp.css */
.uren-invullen[b-uvo7kef7zm]  .uren-weeknr {
    line-height: 1.1;
}

.uren-invullen[b-uvo7kef7zm]  .uren-rooster th.uren-dag,
.uren-invullen[b-uvo7kef7zm]  .uren-rooster td.uren-cel,
.uren-invullen[b-uvo7kef7zm]  .uren-rooster .uren-totaal {
    text-align: right;
    width: 88px;
    white-space: nowrap;
}

.uren-invullen[b-uvo7kef7zm]  .uren-rooster .uren-project {
    min-width: 220px;
}

.uren-invullen[b-uvo7kef7zm]  .uren-rooster .uren-datum {
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.uren-invullen[b-uvo7kef7zm]  .uren-rooster .uren-totaal {
    font-weight: 600;
}

.uren-invullen[b-uvo7kef7zm]  .uren-rooster td.uren-cel input {
    text-align: right;
}

.uren-invullen[b-uvo7kef7zm]  .uren-rooster td.uren-gewijzigd {
    background-color: var(--mud-palette-warning-hover, rgba(255, 152, 0, 0.08));
}

.uren-invullen[b-uvo7kef7zm]  .uren-rooster .uren-vast {
    color: var(--mud-palette-text-secondary);
    cursor: help;
}
/* _content/Kuramo.App/Modules/Catalogus/Components/ChoiceLinksPage.razor.rz.scp.css */
/* The maintenance page of the product ids next to the texts: figures right-aligned in tabular digits, a plain table with lines between rows, 44 px tap targets. */
[b-gcrcbhdbq6] .cl-table th,
[b-gcrcbhdbq6] .cl-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    text-align: left;
}

[b-gcrcbhdbq6] .cl-table th {
    font-weight: 600;
    background: var(--mud-palette-background-gray);
}

[b-gcrcbhdbq6] .cl-table .cl-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

[b-gcrcbhdbq6] .cl-actions .mud-button-root {
    min-height: 44px;
}
/* _content/Kuramo.App/Modules/Catalogus/Components/MontageGroupsBlock.razor.rz.scp.css */
/* Montagegroepen (plan montage 10.1, 10.2): a plain table on a wide screen; on a phone every group is a small card with a label per field (data-label). Colours from the theme only. */
.montage-scroll[b-7w5bzya29u] {
    max-width: 100%;
    overflow-x: auto;
}

.montage-table[b-7w5bzya29u] {
    width: 100%;
    border-collapse: collapse;
}

.montage-table th[b-7w5bzya29u],
.montage-table td[b-7w5bzya29u] {
    padding: 4px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    text-align: left;
    vertical-align: middle;
}

.montage-table th[b-7w5bzya29u] {
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.montage-table .montage-num[b-7w5bzya29u] {
    text-align: right;
    white-space: nowrap;
}

.montage-input[b-7w5bzya29u] {
    width: 7em;
    max-width: 100%;
    padding: 4px 6px;
    text-align: right;
    font: inherit;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
}

.montage-input:focus[b-7w5bzya29u] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 0;
}

.montage-input-error[b-7w5bzya29u] {
    border-color: var(--mud-palette-error);
}

.montage-price[b-7w5bzya29u] {
    color: var(--mud-palette-text-primary);
}

.montage-actions[b-7w5bzya29u] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-top: 12px;
}

@media (max-width: 600px) {
    .montage-table thead[b-7w5bzya29u] {
        display: none;
    }

    .montage-table[b-7w5bzya29u],
    .montage-table tbody[b-7w5bzya29u],
    .montage-table tr[b-7w5bzya29u],
    .montage-table td[b-7w5bzya29u] {
        display: block;
        width: 100%;
    }

    .montage-table tr[b-7w5bzya29u] {
        padding: 8px 0;
        border-bottom: 1px solid var(--mud-palette-lines-default);
    }

    .montage-table td[b-7w5bzya29u] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        border-bottom: none;
        padding: 2px 0;
    }

    .montage-table td[b-7w5bzya29u]::before {
        content: attr(data-label);
        color: var(--mud-palette-text-secondary);
    }

    .montage-table td.montage-name[b-7w5bzya29u] {
        font-weight: 500;
    }

    .montage-table td.montage-name[b-7w5bzya29u]::before {
        content: none;
    }
}
/* _content/Kuramo.App/Modules/Catalogus/Components/PositionProductField.razor.rz.scp.css */
/* The compact field in the Code cell of the table Offerteregels (plan offerteregel-productregel 9): the field and the clear button at least 44 px for a finger. */
.pp-compact[b-y57g8j0x7q]  .mud-input-control,
.pp-compact[b-y57g8j0x7q]  .mud-input-slot {
    min-height: 44px;
}

.pp-compact[b-y57g8j0x7q]  .mud-icon-button {
    min-width: 44px;
    min-height: 44px;
}
/* _content/Kuramo.App/Modules/Catalogus/Components/PriceListEditPage.razor.rz.scp.css */
/* The head: title left, "Terug naar de lijst" right on the same line (as on the product form). */
.pricelist-head[b-vjsdiqlqms] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.pricelist-head[b-vjsdiqlqms]  .pricelist-head-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.pricelist-head[b-vjsdiqlqms]  .pricelist-head-back {
    flex: none;
}

/* Name and version next to each other; one column under 600 px. */
.pricelist-fields[b-vjsdiqlqms] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px 24px;
    max-width: 720px;
}

/* The grid scrolls inside its own box: the page itself never scrolls sideways (also not at 375 px). */
.pricelist-grid-scroll[b-vjsdiqlqms] {
    max-width: 100%;
    max-height: 70vh;
    overflow: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

.pricelist-grid[b-vjsdiqlqms] {
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.pricelist-grid th[b-vjsdiqlqms],
.pricelist-grid td[b-vjsdiqlqms] {
    border-bottom: 1px solid var(--mud-palette-table-lines);
    padding: 2px 4px;
    white-space: nowrap;
}

.pricelist-grid thead th[b-vjsdiqlqms] {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 5%, var(--mud-palette-surface));
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    text-align: right;
    position: sticky;
    top: 0;
}

.pricelist-grid tbody th[b-vjsdiqlqms] {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 5%, var(--mud-palette-surface));
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    text-align: right;
    position: sticky;
    left: 0;
}

.pricelist-grid .pricelist-corner[b-vjsdiqlqms] {
    text-align: left;
    font-weight: 500;
    left: 0;
    z-index: 1;
}

.pricelist-size[b-vjsdiqlqms] {
    vertical-align: middle;
}

.pricelist-cell[b-vjsdiqlqms] {
    width: 84px;
    padding: 4px 6px;
    text-align: right;
    font: inherit;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
}

.pricelist-cell:focus[b-vjsdiqlqms] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -1px;
}

.pricelist-cell:disabled[b-vjsdiqlqms] {
    color: var(--mud-palette-text-disabled);
}

.pricelist-cell-error[b-vjsdiqlqms] {
    border-color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 10%, var(--mud-palette-surface));
}

/* A size to add, with the two buttons next to it. */
.pricelist-add-size[b-vjsdiqlqms] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.pricelist-add-size[b-vjsdiqlqms]  .mud-input-control {
    flex: 0 0 160px;
}

@media (max-width: 599.95px) {
    .pricelist-fields[b-vjsdiqlqms] {
        grid-template-columns: minmax(0, 1fr);
    }

    .pricelist-head[b-vjsdiqlqms] {
        flex-wrap: wrap;
    }
}
/* _content/Kuramo.App/Modules/Catalogus/Components/PriceListsPage.razor.rz.scp.css */
/* Title left, "Prijslijst toevoegen" right; the button goes under the title on a narrow screen. */
.pricelists-head[b-vaa41ibzyp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 4px;
}

.pricelists-next[b-vaa41ibzyp] {
    color: var(--mud-palette-text-secondary);
}
/* _content/Kuramo.App/Modules/Catalogus/Components/ProductEditPage.razor.rz.scp.css */
/* The head: title left, "Terug naar de lijst" right on the same line. The title may wrap inside its own space (min-width 0), the button never shrinks or leaves the head. */
.product-head[b-n5dtnue1uk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.product-head[b-n5dtnue1uk]  .product-head-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.product-head[b-n5dtnue1uk]  .product-head-back {
    flex: none;
}

/* "Algemeen": the fields on the left (about two thirds), the picture on the right (about one third). A product without a picture uses the full width. */
.product-general[b-n5dtnue1uk] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.product-general.product-general-single[b-n5dtnue1uk] {
    grid-template-columns: minmax(0, 1fr);
}

/* The fields: rows of two equal columns (a row with one field keeps the left place); the description spans the whole width. */
.product-fields[b-n5dtnue1uk] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.product-fields .product-row[b-n5dtnue1uk] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
    align-items: start;
}

.product-fields .product-row.product-row-full[b-n5dtnue1uk] {
    grid-template-columns: minmax(0, 1fr);
}

.product-fields .product-field[b-n5dtnue1uk] {
    min-width: 0;
}

/* The two price fields: the amount is right-aligned (the euro sign stays at the start). */
.product-form[b-n5dtnue1uk]  .price-field input {
    text-align: right;
}

/* The right column is the block Uitvoeringen (ProductVariantsBlock, plan raamtypes-naar-producten A3c): its own component, so the rules reach it through ::deep. */
.product-general[b-n5dtnue1uk]  .product-image-column {
    min-width: 0;
}

/* The picture of a collective product: everything centred in the column. The picture is its own frame (10px padding, 0.5px border): it fills the column up to 320px wide, its height follows the
   proportion of the drawing (window ~4:3, sliding door 2:1, door upright) and is capped at 320px, so a tall drawing does not make the column long (object-fit: contain, nothing is cropped or stretched). */
.product-general[b-n5dtnue1uk]  .product-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.product-general[b-n5dtnue1uk]  .product-image .product-image-img {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 320px;
    height: auto;
    max-height: 320px;
    object-fit: contain;
    padding: 10px;
    border: 0.5px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: #fff;
}

.product-general[b-n5dtnue1uk]  .product-image .mud-typography {
    max-width: 250px;
}

/* One variant under the other (L above R), each with its picture, code, order note and buttons. */
.product-general[b-n5dtnue1uk]  .product-variant {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 16px;
}

.product-general[b-n5dtnue1uk]  .product-variant-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 8px;
    margin-top: 4px;
}

/* Under 600 px (MudBlazor's sm): one column, the picture ABOVE the fields, no sideways scrolling. */
@media (max-width: 599.95px) {
    .product-general[b-n5dtnue1uk] {
        grid-template-columns: minmax(0, 1fr);
    }

    .product-general[b-n5dtnue1uk]  .product-image-column {
        order: -1;
    }

    .product-fields .product-row[b-n5dtnue1uk] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* _content/Kuramo.App/Modules/Catalogus/Components/ProductMergePage.razor.rz.scp.css */
/* The page of the merge "X vervangt Y" (plan productregel-fase3 mockup 3.4): palette colours only, 44 px tap targets, and on a phone the table stacks per row (no sideways scroll). */
.pm-page[b-ifhubvpgxt] {
    max-width: 1200px;
    /* The status labels: palette mixes only; OfferScreenThemeTests-style contrast checks in ProductMergePageTests read these shares. */
    --pm-open-bg: color-mix(in srgb, var(--mud-palette-text-primary) 6%, var(--mud-palette-surface));
    --pm-done-bg: color-mix(in srgb, var(--mud-palette-success) 16%, var(--mud-palette-surface));
    --pm-done-text: color-mix(in srgb, var(--mud-palette-success) 30%, var(--mud-palette-text-primary));
    --pm-bad-bg: color-mix(in srgb, var(--mud-palette-error) 14%, var(--mud-palette-surface));
    --pm-bad-text: color-mix(in srgb, var(--mud-palette-error) 35%, var(--mud-palette-text-primary));
}

.pm-head[b-ifhubvpgxt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.pm-fields[b-ifhubvpgxt] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    margin-bottom: 16px;
}

.pm-fact[b-ifhubvpgxt] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 6px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.pm-fact-label[b-ifhubvpgxt] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.pm-fact-value[b-ifhubvpgxt] {
    color: var(--mud-palette-text-primary);
}

.pm-table[b-ifhubvpgxt] {
    width: 100%;
    border-collapse: collapse;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

.pm-table th[b-ifhubvpgxt],
.pm-table td[b-ifhubvpgxt] {
    padding: 8px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.pm-table th[b-ifhubvpgxt] {
    font-weight: 600;
    background: var(--mud-palette-background-gray);
}

.pm-table .pm-num[b-ifhubvpgxt] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.pm-status[b-ifhubvpgxt] {
    display: inline-block;
    padding: 0 8px;
    border-radius: 8px;
    background: var(--pm-open-bg);
}

.pm-state-done .pm-status[b-ifhubvpgxt],
.pm-state-undone .pm-status[b-ifhubvpgxt] {
    background: var(--pm-done-bg);
    color: var(--pm-done-text);
}

.pm-state-interrupted .pm-status[b-ifhubvpgxt],
.pm-state-conflict .pm-status[b-ifhubvpgxt] {
    /* Onderbroken and conflict are red, as the mockup. */
    background: var(--pm-bad-bg);
    color: var(--pm-bad-text);
}

.pm-list ul[b-ifhubvpgxt] {
    margin: 4px 0 0 20px;
    padding: 0;
}

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

.pm-actions[b-ifhubvpgxt]  .mud-button-root,
.pm-head[b-ifhubvpgxt]  .mud-button-root {
    min-height: 44px;
}

@media (max-width: 959.95px) {
    .pm-fields[b-ifhubvpgxt] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (max-width: 599.95px) {
    .pm-fields[b-ifhubvpgxt] {
        grid-template-columns: minmax(0, 1fr);
    }

    .pm-table thead[b-ifhubvpgxt] {
        display: none;
    }

    .pm-table[b-ifhubvpgxt],
    .pm-table tbody[b-ifhubvpgxt],
    .pm-table tr[b-ifhubvpgxt] {
        display: block;
    }

    .pm-table tr[b-ifhubvpgxt] {
        border-bottom: 1px solid var(--mud-palette-lines-default);
        padding: 4px 0;
    }

    .pm-table td[b-ifhubvpgxt] {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        border-bottom: none;
        padding: 4px 8px;
        text-align: right;
    }

    .pm-table td[b-ifhubvpgxt]::before {
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
        flex: none;
    }

    .pm-table .pm-num[b-ifhubvpgxt] {
        text-align: right;
    }
}
/* _content/Kuramo.App/Modules/Catalogus/Components/ProductVakPriceListsBlock.razor.rz.scp.css */
/* Prijslijst per vak: the vak on the left, the list on the right; on a phone the two stack. */
.vak-lists-table[b-dn9ewicshm] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vak-lists-head[b-dn9ewicshm],
.vak-lists-row[b-dn9ewicshm] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 8px 24px;
    align-items: center;
}

.vak-lists-choice[b-dn9ewicshm] {
    min-width: 0;
}

@media (max-width: 600px) {
    .vak-lists-head[b-dn9ewicshm] {
        display: none;
    }

    .vak-lists-row[b-dn9ewicshm] {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }
}
/* _content/Kuramo.App/Modules/Drawing/Components/StructureViewer.razor.rz.scp.css */
.structure-2d[b-ncq6pvja1w]  svg {
    width: 100%;
    height: auto;
    max-height: 640px;
}
/* _content/Kuramo.App/Modules/Houtbouw/Components/HoutbouwHouseToolPanel.razor.rz.scp.css */
/* The tool panel of the tab Tekening (Houtbouw-scherm), in the style of the tool panel of the 3D tab of Kozijnen. */
.tp-head[b-fs0ryy2bh3] { padding: 16px 16px 12px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.eyebrow[b-fs0ryy2bh3] { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--mud-palette-text-secondary); margin: 0; }
.tp-head h2[b-fs0ryy2bh3] { font-size: 16px; font-weight: 500; line-height: 1.3; margin: 2px 0 0; }
.tp-sub[b-fs0ryy2bh3] { font-size: 12px; color: var(--mud-palette-text-secondary); margin: 4px 0 0; }
.tp-body[b-fs0ryy2bh3] { padding: 8px 16px 12px; display: flex; flex-direction: column; gap: 6px; }
.hbt-group[b-fs0ryy2bh3] { padding-top: 4px; }
.hbt-group-name[b-fs0ryy2bh3] { font-size: 13px; font-weight: 500; margin-top: 6px; }
.hbt-nv[b-fs0ryy2bh3] { font-size: 12px; color: var(--mud-palette-text-secondary); font-style: italic; margin-top: 2px; }
.hbt-muted[b-fs0ryy2bh3] { font-size: 12px; color: var(--mud-palette-text-secondary); margin: 0; }
.tp-foot[b-fs0ryy2bh3] {
    position: sticky; bottom: 0; margin-top: auto; background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default); padding: 12px 16px; display: flex; flex-direction: column; gap: 8px;
}
.hint[b-fs0ryy2bh3] { font-size: 12px; color: var(--mud-palette-text-secondary); margin: 0; }
/* _content/Kuramo.App/Modules/Houtbouw/Components/HoutbouwOfferPage.razor.rz.scp.css */
/* The Houtbouw-scherm (plan § 3.3): the customer link with the link to the shared screen next to it. */
.hb-page-head[b-1qg1ichjgd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
/* _content/Kuramo.App/Modules/Houtbouw/Components/HoutbouwOptionCards.razor.rz.scp.css */
/* Plan houtbouw-wanden-per-zijde § 5.8 (fase 7): the option cards of a side group (light and dark through the MudBlazor palette; two per row on a phone). */
.hb-cards-group[b-54e95fzgj6] { width: 100%; }
.hb-cards-head[b-54e95fzgj6] { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 2px 0 4px; }
.hb-cards-label[b-54e95fzgj6] { font-size: 13px; font-weight: 500; }
.hb-cards-clear[b-54e95fzgj6] {
    border: 0; background: none; padding: 2px 0; cursor: pointer; font: inherit; font-size: 11px; letter-spacing: .03em; text-transform: uppercase;
    color: var(--mud-palette-primary);
}
.hb-cards-clear:focus-visible[b-54e95fzgj6], .hb-card:focus-visible[b-54e95fzgj6] { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.hb-cards[b-54e95fzgj6] { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.hb-card[b-54e95fzgj6] {
    position: relative; display: flex; flex-direction: column; align-items: stretch; text-align: left; padding: 0 0 4px; overflow: hidden; cursor: pointer;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); font: inherit;
}
.hb-card.on[b-54e95fzgj6] { border: 2px solid var(--mud-palette-primary); padding-bottom: 3px; }
.hb-card:disabled[b-54e95fzgj6] { cursor: default; opacity: .7; }
.hb-card-img[b-54e95fzgj6] { display: block; height: 42px; width: 100%; object-fit: cover; }
.hb-card-name[b-54e95fzgj6] { padding: 3px 6px 0; font-size: 12px; font-weight: 500; line-height: 1.25; }
.hb-card-price[b-54e95fzgj6] { padding: 0 6px; font-size: 11.5px; font-weight: 600; }
.hb-card-check[b-54e95fzgj6] {
    position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text); font-size: 10px; line-height: 16px; text-align: center;
}
/* the small examples without a photo (§ 5.8, the colours of the 3D) */
.sw-open[b-54e95fzgj6] { background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(128, 128, 128, .18) 6px 7px); border-bottom: 1px dashed var(--mud-palette-lines-default); }
.sw-sponning[b-54e95fzgj6] { background: repeating-linear-gradient(90deg, #c58d5c 0 15px, #b67f50 15px 29px, #8a5a36 29px 30px); }
.sw-triple[b-54e95fzgj6] { background: repeating-linear-gradient(90deg, #c58d5c 0 9px, #8a5a36 9px 10px, #c58d5c 10px 19px, #9a6a44 19px 20px, #bd8656 20px 29px, #8a5a36 29px 30px); }
.sw-rabat[b-54e95fzgj6] { background: repeating-linear-gradient(180deg, #383a3c 0 9px, #2d2f31 9px 12px, #141516 12px 13px); }
.sw-rhombus[b-54e95fzgj6] { background: repeating-linear-gradient(180deg, #8b6243 0 6px, #2a211a 6px 8px, #7d5739 8px 14px, #2a211a 14px 16px); }
.sw-glas[b-54e95fzgj6] { background: linear-gradient(115deg, #cfe1ec 0 38%, #f4fafd 40% 44%, #cfe1ec 46% 100%); box-shadow: inset 0 0 0 3px #2f3438; }
.sw-schuif[b-54e95fzgj6] {
    background: linear-gradient(115deg, transparent 0 38%, rgba(255, 255, 255, .7) 40% 44%, transparent 46%), repeating-linear-gradient(90deg, #cfe1ec 0 22px, #2f3438 22px 24px);
    box-shadow: inset 0 0 0 3px #2f3438;
}
.sw-none[b-54e95fzgj6] { background: var(--mud-palette-background-gray); }
@media (max-width: 600px) {
    .hb-cards[b-54e95fzgj6] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* _content/Kuramo.App/Modules/Houtbouw/Components/HoutbouwOrderEditDialog.razor.rz.scp.css */
/* The edit dialog of the tab Bestellen: the fields side by side, on a phone under each other. Layout only, the colours are those of MudBlazor. */
.hb-row[b-mpi1hfx38w] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
/* _content/Kuramo.App/Modules/Houtbouw/Components/HoutbouwOrderTab.razor.rz.scp.css */
/* The tab Bestellen of the Houtbouw-scherm (plan houtbouw-offertescherm § 15.5). Only MudBlazor palette variables, so light and dark follow the theme. Desktop: the
   table; a phone (below 600 px): the materials as cards. */
.hb-hidden[b-6g88txv0g0] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.hb-name[b-6g88txv0g0] {
    font-weight: 600;
}

.hb-strong[b-6g88txv0g0] {
    font-weight: 600;
    white-space: nowrap;
}

.hb-muted[b-6g88txv0g0] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}

.hb-num[b-6g88txv0g0] {
    text-align: right;
    white-space: nowrap;
}

.hb-open[b-6g88txv0g0] {
    color: var(--mud-palette-error);
    font-weight: 600;
    white-space: nowrap;
}

.hb-order-chips[b-6g88txv0g0],
.hb-row[b-6g88txv0g0],
.hb-order-card-actions[b-6g88txv0g0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.hb-order-part[b-6g88txv0g0] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}

.hb-order-part td[b-6g88txv0g0] {
    padding-left: 24px !important;
}

.hb-order-cards[b-6g88txv0g0] {
    display: none;
}

.hb-order[b-6g88txv0g0]  .hb-order-card {
    padding: 12px;
    margin-bottom: 8px;
}

.hb-order-card-head[b-6g88txv0g0] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

@media (max-width: 599.98px) {
    .hb-order-table[b-6g88txv0g0] {
        display: none;
    }

    .hb-order-cards[b-6g88txv0g0] {
        display: block;
    }
}
/* _content/Kuramo.App/Modules/Houtbouw/Components/HoutbouwProduct2D.razor.rz.scp.css */
/* The 2D drawing on its own tab: the whole width, centred, never wider than it reads well. */
.hb-2d[b-gps7h7stle] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    padding: 8px;
    background: var(--mud-palette-surface);
}

.hb-2d[b-gps7h7stle]  svg {
    display: block;
    width: 100%;
    max-width: 1100px;
    height: auto;
    margin: 0 auto;
}
/* _content/Kuramo.App/Modules/Houtbouw/Components/HoutbouwProductDialog.razor.rz.scp.css */
/* The content of the Houtbouw product dialog (plan § 3.3). The box itself is the global class kz-line-dialog of app.css, reused unchanged. */
.hb-compose[b-r505kmb5yy] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 16px;
    align-items: start;
}

.hb-compose > .hb-sizes:only-child[b-r505kmb5yy] {
    grid-column: 1 / -1;
    max-width: 320px;
}

.hb-sizes[b-r505kmb5yy] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* The option groups as one list (31-10): a row per group, its name left and the choice right; two columns of rows on a wide screen. */
.hb-groups[b-r505kmb5yy] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 32px;
}

/* 02-11 (Emmanuel, "netter"): every row starts at the top, the name level with the first line of its choice. */
.hb-group[b-r505kmb5yy] {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.hb-group-label[b-r505kmb5yy] {
    padding-top: 9px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.hb-group-control[b-r505kmb5yy] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.hb-group-control[b-r505kmb5yy]  .mud-input-control {
    margin-top: 0;
}

/* The check boxes of a group in even columns instead of wrapping where they happen to end. */
.hb-group-checks[b-r505kmb5yy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    column-gap: 8px;
}

/* An Aantal is a short number: a compact field under its choice, not the whole width. */
.hb-group-control[b-r505kmb5yy]  .hb-group-quantity {
    max-width: 220px;
}

@media (min-width: 1280px) {
    .hb-groups[b-r505kmb5yy] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* On a phone the name stands above its choice. */
@media (max-width: 599.98px) {
    .hb-group[b-r505kmb5yy] {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }
}

.hb-drawing[b-r505kmb5yy] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.hb-muted[b-r505kmb5yy] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}

.hb-amount[b-r505kmb5yy] {
    text-align: right;
    white-space: nowrap;
}

.hb-override[b-r505kmb5yy] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 640px;
}

.hb-message[b-r505kmb5yy] {
    color: var(--mud-palette-error);
}

/* On a phone the 3D stands above the sizes. */
@media (max-width: 959.98px) {
    .hb-compose[b-r505kmb5yy] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Plan § 4: the Tekentafel and the photos of a stored product, under the note. */
.hb-media[b-r505kmb5yy] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Plan houtbouw-wanden-per-zijde § 5.5: the hint line under the sides spans the whole list. */
.hb-sides-hint[b-r505kmb5yy] {
    grid-column: 1 / -1;
    margin: 2px 0 8px;
}
/* Plan houtbouw-wanden-per-zijde § 5.8 (fase 7): a side with cards takes the whole width of the list. */
.hb-group-cards[b-r505kmb5yy] { grid-column: 1 / -1; }
/* _content/Kuramo.App/Modules/Houtbouw/Components/HoutbouwProductPhotos.razor.rz.scp.css */
/* The photos of a Houtbouw product (plan houtbouw-offertescherm § 4.3). */
.hb-photos-pick[b-uhmwsxmfew] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
}

.hb-photo-name[b-uhmwsxmfew] {
    overflow-wrap: anywhere;
}

.hb-photo-actions[b-uhmwsxmfew] {
    text-align: right;
    white-space: nowrap;
}

.hb-muted[b-uhmwsxmfew] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}
/* _content/Kuramo.App/Modules/Houtbouw/Components/HoutbouwProductTable.razor.rz.scp.css */
/* The Houtbouw block of the Houtbouw-scherm (plan houtbouw-offertescherm § 3.3). Only MudBlazor palette variables, so light and dark follow the theme. */
.hb-hidden[b-7tcqkhf84d] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.hb-name[b-7tcqkhf84d] {
    font-weight: 600;
}

.hb-muted[b-7tcqkhf84d] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}

.hb-actions[b-7tcqkhf84d] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.hb-row[b-7tcqkhf84d] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.hb-row[b-7tcqkhf84d]  .hb-add-select {
    min-width: 280px;
    max-width: 100%;
    flex: 0 1 360px;
}

@media (max-width: 599.98px) {
    .hb-row[b-7tcqkhf84d]  .hb-add-select {
        min-width: 0;
        flex: 1 1 100%;
    }
}
/* _content/Kuramo.App/Modules/Houtbouw/Components/HoutbouwSketch.razor.rz.scp.css */
/* The Tekentafel of a Houtbouw product (plan houtbouw-offertescherm § 4.2). The canvas stays 400×300; on a phone it scrolls sideways in its box (mockup § 8.4). */
.hb-sketch-tools[b-l2sgojhd9z] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.hb-sketch-color[b-l2sgojhd9z] {
    width: 40px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--mud-palette-lines-default);
    background: transparent;
}

.hb-sketch-scroll[b-l2sgojhd9z] {
    max-width: 100%;
    overflow-x: auto;
}

.hb-sketch-canvas[b-l2sgojhd9z] {
    display: block;
    width: 400px;
    height: 300px;
    border: 1px solid var(--mud-palette-lines-default);
    background: #ffffff;
    touch-action: none;
}

.hb-muted[b-l2sgojhd9z] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}
/* _content/Kuramo.App/Modules/Houtbouw/Components/HoutbouwTekeningTab.razor.rz.scp.css */
/* The tab Tekening of the Houtbouw-scherm, in the look of the 3D tab of Kozijnen (OfferThreeDTab.razor.css, only read): the view on the left, the tool panel (320 px) on
   the right; under 900 px the panel goes under the view. */
.hbt[b-zoj17qs0iy] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
    align-items: start;
}

.hbt-viewer[b-zoj17qs0iy] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.hbt-tools[b-zoj17qs0iy] {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow: auto;
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

.label[b-zoj17qs0iy] {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-right: 4px;
}

.hint[b-zoj17qs0iy] {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    margin: 0;
}

.house-bar[b-zoj17qs0iy], .vbar[b-zoj17qs0iy] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
}

.vbar .push[b-zoj17qs0iy] { margin-left: auto; }

.hseg[b-zoj17qs0iy] { display: flex; flex-wrap: wrap; }

.opt[b-zoj17qs0iy] { position: relative; cursor: pointer; display: block; }
.opt input[b-zoj17qs0iy] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }

.row[b-zoj17qs0iy] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px;
    min-height: 36px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    font-weight: 500;
    margin-left: -1px;
}
.hseg .opt:first-child .row[b-zoj17qs0iy] { border-radius: 4px 0 0 4px; margin-left: 0; }
.hseg .opt:last-child .row[b-zoj17qs0iy] { border-radius: 0 4px 4px 0; }
.opt input:checked + .row[b-zoj17qs0iy] { border-color: var(--mud-palette-primary); background: var(--mud-palette-primary-hover); box-shadow: inset 0 0 0 1px var(--mud-palette-primary); }
.opt input:focus-visible + .row[b-zoj17qs0iy] { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

.stage-wrap[b-zoj17qs0iy] { position: relative; }

.stage[b-zoj17qs0iy] {
    position: relative;
    height: clamp(380px, 66vh, 660px);
    border-radius: 4px;
    overflow: hidden;
    background: linear-gradient(to bottom, #c4d9f1 0%, #e9f0f6 62%, #e9f0f6 100%);
    border: 1px solid var(--mud-palette-lines-default);
    touch-action: none;
}

.stage[b-zoj17qs0iy]  canvas { display: block; width: 100%; height: 100%; outline: none; }
.stage[b-zoj17qs0iy]  canvas:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; }
.stage[b-zoj17qs0iy]  .labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.stage[b-zoj17qs0iy]  .hlabel {
    position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%;
    border: 2px solid #fff; background: #23222f; color: #fff; font-weight: 500; font-size: 12px; line-height: 22px; text-align: center; padding: 0;
    pointer-events: auto; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.stage[b-zoj17qs0iy]  .hlabel[data-sel="1"] { background: var(--mud-palette-primary); width: 30px; height: 30px; line-height: 26px; z-index: 2; }

.stage-msg[b-zoj17qs0iy] {
    position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px;
    color: #5b5a70; pointer-events: none;
}

.legend[b-zoj17qs0iy] { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }

.chip[b-zoj17qs0iy] {
    appearance: none;
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: inherit;
    border-radius: 16px; padding: 3px 12px 3px 4px; min-height: 32px; cursor: pointer; font: inherit; font-size: 13px;
}
.chip .n[b-zoj17qs0iy] {
    display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
    background: #23222f; color: #fff; font-weight: 500; font-size: 12px;
}
.chip .t[b-zoj17qs0iy] { color: var(--mud-palette-text-secondary); font-variant-numeric: tabular-nums; }
.chip .dot[b-zoj17qs0iy] { color: var(--mud-palette-primary); font-weight: 700; }
.chip[aria-pressed="true"][b-zoj17qs0iy] { border-color: var(--mud-palette-primary); background: var(--mud-palette-primary-hover); }
.chip[aria-pressed="true"] .n[b-zoj17qs0iy] { background: var(--mud-palette-primary); }
.chip:hover[b-zoj17qs0iy] { border-color: var(--mud-palette-primary); }
.chip:focus-visible[b-zoj17qs0iy] { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

.td-list[b-zoj17qs0iy] { font-size: 13px; }
.td-list h3[b-zoj17qs0iy] { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--mud-palette-text-secondary); margin: 0 0 4px; }
.td-list ul[b-zoj17qs0iy] { margin: 0; padding-left: 20px; }

@media (max-width: 900px) {
    .hbt[b-zoj17qs0iy] { grid-template-columns: minmax(0, 1fr); }
    .hbt-tools[b-zoj17qs0iy] { position: static; max-height: none; overflow: visible; }
    .stage[b-zoj17qs0iy] { height: min(62vh, 440px); }
    .vbar .push[b-zoj17qs0iy] { margin-left: 0; }
}
/* _content/Kuramo.App/Modules/Kozijnen/Components/OfferInfoPhotos.razor.rz.scp.css */
.ofp[b-x30z5arqbm] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
}

.ofp-title[b-x30z5arqbm] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.hint[b-x30z5arqbm] {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    margin: 0;
}

.ofp-list[b-x30z5arqbm] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ofp-item[b-x30z5arqbm] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 160px;
}

.ofp-thumb[b-x30z5arqbm] {
    display: block;
    width: 160px;
    height: auto;
    max-height: 160px;
    object-fit: cover;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: var(--mud-palette-background-gray);
}

.ofp-name[b-x30z5arqbm] {
    font-size: 13px;
    overflow-wrap: anywhere;
}

.ofp-add[b-x30z5arqbm] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    padding: 10px 12px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 4px;
}

.ofp-add .hint[b-x30z5arqbm] { flex-basis: 100%; }

.field[b-x30z5arqbm] { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--mud-palette-text-secondary); }
.field input[b-x30z5arqbm] {
    font: inherit; font-size: 14px; color: var(--mud-palette-text-primary); background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default); border-radius: 4px; padding: 6px 8px; min-height: 36px;
}
.field input:focus-visible[b-x30z5arqbm] { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }
/* _content/Kuramo.App/Modules/Kozijnen/Components/OfferPhotoView.razor.rz.scp.css */
/* The photo view of the 3D tab. The photo is an SVG made by offerphoto.js, so its parts are reached with ::deep. */
.pv[b-vz8uv4d8uf] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.label[b-vz8uv4d8uf] {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-right: 4px;
}

.hint[b-vz8uv4d8uf] {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    margin: 0;
}

.pv-bar[b-vz8uv4d8uf], .pv-tools[b-vz8uv4d8uf], .pv-upload[b-vz8uv4d8uf], .pv-scale[b-vz8uv4d8uf], .pv-proposal[b-vz8uv4d8uf] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
}

.pv-upload[b-vz8uv4d8uf], .pv-scale[b-vz8uv4d8uf], .pv-proposal[b-vz8uv4d8uf] {
    padding: 10px 12px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 4px;
}

.pv-upload .hint[b-vz8uv4d8uf], .pv-scale .hint[b-vz8uv4d8uf], .pv-proposal .hint[b-vz8uv4d8uf] { flex-basis: 100%; }

.proposal-text[b-vz8uv4d8uf] { font-size: 13px; }

.push[b-vz8uv4d8uf] { margin-left: auto; }

.scale-text[b-vz8uv4d8uf], .sel-text[b-vz8uv4d8uf] { font-size: 13px; }
.scale-warn[b-vz8uv4d8uf] { font-size: 13px; font-weight: 500; color: var(--mud-palette-warning-darken); }
.sel-text[b-vz8uv4d8uf] { color: var(--mud-palette-text-secondary); }

.field[b-vz8uv4d8uf] { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--mud-palette-text-secondary); }
.field input[b-vz8uv4d8uf] {
    font: inherit; font-size: 14px; color: var(--mud-palette-text-primary); background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default); border-radius: 4px; padding: 6px 8px; min-height: 36px;
}
.field input:focus-visible[b-vz8uv4d8uf] { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }

.link[b-vz8uv4d8uf] { appearance: none; background: none; border: 0; padding: 0; margin-left: 8px; font: inherit; color: var(--mud-palette-primary); text-decoration: underline; cursor: pointer; }

.hseg[b-vz8uv4d8uf] { display: flex; flex-wrap: wrap; }
.opt[b-vz8uv4d8uf] { position: relative; cursor: pointer; display: block; }
.opt input[b-vz8uv4d8uf] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.row[b-vz8uv4d8uf] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px;
    min-height: 36px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    font-weight: 500;
    margin-left: -1px;
}
.hseg .opt:first-child .row[b-vz8uv4d8uf] { border-radius: 4px 0 0 4px; margin-left: 0; }
.hseg .opt:last-child .row[b-vz8uv4d8uf] { border-radius: 0 4px 4px 0; }
.hseg .opt:only-child .row[b-vz8uv4d8uf] { border-radius: 4px; }
.opt input:checked + .row[b-vz8uv4d8uf] { border-color: var(--mud-palette-primary); background: var(--mud-palette-primary-hover); box-shadow: inset 0 0 0 1px var(--mud-palette-primary); }
.opt input:focus-visible + .row[b-vz8uv4d8uf] { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

.stage-wrap[b-vz8uv4d8uf] { position: relative; }
.stage-wrap[hidden][b-vz8uv4d8uf] { display: none; }

.stage[b-vz8uv4d8uf] {
    position: relative;
    height: clamp(380px, 66vh, 660px);
    border-radius: 4px;
    overflow: hidden;
    background: #2a2a32;
    border: 1px solid var(--mud-palette-lines-default);
    touch-action: none;
}

.stage[b-vz8uv4d8uf]  .photo-svg { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; }
.stage[b-vz8uv4d8uf]  .kz { cursor: grab; outline: none; }
.stage[b-vz8uv4d8uf]  .kz:active { cursor: grabbing; }
.stage[b-vz8uv4d8uf]  .kz:focus-visible .hit { stroke: var(--mud-palette-primary); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.stage[b-vz8uv4d8uf]  .grip { cursor: nwse-resize; }
.stage[b-vz8uv4d8uf]  .photo-svg.readonly .kz { cursor: pointer; }
.stage[b-vz8uv4d8uf]  .photo-svg.scale-mode { cursor: crosshair; }
.stage[b-vz8uv4d8uf]  .photo-svg.scale-mode .kz { pointer-events: none; }
.stage[b-vz8uv4d8uf]  text { font-family: inherit; pointer-events: none; }

.stage-msg[b-vz8uv4d8uf] {
    position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px;
    color: #e6e6ee; pointer-events: none;
}

@media (max-width: 900px) {
    .stage[b-vz8uv4d8uf] { height: min(62vh, 440px); }
    .push[b-vz8uv4d8uf] { margin-left: 0; }
}
/* _content/Kuramo.App/Modules/Kozijnen/Components/OfferSubsidyPanel.razor.rz.scp.css */
/* The tab "Subsidie berekening": the outcome on top, then two columns (what an employee fills in on the left, what is known and what is missing on the right) and the small text at the bottom.
   On a narrow screen (a phone) the two columns become one, in the same order: outcome, input, what is known, small text. Colours only from the MudBlazor palette. */
.kz-subsidy[b-f7dmxrlefw] { display: grid; gap: 16px; }
.kz-subsidy-columns[b-f7dmxrlefw] { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.kz-subsidy-main[b-f7dmxrlefw], .kz-subsidy-side[b-f7dmxrlefw], .kz-subsidy-form[b-f7dmxrlefw] { display: grid; gap: 16px; min-width: 0; }
.kz-subsidy-card[b-f7dmxrlefw] {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
}
.kz-subsidy-other-card[b-f7dmxrlefw] { background: color-mix(in srgb, var(--mud-palette-text-primary) 4%, var(--mud-palette-surface)); }
@media (max-width: 899.95px) {
    .kz-subsidy-columns[b-f7dmxrlefw] { grid-template-columns: minmax(0, 1fr); }
}
.kz-subsidy-subheading[b-f7dmxrlefw] { font-size: 1rem; font-weight: 600; margin: 0; }
.kz-subsidy-field[b-f7dmxrlefw] { display: grid; gap: 4px; }
.kz-subsidy-field label[b-f7dmxrlefw], .kz-subsidy-evidence label[b-f7dmxrlefw] { font-size: 0.875rem; }
.kz-subsidy-field select[b-f7dmxrlefw], .kz-subsidy-field input[b-f7dmxrlefw], .kz-subsidy-evidence input[b-f7dmxrlefw] {
    padding: 6px 8px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    max-width: 100%;
}
.kz-subsidy-group[b-f7dmxrlefw] { border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; padding: 8px 12px; display: grid; gap: 10px; }
.kz-subsidy-group legend[b-f7dmxrlefw] { font-size: 0.875rem; font-weight: 600; padding: 0 4px; }
.kz-subsidy-evidence[b-f7dmxrlefw] { display: grid; gap: 4px; }
.kz-subsidy-name[b-f7dmxrlefw] { font-weight: 600; overflow-wrap: anywhere; }
.kz-subsidy-help[b-f7dmxrlefw] { font-size: 0.75rem; color: var(--mud-palette-text-secondary); }
.kz-subsidy-error[b-f7dmxrlefw] { font-size: 0.8125rem; color: color-mix(in srgb, var(--mud-palette-error) 50%, var(--mud-palette-text-primary)); }
.kz-subsidy-other[b-f7dmxrlefw] { color: var(--mud-palette-text-secondary); }
.kz-subsidy-check[b-f7dmxrlefw] { display: flex; gap: 8px; align-items: flex-start; }
.kz-subsidy-check input[b-f7dmxrlefw] { margin-top: 3px; }
.kz-subsidy-check label[b-f7dmxrlefw] { font-size: 0.875rem; }
/* _content/Kuramo.App/Modules/Kozijnen/Components/OfferThreeDTab.razor.rz.scp.css */
/* The 3D tab: the view on the left, the tool panel (320 px) on the right; under 900 px the panel goes under the view. */
.td[b-uiz3uajc6c] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
    align-items: start;
}

.td-viewer[b-uiz3uajc6c] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.td-tools[b-uiz3uajc6c] {
    position: sticky;
    top: 16px;
    /* While stuck (top: 16px) the panel ends above the assistant launcher: CoWorkHost sets --cowork-clearance (launcher height +
       margin) only while that button is on screen, else it is absent and this is the old 100vh - 32px. */
    max-height: calc(100vh - 32px - var(--cowork-clearance, 0px));
    overflow: auto;
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

.label[b-uiz3uajc6c] {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-right: 4px;
}

.hint[b-uiz3uajc6c] {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    margin: 0;
}

.house-bar[b-uiz3uajc6c], .vbar[b-uiz3uajc6c] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
}

.vbar .push[b-uiz3uajc6c] { margin-left: auto; }

.hseg[b-uiz3uajc6c] { display: flex; flex-wrap: wrap; }

.opt[b-uiz3uajc6c] { position: relative; cursor: pointer; display: block; }
.opt input[b-uiz3uajc6c] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }

.row[b-uiz3uajc6c] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px;
    min-height: 36px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    font-weight: 500;
    margin-left: -1px;
}
.hseg .opt:first-child .row[b-uiz3uajc6c] { border-radius: 4px 0 0 4px; margin-left: 0; }
.hseg .opt:last-child .row[b-uiz3uajc6c] { border-radius: 0 4px 4px 0; }
.opt input:checked + .row[b-uiz3uajc6c] { border-color: var(--mud-palette-primary); background: var(--mud-palette-primary-hover); box-shadow: inset 0 0 0 1px var(--mud-palette-primary); }
.opt input:focus-visible + .row[b-uiz3uajc6c] { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

.photo[b-uiz3uajc6c] {
    appearance: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: 36px;
    padding: 3px 12px;
    border: 1px dashed var(--mud-palette-primary);
    border-radius: 4px;
    background: transparent;
    color: var(--mud-palette-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.photo:hover[b-uiz3uajc6c] { background: var(--mud-palette-primary-hover); }
.photo:focus-visible[b-uiz3uajc6c] { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.photo strong[b-uiz3uajc6c] { font-weight: 500; font-size: 13px; }
.photo small[b-uiz3uajc6c] { font-size: 11px; color: var(--mud-palette-text-secondary); }

.stage-wrap[b-uiz3uajc6c] { position: relative; }

.stage[b-uiz3uajc6c] {
    position: relative;
    height: clamp(380px, 66vh, 660px);
    border-radius: 4px;
    overflow: hidden;
    background: linear-gradient(to bottom, #c4d9f1 0%, #e9f0f6 62%, #e9f0f6 100%);
    border: 1px solid var(--mud-palette-lines-default);
    touch-action: none;
}

.stage[b-uiz3uajc6c]  canvas { display: block; width: 100%; height: 100%; outline: none; }
.stage[b-uiz3uajc6c]  canvas:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; }
.stage[b-uiz3uajc6c]  .labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.stage[b-uiz3uajc6c]  .poslabel {
    position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%;
    border: 2px solid #fff; background: #23222f; color: #fff; font-weight: 500; font-size: 12px; line-height: 22px; text-align: center; padding: 0;
    pointer-events: auto; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.stage[b-uiz3uajc6c]  .poslabel.opt { border-style: dashed; }
.stage[b-uiz3uajc6c]  .poslabel[data-sel="1"] { background: var(--mud-palette-primary); width: 30px; height: 30px; line-height: 26px; z-index: 2; }

.stage-msg[b-uiz3uajc6c] {
    position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px;
    color: #5b5a70; pointer-events: none;
}

.legend[b-uiz3uajc6c] { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }

.chip[b-uiz3uajc6c] {
    appearance: none;
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: inherit;
    border-radius: 16px; padding: 3px 12px 3px 4px; min-height: 32px; cursor: pointer; font: inherit; font-size: 13px;
}
.chip .n[b-uiz3uajc6c] {
    display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
    background: #23222f; color: #fff; font-weight: 500; font-size: 12px;
}
.chip .n.opt[b-uiz3uajc6c] { border: 1px dashed #fff; box-shadow: 0 0 0 1px #23222f; }
.chip .t[b-uiz3uajc6c] { color: var(--mud-palette-text-secondary); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"][b-uiz3uajc6c] { border-color: var(--mud-palette-primary); background: var(--mud-palette-primary-hover); }
.chip[aria-pressed="true"] .n[b-uiz3uajc6c] { background: var(--mud-palette-primary); }
.chip:hover[b-uiz3uajc6c] { border-color: var(--mud-palette-primary); }
.chip:focus-visible[b-uiz3uajc6c] { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

.td-list[b-uiz3uajc6c] { font-size: 13px; }
.td-list h3[b-uiz3uajc6c] { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--mud-palette-text-secondary); margin: 0 0 4px; }
.td-list ul[b-uiz3uajc6c] { margin: 0; padding-left: 20px; }

@media (max-width: 900px) {
    .td[b-uiz3uajc6c] { grid-template-columns: minmax(0, 1fr); }
    .td-tools[b-uiz3uajc6c] { position: static; max-height: none; overflow: visible; }
    .stage[b-uiz3uajc6c] { height: min(62vh, 440px); }
    .vbar .push[b-uiz3uajc6c] { margin-left: 0; }
}
/* _content/Kuramo.App/Modules/Kozijnen/Components/ProductRule3D.razor.rz.scp.css */
/* The 3D of one kozijn in the product rule card (plan offerteregel-productregel 1c, tablet rules of chapter 9): at most 45 % of the screen high, with room next to and under
   it to scroll (a swipe that starts on the 3D turns the kozijn), Voorkant/Hoek/2D-tekening as buttons of 44 px. Colours only from the MudBlazor palette. */
.prc-3d[b-1zznmry0a2] {
    min-width: 0;
}

.prc-views[b-1zznmry0a2] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.prc-view[b-1zznmry0a2] {
    min-height: 44px;
    min-width: 44px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    cursor: pointer;
}

.prc-view[aria-pressed="true"][b-1zznmry0a2] {
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-surface));
    border-color: var(--mud-palette-primary);
    font-weight: 600;
}

.prc-3d-stage[b-1zznmry0a2] {
    position: relative;
    width: 100%;
    height: min(45vh, 420px);
    min-height: 220px;
    border-radius: 6px;
    overflow: hidden;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 4%, var(--mud-palette-surface));
}

.prc-3d-stage[b-1zznmry0a2]  canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.prc-3d-stage[b-1zznmry0a2]  .labels {
    display: none;
}

.prc-help[b-1zznmry0a2] {
    font-size: 0.875rem;
    line-height: 14px;
    min-height: 14px;
    color: var(--mud-palette-text-secondary);
    margin: 4px 0;
}

/* Plan productregel-1e 3.5, 1f 3.1: the division of the glass in words, one line per field and per kind of vakken where a measure does not fit. */
.prc-division-line[b-1zznmry0a2] {
    display: block;
    line-height: 18px;
    overflow-wrap: anywhere;   /* the note repeats a text of the list, which can be one long word (security review S1) */
}
/* _content/Kuramo.App/Modules/Kozijnen/Components/ProductRuleCard.razor.rz.scp.css */
/* The product rule card: the content of the tab Samenstellen of the dialog of an offer line (plan productregel-dialogs 3.3, design v8). On top the 3D next to the vakken
   and the sizes, under it the field groups (level 2 tabs, the style of the old position screen) with fields in equal columns (plan compacte-velden, part B): the vakken 2,
   the sizes 4 (2 under 1024 px), the groups of the four tabs 4 on a desktop, 3 under 1280 px and 2 on a phone. The fields take their height from wwwroot/fields.css (40 px
   with a mouse, 48 px on any touch input); buttons and tabs at least 44 px on a touch screen (a level 2 tab 40 px on a desktop, never higher than level 1). Small headings
   without a line. Colours only from the MudBlazor palette, so light and dark work. */
.prc[b-rvhcsbanxz] {
    color: var(--mud-palette-text-primary);
}

.prc-note[b-rvhcsbanxz], .prc-help[b-rvhcsbanxz] {
    font-size: 0.875rem;
    line-height: 14px;
    min-height: 14px;
    color: var(--mud-palette-text-secondary);
    margin: 4px 0;
}

/* The notice under a field whose value does not fit the shape of the kozijn (plan productregel-1f 3.2): warning text, the warning colour mixed into the text colour
   (the plain warning colour is too light for text), like --kz-warn-text of app.css. */
[b-rvhcsbanxz] .prc-notice {
    font-size: 0.75rem;
    line-height: 1.3;
    margin: 3px 0 0 10px;
    color: color-mix(in srgb, var(--mud-palette-warning) 25%, var(--mud-palette-text-primary));
}

/* A conflict sentence under a field (plan productregel-1g; code review R7): the error colour mixed towards the text colour, like .kz-text-error of app.css, because the plain
   error colour is too light for text (>= 4.5:1 in both palettes, pinned by ProductRuleCardTests). */
.prc-error[b-rvhcsbanxz] {
    font-size: 0.875rem;
    color: color-mix(in srgb, var(--mud-palette-error) 50%, var(--mud-palette-text-primary));
    margin: 4px 0;
}

/* A heading above a group of fields (design ontwerp-compacte-velden): small, in capitals, no line under it. The secondary text colour reaches 4.5:1 in both palettes. */
.prc-group[b-rvhcsbanxz] {
    font-size: var(--kz-head-size);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--mud-palette-text-secondary);
    margin: 12px 0 8px 0;
}

/* The unit in a heading ("Vakken (mm)") stays as it is written: not "(MM)". */
.prc-group .prc-unit[b-rvhcsbanxz] {
    text-transform: none;
}

.prc-grid[b-rvhcsbanxz] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--kz-field-gap);
    margin-bottom: 16px;
}

.prc-drawing[b-rvhcsbanxz] {
    grid-column: span 2;
    min-width: 0;
    max-height: 45vh;
    overflow: auto;
    touch-action: pan-y;
}

.prc-drawing-img[b-rvhcsbanxz] {
    max-width: 100%;
    max-height: 42vh;
    display: block;
    background: var(--mud-palette-white);
    border-radius: 4px;
}

.prc-side[b-rvhcsbanxz] {
    grid-column: span 2;
    min-width: 0;
}

.prc-fields[b-rvhcsbanxz] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--kz-field-gap);
}

.prc-fields-2[b-rvhcsbanxz] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* The fields of a group tab (Algemeen, Indeling, Uitvoering, Opties): 4 per row on a desktop, 3 under 1280 px, 2 on a phone (the media rules below). */
.prc-fields-tab[b-rvhcsbanxz] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 12px;
}

.prc-field[b-rvhcsbanxz], [b-rvhcsbanxz] .prc-field {
    min-width: 0;
}

.prc-check[b-rvhcsbanxz] {
    display: flex;
    align-items: center;
    min-height: 44px;
}

.prc-btn[b-rvhcsbanxz], [b-rvhcsbanxz] .prc-btn {
    min-height: 44px;
    min-width: 44px;
}

/* Level 2: the field groups. A raised bar with its own background, the panel under it framed; the counters are in the tab text. */
.prc[b-rvhcsbanxz]  .prc-groups .mud-tab {
    min-height: 40px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: none;
}

.prc[b-rvhcsbanxz]  .prc-groups .mud-tabs-tabbar {
    background: var(--mud-palette-background-gray);
}

.prc[b-rvhcsbanxz]  .prc-groups .mud-tabs-panels {
    border: 1px solid var(--mud-palette-lines-default);
    border-top: none;
}

/* The tab Uitvoering (plan productregel-1e 3.1): three headings under each other in one panel; heading and sentence line up with the fields under them. */
.prc-sub > .prc-group[b-rvhcsbanxz] {
    margin: 12px 12px 0 12px;
}

/* A part of a shared heading (Dorpels, Toepassing under "Dorpels en toepassing"): a wrapper that takes no place of its own, so its fields run on in the grid. */
.prc-sub-part[b-rvhcsbanxz] {
    display: contents;
}

/* 8 px between a heading and its fields, as in the design (the group has 12 px padding for the panel; directly under a heading only 8 px at the top). */
.prc-sub > .prc-group + .prc-fields-tab[b-rvhcsbanxz] {
    padding-top: 8px;
}

.prc-sub > .prc-help[b-rvhcsbanxz] {
    margin: 12px;
}

/* The fields of the vak that was tapped in the 3D (plan 1c). */
.prc-picked[b-rvhcsbanxz] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (max-width: 1279.98px), (any-pointer: coarse) {
    .prc[b-rvhcsbanxz]  .prc-groups .mud-tab {
        min-height: 44px;
    }
}

@media (max-width: 1279.98px) {
    .prc-fields-tab[b-rvhcsbanxz] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1023.98px) {
    .prc-sizes[b-rvhcsbanxz] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 599.98px) {
    .prc-grid[b-rvhcsbanxz] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .prc-drawing[b-rvhcsbanxz], .prc-side[b-rvhcsbanxz] {
        grid-column: span 2;
    }

    .prc-fields-tab[b-rvhcsbanxz] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* The table Verdeling glas per vak (plan productregel-1h 3.2): one row per vak with two groups of four buttons of 44 x 44 px (4 + 4 = 352 px, so it fits on a tablet of
   768 px), Ruitjes and the chosen row (a soft tint of the success colour, the text stays the text colour). Colours only from the MudBlazor palette. */
.prc-division-table[b-rvhcsbanxz] {
    width: calc(100% - 24px);
    margin: 0 12px;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.prc-division-table th[b-rvhcsbanxz] {
    text-align: left;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    padding: 6px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.prc-division-table td[b-rvhcsbanxz] {
    padding: 6px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    vertical-align: middle;
}

.prc-division-chosen td[b-rvhcsbanxz] {
    background: color-mix(in srgb, var(--mud-palette-success) 14%, var(--mud-palette-surface));
}

.prc-division-kind[b-rvhcsbanxz], .prc-division-panel[b-rvhcsbanxz] {
    color: var(--mud-palette-text-secondary);
}

.prc-division-choice[b-rvhcsbanxz] {
    display: inline-flex;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 8px;
    overflow: hidden;
}

.prc-division-option[b-rvhcsbanxz] {
    min-width: 44px;
    height: 44px;
    border: none;
    border-right: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

.prc-division-option:last-child[b-rvhcsbanxz] {
    border-right: none;
}

.prc-division-option:focus-visible[b-rvhcsbanxz] {
    outline: 2px solid var(--mud-palette-text-primary);
    outline-offset: -3px;
}

.prc-division-on[b-rvhcsbanxz] {
    background: color-mix(in srgb, var(--mud-palette-success) 18%, var(--mud-palette-surface));
    box-shadow: inset 0 -3px 0 var(--mud-palette-success);
    font-weight: 700;
}

.prc-division-option[aria-disabled="true"][b-rvhcsbanxz] {
    cursor: not-allowed;
    color: var(--mud-palette-text-secondary);
}

/* "te smal: niet getekend" at the vak, in the text colour mixed with the warning colour like the notices of the card. */
.prc-division-skip[b-rvhcsbanxz] {
    display: block;
    font-size: 0.75rem;
    color: color-mix(in srgb, var(--mud-palette-warning) 25%, var(--mud-palette-text-primary));
}

.prc-division-all[b-rvhcsbanxz] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    margin: 10px 12px 0 12px;
}

.prc-division-all .prc-help[b-rvhcsbanxz], .prc-division-skipped[b-rvhcsbanxz], .prc-division-note[b-rvhcsbanxz] {
    margin: 4px 12px;
    min-height: 0;
    line-height: 1.4;
}

.prc-division-all .prc-help[b-rvhcsbanxz] {
    margin: 0;
}

/* The old Stijlafstand and Kalfhoogte (besluit 4): a soft warning block, the warning colour mixed into surface and text like the warning pill of app.css (>= 4.5:1). */
.prc-old[b-rvhcsbanxz] {
    margin: 10px 12px 0 12px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    line-height: 1.5;
    background: color-mix(in srgb, var(--mud-palette-warning) 18%, var(--mud-palette-surface));
    color: color-mix(in srgb, var(--mud-palette-warning) 25%, var(--mud-palette-text-primary));
}

.prc-old[b-rvhcsbanxz]  .prc-btn {
    margin-left: 6px;
}

/* A phone (< 600 px): the rows under each other, every cell with its heading (data-label), as the design shows. */
@media (max-width: 599.98px) {
    .prc-division-table thead[b-rvhcsbanxz] {
        display: none;
    }

    .prc-division-table[b-rvhcsbanxz], .prc-division-table tbody[b-rvhcsbanxz], .prc-division-table tr[b-rvhcsbanxz], .prc-division-table td[b-rvhcsbanxz] {
        display: block;
        width: 100%;
    }

    .prc-division-table[b-rvhcsbanxz] {
        margin: 0 12px;
        width: calc(100% - 24px);
    }

    .prc-division-table tr[b-rvhcsbanxz] {
        border-bottom: 1px solid var(--mud-palette-lines-default);
        padding: 6px 0;
    }

    .prc-division-table td[b-rvhcsbanxz] {
        border: none;
        padding: 4px 0;
    }

    .prc-division-table td[data-label][b-rvhcsbanxz]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.75rem;
        color: var(--mud-palette-text-secondary);
        margin-bottom: 2px;
    }
}

/* The list Uitvoering (plan productregel-fase3 3c, mockups 3.2): the field over the whole row; per variant a small sketch, the words and the code, every option at least
   44 px high. The options are drawn by MudPopoverProvider, but their content is written in this component, so these scoped rules reach it. The sketch is in the text colour
   (currentColor): no colour of its own, light and dark work. */
.prc-variant[b-rvhcsbanxz] {
    grid-column: 1 / -1;
}

.prc-variant-option[b-rvhcsbanxz] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    width: 100%;
}

.prc-variant-sketch[b-rvhcsbanxz] {
    flex: none;
    display: inline-flex;
    color: var(--mud-palette-text-primary);
}

/* The svg comes as markup, without the scope attribute: ::deep. */
.prc-variant-sketch[b-rvhcsbanxz]  svg {
    width: 32px;
    height: 40px;
}

/* The chosen variant also stands in the CLOSED field (the select input, 40/48 px from fields.css): there the option takes the line height and the sketch one line,
   otherwise the words were cut off at the bottom (measured headless, compacte velden deel B). The open list keeps the 44 px rows above. */
.prc-variant[b-rvhcsbanxz]  .mud-select-input .prc-variant-option {
    min-height: 0;
    gap: 8px;
}

.prc-variant[b-rvhcsbanxz]  .mud-select-input svg {
    width: auto;
    height: 1.2em;
    vertical-align: middle;
}

.prc-variant-words[b-rvhcsbanxz] {
    flex: 1 1 auto;
    min-width: 0;
}

.prc-variant-code[b-rvhcsbanxz] {
    flex: none;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

.prc-order-code[b-rvhcsbanxz] {
    margin-top: 8px;
}
/* _content/Kuramo.App/Modules/Kozijnen/Components/ThreeDPicker.razor.rz.scp.css */
/* The choice lists of the 3D tool panel (ThreeDPicker). Plain Razor markup, so this scoped CSS applies to every element. */
.pk[b-8xhpsqgfgk] { position: relative; scroll-margin-bottom: 170px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

.pk-head[b-8xhpsqgfgk] {
    appearance: none; width: 100%; min-width: 0; text-align: left; color: inherit; font: inherit; cursor: pointer;
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-height: 48px;
    background: var(--mud-palette-surface); border: 0.5px solid var(--mud-palette-lines-inputs, var(--mud-palette-lines-default)); border-radius: 6px;
}
.pk-head:hover:not([disabled])[b-8xhpsqgfgk] { border-color: var(--mud-palette-primary); }
.pk-head:focus-visible[b-8xhpsqgfgk] { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.pk-head[aria-expanded="true"][b-8xhpsqgfgk] { border-color: var(--mud-palette-primary); }
.pk-head[disabled][b-8xhpsqgfgk] { opacity: .5; cursor: not-allowed; }
.pk-txt[b-8xhpsqgfgk] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pk-name[b-8xhpsqgfgk] { overflow-wrap: anywhere; line-height: 1.3; }
.pk-none[b-8xhpsqgfgk] { color: var(--mud-palette-text-secondary); }
.pk-sub[b-8xhpsqgfgk] { font-size: 11.5px; color: var(--mud-palette-text-secondary); font-variant-numeric: tabular-nums; }
.pk-chev[b-8xhpsqgfgk] { flex: none; color: var(--mud-palette-text-secondary); transition: transform .12s ease; }
.pk-chev-up[b-8xhpsqgfgk] { transform: rotate(180deg); }

.dot[b-8xhpsqgfgk] { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .3); box-shadow: 0 0 0 1px var(--mud-palette-lines-default); background: var(--c, #9a98a8); }
.dot-lg[b-8xhpsqgfgk] { width: 22px; height: 22px; }
.dot.grain[b-8xhpsqgfgk] {
    background-image: repeating-linear-gradient(100deg, rgba(0, 0, 0, .10) 0 1px, transparent 1px 5px), repeating-linear-gradient(80deg, rgba(255, 255, 255, .12) 0 1px, transparent 1px 7px);
    background-color: var(--c, #9a98a8);
}
.dot.unknown[b-8xhpsqgfgk] { border-style: dashed; border-color: var(--mud-palette-text-secondary); }

.pk-pop[b-8xhpsqgfgk] {
    display: flex; flex-direction: column; gap: 6px; padding: 8px; min-width: 0;
    background: var(--mud-palette-surface); border: 0.5px solid var(--mud-palette-lines-default); border-radius: 6px;
}
.pk-search[b-8xhpsqgfgk] {
    width: 100%; min-width: 0; box-sizing: border-box; font: inherit; font-size: 16px; color: inherit; padding: 7px 10px; min-height: 36px;
    background: var(--mud-palette-background); border: 0.5px solid var(--mud-palette-lines-inputs, var(--mud-palette-lines-default)); border-radius: 6px;
}
.pk-search:focus-visible[b-8xhpsqgfgk] { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }
.pk-count[b-8xhpsqgfgk] { margin: 0; font-size: 11.5px; color: var(--mud-palette-text-secondary); font-variant-numeric: tabular-nums; }

.pk-list[b-8xhpsqgfgk] { position: relative; list-style: none; margin: 0; padding: 0; max-height: min(224px, 45dvh); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; padding-right: 2px; display: flex; flex-direction: column; gap: 2px; }
.pk-opt[b-8xhpsqgfgk] {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 7px 8px; min-height: 36px; border-radius: 4px; cursor: pointer; min-width: 0;
}
.pk-opt:hover[b-8xhpsqgfgk] { background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, .05)); }
.pk-act[b-8xhpsqgfgk] { outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; }
.pk-sel[b-8xhpsqgfgk], .pk-sel:hover[b-8xhpsqgfgk] { background: var(--mud-palette-primary-hover); }
.pk-nm[b-8xhpsqgfgk] { flex: 1 1 40%; min-width: 0; overflow-wrap: anywhere; line-height: 1.3; }
.pk-tags[b-8xhpsqgfgk] { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 100%; }
.tag[b-8xhpsqgfgk] { font-size: 10.5px; line-height: 1.5; padding: 0 6px; border-radius: 8px; background: var(--mud-palette-primary-hover); color: var(--mud-palette-primary); white-space: nowrap; }
.tag-muted[b-8xhpsqgfgk] { background: var(--mud-palette-background-gray); color: var(--mud-palette-text-secondary); }
.pk-check[b-8xhpsqgfgk] { flex: none; color: var(--mud-palette-primary); }
.pk-empty[b-8xhpsqgfgk] { padding: 10px 8px; font-size: 13px; color: var(--mud-palette-text-secondary); overflow-wrap: anywhere; }

/* chips: a short list of plain choices */
.chips[b-8xhpsqgfgk] { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.chip[b-8xhpsqgfgk] { position: relative; cursor: pointer; display: block; max-width: 100%; }
.chip input[b-8xhpsqgfgk] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.chip-t[b-8xhpsqgfgk] {
    display: block; padding: 6px 12px; min-height: 34px; line-height: 1.3; overflow-wrap: anywhere;
    background: var(--mud-palette-surface); border: 0.5px solid var(--mud-palette-lines-inputs, var(--mud-palette-lines-default)); border-radius: 17px;
}
.chip:hover input:not(:disabled) + .chip-t[b-8xhpsqgfgk] { border-color: var(--mud-palette-primary); }
.chip input:checked + .chip-t[b-8xhpsqgfgk] { border-color: var(--mud-palette-primary); background: var(--mud-palette-primary-hover); box-shadow: inset 0 0 0 1px var(--mud-palette-primary); }
.chip input:focus-visible + .chip-t[b-8xhpsqgfgk] { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.chip input:disabled + .chip-t[b-8xhpsqgfgk] { opacity: .5; cursor: not-allowed; }

@media (any-pointer: coarse) { .pk-opt[b-8xhpsqgfgk] { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .pk-chev[b-8xhpsqgfgk] { transition: none; } }
/* _content/Kuramo.App/Modules/Kozijnen/Components/ThreeDToolPanel.razor.rz.scp.css */
/* The tool panel of the 3D tab. */
.tp-head[b-eo1ulr8hyp] { padding: 16px 16px 12px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.eyebrow[b-eo1ulr8hyp] { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--mud-palette-text-secondary); margin: 0; }
.tp-head h2[b-eo1ulr8hyp] { font-size: 16px; font-weight: 500; line-height: 1.3; margin: 2px 0 0; }
.tp-sub[b-eo1ulr8hyp] { font-size: 12px; color: var(--mud-palette-text-secondary); margin: 4px 0 0; }
.tp-remark[b-eo1ulr8hyp] { font-size: 12px; margin: 8px 0 0; padding: 6px 8px; border-radius: 4px; background: var(--mud-palette-warning-hover); }

fieldset.scope[b-eo1ulr8hyp] { border: 0; margin: 0; padding: 12px 16px; min-width: 0; border-bottom: 1px solid var(--mud-palette-lines-default); }
.scope legend[b-eo1ulr8hyp] { float: left; width: 100%; padding: 0 0 6px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.scope legend + *[b-eo1ulr8hyp] { clear: both; }
.rl[b-eo1ulr8hyp] { display: flex; align-items: center; gap: 8px; padding: 5px 0; cursor: pointer; }
.rl input[b-eo1ulr8hyp] { accent-color: var(--mud-palette-primary); width: 16px; height: 16px; margin: 0; }
.rl .c[b-eo1ulr8hyp] { color: var(--mud-palette-text-secondary); font-size: 12px; }

.grp[b-eo1ulr8hyp] { border-bottom: 1px solid var(--mud-palette-lines-default); }
.grp-head[b-eo1ulr8hyp] {
    appearance: none; width: 100%; text-align: left; background: none; border: 0; color: inherit; font: inherit; cursor: pointer;
    padding: 12px 16px; display: grid; grid-template-columns: 1fr; gap: 2px;
}
.grp-head:focus-visible[b-eo1ulr8hyp] { outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; }
.g-title[b-eo1ulr8hyp] { font-weight: 500; }
.g-val[b-eo1ulr8hyp] { font-size: 12px; color: var(--mud-palette-text-secondary); }
.mod[b-eo1ulr8hyp] { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 9px; line-height: 1.55; white-space: nowrap; vertical-align: baseline; background: var(--mud-palette-primary-hover); color: var(--mud-palette-primary); border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 35%, transparent); font-size: 11px; font-weight: 500; }
.g-body[b-eo1ulr8hyp] { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.sub[b-eo1ulr8hyp] { font-size: 12px; font-weight: 500; color: var(--mud-palette-text-secondary); margin: 0; }
.why[b-eo1ulr8hyp], .hint[b-eo1ulr8hyp], .cat[b-eo1ulr8hyp] { font-size: 12px; color: var(--mud-palette-text-secondary); margin: 0; overflow-wrap: anywhere; min-width: 0; }
.why[b-eo1ulr8hyp] { font-size: 11.5px; line-height: 1.4; padding: 6px 8px; border-radius: 4px; background: var(--mud-palette-background-gray); border: 1px dashed var(--mud-palette-lines-default); }
.note[b-eo1ulr8hyp] { font-size: 12px; margin: 0; padding: 6px 8px; border-radius: 4px; background: var(--mud-palette-warning-hover); border: 1px solid var(--mud-palette-warning); }

.opt[b-eo1ulr8hyp] { position: relative; cursor: pointer; display: block; }
.opt input[b-eo1ulr8hyp] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }

.list[b-eo1ulr8hyp] { display: flex; flex-direction: column; gap: 6px; }
.row[b-eo1ulr8hyp] {
    display: flex; align-items: center; gap: 10px; padding: 7px 10px; min-height: 40px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 4px; background: var(--mud-palette-surface);
}
.opt input:checked + .row[b-eo1ulr8hyp] { border-color: var(--mud-palette-primary); background: var(--mud-palette-primary-hover); box-shadow: inset 0 0 0 1px var(--mud-palette-primary); }
.opt input:focus-visible + .row[b-eo1ulr8hyp] { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.opt input:disabled + .row[b-eo1ulr8hyp] { opacity: .5; cursor: not-allowed; }
.row .nm[b-eo1ulr8hyp] { flex: 1; min-width: 0; }
.dot[b-eo1ulr8hyp] { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .3); background: var(--c); }
.seg[b-eo1ulr8hyp] { display: grid; }
.seg .row[b-eo1ulr8hyp] { justify-content: center; border-radius: 0; margin-left: -1px; }
.seg .opt:first-child .row[b-eo1ulr8hyp] { border-radius: 4px 0 0 4px; margin-left: 0; }
.seg .opt:last-child .row[b-eo1ulr8hyp] { border-radius: 0 4px 4px 0; }

.btn[b-eo1ulr8hyp] {
    appearance: none; border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); color: inherit;
    border-radius: 4px; padding: 6px 14px; min-height: 34px; font: inherit; font-weight: 500; cursor: pointer; width: 100%;
}
.btn:hover:not([disabled])[b-eo1ulr8hyp] { border-color: var(--mud-palette-primary); color: var(--mud-palette-primary); }
.btn:focus-visible[b-eo1ulr8hyp] { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.btn[disabled][b-eo1ulr8hyp] { opacity: .45; cursor: not-allowed; }
.btn.primary[b-eo1ulr8hyp] { background: var(--mud-palette-primary); border-color: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
.btn.primary:hover:not([disabled])[b-eo1ulr8hyp] { color: var(--mud-palette-primary-text); filter: brightness(1.08); }

.tp-foot[b-eo1ulr8hyp] {
    position: sticky; bottom: 0; margin-top: auto; background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default); padding: 12px 16px; display: flex; flex-direction: column; gap: 8px;
}
.tp-foot .chg[b-eo1ulr8hyp] { display: flex; align-items: baseline; gap: 8px; }
.tp-foot .chg strong[b-eo1ulr8hyp] { font-size: 16px; font-variant-numeric: tabular-nums; }
.tp-foot small[b-eo1ulr8hyp] { color: var(--mud-palette-text-secondary); font-size: 12px; }
.tp-foot small.off[b-eo1ulr8hyp] { color: var(--mud-palette-warning-darken); }

@media (max-width: 900px) { .tp-foot[b-eo1ulr8hyp] { position: static; } }
/* _content/Kuramo.App/Modules/Pricing/Components/PriceBackfillPage.razor.rz.scp.css */
/* "Prijzen vastleggen voor bestaande opdrachten": one block per offer that opens, a plain table with the amounts right-aligned in tabular digits, 44 px tap targets,
   colours only from the palette (light and dark), and nothing wider than the phone. */
.pb-page[b-uwhtpbu7vh] {
    max-width: 960px;
    overflow-wrap: anywhere;
}

.pb-head[b-uwhtpbu7vh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.pb-actions[b-uwhtpbu7vh] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

[b-uwhtpbu7vh] .pb-touch {
    min-height: 44px;
}

.pb-offer[b-uwhtpbu7vh] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    margin-bottom: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

.pb-offer-summary[b-uwhtpbu7vh] {
    min-height: 44px;
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
}

.pb-offer-summary:focus-visible[b-uwhtpbu7vh] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.pb-offer-title[b-uwhtpbu7vh] {
    font-weight: 600;
}

.pb-offer-meta[b-uwhtpbu7vh] {
    color: var(--mud-palette-text-secondary);
}

.pb-offer-body[b-uwhtpbu7vh] {
    padding: 0 12px 12px;
}

.pb-lines[b-uwhtpbu7vh] {
    width: 100%;
    border-collapse: collapse;
}

.pb-lines th[b-uwhtpbu7vh],
.pb-lines td[b-uwhtpbu7vh] {
    padding: 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    text-align: left;
    vertical-align: top;
}

.pb-lines th[b-uwhtpbu7vh] {
    font-weight: 600;
    background: var(--mud-palette-background-gray);
}

.pb-lines .pb-num[b-uwhtpbu7vh] {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.pb-line-detail[b-uwhtpbu7vh] {
    color: var(--mud-palette-text-secondary);
}

.pb-total td[b-uwhtpbu7vh] {
    font-weight: 600;
    border-bottom: none;
}

.pb-not-in-order[b-uwhtpbu7vh],
.pb-others[b-uwhtpbu7vh] {
    margin: 4px 0 0;
    padding-left: 20px;
}

/* Review of addendum A, point 6: an own chevron (the summary is a flex box, which hides the marker of the browser), the help under the buttons, the count of what stays out
   of the order with an icon and text (never colour alone), a caption for screen readers only, and the total as a row header. */
.pb-offer-summary[b-uwhtpbu7vh] {
    list-style: none;
}

.pb-offer-summary[b-uwhtpbu7vh]::-webkit-details-marker {
    display: none;
}

.pb-offer-summary[b-uwhtpbu7vh]  .pb-chevron {
    flex: none;
    transition: transform 0.15s ease;
}

.pb-offer[open] > .pb-offer-summary[b-uwhtpbu7vh]  .pb-chevron {
    transform: rotate(90deg);
}

.pb-action[b-uwhtpbu7vh] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 320px;
}

.pb-help[b-uwhtpbu7vh] {
    color: var(--mud-palette-text-secondary);
}

.pb-offer-warn[b-uwhtpbu7vh] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: color-mix(in srgb, var(--mud-palette-warning) 25%, var(--mud-palette-text-primary));
}

.pb-lines .pb-total th[b-uwhtpbu7vh] {
    background: none;
    font-weight: 600;
    border-bottom: none;
}

.pb-sr[b-uwhtpbu7vh] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}