/* Progression Plan — dashboard styles */

/* KPI cards row */
.progression-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 1200px) {
    .progression-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .progression-kpi-grid {
        grid-template-columns: 1fr;
    }
}

/* KPI card — pastel circular icon left of the name, flat card (resident-card look) */
.progression-kpi-card {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-height: 4.75rem;
    padding: 0.75rem 1rem;
    background: #ffffff;
    border: 1px solid #eef1f6;
    border-radius: 0.75rem;
}

.progression-kpi-card__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.progression-kpi-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
}

.progression-kpi-card--ratio .progression-kpi-card__icon { background: #e3ecfb; color: #0044c2; }
.progression-kpi-card--cij .progression-kpi-card__icon { background: #fff3d6; color: #b8860b; }
.progression-kpi-card--residents .progression-kpi-card__icon { background: #e0eefb; color: #214f87; }
.progression-kpi-card--progression .progression-kpi-card__icon { background: #e0f6e8; color: #2e9e5b; }

.progression-kpi-card__title {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #6b7688;
}

.progression-kpi-card__value {
    font-size: clamp(1.5rem, 1.8vw, 1.9rem);
    font-weight: 700;
    line-height: 1.1;
    color: #1f2a44;
}

.progression-kpi-card__subtitle {
    font-size: 0.85rem;
    line-height: 1.3;
    color: #8a94a6;
}

/* Global progression panel (progress bar + stepper) */
.progression-global-panel {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    background: #ffffff;
    border: 1px solid #eef1f6;
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.progression-global-panel__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #6b7688;
}

.progression-global-panel__bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.progression-global-panel__progressbar {
    flex: 1;
}

.progression-global-panel__bound {
    font-size: 0.8rem;
    color: #8a94a6;
}

.progression-global-panel__achievement {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0044c2;
}

.progression-global-panel__subindicators {
    font-size: 0.85rem;
    color: #5f6c7b;
}

.progression-global-panel__view {
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    background: #e8f0fe;
    border-radius: 0.5rem;
    color: #214f87;
    font-weight: 600;
}

/* Ratio & CIJ indicator panels */
.progression-indicator-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 980px) {
    .progression-indicator-panels {
        grid-template-columns: 1fr;
    }
}

.progression-indicator-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.progression-indicator-panel__header {
    display: flex;
    align-items: center;
    gap: 11px;
}

.progression-indicator-panel__title {
    /* Same font settings as .ppd-card-title */
    font-family: 'Rounded Mplus 1c Bold', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 22.72px;
    letter-spacing: 0.16px;
    text-transform: none;
    color: var(--ppd-dark);
}

.progression-indicator-panel__tolerance {
    display: flex;
    align-items: center;
    height: 35px;
    font-size: 14px;
    font-weight: 500;
    padding: 0 14px;
    border-radius: 9999px;
    background: #F2F4F6;
    color: #565D79;
}

.progression-indicator-panel__progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.progression-indicator-panel__bar {
    flex: 1;
}

.progression-indicator-panel__progress-value {
    font-weight: 700;
    color: #2e9e5b;
}

.progression-indicator-panel__values {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: #5f6c7b;
}

.progression-indicator-panel__badge {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.15rem 0.6rem;
    border-radius: 9999px;
}

.progression-indicator-panel__badge--reached { background: #e0f6e8; color: #2e9e5b; }
.progression-indicator-panel__badge--inprogress { background: #e8f0fe; color: #214f87; }

.progression-indicator-panel__target { margin-left: auto; }

.progression-indicator-panel__nodata {
    padding: 1.5rem;
    text-align: center;
    color: #aab3c0;
    font-size: 0.9rem;
}

/* Smaller x/y axis labels on the Ratio/CIJ indicator charts, to match the design */
.progression-indicator-panel__chart text {
    font-size: 11px !important;
}

/* Sub-indicators distribution panel (Family / Category / Day-Night) */
.progression-subindicators-panel {
    padding: 1rem 1.25rem;
    background: #ffffff;
    border: 1px solid #eef1f6;
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.progression-subindicators-panel__header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.progression-subindicators-panel__title {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #1f2a44;
}

.progression-subindicators-panel__tolerance {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 9999px;
    background: #eef1f6;
    color: #6b7688;
}

.progression-subindicators-panel__progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.progression-subindicators-panel__bar {
    flex: 1;
}

.progression-subindicators-panel__progress-value {
    font-weight: 700;
    color: #b8860b;
}

.progression-subindicators-panel__body {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

@media (max-width: 980px) {
    .progression-subindicators-panel__body {
        flex-direction: column;
    }
}

.progression-subindicators-grid {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

/* Cards size to ~4 per row and wrap to the next line beyond that. */
.progression-subindicator-card {
    flex: 1 1 11rem;
    max-width: calc(25% - 0.45rem);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.6rem 0.75rem;
    background: #faf9f6;
    border: 1px solid #eef1f6;
    border-radius: 0.5rem;
}

@media (max-width: 1200px) {
    .progression-subindicator-card {
        max-width: calc(50% - 0.3rem);
    }
}

.progression-subindicator-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.progression-subindicator-card__label {
    font-size: 0.9rem;
    color: #1f2a44;
}

.progression-subindicator-card__value {
    font-weight: 700;
    color: #1f2a44;
}

.progression-subindicator-card__real {
    font-size: 0.8rem;
    color: #8a94a6;
}

.progression-subindicator-card__badge {
    align-self: flex-start;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 9999px;
}

.progression-subindicator-card__badge--reached { background: #e0f6e8; color: #2e9e5b; }
.progression-subindicator-card__badge--inprogress { background: #e8f0fe; color: #214f87; }

.progression-subindicators-panel__donut {
    flex: 0 0 20rem;
}

.progression-subindicators-panel__nodata {
    flex: 0 0 20rem;
    padding: 1.5rem;
    text-align: center;
    color: #aab3c0;
    font-size: 0.9rem;
}

/* Free notes panel (notes + audit badges) */
.progression-notes-panel {
    padding: 1rem 1.25rem;
    background: #ffffff;
    border: 1px solid #eef1f6;
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.progression-notes-panel__title {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #6b7688;
}

.progression-notes-panel__text {
    padding: 0.85rem 1rem;
    background: #faf9f6;
    border-radius: 0.5rem;
    color: #1f2a44;
    line-height: 1.4;
    white-space: pre-wrap;
}

.progression-notes-panel__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.progression-notes-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: #5f6c7b;
    padding: 0.2rem 0.65rem;
    background: #f1f0ec;
    border-radius: 9999px;
}

.progression-notes-badge i {
    color: #8a94a6;
}

/* Notes panel layout — header row + per-note card */
.progression-notes-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.progression-notes-panel__note {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.75rem 1rem;
    border: 1px solid #eef1f6;
    border-radius: 0.5rem;
    background: #fafafa;
}

.progression-notes-panel__actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.2rem;
}

.progression-notes-panel__empty {
    padding: 1rem 0;
    color: #aab3c0;
    font-size: 0.9rem;
}

/* Note action buttons (edit / delete icon buttons) */
.progression-note-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid #dfe3e8;
    border-radius: 0.375rem;
    background: #ffffff;
    color: #5f6c7b;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    max-height: none; /* defeat global button max-height */
}

.progression-note-action-btn:hover {
    background: #f0f4ff;
    border-color: #0044c2;
    color: #0044c2;
}

.progression-note-action-btn--delete:hover {
    background: rgba(187, 72, 65, 0.08);
    border-color: #bb4841;
    color: #bb4841;
}

/* ── Indicator panel controls: window month pills + Factures button ── */
.progression-indicator-panel-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.progression-indicator-panel-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* Month-window pills */
.progression-window-pill {
    display: inline-flex;
    align-items: center;
    height: 1.75rem;
    padding: 0 0.75rem;
    border: 1px solid #c9ccd1;
    border-radius: 9999px;
    background: #ffffff;
    color: #565d79;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    max-height: none; /* defeat global button max-height */
}

.progression-window-pill:hover {
    border-color: #0044c2;
    color: #0044c2;
    background: rgba(0, 68, 194, 0.06);
}

.progression-window-pill--active,
.progression-window-pill:focus {
    border-color: #0044c2;
    background: rgba(0, 68, 194, 0.1);
    color: #0044c2;
    outline: none;
}

/* Factures action button */
.progression-factures-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 1.75rem;
    padding: 0 0.85rem;
    border: 1px solid #003892;
    border-radius: 9999px;
    background: rgba(0, 56, 146, 0.07);
    color: #003892;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    max-height: none; /* defeat global button max-height */
}

.progression-factures-btn:hover {
    background: rgba(0, 56, 146, 0.14);
    border-color: #002c75;
}

/* Factures modal inner layout */
.progression-factures-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.progression-factures-toolbar__actions {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.progression-factures-summary {
    font-size: 0.85rem;
    color: #6b7688;
    margin-bottom: 0.5rem;
}

.progression-factures-list {
    height: 280px;
    overflow-y: auto;
    border: 1px solid #eef1f6;
    border-radius: 0.5rem;
}

.progression-factures-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #f3f4f7;
    font-size: 0.9rem;
}

.progression-factures-row:last-child {
    border-bottom: none;
}

.progression-factures-row__number {
    flex: 1;
    font-weight: 600;
    color: #1f2a44;
}

.progression-factures-row__date {
    color: #6b7688;
    white-space: nowrap;
}

.progression-factures-row__amount {
    text-align: right;
    font-weight: 600;
    color: #1f2a44;
    white-space: nowrap;
    min-width: 5rem;
}

.progression-factures-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* Note modal inner layout (legacy — kept for any external references) */
.progression-note-modal-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.progression-note-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Note add/edit modal — reuses pfm-* structure; note-specific overrides */
.progression-note-window .k-dialog-titlebar,
.progression-note-window .k-window-titlebar {
    display: none !important;
}

.progression-note-window .k-dialog-content,
.progression-note-window .k-window-content {
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Compact modal height — no scrollable invoice list, just a textarea */
.pfm-modal--note {
    height: auto;
    min-height: 0;
}

/* Body for the note variant: no overflow scroll needed */
.pfm-body--note {
    overflow-y: visible;
}

.pfm-note-textarea {
    width: 100%;
    min-height: 140px;
    padding: 11px 13px;
    border: 1px solid #DFE3E8;
    border-radius: 8px;
    background: #fff;
    font-family: Gilroy, 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #0D1740;
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.12s, box-shadow 0.12s;
    box-sizing: border-box;
}

.pfm-note-textarea:focus {
    outline: none;
    border-color: #0044C2;
    box-shadow: rgba(0, 68, 194, 0.14) 0 0 0 3px;
}

.pfm-note-textarea::placeholder {
    color: #565D79;
}

/* ============================================================
   Progression Plan — creation wizard
   Built from the prototype's real stylesheets (plan-wizard.css +
   colors_and_type.css). Design tokens are scoped to the page wrapper
   so the pw-* rules resolve their var(--*) without touching global :root.
   ============================================================ */

.progression-plan-wizard-page {
    /* colors */
    --color-dark: #0D1740; --color-navy: #252E53;
    --color-primary-900: #002C75; --color-primary-800: #003892; --color-primary-700: #003D7D;
    --color-primary-600: #0044C2; --color-primary-500: #0535CE; --color-primary-400: #3a6fd8;
    --color-gray-50: #F8F9FB; --color-gray-100: #F2F4F6; --color-gray-200: #EFF1F4;
    --color-gray-300: #DFE3E8; --color-gray-350: #C9CCD1; --color-gray-400: #E0E0E0;
    --color-gray-500: #565D79; --color-gray-600: #4F4F4F; --color-gray-700: #3D3D3D; --color-gray-800: #525252;
    --color-white: #FFFFFF; --color-success: #37B400; --color-warning: #D49F00; --color-error: #BB4841;
    --fg-primary: var(--color-dark); --fg-secondary: var(--color-gray-500); --fg-tertiary: var(--color-gray-700);
    --fg-action: var(--color-primary-600);
    --bg-page: var(--color-gray-50); --bg-topbar: var(--color-white);
    --border-default: rgba(0, 61, 125, 0.173); --border-divider: var(--color-gray-300); --border-topbar: #F5F5F5;
    --shadow-card: 0px 2px 10px 0px #EDF1FB;
    --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px;
    --topbar-height: 78px;
    /* The prototype's --font-display token resolves to 'M PLUS Rounded 1c' (Google Fonts).
       The app bundles the same typeface as 'Rounded Mplus 1c Bold' (woff2, self-hosted).
       Body text stays Gilroy. */
    --font-display: 'Rounded Mplus 1c Bold', sans-serif;
    --font-body: 'Gilroy', sans-serif;
    --font-size-xs: 12px; --font-size-sm: 13px; --font-size-md: 14px; --font-size-lg: 16px; --font-size-xl: 21px;
    --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700;
    --line-height-tight: 1.0; --line-height-normal: 1.42; --line-height-relaxed: 1.5;

    font-family: var(--font-body);
    /* The prototype's body rule sets weight 500 (medium); without it, body text defaults to
       400 (a lighter weight) and reads as a different font. Mirror the prototype's `body`. */
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-md);
    color: var(--fg-primary);
    background: var(--bg-page);
    min-height: 100%;
    /* The prototype's `body` antialiases — without this the SAME Gilroy renders with the
       OS's default (heavier) smoothing and reads as a different font. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Prototype's global box-sizing reset (colors_and_type.css), scoped to the wizard so
   widths/paddings size like the prototype — e.g. .pw-card max-width:900px is the full
   card width, not the content box (otherwise padding makes it ~962px). */
.progression-plan-wizard-page,
.progression-plan-wizard-page *,
.progression-plan-wizard-page *::before,
.progression-plan-wizard-page *::after {
    box-sizing: border-box;
}

/* Neutralize the app's global `i { line-height: 1.5rem }` (Abena-main.css), which inflates
   icon line-boxes — e.g. the establishment-row meta rendered 24px instead of the prototype's
   ~18px, making each row 5px too tall. The prototype leaves icons at normal line-height. */
.progression-plan-wizard-page i {
    line-height: normal;
}

/* topbar — prototype .topbar / .topbar-title, with the right-side actions removed */
.pw-topbar {
    height: var(--topbar-height);
    background: var(--bg-topbar);
    border-bottom: 1px solid var(--border-topbar);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 32px;
}

/* Back button — same visual as .rooms-config-page__back */
.pw-topbar-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;
}

.pw-topbar-back:hover {
    background: var(--sn-rail);
}

.pw-topbar-back:focus-visible {
    outline: 0.125rem solid var(--abena-color-action-blue);
    outline-offset: 0.125rem;
}

.pw-topbar-back i {
    font-size: 0.875rem;
    line-height: normal;
}

.pw-topbar-title {
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xl);
    color: var(--color-primary-900);
    line-height: var(--line-height-tight);
    white-space: nowrap;
    margin: 0;
}

.pw-topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* page body wrapper — replaces the prototype .pw-scroll. Equal 24px gap top and bottom. */
.pw-page-body { padding: 24px 32px; }

/* The wizard frame (card), stepper and footer/nav buttons now live in Abena-wizard.css
   (.abs-wizard / .aw-*). The step CONTENT below renders inside that frame and inherits its
   design tokens. */

/* step heading */
.pw-h { font-family: var(--font-display); font-weight: var(--font-weight-bold); font-size: var(--font-size-xl); color: var(--color-dark); line-height: 1.15; }
.pw-sub { font-family: var(--font-body); font-size: var(--font-size-md); color: var(--color-gray-500); margin-top: 6px; line-height: 1.45; }
/* step-1 body wrapper: fills the card's remaining height so the list inside can scroll. */
.pw-body { margin-top: 18px; flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* search */
.pw-search {
    display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 15px;
    border: 1px solid var(--color-gray-300); border-radius: var(--radius-lg); background: #fff; margin-bottom: 14px;
    transition: border-color .12s, box-shadow .12s;
}
.pw-search:focus-within { border-color: var(--color-primary-600); box-shadow: rgba(0, 68, 194, 0.14) 0 0 0 3px; }
.pw-search i { font-size: 18px; color: var(--color-gray-500); }
.pw-search input {
    flex: 1 1 0%; border: none; outline: none; background: transparent;
    font-family: var(--font-body); font-size: var(--font-size-md); color: var(--color-dark);
}
.pw-search input::placeholder { color: var(--color-gray-500); }

/* establishment list — fills the card's remaining height and scrolls internally when the
   results exceed it; shorter than that when there are fewer results. Block (not flex+gap)
   so the Blazor Virtualize spacers lay out correctly; row spacing via .pw-estab margin. */
.pw-estab-list { flex: 1; min-height: 0; overflow-y: auto; }
.pw-estab {
    display: flex; align-items: center; gap: 13px; padding: 13px 16px;
    border: 1px solid var(--color-gray-300); border-radius: var(--radius-lg); cursor: pointer; background: #fff;
    transition: border-color .14s, background .14s, box-shadow .14s;
    /* row spacing (replaces the list's flex gap, which Virtualize can't use); part of ItemSize=78 */
    margin-bottom: 9px;
}
.pw-estab:hover { border-color: var(--color-gray-400); }
.pw-estab.selected { border-color: var(--color-primary-600); background: rgba(0, 68, 194, 0.04); box-shadow: 0 0 0 1px var(--color-primary-600) inset; }
.pw-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--color-gray-350); flex-shrink: 0; position: relative; transition: border-color .14s; }
.pw-estab.selected .pw-radio { border-color: var(--color-primary-600); }
.pw-estab.selected .pw-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--color-primary-600); }
.pw-estab-main { flex: 1 1 0%; min-width: 0; }
.pw-estab-name { font-family: var(--font-body); font-weight: var(--font-weight-bold); font-size: var(--font-size-md); color: var(--color-dark); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pw-estab-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; margin-top: 5px; }
.pw-estab-stat { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-body); font-size: var(--font-size-sm); color: var(--color-gray-700); }
.pw-estab-stat b { font-weight: var(--font-weight-bold); color: var(--color-dark); }
.pw-estab-stat i { font-size: 15px; color: var(--color-primary-600); }
.pw-pill-active { display: inline-flex; align-items: center; font-family: var(--font-body); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: rgb(46, 139, 0); background: rgba(55, 180, 0, 0.13); padding: 2px 8px; border-radius: var(--radius-full); }
.pw-empty { padding: 28px; text-align: center; color: var(--color-gray-500); }
.pw-loading { display: flex; align-items: center; justify-content: center; padding: 48px; min-height: 120px; }

/* info note */
.pw-note {
    display: flex; align-items: flex-start; gap: 10px; margin-top: 16px;
    background: var(--color-gray-100); border-radius: var(--radius-lg); padding: 12px 15px;
    font-family: var(--font-body); font-size: var(--font-size-md); line-height: 1.45; color: var(--color-gray-700);
}
.pw-note > i { font-size: 17px; color: var(--color-primary-600); flex-shrink: 0; margin-top: 1px; }
/* When the note is the first element inside .pw-body (step 3), the body's own 18px margin-top
   already provides the gap from .pw-sub. The note's extra 16px would make it 34px total.
   Zero it so the gap is exactly 18px — matching the prototype. */
.pw-body > .pw-note:first-child { margin-top: 0; }

/* step 2 recap (chosen establishment + Modifier) — prototype .pw-recap */
.pw-recap { display: flex; align-items: center; gap: 13px; padding: 13px 16px; margin-bottom: 22px; border: 1px solid var(--color-gray-300); border-radius: var(--radius-lg); background: #fff; }
.pw-recap-main { flex: 1 1 0%; min-width: 0; }
.pw-recap-name { font-family: var(--font-body); font-weight: var(--font-weight-bold); font-size: var(--font-size-md); color: var(--color-dark); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pw-recap-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; margin-top: 5px; }
.pw-recap-edit { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; flex-shrink: 0; background: none; border: none; cursor: pointer; font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-primary-600); }
.pw-recap-edit i { font-size: 15px; }
.pw-recap-edit:hover { color: var(--color-primary-500); }
.pw-placeholder { padding: 44px 16px; text-align: center; color: var(--color-gray-500); font-family: var(--font-body); font-size: var(--font-size-md); }

/* step 2 settings form — ported verbatim from the prototype's plan-wizard.css */
.pw-form { max-width: 100%; }
/* The prototype card is block-flow, so the last field's 18px margin-bottom collapses with the
   footer's 24px margin-top (net 24px gap). Our card is a flexbox (for the step-1 list), where
   margins don't collapse — zero the last field's margin so the button-to-footer gap matches. */
.pw-form > .pw-field:last-child { margin-bottom: 0; }
.pw-recap-label { font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-gray-500); margin-bottom: 8px; }
.pw-field { margin-bottom: 18px; }
.pw-field-sm { max-width: 220px; }
.pw-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pw-label { display: block; font-family: var(--font-body); font-size: var(--font-size-md); font-weight: var(--font-weight-medium); color: var(--color-gray-700); margin-bottom: 7px; }
.pw-sublabel { font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-gray-500); margin-bottom: 7px; }
.pw-req { color: var(--color-error); margin-left: 2px; }
.pw-opt { color: var(--color-gray-500); font-weight: var(--font-weight-regular); font-style: italic; }
.pw-input, .pw-select, .pw-textarea { width: 100%; height: 42px; border: 1px solid var(--color-gray-300); border-radius: var(--radius-md); padding: 0 13px; font-family: var(--font-body); font-size: var(--font-size-md); color: var(--color-dark); background: #fff; transition: border-color .12s, box-shadow .12s; }
.pw-textarea { height: auto; min-height: 84px; padding: 11px 13px; line-height: 1.5; resize: vertical; }
.pw-input:focus, .pw-select:focus, .pw-textarea:focus { outline: none; border-color: var(--color-primary-600); box-shadow: rgba(0, 68, 194, 0.14) 0 0 0 3px; }
.pw-input::placeholder, .pw-textarea::placeholder { color: var(--color-gray-500); }
.pw-input-err { border-color: var(--color-error) !important; box-shadow: rgba(187, 72, 65, 0.12) 0 0 0 3px !important; }
.pw-select { appearance: none; background-image: none; cursor: pointer; }
.pw-select-wrap { position: relative; }
.pw-select-wrap > i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--color-gray-500); font-size: 17px; }
.pw-duration { display: grid; grid-template-columns: 88px 1fr; gap: 9px; }
.pw-period { background: var(--color-gray-100); border-radius: var(--radius-lg); padding: 16px; }
.pw-period-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--color-gray-300); flex-wrap: wrap; }
.pw-end { font-family: var(--font-body); font-size: var(--font-size-sm); color: var(--color-gray-700); }
.pw-end b { color: var(--color-dark); font-weight: var(--font-weight-bold); }
.pw-end:empty { display: none; }
.pw-dur-rule { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-body); font-size: var(--font-size-sm); color: var(--color-gray-500); }
.pw-dur-rule i { font-size: 14px; }
.pw-dur-rule.is-bad { color: var(--color-error); font-weight: var(--font-weight-medium); }
.pw-hint { font-family: var(--font-body); font-size: var(--font-size-sm); color: var(--color-gray-500); margin-top: 7px; }
.pw-hint b { color: var(--color-dark); font-weight: var(--font-weight-bold); }
.pw-hint i { font-size: 14px; margin-right: 4px; vertical-align: -1px; color: var(--color-gray-500); }
.pw-collapse-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px dashed var(--color-gray-350); cursor: pointer; font-family: var(--font-body); font-size: var(--font-size-md); font-weight: var(--font-weight-bold); color: var(--color-primary-600); padding: 10px 14px; border-radius: var(--radius-md); transition: border-color .12s, background .12s; }
.pw-collapse-btn:hover { color: var(--color-primary-500); border-color: var(--color-primary-400); background: var(--color-gray-100); }
.pw-collapse-btn i { font-size: 16px; }

/* Full-bleed page — same pattern as /room and /resident: negate the shared .abs-page
   white frame for this page only, paint the subtle surface, and flex-fill the content
   region so the gray canvas reaches the bottom (white topbar full-width, gray body below).
   The flex chain (drawer content div -> .abs-page -> page) fills the height instead of a
   calc(100vh - …) magic number, mirroring Abena-resident.css / Abena-room.css. */
.abs-left-bar > .k-drawer-container > .k-drawer-content > div:has(.progression-plan-wizard-page) {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.abs-page:has(.progression-plan-wizard-page) {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    margin: 0;
    background-color: var(--sn-surface-subtle);
}

.progression-plan-wizard-page {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* the gray body fills the height below the topbar; the card inside is capped and scrolls
   its own list, so the body itself doesn't scroll. */
.progression-plan-wizard-page .pw-page-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Form steps (everything past the step-1 establishment list) size the card to their content
   so the wizard expands instead of scrolling inside a fixed-height card; the page area scrolls
   only if the grown card exceeds the viewport. The card's own max-height is released by the
   frame's .abs-wizard--grow modifier (Abena-wizard.css); here we only let the page body scroll. */
.progression-plan-wizard-page .pw-page-body--grow {
    overflow-y: auto;
}

/* step-2 period grid collapses to one column on narrow viewports (prototype behaviour) */
@media (max-width: 640px) {
    .pw-grid-2 { grid-template-columns: 1fr; }
}

/* ============================================================
   Step 3 — Indicator selection
   CSS extracted verbatim from the prototype's plan-wizard.css
   (/pw-ind*, /pw-check, /pw-sub-table, /pw-cible, /pw-tol-*,
   /pw-total, /pw-rep-foot, /pw-ind-counter, /pw-ind-toolbar).
   All var(--*) tokens already resolve from .progression-plan-wizard-page.
   ============================================================ */

/* list of indicator cards */
.pw-ind-list { display: flex; flex-direction: column; gap: 12px; }

/* card shell */
.pw-ind {
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #fff;
    transition: border-color .14s, box-shadow .14s;
}
.pw-ind.selected { border-color: var(--color-primary-600); }

/* card header row */
.pw-ind-head { display: flex; align-items: center; gap: 13px; padding: 13px 16px; }

/* custom checkbox */
.pw-check {
    width: 22px; height: 22px;
    border-radius: var(--radius-xs);
    border: 2px solid var(--color-gray-350);
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: background .14s, border-color .14s;
}
.pw-check i { font-size: 15px; opacity: 0; }
.pw-ind.selected .pw-check { background: var(--color-primary-600); border-color: var(--color-primary-600); }
.pw-ind.selected .pw-check i { opacity: 1; }

/* title block */
.pw-ind-titles { flex: 1 1 0%; min-width: 0; cursor: pointer; }
.pw-ind-name { font-family: var(--font-body); font-weight: var(--font-weight-bold); font-size: var(--font-size-md); color: var(--color-dark); }
.pw-ind-desc { font-family: var(--font-body); font-size: var(--font-size-sm); color: var(--color-gray-500); margin-top: 2px; }

/* collapsed-state summary (tolerance badge + total badge) */
.pw-ind-sum { display: none; align-items: center; gap: 10px; margin-left: auto; }
.pw-ind.selected:not(.open) .pw-ind-sum { display: flex; }

/* chevron toggle button */
.pw-ind-chevron {
    display: none;
    width: 30px; height: 30px;
    border: none; background: transparent;
    cursor: pointer;
    color: var(--color-gray-500);
    border-radius: var(--radius-sm);
    align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background .12s;
}
.pw-ind.selected .pw-ind-chevron { display: flex; }
.pw-ind-chevron:hover { background: var(--color-gray-200); }
.pw-ind-chevron i { font-size: 18px; transition: transform .18s; }
.pw-ind.open .pw-ind-chevron i { transform: rotate(180deg); }

/* expanded content panel */
.pw-ind-panel {
    background: var(--color-gray-100);
    border-top: 1px solid var(--color-gray-300);
    padding: 12px 16px 14px;
}

/* toolbar row (counter) */
.pw-ind-toolbar { display: flex; align-items: center; margin-bottom: 12px; }
.pw-ind-counter { font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-primary-600); }
.pw-ind-counter.is-zero { color: var(--color-gray-500); }

/* sub-indicator table (3-col grid: label | initial | target) */
.pw-sub-table { display: grid; grid-template-columns: 1fr 150px 124px; align-items: center; }
.pw-sub-th { font-family: var(--font-body); font-size: var(--font-size-sm); color: var(--color-gray-500); padding: 6px 0; border-bottom: 1px solid var(--color-gray-300); }
.pw-sub-th.r, .pw-sub-cell.r { justify-self: end; }
.pw-sub-cell { font-family: var(--font-body); font-size: var(--font-size-md); color: var(--color-navy); padding: 10px 0; border-bottom: 1px solid var(--color-gray-200); }
.pw-sub-cell.name { color: var(--color-dark); font-weight: var(--font-weight-medium); }

/* target value input (the small input in the rightmost column) */
.pw-cible {
    width: 104px; height: 38px;
    text-align: right; padding: 0 11px;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    background: #fff;
    font-family: var(--font-body); font-size: var(--font-size-md); color: var(--color-dark);
}
.pw-cible:focus { outline: none; border-color: var(--color-primary-600); box-shadow: rgba(0,68,194,.14) 0 0 0 3px; }

/* tolerance footer — value indicators (single tolerance row, right-aligned) */
.pw-tol-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-gray-300); }
.pw-tol-foot-label { font-family: var(--font-body); font-size: var(--font-size-md); color: var(--color-gray-700); }
.pw-tol-pct { font-family: var(--font-body); font-size: var(--font-size-md); color: var(--color-gray-500); }

/* tolerance footer — distribution indicators (tolerance left, total right) */
.pw-rep-foot { display: flex; align-items: center; justify-content: flex-end; gap: 28px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-gray-300); }
.pw-tol-inline { display: flex; align-items: center; gap: 8px; }

/* small tolerance integer input */
.pw-tol-input {
    width: 64px; height: 36px;
    text-align: right; padding: 0 10px;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    background: #fff;
    font-family: var(--font-body); font-size: var(--font-size-md); color: var(--color-dark);
}
.pw-tol-input:focus { outline: none; border-color: var(--color-primary-600); box-shadow: rgba(0,68,194,.14) 0 0 0 3px; }

/* distribution total row */
.pw-total { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-family: var(--font-body); font-size: var(--font-size-md); color: var(--color-gray-700); }
.pw-total b { font-weight: var(--font-weight-bold); }
.pw-total.ok b { color: var(--color-success); }
.pw-total.bad b { color: var(--color-error); }

/* collapsed summary badges (tolerance / total) */
.pw-sum-tol { font-family: var(--font-body); font-size: var(--font-size-sm); color: var(--color-gray-600); background: var(--color-gray-100); padding: 2px 9px; border-radius: var(--radius-full); }
.pw-sum-tol.is-bad { background: rgba(187,72,65,.1); color: var(--color-error); }

/* Defeat the app's global `button { max-height: 3rem }` which would cap .pw-ind-chevron */
.progression-plan-wizard-page .pw-ind-chevron { max-height: none; }

@media (max-width: 760px) {
    .pw-sub-table { grid-template-columns: 1fr 86px 92px; }
    .pw-cible { width: 82px; }
}

/* ============================================================
   Step 4 — Milestone definition (jalons)
   CSS extracted verbatim from the prototype's plan-wizard.css.
   All var(--*) tokens resolve from .progression-plan-wizard-page.
   ============================================================ */

.pw-jalon-list { display: flex; flex-direction: column; gap: 12px; }

.pw-jalon { background: var(--color-gray-100); border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); padding: 15px 16px 26px; }

.pw-jalon-top { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }

.pw-jalon-num { width: 28px; height: 28px; border-radius: 50%; background: var(--color-primary-600); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); flex-shrink: 0; }

.pw-jalon-title { font-family: var(--font-body); font-weight: var(--font-weight-bold); font-size: var(--font-size-md); color: var(--color-dark); }

.pw-jalon-remove { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--color-gray-300); background: #fff; cursor: pointer; color: var(--color-gray-600); border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); transition: background .12s, color .12s, border-color .12s; }
.pw-jalon-remove:hover { background: rgba(187,72,65,.08); color: var(--color-error); border-color: var(--color-error); }
.pw-jalon-remove i { font-size: 15px; }

/* Defeat global button max-height on the remove button */
.progression-plan-wizard-page .pw-jalon-remove { max-height: none; }

.pw-jalon-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }

.pw-jalon-off { flex: 0 0 auto; }

/* Two-column grid: number input (64px) + unit select (108px) */
.pw-offset { display: grid; gap: 8px; }
.pw-jalon-off .pw-offset { grid-template-columns: 64px 108px; }

.pw-jalon-eq { display: flex; align-items: center; height: 42px; color: var(--color-gray-400); }
.pw-jalon-eq i { font-size: 20px; }

.pw-jalon-dateblock { flex: 0 0 auto; }

.pw-jalon-datebox { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 13px; background: rgba(0,68,194,.07); border-radius: var(--radius-md); font-family: var(--font-body); font-weight: var(--font-weight-bold); font-size: var(--font-size-md); color: var(--color-primary-600); }
.pw-jalon-datebox i { font-size: 16px; }
.pw-jalon-datebox--err { background: rgba(187,72,65,.08); color: var(--color-error); }

.pw-jalon-lblblock { flex: 1 1 150px; min-width: 140px; max-width: 340px; }
.pw-jalon-lblblock .pw-input { width: 100%; }

/* "Ajouter un jalon (N restant)" button — full-width dashed block */
.pw-add-jalon-block { width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 16px; margin-top: 6px; border: 1.5px dashed var(--color-primary-600); border-radius: var(--radius-lg); background: rgba(0,68,194,.05); color: var(--color-primary-600); font-family: var(--font-body); font-weight: var(--font-weight-bold); font-size: var(--font-size-md); cursor: pointer; transition: background .14s, border-color .14s; }
.pw-add-jalon-block:hover { background: rgba(0,68,194,.1); }
.pw-add-jalon-block:disabled { border-color: var(--color-gray-300); background: var(--color-gray-100); color: var(--color-gray-400); cursor: not-allowed; }
.pw-add-jalon-block i { font-size: 20px; }
/* Defeat global button max-height */
.progression-plan-wizard-page .pw-add-jalon-block { max-height: none; }

/* ============================================================
   Step 5 — Validation recap
   CSS extracted verbatim from the prototype's plan-wizard.css.
   All var(--*) tokens resolve from .progression-plan-wizard-page.
   ============================================================ */

/* 3-column summary grid: establishment | plan | milestones; wide row for indicators */
.pw-sum-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 0.68fr;
    gap: 14px;
}

.pw-sum-wide {
    grid-column: 1 / -1;
}

/* Individual summary card */
.pw-sum-card {
    background: var(--color-white);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
}

/* Card section header: small icon square + uppercase label */
.pw-sum-head {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-gray-500);
    margin-bottom: 14px;
}

/* Rounded icon square in the section header */
.pw-sum-ico {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    flex-shrink: 0;
    background: rgba(0, 68, 194, 0.08);
    color: var(--color-primary-600);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pw-sum-ico i { font-size: 16px; }

/* Key-value row inside a summary card */
.pw-sum-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
}
.pw-sum-row + .pw-sum-row { border-top: 1px solid var(--color-gray-200); }

.pw-sum-k {
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    color: var(--color-gray-700);
}

.pw-sum-v {
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-dark);
    text-align: right;
}

/* Empty state text inside a summary card */
.pw-sum-empty {
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    color: var(--color-gray-500);
}

/* "Autres informations" card: Description + Additional data side by side */
.pw-sum-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.pw-sum-subhead {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-dark);
    margin-bottom: 4px;
}

.pw-sum-text {
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    color: var(--color-gray-700);
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Milestone rows inside the Jalons card */
.pw-jalon-sum { padding: 7px 0; }
.pw-jalon-sum + .pw-jalon-sum { border-top: 1px solid var(--color-gray-200); }
.pw-jalon-sum-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.pw-jalon-sum-name {
    font-family: var(--font-body);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
    color: var(--color-dark);
    white-space: nowrap;
}
.pw-jalon-sum-date {
    font-family: var(--font-body);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
    color: var(--color-dark);
}

/* Inline value flow: "5,40 → 4,50" or "Total 100%" in the accordion header summary */
.pw-sum-flow {
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    color: var(--color-gray-700);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.pw-sum-flow b { color: var(--color-dark); font-weight: var(--font-weight-bold); }
.pw-sum-flow i { font-size: 14px; color: var(--color-gray-350); }

/* Tolerance badge in the accordion header summary */
.pw-sum-tol {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    background: var(--color-gray-100);
    padding: 2px 9px;
    border-radius: var(--radius-full);
}

/* Indicators accordion list (inside pw-sum-wide) */
.pw-val-list { display: flex; flex-direction: column; }

/* Each indicator row — no card shell, just a divider between rows */
.pw-val-ind {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}
.pw-val-ind + .pw-val-ind { border-top: 1px solid var(--color-gray-200); }

/* Accordion header row: name+desc | summary | chevron */
.pw-val-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 2px;
    cursor: pointer;
}
.pw-val-head .pw-ind-titles { flex: 1 1 0%; }
.pw-val-head .pw-ind-sum {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

/* Chevron toggle button */
.pw-val-chevron {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--color-gray-500);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pw-val-chevron:hover { background: var(--color-gray-100); }
.pw-val-chevron i { font-size: 18px; transition: transform 0.18s; }
.pw-val-ind.open .pw-val-chevron i { transform: rotate(180deg); }
/* Defeat global button max-height */
.progression-plan-wizard-page .pw-val-chevron { max-height: none; }

/* Expanded detail panel */
.pw-val-panel { padding: 2px 2px 14px; }

/* Tolerance footer inside expanded panel */
.pw-val-tol {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-gray-200);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}
.pw-val-tol b { color: var(--color-dark); font-weight: var(--font-weight-bold); }

/* "Total 100%" appended after the tolerance in distribution indicators */
.pw-val-total { margin-left: 18px; }
.pw-val-total b { color: var(--color-success); }

/* Success banner: shown when the plan is valid (start date OK). Matches prototype .pw-note.is-ok */
.pw-val-success {
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    min-height: 50px;
    margin-top: 16px;
    margin-bottom: 16px;
    padding: 12px 15px;
    background: rgba(55, 180, 0, 0.12);
    border: none;
    border-radius: var(--radius-lg);
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    color: #2E7A06;
}
.pw-val-success > i { font-size: 17px; color: var(--color-success); flex-shrink: 0; }

.pw-val-error {
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    min-height: 50px;
    margin-top: 16px;
    margin-bottom: 16px;
    padding: 12px 15px;
    background: rgba(220, 38, 38, 0.10);
    border: none;
    border-radius: var(--radius-lg);
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    color: #B91C1C;
}
.pw-val-error > i { font-size: 17px; color: #DC2626; flex-shrink: 0; }

/* Warning banner for past start dates */
.pw-val-warning {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px 15px;
    background: rgba(212, 159, 0, 0.1);
    border: 1px solid rgba(212, 159, 0, 0.35);
    border-radius: var(--radius-lg);
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    color: var(--color-gray-700);
}
.pw-val-warning > i { font-size: 17px; color: var(--color-warning); flex-shrink: 0; }
.pw-val-warning-link {
    margin-left: auto;
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-600);
    padding: 0;
}
.pw-val-warning-link:hover { color: var(--color-primary-500); text-decoration: underline; }
/* Defeat global button max-height */
.progression-plan-wizard-page .pw-val-warning-link { max-height: none; }

@media (max-width: 760px) {
    .pw-sum-grid { grid-template-columns: 1fr; }
    .pw-sum-cols { grid-template-columns: 1fr; }
}

/* Frise (timeline preview) — TelerikStepper replacing the previous custom dot-track */
.pw-frise { background: #fff; border: 1px solid var(--border-default); box-shadow: var(--shadow-card); border-radius: var(--radius-lg); padding: 22px 30px 30px; margin-top: 22px; }

.pw-frise-label { font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--color-primary-900); margin-bottom: 18px; display: flex; align-items: center; gap: 7px; }
.pw-frise-label i { font-size: 16px; color: var(--color-primary-600); }

/* ── Frise dot-track — equal-spaced dots matching the prototype's timeline ──
   start (gray) + milestones (blue) + end (outlined white), distributed evenly
   (positions set inline as left:%); month caption (MMM) centred below each dot. */
.pw-frise-track { position: relative; height: 18px; margin-bottom: 30px; }
.pw-frise-line { position: absolute; left: 0; right: 0; top: 50%; height: 4px; transform: translateY(-50%); background: var(--color-gray-300); border-radius: 2px; }
.pw-frise-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 17px; height: 17px; border-radius: 50%; background: var(--color-primary-600); border: 3px solid #fff; box-shadow: rgba(0, 68, 194, .25) 0 0 0 1px; }
.pw-frise-dot.start { background: var(--color-gray-500); box-shadow: 0 0 0 1px var(--color-gray-400); }
.pw-frise-dot.end { background: #fff; box-shadow: 0 0 0 1.5px var(--color-gray-350); }
.pw-frise-cap { position: absolute; top: 26px; transform: translateX(-50%); font-family: var(--font-body); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-gray-500); white-space: nowrap; }
.pw-frise-cap.blue { color: var(--color-primary-600); font-weight: var(--font-weight-bold); }

/* ============================================================
   Step 6 — Confirmation ("Plan créé avec succès !")
   CSS extracted verbatim from the prototype's plan-wizard.css (.pw-success* rules).
   Buttons reuse the existing .aw-btn / .aw-btn-ghost / .aw-btn-primary from Abena-wizard.css.
   ============================================================ */

/* outer wrapper: center-aligned block, padded top/bottom */
.pw-success {
    text-align: center;
    padding: 24px 20px 30px;
}

/* light-green disc housing the check icon — 84×84px circle */
.pw-success-ico {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: rgba(55, 180, 0, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    /* 8px top gap inside the wrapper, 22px gap to the title below */
    margin: 8px auto 22px;
}

/* green check-circle icon at 42px */
.pw-success-ico i {
    font-size: 42px;
    color: var(--color-success);
    line-height: normal;
}

/* bold display-font heading ("Plan créé avec succès !") — 21px, --font-display */
.pw-success-title {
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xl);
    color: var(--color-dark);
}

/* sentence below the heading — 16px body, line-height 1.5; bold plan name + establishment inside <b> */
.pw-success-sub {
    font-family: var(--font-body);
    font-size: var(--font-size-lg);
    color: var(--color-gray-700);
    margin-top: 11px;
    line-height: 1.5;
}

/* the <b> spans that wrap the plan name and establishment name */
.pw-success-sub b {
    color: var(--color-dark);
    font-weight: var(--font-weight-bold);
}

/* centered row of two action buttons with 10px gap */
.pw-success-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 26px;
}

/* Defeat the app's global button max-height cap on the action buttons inside .pw-success-actions */
.progression-plan-wizard-page .pw-success-actions .aw-btn,
.abs-wizard .pw-success-actions .aw-btn {
    max-height: none;
}

/* ── Dashboard page — full-bleed scrollable layout ──────────────────────────
   Same flex-fill chain as the wizard (.progression-plan-wizard-page, lines 809-831).
   The k-drawer-content has overflow:hidden — we have to make .ppd-page itself the
   scroll region so the full-height page can be reached. ── */

.abs-left-bar > .k-drawer-container > .k-drawer-content > div:has(.ppd-page) {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.abs-page:has(.ppd-page) {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    margin: 0;
    background-color: #F8F9FB;
}

.ppd-page {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* ============================================================
   PROGRESSION PLAN DASHBOARD  (.ppd-*)
   Two-column layout matching the prototype design tokens.
   ============================================================ */

/* ── Design tokens ─────────────────────────────────────────── */
.ppd-page {
    --ppd-blue:         #0044C2;
    --ppd-blue-900:     #002C75;
    --ppd-blue-light:   rgba(0, 68, 194, 0.09);
    --ppd-teal:         #0E8A6E;
    --ppd-teal-light:   rgba(14, 138, 110, 0.11);
    --ppd-amber:        #C58A00;
    --ppd-amber-light:  rgba(197, 138, 0, 0.12);
    --ppd-purple:       #8F49D4;
    --ppd-purple-light: rgba(143, 73, 212, 0.11);
    --ppd-indigo:       #4F5BD5;
    --ppd-indigo-light: rgba(79, 91, 213, 0.11);
    --ppd-dark:         #0D1740;
    --ppd-navy:         #252E53;
    --ppd-gray-50:      #F8F9FB;
    --ppd-gray-100:     #F2F4F6;
    --ppd-gray-200:     #EFF1F4;
    --ppd-gray-300:     #DFE3E8;
    --ppd-gray-500:     #565D79;
    --ppd-success:      #37B400;
    --ppd-border:       rgba(0, 61, 125, 0.173);
    --ppd-border-div:   #DFE3E8;
    --ppd-shadow:       0px 2px 10px 0px #EDF1FB;
    --ppd-radius-lg:    12px;
    --ppd-radius-md:    8px;
    --ppd-radius-sm:    6px;

    box-sizing: border-box;
    font-family: Gilroy, 'Segoe UI', sans-serif;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    padding: 0 !important;
    background: var(--ppd-gray-50);
}

.ppd-page *, .ppd-page *::before, .ppd-page *::after {
    box-sizing: border-box;
}

/* Undo app global i line-height that inflates icon line-boxes */
.ppd-page i { line-height: normal; }

/* Undo app global button max-height cap */
.ppd-page button { max-height: none; }

/* ── Page header ───────────────────────────────────────────── */
.ppd-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 32px 8px;
}

.ppd-header__left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Keep the top bar pinned while the dashboard content scrolls under it */
.ppd-page > .abena-v3-top-bar-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
    /* allow the step-jump dropdown menu to overflow below the bar */
    overflow: visible;
}

/* Selected-step crumb in the top bar — hidden until the in-page view-tabs scroll under the bar
   (JS toggles .is-visible). Mirrors the prototype's #topbar-msjump. */
.ppd-page .abena-v3-top-bar-header .ppd-topbar-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
}

.ppd-page .abena-v3-top-bar-header .ppd-topbar-crumb.is-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.ppd-topbar-crumb-label {
    /* Exact same font as the top-bar title (.abena-v3-page-title) — family, weight and 21px size.
       --font-display is not in scope here, so use the title's literal family + weight. */
    font-family: "Rounded Mplus 1c Bold", var(--kendo-font-family);
    font-size: 21px;
    font-weight: var(--kendo-font-weight-bold);
    line-height: 21px;
    color: var(--abena-color-title-deep);
    white-space: nowrap;
}

/* Step-jump dropdown in the top bar (prototype .tb-ms) */
.ppd-crumb-dd { position: relative; display: flex; align-items: center; }

.ppd-crumb-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 6px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}
.ppd-crumb-btn:hover { background: rgba(0, 68, 194, 0.06); }

.ppd-crumb-caret { font-size: 18px; color: #E0E0E0; line-height: normal; }

.ppd-crumb-backdrop { position: fixed; inset: 0; z-index: 1000; background: transparent; }

.ppd-crumb-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1001;
    min-width: 184px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #fff;
    border: 1px solid rgba(0, 61, 125, 0.173);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(13, 23, 64, 0.14);
}

.ppd-crumb-opt {
    text-align: left;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #0D1740;
    font-family: Gilroy, 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}
.ppd-crumb-opt:hover:not(:disabled) { background: rgba(0, 68, 194, 0.08); }
.ppd-crumb-opt.active { background: #0044C2; color: #fff; }
.ppd-crumb-opt:disabled { opacity: 0.4; cursor: default; }

/* Back link row beneath the top bar.
   Prototype: content-area has padding-top:22px, so the back link sits 22px below the topbar.
   Prototype: content-area has padding-left/right:32px — match that here and in .ppd-body
   so the rail/card left edges align with the prototype (fixes the tab-flip jump). */
.ppd-back-row {
    padding: 22px 32px 16px;
}

.ppd-back-link {
    display: inline-flex;
    align-items: center;
    /* Prototype: gap:6px between arrow icon and text */
    gap: 6px;
    /* Prototype: font-size:14px, weight:500, Gilroy, color:rgb(86,93,121) */
    font-size: 14px;
    font-weight: 500;
    color: var(--ppd-gray-500);
    text-decoration: none;
    line-height: normal;
}

/* Prototype: arrow icon is 17px */
.ppd-back-link i {
    font-size: 17px;
    line-height: normal;
}

.ppd-back-link:hover { color: var(--ppd-blue); }

.ppd-title {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    color: var(--ppd-blue-900);
    line-height: 1;
}

.ppd-header__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Two-column body ───────────────────────────────────────── */
.ppd-body {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    /* Prototype: content-area padding-left/right 32px. Match to eliminate the 4px
       horizontal jump when flipping between the app and prototype tabs. */
    padding: 0 32px 32px;
}

/* ── LEFT RAIL ─────────────────────────────────────────────── */
.ppd-rail {
    flex-shrink: 0;
    width: 300px;
    position: sticky;
    /* Stick below the 78px sticky top bar with extra clearance so it never touches the bar when scrolled. */
    top: 98px;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: calc(100vh - 98px);
    overflow-y: auto;
}

/* Plan ID card */
.ppd-rail-id-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--ppd-border);
    box-shadow: var(--ppd-shadow);
    border-radius: var(--ppd-radius-lg);
    padding: 16px 18px;
    margin-bottom: 20px;
    flex-shrink: 0;
    /* height grows to fit wrapped text */
    height: auto;
}

.ppd-rail-id-ico {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ppd-blue);
    color: #fff;
    font-size: 26px;
}

/* Explicit glyph size defeats any inherited/global font-size on <i> */
.ppd-rail-id-ico i { line-height: normal; font-size: 26px; }

.ppd-rail-id-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ppd-rail-id-name {
    font-weight: 700;
    font-size: 18px;
    color: var(--ppd-blue-900);
    line-height: 1.2;
    white-space: normal;
    overflow: visible;
    overflow-wrap: break-word;
    word-break: break-word;
}

.ppd-rail-id-sub {
    font-size: 14px;
    color: var(--ppd-gray-500);
    margin-bottom: 9px;
    white-space: normal;
    overflow: visible;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Status pills */
.ppd-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 25px;
    padding: 0 12px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    width: fit-content;
}

.ppd-status-pill--active   { background: rgba(0,68,194,0.10); color: var(--ppd-blue); }
.ppd-status-pill--draft    { background: rgba(197,138,0,0.12); color: var(--ppd-amber); }
.ppd-status-pill--closed   { background: var(--ppd-gray-100); color: var(--ppd-gray-500); }

.ppd-pill-led {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ppd-gray-300);
    flex-shrink: 0;
}

.ppd-pill-led--active { background: var(--ppd-blue); }

/* Rail card (white card containing sections) */
.ppd-rail-card {
    background: #fff;
    border: 1px solid var(--ppd-border);
    box-shadow: var(--ppd-shadow);
    border-radius: var(--ppd-radius-lg);
    padding: 20px 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
}

.ppd-rail-section {
    padding: 0;
}

.ppd-rail-divider {
    height: 1px;
    background: var(--ppd-border-div);
    margin: 18px 0;
}

.ppd-rail-sec-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 16px;
    color: var(--ppd-dark);
    margin-bottom: 15px;
}

/* Colored icon squares */
.ppd-rail-ico {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

/* Explicit glyph size so app-global i rules don't override it */
.ppd-rail-ico i { font-size: 16px; }

.ppd-ico-blue   { background: var(--ppd-blue-light); color: var(--ppd-blue); }
.ppd-ico-teal   { background: var(--ppd-teal-light); color: var(--ppd-teal); }
.ppd-ico-amber  { background: var(--ppd-amber-light); color: var(--ppd-amber); }
.ppd-ico-purple { background: var(--ppd-purple-light); color: var(--ppd-purple); }
.ppd-ico-indigo { background: var(--ppd-indigo-light); color: var(--ppd-indigo); }

/* Vue box — matches prototype .vb-now:
   17px Gilroy medium, 63px height, blue pill bg, borderRadius 11px, padding-left 40px.
   Width 258px (rail card inner width 258px). Text is left-aligned with 40px left padding. */
.ppd-rail-view-box {
    display: inline-flex;
    align-items: center;
    height: 63px;
    width: 258px;
    padding: 0 0 0 40px;
    border-radius: 11px;
    font-size: 17px;
    font-weight: 500;
    color: var(--ppd-blue);
    background: rgba(0, 68, 194, 0.063);
    border: 1px solid rgba(0, 68, 194, 0.153);
    box-sizing: border-box;
}

/* "Aujourd'hui" view: same blue pill (prototype vb-now) */
.ppd-rail-view-box--today {
    background: rgba(0, 68, 194, 0.1);
    border-color: rgba(0, 68, 194, 0.2);
    color: var(--ppd-blue);
}

/* Data rows */
.ppd-rail-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ppd-rail-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.ppd-rr-label {
    font-size: 14px;
    color: var(--ppd-gray-500);
    flex-shrink: 0;
}

.ppd-rr-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--ppd-navy);
    text-align: right;
}

/* Free-text blocks in rail (description / complementary data) */
.ppd-rail-text {
    font-size: 14px;
    color: var(--ppd-navy);
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ppd-rail-subhead {
    font-size: 12px;
    font-weight: 600;
    color: var(--ppd-dark);
    margin: 12px 0 4px;
}

/* Notes section in rail */
.ppd-rail-notes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.ppd-rail-notes-header .ppd-rail-sec-head {
    margin-bottom: 0;
}

.ppd-notes-add-btn {
    appearance: none;
    border: none;
    background: var(--ppd-blue-light);
    color: var(--ppd-blue);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background 0.15s;
    flex-shrink: 0;
}

.ppd-notes-add-btn:hover { background: rgba(0,68,194,0.18); }

/* Post-it style note card — matches prototype: yellow background, warm border */
.ppd-note {
    background: #FFF7D1;
    border: 1px solid #EFE09A;
    border-radius: 10px;
    padding: 13px 15px;
    font-size: 14px;
    color: #5C5326;
    line-height: 1.5;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ppd-note__text {
    font-size: 14px;
    color: #5C5326;
    line-height: 1.5;
    white-space: pre-wrap;
}

.ppd-note__meta {
    font-size: 11px;
    color: #8a7a3a;
}

.ppd-note__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

/* Edit action: pill button */
.ppd-note-btn--edit {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 11px;
    border: 1px solid rgba(0, 61, 125, 0.173);
    background: #fff;
    color: #565D79;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.ppd-note-btn--edit:hover {
    border-color: var(--ppd-blue);
    color: var(--ppd-blue);
}

/* Delete action: round 28×28 button */
.ppd-note-btn--del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(0, 61, 125, 0.173);
    background: #fff;
    color: #565D79;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.ppd-note-btn--del:hover {
    border-color: #BB4841;
    color: #BB4841;
}

/* ── Note edit/add modal (matches prototype .note-modal) ─────────────── */
.pnm-modal { display: flex; flex-direction: column; }
.pnm-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid #DFE3E8; }
.pnm-ico { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: #FFF7D1; color: #B59A2E; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.pnm-title { flex: 1; font-family: 'M PLUS Rounded 1c', 'Roboto', sans-serif; font-weight: 700; font-size: 17px; color: #0D1740; }
.pnm-close { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; border: none; background: #F2F4F6; color: #565D79; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.pnm-close:hover { background: #E6E9EE; }
.pnm-body { padding: 18px 20px; }
.pnm-textarea { width: 100%; box-sizing: border-box; min-height: 120px; resize: vertical; background: #FFFCEC; border: 1px solid #EFE09A; border-radius: 8px; padding: 13px 15px; font-family: inherit; font-weight: 500; font-size: 14px; line-height: 1.5; color: #5C5326; }
.pnm-textarea:focus { outline: none; border-color: #0044C2; }
.pnm-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: 1px solid #DFE3E8; }

/* Rounder note-modal corners (Telerik window default is 6px; prototype is 16px) */
.progression-note-window.k-window,
.progression-note-window .k-window-content { border-radius: 16px; }
.pnm-foot-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.pnm-btn-del { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none; color: #BB4841; padding: 0 6px; font-size: 14px; font-weight: 500; cursor: pointer; }
.pnm-btn-cancel { background: #fff; border: 1px solid #DFE3E8; color: #565D79; height: 38px; padding: 0 16px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; }
.pnm-btn-save { display: inline-flex; align-items: center; gap: 6px; background: #0044C2; border: none; color: #fff; height: 38px; padding: 0 16px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; }

/* Legacy .ppd-note-btn (fallback, not used in new markup) */
.ppd-note-btn {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--ppd-gray-500);
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0;
    transition: color 0.15s;
}

.ppd-note-btn:hover { color: var(--ppd-blue); }

.ppd-notes-empty {
    font-size: 13px;
    color: var(--ppd-gray-500);
    font-style: italic;
    padding: 4px 0;
}

/* ── MAIN CONTENT ──────────────────────────────────────────── */
.ppd-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1076px;
}

/* ── View tabs (Départ · Jalon · Aujourd'hui) ─────────────── */
.ppd-view-tabs {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    height: 41px;
    gap: 4px;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--ppd-border);
    border-radius: 9999px;
    box-shadow: var(--ppd-shadow);
    flex-wrap: wrap;
}

.ppd-view-tab {
    appearance: none;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--ppd-gray-500);
    padding: 7px 16px;
    border-radius: 9999px;
    transition: background 0.15s, color 0.15s;
    line-height: 1;
    font-family: Gilroy, 'Segoe UI', sans-serif;
}

.ppd-view-tab:hover:not(:disabled) { color: var(--ppd-blue); background: rgba(0,68,194,0.06); }
.ppd-view-tab--active { background: var(--ppd-blue) !important; color: #fff !important; }
.ppd-view-tab:disabled { opacity: 0.45; cursor: default; }

.ppd-view-tab-sep {
    display: inline-flex;
    align-items: center;
    color: var(--ppd-gray-300);
    font-size: 14px;
}

/* ── White card ────────────────────────────────────────────── */
.ppd-card {
    background: #fff;
    border: 1px solid var(--ppd-border);
    border-radius: var(--ppd-radius-lg);
    box-shadow: var(--ppd-shadow);
    padding: 22px 24px;
}

.ppd-card-title {
    /* Prototype: card-title uses "M PLUS Rounded 1c" (app bundles it as "Rounded Mplus 1c Bold"),
       16px/700, line-height 22.72px, letter-spacing 0.16px, margin-bottom 18px */
    font-family: 'Rounded Mplus 1c Bold', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 22.72px;
    letter-spacing: 0.16px;
    color: var(--ppd-dark);
    margin: 0 0 18px;
}

/* ── Global progression overview (gauge + synth) ──────────── */
.ppd-prog-overview {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
    flex-wrap: wrap;
    margin: 16px 0 10px;
}

.ppd-prog-gauge {
    flex-shrink: 0;
}

.ppd-prog-gauge svg {
    width: 168px;
    height: 168px;
    overflow: visible;
}

/* Synth KPI grid */
.ppd-prog-synth { display: flex; flex-direction: column; gap: 12px; }

.ppd-rail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

/* Prototype: .prog-synth .rail-grid { grid-template-columns: repeat(2, 176px); justify-content: start; }
   This higher-specificity rule pins the KPI grid at 2 columns inside the synth block,
   defeating the @media (max-width: 1080px) .ppd-rail-grid { repeat(4, 1fr) } rule. */
.ppd-prog-synth .ppd-rail-grid {
    grid-template-columns: repeat(2, 1fr);
    justify-content: start;
}

.ppd-rail-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: rgba(0,68,194,0.05);
    border: 1px solid rgba(0,68,194,0.12);
    border-radius: var(--ppd-radius-md);
    padding: 10px 12px;
    min-width: 176px;
}

.ppd-rf-label {
    font-size: 14px;
    color: var(--ppd-gray-500);
    font-weight: 500;
}

.ppd-rf-value {
    font-size: 19px;
    font-weight: 700;
    color: var(--ppd-blue);
    line-height: 1.2;
}

.ppd-rf-hint {
    font-size: 14px;
    color: var(--ppd-gray-500);
}

/* ── Milestone block + timeline ────────────────────────────── */
.ppd-milestone-block {
    margin-top: 32px;
    padding: 16px 18px;
    background: var(--ppd-gray-50);
    border-radius: var(--ppd-radius-lg);
}

.ppd-milestone-block .uil-check { line-height: 0; }
/* Pin the check icon size inside done milestone dots — overrides any global uil icon rule */
.ppd-tl-node--done .ppd-tl-dot .uil-check { font-size: 12px; }

/* ms-footer: flex row below the timeline — count text left, legend right */
.ppd-ms-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-top: 2px; /* prototype: 2px — date labels are now inside the 56px timeline height */
    padding-top: 12px;
    border-top: 1px solid rgba(0,68,194,0.12);
}

.ppd-ms-sub {
    font-size: 13px;
    color: var(--ppd-gray-500);
    flex: 1 1 auto;
}

/* Legend pushed to the right of the footer row */
.ppd-tl-legend {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.ppd-tl-leg {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px; /* prototype: 14px, color #4F4F4F */
    color: #4F4F4F;
    white-space: nowrap;
}

/* Mini dots used in the legend — prototype: 12px, start=white+border, done=green */
.ppd-tl-node-mini {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.ppd-tl-node-mini--start {
    background: #ffffff;
    border: 2px solid #E0E0E0;
}

.ppd-tl-node-mini--done {
    background: var(--ppd-success);
    border: none;
}

.ppd-timeline {
    position: relative;
    margin: 36px 8px 10px;
    height: 56px; /* prototype: 56px — tall enough to contain the date labels below the dot row */
}

.ppd-tl-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 9px;
    height: 0;
    border-top: 2px dashed var(--ppd-gray-300);
}

.ppd-tl-line-done {
    position: absolute;
    left: 0;
    top: 8px;
    height: 2px;
    background: var(--ppd-blue);
    border-radius: 2px;
    transition: width 0.4s;
}

.ppd-tl-node {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.ppd-tl-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--ppd-gray-300);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: transparent;
}

.ppd-tl-node--selected .ppd-tl-dot {
    background: var(--ppd-blue);
    border-color: var(--ppd-blue);
    box-shadow: 0 0 0 4px rgba(0,68,194,0.16);
    color: #fff;
}

.ppd-tl-node--today .ppd-tl-dot {
    background: var(--ppd-blue);
    border-color: var(--ppd-blue);
    /* today node: no check icon — color stays transparent */
}

/* Départ node: always empty (white + blue border, no fill, no check) — even though it's in the past.
   Prototype measures: bg=rgb(255,255,255), border=rgb(0,68,194) [blue], 2px, no icon. */
.ppd-tl-node--start .ppd-tl-dot {
    background: #ffffff;
    border-color: var(--ppd-blue);
    color: transparent;
}

/* Past milestone: green filled dot with white check icon */
.ppd-tl-node--done .ppd-tl-dot {
    background: var(--ppd-success);
    border-color: var(--ppd-success);
    color: #ffffff;
    font-size: 12px;
}

/* When a past-milestone node is also selected, keep the blue selected ring but preserve green fill */
.ppd-tl-node--done.ppd-tl-node--selected .ppd-tl-dot {
    background: var(--ppd-success);
    border-color: var(--ppd-success);
    box-shadow: 0 0 0 4px rgba(55,180,0,0.20);
    color: #ffffff;
}

.ppd-tl-badge {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(100% + 10px);
    height: 24px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.ppd-tl-badge--start    { background: var(--ppd-gray-100); color: var(--ppd-gray-500); }
.ppd-tl-badge--now      { background: rgba(0,68,194,0.10); color: var(--ppd-blue); }
.ppd-tl-badge--milestone { background: rgba(55,180,0,0.10); color: #1a6e00; }

.ppd-tl-date {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(100% + 8px);
    white-space: nowrap;
    font-size: 14px;
    color: var(--ppd-gray-500);
}

/* First node: centered on the track's left end (translateX(-10px) = half of 20px dot).
   Badge + date left-aligned so text starts at the node's visual left edge — matching prototype. */
.ppd-tl-node--edge-l {
    transform: translateX(-10px);
}

.ppd-tl-node--edge-l .ppd-tl-badge {
    left: 0;
    transform: none;
}

.ppd-tl-node--edge-l .ppd-tl-date {
    left: 0;
    transform: none;
}

/* Last node: centered on the track's right end.
   Node sits at left:100% (inline style) with translateX(-10px) so the 20px dot
   is centered exactly at the right end of the track — matching the prototype.
   Do NOT override left with `left: auto` — that pulls the node to 0. */
.ppd-tl-node--edge-r {
    transform: translateX(-10px);
}

.ppd-tl-node--edge-r .ppd-tl-badge {
    left: auto;
    right: 0; /* right edge of badge aligns with node's right edge (dot's right edge) */
    transform: none;
}

.ppd-tl-node--edge-r .ppd-tl-date {
    left: auto;
    right: 0;
    transform: none;
}

/* ── View panels (blue-tinted, purple-tinted) ──────────────── */
.ppd-view-panel {
    background: rgba(0,68,194,0.035);
    border-radius: 18px;
    padding: 6px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ppd-view-panel--repart {
    background: rgba(143,73,212,0.04);
}

.ppd-view-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 0 2px;
}

.ppd-view-bar-head { flex: 1; }

.ppd-ratio-bar-title {
    /* Prototype: ratio-bar-title uses "M PLUS Rounded 1c" (app: "Rounded Mplus 1c Bold"), 21px/700 */
    font-family: 'Rounded Mplus 1c Bold', sans-serif;
    font-weight: 700;
    font-size: 21px;
    color: var(--ppd-blue);
    margin: 0;
}

.ppd-repart-bar-title {
    /* Prototype: same display font, 21px/700 */
    font-family: 'Rounded Mplus 1c Bold', sans-serif;
    font-weight: 700;
    font-size: 21px;
    color: var(--ppd-purple);
    margin: 0;
}

.ppd-vb-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ppd-vb-sep {
    display: inline-block;
    width: 1px;
    height: 22px;
    background: var(--ppd-border-div);
    margin: 0 2px;
}

/* Month preset pills — dimensions match prototype ps-opt (14px, 38px, 0 16px) */
.ppd-ps-opt {
    appearance: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #4F4F4F;
    height: 38px;
    padding: 0 16px;
    background: transparent;
    border: 1px solid rgba(0, 61, 125, 0.173);
    border-radius: 9999px;
    transition: background 0.15s, color 0.15s;
    font-family: Gilroy, 'Segoe UI', sans-serif;
}

.ppd-ps-opt:hover:not(:disabled) {
    background: rgba(0,68,194,0.06);
    color: var(--ppd-blue);
}

.ppd-ps-opt--active {
    background: var(--ppd-blue);
    color: #fff;
    border-color: var(--ppd-blue);
}

/* Factures button */
.ppd-btn-factures {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 14px 0 12px;
    border-radius: 9999px;
    background: transparent;
    border: 1px solid var(--ppd-border);
    color: var(--ppd-gray-500);
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    font-family: Gilroy, 'Segoe UI', sans-serif;
}

.ppd-btn-factures:hover {
    background: rgba(0,68,194,0.06);
    color: var(--ppd-blue);
}

/* Blue indicator on the Factures button: count of included invoices (window total − excluded) */
.ppd-factures-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 9999px;
    background: #0044C2;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

/* Two-column indicator card grid */
.ppd-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* .ppd-two-col breakpoint absorbed into the 1080px block below (prototype uses 1080px) */

.ppd-ind-card {
    background: #fff;
    border: 1px solid var(--ppd-border);
    border-radius: var(--ppd-radius-lg);
    box-shadow: var(--ppd-shadow);
    padding: 26px 22px;
}

/* ── Loading / empty states ────────────────────────────────── */
.ppd-loading,
.ppd-empty {
    width: 100%;
}

.ppd-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
}

/* ── Responsive: 1080px breakpoint — matches prototype @media (max-width: 1080px) ──
   Prototype rules (verbatim class mapping):
     .plan-body       → .ppd-body        : flex-direction: column
     .plan-rail       → .ppd-rail        : width: 100%; position: static (drops sticky)
     .prog-overview   → .ppd-prog-overview: stacks vertically
     .rail-grid       → .ppd-rail-grid   : 4-col (overridden by .ppd-prog-synth specificity → stays 2-col in practice)
     .two-col         → .ppd-two-col     : single column (was previously at 1100px)
     .dist-body       → .ppd-repart-body : stacks donut above rows
     .donut-wrap      → .ppd-repart-donut-wrap: order: -1 (donut moves above rows)
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
    /* Body: switch to single-column stack (rail moves to top) */
    .ppd-body {
        flex-direction: column;
    }

    /* Rail: full width, no longer sticky */
    .ppd-rail {
        width: 100%;
        position: static;
        max-height: none;
        top: auto;
    }

    /* Progression overview: prototype .prog-overview is a flex container, so the prototype's
       grid-template-columns rule is a no-op at 1080px — gauge and KPI remain side-by-side.
       We do NOT apply flex-direction: column here (that was a misread of the prototype's intent). */

    /* Rail KPI grid: expand to 4 columns to use the full width
       (prototype: .rail-grid { grid-template-columns: repeat(4, 1fr); } — but .ppd-prog-synth
       .ppd-rail-grid uses higher specificity to stay at 2-col, so the 4-col only takes effect
       on any standalone .ppd-rail-grid outside .ppd-prog-synth) */
    .ppd-rail-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Indicator card two-column grid: collapse to one column
       (prototype: .two-col { grid-template-columns: 1fr; }) */
    .ppd-two-col {
        grid-template-columns: 1fr;
    }

    /* Répartition body: stack donut above the slice rows
       (prototype: .dist-body { grid-template-columns: 1fr; }) */
    .ppd-repart-body {
        flex-direction: column;
    }

    /* Donut wraps to full width and moves to the top of the stack
       (prototype: .donut-wrap { order: -1; }) */
    .ppd-repart-donut-wrap {
        flex: 0 0 auto;
        width: 100%;
        order: -1;
    }
}

/* ── Répartition card (.ppd-repart-*) ─────────────────────────
   Prototype layout: white card, title+tolerance header row,
   body = donut (left, fixed width) + slice rows (right, flex-fill).
   Replaces the old .progression-subindicators-panel with horizontal bars.
   ── */
.ppd-repart-card {
    background: #fff;
    border: 1px solid var(--ppd-border);
    border-radius: var(--ppd-radius-lg);
    box-shadow: var(--ppd-shadow);
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ppd-repart-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ppd-repart-title {
    /* Same font settings as .ppd-card-title */
    font-family: 'Rounded Mplus 1c Bold', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 22.72px;
    letter-spacing: 0.16px;
    color: var(--ppd-dark);
}

.ppd-ind-tol-badge {
    display: inline-flex;
    align-items: center;
    height: 35px;
    font-size: 14px; /* prototype: 14px */
    padding: 0 14px;
    border-radius: 9999px;
    white-space: nowrap;
    background: var(--ppd-gray-100);
    color: var(--ppd-gray-500);
}

/* "Progression" pill (prototype .cat-prog-inline): label + ring + blue % */
.ppd-repart-prog {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    height: 35px;
    background: #F7F8FA;
    border-radius: 9999px;
    padding: 0 12px;
}

.ppd-repart-prog-label {
    font-size: 13px;
    color: var(--ppd-gray-500);
    white-space: nowrap;
}

.ppd-repart-prog-ring {
    display: block;
    flex-shrink: 0;
}

.ppd-repart-prog-val {
    font-weight: 700;
    font-size: 15px;
    color: #0044C2;
    min-width: 38px;
    text-align: right;
}

/* Body: donut + rows side by side */
.ppd-repart-body {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.ppd-repart-donut-wrap {
    flex: 0 0 220px;
    min-width: 0;
}

.ppd-repart-nodata {
    padding: 40px 16px;
    text-align: center;
    color: var(--ppd-gray-500);
    font-size: 13px;
}

/* Slice rows on the right */
.ppd-repart-rows {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    align-self: center;
}

.ppd-repart-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--ppd-gray-200);
}

.ppd-repart-row:last-child {
    border-bottom: none;
}

.ppd-repart-dot {
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    border-radius: 50%;
}

/* Tinted chip: % + name on a 5%-opacity tint of the item color (--ppd-row-color).
   Prototype: padding 0 12px 0 11px, border-radius 6px, gap 8px between % and label.
   The tint background is set via color-mix for broad browser support; the CSS variable
   --ppd-row-color is set inline on the row element. */
.ppd-repart-row-chip {
    flex: 0 0 auto;
    width: fit-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--ppd-row-color, #0044C2) 10%, transparent);
    overflow: hidden;
}

/* Chip text uses a darkened version of the item color so it stays readable even when the
   configured distribution color is a light pastel (the dot keeps the raw item color to match
   the donut). --ppd-row-color is set inline per row from item.Color. */
.ppd-repart-row-label {
    font-size: 14px;
    color: color-mix(in srgb, var(--ppd-row-color, var(--ppd-dark)) 62%, #000);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
}

/* Real % displayed in the chip — same (darkened) color as the name, slightly larger and bolder */
.ppd-repart-row-real-pct {
    font-size: 15px;
    font-weight: 700;
    color: color-mix(in srgb, var(--ppd-row-color, var(--ppd-dark)) 62%, #000);
    white-space: nowrap;
    flex-shrink: 0;
}

/* "Cible xx%" — grey label between chip and status pill */
.ppd-repart-row-cible {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 500;
    color: #565D79;
    white-space: nowrap;
}

/* Badge: Dans la cible / En cours — fixed equal width sized to fit "Dans la cible".
   Prototype measurements: height 30px, padding 0 13px, border-radius 9999px, font 13px/500.
   "Dans la cible" renders at ~110px; "En cours" is narrower — both get min-width:110px
   so they share the same visual width. */
.ppd-repart-row-badge {
    position: relative;
    flex-shrink: 0;
    /* Always pin the status pill to the end of the row (chip is fit-content, so the left
       group no longer stretches to push the pill right). */
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    min-width: 110px;
    font-size: 13px;
    font-weight: 500;
    padding: 0 13px;
    border-radius: 9999px;
    white-space: nowrap;
    cursor: help;
}

/* "Dans la cible": prototype bg rgba(14,138,110,0.12), color #0E8A6E (green, not white) */
.ppd-repart-row-badge--reached   { background: rgba(14, 138, 110, 0.12); color: #0E8A6E; }
.ppd-repart-row-badge--inprogress { background: rgba(0,68,194,0.10); color: var(--ppd-blue); }

/* Hover tooltip on the status pill: "Progression [bar] N%" */
.ppd-prog-tip {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    background: #fff;
    border: 1px solid rgba(0, 61, 125, 0.173);
    border-radius: 8px;
    box-shadow: 0 10px 26px rgba(13, 23, 64, 0.18);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .15s, transform .15s, visibility .15s;
    z-index: 30;
    pointer-events: none;
    cursor: default;
}
.ppd-repart-row-badge:hover .ppd-prog-tip { opacity: 1; visibility: visible; transform: translateY(0); }
.ppd-prog-tip-label { font-size: 13px; font-weight: 500; color: #565D79; }
.ppd-prog-tip-bar { width: 90px; height: 8px; border-radius: 9999px; background: #EFF1F4; overflow: hidden; }
.ppd-prog-tip-fill { display: block; height: 100%; border-radius: 9999px; background: #0E8A6E; }
.ppd-prog-tip-val { font-size: 13px; font-weight: 700; color: #0E8A6E; }

@media (max-width: 860px) {
    .ppd-repart-body { flex-direction: column; }
    .ppd-repart-donut-wrap { flex: 0 0 auto; width: 100%; }
}

/* Custom donut tooltip: label + value, clean dark pill */
.ppd-donut-tip {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 100px;
    padding: 2px 0;
}

.ppd-donut-tip__label {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,0.75);
    white-space: nowrap;
}

.ppd-donut-tip__value {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
}

/* Rich donut hover tooltip — white card (dot + name, Réel/Cible, status chip) */
.k-tooltip:has(.ppd-dtip),
.k-chart-tooltip:has(.ppd-dtip) {
    background: #ffffff !important;
    border: 1px solid rgba(0, 61, 125, 0.173) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 28px rgba(13, 23, 64, 0.20) !important;
    padding: 12px 14px !important;
}
.ppd-dtip { display: flex; flex-direction: column; gap: 8px; min-width: 150px; }
.ppd-dtip-head { display: flex; align-items: center; gap: 8px; }
.ppd-dtip-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ppd-dtip-name { font-weight: 700; font-size: 14px; color: #0D1740; }
.ppd-dtip-vals { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ppd-dtip-cap { color: #565D79; }
.ppd-dtip-real { font-weight: 700; color: #0E8A6E; }
.ppd-dtip-cible { font-weight: 700; color: #0D1740; }
.ppd-dtip-div { width: 1px; height: 12px; background: #DFE3E8; }
.ppd-dtip-chip { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; height: 26px; padding: 0 12px; border-radius: 9999px; font-size: 13px; font-weight: 500; }
.ppd-dtip-chip--ok { background: rgba(14, 138, 110, 0.12); color: #0E8A6E; }
.ppd-dtip-chip--prog { background: rgba(0, 68, 194, 0.10); color: #0044C2; }

/* ── Day / Night two-block layout (.ppd-dn-*) ───────────────────────────────
   Used for DayNightDistribution only: two side-by-side réel/cible gauge blocks,
   mirroring the Ratio / CIJ card style. */

.ppd-dn-blocks {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 8px;
}

.ppd-dn-block {
    flex: 1;
    min-width: 160px;
    background: var(--ppd-gray-50, #f7f8fb);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ppd-dn-block-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ppd-gray-500);
}

.ppd-dn-vals {
    display: flex;
    align-items: baseline;
    gap: 16px;
}

.ppd-dn-real-wrap {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ppd-dn-real-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ppd-gray-500);
}

.ppd-dn-real-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--ppd-dark);
    line-height: 1.1;
}

.ppd-dn-cible-wrap {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ppd-dn-cible-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ppd-gray-500);
}

.ppd-dn-cible-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--ppd-gray-500);
    line-height: 1.1;
}

.ppd-dn-bar-wrap {
    width: 100%;
}

.ppd-dn-badge {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 9999px;
    white-space: nowrap;
}

.ppd-dn-badge--reached   { background: rgba(55,180,0,0.12); color: #1a6e00; }
.ppd-dn-badge--inprogress { background: rgba(0,68,194,0.10); color: var(--ppd-blue); }

@media (max-width: 600px) {
    .ppd-dn-blocks { flex-direction: column; }
}

/* ── Factures modal (.pfm-*) ─────────────────────────────────────────────────
   Prototype: header with icon+title+subtitle+close; PÉRIODE D'ANALYSE section
   with period cards; FACTURES À INCLURE section with search, counter+links,
   virtualized invoice rows as cards. Footer: Annuler / Appliquer.
   ── */

/* Factures modal backdrop: scoped dark-navy overlay to match the prototype.
   Prototype measures: rgba(13,23,64,0.45) — dark navy at 45% opacity (vs app default black at 50%).
   The .k-overlay is a sibling of .progression-factures-window inside .k-dialog-wrapper;
   :has() scopes this to only the progression-plan Factures/Note windows, not the whole app. */
.k-dialog-wrapper:has(.progression-factures-window) .k-overlay {
    background-color: rgba(13, 23, 64, 0.45) !important;
    opacity: 1 !important;
}

/* Override the Telerik window to remove its default header styling */
.progression-factures-window .k-dialog-titlebar,
.progression-factures-window .k-window-titlebar {
    display: none !important;
}

.progression-factures-window .k-dialog-content,
.progression-factures-window .k-window-content {
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

.pfm-modal {
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    font-family: Gilroy, 'Segoe UI', sans-serif;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

.pfm-modal *, .pfm-modal *::before, .pfm-modal *::after {
    box-sizing: border-box;
}

/* Neutralise the app-global button cap (Abena-main.css: button{max-height:3rem}) that
   otherwise crushes the tall period cards. */
.pfm-modal button { max-height: none; }

/* Header — matches prototype fct-head / fct-head-ico / fct-title / fct-sub / fct-close */
.pfm-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 24px;
    border-bottom: 1px solid #DFE3E8;
    flex-shrink: 0;
}

.pfm-header-ico {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(14, 138, 110, 0.12);
    color: #0E8A6E;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.pfm-header-ico i { line-height: normal; }

.pfm-header-text {
    flex: 1;
    min-width: 0;
}

.pfm-header-title {
    font-family: 'M PLUS Rounded 1c', 'Rounded Mplus 1c Bold', Roboto, sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: #0D1740;
    line-height: normal;
}

.pfm-header-sub {
    font-size: 14px;
    color: #565D79;
    margin-top: 3px;
}

.pfm-close-btn {
    appearance: none;
    background: #F2F4F6;
    border: none;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #565D79;
    font-size: 18px;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.pfm-close-btn:hover { background: #E6E9EE; color: #0D1740; }

/* Body — fills the modal; only the invoice list scrolls (header/period/search stay fixed) */
.pfm-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* "Factures à inclure" block fills the remaining height so its list can scroll */
.pfm-include {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Section label — matches prototype fct-section-label */
.pfm-section-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #565D79;
    margin-bottom: 11px;
}

/* Période d'analyse — 5-column grid matching prototype fct-period-grid */
.pfm-period-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.pfm-period-card {
    appearance: none;
    cursor: pointer;
    padding: 16px 8px 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    border: 1.5px solid rgba(0, 61, 125, 0.173);
    border-radius: 12px;
    background: #fff;
    transition: border-color 0.15s, background 0.15s;
    font-family: Gilroy, 'Segoe UI', sans-serif;
}

.pfm-period-card:hover {
    border-color: #0E8A6E;
}

.pfm-period-card--active {
    border-color: #0E8A6E;
    background: rgba(14, 138, 110, 0.07);
}

/* fp-num: 24px bold #0D1740; fp-unit: 13px weight 500 #565D79 */
.pfm-period-num {
    font-size: 24px;
    font-weight: 700;
    color: #0D1740;
    line-height: 1;
}

.pfm-period-unit {
    font-size: 13px;
    font-weight: 500;
    color: #565D79;
}

/* Search box — matches prototype fct-search */
.pfm-search {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(0, 61, 125, 0.173);
    border-radius: 10px;
    background: #F2F4F6;
    transition: border-color 0.15s;
    margin-bottom: 10px;
}

.pfm-search:focus-within {
    border-color: #0044C2;
    background: #fff;
}

.pfm-search i {
    font-size: 17px;
    color: #565D79;
    line-height: normal;
    flex-shrink: 0;
}

.pfm-search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: Gilroy, 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #0D1740;
}

.pfm-search input::placeholder { color: #565D79; }

/* Counter + select/deselect row — matches prototype fct-list-bar (14px) */
.pfm-counter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 12px 0 10px;
    font-size: 14px;
}

.pfm-counter-text {
    flex: 1;
    color: #565D79;
}

.pfm-counter-text b {
    color: #0D1740;
    font-weight: 700;
}

/* Link buttons — matches prototype fct-link: 14px, weight 500 */
.pfm-link-btn {
    appearance: none;
    background: none;
    border: none;
    cursor: pointer;
    font-family: Gilroy, 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #0044C2;
    padding: 0;
    text-decoration: none;
    transition: color 0.15s;
}

.pfm-link-btn:hover { color: #003892; text-decoration: underline; }
.pfm-link-btn--muted { color: #565D79; }
.pfm-link-btn--muted:hover { color: #3D3D3D; text-decoration: underline; }

/* Invoice card rows */
.pfm-invoice-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Invoice cards — matches prototype fct-row */
.pfm-invoice-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    border: 1px solid rgba(0, 61, 125, 0.173);
    border-radius: 12px;
    background: #fff;
    transition: border-color 0.15s;
    cursor: pointer;
}

.pfm-invoice-card:hover {
    border-color: rgba(0, 68, 194, 0.22);
}

.pfm-invoice-card--selected {
    border-color: rgba(0, 68, 194, 0.22);
    background: rgba(0, 68, 194, 0.04);
}

/* Custom checkbox matching prototype .fct-check: 22×22 rounded square, blue fill + white check when on */
.pfm-invoice-check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1.5px solid #AEB4C2;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    transition: background .15s, border-color .15s;
}

.pfm-invoice-check--on {
    background: #0044C2;
    border-color: #0044C2;
}

/* Invoice dot — matches prototype fct-dot: 9px, color-success #37B400 */
.pfm-invoice-dot {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #37B400;
}

.pfm-invoice-dot--excluded { background: #C58A00; }

.pfm-invoice-info {
    flex: 1;
    min-width: 0;
}

/* Invoice row title — matches prototype fct-row-title: 14px weight 500 */
.pfm-invoice-line1 {
    font-size: 14px;
    font-weight: 500;
    color: #0D1740;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Bold invoice number (prototype .frt-id) */
.pfm-invoice-num {
    font-weight: 700;
    color: #0D1740;
}

.pfm-invoice-line1-sep {
    display: inline-flex;
    align-items: center;
    align-self: center;
    color: #565D79;
    font-weight: 700;
    line-height: 1;
}

.pfm-invoice-month {
    font-size: 13px;
    font-weight: 500;
    color: #565D79;
}

.pfm-invoice-line2 {
    font-size: 13px;
    color: #565D79;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pfm-invoice-amount {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 700;
    color: #0D1740;
    white-space: nowrap;
    text-align: right;
    min-width: 80px;
}

/* Footer — matches prototype fct-foot */
.pfm-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #DFE3E8;
    flex-shrink: 0;
}

/* Footer buttons — matches prototype fct-btn: 44px, 12px radius, 15px */
.pfm-btn {
    appearance: none;
    cursor: pointer;
    height: 44px;
    padding: 0 22px;
    border-radius: 12px;
    font-family: Gilroy, 'Segoe UI', sans-serif;
    font-size: 15px;
    font-weight: 500;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pfm-btn--cancel {
    background: #fff;
    border: 1px solid rgba(0, 61, 125, 0.173);
    color: #4F4F4F;
}

.pfm-btn--cancel:hover { background: #F2F4F6; border-color: #565D79; }

.pfm-btn--apply {
    background: #0044C2;
    border: none;
    color: #fff;
}

.pfm-btn--apply:hover { background: #003892; }
.pfm-btn--apply i { line-height: normal; }

/* ── RealCibleGauge (.rcg-*) + Day/Night grid (.jn-*) ───────────────────────
   Extracted verbatim from the prototype's real CSS.
   ── */

/* Réel/Cible + gauge bordered cell — matches the prototype's .ind-top-info / .jn-cell card
   (computed: 1px solid rgba(0,61,125,.173), radius 12px, padding 20px 24px, column gap 14px). */
.rc-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #fff;
    border: 1px solid rgba(0, 61, 125, .173);
    border-radius: 12px;
    padding: 20px 24px;
}
.rc-duo { display: flex; align-items: flex-end; justify-content: center; gap: 30px; }
.rc-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rc-cap { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: #565D79; }
.rc-val { font-weight: 700; font-size: 23px; color: #0D1740; line-height: 1.05; }
.rc-cib-v { color: #4F4F4F; }

.rc-gauge { width: 100%; max-width: 300px; margin: 0 auto; }
.jn-gauge { max-width: 100%; }

.rcg { display: flex; flex-direction: column; gap: 8px; }

.rcg-track {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: #EFF1F4;
}

.rcg-band {
    position: absolute;
    top: 0;
    height: 100%;
    background: rgba(14, 138, 110, .2);
    border-radius: 999px;
}

.rcg-target {
    position: absolute;
    top: -4px;
    width: 2px;
    height: 16px;
    background: #565D79;
    transform: translateX(-50%);
    border-radius: 1px;
}

.rcg-real {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid #fff;
    box-shadow: rgba(13, 23, 64, .3) 0 1px 3px;
}

.rcg-scale {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 10px;
    color: #565D79;
}

.rcg-chip {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.rcg-chip-atteint  { background: rgba(14, 138, 110, .12); color: #0E8A6E; }
.rcg-chip-encours  { background: rgba(0, 68, 194, .10);   color: #0044C2; }
.rcg-chip-avenir   { background: #EFF1F4;                  color: #565D79; }

/* Day/Night grid */
.jn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.jn-cell {
    background: #fff;
    border: 1px solid #DFE3E8;
    border-radius: 12px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
}

.jn-name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
    font-size: 18px;
    color: #0D1740;
}
.jn-name i {
    font-size: 18px;
    line-height: 18px;
    color: #0D1740;
}

@media (max-width: 600px) {
    .jn-grid { grid-template-columns: 1fr; }
}

/* ── Detail page top-bar pixel-fidelity overrides ─────────────────────────
   Scoped to .ppd-page so the management screen's top bar is unaffected.
   All values are px (fixed) extracted from the prototype's computed styles
   (https://prototype.nordsud.io/abena/Plan%20de%20progression%20-%20D%C3%A9tail.html).

   Prototype measurements:
     topbar padding-right:             32px
     establishment selector height:    40px, border: 1px solid #DFE3E8, radius: 8px
       › name text: font-size 16px, font-weight 700, color #002C75
     breadcrumb separator:             font-size 20px, color rgb(224,224,224) = #E0E0E0
     page title (h1):                  font-size 21px, font-weight 700, line-height 21px, color #002C75
     action buttons:                   height 42px, font-size 14px, weight 500, radius 12px
       › icon: font-size 17px, line-height normal
       › gap between buttons: 8px
     right gap (last button → edge):   32px (= topbar padding-right 32px, actions padding-right 0)
   ──────────────────────────────────────────────────────────────────────── */

/* 1. Topbar right padding: prototype 32px vs global 1.5rem (24px) */
.ppd-page > .abena-v3-top-bar-header.abena-v3-top-bar-header--page {
    padding-right: 32px;
}

/* 2. Establishment selector text: prototype weight 700, color #002C75.
      .abena-v2-text-button is the name span rendered by EtablissementDropdown. */
.ppd-page .abena-v3-top-bar-header .topbar-estab-value .abena-v2-text-button {
    font-weight: 700;
    color: #002C75;
    font-size: 16px;
}

/* 3. Breadcrumb separator: prototype font-size 20px, color #E0E0E0.
      Global gives 12px; the fa-* icon inherits its size from the cascade. */
.ppd-page .abena-v3-top-bar-header .topbar-breadcrumb-sep {
    font-size: 20px;
    color: #E0E0E0;
}

/* 4. Page title: pin to 21px (font-size is a rem-based kendo var that shrinks with the
      responsive root font; line-height pinned too). */
.ppd-page .abena-v3-top-bar-header .abena-v3-page-title {
    font-size: 21px;
    line-height: 21px;
}

/* 5. Action button icons: prototype 17px.
      AbenaV3Button renders an inline style="font-size: 0.875rem" — need !important. */
.ppd-page .abena-v3-top-bar-header .abena-v3-btn i {
    font-size: 17px !important;
    line-height: normal !important;
}

/* 6. Actions container: prototype gap 8px (global 0.75rem=12px), padding-right 0
      (the 32px right gap comes from the topbar's own padding-right above). */
.ppd-page .abena-v3-top-bar-header .abena-v3-top-bar-header__actions {
    gap: 8px;
    padding-right: 0;
}

/* 7. Action buttons pinned to px (font-size/height/padding are rem on .abena-v3-btn--xl and
      shrink with the responsive root font). */
.ppd-page .abena-v3-top-bar-header .abena-v3-top-bar-header__actions .abena-v3-btn {
    font-size: 14px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 8px !important;
    border-radius: 12px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   PRINT / PDF EXPORT (POC)
   The Export button calls progressionPlanPrint.run(), which adds `ppd-print` to
   <body> and opens the browser print dialog. These rules strip the app chrome so
   the printed sheet shows just the dashboard report. Scoped to `body.ppd-print`
   so a normal Ctrl+P on any other page is untouched.
   NOTE: the browser's own header/footer (date, URL, page numbers) is a print-dialog
   setting ("More settings → Headers and footers") and cannot be fully removed via
   CSS — the @page margin below only reduces it.

   LAYOUT: two-column like the on-screen dashboard — plan-overview sidebar on the LEFT,
   the report sections to its right. We render at a desktop width (1400px) and `zoom` it
   down to the landscape page so it reads at a comfortable density rather than huge. Cards
   are kept whole (break-inside:avoid) and move to the next page when they don't fit — no
   splitting. The earlier zoom end-of-doc clipping is gone now that the scroll containers
   are fully released (below). Size knob: the `zoom` on .ppd-page (lower = smaller / more
   per page).

   KNOWN TRADE-OFF: the left sidebar column is reserved on every page, so pages after page 1
   keep an empty left margin. Eliminating it requires a full-width (top-band) sidebar — a
   float to keep the sidebar left-only broke pagination, so it's two-column-with-margin or
   top-band-no-margin, not both.

   TUNABLE: the `zoom` on .ppd-page is the size knob (lower = smaller / more per page);
   keep `width × zoom ≈ landscape printable width` so it fills the page.
   The Marges field can't be preset — @page margin emulates it.
   ───────────────────────────────────────────────────────────────────────────── */
@media print {
    @page { size: A4 landscape; margin: 8mm; }

    /* Render at a desktop width and scale to the page → compact two-column look. The
       width makes the children lay out at desktop density; zoom shrinks the whole thing
       to the landscape printable width. Keep width × zoom ≈ 1060px (297mm − 16mm margin)
       so it fills the page with no right gap. Lower zoom = more fits per page (this value
       was tuned so Progression + Ratio/CIJ land together on page 1). */
    body.ppd-print .ppd-page { width: 1830px !important; zoom: 0.58 !important; }

    /* Page-1 two-column like the reference (#65): plan-overview sidebar on the LEFT, the
       main sections (Progression, Ratio/CIJ, Répartition) to its right. A reliable flex
       two-column. NOTE: the left column is reserved on EVERY page, so overflow pages keep a
       left margin where the sidebar has no content — that's the unavoidable cost of the
       on-screen two-column in print (a float to reclaim the width broke pagination). */
    body.ppd-print .ppd-body { flex-direction: row !important; align-items: flex-start !important; }
    body.ppd-print .ppd-rail { width: 300px !important; flex-shrink: 0 !important; }

    /* Main content side-by-side groups (Répartition donut beside its rows). */
    body.ppd-print .ppd-repart-body { flex-direction: row !important; }
    /* The reflow also makes the donut box width:100% (for the stacked layout); restore its
       fixed 220px width, else it eats the whole card and pushes the legend rows off-edge. */
    body.ppd-print .ppd-repart-donut-wrap { flex: 0 0 220px !important; width: auto !important; }
    body.ppd-print .ppd-prog-overview { flex-direction: row !important; flex-wrap: nowrap !important; }

    /* CRITICAL: let the report flow across pages. On screen the page body lives in
       100vh / calc(100vh - topbar) panes with overflow:auto|hidden, which otherwise
       clip the print. Release height + overflow on EVERY ancestor in the chain
       (including the generic wrapper div between .k-drawer-content and .ppd-page,
       which has no stable nth-child) so the full content paginates. */
    html, body.ppd-print { height: auto !important; overflow: visible !important; }

    /* Layout chrome (flex/Telerik panes) — flatten to block so nothing constrains height. */
    body.ppd-print .abs-main-layout,
    body.ppd-print .abs-left-bar,
    body.ppd-print .k-drawer-container,
    body.ppd-print .k-drawer,
    body.ppd-print .k-drawer-wrapper,
    body.ppd-print .k-drawer-content,
    body.ppd-print .k-drawer-content > div {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        display: block !important;
    }

    /* The report's own containers — release height/overflow but KEEP their layout
       (the dashboard's responsive grid stays intact). .ppd-rail is position:sticky with
       its own max-height + overflow:auto on screen; static + released for print so the
       sidebar prints in full instead of being clipped to a viewport-height scroll box. */
    body.ppd-print .ppd-page,
    body.ppd-print .ppd-body,
    body.ppd-print .ppd-main,
    body.ppd-print .ppd-rail {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        position: static !important;
    }

    /* Avoid page breaks slicing through cards — but ONLY page-sized-or-smaller blocks.
       NOT .ppd-view-panel: the Répartition wrapper holds all three distributions and
       is taller than a page; marking it unbreakable makes the browser CLIP the overflow
       (the Jour/Nuit block was lost). Target the individual distribution cards instead
       (.ppd-repart-card) so each stays whole while the wrapper breaks between them. */
    body.ppd-print .ppd-rail-id-card,
    body.ppd-print .ppd-card,
    body.ppd-print .ppd-ind-card,
    body.ppd-print .ppd-repart-card,
    body.ppd-print .ppd-rail-section {
        break-inside: avoid;
    }

    /* Landscape: use the horizontal space. Ratio | CIJ sit side-by-side (the narrow
       reflow stacks them); this keeps the whole Ratio/CIJ section on one landscape page. */
    body.ppd-print .ppd-two-col { grid-template-columns: 1fr 1fr !important; }

    /* Keep the Ratio/CIJ section header glued to its cards (it was orphaning onto the
       previous page). Scoped to the NON-Répartition panel — Répartition is taller than a
       page and must stay breakable, or it would be clipped. */
    body.ppd-print .ppd-view-panel:not(.ppd-view-panel--repart) { break-inside: avoid; }

    /* Répartition can't be break-inside:avoid (taller than a page → would clip), so force it
       to START on a fresh page. That keeps its "Répartition" header on top of its first card
       instead of orphaning the header at the bottom of the previous page. Block display on
       the main column makes break-before reliable (it's ignored on flex items). */
    body.ppd-print .ppd-main { display: block !important; }
    body.ppd-print .ppd-main > .ppd-view-panel--repart { break-before: page !important; }

    /* No forced one-section-per-page break. Cards just pack down the page; break-inside
       (above) keeps each card whole, so a card that doesn't fit the remaining space moves
       to the next page intact — and the report spills onto more pages when there are many
       indicators. The wrappers (.ppd-view-panel) are NOT break-inside so they span pages. */

    /* Section wrappers carry a faint blue/purple tint on screen (the grayish boxes).
       Flatten them to transparent so they blend into the white page — the inner cards
       (.ppd-card / .ppd-ind-card / .ppd-repart-card) keep their own white + border. */
    body.ppd-print .ppd-view-panel,
    body.ppd-print .ppd-view-panel--repart {
        background: transparent !important;
    }

    /* The page itself sits on the app's gray --bgcolor (#F4F4F8), carried by .abs-left-bar
       and the drawer panes. print-color-adjust:exact forces it to print, so white it out
       across the whole container chain. The white cards/panels above still stand out. */
    body.ppd-print,
    body.ppd-print .abs-main-layout,
    body.ppd-print .abs-left-bar,
    body.ppd-print .abs-left-bar:not(.drawer-push-mode),
    body.ppd-print .k-drawer-container,
    body.ppd-print .k-drawer,
    body.ppd-print .k-drawer-wrapper,
    body.ppd-print .k-drawer-content,
    body.ppd-print .k-drawer-content > div,
    body.ppd-print .ppd-page,
    body.ppd-print .ppd-body,
    body.ppd-print .ppd-main {
        background: #fff !important;
        background-color: #fff !important;
    }

    /* Print backgrounds/colours exactly. Browsers strip background-color and
       background-image when printing by default — that's why the progress track,
       the round thumb, and the "Dans la cible" pill (all background-based) vanish
       or collapse to bare boxes. This opt-in restores them. Inherited, so the
       container covers all descendants; `*` + !important defeats any local reset. */
    body.ppd-print .ppd-page,
    body.ppd-print .ppd-page * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Left rail (Telerik drawer) — lives in the layout, outside .ppd-page. */
    body.ppd-print .k-drawer.k-drawer-start { display: none !important; }

    /* Push-drawer offsets the content; let the report take the full page width. */
    body.ppd-print .k-drawer-container,
    body.ppd-print .k-drawer-content {
        margin: 0 !important;
        width: auto !important;
    }

    /* .abs-left-bar reserves padding-left = rail width (250px) for the rail we hide in
       print — zero it so the report isn't pushed right with a big empty left margin. */
    body.ppd-print .abs-left-bar {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Keep the page top bar, but drop its action buttons (Export / Edit) and the
       back link — they're app controls, not part of the report. */
    body.ppd-print .ppd-page .abena-v3-top-bar-header__actions,
    body.ppd-print .ppd-page .ppd-topbar-crumb,
    body.ppd-print .ppd-back-row {
        display: none !important;
    }
}

/* ===== Progression Plan — Admin management grid (/progression-plan/management, AdmEtabAll users) ===== */

/* Wrap: fill the content area vertically. flex:1 makes it grow into .progression-plan-main-page__content. */
.ppm-grid-wrap { display: flex; flex-direction: column; min-height: 0; flex: 1; }

/* Inner grid shell: sits below the toolbar, takes all remaining height.
   Height="100%" on TelerikGrid resolves to THIS element, not to the wrap (which includes the toolbar).
   Without this, the Telerik grid's inline height:100% resolves to the full wrap height and
   overflows by ~53px (toolbar height), pushing the pager below the clip boundary. */
.ppm-grid-inner { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }

/* ── Filter toolbar ────────────────────────────────────────────────────── */
.ppm-toolbar {
    display: flex; align-items: center; justify-content: flex-end; padding: 0 0 1rem;
}
.ppm-toolbar__filters { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }

/* Inherit Gilroy font for all toolbar inputs (Kendo forces Roboto otherwise). */
.ppm-toolbar__filters .k-picker,
.ppm-toolbar__filters .k-input,
.ppm-toolbar__filters .k-input-inner,
.ppm-toolbar__filters .k-input-value-text,
.ppm-toolbar__reset {
    font-family: "Gilroy-Medium", "Helvetica Neue", Helvetica, sans-serif;
    font-size: 0.875rem; font-weight: 500;
}

/* White surface, light border, pill-rounded — matches the Client grid toolbar style. */
.ppm-toolbar__filters .k-picker,
.ppm-toolbar__filters .k-input {
    background: #fff; border: 1px solid #c9d2dc; border-radius: 0.5rem; height: 2.3125rem;
}

/* Search wrapper: icon overlaid on the left. */
.ppm-toolbar__search { position: relative; display: inline-flex; align-items: center; }
.ppm-toolbar__search-icon {
    position: absolute; left: 0.75rem; z-index: 2; pointer-events: none; color: var(--sn-text-muted);
}
.ppm-toolbar__search .k-input-inner { padding-left: 2.4rem; color: #0d1740; }
.ppm-toolbar__search .k-input-inner::placeholder { color: #565d79; opacity: 1; }

/* Selected value text (dropdown value area) — muted, slightly smaller. */
.ppm-toolbar__filters .k-input-value-text { color: #565d79; font-size: 0.8125rem; }

/* Replace Telerik's triangle caret with the Unicons angle-down chevron. */
.ppm-toolbar__filters .k-input-button .k-svg-icon,
.ppm-toolbar__filters .k-input-button .k-icon { display: none; }
.ppm-toolbar__filters .k-input-button {
    width: 1.5rem; min-width: 1.5rem;
    justify-content: flex-end; padding-right: 0.5rem; padding-left: 0;
}
.ppm-toolbar__filters .k-input-button::after {
    content: "\eb3a" !important;
    font-family: "unicons-line" !important;
    font-size: 0.95rem; line-height: 1; color: #565d79;
    display: inline-block !important;
    position: static !important; width: auto !important; height: auto !important;
    margin: 0 !important; border: 0 !important; background: none !important;
    transform: none !important; opacity: 1 !important;
}
.ppm-toolbar__filters .k-dropdownlist .k-input-inner { padding-left: 0.5rem; padding-right: 0; }

/* Reset button — same style as the Client grid reset. */
.ppm-toolbar__reset {
    display: inline-flex; align-items: center; gap: 0.375rem;
    border: none; background: transparent; color: #0044c2;
    cursor: pointer; padding: 0.25rem 0.5rem;
}
.ppm-toolbar__reset:hover { text-decoration: underline; }

/* ── "No plan" status badge variant — orange (reuses --scheduled gold tokens). ── */
.progression-plan-status-badge--noplan {
    background: rgba(212, 159, 0, 0.12); color: #b07d00;
}

/* ── "Aucun plan" plan pill — grey, no blue accent. ── */
.ppm-plan-pill--none {
    background: #eff1f4; color: #4f4f4f;
}
.ppm-plan-pill--none .ppc-plan-pill__dot { background: #c9d2dc; }

/* ── "+" create button for no-plan rows — blue border, icon. ── */
.ppm-create-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.125rem; height: 2.125rem; border-radius: 0.5rem;
    border: 1.5px solid #0044c2; background: #fff; color: #0044c2;
    font-size: 1rem; cursor: pointer; max-height: none;
}
.ppm-create-btn:hover { background: rgba(0, 68, 194, 0.06); }

/* ── Action buttons in the admin grid: defeat global button max-height cap. ── */
.ppm-grid-wrap .ppc-action-btn { max-height: none; }

/* ── Destructive (delete) action button — red on hover. ── */
.ppc-action-btn--delete:hover:not(:disabled) {
    background: rgba(187, 72, 65, 0.08);
    border-color: #bb4841;
    color: #bb4841;
}

/* ── Admin plan-pill tooltip: allow the absolute overlay to escape the grid cell's clip boundary.
   The Telerik scrollable grid sets overflow:hidden on .k-grid-content and its table cells.
   We override it on the td that contains our .ppm-plan-cell so the tooltip card is not clipped. ── */
.ppm-grid-wrap .k-grid-content td:has(.ppm-plan-cell),
.ppm-grid-wrap .k-grid-content tr td:has(.ppm-plan-cell) {
    overflow: visible;
}
/* The grid-content scroll container itself must also not clip the tooltip. */
.ppm-grid-wrap .k-grid-content {
    overflow-x: auto;
    overflow-y: auto;
}

/* Horizontal scrolling: when all columns have explicit widths the grid table has a natural min-width.
   The global .abena-v3-grid rule clips .k-grid-aria-root with overflow:hidden — override it here so
   the header wrapper (k-grid-header) can also scroll horizontally in sync with the body.
   k-grid-content is already overflow-x:auto above; this covers the outer aria-root and header. */
.ppm-grid-wrap .k-grid-aria-root {
    overflow-x: auto;
}
.ppm-grid-wrap .k-grid-header {
    overflow-x: hidden; /* hidden so only the content area shows a scrollbar, header tracks via sync */
}
/* Établissement + Plan + Progression have no fixed Width so they shrink/grow with the window; this
   floor keeps the fixed columns (Statut 9 + Actions 7rem) plus a usable minimum for the three fluid
   ones — below it the horizontal scroll above takes over (preserves the ABENA-1539 breakpoint). */
.ppm-grid-wrap .k-table { min-width: 54rem; }

/* ── PDF print export (the /print route's <div class="ppd-print">) ───────────────────────────────
   Stack the distribution panels cleanly for the A4 render: donut full-width (so it centres) and the
   slice rows span the card. Scoped to `div.ppd-print` so it can NEVER match ABENA-1555's
   `@media print { body.ppd-print … }` browser-print rules (different element). Applied at load (not
   @media print) because the headless renderer measures the Telerik charts at load time. */
div.ppd-print .ppd-repart-body { flex-direction: column; }
div.ppd-print .ppd-repart-donut-wrap { width: 100%; order: -1; }
div.ppd-print .ppd-repart-rows { align-self: stretch; width: 100%; }
div.ppd-print .ppd-repart-row { padding-left: 0; padding-right: 0; }
/* The Jour/nuit panel (rendered full-width in the PDF) doesn't need the header progression badge. */
div.ppd-print .ppd-print-card--full .ppd-repart-prog { display: none; }
/* Drop the gauge marker's drop-shadow — at the page's print scale it renders as a grey disc behind
   the green dot. */
div.ppd-print .rcg-real { box-shadow: none; }