/*NOTES FOR ON PAGE CODE*/
/*Try to remove all inline styles if possible, they will conflict with the classes*/
/*Try to remove all the "xs, xl, lg..." tags, as they will set width for items which also causes some issues (will tackle mobile styles more in depth once desktop is crisp)*/
/*If examples of class implementation are needed, refer to "Entity Management", "User Management" pages, they have the new classes implemented on them*/


/*DISCLAIMER*/
/*These classes are not PERFECT, there may be cases where new classes need to be made, if that's the case, please note those areas so that Josh can create styles for them*/
/*Also please do not edit these classes, if there is an issue please let note them as a comment, or send a teams message to Josh so that he may edit/adjust the classes*/

/*This makes sure that the content on the page takes up all remaining space, which allows the pagination to stay on the bottom at all times*/
html,body,#app,.outerContainer,.mainContainer,.mud-main-content, .containerDiv{
    height: 100%;
}

/*Style key quick search (Used for Ctrl + F to search for different style groups) */

/*Main Container Styles*/
/*Heading Styles*/
/*Button Styles*/
/*Input Styles*/
/*Table Styles*/
/*Drawer Styles*/
/*Pagination Styles*/


/*Page Main Container Styles*/
.containerDiv{
    display: flex;
    flex-direction: column;
}

.body-content{
    flex-grow: 0;
    display: flex;
    flex-direction: column;
}
/*End of Page Main Container Styles*/



/*Page Heading Styles*/

.hrpm__heading-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 48px 0;
}

    .hrpm__heading--main {
        color: #4F4F50;
    }

/*End of Page Heading Styles*/


/*Page Button Styles*/
.hrpm__btn {
    padding: 8px 10px 8px 14px;
    border-radius: 10px;
    line-height: 0 !important;
    box-shadow: none !important;
    margin-inline: 0 !important;
}

    .hrpm__btn--main{
        background-color: #0095D3;
    }

    .hrpm_btn--outline:hover {
        background-color: #0095D3 !important;
        color: #FFF !important;
    }

.hrpm__btn--clear {
    color: #4F4F50 !important;
    background-color: #AFAFB2 !important;
}

.hrpm__btn .mud-button-label {
    font-size: 0.875rem !important;
    text-transform: none !important;
    line-height: 20px !important;
    font-weight: 500;
    letter-spacing: 0;
}

    .hrpm__btn .mud-button-label .mud-button-icon-end{
        margin-right: 0 !important;
    }

.hrpm__btn--order-2{
    order: 2;
}

.hrpm__btn--order-3 {
    order: 3;
}

.hrpm__btn--order-4 {
    order: 4;
}

.hrpm__btn--order-5 {
    order: 5;
}

.hrpm__btn-icon {
    padding: 5px;
    margin: 0;
    color: #4F4F50;
    border-radius: 10px !important;
    box-shadow: none !important;
}

    .hrpm__btn-icon:hover {
        background-color: rgba(0, 149, 210, 0.15) !important
    }

.hrpm__btn-icon--filter {
    padding: 0 !important;
    color: #8D8E90 !important;
    margin-left: 3px !important;
    margin-right: -6px !important;
}

.hrpm__btn-icon--col-filter {
}

.hrpm__btn-icon--search, .hrpm__btn-icon--col-filter {
    padding: 8px !important;
    color: #FFF !important;
    border-radius: 10px;
}

.hrpm__btn-icon--filter:hover {
    background-color: transparent !important;
}
 /*for create user button on person page*/
/* Ensure hover always shows the outline border (for filled & outlined variants) */
.hrpm_btn--outline[class*="-primary"]:hover,
.hrpm_btn--outline.mud-button-filled[class*="-primary"]:hover {
    background-color: white !important;
    color: var(--mud-palette-primary) !important;
    border: 1px solid var(--mud-palette-primary) !important;
    box-shadow: none !important;
}

.hrpm_btn--outline[class*="-error"]:hover,
.hrpm_btn--outline.mud-button-filled[class*="-error"]:hover {
    background-color: white !important;
    color: var(--mud-palette-error) !important;
    border: 1px solid var(--mud-palette-error) !important;
    box-shadow: none !important;
}

.hrpm_btn--outline[class*="-success"]:hover,
.hrpm_btn--outline.mud-button-filled[class*="-success"]:hover {
    background-color: white !important;
    color: var(--mud-palette-success) !important;
    border: 1px solid var(--mud-palette-success) !important;
    box-shadow: none !important;
}

/*End of Page Button Styles*/


/*Page Input Styles*/
.personmanagement__action-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px !important; 
    margin-right: -12px !important;
    margin-bottom: 8px;
}

    .personmanagement__action-container > * {
        display: inline-flex; 
        align-items: start;
    }

        .personmanagement__action-container > *:not(:first-child) {
            margin-left: 8px !important;
        }

    .personmanagement__action-container .hrpm__btn--order-5 {
        display: flex;
        align-items: center;
        gap: 8px !important;
    }

    .personmanagement__action-container .hrpm__btn-icon {
        margin-bottom: 0 !important; 
    }

    .personmanagement__action-container .hrpm__switch-item {
        margin: 0 !important;
    }
.hrpm__action-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px !important;
    margin-right: -12px !important;
    margin-bottom: 8px;
}

.hrpm__search-item{
    padding-left: 10px !important;
    width: 270px !important;
}

.hrpm__search-item--sized{
    max-width: 270px;
    margin-left: auto;
}

.hrpm__search-item svg {
    fill: #C9CACD !important;
}

.hrpm__switch-item .mud-switch {
    margin-right: 0 !important;
}

.hrpm__switch-item.hrpm__switch-item.hrpm__switch-item .mud-switch-base:hover {
    background-color: transparent !important;
}

.hrpm__input.hrpm__input.hrpm__input .mud-input {
    background-color: white !important;
    line-height: normal;
    border: 1px solid #E0E1E4 !important;
    transition: border-color 200ms ease;
    color: #4F4F50;
    border-radius: 10px !important; /* Changed from 4px to 10px */
    margin-top: 22px !important;
}

.hrpm__input--no-heading.hrpm__input--no-heading.hrpm__input--no-heading .mud-input {
    margin-top: 0 !important;
}

.hrpm__input.hrpm__input.hrpm__input .mud-input:hover {
    border-color: #0095D3 !important;
}

.hrpm__input.hrpm__input.hrpm__input .mud-input:focus-within {
    border-color: #0095D3 !important;
    border-width: 1px !important;
}

.hrpm__input .mud-input-adornment {
    font-size: 0.875em;
}

    .hrpm__input .mud-input-adornment button {
        font-size: 0.875em;
        padding: 5px;
        background-color: transparent !important;
        margin: 0;
    }

        .hrpm__input .mud-input-adornment button svg {
            font-size: 1em;
        }

.hrpm__input label {
    font-size: 18.5px !important;
    transform: translate(0, 1.5px) scale(0.75) !important;
    line-height: 20px !important;
}

.hrpm__input.hrpm__input.hrpm__input input, .hrpm__input.hrpm__input.hrpm__input textarea {
    border-radius: 4px !important;
    height: auto !important;
    padding: 8px !important;
    font-size: 14px !important;
    margin: 0 !important;
}

.mud-popover {
    margin-top: 5px !important;
    border-radius: 10px !important;
}

.hrpm__input-container {
    padding-top: 12px !important;
}

.hrpm__input-container--reduce-padding > div {
    gap: 6px !important;
}

.hrpm__input-wrapper {
    display: flex;
    align-items: flex-end;
}

/*End of Page Input Styles*/


/*Page Table Styles*/

.hrpm__table-container {
    border: 1px solid #E0E1E4;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.15);
}

    /* Remove border from table container when isMostRecent is true */
    .hrpm__table-container.no-header-border {
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        border-radius: 0 0 10px 10px !important;
        box-shadow: none !important;
        /* Optionally, remove background if needed */
    }

.hrpm__table-container--square-top{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 0 !important;
}

    .hrpm__table-container--square-top .mud-table-row{
        border-top: 0 !important;
    }

    .hrpm__table-header {
        background-color: #C9CACD;
        padding: 10px 16px;
        padding-right: 0;
        display: flex;
        align-items: center;
        color: #4F4F50 !important;
    }

.hrpm__table-heading--inner {
    display: flex;
    align-items: center;
}

.hrpm__table-heading {
    text-align: left;
}

.hrpm__table-heading--center {
    text-align: center;
}

.hrpm__table-heading--right {
    text-align: right;
}

.hrpm__table-container tr:has(.hrpm__table-heading){
    height: auto !important;
    line-height: 1.43 !important;
}

.hrpm__table-container th {
    background-color: #C9CACD !important;
    padding: 10px 16px !important;
    padding-right: 0;
    color: #4F4F50 !important;
    height: auto !important;
    line-height: 1.465 !important;
}

.hrpm__table-container .myTable{
    margin: 0 !important;
}

.hrpm__table-header p, .hrpm__table-heading p {
    font-weight: 600 !important;
}

    .hrpm__action-heading {
        text-align: center;
    }

.hrpm__button-container {
    margin-left: 10px;
}

.hrpm__table-header .hrpm__button-sort, .hrpm__table-header--no-flex .hrpm__button-sort, .hrpm__table-heading--inner .hrpm__button-sort {
    height: 10px;
    width: 10px;
}

.hrpm__table-header--no-flex .hrpm__button-container{
    transform: translateY(-3px);
}

.hrpm__table-row > div:first-child:hover {
    color: #0095D3;
    background: rgba(0, 149, 210, 0.1);
}

.hrpm__table-row > div, .hrpm__table .mud-table-row {
    border: 1px solid #E0E1E4;
    padding: 8px 16px 6px !important;
    padding-right: 0 !important;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    position: relative;
}

.hrpm__table-row .mud-treeview-item-arrow:is(:empty) {
    display: none;
}

.hrpm__table-row > div:hover > .mud-treeview-item-arrow button {
    color: #0095D3 !important;
}

.hrpm__table-row .mud-treeview-item-arrow button {
    padding: 0;
    transition: none !important;
}

    .hrpm__table-row .mud-treeview-item-arrow button:hover {
        background: rgba(0, 149, 210, 0.15) !important;
    }

    .hrpm__table-list > .hrpm__table-row > div > .mud-treeview-item-arrow:is(:not(:empty)) {
        position: absolute;
    }

    .hrpm__table-list > .hrpm__table-row > div > .mud-treeview-item-arrow:is(:not(:empty)) + div > div > p{
        position: relative;
        left: 45px;
    }

    .hrpm__table-row > .mud-collapse-container {
        padding: 0 !important;
        border: 0 !important;
    }

.hrpm__table-row .mud-button-root {
    color: #4F4F50 !important;
}

.hrpm__table-item{
    align-items: center;
}

.hrpm__table-container tr:has(.hrpm__table-cell){
    height: auto !important;
}

.hrpm__table-cell {
    height: auto !important;
    border: 1px solid #E0E1E4;
    padding: 9px 16px 9px !important;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    text-align: left !important;
}

.hrpm__table-cell--center {
    text-align: center !important;
}

.hrpm__table-cell--right {
    text-align: right !important;
}

    .hrpm__table-actions {
        text-align: center;
    }

.hrpm__table-actions button {
    padding: 0 !important;
    color: #4F4F50 !important;
    margin-inline: 4px !important;
}

    .hrpm__table-actions button:hover {
        background: rgba(0, 149, 210, 0.15) !important;
    }

    .hrpm__table-action-container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

        .hrpm__table-action-container .mud-icon-button:hover, .hrpm__heading-container .mud-icon-button:hover, .hrpm__action-container .mud-icon-button:hover {
            background: rgb(0, 121, 173) !important;
        }

        .hrpm__table-action-container button{
            padding: 0 !important;
        }

        .hrpm__table-list {
            border-radius: 0;
            border: 0;
            box-shadow: none;
        }

/*End of Page Table Styles*/


/*Page Drawer Styles*/
.mud-drawer {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden !important;
}
.hrpm__drawer-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: white;
    border-top: 10px solid #0095d3;
    background: transparent;
    align-items: center;
    padding-right: 21px;
    padding-top: 45px;
    padding-bottom: 20px;
}

.hrpm__drawer-heading {
    padding-left: 60px;
    text-transform: capitalize;
    line-height: 20px;
    font-style: normal;
    font-family: Poppins;
    color: #0095d3;
    font-weight: 600;
    font-size: 28px;
}

.hrpm__drawer-content {
    padding-inline: 41px;
    box-shadow: none !important;
    flex: 1 1 auto;
    padding-bottom: 12px;
}

    .hrpm__drawer-content .mud-card-content {
        padding: 0 !important;
    }
    hrpm__heading-container
    .hrpm__input .mud-input::before, .hrpm__input .mud-input:before, .hrpm__input .mud-input::after, .hrpm__input .mud-input:after {
        display: none;
    }

.hrpm__drawer-wrapper{
    width: 100%;
}
.hrpm__sticky-component {
    padding: 10px 0px;
    max-height: calc(100vh - 260px);
    overflow-y: auto;
    overflow-x: hidden;
    margin-right: -41px; 
    padding-right: 41px; 
    scrollbar-gutter: stable; 
    -webkit-overflow-scrolling: touch;
}
.hrpm__mudselect .mud-input {
    min-height: 40px !important;
    height: 40px !important;
    font-size: 14px !important;
    padding-left:10px !important;
    text-align:left !important;
}
.mud-popover .mud-list-item:hover,
.mud-popover .mud-list-item.mud-list-item-active {
    background-color: #a3d8f4 !important;
    color: #0095D3 !important;
}



/*End of Page Drawer Styles*/

.hrpm__btn-container {
    gap: 45px !important;
    margin-top: 24px;
    padding-top: 0 !important;
}

.hrpm__close-icon {
    position: absolute;
    top: 18px;      /* Adjust as needed for vertical alignment */
    right: 6px;    /* Adjust as needed for horizontal alignment */
    color: #0095d3;
    padding: 2px;
    z-index: 2;
}

    .hrpm__close-icon:hover {
        background-color: rgba(0, 149, 210, 0.15) !important
    }

.hrpm__tab-header > .mud-tabs-tabbar {
    margin-bottom: 20px !important;
    margin-inline: -60px !important;
}

/*Page Pagination Styles*/

.hrpm__pagination-container {
    position: relative;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    padding-bottom: 34px;
    padding-top: 34px;
    margin-top: auto;
}

.hrpm__pagination-button-container{
    text-align: center;
}

    .hrpm__pagination-button-container button{
        border-radius: 10px;
        border: 2px solid #0095D3;
        color: #0095D3;
        padding: 5px;
        min-width: 0 !important;
    }

        .hrpm__pagination-button-container button:disabled {
            background-color: #E0E1E4 !important;
            border: 2px solid #E0E1E4 !important;
            color: #8D8E90 !important;
        }

        .hrpm__pagination-button-container button:hover {
            background-color: #E0E1E4 !important;
        }

        .hrpm__notification {
            background-color: #0095D3 !important;
            margin: 0 !important;
            color: #FFF;
            font-weight: 600;
            padding: 10px 16px;
            border-radius: 10px;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            font-size: 14px;
        }

.hrpm__pagination-result.hrpm__pagination-result.hrpm__pagination-result {
    border: 2px solid #0095D3;
    color: #0095D3 !important;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    padding: 6px 16px;
    line-height: normal;
    height: 100%;
    text-transform: none !important;
}

/*End of Page Pagination Styles*/

.hrpm__notification p {
    font-weight: 600 !important;
}

div:has(> div > .hrpm__filter-container){
    border-radius: 10px !important;
}
.tight-popover {
    margin-top: -15px !important; /* reduce space between input and options */
    padding-top: 0 !important;
}