/* _content/Anouk.UI/Features/Absences/Pages/RequestTimeOff.razor.rz.scp.css */
@media (max-width: 600px) {
    .request-time-off-form[b-cgei0ozwiv] {
        max-width: 100%;
    }

    .request-time-off-form .k-form-field[b-cgei0ozwiv] {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
}
/* _content/Anouk.UI/Features/Automation/Pages/AiSettingsOverview.razor.rz.scp.css */
.ai-settings-scroll[b-oz2x5tx5ti] {
    height: 100%;
    overflow-y: auto;
}

.ai-settings-notice[b-oz2x5tx5ti] {
    font-size: .85em;
}

/* Responsive card grid: one column on narrow screens, up to four cards side by side on wide ones. */
.ai-settings-sections[b-oz2x5tx5ti] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    align-items: start;
    padding-bottom: 16px;
}

.ai-settings-card[b-oz2x5tx5ti] {
    border: 1px solid var(--kendo-color-border, #424242);
    border-radius: 6px;
    padding: 12px 16px 16px;
}

.ai-settings-card h3[b-oz2x5tx5ti] {
    margin: 0 0 12px;
    font-size: 1em;
}

/* The prompts card spans the full grid width — its textareas need the room. */
.ai-settings-card-wide[b-oz2x5tx5ti] {
    grid-column: 1 / -1;
}

.ai-settings-field[b-oz2x5tx5ti] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
    flex: 1;
}

.ai-settings-field label[b-oz2x5tx5ti] {
    font-size: .8em;
    opacity: .8;
}

.ai-settings-field-row[b-oz2x5tx5ti] {
    display: flex;
    gap: 12px;
}

.ai-settings-toggle[b-oz2x5tx5ti] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    cursor: pointer;
}
/* _content/Anouk.UI/Features/Automation/Pages/AutomationFlowChat.razor.rz.scp.css */
.automation-chat-layout[b-ukzu2pkfxr] {
    display: flex;
    gap: 1rem;
    height: calc(100vh - 220px);
    min-height: 0;
}

.automation-chat-pane[b-ukzu2pkfxr] {
    display: flex;
    flex-direction: column;
    flex: 1 1 50%;
    min-width: 0;
    border: 1px solid var(--kendo-color-border, #e0e0e0);
    border-radius: 4px;
}

.automation-chat-scroll[b-ukzu2pkfxr] {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.automation-chat-bubble[b-ukzu2pkfxr] {
    display: inline-block;
    max-width: 80%;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    color: #fff;
    white-space: pre-wrap;
    word-break: break-word;
}

.automation-chat-row-user[b-ukzu2pkfxr] {
    justify-content: flex-end;
}

.automation-chat-row-assistant[b-ukzu2pkfxr] {
    justify-content: flex-start;
}

.automation-chat-bubble-user[b-ukzu2pkfxr] {
    background: #2b5797;
}

.automation-chat-bubble-assistant[b-ukzu2pkfxr] {
    background: #2e7d32;
}

.automation-chat-bubble-error[b-ukzu2pkfxr] {
    background: #c0392b;
}

.automation-chat-composer[b-ukzu2pkfxr] {
    border-top: 1px solid var(--kendo-color-border, #e0e0e0);
}

.automation-chat-input[b-ukzu2pkfxr] {
    flex: 1 1 auto;
    min-height: 2.5rem;
    resize: vertical;
}

.automation-preview-pane[b-ukzu2pkfxr] {
    flex: 1 1 50%;
    overflow-y: auto;
    min-width: 0;
    border: 1px solid var(--kendo-color-border, #e0e0e0);
    border-radius: 4px;
}

.automation-raw-dsl[b-ukzu2pkfxr] {
    max-height: 300px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 900px) {
    .automation-chat-layout[b-ukzu2pkfxr] {
        flex-direction: column;
        height: auto;
    }

    .automation-chat-pane[b-ukzu2pkfxr],
    .automation-preview-pane[b-ukzu2pkfxr] {
        flex: 1 1 auto;
        min-height: 320px;
    }
}
/* _content/Anouk.UI/Features/Case/Calculation/Pages/CalculationDetails.razor.rz.scp.css */
.ubench-readonly-info[b-0ayn92i4bb] {
    color: var(--kendo-color-info, #31708f);
    background-color: transparent;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
}
/* _content/Anouk.UI/Features/Case/Calculation/Pages/CalculationOverview.razor.rz.scp.css */
.btn-white[b-qhs0z8aw2r] {
    background-color: white;
    width: 165px;
    height: 60px;
}

.bg-search[b-qhs0z8aw2r] {
    background-color: #d2d0ce !important;
}

.nav-tabs .nav-link.active[b-qhs0z8aw2r] {
    background-color: blue;
    color: white;
}


.nav-tabs .nav-link[b-qhs0z8aw2r] {
    background-color: white;
    color: black; 
}

.nav-tabs .nav-link[b-qhs0z8aw2r] {
    margin-right: 5px;
    transition: background-color 0.3s, color 0.3s;
}

@media (min-width: 1400px) {
    .w-xxl-100[b-qhs0z8aw2r] {
        width: 100%;
    }
}

.fe-grid-offer[b-qhs0z8aw2r] {
    min-height: 10rem;
    height: 10rem;
    overflow-y: auto;
    margin-bottom: 10px;
}

    .fe-grid-offer table[b-qhs0z8aw2r] {
        min-width: 100%;
    }

    .fe-grid-offer thead[b-qhs0z8aw2r] {
        position: sticky;
        top: 0;
        background-color: #d8d8d8;
        outline: 1px solid gray;
    }

.quickgrid > tbody > tr > td.grid-cell-placeholder[b-qhs0z8aw2r]:after {
    content: "\023F3";
}

.w-30[b-qhs0z8aw2r] {
    width: 30%;
}
/* _content/Anouk.UI/Features/Case/Clearing/Pages/CaseClearing.razor.rz.scp.css */
.clearing-metrics[b-nntaw87yh4] {
    flex-wrap: wrap;
}

.clearing-metric[b-nntaw87yh4] {
    border: 1px solid var(--kendo-color-border);
    border-radius: 4px;
    padding: 8px 16px;
    min-width: 140px;
    background: var(--kendo-color-surface-alt);
}

.clearing-metric-label[b-nntaw87yh4] {
    font-size: 12px;
    color: var(--kendo-color-subtle);
    text-transform: uppercase;
}

.clearing-metric-value[b-nntaw87yh4] {
    font-size: 20px;
    font-weight: 600;
    color: var(--kendo-color-on-base);
}

.clearing-cell-warn[b-nntaw87yh4] {
    background-color: var(--kendo-color-warning-subtle, #fff3cd);
    color: var(--kendo-color-on-warning-subtle, #856404);
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 600;
}

.clearing-badge[b-nntaw87yh4] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.clearing-badge-matched[b-nntaw87yh4] {
    background-color: var(--kendo-color-success-subtle, #d4edda);
    color: var(--kendo-color-on-success-subtle, #155724);
}

.clearing-badge-missing-right[b-nntaw87yh4],
.clearing-badge-missing-left[b-nntaw87yh4] {
    background-color: var(--kendo-color-error-subtle, #f8d7da);
    color: var(--kendo-color-on-error-subtle, #721c24);
}
/* _content/Anouk.UI/Features/Case/Components/CaseHitPickerMini.razor.rz.scp.css */
.hit-picker-mini[b-ei3zhlsubx] {
    width: 65%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Polygons use stroke="white" inline so they're visible on the dark theme;
   under the light theme that's invisible against the light background. */
[data-theme="light"] .hit-picker-mini polygon[b-ei3zhlsubx] {
    stroke: #333;
}
/* _content/Anouk.UI/Features/Case/Components/InformexClaimTabs.razor.rz.scp.css */
/* The List 09 text is fixed-width; same presentation as the superuser Informex preview. */
.case-informex-pre[b-l5yq6meves] {
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    line-height: 1.35;
    white-space: pre;
    overflow: auto;
    margin: 0;
    max-height: 70vh;
}

/* Label-above-value fields flow into as many columns as fit. */
.informex-grid[b-l5yq6meves] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    column-gap: 1rem;
}

.informex-table[b-l5yq6meves] {
    width: 100%;
}

.informex-num[b-l5yq6meves] {
    text-align: right;
}

.informex-lines[b-l5yq6meves] {
    margin: 0;
    padding-left: 1.25rem;
}

.informex-error[b-l5yq6meves] {
    color: var(--kendo-color-error);
}
/* _content/Anouk.UI/Features/Case/Components/Modals/AddNewVehicleContentsModal.razor.rz.scp.css */
.btn-danger[b-pmik337etb] {
    background-color: firebrick;
    color: white;
}

.box .modify[b-pmik337etb] {
    position: relative;
    background-color: rgb(118, 118, 118);
    width: 110px;
    height: 35px;
    border: 2px solid grey;
    border-radius: 30px;
}

    .box .modify a[b-pmik337etb] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(255, 255, 255, 0.05);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 30px;
        color: #fff !important;
        z-index: 1;
        font-weight: 400;
        letter-spacing: 1px;
        text-decoration: none;
        overflow: hidden;
        transition: 0.5s;
        backdrop-filter: blur(15px);
    }

    .box .modify:hover a[b-pmik337etb] {
        letter-spacing: 1px;
    }

    .box .modify a[b-pmik337etb]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 0%;
        height: 100%;
        background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent);
        transform: skewX(45deg) translateX(0);
    }

    .box .modify:hover a[b-pmik337etb]::before {
        width: 50%;
        transform: skewX(360deg) translateX(110%);
        transition: 1s;
    }

    .box .modify[b-pmik337etb]::before {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0px;
        width: 0px;
        height: 10px;
        background: #f00;
        border-radius: 10px;
        transition: 0.5s;
        transition-delay: 0s;
    }

    .box .modify:hover[b-pmik337etb]::before {
        bottom: 0;
        height: 50%;
        width: 80%;
        border-radius: 30%;
        transition-delay: 0.5s;
    }

    .box .modify[b-pmik337etb]::after {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 0px;
        width: 10%;
        height: 10px;
        border-radius: 0px;
        transition: 0.5s;
        transition-delay: 0s;
    }

    .box .modify:hover[b-pmik337etb]::after {
        top: 0;
        height: 50%;
        width: 80%;
        border-radius: 30%;
        transition-delay: 0.5s;
    }

    .box .modify[b-pmik337etb]::before,
    .box .modify[b-pmik337etb]::after {
        background: #848382;
    }

.widget-block[b-pmik337etb] {
    border: 1px solid #c2c2c2;
}
/* _content/Anouk.UI/Features/Case/Components/Tiles/CaseAdditionalInfoTile.razor.rz.scp.css */
.section-border[b-ru3qfh5qys] {
    border-bottom: 1px solid #444;
}
/* _content/Anouk.UI/Features/Case/Components/Tiles/CaseHitPickerTile.razor.rz.scp.css */
.image-map-container[b-kx23x3htoe] {
    background-color: transparent;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* SVG polygons are stroked white inline so they're visible on the dark theme.
   Under the light theme that washes out against the light background — override
   to a dark stroke so the vehicle outline stays visible. */
[data-theme="light"] .image-map polygon[b-kx23x3htoe] {
    stroke: #333;
}
/* _content/Anouk.UI/Features/Case/Components/Tiles/CaseSwitchesTile.razor.rz.scp.css */
.switch-label[b-8pzritay1p] {
    width: 72px;
}
/* _content/Anouk.UI/Features/Case/Components/Tiles/UBenchCaseTile.razor.rz.scp.css */
.ubench-tile-header[b-mfnxc06c7u] {
    margin-bottom: 0.5rem;
}

.ubench-service-owner[b-mfnxc06c7u] {
    color: var(--kendo-color-subtle, #6b7280);
    font-size: 0.85rem;
}

.ubench-tile-facts[b-mfnxc06c7u] {
    font-size: 0.9rem;
}

.ubench-tile-hint[b-mfnxc06c7u] {
    color: var(--kendo-color-warning, #f0ad4e);
    font-size: 0.85rem;
    margin-top: 0.25rem;
}
/* _content/Anouk.UI/Features/Case/Components/Tiles/UBenchCompareModal.razor.rz.scp.css */
/* One fixed grid for every compare row: checkbox | field | Anouk value | UBench value | state.
   Fixed column widths keep values and state badges stacked exactly under each other, whatever the
   field label length (the schedule rows used to drift right with their long labels). */
.compare-row[b-gnmgryg4sp] {
    display: grid;
    grid-template-columns: 24px 210px minmax(0, 1fr) minmax(0, 1fr) 132px;
    align-items: center;
    column-gap: 0.5rem;
}

.compare-field[b-gnmgryg4sp] {
    white-space: normal;
}

.compare-value[b-gnmgryg4sp] {
    overflow-wrap: anywhere;
}

/* Every state badge the same width, centred, right-aligned in its column. */
.compare-state[b-gnmgryg4sp] {
    justify-self: end;
    width: 124px;
}

.compare-state[b-gnmgryg4sp]  .k-badge {
    width: 100%;
    justify-content: center;
    height: 26px;
    font-size: 0.85rem;
}
/* _content/Anouk.UI/Features/Case/Expert/Pages/ExpertDetails.razor.rz.scp.css */
.tile-settings-overlay[b-mni960mr7m] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}

.tile-settings-panel[b-mni960mr7m] {
    position: fixed;
    top: 56px;
    right: 16px;
    z-index: 1000;
    background: var(--kendo-color-surface-alt, #1e1e1e);
    border: 1px solid var(--kendo-color-border, #424242);
    border-radius: 4px;
    padding: 16px;
    min-width: 240px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.expert-selector[b-mni960mr7m] {
    padding: 0 4px;
}
/* _content/Anouk.UI/Features/Case/Insurance/Components/InsuranceAttachmentsList.razor.rz.scp.css */
.attachment-list[b-0z49zs7p4t] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 8rem;
    overflow-y: auto;
}

.attachment-row[b-0z49zs7p4t] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.125rem 0;
}

.attachment-name[b-0z49zs7p4t] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-time[b-0z49zs7p4t] {
    flex: none;
    opacity: 0.7;
}

.attachment-empty[b-0z49zs7p4t] {
    opacity: 0.7;
}
/* _content/Anouk.UI/Features/Case/Insurance/Pages/InsuranceDetails.razor.rz.scp.css */
.tile-settings-overlay[b-qswkiruysf] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}

.tile-settings-panel[b-qswkiruysf] {
    position: fixed;
    top: 56px;
    right: 16px;
    z-index: 1000;
    background: var(--kendo-color-surface-alt, #1e1e1e);
    border: 1px solid var(--kendo-color-border, #424242);
    border-radius: 4px;
    padding: 16px;
    min-width: 240px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* _content/Anouk.UI/Features/Case/Pages/CaseDetails.razor.rz.scp.css */
.car-icon-container[b-mzy5uytklb] {
    width: 32px;
}

.vehicle-title[b-mzy5uytklb] {
    margin-bottom: 7px;
}

.tile-settings-overlay[b-mzy5uytklb] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}

.tile-settings-panel[b-mzy5uytklb] {
    position: fixed;
    top: 56px;
    right: 16px;
    z-index: 1000;
    background: var(--kendo-color-surface-alt, #1e1e1e);
    border: 1px solid var(--kendo-color-border, #424242);
    border-radius: 4px;
    padding: 16px;
    min-width: 240px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ── Tablet-compact stacked tiles (design §3) ─────────────────────────────
   Only ever rendered when IViewportService.IsCompact is true (≤900px — see
   the "Tablet-compact breakpoint" comment in app.css). Landscape keeps the
   TelerikTileLayout branch above untouched. Visibility (_visibleTiles) is
   shared with the TileLayout branch; drag/resize/reorder simply don't apply
   here — there is no grid to drag within. */
.tile-stack[b-mzy5uytklb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Overrides the TelerikTileLayout row-height assumption baked into
   .tile-rows (see style-guide.md §6, --tile-row-height/--tile-row-gap) —
   in the stack each card's height is content-driven, not a fixed row grid. */
.tile-stack-item.tile-rows[b-mzy5uytklb] {
    height: auto;
    min-height: 0;
}

.tile-stack-item-header[b-mzy5uytklb] {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--rule, rgba(255, 255, 255, 0.08));
}

.tile-stack-item-body[b-mzy5uytklb] {
    padding: var(--space-3);
}

/* CaseHitPickerTile's vehicle-outline SVG (.image-map) sizes to height:100% of
   its parent, which is meaningless once the parent is content-driven (see
   .tile-stack-item.tile-rows above) — without a floor it collapses to ~0px.
   360px keeps the outline usable full-width on a portrait tablet, roughly
   matching the 18x11 grid span (11 rows * 44px) it gets in the TileLayout. */
.tile-stack-item-body:has(.image-map)[b-mzy5uytklb] {
    min-height: 360px;
}
/* _content/Anouk.UI/Features/Case/Pages/CaseUBenchDetail.razor.rz.scp.css */
/* The dossier layout's content wrapper has a definite height (calc(100vh - 170px), same bottom edge as the
   left drawer). Filling it lets the embedded UBench panel reach the bottom; taller content grows past it
   and the page scrolls as before. */
.case-ubench-fill[b-i6mu338lx2] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
/* _content/Anouk.UI/Features/Case/Picture/Pages/PictureOverview.razor.rz.scp.css */
.casecard img[b-00odpwioeb] {
    width: 100%;
    height: 200px;
    object-fit: cover; 
    object-position: center; 
    display: block;
}

.casecard[b-00odpwioeb] {
    height: 300px;
    overflow: hidden;
    position: relative;
    background-color: transparent;
}

.casecard[b-00odpwioeb] {
    width: 300px;
    height: auto;
}

casecard2[b-00odpwioeb] {
    width: 300px;
    height: auto;
    margin: 0 auto;
    cursor: pointer;
}

.style[b-00odpwioeb] {
    width: 300px;
}

.style2[b-00odpwioeb] {
    width: 300px;
    margin-left: 20px;
}

.elipsis[b-00odpwioeb] {
    text-overflow: ellipsis;
}

.scroll-container[b-00odpwioeb] {
    width: 100%;
    height: 300px;
    overflow-y: scroll; 
    border: 1px solid #ccc;  
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
}

.list-unstyled[b-00odpwioeb] {
    padding-left: 0;
    list-style: none;
}

.dash-icon[b-00odpwioeb] {
    display: inline-flex; 
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px; 
    background-color: firebrick; 
    border-radius: 50%; 
    color: white; 
    font-size: 16px; 
    font-weight: bolder; 
    line-height: 1;
    cursor: pointer;
}

    .dash-icon[b-00odpwioeb]::before {
        content: '-'; 
        display: inline-block; 
        transform: translateY(-1px);
    }

.scroll-content[b-00odpwioeb] {
    height: 250px;
    max-height: 250px;
    overflow-y: auto;
    font-size: 16px;
}

.big-plus[b-00odpwioeb] {
    font-size: 4rem;
    font-weight: 900;
    color: #A7C836;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 60px;
}

.bg-color[b-00odpwioeb] {
    background-color: #CCC;
}

.casecard img[b-00odpwioeb] {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
    display: block;
}

@media (max-width: 600px) {
    .casecard img[b-00odpwioeb] {
        width: 200px; 
        height: auto; 
        margin: 0 auto;
    }

    .casecard[b-00odpwioeb],
    .casecard2[b-00odpwioeb],
    .style[b-00odpwioeb] {
        width: 200px; 
        height: auto;
        margin: 0 auto; 
    }

    .style2[b-00odpwioeb] {
        width: 0px;
    }
}

.bi-camera2[b-00odpwioeb] {
    font-size: 2rem;
}

.zoom-image[b-00odpwioeb] {
    transition: transform 0.3s ease;
    cursor: zoom-in;
}

.zoom-image:hover[b-00odpwioeb] {
    transform: scale(1.5);
    z-index: 10;
    position: relative;
}
/* _content/Anouk.UI/Features/Chat/ChatWidget.razor.rz.scp.css */
/* Small reusable layout utilities shared by several rows/columns below. */
.chat-grow[b-krf4xnra5l] {
    flex: 1;
}

.chat-shrink-0[b-krf4xnra5l] {
    flex: 0 0 auto;
}

.chat-truncate[b-krf4xnra5l] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-text-sm[b-krf4xnra5l] {
    font-size: .8em;
}

/* Presence status dot (launcher, people list, conversation list). Color is set inline — it is
   computed at runtime via StatusColor(). */
.chat-status-dot[b-krf4xnra5l] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* New-message toast (bottom-right). */
.chat-toast-row[b-krf4xnra5l] {
    cursor: pointer;
    max-width: 340px;
    align-items: flex-start;
}

.chat-toast-text[b-krf4xnra5l] {
    flex: 1;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Panel shell. Width/height cap to the viewport so the composer stays visible on small phones
   (dvh line wins where supported and tracks the browser chrome; vh line is the fallback). */
.chat-panel[b-krf4xnra5l] {
    position: fixed;
    right: 16px;
    bottom: 48px;
    z-index: 1100;
    width: min(360px, calc(100vw - 24px));
    height: min(480px, calc(100vh - 120px));
    height: min(480px, calc(100dvh - 120px));
    display: flex;
    flex-direction: column;
    background: var(--kendo-color-surface-alt, #1e1e1e);
    border: 1px solid var(--kendo-color-border, #424242);
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .4);
    overflow: hidden;
}

.chat-panel-header[b-krf4xnra5l] {
    border-bottom: 1px solid var(--kendo-color-border, #424242);
}

.chat-error-banner[b-krf4xnra5l] {
    background: #5a1d1d;
    color: #fff;
    font-size: .8em;
    word-break: break-word;
}

/* Body scroll container. .chat-scroll is also a JS querySelector hook (wwwroot/js/chat-presence.js). */
.chat-scroll[b-krf4xnra5l] {
    flex: 1;
    overflow-y: auto;
}

.chat-typing-indicator[b-krf4xnra5l] {
    font-size: .8em;
    font-style: italic;
}

/* Message bubbles. Bubble background is set inline — it depends on whether the message is mine. */
.chat-message-bubble[b-krf4xnra5l] {
    max-width: 75%;
    padding: 6px 10px;
    border-radius: 8px;
    color: #fff;
}

.chat-message-sender[b-krf4xnra5l] {
    font-size: .7em;
    opacity: .7;
}

.chat-message-body[b-krf4xnra5l] {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Assistant markdown bubbles: compact typography for the sanitized HTML the renderer emits.
   ::deep is required — the elements come from a MarkupString, so they carry no CSS scope. */
.chat-message-markdown[b-krf4xnra5l] {
    white-space: normal;
}

.chat-message-markdown[b-krf4xnra5l]  p {
    margin: 0 0 6px;
}

.chat-message-markdown[b-krf4xnra5l]  p:last-child {
    margin-bottom: 0;
}

.chat-message-markdown[b-krf4xnra5l]  h1,
.chat-message-markdown[b-krf4xnra5l]  h2,
.chat-message-markdown[b-krf4xnra5l]  h3,
.chat-message-markdown[b-krf4xnra5l]  h4,
.chat-message-markdown[b-krf4xnra5l]  h5,
.chat-message-markdown[b-krf4xnra5l]  h6 {
    font-size: 1em;
    font-weight: 700;
    margin: 8px 0 4px;
}

.chat-message-markdown[b-krf4xnra5l]  ul,
.chat-message-markdown[b-krf4xnra5l]  ol {
    margin: 4px 0 6px;
    padding-left: 18px;
}

.chat-message-markdown[b-krf4xnra5l]  li {
    margin: 2px 0;
}

.chat-message-markdown[b-krf4xnra5l]  hr {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .25);
    margin: 8px 0;
}

.chat-message-markdown[b-krf4xnra5l]  code {
    background: rgba(0, 0, 0, .25);
    padding: 0 4px;
    border-radius: 3px;
    font-size: .85em;
}

.chat-message-markdown[b-krf4xnra5l]  pre {
    background: rgba(0, 0, 0, .25);
    padding: 6px 8px;
    border-radius: 4px;
    overflow-x: auto;
}

.chat-message-markdown[b-krf4xnra5l]  table {
    border-collapse: collapse;
    margin: 6px 0;
}

.chat-message-markdown[b-krf4xnra5l]  th,
.chat-message-markdown[b-krf4xnra5l]  td {
    border: 1px solid rgba(255, 255, 255, .25);
    padding: 2px 6px;
}

/* Anchors inside the MarkupString carry no CSS scope either, so the scoped
   .chat-message-link rule below never reaches them — restate it via ::deep,
   underlined so users see the link is clickable. */
.chat-message-markdown[b-krf4xnra5l]  a.chat-message-link {
    color: #cfe2ff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-all;
}

.chat-message-link[b-krf4xnra5l] {
    color: #cfe2ff;
    text-decoration: underline;
    word-break: break-all;
}

.chat-message-time[b-krf4xnra5l] {
    font-size: .65em;
    opacity: .6;
    text-align: right;
    margin-top: 2px;
}

/* "Tools used" muted line under an assistant answer bubble (assistant thread only). */
.chat-assistant-tools-used[b-krf4xnra5l] {
    font-size: .7em;
    opacity: .75;
    margin-top: 2px;
}

/* Pinned "Anouk" entry above the conversation list — the tinted row keeps it visually distinct
   from human colleagues; the presence dot itself matches theirs (always "online"). */
.chat-assistant-pinned[b-krf4xnra5l] {
    cursor: pointer;
    border-radius: 4px;
    background: rgba(99, 91, 255, .15);
}

/* People / conversation list rows. */
.chat-list-item[b-krf4xnra5l] {
    cursor: pointer;
    border-radius: 4px;
}

.chat-status-text[b-krf4xnra5l] {
    font-size: .75em;
}

.chat-select-row[b-krf4xnra5l] {
    cursor: pointer;
}

.chat-list-item-icon[b-krf4xnra5l] {
    flex: 0 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-conversation-col[b-krf4xnra5l] {
    flex: 1;
    overflow: hidden;
}

.chat-conversation-time[b-krf4xnra5l] {
    font-size: .7em;
    white-space: nowrap;
}

/* Composer footer. .chat-composer / .chat-composer-input are also JS hooks (chat-presence.js);
   theme colors for .chat-composer-input live in wwwroot/app.css. */
.chat-border-top[b-krf4xnra5l] {
    border-top: 1px solid var(--kendo-color-border, #424242);
}

.chat-composer-input[b-krf4xnra5l] {
    flex: 1;
    resize: none;
    padding: 6px 10px;
    border-radius: 4px;
    line-height: 1.3;
    font: inherit;
    outline: none;
}
/* _content/Anouk.UI/Features/Common/PriorityIcon.razor.rz.scp.css */
.priority-icon[b-n9d93lcuou] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
}

/* Low importance — blue downward arrow (Outlook). */
.priority-icon--low[b-n9d93lcuou] {
    color: #2F80C4;
}

/* High importance — bold red exclamation (Outlook). */
.priority-icon--high[b-n9d93lcuou] {
    color: #D32F2F;
    font-weight: 800;
    font-size: 1rem;
    min-width: 10px;
}

/* VIP — small filled badge. */
.priority-icon--vip[b-n9d93lcuou] {
    background: #C9A227;
    color: #1a1a1a;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0 4px;
    border-radius: 3px;
    line-height: 1.5;
}
/* _content/Anouk.UI/Features/Common/RepairSizeFlag.razor.rz.scp.css */
.size-flag[b-npd1jj4o4f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
}

/* Medium repair — orange flag. */
.size-flag--medium[b-npd1jj4o4f] {
    color: #E8912A;
}

/* Large repair — red flag. */
.size-flag--large[b-npd1jj4o4f] {
    color: #D32F2F;
}
/* _content/Anouk.UI/Features/Common/ViewNotFound.razor.rz.scp.css */
.hero-background[b-adi0rae28b] {
    background-image: url('/_content/Anouk.UI/assets/images/hero-bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
}

.min-height-container[b-adi0rae28b] {
    min-height: 700px;
}

.description-text[b-adi0rae28b] {
    max-width: 500px;
}
/* _content/Anouk.UI/Features/CourtesyCar/Pages/CourtesyCarDetails.razor.rz.scp.css */
.buttonSearch[b-zkl83w9w6b] {
    color: white;
    background-color: rgb(175, 175, 175);
    padding: 3px 7px;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .buttonSearch:active[b-zkl83w9w6b] {
        transform: translateY(3px);
        background-color: rgb(150, 148, 148);
        color: white;
    }

    .buttonSearch:hover[b-zkl83w9w6b] {
        background-color: rgb(150, 148, 148);
        color: white;
    }

.fixed-bottom[b-zkl83w9w6b] {
    position: fixed;
    bottom: 0;
    width: 100%;
}

.input-container2[b-zkl83w9w6b] {
    max-width: 100px;
}

.input-container[b-zkl83w9w6b] {
    max-width: 240px;
}

.box[b-zkl83w9w6b] {
    height: 80px;
}

.background[b-zkl83w9w6b] {
    background-color: #d2d0ce;
}

.box-2[b-zkl83w9w6b] {
    max-height: 150px;
    overflow-y: auto;
    overflow-x: hidden
}

.padding[b-zkl83w9w6b] {
    padding: 150px 0;
}

.mt[b-zkl83w9w6b] {
    margin-top: 5px;
}

.background[b-zkl83w9w6b] {
    background-color: #d2d0ce;
}

.btnTypeAdd[b-zkl83w9w6b] {
    width: 110px;
    color: white;
    background-color: #784d35;
    padding: 6px 0;
    border-radius: 5px;
}

    .btnTypeAdd:hover[b-zkl83w9w6b] {
        color: white;
        outline: none;
        background-color: #9d694c;
    }
            
    .btnTypeAdd:focus[b-zkl83w9w6b] {
        outline: none;
        box-shadow: 0 0 5px black;
    }

.btn-type-cancel[b-zkl83w9w6b] {
    width: 110px;
    background-color: #6c757d;
    color: white;
    padding: 6px 0;
    border-radius: 5px;
}

.three-column-grid[b-zkl83w9w6b] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    width: 100%;
}

.form-field[b-zkl83w9w6b] {
    display: flex;
    flex-direction: column;
}

    .form-field label[b-zkl83w9w6b] {
        margin-bottom: 0.25rem;
        font-weight: 500;
    }
/* _content/Anouk.UI/Features/CourtesyCar/Pages/CourtesyCarHistory.razor.rz.scp.css */
.buttonSearch[b-17gjd0e2rb] {
    color: white;
    background-color: rgb(175, 175, 175);
    padding: 7px 7px;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .buttonSearch:active[b-17gjd0e2rb] {
        transform: translateY(3px);
        background-color: rgb(150, 148, 148);
        color: #029ebd;
    }

    .buttonSearch:hover[b-17gjd0e2rb] {
        background-color: rgb(150, 148, 148);
        color: #029ebd;
    }

.btn.dropdown-toggle[b-17gjd0e2rb] {
    height: 30px !important;
    line-height: 30px !important;
    padding: 0;
    border-radius: 5px;
}

.background[b-17gjd0e2rb] {
    background-color: #d2d0ce;
}
/* _content/Anouk.UI/Features/CourtesyCar/Pages/CourtesyCarOverview.razor.rz.scp.css */
.dropdown-menu-scrollable[b-fdugb7v8hz] {
    max-height: 200px;
    overflow-y: auto;
}

.buttonSearch[b-fdugb7v8hz] {
    color: white;
    background-color: rgb(175, 175, 175);
    padding: 7px 7px;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .buttonSearch:active[b-fdugb7v8hz] {
        transform: translateY(3px);
        background-color: rgb(150, 148, 148);
        color: white;
    }

    .buttonSearch:hover[b-fdugb7v8hz] {
        background-color: rgb(150, 148, 148);
        color: white;
    }

.btn.dropdown-toggle[b-fdugb7v8hz] {
    height: 30px !important;
    line-height: 30px !important;
    padding: 0; 
    border-radius: 5px;
}

.background[b-fdugb7v8hz] {
    background-color: #d2d0ce;
}

.btnTypeAdd[b-fdugb7v8hz] {
    width: 110px;
    color: white !important;
    background-color: #784d35;
}

    .btnTypeAdd:hover[b-fdugb7v8hz] {
        color: white;
        outline: none;
        background-color: #9d694c;
    }

    .btnTypeAdd:focus[b-fdugb7v8hz] {
        outline: none;
        box-shadow: 0 0 5px black;
    }

.btnTypeEdit[b-fdugb7v8hz] {
    width: 110px;
    color: white !important;
    background-color: #784d35;
}

    .btnTypeEdit:hover[b-fdugb7v8hz] {
        color: white;
        outline: none;
        background-color: #9d694c;
    }

    .btnTypeEdit:focus[b-fdugb7v8hz] {
        outline: none;
        box-shadow: 0 0 5px black;
    }

.btnDelete[b-fdugb7v8hz] {
    width: 110px;
    margin-right: 5px !important;
}

.btn-type-cancel[b-fdugb7v8hz] {
    width: 110px !important;
}
/* _content/Anouk.UI/Features/CourtesyCar/Pages/CourtesyCarReservationOverview.razor.rz.scp.css */
/* ── Dark theme variables (matching Anouk system) ── */

/* ── Filter bar warning ── */
[b-juz6476vkl] .warning-banner {
    background: rgba(255, 193, 7, 0.12);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 4px;
    color: #f0c040;
}

[b-juz6476vkl] .warning-banner strong {
    color: #f0c040;
}

[b-juz6476vkl] .warning-banner a {
    color: #f0c040;
    text-decoration: underline;
}

/* ── Grid table ── */
[b-juz6476vkl] #tbl_planning {
    border-collapse: collapse;
    table-layout: fixed;
}

[b-juz6476vkl] #tbl_planning thead tr {
    background: #1B1A19;
}

[b-juz6476vkl] #tbl_planning th {
    padding: 4px 6px;
    text-align: center;
    border: 1px solid #333;
    font-size: 0.7rem;
    color: #dddddd;
}

[b-juz6476vkl] #tbl_planning th:first-child {
    text-align: left;
}

/* ── Car info cell ── */
[b-juz6476vkl] #tbl_planning td.car-info-cell {
    padding: 2px 6px;
    border: 1px solid #333;
    font-size: 0.7rem;
    line-height: 1.2;
    vertical-align: middle;
    background: #1B1A19;
    color: #dddddd;
}

[b-juz6476vkl] .car-info-cell .car-number {
    font-weight: 600;
    color: #dddddd;
}

[b-juz6476vkl] .car-info-cell a {
    color: #aad373;
    text-decoration: none;
    font-size: 0.65rem;
}

[b-juz6476vkl] .car-info-cell a:hover {
    text-decoration: underline;
}

[b-juz6476vkl] .car-info-cell .car-brand {
    font-size: 0.65rem;
    color: #999;
}

/* ── Hour cells ── */
[b-juz6476vkl] .hour-cell {
    border-top: 1px solid #333 !important;
    border-bottom: 1px solid #333 !important;
    padding: 0;
}

[b-juz6476vkl] .hour-cell-boundary {
    background: #1a1a1a;
}

[b-juz6476vkl] .hour-cell-noon {
    background: #2a2a1e;
}

[b-juz6476vkl] .hour-cell-normal {
    background: #1e2e1e;
}

[b-juz6476vkl] .hour-cell-day-start {
    border-left: 1px solid #444 !important;
}

/* ── Usage bars in header ── */
[b-juz6476vkl] .usage-bar-container {
    display: flex;
    gap: 1px;
    height: 20px;
    justify-content: center;
}

[b-juz6476vkl] .usage-bar {
    width: 8px;
    border-radius: 2px;
}

/* ── Column label "PREVIOUS" ── */
[b-juz6476vkl] .previous-label {
    font-size: 0.65rem;
    color: #777;
    text-transform: uppercase;
}

/* ── Reservation overlays ── */
[b-juz6476vkl] .res-overlay span {
    background: rgba(0, 0, 0, 0.6) !important;
    color: #eee !important;
    padding: 1px 3px;
    font-size: 0.6rem;
    display: inline-block;
    max-width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 2px 4px;
    float: left;
}

[b-juz6476vkl] .res-overlay .case-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #d4a017;
    border-radius: 2px;
    margin-right: 3px;
    vertical-align: middle;
}

/* ── Popover ── */
[b-juz6476vkl] #cc-popover {
    background: #292929 !important;
    border: 1px solid #444 !important;
    color: #dddddd !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5) !important;
    font-size: 0.75rem;
    max-width: 400px;
    pointer-events: auto;
}

/* ── No data row ── */
[b-juz6476vkl] .no-data-cell {
    text-align: center;
    padding: 20px;
    color: #999;
    background: #1B1A19;
}
/* _content/Anouk.UI/Features/CourtesyCar/Pages/CourtesyCarStatusOverview.razor.rz.scp.css */
.dropdown-menu-scrollable[b-i9n1xyjf81] {
    max-height: 200px;
    overflow-y: auto;
}

.buttonSearch[b-i9n1xyjf81] {
    color: white;
    background-color: rgb(175, 175, 175);
    padding: 7px 7px;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .buttonSearch:active[b-i9n1xyjf81] {
        transform: translateY(3px);
        background-color: rgb(150, 148, 148);
        color: #029ebd;
    }

    .buttonSearch:hover[b-i9n1xyjf81] {
        background-color: rgb(150, 148, 148);
        color: #029ebd;
    }

.border-radius[b-i9n1xyjf81] {
    border-radius: 5px;
}

.btn.dropdown-toggle[b-i9n1xyjf81] {
    height: 30px !important;
    line-height: 30px !important;
    padding: 0;
    border-radius: 5px;
}

.background[b-i9n1xyjf81] {
    background-color: #d2d0ce;
}

.btnTypeAdd[b-i9n1xyjf81] {
    width: 110px;
    color: white !important;
    background-color: #784d35;
}

    .btnTypeAdd:hover[b-i9n1xyjf81] {
        color: white;
        outline: none;
        background-color: #9d694c;
    }

    .btnTypeAdd:focus[b-i9n1xyjf81] {
        outline: none;
        box-shadow: 0 0 5px black;
    }

.btnTypeEdit[b-i9n1xyjf81] {
    width: 110px;
    color: white !important;
    background-color: #784d35;
}

    .btnTypeEdit:hover[b-i9n1xyjf81] {
        color: white;
        outline: none;
        background-color: #9d694c;
    }

    .btnTypeEdit:focus[b-i9n1xyjf81] {
        outline: none;
        box-shadow: 0 0 5px black;
    }

.btnDelete[b-i9n1xyjf81] {
    width: 110px;
    margin-right: 5px !important;
}

.btn-type-cancel[b-i9n1xyjf81] {
    width: 110px !important;
}

.height[b-i9n1xyjf81] {
    height: 30px !important;
}

.mt-8p[b-i9n1xyjf81] {
    margin-top: 8px;
}
/* _content/Anouk.UI/Features/Dossiers/Calculation/Pages/CalculationOverview.razor.rz.scp.css */
[b-sogr4jxfba] .text-right,
[b-sogr4jxfba] .text-right .k-link,
[b-sogr4jxfba] .text-right .k-cell-inner,
[b-sogr4jxfba] .text-right .k-column-title {
    text-align: right;
    justify-content: flex-end;
}
/* _content/Anouk.UI/Features/Dossiers/Clearing/Pages/Clearing.razor.rz.scp.css */
.clearing-metrics[b-ut5kww2iur] {
    flex-wrap: wrap;
}

.clearing-metric[b-ut5kww2iur] {
    border: 1px solid var(--kendo-color-border);
    border-radius: 4px;
    padding: 8px 16px;
    min-width: 140px;
    background: var(--kendo-color-surface-alt);
}

.clearing-metric-label[b-ut5kww2iur] {
    font-size: 12px;
    color: var(--kendo-color-subtle);
    text-transform: uppercase;
}

.clearing-metric-value[b-ut5kww2iur] {
    font-size: 20px;
    font-weight: 600;
    color: var(--kendo-color-on-base);
}

.clearing-cell-warn[b-ut5kww2iur] {
    background-color: var(--kendo-color-warning-subtle, #fff3cd);
    color: var(--kendo-color-on-warning-subtle, #856404);
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 600;
}

.clearing-badge[b-ut5kww2iur] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.clearing-badge-matched[b-ut5kww2iur] {
    background-color: var(--kendo-color-success-subtle, #d4edda);
    color: var(--kendo-color-on-success-subtle, #155724);
}

.clearing-badge-missing-right[b-ut5kww2iur],
.clearing-badge-missing-left[b-ut5kww2iur] {
    background-color: var(--kendo-color-error-subtle, #f8d7da);
    color: var(--kendo-color-on-error-subtle, #721c24);
}
/* _content/Anouk.UI/Features/Dossiers/Communication/Components/ComposeCommunicationModal.razor.rz.scp.css */
/* Email-address autocomplete suggestion popup.
   Single-line items with ellipsis kill the horizontal scrollbar caused by
   long "name, phone, email" strings overflowing the input's column width.
   Scrollbars on the popup container are hidden visually but the popup is
   still scrollable via wheel / keyboard. */

.compose-suggestions[b-73n608rty5] {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;
    background: var(--kendo-color-surface);
    border: 1px solid var(--kendo-color-border);
    border-radius: 4px;
    min-width: 100%;
    width: max-content;
    max-width: min(500px, 90vw);
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: none;
}

.compose-suggestions[b-73n608rty5]::-webkit-scrollbar {
    display: none;
}

.compose-suggestion-item[b-73n608rty5] {
    cursor: pointer;
    padding: 4px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* _content/Anouk.UI/Features/Dossiers/Communication/Pages/CommunicationOverview.razor.rz.scp.css */
.communication-layout[b-qvoyd73oj4] {
    display: grid;
    width: 100%;
    height: calc(100vh - 190px);
    gap: .5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

.communication-layout--default[b-qvoyd73oj4] {
    grid-template-rows: 1.1fr 0.9fr;
    grid-template-areas:
        "communications communications"
        "documents todos";
}

.communication-layout--communications-focused[b-qvoyd73oj4] {
    grid-template-areas:
        "todos communications"
        "documents communications";
}

.communication-layout--documents-focused[b-qvoyd73oj4] {
    grid-template-areas:
        "communications documents"
        "todos documents";
}

.communication-layout--todos-focused[b-qvoyd73oj4] {
    grid-template-areas:
        "communications todos"
        "documents todos";
}

.communication-layout.communication-layout--stacked[b-qvoyd73oj4] {
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
        "communications"
        "documents"
        "todos";
}

.communication-slot[b-qvoyd73oj4] {
    min-width: 0;
    min-height: 0;
}

.communication-slot[b-qvoyd73oj4] >  div {
    height: 100%;
}

.communication-slot[b-qvoyd73oj4]  .k-grid {
    flex: 1 1 auto;
    min-height: 0;
}

.communication-slot--communications[b-qvoyd73oj4] {
    grid-area: communications;
}

.communication-slot--documents[b-qvoyd73oj4] {
    grid-area: documents;
}

.communication-slot--todos[b-qvoyd73oj4] {
    grid-area: todos;
}
/* _content/Anouk.UI/Features/Dossiers/Components/DossierTimeline.razor.rz.scp.css */
.timeline-layout[b-06tvdpniul] {
    align-items: flex-start;
}

.timeline-stepper[b-06tvdpniul] {
    flex: 1 1 50%;
    min-width: 0;
    overflow-y: auto;
    max-height: calc(100vh - 202px);
}

.timeline-step-label[b-06tvdpniul] {
    white-space: normal;
    word-break: break-word;
    display: inline-block;
    max-width: none;
}

.timeline-stepper[b-06tvdpniul]  .k-step {
    max-width: none;
}

.timeline-stepper[b-06tvdpniul]  .k-step-label {
    max-width: none;
    white-space: normal;
}

.timeline-stepper[b-06tvdpniul]  .k-step-label-text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
    max-width: none;
}

.timeline-detail[b-06tvdpniul] {
    flex: 1 1 50%;
    min-width: 0;
    min-height: 160px;
    max-height: calc(100vh - 280px);
    overflow-y: auto;
}

.event-kind-badge[b-06tvdpniul] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.event-kind-audit[b-06tvdpniul] {
    background-color: var(--kendo-color-warning-subtle, #fff3cd);
    color: var(--kendo-color-warning-on-subtle, #664d03);
}

.event-kind-communication[b-06tvdpniul] {
    background-color: var(--kendo-color-primary-subtle, #cfe2ff);
    color: var(--kendo-color-primary-on-subtle, #084298);
}

.event-kind-document[b-06tvdpniul] {
    background-color: var(--kendo-color-success-subtle, #d1e7dd);
    color: var(--kendo-color-success-on-subtle, #0a3622);
}

.timeline-detail-body[b-06tvdpniul] {
    border-left: 3px solid var(--kendo-color-border, #dee2e6);
    padding-left: 12px;
}

.detail-line[b-06tvdpniul] {
    padding: 2px 0;
    word-break: break-word;
}
/* _content/Anouk.UI/Features/Dossiers/Components/SignReportModal.razor.rz.scp.css */
.sign-report-layout[b-sxune8a7i5] {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 8px;
    /* Anchor the "generating report" TelerikLoaderContainer overlay to the dialog body. */
    position: relative;
}

.sign-report-preview[b-sxune8a7i5] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--kendo-color-border, #d9d9d9);
    background: #ffffff;
}

/* Reserves the SCALED footprint (set by signOverlay.js) so the scrollbar matches what's shown
   after the fit-to-width transform. */
.sign-report-sizer[b-sxune8a7i5] {
    position: relative;
}

/* Wrapper holds the iframe + overlay at the document's intrinsic size; signOverlay.js applies a
   transform: scale(...) to fit the modal width. */
.sign-report-canvas-wrap[b-sxune8a7i5] {
    position: relative;
}

.sign-report-frame[b-sxune8a7i5] {
    display: block;
    border: none;
    /* width/height set by signOverlay.js to the measured document size */
}

/* Transparent drawing surface on top of the report. touch-action:none makes a finger/pen
   drag paint instead of panning — the document scrolls only via .sign-report-preview's scrollbar. */
.sign-report-overlay[b-sxune8a7i5] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    touch-action: none;
    cursor: crosshair;
}

.sign-report-hint[b-sxune8a7i5] {
    align-self: center;
    color: var(--kendo-color-subtle, #666666);
    font-size: 12px;
}

.sign-report-loading[b-sxune8a7i5] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--kendo-color-subtle, #666666);
}

.sign-report-error[b-sxune8a7i5] {
    flex: 0 0 auto;
    padding: 8px 12px;
    background: var(--kendo-color-error-bg, #fdecea);
    color: var(--kendo-color-error, #b71c1c);
    border-radius: 4px;
}

.sign-report-strip[b-sxune8a7i5] {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--kendo-color-border, #d9d9d9);
}

.sign-report-field[b-sxune8a7i5] {
    display: flex;
    flex-direction: column;
}

.sign-report-signature[b-sxune8a7i5] {
    flex: 1 1 320px;
    min-width: 280px;
}

.sign-report-actions[b-sxune8a7i5] {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

@media (orientation: portrait) {
    .sign-report-strip[b-sxune8a7i5] {
        flex-direction: column;
        align-items: stretch;
    }

    .sign-report-actions[b-sxune8a7i5] {
        margin-left: 0;
        justify-content: flex-end;
    }
}
/* _content/Anouk.UI/Features/Dossiers/Components/Tiles/DossierActivityTile.razor.rz.scp.css */
.activity-tile-list[b-rfhmmm9q59] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    align-content: start;
}

.activity-name[b-rfhmmm9q59] {
    overflow: hidden;
    min-width: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.activity-dates[b-rfhmmm9q59] {
    font-size: 0.78em;
    opacity: 0.8;
}

.activity-total[b-rfhmmm9q59] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 6px;
    margin-top: auto;
    font-size: 0.9em;
}

.activity-total__label[b-rfhmmm9q59] {
    opacity: 0.7;
}

.activity-total__value[b-rfhmmm9q59] {
    font-size: 1em;
}
/* _content/Anouk.UI/Features/Dossiers/Components/Tiles/DossierCasesTile.razor.rz.scp.css */
.caseItem-sub-panel[b-diytcab1rz] {
    width: 220px;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 8px;
    /* Green default border: an uncoloured card is a to-do / in-progress case (green). The
       .accent-red (no repair) / .accent-blue (invoiced, warranty, goodwill) classes override it. */
    border-left: 3px solid var(--kendo-color-primary);
    border-radius: 0;
    cursor: pointer;
    min-height: 196px;
}

.accent-red[b-diytcab1rz] {
    border-left-color: var(--kendo-color-tertiary, #ff3c00);
}

.accent-blue[b-diytcab1rz] {
    border-left-color: var(--kendo-color-secondary, #4899cd);
}

.case-remarks[b-diytcab1rz] {
    font-size: 0.75rem;
    color: #999;
    margin-top: 4px;
}

.cases-scroll-container[b-diytcab1rz] {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 100%;
}

/* Wrapper around each case card so the floating attachment button can be positioned */
.caseItem-sub-panel-wrapper[b-diytcab1rz] {
    position: relative;
    margin-right: 4px;
    vertical-align: top;
}

/* Floating paperclip button on the top-right of a case card.
   Sits above the anchor so its click doesn't bubble to the navigation link. */
.case-attachment-button[b-diytcab1rz] {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
}
/* _content/Anouk.UI/Features/Dossiers/Components/Tiles/DossierContactsTile.razor.rz.scp.css */
/* eID-UI-improvements #677: the "read with eID" indicator next to a relation. Telerik SVG icons paint with
   currentColor, so colouring the wrapper tints the glyph. Kept subtle and inline with the label controls. */
.eid-indicator[b-42az3w74em] {
    display: inline-flex;
    align-items: center;
    margin-inline-start: 4px;
    color: var(--kendo-color-success, #37b400);
}
/* _content/Anouk.UI/Features/Dossiers/Components/Tiles/DossierCourtesyTile.razor.rz.scp.css */
/* Grid cells must be allowed to shrink (grid default is min-width:auto) before
   ellipsis can take effect — same pattern as CaseActivityTile/.activity-name. */
.courtesy-cell[b-kcim2chamt] {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Vehicle name is a flat TelerikButton; clip its inner text span. */
.courtesy-cell[b-kcim2chamt]  .k-button {
    max-width: 100%;
}

.courtesy-cell[b-kcim2chamt]  .k-button .k-button-text {
    overflow: hidden;
    text-overflow: ellipsis;
}
/* _content/Anouk.UI/Features/Dossiers/Components/Tiles/DossierDocumentsTile.razor.rz.scp.css */
.documents-filter[b-qo3jsewi3k] {
    flex: 0 0 auto;
}

.documents-list[b-qo3jsewi3k] {
    flex: 1 1 auto;
    overflow-y: auto;
}
/* _content/Anouk.UI/Features/Dossiers/Components/Tiles/DossierEvaluationTile.razor.rz.scp.css */
/* Each rating cell scrolls horizontally when the tile gets too narrow,
   so the 5 stars never wrap onto multiple lines. */
.rating-cell[b-99lmen3ump] {
    overflow-x: auto;
    overflow-y: hidden;
    /* Slim scrollbar to match the dark theme */
    scrollbar-width: thin;
    scrollbar-color: #555 transparent;
}

/* Force the Telerik rating onto a single line and shrink the stars
   so they fit comfortably even in narrow tile layouts. */
[b-99lmen3ump] .rating-cell .k-rating {
    flex-wrap: nowrap !important;
    white-space: nowrap;
    font-size: 0.85rem;
}

[b-99lmen3ump] .rating-cell .k-rating .k-rating-item {
    padding: 0 1px;
}
/* _content/Anouk.UI/Features/Dossiers/Components/Tiles/DossierHeaderTile.razor.rz.scp.css */
.case-header-tile[b-9ticutgab5] {
    margin-bottom: 7px;
}

.date-picker-container[b-9ticutgab5] {
    flex-wrap: wrap;
    gap: 12px;
}
/* _content/Anouk.UI/Features/Dossiers/Components/Tiles/DossierOldCasesTile.razor.rz.scp.css */
/* Same card layout as the main Cases tile (DossierCasesTile.razor.css) so old cases read the
   same way as the dossier's own — carrman #68 follow-up: "use the same tile as the case". Blazor-
   scoped CSS can't be shared between components, so these stay in sync with the main tile manually.
   The card here is a <button> (opens the move dialog) instead of the main tile's <a>, hence the
   extra reset rules. */

.cases-scroll-container[b-i6jkhywx1a] {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 100%;
}

.caseItem-sub-panel[b-i6jkhywx1a] {
    width: 220px;
    margin: 0 4px 8px 0;
    /* Green default border: an uncoloured card is a to-do / in-progress case (green). Kept in sync
       with DossierCasesTile.razor.css. State accents below override this left border. */
    border-left: 3px solid var(--kendo-color-primary);
    border-radius: 0;
    cursor: pointer;
    min-height: 196px;
    vertical-align: top;
    /* button reset */
    background: var(--bg);
    color: var(--fg);
    font: inherit;
    text-align: left;
}

.caseItem-sub-panel:hover[b-i6jkhywx1a] {
    /* Background-only hover — the border encodes case state, so it must not be recoloured. */
    background: var(--bg-elev);
}

.caseItem-sub-panel:focus-visible[b-i6jkhywx1a] {
    outline: 2px solid var(--kendo-color-primary);
    outline-offset: 2px;
}

/* Case-state accent — mirrors DossierCasesTile.razor.css using the same --kendo-color tokens. */
.accent-red[b-i6jkhywx1a] {
    border-left-color: var(--kendo-color-tertiary, #ff3c00);
}

.accent-blue[b-i6jkhywx1a] {
    border-left-color: var(--kendo-color-secondary, #4899cd);
}

.case-created-date[b-i6jkhywx1a] {
    font-size: 0.75rem;
    color: #999;
    margin-bottom: 4px;
}

.case-remarks[b-i6jkhywx1a] {
    font-size: 0.75rem;
    color: #999;
    margin-top: 4px;
}
/* _content/Anouk.UI/Features/Dossiers/Components/Tiles/DossierPurchaseOrderingTile.razor.rz.scp.css */
.parts-status-dot[b-bgacbc45gf] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.parts-status-dot--delivered[b-bgacbc45gf] {
    background-color: #4caf50;
}

.parts-status-dot--partial[b-bgacbc45gf] {
    background-color: #ff9800;
}

.parts-status-dot--pending[b-bgacbc45gf] {
    background-color: #f44336;
}

.parts-order-row[b-bgacbc45gf] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 2px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.parts-order-row:hover[b-bgacbc45gf] {
    opacity: 0.8;
}

.parts-order-row__name[b-bgacbc45gf] {
    flex: 1;
    min-width: 0;
}

.parts-order-row__amount[b-bgacbc45gf] {
    flex-shrink: 0;
}
/* _content/Anouk.UI/Features/Dossiers/Components/Tiles/DossierRepairPartsTile.razor.rz.scp.css */
.part-type-label[b-4f4r03oit4] {
    font-size: 0.85em;
    opacity: 0.8;
}
/* _content/Anouk.UI/Features/Dossiers/Components/Tiles/DossierTasksTile.razor.rz.scp.css */
.task-progress-bar[b-of4xs8yqmg] {
    width: 100%;
    height: 18px;
    background: var(--scrim-progress-bg);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.task-progress-bar--no-repair[b-of4xs8yqmg] {
    background: var(--validation-error);
}

.task-progress-bar__fill[b-of4xs8yqmg] {
    height: 100%;
    background-color: transparent;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    min-width: 0;
    transition: width var(--duration-bar) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out);
}

.task-progress-bar__fill--in-progress[b-of4xs8yqmg] {
    background-color: var(--kendo-color-success);
}

.task-progress-bar__fill--completed[b-of4xs8yqmg] {
    background-color: var(--kendo-color-info);
}

.task-progress-bar__label[b-of4xs8yqmg] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #1a1a1a;
    padding-left: 6px;
    white-space: nowrap;
    overflow: hidden;
}
/* _content/Anouk.UI/Features/Dossiers/Components/Tiles/DossierTodoTile.razor.rz.scp.css */
.todo-category-label[b-k5mh5azhu2] {
    font-size: 0.82em;
    opacity: 0.7;
}

.todo-date-label[b-k5mh5azhu2] {
    font-size: 0.82em;
    opacity: 0.8;
}
/* _content/Anouk.UI/Features/Dossiers/Components/Tiles/DossierVehicleTile.razor.rz.scp.css */
.vehicle-info-container[b-fs4z6843ne] {
    white-space: nowrap;
    overflow: hidden;
}

.car-pass-icon[b-fs4z6843ne] {
    height: 21px;
    margin-bottom: -4px;
}
/* _content/Anouk.UI/Features/Dossiers/Contact/Components/Tiles/ContactRemarksTile.razor.rz.scp.css */
/* Make the remarks textarea fill the whole tile height instead of a fixed 3 rows,
   removing the dead space below it. Telerik renders the component as
   <span class="k-textarea"> wrapping an inner <textarea class="k-input-inner">; ::deep
   reaches those internals from this scoped stylesheet. */
.remarks-fill[b-ciz8y9dz3k] {
    display: flex;
    height: 100%;
    min-height: 0;
}

.remarks-fill[b-ciz8y9dz3k]  .k-textarea {
    flex: 1;
    min-height: 0;
}

.remarks-fill[b-ciz8y9dz3k]  .k-input-inner {
    height: 100%;
    resize: none;
}
/* _content/Anouk.UI/Features/Dossiers/Contact/Components/Tiles/ContactSiteRelationsTile.razor.rz.scp.css */
/* The per-role <div data-testid="contact-role-…"> wrappers are Playwright
   anchors only (role labels are localized, so text selectors can't match).
   In the .tile-rows layout each ForEachSwitch's inner .k-d-grid row must be a
   direct flex child of the tile body to pick up its fixed 44px slot
   (flex: 0 0 calc(var(--tile-row-height) + var(--tile-row-gap)) in app.css).
   The wrappers steal that slot while margin-bottom:0 still removes the fallback
   gap, so the rows collapse and the switches overlap. display:contents drops the
   wrapper box from layout — the .k-d-grid becomes the direct flex child again and
   the rows space identically to the Indicators tile. The data-testid stays in the
   DOM, so the browser tests are unaffected. */
[data-testid^="contact-role-"][b-i2nam5ndh2] {
    display: contents;
}
/* _content/Anouk.UI/Features/Dossiers/Contact/Pages/ContactDetails.razor.rz.scp.css */
.tile-settings-overlay[b-gdaptmn3sj] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}

.tile-settings-panel[b-gdaptmn3sj] {
    position: fixed;
    top: 56px;
    right: 16px;
    z-index: 1000;
    background: var(--kendo-color-surface-alt, #1e1e1e);
    border: 1px solid var(--kendo-color-border, #424242);
    border-radius: 4px;
    padding: 16px;
    min-width: 240px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* _content/Anouk.UI/Features/Dossiers/Contact/Pages/ContactOverview.razor.rz.scp.css */
.contact-grid[b-5ik5i5bbpi] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}

.contact-card[b-5ik5i5bbpi] {
    border: 0px solid var(--kendo-color-border, #424242);
    background: var(--kendo-color-surface-alt, #1e1e1e);
    border-radius: 0px;
    padding: 16px;
    cursor: pointer;
    transition: border-color 0.2s;
    /* Uniform tile height: header + name + 4 detail rows.
       Empty rows are rendered as &nbsp; so all cards line up. */
}

.contact-card:hover[b-5ik5i5bbpi] {
    border-color: var(--kendo-color-primary, #4e9af5);
}

.contact-card-header[b-5ik5i5bbpi] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--kendo-color-subtle, #9e9e9e);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Title row — single line, ellipsis when too long */
.contact-name[b-5ik5i5bbpi] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Detail rows — fixed height so empty lines preserve the card's overall height,
   and ellipsis clipping with hover tooltip via the title attribute on each <p>. */
.contact-detail[b-5ik5i5bbpi] {
    margin: 2px 0;
    color: var(--kendo-color-subtle, #9e9e9e);
    font-size: 0.9rem;
    line-height: 1.4;
    min-height: 1.4em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* _content/Anouk.UI/Features/Dossiers/Dossier/Pages/DossierOverview.razor.rz.scp.css */
/* Smaller panel titles */
[b-eqemhr9x2q] .ro-overview h2 {
    font-size: 1.1rem;
    margin-bottom: 0;
}

/* Reduce toolbar bottom margin */
[b-eqemhr9x2q] .ro-overview .k-mb-4 {
    margin-bottom: 4px !important;
}

/* Compact grid rows */
[b-eqemhr9x2q] .ro-overview .k-grid-content tr td,
[b-eqemhr9x2q] .ro-overview .k-grid-header th {
    padding-top: 2px;
    padding-bottom: 2px;
}

/* Task filter, pushed right of the "Activities" toolbar title by the toolbar's k-spacer.
   Narrow enough that the toolbar (k-flex-wrap) never breaks it onto its own line. */
.activities-filter[b-eqemhr9x2q] {
    flex: 0 0 auto;
    align-self: center;
    width: 240px;
}

/* Brief/full toggle, right of the "Tasks" toolbar title. The shared switch lays its label and
   control out on a 12-column grid sized for a form; here the label needs most of the width. */
.tasks-view-toggle[b-eqemhr9x2q] {
    flex: 0 0 auto;
    align-self: center;
    width: 280px;
}

[b-eqemhr9x2q] .tasks-view-toggle .k-mb-2 {
    margin-bottom: 0;
}

[b-eqemhr9x2q] .tasks-view-toggle .k-col-span-4 {
    grid-column: span 9;
}

[b-eqemhr9x2q] .tasks-view-toggle .k-col-span-8 {
    grid-column: span 3;
}
/* _content/Anouk.UI/Features/Dossiers/Layout/DossierLayout.razor.rz.scp.css */
/* Keep the case sub-navigation visible by scrolling page content inside
   the drawer's content pane instead of letting the whole page scroll.
   The TelerikDrawer is given a fixed `content-height` (calc(100vh - 176px))
   in the markup, so bounding both panes here keeps the menu pinned. */
/* anouk#385: blocked-client warning bar, shown at the top of every page of a blocked client's
   dossier (moved here from CaseDetails so it appears on entry, not only on the Case page). */
.case-blocked-customer-banner[b-qstedk5vpz] {
    width: 100%;
    margin-bottom: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--kendo-color-error, #b71c1c);
    color: #fff;
    font-weight: bold;
    text-align: center;
    border-radius: 4px;
}

[b-qstedk5vpz] .k-drawer-content {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}

[b-qstedk5vpz] .k-drawer-wrapper {
    overflow-y: auto;
    scrollbar-width: thin;
}

/* Two-line drawer item (e.g. parts order: order number + supplier). Mirrors the two-line
   contact-combobox item: both lines single-line with ellipsis, second line slightly smaller
   and subtle, aligned under the first line's text (the stack sits after the icon). */
[b-qstedk5vpz] .k-drawer-item.drawer-item-2line {
    height: auto;
}

[b-qstedk5vpz] .k-drawer-item .k-item-text {
    overflow: hidden;
}

[b-qstedk5vpz] .drawer-item-2line .k-item-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

[b-qstedk5vpz] .drawer-item-2line .drawer-item-primary,
[b-qstedk5vpz] .drawer-item-2line .drawer-item-sub {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-qstedk5vpz] .drawer-item-sub {
    font-size: 0.85em;
    color: var(--kendo-color-subtle);
}

/* ── Tablet-compact mini rail + overlay (design §2) ───────────────────────
   Only ever rendered when IViewportService.IsCompact is true (≤900px —
   see the "Tablet-compact breakpoint" comment in app.css). Landscape keeps
   the TelerikDrawer branch above untouched. */
.compact-dossier-shell[b-qstedk5vpz] {
    align-items: stretch;
}

.compact-dossier-content[b-qstedk5vpz] {
    flex: 1;
    min-width: 0;
}

.k-drawer-mini-rail[b-qstedk5vpz] {
    flex: none;
    width: 48px;
    border-right: 1px solid var(--rule, rgba(255, 255, 255, 0.16));
    overflow-x: hidden;
}

.k-drawer-items-mini[b-qstedk5vpz] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.k-drawer-item-mini[b-qstedk5vpz] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    cursor: pointer;
}

/* Sandwich/drawer toggle pinned to the top of the mini rail (below the header).
   Same 48px centered cell as the menu icons below it, so the column reads as one strip. */
.mini-rail-menu-toggle[b-qstedk5vpz] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
}

.mini-rail-dirty-dot[b-qstedk5vpz] {
    position: absolute;
    top: var(--space-1, 4px);
    right: var(--space-1, 4px);
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--kendo-color-warning);
}

.drawer-overlay-backdrop[b-qstedk5vpz] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1900;
}

.drawer-overlay-panel[b-qstedk5vpz] {
    position: fixed;
    top: 50px;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    background: var(--bg-elev, #1a1a1a);
    border-right: 1px solid var(--rule, rgba(255, 255, 255, 0.16));
    box-shadow: var(--shadow-lg);
    z-index: 1901;
    overflow-y: auto;
}
/* _content/Anouk.UI/Features/Dossiers/Pages/DossierDetails.razor.rz.scp.css */
.block-number-badge h3[b-pd11u6460u] {
    color: #ffffff;
}

.tile-settings-overlay[b-pd11u6460u] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}

.tile-settings-panel[b-pd11u6460u] {
    position: fixed;
    top: 56px;
    right: 16px;
    z-index: 1000;
    background: var(--kendo-color-surface-alt, #1e1e1e);
    border: 1px solid var(--kendo-color-border, #424242);
    border-radius: 4px;
    padding: 16px;
    min-width: 240px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* "+ Acties" is a TelerikMenu whose single root item is drawn as a green button (see the markup):
   strip the menu bar's own chrome so only that button shows. The sub-menus pop up outside this
   component and keep the standard menu styling. */
.dossier-actions[b-pd11u6460u]  .k-menu {
    background: transparent;
    border: 0;
    padding: 0;
}

.dossier-actions[b-pd11u6460u]  .k-menu > .k-menu-item > .k-link {
    padding: 0;
    background: transparent;
}

.dossier-actions[b-pd11u6460u]  .k-menu > .k-menu-item > .k-link > .k-menu-expand-arrow {
    display: none;
}
/* _content/Anouk.UI/Features/Dossiers/Pages/DossierOverview.razor.rz.scp.css */
.bg-search[b-urhilwboga] {
    background: #d2d0ce;
}

/* Smaller panel titles */
[b-urhilwboga] h2 {
    font-size: 1.1rem;
}

/* Smaller treeview font */
[b-urhilwboga] .k-treeview {
    font-size: 0.9rem;
    margin-left: -8px;
    overflow-x: hidden;
}

/* Status tree and search box are inert while a filter-triggered dossier read is in flight */
.status-tree[b-urhilwboga],
.status-search[b-urhilwboga] {
    transition: opacity 0.15s ease-in-out;
}

.status-tree-locked[b-urhilwboga],
.status-search-locked[b-urhilwboga] {
    opacity: 0.5;
}

/* Magnifier and clear (X) buttons in the search box. Fluent colours every input suffix with
   --kendo-color-border-alt, which the app leaves at its black default, so the icons were black on the
   dark theme's black box (github#686). Use the theme's text colour so they read on both themes. */
.status-search[b-urhilwboga]  .dossier-search-btn,
.status-search[b-urhilwboga]  .dossier-search-clear-btn {
    color: var(--kendo-color-on-app-surface);
}

/* Smaller treeview checkboxes */
[b-urhilwboga] .k-treeview .k-checkbox {
    width: 16px;
    height: 16px;
}

[b-urhilwboga] .k-treeview > .k-treeview-group {
    padding-inline-start: 0;
}

[b-urhilwboga] .k-checkbox-wrap {
    padding: 0 !important;
    margin: 0 !important;
}

[b-urhilwboga] .k-treeview .k-treeview-leaf, .k-treeview.k-treeview-md .k-treeview-leaf[b-urhilwboga] {
    padding-inline: 0.375rem !important;
    padding-block: 0.225rem !important;
}

[b-urhilwboga] div.k-child-animation-container div ul.k-treeview-group li .k-treeview-item-content {
    padding-inline: 2rem;
}

/* Force single-line rows with ellipsis clipping in the cases grid */
[b-urhilwboga] .k-grid-content .k-table-td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sticky/locked cell styling for the cases grid lives in app.css under
   .cases-grid — scoped CSS + ::deep didn't reliably reach the sticky cells
   Telerik renders. See "Cases grid — locked columns" in app.css. */

/* Center-aligned column headers (paired with TextAlign="Center" on the column) */
[b-urhilwboga] .text-center,
[b-urhilwboga] .text-center .k-link,
[b-urhilwboga] .text-center .k-cell-inner,
[b-urhilwboga] .text-center .k-column-title {
    text-align: center;
    justify-content: center;
}

/* Tablet-compact breakpoint (≤900px) — keep in sync with IViewportService /
   wwwroot/js/viewport.js. The filter panel collapses behind a full-width toggle
   button; when expanded, the status tree scrolls inside a capped height so the
   dossier grid stays within reach below it. */
[b-urhilwboga] .filter-toggle-btn {
    width: 100%;
}

@media (max-width: 900px) {
    [b-urhilwboga] .status-filter-panel .k-treeview {
        max-height: 45vh;
        overflow-y: auto;
    }
}

/* Search results are widened to every site the caller may read;
   rows from a site other than the one currently open get this pill so the user notices before
   opening the wrong dossier. Reuses the warning-subtle tokens already established for
   DossierTimeline.razor.css rather than hard-coding new colours. */
.other-site-badge[b-urhilwboga] {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    background-color: var(--kendo-color-warning-subtle, #fff3cd);
    color: var(--kendo-color-warning-on-subtle, #664d03);
}

.column-chooser-overlay[b-urhilwboga] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}

.column-chooser-panel[b-urhilwboga] {
    position: fixed;
    top: 56px;
    right: 16px;
    z-index: 1000;
    background: var(--kendo-color-surface-alt, #1e1e1e);
    border: 1px solid var(--kendo-color-border, #424242);
    border-radius: 4px;
    padding: 16px;
    min-width: 240px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* _content/Anouk.UI/Features/Dossiers/Vehicle/Pages/VehicleDetails.razor.rz.scp.css */
.tile-settings-overlay[b-z4zmza8kfi] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}

.tile-settings-panel[b-z4zmza8kfi] {
    position: fixed;
    top: 56px;
    right: 16px;
    z-index: 1000;
    background: var(--kendo-color-surface-alt, #1e1e1e);
    border: 1px solid var(--kendo-color-border, #424242);
    border-radius: 4px;
    padding: 16px;
    min-width: 240px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* _content/Anouk.UI/Features/Help/Pages/HelpIndex.razor.rz.scp.css */
.help-topic-card[b-z8hor63olz] {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--kendo-color-border, #dee2e6);
    border-radius: 6px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.help-topic-card:hover[b-z8hor63olz] {
    border-color: var(--kendo-color-primary, #0d6efd);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
/* _content/Anouk.UI/Features/Help/Pages/HelpTopic.razor.rz.scp.css */
.help-markdown[b-a20qjj9oam] {
    max-width: 900px;
    line-height: 1.55;
    padding-bottom: 2rem;
}

.help-markdown[b-a20qjj9oam]  h1 {
    font-size: 1.75rem;
    margin: 0 0 1rem;
}

.help-markdown[b-a20qjj9oam]  h2 {
    font-size: 1.35rem;
    margin: 1.75rem 0 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--kendo-color-border, #dee2e6);
}

.help-markdown[b-a20qjj9oam]  h3 {
    font-size: 1.1rem;
    margin: 1.25rem 0 0.5rem;
}

.help-markdown[b-a20qjj9oam]  p,
.help-markdown[b-a20qjj9oam]  ul,
.help-markdown[b-a20qjj9oam]  ol {
    margin: 0 0 0.85rem;
}

.help-markdown[b-a20qjj9oam]  li {
    margin-bottom: 0.25rem;
}

.help-markdown[b-a20qjj9oam]  table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1rem;
    font-size: 0.95rem;
}

.help-markdown[b-a20qjj9oam]  th,
.help-markdown[b-a20qjj9oam]  td {
    border: 1px solid var(--kendo-color-border, #dee2e6);
    padding: 0.45rem 0.6rem;
    text-align: left;
    vertical-align: top;
}

.help-markdown[b-a20qjj9oam]  th {
    /* --bg-muted is theme-aware (dark on the dark theme, light on the light theme); the previous
       --kendo-color-base-subtle was undefined and fell back to near-white, which left header text
       unreadable on the dark theme. */
    background: var(--bg-muted, #f5f5f5);
    color: var(--fg, inherit);
    font-weight: 600;
}

.help-markdown[b-a20qjj9oam]  code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    padding: 0.1em 0.35em;
    border-radius: 3px;
    background: var(--bg-muted, #f5f5f5);
}

.help-markdown[b-a20qjj9oam]  pre {
    overflow-x: auto;
    padding: 0.75rem 1rem;
    margin: 0 0 1rem;
    border-radius: 6px;
    background: var(--bg-muted, #f5f5f5);
}

.help-markdown[b-a20qjj9oam]  pre code {
    padding: 0;
    background: transparent;
}

.help-markdown[b-a20qjj9oam]  hr {
    border: none;
    border-top: 1px solid var(--kendo-color-border, #dee2e6);
    margin: 1.5rem 0;
}

.help-markdown[b-a20qjj9oam]  blockquote {
    margin: 0 0 1rem;
    padding: 0.5rem 0 0.5rem 1rem;
    border-left: 3px solid var(--kendo-color-primary, #0d6efd);
    color: var(--kendo-color-subtle, #6c757d);
}
/* _content/Anouk.UI/Features/Home/Components/Dashboards/WorkerHoursCard.razor.rz.scp.css */
/* Labels inherit the Kendo body size; titles render via .k-card-title in the tile
   header (style guide §6). Values and times caption on the §2.4 scale. */
.hours-times[b-kzjtg4za1f] {
    font-size: 0.85rem;
}

.hours-value[b-kzjtg4za1f] {
    font-size: 1rem;
}
/* _content/Anouk.UI/Features/Home/Pages/Calendar.razor.rz.scp.css */
[b-qvtdti6ogi] .k-event {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

[b-qvtdti6ogi] .k-nonwork-hour {
    background: inherit !important;
}

[b-qvtdti6ogi] .k-scheduler-nonwork-space {
    background: inherit !important;
}
/* _content/Anouk.UI/Features/Inventory/Components/InventoryOptionsForm.razor.rz.scp.css */
/* Each field row is [field][actions gutter]. The field flexes to fill the row so every box in a
   column shares the same left/right edges; the gutter is a fixed width per column so the trailing
   buttons line up vertically and rows without buttons keep the same box width. */
.opt-row[b-pudt8vcuc9] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* The field is a ForEach* child-component root (it carries the child's scope, not ours), so reach
   it with ::deep and let it grow to fill the row. */
.opt-row[b-pudt8vcuc9]  > *:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.opt-actions[b-pudt8vcuc9] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: 0 0 var(--opt-actions-w, 0);
}

/* Gutter widths sized to each column's button set (just wide enough to hold the buttons). */
.opt-col--qty[b-pudt8vcuc9] {
    --opt-actions-w: 4rem;
}

.opt-col--mid[b-pudt8vcuc9] {
    --opt-actions-w: 6rem;
}

.opt-col--rel[b-pudt8vcuc9] {
    --opt-actions-w: 5rem;
}

/* Blocked toggle: align it to the start of the input column (matches the other boxes' left edge)
   instead of ForEachSwitch's default centred placement. */
.opt-row--switch[b-pudt8vcuc9]  .k-col-span-8 {
    justify-content: flex-start;
}
/* _content/Anouk.UI/Features/Inventory/Components/Modals/AttachmentModal.razor.rz.scp.css */

.cursor-pointer[b-zgkk0u9nz1] {
    cursor: pointer;
}

.button[b-zgkk0u9nz1] {
    color: white;
    background-color: rgb(175, 175, 175);
    padding: 3px 7px;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .button:active[b-zgkk0u9nz1] {
        transform: translateY(3px);
        background-color: rgb(150, 148, 148);
        color: white;
    }

    .button:hover[b-zgkk0u9nz1] {
        background-color: rgb(150, 148, 148);
        color: white;
    }

.background[b-zgkk0u9nz1] {
    background-color: #d2d0ce;
}

.modal[b-zgkk0u9nz1] {
    transition: opacity 0.5s ease, transform 0.5s ease;
    transform-origin: center center;
}

/* Breathing room beneath the footer button row so the buttons aren't flush with the modal edge. */
.modal-footer[b-zgkk0u9nz1] {
    padding-bottom: var(--space-4);
    gap: var(--space-2);
}

/* Keep the Generate / Close buttons a constant size — stop the press-time shrink/move. */
.modal-footer[b-zgkk0u9nz1]  .k-button:active,
.modal-footer[b-zgkk0u9nz1]  .k-button.k-active {
    transform: none;
}
/* _content/Anouk.UI/Features/Inventory/Components/Modals/InventoryOrderModal.razor.rz.scp.css */
/* This app ships no Bootstrap modal CSS (see DossierScannerModal.razor), so this component owns its
   overlay. Mirrors the app's .popup-background convention (fixed, scrim, z-index 10001) and is
   viewport-fit — max-height + a scrollable body — so the tall compose form (supplier + template +
   grid + editor) survives 125% DPI without the footer detaching from the content. */

.modal[b-es6odl0k31] {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background-color: var(--scrim-modal-bg);
}

.modal-dialog[b-es6odl0k31] {
    width: 100%;
    max-width: 1100px;
    margin: 0;
}

.modal-content[b-es6odl0k31] {
    display: flex;
    flex-direction: column;
    max-height: 95dvh;
    background: var(--bg-elev);
    color: var(--fg);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
}

.modal-header[b-es6odl0k31] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--rule);
}

.modal-title[b-es6odl0k31] {
    margin: 0;
}

.btn-close[b-es6odl0k31] {
    padding: var(--space-1);
    border: none;
    background: transparent;
    color: var(--fg-muted);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

    .btn-close[b-es6odl0k31]::before {
        content: "\00d7";
    }

    .btn-close:hover[b-es6odl0k31] {
        color: var(--fg);
    }

/* flex:1 + min-height:0 lets the body scroll inside the capped modal instead of pushing the footer
   off-screen (the 125% DPI failure mode). */
.modal-body[b-es6odl0k31] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.modal-footer[b-es6odl0k31] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-block: var(--space-3);
    border-top: 1px solid var(--rule);
}
/* _content/Anouk.UI/Features/Inventory/Components/Tiles/InventoryOrderListSearchTile.razor.rz.scp.css */
/* _content/Anouk.UI/Features/Inventory/Components/Tiles/InventoryOrderListStateTile.razor.rz.scp.css */
.order-horizontal[b-rg9r040d63] {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

    .order-horizontal > *[b-rg9r040d63] {
        width: 200px;
    }
/* _content/Anouk.UI/Features/Inventory/Pages/InventoryCommunications.razor.rz.scp.css */
.buttonSearch[b-nps7ecz0b5] {
    width: 100%;
    max-width: 200px;
    color: white;
    background-color: rgb(175, 175, 175);
    padding: 7px 7px;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .buttonSearch:active[b-nps7ecz0b5] {
        transform: translateY(3px);
        background-color: rgb(150, 148, 148);
        color: #029ebd;
    }

    .buttonSearch:hover[b-nps7ecz0b5] {
        background-color: rgb(150, 148, 148);
        color: white;
    }

.background[b-nps7ecz0b5] {
    background-color: #d2d0ce;
}

.button[b-nps7ecz0b5] {
    color: white;
    background-color: rgb(175, 175, 175);
    padding: 7px 7px;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .button:active[b-nps7ecz0b5] {
        transform: translateY(3px);
        background-color: rgb(150, 148, 148);
        color: #029ebd;
    }

    .button:hover[b-nps7ecz0b5] {
        background-color: rgb(150, 148, 148);
        color: white;
    }

.bg-warning[b-nps7ecz0b5] {
    background-color: #faa732 !important;
    color: white !important;
}

    .bg-warning:hover[b-nps7ecz0b5] {
        background-color: #fcac3c !important;
        color: white !important;
    }

.bheight[b-nps7ecz0b5] {
    width: 40px !important;
    height: 40px !important;
}

.bheight2[b-nps7ecz0b5] {
    width: 100% !important;
    height: 40px !important;
}
/* _content/Anouk.UI/Features/Inventory/Pages/InventoryDiscontinued.razor.rz.scp.css */
.buttonSearch[b-5dic030g5l] {
    width: 100%;
    max-width: 200px;
    color: white;
    background-color: rgb(175, 175, 175);
    padding: 7px 7px;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .buttonSearch:active[b-5dic030g5l] {
        transform: translateY(3px);
        background-color: rgb(150, 148, 148);
        color: #029ebd;
    }

    .buttonSearch:hover[b-5dic030g5l] {
        background-color: rgb(150, 148, 148);
        color: white;
    }

.background[b-5dic030g5l] {
    background-color: #d2d0ce;
}

.return[b-5dic030g5l] {
    width: 100px !important;
    height: 30px; 
   padding-top: 1px;
}
/* _content/Anouk.UI/Features/Inventory/Pages/InventoryHistory.razor.rz.scp.css */
.buttonSearch[b-ym8uoy9nfy] {
    width: 100%;
    max-width: 200px;
    color: white;
    background-color: rgb(175, 175, 175);
    padding: 7px 7px;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .buttonSearch:active[b-ym8uoy9nfy] {
        transform: translateY(3px);
        background-color: rgb(150, 148, 148);
        color: #029ebd;
    }

    .buttonSearch:hover[b-ym8uoy9nfy] {
        background-color: rgb(150, 148, 148);
        color: white;
    }

.background[b-ym8uoy9nfy] {
    background-color: #d2d0ce;
}

.button[b-ym8uoy9nfy] {
    color: white;
    background-color: rgb(175, 175, 175);
    padding: 7px 7px;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .button:active[b-ym8uoy9nfy] {
        transform: translateY(3px);
        background-color: rgb(150, 148, 148);
        color: #029ebd;
    }

    .button:hover[b-ym8uoy9nfy] {
        background-color: rgb(150, 148, 148);
        color: white;
    }

.bg-warning[b-ym8uoy9nfy] {
    background-color: #faa732 !important;
    color: white !important;
}

    .bg-warning:hover[b-ym8uoy9nfy] {
        background-color: #fcac3c !important;
        color: white !important;
    }

.col-2[b-ym8uoy9nfy] {
    position: relative;
}

.element[b-ym8uoy9nfy] {
    position: absolute;
    top: 50%;
    transform: translate(-0%, -50%);
}

.bheight[b-ym8uoy9nfy] {
    width: 40px !important;
    height: 40px !important;
}

.bheight2[b-ym8uoy9nfy] {
    width: 100% !important;
    height: 40px !important;
}

/* _content/Anouk.UI/Features/Inventory/Pages/InventoryItemDetails.razor.rz.scp.css */

.button[b-k4e7zq74kq] {
    color: white;
    background-color: rgb(175, 175, 175);
    padding: 3px 7px;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .button:active[b-k4e7zq74kq] {
        transform: translateY(3px);
        background-color: rgb(150, 148, 148);
        color: white;
    }

    .button:hover[b-k4e7zq74kq] {
        background-color: rgb(150, 148, 148);
        color: white;
    }

.background[b-k4e7zq74kq] {
    background-color: #d2d0ce;
}

.bheight[b-k4e7zq74kq] {
    width: 30px !important;
    height: 30px !important;
}

.bheight2[b-k4e7zq74kq] {
    width: 100% !important;
    height: 30px !important;
}

.buttonSearch[b-k4e7zq74kq] {
    width: 100%;
    max-width: 200px;
    color: white;
    background-color: rgb(175, 175, 175);
    padding: 7px 7px;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .buttonSearch:active[b-k4e7zq74kq] {
        transform: translateY(3px);
        background-color: rgb(150, 148, 148);
        color: white;
    }

    .buttonSearch:hover[b-k4e7zq74kq] {
        background-color: rgb(150, 148, 148);
        color: white;
    }

.input-container3[b-k4e7zq74kq] {
    max-width: 100px;
}
/* _content/Anouk.UI/Features/Inventory/Pages/InventoryOrderOverview.razor.rz.scp.css */
.buttonSearch[b-zs442193r0] {
    width: 100%;
    max-width: 200px;
    color: white;
    background-color: rgb(175, 175, 175);
    padding: 7px 7px;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .buttonSearch:active[b-zs442193r0] {
        transform: translateY(3px);
        background-color: rgb(150, 148, 148);
        color: #029ebd;
    }

    .buttonSearch:hover[b-zs442193r0] {
        background-color: rgb(150, 148, 148);
        color: white;
    }

.background[b-zs442193r0] {
    background-color: #d2d0ce;
}

.input-container2[b-zs442193r0] {
    max-width: 120px;
}

.input-container3[b-zs442193r0] {
    max-width: 100px;
}

.button[b-zs442193r0] {
    color: white;
    background-color: rgb(175, 175, 175);
    padding: 3px 7px;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .button:active[b-zs442193r0] {
        transform: translateY(3px);
        background-color: rgb(150, 148, 148);
        color: #029ebd;
    }

    .button:hover[b-zs442193r0] {
        background-color: rgb(150, 148, 148);
        color: white;
    }

.pt[b-zs442193r0] {
    padding-top: 20px;
}

.scann[b-zs442193r0] {
    color: white;
    background-color: rgb(175, 175, 175);
    border: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .scann:hover[b-zs442193r0] {
        color: #029ebd;
    }

    .scann:active[b-zs442193r0] {
        transform: translateY(2px);
    }

.scannerVideo[b-zs442193r0] {
    width: 400px;
    height: 300px;
    border: 1px solid gray;
}

.select[b-zs442193r0] {
    width: 200px;
}

@media (max-width: 530px) {
    .center-button[b-zs442193r0] {
        justify-content: center;
        align-items: center;
    }
}
/* _content/Anouk.UI/Features/Inventory/Pages/InventoryOverview.razor.rz.scp.css */
/* Carrman parity: inventoryItemsGrid row color coding based on stock/order/critical flags.
   Same state->hue mapping as the original Carrman inline styles (see InventoryItemModelGrid.cshtml
   script), softened for the dark theme via the --inv-* tokens in app.css. */
[b-l9e22q1x33] .inventory-row-critical td {
    color: var(--inv-critical);
}

[b-l9e22q1x33] .inventory-row-low-stock td {
    color: var(--inv-low-stock);
}

[b-l9e22q1x33] .inventory-row-in-order td {
    color: var(--inv-in-order);
}

[b-l9e22q1x33] .inventory-row-low-in-order td {
    color: var(--inv-low-in-order);
}

.background[b-l9e22q1x33] {
    background-color: #d2d0ce;
}

.bg-warning[b-l9e22q1x33] {
    background-color: #faa732 !important;
    color: white !important;
}

    .bg-warning:hover[b-l9e22q1x33] {
        background-color: #fcac3c !important;
        color: white !important;
    }

.input-container2[b-l9e22q1x33] {
    max-width: 120px;
}
/* _content/Anouk.UI/Features/Inventory/Pages/OrderScheduleDetails.razor.rz.scp.css */
.schedule-form[b-esz8lno92u] {
    max-width: 720px;
}

.schedule-error[b-esz8lno92u] {
    background: var(--kendo-color-error-subtle, #f2dede);
    border: 1px solid var(--kendo-color-error, #ebccd1);
    border-radius: 4px;
    color: var(--kendo-color-on-error-subtle, #a94442);
}
/* _content/Anouk.UI/Features/Inventory/Pages/OrderStockUpdate.razor.rz.scp.css */
/* The Update Stock page shows two side-by-side grids (Items in Order | Received) that must stay
   aligned line-for-line: row N on the right (a scanned value or a "–" placeholder) has to sit
   opposite row N on the left. Without a fixed row height, a scanned row (which hosts a
   NumericTextBox) is taller than a placeholder/text row, so the two sides progressively drift apart
   as more items are scanned. Pin every row on both grids to the same height so they can't. */
[b-3g81qv8tby] .k-grid .k-table-row,
[b-3g81qv8tby] .k-grid tr {
    height: 40px;
}

[b-3g81qv8tby] .k-grid .k-table-td,
[b-3g81qv8tby] .k-grid td {
    padding-top: 0;
    padding-bottom: 0;
    vertical-align: middle;
}

/* No internal grid scroll — the page scrolls as one, so drop the (empty) scrollbar gutter/arrows
   Telerik otherwise reserves on the content area and header. */
[b-3g81qv8tby] .k-grid-content {
    overflow-y: visible;
}

[b-3g81qv8tby] .k-grid-header {
    padding-inline-end: 0;
}

/* Scan quantity box: hide the up/down spinner arrows (the `Spinners="false"` parameter collapses the
   box to zero width in this Telerik version, so hide the buttons with CSS instead). Scoped to the scan
   box only via .scan-qty — the Received-row quantity boxes keep their spinners. */
[b-3g81qv8tby] .scan-qty .k-input-spinner {
    display: none;
}

/* Row status cue (set via OnRowRender): matched = green, over/under = orange, not-on-order = red.
   Kendo paints cell backgrounds and re-paints them on hover, so the tint has to sit on the cells
   (not the row) and be repeated for the hover state or it washes out under the mouse. Subtle tints
   (colour-mix with transparent) keep the row text readable on the dark theme. */
[b-3g81qv8tby] .row-matched > td,
[b-3g81qv8tby] .row-matched > .k-table-td,
[b-3g81qv8tby] .k-grid .k-table-row.row-matched:hover > td,
[b-3g81qv8tby] .k-grid .k-table-row.row-matched:hover > .k-table-td {
    background-color: color-mix(in srgb, var(--kendo-color-success) 22%, transparent);
}

[b-3g81qv8tby] .row-discrepancy > td,
[b-3g81qv8tby] .row-discrepancy > .k-table-td,
[b-3g81qv8tby] .k-grid .k-table-row.row-discrepancy:hover > td,
[b-3g81qv8tby] .k-grid .k-table-row.row-discrepancy:hover > .k-table-td {
    background-color: color-mix(in srgb, var(--warning) 26%, transparent);
}

[b-3g81qv8tby] .row-blocker > td,
[b-3g81qv8tby] .row-blocker > .k-table-td,
[b-3g81qv8tby] .k-grid .k-table-row.row-blocker:hover > td,
[b-3g81qv8tby] .k-grid .k-table-row.row-blocker:hover > .k-table-td {
    background-color: color-mix(in srgb, var(--validation-error) 26%, transparent);
}
/* _content/Anouk.UI/Features/Inventory/Pages/WarehouseManagement.razor.rz.scp.css */
/* Intentionally empty.

   The Warehouse-management tree row layout (full-width row + right-aligned
   action buttons) lives in src/Anouk.UI/wwwroot/app.css under the
   ".wh-tree" prefix. Scoped CSS + ::deep didn't reliably override Telerik's
   own .k-treeview-leaf-text rule, so the page targets a global class on
   the TelerikTreeView (Class="wh-tree") and the rules are global. */
/* _content/Anouk.UI/Features/Invoice/Components/CreditNoteHeaderForm.razor.rz.scp.css */
.k-d-flex.columns-gap[b-vuwdwmu4fw] {
    gap: 2rem;
    padding-left: 1rem;
}

[b-vuwdwmu4fw] .k-col-span-4 > label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.k-col-span-8[b-vuwdwmu4fw] {
    max-width: 55%;
}

.invoice-total-value[b-vuwdwmu4fw] {
    text-align: right;
    font-size: 0.9rem;
    color: #c8c8c8;
    max-width: 55%;
    padding-left: 1rem;
}

.totals-separator[b-vuwdwmu4fw] {
    height: 1.5rem;
}
/* _content/Anouk.UI/Features/Invoice/Components/CustomerSearch.razor.rz.scp.css */
.button[b-duwzt1rxeq] {
    color: white;
    background-color: rgb(175, 175, 175);
    padding: 3px 7px;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .button:active[b-duwzt1rxeq] {
        transform: translateY(3px);
        background-color: rgb(150, 148, 148);
        color: white;
    }

    .button:hover[b-duwzt1rxeq] {
        background-color: rgb(150, 148, 148);
        color: white;
    }

.background[b-duwzt1rxeq] {
    background-color: #d2d0ce;
}

.button[b-duwzt1rxeq] {
    color: white;
    background-color: rgb(175, 175, 175);
    padding: 3px 7px;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .button:active[b-duwzt1rxeq] {
        transform: translateY(3px);
        background-color: rgb(150, 148, 148);
        color: white;
    }

    .button:hover[b-duwzt1rxeq] {
        background-color: rgb(150, 148, 148);
        color: white;
    }

.background[b-duwzt1rxeq] {
    background-color: #d2d0ce;
}

.customerheight[b-duwzt1rxeq] {
    height: 400px;
}

.modal.fade .modal-dialog[b-duwzt1rxeq] {
    transform: translate(0, 0px);
}

.modal[b-duwzt1rxeq] {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease; 
}

.show-modal[b-duwzt1rxeq] {
    display: block;
    opacity: 1;
}

.hide-modal[b-duwzt1rxeq] {
    display: block;
    opacity: 0;
}

/* Affordance: each grid row is clickable to select the customer. */
[b-duwzt1rxeq] .k-grid tbody tr:not(.k-grid-header) {
    cursor: pointer;
}

[b-duwzt1rxeq] .k-grid tbody tr:not(.k-grid-header):hover {
    background-color: rgba(0, 0, 0, 0.04);
}




/* _content/Anouk.UI/Features/Invoice/Components/DossierList.razor.rz.scp.css */
[b-f19njqjv8b] .k-text-right,
[b-f19njqjv8b] .k-text-right .k-link,
[b-f19njqjv8b] .k-text-right .k-cell-inner,
[b-f19njqjv8b] .k-text-right .k-column-title {
    text-align: right;
    justify-content: flex-end;
}

/* Allow the grid to grow and fill the panel half it lives in.      */
/* The h3 heading is a fixed natural height; the two divs below it  */
/* must stretch so TelerikGrid Height="100%" has room to fill.      */
.dos-grid-wrapper[b-f19njqjv8b] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.dos-grid-wrapper > .fe-grid[b-f19njqjv8b] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

[b-f19njqjv8b] .k-grid {
    flex: 1 1 auto;
    min-height: 0;
}
/* _content/Anouk.UI/Features/Invoice/Components/Export.razor.rz.scp.css */
.button[b-xmgpqw7e51] {
    color: white;
    background-color: rgb(175, 175, 175);
    padding: 3px 7px;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .button:active[b-xmgpqw7e51] {
        transform: translateY(3px);
        background-color: rgb(150, 148, 148);
        color: white;
    }

    .button:hover[b-xmgpqw7e51] {
        background-color: rgb(150, 148, 148);
        color: white;
    }

.background[b-xmgpqw7e51] {
    background-color: #d2d0ce;
}

.button[b-xmgpqw7e51] {
    color: white;
    background-color: rgb(175, 175, 175);
    padding: 3px 7px;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .button:active[b-xmgpqw7e51] {
        transform: translateY(3px);
        background-color: rgb(150, 148, 148);
        color: white;
    }

    .button:hover[b-xmgpqw7e51] {
        background-color: rgb(150, 148, 148);
        color: white;
    }

.background[b-xmgpqw7e51] {
    background-color: #d2d0ce;
}

.modal.fade .modal-dialog[b-xmgpqw7e51] {
    transform: translate(0, 0px);
}

.modal[b-xmgpqw7e51] {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.show-modal[b-xmgpqw7e51] {
    display: block;
    opacity: 1;
}

.hide-modal[b-xmgpqw7e51] {
    display: block;
    opacity: 0;
}
/* _content/Anouk.UI/Features/Invoice/Components/GroupInvoiceLinesForm.razor.rz.scp.css */
.group-invoice-lines-grid[b-73h1cjnpiy] {
    display: grid;
    grid-template-columns: 14% 8% 22% 10% 8% 6% 8% 8% 10% 30px;
    gap: 0.5rem 0.5rem;
    align-items: start;
    width: 100%;
    height: auto;
    overflow: auto;
}

/* Keyed per-row wrapper (see GroupInvoiceLinesForm.razor). display:contents keeps the cells as
   direct grid items so the column layout is unaffected while giving each row a stable @key. */
.group-invoice-lines-grid > .line-row[b-73h1cjnpiy] {
    display: contents;
}

.grid-header[b-73h1cjnpiy] {
    font-weight: 100;
    color: white;
    font-size: 0.85rem;
    padding-bottom: 0.25rem;
}

.grid-cell[b-73h1cjnpiy] {
    font-size: 0.85rem;
    padding-top: 0.25rem;
    word-break: break-word;
}

.line-total[b-73h1cjnpiy] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 0.9rem;
    color: white;
    padding-right: 0.25rem;
}
/* _content/Anouk.UI/Features/Invoice/Components/InvoiceHeaderForm.razor.rz.scp.css */
.k-d-flex.columns-gap[b-0ufokz0hvk] {
    gap: 2rem;
    padding-left: 1rem;
}

[b-0ufokz0hvk] .k-col-span-4 > label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.k-col-span-8[b-0ufokz0hvk] {
    max-width: 55%;
}

.invoice-total-value[b-0ufokz0hvk] {
    text-align: right;
    font-size: 0.9rem;
    color: #c8c8c8;
    max-width: 55%;
    padding-left: 1rem;
}

.totals-separator[b-0ufokz0hvk] {
    height: 1.5rem;
}

.rebate-scheme-group .rebate-radio[b-0ufokz0hvk] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 400 !important;
    margin-left: 1rem;
    cursor: pointer;
    white-space: normal;
}

.rebate-scheme-group .rebate-radio input[type="radio"][b-0ufokz0hvk] {
    margin: 0;
    cursor: pointer;
}
/* _content/Anouk.UI/Features/Invoice/Components/InvoiceLinesForm.razor.rz.scp.css */
.invoice-lines-grid[b-vglrnmnrdr] {
    display: grid;
    grid-template-columns: 1fr 15% 9% 7% 9% 9% 9% 22px;
    gap: 0.5rem 0.25rem;
    align-items: start;
    width: 100%;
    height: auto;
    overflow: auto;
}

/* Keyed per-row wrapper (see InvoiceLinesForm.razor). display:contents keeps the cells as direct
   grid items so the 8-column layout is unaffected while giving each row a stable @key identity. */
.invoice-lines-grid > .line-row[b-vglrnmnrdr] {
    display: contents;
}

.invoice-lines-grid > *[b-vglrnmnrdr],
.invoice-lines-grid > .line-row > *[b-vglrnmnrdr] {
    min-width: 0;
}

/*
 * ForEachNumericTextBox / ForEachComboBox wrap their input in a 4/8 label-input grid.
 * Inside the invoice lines grid we don't want the label slot — collapse the wrapper so
 * the input fills its cell and the "k-col-span-4" label area doesn't leave empty space.
 */
.invoice-lines-grid[b-vglrnmnrdr]  .k-d-grid.k-grid-cols-12 {
    display: block;
    margin-bottom: 0 !important;
}

.invoice-lines-grid[b-vglrnmnrdr]  .k-col-span-4 {
    display: none;
}

/* Force the control container to fill the entire block-display wrapper */
.invoice-lines-grid[b-vglrnmnrdr]  .k-col-span-8 {
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box;
}

.invoice-lines-grid[b-vglrnmnrdr]  .k-numerictextbox,
.invoice-lines-grid[b-vglrnmnrdr]  .k-combobox,
.invoice-lines-grid[b-vglrnmnrdr]  .k-textbox {
    width: 100% !important;
    margin: 0 !important;
}

/* Tighten the add/remove row buttons — default Small is still too large for a per-row action. */
.invoice-lines-grid[b-vglrnmnrdr]  .k-button {
    width: 22px;
    height: 22px;
    min-width: 22px;
    padding: 0;
}

.invoice-lines-grid[b-vglrnmnrdr]  .k-button .k-svg-icon,
.invoice-lines-grid[b-vglrnmnrdr]  .k-button .k-icon {
    font-size: 12px;
    width: 12px;
    height: 12px;
}

.grid-header[b-vglrnmnrdr] {
    font-weight: 100;
    color: white;
    font-size: 0.85rem;
    padding-bottom: 0.25rem;
    text-align: right;
}

.grid-header:nth-child(1)[b-vglrnmnrdr],
.grid-header:nth-child(2)[b-vglrnmnrdr] {
    text-align: left;
}

/* Numeric input columns (UnitPrice, VAT, Quantity, Rebate %) have a spinner on the
 * right side, so the digits end before the cell edge. Pad the headers so their
 * right edge lines up with the digits below, not the spinner arrows. */
.grid-header:nth-child(3)[b-vglrnmnrdr],
.grid-header:nth-child(4)[b-vglrnmnrdr],
.grid-header:nth-child(5)[b-vglrnmnrdr],
.grid-header:nth-child(6)[b-vglrnmnrdr] {
    padding-right: 1.5rem;
}

[b-vglrnmnrdr] .k-numerictextbox .k-input-inner {
    text-align: right;
}

.line-total[b-vglrnmnrdr] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 0.9rem;
    color: white;
    padding-right: 0.25rem;
}

.remarks-section[b-vglrnmnrdr] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 1.5rem;
    max-width: 300px;
}

    .remarks-section label[b-vglrnmnrdr] {
        font-weight: 600;
    }
/* _content/Anouk.UI/Features/Invoice/Components/InvoicesAndCreditNotes.razor.rz.scp.css */
[b-cg9tndw281] .k-text-right,
[b-cg9tndw281] .k-text-right .k-link,
[b-cg9tndw281] .k-text-right .k-cell-inner,
[b-cg9tndw281] .k-text-right .k-column-title {
    text-align: right;
    justify-content: flex-end;
}

/* Allow the grid to grow and fill the panel half it lives in.      */
/* The h3 heading is a fixed natural height; the two divs below it  */
/* must stretch so TelerikGrid Height="100%" has room to fill.      */
.inv-grid-wrapper[b-cg9tndw281] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.inv-grid-wrapper > .fe-grid[b-cg9tndw281] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

[b-cg9tndw281] .k-grid {
    flex: 1 1 auto;
    min-height: 0;
}
/* _content/Anouk.UI/Features/Invoice/Pages/InvoiceDetails.razor.rz.scp.css */
.btnTypeAdd[b-z33elw7fdu] {
    width: 110px;
    color: white;
    background-color: #784d35;
    padding: 6px 0;
}

    .btnTypeAdd:hover[b-z33elw7fdu] {
        color: white;
        outline: none;
        background-color: #9d694c;
    }

    .btnTypeAdd:focus[b-z33elw7fdu] {
        outline: none;
        box-shadow: 0 0 5px black;
    }

.btn-type-cancel[b-z33elw7fdu] {
    width: 110px !important;
    color: white !important;
    background-color: #6c757d;
    padding: 6px 0;
}

.btn-type-select[b-z33elw7fdu] {
    width: 120px !important;
    color: white !important;
    background-color: #6c757d;
    padding: 6px 0;
}

.invoice-page-layout[b-z33elw7fdu] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 220px);
    overflow: hidden;
}

[b-z33elw7fdu] .invoice-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.description-wrapper[b-z33elw7fdu] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 1rem;
}

/* _content/Anouk.UI/Features/Invoice/Pages/InvoiceOverview.razor.rz.scp.css */

.background[b-pi8tmamt7k] {
    background: #d2d0ce !important;
}

@media (max-width: 530px) {
    .center-button[b-pi8tmamt7k] {
        justify-content: center;
        align-items: center;
    }
}

.invoices a[b-pi8tmamt7k] {
    cursor: pointer;
}

/* ── Full-height page column ─────────────────────────────────────── */
/* Outer k-px-4 wrapper becomes a flex column so the split can fill  */
/* the remaining viewport below the header panel.                    */
/* ~90px covers the top nav bar + page title row.                    */
/* Adjust the offset at runtime if the header panel grows/shrinks.   */
.invoice-overview-page[b-pi8tmamt7k] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 90px);
    min-height: 0;
}

/* ── Fixed 50:50 vertical split ──────────────────────────────────── */
/* CSS Grid with two 1fr tracks pins each half to exactly 50% of the split
   REGARDLESS of how many rows each grid holds — flexbox let the panels size to
   content, so a grid with few/one row collapsed and clipped its result row
   ("1 of 1 items" but nothing visible). A 1fr track is a definite height, so the
   ForEachPanel's height:100% and the TelerikGrid Height="100%" both resolve and
   each grid scrolls within its own half. */
.invoice-grid-split[b-pi8tmamt7k] {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

.invoice-grid-split > *[b-pi8tmamt7k] {
    min-height: 0;
}
/* _content/Anouk.UI/Features/MyProfile/Pages/MyProfile.razor.rz.scp.css */
.my-profile-details-tile[b-y9pheq08zw] {
    position: relative;
}

.my-profile-details-actions[b-y9pheq08zw] {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}
/* _content/Anouk.UI/Features/Onboarding/Pages/OnboardingWizard.razor.rz.scp.css */
.onboarding-page[b-f1yehuvro4] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    /* Let the TelerikRootComponent handle the viewport height —
       no min-height/overflow so the card flows naturally. */
}

.onboarding-card[b-f1yehuvro4] {
    width: 100%;
    max-width: 480px;
    background: var(--bg-elev);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.onboarding-logo[b-f1yehuvro4] {
    display: flex;
    justify-content: center;
}

.onboarding-title[b-f1yehuvro4] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: var(--font-weight-semibold);
    color: var(--fg);
    text-align: center;
}

.onboarding-subtitle[b-f1yehuvro4] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--fg-muted);
    text-align: center;
    line-height: 1.5;
}

.onboarding-form[b-f1yehuvro4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.onboarding-field[b-f1yehuvro4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.onboarding-label[b-f1yehuvro4] {
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--fg-muted);
}

.onboarding-vat-row[b-f1yehuvro4] {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.onboarding-field-hint[b-f1yehuvro4] {
    font-size: 0.8rem;
    color: var(--fg-muted);
}

.onboarding-field-error[b-f1yehuvro4] {
    font-size: 0.8rem;
    color: var(--destructive);
}

/* Submit button — plain HTML so it renders reliably in SimpleLayout */
.onboarding-submit-btn[b-f1yehuvro4] {
    width: 100%;
    padding: 12px 20px;
    background: var(--kendo-color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: opacity var(--duration-fast) var(--ease-out);
}

.onboarding-submit-btn:hover:not(:disabled)[b-f1yehuvro4] {
    opacity: 0.88;
}

.onboarding-submit-btn:disabled[b-f1yehuvro4] {
    opacity: 0.55;
    cursor: not-allowed;
}

.onboarding-error[b-f1yehuvro4] {
    background: color-mix(in srgb, var(--destructive) 12%, transparent);
    border: 1px solid var(--destructive);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font-size: 0.85rem;
    color: var(--destructive);
}
/* _content/Anouk.UI/Features/PublicArea/Pages/About.razor.rz.scp.css */
.section-gradient[b-82b7fb88mo] {
    background: var(--anoukfeatures-section-gradient);
}

.content-max-width[b-82b7fb88mo] {
    max-width: var(--content-max-width);
}

.font-weight-bold[b-82b7fb88mo] {
    font-weight: bold;
}

.width-100[b-82b7fb88mo] {
    width: 100%;
}

.grid .k-grid-content tr[b-82b7fb88mo] {
    line-height: 32px;
}
/* _content/Anouk.UI/Features/PublicArea/Pages/Login.razor.rz.scp.css */
body[b-l7g1v3hhax] {
    background-position: center;
    background-size: cover;
}

.hero-background[b-l7g1v3hhax] {
    /* Fill the full viewport so the curtain image isn't boxed in by the layout's
       content area (which previously left black bars on the sides and bottom). */
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background-repeat: no-repeat;
    background-image: url('/_content/Anouk.UI/assets/images/hero-bg.jpg');
    background-size: cover;
    background-position: center center;
}

.login-container[b-l7g1v3hhax] {
    max-width: 458px;
}

.close-button[b-l7g1v3hhax] {
    float: right;
}
/* _content/Anouk.UI/Features/PublicArea/Pages/Welcome.razor.rz.scp.css */
.hero-background[b-d13ub6rf3f] {
    background-image: url('/_content/Anouk.UI/assets/images/hero-bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
}

.min-height-container[b-d13ub6rf3f] {
    min-height: 700px;
}

.welcome-logo[b-d13ub6rf3f] {
    width: 160px;
    height: auto;
    max-width: 30vw;
}

.description-text[b-d13ub6rf3f] {
    max-width: 500px;
}

.content-max-width[b-d13ub6rf3f] {
    max-width: var(--content-max-width);
}

.section-gradient[b-d13ub6rf3f] {
    background: var(--anoukfeatures-section-gradient);
}
/* _content/Anouk.UI/Features/QuickTasks/Components/TaskReminderHost.razor.rz.scp.css */
/* TelerikWindow is portalled into the TelerikRootComponent's own dialog container, outside this
   component's rendered DOM subtree — ::deep is required to reach its chrome from scoped CSS, and
   !important overrides Telerik's own inline top/left so the popup stays anchored top-center
   regardless of prior dragging. */
[b-jnqiaks099] .task-reminder-window {
    position: fixed !important;
    top: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10050;
}

[b-jnqiaks099] .task-reminder-row + .task-reminder-row {
    border-top: 1px solid var(--kendo-color-border, #424242);
}
/* _content/Anouk.UI/Features/QuickTasks/Pages/TasksOverview.razor.rz.scp.css */
/* Smaller panel titles — mirrors DossierOverview.razor.css */
[b-m3rpkj51px] h2 {
    font-size: 1.1rem;
}

/* Smaller treeview font, mirrors DossierOverview's status tree styling */
[b-m3rpkj51px] .k-treeview {
    font-size: 0.9rem;
    margin-left: -8px;
    overflow-x: hidden;
}

/* Force single-line rows with ellipsis clipping in the task grids */
[b-m3rpkj51px] .k-grid-content .k-table-td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Row color-coding (OnRowRender in TasksOverview.razor.cs): default = open & not overdue;
   completed = subtle green wash; overdue & not completed = subtle red wash. Mirrors
   InventoryOverview.razor.css's state->class pattern. */
[b-m3rpkj51px] .task-row-completed td {
    background-color: var(--task-row-completed-bg);
}

[b-m3rpkj51px] .task-row-overdue td {
    background-color: var(--task-row-overdue-bg);
}
/* _content/Anouk.UI/Features/Relations/Components/CreateContact/CreateContactFlowModal.razor.rz.scp.css */
[b-lncdct9opt] .contact-type-icon {
    width: 3rem;
    height: 3rem;
}

[b-lncdct9opt] .contact-type-card {
    background-color: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: background-color 0.15s ease;
}

[b-lncdct9opt] .contact-type-card:hover {
    background-color: rgba(255, 255, 255, 0.13);
}
/* _content/Anouk.UI/Features/Relations/Pages/ExactConsistency.razor.rz.scp.css */
.exact-tiles[b-cbqw2fu3lj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0.75rem;
}

.exact-tile[b-cbqw2fu3lj] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--kendo-color-border, #d5d5d5);
    border-radius: 4px;
    color: inherit;
    text-decoration: none;
}

.exact-tile--zero[b-cbqw2fu3lj] {
    opacity: 0.5;
}

.exact-tile__count[b-cbqw2fu3lj] {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1;
}

.exact-tile__title[b-cbqw2fu3lj] {
    font-size: 0.85rem;
}
/* _content/Anouk.UI/Features/Settings/Case/Pages/CapacityOverviewTaskTypeGroup.razor.rz.scp.css */
.background[b-yuw6y35hao] {
    background-color: #d2d0ce;
}

.background[b-yuw6y35hao] {
    background-color: #d2d0ce;
}

.btnTypeAdd[b-yuw6y35hao] {
    width: 110px;
    color: white !important;
    background-color: #784d35;
    padding: 6px;
    border-radius: 5px;
}

    .btnTypeAdd:hover[b-yuw6y35hao] {
        color: white;
        outline: none;
        background-color: #9d694c;
    }

    .btnTypeAdd:focus[b-yuw6y35hao] {
        outline: none;
        box-shadow: 0 0 5px black;
    }

.cancel[b-yuw6y35hao] {
    width: 110px !important;
    background-color: #6c757d;
    color: white;
    padding: 6px;
    border-radius: 5px;
}

.icons[b-yuw6y35hao] {
    font-size: 1.3rem;
}
/* _content/Anouk.UI/Features/Settings/Case/Pages/InformexParameters.razor.rz.scp.css */
.background[b-yvsef9p1em] {
    background-color: #d2d0ce;
}

.btnTypeAdd[b-yvsef9p1em] {
    width: 110px;
    color: white !important;
    background-color: #784d35;
    padding: 6px;
    border-radius: 5px;
}

    .btnTypeAdd:hover[b-yvsef9p1em] {
        color: white;
        outline: none;
        background-color: #9d694c;
    }

    .btnTypeAdd:focus[b-yvsef9p1em] {
        outline: none;
        box-shadow: 0 0 5px black;
    }

.cancel[b-yvsef9p1em] {
    width: 110px !important;
    background-color: #6c757d;
    color: white;
    padding: 6px;
    border-radius: 5px;
}
/* _content/Anouk.UI/Features/Settings/Case/Pages/RODRConversion.razor.rz.scp.css */
.background[b-ecbitg9igg] {
    background-color: #d2d0ce;
}

.background[b-ecbitg9igg] {
    background-color: #d2d0ce;
}

.btnTypeAdd[b-ecbitg9igg] {
    width: 110px;
    color: white !important;
    background-color: #784d35;
    padding: 6px;
    border-radius: 5px;
}

    .btnTypeAdd:hover[b-ecbitg9igg] {
        color: white;
        outline: none;
        background-color: #9d694c;
    }

    .btnTypeAdd:focus[b-ecbitg9igg] {
        outline: none;
        box-shadow: 0 0 5px black;
    }

.cancel[b-ecbitg9igg] {
    width: 110px !important;
    background-color: #6c757d;
    color: white;
    padding: 6px;
    border-radius: 5px;
}
/* _content/Anouk.UI/Features/Settings/Dossier/Components/Tiles/PartTypeTile.razor.rz.scp.css */
.flex-column-full[b-9w3lh10x0c] {
    flex: 1;
}
/* _content/Anouk.UI/Features/Settings/Dossier/Components/Tiles/TaskTypeTile.razor.rz.scp.css */
.flex-column-full[b-gcf1wosgw6] {
    flex: 1;
}
/* _content/Anouk.UI/Features/Settings/Dossier/Pages/ActivityOverview.razor.rz.scp.css */
.background[b-waxomz20g8] {
    background-color: #d2d0ce;
}

.btnTypeAdd[b-waxomz20g8] {
    width: 120px;
    color: white !important;
    background-color: #784d35;
}

    .btnTypeAdd:hover[b-waxomz20g8] {
        color: white;
        outline: none;
        background-color: #9d694c;
    }

    .btnTypeAdd:focus[b-waxomz20g8] {
        outline: none;
        box-shadow: 0 0 5px black;
    }

.btnTypeEdit[b-waxomz20g8] {
    width: 120px;
    color: white !important;
    background-color: #784d35;
}

    .btnTypeEdit:hover[b-waxomz20g8] {
        color: white;
        outline: none;
        background-color: #9d694c;
    }

    .btnTypeEdit:focus[b-waxomz20g8] {
        outline: none;
        box-shadow: 0 0 5px black;
    }

.btnDelete[b-waxomz20g8] {
    width: 120px;
    margin-right: 5px !important;
}

.btn-type-cancel[b-waxomz20g8] {
    width: 120px;
}
/* _content/Anouk.UI/Features/Settings/Dossier/Pages/CalculationModelPartDetails.razor.rz.scp.css */
.background[b-e0luepjw5q] {
    background-color: #d2d0ce;
}
/* _content/Anouk.UI/Features/Settings/Dossier/Pages/CalculationModelTaskDetails.razor.rz.scp.css */
.background[b-cnfq9ivn0a] {
    background-color: #d2d0ce;
}
/* _content/Anouk.UI/Features/Settings/Dossier/Pages/CalculationTypeDetails.razor.rz.scp.css */
.options-form[b-9tm1iy72so] {
    max-width: 40rem;
    margin-bottom: var(--space-6);
}

/* Flex column that stacks the two grid sections (Taken / Onderdelen).
   min-height anchors the section to the viewport so unused space below the
   grids is utilised rather than left blank.

   OFFSET derivation (all values from MainLayout.razor.css + ForEachPanel.razor):
     50px  — global header (Header component; k-drawer starts at top:50px)
     50px  — view-title-bar (fixed height in MainLayout.razor.css)
     16px  — ForEachPanel k-p-4 top padding (Kendo spacing scale: 4 × 4px = 16px)
     60px  — main-content padding-bottom (footer reserve, MainLayout.razor.css)
    184px  — options-form: ~4 form rows × 40px each (Make/Model/Site/Description)
             + margin-bottom var(--space-6) ≈ 24px  → 4×40+24 = 184px
   ─────────────────────────────────────────────────────────
    360px  → rounded up to 380px (generous estimate; a slightly-too-small
             min-height is safer than introducing a page scrollbar)

   flex:1 + min-height:0 split the remaining space between the two k-grid
   children (via ::deep below). */
.model-grids[b-9tm1iy72so] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: calc(100dvh - 380px);
    gap: 1.5rem;
}

/* Each TelerikGrid rendered inside a child component (CalculationModelTaskDetails /
   CalculationModelPartDetails) must participate in the flex layout.
   ::deep is required because .k-grid lives inside child component subtrees. */
[b-9tm1iy72so] .model-grids .k-grid {
    flex: 1 1 0;
    min-height: 0;
}
/* _content/Anouk.UI/Features/Settings/Dossier/Pages/CalculationTypeOverview.razor.rz.scp.css */
.background[b-uzd20ukjjv] {
    background-color: #d2d0ce;
}

.fixed-bottom[b-uzd20ukjjv] {
    position: fixed;
    bottom: 0px;
    width: 100%;
}

.buttonSearch[b-uzd20ukjjv] {
    color: white;
    background-color: rgb(175, 175, 175);
    padding: 7px 10px;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .buttonSearch:active[b-uzd20ukjjv] {
        transform: translateY(3px);
        background-color: rgb(150, 148, 148);
        color: #029ebd;
    }

    .buttonSearch:hover[b-uzd20ukjjv] {
        background-color: rgb(150, 148, 148);
        color: white;
    }

.background[b-uzd20ukjjv] {
    background-color: #d2d0ce;
}

.fe-grid-new[b-uzd20ukjjv] {
    min-height: 21rem;
    height: 472px;
    overflow-y: auto;
}
/* _content/Anouk.UI/Features/Settings/Dossier/Pages/PartTypeDetails.razor.rz.scp.css */
.btnTypeAdd[b-hnr2i2j5bw] {
    width: 120px;
    color: white !important;
    background-color: #784d35;
}

    .btnTypeAdd:hover[b-hnr2i2j5bw] {
        color: white;
        outline: none;
        background-color: #9d694c;
    }

    .btnTypeAdd:focus[b-hnr2i2j5bw] {
        outline: none;
        box-shadow: 0 0 5px black;
    }

.btnTypeEdit[b-hnr2i2j5bw] {
    width: 120px;
    color: white !important;
    background-color: #784d35;
}

    .btnTypeEdit:hover[b-hnr2i2j5bw] {
        color: white;
        outline: none;
        background-color: #9d694c;
    }

    .btnTypeEdit:focus[b-hnr2i2j5bw] {
        outline: none;
        box-shadow: 0 0 5px black;
    }

.btnDelete[b-hnr2i2j5bw] {
    width: 120px;
    margin-right: 5px !important;
}

.btn-type-cancel[b-hnr2i2j5bw] {
    width: 120px;
}

.background[b-hnr2i2j5bw] {
    background-color: #d2d0ce;
}

    .d-flex[b-hnr2i2j5bw] {
        display: flex;
        justify-content: start;
    }

    .flex[b-hnr2i2j5bw] {
        display: none;
    }
/* _content/Anouk.UI/Features/Settings/Dossier/Pages/PartTypeOverview.razor.rz.scp.css */
.background[b-h0fmxrp6y3] {
    background-color: #d2d0ce;
}

.fixed-bottom[b-h0fmxrp6y3] {
    position: fixed;
    bottom: 0;
    width: 100%;
}

.buttonSearch[b-h0fmxrp6y3] {
    color: white;
    background-color: rgb(175, 175, 175);
    padding: 7px 7px;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .buttonSearch:active[b-h0fmxrp6y3] {
        transform: translateY(3px);
        background-color: rgb(150, 148, 148);
        color: #029ebd;
    }

    .buttonSearch:hover[b-h0fmxrp6y3] {
        background-color: rgb(150, 148, 148);
        color: #029ebd;
    }

.form-s[b-h0fmxrp6y3] {
    max-width: 250px;
}

.form-c[b-h0fmxrp6y3] {
    max-width: 100px;
}

.input-container[b-h0fmxrp6y3] {
    position: relative;
    display: flex;
    align-items: center;
}

    .input-container input[b-h0fmxrp6y3] {
        flex: 1;
        padding-right: 30px;
    }

    .input-container .percentage-sign[b-h0fmxrp6y3] {
        position: absolute;
        left: 110px;
    }

span[b-h0fmxrp6y3] {
    font-size: 16px;
}

.fe-grid-parts[b-h0fmxrp6y3] {
    min-height: 21rem;
    height: 452px;
    overflow-y: auto;
}
/* _content/Anouk.UI/Features/Settings/Dossier/Pages/TaskTypeDetails.razor.rz.scp.css */
.btnTypeAdd[b-fzp3bvrl7k] {
    width: 120px;
    color: white !important;
    background-color: #784d35;
}

    .btnTypeAdd:hover[b-fzp3bvrl7k] {
        color: white;
        outline: none;
        background-color: #9d694c;
    }

    .btnTypeAdd:focus[b-fzp3bvrl7k] {
        outline: none;
        box-shadow: 0 0 5px black;
    }

.btnTypeEdit[b-fzp3bvrl7k] {
    width: 120px;
    color: white !important;
    background-color: #784d35;
}

    .btnTypeEdit:hover[b-fzp3bvrl7k] {
        color: white;
        outline: none;
        background-color: #9d694c;
    }

    .btnTypeEdit:focus[b-fzp3bvrl7k] {
        outline: none;
        box-shadow: 0 0 5px black;
    }

.btnDelete[b-fzp3bvrl7k] {
    width: 120px;
    margin-right: 5px !important;
}

.btn-type-cancel[b-fzp3bvrl7k] {
    width: 120px;
}

.input-container[b-fzp3bvrl7k] {
    position: relative;
}

.percentage[b-fzp3bvrl7k] {
    position: absolute;
    bottom: 5px;
    right: -18px;
    font-weight: bold;
}

.background[b-fzp3bvrl7k] {
    background-color: #d2d0ce;
}

    .d-flex[b-fzp3bvrl7k] {
        display: flex;
        justify-content: start;
    }

    .flex[b-fzp3bvrl7k] {
        display: none;
    }






/* _content/Anouk.UI/Features/Settings/Dossier/Pages/TaskTypeOverview.razor.rz.scp.css */
.background[b-gv1oz92c48] {
    background-color: #d2d0ce;
}

.fixed-bottom[b-gv1oz92c48] {
    position: fixed;
    bottom: 0;
    width: 100%;
}

.buttonSearch[b-gv1oz92c48] {
    color: white;
    background-color: rgb(175, 175, 175);
    padding: 7px 7px;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .buttonSearch:active[b-gv1oz92c48] {
        transform: translateY(3px);
        background-color: rgb(150, 148, 148);
        color: #029ebd;
    }

    .buttonSearch:hover[b-gv1oz92c48] {
        background-color: rgb(150, 148, 148);
        color: #029ebd;
    }

.form-s[b-gv1oz92c48] {
    max-width: 250px;
}

.form-c[b-gv1oz92c48] {
    max-width: 100px;
}

.input-container[b-gv1oz92c48] {
    position: relative;
    display: flex;
    align-items: center;
}

    .input-container input[b-gv1oz92c48] {
        flex: 1;
        padding-right: 30px;
    }

    .input-container .percentage-sign[b-gv1oz92c48] {
        position: absolute;
        left: 110px;
    }

span[b-gv1oz92c48] {
    font-size: 16px;
}

.fe-grid-task[b-gv1oz92c48] {
    min-height: 21rem;
    height: 452px;
    overflow-y: auto;
}
/* _content/Anouk.UI/Features/Settings/Hub/ConfigurationLayout.razor.rz.scp.css */
/* Same look as DossierLayout's drawer: the menu stays pinned and the page scrolls inside the content
   pane. The mini-rail and overlay rules below mirror DossierLayout.razor.css (scoped CSS cannot be
   shared between components). */
.config-content[b-hhf0yv84wl] {
    height: calc(100vh - 170px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}

.config-layout[b-hhf0yv84wl]  .k-drawer-content {
    overflow-x: hidden;
}

/* ── Compact (≤900px): icon rail + full-tree overlay ─────────────────── */
.config-compact-shell[b-hhf0yv84wl] {
    align-items: stretch;
}

.config-compact-content[b-hhf0yv84wl] {
    flex: 1;
    min-width: 0;
}

.k-drawer-mini-rail[b-hhf0yv84wl] {
    flex: none;
    width: 48px;
    border-right: 1px solid var(--rule, rgba(255, 255, 255, 0.16));
    overflow-x: hidden;
}

.k-drawer-items-mini[b-hhf0yv84wl] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.k-drawer-item-mini[b-hhf0yv84wl] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    cursor: pointer;
}

.mini-rail-menu-toggle[b-hhf0yv84wl] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
}

.drawer-overlay-backdrop[b-hhf0yv84wl] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1900;
}

.drawer-overlay-panel[b-hhf0yv84wl] {
    position: fixed;
    top: 50px;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    background: var(--bg-elev, #1a1a1a);
    border-right: 1px solid var(--rule, rgba(255, 255, 255, 0.16));
    box-shadow: var(--shadow-lg);
    z-index: 1901;
    overflow-y: auto;
}
/* _content/Anouk.UI/Features/Settings/Insurance/Pages/HourlyRateDetails.razor.rz.scp.css */
.btn-type-save[b-muv4zd2q0a] {
    color: white;
    background-color: #784d35;
}

    .btn-type-save:hover[b-muv4zd2q0a] {
        color: white;
        outline: none;
        background-color: #9d694c;
    }

    .btn-type-save:focus[b-muv4zd2q0a] {
        outline: none;
        box-shadow: 0 0 5px black;
    }

.btn-type-cancel:focus[b-muv4zd2q0a] {
    outline: none;
    box-shadow: 0 0 5px black;
}

.edit-buttons[b-muv4zd2q0a] {
    margin-left: 16px;
}

.background[b-muv4zd2q0a] {
    background-color: #d2d0ce;
}
/* _content/Anouk.UI/Features/Settings/Insurance/Pages/HourlyRateOverview.razor.rz.scp.css */
.input-container[b-ej4a3w3tyj] {
    width: 200px !important;
}

.input-container2[b-ej4a3w3tyj] {
    width: 100px;
}

.button[b-ej4a3w3tyj] {
    color: white;
    background-color: rgb(175, 175, 175);
    padding: 3px 7px;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .button:active[b-ej4a3w3tyj] {
        transform: translateY(3px);
        background-color: rgb(150, 148, 148);
        color: #029ebd;
    }

    .button:hover[b-ej4a3w3tyj] {
        background-color: rgb(150, 148, 148);
        color: white;
    }

.background[b-ej4a3w3tyj] {
    background-color: #d2d0ce;
}
/* _content/Anouk.UI/Features/Settings/Insurance/Pages/InsuranceCompanyDetails.razor.rz.scp.css */
.background[b-09b2ibpjzz] {
    background: rgb(68, 68, 68);
}

.btnTypeAdd[b-09b2ibpjzz] {
    width: 110px;
    color: white !important;
    background-color: #784d35;
}

    .btnTypeAdd:hover[b-09b2ibpjzz] {
        color: white;
        outline: none;
        background-color: #9d694c;
    }

    .btnTypeAdd:focus[b-09b2ibpjzz] {
        outline: none;
        box-shadow: 0 0 5px black;
    }

.btnTypeEdit[b-09b2ibpjzz] {
    width: 110px;
    color: white !important;
    background-color: #784d35;
}

    .btnTypeEdit:hover[b-09b2ibpjzz] {
        color: white;
        outline: none;
        background-color: #9d694c;
    }

    .btnTypeEdit:focus[b-09b2ibpjzz] {
        outline: none;
        box-shadow: 0 0 5px black;
    }

.btnDelete[b-09b2ibpjzz] {
    width: 110px;
    margin-right: 5px !important;
}

.btn-type-cancel[b-09b2ibpjzz] {
    width: 110px !important;
}

.m-top[b-09b2ibpjzz] {
    margin-top: 33px;
}

.padding-top[b-09b2ibpjzz] {
    padding-top: 33px;
}

.upload[b-09b2ibpjzz] {
    color: white !important;
    background-color: #784d35;
}

.insurer-logo[b-09b2ibpjzz] {
    width: 80px;
    height: auto;
}

.w-70[b-09b2ibpjzz] {
    width: 70%;
}

.w-30[b-09b2ibpjzz] {
    width: 30%;
}

.link[b-09b2ibpjzz] {
    color: #0088cc !important;
}

.position-relative[b-09b2ibpjzz] {
    position: relative; 
}

.centered-link[b-09b2ibpjzz] {
    position: absolute; 
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    text-decoration: none;
    text-align: center; 
}

p.m-0[b-09b2ibpjzz] {
    margin: 0; 
}

.image[b-09b2ibpjzz] {
    max-width: 150px;
    float:right;
}
/* _content/Anouk.UI/Features/Settings/Insurance/Pages/InsuranceCompanyOverview.razor.rz.scp.css */

.buttonSearch[b-uov5qb736n] {
    width: 100%;
    max-width: 200px;
    color: white;
    background-color: rgb(175, 175, 175);
    padding: 7px 7px;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .buttonSearch:active[b-uov5qb736n] {
        transform: translateY(3px);
        background-color: rgb(150, 148, 148);
        color: #029ebd;
    }

    .buttonSearch:hover[b-uov5qb736n] {
        background-color: rgb(150, 148, 148);
        color: white;
    }

.button[b-uov5qb736n] {
    color: white;
    background-color: rgb(175, 175, 175);
    padding: 3px 7px;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .button:active[b-uov5qb736n] {
        transform: translateY(3px);
        background-color: rgb(150, 148, 148);
        color: #029ebd;
    }

    .button:hover[b-uov5qb736n] {
        background-color: rgb(150, 148, 148);
        color: white;
    }

.background[b-uov5qb736n] {
    background-color: #d2d0ce;
}

.input-container[b-uov5qb736n] {
    max-width: 250px;
}

.input-container2[b-uov5qb736n] {
    max-width: 150px;
}

.input-container3[b-uov5qb736n] {
    max-width: 95px;
}

.input-container4[b-uov5qb736n] {
    max-width: 90px;
}

.sticky-bottom[b-uov5qb736n] {
    position: sticky;
    bottom: 0;
    width: 100%;
}

.mt[b-uov5qb736n] {
    margin-top: 37px;
}
/* _content/Anouk.UI/Features/Settings/Insurance/Pages/RebateSchemeDetails.razor.rz.scp.css */
.background[b-7n15t13f0k] {
    background-color: #d2d0ce;
}

.btnTypeAdd[b-7n15t13f0k] {
    width: 110px;
    color: white !important;
    background-color: #784d35;
}

    .btnTypeAdd:hover[b-7n15t13f0k] {
        color: white;
        outline: none;
        background-color: #9d694c;
    }

    .btnTypeAdd:focus[b-7n15t13f0k] {
        outline: none;
        box-shadow: 0 0 5px black;
    }

.btnTypeEdit[b-7n15t13f0k] {
    width: 110px;
    color: white !important;
    background-color: #784d35;
}

    .btnTypeEdit:hover[b-7n15t13f0k] {
        color: white;
        outline: none;
        background-color: #9d694c;
    }

    .btnTypeEdit:focus[b-7n15t13f0k] {
        outline: none;
        box-shadow: 0 0 5px black;
    }

.btnDelete[b-7n15t13f0k] {
    width: 110px;
    margin-right: 5px !important;
}

.btn-type-cancel[b-7n15t13f0k] {
    width: 110px !important;
}

td[b-7n15t13f0k] {
    font-weight: normal !important;
}
/* _content/Anouk.UI/Features/Settings/Insurance/Pages/RebateSchemeOverview.razor.rz.scp.css */

.buttonSearch[b-7afrlkyi02] {
    width: 100%;
    max-width: 200px;
    color: white;
    background-color: rgb(175, 175, 175);
    padding: 7px 7px;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .buttonSearch:active[b-7afrlkyi02] {
        transform: translateY(3px);
        background-color: rgb(150, 148, 148);
        color: #029ebd;
    }

    .buttonSearch:hover[b-7afrlkyi02] {
        background-color: rgb(150, 148, 148);
        color: white;
    }

.button[b-7afrlkyi02] {
    color: white;
    background-color: rgb(175, 175, 175);
    padding: 3px 7px;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .button:active[b-7afrlkyi02] {
        transform: translateY(3px);
        background-color: rgb(150, 148, 148);
        color: #029ebd;
    }

    .button:hover[b-7afrlkyi02] {
        background-color: rgb(150, 148, 148);
        color: white;
    }

.background[b-7afrlkyi02] {
    background-color: #d2d0ce;
}

.input-container[b-7afrlkyi02] {
    max-width: 200px;
}

input[b-7afrlkyi02],
select[b-7afrlkyi02] {
    max-width: 250px !important;
}

.sticky-bottom[b-7afrlkyi02] {
    position: sticky;
    bottom: 0;
    width: 100%;
}

/* _content/Anouk.UI/Features/Settings/Other/Components/Tiles/ContactInformationsTile.razor.rz.scp.css */
.k-d-flex.columns-gap[b-xi4r3obz14] {
    gap: 3rem;
    padding-left: 2rem;
}
/* _content/Anouk.UI/Features/Settings/Other/Pages/AnalysisCategoryDetails.razor.rz.scp.css */
.background[b-hda0h1i4zs] {
    background-color: #d2d0ce;
}

.btnTypeAdd[b-hda0h1i4zs] {
    width: 110px;
    color: white;
    background-color: #784d35;
    border-radius: 5px;
    padding: 6px;
}

    .btnTypeAdd:hover[b-hda0h1i4zs] {
        color: white;
        outline: none;
        background-color: #9d694c;
    }

.btn-type-new[b-hda0h1i4zs] {
    width: 110px;
    color: white;
    background-color: #5c636a;
    border-radius: 5px;
    padding: 6px;
}

    .btn-type-new:hover[b-hda0h1i4zs] {
        background-color: #717a83;
    }

.btn-type-cancel[b-hda0h1i4zs] {
    width: 110px;
    color: white;
    background-color: #5c636a;
    border-radius: 5px;
    padding: 6px;
}

    .btn-type-cancel:hover[b-hda0h1i4zs] {
        background-color: #717a83;
    }
/* _content/Anouk.UI/Features/Settings/Other/Pages/AnalysisCategoryOverview.razor.rz.scp.css */

.background[b-spltgxwkd0] {
    background-color: #d2d0ce;
}
/* _content/Anouk.UI/Features/Settings/Other/Pages/BrokerDetails.razor.rz.scp.css */
.btnTypeAdd[b-4m63017jmq] {
    width: 110px;
    color: white;
    background-color: #784d35;
    border-radius: 5px;
    padding: 6px;
}

    .btnTypeAdd:hover[b-4m63017jmq] {
        color: white;
        outline: none;
        background-color: #9d694c;
    }

.btn-type-new[b-4m63017jmq] {
    width: 110px;
    color: white;
    background-color: #5c636a;
    border-radius: 5px;
    padding: 6px;
}

    .btn-type-new:hover[b-4m63017jmq] {
        background-color: #717a83;
    }

.btn-type-cancel[b-4m63017jmq] {
    width: 110px;
    color: white;
    background-color: #5c636a;
    border-radius: 5px;
    padding: 6px;
}

    .btn-type-cancel:hover[b-4m63017jmq] {
        background-color: #717a83;
    }


.background[b-4m63017jmq] {
    background-color: #d2d0ce;
}

.input-container2[b-4m63017jmq] {
    width: 110px;
}
/* _content/Anouk.UI/Features/Settings/Other/Pages/BrokerOverview.razor.rz.scp.css */

.background[b-6lv7d496zb] {
    background-color: #d2d0ce;
}
/* _content/Anouk.UI/Features/Settings/Other/Pages/CourtesyCarClassDetails.razor.rz.scp.css */
.background[b-zmilrevqpv] {
    background-color: #d2d0ce;
}

.btnTypeAdd[b-zmilrevqpv] {
    width: 110px;
    color: white;
    background-color: #784d35;
    border-radius: 5px;
    padding: 6px;
}

    .btnTypeAdd:hover[b-zmilrevqpv] {
        color: white;
        outline: none;
        background-color: #9d694c;
    }

.btn-type-new[b-zmilrevqpv] {
    width: 110px;
    color: white;
    background-color: #5c636a;
    border-radius: 5px;
    padding: 6px;
}

    .btn-type-new:hover[b-zmilrevqpv] {
        background-color: #717a83;
    }

.btn-type-cancel[b-zmilrevqpv] {
    width: 110px;
    color: white;
    background-color: #5c636a;
    border-radius: 5px;
    padding: 6px;
}

    .btn-type-cancel:hover[b-zmilrevqpv] {
        background-color: #717a83;
    }

.background[b-zmilrevqpv] {
    background-color: #d2d0ce;
}
/* _content/Anouk.UI/Features/Settings/Other/Pages/CourtesyCarClassOverview.razor.rz.scp.css */

.btnTypeAdd[b-5hqx1tgyga] {
    width: 110px;
    color: white !important;
    background-color: #784d35;
}

    .btnTypeAdd:hover[b-5hqx1tgyga] {
        color: white;
        outline: none;
        background-color: #9d694c;
    }

    .btnTypeAdd:focus[b-5hqx1tgyga] {
        outline: none;
        box-shadow: 0 0 5px black;
    }

.btnTypeEdit[b-5hqx1tgyga] {
    width: 110px;
    color: white !important;
    background-color: #784d35;
}

    .btnTypeEdit:hover[b-5hqx1tgyga] {
        color: white;
        outline: none;
        background-color: #9d694c;
    }

    .btnTypeEdit:focus[b-5hqx1tgyga] {
        outline: none;
        box-shadow: 0 0 5px black;
    }

.btnDelete[b-5hqx1tgyga] {
    width: 110px;
    margin-right: 5px !important;
}

.btn-type-cancel[b-5hqx1tgyga] {
    width: 110px !important;
}

.background[b-5hqx1tgyga] {
    background-color: #d2d0ce;
}
/* _content/Anouk.UI/Features/Settings/Other/Pages/CustomerTypeDetails.razor.rz.scp.css */
.btnTypeAdd[b-e1p6lhrbwe] {
    width: 110px;
    color: white;
    background-color: #784d35;
    border-radius: 5px;
    padding: 6px;
}

    .btnTypeAdd:hover[b-e1p6lhrbwe] {
        color: white;
        outline: none;
        background-color: #9d694c;
    }

.btn-type-new[b-e1p6lhrbwe] {
    width: 110px;
    color: white;
    background-color: #5c636a;
    border-radius: 5px;
    padding: 6px;
}

    .btn-type-new:hover[b-e1p6lhrbwe] {
        background-color: #717a83;
    }

.btn-type-cancel[b-e1p6lhrbwe] {
    width: 110px;
    color: white;
    background-color: #5c636a;
    border-radius: 5px;
    padding: 6px;
}

    .btn-type-cancel:hover[b-e1p6lhrbwe] {
        background-color: #717a83;
    }

.background[b-e1p6lhrbwe] {
    background-color: #d2d0ce;
}
/* _content/Anouk.UI/Features/Settings/Other/Pages/CustomerTypeOverview.razor.rz.scp.css */

.background[b-fd0zmqgrwf] {
    background-color: #d2d0ce;
}
/* _content/Anouk.UI/Features/Settings/Other/Pages/SupplierDetails.razor.rz.scp.css */
.btnTypeAdd[b-yesw3qfywk] {
    width: 110px;
    color: white;
    background-color: #784d35;
    border-radius: 5px;
    padding: 6px;
}

    .btnTypeAdd:hover[b-yesw3qfywk] {
        color: white;
        outline: none;
        background-color: #9d694c;
    }

.btn-type-new[b-yesw3qfywk] {
    width: 110px;
    color: white;
    background-color: #5c636a;
    border-radius: 5px;
    padding: 6px;
}

    .btn-type-new:hover[b-yesw3qfywk] {
        background-color: #717a83;
    }

.btn-type-cancel[b-yesw3qfywk] {
    width: 110px;
    color: white;
    background-color: #5c636a;
    border-radius: 5px;
    padding: 6px;
}

    .btn-type-cancel:hover[b-yesw3qfywk] {
        background-color: #717a83;
    }


.background[b-yesw3qfywk] {
    background-color: #d2d0ce;
}

.input-container2[b-yesw3qfywk] {
    width: 110px;
}
/* _content/Anouk.UI/Features/Settings/Other/Pages/SupplierOverview.razor.rz.scp.css */

.background[b-2mdoh3pwl4] {
    background-color: #d2d0ce;
}
/* _content/Anouk.UI/Features/Settings/Other/Pages/SurveyorDetails.razor.rz.scp.css */
.btnTypeAdd[b-g83z6k0pt9] {
    width: 110px;
    color: white;
    background-color: #784d35;
    border-radius: 5px;
    padding: 6px;
}

    .btnTypeAdd:hover[b-g83z6k0pt9] {
        color: white;
        outline: none;
        background-color: #9d694c;
    }

.btn-type-new[b-g83z6k0pt9] {
    width: 110px;
    color: white;
    background-color: #5c636a;
    border-radius: 5px;
    padding: 6px;
}

    .btn-type-new:hover[b-g83z6k0pt9] {
        background-color: #717a83;
    }

.btn-type-cancel[b-g83z6k0pt9] {
    width: 110px;
    color: white;
    background-color: #5c636a;
    border-radius: 5px;
    padding: 6px;
}

    .btn-type-cancel:hover[b-g83z6k0pt9] {
        background-color: #717a83;
    }


.background[b-g83z6k0pt9] {
    background-color: #d2d0ce;
}

.input-container2[b-g83z6k0pt9] {
    width: 110px;
}
/* _content/Anouk.UI/Features/Settings/Other/Pages/SurveyorOverview.razor.rz.scp.css */

.background[b-rtm1nvd55j] {
    background-color: #d2d0ce;
}

.input-container2[b-rtm1nvd55j] {
    width: 110px;
}
/* _content/Anouk.UI/Features/Settings/Other/Pages/SystemParametersOverview.razor.rz.scp.css */
.mt[b-0tk80d39ty] {
    margin-top: 20px;
}

.background[b-0tk80d39ty] {
    background-color: #d2d0ce;
}

.btnTypeAdd[b-0tk80d39ty] {
    width: 110px;
    color: white;
    background-color: #784d35;
    border-radius: 5px;
    padding: 6px;
}

    .btnTypeAdd:hover[b-0tk80d39ty] {
        color: white;
        outline: none;
        background-color: #9d694c;
    }

.btn-type-new[b-0tk80d39ty] {
    width: 110px;
    color: white;
    background-color: #5c636a;
    border-radius: 5px;
    padding: 6px;
}

    .btn-type-new:hover[b-0tk80d39ty] {
        background-color: #717a83;
    }

.btn-type-cancel[b-0tk80d39ty] {
    width: 110px;
    color: white;
    background-color: #5c636a;
    border-radius: 5px;
    padding: 6px;
}

    .btn-type-cancel:hover[b-0tk80d39ty] {
        background-color: #717a83;
    }

@media (max-width: 767.98px) {

    .center[b-0tk80d39ty] {
        display: inline-block;
    }
}

@media (min-width: 768px) {

    .center[b-0tk80d39ty] {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
}
/* _content/Anouk.UI/Features/Settings/Pages/ConfigurationHub.razor.rz.scp.css */
/* Groups flow side by side: each group is as wide as its cards and wraps to the next line only
   when it no longer fits, instead of every group taking a full-width row. */
.config-hub[b-glu4h2h0f4] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.5rem 2rem;
}

.config-cluster[b-glu4h2h0f4] {
    flex: 0 1 auto;
    max-width: 100%;
}

/* Same typeface as the page title (h1 "Configuratie": weight 200, normal case), smaller. */
.config-cluster-title[b-glu4h2h0f4] {
    font-size: 1.25rem;
    font-weight: 200;
    margin: 0 0 0.5rem 0;
}

/* Fixed-width cards so they line up across groups; a group wider than the page wraps its own cards. */
.config-card-grid[b-glu4h2h0f4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Styled like the app's tiles: a Kendo card (k-card in the markup) on the card surface, borderless
   like ".tile-rows .k-tilelayout-item.k-card"; hover outlines it in the primary colour. */
.config-card[b-glu4h2h0f4] {
    width: 220px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    border: 0;
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.12s ease;
}

.config-card:hover[b-glu4h2h0f4] {
    box-shadow: inset 0 0 0 1px var(--kendo-color-primary, #3f51b5);
}

.config-card-text[b-glu4h2h0f4] {
    font-size: 0.9rem;
    line-height: 1.2;
}
/* _content/Anouk.UI/Features/Settings/Personnel/Pages/CategoryRateDetails.razor.rz.scp.css */

.background[b-u8nwx8r60c] {
    background-color: #d2d0ce;
}
/* _content/Anouk.UI/Features/Settings/Personnel/Pages/CategoryRateOverview.razor.rz.scp.css */

.buttonSearch[b-sbabs4dxs5] {
    width: 120px;
    color: white;
    background-color: rgb(175, 175, 175);
    padding: 7px 7px;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .buttonSearch:active[b-sbabs4dxs5] {
        transform: translateY(3px);
        background-color: rgb(150, 148, 148);
        color: #029ebd;
    }

    .buttonSearch:hover[b-sbabs4dxs5] {
        background-color: rgb(150, 148, 148);
        color: white;
    }

.background[b-sbabs4dxs5] {
    background-color: #d2d0ce;
}

.form-s[b-sbabs4dxs5] {
    max-width: 200px !important;
}

.form-c[b-sbabs4dxs5] {
    max-width: 100px;
}

.background[b-sbabs4dxs5] {
    background-color: #d2d0ce;
}

.table-container[b-sbabs4dxs5] {
    max-height: 300px;
    overflow-y: auto;
}
/* _content/Anouk.UI/Features/Settings/Personnel/Pages/PersonnelDetails.razor.rz.scp.css */

.mt3[b-ltrwyxmgz3] {
    margin-top: 28px !important;
}

.background[b-ltrwyxmgz3] {
    background-color: #d2d0ce;
}

.dropdown-toggle[b-ltrwyxmgz3] {
    height: 28px !important;
}

@media (min-width: 992px) {
    .check-input[b-ltrwyxmgz3] {
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 991.98px) {
    .check-input[b-ltrwyxmgz3] {
        display: flex;
        justify-content: start;
    }
}
/* _content/Anouk.UI/Features/Settings/Personnel/Pages/PersonnelOverview.razor.rz.scp.css */

.buttonSearch[b-1ukqza318j] {
    width: 120px;
    color: white;
    background-color: rgb(175, 175, 175);
    padding: 7px 7px;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .buttonSearch:active[b-1ukqza318j] {
        transform: translateY(3px);
        background-color: rgb(150, 148, 148);
        color: #029ebd;
    }

    .buttonSearch:hover[b-1ukqza318j] {
        background-color: rgb(150, 148, 148);
        color: white;
    }

.mt3[b-1ukqza318j] {
    margin-top: 28px !important;
}

.background[b-1ukqza318j] {
    background-color: #d2d0ce;
}

.dropdown-toggle[b-1ukqza318j] {
    height: 28px !important;
}

@media (min-width: 992px) {
    .check-input[b-1ukqza318j] {
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 991.98px) {
    .check-input[b-1ukqza318j] {
        display: flex;
        justify-content: start;
    }
}
/* _content/Anouk.UI/Features/Settings/Sites/Pages/SiteDetails.razor.rz.scp.css */
/* "Inherited from the company default" note on the Standard repair order tile: the stock
   k-messagebox-info fill is too bright on the dark theme, so keep the info text/border and drop the fill
   (both themes). */
.k-messagebox.site-inherited-note[b-5fhcdyqsii] {
    background-color: transparent;
}

/* Left menu: a TelerikDrawer like DossierLayout's. The tiles scroll inside the drawer content so
   the menu stays pinned (DossierLayout.razor.css does the same). */
.site-details-shell[b-5fhcdyqsii]  .k-drawer-content {
    overflow-x: hidden;
}

/* Compact (≤900px): icon-only rail, mirroring the dossier's mini rail. */
.site-details-rail[b-5fhcdyqsii] {
    flex: none;
    width: 48px;
    margin: 0;
    padding: 0;
    list-style: none;
    border-right: 1px solid var(--rule, rgba(255, 255, 255, 0.16));
}

.site-details-rail-item[b-5fhcdyqsii] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    cursor: pointer;
}
/* _content/Anouk.UI/Features/Settings/Templates/Pages/MasterTemplateDetails.razor.rz.scp.css */
.btnTypeAdd[b-ddkaovnx9h] {
    width: 110px;
    color: white !important;
    background-color: #784d35;
}

    .btnTypeAdd:hover[b-ddkaovnx9h] {
        color: white;
        outline: none;
        background-color: #9d694c;
    }

    .btnTypeAdd:focus[b-ddkaovnx9h] {
        outline: none;
        box-shadow: 0 0 5px black;
    }

.btn-type-cancel[b-ddkaovnx9h] {
    width: 110px !important;
}
/* _content/Anouk.UI/Features/Settings/Templates/Pages/MasterTemplateOverview.razor.rz.scp.css */
.background[b-omt6tyuoku] {
    background-color: #d2d0ce !important;
}

.btn-type-cancel[b-omt6tyuoku] {
    width: 110px !important;
}
/* _content/Anouk.UI/Features/Settings/Templates/Pages/TemplateDetails.razor.rz.scp.css */
/* _content/Anouk.UI/Features/Settings/Templates/Pages/TemplateOverview.razor.rz.scp.css */
.background[b-irljlfk42x] {
    background-color: #d2d0ce;
}

.input-container2[b-irljlfk42x] {
    width: 110px;
}
/* _content/Anouk.UI/Features/Shopfloor/Components/DossierModal/ActiveTaskHero.razor.rz.scp.css */
.active[b-44fhlzghv4] {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    background: var(--bg);
    color: var(--fg);
    
}

.active__main[b-44fhlzghv4] {
    min-width: 0;
}

/* typography comes from the .eyebrow utility class in app.css */
.active__eyebrow[b-44fhlzghv4] {
    /* intentionally empty: layout/typography inherited from .eyebrow */
}

/* rendered as <h3>, inherits size 1.2rem and weight 200 from style-guide §2.3 + app.css */
.active__name[b-44fhlzghv4] {
    margin: var(--space-2) 0 0;
    line-height: var(--line-height-display);
    letter-spacing: var(--letter-spacing-display);
    color: var(--fg);
}

.active__timer[b-44fhlzghv4] {
    margin-top: var(--space-3);
}

.active__timer-text[b-44fhlzghv4] {
    color: var(--fg);
    font-weight: var(--font-weight-medium);
}

.active__worker[b-44fhlzghv4] {
    margin-top: var(--space-2);
    color: var(--fg-muted);
}

.active__actions[b-44fhlzghv4] {
    display: flex;
    align-items: center;
    gap: var(--kendo-spacing-2);
}

/* Stop clock button — overrides Tertiary tomato (#ff3c00 from --kendo-color-tertiary)
   with the validation-error coral so it visually matches the over-budget bars + the
   form validation messages. Background/border only; typography untouched per §3.2. */
[b-44fhlzghv4] .stop-clock-btn {
    background-color: var(--validation-error);
    border-color: var(--validation-error);
}

[b-44fhlzghv4] .stop-clock-btn:hover {
    background-color: var(--validation-error);
    border-color: var(--validation-error);
    filter: brightness(0.9);
}
/* _content/Anouk.UI/Features/Shopfloor/Components/DossierModal/DossierModal.razor.rz.scp.css */
.rom[b-h5cjt2rlac] {
    /* Inverted sizing so the dialog never exceeds the visible viewport.
       Previously fixed at height:760px with max-height:95vh — on a 1080p
       laptop at 125% DPI the 760px height exceeded the visible area and
       the dialog was centered-overflowed, clipping both the top X and
       the bottom footer (issue #143). Using `height:95dvh; max-height:760px`
       keeps the desktop preference (760px when there's room) while
       guaranteeing the dialog always fits 95% of the dynamic viewport. */
    /* `position: relative` so .rom__busy-overlay can absolutely-position
       itself to the dialog's bounds. */
    position: relative;
    width: 95dvw;
    max-width: 1080px;
    /* Use CSS min() so the modal is ALWAYS ≤ 88dvh regardless of DPI or
       resolution — the old max-height:760px could exceed the viewport on
       125% DPI laptops where the effective CSS height is ~720-750px. */
    height: min(760px, 88dvh);
    max-height: unset;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-elev);
    color: var(--fg);
    
    /* Use the project-standard rule token (§5 of style-guide). The earlier
       brighter --scrim-modal-border (0.28 alpha) was visibly whitish; once
       the title bar surface dropped to --bg-muted (matching the rail), the
       standard --rule-strong (0.16 alpha) reads cleanly without overpowering
       the modal edge. */
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    /* the outer element is focusable for Esc-to-close — suppress the default
       browser ring; focus rings on interactive children remain visible. */
    outline: none;
}

/* ----- title bar ----- */
.rom__titlebar[b-h5cjt2rlac] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    height: 48px;
    /* asymmetric: 2px left (per design ask) — off the §4 --space-* scale, kept intentionally; right/top/bottom stay at --space-3 (12px) so the X button has breathing room */
    padding: var(--space-3) var(--space-3) var(--space-3) 2px;
    /* Matches the rail surface (--bg-muted) so the title bar reads as one
       visual band with the rail directly below — same colour family across
       the top-left of the dialog. The right pane below uses --bg-elev; the
       border-bottom rule (var(--rule)) separates the two visually. */
    background: var(--bg-muted);
    color: var(--fg);
    border-bottom: 1px solid var(--rule);
}

/* typography moved to .eyebrow utility class in app.css; only ellipsis layout remains */
.rom__crumb[b-h5cjt2rlac] {
    margin: 0;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rom__close[b-h5cjt2rlac] {
    width: 32px;
    height: 32px;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--fg);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--duration-fast) var(--ease-out);
}

    


.rom__close:focus-visible[b-h5cjt2rlac] {
    outline: 2px solid var(--kendo-color-primary);
    outline-offset: 2px;
}

/* Busy overlay — shown when a Play/Pause/Stop API call exceeds ~400 ms.
   Sits over the entire dialog, blocks pointer events, fades in. Matches
   the `.report-overlay` pattern in app.css. */
.rom__busy-overlay[b-h5cjt2rlac] {
    position: absolute;
    inset: 0;
    z-index: 100;
    
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
}

/* ----- body grid ----- */
.rom__body[b-h5cjt2rlac] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 320px 1fr;
}

/* ----- left rail border is applied via the .rom__body grid; VehicleRail owns its own background ----- */

/* ----- right pane ----- */
.rom__pane[b-h5cjt2rlac] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--bg);
}

/* ----- finish footer ----- */
.rom__finish[b-h5cjt2rlac] {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    padding: var(--space-2) var(--space-2);
    background: var(--bg-muted);
    border-top: 1px solid var(--rule-strong);
}

/* ── Phone layout (≤640px) ───────────────────────────────────────────────
   The desktop dialog is a side-by-side 320px rail + flexible pane. On a
   phone that 320px rail leaves almost nothing for the task pane, so the
   dialog goes full-screen and the body stacks into a single scrolling
   column: vehicle rail on top, task pane below. The whole body scrolls as
   one surface — the rail and phase list drop their own inner scrollbars
   (see VehicleRail / PhaseList) so there are no nested scroll traps. */
@media (max-width: 640px) {
    .rom[b-h5cjt2rlac] {
        width: 100dvw;
        max-width: 100dvw;
        height: 100dvh;
        max-height: 100dvh;
        border: 0;
        border-radius: 0;
    }

    .rom__body[b-h5cjt2rlac] {
        grid-template-columns: 1fr;
        grid-auto-rows: min-content;
        overflow-y: auto;
    }
}

/* _content/Anouk.UI/Features/Shopfloor/Components/DossierModal/JobTotalBar.razor.rz.scp.css */
.job-total[b-q6mzfn8b6s] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-2);
    background: var(--bg-elev);
    border-bottom: 1px solid var(--rule);
}

/* typography moved to .eyebrow utility class in app.css */
.job-total__label[b-q6mzfn8b6s] {
    white-space: nowrap;
}

.job-total__track[b-q6mzfn8b6s] {
    position: relative;
    height: var(--size-progress-thick);
    
   
      
    border: 1px solid var(--rule);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.job-total__fill[b-q6mzfn8b6s] {
    height: 100%;
 
    border-radius: var(--radius-pill);
    transition: width var(--duration-bar) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
}

.job-total__fill--over[b-q6mzfn8b6s] {
    background: var(--validation-error);
}

.job-total__time[b-q6mzfn8b6s] {
    white-space: nowrap;
}

/* rendered as <h5>; size 1rem / weight 500 inherited from heading cascade */
.job-total__time-actual[b-q6mzfn8b6s] {
    margin: 0;
    display: inline;
    color: var(--fg);
}

/* size comes from .text-body-sm (0.85rem) on the span */
.job-total__time-planned[b-q6mzfn8b6s] {
    color: var(--fg-subtle);
}
/* _content/Anouk.UI/Features/Shopfloor/Components/DossierModal/LicensePlate.razor.rz.scp.css */
.plate[b-let4djr15n] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--rule-strong);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-xs);
    font-size: 1rem;

}

/* size comes from .small-text (0.7rem) on the span */
    .plate__country[b-let4djr15n] {

        .plate__number {
            /* inherits font + color from .plate */
        }
    }
/* _content/Anouk.UI/Features/Shopfloor/Components/DossierModal/PhaseButton.razor.rz.scp.css */
.phase-btn[b-f5jv1c50w1] {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition:
        background-color var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out);
}

.phase-btn--idle[b-f5jv1c50w1],
.phase-btn--paused[b-f5jv1c50w1] {
    background: var(--bg);
    border: 1px solid var(--rule-strong);
    color: var(--fg);
}

.phase-btn--idle:hover[b-f5jv1c50w1],
.phase-btn--paused:hover[b-f5jv1c50w1] {
    background: var(--success);
}

.phase-btn[disabled][b-f5jv1c50w1] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Running state shares the Stop clock button's coral so "pause this phase" reads
   as the same destructive/halt affordance — see ActiveTaskHero.razor.css .stop-clock-btn. */
.phase-btn--running[b-f5jv1c50w1] {
    background: var(--validation-error);
    border: 1px solid var(--validation-error);
}

.phase-btn--running:hover[b-f5jv1c50w1] {
    filter: brightness(0.9);
}

.phase-btn--done[b-f5jv1c50w1] {
    background: transparent;
    border: 1px solid var(--success);
    color: var(--success);
}

.phase-btn--done:hover[b-f5jv1c50w1] {
    background: var(--success);
    color: var(--bg);
}

.phase-btn:focus-visible[b-f5jv1c50w1] {
    outline: 2px solid;
    outline-offset: 2px;
}
/* _content/Anouk.UI/Features/Shopfloor/Components/DossierModal/PhaseList.razor.rz.scp.css */
.phase-list[b-yybpuhgi8s] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background: var(--bg-elev);
}

.phase-list__header[b-yybpuhgi8s] {
    position: sticky;
    top: 0;
    z-index: 1;
    display: grid;
    grid-template-columns: 64px 1fr 140px 180px;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-2);
    background: var(--bg-muted);
    border-bottom: 1px solid var(--rule);
}

.phase-list--no-btn .phase-list__header[b-yybpuhgi8s] {
    grid-template-columns: 1fr 140px 180px;
}

/* typography moved to .eyebrow utility class in app.css; only layout overrides remain */
.phase-list__header-cell--hours[b-yybpuhgi8s] {
    text-align: right;
}

.phase-list__body[b-yybpuhgi8s] {
    /* rows flow naturally; each PhaseRow owns its own bottom border */
}

/* ── Phone layout (≤640px) ───────────────────────────────────────────────
   The 4-column header (button · phase · progress · hours) can't fit a phone
   width, and once PhaseRow reflows to a stacked 2-row layout the column
   labels no longer line up with anything — so hide the header entirely. The
   list also drops its own scroll: on phones the whole modal body scrolls. */
@media (max-width: 640px) {
    .phase-list[b-yybpuhgi8s] {
        flex: 0 0 auto;
        overflow-y: visible;
    }

    .phase-list__header[b-yybpuhgi8s] {
        display: none;
    }
}
/* _content/Anouk.UI/Features/Shopfloor/Components/DossierModal/PhaseRow.razor.rz.scp.css */
.phase[b-ubzunwz2io] {
    position: relative;
    display: grid;
    grid-template-columns: 64px 1fr 140px 180px;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-2);
    border-bottom: 1px solid var(--rule);
    background: var(--bg-elev);
    transition: background-color var(--duration-fast) var(--ease-out);

    &.phase--no-btn {
        grid-template-columns: 1fr 140px 180px;
    }

    .phase--running[b-ubzunwz2io]::before {
        content: '';
        position: absolute;
        inset: 0;

        pointer-events: none;
    }

    /* column 1 — button cell (PhaseButton is 56px; cell is 64px to give 4px breathing on each side) */

    .phase__btn[b-ubzunwz2io] {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    /* column 2 — name + sub-line */

    .phase__main[b-ubzunwz2io] {
        position: relative;
        min-width: 0;
    }

    /* rendered as <h4>, inherits size 1.1rem and weight 400 from style-guide §2.3 */

    .phase__name[b-ubzunwz2io] {
        margin: 0;
        color: var(--fg);

        letter-spacing: var(--letter-spacing-heading);
    }

    .phase--done .phase__name[b-ubzunwz2io] {
        color: var(--fg);
    }

    .phase__name-check[b-ubzunwz2io] {
        color: var(--kendo-color-info);
        margin-left: var(--space-1);
    }

    .phase__sub[b-ubzunwz2io] {
        font-size: 0.85rem;
        margin-top: var(--space-1);
    }

    .phase__sub-time[b-ubzunwz2io] {

        color: var(--fg);
    }

    .phase__sub-time--over[b-ubzunwz2io] {
        color: var(--validation-error);
    }

    /* column 3 — progress bar */

    .phase__progress[b-ubzunwz2io] {
        position: relative;
    }

    .phase__progress-bar[b-ubzunwz2io] {
        width: 100%;
        height: var(--size-progress-thin);
        background: var(--scrim-progress-bg);
        border-radius: var(--radius-pill);
        overflow: hidden;
    }

    .phase__progress-fill[b-ubzunwz2io] {
        height: 100%;
        border-radius: var(--radius-pill);
        transition: width var(--duration-bar) var(--ease-out),
        background-color var(--duration-fast) var(--ease-out);
    }

    .phase__progress-fill--idle[b-ubzunwz2io] {
        background: transparent;
    }

    .phase__progress-fill--paused[b-ubzunwz2io] {
        background: var(--success);
    }

    .phase__progress-fill--running[b-ubzunwz2io] {
        background: var(--success);
    }

    .phase__progress-fill--done[b-ubzunwz2io] {
        background: var(--kendo-color-info);
    }

    .phase__progress-fill--over[b-ubzunwz2io] {
        background: var(--validation-error);
    }

    /* column 4 — hours; rendered as <h5>, size 1rem / weight 500 come from heading cascade */

    .phase__hours[b-ubzunwz2io] {
        position: relative;
        margin: 0;
        text-align: right;
        color: var(--fg);
        white-space: nowrap;
    }

    .phase__hours--over[b-ubzunwz2io] {
        color: var(--validation-error);
    }
}

/* ── Phone layout (≤640px) ───────────────────────────────────────────────
   The 4-column desktop row (64px button · 1fr name · 140px progress · 180px
   hours ≈ 384px+) overflows a phone. Reflow to two rows: the play/pause
   button keeps its own left column spanning both rows, the name + hours sit
   on the top row, and the progress bar stretches full-width underneath. The
   no-button variant (planning Tasks tab) drops the button column. */
@media (max-width: 640px) {
    .phase[b-ubzunwz2io] {
        grid-template-columns: 44px 1fr auto;
        grid-template-areas:
            "btn main hours"
            "btn progress progress";
        gap: var(--space-1) var(--space-2);

        &.phase--no-btn {
            grid-template-columns: 1fr auto;
            grid-template-areas:
                "main hours"
                "progress progress";
        }

        .phase__btn[b-ubzunwz2io] {
            grid-area: btn;
        }

        .phase__main[b-ubzunwz2io] {
            grid-area: main;
        }

        .phase__progress[b-ubzunwz2io] {
            grid-area: progress;
        }

        .phase__hours[b-ubzunwz2io] {
            grid-area: hours;
            align-self: center;
        }
    }
}
/* _content/Anouk.UI/Features/Shopfloor/Components/DossierModal/VehicleImage.razor.rz.scp.css */
.veh[b-jbcgw80iqw] {
    width: 100%;
}

.veh__frame[b-jbcgw80iqw] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--scrim-placeholder);
}

.veh__photo[b-jbcgw80iqw] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.veh__placeholder[b-jbcgw80iqw] {
    width: 80%;
    height: auto;
    opacity: 0.7;
}

.veh__nav[b-jbcgw80iqw] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: 0;
    padding: 0;
    border-radius: 50%;
    /* Override the browser's default button face — without this, native
       <button> renders a light/whitish background that looks like a pale
       circle on the dark photo. The hover state below paints a dark circle
       when the user actually targets the control. */
    background: transparent;
    color: var(--fg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.veh__nav:hover:not([disabled])[b-jbcgw80iqw] {
    background: var(--scrim-photo-nav-hover);
}

.veh__nav[disabled][b-jbcgw80iqw] {
    opacity: 0.4;
    cursor: not-allowed;
}

.veh__nav--prev[b-jbcgw80iqw] { left: 8px; }
.veh__nav--next[b-jbcgw80iqw] { right: 8px; }

.veh__nav:focus-visible[b-jbcgw80iqw] {
    outline: 2px solid var(--kendo-color-primary);
    outline-offset: 2px;
}

/* size comes from .small-text (0.7rem) on the div */
.veh__pager[b-jbcgw80iqw] {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 2px 6px;
    
    color: var(--fg);
    border-radius: var(--radius-xs);
}
/* _content/Anouk.UI/Features/Shopfloor/Components/DossierModal/VehicleRail.razor.rz.scp.css */
.rail[b-r6sjkaojd9] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg-muted);
    border-right: 1px solid var(--rule);
}

/* ----- scrollable top region ----- */
.rail__top[b-r6sjkaojd9] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* The CASE-X identifier is already in the title bar — hide the rail eyebrow
   to avoid the stray digit floating beneath the photo (see verification
   checklist in the dark-theme reskin spec). */
.rail__eyebrow[b-r6sjkaojd9] {
    display: none;
}

/* rendered as <h3>, size 1.2rem / weight 200 from heading cascade */
.rail__vehicle[b-r6sjkaojd9] {
    margin: 0;
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-heading);
    color: var(--fg);
}

/* Meta lines under the vehicle title — Due Date, Colour, Colour Code, etc.
   Uses the same body-text-sm size as .text-body-sm in app.css (0.85rem) so all
   meta rows in the rail share a single visual rhythm. */
.rail__line[b-r6sjkaojd9] {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--fg);
}

/* ----- metadata list ----- */
.rail__meta[b-r6sjkaojd9] {
    margin: var(--space-2) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.rail__meta-row[b-r6sjkaojd9] {
    display: grid;
    grid-template-columns: 72px 1fr;
    align-items: baseline;
    gap: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px dashed var(--rule);
}

.rail__meta-row:last-child[b-r6sjkaojd9] {
    border-bottom: 0;
    padding-bottom: 0;
}

/* dt is an eyebrow-style label but at .small-text size (0.7rem) rather than the
   .eyebrow utility's 0.75rem — keep the rule local with tokens for the other props. */
.rail__meta-row dt[b-r6sjkaojd9] {
    margin: 0;

    font-size: 0.85rem;


    text-transform: uppercase;
    color: var(--fg-muted);
}

/* size comes from .text-body-sm (0.85rem) on the dd; .rail__meta-mono override (below) wins for VIN. */
.rail__meta-row dd[b-r6sjkaojd9] {
    margin: 0;


    color: var(--fg);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.rail__meta-mono[b-r6sjkaojd9] {

    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
}

/* size comes from .small-text (0.7rem) on the span */
.rail__avatar[b-r6sjkaojd9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-avatar);
    height: var(--size-avatar);
    border-radius: 50%;
    color: var(--fg);

}

/* ----- courtesy car indicator -----
   Sits between the scrollable rail top and the action buttons, so when the
   case has an active courtesy-car loan the row always appears just above
   the "Additional information" button. Aligned to the same horizontal
   indent (--space-2) as the upper text content for visual rhythm.
   Circular blue icon mirrors the existing tile badge (Info theme), sized
   a bit larger here than the small badge on the planning tile. */
.rail__courtesy-car[b-r6sjkaojd9] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-2);
    border-top: 1px solid var(--rule);
    color: var(--fg);
}

.rail__courtesy-icon[b-r6sjkaojd9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--kendo-color-secondary);
    color: #ffffff;
    flex-shrink: 0;
}

.rail__courtesy-icon[b-r6sjkaojd9]  svg {
    width: 18px;
    height: 18px;
}

.rail__courtesy-info[b-r6sjkaojd9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rail__courtesy-line[b-r6sjkaojd9] {
    font-size: 0.85rem;
    color: var(--fg);
}

/* ----- bottom case actions ----- */
.rail__actions[b-r6sjkaojd9] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-2);
    border-top: 1px solid var(--rule);
}

/* ----- dropzone — TelerikUpload with ::deep overrides to match the design.
   The outer .rail__dropzone class is on the TelerikUpload wrapper itself
   (Class="rail__dropzone" forwards the class to Telerik's root .k-upload).
   We then penetrate Telerik's internal markup with ::deep to swap the
   default Kendo Fluent chrome for the dashed dark dropzone aesthetic. */

.rail__dropzone[b-r6sjkaojd9] {
    display: block;
    width: 100%;
    background: var(--bg-elev);
    border: 1px dashed var(--rule-strong);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

/* Telerik renders an inner .k-upload-button-wrap with the Select-files
   button + a status hint, and below it a .k-upload-files list. Knock the
   button into a clean "Attach files" link and the hint into a muted
   sub-line — matches the design's two-line label. */
.rail__dropzone[b-r6sjkaojd9]  .k-upload {
    background: transparent;
    border: 0;
    color: var(--fg);
    box-shadow: none;
}

.rail__dropzone[b-r6sjkaojd9]  .k-upload-button-wrap,
.rail__dropzone[b-r6sjkaojd9]  .k-upload-dropzone {
    background: transparent;
    border: 0;
    /* Asymmetric: --space-2 (8 px) on the left so "Select files…" sits a hair
       off the dropzone's left edge (style guide §4 sanctioned step); right
       stays at --space-4 (16 px) for the trailing "Drag and drop files…" hint. */
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-2);
    color: var(--fg);
}

/* style guide §3.2 forbids overriding font on .k-button; only structural overrides remain */
.rail__dropzone[b-r6sjkaojd9]  .k-upload-button {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--fg);
    padding: 0;
}

.rail__dropzone[b-r6sjkaojd9]  .k-upload-button:hover {
    background: transparent;

}

.rail__dropzone[b-r6sjkaojd9]  .k-upload-status,
.rail__dropzone[b-r6sjkaojd9]  em.k-upload-status {

    color: var(--fg-subtle);
}

.rail__dropzone[b-r6sjkaojd9]  .k-upload-files {
    background: var(--bg);
    border-top: 1px solid var(--rule);
    color: var(--fg);
    max-height: 160px;
    overflow-y: auto;
}

.rail__dropzone[b-r6sjkaojd9]  .k-file {
    color: var(--fg);
    border-color: var(--rule);
}

.rail__dropzone[b-r6sjkaojd9]  .k-file-name {
    color: var(--fg);
}

.rail__dropzone[b-r6sjkaojd9]  .k-file-size,
.rail__dropzone[b-r6sjkaojd9]  .k-file-information {
    color: var(--fg-subtle);
}

/* ── Phone layout (≤640px) ───────────────────────────────────────────────
   When DossierModal stacks its body into one scrolling column the rail
   no longer owns a fixed-height region, so it must size to its content and
   give up its own scrollbar (the modal body scrolls instead). The vertical
   divider becomes a horizontal one between rail and the task pane below. */
@media (max-width: 640px) {
    .rail[b-r6sjkaojd9] {
        height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--rule);
    }

    .rail__top[b-r6sjkaojd9] {
        flex: 0 0 auto;
        overflow-y: visible;
    }
}
/* _content/Anouk.UI/Features/Shopfloor/Components/Modals/AdditionalInformationModal.razor.rz.scp.css */
.info-body[b-rfs4rgqaoh] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-3);
}

.info-section h3[b-rfs4rgqaoh] {
    margin: 0 0 var(--space-2);
}

.info-table[b-rfs4rgqaoh] {
    width: 100%;
    border-collapse: collapse;
}

.info-table th[b-rfs4rgqaoh],
.info-table td[b-rfs4rgqaoh] {
    padding: var(--space-2) var(--space-3);
    text-align: left;
    border-bottom: 1px solid var(--rule);
}

.info-table thead th[b-rfs4rgqaoh] {
    font-weight: 600;
}

.info-empty[b-rfs4rgqaoh] {
    color: var(--fg-muted);
    margin: 0 0 var(--space-3);
}

.info-error[b-rfs4rgqaoh] {
    color: var(--validation-error);
    margin: 0 0 var(--space-3);
}

/* ── Phone layout (≤640px) ───────────────────────────────────────────────
   The window goes full-screen (mobile-fullscreen-window). The Parts table
   has five columns that can't fit a phone width, so each section scrolls
   horizontally rather than crushing the columns — the table keeps its
   natural width and the user swipes sideways to read the later columns. */
@media (max-width: 640px) {
    .info-body[b-rfs4rgqaoh] {
        padding: var(--space-2);
    }

    .info-section[b-rfs4rgqaoh] {
        overflow-x: auto;
    }

    .info-table[b-rfs4rgqaoh] {
        min-width: max-content;
    }
}
/* _content/Anouk.UI/Features/Shopfloor/Components/Modals/CameraModal.razor.rz.scp.css */
.button[b-7ahlh38162] {
    color: white;
    background-color: rgb(175, 175, 175);
    padding: 3px 7px;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .button:active[b-7ahlh38162] {
        transform: translateY(3px);
        background-color: rgb(150, 148, 148);
        color: white;
    }

    .button:hover[b-7ahlh38162] {
        background-color: rgb(150, 148, 148);
        color: white;
    }

.background[b-7ahlh38162] {
    background-color: #d2d0ce;
}

.scannerVideo[b-7ahlh38162] {
    width: 400px;
    height: 300px;
    border: 1px solid gray;
}

/* ── Phone layout (≤640px) ───────────────────────────────────────────────
   The window goes full-screen (mobile-fullscreen-window); the fixed 400×300
   video must become fluid so it fits a narrow viewport while keeping its 4:3
   frame. */
@media (max-width: 640px) {
    .scannerVideo[b-7ahlh38162] {
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
    }
}

.camera-ms[b-7ahlh38162] {
    margin-left: 32px;
}

.modal[b-7ahlh38162] {
    transition: opacity 0.5s ease, transform 0.5s ease;
    transform-origin: center center;
}

@media (min-width: 360px) and (max-width: 440px) {
    .video[b-7ahlh38162] {
        max-width: 300px !important;
        max-height: 200px !important;
        border: 1px solid gray;
    }
}

.video[b-7ahlh38162] {
    width: 400px !important;
    height: 300px !important;
    border: 1px solid gray;
}
/* _content/Anouk.UI/Features/Shopfloor/Components/Modals/DossierScannerModal.razor.rz.scp.css */
.button[b-b1ps4k8skg] {
    color: white;
    background-color: rgb(175, 175, 175);
    padding: 3px 7px;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .button:active[b-b1ps4k8skg] {
        transform: translateY(3px);
        background-color: rgb(150, 148, 148);
        color: white;
    }

    .button:hover[b-b1ps4k8skg] {
        background-color: rgb(150, 148, 148);
        color: white;
    }

.background[b-b1ps4k8skg] {
    background-color: #d2d0ce;
}

.scannerVideo[b-b1ps4k8skg] {
    width: 300px;
    height: auto;
    max-width: 100%;
}

/* Lift above the DossierModal popup-background (z-index 10001) this scanner
   is launched from. The attribute selector the Blazor scoped-CSS pipeline adds
   makes this more specific than the global .popup-background rule, so 10003 wins
   and the scanner overlays the dossier dialog instead of hiding behind it.
   Stays below nothing relevant — 10002 is Telerik's animation container, which
   this overlay (custom camera, no Telerik popups) does not contend with. */
.case-scanner-overlay[b-b1ps4k8skg] {
    z-index: 10003;
}
/* _content/Anouk.UI/Features/Shopfloor/Components/Modals/ModifyColorModal.razor.rz.scp.css */
.button[b-0gc7g03w9r] {
    color: white;
    background-color: rgb(175, 175, 175);
    padding: 3px 7px;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .button:active[b-0gc7g03w9r] {
        transform: translateY(3px);
        background-color: rgb(150, 148, 148);
        color: white;
    }

    .button:hover[b-0gc7g03w9r] {
        background-color: rgb(150, 148, 148);
        color: white;
    }

.background[b-0gc7g03w9r] {
    background-color: #d2d0ce;
}

.modal[b-0gc7g03w9r] {
    transition: opacity 0.5s ease, transform 0.5s ease;
    transform-origin: center center;
}
/* _content/Anouk.UI/Features/Shopfloor/Components/Modals/ShopfloorScannerModal.razor.rz.scp.css */
.button[b-1dua6tbrpy] {
    color: white;
    background-color: rgb(175, 175, 175);
    padding: 3px 7px;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .button:active[b-1dua6tbrpy] {
        transform: translateY(3px);
        background-color: rgb(150, 148, 148);
        color: white;
    }

    .button:hover[b-1dua6tbrpy] {
        background-color: rgb(150, 148, 148);
        color: white;
    }

.background[b-1dua6tbrpy] {
    background-color: #d2d0ce;
}




.modal[b-1dua6tbrpy] {
    transition: opacity 0.5s ease, transform 0.5s ease;
    transform-origin: center center;
}
/* _content/Anouk.UI/Features/Shopfloor/Components/Modals/UpdateDatesModal.razor.rz.scp.css */
.dates-body[b-7vnmic28t5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
}

.dates-row[b-7vnmic28t5] {
    display: grid;
    grid-template-columns: 12rem 1fr;
    align-items: center;
    gap: var(--space-3);
}

/* ── Phone layout (≤640px) ───────────────────────────────────────────────
   The 12rem (192px) label column leaves too little room for the date picker
   on a phone, so stack the label above its value/input. */
@media (max-width: 640px) {
    .dates-row[b-7vnmic28t5] {
        grid-template-columns: 1fr;
        align-items: start;
        gap: var(--space-1);
    }
}
/* _content/Anouk.UI/Features/Shopfloor/Components/Tiles/ShopfloorPlanningTile.razor.rz.scp.css */
/* ============================================================
   Shopfloor planning tile · 200 × 145
   ------------------------------------------------------------
   Grid:
     row 1 (auto): tile-ribbon (full width, --tile-accent bg)
     row 2 (1fr) col 1: tile-body  (logo · plate / make·model / date)
     row 2 (1fr) col 2: tile-icons (WT dot · parts-missing, 44 px wide)

   Left colour accent = 3px border-left (DossierCasesTile pattern).
   app.css sets --tile-accent per CardColorStatus class — the same
   variable now also paints the top ribbon background and the
   in-body date colour so the whole tile reads as one status group.

   Spacing grid: --space-1 = 4px (k-p-1), --space-2 = 8px (k-p-2).
   All padding/gaps stay on the 4 px grid.

   Token rules (unchanged):
     • no raw hex
     • no font-family (Outfit inherits)
     • no font-weight > 700
     • no font-size in px (rem on the six-step scale)
   ============================================================ */

.tile-container[b-mzghphrnwq] {
    /* Bumped from 176×107 to 200×145 to fit the top ribbon plus the
       larger in-body date without making the existing plate/model rows
       feel cramped. ForEachPanel's inner k-p-4 is still zeroed for
       planning tiles via app.css. The left-edge accent border was
       removed — the ribbon now carries the colour signal on its own. */
    width: 200px;
    height: 145px;
    display: grid;
    grid-template-rows: auto 1fr;
    /* 48 px icon column fits the clock + parts-missing pair on one row
       (16 + 4 gap + 22 + 6 right padding — see .tile-icons). */
    grid-template-columns: 1fr 48px;
    overflow: hidden;
}

/* --- Top ribbon -------------------------------------------------------- */
.tile-ribbon[b-mzghphrnwq] {
    grid-row: 1;
    grid-column: 1 / -1;          /* span both columns */
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Guarantees breathing room between status/deadline/block even when the
       flex-shrink math lands two bases exactly flush (issue #387 — see
       ShopfloorTile.razor.css for the full rationale; same anatomy here). */
    gap: var(--space-1);
    /* k-p-1 vertical / k-p-2 horizontal — matches body padding on the
       horizontal axis so ribbon text aligns with the plate/model below. */
    padding: var(--space-1) var(--space-2);
    background: var(--tile-accent, var(--fg-muted));
    /* Stable dark ink (matches --kendo-button-hover-text in app.css §light).
       The ribbon background is ALWAYS a light pastel (--tile-accent values
       in app.css are all in the C0–FC luminance band), so the text must be
       dark regardless of the global theme. Using --fg would flip to light
       in dark theme and become unreadable on yellow / grey-blue / tan. */
    color: #1a1a1a;
    line-height: 1.2;
    min-height: 24px;
}

.tile-ribbon-status[b-mzghphrnwq] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* flex:1 1 0% (explicit zero basis) + min-width:0 lets the status shrink
       and ellipsize from a computed-empty starting point, so the deadline and
       block number (both flex-shrink:0) are never crowded or clipped when a
       deadline is present on a long-status tile (issue #387). */
    flex: 1 1 0%;
    min-width: 0;
}

/* Must-finish-by deadline (DateRepairApproval), shown only for urgent cars.
   Same heavy weight as the block number so it reads as a hard date; one step
   smaller (0.875 vs 1rem) so the dd/MM/yyyy string fits between status and
   block. flex-shrink:0 keeps the date whole — the status ellipsizes first. */
.tile-ribbon-deadline[b-mzghphrnwq] {
    font-size: 0.875rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    /* .tile-ribbon's gap now provides the separation from its siblings. */
}

/* The block number anchors the eye in the top-right: larger and heavier
   than the status text, since the date is already prominent in the body. */
.tile-ribbon-block[b-mzghphrnwq] {
    font-size: 1rem;
    font-weight: 700;
    /* .tile-ribbon's gap now provides the separation from its siblings. */
    flex-shrink: 0;
}

/* --- Body --------------------------------------------------------------- */
.tile-body[b-mzghphrnwq] {
    grid-row: 2;
    grid-column: 1;
    display: flex;
    flex-direction: column;
    /* k-p-2 (8 px) on all sides — consistent with other tile inner padding */
    padding: var(--space-2);
    min-width: 0;
}

/* Mirrors the overview tile's .header-flex pattern: logo pinned left,
   plate floating right with a negative left margin so they overlap.
   No extra margin-top — body padding (8 px) already insets the row. */
.tile-head[b-mzghphrnwq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    /* k-mb-1 (4 px) separates the logo/plate row from the model line */
    margin-bottom: var(--space-1);
}

.car-img[b-mzghphrnwq] {
    /* Match overview tile exactly: 72x24 box. display:block removes the
       baseline gap that misaligns the image's vertical center against
       the plate text when align-items:center is on the flex parent. */
    width: 72px;
    height: 24px;
    object-fit: contain;
    /* left center: pin SVG content to the left edge so logos with a wide
       viewBox or internal x-offset (Iveco, MAN, Scania) don't drift right */
    object-position: left center;
    display: block;
    flex-shrink: 0;
}

.plate[b-mzghphrnwq] {
    /* Identical to ShopfloorTile .license-plate-container: pull the plate
       back over the logo with a negative margin. The plate inherits the
       default body colour; the working-time signal lives in the right-edge
       WT dot, so the plate no longer recolours on TotalOvertime. */
    margin-left: -40px;
    width: 120px;
    flex-shrink: 0;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tile-model[b-mzghphrnwq] {
    /* Same font as ShopfloorTile make/model row: Kendo body default
       (0.875rem / 400), slightly muted so it reads below the plate. */
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--fg-muted);
    line-height: 1.1;
}

/* Plain foreground (white on dark theme, black on light) — the pastel
   --tile-accent values are too low-contrast against the tile body, and the
   ribbon already carries the status colour. Kept at 1rem so the date stays
   the second-most-prominent thing on the tile (after the plate). */
.tile-date[b-mzghphrnwq] {
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    color: var(--fg);
    letter-spacing: 0.02em;
    line-height: 1.1;
    /* k-mt-1 (4 px) gap from the model line — on the 4 px grid */
    margin-top: var(--space-1);
}

/* Currently-active worker name(s) — modest text row under the date, with a
   green underline (Carrman parity: an underline signals "clock is running"
   without repeating the WT-clock colour semantics used elsewhere on the tile).
   Renders nothing when PersonnelNames is empty (see the razor's @if guard). */
.tile-worker[b-mzghphrnwq] {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--fg-muted);
    line-height: 1.1;
    margin-top: var(--space-1);
    border-bottom: 2px solid var(--success);
    /* Underline hugs the text, not the full tile width. */
    display: inline-block;
    max-width: 100%;
}

/* Repair-size line: orange/red flag + localized size label (e.g. "Middelgrote herstelling").
   Only Medium/Large reach here (razor guard). Muted metadata row on the same 0.7rem scale as
   .tile-worker; nowrap-ellipsis clips long labels on the fixed-width tile. */
.tile-size[b-mzghphrnwq] {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--fg-muted);
    line-height: 1.1;
    /* Pinned to the bottom of the (flex-column) body so the size line sits at the same
       vertical position on every tile, whether or not a worker line renders above it.
       auto margin still leaves >= 0 gap; the worker line's own spacing keeps them apart. */
    margin-top: auto;
    padding-top: var(--space-1);
}

/* 4px gap between the flag and the size text. */
.tile-size-label[b-mzghphrnwq] {
    margin-inline-start: var(--space-1);
}

/* --- Right icon row (WT clock + parts-missing) ------------------------- */
/* Single horizontal row pinned to the top-right: the WT clock and the
   parts-missing sign sit side by side, vertically centred on each other
   instead of stacking. justify-content: flex-end keeps the row hugging
   the column's right padding boundary. */
.tile-icons[b-mzghphrnwq] {
    grid-row: 2;
    grid-column: 2;
    display: flex;
    flex-direction: row;
    /* Wrap so the repair-size flag + priority icon fall onto a second line BELOW the
       parts-missing/clock row (client-requested placement). */
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    align-self: start;
    gap: var(--space-1);
    /* No left padding: clock (16) + gap (4) + flag (22) + right padding (6)
       = exactly the 48px column, so the parts/clock pair fits on the first row. */
    padding: var(--space-2) 6px var(--space-2) 0;
}

.wt-clock[b-mzghphrnwq] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.wt-clock[b-mzghphrnwq]  svg {
    width: 16px;
    height: 16px;
}

.wt-clock--in-time[b-mzghphrnwq]    { color: var(--success); }
/* Yellow — clearly distinct from green (in-time) and red-orange (total OT).
   --warning (#ffc107) reads as orange; --shopfloor-dot-partial-ot (#FFD700)
   is the unambiguous traffic-light yellow the user expects. */
.wt-clock--partial-ot[b-mzghphrnwq] { color: var(--shopfloor-dot-partial-ot, #FFD700); }
/* Red-orange = --destructive (#ff3c00) — unchanged. */
.wt-clock--total-ot[b-mzghphrnwq]   { color: var(--destructive); }

.tile-flag[b-mzghphrnwq] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    /* Box hugs the 22 px SVG exactly so the dot + flag pair fits the 44 px
       icon column on a single horizontal row. */
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.tile-flag[b-mzghphrnwq]  svg {
    width: 22px;
    height: 22px;
}

.tile-flag--parts-missing[b-mzghphrnwq] {
    color: var(--destructive);
}

/* Courtesy-car is a TelerikBadge (Success / Full / Inside, bottom-left)
   positioned via .planning-badge-courtesy in app.css — no custom CSS here. */
/* _content/Anouk.UI/Features/Shopfloor/Components/Tiles/ShopfloorTile.razor.rz.scp.css */
/* ============================================================
   Shopfloor overview tile · 176 × 131
   ------------------------------------------------------------
   Same anatomy as ShopfloorPlanningTile:
     row 1: tile-ribbon (full width, --tile-accent bg) — parts-delivery
            status text left, block number right
     row 2: tile-body (logo · plate / make·model)

   --tile-accent is set in app.css by the parts-delivered (green) /
   parts-not-delivered (red) class on .shopfloor-tile-card; the neutral
   --fg-muted fallback shows while the parts lookup is in flight.
   ForEachPanel's inner k-p-4 is zeroed via app.css so the ribbon is
   flush with the card edges; the body carries its own 8px padding.
   ============================================================ */

.tile-container[b-8k0uqittri] {
    width: 176px;
    height: 115px;
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
}

/* --- Top ribbon (mirrors ShopfloorPlanningTile) ------------------------- */
.tile-ribbon[b-8k0uqittri] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Guarantees breathing room between the (potentially ellipsized) status
       text and the block number even when the flex-shrink math lands the two
       flex bases exactly flush — without this, long status strings (e.g.
       "ONDERDELEN NIET GELEVERD") can visually crowd the block number even
       though neither box literally overlaps (issue #387). */
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: var(--tile-accent, var(--fg-muted));
    /* Stable dark ink — the ribbon background is always a light pastel, so
       the text must be dark regardless of the global theme (same rationale
       as the planning tile ribbon). */
    color: #1a1a1a;
    line-height: 1.2;
    min-height: 24px;
    /* .tile-ribbon is itself a grid item (row 1 of .tile-container's
       grid-template-rows) AND a flex container. Without this, its automatic
       minimum size defaults to min-width:auto, which for a flex container
       resolves to the un-shrunk max-content width of its children — i.e. the
       FULL "PARTS NOT DELIVERED"-length text plus the block, ignoring the
       inner flex-shrink/ellipsis rules entirely. That inflates the grid's
       (content-sized) column past .tile-container's fixed width, and the
       overflow gets hard-clipped by .tile-container's overflow:hidden —
       chopping the block number off the right edge with no "…" ever
       appearing, instead of the status text ellipsizing as intended. Setting
       min-width:0 here lets the grid track stay at .tile-container's actual
       width, so the flex-shrink math on .tile-ribbon-status below can do its
       job (verified with a Playwright repro — see
       Anouk.Tests.Browser/Features/Shopfloor/ShopfloorTileRibbonLayoutTests.cs). */
    min-width: 0;
}

.tile-ribbon-status[b-8k0uqittri] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Explicit flex-basis:0% (not the default "auto") so the shrink target is
       computed purely from the remaining track space, not from the text's
       own content width — the same min-width:0 + flex-shrink:1 combination
       that already ellipsizes correctly, made robust against engines that
       otherwise let an auto-basis item's content width win the layout pass. */
    flex: 1 1 0%;
    min-width: 0;
}

.tile-ribbon-block[b-8k0uqittri] {
    font-size: 1rem;
    font-weight: 700;
    /* .tile-ribbon's gap now provides the separation from the status text. */
    flex-shrink: 0;
}

/* --- Body --------------------------------------------------------------- */
.tile-body[b-8k0uqittri] {
    padding: var(--space-2);
    min-width: 0;
}

.header-flex[b-8k0uqittri] {
    margin-top: 0;
}

.car-img[b-8k0uqittri] {
    /* Constrain the SVG to its 72×24 box and pin content to the left.
       Without object-fit the browser may render at intrinsic SVG size;
       without object-position:left, SVGs with a wide viewBox or internal
       x-offset (Iveco, MAN, Scania) appear shifted into the plate area. */
    width: 72px;
    height: 24px;
    object-fit: contain;
    object-position: left center;
    display: block;
    flex-shrink: 0;
}

.license-plate-container[b-8k0uqittri] {
    margin-left: -40px;
    width: 100px;
    /* Match ShopfloorPlanningTile .plate: 0.9rem / 600 */
    font-size: 0.9rem;
    font-weight: 600;
}

.shopfloor-tile-model[b-8k0uqittri] {
    /* One step above the planning tile's 0.8rem — the overview tile has no
       date line, so the model row can afford the extra size. Muted like planning. */
    font-size: 0.875rem;
    color: var(--fg-muted);
}
/* _content/Anouk.UI/Features/Shopfloor/Components/WorkerChips/Avatar.razor.rz.scp.css */
.avatar[b-9hxfzpj30v] {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    /* background is set inline per-worker via the WorkerStatus → colour mapping
       in the code-behind. */
}
/* _content/Anouk.UI/Features/Shopfloor/Components/WorkerChips/WorkerChip.razor.rz.scp.css */
.chip[b-0fapq0xqfq] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--tile-row-height);
    padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-pill);
    background: var(--bg);
    color: var(--fg);
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition:
        background-color var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out),
        opacity var(--duration-fast) var(--ease-out);
}

.chip:hover[b-0fapq0xqfq] {
    background: var(--bg-elev);
    border-color: var(--kendo-color-secondary);
}

.chip:focus-visible[b-0fapq0xqfq] {
    outline: 2px solid var(--kendo-color-primary);
    outline-offset: 2px;
}

/* Off-shift workers are visually de-emphasised but still selectable;
   hover restores full opacity so the user can still target the chip. */
.chip--off[b-0fapq0xqfq] {
    opacity: 0.55;
}

.chip--off:hover[b-0fapq0xqfq] {
    opacity: 1;
}

.chip--selected[b-0fapq0xqfq] {
    background: var(--kendo-color-primary);
    border-color: var(--kendo-color-primary);
    color: var(--bg-elev);
    font-weight: var(--font-weight-semibold);
}

/* Re-assert the selected background/border on hover: the generic `.chip:hover` (which greys the
   background) outranks `.chip--selected` on specificity, so without this a hovered selected chip turned
   grey — and since the text is also --bg-elev, name + token vanished. */
.chip--selected:hover[b-0fapq0xqfq] {
    background: var(--kendo-color-primary);
    border-color: var(--kendo-color-primary);
    filter: brightness(1.1);
}

.chip__name[b-0fapq0xqfq] {
    white-space: nowrap;
    line-height: 1;
}
/* _content/Anouk.UI/Features/Shopfloor/Components/WorkerChips/WorkerChipsRow.razor.rz.scp.css */
.chips[b-w6m4bx3i36] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.chips__row[b-w6m4bx3i36] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.chips__legend-row[b-w6m4bx3i36] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.chips__legend[b-w6m4bx3i36] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    font-size: 0.85rem;
    color: var(--fg-subtle);
}

.chips__legend-right[b-w6m4bx3i36] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.chips__legend-item[b-w6m4bx3i36] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.chips__legend-dot[b-w6m4bx3i36] {
    display: inline-block;
    width: var(--space-2);
    height: var(--space-2);
    border-radius: 50%;
}

.chips__legend-dot--working[b-w6m4bx3i36] { background: var(--kendo-color-primary); }
.chips__legend-dot--idle[b-w6m4bx3i36]    { background: var(--kendo-color-secondary); }
.chips__legend-dot--off[b-w6m4bx3i36]     { background: var(--fg-subtle); }

/* ── Phone layout (≤640px) ───────────────────────────────────────────────
   The legend row puts the hours summary + scanner button on one line via
   space-between. On a narrow phone that can overflow, so allow it to wrap;
   the right-hand group (hours + scanner) flows onto its own line when there
   isn't room beside the legend. */
@media (max-width: 640px) {
    .chips__legend-row[b-w6m4bx3i36] {
        flex-wrap: wrap;
    }

    .chips__legend-right[b-w6m4bx3i36] {
        flex-wrap: wrap;
    }
}
/* _content/Anouk.UI/Features/Shopfloor/Pages/Scanner.razor.rz.scp.css */
.error-message[b-xs5y1dpftr] {
    color: red;
}
/* _content/Anouk.UI/Features/Shopfloor/Pages/ShopfloorOverview.razor.rz.scp.css */
.hr[b-rubexazd2n] {
    position: absolute;
    bottom: 0px;
    width: 90%;
    border: none;
    border-top: 5px solid firebrick;
    opacity: 1;
    left: 50%;
    transform: translateX(-50%);
}

.hr2[b-rubexazd2n] {
    position: absolute;
    bottom: 0px;
    width: 90%;
    border: none;
    border-top: 5px solid green;
    opacity: 1;
    left: 50%;
    transform: translateX(-50%);
}

.bgd[b-rubexazd2n] {
    background-color: #d2d0ce;
}


.btn-play[b-rubexazd2n] {
    padding: 5px 10px;
    color: white;
    background-color: rgb(4, 163, 4);
}

.btn-stop[b-rubexazd2n] {
    padding: 5px 10px;
    color: white;
    background-color: red;
}

.col-lg-2 .bi-car-front-fill[b-rubexazd2n] {
    padding: 2px 7px;
    border: 1.5px solid #177196;
    color: #177196;
    font-size: 1.8rem !important;
}

.bi-paint-bucket[b-rubexazd2n] {
    padding: 2px 7px;
    border: 1.5px solid #177196;
    color: #177196;
    font-size: 1.8rem !important;
}

span[b-rubexazd2n] {
    color: #000000;
    font-size: 12px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 5px;
}

.scann[b-rubexazd2n] {
    color: white;
    background-color: rgb(175, 175, 175);
    border: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .scann:hover[b-rubexazd2n] {
        background-color: rgb(150, 148, 148);
        color: white;
    }

    .scann:active[b-rubexazd2n] {
        background-color: rgb(150, 148, 148);
        transform: translateY(2px);
    }

/*.scannerVideo {
    max-width: 400px !important;
    max-height: none !important;
    border: 1px solid gray;
}*/

@media only screen and (max-width: 1024px) {
    .sites[b-rubexazd2n], .tasks[b-rubexazd2n] {
        padding-top: 3px;
        line-height: 30px;
        text-align: center;
    }

    .personnel[b-rubexazd2n],
    .vwo[b-rubexazd2n],
    .vtbd[b-rubexazd2n],
    .vi[b-rubexazd2n],
    .vo[b-rubexazd2n],
    .vwed[b-rubexazd2n],
    .task[b-rubexazd2n] {
        padding-top: 3px;
        line-height: 30px;
    }
}

.button-container[b-rubexazd2n] {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

@media only screen and (max-width: 1024px) {
    .scann[b-rubexazd2n] {
        margin-top: 2.5px;
        font-size: 16px;
        padding: 7px 15px;
    }

    .scann-sb[b-rubexazd2n] {
        margin-top: 2.5px;
        margin-bottom: 2.5px;
        font-size: 16px;
        padding: 7px 15px;
        width: 100%;
    }

    .button-container[b-rubexazd2n] {
        padding: 5px 0;
        flex-direction: column;
        gap: 0;
    }
}

@media only screen and (min-width: 1025px) {
    .scann-sb[b-rubexazd2n] {
        margin-left: 2px;
    }
}

.text[b-rubexazd2n] {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.scroll-box[b-rubexazd2n] {
    max-height: 720px;
    overflow: auto;
}

.button[b-rubexazd2n] {
    color: white;
    background-color: rgb(175, 175, 175);
    padding: 3px 7px;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .button:active[b-rubexazd2n] {
        transform: translateY(2px);
    }

    .button.active[b-rubexazd2n] {
        background-color: rgb(150, 148, 148);
        color: white;
    }

    .button:hover[b-rubexazd2n] {
        background-color: rgb(150, 148, 148);
        color: white;
    }

.card[b-rubexazd2n] {
    cursor: pointer;
    border-radius: 5px;
    position: relative;
    padding-bottom: 25px;
    margin: 0 1px;
}

.icon-firebrick[b-rubexazd2n] {
    color: firebrick;
}


.icon-1[b-rubexazd2n] {
    color: firebrick;
}

.icon-2[b-rubexazd2n] {
    color: #fe841f;
}

.icon-3[b-rubexazd2n] {
    color: green;
}

.icon-4[b-rubexazd2n] {
    color: #000000;
}

.icon-black[b-rubexazd2n] {
    color: #000000;
}

.car-icon[b-rubexazd2n] {
    font-size: 1.5em;
}

.car-img[b-rubexazd2n] {
    max-height: 28px;
    margin-top: 6px;
    margin-left: 1px;
}

.bgd[b-rubexazd2n] {
    background-color: #d2d0ce;
}

.bgd2[b-rubexazd2n] {
    background-color: #d2d0ce;
    height: 160px;
}

.custom-row[b-rubexazd2n] {
    --bs-gutter-x: 2px;
}

    .custom-row > [class*='col-'][b-rubexazd2n] {
        padding-left: 0.5px;
        padding-right: 0.5px;
    }

.card[b-rubexazd2n] {
    height: 150px;
}

.progress[b-rubexazd2n] {
    height: 25px !important;
}

.progress-bar[b-rubexazd2n] {
    height: 25px !important;
}

.camera-ms[b-rubexazd2n] {
    margin-left: 32px;
}

.marginsp[b-rubexazd2n] {
    margin: 2px 2px;
}

.png[b-rubexazd2n] {
    height: 25px;
}

.png2[b-rubexazd2n] {
    width: 40px;
}

.box[b-rubexazd2n] {
    position: relative;
}

.electric-blue[b-rubexazd2n] {
    border-top: 5px solid #33BBFF;
    position: relative;
    top: -3px;
}

.card2[b-rubexazd2n] {
    height: 110px;
}

.line[b-rubexazd2n] {
    position: relative;
    height: 5px;
    background-color: #33BBFF;
    margin-top: 10px;
    margin-bottom: 3px;
}

.green-line[b-rubexazd2n] {
    width: 100px;
    height: 5px;
    border-top: 5px solid green !important;
    margin-top: 10px;
    margin-bottom: 10px;
}

.form-check-input[b-rubexazd2n] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
}

    .form-check-input:checked[b-rubexazd2n] {
        border-color: rgb(175, 175, 175);
        background-color: black;
    }

.form-label[b-rubexazd2n] {
    margin-left: 5px;
}



.hidden-radio[b-rubexazd2n] {
    display: none;
}

.button-container[b-rubexazd2n] {
    margin-bottom: 8px;
}

.modal-dialog[b-rubexazd2n] {
    max-width: 70vw;
    max-height: 90vh;
    margin: 1.75rem auto;
}

.video-container[b-rubexazd2n] {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.video-container video[b-rubexazd2n] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (max-width: 768px) {
    .video-container[b-rubexazd2n] {
        padding-top: 75%;
    }
}

.modal-scanner[b-rubexazd2n] {
    max-width: 40vw;
    max-height: 80vh;
    margin: 2rem auto;
}

.modal-body[b-rubexazd2n] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    overflow: hidden; 
}

.barcode-reader[b-rubexazd2n] {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

@media (max-width: 768px) {
    .modal-scanner[b-rubexazd2n] {
        max-width: 100%; 
    }

    .barcode-reader[b-rubexazd2n] {
        width: 100%;
        height: auto;
    }
}

@media (max-width: 576px) {
    .modal-content[b-rubexazd2n] {
        padding: 0;
    }

    .barcode-reader[b-rubexazd2n] {
        width: 100%;
        height: auto;
    }
}

.blue-button[b-rubexazd2n] {
    background-color: lightskyblue !important;
}

.green-shopfloor-line[b-rubexazd2n] {
    position: absolute;
    bottom: 0px;
    width: 90%;
    border: none;
    border-top: 5px solid green;
    opacity: 1;
    left: 50%;
    transform: translateX(-50%);
}

.blue-shopfloor-line[b-rubexazd2n] {
    position: absolute;
    bottom: 0px;
    width: 90%;
    border: none;
    border-top: 5px solid lightskyblue;
    opacity: 1;
    left: 50%;
    transform: translateX(-50%);
}

.red-shopfloor-line[b-rubexazd2n] {
    position: absolute;
    bottom: 0px;
    width: 90%;
    border: none;
    border-top: 5px solid red;
    opacity: 1;
    left: 50%;
    transform: translateX(-50%);
}

.Absent[b-rubexazd2n] {
    background: rgb(187, 187, 187);
}

.Inactive[b-rubexazd2n] {
    background: red
}

.PartialOvertime[b-rubexazd2n] {
    background: rgb(248, 148, 6);
}

.InTime[b-rubexazd2n] {
    background: rgb(81, 163, 81);
}

.TotalOvertime[b-rubexazd2n] {
    background: rgb(189, 54, 47);
}
/* _content/Anouk.UI/Features/Shopfloor/Pages/ShopFloorPlanning.razor.rz.scp.css */
/* Layout: vehicle sections + detail side panel.
   Each column scrolls inside its own max-height so the fixed TelerikAppBar
   footer never overlaps the last row of tiles. Mirrors the CaseTimeline
   pattern (Features/Case/Components/CaseTimeline.razor.css). Chrome
   subtraction ≈ 50px header + 50px title bar + 56px footer + 12px margin. */
.vehicle-sections-full[b-bw3eif0mle] {
    flex: 1;
    min-width: 0;
    min-height: 0;
    max-height: calc(100vh - 168px);
    overflow-y: auto;
    padding-bottom: 16px;
}

.vehicle-sections-with-panel[b-bw3eif0mle] {
    flex: 2;
    min-width: 0;
    min-height: 0;
    max-height: calc(100vh - 168px);
    overflow-y: auto;
    padding-bottom: 16px;
    padding-right: 8px;
}

.detail-panel[b-bw3eif0mle] {
    flex: 1;
    min-width: 350px;
    max-width: 450px;
    max-height: calc(100vh - 168px);
    overflow-y: auto;
}

/* Vehicle info rows in detail panel */
.info-label[b-bw3eif0mle] {
    flex: 1;
    font-size: 0.85rem;
}

.info-value[b-bw3eif0mle] {
    flex: 1;
    font-size: 0.85rem;
}

/* Task list in detail panel */
.task-list[b-bw3eif0mle] {
    max-height: 300px;
    overflow-y: auto;
}

/* Detail-modal tabs: each tab body scrolls inside the fixed 640px window so the
   modal dimensions stay the same when switching between Tasks and Vehicle Information. */
.planning-detail-tabs[b-bw3eif0mle] {
    height: 100%;
}

/* Tab labels bumped from Kendo default (≈1rem) to 1.1rem — approved step on the
   typography scale per style-guide §2.4. Weight pinned to 400 across inactive +
   active + selected so neither label reads as bold; Kendo Fluent's default puts
   the active tab at 600 which is heavier than this modal wants. Hover override
   keeps the label text readable; without it the Kendo Fluent hover color clashes
   with the modal bg and the label appears blank. */
.planning-detail-tabs[b-bw3eif0mle]  .k-tabstrip-items .k-link,
.planning-detail-tabs[b-bw3eif0mle]  .k-tabstrip-items .k-tabstrip-item.k-active .k-link,
.planning-detail-tabs[b-bw3eif0mle]  .k-tabstrip-items .k-tabstrip-item.k-selected .k-link {
    font-size: 1.1rem;
    font-weight: 400;
}

.planning-detail-tabs[b-bw3eif0mle]  .k-tabstrip-items .k-link:hover,
.planning-detail-tabs[b-bw3eif0mle]  .k-tabstrip-items .k-tabstrip-item:hover .k-link {
    color: var(--fg);
    background: transparent;
}

.planning-detail-tab-body[b-bw3eif0mle] {
    padding: var(--space-3) var(--space-2);
}

/* Vehicle Information tab uses a flex column so the image preview can center
   itself vertically in the remaining space and the action buttons pin to the
   bottom — instead of all three clustering in the middle. */
.planning-detail-tab-body--info[b-bw3eif0mle] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.vehicle-image-area[b-bw3eif0mle] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) 0;
}

.planning-detail-tab-actions[b-bw3eif0mle] {
    margin-top: auto;
    padding-top: var(--space-3);
}

/* Strip the elevated-surface backgrounds the PhaseList/PhaseRow ship with so the
   rows merge into the modal surface instead of reading as a separate gray block.
   Scoped to the planning Tasks tab only — DossierModal retains its bg. */
.planning-detail-tab-body--tasks[b-bw3eif0mle]  .phase-list,
.planning-detail-tab-body--tasks[b-bw3eif0mle]  .phase-list__header,
.planning-detail-tab-body--tasks[b-bw3eif0mle]  .phase {
    background: transparent;
}

/* Tone down PhaseRow typography for this modal: phase name and hours render at
   weight 400 instead of the heading-cascade default, matching the lighter look
   the planning context uses elsewhere. DossierModal stays at its current
   weights (h4/h5 cascade) because this is scoped to the planning tab body. */
.planning-detail-tab-body--tasks[b-bw3eif0mle]  .phase__name,
.planning-detail-tab-body--tasks[b-bw3eif0mle]  .phase__hours {
    font-weight: 400;
}

/* Progress bar */
.progress[b-bw3eif0mle] {
    height: 22px !important;
    background-color: #e9ecef;
}

/* Parts delivered indicators */
.parts-delivered[b-bw3eif0mle] {
    width: 80px;
    height: 5px;
    border-top: 5px solid green !important;
    margin-top: 8px;
}

.parts-not-delivered[b-bw3eif0mle] {
    width: 80px;
    height: 5px;
    border-top: 5px solid red !important;
    margin-top: 8px;
}

/* Responsive: stack layout vertically on smaller screens */
@media only screen and (max-width: 1024px) {
    .detail-panel[b-bw3eif0mle] {
        min-width: 100%;
        max-width: 100%;
    }
}
/* _content/Anouk.UI/Features/Superuser/Pages/AudatexControlCenter.razor.rz.scp.css */
.icc-badge[b-vymgvwv11f] { display:inline-block; padding:2px 10px; border-radius:var(--radius-pill); font-size:0.8rem; font-weight:var(--font-weight-semibold); letter-spacing:0.04em; text-transform:uppercase; }
.icc-badge--ok[b-vymgvwv11f]   { background:rgba(170,211,115,.15); color:var(--kendo-color-success); border:1px solid var(--kendo-color-success); }
.icc-badge--err[b-vymgvwv11f]  { background:rgba(217,119,87,.15);  color:var(--validation-error);    border:1px solid var(--validation-error); }
.icc-badge--warn[b-vymgvwv11f] { background:rgba(255,200,50,.12);  color:#f0c030;                     border:1px solid #f0c030; }
.icc-badge--off[b-vymgvwv11f]  { background:rgba(160,160,160,.12); color:var(--fg-subtle);             border:1px solid var(--fg-subtle); }

.icc-stats[b-vymgvwv11f] { display:flex; gap:var(--space-4); flex-wrap:wrap; }
.icc-stat[b-vymgvwv11f] { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:120px; padding:var(--space-4) var(--space-6); background:var(--bg-elev); border:1px solid var(--rule-strong); border-radius:var(--radius-sm); gap:var(--space-1); }
.icc-stat--accent[b-vymgvwv11f] { border-color:var(--kendo-color-primary); }
.icc-stat__value[b-vymgvwv11f] { font-size:2rem; font-weight:200; color:var(--fg); line-height:1; }
.icc-stat--accent .icc-stat__value[b-vymgvwv11f] { color:var(--kendo-color-primary); }
.icc-stat__label[b-vymgvwv11f] { font-size:0.75rem; color:var(--fg-muted); text-align:center; }

.icc-modules[b-vymgvwv11f] { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:var(--space-4); }
.icc-module[b-vymgvwv11f] { position:relative; display:flex; flex-direction:column; gap:var(--space-2); padding:var(--space-6); background:var(--bg-elev); border:1px solid var(--rule-strong); border-radius:var(--radius-sm); color:var(--fg); }
.icc-module--soon[b-vymgvwv11f] { opacity:0.55; cursor:default; }
.icc-module__icon[b-vymgvwv11f] { color:var(--kendo-color-primary); font-size:1.4rem; margin-bottom:var(--space-1); }
.icc-module__title[b-vymgvwv11f] { font-size:0.95rem; font-weight:var(--font-weight-semibold); }
.icc-module__desc[b-vymgvwv11f] { font-size:0.8rem; color:var(--fg-muted); line-height:1.4; }
.icc-module__badge[b-vymgvwv11f] { position:absolute; top:var(--space-2); right:var(--space-2); font-size:0.65rem; font-weight:var(--font-weight-semibold); letter-spacing:0.06em; text-transform:uppercase; color:var(--fg-subtle); background:var(--bg-muted); border:1px solid var(--rule); border-radius:var(--radius-pill); padding:1px 6px; }
/* _content/Anouk.UI/Features/Superuser/Pages/AxaltaControlCenter.razor.rz.scp.css */
.icc-badge[b-rehqufgsn8] { display:inline-block; padding:2px 10px; border-radius:var(--radius-pill); font-size:0.8rem; font-weight:var(--font-weight-semibold); letter-spacing:0.04em; text-transform:uppercase; }
.icc-badge--ok[b-rehqufgsn8]   { background:rgba(170,211,115,.15); color:var(--kendo-color-success); border:1px solid var(--kendo-color-success); }
.icc-badge--err[b-rehqufgsn8]  { background:rgba(217,119,87,.15);  color:var(--validation-error);    border:1px solid var(--validation-error); }
.icc-badge--warn[b-rehqufgsn8] { background:rgba(255,200,50,.12);  color:#f0c030;                     border:1px solid #f0c030; }
.icc-badge--off[b-rehqufgsn8]  { background:rgba(160,160,160,.12); color:var(--fg-subtle);             border:1px solid var(--fg-subtle); }

.icc-modules[b-rehqufgsn8] { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:var(--space-4); }

.icc-module[b-rehqufgsn8] { position:relative; display:flex; flex-direction:column; gap:var(--space-2); padding:var(--space-6); background:var(--bg-elev); border:1px solid var(--rule-strong); border-radius:var(--radius-sm); color:var(--fg); }
.icc-module--soon[b-rehqufgsn8] { opacity:0.55; cursor:default; }
.icc-module__icon[b-rehqufgsn8] { color:var(--kendo-color-primary); font-size:1.4rem; margin-bottom:var(--space-1); }
.icc-module__title[b-rehqufgsn8] { font-size:0.95rem; font-weight:var(--font-weight-semibold); }
.icc-module__desc[b-rehqufgsn8] { font-size:0.8rem; color:var(--fg-muted); line-height:1.4; }
.icc-module__badge[b-rehqufgsn8] { position:absolute; top:var(--space-2); right:var(--space-2); font-size:0.65rem; font-weight:var(--font-weight-semibold); letter-spacing:0.06em; text-transform:uppercase; color:var(--fg-subtle); background:var(--bg-muted); border:1px solid var(--rule); border-radius:var(--radius-pill); padding:1px 6px; }
/* _content/Anouk.UI/Features/Superuser/Pages/BackOfficeOverview.razor.rz.scp.css */
.bg-search[b-5ru3sy90eq] {
    background: #d2d0ce;
}

/* _content/Anouk.UI/Features/Superuser/Pages/CarPassControlCenter.razor.rz.scp.css */
/* Shared badge / stat / module card patterns — kept in sync with InformexControlCenter.razor.css */

.icc-badge[b-kdrw9e424z] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.icc-badge--ok[b-kdrw9e424z]   { background: rgba(170, 211, 115, 0.15); color: var(--kendo-color-success); border: 1px solid var(--kendo-color-success); }
.icc-badge--err[b-kdrw9e424z]  { background: rgba(217,  119,  87, 0.15); color: var(--validation-error);    border: 1px solid var(--validation-error); }
.icc-badge--warn[b-kdrw9e424z] { background: rgba(255, 200,  50, 0.12); color: #f0c030;                      border: 1px solid #f0c030; }
.icc-badge--off[b-kdrw9e424z]  { background: rgba(160, 160, 160, 0.12); color: var(--fg-subtle);              border: 1px solid var(--fg-subtle); }

.icc-stats[b-kdrw9e424z] {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.icc-stat[b-kdrw9e424z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    padding: var(--space-4) var(--space-6);
    background: var(--bg-elev);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-sm);
    gap: var(--space-1);
}

.icc-stat--accent[b-kdrw9e424z] {
    border-color: var(--kendo-color-primary);
}

.icc-stat__value[b-kdrw9e424z] {
    font-size: 2rem;
    font-weight: 200;
    color: var(--fg);
    line-height: 1;
}

.icc-stat--accent .icc-stat__value[b-kdrw9e424z] {
    color: var(--kendo-color-primary);
}

.icc-stat__label[b-kdrw9e424z] {
    font-size: 0.75rem;
    color: var(--fg-muted);
    text-align: center;
}

.icc-modules[b-kdrw9e424z] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-4);
}

.icc-module[b-kdrw9e424z] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-6);
    background: var(--bg-elev);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--fg);
    transition: border-color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
}

.icc-module--active:hover[b-kdrw9e424z] {
    border-color: var(--kendo-color-primary);
    background: var(--bg-muted);
    cursor: pointer;
}

.icc-module--soon[b-kdrw9e424z] {
    opacity: 0.55;
    cursor: default;
}

.icc-module__icon[b-kdrw9e424z] {
    color: var(--kendo-color-primary);
    font-size: 1.4rem;
    margin-bottom: var(--space-1);
}

.icc-module__title[b-kdrw9e424z] {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
}

.icc-module__desc[b-kdrw9e424z] {
    font-size: 0.8rem;
    color: var(--fg-muted);
    line-height: 1.4;
}

.icc-module__badge[b-kdrw9e424z] {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-subtle);
    background: var(--bg-muted);
    border: 1px solid var(--rule);
    border-radius: var(--radius-pill);
    padding: 1px 6px;
}
/* _content/Anouk.UI/Features/Superuser/Pages/DossierOverview.razor.rz.scp.css */
.car-pass-icon[b-s8qow0wkr2] {
    height: 21px;
    margin-bottom: -4px;
}
/* _content/Anouk.UI/Features/Superuser/Pages/DossiersToInvoiceOverview.razor.rz.scp.css */

.buttonSearch[b-9obatdxkps] {
    color: white;
    background-color: rgb(175, 175, 175);
    padding: 7px 7px;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .buttonSearch:active[b-9obatdxkps] {
        transform: translateY(3px);
        background-color: rgb(150, 148, 148);
        color: #029ebd;
    }

    .buttonSearch:hover[b-9obatdxkps] {
        background-color: rgb(150, 148, 148);
        color: white;
    }
/* _content/Anouk.UI/Features/Superuser/Pages/InformexControlCenter.razor.rz.scp.css */
/* ── Status badges ────────────────────────────────────────── */
.icc-badge[b-wu3mu1c6ca] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.icc-badge--ok[b-wu3mu1c6ca]   { background: rgba(170, 211, 115, 0.15); color: var(--kendo-color-success); border: 1px solid var(--kendo-color-success); }
.icc-badge--err[b-wu3mu1c6ca]  { background: rgba(217,  119,  87, 0.15); color: var(--validation-error);    border: 1px solid var(--validation-error); }
.icc-badge--warn[b-wu3mu1c6ca] { background: rgba(255, 200,  50, 0.12); color: #f0c030;                      border: 1px solid #f0c030; }
.icc-badge--off[b-wu3mu1c6ca]  { background: rgba(160, 160, 160, 0.12); color: var(--fg-subtle);              border: 1px solid var(--fg-subtle); }

/* ── Stat tiles ───────────────────────────────────────────── */
.icc-stats[b-wu3mu1c6ca] {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.icc-stat[b-wu3mu1c6ca] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    padding: var(--space-4) var(--space-6);
    background: var(--bg-elev);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-sm);
    gap: var(--space-1);
}

.icc-stat--accent[b-wu3mu1c6ca] {
    border-color: var(--kendo-color-primary);
}

.icc-stat__value[b-wu3mu1c6ca] {
    font-size: 2rem;
    font-weight: 200;
    color: var(--fg);
    line-height: 1;
}

.icc-stat--accent .icc-stat__value[b-wu3mu1c6ca] {
    color: var(--kendo-color-primary);
}

.icc-stat__label[b-wu3mu1c6ca] {
    font-size: 0.75rem;
    color: var(--fg-muted);
    text-align: center;
}

/* ── Module cards ─────────────────────────────────────────── */
.icc-modules[b-wu3mu1c6ca] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-4);
}

.icc-module[b-wu3mu1c6ca] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-6);
    background: var(--bg-elev);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--fg);
    transition: border-color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
}

.icc-module--active:hover[b-wu3mu1c6ca] {
    border-color: var(--kendo-color-primary);
    background: var(--bg-muted);
    cursor: pointer;
}

.icc-module--soon[b-wu3mu1c6ca] {
    opacity: 0.55;
    cursor: default;
}

.icc-module__icon[b-wu3mu1c6ca] {
    color: var(--kendo-color-primary);
    font-size: 1.4rem;
    margin-bottom: var(--space-1);
}

.icc-module__title[b-wu3mu1c6ca] {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
}

.icc-module__desc[b-wu3mu1c6ca] {
    font-size: 0.8rem;
    color: var(--fg-muted);
    line-height: 1.4;
}

.icc-module__badge[b-wu3mu1c6ca] {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-subtle);
    background: var(--bg-muted);
    border: 1px solid var(--rule);
    border-radius: var(--radius-pill);
    padding: 1px 6px;
}
/* _content/Anouk.UI/Features/Superuser/Pages/InformexOverview.razor.rz.scp.css */
.fs[b-xw0dw67vfz] {
    font-size: 15px;
}

.action-column[b-xw0dw67vfz] {
    font-weight: normal;
}

.custom-input[b-xw0dw67vfz] {
    padding-left: 10px;
}

.btn-transparent[b-xw0dw67vfz] {
    /*    border: none !important;*/
    box-shadow: none !important;
}

a .bi-arrow-left-circle[b-xw0dw67vfz],
a .bi-plus-circle[b-xw0dw67vfz],
a .bi-folder-plus[b-xw0dw67vfz] {
    font-size: 1.5rem;
}

.flex-align-center[b-xw0dw67vfz] {
    align-items: center;
}

/* List 09 preview: fixed-width Informex print image must stay column-aligned. */
[b-xw0dw67vfz] .informex-file-pre {
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    line-height: 1.35;
    white-space: pre;
    overflow: auto;
    margin: 0;
    max-height: calc(85vh - 90px);
}
/* _content/Anouk.UI/Features/Superuser/Pages/ServerLogs.razor.rz.scp.css */
.server-log-detail[b-yj17ldfw5r] {
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 40vh;
    overflow: auto;
    margin: 0;
    padding: 0.75rem;
    border: 1px solid var(--kendo-color-border, rgba(128, 128, 128, 0.3));
    border-radius: var(--kendo-border-radius-md, 4px);
}

.server-log-grid[b-yj17ldfw5r]  tr.server-log-row {
    cursor: pointer;
}

.server-log-grid[b-yj17ldfw5r]  tr.server-log-row--selected > td {
    background: var(--kendo-color-primary-subtle, rgba(0, 120, 212, 0.15));
}
/* _content/Anouk.UI/Features/Superuser/Pages/SmsBoxControlCenter.razor.rz.scp.css */
/* Shared badge / stat / module card patterns — kept in sync with InformexControlCenter.razor.css */

.icc-badge[b-1v61vgxqma] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.icc-badge--ok[b-1v61vgxqma]   { background: rgba(170, 211, 115, 0.15); color: var(--kendo-color-success); border: 1px solid var(--kendo-color-success); }
.icc-badge--err[b-1v61vgxqma]  { background: rgba(217,  119,  87, 0.15); color: var(--validation-error);    border: 1px solid var(--validation-error); }
.icc-badge--warn[b-1v61vgxqma] { background: rgba(255, 200,  50, 0.12); color: #f0c030;                      border: 1px solid #f0c030; }
.icc-badge--off[b-1v61vgxqma]  { background: rgba(160, 160, 160, 0.12); color: var(--fg-subtle);              border: 1px solid var(--fg-subtle); }

.icc-stats[b-1v61vgxqma] {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.icc-stat[b-1v61vgxqma] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    padding: var(--space-4) var(--space-6);
    background: var(--bg-elev);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-sm);
    gap: var(--space-1);
}

.icc-stat--accent[b-1v61vgxqma] {
    border-color: var(--kendo-color-primary);
}

.icc-stat__value[b-1v61vgxqma] {
    font-size: 2rem;
    font-weight: 200;
    color: var(--fg);
    line-height: 1;
}

.icc-stat--accent .icc-stat__value[b-1v61vgxqma] {
    color: var(--kendo-color-primary);
}

.icc-stat__label[b-1v61vgxqma] {
    font-size: 0.75rem;
    color: var(--fg-muted);
    text-align: center;
}

.icc-modules[b-1v61vgxqma] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-4);
}

.icc-module[b-1v61vgxqma] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-6);
    background: var(--bg-elev);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-sm);
    color: var(--fg);
}

.icc-module--soon[b-1v61vgxqma] {
    opacity: 0.55;
    cursor: default;
}

.icc-module__icon[b-1v61vgxqma] {
    color: var(--kendo-color-primary);
    font-size: 1.4rem;
    margin-bottom: var(--space-1);
}

.icc-module__title[b-1v61vgxqma] {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
}

.icc-module__desc[b-1v61vgxqma] {
    font-size: 0.8rem;
    color: var(--fg-muted);
    line-height: 1.4;
}

.icc-module__badge[b-1v61vgxqma] {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-subtle);
    background: var(--bg-muted);
    border: 1px solid var(--rule);
    border-radius: var(--radius-pill);
    padding: 1px 6px;
}

/* ── Tool-panel extras ── */

.sbc-label[b-1v61vgxqma] {
    font-size: 0.85rem;
    color: var(--fg-muted);
    white-space: nowrap;
}

.sbc-result--ok[b-1v61vgxqma] {
    font-size: 0.85rem;
    color: var(--kendo-color-success);
}

.sbc-result--err[b-1v61vgxqma] {
    font-size: 0.85rem;
    color: var(--kendo-color-error);
}
/* _content/Anouk.UI/Features/Superuser/Pages/SuperuserOverview.razor.rz.scp.css */
/* _content/Anouk.UI/Features/Superuser/Pages/UBenchControlCenter.razor.rz.scp.css */
/* Shared badge / stat / module card patterns — kept in sync with InformexControlCenter.razor.css */

.icc-badge[b-pddog8ups0] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.icc-badge--ok[b-pddog8ups0]   { background: rgba(170, 211, 115, 0.15); color: var(--kendo-color-success); border: 1px solid var(--kendo-color-success); }
.icc-badge--err[b-pddog8ups0]  { background: rgba(217,  119,  87, 0.15); color: var(--validation-error);    border: 1px solid var(--validation-error); }
.icc-badge--warn[b-pddog8ups0] { background: rgba(255, 200,  50, 0.12); color: #f0c030;                      border: 1px solid #f0c030; }
.icc-badge--off[b-pddog8ups0]  { background: rgba(160, 160, 160, 0.12); color: var(--fg-subtle);              border: 1px solid var(--fg-subtle); }

.icc-stats[b-pddog8ups0] {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.icc-stat[b-pddog8ups0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    padding: var(--space-4) var(--space-6);
    background: var(--bg-elev);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-sm);
    gap: var(--space-1);
}

.icc-stat--accent[b-pddog8ups0] {
    border-color: var(--kendo-color-primary);
}

.icc-stat__value[b-pddog8ups0] {
    font-size: 2rem;
    font-weight: 200;
    color: var(--fg);
    line-height: 1;
}

.icc-stat--accent .icc-stat__value[b-pddog8ups0] {
    color: var(--kendo-color-primary);
}

.icc-stat__label[b-pddog8ups0] {
    font-size: 0.75rem;
    color: var(--fg-muted);
    text-align: center;
}

.icc-modules[b-pddog8ups0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-4);
}

.icc-module[b-pddog8ups0] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-6);
    background: var(--bg-elev);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-sm);
    color: var(--fg);
}

.icc-module--soon[b-pddog8ups0] {
    opacity: 0.55;
    cursor: default;
}

.icc-module__icon[b-pddog8ups0] {
    color: var(--kendo-color-primary);
    font-size: 1.4rem;
    margin-bottom: var(--space-1);
}

.icc-module__title[b-pddog8ups0] {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
}

.icc-module__desc[b-pddog8ups0] {
    font-size: 0.8rem;
    color: var(--fg-muted);
    line-height: 1.4;
}

.icc-module__badge[b-pddog8ups0] {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-subtle);
    background: var(--bg-muted);
    border: 1px solid var(--rule);
    border-radius: var(--radius-pill);
    padding: 1px 6px;
}
/* _content/Anouk.UI/Features/Superuser/Pages/UBenchRepairDetail.razor.rz.scp.css */
/* Shared label/value list (Claim, Schedule, Quotation, Fulfillment tabs): labels left-aligned in a
   fixed-width column, values left-aligned in a second column that starts at the same x on every row. */
.ubench-kv[b-zjtb5hh5oo] {
    width: 100%;
    table-layout: fixed;
}

.ubench-kv td[b-zjtb5hh5oo] {
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.ubench-kv td:first-child[b-zjtb5hh5oo] {
    width: 220px;
}

/* Communications tab: Send Message and Create Note side by side in two equal, top-aligned columns; the
   columns wrap to a single stack when the tab is narrower than two 320px forms (phone / small width). */
.ubench-comm-forms[b-zjtb5hh5oo] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    align-items: start;
}

/* The communications grid sits in a flex-column panel and, with no Height, was shrunk to almost nothing
   (its "No communications available." text was cut off). Keep room for the empty message and a few rows. */
[b-zjtb5hh5oo] .ubench-comm-grid {
    min-height: 200px;
    flex-shrink: 0;
}

/* Embedded in the case layout (Embedded=true): stretch the panel to the bottom of the layout's content area.
   The layout gives the content wrapper a definite height (DossierLayout.razor: calc(100vh - 170px)) and
   CaseUBenchDetail takes min-height:100% of it; this flex chain (ForEachView wrapper -> fade-in div ->
   d-flex column div -> ForEachPanel) passes that height down. Taller content still grows the chain, so the
   page scrolls as before. */
.ubench-embedded-fill[b-zjtb5hh5oo] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.ubench-embedded-fill[b-zjtb5hh5oo] >  div {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

[b-zjtb5hh5oo] .ubench-embedded-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

[b-zjtb5hh5oo] .ubench-embedded-panel > .foreach-panel {
    flex: 1 1 auto;
}
/* _content/Anouk.UI/Features/UBench/Components/UBenchStatusBadge.razor.rz.scp.css */
/* The pill geometry and black text are shared with the inbox Type chips and live in app.css (.ubench-pill,
   set on the TelerikBadge itself), so every variant (Large, Compact, small) looks the same.
   Orange and yellow have no theme colour of their own (the theme's "warning" is itself orange), so the
   display map tags those statuses with a class on the wrapper span; ::deep reaches the TelerikBadge child.
   Only the background is set here; the text colour is black everywhere. */
.ubench-status-orange[b-q3alulp2jj]  .k-badge,
.ubench-status-orange[b-q3alulp2jj]  .k-badge.k-badge-solid {
    background-color: #F97316;
    border-color: #F97316;
}

.ubench-status-yellow[b-q3alulp2jj]  .k-badge,
.ubench-status-yellow[b-q3alulp2jj]  .k-badge.k-badge-solid {
    background-color: #EAB308;
    border-color: #EAB308;
}
/* _content/Anouk.UI/Features/UBench/Pages/UBenchInbox.razor.rz.scp.css */
/* Kind chip — one background per UBenchInboxKind, rendered inside a Grid column Template
   (TelerikGrid child DOM), so the selectors need ::deep. */
/* The chip geometry (22px, 0.8rem, normal weight, content width, black text) is the shared .ubench-pill
   in app.css, the same pill the UBenchStatusBadge renders. Only the background is set per kind below. */
[b-69myq0vezd] .ubench-inbox-kind-new {
    background-color: var(--kendo-color-info, #1d4ed8);
}

[b-69myq0vezd] .ubench-inbox-kind-decision {
    background-color: var(--kendo-color-warning, #b45309);
}

[b-69myq0vezd] .ubench-inbox-kind-failed,
[b-69myq0vezd] .ubench-inbox-kind-cancelled,
[b-69myq0vezd] .ubench-inbox-kind-conflict {
    background-color: var(--kendo-color-error, #b91c1c);
}

[b-69myq0vezd] .ubench-inbox-due-past {
    color: var(--kendo-color-error, #b91c1c);
    font-weight: 600;
}

[b-69myq0vezd] .ubench-inbox-informex-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    background-color: var(--kendo-color-success-subtle, #dcfce7);
    color: #000;
}

[b-69myq0vezd] .ubench-inbox-not-linkable {
    font-size: 0.8rem;
    color: var(--kendo-color-subtle, #6b7280);
    font-style: italic;
}

/* Plate-matched-but-VIN-unconfirmed marker — same chip footprint as the Informex chip, warning-coloured
   (mirrors the NeedsDecision kind chip's warning colour) so it reads as "needs attention", not an error. */
[b-69myq0vezd] .ubench-inbox-vin-unconfirmed-chip {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    background-color: var(--kendo-color-warning-subtle, #fef3c7);
    color: #000;
}

[b-69myq0vezd] .ubench-inbox-vehicle-section-title {
    margin: 16px 0 4px;
    font-size: 0.95rem;
    font-weight: 600;
}

[b-69myq0vezd] .ubench-inbox-vehicle-section-hint {
    margin: 0 0 8px;
    font-size: 0.8rem;
    color: var(--kendo-color-subtle, #6b7280);
}

[b-69myq0vezd] .ubench-inbox-vehicle-section-different {
    margin-top: 8px;
}

/* Row click (req 6) opens the detail page — signal that with a pointer cursor. Buttons inside a row
   stop propagation (@onclick:stopPropagation) so they keep their own hand cursor / behaviour. */
[b-69myq0vezd] .ubench-inbox-grid tbody tr {
    cursor: pointer;
}

/* Row action controls (Actions dropdown, Resolve, Retry push, Open case) share one footprint so the
   Actions column lines up whatever control a row carries. */
[b-69myq0vezd] .ubench-inbox-action {
    width: 120px;
    height: 28px;
    justify-content: center;
}
/* _content/Anouk.UI/Features/VatBook/Pages/EntriesInTreatment.razor.rz.scp.css */

.bg-search[b-fsqfyi94ob] {
    background: #d2d0ce;
}
/* _content/Anouk.UI/Features/VatBook/Pages/InvoicedEntries.razor.rz.scp.css */

.bg-search[b-sdzbxh0deg] {
    background: #d2d0ce;
}
/* _content/Anouk.UI/Features/VatBook/Pages/NewEntries.razor.rz.scp.css */

.bg-search[b-rhd4c1sdxh] {
    background: #d2d0ce;
}
/* _content/Anouk.UI/Features/VatBook/Pages/Reprint.razor.rz.scp.css */

.background[b-1ksuwlxvby] {
    background-color: #d2d0ce;
}

.buttonSearch[b-1ksuwlxvby] {
    width: 110px;
    color: white;
    background-color: rgb(175, 175, 175);
    padding: 5px;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .buttonSearch:active[b-1ksuwlxvby] {
        transform: translateY(3px);
        background-color: rgb(150, 148, 148);
        color: white;
    }

    .buttonSearch:hover[b-1ksuwlxvby] {
        background-color: rgb(150, 148, 148);
        color: white;
    }
/* _content/Anouk.UI/Layout/Components/BarcodeScanner.razor.rz.scp.css */
.barcode-scanner-container[b-4ekhvts39v] {
    width: 100%;
}

.barcode-scanner-reader[b-4ekhvts39v] {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

[b-4ekhvts39v] #qr-shaded-region {
    border-color: rgba(0, 153, 255, 0.5) !important;
}

/* TelerikButton has no Width parameter (and no unmatched-attribute sink), so the
   button width is set here via ::deep — a plain scoped rule would not reach the
   Telerik-rendered <button>. */
[b-4ekhvts39v] .scan-stop-btn {
    width: 120px;
}

[b-4ekhvts39v] .scan-start-btn {
    width: 250px;
}
/* _content/Anouk.UI/Layout/Components/DeleteConfirmationModal.razor.rz.scp.css */
.modal-dialog-centered[b-ajc8amcgde] {
    transform: translate(0, -10%);
}
/* _content/Anouk.UI/Layout/Components/Inputs/ForEachComboBox.razor.rz.scp.css */
[b-curs71wj19] .k-combobox .k-clear-value {
    --clear-button-width: 1.5rem;

    width: var(--clear-button-width);
    min-width: var(--clear-button-width);
    margin-inline-start: calc(-1 * var(--clear-button-width));
    position: relative;
    z-index: 1;
}
/* _content/Anouk.UI/Layout/Components/Inputs/ForEachMiniDateTimePicker.razor.rz.scp.css */
/* Fixed 120px: at 110px a full date (dd.MM.yyyy) did not fit beside the calendar button and was cut
   off with an ellipsis. The date and time rows fill this box's content width (100%), so their buttons
   sit flush with its right edge; at a fixed 120px they overflowed the 117px content box and the
   buttons were clipped 1-3px to the right. Rounded like the app's other inputs; overflow:hidden clips
   the square inner rows to the rounded outline. */
.date-time-picker-container[b-wmwyu6fx0f] {
    width: 120px;
    white-space: nowrap;
    overflow: hidden;
    padding-left: 1px;
    border: 1px solid #363636;
    border-radius: var(--kendo-border-radius-md, 4px);
}

/* A 1px line under the title, in the same colour as the picker's outer border. */
.date-time-picker-header[b-wmwyu6fx0f] {
    margin-top: 2px;
    margin-bottom: 3px;
    padding-left: 3px;
    border-bottom: 1px solid #363636;
}

/* The picker's title reads 1px larger than the app-wide .small-text (0.7rem). */
.date-time-picker-header .small-text[b-wmwyu6fx0f] {
    font-size: calc(0.7rem + 1px);
}

/* Flatten all rounded corners inside the picker */
[b-wmwyu6fx0f] .k-datepicker,
[b-wmwyu6fx0f] .k-datepicker *,
[b-wmwyu6fx0f] .header-picker,
[b-wmwyu6fx0f] .header-picker * {
    border-radius: 0 !important;
}

/* Consistent height for date and time rows */
[b-wmwyu6fx0f] .k-datepicker,
[b-wmwyu6fx0f] .header-picker {
    height: 26px;
}

/* Calendar toggle and clock button must be the exact same clickable segment. The theme
   sizes the calendar via width:auto (padding/aspect-ratio dependent) while the clock is a
   fixed 27px — they resolve a few px apart. One shared rule pins BOTH, so they cannot differ.
   Both buttons live inside a .header-picker k-input wrapper, which this selector targets. */
[b-wmwyu6fx0f] .header-picker .k-input-button {
    width: 27px !important;
    min-width: 27px !important;
    max-width: 27px !important;
    flex: none !important;
    padding-inline: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* The nested TelerikDateInput renders its own k-input span inside the time-group wrapper;
   strip its chrome so the wrapper's border/background is the only visible box (the wrapper
   carries header-picker = 26px, matching the date picker above). The inner input flexes to
   fill the space left of the 27px button, like production's plain k-input-inner did. */
.time-group[b-wmwyu6fx0f]  .time-input {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    flex: 1 1 auto;
    min-width: 0;
    align-self: stretch;
    height: auto;
}

/* Centre the time like the date above it. app.css centres the date via `.header-picker > input`,
   which doesn't reach the time's input: it sits one level deeper, inside the nested DateInput. */
.time-group[b-wmwyu6fx0f]  .time-input .k-input-inner {
    padding: 0;
    text-align: center;
}

/* The calendar (date-picker toggle) and the clock pictograms must be pixel-identical.
   The fluent theme gives `.k-icon-button .k-button-icon` a ~20px min-width/min-height and
   the inner svg `flex: 1 1 auto`, so the standalone clock button's svg GROWS to ~20px while
   the calendar is exempted via `.k-input-button > .k-button-icon { min-width: auto !important }`
   and stays at 1rem. A plain `width: 16px !important` cannot fix this — min-width beats width
   regardless of !important — so override the min-* constraints themselves and stop the grow. */
[b-wmwyu6fx0f] .k-svg-icon {
    min-width: 16px !important;
    min-height: 16px !important;
    width: 16px !important;
    height: 16px !important;
}

[b-wmwyu6fx0f] .k-svg-icon > svg {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 auto !important;
}

[data-theme="light"] .date-time-picker-container[b-wmwyu6fx0f],
[data-theme="light"] .date-time-picker-header[b-wmwyu6fx0f] {
    border-color: #cccccc;
}
/* _content/Anouk.UI/Layout/Components/Inputs/ForEachRevealToggle.razor.rz.scp.css */
/* Fluent colours every input suffix with --kendo-color-border-alt (black by default), which vanishes on
   the dark theme. Use the theme's text colour so the eye reads on both themes. The icon swap keeps the
   same 16px box, so toggling never shifts the layout. */
.foreach-reveal-toggle[b-d6bg7aqkl8] {
    color: var(--kendo-color-on-app-surface);
}
/* _content/Anouk.UI/Layout/Components/Inputs/ForEachSearchBox.razor.rz.scp.css */
/* Magnifier and clear (X) buttons in the search box. Fluent colours every input suffix with
   --kendo-color-border-alt, which the app leaves at its black default, so the icons were black on the
   dark theme's black box (github#686). Use the theme's text colour so they read on both themes. */
.foreach-search[b-wl26q34gyl]  .foreach-search-btn,
.foreach-search[b-wl26q34gyl]  .foreach-search-clear-btn {
    color: var(--kendo-color-on-app-surface);
}

/* Dimmed while a filter-triggered read is in flight (see the Locked parameter). */
.foreach-search[b-wl26q34gyl] {
    transition: opacity 0.15s ease-in-out;
}

.foreach-search-locked[b-wl26q34gyl] {
    opacity: 0.5;
}
/* _content/Anouk.UI/Layout/Components/Layout/CommandPalette.razor.rz.scp.css */
.cmdk-backdrop[b-jk64q621kv] {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 12vh;
    background: rgba(0, 0, 0, 0.45);
}

.cmdk-panel[b-jk64q621kv] {
    width: min(640px, 92vw);
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: var(--kendo-color-surface, #1e1e1e);
    color: var(--kendo-color-on-surface, inherit);
    border: 1px solid var(--kendo-color-border, rgba(128, 128, 128, 0.35));
    border-radius: var(--kendo-border-radius-lg, 8px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.cmdk-search[b-jk64q621kv] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--kendo-color-border, rgba(128, 128, 128, 0.25));
}

.cmdk-input[b-jk64q621kv] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: inherit;
    font-size: 1rem;
}

.cmdk-hint[b-jk64q621kv] {
    font-size: 0.7rem;
    opacity: 0.6;
    border: 1px solid currentColor;
    border-radius: 3px;
    padding: 0 0.3rem;
}

.cmdk-results[b-jk64q621kv] {
    list-style: none;
    margin: 0;
    padding: 0.35rem;
    overflow-y: auto;
    flex: 1;
}

.cmdk-item[b-jk64q621kv] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.5rem 0.7rem;
    border-radius: var(--kendo-border-radius-md, 4px);
    cursor: pointer;
}

.cmdk-item-active[b-jk64q621kv] {
    background: var(--kendo-color-primary, #3f51b5);
    color: #fff;
}

.cmdk-item-title[b-jk64q621kv] {
    font-size: 0.92rem;
}

.cmdk-item-trail[b-jk64q621kv] {
    font-size: 0.72rem;
    opacity: 0.65;
}

.cmdk-empty[b-jk64q621kv] {
    list-style: none;
    padding: 1rem;
    text-align: center;
    opacity: 0.6;
}

.cmdk-footer[b-jk64q621kv] {
    display: flex;
    gap: 1rem;
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--kendo-color-border, rgba(128, 128, 128, 0.25));
    font-size: 0.72rem;
    opacity: 0.7;
}

.cmdk-footer kbd[b-jk64q621kv] {
    border: 1px solid currentColor;
    border-radius: 3px;
    padding: 0 0.25rem;
    margin-right: 0.15rem;
}
/* _content/Anouk.UI/Layout/Components/Layout/Footer.razor.rz.scp.css */
/* Version/copyright is informational only — it is the first thing to give way on narrow screens
   so the footer keeps a single row and the Tasks + chat launchers stay usable (a wrapped footer
   used to cover the chat composer, which is anchored above a one-row footer). */
.footer-version[b-vek42qgpn6] {
    white-space: nowrap;
}

@media (max-width: 640px) {
    .footer-version[b-vek42qgpn6] {
        display: none;
    }
}

/* Compact Tasks launcher in the footer, with the open-task count badge overlaid on the button. */
.footer-tasks[b-vek42qgpn6] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.footer-tasks-badge[b-vek42qgpn6] {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 999px;
    background: var(--kendo-color-error, #e74c3c);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
}
/* _content/Anouk.UI/Layout/Components/Layout/ForEachLabel.razor.rz.scp.css */
.label-container[b-5lzbaxnv7j] {
    height: 99%;
    width: 99%;
    align-items: center;
    text-align: center;
    position: absolute;
}
/* _content/Anouk.UI/Layout/Components/Layout/Header.razor.rz.scp.css */
.header-task-badge[b-r6vxxnp4rs] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Compact header for trimmed public app profiles (purchases/absences) — a small, mobile-friendly
   row of buttons instead of the full desktop/hamburger menu. */
.compact-app-menu[b-r6vxxnp4rs] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.header-task-badge-count[b-r6vxxnp4rs] {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--kendo-color-error, #e74c3c);
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
}
/* _content/Anouk.UI/Layout/Components/Layout/SiteSelector.razor.rz.scp.css */
/* Shown instead of the dropdown when the user has exactly one site.
   Matches the font weight and colour used by other AppBar items. */
.site-selector-label[b-nbnumiymjc] {
    font-size: 0.875rem;
    font-weight: var(--font-weight-semibold);
    color: var(--fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    display: inline-block;
    vertical-align: middle;
}
/* _content/Anouk.UI/Layout/Components/LazyTile.razor.rz.scp.css */
/* Fill the tile body so the observed slot has the tile's real size before it is revealed. */
.lazy-tile[b-1uu551eycc] {
    height: 100%;
}
/* _content/Anouk.UI/Layout/Components/TileSettingsPanel.razor.rz.scp.css */
/* real-product-bugs.md #105.
 *
 * The shared TileSettingsPanel had NO stylesheet of its own. The overlay/panel styles were
 * duplicated into FIFTEEN per-page .razor.css files instead - and Blazor CSS isolation scopes those
 * to each page component's own markup, so they could never apply to markup emitted by this child
 * component. Every page that renders <TileSettingsPanel> therefore got an UNSTYLED panel: no fixed
 * positioning, no background, no z-index. It appeared as a bare block in the document flow, partly
 * underneath the view title bar - which is also why its close button could not be clicked at all
 * (Playwright: "view-title-bar subtree intercepts pointer events").
 *
 * The per-page copies still serve the two pages that inline their own panel markup
 * (ContactDetailsView, UnifiedDashboard); they are simply irrelevant to this component. Styling
 * lives here now, so the panel looks and behaves the same wherever it is used.
 *
 * Values copied verbatim from the existing page copies so nothing changes visually on the pages
 * where the panel happened to be styled correctly.
 */

.tile-settings-overlay[b-4matevvp7u] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}

.tile-settings-panel[b-4matevvp7u] {
    position: fixed;
    top: 56px;
    right: 16px;
    z-index: 1000;
    background: var(--kendo-color-surface-alt, #1e1e1e);
    border: 1px solid var(--kendo-color-border, #424242);
    border-radius: 4px;
    padding: 16px;
    min-width: 240px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* _content/Anouk.UI/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-r1rtblxmbc] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-r1rtblxmbc] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.k-drawer[b-r1rtblxmbc] {
    top: 50px !important;
    height: calc(100vh - 80px) !important;
    position: sticky !important;
    flex: none !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: #555 #1a1a1a;
}

.main-content[b-r1rtblxmbc] {
    overflow-x: hidden;
    /* Footer is position:fixed at the bottom (~40px tall TelerikAppBar) so
       page content scrolls UNDER it. Reserve room at the bottom so the last
       row of any long form / list is reachable rather than hidden behind the
       footer band. 60px = ~footer height + a small breathing-room margin. */
    padding-bottom: 60px;
}

/* View title bar: vertically centered with baseline-aligned titles.
   Fixed height (not min-height) so taller children like badges don't expand
   the row and shift the back button vertically across pages.
   Sticky below the 50px global header so the title and action buttons stay
   visible when the page scrolls. */
[b-r1rtblxmbc] .view-title-bar {
    height: 50px;
    padding-top: 8px;
    padding-bottom: 8px;
    position: sticky;
    z-index: 10;
    background: var(--kendo-color-app-surface, #121212);
}

/* One row, always: the back button stays first, the action buttons (or their ▼ dropdown) stay
   top right, and only the title gives way — each of its parts shrinks and cuts off with an
   ellipsis instead of the row wrapping. */
[b-r1rtblxmbc] .view-title-bar {
    flex-wrap: nowrap;
}

[b-r1rtblxmbc] .view-title-bar > * {
    flex-shrink: 0;
}

[b-r1rtblxmbc] .view-title-bar > .view-title-text {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
}

[b-r1rtblxmbc] .view-title-bar > .k-spacer {
    flex: 1 1 0;
    min-width: var(--space-4, 16px);
}

[b-r1rtblxmbc] .view-title-text {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

[b-r1rtblxmbc] .view-title-text > * {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-r1rtblxmbc] .view-title-bar h1,
[b-r1rtblxmbc] .view-title-bar h2,
[b-r1rtblxmbc] .view-title-bar h3 {
    line-height: 1;
    margin: 0;
    padding: 0;
}

[b-r1rtblxmbc] .view-title-bar h1 {
    position: relative;
    top: -1px;
}

/* Title sizes scale with the window width. Nothing else sizes these headings, so they used to sit at
   the browser defaults (h1 2em, h2 1.5em, h3 1.17em) at every width. The maximum of each clamp is
   that old default, so wide screens are unchanged; narrower windows get a proportionally smaller
   title (about 26/20/16px at 800px) before the ellipsis has to cut it off. */
[b-r1rtblxmbc] .view-title-bar h1 {
    font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem);
}

[b-r1rtblxmbc] .view-title-bar h2 {
    font-size: clamp(1rem, 0.85rem + 0.8vw, 1.5rem);
}

[b-r1rtblxmbc] .view-title-bar h3 {
    font-size: clamp(0.875rem, 0.8rem + 0.45vw, 1.17rem);
}

/* Title-bar action overflow (js/viewActions.js). Collapsed: the buttons stay laid out on one line
   but invisible, so the script can keep measuring whether they would fit again, and the dropdown (▼) button
   takes their place. Open: the same buttons drop down under that button as a vertical list. */
[b-r1rtblxmbc] .view-actions.is-collapsed {
    position: absolute;
    top: 0;
    right: var(--space-4, 16px);
    flex-wrap: nowrap;
    visibility: hidden;
    pointer-events: none;
}

[b-r1rtblxmbc] .view-actions.is-collapsed.is-open {
    top: calc(100% - 4px);
    flex-direction: column;
    align-items: stretch;
    min-width: 200px;
    padding: var(--space-2, 8px);
    visibility: visible;
    pointer-events: auto;
    background: var(--kendo-color-surface-alt, #1e1e1e);
    border: 1px solid var(--kendo-color-border, rgba(128, 128, 128, 0.3));
    border-radius: var(--kendo-border-radius-md, 4px);
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.4));
    z-index: 21;
}

/* Full-width rows in the dropdown, label aligned left like a menu. */
[b-r1rtblxmbc] .view-actions.is-open .k-button {
    width: 100%;
    justify-content: flex-start;
}

/* Click-away layer behind the open dropdown. */
[b-r1rtblxmbc] .view-actions-backdrop {
    position: fixed;
    inset: 0;
    z-index: 20;
}

/* Tablet-compact breakpoint (≤900px) — same value as app.css's "Tablet-compact
   breakpoint" block and IViewportService (Anouk.UI/Services/ViewportService.cs).
   The title bar no longer wraps at any width (the actions collapse behind ▼ and
   the title cuts off with an ellipsis), so it keeps its fixed 50px row here too. */
@media (max-width: 900px) {
    /* The outer app drawer reserves calc(100vh - 80px) below the 50px sticky
       header; once the header can wrap taller than 50px that fixed number
       clips the drawer's bottom, so fall back to an auto/min-height that
       tracks the header's real height instead of assuming it. */
    .k-drawer[b-r1rtblxmbc] {
        height: auto !important;
        min-height: calc(100vh - 80px) !important;
    }
}