/* /Components/Custom/Agenda/AgendaCalendar.razor.rz.scp.css */
/* AgendaCalendar - Agenda Calendar Component */
/* Uses semantic Radzen variables for light/dark mode support */

.agenda-calendar[b-fi5c399931] {
    display: flex;
    flex-direction: column;
    background-color: var(--rz-base-background-color);
    border: var(--rz-border-normal);
    border-radius: var(--rz-border-radius);
    overflow: hidden;
}

/* === Header === */
.agenda-header[b-fi5c399931] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background-color: var(--rz-body-background-color);
    border-bottom: var(--rz-border-normal);
    gap: 1rem;
}

.agenda-nav-buttons[b-fi5c399931] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.agenda-nav-btn[b-fi5c399931] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.5rem;
    background-color: transparent;
    border: 1px solid var(--rz-base-600);
    border-radius: var(--rz-border-radius);
    color: var(--rz-text-color);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.8125rem;
}

.agenda-nav-btn:hover[b-fi5c399931] {
    background-color: var(--rz-base-600);
}

.agenda-nav-btn.today-btn[b-fi5c399931] {
    padding: 0.375rem 0.75rem;
}

.agenda-title[b-fi5c399931] {
    flex: 1;
    text-align: center;
}

.agenda-title h3[b-fi5c399931] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--rz-text-color);
    text-transform: capitalize;
}

.agenda-view-toggle[b-fi5c399931] {
    display: flex;
    background-color: var(--rz-base-600);
    border-radius: var(--rz-border-radius);
    overflow: hidden;
}

.view-btn[b-fi5c399931] {
    padding: 0.375rem 0.75rem;
    background-color: transparent;
    border: none;
    color: var(--rz-text-secondary-color);
    cursor: pointer;
    font-size: 0.8125rem;
    transition: all 0.2s ease;
}

.view-btn:hover[b-fi5c399931] {
    color: var(--rz-text-color);
}

.view-btn.active[b-fi5c399931] {
    background-color: var(--rz-primary);
    color: var(--rz-on-primary);
}

/* === Content Area === */
.agenda-content[b-fi5c399931] {
    flex: 1;
    overflow: auto;
    min-height: 400px;
}

/* === Day View === */
.day-view[b-fi5c399931] {
    display: flex;
    height: 100%;
}

.time-column[b-fi5c399931] {
    flex-shrink: 0;
    width: 60px;
    background-color: var(--rz-body-background-color);
    border-right: var(--rz-border-normal);
}

.time-slot-label[b-fi5c399931] {
    height: 48px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 2px 8px 0 0;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    border-bottom: 1px solid var(--rz-base-600);
}

.day-content[b-fi5c399931] {
    flex: 1;
    position: relative;
}

.time-slot[b-fi5c399931] {
    height: 48px;
    border-bottom: 1px solid var(--rz-base-600);
    position: relative;
    cursor: pointer;
    transition: background-color 0.15s ease;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 2px;
    align-content: flex-start;
}

.time-slot:hover[b-fi5c399931] {
    background-color: var(--rz-base-600);
}

.time-slot.has-items[b-fi5c399931] {
    background-color: var(--rz-base-background-color);
}

/* === Agenda Items === */
.agenda-item[b-fi5c399931] {
    display: flex;
    flex-direction: column;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    min-width: 80px;
    max-width: 200px;
}

.agenda-item:hover[b-fi5c399931] {
    transform: scale(1.02);
    box-shadow: 0 2px 8px var(--rz-shadow);
}

.agenda-item.compact[b-fi5c399931] {
    min-width: 0;
    max-width: none;
    width: 100%;
    height: 100%;
    padding: 2px;
    border-radius: 2px;
}

.item-title[b-fi5c399931] {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* DT-11-28: status pill — kleine badge die direct na de naam komt. */
.item-status-pill[b-fi5c399931] {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.4rem;
    border-radius: 10px;
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.2;
    vertical-align: middle;
    color: #fff;
    white-space: nowrap;
}

.status-pill-confirmed[b-fi5c399931]   { background: var(--rz-info, #2196f3); }
.status-pill-arrived[b-fi5c399931]     { background: #00838f; }
.status-pill-inprogress[b-fi5c399931]  { background: var(--rz-primary, #1976d2); }
.status-pill-completed[b-fi5c399931]   { background: var(--rz-success, #2e7d32); }
.status-pill-noshow[b-fi5c399931]      { background: var(--rz-warning, #ed6c02); }
.status-pill-cancelled[b-fi5c399931]   { background: var(--rz-text-secondary-color, #757575); }
.status-pill-default[b-fi5c399931]     { background: #607d8b; }

.item-subtitle[b-fi5c399931] {
    font-size: 0.6875rem;
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Item Type Colors */
.item-appointment[b-fi5c399931],
.agenda-item.item-appointment[b-fi5c399931] {
    background-color: var(--rz-primary-lighter);
    color: var(--rz-primary);
    border-left: 3px solid var(--rz-primary);
}

.item-break[b-fi5c399931],
.agenda-item.item-break[b-fi5c399931] {
    background-color: var(--rz-info-lighter);
    color: var(--rz-info);
    border-left: 3px solid var(--rz-info);
}

.item-blocked[b-fi5c399931],
.agenda-item.item-blocked[b-fi5c399931] {
    background-color: var(--rz-base-600);
    color: var(--rz-text-secondary-color);
    border-left: 3px solid var(--rz-text-secondary-color);
}

.item-absence[b-fi5c399931],
.agenda-item.item-absence[b-fi5c399931] {
    background-color: var(--rz-warning-lighter);
    color: var(--rz-warning);
    border-left: 3px solid var(--rz-warning);
}

.item-default[b-fi5c399931] {
    background-color: var(--rz-secondary-lighter);
    color: var(--rz-secondary);
    border-left: 3px solid var(--rz-secondary);
}

/* Current Time Indicator */
.current-time-indicator[b-fi5c399931] {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--rz-danger);
    z-index: 10;
    pointer-events: none;
}

.current-time-indicator[b-fi5c399931]::before {
    content: '';
    position: absolute;
    left: -4px;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--rz-danger);
}

/* === Week View === */
.week-view[b-fi5c399931] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.week-header[b-fi5c399931] {
    display: flex;
    background-color: var(--rz-body-background-color);
    border-bottom: var(--rz-border-normal);
    position: sticky;
    top: 0;
    z-index: 5;
}

.time-header[b-fi5c399931] {
    flex-shrink: 0;
    width: 60px;
}

.day-header[b-fi5c399931] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0.25rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
    border-left: 1px solid var(--rz-base-600);
}

.day-header:hover[b-fi5c399931] {
    background-color: var(--rz-base-600);
}

.day-header.today[b-fi5c399931] {
    background-color: var(--rz-primary-lighter);
}

.day-header.today .day-number[b-fi5c399931] {
    background-color: var(--rz-primary);
    color: var(--rz-on-primary);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.day-header.selected[b-fi5c399931] {
    background-color: var(--rz-primary-lighter);
}

.day-name[b-fi5c399931] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    text-transform: uppercase;
}

.day-number[b-fi5c399931] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--rz-text-color);
}

.week-grid[b-fi5c399931] {
    display: flex;
    flex: 1;
    overflow-y: auto;
}

.day-column[b-fi5c399931] {
    flex: 1;
    border-left: 1px solid var(--rz-base-600);
}

.day-column.today[b-fi5c399931] {
    background-color: var(--rz-primary-lighter);
    background-color: color-mix(in srgb, var(--rz-primary-lighter) 30%, transparent);
}

/* === Month View === */
.month-view[b-fi5c399931] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0.5rem;
}

.month-header[b-fi5c399931] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    padding-bottom: 0.5rem;
    border-bottom: var(--rz-border-normal);
}

.weekday-header[b-fi5c399931] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
    text-transform: uppercase;
    padding: 0.25rem;
}

.month-grid[b-fi5c399931] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    flex: 1;
    gap: 2px;
    padding-top: 0.5rem;
}

.month-day[b-fi5c399931] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0.25rem;
    min-height: 60px;
    cursor: pointer;
    border-radius: var(--rz-border-radius);
    transition: background-color 0.15s ease;
}

.month-day:hover[b-fi5c399931] {
    background-color: var(--rz-base-600);
}

.month-day.today[b-fi5c399931] {
    background-color: var(--rz-primary-lighter);
}

.month-day.today .day-number[b-fi5c399931] {
    background-color: var(--rz-primary);
    color: var(--rz-on-primary);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.month-day.selected[b-fi5c399931] {
    background-color: var(--rz-primary-lighter);
    outline: 2px solid var(--rz-primary);
}

.month-day.other-month[b-fi5c399931] {
    opacity: 0.4;
}

.month-day .day-number[b-fi5c399931] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--rz-text-color);
    margin-bottom: 0.25rem;
}

.item-indicators[b-fi5c399931] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    justify-content: center;
}

.item-dot[b-fi5c399931] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.item-dot.item-appointment[b-fi5c399931] {
    background-color: var(--rz-primary);
}

.item-dot.item-break[b-fi5c399931] {
    background-color: var(--rz-info);
}

.item-dot.item-blocked[b-fi5c399931] {
    background-color: var(--rz-text-secondary-color);
}

.item-dot.item-absence[b-fi5c399931] {
    background-color: var(--rz-warning);
}

.item-more[b-fi5c399931] {
    font-size: 0.625rem;
    color: var(--rz-text-secondary-color);
}

/* === Legend === */
.agenda-legend[b-fi5c399931] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background-color: var(--rz-body-background-color);
    border-top: var(--rz-border-normal);
}

.legend-item[b-fi5c399931] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

.legend-color[b-fi5c399931] {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.legend-color.appointment[b-fi5c399931] {
    background-color: var(--rz-primary);
}

.legend-color.break[b-fi5c399931] {
    background-color: var(--rz-info);
}

.legend-color.blocked[b-fi5c399931] {
    background-color: var(--rz-text-secondary-color);
}

.legend-color.absence[b-fi5c399931] {
    background-color: var(--rz-warning);
}

/* === Responsive Design === */
@media (max-width: 768px) {
    .agenda-header[b-fi5c399931] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .agenda-title[b-fi5c399931] {
        order: -1;
        width: 100%;
    }

    .agenda-nav-buttons[b-fi5c399931],
    .agenda-view-toggle[b-fi5c399931] {
        flex: 1;
        justify-content: center;
    }

    .time-column[b-fi5c399931] {
        width: 50px;
    }

    .time-slot-label[b-fi5c399931] {
        font-size: 0.6875rem;
        padding-right: 4px;
    }

    .agenda-item[b-fi5c399931] {
        padding: 2px 4px;
        font-size: 0.6875rem;
    }

    .day-header[b-fi5c399931] {
        padding: 0.25rem 0.125rem;
    }

    .day-name[b-fi5c399931] {
        font-size: 0.6875rem;
    }

    .day-number[b-fi5c399931] {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .view-btn[b-fi5c399931] {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }

    .agenda-nav-btn[b-fi5c399931] {
        padding: 0.25rem;
    }

    .agenda-nav-btn.today-btn[b-fi5c399931] {
        padding: 0.25rem 0.5rem;
    }

    .month-day[b-fi5c399931] {
        min-height: 50px;
        padding: 0.25rem;
    }

    .month-day .day-number[b-fi5c399931] {
        font-size: 0.75rem;
    }
}
/* /Components/Custom/Agenda/AgendaContextMenu.razor.rz.scp.css */
/* AgendaContextMenu - Context Menu Component */
/* Uses semantic Radzen variables for light/dark mode support */

/* === Overlay === */
.agenda-context-menu-overlay[b-9o9avhkwja] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background-color: transparent;
}

/* === Context Menu Container === */
.agenda-context-menu[b-9o9avhkwja] {
    position: fixed;
    min-width: 200px;
    max-width: 280px;
    background-color: var(--rz-panel-background-color);
    border: var(--rz-border-normal);
    border-radius: var(--rz-border-radius);
    box-shadow: 0 8px 24px var(--rz-shadow);
    overflow: hidden;
    z-index: 10000;
    transform-origin: top left;
}

.agenda-context-menu.animating[b-9o9avhkwja] {
    animation: contextMenuFadeIn-b-9o9avhkwja 0.15s ease-out;
}

@keyframes contextMenuFadeIn-b-9o9avhkwja {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* === Menu Header === */
.menu-header[b-9o9avhkwja] {
    padding: 10px 14px;
    border-bottom: var(--rz-border-normal);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.menu-header.type-appointment[b-9o9avhkwja] {
    background-color: color-mix(in srgb, var(--rz-primary-lighter) 40%, var(--rz-panel-background-color));
    border-left: 4px solid var(--rz-primary);
}

.menu-header.type-break[b-9o9avhkwja] {
    background-color: color-mix(in srgb, var(--rz-info-lighter) 40%, var(--rz-panel-background-color));
    border-left: 4px solid var(--rz-info);
}

.menu-header.type-blocked[b-9o9avhkwja] {
    background-color: var(--rz-base-600);
    border-left: 4px solid var(--rz-base-500);
}

.menu-header.type-absence[b-9o9avhkwja] {
    background-color: color-mix(in srgb, var(--rz-warning-lighter) 40%, var(--rz-panel-background-color));
    border-left: 4px solid var(--rz-warning);
}

.menu-header.type-default[b-9o9avhkwja] {
    background-color: color-mix(in srgb, var(--rz-secondary-lighter) 40%, var(--rz-panel-background-color));
    border-left: 4px solid var(--rz-secondary);
}

.menu-header-title[b-9o9avhkwja] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--rz-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-header-time[b-9o9avhkwja] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

/* === Menu Items Container === */
.menu-items[b-9o9avhkwja] {
    padding: 6px 0;
}

/* === Menu Item === */
.menu-item[b-9o9avhkwja] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background-color 0.1s ease;
    color: var(--rz-text-color);
    font-size: 0.875rem;
}

.menu-item:hover[b-9o9avhkwja] {
    background-color: var(--rz-base-600);
}

.menu-item:active[b-9o9avhkwja] {
    background-color: var(--rz-base-500);
}

.menu-item[b-9o9avhkwja]  .rzi {
    font-size: 1.125rem;
    color: var(--rz-text-secondary-color);
}

.menu-item:hover[b-9o9avhkwja]  .rzi {
    color: var(--rz-text-color);
}

/* === Danger Item (Cancel) === */
.menu-item.danger[b-9o9avhkwja] {
    color: var(--rz-danger);
}

.menu-item.danger[b-9o9avhkwja]  .rzi {
    color: var(--rz-danger);
}

.menu-item.danger:hover[b-9o9avhkwja] {
    background-color: var(--rz-danger-lighter);
}

.menu-item.danger:hover[b-9o9avhkwja]  .rzi {
    color: var(--rz-danger);
}

/* === Menu Separator === */
.menu-separator[b-9o9avhkwja] {
    height: 1px;
    background-color: var(--rz-base-500);
    margin: 6px 0;
}

/* === Responsive Design === */
@media (max-width: 768px) {
    .agenda-context-menu[b-9o9avhkwja] {
        min-width: 180px;
    }

    .menu-header[b-9o9avhkwja] {
        padding: 8px 12px;
    }

    .menu-header-title[b-9o9avhkwja] {
        font-size: 0.8125rem;
    }

    .menu-item[b-9o9avhkwja] {
        padding: 8px 12px;
        font-size: 0.8125rem;
    }

    .menu-item[b-9o9avhkwja]  .rzi {
        font-size: 1rem;
    }
}

/* === Touch Device Adjustments === */
@media (pointer: coarse) {
    .menu-item[b-9o9avhkwja] {
        padding: 12px 14px;
        min-height: 44px; /* Minimum touch target size */
    }
}
/* /Components/Custom/Agenda/AgendaDayView.razor.rz.scp.css */
/* AgendaDayView - Day View Component */
/* Uses semantic Radzen variables for light/dark mode support */

.agenda-day-view[b-5ja09hnsts] {
    display: flex;
    flex-direction: column;
    background-color: var(--rz-base-background-color);
    border: var(--rz-border-normal);
    border-radius: var(--rz-border-radius);
    overflow: hidden;
}

.day-view-container[b-5ja09hnsts] {
    display: flex;
    flex: 1;
    overflow: auto;
    position: relative;
}

/* === Time Column === */
.time-column[b-5ja09hnsts] {
    flex-shrink: 0;
    width: 60px;
    background-color: var(--rz-body-background-color);
    border-right: var(--rz-border-normal);
    position: sticky;
    left: 0;
    z-index: 2;
}

.time-slot-label[b-5ja09hnsts] {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 2px 8px 0 0;
    border-bottom: 1px solid var(--rz-base-600);
    box-sizing: border-box;
}

.time-slot-label .time-text[b-5ja09hnsts] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    font-weight: 500;
    transform: translateY(-50%);
}

/* === Content Column === */
.content-column[b-5ja09hnsts] {
    flex: 1;
    position: relative;
    min-width: 200px;
}

.time-slot[b-5ja09hnsts] {
    border-bottom: 1px solid var(--rz-base-600);
    cursor: pointer;
    transition: background-color 0.15s ease;
    box-sizing: border-box;
}

.time-slot.hour-mark[b-5ja09hnsts] {
    border-bottom: 1px solid var(--rz-base-500);
}

.time-slot:hover[b-5ja09hnsts] {
    background-color: var(--rz-base-600);
}

.time-slot.empty-slot:hover[b-5ja09hnsts] {
    background-color: color-mix(in srgb, var(--rz-primary) 10%, transparent);
}

/* === Items Layer === */
.items-layer[b-5ja09hnsts] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.agenda-item[b-5ja09hnsts] {
    position: absolute;
    pointer-events: auto;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    margin-left: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.agenda-item:hover[b-5ja09hnsts] {
    transform: scale(1.02);
    box-shadow: 0 4px 12px var(--rz-shadow);
    z-index: 10;
}

.item-content[b-5ja09hnsts] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    overflow: hidden;
}

.item-time[b-5ja09hnsts] {
    font-size: 0.6875rem;
    font-weight: 500;
    opacity: 0.9;
}

.item-title[b-5ja09hnsts] {
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-subtitle[b-5ja09hnsts] {
    font-size: 0.6875rem;
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === Item Type Colors === */
.item-appointment[b-5ja09hnsts] {
    background-color: var(--rz-primary-lighter);
    color: var(--rz-primary-darker);
    border-left: 3px solid var(--rz-primary);
}

.item-break[b-5ja09hnsts] {
    background-color: var(--rz-info-lighter);
    color: var(--rz-info-darker);
    border-left: 3px solid var(--rz-info);
}

.item-blocked[b-5ja09hnsts] {
    background-color: var(--rz-base-600);
    color: var(--rz-text-secondary-color);
    border-left: 3px solid var(--rz-text-secondary-color);
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 8px,
        rgba(0, 0, 0, 0.05) 8px,
        rgba(0, 0, 0, 0.05) 16px
    );
}

.item-absence[b-5ja09hnsts] {
    background-color: var(--rz-warning-lighter);
    color: var(--rz-warning-darker);
    border-left: 3px solid var(--rz-warning);
}

.item-default[b-5ja09hnsts] {
    background-color: var(--rz-secondary-lighter);
    color: var(--rz-secondary-darker);
    border-left: 3px solid var(--rz-secondary);
}

/* === Current Time Indicator === */
.current-time-indicator[b-5ja09hnsts] {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--rz-danger);
    z-index: 15;
    pointer-events: none;
}

.current-time-indicator[b-5ja09hnsts]::before {
    content: '';
    position: absolute;
    left: -6px;
    top: -5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--rz-danger);
}

.current-time-label[b-5ja09hnsts] {
    position: absolute;
    left: 10px;
    top: -8px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--rz-danger);
    background-color: var(--rz-base-background-color);
    padding: 0 4px;
    border-radius: 2px;
}

/* === Responsive Design === */
@media (max-width: 768px) {
    .time-column[b-5ja09hnsts] {
        width: 50px;
    }

    .time-slot-label .time-text[b-5ja09hnsts] {
        font-size: 0.6875rem;
    }

    .item-time[b-5ja09hnsts] {
        font-size: 0.625rem;
    }

    .item-title[b-5ja09hnsts] {
        font-size: 0.75rem;
    }

    .item-subtitle[b-5ja09hnsts] {
        display: none;
    }

    .agenda-item[b-5ja09hnsts] {
        padding: 2px 4px;
    }
}

@media (max-width: 480px) {
    .time-column[b-5ja09hnsts] {
        width: 40px;
    }

    .time-slot-label[b-5ja09hnsts] {
        padding-right: 4px;
    }

    .current-time-label[b-5ja09hnsts] {
        display: none;
    }
}
/* /Components/Custom/Agenda/AgendaItemCard.razor.rz.scp.css */
/* AgendaItemCard - Agenda Item Card Component */
/* Uses semantic Radzen variables for light/dark mode support */

.agenda-item-card[b-glrh35ms1c] {
    display: flex;
    background-color: var(--rz-panel-background-color);
    border: var(--rz-border-normal);
    border-radius: var(--rz-border-radius);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease;
}

.agenda-item-card:hover[b-glrh35ms1c] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--rz-shadow);
}

.agenda-item-card.selected[b-glrh35ms1c] {
    border-color: var(--rz-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--rz-primary) 25%, transparent);
}

/* === Compact Mode === */
.agenda-item-card.compact[b-glrh35ms1c] {
    min-height: auto;
}

.agenda-item-card.compact .card-content[b-glrh35ms1c] {
    padding: 6px 8px;
}

.agenda-item-card.compact .card-header[b-glrh35ms1c] {
    margin-bottom: 2px;
}

.agenda-item-card.compact .card-title[b-glrh35ms1c] {
    font-size: 0.8125rem;
}

/* === Type Stripe === */
.type-stripe[b-glrh35ms1c] {
    width: 4px;
    flex-shrink: 0;
}

.type-stripe.item-appointment[b-glrh35ms1c] {
    background-color: var(--rz-primary);
}

.type-stripe.item-break[b-glrh35ms1c] {
    background-color: var(--rz-info);
}

.type-stripe.item-blocked[b-glrh35ms1c] {
    background-color: var(--rz-base-500);
}

.type-stripe.item-absence[b-glrh35ms1c] {
    background-color: var(--rz-warning);
}

.type-stripe.item-default[b-glrh35ms1c] {
    background-color: var(--rz-secondary);
}

/* === Card Content === */
.card-content[b-glrh35ms1c] {
    flex: 1;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* === Card Header === */
.card-header[b-glrh35ms1c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.item-time[b-glrh35ms1c] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--rz-text-secondary-color);
}

.item-type-badge[b-glrh35ms1c] {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.item-type-badge.item-appointment[b-glrh35ms1c] {
    background-color: var(--rz-primary-lighter);
    color: var(--rz-primary);
}

.item-type-badge.item-break[b-glrh35ms1c] {
    background-color: var(--rz-info-lighter);
    color: var(--rz-info);
}

.item-type-badge.item-blocked[b-glrh35ms1c] {
    background-color: var(--rz-base-600);
    color: var(--rz-text-secondary-color);
}

.item-type-badge.item-absence[b-glrh35ms1c] {
    background-color: var(--rz-warning-lighter);
    color: var(--rz-warning);
}

.item-type-badge.item-default[b-glrh35ms1c] {
    background-color: var(--rz-secondary-lighter);
    color: var(--rz-secondary);
}

/* === Card Title === */
.card-title[b-glrh35ms1c] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--rz-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === Card Subtitle === */
.card-subtitle[b-glrh35ms1c] {
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === Card Details === */
.card-details[b-glrh35ms1c] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.detail-item[b-glrh35ms1c] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

.detail-item[b-glrh35ms1c]  .rzi {
    font-size: 0.875rem;
    opacity: 0.7;
}

/* === Card Status === */
.card-status[b-glrh35ms1c] {
    margin-top: 4px;
}

.status-badge[b-glrh35ms1c] {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 10px;
    background-color: var(--rz-base-600);
    color: var(--rz-text-secondary-color);
}

/* === Card Actions === */
.card-actions[b-glrh35ms1c] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 8px;
    border-left: var(--rz-border-normal);
    background-color: var(--rz-body-background-color);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.agenda-item-card:hover .card-actions[b-glrh35ms1c] {
    opacity: 1;
}

.action-btn[b-glrh35ms1c] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: transparent;
    border: 1px solid var(--rz-base-500);
    border-radius: var(--rz-border-radius);
    color: var(--rz-text-secondary-color);
    cursor: pointer;
    transition: all 0.15s ease;
}

.action-btn:hover[b-glrh35ms1c] {
    background-color: var(--rz-base-600);
    color: var(--rz-text-color);
    border-color: var(--rz-base-400);
}

.action-btn.danger:hover[b-glrh35ms1c] {
    background-color: var(--rz-danger-lighter);
    color: var(--rz-danger);
    border-color: var(--rz-danger);
}

.action-btn[b-glrh35ms1c]  .rzi {
    font-size: 1rem;
}

/* === Type-specific backgrounds === */
.agenda-item-card.item-appointment[b-glrh35ms1c] {
    background-color: color-mix(in srgb, var(--rz-primary-lighter) 30%, var(--rz-panel-background-color));
}

.agenda-item-card.item-break[b-glrh35ms1c] {
    background-color: color-mix(in srgb, var(--rz-info-lighter) 30%, var(--rz-panel-background-color));
}

.agenda-item-card.item-blocked[b-glrh35ms1c] {
    background-color: var(--rz-base-600);
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 8px,
        rgba(0, 0, 0, 0.03) 8px,
        rgba(0, 0, 0, 0.03) 16px
    );
}

.agenda-item-card.item-absence[b-glrh35ms1c] {
    background-color: color-mix(in srgb, var(--rz-warning-lighter) 30%, var(--rz-panel-background-color));
}

/* === Custom Color Override === */
.agenda-item-card[style*="--item-color"][b-glrh35ms1c] {
    border-left: 4px solid var(--item-color);
}

.agenda-item-card[style*="--item-color"] .type-stripe[b-glrh35ms1c] {
    display: none;
}

/* === Responsive Design === */
@media (max-width: 768px) {
    .card-content[b-glrh35ms1c] {
        padding: 8px 10px;
    }

    .card-title[b-glrh35ms1c] {
        font-size: 0.875rem;
    }

    .card-subtitle[b-glrh35ms1c] {
        font-size: 0.75rem;
    }

    .card-details[b-glrh35ms1c] {
        gap: 8px;
    }

    .detail-item[b-glrh35ms1c] {
        font-size: 0.6875rem;
    }

    .card-actions[b-glrh35ms1c] {
        padding: 4px;
    }

    .action-btn[b-glrh35ms1c] {
        width: 24px;
        height: 24px;
    }
}

@media (max-width: 480px) {
    .card-header[b-glrh35ms1c] {
        flex-wrap: wrap;
    }

    .item-type-badge[b-glrh35ms1c] {
        font-size: 0.5625rem;
        padding: 1px 4px;
    }

    .card-details[b-glrh35ms1c] {
        flex-direction: column;
        gap: 4px;
    }
}
/* /Components/Custom/Agenda/AgendaWeekView.razor.rz.scp.css */
/* AgendaWeekView - Week View Component */
/* Uses semantic Radzen variables for light/dark mode support */

.agenda-week-view[b-3ohtmclxql] {
    display: flex;
    flex-direction: column;
    background-color: var(--rz-base-background-color);
    border: var(--rz-border-normal);
    border-radius: var(--rz-border-radius);
    overflow: hidden;
}

/* === Week Header === */
.week-header[b-3ohtmclxql] {
    display: flex;
    background-color: var(--rz-body-background-color);
    border-bottom: var(--rz-border-normal);
    position: sticky;
    top: 0;
    z-index: 5;
}

.time-header-spacer[b-3ohtmclxql] {
    flex-shrink: 0;
    width: 60px;
    border-right: var(--rz-border-normal);
}

.day-header[b-3ohtmclxql] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0.25rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
    border-left: 1px solid var(--rz-base-600);
    min-width: 0;
    position: relative;
}

.day-header:hover[b-3ohtmclxql] {
    background-color: var(--rz-base-600);
}

.day-header.today[b-3ohtmclxql] {
    background-color: var(--rz-primary-lighter);
}

.day-header.selected[b-3ohtmclxql] {
    background-color: var(--rz-primary-lighter);
    box-shadow: inset 0 -2px 0 var(--rz-primary);
}

.day-name[b-3ohtmclxql] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    text-transform: uppercase;
    font-weight: 500;
}

.day-number[b-3ohtmclxql] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--rz-text-color);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.day-header.today .day-number[b-3ohtmclxql] {
    background-color: var(--rz-primary);
    color: var(--rz-on-primary);
    border-radius: 50%;
}

.day-count[b-3ohtmclxql] {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 0.625rem;
    font-weight: 600;
    background-color: var(--rz-primary);
    color: var(--rz-on-primary);
    padding: 1px 5px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
}

/* === Week Content === */
.week-content[b-3ohtmclxql] {
    display: flex;
    flex: 1;
    overflow: auto;
}

/* === Time Column === */
.time-column[b-3ohtmclxql] {
    flex-shrink: 0;
    width: 60px;
    background-color: var(--rz-body-background-color);
    border-right: var(--rz-border-normal);
    position: sticky;
    left: 0;
    z-index: 2;
}

.time-slot-label[b-3ohtmclxql] {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 2px 8px 0 0;
    border-bottom: 1px solid var(--rz-base-600);
    box-sizing: border-box;
}

.time-slot-label .time-text[b-3ohtmclxql] {
    font-size: 0.6875rem;
    color: var(--rz-text-secondary-color);
    font-weight: 500;
    transform: translateY(-50%);
}

/* === Day Columns === */
.day-column[b-3ohtmclxql] {
    flex: 1;
    border-left: 1px solid var(--rz-base-600);
    position: relative;
    min-width: 60px;
}

.day-column.today[b-3ohtmclxql] {
    background-color: color-mix(in srgb, var(--rz-primary-lighter) 30%, transparent);
}

.day-column.selected[b-3ohtmclxql] {
    background-color: color-mix(in srgb, var(--rz-primary-lighter) 20%, transparent);
}

.time-slot[b-3ohtmclxql] {
    border-bottom: 1px solid var(--rz-base-600);
    cursor: pointer;
    transition: background-color 0.15s ease;
    box-sizing: border-box;
}

.time-slot.hour-mark[b-3ohtmclxql] {
    border-bottom: 1px solid var(--rz-base-500);
}

.time-slot:hover[b-3ohtmclxql] {
    background-color: color-mix(in srgb, var(--rz-primary) 10%, transparent);
}

/* === Items Overlay === */
.items-overlay[b-3ohtmclxql] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.week-item[b-3ohtmclxql] {
    position: absolute;
    pointer-events: auto;
    border-radius: 3px;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.1s ease, box-shadow 0.1s ease, z-index 0.1s ease;
    margin-left: 1px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2px;
}

.week-item:hover[b-3ohtmclxql] {
    transform: scale(1.05);
    box-shadow: 0 3px 10px var(--rz-shadow);
    z-index: 20;
}

.week-item .item-title[b-3ohtmclxql] {
    font-size: 0.625rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

/* === Item Type Colors === */
.item-appointment[b-3ohtmclxql] {
    background-color: var(--rz-primary);
    color: var(--rz-on-primary);
    border-left: 2px solid var(--rz-primary-darker);
}

.item-break[b-3ohtmclxql] {
    background-color: var(--rz-info);
    color: var(--rz-on-info);
    border-left: 2px solid var(--rz-info-darker);
}

.item-blocked[b-3ohtmclxql] {
    background-color: var(--rz-base-500);
    color: var(--rz-text-color);
    border-left: 2px solid var(--rz-base-400);
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 4px,
        rgba(0, 0, 0, 0.1) 4px,
        rgba(0, 0, 0, 0.1) 8px
    );
}

.item-absence[b-3ohtmclxql] {
    background-color: var(--rz-warning);
    color: var(--rz-on-warning);
    border-left: 2px solid var(--rz-warning-darker);
}

.item-default[b-3ohtmclxql] {
    background-color: var(--rz-secondary);
    color: var(--rz-on-secondary);
    border-left: 2px solid var(--rz-secondary-darker);
}

/* === Tooltip === */
.item-tooltip[b-3ohtmclxql] {
    position: absolute;
    z-index: 100;
    background-color: var(--rz-panel-background-color);
    border: var(--rz-border-normal);
    border-radius: var(--rz-border-radius);
    padding: 8px;
    box-shadow: 0 4px 12px var(--rz-shadow);
    min-width: 120px;
    max-width: 200px;
    pointer-events: none;
}

.tooltip-time[b-3ohtmclxql] {
    font-size: 0.6875rem;
    color: var(--rz-text-secondary-color);
    margin-bottom: 4px;
}

.tooltip-title[b-3ohtmclxql] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--rz-text-color);
    margin-bottom: 2px;
}

.tooltip-subtitle[b-3ohtmclxql] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

.tooltip-detail[b-3ohtmclxql] {
    font-size: 0.6875rem;
    color: var(--rz-text-secondary-color);
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--rz-base-600);
}

/* === Current Time Indicator === */
.current-time-line[b-3ohtmclxql] {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--rz-danger);
    z-index: 15;
    pointer-events: none;
}

.current-time-line[b-3ohtmclxql]::before {
    content: '';
    position: absolute;
    left: -4px;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--rz-danger);
}

/* === Responsive Design === */
@media (max-width: 768px) {
    .time-header-spacer[b-3ohtmclxql],
    .time-column[b-3ohtmclxql] {
        width: 45px;
    }

    .time-slot-label[b-3ohtmclxql] {
        padding-right: 4px;
    }

    .time-slot-label .time-text[b-3ohtmclxql] {
        font-size: 0.625rem;
    }

    .day-header[b-3ohtmclxql] {
        padding: 0.25rem 0.125rem;
    }

    .day-name[b-3ohtmclxql] {
        font-size: 0.625rem;
    }

    .day-number[b-3ohtmclxql] {
        font-size: 0.75rem;
        width: 24px;
        height: 24px;
    }

    .day-count[b-3ohtmclxql] {
        font-size: 0.5625rem;
        padding: 1px 4px;
    }

    .week-item .item-title[b-3ohtmclxql] {
        display: none;
    }

    .item-tooltip[b-3ohtmclxql] {
        min-width: 100px;
    }
}

@media (max-width: 480px) {
    .time-header-spacer[b-3ohtmclxql],
    .time-column[b-3ohtmclxql] {
        width: 35px;
    }

    .day-column[b-3ohtmclxql] {
        min-width: 40px;
    }

    .day-name[b-3ohtmclxql] {
        display: none;
    }

    .day-count[b-3ohtmclxql] {
        display: none;
    }

    .item-tooltip[b-3ohtmclxql] {
        display: none;
    }
}
/* /Components/Custom/Authorization/ManagerStepUpDialog.razor.rz.scp.css */
.msu-overlay[b-sfkz9sp97x] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1300;
}

.msu-dialog[b-sfkz9sp97x] {
    background: var(--rz-base-background-color, #fff);
    border-radius: 12px;
    padding: 1.5rem;
    width: min(420px, 92vw);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.msu-header[b-sfkz9sp97x] {
    font-size: 1.1rem;
    font-weight: 600;
}

.msu-intro[b-sfkz9sp97x],
.msu-pin-intro[b-sfkz9sp97x] {
    color: var(--rz-text-secondary-color, #555);
}

.msu-manager-list[b-sfkz9sp97x] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.msu-manager-btn[b-sfkz9sp97x] {
    padding: 0.75rem 1rem;
    border: 1px solid var(--rz-border, #ddd);
    border-radius: 8px;
    background: var(--rz-base-100, #f7f7f7);
    cursor: pointer;
    text-align: left;
    font-size: 1rem;
}

.msu-manager-btn:hover[b-sfkz9sp97x] {
    background: var(--rz-primary-light, #eef);
}

.msu-error[b-sfkz9sp97x] {
    color: var(--rz-danger, #d32f2f);
    font-size: 0.9rem;
}

.msu-empty[b-sfkz9sp97x] {
    color: var(--rz-danger, #d32f2f);
}

.msu-actions[b-sfkz9sp97x] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.msu-back[b-sfkz9sp97x],
.msu-cancel[b-sfkz9sp97x] {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--rz-text-secondary-color, #555);
    cursor: pointer;
}

.msu-back:disabled[b-sfkz9sp97x],
.msu-cancel:disabled[b-sfkz9sp97x] {
    opacity: 0.5;
    cursor: default;
}
/* /Components/Custom/ButtonSmall/CustomButtonSmall.razor.rz.scp.css */
[b-4hjyrvq3zt] .rz-button-sm.rz-button-icon-only {
    padding: 0.25rem 0.45rem 0.25rem 0.45rem !important;
}
/* /Components/Custom/Card/CustomCard.razor.rz.scp.css */
/* CustomCard - Compact Section Card for Drawers */
/* Matches .rz-card styling for consistency */
/* Uses semantic Radzen variables for light/dark mode support */

.custom-card[b-rte911l5en] {
    background-color: var(--rz-base-background-color);
    border: var(--rz-border-normal);
    border-radius: 0 var(--rz-border-radius) var(--rz-border-radius) 0;
    color: var(--rz-text-color);
    margin-bottom: 0.75rem;
    transition: border-color 0.15s ease;
    overflow: hidden;
}

/* Klantendashboard v2: hover verandert alleen de borderkleur — geen schaduw, geen
   translateY (een transform maakt de kaart bovendien containing block voor
   position:fixed-overlays, zie DT-13.6-4). */
.custom-card:hover[b-rte911l5en] {
    border-color: var(--em-primary-line);
}

.variant-primary:hover[b-rte911l5en] {
    border-color: var(--rz-primary);
}

.variant-secondary:hover[b-rte911l5en] {
    border-color: var(--rz-secondary);
}

.variant-success:hover[b-rte911l5en] {
    border-color: var(--rz-success);
}

.variant-info:hover[b-rte911l5en] {
    border-color: var(--rz-info);
}

.variant-warning:hover[b-rte911l5en] {
    border-color: var(--rz-warning);
}

.variant-danger:hover[b-rte911l5en] {
    border-color: var(--rz-danger);
}

/* Card Header */
.custom-card-header[b-rte911l5en] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background-color: var(--rz-body-background-color);
    border-bottom: var(--rz-border-normal);
    min-height: 40px;
}

.custom-card-header.clickable[b-rte911l5en] {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.custom-card-header.clickable:hover[b-rte911l5en] {
    background-color: var(--rz-base-600);
}

.custom-card-header-left[b-rte911l5en] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.custom-card-header-right[b-rte911l5en] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Icon */
.custom-card-icon[b-rte911l5en] {
    display: flex;
    align-items: center;
    font-size: 1.125rem;
    line-height: 1;
}

.custom-card-icon .rzi[b-rte911l5en] {
    font-size: 1.25rem;
}

/* Title */
.custom-card-title[b-rte911l5en] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--rz-text-color);
    letter-spacing: 0.2px;
}

/* Required indicator */
.custom-card-required[b-rte911l5en] {
    color: var(--rz-danger);
    font-weight: 600;
    margin-left: 2px;
}

/* Subtitle */
.custom-card-subtitle[b-rte911l5en] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem 0.5rem 0.75rem;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    background-color: var(--rz-body-background-color);
    border-bottom: var(--rz-border-normal);
}

/* Badge — rechthoekig (Klantendashboard v2, radius 2px) */
.custom-card-badge[b-rte911l5en] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: var(--em-radius-xs);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Badge Variants - using Radzen color variables */
.badge-default[b-rte911l5en] {
    background: var(--rz-base-200, #e9edf0);
    color: var(--rz-text-color);
}

.badge-required[b-rte911l5en] {
    background: var(--rz-primary-lighter);
    color: var(--rz-primary);
    border: 1px solid var(--rz-primary);
}

.badge-conditional[b-rte911l5en] {
    background: var(--rz-warning-lighter);
    color: var(--rz-warning);
    border: 1px solid var(--rz-warning);
}

.badge-type-specific[b-rte911l5en] {
    background: var(--rz-secondary-lighter);
    color: var(--rz-secondary);
    border: 1px solid var(--rz-secondary);
}

.badge-success[b-rte911l5en] {
    background: var(--rz-success-lighter);
    color: var(--rz-success);
    border: 1px solid var(--rz-success);
}

.badge-warning[b-rte911l5en] {
    background: var(--rz-warning-lighter);
    color: var(--rz-warning);
    border: 1px solid var(--rz-warning);
}

.badge-danger[b-rte911l5en] {
    background: var(--rz-danger-lighter);
    color: var(--rz-danger);
    border: 1px solid var(--rz-danger);
}

.badge-info[b-rte911l5en] {
    background: var(--rz-info-lighter);
    color: var(--rz-info);
    border: 1px solid var(--rz-info);
}

/* Expand Icon */
.custom-card-expand-icon[b-rte911l5en] {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    color: var(--rz-text-secondary-color);
}

.custom-card-expand-icon.expanded[b-rte911l5en] {
    transform: rotate(180deg);
}

/* Content */
.custom-card-content[b-rte911l5en] {
    padding: 0.75rem;
    background-color: var(--rz-base-background-color);
}

/* Collapsed state - no bottom border on header */
.custom-card.collapsed .custom-card-header[b-rte911l5en] {
    border-bottom: none;
    border-radius: 0 var(--rz-border-radius) var(--rz-border-radius) 0;
}

/* Footer */
.custom-card-footer[b-rte911l5en] {
    padding: 0.5rem 0.75rem;
    border-top: var(--rz-border-normal);
    background-color: var(--rz-body-background-color);
}

/* Card Variants - Left border accent */
.variant-default[b-rte911l5en] {
    border-left: 3px solid var(--rz-secondary);
}

.variant-primary[b-rte911l5en] {
    border-left: 3px solid var(--rz-primary);
}

.variant-secondary[b-rte911l5en] {
    border-left: 3px solid var(--rz-secondary);
}

.variant-success[b-rte911l5en] {
    border-left: 3px solid var(--rz-success);
}

.variant-info[b-rte911l5en] {
    border-left: 3px solid var(--rz-info);
}

.variant-warning[b-rte911l5en] {
    border-left: 3px solid var(--rz-warning);
}

.variant-danger[b-rte911l5en] {
    border-left: 3px solid var(--rz-danger);
}

/* Outlined variant - no left accent, full border, for nested cards */
.variant-outlined[b-rte911l5en] {
    border-left: var(--rz-border-normal);
    border: 1px solid var(--rz-base-600);
    margin-bottom: 0; /* Remove default margin for nested cards */
}

.variant-outlined .custom-card-icon[b-rte911l5en] {
    color: var(--rz-text-color);
}

/* Plain variant - no left accent, normal borders */
.variant-plain[b-rte911l5en] {
    border-left: var(--rz-border-normal);
}

.variant-plain .custom-card-icon[b-rte911l5en] {
    color: var(--rz-text-color);
}

/* Icon colors based on variant */
.variant-primary .custom-card-icon[b-rte911l5en] {
    color: var(--rz-primary);
}

.variant-secondary .custom-card-icon[b-rte911l5en] {
    color: var(--rz-secondary);
}

.variant-success .custom-card-icon[b-rte911l5en] {
    color: var(--rz-success);
}

.variant-info .custom-card-icon[b-rte911l5en] {
    color: var(--rz-info);
}

.variant-warning .custom-card-icon[b-rte911l5en] {
    color: var(--rz-warning);
}

.variant-danger .custom-card-icon[b-rte911l5en] {
    color: var(--rz-danger);
}

/* Animation for expand/collapse */
.custom-card.collapsible .custom-card-content[b-rte911l5en] {
    animation: slideDown-b-rte911l5en 200ms ease;
}

@keyframes slideDown-b-rte911l5en {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Compact variant for dense layouts */
.custom-card.compact .custom-card-header[b-rte911l5en] {
    padding: 0.375rem 0.625rem;
    min-height: 32px;
}

.custom-card.compact .custom-card-content[b-rte911l5en] {
    padding: 0.5rem 0.625rem;
}

.custom-card.compact .custom-card-title[b-rte911l5en] {
    font-size: 0.8125rem;
}

.custom-card.compact .custom-card-badge[b-rte911l5en] {
    font-size: 0.625rem;
    padding: 0.0625rem 0.375rem;
}

/* Light/Dark mode support - Uses semantic Radzen variables that adapt automatically */
/* Header/Footer: --rz-body-background-color, Body/Content: --rz-base-background-color */

/* Responsive Design */
@media (max-width: 768px) {
    .custom-card-header[b-rte911l5en] {
        padding: 0.375rem 0.5rem;
    }

    .custom-card-content[b-rte911l5en] {
        padding: 0.5rem;
    }

    .custom-card-icon[b-rte911l5en] {
        font-size: 1rem;
    }
}
/* /Components/Custom/Card/CustomCordion.razor.rz.scp.css */
.custom-cordion[b-mpgkhkesg1] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
/* /Components/Custom/Card/CustomEMCard.razor.rz.scp.css */
/* Base Card Styling — RecordCard (Klantendashboard v2): strak/vierkant, geen schaduwen */
[b-4hgxicruki] .custom-em-card {
    transition: border-color 0.15s ease;
    border: 1px solid var(--rz-border-color);
    background: var(--rz-surface-background);
    padding: 0;
    margin-bottom: 0.5rem;
    border-radius: 3px;
    /* GEEN overflow:hidden — het ⋮-contextmenu moet over de kaartrand heen kunnen
       vallen; de header regelt zijn eigen hoek-radius. */
    overflow: visible;
}

/* Hover: alleen borderkleur, niets verschuiven, geen schaduw */
[b-4hgxicruki] .custom-em-card:hover {
    border-color: var(--em-primary-line);
}

/* Actieve/geselecteerde kaart */
[b-4hgxicruki] .custom-em-card.selected {
    border-color: var(--em-primary-line);
    background: var(--em-surface-sunken);
}

[b-4hgxicruki] .custom-em-card.selected .card-header {
    background: var(--em-surface-sunken);
}

/* Card Header - Match EntityNotes note-header-compact */
[b-4hgxicruki] .custom-em-card .card-header {
    background: var(--rz-surface-background-alt);
    border-bottom: 1px solid var(--rz-border-color);
    padding: 0.75rem;
    border-radius: var(--rz-border-radius) var(--rz-border-radius) 0 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

[b-4hgxicruki] .custom-em-card .card-header:hover {
    background: var(--rz-surface-hover);
}

[b-4hgxicruki] .custom-em-card .card-header.collapsed {
    border-radius: var(--rz-border-radius);
    border-bottom: none;
}

/* Card Content - Match EntityNotes note-content */
[b-4hgxicruki] .custom-em-card .card-content {
    padding: 0.75rem;
    background: var(--rz-surface-background);
    border-top: 1px solid var(--rz-border-color);
}

/* Variant Colors - Left Border */
[b-4hgxicruki] .custom-em-card.variant-primary {
    border-left: 3px solid var(--rz-primary) !important;
}

[b-4hgxicruki] .custom-em-card.variant-secondary {
    border-left: 3px solid var(--rz-secondary) !important;
}

[b-4hgxicruki] .custom-em-card.variant-success {
    border-left: 3px solid var(--rz-success) !important;
}

[b-4hgxicruki] .custom-em-card.variant-info {
    border-left: 3px solid var(--rz-info) !important;
}

[b-4hgxicruki] .custom-em-card.variant-warning {
    border-left: 3px solid var(--rz-warning) !important;
}

[b-4hgxicruki] .custom-em-card.variant-danger {
    border-left: 3px solid var(--rz-danger) !important;
}

[b-4hgxicruki] .custom-em-card.variant-default {
    border-left: 3px solid var(--rz-border-color) !important;
}

/* Icon Colors */
[b-4hgxicruki] .custom-em-card.variant-primary .card-icon {
    color: var(--rz-primary);
}

[b-4hgxicruki] .custom-em-card.variant-secondary .card-icon {
    color: var(--rz-secondary);
}

[b-4hgxicruki] .custom-em-card.variant-success .card-icon {
    color: var(--rz-success);
}

[b-4hgxicruki] .custom-em-card.variant-info .card-icon {
    color: var(--rz-info);
}

[b-4hgxicruki] .custom-em-card.variant-warning .card-icon {
    color: var(--rz-warning);
}

[b-4hgxicruki] .custom-em-card.variant-danger .card-icon {
    color: var(--rz-danger);
    font-size: 1.2rem;
}

[b-4hgxicruki] .custom-em-card.variant-default .card-icon {
    color: var(--rz-text-color);
}

/* Title Row - Indented under date, aligned after icon */
[b-4hgxicruki] .custom-em-card .card-title-row {
    margin-left: calc(1.25rem + 0.5rem); /* Icon width + gap */
}

/* Expand Icon - Match EntityNotes collapse-icon */
[b-4hgxicruki] .custom-em-card .expand-icon {
    transition: transform 0.2s ease;
    color: var(--rz-text-color);
    cursor: pointer;
}

[b-4hgxicruki] .custom-em-card .expand-icon.expanded {
    transform: rotate(180deg);
}

/* Preview Content - Match EntityNotes note-preview */
[b-4hgxicruki] .custom-em-card .preview-content {
    color: var(--rz-text-color);
    font-style: italic;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    max-height: 2.8em;
    margin-top: 0 ;
}

/* Full Content - Match EntityNotes note-full-text */
[b-4hgxicruki] .custom-em-card .card-content div {
    color: var(--rz-text-color);
    white-space: pre-wrap;
    line-height: 1.5;
}

/* Subtitle Info - Match EntityNotes author-info */
[b-4hgxicruki] .custom-em-card .subtitle-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--rz-text-secondary-color);
}

[b-4hgxicruki] .custom-em-card .subtitle-info .rz-icon {
    color: var(--rz-text-secondary-color);
    font-size: 0.8rem;
}

/* Last Modified */
[b-4hgxicruki] .custom-em-card .last-modified {
    margin-top: 0.5rem;
    color: var(--rz-text-secondary-color);
}

[b-4hgxicruki] .custom-em-card .last-modified .rz-icon {
    color: var(--rz-text-secondary-color);
    font-size: 0.75rem;
}

/* Dark Mode Support - Use Radzen CSS Variables */
[data-bs-theme="dark"][b-4hgxicruki]  .custom-em-card.variant-primary {
    border-left-color: var(--rz-primary);
}

[data-bs-theme="dark"][b-4hgxicruki]  .custom-em-card.variant-danger {
    border-left-color: var(--rz-danger);
}

[data-bs-theme="dark"][b-4hgxicruki]  .custom-em-card.variant-danger .card-icon {
    color: var(--rz-danger);
}

[data-bs-theme="dark"][b-4hgxicruki]  .custom-em-card.variant-info {
    border-left-color: var(--rz-info);
}

[data-bs-theme="dark"][b-4hgxicruki]  .custom-em-card.variant-info .card-icon {
    color: var(--rz-info);
}

[data-bs-theme="dark"][b-4hgxicruki]  .custom-em-card.variant-success {
    border-left-color: var(--rz-success);
}

[data-bs-theme="dark"][b-4hgxicruki]  .custom-em-card.variant-success .card-icon {
    color: var(--rz-success);
}

[data-bs-theme="dark"][b-4hgxicruki]  .custom-em-card.variant-warning {
    border-left-color: var(--rz-warning);
}

[data-bs-theme="dark"][b-4hgxicruki]  .custom-em-card.variant-warning .card-icon {
    color: var(--rz-warning);
}

/* Planning Card Variant - Minimal styling with only left border */
[b-4hgxicruki] .custom-em-card.planning-variant {
    background: var(--rz-surface-background);
    border: 1px solid var(--rz-border-color);
    border-left: 3px solid var(--rz-border-color); /* Default left border */
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: var(--rz-border-radius);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: none;
    transform: none;
}

[b-4hgxicruki] .custom-em-card.planning-variant:hover {
    background: var(--rz-surface-hover);
    box-shadow: none;
    transform: none;
}

[b-4hgxicruki] .custom-em-card.planning-variant .card-header {
    background: transparent;
    border-bottom: none;
    padding: 0;
    border-radius: 0;
    cursor: inherit;
}

[b-4hgxicruki] .custom-em-card.planning-variant .card-header:hover {
    background: transparent;
}

[b-4hgxicruki] .custom-em-card.planning-variant .card-content {
    padding: 0;
    background: transparent;
    border-top: none;
}

/* Planning Priority Variants with left borders */
[b-4hgxicruki] .custom-em-card.planning-variant.variant-default {
    border-left: 3px solid var(--rz-border-color) !important;
}

[b-4hgxicruki] .custom-em-card.planning-variant.variant-primary {
    border-left: 3px solid var(--rz-primary) !important;
}

[b-4hgxicruki] .custom-em-card.planning-variant.variant-secondary {
    border-left: 3px solid var(--rz-secondary) !important;
}

[b-4hgxicruki] .custom-em-card.planning-variant.variant-success {
    border-left: 3px solid var(--rz-success) !important;
}

[b-4hgxicruki] .custom-em-card.planning-variant.variant-info {
    border-left: 3px solid var(--rz-info) !important;
}

[b-4hgxicruki] .custom-em-card.planning-variant.variant-warning {
    border-left: 3px solid var(--rz-warning) !important;
    animation: pulse-b-4hgxicruki 2s infinite;
}

[b-4hgxicruki] .custom-em-card.planning-variant.variant-danger {
    border-left: 3px solid var(--rz-danger) !important;
}

/* Planning variant preview-content alignment */
[b-4hgxicruki] .custom-em-card.planning-variant .preview-content {
    margin-left: calc(1.25rem + 0.5rem); /* Icon width (1.25rem) + gap (0.5rem) */
    margin-top: 0.25rem;
}

@keyframes pulse-b-4hgxicruki {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Responsive Design */
@media (max-width: 768px) {
    [b-4hgxicruki] .custom-em-card .card-header {
        padding: 0.5rem;
    }

    [b-4hgxicruki] .custom-em-card .card-content {
        padding: 0.5rem;
    }

    [b-4hgxicruki] .custom-em-card .card-icon {
        font-size: 1rem;
    }

    [b-4hgxicruki] .custom-em-card.variant-danger .card-icon {
        font-size: 1.1rem;
    }
}

/* Pill Styling — rechthoekige statuspill (Klantendashboard v2): radius 2px, 10px/700, tekst+vlak-paar zonder rand */
[b-4hgxicruki] .custom-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 7px;
    border-radius: var(--em-radius-xs);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    text-align: center;
    line-height: 1;
}

/* Pill Variants — semantische paren uit design-system.css */
[b-4hgxicruki] .custom-pill.pill-default {
    background-color: var(--em-sem-neutral-bg);
    color: var(--em-sem-neutral-text);
}

[b-4hgxicruki] .custom-pill.pill-primary {
    background-color: var(--em-primary-tint);
    color: var(--em-primary);
}

[b-4hgxicruki] .custom-pill.pill-secondary {
    background-color: var(--em-sem-subscription-bg);
    color: var(--em-sem-subscription-text);
}

[b-4hgxicruki] .custom-pill.pill-success {
    background-color: var(--em-sem-success-bg);
    color: var(--em-sem-success-text);
}

[b-4hgxicruki] .custom-pill.pill-info {
    background-color: var(--em-primary-tint);
    color: var(--em-primary);
}

[b-4hgxicruki] .custom-pill.pill-warning {
    background-color: var(--em-sem-wait-bg);
    color: var(--em-sem-wait-text);
}

[b-4hgxicruki] .custom-pill.pill-danger {
    background-color: var(--em-sem-error-bg);
    color: var(--em-sem-error-text);
}

/* Kopieerbare titel (ordernummer) leest als de gewone caption-titel. */
[b-4hgxicruki] .card-title-copyable {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}
/* /Components/Custom/Card/CustomStatCard.razor.rz.scp.css */
/* CustomStatCard - Dashboard Statistics Card */
/* Displays a metric with icon, value, and label */

.stat-card[b-paiu5no7je] {
    background-color: var(--rz-base-background-color);
    border: var(--rz-border-normal);
    border-radius: var(--rz-border-radius);
    border-left-width: 4px;
    border-left-style: solid;
    padding: 1rem;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.stat-card:hover[b-paiu5no7je] {
    box-shadow: 0 2px 8px var(--rz-shadow);
}

.stat-card.clickable[b-paiu5no7je] {
    cursor: pointer;
}

.stat-card.clickable:hover[b-paiu5no7je] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--rz-shadow);
}

.stat-card.clickable:active[b-paiu5no7je] {
    transform: translateY(0);
}

/* Content layout */
.stat-card-content[b-paiu5no7je] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Icon */
.stat-card-icon[b-paiu5no7je] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    --rz-icon-size: 3.5rem;
}

/* Data section */
.stat-card-data[b-paiu5no7je] {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

/* Value */
.stat-card-value[b-paiu5no7je] {
    font-size: clamp(1rem, 2vw, 1.75rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--rz-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Label */
.stat-card-label[b-paiu5no7je] {
    font-size: 0.8125rem;
    color: var(--rz-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-card-note[b-paiu5no7je] {
    font-size: 0.72rem;
    color: var(--rz-text-secondary-color);
    margin-top: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Variant colors - Left border and icon */
.variant-primary[b-paiu5no7je] {
    border-left-color: var(--rz-primary);
}

.variant-primary .stat-card-icon[b-paiu5no7je] {
    color: var(--rz-primary);
}

.variant-secondary[b-paiu5no7je] {
    border-left-color: var(--rz-secondary);
}

.variant-secondary .stat-card-icon[b-paiu5no7je] {
    color: var(--rz-secondary);
}

.variant-success[b-paiu5no7je] {
    border-left-color: var(--rz-success);
}

.variant-success .stat-card-icon[b-paiu5no7je] {
    color: var(--rz-success);
}

.variant-info[b-paiu5no7je] {
    border-left-color: var(--rz-info);
}

.variant-info .stat-card-icon[b-paiu5no7je] {
    color: var(--rz-info);
}

.variant-warning[b-paiu5no7je] {
    border-left-color: var(--rz-warning);
}

.variant-warning .stat-card-icon[b-paiu5no7je] {
    color: var(--rz-warning);
}

.variant-danger[b-paiu5no7je] {
    border-left-color: var(--rz-danger);
}

.variant-danger .stat-card-icon[b-paiu5no7je] {
    color: var(--rz-danger);
}

/* Responsive */
@media (max-width: 768px) {
    .stat-card[b-paiu5no7je] {
        padding: 0.75rem;
    }

    .stat-card-icon[b-paiu5no7je] {
        --rz-icon-size: 2.5rem;
    }

    .stat-card-value[b-paiu5no7je] {
        font-size: 1.5rem;
    }

    .stat-card-label[b-paiu5no7je] {
        font-size: 0.75rem;
    }
}
/* /Components/Custom/Chat/CustomChat.razor.rz.scp.css */
/* CustomChat — gespreksvenster. Kleuren komen uit de Radzen-designtokens zodat het
   component meebeweegt met het thema van de applicatie. */

.custom-chat[b-31sjowvpeb] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: 0.5rem;
}

.custom-chat__header[b-31sjowvpeb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--rz-border-color, rgba(0, 0, 0, 0.12));
}

.custom-chat__header-slot[b-31sjowvpeb] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.custom-chat__messages[b-31sjowvpeb] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem;
}

.custom-chat__empty[b-31sjowvpeb] {
    margin: auto;
    text-align: center;
    color: var(--rz-text-secondary-color, #6c757d);
}

.custom-chat__msg[b-31sjowvpeb] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-width: 100%;
}

.custom-chat__bubble[b-31sjowvpeb] {
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.custom-chat__msg--user[b-31sjowvpeb] {
    align-items: flex-end;
}

.custom-chat__msg--user .custom-chat__bubble[b-31sjowvpeb] {
    background: var(--rz-primary-lighter, #e3f2fd);
    color: var(--rz-text-color, #212529);
    max-width: 85%;
}

.custom-chat__msg--assistant .custom-chat__bubble[b-31sjowvpeb] {
    background: var(--rz-base-200, #f1f3f5);
    color: var(--rz-text-color, #212529);
}

.custom-chat__msg--clarify .custom-chat__bubble[b-31sjowvpeb] {
    background: var(--rz-base-100, #f8f9fa);
    border: 1px dashed var(--rz-border-color, rgba(0, 0, 0, 0.2));
}

/* Markdown-uitvoer van de assistent: compact houden binnen de bubbel. */
.custom-chat__markdown[b-31sjowvpeb] {
    white-space: normal;
}

/* De markdown komt als MarkupString binnen en krijgt dus geen scope-attribuut;
   ::deep is nodig om die inhoud te kunnen stijlen. */
.custom-chat__markdown[b-31sjowvpeb]  > :first-child {
    margin-top: 0;
}

.custom-chat__markdown[b-31sjowvpeb]  > :last-child {
    margin-bottom: 0;
}

.custom-chat__markdown[b-31sjowvpeb]  pre {
    overflow-x: auto;
    padding: 0.5rem;
    border-radius: 0.25rem;
    background: var(--rz-base-300, #e9ecef);
}

/* Knipperende cursor tijdens het streamen. */
.custom-chat__cursor[b-31sjowvpeb] {
    display: inline-block;
    width: 0.5rem;
    height: 1em;
    margin-left: 0.15rem;
    vertical-align: text-bottom;
    background: currentColor;
    animation: custom-chat-blink-b-31sjowvpeb 1s step-end infinite;
}

@keyframes custom-chat-blink-b-31sjowvpeb {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .custom-chat__cursor[b-31sjowvpeb] {
        animation: none;
    }
}

.custom-chat__sources[b-31sjowvpeb],
.custom-chat__actions[b-31sjowvpeb],
.custom-chat__options[b-31sjowvpeb],
.custom-chat__unanswered[b-31sjowvpeb],
.custom-chat__feedback[b-31sjowvpeb] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.custom-chat__options[b-31sjowvpeb] {
    margin-top: 0.5rem;
}

.custom-chat__option.is-chosen[b-31sjowvpeb],
.custom-chat__feedback-up.is-chosen[b-31sjowvpeb],
.custom-chat__feedback-down.is-chosen[b-31sjowvpeb] {
    font-weight: 600;
    opacity: 1;
}

/* Vrije inhoud die de aanroeper onder één antwoord hangt (bv. beoordelingsknoppen). */
.custom-chat__assistant-footer[b-31sjowvpeb] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.custom-chat__msg--notice .custom-chat__bubble[b-31sjowvpeb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-left: 4px solid var(--rz-info, #0dcaf0);
    background: var(--rz-base-100, #f8f9fa);
}

.custom-chat__msg--degraded .custom-chat__bubble[b-31sjowvpeb] {
    border-left-color: var(--rz-warning, #ffc107);
}

.custom-chat__msg--blocked .custom-chat__bubble[b-31sjowvpeb] {
    border-left-color: var(--rz-secondary, #6c757d);
}

.custom-chat__msg--error .custom-chat__bubble[b-31sjowvpeb] {
    border-left-color: var(--rz-danger, #dc3545);
}

.custom-chat__composer[b-31sjowvpeb] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.5rem;
    border-top: 1px solid var(--rz-border-color, rgba(0, 0, 0, 0.12));
}

/* De klasse landt op de RadzenFormField binnen CustomTextArea, dus buiten de scope. */
.custom-chat__composer[b-31sjowvpeb]  .custom-chat__input {
    flex: 1 1 auto;
}

.custom-chat__footer[b-31sjowvpeb] {
    padding: 0 0.5rem 0.5rem;
    color: var(--rz-text-secondary-color, #6c757d);
}
/* /Components/Custom/ContextMenu/CustomContextMenu.razor.rz.scp.css */
.em-context-menu[b-4hi6d15k8m] {
    position: relative;
    display: inline-flex;
    flex: none;
}

.em-context-menu__trigger[b-4hi6d15k8m] {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 3px;
    background: var(--rz-surface-hover);
    color: var(--em-text-tertiary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.em-context-menu__trigger[b-4hi6d15k8m]  .rzi {
    font-size: 16px;
}

.em-context-menu__trigger:hover[b-4hi6d15k8m] {
    background: var(--em-primary-tint);
    color: var(--em-primary);
}

.em-context-menu__trigger--open[b-4hi6d15k8m],
.em-context-menu__trigger--open:hover[b-4hi6d15k8m] {
    background: var(--em-primary);
    color: var(--em-text-inverse);
}

.em-context-menu__overlay[b-4hi6d15k8m] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: transparent;
}

.em-context-menu__menu[b-4hi6d15k8m] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 1201;
    background: var(--rz-surface-background);
    border: 1px solid var(--rz-border-color);
    border-radius: var(--em-radius-sm);
    box-shadow: var(--em-shadow-overlay);
    padding: 6px;
    overflow: hidden;
}

.em-context-menu__item[b-4hi6d15k8m] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 3px;
    font-size: 12.5px;
    color: var(--em-text-primary);
    cursor: pointer;
    white-space: nowrap;
}

.em-context-menu__item:hover[b-4hi6d15k8m] {
    background: var(--rz-surface-hover);
}

.em-context-menu__item--destructive[b-4hi6d15k8m] {
    color: var(--em-sem-error-text);
}

.em-context-menu__item--destructive:hover[b-4hi6d15k8m] {
    background: var(--em-sem-error-bg);
}

.em-context-menu__item--disabled[b-4hi6d15k8m] {
    opacity: 0.45;
    cursor: default;
}

.em-context-menu__item--disabled:hover[b-4hi6d15k8m] {
    background: transparent;
}

.em-context-menu__separator[b-4hi6d15k8m] {
    height: 1px;
    background: var(--em-border-subtle);
    margin: 4px 6px;
}
/* /Components/Custom/CopyToClipboard/CopyableText.razor.rz.scp.css */
/* De knop leest als gewone tekst; alleen het kopieer-icoontje verraadt de actie. */
.em-copyable[b-3cu6okhnxp] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: copy;
}

.em-copyable__icon[b-3cu6okhnxp] {
    font-size: 0.85em !important;
    opacity: 0;
    transition: opacity 0.15s ease;
    color: var(--rz-text-tertiary-color);
}

.em-copyable:hover .em-copyable__icon[b-3cu6okhnxp],
.em-copyable:focus-visible .em-copyable__icon[b-3cu6okhnxp] {
    opacity: 1;
}

.em-copyable__icon--done[b-3cu6okhnxp] {
    opacity: 1;
    color: var(--rz-success, #2c8a55);
}
/* /Components/Custom/DrawerWithAnchors/DrawerWithAnchors.razor.rz.scp.css */
/* Styles are in the .razor file as <style> block (not scoped) because
   anchor elements are portaled to document.body and fall outside Blazor's
   CSS isolation scope. Same pattern as CustomDrawer.razor. */
/* /Components/Custom/FAB/CustomFAB.razor.rz.scp.css */
/* ============================================================================
 * CustomFAB Component Styles
 * Epic: 2.5 - FAB Menu Button Component
 * Story: 2-5-1-customfab-component
 *
 * Features:
 * - EyeManage design: 0.5rem border-radius (squared with rounding)
 * - Responsive positioning (desktop/tablet/mobile)
 * - WCAG 2.1 AA compliant (48x48px touch targets)
 * - Theme support (light/dark mode via CSS variables)
 * - prefers-reduced-motion support
 * ============================================================================ */

/* ============================================================================
 * Base FAB Container
 * ============================================================================ */

.custom-fab[b-zctxigq5a1] {
    position: fixed;
    transition: all 0.2s ease-in-out;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    .custom-fab[b-zctxigq5a1],
    .custom-fab[b-zctxigq5a1]  .rz-button,
    .custom-fab[b-zctxigq5a1]  .rz-fab-menu-item {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================================
 * EyeManage Design Override: Small Icon-Only Buttons
 * Main button: Small square (0.5rem) when closed, round (50%) when open
 * Menu items: Small rounded squares (0.5rem) - icon only
 * ============================================================================ */

/* Main FAB button - Small square when closed */
.custom-fab[b-zctxigq5a1]  .rz-button {
    border-radius: 0.5rem !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
}

/* Main FAB button - Round when menu is open */
.custom-fab[b-zctxigq5a1]  .rz-button.rz-state-active {
    border-radius: 50% !important;
    background-color: var(--rz-secondary) !important;
}


/* Menu items - Small rounded squares (icon only) */
.custom-fab[b-zctxigq5a1]  .rz-fab-menu-item {
    border-radius: 0.5rem !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
}

/* Hide text in menu items - icon only */
.custom-fab[b-zctxigq5a1]  .rz-fab-menu-item .rz-button-text {
    display: none !important;
}

/* Center icon in round buttons — white, sharp (not filled/bold) */
.custom-fab[b-zctxigq5a1]  .rz-fab-menu-item i {
    margin: 0 !important;
    color: white !important;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20 !important;
}

/* ============================================================================
 * Position Classes
 * Desktop: 24px margin
 * Tablet (<1024px): 16px margin
 * Mobile (<600px): 12px margin + bottom sheet behavior
 * ============================================================================ */

/* Bottom Right (Default) */
.custom-fab-bottom-right[b-zctxigq5a1] {
    bottom: 24px;
    right: 24px;
}

/* Bottom Left */
.custom-fab-bottom-left[b-zctxigq5a1] {
    bottom: 24px;
    left: 24px;
}

/* Top Right */
.custom-fab-top-right[b-zctxigq5a1] {
    top: 24px;
    right: 24px;
}

/* Top Left */
.custom-fab-top-left[b-zctxigq5a1] {
    top: 24px;
    left: 24px;
}

/* Bottom Center */
.custom-fab-bottom-center[b-zctxigq5a1] {
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
}

/* Inline (flows with document layout) */
.custom-fab-inline[b-zctxigq5a1] {
    position: relative !important;
    bottom: auto;
    left: auto;
    right: -40px; /* was auto */
    top: 40px;    /* was auto */
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    margin-right: 1rem;
}

/* ============================================================================
 * Tablet Responsive (< 1024px)
 * Reduce margins to 16px
 * ============================================================================ */

@media (max-width: 1023px) {
    .custom-fab-bottom-right[b-zctxigq5a1] {
        bottom: 16px;
        right: 16px;
    }

    .custom-fab-bottom-left[b-zctxigq5a1] {
        bottom: 16px;
        left: 16px;
    }

    .custom-fab-top-right[b-zctxigq5a1] {
        top: 16px;
        right: 16px;
    }

    .custom-fab-top-left[b-zctxigq5a1] {
        top: 16px;
        left: 16px;
    }

    .custom-fab-bottom-center[b-zctxigq5a1] {
        bottom: 16px;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* ============================================================================
 * Mobile Responsive (< 600px)
 * Reduce margins to 12px
 * Bottom sheet pattern: Menu expands from bottom
 * ============================================================================ */

@media (max-width: 599px) {
    .custom-fab-bottom-right[b-zctxigq5a1] {
        bottom: 12px;
        right: 12px;
    }

    .custom-fab-bottom-left[b-zctxigq5a1] {
        bottom: 12px;
        left: 12px;
    }

    .custom-fab-top-right[b-zctxigq5a1] {
        top: 12px;
        right: 12px;
    }

    .custom-fab-top-left[b-zctxigq5a1] {
        top: 12px;
        left: 12px;
    }

    .custom-fab-bottom-center[b-zctxigq5a1] {
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
    }

    /* Bottom sheet pattern for mobile */
    .custom-fab[b-zctxigq5a1]  .rz-fab-menu {
        flex-direction: column-reverse;
    }

    .custom-fab[b-zctxigq5a1]  .rz-fab-menu-item {
        width: 100%;
        justify-content: flex-start;
        padding-left: 1rem;
    }
}

/* ============================================================================
 * Touch Target Size
 * Small but usable - 40px main, 36px items
 * ============================================================================ */

/* Sizes already set above - keeping small per design */

/* ============================================================================
 * Hover/Focus States (Accessibility)
 * ============================================================================ */

.custom-fab[b-zctxigq5a1]  .rz-button:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Disable hover effects on touch devices */
@media (hover: none) {
    .custom-fab[b-zctxigq5a1]  .rz-button:hover {
        transform: none;
        box-shadow: none;
    }
}

/* ============================================================================
 * Menu Item Badge Support
 * (Future enhancement - CSS framework for badges)
 * ============================================================================ */

.custom-fab[b-zctxigq5a1]  .rz-fab-menu-item .badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    background: var(--rz-danger, #f44336);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

/* ============================================================================
 * Disabled State
 * 50% opacity + no pointer events
 * ============================================================================ */

.custom-fab[b-zctxigq5a1]  .rz-fab-menu-item:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================================================
 * Dark Mode Support
 * Uses CSS variables from theme
 * ============================================================================ */

@media (prefers-color-scheme: dark) {
    .custom-fab[b-zctxigq5a1]  .rz-button {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    }

    .custom-fab[b-zctxigq5a1]  .rz-button:hover {
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
    }
}

/* ============================================================================
 * Animation: Icon Rotation on Menu Open
 * Main button icon rotates 45° when menu is open
 * ============================================================================ */

.custom-fab[b-zctxigq5a1]  .rz-fab-menu.rz-fab-menu-opened .rz-button i {
    transform: rotate(45deg);
    transition: transform 0.2s ease-in-out;
}

.custom-fab[b-zctxigq5a1]  .rz-fab-menu:not(.rz-fab-menu-opened) .rz-button i {
    transform: rotate(0deg);
    transition: transform 0.15s ease-in-out;
}

/* ============================================================================
 * High Contrast Mode Support
 * Ensures FAB is visible in Windows High Contrast mode
 * ============================================================================ */

@media (prefers-contrast: high) {
    .custom-fab[b-zctxigq5a1]  .rz-button {
        border: 2px solid currentColor;
    }

    .custom-fab[b-zctxigq5a1]  .rz-fab-menu-item {
        border: 2px solid currentColor;
    }
}
/* /Components/Custom/FilterBar/CustomFilterBar.razor.rz.scp.css */
/* CustomFilterBar - Reusable filter tab component */

.custom-filter-bar[b-qdkh07x2k5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.filter-tabs[b-qdkh07x2k5] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Base button style - light gray inactive state */
.tab-item[b-qdkh07x2k5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--em-radius-sm);
    background: var(--rz-base-background-color, #f8fafc);
    border: 1px solid var(--rz-border-color, #e2e8f0);
    color: var(--rz-text-secondary-color, #64748b);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.tab-item:hover[b-qdkh07x2k5] {
    background: var(--rz-base-200, #e2e8f0);
    border-color: var(--rz-base-400, #cbd5e1);
}

/* Active state - teal background (single item selected) */
.tab-item.active[b-qdkh07x2k5] {
    background: var(--rz-primary);
    color: white;
    border-color: var(--rz-primary);
}

.tab-item.active:hover[b-qdkh07x2k5] {
    background: var(--rz-primary-dark, #0f766e);
    border-color: var(--rz-primary-dark, #0f766e);
}

/* Included state - when "Alles" is active, all items show as included */
.tab-item.included[b-qdkh07x2k5] {
    background: var(--rz-primary);
    color: white;
    border-color: var(--rz-primary);
}

.tab-item.included:hover[b-qdkh07x2k5] {
    background: var(--rz-primary-dark, #0f766e);
    border-color: var(--rz-primary-dark, #0f766e);
}

.tab-item[b-qdkh07x2k5]  .rz-icon {
    font-size: 1rem;
}

/* Badge styling within tabs - square with rounded corners */
.tab-item[b-qdkh07x2k5]  .rz-badge {
    margin-left: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
}

/* When tab is active/included (white text), ensure badge has good contrast */
.tab-item.active[b-qdkh07x2k5]  .rz-badge,
.tab-item.included[b-qdkh07x2k5]  .rz-badge {
    /* Badge-kleuren komen uit BadgeStyle; geen schaduw (v2: schaduwen alleen op overlays) */
    box-shadow: none;
}

/* Ensure danger badge is always visible (red background) */
.tab-item[b-qdkh07x2k5]  .rz-badge.rz-badge-danger {
    background-color: var(--rz-danger) !important;
    color: white !important;
}

/* Ensure warning badge is always visible (yellow/orange background) */
.tab-item[b-qdkh07x2k5]  .rz-badge.rz-badge-warning {
    background-color: var(--rz-warning) !important;
    color: var(--rz-text-color) !important;
}

/* Ensure info badge is always visible (blue background) */
.tab-item[b-qdkh07x2k5]  .rz-badge.rz-badge-info {
    background-color: var(--rz-info) !important;
    color: white !important;
}

/* Primary badge - adjust for active tab contrast */
.tab-item.active[b-qdkh07x2k5]  .rz-badge.rz-badge-primary,
.tab-item.included[b-qdkh07x2k5]  .rz-badge.rz-badge-primary {
    background-color: var(--rz-base-background-color, white) !important;
    color: var(--rz-primary) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .custom-filter-bar[b-qdkh07x2k5] {
        gap: 0.5rem;
    }

    .filter-tabs[b-qdkh07x2k5] {
        gap: 0.375rem;
    }

    .tab-item[b-qdkh07x2k5] {
        padding: 0.375rem 0.75rem;
        font-size: 0.8125rem;
    }

    /* Hide text on small screens, show only icons */
    .tab-item span[b-qdkh07x2k5] {
        display: none;
    }

    .tab-item[b-qdkh07x2k5]  .rz-icon {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .tab-item[b-qdkh07x2k5] {
        padding: 0.5rem;
        border-radius: var(--em-radius-sm);
    }
}
/* /Components/Custom/FilterBar/FilterBar.razor.rz.scp.css */
/* V1A - Tab-Style Filters + Actions (matches old EyeManage) */

.filter-bar[b-hcw9tyugua] {
    /* No padding here - styling comes from parent .filter-actions-bar */
}

.filter-tabs[b-hcw9tyugua] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Base button style - light gray inactive state */
.tab-item[b-hcw9tyugua] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--em-radius-sm);
    background: var(--rz-base-background-color, #f8fafc);
    border: 1px solid var(--rz-border-color, #e2e8f0);
    color: var(--rz-text-secondary-color, #64748b);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.tab-item:hover[b-hcw9tyugua] {
    background: var(--rz-base-200, #e2e8f0);
    border-color: var(--rz-base-400, #cbd5e1);
}

/* Active state - teal background (both "Alles" and individual filters) */
.tab-item.active[b-hcw9tyugua],
.tab-item.active-all[b-hcw9tyugua] {
    background: var(--rz-primary);
    color: white;
    border-color: var(--rz-primary);
}

.tab-item.active:hover[b-hcw9tyugua],
.tab-item.active-all:hover[b-hcw9tyugua] {
    background: var(--rz-primary-dark, #0f766e);
    border-color: var(--rz-primary-dark, #0f766e);
}

/* Filter buttons when "Alles" is active - also show teal */
.tab-item.included[b-hcw9tyugua] {
    background: var(--rz-primary);
    color: white;
    border-color: var(--rz-primary);
}

.tab-item.included:hover[b-hcw9tyugua] {
    background: var(--rz-primary-dark, #0f766e);
    border-color: var(--rz-primary-dark, #0f766e);
}

.tab-item[b-hcw9tyugua]  .rz-icon {
    font-size: 1rem;
}

/* Bron-keuze (DT-40.54-5): visueel gescheiden van de snelacties rechts ervan.
   Staat hij als laatste (snelacties verborgen), dan vervalt de scheidingslijn. */
.source-toggle[b-hcw9tyugua] {
    padding-right: 0.75rem;
    border-right: 1px solid var(--rz-border-color, #e2e8f0);
}

.source-toggle:last-child[b-hcw9tyugua] {
    padding-right: 0;
    border-right: none;
}

.quick-actions[b-hcw9tyugua] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .filter-bar[b-hcw9tyugua] {
        padding: 0.75rem 1rem;
    }

    .filter-tabs[b-hcw9tyugua] {
        gap: 0.375rem;
    }

    .tab-item[b-hcw9tyugua] {
        padding: 0.375rem 0.75rem;
        font-size: 0.8125rem;
    }

    .tab-item span[b-hcw9tyugua] {
        display: none;
    }

    .tab-item[b-hcw9tyugua]  .custom-label__text {
        display: none;
    }

    .tab-item[b-hcw9tyugua]  .rz-icon {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .filter-bar[b-hcw9tyugua] {
        padding: 0.5rem;
    }

    .tab-item[b-hcw9tyugua] {
        padding: 0.5rem;
        border-radius: var(--em-radius-sm);
    }
}
/* /Components/Custom/HelpScope/HelpScope.razor.rz.scp.css */
/* De wrapper mag de lay-out van de pagina niet veranderen: display:contents laat de kinderen
   op hun oorspronkelijke plek in de grid/flex-structuur staan. Dat geldt óók tijdens een
   gids-stap — vandaar dat de ring niet op de wrapper zelf staat (die heeft geen box), maar op
   zijn kinderen. Zo verspringt er niets: een outline neemt geen ruimte in. */
.help-scope[b-kyvw6axav2] {
    display: contents;
}

/* Alleen tijdens een gids-stap krijgt het geannoteerde onderdeel een subtiele ring. Geen
   focus-diefstal en geen backdrop — de gebruiker blijft gewoon doorwerken.

   ::deep is hier noodzakelijk. De kinderen komen uit ChildContent van de aanroepende pagina en
   dragen het scope-attribuut van dit component niet. Zonder ::deep zet Blazor de scope-id op
   het laatste selector-deel (> *[b-...]) en matcht de regel dus nooit; met ::deep belandt de
   scope-id op de wrapper (.help-scope.help-guide-highlight[b-...] > *), precies waar hij hoort.

   Bewust geen border-radius: outline volgt de eigen ronding van het element, en een vaste radius
   zou een kaart of knop tijdens de stap zichtbaar van vorm laten veranderen. */
.help-scope.help-guide-highlight[b-kyvw6axav2]  > * {
    outline: 2px solid var(--rz-primary, #1976d2);
    outline-offset: 2px;
    animation: help-guide-pulse-b-kyvw6axav2 1.6s ease-in-out infinite;
}

/* De pulse zit op de outline-kleur, niet op transform of afmetingen: het element mag tijdens
   de stap niet van vorm of plek veranderen (zelfde reden als de outline hierboven), en een
   transform zou bovendien een containing block maken voor fixed-position kinderen. */
@keyframes help-guide-pulse-b-kyvw6axav2 {
    0%,
    100% {
        outline-color: var(--rz-primary, #1976d2);
    }

    50% {
        outline-color: color-mix(in srgb, var(--rz-primary, #1976d2) 30%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .help-scope.help-guide-highlight[b-kyvw6axav2]  > * {
        animation: none;
    }
}
/* /Components/Custom/Label/CustomLabel.razor.rz.scp.css */
.custom-label-link[b-ech58ggavy] {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.custom-label-link:hover .custom-label__text[b-ech58ggavy] {
    text-decoration: underline;
}

.custom-label__icon[b-ech58ggavy] {
    /* No underline on hover */
}

.custom-label__text[b-ech58ggavy] {
    /* Inherit text styles from parent */
}
/* /Components/Custom/Medical/AnterieurSegmentBlock.razor.rz.scp.css */
/* Slit-lamp severity table: structure label + OD / OS columns. */
.em-segtable[b-yn54zt3tob] {
    display: grid;
    grid-template-columns: minmax(8rem, auto) minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.375rem 0.75rem;
    align-items: center;
}

.em-segtable__corner[b-yn54zt3tob] {
    grid-column: 1;
}

.em-segtable__label[b-yn54zt3tob] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color, #6b7280);
}
/* /Components/Custom/Medical/BlockPassIndicator.razor.rz.scp.css */
/* Pass/fail indicator: tone-coloured glyph + label. */
.em-pass[b-gdifyu2fi2] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
}

.em-pass__icon[b-gdifyu2fi2] {
    font-weight: 700;
}

.em-pass--pass[b-gdifyu2fi2] {
    color: #2e7d32;
}

.em-pass--fail[b-gdifyu2fi2] {
    color: #c62828;
}

.em-pass--unknown[b-gdifyu2fi2] {
    color: var(--rz-text-secondary-color, #6b7280);
}
/* /Components/Custom/Medical/BlockShell.razor.rz.scp.css */
/* Test-block shell — tiles 1/1 · 1/2 · 1/3 within the 1056px drawer content column. */

.em-block[b-gu388v5o2c] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    box-sizing: border-box;
    min-width: 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--rz-base-300, #e2e5e9);
    border-radius: 8px;
    background: var(--rz-base-background-color, #fff);
}

/* Width-system — flex-basis within a flex/wrap row. */
.em-block--full[b-gu388v5o2c] {
    flex: 1 1 100%;
}

.em-block--half[b-gu388v5o2c] {
    flex: 1 1 calc(50% - 0.5rem);
}

.em-block--third[b-gu388v5o2c] {
    flex: 1 1 calc(33.333% - 0.5rem);
}

.em-block__header[b-gu388v5o2c] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.em-block__title[b-gu388v5o2c] {
    font-weight: 600;
    font-size: 0.9375rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Maturity status dot — Complete = green, Concept = amber (design colors). */
.em-block__status[b-gu388v5o2c] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.em-block__status--complete[b-gu388v5o2c] {
    background: #3dd37c;
}

.em-block__status--concept[b-gu388v5o2c] {
    background: #f0b53f;
}

/* Width badge (1/1 · 1/2 · 1/3). */
.em-block__width-badge[b-gu388v5o2c] {
    flex: 0 0 auto;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    color: var(--rz-text-secondary-color, #6b7280);
    background: var(--rz-base-200, #f1f3f5);
}

/* Role tag. */
.em-block__role[b-gu388v5o2c] {
    flex: 0 0 auto;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    color: var(--rz-primary, #2f6f8f);
    background: var(--rz-primary-lighter, #e7f1f5);
}

.em-block__body[b-gu388v5o2c] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.em-block__callout[b-gu388v5o2c] {
    margin-top: 0.25rem;
}
/* /Components/Custom/Medical/BlockSideGrid.razor.rz.scp.css */
/* Column-aligned eye grid: [eye badge | col1 | col2 | ...] per OD/OS/OU row. */

.em-sidegrid[b-4lclaaabfx] {
    display: grid;
    grid-template-columns: auto repeat(var(--em-sidegrid-cols, 1), minmax(0, 1fr));
    gap: 0.375rem 0.5rem;
    align-items: center;
}

/* Empty top-left corner above the eye-badge column. */
.em-sidegrid__corner[b-4lclaaabfx] {
    grid-column: 1;
}

.em-sidegrid__colhead[b-4lclaaabfx] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-align: center;
    color: var(--rz-text-secondary-color, #6b7280);
}

/* Eye badge sits in the first column of each data row. */
.em-sidegrid__eye[b-4lclaaabfx] {
    justify-self: start;
}

/* Veld-componenten binnen de grid: geen extra top-marge (mt-1), anders hangt
   het veld onder het verticale midden van de side-badge. */
.em-sidegrid[b-4lclaaabfx]  .mt-1 {
    margin-top: 0 !important;
}

/* DT-10-13: kolom zonder badges (kolomsgewijze visus-rij). */
.em-sidegrid--nobadge[b-4lclaaabfx] {
    grid-template-columns: repeat(var(--em-sidegrid-cols, 1), minmax(0, 1fr));
}
/* /Components/Custom/Medical/CustomMedicalGridCell.razor.rz.scp.css */
/* DT-10-13: verplichte, nog lege visus-cel — zichtbaar zonder de rij te verstoren. */
[b-jj8ika8elj] .em-gridcell--required {
    border-color: var(--rz-warning);
    box-shadow: inset 0 0 0 1px var(--rz-warning);
}
/* /Components/Custom/Medical/CustomVisusField.razor.rz.scp.css */
/* DT-10-13: visus-cel met notatie-bewuste toetsing. */
.em-visusfield.is-invalid[b-cee3wp1tgy]  .rz-textbox {
    border-color: red !important;
    background-color: rgba(255, 0, 0, 0.05);
}

.em-visusfield.is-warning[b-cee3wp1tgy]  .rz-textbox {
    border-color: var(--rz-warning) !important;
    background-color: var(--rz-warning-lighter);
}

/* Verplichte, nog lege cel. */
.em-visusfield[b-cee3wp1tgy]  .em-gridcell--required {
    border-color: var(--rz-warning);
    box-shadow: inset 0 0 0 1px var(--rz-warning);
}
/* /Components/Custom/Medical/IopBlock.razor.rz.scp.css */
/* Per-eye IOP tone callout: side label + range indicator on one line. */
.em-iop__band[b-npfq2n2939] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* /Components/Custom/Medical/Session/MedicalExamDrawer.razor.rz.scp.css */
/* Exam composer: ordered test list + add row. */
.em-exam-composer[b-jltoql1r5a] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.5rem;
}

.em-exam-composer__tests[b-jltoql1r5a] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.em-exam-composer__test[b-jltoql1r5a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--rz-base-300, #e2e5e9);
    border-radius: 6px;
}

.em-exam-composer__test-name[b-jltoql1r5a] {
    flex: 1 1 auto;
}

.em-exam-composer__order[b-jltoql1r5a] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 0 0 auto;
}

.em-exam-composer__order-btn[b-jltoql1r5a] {
    border: none;
    background: transparent;
    color: var(--rz-text-secondary-color, #6b7280);
    font-size: 0.625rem;
    line-height: 1;
    padding: 0.125rem 0.25rem;
    cursor: pointer;
}

.em-exam-composer__order-btn:disabled[b-jltoql1r5a] {
    color: var(--rz-base-300, #cbd5e1);
    cursor: not-allowed;
}

.em-exam-composer__remove[b-jltoql1r5a] {
    border: none;
    background: transparent;
    color: var(--rz-danger, #c62828);
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
}

.em-exam-composer__empty[b-jltoql1r5a] {
    color: var(--rz-text-secondary-color, #6b7280);
    font-size: 0.875rem;
}

.em-exam-composer__add[b-jltoql1r5a] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

.em-exam-composer__add-btn[b-jltoql1r5a] {
    flex: 0 0 auto;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    background: var(--rz-primary, #2f6f8f);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.em-exam-composer__add-btn:disabled[b-jltoql1r5a] {
    background: var(--rz-base-300, #cbd5e1);
    cursor: not-allowed;
}

/* Add-step row at the top. */
.em-exam-composer__add-step[b-jltoql1r5a] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--rz-base-300, #e2e5e9);
}

/* A step card grouping its tests. */
.em-exam-composer__step[b-jltoql1r5a] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--rz-base-300, #e2e5e9);
    border-radius: 10px;
    background: var(--rz-base-100, #fafbfc);
}

.em-exam-composer__step-head[b-jltoql1r5a] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

.em-exam-composer__step-save[b-jltoql1r5a] {
    flex: 0 0 auto;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--rz-primary, #2f6f8f);
    border-radius: 6px;
    background: transparent;
    color: var(--rz-primary, #2f6f8f);
    font-weight: 700;
    cursor: pointer;
}

.em-exam-composer__ungrouped[b-jltoql1r5a] {
    padding-top: 0.5rem;
    border-top: 1px dashed var(--rz-base-300, #e2e5e9);
}

.em-exam-composer__ungrouped-title[b-jltoql1r5a] {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color, #6b7280);
}
/* /Components/Custom/Medical/Session/MedicalSessionDrawer.razor.rz.scp.css */
/* Onderzoek Sessie-drawer styles (rendered inside DrawerWithAnchors panels + left summary column). */

/* ── Active step screen (inside an anchor slide-panel) ── */
.em-session-step[b-l24droz2iu] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    height: 100%;
}

.em-session-step__head[b-l24droz2iu] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.em-session__role-badge[b-l24droz2iu] {
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--rz-primary-lighter, #e7f1f5);
    color: var(--rz-primary, #2f6f8f);
    font-size: 0.6875rem;
    font-weight: 600;
}

.em-session__locked[b-l24droz2iu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 3rem 1rem;
    color: var(--rz-text-secondary-color, #6b7280);
}

/* Stacked test sub-cards on the active step's screen. */
.em-session__cards[b-l24droz2iu] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.em-session__card[b-l24droz2iu] {
    border: 1px solid var(--rz-base-300, #e2e5e9);
    border-radius: 10px;
    padding: 0.875rem 1rem;
}

.em-session__card-title[b-l24droz2iu] {
    margin: 0 0 0.625rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--rz-text-color, #1e293b);
}

.em-session-footer[b-l24droz2iu] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.em-session__cancel[b-l24droz2iu] {
    padding: 0.5rem 1rem;
    border: 1px solid var(--rz-base-300, #e2e5e9);
    border-radius: 6px;
    font: inherit;
    font-weight: 600;
    color: var(--rz-text-secondary-color, #6b7280);
    background: transparent;
    cursor: pointer;
}

.em-session__save[b-l24droz2iu] {
    padding: 0.5rem 1rem;
    border: 1px solid var(--rz-primary, #2f6f8f);
    border-radius: 6px;
    font: inherit;
    font-weight: 600;
    color: var(--rz-primary, #2f6f8f);
    background: transparent;
    cursor: pointer;
}

/* ── Left summary column ── */
.em-session-summary[b-l24droz2iu] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.em-session-summary__patient[b-l24droz2iu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--rz-base-300, #e2e5e9);
}

.em-session-summary__name[b-l24droz2iu] {
    font-weight: 700;
    font-size: 0.9375rem;
}

.em-session-summary__num[b-l24droz2iu] {
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color, #94a3b8);
}

.em-session-summary__exam[b-l24droz2iu] {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--rz-base-200, #f1f3f5);
    color: var(--rz-text-secondary-color, #6b7280);
}

.em-session-summary__steps[b-l24droz2iu] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.5rem 0.75rem;
}

.em-session-summary__step[b-l24droz2iu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--rz-text-color, #1e293b);
}

.em-session__dot[b-l24droz2iu] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--rz-text-tertiary-color, #94a3b8);
}

.em-session__dot--done[b-l24droz2iu] {
    background: #3dd37c;
}

.em-session-summary__test[b-l24droz2iu] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.25rem 0 0.25rem 1rem;
    border-left: 2px solid var(--rz-base-200, #f1f3f5);
    margin-left: 3px;
}

.em-session-summary__test-name[b-l24droz2iu] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color, #6b7280);
}

.em-session-summary__value[b-l24droz2iu] {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.6875rem;
    color: var(--rz-text-color, #1e293b);
}

.em-session-summary__status[b-l24droz2iu] {
    font-size: 0.6875rem;
    color: var(--rz-text-tertiary-color, #94a3b8);
}

.em-session-summary__footer[b-l24droz2iu] {
    flex: 0 0 auto;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--rz-base-300, #e2e5e9);
}

.em-session__complete[b-l24droz2iu] {
    width: 100%;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--rz-primary, #2f6f8f);
    cursor: pointer;
}

.em-session__complete:disabled[b-l24droz2iu] {
    background: var(--rz-base-300, #cbd5e1);
    color: var(--rz-text-tertiary-color, #94a3b8);
    cursor: not-allowed;
}
/* /Components/Custom/Medical/Session/MedicalSessionStarter.razor.rz.scp.css */
/* Start-onderzoek-entree: exam-keuze + start-knop. */
.em-session-starter[b-dbnzwj9ul7] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

.em-session-starter__btn[b-dbnzwj9ul7] {
    flex: 0 0 auto;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    background: var(--rz-primary, #2f6f8f);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.em-session-starter__btn:disabled[b-dbnzwj9ul7] {
    background: var(--rz-base-300, #cbd5e1);
    cursor: not-allowed;
}
/* /Components/Custom/Medical/VisusBlock.razor.rz.scp.css */

/* DT-10-13: compacte kolomrij — één kolom per sleuf, OD/OS/ODS onder elkaar. */
.em-visus__row[b-7ndyxt56uf] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.25rem 0.75rem;
}
/* /Components/Custom/Numeric/CustomCurrencyField.razor.rz.scp.css */
[b-8wneaenjcr] .customlabel {
    color: var(--rz-info) !important;
    font-size: 0.65rem;
    margin-top: -15px;
    margin-left: 5px;
    z-index: 0;
}
/* /Components/Custom/Panel/CustomColumnPanel.razor.rz.scp.css */
.em-column-panel[b-9ld46t8u4z] {
    background: var(--rz-surface-background);
    border: 1px solid var(--rz-border-color);
    border-top: 3px solid var(--em-border-primary); /* kleur overschreven via inline style (Accent) */
    border-radius: var(--em-radius-sm);
    padding: 13px;
    position: relative;
}

.em-column-panel__header[b-9ld46t8u4z] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.em-column-panel__actions[b-9ld46t8u4z] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.em-column-panel__body[b-9ld46t8u4z] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    scrollbar-width: thin;
}

/* Vaste paneelhoogte (Height-parameter): kop blijft staan, body vult de rest en scrollt */
.em-column-panel--fixed[b-9ld46t8u4z] {
    display: flex;
    flex-direction: column;
}

.em-column-panel--fixed .em-column-panel__header[b-9ld46t8u4z] {
    flex: none;
}

.em-column-panel--fixed .em-column-panel__body[b-9ld46t8u4z] {
    flex: 1;
    min-height: 0;
}

.em-column-panel__body[b-9ld46t8u4z]::-webkit-scrollbar {
    width: 6px;
}

.em-column-panel__body[b-9ld46t8u4z]::-webkit-scrollbar-thumb {
    background: var(--em-border-secondary);
    border-radius: var(--em-radius-xs);
}
/* /Components/Custom/Pill/CustomPill.razor.rz.scp.css */
/* Custom Pill — rechthoekige statuspill (Klantendashboard v2)
   Radius 2px, 10px/700, semantisch tekst+vlak-paar zonder rand.
   Gedeelde taal met de pill in CustomEMCard — wijzig ze samen. */
.custom-pill[b-xawkn7c1hr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 7px;
    border-radius: var(--em-radius-xs);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    text-align: center;
    line-height: 1;
    height: auto;
    min-height: 0;
}

/* Pill Variants — semantische paren uit design-system.css */
.pill-default[b-xawkn7c1hr] {
    background-color: var(--em-sem-neutral-bg);
    color: var(--em-sem-neutral-text);
}

.pill-primary[b-xawkn7c1hr] {
    background-color: var(--em-primary-tint);
    color: var(--em-primary);
}

.pill-secondary[b-xawkn7c1hr] {
    background-color: var(--em-sem-subscription-bg);
    color: var(--em-sem-subscription-text);
}

.pill-success[b-xawkn7c1hr] {
    background-color: var(--em-sem-success-bg);
    color: var(--em-sem-success-text);
}

.pill-info[b-xawkn7c1hr] {
    background-color: var(--em-primary-tint);
    color: var(--em-primary);
}

.pill-warning[b-xawkn7c1hr] {
    background-color: var(--em-sem-wait-bg);
    color: var(--em-sem-wait-text);
}

.pill-danger[b-xawkn7c1hr] {
    background-color: var(--em-sem-error-bg);
    color: var(--em-sem-error-text);
}
/* /Components/Custom/Pin/PinInput.razor.rz.scp.css */
.pin-input-container[b-tabhel4cew] {
    display: flex;
    gap: 12px;
    justify-content: flex-start;
}

.pin-digit-input[b-tabhel4cew] {
    width: 50px;
    height: 50px;
    text-align: center;
    border: 2px solid var(--rz-border-color, #e0e0e0);
    border-radius: var(--rz-border-radius, 4px);
    font-family: inherit;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 2px;
    transition: all 0.2s ease;
    background: var(--rz-base-background-color, white);
    outline: none;
}

.pin-digit-input:focus[b-tabhel4cew] {
    border-color: var(--rz-primary, #7e22ce);
    box-shadow: 0 0 0 3px rgba(126, 34, 206, 0.1);
}

.pin-digit-input:not(:placeholder-shown)[b-tabhel4cew] {
    border-color: var(--rz-primary, #7e22ce);
}

.pin-digit-input:disabled[b-tabhel4cew] {
    background: var(--rz-base-200, #f5f5f5);
    cursor: not-allowed;
}

.pin-digit-input.pin-digit-error[b-tabhel4cew] {
    border-color: var(--rz-danger, #dc3545);
}

.pin-digit-input.pin-digit-error:focus[b-tabhel4cew] {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}
/* /Components/Custom/Prescription/CustomPrescription.razor.rz.scp.css */
/* CustomPrescription — scoped styles voor de verte-context en addities-tabel.
   Dark-mode aware via Radzen CSS-vars die meebewegen met theme-switch.
*/

[b-amvyj36rpn] .prescription-verte-card {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
    margin-bottom: 1rem;
    padding: 0.5rem 0.75rem;
    background: var(--rz-card-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 4px;
}

[b-amvyj36rpn] .prescription-verte-card__reading {
    display: flex;
    flex-direction: column;
}

[b-amvyj36rpn] .prescription-verte-card__divider {
    width: 1px;
    align-self: stretch;
    border-left: 1px solid var(--rz-border-color);
    margin: 0 0.25rem;
}

[b-amvyj36rpn] .prescription-reading-distance {
    margin-bottom: 0.75rem;
}

[b-amvyj36rpn] .prescription-additions-card {
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 0.5rem 0.75rem;
    background: var(--rz-card-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 4px;
}

[b-amvyj36rpn] .prescription-pd-set {
    margin-top: 1rem;
    padding: 0.75rem;
    background: var(--rz-card-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 4px;
}

[b-amvyj36rpn] .prescription-pd-set__row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 175px;
}

[b-amvyj36rpn] .prescription-pd-set__row-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--rz-text-color);
}

/* DT-10-13: compacte visus-rij — één kolom per meting, OD/OS/ODS onder elkaar. */
.prescription-visus__row[b-amvyj36rpn] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.25rem 0.75rem;
}

/* De eigen kolom van dit refractie-block (de correctie die hier gemeten wordt). */
.prescription-visus__col--own[b-amvyj36rpn]  .em-sidegrid__colhead {
    color: var(--rz-primary);
}

.prescription-visus__col--own[b-amvyj36rpn]  .em-gridcell {
    border-color: var(--rz-primary);
}
/* /Components/Custom/Prescription/CustomPrescriptionTextField.razor.rz.scp.css */
/* Validation: red border on outlined form field */

.is-invalid[b-rmfhq0mitu]  .rz-form-field-content {
    border-color: red !important;
    background-color: rgba(255, 0, 0, 0.05);
}

/* Warning: yellow border on outlined form field */
.is-warning[b-rmfhq0mitu]  .rz-form-field-content {
    border-color: var(--rz-warning) !important;
    background-color: var(--rz-warning-lighter);
}
/* /Components/Custom/Prescription/CustomPupilDistance.razor.rz.scp.css */
/* CustomPupilDistance — dark-mode aware via Radzen CSS-vars.
   var(--rz-card-background-color) volgt het actieve theme (light/dark);
   var(--rz-border-color) idem voor de rand.
*/

.pd-card[b-ysqgoysuii] {
    background: var(--rz-card-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    display: inline-block;
}

.pd-card__header[b-ysqgoysuii] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.pd-card__title[b-ysqgoysuii] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--rz-text-color);
}

.pd-card__sublabel[b-ysqgoysuii] {
    font-size: 0.72rem;
    color: var(--rz-text-secondary-color);
}

.pd-card__inputs[b-ysqgoysuii] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

.pd-card__field[b-ysqgoysuii] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pd-card__field-label[b-ysqgoysuii] {
    font-size: 0.7rem;
    color: var(--rz-text-secondary-color);
}

.pd-inline[b-ysqgoysuii] {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
}
/* /Components/Custom/Prescription/CustomPupilDistanceSet.razor.rz.scp.css */
/* CustomPupilDistanceSet — dark-mode aware ordering wrapper. */

.pd-set[b-8nziiis4ke] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--rz-card-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 4px;
}

.pd-set__row[b-8nziiis4ke] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.pd-set__row-header[b-8nziiis4ke] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.pd-set__row-label[b-8nziiis4ke] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--rz-text-color);
    min-width: 80px;
}

.pd-set__row-distance[b-8nziiis4ke] {
    font-size: 0.72rem;
    color: var(--rz-text-secondary-color);
}
/* /Components/Custom/Search/CustomSpotlightSearch.razor.rz.scp.css */
.spotlight-root[b-3gsus3awqt] {
    position: relative;
    width: 100%;
}

.spotlight-scrim[b-3gsus3awqt] {
    position: fixed;
    inset: 58px 0 0 0;
    background: rgba(33, 31, 42, 0.18);
    z-index: 1090;
}

.spotlight-overlay[b-3gsus3awqt] {
    position: fixed;
    top: 68px;
    left: 50%;
    transform: translateX(-50%);
    width: min(1100px, calc(100vw - 32px));
    background: var(--rz-base-background-color, #fff);
    border: 1px solid var(--rz-base-300, #e7e5df);
    border-radius: 16px;
    box-shadow: 0 24px 64px -16px rgba(33, 31, 42, 0.28), 0 4px 16px -4px rgba(33, 31, 42, 0.12);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.spotlight-intent-row[b-3gsus3awqt] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px 0 16px;
}

.spotlight-add-customer[b-3gsus3awqt] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--em-border-primary, var(--rz-border-color));
    border-radius: var(--em-radius-md, 6px);
    background: var(--em-bg-surface-raised, var(--rz-base-background-color));
    color: var(--em-primary, var(--rz-primary));
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 150ms ease;
}

.spotlight-add-customer:hover[b-3gsus3awqt] {
    background: var(--em-primary-lighter, rgba(53, 186, 217, 0.08));
}

.spotlight-add-customer .rzi[b-3gsus3awqt] {
    font-size: 16px;
}

.spotlight-intent-badge[b-3gsus3awqt] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--rz-primary-lighter, #eeeaff);
    color: var(--rz-primary-dark, #3c2f96);
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 99px;
    padding: 4px 12px;
}

.spotlight-intent-badge .dot[b-3gsus3awqt] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rz-primary, #5340c2);
}

.spotlight-tabstrip[b-3gsus3awqt] {
    display: flex;
    gap: 2px;
    padding: 10px 12px 0 12px;
    border-bottom: 1px solid var(--rz-base-300, #e7e5df);
    overflow-x: auto;
}

.spotlight-tab[b-3gsus3awqt] {
    border: none;
    background: transparent;
    cursor: pointer;
    font: inherit;
    padding: 8px 13px 10px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--rz-text-secondary-color, #5d5a6b);
    border-bottom: 2.5px solid transparent;
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.spotlight-tab:hover[b-3gsus3awqt] {
    background: var(--rz-base-100, #f6f5f2);
}

.spotlight-tab.active[b-3gsus3awqt] {
    color: var(--rz-primary-dark, #3c2f96);
    border-bottom-color: var(--rz-primary, #5340c2);
    font-weight: 600;
}

.spotlight-tab.empty[b-3gsus3awqt] {
    opacity: 0.5;
}

.spotlight-tab .count[b-3gsus3awqt] {
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--rz-base-100, #f6f5f2);
    border-radius: 99px;
    padding: 1px 7px;
    min-width: 22px;
    text-align: center;
}

.spotlight-tab.active .count[b-3gsus3awqt] {
    background: var(--rz-primary, #5340c2);
    color: #fff;
}

.spotlight-results[b-3gsus3awqt] {
    overflow-y: auto;
    max-height: min(62vh, 620px);
    padding: 6px 10px 10px;
}

.spotlight-group-head[b-3gsus3awqt] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 8px 6px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--rz-text-disabled-color, #9a97a8);
}

.spotlight-show-all[b-3gsus3awqt] {
    margin-left: auto;
    border: none;
    background: none;
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--rz-primary, #5340c2);
    letter-spacing: 0;
    text-transform: none;
    padding: 2px 6px;
    border-radius: 6px;
}

.spotlight-show-all:hover[b-3gsus3awqt] {
    background: var(--rz-primary-lighter, #eeeaff);
}

.spotlight-grid[b-3gsus3awqt] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 4px 8px;
}

.spotlight-empty[b-3gsus3awqt] {
    padding: 36px 20px;
    text-align: center;
    color: var(--rz-text-disabled-color, #9a97a8);
    font-size: 0.9rem;
}

.spotlight-footer[b-3gsus3awqt] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 9px 16px;
    border-top: 1px solid var(--rz-base-300, #e7e5df);
    background: var(--rz-base-50, #fbfaf8);
    font-size: 0.74rem;
    color: var(--rz-text-disabled-color, #9a97a8);
}

.spotlight-footer .grow[b-3gsus3awqt] {
    flex: 1;
}

/* ───── Resultaatkaarten (gedeeld met SpotlightResultCard via ::deep) ───── */

[b-3gsus3awqt] .spotlight-card {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 2px 10px;
    align-items: start;
    padding: 8px 10px;
    border-radius: 11px;
    cursor: pointer;
    border: 1px solid transparent;
    min-width: 0;
}

[b-3gsus3awqt] .spotlight-card:hover,
[b-3gsus3awqt] .spotlight-card.selected {
    background: var(--rz-base-100, #f6f5f2);
}

[b-3gsus3awqt] .spotlight-card.selected {
    border-color: var(--rz-base-300, #e7e5df);
    box-shadow: inset 2.5px 0 0 var(--rz-primary, #5340c2);
}

[b-3gsus3awqt] .spotlight-tile {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    grid-row: 1 / span 3;
    display: grid;
    place-items: center;
    color: #fff;
}

[b-3gsus3awqt] .tile-customers { background: #5340c2; }
[b-3gsus3awqt] .tile-salesorders { background: #0f766e; }
[b-3gsus3awqt] .tile-purchaseorders { background: #b45309; }
[b-3gsus3awqt] .tile-products { background: #1d4ed8; }
[b-3gsus3awqt] .tile-appointments { background: #be185d; }

[b-3gsus3awqt] .spotlight-card-body {
    grid-column: 2;
    min-width: 0;
}

[b-3gsus3awqt] .spotlight-card-title {
    font-weight: 600;
    font-size: 0.86rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-3gsus3awqt] .spotlight-mono {
    font-family: var(--rz-font-monospace, monospace);
    font-size: 0.82em;
    color: var(--rz-text-disabled-color, #9a97a8);
    margin-right: 6px;
}

[b-3gsus3awqt] .spotlight-card-sub {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color, #5d5a6b);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-3gsus3awqt] .spotlight-card-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px 8px;
    flex-wrap: wrap;
    margin-top: 3px;
}

[b-3gsus3awqt] .spotlight-chip {
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 99px;
    padding: 2px 9px;
    white-space: nowrap;
}

[b-3gsus3awqt] .chip-success { background: #d1fae5; color: #065f46; }
[b-3gsus3awqt] .chip-danger { background: #fee2e2; color: #991b1b; }
[b-3gsus3awqt] .chip-info { background: #dbeafe; color: #1e40af; }
[b-3gsus3awqt] .chip-neutral { background: #f3f4f6; color: #374151; }
[b-3gsus3awqt] .chip-central { background: #eef2ff; color: #3730a3; }
[b-3gsus3awqt] .chip-reason { background: var(--rz-primary-lighter, #eeeaff); color: var(--rz-primary-dark, #3c2f96); }

[b-3gsus3awqt] .spotlight-recency {
    font-size: 0.7rem;
    color: var(--rz-text-disabled-color, #9a97a8);
    white-space: nowrap;
}

/* ───── Laad-indicatoren (per tab + leeg-staat) ───── */

.spotlight-spinner[b-3gsus3awqt] {
    width: 12px;
    height: 12px;
    border: 2px solid var(--rz-base-300, #e7e5df);
    border-top-color: var(--rz-primary, #5340c2);
    border-radius: 50%;
    display: inline-block;
    animation: spotlight-spin-b-3gsus3awqt 0.7s linear infinite;
}

.spotlight-spinner.large[b-3gsus3awqt] {
    width: 22px;
    height: 22px;
    border-width: 3px;
    display: block;
    margin: 0 auto 10px;
}

@keyframes spotlight-spin-b-3gsus3awqt {
    to { transform: rotate(360deg); }
}
/* /Components/Custom/Sms/SmsBundleTable.razor.rz.scp.css */
/* DT-66672.1-1: gedeeld bundeloverzicht (beheerpagina + aankoopflow). */

.sms-bundle-table__saldi[b-625mvc00jh] {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 1rem;
}

.sms-bundle-table__saldo[b-625mvc00jh] {
    display: flex;
    flex-direction: column;
    min-width: 110px;
}

.sms-bundle-table__saldo-value[b-625mvc00jh] {
    font-size: 1.6rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.sms-bundle-table__saldo-label[b-625mvc00jh] {
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: var(--rz-text-secondary-color);
}

.sms-bundle-table__name[b-625mvc00jh] {
    margin-right: 0.5rem;
}

.sms-bundle-table__badge[b-625mvc00jh] {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 1px 7px;
    border-radius: 10px;
    white-space: nowrap;
}

/* Algemeen = huisteal, marketing = oranje: het type is op een rij herkenbaar. */
.sms-bundle-table__badge--all[b-625mvc00jh] {
    background: var(--em-primary-tint);
    color: var(--em-primary-darker);
}

.sms-bundle-table__badge--marketing[b-625mvc00jh] {
    background: var(--rz-warning-lighter);
    color: var(--rz-warning-darker);
}

/* ISS-66672.4.1-1: geldigheidsgebied van de bundel — vestiging of "alle vestigingen". */
.sms-bundle-table__badge--scope[b-625mvc00jh] {
    margin-left: 0.35rem;
    background: var(--rz-base-200);
    color: var(--rz-text-secondary-color);
    font-weight: 500;
    letter-spacing: normal;
}

.sms-bundle-table__badge--expired[b-625mvc00jh] {
    background: var(--rz-base-300);
    color: var(--rz-text-secondary-color);
}

/* Bedragen, aantallen en data uitlijnen op cijferbreedte. */
.sms-bundle-table__numeric[b-625mvc00jh] {
    font-variant-numeric: tabular-nums;
}

.sms-bundle-table__numeric--warning[b-625mvc00jh] {
    color: var(--rz-warning-darker);
    font-weight: 600;
}

[b-625mvc00jh] tr.sms-bundle-table__row--expiring > td {
    background: var(--rz-warning-lighter);
}

[b-625mvc00jh] tr.sms-bundle-table__row--expired > td {
    color: var(--rz-text-secondary-color);
    opacity: 0.75;
}
/* /Components/Custom/TextField/CustomTextField.razor.rz.scp.css */
/* Typeahead-safe input (Immediate-modus, DT-2.39-7): plain input met rz-textbox-styling
   + eigen wis-knop (RadzenTextBox' ShowClearButton bestaat niet in deze tak). */
.ctf-immediate[b-xio6l12jap] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.ctf-immediate__input[b-xio6l12jap] {
    width: 100%;
}

.ctf-immediate__clear[b-xio6l12jap] {
    position: absolute;
    right: 4px;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: var(--em-radius-sm, 4px);
    background: transparent;
    color: var(--rz-text-tertiary-color);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.ctf-immediate__clear:hover[b-xio6l12jap] {
    background: var(--rz-surface-hover);
    color: var(--rz-text-color);
}

.ctf-immediate__clear .rzi[b-xio6l12jap] {
    font-size: 14px;
}
/* /Components/Custom/TextField/CustomTextFieldSearch.razor.rz.scp.css */
[b-63md8hq5mv] .customsearch-container {
    position: relative;
    display: inline-block;
}

[b-63md8hq5mv] .customsearch-textbox .rz-textbox.rz-state-empty:focus {
    width: 207px;
    outline: none;
}
@media only screen and (max-width: 600px) {
    [b-63md8hq5mv] .customsearch-textbox .rz-textbox.rz-state-empty {
        width: 39px;
    }
}

[b-63md8hq5mv] .rz-form-field-content {
    margin-block: 0px;
}
/* /Components/Custom/ValueDisplay/CustomValueDisplay.razor.rz.scp.css */
.custom-value-display[b-76g51u44dr] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.custom-value-display--link[b-76g51u44dr] {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.custom-value-display--link:hover .custom-value-display__text[b-76g51u44dr] {
    text-decoration: underline;
}

.custom-value-display__icon[b-76g51u44dr] {
    font-size: 1.1em;
    flex-shrink: 0;
}

.custom-value-display__text[b-76g51u44dr] {
    /* Inherit text styles from parent */
}
/* /Components/Layout/AutoLockMonitor.razor.rz.scp.css */
/* Auto-lock UI (DT-30.1-14) */

/* Waarschuwingsbalk bovenin — full width, boven alles, aftellend. */
.em-autolock-warnbar[b-1df056rcd8] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.55rem 1rem;
    background: var(--rz-warning, #f59f00);
    color: #1a1a1a;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    animation: em-autolock-slidedown-b-1df056rcd8 0.2s ease-out;
}

.em-autolock-warnbar-count[b-1df056rcd8] {
    min-width: 2.5rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-size: 1.1rem;
    padding: 0.1rem 0.5rem;
    border-radius: 0.4rem;
    background: rgba(0, 0, 0, 0.15);
}

@keyframes em-autolock-slidedown-b-1df056rcd8 {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

/* Lock-overlay — full-screen, boven alles. */
.em-autolock-overlay[b-1df056rcd8] {
    position: fixed;
    inset: 0;
    z-index: 2000000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(3px);
}

.em-autolock-card[b-1df056rcd8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.25rem;
    min-width: 320px;
    max-width: 90vw;
    padding: 2rem 2.5rem;
    border-radius: 12px;
    background: var(--rz-base-background-color, #fff);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
}

/* Schud-animatie bij een foute pincode. */
.em-shake[b-1df056rcd8] {
    animation: em-autolock-shake-b-1df056rcd8 0.4s ease-in-out;
}

@keyframes em-autolock-shake-b-1df056rcd8 {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}
/* /Components/Layout/LoginLayout.razor.rz.scp.css */
[b-vw8yhx76pm] .login-layout {
    background: url('/images/login.jpg');
    background-size: cover;
    background-position: center;
    min-height: 100vh;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-6k8jy4bqos] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    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-6k8jy4bqos] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavRail.razor.rz.scp.css */
/* NavRail "Menu 6" — metrics zijn final (high-fidelity handoff); kleuren via --em-rail-* tokens
   (light/dark in design-system.css). DT-2.39-4. */

.nav-rail[b-75vjr3o8yy] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 13px 24px;
    background: var(--em-rail-bg);
    overflow-y: auto;
    /* Crispere tekst voor licht-op-donker (wordmark + labels). */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Header / wordmark ──────────────────────────────────────────────────── */
.nav-header[b-75vjr3o8yy] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 22px 6px 20px;
}

.nav-logo-link[b-75vjr3o8yy] {
    display: inline-flex;
    text-decoration: none;
    flex-shrink: 0;
}

.nav-logo-tile[b-75vjr3o8yy] {
    /* Brede badge die de (landscape) eye-mark vrijwel randloos opvult — minimale
       witruimte. De gradient-SVG rendert op dit grotere formaat ook scherp. */
    width: 48px;
    height: 34px;
    border-radius: 11px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--em-rail-logo-shadow);
    flex-shrink: 0;
}

.nav-logo-img[b-75vjr3o8yy] {
    width: 46px;
    height: auto;
    max-height: 31px;
    object-fit: contain;
}

.nav-wordmark[b-75vjr3o8yy] {
    line-height: 1.12;
    min-width: 0;
}

.nav-wordmark-line[b-75vjr3o8yy] {
    color: var(--em-rail-wordmark);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0;
}

.nav-work[b-75vjr3o8yy] {
    font-weight: 400;
    color: var(--em-rail-work);
}

.nav-bbs[b-75vjr3o8yy] {
    color: var(--em-rail-bbs);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.22em;
}

/* ── Items ──────────────────────────────────────────────────────────────── */
.nav-items[b-75vjr3o8yy] {
    display: flex;
    flex-direction: column;
}

.nav-item[b-75vjr3o8yy] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 9px;
    margin-bottom: 2px;
    color: var(--em-rail-label);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}

.nav-item:hover:not(.active)[b-75vjr3o8yy] {
    background: var(--em-rail-hover-bg);
}

.nav-item.active[b-75vjr3o8yy] {
    background: var(--em-rail-pill-bg);
    color: var(--em-rail-pill-fg);
    font-weight: 700;
    box-shadow: var(--em-rail-pill-shadow);
}

.nav-item-label[b-75vjr3o8yy] {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Sub-group ──────────────────────────────────────────────────────────── */
.nav-subgroup[b-75vjr3o8yy] {
    margin: 2px 0 6px 23px;
    border-left: 1px solid var(--em-rail-subborder);
    padding-left: 6px;
}

.nav-subitem[b-75vjr3o8yy] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--em-rail-subtext);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}

.nav-subitem:hover:not(.active)[b-75vjr3o8yy] {
    background: var(--em-rail-subhover-bg);
}

.nav-subitem.active[b-75vjr3o8yy] {
    background: var(--em-rail-pill-bg);
    color: var(--em-rail-pill-fg);
    font-weight: 700;
    box-shadow: var(--em-rail-pill-shadow);
}

.nav-subitem-label[b-75vjr3o8yy] {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-empty[b-75vjr3o8yy] {
    color: var(--em-rail-subtext);
    padding: 10px 12px;
    font-size: 14px;
}

/* ── Icons (gerenderd door child-component → ::deep) ────────────────────────
   De menu-iconen erven currentColor van hun rij; daardoor kleurt het icoon in de
   actieve pill automatisch mee naar de pill-voorgrond. De chevron is bewust dimmer. */
[b-75vjr3o8yy] .lucide {
    flex-shrink: 0;
}

[b-75vjr3o8yy] .nav-chevron {
    color: var(--em-rail-caret);
    transition: transform 0.15s ease;
}

[b-75vjr3o8yy] .nav-chevron.open {
    transform: rotate(180deg);
}

.nav-item.active[b-75vjr3o8yy]  .nav-chevron,
.nav-subitem.active[b-75vjr3o8yy]  .nav-chevron {
    color: var(--em-rail-pill-fg);
}
/* /Components/Layout/PerformanceFooterIndicator.razor.rz.scp.css */
/* In-tool snelheidsindicator (Epic 66668.2, DT-66668.2-8): 3 bolletjes, het actieve licht helder op. */
.em-perf-indicator[b-yce0jd0hp6] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
}

.em-perf-dot[b-yce0jd0hp6] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    /* Standaard gedimd; de actieve klasse-regels hieronder zetten één bolletje op vol + glow. */
    opacity: 0.25;
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

.em-perf-dot-good[b-yce0jd0hp6] {
    background-color: var(--rz-success, #28a745);
}

.em-perf-dot-medium[b-yce0jd0hp6] {
    background-color: var(--rz-warning, #f0ad4e);
}

.em-perf-dot-poor[b-yce0jd0hp6] {
    background-color: var(--rz-danger, #dc3545);
}

/* Actieve klasse → bijbehorend bolletje vol gekleurd + subtiele glow. */
.em-perf-good .em-perf-dot-good[b-yce0jd0hp6] {
    opacity: 1;
    box-shadow: 0 0 4px var(--rz-success, #28a745);
}

.em-perf-medium .em-perf-dot-medium[b-yce0jd0hp6] {
    opacity: 1;
    box-shadow: 0 0 4px var(--rz-warning, #f0ad4e);
}

.em-perf-poor .em-perf-dot-poor[b-yce0jd0hp6] {
    opacity: 1;
    box-shadow: 0 0 4px var(--rz-danger, #dc3545);
}

/* Onbekend (geen meting) → alle drie neutraal/gedimd, geen kleur-accent. */
.em-perf-unknown .em-perf-dot[b-yce0jd0hp6] {
    opacity: 0.25;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-p2fl29mx4n],
.components-reconnect-repeated-attempt-visible[b-p2fl29mx4n],
.components-reconnect-failed-visible[b-p2fl29mx4n],
.components-pause-visible[b-p2fl29mx4n],
.components-resume-failed-visible[b-p2fl29mx4n],
.components-rejoining-animation[b-p2fl29mx4n] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

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

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

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

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/Support/GuideOverlay.razor.rz.scp.css */
/* Het paneel zweeft rechtsonder, net boven de support-FAB (DT-66673.2-6).
   Geen backdrop en geen vaste laag over de pagina: alleen dit paneel vangt klikken, de
   pagina eronder blijft gewoon bruikbaar terwijl de gebruiker de stappen volgt. */
.guide-overlay[b-swf2le32um] {
    position: fixed;
    right: 1.25rem;
    bottom: 5.25rem;
    z-index: 899;
    width: min(22rem, calc(100vw - 2.5rem));
    max-height: 60vh;
    overflow-y: auto;
    pointer-events: auto;
    padding: 0.75rem 1rem 1rem;
    border-radius: var(--em-radius-md, 8px);
    border: 1px solid var(--rz-border, rgba(0, 0, 0, 0.12));
    background: var(--rz-base-background-color, #fff);
    color: var(--rz-text-color, #1a1a1a);
    box-shadow: var(--em-shadow-overlay, 0 2px 8px rgba(0, 0, 0, 0.25));
}

.guide-overlay__header[b-swf2le32um] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

/* De kop is het sleep-handvat (DT-66673.2-13). touch-action uit, anders scrollt een
   touch-apparaat de pagina in plaats van het paneel te verslepen. */
.guide-overlay__header--draggable[b-swf2le32um] {
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.guide-overlay__header--draggable:active[b-swf2le32um] {
    cursor: grabbing;
}

.guide-overlay__drag-icon[b-swf2le32um] {
    font-family: 'Material Symbols Outlined';
    font-size: 1.1rem;
    line-height: 1;
    align-self: center;
    color: var(--rz-text-secondary-color, #666);
}

.guide-overlay__title[b-swf2le32um] {
    font-weight: 600;
}

.guide-overlay__counter[b-swf2le32um] {
    font-size: var(--rz-text-caption-font-size, 0.75rem);
    color: var(--rz-text-secondary-color, #666);
}

.guide-overlay__steps[b-swf2le32um] {
    margin: 0 0 0.75rem;
    padding-inline-start: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.guide-overlay__step[b-swf2le32um] {
    color: var(--rz-text-secondary-color, #666);
}

/* De huidige stap springt eruit zonder dat de lijst verspringt: alleen kleur en gewicht. */
.guide-overlay__step--current[b-swf2le32um] {
    color: var(--rz-text-color, #1a1a1a);
    font-weight: 600;
}

.guide-overlay__actions[b-swf2le32um] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Zelfde les als de drawer-kop (#513): Radzen dempt een uitgeschakelde knop dubbel
   (opacity op de knop x tekstkleur-alfa) — samen vrijwel onzichtbaar. Eén demping
   volstaat: de knop blijft herkenbaar uitgeschakeld en de gebruiker ziet dat er
   op de eerste stap geen Vorige en op de laatste geen Volgende is. */
.guide-overlay__actions[b-swf2le32um]  .rz-button.rz-state-disabled {
    opacity: 0.55;
}

/* Toelichting wanneer het onderdeel van de stap niet op het scherm staat (DT-66673.2-15).
   Ingetogen gehouden: het is uitleg bij de stap, geen foutmelding. */
.guide-overlay__notice[b-swf2le32um] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.625rem;
    border-radius: var(--em-radius-md);
    background: var(--em-bg-surface-sunken);
    color: var(--em-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.guide-overlay__notice-icon[b-swf2le32um] {
    font-family: var(--em-font-icons, "Material Symbols Outlined");
    font-size: 1rem;
    line-height: 1.4;
    flex: 0 0 auto;
}
/* /Components/Layout/Support/GuideSpotlight.razor.rz.scp.css */
/* De instructielaag ligt over de hele pagina maar vangt géén muisklikken: de gebruiker moet
   de stap juist kunnen uitvoeren terwijl de laag staat. Net onder het gids-paneel (899),
   zodat de stappen zelf nooit gedimd raken. overflow:hidden knipt de reusachtige
   box-shadow van het gat af op de viewport. */
.guide-spotlight[b-x947svkskz] {
    position: fixed;
    inset: 0;
    z-index: 898;
    pointer-events: none;
    overflow: hidden;
}

/* Het "gat": een klein element op de plek van het stap-element (gepositioneerd door
   js/guide-spotlight.js); de dim is zijn eigen box-shadow, die alle vier de kanten op
   uitloopt. Zo is de uitsparing gratis scherp, met afgeronde hoeken, zonder clip-path-
   gereken. Is het gat verborgen, dan is er dus ook geen dim — nooit een grijze pagina
   zonder uitsparing. */
.guide-spotlight__hole[b-x947svkskz] {
    position: fixed;
    border-radius: 10px;
    box-shadow: 0 0 0 200vmax var(--em-guide-dim, rgba(15, 23, 42, 0.45));
    transition: left 0.15s ease, top 0.15s ease, width 0.15s ease, height 0.15s ease;
}

.guide-spotlight__hole--verborgen[b-x947svkskz] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .guide-spotlight__hole[b-x947svkskz] {
        transition: none;
    }
}
/* /Components/Layout/Support/SupportArticleView.razor.rz.scp.css */
.support-article[b-zsk83jjdd0] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

.support-article__body[b-zsk83jjdd0] {
    overflow-y: auto;
    line-height: 1.5;
}

.support-article__body[b-zsk83jjdd0]  h1,
.support-article__body[b-zsk83jjdd0]  h2,
.support-article__body[b-zsk83jjdd0]  h3 {
    margin: 0.75rem 0 0.25rem;
    font-size: 1rem;
}

.support-article__body[b-zsk83jjdd0]  ul,
.support-article__body[b-zsk83jjdd0]  ol {
    padding-inline-start: 1.25rem;
}
/* /Components/Layout/Support/SupportAssistantTab.razor.rz.scp.css */
.support-assistant[b-ls8u20yvt7] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* Banner "concept-kennis actief": opvallend genoeg om niet te vergeten dat de antwoorden
   op nog niet goedgekeurde artikelen kunnen steunen. */
.support-assistant__banner[b-ls8u20yvt7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 0.5rem;
    background: var(--rz-warning-lighter, #fff4d6);
    color: var(--rz-warning-darker, #6b4b00);
    font-size: 0.85rem;
}

.support-assistant__suggestions[b-ls8u20yvt7] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.support-assistant__review[b-ls8u20yvt7] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.375rem 0.5rem;
    border-radius: 0.5rem;
    border: 1px dashed var(--rz-warning, #f0a30a);
}

.support-assistant__review-row[b-ls8u20yvt7] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.support-assistant__review-title[b-ls8u20yvt7] {
    font-weight: 600;
    font-size: 0.85rem;
    margin-inline-end: 0.25rem;
}

.support-assistant__review-comment[b-ls8u20yvt7] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.support-assistant__review-error[b-ls8u20yvt7] {
    color: var(--rz-danger, #c1262d);
    font-size: 0.8rem;
}

.support-assistant__ticket[b-ls8u20yvt7] {
    display: inline-flex;
}

/* Radzen dempt een uitgeschakelde tekst-knop dubbel: opacity 0.2 op de knop
   én een tekstkleur met alfa 0.12 — samen ~2% zichtbaar. Zolang er nog geen
   vraag is gesteld (CannotOpenTicket) oogde "Stuur naar support" daardoor als
   een render-artefact naast de testmodus-switch. Eén demping volstaat om de
   knop als uitgeschakeld te tonen én leesbaar te houden. */
.support-assistant__ticket[b-ls8u20yvt7]  .rz-button.rz-state-disabled {
    opacity: 1;
    color: var(--rz-text-disabled-color, rgba(0, 0, 0, 0.38));
}
/* /Components/Layout/Support/SupportFab.razor.rz.scp.css */
/* Zwevende hulpknop rechtsonder (DT-66673.2-5).
   z-index blijft bewust onder de drawer-overlay (zie eyemanage.css): optillen zou de knop
   pal over "Opslaan" in de orderfoot en over "Sluiten" in de support-drawer zetten. Binnen een
   drawer neemt SupportDrawerFooterButton het over — gecentreerd in de voet (DT-66673.2-11). */
.support-fab[b-f38zwxkqmb] {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 900;
}

.support-fab__button[b-f38zwxkqmb]  .rz-button {
    border-radius: 1.75rem;
    min-height: 2.75rem;
    padding-inline: 1rem;
    box-shadow: var(--em-shadow-overlay, 0 2px 8px rgba(0, 0, 0, 0.25));
}

/* De teller hangt als klein schijfje rechtsboven op de knop. De tekst is aria-hidden:
   het aantal zit al in het aria-label van de knop zelf. */
.support-fab__badge[b-f38zwxkqmb] {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.25rem;
    border-radius: 0.75rem;
    background: var(--rz-warning, #f0a30a);
    color: var(--rz-on-warning, #1a1a1a);
    font-size: 0.7rem;
    line-height: 1.25rem;
    text-align: center;
    font-weight: 600;
}

/* Tijdens het streamen ademt de knop rustig mee, zodat zichtbaar is dat er iets loopt. */
.support-fab--busy .support-fab__button[b-f38zwxkqmb]  .rz-button {
    animation: support-fab-pulse-b-f38zwxkqmb 1.6s ease-in-out infinite;
}

@keyframes support-fab-pulse-b-f38zwxkqmb {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
    .support-fab--busy .support-fab__button[b-f38zwxkqmb]  .rz-button {
        animation: none;
    }
}
/* /Components/Layout/Support/SupportMessagesTab.razor.rz.scp.css */
.support-messages[b-bpbfql6idi] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    min-height: 0;
}

.support-messages__empty[b-bpbfql6idi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--rz-text-secondary-color);
}

.support-messages__filter[b-bpbfql6idi] {
    padding: 0.25rem 0.5rem;
}

.support-messages__error[b-bpbfql6idi] {
    color: var(--rz-danger, #c1262d);
    padding: 0.25rem 0.5rem;
}

.support-messages__list[b-bpbfql6idi] {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
}

.support-messages__row[b-bpbfql6idi] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
    padding: 0.5rem;
    border: 0;
    border-bottom: 1px solid var(--rz-border-color, #e0e0e0);
    background: transparent;
    text-align: start;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.support-messages__row:hover:not(:disabled)[b-bpbfql6idi] {
    background: var(--rz-base-200, #f2f2f2);
}

.support-messages__subject[b-bpbfql6idi] {
    font-weight: 600;
}

.support-messages__meta[b-bpbfql6idi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

.support-messages__thread-head[b-bpbfql6idi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.support-messages__ticket[b-bpbfql6idi] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

.support-messages__sender[b-bpbfql6idi] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
}

.support-messages__chat[b-bpbfql6idi] {
    flex: 1 1 auto;
    min-height: 0;
}

.support-messages__readonly[b-bpbfql6idi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
    background: var(--rz-base-200, #f2f2f2);
    border-radius: var(--rz-border-radius, 4px);
}
/* /Components/Layout/Support/SupportTicketDialog.razor.rz.scp.css */
.support-ticket[b-976nynigft] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem;
    height: 100%;
    overflow-y: auto;
}

.support-ticket__head[b-976nynigft] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.support-ticket__preview[b-976nynigft] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    border: 1px solid var(--rz-border-color, #e0e0e0);
    border-radius: var(--rz-border-radius, 4px);
    padding: 0.5rem;
    background: var(--rz-base-background-color, #fafafa);
}

.support-ticket__subject-label[b-976nynigft] {
    font-weight: 600;
}

.support-ticket__body[b-976nynigft] {
    margin: 0;
    max-height: 18rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.8125rem;
    font-family: var(--rz-text-font-family, inherit);
}

.support-ticket__error[b-976nynigft] {
    color: var(--rz-danger, #c62828);
}

.support-ticket__buttons[b-976nynigft] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
/* /Components/Pages/Activate.razor.rz.scp.css */
.em-activate-page[b-6n7oom7dim] {
    --em-ink: #0B2A30;
    --em-muted: #5C7480;
    --em-border: #E8EDEF;
    --em-card: #FFFFFF;
    --em-teal: #1A8A9F;
    --em-teal-deep: #0E5A6B;
    --em-coral: #FF7A50;
    --em-coral-bg: #FFEDE6;
    --em-mint: #3CC78E;
    --em-mint-bg: #E1F7EC;
    --em-indigo: #5B61D6;
    --em-indigo-bg: #E8E9FA;
    --em-radius-lg: 24px;
    --em-radius-md: 20px;
    --em-radius-sm: 10px;
    min-height: 100vh;
    padding: 28px 56px;
    color: var(--em-ink);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    background: linear-gradient(180deg, #F4F8F9 0%, #EAF1F3 100%);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.em-activate-topbar[b-6n7oom7dim] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.em-breadcrumb[b-6n7oom7dim] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--em-muted);
}

.em-breadcrumb a[b-6n7oom7dim] { color: var(--em-muted); text-decoration: none; }
.em-breadcrumb strong[b-6n7oom7dim] { color: var(--em-ink); font-weight: 700; }
.em-bc-sep[b-6n7oom7dim] { color: #C4D0D5; }

.em-logo-mark[b-6n7oom7dim] { color: var(--em-teal-deep); display: inline-flex; }
.em-logo-mark svg[b-6n7oom7dim] { width: 28px; height: 20px; }

.em-user-pill[b-6n7oom7dim] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 14px 4px 4px;
    background: #fff;
    border: 1px solid var(--em-border);
    border-radius: 99px;
    font-size: 13px;
    font-weight: 600;
}

.em-user-avatar[b-6n7oom7dim] {
    width: 28px;
    height: 28px;
    border-radius: 99px;
    background: var(--em-teal);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    letter-spacing: 0.02em;
}

.em-activate-grid[b-6n7oom7dim] {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 28px;
    align-items: start;
}

.em-activate-hero[b-6n7oom7dim] {
    background: var(--em-card);
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-lg);
    padding: 36px 38px;
    box-shadow: 0 24px 60px -30px rgba(14,90,107,0.25);
}

.em-activate-headblock[b-6n7oom7dim] {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.em-tile-icon[b-6n7oom7dim] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.em-tile-icon svg[b-6n7oom7dim] { width: 32px; height: 32px; }
.em-icon-teal[b-6n7oom7dim] { background: #E6F2F4; color: var(--em-teal-deep); }
.em-icon-coral[b-6n7oom7dim] { background: var(--em-coral-bg); color: var(--em-coral); }
.em-icon-mint[b-6n7oom7dim] { background: var(--em-mint-bg); color: #198555; }
.em-icon-indigo[b-6n7oom7dim] { background: var(--em-indigo-bg); color: var(--em-indigo); }

.em-tag-row[b-6n7oom7dim] { display: flex; align-items: center; gap: 8px; }
.em-tag[b-6n7oom7dim] { padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; }
.em-tag-teal[b-6n7oom7dim] { background: var(--em-teal); }
.em-tag-coral[b-6n7oom7dim] { background: var(--em-coral); }
.em-tag-mint[b-6n7oom7dim] { background: var(--em-mint); }
.em-tag-indigo[b-6n7oom7dim] { background: var(--em-indigo); }
.em-tag-perm[b-6n7oom7dim] { padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 600; background: #F2F5F6; color: var(--em-muted); display: inline-flex; align-items: center; gap: 4px; }
.em-tag-perm svg[b-6n7oom7dim] { width: 12px; height: 12px; }

.em-activate-hero h1[b-6n7oom7dim] { margin: 6px 0 0; font-size: 36px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.em-activate-lead[b-6n7oom7dim] { color: var(--em-muted); font-size: 16px; line-height: 1.6; margin: 22px 0 28px; max-width: 600px; }

.em-feature-grid[b-6n7oom7dim] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 28px;
}

.em-feature-grid li[b-6n7oom7dim] { display: flex; gap: 12px; align-items: flex-start; }
.em-feature-grid li > div[b-6n7oom7dim] { display: flex; flex-direction: column; gap: 2px; }
.em-feature-grid strong[b-6n7oom7dim] { font-size: 14px; font-weight: 700; color: var(--em-ink); }
.em-feature-grid span[b-6n7oom7dim] { font-size: 13px; color: var(--em-muted); line-height: 1.5; }

.em-check[b-6n7oom7dim] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.em-check svg[b-6n7oom7dim] { width: 16px; height: 16px; }

.em-testimonial[b-6n7oom7dim] {
    display: flex;
    gap: 14px;
    margin: 32px 0 0;
    padding: 18px 20px;
    background: #F7FAFB;
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-md);
}

.em-tm-avatar[b-6n7oom7dim] {
    width: 44px;
    height: 44px;
    border-radius: 99px;
    background: var(--em-teal-deep);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.em-testimonial > div:last-child[b-6n7oom7dim] { display: flex; flex-direction: column; gap: 4px; }
.em-testimonial small[b-6n7oom7dim] { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--em-muted); }
.em-testimonial q[b-6n7oom7dim] { font-size: 14px; line-height: 1.5; color: var(--em-ink); font-style: italic; }
.em-testimonial cite[b-6n7oom7dim] { font-style: normal; font-size: 12px; color: var(--em-muted); }

.em-activate-rail[b-6n7oom7dim] { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 28px; }

.em-pricing-card[b-6n7oom7dim] {
    background: var(--em-card);
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-md);
    padding: 28px 24px;
    box-shadow: 0 12px 40px -24px rgba(14,90,107,0.18);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.em-trial-badge[b-6n7oom7dim] { align-self: flex-start; padding: 4px 12px; border-radius: 99px; background: #E6F2F4; color: var(--em-teal-deep); font-size: 12px; font-weight: 700; }
.em-pricing-coral .em-trial-badge[b-6n7oom7dim] { background: var(--em-coral-bg); color: #C24A28; }
.em-pricing-indigo .em-trial-badge[b-6n7oom7dim] { background: var(--em-indigo-bg); color: #3B3FA8; }
.em-pricing-mint .em-trial-badge[b-6n7oom7dim] { background: var(--em-mint-bg); color: #198555; }

.em-price[b-6n7oom7dim] { display: flex; align-items: baseline; gap: 6px; }
.em-price-amount[b-6n7oom7dim] { font-size: 42px; font-weight: 700; letter-spacing: -0.02em; color: var(--em-ink); }
.em-price-period[b-6n7oom7dim] { font-size: 14px; color: var(--em-muted); }
.em-price-included[b-6n7oom7dim] { font-size: 28px; font-weight: 700; color: var(--em-mint); }

.em-pricing-notes[b-6n7oom7dim] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.em-pricing-notes li[b-6n7oom7dim] { font-size: 13px; color: var(--em-muted); padding-left: 16px; position: relative; }
.em-pricing-notes li[b-6n7oom7dim]::before { content: "•"; position: absolute; left: 4px; color: var(--em-teal); font-weight: 700; }

.em-pricing-cta[b-6n7oom7dim] {
    height: 50px;
    border: none;
    border-radius: 12px;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 4px;
}

.em-pricing-cta-teal[b-6n7oom7dim] { background: linear-gradient(180deg, var(--em-teal) 0%, var(--em-teal-deep) 100%); }
.em-pricing-cta-coral[b-6n7oom7dim] { background: linear-gradient(180deg, var(--em-coral) 0%, #E45A30 100%); }
.em-pricing-cta-indigo[b-6n7oom7dim] { background: linear-gradient(180deg, var(--em-indigo) 0%, #4347B8 100%); }
.em-pricing-cta-mint[b-6n7oom7dim] { background: linear-gradient(180deg, var(--em-mint) 0%, #2A9D6B 100%); }

.em-pricing-secondary[b-6n7oom7dim] { text-align: center; font-size: 13px; color: var(--em-muted); font-weight: 600; text-decoration: none; padding-top: 4px; }
.em-pricing-secondary:hover[b-6n7oom7dim] { color: var(--em-ink); }

.em-help-card[b-6n7oom7dim] {
    background: transparent;
    border: 1.5px dashed #B8C7CC;
    border-radius: var(--em-radius-md);
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.em-help-card strong[b-6n7oom7dim] { font-size: 14px; }
.em-help-card p[b-6n7oom7dim] { margin: 0; font-size: 13px; color: var(--em-muted); line-height: 1.5; }

.em-activate-foot a[b-6n7oom7dim] { font-size: 13px; color: var(--em-muted); text-decoration: none; font-weight: 600; }
.em-activate-foot a:hover[b-6n7oom7dim] { color: var(--em-ink); }
.em-activate-empty[b-6n7oom7dim] { color: var(--em-muted); font-size: 14px; padding: 80px 0; text-align: center; }

@media (max-width: 820px) {
    .em-activate-page[b-6n7oom7dim] { padding: 20px 18px; }
    .em-activate-grid[b-6n7oom7dim] { grid-template-columns: 1fr; }
    .em-activate-rail[b-6n7oom7dim] { position: static; }
    .em-feature-grid[b-6n7oom7dim] { grid-template-columns: 1fr; }
    .em-activate-hero[b-6n7oom7dim] { padding: 24px 22px; }
    .em-activate-hero h1[b-6n7oom7dim] { font-size: 28px; }
    .em-breadcrumb a:not(.em-logo-mark)[b-6n7oom7dim] { display: none; }
    .em-breadcrumb .em-bc-sep:first-of-type[b-6n7oom7dim] { display: none; }
    .em-user-name[b-6n7oom7dim] { display: none; }
}
/* /Components/Pages/Admin/Billing/Components/BillingPeriodTable.razor.rz.scp.css */
/* DT-66674.2-5 nazorg: de reden van een mislukte export hoort in de lijst zelf zichtbaar te
   zijn — "Mislukt" zonder reden dwingt tot doorklikken naar het periodedetail. */
[b-jrr47at5ex] .billing-period-error {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--rz-danger, #d32f2f);
    white-space: normal;
    word-break: break-word;
}
/* /Components/Pages/Admin/Help/HelpArticleDrawer.razor.rz.scp.css */
/* Beoordeel-drawer van een helpartikel (DT-66673.1-5).

   De preview-inhoud komt uit HelpMarkdownRenderer en wordt als MarkupString ingevoegd;
   die elementen dragen geen scope-attribuut van de CSS-isolatie. Daarom lopen de regels
   daarvoor via ::deep. */

.help-drawer-content[b-132z5hbkg3] {
    display: flex;
    flex-direction: column;
}

/* ---- Kenmerken ---------------------------------------------------------- */

.help-metadata[b-132z5hbkg3] {
    font-size: 13px;
    color: var(--em-form-text, #16323b);
}

.help-metadata-key[b-132z5hbkg3] {
    font-family: var(--em-font-mono, monospace);
    font-size: 12px;
}

/* ---- Preview ------------------------------------------------------------ */

.help-preview[b-132z5hbkg3] {
    font-size: 13px;
    line-height: 1.55;
    color: var(--em-form-text, #16323b);
}

.help-preview[b-132z5hbkg3]  h4,
.help-preview[b-132z5hbkg3]  h5,
.help-preview[b-132z5hbkg3]  h6 {
    margin: 14px 0 6px;
    font-weight: 700;
    color: var(--em-accent-dark, #0b6076);
}

.help-preview[b-132z5hbkg3]  h4 { font-size: 15px; }
.help-preview[b-132z5hbkg3]  h5 { font-size: 14px; }
.help-preview[b-132z5hbkg3]  h6 { font-size: 13px; }

.help-preview[b-132z5hbkg3]  p {
    margin: 0 0 10px;
}

.help-preview[b-132z5hbkg3]  ul,
.help-preview[b-132z5hbkg3]  ol {
    margin: 0 0 10px;
    padding-left: 22px;
}

.help-preview[b-132z5hbkg3]  li {
    margin-bottom: 3px;
}

.help-preview[b-132z5hbkg3]  code {
    font-family: var(--em-font-mono, monospace);
    font-size: 12px;
    padding: 1px 4px;
    border-radius: var(--em-radius-xs, 2px);
    background: var(--em-bg-secondary, #f0eee7);
}

.help-preview[b-132z5hbkg3]  pre {
    margin: 0 0 10px;
    padding: 10px 12px;
    overflow-x: auto;
    border-radius: var(--em-radius-sm, 3px);
    background: var(--em-bg-surface-sunken, #f0eee7);
    border: 1px solid var(--em-border-subtle, #e6e3da);
}

.help-preview[b-132z5hbkg3]  pre code {
    padding: 0;
    background: none;
}

.help-preview[b-132z5hbkg3]  a {
    color: var(--em-accent-dark, #0b6076);
    text-decoration: underline;
}

/* ---- Verschil met de vorige versie -------------------------------------- */

.help-diff[b-132z5hbkg3] {
    font-family: var(--em-font-mono, monospace);
    font-size: 12px;
    line-height: 1.5;
    overflow-x: auto;
    border: 1px solid var(--em-border-subtle, #e6e3da);
    border-radius: var(--em-radius-sm, 3px);
}

.help-diff-line[b-132z5hbkg3] {
    display: flex;
    gap: 8px;
    padding: 1px 8px;
    white-space: pre-wrap;
    word-break: break-word;
}

.help-diff-marker[b-132z5hbkg3] {
    flex: 0 0 auto;
    width: 10px;
    font-weight: 700;
    text-align: center;
    user-select: none;
}

.help-diff-text[b-132z5hbkg3] {
    flex: 1 1 auto;
}

/* Groen = toegevoegd, rood = verwijderd, neutraal = ongewijzigde context. */
.help-diff-added[b-132z5hbkg3] {
    background: var(--em-sem-success-bg, #e7f5ec);
    color: var(--em-sem-success-text, #2e7d47);
}

.help-diff-removed[b-132z5hbkg3] {
    background: var(--em-sem-error-bg, #fdeaea);
    color: var(--em-sem-error-text, #b3261e);
}

.help-diff-unchanged[b-132z5hbkg3] {
    color: var(--em-form-placeholder, #5a6b71);
}

.help-diff-empty[b-132z5hbkg3],
.help-test-questions-empty[b-132z5hbkg3],
.help-test-conversations-empty[b-132z5hbkg3],
.help-review-log-empty[b-132z5hbkg3] {
    font-size: 13px;
    font-style: italic;
    color: var(--em-form-placeholder, #5a6b71);
}

/* ---- Testplan ----------------------------------------------------------- */

.help-test-question[b-132z5hbkg3] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid var(--em-border-subtle, #e6e3da);
    font-size: 13px;
}

.help-test-question:last-child[b-132z5hbkg3] {
    border-bottom: none;
}

.help-test-question-text[b-132z5hbkg3] {
    font-weight: 600;
}

.help-test-question-expected[b-132z5hbkg3] {
    color: var(--em-form-placeholder, #5a6b71);
}

.help-test-conversation[b-132z5hbkg3] {
    padding: 8px 10px;
    margin-bottom: 6px;
    font-size: 13px;
    border-left: 3px solid var(--em-accent, #0e7c9b);
    background: var(--em-bg-secondary, #f0eee7);
    border-radius: 0 var(--em-radius-sm, 3px) var(--em-radius-sm, 3px) 0;
}

.help-test-conversation-answer[b-132z5hbkg3] {
    margin-top: 2px;
}

.help-test-conversation-meta[b-132z5hbkg3] {
    margin-top: 4px;
    font-size: 11px;
    color: var(--em-form-placeholder, #5a6b71);
}

/* ---- Reviewspoor -------------------------------------------------------- */

.help-review-log-entry[b-132z5hbkg3] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--em-border-subtle, #e6e3da);
    font-size: 13px;
}

.help-review-log-entry:last-child[b-132z5hbkg3] {
    border-bottom: none;
}

.help-review-log-action[b-132z5hbkg3] {
    font-weight: 700;
    min-width: 110px;
}

.help-review-log-version[b-132z5hbkg3] {
    font-family: var(--em-font-mono, monospace);
    font-size: 11px;
    padding: 1px 6px;
    border-radius: var(--em-radius-full, 999px);
    background: var(--em-bg-secondary, #f0eee7);
    color: var(--em-form-placeholder, #5a6b71);
}

.help-review-log-date[b-132z5hbkg3] {
    font-size: 12px;
    color: var(--em-form-placeholder, #5a6b71);
    white-space: nowrap;
}

.help-review-log-comment[b-132z5hbkg3] {
    flex: 1 1 100%;
    color: var(--em-form-text, #16323b);
}

/* ---- Opmerkingpaneel ---------------------------------------------------- */

.help-comment-error[b-132z5hbkg3] {
    font-weight: 600;
}
/* /Components/Pages/Admin/Help/HelpArticles.razor.rz.scp.css */
/* Adminscherm Helpartikelen (DT-66673.1-5) — lijstweergave.
   Kleuren via de design-system-tokens met een hex-terugval, conform de andere
   admin-pagina's (bv. Workshop/WorkshopDashboard.razor.css). */

.help-articles-page[b-c2j71q2k1n] {
    display: flex;
    flex-direction: column;
}

.help-articles-empty[b-c2j71q2k1n] {
    padding: 4px 0;
}

.help-articles-table[b-c2j71q2k1n] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.help-articles-table thead th[b-c2j71q2k1n] {
    padding: 8px 10px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--em-form-placeholder, #5a6b71);
    background: var(--em-bg-secondary, #f0eee7);
    border-bottom: 1px solid var(--em-border-primary, #d5d2c8);
    white-space: nowrap;
}

.help-articles-table td[b-c2j71q2k1n] {
    padding: 8px 10px;
    border-bottom: 1px solid var(--em-border-subtle, #e6e3da);
    color: var(--em-form-text, #16323b);
    vertical-align: top;
}

/* De hele rij opent de beoordeel-drawer; dat moet je kunnen zien. */
.help-article-row[b-c2j71q2k1n] {
    cursor: pointer;
    transition: background-color .12s ease-in-out;
}

.help-article-row:hover td[b-c2j71q2k1n] {
    background: var(--em-accent-lighter, #e8f3f6);
}

.help-article-row:focus-visible[b-c2j71q2k1n] {
    outline: 2px solid var(--em-border-focus, #0b6076);
    outline-offset: -2px;
}

.help-article-key[b-c2j71q2k1n] {
    font-family: var(--em-font-mono, monospace);
    font-size: 12px;
    white-space: nowrap;
}

.help-article-title[b-c2j71q2k1n] {
    font-weight: 600;
}

.help-article-status[b-c2j71q2k1n],
.help-article-version[b-c2j71q2k1n],
.help-article-author[b-c2j71q2k1n] {
    white-space: nowrap;
}

.help-article-version[b-c2j71q2k1n] {
    font-variant-numeric: tabular-nums;
}

.help-article-changed[b-c2j71q2k1n],
.help-article-author[b-c2j71q2k1n] {
    color: var(--em-form-placeholder, #5a6b71);
    font-size: 12px;
    white-space: nowrap;
}
/* /Components/Pages/Admin/Product/LensConfigurator/AllEndpointsOverview.razor.rz.scp.css */
.all-endpoints-overview[b-mu4bbky0at] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
}

.all-endpoints-overview__toolbar[b-mu4bbky0at] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.all-endpoints-overview__toolbar-left[b-mu4bbky0at] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.all-endpoints-overview__title[b-mu4bbky0at] {
    margin: 0;
    font-size: 20px;
}

.all-endpoints-overview__count-badge[b-mu4bbky0at] {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.all-endpoints-overview__count-badge--ok[b-mu4bbky0at] {
    background: color-mix(in srgb, var(--rz-success) 14%, transparent);
    color: var(--rz-success);
}

.all-endpoints-overview__count-badge--warning[b-mu4bbky0at] {
    background: color-mix(in srgb, var(--rz-warning) 14%, transparent);
    color: var(--rz-warning);
}

.all-endpoints-overview__loading[b-mu4bbky0at] {
    display: flex;
    justify-content: center;
    padding: 40px;
}

.all-endpoints-overview__filters[b-mu4bbky0at] {
    display: flex;
    gap: 12px;
    padding: 8px 0;
}

.all-endpoints-overview__search-field[b-mu4bbky0at] {
    min-width: 260px;
}

.all-endpoints-overview__table-wrap[b-mu4bbky0at] {
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 6px;
    overflow: hidden;
}

.all-endpoints-overview__route-chip[b-mu4bbky0at] {
    padding: 2px 8px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--rz-primary) 8%, transparent);
    font-size: 12px;
    color: var(--rz-text-color);
}

.all-endpoints-overview__route-chevron[b-mu4bbky0at] {
    font-size: 14px;
    color: var(--rz-text-secondary-color);
}

.all-endpoints-overview__status-icon--ok[b-mu4bbky0at] {
    color: var(--rz-success);
}

.all-endpoints-overview__status-icon--warning[b-mu4bbky0at] {
    color: var(--rz-warning);
}

.all-endpoints-overview__first-choice-name[b-mu4bbky0at] {
    font-size: 13px;
}

.all-endpoints-overview__unlinked-badge[b-mu4bbky0at] {
    padding: 2px 8px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--rz-warning) 12%, transparent);
    color: var(--rz-warning);
    font-size: 11px;
    font-weight: 600;
}
/* /Components/Pages/Admin/Product/LensConfigurator/Components/AdminOptionCard.razor.rz.scp.css */
.admin-option-card[b-56o2j9ele4] {
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    transition: all 200ms ease;
}

.admin-option-card:hover[b-56o2j9ele4] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.admin-option-card--recommended[b-56o2j9ele4] {
    border-color: var(--rz-highlight);
    box-shadow: 0 0 0 1px var(--rz-highlight);
}

/* ── Remove button ── */
.admin-option-card__remove[b-56o2j9ele4] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 200ms ease;
    z-index: 2;
}

.admin-option-card:hover .admin-option-card__remove[b-56o2j9ele4] {
    opacity: 1;
}

.admin-option-card__remove:hover[b-56o2j9ele4] {
    background: var(--rz-danger);
}

[b-56o2j9ele4] .admin-option-card__remove .rzi {
    font-size: 16px;
}

/* ── Image area ── */
.admin-option-card__image[b-56o2j9ele4] {
    width: 100%;
    height: 100px;
    background: linear-gradient(135deg, #E0F2F4, #B2DFE6);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.admin-option-card__image-placeholder[b-56o2j9ele4] {
    font-size: 36px;
    opacity: 0.4;
    color: var(--rz-text-disabled-color);
}

.admin-option-card__image-edit[b-56o2j9ele4] {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 200ms ease;
}

.admin-option-card:hover .admin-option-card__image-edit[b-56o2j9ele4] {
    opacity: 1;
}

[b-56o2j9ele4] .admin-option-card__image-edit .rzi {
    font-size: 16px;
    color: var(--rz-text-secondary-color);
}

/* ── Body ── */
.admin-option-card__body[b-56o2j9ele4] {
    padding: 14px;
}

.admin-option-card__title-row[b-56o2j9ele4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

.admin-option-card__title[b-56o2j9ele4] {
    font-size: 15px;
    font-weight: 700;
}

.admin-option-card__badges[b-56o2j9ele4] {
    display: flex;
    gap: 4px;
}

.admin-option-card__badge[b-56o2j9ele4] {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-option-card__badge--popular[b-56o2j9ele4] {
    background: var(--rz-primary);
    color: white;
}

.admin-option-card__badge--recommended[b-56o2j9ele4] {
    background: linear-gradient(135deg, var(--rz-highlight), var(--rz-warning));
    color: white;
}

.admin-option-card__subtitle[b-56o2j9ele4] {
    font-size: 12px;
    color: var(--rz-text-secondary-color);
    margin-bottom: 8px;
}

/* ── Features ── */
.admin-option-card__features[b-56o2j9ele4] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 8px 0;
    font-size: 12px;
}

.admin-option-card__feature[b-56o2j9ele4] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.admin-option-card__feature-icon[b-56o2j9ele4] {
    font-size: 14px;
}

.admin-option-card__feature-icon--yes[b-56o2j9ele4] {
    color: var(--rz-success);
}

.admin-option-card__feature-icon--no[b-56o2j9ele4] {
    color: var(--rz-danger);
    opacity: 0.5;
}

/* ── Price ── */
.admin-option-card__price[b-56o2j9ele4] {
    font-size: 14px;
    font-weight: 700;
    color: var(--rz-primary);
    margin: 8px 0;
}

/* ── Next step link ── */
.admin-option-card__next[b-56o2j9ele4] {
    margin: 8px 0;
}

.admin-option-card__next-badge[b-56o2j9ele4] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
}

.admin-option-card__next-badge--endpoint[b-56o2j9ele4] {
    background: rgba(156, 163, 168, 0.12);
    color: var(--rz-text-secondary-color);
}

.admin-option-card__next-badge .rzi[b-56o2j9ele4] {
    font-size: 14px;
}

.admin-option-card__next-link[b-56o2j9ele4] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--rz-primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 0;
    transition: color 200ms ease;
}

.admin-option-card__next-link:hover[b-56o2j9ele4] {
    color: var(--rz-primary-dark);
}

.admin-option-card__next-link .rzi[b-56o2j9ele4] {
    font-size: 14px;
}

/* ── Image content ── */
.admin-option-card__image-img[b-56o2j9ele4] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Endpoint status icons ── */
.admin-option-card__endpoint-status--linked[b-56o2j9ele4] {
    color: var(--rz-success);
    font-size: 14px;
}

.admin-option-card__endpoint-status--unlinked[b-56o2j9ele4] {
    color: var(--rz-warning);
    font-size: 14px;
}

/* ── Footer ── */
.admin-option-card__footer[b-56o2j9ele4] {
    display: flex;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--rz-border-color);
    margin-top: 8px;
}
/* /Components/Pages/Admin/Product/LensConfigurator/Components/CentralFeaturesEditor.razor.rz.scp.css */
.central-features-editor[b-9v16mptiii] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.central-features-editor__row[b-9v16mptiii] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: background-color 150ms, border-color 150ms;
}

.central-features-editor__row--included[b-9v16mptiii] {
    background: color-mix(in srgb, var(--rz-success) 8%, transparent);
    border-color: color-mix(in srgb, var(--rz-success) 22%, transparent);
}

.central-features-editor__row--excluded[b-9v16mptiii] {
    background: color-mix(in srgb, var(--rz-danger) 6%, transparent);
    border-color: color-mix(in srgb, var(--rz-danger) 20%, transparent);
}

.central-features-editor__toggle[b-9v16mptiii] {
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 6px;
}

.central-features-editor__row--included .central-features-editor__toggle[b-9v16mptiii] {
    color: var(--rz-success);
}

.central-features-editor__row--excluded .central-features-editor__toggle[b-9v16mptiii] {
    color: var(--rz-danger);
}

[b-9v16mptiii] .central-features-editor__toggle .rzi {
    font-size: 22px !important;
}

.central-features-editor__text[b-9v16mptiii] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.central-features-editor__actions[b-9v16mptiii] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    margin-top: 4px;
}

.central-features-editor__btn[b-9v16mptiii] {
    background: transparent;
    border: none;
    padding: 4px 6px;
    cursor: pointer;
    color: var(--rz-text-secondary-color);
    display: flex;
    align-items: center;
    border-radius: 4px;
    transition: all 150ms;
}

.central-features-editor__btn:hover:not(:disabled)[b-9v16mptiii] {
    background: color-mix(in srgb, var(--rz-text-secondary-color) 14%, transparent);
    color: var(--rz-text-color);
}

.central-features-editor__btn:disabled[b-9v16mptiii] {
    opacity: 0.3;
    cursor: not-allowed;
}

.central-features-editor__btn--danger:hover:not(:disabled)[b-9v16mptiii] {
    background: color-mix(in srgb, var(--rz-danger) 14%, transparent);
    color: var(--rz-danger);
}

[b-9v16mptiii] .central-features-editor__btn .rzi {
    font-size: 18px !important;
}

.central-features-editor__add[b-9v16mptiii] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px dashed var(--rz-border-color);
    border-radius: 6px;
    background: transparent;
    color: var(--rz-text-secondary-color);
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    align-self: flex-start;
    transition: all 150ms;
}

.central-features-editor__add:hover[b-9v16mptiii] {
    border-color: var(--rz-primary);
    color: var(--rz-primary);
    background: color-mix(in srgb, var(--rz-primary) 8%, transparent);
}
/* /Components/Pages/Admin/Product/LensConfigurator/Components/CentralImagePickerModal.razor.rz.scp.css */
.central-image-picker__backdrop[b-2y16hrkl7l] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1060;
    animation: cip-fade-b-2y16hrkl7l 180ms ease;
}

.central-image-picker[b-2y16hrkl7l] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(880px, 92vw);
    max-height: 84vh;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    z-index: 1070;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    animation: cip-pop-b-2y16hrkl7l 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes cip-fade-b-2y16hrkl7l {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cip-pop-b-2y16hrkl7l {
    from { opacity: 0; transform: translate(-50%, -48%) scale(0.98); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.central-image-picker__header[b-2y16hrkl7l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--rz-border-color);
}

.central-image-picker__title[b-2y16hrkl7l] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--rz-text-color);
}

.central-image-picker__close[b-2y16hrkl7l] {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--rz-text-secondary-color);
    padding: 4px;
    border-radius: 6px;
    display: flex;
    transition: background-color 150ms;
}

.central-image-picker__close:hover[b-2y16hrkl7l] {
    background: color-mix(in srgb, var(--rz-text-secondary-color) 12%, transparent);
    color: var(--rz-text-color);
}

[b-2y16hrkl7l] .central-image-picker__close .rzi {
    font-size: 22px !important;
}

.central-image-picker__filters[b-2y16hrkl7l] {
    padding: 12px 20px;
    border-bottom: 1px solid var(--rz-border-color);
}

.central-image-picker__categories[b-2y16hrkl7l] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.central-image-picker__category-chip[b-2y16hrkl7l] {
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--rz-border-color);
    background: transparent;
    color: var(--rz-text-secondary-color);
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    transition: all 150ms;
}

.central-image-picker__category-chip:hover[b-2y16hrkl7l] {
    border-color: var(--rz-primary);
    color: var(--rz-primary);
}

.central-image-picker__category-chip--active[b-2y16hrkl7l] {
    border-color: var(--rz-primary);
    background: color-mix(in srgb, var(--rz-primary) 14%, transparent);
    color: var(--rz-primary);
    font-weight: 600;
}

.central-image-picker__body[b-2y16hrkl7l] {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
    min-height: 200px;
}

.central-image-picker__loading[b-2y16hrkl7l] {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

.central-image-picker__empty[b-2y16hrkl7l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 20px;
    color: var(--rz-text-secondary-color);
    font-size: 13px;
    text-align: center;
}

[b-2y16hrkl7l] .central-image-picker__empty .rzi {
    font-size: 36px !important;
    color: var(--rz-text-disabled-color);
}

.central-image-picker__grid[b-2y16hrkl7l] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.central-image-picker__tile[b-2y16hrkl7l] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px;
    border: 2px solid var(--rz-border-color);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: border-color 150ms, transform 150ms;
}

.central-image-picker__tile:hover[b-2y16hrkl7l] {
    border-color: var(--rz-primary);
    transform: translateY(-1px);
}

.central-image-picker__tile--current[b-2y16hrkl7l] {
    border-color: var(--rz-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rz-primary) 22%, transparent);
}

.central-image-picker__tile-thumb[b-2y16hrkl7l] {
    aspect-ratio: 1;
    background: var(--rz-base-100);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.central-image-picker__tile-thumb img[b-2y16hrkl7l] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.central-image-picker__tile-title[b-2y16hrkl7l] {
    font-size: 11px;
    color: var(--rz-text-color);
    padding: 0 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.central-image-picker__footer[b-2y16hrkl7l] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--rz-border-color);
}

.central-image-picker__footer-spacer[b-2y16hrkl7l] {
    flex: 1;
}

.central-image-picker__btn-clear[b-2y16hrkl7l],
.central-image-picker__btn-cancel[b-2y16hrkl7l] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--rz-border-color);
    border-radius: 6px;
    background: transparent;
    color: var(--rz-text-secondary-color);
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    transition: all 150ms;
}

.central-image-picker__btn-clear:hover[b-2y16hrkl7l] {
    border-color: var(--rz-danger);
    color: var(--rz-danger);
    background: color-mix(in srgb, var(--rz-danger) 8%, transparent);
}

.central-image-picker__btn-cancel:hover[b-2y16hrkl7l] {
    border-color: var(--rz-text-color);
    color: var(--rz-text-color);
}
/* /Components/Pages/Admin/Product/LensConfigurator/Components/ConfiguratorFlowBuilder.razor.rz.scp.css */
.flow-builder[b-0655q6omg9] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
    overflow: hidden;
}

/* ── Toolbar ── */
.flow-builder__toolbar[b-0655q6omg9] {
    background: var(--rz-base-background-color);
    border-bottom: 1px solid var(--rz-border-color);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.flow-builder__toolbar-left[b-0655q6omg9] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.flow-builder__toolbar-right[b-0655q6omg9] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.flow-builder__title[b-0655q6omg9] {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.flow-builder__status[b-0655q6omg9] {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
}

.flow-builder__status--active[b-0655q6omg9] {
    background: color-mix(in srgb, var(--rz-success) 12%, transparent);
    color: var(--rz-success);
}

.flow-builder__status--inactive[b-0655q6omg9] {
    background: rgba(156, 163, 168, 0.12);
    color: #9CA3A8;
}

/* ── Breadcrumbs ── */
.flow-builder__breadcrumbs[b-0655q6omg9] {
    background: var(--rz-base-background-color);
    border-bottom: 1px solid var(--rz-border-color);
    padding: 10px 24px;
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    overflow-x: auto;
}

.flow-builder__breadcrumb-arrow[b-0655q6omg9] {
    color: var(--rz-text-disabled-color);
    font-size: 16px;
    margin: 0 4px;
}

.flow-builder__breadcrumb-chip[b-0655q6omg9] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 200ms ease;
    border: none;
    white-space: nowrap;
}

.flow-builder__breadcrumb-chip--done[b-0655q6omg9] {
    background: var(--rz-primary);
    color: white;
}

.flow-builder__breadcrumb-chip--done:hover[b-0655q6omg9] {
    background: var(--rz-primary-dark);
}

.flow-builder__breadcrumb-chip--active[b-0655q6omg9] {
    background: var(--rz-base-200);
    color: var(--rz-text-color);
    border: 2px solid var(--rz-primary);
}

.flow-builder__breadcrumb-option[b-0655q6omg9] {
    font-weight: 400;
    opacity: 0.8;
}

/* ── Content layout ── */
.flow-builder__content[b-0655q6omg9] {
    display: grid;
    grid-template-columns: 1fr 300px;
    flex: 1;
    overflow: hidden;
}

.flow-builder__canvas[b-0655q6omg9] {
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.flow-builder__sidebar[b-0655q6omg9] {
    background: var(--rz-base-200);
    border-left: 1px solid var(--rz-border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Sidebar header + tabs ── */
.flow-builder__sidebar-header[b-0655q6omg9] {
    padding: 16px 18px;
    border-bottom: 1px solid var(--rz-border-color);
}

.flow-builder__sidebar-title[b-0655q6omg9] {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 10px;
}

.flow-builder__sidebar-tabs[b-0655q6omg9] {
    display: flex;
    gap: 0;
    border-radius: 6px;
    background: var(--rz-base-300, #e5e3e0);
    padding: 3px;
}

.flow-builder__sidebar-tab[b-0655q6omg9] {
    flex: 1;
    padding: 6px 12px;
    border-radius: 4px;
    border: none;
    background: none;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 200ms ease;
    color: var(--rz-text-secondary-color);
    font-family: inherit;
}

.flow-builder__sidebar-tab:hover[b-0655q6omg9] {
    color: var(--rz-text-color);
}

.flow-builder__sidebar-tab--active[b-0655q6omg9] {
    background: var(--rz-base-background-color);
    color: var(--rz-text-color);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.flow-builder__sidebar-body[b-0655q6omg9] {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
}

/* ── Library section titles ── */
.flow-builder__lib-section[b-0655q6omg9] {
    margin-bottom: 18px;
}

.flow-builder__lib-section-title[b-0655q6omg9] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--rz-text-disabled-color);
    margin-bottom: 8px;
    padding: 0 4px;
}

/* ── Library cards ── */
.flow-builder__lib-card[b-0655q6omg9] {
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 200ms ease;
    position: relative;
}

.flow-builder__lib-card:hover[b-0655q6omg9] {
    border-color: var(--rz-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transform: translateX(-2px);
}

.flow-builder__lib-card:active[b-0655q6omg9] {
    transform: scale(0.98);
}

.flow-builder__lib-card-header[b-0655q6omg9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.flow-builder__lib-card-name[b-0655q6omg9] {
    font-size: 13px;
    font-weight: 600;
}

.flow-builder__lib-card-count[b-0655q6omg9] {
    font-size: 10px;
    color: var(--rz-text-disabled-color);
    background: var(--rz-base-200);
    padding: 2px 6px;
    border-radius: 8px;
}

/* ── Option preview dots ── */
.flow-builder__lib-card-dots[b-0655q6omg9] {
    display: flex;
    gap: 4px;
}

.flow-builder__lib-card-dot[b-0655q6omg9] {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flow-builder__lib-card-dot--goed[b-0655q6omg9] {
    background: #E0F2F4;
}

.flow-builder__lib-card-dot--beter[b-0655q6omg9] {
    background: #E0EEF0;
}

.flow-builder__lib-card-dot--best[b-0655q6omg9] {
    background: #FFF8E1;
}

.flow-builder__lib-card-dot-label[b-0655q6omg9] {
    font-size: 8px;
    font-weight: 700;
    color: var(--rz-text-secondary-color);
}

.flow-builder__lib-card-desc[b-0655q6omg9] {
    font-size: 11px;
    color: var(--rz-text-secondary-color);
    margin-top: 6px;
}

/* ── Hover overlay ("Gebruik" button) ── */
.flow-builder__lib-card-overlay[b-0655q6omg9] {
    display: none;
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--rz-primary) 8%, transparent);
    border: 2px solid var(--rz-primary);
    border-radius: 6px;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--rz-primary);
    cursor: pointer;
    z-index: 1;
}

.flow-builder__lib-card:hover .flow-builder__lib-card-overlay[b-0655q6omg9] {
    display: flex;
}

/* ── Delete button on user template cards ── */
.flow-builder__lib-card-delete[b-0655q6omg9] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border: none;
    background: none;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 2;
    color: var(--rz-text-disabled-color);
    transition: all 200ms ease;
}

.flow-builder__lib-card-delete:hover[b-0655q6omg9] {
    background: color-mix(in srgb, var(--rz-danger) 12%, transparent);
    color: var(--rz-danger);
}

[b-0655q6omg9] .flow-builder__lib-card-delete .rzi {
    font-size: 14px;
}

.flow-builder__lib-card:hover .flow-builder__lib-card-delete[b-0655q6omg9] {
    display: flex;
}

/* ── Empty state for Mijn kaarten ── */
.flow-builder__lib-empty[b-0655q6omg9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 2rem 1rem;
    color: var(--rz-text-disabled-color);
}

[b-0655q6omg9] .flow-builder__lib-empty .rzi {
    font-size: 40px;
}

.flow-builder__lib-empty-hint[b-0655q6omg9] {
    font-size: 11px;
    line-height: 1.5;
}

/* ── Empty state ── */
.flow-builder__empty[b-0655q6omg9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 4rem;
    flex: 1;
}

/* ── Loading ── */
.flow-builder__loading[b-0655q6omg9] {
    display: flex;
    justify-content: center;
    padding: 4rem;
}

/* ── Breadcrumb check icon ── */
.flow-builder__breadcrumb-check[b-0655q6omg9] {
    font-size: 14px;
}

/* ── Empty state icon ── */
.flow-builder__empty-icon[b-0655q6omg9] {
    font-size: 64px;
    color: var(--rz-text-disabled-color);
}

/* ── Validation bar ── */
.flow-builder__validation-bar[b-0655q6omg9] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    margin-top: auto;
    flex-shrink: 0;
}

.flow-builder__validation-bar--ok[b-0655q6omg9] {
    background: color-mix(in srgb, var(--rz-success) 8%, transparent);
    color: var(--rz-success);
}

.flow-builder__validation-bar--warning[b-0655q6omg9] {
    background: color-mix(in srgb, var(--rz-warning) 8%, transparent);
    color: var(--rz-warning);
}

/* ── Template selection state ── */
.flow-builder__lib-card--selected[b-0655q6omg9] {
    border-color: var(--rz-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--rz-primary) 30%, transparent);
    background: color-mix(in srgb, var(--rz-primary) 6%, transparent);
}

.flow-builder__lib-card--selected .flow-builder__lib-card-overlay[b-0655q6omg9] {
    display: flex;
    background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
    border-color: var(--rz-primary);
}

/* ── Selection indicator bar ── */
.flow-builder__lib-selection-bar[b-0655q6omg9] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: color-mix(in srgb, var(--rz-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--rz-primary) 30%, transparent);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--rz-primary);
    line-height: 1.4;
}

[b-0655q6omg9] .flow-builder__lib-selection-bar .rzi {
    font-size: 16px;
    flex-shrink: 0;
}

.flow-builder__lib-selection-cancel[b-0655q6omg9] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    background: none;
    border: 1px solid var(--rz-primary);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--rz-primary);
    cursor: pointer;
    transition: all 200ms ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.flow-builder__lib-selection-cancel:hover[b-0655q6omg9] {
    background: var(--rz-primary);
    color: white;
}

[b-0655q6omg9] .flow-builder__lib-selection-cancel .rzi {
    font-size: 14px;
}
/* /Components/Pages/Admin/Product/LensConfigurator/Components/ConfiguratorPreviewDrawer.razor.rz.scp.css */
.configurator-preview-drawer[b-y3fjw3wn3t] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

.configurator-preview-drawer__banner[b-y3fjw3wn3t] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    color: var(--rz-info);
    background: color-mix(in srgb, var(--rz-info) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--rz-info) 22%, transparent);
}
/* /Components/Pages/Admin/Product/LensConfigurator/Components/EndpointManageDrawer.razor.rz.scp.css */
.endpoint-manage-drawer[b-32l67rts2a] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.endpoint-manage-drawer__empty[b-32l67rts2a] {
    padding: 40px;
    text-align: center;
    color: var(--rz-text-secondary-color);
}

.endpoint-manage-drawer__route[b-32l67rts2a] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--rz-primary) 6%, transparent);
    border-radius: 6px;
}

.endpoint-manage-drawer__route-chip[b-32l67rts2a] {
    padding: 3px 10px;
    border-radius: 11px;
    background: var(--rz-base-background-color);
    font-size: 13px;
    font-weight: 500;
}

.endpoint-manage-drawer__route-chevron[b-32l67rts2a] {
    color: var(--rz-text-secondary-color);
    font-size: 16px;
}

.endpoint-manage-drawer__must-choose[b-32l67rts2a] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--rz-primary) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--rz-primary) 16%, transparent);
}

.endpoint-manage-drawer__must-choose-title[b-32l67rts2a] {
    font-size: 13px;
    font-weight: 600;
}

.endpoint-manage-drawer__must-choose-hint[b-32l67rts2a] {
    font-size: 12px;
    color: var(--rz-text-secondary-color);
    margin-top: 2px;
}

.endpoint-manage-drawer__section[b-32l67rts2a] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px dashed var(--rz-border-color);
}

.endpoint-manage-drawer__section-title[b-32l67rts2a] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.endpoint-manage-drawer__details-hint[b-32l67rts2a] {
    font-size: 12px;
    color: var(--rz-text-secondary-color);
}

.endpoint-manage-drawer__details[b-32l67rts2a] {
    display: grid;
    grid-template-columns: 2fr 1fr auto;
    gap: 12px;
    align-items: end;
}

.endpoint-manage-drawer__details-price[b-32l67rts2a] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.endpoint-manage-drawer__details-price label[b-32l67rts2a] {
    font-size: 12px;
    color: var(--rz-text-secondary-color);
}

.endpoint-manage-drawer__details-actions[b-32l67rts2a] {
    display: flex;
    align-items: end;
}

.endpoint-manage-drawer__binding[b-32l67rts2a] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--rz-border-color);
    border-radius: 6px;
    background: var(--rz-base-background-color);
}

.endpoint-manage-drawer__binding-priority[b-32l67rts2a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 44px;
}

.endpoint-manage-drawer__priority-num[b-32l67rts2a] {
    font-size: 15px;
    font-weight: 700;
    color: var(--rz-primary);
}

.endpoint-manage-drawer__binding-body[b-32l67rts2a] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.endpoint-manage-drawer__binding-header[b-32l67rts2a] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.endpoint-manage-drawer__binding-name[b-32l67rts2a] {
    font-size: 14px;
    font-weight: 600;
}

.endpoint-manage-drawer__binding-source[b-32l67rts2a] {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.endpoint-manage-drawer__binding-source--sf6[b-32l67rts2a] {
    background: color-mix(in srgb, var(--rz-info) 14%, transparent);
    color: var(--rz-info);
}

.endpoint-manage-drawer__binding-source--own[b-32l67rts2a] {
    background: color-mix(in srgb, var(--rz-warning) 14%, transparent);
    color: var(--rz-warning);
}

.endpoint-manage-drawer__items-badge[b-32l67rts2a] {
    padding: 2px 8px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--rz-primary) 14%, transparent);
    color: var(--rz-primary);
    font-size: 11px;
    font-weight: 600;
}

.endpoint-manage-drawer__items-list[b-32l67rts2a] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.endpoint-manage-drawer__item-chip[b-32l67rts2a] {
    padding: 2px 6px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--rz-text-secondary-color) 8%, transparent);
    font-size: 11px;
    color: var(--rz-text-secondary-color);
}

.endpoint-manage-drawer__limits[b-32l67rts2a] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
}

.endpoint-manage-drawer__limit[b-32l67rts2a] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 90px;
}

.endpoint-manage-drawer__limit label[b-32l67rts2a] {
    font-size: 11px;
    color: var(--rz-text-secondary-color);
}

.endpoint-manage-drawer__binding-actions[b-32l67rts2a] {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.endpoint-manage-drawer__mode[b-32l67rts2a] {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: color-mix(in srgb, var(--rz-text-secondary-color) 8%, transparent);
    border-radius: 8px;
    width: fit-content;
}

.endpoint-manage-drawer__mode-tab[b-32l67rts2a] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--rz-text-secondary-color);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.endpoint-manage-drawer__mode-tab--active[b-32l67rts2a] {
    background: var(--rz-base-background-color);
    color: var(--rz-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.endpoint-manage-drawer__sf6-picker[b-32l67rts2a] {
    padding: 12px;
    border: 1px solid var(--rz-border-color);
    border-radius: 6px;
    background: var(--rz-base-background-color);
}

.endpoint-manage-drawer__saving[b-32l67rts2a] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 24px;
    color: var(--rz-text-secondary-color);
    font-size: 13px;
}

.endpoint-manage-drawer__tenant-search[b-32l67rts2a] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.endpoint-manage-drawer__search-results[b-32l67rts2a] {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--rz-border-color);
    border-radius: 6px;
}

.endpoint-manage-drawer__search-result[b-32l67rts2a] {
    display: flex;
    width: 100%;
    gap: 12px;
    align-items: center;
    padding: 8px 12px;
    border: none;
    border-bottom: 1px solid var(--rz-border-color);
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    text-align: left;
}

.endpoint-manage-drawer__search-result:last-child[b-32l67rts2a] {
    border-bottom: none;
}

.endpoint-manage-drawer__search-result:hover[b-32l67rts2a] {
    background: color-mix(in srgb, var(--rz-primary) 6%, transparent);
}

.endpoint-manage-drawer__search-result--selected[b-32l67rts2a] {
    background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
    font-weight: 600;
}

.endpoint-manage-drawer__search-sku[b-32l67rts2a] {
    font-size: 11px;
    font-family: monospace;
    color: var(--rz-text-secondary-color);
    margin-left: auto;
}

.endpoint-manage-drawer__search-empty[b-32l67rts2a] {
    padding: 12px;
    text-align: center;
    color: var(--rz-text-secondary-color);
    font-style: italic;
    font-size: 13px;
}

.endpoint-manage-drawer__new-binding[b-32l67rts2a] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--rz-primary) 4%, transparent);
}

.endpoint-manage-drawer__new-binding-header[b-32l67rts2a] {
    font-size: 13px;
}

.endpoint-manage-drawer__meta[b-32l67rts2a] {
    font-size: 12px;
    color: var(--rz-text-secondary-color);
}
/* /Components/Pages/Admin/Product/LensConfigurator/Components/EndpointsOverview.razor.rz.scp.css */
.endpoints-overview[b-wcffjqtisa] {
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
}

.endpoints-overview__header[b-wcffjqtisa] {
    margin-bottom: 20px;
}

.endpoints-overview__count-badge[b-wcffjqtisa] {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
}

.endpoints-overview__count-badge--ok[b-wcffjqtisa] {
    background: color-mix(in srgb, var(--rz-success) 12%, transparent);
    color: var(--rz-success);
}

.endpoints-overview__count-badge--warning[b-wcffjqtisa] {
    background: color-mix(in srgb, var(--rz-warning) 12%, transparent);
    color: var(--rz-warning);
}

.endpoints-overview__route-chip[b-wcffjqtisa] {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--rz-base-200);
    white-space: nowrap;
}

.endpoints-overview__route-chevron[b-wcffjqtisa] {
    font-size: 14px;
    color: var(--rz-text-disabled-color);
}

.endpoints-overview__search-field[b-wcffjqtisa] {
    width: 250px;
}

.endpoints-overview__unlinked-label[b-wcffjqtisa] {
    color: var(--rz-warning);
    font-style: italic;
}

.endpoints-overview__status-icon--ok[b-wcffjqtisa] {
    color: var(--rz-success);
}

.endpoints-overview__status-icon--warning[b-wcffjqtisa] {
    color: var(--rz-warning);
}

.endpoints-overview__link-btn[b-wcffjqtisa] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.endpoints-overview__link-field[b-wcffjqtisa] {
    width: 200px;
}
/* /Components/Pages/Admin/Product/LensConfigurator/Components/ImagePicker.razor.rz.scp.css */
/* ── Preview (closed state) ── */
.image-picker__preview[b-fyrplticwf] {
    width: 100%;
    height: 100px;
    background: linear-gradient(135deg, #E0F2F4, #B2DFE6);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}

.image-picker__preview-img[b-fyrplticwf] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-picker__preview-placeholder[b-fyrplticwf] {
    font-size: 36px;
    opacity: 0.4;
    color: var(--rz-text-disabled-color);
}

.image-picker__preview-overlay[b-fyrplticwf] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 200ms ease;
    color: white;
}

.image-picker__preview:hover .image-picker__preview-overlay[b-fyrplticwf] {
    opacity: 1;
}

[b-fyrplticwf] .image-picker__preview-overlay .rzi {
    font-size: 28px;
}

/* ── Panel (open state) ── */
.image-picker__panel[b-fyrplticwf] {
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 0;
    overflow: hidden;
}

.image-picker__header[b-fyrplticwf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    border-bottom: 1px solid var(--rz-border-color);
    background: var(--rz-surface-color, #f8f9fa);
}

.image-picker__tabs[b-fyrplticwf] {
    display: flex;
    gap: 2px;
}

.image-picker__tab[b-fyrplticwf] {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 4px;
    color: var(--rz-text-secondary-color);
    transition: all 150ms ease;
}

.image-picker__tab:hover[b-fyrplticwf] {
    background: rgba(0, 0, 0, 0.04);
}

.image-picker__tab--active[b-fyrplticwf] {
    background: var(--rz-primary);
    color: white;
}

.image-picker__close[b-fyrplticwf] {
    border: none;
    background: none;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    color: var(--rz-text-secondary-color);
}

.image-picker__close:hover[b-fyrplticwf] {
    background: rgba(0, 0, 0, 0.08);
}

[b-fyrplticwf] .image-picker__close .rzi {
    font-size: 18px;
}

/* ── Loading ── */
.image-picker__loading[b-fyrplticwf] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* ── Category bar ── */
.image-picker__category-bar[b-fyrplticwf] {
    display: flex;
    gap: 4px;
    padding: 6px 8px;
    overflow-x: auto;
    border-bottom: 1px solid var(--rz-border-color);
}

.image-picker__category[b-fyrplticwf] {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border: 1px solid var(--rz-border-color);
    border-radius: 12px;
    background: none;
    cursor: pointer;
    white-space: nowrap;
    color: var(--rz-text-secondary-color);
    transition: all 150ms ease;
}

.image-picker__category:hover[b-fyrplticwf] {
    border-color: var(--rz-primary);
    color: var(--rz-primary);
}

.image-picker__category--active[b-fyrplticwf] {
    background: var(--rz-primary);
    border-color: var(--rz-primary);
    color: white;
}

/* ── Thumbnail grid ── */
.image-picker__grid[b-fyrplticwf] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.image-picker__thumb[b-fyrplticwf] {
    aspect-ratio: 1;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    position: relative;
    transition: border-color 150ms ease;
    background: var(--rz-surface-color, #f0f0f0);
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-picker__thumb:hover[b-fyrplticwf] {
    border-color: var(--rz-primary);
}

.image-picker__thumb--selected[b-fyrplticwf] {
    border-color: var(--rz-primary);
}

.image-picker__thumb img[b-fyrplticwf] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

[b-fyrplticwf] .image-picker__thumb .rzi {
    font-size: 24px;
    color: var(--rz-text-disabled-color);
}

.image-picker__thumb-check[b-fyrplticwf] {
    position: absolute;
    bottom: 2px;
    right: 2px;
    color: var(--rz-primary);
    background: white;
    border-radius: 50%;
    display: flex;
}

[b-fyrplticwf] .image-picker__thumb-check .rzi {
    font-size: 16px;
    color: var(--rz-primary);
}

/* ── Upload thumb ── */
.image-picker__upload-thumb[b-fyrplticwf] {
    aspect-ratio: 1;
    border-radius: 6px;
    border: 2px dashed var(--rz-border-color);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    position: relative;
    transition: border-color 150ms ease;
    color: var(--rz-text-secondary-color);
    font-size: 10px;
    font-weight: 600;
}

.image-picker__upload-thumb:hover[b-fyrplticwf] {
    border-color: var(--rz-primary);
    color: var(--rz-primary);
}

[b-fyrplticwf] .image-picker__upload-thumb .rzi {
    font-size: 20px;
}

.image-picker__file-input[b-fyrplticwf] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* ── Empty state ── */
.image-picker__empty[b-fyrplticwf] {
    grid-column: 1 / -1;
    text-align: center;
    padding: 16px;
    font-size: 12px;
    color: var(--rz-text-secondary-color);
}

/* ── Actions ── */
.image-picker__actions[b-fyrplticwf] {
    padding: 4px 8px 6px;
    border-top: 1px solid var(--rz-border-color);
}

.image-picker__remove-btn[b-fyrplticwf] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--rz-danger);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background 150ms ease;
}

.image-picker__remove-btn:hover[b-fyrplticwf] {
    background: rgba(var(--rz-danger-rgb, 244, 67, 54), 0.08);
}

[b-fyrplticwf] .image-picker__remove-btn .rzi {
    font-size: 16px;
}
/* /Components/Pages/Admin/Product/LensConfigurator/Components/StepEditor.razor.rz.scp.css */
.step-editor[b-auujwkmxmp] {
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
}

.step-editor__header[b-auujwkmxmp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.step-editor__header-left[b-auujwkmxmp] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.step-editor__header-right[b-auujwkmxmp] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-editor__title[b-auujwkmxmp] {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.step-editor__condition[b-auujwkmxmp] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 6px;
    font-size: 12px;
    color: var(--rz-text-secondary-color);
}

[b-auujwkmxmp] .step-editor__condition .rzi {
    font-size: 16px;
    color: var(--rz-primary);
}

.step-editor__badge[b-auujwkmxmp] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 10px;
}

[b-auujwkmxmp] .step-editor__badge .rzi {
    font-size: 14px;
}

.step-editor__badge--ok[b-auujwkmxmp] {
    background: color-mix(in srgb, var(--rz-success) 12%, transparent);
    color: var(--rz-success);
}

.step-editor__badge--warning[b-auujwkmxmp] {
    background: color-mix(in srgb, var(--rz-warning) 12%, transparent);
    color: var(--rz-warning);
}

.step-editor__badge--neutral[b-auujwkmxmp] {
    background: rgba(156, 163, 168, 0.12);
    color: #9CA3A8;
}

/* ── Options grid ── */
.step-editor__options-grid[b-auujwkmxmp] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

/* ── Option column (card + drop-zone) ── */
.step-editor__option-column[b-auujwkmxmp] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Add card ── */
.step-editor__add-card[b-auujwkmxmp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 200px;
    border: 2px dashed var(--rz-border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all 200ms ease;
    color: var(--rz-text-disabled-color);
}

.step-editor__add-card:hover[b-auujwkmxmp] {
    border-color: var(--rz-primary);
    color: var(--rz-primary);
    background: rgba(32, 139, 170, 0.04);
}

[b-auujwkmxmp] .step-editor__add-card .rzi {
    font-size: 36px;
}

/* ── Drop-zone (empty, no template selected) ── */
.step-editor__drop-zone[b-auujwkmxmp] {
    border: 2px dashed var(--rz-base-400);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    color: var(--rz-text-disabled-color);
    cursor: default;
    transition: all 200ms ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-height: 64px;
    justify-content: center;
}

[b-auujwkmxmp] .step-editor__drop-zone .rzi {
    font-size: 22px;
}

.step-editor__drop-zone span:last-child[b-auujwkmxmp] {
    font-size: 12px;
}

/* Drop-zone when template is selected (ready to receive) */
.step-editor__drop-zone--ready[b-auujwkmxmp] {
    border-color: var(--rz-primary);
    color: var(--rz-primary);
    cursor: pointer;
    background: color-mix(in srgb, var(--rz-primary) 6%, transparent);
    animation: step-editor-pulse-b-auujwkmxmp 2s ease-in-out infinite;
}

.step-editor__drop-zone--ready:hover[b-auujwkmxmp] {
    background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
    border-style: solid;
}

@keyframes step-editor-pulse-b-auujwkmxmp {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ── Linked step card ── */
.step-editor__linked-step[b-auujwkmxmp] {
    border: 1px solid var(--rz-base-300);
    border-radius: 8px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 200ms ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--rz-base-background-color);
}

.step-editor__linked-step:hover[b-auujwkmxmp] {
    border-color: var(--rz-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.step-editor__linked-step-info[b-auujwkmxmp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.step-editor__linked-step-title[b-auujwkmxmp] {
    font-size: 13px;
    font-weight: 600;
    color: var(--rz-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.step-editor__linked-step-count[b-auujwkmxmp] {
    font-size: 11px;
    color: var(--rz-text-secondary-color);
}

.step-editor__linked-step-actions[b-auujwkmxmp] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.step-editor__linked-step-go[b-auujwkmxmp] {
    font-size: 18px;
    color: var(--rz-primary);
    transition: transform 200ms ease;
}

.step-editor__linked-step:hover .step-editor__linked-step-go[b-auujwkmxmp] {
    transform: translateX(2px);
}

.step-editor__linked-step-unlink[b-auujwkmxmp] {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 200ms ease;
    color: var(--rz-text-secondary-color);
}

.step-editor__linked-step:hover .step-editor__linked-step-unlink[b-auujwkmxmp] {
    opacity: 1;
}

.step-editor__linked-step-unlink:hover[b-auujwkmxmp] {
    background: color-mix(in srgb, var(--rz-danger) 12%, transparent);
    color: var(--rz-danger);
}

[b-auujwkmxmp] .step-editor__linked-step-unlink .rzi {
    font-size: 16px;
}

/* ── Endpoint badge ── */
.step-editor__endpoint-badge[b-auujwkmxmp] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--rz-success) 8%, transparent);
    color: var(--rz-success);
    font-size: 12px;
    font-weight: 600;
}

[b-auujwkmxmp] .step-editor__endpoint-badge .rzi {
    font-size: 16px;
}

/* ── Link all (secondary, collapsible) ── */
.step-editor__link-all-details[b-auujwkmxmp] {
    margin-bottom: 16px;
}

.step-editor__link-all-summary[b-auujwkmxmp] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--rz-text-secondary-color);
    cursor: pointer;
    padding: 8px 0;
    list-style: none;
    user-select: none;
}

.step-editor__link-all-summary[b-auujwkmxmp]::-webkit-details-marker {
    display: none;
}

[b-auujwkmxmp] .step-editor__link-all-summary .rzi {
    font-size: 16px;
}

.step-editor__link-all-summary:hover[b-auujwkmxmp] {
    color: var(--rz-primary);
}

.step-editor__link-all-content[b-auujwkmxmp] {
    padding-top: 8px;
}

/* ── Link dropdown ── */
.step-editor__link-dropdown[b-auujwkmxmp] {
    width: 250px;
}

/* ── Upsell section ── */
.step-editor__upsell-section[b-auujwkmxmp] {
    margin-top: 24px;
}
/* /Components/Pages/Admin/Product/LensConfigurator/ConfiguratorBuilder.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════
   ConfiguratorBuilder v3 — Integrated step editor + tree + library drawer
   ══════════════════════════════════════════════════════ */

.configurator-builder[b-fm32yjqqg3] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
    overflow: hidden;
}

/* ── Loading ── */
.configurator-builder__loading[b-fm32yjqqg3] {
    display: flex;
    justify-content: center;
    padding: 4rem;
}

/* ── Toolbar ── */
.configurator-builder__toolbar[b-fm32yjqqg3] {
    background: var(--rz-base-background-color);
    border-bottom: 1px solid var(--rz-border-color);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.configurator-builder__toolbar-left[b-fm32yjqqg3] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.configurator-builder__title[b-fm32yjqqg3] {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: var(--rz-text-color);
}

.configurator-builder__status[b-fm32yjqqg3] {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
}

.configurator-builder__status--active[b-fm32yjqqg3] {
    background: color-mix(in srgb, var(--rz-success) 12%, transparent);
    color: var(--rz-success);
}

.configurator-builder__status--inactive[b-fm32yjqqg3] {
    background: color-mix(in srgb, var(--rz-text-secondary-color) 12%, transparent);
    color: var(--rz-text-secondary-color);
}

/* ── Breadcrumbs ── */
.configurator-builder__breadcrumbs[b-fm32yjqqg3] {
    background: var(--rz-base-background-color);
    border-bottom: 1px solid var(--rz-border-color);
    padding: 10px 24px;
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    overflow-x: auto;
}

[b-fm32yjqqg3] .configurator-builder__breadcrumb-arrow {
    color: var(--rz-text-disabled-color);
    font-size: 16px;
    margin: 0 4px;
}

.configurator-builder__breadcrumb-chip[b-fm32yjqqg3] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 200ms ease;
    border: none;
    white-space: nowrap;
    font-family: inherit;
}

.configurator-builder__breadcrumb-chip--done[b-fm32yjqqg3] {
    background: var(--rz-primary);
    color: white;
}

.configurator-builder__breadcrumb-chip--done:hover[b-fm32yjqqg3] {
    background: var(--rz-primary-dark);
}

.configurator-builder__breadcrumb-chip--active[b-fm32yjqqg3] {
    background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
    color: var(--rz-primary);
    border: 2px solid var(--rz-primary);
}

/* ── Content Split Layout ── */
.configurator-builder__content[b-fm32yjqqg3] {
    display: grid;
    grid-template-columns: 1fr 300px;
    flex: 1;
    overflow: hidden;
}

/* ── Left: Step Editor ── */
.configurator-builder__editor[b-fm32yjqqg3] {
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Step Header ── */
.configurator-builder__step-header[b-fm32yjqqg3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.configurator-builder__step-header-row[b-fm32yjqqg3] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.configurator-builder__step-header-edit[b-fm32yjqqg3] {
    min-width: 200px;
    max-width: 300px;
}

.configurator-builder__step-header-edit--category[b-fm32yjqqg3] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 220px;
}

.configurator-builder__step-header-edit--wide[b-fm32yjqqg3] {
    flex: 1;
    min-width: 300px;
}

.configurator-builder__step-header-confirm[b-fm32yjqqg3],
.configurator-builder__step-header-cancel[b-fm32yjqqg3] {
    background: none;
    border: 1px solid var(--rz-border-color);
    border-radius: 4px;
    padding: 4px;
    cursor: pointer;
    color: var(--rz-text-secondary-color);
    display: flex;
    align-items: center;
    transition: all 150ms ease;
}

.configurator-builder__step-header-confirm:hover[b-fm32yjqqg3] {
    color: var(--rz-success);
    border-color: var(--rz-success);
}

.configurator-builder__step-header-cancel:hover[b-fm32yjqqg3] {
    color: var(--rz-danger);
    border-color: var(--rz-danger);
}

.configurator-builder__step-title[b-fm32yjqqg3] {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: var(--rz-text-color);
}

.configurator-builder__step-title--editable[b-fm32yjqqg3] {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.configurator-builder__step-title--editable:hover[b-fm32yjqqg3]  .configurator-builder__inline-edit-icon {
    opacity: 1;
}

[b-fm32yjqqg3] .configurator-builder__inline-edit-icon {
    font-size: 14px;
    color: var(--rz-text-disabled-color);
    opacity: 0;
    transition: opacity 200ms ease;
}

.configurator-builder__step-category-chip[b-fm32yjqqg3] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 200ms ease;
    border: 1px solid color-mix(in srgb, var(--rz-text-secondary-color) 25%, transparent);
    background: color-mix(in srgb, var(--rz-text-secondary-color) 10%, transparent);
    color: var(--rz-text-secondary-color);
    font-family: inherit;
}

.configurator-builder__step-category-chip:hover[b-fm32yjqqg3] {
    border-color: var(--rz-primary);
}

.configurator-builder__step-category-chip:hover[b-fm32yjqqg3]  .configurator-builder__inline-edit-icon {
    opacity: 1;
}

.configurator-builder__step-category-chip--empty[b-fm32yjqqg3] {
    color: var(--rz-text-disabled-color);
    font-style: italic;
}

.configurator-builder__step-ref-badge[b-fm32yjqqg3] {
    font-size: 11px;
    font-weight: 600;
    color: var(--rz-info);
    background: color-mix(in srgb, var(--rz-info) 10%, transparent);
    padding: 3px 10px;
    border-radius: 10px;
}

.configurator-builder__step-description-row[b-fm32yjqqg3] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.configurator-builder__step-desc[b-fm32yjqqg3] {
    font-size: 13px;
    color: var(--rz-text-secondary-color);
    margin: 0;
}

.configurator-builder__step-desc--editable[b-fm32yjqqg3] {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.configurator-builder__step-desc--editable:hover[b-fm32yjqqg3]  .configurator-builder__inline-edit-icon {
    opacity: 1;
}

/* ── Options Grid ── */
.configurator-builder__options-grid[b-fm32yjqqg3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

/* ── Option Card ── */
.configurator-builder__option-card[b-fm32yjqqg3] {
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    transition: all 200ms ease;
}

.configurator-builder__option-card:hover[b-fm32yjqqg3] {
    border-color: var(--rz-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ── Add Option Card (dashed) ── */
.configurator-builder__option-card--add[b-fm32yjqqg3] {
    border-style: dashed;
    border-color: var(--rz-text-disabled-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 200px;
    cursor: pointer;
    color: var(--rz-text-disabled-color);
    transition: all 200ms ease;
}

.configurator-builder__option-card--add:hover[b-fm32yjqqg3] {
    border-color: var(--rz-primary);
    color: var(--rz-primary);
    background: color-mix(in srgb, var(--rz-primary) 4%, transparent);
}

[b-fm32yjqqg3] .configurator-builder__add-icon {
    font-size: 36px;
}

.configurator-builder__add-label[b-fm32yjqqg3] {
    font-size: 13px;
    font-weight: 600;
}

/* ── Edit/Delete button (top-right) ── */
.configurator-builder__option-edit-btn[b-fm32yjqqg3] {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--rz-text-disabled-color);
    transition: all 200ms ease;
}

.configurator-builder__option-edit-btn:hover[b-fm32yjqqg3] {
    background: color-mix(in srgb, var(--rz-danger) 12%, transparent);
    color: var(--rz-danger);
}

.configurator-builder__option-card:hover .configurator-builder__option-edit-btn[b-fm32yjqqg3] {
    display: flex;
}

[b-fm32yjqqg3] .configurator-builder__option-edit-btn .rzi {
    font-size: 16px;
}

/* ── Option Image ── */
.configurator-builder__option-image[b-fm32yjqqg3] {
    width: 100%;
    height: 100px;
    border-radius: 6px;
    background: var(--rz-base-200);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}


/* ── Editable fields ── */
.configurator-builder__option-field[b-fm32yjqqg3] {
    min-height: 24px;
}

.configurator-builder__option-title[b-fm32yjqqg3] {
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--rz-text-color);
}

.configurator-builder__option-title:hover[b-fm32yjqqg3]  .configurator-builder__inline-edit-icon {
    opacity: 1;
}

/* ── Description ── */
.configurator-builder__option-description[b-fm32yjqqg3] {
    font-size: 12px;
    color: var(--rz-text-secondary-color);
    cursor: pointer;
    display: block;
    line-height: 1.35;
    white-space: pre-wrap;
    word-break: break-word;
    padding: 4px 0;
    border-top: 1px dashed transparent;
    border-bottom: 1px dashed transparent;
}

.configurator-builder__option-description:hover[b-fm32yjqqg3] {
    border-top-color: var(--rz-border-color);
    border-bottom-color: var(--rz-border-color);
}

.configurator-builder__option-description:hover[b-fm32yjqqg3]  .configurator-builder__inline-edit-icon {
    opacity: 1;
}

/* ── Usage-root banner ── */
.configurator-builder__usage-banner[b-fm32yjqqg3] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin: 0 0 16px 0;
    border-radius: 8px;
    font-size: 12px;
    color: var(--rz-info);
    background: color-mix(in srgb, var(--rz-info) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--rz-info) 22%, transparent);
}

/* ── Features ── */
.configurator-builder__option-features[b-fm32yjqqg3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 0;
}

.configurator-builder__option-feature[b-fm32yjqqg3] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 12px;
    transition: background-color 0.15s, border-color 0.15s;
}

.configurator-builder__option-feature--included[b-fm32yjqqg3] {
    background: color-mix(in srgb, var(--rz-success) 10%, transparent);
    border-color: color-mix(in srgb, var(--rz-success) 22%, transparent);
}

.configurator-builder__option-feature--included .configurator-builder__option-feature-toggle[b-fm32yjqqg3] {
    color: var(--rz-success);
}

.configurator-builder__option-feature--excluded[b-fm32yjqqg3] {
    background: color-mix(in srgb, var(--rz-danger) 8%, transparent);
    border-color: color-mix(in srgb, var(--rz-danger) 20%, transparent);
}

.configurator-builder__option-feature--excluded .configurator-builder__option-feature-toggle[b-fm32yjqqg3] {
    color: var(--rz-danger);
}

.configurator-builder__option-feature--excluded .configurator-builder__option-feature-text[b-fm32yjqqg3] {
    color: var(--rz-text-secondary-color);
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, var(--rz-danger) 50%, transparent);
    text-decoration-thickness: 1px;
}

.configurator-builder__option-feature-toggle[b-fm32yjqqg3] {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 18px;
    line-height: 1;
}

.configurator-builder__option-feature-toggle:hover[b-fm32yjqqg3] {
    opacity: 0.8;
}

.configurator-builder__option-feature-text[b-fm32yjqqg3] {
    flex: 1;
    cursor: pointer;
    color: var(--rz-text-color);
    word-break: break-word;
}

.configurator-builder__option-feature-text:hover[b-fm32yjqqg3] {
    text-decoration: underline;
}

.configurator-builder__option-feature-actions[b-fm32yjqqg3] {
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s;
}

.configurator-builder__option-feature:hover .configurator-builder__option-feature-actions[b-fm32yjqqg3] {
    opacity: 1;
}

.configurator-builder__option-feature-btn[b-fm32yjqqg3] {
    background: transparent;
    border: none;
    padding: 2px 4px;
    cursor: pointer;
    color: var(--rz-text-secondary-color);
    display: flex;
    align-items: center;
    border-radius: 3px;
    font-size: 16px;
    line-height: 1;
}

.configurator-builder__option-feature-btn:hover:not(:disabled)[b-fm32yjqqg3] {
    background: var(--rz-base-200);
    color: var(--rz-text-color);
}

.configurator-builder__option-feature-btn:disabled[b-fm32yjqqg3] {
    opacity: 0.3;
    cursor: not-allowed;
}

.configurator-builder__option-feature-btn--danger:hover:not(:disabled)[b-fm32yjqqg3] {
    background: color-mix(in srgb, var(--rz-danger) 15%, transparent);
    color: var(--rz-danger);
}

.configurator-builder__option-feature-add[b-fm32yjqqg3] {
    display: flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 1px dashed var(--rz-border-color);
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    color: var(--rz-text-secondary-color);
    font-size: 12px;
    align-self: flex-start;
}

.configurator-builder__option-feature-add:hover[b-fm32yjqqg3] {
    border-color: var(--rz-primary);
    color: var(--rz-primary);
}

/* ── Price ── */
.configurator-builder__option-price-area[b-fm32yjqqg3] {
    min-height: 20px;
}

.configurator-builder__option-price[b-fm32yjqqg3] {
    font-size: 12px;
    font-weight: 600;
    color: var(--rz-primary);
    padding: 3px 10px;
    background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--rz-primary) 22%, transparent);
    border-radius: 999px;
    display: inline-block;
    letter-spacing: 0.01em;
}

.configurator-builder__option-price--included[b-fm32yjqqg3] {
    color: var(--rz-success);
    background: color-mix(in srgb, var(--rz-success) 12%, transparent);
    border-color: color-mix(in srgb, var(--rz-success) 24%, transparent);
}

/* ── Action area (bottom of card) ── */
.configurator-builder__option-action[b-fm32yjqqg3] {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--rz-border-color);
}

/* ── Endpoint row ── */
.configurator-builder__option-endpoint-row[b-fm32yjqqg3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.configurator-builder__option-endpoint-badge[b-fm32yjqqg3] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--rz-success);
}

[b-fm32yjqqg3] .configurator-builder__option-endpoint-badge .rzi {
    font-size: 16px;
}

.configurator-builder__option-action-link[b-fm32yjqqg3] {
    font-size: 11px;
    color: var(--rz-text-secondary-color);
    background: none;
    border: 1px solid var(--rz-border-color);
    border-radius: 4px;
    padding: 2px 8px;
    cursor: pointer;
    font-family: inherit;
    transition: all 150ms ease;
}

.configurator-builder__option-action-link:hover[b-fm32yjqqg3] {
    color: var(--rz-primary);
    border-color: var(--rz-primary);
}

/* ── Next step row ── */
.configurator-builder__option-nextstep-row[b-fm32yjqqg3] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.configurator-builder__option-nav-btn[b-fm32yjqqg3] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--rz-primary);
    border-radius: 6px;
    background: color-mix(in srgb, var(--rz-primary) 6%, transparent);
    color: var(--rz-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 200ms ease;
    font-family: inherit;
    justify-content: center;
}

.configurator-builder__option-nav-btn:hover[b-fm32yjqqg3] {
    background: var(--rz-primary);
    color: white;
}

[b-fm32yjqqg3] .configurator-builder__option-nav-btn .rzi {
    font-size: 14px;
}

.configurator-builder__option-nextstep-actions[b-fm32yjqqg3] {
    display: flex;
    gap: 4px;
}

.configurator-builder__option-small-btn[b-fm32yjqqg3] {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border: 1px solid var(--rz-border-color);
    border-radius: 4px;
    background: none;
    color: var(--rz-text-secondary-color);
    font-size: 11px;
    cursor: pointer;
    font-family: inherit;
    transition: all 150ms ease;
    flex: 1;
    justify-content: center;
}

.configurator-builder__option-small-btn:hover[b-fm32yjqqg3] {
    color: var(--rz-primary);
    border-color: var(--rz-primary);
}

.configurator-builder__option-small-btn--danger:hover[b-fm32yjqqg3] {
    color: var(--rz-danger);
    border-color: var(--rz-danger);
}

[b-fm32yjqqg3] .configurator-builder__option-small-btn .rzi {
    font-size: 13px;
}

/* ── Unlinked row (no next step, not endpoint) ── */
.configurator-builder__option-unlinked-row[b-fm32yjqqg3] {
    display: flex;
    gap: 6px;
}

.configurator-builder__option-link-btn[b-fm32yjqqg3] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: 1px dashed var(--rz-text-disabled-color);
    border-radius: 6px;
    background: none;
    color: var(--rz-text-secondary-color);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 200ms ease;
    font-family: inherit;
    flex: 1;
    justify-content: center;
}

.configurator-builder__option-link-btn:hover[b-fm32yjqqg3] {
    border-color: var(--rz-primary);
    color: var(--rz-primary);
    background: color-mix(in srgb, var(--rz-primary) 4%, transparent);
}

[b-fm32yjqqg3] .configurator-builder__option-link-btn .rzi {
    font-size: 14px;
}

.configurator-builder__option-endpoint-toggle[b-fm32yjqqg3] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: 1px dashed var(--rz-text-disabled-color);
    border-radius: 6px;
    background: none;
    color: var(--rz-text-secondary-color);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 200ms ease;
    font-family: inherit;
}

.configurator-builder__option-endpoint-toggle:hover[b-fm32yjqqg3] {
    border-color: var(--rz-success);
    color: var(--rz-success);
    background: color-mix(in srgb, var(--rz-success) 4%, transparent);
}

[b-fm32yjqqg3] .configurator-builder__option-endpoint-toggle .rzi {
    font-size: 14px;
}

/* ── Bottom Bar ── */
.configurator-builder__bottom-bar[b-fm32yjqqg3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0 0;
    border-top: 1px solid var(--rz-border-color);
    margin-top: auto;
    flex-wrap: wrap;
}

/* ── Empty State ── */
.configurator-builder__empty[b-fm32yjqqg3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 4rem;
    flex: 1;
}

[b-fm32yjqqg3] .configurator-builder__empty-icon {
    font-size: 64px;
    color: var(--rz-text-disabled-color);
}

/* ══════════════════════════════════════════════════════
   RIGHT: Tree Panel
   ══════════════════════════════════════════════════════ */

.configurator-builder__tree-panel[b-fm32yjqqg3] {
    background: var(--rz-base-background-color);
    border-left: 1px solid var(--rz-border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 200ms ease;
}

.configurator-builder__tree-panel--collapsed[b-fm32yjqqg3] {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
}

.configurator-builder__content:has(.configurator-builder__tree-panel--collapsed)[b-fm32yjqqg3] {
    grid-template-columns: 1fr 40px;
}

.configurator-builder__tree-header[b-fm32yjqqg3] {
    padding: 14px 16px;
    border-bottom: 1px solid var(--rz-border-color);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.configurator-builder__tree-toggle[b-fm32yjqqg3] {
    width: 28px;
    height: 28px;
    border: 1px solid var(--rz-border-color);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--rz-text-secondary-color);
    transition: all 150ms ease;
}

.configurator-builder__tree-toggle:hover[b-fm32yjqqg3] {
    border-color: var(--rz-primary);
    color: var(--rz-primary);
    background: color-mix(in srgb, var(--rz-primary) 10%, transparent);
}

.configurator-builder__tree-title[b-fm32yjqqg3] {
    font-size: 13px;
    font-weight: 600;
    color: var(--rz-text-color);
    letter-spacing: 0.01em;
}

.configurator-builder__tree-body[b-fm32yjqqg3] {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.configurator-builder__tree-empty[b-fm32yjqqg3] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    font-size: 12px;
    color: var(--rz-text-disabled-color);
}

/* ── Tree Nodes ── */
.configurator-builder__tree-node[b-fm32yjqqg3] {
    padding-right: 8px;
}

.configurator-builder__tree-node-btn[b-fm32yjqqg3] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px 7px 8px;
    border: none;
    border-left: 2px solid transparent;
    background: none;
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    color: var(--rz-text-color);
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
    border-radius: 0 6px 6px 0;
    text-align: left;
}

.configurator-builder__tree-node-btn:hover[b-fm32yjqqg3] {
    background: color-mix(in srgb, var(--rz-primary) 8%, transparent);
    border-left-color: color-mix(in srgb, var(--rz-primary) 40%, transparent);
}

.configurator-builder__tree-node-btn--active[b-fm32yjqqg3] {
    background: color-mix(in srgb, var(--rz-primary) 14%, transparent);
    border-left-color: var(--rz-primary);
    font-weight: 600;
    color: var(--rz-primary);
}

.configurator-builder__tree-node-indicator[b-fm32yjqqg3] {
    font-size: 10px;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
    color: var(--rz-text-secondary-color);
}

.configurator-builder__tree-node-btn--active .configurator-builder__tree-node-indicator[b-fm32yjqqg3] {
    color: var(--rz-primary);
}

.configurator-builder__tree-node-title[b-fm32yjqqg3] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.configurator-builder__tree-node-badge[b-fm32yjqqg3] {
    font-size: 10px;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
    background: color-mix(in srgb, var(--rz-text-secondary-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--rz-text-secondary-color) 20%, transparent);
    padding: 1px 7px;
    border-radius: 999px;
    flex-shrink: 0;
    min-width: 18px;
    text-align: center;
}

.configurator-builder__tree-node-btn--active .configurator-builder__tree-node-badge[b-fm32yjqqg3] {
    color: var(--rz-primary);
    background: color-mix(in srgb, var(--rz-primary) 14%, transparent);
    border-color: color-mix(in srgb, var(--rz-primary) 28%, transparent);
}

/* ── Option nodes (tussenniveau in de boom) ── */
.configurator-builder__tree-node-option-btn[b-fm32yjqqg3] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 4px 10px 4px 8px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 11px;
    font-family: inherit;
    color: var(--rz-text-secondary-color);
    transition: background-color 150ms ease, color 150ms ease;
    border-radius: 4px;
    text-align: left;
    font-style: italic;
}

.configurator-builder__tree-node-option-btn:hover[b-fm32yjqqg3] {
    background: color-mix(in srgb, var(--rz-text-secondary-color) 8%, transparent);
    color: var(--rz-text-color);
}

.configurator-builder__tree-node-option-icon[b-fm32yjqqg3] {
    display: inline-flex;
    align-items: center;
    width: 14px;
    flex-shrink: 0;
    font-size: 13px;
    line-height: 1;
    color: var(--rz-text-secondary-color);
}

.configurator-builder__tree-node-option-title[b-fm32yjqqg3] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════
   Library Drawer Content
   ══════════════════════════════════════════════════════ */

.configurator-builder__library-filters[b-fm32yjqqg3] {
    display: flex;
    gap: 8px;
    padding: 12px 0;
    align-items: flex-end;
    flex-wrap: wrap;
}

.configurator-builder__library-empty[b-fm32yjqqg3] {
    text-align: center;
    padding: 48px 24px;
    color: var(--rz-text-secondary-color);
}

[b-fm32yjqqg3] .configurator-builder__library-empty .rzi {
    font-size: 40px;
    opacity: 0.3;
}

.configurator-builder__library-list[b-fm32yjqqg3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0;
}

.configurator-builder__library-item[b-fm32yjqqg3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--rz-base-200);
    border: 1px solid var(--rz-border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 150ms ease;
}

.configurator-builder__library-item:hover[b-fm32yjqqg3] {
    border-color: var(--rz-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.configurator-builder__library-item-info[b-fm32yjqqg3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.configurator-builder__library-item-name[b-fm32yjqqg3] {
    font-size: 14px;
    font-weight: 600;
    color: var(--rz-text-color);
}

.configurator-builder__library-item-category[b-fm32yjqqg3] {
    font-size: 11px;
    font-weight: 500;
    color: var(--rz-primary);
}

.configurator-builder__library-item-options[b-fm32yjqqg3] {
    font-size: 11px;
    color: var(--rz-text-secondary-color);
}

[b-fm32yjqqg3] .configurator-builder__library-item-add {
    font-size: 20px;
    color: var(--rz-primary);
    opacity: 0.5;
    transition: opacity 150ms;
}

.configurator-builder__library-item:hover[b-fm32yjqqg3]  .configurator-builder__library-item-add {
    opacity: 1;
}

/* ── Library: New Step Form ── */
.configurator-builder__library-newstep[b-fm32yjqqg3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 0;
}

.configurator-builder__library-newstep-options[b-fm32yjqqg3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 8px;
}

.configurator-builder__library-newstep-option-row[b-fm32yjqqg3] {
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

.configurator-builder__library-newstep-option-row > :first-child[b-fm32yjqqg3] {
    flex: 1;
}

.configurator-builder__library-newstep-remove[b-fm32yjqqg3] {
    background: none;
    border: 1px solid var(--rz-border-color);
    border-radius: 4px;
    padding: 4px;
    cursor: pointer;
    color: var(--rz-text-disabled-color);
    display: flex;
    align-items: center;
    transition: all 150ms ease;
    margin-bottom: 8px;
}

.configurator-builder__library-newstep-remove:hover[b-fm32yjqqg3] {
    color: var(--rz-danger);
    border-color: var(--rz-danger);
}

.configurator-builder__library-newstep-add[b-fm32yjqqg3] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px dashed var(--rz-text-disabled-color);
    border-radius: 6px;
    background: none;
    color: var(--rz-text-secondary-color);
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    transition: all 150ms ease;
    width: fit-content;
}

.configurator-builder__library-newstep-add:hover[b-fm32yjqqg3] {
    border-color: var(--rz-primary);
    color: var(--rz-primary);
}

[b-fm32yjqqg3] .configurator-builder__library-newstep-add .rzi {
    font-size: 14px;
}

/* ── Option card top action buttons ── */

.configurator-builder__option-top-actions[b-fm32yjqqg3] {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 150ms ease;
    z-index: 2;
}

.configurator-builder__option-image[b-fm32yjqqg3] {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rz-base-200);
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.configurator-builder__option-image img[b-fm32yjqqg3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

[b-fm32yjqqg3] .configurator-builder__option-image-placeholder {
    font-size: 32px;
    color: var(--rz-text-disabled-color);
}

.configurator-builder__option-card:hover .configurator-builder__option-top-actions[b-fm32yjqqg3] {
    opacity: 1;
}

.configurator-builder__option-edit-btn[b-fm32yjqqg3],
.configurator-builder__option-delete-btn[b-fm32yjqqg3] {
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 6px;
    padding: 4px;
    cursor: pointer;
    color: var(--rz-text-secondary-color);
    transition: all 150ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.configurator-builder__option-edit-btn:hover[b-fm32yjqqg3] {
    color: var(--rz-primary);
    border-color: var(--rz-primary);
}

.configurator-builder__option-delete-btn:hover[b-fm32yjqqg3] {
    color: var(--rz-danger);
    border-color: var(--rz-danger);
}

[b-fm32yjqqg3] .configurator-builder__option-edit-btn .rzi,
[b-fm32yjqqg3] .configurator-builder__option-delete-btn .rzi {
    font-size: 16px;
}

/* Make option card position relative for absolute positioning of actions */
.configurator-builder__option-card[b-fm32yjqqg3] {
    position: relative;
}

/* ── Image overlay (camera icon on hover) ── */

.configurator-builder__option-image-overlay[b-fm32yjqqg3] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    opacity: 0;
    transition: opacity 150ms ease;
    cursor: pointer;
    color: white;
}

.configurator-builder__option-image:hover .configurator-builder__option-image-overlay[b-fm32yjqqg3] {
    opacity: 1;
}

[b-fm32yjqqg3] .configurator-builder__option-image-overlay .rzi {
    font-size: 28px;
}

/* ── Image picker thumbnail hover ── */
.configurator-builder__picker-thumb:hover[b-fm32yjqqg3] {
    border-color: var(--rz-primary) !important;
}

/* ══════════════════════════════════════════════════════
   Library drawer — source toggle + grid + tiles
   ══════════════════════════════════════════════════════ */
.configurator-builder__library-source-toggle[b-fm32yjqqg3] {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--rz-border-color);
    border-radius: 8px;
    overflow: hidden;
    background: transparent;
    align-self: flex-start;
}

.configurator-builder__library-source-btn[b-fm32yjqqg3] {
    padding: 6px 14px;
    background: transparent;
    border: none;
    border-right: 1px solid var(--rz-border-color);
    color: var(--rz-text-secondary-color);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    transition: background-color 150ms, color 150ms;
}

.configurator-builder__library-source-btn:last-child[b-fm32yjqqg3] {
    border-right: none;
}

.configurator-builder__library-source-btn:hover[b-fm32yjqqg3] {
    background: color-mix(in srgb, var(--rz-primary) 8%, transparent);
    color: var(--rz-text-color);
}

.configurator-builder__library-source-btn--active[b-fm32yjqqg3] {
    background: color-mix(in srgb, var(--rz-primary) 18%, transparent);
    color: var(--rz-primary);
}

.configurator-builder__library-recent-header[b-fm32yjqqg3] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 0 6px 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rz-text-secondary-color);
}

.configurator-builder__library-section-divider[b-fm32yjqqg3] {
    border-top: 1px solid var(--rz-border-color);
    margin: 12px 0;
}

.configurator-builder__library-grid[b-fm32yjqqg3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    padding: 8px 0;
}

.configurator-builder__library-tile[b-fm32yjqqg3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--rz-border-color);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: border-color 150ms, background-color 150ms, transform 150ms;
}

.configurator-builder__library-tile:hover[b-fm32yjqqg3] {
    border-color: var(--rz-primary);
    background: color-mix(in srgb, var(--rz-primary) 5%, transparent);
    transform: translateY(-1px);
}

.configurator-builder__library-tile-header[b-fm32yjqqg3] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.configurator-builder__library-tile-source[b-fm32yjqqg3] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
}

.configurator-builder__library-tile-source--tenant[b-fm32yjqqg3] {
    background: color-mix(in srgb, var(--rz-primary) 14%, transparent);
    color: var(--rz-primary);
    border-color: color-mix(in srgb, var(--rz-primary) 28%, transparent);
}

.configurator-builder__library-tile-source--central[b-fm32yjqqg3] {
    background: color-mix(in srgb, var(--rz-info) 14%, transparent);
    color: var(--rz-info);
    border-color: color-mix(in srgb, var(--rz-info) 28%, transparent);
}

.configurator-builder__library-tile-category[b-fm32yjqqg3] {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--rz-text-secondary-color);
    background: color-mix(in srgb, var(--rz-text-secondary-color) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--rz-text-secondary-color) 20%, transparent);
}

.configurator-builder__library-tile-body[b-fm32yjqqg3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.configurator-builder__library-tile-title[b-fm32yjqqg3] {
    font-size: 14px;
    font-weight: 700;
    color: var(--rz-text-color);
}

.configurator-builder__library-tile-desc[b-fm32yjqqg3] {
    font-size: 11px;
    color: var(--rz-text-secondary-color);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.configurator-builder__library-tile-thumbs[b-fm32yjqqg3] {
    display: flex;
    gap: 4px;
    align-items: center;
    min-height: 40px;
}

.configurator-builder__library-tile-thumb[b-fm32yjqqg3] {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rz-base-100);
    border: 1px solid var(--rz-border-color);
    flex-shrink: 0;
}

.configurator-builder__library-tile-thumb img[b-fm32yjqqg3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.configurator-builder__library-tile-thumb--more[b-fm32yjqqg3] {
    font-size: 11px;
    font-weight: 700;
    color: var(--rz-text-secondary-color);
    background: transparent;
}

.configurator-builder__library-tile-nooptions[b-fm32yjqqg3] {
    font-size: 11px;
    font-style: italic;
    color: var(--rz-text-disabled-color);
}

.configurator-builder__library-tile-footer[b-fm32yjqqg3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--rz-text-secondary-color);
}

.configurator-builder__library-tile-refcount[b-fm32yjqqg3],
.configurator-builder__library-tile-template[b-fm32yjqqg3] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
}

.configurator-builder__library-tile-refcount[b-fm32yjqqg3] {
    color: var(--rz-primary);
}

.configurator-builder__library-tile-template[b-fm32yjqqg3] {
    color: var(--rz-info);
}

[b-fm32yjqqg3] .configurator-builder__library-tile-refcount .rzi,
[b-fm32yjqqg3] .configurator-builder__library-tile-template .rzi {
    font-size: 14px !important;
}

/* ══════════════════════════════════════════════════════
   Library preview modal
   ══════════════════════════════════════════════════════ */
.library-preview-modal__backdrop[b-fm32yjqqg3] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1040;
    animation: fade-in-b-fm32yjqqg3 180ms ease;
}

.library-preview-modal[b-fm32yjqqg3] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(960px, 92vw);
    max-height: 86vh;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    z-index: 1050;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    animation: pop-in-b-fm32yjqqg3 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fade-in-b-fm32yjqqg3 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pop-in-b-fm32yjqqg3 {
    from { opacity: 0; transform: translate(-50%, -48%) scale(0.98); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.library-preview-modal__header[b-fm32yjqqg3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px 10px;
    border-bottom: 1px solid var(--rz-border-color);
}

.library-preview-modal__header-meta[b-fm32yjqqg3] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.library-preview-modal__source-badge[b-fm32yjqqg3] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
}

.library-preview-modal__source-badge--tenant[b-fm32yjqqg3] {
    background: color-mix(in srgb, var(--rz-primary) 14%, transparent);
    color: var(--rz-primary);
    border-color: color-mix(in srgb, var(--rz-primary) 28%, transparent);
}

.library-preview-modal__source-badge--central[b-fm32yjqqg3] {
    background: color-mix(in srgb, var(--rz-info) 14%, transparent);
    color: var(--rz-info);
    border-color: color-mix(in srgb, var(--rz-info) 28%, transparent);
}

.library-preview-modal__category-chip[b-fm32yjqqg3],
.library-preview-modal__ref-chip[b-fm32yjqqg3] {
    font-size: 11px;
    padding: 2px 10px;
    border-radius: 999px;
    color: var(--rz-text-secondary-color);
    background: color-mix(in srgb, var(--rz-text-secondary-color) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--rz-text-secondary-color) 20%, transparent);
}

.library-preview-modal__close[b-fm32yjqqg3] {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--rz-text-secondary-color);
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: background-color 150ms;
}

.library-preview-modal__close:hover[b-fm32yjqqg3] {
    background: color-mix(in srgb, var(--rz-text-secondary-color) 12%, transparent);
    color: var(--rz-text-color);
}

[b-fm32yjqqg3] .library-preview-modal__close .rzi {
    font-size: 22px !important;
}

.library-preview-modal__title-row[b-fm32yjqqg3] {
    padding: 12px 20px;
    border-bottom: 1px solid var(--rz-border-color);
}

.library-preview-modal__title[b-fm32yjqqg3] {
    margin: 0 0 4px 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--rz-text-color);
}

.library-preview-modal__description[b-fm32yjqqg3] {
    margin: 0;
    font-size: 12px;
    color: var(--rz-text-secondary-color);
}

.library-preview-modal__body[b-fm32yjqqg3] {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}

.library-preview-modal__empty[b-fm32yjqqg3] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--rz-text-secondary-color);
    font-size: 12px;
    padding: 24px;
    justify-content: center;
}

.library-preview-modal__options-grid[b-fm32yjqqg3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.library-preview-modal__option-card[b-fm32yjqqg3] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--rz-border-color);
    border-radius: 8px;
    overflow: hidden;
    background: transparent;
}

.library-preview-modal__option-image[b-fm32yjqqg3] {
    background: var(--rz-base-100);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    overflow: hidden;
}

.library-preview-modal__option-image img[b-fm32yjqqg3] {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

[b-fm32yjqqg3] .library-preview-modal__option-image .rzi {
    font-size: 40px !important;
    color: var(--rz-text-disabled-color);
}

.library-preview-modal__option-body[b-fm32yjqqg3] {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.library-preview-modal__option-title[b-fm32yjqqg3] {
    font-size: 13px;
    font-weight: 700;
    color: var(--rz-text-color);
}

.library-preview-modal__option-subtitle[b-fm32yjqqg3] {
    font-size: 11px;
    color: var(--rz-text-secondary-color);
}

.library-preview-modal__option-price[b-fm32yjqqg3] {
    font-size: 12px;
    font-weight: 600;
    color: var(--rz-primary);
    margin-top: 2px;
}

.library-preview-modal__option-features[b-fm32yjqqg3] {
    list-style: none;
    padding: 0;
    margin: 6px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.library-preview-modal__option-feature[b-fm32yjqqg3] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--rz-text-color);
}

.library-preview-modal__option-feature--included[b-fm32yjqqg3] {
    color: var(--rz-text-color);
}

.library-preview-modal__option-feature--excluded[b-fm32yjqqg3] {
    color: var(--rz-text-secondary-color);
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, var(--rz-danger) 50%, transparent);
}

[b-fm32yjqqg3] .library-preview-modal__option-feature--included .rzi {
    color: var(--rz-success) !important;
    font-size: 14px !important;
}

[b-fm32yjqqg3] .library-preview-modal__option-feature--excluded .rzi {
    color: var(--rz-danger) !important;
    font-size: 14px !important;
}

.library-preview-modal__footer[b-fm32yjqqg3] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--rz-border-color);
}
/* /Components/Pages/Admin/Product/LensConfigurator/ConfiguratorEndpoints.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════
   ConfiguratorEndpoints — Product linking overview
   ══════════════════════════════════════════════════════ */

.configurator-endpoints[b-ruqyfezg4t] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
    overflow: hidden;
}

/* ── Loading ── */
.configurator-endpoints__loading[b-ruqyfezg4t] {
    display: flex;
    justify-content: center;
    padding: 4rem;
}

/* ── Toolbar ── */
.configurator-endpoints__toolbar[b-ruqyfezg4t] {
    background: var(--rz-base-background-color);
    border-bottom: 1px solid var(--rz-border-color);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.configurator-endpoints__toolbar-left[b-ruqyfezg4t] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.configurator-endpoints__title[b-ruqyfezg4t] {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.configurator-endpoints__count-badge[b-ruqyfezg4t] {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
}

.configurator-endpoints__count-badge--ok[b-ruqyfezg4t] {
    background: color-mix(in srgb, var(--rz-success) 12%, transparent);
    color: var(--rz-success);
}

.configurator-endpoints__count-badge--warning[b-ruqyfezg4t] {
    background: color-mix(in srgb, var(--rz-warning) 12%, transparent);
    color: var(--rz-warning);
}

/* ── Filters ── */
.configurator-endpoints__filters[b-ruqyfezg4t] {
    background: var(--rz-base-background-color);
    border-bottom: 1px solid var(--rz-border-color);
    padding: 12px 24px;
    flex-shrink: 0;
}

.configurator-endpoints__search-field[b-ruqyfezg4t] {
    width: 250px;
}

/* ── Table ── */
.configurator-endpoints__table-wrap[b-ruqyfezg4t] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

/* ── Route chips ── */
.configurator-endpoints__route-chip[b-ruqyfezg4t] {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--rz-base-200);
    white-space: nowrap;
}

[b-ruqyfezg4t] .configurator-endpoints__route-chevron {
    font-size: 14px;
    color: var(--rz-text-disabled-color);
}

/* ── Status icons ── */
[b-ruqyfezg4t] .configurator-endpoints__status-icon--ok {
    color: var(--rz-success);
    font-size: 20px;
}

[b-ruqyfezg4t] .configurator-endpoints__status-icon--warning {
    color: var(--rz-warning);
    font-size: 20px;
}

/* ── Unlinked badge ── */
.configurator-endpoints__unlinked-badge[b-ruqyfezg4t] {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: var(--rz-warning);
    background: color-mix(in srgb, var(--rz-warning) 10%, transparent);
    padding: 2px 8px;
    border-radius: 4px;
    font-style: italic;
}

/* ── Link panel ── */
.configurator-endpoints__link-panel[b-ruqyfezg4t] {
    padding: 0 24px 24px;
    flex-shrink: 0;
}

.configurator-endpoints__link-field[b-ruqyfezg4t] {
    width: 200px;
}

.configurator-endpoints__link-field--wide[b-ruqyfezg4t] {
    width: 320px;
}

/* ── Product search results ── */
.configurator-endpoints__search-results[b-ruqyfezg4t] {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--rz-border-color);
    border-radius: 8px;
    background: var(--rz-base-background-color);
}

.configurator-endpoints__search-result-item[b-ruqyfezg4t] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    border-bottom: 1px solid var(--rz-border-color);
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    transition: background 150ms ease;
}

.configurator-endpoints__search-result-item:last-child[b-ruqyfezg4t] {
    border-bottom: none;
}

.configurator-endpoints__search-result-item:hover[b-ruqyfezg4t] {
    background: color-mix(in srgb, var(--rz-primary) 6%, transparent);
}

.configurator-endpoints__search-result-item--selected[b-ruqyfezg4t] {
    background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
    font-weight: 600;
}

.configurator-endpoints__search-result-name[b-ruqyfezg4t] {
    flex: 1;
}

.configurator-endpoints__search-result-sku[b-ruqyfezg4t] {
    font-size: 11px;
    color: var(--rz-text-secondary-color);
    font-family: monospace;
}

.configurator-endpoints__search-empty[b-ruqyfezg4t] {
    padding: 16px;
    text-align: center;
    font-size: 13px;
    color: var(--rz-text-secondary-color);
    font-style: italic;
}

/* ── Multi-binding manage panel ── */

.configurator-endpoints__count-pill[b-ruqyfezg4t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 8px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--rz-primary) 14%, transparent);
    color: var(--rz-primary);
    font-size: 12px;
    font-weight: 600;
}

.configurator-endpoints__first-choice[b-ruqyfezg4t] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.configurator-endpoints__first-choice-name[b-ruqyfezg4t] {
    font-size: 13px;
    font-weight: 500;
}

.configurator-endpoints__first-choice-limits[b-ruqyfezg4t] {
    font-size: 11px;
    color: var(--rz-text-secondary-color);
    font-family: monospace;
}

.configurator-endpoints__must-choose[b-ruqyfezg4t] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--rz-primary) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--rz-primary) 16%, transparent);
}

.configurator-endpoints__must-choose-title[b-ruqyfezg4t] {
    font-size: 13px;
    font-weight: 600;
}

.configurator-endpoints__must-choose-hint[b-ruqyfezg4t] {
    font-size: 12px;
    color: var(--rz-text-secondary-color);
    margin-top: 2px;
}

.configurator-endpoints__bindings[b-ruqyfezg4t] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.configurator-endpoints__binding-row[b-ruqyfezg4t] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--rz-border-color);
    border-radius: 6px;
    background: var(--rz-base-background-color);
}

.configurator-endpoints__binding-priority[b-ruqyfezg4t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 44px;
}

.configurator-endpoints__priority-num[b-ruqyfezg4t] {
    font-size: 15px;
    font-weight: 700;
    color: var(--rz-primary);
}

.configurator-endpoints__binding-body[b-ruqyfezg4t] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.configurator-endpoints__binding-name[b-ruqyfezg4t] {
    font-size: 14px;
    font-weight: 600;
}

.configurator-endpoints__binding-limits[b-ruqyfezg4t] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
}

.configurator-endpoints__limit-field[b-ruqyfezg4t] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 90px;
}

.configurator-endpoints__limit-field label[b-ruqyfezg4t] {
    font-size: 11px;
    color: var(--rz-text-secondary-color);
}

.configurator-endpoints__limit-field[b-ruqyfezg4t]  .rz-numeric {
    width: 100%;
}

.configurator-endpoints__binding-actions[b-ruqyfezg4t] {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.configurator-endpoints__add-section[b-ruqyfezg4t] {
    padding-top: 12px;
    border-top: 1px dashed var(--rz-border-color);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.configurator-endpoints__add-search[b-ruqyfezg4t] {
    max-width: 420px;
}

.configurator-endpoints__new-binding-limits[b-ruqyfezg4t] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--rz-primary) 4%, transparent);
}

.configurator-endpoints__new-binding-selected[b-ruqyfezg4t] {
    font-size: 13px;
}

/* ── Add-mode tabs (SF6 vs Eigen voorraad) ── */

.configurator-endpoints__add-mode[b-ruqyfezg4t] {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: color-mix(in srgb, var(--rz-text-secondary-color) 8%, transparent);
    border-radius: 8px;
    width: fit-content;
}

.configurator-endpoints__mode-tab[b-ruqyfezg4t] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--rz-text-secondary-color);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}

.configurator-endpoints__mode-tab:hover[b-ruqyfezg4t] {
    color: var(--rz-text-color);
}

.configurator-endpoints__mode-tab--active[b-ruqyfezg4t] {
    background: var(--rz-base-background-color);
    color: var(--rz-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.configurator-endpoints__sf6-row[b-ruqyfezg4t] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.configurator-endpoints__sf6-meta[b-ruqyfezg4t] {
    font-size: 11px;
    color: var(--rz-text-secondary-color);
}
/* /Components/Pages/Admin/Product/LensConfigurator/ImageLibraryAdmin.razor.rz.scp.css */
.image-library-admin[b-4s9lvjzer6] {
    padding: 24px;
    max-width: 1200px;
}

.image-library-admin__header[b-4s9lvjzer6] {
    margin-bottom: 24px;
}

.image-library-admin__header h2[b-4s9lvjzer6] {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
}

.image-library-admin__subtitle[b-4s9lvjzer6] {
    margin: 4px 0 0;
    color: var(--rz-text-secondary-color);
    font-size: 14px;
}

/* Upload section */
.image-library-admin__upload-section[b-4s9lvjzer6] {
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 24px;
}

.image-library-admin__upload-section h3[b-4s9lvjzer6] {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 600;
}

.image-library-admin__upload-form[b-4s9lvjzer6] {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.image-library-admin__upload-fields[b-4s9lvjzer6] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-width: 250px;
}

.image-library-admin__upload-drop[b-4s9lvjzer6] {
    width: 180px;
    height: 150px;
    border: 2px dashed var(--rz-border-color);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    position: relative;
    color: var(--rz-text-secondary-color);
    font-size: 12px;
    text-align: center;
    transition: all 200ms ease;
}

.image-library-admin__upload-drop:hover[b-4s9lvjzer6] {
    border-color: var(--rz-primary);
    color: var(--rz-primary);
}

[b-4s9lvjzer6] .image-library-admin__upload-drop .rzi {
    font-size: 36px;
}

.image-library-admin__file-input[b-4s9lvjzer6] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* Category filter */
.image-library-admin__categories[b-4s9lvjzer6] {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.image-library-admin__cat-pill[b-4s9lvjzer6] {
    font-size: 13px;
    font-weight: 500;
    padding: 6px 16px;
    border: 1px solid var(--rz-border-color);
    border-radius: 20px;
    background: none;
    cursor: pointer;
    color: var(--rz-text-secondary-color);
    transition: all 150ms ease;
}

.image-library-admin__cat-pill:hover[b-4s9lvjzer6] {
    border-color: var(--rz-primary);
    color: var(--rz-primary);
}

.image-library-admin__cat-pill.active[b-4s9lvjzer6] {
    background: var(--rz-primary);
    border-color: var(--rz-primary);
    color: white;
}

/* Loading */
.image-library-admin__loading[b-4s9lvjzer6] {
    display: flex;
    justify-content: center;
    padding: 48px;
}

/* Image grid */
.image-library-admin__grid[b-4s9lvjzer6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.image-library-admin__card[b-4s9lvjzer6] {
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    transition: box-shadow 200ms ease;
}

.image-library-admin__card:hover[b-4s9lvjzer6] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.image-library-admin__card-image[b-4s9lvjzer6] {
    height: 120px;
    background: var(--rz-surface-color, #f0f0f0);
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-library-admin__card-image img[b-4s9lvjzer6] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

[b-4s9lvjzer6] .image-library-admin__card-image .rzi {
    font-size: 36px;
    color: var(--rz-text-disabled-color);
}

.image-library-admin__card-body[b-4s9lvjzer6] {
    padding: 10px 12px;
}

.image-library-admin__card-title[b-4s9lvjzer6] {
    font-size: 13px;
    font-weight: 600;
    display: block;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.image-library-admin__card-category[b-4s9lvjzer6] {
    font-size: 11px;
    color: var(--rz-text-secondary-color);
}

.image-library-admin__card-delete[b-4s9lvjzer6] {
    position: absolute;
    top: 8px;
    right: 8px;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: all 200ms ease;
}

.image-library-admin__card:hover .image-library-admin__card-delete[b-4s9lvjzer6] {
    opacity: 1;
}

.image-library-admin__card-delete:hover[b-4s9lvjzer6] {
    background: var(--rz-danger);
}

[b-4s9lvjzer6] .image-library-admin__card-delete .rzi {
    font-size: 18px;
}

/* Empty state */
.image-library-admin__empty[b-4s9lvjzer6] {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px;
    color: var(--rz-text-secondary-color);
}

[b-4s9lvjzer6] .image-library-admin__empty .rzi {
    font-size: 48px;
    opacity: 0.3;
}

.image-library-admin__empty p[b-4s9lvjzer6] {
    margin: 8px 0 0;
}

.image-library-admin__empty-hint[b-4s9lvjzer6] {
    font-size: 12px;
    opacity: 0.6;
}
/* /Components/Pages/Admin/Product/LensConfigurator/LensConfiguratorDashboard.razor.rz.scp.css */
.lens-configurator-dashboard__import-backdrop[b-5ra6nxfpmr] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1040;
}

.lens-configurator-dashboard__import-modal[b-5ra6nxfpmr] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(880px, 92vw);
    max-height: 84vh;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    z-index: 1050;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.lens-configurator-dashboard__import-header[b-5ra6nxfpmr] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 20px;
    border-bottom: 1px solid var(--rz-border-color);
    gap: 12px;
}

.lens-configurator-dashboard__import-header h3[b-5ra6nxfpmr] {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--rz-text-color);
}

.lens-configurator-dashboard__import-hint[b-5ra6nxfpmr] {
    margin: 0;
    font-size: 12px;
    color: var(--rz-text-secondary-color);
}

.lens-configurator-dashboard__import-close[b-5ra6nxfpmr] {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--rz-text-secondary-color);
    padding: 4px;
    border-radius: 6px;
    display: flex;
}

.lens-configurator-dashboard__import-close:hover[b-5ra6nxfpmr] {
    background: color-mix(in srgb, var(--rz-text-secondary-color) 12%, transparent);
    color: var(--rz-text-color);
}

.lens-configurator-dashboard__import-body[b-5ra6nxfpmr] {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}

.lens-configurator-dashboard__import-loading[b-5ra6nxfpmr] {
    display: flex;
    justify-content: center;
    padding: 48px 0;
}

.lens-configurator-dashboard__import-empty[b-5ra6nxfpmr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 40px 20px;
    color: var(--rz-text-secondary-color);
    text-align: center;
}

[b-5ra6nxfpmr] .lens-configurator-dashboard__import-empty .rzi {
    font-size: 40px !important;
    opacity: 0.4;
}

.lens-configurator-dashboard__import-grid[b-5ra6nxfpmr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

.lens-configurator-dashboard__import-tile[b-5ra6nxfpmr] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    border: 1px solid var(--rz-border-color);
    border-radius: 10px;
    background: transparent;
    text-align: left;
    font-family: inherit;
    transition: border-color 150ms, background-color 150ms;
    position: relative;
}

.lens-configurator-dashboard__import-tile--busy[b-5ra6nxfpmr] {
    opacity: 0.55;
}

.lens-configurator-dashboard__import-tile-head[b-5ra6nxfpmr] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.lens-configurator-dashboard__import-tile-badges[b-5ra6nxfpmr] {
    display: flex;
    gap: 4px;
    min-height: 18px;
    flex-wrap: wrap;
}

.lens-configurator-dashboard__import-tile-preview-btn[b-5ra6nxfpmr] {
    background: transparent;
    border: 1px solid var(--rz-border-color);
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
    color: var(--rz-text-secondary-color);
    display: flex;
    align-items: center;
    transition: all 150ms;
}

.lens-configurator-dashboard__import-tile-preview-btn:hover:not(:disabled)[b-5ra6nxfpmr] {
    border-color: var(--rz-primary);
    color: var(--rz-primary);
    background: color-mix(in srgb, var(--rz-primary) 10%, transparent);
}

.lens-configurator-dashboard__import-tile-preview-btn:disabled[b-5ra6nxfpmr] {
    opacity: 0.3;
    cursor: not-allowed;
}

[b-5ra6nxfpmr] .lens-configurator-dashboard__import-tile-preview-btn .rzi {
    font-size: 18px !important;
}

.lens-configurator-dashboard__import-tile-footer[b-5ra6nxfpmr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--rz-border-color);
}

.lens-configurator-dashboard__import-tile-import-btn[b-5ra6nxfpmr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--rz-primary);
    border-radius: 6px;
    background: color-mix(in srgb, var(--rz-primary) 10%, transparent);
    color: var(--rz-primary);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    transition: all 150ms;
}

.lens-configurator-dashboard__import-tile-import-btn:hover:not(:disabled)[b-5ra6nxfpmr] {
    background: color-mix(in srgb, var(--rz-primary) 18%, transparent);
}

.lens-configurator-dashboard__import-tile-import-btn:disabled[b-5ra6nxfpmr] {
    opacity: 0.55;
    cursor: wait;
}

.lens-configurator-dashboard__import-tile-badge[b-5ra6nxfpmr] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 999px;
}

.lens-configurator-dashboard__import-tile-badge--usage[b-5ra6nxfpmr] {
    color: var(--rz-success);
    background: color-mix(in srgb, var(--rz-success) 14%, transparent);
}

.lens-configurator-dashboard__import-tile-badge--legacy[b-5ra6nxfpmr] {
    color: var(--rz-warning);
    background: color-mix(in srgb, var(--rz-warning) 14%, transparent);
}

.lens-configurator-dashboard__import-tile-title[b-5ra6nxfpmr] {
    font-size: 14px;
    font-weight: 700;
    color: var(--rz-text-color);
}

.lens-configurator-dashboard__import-tile-desc[b-5ra6nxfpmr] {
    font-size: 11px;
    color: var(--rz-text-secondary-color);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lens-configurator-dashboard__import-tile-count[b-5ra6nxfpmr] {
    font-size: 11px;
    color: var(--rz-text-secondary-color);
}

/* ── Location chips in grid ── */
.lens-configurator-dashboard__location-empty[b-5ra6nxfpmr] {
    font-size: 12px;
    color: var(--rz-text-disabled-color);
    font-style: italic;
}

.lens-configurator-dashboard__location-chips[b-5ra6nxfpmr] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.lens-configurator-dashboard__location-chip[b-5ra6nxfpmr] {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--rz-primary);
    background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--rz-primary) 22%, transparent);
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lens-configurator-dashboard__location-chip--more[b-5ra6nxfpmr] {
    color: var(--rz-text-secondary-color);
    background: color-mix(in srgb, var(--rz-text-secondary-color) 10%, transparent);
    border-color: color-mix(in srgb, var(--rz-text-secondary-color) 20%, transparent);
}
/* /Components/Pages/Admin/Product/LensConfigurator/LensTypeOverview.razor.rz.scp.css */
/* ── Overview layout ── */
.lens-type-overview[b-exxxwv5l8n] {
    padding: 24px;
    max-width: 1200px;
}

.lens-type-overview__header[b-exxxwv5l8n] {
    margin-bottom: 24px;
}

.lens-type-overview__title[b-exxxwv5l8n] {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 4px;
}

.lens-type-overview__loading[b-exxxwv5l8n] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px;
}

/* ── Card grid ── */
.lens-type-overview__grid[b-exxxwv5l8n] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.lens-type-overview__card[b-exxxwv5l8n] {
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 10px;
    overflow: hidden;
    transition: all 200ms ease;
    display: flex;
    flex-direction: column;
}

.lens-type-overview__card:hover[b-exxxwv5l8n] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.lens-type-overview__card--active[b-exxxwv5l8n] {
    border-color: var(--rz-primary);
}

/* ── Card image ── */
.lens-type-overview__card-image[b-exxxwv5l8n] {
    width: 100%;
    height: 120px;
    background: linear-gradient(135deg, #E0F2F4, #B2DFE6);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.lens-type-overview__card-image img[b-exxxwv5l8n] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

[b-exxxwv5l8n] .lens-type-overview__card-icon {
    font-size: 48px;
    opacity: 0.4;
    color: var(--rz-text-disabled-color);
}

/* ── Card body ── */
.lens-type-overview__card-body[b-exxxwv5l8n] {
    padding: 16px;
    flex: 1;
}

.lens-type-overview__card-name[b-exxxwv5l8n] {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 2px;
}

.lens-type-overview__card-code[b-exxxwv5l8n] {
    font-size: 12px;
    color: var(--rz-text-secondary-color);
    display: block;
    margin-bottom: 8px;
}

/* ── Status ── */
.lens-type-overview__card-status[b-exxxwv5l8n] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
}

[b-exxxwv5l8n] .lens-type-overview__card-status .rzi {
    font-size: 16px;
}

.lens-type-overview__card-status--active[b-exxxwv5l8n] {
    color: var(--rz-success);
}

.lens-type-overview__card-status--inactive[b-exxxwv5l8n] {
    color: var(--rz-text-secondary-color);
}

.lens-type-overview__card-steps[b-exxxwv5l8n] {
    margin-left: 4px;
    font-weight: 400;
    color: var(--rz-text-secondary-color);
}

/* ── Action ── */
.lens-type-overview__card-action[b-exxxwv5l8n] {
    padding: 12px 16px;
    border-top: 1px solid var(--rz-border-color);
}

/* ── Empty state ── */
.lens-type-overview__empty[b-exxxwv5l8n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px;
    gap: 12px;
}

[b-exxxwv5l8n] .lens-type-overview__empty-icon {
    font-size: 48px;
    opacity: 0.3;
    color: var(--rz-text-disabled-color);
}
/* /Components/Pages/Admin/Product/LensConfigurator/LibraryStepDetail.razor.rz.scp.css */
.library-step-detail[b-387gb2by2s] {
    padding: 24px;
    max-width: 1000px;
}

.library-step-detail__nav[b-387gb2by2s] {
    margin-bottom: 16px;
}

.library-step-detail__loading[b-387gb2by2s],
.library-step-detail__empty[b-387gb2by2s] {
    display: flex;
    justify-content: center;
    padding: 48px;
    color: var(--rz-text-secondary-color);
}

.library-step-detail__meta[b-387gb2by2s] {
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 24px;
}

.library-step-detail__meta-header[b-387gb2by2s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.library-step-detail__meta-header h2[b-387gb2by2s] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

.library-step-detail__meta-fields[b-387gb2by2s] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.library-step-detail__lang-toggle[b-387gb2by2s] {
    background: none;
    border: none;
    color: var(--rz-primary);
    font-size: 12px;
    cursor: pointer;
    padding: 2px 0;
    text-decoration: underline;
    align-self: flex-start;
}

.library-step-detail__lang-fields[b-387gb2by2s] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
    padding: 8px 0 8px 16px;
    border-left: 2px solid var(--rz-border-color);
}

.library-step-detail__options-header[b-387gb2by2s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.library-step-detail__options-header h3[b-387gb2by2s] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.library-step-detail__options-empty[b-387gb2by2s] {
    color: var(--rz-text-secondary-color);
    font-size: 13px;
    padding: 12px 0;
}

.library-step-detail__options-list[b-387gb2by2s] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.library-step-detail__option-card[b-387gb2by2s] {
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 10px;
    overflow: hidden;
}

.library-step-detail__option-header[b-387gb2by2s] {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    align-items: flex-start;
    border-bottom: 1px solid var(--rz-border-color);
}

.library-step-detail__option-thumb[b-387gb2by2s] {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--rz-base-100);
    border: 1px solid var(--rz-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.library-step-detail__option-thumb img[b-387gb2by2s] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

[b-387gb2by2s] .library-step-detail__option-thumb .rzi {
    font-size: 24px !important;
    color: var(--rz-text-disabled-color);
}

.library-step-detail__option-titleblock[b-387gb2by2s] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.library-step-detail__option-side[b-387gb2by2s] {
    display: flex;
    align-items: flex-start;
}

.library-step-detail__option-body[b-387gb2by2s] {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.library-step-detail__option-image-row[b-387gb2by2s] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: end;
}

.library-step-detail__option-image-btn[b-387gb2by2s] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--rz-border-color);
    border-radius: 6px;
    background: transparent;
    color: var(--rz-text-secondary-color);
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    transition: all 150ms;
    height: 36px;
}

.library-step-detail__option-image-btn:hover[b-387gb2by2s] {
    border-color: var(--rz-primary);
    color: var(--rz-primary);
    background: color-mix(in srgb, var(--rz-primary) 8%, transparent);
}

.library-step-detail__option-features[b-387gb2by2s] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.library-step-detail__option-features-label[b-387gb2by2s] {
    font-size: 12px;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
}

.library-step-detail__option-actions[b-387gb2by2s] {
    display: flex;
    justify-content: flex-end;
}
/* /Components/Pages/Admin/Product/LensConfigurator/LibraryStepsAdmin.razor.rz.scp.css */
.library-admin[b-23hd9mpyev] {
    padding: 24px;
    max-width: 1200px;
}

.library-admin__header[b-23hd9mpyev] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 16px;
}

.library-admin__header h2[b-23hd9mpyev] {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--rz-text-color);
}

.library-admin__subtitle[b-23hd9mpyev] {
    margin: 4px 0 0 0;
    font-size: 12px;
    color: var(--rz-text-secondary-color);
}

.library-admin__filters[b-23hd9mpyev] {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    margin-bottom: 16px;
}

.library-admin__filters > :first-child[b-23hd9mpyev] {
    flex: 1;
    max-width: 400px;
}

.library-admin__loading[b-23hd9mpyev] {
    display: flex;
    justify-content: center;
    padding: 48px;
}

.library-admin__empty[b-23hd9mpyev] {
    text-align: center;
    padding: 48px;
    color: var(--rz-text-secondary-color);
}

[b-23hd9mpyev] .library-admin__empty .rzi {
    font-size: 48px;
    opacity: 0.3;
}

.library-admin__empty-hint[b-23hd9mpyev] {
    font-size: 12px;
    margin-top: 4px;
}

.library-admin__grid[b-23hd9mpyev] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.library-admin__card[b-23hd9mpyev] {
    position: relative;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 10px;
    padding: 14px;
    cursor: pointer;
    transition: border-color 150ms, transform 150ms, box-shadow 150ms;
}

.library-admin__card:hover[b-23hd9mpyev] {
    border-color: var(--rz-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.library-admin__card--inactive[b-23hd9mpyev] {
    opacity: 0.55;
}

.library-admin__card-header[b-23hd9mpyev] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.library-admin__card-title[b-23hd9mpyev] {
    font-size: 14px;
    font-weight: 700;
    color: var(--rz-text-color);
    flex: 1;
}

.library-admin__card-category[b-23hd9mpyev] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
    color: var(--rz-primary);
}

.library-admin__card-description[b-23hd9mpyev] {
    margin: 0 0 10px 0;
    font-size: 12px;
    color: var(--rz-text-secondary-color);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.library-admin__card-footer[b-23hd9mpyev] {
    display: flex;
    gap: 14px;
    align-items: center;
    font-size: 11px;
    color: var(--rz-text-secondary-color);
}

.library-admin__card-meta[b-23hd9mpyev] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.library-admin__card-actions[b-23hd9mpyev] {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 150ms;
}

.library-admin__card:hover .library-admin__card-actions[b-23hd9mpyev] {
    opacity: 1;
}

.library-admin__card-btn[b-23hd9mpyev] {
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    color: var(--rz-text-secondary-color);
    transition: all 150ms;
}

.library-admin__card-btn--delete:hover[b-23hd9mpyev] {
    background: color-mix(in srgb, var(--rz-danger) 15%, transparent);
    color: var(--rz-danger);
}
/* /Components/Pages/Admin/Product/LensConfigurator/TemplateAdmin.razor.rz.scp.css */
.template-admin[b-2osnfddhzq] {
    padding: 24px;
    max-width: 1200px;
}

.template-admin__header[b-2osnfddhzq] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.template-admin__header h2[b-2osnfddhzq] {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
}

.template-admin__subtitle[b-2osnfddhzq] {
    margin: 4px 0 0;
    color: var(--rz-text-secondary-color);
    font-size: 14px;
}

/* Loading */
.template-admin__loading[b-2osnfddhzq] {
    display: flex;
    justify-content: center;
    padding: 48px;
}

/* Empty state */
.template-admin__empty[b-2osnfddhzq] {
    text-align: center;
    padding: 48px;
    color: var(--rz-text-secondary-color);
}

[b-2osnfddhzq] .template-admin__empty .rzi {
    font-size: 48px;
    opacity: 0.3;
}

.template-admin__empty p[b-2osnfddhzq] {
    margin: 8px 0 0;
}

.template-admin__empty-hint[b-2osnfddhzq] {
    font-size: 12px;
    opacity: 0.6;
}

/* Grid */
.template-admin__grid[b-2osnfddhzq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

/* Card */
.template-admin__card[b-2osnfddhzq] {
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 10px;
    padding: 20px;
    cursor: pointer;
    position: relative;
    transition: box-shadow 200ms ease, border-color 200ms ease;
}

.template-admin__card:hover[b-2osnfddhzq] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--rz-primary);
}

.template-admin__card--inactive[b-2osnfddhzq] {
    opacity: 0.65;
}

.template-admin__card-header[b-2osnfddhzq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.template-admin__card-title[b-2osnfddhzq] {
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    margin-right: 8px;
}

.template-admin__card-badge[b-2osnfddhzq] {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 12px;
    white-space: nowrap;
}

.template-admin__card-badge--active[b-2osnfddhzq] {
    background: color-mix(in srgb, var(--rz-success) 15%, transparent);
    color: var(--rz-success);
}

.template-admin__card-badge--inactive[b-2osnfddhzq] {
    background: color-mix(in srgb, var(--rz-text-secondary-color) 15%, transparent);
    color: var(--rz-text-secondary-color);
}

.template-admin__card-description[b-2osnfddhzq] {
    font-size: 13px;
    color: var(--rz-text-secondary-color);
    margin: 0 0 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.template-admin__card-footer[b-2osnfddhzq] {
    display: flex;
    gap: 16px;
}

.template-admin__card-meta[b-2osnfddhzq] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--rz-text-secondary-color);
}

.template-admin__card-actions[b-2osnfddhzq] {
    position: absolute;
    top: 12px;
    right: 12px;
    opacity: 0;
    transition: opacity 200ms ease;
}

.template-admin__card:hover .template-admin__card-actions[b-2osnfddhzq] {
    opacity: 1;
}

.template-admin__card-btn[b-2osnfddhzq] {
    border: none;
    background: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    color: var(--rz-text-secondary-color);
    transition: all 150ms ease;
}

.template-admin__card-btn:hover[b-2osnfddhzq] {
    color: var(--rz-text-color);
}

.template-admin__card-btn--delete:hover[b-2osnfddhzq] {
    color: var(--rz-danger);
}
/* /Components/Pages/Admin/Product/LensConfigurator/TemplateDetail.razor.rz.scp.css */
.template-detail[b-gw5ugs0zfw] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--rz-base-background-color);
}

.template-detail__toolbar[b-gw5ugs0zfw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 24px;
    border-bottom: 1px solid var(--rz-border-color);
    gap: 12px;
    flex-shrink: 0;
}

.template-detail__toolbar-left[b-gw5ugs0zfw] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.template-detail__toolbar-right[b-gw5ugs0zfw] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.template-detail__title[b-gw5ugs0zfw] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--rz-text-color);
}

.template-detail__status[b-gw5ugs0zfw] {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
}

.template-detail__status--active[b-gw5ugs0zfw] {
    background: color-mix(in srgb, var(--rz-success) 14%, transparent);
    color: var(--rz-success);
}

.template-detail__status--inactive[b-gw5ugs0zfw] {
    background: color-mix(in srgb, var(--rz-text-secondary-color) 12%, transparent);
    color: var(--rz-text-secondary-color);
}

.template-detail__loading[b-gw5ugs0zfw],
.template-detail__empty[b-gw5ugs0zfw] {
    display: flex;
    justify-content: center;
    padding: 48px;
    color: var(--rz-text-secondary-color);
}

.template-detail__breadcrumbs[b-gw5ugs0zfw] {
    background: var(--rz-base-background-color);
    border-bottom: 1px solid var(--rz-border-color);
    padding: 10px 24px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    overflow-x: auto;
}

.template-detail__breadcrumb-chip[b-gw5ugs0zfw] {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    border: 1px solid var(--rz-border-color);
    background: transparent;
    color: var(--rz-text-color);
    transition: all 150ms;
}

.template-detail__breadcrumb-chip--done[b-gw5ugs0zfw] {
    color: var(--rz-text-secondary-color);
}

.template-detail__breadcrumb-chip--done:hover[b-gw5ugs0zfw] {
    border-color: var(--rz-primary);
    color: var(--rz-primary);
}

.template-detail__breadcrumb-chip--active[b-gw5ugs0zfw] {
    background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
    color: var(--rz-primary);
    border-color: var(--rz-primary);
}

[b-gw5ugs0zfw] .template-detail__breadcrumb-arrow {
    font-size: 16px;
    color: var(--rz-text-secondary-color);
}

.template-detail__content[b-gw5ugs0zfw] {
    display: grid;
    grid-template-columns: 1fr 300px;
    flex: 1;
    overflow: hidden;
}

.template-detail__editor[b-gw5ugs0zfw] {
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.template-detail__step-empty[b-gw5ugs0zfw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 64px 24px;
    text-align: center;
    color: var(--rz-text-secondary-color);
}

[b-gw5ugs0zfw] .template-detail__step-empty .rzi {
    font-size: 48px;
    opacity: 0.4;
}

.template-detail__meta-card[b-gw5ugs0zfw] {
    background: color-mix(in srgb, var(--rz-primary) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--rz-primary) 18%, transparent);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.template-detail__step-card[b-gw5ugs0zfw] {
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.template-detail__step-header[b-gw5ugs0zfw] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.template-detail__step-header-row[b-gw5ugs0zfw] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
}

.template-detail__step-actions[b-gw5ugs0zfw] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.template-detail__options-header[b-gw5ugs0zfw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--rz-border-color);
    padding-top: 14px;
}

.template-detail__options-header h4[b-gw5ugs0zfw] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
}

.template-detail__options-empty[b-gw5ugs0zfw] {
    font-size: 13px;
    color: var(--rz-text-secondary-color);
    font-style: italic;
    margin: 0;
}

.template-detail__options-grid[b-gw5ugs0zfw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.template-detail__option-card[b-gw5ugs0zfw] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--rz-border-color);
    border-radius: 8px;
    background: transparent;
}

.template-detail__option-thumb-btn[b-gw5ugs0zfw] {
    border: 1px dashed var(--rz-border-color);
    border-radius: 8px;
    background: var(--rz-base-100);
    aspect-ratio: 16/9;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: border-color 150ms;
}

.template-detail__option-thumb-btn:hover[b-gw5ugs0zfw] {
    border-color: var(--rz-primary);
    border-style: solid;
}

.template-detail__option-thumb-btn img[b-gw5ugs0zfw] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

[b-gw5ugs0zfw] .template-detail__option-thumb-btn .rzi {
    font-size: 32px !important;
    color: var(--rz-text-disabled-color);
}

.template-detail__option-fields[b-gw5ugs0zfw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.template-detail__option-features[b-gw5ugs0zfw] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.template-detail__option-features-label[b-gw5ugs0zfw] {
    font-size: 11px;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.template-detail__option-flow[b-gw5ugs0zfw] {
    border-top: 1px dashed var(--rz-border-color);
    padding-top: 8px;
}

.template-detail__option-endpoint-row[b-gw5ugs0zfw],
.template-detail__option-next-row[b-gw5ugs0zfw],
.template-detail__option-unlinked-row[b-gw5ugs0zfw] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.template-detail__option-endpoint-badge[b-gw5ugs0zfw] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: color-mix(in srgb, var(--rz-success) 14%, transparent);
    color: var(--rz-success);
}

.template-detail__option-nav-btn[b-gw5ugs0zfw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--rz-primary);
    border-radius: 6px;
    background: color-mix(in srgb, var(--rz-primary) 10%, transparent);
    color: var(--rz-primary);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    flex: 1;
}

.template-detail__option-nav-btn:hover[b-gw5ugs0zfw] {
    background: color-mix(in srgb, var(--rz-primary) 18%, transparent);
}

.template-detail__option-next-actions[b-gw5ugs0zfw] {
    display: flex;
    gap: 4px;
}

.template-detail__option-link[b-gw5ugs0zfw],
.template-detail__option-small-btn[b-gw5ugs0zfw],
.template-detail__option-link-btn[b-gw5ugs0zfw],
.template-detail__option-endpoint-toggle[b-gw5ugs0zfw] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border: 1px solid var(--rz-border-color);
    border-radius: 6px;
    background: transparent;
    color: var(--rz-text-secondary-color);
    cursor: pointer;
    font-size: 11px;
    font-family: inherit;
    transition: all 150ms;
}

.template-detail__option-link[b-gw5ugs0zfw] {
    border: none;
    background: transparent;
    color: var(--rz-primary);
    text-decoration: underline;
}

.template-detail__option-small-btn:hover[b-gw5ugs0zfw],
.template-detail__option-link-btn:hover[b-gw5ugs0zfw],
.template-detail__option-endpoint-toggle:hover[b-gw5ugs0zfw] {
    border-color: var(--rz-primary);
    color: var(--rz-primary);
}

.template-detail__option-small-btn--danger:hover[b-gw5ugs0zfw] {
    border-color: var(--rz-danger);
    color: var(--rz-danger);
}

.template-detail__option-link-btn[b-gw5ugs0zfw] {
    flex: 1;
    justify-content: center;
    border-style: dashed;
}

.template-detail__option-actions[b-gw5ugs0zfw] {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

/* Tree panel */
.template-detail__tree-panel[b-gw5ugs0zfw] {
    background: var(--rz-base-background-color);
    border-left: 1px solid var(--rz-border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 200ms ease;
}

.template-detail__tree-panel--collapsed[b-gw5ugs0zfw] {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
}

.template-detail__content:has(.template-detail__tree-panel--collapsed)[b-gw5ugs0zfw] {
    grid-template-columns: 1fr 40px;
}

.template-detail__tree-header[b-gw5ugs0zfw] {
    padding: 14px 16px;
    border-bottom: 1px solid var(--rz-border-color);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.template-detail__tree-toggle[b-gw5ugs0zfw] {
    width: 28px;
    height: 28px;
    border: 1px solid var(--rz-border-color);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rz-text-secondary-color);
}

.template-detail__tree-toggle:hover[b-gw5ugs0zfw] {
    border-color: var(--rz-primary);
    color: var(--rz-primary);
}

.template-detail__tree-title[b-gw5ugs0zfw] {
    font-size: 13px;
    font-weight: 600;
    color: var(--rz-text-color);
}

.template-detail__tree-body[b-gw5ugs0zfw] {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.template-detail__tree-empty[b-gw5ugs0zfw] {
    padding: 20px;
    color: var(--rz-text-disabled-color);
    font-size: 12px;
    text-align: center;
}

.template-detail__tree-node[b-gw5ugs0zfw] {
    padding-right: 8px;
}

.template-detail__tree-node-btn[b-gw5ugs0zfw] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px 7px 8px;
    border: none;
    border-left: 2px solid transparent;
    background: none;
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    color: var(--rz-text-color);
    transition: all 150ms ease;
    border-radius: 0 6px 6px 0;
    text-align: left;
}

.template-detail__tree-node-btn:hover[b-gw5ugs0zfw] {
    background: color-mix(in srgb, var(--rz-primary) 8%, transparent);
    border-left-color: color-mix(in srgb, var(--rz-primary) 40%, transparent);
}

.template-detail__tree-node-btn--active[b-gw5ugs0zfw] {
    background: color-mix(in srgb, var(--rz-primary) 14%, transparent);
    border-left-color: var(--rz-primary);
    color: var(--rz-primary);
    font-weight: 600;
}

.template-detail__tree-node-title[b-gw5ugs0zfw] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.template-detail__tree-node-badge[b-gw5ugs0zfw] {
    font-size: 10px;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
    background: color-mix(in srgb, var(--rz-text-secondary-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--rz-text-secondary-color) 20%, transparent);
    padding: 1px 7px;
    border-radius: 999px;
    min-width: 18px;
    text-align: center;
}

.template-detail__tree-node-btn--active .template-detail__tree-node-badge[b-gw5ugs0zfw] {
    color: var(--rz-primary);
    background: color-mix(in srgb, var(--rz-primary) 14%, transparent);
    border-color: color-mix(in srgb, var(--rz-primary) 28%, transparent);
}

.template-detail__tree-node-option-btn[b-gw5ugs0zfw] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 4px 10px 4px 8px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 11px;
    font-family: inherit;
    color: var(--rz-text-secondary-color);
    font-style: italic;
    text-align: left;
    transition: background-color 150ms;
}

.template-detail__tree-node-option-btn:hover[b-gw5ugs0zfw] {
    background: color-mix(in srgb, var(--rz-text-secondary-color) 8%, transparent);
    color: var(--rz-text-color);
}

.template-detail__tree-node-option-icon[b-gw5ugs0zfw] {
    display: inline-flex;
    align-items: center;
    width: 14px;
    font-size: 13px;
    color: var(--rz-text-secondary-color);
}

.template-detail__tree-node-option-title[b-gw5ugs0zfw] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Step picker modal */
.template-detail__picker-backdrop[b-gw5ugs0zfw] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1040;
}

.template-detail__picker[b-gw5ugs0zfw] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(820px, 92vw);
    max-height: 80vh;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    z-index: 1050;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.template-detail__picker-header[b-gw5ugs0zfw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--rz-border-color);
}

.template-detail__picker-header h3[b-gw5ugs0zfw] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.template-detail__picker-close[b-gw5ugs0zfw] {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--rz-text-secondary-color);
    padding: 4px;
    border-radius: 6px;
}

.template-detail__picker-close:hover[b-gw5ugs0zfw] {
    background: color-mix(in srgb, var(--rz-text-secondary-color) 12%, transparent);
    color: var(--rz-text-color);
}

.template-detail__picker-body[b-gw5ugs0zfw] {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.template-detail__picker-section[b-gw5ugs0zfw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.template-detail__picker-section-header[b-gw5ugs0zfw] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rz-text-color);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--rz-border-color);
}

[b-gw5ugs0zfw] .template-detail__picker-section-header .rzi {
    font-size: 18px !important;
    color: var(--rz-primary);
}

.template-detail__picker-section-hint[b-gw5ugs0zfw] {
    margin: 0;
    font-size: 11px;
    color: var(--rz-text-secondary-color);
    line-height: 1.4;
}

.template-detail__picker-grid[b-gw5ugs0zfw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}

.template-detail__picker-tile[b-gw5ugs0zfw] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--rz-border-color);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: all 150ms;
}

.template-detail__picker-tile:hover[b-gw5ugs0zfw] {
    border-color: var(--rz-primary);
    background: color-mix(in srgb, var(--rz-primary) 5%, transparent);
    transform: translateY(-1px);
}

.template-detail__picker-tile--new[b-gw5ugs0zfw] {
    border-style: dashed;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 18px;
    color: var(--rz-text-secondary-color);
    max-width: 280px;
}

[b-gw5ugs0zfw] .template-detail__picker-tile--new .rzi {
    font-size: 28px !important;
}

.template-detail__picker-tile--reuse[b-gw5ugs0zfw] {
    border-color: color-mix(in srgb, var(--rz-primary) 22%, transparent);
}

.template-detail__picker-tile--library[b-gw5ugs0zfw] {
    border-color: color-mix(in srgb, var(--rz-info) 28%, transparent);
}

.template-detail__picker-tile--current[b-gw5ugs0zfw] {
    border-width: 2px;
    border-color: var(--rz-success);
    background: color-mix(in srgb, var(--rz-success) 6%, transparent);
}

.template-detail__picker-tile-badges[b-gw5ugs0zfw] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 18px;
}

.template-detail__picker-tile-badge[b-gw5ugs0zfw] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 999px;
}

.template-detail__picker-tile-badge--library[b-gw5ugs0zfw] {
    color: var(--rz-info);
    background: color-mix(in srgb, var(--rz-info) 14%, transparent);
}

.template-detail__picker-tile-badge--current[b-gw5ugs0zfw] {
    color: var(--rz-success);
    background: color-mix(in srgb, var(--rz-success) 16%, transparent);
}

.template-detail__picker-tile-category[b-gw5ugs0zfw] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--rz-primary);
    background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
}

.template-detail__picker-tile-title[b-gw5ugs0zfw] {
    font-size: 13px;
    font-weight: 700;
    color: var(--rz-text-color);
}

.template-detail__picker-tile-options[b-gw5ugs0zfw] {
    font-size: 11px;
    color: var(--rz-text-secondary-color);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.template-detail__picker-tile-desc[b-gw5ugs0zfw],
.template-detail__picker-tile-count[b-gw5ugs0zfw] {
    font-size: 11px;
    color: var(--rz-text-secondary-color);
}

.template-detail__picker-tile-footer[b-gw5ugs0zfw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed var(--rz-border-color);
    font-size: 11px;
    color: var(--rz-text-secondary-color);
}

.template-detail__picker-tile-refcount[b-gw5ugs0zfw] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
    color: var(--rz-primary);
}

.template-detail__picker-tile-refcount--orphan[b-gw5ugs0zfw] {
    color: var(--rz-warning);
}

[b-gw5ugs0zfw] .template-detail__picker-tile-refcount .rzi {
    font-size: 13px !important;
}
/* /Components/Pages/Admin/Purchasing/SentPurchaseOrdersPanel.razor.rz.scp.css */
/* Een afgekeurde order moet eruit springen: rode rand rondom de kaart, naast het rode
   uitroepteken en de reden erin (DT-6.4-24). */
[b-y4lckxntcw] .b2b-sent-order--rejected {
    border: 2px solid var(--rz-danger);
    border-radius: var(--rz-card-border-radius, 8px);
}

[b-y4lckxntcw] .b2b-sent-order {
    margin-bottom: 0.75rem;
}
/* /Components/Pages/Aftersales/Components/AftersalesCaseListPanel.razor.rz.scp.css */
/*
    Caselijst over alle klanten (DT-66670.3-5). Rijen als klikbare regels met een statuspil,
    in dezelfde stijl als het nazorg-paneel op het klantendashboard.
*/

.nazorg-caselist[b-pg7qqc0yle] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nazorg-caselist__row[b-pg7qqc0yle] {
    display: grid;
    grid-template-columns: 130px 1fr 130px 120px 100px 150px;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--rz-border);
    border-radius: 3px;
    background: var(--rz-base-background-color);
    cursor: pointer;
    text-align: left;
}

.nazorg-caselist__row:hover[b-pg7qqc0yle] {
    border-color: var(--rz-primary);
    background: var(--rz-primary-lighter, var(--rz-base-background-color));
}

.nazorg-caselist__number[b-pg7qqc0yle] {
    font-family: monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--rz-text-color);
}

.nazorg-caselist__customer[b-pg7qqc0yle] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--rz-text-color);
    overflow: hidden;
}

/* De order waarop de klacht slaat — één regel, afgekapt als het montuur lang is. */
.nazorg-caselist__order[b-pg7qqc0yle] {
    font-size: 11px;
    font-weight: 500;
    color: var(--rz-text-secondary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nazorg-caselist__category[b-pg7qqc0yle],
.nazorg-caselist__date[b-pg7qqc0yle],
.nazorg-caselist__cause[b-pg7qqc0yle] {
    font-size: 11.5px;
    color: var(--rz-text-secondary-color);
}

/* Aanmerking-teller op de regel; de laatste aanmerking staat in de tooltip. */
.nazorg-caselist__remarks[b-pg7qqc0yle] {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--rz-primary);
    cursor: help;
}

.nazorg-caselist__empty[b-pg7qqc0yle] {
    padding: 14px 4px;
    font-size: 12.5px;
    color: var(--rz-text-secondary-color);
}

/* Statuspil — zelfde kleurcodering als de caselijst op het klantendashboard. */
.nazorg-pill[b-pg7qqc0yle] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}

.nazorg-pill--open[b-pg7qqc0yle] { background: #FDF0DC; color: #8A5A00; }
.nazorg-pill--treatment[b-pg7qqc0yle] { background: #DDEEFB; color: #12557E; }
.nazorg-pill--awaiting[b-pg7qqc0yle] { background: #EFE6FA; color: #5B3E8E; }
.nazorg-pill--closed[b-pg7qqc0yle] { background: #E8EAED; color: #4A5057; }

@media (max-width: 900px) {
    .nazorg-caselist__row[b-pg7qqc0yle] {
        grid-template-columns: 1fr 1fr;
        row-gap: 4px;
    }
}
/* /Components/Pages/Aftersales/Components/AftersalesWorklistPanel.razor.rz.scp.css */
/*
    Terugmeet-werklijst (DT-66670.3-5) — dezelfde toon als het nazorg-paneel op het
    klantendashboard: rustige rijen, één accentkleur, geen zware kaders.
*/

.nazorg-worklist[b-5dagartogl] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nazorg-worklist__row[b-5dagartogl] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 11px;
    border: 1px solid var(--rz-border);
    border-left: 3px solid var(--rz-warning);
    border-radius: 3px;
    background: var(--rz-base-background-color);
}

.nazorg-worklist__main[b-5dagartogl] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.nazorg-worklist__customer[b-5dagartogl] {
    align-self: flex-start;
    padding: 0;
    background: none;
    border: none;
    font-size: 13px;
    font-weight: 700;
    color: var(--rz-primary);
    cursor: pointer;
    text-align: left;
}

.nazorg-worklist__meta[b-5dagartogl] {
    font-size: 11px;
    color: var(--rz-text-secondary-color);
}

.nazorg-worklist__complaint[b-5dagartogl] {
    font-size: 11.5px;
    color: var(--rz-text-secondary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nazorg-worklist__contact[b-5dagartogl] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex: 0 0 auto;
}

.nazorg-worklist__phone[b-5dagartogl] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--rz-text-color);
    text-decoration: none;
}

.nazorg-worklist__phone--missing[b-5dagartogl] {
    color: var(--rz-text-disabled-color);
    font-weight: 500;
    font-style: italic;
}

.nazorg-worklist__overdue[b-5dagartogl] {
    font-size: 11px;
    font-weight: 600;
    color: var(--rz-warning-dark, var(--rz-warning));
}

.nazorg-worklist__actions[b-5dagartogl] {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}

.nazorg-worklist__count[b-5dagartogl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--rz-warning);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.nazorg-worklist__empty[b-5dagartogl] {
    padding: 14px 4px;
    font-size: 12.5px;
    color: var(--rz-text-secondary-color);
}

@media (max-width: 760px) {
    .nazorg-worklist__row[b-5dagartogl] {
        flex-direction: column;
        align-items: stretch;
    }

    .nazorg-worklist__contact[b-5dagartogl] {
        align-items: flex-start;
    }
}
/* /Components/Pages/CustomerDashboard/Components/AccessoriesOrderDrawer.razor.rz.scp.css */
/*
    Verkooporder-drawer op het OrderShell-skelet (BigEpic 66675, Fase 2).
    Alleen --em-*-tokens; geen hardcoded kleuren of fonts.
*/

.aod-left[b-m1ybgolwl6] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.aod-left__flow[b-m1ybgolwl6] {
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--em-border-secondary);
}

/* Kop van de productlijst; tegelijk de weg naar het fulfilment-paneel. */
.aod-prodhead[b-m1ybgolwl6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    font: inherit;
    text-align: left;
    padding: 0.875rem 1.25rem 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
}

.aod-prodhead__label[b-m1ybgolwl6] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--em-text-tertiary);
}

.aod-prodhead__right[b-m1ybgolwl6] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--em-primary);
    font-size: 0.6875rem;
    font-weight: 600;
}

.aod-prodhead__bar[b-m1ybgolwl6] {
    display: inline-block;
    width: 46px;
    height: 4px;
    border-radius: 2px;
    background: var(--em-border-secondary);
    overflow: hidden;
}

.aod-prodhead__bar-fill[b-m1ybgolwl6] {
    display: block;
    height: 100%;
    background: var(--em-success);
}

.aod-prodhead__counter[b-m1ybgolwl6] {
    white-space: nowrap;
}

/* De kaartlijst is het enige dat scrollt; kop, betaling en aanmaak-blok blijven staan. */
.aod-left__list[b-m1ybgolwl6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 1.25rem 0.875rem;
}

.aod-left__check[b-m1ybgolwl6] {
    margin-top: 0.25rem;
}

.aod-left__empty[b-m1ybgolwl6] {
    font-size: 0.75rem;
    color: var(--em-text-tertiary);
    padding: 0.75rem 0.25rem;
}

/* Betaling staat onderaan de kolom vastgezet, boven het aanmaak-blok. */
.aod-left__payment[b-m1ybgolwl6] {
    margin-top: auto;
    flex: 0 0 auto;
    padding: 0.75rem 1.25rem;
    background: var(--em-bg-surface);
    border-top: 1px solid var(--em-border-primary);
}

.aod-pay__row[b-m1ybgolwl6] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--em-text-secondary);
    padding: 0.1rem 0;
}

.aod-pay__row--total[b-m1ybgolwl6] {
    margin-top: 0.35rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--em-border-secondary);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--em-text-primary);
}

.aod-pay__value[b-m1ybgolwl6] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.aod-left__create[b-m1ybgolwl6] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--em-border-primary);
}

.aod-left__error[b-m1ybgolwl6] {
    padding: 0.625rem 1.25rem;
}

.aod-right[b-m1ybgolwl6] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.aod-right__advice[b-m1ybgolwl6] {
    padding: 0.875rem 1.25rem;
    /* ruimte vrijhouden voor de ruiter-rail rechts */
    padding-right: calc(48px + 1.25rem);
    flex-shrink: 0;
}

.aod-right__financial[b-m1ybgolwl6] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 1.25rem 1rem;
    padding-right: calc(48px + 1.25rem);
}

/* ── Ruiter Producten ── */

.aod-line[b-m1ybgolwl6] {
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--em-border-primary);
    border-radius: var(--em-radius-md);
    background: var(--em-surface-secondary);
}

.aod-line__meta[b-m1ybgolwl6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.aod-line__source[b-m1ybgolwl6] {
    font-size: 0.75rem;
    color: var(--em-text-secondary);
}

.aod-line__total[b-m1ybgolwl6] {
    font-weight: 700;
    font-size: 0.9em;
    white-space: nowrap;
}

/* Eén kaart met alle productregels: rijen zonder tussen-separators, bedragen rechts. */
.aod-cardline[b-m1ybgolwl6] {
    display: block;
    padding: 0.4rem 0;
}

.aod-cardline + .aod-cardline[b-m1ybgolwl6] {
    border-top: 1px dashed var(--rz-border-color);
}

.aod-cardline__top[b-m1ybgolwl6] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
}

.aod-cardline__title[b-m1ybgolwl6] {
    font-weight: 600;
    color: var(--rz-text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aod-cardline__price[b-m1ybgolwl6] {
    font-family: var(--em-font-mono, monospace);
    white-space: nowrap;
}

.aod-cardline__foot[b-m1ybgolwl6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

.aod-cardline__status[b-m1ybgolwl6] {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    background: var(--em-sem-neutral-bg, #eef2f2);
    color: var(--em-sem-neutral-text, #5c777d);
}

.aod-cardline__status--success[b-m1ybgolwl6] {
    background: var(--em-sem-success-bg, #e8f3ee);
    color: var(--em-sem-success-text, #1f6b52);
}

.aod-cardline__status--warning[b-m1ybgolwl6] {
    background: var(--em-sem-warning-bg, #fbf1e0);
    color: var(--em-sem-warning-text, #8a5c14);
}

.aod-cardline__meta[b-m1ybgolwl6],
.aod-cardline__source[b-m1ybgolwl6] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Pages/CustomerDashboard/Components/Aftersales/AftersalesCaseComposer.razor.rz.scp.css */
/*
    Registratie-flow voor een nieuwe nazorgcase — zelfde visuele taal als de drawer en de
    After-sales-sectie (handover 28-07-2026).

    De klassenamen (nazorg-drawer__*) zijn bewust ongewijzigd gebleven toen deze markup uit de
    drawer naar de gedeelde component verhuisde: dat houdt het uiterlijk in beide instappen
    identiek. Blazor's scoped CSS werkt per component, dus de regels staan hier opnieuw —
    overerven van de drawer-stylesheet kan niet.
*/
.nazorg-composer[b-ssqhngikhc] {
    --nz-border: #E2DED4;
    --nz-sunken: #FCFBF7;
    --nz-ink: #16323B;
    --nz-ink-muted: #5A6B71;
    --nz-ink-faint: #8A979C;

    display: flex;
    flex-direction: column;
    gap: 14px;
    color: var(--nz-ink);
}

.nazorg-drawer__block[b-ssqhngikhc] {
    background: var(--nz-sunken);
    border: 1px solid var(--nz-border);
    border-radius: 4px;
    padding: 13px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nazorg-drawer__label[b-ssqhngikhc] {
    font-size: 11px;
    font-weight: 600;
    color: var(--nz-ink-muted);
}

/* Geen orders in de gekozen categorie: doorgaan zonder order blijft toegestaan. */
.nazorg-drawer__empty[b-ssqhngikhc] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 12.5px;
    color: var(--nz-ink);
}

.nazorg-drawer__empty-hint[b-ssqhngikhc] {
    font-size: 11.5px;
    color: var(--nz-ink-faint);
}
/* /Components/Pages/CustomerDashboard/Components/Aftersales/AftersalesCaseDrawer.razor.rz.scp.css */
/* Nazorgcase-drawer — zelfde visuele taal als de After-sales-sectie (handover 28-07-2026). */
.nazorg-drawer[b-rkmxbg2x2a] {
    --nz-border: #E2DED4;
    --nz-sunken: #FCFBF7;
    --nz-ink: #16323B;
    --nz-ink-muted: #5A6B71;
    --nz-ink-faint: #8A979C;

    display: flex;
    flex-direction: column;
    gap: 14px;
    color: var(--nz-ink);
}

.nazorg-drawer__block[b-rkmxbg2x2a] {
    background: var(--nz-sunken);
    border: 1px solid var(--nz-border);
    border-radius: 4px;
    padding: 13px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nazorg-drawer__label[b-rkmxbg2x2a] {
    font-size: 11px;
    font-weight: 600;
    color: var(--nz-ink-muted);
}

.nazorg-drawer__value[b-rkmxbg2x2a] {
    font-size: 12.5px;
}

.nazorg-drawer__caseno[b-rkmxbg2x2a] {
    font-family: 'Spline Sans Mono', ui-monospace, monospace;
    font-size: 13px;
    font-weight: 700;
}

.nazorg-drawer__meta[b-rkmxbg2x2a] {
    font-size: 11.5px;
    color: var(--nz-ink-muted);
}

.nazorg-drawer__meta-sep[b-rkmxbg2x2a] {
    margin: 0 6px;
    color: var(--nz-ink-faint);
}

.nazorg-drawer__complaint[b-rkmxbg2x2a] {
    font-size: 12.5px;
    color: var(--nz-ink);
}

.nazorg-drawer__action[b-rkmxbg2x2a] {
    display: flex;
    gap: 10px;
    font-size: 12px;
}

.nazorg-drawer__action-date[b-rkmxbg2x2a] {
    font-family: 'Spline Sans Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--nz-ink-faint);
    flex: none;
}

.nazorg-drawer__buttons[b-rkmxbg2x2a] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Aanmerkingen: chronologisch lijstje met wie en wanneer (DT-66670.3-6). */
.nazorg-remark[b-rkmxbg2x2a] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 9px;
    border-left: 2px solid var(--nz-border);
    background: #fff;
    border-radius: 3px;
}

.nazorg-remark__meta[b-rkmxbg2x2a] {
    display: flex;
    gap: 8px;
    font-size: 10.5px;
    color: var(--nz-ink-faint);
}

.nazorg-remark__who[b-rkmxbg2x2a] {
    font-weight: 700;
    color: var(--nz-ink-muted);
}

.nazorg-remark__text[b-rkmxbg2x2a] {
    font-size: 12.5px;
    white-space: pre-wrap;
}

.nazorg-remark__add[b-rkmxbg2x2a] {
    align-self: flex-start;
}
/* /Components/Pages/CustomerDashboard/Components/Aftersales/AftersalesCaseWizard.razor.rz.scp.css */
/*
   Nazorg-wizard — visuele taal uit de handover "Klantendashboard ombouwen naar de EyeManage-stijl"
   (28-07-2026): teal/licht op warm-grijs, kleine radii (2-4px), dunne borders, geen schaduwen
   buiten overlays, geen gradients.

   De tokens staan hier component-scoped en niet in design-system.css: dat bestand stuurt het hele
   app-palet, en het herstylen van de rest van het dashboard is een eigen traject. Zodra dat traject
   de tokens globaal neerzet, kunnen deze regels ernaar verwijzen in plaats van ze te herhalen.
*/
.nazorg-wizard[b-apmjdqh9do] {
    --nz-surface: #FFFFFF;
    --nz-sunken: #FCFBF7;
    --nz-border: #E2DED4;
    --nz-primary: #0E7C9B;
    --nz-primary-tint: #E8F3F6;
    --nz-primary-line: #BFE0E8;
    --nz-accent: #E07B3C;
    --nz-accent-hover: #D06E30;
    --nz-ink: #16323B;
    --nz-ink-muted: #5A6B71;
    --nz-ink-faint: #8A979C;

    background: var(--nz-sunken);
    border: 1px solid var(--nz-border);
    border-radius: 4px;
    padding: 15px;
    position: relative;
    min-height: 260px;
    color: var(--nz-ink);
}

.nazorg-wizard__head[b-apmjdqh9do] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 11px;
}

.nazorg-wizard__back[b-apmjdqh9do] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--nz-primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.nazorg-wizard__step[b-apmjdqh9do] {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--nz-accent);
}

.nazorg-wizard__crumb[b-apmjdqh9do] {
    font-size: 11.5px;
    color: var(--nz-ink-faint);
    margin-bottom: 10px;
}

/* Toewijzingsbalk — staat op elke stap, samen met "verder later". */
.nazorg-wizard__assign[b-apmjdqh9do] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    background: var(--nz-surface);
    border: 1px solid var(--nz-border);
    border-radius: 3px;
    padding: 7px 9px;
    margin-bottom: 10px;
}

.nazorg-wizard__assign-label[b-apmjdqh9do] {
    font-size: 11px;
    color: var(--nz-ink-muted);
}

/* Persoonchip: de enige plek waar een volledig ronde radius is toegestaan. */
.nazorg-chip[b-apmjdqh9do] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 999px;
    cursor: pointer;
    color: var(--nz-ink-muted);
    background: var(--nz-surface);
    border: 1px solid var(--nz-border);
}

.nazorg-chip--active[b-apmjdqh9do] {
    color: var(--nz-primary);
    background: var(--nz-primary-tint);
    border-color: var(--nz-primary-line);
}

.nazorg-chip__dot[b-apmjdqh9do] {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: var(--nz-primary);
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nazorg-wizard__partial[b-apmjdqh9do] {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: var(--nz-accent);
    border: none;
    border-radius: 3px;
    padding: 6px 10px;
    cursor: pointer;
}

.nazorg-wizard__partial:hover:not(:disabled)[b-apmjdqh9do] {
    background: var(--nz-accent-hover);
}

.nazorg-wizard__partial:disabled[b-apmjdqh9do] {
    opacity: .45;
    cursor: default;
}

.nazorg-wizard__options[b-apmjdqh9do] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Optierij: teal stip, label, chevron-teken. Hover verkleurt alleen, verschuift niets. */
.nazorg-option[b-apmjdqh9do] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    text-align: left;
    padding: 10px 11px;
    border-radius: 3px;
    background: var(--nz-surface);
    border: 1px solid var(--nz-border);
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nz-ink);
}

.nazorg-option:hover[b-apmjdqh9do] {
    border-color: var(--nz-primary-line);
    background: var(--nz-primary-tint);
}

.nazorg-option__dot[b-apmjdqh9do] {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--nz-primary);
    flex: none;
}

.nazorg-option__label[b-apmjdqh9do] {
    flex: 1;
}

.nazorg-option__chevron[b-apmjdqh9do] {
    margin-left: auto;
    color: #B7C1C4;
}

.nazorg-result[b-apmjdqh9do] {
    background: var(--nz-surface);
    border: 1px solid var(--nz-border);
    border-radius: 3px;
    padding: 12px;
    margin-bottom: 10px;
}

.nazorg-result__label[b-apmjdqh9do] {
    font-size: 11px;
    font-weight: 600;
    color: var(--nz-ink-muted);
    margin-bottom: 4px;
}

.nazorg-result__value[b-apmjdqh9do] {
    font-size: 12.5px;
    color: var(--nz-ink);
    margin-bottom: 9px;
}

.nazorg-result__value--strong[b-apmjdqh9do] {
    font-weight: 700;
}

.nazorg-result__resolver[b-apmjdqh9do] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--nz-primary);
}

/* Medische afslag: informatief, nooit een blame-keuze. */
.nazorg-medical[b-apmjdqh9do] {
    background: #FBEFDD;
    border: 1px solid #F0D6B4;
    border-radius: 3px;
    padding: 9px 11px;
    font-size: 11.5px;
    color: #B86E10;
    margin-bottom: 10px;
}

.nazorg-attribution[b-apmjdqh9do] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.nazorg-attribution__label[b-apmjdqh9do] {
    font-size: 11px;
    font-weight: 600;
    color: var(--nz-ink-muted);
}

.nazorg-attribution__row[b-apmjdqh9do] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border-radius: 3px;
    background: var(--nz-surface);
    border: 1px solid var(--nz-border);
    cursor: pointer;
}

.nazorg-attribution__row:hover[b-apmjdqh9do],
.nazorg-attribution__row--active[b-apmjdqh9do] {
    border-color: var(--nz-primary-line);
    background: var(--nz-primary-tint);
}

.nazorg-attribution__name[b-apmjdqh9do] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--nz-ink);
}

.nazorg-attribution__reason[b-apmjdqh9do] {
    font-size: 11px;
    color: var(--nz-ink-faint);
}

/* Het foutonderdeel dat uit de beslisboom volgt, benadrukt in de labelregel. */
.nazorg-attribution__part[b-apmjdqh9do] {
    font-weight: 700;
    color: var(--nz-ink);
}

/* De automatisch afgeleide verantwoordelijke — geen keuze, wel zichtbaar en corrigeerbaar. */
.nazorg-attribution__derived[b-apmjdqh9do] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nz-primary);
}

.nazorg-attribution__derived--none[b-apmjdqh9do] {
    color: var(--nz-ink-faint);
    font-weight: 600;
}

.nazorg-attribution__correct[b-apmjdqh9do] {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 600;
    padding: 0;
    background: none;
    border: none;
    color: var(--nz-ink-muted);
    text-decoration: underline;
    cursor: pointer;
}

/* "Ander…" blijft visueel secundair: de betrokkenen zijn de normale keuze. */
.nazorg-attribution__row--other[b-apmjdqh9do],
.nazorg-chip--other[b-apmjdqh9do] {
    color: var(--nz-ink-faint);
    border-style: dashed;
}

/* Groene bevestigingsstrook; verdwijnt vanzelf. */
.nazorg-confirm[b-apmjdqh9do] {
    margin-top: 10px;
    background: #E7F5EC;
    border: 1px solid #B9E2C8;
    border-radius: 3px;
    padding: 9px 11px;
    font-size: 12px;
    color: #1C6B3C;
    font-weight: 600;
}

.nazorg-error[b-apmjdqh9do] {
    margin-top: 10px;
    background: #FBE9EC;
    border: 1px solid #F0C9C6;
    border-radius: 3px;
    padding: 9px 11px;
    font-size: 12px;
    color: #D6483F;
    font-weight: 600;
}
/* /Components/Pages/CustomerDashboard/Components/Aftersales/AftersalesPanel.razor.rz.scp.css */
/*
   After-sales-sectie — handover §3.1 (kolom met 3px domein-accent boven) en §3.2 (kaart met 3px
   status-accent links). Statuspill is rechthoekig met radius 2px; alleen de persoonchip mag rond.
*/
.nazorg-panel[b-i78eh7u3oy] {
    --nz-surface: #FFFFFF;
    --nz-border: #E2DED4;
    --nz-primary: #0E7C9B;
    --nz-primary-tint: #E8F3F6;
    --nz-primary-line: #BFE0E8;
    --nz-accent: #E07B3C;
    --nz-accent-tint: #FBEFDD;
    --nz-accent-ink: #B86E10;
    --nz-ink: #16323B;
    --nz-ink-muted: #5A6B71;
    --nz-ink-faint: #8A979C;

    background: var(--nz-surface);
    border: 1px solid var(--nz-border);
    border-top: 3px solid var(--nz-accent);
    border-radius: 4px;
    padding: 16px 18px;
    color: var(--nz-ink);
}

.nazorg-panel__head[b-i78eh7u3oy] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.nazorg-panel__icon[b-i78eh7u3oy] {
    color: var(--nz-accent);
    font-size: 18px;
    line-height: 1;
}

.nazorg-panel__title[b-i78eh7u3oy] {
    font-size: 14.5px;
    font-weight: 800;
}

.nazorg-panel__count[b-i78eh7u3oy] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--nz-accent-ink);
    background: var(--nz-accent-tint);
    border-radius: 2px;
    padding: 3px 9px;
}

.nazorg-panel__action[b-i78eh7u3oy] {
    margin-left: auto;
}

.nazorg-panel__grid[b-i78eh7u3oy] {
    display: grid;
    grid-template-columns: 330px 1fr;
    gap: 18px;
    align-items: start;
}

@media (max-width: 900px) {
    .nazorg-panel__grid[b-i78eh7u3oy] {
        grid-template-columns: 1fr;
    }
}

.nazorg-panel__list-label[b-i78eh7u3oy] {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--nz-ink-faint);
    margin-bottom: 11px;
}

.nazorg-panel__list[b-i78eh7u3oy] {
    display: flex;
    flex-direction: column;
}

.nazorg-panel__empty[b-i78eh7u3oy] {
    font-size: 12px;
    color: var(--nz-ink-faint);
    padding: 11px 0;
}

/* Caseregel: 3px status-accent links, hover verkleurt alleen de rand. */
.nazorg-row[b-i78eh7u3oy] {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    text-align: left;
    border: 1px solid var(--nz-border);
    border-left: 3px solid var(--nz-ink-faint);
    border-radius: 3px;
    padding: 11px 13px;
    margin-bottom: 8px;
    background: var(--nz-surface);
    cursor: pointer;
}

.nazorg-row:hover[b-i78eh7u3oy] {
    border-color: var(--nz-primary-line);
}

.nazorg-row--open[b-i78eh7u3oy] { border-left-color: var(--nz-accent); }
.nazorg-row--treatment[b-i78eh7u3oy] { border-left-color: var(--nz-primary); }
.nazorg-row--awaiting[b-i78eh7u3oy] { border-left-color: #C9A227; }
.nazorg-row--closed[b-i78eh7u3oy] { border-left-color: #2E9E5B; opacity: .72; }

.nazorg-row__icon[b-i78eh7u3oy] {
    color: var(--nz-primary);
    font-size: 17px;
    line-height: 1;
    flex: none;
}

.nazorg-row__main[b-i78eh7u3oy] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 150px;
}

.nazorg-row__title[b-i78eh7u3oy] {
    font-size: 12.5px;
    font-weight: 700;
}

.nazorg-row__sub[b-i78eh7u3oy] {
    font-size: 11.5px;
    color: var(--nz-ink-faint);
}

/* De order waarop de klacht slaat — één regel, afgekapt als het montuur lang is. */
.nazorg-row__order[b-i78eh7u3oy] {
    font-size: 11px;
    color: var(--nz-ink-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nazorg-row__date[b-i78eh7u3oy] {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--nz-ink-muted);
}

/* Statuspill: rechthoekig (radius 2px), vaste breedte zodat de kolom uitlijnt. */
.nazorg-pill[b-i78eh7u3oy] {
    font-size: 10.5px;
    font-weight: 700;
    border-radius: 2px;
    padding: 4px 10px;
    width: 104px;
    text-align: center;
    flex: none;
}

.nazorg-pill--open[b-i78eh7u3oy] { color: var(--nz-accent-ink); background: var(--nz-accent-tint); }
.nazorg-pill--treatment[b-i78eh7u3oy] { color: var(--nz-primary); background: var(--nz-primary-tint); }
.nazorg-pill--awaiting[b-i78eh7u3oy] { color: #B7891B; background: #FBF3DE; }
.nazorg-pill--closed[b-i78eh7u3oy] { color: #2E9E5B; background: #E7F5EC; }
/* /Components/Pages/CustomerDashboard/Components/AppointmentPanel.razor.rz.scp.css */
/* Snelboek-overlay (Klantendashboard v2 §3.5): X rechtsboven, geen Annuleren-knop */
.quickbook-overlay[b-6l8wrzirhr] {
    position: absolute;
    top: 44px;
    left: 13px;
    right: 13px;
    z-index: 6;
    background: var(--rz-surface-background);
    border: 1px solid var(--rz-border-color);
    border-radius: var(--em-radius-sm);
    box-shadow: var(--em-shadow-overlay);
    padding: 12px;
}

.quickbook-overlay__close[b-6l8wrzirhr] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: var(--em-radius-sm);
    background: var(--rz-surface-hover);
    border: none;
    color: var(--em-text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.quickbook-overlay__close:hover[b-6l8wrzirhr] {
    background: var(--em-primary-tint);
    color: var(--em-primary);
}

.quickbook-overlay__close[b-6l8wrzirhr]  .rzi {
    font-size: 14px;
}

.quickbook-overlay__label[b-6l8wrzirhr] {
    font-size: 10.5px;
    font-weight: 700;
    font-family: var(--em-font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--em-text-tertiary);
    margin-bottom: 8px;
    margin-right: 26px;
}

.quickbook-overlay__types[b-6l8wrzirhr] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.quickbook-overlay__type[b-6l8wrzirhr] {
    font-size: 11.5px;
    font-weight: 700;
    border-radius: var(--em-radius-sm);
    padding: 8px 12px;
    cursor: pointer;
    border: none;
    color: var(--em-text-inverse);
    background: var(--em-primary);
}

.quickbook-overlay__type:hover[b-6l8wrzirhr] {
    background: var(--em-primary-dark);
}

.quickbook-overlay__full[b-6l8wrzirhr] {
    width: 100%;
    padding: 10px;
    border-radius: 3px;
    background: var(--em-primary);
    color: var(--em-text-inverse);
    border: none;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.quickbook-overlay__full:hover[b-6l8wrzirhr] {
    background: var(--em-primary-dark);
}

/* Afspraaktype als zachte tint-balk — zelfde stijl als .exam-name-bar op de medische kaart
   (Klantendashboard v2): primary-tint vlak + primary tekst, meerregelig */
[b-6l8wrzirhr] .appointment-type-bar {
    background: var(--em-primary-tint);
    color: var(--em-primary);
    border-radius: 3px;
    padding: 5px 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.02em;
    white-space: normal;
    word-break: break-word;
}
/* /Components/Pages/CustomerDashboard/Components/ContactlensOrderDrawer.razor.rz.scp.css */
/*
    Contactlensorder-drawer op het OrderShell-skelet (BigEpic 66675, Fase 3).
    Verhuisd uit het inline <style>-blok van ContactlensOrderDrawer.razor; alle
    hardcoded hex-kleuren zijn vervangen door --em-*-tokens.

    CSS-isolation: alle klassen hieronder horen bij markup die in dít component
    gedeclareerd is (ook de ruiter-panelen — een RenderFragment draagt de scope van
    het component dat hem definieert). Waar we een element van een kind-component
    raken (de knoppen van CustomButton in de abonnements-toggle) staat ::deep.
*/

/* ── Ruiter: Parameters ── */

.cl-params-eye[b-p5mc1jte9q] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--rz-panel-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 4px;
    padding: 12px 14px;
}

.cl-params-eye-header[b-p5mc1jte9q] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.cl-params-replacement[b-p5mc1jte9q] {
    font-size: 0.72rem;
    color: var(--rz-text-secondary-color);
}

.cl-params-grid[b-p5mc1jte9q] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.cl-rgp-params[b-p5mc1jte9q] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

.cl-rgp-fields[b-p5mc1jte9q] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: flex-start;
}

.cl-rgp-param[b-p5mc1jte9q] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.cl-rgp-param__k[b-p5mc1jte9q] {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-text-secondary-color);
}

.cl-rgp-param__v[b-p5mc1jte9q] {
    font-size: 0.9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cl-rgp-setbadge[b-p5mc1jte9q] {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 1px 7px;
    border-radius: 9999px;
    background: var(--rz-primary-lighter);
    color: var(--rz-primary);
    font-variant-numeric: tabular-nums;
}

.cl-params-badge[b-p5mc1jte9q] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 4px;
    color: #fff;
}

.cl-params-badge--od[b-p5mc1jte9q] { background: var(--em-eye-od); }
.cl-params-badge--os[b-p5mc1jte9q] { background: var(--em-eye-os); }

.cl-params-product[b-p5mc1jte9q] {
    font-size: 0.875rem;
    font-weight: 600;
}

/* ── Ruiter: Lens-selectie — afgeleide waarden ── */

.cl-derived[b-p5mc1jte9q] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.cl-derived__col[b-p5mc1jte9q] {
    background: var(--rz-panel-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 4px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cl-derived__title[b-p5mc1jte9q] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: var(--rz-text-secondary-color);
    margin-bottom: 0.15rem;
}

.cl-derived__line[b-p5mc1jte9q] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cl-derived__eye[b-p5mc1jte9q] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: 3px;
    color: #fff;
}

.cl-derived__eye--od[b-p5mc1jte9q] { background: var(--em-eye-od); }
.cl-derived__eye--os[b-p5mc1jte9q] { background: var(--em-eye-os); }

.cl-derived__val[b-p5mc1jte9q] {
    font-size: 0.9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cl-derived__note[b-p5mc1jte9q] {
    font-size: 0.7rem;
    color: var(--rz-text-secondary-color);
    margin-top: 0.15rem;
}

@media (max-width: 600px) {
    .cl-derived[b-p5mc1jte9q] {
        grid-template-columns: 1fr;
    }
}

/* ── Ruiter: Verpakking ── */

.cl-pack-eye[b-p5mc1jte9q] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.cl-pack-eye-header[b-p5mc1jte9q] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.cl-pack-options[b-p5mc1jte9q] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.cl-pack-card[b-p5mc1jte9q] {
    font-family: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 150px;
    padding: 10px 14px;
    border: 1px solid var(--rz-border-color);
    border-radius: 6px;
    background: var(--rz-panel-background-color);
    color: var(--rz-text-color);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.12s, background 0.12s;
}

.cl-pack-card:hover[b-p5mc1jte9q] {
    border-color: var(--rz-primary);
}

.cl-pack-card--selected[b-p5mc1jte9q] {
    border-color: var(--rz-primary);
    box-shadow: inset 0 0 0 1px var(--rz-primary);
    background: var(--rz-primary-lighter);
}

.cl-pack-card__count[b-p5mc1jte9q] {
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cl-pack-card__unit[b-p5mc1jte9q] {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--rz-text-secondary-color);
}

.cl-pack-card__dur[b-p5mc1jte9q] {
    font-size: 0.72rem;
    color: var(--rz-text-secondary-color);
}

.cl-pack-card__price[b-p5mc1jte9q] {
    font-size: 0.9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin-top: 0.1rem;
}

.cl-pack-card--nudge[b-p5mc1jte9q] {
    cursor: default;
    opacity: 0.6;
}

.cl-pack-card__nudge-label[b-p5mc1jte9q] {
    font-size: 0.68rem;
    font-style: italic;
    color: var(--rz-text-secondary-color);
}

.cl-selected-lens-name[b-p5mc1jte9q] {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.25rem 0;
}

.cl-pack-total[b-p5mc1jte9q] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 12px 14px;
    border-top: 2px solid var(--rz-border-color);
    font-weight: 600;
}

.cl-pack-total__amount[b-p5mc1jte9q] {
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
    color: var(--rz-primary);
}

/* ── Linkerkolom: één kaartlijst orderregels (DT-66675.4-2) ── */

.cod-left[b-p5mc1jte9q] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.cod-left__flow[b-p5mc1jte9q] {
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--em-border-secondary);
}

/* Kop van de productlijst; tegelijk de weg naar het fulfilment-paneel. */
.cod-prodhead[b-p5mc1jte9q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    font: inherit;
    text-align: left;
    padding: 0.875rem 1.25rem 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
}

.cod-prodhead__label[b-p5mc1jte9q] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--em-text-tertiary);
}

.cod-prodhead__right[b-p5mc1jte9q] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--em-primary);
    font-size: 0.6875rem;
    font-weight: 600;
}

.cod-prodhead__bar[b-p5mc1jte9q] {
    display: inline-block;
    width: 46px;
    height: 4px;
    border-radius: 2px;
    background: var(--em-border-secondary);
    overflow: hidden;
}

.cod-prodhead__bar-fill[b-p5mc1jte9q] {
    display: block;
    height: 100%;
    background: var(--em-success);
}

.cod-prodhead__counter[b-p5mc1jte9q] {
    white-space: nowrap;
}

/* De kaartlijst is het enige dat scrollt; kop en betaling blijven staan. */
.cod-left__list[b-p5mc1jte9q] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 1.25rem 0.875rem;
}

/* Recept-regel plus de HA-schakelaar eronder als één geheel. */
.cod-left__rx[b-p5mc1jte9q] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cod-left__check[b-p5mc1jte9q] {
    margin-top: 0.25rem;
}

.cod-left__empty[b-p5mc1jte9q] {
    font-size: 0.75rem;
    color: var(--em-text-tertiary);
    padding: 0.75rem 0.25rem;
}

/* Betaling staat onderaan de kolom vastgezet, net als in de glasorder-drawer. */
.cod-left__payment[b-p5mc1jte9q] {
    margin-top: auto;
    flex: 0 0 auto;
    padding: 0.75rem 1.25rem;
    background: var(--em-bg-surface);
    border-top: 1px solid var(--em-border-primary);
}

.cod-pay__row[b-p5mc1jte9q] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--em-text-secondary);
    padding: 0.1rem 0;
}

.cod-pay__row--total[b-p5mc1jte9q] {
    margin-top: 0.35rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--em-border-secondary);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--em-text-primary);
}

.cod-pay__value[b-p5mc1jte9q] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Rechterkolom: advies boven, financieel blok onder ── */

.cod-right[b-p5mc1jte9q] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.cod-right__advice[b-p5mc1jte9q] {
    padding: 0.875rem 1.25rem;
    /* ruimte vrijhouden voor de ruiter-rail rechts */
    padding-right: calc(48px + 1.25rem);
    flex-shrink: 0;
}

.cod-right__financial[b-p5mc1jte9q] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 1.25rem 1rem;
    padding-right: calc(48px + 1.25rem);
}

/* ── DT-14-6: abonnementsbanner in de linkerkolom ── */

.cl-sub-banner[b-p5mc1jte9q] {
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--em-border-secondary);
}

.cl-sub-banner__head[b-p5mc1jte9q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

/* De gekozen leveringsmodus als badge; kwam uit het samengevoegde Abonnement-blok. */
.cl-sub-banner__mode[b-p5mc1jte9q] {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 9999px;
    white-space: nowrap;
    background: var(--em-bg-surface-sunken);
    color: var(--em-primary);
}

/* De HA-schakelaar boven de recept-regel: compact en rechts uitgelijnd boven de kaart. */
.cl-ha-toggle[b-p5mc1jte9q] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.25rem;
}

.cl-ha-toggle[b-p5mc1jte9q]  .rz-selectbutton .rz-button {
    padding: 0 0.4rem;
    font-size: 0.625rem;
    min-width: 0;
}

.cl-sub-banner__label[b-p5mc1jte9q] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rz-text-tertiary-color, var(--rz-text-secondary-color));
}

.cl-sub-banner__name[b-p5mc1jte9q] {
    font-size: 0.82rem;
}

.cl-sub-banner__muted[b-p5mc1jte9q] {
    font-size: 0.78rem;
    color: var(--rz-text-secondary-color);
}

.cl-sub-banner__choice[b-p5mc1jte9q] {
    display: flex;
    gap: 0.4rem;
    margin: 0.4rem 0 0.35rem;
}

/* Twee CustomButtons als één segmented-toggle: gelijke breedte, gecentreerd.
   ::deep omdat de knop zelf door CustomButton gerenderd wordt. */
.cl-sub-banner__choice[b-p5mc1jte9q]  .rz-button {
    flex: 1 1 0;
    justify-content: center;
}

.cl-sub-banner__restricted[b-p5mc1jte9q] {
    font-size: 0.72rem;
    color: var(--rz-text-secondary-color);
    margin-top: 0.25rem;
}

.cl-member-badge[b-p5mc1jte9q] {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 1px 7px;
    border-radius: 9999px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    vertical-align: middle;
    background: var(--rz-primary-lighter);
    color: var(--rz-primary);
}
/* /Components/Pages/CustomerDashboard/Components/CustomerPhotoDialog.razor.rz.scp.css */
.cp-dialog[b-gvih1kmc7i] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cp-tabs[b-gvih1kmc7i] {
    display: flex;
    gap: 0.5rem;
}

.cp-pane[b-gvih1kmc7i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.cp-hint[b-gvih1kmc7i] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--rz-text-secondary-color);
}

.cp-file[b-gvih1kmc7i] {
    width: 100%;
}

.cp-video[b-gvih1kmc7i] {
    width: 100%;
    max-width: 360px;
    aspect-ratio: 4 / 3;
    background: #000;
    border-radius: 8px;
    object-fit: cover;
}

.cp-crop-pane[b-gvih1kmc7i] {
    width: 100%;
}

.cp-canvas[b-gvih1kmc7i] {
    width: 300px;
    height: 360px;
    max-width: 100%;
    border-radius: 8px;
    border: 1px solid var(--rz-border-color, rgba(0, 0, 0, 0.12));
    background: #f4f4f4;
    cursor: grab;
    touch-action: none;
}

.cp-canvas:active[b-gvih1kmc7i] {
    cursor: grabbing;
}

.cp-zoom[b-gvih1kmc7i] {
    width: 300px;
    max-width: 100%;
}

.cp-history[b-gvih1kmc7i] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-top: 1px solid var(--rz-border-color, rgba(0, 0, 0, 0.08));
    padding-top: 0.75rem;
}

.cp-history__title[b-gvih1kmc7i] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
}

.cp-history__strip[b-gvih1kmc7i] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cp-thumb[b-gvih1kmc7i] {
    position: relative;
    width: 56px;
    height: 67px;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid transparent;
}

.cp-thumb--active[b-gvih1kmc7i] {
    border-color: var(--rz-primary);
}

.cp-thumb img[b-gvih1kmc7i] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    display: block;
}

.cp-thumb__del[b-gvih1kmc7i] {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    padding: 0;
}

.cp-thumb__del:hover[b-gvih1kmc7i] {
    background: var(--rz-danger, #d32f2f);
}
/* /Components/Pages/CustomerDashboard/Components/GlassesOrderDrawer.razor.rz.scp.css */
/*
    Glasorder-drawer op het OrderShell-skelet (BigEpic 66675, Fase 1).
    Alleen --em-*-tokens; geen hardcoded kleuren of fonts.
*/

.god-left[b-zbubzu24m0] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.god-left__flow[b-zbubzu24m0] {
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--em-border-secondary);
}

/* Kop van de productlijst; tegelijk de weg naar het fulfilment-paneel. */
.god-prodhead[b-zbubzu24m0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    font: inherit;
    text-align: left;
    padding: 0.875rem 1.25rem 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
}

.god-prodhead__label[b-zbubzu24m0] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--em-text-tertiary);
}

.god-prodhead__right[b-zbubzu24m0] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--em-primary);
    font-size: 0.6875rem;
    font-weight: 600;
}

.god-prodhead__bar[b-zbubzu24m0] {
    display: inline-block;
    width: 46px;
    height: 4px;
    border-radius: 2px;
    background: var(--em-border-secondary);
    overflow: hidden;
}

.god-prodhead__bar-fill[b-zbubzu24m0] {
    display: block;
    height: 100%;
    background: var(--em-success);
}

.god-prodhead__counter[b-zbubzu24m0] {
    white-space: nowrap;
}

/* De kaartlijst is het enige dat scrollt; kop en betaling blijven staan. */
.god-left__list[b-zbubzu24m0] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 1.25rem 0.875rem;
}

.god-left__check[b-zbubzu24m0] {
    margin-top: 0.25rem;
}

.god-left__empty[b-zbubzu24m0] {
    font-size: 0.75rem;
    color: var(--em-text-tertiary);
    padding: 0.75rem 0.25rem;
}

/* Betaling staat onderaan de kolom vastgezet, net als in de oude drawer. */
.god-left__payment[b-zbubzu24m0] {
    margin-top: auto;
    flex: 0 0 auto;
    padding: 0.75rem 1.25rem;
    background: var(--em-bg-surface);
    border-top: 1px solid var(--em-border-primary);
}

.god-pay__row[b-zbubzu24m0] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--em-text-secondary);
    padding: 0.1rem 0;
}

.god-pay__row--total[b-zbubzu24m0] {
    margin-top: 0.35rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--em-border-secondary);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--em-text-primary);
}

.god-pay__value[b-zbubzu24m0] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.god-right[b-zbubzu24m0] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.god-right__advice[b-zbubzu24m0] {
    padding: 0.875rem 1.25rem;
    /* ruimte vrijhouden voor de ruiter-rail rechts */
    padding-right: calc(48px + 1.25rem);
    flex-shrink: 0;
}

.god-right__measure[b-zbubzu24m0] {
    padding: 0 1.25rem 0.875rem;
    padding-right: calc(48px + 1.25rem);
    flex-shrink: 0;
}

.god-right__financial[b-zbubzu24m0] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 1.25rem 1rem;
    padding-right: calc(48px + 1.25rem);
}

/* DT-6.12-3: herkomstchip bij een overgenomen meetveld */
.god-measure-chip[b-zbubzu24m0] {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 9999px;
    background: var(--em-bg-surface-sunken);
    color: var(--em-text-secondary);
    border: 1px solid var(--em-border-secondary);
    align-self: center;
}
/* /Components/Pages/CustomerDashboard/Components/Hearing/HearingAudiogramPanel.razor.rz.scp.css */
/*
    Audiogram-paneel van de audiologie-order (BigEpic 66675, Fase 4).
    Verhuisd uit de globale eyemanage.css; alleen dit paneel gebruikt deze klassen.
*/

.em-hearing-history[b-ywgj4spijj] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.em-hearing-history__card[b-ywgj4spijj] {
    text-align: left;
    cursor: pointer;
    min-width: 180px;
    padding: 0.5rem 0.625rem;
    border-radius: 4px;
    border: 1px solid var(--em-border-secondary, rgba(30, 45, 54, 0.6));
    background: var(--em-bg-surface, var(--rz-base-background-color));
    color: inherit;
}

.em-hearing-history__card--active[b-ywgj4spijj] {
    border-color: var(--em-primary, var(--rz-primary));
}

.em-hearing-history__head[b-ywgj4spijj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.75rem;
}

.em-hearing-history__values[b-ywgj4spijj] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.25rem;
    font-size: 0.6875rem;
}

.em-hearing-grid[b-ywgj4spijj] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.em-hearing-grid__head[b-ywgj4spijj],
.em-hearing-grid__row[b-ywgj4spijj] {
    display: grid;
    grid-template-columns: 48px repeat(6, minmax(64px, 1fr));
    gap: 0.375rem;
    align-items: center;
}

.em-hearing-grid__freq[b-ywgj4spijj] {
    font-size: 0.6875rem;
    color: var(--em-text-tertiary, var(--rz-text-tertiary-color));
    text-align: center;
}

.em-hearing-goal[b-ywgj4spijj] {
    padding: 0.625rem 0.75rem;
    border-radius: 4px;
    border: 1px solid var(--em-border-secondary, rgba(30, 45, 54, 0.6));
    background: var(--em-bg-surface-sunken, var(--rz-body-background-color));
}

.em-hearing-goal__title[b-ywgj4spijj] {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--em-text-tertiary, var(--rz-text-tertiary-color));
    margin-bottom: 0.25rem;
}

.em-hearing-goal__body[b-ywgj4spijj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
}

/* Statuspil — scoped (DT-66675.6-1: verhuisd uit wwwroot/css/eyemanage.css). */
.em-hearing-pill[b-ywgj4spijj] {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 9999px;
    background: rgba(148, 163, 184, 0.12);
    color: var(--em-text-secondary, var(--rz-text-secondary-color));
}

.em-hearing-pill--active[b-ywgj4spijj] {
    background: rgba(53, 186, 217, 0.15);
    color: var(--em-primary, var(--rz-primary));
}

/* Veldenpaar per oor — scoped (DT-66675.6-1: verhuisd uit wwwroot/css/eyemanage.css). */
.em-hearing-pair[b-ywgj4spijj] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    flex-wrap: wrap;
}
/* /Components/Pages/CustomerDashboard/Components/Hearing/HearingDevicesPanel.razor.rz.scp.css */
/*
    Toestellen-paneel van de audiologie-order (BigEpic 66675, Fase 4).
    Verhuisd uit de globale eyemanage.css; alleen dit paneel gebruikt deze klassen.
*/

.em-hearing-devices[b-oi67wzhhpx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.em-hearing-device[b-oi67wzhhpx] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 4px;
    border: 1px solid var(--em-border-secondary, rgba(30, 45, 54, 0.6));
    border-top-width: 3px;
}

.em-hearing-device__head[b-oi67wzhhpx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.em-hearing-device__product[b-oi67wzhhpx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-radius: 4px;
    background: var(--em-bg-surface-sunken, var(--rz-body-background-color));
    border: 1px solid var(--em-border-secondary, rgba(30, 45, 54, 0.6));
    font-size: 0.8125rem;
}

.em-hearing-chips[b-oi67wzhhpx] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: center;
}

.em-hearing-chips__title[b-oi67wzhhpx] {
    width: 100%;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--em-text-tertiary, var(--rz-text-tertiary-color));
}

.em-hearing-chips__add[b-oi67wzhhpx] {
    display: flex;
    gap: 0.375rem;
    align-items: flex-end;
    width: 100%;
}

.em-hearing-chip[b-oi67wzhhpx] {
    cursor: pointer;
    font-size: 0.6875rem;
    padding: 2px 8px;
    border-radius: 9999px;
    border: 1px solid var(--em-border-secondary, rgba(30, 45, 54, 0.6));
    background: transparent;
    color: var(--em-text-secondary, var(--rz-text-secondary-color));
}

.em-hearing-chip--program[b-oi67wzhhpx] {
    border-color: var(--em-primary, var(--rz-primary));
    color: var(--em-primary, var(--rz-primary));
}

/* Prijs is alleen-lezen zodra de order bestaat: het potlood in het financiële blok is leidend. */
.em-hearing-device__price[b-oi67wzhhpx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8125rem;
}

.em-hearing-device__price-hint[b-oi67wzhhpx] {
    font-size: 0.6875rem;
    color: var(--em-text-tertiary, var(--rz-text-tertiary-color));
}

/* Statuspil — scoped (DT-66675.6-1: verhuisd uit wwwroot/css/eyemanage.css). */
.em-hearing-pill[b-oi67wzhhpx] {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 9999px;
    background: rgba(148, 163, 184, 0.12);
    color: var(--em-text-secondary, var(--rz-text-secondary-color));
}

.em-hearing-pill--active[b-oi67wzhhpx] {
    background: rgba(53, 186, 217, 0.15);
    color: var(--em-primary, var(--rz-primary));
}
/* /Components/Pages/CustomerDashboard/Components/Hearing/HearingFitPanel.razor.rz.scp.css */
/*
    Pasvorm-paneel van de audiologie-order (BigEpic 66675, Fase 4).
    Verhuisd uit de globale eyemanage.css; alleen dit paneel gebruikt deze klasse.
*/

.em-hearing-warning[b-cp17xf450v] {
    font-size: 0.75rem;
    color: var(--em-warning, var(--rz-warning));
    background: var(--em-warning-lighter, rgba(184, 110, 16, 0.1));
    border-radius: 4px;
    padding: 0.5rem 0.625rem;
}

/* Veldenpaar per oor — scoped (DT-66675.6-1: verhuisd uit wwwroot/css/eyemanage.css). */
.em-hearing-pair[b-cp17xf450v] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    flex-wrap: wrap;
}
/* /Components/Pages/CustomerDashboard/Components/HearingOrderDrawer.razor.rz.scp.css */
/*
    Audiologie-order-drawer op het OrderShell-skelet (BigEpic 66675, Fase 4).
    Alleen --em-*-tokens; geen hardcoded kleuren of fonts.
*/

.hod-left[b-9adu1pkhm8] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.hod-left__flow[b-9adu1pkhm8] {
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--em-border-secondary);
}

/* Kop van de productlijst; tegelijk de weg naar het fulfilment-paneel. */
.hod-prodhead[b-9adu1pkhm8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    font: inherit;
    text-align: left;
    padding: 0.875rem 1.25rem 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
}

.hod-prodhead__label[b-9adu1pkhm8] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--em-text-tertiary);
}

.hod-prodhead__right[b-9adu1pkhm8] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--em-primary);
    font-size: 0.6875rem;
    font-weight: 600;
}

.hod-prodhead__bar[b-9adu1pkhm8] {
    display: inline-block;
    width: 46px;
    height: 4px;
    border-radius: 2px;
    background: var(--em-border-secondary);
    overflow: hidden;
}

.hod-prodhead__bar-fill[b-9adu1pkhm8] {
    display: block;
    height: 100%;
    background: var(--em-success);
}

.hod-prodhead__counter[b-9adu1pkhm8] {
    white-space: nowrap;
}

/* De kaartlijst is het enige dat scrollt; kop en betaling blijven staan. */
.hod-left__list[b-9adu1pkhm8] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 1.25rem 0.875rem;
}

.hod-left__check[b-9adu1pkhm8] {
    margin-top: 0.25rem;
}

.hod-left__empty[b-9adu1pkhm8] {
    font-size: 0.75rem;
    color: var(--em-text-tertiary);
    padding: 0.75rem 0.25rem;
}

/* Betaling staat onderaan de kolom vastgezet, net als in de glasorder. */
.hod-left__payment[b-9adu1pkhm8] {
    margin-top: auto;
    flex: 0 0 auto;
    padding: 0.75rem 1.25rem;
    background: var(--em-bg-surface);
    border-top: 1px solid var(--em-border-primary);
}

.hod-pay__row[b-9adu1pkhm8] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--em-text-secondary);
    padding: 0.1rem 0;
}

.hod-pay__row--total[b-9adu1pkhm8] {
    margin-top: 0.35rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--em-border-secondary);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--em-text-primary);
}

.hod-pay__value[b-9adu1pkhm8] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.hod-right[b-9adu1pkhm8] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.hod-right__advice[b-9adu1pkhm8] {
    padding: 0.875rem 1.25rem;
    /* ruimte vrijhouden voor de ruiter-rail rechts */
    padding-right: calc(48px + 1.25rem);
    flex-shrink: 0;
}

.hod-right__financial[b-9adu1pkhm8] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 1.25rem 1rem;
    padding-right: calc(48px + 1.25rem);
}

/* Binaurale korting onder de toestelkaarten (§7.6). */
.hod-binaural[b-9adu1pkhm8] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0 1.25rem 1rem;
}

/* Hulpstukken van vóór het gedeelde bijartikelen-paneel. */
.hod-legacy[b-9adu1pkhm8] {
    padding: 1rem 1.25rem 0;
}

.hod-legacy__title[b-9adu1pkhm8] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--em-text-tertiary);
    margin-bottom: 0.5rem;
}

.hod-legacy__row[b-9adu1pkhm8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0;
    font-size: 0.8125rem;
    border-top: 1px solid var(--em-border-secondary);
}

.hod-legacy__name[b-9adu1pkhm8] {
    flex: 1;
    min-width: 0;
}
/* /Components/Pages/CustomerDashboard/Components/LensConfigurator/ConfiguratorWizard.razor.rz.scp.css */
/* === WIZARD CONTAINER === */
.wizard[b-ll390xkl1d] {
    background: var(--rz-base-background-color, #FFFFFF);
    border-radius: 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

/* === LOADING STATE === */
.wizard-loading[b-ll390xkl1d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 80px 36px;
}

.wizard-loading__text[b-ll390xkl1d] {
    font-size: 14px;
    color: var(--rz-text-secondary-color);
}

/* === ERROR STATE === */
.wizard-error[b-ll390xkl1d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 36px;
    text-align: center;
}

.wizard-error__icon[b-ll390xkl1d] {
    font-size: 48px;
    color: var(--rz-danger);
}

.wizard-error__text[b-ll390xkl1d] {
    font-size: 14px;
    color: var(--rz-text-secondary-color);
    max-width: 400px;
}

/* === WIZARD HEADER === */
.wizard-header[b-ll390xkl1d] {
    padding: 28px 36px 20px;
    border-bottom: 1px solid var(--rz-base-300);
}

.wizard-header__title[b-ll390xkl1d] {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--rz-primary);
    margin-bottom: 8px;
}

.wizard-header__step[b-ll390xkl1d] {
    font-size: 26px;
    font-weight: 700;
    color: var(--rz-text-color);
    margin-bottom: 16px;
}

/* === PROGRESS BAR === */
.progress[b-ll390xkl1d] {
    display: flex;
    align-items: center;
    gap: 0;
}

.progress__segment[b-ll390xkl1d] {
    flex: 1;
    height: 4px;
    background: var(--rz-base-300);
    position: relative;
    transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.progress__segment:first-child[b-ll390xkl1d] {
    border-radius: 4px 0 0 4px;
}

.progress__segment:last-child[b-ll390xkl1d] {
    border-radius: 0 4px 4px 0;
}

.progress__segment--done[b-ll390xkl1d] {
    background: var(--rz-primary);
}

.progress__segment--active[b-ll390xkl1d] {
    background: linear-gradient(90deg, var(--rz-primary) 50%, var(--rz-base-300) 50%);
    animation: progress-pulse-b-ll390xkl1d 2s ease-in-out infinite;
}

@keyframes progress-pulse-b-ll390xkl1d {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.progress__dot[b-ll390xkl1d] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--rz-base-300);
    border: 2px solid var(--rz-base-background-color, #FFFFFF);
    position: relative;
    z-index: 1;
    margin: 0 -2px;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.progress__dot--done[b-ll390xkl1d] {
    background: var(--rz-primary);
}

.progress__dot--active[b-ll390xkl1d] {
    background: var(--rz-base-background-color, #FFFFFF);
    border: 3px solid var(--rz-primary);
    width: 14px;
    height: 14px;
    box-shadow: 0 0 0 4px rgba(32, 139, 170, 0.15);
}

.progress__labels[b-ll390xkl1d] {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.progress__label[b-ll390xkl1d] {
    font-size: 11px;
    font-weight: 500;
    color: var(--rz-text-disabled-color, #9CA3A8);
    text-align: center;
    flex: 1;
}

.progress__label--done[b-ll390xkl1d] {
    color: var(--rz-primary);
}

.progress__label--active[b-ll390xkl1d] {
    color: var(--rz-text-color);
    font-weight: 600;
}

/* === WIZARD BODY === */
.wizard-body[b-ll390xkl1d] {
    padding: 32px 36px;
    transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.wizard-body--transitioning[b-ll390xkl1d] {
    opacity: 0;
    transform: translateX(20px);
}

/* === CARDS GRID === */
.cards-grid[b-ll390xkl1d] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

/* === WIZARD FOOTER === */
.wizard-footer[b-ll390xkl1d] {
    padding: 20px 36px;
    border-top: 1px solid var(--rz-base-300);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--rz-base-100, #F7F5F2);
}

.wizard-footer__back[b-ll390xkl1d] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--rz-text-secondary-color);
    cursor: pointer;
    border: none;
    background: none;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.wizard-footer__back:hover[b-ll390xkl1d] {
    color: var(--rz-primary);
    background: var(--rz-base-200, #EFECE8);
}

[b-ll390xkl1d] .wizard-footer__back .rzi {
    font-size: 18px;
}

.wizard-footer__total[b-ll390xkl1d] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.wizard-footer__total-label[b-ll390xkl1d] {
    font-size: 13px;
    color: var(--rz-text-secondary-color);
}

.wizard-footer__total-amount[b-ll390xkl1d] {
    font-size: 24px;
    font-weight: 800;
    color: var(--rz-text-color);
}

.wizard-footer__next[b-ll390xkl1d] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 28px;
    border-radius: 8px;
    border: none;
    background: var(--rz-primary);
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.wizard-footer__next:hover:not(.wizard-footer__next--disabled)[b-ll390xkl1d] {
    background: var(--rz-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.wizard-footer__next--disabled[b-ll390xkl1d] {
    opacity: 0.5;
    cursor: not-allowed;
}

[b-ll390xkl1d] .wizard-footer__next .rzi {
    font-size: 18px;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .cards-grid[b-ll390xkl1d] {
        grid-template-columns: 1fr;
    }

    .wizard-header[b-ll390xkl1d],
    .wizard-body[b-ll390xkl1d],
    .wizard-footer[b-ll390xkl1d] {
        padding-left: 20px;
        padding-right: 20px;
    }

    .wizard[b-ll390xkl1d] {
        border-radius: 12px;
    }

    .wizard-header__step[b-ll390xkl1d] {
        font-size: 20px;
    }

    .wizard-footer__total-amount[b-ll390xkl1d] {
        font-size: 20px;
    }

    .wizard-footer__next[b-ll390xkl1d] {
        padding: 10px 20px;
        font-size: 14px;
    }
}
/* /Components/Pages/CustomerDashboard/Components/LensConfigurator/ConfiguratorWizardV2.razor.rz.scp.css */
/* ============================================================
   ConfiguratorWizardV2 — Lens configurator wizard (BEM: wizard-v2__)
   Uses var(--rz-*) CSS variables for dark/light theme support
   ============================================================ */

/* === CONTAINER === */
.wizard-v2[b-ljw2fx8z46] {
    background: var(--rz-base-background-color, #FFFFFF);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* === LOADING === */
.wizard-v2__loading[b-ljw2fx8z46] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 80px 36px;
}

.wizard-v2__loading-text[b-ljw2fx8z46] {
    font-size: 14px;
    color: var(--rz-text-secondary-color);
}

/* === ERROR === */
.wizard-v2__error[b-ljw2fx8z46] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 36px;
    text-align: center;
}

[b-ljw2fx8z46] .wizard-v2__error-icon {
    font-size: 48px !important;
    color: var(--rz-danger);
}

.wizard-v2__error-text[b-ljw2fx8z46] {
    font-size: 14px;
    color: var(--rz-text-secondary-color);
    max-width: 400px;
}

.wizard-v2__retry-btn[b-ljw2fx8z46] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border-radius: 8px;
    border: 1px solid var(--rz-base-400);
    background: transparent;
    color: var(--rz-text-color);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 180ms ease;
}

.wizard-v2__retry-btn:hover[b-ljw2fx8z46] {
    background: var(--rz-base-200, #EFECE8);
    border-color: var(--rz-primary);
    color: var(--rz-primary);
}

/* === HEADER === */
.wizard-v2__header[b-ljw2fx8z46] {
    padding: 28px 36px 20px;
    border-bottom: 1px solid var(--rz-base-300);
}

.wizard-v2__title[b-ljw2fx8z46] {
    font-size: 24px;
    font-weight: 700;
    color: var(--rz-text-color);
    margin: 16px 0 4px;
    text-align: center;
}

.wizard-v2__subtitle[b-ljw2fx8z46] {
    font-size: 14px;
    color: var(--rz-text-secondary-color);
    text-align: center;
    margin: 0;
}

/* === CHOICES TRAIL (replaces numbered progress bar) === */
.wizard-v2__trail[b-ljw2fx8z46] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 16px 14px;
    min-height: 28px;
}

.wizard-v2__trail:empty[b-ljw2fx8z46] {
    display: none;
}

.wizard-v2__trail-item[b-ljw2fx8z46] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 6px 12px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--rz-primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--rz-primary) 22%, transparent);
    line-height: 1.2;
}

.wizard-v2__trail-step[b-ljw2fx8z46] {
    font-size: 10px;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.wizard-v2__trail-option[b-ljw2fx8z46] {
    font-size: 13px;
    font-weight: 600;
    color: var(--rz-primary);
}

[b-ljw2fx8z46] .wizard-v2__trail-separator {
    font-size: 16px !important;
    color: var(--rz-text-secondary-color);
    opacity: 0.5;
}

/* === PROGRESS BAR (legacy, unused) === */
.wizard-v2__progress[b-ljw2fx8z46] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0 24px;
}

.wizard-v2__progress-dot[b-ljw2fx8z46] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--rz-text-disabled-color, #9CA3A8);
    background: var(--rz-base-200, #EFECE8);
    border: 2px solid var(--rz-base-300);
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.wizard-v2__progress-dot--active[b-ljw2fx8z46] {
    background: var(--rz-base-background-color, #FFFFFF);
    border: 3px solid var(--rz-primary);
    color: var(--rz-primary);
    box-shadow: 0 0 0 4px rgba(32, 139, 170, 0.12);
}

.wizard-v2__progress-dot--done[b-ljw2fx8z46] {
    background: var(--rz-primary);
    border-color: var(--rz-primary);
    color: #FFFFFF;
}

[b-ljw2fx8z46] .wizard-v2__progress-dot-check {
    font-size: 16px !important;
}

[b-ljw2fx8z46] .wizard-v2__progress-dot-icon {
    font-size: 16px !important;
}

.wizard-v2__progress-line[b-ljw2fx8z46] {
    flex: 1;
    max-width: 60px;
    height: 3px;
    background: var(--rz-base-300);
    transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.wizard-v2__progress-line--done[b-ljw2fx8z46] {
    background: var(--rz-primary);
}

.wizard-v2__progress-line--active[b-ljw2fx8z46] {
    background: linear-gradient(90deg, var(--rz-primary) 50%, var(--rz-base-300) 50%);
}

/* === BODY === */
.wizard-v2__body[b-ljw2fx8z46] {
    padding: 28px 36px;
    transition: opacity 200ms ease, transform 200ms ease;
}

.wizard-v2__body--exit[b-ljw2fx8z46] {
    opacity: 0;
    transform: translateX(16px);
}

/* === CARDS GRID === */
.wizard-v2__grid[b-ljw2fx8z46] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

/* === OPTION CARD === */
.wizard-v2__card[b-ljw2fx8z46] {
    position: relative;
    background: var(--rz-base-background-color, #FFFFFF);
    border: 2px solid var(--rz-base-300);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.wizard-v2__card:hover[b-ljw2fx8z46] {
    border-color: var(--rz-base-400);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.wizard-v2__card--selected[b-ljw2fx8z46] {
    border-color: var(--rz-primary);
    box-shadow: 0 0 0 3px rgba(32, 139, 170, 0.15), 0 4px 16px rgba(0, 0, 0, 0.08);
}

.wizard-v2__card--selected:hover[b-ljw2fx8z46] {
    border-color: var(--rz-primary);
}

/* Card: hover-overlay — grijze laag met grote Selecteer-knop; klik = selecteren + direct door */
.wizard-v2__card-overlay[b-ljw2fx8z46] {
    position: absolute;
    inset: 0;
    background: rgba(55, 65, 75, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
    z-index: 3;
}

.wizard-v2__card:hover .wizard-v2__card-overlay[b-ljw2fx8z46] {
    opacity: 1;
    pointer-events: auto;
}

.wizard-v2__card-overlay-btn[b-ljw2fx8z46] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 36px;
    font-size: 1.05rem;
    font-weight: 600;
    color: #FFFFFF;
    background: var(--rz-primary);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    transition: transform 120ms ease, filter 120ms ease;
}

.wizard-v2__card-overlay-btn:hover[b-ljw2fx8z46] {
    filter: brightness(1.08);
    transform: scale(1.04);
}

/* Card: badges */
.wizard-v2__card-badges[b-ljw2fx8z46] {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 6px;
    z-index: 2;
}

.wizard-v2__badge[b-ljw2fx8z46] {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wizard-v2__badge--popular[b-ljw2fx8z46] {
    background: var(--rz-warning-lighter, #FFF3CD);
    color: var(--rz-warning-darker, #856404);
}

.wizard-v2__badge--recommended[b-ljw2fx8z46] {
    background: var(--rz-success-lighter, #D1E7DD);
    color: var(--rz-success-darker, #0A5C36);
}

/* Card: selected checkmark */
.wizard-v2__card-check[b-ljw2fx8z46] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--rz-primary);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    animation: wizard-v2-check-pop-b-ljw2fx8z46 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

[b-ljw2fx8z46] .wizard-v2__card-check .rzi {
    font-size: 16px;
}

@keyframes wizard-v2-check-pop-b-ljw2fx8z46 {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

/* Card: image — scales height with width based on actual image aspect ratio */
.wizard-v2__card-image[b-ljw2fx8z46] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rz-base-100, #F7F5F2);
    overflow: hidden;
}

.wizard-v2__card-image img[b-ljw2fx8z46] {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Fallback area (no image) keeps a sensible aspect ratio */
.wizard-v2__card-image:not(:has(img))[b-ljw2fx8z46] {
    aspect-ratio: 4 / 3;
}

[b-ljw2fx8z46] .wizard-v2__card-image-fallback {
    font-size: 48px !important;
    color: var(--rz-base-400);
}

/* Card: content */
.wizard-v2__card-content[b-ljw2fx8z46] {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wizard-v2__card-title[b-ljw2fx8z46] {
    font-size: 16px;
    font-weight: 700;
    color: var(--rz-text-color);
}

.wizard-v2__card-subtitle[b-ljw2fx8z46] {
    font-size: 13px;
    color: var(--rz-text-secondary-color);
    margin-bottom: 4px;
}

/* Card: features list */
.wizard-v2__features[b-ljw2fx8z46] {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wizard-v2__feature[b-ljw2fx8z46] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--rz-text-color);
}

.wizard-v2__feature--excluded[b-ljw2fx8z46] {
    color: var(--rz-text-disabled-color, #9CA3A8);
}

[b-ljw2fx8z46] .wizard-v2__feature-icon {
    font-size: 14px !important;
    flex-shrink: 0;
}

[b-ljw2fx8z46] .wizard-v2__feature-icon--yes {
    color: var(--rz-success, #198754);
}

[b-ljw2fx8z46] .wizard-v2__feature-icon--no {
    color: var(--rz-text-disabled-color, #9CA3A8);
}

/* Card: footer with price */
.wizard-v2__card-footer[b-ljw2fx8z46] {
    padding: 12px 16px;
    border-top: 1px solid var(--rz-base-200, #EFECE8);
    display: flex;
    justify-content: flex-end;
}

.wizard-v2__price[b-ljw2fx8z46] {
    font-size: 14px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
}

.wizard-v2__price--extra[b-ljw2fx8z46] {
    background: var(--rz-base-100, #F7F5F2);
    color: var(--rz-text-color);
}

.wizard-v2__price--included[b-ljw2fx8z46] {
    background: var(--rz-success-lighter, #D1E7DD);
    color: var(--rz-success-darker, #0A5C36);
}

/* === UPSELL === */
.wizard-v2__upsell[b-ljw2fx8z46] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border: 2px solid var(--rz-base-300);
    border-radius: 12px;
    background: var(--rz-base-100, #F7F5F2);
    transition: all 200ms ease;
}

.wizard-v2__upsell--accepted[b-ljw2fx8z46] {
    border-color: var(--rz-success, #198754);
    background: var(--rz-success-lighter, #D1E7DD);
}

.wizard-v2__upsell-left[b-ljw2fx8z46] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.wizard-v2__upsell-img[b-ljw2fx8z46] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
}

.wizard-v2__upsell-icon-wrap[b-ljw2fx8z46] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: var(--rz-primary-lighter, #E0F2F7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rz-primary);
}

.wizard-v2__upsell-text[b-ljw2fx8z46] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wizard-v2__upsell-title[b-ljw2fx8z46] {
    font-size: 14px;
    font-weight: 600;
    color: var(--rz-text-color);
}

.wizard-v2__upsell-desc[b-ljw2fx8z46] {
    font-size: 12px;
    color: var(--rz-text-secondary-color);
}

.wizard-v2__upsell-right[b-ljw2fx8z46] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.wizard-v2__upsell-price[b-ljw2fx8z46] {
    font-size: 15px;
    font-weight: 700;
    color: var(--rz-text-color);
}

.wizard-v2__upsell-btn[b-ljw2fx8z46] {
    padding: 8px 18px;
    border-radius: 8px;
    border: 1px solid var(--rz-base-400);
    background: var(--rz-base-background-color, #FFFFFF);
    color: var(--rz-text-color);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 180ms ease;
}

.wizard-v2__upsell-btn:hover[b-ljw2fx8z46] {
    background: var(--rz-primary-lighter, #E0F2F7);
    border-color: var(--rz-primary);
    color: var(--rz-primary);
}

.wizard-v2__upsell-btn--active[b-ljw2fx8z46] {
    background: var(--rz-success, #198754);
    border-color: var(--rz-success, #198754);
    color: #FFFFFF;
}

.wizard-v2__upsell-btn--active:hover[b-ljw2fx8z46] {
    background: var(--rz-danger, #DC3545);
    border-color: var(--rz-danger, #DC3545);
    color: #FFFFFF;
}

/* === SUMMARY === */
.wizard-v2__summary[b-ljw2fx8z46] {
    padding: 28px 36px;
}

.wizard-v2__summary-product[b-ljw2fx8z46] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: var(--rz-primary-lighter, #E0F2F7);
    border-radius: 12px;
    margin-bottom: 24px;
}

.wizard-v2__summary-product-icon[b-ljw2fx8z46] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--rz-primary);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wizard-v2__summary-product-info[b-ljw2fx8z46] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wizard-v2__summary-product-name[b-ljw2fx8z46] {
    font-size: 15px;
    font-weight: 700;
    color: var(--rz-text-color);
}

.wizard-v2__summary-product-desc[b-ljw2fx8z46] {
    font-size: 12px;
    color: var(--rz-text-secondary-color);
}

.wizard-v2__summary-list[b-ljw2fx8z46] {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--rz-base-300);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}

.wizard-v2__summary-row[b-ljw2fx8z46] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--rz-base-200, #EFECE8);
}

.wizard-v2__summary-row:last-child[b-ljw2fx8z46] {
    border-bottom: none;
}

.wizard-v2__summary-row--upsell[b-ljw2fx8z46] {
    background: var(--rz-base-100, #F7F5F2);
    padding-left: 44px;
}

.wizard-v2__summary-row-left[b-ljw2fx8z46] {
    display: flex;
    align-items: center;
    gap: 10px;
}

[b-ljw2fx8z46] .wizard-v2__summary-check {
    font-size: 18px !important;
    color: var(--rz-success, #198754);
    flex-shrink: 0;
}

[b-ljw2fx8z46] .wizard-v2__summary-upsell-icon {
    font-size: 18px !important;
    color: var(--rz-primary);
    flex-shrink: 0;
}

.wizard-v2__summary-row-text[b-ljw2fx8z46] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.wizard-v2__summary-step[b-ljw2fx8z46] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--rz-text-secondary-color);
}

.wizard-v2__summary-option[b-ljw2fx8z46] {
    font-size: 14px;
    font-weight: 500;
    color: var(--rz-text-color);
}

.wizard-v2__summary-price[b-ljw2fx8z46] {
    font-size: 14px;
    font-weight: 600;
    color: var(--rz-text-color);
    flex-shrink: 0;
}

.wizard-v2__summary-total[b-ljw2fx8z46] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--rz-base-100, #F7F5F2);
    border-radius: 12px;
}

.wizard-v2__summary-total-label[b-ljw2fx8z46] {
    font-size: 14px;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}

.wizard-v2__summary-total-amount[b-ljw2fx8z46] {
    font-size: 24px;
    font-weight: 800;
    color: var(--rz-text-color);
    white-space: nowrap;
}

/* === FOOTER === */
.wizard-v2__footer[b-ljw2fx8z46] {
    padding: 16px 36px;
    border-top: 1px solid var(--rz-base-300);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--rz-base-100, #F7F5F2);
}

.wizard-v2__footer-spacer[b-ljw2fx8z46] {
    flex: 1;
}

.wizard-v2__btn-back[b-ljw2fx8z46] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--rz-text-secondary-color);
    cursor: pointer;
    border: none;
    background: none;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 180ms ease;
}

.wizard-v2__btn-back:hover[b-ljw2fx8z46] {
    color: var(--rz-primary);
    background: var(--rz-base-200, #EFECE8);
}

[b-ljw2fx8z46] .wizard-v2__btn-back .rzi {
    font-size: 18px;
}

.wizard-v2__footer-total[b-ljw2fx8z46] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.wizard-v2__footer-total-label[b-ljw2fx8z46] {
    font-size: 13px;
    color: var(--rz-text-secondary-color);
}

.wizard-v2__footer-total-amount[b-ljw2fx8z46] {
    font-size: 22px;
    font-weight: 800;
    color: var(--rz-text-color);
}

.wizard-v2__btn-next[b-ljw2fx8z46] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    border-radius: 8px;
    border: none;
    background: var(--rz-primary);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 180ms ease;
}

.wizard-v2__btn-next:hover:not(.wizard-v2__btn-next--disabled)[b-ljw2fx8z46] {
    background: var(--rz-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.wizard-v2__btn-next--disabled[b-ljw2fx8z46] {
    opacity: 0.4;
    cursor: not-allowed;
}

[b-ljw2fx8z46] .wizard-v2__btn-next .rzi {
    font-size: 18px;
}

.wizard-v2__btn-confirm[b-ljw2fx8z46] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 28px;
    border-radius: 8px;
    border: none;
    background: var(--rz-success, #198754);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 180ms ease;
}

.wizard-v2__btn-confirm:hover[b-ljw2fx8z46] {
    background: var(--rz-success-dark, #146C43);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

[b-ljw2fx8z46] .wizard-v2__btn-confirm .rzi {
    font-size: 18px;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .wizard-v2__grid[b-ljw2fx8z46] {
        grid-template-columns: 1fr;
    }

    .wizard-v2__header[b-ljw2fx8z46],
    .wizard-v2__body[b-ljw2fx8z46],
    .wizard-v2__summary[b-ljw2fx8z46],
    .wizard-v2__footer[b-ljw2fx8z46] {
        padding-left: 16px;
        padding-right: 16px;
    }

    .wizard-v2[b-ljw2fx8z46] {
        border-radius: 12px;
    }

    .wizard-v2__title[b-ljw2fx8z46] {
        font-size: 20px;
    }

    .wizard-v2__footer-total-amount[b-ljw2fx8z46] {
        font-size: 18px;
    }

    .wizard-v2__summary-total-amount[b-ljw2fx8z46] {
        font-size: 20px;
    }

    .wizard-v2__btn-next[b-ljw2fx8z46],
    .wizard-v2__btn-confirm[b-ljw2fx8z46] {
        padding: 8px 16px;
        font-size: 13px;
    }

    .wizard-v2__progress-dot[b-ljw2fx8z46] {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .wizard-v2__progress-line[b-ljw2fx8z46] {
        max-width: 40px;
    }

    .wizard-v2__upsell[b-ljw2fx8z46] {
        flex-direction: column;
        align-items: stretch;
    }

    .wizard-v2__upsell-right[b-ljw2fx8z46] {
        justify-content: space-between;
    }

    /* Mobile: keep image auto-height based on width, don't enforce fixed height */

    .wizard-v2__summary-row--upsell[b-ljw2fx8z46] {
        padding-left: 20px;
    }
}

@media (max-width: 480px) {
    .wizard-v2__footer[b-ljw2fx8z46] {
        flex-wrap: wrap;
        gap: 10px;
    }

    .wizard-v2__footer-total[b-ljw2fx8z46] {
        order: -1;
        width: 100%;
        justify-content: center;
    }

    .wizard-v2__btn-back[b-ljw2fx8z46],
    .wizard-v2__btn-next[b-ljw2fx8z46],
    .wizard-v2__btn-confirm[b-ljw2fx8z46] {
        flex: 1;
        justify-content: center;
    }
}

/* ── Endpoint cascade: customer choice screen ── */

.wizard-v2__choice[b-ljw2fx8z46] {
    margin-bottom: 16px;
}

.wizard-v2__choice-title[b-ljw2fx8z46] {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.wizard-v2__choice-list[b-ljw2fx8z46] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wizard-v2__choice-item[b-ljw2fx8z46] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 2px solid var(--rz-border-color);
    border-radius: 8px;
    background: var(--rz-base-background-color);
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    transition: border-color 150ms ease, background 150ms ease;
}

.wizard-v2__choice-item:hover[b-ljw2fx8z46] {
    border-color: color-mix(in srgb, var(--rz-primary) 40%, transparent);
    background: color-mix(in srgb, var(--rz-primary) 4%, transparent);
}

.wizard-v2__choice-item--selected[b-ljw2fx8z46] {
    border-color: var(--rz-primary);
    background: color-mix(in srgb, var(--rz-primary) 10%, transparent);
}

.wizard-v2__choice-priority[b-ljw2fx8z46] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--rz-primary) 16%, transparent);
    color: var(--rz-primary);
    font-weight: 700;
    font-size: 13px;
}

.wizard-v2__choice-name[b-ljw2fx8z46] {
    flex: 1;
    font-weight: 500;
}

/* Bedrag + opbouw als kolom rechts in de totaalregel. Het label houdt links zijn plek; het
   bedrag blijft op één regel (nbsp na het euroteken) en de opbouw staat eronder. */
.wizard-v2__summary-total-value[b-ljw2fx8z46] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.wizard-v2__summary-total-split[b-ljw2fx8z46] {
    font-size: 13px;
    font-weight: 500;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}
/* /Components/Pages/CustomerDashboard/Components/LensConfigurator/LensSwapPanel.razor.rz.scp.css */
.lsw[b-l84r45mbd2] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
}

.lsw__note[b-l84r45mbd2],
.lsw__empty[b-l84r45mbd2] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--em-text-secondary);
}

.lsw__list[b-l84r45mbd2] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    max-height: 320px;
    overflow-y: auto;
}

.lsw__item[b-l84r45mbd2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--em-border-secondary);
    border-radius: 8px;
    background: var(--em-bg-surface, transparent);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--em-text-primary);
}

.lsw__item:hover:not(:disabled)[b-l84r45mbd2] {
    border-color: var(--rz-primary);
}

.lsw__item--current[b-l84r45mbd2] {
    opacity: 0.6;
    cursor: default;
}

.lsw__name[b-l84r45mbd2] {
    font-weight: 600;
    flex: 1;
}

.lsw__meta[b-l84r45mbd2] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    color: var(--em-text-secondary);
}

.lsw__chip[b-l84r45mbd2] {
    padding: 1px 6px;
    border-radius: 9999px;
    background: var(--em-bg-surface-sunken);
    border: 1px solid var(--em-border-secondary);
}

.lsw__current-label[b-l84r45mbd2] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--rz-primary);
}

.lsw__actions[b-l84r45mbd2] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
/* /Components/Pages/CustomerDashboard/Components/LensConfigurator/LensSwapPricePanel.razor.rz.scp.css */
.lswp[b-r5unirsedv] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
}

.lswp__note[b-r5unirsedv] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--em-text-secondary);
}

.lswp__prices[b-r5unirsedv] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.375rem 1rem;
    margin: 0;
    font-size: 0.875rem;
}

.lswp__prices dt[b-r5unirsedv] {
    color: var(--em-text-secondary);
}

.lswp__prices dd[b-r5unirsedv] {
    margin: 0;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.lswp__actions[b-r5unirsedv] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
/* /Components/Pages/CustomerDashboard/Components/LensConfigurator/WizardOptionCard.razor.rz.scp.css */
/* === OPTION CARD === */
.option-card[b-8n08xagta1] {
    border: 2px solid var(--rz-base-300);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    background: var(--rz-base-background-color, #FFFFFF);
    display: flex;
    flex-direction: column;
}

.option-card:hover[b-8n08xagta1] {
    border-color: var(--rz-primary-light);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.option-card--selected[b-8n08xagta1] {
    border-color: var(--rz-primary);
    box-shadow: 0 0 0 3px rgba(32, 139, 170, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
}

.option-card--recommended[b-8n08xagta1] {
    border-color: var(--rz-warning-light, #FBBF24);
}

/* === BADGES === */
.card-badge[b-8n08xagta1] {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.card-badge--popular[b-8n08xagta1] {
    background: var(--rz-primary);
    color: white;
}

.card-badge--recommended[b-8n08xagta1] {
    background: linear-gradient(135deg, var(--rz-highlight), var(--rz-warning));
    color: white;
}

/* === CARD IMAGE === */
.card-image[b-8n08xagta1] {
    width: 100%;
    height: 160px;
    background: linear-gradient(135deg, #E8F4F7, #C5E4EC);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.card-image__icon[b-8n08xagta1] {
    font-size: 48px;
    color: var(--rz-primary-light);
    opacity: 0.6;
}

.card-image__img[b-8n08xagta1] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.card-image--premium[b-8n08xagta1] {
    background: linear-gradient(135deg, #E0F0F4, #B8DDE6);
}

.card-image--ultra[b-8n08xagta1] {
    background: linear-gradient(135deg, #FFF8E1, #FFE082);
}

/* === CARD CONTENT === */
.card-content[b-8n08xagta1] {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card-content__title[b-8n08xagta1] {
    font-size: 18px;
    font-weight: 700;
    color: var(--rz-text-color);
    margin-bottom: 2px;
}

.card-content__subtitle[b-8n08xagta1] {
    font-size: 13px;
    color: var(--rz-text-secondary-color);
    margin-bottom: 10px;
}

.card-content__description[b-8n08xagta1] {
    font-size: 13px;
    color: var(--rz-text-secondary-color);
    line-height: 1.5;
    margin-bottom: 16px;
}

/* === FEATURES LIST === */
.features-list[b-8n08xagta1] {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-bottom: 20px;
    flex: 1;
}

.features-list__item[b-8n08xagta1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 13px;
}

.features-list__icon[b-8n08xagta1] {
    font-size: 16px;
    flex-shrink: 0;
}

.features-list__icon--yes[b-8n08xagta1] {
    color: var(--rz-success);
}

.features-list__icon--no[b-8n08xagta1] {
    color: var(--rz-text-disabled-color, #9CA3A8);
}

.features-list__text[b-8n08xagta1] {
    color: var(--rz-text-secondary-color);
}

.features-list__text--no[b-8n08xagta1] {
    color: var(--rz-text-disabled-color, #9CA3A8);
    text-decoration: line-through;
}

/* === CARD FOOTER === */
.card-footer[b-8n08xagta1] {
    padding: 16px 20px;
    border-top: 1px solid var(--rz-base-300);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-price[b-8n08xagta1] {
    font-size: 20px;
    font-weight: 700;
    color: var(--rz-text-color);
}

.card-price--included[b-8n08xagta1] {
    color: var(--rz-success);
    font-size: 14px;
    font-weight: 600;
}

.card-btn[b-8n08xagta1] {
    padding: 8px 20px;
    border-radius: 8px;
    border: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.card-btn--select[b-8n08xagta1] {
    background: var(--rz-primary);
    color: white;
}

.card-btn--select:hover[b-8n08xagta1] {
    background: var(--rz-primary-dark);
    transform: scale(1.03);
}

.card-btn--selected[b-8n08xagta1] {
    background: var(--rz-success);
    color: white;
}

.card-btn__check-icon[b-8n08xagta1] {
    font-size: 14px;
}
/* /Components/Pages/CustomerDashboard/Components/LensConfigurator/WizardSummary.razor.rz.scp.css */
/* === SUMMARY === */
.summary[b-lk934x6k56] {
    padding: 32px 36px;
}

.summary__title[b-lk934x6k56] {
    font-size: 22px;
    font-weight: 700;
    color: var(--rz-text-color);
    margin-bottom: 24px;
}

/* === PRODUCT CARD === */
.summary-product[b-lk934x6k56] {
    background: var(--rz-base-100, #F7F5F2);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.summary-product__icon[b-lk934x6k56] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--rz-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

[b-lk934x6k56] .summary-product__icon .rzi {
    color: white;
    font-size: 20px;
}

.summary-product__name[b-lk934x6k56] {
    font-weight: 600;
    font-size: 15px;
    color: var(--rz-text-color);
}

.summary-product__desc[b-lk934x6k56] {
    font-size: 12px;
    color: var(--rz-text-secondary-color);
}

/* === SUMMARY ROWS === */
.summary-rows[b-lk934x6k56] {
    margin-bottom: 24px;
}

.summary-row[b-lk934x6k56] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--rz-base-300);
}

.summary-row:last-child[b-lk934x6k56] {
    border-bottom: none;
}

.summary-row__label[b-lk934x6k56] {
    font-size: 14px;
    color: var(--rz-text-secondary-color);
}

.summary-row__value[b-lk934x6k56] {
    font-size: 14px;
    font-weight: 600;
    color: var(--rz-text-color);
}

.summary-row--upsell .summary-row__label[b-lk934x6k56] {
    color: var(--rz-primary);
}

.summary-row--total[b-lk934x6k56] {
    border-top: 2px solid var(--rz-text-color);
    border-bottom: none;
    padding-top: 16px;
    margin-top: 8px;
}

.summary-row--total .summary-row__label[b-lk934x6k56] {
    font-size: 16px;
    font-weight: 700;
    color: var(--rz-text-color);
}

.summary-row--total .summary-row__value[b-lk934x6k56] {
    font-size: 22px;
    font-weight: 800;
    color: var(--rz-primary);
}

/* === SUMMARY FOOTER === */
.summary-footer[b-lk934x6k56] {
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
}

.summary-footer__back[b-lk934x6k56] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--rz-text-secondary-color);
    cursor: pointer;
    border: none;
    background: none;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.summary-footer__back:hover[b-lk934x6k56] {
    color: var(--rz-primary);
    background: var(--rz-base-200, #EFECE8);
}

[b-lk934x6k56] .summary-footer__back .rzi {
    font-size: 18px;
}

.summary-footer__confirm[b-lk934x6k56] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 28px;
    border-radius: 8px;
    border: none;
    background: var(--rz-success);
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.summary-footer__confirm:hover[b-lk934x6k56] {
    background: var(--rz-success-dark);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[b-lk934x6k56] .summary-footer__confirm .rzi {
    font-size: 18px;
}
/* /Components/Pages/CustomerDashboard/Components/LensConfigurator/WizardUpsellCard.razor.rz.scp.css */
/* === UPSELL CARD === */
.upsell-card[b-9g9nmo8b0d] {
    background: linear-gradient(135deg, var(--rz-base-100, #F7F5F2), var(--rz-base-200, #EFECE8));
    border: 1px dashed var(--rz-base-300);
    border-radius: 12px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.upsell-card--accepted[b-9g9nmo8b0d] {
    border-color: var(--rz-primary);
    border-style: solid;
    background: linear-gradient(135deg, rgba(32, 139, 170, 0.06), rgba(32, 139, 170, 0.02));
}

.upsell-card__icon[b-9g9nmo8b0d] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--rz-primary), var(--rz-primary-light));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

[b-9g9nmo8b0d] .upsell-card__icon .rzi {
    color: white;
    font-size: 24px;
}

.upsell-card__icon img[b-9g9nmo8b0d] {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.upsell-card__body[b-9g9nmo8b0d] {
    flex: 1;
}

.upsell-card__title[b-9g9nmo8b0d] {
    font-size: 15px;
    font-weight: 600;
    color: var(--rz-text-color);
    margin-bottom: 2px;
}

.upsell-card__desc[b-9g9nmo8b0d] {
    font-size: 13px;
    color: var(--rz-text-secondary-color);
}

.upsell-card__actions[b-9g9nmo8b0d] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.upsell-price[b-9g9nmo8b0d] {
    font-size: 16px;
    font-weight: 700;
    color: var(--rz-text-color);
}

.upsell-btn[b-9g9nmo8b0d] {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
}

.upsell-btn--yes[b-9g9nmo8b0d] {
    background: var(--rz-primary);
    color: white;
}

.upsell-btn--yes:hover[b-9g9nmo8b0d] {
    background: var(--rz-primary-dark);
}

.upsell-btn--yes-active[b-9g9nmo8b0d] {
    background: var(--rz-success);
    color: white;
}

.upsell-btn--no[b-9g9nmo8b0d] {
    background: transparent;
    color: var(--rz-text-secondary-color);
    border: 1px solid var(--rz-base-300);
}

.upsell-btn--no:hover[b-9g9nmo8b0d] {
    background: var(--rz-base-200, #EFECE8);
}

.upsell-btn--no-active[b-9g9nmo8b0d] {
    background: var(--rz-base-300);
    color: var(--rz-text-color);
    border: 1px solid var(--rz-base-300);
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .upsell-card[b-9g9nmo8b0d] {
        flex-direction: column;
        text-align: center;
    }

    .upsell-card__actions[b-9g9nmo8b0d] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Pages/CustomerDashboard/Components/LoyaltyWidgetRow.razor.rz.scp.css */
/* Widgetrij (Klantendashboard v2): vijf compacte tegels, 3px accent links, geen schaduw */
.widget-row[b-gfxjlaewo5] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.widget-tile[b-gfxjlaewo5] {
    display: flex;
    align-items: center;
    gap: 13px;
    background: var(--rz-surface-background);
    border: 1px solid var(--rz-border-color);
    border-left: 3px solid var(--em-border-primary);
    border-radius: var(--em-radius-sm);
    padding: 13px 14px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease;
}

.widget-tile:hover[b-gfxjlaewo5] {
    border-top-color: var(--em-primary-line);
    border-right-color: var(--em-primary-line);
    border-bottom-color: var(--em-primary-line);
}

.widget-tile[b-gfxjlaewo5]  .widget-tile__icon {
    font-size: 22px;
    flex: none;
}

.widget-tile__value[b-gfxjlaewo5] {
    font-size: 20px;
    font-weight: 800;
    color: var(--em-text-primary);
    line-height: 1;
}

.widget-tile__value--text[b-gfxjlaewo5] {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;
}

.widget-tile__label[b-gfxjlaewo5] {
    font-size: 11px;
    color: var(--em-text-tertiary);
    margin-top: 3px;
}

/* Accent + icoonkleur per tegel */
.widget-tile--points[b-gfxjlaewo5] { border-left-color: var(--em-domain-notes); }
.widget-tile--points[b-gfxjlaewo5]  .widget-tile__icon { color: var(--em-domain-notes); }

.widget-tile--earned[b-gfxjlaewo5] { border-left-color: var(--em-domain-appointments); }
.widget-tile--earned[b-gfxjlaewo5]  .widget-tile__icon { color: var(--em-domain-appointments); }

.widget-tile--family[b-gfxjlaewo5] { border-left-color: var(--em-domain-sales); }
.widget-tile--family[b-gfxjlaewo5]  .widget-tile__icon { color: var(--em-domain-sales); }

.widget-tile--badges[b-gfxjlaewo5] { border-left-color: var(--em-domain-subscriptions); }
.widget-tile--badges[b-gfxjlaewo5]  .widget-tile__icon { color: var(--em-domain-subscriptions); }

.widget-tile--streak[b-gfxjlaewo5] { border-left-color: var(--em-domain-aftersales); }
.widget-tile--streak[b-gfxjlaewo5]  .widget-tile__icon { color: var(--em-domain-aftersales); }

@media (max-width: 1100px) {
    .widget-row[b-gfxjlaewo5] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .widget-row[b-gfxjlaewo5] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/CustomerDashboard/Components/Measurement/MedicalSessionMediaStrip.razor.rz.scp.css */
.msms[b-gvio30pbzd] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-top: 0.25rem;
}

.msms__head[b-gvio30pbzd] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--em-text-primary);
}

.msms__grid[b-gvio30pbzd] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 0.5rem;
}

.msms__item[b-gvio30pbzd] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    text-decoration: none;
    color: inherit;
}

.msms__item img[b-gvio30pbzd] {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--em-border-secondary);
    background: var(--em-bg-surface-sunken);
}

.msms__caption[b-gvio30pbzd] {
    font-size: 0.6875rem;
    color: var(--em-text-primary);
    line-height: 1.2;
}

.msms__meta[b-gvio30pbzd] {
    font-size: 0.625rem;
    color: var(--em-text-secondary);
}
/* /Components/Pages/CustomerDashboard/Components/Measurement/RodenstockMeasureComparePanel.razor.rz.scp.css */
.rmcp[b-4oy7xa9f70] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
}

.rmcp__meta[b-4oy7xa9f70],
.rmcp__note[b-4oy7xa9f70] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--em-text-secondary);
}

.rmcp__table[b-4oy7xa9f70] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.rmcp__table th[b-4oy7xa9f70],
.rmcp__table td[b-4oy7xa9f70] {
    padding: 0.375rem 0.5rem;
    border-bottom: 1px solid var(--em-border-secondary);
    text-align: left;
}

.rmcp__table th[b-4oy7xa9f70] {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--em-text-secondary);
}

.rmcp__num[b-4oy7xa9f70] {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rmcp__measured[b-4oy7xa9f70] {
    font-weight: 600;
    color: var(--em-text-primary);
}

.rmcp__row--diff .rmcp__measured[b-4oy7xa9f70] {
    color: var(--rz-primary);
}

.rmcp__row--none[b-4oy7xa9f70] {
    color: var(--em-text-secondary);
}

.rmcp__src[b-4oy7xa9f70] {
    margin-left: 0.375rem;
    font-size: 0.625rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 9999px;
    background: var(--em-bg-surface-sunken);
    color: var(--em-text-secondary);
    border: 1px solid var(--em-border-secondary);
    vertical-align: middle;
}

.rmcp__actions[b-4oy7xa9f70] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.rmcp__images[b-4oy7xa9f70] {
    border-top: 1px solid var(--em-border-secondary);
    padding-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.rmcp__images-head[b-4oy7xa9f70] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--em-text-primary);
}

.rmcp__images-list[b-4oy7xa9f70] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem 1rem;
    font-size: 0.8125rem;
}

/* DT-6.12-5: kaartgroepen — klikken = de hele groep wel of niet overnemen. */
.rmcp__cards[b-4oy7xa9f70] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.rmcp__card[b-4oy7xa9f70] {
    border: 1px solid var(--em-border-secondary);
    border-radius: 0.5rem;
    padding: 0.625rem 0.75rem;
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}

.rmcp__card:hover[b-4oy7xa9f70] {
    border-color: var(--rz-primary);
}

.rmcp__card--on[b-4oy7xa9f70] {
    border-color: var(--rz-primary);
    background: color-mix(in srgb, var(--rz-primary) 6%, transparent);
}

.rmcp__card-head[b-4oy7xa9f70] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.375rem;
}

.rmcp__card--on .rmcp__card-head .rzi[b-4oy7xa9f70] {
    color: var(--rz-primary);
}

.rmcp__badge[b-4oy7xa9f70] {
    margin-left: auto;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-primary);
    border: 1px solid var(--rz-primary);
    border-radius: 999px;
    padding: 0.0625rem 0.5rem;
}

/* DT-6.12-5 (v2): twee keuzekaarten per groep — behouden (order) of importeren (Rodenstock). */
.rmcp__groups[b-4oy7xa9f70] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.rmcp__group-head[b-4oy7xa9f70] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.375rem;
}

.rmcp__pair[b-4oy7xa9f70] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
}

.rmcp__choice[b-4oy7xa9f70] {
    border: 1px solid var(--em-border-secondary);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}

.rmcp__choice:hover[b-4oy7xa9f70] {
    border-color: var(--rz-primary);
}

.rmcp__choice--on[b-4oy7xa9f70] {
    border-color: var(--rz-primary);
    background: color-mix(in srgb, var(--rz-primary) 6%, transparent);
}

.rmcp__choice-head[b-4oy7xa9f70] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 0.375rem;
}

.rmcp__choice--on .rmcp__choice-head .rzi[b-4oy7xa9f70] {
    color: var(--rz-primary);
}

.rmcp__line[b-4oy7xa9f70] {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.8125rem;
    padding: 0.1875rem 0;
    border-bottom: 1px solid var(--em-border-secondary);
}

.rmcp__line:last-child[b-4oy7xa9f70] {
    border-bottom: none;
}

.rmcp__line b[b-4oy7xa9f70] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-weight: 600;
}

.rmcp__diff[b-4oy7xa9f70] {
    color: var(--rz-primary);
}

.rmcp__badge[b-4oy7xa9f70] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-primary);
    border: 1px solid var(--rz-primary);
    border-radius: 999px;
    padding: 0.0625rem 0.5rem;
}
/* /Components/Pages/CustomerDashboard/Components/Measurement/RodenstockMeasureConfirmPanel.razor.rz.scp.css */
.rmc[b-gv24tzqxpf] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
}

.rmc__intro[b-gv24tzqxpf],
.rmc__note[b-gv24tzqxpf] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--em-text-secondary);
}

.rmc__fields[b-gv24tzqxpf] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.375rem 1rem;
    margin: 0;
    font-size: 0.875rem;
}

.rmc__fields dt[b-gv24tzqxpf] {
    color: var(--em-text-secondary);
}

.rmc__fields dd[b-gv24tzqxpf] {
    margin: 0;
    font-weight: 600;
    color: var(--em-text-primary);
}

.rmc__warning[b-gv24tzqxpf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.8125rem;
    color: var(--em-text-warning, var(--em-text-secondary));
}

.rmc__actions[b-gv24tzqxpf] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
/* /Components/Pages/CustomerDashboard/Components/Measurement/RodenstockMeasureZone.razor.rz.scp.css */
.rms__intro[b-3ub1o7x3hu],
.rms__wait[b-3ub1o7x3hu],
.rms__done[b-3ub1o7x3hu] {
    font-size: 0.8125rem;
    color: var(--em-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rms__meta[b-3ub1o7x3hu],
.rms__hint[b-3ub1o7x3hu] {
    font-size: 0.6875rem;
    color: var(--em-text-secondary);
    margin-top: 0.25rem;
}

.rms__hint[b-3ub1o7x3hu] {
    color: var(--em-text-warning, var(--em-text-secondary));
}

.rms__actions[b-3ub1o7x3hu] {
    display: flex;
    gap: 0.375rem;
    justify-content: flex-end;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.rms__pulse[b-3ub1o7x3hu] {
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    background: var(--rz-primary);
    flex-shrink: 0;
    animation: rms-pulse-b-3ub1o7x3hu 1.4s ease-in-out infinite;
}

@keyframes rms-pulse-b-3ub1o7x3hu {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.8); }
}

.rms--relogin[b-3ub1o7x3hu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--em-text-secondary);
    padding: 0.5rem 0.75rem;
    border: 1px dashed var(--em-border-secondary);
    border-radius: 8px;
}

.rms--relogin a[b-3ub1o7x3hu] {
    color: var(--rz-primary);
    white-space: nowrap;
}

/* DT-6.12-5: rechtstreeks naar de sessie van de klant in de CNXT-portal, in een nieuw tabblad. */
.rms__portal[b-3ub1o7x3hu] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: var(--rz-primary);
    text-decoration: none;
    margin-left: auto;
}

.rms__portal:hover[b-3ub1o7x3hu] {
    text-decoration: underline;
}
/* /Components/Pages/CustomerDashboard/Components/MedicalExamsPanel.razor.rz.scp.css */
/* Onderzoek-picker (v2 §3.5): overlay met zoekveld, scrollbare tenant-lijst en beheren-link */
.exam-picker[b-azcyss762h] {
    position: absolute;
    top: 44px;
    left: 13px;
    right: 13px;
    z-index: 6;
    background: var(--rz-surface-background);
    border: 1px solid var(--rz-border-color);
    border-radius: var(--em-radius-sm);
    box-shadow: var(--em-shadow-overlay);
    padding: 10px;
}

.exam-picker__close[b-azcyss762h] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: var(--em-radius-sm);
    background: var(--rz-surface-hover);
    border: none;
    color: var(--em-text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 1;
}

.exam-picker__close:hover[b-azcyss762h] {
    background: var(--em-primary-tint);
    color: var(--em-primary);
}

.exam-picker__close[b-azcyss762h]  .rzi {
    font-size: 14px;
}

.exam-picker__search[b-azcyss762h] {
    margin-right: 26px;
    margin-bottom: 8px;
}

.exam-picker__list[b-azcyss762h] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 170px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.exam-picker__item[b-azcyss762h] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12.5px;
    color: var(--em-text-primary);
}

.exam-picker__item:hover[b-azcyss762h] {
    background: var(--rz-surface-hover);
}

.exam-picker__item[b-azcyss762h]  .rzi {
    font-size: 14px;
    color: var(--em-domain-medical);
}

.exam-picker__empty[b-azcyss762h] {
    padding: 7px 8px;
    font-size: 12px;
    color: var(--em-text-tertiary);
}

.exam-picker__divider[b-azcyss762h] {
    height: 1px;
    background: var(--em-border-subtle);
    margin: 8px 0;
}

.exam-picker__manage[b-azcyss762h] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--em-primary);
}

.exam-picker__manage:hover[b-azcyss762h] {
    background: var(--em-primary-tint);
}

.exam-picker__manage[b-azcyss762h]  .rzi {
    font-size: 14px;
}

/* Onderzoeksnaam als zachte tint-balk (Klantendashboard v2, besloten variant):
   primary-tint vlak + primary tekst, meerregelig — geen gevulde teal balk meer */
[b-azcyss762h] .exam-name-bar {
    background: var(--em-primary-tint);
    color: var(--em-primary);
    border-radius: 3px;
    padding: 5px 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.02em;
    white-space: normal;
    word-break: break-word;
}
/* /Components/Pages/CustomerDashboard/Components/OrderShell/AccessoryQuickPicks.razor.rz.scp.css */
.aqp__grid[b-etfk9np9oz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.5rem;
}

.aqp__tile[b-etfk9np9oz] {
    border: 1px solid var(--em-border-primary);
    border-radius: var(--em-radius-lg);
    cursor: pointer;
}
/* /Components/Pages/CustomerDashboard/Components/OrderShell/LineReimbursementEditDialog.razor.rz.scp.css */
.lred[b-5qwiwpgdr3] {
    display: flex;
    flex-direction: column;
    gap: var(--em-space-3, 0.75rem);
}

.lred__line[b-5qwiwpgdr3] {
    display: flex;
    align-items: center;
    gap: var(--em-space-1, 0.25rem);
    font-size: var(--em-font-size-sm, 0.8125rem);
    font-weight: 600;
    color: var(--em-text-primary, var(--rz-text-color));
}

.lred__line-desc[b-5qwiwpgdr3] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lred__existing[b-5qwiwpgdr3] {
    display: flex;
    flex-direction: column;
    gap: var(--em-space-1, 0.25rem);
    padding: var(--em-space-2, 0.5rem);
    border: 1px solid var(--em-border-primary, var(--rz-border-color));
    border-radius: var(--em-radius-md, 6px);
}

.lred__caption[b-5qwiwpgdr3] {
    font-size: var(--em-font-size-xs, 0.6875rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--em-text-tertiary, var(--rz-text-tertiary-color));
}

.lred__row[b-5qwiwpgdr3] {
    display: flex;
    align-items: center;
    gap: var(--em-space-2, 0.5rem);
}

.lred__row-desc[b-5qwiwpgdr3] {
    flex: 1;
    min-width: 0;
    font-size: var(--em-font-size-sm, 0.8125rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lred__row-amount[b-5qwiwpgdr3] {
    font-weight: 600;
    font-size: var(--em-font-size-sm, 0.8125rem);
    white-space: nowrap;
}

.lred__actions[b-5qwiwpgdr3] {
    display: flex;
    justify-content: flex-end;
    gap: var(--em-space-2, 0.5rem);
    margin-top: var(--em-space-2, 0.5rem);
}
/* /Components/Pages/CustomerDashboard/Components/OrderShell/OrderAccessoriesPanel.razor.rz.scp.css */
.oap[b-kpb4fah3ro] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.oap__search[b-kpb4fah3ro] {
    max-width: 100%;
}

.oap__grid[b-kpb4fah3ro] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.5rem;
}

.oap__suggestion[b-kpb4fah3ro] {
    border: 1px solid var(--em-border-primary);
    border-radius: var(--em-radius-lg);
    cursor: pointer;
}

.oap__lines[b-kpb4fah3ro] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.oap__empty[b-kpb4fah3ro] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem;
    border: 1px dashed var(--em-border-primary);
    border-radius: var(--em-radius-lg);
    color: var(--em-text-secondary);
    text-align: center;
}

.oap__line[b-kpb4fah3ro] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--em-border-primary);
    border-radius: var(--em-radius-lg);
    background: var(--rz-base-background-color);
}

.oap__thumb[b-kpb4fah3ro] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: var(--em-radius-lg);
    background: var(--em-surface-sunken);
}

.oap__thumb img[b-kpb4fah3ro] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.oap__info[b-kpb4fah3ro] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.oap__name[b-kpb4fah3ro] {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oap__sub[b-kpb4fah3ro] {
    font-size: 0.75rem;
    color: var(--em-text-secondary);
}

.oap__stepper[b-kpb4fah3ro] {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex: 0 0 auto;
}

.oap__qty[b-kpb4fah3ro] {
    min-width: 1.75rem;
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.oap__total[b-kpb4fah3ro] {
    flex: 0 0 auto;
    min-width: 5rem;
    text-align: right;
    font-weight: 700;
    white-space: nowrap;
}

/* ── Nog geen order: uitleg in plaats van een foutmelding ── */
.oap__pending[b-kpb4fah3ro] {
    display: flex;
    align-items: center;
    gap: var(--em-space-2, 0.5rem);
    padding: var(--em-space-3, 0.75rem);
    border: 1px dashed var(--em-border-primary, var(--rz-border-color));
    border-radius: var(--em-radius-md, 6px);
    background: var(--em-surface-subtle, transparent);
}

.oap__pending-text[b-kpb4fah3ro] {
    font-size: var(--em-font-size-sm, 0.8125rem);
    color: var(--em-text-secondary, var(--rz-text-secondary-color));
}
/* /Components/Pages/CustomerDashboard/Components/OrderShell/OrderAdviceZone.razor.rz.scp.css */
.oadv__chips[b-n2ugt0zctb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.oadv__chip[b-n2ugt0zctb] {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 9999px;
    background: var(--em-bg-surface-sunken);
    color: var(--em-text-secondary);
    border: 1px solid var(--em-border-secondary);
}

.oadv__text[b-n2ugt0zctb] {
    font-size: 0.8125rem;
    color: var(--em-text-primary);
    white-space: pre-wrap;
}

.oadv__edit[b-n2ugt0zctb] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.oadv__actions[b-n2ugt0zctb] {
    display: flex;
    gap: 0.375rem;
    justify-content: flex-end;
}

.oadv__empty[b-n2ugt0zctb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.oadv__empty-text[b-n2ugt0zctb] {
    font-size: 0.75rem;
    color: var(--em-text-tertiary);
}
/* /Components/Pages/CustomerDashboard/Components/OrderShell/OrderCustomerHeader.razor.rz.scp.css */
.ocust[b-tvcioxmm2w] {
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--em-border-secondary);
}

.ocust__label[b-tvcioxmm2w] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--em-text-tertiary);
    margin-bottom: 0.5rem;
}

.ocust__body[b-tvcioxmm2w] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ocust__avatar[b-tvcioxmm2w] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--em-primary-dark);
    color: var(--em-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.ocust__info[b-tvcioxmm2w] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.ocust__name[b-tvcioxmm2w] {
    font-weight: 600;
    font-size: 0.9375rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ocust__meta[b-tvcioxmm2w] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.6875rem;
    color: var(--em-text-secondary);
}

.ocust__meta-item[b-tvcioxmm2w] {
    display: inline-flex;
    gap: 0.25rem;
}

.ocust__meta-label[b-tvcioxmm2w] {
    color: var(--em-text-tertiary);
}

.ocust__meta-value[b-tvcioxmm2w] {
    font-variant-numeric: tabular-nums;
}

.ocust__chips[b-tvcioxmm2w] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.ocust__chip[b-tvcioxmm2w] {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 9999px;
    background: var(--em-bg-surface-sunken);
    color: var(--em-text-secondary);
    border: 1px solid var(--em-border-secondary);
}

.ocust__chip--type[b-tvcioxmm2w] {
    color: var(--em-text-primary);
}
/* /Components/Pages/CustomerDashboard/Components/OrderShell/OrderDrawerFooter.razor.rz.scp.css */
.odf[b-afxgmxs0ls] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--em-space-4, 1rem);
    width: 100%;
    padding: var(--em-space-2, 0.5rem) var(--em-space-4, 1rem);
}

.odf__totals[b-afxgmxs0ls] {
    display: flex;
    align-items: center;
    gap: var(--em-space-5, 1.5rem);
}

.odf__total[b-afxgmxs0ls] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.odf__label[b-afxgmxs0ls] {
    font-size: var(--em-font-size-xs, 0.6875rem);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--em-text-tertiary, var(--rz-text-tertiary-color));
}

.odf__value[b-afxgmxs0ls] {
    font-weight: 600;
    font-size: var(--em-font-size-sm, 0.875rem);
    color: var(--em-text-primary, var(--rz-text-color));
}

.odf__total--primary .odf__value[b-afxgmxs0ls] {
    font-weight: 700;
    font-size: var(--em-font-size-lg, 1.125rem);
    color: var(--em-primary, var(--rz-primary));
}

.odf__actions[b-afxgmxs0ls] {
    display: flex;
    align-items: center;
    gap: var(--em-space-2, 0.5rem);
}
/* /Components/Pages/CustomerDashboard/Components/OrderShell/OrderFinancialBlock.razor.rz.scp.css */
.ofb[b-goxt03u9j9] {
    display: flex;
    flex-direction: column;
    gap: var(--em-space-2, 0.5rem);
    padding: var(--em-space-3, 0.75rem) var(--em-space-4, 1.25rem);
}

/* ── Prijsregels ── */
.ofb__lines[b-goxt03u9j9] {
    display: flex;
    flex-direction: column;
}

.ofb__empty[b-goxt03u9j9] {
    padding: var(--em-space-4, 1rem) 0;
    text-align: center;
    font-size: var(--em-font-size-sm, 0.75rem);
    color: var(--em-text-tertiary, var(--rz-text-tertiary-color));
}

.ofb__line[b-goxt03u9j9] {
    display: flex;
    align-items: flex-start;
    gap: var(--em-space-2, 0.5rem);
    padding: var(--em-space-2, 0.5rem) 0;
    border-top: 1px solid var(--em-border-secondary, var(--rz-border-color));
}

.ofb__line-body[b-goxt03u9j9] {
    flex: 1;
    min-width: 0;
}

.ofb__line-title[b-goxt03u9j9] {
    display: flex;
    align-items: center;
    gap: var(--em-space-1, 0.25rem);
    font-weight: 500;
    font-size: var(--em-font-size-sm, 0.8125rem);
}

.ofb__line-desc[b-goxt03u9j9] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ofb__line-meta[b-goxt03u9j9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 1px;
    font-size: var(--em-font-size-xs, 0.6875rem);
    color: var(--em-text-tertiary, var(--rz-text-tertiary-color));
}

.ofb__line-discount[b-goxt03u9j9] {
    color: var(--em-danger, var(--rz-danger));
}

.ofb__line-amount[b-goxt03u9j9] {
    font-weight: 600;
    font-size: var(--em-font-size-sm, 0.8125rem);
}

/* Vaste icoonkolom vóór het bedrag; lege slots houden de bedragen uitgelijnd. */
.ofb__actions[b-goxt03u9j9] {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    flex: 0 0 auto;
}

.ofb__action-slot[b-goxt03u9j9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
}

/* Elk bedrag in het blok: dezelfde rechterkolom, ongeacht regel of totaal. */
.ofb__amount[b-goxt03u9j9] {
    flex: 0 0 auto;
    min-width: 6.5rem;
    text-align: right;
    white-space: nowrap;
}

/* ── Groep (Expert modus): de onderdelen van één oog als één blok ── */
.ofb__group[b-goxt03u9j9] {
    border-top: 1px solid var(--em-border-secondary, var(--rz-border-color));
    border-left: 2px solid var(--em-border-primary, var(--rz-border-color));
    padding-left: var(--em-space-2, 0.5rem);
    margin: var(--em-space-1, 0.25rem) 0;
}

.ofb__group-head[b-goxt03u9j9] {
    display: flex;
    align-items: center;
    gap: var(--em-space-1, 0.25rem);
    padding: var(--em-space-1, 0.25rem) 0 0;
    font-size: var(--em-font-size-xs, 0.75rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--em-text-secondary, var(--rz-text-secondary-color));
}

/* De regels van één oog vormen samen één geheel: binnen het blok geen scheidingslijnen.
   De scheiding zit op het blok zelf. */
.ofb__group .ofb__line[b-goxt03u9j9] {
    border-top: none;
    padding: 0.1875rem 0;
}

.ofb__line--child .ofb__line-body[b-goxt03u9j9] {
    padding-left: var(--em-space-3, 0.75rem);
}

/* ── Kortingsregels ── */
.ofb__discounts[b-goxt03u9j9] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.ofb__discount[b-goxt03u9j9] {
    display: flex;
    align-items: center;
    gap: var(--em-space-2, 0.5rem);
    font-size: var(--em-font-size-sm, 0.8125rem);
    color: var(--em-danger, var(--rz-danger));
}

.ofb__discount-desc[b-goxt03u9j9] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ofb__discount-pct[b-goxt03u9j9] {
    margin-left: 0.25rem;
    color: var(--em-text-tertiary, var(--rz-text-tertiary-color));
}

.ofb__discount-amount[b-goxt03u9j9] {
    white-space: nowrap;
}

/* ── Vergoedingsregel: waarop slaat de vergoeding? ── */
.ofb__reimb-label[b-goxt03u9j9] {
    display: flex;
    flex: 1;
    min-width: 0;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.ofb__reimb-sep[b-goxt03u9j9] {
    color: var(--em-text-tertiary, var(--rz-text-tertiary-color));
}

.ofb__reimb-ref[b-goxt03u9j9] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    color: var(--em-text-secondary, var(--rz-text-secondary-color));
    font-size: var(--em-font-size-xs, 0.75rem);
}

.ofb__reimb-ref-desc[b-goxt03u9j9] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Knop + menu ── */
.ofb__discount-add[b-goxt03u9j9] {
    display: flex;
    flex-direction: column;
    gap: var(--em-space-2, 0.5rem);
    align-items: flex-start;
}

.ofb__menu[b-goxt03u9j9] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--em-space-1, 0.25rem);
    padding: var(--em-space-2, 0.5rem);
    border: 1px solid var(--em-border-primary, var(--rz-border-color));
    border-radius: var(--em-radius-md, 6px);
    background: var(--em-surface-raised, var(--rz-base-background-color));
}

.ofb__menu-form[b-goxt03u9j9] {
    display: flex;
    align-items: flex-end;
    gap: var(--em-space-2, 0.5rem);
    width: 100%;
}

/* ── Totalen ── */
.ofb__totals[b-goxt03u9j9] {
    display: flex;
    flex-direction: column;
    padding-top: var(--em-space-2, 0.5rem);
    border-top: 1px solid var(--em-border-primary, var(--rz-border-color));
}

.ofb__total-row[b-goxt03u9j9] {
    display: flex;
    justify-content: space-between;
    gap: var(--em-space-2, 0.5rem);
    padding: 0.125rem 0;
    font-size: var(--em-font-size-sm, 0.8125rem);
    color: var(--em-text-secondary, var(--rz-text-secondary-color));
}

.ofb__total-row--muted[b-goxt03u9j9] {
    font-size: var(--em-font-size-xs, 0.75rem);
    color: var(--em-text-tertiary, var(--rz-text-tertiary-color));
}

.ofb__total-row--discount[b-goxt03u9j9] {
    color: var(--em-danger, var(--rz-danger));
}

.ofb__total-row--grand[b-goxt03u9j9] {
    margin-top: 0.375rem;
    padding-top: var(--em-space-2, 0.5rem);
    border-top: 1px solid var(--em-border-primary, var(--rz-border-color));
    font-weight: 700;
    font-size: var(--em-font-size-md, 1rem);
    color: var(--em-text-primary, var(--rz-text-color));
}
/* /Components/Pages/CustomerDashboard/Components/OrderShell/OrderFulfilmentPanel.razor.rz.scp.css */
/* OrderFulfilmentPanel — gedeeld fulfilment-paneel van de uniforme orderdrawer (DT-66675.1-6).
   Uitsluitend --em-*-tokens: geen hardcoded hex, geen fontnamen uit het ontwerp. */

.ofp[b-qf6owu5y71] {
    padding: var(--em-spacing-lg) var(--em-spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--em-spacing-md);
}

.ofp__head[b-qf6owu5y71] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--em-spacing-sm);
}

.ofp__label[b-qf6owu5y71] {
    font-family: var(--em-font-mono);
    font-size: var(--em-text-xs);
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--em-text-tertiary);
}

.ofp__counter[b-qf6owu5y71] {
    font-family: var(--em-font-sans);
    font-size: var(--em-text-sm);
    font-weight: 600;
    color: var(--em-text-secondary);
}

.ofp__empty[b-qf6owu5y71] {
    font-family: var(--em-font-sans);
    font-size: var(--em-text-sm);
    color: var(--em-text-tertiary);
}

.ofp__lock[b-qf6owu5y71] {
    display: flex;
    align-items: center;
    gap: var(--em-spacing-xs);
    padding: var(--em-spacing-sm) var(--em-spacing-md);
    background: var(--em-bg-surface-sunken);
    border: 1px dashed var(--em-border-secondary);
    border-radius: var(--em-radius-md);
    font-family: var(--em-font-sans);
    font-size: var(--em-text-sm);
    font-weight: 600;
    color: var(--em-text-tertiary);
}

.ofp__rows[b-qf6owu5y71] {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--em-border-subtle);
}

.ofp__row[b-qf6owu5y71] {
    display: flex;
    align-items: flex-start;
    gap: var(--em-spacing-md);
    padding: var(--em-spacing-md) 0;
    border-bottom: 1px solid var(--em-border-subtle);
}

.ofp__icon[b-qf6owu5y71] {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: var(--em-radius-md);
    background: var(--em-primary-tint);
    color: var(--em-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ofp__body[b-qf6owu5y71] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--em-spacing-xs);
}

.ofp__title-row[b-qf6owu5y71] {
    display: flex;
    align-items: center;
    gap: var(--em-spacing-sm);
    flex-wrap: wrap;
}

.ofp__name[b-qf6owu5y71] {
    font-family: var(--em-font-sans);
    font-size: var(--em-text-base);
    font-weight: 700;
    color: var(--em-text-primary);
}

.ofp__attempt[b-qf6owu5y71] {
    font-family: var(--em-font-sans);
    font-size: var(--em-text-xs);
    font-weight: 600;
    color: var(--em-sem-wait-text);
}

.ofp__chip[b-qf6owu5y71] {
    display: inline-flex;
    align-items: center;
    height: 21px;
    padding: 0 var(--em-spacing-sm);
    border-radius: var(--em-radius-sm);
    font-family: var(--em-font-mono);
    font-size: var(--em-text-xs);
    font-weight: 700;
    background: var(--em-sem-neutral-bg);
    color: var(--em-sem-neutral-text);
}

.ofp__chip--stock[b-qf6owu5y71] { background: var(--em-primary-tint); color: var(--em-primary-dark); }
.ofp__chip--open[b-qf6owu5y71] { background: var(--em-sem-open-bg); color: var(--em-sem-open-text); }
.ofp__chip--ordered[b-qf6owu5y71] { background: var(--em-primary-tint); color: var(--em-primary-dark); }
.ofp__chip--received[b-qf6owu5y71] { background: var(--em-sem-success-bg); color: var(--em-sem-success-text); }
.ofp__chip--rejected[b-qf6owu5y71] { background: var(--em-sem-error-bg); color: var(--em-sem-error-text); }
.ofp__chip--wait[b-qf6owu5y71] { background: var(--em-sem-neutral-bg); color: var(--em-sem-neutral-text); }

.ofp__meta[b-qf6owu5y71] {
    display: flex;
    align-items: center;
    gap: var(--em-spacing-xs);
    flex-wrap: wrap;
    font-family: var(--em-font-sans);
    font-size: var(--em-text-sm);
    font-weight: 600;
    color: var(--em-text-tertiary);
}

.ofp__meta-sep[b-qf6owu5y71] { color: var(--em-text-disabled); }

.ofp__controls[b-qf6owu5y71] {
    display: flex;
    align-items: flex-end;
    gap: var(--em-spacing-md);
    flex-wrap: wrap;
    margin-top: var(--em-spacing-xs);
}

.ofp__control[b-qf6owu5y71] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ofp__control--supplier[b-qf6owu5y71] { min-width: 240px; }

.ofp__control-label[b-qf6owu5y71] {
    font-family: var(--em-font-mono);
    font-size: var(--em-text-xs);
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--em-text-tertiary);
}

.ofp__actions[b-qf6owu5y71] {
    display: flex;
    align-items: center;
    gap: var(--em-spacing-sm);
    flex-wrap: wrap;
    margin-top: var(--em-spacing-xs);
}

.ofp__note[b-qf6owu5y71] {
    font-family: var(--em-font-sans);
    font-size: var(--em-text-sm);
    font-weight: 600;
    color: var(--em-text-tertiary);
}

.ofp__note--stock[b-qf6owu5y71] { color: var(--em-primary-dark); }
.ofp__note--wait[b-qf6owu5y71] { color: var(--em-text-disabled); font-style: italic; font-weight: 500; }
.ofp__note--open[b-qf6owu5y71] { color: var(--em-sem-open-text); }
.ofp__note--received[b-qf6owu5y71] { color: var(--em-sem-success-text); }

.ofp__note--rejected[b-qf6owu5y71] {
    display: inline-flex;
    align-items: center;
    padding: var(--em-spacing-xs) var(--em-spacing-sm);
    border-radius: var(--em-radius-sm);
    background: var(--em-sem-error-bg);
    color: var(--em-sem-error-text);
}

.ofp__panel[b-qf6owu5y71] {
    width: 100%;
    padding: var(--em-spacing-md);
    margin-top: var(--em-spacing-xs);
    border-radius: var(--em-radius-lg);
    background: var(--em-bg-surface-sunken);
    border: 1px solid var(--em-border-subtle);
}

.ofp__panel--reorder[b-qf6owu5y71] { background: var(--em-sem-error-bg); }
.ofp__panel--release[b-qf6owu5y71] { background: var(--em-sem-subscription-bg); }

.ofp__panel-title[b-qf6owu5y71] {
    font-family: var(--em-font-sans);
    font-size: var(--em-text-sm);
    font-weight: 700;
    color: var(--em-text-primary);
    margin-bottom: var(--em-spacing-xs);
}

.ofp__panel-note[b-qf6owu5y71] {
    font-family: var(--em-font-sans);
    font-size: var(--em-text-sm);
    color: var(--em-text-tertiary);
    margin-bottom: var(--em-spacing-sm);
}

.ofp__panel-actions[b-qf6owu5y71] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--em-spacing-xs);
}

.ofp__foot[b-qf6owu5y71] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--em-spacing-sm);
    padding-top: var(--em-spacing-sm);
}
/* /Components/Pages/CustomerDashboard/Components/OrderShell/OrderProductCard.razor.rz.scp.css */
/*
    Orderregel-kaart in de linkerkolom (BigEpic 66675 / DT-66675.2-2).
    Alleen --em-*-tokens; geen hardcoded kleuren of fonts.
*/

.opcard[b-joh8jb9zoq] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    width: 100%;
    text-align: left;
    font: inherit;
    padding: 0.6rem 0.7rem;
    background: var(--em-bg-surface);
    border: 1px solid var(--em-border-secondary);
    border-left: 3px solid var(--em-border-primary);
    border-radius: 5px;
    cursor: pointer;
}

.opcard:hover[b-joh8jb9zoq] {
    border-color: var(--em-primary);
    box-shadow: var(--em-shadow-sm);
}

.opcard:focus-visible[b-joh8jb9zoq] {
    outline: 2px solid var(--em-primary);
    outline-offset: 1px;
}

/* Lichte regel (recept, leveringscontrole): geen merkteken, geen voet. */
.opcard--plain[b-joh8jb9zoq] {
    align-items: center;
}

.opcard__mark[b-joh8jb9zoq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 14px;
    background: var(--em-bg-surface-sunken);
    color: var(--em-primary);
    font-size: 0.75rem;
    font-weight: 600;
}

.opcard__body[b-joh8jb9zoq] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1 1 auto;
    min-width: 0;
}

.opcard__top[b-joh8jb9zoq] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.opcard__title[b-joh8jb9zoq] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--em-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.opcard__price[b-joh8jb9zoq] {
    flex: 0 0 auto;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--em-text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.opcard__meta[b-joh8jb9zoq] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    font-size: 0.6875rem;
    color: var(--em-text-secondary);
}

.opcard__side[b-joh8jb9zoq] {
    display: inline-flex;
    flex: 0 0 auto;
}

.opcard__meta-text[b-joh8jb9zoq] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.opcard__mono[b-joh8jb9zoq] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-top: 0.15rem;
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    color: var(--em-text-secondary);
}

.opcard__mono-row[b-joh8jb9zoq] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
}

.opcard__mono-side[b-joh8jb9zoq] {
    display: inline-flex;
    flex: 0 0 auto;
    min-width: 24px;
}

.opcard__mono-value[b-joh8jb9zoq] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.opcard__foot[b-joh8jb9zoq] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.15rem;
    min-width: 0;
}

.opcard__status[b-joh8jb9zoq] {
    flex: 0 0 auto;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--em-bg-surface-sunken);
}

.opcard__status--neutral[b-joh8jb9zoq] {
    color: var(--em-text-tertiary);
}

.opcard__status--success[b-joh8jb9zoq] {
    color: var(--em-success);
}

.opcard__status--warning[b-joh8jb9zoq] {
    color: var(--em-warning);
}

.opcard__status--danger[b-joh8jb9zoq] {
    color: var(--em-danger);
}

.opcard__status--info[b-joh8jb9zoq] {
    color: var(--em-primary);
}

.opcard__source[b-joh8jb9zoq] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.6875rem;
    color: var(--em-text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.opcard__chevron[b-joh8jb9zoq] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    font-size: 1rem;
    color: var(--em-text-tertiary);
}

.opcard__content[b-joh8jb9zoq] {
    display: block;
    width: 100%;
}
/* /Components/Pages/CustomerDashboard/Components/OrderShell/OrderSummarySection.razor.rz.scp.css */
.osum[b-grasy3xiw1] {
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--em-border-secondary);
}

.osum__head[b-grasy3xiw1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.osum__label[b-grasy3xiw1] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--em-text-tertiary);
}

.osum__head-right[b-grasy3xiw1] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.osum__head-extra[b-grasy3xiw1] {
    display: inline-flex;
    align-items: center;
}

.osum__tag[b-grasy3xiw1] {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 9999px;
}

.osum__tag--neutral[b-grasy3xiw1] {
    background: var(--em-bg-surface-sunken);
    color: var(--em-text-tertiary);
}

.osum__tag--success[b-grasy3xiw1] {
    background: var(--em-bg-surface-sunken);
    color: var(--em-success);
}

.osum__tag--warning[b-grasy3xiw1] {
    background: var(--em-bg-surface-sunken);
    color: var(--em-warning);
}

.osum__tag--danger[b-grasy3xiw1] {
    background: var(--em-bg-surface-sunken);
    color: var(--em-danger);
}

.osum__tag--info[b-grasy3xiw1] {
    background: var(--em-bg-surface-sunken);
    color: var(--em-primary);
}

.osum__note[b-grasy3xiw1] {
    font-size: 0.75rem;
    color: var(--em-text-secondary);
    margin-bottom: 0.25rem;
}

.osum__mono[b-grasy3xiw1] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    padding: 0.375rem 0.5rem;
    margin-top: 0.375rem;
    background: var(--em-bg-surface-sunken);
    border: 1px solid var(--em-border-secondary);
    border-radius: 4px;
}

.osum__mono-row[b-grasy3xiw1] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.osum__mono-side[b-grasy3xiw1] {
    display: inline-flex;
    min-width: 24px;
}

.osum__mono-value[b-grasy3xiw1] {
    color: var(--em-text-secondary);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Bedrag rechts op dezelfde mono-regel: nooit afbreken, nooit ellipsen — de omschrijving links
   krimpt in plaats daarvan. */
.osum__mono-amount[b-grasy3xiw1] {
    margin-left: auto;
    padding-left: 0.5rem;
    color: var(--em-text-primary);
    white-space: nowrap;
    flex: 0 0 auto;
}

.osum__rows[b-grasy3xiw1] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.375rem;
}

.osum__row[b-grasy3xiw1] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.75rem;
}

.osum__row-a[b-grasy3xiw1] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.osum__row-a-main[b-grasy3xiw1] {
    color: var(--em-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.osum__row-sub[b-grasy3xiw1] {
    font-size: 0.6875rem;
    color: var(--em-text-tertiary);
}

.osum__row-b[b-grasy3xiw1] {
    color: var(--em-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.osum__content[b-grasy3xiw1] {
    margin-top: 0.5rem;
}
/* /Components/Pages/CustomerDashboard/Components/OrdersPanel.razor.rz.scp.css */
/* In-place order-picker (Klantendashboard v2 §3.5): Nieuw-knop wordt ter plekke
   een rij ronde icoonknoppen + sluit-X. Ronde vorm is hier bewust (design §2.4). */
.order-picker[b-zxoexu9en7] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.order-picker__type[b-zxoexu9en7],
.order-picker__close[b-zxoexu9en7] {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.order-picker__type[b-zxoexu9en7] {
    background: var(--em-primary-tint);
    border: 1px solid var(--em-primary-line);
    color: var(--em-primary);
}

.order-picker__type:hover[b-zxoexu9en7] {
    background: var(--em-primary);
    color: var(--em-text-inverse);
}

.order-picker__close[b-zxoexu9en7] {
    background: var(--rz-surface-hover);
    border: 1px solid var(--rz-border-color);
    color: var(--em-text-secondary);
}

.order-picker__close:hover[b-zxoexu9en7] {
    background: var(--em-primary-tint);
    color: var(--em-primary);
}

.order-picker[b-zxoexu9en7]  .rzi {
    font-size: 15px;
}
/* /Components/Pages/CustomerDashboard/Components/PrescriptionSourcePicker.razor.rz.scp.css */
.rx-picker[b-ysd0l7glma] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rx-picker-card[b-ysd0l7glma] {
    border: 1px solid var(--em-border, var(--rz-border-color, #e0e0e0));
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.rx-picker-card:hover[b-ysd0l7glma],
.rx-picker-card:focus-visible[b-ysd0l7glma] {
    border-color: var(--rz-primary);
    background: var(--rz-primary-lighter);
    outline: none;
}

.rx-picker-card--selected[b-ysd0l7glma] {
    border-color: var(--rz-primary);
    background: var(--rz-primary-lighter);
}

.rx-picker-card__header[b-ysd0l7glma] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.rx-picker-card__date[b-ysd0l7glma] {
    font-weight: 600;
    font-size: 0.8125rem;
}

.rx-picker-card__source[b-ysd0l7glma] {
    font-size: 0.75rem;
    color: var(--em-text-secondary, var(--rz-text-secondary-color));
}

.rx-picker-card__row[b-ysd0l7glma] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rx-picker-card__values[b-ysd0l7glma] {
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow-x: auto;
}

/* DT-10-11: ingeklapte regel na selectie */
.rx-picker-collapsed[b-ysd0l7glma] {
    border: 1px solid var(--rz-primary);
    background: var(--rz-primary-lighter);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.rx-picker-collapsed:hover[b-ysd0l7glma],
.rx-picker-collapsed:focus-visible[b-ysd0l7glma] {
    border-color: var(--rz-primary-dark, var(--rz-primary));
    outline: none;
}

.rx-picker-collapsed__summary[b-ysd0l7glma] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
}

.rx-picker-collapsed__eye[b-ysd0l7glma] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.rx-picker-collapsed__change[b-ysd0l7glma] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--rz-primary);
    white-space: nowrap;
    flex-shrink: 0;
}

.rx-picker-card__k[b-ysd0l7glma] {
    font-size: 0.75rem;
    color: var(--em-text-secondary, var(--rz-text-secondary-color));
    font-variant-numeric: tabular-nums;
}
/* /Components/Pages/CustomerDashboard/Components/SubscriptionMandatePanel.razor.rz.scp.css */
/* Incassomachtiging-recordkaart (Klantendashboard v2): 3px status-accent links, radius 3px */
.mandate-record[b-nlsqu38fy1] {
    border: 1px solid var(--rz-border-color);
    border-left: 3px solid var(--em-sem-success-text);
    border-radius: 3px;
    padding: 10px 11px;
    background: var(--rz-surface-background);
    transition: border-color 0.15s ease;
}

.mandate-record--revoked[b-nlsqu38fy1] {
    border-left-color: var(--em-sem-error-text);
    opacity: 0.72;
}

.mandate-record:hover[b-nlsqu38fy1] {
    border-top-color: var(--em-primary-line);
    border-right-color: var(--em-primary-line);
    border-bottom-color: var(--em-primary-line);
}

.mandate-record__head[b-nlsqu38fy1] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mandate-record__names[b-nlsqu38fy1] {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mandate-record__reference[b-nlsqu38fy1] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--em-text-primary);
    font-family: var(--em-font-mono);
}

.mandate-record__meta[b-nlsqu38fy1] {
    font-size: 11px;
    color: var(--em-text-tertiary);
    font-family: var(--em-font-mono);
}

.mandate-record__status[b-nlsqu38fy1] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.mandate-record__contracts[b-nlsqu38fy1] {
    margin-left: auto;
    font-size: 11px;
    color: var(--em-text-tertiary);
}
/* /Components/Pages/CustomerDashboard/Components/SubscriptionPanel.razor.rz.scp.css */
/* Abonnement-recordkaart (Klantendashboard v2): 3px status-accent links, radius 3px */
.subscription-record[b-w2zp4cyt9i] {
    border: 1px solid var(--rz-border-color);
    border-left: 3px solid var(--em-domain-subscriptions);
    border-radius: 3px;
    padding: 10px 11px;
    background: var(--rz-surface-background);
    transition: border-color 0.15s ease;
}

.subscription-record:hover[b-w2zp4cyt9i] {
    border-top-color: var(--em-primary-line);
    border-right-color: var(--em-primary-line);
    border-bottom-color: var(--em-primary-line);
}

.subscription-record__head[b-w2zp4cyt9i] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.subscription-record__names[b-w2zp4cyt9i] {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.subscription-record__title[b-w2zp4cyt9i] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--em-text-primary);
    cursor: pointer;
}

.subscription-record__meta[b-w2zp4cyt9i] {
    font-size: 11px;
    color: var(--em-text-tertiary);
    font-family: var(--em-font-mono);
}

.subscription-record__status[b-w2zp4cyt9i] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.subscription-record__price[b-w2zp4cyt9i] {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--em-text-primary);
}
/* /Components/Pages/CustomerDashboard/Components/SubscriptionSettingsDrawer.razor.rz.scp.css */
/* Abonnement-instellingen (Klantendashboard v2): rechthoekige chip-selectors, mono-sectielabels */
.settings-section__label[b-74gp7xckhd] {
    font-size: 10.5px;
    font-weight: 700;
    font-family: var(--em-font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--em-text-tertiary);
    margin-bottom: 9px;
}

.settings-chips[b-74gp7xckhd] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.settings-chip[b-74gp7xckhd] {
    font-size: 11.5px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 3px;
    cursor: pointer;
    color: var(--em-text-secondary);
    background: var(--rz-surface-background);
    border: 1px solid var(--rz-border-color);
}

.settings-chip:disabled[b-74gp7xckhd] {
    cursor: default;
    opacity: 0.55;
}

.settings-chip--active[b-74gp7xckhd] {
    color: var(--em-text-inverse);
    background: var(--em-domain-subscriptions);
    border-color: transparent;
    opacity: 1;
}

.settings-chip--active.settings-chip--wait[b-74gp7xckhd] {
    background: var(--em-sem-wait-text);
}

.settings-chip--active.settings-chip--danger[b-74gp7xckhd] {
    background: var(--em-sem-error-text);
}

.settings-next[b-74gp7xckhd] {
    background: var(--em-surface-sunken);
    border: 1px solid var(--rz-border-color);
    border-radius: 3px;
    padding: 12px;
}

.settings-next__date[b-74gp7xckhd] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--em-text-primary);
}

.settings-next__skipnote[b-74gp7xckhd] {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--em-sem-wait-text);
}

.settings-next__actions[b-74gp7xckhd] {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}

.settings-linkbtn[b-74gp7xckhd] {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--em-primary);
    background: var(--rz-surface-background);
    border: 1px solid var(--em-primary-line);
    border-radius: 3px;
    padding: 7px 10px;
    cursor: pointer;
}

.settings-linkbtn:hover[b-74gp7xckhd] {
    background: var(--em-primary-tint);
}

.settings-linkbtn:disabled[b-74gp7xckhd] {
    opacity: 0.55;
    cursor: default;
}

.settings-facts[b-74gp7xckhd] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 10px;
}

.settings-facts > div[b-74gp7xckhd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--em-border-subtle);
    font-size: 12px;
}

.settings-facts span[b-74gp7xckhd] {
    color: var(--em-text-secondary);
}

.settings-facts strong[b-74gp7xckhd] {
    color: var(--em-text-primary);
}
/* /Components/Pages/CustomerDashboard/CustomerDashboard.razor.rz.scp.css */
/* Customer Dashboard — Klantendashboard v2: strak/vierkant, radii ≤4px,
   1px borders, geen schaduwen op kaarten, geen hover-transforms. */

/* Panel scroll styling */
[b-r3xg6oa8qq] .panel-scroll {
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

[b-r3xg6oa8qq] .panel-scroll::-webkit-scrollbar {
    width: 6px;
}

[b-r3xg6oa8qq] .panel-scroll::-webkit-scrollbar-track {
    background: var(--rz-base-200);
    border-radius: var(--em-radius-xs);
}

[b-r3xg6oa8qq] .panel-scroll::-webkit-scrollbar-thumb {
    background: var(--rz-base-400);
    border-radius: var(--em-radius-xs);
}

[b-r3xg6oa8qq] .panel-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--rz-base-500);
}

/* ============================================
   FILTER BAR — witte kaart, 1px border, geen schaduw
   ============================================ */
[b-r3xg6oa8qq] .filter-actions-bar {
    margin: 0 1rem 14px 1rem;
    background: var(--rz-surface-background);
    border: 1px solid var(--rz-border-color) !important;
    border-left: 1px solid var(--rz-border-color) !important; /* overrulet variant-accent van CustomCard */
    border-radius: var(--em-radius-sm);
    box-shadow: none;
}

/* Hide CustomCard header for filter bar */
[b-r3xg6oa8qq] .filter-actions-bar .custom-card-header {
    display: none;
}

[b-r3xg6oa8qq] .filter-actions-bar .custom-card-content {
    padding: 9px 11px;
}

/* ============================================
   PERSONALIA CARDS ROW
   ============================================ */
[b-r3xg6oa8qq] .customer-header-v1 {
    margin-top: 0;
    margin-bottom: 14px;
    padding: 0 1rem;
}

/* ============================================
   PERSONALIA CARDS — vlak, 1px border, radius 4px
   ============================================ */
[b-r3xg6oa8qq] .profile-card,
[b-r3xg6oa8qq] .contact-card,
[b-r3xg6oa8qq] .actions-card {
    border: 1px solid var(--rz-border-color) !important;
    border-left: 1px solid var(--rz-border-color) !important;
    border-radius: var(--em-radius-sm);
    box-shadow: none;
    height: 140px;
    transition: border-color 0.15s ease;
    margin-bottom: 0;
}

/* Hide CustomCard header for profile cards */
[b-r3xg6oa8qq] .profile-card .custom-card-header,
[b-r3xg6oa8qq] .contact-card .custom-card-header,
[b-r3xg6oa8qq] .actions-card .custom-card-header {
    display: none;
}

[b-r3xg6oa8qq] .profile-card .custom-card-content,
[b-r3xg6oa8qq] .contact-card .custom-card-content,
[b-r3xg6oa8qq] .actions-card .custom-card-content {
    padding: 16px 18px;
}

/* ============================================
   PRIMARY CARD — teal profielkaart
   ============================================ */
[b-r3xg6oa8qq] .primary-card {
    background: var(--rz-primary) !important;
    background-color: var(--rz-primary) !important;
    border-color: var(--rz-primary) !important;
    color: white !important;
}

[b-r3xg6oa8qq] .primary-card .custom-card-content {
    background: var(--rz-primary) !important;
    background-color: var(--rz-primary) !important;
}

[b-r3xg6oa8qq] .primary-card * {
    color: white !important;
}

[b-r3xg6oa8qq] .primary-card .rz-text {
    color: white !important;
}

/* Hover: alleen borderkleur — geen lift, geen schaduw */
[b-r3xg6oa8qq] .profile-card:hover,
[b-r3xg6oa8qq] .contact-card:hover,
[b-r3xg6oa8qq] .actions-card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--em-primary-line) !important;
}

[b-r3xg6oa8qq] .primary-card:hover {
    border-color: var(--rz-primary) !important;
}

/* ============================================
   AVATAR — bewuste uitzondering op de radius-regel
   ============================================ */
[b-r3xg6oa8qq] .avatar-container {
    position: relative;
}

/* Epic 3.7: avatar is klikbaar (foto wijzigen) */
[b-r3xg6oa8qq] .avatar-button {
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    line-height: 0;
}

[b-r3xg6oa8qq] .avatar-overlay {
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--rz-primary-dark, rgba(0, 0, 0, 0.65));
    color: #fff;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}

[b-r3xg6oa8qq] .avatar-overlay .rzi {
    font-size: 15px;
}

[b-r3xg6oa8qq] .avatar-button:hover .avatar-overlay,
[b-r3xg6oa8qq] .avatar-button:focus-visible .avatar-overlay {
    opacity: 1;
}

[b-r3xg6oa8qq] .avatar-modern {
    border-radius: var(--em-radius-sm);
    width: 80px;
    height: 96px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    background-color: var(--rz-white);
    padding: 0.25rem;
    object-fit: cover;
}

/* ============================================
   CUSTOMER INFO TEXT
   ============================================ */
[b-r3xg6oa8qq] .customer-name {
    font-weight: 700;
    margin-bottom: 0.25rem;
}

[b-r3xg6oa8qq] .customer-info {
    font-size: 0.875rem;
    opacity: 0.9;
}

/* ============================================
   CONTACT CARD
   ============================================ */
[b-r3xg6oa8qq] .contact-item {
    font-size: 0.875rem;
    display: flex;
    align-items: center;
}

[b-r3xg6oa8qq] .contact-item .rz-icon {
    color: var(--rz-primary);
}

[b-r3xg6oa8qq] .contact-item--clickable {
    cursor: pointer;
    border-radius: var(--em-radius-xs);
    padding: 0.15rem 0.35rem;
    margin: -0.15rem -0.35rem;
    transition: background-color 0.15s ease;
}

[b-r3xg6oa8qq] .contact-item--clickable:hover,
[b-r3xg6oa8qq] .contact-item--clickable:focus-visible {
    background: var(--em-primary-tint);
    outline: none;
}

/* ============================================
   ACTIONS CARD — vierkante datumchips (mono)
   ============================================ */
[b-r3xg6oa8qq] .history-dates {
    margin-top: 0.5rem;
}

[b-r3xg6oa8qq] .date-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 0.5rem;
}

[b-r3xg6oa8qq] .date-chip {
    background: var(--em-surface-sunken);
    color: var(--em-text-secondary);
    border: 1px solid var(--em-border-subtle);
    padding: 4px 9px;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: var(--em-font-mono);
}

/* ============================================
   PANEL LIST ROW - Spacing
   ============================================ */
[b-r3xg6oa8qq] .panel-list-row {
    padding: 0 1rem;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    [b-r3xg6oa8qq] .filter-actions-bar .rz-stack {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    [b-r3xg6oa8qq] .customer-header-v1 .rz-column {
        margin-bottom: 1rem;
    }

    [b-r3xg6oa8qq] .profile-card,
    [b-r3xg6oa8qq] .contact-card,
    [b-r3xg6oa8qq] .actions-card {
        height: auto;
        min-height: 100px;
    }
}
/* /Components/Pages/Employee/Components/EmployeeAftersalesSection.razor.rz.scp.css */
/*
    Nazorg-sectie op Mijn werkplek (DT-66670.4-1) — rustige rijen in dezelfde toon als de
    nazorg-werkplek. Bewust geen rode signaalkleuren op de KPI's: coaching, geen alarm.
*/

.nazorg-my__row[b-niso99q90n] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 4px;
    border: 1px solid var(--rz-border);
    border-radius: 3px;
    background: var(--rz-base-background-color);
    cursor: pointer;
    text-align: left;
}

.nazorg-my__row:hover[b-niso99q90n] {
    border-color: var(--rz-primary);
}

/* Openstaande terugmeting: een zachte accentrand, geen alarmkleur. */
.nazorg-my__row--due[b-niso99q90n] {
    border-left: 3px solid var(--rz-warning);
}

.nazorg-my__main[b-niso99q90n] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1 1 auto;
    min-width: 0;
}

.nazorg-my__title[b-niso99q90n] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--rz-text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nazorg-my__sub[b-niso99q90n] {
    font-size: 11px;
    color: var(--rz-text-secondary-color);
}

.nazorg-my__phone[b-niso99q90n] {
    font-size: 12px;
    font-weight: 600;
    color: var(--rz-text-color);
    flex: 0 0 auto;
}

.nazorg-my__empty[b-niso99q90n] {
    padding: 10px 2px;
    font-size: 12.5px;
    color: var(--rz-text-secondary-color);
}

.nazorg-pill[b-niso99q90n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
    flex: 0 0 auto;
}

.nazorg-pill--open[b-niso99q90n] { background: #FDF0DC; color: #8A5A00; }
.nazorg-pill--treatment[b-niso99q90n] { background: #DDEEFB; color: #12557E; }
.nazorg-pill--awaiting[b-niso99q90n] { background: #EFE6FA; color: #5B3E8E; }
.nazorg-pill--closed[b-niso99q90n] { background: #E8EAED; color: #4A5057; }

/* Ontbrekende medewerker-koppeling: uitleg in plaats van een misleidend lege lijst. */
.nazorg-my__failed[b-niso99q90n] {
    padding: 10px 12px;
    margin-bottom: 0.75rem;
    border: 1px solid var(--rz-danger);
    border-radius: 3px;
    background: rgba(249, 119, 127, 0.08);
}

.nazorg-my__nolink[b-niso99q90n] {
    padding: 10px 12px;
    margin-bottom: 0.75rem;
    border: 1px solid var(--rz-warning);
    border-radius: 3px;
    background: rgba(250, 193, 82, 0.08);
}

.nazorg-my__nolink-title[b-niso99q90n] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--rz-text-color);
}

.nazorg-my__nolink-hint[b-niso99q90n] {
    font-size: 11.5px;
    color: var(--rz-text-secondary-color);
}
/* /Components/Pages/Employee/Components/EmployeeQualitySection.razor.rz.scp.css */
/*
    Kwaliteit / Vakmanschap op Mijn werkplek (DT-66670.4-2) — één accentkleur per ketenstap,
    bewust geen rood/groen-oordeel op de cijfers: coaching, geen alarm.
*/

[b-rgftwwadct] .quality-kpi {
    background: transparent;
    border: none;
    border-left: 4px solid var(--rz-info);
    border-radius: var(--rz-border-radius);
    padding: 1.5rem;
    height: 100%;
}

[b-rgftwwadct] .quality-kpi--refraction { border-left-color: var(--rz-success); }
[b-rgftwwadct] .quality-kpi--mounting { border-left-color: var(--rz-info); }
[b-rgftwwadct] .quality-kpi--fitting { border-left-color: var(--rz-primary); }
[b-rgftwwadct] .quality-kpi--fault { border-left-color: var(--rz-secondary); }

[b-rgftwwadct] .quality-kpi__value {
    font-size: 2rem;
    font-weight: 800;
    margin: 0.5rem 0;
    background: linear-gradient(135deg, var(--rz-primary), var(--rz-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[b-rgftwwadct] .quality-kpi__bar {
    height: 0.5rem;
    background: var(--rz-base-200);
    border-radius: 0.25rem;
    overflow: hidden;
    margin: 0.75rem 0;
}

[b-rgftwwadct] .quality-kpi__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--rz-primary), var(--rz-success));
    border-radius: 0.25rem;
    transition: width 0.8s ease;
}

[b-rgftwwadct] .quality-kpi__note {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}
/* /Components/Pages/Employee/EmployeeAgendaTimeline.razor.rz.scp.css */
/* DT-11-33: agenda timeline shared styles voor Home + EmployeeDashboard */

[b-qyfz881nlg] .dash-timeline-nav {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

[b-qyfz881nlg] .dash-timeline-nav .rz-datepicker {
    width: 100%;
}

[b-qyfz881nlg] .dash-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 70vh;
    overflow-y: auto;
    padding-right: 0.25rem;
}

[b-qyfz881nlg] .dash-timeline-row {
    display: grid;
    grid-template-columns: 4rem 0.75rem 1fr;
    gap: 0.6rem;
    align-items: start;
    padding: 0.5rem;
    border-radius: 0.4rem;
    border-left: 3px solid transparent;
    /* Theme-neutraal: in light = lichtgrijs, in dark = subtiele lichte tint */
    background: rgba(127, 127, 127, 0.08);
    cursor: pointer;
    transition: background-color 120ms, border-color 120ms;
}

[b-qyfz881nlg] .dash-timeline-row:hover {
    background: rgba(var(--rz-primary-rgb, 33, 150, 243), 0.12);
}

[b-qyfz881nlg] .dash-timeline-row.past {
    opacity: 0.55;
}

[b-qyfz881nlg] .dash-timeline-row.current {
    border-left-color: var(--rz-primary);
    background: rgba(var(--rz-primary-rgb, 33, 150, 243), 0.15);
}

[b-qyfz881nlg] .dash-timeline-time {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 0.8rem;
    line-height: 1.1;
}

[b-qyfz881nlg] .dash-timeline-start {
    font-weight: 700;
    color: var(--rz-primary);
}

[b-qyfz881nlg] .dash-timeline-end {
    font-size: 0.7rem;
    color: var(--rz-text-secondary-color);
}

[b-qyfz881nlg] .dash-timeline-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    margin-top: 0.3rem;
    justify-self: center;
}

[b-qyfz881nlg] .dash-dot-appointment { background: var(--rz-primary); }
[b-qyfz881nlg] .dash-dot-break       { background: var(--rz-warning); }
[b-qyfz881nlg] .dash-dot-blocked     { background: var(--rz-danger); }
[b-qyfz881nlg] .dash-dot-absence     { background: #9c27b0; }
[b-qyfz881nlg] .dash-dot-default     { background: var(--rz-text-secondary-color); }

[b-qyfz881nlg] .dash-timeline-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

[b-qyfz881nlg] .dash-timeline-title {
    font-weight: 600;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-qyfz881nlg] .dash-timeline-sub {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-qyfz881nlg] .dash-timeline-meta {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    color: var(--rz-text-secondary-color);
    margin-top: 0.15rem;
    flex-wrap: wrap;
}

[b-qyfz881nlg] .dash-timeline-status {
    background: var(--rz-info);
    color: white;
    padding: 0.05rem 0.4rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.65rem;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Home Dashboard Page Styling */

/* Ensure proper spacing around the dashboard content */
.dashboard-page[b-f8zfoffyf2] {
    padding: 1rem;
}

/* Dashboard stats cards row */
.dashboard-stats-row[b-f8zfoffyf2] {
    margin-bottom: 1.5rem;
}

/* Override CustomCard margin for dashboard stats */
.dashboard-stats-row .custom-card[b-f8zfoffyf2] {
    margin-bottom: 0;
    height: 100%;
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* Login.razor.css — scoped styles voor de bento-loginpagina.
   Tokens dupliceren bewust niet — staan inline op .em-page voor portabiliteit. */

/* Light theme tokens (default) */
.em-page[b-2b827oojwr] {
    --em-ink: #0B2A30;
    --em-muted: #5C7480;
    --em-border: #E8EDEF;
    --em-card: #FFFFFF;
    --em-tile: #FFFFFF;
    --em-input-bg: #FFFFFF;
    --em-input-border: #E3E8EA;
    --em-page: #F5F8F9;
    --em-teal: #1A8A9F;
    --em-teal-deep: #0E5A6B;
    --em-coral: #FF7A50;
    --em-coral-bg: #FFEDE6;
    --em-mint: #3CC78E;
    --em-mint-bg: #E1F7EC;
    --em-indigo: #5B61D6;
    --em-indigo-bg: #E8E9FA;
    --em-alert-bg: #FDECEC;
    --em-alert-border: #F5C2C2;
    --em-alert-text: #9E1F1F;
    --em-radius-lg: 24px;
    --em-radius-md: 20px;
    --em-radius-sm: 10px;
    --em-shadow-card: 0 24px 60px -30px rgba(14,90,107,0.25), 0 2px 6px rgba(14,90,107,0.04);
    --em-shadow-tile: 0 12px 40px -24px rgba(14,90,107,0.18);
    --em-page-bg: linear-gradient(135deg, #F1F6F7 0%, #E9F1F3 60%, #E0EEF1 100%);
    /* Overrule Radzen's dark-theme text-color binnen onze scope, anders
       erven CustomLabel-elementen (rz-text-*) lichtgrijs en is alles slecht
       leesbaar op het lichte oppervlak. */
    --rz-text-color: var(--em-ink);
    --rz-text-secondary-color: var(--em-muted);
    --rz-text-disabled-color: var(--em-muted);
    --rz-text-tertiary-color: var(--em-muted);
    box-sizing: border-box;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 28px 48px;
    gap: 24px;
    color: var(--em-ink);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    background: var(--em-page-bg);
    overflow: hidden;
}

/* Dark theme overrides — geactiveerd door data-theme="dark" op .em-page */
.em-page[data-theme="dark"][b-2b827oojwr] {
    --em-ink: #EAF4F6;
    --em-muted: #8BA6AE;
    --em-border: rgba(255,255,255,0.06);
    --em-card: #10303A;
    --em-tile: #14404B;
    --em-input-bg: #0F2730;
    --em-input-border: #1E4451;
    --em-page: #0A1F25;
    --em-coral-bg: rgba(255,122,80,0.18);
    --em-mint-bg: rgba(60,199,142,0.18);
    --em-indigo-bg: rgba(91,97,214,0.18);
    --em-alert-bg: #3A1818;
    --em-alert-border: #7A2828;
    --em-alert-text: #FFB3B3;
    --em-shadow-card: 0 24px 60px -30px rgba(0,0,0,0.6);
    --em-shadow-tile: 0 12px 40px -24px rgba(0,0,0,0.5);
    --em-page-bg: #0A1F25;
    color-scheme: dark;
}

/* Auto: volgt OS-voorkeur via media query */
@media (prefers-color-scheme: dark) {
    .em-page[data-theme="auto"][b-2b827oojwr] {
        --em-ink: #EAF4F6;
        --em-muted: #8BA6AE;
        --em-border: rgba(255,255,255,0.06);
        --em-card: #10303A;
        --em-tile: #14404B;
        --em-input-bg: #0F2730;
        --em-input-border: #1E4451;
        --em-page: #0A1F25;
        --em-coral-bg: rgba(255,122,80,0.18);
        --em-mint-bg: rgba(60,199,142,0.18);
        --em-indigo-bg: rgba(91,97,214,0.18);
        --em-alert-bg: #3A1818;
        --em-alert-border: #7A2828;
        --em-alert-text: #FFB3B3;
        --em-shadow-card: 0 24px 60px -30px rgba(0,0,0,0.6);
        --em-shadow-tile: 0 12px 40px -24px rgba(0,0,0,0.5);
        --em-page-bg: #0A1F25;
        color-scheme: dark;
    }
}

.em-page *[b-2b827oojwr], .em-page *[b-2b827oojwr]::before, .em-page *[b-2b827oojwr]::after { box-sizing: border-box; }

.em-topbar[b-2b827oojwr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.em-logo[b-2b827oojwr] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--em-teal-deep);
    text-decoration: none;
}

.em-logo svg[b-2b827oojwr] { width: 36px; height: 26px; }

.em-logo-text[b-2b827oojwr] {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.em-logo-text strong[b-2b827oojwr] { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.em-logo-text strong em[b-2b827oojwr] { font-style: normal; color: var(--em-teal); }
.em-logo-text small[b-2b827oojwr] { font-size: 10px; color: #7A8E96; margin-top: 4px; letter-spacing: 0.12em; }

.em-topbar-right[b-2b827oojwr] { display: flex; align-items: center; gap: 12px; }
.em-version[b-2b827oojwr] { font-size: 12px; color: var(--em-muted); display: inline-flex; align-items: center; gap: 8px; }
.em-divider[b-2b827oojwr] { width: 1px; height: 18px; background: var(--em-border); }
.em-dot[b-2b827oojwr] { width: 8px; height: 8px; border-radius: 99px; display: inline-block; }
.em-dot-ok[b-2b827oojwr] { background: var(--em-mint); box-shadow: 0 0 0 3px rgba(60,199,142,0.18); }
.em-dot-teal[b-2b827oojwr] { background: var(--em-teal); }
.em-lang-switch[b-2b827oojwr] { display: inline-flex; gap: 0; background: var(--em-card); border: 1px solid var(--em-border); border-radius: 99px; padding: 3px; }

.em-theme-btn[b-2b827oojwr] {
    width: 32px; height: 32px;
    border: 1px solid var(--em-border); background: var(--em-card);
    border-radius: 99px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--em-ink); transition: background .15s, color .15s;
}
.em-theme-btn:hover[b-2b827oojwr] { background: var(--em-tile); color: var(--em-teal); }
.em-theme-btn svg[b-2b827oojwr] { width: 16px; height: 16px; }
.em-lang-btn[b-2b827oojwr] {
    border: none; background: transparent;
    padding: 5px 12px; border-radius: 99px;
    font-family: inherit; font-size: 12px; font-weight: 700;
    color: var(--em-muted); cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    letter-spacing: 0.04em;
}
.em-lang-btn.is-active[b-2b827oojwr] { background: #E6F2F4; color: var(--em-teal-deep); }
.em-flag[b-2b827oojwr] { width: 18px; height: 12px; border-radius: 2px; display: inline-block; background-size: cover; background-position: center; flex-shrink: 0; }
.em-flag-nl[b-2b827oojwr] { background: linear-gradient(to bottom, #AE1C28 33%, #fff 33%, #fff 66%, #21468B 66%); }
.em-flag-de[b-2b827oojwr] { background: linear-gradient(to bottom, #000 33%, #DD0000 33%, #DD0000 66%, #FFCE00 66%); }
.em-flag-fr[b-2b827oojwr] { background: linear-gradient(to right, #0055A4 33%, #fff 33%, #fff 66%, #EF4135 66%); }
.em-flag-en[b-2b827oojwr] {
    background:
        linear-gradient(to bottom, transparent 40%, #fff 40%, #fff 60%, transparent 60%),
        linear-gradient(to right, transparent 40%, #fff 40%, #fff 60%, transparent 60%),
        #C8102E;
    position: relative;
}
.em-flag-en[b-2b827oojwr]::before, .em-flag-en[b-2b827oojwr]::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to bottom right, transparent calc(50% - 1px), #fff calc(50% - 1px), #fff calc(50% + 1px), transparent calc(50% + 1px));
}
.em-flag-en[b-2b827oojwr]::after { background: linear-gradient(to top right, transparent calc(50% - 1px), #fff calc(50% - 1px), #fff calc(50% + 1px), transparent calc(50% + 1px)); }

.em-bento[b-2b827oojwr] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 460px 1fr;
    gap: 24px;
}

.em-card[b-2b827oojwr] {
    background: var(--em-card);
    border-radius: var(--em-radius-lg);
    border: 1px solid var(--em-border);
    padding: 40px 38px;
    box-shadow: var(--em-shadow-card);
}

.em-login[b-2b827oojwr] {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.em-eyebrow[b-2b827oojwr] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 99px;
    background: #E6F2F4;
    color: var(--em-teal);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 16px;
    align-self: flex-start;
}

.em-h1[b-2b827oojwr] { margin: 0; font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--em-ink); }
.em-sub[b-2b827oojwr] { margin: 10px 0 28px; color: var(--em-muted); font-size: 15px; line-height: 1.5; }

/* CustomLabel rendert span met rz-text-* class (display-h5/body1/caption/etc).
   Radzen's dark theme zet die op licht-grijs. Force eigen kleuren met
   !important via scoped ::deep om de Radzen-cascade te overrulen. */
[b-2b827oojwr] .rz-stack { background: transparent; }

/* Default kleuren voor CustomLabel-text binnen .em-page (ouder-context wint
   via specifieker Class=). */
[b-2b827oojwr] .custom-label__text { color: var(--em-ink) !important; }

/* Per-Class overrides — Class= komt mee op de inner span samen met
   custom-label__text en de rz-text-* class. */
[b-2b827oojwr] .em-sub.custom-label__text { color: var(--em-muted) !important; }
[b-2b827oojwr] .em-label.custom-label__text { color: var(--em-muted) !important; }
.em-eyebrow[b-2b827oojwr]  .custom-label__text { color: var(--em-teal) !important; padding-top: 8px; }
.em-version[b-2b827oojwr]  .custom-label__text { color: var(--em-muted) !important; padding-top: 8px; }
.em-center-small[b-2b827oojwr]  .custom-label__text { color: var(--em-muted) !important; }
.em-center-small a[b-2b827oojwr]  .custom-label__text { color: var(--em-teal) !important; }
.em-footer[b-2b827oojwr]  .custom-label__text { color: var(--em-muted) !important; }
.em-row-between a[b-2b827oojwr]  .custom-label__text { color: var(--em-teal) !important; }
.em-row-between label[b-2b827oojwr]  .custom-label__text { color: var(--em-muted) !important; }
.em-btn-primary[b-2b827oojwr]  .custom-label__text { color: #fff !important; }

[b-2b827oojwr] .em-tile-eyebrow.custom-label__text { color: var(--em-muted) !important; }
[b-2b827oojwr] .em-eyebrow-inv.custom-label__text { color: #FFFFFF !important; }
[b-2b827oojwr] .em-stat-body.custom-label__text { color: #FFFFFF !important; opacity: 0.88; }

.em-form[b-2b827oojwr] { display: grid; gap: 18px; margin: 0; }
.em-field[b-2b827oojwr] { display: block; }
.em-label[b-2b827oojwr] { display: block; font-size: 12px; font-weight: 600; color: var(--em-muted); margin-bottom: 6px; letter-spacing: 0.02em; }

.em-input[b-2b827oojwr] {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 14px;
    background: var(--em-input-bg);
    border: 1.5px solid var(--em-input-border);
    border-radius: var(--em-radius-sm);
    transition: border-color .15s, box-shadow .15s;
}

.em-input:focus-within[b-2b827oojwr] { border-color: var(--em-teal); box-shadow: 0 0 0 4px rgba(26,138,159,0.12); }
.em-input svg[b-2b827oojwr] { width: 18px; height: 18px; color: var(--em-muted); flex-shrink: 0; }
.em-input input[b-2b827oojwr] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    color: var(--em-ink);
}

.em-row-between[b-2b827oojwr] { display: flex; align-items: center; justify-content: space-between; margin-top: -2px; }
.em-checkbox[b-2b827oojwr] { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--em-muted); }
.em-checkbox input[b-2b827oojwr] { display: none; }
.em-box[b-2b827oojwr] { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--em-input-border); background: var(--em-input-bg); display: inline-block; transition: all .15s; }
.em-checkbox input:checked ~ .em-box[b-2b827oojwr] { background: var(--em-teal); border-color: var(--em-teal); }
.em-row-between a[b-2b827oojwr] { color: var(--em-teal); font-size: 13px; font-weight: 600; text-decoration: none; }

.em-btn-primary[b-2b827oojwr] {
    height: 50px;
    margin-top: 4px;
    background: linear-gradient(180deg, var(--em-teal) 0%, var(--em-teal-deep) 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 6px 20px -8px rgba(14,90,107,0.55), inset 0 1px 0 rgba(255,255,255,0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform .08s, background .2s;
}

.em-btn-primary:active:not(:disabled)[b-2b827oojwr] { transform: translateY(1px); }
.em-btn-primary:disabled[b-2b827oojwr] { background: #6BA0AC; cursor: wait; }

.em-center-small[b-2b827oojwr] { text-align: center; font-size: 13px; color: var(--em-muted); margin: 0; }
.em-center-small a[b-2b827oojwr] { color: var(--em-teal); font-weight: 600; text-decoration: none; }

.em-alert[b-2b827oojwr] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--em-radius-sm);
    font-size: 13px;
    line-height: 1.4;
}

.em-alert svg[b-2b827oojwr] { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.em-alert-error[b-2b827oojwr] { background: var(--em-alert-bg); border: 1px solid var(--em-alert-border); color: var(--em-alert-text); }
.em-alert-info[b-2b827oojwr] { background: #E6F2F4; border: 1px solid #B8DCE3; color: #0E5A6B; }

@keyframes em-shake-b-2b827oojwr {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

.em-shake[b-2b827oojwr] { animation: em-shake-b-2b827oojwr .4s ease both; }

.em-tiles[b-2b827oojwr] {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    grid-template-rows: 1.1fr 0.9fr;
    gap: 18px;
}

[b-2b827oojwr] .em-tile {
    background: var(--em-tile);
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-md);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: var(--em-shadow-tile);
}

[b-2b827oojwr] .em-tile-big {
    grid-column: 1 / span 1;
    grid-row: 1 / span 2;
    border-radius: var(--em-radius-lg);
    padding: 28px;
    position: relative;
    overflow: hidden;
    justify-content: space-between;
}

[b-2b827oojwr] .em-tile-big::after {
    content: "";
    position: absolute;
    right: -80px; top: -60px;
    width: 240px; height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle at center, var(--em-coral-bg) 0%, transparent 65%);
    pointer-events: none;
}

[b-2b827oojwr] .em-tile-big.is-brand {
    background: linear-gradient(135deg, var(--em-teal-deep) 0%, var(--em-teal) 100%);
    color: #fff;
}

[b-2b827oojwr] .em-tile-big.is-brand::after {
    background: radial-gradient(circle at center, rgba(255,255,255,0.18) 0%, transparent 65%);
}

[b-2b827oojwr] .em-tile-head { display: flex; align-items: center; justify-content: space-between; }

[b-2b827oojwr] .em-tile-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-2b827oojwr] .em-tile-icon svg { width: 22px; height: 22px; }
[b-2b827oojwr] .em-icon-teal { background: #E6F2F4; color: var(--em-teal-deep); }
[b-2b827oojwr] .em-icon-coral { background: var(--em-coral-bg); color: var(--em-coral); }
[b-2b827oojwr] .em-icon-mint { background: var(--em-mint-bg); color: #198555; }
[b-2b827oojwr] .em-icon-indigo { background: var(--em-indigo-bg); color: var(--em-indigo); }

[b-2b827oojwr] .em-tag, [b-2b827oojwr] .em-tag-sm { display: inline-flex; align-items: center; border-radius: 99px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; line-height: 1; }
[b-2b827oojwr] .em-tag { padding: 6px 12px; font-size: 11px; }
[b-2b827oojwr] .em-tag-sm { padding: 3px 9px; font-size: 10px; }
[b-2b827oojwr] .em-tag-teal { background: var(--em-teal); }
[b-2b827oojwr] .em-tag-coral { background: var(--em-coral); }
[b-2b827oojwr] .em-tag-mint { background: var(--em-mint); }
[b-2b827oojwr] .em-tag-indigo { background: var(--em-indigo); }

[b-2b827oojwr] .em-tile h2 { margin: 20px 0 10px; font-size: 28px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; max-width: 360px; color: var(--em-ink) !important; }
[b-2b827oojwr] .em-tile h3 { margin: 4px 0 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--em-ink) !important; }
[b-2b827oojwr] .em-tile p { margin: 0; color: var(--em-muted) !important; font-size: 14px; line-height: 1.5; max-width: 360px; }
[b-2b827oojwr] .em-tile-big.is-brand h2, [b-2b827oojwr] .em-tile-big.is-brand h3 { color: #fff !important; }
[b-2b827oojwr] .em-tile-big.is-brand p { color: rgba(255,255,255,0.85) !important; }
[b-2b827oojwr] .em-tile-head-big { display: flex; align-items: center; gap: 14px; justify-content: flex-start; }
[b-2b827oojwr] .em-tile-eyebrow { font-size: 13px; color: #5C7480; font-weight: 500; }
[b-2b827oojwr] .em-tile-big .em-tile-icon { margin-top: 18px; }

[b-2b827oojwr] .em-cta-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    align-self: flex-start;
    color: #fff;
    border-radius: 99px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    margin-top: auto;
    position: relative;
    z-index: 1;
}

[b-2b827oojwr] .em-cta-pill.is-coral { background: var(--em-coral); box-shadow: 0 8px 24px -10px var(--em-coral); }
[b-2b827oojwr] .em-cta-pill.is-teal { background: var(--em-teal); box-shadow: 0 8px 24px -10px var(--em-teal); }
[b-2b827oojwr] .em-cta-pill.is-mint { background: var(--em-mint); box-shadow: 0 8px 24px -10px var(--em-mint); }
[b-2b827oojwr] .em-cta-pill.is-indigo { background: var(--em-indigo); box-shadow: 0 8px 24px -10px var(--em-indigo); }

[b-2b827oojwr] .em-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

[b-2b827oojwr] .em-link-teal { color: var(--em-teal); }
[b-2b827oojwr] .em-link-coral { color: var(--em-coral); }
[b-2b827oojwr] .em-link-mint { color: #198555; }
[b-2b827oojwr] .em-link-indigo { color: var(--em-indigo); }

[b-2b827oojwr] .em-tile-stat {
    background: linear-gradient(180deg, var(--em-teal-deep) 0%, var(--em-teal) 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
    justify-content: flex-start;
}

[b-2b827oojwr] .em-tile-stat::after {
    content: "";
    position: absolute;
    right: -40px; bottom: -40px;
    width: 140px; height: 140px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.15);
    pointer-events: none;
}

[b-2b827oojwr] .em-tile-stat::before {
    content: "";
    position: absolute;
    right: -10px; bottom: -10px;
    width: 60px; height: 60px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.12);
    pointer-events: none;
}

[b-2b827oojwr] .em-tile-stat .em-eyebrow-inv {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #FFFFFF !important;
    opacity: 0.85;
}

[b-2b827oojwr] .em-tile-stat .em-stat-number { font-size: 42px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; margin: 8px 0 6px; color: var(--em-mint) !important; }
[b-2b827oojwr] .em-tile-stat .em-stat-body { color: #FFFFFF !important; font-size: 13px; max-width: none; opacity: 0.88; }

.em-footer[b-2b827oojwr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--em-muted);
}

.em-footer a[b-2b827oojwr] { color: var(--em-muted); text-decoration: none; }
.em-footer a:hover[b-2b827oojwr] { color: var(--em-ink); }

/* CustomLabel rendert altijd een wrapper-<div> (ook met NoWrapper=true,
   zie WrapperClass-logic). display:contents pakt 'm uit layout — de
   inner span valt direct in parent flex/inline-flow, geen verticale
   misalignment. */
.em-footer[b-2b827oojwr]  div,
.em-version[b-2b827oojwr]  div,
.em-center-small[b-2b827oojwr]  div,
.em-eyebrow[b-2b827oojwr]  div,
.em-row-between a[b-2b827oojwr]  div,
.em-row-between label[b-2b827oojwr]  div,
.em-alert[b-2b827oojwr]  div { display: contents; }

@media (max-width: 1100px) {
    .em-page[b-2b827oojwr] { padding: 28px 32px; gap: 24px; }
    .em-bento[b-2b827oojwr] { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .em-page[b-2b827oojwr] { padding: 20px 18px; gap: 20px; }
    .em-card[b-2b827oojwr] { padding: 28px 22px; }
    .em-h1[b-2b827oojwr] { font-size: 26px; }
    .em-tiles[b-2b827oojwr] { grid-template-columns: 1fr; grid-template-rows: auto; }
    [b-2b827oojwr] .em-tile-big { grid-column: auto; grid-row: auto; }
    .em-footer[b-2b827oojwr] { flex-direction: column; gap: 6px; }
}

/* BigEpic 66668: status-dot varianten (login-topbar) */
.em-dot-warn[b-2b827oojwr] { background: #f0a020; box-shadow: 0 0 0 3px rgba(240,160,32,0.18); }
.em-dot-err[b-2b827oojwr]  { background: #e5484d; box-shadow: 0 0 0 3px rgba(229,72,77,0.18); }


.em-employee-btn svg[b-2b827oojwr] {
    width: 1.4rem;
    height: 1.4rem;
    color: var(--em-teal);
    flex: 0 0 auto;
}
/* /Components/Pages/Marketing/CampaignAdviceFeed.razor.rz.scp.css */
/* DT-11.1-8: Opportunities-dashboard — mock-layout vertaald naar de EyeManage-huisstijl.
   Structuur en informatiedichtheid volgen de mock; kleuren/typografie komen uit de
   em-design-tokens zodat dit scherm één geheel vormt met o.a. het klantdashboard. */

.opp-header[b-hvtdvs0h0a] {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1rem;
}

.opp-kicker[b-hvtdvs0h0a] {
    font-family: var(--em-font-mono, monospace);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--em-accent, #0e7c9b);
    margin-bottom: 0.4rem;
}

.opp-title[b-hvtdvs0h0a] {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--em-text-primary, #16323b);
    margin: 0;
    letter-spacing: -0.01em;
}

.opp-header-meta[b-hvtdvs0h0a] {
    margin-left: auto;
    text-align: right;
    font-size: 0.78rem;
    color: var(--em-text-secondary, #5a6b71);
}

.opp-mono[b-hvtdvs0h0a] {
    font-family: var(--em-font-mono, monospace);
}

/* --- Toolbar --- */
.opp-toolbar[b-hvtdvs0h0a] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--em-bg-surface, #fff);
    border: 1px solid var(--em-border-subtle, #e2ded4);
    border-radius: var(--em-radius-md, 4px);
    padding: 0.55rem 0.7rem;
    margin-bottom: 0.9rem;
}

.opp-tabs[b-hvtdvs0h0a] {
    display: flex;
    gap: 0.35rem;
}

.opp-tab[b-hvtdvs0h0a] {
    padding: 0.55rem 0.85rem;
    border-radius: var(--em-radius-md, 4px);
    border: 1px solid var(--em-border-subtle, #e2ded4);
    background: var(--em-bg-surface, #fff);
    color: var(--em-text-secondary, #3f5a62);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.opp-tab:hover[b-hvtdvs0h0a] {
    border-color: var(--em-border-hover, #bfe0e8);
}

.opp-tab-active[b-hvtdvs0h0a] {
    background: var(--em-accent, #0e7c9b);
    border-color: var(--em-accent, #0e7c9b);
    color: var(--em-text-inverse, #fff);
}

.opp-toolbar-actions[b-hvtdvs0h0a] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.opp-btn-light[b-hvtdvs0h0a] {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 0.8rem;
    border-radius: var(--em-radius-md, 4px);
    border: 1px solid var(--em-border-subtle, #e2ded4);
    background: var(--em-bg-surface, #fff);
    color: var(--em-text-secondary, #3f5a62);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
}

.opp-btn-light:hover[b-hvtdvs0h0a] {
    color: var(--em-accent, #0e7c9b);
    border-color: var(--em-border-hover, #bfe0e8);
}

/* --- KPI-rij --- */
.opp-kpis[b-hvtdvs0h0a] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.opp-kpi[b-hvtdvs0h0a] {
    background: var(--em-bg-surface, #fff);
    border: 1px solid var(--em-border-subtle, #e2ded4);
    border-left: 3px solid var(--em-accent, #0e7c9b);
    border-radius: var(--em-radius-md, 4px);
    padding: 0.85rem 0.9rem;
}

.opp-kpi-purple[b-hvtdvs0h0a] { border-left-color: #7e5aa6; }
.opp-kpi-green[b-hvtdvs0h0a] { border-left-color: var(--em-status-done, #2e9e5b); }
.opp-kpi-orange[b-hvtdvs0h0a] { border-left-color: #e07b3c; }
.opp-kpi-gold[b-hvtdvs0h0a] { border-left-color: #c9a227; }

.opp-kpi-label[b-hvtdvs0h0a] {
    font-family: var(--em-font-mono, monospace);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--em-text-secondary, #8a979c);
}

.opp-kpi-value[b-hvtdvs0h0a] {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--em-text-primary, #16323b);
    margin-top: 0.5rem;
    line-height: 1;
}

.opp-kpi-note[b-hvtdvs0h0a] {
    font-size: 0.72rem;
    color: var(--em-text-secondary, #5a6b71);
    margin-top: 0.45rem;
}

/* --- Kolommen --- */
.opp-columns[b-hvtdvs0h0a] {
    display: grid;
    grid-template-columns: 1fr minmax(16rem, 21rem);
    gap: 0.9rem;
    align-items: start;
}

@media (max-width: 1100px) {
    .opp-columns[b-hvtdvs0h0a] { grid-template-columns: 1fr; }
}

.opp-panel[b-hvtdvs0h0a] {
    background: var(--em-bg-surface, #fff);
    border: 1px solid var(--em-border-subtle, #e2ded4);
    border-top: 3px solid var(--em-accent, #0e7c9b);
    border-radius: var(--em-radius-md, 4px);
    padding: 1rem 1.1rem;
}

.opp-panel-nachtrun[b-hvtdvs0h0a] { border-top-color: #7e5aa6; }
.opp-panel-auto[b-hvtdvs0h0a] { border-top-color: var(--em-status-done, #2e9e5b); }

.opp-panel-head[b-hvtdvs0h0a] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.25rem;
}

.opp-panel-title[b-hvtdvs0h0a] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--em-text-primary, #16323b);
}

.opp-panel-sub[b-hvtdvs0h0a] {
    margin-left: auto;
    font-size: 0.72rem;
    color: var(--em-text-secondary, #8a979c);
}

.opp-panel-intro[b-hvtdvs0h0a] {
    font-size: 0.72rem;
    color: var(--em-text-secondary, #8a979c);
    margin-bottom: 0.9rem;
}

.opp-panel-foot[b-hvtdvs0h0a] {
    font-size: 0.7rem;
    color: var(--em-text-secondary, #8a979c);
    margin-top: 0.6rem;
}

/* --- Kansenlijst --- */
.opp-list[b-hvtdvs0h0a] {
    /* Twee kaarten naast elkaar (wens Richard 24-08): halveert de lijstdiepte;
       op smallere schermen terug naar één kolom. */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    align-items: stretch;
}

@media (max-width: 1100px) {
    .opp-list[b-hvtdvs0h0a] {
        grid-template-columns: 1fr;
    }
}

.opp-list .opp-row[b-hvtdvs0h0a] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.opp-list .opp-row .opp-row-desc[b-hvtdvs0h0a] {
    flex: 1;
}

.opp-row[b-hvtdvs0h0a] {
    border: 1px solid var(--em-border-subtle, #e2ded4);
    border-left: 3px solid var(--em-accent, #0e7c9b);
    border-radius: var(--em-radius-sm, 3px);
    padding: 0.75rem 0.8rem;
    cursor: pointer;
}

.opp-row:hover[b-hvtdvs0h0a] {
    border-color: var(--em-border-hover, #bfe0e8);
    background: var(--em-bg-surface-sunken, #fcfbf7);
}

.opp-row-top[b-hvtdvs0h0a] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.opp-row-name[b-hvtdvs0h0a] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--em-text-primary, #16323b);
}

.opp-row-potential[b-hvtdvs0h0a] {
    margin-left: auto;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--em-text-primary, #16323b);
}

.opp-row-chevron[b-hvtdvs0h0a] {
    color: var(--em-text-disabled, #b7c1c4);
}

.opp-row-desc[b-hvtdvs0h0a] {
    font-size: 0.75rem;
    color: var(--em-text-secondary, #5a6b71);
    margin-top: 0.35rem;
    line-height: 1.45;
}

.opp-row-chips[b-hvtdvs0h0a] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.55rem;
    flex-wrap: wrap;
}

.opp-chip[b-hvtdvs0h0a] {
    font-size: 0.7rem;
    color: var(--em-text-secondary, #5a6b71);
    background: var(--em-bg-surface-sunken, #f4f2ec);
    border: 1px solid var(--em-border-subtle, #e7e3d9);
    border-radius: var(--em-radius-xs, 2px);
    padding: 0.18rem 0.5rem;
}

.opp-chip-warn[b-hvtdvs0h0a] {
    color: #b7891b;
    background: #fbf3de;
    border-color: #f0e4c4;
}

.opp-chip-channel[b-hvtdvs0h0a] {
    margin-left: auto;
    color: var(--em-accent, #0e7c9b);
    background: var(--em-accent-lighter, #e8f3f6);
    border-color: transparent;
    font-weight: 600;
}

.opp-chip-code[b-hvtdvs0h0a] {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--em-text-secondary, #8a979c);
}

/* --- Badges --- */
.opp-badge[b-hvtdvs0h0a] {
    font-size: 0.63rem;
    font-weight: 700;
    border-radius: var(--em-radius-xs, 2px);
    padding: 0.18rem 0.45rem;
}

.opp-badge-hoog[b-hvtdvs0h0a] { color: #d6483f; background: #fbe9ec; }
.opp-badge-middel[b-hvtdvs0h0a] { color: #b7891b; background: #fbf3de; }
.opp-badge-laag[b-hvtdvs0h0a] { color: var(--em-text-secondary, #5a6b71); background: #f0eee7; }
.opp-badge-auto[b-hvtdvs0h0a] { color: #7e5aa6; background: #f2ecf7; }
.opp-badge-ok[b-hvtdvs0h0a] { color: var(--em-status-done, #2e9e5b); background: #e7f5ec; margin-left: auto; }

/* --- Rechterkolom --- */
.opp-side[b-hvtdvs0h0a] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.opp-run-row[b-hvtdvs0h0a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--em-border-subtle, #ece8de);
}

.opp-run-dot[b-hvtdvs0h0a] {
    width: 6px;
    height: 6px;
    border-radius: var(--em-radius-full, 999px);
    flex: none;
    background: var(--em-text-disabled, #9aa7ac);
}

.opp-dot-hoog[b-hvtdvs0h0a] { background: #d6483f; }
.opp-dot-middel[b-hvtdvs0h0a] { background: #c9a227; }

.opp-run-name[b-hvtdvs0h0a] {
    font-size: 0.75rem;
    color: var(--em-text-primary, #16323b);
}

.opp-run-count[b-hvtdvs0h0a] {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--em-text-secondary, #8a979c);
}

.opp-auto-row[b-hvtdvs0h0a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--em-border-subtle, #e2ded4);
    border-left: 3px solid var(--em-status-done, #2e9e5b);
    border-radius: var(--em-radius-sm, 3px);
    padding: 0.6rem 0.65rem;
    margin-bottom: 0.5rem;
}

/* --- Lege staten --- */
.opp-empty[b-hvtdvs0h0a] {
    border: 1px dashed var(--em-border-subtle, #e2ded4);
    border-radius: var(--em-radius-sm, 3px);
    padding: 1.75rem;
    text-align: center;
    font-size: 0.78rem;
    color: var(--em-text-secondary, #8a979c);
}

.opp-empty-small[b-hvtdvs0h0a] {
    font-size: 0.72rem;
    color: var(--em-text-secondary, #8a979c);
}

.opp-coldstart[b-hvtdvs0h0a] {
    font-size: 0.72rem;
    font-style: italic;
    color: var(--em-text-secondary, #8a979c);
    background: var(--em-bg-surface-sunken, #fcfbf7);
    border: 1px solid var(--em-border-subtle, #ece8de);
    border-radius: var(--em-radius-sm, 3px);
    padding: 0.5rem 0.65rem;
    margin-bottom: 0.75rem;
}

/* --- DT-60.10-8: kanaal-filter + KPI via CustomStatCard + genegeerde kansen --- */
.opp-toolbar-divider[b-hvtdvs0h0a] {
    width: 1px;
    height: 1.6rem;
    background: var(--em-border-subtle, #ece8de);
    margin: 0 0.25rem;
}

.opp-channel-filter[b-hvtdvs0h0a] {
    display: flex;
    align-items: center;
}

.opp-kpis[b-hvtdvs0h0a]  .stat-card {
    padding: 0.85rem 0.9rem;
}

.opp-row-ignored[b-hvtdvs0h0a] {
    opacity: 0.92;
}

/* DT-60.10-10: bibliotheek-paneel met link + Binnenkort-chips */
.opp-panel-library[b-hvtdvs0h0a] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.opp-library-link[b-hvtdvs0h0a] {
    align-self: flex-start;
    text-decoration: none;
}

.opp-upcoming[b-hvtdvs0h0a] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.opp-upcoming-label[b-hvtdvs0h0a] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--em-text-secondary, #5a6b71);
}

.opp-chip-upcoming[b-hvtdvs0h0a] {
    background: var(--em-bg-muted, #f2efe8);
    color: var(--em-text-secondary, #5a6b71);
}
/* /Components/Pages/Marketing/CampaignLibrary.razor.rz.scp.css */
/* DT-60.10-7: campagnebibliotheek — zelfde koppatroon en em-tokens als de adviesfeed */
.lib-header[b-fwf1dm8juv] {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1rem;
}

.lib-kicker[b-fwf1dm8juv] {
    font-family: var(--em-font-mono, monospace);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--em-accent, #0e7c9b);
    margin-bottom: 0.4rem;
}

.lib-title[b-fwf1dm8juv] {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--em-text-primary, #16323b);
    margin: 0;
    letter-spacing: -0.01em;
}

.lib-subtitle[b-fwf1dm8juv] {
    font-size: 0.85rem;
    color: var(--em-text-secondary, #5a6b71);
    margin-top: 0.2rem;
}

.lib-header-meta[b-fwf1dm8juv] {
    margin-left: auto;
    text-align: right;
    font-size: 0.78rem;
    color: var(--em-text-secondary, #5a6b71);
}

.lib-toolbar[b-fwf1dm8juv] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--em-bg-surface, #fff);
    border: 1px solid var(--em-border-subtle, #e2ded4);
    border-radius: var(--em-radius-md, 4px);
    padding: 0.55rem 0.7rem;
    margin-bottom: 0.9rem;
    overflow-x: auto;
}

.lib-grid[b-fwf1dm8juv] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

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

@media (max-width: 860px) {
    .lib-grid[b-fwf1dm8juv] {
        grid-template-columns: 1fr;
    }
}

/* kaart (het kind-component rendert in deze scope via ::deep) */
[b-fwf1dm8juv] .lib-card {
    height: 100%;
}

[b-fwf1dm8juv] .lib-card-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
}

[b-fwf1dm8juv] .lib-card-active {
    --em-card-accent: var(--rz-success, #2e7d32);
}

[b-fwf1dm8juv] .lib-card-head {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

[b-fwf1dm8juv] .lib-card-icon {
    font-size: 1.6rem;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--em-radius-md, 6px);
    background: var(--em-bg-muted, #eef6f8);
    color: var(--em-accent, #0e7c9b);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

[b-fwf1dm8juv] .lib-card-titles {
    min-width: 0;
    flex: 1;
}

[b-fwf1dm8juv] .lib-card-category {
    font-family: var(--em-font-mono, monospace);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--em-accent, #0e7c9b);
}

[b-fwf1dm8juv] .lib-card-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0.1rem 0 0;
    color: var(--em-text-primary, #16323b);
    line-height: 1.25;
}

[b-fwf1dm8juv] .lib-card-status {
    flex: none;
}

[b-fwf1dm8juv] .lib-card-description {
    font-size: 0.84rem;
    line-height: 1.4;
    color: var(--em-text-secondary, #5a6b71);
    margin: 0.6rem 0 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;
}

[b-fwf1dm8juv] .lib-card-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin-bottom: 0.85rem;
}

[b-fwf1dm8juv] .lib-chip-channel,
[b-fwf1dm8juv] .lib-chip-target {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.74rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--em-border-subtle, #e2ded4);
    color: var(--em-text-secondary, #5a6b71);
}

[b-fwf1dm8juv] .lib-chip-channel .rzi,
[b-fwf1dm8juv] .lib-chip-target .rzi {
    font-size: 0.95rem;
}

[b-fwf1dm8juv] .lib-card-icon .rzi {
    font-size: 1.5rem;
}

[b-fwf1dm8juv] .lib-card-actions {
    margin-top: auto;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* DT-60.10-16 (inzicht): het Prijsbasis-paneel onder het campagne-raster */
.lib-price-basis[b-fwf1dm8juv] {
    margin-top: 1.5rem;
}
/* /Components/Pages/Marketing/Components/CampaignLibraryDrawer.razor.rz.scp.css */
/* DT-60.10-7: bibliotheek-drawer — links wat/wie/wanneer, rechts de berichten */
.lib-drawer[b-9r5skpzwv5] {
    display: grid;
    grid-template-columns: minmax(280px, 5fr) minmax(380px, 7fr);
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 1100px) {
    .lib-drawer[b-9r5skpzwv5] {
        grid-template-columns: 1fr;
    }
}

.lib-drawer-left[b-9r5skpzwv5],
.lib-drawer-right[b-9r5skpzwv5] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.lib-drawer-kicker[b-9r5skpzwv5] {
    font-family: var(--em-font-mono, monospace);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--em-accent, #0e7c9b);
}

.lib-drawer-description[b-9r5skpzwv5] {
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--em-text-primary, #16323b);
    margin: 0 0 0.5rem;
}

.lib-drawer-text[b-9r5skpzwv5] {
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--em-text-secondary, #5a6b71);
    margin: 0 0 0.5rem;
}

/* tijdlijn */
.lib-timeline[b-9r5skpzwv5] {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
    position: relative;
}

.lib-timeline[b-9r5skpzwv5]::before {
    content: "";
    position: absolute;
    left: 0.85rem;
    top: 0.5rem;
    bottom: 0.5rem;
    border-left: 2px solid var(--em-border-subtle, #e2ded4);
}

.lib-timeline-row[b-9r5skpzwv5] {
    display: grid;
    grid-template-columns: 1.75rem 4.5rem 4rem 1fr auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    font-size: 0.82rem;
    position: relative;
}

.lib-timeline-dot[b-9r5skpzwv5] {
    font-size: 1rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--em-accent, #0e7c9b);
    color: var(--em-text-inverse, #fff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.lib-timeline-round[b-9r5skpzwv5] {
    font-weight: 700;
}

.lib-timeline-channel[b-9r5skpzwv5],
.lib-timeline-day[b-9r5skpzwv5] {
    color: var(--em-text-secondary, #5a6b71);
}

.lib-timeline-urgency[b-9r5skpzwv5] {
    font-size: 0.72rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--em-bg-muted, #f2efe8);
    color: var(--em-text-secondary, #5a6b71);
}

.lib-timeline-empty[b-9r5skpzwv5] {
    font-size: 0.82rem;
    color: var(--em-text-muted, #9ca3af);
    padding-left: 2.25rem;
}

/* doelgroep */
.lib-audience[b-9r5skpzwv5] {
    border: 1px solid var(--em-border-subtle, #e2ded4);
    border-radius: var(--em-radius-md, 6px);
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
}

.lib-audience-size[b-9r5skpzwv5] {
    font-weight: 700;
    font-size: 1rem;
}

.lib-audience-names[b-9r5skpzwv5] {
    color: var(--em-text-secondary, #5a6b71);
    margin-top: 0.2rem;
}

.lib-audience-muted[b-9r5skpzwv5],
.lib-muted[b-9r5skpzwv5] {
    color: var(--em-text-muted, #6b7280);
    font-size: 0.8rem;
}

.lib-drawer-cta[b-9r5skpzwv5] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--em-border-subtle, #e2ded4);
    border-bottom: 1px solid var(--em-border-subtle, #e2ded4);
    margin: 0.5rem 0;
}

/* geavanceerd */
.lib-advanced-fields[b-9r5skpzwv5] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.lib-advanced-readonly[b-9r5skpzwv5] {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    padding: 0.35rem 0;
    border-bottom: 1px dashed var(--em-border-subtle, #e2ded4);
}

.lib-advanced-readonly-label[b-9r5skpzwv5] {
    color: var(--em-text-secondary, #5a6b71);
}

.lib-season-grid[b-9r5skpzwv5] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0.5rem;
}

.lib-advanced-actions[b-9r5skpzwv5] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* previews */
.lib-preview-toolbar[b-9r5skpzwv5] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.lib-tone-bar[b-9r5skpzwv5] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-top: 0.25rem;
}

.lib-email-subject[b-9r5skpzwv5] {
    font-size: 0.85rem;
    padding: 0.45rem 0.7rem;
    background: var(--em-bg-muted, #f2efe8);
    border-radius: var(--em-radius-md, 6px) var(--em-radius-md, 6px) 0 0;
    border: 1px solid var(--rz-base-300);
    border-bottom: none;
    margin-top: 0.5rem;
}

.lib-email-subject-label[b-9r5skpzwv5] {
    color: var(--em-text-secondary, #5a6b71);
    margin-right: 0.35rem;
}

.lib-empty-preview[b-9r5skpzwv5] {
    border: 1px dashed var(--em-border-subtle, #e2ded4);
    border-radius: 0 0 var(--em-radius-md, 6px) var(--em-radius-md, 6px);
}

.lib-ai-apply[b-9r5skpzwv5] {
    display: flex;
    justify-content: flex-end;
}

.lib-sms-row[b-9r5skpzwv5] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: start;
}

@media (max-width: 900px) {
    .lib-sms-row[b-9r5skpzwv5] {
        grid-template-columns: 1fr;
    }
}

/* bewerken + AI */
.lib-edit[b-9r5skpzwv5],
.lib-ai[b-9r5skpzwv5] {
    border-top: 1px solid var(--em-border-subtle, #e2ded4);
    padding-top: 0.75rem;
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.lib-edit-title[b-9r5skpzwv5] {
    font-weight: 700;
    font-size: 0.85rem;
}

.lib-edit-form[b-9r5skpzwv5] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.lib-edit-actions[b-9r5skpzwv5],
.lib-ai-actions[b-9r5skpzwv5] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.lib-ai-fallback[b-9r5skpzwv5] {
    font-size: 0.8rem;
    color: var(--rz-warning-dark, #b45309);
}

/* DT-60.10-10: kopregel bij openen vanuit "Lopende campagnes" */
.lib-running-banner[b-9r5skpzwv5] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem;
    margin-bottom: 1rem;
    border: 1px solid var(--em-accent, #0e7c9b);
    border-radius: var(--em-radius-md, 8px);
    background: color-mix(in srgb, var(--em-accent, #0e7c9b) 8%, transparent);
}

.lib-running-title[b-9r5skpzwv5] {
    font-weight: 700;
    font-size: 0.9rem;
}

.lib-running-sub[b-9r5skpzwv5] {
    font-size: 0.8rem;
    color: var(--em-text-secondary, #5a6b71);
}

/* DT-60.10-10: eerste-kanaal-keuze */
.lib-first-channel[b-9r5skpzwv5] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.lib-first-channel-label[b-9r5skpzwv5] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--em-text-secondary, #5a6b71);
}

/* DT-60.10-10 ronde 2: AI-instructie en knoppen naast elkaar in de SMS-kaart */
.lib-ai-row[b-9r5skpzwv5] {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.lib-ai-instruction[b-9r5skpzwv5] {
    flex: 1 1 260px;
    min-width: 0;
}

.lib-ai-instruction[b-9r5skpzwv5]  .rz-form-field,
.lib-ai-instruction[b-9r5skpzwv5]  .rz-form-field-content,
.lib-ai-instruction[b-9r5skpzwv5]  .rz-textbox,
.lib-ai-instruction[b-9r5skpzwv5]  input {
    width: 100%;
}
/* /Components/Pages/Marketing/Components/EmailPreviewFrame.razor.rz.scp.css */
/* DT-60.10-7: e-mail-voorbeeld als iframe (huisstijl-wrap) */
.email-preview-frame[b-oane694wy0] {
    width: 100%;
    height: 420px;
    border: 1px solid var(--rz-base-300);
    border-radius: 6px;
    background: #fff;
    margin-bottom: 1rem;
}

.email-preview-thumbnail[b-oane694wy0] {
    height: 160px;
    pointer-events: none;
    margin-bottom: 0;
}
/* /Components/Pages/Marketing/Components/OpportunityDetailDrawer.razor.rz.scp.css */
/* DT-11.2-6: opportunity-detail — nette doelgroep-rijen + SMS als telefoonbericht */

.round-plan[b-snxyo2romb] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.round-row[b-snxyo2romb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* SMS-bubbel en e-mail-iframe: gedeelde componenten SmsBubblePreview / EmailPreviewFrame (DT-60.10-7) */
.sms-counter[b-snxyo2romb] {
    font-size: 0.75rem;
    color: var(--em-text-muted, #6b7280);
    margin-bottom: 1rem;
}

/* --- Omzetprojectie --- */
.revenue-projection[b-snxyo2romb] {
    border: 1px solid var(--em-border-color, #e0e0e0);
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 1rem;
}

.revenue-basis[b-snxyo2romb] {
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.revenue-scenarios[b-snxyo2romb] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.revenue-scenario[b-snxyo2romb] {
    flex: 1 1 8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    border-radius: 0.5rem;
    background: var(--em-surface-alt, #f7f8fa);
}

.revenue-scenario-pct[b-snxyo2romb] {
    font-size: 0.8rem;
    color: var(--em-text-muted, #6b7280);
}

.revenue-scenario-customers[b-snxyo2romb] {
    font-size: 0.8rem;
}

.revenue-scenario-amount[b-snxyo2romb] {
    font-size: 1.1rem;
    font-weight: 700;
}

.revenue-disclaimer[b-snxyo2romb] {
    font-size: 0.72rem;
    color: var(--em-text-muted, #9ca3af);
    margin-top: 0.5rem;
}

/* --- Doelgroep --- */
.member-summary[b-snxyo2romb] {
    font-size: 0.9rem;
    margin: 0.25rem 0 0.5rem;
}

.member-summary-reachable[b-snxyo2romb] {
    font-weight: 700;
    font-size: 1.05rem;
}

.member-list[b-snxyo2romb] {
    display: flex;
    flex-direction: column;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--em-border-color, #e0e0e0);
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}

.member-row[b-snxyo2romb] {
    display: grid;
    grid-template-columns: 5.5rem minmax(10rem, 1fr) 2fr;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem;
    border-bottom: 1px solid var(--em-border-color, #f0f0f0);
    font-size: 0.85rem;
}

.member-row:last-child[b-snxyo2romb] {
    border-bottom: none;
}

.member-suppressed[b-snxyo2romb] {
    opacity: 0.65;
}

.member-name[b-snxyo2romb] {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-reason[b-snxyo2romb] {
    color: var(--em-text-muted, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.launch-bar[b-snxyo2romb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--em-border-color, #e0e0e0);
}

/* DT-60.10-10: kanaalkeuze boven de toon-miniaturen */
.opp-tone-toolbar[b-snxyo2romb] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.25rem 0 0.5rem;
}

/* DT-60.10-10 ronde 2: AI-instructie en genereer-knop naast elkaar in de SMS-kaart */
.opp-ai-row[b-snxyo2romb] {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.opp-ai-instruction[b-snxyo2romb] {
    flex: 1 1 260px;
    min-width: 0;
}

.opp-ai-instruction[b-snxyo2romb]  .rz-form-field,
.opp-ai-instruction[b-snxyo2romb]  .rz-form-field-content,
.opp-ai-instruction[b-snxyo2romb]  .rz-textbox,
.opp-ai-instruction[b-snxyo2romb]  input {
    width: 100%;
}

/* DT-60.10-16 (inzicht): chip naar het Prijsbasis-paneel in de bibliotheek */
.revenue-basis-link[b-snxyo2romb] {
    display: inline-block;
    margin-left: 0.35rem;
    font-size: 0.8rem;
    color: var(--em-primary, #1a73e8);
    text-decoration: none;
    border: 1px solid var(--em-border, #e0e0e0);
    border-radius: 999px;
    padding: 0.05rem 0.6rem;
}

.revenue-basis-link:hover[b-snxyo2romb] {
    text-decoration: underline;
}
/* /Components/Pages/Marketing/Components/PriceBasisPanel.razor.rz.scp.css */
/* DT-60.10-16 (inzicht): het Prijsbasis-paneel op de campagnebibliotheek. */

.price-basis[b-vl4v2br30c] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.price-basis-intro[b-vl4v2br30c] {
    font-size: 0.875rem;
    color: var(--em-text-secondary, #5f6368);
}

.price-basis-grid[b-vl4v2br30c] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.75rem;
}

.price-basis-card[b-vl4v2br30c] {
    border: 1px solid var(--em-border, #e0e0e0);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    background: var(--em-surface, #fff);
}

.price-basis-card-label[b-vl4v2br30c] {
    font-weight: 600;
    font-size: 0.9375rem;
}

.price-basis-card-definition[b-vl4v2br30c] {
    font-size: 0.8125rem;
    color: var(--em-text-secondary, #5f6368);
    min-height: 2.4em;
}

.price-basis-card-figures[b-vl4v2br30c] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    margin-top: auto;
}

.price-basis-avg[b-vl4v2br30c] {
    font-size: 1.25rem;
    font-weight: 700;
}

.price-basis-detail[b-vl4v2br30c] {
    font-size: 0.8125rem;
    color: var(--em-text-secondary, #5f6368);
}

.price-basis-card-insufficient[b-vl4v2br30c] {
    font-size: 0.8125rem;
    font-style: italic;
    color: var(--em-text-secondary, #9aa0a6);
    margin-top: auto;
}

.price-basis-period[b-vl4v2br30c] {
    font-size: 0.8125rem;
    color: var(--em-text-secondary, #5f6368);
}
/* /Components/Pages/Marketing/Components/RunningCampaignsPanel.razor.rz.scp.css */
/* DT-60.10-8: paneel Lopende campagnes (mock: oranje topbalk, kaart per instance met vier cijfers) */

.rc-panel[b-psyvkdlvc6] {
    background: var(--em-bg-surface, #fff);
    border: 1px solid var(--em-border-subtle, #e2ded4);
    border-top: 3px solid #e07b3c;
    border-radius: var(--em-radius-md, 4px);
    padding: 0.9rem 1rem;
}

.rc-head[b-psyvkdlvc6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.rc-title[b-psyvkdlvc6] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--em-text-primary, #16323b);
}

.rc-totals[b-psyvkdlvc6] {
    margin-left: auto;
    font-size: 0.72rem;
    color: var(--em-text-secondary, #8a979c);
}

.rc-row[b-psyvkdlvc6] {
    border: 1px solid var(--em-border-subtle, #e2ded4);
    border-left: 3px solid var(--em-accent, #0e7c9b);
    border-radius: 3px;
    padding: 0.7rem 0.8rem;
    margin-bottom: 0.55rem;
}

.rc-row-completed[b-psyvkdlvc6] { border-left-color: var(--em-status-done, #2e9e5b); }
.rc-row-cancelled[b-psyvkdlvc6] { border-left-color: #b7c1c4; }

.rc-row-top[b-psyvkdlvc6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rc-name[b-psyvkdlvc6] {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--em-text-primary, #16323b);
}

.rc-badge[b-psyvkdlvc6] {
    margin-left: auto;
    font-size: 0.62rem;
    font-weight: 700;
    border-radius: 2px;
    padding: 0.2rem 0.5rem;
    white-space: nowrap;
}

.rc-badge-active[b-psyvkdlvc6] { color: var(--em-status-done, #2e9e5b); background: #e7f5ec; }
.rc-badge-completed[b-psyvkdlvc6] { color: #3f5a62; background: #eef2f3; }
.rc-badge-cancelled[b-psyvkdlvc6] { color: #8a979c; background: #f0eee7; }

.rc-meta[b-psyvkdlvc6] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.35rem;
    font-size: 0.68rem;
    color: var(--em-text-secondary, #8a979c);
}

.rc-chip[b-psyvkdlvc6] {
    border: 1px solid var(--em-border-subtle, #e2ded4);
    border-radius: 2px;
    padding: 0.1rem 0.4rem;
}

.rc-chip-channel[b-psyvkdlvc6] {
    color: var(--em-accent, #0e7c9b);
    border-color: #cfe5ec;
    background: #eef6f9;
}

.rc-mono[b-psyvkdlvc6] {
    font-family: var(--em-font-mono, monospace);
}

.rc-metrics[b-psyvkdlvc6] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.rc-metric-label[b-psyvkdlvc6] {
    font-family: var(--em-font-mono, monospace);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--em-text-secondary, #8a979c);
}

.rc-metric-value[b-psyvkdlvc6] {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--em-text-primary, #16323b);
    margin-top: 0.2rem;
    white-space: nowrap;
}

/* DT-60.10-10: rijen klikbaar naar de bewerk-drawer */
.rc-row-clickable[b-psyvkdlvc6] {
    cursor: pointer;
    transition: background 120ms ease-out;
}

.rc-row-clickable:hover[b-psyvkdlvc6] {
    background: var(--em-bg-muted, #f2efe8);
}

.rc-chevron[b-psyvkdlvc6] {
    margin-left: auto;
    color: var(--em-text-muted, #9ca3af);
    font-size: 1rem;
}
/* /Components/Pages/Marketing/Components/SmsBubblePreview.razor.rz.scp.css */
/* DT-60.10-7: SMS-telefoonbubbel (gedeeld) */
.sms-phone[b-6ecomlge6i] {
    max-width: 320px;
    min-width: 200px;
    margin: 0.5rem 0 0.25rem;
    padding: 0.75rem;
    border: 1px solid var(--em-border-color, #e0e0e0);
    border-radius: 1.25rem;
    background: var(--em-surface-alt, #f7f8fa);
    display: flex;
    flex-direction: column;
}

.sms-phone-empty[b-6ecomlge6i] {
    border-style: dashed;
}

.sms-phone-tone[b-6ecomlge6i] {
    font-family: var(--em-font-mono, monospace);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--em-accent, #0e7c9b);
    text-align: center;
    margin-bottom: 0.25rem;
}

.sms-phone-sender[b-6ecomlge6i] {
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    color: var(--em-text-muted, #6b7280);
    margin-bottom: 0.5rem;
}

.sms-bubble[b-6ecomlge6i] {
    background: var(--em-surface, #e9e9eb);
    color: var(--em-text, #111);
    border-radius: 1.1rem 1.1rem 1.1rem 0.25rem;
    padding: 0.6rem 0.85rem;
    font-size: 0.9rem;
    line-height: 1.35;
    max-width: 85%;
    width: fit-content;
    word-break: break-word;
    white-space: pre-wrap;
}

.sms-bubble-empty[b-6ecomlge6i] {
    color: var(--em-text-muted, #6b7280);
    font-style: italic;
}

.sms-bubble-meta[b-6ecomlge6i] {
    font-size: 0.7rem;
    color: var(--em-text-muted, #9ca3af);
    margin: 0.3rem 0 0 0.25rem;
}

.sms-counter[b-6ecomlge6i] {
    font-size: 0.75rem;
    color: var(--em-text-muted, #6b7280);
    margin-top: 0.35rem;
}

.sms-counter-warning[b-6ecomlge6i] {
    color: var(--rz-warning-dark, #b45309);
}

.sms-phone-actions[b-6ecomlge6i] {
    margin-top: 0.5rem;
    display: flex;
    justify-content: center;
}
/* /Components/Pages/Marketing/Components/ToneContentEditor.razor.rz.scp.css */
/* DT-60.10-10 layout-ronde 2: links het grote werkvlak, rechts de drie tonen
   verticaal gestapeld als smalle miniaturen-kolom. Onder ~900px stapelen:
   miniaturen (dan naast elkaar) boven, de rest eronder. */
.tone-editor[b-lznixkhoge] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 220px);
    grid-template-areas: "main thumbs";
    gap: 1rem;
    align-items: start;
}

.tone-thumbs[b-lznixkhoge] {
    grid-area: thumbs;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.tone-main[b-lznixkhoge] {
    grid-area: main;
    min-width: 0;
}

@media (max-width: 900px) {
    .tone-editor[b-lznixkhoge] {
        grid-template-columns: 1fr;
        grid-template-areas: "thumbs" "main";
    }

    .tone-thumbs[b-lznixkhoge] {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
    }
}

.tone-thumb[b-lznixkhoge] {
    border: 2px solid var(--em-border-subtle, #e2ded4);
    border-radius: var(--em-radius-md, 8px);
    background: var(--rz-base-background-color, #fff);
    padding: 0.5rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}

.tone-thumb:hover[b-lznixkhoge] {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.tone-thumb:focus-visible[b-lznixkhoge] {
    outline: 2px solid var(--em-accent, #0e7c9b);
    outline-offset: 2px;
}

.tone-thumb-selected[b-lznixkhoge] {
    border-color: var(--em-accent, #0e7c9b);
    box-shadow: 0 0 0 1px var(--em-accent, #0e7c9b);
}

.tone-thumb-label[b-lznixkhoge] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--em-text-secondary, #5a6b71);
}

.tone-thumb-selected .tone-thumb-label[b-lznixkhoge] {
    color: var(--em-accent, #0e7c9b);
}

/* e-mail-miniatuur: render op volle breedte en schaal omlaag (patroon EmailLibraryPicker) */
.tone-thumb-mail[b-lznixkhoge] {
    height: 150px;
    overflow: hidden;
    background: #fff;
    border-radius: 4px;
    border: 1px solid var(--em-border-subtle, #e2ded4);
}

.tone-thumb-mail[b-lznixkhoge]  .email-preview-thumbnail {
    /* render op ~3,5× de kaartbreedte en schaal terug: de mail vult de hele miniatuur */
    width: 357%;
    height: 540px;
    border: none;
    margin: 0;
    transform: scale(0.28);
    transform-origin: top left;
    pointer-events: none;
}

.tone-thumb-empty[b-lznixkhoge] {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.78rem;
    color: var(--em-text-muted, #9ca3af);
    border: 1px dashed var(--em-border-subtle, #e2ded4);
    border-radius: 4px;
    padding: 0.5rem;
}

/* SMS-miniatuur: de bestaande chatballon, iets compacter */
.tone-thumb-sms[b-lznixkhoge] {
    pointer-events: none;
    font-size: 0.85rem;
}

/* e-mail: onderwerpregel + grote preview + acties eronder */
.tone-detail-preview[b-lznixkhoge] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.tone-detail-subject[b-lznixkhoge] {
    font-size: 0.85rem;
    padding: 0.45rem 0.7rem;
    background: var(--em-bg-muted, #f2efe8);
    border-radius: var(--em-radius-md, 6px) var(--em-radius-md, 6px) 0 0;
    border: 1px solid var(--rz-base-300);
    border-bottom: none;
}

.tone-detail-subject-label[b-lznixkhoge] {
    color: var(--em-text-secondary, #5a6b71);
    margin-right: 0.35rem;
}

.tone-detail-empty[b-lznixkhoge] {
    border: 1px dashed var(--em-border-subtle, #e2ded4);
    border-radius: 0 0 var(--em-radius-md, 6px) var(--em-radius-md, 6px);
    padding: 2rem 1rem;
    text-align: center;
    color: var(--em-text-muted, #9ca3af);
    font-size: 0.85rem;
}

/* acties (o.a. "Bewerken in editor") direct onder de preview, links uitgelijnd */
.tone-detail-actions[b-lznixkhoge] {
    display: flex;
    justify-content: flex-start;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* SMS: één kaart met bewerkveld, teller en actierij */
.tone-editor-card[b-lznixkhoge] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: 1px solid var(--em-border-subtle, #e2ded4);
    border-radius: var(--em-radius-md, 8px);
    padding: 1rem;
    background: var(--rz-base-background-color, #fff);
}

/* het bewerkveld vult de kaart op volle breedte */
.tone-editor-card [data-testid="edit-body"][b-lznixkhoge] {
    display: block;
    width: 100%;
}

.tone-editor-card[b-lznixkhoge]  .rz-form-field,
.tone-editor-card[b-lznixkhoge]  .rz-form-field-content,
.tone-editor-card[b-lznixkhoge]  .rz-textarea,
.tone-editor-card[b-lznixkhoge]  textarea {
    width: 100%;
}

.tone-detail-edit-title[b-lznixkhoge] {
    font-weight: 700;
    font-size: 0.85rem;
}

.tone-detail-hint[b-lznixkhoge] {
    color: var(--em-text-muted, #6b7280);
    font-size: 0.8rem;
}

.tone-detail-edit-actions[b-lznixkhoge] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.tone-detail-extras[b-lznixkhoge] {
    border-top: 1px solid var(--em-border-subtle, #e2ded4);
    padding-top: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
/* /Components/Pages/Medical/ExamManagement/ExamManagementPage.razor.rz.scp.css */
/* Exam-beheer lijst. */
.em-exam-list[b-f3tlgoe9l8] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.em-exam-list__item[b-f3tlgoe9l8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--rz-base-300, #e2e5e9);
    border-radius: 8px;
}

.em-exam-list__name[b-f3tlgoe9l8] {
    flex: 1 1 auto;
    font-weight: 600;
}

.em-exam-list__count[b-f3tlgoe9l8] {
    flex: 0 0 auto;
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color, #6b7280);
}

.em-exam-list__compose[b-f3tlgoe9l8] {
    flex: 0 0 auto;
    padding: 0.375rem 0.875rem;
    border: none;
    border-radius: 6px;
    background: var(--rz-primary, #2f6f8f);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.em-exam-list__state[b-f3tlgoe9l8] {
    color: var(--rz-text-secondary-color, #6b7280);
}

.em-exam-list__delete[b-f3tlgoe9l8] {
    flex: 0 0 auto;
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--rz-base-300, #e2e5e9);
    border-radius: 6px;
    background: transparent;
    color: var(--rz-danger, #b3261e);
    font-weight: 600;
    cursor: pointer;
}

.em-exam-list__delete--confirm[b-f3tlgoe9l8] {
    border: none;
    background: var(--rz-danger, #b3261e);
    color: #fff;
}

.em-exam-list__confirm-label[b-f3tlgoe9l8] {
    flex: 0 0 auto;
    font-size: 0.8125rem;
    color: var(--rz-danger, #b3261e);
    font-weight: 600;
}

.em-exam-list__error[b-f3tlgoe9l8] {
    color: var(--rz-danger, #b3261e);
    font-weight: 600;
}
/* /Components/Pages/Medical/ExamManagement/VisusRequirementPage.razor.rz.scp.css */
.visus-matrix[b-0bj4zpf6d5] {
    display: grid;
    gap: 0.25rem 0.75rem;
    margin-top: 0.75rem;
    overflow-x: auto;
}

.visus-matrix__head[b-0bj4zpf6d5],
.visus-matrix__row[b-0bj4zpf6d5] {
    display: grid;
    grid-template-columns: 180px repeat(3, minmax(200px, 1fr));
    align-items: center;
    gap: 0.75rem;
}

.visus-matrix__col[b-0bj4zpf6d5],
.visus-matrix__rowhead[b-0bj4zpf6d5] {
    font-weight: 600;
}

.visus-matrix__row[b-0bj4zpf6d5] {
    border-top: 1px solid var(--rz-border-color);
    padding-top: 0.25rem;
}

.visus-matrix__cell[b-0bj4zpf6d5] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
/* /Components/Pages/Medical/Handover/MedicalHandoverPanel.razor.rz.scp.css */
/* DT-10-12: layout van het overdracht-paneel (drawer-stap + modal). */

.handover-panel[b-98avwj5a12] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 860px;
}

.handover-section[b-98avwj5a12] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--rz-base-300, #e0e0e0);
    border-radius: 10px;
    background: var(--rz-base-background-color, #fff);
}

.handover-section-header[b-98avwj5a12] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Form-fields (textarea's) vullen de sectiebreedte — de fieldset (.rz-form-field-content)
   krimpt anders naar de intrinsieke cols-breedte van de textarea. */
.handover-panel[b-98avwj5a12]  .rz-form-field {
    width: 100%;
    display: block;
}

.handover-panel[b-98avwj5a12]  .rz-form-field-content {
    width: 100%;
}

.handover-panel[b-98avwj5a12]  textarea {
    width: 100%;
    min-width: 100%;
    resize: vertical;
    box-sizing: border-box;
}

/* Dropdown hoeft niet de volle breedte — leesbaar kort. */
.handover-panel[b-98avwj5a12]  .handover-profile-field .rz-form-field,
.handover-profile-field[b-98avwj5a12] {
    max-width: 340px;
}

.handover-actions[b-98avwj5a12] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.handover-style[b-98avwj5a12] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    border: 1px dashed var(--rz-base-300, #e0e0e0);
    border-radius: 8px;
    background: var(--rz-base-100, #fafafa);
}

.handover-stale-banner[b-98avwj5a12] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
    border: 1px solid var(--rz-warning, #f0ad4e);
    background: color-mix(in srgb, var(--rz-warning, #f0ad4e) 12%, transparent);
}

.handover-status--final[b-98avwj5a12] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--rz-success, #2e7d32);
}

.handover-error[b-98avwj5a12] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
    border-radius: 8px;
    border: 1px solid var(--rz-danger, #d32f2f);
    color: var(--rz-danger, #d32f2f);
    background: color-mix(in srgb, var(--rz-danger, #d32f2f) 8%, transparent);
}

.handover-generating[b-98avwj5a12] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.2rem;
    color: var(--rz-primary, #0e7490);
}

.handover-generating[b-98avwj5a12]  .handover-generating__icon {
    animation: handover-spin-b-98avwj5a12 1.1s linear infinite;
}

@keyframes handover-spin-b-98avwj5a12 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* /Components/Pages/Medical/HandoverSettingsManager.razor.rz.scp.css */
/* DT-10-12: profiel-editor in de drawer — velden gestapeld op volle breedte. */

.handover-profile-editor[b-2mftqfzuff] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.handover-profile-editor[b-2mftqfzuff]  .rz-form-field {
    width: 100%;
    display: block;
}

.handover-profile-editor[b-2mftqfzuff]  .rz-form-field-content {
    width: 100%;
}

.handover-profile-editor[b-2mftqfzuff]  textarea,
.handover-profile-editor[b-2mftqfzuff]  input[type="text"] {
    width: 100%;
    min-width: 100%;
    box-sizing: border-box;
}

.handover-profile-editor[b-2mftqfzuff]  textarea {
    resize: vertical;
}

.handover-profile-row[b-2mftqfzuff] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0;
}

.handover-profile-row [data-testid="profile-name"][b-2mftqfzuff] {
    font-weight: 600;
    min-width: 160px;
}
/* /Components/Pages/Product/Components/CatalogProductDetailsPanel.razor.rz.scp.css */
/*
    Compacte opmaak voor het catalogus-detailpaneel in de overname-lade (DT-40.54-4).

    De lade is smal en toont drie secties onder elkaar; met de standaard-typografie kostte alleen dit
    paneel al een halve schermhoogte. Alles staat hier scoped — de globale kaart- en grid-styling
    blijft ongemoeid, die is een apart traject.

    Nergens text-transform: de kapitalen die opvielen kwamen uit de Radzen-grid-header, die met de
    lijst-layout verdwenen is. Introduceer ze hier dus ook niet.
*/

/* Kaart-chroom strakker: kop en inhoud dragen minder lucht. */
.catalog-details[b-rrgd0g1tlh]  .custom-card-header {
    padding: 0.3125rem 0.625rem;
    min-height: 32px;
}

.catalog-details[b-rrgd0g1tlh]  .custom-card-title {
    font-size: 0.8125rem;
    letter-spacing: 0;
}

.catalog-details[b-rrgd0g1tlh]  .custom-card-content {
    padding: 0.625rem;
}

/* ── Kop: afbeelding + identiteit ── */

.catalog-details-head[b-rrgd0g1tlh] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

/* De doos reserveert de rustplek van de afbeelding en blijft altijd 112px: de vergroting speelt
   zich af in de absoluut gepositioneerde img, dus de rest van de lade verschuift niet. */
.catalog-details-imagebox[b-rrgd0g1tlh] {
    position: relative;
    width: 112px;
    height: 112px;
    flex: 0 0 auto;
}

.catalog-details-image[b-rrgd0g1tlh] {
    position: absolute;
    top: 0;
    left: 0;
    width: 112px;
    height: 112px;
    object-fit: contain;
    background: var(--rz-base-200);
    border-radius: 6px;
}

/* Uitvergroten via width/height, bewust NIET via transform: een transform maakt het element
   containing block voor position:fixed-overlays (DT-13.6-4). 320px blijft binnen de 400px-bron
   (Medium-variant), dus de vergroting is scherp. */
.catalog-details-image--zoomable[b-rrgd0g1tlh] {
    cursor: zoom-in;
    transition: width 0.18s ease, height 0.18s ease, box-shadow 0.18s ease;
}

.catalog-details-image--zoomable:hover[b-rrgd0g1tlh],
.catalog-details-image--zoomable:focus-visible[b-rrgd0g1tlh] {
    width: 320px;
    height: 320px;
    z-index: 5;
    border-radius: 8px;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.28);
}

.catalog-details-image--zoomable:focus-visible[b-rrgd0g1tlh] {
    outline: 2px solid var(--rz-primary);
    outline-offset: 2px;
}

/* De kaart klipt standaard (overflow: hidden) — de uitvergrote afbeelding moet er overheen. */
.catalog-details[b-rrgd0g1tlh]  .catalog-details-card,
.catalog-details[b-rrgd0g1tlh]  .catalog-details-card .custom-card-content {
    overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
    .catalog-details-image--zoomable[b-rrgd0g1tlh] {
        transition: none;
    }
}

.catalog-details-identity[b-rrgd0g1tlh] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

/* Naam en merk blijven de blikvanger, ook al is de rest kleiner geworden. */
.catalog-details-name[b-rrgd0g1tlh] {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.catalog-details-brand[b-rrgd0g1tlh] {
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
}

.catalog-details-hint[b-rrgd0g1tlh] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

/* ── Specificaties: label/waarde-paren in twee kolommen ── */

.catalog-details-specs[b-rrgd0g1tlh] {
    display: flex;
    flex-direction: column;
}

.catalog-details-spec[b-rrgd0g1tlh] {
    display: grid;
    grid-template-columns: minmax(6.5rem, 40%) 1fr;
    gap: 0.5rem;
    padding: 0.125rem 0;
    font-size: 0.8125rem;
    line-height: 1.35;
}

/* Zebra-scheiding houdt lange lijsten leesbaar zonder extra witruimte te kosten. */
.catalog-details-spec:nth-child(even)[b-rrgd0g1tlh] {
    background: var(--rz-base-100);
}

.catalog-details-spec-label[b-rrgd0g1tlh] {
    color: var(--rz-text-secondary-color);
}

.catalog-details-spec-value[b-rrgd0g1tlh] {
    overflow-wrap: anywhere;
}
/* /Components/Pages/Product/Components/ProductSupplierAvailabilityPanel.razor.rz.scp.css */
/*
    Compacte opmaak voor de leverancierslijst in de overname-lade (DT-40.54-4).

    Alles scoped: de globale kaart- en grid-styling blijft ongemoeid. Nergens text-transform — de
    kapitalen kwamen uit de Radzen-grid-header en die is met de lijst-layout verdwenen.
*/

.supplier-availability[b-j276fcrlcl]  .custom-card-header {
    padding: 0.3125rem 0.625rem;
    min-height: 32px;
}

.supplier-availability[b-j276fcrlcl]  .custom-card-title {
    font-size: 0.8125rem;
    letter-spacing: 0;
}

.supplier-availability[b-j276fcrlcl]  .custom-card-content {
    padding: 0.625rem;
}

.supplier-list[b-j276fcrlcl] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

/* ── Blok per leverancier ── */

.supplier-row[b-j276fcrlcl] {
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--rz-base-300);
    border-radius: 5px;
}

/* De leverbare leverancier is de bruikbare optie: accentrand + lichte vulling. */
.supplier-row.usable[b-j276fcrlcl] {
    border-color: var(--rz-success);
    background: var(--rz-base-100);
}

.supplier-row-head[b-j276fcrlcl] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

/* Naam nooit afkappen: hij mag over meerdere regels, desnoods binnen een woord. */
.supplier-row-name[b-j276fcrlcl] {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
    min-width: 0;
}

.supplier-row-status[b-j276fcrlcl] {
    flex: 0 0 auto;
}

/* ── Label/waarde-paren ── */

.supplier-row-fields[b-j276fcrlcl] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.125rem 1rem;
    margin-top: 0.125rem;
    font-size: 0.75rem;
    line-height: 1.35;
}

.supplier-row-fields[b-j276fcrlcl]  .supplier-field-label {
    color: var(--rz-text-secondary-color);
}

.supplier-field-value[b-j276fcrlcl] {
    margin-left: 0.3125rem;
}

.supplier-field-value.strong[b-j276fcrlcl] {
    font-weight: 600;
}
/* /Components/Pages/Product/StockCount/StockCountPage.razor.rz.scp.css */
.sc-page[b-t5qr30k9ar] { display: flex; flex-direction: column; gap: 1rem; }
.sc-page__confirm[b-t5qr30k9ar] { max-width: 40rem; }
.sc-page__session-slot:empty[b-t5qr30k9ar] { display: none; }

[b-t5qr30k9ar] .sc-scan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 1fr); gap: 1rem; align-items: start; }
[b-t5qr30k9ar] .sc-scan__main { display: flex; flex-direction: column; gap: 1rem; }
[b-t5qr30k9ar] .sc-session__qr { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
[b-t5qr30k9ar] .sc-session__qr img { width: 200px; height: 200px; image-rendering: pixelated; border-radius: 0.5rem; }
[b-t5qr30k9ar] .sc-session__qr--template img { opacity: 0.25; filter: grayscale(1); }
[b-t5qr30k9ar] .sc-session__hint { color: var(--rz-text-secondary-color); font-size: 0.9rem; text-align: center; }
[b-t5qr30k9ar] .sc-session__list { margin-top: 0.75rem; max-height: 8.25rem; overflow-y: auto; border-top: 1px solid var(--rz-base-300); }
[b-t5qr30k9ar] .sc-session__row { display: flex; gap: 0.75rem; align-items: center; padding: 0.35rem 0; border-bottom: 1px solid var(--rz-base-200); font-size: 0.9rem; }
[b-t5qr30k9ar] .sc-session__row-name { font-weight: 600; min-width: 6rem; }
[b-t5qr30k9ar] .sc-session__row-meta { color: var(--rz-text-secondary-color); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[b-t5qr30k9ar] .sc-scan__candidates { margin-top: 0.75rem; padding: 0.75rem; border: 1px dashed var(--rz-warning); border-radius: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
[b-t5qr30k9ar] .sc-scan__candidate { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
[b-t5qr30k9ar] .sc-scan__lines { margin-top: 1rem; }
[b-t5qr30k9ar] .sc-scan__line-time, [b-t5qr30k9ar] .sc-scan__line-code { color: var(--rz-text-secondary-color); font-size: 0.85rem; }
[b-t5qr30k9ar] .sc-scan__line-qty { text-align: right; font-weight: 600; }
[b-t5qr30k9ar] .sc-scan__product { display: flex; flex-direction: column; gap: 0.35rem; }
[b-t5qr30k9ar] .sc-scan__photo { max-width: 100%; max-height: 14rem; object-fit: contain; border-radius: 0.5rem; background: var(--rz-base-200); }
[b-t5qr30k9ar] .sc-scan__product-name { font-weight: 600; }
[b-t5qr30k9ar] .sc-scan__skeleton { display: flex; flex-direction: column; gap: 0.6rem; }
[b-t5qr30k9ar] .sc-scan__skeleton-photo { height: 9rem; border-radius: 0.5rem; background: var(--rz-base-200); display: flex; align-items: center; justify-content: center; color: var(--rz-base-500); }
[b-t5qr30k9ar] .sc-scan__skeleton-line { height: 0.8rem; border-radius: 0.4rem; background: var(--rz-base-200); }
[b-t5qr30k9ar] .sc-scan__skeleton-line--title { width: 70%; height: 1rem; }
[b-t5qr30k9ar] .sc-scan__skeleton-line--short { width: 40%; }
[b-t5qr30k9ar] .sc-scan__skeleton-line--price { width: 25%; height: 1.2rem; background: var(--rz-base-300); }
[b-t5qr30k9ar] .sc-scan__skeleton-hint { color: var(--rz-text-secondary-color); margin-top: 0.5rem; display: block; }
[b-t5qr30k9ar] .sc-scan__product-sku, [b-t5qr30k9ar] .sc-scan__product-desc { color: var(--rz-text-secondary-color); font-size: 0.85rem; }
[b-t5qr30k9ar] .sc-scan__product-price { font-size: 1.25rem; font-weight: 700; color: var(--rz-primary); }

[b-t5qr30k9ar] .sc-table { width: 100%; border-collapse: collapse; }
[b-t5qr30k9ar] .sc-table td, [b-t5qr30k9ar] .sc-table th { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--rz-base-300); text-align: left; vertical-align: middle; }
[b-t5qr30k9ar] .sc-table small { color: var(--rz-text-secondary-color); margin-left: 0.35rem; }
[b-t5qr30k9ar] .sc-num { text-align: right !important; font-variant-numeric: tabular-nums; }

[b-t5qr30k9ar] .sc-overview__tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
[b-t5qr30k9ar] .sc-overview__thumb img { width: 3rem; height: 3rem; object-fit: contain; border-radius: 0.25rem; background: var(--rz-base-200); }
[b-t5qr30k9ar] .sc-overview__row--skipped td { opacity: 0.6; text-decoration: line-through; }
[b-t5qr30k9ar] .sc-overview__row--skipped td.sc-overview__actions { text-decoration: none; opacity: 1; }
[b-t5qr30k9ar] .sc-overview__skip { display: flex; align-items: flex-end; gap: 0.5rem; min-width: 24rem; }
[b-t5qr30k9ar] .sc-overview__default { color: var(--rz-text-secondary-color); font-style: italic; align-self: center; }
[b-t5qr30k9ar] .sc-overview__decision { color: var(--rz-text-secondary-color); }
[b-t5qr30k9ar] .sc-overview__code { font-family: monospace; }

[b-t5qr30k9ar] .sc-archive__row { cursor: pointer; }
[b-t5qr30k9ar] .sc-archive__row:hover td { background: var(--rz-base-100); }

@media (max-width: 900px) {
    [b-t5qr30k9ar] .sc-scan { grid-template-columns: 1fr; }
}

[b-t5qr30k9ar] .sc-log__toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
[b-t5qr30k9ar] .sc-log__live { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8rem; color: var(--rz-success); }
[b-t5qr30k9ar] .sc-log__time, [b-t5qr30k9ar] .sc-log__counter, [b-t5qr30k9ar] .sc-log__source { color: var(--rz-text-secondary-color); font-size: 0.85rem; white-space: nowrap; }
[b-t5qr30k9ar] .sc-log__qty { font-weight: 600; }
[b-t5qr30k9ar] .sc-log__code { font-family: monospace; font-size: 0.85rem; white-space: nowrap; }
/* /Components/Pages/RevenueDashboard/Components/RevenueDistributionList.razor.rz.scp.css */
.rev-dist[b-wqn87tqhhh] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rev-dist-row[b-wqn87tqhhh] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 2px 2px 4px;
    border-radius: 3px;
}

.rev-dist-clickable[b-wqn87tqhhh] {
    cursor: pointer;
}

.rev-dist-clickable:hover[b-wqn87tqhhh] {
    background: var(--em-surface-hover, #EDEAE1);
}

.rev-dist-head[b-wqn87tqhhh] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.rev-dist-name[b-wqn87tqhhh] {
    flex: 1;
    font-size: 13px;
    color: var(--em-text-primary, #16323B);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rev-dist-amount[b-wqn87tqhhh] {
    font-size: 13px;
    font-weight: 700;
    color: var(--em-text-primary, #16323B);
    font-variant-numeric: tabular-nums;
}

.rev-dist-share[b-wqn87tqhhh] {
    width: 34px;
    text-align: right;
    font-size: 11px;
    color: var(--em-text-secondary, #5A6B71);
    font-variant-numeric: tabular-nums;
}

.rev-dist-chevron[b-wqn87tqhhh] {
    color: var(--em-text-secondary, #8A979C);
    font-size: 14px;
    line-height: 1;
}

.rev-dist-track[b-wqn87tqhhh] {
    height: 6px;
    background: var(--em-surface-sunken, #EDEAE1);
    border-radius: 2px;
    overflow: hidden;
}

.rev-dist-bar[b-wqn87tqhhh] {
    height: 100%;
    border-radius: 2px;
}

.rev-dist-total[b-wqn87tqhhh] {
    display: flex;
    justify-content: space-between;
    padding-top: 8px;
    margin-top: 2px;
    border-top: 1px solid var(--em-border-primary, #E2DED4);
    font-size: 13px;
    font-weight: 700;
    color: var(--em-text-primary, #16323B);
}
/* /Components/Pages/RevenueDashboard/Components/RevenueDrillDrawer.razor.rz.scp.css */
.rev-drawer-scrim[b-r3ytvmpqt9] {
    position: fixed;
    inset: 0;
    background: rgba(22, 50, 59, 0.35);
    z-index: 1200;
}

.rev-drawer[b-r3ytvmpqt9] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 92vw;
    background: var(--em-surface-raised, #F8F6F0);
    border-left: 1px solid var(--em-border-primary, #E2DED4);
    z-index: 1201;
    display: flex;
    flex-direction: column;
}

.rev-drawer-head[b-r3ytvmpqt9] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--em-border-primary, #E2DED4);
}

.rev-drawer-accent[b-r3ytvmpqt9] {
    width: 4px;
    align-self: stretch;
    border-radius: 2px;
}

.rev-drawer-titles[b-r3ytvmpqt9] {
    flex: 1;
    min-width: 0;
}

.rev-drawer-back[b-r3ytvmpqt9] {
    background: none;
    border: none;
    padding: 0 0 4px;
    font-size: 12px;
    color: var(--em-text-secondary, #5A6B71);
    cursor: pointer;
}

.rev-drawer-title[b-r3ytvmpqt9] {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: var(--em-text-primary, #16323B);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rev-drawer-subtitle[b-r3ytvmpqt9] {
    font-size: 12px;
    color: var(--em-text-secondary, #5A6B71);
}

.rev-drawer-close[b-r3ytvmpqt9] {
    background: none;
    border: 1px solid var(--em-border-primary, #E2DED4);
    border-radius: 3px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    color: var(--em-text-secondary, #5A6B71);
}

.rev-drawer-body[b-r3ytvmpqt9] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rev-drawer-stats[b-r3ytvmpqt9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.rev-drawer-stat[b-r3ytvmpqt9] {
    border: 1px solid var(--em-border-primary, #E2DED4);
    border-radius: 3px;
    padding: 10px 12px;
    background: var(--em-surface, #FDFCF9);
}

.rev-drawer-stat-label[b-r3ytvmpqt9] {
    font-family: var(--em-font-mono, monospace);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 10px;
    color: var(--em-text-secondary, #5A6B71);
}

.rev-drawer-stat-value[b-r3ytvmpqt9] {
    font-size: 18px;
    font-weight: 800;
    color: var(--em-text-primary, #16323B);
    font-variant-numeric: tabular-nums;
}

.rev-drawer-stat-note[b-r3ytvmpqt9] {
    font-size: 11px;
    color: var(--em-text-secondary, #8A979C);
    min-height: 14px;
}

.rev-drawer-section-label[b-r3ytvmpqt9] {
    font-family: var(--em-font-mono, monospace);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 11px;
    color: var(--em-text-secondary, #5A6B71);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.rev-drawer-receipt-count[b-r3ytvmpqt9] {
    text-transform: none;
    letter-spacing: normal;
    font-family: inherit;
    font-size: 11px;
}

.rev-drawer-trend[b-r3ytvmpqt9] {
    display: flex;
    gap: 6px;
    align-items: flex-end;
    height: 90px;
}

.rev-drawer-trend-col[b-r3ytvmpqt9] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    height: 100%;
}

.rev-drawer-trend-bar[b-r3ytvmpqt9] {
    width: 60%;
    max-width: 22px;
    min-height: 1px;
    border-radius: 2px 2px 0 0;
}

.rev-drawer-trend-name[b-r3ytvmpqt9] {
    font-size: 9px;
    text-transform: uppercase;
    color: var(--em-text-secondary, #8A979C);
}

.rev-drawer-kv[b-r3ytvmpqt9] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rev-drawer-kv-row[b-r3ytvmpqt9] {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--em-text-primary, #16323B);
}

.rev-drawer-kv-value[b-r3ytvmpqt9] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.rev-drawer-receipts[b-r3ytvmpqt9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rev-drawer-receipt[b-r3ytvmpqt9] {
    border: 1px solid var(--em-border-primary, #E2DED4);
    border-radius: 3px;
    padding: 8px 10px;
    background: var(--em-surface, #FDFCF9);
}

.rev-drawer-receipt-top[b-r3ytvmpqt9] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.rev-drawer-receipt-nr[b-r3ytvmpqt9] {
    font-family: var(--em-font-mono, monospace);
    font-size: 12px;
    color: var(--em-text-primary, #16323B);
    flex: 1;
}

.rev-drawer-receipt-amount[b-r3ytvmpqt9] {
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.rev-drawer-pill[b-r3ytvmpqt9] {
    font-size: 10px;
    font-weight: 700;
    border-radius: 999px;
    padding: 2px 8px;
}

.rev-drawer-receipt-sub[b-r3ytvmpqt9] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
    font-size: 11px;
    color: var(--em-text-secondary, #5A6B71);
}

.rev-drawer-more[b-r3ytvmpqt9] {
    margin-top: 10px;
    width: 100%;
    padding: 8px;
    border: 1px solid var(--em-border-primary, #E2DED4);
    border-radius: 3px;
    background: var(--em-surface, #FDFCF9);
    color: var(--em-text-primary, #16323B);
    font-size: 12px;
    cursor: pointer;
}

.rev-drawer-foot[b-r3ytvmpqt9] {
    display: flex;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--em-border-primary, #E2DED4);
}

.rev-drawer-btn[b-r3ytvmpqt9] {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid var(--em-border-primary, #E2DED4);
    border-radius: 3px;
    background: var(--em-surface, #FDFCF9);
    font-size: 13px;
    font-weight: 600;
    color: var(--em-text-primary, #16323B);
    cursor: pointer;
}

.rev-drawer-btn:disabled[b-r3ytvmpqt9] {
    opacity: 0.45;
    cursor: not-allowed;
}

.rev-drawer-btn-primary[b-r3ytvmpqt9] {
    color: #fff;
}
/* /Components/Pages/RevenueDashboard/Components/RevenueMonthChart.razor.rz.scp.css */
.rev-chart[b-rf3kdc27kg] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Waardelabels in een eigen rij bóven het plotvlak — nooit ín het plotvlak (schaalbreuk). */
.rev-chart-labels[b-rf3kdc27kg],
.rev-chart-names[b-rf3kdc27kg] {
    display: flex;
    gap: 8px;
}

.rev-chart-label[b-rf3kdc27kg],
.rev-chart-name[b-rf3kdc27kg] {
    flex: 1 1 0;
    text-align: center;
    font-size: 11px;
    color: var(--em-text-secondary, #5A6B71);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
}

.rev-chart-label[b-rf3kdc27kg] {
    margin-bottom: 6px;
}

.rev-chart-name[b-rf3kdc27kg] {
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 10px;
}

/* Vast plotvlak: staven en doellijn delen exact dezelfde 100%-hoogte. */
.rev-chart-plot[b-rf3kdc27kg] {
    position: relative;
    display: flex;
    gap: 8px;
    height: 210px;
    align-items: flex-end;
    border-bottom: 1px solid var(--em-border-primary, #E2DED4);
}

.rev-chart-target[b-rf3kdc27kg] {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 2px dashed #E07B3C;
    pointer-events: none;
    z-index: 1;
}

.rev-chart-group[b-rf3kdc27kg] {
    flex: 1 1 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    height: 100%;
}

.rev-chart-bar[b-rf3kdc27kg] {
    width: 38%;
    max-width: 26px;
    min-height: 1px;
    border-radius: 2px 2px 0 0;
}

.rev-chart-bar-prev[b-rf3kdc27kg] {
    background: #CFE4EA;
}

/* Dichte assen (24 uren / 31 dagen): kleinere labels, geen uppercase-ruimteverlies. */
.rev-chart-names-dense .rev-chart-name[b-rf3kdc27kg] {
    font-size: 8px;
    letter-spacing: 0;
}
/* /Components/Pages/RevenueDashboard/RevenueDashboard.razor.rz.scp.css */
/* Omzetdashboard — v2-stijlregels: strak/vierkant, radii ≤4px, 1px borders,
   geen schaduwen, geen hover-transforms. Accenten conform het referentie-ontwerp. */

.rev-page[b-cfgjutvgdh] {
    max-width: 1460px;
    margin: 0 auto;
    padding: 20px 24px 48px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rev-header[b-cfgjutvgdh] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.rev-kicker[b-cfgjutvgdh] {
    font-family: var(--em-font-mono, monospace);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
    color: var(--em-text-secondary, #5A6B71);
}

.rev-title[b-cfgjutvgdh] {
    margin: 2px 0 0;
    font-size: 24px;
    font-weight: 800;
    color: var(--em-text-primary, #16323B);
}

.rev-header-meta[b-cfgjutvgdh] {
    font-size: 12px;
    color: var(--em-text-secondary, #5A6B71);
}

/* Toolbar */
.rev-toolbar[b-cfgjutvgdh] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.rev-toolbar-spacer[b-cfgjutvgdh] {
    flex: 1;
}

.rev-period[b-cfgjutvgdh] {
    display: flex;
    border: 1px solid var(--em-border-primary, #E2DED4);
    border-radius: 3px;
    overflow: hidden;
}

.rev-period-btn[b-cfgjutvgdh] {
    border: none;
    background: var(--em-surface, #FDFCF9);
    color: var(--em-text-secondary, #3F5A62);
    font-size: 12px;
    padding: 7px 14px;
    cursor: pointer;
}

.rev-period-btn:disabled[b-cfgjutvgdh] {
    opacity: 0.45;
    cursor: not-allowed;
}

.rev-period-active[b-cfgjutvgdh] {
    background: #0E7C9B;
    color: #fff;
}

.rev-btn[b-cfgjutvgdh] {
    border: 1px solid var(--em-border-primary, #E2DED4);
    border-radius: 3px;
    background: var(--em-surface, #FDFCF9);
    color: var(--em-text-primary, #16323B);
    font-size: 12px;
    padding: 8px 14px;
    cursor: pointer;
}

.rev-btn:disabled[b-cfgjutvgdh] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* KPI-rij */
.rev-kpis[b-cfgjutvgdh] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.rev-kpi[b-cfgjutvgdh] {
    border: 1px solid var(--em-border-primary, #E2DED4);
    border-left-width: 3px;
    border-radius: 3px;
    background: var(--em-surface, #FDFCF9);
    padding: 12px 14px;
}

.rev-kpi-label[b-cfgjutvgdh] {
    font-family: var(--em-font-mono, monospace);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10px;
    color: var(--em-text-secondary, #5A6B71);
}

.rev-kpi-value[b-cfgjutvgdh] {
    font-size: 24px;
    font-weight: 800;
    color: var(--em-text-primary, #16323B);
    font-variant-numeric: tabular-nums;
    margin: 2px 0;
}

.rev-kpi-note[b-cfgjutvgdh] {
    font-size: 11px;
    color: var(--em-text-secondary, #8A979C);
}

.rev-kpi-up[b-cfgjutvgdh] {
    color: #2E9E5B;
}

.rev-kpi-down[b-cfgjutvgdh] {
    color: #D6483F;
}

/* Panelen */
.rev-main[b-cfgjutvgdh] {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 12px;
    align-items: start;
}

.rev-analysis[b-cfgjutvgdh] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    align-items: start;
}

.rev-panel[b-cfgjutvgdh] {
    border: 1px solid var(--em-border-primary, #E2DED4);
    border-top-width: 3px;
    border-radius: 3px;
    background: var(--em-surface, #FDFCF9);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rev-panel-head[b-cfgjutvgdh] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.rev-panel-title[b-cfgjutvgdh] {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--em-text-primary, #16323B);
}

.rev-panel-sub[b-cfgjutvgdh] {
    font-size: 11px;
    color: var(--em-text-secondary, #5A6B71);
}

.rev-legend[b-cfgjutvgdh] {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: var(--em-text-secondary, #5A6B71);
}

.rev-legend-item[b-cfgjutvgdh] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.rev-legend-dot[b-cfgjutvgdh] {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    display: inline-block;
}

.rev-legend-dash[b-cfgjutvgdh] {
    width: 14px;
    border-top: 2px dashed #E07B3C;
    display: inline-block;
}

/* Analyse-rijen */
.rev-rows[b-cfgjutvgdh] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rev-row[b-cfgjutvgdh] {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--em-border-primary, #E2DED4);
    border-left-width: 3px;
    border-radius: 3px;
    background: var(--em-surface-raised, #F8F6F0);
    padding: 8px 10px;
}

.rev-row-clickable[b-cfgjutvgdh] {
    cursor: pointer;
}

.rev-row-clickable:hover[b-cfgjutvgdh] {
    background: var(--em-surface-hover, #EDEAE1);
}

.rev-row-avatar[b-cfgjutvgdh] {
    width: 30px;
    height: 30px;
    border-radius: 3px;
    background: var(--em-surface-sunken, #EDEAE1);
    color: var(--em-text-primary, #16323B);
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rev-row-rank[b-cfgjutvgdh] {
    font-family: var(--em-font-mono, monospace);
    font-size: 12px;
    color: var(--em-text-secondary, #8A979C);
    flex-shrink: 0;
}

.rev-row-main[b-cfgjutvgdh] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.rev-row-name[b-cfgjutvgdh] {
    font-size: 13px;
    font-weight: 600;
    color: var(--em-text-primary, #16323B);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rev-row-sub[b-cfgjutvgdh] {
    font-size: 11px;
    color: var(--em-text-secondary, #8A979C);
}

.rev-row-amount[b-cfgjutvgdh] {
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--em-text-primary, #16323B);
}

.rev-row-amounts[b-cfgjutvgdh] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.rev-dist-chevron[b-cfgjutvgdh] {
    color: var(--em-text-secondary, #8A979C);
    font-size: 14px;
}

/* Nog te ontvangen */
.rev-outstanding[b-cfgjutvgdh] {
    border-top: 1px solid var(--em-border-primary, #E2DED4);
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rev-drawer-like-label[b-cfgjutvgdh] {
    font-family: var(--em-font-mono, monospace);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 11px;
    color: var(--em-text-secondary, #5A6B71);
}

.rev-outstanding-grid[b-cfgjutvgdh] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.rev-outstanding-amount[b-cfgjutvgdh] {
    font-size: 16px;
    font-weight: 800;
    color: var(--em-text-primary, #16323B);
    font-variant-numeric: tabular-nums;
}

/* Responsief */
@media (max-width: 1100px) {
    .rev-kpis[b-cfgjutvgdh] {
        grid-template-columns: repeat(2, 1fr);
    }

    .rev-main[b-cfgjutvgdh],
    .rev-analysis[b-cfgjutvgdh] {
        grid-template-columns: 1fr;
    }
}

/* Maanddoel-invoer in de grafiekkop */
.rev-target-row[b-cfgjutvgdh] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rev-target-field[b-cfgjutvgdh] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--em-text-primary, #16323B);
}

.rev-target-input[b-cfgjutvgdh] {
    width: 90px;
    border: 1px solid var(--em-border-primary, #E2DED4);
    border-radius: 3px;
    background: var(--em-surface, #FDFCF9);
    color: var(--em-text-primary, #16323B);
    font-size: 12px;
    padding: 3px 6px;
    font-variant-numeric: tabular-nums;
}

/* Periode-navigatie in de toolbar */
.rev-window-nav[b-cfgjutvgdh] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rev-nav-btn[b-cfgjutvgdh] {
    padding: 6px 10px;
    font-size: 14px;
    line-height: 1;
}

.rev-window-label[b-cfgjutvgdh] {
    min-width: 150px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--em-text-primary, #16323B);
}
/* /Components/Pages/Subscription/AddonPurchase/AddonDetailDrawer.razor.rz.scp.css */
/* ---------------------------------------------------------------- detailpaneel (1/3 beeld · 2/3 tekst) */

.addon-detail-root[b-i3ewvbimfu]  .addon-detail {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 2fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 900px) {
    .addon-detail-root[b-i3ewvbimfu]  .addon-detail { grid-template-columns: 1fr; }
}

.addon-detail-root[b-i3ewvbimfu]  .addon-detail__media {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: sticky;
    top: 0;
}

.addon-detail-root[b-i3ewvbimfu]  .addon-detail__hero {
    aspect-ratio: 4 / 3;
    width: 100%;
    max-height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--em-surface-sunken);
    border: 1px solid var(--em-border-primary);
    border-radius: var(--em-radius-sm);
    overflow: hidden;
}

.addon-detail-root[b-i3ewvbimfu]  .addon-detail__hero img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.addon-detail-root[b-i3ewvbimfu]  .addon-detail__hero--empty {
    flex-direction: column;
    gap: 6px;
    color: var(--em-text-tertiary);
    font-size: 12.5px;
}

.addon-detail-root[b-i3ewvbimfu]  .addon-detail__thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.addon-detail-root[b-i3ewvbimfu]  .addon-detail__thumb {
    aspect-ratio: 4 / 3;
    width: 100%;
    max-height: 90px;
    padding: 0;
    background: var(--em-surface-sunken);
    border: 1px solid var(--em-border-primary);
    border-radius: var(--em-radius-sm);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--em-transition-fast);
}

.addon-detail-root[b-i3ewvbimfu]  .addon-detail__thumb:hover { border-color: var(--em-border-hover); }

.addon-detail-root[b-i3ewvbimfu]  .addon-detail__thumb--active {
    border: 2px solid var(--em-primary);
}

.addon-detail-root[b-i3ewvbimfu]  .addon-detail__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.addon-detail-root[b-i3ewvbimfu]  .addon-detail__article {
    font-size: 11.5px;
    color: var(--em-text-tertiary);
}

.addon-detail-root[b-i3ewvbimfu]  .addon-detail__paragraph {
    margin: 0 0 10px;
    line-height: 1.65;
    font-size: 13px;
    color: var(--em-text-primary);
}



/* ---- gedeelde bouwstenen (kopie uit AddonPurchasePage.razor.css: de drawer-body rendert buiten .addon-flow) ---- */
.addon-detail-root[b-i3ewvbimfu]  .addon-eyebrow {
    font-family: var(--em-font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--em-text-secondary);
}

.addon-detail-root[b-i3ewvbimfu]  .addon-mono {
    font-family: var(--em-font-mono);
}

.addon-detail-root[b-i3ewvbimfu]  .addon-muted {
    font-size: 12.5px;
    color: var(--em-text-secondary);
}

.addon-detail-root[b-i3ewvbimfu]  .addon-panel {
    margin-top: 13px;
    padding: 12px 14px;
    border-radius: var(--em-radius-sm);
    border: 1px solid var(--em-border-primary);
    background: var(--em-surface-sunken);
    font-size: 12.5px;
    color: var(--em-text-secondary);
}

.addon-detail-root[b-i3ewvbimfu]  .addon-panel--ok {
    border-color: var(--em-sem-success-text);
    background: var(--em-sem-success-bg);
    color: var(--em-sem-success-text);
}

.addon-detail-root[b-i3ewvbimfu]  .addon-panel--wait {
    border-color: var(--em-sem-open-text);
    background: var(--em-sem-open-bg);
    color: var(--em-sem-open-text);
}

.addon-detail-root[b-i3ewvbimfu]  .addon-panel__lines {
    margin-top: 6px;
    font-family: var(--em-font-mono);
    font-size: 12px;
    line-height: 1.7;
    color: var(--em-text-primary);
}

.addon-detail-root[b-i3ewvbimfu]  .addon-kv {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    border: 1px solid var(--em-border-primary);
    border-radius: var(--em-radius-sm);
    overflow: hidden;
    font-size: 12.5px;
}

.addon-detail-root[b-i3ewvbimfu]  .addon-kv__key {
    padding: 9px 13px;
    color: var(--em-text-secondary);
    background: var(--em-surface-sunken);
}

.addon-detail-root[b-i3ewvbimfu]  .addon-kv__value {
    padding: 9px 13px;
    color: var(--em-text-primary);
    border-left: 1px solid var(--em-border-subtle);
}

.addon-detail-root[b-i3ewvbimfu]  .addon-timeline__step {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 12px;
}

.addon-detail-root[b-i3ewvbimfu]  .addon-timeline__marker {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.addon-detail-root[b-i3ewvbimfu]  .addon-timeline__dot {
    width: 10px;
    height: 10px;
    margin-top: 4px;
    border-radius: var(--em-radius-full);
    border: 2px solid var(--em-border-secondary);
    background: var(--em-bg-surface);
}

.addon-detail-root[b-i3ewvbimfu]  .addon-timeline__dot--done {
    background: var(--em-sem-success-text);
    border-color: var(--em-sem-success-text);
}

.addon-detail-root[b-i3ewvbimfu]  .addon-timeline__dot--current {
    border-color: var(--em-sem-open-text);
}

.addon-detail-root[b-i3ewvbimfu]  .addon-timeline__line {
    flex: 1;
    width: 1px;
    background: var(--em-border-primary);
}

.addon-detail-root[b-i3ewvbimfu]  .addon-timeline__body {
    padding-bottom: 14px;
}

.addon-detail-root[b-i3ewvbimfu]  .addon-timeline__title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--em-text-primary);
}

.addon-detail-root[b-i3ewvbimfu]  .addon-timeline__detail {
    font-family: var(--em-font-mono);
    font-size: 11.5px;
    color: var(--em-text-secondary);
}

.addon-detail-root[b-i3ewvbimfu]  .addon-timeline__step--future .addon-timeline__title,
.addon-detail-root[b-i3ewvbimfu]  .addon-timeline__step--future .addon-timeline__detail {
    color: var(--em-text-tertiary);
}
/* /Components/Pages/Subscription/AddonPurchase/AddonPurchasePage.razor.rz.scp.css */
/*
   DT-66672.4-1 — aankoopflow add-ons.
   Het referentie-ontwerp (docs/Aankoopflow Add-ons.dc.html) werkt met vaste hex-waarden; hier
   worden die vertaald naar de EyeManage-tokens uit design-system.css zodat de pagina met het
   thema (licht/donker) meebeweegt. De subcomponenten per stap renderen binnen deze pagina,
   vandaar ::deep op alles wat zij opleveren.
*/

.addon-flow[b-vrq3kicbbv] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ---------------------------------------------------------------- stepper */

.addon-flow[b-vrq3kicbbv]  .addon-stepper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
    background: var(--em-bg-surface);
    border: 1px solid var(--em-border-primary);
    border-radius: var(--em-radius-sm);
}

.addon-flow[b-vrq3kicbbv]  .addon-stepper__step {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 18px;
    border-bottom: 3px solid var(--em-border-primary);
    background: none;
    border-left: 1px solid var(--em-border-subtle);
    border-top: 0;
    border-right: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
}

.addon-flow[b-vrq3kicbbv]  .addon-stepper__step:first-child {
    border-left: 0;
}

.addon-flow[b-vrq3kicbbv]  .addon-stepper__step:hover:not(.addon-stepper__step--active) {
    background: var(--em-surface-sunken);
}

.addon-flow[b-vrq3kicbbv]  .addon-stepper__step--active {
    border-bottom-color: var(--em-primary);
    background: var(--em-primary-tint);
}

.addon-flow[b-vrq3kicbbv]  .addon-stepper__bullet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: var(--em-radius-full);
    border: 1.5px solid var(--em-border-secondary);
    background: var(--em-bg-surface);
    color: var(--em-text-secondary);
    font-size: 11.5px;
    font-weight: 800;
}

.addon-flow[b-vrq3kicbbv]  .addon-stepper__step--active .addon-stepper__bullet {
    background: var(--em-primary);
    border-color: var(--em-primary);
    color: var(--em-text-inverse);
}

.addon-flow[b-vrq3kicbbv]  .addon-stepper__step--done .addon-stepper__bullet {
    background: var(--em-sem-success-bg);
    border-color: var(--em-sem-success-text);
    color: var(--em-sem-success-text);
}

.addon-flow[b-vrq3kicbbv]  .addon-stepper__title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--em-text-primary);
}

.addon-flow[b-vrq3kicbbv]  .addon-stepper__subtitle {
    display: block;
    font-size: 11.5px;
    color: var(--em-text-secondary);
}

/* ---------------------------------------------------------------- layout */

.addon-flow__body[b-vrq3kicbbv] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 372px;
    gap: 14px;
    align-items: start;
}

@media (max-width: 1200px) {
    .addon-flow__body[b-vrq3kicbbv] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.addon-flow__main[b-vrq3kicbbv] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.addon-flow__side[b-vrq3kicbbv] {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.addon-flow__actions[b-vrq3kicbbv] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: var(--em-bg-surface-sunken);
    border: 1px solid var(--em-border-primary);
    border-radius: var(--em-radius-sm);
}

.addon-flow__actions-buttons[b-vrq3kicbbv] {
    display: flex;
    gap: 9px;
    margin-left: auto;
}

/* ---------------------------------------------------------------- gedeelde bouwstenen */

.addon-flow[b-vrq3kicbbv]  .addon-eyebrow {
    font-family: var(--em-font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--em-text-secondary);
}

.addon-flow[b-vrq3kicbbv]  .addon-mono {
    font-family: var(--em-font-mono);
}

.addon-flow[b-vrq3kicbbv]  .addon-muted {
    font-size: 12.5px;
    color: var(--em-text-secondary);
}

.addon-flow[b-vrq3kicbbv]  .addon-tag {
    display: inline-block;
    padding: 3px 8px;
    border-radius: var(--em-radius-xs);
    border: 1px solid var(--em-border-primary);
    background: var(--em-bg-surface-sunken);
    color: var(--em-text-secondary);
    font-size: 11px;
    font-weight: 700;
}

.addon-flow[b-vrq3kicbbv]  .addon-tag--teal {
    color: var(--em-primary-dark);
    background: var(--em-primary-tint);
    border-color: var(--em-primary-line);
}

.addon-flow[b-vrq3kicbbv]  .addon-tag--green {
    color: var(--em-sem-success-text);
    background: var(--em-sem-success-bg);
    border-color: var(--em-sem-success-text);
}

.addon-flow[b-vrq3kicbbv]  .addon-tag--amber {
    color: var(--em-sem-open-text);
    background: var(--em-sem-open-bg);
    border-color: var(--em-sem-open-text);
}

/* ---------------------------------------------------------------- productkaarten */

/* Compacte strook met wat de tenant al heeft — géén kaarten, zodat het aanbod overzichtelijk blijft. */
.addon-flow[b-vrq3kicbbv]  .addon-active-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: 12px;
    padding: 9px 12px;
    background: var(--em-sem-success-bg);
    border: 1px solid var(--em-sem-success-text);
    border-radius: var(--em-radius-sm);
    font-size: 12.5px;
}

.addon-flow[b-vrq3kicbbv]  .addon-active-strip__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: var(--em-sem-success-text);
}

.addon-flow[b-vrq3kicbbv]  .addon-active-strip__icon { font-size: 16px; }

.addon-flow[b-vrq3kicbbv]  .addon-active-strip__count {
    padding: 0 6px;
    border-radius: var(--em-radius-full);
    background: #fff;
    border: 1px solid var(--em-sem-success-text);
    font-size: 11px;
}

.addon-flow[b-vrq3kicbbv]  .addon-active-strip__chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.addon-flow[b-vrq3kicbbv]  .addon-active-strip__hint {
    margin-left: auto;
    color: var(--em-text-secondary);
}

.addon-flow[b-vrq3kicbbv]  .addon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 12px;
}

.addon-flow[b-vrq3kicbbv]  .addon-product {
    border: 1px solid var(--em-border-primary);
    border-radius: var(--em-radius-sm);
    padding: 15px 16px;
}

.addon-flow[b-vrq3kicbbv]  .addon-product--selected {
    border-color: var(--em-primary-line);
    background: var(--em-primary-tint);
}

.addon-flow[b-vrq3kicbbv]  .addon-product__top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.addon-flow[b-vrq3kicbbv]  .addon-product__name {
    font-size: 14px;
    font-weight: 700;
    color: var(--em-text-primary);
}

.addon-flow[b-vrq3kicbbv]  .addon-product__desc {
    margin-top: 2px;
    font-size: 12px;
    color: var(--em-text-secondary);
}

.addon-flow[b-vrq3kicbbv]  .addon-product__trial {
    margin-top: 10px;
    padding: 8px 10px;
    background: var(--em-primary-tint);
    border: 1px dashed var(--em-primary-line);
    border-radius: var(--em-radius-sm);
    font-size: 12.5px;
}

.addon-flow[b-vrq3kicbbv]  .addon-product__actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.addon-flow[b-vrq3kicbbv]  .addon-qty {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: none;
}

.addon-flow[b-vrq3kicbbv]  .addon-qty__count {
    min-width: 1.6em;
    text-align: center;
    font-weight: 600;
}

/* Prijsregel mag afbreken zodat de knoppen nooit uit de kaart lopen. */
.addon-flow[b-vrq3kicbbv]  .addon-product__validity {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--em-sem-open-text);
    white-space: nowrap;
}

.addon-flow[b-vrq3kicbbv]  .addon-product__validity .rzi { font-size: 15px; }


.addon-flow[b-vrq3kicbbv]  .addon-product__foot {
    flex-wrap: wrap;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid var(--em-border-subtle);
}

.addon-flow[b-vrq3kicbbv]  .addon-product__price {
    font-family: var(--em-font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--em-text-primary);
}

.addon-flow[b-vrq3kicbbv]  .addon-product__suffix {
    font-size: 11.5px;
    color: var(--em-text-tertiary);
}

.addon-flow[b-vrq3kicbbv]  .addon-product__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---------------------------------------------------------------- winkelwagen */

.addon-flow[b-vrq3kicbbv]  .addon-cart-line {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 0;
    border-bottom: 1px solid var(--em-border-subtle);
}

.addon-flow[b-vrq3kicbbv]  .addon-cart-line:last-child {
    border-bottom: 0;
}

.addon-flow[b-vrq3kicbbv]  .addon-cart-line__title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--em-text-primary);
}

.addon-flow[b-vrq3kicbbv]  .addon-cart-line__config {
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--em-text-tertiary);
}

.addon-flow[b-vrq3kicbbv]  .addon-cart-line__amount {
    margin-left: auto;
    font-family: var(--em-font-mono);
    font-size: 13px;
    color: var(--em-text-primary);
}

/* ---------------------------------------------------------------- zijbalk */

.addon-flow[b-vrq3kicbbv]  .addon-summary__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    font-size: 12.5px;
    color: var(--em-text-primary);
}

.addon-flow[b-vrq3kicbbv]  .addon-summary__row--muted {
    padding-top: 8px;
    border-top: 1px solid var(--em-border-subtle);
    color: var(--em-text-secondary);
}

.addon-flow[b-vrq3kicbbv]  .addon-summary__amount {
    font-family: var(--em-font-mono);
}

.addon-flow[b-vrq3kicbbv]  .addon-summary__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding: 11px 13px;
    border-radius: var(--em-radius-sm);
    background: var(--em-primary-tint);
    border: 1px solid var(--em-primary-line);
    color: var(--em-primary-dark);
    font-size: 12.5px;
    font-weight: 700;
}

.addon-flow[b-vrq3kicbbv]  .addon-summary__total-amount {
    font-family: var(--em-font-mono);
    font-size: 15px;
    font-weight: 600;
}

.addon-flow[b-vrq3kicbbv]  .addon-summary__note {
    margin-top: 9px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--em-text-tertiary);
}

.addon-flow[b-vrq3kicbbv]  .addon-todo {
    border-left: 3px solid var(--em-sem-open-text);
}

.addon-flow[b-vrq3kicbbv]  .addon-todo__item {
    display: flex;
    gap: 8px;
    font-size: 12.5px;
    color: var(--em-text-secondary);
    padding: 3px 0;
}

.addon-flow[b-vrq3kicbbv]  .addon-todo__bullet {
    color: var(--em-sem-open-text);
    font-weight: 800;
}

/* ---------------------------------------------------------------- stap 2 + 4 panelen */

.addon-flow[b-vrq3kicbbv]  .addon-panel {
    margin-top: 13px;
    padding: 12px 14px;
    border-radius: var(--em-radius-sm);
    border: 1px solid var(--em-border-primary);
    background: var(--em-surface-sunken);
    font-size: 12.5px;
    color: var(--em-text-secondary);
}

.addon-flow[b-vrq3kicbbv]  .addon-panel--ok {
    border-color: var(--em-sem-success-text);
    background: var(--em-sem-success-bg);
    color: var(--em-sem-success-text);
}

.addon-flow[b-vrq3kicbbv]  .addon-panel--wait {
    border-color: var(--em-sem-open-text);
    background: var(--em-sem-open-bg);
    color: var(--em-sem-open-text);
}

.addon-flow[b-vrq3kicbbv]  .addon-panel__lines {
    margin-top: 6px;
    font-family: var(--em-font-mono);
    font-size: 12px;
    line-height: 1.7;
    color: var(--em-text-primary);
}

.addon-flow[b-vrq3kicbbv]  .addon-kv {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    border: 1px solid var(--em-border-primary);
    border-radius: var(--em-radius-sm);
    overflow: hidden;
    font-size: 12.5px;
}

.addon-flow[b-vrq3kicbbv]  .addon-kv__key {
    padding: 9px 13px;
    color: var(--em-text-secondary);
    background: var(--em-surface-sunken);
}

.addon-flow[b-vrq3kicbbv]  .addon-kv__value {
    padding: 9px 13px;
    color: var(--em-text-primary);
    border-left: 1px solid var(--em-border-subtle);
}

.addon-flow[b-vrq3kicbbv]  .addon-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

/* ---------------------------------------------------------------- tijdlijn stap 4 */

.addon-flow[b-vrq3kicbbv]  .addon-timeline__step {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 12px;
}

.addon-flow[b-vrq3kicbbv]  .addon-timeline__marker {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.addon-flow[b-vrq3kicbbv]  .addon-timeline__dot {
    width: 10px;
    height: 10px;
    margin-top: 4px;
    border-radius: var(--em-radius-full);
    border: 2px solid var(--em-border-secondary);
    background: var(--em-bg-surface);
}

.addon-flow[b-vrq3kicbbv]  .addon-timeline__dot--done {
    background: var(--em-sem-success-text);
    border-color: var(--em-sem-success-text);
}

.addon-flow[b-vrq3kicbbv]  .addon-timeline__dot--current {
    border-color: var(--em-sem-open-text);
}

.addon-flow[b-vrq3kicbbv]  .addon-timeline__line {
    flex: 1;
    width: 1px;
    background: var(--em-border-primary);
}

.addon-flow[b-vrq3kicbbv]  .addon-timeline__body {
    padding-bottom: 14px;
}

.addon-flow[b-vrq3kicbbv]  .addon-timeline__title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--em-text-primary);
}

.addon-flow[b-vrq3kicbbv]  .addon-timeline__detail {
    font-family: var(--em-font-mono);
    font-size: 11.5px;
    color: var(--em-text-secondary);
}

.addon-flow[b-vrq3kicbbv]  .addon-timeline__step--future .addon-timeline__title,
.addon-flow[b-vrq3kicbbv]  .addon-timeline__step--future .addon-timeline__detail {
    color: var(--em-text-tertiary);
}

/* DT-66674.1-2: looptijd en opzegbaarheid per actieve contractregel, onder de "Al actief"-strook. */
.addon-flow[b-vrq3kicbbv]  .addon-contract-lines {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

.addon-flow[b-vrq3kicbbv]  .addon-contract-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 6px 10px;
    border: 1px solid var(--em-border-subtle, #e3e6ea);
    border-radius: var(--em-radius-md, 6px);
}

.addon-flow[b-vrq3kicbbv]  .addon-contract-line__name { font-weight: 600; flex: 1 1 200px; min-width: 0; }
.addon-flow[b-vrq3kicbbv]  .addon-contract-line__price { flex: 0 0 auto; }
.addon-flow[b-vrq3kicbbv]  .addon-contract-line__term { flex: 1 1 240px; opacity: 0.75; font-size: 12px; }
.addon-flow[b-vrq3kicbbv]  .addon-contract-line__action { flex: 0 0 auto; margin-left: auto; }
/* /Components/Pages/Till/CashDashboard.razor.rz.scp.css */
/* Filter bar styling */
[b-sas3o3fa2w] .filter-actions-bar {
    margin-bottom: 0;
    border-left: none !important;
}

[b-sas3o3fa2w] .filter-actions-bar .custom-card-header {
    display: none;
}

[b-sas3o3fa2w] .filter-actions-bar .custom-card-content {
    padding: 0.75rem 1rem;
}

/* Dashboard grid: Transacties left (3/4), Kas in/uit + Afsluitingen right (1/4) */
.dashboard-grid[b-sas3o3fa2w] {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 0.75rem;
    height: calc(100vh - 320px);
    min-height: 400px;
}

.dashboard-grid-left[b-sas3o3fa2w] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.dashboard-grid-right[b-sas3o3fa2w] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 0;
}

/* Cards inside the grid fill available space */
.dashboard-grid-left[b-sas3o3fa2w]  .custom-card,
.dashboard-grid-right[b-sas3o3fa2w]  .custom-card {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

/* Card content area fills remaining card space and scrolls on overflow */
.dashboard-grid-left[b-sas3o3fa2w]  .custom-card-content,
.dashboard-grid-right[b-sas3o3fa2w]  .custom-card-content {
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
}

/* Responsive: stack on mobile */
@media (max-width: 991px) {
    .dashboard-grid[b-sas3o3fa2w] {
        grid-template-columns: 1fr;
        height: auto;
    }

    .dashboard-grid-left[b-sas3o3fa2w]  .custom-card,
    .dashboard-grid-right[b-sas3o3fa2w]  .custom-card {
        flex: none;
        min-height: 300px;
    }
}
/* /Components/Pages/Till/Components/DeliveryEventChecklistPanel.razor.rz.scp.css */
/* Inhoud van de aflever-checklist. Het venster zelf (breedte, achtergrond, centrering) komt van
   de Radzen-dialoog; de kaart-look (padding rondom, afgeronde hoeken) hoort bij dit panel omdat
   de dialoog met ShowTitle=false geen eigen content-opmaak draagt. */

.delivery-checklist-panel[b-y91exam5ui] {
    padding: 1.5rem;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 12px;
    box-shadow: var(--rz-shadow-4);
}

.delivery-checklist-ordernumber[b-y91exam5ui] {
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
}

.delivery-checklist-body[b-y91exam5ui] {
    overflow-y: auto;
    max-height: 60vh;
}

.delivery-checklist-group[b-y91exam5ui] {
    margin-bottom: 1rem;
}

.delivery-checklist-group__title[b-y91exam5ui] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rz-text-tertiary-color);
    margin-bottom: 0.375rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--rz-border-color);
}

.delivery-checklist-item[b-y91exam5ui] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0;
}

.delivery-checklist-item.is-required-open[b-y91exam5ui] {
    background: var(--rz-danger-lighter, rgba(220, 53, 69, 0.08));
    border-radius: 6px;
    padding-left: 0.375rem;
}

.delivery-checklist-item__required[b-y91exam5ui] {
    color: var(--rz-danger);
    font-weight: 600;
}

.delivery-checklist-item__by[b-y91exam5ui] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

/* Medewerker-keuze rechts uitlijnen zodat de namen onder elkaar staan. ::deep is nodig:
   de class hangt aan markup die CustomDropdown zelf rendert, dus zonder scope-attribuut. */
.delivery-checklist-item[b-y91exam5ui]  .delivery-checklist-item__employee {
    margin-left: auto;
}
/* /Components/Pages/Till/TillDrawer.razor.rz.scp.css */
.till-transaction-badge[b-wvgguyjcur] {
    font-size: 0.875rem;
    color: var(--rz-text-secondary-color);
    background: var(--rz-base-200);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.till-columns[b-wvgguyjcur] {
    display: flex;
    height: 100%;
    gap: 4px;
    background: var(--rz-border-color);
}

/* Links: Product zoeken ~55% (3 cards breed) */
.till-col-search[b-wvgguyjcur] {
    flex: 0 0 50%;
    overflow-y: auto;
    background: var(--rz-panel-background-color);
    padding: 0.5rem;
}

/* Midden: Winkelwagen ~22% */
.till-col-cart[b-wvgguyjcur] {
    flex: 0 0 20%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background: var(--rz-panel-background-color);
}

/* Rechts: Klant info + acties ~23% */
.till-col-customer[b-wvgguyjcur] {
    flex: 0 0 20%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background: var(--rz-panel-background-color);
}

.customer-placeholder[b-wvgguyjcur] {
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

@media (max-width: 1200px) {
    .till-col-search[b-wvgguyjcur] {
        flex: 1;
    }

    .till-col-cart[b-wvgguyjcur] {
        flex: 0 0 25%;
    }

    .till-col-customer[b-wvgguyjcur] {
        flex: 0 0 25%;
    }
}

@media (max-width: 768px) {
    .till-columns[b-wvgguyjcur] {
        flex-direction: column;
    }

    .till-col-search[b-wvgguyjcur],
    .till-col-cart[b-wvgguyjcur],
    .till-col-customer[b-wvgguyjcur] {
        flex: none;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--rz-border-color);
    }
}
/* /Components/Pages/Workshop/Components/WorkshopChecklistPanel.razor.rz.scp.css */
.workshop-checklist[b-hc7kosrhes] {
    display: flex;
    flex-direction: column;
}

.workshop-checklist__empty[b-hc7kosrhes] {
    padding: 12px 0;
    color: var(--em-form-placeholder, #8a979c);
}

.workshop-checklist__row[b-hc7kosrhes] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--em-border-subtle, #ece8de);
}

.workshop-checklist__row:first-child[b-hc7kosrhes] {
    border-top: none;
}

.workshop-checklist__icon[b-hc7kosrhes] {
    color: var(--em-form-placeholder, #8a979c);
    flex: 0 0 auto;
}

.workshop-checklist__row--done .workshop-checklist__icon[b-hc7kosrhes] {
    color: #2e9e5b;
}

.workshop-checklist__body[b-hc7kosrhes] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.workshop-checklist__name[b-hc7kosrhes] {
    font-size: 13px;
    font-weight: 700;
    color: var(--em-form-text, #16323b);
}

.workshop-checklist__row--done .workshop-checklist__name[b-hc7kosrhes] {
    color: var(--em-form-placeholder, #5a6b71);
}

.workshop-checklist__meta[b-hc7kosrhes] {
    font-family: var(--em-font-mono, monospace);
    font-size: 11px;
    color: var(--em-form-placeholder, #8a979c);
}

.workshop-checklist__gate[b-hc7kosrhes] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--em-border-subtle, #ece8de);
    display: flex;
    justify-content: flex-end;
}

.workshop-checklist__ready[b-hc7kosrhes] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 2px;
    background: #e7f5ec;
    color: #2e9e5b;
}
/* /Components/Pages/Workshop/Components/WorkshopNotifyDialog.razor.rz.scp.css */
.workshop-notify__mask[b-z425ndtchm] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(22, 50, 59, .38);
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

.workshop-notify__dialog[b-z425ndtchm] {
    width: min(480px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: var(--em-bg-surface, #fff);
    border-radius: 4px;
    box-shadow: 0 14px 34px rgba(22, 50, 59, .18);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.workshop-notify__header[b-z425ndtchm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.workshop-notify__order[b-z425ndtchm] {
    font-family: var(--em-font-mono, monospace);
    font-size: 11.5px;
    color: var(--em-form-placeholder, #8a979c);
}

.workshop-notify__channels[b-z425ndtchm] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.workshop-notify__channel[b-z425ndtchm] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--em-border-subtle, #ece8de);
    border-radius: 3px;
    cursor: pointer;
    background: var(--em-bg-surface-sunken, #fcfbf7);
}

.workshop-notify__channel--selected[b-z425ndtchm] {
    border-color: var(--em-primary, #0e7c9b);
    background: var(--em-accent-lighter, #e8f3f6);
}

.workshop-notify__channel--blocked[b-z425ndtchm] {
    opacity: .55;
    cursor: not-allowed;
}

.workshop-notify__channel-body[b-z425ndtchm] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.workshop-notify__channel-name[b-z425ndtchm] {
    font-size: 13px;
    font-weight: 700;
    color: var(--em-form-text, #16323b);
}

.workshop-notify__channel-contact[b-z425ndtchm] {
    font-family: var(--em-font-mono, monospace);
    font-size: 11.5px;
    color: var(--em-form-placeholder, #5a6b71);
}

.workshop-notify__channel-reason[b-z425ndtchm] {
    font-size: 11.5px;
    color: #b7891b;
}

.workshop-notify__channel-radio[b-z425ndtchm] {
    color: var(--em-primary, #0e7c9b);
}

.workshop-notify__contact[b-z425ndtchm] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.workshop-notify__save[b-z425ndtchm] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.workshop-notify__phone-hint[b-z425ndtchm] {
    font-size: 12.5px;
    color: var(--em-form-placeholder, #5a6b71);
    background: var(--em-bg-secondary, #f0eee7);
    border-radius: 3px;
    padding: 8px 10px;
}

.workshop-notify__error[b-z425ndtchm] {
    font-size: 12.5px;
    color: #d6483f;
    background: #fbe9ec;
    border-radius: 3px;
    padding: 8px 10px;
}

.workshop-notify__footer[b-z425ndtchm] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
}
/* /Components/Pages/Workshop/WorkshopDashboard.razor.rz.scp.css */
.workshop-page[b-5ad92qz2vn] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
}

.workshop-page__scan[b-5ad92qz2vn] {
    flex: 1 1 320px;
    min-width: 260px;
    margin-left: auto;
}

.workshop-page__order-number[b-5ad92qz2vn] {
    font-family: var(--em-font-mono, monospace);
    font-size: 15px;
    font-weight: 700;
    color: var(--em-form-text, #16323b);
}

.workshop-page__pill[b-5ad92qz2vn] {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: var(--em-accent-lighter, #e8f3f6);
    color: var(--em-accent-dark, #0b6076);
}

.workshop-page__pill--status[b-5ad92qz2vn] {
    background: var(--em-bg-secondary, #f0eee7);
    color: var(--em-form-placeholder, #5a6b71);
}

/* Status-tinten conform v2-design (DT-66669.5-3): groen=klaar, geel=wachtend, rood=fout/retour */
.workshop-page__pill--ok[b-5ad92qz2vn] {
    background: #e7f5ec;
    color: #2e9e5b;
}

.workshop-page__pill--waiting[b-5ad92qz2vn] {
    background: #fbf3de;
    color: #b7891b;
}

.workshop-page__pill--error[b-5ad92qz2vn] {
    background: #fbe9ec;
    color: #d6483f;
}

.workshop-page__header-actions[b-5ad92qz2vn] {
    margin-left: auto;
}

.workshop-page__customer[b-5ad92qz2vn] {
    font-size: 13px;
    font-weight: 700;
    color: var(--em-form-text, #16323b);
}

.workshop-page__date[b-5ad92qz2vn] {
    font-family: var(--em-font-mono, monospace);
    font-size: 11px;
    color: var(--em-form-placeholder, #8a979c);
}

.workshop-page__grid[b-5ad92qz2vn] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
    gap: 14px;
    align-items: start;
}

@media (max-width: 1100px) {
    .workshop-page__grid[b-5ad92qz2vn] {
        grid-template-columns: 1fr;
    }
}

.workshop-page__col[b-5ad92qz2vn] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.workshop-page__delay-banner[b-5ad92qz2vn] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    margin-bottom: 10px;
    border-radius: 3px;
    background: #fbf3de;
    color: #b7891b;
}

.workshop-page__remarks[b-5ad92qz2vn] {
    font-size: 13px;
    color: var(--em-form-text, #16323b);
    white-space: pre-wrap;
}

/* Gedeelde technische tabellen in de sub-componenten (scoped via ::deep) */
.workshop-page[b-5ad92qz2vn]  .workshop-table {
    width: 100%;
    border-collapse: collapse;
}

.workshop-page[b-5ad92qz2vn]  .workshop-table th {
    text-align: left;
    font-family: var(--em-font-mono, monospace);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--em-form-placeholder, #8a979c);
    padding: 4px 8px 4px 0;
    border-bottom: 1px solid var(--em-border-subtle, #ece8de);
}

.workshop-page[b-5ad92qz2vn]  .workshop-table td {
    font-family: var(--em-font-mono, monospace);
    font-size: 12.5px;
    color: var(--em-form-text, #16323b);
    padding: 6px 8px 6px 0;
    border-bottom: 1px solid var(--em-border-subtle, #ece8de);
    white-space: nowrap;
}

.workshop-page[b-5ad92qz2vn]  .workshop-table td.workshop-items__desc-col,
.workshop-page[b-5ad92qz2vn]  .workshop-table th.workshop-items__desc-col {
    white-space: normal;
    width: 100%;
}

.workshop-page[b-5ad92qz2vn]  .workshop-items__note {
    font-size: 11px;
    color: var(--em-form-placeholder, #8a979c);
}

.workshop-page[b-5ad92qz2vn]  .workshop-glasses__section-label,
.workshop-page[b-5ad92qz2vn]  .workshop-cl__section-label {
    font-family: var(--em-font-mono, monospace);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--em-form-placeholder, #8a979c);
    margin: 14px 0 6px;
}

.workshop-page[b-5ad92qz2vn]  .workshop-glasses__section-label:first-child,
.workshop-page[b-5ad92qz2vn]  .workshop-cl__section-label:first-child {
    margin-top: 0;
}

.workshop-page[b-5ad92qz2vn]  .workshop-glasses__hint {
    font-family: var(--em-font-mono, monospace);
    font-size: 11px;
    color: var(--em-form-placeholder, #8a979c);
    margin-top: 4px;
}

.workshop-page[b-5ad92qz2vn]  .workshop-glasses__frame {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.workshop-page[b-5ad92qz2vn]  .workshop-glasses__frame-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--em-form-text, #16323b);
}

.workshop-page[b-5ad92qz2vn]  .workshop-glasses__frame-color {
    font-weight: 500;
    color: var(--em-form-placeholder, #5a6b71);
}

.workshop-page[b-5ad92qz2vn]  .workshop-glasses__frame-sizes {
    font-family: var(--em-font-mono, monospace);
    font-size: 12px;
    color: var(--em-form-placeholder, #5a6b71);
}