.alert-buton {
    border-radius: 8px !important;
    border: 1px solid var(--rz-primary);
    position: relative;
}

.alert-buton-badge {
    position: absolute;
    right: 10px;
    top: 5px;
}

.profil-button {
    border-radius: 8px !important;
    border: 1px solid var(--rz-primary);
    padding: 0.5rem;
}

.contact-avatar {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--rz-primary-lighter);
    color: var(--rz-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.profil-button .rz-button-box {
    width: 100%;
}

.validation-message {
    color: var(--rz-danger);
    font-size: small;
}

.notification-container {
    position: absolute;
    top: 16px;
    left: 300px;
    width: 360px;
    overflow-y: auto;
    z-index: 1000;
}

    .notification-container .rz-tabview-nav {
        justify-content: center;
    }

.document-icon-root {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    border-radius: 50%;
    padding: 0.5rem;
    box-sizing: border-box;
    --rz-icon-size: 1.1rem;
}

.upload-file-input {
    width: 100%;
    padding: 0.45rem;
    border: 1px dashed var(--rz-base-400);
    border-radius: var(--rz-border-radius-2);
    background: var(--rz-base-50);
    color: var(--rz-text-color);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

    .upload-file-input:hover {
        border-color: var(--rz-primary);
        background: var(--rz-primary-50);
    }

    .upload-file-input:focus,
    .upload-file-input:focus-visible {
        outline: none;
        border-color: var(--rz-primary);
        box-shadow: 0 0 0 3px var(--rz-primary-100);
    }

    .upload-file-input::file-selector-button {
        margin-right: 0.75rem;
        padding: 0.5rem 0.9rem;
        border: 1px solid var(--rz-base-300);
        border-radius: var(--rz-border-radius-2);
        background: var(--rz-base-100);
        color: var(--rz-base-900);
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.2s ease, border-color 0.2s ease;
    }

        .upload-file-input::file-selector-button:hover {
            border-color: var(--rz-primary-300);
            background: var(--rz-primary-100);
        }

.card {
    padding: 0 !important;
    --rz-card-shadow: none;
    border: var(--rz-border-width) solid var(--rz-base-600);
}

.card-header {
    background-color: var(--rz-primary-100);
    border-top-left-radius: var(--rz-card-border-radius);
    border-top-right-radius: var(--rz-card-border-radius);
    border-bottom: var(--rz-border-width) solid var(--rz-base-600);
}

.card-footer {
    background-color: var(--rz-base-light);
    border-bottom-left-radius: var(--rz-card-border-radius);
    border-bottom-right-radius: var(--rz-card-border-radius);
    border-top: var(--rz-border-width) solid var(--rz-base-600);
}

/* Form label - one style app-wide: caption size, 600, uppercase */
.rz-label {
    font-weight: 600;
    color: var(--rz-base-700);
    text-transform: uppercase;
    font-size: 0.8rem;
}

/* Birth date field: age caption sits inside the field, just before the calendar trigger. */
.birthdate-field {
    position: relative;
}

    .birthdate-field .birthdate-age {
        position: absolute;
        inset-inline-end: calc(1rem + var(--rz-datepicker-trigger-icon-width));
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
    }

/* IPP detailed block: keep the rows a stable, readable width and align them as a grid. */
.ipp-block {
    width: 100%;
    max-width: 600px;
}

.ipp-mp-row {
    display: grid;
    grid-template-columns: 7rem 1fr auto;
    gap: 0.75rem;
    align-items: center;
}

.form-disabled-edition {
    --rz-input-disabled-color: var(--rz-input-color);
    --rz-input-disabled-background-color: var(--rz-base-100);
}


    .form-disabled-edition .rz-state-disabled > .rz-datepicker-trigger,
    .form-disabled-edition .rz-state-disabled > .rz-dropdown-trigger {
        --rz-input-disabled-color: var(--rz-text-disabled-color);
        color: var(--rz-text-disabled-color)
    }

/* Invalid field: Radzen tags the control with .invalid but the theme only turns it red on
   the login screen. Same signal everywhere instead, on the control and on the form field
   wrapper that draws the border for floating-label inputs. */
.rz-textbox.invalid,
.rz-textarea.invalid,
.rz-dropdown.invalid,
.rz-multiselect.invalid,
.rz-numeric.invalid,
.rz-colorpicker.invalid,
.mask.invalid,
.rz-datepicker.invalid > .rz-inputtext,
.rz-datepicker > .rz-inputtext.invalid,
.rz-selectbar.invalid,
.rz-form-field-content:has(.invalid) {
    border-color: var(--rz-danger);
}

    /* The segmented bar draws a tinted background too, so the border alone reads weak. */
    .rz-selectbar.invalid {
        background: var(--rz-danger-lighter);
    }

    .rz-textbox.invalid:focus,
    .rz-textarea.invalid:focus,
    .rz-numeric.invalid:focus-within,
    .rz-dropdown.invalid.rz-state-focused,
    .rz-multiselect.invalid.rz-state-focused {
        --rz-input-focus-shadow: inset 0 0 0 1px var(--rz-danger);
        border-color: var(--rz-danger);
    }

/* Segmented RadzenSelectBar - the app has a single select bar style */
.rz-selectbar {
    padding: 4px;
    background: var(--rz-primary-100);
    border: var(--rz-border-width) solid var(--rz-primary-200);
    --rz-selectbar-border-radius: var(--rz-border-radius-2);
    gap: 4px;
}

    .rz-selectbar > .rz-button {
        flex-grow: 1;
        border-radius: var(--rz-border-radius-2);
        opacity: 1 !important;
        border: none;
        background-color: transparent;
        color: var(--rz-primary-darker);
        font-weight: 500;
    }

        .rz-selectbar > .rz-button:hover:not(.rz-state-active):not(.rz-state-disabled) {
            background-color: rgb(255 255 255 / 45%);
        }

        .rz-selectbar > .rz-button.rz-state-active {
            background-color: var(--rz-primary) !important;
            color: var(--rz-on-primary) !important;
            border: none;
        }

.icon-list > * {
    border: 2px solid var(--rz-white);
}

    .icon-list > * + * {
        margin-left: -10px !important;
    }


/* Interview dialog ÔÇö mockup layout: white shell, tinted sidebar, soft border/shadow */
.rz-dialog.interview-dialog {
    --interview-dialog-border: var(--rz-base-300);
    --interview-dialog-sidebar-bg: var(--rz-primary-50);
    display: flex;
    flex-direction: column;
    height: 90vh;
    max-height: 90vh;
    max-width: 100vw;
    overflow: hidden;
    /* Floor for the resize handle: below this the two panes are unusable.
       Capped at the viewport so a small screen is never forced to scroll sideways. */
    min-width: min(760px, 100vw);
    background-color: var(--rz-base-background-color);
    border: var(--rz-border-width) solid var(--interview-dialog-border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgb(31 18 48 / 10%), 0 2px 8px rgb(31 18 48 / 6%);
}

.rz-dialog.interview-dialog .rz-dialog-content,
.rz-dialog-content:has(.interview-dialog-layout) {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    background-color: var(--rz-base-background-color);
}

.interview-dialog-layout {
    --interview-dialog-border: var(--rz-base-300);
    --interview-dialog-sidebar-bg: var(--rz-primary-50);
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    background-color: var(--rz-base-background-color);
}

.interview-dialog-layout > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.interview-dialog-shell {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.interview-dialog-layout .interview-dialog-section {
    padding: 1.5rem;
}

.interview-dialog-layout .interview-dialog-header,
.interview-dialog-layout .interview-dialog-footer {
    flex-shrink: 0;
}

.interview-dialog-layout .interview-dialog-header {
    background-color: var(--rz-primary-100);
    border-bottom: var(--rz-border-width) solid var(--rz-primary-300);
}

    .interview-dialog-layout .interview-dialog-header .rz-text-caption {
        color: var(--rz-primary-700);
    }

.interview-dialog-body {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.interview-dialog-body > .interview-dialog-body-row {
    display: flex;
    flex: 1 1 0;
    min-height: 0;
    margin: 0;
    flex-wrap: nowrap;
    align-items: stretch;
}

.interview-dialog-body-row > [class*="rz-col"] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    padding: 0;
}

.interview-dialog-pane {
    flex: 1 1 0;
    min-height: 0;
}

.interview-dialog-scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.interview-dialog-scroll.interview-dialog-main-scroll {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}

.interview-dialog-layout .interview-dialog-main {
    background-color: var(--rz-base-background-color);
}

.interview-dialog-layout .interview-dialog-sidebar {
    background-color: var(--interview-dialog-sidebar-bg);
    border-left: var(--rz-border-width) solid var(--interview-dialog-border);
}

.interview-dialog-sidebar .interview-dialog-scroll {
    padding: 1.5rem;
}

.interview-dialog-sidebar-inner {
    min-height: min-content;
}

.interview-dialog-layout .interview-dialog-footer {
    padding-block: 1rem;
    background-color: var(--rz-base-background-color);
    border-top: var(--rz-border-width) solid var(--interview-dialog-border);
}

@media (max-width: 991.98px) {
    .interview-dialog-body-row {
        flex-wrap: wrap;
    }

    .interview-dialog-body-row > [class*="rz-col"] {
        flex: 1 1 100%;
        max-height: 50%;
    }

    .interview-dialog-sidebar {
        border-left: none;
        border-top: var(--rz-border-width) solid var(--interview-dialog-border);
    }
}


.interview-dialog-layout .rz-selectbar {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
}

    .interview-dialog-layout .rz-selectbar > button {
        flex: 1 1 0;
        min-width: 0;
        white-space: nowrap;
    }

.interview-dialog-sidebar-title {
    color: var(--rz-primary-darker);
}

.interview-linked-needs-count {
    min-width: 2rem;
    padding-inline: 0.65rem;
}

.interview-linked-needs-count-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--rz-primary);
}

.interview-linked-need-card {
    padding: 1rem;
    background-color: var(--rz-base-background-color);
    border: var(--rz-border-width) solid var(--interview-dialog-border);
    border-radius: var(--rz-border-radius-2);
    box-shadow: 0 1px 2px rgb(31 18 48 / 4%);
}

.interview-linked-need-origin {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--rz-base-600);
    text-transform: uppercase;
}

.interview-linked-need-history-link {
    align-self: flex-start;
    min-height: auto;
    padding: 0;
    font-weight: 500;
    color: var(--rz-primary);
}

.interview-dialog-main-scroll > .interview-dialog-form,
.interview-dialog-main-scroll > .interview-dialog-form.rz-stack {
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.interview-dialog-form-fields {
    flex: 0 0 auto;
}

.interview-dialog-notes,
.interview-dialog-notes.rz-stack {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.interview-dialog-synthesis-section,
.interview-dialog-synthesis-section.rz-stack {
    flex: 0 0 auto;
}

.interview-dialog-form--input-mode .interview-dialog-notes-editor {
    flex: 1 1 0;
    min-height: 10rem;
}

.interview-dialog-notes-editor {
    flex: 1 1 0;
    min-height: 10rem;
    position: relative;
}

    .interview-dialog-notes-editor > .interview-dialog-notes-input,
    .interview-dialog-notes-editor > .rz-textarea,
    .interview-dialog-notes-editor > textarea {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100% !important;
        min-height: 100%;
        margin: 0;
        box-sizing: border-box;
    }

    .interview-dialog-notes-editor textarea {
        resize: none;
        overflow-y: auto !important;
    }

.interview-dialog-notes > .rz-stack,
.interview-dialog-notes > .rz-validation-message {
    flex: 0 0 auto;
}

.interview-dialog-layout .interview-dialog-notes-input,
.interview-dialog-layout .interview-dialog-notes-input textarea {
    background-color: var(--rz-base-background-color);
    color: var(--rz-input-value-color);
}

.interview-dialog-layout .interview-dialog-synthesis-toggle {
    align-self: flex-start;
    padding-inline: 0;
    min-height: auto;
    font-weight: 500;
}

/* Sized textbox ÔÇö align metrics with Radzen button sizes */
.rz-sized-textbox {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
}

.rz-sized-textbox:has(.rz-w-100) {
    display: block;
    width: 100%;
}

.rz-sized-textbox .rz-textbox {
    box-sizing: border-box;
}

.rz-sized-textbox-xs .rz-textbox {
    --rz-input-height: 1.25rem;
    height: 1.25rem;
    min-height: 1.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    padding-block: 0.25rem;
    padding-inline: 0.75rem;
}

.rz-sized-textbox-sm .rz-textbox {
    --rz-input-height: 1.75rem;
    height: 1.75rem;
    min-height: 1.75rem;
    font-size: 0.75rem;
    line-height: 1rem;
    padding-block: 0.375rem;
    padding-inline: 1rem;
}

.rz-sized-textbox-md .rz-textbox {
    --rz-input-height: 2.5rem;
    height: 2.5rem;
    min-height: 2.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding-block: 0.625rem;
    padding-inline: 1.5rem;
}

.rz-sized-textbox-lg .rz-textbox {
    --rz-input-height: 3rem;
    height: 3rem;
    min-height: 3rem;
    font-size: 1rem;
    line-height: 1.5rem;
    padding-block: 0.75rem;
    padding-inline: 1.5rem;
}

/* Flat DataGrid ÔÇö flush inside a Card: no outer border, no radius */
.rz-data-grid.flat-grid {
    --rz-grid-border-radius: 0;
    --rz-grid-shadow: none;
    --rz-grid-data-border-shadow: none;
    --rz-grid-cell-border: none;
    --rz-grid-border: none;
    --rz-grid-background-color: transparent;
    --rz-grid-header-color: var(--rz-primary-darker);
    --rz-grid-header-font-weight: 600;
    --rz-grid-cell-padding: .5rem .75rem;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

    .rz-data-grid.flat-grid .rz-data-grid-data {
        outline: none;
        box-shadow: none;
        border-radius: 0;
    }

    .rz-data-grid.flat-grid .rz-datatable {
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

/* Need side dialog — detail panel from the right */
.rz-dialog-side.need-dialog {
    --need-dialog-border: var(--rz-base-300);
    width: min(800px, 50vw) !important;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.rz-dialog-side.need-dialog .rz-dialog-side-content,
.rz-dialog-side-content:has(.need-dialog-layout) {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    background-color: var(--rz-base-background-color);
}

.need-dialog-layout {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    background-color: var(--rz-base-background-color);
}

.need-dialog-shell {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.need-dialog-section {
    padding: 1.25rem 1.5rem;
}

.need-dialog-header,
.need-dialog-footer {
    flex-shrink: 0;
}

.need-dialog-header {
    border-bottom: var(--rz-border-width) solid var(--need-dialog-border);
}

.need-dialog-footer {
    border-top: var(--rz-border-width) solid var(--need-dialog-border);
    margin-top: auto;
}

.need-dialog-scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.need-dialog-loading {
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
}

.need-dialog-meta-label {
    color: var(--rz-base-600);
    letter-spacing: 0.04em;
}

.need-dialog-closed-banner {
    padding: 0.75rem 1rem;
    border-radius: var(--rz-border-radius);
    background-color: var(--rz-success-lighter);
    color: var(--rz-success-darker);
}

.need-dialog-interview-pill {
    border: var(--rz-border-width) solid var(--need-dialog-border);
}

.need-dialog-timeline {
    position: relative;
    padding-left: 0.25rem;
}

.need-dialog-timeline-item {
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    gap: 0.75rem;
    padding-bottom: 1.25rem;
    position: relative;
}

.need-dialog-timeline-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 1.1rem;
    top: 2.25rem;
    bottom: 0;
    width: 2px;
    background-color: var(--need-dialog-border);
}

.need-dialog-timeline-marker {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--rz-primary-lighter);
    color: var(--rz-primary-darker);
    z-index: 1;
}

.need-dialog-timeline-content {
    padding-top: 0.15rem;
}

/* ── CreateNeedPanel ─────────────────────────────────────────── */
/* RadzenStack gère display/flex-direction/align/justify/gap/wrap —
   ces propriétés sont retirées des classes ; ne restent que les
   valeurs structurelles que le composant ne peut pas exprimer lui-même. */

.create-need-panel {
    border-bottom: var(--rz-border-width) solid var(--rz-base-600);
    background-color: var(--rz-base-50);
}

.create-need-panel__header {
    padding: 0.75rem 1rem;
    flex-shrink: 0;
}

/* seul vrai div restant : met les 2 colonnes côte-à-côte avec hauteur fixe */
.create-need-panel__columns {
    display: flex;
    height: 300px;
}

.create-need-panel__col {
    overflow: hidden;
    min-height: 0;
}

.create-need-panel__col--left {
    flex: 0 0 42%;
}

.create-need-panel__col--right {
    flex: 1 1 0;
    min-width: 0;
}

.create-need-panel__scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

.create-need-section-label {
    padding: 0.5rem 1rem;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.create-need-chips-area {
    padding: 0.25rem 1rem 0.75rem;
    flex-shrink: 0;
    max-height: 130px;
    overflow-y: auto;
}

.create-need-panel__footer {
    padding: 0.625rem 1rem;
    flex-shrink: 0;
}

.create-need-footer-hint {
    flex: 1 1 0;
}

/* Interview rows — padding, cursor et border-left restent ; flex géré par RadzenStack */
.create-need-interview-row {
    padding: 0.625rem 0.875rem;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background-color 0.1s;
}

.create-need-interview-row:hover { background-color: var(--rz-primary-100); }

.create-need-interview-row--on {
    background-color: var(--rz-primary-200);
    border-left-color: var(--rz-primary);
}

/* flex:1 et min-width restent ; flex-direction/gap gérés par RadzenStack */
.create-need-interview-row__info {
    flex: 1 1 0;
    min-width: 0;
}

/* overflow/ellipsis restent ; couleur/taille → TextStyle.Caption */
.create-need-interview-row__name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Radio icons */
.create-need-radio {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    --rz-icon-size: 1.1rem;
}

.create-need-radio--on { color: var(--rz-primary); }
.create-need-radio--off { color: var(--rz-base-400); }

/* Category chips — pill shape ; hover/selected nécessitent du CSS */
.create-need-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    border: var(--rz-border-width) solid var(--rz-base-300);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--rz-base-700);
    background: var(--rz-base-background-color);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.1s, border-color 0.1s, color 0.1s;
}

.create-need-chip:hover {
    border-color: var(--rz-primary-300);
    background: var(--rz-primary-50);
    color: var(--rz-primary-darker);
}

.create-need-chip--on {
    background: var(--rz-primary);
    border-color: var(--rz-primary);
    color: var(--rz-on-primary);
}

.create-need-chip--on:hover {
    background: var(--rz-primary-darker);
    border-color: var(--rz-primary-darker);
    color: var(--rz-on-primary);
}

/* Need type rows — padding/cursor/couleur restent ; flex géré par RadzenStack */
.create-need-type-row {
    padding: 0.45rem 1rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--rz-text-color);
    transition: background-color 0.1s;
    --rz-icon-size: 1.1rem;
}

.create-need-type-row:hover { background: var(--rz-base-100); }
.create-need-type-row--on { background: var(--rz-primary-50); }

/* Warning block — margin/padding/couleurs restent ; flex géré par RadzenStack */
.create-need-warning {
    margin: 0.5rem 1rem;
    padding: 0.5rem 0.625rem;
    border-radius: var(--rz-border-radius-2);
    background: var(--rz-warning-lighter);
    color: var(--rz-warning-darker);
    font-size: 0.75rem;
    line-height: 1.4;
    --rz-icon-size: 0.95rem;
}

.create-need-warning .rzi {
    color: var(--rz-warning-dark) !important;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.create-need-empty-hint {
    display: block;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    color: var(--rz-base-500);
    font-style: italic;
}

/* CreateDossierDialog — beneficiary list rows */
.create-dossier-dialog .beneficiary-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.create-dossier-dialog .beneficiary-list li {
    margin: 0 0 0.85rem 0;
    padding: 0;
}

.create-dossier-dialog .beneficiary-card {
    box-shadow: none;
    border: 1px solid var(--rz-base-300);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.create-dossier-dialog .beneficiary-card:hover {
    border-color: var(--rz-primary-light, var(--rz-primary));
}

.create-dossier-dialog .beneficiary-card.selected {
    border-color: var(--rz-primary);
}


/* ChipSelect — pills that wrap onto as many rows as needed. Plain buttons, fully styled here. */
.chip-select {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chip-select-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    border: 1px solid var(--rz-base-300);
    background: var(--rz-base-background-color, #fff);
    color: var(--rz-text-color);
    font-family: inherit;
    font-size: var(--rz-text-body2-font-size);
    line-height: 1.25rem;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.chip-select-item:hover:not(:disabled) {
    border-color: var(--rz-primary);
    color: var(--rz-primary);
}

.chip-select-item.selected,
.chip-select-item.selected:hover {
    background: var(--rz-primary);
    border-color: var(--rz-primary);
    color: var(--rz-on-primary, #fff);
    font-weight: 600;
}

/* Size presets — padding, with the label and check scaled to match. */
.chip-select-item.chip-select-xs {
    padding: 0.15rem 0.55rem;
    font-size: var(--rz-text-caption-font-size);
}

.chip-select-item.chip-select-sm {
    padding: 0.3rem 0.75rem;
}

.chip-select-item.chip-select-md {
    padding: 0.4rem 0.9rem;
}

.chip-select-item.chip-select-lg {
    padding: 0.6rem 1.25rem;
    font-size: var(--rz-text-body1-font-size);
}

/* Match the label size so the check doesn't tower over the text. */
.chip-select-item .rz-icon {
    font-size: 1rem;
    width: 1rem;
    height: 1rem;
}

.chip-select-item.chip-select-xs .rz-icon {
    font-size: 0.85rem;
    width: 0.85rem;
    height: 0.85rem;
}

.chip-select-item.chip-select-lg .rz-icon {
    font-size: 1.15rem;
    width: 1.15rem;
    height: 1.15rem;
}

.chip-select-item:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* IPP cumulative total: the breakdown stays discreet, the result carries the emphasis. */
.ipp-total-calc {
    font-size: var(--rz-text-caption-font-size);
    color: var(--rz-primary);
    opacity: 0.75;
}

.ipp-total-result {
    font-size: var(--rz-text-h6-font-size);
    font-weight: 700;
    color: var(--rz-primary-darker, var(--rz-primary));
}

/* An MP line whose occupational-disease table is still missing. */
.mp-table-invalid.rz-dropdown {
    border-color: var(--rz-danger);
    background-color: var(--rz-danger-lighter, #fdecea);
}

/* Reusable scrollable dialog — the header and footer stay visible, only the content scrolls.
   1. Pass "scrollable-dialog" as DialogOptions.CssClass when opening the dialog.
   2. Structure the dialog body: root .dialog-shell > .dialog-header + .dialog-content + .dialog-footer.
   CreateDossierDialog predates this layout and keeps its own "create-dossier-modal" class; both are
   content-height modals capped at 90vh whose body scrolls past the cap. */
.rz-dialog.create-dossier-modal,
.rz-dialog.scrollable-dialog {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
}

.rz-dialog.create-dossier-modal .rz-dialog-content,
.rz-dialog.scrollable-dialog .rz-dialog-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dialog-shell {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.dialog-header,
.dialog-footer {
    flex: 0 0 auto;
}

.dialog-header {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--rz-base-300, #e5e7eb);
}

.dialog-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* A Stepper acting as the dialog content: it fills the shell and owns its scroll — the rail stays
   put and only the step body scrolls, so the scrollbar spans the fields instead of the rail.
   Put this class on the Stepper itself (its Class parameter), not on a .dialog-content wrapper. */
.dialog-content-stepper {
    flex: 1 1 auto;
    min-height: 0;
}

.rz-dialog.create-dossier-modal .create-dossier-dialog {
    flex: 1 1 auto;
    min-height: 0;
}

.create-dossier-dialog .stepper {
    flex: 1 1 auto;
    min-height: 0;
}

.create-dossier-dialog .stepper-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.create-dossier-dialog .beneficiary-step {
    flex: 1 1 auto;
    min-height: 0;
}

.create-dossier-dialog .beneficiary-list {
    /* Virtualized list (RadzenDataList AllowVirtualization) needs a definite height for its
       viewport; the content-height dialog gives it none, so pin it here. */
    height: 55vh;
    overflow: auto;
}

/* CreateDossierDialog — Personnel step info banner */
.create-dossier-dialog .personal-step-info {
    background: var(--rz-primary-100);
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

.create-dossier-dialog .personal-step-info,
.create-dossier-dialog .personal-step-info * {
    color: var(--rz-primary-dark);
}

/* CreateDossierDialog — darker background for disabled (locked) fields */
.create-dossier-dialog .rz-textbox:disabled,
.create-dossier-dialog .rz-dropdown.rz-state-disabled {
    background-color: var(--rz-base-200);
}

/* CreateDossierDialog — section headers: primary colour + separator line */
.create-dossier-dialog .personal-step-section-header {
    color: var(--rz-primary);
    border-bottom: 1px solid var(--rz-base-300);
    padding-bottom: 0.4rem;
}

/* CreateDossierDialog — family member cards */
.create-dossier-dialog .family-member-card {
    background: var(--rz-base-100);
    border: 1px solid var(--rz-base-200);
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

/* CreateDossierDialog — Assignments step info banner (informational / blue) */
.create-dossier-dialog .affectations-step-info {
    background: var(--rz-info-lighter);
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

.create-dossier-dialog .affectations-step-info,
.create-dossier-dialog .affectations-step-info * {
    color: var(--rz-info-dark);
}

/* CreateDossierDialog — Assignments step selectable intervenant cards */
.create-dossier-dialog .intervenant-card {
    border: 1px solid var(--rz-base-300);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.create-dossier-dialog .intervenant-card:hover {
    border-color: var(--rz-primary-light, var(--rz-primary));
}

.create-dossier-dialog .intervenant-card.selected {
    border-color: var(--rz-primary);
    background: var(--rz-primary-50, var(--rz-primary-100));
}

/* CreateDossierDialog — RGPD step cards (signed / not signed) */
.create-dossier-dialog .rgpd-step-card {
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid transparent;
}

.create-dossier-dialog .rgpd-step-card-ok {
    background: var(--rz-success-lighter);
    border-color: var(--rz-success);
    text-align: center;
}

.create-dossier-dialog .rgpd-step-card-alert {
    background: var(--rz-danger-lighter);
    border-color: var(--rz-danger);
}

.create-dossier-dialog .rgpd-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 12px;
}

.create-dossier-dialog .rgpd-step-icon .rz-icon,
.create-dossier-dialog .rgpd-step-icon .rzi {
    color: #fff;
}

.create-dossier-dialog .rgpd-step-icon-ok {
    background: var(--rz-success);
}

.create-dossier-dialog .rgpd-step-icon-alert {
    background: var(--rz-danger);
}

.create-dossier-dialog .rgpd-ok-title {
    color: var(--rz-success-dark);
}

.create-dossier-dialog .rgpd-alert-title {
    color: var(--rz-danger-dark);
}

.create-dossier-dialog .rgpd-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: fit-content;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    background: var(--rz-danger-light);
    color: var(--rz-danger-dark);
}

.create-dossier-dialog .rgpd-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rz-danger);
}

.create-dossier-dialog .rgpd-step-warning {
    background: var(--rz-warning-lighter);
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

.create-dossier-dialog .rgpd-step-warning,
.create-dossier-dialog .rgpd-step-warning * {
    color: var(--rz-warning-dark);
}

.dialog-content-stepper > .stepper-header {
    flex: 0 0 auto;
}

.dialog-content-stepper > .stepper-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Reserve the scrollbar gutter so a page whose height toggles the vertical scrollbar
   does not shift the layout width when navigating between sections. */
.rz-body {
    scrollbar-gutter: stable;
}

/* Radzen assigns regular dialogs and side dialogs the same z-index (1001), so a confirmation
   opened from within a side dialog (e.g. NeedDialog) rendered behind it. Lift the regular-dialog
   container above side dialogs so confirmations always overlay them. */
.rz-dialog-wrapper {
    z-index: 1100;
}


/* Dashboard shortcuts */
.home-shortcut {
    flex: 1 1 240px;
    min-width: 240px;
    cursor: pointer;
}

    .home-shortcut .rz-card {
        height: 100%;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

    .home-shortcut:hover .rz-card {
        border-color: var(--rz-primary);
        box-shadow: var(--rz-shadow-2);
    }