.abs-topbar {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-left: 32px;
    width: 100%;
    height: var(--top-bar-height);
    left: 0;
    top: 0;
    background: var(--primary);
    align-items: center;
    border: 1px solid #f5f5f5;
    border-top: none;
    border-right: none;
}

/* Only react to the main rail being expanded — the nested admin sub-drawer
   also carries `.k-drawer-expanded`, so the selector pairs it with `.rail`
   to exclude `.nested-drawer`. */
body:has(.rail.k-drawer-expanded) .abs-topbar {
    padding-left: 224px;
}

.drawer-push-mode .abs-topbar {
    padding-left: 32px !important;
}

    .abs-topbar .empty-space {
        flex-grow: 1;
    }

    .abs-topbar .left-part {
        align-items: center;
        display: flex;
        gap: 16px;            /* selector › page-title spacing */
    }

/* Breadcrumb chevron between the establishment selector and the page title. */
.abs-topbar .topbar-breadcrumb-sep {
    flex: 0 0 auto;
    color: rgba(13, 23, 64, 0.3);
    font-size: 12px;
}

/* ── Establishment selector in the global top bar (V2 design) ──
   Compact white pill: building-icon chip + name + chevron, with a blue
   focus ring when open. */
.abs-topbar .etablissement-list--topbar .k-picker-outline {
    height: 40px;
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 61, 125, 0.22) !important;
    border-radius: 8px;
    box-shadow: none;
    color: #0D1740;
    text-transform: none;
    padding: 0 12px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.abs-topbar .etablissement-list--topbar .k-picker-outline:hover,
.abs-topbar .etablissement-list--topbar .k-picker-outline.k-focus,
.abs-topbar .etablissement-list--topbar .k-picker-outline:focus-within {
    border-color: #0044C2 !important;
    box-shadow: 0 0 0 3px rgba(0, 68, 194, 0.1);
}

.abs-topbar .etablissement-list--topbar .k-input-inner {
    background: transparent;
    padding: 0;
}

.topbar-estab-value {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.topbar-estab-value__logo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    color: #002C75;
}
.topbar-estab-value__logo i {
    font-size: 18px;
    line-height: 1;
}

.abs-topbar .etablissement-list--topbar .abena-v2-text-button {
    font-family: 'Gilroy', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0;
    color: #002C75;
    white-space: nowrap;        /* single line, but no truncation — pill fits the name */
    overflow: visible;
}

/* Chevron-down (replaces Telerik's caret) */
.abs-topbar .etablissement-list--topbar .k-input-button {
    background: transparent !important;
    border: none !important;
    padding: 0 0 0 6px;
    color: #565D79 !important;
}
.abs-topbar .etablissement-list--topbar .k-i-caret-alt-down::before,
.abs-topbar .etablissement-list--topbar .k-svg-i-caret-alt-down::before {
    content: "\f078";   /* fa-chevron-down */
    font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", FontAwesome;
    font-weight: 900;
    font-size: 11px;
    color: #565D79;
    transform: none;
    margin: 0;
}
.abs-topbar .etablissement-list--topbar .k-input-button svg { display: none; }

/* ── Establishment dropdown popup (V2 design): rounded card, grey search box,
   rows with a logo chip + name + check mark on the selected one. ── */
/* Rounding + border + shadow belong on the OUTER popup box, not the inner list
   (putting them on .k-list created a rounded line between the search and the
   options and a doubled bottom border). */
.topbar-estab-popup .k-popup.k-list-container {
    border-radius: 12px;
    border: 1px solid rgba(0, 61, 125, 0.17);
    box-shadow: 0 24px 60px rgba(13, 23, 64, 0.28);
    overflow: hidden;
    padding: 0;                /* no popup padding so the search separator spans full width */
    margin-top: 0;
}
.topbar-estab-popup .k-list,
.topbar-estab-popup .k-list-md {
    border: none;
    border-radius: 0;
    background: transparent;
}

.topbar-estab-popup .k-list-filter {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0, 61, 125, 0.12);   /* full-width separator below the search */
}
.topbar-estab-popup .k-list-filter .k-input,
.topbar-estab-popup .k-list-filter .k-textbox {
    background: #EFF1F4;
    border: none !important;
    border-radius: 8px;
    height: 40px;
    box-shadow: none !important;
    padding-left: 12px;          /* breathing room before the search icon */
}
/* Replace Telerik's SVG search icon with the Unicons line "search" glyph. */
.topbar-estab-popup .k-list-filter .k-input-icon {
    margin-right: 2px;           /* placeholder sits close to the icon */
    color: #565D79;
    display: inline-flex;
    align-items: center;
}
.topbar-estab-popup .k-list-filter .k-input-icon svg {
    display: none;
}
.topbar-estab-popup .k-list-filter .k-input-icon::before {
    content: "\e99a";            /* uil-search */
    font-family: 'unicons-line';
    font-size: 18px;
    line-height: 1;
    color: #565D79;
}
.topbar-estab-popup .k-list-filter .k-input-inner,
.topbar-estab-popup .k-list-filter input {
    font-family: 'Gilroy', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #0D1740;
    padding-left: 2px;           /* keep the placeholder close to the icon */
}
.topbar-estab-popup .k-list-filter .k-input-inner::placeholder,
.topbar-estab-popup .k-list-filter input::placeholder {
    color: #565D79;
    opacity: 1;                 /* override the browser/Kendo default dimming + tint */
    font-weight: 500;
}

.topbar-estab-popup .k-list-content {
    padding: 6px;
}

.topbar-estab-popup .k-list-item {
    border-radius: 8px;
    padding: 8px 10px;
    box-sizing: border-box;
}
.topbar-estab-popup .k-list-item.k-selected,
.topbar-estab-popup .k-list-item.k-selected:hover,
.topbar-estab-popup .k-list-item.k-focus {
    background: rgba(0, 68, 194, 0.07);
    color: #0044C2;
    box-shadow: none;
}
/* Selected establishment name in blue (matches the check mark). */
.topbar-estab-popup .k-list-item.k-selected .topbar-estab-item {
    color: #0044C2;
}
.topbar-estab-popup .k-list-item:hover {
    background: rgba(0, 68, 194, 0.04);
}

.topbar-estab-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    font-family: 'Gilroy', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: #0D1740;
}
.topbar-estab-item__logo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}
.topbar-estab-item__logo img {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    display: block;
    object-fit: contain;
}
.topbar-estab-item__name {
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topbar-estab-item__check {
    flex: 0 0 auto;
    color: #0044C2;
    font-size: 13px;
    display: none;
}
.topbar-estab-popup .k-list-item.k-selected .topbar-estab-item__check {
    display: inline-block;
}

    .abs-topbar .right-part {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 16px;
        padding-right: 32px;
    }

        .abs-topbar .right-part .edit-mode-switch {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            margin-right: 66px;
            gap: 8px;
            isolation: isolate;
            flex: none;
        }
        .abs-topbar .right-part .edit-mode-switch .k-switch {
            width: 40px;   
            height: 20px;
        }
        
        .abs-topbar .right-part .edit-mode-switch .k-switch:focus .k-switch-track{
            outline: none;
        }

            .abs-topbar .right-part .edit-mode-switch i {
                width: 24px;
                height: 24px;
                -webkit-mask-image: url(/Images/rail/icons/lucide/lock-keyhole.svg);
                mask-image: url(/Images/rail/icons/lucide/lock-keyhole.svg);
                mask-repeat: no-repeat;
                mask-size: contain;
                background-color: var(--primary);
            }
            
            .abs-topbar .right-part .edit-mode-switch i.unlocked {
                -webkit-mask-image: url(/Images/rail/icons/lucide/lock-keyhole-open.svg);
                mask-image: url(/Images/rail/icons/lucide/lock-keyhole-open.svg);
            }

            .abs-topbar .right-part .edit-mode-switch .k-switch-on .k-switch-track {
                border-color: var(--primary);
                background-color: var(--primary);
            }

            .abs-topbar .right-part .edit-mode-switch .k-switch-track {
                width: 40px;
                height: 20px;
            }

            .abs-topbar .right-part .edit-mode-switch .k-switch-on .k-switch-thumb {
                background-color: var(--white);
            }
            .abs-topbar .right-part .edit-mode-switch .k-switch-on .k-switch-thumb-wrap {
                left: calc(100% - 10px);
            }
            .abs-topbar .right-part .edit-mode-switch .k-switch-off .k-switch-thumb-wrap {
                left: 10px;
            }
            .abs-topbar .right-part .edit-mode-switch .k-switch-thumb {
                width: 12px;
                height: 12px;
            }

            
            .notifs-wrapper {
                width: 32px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        .abs-topbar .right-part .notifs {
            width: 32px;
            height: 32px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: none;
            border-radius: 50%;
            background: #002C75;
            background-blend-mode: multiply;
            color: #FFFFFF;
            cursor: pointer;
            flex: none;
            flex-shrink: 0;
            padding: 0 !important;
            gap: 0;
            transition: opacity 0.15s ease;
        }

            .abs-topbar .right-part .notifs:hover {
                opacity: 0.85;
            }


            .abs-topbar .right-part .notifs .validate {
                font-size: 14px;
                line-height: 1;
                color: #FFFFFF;
                display: block;
            }

            .abs-topbar .right-part .notifs .has-notifs {
                width: 8px;
                height: 8px;
                border-radius: 20px;
                background-color: #4DC97F;
                position: absolute;
                margin-left: 20px;
                margin-top: -20px;
                border: 2px solid #002C75;
                box-sizing: content-box;
                animation: blink 1s 5;
            }

@keyframes blink {
    80% {
        background-color: #FFFFFF;
    }

    100% {
        background-color: #4DC97F;
    }
}


.abs-topbar .right-part .user {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 0 0 16px;
    border-left: 1px solid var(--primary);
    color: var(--primary);
}

.abs-topbar .right-part .user > i {
    width: 24px;
    height: 24px;
    -webkit-mask-image: url(/Images/rail/icons/lucide/circle-user-round.svg);
    mask-image: url(/Images/rail/icons/lucide/circle-user-round.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: var(--primary);
    margin-right: 8px;
}

.abs-topbar .right-part .user .account-menu {
    /*    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    flex-grow: 0;
    font-size: 0.9375rem;*/
    font-weight: 600;
    background-color: transparent;
    padding-left: 0;
}

.abs-topbar .right-part .user .account-menu .k-menu-link{
    gap: 0;
}

    .abs-topbar .right-part .user .account-menu * .k-menu-link-text {
        color: var(--primary);
    }
    .abs-topbar .right-part .user .account-menu .k-item:focus {
        box-shadow: none;
    }

    .abs-topbar .right-part .user .account-menu * .k-menu-expand-arrow {
        color: var(--primary);
    }
    .abs-topbar .right-part .user .account-menu * .k-menu-expand-arrow .k-i-caret-alt-down:before {
        content: "⌃";
        font-family: var(--abena-v2-font-primary);
        font-weight: 400;
        font-size: 24px;
        transform: rotate(180deg);
        margin-bottom: 12px;
    }

.abs-topbar .right-part .user .fidelite-label {
    color: var(--white);
    cursor: pointer;
    margin-right: 10px;
}

    .abs-topbar .right-part .user .fidelite-label:hover {
        text-decoration: underline;
    }


/* EditModeToggle — circular icon button for privacy lock/unlock on custom top bars */
button.edit-mode-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid #0044C2;
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    flex: none;
    flex-shrink: 0;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

button.edit-mode-toggle > i {
    font-size: 20px;
    line-height: 1;
    color: #0044C2;
    display: block;
}

button.edit-mode-toggle:hover {
    background: rgba(0, 68, 194, 0.08);
}

button.edit-mode-toggle.active {
    background: #0044C2;
    border-color: #0044C2;
}

button.edit-mode-toggle.active > i {
    color: #FFFFFF;
}

button.edit-mode-toggle:focus-visible {
    outline: 2px solid #0044C2;
    outline-offset: 2px;
}


.page__titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.page__caption {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;          /* 16px */
    color: #565D79;
}

.page__titles .page-title {
    margin: 0;
    font-family: 'Rounded Mplus 1c Bold';
    font-style: normal;
    font-weight: 700;
    font-size: 21px;        /* 21px */
    color: #002C75;
}

/* ── Topbar establishment selector: centered modal presentation ─────────── */

@keyframes estabPopupFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Dimmed navy backdrop behind the centered options panel. Rendered at the
   AbsMainLayout root (not inside the topbar) so it escapes the drawer's
   stacking context and dims the left menu (.k-drawer, z-index 9999) too. */
.estab-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(13, 23, 64, 0.45);
    z-index: 10000;                 /* above the left menu (9999), below the popup */
    animation: estabPopupFade 0.15s ease-out;
}

/* Re-center the Telerik popup in the viewport instead of anchoring it under the
   trigger, and fade it in (no slide). The popup Class lands on the
   .k-animation-container itself, so target that element directly. !important
   beats Telerik's non-important inline top/left positioning. */
.k-animation-container.topbar-estab-popup {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10003 !important;      /* above .estab-modal-backdrop */
    animation: estabPopupFade 0.15s ease-out !important;
}

/* Neutralize Telerik's inner slide animation so the panel fades in centered
   rather than sliding from the trigger's anchor point. */
.k-animation-container.topbar-estab-popup .k-child-animation-container {
    position: static !important;
    transform: none !important;
    inset: auto !important;
    animation: none !important;
    transition: none !important;
}