/* ---------- Design tokens — Light theme (default) ---------- */

:root {
    /* Typography — font sizes */
    --kendo-font-family: "Roboto", "Rounded Mplus 1c", system-ui, sans-serif;
    /* RR2 redesign typography (ABENA-1445). "Roboto" resolves to system Roboto when
       installed; "AbenaRoboto" is the bundled webfont fallback (see Abena-fonts.css).
       Only the RR2 redesigned surfaces opt into this variable via the ancestor rule
       below — the rest of the app keeps Gilroy via --primary-font in Abena-main.css. */
    --abena-v3-font: "Roboto", "AbenaRoboto", var(--kendo-font-family);
    --kendo-font-size: 0.875rem; /* 14px */
    --kendo-font-size-xs: 0.625rem; /* 10px */
    --kendo-font-size-sm: 0.75rem; /* 12px */
    --kendo-font-size-md: var(--kendo-font-size);
    --kendo-font-size-lg: 1rem; /* 16px */
    --kendo-font-size-lg2: 1.125rem; /* 18px */
    --kendo-font-size-xl: 1.25rem; /* 20px */

    /* Typography — line heights (unit-less ratios) */
    --kendo-line-height: 1.4285714286;
    --kendo-line-height-xs: 1;
    --kendo-line-height-sm: 1.25;
    --kendo-line-height-md: var(--kendo-line-height);
    --kendo-line-height-lg: 1.5;

    /* Typography — font weights */
    --kendo-font-weight-light: 300;
    --kendo-font-weight-normal: 400;
    --kendo-font-weight-medium: 500;
    --kendo-font-weight-semibold: 600;
    --kendo-font-weight-bold: 700;

    --kendo-letter-spacing: normal;

    /* Display scales */
    --kendo-display1-font-size: 7rem; /* 112px (md * 8) */
    --kendo-display1-line-height: 1.2; /* ~134px */
    --kendo-display1-font-weight: var(--kendo-font-weight-light);

    --kendo-display2-font-size: 5.25rem; /* 84px (md * 6) */
    --kendo-display2-line-height: 1.2; /* ~101px */
    --kendo-display2-font-weight: var(--kendo-font-weight-light);

    /* Headings */
    --kendo-h1-font-size: 3.5rem; /* 56px */
    --kendo-h1-line-height: 1.33; /* ~74px */
    --kendo-h1-font-weight: var(--kendo-font-weight-normal);

    --kendo-h2-font-size: 2.625rem; /* 42px */
    --kendo-h2-line-height: 1.33; /* ~56px */
    --kendo-h2-font-weight: var(--kendo-font-weight-normal);

    --kendo-h3-font-size: 2.1875rem; /* 35px */
    --kendo-h3-line-height: 1.2; /* ~42px */
    --kendo-h3-font-weight: var(--kendo-font-weight-normal);

    --kendo-h4-font-size: 1.75rem; /* 28px */
    --kendo-h4-line-height: 1.42; /* ~40px */
    --kendo-h4-font-weight: var(--kendo-font-weight-bold);

    --kendo-h5-font-size: 1.3125rem; /* 21px */
    --kendo-h5-line-height: 1.33; /* ~28px */
    --kendo-h5-font-weight: var(--kendo-font-weight-bold);

    --kendo-h6-font-size: var(--kendo-font-size-md);
    --kendo-h6-line-height: 1.42; /* ~20px */
    --kendo-h6-font-weight: var(--kendo-font-weight-bold);

    /* Paragraph sizes */
    --kendo-paragraph-font-weight: var(--kendo-font-weight-normal);
    --kendo-paragraph-xs-font-size: var(--kendo-font-size-xs);
    --kendo-paragraph-xs-line-height: 1.6; /* ~16px */
    --kendo-paragraph-sm-font-size: var(--kendo-font-size-sm);
    --kendo-paragraph-sm-line-height: 1.5; /* ~18px */
    --kendo-paragraph-md-font-size: var(--kendo-font-size-md);
    --kendo-paragraph-md-line-height: 1.42; /* ~20px */
    --kendo-paragraph-lg-font-size: var(--kendo-font-size-lg);
    --kendo-paragraph-lg-line-height: 1.5; /* ~24px */
    --kendo-paragraph-xl-font-size: var(--kendo-font-size-xl);
    --kendo-paragraph-xl-line-height: 1.5; /* ~30px */

    /* Elevation — two-layer shadows */
    --kendo-elevation-1: 0 0.125rem 0.1875rem 0 rgba(0, 0, 0, 0.04), 0 0.25rem 1rem 0 rgba(0, 0, 0, 0.12);
    --kendo-elevation-2: 0 0.25rem 0.375rem 0 rgba(0, 0, 0, 0.06), 0 0.25rem 1rem 0 rgba(0, 0, 0, 0.12);
    --kendo-elevation-3: 0 0.375rem 0.5rem 0 rgba(0, 0, 0, 0.08), 0 0.25rem 1rem 0 rgba(0, 0, 0, 0.12);
    --kendo-elevation-4: 0 0.5rem 0.625rem 0 rgba(0, 0, 0, 0.12), 0 0.25rem 1rem 0 rgba(0, 0, 0, 0.12);
    --kendo-elevation-5: 0 0.625rem 0.75rem 0 rgba(0, 0, 0, 0.16), 0 0.25rem 1rem 0 rgba(0, 0, 0, 0.12);
    --kendo-elevation-6: 0 0.75rem 0.875rem 0 rgba(0, 0, 0, 0.20), 0 0.25rem 1rem 0 rgba(0, 0, 0, 0.12);
    --kendo-elevation-7: 0 0.875rem 1rem 0 rgba(0, 0, 0, 0.24), 0 0.25rem 1rem 0 rgba(0, 0, 0, 0.12);
    --kendo-elevation-8: 0 1rem 1.125rem 0 rgba(0, 0, 0, 0.28), 0 0.25rem 1rem 0 rgba(0, 0, 0, 0.12);
    --kendo-elevation-9: 0 1.125rem 1.25rem 0 rgba(0, 0, 0, 0.32), 0 0.25rem 1rem 0 rgba(0, 0, 0, 0.12);

    /* Borders */
    --kendo-color-border: rgba(0, 0, 0, 0.08);
    --kendo-color-border-alt: rgba(0, 0, 0, 0.16);

    /* Surfaces */
    --kendo-color-app-surface: #FFFFFF;
    --kendo-color-on-app-surface: #3D3D3D;
    --kendo-color-surface: #FAFAFA;
    --kendo-color-surface-alt: #FFFFFF;
    --kendo-color-subtle: #666666;

    /* Base (neutral) */
    --kendo-color-base: #F5F5F5;
    --kendo-color-base-hover: #EBEBEB;
    --kendo-color-base-active: #D6D6D6;
    --kendo-color-base-subtle: #EBEBEB;
    --kendo-color-base-subtle-hover: #E0E0E0;
    --kendo-color-base-subtle-active: #D6D6D6;
    --kendo-color-base-emphasis: #C2C2C2;
    --kendo-color-base-on-surface: #3D3D3D;
    --kendo-color-on-base: #3D3D3D;

    /* Light (neutral lightest) */
    --kendo-color-light: #EBEBEB;
    --kendo-color-light-hover: #E0E0E0;
    --kendo-color-light-active: #D6D6D6;
    --kendo-color-light-subtle: #FAFAFA;
    --kendo-color-light-subtle-hover: #F5F5F5;
    --kendo-color-light-subtle-active: #EBEBEB;
    --kendo-color-light-emphasis: #D6D6D6;
    --kendo-color-light-on-subtle: #141414;
    --kendo-color-on-light: #000000;

    /* Dark (neutral darkest) */
    --kendo-color-dark: #3D3D3D;
    --kendo-color-dark-hover: #292929;
    --kendo-color-dark-active: #1F1F1F;
    --kendo-color-dark-subtle: #C2C2C2;
    --kendo-color-dark-subtle-hover: #ADADAD;
    --kendo-color-dark-subtle-active: #999999;
    --kendo-color-dark-emphasis: #666666;
    --kendo-color-dark-on-subtle: #1F1F1F;
    --kendo-color-dark-on-surface: #141414;
    --kendo-color-on-dark: #FFFFFF;

    /* Inverse */
    --kendo-color-inverse: #3D3D3D;
    --kendo-color-inverse-hover: #292929;
    --kendo-color-inverse-active: #1F1F1F;
    --kendo-color-inverse-subtle: #666666;
    --kendo-color-inverse-subtle-hover: #525252;
    --kendo-color-inverse-subtle-active: #3D3D3D;
    --kendo-color-inverse-emphasis: #999999;
    --kendo-color-inverse-on-subtle: #FFFFFF;
    --kendo-color-inverse-on-surface: #141414;
    --kendo-color-on-inverse: #FFFFFF;

    /* Primary (coral) */
    --kendo-color-primary: #FF6358;
    --kendo-color-primary-hover: #EA5A51;
    --kendo-color-primary-subtle: #FFECEB;
    --kendo-color-primary-subtle-hover: #FFDEDB;
    --kendo-color-primary-subtle-active: #FFC8C4;
    --kendo-color-primary-emphasis: #FF9D97;
    --kendo-color-primary-on-subtle: #5C201C;
    --kendo-color-primary-on-surface-emphasis: #FF6358;
    --kendo-color-on-primary: #FFFFFF;

    /* Secondary (neutral) */
    --kendo-color-secondary: #666666;
    --kendo-color-secondary-hover: #525252;
    --kendo-color-secondary-active: #3D3D3D;
    --kendo-color-secondary-subtle: #FAFAFA;
    --kendo-color-secondary-subtle-hover: #F5F5F5;
    --kendo-color-secondary-subtle-active: #EBEBEB;
    --kendo-color-secondary-emphasis: #E0E0E0;
    --kendo-color-secondary-on-surface: #292929;
    --kendo-color-secondary-on-subtle: #141414;
    --kendo-color-on-secondary: #FFFFFF;

    /* Tertiary (sky blue) */
    --kendo-color-tertiary: #03A9F4;
    --kendo-color-tertiary-hover: #039AE0;
    --kendo-color-tertiary-active: #028CCB;
    --kendo-color-tertiary-subtle: #D8F1FD;
    --kendo-color-tertiary-subtle-hover: #C5EAFC;
    --kendo-color-tertiary-subtle-active: #A3DFFB;
    --kendo-color-tertiary-emphasis: #61C9F9;
    --kendo-color-tertiary-on-subtle: #023F5C;
    --kendo-color-tertiary-on-surface: #028CCB;
    --kendo-color-on-tertiary-content: #FFFFFF;

    /* Info (blue) */
    --kendo-color-info: #0058E9;
    --kendo-color-info-hover: #0052D6;
    --kendo-color-info-active: #004AC2;
    --kendo-color-info-subtle: #D2E2FB;
    --kendo-color-info-subtle-hover: #BDD4F8;
    --kendo-color-info-subtle-active: #80ACF4;
    --kendo-color-info-emphasis: #6098F2;
    --kendo-color-info-on-subtle: #002259;
    --kendo-color-info-on-surface: #004AC2;
    --kendo-color-on-info: #FFFFFF;

    /* Success (green) */
    --kendo-color-success: #37B400;
    --kendo-color-success-hover: #32A500;
    --kendo-color-success-active: #2D9600;
    --kendo-color-success-subtle: #DCF0D3;
    --kendo-color-success-subtle-hover: #CBE9BF;
    --kendo-color-success-subtle-active: #B7E1A5;
    --kendo-color-success-emphasis: #81D15F;
    --kendo-color-success-on-subtle: #1C5A00;
    --kendo-color-success-on-surface: #2D9600;
    --kendo-color-on-success: #FFFFFF;

    /* Warning (dandelion yellow) */
    --kendo-color-warning: #FFC000;
    --kendo-color-warning-hover: #EAAF00;
    --kendo-color-warning-active: #D49F00;
    --kendo-color-warning-subtle: #FFF4D3;
    --kendo-color-warning-subtle-hover: #FFEEBD;
    --kendo-color-warning-subtle-active: #FFE79E;
    --kendo-color-warning-emphasis: #FFD760;
    --kendo-color-warning-on-subtle: #5E4700;
    --kendo-color-warning-on-surface: #FFC000;
    --kendo-color-on-warning: #3D3D3D;

    /* Error (red) */
    --kendo-color-error: #F31700;
    --kendo-color-error-hover: #DF1600;
    --kendo-color-error-active: #CA1400;
    --kendo-color-error-subtle: #FCDDDA;
    --kendo-color-error-subtle-hover: #FBC8C3;
    --kendo-color-error-subtle-active: #F98B80;
    --kendo-color-error-emphasis: #F76F60;
    --kendo-color-error-on-subtle: #7A0C00;
    --kendo-color-error-on-surface: #CA1400;
    --kendo-color-on-error: #FFFFFF;

    /* Chart/data series */
    --kendo-color-series-a: #FF6358;
    --kendo-color-series-a-subtle: #FF8A82;
    --kendo-color-series-a-subtler: #FFB1AC;
    --kendo-color-series-a-bold: #BF4A42;
    --kendo-color-series-a-bolder: #80322C;

    --kendo-color-series-b: #FFE162;
    --kendo-color-series-b-subtle: #FFE989;
    --kendo-color-series-b-subtler: #FFF0B1;
    --kendo-color-series-b-bold: #BFA94A;
    --kendo-color-series-b-bolder: #807131;

    --kendo-color-series-c: #4CD180;
    --kendo-color-series-c-subtle: #79DDA0;
    --kendo-color-series-c-subtler: #A6E8C0;
    --kendo-color-series-c-bold: #399D60;
    --kendo-color-series-c-bolder: #266940;

    --kendo-color-series-d: #4B5FFA;
    --kendo-color-series-d-subtle: #7887FB;
    --kendo-color-series-d-subtler: #A5AFFD;
    --kendo-color-series-d-bold: #3847BC;
    --kendo-color-series-d-bolder: #26307D;

    --kendo-color-series-e: #AC58FF;
    --kendo-color-series-e-subtle: #C182FF;
    --kendo-color-series-e-subtler: #D6ACFF;
    --kendo-color-series-e-bold: #8142BF;
    --kendo-color-series-e-bolder: #562C80;

    --kendo-color-series-f: #FF5892;
    --kendo-color-series-f-subtle: #FF82AE;
    --kendo-color-series-f-subtler: #FFACC9;
    --kendo-color-series-f-bold: #BF426E;
    --kendo-color-series-f-bolder: #802C49;

    /* ---------- Side-nav tokens (shared) ---------- */
    --sn-text: #252E53;
    --sn-text-muted: #565D79;
    --sn-border: #EFF1F4;
    --sn-divider: #EFF1F4;
    --sn-bg: #FFFFFF;
    --sn-row-selected: #F2F4F6;
    --sn-row-hover: rgba(37, 46, 83, 0.04);
    --sn-rail: #DFE3E8;
    --sn-surface-subtle: #F8F9FB;

    /* ---------- Abena brand tokens ---------- */
    --abena-color-action-blue: #0044C2;
    --abena-color-action-blue-soft: rgba(0, 68, 194, 0.06);
    --abena-color-title-deep: #002C75;
    --abena-color-page-title: #0D1740;
    --abena-color-focus-ring: rgba(0, 88, 233, 0.3);
    --abena-color-focus-ring-soft: rgba(0, 88, 233, 0.15);
    --abena-shadow-card-glow: #EDF1FB;

    /* Info banner (.abena-v3-info-banner) — light info-blue design */
    --abena-color-info-banner-bg: #F2F8FE;
    --abena-color-info-banner-fg: #023F5C;
    --abena-color-info-banner-border: #6FC4F0;
}

/* ---------- RR2 typography scope — ABENA-1445 ----------
   The redesigned RR2 surfaces use Roboto instead of Gilroy. Each entry below is the
   root class of one such surface; descendants inherit `font-family` from --abena-v3-font.
   Surfaces:
     .rooms-config-page         — new page (RoomsConfigPage.razor, route /room/config)
     .resident-main-page        — residents grid (ResidentMainPage.razor)
     .resident-view-page        — resident detail (ResidentViewPage.razor, Shared.UI)
     .room-main-page            — rooms grid (RoomMainPage.razor)
     .abena-v3-modal            — new modal style (filter, exit-confirm, etc.)
     .abena-v3-slide-panel      — new SlidePanel sidebar (UI.Core)
     .abena-v3-slide-panel-backdrop — SlidePanel backdrop (kept in scope for parity) */
.rooms-config-page,
.resident-main-page,
.resident-view-page,
.room-main-page,
.abena-v3-modal,
.abena-v3-slide-panel,
.abena-v3-slide-panel-backdrop {
    font-family: var(--abena-v3-font);
}

/* RR2 Gilroy overrides — ABENA-1445.
   These selectors come from Abena-resident.css / Abena-room.css and would otherwise
   win specificity against the ancestor rule above, leaving descendants in Gilroy
   on redesigned pages. Cascade order makes them win because Abena-v3.css is imported
   after Abena-resident.css / Abena-room.css in Abena-main.css. Audit details in
   tasks/font-replacement-rr2-roboto/audit-results.md. */
.resident-main-page .resident-top-bar .k-dropdownlist .k-input-value-text {
    font-family: var(--abena-v3-font);
}

.room-main-page .room-left .title {
    font-family: var(--abena-v3-font);
}

/* RR2 Kendo widget font reset — ABENA-1445.
   abena-soins-styles.css contains a Kendo-theme-wide reset that hard-codes
   `font-family: Gilroy-Medium, Roboto, ...` on 60 top-level Kendo classes
   (.k-grid, .k-button, .k-window, .k-toolbar, .k-typography, .k-paragraph, etc.).
   Those rules have class specificity (0,0,1,0) and target the Kendo widget root
   directly, so the ancestor rule above (.resident-main-page, etc.) does not win
   on widget elements. Descendants inside those widgets (e.g., .k-grid-header,
   .k-column-title) inherit `font-family` from their nearest ancestor with an
   explicit rule — which is the widget root, not the page root.

   Fix: descendant override with specificity (0,0,2,0) that targets every Kendo
   widget root inside RR2 scope. Inheritance into header/column/cell text follows.
   .k-icon is intentionally NOT in the list — icon fonts must keep their own
   `font-family`. */
:is(.rooms-config-page, .resident-main-page, .resident-view-page, .room-main-page, .abena-v3-modal, .abena-v3-slide-panel)
:is(.k-actionsheet, .k-appbar, .k-avatar-initials, .k-bottom-nav, .k-breadcrumb, .k-button, .k-calendar, .k-captcha, .k-card, .k-chat, .k-chip, .k-coloreditor, .k-colorgradient, .k-colorpalette, .k-drag-clue, .k-drawer, .k-dropzone-inner, .k-editor, .k-expander, .k-fab, .k-filemanager, .k-gantt, .k-grid, .k-imageeditor, .k-listbox, .k-listview, .k-map, .k-mediaplayer, .k-menu, .k-menu-bar, .k-notification, .k-orgchart, .k-pager, .k-pane-wrapper, .k-panelbar, .k-paragraph, .k-pdf-viewer, .k-pivotgrid, .k-popover, .k-progressbar, .k-rating, .k-scheduler, .k-scrollview, .k-slider, .k-splitter, .k-spreadsheet, .k-stepper, .k-stockchart, .k-tabstrip, .k-taskboard, .k-timeline, .k-timeselector, .k-toolbar, .k-tooltip, .k-treemap, .k-treeview, .k-typography, .k-upload, .k-window, .k-wizard) {
    font-family: var(--abena-v3-font);
}

/* ---------- Design tokens — Dark theme override ---------- */

[data-theme="dark"],
.k-theme-dark {
    --kendo-color-border: rgba(255, 255, 255, 0.24);
    --kendo-color-border-alt: rgba(255, 255, 255, 0.48);

    --kendo-color-app-surface: #141414;
    --kendo-color-on-app-surface: #F5F5F5;
    --kendo-color-surface: #1F1F1F;
    --kendo-color-surface-alt: #292929;

    --kendo-color-base: #3D3D3D;
    --kendo-color-base-hover: #4D4D4D;
    --kendo-color-base-active: #575757;
    --kendo-color-base-subtle: #333333;
    --kendo-color-base-subtle-hover: #424242;
    --kendo-color-base-subtle-active: #4D4D4D;
    --kendo-color-base-emphasis: #9C9C9C;
    --kendo-color-base-on-surface: #F5F5F5;
    --kendo-color-on-base: #F5F5F5;

    --kendo-color-inverse: #F5F5F5;
    --kendo-color-inverse-hover: #EBEBEB;
    --kendo-color-inverse-active: #D6D6D6;
    --kendo-color-inverse-subtle: #C2C2C2;
    --kendo-color-inverse-subtle-hover: #9C9C9C;
    --kendo-color-inverse-subtle-active: #757575;
    --kendo-color-inverse-emphasis: #575757;
    --kendo-color-inverse-on-subtle: #141414;
    --kendo-color-inverse-on-surface: #EBEBEB;

    --kendo-color-primary: #EA5A51;
    --kendo-color-primary-hover: #D35149;
    --kendo-color-primary-emphasis: #F29C97;
    --kendo-color-primary-on-subtle: #FDEFEE;
    --kendo-color-primary-on-surface: #ED736B;
    --kendo-color-primary-subtle-hover: #8C3631;

    --kendo-color-secondary: #C2C2C2;
    --kendo-color-secondary-hover: #D6D6D6;
    --kendo-color-secondary-active: #EBEBEB;
    --kendo-color-secondary-subtle: #333333;
    --kendo-color-secondary-subtle-hover: #424242;
    --kendo-color-secondary-subtle-active: #4D4D4D;
    --kendo-color-secondary-emphasis: #9C9C9C;
    --kendo-color-secondary-on-surface: #C2C2C2;
    --kendo-color-secondary-on-subtle: #F5F5F5;
    --kendo-color-on-secondary: #141414;

    --kendo-color-info-active: #004AC2;
    --kendo-color-info-emphasis: #0052D6;
    --kendo-color-info-on-subtle: #E9F0FD;
    --kendo-color-info-on-surface: #4082EF;
    --kendo-color-info-subtle: #002C75;
    --kendo-color-info-subtle-hover: #003892;
    --kendo-color-info-subtle-active: #0042AF;

    --kendo-color-error: #F43520;
    --kendo-color-error-hover: #F31700;
    --kendo-color-error-active: #DF1600;
    --kendo-color-error-emphasis: #F43520;
    --kendo-color-error-on-subtle: #FEEEED;
    --kendo-color-error-on-surface: #F65140;
    --kendo-color-error-subtle: #980F00;
    --kendo-color-error-subtle-hover: #B61100;
    --kendo-color-error-subtle-active: #CA1400;

    --kendo-color-on-warning: #3D3D3D;
}

/* ---------- Typography utility classes ---------- */

.k-display-1 {
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-display1-font-size);
    line-height: var(--kendo-display1-line-height);
    font-weight: var(--kendo-display1-font-weight);
}

.k-display-2 {
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-display2-font-size);
    line-height: var(--kendo-display2-line-height);
    font-weight: var(--kendo-display2-font-weight);
}

.k-h1 {
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-h1-font-size);
    line-height: var(--kendo-h1-line-height);
    font-weight: var(--kendo-h1-font-weight);
}

.k-h2 {
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-h2-font-size);
    line-height: var(--kendo-h2-line-height);
    font-weight: var(--kendo-h2-font-weight);
}

.k-h3 {
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-h3-font-size);
    line-height: var(--kendo-h3-line-height);
    font-weight: var(--kendo-h3-font-weight);
}

.k-h4 {
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-h4-font-size);
    line-height: var(--kendo-h4-line-height);
    font-weight: var(--kendo-h4-font-weight);
}

.k-h5 {
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-h5-font-size);
    line-height: var(--kendo-h5-line-height);
    font-weight: var(--kendo-h5-font-weight);
}

.k-h6 {
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-h6-font-size);
    line-height: var(--kendo-h6-line-height);
    font-weight: var(--kendo-h6-font-weight);
}

.k-paragraph {
    font-size: var(--kendo-paragraph-md-font-size);
    line-height: var(--kendo-paragraph-md-line-height);
    font-weight: var(--kendo-paragraph-font-weight);
}

.k-paragraph-xs {
    font-size: var(--kendo-paragraph-xs-font-size);
    line-height: var(--kendo-paragraph-xs-line-height);
}

.k-paragraph-sm {
    font-size: var(--kendo-paragraph-sm-font-size);
    line-height: var(--kendo-paragraph-sm-line-height);
}

.k-paragraph-md {
    font-size: var(--kendo-paragraph-md-font-size);
    line-height: var(--kendo-paragraph-md-line-height);
}

.k-paragraph-lg {
    font-size: var(--kendo-paragraph-lg-font-size);
    line-height: var(--kendo-paragraph-lg-line-height);
}

.k-paragraph-xl {
    font-size: var(--kendo-paragraph-xl-font-size);
    line-height: var(--kendo-paragraph-xl-line-height);
}

/* ---------- Elevation utility classes ---------- */

.k-elevation-1 {
    box-shadow: var(--kendo-elevation-1);
}

.k-elevation-2 {
    box-shadow: var(--kendo-elevation-2);
}

.k-elevation-3 {
    box-shadow: var(--kendo-elevation-3);
}

.k-elevation-4 {
    box-shadow: var(--kendo-elevation-4);
}

.k-elevation-5 {
    box-shadow: var(--kendo-elevation-5);
}

.k-elevation-6 {
    box-shadow: var(--kendo-elevation-6);
}

.k-elevation-7 {
    box-shadow: var(--kendo-elevation-7);
}

.k-elevation-8 {
    box-shadow: var(--kendo-elevation-8);
}

.k-elevation-9 {
    box-shadow: var(--kendo-elevation-9);
}


.k-bg-surface-subtle {
    background-color: var(--sn-surface-subtle);
}
/* ============================================================
   Components
   ============================================================ */

/* ---------- SlidePanel ---------- */

.abena-v3-slide-panel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(13, 23, 64, 0.32); /* navy-tinted, per design .rp-backdrop */
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease;
    z-index: 10000;
}

.abena-v3-slide-panel-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;

    @starting-style {
        opacity: 0;
    }
}

.abena-v3-slide-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 31.5625rem; /* 505px */
    max-width: 100vw;
    background: var(--kendo-color-app-surface);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
    box-shadow: var(--kendo-elevation-7);
    z-index: 10001;
    overflow: hidden;
}

.abena-v3-slide-panel.is-open {
    transform: translateX(0);

    @starting-style {
        transform: translateX(100%);
    }
}

.abena-v3-slide-panel__header {
    display: flex;
    align-items: center;
    box-sizing: border-box; /* design uses a global border-box reset; without this
                               min-height + padding stack into a ~97px header */
    gap: 1.5rem; /* 24px — per design .rp-head */
    padding: 0.875rem 2rem; /* 14px 32px — per design .rp-head */
    min-height: 4.25rem; /* 68px — per design .rp-head */
    border-bottom: 0.0625rem solid var(--sn-border); /* 1px */
    flex-shrink: 0;
}

.abena-v3-slide-panel__titles {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.abena-v3-slide-panel__title {
    margin: 0;
    font-family: "Rounded Mplus 1c Bold", var(--kendo-font-family);
    font-weight: var(--kendo-font-weight-bold);
    font-size: var(--kendo-h5-font-size);
    line-height: 1; /* design: 21px line-height on 21px title */
    color: var(--abena-color-title-deep);
}

.abena-v3-slide-panel__subtitle {
    font-family: var(--kendo-font-family);
    font-weight: var(--kendo-font-weight-normal);
    font-size: var(--kendo-font-size-md);
    line-height: 1.42;
    color: var(--sn-text-muted);
}

.abena-v3-slide-panel__close {
    width: 2.75rem; /* 44px */
    height: 2.75rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem; /* 8px */
    border: none;
    border-radius: 50%;
    background: var(--sn-border);
    color: var(--abena-color-page-title); /* #0D1740 — match design close glyph */
    cursor: pointer;
    transition: background-color 150ms ease;
}

.abena-v3-slide-panel__close:hover {
    background: var(--sn-rail);
}

.abena-v3-slide-panel__close:focus-visible {
    outline: 0.125rem solid var(--kendo-color-info-on-surface); /* 2px */
    outline-offset: 0.125rem;
}

.abena-v3-slide-panel__body {
    flex: 1;
    min-height: 0; /* allow the body (and its flex children) to shrink + scroll */
    overflow-y: auto;
    padding: 1.5rem 2rem 2.5rem; /* 24px 32px 40px — per design .rp-form */
    display: flex;
    flex-direction: column;
    gap: 2rem; /* 32px */
}

/* ---------- Assign-resident list (AssignResidentToBedModal) ---------- */

/* Fill the panel height: form stretches to the body, the list group grows, and the
   list itself becomes the flexible scroll area — so it resizes with the window. */
.abena-v3-slide-panel__assign-form {
    flex: 1 1 auto;
    min-height: 0;
}

.abena-v3-slide-panel__assign-listgroup {
    flex: 1 1 auto;
    min-height: 0;
}

.abena-v3-slide-panel__assign-list {
    /* Block flow (not flex+gap): <Virtualize> inserts spacer divs and relies on
       ItemSize; flex gaps would be applied around the spacers and break scroll math.
       Row spacing lives on the item's margin-bottom instead. */
    display: block;
    flex: 1 1 auto;     /* fill the list group's available height */
    min-height: 0;
    overflow-y: auto;   /* scroll within the available height (no fixed max-height) */
}

.abena-v3-slide-panel__assign-item {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* 12px */
    width: 100%;
    margin-bottom: 0.5rem; /* 8px row spacing (replaces the list's flex gap) */
    /* Abena-main.css resets every <button> to max-height:3rem (48px), which clips
       the 38px avatar and stops it from setting the row height — undo it here. */
    max-height: none;
    font: inherit;
    text-align: left;
    padding: 0.625rem 0.75rem; /* 10px 12px */
    border: 0.0625rem solid var(--sn-border); /* 1px */
    border-radius: 0.5rem;
    background: var(--kendo-color-app-surface);
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.abena-v3-slide-panel__assign-item:hover {
    border-color: var(--abena-color-action-blue);
}

.abena-v3-slide-panel__assign-item.is-selected {
    border-color: var(--abena-color-action-blue);
    background: var(--abena-color-action-blue-soft);
    box-shadow: inset 0 0 0 0.0625rem var(--abena-color-action-blue); /* 1px */
}

.abena-v3-slide-panel__assign-avatar {
    flex-shrink: 0;
    box-sizing: border-box;       /* design uses a global border-box reset → 34px total */
    width: 2.125rem;              /* 34px */
    height: 2.125rem;
    border-radius: 50%;
    border: 0.125rem solid #E0E0E0; /* 2px, exact design --color-gray-400 */
    overflow: hidden;
    background: var(--abena-color-action-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--kendo-font-family);
    font-size: 0.75rem;           /* 12px per design (app --kendo-font-size-xs is 10px) */
    font-weight: var(--kendo-font-weight-bold);
}

.abena-v3-slide-panel__assign-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.abena-v3-slide-panel__assign-text {
    display: flex;
    flex-direction: column;
    gap: 0; /* lines kept tight — see line-heights below */
    min-width: 0;
}

.abena-v3-slide-panel__assign-name {
    font-family: var(--kendo-font-family);
    font-weight: var(--kendo-font-weight-medium);
    font-size: var(--kendo-font-size-md);
    line-height: 1.25;
    color: var(--abena-color-page-title);
}

.abena-v3-slide-panel__assign-room {
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-font-size-sm);
    line-height: 1.2;
    color: var(--sn-text-muted);
}

.abena-v3-slide-panel__assign-empty {
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-font-size-sm);
    color: var(--sn-text-muted);
    text-align: center;
    padding: 0.875rem; /* 14px */
}

/* Panel search — white field + blue magnifier, per the design's .aff-search
   (NOT the gray top-bar .abena-v3-grid-search look). Overrides the legacy v2
   .search-with-icon defaults from Abena-v2.css. */
.abena-v3-slide-panel__search {
    width: 100%;
}

.abena-v3-slide-panel__search .search-with-icon {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 2.5rem; /* 40px total, per design */
    background: #fff;
    border: 0.0625rem solid #E0E0E0; /* 1px */
    border-radius: 0.5rem;
    overflow: hidden;
}

.abena-v3-slide-panel__search .search-with-icon > span,
.abena-v3-slide-panel__search .search-with-icon .k-textbox,
.abena-v3-slide-panel__search .search-with-icon .k-input,
.abena-v3-slide-panel__search .search-with-icon .k-input-md,
.abena-v3-slide-panel__search .search-with-icon .k-input-solid {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 100%;
    height: 100%;
}

.abena-v3-slide-panel__search .search-with-icon i {
    left: 0.875rem; /* 14px */
    color: var(--abena-color-action-blue); /* #0044C2 */
    font-size: 1rem; /* 16px */
}

.abena-v3-slide-panel__search .search-with-icon input,
.abena-v3-slide-panel__search .search-with-icon .k-input-inner {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    height: 2.5rem !important; /* 40px */
    padding: 0 0.875rem 0 2.5rem !important; /* left 40px = icon + gap */
    font-family: var(--kendo-font-family) !important; /* Roboto — beat the v2 Gilroy default */
    font-size: 0.875rem; /* 14px */
    font-weight: var(--kendo-font-weight-normal);
    color: var(--abena-color-page-title); /* #0D1740 */
}

.abena-v3-slide-panel__search .search-with-icon input::placeholder,
.abena-v3-slide-panel__search .search-with-icon .k-input-inner::placeholder {
    color: var(--sn-text-muted);
    opacity: 1;
}

/* AbsSearchInput: render its text + placeholder in Roboto (the design font) for every
   instance (top bars + panels). Without this it inherits --primary-font (Gilroy) from
   body. !important beats the inherited value (which is not !important). */
.search-with-icon .k-input,
.search-with-icon .k-input-inner,
.search-with-icon input,
.search-with-icon .k-input-inner::placeholder,
.search-with-icon input::placeholder {
    font-family: var(--kendo-font-family) !important;
}

/* Field labels inside slide panels match the design's rp-label (#4F4F4F). */
.abena-v3-slide-panel .abena-v3-form__label {
    color: #4F4F4F;
}

/* Close glyph (Unicons uil-times, per design) sizing. */
.abena-v3-slide-panel__close i {
    font-size: 1.25rem; /* 20px */
    line-height: 1;
}

/* ---------- Form layout ---------- */

.abena-v3-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* 24px */
}

.abena-v3-form__group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 8px */
}

.abena-v3-form__label {
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-font-size-md);
    line-height: 1.42;
    font-weight: var(--kendo-font-weight-normal);
    color: var(--kendo-color-on-app-surface);
}

.abena-v3-form__label--required::after {
    content: " *";
    color: var(--kendo-color-error-hover);
}

/* Optional sub-label (Préfixe / Suffixe) — smaller and fully muted, per design .rp-sublabel. */
.abena-v3-form__label--sub {
    font-size: 0.8125rem;          /* 13px */
    color: var(--sn-text-muted);
}

/* The design puts the prefix/suffix inputs 16px under the "Personnaliser…" checkbox
   (.rp-field gap 8px + .rp-row margin 8px). Two layouts produce that 16px:
   — AddChambre: checkbox + row live in a gap-8 group → the modifier adds 8px;
   — EditRoom: checkbox + row are direct form children (gap 24) → pull the row up 8px. */
.abena-v3-form__row--prefix-suffix {
    margin-top: 0.5rem;
}

.abena-v3-form__checkbox + .abena-v3-form__row:not(.abena-v3-form__row--prefix-suffix) {
    margin-top: -0.5rem;
}

.abena-v3-form__hint {
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-font-size-sm);
    line-height: 1.5;
    color: var(--sn-text-muted);
}

.abena-v3-form__actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 8px */
}

/* Slide-panel submit per design .rp-submit — 44px tall, 4px extra above the form gap. */
.abena-v3-slide-panel .abena-v3-form__actions {
    margin-top: 0.25rem;
}

.abena-v3-slide-panel .abena-v3-form__actions .abena-v3-btn {
    min-height: 2.75rem; /* 44px */
}

/* Thin gray horizontal separator between major form sections. */
.abena-v3-form__separator {
    border: none;
    border-top: 0.0625rem solid var(--sn-rail);   /* 1px, #DFE3E8 per design */
    margin: 0;
}

/* Align Telerik inputs used inside abena-v3-form to the Figma spec
   (8px radius, 1px #DFE3E8 border, white background). */
.abena-v3-form .k-input,
.abena-v3-form .k-picker {
    border-radius: 0.5rem;                       /* 8px */
    border-color: var(--sn-rail);
    background: #FFFFFF;
}

/* Input/picker text per design .rp-input — 14px Roboto, deep navy (not the Telerik
   theme's 16px Gilroy). */
.abena-v3-form .k-input .k-input-inner,
.abena-v3-form .k-picker .k-input-inner,
.abena-v3-form .k-picker .k-input-value-text {
    font-family: 'Roboto', var(--kendo-font-family);
    font-size: 0.875rem;                         /* 14px */
    color: var(--abena-color-page-title);        /* #0D1740 */
}

/* !important required: Abena-main.css has a global
   `input, select { font-family: var(--primary-font) !important; }` (Gilroy) that
   otherwise beats any non-important declaration on inputs inside the v3 form. */
.abena-v3-form input,
.abena-v3-form select {
    font-family: 'Roboto', var(--kendo-font-family) !important;
}

/* TelerikSwitch — proportionally shrink the whole switch so it matches
   the Figma toggle without breaking Telerik's internal positioning math.
   `transform: scale()` keeps thumb/track/labels in sync. */
.abena-v3-form .k-switch {
    transform: scale(0.8);
    transform-origin: left center;
    margin-right: -0.75rem;                      /* compensate for the visual shrink */
}

/* TelerikSwitch (OFF state) 
   white track with a hairline border, near-white handle with same hairline border. */
.abena-v3-form .k-switch.k-switch-off .k-switch-track {
    background: var(--kendo-color-app-surface);
    border-color: var(--kendo-color-border);
}

.abena-v3-form .k-switch.k-switch-off .k-switch-handle,
.abena-v3-form .k-switch.k-switch-off .k-switch-thumb {
    background: var(--kendo-color-surface);      /* #FAFAFA */
    border: 1px solid var(--kendo-color-border);
}

/* TelerikSwitch — force the active on/off label visible even on Small size,
   which Telerik hides by default. Position each label inside the track
   on the side opposite the thumb so they don't overlap. */
.abena-v3-form .k-switch.k-switch-on .k-switch-label-on,
.abena-v3-form .k-switch.k-switch-off .k-switch-label-off {
    display: inline-block !important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.625rem;                         /* 10px */
    font-weight: var(--kendo-font-weight-normal); /* Figma uses Roboto Regular */
    line-height: 1;
    pointer-events: none;
}

/* ON label — sits on the left side of the blue track when switched on. */
.abena-v3-form .k-switch.k-switch-on .k-switch-label-on {
    left: 0.375rem;
    color: #FFFFFF;
}

/* OFF label — sits on the right side of the white track when switched off. */
.abena-v3-form .k-switch.k-switch-off .k-switch-label-off {
    right: 0.375rem;
    color: var(--kendo-color-on-app-surface);    /* #3D3D3D per Figma */
}

.abena-v3-form .k-switch.k-switch-on .k-switch-label-off,
.abena-v3-form .k-switch.k-switch-off .k-switch-label-on {
    display: none !important;
}

/* DropDownList: kill the default grey picker fill and the inner button
   chrome so it reads as a single clean white field with just a chevron.
   Force the gray Figma border on the picker — Telerik ships
   `.k-picker-outline { border: 1px solid var(--borders) !important; }`
   so we need `!important` to override its dark default. */
.abena-v3-form .k-dropdownlist {
    height: 2.375rem;                            /* 38px — per design .ep-select */
}

.abena-v3-form .k-dropdownlist,
.abena-v3-form .k-dropdownlist.k-picker-outline {
    background: #FFFFFF;
    border: 1px solid var(--sn-rail) !important;
}

.abena-v3-form .k-dropdownlist:hover,
.abena-v3-form .k-dropdownlist.k-hover,
.abena-v3-form .k-dropdownlist.k-picker-outline:hover {
    border-color: var(--sn-rail) !important;
}

.abena-v3-form .k-dropdownlist:focus-within,
.abena-v3-form .k-dropdownlist.k-focus,
.abena-v3-form .k-dropdownlist.k-picker-outline.k-focus {
    border-color: var(--abena-color-action-blue, var(--sn-rail)) !important;
    box-shadow: none;
}

.abena-v3-form .k-dropdownlist .k-input-button {
    background: transparent;
    border: none;
    color: var(--sn-text-muted);
}

.abena-v3-form .k-dropdownlist .k-input-button:hover {
    background: var(--sn-row-hover);
}

.abena-v3-form .k-dropdownlist .k-input-inner {
    background: transparent;
    color: var(--abena-color-page-title);        /* #0D1740 — per design .ep-select */
}

/* Replace Telerik's filled caret-alt-down with a thin chevron-down
   drawn via CSS borders (matches Figma — light, V-shape, not a triangle). */
.abena-v3-form .k-dropdownlist .k-input-button .k-icon {
    position: relative;
    color: transparent;                          /* hides the underlying SVG */
}

.abena-v3-form .k-dropdownlist .k-input-button .k-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.5rem;                               /* 8px */
    height: 0.5rem;
    border-right: 0.125rem solid var(--sn-text-muted);        /* 2px */
    border-bottom: 0.125rem solid var(--sn-text-muted);
    transform: translate(-50%, -75%) rotate(45deg);
    pointer-events: none;
}

/* ---------- Button (AbenaV3Button) ---------- */

.abena-v3-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem; /* 8px 12px */
    border: 0.0625rem solid transparent; /* 1px */
    border-radius: 0.75rem;
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-font-size-md);
    font-weight: var(--kendo-font-weight-bold);
    line-height: 1.42;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
    user-select: none;
    white-space: nowrap;
}

.abena-v3-btn--sm {
    box-sizing: border-box;
    min-height: 1.875rem;        /* 30px */
    padding: 0 0.625rem;         /* horizontal only — line-height keeps the text centred */
    border-radius: 0.5rem;       /* 8px — small buttons always use the 8px corner radius */
    font-family: 'Roboto', var(--kendo-font-family);
    font-style: normal;
    font-weight: 400;
    font-size: 0.875rem;         /* 14px */
    line-height: 1;
}

/* Wrapper around a <Blazicon> SVG inside an AbenaV3Button — keeps the icon
   centred and inherits the button's text colour. */
.abena-v3-btn__blaz-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
}

.abena-v3-btn__blaz-icon > svg {
    width: 0.875rem;
    height: 0.875rem;
}

.abena-v3-btn--md {
    min-height: 2rem;
}

/* 32px */
.abena-v3-btn--lg {
    min-height: 2.5rem;
}

/* 40px */
.abena-v3-btn--xl {
    min-height: 2.75rem; /* 44px */
    padding: 0.625rem 1.5rem; /* 10px 24px */
    gap: 0.5rem; /* 8px */
}

.abena-v3-btn.abena-v3-topbar-cta {
    min-height: 2.625rem;
    height: 2.625rem;
    padding: 0 0.5rem;
    gap: 0.25rem;
    border-radius: 0.75rem;
    font-weight: var(--kendo-font-weight-medium);
}

.abena-v3-btn--full {
    width: 100%;
}

.abena-v3-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.125rem var(--abena-color-focus-ring);
}

.abena-v3-btn:disabled,
.abena-v3-btn[aria-disabled="true"] {
    /* Design disabled state: solid gray (#DFE3E8 = --color-gray-300), not a faded
       theme colour. !important overrides the per-theme background rules below, which
       have equal specificity but come later in source order. */
    background: var(--sn-rail) !important;
    border-color: var(--sn-rail) !important;
    color: #FFFFFF !important;
    opacity: 1;
    cursor: not-allowed;
}

/* Solid fills */
.abena-v3-btn--solid.abena-v3-btn--info {
    background: var(--abena-color-action-blue);
    border-color: var(--abena-color-action-blue);
    color: #FFFFFF;
}

.abena-v3-btn--solid.abena-v3-btn--info:hover:not(:disabled) {
    background: var(--kendo-color-info-active);
    border-color: var(--kendo-color-info-active);
}

.abena-v3-btn--solid.abena-v3-btn--primary {
    background: var(--kendo-color-primary);
    border-color: var(--kendo-color-primary);
    color: var(--kendo-color-on-primary);
}

.abena-v3-btn--solid.abena-v3-btn--primary:hover:not(:disabled) {
    background: var(--kendo-color-primary-hover);
    border-color: var(--kendo-color-primary-hover);
}

.abena-v3-btn--solid.abena-v3-btn--success {
    background: var(--kendo-color-success);
    border-color: var(--kendo-color-success);
    color: var(--kendo-color-on-success);
}

.abena-v3-btn--solid.abena-v3-btn--success:hover:not(:disabled) {
    background: var(--kendo-color-success-hover);
    border-color: var(--kendo-color-success-hover);
}

.abena-v3-btn--solid.abena-v3-btn--warning {
    background: var(--kendo-color-warning);
    border-color: var(--kendo-color-warning);
    color: var(--kendo-color-on-warning);
}

.abena-v3-btn--solid.abena-v3-btn--warning:hover:not(:disabled) {
    background: var(--kendo-color-warning-hover);
    border-color: var(--kendo-color-warning-hover);
}

.abena-v3-btn--solid.abena-v3-btn--error {
    background: var(--kendo-color-error);
    border-color: var(--kendo-color-error);
    color: var(--kendo-color-on-error);
}

.abena-v3-btn--solid.abena-v3-btn--error:hover:not(:disabled) {
    background: var(--kendo-color-error-hover);
    border-color: var(--kendo-color-error-hover);
}

/* Neutral — flat grey (#C2C2C2) for low-emphasis actions like Cancel. */
.abena-v3-btn--solid.abena-v3-btn--neutral {
    background: #C2C2C2;
    border-color: #C2C2C2;
    color: #FFFFFF;
}

.abena-v3-btn--solid.abena-v3-btn--neutral:hover:not(:disabled) {
    background: #A8A8A8;
    border-color: #A8A8A8;
}

/* Flat (text-only) fills */
.abena-v3-btn--flat {
    background: transparent;
    border-color: transparent;
}

.abena-v3-btn--flat.abena-v3-btn--info {
    color: var(--kendo-color-info-on-surface);
}

.abena-v3-btn--flat.abena-v3-btn--error {
    color: var(--kendo-color-error-on-surface);
}

.abena-v3-btn--flat.abena-v3-btn--success {
    color: var(--kendo-color-success-on-surface);
}

.abena-v3-btn--flat.abena-v3-btn--primary {
    color: var(--kendo-color-primary);
}

.abena-v3-btn--flat:hover:not(:disabled).abena-v3-btn--info {
    background: var(--kendo-color-info-subtle);
}

.abena-v3-btn--flat:hover:not(:disabled).abena-v3-btn--error {
    background: var(--kendo-color-error-subtle);
}

.abena-v3-btn--flat:hover:not(:disabled).abena-v3-btn--success {
    background: var(--kendo-color-success-subtle);
}

.abena-v3-btn--flat:hover:not(:disabled).abena-v3-btn--primary {
    background: var(--kendo-color-primary-subtle);
}

/* Outline fills */
.abena-v3-btn--outline {
    background: transparent;
}

.abena-v3-btn--outline.abena-v3-btn--info {
    border-color: var(--abena-color-action-blue);
    color: var(--abena-color-action-blue);
}

.abena-v3-btn--outline.abena-v3-btn--error {
    border-color: var(--kendo-color-error-on-surface);
    color: var(--kendo-color-error-on-surface);
}

.abena-v3-btn--outline.abena-v3-btn--success {
    border-color: var(--kendo-color-success-on-surface);
    color: var(--kendo-color-success-on-surface);
}

.abena-v3-btn--outline.abena-v3-btn--primary {
    border-color: var(--kendo-color-primary);
    color: var(--kendo-color-primary);
}

.abena-v3-btn--outline:hover:not(:disabled).abena-v3-btn--info {
    background: var(--kendo-color-info-subtle);
}

.abena-v3-btn--outline:hover:not(:disabled).abena-v3-btn--error {
    background: var(--kendo-color-error-subtle);
}

.abena-v3-btn--outline:hover:not(:disabled).abena-v3-btn--success {
    background: var(--kendo-color-success-subtle);
}

.abena-v3-btn--outline:hover:not(:disabled).abena-v3-btn--primary {
    background: var(--kendo-color-primary-subtle);
}

.abena-v3-btn--outline.abena-v3-btn--neutral {
    border-color: var(--sn-rail);
    color: var(--sn-text-muted);
    background: #fff;
    font-weight: var(--kendo-font-weight-normal);
    min-height: 2.3125rem;
    border-radius: 0.5rem;
    padding: 0 0.875rem;
    gap: 0.4375rem;
}
.abena-v3-btn--outline.abena-v3-btn--neutral:hover:not(:disabled) {
    border-color: var(--sn-text-muted);
    color: var(--sn-text);
    background: #fff;
}
.abena-v3-btn--outline.abena-v3-btn--neutral.active,
.abena-v3-btn--outline.abena-v3-btn--neutral.active:hover:not(:disabled) {
    border-color: var(--abena-color-action-blue);
    background: var(--abena-color-action-blue);
    color: #fff;
}

/* ---------- Grid ---------- */
.abena-v3-grid .k-grid-header {
    font-weight: var(--kendo-font-weight-semibold);
}

.abena-v3-grid .k-grid-content tr:hover {
    background: var(--kendo-color-primary-subtle);
}

/* Grid body — white rounded card. The wrapper and outer .k-grid stay
   transparent so the 12px gap between the table card and the pager below
   shows through to the page background, making them read as two detached
   elements. */
.abena-v3-grid {
    background-color: transparent !important;
}

.abena-v3-grid .k-grid {
    background-color: transparent;
}

.abena-v3-grid .k-grid-aria-root {
    background-color: #FFFFFF;
    border: 0.0625rem solid var(--sn-border);
    border-radius: 0.75rem;
    box-shadow: 0 0.125rem 0.625rem 0 var(--abena-shadow-card-glow);
    padding: 0.75rem;
    overflow: hidden;
    box-sizing: border-box;
}

/* Pager — gray detached bar below the grid card. */
.abena-v3-grid .k-grid-pager {
    margin-top: 0.75rem;
    padding: 0 1.25rem;
    min-height: 2.875rem;
    background: #F2F4F6;
    border: 0.0625rem solid var(--sn-border);
    border-radius: 0.75rem !important;
    color: var(--sn-text);
}

/* Swap Telerik's default caret triangles for FontAwesome chevrons.
   Single chevron for prev/next, double chevron (angles) for first/last. */
.abena-v3-grid .k-grid-pager .k-svg-i-caret-alt-to-left svg,
.abena-v3-grid .k-grid-pager .k-svg-i-caret-alt-left svg,
.abena-v3-grid .k-grid-pager .k-svg-i-caret-alt-right svg,
.abena-v3-grid .k-grid-pager .k-svg-i-caret-alt-to-right svg {
    display: none;
}

.abena-v3-grid .k-grid-pager .k-svg-i-caret-alt-to-left,
.abena-v3-grid .k-grid-pager .k-svg-i-caret-alt-left,
.abena-v3-grid .k-grid-pager .k-svg-i-caret-alt-right,
.abena-v3-grid .k-grid-pager .k-svg-i-caret-alt-to-right {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.abena-v3-grid .k-grid-pager .k-svg-i-caret-alt-to-left::before,
.abena-v3-grid .k-grid-pager .k-svg-i-caret-alt-left::before,
.abena-v3-grid .k-grid-pager .k-svg-i-caret-alt-right::before,
.abena-v3-grid .k-grid-pager .k-svg-i-caret-alt-to-right::before {
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    line-height: 1;
    display: block;
    /* Thin FA strokes look lighter than Roboto-400 at the same hex, so
       use a deeper near-black for the chevrons. Sub-pixel text-stroke
       gives the strokes the same visual heft as the surrounding text. */
    color: #1F1F1F;
    -webkit-text-stroke: 0.5px #1F1F1F;
}

/* FA glyphs sit on the baseline of their em-box, which isn't the visual
   centre. Single and double chevrons need different nudges to optically
   centre within the 30px nav button. */
.abena-v3-grid .k-grid-pager .k-svg-i-caret-alt-left::before,
.abena-v3-grid .k-grid-pager .k-svg-i-caret-alt-right::before {
    transform: translateY(-0.0625rem);
}

.abena-v3-grid .k-grid-pager .k-svg-i-caret-alt-to-left::before,
.abena-v3-grid .k-grid-pager .k-svg-i-caret-alt-to-right::before {
    transform: translateY(0);
}

/* Single chevrons sit alone, so they read bigger at the same size as
   the double ones — drop them another step. */
.abena-v3-grid .k-grid-pager .k-svg-i-caret-alt-left::before,
.abena-v3-grid .k-grid-pager .k-svg-i-caret-alt-right::before {
    font-size: 0.625rem;
}

.abena-v3-grid .k-grid-pager .k-svg-i-caret-alt-to-left::before,
.abena-v3-grid .k-grid-pager .k-svg-i-caret-alt-to-right::before {
    font-size: 0.75rem;
}

.abena-v3-grid .k-grid-pager .k-svg-i-caret-alt-to-left::before  { content: "\f100"; }
.abena-v3-grid .k-grid-pager .k-svg-i-caret-alt-left::before     { content: "\f053"; }
.abena-v3-grid .k-grid-pager .k-svg-i-caret-alt-right::before    { content: "\f054"; }
.abena-v3-grid .k-grid-pager .k-svg-i-caret-alt-to-right::before { content: "\f101"; }

/* Page-size dropdown — swap caret triangle for a chevron, drop the solid
   filled input background, and inherit the pager text color. */
.abena-v3-grid .k-grid-pager .k-dropdownlist .k-svg-i-caret-alt-down svg {
    display: none;
}

.abena-v3-grid .k-grid-pager .k-dropdownlist .k-svg-i-caret-alt-down::before {
    content: "\f078";
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-size: 0.75rem;
    line-height: 1;
    display: inline-block;
    color: #3D3D3D;
}

.abena-v3-grid .k-grid-pager .k-dropdownlist,
.abena-v3-grid .k-grid-pager .k-dropdownlist .k-input-button {
    background: #FFFFFF !important;
    color: #3D3D3D;
}

.abena-v3-grid .k-grid-pager .k-dropdownlist {
    width: 4.5rem !important;
    min-width: 4.5rem !important;
}

.abena-v3-grid .k-grid-pager .k-dropdownlist .k-input-inner {
    padding-right: 0 !important;
}

/* Unified pager typography (Figma 9605-15164): Roboto 14/400, color #3D3D3D
   across info text, page-number buttons, page-size dropdown and inputs.
   Targets the descendants too — Telerik renders text inside .k-button-text,
   .k-input-inner, and .k-pager-info spans, each of which can have its own
   font-family rule from the theme. */
.abena-v3-grid .k-grid-pager,
.abena-v3-grid .k-grid-pager .k-pager-info,
.abena-v3-grid .k-grid-pager .k-button .k-button-text,
.abena-v3-grid .k-grid-pager .k-button,
.abena-v3-grid .k-grid-pager .k-input-inner,
.abena-v3-grid .k-grid-pager .k-dropdownlist {
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 0.875rem;                         /* 14px */
    color: #3D3D3D;
}

/* Selected page button (Figma 9605-15079) — light indigo chip with
   darker text and rounded corners. */
/* Every page-number button shares the 30×30 footprint so the row stays
   aligned regardless of which one is selected. Only the selected one
   carries the colored chip styling. */
.abena-v3-grid .k-grid-pager .k-pager-numbers .k-button,
.abena-v3-grid .k-grid-pager .k-pager-nav {
    width: 1.875rem !important;
    min-width: 1.875rem !important;
    height: 1.875rem !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
}

.abena-v3-grid .k-grid-pager .k-pager-numbers-wrap,
.abena-v3-grid .k-grid-pager .k-pager-numbers {
    display: inline-flex;
    align-items: center;
    gap: 0 !important;
    height: auto !important;
}

.abena-v3-grid .k-grid-pager .k-pager-numbers .k-button.k-selected {
    background-color: #CCDEFA !important;
    color: #0044C2 !important;
    border-radius: 0.375rem !important;
    border-color: transparent !important;
}

.abena-v3-grid .k-grid-pager .k-pager-numbers .k-button.k-selected .k-button-text {
    color: #0044C2;
}

/* Suppress Telerik's selected-state pseudo overlays — a semi-transparent
   ::before tint and a 2px inset ::after ring — so the chip renders as the
   flat #CCDEFA bg from the rule above instead of a darker blended color. */
.abena-v3-grid .k-grid-pager .k-pager-numbers .k-button.k-selected::before,
.abena-v3-grid .k-grid-pager .k-pager-numbers .k-button.k-selected::after {
    content: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.abena-v3-action-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;                      /* border counts inside the box (prototype uses border-box) */
    width: 1.75rem;                              /* 28px — match prototype (was 2rem and looked too wide) */
    height: 2rem;
    padding: 0;
    border: 1px solid rgba(0, 61, 125, 0.17);   /* prototype "row-menu": bordered, not borderless */
    border-radius: 6px;                          /* prototype radius (was 50% / fully round) */
    background: transparent;
    color: var(--kendo-color-on-app-surface);
    cursor: pointer;
    transition: background-color 120ms ease-in-out;
}

.abena-v3-action-trigger:hover:not(:disabled) {
    background: var(--sn-border);
}

.abena-v3-action-trigger:focus-visible {
    outline: 2px solid var(--kendo-color-primary);
    outline-offset: 2px;
}

/* Force the Telerik popup container to be wide enough for our menu items.
   `Class` on TelerikContextMenu lands on an inner element; the popup wrapper is a portal'd ancestor. */
.k-popup:has(.abena-v3-action-menu),
.k-menu-popup:has(.abena-v3-action-menu),
.k-animation-container:has(.abena-v3-action-menu) > .k-popup {
    min-width: 16rem !important;
    width: auto !important;
    max-width: none !important;
}

/* Beat the legacy global rule `.k-menu-popup .k-item .k-link { ... !important }`
   that pins width:10.75rem, font-size:0.2rem, color:#717171, text-decoration:underline,
   font-family:Gilroy-Medium, background:#fff. Specificity here is (0,4,0) — one class
   higher than the legacy (0,3,0) — and we still use !important to win against theirs. */
.k-menu-popup .abena-v3-action-menu .k-item .k-link,
.k-menu-popup .abena-v3-action-menu .k-menu-item .k-menu-link,
.abena-v3-action-menu .k-item .k-link,
.abena-v3-action-menu .k-menu-item .k-menu-link {
    width: auto !important;
    text-decoration: none !important;
    color: var(--kendo-color-on-app-surface) !important;
    font-size: var(--kendo-font-size) !important;
    font-family: var(--kendo-font-family) !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
}

/* Hover state — neutral grey, not the brand-red --kendo-color-primary-subtle. */
.k-menu-popup .abena-v3-action-menu .k-item .k-link:hover,
.k-menu-popup .abena-v3-action-menu .k-menu-item .k-menu-link:hover,
.k-menu-popup .abena-v3-action-menu .k-menu-item.k-focus > .k-menu-link,
.k-menu-popup .abena-v3-action-menu .k-menu-item.k-selected > .k-menu-link,
.abena-v3-action-menu .k-item .k-link:hover,
.abena-v3-action-menu .k-menu-item .k-menu-link:hover,
.abena-v3-action-menu .k-menu-item.k-focus > .k-menu-link,
.abena-v3-action-menu .k-menu-item.k-selected > .k-menu-link {
    background-color: var(--sn-border) !important;
    color: var(--kendo-color-on-app-surface) !important;
}

.abena-v3-action-menu {
    min-width: 16rem;
}

/* Separated variant — thin divider between items, per Figma "Action chambre". */
.abena-v3-action-menu--separated .k-menu-item:not(:last-child) {
    border-bottom: 1px solid var(--sn-border);
}
.k-menu-popup .abena-v3-action-menu--separated .k-menu-item:not(:last-child) {
    border-bottom: 1px solid var(--sn-border);
}

.abena-v3-action-menu .k-menu-item {
    padding: 0;
}

.abena-v3-action-item {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    min-width: 15rem;
    padding: 0.5rem 0.875rem;
    color: var(--kendo-color-on-app-surface);
    font-size: var(--kendo-font-size);
    line-height: var(--kendo-line-height);
    white-space: nowrap;
}

.abena-v3-action-item-icon {
    width: 1rem;
    text-align: center;
    color: inherit;
}

.abena-v3-action-item-text {
    flex: 1;
}

/* Destructive item: !important needed because the .k-link rule above sets color !important on the parent. */
.abena-v3-action-menu .abena-v3-action-item--destructive,
.abena-v3-action-menu .abena-v3-action-item--destructive .abena-v3-action-item-icon,
.abena-v3-action-menu .abena-v3-action-item--destructive .abena-v3-action-item-text {
    color: var(--kendo-color-error) !important;
}


/* ============================================================
   Section side-nav
   ============================================================ */

.abena-v3-sidenav {
    box-sizing: border-box;          /* keep 320px total — padding + border live inside */
    width: 20rem;
    background: var(--sn-bg);
    border: 0.0625rem solid var(--sn-border);
    border-radius: 0.75rem;
    padding: 1.25rem;
    font-family: var(--kendo-font-family);
    color: var(--sn-text);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    box-shadow: 0 0.125rem 0.625rem var(--abena-shadow-card-glow);
}

/* ---- Header ---- */

.abena-v3-sidenav__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0;
}

.abena-v3-sidenav__divider {
    height: 1px;
    background: var(--sn-rail);
    margin: 0.875rem 0;
}

.abena-v3-sidenav__card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.abena-v3-sidenav__card-title {
    font-weight: var(--kendo-font-weight-bold);
    font-size: var(--kendo-font-size-lg);
    color: var(--sn-text);
    cursor: pointer;
    padding: 0.125rem 0.25rem;
    margin: -0.125rem -0.25rem;
    border-radius: 0.375rem;
    white-space: nowrap;
    transition: color 120ms ease;
}
.abena-v3-sidenav__card-title:hover { color: var(--abena-color-action-blue); }
.abena-v3-sidenav__card-title.is-selected { color: var(--abena-color-action-blue); }

.abena-v3-sidenav__title {
    margin: 0;
    font-size: var(--kendo-font-size-md);
    font-weight: var(--kendo-font-weight-bold);
    color: var(--sn-text);
    line-height: 1.2;
}

.abena-v3-sidenav__settings {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0.0625rem solid var(--sn-rail);
    border-radius: 0.5rem;
    background: var(--sn-row-selected);
    color: var(--sn-text);
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.abena-v3-sidenav__settings:hover {
    background: var(--sn-rail);
    border-color: #B0B7C3;
}

.abena-v3-sidenav__settings > svg {
    width: 1rem;
    height: 1rem;
}

/* ---- Tree ---- */

.abena-v3-sidenav__tree {
    display: flex;
    flex-direction: column;
}

.abena-v3-sidenav__item {
    display: flex;
    flex-direction: column;
}

/* Horizontal divider between sibling Buildings (top-level only). */
.abena-v3-sidenav__item--building + .abena-v3-sidenav__item--building {
    margin-top: 0.625rem;
    padding-top: 0.625rem;
    border-top: 0.0625rem solid var(--sn-rail);
}

/* Animatable wrapper: collapses children with a smooth height transition.
   Uses the CSS-grid `0fr → 1fr` trick so we don't need to know the height. */
.abena-v3-sidenav__children-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.abena-v3-sidenav__children-wrapper.is-open {
    grid-template-rows: 1fr;
}

/* The grid item must hide its overflow so the rail and rows are
   clipped while the wrapper transitions through 0fr / 1fr. */
.abena-v3-sidenav__children {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-left: 0;
    position: relative;
}

.abena-v3-sidenav__item--building > .abena-v3-sidenav__children-wrapper > .abena-v3-sidenav__children {
    margin-left: 1.25rem;
}

.abena-v3-sidenav__item--floor > .abena-v3-sidenav__children-wrapper > .abena-v3-sidenav__children,
.abena-v3-sidenav__item--service > .abena-v3-sidenav__children-wrapper > .abena-v3-sidenav__children {
    margin-left: 0.8125rem;
    padding-left: 1rem;
    border-left: 0.125rem solid var(--sn-rail);
}

/* ---- Row ---- */

.abena-v3-sidenav__row {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.75rem;
    padding: 0.375rem 0.625rem;
    border-radius: 0.5rem;
    cursor: pointer;
    user-select: none;
    transition: background-color 120ms ease;
}

.abena-v3-sidenav__row:hover {
    background: var(--sn-row-hover);
}

.abena-v3-sidenav__row.is-selected {
    background: var(--sn-row-selected);
}

.abena-v3-sidenav__row.is-selected .abena-v3-sidenav__label {
    color: var(--sn-text-muted);
}


.abena-v3-sidenav__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    color: var(--sn-text);
}

.abena-v3-sidenav__icon > svg {
    width: 1.125rem;
    height: 1.125rem;
}

.abena-v3-sidenav__item--building > .abena-v3-sidenav__row .abena-v3-sidenav__icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    background: rgba(0, 68, 194, 0.09);
    color: #0044C2;
}
.abena-v3-sidenav__item--floor > .abena-v3-sidenav__row .abena-v3-sidenav__icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    background: rgba(14, 138, 110, 0.11);
    color: #0E8A6E;
}
.abena-v3-sidenav__item--service > .abena-v3-sidenav__row .abena-v3-sidenav__icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    background: rgba(143, 73, 212, 0.11);
    color: #8F49D4;
}

.abena-v3-sidenav__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--kendo-font-size-md);
    font-weight: var(--kendo-font-weight-medium);
    color: var(--sn-text);
}

.abena-v3-sidenav__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    color: var(--sn-text-muted);
    transition: transform 150ms ease, color 150ms ease;
}

.abena-v3-sidenav__chevron i {
    font-size: 1.125rem;
}

.abena-v3-sidenav__chevron.is-expanded {
    transform: rotate(180deg);
}

.abena-v3-sidenav__row.is-selected .abena-v3-sidenav__chevron {
    color: var(--sn-text);
}

/* ---- Per-type label tweaks ---- */

.abena-v3-sidenav__item--building > .abena-v3-sidenav__row .abena-v3-sidenav__label {
    font-size: 0.9375rem;
    font-weight: var(--kendo-font-weight-bold);
    color: var(--sn-text);
}

.abena-v3-sidenav__item--floor > .abena-v3-sidenav__row .abena-v3-sidenav__label {
    font-weight: var(--kendo-font-weight-bold);
    color: var(--sn-text);
}

.abena-v3-sidenav__item--service > .abena-v3-sidenav__row .abena-v3-sidenav__label {
    font-weight: var(--kendo-font-weight-medium);
    color: var(--sn-text-muted);
}

.abena-v3-sidenav__item--subservice > .abena-v3-sidenav__row .abena-v3-sidenav__label {
    font-weight: var(--kendo-font-weight-medium);
    color: var(--sn-text);
}

/* Service rows: a touch tighter than the default to reduce
   inter-row spacing between sibling Services. */
/* SubService rows are leaves: no chevron rendered, plain row body. */
.abena-v3-sidenav__item--subservice > .abena-v3-sidenav__row {
    min-height: 1.625rem;
}

/* ============================================================
   EditRoom dialog
   ============================================================ */

/* ---- Required asterisk inside form labels ---- */
.abena-v3-form .required {
    color: var(--kendo-color-error-hover);
    margin-left: 0.125rem;
}

/* ---- Form layout extensions used by EditRoom ---- */

/* Two-column row (Préfixe + Suffixe). */
.abena-v3-form__row {
    display: flex;
    gap: 0.5rem; /* 8px — per design .rp-row */
}

.abena-v3-form__row > .abena-v3-form__group {
    flex: 1;
    min-width: 0;
    gap: 0.25rem; /* 4px between sub-label and input — per design .rp-sublabel */
}

/* Labels inside two-column rows are always sub-labels (13px muted), per design .rp-sublabel —
   covers De/À in AddChambre, which doesn't carry the --sub modifier. */
.abena-v3-form__row > .abena-v3-form__group > .abena-v3-form__label {
    font-size: 0.8125rem;           /* 13px */
    line-height: 1.42;
    color: var(--sn-text-muted);
}

/* Inline label + control (the "C'est une chambre temporaire" toggle row). */
.abena-v3-form__group--inline {
    flex-direction: row;
    align-items: center;
    gap: 0.625rem;
}

.abena-v3-form__group--inline > .abena-v3-form__label {
    margin: 0;
}

/* Optional-field hint inline with the label — the design uses a plain single space
   ("Préfixe (optionnel)"), so no extra margin. */
.abena-v3-form__label-optional {
    color: var(--sn-text-muted);
    font-weight: var(--kendo-font-weight-normal);
}

/* Checkbox + label row (e.g. "Personnaliser le préfixe et le suffixe"). */
.abena-v3-form__checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-family: 'Roboto', var(--kendo-font-family);
    font-size: 0.875rem;            /* 14px */
    line-height: 1.5;               /* 21px — per design .rp-check */
    color: var(--abena-color-page-title);
}

/* 20px box here (vs the default 16px), per the room edit design. */
.abena-v3-form__checkbox .abena-v3-checkbox {
    width: 1.25rem;
    height: 1.25rem;
}

.abena-v3-form__checkbox .abena-v3-checkbox:checked::after {
    width: 0.75rem;
    height: 0.75rem;
}

/* Plain pill switch (44×24, white 20px knob), per design .rp-switch — no on/off labels. */
.abena-v3-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;                   /* 12px — per design .rp-switch-field */
    cursor: pointer;
}

/* Switch label is deep navy, not the muted grey of field labels — per design .rp-switch-label. */
.abena-v3-slide-panel .abena-v3-switch .abena-v3-form__label {
    color: var(--abena-color-page-title); /* #0D1740 */
}

.abena-v3-switch > input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.abena-v3-switch__track {
    position: relative;
    flex-shrink: 0;
    width: 2.75rem;                 /* 44px */
    height: 1.5rem;                 /* 24px */
    border-radius: 9999px;
    background: #EFF1F4;
    transition: background-color 150ms ease;
}

.abena-v3-switch__knob {
    position: absolute;
    top: 0.125rem;                  /* 2px */
    left: 0.125rem;
    width: 1.25rem;                 /* 20px */
    height: 1.25rem;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
    transition: transform 150ms ease;
}

.abena-v3-switch > input:checked + .abena-v3-switch__track {
    background: var(--abena-color-action-blue);
}

.abena-v3-switch > input:checked + .abena-v3-switch__track .abena-v3-switch__knob {
    transform: translateX(1.25rem);  /* 44 − 20 − 2×2 = 20px */
}

/* ---- Bed status pill ("Occupée" yellow / "Vide" grey) ---- */
.abena-v3-bed-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 1.75rem;            /* 28px, per design .ep-chip */
    border-radius: 1rem;            /* 16px */
    font-family: 'Roboto', var(--kendo-font-family);
    font-size: 0.8125rem;          /* 13px */
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    padding: 0 0.625rem;           /* height comes from min-height */
}

.abena-v3-bed-status-pill.is-occupied {
    background: #FFC107;            /* warm yellow — per design .ep-chip-occ, not in token system */
    color: var(--abena-color-page-title); /* #0D1740 */
}

.abena-v3-bed-status-pill.is-empty {
    background: var(--sn-border);
    color: var(--sn-text-muted);
}

/* ---- Section 1: Répartition des lits (read-only sibling list) ---- */
.abena-v3-bed-distribution {
    background: var(--sn-surface-subtle);
    border-radius: 0.75rem;
    padding: 1rem; /* 16px — per design .ep-beds-card */
    display: flex;
    flex-direction: column;
    gap: 0.625rem; /* 10px — per design .ep-beds-card */
}

/* Foldable header row: title + occupancy dots + fraction + chevron. */
.abena-v3-bed-distribution__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.abena-v3-bed-distribution__title {
    font-family: 'Roboto', var(--kendo-font-family);
    font-size: 0.875rem;            /* 14px */
    font-weight: 400;
    line-height: 1.42;
    color: #4F4F4F;
}

/* Occupancy dots — empty grey / occupied yellow, matching the room cards. */
.abena-v3-bed-distribution__dots {
    display: inline-flex;
    align-items: center;
    gap: 0.1875rem; /* 3px — per design .rc-dots */
    /* header gap is 8px; design wants 12px between the title and the pastille */
    margin-left: 0.25rem;
}

.abena-v3-bed-distribution__dot {
    width: 0.6875rem;               /* 11px, per design .rc-dot */
    height: 0.6875rem;
    border-radius: 50%;
    background-color: var(--sn-border);   /* #EFF1F4 — per design .rc-dot.free */
    border: 0.125rem solid var(--sn-rail); /* #DFE3E8 */
    box-sizing: border-box;
    flex-shrink: 0;
}

.abena-v3-bed-distribution__dot.is-occupied {
    background-color: #ffd040;
    border-color: #bf9000;
}

.abena-v3-bed-distribution__fraction {
    font-family: 'Roboto', var(--kendo-font-family);
    font-size: var(--kendo-font-size-md);   /* 14px — per design .rc-ratio */
    font-weight: var(--kendo-font-weight-normal);
    line-height: 1;                 /* keep the 20px header height of the design */
    color: var(--kendo-color-on-app-surface);
    /* header gap is 8px; design wants only 4px between the dots and the ratio */
    margin-left: -0.25rem;
}

/* Chevron points down when expanded, rotates to point right when collapsed. */
.abena-v3-bed-distribution__chevron {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    font-size: 1.125rem;
    line-height: 1;                 /* keep the 20px header height of the design */
    color: var(--sn-text-muted);
    transition: transform 150ms ease;
}

/* The Unicons <i> gets a global 16px/24px font from elsewhere — pin it to the
   design's 18px glyph so it doesn't stretch the 20px header. */
.abena-v3-bed-distribution__chevron i {
    font-size: 1.125rem;            /* 18px */
    line-height: 1;
}

.abena-v3-bed-distribution.is-collapsed .abena-v3-bed-distribution__chevron {
    transform: rotate(-90deg);
}

.abena-v3-bed-distribution__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.abena-v3-bed-distribution__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem; /* 8px 12px — per design .ep-bed-row (44px tall, no border) */
    border-radius: 0.5rem;
    background: #FFFFFF;
}

/* Bed code (Number + Letter) — always fully visible, never truncated. */
.abena-v3-bed-distribution__label {
    flex-shrink: 0;
    white-space: nowrap;
    font-family: 'Roboto', var(--kendo-font-family);
    font-size: 0.875rem;            /* 14px */
    font-weight: 700;
    color: var(--sn-text);
}

/* Resident name — pushed to the right (next to the status pill).
   Truncates with ellipsis when there isn't enough room. */
.abena-v3-bed-distribution__resident {
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    font-family: 'Roboto', var(--kendo-font-family);
    font-size: 0.875rem;            /* 14px */
    font-weight: 400;
    color: var(--sn-text-muted);
}

/* ---- Section 2: info banner (washed pale blue, with info-icon + link) ----
   The accent stripe on the left is a square ::before so it doesn't follow
   the banner's rounded corners. */
.abena-v3-info-banner {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: var(--abena-color-info-banner-bg);
    border: 0.0625rem solid var(--abena-color-info-banner-border);
    border-radius: 0.5rem;                             /* 8px */
    padding: 0.5rem 0.875rem;                          /* 8px 14px */
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-font-size-md);
    color: var(--abena-color-info-banner-fg);
    line-height: normal; /* tighter wrap, per design .rp-msg */
}

.abena-v3-info-banner__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--abena-color-info-banner-fg);
}

.abena-v3-info-banner__arrow {
    margin: 0 0.375rem;                                /* 6px */
    font-size: 0.8125rem;                              /* 13px */
}

.abena-v3-info-banner__icon > svg {
    width: 1rem;
    height: 1rem;
}

.abena-v3-info-banner__text > a {
    color: inherit;
    font-weight: var(--kendo-font-weight-bold);
    text-decoration: none;
}

/* Single-line banners centre the info icon against the text. */
.abena-v3-info-banner--center {
    align-items: center;
}

/* Generated-codes banner: the codes drop to their own bold line, and the info
   icon centres on the FIRST line rather than the whole (multi-line) block. */
.abena-v3-bed-management__generated {
    /* Design banner is 54px (its first line is stretched to 18px by the inline icon);
       our icon sits outside the text block, so pin the height instead. */
    min-height: 3.375rem;
    box-sizing: border-box;
}

/* Only inside the bed-management section (EditRoom): +16px on top of the section's 8px
   flex gap = 24px below the bed rows, per design. In AddChambre the same banner is a
   direct form child (gap 24) and needs no extra margin. */
.abena-v3-bed-management > .abena-v3-bed-management__generated {
    margin-top: 1rem;
}

.abena-v3-bed-management__generated .abena-v3-info-banner__icon {
    /* The design's first banner line is 18px tall (driven by its 18px info icon);
       sizing the icon wrapper the same keeps the banner at the design's 54px. */
    height: 1.125rem;
}

.abena-v3-bed-management__generated-codes {
    display: block;
    margin-top: 0.125rem;
    font-weight: 700;
}

/* ---- Sections 6 + 7: bed management (count pills + dynamic list) ---- */
.abena-v3-bed-management {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 8px — per design .rp-field */
}

.abena-v3-bed-management__title,
.abena-v3-bed-management__list-title {
    font-family: 'Roboto', var(--kendo-font-family);
    font-size: var(--kendo-font-size-md);
    font-weight: var(--kendo-font-weight-normal);
    line-height: 1.42;
    color: #4F4F4F; /* per design .rp-label */
}

.abena-v3-bed-management__list-title {
    /* +16px on top of the 8px flex gap = 24px below the pills — the design treats
       "Nom des lits" as a separate .rp-field within the form's 24px gap. */
    margin-top: 1rem;
}

.abena-v3-bed-management__count-pills {
    display: flex;
    gap: 0.5rem;
}

.abena-v3-bed-management__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.25rem;                /* 36px */
    padding: 0 1rem;                /* 16px sides — width hugs content, no min-width */
    border: 0.0625rem solid var(--sn-rail);
    border-radius: 0.5rem;
    background: #FFFFFF;
    color: var(--sn-text);
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-font-size-md);
    font-weight: var(--kendo-font-weight-medium);
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.abena-v3-bed-management__pill:hover {
    background: var(--sn-surface-subtle);
}

.abena-v3-bed-management__pill.is-selected {
    background: var(--abena-color-action-blue);
    border-color: var(--abena-color-action-blue);
    color: #FFFFFF;
}

/* Disabled pill — dashed grey outline + muted fill (not opacity-faded), per design. */
.abena-v3-bed-management__pill:disabled {
    background: #F2F4F6;
    border-style: dashed;
    border-color: var(--sn-rail);
    color: var(--sn-text-muted);
    cursor: not-allowed;
}

.abena-v3-bed-management__pill:disabled:hover {
    background: #F2F4F6;
}

.abena-v3-bed-management__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;                   /* 12px between bed-letter rows, per design */
    /* +4px on top of the 8px flex gap = 12px below "Nom des lits", per design .ep-manage */
    margin-top: 0.25rem;
}

.abena-v3-bed-management__row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.abena-v3-bed-management__row-label {
    font-family: 'Roboto', var(--kendo-font-family);
    font-size: 0.8125rem;           /* 13px — per design .rp-sublabel */
    font-weight: var(--kendo-font-weight-normal);
    line-height: 1.42;
    color: var(--sn-text-muted);
}

.abena-v3-bed-management__row-controls {
    display: flex;
    align-items: center;
    gap: 0.625rem;                  /* 10px — per design .ep-manage-row */
}

.abena-v3-bed-management__row-input {
    flex: 1 1 auto;                              /* take almost the full row width */
    min-width: 0;
    height: 2.25rem;
    padding: 0 0.75rem;
    border: 0.0625rem solid var(--sn-rail);
    border-radius: 0.5rem;
    background: #FFFFFF;
    color: var(--abena-color-page-title); /* #0D1740 — per design .rp-input */
    font-family: 'Roboto', var(--kendo-font-family);
    font-size: var(--kendo-font-size-md);
    outline: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.abena-v3-bed-management__row-input:focus {
    border-color: var(--abena-color-action-blue);
    box-shadow: 0 0 0 0.125rem var(--abena-color-focus-ring-soft);
}

.abena-v3-bed-management__row-trash {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.375rem;                /* 38px — per design .ep-trash */
    height: 2.375rem;
    padding: 0;
    border: none;
    border-radius: 0.5rem;          /* 8px — per design .ep-trash */
    background: transparent;
    color: var(--sn-text-muted);    /* #565D79 — per design .ep-trash glyph */
    /* Blazicons sizes its <svg> at 1em — this is the design's 19px glyph. */
    font-size: 1.1875rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 120ms ease, color 120ms ease;
}

.abena-v3-bed-management__row-trash:hover {
    background: rgba(187, 72, 65, 0.08); /* per design .ep-trash:hover */
    color: var(--kendo-color-error-on-surface);
}

/* Occupied beds can't be deleted — light grey glyph + inert, per design .ep-trash:disabled. */
.abena-v3-bed-management__row-trash:disabled {
    color: var(--sn-rail);          /* #DFE3E8 */
    cursor: not-allowed;
}

.abena-v3-bed-management__row-trash:disabled:hover {
    background: transparent;
    color: var(--sn-rail);
}

/* No "Supprimer le lit" tooltip on a disabled (occupied) trash. */
.abena-v3-bed-management__row-trash:disabled[data-tooltip]:hover::after {
    opacity: 0;
    visibility: hidden;
}

/* Icon size comes from the button's font-size (Blazicons renders the svg at 1em). */

/* Custom dark tooltip on trash hover (matches Figma). */
.abena-v3-bed-management__row-trash[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    /* Sits to the LEFT of the trash — the input is now full-width so the trash
       hugs the panel's right edge; a right-side tooltip would overflow the panel
       and create a horizontal scrollbar. */
    right: calc(100% + 0.5rem);
    top: 50%;
    transform: translateY(-50%);
    padding: 0.375rem 0.625rem;
    border-radius: 0.375rem;
    background: var(--kendo-color-dark-active);
    color: #FFFFFF;
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-font-size-sm);
    font-weight: var(--kendo-font-weight-medium);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 120ms ease, visibility 120ms ease;
    z-index: 10100;
}

.abena-v3-bed-management__row-trash[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}

/* ---- Delete-room action (link + occupied warning banner) ---- */
.abena-v3-delete-action {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.abena-v3-delete-action__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;                    /* 8px — per design .ep-delete */
    height: 2.625rem;               /* 42px */
    padding: 0 1.125rem;            /* 18px sides */
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--kendo-color-error-on-surface);
    font-family: 'Roboto', var(--kendo-font-family);
    font-size: var(--kendo-font-size-md);
    font-weight: var(--kendo-font-weight-bold);
    cursor: pointer;
    transition: opacity 120ms ease;
    align-self: center;
}

.abena-v3-delete-action__button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.abena-v3-delete-action__button > svg {
    width: 1rem;
    height: 1rem;
}

.abena-v3-delete-action__warning {
    position: relative;
    background: var(--kendo-color-primary-subtle);
    padding: 0.5rem 0.75rem 0.5rem 1rem;
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-font-size-md);
    color: var(--kendo-color-primary-on-subtle);
    line-height: 1.42;
}

.abena-v3-delete-action__warning::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0.1875rem;
    background: var(--kendo-color-primary-emphasis);
}

.abena-v3-delete-action__warning p {
    margin: 0 0 0.25rem;
}

.abena-v3-delete-action__warning a {
    color: inherit;
    font-weight: var(--kendo-font-weight-bold);
    text-decoration: underline;
}

/* ---------- Resident page top bar ---------- */
.abena-v3-top-bar {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Match the grid container's sizing so the topbar's right edge aligns with the grid's. */
    box-sizing: border-box;
    width: 100%;
    align-self: stretch;
    margin: 0;
    padding-right: 0;
    padding-left: 0;
}

.abena-v3-page-title {
    margin: 0;
    font-family: "Rounded Mplus 1c Bold", var(--kendo-font-family);
    font-size: var(--kendo-h5-font-size);
    line-height: var(--kendo-h5-line-height);
    font-weight: var(--kendo-font-weight-bold);
    color: var(--abena-color-title-deep);
}

/* Top-bar header: establishment caption + page title on the left,
   "Ajouter un résident" outlined button on the right. */
.abena-v3-top-bar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

/* Page-level header — spans full page width with its own surface and a bottom rule.
   Fixed 78px height matches the global top bar (var(--top-bar-height)), which is forced
   to 0 on these no-topbar screens — so the literal value is used here. */
.abena-v3-top-bar-header--page {
    box-sizing: border-box;
    height: 78px;
    background: var(--kendo-color-app-surface, #FFFFFF);
    border-bottom: 1px solid var(--sn-border);
    padding: 1rem 1.5rem;
}

/* When the left rail hover-expands (overlay mode) it covers the left edge of the page
   content. These custom RR2 headers host the establishment selector (like the global top
   bar), so shift them clear of the expanded rail instead of letting it hide the selector —
   mirrors `body:has(.rail.k-drawer-expanded) .abs-topbar` in Abena-TopBar.css. Paired with
   `.rail` to ignore the nested admin sub-drawer, which also carries `.k-drawer-expanded`. */
body:has(.rail.k-drawer-expanded) .abena-v3-top-bar-header--page,
body:has(.rail.k-drawer-expanded) .rooms-config-page__header,
body:has(.rail.k-drawer-expanded) .resident-view-page__header {
    padding-left: calc(var(--rail-width) - var(--rail-mini-width) + 1.5rem);
}

/* Push (pinned) mode already reserves the full rail width, so no compensation is needed —
   keep the default left padding (matches `.drawer-push-mode .abs-topbar`). */
.drawer-push-mode .abena-v3-top-bar-header--page,
.drawer-push-mode .rooms-config-page__header,
.drawer-push-mode .resident-view-page__header {
    padding-left: 1.5rem !important;
}

.abena-v3-top-bar-header__title {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    padding-left: 1.5rem;
}

.abena-v3-top-bar-header__caption {
    font-family: var(--kendo-font-family);
    font-size: 0.8125rem;
    line-height: 1.3;
    font-weight: var(--kendo-font-weight-normal);
    color: var(--sn-text-muted);
}

.abena-v3-top-bar-header__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    padding-right: 3.5rem;
}


.abena-v3-top-bar-action {
    box-sizing: border-box;
    padding: 0.5rem;
    gap: 0.25rem;
    border: 1px solid var(--abena-color-action-blue);
    border-radius: 0.75rem;                      /* 12px */
    background: #FFFFFF;
    color: var(--kendo-color-info-active);
    font-family: var(--kendo-font-family);
    font-size: 0.675rem;
    font-weight: 700;
    line-height: 1.42;
}

.abena-v3-top-bar-action:hover:not(.disabled) {
    background: var(--abena-color-action-blue-soft);
}

.abena-v3-top-bar-action i {
    width: 0.875rem;
    height: 0.875rem;
    font-size: 0.875rem;
    color: var(--abena-color-action-blue);
}

/* Pill styling for the LocalData/NetSoins TelerikButtonGroup in the new header. */
.abena-v3-top-bar-button-group {
    border-radius: 999px;
    overflow: hidden;
}

.abena-v3-top-bar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%; /* force full width so the right side reaches the same right edge as the grid */
    margin-bottom: 0.75rem;
}

.abena-v3-top-bar-row__left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.3125rem; /* keep row height stable when empty (matches search bar ~37px) */
}

/* Total residents count — Bold 14px, color #0D1740 per Figma */
.abena-v3-resident-count {
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-font-size);
    line-height: 1.42;
    font-weight: var(--kendo-font-weight-normal);
    color: var(--abena-color-page-title);
}

.abena-v3-resident-count strong {
    font-weight: var(--kendo-font-weight-bold);
}

.abena-v3-link-button {
    border: 1px solid transparent;
    background: transparent;
    padding: 0.25rem 0.5rem; /* 4px 8px per Figma */
    border-radius: 0.5rem; /* 8px per Figma */
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-font-size);
    line-height: 1.5;
    font-weight: var(--kendo-font-weight-medium);
    color: var(--abena-color-action-blue);
    cursor: pointer;
}

.abena-v3-link-button:hover:not(:disabled) {
    text-decoration: underline;
}

.abena-v3-link-button:focus-visible {
    outline: 2px solid var(--abena-color-action-blue);
    outline-offset: 2px;
}

.abena-v3-assign-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    height: 1.875rem; /* 30px */
    padding: 0 0.75rem; /* 12px */
    border: 0.0625rem solid var(--abena-color-action-blue);
    border-radius: 0.5rem;
    background: var(--abena-color-action-blue);
    font-family: 'Roboto', sans-serif;
    font-size: 0.8125rem;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s;
}

.abena-v3-assign-btn:hover {
    background: var(--kendo-color-info-active);
    border-color: var(--kendo-color-info-active);
}

.abena-v3-assign-btn:focus-visible {
    box-shadow: 0 0 0 0.125rem var(--abena-color-focus-ring, rgba(0, 68, 194, 0.25));
    outline: none;
}

.abena-v3-top-bar-row__right {
    display: flex;
    align-items: center;
    margin-left: auto; /* anchor to right edge regardless of what's on the left */
}

/* Grid topbar search (all pages) — white field + blue magnifier, matching the
   side-panel search. Overrides the legacy `.search-with-icon` defaults from
   Abena-v2.css with higher specificity (.abena-v3-grid-search .search-with-icon
   = 2 classes) plus !important where the v2 rule used it.
   Do NOT use `.abena-v3-search` (that class belongs to a different design). */
.abena-v3-grid-search {
    flex: 0 0 15rem;
    width: 15rem;
    min-width: 8rem;
}

.abena-v3-grid-search .search-with-icon {
    box-sizing: border-box;
    width: 100%;
    height: 2.3125rem; /* 37px per Figma */
    background-color: #fff;
    border: 0.0625rem solid #E0E0E0; /* 1px */
    border-radius: 0.5rem; /* 8px per Figma */
    overflow: hidden;
}

.abena-v3-grid-search .search-with-icon > span,
.abena-v3-grid-search .search-with-icon .k-textbox,
.abena-v3-grid-search .search-with-icon .k-input,
.abena-v3-grid-search .search-with-icon .k-input-md,
.abena-v3-grid-search .search-with-icon .k-input-solid {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important; /* zero out Telerik's intermediate-wrapper padding so only the inner input sets text position */
    width: 100%;
    height: 100%;
}

.abena-v3-grid-search .search-with-icon i {
    left: 0.875rem; /* 14px */
    color: var(--kendo-color-secondary-emphasis);
    font-size: 1rem; /* 16px */
}

.abena-v3-grid-search .search-with-icon input,
.abena-v3-grid-search .search-with-icon .k-input-inner {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    height: 2.3125rem !important;
    padding: 0.5rem 0.875rem 0.5rem 2.5rem !important; /* left 40px = icon + gap */
    color: var(--abena-color-page-title); /* #0D1740 */
    font-size: 0.875rem;
    font-weight: var(--kendo-font-weight-normal);
}

.abena-v3-grid-search .search-with-icon input::placeholder,
.abena-v3-grid-search .search-with-icon .k-input-inner::placeholder {
    color: var(--sn-text-muted);
    opacity: 1;
}

/* ---------- Resident grid card ----------
   Card styling now lives on .k-grid-aria-root (the table surface) so the
   pager (a sibling of .k-grid-aria-root inside .k-grid) can render as its
   own detached gray bar with a 12px gap above. The wrapper stays a plain
   container — see the .abena-v3-grid block above for the transparency reset. */

/* Telerik grid's outer/inner layers stay transparent — the white card now lives
   on .k-grid-aria-root (see "Grid body" rule below) so the pager (.k-grid-pager)
   can render as its own detached gray bar with a visible 12px gap above it. */
.abena-v3-grid .k-grid,
.abena-v3-grid .k-grid-md,
.abena-v3-grid .k-grid-content,
.abena-v3-grid .k-grid-table-wrap {
    background: transparent !important;
    border: none !important;
}

/* Telerik tables default to border-collapse: separate, in which mode browsers
   skip painting <tr> borders. Force collapse so the row-level border-top below
   actually renders. */
.abena-v3-grid .k-grid-table {
    border-collapse: collapse;
}

.abena-v3-grid .k-grid-header,
.abena-v3-grid .k-grid-header-wrap,
.abena-v3-grid .k-table-thead,
.abena-v3-grid .k-grid-header .k-table-row {
    background: transparent !important;
    border: none !important;
}

.abena-v3-grid .k-grid-header .k-table-th {
    background: transparent !important;
    border: none !important;
    color: #4F4F4F !important;
    font-weight: var(--kendo-font-weight-medium);
    font-size: var(--kendo-font-size);
    text-align: left !important;
    padding: 0.25rem 0.75rem !important;
}

/* Sortable header cells wrap title in `.k-cell-inner > .k-link > .k-column-title`.
   Telerik centers the link contents by default — pin them left and zero out
   the link's own padding so the title aligns with body-cell text. */
.abena-v3-grid .k-grid-header .k-cell-inner {
    margin: 0 !important;
    padding: 0 !important;
    justify-content: flex-start !important;
}

.abena-v3-grid .k-grid-header .k-link {
    padding: 0 !important;
    justify-content: flex-start !important;
}

/* Body rows: transparent bg, 1px top border per Figma (each "Chambre" has strokeWeight 1px 0px 0px).
   Scope to .k-grid-content so the header row never picks up a border. */
.abena-v3-grid .k-grid-content .k-table-row,
.abena-v3-grid .k-grid-content .k-master-row,
.abena-v3-grid .k-grid-content .k-alt,
.abena-v3-grid .k-grid-content .k-table-alt-row {
    background: transparent !important;
    border-top: 1px solid var(--sn-rail) !important;
    border-bottom: none !important;
}

.abena-v3-grid .k-table-td {
    border: none !important;
    background: transparent !important;
    vertical-align: middle;
    padding: 0.375rem 0.75rem !important;
    font-size: var(--kendo-font-size);
}

.abena-v3-grid .k-grid-content .k-table-row,
.abena-v3-grid .k-master-row {
    height: 3.125rem;
}

.abena-v3-grid .k-grid-header .k-table-row {
    height: 2.625rem;
}

.abena-v3-grid .room-grid .k-table-td {
    vertical-align: top;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.abena-v3-grid .room-grid .room-number-cell,
.abena-v3-grid .room-grid .room-loc-cell {
    display: flex;
    align-items: center;
    min-height: 3.125rem;
}

.abena-v3-loc {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--sn-text-muted);
    white-space: nowrap;
    overflow: hidden;
}
.abena-v3-loc__seg {
    overflow: hidden;
    text-overflow: ellipsis;
}
.abena-v3-loc__seg--last {
    color: var(--sn-text);
}
.abena-v3-loc__sep {
    font-size: 0.9375rem;
    color: var(--sn-text-muted);
    flex-shrink: 0;
}

/* Override the global rule in Abena-main.css (`.k-grid .k-table-row.k-selected > .k-table-td`)
   that forces font-family: Gilroy and font-weight: 800 on every selected grid cell. Inherit
   so selected cells render with the same font stack and weight as unselected ones. */
.abena-v3-grid .k-table-row.k-selected > .k-table-td,
.abena-v3-grid .k-master-row.k-selected > .k-table-td {
    color: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
}

/* v3 grid checkbox */
.abena-v3-grid .k-checkbox {
    width: 1.125rem;
    height: 1.125rem;
    border: 1px solid var(--sn-rail) !important;
    border-radius: 0.25rem !important;           /* 4px */
    background-color: #FFFFFF !important;
}

.abena-v3-grid .k-checkbox:checked,
.abena-v3-grid .k-checkbox.k-checked {
    background-color: var(--kendo-color-info-on-surface) !important;
    border-color: var(--kendo-color-info-on-surface) !important;
}

/* Indeterminate: white box with a dark-blue dash glyph (override Telerik's white-stroke SVG). */
.abena-v3-grid .k-checkbox:indeterminate,
.abena-v3-grid .k-checkbox.k-indeterminate {
    background-color: #FFFFFF !important;
    border-color: var(--sn-rail) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230044C2' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e") !important;
}

.abena-v3-grid .k-checkbox:focus,
.abena-v3-grid .k-checkbox.k-focus {
    box-shadow: 0 0 0 0.125rem var(--abena-color-focus-ring, rgba(0, 68, 194, 0.25)) !important;
}

.abena-v3-resident-name {
    font-weight: var(--kendo-font-weight-medium);
}

.abena-v3-cell-placeholder {

}

.abena-v3-no-room {
    color: var(--sn-text-muted);
}

/* Lit (bed) cell — bed letter on the left, fa-bed icon on the right */
.abena-v3-bed-cell {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
}

.abena-v3-bed-cell__text {
    flex: 1;
}

.abena-v3-bed-cell__icon {
    color: var(--sn-text-muted);
    font-size: 0.875rem;
}

.room-bed-row {
    height: 3.125rem;
    flex: 0 0 3.125rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    border: none;
    padding: 0 0.25rem;
    overflow: visible;
}

.room-bed-row + .room-bed-row {
    border-top: 0.0625rem dashed var(--sn-divider);
}

.room-beds {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: visible;
}

.room-bed-row--checkbox {
    justify-content: center;
    padding-top: 0.3rem;
}

.room-number-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.room-number-cell__temp-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: var(--sn-surface-2, #eef0f3);
    color: var(--sn-text-primary);
    font-size: 0.875rem;
    flex-shrink: 0;
}
()
.room-bed-row--action {
    justify-content: center;
}

.abena-v3-section-breadcrumb {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* Group tag — pill with a colored dot driven by EtablissementGroupEntity.Color */
.abena-v3-group-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;                                 /* 8px */
    padding: 0 0.5rem;                           /* 0 8px */
    height: 1.875rem;
    max-width: 100%;
    background-color: #F8F9FB;
    font-family: var(--kendo-font-family);
    border-radius: 0.375rem;                     /* 6px */
    font-size: 0.8125rem;
    line-height: 1;
    color: #4F4F4F;
}

.abena-v3-group-tag__dot {
    width: 0.5rem;                               /* 8px */
    height: 0.5rem;                              /* 8px */
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--abena-v3-group-color, #8F49D4);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--abena-v3-group-color, #8F49D4) 25%, white);
}

.abena-v3-group-tag__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Multi-select state inside the resident top-bar row.
   When ≥1 resident is selected, the regular `.abena-v3-top-bar-row__left`
   (count + "Tout sélectionner") is replaced with this variant: same slot,
   plus a destructive "Sortie résidents" button. */
.abena-v3-top-bar-row__left.abena-v3-multi-select {
    gap: 0.5rem;
}

/* "Sortie résidents" — solid red danger button per Figma (#CA1400, white text, 30px). */
.abena-v3-multi-select-exit {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    height: 1.875rem; /* 30px */
    padding: 0.25rem 0.5rem; /* 4px 8px */
    border: 1px solid var(--kendo-color-error-on-surface);
    border-radius: 0.5rem;
    background-color: var(--kendo-color-error-on-surface);
    color: #FFFFFF;
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-font-size-sm); /* 12px */
    line-height: 1.5;
    white-space: nowrap;
    flex-shrink: 0;
    font-weight: var(--kendo-font-weight-bold);
    cursor: pointer;
}

.abena-v3-multi-select-exit:hover:not(:disabled) {
    background-color: var(--kendo-color-error-hover);
    border-color: var(--kendo-color-error-hover);
}

.abena-v3-multi-select-exit:focus-visible {
    outline: 2px solid var(--kendo-color-error-on-surface);
    outline-offset: 2px;
}

.abena-v3-multi-select-exit > i {
    font-size: 0.875rem;
}

.abena-v3-multi-select-action {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    height: 1.875rem; /* 30px */
    padding: 0.25rem 0.5rem; /* 4px 8px */
    border: 1px solid var(--kendo-color-info-on-surface);
    border-radius: 0.5rem;
    background-color: var(--kendo-color-info-on-surface);
    color: #FFFFFF;
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-font-size-sm); /* 12px */
    line-height: 1.5;
    white-space: nowrap;
    flex-shrink: 0;
    font-weight: var(--kendo-font-weight-bold);
    cursor: pointer;
}

.abena-v3-multi-select-action:hover:not(:disabled) {
    background-color: var(--kendo-color-info-hover);
    border-color: var(--kendo-color-info-hover);
}

.abena-v3-multi-select-action:focus-visible {
    outline: 2px solid var(--kendo-color-info-on-surface);
    outline-offset: 2px;
}

.abena-v3-multi-select-action > i {
    font-size: 0.875rem;
}

/* ============================================================
   EditMultipleRoomsModal — multi-room bulk edit sidebar
   ============================================================ */

/* Outer wrapper — grey rounded container holding both the toggle and the rows */
.abena-v3-room-summary {
    background: var(--sn-surface-subtle);
    border-radius: 0.75rem;
    padding: 0.5rem 0.625rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.placement-right .abena-v3-room-summary {
    gap: 0.625rem;
    justify-content: center;
}
/* Fold/unfold trigger — transparent button living inside the grey wrapper */
.abena-v3-room-summary__toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: none;
    background: transparent;
    color: #4F4F4F;
    font-family: 'Roboto', var(--kendo-font-family);
    font-size: var(--kendo-font-size-md);   /* 14px */
    font-weight: 400;
    cursor: pointer;
    text-align: left;
}

.abena-v3-room-summary__chevron {
    color: var(--sn-text-muted);
    transition: transform 200ms ease;
    transform: rotate(90deg);
    display: inline-block;
    font-size: 1rem;
    line-height: 1;
}

.abena-v3-room-summary__chevron.is-open {
    transform: rotate(-90deg);
}

/* Animatable wrapper — reuse the 0fr → 1fr grid trick from .abena-v3-sidenav__children-wrapper */
.abena-v3-room-summary__list-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.abena-v3-room-summary__list-wrapper.is-open {
    grid-template-rows: 1fr;
}

.abena-v3-room-summary__list {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;                       /* small gap so the grey wrapper shows between rows */
}

.abena-v3-room-summary__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--kendo-color-app-surface);
    border-radius: 0.5rem;
    border: 0.0625rem solid transparent;
}

.placement-right .abena-v3-room-summary__row {
    padding: 0.8125rem 0.75rem;
}

.abena-v3-room-summary__code {
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-font-size-md);
    font-weight: var(--kendo-font-weight-bold);
    color: var(--sn-text);
}

.abena-v3-room-summary__indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem; 
    margin-left: auto;
}

.abena-v3-room-summary__dots {
    display: inline-flex;
    gap: 0.25rem;
}

.abena-v3-room-summary__dot {
    width: 0.6875rem;               /* 11px, per design .rc-dot */
    height: 0.6875rem;
    border-radius: 50%;
    background: var(--sn-border);   /* #EFF1F4 — per design .rc-dot.free */
    border: 0.125rem solid var(--sn-rail); /* #DFE3E8 */
    box-sizing: border-box;
}

.abena-v3-room-summary__dot.is-occupied {
    background: #FFD040;
    border-color: #BF9000;
}

.abena-v3-room-summary__fraction {
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-font-size-sm);
    color: var(--sn-text-muted);
    min-width: 1.25rem;
    text-align: right;
}

/* ============================================================
   RoomsConfigPage — establishment configuration (skeleton)
   ============================================================ */

/* Page root — fills the available viewport height; columns inside scroll.
   The wrapping `.abs-page` is `display: block` with `height: auto`, so we can't
   rely on `height: 100%` cascading. Instead we reserve the chrome around the
   page (top bar ~7.875rem + .abs-page padding/margin ~3rem) with calc().
   Same approach used elsewhere in Abena-main.css (search for `calc(100vh -`). */
.rooms-config-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--top-bar-height));
    min-height: 0;          /* lets flex children shrink below content size so the body can scroll */
    width: 100%;
}

.abs-page:has(.rooms-config-page){
    padding-left: 0 !important;
    margin-left: 0 !important;
    padding-top: 0 !important;
}

/* Header — fixed-height row at the top, never scrolls with the body.
   Layout: subtitle + title on the left, primary action on the right. */
.rooms-config-page__header {
    box-sizing: border-box;
    height: 78px;                 /* match the global top bar height (see --page header note) */
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 0.0625rem solid var(--sn-border);
    background: var(--kendo-color-app-surface);
}

.rooms-config-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;
}

.rooms-config-page__back:hover {
    background: var(--sn-rail);
}

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

.rooms-config-page__back i {
    font-size: 0.875rem;
}

.rooms-config-page__titles {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 1rem;
    min-width: 0;
    flex: 1 1 auto;
}


.rooms-config-page__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.abs-page:has(.rooms-config-page__body){
    padding-right: 0 !important;
    margin-right: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}   

/* Body — two-column layout filling all remaining vertical space. */
.rooms-config-page__body {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 30.75rem 1fr;   /* 492px left column = 460px card + 24+8px pane padding (scrollbar now lives inside the card) → 16px gap, per design */
    min-height: 0;          /* mandatory so child scroll containers actually scroll */
}

/* Each pane scrolls independently when its content overflows. */
.rooms-config-page__left,
.rooms-config-page__right {
    overflow-y: auto;
    min-height: 0;          /* same trick for the grid item */
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* 24px horizontal padding around the inner sections-config nav so the inner
   panel ends up at 368px (416 − 24 − 24). */
.rooms-config-page__left {
    padding-top: 0;            /* align left card top with the right card (right pane has padding-top: 0) */
    padding-left: 1.5rem;
    padding-right: 0.5rem;     /* smaller gap to the right pane */
    overflow: hidden;          /* the tree scrolls INSIDE the card (scrollbar inside), not the pane */
    display: flex;
    flex-direction: column;
}

.rooms-config-page__right {
    background-color: var(--sn-surface-subtle);
    padding-left: 0.5rem;      /* smaller gap to the left pane */
    padding-right: 2rem;     /* align right edge with the header's 1.5rem right padding */
    padding-bottom: 1rem;
    overflow: hidden;          /* the section list scrolls INSIDE the card; the card stays put */
    display: flex;
    flex-direction: column;
}

/* ---------- Reusable view card ---------- */
.abena-v3-view-card {
    position: relative;
    background: #FFFFFF;
    border: 1px solid var(--sn-border);
    border-radius: 0.75rem;
    padding: 1.125rem;
    box-shadow: 0 0.125rem 0.625rem #EDF1FB;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.abena-v3-view-card__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.abena-v3-view-card__title {
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-font-size-lg);
    font-weight: var(--kendo-font-weight-bold);
    line-height: 1.5;
    color: var(--abena-color-page-title);
    flex: 1;
}

.abena-v3-view-card__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 1rem;
}

.abena-v3-view-card__note {
    margin: 0;
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-font-size-sm);
    color: var(--abena-color-page-title);
    white-space: pre-wrap;
    line-height: 1.5;
}

.abena-v3-view-card__note--empty {
    color: var(--sn-text-muted);
}

/* Editable variant of the note: same typography as the read-only paragraph
   so swapping in/out of edit mode doesn't reflow text styling. */
.abena-v3-view-card__note-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.625rem;
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-font-size-sm);
    line-height: 1.5;
    color: var(--abena-color-page-title);
    background: #FFFFFF;
    border: 0.0625rem solid rgba(0, 0, 0, 0.08);
    border-radius: 0.5rem;
    resize: vertical;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.abena-v3-view-card__note-input:focus {
    outline: none;
    border-color: #0058E9;
    box-shadow: 0 0 0 0.125rem rgba(0, 88, 233, 0.3);
}

.abena-v3-view-card__placeholder {
    min-height: 4.5rem;
    background: #F5F5F5;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-font-size-md);
    font-weight: var(--kendo-font-weight-normal);
    line-height: 1.42;
    color: #666666;
}

.abena-v3-view-card__edit {
    position: absolute;
    right: 0.5rem;
    width: 1.625rem;
    height: 1.625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem; 
    border: none;
    background: transparent;
    border-radius: 0.5rem;
    color: #3D3D3D;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.abena-v3-view-card__edit-top {
    top: 0.5rem;
}

.abena-v3-view-card__edit:hover {
    background: var(--sn-border);
}

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

.abena-v3-view-card__edit i {
    font-size: 0.875rem;
}

/* Confirm + cancel buttons that replace the pencil while a card is in edit
   mode. Same hit-area as the pencil; confirm gets the action-blue accent,
   cancel stays neutral. */
.abena-v3-view-card__edit-actions {
    position: absolute;
    right: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.abena-v3-view-card__edit-confirm,
.abena-v3-view-card__edit-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

/* Same look as the inline-edit confirm: filled blue square, white check. */
.abena-v3-view-card__edit-confirm {
    width: 1.625rem;
    height: 1.625rem;
    border: none;
    border-radius: 0.5rem;
    background: #0044C2;
    color: #FFFFFF;
    font-size: 0.875rem;
}
.abena-v3-view-card__edit-confirm:hover { background: #003598; }

/* Bare X — no background. */
.abena-v3-view-card__edit-cancel {
    width: 1.625rem;
    height: 1.625rem;
    border: none;
    background: transparent;
    color: #565D79;
    font-size: 1rem;
    border-radius: 0.5rem;
}
.abena-v3-view-card__edit-cancel:hover { color: #252E53; }

/* Slightly tighten the row when it hosts dropdowns instead of plain text. */
.abena-v3-view-card__row--edit {
    align-items: flex-start;
}

/* Identity card in edit mode: stack the four inputs vertically inside the
   detail column, replacing the read-only name/birth/gender lines. The
   width:100% on all Telerik input wrappers makes every field span the
   detail column instead of using its intrinsic content-based width. */
.abena-v3-identity-card__edit {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.abena-v3-identity-card__edit > *,
.abena-v3-identity-card__edit .k-textbox,
.abena-v3-identity-card__edit .k-input,
.abena-v3-identity-card__edit .k-datepicker,
.abena-v3-identity-card__edit .k-dropdownlist,
.abena-v3-identity-card__edit .k-numerictextbox {
    width: 100%;
    max-width: 100%;
}

/* Match the field labels in the identity-edit form to the labels used by the
   physical-info card (`.info-element .info-title`): same font family, sm
   size, normal weight, muted colour. AbsLabel renders a div that defaults
   to `k-font-size-xs`, which would otherwise look smaller than the
   read-only labels next door. */
.abena-v3-identity-card__edit .k-font-size-xs {
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-font-size-sm);
    font-weight: var(--kendo-font-weight-normal);
    line-height: 1.5;
    color: var(--sn-text-muted);
}

/* Make room for the absolute-positioned confirm/cancel buttons that float at
   the top-right corner — the first input would otherwise sit right under
   them. Activates only while the edit form is rendered. */
.abena-v3-identity-card:has(.abena-v3-identity-card__edit) {
    padding-top: 2rem;
}

/* AbsDropdown's `.abs-dropdown-clear` X is hard-positioned with a fixed top
   offset that assumes a labelled, full-size dropdown. In the placement-card
   edit row we use Dense + invisible label, so the input sits at the bottom
   of the wrapper and the default offset is wrong. Anchor the X from the
   bottom instead — the dense input is `k-h-9` (2.25rem) tall, so an icon
   ~1rem tall centers when its bottom is 0.625rem from the wrapper bottom. */
.abena-v3-view-card__row--edit .abs-dropdown-clear {
    top: auto;
    bottom: 0.625rem;
    transform: none;
}


.abena-v3-identity-card {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background: #F8F9FB;
    border-radius: 0.5rem; 
    box-shadow: 0 0.25rem 0.375rem rgba(0, 68, 194, 0.06);
}

.abena-v3-identity-card__avatar {
    width: 5.625rem;
    height: 5.625rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--sn-border);
    color: var(--sn-text-muted);
    border: 0.25rem solid #E0E0E0;  
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    overflow: hidden;
}

.abena-v3-identity-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.abena-v3-identity-card__details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    padding-right: 1.75rem;
}

.abena-v3-identity-card__name {
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-font-size-lg);
    font-weight: var(--kendo-font-weight-semibold);
    line-height: 1.5;
    color: #252E53;
}

.abena-v3-identity-card__birth {
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-font-size-sm);
    font-weight: var(--kendo-font-weight-normal);
    line-height: 1.5;
    color: var(--sn-text-muted);
}

.abena-v3-identity-card__gender {
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-font-size-md);
    font-weight: var(--kendo-font-weight-medium);
    line-height: 1rem;
    color: #252E53;
}


/* ---------- Compound info stack (sidebar's grouped sections) ---------- */
.abena-v3-info-stack {
    background: #FFFFFF;
    border-radius: 0.75rem;
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.abena-v3-info-stack__section {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0 1rem;
}

.abena-v3-info-stack__divider {
    height: 0.3125rem;
    background: #F8F9FB;
    align-self: stretch;
}

.abena-v3-info-stack__small-divider {
    height: 0.125rem;
    background: #F8F9FB;
    align-self: stretch;
}

.abena-v3-info-stack__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.abena-v3-info-stack__icon {
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.abena-v3-info-stack__icon i {
    font-size: 0.875rem;
}

.abena-v3-info-stack__icon--physical {
    background: #E0F6E8;
    color: var(--kendo-color-success);
}

.abena-v3-info-stack__icon--medical {
    background: #F0E0FF;
    color: #8F49D4;
}

.abena-v3-info-stack__icon--incontinence {
    background: #FFF3D6;
    color: #B8860B;
}

.abena-v3-info-stack__icon--elimination {
    background: #FFE3E1;
    color: #C84545;
}

/* Inline status pills used inside ResidentViewInfoElement values
   (e.g. incontinence-degree severity, elimination autonomy).
   Matches the "GIR / _Base Chip" Figma spec: 20px tall, fit-content
   width, 4px radius, 2px/6px padding, Roboto 500 12px/14px. */
.abena-v3-info-pill {
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    width: fit-content;
    padding: 0.125rem 0.375rem;                  /* 2px 6px */
    border-radius: 0.25rem;                      /* 4px */
    font-family: 'Roboto', var(--kendo-font-family);
    font-style: normal;
    font-weight: 500;
    font-size: 0.75rem;                          /* 12px */
    line-height: 0.875rem;                       /* 14px */
    white-space: nowrap;
}

.abena-v3-info-pill--severity-mild {
    background: #E0F4E2;
    border: 1px solid #7BC68A;
    color: #2E7D32;
}

.abena-v3-info-pill--severity-moderate {
    background: #FFF4D6;
    border: 1px solid #E8B845;
    color: #8A6500;
}

.abena-v3-info-pill--severity-severe {
    background: #FEEAD3;
    border: 1px solid #F7A160;
    color: #D45E2D;
}

.abena-v3-info-pill--severity-very-severe {
    background: #FDE0DE;
    border: 1px solid #E8635E;
    color: #B3261E;
}

.abena-v3-info-pill--autonomy {
    background: #DCE7FB;
    border: 1px solid #6E9CEB;
    color: #1D4FAE;
}

.abena-v3-info-stack__title {
    flex: 1;
    margin: 0;
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-font-size-md);
    font-weight: var(--kendo-font-weight-bold);
    line-height: 1.42;
    color: var(--sn-text-muted);
}

.abena-v3-info-stack__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.75rem;
}

.abena-v3-info-stack .info-element,
.abena-v3-view-card .info-element {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.abena-v3-info-stack .info-element .info-title,
.abena-v3-view-card .info-element .info-title {
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-font-size-sm);
    font-weight: var(--kendo-font-weight-normal);
    line-height: 1.5;
    color: var(--sn-text-muted);
}

.abena-v3-info-stack .info-element .info-value,
.abena-v3-view-card .info-element .info-value {
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-font-size-md);
    font-weight: var(--kendo-font-weight-medium);
    line-height: 1rem;
    color: #252E53;
}

/* Secondary descriptive text shown in brackets after a primary value
   (e.g. "Bon (Peau intacte, sans rougeur ni lésion)" for État cutané).
   Slightly lighter weight, same colour family. */
.abena-v3-info-stack .info-element .info-value__hint,
.abena-v3-view-card .info-element .info-value__hint {
    margin-left: 0.25rem;
    font-family: 'Roboto', var(--kendo-font-family);
    font-style: normal;
    font-weight: 400;
    font-size: 0.875rem;                         /* 14px */
    color: #252E53;
}

/* ---------- GIR pill (legacy palette) ---------- */
.abena-v3-gir-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem 0.25rem 0;
    margin-top: 0.25rem;
}

.abena-v3-gir-pill__level {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #E8D1FF;
    color: #8F49D4;
    font-weight: var(--kendo-font-weight-bold);
    font-size: var(--kendo-font-size-sm);
}

.abena-v3-gir-pill__name {
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-font-size-sm);
    color: var(--abena-color-page-title);
}

/* ---------- Single tranche (label + box + optional quantity) ----------
   Per Figma: 69px wide column. The .abena-v3-tranche itself participates
   in the parent grid as a 3-row subgrid (label / box / quantity), so all
   labels across columns size to the tallest label and the boxes stay
   vertically aligned regardless of label length. */
.abena-v3-tranche {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / span 3;
    row-gap: 0.5rem;                             /* 8px */
    justify-items: center;
    width: 4.3125rem;                            /* 69px */
    flex-shrink: 0;
}

.abena-v3-tranche__label {
    width: 100%;
    min-height: 1rem;                            /* 16px */
    font-family: 'Roboto', var(--kendo-font-family);
    font-style: normal;
    font-weight: 500;
    font-size: 0.875rem;                         /* 14px */
    line-height: 1rem;                           /* 16px */
    color: #252E53;
    text-align: center;
    /* Allow long labels to wrap onto a second line. The subgrid above
       keeps every column's label row the same height so tiles still
       line up across the row. */
    word-break: break-word;
    overflow-wrap: anywhere;
}

.abena-v3-tranche__box {
    box-sizing: border-box;
    width: 4.3125rem;                            /* 69px */
    height: 5.4375rem;                           /* 87px */
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;                                /* 12px */
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.75rem;                      /* 12px */
    background: #F2F4F6;
}

/* When the box hosts a picto image, drop the grey background + border so
   only the picto's own design shows — otherwise the small letterbox slivers
   above and below the image surface as visible grey lines. */
.abena-v3-tranche__box:has(img) {
    background: transparent;
    border-color: transparent;
}

.abena-v3-tranche__box:has(img) .abena-v3-tranche__picto,
.abena-v3-tranche__box:has(img) .abena-v3-tranche__picto img {
    width: 100%;
    height: 100%;
}

.abena-v3-tranche__box:has(img) .abena-v3-tranche__picto img {
    /* No border-radius on the image: the picto PNG already contains its
       own rounded chip + product styling. Adding a 12px radius here clips
       the corners of the source image and visually crops the design. */
    object-fit: contain;
    display: block;
}

.abena-v3-tranche__picto {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.abena-v3-tranche__picto img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.abena-v3-tranche__quantity {
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-font-size-sm);
    font-weight: var(--kendo-font-weight-bold);
    color: var(--abena-color-page-title);
    min-height: 1rem;
    text-align: center;
}

/* ============================================================
   RoomsConfigDetailPane — section-tree detail view
   ============================================================ */

.rooms-config-detail {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;                              /* fill the pane; the inner list scrolls */
    min-height: 0;
    overflow: hidden;                           /* clip the scrolling content to the rounded card corners */

    /* Per-level identity colors (icon + nesting spine). Scoped to the room-grid
       pane so they never leak. Building=blue, Floor=green, Service=purple,
       SubService=amber. */
    --rc-lvl-building:   #0044C2; --rc-lvl-building-soft:   rgba(0, 68, 194, 0.09);
    --rc-lvl-floor:      #0E8A6E; --rc-lvl-floor-soft:      rgba(14, 138, 110, 0.11);
    --rc-lvl-service:    #8F49D4; --rc-lvl-service-soft:    rgba(143, 73, 212, 0.10);
    --rc-lvl-subservice: #C98A00; --rc-lvl-subservice-soft: rgba(201, 138, 0, 0.13);
}

.rooms-config-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;                                /* 12px between header and card grid */
}

.rooms-config-section__header {
    display: flex;
    align-items: center;
    gap: 1rem;                                   /* 16px, per design .floor-bar / .sec-head */
    flex-wrap: wrap;
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-font-size-md);
    color: var(--sn-text);
}

.rooms-config-section__icon {
    display: inline-flex;
    width: 1.75rem;                              /* 28px badge */
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    color: var(--abena-color-title-deep);        /* per-level override below */
    flex-shrink: 0;
}

.rooms-config-section__icon + .rooms-config-section__name {
    color: var(--abena-color-title-deep);
}

.rooms-config-section__icon > svg {
    width: 1.125rem;
    height: 1.125rem;
}

.rooms-config-section__name {
    font-weight: var(--kendo-font-weight-bold);
}

/* Per-level icon badge color — icon tinted with its level color on a soft fill. */
.rooms-config-section--building > .rooms-config-section__header > .rooms-config-section__icon,
.rooms-config-section--establishment > .rooms-config-section__header > .rooms-config-section__icon {
    color: var(--rc-lvl-building);
    background: var(--rc-lvl-building-soft);
}
.rooms-config-section--floor > .rooms-config-section__header > .rooms-config-section__icon {
    color: var(--rc-lvl-floor);
    background: var(--rc-lvl-floor-soft);
}
.rooms-config-section--service > .rooms-config-section__header > .rooms-config-section__icon {
    color: var(--rc-lvl-service);
    background: var(--rc-lvl-service-soft);
}
.rooms-config-section--subservice > .rooms-config-section__header > .rooms-config-section__icon {
    color: var(--rc-lvl-subservice);
    background: var(--rc-lvl-subservice-soft);
}

/* Per-level nesting spine: a 2px left line on the BODY wrapper (room cards + child
   sections), so it runs beside content only — the section header sits above it, to
   the left (matches the design). Building is solid; nested levels are soft tints.
   ~22px indent step so the lines sit clearly apart. */
.rooms-config-section__body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Building & Floor: spine on the BODY wrapper (header sits above-left). The 2px line
   is horizontally centered under the 28px header icon — margin-left ≈ (28/2 − 1)px. */
/* Paddings are tuned so every consecutive spine sits ~25px apart (matching the
   design). Each step = 2px border + the indent that carries to the next line. The
   body levels also carry a 0.8125rem (13px) margin to centre the line under the
   28px icon; that margin is absorbed into the building→floor step, so building's
   body padding is smaller to compensate. */
.rooms-config-section--building > .rooms-config-section__body,
.rooms-config-section--establishment > .rooms-config-section__body {
    border-left: 2px solid var(--rc-lvl-building);
    margin-left: 0;              /* rail starts at the header icon's left edge (not centered under it) */
    padding-left: 1.4375rem;     /* 23px → 25px gap to the floor rail, equal to the other levels */
}

/* Align the building level's own room tiles with the floor's green spine below,
   so the building's "+ Chambre" tile lines up with the nested floor content edge. */
.rooms-config-section--building > .rooms-config-section__body > .rooms-config-section__cards,
.rooms-config-section--establishment > .rooms-config-section__body > .rooms-config-section__cards {
    padding-left: 0;            /* body padding now provides the indent; tiles align with the floor spine */
}
.rooms-config-section--floor > .rooms-config-section__body {
    border-left: 2px solid var(--rc-lvl-floor-soft);
    margin-left: 0;              /* rail starts at the header icon's left edge (not centered under it) */
    padding-left: 1.4375rem;
}

/* Service & SubService: spine on the SECTION (line runs beside the header + content,
   like before) — these small sections read better with the header included. */
.rooms-config-section--service {
    border-left: 2px solid var(--rc-lvl-service-soft);
    padding-left: 1.4375rem;
}
.rooms-config-section--subservice {
    border-left: 2px solid var(--rc-lvl-subservice-soft);
    padding-left: 1.4375rem;
}
/* Consecutive sub-services share one continuous rail: cancel the parent body's gap between them
   and carry that spacing inside (padding-bottom) so the 2px border-left is unbroken across both. */
.rooms-config-section--subservice + .rooms-config-section--subservice {
    margin-top: -0.75rem;
    padding-top: 0.75rem;
}

/* Building / Establishment — icon + 16px bold navy (per design) */
.rooms-config-section--building > .rooms-config-section__header,
.rooms-config-section--establishment > .rooms-config-section__header {
    font-size: var(--kendo-font-size-lg);   /* 16px (lg2 was 18px) */
    gap: 0.5rem;                             /* 8px, per design .bld-heading */
    margin-bottom: 0.5rem;
}

.rooms-config-section--building > .rooms-config-section__header > .rooms-config-section__name,
.rooms-config-section--establishment > .rooms-config-section__header > .rooms-config-section__name {
    color: var(--abena-color-title-deep);
}

/* Service / SubService — plain text label, bold */
.rooms-config-section--service > .rooms-config-section__header > .rooms-config-section__name,
.rooms-config-section--subservice > .rooms-config-section__header > .rooms-config-section__name {
    color: var(--sn-text);
}

/* ============================================================
   Vertical checkbox list — pairs with <AbenaV3CheckboxList>.
   Mirrors the layout / spacing tokens of <AbenaV3RadioCardGroup>
   so the two read consistently in resident forms.
   ============================================================ */
.abena-v3-checkbox-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.abena-v3-checkbox-list__item {
    margin: 0;
}

.abena-v3-checkbox-list__row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    height: 1.75rem;          /* 28px */
    cursor: pointer;
    user-select: none;
}

.abena-v3-checkbox-list__label {
    font-family: 'Roboto', var(--kendo-font-family);
    font-style: normal;
    font-weight: 400;
    font-size: 0.875rem;     /* 14px */
    line-height: 1;          /* tighten so the text box matches the checkbox height */
    color: #3D3D3D;
}

.abena-v3-checkbox-list__description {
    margin-left: auto;
    font-family: 'Roboto', var(--kendo-font-family);
    font-style: normal;
    font-weight: 400;
    font-size: 0.75rem;       /* 12px */
    line-height: 1.4;
    color: #6B7280;
}

/* ============================================================
   Reusable checkbox — light-grey border outlined square that
   fills to action-blue with a white tick when checked. Drop the
   class on any <input type="checkbox"> to opt in.
   ============================================================ */
.abena-v3-checkbox {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    width: 1rem;
    height: 1rem;
    border: 0.0625rem solid var(--sn-rail);
    border-radius: 0.25rem;
    background: #FFFFFF;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.abena-v3-checkbox:hover {
    border-color: var(--sn-text-muted);
}

.abena-v3-checkbox:checked {
    background: var(--abena-color-action-blue);
    border-color: var(--abena-color-action-blue);
}

/* Tick — pure-CSS mask so the colour follows the checkbox theme. */
.abena-v3-checkbox:checked::after {
    content: "";
    width: 0.625rem;
    height: 0.625rem;
    background-color: #FFFFFF;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M13.5 4.5 6 12 2.5 8.5' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M13.5 4.5 6 12 2.5 8.5' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}

/* Count chips — soft blue tint, small checkbox prefix */
.rooms-config-section__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;            /* 8px, per design */
    height: 1.875rem;       /* 30px, per design */
    background: #EFF1F4;    /* muted chip, per design */
    border-radius: 0.5rem;  /* 8px, per design */
    font-size: 0.8125rem;   /* 13px, per design (no kendo token for 13px) */
    font-weight: var(--kendo-font-weight-bold);
    color: var(--abena-color-page-title);   /* #0D1740 — design's --color-dark, was too-light --sn-text-muted */
    white-space: nowrap;
    cursor: pointer;
    padding: 0 0.75rem;     /* 0 12px, per design */
}

.rooms-config-section__chip.total {
    background: #E9F0FD;
    color: var(--abena-color-title-deep);   /* #002C75 per design */
}

.rooms-config-section__chip--empty {
    /* Filled muted chip like the design (was transparent text); keeps the base box. */
    cursor: default;
}

/* Inline "Modifier les chambres" — uses the shared AbenaV3Button Small variant.
   Override only the gap so the pencil icon sits flush next to the label. */
.rooms-config-section__bulk-action {
    gap: 0.375rem;
}

/* Card grid — flex+wrap (responsive without media queries) */
.rooms-config-section__cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.rooms-config-card {
    width: 8.125rem;
    height: 8.125rem;
    max-height: 8.125rem !important;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.75rem;
    border: 0.0625rem solid var(--sn-rail);
    border-radius: 0.75rem;
    background: white;
    color: var(--sn-text);
    font-family: var(--kendo-font-family);
    cursor: pointer;
    text-align: left;
}

.rooms-config-card:hover:not(.is-selected) {
    background: #fafafa;
    outline: 0.125rem solid var(--sn-rail);
}

.rooms-config-card.is-selected {
    border-color: var(--abena-color-action-blue);
    background: #f5f5f5;
}

.rooms-config-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 1.375rem;
    margin-bottom: 0.5rem;
}

.rooms-config-card__check {
    margin: 0;
}

.rooms-config-card__edit {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    color: var(--sn-text-muted);
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1;
}

.rooms-config-card:hover .rooms-config-card__edit {
    display: flex;
}

.rooms-config-card__body {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    flex: 1;
    width: 100%;
}

.rooms-config-card__name {
    font-size: 1rem;
    font-weight: var(--kendo-font-weight-bold);
    color: var(--abena-color-page-title);
    line-height: 1.25;
    text-align: center;
}

.rooms-config-card__temp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background-color: #f2f4f6;
    color: #252e53;
    font-size: 0.6875rem;
    flex-shrink: 0;
}

.rooms-config-card__occupancy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    margin-top: auto;
    padding-top: 0.5rem;
    padding-bottom: 1rem;
}

.rooms-config-card__dot {
    width: 0.6875rem;               /* 11px, per design .rc-dot */
    height: 0.6875rem;
    border-radius: 50%;
    background-color: var(--sn-border);   /* #EFF1F4 — per design .rc-dot.free */
    border: 0.125rem solid var(--sn-rail); /* #DFE3E8 */
    box-sizing: border-box;
    flex-shrink: 0;
}

.rooms-config-card__dot--occupied {
    background-color: #ffd040;
    border-color: #bf9000;
}

.rooms-config-card__fraction {
    font-size: 0.9rem;
    color: var(--sn-text-muted);
    margin-left: 0.125rem;
}

.rooms-config-card--add {
    border-style: dashed;
    border-color: #C9CCD1;
    background: #FFFFFF;                 /* white, per design */
    color: #C9CCD1;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5625rem;
    padding: 0.75rem;
}

/* :not(.is-selected) bumps specificity to beat the base .rooms-config-card:hover gray fill. */
.rooms-config-card--add:hover:not(.is-selected) {
    outline: none;
    border-color: var(--abena-color-action-blue);
    background: #FFFFFF;                 /* stays white on hover, per design */
    color: var(--abena-color-action-blue);
}

.rooms-config-card__add-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.rooms-config-card__add-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem !important;
    height: 1.5rem !important;
}

.rooms-config-card__add-icon > svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
}

.rooms-config-card__add-icon > i {
    font-size: 1.5rem;                   /* 24px uil-sleep glyph */
}

.rooms-config-card__add-label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1rem;
}

/* ============================================================
   Establishment groups panel + EstablishmentGroupChip
   Figma: 9063-98874 (per the inspect-panel CSS pasted by the user)
   ============================================================ */

/* Panel wrapper — white card with header + chips block */
.abena-v3-groups-panel {
    box-sizing: border-box;          /* keep padding + border within the parent's width */
    width: 100%;                     /* fill the parent (.group-filter) exactly */
    background: var(--kendo-color-app-surface);
    border: 0.0625rem solid var(--sn-border);
    border-radius: 0.75rem;
    padding: 1.25rem;
    box-shadow: 0 0.125rem 0.625rem var(--abena-shadow-card-glow);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.abena-v3-groups-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.abena-v3-groups-panel__title {
    margin: 0;
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-font-size-lg);
    font-weight: var(--kendo-font-weight-bold);
    color: var(--sn-text);
}

.abena-v3-groups-panel__add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--sn-text-strong, #2A2F45);
    cursor: pointer;
    transition: color 120ms ease;
}

.abena-v3-groups-panel__add:hover {
    color: var(--abena-color-action-blue);
}

.abena-v3-groups-panel__add i {
    font-size: 1.25rem;
}

/* Existing chips wrap horizontally per the design */
.abena-v3-groups-panel__chips {
    display: flex;
    flex-direction: column;
    align-items: stretch;     /* each chip fills the panel width */
    gap: 0;
}

/* Full-width delete-confirm panel — pink-tinted card, spans the full chips area
   minus the panel padding (already set on .abena-v3-groups-panel itself). */
.abena-v3-groups-panel__delete-confirm {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0.875rem;            /* 14px per figma */
    gap: 0.5rem;
    background: rgba(202, 20, 0, 0.08);
    border-radius: 0.375rem;
}

.abena-v3-groups-panel__delete-text {
    margin: 0;
    font-family: var(--kendo-font-family);
    font-style: normal;
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.5;
    color: #CA1400;
    text-align: center;
}

.abena-v3-groups-panel__delete-actions {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;                 /* 12px per figma */
    align-items: stretch;
}

.abena-v3-groups-panel__delete-confirm-btn {
    flex: 1;
    height: 1.625rem;             /* 26px */
    padding: 0.125rem 0.5rem;     /* 2px 8px */
    border: 0.0625rem solid #CA1400;
    border-radius: 0.375rem;
    background: #CA1400;
    color: #FFFFFF;
    font-family: var(--kendo-font-family);
    font-weight: 700;
    font-size: 0.75rem;
    line-height: 1.5;
    cursor: pointer;
}

.abena-v3-groups-panel__delete-cancel-btn {
    flex: 1;
    height: 1.625rem;
    padding: 0.125rem 0.5rem;
    border: none;
    border-radius: 0.375rem;
    background: #F5F5F5;
    color: #3D3D3D;
    font-family: var(--kendo-font-family);
    font-weight: 700;
    font-size: 0.75rem;
    line-height: 1.5;
    cursor: pointer;
}

/* ---------- The chip itself (Figma "Hover" / default state) ---------- */
.abena-v3-group-chip {
    /* --chip-color is set inline by the component (Group.Color or current draft).
       Halo ring colour is computed from it via color-mix() so any hex from the OS
       picker gets a matching tinted halo automatically. */
    --chip-halo: color-mix(in srgb, var(--chip-color, #ccc) 25%, white);

    position: relative;
    display: flex;              /* full-width row inside a column-flex parent */
    align-items: center;
    gap: 0.75rem;
    padding: 0 0.75rem;
    margin: 0.25rem 0;
    width: 100%;
    height: 2.75rem;
    background: #F8F9FB;
    border-radius: 0.375rem;    /* 6px per figma */
    border: none;
    color: #4F4F4F;
    font-family: var(--kendo-font-family);
    font-style: normal;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.5;
    cursor: pointer;
    box-sizing: border-box;
}

.abena-v3-group-chip:hover:not(.is-selected):not(.is-deleting):not(.abena-v3-group-chip--tag) {
    background: var(--sn-divider);    /* #EFF1F4 */
}

.abena-v3-group-chip.is-selected {
    background: rgba(0, 68, 194, 0.08);
    box-shadow: inset 0 0 0 0.125rem var(--abena-color-action-blue);
}

.abena-v3-group-chip.is-deleting {
    box-shadow: inset 0 0 0 0.125rem var(--kendo-color-error-on-surface);
}

/* Coloured dot — 8px circle with a 3px halo ring in a lighter tint of its color */
.abena-v3-group-chip__dot {
    display: inline-block;
    box-sizing: content-box;    /* keep border outside the 8x8 dot per figma */
    width: 0.5rem;              /* 8px */
    height: 0.5rem;
    border-radius: 50%;
    background: var(--chip-color, #ccc);
    border: 0.1875rem solid var(--chip-halo);    /* 3px halo */
    padding: 0;
    flex-shrink: 0;
}

.abena-v3-group-chip__dot--input {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    overflow: hidden;
}

/* Strip the OS-provided swatch chrome so we keep the figma-styled circle */
.abena-v3-group-chip__dot--input::-webkit-color-swatch-wrapper { padding: 0; }
.abena-v3-group-chip__dot--input::-webkit-color-swatch         { border: none; border-radius: 50%; }
.abena-v3-group-chip__dot--input::-moz-color-swatch            { border: none; border-radius: 50%; }

/* ---------- Predefined-colour swatch picker ---------- */
/* Wrapper anchors the popover and supplies the halo tint for the dot button. */
.abena-v3-color-swatches {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    --chip-halo: color-mix(in srgb, var(--chip-color, #ccc) 25%, white);
}

/* The dot is now a button (same figma circle, no native colour-input chrome). */
.abena-v3-group-chip__dot--button {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

/* Floating panel of colour circles, opening below the dot. */
.abena-v3-color-swatches__popover {
    position: absolute;
    top: calc(100% + 0.375rem);
    left: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(6, 1.25rem);
    gap: 0.375rem;
    padding: 0.5rem;
    background: #FFFFFF;
    border: 0.0625rem solid rgba(0, 0, 0, 0.08);
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
}

.abena-v3-color-swatch {
    width: 1.25rem;             /* 20px circle */
    height: 1.25rem;
    border-radius: 50%;
    border: 0.0625rem solid rgba(0, 0, 0, 0.1);
    padding: 0;
    cursor: pointer;
    transition: transform 100ms ease;
}

.abena-v3-color-swatch:hover {
    transform: scale(1.1);
}

.abena-v3-color-swatch.is-selected {
    box-shadow: 0 0 0 0.125rem #FFFFFF, 0 0 0 0.1875rem var(--abena-color-action-blue);
}

/* "Custom" swatch — rainbow circle wrapping a hidden native colour input. */
.abena-v3-color-swatch--custom {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}

.abena-v3-color-swatch--custom input[type="color"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    opacity: 0;
    cursor: pointer;
}

.abena-v3-group-chip__label {
    flex: 1;
    min-width: 0;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #4F4F4F;
}

/* Action wrapper — sits at the chip's right edge inside the flex flow.
   Hidden by default, revealed on hover. Because the chip is full-width and
   the label is `flex: 1`, showing the actions only narrows the label area —
   the chip itself never changes width, so neighbours stay put. */
.abena-v3-group-chip__actions {
    display: none;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;          /* push to the right edge regardless of label width */
}

/* Show actions on hover only — not on :focus-within. Clicking trash/pen
   focuses the button and would otherwise pin the actions visible after the
   mouse leaves until the user clicks elsewhere. */
.abena-v3-group-chip:hover .abena-v3-group-chip__actions {
    display: inline-flex;
}

/* Pen + trash — same colour and size as figma */
.abena-v3-group-chip__edit,
.abena-v3-group-chip__delete {
    display: inline-flex;
    border: none;
    background: transparent;
    color: #565D79;
    padding: 0;
    width: 1.125rem;            /* 18px per figma */
    height: 1.125rem;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.75rem;
    transition: color 120ms ease;
}

.abena-v3-group-chip__edit:hover   { color: var(--abena-color-action-blue); }
.abena-v3-group-chip__delete:hover { color: var(--kendo-color-error-on-surface); }

/* ---------- Tag mode: edit existing OR create new ---------- */
/* Figma "Tag": padding 4px 8px 4px 4px, gap 4px, height 36px, bg #F2F4F6 */
.abena-v3-group-chip--tag {
    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
    gap: 0.25rem;
    height: 2.25rem;            /* 36px */
    background: #F2F4F6;
    cursor: default;
}

/* The white inner input pill that wraps the dot + text input */
.abena-v3-group-chip__field {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.5rem;
    height: 1.625rem;           /* 26px per figma */
    background: #FFFFFF;
    border: 0.0625rem solid rgba(0, 0, 0, 0.08);
    border-radius: 0.375rem;
    box-sizing: border-box;
    flex: 1;
    min-width: 0;
}

.abena-v3-group-chip__input {
    border: none;
    background: transparent;
    color: #3D3D3D;
    font-family: var(--kendo-font-family);
    font-size: 0.75rem;
    line-height: 1.5;
    outline: none;
    flex: 1;
    min-width: 0;
    padding: 0;
}

.abena-v3-groups-panel__chips .abena-v3-group-chip__input {
    width: 3rem;
}

.abena-v3-group-chip__input::placeholder {
    color: #666666;
    opacity: 0.5;
}

/* Square confirm button — 26x26 blue with white check (figma) */
.abena-v3-group-chip__confirm {
    width: 1.625rem;            /* 26px */
    height: 1.625rem;
    padding: 0;
    background: var(--abena-color-action-blue);
    border: 0.0625rem solid var(--abena-color-action-blue);
    border-radius: 0.375rem;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.abena-v3-group-chip__confirm:disabled {
    background: var(--sn-rail);
    border-color: var(--sn-rail);
    cursor: not-allowed;
}

/* Cancel = bare X icon (no bg) sitting to the right of the confirm button */
.abena-v3-group-chip__cancel {
    width: 1rem;
    height: 1rem;
    padding: 0;
    border: none;
    background: transparent;
    color: #565D79;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.abena-v3-group-chip__cancel:hover {
    color: var(--kendo-color-error-on-surface);
}

/* ---------- Inline delete-confirm panel under the chip (figma frame 4) ---------- */
.abena-v3-group-chip__confirm-panel {
    margin-top: 0.375rem;
    padding: 0.625rem 0.75rem;
    background: var(--kendo-color-error-subtle);
    border-radius: 0.375rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.abena-v3-group-chip__confirm-text {
    margin: 0;
    font-size: 0.75rem;
    color: #3D3D3D;
}

.abena-v3-group-chip__confirm-actions {
    display: flex;
    gap: 0.5rem;
}

.abena-v3-group-chip__confirm-delete {
    flex: 1;
    padding: 0.375rem 0.75rem;
    border: none;
    border-radius: 0.375rem;
    background: var(--kendo-color-error-on-surface);
    color: var(--kendo-color-on-error);
    font-family: var(--kendo-font-family);
    font-weight: var(--kendo-font-weight-bold);
    font-size: 0.75rem;
    cursor: pointer;
}

.abena-v3-group-chip__confirm-cancel {
    flex: 1;
    padding: 0.375rem 0.75rem;
    border: 0.0625rem solid var(--sn-rail);
    border-radius: 0.375rem;
    background: var(--kendo-color-app-surface);
    color: var(--sn-text);
    font-family: var(--kendo-font-family);
    font-size: var(--kendo-font-size-sm);
    cursor: pointer;
}

/* ---------- Generic v3 modal shell ----------
   Class is applied to the wrapper passed via AbsModalWindow's `Class`
   parameter, which lands on the outer `.k-window` element. Variants
   (`--delete`, `--filter`, ...) override or extend per-modal.
   Telerik sets dimensions inline, so size rules require !important. */
.k-window.abena-v3-modal {
    border: 0.0625rem solid rgba(0, 0, 0, 0.08);
    border-radius: 0.5rem;          /* 8px per figma */
    overflow: hidden;               /* clip children (titlebar/content) to the rounded shape */
    box-shadow:
        0 0.375rem 0.5rem rgba(0, 68, 194, 0.08),
        0 0.25rem 1rem rgba(0, 68, 194, 0.12);
    background: #FFFFFF;
}

/* Strip Kendo's content padding so per-modal classes own all spacing. */
.abena-v3-modal .k-window-content { padding: 0; }

/* Bottom bar — separator + base padding (variants can override). */
.abena-v3-modal .bottom-bar {
    background: transparent;
    border-top: 0.0625rem solid rgba(0, 0, 0, 0.08);
    padding: 0.5rem;
}

/* Footer button row */
.abena-v3-modal__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
}

/* Base button skeleton — shape, font, cursor. Variants set size + color. */
.abena-v3-modal__confirm,
.abena-v3-modal__cancel {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;          /* 8px per figma */
    font-family: 'Roboto', var(--kendo-font-family);
    cursor: pointer;
    border: 0.0625rem solid transparent;
    background: transparent;
}

/* Confirm — danger theme (delete modal) */
.abena-v3-modal__confirm--danger {
    background: #CA1400;
    border-color: #CA1400;
    color: #FFFFFF;
}
.abena-v3-modal__confirm--danger:hover {
    background: #B01100;
    border-color: #B01100;
}

/* Cancel — soft grey (delete modal) */
.abena-v3-modal__cancel {
    background: #F5F5F5;
    color: #3D3D3D;
    border-color: transparent;
}
.abena-v3-modal__cancel:hover { background: #E8E8E8; }

/* Size variants used by the delete modal's bespoke <button>s.
   Newer modals should use AbenaV3Button + `.abena-v3-modal__action`. */
.abena-v3-modal__confirm--md {
    height: 1.875rem;               /* 30px */
    padding: 0.25rem 0.5rem;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.42;
}

.abena-v3-modal__cancel--compact {
    height: 1.625rem;               /* 26px */
    padding: 0.25rem 0.5rem;
    font-weight: 700;
    font-size: 0.75rem;
    line-height: 1.5;
}

/* Drop on an AbenaV3Button used inside an `.abena-v3-modal__footer`
   so the buttons share the row width evenly (figma: 148px each). */
.abena-v3-modal__action {
    flex: 1;
}

/* Single-button footer (alert: just Close) — cap at 50% and center so the
   action doesn't stretch the full modal width. The 2-button confirm row
   keeps `flex: 1` per button. */
.abena-v3-modal__footer:has(> .abena-v3-modal__action:only-child) {
    justify-content: center;
}

.abena-v3-modal__footer > .abena-v3-modal__action:only-child {
    flex: 0 1 50%;
    max-width: 50%;
}

/* No title bar / no close X */
.abena-v3-modal .k-window-titlebar { display: none; }

/* Inline heading rendered in place of the hidden titlebar */
.abena-v3-modal__heading {
    width: 100%;
    margin: 0;
    font-family: 'Roboto', var(--kendo-font-family);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.5;
    color: #000000;
}

/* Centered variant — Roboto / 400 / 16px / #000000 per Figma change-group spec. */
.abena-v3-modal__heading--centered {
    text-align: center;
    font-family: 'Roboto', var(--kendo-font-family);
    font-style: normal;
    font-weight: 400;
    font-size: 1rem;                             /* 16px */
    color: #000000;
}

/* ---------- Variant: delete confirmation (320 × 212 figma) ----------
   Used by GroupDeleteConfirmModal. */
.k-window.abena-v3-modal--delete {
    width: 20rem !important;
    min-width: 20rem !important;
    max-width: 20rem !important;
}

/* Title bar — grey strip, 45px high, with a bottom separator. */
.abena-v3-modal--delete .k-window-titlebar {
    box-sizing: border-box;
    height: 2.8125rem;
    min-height: 2.8125rem;
    padding: 0 1rem;
    background: #FAFAFA;
    border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
}

.abena-v3-modal--delete .k-window-titlebar .k-window-title {
    margin: 0;
    padding: 0;
    line-height: 1.25;
}

.abena-v3-modal--delete .k-window-titlebar .k-window-title,
.abena-v3-modal--delete .abs-window-header,
.abena-v3-modal--delete .abs-window-text {
    font-family: 'Roboto', var(--kendo-font-family);
    font-weight: 400;
    font-size: 1rem;
    color: #3D3D3D;
}

.abena-v3-modal--delete .abs-window-header,
.abena-v3-modal--delete .abs-window-text {
    margin: 0;
    padding: 0;
    line-height: 1.25;
}

.abena-v3-modal--delete .inner-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: transparent;
    padding: 1rem 0.3175rem;
}

.abena-v3-modal--delete .abena-v3-modal__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    width: 100%;
}

/* Delete-specific text blocks */
.abena-v3-modal__question {
    margin: 0;
    font-family: 'Roboto', var(--kendo-font-family);
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.42;
    color: #666666;
}

.abena-v3-modal__chip { display: inline-flex; }

.abena-v3-modal__warning {
    margin: 0;
    font-family: 'Roboto', var(--kendo-font-family);
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.5;
    color: #CA1400;
    text-align: center;
}

/* ---------- Variant: change-group modal  ----------  */
.k-window.abena-v3-modal--change-group {
    width: 20rem !important;
    min-width: 20rem !important;
    max-width: 20rem !important;
}

.abena-v3-modal--change-group .inner-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: #FFFFFF;
    padding: 1.75rem 1rem;          /* 28px vertical, 16px horizontal */
}

.abena-v3-modal--change-group .abena-v3-modal__body {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    width: 100%;
}

/* Footer panel — 8px padding, buttons share the row 50/50 with an 8px gap. */
.abena-v3-modal--change-group .bottom-bar {
    padding: 0.5rem;
}

.abena-v3-modal--change-group .abena-v3-modal__footer {
    gap: 0.5rem;
}

.abena-v3-modal--change-group .abena-v3-modal__footer > .abena-v3-btn {
    flex: 1 1 0;
    min-width: 0;
}

.abena-v3-modal__field-label {
    font-family: 'Roboto', var(--kendo-font-family);
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 1.5;
    color: #565D79;
}

/* ---- Group dropdown templates (matches the filter chip's dot/halo) ---- */
.abena-v3-group-dropdown__row {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Roboto', var(--kendo-font-family);
    font-size: 0.875rem;
    color: #3D3D3D;
}

.abena-v3-group-dropdown__dot {
    --chip-halo: color-mix(in srgb, var(--chip-color, #ccc) 25%, white);
    display: inline-block;
    box-sizing: content-box;
    width: 0.5rem;                    /* 8px */
    height: 0.5rem;
    border-radius: 50%;
    background: var(--chip-color, #ccc);
    border: 0.1875rem solid var(--chip-halo);   /* 3px halo, matching .abena-v3-group-chip__dot */
    flex-shrink: 0;
}

.abena-v3-group-dropdown__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.abena-v3-group-dropdown__placeholder {
    color: #99A1AF;
    font-family: 'Roboto', var(--kendo-font-family);
    font-size: 0.875rem;
}

/* ---- Telerik wrapper styling (matches Figma input spec) ----
   Outer .k-dropdownlist is the input shell; inner .k-input-inner holds the
   value template; .k-input-button is the right-hand caret toggle. Figma calls
   for 288 × 36, 1px #DFE3E8 border, 8px corner radius, 12px Roboto/400. */
.k-dropdownlist.abena-v3-group-dropdown {
    box-sizing: border-box;
    width: 100%;                                /* fills the modal body (~288px) */
    height: 2.25rem;                             /* 36px */
    padding: 0 0.125rem;                         /* 2px horizontal */
    background: #FFFFFF;
    border: 0.0625rem solid #DFE3E8;             /* 1px #DFE3E8 */
    border-radius: 0.5rem;                       /* 8px */
    box-shadow: none;
}

.k-dropdownlist.abena-v3-group-dropdown:hover:not(.k-focus),
.k-dropdownlist.abena-v3-group-dropdown.k-hover {
    background: #FFFFFF;
    border-color: #DFE3E8;
}

.k-dropdownlist.abena-v3-group-dropdown.k-focus,
.k-dropdownlist.abena-v3-group-dropdown:focus-within {
    border-color: #DFE3E8;
    box-shadow: none;
}

.abena-v3-group-dropdown .k-input-inner {
    box-sizing: border-box;
    padding: 0.5rem;                             /* 8px label padding */
    gap: 0.5rem;                                 /* 8px between dot + label */
    font-family: 'Roboto', var(--kendo-font-family);
    font-style: normal;
    font-weight: 400;
    font-size: 0.75rem;                          /* 12px */
    line-height: 1.5;                            /* 150% */
    color: #3D3D3D;
}

/* Right-hand caret button — flat, 24px wide; the icon itself is 24px square. */
.abena-v3-group-dropdown .k-input-button {
    align-self: center;             /* parent is flex/align-items: stretch — opt back into centring */
    width: 1.5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    margin-right: 0.25rem;
    background: transparent;
    border: 0;
    color: #070C20;
}

.abena-v3-group-dropdown .k-input-button:hover,
.abena-v3-group-dropdown .k-input-button.k-hover {
    background: transparent;
    border: 0;
}

/* Replace Telerik's default solid caret with a clean Lucide-style chevron.
   Hide the inline SVG glyph (it's a filled triangle, not the thin angle-down
   from Figma) and draw a 10px square with two borders rotated 45° instead. */
.abena-v3-group-dropdown .k-input-button .k-button-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: transparent;             /* hide the underlying glyph paint */
}

.abena-v3-group-dropdown .k-input-button .k-button-icon > svg {
    display: none;
}

.abena-v3-group-dropdown .k-input-button .k-button-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.625rem;                /* 10px diagonal */
    height: 0.625rem;
    border-right: 0.125rem solid #070C20;
    border-bottom: 0.125rem solid #070C20;
    /* Pivot is the square's geometric centre; after rotate(45°) the visible
       V-corner sits diagonally below that centre, so shift up ~3px to land
       the chevron's optical centre on the row's mid-line. */
    transform: translate(-50%, -65%) rotate(45deg);
}

/* Bring the inner row content (dot + label) into the 12px size from Figma so
   the value template inherits the input typography. */
.abena-v3-group-dropdown .abena-v3-group-dropdown__row {
    font-size: 0.75rem;                          /* 12px */
    line-height: 1.5;
    color: #3D3D3D;
}

/* Popup list items that host the group dropdown template — override Telerik's
   default blue selected state so the label/dot stay readable on a light grey
   background. The popup renders into a portal at <body>, so we scope by the
   custom row class instead of a wrapper class. */
.k-list-ul > .k-list-item:has(.abena-v3-group-dropdown__row).k-selected,
.k-list-ul > .k-list-item:has(.abena-v3-group-dropdown__row).k-selected.k-focus,
.k-list-ul > .k-list-item:has(.abena-v3-group-dropdown__row).k-selected:hover {
    background-color: #F5F5F5;
    color: #3D3D3D;
}

.k-list-ul > .k-list-item:has(.abena-v3-group-dropdown__row):hover {
    background-color: #EFF1F4;
    color: #3D3D3D;
}

/* ---------- Variant: filter modal ---------- */
.k-window.abena-v3-modal--filter {
    width: 21rem !important;
    min-width: 21rem !important;
    max-width: 21rem !important;
}


.abena-v3-modal--filter .inner-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.125rem;
    padding: 1rem;
}


.abena-v3-modal--filter .abena-v3-modal__body {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0;
}

/* Checkbox row — 28px tall (figma): 4px top/bottom padding + 20px content */
.abena-v3-modal__filter-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0;
    width: 100%;
    cursor: pointer;
    user-select: none;
    font-family: 'Roboto', var(--kendo-font-family);
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.42;
    color: #3D3D3D;
}

/* Filter-row checkbox — mirrors `.abena-v3-grid .k-checkbox`.
   Scoped on `.abena-v3-modal__filter-item` (in our markup, direct parent of
   the input) rather than `.abena-v3-modal--filter` (lands on the Telerik
   `.k-window` portal wrapper — was unreliable in practice). */
.abena-v3-modal__filter-item .k-checkbox {
    width: 1.125rem !important;     /* 18px — matches grid checkboxes */
    height: 1.125rem !important;
    border: 0.0625rem solid var(--sn-rail) !important;
    border-radius: 0.25rem !important;
    background-color: #FFFFFF !important;
}

.abena-v3-modal__filter-item .k-checkbox:checked,
.abena-v3-modal__filter-item .k-checkbox.k-checked {
    background-color: var(--kendo-color-info-on-surface) !important;
    border-color: var(--kendo-color-info-on-surface) !important;
}

.abena-v3-modal__filter-item .k-checkbox:focus,
.abena-v3-modal__filter-item .k-checkbox.k-focus {
    box-shadow: 0 0 0 0.125rem var(--abena-color-focus-ring, rgba(0, 68, 194, 0.25)) !important;
}

.abena-v3-modal--filter .bottom-bar {
    padding: 0.5rem;
    border-top: 0.0625rem solid rgba(0, 0, 0, 0.08);
}

.abena-v3-modal--filter .abena-v3-modal__footer {
    width: 100%;
    gap: 0.5rem;
}

/* Variant: confirmation modal */
.k-window.abena-v3-modal--confirm {
    width: 20rem !important;
    min-width: 20rem !important;
    max-width: 20rem !important;
}

.abena-v3-modal--confirm .k-window-titlebar { display: none; }

.abena-v3-modal--confirm .inner-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    background: #FFFFFF;
    min-height: 0;
}

.abena-v3-modal__heading--danger {
    font-weight: 400;
    color: var(--kendo-color-error-active);
    text-align: center;
}

/* Scrollable container: caps height so long lists don't blow the modal up. */
.abena-v3-modal__scroll-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
    max-height: 12rem;
    overflow-y: auto;
}

.abena-v3-modal__scroll-list-item {
    font-family: 'Roboto', var(--kendo-font-family);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    color: #3D3D3D;
    text-align: center;
}

/* Muted variant — Roboto / 400 / 14px / #666666 per Figma swap-confirm spec. */
.abena-v3-modal__scroll-list-item--muted {
    font-family: 'Roboto', var(--kendo-font-family);
    font-style: normal;
    font-weight: 400;
    font-size: 0.875rem;                         /* 14px */
    color: #666666;
}

.abena-v3-modal--confirm .bottom-bar {
    padding: 0.75rem 1.5rem;
    border-top: 0.0625rem solid rgba(0, 0, 0, 0.08);
    background: #FFFFFF;
}

.abena-v3-modal--confirm .abena-v3-modal__footer {
    width: 100%;
    gap: 0.5rem;
}

/* The synthetic "Tout l'établissement" header acts as a selectable row */
.abena-v3-sidenav__row--all {
    cursor: pointer;
    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
    border-radius: 0.375rem;
    margin: 0;
}

.abena-v3-sidenav__row--all .abena-v3-sidenav__label {
    font-family: 'Roboto', var(--kendo-font-family);
    font-weight: 700;
    font-size: 0.875rem;          /* 14px */
    line-height: 1.42;
    color: #252E53;
}

/* Read-only mode: hide the settings cog. */
.abena-v3-sidenav--readonly .abena-v3-sidenav__settings { display: none; }

/* ---------- Resident filters panel ---------- */
.abena-v3-filters-panel {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;                 /* 12px */
    padding: 1rem;                /* 16px */
    background: #FFFFFF;
    border: 0.0625rem solid #EFF1F4;
    border-radius: 0.75rem;       /* 12px */
    box-shadow: 0 0.125rem 0.625rem #EDF1FB;
}

.abena-v3-filters-panel__title {
    margin: 0;
    font-family: 'Roboto', var(--kendo-font-family);
    font-weight: 700;
    font-size: 0.875rem;          /* 14px */
    line-height: 1.42;
    color: #252E53;
}

.abena-v3-filters-panel__checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
}

.abena-v3-filters-panel__checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 1rem;                  /* 16px */
    height: 1rem;
    margin: 0;
    background: #FFFFFF;
    border: 0.0625rem solid #DFE3E8;
    border-radius: 0.25rem;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}
.abena-v3-filters-panel__checkbox:checked {
    background: var(--abena-color-action-blue, #002C75);
    border-color: var(--abena-color-action-blue, #002C75);
}
.abena-v3-filters-panel__checkbox:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 45%;
    width: 0.3125rem;
    height: 0.5rem;
    border: solid #FFFFFF;
    border-width: 0 0.125rem 0.125rem 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

.abena-v3-filters-panel__checkbox-label {
    font-family: 'Roboto', var(--kendo-font-family);
    font-weight: 400;
    font-size: 0.75rem;           /* 12px */
    line-height: 1.5;
    color: #252E53;
}

.abena-v3-filters-panel__divider {
    height: 0;
    border-top: 0.3125rem solid #F8F9FB;
    margin: 0;
}

.abena-v3-filters-panel__group-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.abena-v3-filters-panel__subtitle {
    font-family: 'Roboto', var(--kendo-font-family);
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.5;
    color: #252E53;
}

.abena-v3-filters-panel__chips {
    display: flex;
    flex-direction: column;
    align-items: stretch;         /* each chip fills the panel width */
    gap: 0.75rem;                 /* 12px */
}

.resident-main-page .abena-v3-sidenav{
    width: unset !important;
}

/* ---------- AbenaV3InlineEditInput ----------
   Spec: figma 8769-86867. Text input + blue confirm + bare X cancel,
   sharing one 40px-tall row. The outer container takes whatever width
   the consumer asks for via the `Width` parameter (default 100%). */
.abena-v3-inline-edit {
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;                  /* 8px */
    height: 2.5rem;               /* 40px */
}

.abena-v3-inline-edit__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 2.5rem;
    padding: 0 0.5rem;            /* 8px horizontal */
    background: #FFFFFF;
    border: 0.0625rem solid rgba(0, 0, 0, 0.08);
    border-radius: 0.5rem;        /* 8px */
    font-family: 'Roboto', var(--kendo-font-family);
    font-weight: 400;
    font-size: 0.875rem;          /* 14px */
    line-height: 1.42;
    color: #252E53;
    outline: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* Blue border + glow only while the user is editing (figma "Focus" state). */
.abena-v3-inline-edit__input:focus {
    border-color: #0058E9;
    box-shadow: 0 0 0 0.125rem rgba(0, 88, 233, 0.3);
}

.abena-v3-inline-edit__input::placeholder {
    color: rgba(37, 46, 83, 0.5);
}

.abena-v3-inline-edit__input:disabled {
    background: #F5F5F5;
    border-color: #DFE3E8;
    box-shadow: none;
    color: #98A0AE;
    cursor: not-allowed;
}

/* Blue confirm — square 40x40, rounded 12px, white check */
.abena-v3-inline-edit__confirm {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;                /* 40px */
    height: 2.5rem;
    padding: 0;
    background: #0044C2;
    border: none;
    border-radius: 0.75rem;       /* 12px */
    color: #FFFFFF;
    font-size: 0.875rem;          /* 14px icon */
    cursor: pointer;
    transition: background-color 120ms ease;
}
.abena-v3-inline-edit__confirm:hover:not(:disabled) { background: #003598; }
.abena-v3-inline-edit__confirm:disabled {
    background: #B0BCD9;
    cursor: not-allowed;
}

/* Bare X cancel — no background, just the icon */
.abena-v3-inline-edit__cancel {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;                /* 24px */
    height: 1.5rem;
    padding: 0;
    background: transparent;
    border: none;
    color: #565D79;
    font-size: 1rem;              /* 16px icon */
    cursor: pointer;
    transition: color 120ms ease;
}
.abena-v3-inline-edit__cancel:hover:not(:disabled) { color: #252E53; }
.abena-v3-inline-edit__cancel:disabled {
    color: #B0BCD9;
    cursor: not-allowed;
}

/* ---- Numeric variant: re-skin TelerikNumericTextBox to match the row ---- */
.abena-v3-inline-edit__numeric-host {
    flex: 1 1 auto;
    min-width: 0;
    height: 2.5rem;
    display: flex;
}

/* Telerik wraps the numeric textbox in a `.k-numerictextbox` span; we target
   that to apply our 40px / 8px-radius / neutral-border default state. */
.abena-v3-inline-edit__numeric-host .k-numerictextbox {
    flex: 1 1 auto;
    width: 100%;
    height: 2.5rem;
    background: #FFFFFF;
    border: 0.0625rem solid rgba(0, 0, 0, 0.08);
    border-radius: 0.5rem;
    box-shadow: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.abena-v3-inline-edit__numeric-host .k-numerictextbox.k-focus {
    border-color: #0058E9;
    box-shadow: 0 0 0 0.125rem rgba(0, 88, 233, 0.3);
}

.abena-v3-inline-edit__numeric-host .k-numerictextbox .k-input-inner {
    height: 100%;
    padding: 0 0.5rem;
    background: transparent;
    border: none;
    outline: none;
    font-family: 'Roboto', var(--kendo-font-family);
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.42;
    color: #252E53;
}

.abena-v3-inline-edit__numeric-host .k-numerictextbox .k-input-inner::placeholder {
    color: rgba(37, 46, 83, 0.5);
}

.abena-v3-inline-edit__numeric-host .k-numerictextbox.k-disabled {
    background: #F5F5F5;
    border-color: #DFE3E8;
    box-shadow: none;
    color: #98A0AE;
}
/* ---------- Section side-nav ---------- */

.abena-v3-sections-config {
    width: 100%;
    max-width: 28.75rem;                         /* 460px; box-sizing keeps own padding inside, no overflow */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;                              /* fill the pane so the inner tree can scroll */
    min-height: 0;
    gap: 0.5rem;
    font-family: var(--kendo-font-family);
    color: #252E53;
}

/* The scrollable tree — header stays fixed above it, scrollbar lives inside the card (per design). */
.abena-v3-sections-config__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;                                 /* spacing between top-level building items */
    padding-right: 0.375rem;                     /* gap between the building border and the scrollbar */
}

@media (max-width: 44rem) {
    .abena-v3-sections-config { max-width: 18.375rem; }  /* 294px */
}

.abena-v3-sections-config__item {
    display: flex;
    flex-direction: column;
    /* No flex gap: spacing between the row and its children-wrapper is added
       via the wrapper's inner padding-top so it animates with the collapse. */
}

/* Children animate via the CSS-grid 0fr → 1fr trick: the wrapper sets the
   row template, the inner __children clips overflow while collapsing. */
.abena-v3-sections-config__children-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.abena-v3-sections-config__children-wrapper.is-open {
    grid-template-rows: 1fr;
}

/* ---- Header (counts chip + expand/collapse toggle) ---- */

.abena-v3-sections-config__header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0.875rem;                                /* 14px per Figma */
    height: 1.75rem;                              /* 28px */
    flex-shrink: 0;                               /* fixed header — only the tree below it scrolls */
    margin-bottom: 0.375rem;                      /* +6px on top of the container's 8px gap → ~14px to the first building, per design */
    /* No border-bottom: the header↔first-building separator is now the first building's own top
       border (so hovering/selecting that building replaces it with the blue group border). */
}

/* Divider between top-level building cards = the building's own 1px TOP border (not a separate
   line). Only 2nd+ buildings show it — the first building has no grey separator at rest (no line
   between it and the header). Because it's part of the border, hovering/selecting a building
   replaces it with the full blue group border — no leftover separator line above the highlighted
   card. The generic .item border is a uniform 1px, so recolouring the top stays uniform. */
.abena-v3-sections-config > .abena-v3-sections-config__item--building + .abena-v3-sections-config__item--building {
    border-top-color: var(--sn-divider);
}

.abena-v3-sections-config__counts-chip {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    height: 1.75rem;                              /* 28px outer */
    padding: 0 0.5rem;                            /* zero vertical so total stays 28px */
    background: var(--sn-divider);
    border-radius: 0.375rem;                      /* 6px */
    font-family: 'Roboto', var(--kendo-font-family);
    font-style: normal;
    font-size: 0.875rem;                          /* 14px */
    font-weight: 500;
    line-height: 100%;
    color: var(--sn-text);
    white-space: nowrap;
}

.abena-v3-sections-config__collapse-toggle {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;                                  /* 32px, per design */
    height: 2rem;
    padding: 0.375rem;                            /* 6px */
    background: #FFFFFF;                          /* white, per design (no gray fill) */
    border: 0.0625rem solid var(--sn-rail);       /* light #DFE3E8 border, per design */
    border-radius: 0.5rem;                        /* 8px */
    color: #252E53;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.abena-v3-sections-config__collapse-toggle:hover {
    background: #FFFFFF;
    border-color: rgba(0, 0, 0, 0.16);
}

.abena-v3-sections-config__collapse-toggle > svg {
    width: 1.125rem;                             /* 18px, per design */
    height: 1.125rem;
    transition: transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Floor wraps its row + children in a grey rounded card. Colour from Figma. */
.abena-v3-sections-config__item--floor {
    background: #F8F9FB;
    border-radius: 0.75rem;
    padding: 0.5rem;
}

/* Service wraps its row + children in a white rounded card nested inside the grey Floor.
   7px padding + 39px row + 2px border = 55px folded height (matches floor's borderless 55). */
.abena-v3-sections-config__item--unit {
    background: #FFFFFF;
    border: 0.0625rem solid #EFF1F4;
    border-radius: 0.5rem;
    padding: 0.4375rem;
}

/* SubUnit is its own bordered row nested inside the Service card.
   Row fills the item edge-to-edge (no item padding) so the selected highlight
   covers the whole card, not just a strip inside the border. */
.abena-v3-sections-config__item--subunit {
    background: #FFFFFF;
    border: 0.0625rem solid #EFF1F4;
    border-radius: 0.5rem;
    padding: 0;
    margin-left: 0;              /* indentation comes from the children-wrapper rail/padding now */
    /* overflow: visible (default) — needed so the drag-over before/after pseudo-bars
       that sit at top: -2px / bottom: -2px are visible. The row's background is
       contained inside the item by the item's own border anyway. */
    transition: background-color 150ms ease, border-color 150ms ease;
}

/* When the inner row is selected, just let the row's own light-blue background
   + left accent show through. The subunit's neutral border stays — no full
   coloured ring around the card. */

.abena-v3-sections-config__row {
    display: flex;
    align-items: center;
    gap: 0.625rem;                               /* 10px, per design (label↔counter etc.) */
    padding: 0.5rem 0.125rem;                    /* 8px y / 2px x */
    border-radius: 0.375rem;
    cursor: pointer;
    user-select: none;
    transition: background-color 150ms ease, color 150ms ease;
    min-height: 2.5rem;
    position: relative;
}

/* Selection + hover are shown as a coloured border around the whole group (the enclosing
   .item--{level}), not on the row itself (ABENA-1527). The row keeps its default background,
   font colour, and no left bar. See the .item--{level}:has(.is-selected) / :hover rules below. */

.abena-v3-sections-config__row.is-renaming {
    cursor: default;
    background: transparent;
}

/* Level icon badge (ABENA-1527): coloured glyph on a soft coloured background, per level. */
.abena-v3-sections-config__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    border-radius: 0.375rem;
    font-size: 1rem;
    color: #252E53;
}

.abena-v3-sections-config__row--building .abena-v3-sections-config__icon { color: var(--lvl-building); background: var(--lvl-building-soft); font-size: 1.0625rem; }  /* 17px, per design */
.abena-v3-sections-config__row--floor .abena-v3-sections-config__icon    { color: var(--lvl-floor);    background: var(--lvl-floor-soft);    font-size: 1rem; }       /* 16px, per design */
.abena-v3-sections-config__row--unit .abena-v3-sections-config__icon     { color: var(--lvl-unit);     background: var(--lvl-unit-soft);     font-size: 0.9375rem; }  /* 15px, per design */

.abena-v3-sections-config__icon > svg {
    width: 1.125rem;
    height: 1.125rem;
}

.abena-v3-sections-config__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--kendo-font-size-md);
    font-weight: var(--kendo-font-weight-medium);
    color: #252E53;
}

/* Pushes the right-side controls (add-button + hover actions) to the far right. */
.abena-v3-sections-config__spacer {
    flex: 1;
    min-width: 0.5rem;
}

/* Chevron toggle — clicking it folds/unfolds the row without changing selection.
   Wider 28x28 hit-target padding keeps the icon comfortably clickable without
   stretching row height. Points RIGHT when collapsed, rotates to point DOWN when expanded. */
.abena-v3-sections-config__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;                     /* keep the 28px hit target from inflating the row */
    width: 1.75rem;                              /* 28px hit target */
    height: 1.75rem;
    padding: 0.3125rem;                          /* keeps glyph ~18px */
    margin: 0 -0.25rem;                          /* tighten flex gap */
    cursor: pointer;
    color: var(--sn-text-muted);
    background: transparent;
    border-radius: 0.25rem;
    transform: rotate(-90deg);                   /* collapsed → points right */
    transition: transform 150ms ease, color 150ms ease;
}

.abena-v3-sections-config__chevron:hover {
    color: var(--sn-text);
}

.abena-v3-sections-config__chevron > svg {
    width: 1.125rem;                             /* 18px */
    height: 1.125rem;
}

.abena-v3-sections-config__chevron > i {
    font-size: 1rem;                             /* 16px uil glyph */
}

.abena-v3-sections-config__chevron.is-expanded {
    transform: rotate(0deg);                     /* expanded → points down */
}

.abena-v3-sections-config__row.is-selected .abena-v3-sections-config__chevron {
    color: var(--sn-text-muted);   /* stay gray even when selected, per design */
}

/* Every level shows its room total in a shaded pill, so the separator is no longer needed. */
.abena-v3-sections-config__count-divider {
    display: none;
}

/* Count pill for Floor / Service / SubService — same shaded pill as the Building __chip. */
.abena-v3-sections-config__count {
    flex-shrink: 0;
    box-sizing: border-box;       /* min-width is the whole box; padding must not add to it */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;           /* 28px, per design */
    height: 1.5rem;               /* 24px */
    padding: 0 0.5rem;            /* 8px horizontal, per design */
    border-radius: 0.25rem;       /* 4px, per design (radius-xs) */
    background: var(--sn-divider);
    font-size: 0.75rem;           /* 12px */
    font-weight: var(--kendo-font-weight-medium);
    color: var(--sn-text);
    line-height: 1;
}

.abena-v3-sections-config__rename-input {
    flex: 1;
    min-width: 0;
    height: 2rem;
    padding: 0 0.625rem;
    border: 0.0625rem solid var(--kendo-color-info-on-surface);
    border-radius: 0.375rem;
    outline: none;
    background: #FFFFFF;
    font-family: inherit;
    font-size: var(--kendo-font-size-md);
    font-weight: var(--kendo-font-weight-medium);
    color: #252E53;
}

.abena-v3-sections-config__rename-input:focus {
    box-shadow: 0 0 0 0.125rem rgba(37, 46, 83, 0.12);
}

/* Chip (only used by Building) — pill with shaded background. */
.abena-v3-sections-config__chip {
    flex-shrink: 0;
    box-sizing: border-box;       /* min-width is the whole box; padding must not add to it */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;           /* 28px, per design */
    height: 1.5rem;               /* 24px */
    padding: 0 0.5rem;            /* 8px horizontal, per design */
    border-radius: 0.25rem;       /* 4px, per design (radius-xs) */
    background: var(--sn-divider);
    color: var(--sn-text);
    font-family: 'Roboto', var(--kendo-font-family);
    font-style: normal;
    font-size: 0.75rem;           /* 12px */
    font-weight: 500;
    line-height: 1;
}

/* "Add child" button — borderless, matches the pencil/trash action chrome. */
.abena-v3-sections-config__add-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;                /* 20px box (16px glyph + 2px padding), per design */
    height: 1.25rem;
    padding: 0;
    border: none;
    border-radius: 0.25rem;        /* 4px, square-ish, per design radius-xs */
    background: transparent;
    color: var(--sn-text-muted);   /* gray, per design */
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 120ms ease, color 120ms ease;
}

/* Add (+) button hover follows the level colour, per design (.cfg-*-head .cfg-add:hover). */
.abena-v3-sections-config__row--building .abena-v3-sections-config__add-button:hover { background: var(--lvl-building-soft); color: var(--lvl-building); }
.abena-v3-sections-config__row--floor .abena-v3-sections-config__add-button:hover    { background: var(--lvl-floor-soft);    color: var(--lvl-floor); }
.abena-v3-sections-config__row--unit .abena-v3-sections-config__add-button:hover     { background: var(--lvl-unit-soft);     color: var(--lvl-unit); }

.abena-v3-sections-config__add-button > svg {
    width: 1rem;
    height: 1rem;
}

/* Groups the hover actions (pencil + trash) with the always-visible add button
   so they sit flush together, bypassing the row's 0.5rem gap. Auto left margin
   pushes the group to the right edge — replaces the explicit spacer element. */
.abena-v3-sections-config__actions-group {
    display: inline-flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    margin-left: auto;
}

/* Hover-only actions menu (pencil + trash). */
.abena-v3-sections-config__actions {
    display: none;
    gap: 0.625rem;               /* 10px between edit/delete, per design */
    flex-shrink: 0;
}

.abena-v3-sections-config__row:hover .abena-v3-sections-config__actions {
    display: inline-flex;
}

.abena-v3-sections-config__row.is-renaming .abena-v3-sections-config__actions {
    display: none;
}

/* Collapse the spacer while renaming so the input takes all the leftover width. */
.abena-v3-sections-config__row.is-renaming .abena-v3-sections-config__spacer {
    display: none;
}

/* Inline confirm / cancel buttons shown while a row is being renamed. */
.abena-v3-sections-config__rename-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.abena-v3-sections-config__rename-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0.0625rem solid #DFE3E8;
    border-radius: 0.375rem;
    background: #FFFFFF;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.abena-v3-sections-config__rename-action > svg {
    width: 1rem;
    height: 1rem;
}

.abena-v3-sections-config__rename-action--confirm {
    background: var(--kendo-color-info-on-surface);
    border-color: var(--kendo-color-info-on-surface);
    color: #FFFFFF;
}

.abena-v3-sections-config__rename-action--confirm:hover {
    filter: brightness(1.15);
}

.abena-v3-sections-config__rename-action--cancel {
    border-color: transparent;
    background: transparent;
    color: #565D79;
}

.abena-v3-sections-config__rename-action--cancel:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #252E53;
}

.abena-v3-sections-config__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;                /* 20px box (16px glyph + 2px padding), per design */
    height: 1.25rem;
    padding: 0;
    border: none;
    border-radius: 0.25rem;        /* 4px, square-ish, per design radius-xs */
    background: transparent;
    color: var(--sn-text-muted);   /* gray, per design */
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}
.abena-v3-sections-config__action > i {
    font-size: 1rem;               /* 16px glyph, per design */
}

/* Edit action: light blue bg + darker blue glyph on hover (per design). */
.abena-v3-sections-config__action:hover {
    background: rgba(0, 68, 194, 0.08);
    color: #0044C2;
}

/* Delete action (the one with the trash glyph): red bg + red glyph on hover. */
.abena-v3-sections-config__action:has(.uil-trash-alt):hover {
    background: rgba(187, 72, 65, 0.08);
    color: #BB4841;
}

.abena-v3-sections-config__action > svg {
    width: 1rem;
    height: 1rem;
}

.abena-v3-sections-config__drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;        /* 22px per Figma */
    height: 1.375rem;
    flex-shrink: 0;
    color: #C9CCD1;         /* gray-350 per design (.cfg-drag dots) */
    cursor: grab;
    opacity: 1;
    transition: color 150ms ease, opacity 150ms ease;
}

.abena-v3-sections-config__drag-handle:hover {
    color: var(--sn-text);
}

.abena-v3-sections-config__drag-handle:active {
    cursor: grabbing;
}

.abena-v3-sections-config__drag-handle > svg {
    width: 0.75rem;         /* 12px, per design */
    height: 1.125rem;       /* 18px, per design */
}

.abena-v3-sections-config__row.is-renaming .abena-v3-sections-config__drag-handle {
    opacity: 0;
    pointer-events: none;
}

/* ---- Drag & drop visual feedback (editable panel only) ---- */

/* The row currently being dragged — fade it so it's clearly the source. */
.abena-v3-sections-config__row.is-drag-source {
    opacity: 0.5;
}

/* "Drop into this row" — light bg highlight + ring. */
.abena-v3-sections-config__row.is-drag-over {
    background: rgba(37, 46, 83, 0.08);
    box-shadow: inset 0 0 0 0.0625rem var(--kendo-color-info-on-surface);
}

/* "Drop above this row" — accent bar at the top edge. */
.abena-v3-sections-config__row.is-drag-over-before {
    position: relative;
}
.abena-v3-sections-config__row.is-drag-over-before::before {
    content: '';
    position: absolute;
    left: 0.25rem;
    right: 0.25rem;
    top: -0.125rem;
    height: 0.125rem;
    background: var(--kendo-color-info-on-surface);
    border-radius: 0.0625rem;
    pointer-events: none;
}

/* "Drop below this row" — accent bar at the bottom edge. */
.abena-v3-sections-config__row.is-drag-over-after {
    position: relative;
}
.abena-v3-sections-config__row.is-drag-over-after::after {
    content: '';
    position: absolute;
    left: 0.25rem;
    right: 0.25rem;
    bottom: -0.125rem;
    height: 0.125rem;
    background: var(--kendo-color-info-on-surface);
    border-radius: 0.0625rem;
    pointer-events: none;
}

.abena-v3-sections-config__children {
    /* min-height + overflow:hidden are required for the parent's
       grid-template-rows: 0fr to actually clip the children to zero height. The row↔first-child
       padding-top is applied only in the .is-open state (below) — otherwise that 6px padding
       survives the collapse (padding never shrinks) and shows as a floor-rail stub when folded. */
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.abena-v3-sections-config__children-wrapper.is-open > .abena-v3-sections-config__children {
    padding-top: 0.375rem;        /* spacing between the row and its first child, only when expanded */
}

/* Subservice siblings sit flush against each other otherwise — give them breathing room.
   Soft corridor-coloured left rail (ABENA-1527), per the design's .cfg-zones. Rail left edge
   aligns with the parent service row's drag-handle start; tight gap to the items. */
.abena-v3-sections-config__children:has(> .abena-v3-sections-config__item--subunit) {
    gap: 0.5rem;         /* 8px */
    border-left: 0.125rem solid var(--lvl-subunit-soft);
    margin-left: 0.5rem;
    padding-left: 0.75rem;
}

/* Floor cards stacked inside a building need a more prominent gap.
   Soft floor-coloured left rail (ABENA-1527), per the design's .cfg-floors. Rail is centered
   horizontally on the parent building row's drag-handle icon. */
.abena-v3-sections-config__children:has(> .abena-v3-sections-config__item--floor) {
    gap: 0.5rem;         /* 8px */
    border-left: 0.125rem solid var(--lvl-floor-soft);
    margin-left: 0.75rem;
    padding-left: 0.5625rem;
}

/* Service cards stacked inside a floor. */
.abena-v3-sections-config__children:has(> .abena-v3-sections-config__item--unit) {
    gap: 0.5rem;         /* 8px */
}

/* ---- Per-variant rendering (each variant = its own row component) ---- */

/* Building variant — top-level building row. Bold title + chip with shaded bg.
   Taller row (52px) for more vertical breathing room, per the design's .cfg-bld-head. */
.abena-v3-sections-config__row--building {
    box-sizing: border-box;
    min-height: 3.25rem;         /* 52px, per design */
    padding: 0.25rem 0.125rem;   /* 4px y / 2px x */
}
.abena-v3-sections-config__row--building .abena-v3-sections-config__label {
    font-family: 'Roboto', var(--kendo-font-family);
    font-style: normal;
    font-size: 0.9375rem;         /* 15px, per design */
    font-weight: 700;
    color: var(--abena-color-page-title);   /* #0D1740, per design */
}

/* Floor variant — étage. Bold title inside the grey card; layers icon.
   border-box + 39px row keeps the folded floor item at 55px
   (16px item padding + 39px row). */
.abena-v3-sections-config__row--floor {
    box-sizing: border-box;
    min-height: 2.4375rem;       /* 39px including its own padding */
    padding: 0.25rem 0.125rem;   /* 4px y / 2px x */
    background: transparent;
}
.abena-v3-sections-config__row--floor .abena-v3-sections-config__label {
    font-family: 'Roboto', var(--kendo-font-family);
    font-style: normal;
    font-size: 0.875rem;          /* 14px */
    font-weight: 700;
    color: var(--sn-text);
}

.abena-v3-sections-config__row--floor .abena-v3-sections-config__count {
    font-family: 'Roboto', var(--kendo-font-family);
    font-style: normal;
    font-size: 0.75rem;           /* 12px */
    font-weight: 500;
    color: var(--sn-text-muted);
}

/* Unit variant — service / unité. Standard row body, no leading icon.
   border-box + 39px row keeps the folded service item at 55px (matches floor). */
.abena-v3-sections-config__row--unit {
    box-sizing: border-box;
    min-height: 2.4375rem;       /* 39px including padding */
    padding: 0.25rem 0.125rem;   /* 4px y / 2px x */
}
.abena-v3-sections-config__row--unit .abena-v3-sections-config__label {
    font-family: 'Roboto', var(--kendo-font-family);
    font-style: normal;
    font-size: 0.875rem;          /* 14px */
    font-weight: 700;             /* bold, per design */
    color: var(--sn-text);        /* #252E53, per design */
}

.abena-v3-sections-config__row--unit .abena-v3-sections-config__count {
    font-family: 'Roboto', var(--kendo-font-family);
    font-style: normal;
    font-size: 0.75rem;           /* 12px */
    font-weight: 500;
    color: var(--sn-text-muted);
}

/* SubUnit variant — sub-service / niveau 3. Compact, indented, no icon, no add button.
   border-box makes min-height the actual row total — visible card = 39px. */
.abena-v3-sections-config__row--subunit {
    box-sizing: border-box;
    min-height: 2.25rem;         /* 36px, per design .cfg-zone */
    padding: 0.25rem 0.125rem;   /* 4px y / 2px x */
    border-radius: 0.4375rem;
}
.abena-v3-sections-config__row--subunit .abena-v3-sections-config__label {
    font-family: 'Roboto', var(--kendo-font-family);
    font-style: normal;
    font-size: 0.875rem;          /* 14px */
    font-weight: 500;             /* per design */
    color: var(--sn-text);
}

.abena-v3-sections-config__row--subunit .abena-v3-sections-config__count {
    font-family: 'Roboto', var(--kendo-font-family);
    font-style: normal;
    font-size: 0.75rem;           /* 12px */
    font-weight: 400;
    color: var(--sn-text-muted);
}

/* SubUnit rows carry no level icon (only the drag grip precedes the label), so the
   default 10px row gap leaves too much space between the grip and the label. Pull the
   label back toward the grip for these rows only — the gap to the counter is unaffected. */
.abena-v3-sections-config__row--subunit .abena-v3-sections-config__drag-handle {
    margin-right: -0.375rem;      /* ~10px gap → ~4px */
}

/* ------------------------------------------------------------------ */
/* AbenaV3FilterButton                                                */
/* ------------------------------------------------------------------ */
.abena-v3-filter-btn {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4375rem 1rem;
    box-sizing: border-box;
    min-height: 2.3125rem;
    background: #FFFFFF;
    border: 0.0625rem solid var(--sn-text-muted);
    border-radius: 0.5rem;        /* 8px */
    font-family: 'Roboto', var(--kendo-font-family);
    font-style: normal;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1rem;
    color: #4F4F4F;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
    user-select: none;
    white-space: nowrap;
}

.abena-v3-filter-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.125rem var(--abena-color-focus-ring);
}

.abena-v3-filter-btn:hover:not(:disabled) {
    background: var(--abena-color-action-blue-soft);
}

.abena-v3-filter-btn:disabled,
.abena-v3-filter-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

.abena-v3-filter-btn__label {
    display: inline-flex;
    align-items: center;
}

.abena-v3-filter-btn__icon {
    width: 0.625rem;
    height: 0.625rem;
    font-size: 0.625rem;
    color: #525252;
    line-height: 1;
}

.abena-v3-filter-btn__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    border-radius: 999px;
    background: var(--abena-color-action-blue);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
}

/* ------------------------------------------------------------------ */
/* AbenaV3RadioCardGroup + AbenaV3RadioCardOption                     */
/* Group: layout only (flex-wrap row of equal cards).                 */
/* Card: a standalone radio "card" with a label and optional          */
/* description underneath; can be used outside of a group.            */
/* ------------------------------------------------------------------ */
.abena-v3-radio-card-group {
    display: flex;
    flex-wrap: nowrap;                /* keep all options on a single row */
    gap: 0.75rem;
    align-items: stretch;
}

.abena-v3-radio-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem;
    background: #FFFFFF;
    border: 0.0625rem solid #EFF1F4;
    border-radius: 0.75rem;
    cursor: pointer;
    flex: 1 1 0;                      /* equal share of the row regardless of label length */
    min-width: 0;                     /* allow shrinking below intrinsic content width */
    user-select: none;
}

.abena-v3-radio-card--with-description {
    min-height: 5.625rem;
}

.abena-v3-radio-card--checked {
    background: #F5F5F5;
    border-color: var(--abena-color-action-blue);
}

.abena-v3-radio-card__header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.375rem;
}

/* Radio - empty grey circle when unchecked, blue donut when checked. */
.abena-v3-radio-card__radio {
    box-sizing: border-box;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background: #FFFFFF;
    border: 0.0625rem solid #C9CCD1;
    border-radius: 50%;
    flex-shrink: 0;
}

.abena-v3-radio-card--checked .abena-v3-radio-card__radio {
    border: 0.25rem solid var(--abena-color-action-blue);
}

.abena-v3-radio-card__label {
    font-family: 'Roboto', var(--kendo-font-family);
    font-size: 0.875rem;
    font-weight: 500;
    color: #252E53;
    text-align: center;
    /* Reserve the bold width even when unchecked so flipping the card's
       weight doesn't widen it and shove neighbouring cards around. */
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.abena-v3-radio-card__label::after {
    content: attr(data-label);
    font-weight: 700;
    height: 0;
    visibility: hidden;
    overflow: hidden;
    user-select: none;
    pointer-events: none;
}

.abena-v3-radio-card--checked .abena-v3-radio-card__label {
    font-weight: 700;
}

.abena-v3-radio-card__description {
    font-family: 'Roboto', var(--kendo-font-family);
    font-size: 0.875rem;
    font-weight: 400;
    color: #3D3D3D;
    line-height: 1.42;
    text-align: center;
}


/* ============================================================
   ResidentAddEditPage — per-section label typography.
   Scoped by data-step so the rule only affects the resident
   add/edit form and won't leak to other pages using the same
   `.abena-v2-small` class.
   - Sections 1/2/3 (data-step 0..2): Roboto 400 / 14px / #3D3D3D
   - Sections 6/7 (data-step 5..6):   Roboto 700 / 14px / #3D3D3D
   ============================================================ */
.abena-v2-form-section[data-step="0"] .abena-v2-small,
.abena-v2-form-section[data-step="1"] .abena-v2-small,
.abena-v2-form-section[data-step="2"] .abena-v2-small {
    font-family: 'Roboto', var(--kendo-font-family);
    font-style: normal;
    font-weight: 400;
    font-size: 0.875rem;     /* 14px */
    color: #3D3D3D;
}

.abena-v2-form-section[data-step="5"] .abena-v2-small,
.abena-v2-form-section[data-step="6"] .abena-v2-small {
    font-family: 'Roboto', var(--kendo-font-family);
    font-style: normal;
    font-weight: 700;
    font-size: 0.875rem;     /* 14px */
    color: #3D3D3D;
}

/* ============================================================
   AbenaV3SeverityScale — horizontal labelled severity bar.
   Equal-width grid columns keep each radio centred regardless
   of label length; the gradient track runs across the radio
   centres. Each column is a single <button> so clicking the
   label triggers the radio.
   ============================================================ */
.abena-v3-severity-scale {
    position: relative;
    width: 100%;
}

.abena-v3-severity-scale__items {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;          /* equal-width columns regardless of label length */
    align-items: end;
    z-index: 1;
}

.abena-v3-severity-scale__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

/* Whole-column click target — label + radio stacked. */
.abena-v3-severity-scale__option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.abena-v3-severity-scale__option:focus-visible {
    outline: none;
}

.abena-v3-severity-scale__option:focus-visible .abena-v3-severity-scale__radio {
    outline: 0.125rem solid var(--abena-color-action-blue);
    outline-offset: 0.125rem;
}

.abena-v3-severity-scale__label {
    font-family: 'Roboto', var(--kendo-font-family);
    font-style: normal;
    font-weight: 500;
    font-size: 0.875rem;             /* 14px */
    line-height: 1;
    color: #3D3D3D;
    text-align: center;
    white-space: nowrap;
}

.abena-v3-severity-scale__item--checked .abena-v3-severity-scale__label {
    font-weight: 700;
}

.abena-v3-severity-scale__radio {
    box-sizing: border-box;
    width: 1rem;                     /* 16px */
    height: 1rem;
    background: #FFFFFF;
    border: 0.0625rem solid #C9CCD1;
    border-radius: 9999px;
    display: inline-block;
    flex-shrink: 0;
    transition: border-color 120ms ease, border-width 120ms ease;
}

.abena-v3-severity-scale__option:hover .abena-v3-severity-scale__radio {
    border-color: var(--abena-color-action-blue);
}

.abena-v3-severity-scale__item--checked .abena-v3-severity-scale__radio {
    border: 0.25rem solid var(--abena-color-action-blue);  /* 4px #0044C2 — Figma */
}

/* Gradient bar — runs behind the radio row, vertically centred
   on the radio circles. With the radio at the bottom of each
   column, the radio's centre sits 0.5rem above the items-container
   bottom edge; the 8px track centres on that line when
   bottom = 0.5rem − 0.25rem (half-track-height). */
.abena-v3-severity-scale__track {
    box-sizing: border-box;          /* include the 1px border in the 8px height */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.25rem;
    height: 0.5rem;                  /* 8px */
    border-radius: 0.25rem;
    background: linear-gradient(
        90deg,
        #8AC99B 0%,                  /* green — low severity */
        #7CA1DB 36.5%,
        #F0BF83 64.8%,
        #FF7F71 100%                 /* red — high severity */
    );
    border: 0.0625rem solid rgba(0, 0, 0, 0.08);
    z-index: 0;
}

/* ============================================================
   AbenaV3ResidentPhoto — empty/filled avatar picker for the
   resident add/edit page. Empty: dark navy 64×64 circle + user-
   plus icon + "Ajouter une photo" link. Filled: 64×64 photo with
   4px grey border + "Changer la photo" link.
   ============================================================ */
.abena-v3-resident-photo {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;                /* 12px */
    cursor: pointer;
    user-select: none;
    /* Parent .abena-v2-form-section is a column-flex container with the
       default `align-items: stretch`, which would otherwise stretch this
       label to the full row width. Pin to the start so the clickable
       area is just the circle + the label text. */
    align-self: flex-start;
    width: fit-content;
}

.abena-v3-resident-photo__circle {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;                 /* 64px */
    height: 4rem;
    background: #565D79;
    border-radius: 9999px;
    flex-shrink: 0;
}

.abena-v3-resident-photo__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
}

.abena-v3-resident-photo__icon > svg {
    width: 1.125rem;             /* 18px */
    height: 1.0625rem;           /* 17px */
    color: #FFFFFF;
}

.abena-v3-resident-photo__image {
    box-sizing: border-box;
    width: 4rem;                 /* 64px */
    height: 4rem;
    border-radius: 9999px;
    object-fit: cover;
    flex-shrink: 0;
}

.abena-v3-resident-photo__label {
    font-family: 'Roboto', var(--kendo-font-family);
    font-style: normal;
    font-weight: 400;
    font-size: 0.75rem;          /* 12px */
    line-height: 1.5;            /* 150% */
    color: #3D3D3D;
    text-decoration: underline;
}

.abena-v3-global-notification {
    top: 5rem !important;
    right: 2rem !important;
    left: unset !important;
    transform: none !important;
}

.abena-v3-global-notification .k-notification{
    background: white !important;
    color: black !important;
    border-radius: 10px !important;
    border: none !important;
    position: relative;
    overflow: hidden;
}

.abena-v3-global-notification .k-notification .k-notification-content{
    line-height: 0 !important;
}

.abena-v3-global-notification .k-notification .k-notification-actions{
    color: var(--kendo-color-light) !important;
}

@keyframes maxOff {
    to {
        width: 100%;
    }
}

.abena-v3-global-notification .k-notification:after {
    content: " ";
    position: absolute;
    width: 0;
    left: 0;
    height: 2px;
    bottom: 0;
    background: black;
    animation: maxOff 3.5s;
}
.abena-v3-global-notification .k-notification-status{
    font-size: 1.25rem !important;
}
.abena-v3-global-notification .k-notification-success .k-notification-status{
    color: green !important;
}
.abena-v3-global-notification .k-notification-light .k-notification-status{
    color: black !important;
}
.abena-v3-global-notification .k-notification-error .k-notification-status{
    color: red !important;
}

.abena-v3-global-notification:has(.k-notification-success) .k-notification:after{
    background: green !important;
}
.abena-v3-global-notification:has(.k-notification-error) .k-notification:after{
    background: red !important;
}

/* ===== Stacked selectors — responsive rearrangement for /room + /resident (ABENA-1525) =====
   Shared rule set (markup carries `abena-stacked-selectors` on the row container,
   `__panel` on the section+group column, `__main` on the grid column).
     ≥ 1101px : selectors sit in a column beside the grid (default — no rule here).
     < 1101px : selectors move ABOVE the grid, side by side (section | group, 50/50),
                and stay side by side at all smaller widths.
   The fixed viewport heights are dropped so the layout area scrolls (header stays fixed).
   `!important` is used where it overrides the per-screen `.room-main-page .room-*`
   compound selectors (higher specificity than the shared class). */
@media (max-width: 1100px) {
    /* Page = fixed-height flex column: the page top-bar header stays put while only the
       layout area below it scrolls. (Bound to the viewport; the Telerik .k-drawer-content
       ancestor is also viewport-height with overflow:hidden.) */
    .room-main-page,
    .resident-main-page {
        height: 100vh;
        max-height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    /* Resident view/edit/add render a full-page absolute overlay inside .resident-main-page.
       In that case the page must stay at viewport height so the overlay (height:100%) fills it;
       otherwise the list-mode flex rules below collapse the page to the header height (the
       `:has(.resident-view-page){height:100%}` rule resolves to auto on the broken % chain). */
    .resident-main-page:has(> .k-absolute) {
        height: 100vh !important;
        max-height: 100vh !important;
    }

    /* The selectors + grid area is the scroll container (vertical only — never horizontal). */
    .abena-stacked-selectors {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        flex-direction: column !important;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .abena-stacked-selectors__panel {
        flex: 0 0 auto !important;
        width: 100% !important;
        height: auto !important;          /* was calc(100vh - …) on .room-left */
        box-sizing: border-box;
        flex-direction: row !important;
        /* Stretch so the section card and the group card share the taller height. */
        align-items: stretch;
        gap: 1.25rem;
        margin-right: 0 !important;
        margin-left: 0.75rem !important;  /* override room-left's 1.5rem margin */
        padding-top: 1rem;
        padding-right: 3rem !important;   /* breathing room on the right edge < 1101px */
    }

    /* Section selector | group selector share the row evenly. */
    .abena-stacked-selectors__panel > * {
        flex: 1 1 0;
        min-width: 0;
    }

    /* /room wraps each card in a `.section-nav` / `.group-filter` div. Make the wrappers
       flex columns and let their card fill, so both cards reach the stretched (taller)
       column height. (/resident has no wrappers — its cards are the flex items directly,
       so `align-items: stretch` already makes them equal height and these don't match.) */
    .abena-stacked-selectors__panel > .section-nav,
    .abena-stacked-selectors__panel > .group-filter {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .abena-stacked-selectors__panel > .section-nav > .abena-v3-sidenav,
    .abena-stacked-selectors__panel > .group-filter > .abena-v3-groups-panel {
        flex: 1 1 auto;
    }

    /* /room nests each selector in a `.section-nav` / `.group-filter` wrapper, and the
       inner components carry their original fixed side-panel width (e.g. .abena-v3-sidenav
       is 274px). Make them fill their 50% wrapper so the section selector isn't narrow.
       (/resident has no wrapper — its components are the flex items directly — so this
       selector simply doesn't match there.) */
    .abena-stacked-selectors__panel > .section-nav > *,
    .abena-stacked-selectors__panel > .group-filter > * {
        width: 100% !important;
    }

    .abena-stacked-selectors__main {
        height: auto !important;          /* content height so the layout area scrolls as one */
        box-sizing: border-box;
        overflow: visible !important;
    }

    /* The grid sizes to its content (no fixed 100vh) so it doesn't push itself off-screen. */
    .abena-stacked-selectors__main .abs-grid {
        height: auto !important;
        max-height: none !important;
    }
}

/* ===== /room/config redesign — left panel, focus highlight, breadcrumb (ABENA-1526) =====
   Per-level colours match the design's --lvl-* (and the right pane's existing --rc-lvl-*):
   building #0044C2, floor #0E8A6E, unit/service #8F49D4, sub-unit/sub-service #C98A00. */
.rooms-config-page {
    --lvl-building: #0044C2; --lvl-building-soft: rgba(0, 68, 194, 0.09);
    --lvl-floor:    #0E8A6E; --lvl-floor-soft:    rgba(14, 138, 110, 0.11);
    --lvl-unit:     #8F49D4; --lvl-unit-soft:     rgba(143, 73, 212, 0.10);
    --lvl-subunit:  #C98A00; --lvl-subunit-soft:  rgba(201, 138, 0, 0.13);
}

/* Both panels on white rounded cards (left was not yet restyled). */
.rooms-config-page__left > .abena-v3-sections-config,
.rooms-config-page__right > .rooms-config-detail {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 0.75rem;
}
.rooms-config-page__left > .abena-v3-sections-config { padding: 1rem; }                /* 16px, per design .config-panel */
/* Card has no padding now — the breadcrumb spans full width and the inner scroll list carries
   the content padding, so the card edges/corners stay clean while the list scrolls. */
.rooms-config-page__right > .rooms-config-detail { padding: 0; }
/* Inner scroll list: only this scrolls; carries the content padding (32px sides / 40px bottom,
   per design .estab-main) plus a small right gap so the scrollbar clears the cards. */
.rooms-config-detail__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;                                   /* 32px between section blocks */
    padding: 1rem 0.5rem 2.5rem 2rem;
}
.rooms-config-page__right { padding-top: 0; }

/* Body shares the right pane's subtle background, with a 1rem top gap above the panes. */
.rooms-config-page__body {
    background-color: var(--sn-surface-subtle);
    padding-top: 1.5rem;
}
/* No buildings → left panel is not rendered → the right pane spans the full width. */
.rooms-config-page__body:not(:has(.rooms-config-page__left)) {
    grid-template-columns: 1fr;
}

/* ===== /room/config — stack panes below 1101px =====
   Mirror the /room + /resident stacked layout: the left pane (sections tree) moves
   ABOVE the right pane (detail), each full width, and the body becomes the single
   vertical scroll area — the inner card scroll regions expand to content so the
   whole thing scrolls as one. Side padding (1.5rem) lines the cards up with the
   page header. */
@media (max-width: 1100px) {
    .rooms-config-page__body {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 2.75rem;
    }

    .rooms-config-page__left,
    .rooms-config-page__right {
        width: 100%;
        flex: 0 0 auto;
        height: auto;
        overflow: visible;          /* scroll as one with the body, not internally */
    }

    /* Full width with symmetric side padding so both cards align to the page edges. */
    .rooms-config-page__left {
        padding: 0 1.5rem;
    }

    .rooms-config-page__right {
        padding: 1rem 1.5rem;
    }

    /* Let the left card span the full width instead of its 460px desktop cap. */
    .abena-v3-sections-config {
        max-width: none;
    }

    /* Inner cards grow to content so the body — not the cards — scrolls. */
    .rooms-config-page__left > .abena-v3-sections-config,
    .rooms-config-page__right > .rooms-config-detail {
        flex: 0 0 auto;
        height: auto;
        max-height: none;
    }

    .abena-v3-sections-config__scroll,
    .rooms-config-detail__scroll {
        overflow: visible;
        max-height: none;
        min-height: 0;
    }
}

/* Left panel: a full border around the SELECTED group, coloured by level/type.
   Border is always present but transparent so toggling it never shifts layout. */
.abena-v3-sections-config__item {
    border: 1px solid transparent;
    border-radius: 0.5rem;
}
/* Sub-service items keep a visible resting card border (design --border-default = gray-200),
   so each one reads as its own card; selection/hover override it with the level colour. */
.abena-v3-sections-config__item--subunit { border-color: #EFF1F4; }
/* Unit/service cards also keep a visible resting border, per design (overridden to the level
   colour on selection/hover). Floor + unit cards use the larger 12px radius, per design. */
.abena-v3-sections-config__item--unit { border-color: #EFF1F4; }
.abena-v3-sections-config__item--floor,
.abena-v3-sections-config__item--unit { border-radius: 0.75rem; }

/* Inset the building's content from its right + bottom border so the nested floor cards'
   grey background doesn't touch the building group border (left is already inset by the rail). */
.abena-v3-sections-config__item--building {
    padding-right: 0.5rem;
    padding-bottom: 0.5rem;
}
/* When folded (no expanded floor children), drop the bottom inset so the building header sits
   vertically centered within its hover/selected border, with no collapsed floor rail showing. */
.abena-v3-sections-config__item--building:not(:has(> .abena-v3-sections-config__children-wrapper.is-open)) {
    padding-bottom: 0;
}
.abena-v3-sections-config__item--building:has(> .abena-v3-sections-config__row.is-selected) { border-color: var(--lvl-building); }
.abena-v3-sections-config__item--floor:has(> .abena-v3-sections-config__row.is-selected)    { border-color: var(--lvl-floor); }
.abena-v3-sections-config__item--unit:has(> .abena-v3-sections-config__row.is-selected)     { border-color: var(--lvl-unit); }
.abena-v3-sections-config__item--subunit:has(> .abena-v3-sections-config__row.is-selected)  { border-color: var(--lvl-subunit); background: #F8F9FB; }   /* gray background when selected, same as hover */

/* Same coloured group border on hover (ABENA-1527) — innermost hovered node wins, so a hovered
   child doesn't also light up its ancestors. Mirrors the design's :hover:not(:has(... :hover)). */
.abena-v3-sections-config__item--building:hover:not(:has(.abena-v3-sections-config__item--floor:hover)):not(:has(.abena-v3-sections-config__item--unit:hover)):not(:has(.abena-v3-sections-config__item--subunit:hover)) { border-color: var(--lvl-building); }
.abena-v3-sections-config__item--floor:hover:not(:has(.abena-v3-sections-config__item--unit:hover)):not(:has(.abena-v3-sections-config__item--subunit:hover)) { border-color: var(--lvl-floor); }
.abena-v3-sections-config__item--unit:hover:not(:has(.abena-v3-sections-config__item--subunit:hover)) { border-color: var(--lvl-unit); }
.abena-v3-sections-config__item--subunit:hover { border-color: var(--lvl-subunit); background: #F8F9FB; }   /* light gray on hover, per design .cfg-zone:hover */

/* Building/establishment spine: soft by default, bright only when focused
   (overrides the always-solid building border in the base right-pane styles). */
.rooms-config-section--building > .rooms-config-section__body,
.rooms-config-section--establishment > .rooms-config-section__body {
    border-left-color: var(--rc-lvl-building-soft);
}

/* Right pane: brighten the focused group's left-line (soft → bright). */
.rooms-config-section--building.is-focused > .rooms-config-section__body,
.rooms-config-section--establishment.is-focused > .rooms-config-section__body { border-left-color: var(--rc-lvl-building); }
.rooms-config-section--floor.is-focused > .rooms-config-section__body { border-left-color: var(--rc-lvl-floor); }
.rooms-config-section--service.is-focused    { border-left-color: var(--rc-lvl-service); }
.rooms-config-section--subservice.is-focused { border-left-color: var(--rc-lvl-subservice); }

/* A scrolled-to group clears the sticky breadcrumb. */
.rooms-config-section { scroll-margin-top: 1rem; }   /* small offset inside the scroll list (breadcrumb is outside it now) */

/* Sticky breadcrumb of the focused/in-view section. Full-bleed over the card's
   horizontal padding and flush to the top so nothing is visible above it when stuck. */
/* Fixed at the card's top (the card no longer scrolls — only the list below does), so the card's
   own border + rounded corners stay visible. */
.estab-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    flex-shrink: 0;
    padding: 0.875rem 2rem;                 /* 14px y, per design */
    background: #FFFFFF;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);   /* divider between breadcrumb and the list */
    border-radius: 0.75rem 0.75rem 0 0;      /* match the card's rounded top corners */
    font-family: 'Roboto', var(--kendo-font-family);
    font-size: 0.875rem;
    line-height: 1.4;
}
.estab-breadcrumb__seg {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font: inherit;
    color: var(--sn-text-muted);   /* #565D79, per design .crumb */
    font-weight: 500;              /* per design */
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0.1875rem 0.375rem;   /* 3px 6px, per design .crumb */
    border-radius: 0.25rem;
    transition: color 120ms ease, background 120ms ease;
}
/* Each segment is clickable → selects that section; light-blue hover background only (no
   font-colour change). */
.estab-breadcrumb__seg:hover:not(.is-current) {
    background: rgba(0, 68, 194, 0.06);
}
.estab-breadcrumb__seg.is-current { color: var(--abena-color-page-title); font-weight: 700; cursor: default; }   /* #0D1740 / bold, per design .crumb-current */
.estab-breadcrumb__sep { color: #E0E0E0; font-size: 0.9375rem; }   /* 15px, gray-400, per design .crumb-sep */

/* Per-type icon badge (mirrors the design's crumb-ico-*). */
.estab-breadcrumb__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;             /* 22px, per design .crumb-ico */
    height: 1.375rem;
    border-radius: 0.3125rem;    /* 5px, per design */
}
/* Target the glyph directly — a global .uil rule otherwise forces 16px. */
.estab-breadcrumb__ico > i {
    font-size: 0.8125rem;        /* 13px glyph, per design */
}
.estab-breadcrumb__ico--building { background: var(--lvl-building-soft); color: var(--lvl-building); }
.estab-breadcrumb__ico--floor    { background: var(--lvl-floor-soft);    color: var(--lvl-floor); }
.estab-breadcrumb__ico--unit     { background: var(--lvl-unit-soft);     color: var(--lvl-unit); }