﻿
/* ==========================================================================
   1. ROOT CONTAINER CONFIGURATION (COMPACT TYPE & LINE HEIGHTS)
   ========================================================================== */
.AdaMenuContainer.RadPanelBar_Metro,
.AdaMenuContainer.RadPanelBar_Metro .rpLink,
.AdaMenuContainer.RadPanelBar_Metro .rpText {
    font-family: "Segoe UI", Arial, Helvetica, sans-serif !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -ms-user-select: none !important;
}

/* Forces the strict 250px block constraint with your 24px line-height */
.AdaMenuContainer.RadPanelBar_Metro {
    width: 250px !important;
    max-width: 250px !important;
    min-width: 250px !important;
    box-sizing: border-box !important;
    line-height: 24px !important;
}

    .AdaMenuContainer.RadPanelBar_Metro .rpRootGroup,
    .AdaMenuContainer.RadPanelBar_Metro .rpItem,
    .AdaMenuContainer.RadPanelBar_Metro .rpGroup {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

        /* ==========================================================================
   2. TOP-LEVEL CATEGORY DRAWER HEADERS
   ========================================================================== */
        .AdaMenuContainer.RadPanelBar_Metro .rpRootGroup > .rpItem > .rpLink {
            display: flex !important;
            align-items: center;
            justify-content: space-between;
            padding: 0 10px !important;
            font-size: 12px !important;
            font-weight: 700 !important;
            text-decoration: none !important;
            border-bottom: 1px solid #e5e5e5 !important;
        }

            /* Protection for the right-aligned header drawer chevrons */
            .AdaMenuContainer.RadPanelBar_Metro .rpRootGroup > .rpItem > .rpLink .rpExpandHandle {
                flex-shrink: 0 !important;
                margin-left: 10px !important;
                display: inline-flex !important;
                align-items: center;
            }

    .AdaMenuContainer.RadPanelBar_Metro .rpRootLink .rpExpandHandle .p-icon {
        font-size: 12px !important;
        color: #333 !important;
    }

    /* ==========================================================================
   3. INNER SUB-MENU NAVIGATION ITEMS (LEVEL 1 LINKS)
   ========================================================================== */
    .AdaMenuContainer.RadPanelBar_Metro .rpGroup.rpLevel1 .rpItem .rpLink {
        display: flex !important;
        align-items: center;
        padding: 0 10px !important;
        font-size: 12px !important;
        font-weight: normal !important;
        text-decoration: none !important;
        /*background-color: transparent !important;*/
    }

/* Combines your custom 22px template adjustments while maintaining strict isolation */
.AdaMenuContainer.RadPanelBar .rpGroup .rpLink,
.AdaMenuContainer.RadPanelBar .rpGroup .rpTemplate {
    background-color: transparent !important;
    border-bottom: 0 !important;
    font-size: 12px !important;
    line-height: 22px !important;
}

/* Hide the incorrect down-arrows Telerik appends to terminal child links */
.AdaMenuContainer.RadPanelBar_Metro .rpGroup.rpLevel1 .rpItem .rpExpandHandle {
    background-color: transparent !important;
}

/* ==========================================================================
   4. ACCESSIBILITY HOVER, FOCUS & WEB RESOURCE SKIN COLORS
   ========================================================================== */
.AdaMenuContainer.RadPanelBar_Metro .rpLink:hover,
.AdaMenuContainer.RadPanelBar_Metro .rpLink:focus,
.AdaMenuContainer.RadPanelBar_Metro .rpLink.rpHovered {
    text-decoration: none !important;
    /*background-color: #f4f4f4 !important;*/
    /* Strict layout lock down during hover actions to prevent wide blowout */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    float: none !important;
    margin: 0 !important;
}

/* INTEGRATED: Isolated Root Header Hover color from Web Resource */
/*.AdaMenuContainer.RadPanelBar_Metro .rpLink:hover*/
.AdaMenuContainer.RadPanelBar_Metro
.rpGroup.rpLevel1 .rpItem .rpLink:hover {
    border-color: #cecece !important;
    color: #000 !important;
    background-color: #e7e7e7 !important;
}

/* Added to prevent Menu header backgrounds from changing */
/*.AdaMenuContainer rpLink rpRootLink rpExpandable rpExpanded {
	background-color: transparent !important;
}*/

/* INTEGRATED: Isolated Root Header Selected color (Metro Blue) from Web Resource */
.AdaMenuContainer.RadPanelBar_Metro .rpRootLink.rpSelected {
    border-color: #25a0da !important;
    color: #fff !important;
    background-color: #25a0da !important;
}

    /* Helper: Forces the dark chevron to turn white when the header is selected/blue */
    .AdaMenuContainer.RadPanelBar_Metro .rpRootLink.rpSelected .rpExpandHandle .p-icon {
        color: #fff !important;
    }

.AdaMenuContainer.RadPanelBar_Metro .rpLink:active {
    background-color: #e2e2e2 !important;
}

/* Text boundary engine to handle ellipsis string-clipping inside flex container */
.AdaMenuContainer.RadPanelBar_Metro .rpText {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
    flex-grow: 1 !important;
}
/* WCAG 2.4.7 – Visible keyboard focus indicator */
.AdaMenuContainer.RadPanelBar_Metro .rpLink:focus,
.AdaMenuContainer.RadPanelBar_Metro .rpLink:focus-visible {
    outline: 2px solid #0066cc !important;
    outline-offset: 3px !important;
    background-color: #e6f2ff !important;
}

/* Optional: if root headers are keyboard-focusable */
.AdaMenuContainer.RadPanelBar_Metro .rpRootLink:focus,
.AdaMenuContainer.RadPanelBar_Metro .rpRootLink:focus-visible {
    outline: 2px solid #0066cc !important;
    outline-offset: 3px !important;
    background-color: #e6f2ff !important;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

.skip-link:focus,
.skip-link:focus-visible {
        position: static;
        margin: 10px;
        padding: 8px 12px;
        background-color: #0066cc;
        color: #fff;
        font-size: 14px;
        text-decoration: none;
        border-radius: 4px;
    }
