/* === COLOR VARIABLES === */
:root {
    --primary: #1ab394;
    --primary-hover: #18a689;
    --danger: #ed5565;
    --warning: #f8ac59;
    --success: #1c84c6;
    --info: #23c6c8;
    --dark: #2f4050;
    --darker: #293846;
    --light: #f3f3f4;
    --lighter: #f9f9f9;
    --text-dark: #262626;
    --active-line-color: var(--primary); /* Color for the active/hover bottom line */
    --active-line-height: 5px; /* Increased height of the bottom line */
    --active-line-radius: 3px; /* Rounded top corners for elliptical shape */
}

/* === BODY & CORE LAYOUT === */
body {
    padding-top: 50px !important;
}

/* === NAVBAR BASE STYLES === */
.navbar-static-top,
.navbar-fixed-top {
    min-height: 50px !important;
    background-color: #2f4050 !important; /* Explicitly set dark background */
    margin-bottom: 0;
    border-bottom: none;
    z-index: 1030;
}

.white-bg .navbar-static-top,
.white-bg .navbar-fixed-top {
    background-color: #2f4050 !important; /* Force dark background even in white-bg containers */
}

.navbar-header {
    height: 50px;
    display: flex;
    align-items: center;
}

.navbar-brand {
    height: 50px;
    padding: 15px;
    line-height: 20px;
}

.navbar-toggle {
    padding: 9px 10px;
    margin: 8px 15px 8px 0;
    background-color: transparent;
    border: none;
}

.navbar-toggle .fa {
    font-size: 20px;
    color: #ffffff;
}

/* === NAVBAR LINKS - COMMON STYLES === */
.navbar-nav,
.navbar-top-links {
    margin: 0;
}

.navbar-nav > li,
.navbar-top-links > li {
    height: 50px !important;
    display: flex;
    align-items: center;
    position: relative; /* Added for bottom line positioning */
}

.navbar-nav > li > a,
.navbar-top-links > li > a,
.navbar-right > li > a {
    padding: 0 8px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    color: #ffffff !important;
    font-weight: 300 !important;
    letter-spacing: 0.3px !important;
    line-height: 20px !important;
    position: relative;
    overflow: visible; /* Changed from hidden to visible to show the bottom line */
}

/* Add bottom line indicator for active and hover states */
.navbar-nav > li::after,
.navbar-top-links > li::after,
.navbar-right > li::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%; /* Start at 10% from left edge for elliptical shape */
    width: 0;
    height: var(--active-line-height);
    background-color: var(--active-line-color);
    transition: width 0.3s ease;
    z-index: 1031; /* Ensure the line is visible above other elements */
    border-radius: var(--active-line-radius) var(--active-line-radius) 0 0; /* Rounded top corners */
    /* Make 'pill' shape by starting with 0 width and growing to 80% */
    max-width: 80%; 
}

.navbar-nav > li.active::after,
.navbar-top-links > li.active::after,
.navbar-right > li.active::after,
.navbar-nav > li.open::after,
.navbar-top-links > li.open::after,
.navbar-right > li.open::after {
    width: 80%; /* Show partial width bottom line for elliptical shape */
}

.navbar-nav > li:hover::after,
.navbar-top-links > li:hover::after,
.navbar-right > li:hover::after {
    width: 80%; /* Show partial width bottom line for elliptical shape */
}

/* Apply styling to any element with active class or ng-class applied */
[class*="active"] > li,
li[class*="active"],
.active {
    background-color: transparent !important;
}

/* Text container for potentially overflowing text */
.menu-text-container {
    display: inline !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* === ICON STYLING === */
.navbar-nav .fa, 
.navbar-nav .fas, 
.navbar-nav .far, 
.navbar-nav .fab,
.navbar-top-links .fa,
.navbar-top-links .fas,
.navbar-top-links .far,
.navbar-top-links .fab,
.navbar-right .fa,
.navbar-right .fas,
.navbar-right .far,
.navbar-right .fab,
.dropdown-menu .fa,
.dropdown-menu .fas,
.dropdown-menu .far,
.dropdown-menu .fab {
    margin-right: 4px !important; /* Reduced from 8px to 4px - half the spacing */
    font-size: 14px !important;
    min-width: 16px !important;
    text-align: center !important;
    pointer-events: none;
}

/* === MAIN NAVIGATION ICONS - EXTRA SPACING === */
/* Special styling for main navigation icons to have slightly more spacing */
.navbar-nav > li > a > .nav-icon,
.navbar-nav > li > a > i.nav-icon {
    margin-right: 5px !important; /* Reduced from 10px to 5px - half the spacing */
    font-size: 15px !important; /* Slightly larger for better visibility */
}

/* === NAVIGATION CARET ICONS === */
/* Special styling for dropdown caret icons */
.navbar-nav .nav-caret,
.navbar-nav .fa-chevron-down,
.navbar-right .caret,
.navbar-right .fa-chevron-down {
    margin-left: 3px !important; /* Reduced from 6px to 3px - half the spacing */
    margin-right: 0 !important; /* No space after caret */
    font-size: 12px !important; /* Smaller size for carets */
}

/* === HOVER & ACTIVE STATES === */
/* Modified to remove background color changes on hover/active and instead use the bottom line indicator */
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus,
.navbar-nav > li.active > a,
.navbar-nav > li.open > a,
.navbar-top-links > li > a:hover,
.navbar-top-links > li > a:focus,
.navbar-top-links > li.active > a,
.navbar-top-links > li.open > a,
.navbar-right > li > a:hover,
.navbar-right > li > a:focus,
.navbar-right > li.active > a,
.navbar-right > li.open > a {
    background-color: transparent !important; /* Force transparent background */
    color: #ffffff !important; /* Keep white text */
}

/* Override any ng-class or other directives that might add background */
.navbar-nav > li,
.navbar-nav > li.active,
.navbar-nav > li.open,
.navbar-top-links > li,
.navbar-top-links > li.active,
.navbar-top-links > li.open,
.navbar-right > li,
.navbar-right > li.active,
.navbar-right > li.open {
    background-color: transparent !important;
}

.nav .open > a, 
.nav .open > a:hover, 
.nav .open > a:focus {
    background-color: transparent !important; /* No background color change for open dropdowns */
    color: #ffffff !important; 
    border-color: transparent;
}

/* Special case for dropdown toggles when open - need to show the bottom line */
.navbar-nav > li.open::after,
.navbar-top-links > li.open::after,
.navbar-right > li.open::after {
    width: 100%; /* Show bottom line when dropdown is open */
}

/* Fix for elements with ng-class directive that adds active class */
.navbar-nav > li[ng-class*="active"],
.navbar-top-links > li[ng-class*="active"],
.navbar-right > li[ng-class*="active"] {
    background-color: transparent !important;
}

/* Ensure all dropdown-toggle elements are properly overridden */
.dropdown-toggle,
.dropdown-toggle:hover,
.dropdown-toggle:focus,
a.dropdown-toggle.active,
li.active > a.dropdown-toggle {
    background-color: transparent !important;
}

/* === DROPDOWN MENUS - COMMON STYLES === */
.dropdown-toggle {
    cursor: pointer;
}

.dropdown-menu {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background-color: #2f4050 !important; /* Fixed dark background */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3) !important;
    min-width: 280px !important; /* Increased from 220px */
    max-width: 450px !important; /* Increased from 380px */
    z-index: 1050 !important;
    top: 100% !important;
    max-height: none !important;
    overflow-y: visible !important;
}

.dropdown-menu > li {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #2f4050 !important; /* Fixed dark background */
    position: relative; /* Added for possible hover effects */
}

.dropdown-menu > li > a {
    padding: 10px 14px !important; /* Increased padding */
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background-color: #2f4050 !important; /* Fixed dark background */
    color: #e0e0e0 !important;
    transition: background-color 0.2s, color 0.2s;
    line-height: 1.5 !important; /* Increased from 1.4 */
    font-weight: 300 !important;
    white-space: normal !important; /* Changed from nowrap */
    word-wrap: break-word !important;
    letter-spacing: 0.3px !important;
    position: relative; /* Added for hover indicator */
}

/* Add left border indicator for dropdown menu items on hover/active */
.dropdown-menu > li > a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 25%; /* Start at 25% from top for pill shape */
    height: 50%; /* 50% height for a pill shape */
    width: 0;
    background-color: var(--active-line-color);
    transition: width 0.2s ease;
    border-radius: 0 var(--active-line-radius) var(--active-line-radius) 0; /* Rounded right corners */
}

.dropdown-menu > li > a:hover::before,
.dropdown-menu > li > a:focus::before,
.dropdown-menu > li.active > a::before {
    width: 5px; /* Width of the vertical line indicator on hover/active */
}

.dropdown-menu > li > a span {
    display: inline !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > li.active > a {
    background-color: #293846 !important; /* Subtle background change for dropdown items */
    color: #ffffff !important;
}

.open > .dropdown-menu {
    display: block !important;
}

/* === SUBMENU STYLES === */
.dropdown-submenu {
    position: relative !important;
}

.dropdown-submenu > a {
    padding-right: 30px !important; /* Increased from 25px */
    position: relative !important;
    white-space: normal !important; /* Changed from nowrap */
    word-wrap: break-word !important;
}

.dropdown-submenu > a span {
    display: inline !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.dropdown-submenu > a:after {
    display: block;
    content: "";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #cccccc;
    margin-top: 5px;
    margin-right: -5px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.dropdown-submenu:hover > a:after,
.dropdown-submenu:focus > a:after {
    border-left-color: #ffffff;
}

.dropdown-submenu > .dropdown-menu {
    position: absolute !important;
    top: 0 !important;
    left: 100% !important;
    margin-top: -1px !important;
    margin-left: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2) !important;
    display: none !important;
    min-width: 280px !important; /* Increased from 240px */
    max-height: 90vh; /* 90% of viewport height */
    overflow-y: auto !important;
}

/* Additional styling for a smoother scrollbar */
.dropdown-submenu > .dropdown-menu::-webkit-scrollbar {
    width: 6px;
}

.dropdown-submenu > .dropdown-menu::-webkit-scrollbar-track {
    background: #2f4050;
}

.dropdown-submenu > .dropdown-menu::-webkit-scrollbar-thumb {
    background: #1ab394;
    border-radius: 3px;
}

/* Ensure the dropdown submenu doesn't go out of viewport on desktop */
@media (min-width: 992px) {
    .dropdown-submenu > .dropdown-menu {
        max-height: calc(100vh - 80px); /* Viewport height minus some padding */
        overflow-y: auto !important;
    }
    
    /* Special handling for SPIRI2 submenu since it's particularly tall */
    li.dropdown-submenu:has(a:contains("SPIRI2")) > .dropdown-menu,
    li.dropdown-submenu:has(a:contains("change_of_appropriation")) > .dropdown-menu {
        max-height: calc(100vh - 60px);
    }
}

/* Better mobile handling */
@media (max-width: 767px) {
    .dropdown-submenu > .dropdown-menu {
        max-height: none; /* On mobile, submenus are already part of the scrollable area */
        overflow-y: visible !important;
    }
}

.dropdown-submenu:hover > .dropdown-menu,
.dropdown-submenu:focus > .dropdown-menu {
    display: block !important;
}

/* === GREEN DIVIDER STYLING === */
.pd-horizontal-divider {
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #1ab394 !important;
    border-left: 10px solid #2f4050 !important;
    border-right: 10px solid #2f4050 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: hidden !important;
}

li.pd-horizontal-divider {
    background-color: transparent !important;
    height: 1px !important;
    overflow: visible !important;
    position: relative !important;
    margin: 3px 0 !important;
}

li.pd-horizontal-divider:after {
    content: "";
    position: absolute;
    height: 1px;
    left: 10px;
    right: 10px;
    top: 0;
    background-color: #1ab394;
}

/* === RIGHT SIDE MENU STYLES === */
.navbar-right {
    display: flex !important;
    align-items: center !important;
    height: 50px !important;
    margin-right: 0 !important;
}

.navbar-right > li {
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
}

.navbar-right .dropdown-menu {
    right: 0 !important;
    left: auto !important;
    min-width: 280px !important; /* Increased from 200px */
}

.navbar-right .dropdown-submenu > .dropdown-menu {
    left: auto !important;
    right: 100% !important;
}

/* Budget menu specific */
.navbar-right li.dropdown[ng-if="main.active_aplication === 'budget'"] .dropdown-menu,
.navbar-right li[ng-if="main.active_aplication === 'budget' || main.active_aplication === 'portal'"] .dropdown-menu {
    min-width: 280px !important; /* Increased from 220px */
}

/* User menu specific */
.navbar-right li.dropdown:last-child .dropdown-menu {
    min-width: 180px !important;
}

/* Notification styles */
.navbar-right .count-info,
.navbar-top-links .count-info {
    position: relative;
    padding-right: 15px !important;
}

.navbar-right .label,
.navbar-top-links .label {
    position: absolute;
    top: 8px;
    right: 0;
    font-size: 10px;
    padding: 2px 5px;
}

/* Language menu specific */
.navbar-right .dropdown-menu img,
.navbar-top-links .dropdown-menu img {
    vertical-align: middle;
    max-height: 16px;
    margin-right: 8px;
}

.pd-vertical-divider-10px {
    width: 10px;
    height: auto;
    display: inline-block;
}

/* Organization name in dropdown */
.org-name {
    white-space: normal !important;
    word-wrap: break-word !important;
    display: inline !important;
}

/* Notification menu styling */
.navbar-nav > .notifications-menu > .dropdown-menu,
.navbar-nav > .messages-menu > .dropdown-menu,
.navbar-nav > .tasks-menu > .dropdown-menu,
.navbar-top-links .notifications-menu .dropdown-menu,
.navbar-top-links .messages-menu .dropdown-menu,
.navbar-top-links .tasks-menu .dropdown-menu {
    width: 300px !important;
}

/* === NOTIFICATION MENU SPECIFICS === */
.navbar-nav > .notifications-menu > .dropdown-menu > li.header,
.navbar-nav > .messages-menu > .dropdown-menu > li.header,
.navbar-nav > .tasks-menu > .dropdown-menu > li.header,
.navbar-top-links .notifications-menu .dropdown-menu > li.header,
.navbar-top-links .messages-menu .dropdown-menu > li.header,
.navbar-top-links .tasks-menu .dropdown-menu > li.header {
    border-radius: 4px 4px 0 0;
    background-color: #2f4050 !important;
    padding: 7px 10px;
    border-bottom: 1px solid #f4f4f4;
    color: #e0e0e0;
    font-size: 14px;
    font-weight: 300 !important;
    letter-spacing: 0.3px !important;
}

.navbar-nav > .notifications-menu > .dropdown-menu > li.footer > a,
.navbar-nav > .messages-menu > .dropdown-menu > li.footer > a,
.navbar-nav > .tasks-menu > .dropdown-menu > li.footer > a,
.navbar-top-links .notifications-menu .dropdown-menu > li.footer > a,
.navbar-top-links .messages-menu .dropdown-menu > li.footer > a,
.navbar-top-links .tasks-menu .dropdown-menu > li.footer > a {
    border-radius: 0 0 4px 4px;
    font-size: 12px;
    background-color: #2f4050 !important;
    padding: 7px 10px;
    border-bottom: 1px solid #2f4050 !important;
    color: #e0e0e0;
    text-align: center;
}

.navbar-nav > .notifications-menu > .dropdown-menu > li .menu,
.navbar-nav > .messages-menu > .dropdown-menu > li .menu,
.navbar-nav > .tasks-menu > .dropdown-menu > li .menu,
.navbar-top-links .notifications-menu .dropdown-menu > li .menu,
.navbar-top-links .messages-menu .dropdown-menu > li .menu,
.navbar-top-links .tasks-menu .dropdown-menu > li .menu {
    max-height: 200px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: hidden;
}

.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a,
.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a,
.navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a,
.navbar-top-links .notifications-menu .dropdown-menu > li .menu > li > a,
.navbar-top-links .messages-menu .dropdown-menu > li .menu > li > a,
.navbar-top-links .tasks-menu .dropdown-menu > li .menu > li > a {
    display: block;
    white-space: normal;
    word-wrap: break-word;
    border-bottom: 1px solid #f4f4f4;
    padding: 8px 10px;
}

/* Notification menu text overflow handling */
.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a div,
.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a div,
.navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a div,
.navbar-top-links .notifications-menu .dropdown-menu > li .menu > li > a div,
.navbar-top-links .messages-menu .dropdown-menu > li .menu > li > a div,
.navbar-top-links .tasks-menu .dropdown-menu > li .menu > li > a div {
    white-space: normal;
    word-wrap: break-word;
    overflow: visible;
}

/* === ANIMATIONS === */
.animated {
    animation-duration: 0.2s;
    animation-fill-mode: both;
}

.fadeInRight {
    animation-name: fadeInRight;
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* === SPECIAL POSITIONING FOR SPIRI2 MENU === */
/* Make SPIRI2 menu start higher and get more vertical space */
li.dropdown-submenu:has(a:contains("SPIRI2")) > .dropdown-menu,
li.dropdown-submenu:has(a:contains("change_of_appropriation")) > .dropdown-menu {
    position: fixed !important; /* Position relative to viewport */
    top: 50px !important; /* Start right below the navbar */
    left: auto !important; /* Don't change horizontal position */
    max-height: calc(100vh - 60px) !important; /* Almost full viewport height */
}

/* Scrollbar styling for SPIRI2 */
li.dropdown-submenu:has(a:contains("SPIRI2")) > .dropdown-menu::-webkit-scrollbar,
li.dropdown-submenu:has(a:contains("change_of_appropriation")) > .dropdown-menu::-webkit-scrollbar {
    width: 10px !important;
    background-color: #2f4050 !important;
}

li.dropdown-submenu:has(a:contains("SPIRI2")) > .dropdown-menu::-webkit-scrollbar-thumb,
li.dropdown-submenu:has(a:contains("change_of_appropriation")) > .dropdown-menu::-webkit-scrollbar-thumb {
    background-color: #1ab394 !important;
    border-radius: 5px !important;
}

/* Fix for user icon button in navbar */
.navbar-right li.dropdown > a,
.navbar-top-links li.dropdown > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 50px !important;
    padding: 0 12px !important;
    color: #ffffff !important;
    transition: background-color 0.2s ease !important;
}

/* Force transparent background for all dropdown states */
.navbar-right li.dropdown > a:hover,
.navbar-top-links li.dropdown > a:hover,
.navbar-right li.dropdown.open > a,
.navbar-top-links li.dropdown.open > a,
.navbar-right li.dropdown,
.navbar-top-links li.dropdown,
.navbar-right li.dropdown.active,
.navbar-top-links li.dropdown.active {
    background-color: transparent !important; /* Force transparent background */
    color: #ffffff !important;
}

/* Specific styling for user icon */
.navbar-right li.dropdown > a > i.fa-user,
.navbar-top-links li.dropdown > a > i.fa-user {
    font-size: 18px !important;
    margin-right: 0 !important;
}

/* === RESPONSIVE STYLES === */
@media (min-width: 992px) {
    .dropdown-menu {
        min-width: 320px !important;
        max-width: 500px !important;
    }
    
    .dropdown-submenu > .dropdown-menu {
        min-width: 320px !important;
    }
    
    .scroll-300 { 
        max-height: 500px; 
        overflow-y: auto; 
    }
    
    /* Enable hover on desktop */
    .dropdown:hover > .dropdown-menu {
        display: block;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .navbar-nav > li > a,
    .navbar-top-links > li > a,
    .navbar-right > li > a {
        padding: 0 5px !important;
    }
    
    .dropdown-menu {
        min-width: 300px !important; /* Slightly smaller on tablets */
    }
    
    .dropdown-submenu > .dropdown-menu {
        min-width: 300px !important;
    }
    
    .table-responsive { 
        overflow-x: auto; 
    }
}

@media (max-width: 767px) {
    /* Mobile navigation structure */
    .navbar-header {
        float: none;
    }
    
    .navbar-toggle {
        display: block;
    }
    
    .navbar-collapse.collapse {
        display: none !important;
    }
    
    .navbar-collapse.collapse.in {
        display: block !important;
        overflow-y: auto !important;
        max-height: calc(100vh - 50px);
    }
    
    .navbar-nav {
        float: none !important;
        margin: 7.5px -15px;
    }
    
    .navbar-nav > li {
        float: none;
        display: block;
        height: auto !important;
    }
    
    .navbar-nav > li > a {
        padding: 10px 15px !important;
        height: auto !important;
        line-height: 20px !important;
    }

    /* Mobile hover/active style - use left border instead of bottom */
    .navbar-nav > li::after {
        display: none; /* Hide bottom line */
    }
    
    .navbar-nav > li > a::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 0;
        background-color: var(--active-line-color);
        transition: width 0.2s ease;
    }
    
    .navbar-nav > li.active > a::before,
    .navbar-nav > li:hover > a::before,
    .navbar-nav > li.open > a::before {
        width: 3px; /* Width of the line indicator */
    }

    /* Mobile dropdown styling */
    .dropdown-menu {
        position: static !important;
        float: none;
        width: 100% !important;
        margin-top: 0;
        box-shadow: none;
        background-color: #293846 !important;
        max-width: none !important;
    }
    
    /* Mobile submenu styling */
    .dropdown-submenu > .dropdown-menu {
        position: static !important;
        left: 0 !important;
        margin-left: 15px !important;
        border-left: 2px solid var(--primary) !important;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
    }
    
    /* Mobile submenu arrow */
    .dropdown-submenu > a:after {
        transform: rotate(90deg);
        right: 15px;
        top: 15px;
    }
    
    /* Adjust dividers on mobile */
    .pd-horizontal-divider {
        margin-left: 15px !important;
        margin-right: 15px !important;
    }
    
    /* Mobile dropdown item padding */
    .navbar-nav .dropdown-menu > li > a {
        padding: 10px 15px 10px 25px !important;
        width: 100% !important;
    }
    
    /* Mobile right menu */
    .navbar-right {
        float: right !important;
        margin-right: 10px !important;
    }
    
    /* Keep bottom indicator for top-level right menu items */
    .navbar-right > li::after {
        display: block;
    }
    
    .navbar-right > li > a,
    .navbar-right .dropdown-toggle {
        padding: 0 5px !important;
    }
    
    .navbar-right .label {
        font-size: 9px;
        padding: 1px 4px;
        top: 6px;
    }
    
    .navbar-right .dropdown-menu {
        position: absolute !important;
        right: 0 !important;
        left: auto !important;
        float: none !important;
        width: auto !important;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* Reset SPIRI2 positioning on mobile */
    li.dropdown-submenu:has(a:contains("SPIRI2")) > .dropdown-menu,
    li.dropdown-submenu:has(a:contains("change_of_appropriation")) > .dropdown-menu {
        position: static !important;
        top: auto !important;
        left: auto !important;
        max-height: none !important;
    }
}

@media (max-width: 480px) {
    .page-heading h2 { 
        font-size: 20px; 
    }
    
    .wrapper-content { 
        padding: 15px 10px; 
    }
    
    .navbar-brand { 
        padding: 8px 10px; 
    }
}

/* === SMART TABLE STICKY HEADER === */
table.stick-header {
    position: relative;
}

table.stick-header thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #f5f5f5;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

table.stick-header thead.sortable th {
    position: sticky;
    top: 34px; /* Height of first header row */
    z-index: 2;
}

/* === TEXT & LAYOUT UTILITIES === */
/* Text colors */
.text-navheader, .pd-color-primary, .pd-primary-foreground { color: var(--primary) !important; }
.pd-text-color-black, .pd-font-color-black, .pd-black-foreground { color: #000000 !important; }
.pd-text-color-red, .pd-font-color-red, .pd-color-red, .pd-icon-color-red { color: red !important; }
.pd-color-gray { color: gray !important; }
.pd-font-color-green { color: green !important; }
.pd-font-color-whitesmoke, .pd-white-foreground { color: whitesmoke !important; }
.pd-icon-color-darkorange { color: darkorange !important; }
.pd-color-danger { color: var(--danger) !important; }

/* Text alignment */
.pd-txt-horizontal-center { text-align: center !important; }
.pd-txt-horizontal-right { text-align: right !important; }
.pd-txt-horizontal-left { text-align: left !important; }

/* Font styles */
.pd-font-weight-bold, .pd-font-bold { font-weight: bold !important; }
.pd-font-bolder { font-weight: bolder !important; }
.pd-font-size-8 { font-size: 8px !important; }
.pd-font-size-9 { font-size: 9px !important; }
.pd-font-size-12 { font-size: 12px !important; }
.pd-app-version { font-size: x-small !important; }

/* Layout utilities */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.m-0 { margin: 0 !important; }
.mr-2 { margin-right: 0.5rem !important; }

/* Reduced spacing */
.reduced-spacing .panel { margin-bottom: 0.5rem !important; }
.reduced-spacing .ibox-title { padding: 5px !important; min-height: auto !important; }
.reduced-spacing .ibox-content { padding-top: 5px !important; padding-bottom: 5px !important; }
.panel-body { padding: 5px !important; }
.position-form { margin-bottom: 0 !important; }

/* Padding utilities */
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }

/* Scroll utilities */
.scroll-100, .scroll-150, .scroll-200, .scroll-250, .scroll-300, 
.scroll-350, .scroll-400, .scroll-450, .scroll-500 {
    overflow-y: auto;
}
.scroll-100 { height: 100px; }
.scroll-150 { height: 150px; }
.scroll-200 { height: 200px; }
.scroll-250 { height: 250px !important; }
.scroll-300 { height: 300px; }
.scroll-350 { height: 350px; }
.scroll-400 { height: 400px; }
.scroll-450 { height: 450px; }
.scroll-500 { height: 500px; }

/* Table utilities */
.tableNoMarginBottom { width: 100%; max-width: 100%; margin: 0px; }
.table > tbody > tr > td { color: black; }
.table > tbody > tr:hover { background-color: var(--primary); color: white; }

.tableNoPadding > thead > tr > th,
.tableNoPadding > tbody > tr > th,
.tableNoPadding > tfoot > tr > th,
.tableNoPadding > thead > tr > td,
.tableNoPadding > tbody > tr > td,
.tableNoPadding > tfoot > tr > td {
    padding: 6px 4px !important;
    vertical-align: middle;
}

/* SmartTable styles */
.sortable { cursor: pointer; }
.st-sort-default:before { content: '\25B1'; color: var(--primary); }
.st-sort-ascent:before { content: '\25B2'; color: var(--primary); }
.st-sort-descent:before { content: '\25BC'; color: var(--primary); }
.st-selected { background-color: var(--primary) !important; color: white; }

/* === IMPROVED ACTION BUTTONS === */
.action-column {
    width: 180px !important;
    min-width: 180px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* Keep buttons in a single row with better spacing */
.action-buttons-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 5px !important;
    min-width: 120px !important;
}

/* Default button styling */
.action-buttons-container .btn {
    padding: 4px 8px !important;
    margin: 0 !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-width: 30px !important;
    height: 28px !important;
    border-radius: 4px !important;
}

/* Button icons */
.action-buttons-container .btn i {
    margin: 0 !important;
    font-size: 14px !important;
}

/* Make buttons larger on mobile */
@media (max-width: 767px) {
    .action-column {
        width: 200px !important;
        min-width: 200px !important;
    }
    
    .action-buttons-container {
        gap: 8px !important;
    }
    
    .action-buttons-container .btn {
        padding: 8px 10px !important;
        min-width: 38px !important;
        height: 36px !important;
    }
    
    .action-buttons-container .btn i {
        font-size: 16px !important;
    }
}

/* For medium screens */
@media (min-width: 768px) and (max-width: 1199px) {
    .action-column {
        width: 160px !important;
        min-width: 160px !important;
    }
    
    .action-buttons-container {
        gap: 4px !important;
    }
    
    .action-buttons-container .btn {
        padding: 4px 7px !important;
        min-width: 28px !important;
        height: 28px !important;
    }
}


/* White background nav - ensure dark navbar with white-bg container */
.white-bg .navbar-static-top,
.white-bg .navbar-fixed-top {
    background-color: #2f4050 !important;
}

/* === TABS === */
.top-navigation .nav-tabs > li > a {
    background-color: #ffffff;
    padding: 15px 20px;
    color: var(--dark);
}

.top-navigation .nav-tabs > li a:hover,
.top-navigation .nav-tabs > li a:focus {
    background: var(--primary);
    color: white;
}

.top-navigation .nav-tabs > li.active {
    background: #ffffff;
    border: none;
}

.top-navigation .nav-tabs > li.active > a {
    background: white;
    color: var(--primary);
}

/* === PANELS === */
.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.panel-default {
    border-color: #ddd;
}

.panel-default > .panel-heading {
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
}

.panel-danger {
    border-color: #ed5565;
}

.panel-danger > .panel-heading {
    color: #fff;
    background-color: #ed5565;
    border-color: #ed5565;
}

/* Ensure consistent overflow handling */
.pd-no-vertical-scroll {
    overflow-y: hidden !important;
}

.pd-word-wrap {
    vertical-align: bottom;
    height: 300px;
    overflow-y: scroll;
    background-color: var(--dark);
}

.pd-word-wrap .dropdown-menu {
    max-height: 300px;
    overflow-y: auto;
    width: auto;
}

/*  Modal  */ 
.modal-pd-lg {
    width: 90%;
}

.pd-modal-body {
  max-height: 600px;
  padding: 15px;
  overflow-y: auto;
}

/* === UI-SELECT DROPDOWN STYLING === */
/* Apply to all ui-select dropdowns across the application */

/* Main dropdown container */
.ui-select-bootstrap .ui-select-choices-row > span,
.ui-select-bootstrap .ui-select-choices {
    background-color: #f5f5f5 !important;
    color: #333333 !important;
}

/* Hover and active state */
.ui-select-bootstrap .ui-select-choices-row.active > span {
    background-color: #e0e0e0 !important;
    color: #000000 !important;
    text-decoration: none;
}

/* Dropdown text */
.ui-select-bootstrap .ui-select-choices-row > span div {
    color: #333333 !important;
}

/* Highlighted search terms */
.ui-select-bootstrap .ui-select-choices-row > span .ui-select-highlight {
    color: #000000 !important;
    font-weight: bold !important;
    background-color: transparent !important;
}

/* Dropdown container */
.ui-select-bootstrap .dropdown-menu {
    background-color: #f5f5f5 !important;
    border: 1px solid #cccccc !important;
    max-height: 300px !important;
    overflow-y: auto !important;
}

/* Match box */
.ui-select-bootstrap .ui-select-match {
    background-color: #ffffff;
    color: #333333;
}

/* Ensure no dark background in any dropdown */
.ui-select-bootstrap .ui-select-choices-group,
.ui-select-bootstrap .ui-select-choices-group-label {
    background-color: #f5f5f5 !important;
    color: #333333 !important;
}

/* Fix for overflow text */
.ui-select-bootstrap .ui-select-choices-row > span div {
    white-space: normal;
    word-wrap: break-word;
}

/* Make sure dropdown appears above other elements */
.ui-select-bootstrap.open .dropdown-menu {
    z-index: 1060 !important;
}

/* ALERT COLORS */
.alert-danger {
    background-color: lightpink;
}

/* User header styling */
.dropdown-menu .user-header {
    background-color: #2f4050; /* Match the navbar dark background */
    padding: 15px 10px;
    text-align: center; /* Center all content */
}

.dropdown-menu .user-info {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center horizontally */
    justify-content: center; /* Center vertically */
}

.dropdown-menu .user-icon {
    margin-bottom: 10px;
    color: #1ab394; /* Primary color for the icon */
}

.dropdown-menu .user-icon i {
    display: block;
    margin: 0 auto 5px;
}

.dropdown-menu .user-info p {
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dropdown-menu .user-info p strong {
    display: block;
    width: 100%;
    margin-bottom: 5px;
    font-size: 16px;
    color: #ffffff;
    white-space: normal; /* Allow wrapping if name is long */
    line-height: 1.2;
}

.dropdown-menu .user-info p small {
    display: block;
    width: 100%;
    font-size: 12px;
    margin-bottom: 3px;
    color: #e0e0e0;
    line-height: 1.2;
}

.dropdown-menu .user-info p small.text-muted {
    color: #aaaaaa;
}