.abs-page:has(.resident-main-page) {
    padding: 0 !important;
    margin: 0;
    background-color: var(--sn-surface-subtle);
}

/* Suppress the outer drawer overflow only for the resident page — same pattern as room. */
.abs-left-bar .k-drawer-content .k-drawer-content:has(.resident-main-page) {
    overflow: hidden;
}

.resident-main-page {
    display: flex;
    flex-direction: column;
}

.resident-main-page__layout {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 1.25rem;
    flex: 1 1 auto;
    min-height: 0;
}

.resident-main-page__left {
    flex: 0 0 20rem;
    width: 20rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-left: 0;
    padding-right: 0.5rem;          /* gap between the panel cards and the scrollbar */
    padding-top: 1.5rem;
    margin-left: 1.5rem;
    /* Bound to the viewport (same height as the right pane) and scroll internally —
       otherwise the section + group filters grow the page and get clipped with no scroll. */
    box-sizing: border-box;
    height: calc(100vh - 7.0625rem);
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.resident-main-page__right {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
    height: calc(100vh - 7.125rem);
    padding: 1.5rem 2rem 1rem 0.75rem;
}

.resident-main-page .abs-grid {
    height: calc(100vh - var(--top-bar-height) - 5rem);
}

/* Drop the page padding/gap when the resident view page takes over —
   the v3 view page renders its own header + body chrome edge-to-edge. */
.resident-main-page:has(.resident-view-page) {
    padding: 0;
    height: 100%;
    gap: 0;
}

.resident-main-page .resident-top-bar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    gap: 0;
}

.resident-main-page .resident-selected-section-title {
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: var(--kendo-h5-font-size);
    line-height: 133%;
    display: flex;
    align-items: center;
    color: #0D1740;
    margin: 0 0 1rem 0;
    align-self: stretch;
}

.resident-main-page .resident-top-bar .top-part {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: inherit;
    gap: 1rem;
}

.resident-main-page .resident-top-bar .top-part .right-part {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: inherit;
    gap: 1rem;
}

.resident-main-page .resident-top-bar .bottom-part {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    height: inherit;
    border: 1px solid var(--abena-v2-border-default-color);
    border-radius: var(--abena-v2-default-border-radius);
    padding: 1rem;
}

.resident-main-page .resident-top-bar .k-dropdownlist .k-input-value-text {
    color: #0A0A0A;
    font-family: Gilroy-Medium;
    font-weight: 400;
    padding-left: 1rem;
}

.resident-main-page .resident-grid {
}

.resident-main-page .resident-grid .k-grid-header .k-grid-header-table .k-table-thead .k-table-row th {
    text-align: left !important;
    justify-content: flex-start !important;
}

.resident-main-page .resident-grid .k-grid-header thead tr {
    height: 3.25rem;
    background: #F1F2F5;
}

.resident-main-page .resident-grid .tag-room {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: fit-content;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    min-width: 1.8125rem;
    height: 1.5rem;
    border-radius: 0.1875rem;
    font-size: 0.875rem;
    background-color: #26BAA4;
    border: 1px solid #26BAA4;
    color: white;
}

.resident-main-page .resident-grid .tag-room.no-room {
    background-color: var(--abs-light-purple);
    border: 1px solid var(--abs-light-purple);
}

/* Full-height grid via flexbox — fills the content region instead of a
   calc(100vh - …) magic number, which over/under-shot at scaled breakpoints and
   left a stray scrollbar. Scoped with :has(.resident-main-page) so the shared
   .abs-page and the layout's content region stay untouched on other pages.
   DESKTOP ONLY (≥1101px): below 1100px the page switches to the stacked layout in
   Abena-v3.css, which gives .resident-main-page `height:100vh`. This flex chain sets
   `flex:1` (flex-basis 0) on .resident-main-page, which defeats that 100vh (the flex
   algorithm ignores the height property) and collapses the page to the header height —
   leaving the list with no visible content. Mirrors /room, whose flex-fill is likewise
   guarded to ≥1100.02px (see Abena-room.css). */
@media (min-width: 1100.02px) {
    .abs-left-bar > .k-drawer-container > .k-drawer-content > div:has(.resident-main-page) {
        display: flex;
        flex-direction: column;
    }

    .abs-page:has(> .resident-main-page) {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .resident-main-page {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .resident-main-page > .abs-grid {
        flex: 1;
        min-height: 0;
    }

    .resident-main-page > .abs-grid > .k-grid {
        height: 100% !important;
    }
}


.resident-main-page .resident-grid .tag-gir {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.75rem;
    min-width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    font-size: 1rem;
    background: #E3ECF4;
    border: 1px solid var(--primary);
    color: var(--primary);
    line-height: 1;
    padding: 0;
}

.resident-main-page .resident-grid .tag-gir span {
    padding-top: 0.125rem;
}


.resident-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 25.625rem;
    width: 100%;
    height: 8.125rem;
    background: var(--bgcolor);
    border: 1px solid var(--bgcolor);
    border-radius: 0.5rem;
}

.resident-panel.privacy-locked {
    pointer-events: none !important;
}

.dotation-grid.netsoins .resident-panel.privacy-locked .picto-container {
    pointer-events: all !important;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    -ms-user-drag: none;
    user-drag: none;
}

.dotation-grid.netsoins .resident-panel.privacy-locked .picto-container img {
    pointer-events: none !important;
}

.resident-panel .trenche-warning {
    pointer-events: all !important;
    color: orange !important;
    font-size: 2rem !important;
    cursor: pointer !important;
}

.resident-panel .info-icon {
    pointer-events: auto !important;
    cursor: pointer;
}

.resident-panel .group-label {
    margin-left: 1rem;
    padding-left: 0.75rem;
    width: 100%;
}

/*.k-drawer-expanded .resident-panel .group-label{*/
/*    padding-top: 0;*/
/*    width: 10rem;*/
/*    text-overflow: ellipsis;*/
/*    overflow: hidden;*/
/*    white-space: nowrap;*/
/*    transition: all 350ms ease-out;*/
/*}*/


.resident-panel.selected {
    border-left: 0.25rem solid var(--secondary);
    border-radius: 0.5rem;
}

.resident-panel .top {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0;
    margin-top: 0.625rem;
    width: 100%;
    height: 6rem;
}

.resident-panel .top .tag-room {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 1.5rem;
    background: #26BAA4;
    border: 1px solid #26BAA4;
    border-radius: .25rem;
    color: var(--white);
    font-size: 0.875rem;
    margin: 0 0.625rem;
    width: fit-content;
    padding: .125rem .25rem;
}

.resident-panel .top .display-name {
    height: 100%;
    display: block;
    width: 100%;
    font-size: 0.9375rem;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    flex-shrink: 10;
}

.resident-panel .top .pdts {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    width: 15rem;
    min-width: 15rem;
    padding: 0;
    height: 100%;
}

.resident-panel .top .pdts .alese {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0;
    isolation: isolate;
    width: 5rem;
    height: 4.625rem;
    border: 1px dashed var(--icons);
    border-radius: 0.375rem;
    position: relative;
}

.resident-panel .top .pdts .alese.picto {
    border: none;
}

.resident-panel .top .pdts .reco-accepted {
    border: 1px solid #23A995 !important;
}

.resident-panel .top .pdts .reco-rejected {
    border: 1px solid #DB504A !important;
}

.resident-panel .top .pdts .reco-published {
    border: 1px solid #4264D0 !important;
}

.resident-panel .top .pdts .reco-initial {
    border: 1px solid orange !important;
}


.resident-panel .reco-status-container-slip-alese {
    position: absolute;
    background-color: transparent;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    pointer-events: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 0.25rem;
}

.resident-panel .reco-status-slip-alese {
    align-self: flex-end;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.625rem;
    height: 1.625rem;
    color: white;
    z-index: 1000;
    border-top-left-radius: 0.1875rem;
}

.resident-panel .reco-status-slip-alese.reco-accepted {
    background-color: #23A995;
}

.resident-panel .reco-status-slip-alese.reco-rejected {
    background-color: #DB504A;
    border: 0.125rem solid #DB504A;
}

.resident-panel .reco-status-slip-alese.reco-published {
    background-color: #4264D0;
    border: 0.125rem solid #4264D0;
}

.resident-panel .reco-status-slip-alese.reco-initial {
    background-color: orange;
}


.resident-panel .top .pdts .alese-empty, .resident-panel .top .pdts .slip-empty {
    border: 1px dashed var(--icons);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    width: 5rem;
    height: 4.625rem;
    color: var(--placeholder);
    border-radius: 0.375rem;
}

.resident-panel .top .alese-slip-text {
    font-size: .75rem;
    inline-size: 2.5rem;
    overflow: hidden;
    white-space: pre-line;
    text-align: center;
    margin: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100%;
}

.resident-panel .top .pdts .slip {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0;
    isolation: isolate;
    width: 5rem;
    height: 4.625rem;
    border: 1px dashed var(--icons);
    border-radius: 0.375rem;
    position: relative;
}

.resident-panel .top .pdts .slip.picto {
    border: none;
}

.resident-panel .top .pdts .menu-resident {
    height: 3.75rem;
    background-color: var(--bgcolor);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border: none;
    padding: 0 !important;
}

.resident-panel .top .pdts .menu-resident > i {
    color: #26baa4;
    font-size: 1.125rem;
}

.resident-panel .top .pdts .menu-resident * .k-menu-expand-arrow {
    display: none;
}

.resident-panel .top .pdts .menu-resident * .k-menu-link {
    gap: 0;
}

.resident-panel .top .pdts .menu-resident * .k-menu {
    background-color: red !important;
}

.resident-panel .abs-drop-panel {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
}

.resident-panel .dispositif-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-grow: 1;
    gap: .5rem;
    padding: 0 .625rem 0 0.75rem;
    width: 100%;
}

.resident-panel .dispositif-container .dispositifs {
    display: flex;
    align-items: center;
    justify-content: left;
    align-self: flex-start;
    flex-direction: row;
    gap: 0.625rem;
    flex-grow: 1;
    height: 100%;
}

.resident-panel .dispositif-container .dispositifs .dispositif-chip.two-chips > .k-chip {
    max-width: 10rem;
}


.resident-panel .dispositif-container .show-more {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-size: 0.75rem;
    color: var(--abs-light-purple);
    cursor: pointer;
    flex-shrink: 0;
}

.resident-panel .dispositif-container .add-more {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.resident-panel .dispositif-container .add-more .add-more-icon {
    color: var(--secondary);
}

.resident-panel .dispositif-container .reco-container {
    width: 1.5rem;
    height: 100%;
    align-self: flex-end;
    justify-content: center;
    align-items: center;
    display: flex;
    align-items: center;
}

.resident-panel .dispositif-container .reco-container .reco {
    width: 1.5rem;
    height: 1.5rem;
    justify-content: center;
    display: flex;
    align-items: center;
    border-radius: 50%;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--white);
    background-color: #DB504A;
}

.dispositifs-in-panel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: left;
    align-items: flex-start;
    align-self: flex-start;
    flex-direction: row;
    gap: 0.625rem;
    flex-grow: 1;
    height: 6.25rem;
}

.dispositifs-in-panel .dispositif-chip {
    background-color: #EFF2FB;
}

.resident-panel .k-chip-solid-base {
    background-color: #EFF2FB;
}

.reco-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-height: 40rem;
    overflow-y: auto;
}

.reco-list .reco-container {
    border-bottom: 1.5px solid var(--borders);
    padding: 0.9375rem;
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
}

.reco-list .reco-container .reco-titre h5 {
    color: var(--secondary);
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.reco-list .reco-container .reco-tranche-commentaire {
    height: 1.5rem;
}


.reco-list .reco-container .reco-tranche-horaire {
    height: 1.5rem;
}

.reco-list .reco-container .reco-tranche-horaire span {
    font-size: 0.75rem;
    color: #262B32;
}

.reco-list .reco-container .reco-produit {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.9375rem;
    margin-top: 0.5rem;
}

.reco-list .reco-container .reco-produit .reco-image {
}

.reco-list .reco-container .reco-produit .reco-bouton-essayer {
}

.reco-list .reco-container .reco-produit .reco-acceptation {
}

.reco-list .reco-container .reco-produit .reco-acceptation p {
    font-size: 0.875rem;
    color: #46505D;
}


.resident-edit {
    height: 100%;
    display: flex;
    gap: 1.25rem;
    padding: 0 0.5rem;
    flex-direction: column;
}

.resident-edit .label {
    font-size: 0.75rem;
}

.resident-edit .genre {
    width: 40%;
}

.resident-edit .prenom-nom {
    height: 5.9375rem;
    display: flex;
    gap: 1.25rem;
    flex-direction: row;
}

.resident-edit .prenom-nom .prenom {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
}

.resident-edit .prenom-nom .nom {
    display: flex;
    width: 50%;
    flex-direction: column;
    gap: 0.3125rem;
}


.resident-edit .naissance-poids-taille {
    height: 5rem;
    display: flex;
    gap: 1.25rem;
    flex-direction: row;
}

.resident-edit .naissance-poids-taille .naissance {
    width: 33%;
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
}

.resident-edit .naissance-poids-taille .poids {
    display: flex;
    width: 33%;
    flex-direction: column;
    gap: 0.3125rem;
}

.resident-edit .naissance-poids-taille .taille {
    display: flex;
    width: 33%;
    flex-direction: column;
    gap: 0.3125rem;
}

.resident-edit .ligne-directe-protection {
    height: 5rem;
    display: flex;
    gap: 1.25rem;
    flex-direction: row;
}

.resident-edit .ligne-directe-protection .ligne-directe {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
}

.resident-edit .ligne-directe-protection .protection {
    display: flex;
    width: 50%;
    flex-direction: column;
    gap: 0.3125rem;
}


.resident-edit .section-groupe-room {
    height: 5rem;
    display: flex;
    gap: 1.25rem;
    flex-direction: row;
}

.resident-edit .section-groupe-room .section {
    display: flex;
    width: 40%;
    flex-direction: column;
    gap: 0.3125rem;
}

.resident-edit .section-groupe-room .groupe {
    display: flex;
    width: 40%;
    flex-direction: column;
    gap: 0.3125rem;
}

.resident-edit .section-groupe-room .room {
    display: flex;
    width: 20%;
    flex-direction: column;
    gap: 0.3125rem;
}

.resident-dropdown-panel {
    display: flex;
    flex-direction: row;
    justify-content: left;
    height: 3.125rem;
    width: 17.1875rem;
    align-items: center;
}

.resident-dropdown-panel .room-numero {
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0.25rem;
    background: transparent;
    border: none;
    color: inherit;
    font-size: 0.875rem;
    margin: 0 0.625rem;
    padding: 0;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Room dropdown options laid out as three columns: number | status dot | text.
   Scoped to the --rooms modifier so resident-only dropdowns (which reuse
   .resident-dropdown-panel WITHOUT a room number) are unaffected. The number
   column fits the longest number via the --rdp-num-w var set per dropdown, so
   the status dot and text line up across every option. The dot itself reuses
   the room-config dot classes (empty = grey .rooms-config-card__dot, occupied =
   yellow .rooms-config-card__dot--occupied). */
.resident-dropdown-panel--rooms .room-numero {
    width: calc(var(--rdp-num-w, 4ch) + 1.5rem);   /* longest number + bed icon (~20px) + gap (4px), no extra slack */
    margin: 0 0.25rem 0 0.625rem;                   /* tighten the gap between the number and the status dot */
    flex: 0 0 auto;
    white-space: nowrap;
    overflow: hidden;
}

.resident-dropdown-panel__status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
}

.resident-dropdown-panel--rooms .nom-section {
    flex: 1 1 auto;
    min-width: 0;
}

.resident-dropdown-panel .nom-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 0.625rem;
    align-items: left;
    font-size: 0.875rem;
}

.resident-dropdown-panel .nom-section .display-name {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: auto;
    max-width: 100%;
}

/* Section + bed-icon + bed-label sub-line. Forces single-line layout and
   shrinks the bed-cell back to content width — the default `.abena-v3-bed-cell`
   is `width: 100%` (designed for the room-grid column) which would otherwise
   wrap the icon under the section name. */
.resident-dropdown-panel__section-bed {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.2;
}

.resident-dropdown-panel__section-bed .abena-v3-bed-cell {
    width: auto;
    justify-content: flex-start;
    gap: 0.25rem;
}


.resident-edit .dependance {
    /*    height: 5rem;
    display: flex;
    gap: 1.25rem;
    flex-direction: column;*/
}

.resident-edit .dependance .gir {
    height: 5rem;
}


.resident-edit .note {

}

.resident-grid .resident-grid-action {
    display: inline-flex;
    border-radius: 0.375rem;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
}

.resident-grid .resident-grid-action.button-view {
    background-color: var(--abs-light-turquoise-bg);
}

.resident-grid .resident-grid-action.button-view i {
    padding-left: 0.25rem;
    color: var(--abs-light-turquoise);
}

.resident-grid .resident-grid-action.button-edit {
    background-color: var(--abs-light-purple-bg);
}

.resident-grid .resident-grid-action.button-edit i {
    padding-left: 0.125rem;
    color: var(--abs-light-purple);
}

.resident-grid .resident-grid-action.button-exit {
    background-color: var(--abs-light-green-bg);
}

.resident-grid .resident-grid-action.button-exit i {
    padding-left: 0.125rem;
    color: var(--abs-light-green);
}

.resident-grid .resident-grid-action.button-delete {
    background-color: var(--abs-light-red-bg);
}

.resident-grid .resident-grid-action.button-delete i {
    padding-left: 0.1875rem;
    color: var(--abs-light-red);
}

.resident-edit .note .k-input {
    height: unset;
}

.resident-edit .note textarea {
    height: 7.5rem;
    min-height: 7.5rem;
    resize: none;
}

.abena-v2-grid td.k-table-td.k-command-cell.k-grid-content-sticky > span {
    display: flex;
    gap: 0.5rem;
}

.abs-page:has(.resident-edit-page) {
    height: 100%;
}


.resident-edit-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
    height: 100%;
    overflow: hidden;
}

.resident-edit-layout {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
    gap: 1.9375rem;
}

.resident-edit-stepper-panel {
    flex-shrink: 0;
    padding-top: 1.125rem;
    padding-left: 2.0625rem;
}

.resident-edit-stepper-card {
    width: 17.125rem;
    height: 22.625rem;
    background: #FFFFFF;
    border: 1px solid #EFF1F4;
    box-shadow: 0px 2px 10px #EDF1FB;
    border-radius: 12px;
    padding: 1.5rem;
}

.resident-edit-stepper-card .k-step-label .k-step-text {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    max-width: unset;
}


.resident-edit-stepper-card .k-step,
.resident-edit-stepper-card .k-step-link {
    cursor: pointer;
}

.resident-edit-stepper-card .k-step:hover .k-step-indicator {
    background-color: var(--kendo-color-info, #0c65e9);
    border-color: var(--kendo-color-info, #0c65e9);
    color: white;
    box-shadow: none;
}

.resident-edit-stepper-card .k-step-label .k-step-text {
    font-weight: 400;
}

.resident-edit-stepper-card .k-step-done .k-step-indicator {
    background-color: var(--kendo-color-info, #0c65e9);
    border-color: var(--kendo-color-info, #0c65e9);
    color: white;
}


.resident-edit-stepper-card .k-step-done .k-step-label .k-step-text {
    font-weight: 500;
}

.resident-edit-stepper-card .k-step-current .k-step-indicator {
    background-color: var(--kendo-color-info, #0c65e9);
    border-color: var(--kendo-color-info, #0c65e9);
    color: white;
}

.resident-edit-stepper-card .k-step-current .k-step-label .k-step-text {
    color: var(--kendo-color-info, #0c65e9);
    font-weight: 500;
}

.resident-edit-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 2rem;
}


.resident-edit-page .abena-v2-small:not(.default) {
    color: var(--abena-v2-blue-modal-header);
}

.resident-edit-page form {
    padding-right: 2rem;
    margin-top: 1.125rem;
    gap: 0.8125rem;
}

.resident-edit-page .abena-v2-form-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: #FFFFFF;
    border: 1px solid #EFF1F4;
    box-shadow: 0px 2px 10px #EDF1FB;
    border-radius: 12px;
    padding: 24px;
}

.resident-view-modal .group-title {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    font-family: Gilroy-Bold;
    font-size: 1.5rem;
    margin-bottom: 0.9375rem;
}

.resident-edit-page .group-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: #0D1740;
    margin-bottom: 0.5rem;
}

.placement-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}

.placement-left {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 27rem;
}

.placement-left .group-title {
    margin-bottom: 0.5rem;
}

.placement-right {
    display: flex;
    align-items: flex-start;
}

.placement-room-summary {
    width: 31.69rem;
    height: 5.625rem;
}

.placement-room-summary__breadcrumb {
    font-size: 0.75rem;
    color: var(--sn-text-muted);
    padding: 0.25rem 0.75rem 0;
}

.gender-selector {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.gender-selector .abena-v3-btn--outline.abena-v3-btn--secondary {
    border-color: #DFE3E8;
    color: #3D3D3D;
    font-weight: 400;
}

.gender-selector .abena-v3-btn--outline.abena-v3-btn--info {
    background: #E9F0FD;
    font-weight: 400;
}

.step-number {
    display: flex;
    width: 2rem;
    height: 2rem;
    border-radius: 100%;
    background-color: var(--abena-v2-blue-modal-header);
    justify-content: center;
    align-items: center;
    color: var(--white);
    font-family: Gilroy-Bold;
    font-size: 0.875rem;
    line-height: 1;
}

.gir-wrapper {
    display: flex;
    gap: 0.5rem;
}

.gir-wrapper .gir-item {
    width: 15.3125rem;
    height: 8.5rem;
    border: 0.125rem solid #D1D5DC;
    border-radius: 0.625rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    background-color: var(--white);
    padding-top: 1.125rem;
    cursor: pointer;
    flex-grow: 1;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.gir-item .gir-level {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 100%;
    border: 0.125rem solid;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Gilroy-Bold;
    font-size: 1rem;
}

.gir-item-1 .gir-level {
    border-color: var(--gir-level-1-border);
    color: var(--gir-level-1-color);
    background-color: var(--gir-level-1-bg);
}

.gir-item-2 .gir-level {
    border-color: var(--gir-level-2-border);
    color: var(--gir-level-2-color);
    background-color: var(--gir-level-2-bg);
}

.gir-item-3 .gir-level {
    border-color: var(--gir-level-3-border);
    color: var(--gir-level-3-color);
    background-color: var(--gir-level-3-bg);
}

.gir-item-4 .gir-level {
    border-color: var(--gir-level-4-border);
    color: var(--gir-level-4-color);
    background-color: var(--gir-level-4-bg);
}

.gir-item-5 .gir-level {
    border-color: var(--gir-level-5-border);
    color: var(--gir-level-5-color);
    background-color: var(--gir-level-5-bg);
}

.gir-item-6 .gir-level {
    border-color: var(--gir-level-6-border);
    color: var(--gir-level-6-color);
    background-color: var(--gir-level-6-bg);
}

.gir-wrapper .gir-item .gir-radio {
    width: 1rem;
    height: 1rem;
    border: 0.125rem solid var(--primary);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
}

.gir-wrapper .gir-item .gir-label {
    text-align: center;
}

.gir-wrapper .gir-item .gir-label.gir-light-label {
    text-align: center;
    font-weight: lighter;
    font-size: 0.75rem;
}

.gir-wrapper .gir-item.checked .gir-radio > div {
    width: 0.5rem;
    height: 0.5rem;
    background-color: var(--primary);
    border-radius: 100%;
}


.gir-item-0-wrapper {
    border-radius: 0.625rem;
    border: 0.125rem solid #D1D5DC;
    background-color: #F9FAFB;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.875rem;
    font-family: Gilroy;
    font-weight: 300;
    font-size: 0.875rem;
    color: #1E2939;
}


.gir-item-0-wrapper > .checkbox-labels {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    gap: 0.5rem;
}


.gir-item-0-wrapper .checkbox-labels .subtitle {
    font-size: 0.75rem;
    color: #6A7282;
}

.gir-item-0-wrapper * {
    cursor: pointer;
}

.gir-item-0-wrapper:has(input:checked) {
    pointer-events: none;
}

.gir-item-0-wrapper div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.resident-edit-page .bottom-bar {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 7.1875rem;
    margin-top: 1.0625rem;
}

.resident-edit-page .note-textarea textarea,
.resident-edit-page .note-textarea .k-textarea {
    max-height: unset;
    height: 100% !important;
    overflow-y: auto !important;
}

.resident-view-modal .k-window-titlebar {
    background-color: var(--abena-v2-blue-modal-header);
    color: var(--white);
    padding: 1.75rem 2.5rem 1.5rem !important;
}

.resident-view-modal {
    background-color: transparent;
    border: none;
}

.resident-view-modal .inner-content {
    background-color: var(--form-section-bg);
    padding: 2rem !important;
    max-height: calc(100vh - 18rem) !important;
}

.resident-view-modal .k-window-content {
    background-color: white;    
    padding: 0 !important;
    gap: 0 !important;
}

.resident-view-modal .white-section {
    background-color: white;
    border-radius: 0.75rem;
    padding: 1.5rem 1.5rem 1.25rem;
}

.resident-view-modal .white-section:has(.tranche-wrapper) {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
}

.resident-view-modal .k-window-title {
    font-size: 2rem !important;
    line-height: 1 !important;
}

.resident-view-modal .abs-window-subtitle {
    font-size: 0.875rem !important;
    color: #B8D4E8;
    line-height: 1 !important;
    margin-top: 0.25rem !important;
}

.resident-view-modal .info-element .info-title {
    font-size: 0.75rem;
    font-family: Gilroy-Medium;
    color: #6A7282;
}
.resident-view-modal .info-element .info-value {
    font-size: 0.875rem;
    font-family: Gilroy-Medium;
    color: #1E2939;
}

.resident-view-modal .group-title {
    font-size: 1.125rem;
    font-family: Gilroy-Bold;
    color: var(--abena-v2-blue-modal-header);
}

.resident-view-modal .step-number {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.75rem;
}

.resident-view-modal .gir-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.resident-view-modal .gir-name {
    font-size: 0.875rem;
    font-family: Gilroy-Medium;
    color: #1E2939;
}
.resident-view-modal .note-content {
    border-radius: 0.5rem;
    background-color: #F9FAFB;
    border: 1px solid #E5E7EB;
    color: #1E2939;
    font-size: 0.875rem;
    font-family: Gilroy;
    font-weight: 300;
    line-height: 1.5;
    height: 4.625rem;
    overflow-y: auto;
    padding: 0.75rem;
    white-space: break-spaces;
}

.resident-view-modal .dotation-label{
    font-size: 0.8125rem;
    font-family: Gilroy-Bold;
    color: var(--abena-v2-blue-modal-header);
}

.resident-view-modal .tranche-wrapper {
    width: 6rem;
    display: flex;
    flex-direction: column;
}
.resident-view-modal .tranche-wrapper .tranche-label {
    text-align: center;
    text-transform: uppercase;
    font-family: Gilroy-Bold;
    color: var(--abena-v2-blue-modal-header);
    font-size: 0.75rem;
    flex-grow: 1;
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    align-items: end;
}
.resident-view-modal .tranche-wrapper .tranche-content:not(:has(img)) {
    border-radius: 0.375rem;
    border: 1px solid var(--abena-v2-border-default-color);
    background: #F9FAFB;
    height: 7.875rem;
}

.resident-view-modal .tranche-wrapper .tranche-content:has(img) {
    cursor: pointer;
}

.resident-view-modal .tranche-wrapper .tranche-content .picto-container,
.resident-view-modal .tranche-wrapper .tranche-content .picto-container .picto-image{
    height: 8rem;
    max-height: 8rem;
    width: 6rem;
}

.resident-view-modal .tranche-wrapper .tranche-quantity {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.resident-view-modal .tranche-wrapper .tranche-quantity > div {
    border-radius: 0.75rem;
    background: var(--abena-v2-blue-modal-header);
    color: var(--white);
    font-size: 0.75rem;
    line-height: 0.75;
    padding: 0.375rem 0.8125rem;
}
.resident-view-tranche-modal {
    border-radius: 0.75rem;
}

.resident-view-tranche-modal .k-window-titlebar{
    display: none;
}

.resident-view-tranche-modal .k-window-content {
    padding: 0 !important;
}
.resident-view-tranche-modal .k-window-content .inner-content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem 0.75rem 1rem;
    align-items: center;
}

.resident-view-tranche-modal .k-window-content .inner-content .close-button{
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: #6A7282;
    cursor: pointer;
}

.resident-view-tranche-modal .k-window-content .inner-content .picto-container,
.resident-view-tranche-modal .k-window-content .inner-content .picto-container .picto-image{
    height: 8.75rem;
    max-height: 8.75rem;
    width: 6.5625rem;
}

.resident-view-tranche-modal .k-window-content .inner-content .article-name {
    color: #1E2939;
    text-align: center;
    font-family: Gilroy-Bold;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25;
    margin-top: 0.3125rem;
    word-break: break-word;
}

.resident-view-tranche-modal .k-window-content .inner-content .article-ref {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    font-size: 0.8125rem;
    line-height: 1;
}

.resident-view-tranche-modal .k-window-content .inner-content .article-ref .label{
    color: #6A7282;
    font-family: Gilroy-Medium;
    font-style: normal;
    font-weight: 400;
}
.resident-view-tranche-modal .k-window-content .inner-content .article-ref .value{
    color: var(--abena-v2-blue-modal-header);
    text-align: center;
    font-family: Gilroy-Bold;
    font-style: normal;
    font-weight: 400;
}

.resident-view-tranche-modal .buttons {
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.resident-view-tranche-modal .buttons i {
    cursor: pointer;
    color: var(--abena-v2-blue-modal-header);
    font-size: 1.25rem;
}



.resident-action-notification {
    top: 7rem !important;
    right: 3rem !important;
}

.resident-action-notification .k-notification-container {
    border-radius: var(--abena-v2-default-border-radius);
    box-shadow: 0px 2px 8px 0px rgba(49, 55, 116, 0.25);
}

.resident-action-notification .k-notification-content {
    width: 16rem;
}
.resident-action-notification .k-notification {
    padding: 0 !important;
    background-color: transparent;
    border: none;
}
.resident-action-notification .notification-title {
    font-family: Gilroy-Bold;
    padding: 0.375rem 0.5rem 0.125rem;
    background-color: var(--abs-light-green) !important;
    color: white;
    border-top-left-radius: var(--abena-v2-default-border-radius);
    border-top-right-radius: var(--abena-v2-default-border-radius);
}
.resident-action-notification .notification-message {
    font-family: Gilroy-Bold;
    padding: 0.75rem 0.5rem;
    background-color: var(--grid-header-bg) !important;
    color: black;
    border-bottom-left-radius: var(--abena-v2-default-border-radius);
    border-bottom-right-radius: var(--abena-v2-default-border-radius);
}
/* ---------- ResidentViewPage — Placement card "Lit" cell ----------
   Bed icon + room label + group chip inline. Specific to the placement
   section of the resident view page. */
.resident-placement-bed {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.resident-placement-bed__icon {
    color: var(--sn-text-muted);
    font-size: 0.875rem;
}

.resident-action-notification .k-notification-actions {
    position: absolute;
    top: 0.375rem;
    right: 0.5rem;
    color: white;
}

/* ---------- Resident view page — two-column layout (read-only + edit) --------- */
.abs-page:has(.resident-view-page) {
    padding-left: 0.5rem !important;
    margin-left: 0.375rem;
    height: 100%;
}

.resident-view-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--kendo-color-app-surface);
}


.resident-view-page__header {
    box-sizing: border-box;
    height: 78px;                 /* match the global top bar height (var(--top-bar-height)),
                                     which is forced to 0 on these no-topbar screens */
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: #FFFFFF;
    border-bottom: 1px solid var(--sn-border);
    flex-shrink: 0;
}

.resident-view-page__back {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--sn-border);
    color: var(--abena-color-page-title);
    cursor: pointer;
    transition: background-color 150ms ease;
}

.resident-view-page__back:hover {
    background: var(--sn-rail);
}

.resident-view-page__back:focus-visible {
    outline: 0.125rem solid var(--abena-color-action-blue);
    outline-offset: 0.125rem;
}

.resident-view-page__back i {
    font-size: 0.875rem;
}

.resident-view-page__titles {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    flex: 1;
}

.resident-view-page__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.resident-view-page__body {
    flex: 1;
    display: flex;
    gap: 0;
    padding: 0;
    overflow-y: auto;
    align-items: stretch;
}

.resident-view-page__sidebar {
    width: 22rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 1.5rem 1rem 1.75rem;
    border-right: 1px solid var(--sn-border);
}

.resident-view-page__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 1.25rem 0 2rem;
    background-color: var(--sn-surface-subtle);
}

.resident-view-page__top-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
}

/* ---------- Dotations row (tranches stretched across the card) ----------
   Uses CSS Grid with three implicit row tracks (label / box / quantity)
   and a subgrid on each .abena-v3-tranche so that *all* labels share the
   same height (= the tallest label), and the boxes stay vertically
   aligned across columns regardless of label length. */
.resident-view-page__dotations {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 0.25rem;
    row-gap: 0;
    justify-items: center;
    align-items: start;
}

/* ---------- Export trigger inside the resident view-page header ---------- */
.resident-view-page__export.k-menu.k-menu-horizontal {
    box-sizing: border-box;
    padding: 0;
    height: auto;
    width: auto;
    background: transparent;
    border: none;
    border-radius: 0;
}

.resident-view-page__export.k-menu > .k-menu-item {
    width: 8rem;
    height: 2.625rem;
    padding: 0 !important;
    background: #FFFFFF;
    border: 1px solid var(--abena-color-action-blue);
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 150ms ease;
    
    display: grid !important;
    place-items: center !important;
}

.resident-view-page__export.k-menu > .k-menu-item:hover,
.resident-view-page__export.k-menu > .k-menu-item.k-hover {
    background: var(--abena-color-action-blue-soft);
}

.resident-view-page__export.k-menu .k-link.k-menu-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important;
    padding: 0.5rem !important;
    color: var(--abena-color-action-blue);
}

/* Leading upload icon (fa-arrow-up-from-bracket, solid) */
.resident-view-page__export.k-menu > .k-menu-item > .k-menu-link::before {
    content: "\e09a";
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-size: 0.875rem;
    width: 0.875rem;
    color: var(--abena-color-action-blue);
    text-align: center;
}

.resident-view-page__export.k-menu > .k-menu-item > .k-menu-link > .k-menu-link-text {
    font-family: 'Roboto', var(--kendo-font-family);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.42;
    color: var(--abena-color-action-blue);
    margin: 0;
}

/* Hide the Telerik dropdown arrow */
.resident-view-page__export.k-menu > .k-menu-item > .k-menu-link > .k-menu-expand-arrow {
    display: none;
}

/* ===== Resident view — responsive rearrangement below 1101px (ABENA-1525) =====
   Stack the left part (identity + info) ABOVE the right part (care content), and lay the
   left part out as a compact horizontal band instead of a tall column. */
@media (max-width: 1100px) {
    .resident-view-page__body {
        flex-direction: column;
        overflow-x: hidden;        /* no page-level horizontal scroll */
    }

    /* Left part full width, on top; identity card beside the info group, both wrapping. */
    .resident-view-page__sidebar {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 1rem 1.5rem;
    }
    .resident-view-page__sidebar > .abena-v3-identity-card {
        flex: 1 1 18rem;
    }
    .resident-view-page__sidebar > .abena-v3-info-stack {
        flex: 100 1 28rem;         /* takes the remaining width next to the identity card */
    }

    /* The info sections (physiques / santé / incontinence / élimination) sit side by side
       and wrap, rather than stacking; the horizontal dividers are dropped in row layout.
       Scoped under __sidebar to outrank the base `.abena-v3-info-stack` (same specificity,
       defined later in Abena-v3.css). */
    .resident-view-page__sidebar .abena-v3-info-stack {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem 1.5rem;
    }
    .resident-view-page__sidebar .abena-v3-info-stack__section {
        flex: 1 1 12rem;
        min-width: 0;
    }
    .resident-view-page__sidebar .abena-v3-info-stack__divider {
        display: none;
    }

    .resident-view-page__main {
        width: 100%;
    }
}

/* ===== Assign Room Slide Panel ===== */

.assign-panel__form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.assign-panel__field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.assign-panel__label {
    font-size: 0.875rem;
    font-weight: 400;
    color: #4F4F4F;
    line-height: 1.42;
}

.assign-panel__req {
    color: #BB4841;
    margin-left: 0.125rem;
}

.assign-panel__col {
    display: flex;
    flex-direction: column;
}

.assign-panel__sublabel {
    font-size: 0.8125rem;
    color: #565D79;
    line-height: 1.42;
    margin-bottom: 0.25rem;
}

.assign-panel__sublabel-opt {
    font-style: italic;
    color: #E0E0E0;
}

.assign-section-item {
    display: flex;
    align-items: center;
}

.assign-section-item__indent {
    width: 0.9375rem;
    flex-shrink: 0;
}

.assign-panel__divider {
    height: 0.0625rem;
    background: #DFE3E8;
}

.assign-resident-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border: 0.0625rem solid #DFE3E8;
    border-radius: 0.5rem;
    background: #F8F9FB;
}

.assign-resident-card__avatar {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    background: #0044C2;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.125rem solid #E0E0E0;
}

.assign-resident-card__name {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0D1740;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assign-room-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.375rem, 1fr));
    gap: 0.75rem;
}

.assign-room-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    min-height: 7.25rem;
    padding: 0.75rem;
    text-align: center;
    border: 0.0625rem solid rgba(0, 0, 0, 0.08);
    border-radius: 0.75rem;
    background: #fff;
    color: #0D1740;
    cursor: pointer;
    transition: border-color 0.12s, box-shadow 0.12s;
}

.assign-room-card:hover:not(.is-full) {
    border-color: #0044C2;
    box-shadow: 0 0.125rem 0.625rem 0 #EDF1FB;
}

.assign-room-card.selected {
    border-color: #0044C2;
    box-shadow: inset 0 0 0 0.0625rem #0044C2;
}

.assign-room-card.is-full {
    cursor: not-allowed;
    opacity: 0.55;
}

.assign-room-card__num {
    font-weight: 700;
    font-size: 1rem;
    color: #0D1740;
}

.assign-room-card__pastille {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.assign-room-card__dots {
    display: flex;
    gap: 0.1875rem;
}

.assign-room-card__dot {
    width: 0.6875rem;
    height: 0.6875rem;
    border-radius: 9999px;
    box-sizing: border-box;
    background: #EFF1F4;
    border: 0.125rem solid #DFE3E8;
}

.assign-room-card__dot.is-occupied {
    background: #FFD040;
    border-color: #BF9000;
}

.assign-room-card__ratio {
    font-size: 0.8125rem;
    color: #3D3D3D;
}

.assign-bed-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.assign-bed-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.5rem;
    padding: 0 0.875rem;
    border: 0.0625rem solid #DFE3E8;
    border-radius: 0.5rem;
    background: #fff;
    font-size: 0.875rem;
    color: #0D1740;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.assign-bed-btn__icon {
    color: #565D79;
    display: inline-flex;
}

.assign-bed-btn:hover:not(.taken) {
    border-color: #0044C2;
}

.assign-bed-btn.selected {
    border-color: #0044C2;
    background: rgba(0, 68, 194, 0.07);
    color: #0044C2;
}

.assign-bed-btn.selected .assign-bed-btn__icon {
    color: #0044C2;
}

.assign-bed-btn.taken {
    cursor: not-allowed;
    background: #F8F9FB;
    color: #3D3D3D;
    border-style: dashed;
}

.assign-bed-btn__taken-tag {
    font-size: 0.75rem;
    color: #BB4841;
    font-style: italic;
}

.assign-msg {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem 0.875rem;
    border-radius: 0.5rem;
    background: #F2F8FE;
    border: 0.0625rem solid #6FC4F0;
}

.assign-msg__top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #023F5C;
}

.assign-msg__top i {
    font-size: 0.9375rem;
}

.assign-msg__val {
    font-weight: 700;
    font-size: 0.875rem;
    color: #023F5C;
    padding-left: 1.4375rem;
}

.assign-panel__submit {
    width: 100%;
    height: 2.75rem;
    margin-top: 0.25rem;
    background: #0044C2;
    color: #fff;
    border: none;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s;
}

.assign-panel__submit:hover:not(:disabled) {
    background: #0535CE;
}

.assign-panel__submit:disabled {
    background: #DFE3E8;
    cursor: not-allowed;
}

.assign-panel__form .k-dropdownlist.k-picker-outline {
    height: 2.375rem;
    border-radius: 0.5rem;
    border: 0.0625rem solid #DFE3E8 !important;
    background: #fff;
    box-shadow: none;
}

.assign-panel__form .k-dropdownlist .k-input-inner {
    padding: 0 0.75rem;
    font-size: 0.875rem;
    color: #0D1740;
}

.assign-panel__form .k-dropdownlist .k-input-button,
.assign-panel__form .k-dropdownlist .k-button-icon {
    color: #565D79;
}

.assign-panel__form .k-dropdownlist.k-picker-outline.k-focus {
    border-color: #0044C2 !important;
    box-shadow: 0 0 0 0.1875rem rgba(0, 68, 194, 0.14);
}