/* custom css w bootstrap ui / iris app ui */
/*
:root {
    --mag-element-border-color: #00204d !important;
    --mag-element-border-muted-color: #00204d !important;
}
*/
.smoothness-theme .side-menu .menuItem-icon-and-name .mag-icon-link {opacity:0;}
#iris-app aside li a svg path[d*="M591.5 256c50-50 50-131 0-181"] {opacity: 0;} 

#sidebar-menu {
    --mag-nav-hover-bg-color: #0065e3;
    --mag-nav-active-bg-color: #0065e3;
}

/* .overflow-y-auto changes with R3, this affects iris. #sitebar changes not recoomended. */
#sidebar-menu > ul > li > a, .overflow-y-auto ul > li > a,
#sidebar-menu .dropdown ul.dropdown-menu > li > a {
font-family: "Open Sans", sans-serif;
opacity: 1;
font-size: 12px;
display: block;
width: 100%;
box-sizing: border-box;
}
/* Original sidebar values 26.2.2026
#sidebar-menu > ul > li > a, .overflow-y-auto ul > li > a, #sidebar-menu .dropdown ul.dropdown-menu > li > a 
{ opacity: 1;font-size: 12px; }
*/

/*remove underline */
#sidebar-menu > ul > li > a:hover,
.overflow-y-auto ul > li > a:hover,
#sidebar-menu .dropdown ul.dropdown-menu > li > a:hover {
    text-decoration: none;
}


/* sub menu CSS - IRIS */
/*.overflow-y-auto ul.space-y-1 > li > a.text-sm { font-size: 10px; }

/* menu + nested menu spacing, .overflow-y-auto is changing in R3, this is overriding product design */
#sidebar-menu .subdrop, .overflow-y-auto ul > li > ul > li { opacity: 1; }
/* remove margin-left: 5px; after patch, nolonger requird. */
#sidebar-menu .dropdown ul.dropdown-menu > li > a { margin-left: 0px;font-size: 12px; }


/* this targets all links in the portal. Is this intended? */
a:hover { text-decoration:none; }

/* this targets all text in the portal. Is this intended? */
main {
    padding-left: 0px !important;
    padding-right: 0px !important;
    padding-bottom: 0px !important;
    padding-top: 0px !important;
}

/* Main menu item hover */
.overflow-y-auto > div > ul > li > a:hover,
.overflow-y-auto > div > ul > li:hover > a {
    background-color: #0065e3 !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Active main menu item */
.overflow-y-auto > div > ul > li > a.bg-\[var\(--mag-nav-active-bg-color\)\] {
    background-color: #0065e3 !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Submenu item hover only */
.overflow-y-auto ul ul > li > a:hover,
.overflow-y-auto .dropdown-menu > li > a:hover {
    background-color: #0065e3 !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Prevent parent li from turning blue when hovering submenu */
.overflow-y-auto ul > li:hover {
    background-color: transparent !important;
}
.overflow-y-auto ul ul li > a {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* ============================================
   IRIS SIDEBAR
   applies to iris app pages only.
   Note: iris-* class names may change with
   future platform releases and will need to
   be reviewed and updated accordingly.
============================================ */

/* font, size and colour to match bootstrap sidebar */
#iris-app aside .iris-nav-link--smoothness,
#iris-app aside .iris-nav-link--smoothness span.iris-nav-menu-text {
    font-family: "Open Sans", sans-serif !important;
    font-size: 12px !important;
    line-height: 24px !important;
    opacity: 1 !important;
    color: var(--mag-nav-text-color, #ffffff) !important;
    font-weight: 500 !important;
}

/* icon colour to match nav text colour */
#iris-app aside .iris-nav-link--smoothness svg {
    color: var(--mag-nav-text-color, #ffffff) !important;
}

/* remove default gap between main nav items to match bootstrap */
#iris-app aside .iris-space-y-2 > li + li {
    margin-top: 0 !important;
}

/* main nav item hover - blue background to match bootstrap */
#iris-app aside li .iris-nav-link--smoothness:hover {
    background-color: #0065e3 !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

/* keep icon and text white on hover */
#iris-app aside li .iris-nav-link--smoothness:hover span,
#iris-app aside li .iris-nav-link--smoothness:hover svg {
    color: #ffffff !important;
}

/* active/current main nav item - blue background to match bootstrap */
#iris-app aside li .iris-nav-link--smoothness.active,
#iris-app aside li .iris-nav-link--smoothness.router-link-active,
#iris-app aside li .iris-nav-link--smoothness.router-link-exact-active {
    background-color: #0065e3 !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

/* keep icon and text white on active item */
#iris-app aside li .iris-nav-link--smoothness.active span,
#iris-app aside li .iris-nav-link--smoothness.router-link-active span,
#iris-app aside li .iris-nav-link--smoothness.router-link-exact-active svg {
    color: #ffffff !important;
}

/* nested submenu items - fix opacity, colour and spacing to match bootstrap */
/* bootstrap nested item: padding 8px 32px 8px 53px, line-height 20px, margin-bottom 4px */
#iris-app aside ul.iris-space-y-1 > li.iris-nav-sub-link {
    opacity: 1 !important;
    margin-bottom: 4px !important;
}

/* nested submenu link - font and colour to match bootstrap */
#iris-app aside ul.iris-space-y-1 > li.iris-nav-sub-link a.iris-nav-sub-link-text {
    color: #ffffff !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 12px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
}

/* nested submenu item hover - blue background to match bootstrap */
#iris-app aside ul.iris-space-y-1 > li.iris-nav-sub-link:hover {
    background-color: #0065e3 !important;
    opacity: 1 !important;
}

/* keep text white on nested submenu hover */
#iris-app aside ul.iris-space-y-1 > li.iris-nav-sub-link:hover a {
    color: #ffffff !important;
}



/* main content area top padding - matches bootstrap header height */
#iris-app main.iris-layout-body--smoothness {
    padding-top: 69px !important;
}

/* Ticket - 00024991 */
.p-tab-active { color: inherit; }

/* Ticket - 00024990 + 00024992 */
/*Moya : h1 { font-weight: normal; }*/
/*Pegah fixed*/
h1 { font-weight: 500; color: #00204D; }
#iris-app h1 { font-weight: 500 !important; color: #00204D !important; }

/* Ticket - 00024995 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--mag-page-bg-100) inset !important;
    box-shadow: 0 0 0 1000px var(--mag-page-bg-100) inset !important;
}

/* 1. Remove active styling from expanded parent folder */
#sidebar-menu > ul > li.dropdown > a.active.subdrop {
    background: transparent !important;
    color: var(--mag-nav-text-color) !important;
}

/* 2. Add active styling to submenu items */
#sidebar-menu .dropdown-menu > li.active > a,
#sidebar-menu .dropdown-menu > li > a.active {
    background-color: var(--mag-nav-active-bg-color) !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

/* 3. Preserve active styling for normal top-level pages (no submenu) */
#sidebar-menu > ul > li > a.active:not(.subdrop) {
    background: var(--mag-nav-active-bg-color) !important;
    color: var(--mag-nav-text-color) !important;
    opacity: 1 !important;
}

/* 4. Iris submenu active state */
/* Fix: Highlight the active submenu item in Iris */
#iris-app aside ul.iris-space-y-1 > li.iris-nav-sub-link.iris-opacity-100 {
    background-color: #0065e3 !important;
    opacity: 1 !important;
}
#iris-app aside ul.iris-space-y-1 > li.iris-nav-sub-link.iris-opacity-100 a {
    color: #ffffff !important;
}

/* 5. Submenu hover consistency */
#sidebar-menu .dropdown-menu > li > a:hover {
    background-color: var(--mag-nav-hover-bg-color) !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Fix: Remove active highlight from expanded parent folder in Iris */
#iris-app aside li .iris-nav-link--smoothness.active:has(+ ul) {
    background-color: transparent !important;
    opacity: 1 !important;
}

#iris-app aside ul.iris-space-y-1 > li.iris-nav-sub-link.iris-opacity-100 a {
    color: #ffffff !important;
    opacity: 1 !important;
}

/*Scroll bar in Iris app +JS code */
#iris-app aside .iris-overflow-y-auto {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#iris-app aside .iris-overflow-y-auto::-webkit-scrollbar {
  display: none;
}

/* Sub-item: make the whole row clickable, like bootstrap */
#iris-app aside ul.iris-space-y-1 > li.iris-nav-sub-link {
    padding: 0 !important;
}
#iris-app aside ul.iris-space-y-1 > li.iris-nav-sub-link a.iris-nav-sub-link-text {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto;
    padding: 8px 12px 8px 53px;
    box-sizing: border-box;
}

#iris-app aside .iris-nav-link--smoothness svg.iris-transition-transform {
    width: 0.85rem !important;
    height: 0.85rem !important;
    transition-duration: 0.15s !important;
    transition-timing-function: ease !important;
}

#iris-app aside .iris-transition-expand-enter-from,
#iris-app aside .iris-transition-expand-leave-to {
    opacity: 1 !important;   /* bootstrap slide has no fade */
}

#iris-app aside .iris-transition-expand-enter-active,
#iris-app aside .iris-transition-expand-leave-active {
    transition-duration: 1s !important;
}