/* === 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;
}

/* === 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;
}

.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: hidden;
}

/* 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: 6px !important;
    font-size: 14px !important;
    min-width: 16px !important;
    text-align: center !important;
    pointer-events: none;
}

/* === HOVER & ACTIVE STATES === */
.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: var(--primary) !important;
    color: #ffffff !important;
}

.nav .open > a, 
.nav .open > a:hover, 
.nav .open > a:focus {
    background-color: var(--primary) !important;
    color: #ffffff !important;
    border-color: transparent;
}

/* Navbar header styling */
.navbar-header {
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0;
}

/* Toggle button styling */
.navbar-header .navbar-toggle {
    padding: 9px 10px;
    margin: 8px 15px 8px 0;
    background-color: transparent;
    border: none;
    transition: background-color 0.2s ease;
}

.navbar-header .navbar-toggle:hover,
.navbar-header .navbar-toggle:focus {
    background-color: rgba(255, 255, 255, 0.1);
}

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

/* Brand styling */
.navbar-header .navbar-brand {
    height: 50px;
    padding: 15px;
    display: flex;
    align-items: center;
    line-height: 20px;
}

.navbar-header .brand-link {
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    display: flex;
    align-items: baseline;
    transition: opacity 0.2s ease;
    cursor: pointer;
}

.navbar-header .brand-link:hover,
.navbar-header .brand-link:focus {
    opacity: 0.9;
    text-decoration: none;
}

.navbar-header .brand-text {
    font-size: 18px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

/* Cyrillic-specific: smaller font for more space */
:lang(sr-Cyrl) .navbar-header .brand-text,
[lang="sr-Cyrl"] .navbar-header .brand-text {
    font-size: 16px;
    max-width: 350px;
}

/* Navbar menu items - prevent wrapping for long text */
.navbar-nav li a span,
.dropdown-menu li a span {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
    vertical-align: middle;
}

/* TOP NAVIGATION BAR - Main menu items (Planiranje, Podešavanja, etc.) */
.navbar-nav .nav-label {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px; /* Smanjeno za ćirilicu */
    display: inline-block;
    vertical-align: middle;
    font-size: 13px; /* Globalno manji font */
}

/* Cyrillic-specific for menu items */
:lang(sr-Cyrl) .navbar-nav li a span,
:lang(sr-Cyrl) .dropdown-menu li a span,
[lang="sr-Cyrl"] .navbar-nav li a span,
[lang="sr-Cyrl"] .dropdown-menu li a span {
    font-size: 13px;
    max-width: 300px;
}

/* Cyrillic-specific for top nav labels */
:lang(sr-Cyrl) .navbar-nav .nav-label,
[lang="sr-Cyrl"] .navbar-nav .nav-label {
    font-size: 13px;
    max-width: 180px;
}

.navbar-header .brand-superscript {
    font-size: 11px;
    margin-left: 2px;
    position: relative;
    top: -6px;
    font-weight: 400;
}

/* Responsive styles */
@media (max-width: 767px) {
    .navbar-header {
        width: 100%;
        justify-content: space-between;
    }
    
    .navbar-header .navbar-brand {
        padding: 15px 10px;
    }
    
    .navbar-header .brand-text {
        font-size: 16px;
    }
}

/* High contrast and accessibility */
@media (forced-colors: active) {
    .navbar-header .brand-link:focus {
        outline: 2px solid;
    }
}

/* Print styles */
@media print {
    .navbar-header .navbar-toggle {
        display: none;
    }
    
    .navbar-header .brand-link {
        color: #000;
    }
}

/* === IMPROVED BUTTON STYLES === */
.btn-group-improved {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    margin-bottom: 0 !important;
}

/* Action button styling */
.action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px 10px !important;
    border-radius: 3px !important;
    transition: all 0.2s ease !important;
    height: auto !important;
    min-height: 28px !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.action-btn i {
    font-size: 14px !important;
    margin-right: 5px !important;
}

.action-btn .btn-text {
    display: none; /* Hide by default on mobile */
}

/* Button hover effects */
.action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.action-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Button with multiple icons styling */
.btn-with-multiple-icons i:not(:first-child) {
    margin-left: 3px !important;
}

/* Button color variations */
.btn-primary.action-btn {
    background-color: #1ab394 !important;
    border-color: #1ab394 !important;
}

.btn-primary.action-btn:hover {
    background-color: #18a689 !important;
    border-color: #18a689 !important;
}

.btn-warning.action-btn {
    background-color: #f8ac59 !important;
    border-color: #f8ac59 !important;
}

.btn-warning.action-btn:hover {
    background-color: #f7a54a !important;
    border-color: #f7a54a !important;
}

.btn-danger.action-btn {
    background-color: #ed5565 !important;
    border-color: #ed5565 !important;
}

.btn-danger.action-btn:hover {
    background-color: #ec4758 !important;
    border-color: #ec4758 !important;
}

.btn-success.action-btn {
    background-color: #1c84c6 !important;
    border-color: #1c84c6 !important;
}

.btn-success.action-btn:hover {
    background-color: #1a7bb9 !important;
    border-color: #1a7bb9 !important;
}

/* === DROPDOWN MENUS - IMPROVED === */
.dropdown-toggle {
    cursor: pointer;
    display: inline-flex !important;
    align-items: center !important;
}

.dropdown-menu {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 3px !important;
    background-color: #ffffff !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3) !important;
    min-width: 280px !important; /* Increased width for better readability */
    max-width: 450px !important;
    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: #ffffff !important; /* Use white background for menu items */
}

.dropdown-menu > li > a {
    padding: 10px 14px !important; /* Increased padding */
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background-color: #ffffff !important; /* Lighter background color for dropdown items */
    color: #333333 !important; /* Darker text for better readability */
    transition: background-color 0.2s, color 0.2s;
    line-height: 1.5 !important; /* Increased from 1.4 */
    font-weight: 400 !important;
    white-space: normal !important; /* Changed from nowrap */
    word-wrap: break-word !important;
    letter-spacing: 0.3px !important;
    display: flex !important;
    align-items: center !important;
}

.dropdown-menu > li > a i {
    margin-right: 8px !important;
    min-width: 16px !important;
    text-align: center !important;
}

.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: #f5f5f5 !important; /* Lighter hover background */
    color: #1ab394 !important; /* Primary color on hover */
}

.open > .dropdown-menu {
    display: block !important;
    animation: fadeInDown 0.2s ease-out;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === IMPROVED 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: "\f105"; /* Font Awesome right arrow */
    font-family: "FontAwesome";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
}

.dropdown-submenu:hover > a:after,
.dropdown-submenu:focus > a:after {
    color: #1ab394;
}

.dropdown-submenu > .dropdown-menu {
    position: absolute !important;
    top: 0 !important;
    left: 100% !important;
    margin-top: -1px !important;
    margin-left: 0 !important;
    border-radius: 3px !important;
    border: none !important;
    box-shadow: 0 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: #f5f5f5;
}

.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);
        position: fixed !important;
        top: 50px !important;
        left: auto !important;
        z-index: 1051 !important;
    }
}

/* 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;
    animation: fadeInRight 0.2s ease-out;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* === GREEN DIVIDER STYLING === */
.pd-horizontal-divider {
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #e5e5e5 !important;
    border-left: 10px solid #ffffff !important;
    border-right: 10px solid #ffffff !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: 5px 0 !important;
}

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

/* === IMPROVED MULTI-ICON BUTTONS === */
.btn-with-multiple-icons {
    position: relative;
    padding-right: 24px !important;
}

.btn-with-multiple-icons i:first-child {
    margin-right: 0 !important;
}

.btn-with-multiple-icons i:not(:first-child) {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0 !important;
    font-size: 10px !important;
}

/* === 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);
    }
}

/* === SPIRI2 MENU HIGHER POSITIONING === */
/* SPIRI2 special menu styling */
@media (min-width: 768px) {
    li.dropdown-submenu:has(a:contains("SPIRI2")) > .dropdown-menu,
    li.dropdown-submenu:has(a:contains("change_of_appropriation")) > .dropdown-menu {
        position: fixed !important;
        top: 50px !important;
        left: auto !important;
        max-height: calc(100vh - 60px) !important;
        min-width: 350px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 1051 !important;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3) !important;
    }
}

/* 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: #f5f5f5 !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;
}

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

    /* Show button text on desktop */
    .action-btn .btn-text {
        display: inline-block !important;
        margin-left: 3px !important;
    }
}

@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: 260px !important;
    }
    
    .table-responsive { 
        overflow-x: auto; 
    }

    .action-btn .btn-text {
        display: inline-block !important;
    }
}

@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 dropdown styling */
    .dropdown-menu {
        position: static !important;
        float: none;
        width: 100% !important;
        margin-top: 0;
        box-shadow: none;
        background-color: #f5f5f5 !important; /* Lighter background on mobile */
        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: none !important;
        margin-right: 10px !important;
    }
    
    .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;
    }
    
    /* Mobile button adjustments */
    .btn-group-improved {
        justify-content: center !important;
    }
    
    .action-btn {
        padding: 8px 10px !important;
        min-height: 36px !important;
    }
    
    .action-btn i {
        font-size: 16px !important;
        margin-right: 0 !important;
    }
    
    .action-btn .btn-text {
        display: none !important;
    }
}

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

/* === PANEL STYLES === */
.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;
}

/* === IBOX STYLES === */
.ibox {
    clear: both;
    margin-bottom: 25px;
    margin-top: 0;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
    border-radius: 4px;
    overflow: hidden;
}

.ibox-title {
    background-color: #ffffff;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 3px 0 0;
    color: inherit;
    margin-bottom: 0;
    padding: 14px 15px 7px;
    min-height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ibox-title h5 {
    display: inline-block;
    font-size: 14px;
    margin: 0 0 7px;
    padding: 0;
    text-overflow: ellipsis;
    float: left;
    font-weight: 600;
}

.ibox-content {
    background-color: #ffffff;
    color: inherit;
    padding: 15px 20px 20px 20px;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0px;
}

.ibox-tools {
    display: block;
    float: none;
    margin-top: 0;
    position: relative;
    padding: 0;
    width: 100%;
}

/* === ACCESSIBILITY IMPROVEMENTS === */
.btn:focus, 
.dropdown-toggle:focus,
.dropdown-menu > li > a:focus,
.action-btn:focus {
    outline: 2px solid #1ab394 !important;
    outline-offset: 2px !important;
}

/* === 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);
}

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

/* Action buttons container with improved 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;
    transition: all 0.2s;
}

/* 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;
    }
}

/* Firebrick special styles */
.pd-btn-firebrick {
    background-color: #b22222 !important;
    border-color: #b22222 !important;
}

.pd-btn-firebrick:hover {
    background-color: #a11f1f !important;
    border-color: #a11f1f !important;
}

/* Helper classes */
.mr-2 {
    margin-right: 8px !important;
}

/* Improved row alignment */
.row.my-0 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* For larger screens optimize space */
@media (min-width: 1200px) {
    .action-btn {
        min-width: 80px !important;
    }
}

/* Touch-friendly adjustments */
@media (pointer: coarse) {
    .action-btn,
    .dropdown-menu > li > a {
        padding: 10px 15px !important;
        min-height: 44px !important;
    }
}

/* === ADDITIONAL ANIMATIONS === */
.pulse-background {
    animation: pulse-bg 2s infinite;
}

@keyframes pulse-bg {
    0% { background-color: rgba(26, 179, 148, 0.1); }
    50% { background-color: rgba(26, 179, 148, 0.2); }
    100% { background-color: rgba(26, 179, 148, 0.1); }
}

/* === TABLE UTILITIES === */
.table > tbody > tr:hover { 
    background-color: rgba(26, 179, 148, 0.1); 
    color: #333;
}

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

/* === BUTTON TEXT CONTAINMENT FIX === */
/* Ensure text stays within button boundaries */
.action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px 10px !important;
    border-radius: 3px !important;
    transition: all 0.2s ease !important;
    height: auto !important;
    min-height: 28px !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important; /* Prevent overflow */
    position: relative !important; /* For proper text containment */
    width: auto !important; /* Allow width to be determined by content */
    max-width: 32px !important; /* Default to icon-only size on mobile */
}

/* On desktop, expand to accommodate text */
@media (min-width: 992px) {
    .action-btn {
        max-width: 150px !important; /* This caps the maximum width */
    }
}

/* Icon sizing */
.action-btn i {
    font-size: 14px !important;
    margin-right: 5px !important;
    flex-shrink: 0 !important; /* Prevent icon from shrinking */
}

/* Text styling within buttons */
.action-btn .btn-text {
    display: none !important; /* Hide by default on mobile */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important; /* Take up available space */
    font-size: 11px !important; /* Smaller font size */
}

/* Show text on desktop */
@media (min-width: 992px) {
    .action-btn .btn-text {
        display: inline-block !important;
        margin-left: 3px !important;
    }
}

/* Better handle icon + text spacing */
.action-btn i:last-child {
    margin-right: 0 !important;
}

/* === QUOTA CHANGE DROPDOWN FIX === */
/* Fix for quota change dropdown styling */
.btn-danger.dropdown-toggle {
    background-color: #ed5565 !important;
    border-color: #ed5565 !important;
    color: #ffffff !important;
}

.btn-danger.dropdown-toggle:hover,
.btn-danger.dropdown-toggle:focus {
    background-color: #ec4758 !important;
    border-color: #ec4758 !important;
    color: #ffffff !important;
}

.dropdown-improved .dropdown-toggle {
    color: #ffffff !important;
}

.dropdown-improved .dropdown-toggle i {
    color: #ffffff !important;
}

/* Ensure dropdown toggle button content is visible */
.dropdown-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    overflow: hidden !important;
}

/* === BUTTON GROUP IMPROVEMENTS === */
.btn-group-improved {
    display: flex !important;
    flex-wrap: wrap !important; /* Allow wrapping if needed */
    gap: 5px !important;
    margin-bottom: 0 !important;
    justify-content: flex-end !important;
}

/* === CUSTOM APPROACH: SIMPLIFIED BUTTON VARIANTS === */
/* For buttons with too much text, consider using a more simplified version where UI permits */
.action-btn[tooltip-placement] i {
    font-size: 14px !important; /* Slightly larger icons for better visibility */
}

/* === TOOLTIP IMPROVEMENTS === */
/* Ensure tooltips show full text */
.tooltip-inner {
    max-width: 300px !important;
    white-space: normal !important;
}

/* === ICON-ONLY BUTTON STYLES === */
.btn-icon {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 2px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.btn-icon i {
    font-size: 14px !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* Only for the quota change dropdown, keep label visible */
.dropdown-toggle.btn-icon {
    width: auto !important;
    padding: 0 10px !important;
}

.dropdown-toggle.btn-icon i {
    margin-right: 5px !important;
}

.btn-icon .btn-label {
    font-size: 12px !important;
    margin-left: 5px !important;
    white-space: nowrap !important;
    display: inline-block !important;
    color: white !important;
}

/* Button hover effects */
.btn-icon:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
}

.btn-icon:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Button color variations */
.btn-primary.btn-icon {
    background-color: #1ab394 !important;
    border-color: #1ab394 !important;
    color: white !important;
}

.btn-primary.btn-icon:hover {
    background-color: #18a689 !important;
    border-color: #18a689 !important;
}

.btn-warning.btn-icon {
    background-color: #f8ac59 !important;
    border-color: #f8ac59 !important;
    color: white !important;
}

.btn-warning.btn-icon:hover {
    background-color: #f7a54a !important;
    border-color: #f7a54a !important;
}

.btn-danger.btn-icon {
    background-color: #ed5565 !important;
    border-color: #ed5565 !important;
    color: white !important;
}

.btn-danger.btn-icon:hover {
    background-color: #ec4758 !important;
    border-color: #ec4758 !important;
}

.btn-success.btn-icon {
    background-color: #1c84c6 !important;
    border-color: #1c84c6 !important;
    color: white !important;
}

.btn-success.btn-icon:hover {
    background-color: #1a7bb9 !important;
    border-color: #1a7bb9 !important;
}

/* Button group styling */
.btn-group-improved {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    margin-bottom: 0 !important;
}

/* Fix for dropdown alignment */
.dropdown-menu-improved {
    min-width: 220px !important;
    padding: 5px 0 !important;
    margin: 5px 0 0 0 !important;
    border: none !important;
    border-radius: 3px !important;
    background-color: #ffffff !important;
    color: #333333 !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) !important;
    z-index: 1050 !important;
}

.dropdown-menu-improved > li > a {
    padding: 8px 12px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background-color: #ffffff !important;
    color: #333333 !important;
    transition: background-color 0.2s, color 0.2s !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    letter-spacing: 0.3px !important;
    display: flex !important;
    align-items: center !important;
}

.dropdown-menu-improved > li > a i {
    margin-right: 8px !important;
    min-width: 16px !important;
    text-align: center !important;
    color: #333333 !important;
}

.dropdown-menu-improved > li > a:hover,
.dropdown-menu-improved > li > a:focus,
.dropdown-menu-improved > li.active > a {
    background-color: #f5f5f5 !important;
    color: #1ab394 !important;
}

/* === TOOLTIP IMPROVEMENTS === */
/* Make tooltips appear faster */
.tooltip {
    opacity: 0;
    transition: opacity 0.15s linear;
}

.tooltip.in {
    opacity: 0.9;
}

.tooltip-inner {
    max-width: 280px;
    padding: 8px 12px;
    background-color: #2f4050;
    border-radius: 3px;
    font-size: 12px;
    line-height: 1.4;
}

/* === RESPONSIVENESS === */
@media (max-width: 767px) {
    .btn-icon {
        width: 36px !important;
        height: 36px !important;
    }
    
    .btn-icon i {
        font-size: 16px !important;
    }
    
    .dropdown-toggle.btn-icon {
        padding: 0 8px !important;
    }
}

@media (min-width: 992px) {
    .dropdown-menu-improved {
        min-width: 240px !important;
    }
    
    .btn-group-improved {
        justify-content: flex-end !important;
    }
}

/* === ACCESSIBILITY IMPROVEMENTS === */
.btn-icon:focus,
.dropdown-toggle:focus,
.dropdown-menu-improved > li > a:focus {
    outline: 2px solid #1ab394 !important;
    outline-offset: 2px !important;
}

/* === FIXED BUTTON POSITIONING STYLES === */
/* Container for fixed buttons */
.fixed-buttons {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 0;
}

/* Button size and appearance */
.btn-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    position: relative;
}

.btn-icon i {
    font-size: 14px;
    margin: 0;
    line-height: 1;
    color: #ffffff;
}

/* Button positions - LEFT SIDE */
.btn-pos-1 {
    position: absolute;
    left: 0;
    top: 0;
}

.btn-pos-2 {
    position: absolute;
    left: 44px; /* 36px button + 8px gap */
    top: 0;
}

.btn-pos-3 {
    position: absolute;
    left: 88px; /* 36px button + 8px gap + 36px button + 8px gap */
    top: 0;
}

/* Center button position */
.center-button {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
}

.quota-change-btn {
    width: auto;
    padding: 0 15px;
    height: 36px;
    border-radius: 4px;
    background-color: #ed5565;
    border-color: #ed5565;
    color: #ffffff;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quota-change-btn i {
    font-size: 14px;
    margin-right: 6px;
    color: #ffffff;
}

.quota-change-btn .btn-label {
    font-size: 13px;
    color: #ffffff;
    white-space: nowrap;
}

/* Button positions - RIGHT SIDE */
.btn-pos-5 {
    margin-right: 8px;
}

.btn-pos-6 {
    margin-right: 8px;
}

.btn-pos-7 {
    margin-right: 8px;
}

.btn-pos-8 {
    margin-right: 8px;
}

.btn-pos-9 {
    margin-right: 0;
}

/* Button colors */
.btn-pos-4 {
    position: absolute;
    left: 175px; /* Position after the center button */
    top: 0;
}

.btn-primary.btn-icon {
    background-color: #1ab394;
    border-color: #1ab394;
    color: white;
}

.btn-primary.btn-icon:hover {
    background-color: #18a689;
    border-color: #18a689;
}

.btn-warning.btn-icon {
    background-color: #f8ac59;
    border-color: #f8ac59;
    color: white;
}

.btn-warning.btn-icon:hover {
    background-color: #f7a54a;
    border-color: #f7a54a;
}

.btn-danger.btn-icon {
    background-color: #ed5565;
    border-color: #ed5565;
    color: white;
}

.btn-danger.btn-icon:hover {
    background-color: #ec4758;
    border-color: #ec4758;
}

.btn-success.btn-icon {
    background-color: #1c84c6;
    border-color: #1c84c6;
    color: white;
}

.btn-success.btn-icon:hover {
    background-color: #1a7bb9;
    border-color: #1a7bb9;
}

/* Button hover effects */
.btn-icon:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.btn-icon:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.quota-change-btn:hover {
    background-color: #ec4758;
    border-color: #ec4758;
}

/* Dropdown menu styling */
.dropdown-menu-improved {
    min-width: 220px;
    padding: 5px 0;
    margin: 5px 0 0;
    border: none;
    border-radius: 3px;
    background-color: #ffffff;
    color: #333333;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    z-index: 1050;
}

.dropdown-menu-improved > li > a {
    padding: 8px 12px;
    margin: 0;
    border: none;
    border-radius: 0;
    background-color: #ffffff;
    color: #333333;
    transition: background-color 0.2s, color 0.2s;
    line-height: 1.5;
    font-weight: 400;
    white-space: normal;
    word-wrap: break-word;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
}

.dropdown-menu-improved > li > a i {
    margin-right: 8px;
    min-width: 16px;
    text-align: center;
    color: #333333;
}

.dropdown-menu-improved > li > a:hover,
.dropdown-menu-improved > li > a:focus,
.dropdown-menu-improved > li.active > a {
    background-color: #f5f5f5;
    color: #1ab394;
}

/* Submenu styling */
.dropdown-submenu > a:after {
    content: "\f105";
    font-family: "FontAwesome";
    position: absolute;
    right: 12px;
    color: #999;
}

.dropdown-submenu-improved {
    position: absolute;
    left: 100%;
    top: 0;
    margin-top: -5px;
    min-width: 220px;
}

/* Fixed row spacing */
.row.my-0 {
    display: flex;
    align-items: center;
    margin-top: 0;
    margin-bottom: 0;
    min-height: 40px;
}

/* Better tooltip visibility */
.tooltip-inner {
    max-width: 250px;
    padding: 8px 12px;
    color: #fff;
    background-color: #2F4050;
    border-radius: 3px;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .fixed-buttons {
        height: auto;
        flex-direction: column;
        align-items: center;
    }
    
    .btn-pos-1, .btn-pos-2, .btn-pos-3, .btn-pos-4 {
        position: relative;
        left: auto;
        top: auto;
        margin: 4px;
    }
    
    .center-button {
        position: relative;
        left: auto;
        transform: none;
        margin: 4px auto;
    }
    
    .btn-pos-5, .btn-pos-6, .btn-pos-7, .btn-pos-8, .btn-pos-9 {
        margin: 4px;
    }
    
    .quota-change-btn {
        margin: 4px auto;
    }
}

/* Larger screens - maintain original positioning */
@media (min-width: 992px) {
    .btn-toolbar.fixed-buttons {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
    }
    
    .btn-group-fixed {
        display: flex;
        gap: 8px;
    }
    
    .btn-group-dropdown {
        position: relative;
    }
}

/* === FOUR SEGMENTS LAYOUT === */
/* General row styling */
.row.my-0 {
    display: flex;
    align-items: center;
    margin-top: 0;
    margin-bottom: 0;
    min-height: 40px;
}

/* Button segment containers */
.button-segment {
    padding: 0 5px;
    height: 40px;
    position: relative;
    display: flex;
    align-items: center;
}

/* First segment - left buttons */
.segment-1 {
    justify-content: flex-start;
}

/* Second segment - center quota change */
.segment-2 {
    justify-content: center;
    text-align: center;
}

/* Third segment - unlock button */
.segment-3 {
    justify-content: center;
}

/* Fourth segment - right buttons */
.segment-4 {
    justify-content: flex-end;
}

/* Icon-only button styling */
.btn-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0 3px;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.btn-icon i {
    font-size: 14px;
    margin: 0;
    line-height: 1;
    color: #ffffff;
}

/* Button hover effects */
.btn-icon:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.btn-icon:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Special quota change button */
.quota-change-btn {
    width: auto;
    min-width: 140px;
    max-width: 200px;
    height: 36px;
    padding: 0 12px;
    border-radius: 4px;
    background-color: #ed5565;
    border-color: #ed5565;
    color: #ffffff;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.quota-change-btn i {
    font-size: 14px;
    margin-right: 6px;
    color: #ffffff;
}

.quota-change-btn .btn-label {
    font-size: 13px;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

/* Button colors */
.btn-primary.btn-icon {
    background-color: #1ab394;
    border-color: #1ab394;
    color: white;
}

.btn-primary.btn-icon:hover {
    background-color: #18a689;
    border-color: #18a689;
}

.btn-warning.btn-icon {
    background-color: #f8ac59;
    border-color: #f8ac59;
    color: white;
}

.btn-warning.btn-icon:hover {
    background-color: #f7a54a;
    border-color: #f7a54a;
}

.btn-danger.btn-icon {
    background-color: #ed5565;
    border-color: #ed5565;
    color: white;
}

.btn-danger.btn-icon:hover {
    background-color: #ec4758;
    border-color: #ec4758;
}

.btn-success.btn-icon {
    background-color: #1c84c6;
    border-color: #1c84c6;
    color: white;
}

.btn-success.btn-icon:hover {
    background-color: #1a7bb9;
    border-color: #1a7bb9;
}

/* Dropdown styling */
.dropdown-toggle.btn-icon::after {
    display: none;
}

.dropdown-menu-improved {
    min-width: 220px;
    padding: 5px 0;
    margin: 5px 0 0;
    border: none;
    border-radius: 3px;
    background-color: #ffffff;
    color: #333333;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    z-index: 1050;
}

.dropdown-menu-improved > li > a {
    padding: 8px 12px;
    margin: 0;
    border: none;
    border-radius: 0;
    background-color: #ffffff;
    color: #333333;
    transition: background-color 0.2s, color 0.2s;
    line-height: 1.5;
    font-weight: 400;
    white-space: normal;
    word-wrap: break-word;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
}

.dropdown-menu-improved > li > a i {
    margin-right: 8px;
    min-width: 16px;
    text-align: center;
    color: #333333;
}

.dropdown-menu-improved > li > a:hover,
.dropdown-menu-improved > li > a:focus,
.dropdown-menu-improved > li.active > a {
    background-color: #f5f5f5;
    color: #1ab394;
}

/* Submenu styling */
.dropdown-submenu > a:after {
    content: "\f105";
    font-family: "FontAwesome";
    position: absolute;
    right: 12px;
    color: #999;
}

.dropdown-submenu-improved {
    position: absolute;
    left: 100%;
    top: 0;
    margin-top: -5px;
    min-width: 220px;
}

/* Divider styling */
.pd-horizontal-divider {
    height: 1px;
    margin: 5px 0;
    overflow: hidden;
    background-color: #e5e5e5;
}

/* Better tooltip visibility */
.tooltip-inner {
    max-width: 250px;
    padding: 8px 12px;
    color: #fff;
    background-color: #2F4050;
    border-radius: 3px;
}

/* Maintain button groups */
.btn-group {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0;
}

/* Fix for button group inside btn-group */
.btn-group .btn-group {
    margin-left: 3px;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .row.my-0 {
        display: block;
    }
    
    .button-segment {
        height: auto;
        margin-bottom: 8px;
        justify-content: center;
        text-align: center;
    }
    
    .segment-1, .segment-2, .segment-3, .segment-4 {
        display: flex;
        justify-content: center;
    }
    
    .segment-4 {
        text-align: center;
    }
    
    .btn-group {
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-bottom: 5px;
    }
    
    .btn-icon {
        width: 40px;
        height: 40px;
        margin: 3px;
    }
    
    .btn-icon i {
        font-size: 16px;
    }
    
    .quota-change-btn {
        height: 40px;
        min-width: 160px;
    }
}

/* Fix for desktop */
@media (min-width: 992px) {
    .button-segment {
        padding: 0;
    }
    
    .btn-group {
        margin: 0;
    }
    
    .btn-icon {
        margin: 0 3px;
    }
}

/* === FIXED BUTTON LAYOUT === */
/* Row styling */
.row.my-0 {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 40px;
}

/* Button segment containers */
.button-segment {
    padding: 0;
    height: 40px;
    display: flex;
    align-items: center;
}

/* Button containers to keep alignment */
.btn-container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    height: 100%;
    width: 100%;
}

/* Segment alignments */
.segment-1 .btn-container {
    justify-content: flex-start;
    padding-left: 5px;
}

.segment-2 .btn-container {
    justify-content: center;
}

.segment-3 .btn-container {
    justify-content: center;
}

.segment-4 .btn-container {
    justify-content: flex-end;
    padding-right: 5px;
}

/* Icon-only button styling */
.btn-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0 3px;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    position: relative;
}

.btn-icon i {
    font-size: 14px;
    margin: 0;
    line-height: 1;
    color: #ffffff;
}

/* Button hover effects */
.btn-icon:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.btn-icon:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Special quota change button */
.quota-change-btn {
    width: auto;
    min-width: 140px;
    max-width: 200px;
    height: 36px;
    padding: 0 12px;
    border-radius: 4px;
    background-color: #ed5565;
    border-color: #ed5565;
    color: #ffffff;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.quota-change-btn i {
    font-size: 14px;
    margin-right: 6px;
    color: #ffffff;
}

.quota-change-btn .btn-label {
    font-size: 13px;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

/* Button colors */
.btn-primary.btn-icon {
    background-color: #1ab394;
    border-color: #1ab394;
    color: white;
}

.btn-primary.btn-icon:hover {
    background-color: #18a689;
    border-color: #18a689;
}

.btn-warning.btn-icon {
    background-color: #f8ac59;
    border-color: #f8ac59;
    color: white;
}

.btn-warning.btn-icon:hover {
    background-color: #f7a54a;
    border-color: #f7a54a;
}

.btn-danger.btn-icon {
    background-color: #ed5565;
    border-color: #ed5565;
    color: white;
}

.btn-danger.btn-icon:hover {
    background-color: #ec4758;
    border-color: #ec4758;
}

.btn-success.btn-icon {
    background-color: #1c84c6;
    border-color: #1c84c6;
    color: white;
}

.btn-success.btn-icon:hover {
    background-color: #1a7bb9;
    border-color: #1a7bb9;
}

/* Dropdown styling */
.dropdown-toggle.btn-icon::after {
    display: none;
}

.dropdown-menu-improved {
    min-width: 220px;
    max-width: 280px;
    padding: 5px 0;
    margin: 5px 0 0;
    border: none;
    border-radius: 3px;
    background-color: #ffffff;
    color: #333333;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    z-index: 1050;
}

.dropdown-menu-improved > li > a {
    padding: 8px 12px;
    margin: 0;
    border: none;
    border-radius: 0;
    background-color: #ffffff;
    color: #333333;
    transition: background-color 0.2s, color 0.2s;
    line-height: 1.5;
    font-weight: 400;
    white-space: normal;
    word-wrap: break-word;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
}

.dropdown-menu-improved > li > a i {
    margin-right: 8px;
    min-width: 16px;
    text-align: center;
    color: #333333;
}

.dropdown-menu-improved > li > a:hover,
.dropdown-menu-improved > li > a:focus,
.dropdown-menu-improved > li.active > a {
    background-color: #f5f5f5;
    color: #1ab394;
}

/* Left submenu fix */
.left-submenu > a:after {
    content: "\f104" !important; /* Font Awesome left arrow */
    font-family: "FontAwesome";
    position: absolute;
    left: 12px;
    right: auto !important;
    color: #999;
}

.left-submenu > a i:first-child {
    margin-left: 8px;
}

.left-submenu > a {
    padding-left: 30px !important;
}

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

/* Divider styling */
.pd-horizontal-divider {
    height: 1px;
    margin: 5px 0;
    overflow: hidden;
    background-color: #e5e5e5;
}

/* Fix for print dropdown */
.print-dropdown {
    position: relative;
}

.print-dropdown .dropdown-menu {
    right: 0 !important;
    left: auto !important;
}

/* Better tooltip visibility */
.tooltip-inner {
    max-width: 250px;
    padding: 8px 12px;
    color: #fff;
    background-color: #2F4050;
    border-radius: 3px;
}

/* Button spacing - ensure each button has right margin */
.segment-4 .btn-icon {
    margin-left: 3px;
    margin-right: 0;
}

/* Keep buttons from wrapping */
.ibox-title {
    overflow: visible;
}

.ibox-tools {
    overflow: visible;
}

/* Ensure bootstrap grid works properly */
.col-xs-12, .col-sm-1, .col-sm-3, .col-sm-4, .col-md-1, .col-md-3, .col-md-4, .col-lg-1, .col-lg-3, .col-lg-4 {
    padding-left: 5px;
    padding-right: 5px;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .row.my-0 {
        display: block;
    }
    
    .button-segment {
        height: auto;
        margin-bottom: 8px;
    }
    
    .btn-container {
        justify-content: center !important;
        padding: 0 !important;
    }
    
    .btn-icon {
        width: 40px;
        height: 40px;
        margin: 3px;
    }
    
    .btn-icon i {
        font-size: 16px;
    }
    
    .quota-change-btn {
        height: 40px;
        min-width: 160px;
    }
}

/* Fix for desktop */
@media (min-width: 992px) {
    .quota-change-btn {
        max-width: 240px;
    }
}

/* Ensure content doesn't overflow in constrained spaces */
@media (min-width: 768px) and (max-width: 991px) {
    .quota-change-btn {
        min-width: 120px;
        padding: 0 8px;
    }
    
    .btn-icon {
        width: 32px;
        height: 32px;
        margin: 0 2px;
    }
    
    .segment-1 .btn-container {
        padding-left: 0;
    }
    
    .segment-4 .btn-container {
        padding-right: 0;
    }
}

/* Add this class to the dropdown-submenu in the HTML: */
.dropdown-submenu.left-submenu > a:after {
    content: "\f104" !important; /* Font Awesome left arrow */
    font-family: "FontAwesome";
    position: absolute;
    left: 12px;
    right: auto !important;
    color: #999;
}

.dropdown-submenu.left-submenu > a i:first-child {
    margin-left: 8px;
}

.dropdown-submenu.left-submenu > a {
    padding-left: 30px !important;
}

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

/* For selectors that use the :has pseudo-class (which isn't supported in all browsers),
add specific selectors for the approved funds submenu */
li.dropdown-submenu:has(a:contains("tApprovedFunds")) > .dropdown-menu,
li.dropdown-submenu.approved-funds-submenu > .dropdown-menu {
    position: absolute !important;
    left: auto !important;
    right: 100% !important;
    top: 0 !important;
    margin-top: -5px !important;
    min-width: 220px !important;
}

/* Print button styling fix */
.print-dropdown .btn-primary.dropdown-toggle {
    background-color: #1ab394 !important;
    border-color: #1ab394 !important;
    color: #ffffff !important;
}

/* When dropdown is open */
.print-dropdown.open .btn-primary.dropdown-toggle {
    background-color: #1ab394 !important;
    border-color: #1ab394 !important;
    color: #ffffff !important;
}

/* When hovering */
.print-dropdown .btn-primary.dropdown-toggle:hover,
.print-dropdown.open .btn-primary.dropdown-toggle:hover {
    background-color: #18a689 !important;
    border-color: #18a689 !important;
    color: #ffffff !important;
}

/* Ensure proper dropdown toggle state */
.print-dropdown .dropdown-toggle.btn-icon {
    background-color: #1ab394 !important;
}

.print-dropdown.open .dropdown-toggle.btn-icon {
    background-color: #1ab394 !important;
}

.print-dropdown .dropdown-toggle.btn-icon:hover {
    background-color: #18a689 !important;
}

/* Fix for any possible open state override */
.nav .open > .dropdown-toggle.btn-primary,
.nav .open > .dropdown-toggle.btn-icon.btn-primary {
    background-color: #1ab394 !important;
    border-color: #1ab394 !important;
    color: #ffffff !important;
}

/* === ENHANCED TABLE HEADER STICKY FUNCTIONALITY === */
/* Improved sticky header implementation */
table.stick-header {
    position: relative;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

/* Make only the sortable header row sticky */
table.stick-header thead.sortable th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #f5f5f5;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    border-bottom: 1px solid #e7e7e7;
    padding: 8px 4px;
    vertical-align: middle;
    font-weight: 600;
}

/* Ensure non-sticky header doesn't interfere */
table.stick-header thead:not(.sortable) th {
    position: relative;
    background-color: #ffffff;
    z-index: 5;
}

/* Position sticky header correctly when inside scrollable container */
.table-responsive {
    position: relative;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 15px;
}

/* Proper scrolling behavior for table container */
div[table-container] {
    width: 100%;
    overflow-x: auto;
    position: relative;
}

/* === RESPONSIVE COLUMN VISIBILITY === */
/* Hide chart_of_account_title column on small screens more effectively */
@media (max-width: 991px) {
    .d-none.d-lg-table-cell {
        display: none !important;
    }
    
    /* Also ensure other columns marked with d-none d-md-table-cell are properly hidden on small screens */
    .d-none.d-md-table-cell {
        display: none !important;
    }
}

/* Ensure columns are properly shown on appropriate screens */
@media (min-width: 992px) {
    .d-none.d-lg-table-cell {
        display: table-cell !important;
    }
}

@media (min-width: 768px) {
    .d-none.d-md-table-cell {
        display: table-cell !important;
    }
}

/* === IMPROVED TABLE STYLING === */
/* Better spacing and alignment */
.table.tableNoPadding td,
.table.tableNoPadding th {
    padding: 8px 4px;
    vertical-align: middle;
}

.table.tableNoMarginBottom {
    margin-bottom: 0;
}

/* Improved hover states for table rows */
.table > tbody > tr:hover {
    background-color: rgba(26, 179, 148, 0.05);
    transition: background-color 0.15s ease;
}

/* Selected row styling */
.table > tbody > tr.st-selected {
    background-color: rgba(26, 179, 148, 0.15);
}

/* Highlighted by legend row styling */
.table > tbody > tr.highlight-legend-item {
    background-color: rgba(26, 179, 148, 0.1);
    border-left: 3px solid #1ab394;
}

/* Better scrollability for table body */
.scroll-250 {
    max-height: 250px;
    overflow-y: auto;
}

/* Custom scrollbar for better UX */
.scroll-250::-webkit-scrollbar {
    width: 8px;
}

.scroll-250::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.scroll-250::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.scroll-250::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* === ACTION BUTTONS IMPROVEMENTS === */
/* Enhanced action buttons container */
.action-buttons-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 4px;
    min-width: 120px;
}

/* Button styling */
.action-buttons-container .btn {
    padding: 4px 8px;
    margin: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 28px;
    height: 28px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

/* Button hover effect */
.action-buttons-container .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Button colors */
.action-buttons-container .btn-warning {
    background-color: #f8ac59;
    border-color: #f8ac59;
    color: white;
}

.action-buttons-container .btn-warning:hover {
    background-color: #f7a54a;
    border-color: #f7a54a;
}

.action-buttons-container .btn-white-altered {
    background-color: #f3f3f4;
    border-color: #e7eaec;
    color: #676a6c;
}

.action-buttons-container .btn-white-altered:hover {
    background-color: #e7e7e7;
    border-color: #d9d9d9;
}

.action-buttons-container .btn-danger {
    background-color: #ed5565;
    border-color: #ed5565;
    color: white;
}

.action-buttons-container .btn-danger:hover {
    background-color: #ec4758;
    border-color: #ec4758;
}

/* Responsive adjustments for action buttons */
@media (max-width: 767px) {
    .action-buttons-container {
        gap: 6px;
    }
    
    .action-buttons-container .btn {
        padding: 6px 8px;
        min-width: 32px;
        height: 32px;
    }
    
    .action-buttons-container .btn i {
        font-size: 15px;
    }
}

/* === FORM CONTROL ENHANCEMENTS === */
/* Better styling for inputs in the table */
.table input.form-control {
    height: 30px;
    padding: 5px 8px;
    font-size: 12px;
}

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

.pd-txt-horizontal-left {
    text-align: left !important;
}

.pd-txt-horizontal-right {
    text-align: right !important;
}

/* Improve focus state */
.form-control:focus {
    border-color: #1ab394;
    box-shadow: 0 0 0 2px rgba(26, 179, 148, 0.25);
}

/* === PAGINATION IMPROVEMENTS === */
/* Better pagination styling */
.pagination-sm {
    margin: 10px 0 0;
}

.pagination-sm > li > a,
.pagination-sm > li > span {
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 3px;
}

/* === RESPONSIVE ADJUSTMENTS === */
/* Better responsive behavior */
@media (max-width: 767px) {
    /* Adjust table for mobile view */
    .table-responsive {
        border: none;
        margin-bottom: 0;
    }
    
    /* Ensure proper column spacing on mobile */
    .col-xs-12 {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* Better input sizing on mobile */
    input.input-sm.form-control {
        height: 34px;
        font-size: 13px;
    }
}

/* Medium screens */
@media (min-width: 768px) and (max-width: 991px) {
    /* Adjust content area */
    .ibox-content {
        padding: 15px;
    }
}

/* === PERFORMANCE OPTIMIZATIONS === */
/* Use hardware acceleration for sticky headers and animations */
table.stick-header thead.sortable th {
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Better smooth scrolling */
.scroll-250 {
    scroll-behavior: smooth;
}

/* === PRINT BUTTON BACKGROUND FIX === */
/* Print dropdown button fix */
.print-dropdown .btn-primary.dropdown-toggle {
    background-color: #1ab394 !important;
    border-color: #1ab394 !important;
    color: #ffffff !important;
}

/* When dropdown is open */
.print-dropdown.open .btn-primary.dropdown-toggle {
    background-color: #1ab394 !important;
    border-color: #1ab394 !important;
    color: #ffffff !important;
}

/* When hovering */
.print-dropdown .btn-primary.dropdown-toggle:hover,
.print-dropdown.open .btn-primary.dropdown-toggle:hover {
    background-color: #18a689 !important;
    border-color: #18a689 !important;
    color: #ffffff !important;
}

/* Ensure proper dropdown toggle state */
.print-dropdown .dropdown-toggle.btn-icon {
    background-color: #1ab394 !important;
}

.print-dropdown.open .dropdown-toggle.btn-icon {
    background-color: #1ab394 !important;
}

.print-dropdown .dropdown-toggle.btn-icon:hover {
    background-color: #18a689 !important;
}

/* Fix for any possible open state override */
.nav .open > .dropdown-toggle.btn-primary,
.nav .open > .dropdown-toggle.btn-icon.btn-primary {
    background-color: #1ab394 !important;
    border-color: #1ab394 !important;
    color: #ffffff !important;
}

/* === ENHANCED STICKY HEADER FIX === */
/* This is a targeted fix specifically for the sticky header issue */

/* Base table styles ensuring proper structure */
table.stick-header {
    position: relative !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* Explicit sticky header for the sortable header row only */
table.stick-header thead.sortable th {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background-color: #f5f5f5 !important;
    border-bottom: 1px solid #e7e7e7 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

/* The table container needs a defined height for sticky to work */
.scroll-250 {
    max-height: 250px !important;
    overflow-y: auto !important;
}

/* Ensure the table-responsive container has proper positioning */
.table-responsive {
    position: relative !important;
    overflow-x: auto !important;
    overflow-y: visible !important; /* Allow the sticky header to show */
}

/* Ensure table container has proper positioning */
div[table-container] {
    width: 100% !important;
    position: relative !important;
    overflow: visible !important; /* Allow sticky header to show */
}

/* Fix for browsers that need hardware acceleration for sticky elements */
table.stick-header thead.sortable th {
    will-change: transform !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}

/* Specific fix for container to ensure correct overflow handling */
.ibox-content {
    overflow: visible !important;
}

/* Make sure parent containers don't clip the sticky headers */
.ibox, .wrapper-content {
    overflow: visible !important;
}

/* Ensure tbody doesn't overlap the header */
table.stick-header tbody {
    position: relative !important;
}

/* === CRITICAL STICKY HEADER FIX === */
/* This solves the specific issue with the sticky header */

/* Move the scroll-250 class from tbody to a wrapper div */
div[table-container] {
    position: relative !important;
    max-height: 400px !important; /* Increased for better viewing */
    overflow-y: auto !important;
    width: 100% !important;
}

/* Ensure the table structure supports sticky headers */
table.stick-header {
    position: relative !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* Target ONLY the sortable header */
table.stick-header thead.sortable th {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important; /* Higher z-index to ensure it stays on top */
    background-color: #f5f5f5 !important;
    border-bottom: 1px solid #e7e7e7 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

/* Make sure non-sticky header row doesn't interfere */
table.stick-header thead:not(.sortable) th {
    position: static !important;
    z-index: 1 !important;
    background-color: #ffffff !important;
}

/* Fix for any parent containers that might be clipping */
.ibox, .ibox-content, .wrapper-content, .table-responsive {
    overflow: visible !important;
}

/* Ensure tbody doesn't have a conflicting scroll */
.scroll-250 {
    overflow: visible !important;
}

/* Force hardware acceleration for smoother scrolling */
table.stick-header thead.sortable th {
    will-change: transform !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}

/* === CRITICAL STICKY HEADER FIX === */
/* This solves the specific issue with the sticky header */

/* Move the scroll-250 class from tbody to a wrapper div */
div[table-container] {
    position: relative !important;
    max-height: 400px !important; /* Increased for better viewing */
    overflow-y: auto !important;
    width: 100% !important;
}

/* Ensure the table structure supports sticky headers */
table.stick-header {
    position: relative !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* Target ONLY the sortable header */
table.stick-header thead.sortable th {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important; /* Higher z-index to ensure it stays on top */
    background-color: #f5f5f5 !important;
    border-bottom: 1px solid #e7e7e7 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

/* Make sure non-sticky header row doesn't interfere */
table.stick-header thead:not(.sortable) th {
    position: static !important;
    z-index: 1 !important;
    background-color: #ffffff !important;
}

/* Fix for any parent containers that might be clipping */
.ibox, .ibox-content, .wrapper-content, .table-responsive {
    overflow: visible !important;
}

/* Ensure tbody doesn't have a conflicting scroll */
.scroll-250 {
    overflow: visible !important;
}

/* Force hardware acceleration for smoother scrolling */
table.stick-header thead.sortable th {
    will-change: transform !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}

/* === RESPONSIVE COLUMN VISIBILITY === */
/* Hide chart_of_account_title column on small screens more effectively */
@media (max-width: 991px) {
    .d-none.d-lg-table-cell {
        display: none !important;
    }
    
    /* Also ensure other columns marked with d-none d-md-table-cell are properly hidden on small screens */
    .d-none.d-md-table-cell {
        display: none !important;
    }
}

/* Ensure columns are properly shown on appropriate screens */
@media (min-width: 992px) {
    .d-none.d-lg-table-cell {
        display: table-cell !important;
    }
}

@media (min-width: 768px) {
    .d-none.d-md-table-cell {
        display: table-cell !important;
    }
}

/* === IMPROVED TABLE STYLING === */
/* Better spacing and alignment */
.table.tableNoPadding td,
.table.tableNoPadding th {
    padding: 8px 4px;
    vertical-align: middle;
}

.table.tableNoMarginBottom {
    margin-bottom: 0;
}

/* Improved hover states for table rows */
.table > tbody > tr:hover {
    background-color: rgba(26, 179, 148, 0.05);
    transition: background-color 0.15s ease;
}

/* Selected row styling */
.table > tbody > tr.st-selected {
    background-color: rgba(26, 179, 148, 0.15);
}

/* Highlighted by legend row styling */
.table > tbody > tr.highlight-legend-item {
    background-color: rgba(26, 179, 148, 0.1);
    border-left: 3px solid #1ab394;
}

/* Custom scrollbar for better UX */
div[table-container]::-webkit-scrollbar {
    width: 8px;
    height: 8px; /* For horizontal scrollbar */
}

div[table-container]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

div[table-container]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

div[table-container]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* CSS styles specific for exportSpiri2XML page - add to end of style-altered.css */

/* Target only the specific page using the export-spiri2-page class */
.export-spiri2-page .ibox {
    min-height: 300px;
    margin-bottom: 20px;
    width: 100%;
}

/* Fix for the first panel that's too high */
.export-spiri2-page .top-panel.ibox {
    min-height: auto;
    margin-bottom: 20px;
}

.export-spiri2-page .top-panel .ibox-content {
    padding-top: 10px;
    padding-bottom: 10px;
}

.export-spiri2-page .panel-header {
    padding-bottom: 0;
    border-top: 1px solid #e7eaec;
    background-color: #f5f5f5;
}

.export-spiri2-page .panel-content {
    padding-top: 15px;
}

.export-spiri2-page .panel-title {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.export-spiri2-page .panel-title h5 {
    margin: 0;
    padding: 0;
    font-weight: bold;
}

.export-spiri2-page .panel-title-right {
    margin-left: auto;
}

.export-spiri2-page .analytics-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.export-spiri2-page .analytics-label {
    margin-right: 10px;
    white-space: nowrap;
}

.export-spiri2-page .analytics-input {
    width: 190px;
}

.export-spiri2-page .analytics-input input {
    width: 80px;
    display: inline-block;
}

.export-spiri2-page .analytics-note {
    margin-bottom: 15px;
    padding-right: 30px;
}

.export-spiri2-page .form-label {
    margin-bottom: 10px;
    font-weight: bold;
}

.export-spiri2-page .quota-title-section {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
}

.export-spiri2-page .quota-subtitle {
    color: red;
    margin-top: 5px;
}

.export-spiri2-page .date-input {
    height: 34px;
}

/* Fix equal height of panels */
@media (min-width: 992px) {
    .export-spiri2-page .row {
        display: flex;
        flex-wrap: wrap;
    }
    
    .export-spiri2-page .col-md-6 {
        display: flex;
    }
    
    .export-spiri2-page .ibox {
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    
    .export-spiri2-page .ibox-content {
        flex-grow: 1;
    }
    
    /* Fix for the top panel with date */
    .export-spiri2-page .top-panel-row {
        display: block;
    }
}

/* Custom styles for the analytics inputs on SPIRI2 XML export page */
.export-spiri2-page .analytics-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.export-spiri2-page .analytics-label {
    margin-right: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.export-spiri2-page .analytics-input {
    width: 90px; /* Reduced width from default */
    max-width: 90px; /* Ensure it doesn't grow larger */
    flex-shrink: 0;
}

.export-spiri2-page .analytics-note {
    margin-top: 5px;
    margin-bottom: 10px;
}

/* Custom styles for the XML export pages */
/* These styles only affect elements within the export-xml-page class */

/* Add these styles to your CSS file to improve the exportXMLDirective.html page */
.export-xml-page .ibox {
    clear: both;
    margin-bottom: 25px;
    margin-top: 0;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
    border-radius: 4px;
    overflow: hidden;
}

.export-xml-page .ibox-title {
    background-color: #ffffff;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 3px 0 0;
    color: inherit;
    margin-bottom: 0;
    padding: 14px 15px 7px;
    min-height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.export-xml-page .ibox-title h5 {
    display: inline-block;
    font-size: 14px;
    margin: 0 0 7px;
    padding: 0;
    text-overflow: ellipsis;
    float: left;
    font-weight: 600;
}

.export-xml-page .ibox-content {
    background-color: #ffffff;
    color: inherit;
    padding: 15px 20px 20px 20px;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0px;
}

.export-xml-page .ibox-tools {
    display: flex;
    gap: 5px;
    align-items: center;
    float: right;
    text-align: right;
}

/* Button styling to match square buttons style */
.export-xml-page .btn {
    border-radius: 3px !important;
}

.export-xml-page .btn-xs {
    padding: 1px 5px;
}

/* Form control styles */
.export-xml-page .form-control {
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.export-xml-page textarea.form-control {
    height: auto;
    min-height: 200px !important;
}

.export-xml-page .control-label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

/* Responsive padding and margin helpers */
.export-xml-page .m-t-sm {
    margin-top: 10px;
}

.export-xml-page .m-t-md {
    margin-top: 20px;
}

/* Improving checkbox styling */
.export-xml-page .checkbox.pd-checkbox-success {
    margin-top: 0;
    margin-bottom: 10px;
}

.export-xml-page .checkbox.pd-checkbox-success label {
    padding-left: 5px;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .export-xml-page .ibox-title {
        padding: 10px 10px 5px;
    }
    
    .export-xml-page .ibox-content {
        padding: 10px 15px 15px 15px;
    }
    
    .export-xml-page .form-group {
        margin-bottom: 10px;
    }
    
    .export-xml-page .col-xs-12 {
        margin-bottom: 10px;
    }
}

/* Medium screens adjustments */
@media (min-width: 768px) and (max-width: 991px) {
    .export-xml-page .row {
        margin-left: -10px;
        margin-right: -10px;
    }
    
    .export-xml-page [class*="col-"] {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* Larger screens adjustments */
@media (min-width: 992px) {
    .export-xml-page .row {
        display: flex;
        flex-wrap: wrap;
    }
}

/* Custom styles for exports directive */
.export-data-page .ibox {
    clear: both;
    margin-bottom: 25px;
    margin-top: 0;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
    border-radius: 4px;
    overflow: hidden;
}

.export-data-page .ibox-title {
    background-color: #ffffff;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 3px 0 0;
    color: inherit;
    margin-bottom: 0;
    padding: 14px 15px 7px;
    min-height: 48px;
}

.export-data-page .ibox-title h5 {
    display: inline-block;
    font-size: 14px;
    margin: 0 0 7px;
    padding: 0;
    text-overflow: ellipsis;
    font-weight: 600;
}

.export-data-page .ibox-content {
    background-color: #ffffff;
    color: inherit;
    padding: 15px 20px 20px 20px;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0px;
}

/* Button styling */
.export-data-page .btn {
    border-radius: 3px !important;
}

.export-data-page .btn-xs {
    padding: 1px 5px;
}

/* Title layout styling */
.export-data-page .ibox-title .row {
    display: flex;
    align-items: center;
    width: 100%;
}

/* Center checkbox container */
.export-data-page .export-checkboxes {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Right-aligned button container */
.export-data-page .export-button {
    float: right;
}

/* Square button styling */
.export-data-page .btn {
    border-radius: 3px !important;
}

.export-data-page .btn-xs {
    padding: 1px 5px;
}

/* Checkbox styling for the expenditure quota */
.export-data-page .checkbox.pd-checkbox-danger {
    margin-top: 0;
    margin-bottom: 10px;
    display: inline-block;
}

.export-data-page .checkbox.pd-checkbox-danger label {
    font-weight: normal;
    display: inline-block;
    position: relative;
    padding-left: 5px;
    cursor: pointer;
}

.export-data-page .pd-color-red {
    color: #ed5565 !important;
}

/* Helper class for text alignment */
.export-data-page .text-center {
    text-align: center;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .export-data-page .ibox-title .row {
        flex-direction: column;
    }
    
    .export-data-page .ibox-title .row > div {
        margin-bottom: 10px;
        width: 100%;
    }
    
    .export-data-page .export-button {
        float: none;
        text-align: right;
        width: 100%;
    }
}

/* Middle column with vertical line */
.export-data-page .middle-column {
    position: relative;
}

.export-data-page .middle-column:before {
    content: '';
    position: absolute;
    left: -15px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #e7eaec;
}

/* Checkbox styling */
.export-data-page .checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.export-data-page .checkbox.pd-checkbox-success {
    margin-top: 0;
    margin-bottom: 10px;
}

/* Switch styling */
.export-data-page .switch-container {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

/* Section headers */
.export-data-page .section-headers {
    margin-top: 20px;
    margin-bottom: 15px;
}

.export-data-page .section-headers label {
    font-weight: 600;
    font-size: 14px;
}

/* Margin helpers */
.export-data-page .m-t-md {
    margin-top: 20px;
}

.export-data-page .m-b-md {
    margin-bottom: 20px;
}

.export-data-page .m-t-sm {
    margin-top: 10px;
}

/* Responsive styles */
@media (max-width: 767px) {
    .export-data-page .ibox-tools {
        float: none;
        margin-top: 10px;
        justify-content: space-between;
        width: 100%;
    }
    
    .export-data-page .middle-column:before {
        display: none;
    }
    
    .export-data-page .checkbox-group {
        margin-bottom: 20px;
    }
    
    .export-data-page .section-headers {
        margin-top: 10px;
        margin-bottom: 5px;
    }
    
    .export-data-page .switch-container {
        justify-content: flex-start;
        margin-bottom: 15px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .export-data-page .ibox-content {
        padding: 15px;
    }
    
    .export-data-page .middle-column:before {
        left: -10px;
    }
}

@media (min-width: 992px) {
    .export-data-page .row {
        display: flex;
        flex-wrap: wrap;
    }
}

/* Custom styles for plans directive */
.plans-table .ibox {
    clear: both;
    margin-bottom: 25px;
    margin-top: 0;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
    border-radius: 4px;
    overflow: hidden;
}

.plans-table .reduced-spacing {
    margin-bottom: 15px;
}

.plans-table .mb-1 {
    margin-bottom: 10px;
}

.plans-table .py-1 {
    padding-top: 5px;
    padding-bottom: 5px;
}

.plans-table .py-2 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.plans-table .m-0 {
    margin: 0;
}

.plans-table .mb-0 {
    margin-bottom: 0;
}

/* Title and button layout */
.plans-table .ibox-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.plans-table .title-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.plans-table .title-actions {
    display: flex;
    gap: 5px;
    margin-left: auto;
}

/* Button styling */
.plans-table .btn {
    border-radius: 3px !important;
}

.plans-table .btn-xs {
    padding: 1px 5px;
}

/* Action column styling */
.plans-table .action-column {
    width: 120px !important;
    min-width: 120px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.plans-table .action-buttons-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 5px !important;
    min-width: 80px !important;
}

.plans-table .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: 3px !important;
    transition: all 0.2s;
}

.plans-table .action-buttons-container .btn i {
    margin: 0 !important;
    font-size: 14px !important;
}

/* Enhanced sticky header functionality */
.plans-table table.stick-header {
    position: relative !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.plans-table table.stick-header thead.sortable th {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background-color: #f5f5f5 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    border-bottom: 1px solid #e7eaec !important;
}

/* Table container for sticky header functionality */
.plans-table div[table-container] {
    width: 100% !important;
    position: relative !important;
    max-height: 500px !important;
    overflow-y: auto !important;
}

/* Text alignment helpers */
.plans-table .text-right {
    text-align: right !important;
}

.plans-table .text-center {
    text-align: center !important;
}

/* Responsive styling */
@media (max-width: 767px) {
    .plans-table .action-column {
        width: 100px !important;
        min-width: 100px !important;
    }
    
    .plans-table .action-buttons-container {
        gap: 2px !important;
    }
    
    .plans-table .action-buttons-container .btn {
        padding: 3px 6px !important;
        min-width: 26px !important;
        height: 26px !important;
    }
}

/* Custom scrollbar for better appearance */
.plans-table div[table-container]::-webkit-scrollbar {
    width: 8px;
    height: 8px; /* For horizontal scrollbar */
}

.plans-table div[table-container]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.plans-table div[table-container]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.plans-table div[table-container]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Ensure responsive column visibility */
@media (max-width: 991px) {
    .plans-table .d-none.d-lg-table-cell {
        display: none !important;
    }
    
    .plans-table .d-none.d-md-table-cell {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .plans-table .d-none.d-lg-table-cell {
        display: table-cell !important;
    }
}

@media (min-width: 768px) {
    .plans-table .d-none.d-md-table-cell {
        display: table-cell !important;
    }
}

/* Custom styles for comparative view directive */
.comparative-view-table .ibox {
    clear: both;
    margin-bottom: 25px;
    margin-top: 0;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
    border-radius: 4px;
    overflow: hidden;
}

.comparative-view-table .reduced-spacing {
    margin-bottom: 15px;
}

.comparative-view-table .mb-1 {
    margin-bottom: 10px;
}

.comparative-view-table .mt-1 {
    margin-top: 5px;
}

.comparative-view-table .py-1 {
    padding-top: 5px;
    padding-bottom: 5px;
}

.comparative-view-table .py-2 {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Title and button layout */
.comparative-view-table .ibox-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comparative-view-table .title-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.comparative-view-table .title-actions {
    display: flex;
    gap: 5px;
    margin-left: auto;
}

/* Filter container and segments */
.comparative-view-table .filter-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
}

.comparative-view-table .filter-segment {
    padding: 0 10px;
}

.comparative-view-table .code-segment {
    flex: 1;
    min-width: 300px;
    max-width: 500px;
}

.comparative-view-table .button-segment {
    min-width: 150px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.comparative-view-table .filter-label {
    display: inline-block;
    margin-bottom: 5px;
    font-weight: 600;
    white-space: normal; /* Allow wrapping */
}

.comparative-view-table .filter-input-group {
    display: flex;
    align-items: center;
    width: 100%;
}

.comparative-view-table .filter-input-group input {
    flex: 1;
    height: 34px;
    padding: 6px 12px;
}

.comparative-view-table .filter-buttons {
    display: flex;
    white-space: nowrap;
}

.comparative-view-table .filter-buttons .btn {
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    margin-left: 1px;
}

/* Apply filters button */
.comparative-view-table .apply-filters-btn {
    height: 34px;
    padding: 6px 16px;
    white-space: nowrap;
    font-weight: bold;
}

/* Button styling */
.comparative-view-table .btn {
    border-radius: 3px !important;
}

/* Make both header rows sticky */
.comparative-view-table table.stick-header thead.filter-header tr th,
.comparative-view-table table.stick-header thead.sortable tr.section-header-row th,
.comparative-view-table table.stick-header thead.sortable tr:last-child th {
    position: sticky !important;
    background-color: #f5f5f5 !important;
    z-index: 10 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

.comparative-view-table table.stick-header thead.filter-header tr th {
    top: 0 !important;
    z-index: 11 !important; /* Higher z-index to be above other header rows */
}

.comparative-view-table table.stick-header thead.sortable tr.section-header-row th {
    top: 65px !important; /* Adjusted based on the height of the filter row */
}

.comparative-view-table table.stick-header thead.sortable tr:last-child th {
    top: 105px !important; /* Adjusted based on the heights of the filter row and section header */
}

/* Section headers */
.comparative-view-table .section-header {
    background-color: #f5f5f5;
    border-bottom: 1px solid #e7eaec;
    padding: 5px 0;
}

.comparative-view-table .section-title {
    font-weight: 600;
    display: inline-block;
    font-size: 14px;
}

/* Text alignment helpers */
.comparative-view-table .text-center {
    text-align: center !important;
}

.comparative-view-table .text-right {
    text-align: right !important;
}

/* Table container for sticky header functionality */
.comparative-view-table div[table-container] {
    width: 100% !important;
    position: relative !important;
    max-height: 500px !important;
    overflow-y: auto !important;
}

/* Responsive styling */
@media (max-width: 991px) {
    .comparative-view-table .filter-container {
        flex-direction: column;
        align-items: stretch;
    }
    
    .comparative-view-table .filter-segment {
        width: 100%;
        margin-bottom: 10px;
        padding: 0;
    }
    
    .comparative-view-table .button-segment {
        justify-content: flex-end;
    }
    
    /* Adjust sticky positions for smaller screens */
    .comparative-view-table table.stick-header thead.sortable tr.section-header-row th {
        top: 170px !important; /* Increased for mobile due to stacked filter segments */
    }
    
    .comparative-view-table table.stick-header thead.sortable tr:last-child th {
        top: 210px !important; /* Increased for mobile */
    }
}

/* Custom scrollbar for better appearance */
.comparative-view-table div[table-container]::-webkit-scrollbar {
    width: 8px;
    height: 8px; /* For horizontal scrollbar */
}

.comparative-view-table div[table-container]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.comparative-view-table div[table-container]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.comparative-view-table div[table-container]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* === HEADS DIRECTIVE SPECIFIC STYLES === */
.heads-directive .ibox {
    clear: both;
    margin-bottom: 25px;
    margin-top: 0;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
    border-radius: 4px;
    overflow: hidden;
}

.heads-directive .reduced-spacing {
    margin-bottom: 15px;
}

.heads-directive .mb-1 {
    margin-bottom: 10px;
}

.heads-directive .py-1 {
    padding-top: 5px;
    padding-bottom: 5px;
}

.heads-directive .py-2 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.heads-directive .m-0 {
    margin: 0;
}

.heads-directive .mb-0 {
    margin-bottom: 0;
}

/* Panel styling specifics */
.heads-directive .panel-danger {
    border-color: #ed5565;
}

.heads-directive .panel-danger > .panel-heading {
    color: #fff;
    background-color: lightpink;
    border-color: #ed5565;
    padding: 8px 15px;
}

/* Title bar with improved button spacing */
.heads-directive .ibox-title {
    background-color: #ffffff;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 3px 0 0;
    color: inherit;
    margin-bottom: 0;
    padding: 14px 15px 7px;
    min-height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.heads-directive .ibox-title h5 {
    display: inline-block;
    font-size: 14px;
    margin: 0;
    padding: 0;
    text-overflow: ellipsis;
    float: left;
    font-weight: 600;
}

.heads-directive .ibox-content {
    background-color: #ffffff;
    color: inherit;
    padding: 15px 20px 20px 20px;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0px;
}

/* Button group with improved styling */
.heads-directive .btn-group-improved {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    margin-bottom: 0 !important;
    justify-content: flex-end !important;
}

/* Icon-only button styling */
.heads-directive .btn-icon {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 2px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.heads-directive .btn-icon i {
    font-size: 14px !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* Button hover effects */
.heads-directive .btn-icon:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
}

.heads-directive .btn-icon:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Sticky header implementation */
.heads-directive table.stick-header {
    position: relative !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

.heads-directive table.stick-header thead.sortable th {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background-color: #f5f5f5 !important;
    border-bottom: 1px solid #e7e7e7 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    padding: 8px 4px;
    vertical-align: middle;
    font-weight: 600;
}

/* Table container for sticky header functionality */
.heads-directive div[table-container] {
    width: 100% !important;
    position: relative !important;
    max-height: 400px !important;
    overflow-y: auto !important;
}

/* Custom scrollbar for better appearance */
.heads-directive div[table-container]::-webkit-scrollbar {
    width: 8px;
    height: 8px; /* For horizontal scrollbar */
}

.heads-directive div[table-container]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.heads-directive div[table-container]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.heads-directive div[table-container]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Action column styling */
.heads-directive .action-column {
    width: 160px !important;
    min-width: 160px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* Action buttons container */
.heads-directive .action-buttons-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 120px !important;
}

/* Action button styling */
.heads-directive .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: 28px !important;
    height: 28px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease;
}

.heads-directive .action-buttons-container .btn i {
    margin: 0 !important;
    font-size: 14px !important;
}

/* Button colors */
.heads-directive .action-buttons-container .btn-warning {
    background-color: #f8ac59;
    border-color: #f8ac59;
    color: white;
}

.heads-directive .action-buttons-container .btn-warning:hover {
    background-color: #f7a54a;
    border-color: #f7a54a;
}

.heads-directive .action-buttons-container .btn-white-altered {
    background-color: #f3f3f4;
    border-color: #e7eaec;
    color: #676a6c;
}

.heads-directive .action-buttons-container .btn-white-altered:hover {
    background-color: #e7e7e7;
    border-color: #d9d9d9;
}

.heads-directive .action-buttons-container .btn-danger {
    background-color: #ed5565;
    border-color: #ed5565;
    color: white;
}

.heads-directive .action-buttons-container .btn-danger:hover {
    background-color: #ec4758;
    border-color: #ec4758;
}

/* Table styling */
.heads-directive .table.tableNoPadding td,
.heads-directive .table.tableNoPadding th {
    padding: 8px 4px;
    vertical-align: middle;
}

.heads-directive .table.tableNoMarginBottom {
    margin-bottom: 0;
}

/* Improved hover states for table rows */
.heads-directive .table > tbody > tr:hover {
    background-color: rgba(26, 179, 148, 0.05);
    transition: background-color 0.15s ease;
}

/* Selected row styling */
.heads-directive .table > tbody > tr.st-selected {
    background-color: rgba(26, 179, 148, 0.15);
}

/* Responsive styling for the action buttons */
@media (max-width: 767px) {
    .heads-directive .action-column {
        width: 200px !important;
        min-width: 200px !important;
    }
    
    .heads-directive .action-buttons-container {
        gap: 6px !important;
    }
    
    .heads-directive .action-buttons-container .btn {
        padding: 6px 8px !important;
        min-width: 32px !important;
        height: 32px !important;
    }
    
    .heads-directive .action-buttons-container .btn i {
        font-size: 15px !important;
    }
    
    .heads-directive .btn-icon {
        width: 36px !important;
        height: 36px !important;
    }
    
    .heads-directive .btn-icon i {
        font-size: 16px !important;
    }
}

/* Fix for table on medium screens */
@media (min-width: 768px) and (max-width: 991px) {
    .heads-directive .action-column {
        width: 140px !important;
        min-width: 140px !important;
    }
    
    .heads-directive .action-buttons-container {
        gap: 3px !important;
    }
    
    .heads-directive .action-buttons-container .btn {
        padding: 4px 6px !important;
        min-width: 26px !important;
        height: 26px !important;
    }
}

/* Force hardware acceleration for smoother scrolling */
.heads-directive table.stick-header thead.sortable th {
    will-change: transform !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}

/* Proper overflow handling */
.heads-directive .ibox, 
.heads-directive .ibox-content, 
.heads-directive .wrapper-content, 
.heads-directive .table-responsive {
    overflow: visible !important;
}

/* Responsive hiding of function_code_title column on smaller screens */
@media (max-width: 991px) {
    .heads-directive .d-none.d-lg-table-cell {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .heads-directive .d-none.d-lg-table-cell {
        display: table-cell !important;
    }
}

/* === PARTS DIRECTIVE SPECIFIC STYLES === */
.parts-directive .ibox {
    clear: both;
    margin-bottom: 25px;
    margin-top: 0;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
    border-radius: 4px;
    overflow: hidden;
}

.parts-directive .reduced-spacing {
    margin-bottom: 15px;
}

.parts-directive .mb-1 {
    margin-bottom: 10px;
}

.parts-directive .py-1 {
    padding-top: 5px;
    padding-bottom: 5px;
}

.parts-directive .py-2 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.parts-directive .m-0 {
    margin: 0;
}

.parts-directive .mb-0 {
    margin-bottom: 0;
}

/* Panel styling specifics */
.parts-directive .panel-danger {
    border-color: #ed5565;
}

.parts-directive .panel-danger > .panel-heading {
    color: #fff;
    background-color: lightpink;
    border-color: #ed5565;
    padding: 8px 15px;
}

/* Title bar with improved button spacing */
.parts-directive .ibox-title {
    background-color: #ffffff;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 3px 0 0;
    color: inherit;
    margin-bottom: 0;
    padding: 14px 15px 7px;
    min-height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.parts-directive .ibox-title h5 {
    display: inline-block;
    font-size: 14px;
    margin: 0;
    padding: 0;
    text-overflow: ellipsis;
    float: left;
    font-weight: 600;
}

.parts-directive .ibox-content {
    background-color: #ffffff;
    color: inherit;
    padding: 15px 20px 20px 20px;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0px;
}

/* Button group with improved styling */
.parts-directive .btn-group-improved {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    margin-bottom: 0 !important;
    justify-content: flex-end !important;
}

/* Icon-only button styling */
.parts-directive .btn-icon {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 2px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.parts-directive .btn-icon i {
    font-size: 14px !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* Button hover effects */
.parts-directive .btn-icon:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
}

.parts-directive .btn-icon:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Sticky header implementation */
.parts-directive table.stick-header {
    position: relative !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

.parts-directive table.stick-header thead.sortable th {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background-color: #f5f5f5 !important;
    border-bottom: 1px solid #e7e7e7 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    padding: 8px 4px;
    vertical-align: middle;
    font-weight: 600;
}

/* Table container for sticky header functionality */
.parts-directive div[table-container] {
    width: 100% !important;
    position: relative !important;
    max-height: 400px !important;
    overflow-y: auto !important;
}

/* Custom scrollbar for better appearance */
.parts-directive div[table-container]::-webkit-scrollbar {
    width: 8px;
    height: 8px; /* For horizontal scrollbar */
}

.parts-directive div[table-container]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.parts-directive div[table-container]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.parts-directive div[table-container]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Action column styling */
.parts-directive .action-column {
    width: 160px !important;
    min-width: 160px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* Action buttons container */
.parts-directive .action-buttons-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 120px !important;
}

/* Action button styling */
.parts-directive .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: 28px !important;
    height: 28px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease;
}

.parts-directive .action-buttons-container .btn i {
    margin: 0 !important;
    font-size: 14px !important;
}

/* Button colors */
.parts-directive .action-buttons-container .btn-warning {
    background-color: #f8ac59;
    border-color: #f8ac59;
    color: white;
}

.parts-directive .action-buttons-container .btn-warning:hover {
    background-color: #f7a54a;
    border-color: #f7a54a;
}

.parts-directive .action-buttons-container .btn-white-altered {
    background-color: #f3f3f4;
    border-color: #e7eaec;
    color: #676a6c;
}

.parts-directive .action-buttons-container .btn-white-altered:hover {
    background-color: #e7e7e7;
    border-color: #d9d9d9;
}

.parts-directive .action-buttons-container .btn-danger {
    background-color: #ed5565;
    border-color: #ed5565;
    color: white;
}

.parts-directive .action-buttons-container .btn-danger:hover {
    background-color: #ec4758;
    border-color: #ec4758;
}

/* Table styling */
.parts-directive .table.tableNoPadding td,
.parts-directive .table.tableNoPadding th {
    padding: 8px 4px;
    vertical-align: middle;
}

.parts-directive .table.tableNoMarginBottom {
    margin-bottom: 0;
}

/* Improved hover states for table rows */
.parts-directive .table > tbody > tr:hover {
    background-color: rgba(26, 179, 148, 0.05);
    transition: background-color 0.15s ease;
}

/* Selected row styling */
.parts-directive .table > tbody > tr.st-selected {
    background-color: rgba(26, 179, 148, 0.15);
}

/* Responsive styling for the action buttons */
@media (max-width: 767px) {
    .parts-directive .action-column {
        width: 200px !important;
        min-width: 200px !important;
    }
    
    .parts-directive .action-buttons-container {
        gap: 6px !important;
    }
    
    .parts-directive .action-buttons-container .btn {
        padding: 6px 8px !important;
        min-width: 32px !important;
        height: 32px !important;
    }
    
    .parts-directive .action-buttons-container .btn i {
        font-size: 15px !important;
    }
    
    .parts-directive .btn-icon {
        width: 36px !important;
        height: 36px !important;
    }
    
    .parts-directive .btn-icon i {
        font-size: 16px !important;
    }
}

/* Fix for table on medium screens */
@media (min-width: 768px) and (max-width: 991px) {
    .parts-directive .action-column {
        width: 140px !important;
        min-width: 140px !important;
    }
    
    .parts-directive .action-buttons-container {
        gap: 3px !important;
    }
    
    .parts-directive .action-buttons-container .btn {
        padding: 4px 6px !important;
        min-width: 26px !important;
        height: 26px !important;
    }
}

/* Force hardware acceleration for smoother scrolling */
.parts-directive table.stick-header thead.sortable th {
    will-change: transform !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}

/* Proper overflow handling */
.parts-directive .ibox, 
.parts-directive .ibox-content, 
.parts-directive .wrapper-content, 
.parts-directive .table-responsive {
    overflow: visible !important;
}

/* Responsive hiding of less important columns on smaller screens */
@media (max-width: 991px) {
    .parts-directive .d-none.d-lg-table-cell {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .parts-directive .d-none.d-lg-table-cell {
        display: table-cell !important;
    }
}

@media (max-width: 767px) {
    .parts-directive .d-none.d-md-table-cell {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .parts-directive .d-none.d-md-table-cell {
        display: table-cell !important;
    }
}

/* === CHART OF ACCOUNT DIRECTIVE SPECIFIC STYLES === */
.chart-of-account-directive .ibox {
    clear: both;
    margin-bottom: 25px;
    margin-top: 0;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
    border-radius: 4px;
    overflow: hidden;
}

.chart-of-account-directive .reduced-spacing {
    margin-bottom: 15px;
}

.chart-of-account-directive .mb-1 {
    margin-bottom: 10px;
}

.chart-of-account-directive .py-1 {
    padding-top: 5px;
    padding-bottom: 5px;
}

.chart-of-account-directive .py-2 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.chart-of-account-directive .m-0 {
    margin: 0;
}

.chart-of-account-directive .mb-0 {
    margin-bottom: 0;
}

/* Title bar with improved button spacing */
.chart-of-account-directive .ibox-title {
    background-color: #ffffff;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 3px 0 0;
    color: inherit;
    margin-bottom: 0;
    padding: 14px 15px 7px;
    min-height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chart-of-account-directive .ibox-title h5 {
    display: inline-block;
    font-size: 14px;
    margin: 0;
    padding: 0;
    text-overflow: ellipsis;
    float: left;
    font-weight: 600;
}

.chart-of-account-directive .ibox-content {
    background-color: #ffffff;
    color: inherit;
    padding: 15px 20px 20px 20px;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0px;
}

/* Button group with improved styling */
.chart-of-account-directive .btn-group-improved {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    margin-bottom: 0 !important;
    justify-content: flex-end !important;
}

/* Icon-only button styling */
.chart-of-account-directive .btn-icon {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 2px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.chart-of-account-directive .btn-icon i {
    font-size: 14px !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* Button hover effects */
.chart-of-account-directive .btn-icon:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
}

.chart-of-account-directive .btn-icon:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Sticky header implementation */
.chart-of-account-directive table.stick-header {
    position: relative !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

.chart-of-account-directive table.stick-header thead.sortable th {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background-color: #f5f5f5 !important;
    border-bottom: 1px solid #e7e7e7 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    padding: 8px 4px;
    vertical-align: middle;
    font-weight: 600;
}

/* Table container for sticky header functionality */
.chart-of-account-directive div[table-container] {
    width: 100% !important;
    position: relative !important;
    max-height: 400px !important;
    overflow-y: auto !important;
}

/* Custom scrollbar for better appearance */
.chart-of-account-directive div[table-container]::-webkit-scrollbar {
    width: 8px;
    height: 8px; /* For horizontal scrollbar */
}

.chart-of-account-directive div[table-container]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.chart-of-account-directive div[table-container]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.chart-of-account-directive div[table-container]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Action column styling */
.chart-of-account-directive .action-column {
    width: 120px !important;
    min-width: 120px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* Action buttons container */
.chart-of-account-directive .action-buttons-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 80px !important;
}

/* Action button styling */
.chart-of-account-directive .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: 28px !important;
    height: 28px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease;
}

.chart-of-account-directive .action-buttons-container .btn i {
    margin: 0 !important;
    font-size: 14px !important;
}

/* Button colors */
.chart-of-account-directive .action-buttons-container .btn-white-altered {
    background-color: #f3f3f4;
    border-color: #e7eaec;
    color: #676a6c;
}

.chart-of-account-directive .action-buttons-container .btn-white-altered:hover {
    background-color: #e7e7e7;
    border-color: #d9d9d9;
}

/* Table styling */
.chart-of-account-directive .table.tableNoPadding td,
.chart-of-account-directive .table.tableNoPadding th {
    padding: 8px 4px;
    vertical-align: middle;
}

.chart-of-account-directive .table.tableNoMarginBottom {
    margin-bottom: 0;
}

/* Improved hover states for table rows */
.chart-of-account-directive .table > tbody > tr:hover {
    background-color: rgba(26, 179, 148, 0.05);
    transition: background-color 0.15s ease;
}

/* Selected row styling */
.chart-of-account-directive .table > tbody > tr.st-selected {
    background-color: rgba(26, 179, 148, 0.15);
}

/* Responsive styling for the action buttons */
@media (max-width: 767px) {
    .chart-of-account-directive .action-column {
        width: 140px !important;
        min-width: 140px !important;
    }
    
    .chart-of-account-directive .action-buttons-container {
        gap: 6px !important;
    }
    
    .chart-of-account-directive .action-buttons-container .btn {
        padding: 6px 8px !important;
        min-width: 32px !important;
        height: 32px !important;
    }
    
    .chart-of-account-directive .action-buttons-container .btn i {
        font-size: 15px !important;
    }
    
    .chart-of-account-directive .btn-icon {
        width: 36px !important;
        height: 36px !important;
    }
    
    .chart-of-account-directive .btn-icon i {
        font-size: 16px !important;
    }
}

/* Fix for table on medium screens */
@media (min-width: 768px) and (max-width: 991px) {
    .chart-of-account-directive .action-column {
        width: 100px !important;
        min-width: 100px !important;
    }
    
    .chart-of-account-directive .action-buttons-container {
        gap: 3px !important;
    }
    
    .chart-of-account-directive .action-buttons-container .btn {
        padding: 4px 6px !important;
        min-width: 26px !important;
        height: 26px !important;
    }
}

/* Force hardware acceleration for smoother scrolling */
.chart-of-account-directive table.stick-header thead.sortable th {
    will-change: transform !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}

/* Proper overflow handling */
.chart-of-account-directive .ibox, 
.chart-of-account-directive .ibox-content, 
.chart-of-account-directive .wrapper-content, 
.chart-of-account-directive .table-responsive {
    overflow: visible !important;
}

/* === FINANCE SOURCE DIRECTIVE SPECIFIC STYLES === */
.finance-source-directive .ibox {
    clear: both;
    margin-bottom: 25px;
    margin-top: 0;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
    border-radius: 4px;
    overflow: hidden;
}

.finance-source-directive .reduced-spacing {
    margin-bottom: 15px;
}

.finance-source-directive .mb-1 {
    margin-bottom: 10px;
}

.finance-source-directive .py-1 {
    padding-top: 5px;
    padding-bottom: 5px;
}

.finance-source-directive .py-2 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.finance-source-directive .m-0 {
    margin: 0;
}

.finance-source-directive .mb-0 {
    margin-bottom: 0;
}

/* Title bar with improved button spacing */
.finance-source-directive .ibox-title {
    background-color: #ffffff;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 3px 0 0;
    color: inherit;
    margin-bottom: 0;
    padding: 14px 15px 7px;
    min-height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.finance-source-directive .ibox-title h5 {
    display: inline-block;
    font-size: 14px;
    margin: 0;
    padding: 0;
    text-overflow: ellipsis;
    float: left;
    font-weight: 600;
}

.finance-source-directive .ibox-content {
    background-color: #ffffff;
    color: inherit;
    padding: 15px 20px 20px 20px;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0px;
}

/* Button group with improved styling */
.finance-source-directive .btn-group-improved {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    margin-bottom: 0 !important;
    justify-content: flex-end !important;
}

/* Icon-only button styling */
.finance-source-directive .btn-icon {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 2px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.finance-source-directive .btn-icon i {
    font-size: 14px !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* Button hover effects */
.finance-source-directive .btn-icon:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
}

.finance-source-directive .btn-icon:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Button colors */
.finance-source-directive .btn-warning.btn-icon {
    background-color: #f8ac59 !important;
    border-color: #f8ac59 !important;
    color: white !important;
}

.finance-source-directive .btn-warning.btn-icon:hover {
    background-color: #f7a54a !important;
    border-color: #f7a54a !important;
}

/* Improved checkbox styles */
.finance-source-directive .checkbox.checkbox-warning input[type="checkbox"]:checked + label::before {
    background-color: #f8ac59;
    border-color: #f8ac59;
}

.finance-source-directive .checkbox.checkbox-warning input[type="checkbox"]:checked + label::after {
    color: #fff;
}

/* Sticky header implementation */
.finance-source-directive table.stick-header {
    position: relative !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

.finance-source-directive table.stick-header thead.sortable th {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background-color: #f5f5f5 !important;
    border-bottom: 1px solid #e7e7e7 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    padding: 8px 4px;
    vertical-align: middle;
    font-weight: 600;
}

/* Table container for sticky header functionality */
.finance-source-directive div[table-container] {
    width: 100% !important;
    position: relative !important;
    max-height: 400px !important;
    overflow-y: auto !important;
}

/* Custom scrollbar for better appearance */
.finance-source-directive div[table-container]::-webkit-scrollbar {
    width: 8px;
    height: 8px; /* For horizontal scrollbar */
}

.finance-source-directive div[table-container]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.finance-source-directive div[table-container]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.finance-source-directive div[table-container]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Action column styling */
.finance-source-directive .action-column {
    width: 120px !important;
    min-width: 120px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* Action buttons container */
.finance-source-directive .action-buttons-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 80px !important;
}

/* Action button styling */
.finance-source-directive .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: 28px !important;
    height: 28px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease;
}

.finance-source-directive .action-buttons-container .btn i {
    margin: 0 !important;
    font-size: 14px !important;
}

/* Button colors */
.finance-source-directive .action-buttons-container .btn-white-altered {
    background-color: #f3f3f4;
    border-color: #e7eaec;
    color: #676a6c;
}

.finance-source-directive .action-buttons-container .btn-white-altered:hover {
    background-color: #e7e7e7;
    border-color: #d9d9d9;
}

/* Table styling */
.finance-source-directive .table.tableNoPadding td,
.finance-source-directive .table.tableNoPadding th {
    padding: 8px 4px;
    vertical-align: middle;
}

.finance-source-directive .table.tableNoMarginBottom {
    margin-bottom: 0;
}

/* Improved hover states for table rows */
.finance-source-directive .table > tbody > tr:hover {
    background-color: rgba(26, 179, 148, 0.05);
    transition: background-color 0.15s ease;
}

/* Selected row styling */
.finance-source-directive .table > tbody > tr.st-selected {
    background-color: rgba(26, 179, 148, 0.15);
}

/* Force hardware acceleration for smoother scrolling */
.finance-source-directive table.stick-header thead.sortable th {
    will-change: transform !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}

/* Proper overflow handling */
.finance-source-directive .ibox, 
.finance-source-directive .ibox-content, 
.finance-source-directive .wrapper-content, 
.finance-source-directive .table-responsive {
    overflow: visible !important;
}

/* === FUNCTION CODES DIRECTIVE SPECIFIC STYLES === */
.function-codes-directive .ibox {
    clear: both;
    margin-bottom: 25px;
    margin-top: 0;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
    border-radius: 4px;
    overflow: hidden;
}

.function-codes-directive .reduced-spacing {
    margin-bottom: 15px;
}

.function-codes-directive .mb-1 {
    margin-bottom: 10px;
}

.function-codes-directive .py-1 {
    padding-top: 5px;
    padding-bottom: 5px;
}

.function-codes-directive .py-2 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.function-codes-directive .m-0 {
    margin: 0;
}

.function-codes-directive .mb-0 {
    margin-bottom: 0;
}

/* Title bar with improved button spacing */
.function-codes-directive .ibox-title {
    background-color: #ffffff;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 3px 0 0;
    color: inherit;
    margin-bottom: 0;
    padding: 14px 15px 7px;
    min-height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.function-codes-directive .ibox-title h5 {
    display: inline-block;
    font-size: 14px;
    margin: 0;
    padding: 0;
    text-overflow: ellipsis;
    float: left;
    font-weight: 600;
}

.function-codes-directive .ibox-content {
    background-color: #ffffff;
    color: inherit;
    padding: 15px 20px 20px 20px;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0px;
}

/* Button group with improved styling */
.function-codes-directive .btn-group-improved {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    margin-bottom: 0 !important;
    justify-content: flex-end !important;
}

/* Icon-only button styling */
.function-codes-directive .btn-icon {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 2px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.function-codes-directive .btn-icon i {
    font-size: 14px !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* Button hover effects */
.function-codes-directive .btn-icon:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
}

.function-codes-directive .btn-icon:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Button colors */
.function-codes-directive .btn-primary.btn-icon {
    background-color: #1ab394 !important;
    border-color: #1ab394 !important;
    color: white !important;
}

.function-codes-directive .btn-primary.btn-icon:hover {
    background-color: #18a689 !important;
    border-color: #18a689 !important;
}

/* Sticky header implementation */
.function-codes-directive table.stick-header {
    position: relative !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

.function-codes-directive table.stick-header thead.sortable th {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background-color: #f5f5f5 !important;
    border-bottom: 1px solid #e7e7e7 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    padding: 8px 4px;
    vertical-align: middle;
    font-weight: 600;
}

/* Table container for sticky header functionality */
.function-codes-directive div[table-container] {
    width: 100% !important;
    position: relative !important;
    max-height: 400px !important;
    overflow-y: auto !important;
}

/* Custom scrollbar for better appearance */
.function-codes-directive div[table-container]::-webkit-scrollbar {
    width: 8px;
    height: 8px; /* For horizontal scrollbar */
}

.function-codes-directive div[table-container]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.function-codes-directive div[table-container]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.function-codes-directive div[table-container]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Action column styling */
.function-codes-directive .action-column {
    width: 120px !important;
    min-width: 120px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* Action buttons container */
.function-codes-directive .action-buttons-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 80px !important;
}

/* Action button styling */
.function-codes-directive .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: 28px !important;
    height: 28px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease;
}

.function-codes-directive .action-buttons-container .btn i {
    margin: 0 !important;
    font-size: 14px !important;
}

/* Button colors */
.function-codes-directive .action-buttons-container .btn-white-altered {
    background-color: #f3f3f4;
    border-color: #e7eaec;
    color: #676a6c;
}

.function-codes-directive .action-buttons-container .btn-white-altered:hover {
    background-color: #e7e7e7;
    border-color: #d9d9d9;
}

/* Table styling */
.function-codes-directive .table.tableNoPadding td,
.function-codes-directive .table.tableNoPadding th {
    padding: 8px 4px;
    vertical-align: middle;
}

.function-codes-directive .table.tableNoMarginBottom {
    margin-bottom: 0;
}

/* Improved hover states for table rows */
.function-codes-directive .table > tbody > tr:hover {
    background-color: rgba(26, 179, 148, 0.05);
    transition: background-color 0.15s ease;
}

/* Selected row styling */
.function-codes-directive .table > tbody > tr.st-selected {
    background-color: rgba(26, 179, 148, 0.15);
}

/* Responsive styling for the action buttons */
@media (max-width: 767px) {
    .function-codes-directive .action-column {
        width: 140px !important;
        min-width: 140px !important;
    }
    
    .function-codes-directive .action-buttons-container {
        gap: 6px !important;
    }
    
    .function-codes-directive .action-buttons-container .btn {
        padding: 6px 8px !important;
        min-width: 32px !important;
        height: 32px !important;
    }
    
    .function-codes-directive .action-buttons-container .btn i {
        font-size: 15px !important;
    }
    
    .function-codes-directive .btn-icon {
        width: 36px !important;
        height: 36px !important;
    }
    
    .function-codes-directive .btn-icon i {
        font-size: 16px !important;
    }
}

/* Fix for table on medium screens */
@media (min-width: 768px) and (max-width: 991px) {
    .function-codes-directive .action-column {
        width: 100px !important;
        min-width: 100px !important;
    }
    
    .function-codes-directive .action-buttons-container {
        gap: 3px !important;
    }
    
    .function-codes-directive .action-buttons-container .btn {
        padding: 4px 6px !important;
        min-width: 26px !important;
        height: 26px !important;
    }
}

/* Force hardware acceleration for smoother scrolling */
.function-codes-directive table.stick-header thead.sortable th {
    will-change: transform !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}

/* Proper overflow handling */
.function-codes-directive .ibox, 
.function-codes-directive .ibox-content, 
.function-codes-directive .wrapper-content, 
.function-codes-directive .table-responsive {
    overflow: visible !important;
}

/* === HOME DIRECTIVE SPECIFIC STYLES === */
.home-directive .ibox {
    clear: both;
    margin-bottom: 25px;
    margin-top: 0;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
    border-radius: 4px;
    overflow: hidden;
}

.home-directive .reduced-spacing {
    margin-bottom: 15px;
}

.home-directive .py-1 {
    padding-top: 5px;
    padding-bottom: 5px;
}

.home-directive .py-2 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.home-directive .m-0 {
    margin: 0;
}

/* Title bar with improved styling */
.home-directive .ibox-title {
    background-color: #ffffff;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 3px 0 0;
    color: inherit;
    margin-bottom: 0;
    padding: 14px 15px 7px;
    min-height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.home-directive .ibox-title h5 {
    display: inline-block;
    font-size: 14px;
    margin: 0;
    padding: 0;
    text-overflow: ellipsis;
    float: left;
    font-weight: 600;
}

.home-directive .ibox-content {
    background-color: #ffffff;
    color: inherit;
    padding: 15px 20px 20px 20px;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0px;
}

/* Improved embed container for better responsiveness */
.home-directive .embed-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%; /* Aspect ratio */
    overflow: hidden;
}

.home-directive .pdf-embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .home-directive .embed-container {
        padding-bottom: 100%; /* Make taller on mobile */
    }
}

@media (min-width: 992px) {
    .home-directive .embed-container {
        padding-bottom: 65%; /* Not as tall on larger screens */
    }
}

/* Fix for Internet Explorer */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .home-directive .embed-container {
        height: 700px;
        padding-bottom: 0;
    }
    
    .home-directive .pdf-embed {
        position: relative;
        height: 100%;
    }
}

/* === LOG LIST DIRECTIVE SPECIFIC STYLES === */
.log-list-directive .ibox {
    clear: both;
    margin-bottom: 25px;
    margin-top: 0;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
    border-radius: 4px;
    overflow: hidden;
}

.log-list-directive .reduced-spacing {
    margin-bottom: 15px;
}

.log-list-directive .mb-1 {
    margin-bottom: 10px;
}

.log-list-directive .py-1 {
    padding-top: 5px;
    padding-bottom: 5px;
}

.log-list-directive .py-2 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.log-list-directive .m-0 {
    margin: 0;
}

.log-list-directive .mb-0 {
    margin-bottom: 0;
}

/* Title bar with improved button spacing */
.log-list-directive .ibox-title {
    background-color: #ffffff;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 3px 0 0;
    color: inherit;
    margin-bottom: 0;
    padding: 14px 15px 7px;
    min-height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.log-list-directive .ibox-title h5 {
    display: inline-block;
    font-size: 14px;
    margin: 0;
    padding: 0;
    text-overflow: ellipsis;
    float: left;
    font-weight: 600;
}

.log-list-directive .ibox-content {
    background-color: #ffffff;
    color: inherit;
    padding: 15px 20px 20px 20px;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0px;
}

/* Button group with improved styling */
.log-list-directive .btn-group-improved {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    margin-bottom: 0 !important;
    justify-content: flex-end !important;
}

/* Icon-only button styling */
.log-list-directive .btn-icon {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 2px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.log-list-directive .btn-icon i {
    font-size: 14px !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* Button hover effects */
.log-list-directive .btn-icon:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
}

.log-list-directive .btn-icon:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Button colors */
.log-list-directive .btn-primary.btn-icon {
    background-color: #1ab394 !important;
    border-color: #1ab394 !important;
    color: white !important;
}

.log-list-directive .btn-primary.btn-icon:hover {
    background-color: #18a689 !important;
    border-color: #18a689 !important;
}

/* Sticky header implementation */
.log-list-directive table.stick-header {
    position: relative !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

.log-list-directive table.stick-header thead.sortable th {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background-color: #f5f5f5 !important;
    border-bottom: 1px solid #e7e7e7 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    padding: 8px 4px;
    vertical-align: middle;
    font-weight: 600;
}

/* Table container for sticky header functionality */
.log-list-directive div[table-container] {
    width: 100% !important;
    position: relative !important;
    max-height: 400px !important;
    overflow-y: auto !important;
}

/* Custom scrollbar for better appearance */
.log-list-directive div[table-container]::-webkit-scrollbar {
    width: 8px;
    height: 8px; /* For horizontal scrollbar */
}

.log-list-directive div[table-container]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.log-list-directive div[table-container]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.log-list-directive div[table-container]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Action column styling */
.log-list-directive .action-column {
    width: 140px !important;
    min-width: 140px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* Action buttons container */
.log-list-directive .action-buttons-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 120px !important;
}

/* Action button styling */
.log-list-directive .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: 28px !important;
    height: 28px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease;
}

.log-list-directive .action-buttons-container .btn i {
    margin: 0 !important;
    font-size: 14px !important;
}

/* Button colors */
.log-list-directive .action-buttons-container .btn-white-altered {
    background-color: #f3f3f4;
    border-color: #e7eaec;
    color: #676a6c;
}

.log-list-directive .action-buttons-container .btn-white-altered:hover {
    background-color: #e7e7e7;
    border-color: #d9d9d9;
}

/* Table styling */
.log-list-directive .table.tableNoPadding td,
.log-list-directive .table.tableNoPadding th {
    padding: 8px 4px;
    vertical-align: middle;
}

.log-list-directive .table.tableNoMarginBottom {
    margin-bottom: 0;
}

/* Improved hover states for table rows */
.log-list-directive .table > tbody > tr:hover {
    background-color: rgba(26, 179, 148, 0.05);
    transition: background-color 0.15s ease;
}

/* Selected row styling */
.log-list-directive .table > tbody > tr.st-selected {
    background-color: rgba(26, 179, 148, 0.15);
}

/* Responsive styling for the action buttons */
@media (max-width: 767px) {
    .log-list-directive .action-column {
        width: 160px !important;
        min-width: 160px !important;
    }
    
    .log-list-directive .action-buttons-container {
        gap: 6px !important;
    }
    
    .log-list-directive .action-buttons-container .btn {
        padding: 6px 8px !important;
        min-width: 32px !important;
        height: 32px !important;
    }
    
    .log-list-directive .action-buttons-container .btn i {
        font-size: 15px !important;
    }
    
    .log-list-directive .btn-icon {
        width: 36px !important;
        height: 36px !important;
    }
    
    .log-list-directive .btn-icon i {
        font-size: 16px !important;
    }
}

/* Fix for table on medium screens */
@media (min-width: 768px) and (max-width: 991px) {
    .log-list-directive .action-column {
        width: 120px !important;
        min-width: 120px !important;
    }
    
    .log-list-directive .action-buttons-container {
        gap: 3px !important;
    }
    
    .log-list-directive .action-buttons-container .btn {
        padding: 4px 6px !important;
        min-width: 26px !important;
        height: 26px !important;
    }
}

/* Force hardware acceleration for smoother scrolling */
.log-list-directive table.stick-header thead.sortable th {
    will-change: transform !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}

/* Proper overflow handling */
.log-list-directive .ibox, 
.log-list-directive .ibox-content, 
.log-list-directive .wrapper-content, 
.log-list-directive .table-responsive {
    overflow: visible !important;
}

/* Loading spinner styling */
.log-list-directive .sk-spinner-wave.sk-spinner {
    margin: 20px auto;
    width: 50px;
    height: 30px;
    text-align: center;
    font-size: 10px;
}

.log-list-directive .sk-spinner-wave div {
    background-color: #1ab394;
    height: 100%;
    width: 6px;
    display: inline-block;
    margin: 0 1px;
    -webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
    animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
}

.log-list-directive .sk-spinner-wave .sk-rect1 {
    -webkit-animation-delay: -1.2s;
    animation-delay: -1.2s;
}

.log-list-directive .sk-spinner-wave .sk-rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.log-list-directive .sk-spinner-wave .sk-rect3 {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}

.log-list-directive .sk-spinner-wave .sk-rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.log-list-directive .sk-spinner-wave .sk-rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

@-webkit-keyframes sk-waveStretchDelay {
    0%, 40%, 100% {
        -webkit-transform: scaleY(0.4);
        transform: scaleY(0.4);
    }
    20% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}

@keyframes sk-waveStretchDelay {
    0%, 40%, 100% {
        -webkit-transform: scaleY(0.4);
        transform: scaleY(0.4);
    }
    20% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}

/* === PERFORMANCES DIRECTIVE COMMON STYLES === */
.performances-projects-directive .ibox,
.performances-activities-directive .ibox,
.performances-programs-directive .ibox {
    clear: both;
    margin-bottom: 25px;
    margin-top: 0;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
    border-radius: 4px;
    overflow: hidden;
}

.performances-projects-directive .ibox-title,
.performances-activities-directive .ibox-title,
.performances-programs-directive .ibox-title {
    background-color: #ffffff;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 3px 0 0;
    color: inherit;
    margin-bottom: 0;
    padding: 14px 15px 7px;
    min-height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.performances-projects-directive .ibox-title h5,
.performances-activities-directive .ibox-title h5,
.performances-programs-directive .ibox-title h5 {
    display: inline-block;
    font-size: 14px;
    margin: 0 0 7px;
    padding: 0;
    text-overflow: ellipsis;
    float: left;
    font-weight: 600;
}

.performances-projects-directive .ibox-content,
.performances-activities-directive .ibox-content,
.performances-programs-directive .ibox-content {
    background-color: #ffffff;
    color: inherit;
    padding: 15px 20px 20px 20px;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0px;
}

.performances-projects-directive .ibox-tools,
.performances-activities-directive .ibox-tools,
.performances-programs-directive .ibox-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    float: right;
}

/* Button styling */
.performances-projects-directive .btn-icon,
.performances-activities-directive .btn-icon,
.performances-programs-directive .btn-icon {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 2px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.performances-projects-directive .btn-icon i,
.performances-activities-directive .btn-icon i,
.performances-programs-directive .btn-icon i {
    font-size: 14px !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* Sticky header implementation */
.performances-projects-directive table.stick-header,
.performances-activities-directive table.stick-header,
.performances-programs-directive table.stick-header {
    position: relative !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

.performances-projects-directive table.stick-header thead.sortable th,
.performances-activities-directive table.stick-header thead.sortable th,
.performances-programs-directive table.stick-header thead.sortable th {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background-color: #f5f5f5 !important;
    border-bottom: 1px solid #e7e7e7 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    padding: 8px 4px;
    vertical-align: middle;
    font-weight: 600;
}

/* Table container for sticky header functionality */
.performances-projects-directive div[table-container],
.performances-activities-directive div[table-container],
.performances-programs-directive div[table-container] {
    width: 100% !important;
    position: relative !important;
    max-height: 400px !important;
    overflow-y: auto !important;
}

/* Force hardware acceleration for smoother scrolling */
.performances-projects-directive table.stick-header thead.sortable th,
.performances-activities-directive table.stick-header thead.sortable th,
.performances-programs-directive table.stick-header thead.sortable th {
    will-change: transform !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}

/* Proper overflow handling */
.performances-projects-directive .ibox, 
.performances-projects-directive .ibox-content, 
.performances-projects-directive .wrapper-content, 
.performances-projects-directive .table-responsive,
.performances-activities-directive .ibox, 
.performances-activities-directive .ibox-content, 
.performances-activities-directive .wrapper-content, 
.performances-activities-directive .table-responsive,
.performances-programs-directive .ibox, 
.performances-programs-directive .ibox-content, 
.performances-programs-directive .wrapper-content, 
.performances-programs-directive .table-responsive {
    overflow: visible !important;
}

/* Custom scrollbar for better appearance */
.performances-projects-directive div[table-container]::-webkit-scrollbar,
.performances-activities-directive div[table-container]::-webkit-scrollbar,
.performances-programs-directive div[table-container]::-webkit-scrollbar {
    width: 8px;
    height: 8px; /* For horizontal scrollbar */
}

.performances-projects-directive div[table-container]::-webkit-scrollbar-track,
.performances-activities-directive div[table-container]::-webkit-scrollbar-track,
.performances-programs-directive div[table-container]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.performances-projects-directive div[table-container]::-webkit-scrollbar-thumb,
.performances-activities-directive div[table-container]::-webkit-scrollbar-thumb,
.performances-programs-directive div[table-container]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.performances-projects-directive div[table-container]::-webkit-scrollbar-thumb:hover,
.performances-activities-directive div[table-container]::-webkit-scrollbar-thumb:hover,
.performances-programs-directive div[table-container]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Table styling */
.performances-projects-directive .table.tableNoPadding td,
.performances-projects-directive .table.tableNoPadding th,
.performances-activities-directive .table.tableNoPadding td,
.performances-activities-directive .table.tableNoPadding th,
.performances-programs-directive .table.tableNoPadding td,
.performances-programs-directive .table.tableNoPadding th {
    padding: 8px 4px;
    vertical-align: middle;
}

.performances-projects-directive .table.tableNoMarginBottom,
.performances-activities-directive .table.tableNoMarginBottom,
.performances-programs-directive .table.tableNoMarginBottom {
    margin-bottom: 0;
}

/* Improved hover states for table rows */
.performances-projects-directive .table > tbody > tr:hover,
.performances-activities-directive .table > tbody > tr:hover,
.performances-programs-directive .table > tbody > tr:hover {
    background-color: rgba(26, 179, 148, 0.05);
    transition: background-color 0.15s ease;
}

/* Selected row styling */
.performances-projects-directive .table > tbody > tr.st-selected,
.performances-activities-directive .table > tbody > tr.st-selected,
.performances-programs-directive .table > tbody > tr.st-selected {
    background-color: rgba(26, 179, 148, 0.15);
}

/* Responsive styling for mobile devices */
@media (max-width: 767px) {
    .performances-projects-directive .d-none.d-md-table-cell,
    .performances-activities-directive .d-none.d-md-table-cell,
    .performances-programs-directive .d-none.d-md-table-cell {
        display: none !important;
    }
    
    .performances-projects-directive .ibox-title,
    .performances-activities-directive .ibox-title,
    .performances-programs-directive .ibox-title {
        padding: 10px 10px 5px;
    }
    
    .performances-projects-directive .ibox-content,
    .performances-activities-directive .ibox-content,
    .performances-programs-directive .ibox-content {
        padding: 10px 15px 15px 15px;
    }
    
    .performances-projects-directive div[table-container],
    .performances-activities-directive div[table-container],
    .performances-programs-directive div[table-container] {
        max-height: 300px !important;
    }
}

/* Show hidden columns on larger screens */
@media (min-width: 768px) {
    .performances-projects-directive .d-none.d-md-table-cell,
    .performances-activities-directive .d-none.d-md-table-cell,
    .performances-programs-directive .d-none.d-md-table-cell {
        display: table-cell !important;
    }
}

/* Better pagination styling */
.performances-projects-directive .pagination-sm,
.performances-activities-directive .pagination-sm,
.performances-programs-directive .pagination-sm {
    margin: 10px 0 0;
}

.performances-projects-directive .pagination-sm > li > a,
.performances-projects-directive .pagination-sm > li > span,
.performances-activities-directive .pagination-sm > li > a,
.performances-activities-directive .pagination-sm > li > span,
.performances-programs-directive .pagination-sm > li > a,
.performances-programs-directive .pagination-sm > li > span {
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 3px;
}

/* === ACTUALS AND REVENUE DIRECTIVES COMMON STYLES === */
.actuals-projects-directive .ibox,
.actuals-activities-directive .ibox,
.actuals-budget-users-directive .ibox,
.actuals-finance-sources-directive .ibox,
.revenue-generation-directive .ibox {
    clear: both;
    margin-bottom: 25px;
    margin-top: 0;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
    border-radius: 4px;
    overflow: hidden;
}

.actuals-projects-directive .ibox-title,
.actuals-activities-directive .ibox-title,
.actuals-budget-users-directive .ibox-title,
.actuals-finance-sources-directive .ibox-title,
.revenue-generation-directive .ibox-title {
    background-color: #ffffff;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 3px 0 0;
    color: inherit;
    margin-bottom: 0;
    padding: 14px 15px 7px;
    min-height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.actuals-projects-directive .ibox-title h5,
.actuals-activities-directive .ibox-title h5,
.actuals-budget-users-directive .ibox-title h5,
.actuals-finance-sources-directive .ibox-title h5,
.revenue-generation-directive .ibox-title h5 {
    display: inline-block;
    font-size: 14px;
    margin: 0 0 7px;
    padding: 0;
    text-overflow: ellipsis;
    float: left;
    font-weight: 600;
}

.actuals-projects-directive .ibox-content,
.actuals-activities-directive .ibox-content,
.actuals-budget-users-directive .ibox-content,
.actuals-finance-sources-directive .ibox-content,
.revenue-generation-directive .ibox-content {
    background-color: #ffffff;
    color: inherit;
    padding: 15px 20px 20px 20px;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0px;
}

.actuals-projects-directive .ibox-tools,
.actuals-activities-directive .ibox-tools,
.actuals-budget-users-directive .ibox-tools,
.actuals-finance-sources-directive .ibox-tools,
.revenue-generation-directive .ibox-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    float: right;
}

/* Button styling */
.actuals-projects-directive .btn-icon,
.actuals-activities-directive .btn-icon,
.actuals-budget-users-directive .btn-icon,
.actuals-finance-sources-directive .btn-icon,
.revenue-generation-directive .btn-icon {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 2px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.actuals-projects-directive .btn-icon i,
.actuals-activities-directive .btn-icon i,
.actuals-budget-users-directive .btn-icon i,
.actuals-finance-sources-directive .btn-icon i,
.revenue-generation-directive .btn-icon i {
    font-size: 14px !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* Sticky header implementation */
.actuals-projects-directive table.stick-header,
.actuals-activities-directive table.stick-header,
.actuals-budget-users-directive table.stick-header,
.actuals-finance-sources-directive table.stick-header,
.revenue-generation-directive table.stick-header {
    position: relative !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

.actuals-projects-directive table.stick-header thead.sortable th,
.actuals-activities-directive table.stick-header thead.sortable th,
.actuals-budget-users-directive table.stick-header thead.sortable th,
.actuals-finance-sources-directive table.stick-header thead.sortable th,
.revenue-generation-directive table.stick-header thead.sortable th {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background-color: #f5f5f5 !important;
    border-bottom: 1px solid #e7e7e7 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    padding: 8px 4px;
    vertical-align: middle;
    font-weight: 600;
}

/* Table container for sticky header functionality */
.actuals-projects-directive div[table-container],
.actuals-activities-directive div[table-container],
.actuals-budget-users-directive div[table-container],
.actuals-finance-sources-directive div[table-container],
.revenue-generation-directive div[table-container] {
    width: 100% !important;
    position: relative !important;
    max-height: 400px !important;
    overflow-y: auto !important;
}

/* Force hardware acceleration for smoother scrolling */
.actuals-projects-directive table.stick-header thead.sortable th,
.actuals-activities-directive table.stick-header thead.sortable th,
.actuals-budget-users-directive table.stick-header thead.sortable th,
.actuals-finance-sources-directive table.stick-header thead.sortable th,
.revenue-generation-directive table.stick-header thead.sortable th {
    will-change: transform !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}

/* Proper overflow handling */
.actuals-projects-directive .ibox, 
.actuals-projects-directive .ibox-content, 
.actuals-projects-directive .wrapper-content, 
.actuals-projects-directive .table-responsive,
.actuals-activities-directive .ibox, 
.actuals-activities-directive .ibox-content, 
.actuals-activities-directive .wrapper-content, 
.actuals-activities-directive .table-responsive,
.actuals-budget-users-directive .ibox, 
.actuals-budget-users-directive .ibox-content, 
.actuals-budget-users-directive .wrapper-content, 
.actuals-budget-users-directive .table-responsive,
.actuals-finance-sources-directive .ibox, 
.actuals-finance-sources-directive .ibox-content, 
.actuals-finance-sources-directive .wrapper-content, 
.actuals-finance-sources-directive .table-responsive,
.revenue-generation-directive .ibox, 
.revenue-generation-directive .ibox-content, 
.revenue-generation-directive .wrapper-content, 
.revenue-generation-directive .table-responsive {
    overflow: visible !important;
}

/* Custom scrollbar for better appearance */
.actuals-projects-directive div[table-container]::-webkit-scrollbar,
.actuals-activities-directive div[table-container]::-webkit-scrollbar,
.actuals-budget-users-directive div[table-container]::-webkit-scrollbar,
.actuals-finance-sources-directive div[table-container]::-webkit-scrollbar,
.revenue-generation-directive div[table-container]::-webkit-scrollbar {
    width: 8px;
    height: 8px; /* For horizontal scrollbar */
}

.actuals-projects-directive div[table-container]::-webkit-scrollbar-track,
.actuals-activities-directive div[table-container]::-webkit-scrollbar-track,
.actuals-budget-users-directive div[table-container]::-webkit-scrollbar-track,
.actuals-finance-sources-directive div[table-container]::-webkit-scrollbar-track,
.revenue-generation-directive div[table-container]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.actuals-projects-directive div[table-container]::-webkit-scrollbar-thumb,
.actuals-activities-directive div[table-container]::-webkit-scrollbar-thumb,
.actuals-budget-users-directive div[table-container]::-webkit-scrollbar-thumb,
.actuals-finance-sources-directive div[table-container]::-webkit-scrollbar-thumb,
.revenue-generation-directive div[table-container]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.actuals-projects-directive div[table-container]::-webkit-scrollbar-thumb:hover,
.actuals-activities-directive div[table-container]::-webkit-scrollbar-thumb:hover,
.actuals-budget-users-directive div[table-container]::-webkit-scrollbar-thumb:hover,
.actuals-finance-sources-directive div[table-container]::-webkit-scrollbar-thumb:hover,
.revenue-generation-directive div[table-container]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Table styling */
.actuals-projects-directive .table.tableNoPadding td,
.actuals-projects-directive .table.tableNoPadding th,
.actuals-activities-directive .table.tableNoPadding td,
.actuals-activities-directive .table.tableNoPadding th,
.actuals-budget-users-directive .table.tableNoPadding td,
.actuals-budget-users-directive .table.tableNoPadding th,
.actuals-finance-sources-directive .table.tableNoPadding td,
.actuals-finance-sources-directive .table.tableNoPadding th,
.revenue-generation-directive .table.tableNoPadding td,
.revenue-generation-directive .table.tableNoPadding th {
    padding: 8px 4px;
    vertical-align: middle;
}

.actuals-projects-directive .table.tableNoMarginBottom,
.actuals-activities-directive .table.tableNoMarginBottom,
.actuals-budget-users-directive .table.tableNoMarginBottom,
.actuals-finance-sources-directive .table.tableNoMarginBottom,
.revenue-generation-directive .table.tableNoMarginBottom {
    margin-bottom: 0;
}

/* Improved hover states for table rows */
.actuals-projects-directive .table > tbody > tr:hover,
.actuals-activities-directive .table > tbody > tr:hover,
.actuals-budget-users-directive .table > tbody > tr:hover,
.actuals-finance-sources-directive .table > tbody > tr:hover,
.revenue-generation-directive .table > tbody > tr:hover {
    background-color: rgba(26, 179, 148, 0.05);
    transition: background-color 0.15s ease;
}

/* Selected row styling */
.actuals-projects-directive .table > tbody > tr.st-selected,
.actuals-activities-directive .table > tbody > tr.st-selected,
.actuals-budget-users-directive .table > tbody > tr.st-selected,
.actuals-finance-sources-directive .table > tbody > tr.st-selected,
.revenue-generation-directive .table > tbody > tr.st-selected {
    background-color: rgba(26, 179, 148, 0.15);
}

/* Responsive styling for mobile devices */
@media (max-width: 767px) {
    .actuals-projects-directive .d-none.d-md-table-cell,
    .actuals-activities-directive .d-none.d-md-table-cell,
    .actuals-budget-users-directive .d-none.d-md-table-cell,
    .actuals-finance-sources-directive .d-none.d-md-table-cell,
    .revenue-generation-directive .d-none.d-md-table-cell {
        display: none !important;
    }
    
    .actuals-projects-directive .ibox-title,
    .actuals-activities-directive .ibox-title,
    .actuals-budget-users-directive .ibox-title,
    .actuals-finance-sources-directive .ibox-title,
    .revenue-generation-directive .ibox-title {
        padding: 10px 10px 5px;
    }
    
    .actuals-projects-directive .ibox-content,
    .actuals-activities-directive .ibox-content,
    .actuals-budget-users-directive .ibox-content,
    .actuals-finance-sources-directive .ibox-content,
    .revenue-generation-directive .ibox-content {
        padding: 10px 15px 15px 15px;
    }
    
    .actuals-projects-directive div[table-container],
    .actuals-activities-directive div[table-container],
    .actuals-budget-users-directive div[table-container],
    .actuals-finance-sources-directive div[table-container],
    .revenue-generation-directive div[table-container] {
        max-height: 300px !important;
    }
}

/* Show hidden columns on larger screens */
@media (min-width: 768px) {
    .actuals-projects-directive .d-none.d-md-table-cell,
    .actuals-activities-directive .d-none.d-md-table-cell,
    .actuals-budget-users-directive .d-none.d-md-table-cell,
    .actuals-finance-sources-directive .d-none.d-md-table-cell,
    .revenue-generation-directive .d-none.d-md-table-cell {
        display: table-cell !important;
    }
}

/* Better pagination styling */
.actuals-projects-directive .pagination-sm,
.actuals-activities-directive .pagination-sm,
.actuals-budget-users-directive .pagination-sm,
.actuals-finance-sources-directive .pagination-sm,
.revenue-generation-directive .pagination-sm {
    margin: 10px 0 0;
}

.actuals-projects-directive .pagination-sm > li > a,
.actuals-projects-directive .pagination-sm > li > span,
.actuals-activities-directive .pagination-sm > li > a,
.actuals-activities-directive .pagination-sm > li > span,
.actuals-budget-users-directive .pagination-sm > li > a,
.actuals-budget-users-directive .pagination-sm > li > span,
.actuals-finance-sources-directive .pagination-sm > li > a,
.actuals-finance-sources-directive .pagination-sm > li > span,
.revenue-generation-directive .pagination-sm > li > a,
.revenue-generation-directive .pagination-sm > li > span {
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 3px;
}

/* === PROGRAMS (PRGS) DIRECTIVE STYLES === */
.prgs-directive .ibox {
    clear: both;
    margin-bottom: 25px;
    margin-top: 0;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
    border-radius: 4px;
    overflow: hidden;
}

.prgs-directive .ibox-title {
    background-color: #ffffff;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 3px 0 0;
    color: inherit;
    margin-bottom: 0;
    padding: 14px 15px 7px;
    min-height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.prgs-directive .ibox-title h5 {
    display: inline-block;
    font-size: 14px;
    margin: 0 0 7px;
    padding: 0;
    text-overflow: ellipsis;
    float: left;
    font-weight: 600;
}

.prgs-directive .ibox-content {
    background-color: #ffffff;
    color: inherit;
    padding: 15px 20px 20px 20px;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0px;
}

.prgs-directive .ibox-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    float: right;
}

/* Button styling */
.prgs-directive .btn-icon {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 2px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.prgs-directive .btn-icon i {
    font-size: 14px !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* Sticky header implementation */
.prgs-directive table.stick-header {
    position: relative !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

.prgs-directive table.stick-header thead.sortable th {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background-color: #f5f5f5 !important;
    border-bottom: 1px solid #e7e7e7 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    padding: 8px 4px;
    vertical-align: middle;
    font-weight: 600;
}

/* Table container for sticky header functionality */
.prgs-directive div[table-container] {
    width: 100% !important;
    position: relative !important;
    max-height: 400px !important;
    overflow-y: auto !important;
}

/* Force hardware acceleration for smoother scrolling */
.prgs-directive table.stick-header thead.sortable th {
    will-change: transform !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}

/* Proper overflow handling */
.prgs-directive .ibox, 
.prgs-directive .ibox-content, 
.prgs-directive .wrapper-content, 
.prgs-directive .table-responsive {
    overflow: visible !important;
}

/* Action column styling */
.prgs-directive .action-column {
    width: 90px !important;
    min-width: 90px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* Action buttons container */
.prgs-directive .action-buttons-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 80px !important;
}

/* Action button styling */
.prgs-directive .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: 28px !important;
    height: 28px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease;
}

.prgs-directive .action-buttons-container .btn i {
    margin: 0 !important;
    font-size: 14px !important;
}

/* Button colors */
.prgs-directive .action-buttons-container .btn-white-altered {
    background-color: #f3f3f4;
    border-color: #e7eaec;
    color: #676a6c;
}

.prgs-directive .action-buttons-container .btn-white-altered:hover {
    background-color: #e7e7e7;
    border-color: #d9d9d9;
}

/* Custom scrollbar for better appearance */
.prgs-directive div[table-container]::-webkit-scrollbar {
    width: 8px;
    height: 8px; /* For horizontal scrollbar */
}

.prgs-directive div[table-container]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.prgs-directive div[table-container]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.prgs-directive div[table-container]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Table styling */
.prgs-directive .table.tableNoPadding td,
.prgs-directive .table.tableNoPadding th {
    padding: 8px 4px;
    vertical-align: middle;
}

.prgs-directive .table.tableNoMarginBottom {
    margin-bottom: 0;
}

/* Improved hover states for table rows */
.prgs-directive .table > tbody > tr:hover {
    background-color: rgba(26, 179, 148, 0.05);
    transition: background-color 0.15s ease;
}

/* Selected row styling */
.prgs-directive .table > tbody > tr.st-selected {
    background-color: rgba(26, 179, 148, 0.15);
}

/* Responsive styling for mobile devices */
@media (max-width: 767px) {
    .prgs-directive .d-none.d-md-table-cell {
        display: none !important;
    }
    
    .prgs-directive .ibox-title {
        padding: 10px 10px 5px;
    }
    
    .prgs-directive .ibox-content {
        padding: 10px 15px 15px 15px;
    }
    
    .prgs-directive div[table-container] {
        max-height: 300px !important;
    }
    
    .prgs-directive .action-buttons-container {
        gap: 6px !important;
    }
    
    .prgs-directive .action-buttons-container .btn {
        padding: 6px 8px !important;
        min-width: 32px !important;
        height: 32px !important;
    }
    
    .prgs-directive .action-buttons-container .btn i {
        font-size: 15px !important;
    }
}

/* Show hidden columns on larger screens */
@media (min-width: 768px) {
    .prgs-directive .d-none.d-md-table-cell {
        display: table-cell !important;
    }
}

/* Better pagination styling */
.prgs-directive .pagination-sm {
    margin: 10px 0 0;
}

.prgs-directive .pagination-sm > li > a,
.prgs-directive .pagination-sm > li > span {
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 3px;
}

/* === PROGRAM AND PROJECT DIRECTIVES COMMON STYLES === */
.prg-activities-directive .ibox,
.prg-goals-directive .ibox,
.prg-indicators-directive .ibox,
.projects-directive .ibox {
    clear: both;
    margin-bottom: 25px;
    margin-top: 0;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
    border-radius: 4px;
    overflow: hidden;
}

.prg-activities-directive .ibox-title,
.prg-goals-directive .ibox-title,
.prg-indicators-directive .ibox-title,
.projects-directive .ibox-title {
    background-color: #ffffff;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 3px 0 0;
    color: inherit;
    margin-bottom: 0;
    padding: 14px 15px 7px;
    min-height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.prg-activities-directive .ibox-title h5,
.prg-goals-directive .ibox-title h5,
.prg-indicators-directive .ibox-title h5,
.projects-directive .ibox-title h5 {
    display: inline-block;
    font-size: 14px;
    margin: 0 0 7px;
    padding: 0;
    text-overflow: ellipsis;
    float: left;
    font-weight: 600;
}

.prg-activities-directive .ibox-content,
.prg-goals-directive .ibox-content,
.prg-indicators-directive .ibox-content,
.projects-directive .ibox-content {
    background-color: #ffffff;
    color: inherit;
    padding: 15px 20px 20px 20px;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0px;
}

.prg-activities-directive .ibox-tools,
.prg-goals-directive .ibox-tools,
.prg-indicators-directive .ibox-tools,
.projects-directive .ibox-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    float: right;
}

/* Button styling */
.prg-activities-directive .btn-icon,
.prg-goals-directive .btn-icon,
.prg-indicators-directive .btn-icon,
.projects-directive .btn-icon {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 2px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.prg-activities-directive .btn-icon i,
.prg-goals-directive .btn-icon i,
.prg-indicators-directive .btn-icon i,
.projects-directive .btn-icon i {
    font-size: 14px !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* Sticky header implementation */
.prg-activities-directive table.stick-header,
.prg-goals-directive table.stick-header,
.prg-indicators-directive table.stick-header,
.projects-directive table.stick-header {
    position: relative !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

.prg-activities-directive table.stick-header thead.sortable th,
.prg-goals-directive table.stick-header thead.sortable th,
.prg-indicators-directive table.stick-header thead.sortable th,
.projects-directive table.stick-header thead.sortable th {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background-color: #f5f5f5 !important;
    border-bottom: 1px solid #e7e7e7 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    padding: 8px 4px;
    vertical-align: middle;
    font-weight: 600;
}

/* Table container for sticky header functionality */
.prg-activities-directive div[table-container],
.prg-goals-directive div[table-container],
.prg-indicators-directive div[table-container],
.projects-directive div[table-container] {
    width: 100% !important;
    position: relative !important;
    max-height: 400px !important;
    overflow-y: auto !important;
}

/* Force hardware acceleration for smoother scrolling */
.prg-activities-directive table.stick-header thead.sortable th,
.prg-goals-directive table.stick-header thead.sortable th,
.prg-indicators-directive table.stick-header thead.sortable th,
.projects-directive table.stick-header thead.sortable th {
    will-change: transform !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}

/* Proper overflow handling */
.prg-activities-directive .ibox, 
.prg-activities-directive .ibox-content, 
.prg-activities-directive .wrapper-content, 
.prg-activities-directive .table-responsive,
.prg-goals-directive .ibox, 
.prg-goals-directive .ibox-content, 
.prg-goals-directive .wrapper-content, 
.prg-goals-directive .table-responsive,
.prg-indicators-directive .ibox, 
.prg-indicators-directive .ibox-content, 
.prg-indicators-directive .wrapper-content, 
.prg-indicators-directive .table-responsive,
.projects-directive .ibox, 
.projects-directive .ibox-content, 
.projects-directive .wrapper-content, 
.projects-directive .table-responsive {
    overflow: visible !important;
}

/* Action column styling */
.prg-activities-directive .action-column,
.prg-goals-directive .action-column,
.prg-indicators-directive .action-column,
.projects-directive .action-column {
    width: 90px !important;
    min-width: 90px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* Action buttons container */
.prg-activities-directive .action-buttons-container,
.prg-goals-directive .action-buttons-container,
.prg-indicators-directive .action-buttons-container,
.projects-directive .action-buttons-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 80px !important;
}

/* Action button styling */
.prg-activities-directive .action-buttons-container .btn,
.prg-goals-directive .action-buttons-container .btn,
.prg-indicators-directive .action-buttons-container .btn,
.projects-directive .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: 28px !important;
    height: 28px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease;
}

.prg-activities-directive .action-buttons-container .btn i,
.prg-goals-directive .action-buttons-container .btn i,
.prg-indicators-directive .action-buttons-container .btn i,
.projects-directive .action-buttons-container .btn i {
    margin: 0 !important;
    font-size: 14px !important;
}

/* Button colors */
.prg-activities-directive .action-buttons-container .btn-white-altered,
.prg-goals-directive .action-buttons-container .btn-white-altered,
.prg-indicators-directive .action-buttons-container .btn-white-altered,
.projects-directive .action-buttons-container .btn-white-altered {
    background-color: #f3f3f4;
    border-color: #e7eaec;
    color: #676a6c;
}

.prg-activities-directive .action-buttons-container .btn-white-altered:hover,
.prg-goals-directive .action-buttons-container .btn-white-altered:hover,
.prg-indicators-directive .action-buttons-container .btn-white-altered:hover,
.projects-directive .action-buttons-container .btn-white-altered:hover {
    background-color: #e7e7e7;
    border-color: #d9d9d9;
}

/* Custom scrollbar for better appearance */
.prg-activities-directive div[table-container]::-webkit-scrollbar,
.prg-goals-directive div[table-container]::-webkit-scrollbar,
.prg-indicators-directive div[table-container]::-webkit-scrollbar,
.projects-directive div[table-container]::-webkit-scrollbar {
    width: 8px;
    height: 8px; /* For horizontal scrollbar */
}

.prg-activities-directive div[table-container]::-webkit-scrollbar-track,
.prg-goals-directive div[table-container]::-webkit-scrollbar-track,
.prg-indicators-directive div[table-container]::-webkit-scrollbar-track,
.projects-directive div[table-container]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.prg-activities-directive div[table-container]::-webkit-scrollbar-thumb,
.prg-goals-directive div[table-container]::-webkit-scrollbar-thumb,
.prg-indicators-directive div[table-container]::-webkit-scrollbar-thumb,
.projects-directive div[table-container]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.prg-activities-directive div[table-container]::-webkit-scrollbar-thumb:hover,
.prg-goals-directive div[table-container]::-webkit-scrollbar-thumb:hover,
.prg-indicators-directive div[table-container]::-webkit-scrollbar-thumb:hover,
.projects-directive div[table-container]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Table styling */
.prg-activities-directive .table.tableNoPadding td,
.prg-activities-directive .table.tableNoPadding th,
.prg-goals-directive .table.tableNoPadding td,
.prg-goals-directive .table.tableNoPadding th,
.prg-indicators-directive .table.tableNoPadding td,
.prg-indicators-directive .table.tableNoPadding th,
.projects-directive .table.tableNoPadding td,
.projects-directive .table.tableNoPadding th {
    padding: 8px 4px;
    vertical-align: middle;
}

.prg-activities-directive .table.tableNoMarginBottom,
.prg-goals-directive .table.tableNoMarginBottom,
.prg-indicators-directive .table.tableNoMarginBottom,
.projects-directive .table.tableNoMarginBottom {
    margin-bottom: 0;
}

/* Improved hover states for table rows */
.prg-activities-directive .table > tbody > tr:hover,
.prg-goals-directive .table > tbody > tr:hover,
.prg-indicators-directive .table > tbody > tr:hover,
.projects-directive .table > tbody > tr:hover {
    background-color: rgba(26, 179, 148, 0.05);
    transition: background-color 0.15s ease;
}

/* Selected row styling */
.prg-activities-directive .table > tbody > tr.st-selected,
.prg-goals-directive .table > tbody > tr.st-selected,
.prg-indicators-directive .table > tbody > tr.st-selected,
.projects-directive .table > tbody > tr.st-selected {
    background-color: rgba(26, 179, 148, 0.15);
}

/* Responsive styling for mobile devices */
@media (max-width: 767px) {
    .prg-activities-directive .d-none.d-md-table-cell,
    .prg-goals-directive .d-none.d-md-table-cell,
    .prg-indicators-directive .d-none.d-md-table-cell,
    .projects-directive .d-none.d-md-table-cell {
        display: none !important;
    }
    
    .prg-activities-directive .ibox-title,
    .prg-goals-directive .ibox-title,
    .prg-indicators-directive .ibox-title,
    .projects-directive .ibox-title {
        padding: 10px 10px 5px;
    }
    
    .prg-activities-directive .ibox-content,
    .prg-goals-directive .ibox-content,
    .prg-indicators-directive .ibox-content,
    .projects-directive .ibox-content {
        padding: 10px 15px 15px 15px;
    }
    
    .prg-activities-directive div[table-container],
    .prg-goals-directive div[table-container],
    .prg-indicators-directive div[table-container],
    .projects-directive div[table-container] {
        max-height: 300px !important;
    }
    
    .prg-activities-directive .action-buttons-container,
    .prg-goals-directive .action-buttons-container,
    .prg-indicators-directive .action-buttons-container,
    .projects-directive .action-buttons-container {
        gap: 6px !important;
    }
    
    .prg-activities-directive .action-buttons-container .btn,
    .prg-goals-directive .action-buttons-container .btn,
    .prg-indicators-directive .action-buttons-container .btn,
    .projects-directive .action-buttons-container .btn {
        padding: 6px 8px !important;
        min-width: 32px !important;
        height: 32px !important;
    }
    
    .prg-activities-directive .action-buttons-container .btn i,
    .prg-goals-directive .action-buttons-container .btn i,
    .prg-indicators-directive .action-buttons-container .btn i,
    .projects-directive .action-buttons-container .btn i {
        font-size: 15px !important;
    }
}

/* Show hidden columns on larger screens */
@media (min-width: 768px) {
    .prg-activities-directive .d-none.d-md-table-cell,
    .prg-goals-directive .d-none.d-md-table-cell,
    .prg-indicators-directive .d-none.d-md-table-cell,
    .projects-directive .d-none.d-md-table-cell {
        display: table-cell !important;
    }
}

/* Better pagination styling */
.prg-activities-directive .pagination-sm,
.prg-goals-directive .pagination-sm,
.prg-indicators-directive .pagination-sm,
.projects-directive .pagination-sm {
    margin: 10px 0 0;
}

.prg-activities-directive .pagination-sm > li > a,
.prg-activities-directive .pagination-sm > li > span,
.prg-goals-directive .pagination-sm > li > a,
.prg-goals-directive .pagination-sm > li > span,
.prg-indicators-directive .pagination-sm > li > a,
.prg-indicators-directive .pagination-sm > li > span,
.projects-directive .pagination-sm > li > a,
.projects-directive .pagination-sm > li > span {
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 3px;
}

/* === VERIFICATION SOURCES AND UNIT OF MEASURES DIRECTIVES STYLES === */
.verification-sources-directive .ibox,
.unit-of-measures-directive .ibox {
    clear: both;
    margin-bottom: 25px;
    margin-top: 0;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
    border-radius: 4px;
    overflow: hidden;
}

.verification-sources-directive .ibox-title,
.unit-of-measures-directive .ibox-title {
    background-color: #ffffff;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 3px 0 0;
    color: inherit;
    margin-bottom: 0;
    padding: 14px 15px 7px;
    min-height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.verification-sources-directive .ibox-title h5,
.unit-of-measures-directive .ibox-title h5 {
    display: inline-block;
    font-size: 14px;
    margin: 0 0 7px;
    padding: 0;
    text-overflow: ellipsis;
    float: left;
    font-weight: 600;
}

.verification-sources-directive .ibox-content,
.unit-of-measures-directive .ibox-content {
    background-color: #ffffff;
    color: inherit;
    padding: 15px 20px 20px 20px;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0px;
}

.verification-sources-directive .ibox-tools,
.unit-of-measures-directive .ibox-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    float: right;
}

/* Button styling */
.verification-sources-directive .btn-icon,
.unit-of-measures-directive .btn-icon {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 2px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.verification-sources-directive .btn-icon i,
.unit-of-measures-directive .btn-icon i {
    font-size: 14px !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* Sticky header implementation */
.verification-sources-directive table.stick-header,
.unit-of-measures-directive table.stick-header {
    position: relative !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

.verification-sources-directive table.stick-header thead.sortable th,
.unit-of-measures-directive table.stick-header thead.sortable th {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background-color: #f5f5f5 !important;
    border-bottom: 1px solid #e7e7e7 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    padding: 8px 4px;
    vertical-align: middle;
    font-weight: 600;
}

/* Table container for sticky header functionality */
.verification-sources-directive div[table-container],
.unit-of-measures-directive div[table-container] {
    width: 100% !important;
    position: relative !important;
    max-height: 400px !important;
    overflow-y: auto !important;
}

/* Force hardware acceleration for smoother scrolling */
.verification-sources-directive table.stick-header thead.sortable th,
.unit-of-measures-directive table.stick-header thead.sortable th {
    will-change: transform !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}

/* Proper overflow handling */
.verification-sources-directive .ibox, 
.verification-sources-directive .ibox-content, 
.verification-sources-directive .wrapper-content, 
.verification-sources-directive .table-responsive,
.unit-of-measures-directive .ibox, 
.unit-of-measures-directive .ibox-content, 
.unit-of-measures-directive .wrapper-content, 
.unit-of-measures-directive .table-responsive {
    overflow: visible !important;
}

/* Action column styling */
.verification-sources-directive .action-column,
.unit-of-measures-directive .action-column {
    width: 90px !important;
    min-width: 90px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* Action buttons container */
.verification-sources-directive .action-buttons-container,
.unit-of-measures-directive .action-buttons-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 80px !important;
}

/* Action button styling */
.verification-sources-directive .action-buttons-container .btn,
.unit-of-measures-directive .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: 28px !important;
    height: 28px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease;
}

.verification-sources-directive .action-buttons-container .btn i,
.unit-of-measures-directive .action-buttons-container .btn i {
    margin: 0 !important;
    font-size: 14px !important;
}

/* Button colors */
.verification-sources-directive .action-buttons-container .btn-white-altered,
.unit-of-measures-directive .action-buttons-container .btn-white-altered {
    background-color: #f3f3f4;
    border-color: #e7eaec;
    color: #676a6c;
}

.verification-sources-directive .action-buttons-container .btn-white-altered:hover,
.unit-of-measures-directive .action-buttons-container .btn-white-altered:hover {
    background-color: #e7e7e7;
    border-color: #d9d9d9;
}

/* Custom scrollbar for better appearance */
.verification-sources-directive div[table-container]::-webkit-scrollbar,
.unit-of-measures-directive div[table-container]::-webkit-scrollbar {
    width: 8px;
    height: 8px; /* For horizontal scrollbar */
}

.verification-sources-directive div[table-container]::-webkit-scrollbar-track,
.unit-of-measures-directive div[table-container]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.verification-sources-directive div[table-container]::-webkit-scrollbar-thumb,
.unit-of-measures-directive div[table-container]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.verification-sources-directive div[table-container]::-webkit-scrollbar-thumb:hover,
.unit-of-measures-directive div[table-container]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Table styling */
.verification-sources-directive .table.tableNoPadding td,
.verification-sources-directive .table.tableNoPadding th,
.unit-of-measures-directive .table.tableNoPadding td,
.unit-of-measures-directive .table.tableNoPadding th {
    padding: 8px 4px;
    vertical-align: middle;
}

.verification-sources-directive .table.tableNoMarginBottom,
.unit-of-measures-directive .table.tableNoMarginBottom {
    margin-bottom: 0;
}

/* Improved hover states for table rows */
.verification-sources-directive .table > tbody > tr:hover,
.unit-of-measures-directive .table > tbody > tr:hover {
    background-color: rgba(26, 179, 148, 0.05);
    transition: background-color 0.15s ease;
}

/* Selected row styling */
.verification-sources-directive .table > tbody > tr.st-selected,
.unit-of-measures-directive .table > tbody > tr.st-selected {
    background-color: rgba(26, 179, 148, 0.15);
}

/* Responsive styling for mobile devices */
@media (max-width: 767px) {
    .verification-sources-directive .d-none.d-md-table-cell,
    .unit-of-measures-directive .d-none.d-md-table-cell {
        display: none !important;
    }
    
    .verification-sources-directive .ibox-title,
    .unit-of-measures-directive .ibox-title {
        padding: 10px 10px 5px;
    }
    
    .verification-sources-directive .ibox-content,
    .unit-of-measures-directive .ibox-content {
        padding: 10px 15px 15px 15px;
    }
    
    .verification-sources-directive div[table-container],
    .unit-of-measures-directive div[table-container] {
        max-height: 300px !important;
    }
    
    .verification-sources-directive .action-buttons-container,
    .unit-of-measures-directive .action-buttons-container {
        gap: 6px !important;
    }
    
    .verification-sources-directive .action-buttons-container .btn,
    .unit-of-measures-directive .action-buttons-container .btn {
        padding: 6px 8px !important;
        min-width: 32px !important;
        height: 32px !important;
    }
    
    .verification-sources-directive .action-buttons-container .btn i,
    .unit-of-measures-directive .action-buttons-container .btn i {
        font-size: 15px !important;
    }
}

/* Show hidden columns on larger screens */
@media (min-width: 768px) {
    .verification-sources-directive .d-none.d-md-table-cell,
    .unit-of-measures-directive .d-none.d-md-table-cell {
        display: table-cell !important;
    }
}

/* Better pagination styling */
.verification-sources-directive .pagination-sm,
.unit-of-measures-directive .pagination-sm {
    margin: 10px 0 0;
}

.verification-sources-directive .pagination-sm > li > a,
.verification-sources-directive .pagination-sm > li > span,
.unit-of-measures-directive .pagination-sm > li > a,
.unit-of-measures-directive .pagination-sm > li > span {
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 3px;
}

/* Unit of measures specific styles for smaller container */
.unit-of-measures-directive div[table-container] {
    max-height: 350px !important; /* Slightly smaller height for smaller container */
}

@media (max-width: 991px) {
    .unit-of-measures-directive .col-lg-4 {
        width: 100% !important;
    }
}

/* === USERS DIRECTIVE STYLES === */
.users-directive .ibox {
    clear: both;
    margin-bottom: 25px;
    margin-top: 0;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
    border-radius: 4px;
    overflow: hidden;
}

.users-directive .ibox-title {
    background-color: #ffffff;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 3px 0 0;
    color: inherit;
    margin-bottom: 0;
    padding: 14px 15px 7px;
    min-height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.users-directive .ibox-title h5 {
    display: inline-block;
    font-size: 14px;
    margin: 0 0 7px;
    padding: 0;
    text-overflow: ellipsis;
    float: left;
    font-weight: 600;
}

.users-directive .ibox-content {
    background-color: #ffffff;
    color: inherit;
    padding: 15px 20px 20px 20px;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0px;
}

.users-directive .ibox-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    float: right;
    gap: 5px;
}

/* Button styling */
.users-directive .btn-icon {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 2px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.users-directive .btn-icon i {
    font-size: 14px !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* Sticky header implementation */
.users-directive table.stick-header {
    position: relative !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

.users-directive table.stick-header thead.sortable th {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background-color: #f5f5f5 !important;
    border-bottom: 1px solid #e7e7e7 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    padding: 8px 4px;
    vertical-align: middle;
    font-weight: 600;
}

/* Table container for sticky header functionality */
.users-directive div[table-container] {
    width: 100% !important;
    position: relative !important;
    max-height: 450px !important;
    overflow-y: auto !important;
}

/* Force hardware acceleration for smoother scrolling */
.users-directive table.stick-header thead.sortable th {
    will-change: transform !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}

/* Proper overflow handling */
.users-directive .ibox, 
.users-directive .ibox-content, 
.users-directive .wrapper-content, 
.users-directive .table-responsive {
    overflow: visible !important;
}

/* Action column styling */
.users-directive .action-column {
    width: 150px !important;
    min-width: 150px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* Action buttons container */
.users-directive .action-buttons-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 140px !important;
}

/* Action button styling */
.users-directive .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: 28px !important;
    height: 28px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease;
}

.users-directive .action-buttons-container .btn i {
    margin: 0 !important;
    font-size: 14px !important;
}

/* Button colors */
.users-directive .action-buttons-container .btn-white-altered {
    background-color: #f3f3f4;
    border-color: #e7eaec;
    color: #676a6c;
}

.users-directive .action-buttons-container .btn-white-altered:hover {
    background-color: #e7e7e7;
    border-color: #d9d9d9;
}

/* Custom scrollbar for better appearance */
.users-directive div[table-container]::-webkit-scrollbar {
    width: 8px;
    height: 8px; /* For horizontal scrollbar */
}

.users-directive div[table-container]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.users-directive div[table-container]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.users-directive div[table-container]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Table styling */
.users-directive .table.tableNoPadding td,
.users-directive .table.tableNoPadding th {
    padding: 8px 4px;
    vertical-align: middle;
}

.users-directive .table.tableNoMarginBottom {
    margin-bottom: 0;
}

/* Improved hover states for table rows */
.users-directive .table > tbody > tr:hover {
    background-color: rgba(26, 179, 148, 0.05);
    transition: background-color 0.15s ease;
}

/* Selected row styling */
.users-directive .table > tbody > tr.st-selected {
    background-color: rgba(26, 179, 148, 0.15);
}

/* Form input improvements */
.users-directive .input-group {
    width: 100%;
}

.users-directive .input-group .form-control {
    height: 32px;
}

.users-directive .input-group-btn .btn {
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive styling for mobile devices */
@media (max-width: 767px) {
    .users-directive .d-none.d-md-table-cell {
        display: none !important;
    }
    
    .users-directive .ibox-title {
        padding: 10px 10px 5px;
    }
    
    .users-directive .ibox-content {
        padding: 10px 15px 15px 15px;
    }
    
    .users-directive div[table-container] {
        max-height: 350px !important;
    }
    
    .users-directive .action-buttons-container {
        gap: 6px !important;
    }
    
    .users-directive .action-buttons-container .btn {
        padding: 6px 8px !important;
        min-width: 32px !important;
        height: 32px !important;
    }
    
    .users-directive .action-buttons-container .btn i {
        font-size: 15px !important;
    }
    
    /* Better touch targets on mobile */
    .users-directive .input-group .form-control,
    .users-directive .input-group-btn .btn {
        height: 38px;
    }
}

/* Show hidden columns on larger screens */
@media (min-width: 768px) {
    .users-directive .d-none.d-md-table-cell {
        display: table-cell !important;
    }
}

/* Better pagination styling */
.users-directive .pagination-sm {
    margin: 10px 0 0;
}

.users-directive .pagination-sm > li > a,
.users-directive .pagination-sm > li > span {
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 3px;
}

/* Status icon styling */
.users-directive .pd-color-primary {
    color: #1ab394;
}

.users-directive .pd-color-red {
    color: #ed5565;
}

/* Loading spinner enhancements */
.users-directive .spiner-example {
    height: 50px;
    margin: 15px 0;
}

.users-directive .sk-spinner-three-bounce.sk-spinner {
    margin: 0 auto;
    width: 70px;
    text-align: center;
}

.users-directive .sk-spinner-three-bounce div {
    width: 16px;
    height: 16px;
    background-color: #1ab394;
    border-radius: 100%;
    display: inline-block;
    animation: sk-threeBounceDelay 1.4s infinite ease-in-out;
    animation-fill-mode: both;
}

.users-directive .sk-spinner-three-bounce .sk-bounce1 {
    animation-delay: -0.32s;
}

.users-directive .sk-spinner-three-bounce .sk-bounce2 {
    animation-delay: -0.16s;
}

@keyframes sk-threeBounceDelay {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
}

/* === TRANSFER OF FUNDS DIRECTIVE STYLES === */
.transfer-of-funds-directive .ibox {
    clear: both;
    margin-bottom: 25px;
    margin-top: 0;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
    border-radius: 4px;
    overflow: hidden;
}

.transfer-of-funds-directive .ibox-title {
    background-color: #ffffff;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 3px 0 0;
    color: inherit;
    margin-bottom: 0;
    padding: 14px 15px 7px;
    min-height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.transfer-of-funds-directive .ibox-title h5 {
    display: inline-block;
    font-size: 14px;
    margin: 0 0 7px;
    padding: 0;
    text-overflow: ellipsis;
    float: left;
    font-weight: 600;
}

.transfer-of-funds-directive .ibox-content {
    background-color: #ffffff;
    color: inherit;
    padding: 15px 20px 20px 20px;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0px;
}

.transfer-of-funds-directive .ibox-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    float: right;
}

/* Sticky header implementation */
.transfer-of-funds-directive table.stick-header {
    position: relative !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

.transfer-of-funds-directive table.stick-header thead.sortable th {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background-color: #f5f5f5 !important;
    border-bottom: 1px solid #e7e7e7 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    padding: 8px 4px;
    vertical-align: middle;
    font-weight: 600;
}

/* Table container for sticky header functionality */
.transfer-of-funds-directive div[table-container] {
    width: 100% !important;
    position: relative !important;
    max-height: 450px !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
}

/* Force hardware acceleration for smoother scrolling */
.transfer-of-funds-directive table.stick-header thead.sortable th {
    will-change: transform !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}

/* Proper overflow handling */
.transfer-of-funds-directive .ibox, 
.transfer-of-funds-directive .ibox-content, 
.transfer-of-funds-directive .wrapper-content, 
.transfer-of-funds-directive .table-responsive {
    overflow: visible !important;
}

/* Action column styling */
.transfer-of-funds-directive .action-column {
    width: 70px !important;
    min-width: 70px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* Action buttons container */
.transfer-of-funds-directive .action-buttons-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 60px !important;
}

/* Action button styling */
.transfer-of-funds-directive .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: 28px !important;
    height: 28px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease;
}

.transfer-of-funds-directive .action-buttons-container .btn i {
    margin: 0 !important;
    font-size: 14px !important;
}

/* Custom scrollbar for better appearance */
.transfer-of-funds-directive div[table-container]::-webkit-scrollbar {
    width: 8px;
    height: 8px; /* For horizontal scrollbar */
}

.transfer-of-funds-directive div[table-container]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.transfer-of-funds-directive div[table-container]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.transfer-of-funds-directive div[table-container]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Table styling */
.transfer-of-funds-directive .table.tableNoPadding td,
.transfer-of-funds-directive .table.tableNoPadding th {
    padding: 8px 4px;
    vertical-align: middle;
}

.transfer-of-funds-directive .table.tableNoMarginBottom {
    margin-bottom: 0;
}

/* Improved hover states for table rows */
.transfer-of-funds-directive .table > tbody > tr:hover {
    background-color: rgba(26, 179, 148, 0.05);
    transition: background-color 0.15s ease;
}

/* Selected row styling */
.transfer-of-funds-directive .table > tbody > tr.st-selected {
    background-color: rgba(26, 179, 148, 0.15);
}

/* Checkbox styling */
.transfer-of-funds-directive input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

/* Responsive styling for mobile devices */
@media (max-width: 767px) {
    .transfer-of-funds-directive .d-none.d-md-table-cell {
        display: none !important;
    }
    
    .transfer-of-funds-directive .ibox-title {
        padding: 10px 10px 5px;
    }
    
    .transfer-of-funds-directive .ibox-content {
        padding: 10px 15px 15px 15px;
    }
    
    .transfer-of-funds-directive div[table-container] {
        max-height: 350px !important;
    }
    
    .transfer-of-funds-directive .action-buttons-container {
        gap: 6px !important;
    }
    
    .transfer-of-funds-directive .action-buttons-container .btn {
        padding: 6px 8px !important;
        min-width: 32px !important;
        height: 32px !important;
    }
    
    .transfer-of-funds-directive .action-buttons-container .btn i {
        font-size: 15px !important;
    }
    
    /* Wider action column on mobile for better touch targets */
    .transfer-of-funds-directive .action-column {
        width: 80px !important;
        min-width: 80px !important;
    }
    
    /* Larger checkbox for better touch target */
    .transfer-of-funds-directive input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }
}

/* Show hidden columns on larger screens */
@media (min-width: 768px) {
    .transfer-of-funds-directive .d-none.d-md-table-cell {
        display: table-cell !important;
    }
}

/* Better pagination styling */
.transfer-of-funds-directive .pagination-sm {
    margin: 10px 0 0;
}

.transfer-of-funds-directive .pagination-sm > li > a,
.transfer-of-funds-directive .pagination-sm > li > span {
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 3px;
}

/* Enhanced table scrolling for wider tables */
@media (max-width: 991px) {
    .transfer-of-funds-directive div[table-container] {
        overflow-x: auto !important;
    }
    
    .transfer-of-funds-directive table {
        min-width: 800px !important;
    }
}

/* Additional CSS for reportingDirective.html - Properly Scoped */

/* Main container scoping - all rules within this selector will only apply to the reporting directive */
.reporting-directive-container {
    /* Base container styles */
    margin-bottom: 10px;
}

/* Title container layout - improved header layout */
.reporting-directive-container .title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.reporting-directive-container .title-left {
    flex: 1;
}

.reporting-directive-container .title-right {
    display: flex;
    justify-content: flex-end;
}

/* Prevent title text from wrapping */
.reporting-directive-container .no-wrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Improved accordion styling */
.reporting-directive-container .accordion-group {
    margin-bottom: 0;
    border-radius: 4px;
}

.reporting-directive-container .accordion-heading {
    padding: 8px 15px;
    background-color: #f5f5f5;
}

.reporting-directive-container .accordion-heading:hover {
    background-color: #f0f0f0;
}

/* Sticky header implementation - only for reporting tables */
.reporting-directive-container .stick-header thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #fff;
}

.reporting-directive-container .stick-header thead.sortable th {
    background-color: #f9f9f9;
    position: sticky;
    top: 42px; /* Adjust based on the height of the search row */
    z-index: 9;
}

/* Button improvements - only for this directive */
.reporting-directive-container .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    padding: 5px;
}

.reporting-directive-container .btn-icon i {
    margin: 0;
}

/* Action button container - scoped */
.reporting-directive-container .action-buttons-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
}

/* Improved spacing utilities - scoped to reporting directive */
.reporting-directive-container .rpt-py-1 {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.reporting-directive-container .rpt-py-2 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.reporting-directive-container .rpt-mb-0 {
    margin-bottom: 0 !important;
}

.reporting-directive-container .rpt-mb-1 {
    margin-bottom: 5px !important;
}

.reporting-directive-container .rpt-m-0 {
    margin: 0 !important;
}

/* Search control improvements - scoped */
.reporting-directive-container .input-sm.form-control[st-search] {
    border-radius: 3px;
    height: 30px;
    margin-bottom: 5px;
}

/* Improving table layouts - scoped */
.reporting-directive-container .tableNoPadding > tbody > tr > td, 
.reporting-directive-container .tableNoPadding > tbody > tr > th, 
.reporting-directive-container .tableNoPadding > tfoot > tr > td, 
.reporting-directive-container .tableNoPadding > tfoot > tr > th, 
.reporting-directive-container .tableNoPadding > thead > tr > td, 
.reporting-directive-container .tableNoPadding > thead > tr > th {
    padding: 5px 8px;
}

/* Responsive adjustments - scoped */
@media (max-width: 767px) {
    .reporting-directive-container .tableNoPadding > tbody > tr > td, 
    .reporting-directive-container .tableNoPadding > tbody > tr > th, 
    .reporting-directive-container .tableNoPadding > tfoot > tr > td, 
    .reporting-directive-container .tableNoPadding > tfoot > tr > th, 
    .reporting-directive-container .tableNoPadding > thead > tr > td, 
    .reporting-directive-container .tableNoPadding > thead > tr > th {
        padding: 4px 5px;
        font-size: 12px;
    }
    
    .reporting-directive-container .input-sm.form-control[st-search] {
        height: 28px;
    }
    
    .reporting-directive-container h5 {
        font-size: 14px;
    }
}

/* Loading spinner container - scoped */
.reporting-directive-container .pd-loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0;
}

/* Pagination improvements - scoped */
.reporting-directive-container .pagination-sm {
    margin: 10px 0 0 0;
}

.reporting-directive-container .pagination-sm > li > a,
.reporting-directive-container .pagination-sm > li > span {
    padding: 5px 10px;
}

/* Custom color for accordion headings - scoped */
.reporting-directive-container .accordion-heading label[style*="color:darkred"] {
    font-weight: 600;
}

/* Additional CSS for budgetsDirective.html - Properly Scoped */

/* Main container scoping - all rules within this selector will only apply to the budgets directive */
.budgets-directive-container {
    /* Base container styles */
}

/* Title container layout - improved header layout */
.budgets-directive-container .title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.budgets-directive-container .title-left {
    flex: 1;
}

.budgets-directive-container .title-right {
    display: flex;
    justify-content: flex-end;
}

/* Prevent title text from wrapping */
.budgets-directive-container .no-wrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Improved spacing utilities - scoped to budgets directive with bdgt- prefix */
.budgets-directive-container .bdgt-py-1 {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.budgets-directive-container .bdgt-py-2 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.budgets-directive-container .bdgt-mb-0 {
    margin-bottom: 0 !important;
}

.budgets-directive-container .bdgt-mb-1 {
    margin-bottom: 5px !important;
}

.budgets-directive-container .bdgt-m-0 {
    margin: 0 !important;
}

/* Button container for better organization */
.budgets-directive-container .btn-container {
    display: flex;
    gap: 5px;
    justify-content: flex-end;
}

/* Button icon styling - smaller, consistent sizing */
.budgets-directive-container .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    padding: 5px;
}

.budgets-directive-container .btn-icon i {
    margin: 0;
}

/* Action buttons container - improved layout */
.budgets-directive-container .action-buttons-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
}

/* Make action column fixed width for better layout */
.budgets-directive-container .action-column {
    width: 1%;
    white-space: nowrap;
}

/* Sticky header implementation - scoped to budgets tables */
.budgets-directive-container .stick-header thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #fff;
}

.budgets-directive-container .stick-header thead.sortable th {
    background-color: #f9f9f9;
    position: sticky;
    top: 42px; /* Adjust based on the height of the search row */
    z-index: 9;
}

/* Search input group styling */
.budgets-directive-container .input-group {
    width: 100%;
}

.budgets-directive-container .input-group .input-sm {
    height: 30px;
}

/* Loading spinner improvements */
.budgets-directive-container pd-loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
}

/* Pagination margins */
.budgets-directive-container .pagination-sm {
    margin: 10px 0 0 0;
}

/* Responsive improvements */
@media (max-width: 767px) {
    .budgets-directive-container .action-buttons-container {
        gap: 3px;
    }
    
    .budgets-directive-container .btn-xs {
        padding: 1px 4px;
        font-size: 11px;
    }
    
    .budgets-directive-container th, 
    .budgets-directive-container td {
        padding: 4px 5px;
        font-size: 12px;
    }
    
    .budgets-directive-container .input-group .input-sm {
        height: 28px;
        font-size: 12px;
    }
    
    .budgets-directive-container h5 {
        font-size: 14px;
    }
}

/* Keep some advanced media queries for better mobile experience */
@media (max-width: 480px) {
    .budgets-directive-container .action-buttons-container {
        justify-content: center;
    }
    
    .budgets-directive-container .form-inline .form-control {
        width: 100%;
        display: inline-block;
    }
    
    .budgets-directive-container .form-inline label {
        display: block;
        margin-bottom: 5px;
    }
}

/* CSS for incomeForm.html - Properly Scoped */

/* Main container scoping - all rules within this selector will only apply to the income form */
.income-form-container {
    /* Base container styles */
}

/* Animation effects */
.income-form-container .modal-content.animated { 
    animation-duration: 0.3s; 
}
.income-form-container .fadeIn { 
    animation-name: fadeIn; 
}
@keyframes fadeIn { 
    from { opacity: 0; } 
    to { opacity: 1; } 
}

/* Modal header styling */
.income-form-container .modal-header {
    padding: 15px 20px;
    background: #f5f5f5;
    border-bottom: 1px solid #e7eaec;
}

.income-form-container .modal-header .d-flex.align-items-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
}

.income-form-container .modal-header .modal-icon {
    color: #1ab394;
    font-size: 28px;
    margin-bottom: 10px;
}

.income-form-container .modal-header .modal-title {
    font-weight: 600;
    margin: 5px 0;
}

/* Modal body improvements */
.income-form-container .modal-body {
    padding: 15px 20px;
}

.income-form-container .modal-body.p-0 {
    padding: 15px 20px !important;
}

/* Form control enhancements */
.income-form-container .income-default-control-position .form-group {
    margin-bottom: 15px;
}

.income-form-container .control-label {
    font-weight: 600;
    display: block;
    margin-bottom: 5px;
    color: #333;
}

.income-form-container .form-control {
    height: 34px;
    padding: 6px 12px;
    border: 1px solid #e5e6e7;
    border-radius: 1px;
    box-shadow: none;
    transition: border-color 0.15s ease-in-out;
}

.income-form-container .form-control:focus {
    border-color: #1ab394;
    box-shadow: none;
    outline: 2px solid rgba(26, 179, 148, 0.3);
}

.income-form-container input[type="number"] {
    text-align: right;
}

/* Input group styling */
.income-form-container .input-group {
    margin-bottom: 5px;
    width: 100%;
}

.income-form-container .input-group-addon {
    cursor: pointer;
    background-color: #f3f3f4;
}

.income-form-container .input-group-addon:hover {
    background-color: #e7eaec;
}

/* Specific to finance source container */
.income-form-container .finance-source-container {
    display: flex;
    width: 100%;
}

.income-form-container .finance-source-container input {
    flex: 1;
}

.income-form-container .finance-source-container .input-group-addon {
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Error message styling */
.income-form-container .text-danger {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #ed5565;
}

/* Section borders and formatting */
.income-form-container .income-form-group-border {
    border: 1px solid #e7eaec;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 15px;
    background-color: #fafafa;
}

/* Modal footer styling */
.income-form-container .modal-footer {
    padding: 15px 20px;
    text-align: right;
    border-top: 1px solid #e7eaec;
    background: #f5f5f5;
}

.income-form-container .modal-footer .btn {
    min-width: 80px;
    margin-left: 5px;
}

.income-form-container .modal-footer .btn i {
    margin-right: 5px;
}

/* Button styling */
.income-form-container .btn-primary {
    background-color: #1ab394;
    border-color: #1ab394;
    color: #FFFFFF;
}

.income-form-container .btn-primary:hover,
.income-form-container .btn-primary:focus {
    background-color: #18a689;
    border-color: #18a689;
}

.income-form-container .btn-white {
    background-color: white;
    border-color: #e7eaec;
    color: #676a6c;
}

.income-form-container .btn-white:hover,
.income-form-container .btn-white:focus {
    background-color: #f3f3f4;
    border-color: #e7eaec;
}

/* Responsive improvements */
@media (max-width: 767px) {
    .income-form-container .income-left-col {
        margin-bottom: 20px;
    }
    
    .income-form-container .form-inline .input-group {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .income-form-container .form-inline .input-group.col-lg-5,
    .income-form-container .form-inline .input-group.col-lg-7 {
        width: 100%;
        padding: 0;
    }
    
    .income-form-container .modal-footer button {
        margin-bottom: 5px;
    }
    
    .income-form-container .input-group {
        margin-bottom: 10px;
    }
}

/* Monthly breakdown container */
.income-form-container .monthly-breakdown-container {
    margin-top: 20px;
}

/* Loading spinner */
.income-form-container pd-loading-spinner {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

/* Print media query for better printouts */
@media print {
    .income-form-container .modal-content {
        width: 100%;
        margin: 0;
        padding: 0;
        border: none;
    }
    
    .income-form-container .modal-footer, 
    .income-form-container .btn {
        display: none !important;
    }
    
    .income-form-container .income-form-group-border {
        border: 1px solid #ddd;
        padding: 10px;
        margin-bottom: 15px;
        page-break-inside: avoid;
    }
    
    .income-form-container input, 
    .income-form-container select, 
    .income-form-container textarea {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }
}

/* Additional CSS for form_finance_source_payment_account_possible_combination.html */

/* Spacing improvements */
.py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}

.m-0 {
  margin: 0 !important;
}

/* Table improvements */
.stick-header thead {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
}

.table.stick-header {
  margin-bottom: 0;
}

/* Responsive improvements */
@media (max-width: 767px) {
  .col-xs-12 {
    margin-bottom: 10px;
  }
  
  .text-right {
    text-align: left !important;
  }
}

/* Loading spinner improvements */
pd-loading-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100px;
}

/* Modal header improvements */
.modal-header {
  display: flex;
  align-items: center;
}

.modal-header .modal-icon {
  margin-right: 10px;
  font-size: 1.2em;
}

.modal-header .modal-title {
  margin: 0;
}

/* Better table interactions */
.table tr.st-selected {
  background-color: rgba(66, 139, 202, 0.1);
}

.table tr:hover {
  background-color: rgba(66, 139, 202, 0.05);
  cursor: pointer;
}

/* Improve reduced spacing for boxes */
.reduced-spacing .ibox-content {
  padding-top: 8px;
  padding-bottom: 8px;
}

.tableNoPadding > thead > tr > th,
.tableNoPadding > tbody > tr > td {
  padding: 5px 8px;
}

/* Improve form controls */
.input-sm.form-control {
  height: 30px;
  padding: 5px 10px;
}

select.input-sm {
  height: 30px;
  line-height: 30px;
}

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

.pd-txt-horizontal-left {
  text-align: left !important;
}

.pd-txt-horizontal-right {
  text-align: right !important;
}

/* Tooltip improvements */
.tooltip {
  z-index: 1070;
  font-size: 12px;
}

/* Better button styling */
.btn-sm {
  padding: 5px 10px;
  font-size: 12px;
}

/* Improve pagination */
.pagination-sm > li > a,
.pagination-sm > li > span {
  padding: 5px 10px;
  font-size: 12px;
}

/* Scoped styles for payment-accounts-directive */
.payment-accounts-directive .ibox {
    clear: both;
    margin-bottom: 25px;
    margin-top: 0;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
    border-radius: 4px;
    overflow: hidden;
}

.payment-accounts-directive .reduced-spacing {
    margin-bottom: 15px;
}

.payment-accounts-directive .mb-1 {
    margin-bottom: 10px;
}

.payment-accounts-directive .py-1 {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.payment-accounts-directive .py-2 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.payment-accounts-directive .m-0 {
    margin: 0 !important;
}

.payment-accounts-directive .mb-0 {
    margin-bottom: 0 !important;
}

/* Title bar with improved button spacing */
.payment-accounts-directive .ibox-title {
    background-color: #ffffff;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 3px 0 0;
    color: inherit;
    margin-bottom: 0;
    padding: 14px 15px 7px;
    min-height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.payment-accounts-directive .ibox-title h5 {
    display: inline-block;
    font-size: 14px;
    margin: 0;
    padding: 0;
    text-overflow: ellipsis;
    font-weight: 600;
    white-space: nowrap; /* Keep title in one line */
}

/* Flex layout for title bar */
.payment-accounts-directive .d-flex {
    display: flex !important;
}

.payment-accounts-directive .w-100 {
    width: 100% !important;
}

.payment-accounts-directive .align-items-center {
    align-items: center !important;
}

.payment-accounts-directive .justify-content-between {
    justify-content: space-between !important;
}

.payment-accounts-directive .nowrap {
    white-space: nowrap !important;
}

.payment-accounts-directive .ibox-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
}

.payment-accounts-directive .ibox-content {
    background-color: #ffffff;
    color: inherit;
    padding: 15px 20px 20px 20px;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0px;
}

/* Button icon styling for consistency */
.payment-accounts-directive .btn-icon {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 2px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.payment-accounts-directive .btn-icon i {
    font-size: 14px !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* Button hover effects */
.payment-accounts-directive .btn-icon:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
}

.payment-accounts-directive .btn-icon:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Sticky header implementation */
.payment-accounts-directive table.stick-header {
    position: relative !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

.payment-accounts-directive table.stick-header thead.sortable th {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background-color: #f5f5f5 !important;
    border-bottom: 1px solid #e7e7e7 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    padding: 8px 4px;
    vertical-align: middle;
    font-weight: 600;
}

/* Table container for sticky header functionality */
.payment-accounts-directive div[table-container] {
    width: 100% !important;
    position: relative !important;
    max-height: 400px !important;
    overflow-y: auto !important;
}

/* Force hardware acceleration for smoother scrolling */
.payment-accounts-directive table.stick-header thead.sortable th {
    will-change: transform !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}

/* Proper overflow handling */
.payment-accounts-directive .ibox, 
.payment-accounts-directive .ibox-content, 
.payment-accounts-directive .wrapper-content, 
.payment-accounts-directive .table-responsive {
    overflow: visible !important;
}

/* Action column styling for better alignment */
.payment-accounts-directive .action-column {
    width: 120px !important;
    min-width: 120px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* Action buttons container with improved layout */
.payment-accounts-directive .action-buttons-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 80px !important;
}

/* Action button styling */
.payment-accounts-directive .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: 28px !important;
    height: 28px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease;
}

.payment-accounts-directive .action-buttons-container .btn i {
    margin: 0 !important;
    font-size: 14px !important;
}

/* Button colors for consistent button styling */
.payment-accounts-directive .action-buttons-container .btn-white-altered {
    background-color: #f3f3f4;
    border-color: #e7eaec;
    color: #676a6c;
}

.payment-accounts-directive .action-buttons-container .btn-white-altered:hover {
    background-color: #e7e7e7;
    border-color: #d9d9d9;
}

/* Improved hover states for table rows */
.payment-accounts-directive .table > tbody > tr:hover {
    background-color: rgba(26, 179, 148, 0.05);
    transition: background-color 0.15s ease;
}

/* Selected row styling */
.payment-accounts-directive .table > tbody > tr.st-selected {
    background-color: rgba(26, 179, 148, 0.15);
}

/* Custom scrollbar for better UX */
.payment-accounts-directive div[table-container]::-webkit-scrollbar {
    width: 8px;
    height: 8px; /* For horizontal scrollbar */
}

.payment-accounts-directive div[table-container]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.payment-accounts-directive div[table-container]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.payment-accounts-directive div[table-container]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Table styling for consistent look */
.payment-accounts-directive .table.tableNoPadding td,
.payment-accounts-directive .table.tableNoPadding th {
    padding: 8px 4px;
    vertical-align: middle;
}

.payment-accounts-directive .table.tableNoMarginBottom {
    margin-bottom: 0;
}

/* Pagination improvements */
.payment-accounts-directive .pagination-sm {
    margin: 10px 0 0;
}

.payment-accounts-directive .pagination-sm > li > a,
.payment-accounts-directive .pagination-sm > li > span {
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 3px;
}

/* Responsive styling for mobile devices */
@media (max-width: 767px) {
    .payment-accounts-directive .action-column {
        width: 140px !important;
        min-width: 140px !important;
    }
    
    .payment-accounts-directive .action-buttons-container {
        gap: 6px !important;
    }
    
    .payment-accounts-directive .action-buttons-container .btn {
        padding: 6px 8px !important;
        min-width: 32px !important;
        height: 32px !important;
    }
    
    .payment-accounts-directive .action-buttons-container .btn i {
        font-size: 15px !important;
    }
    
    .payment-accounts-directive .btn-icon {
        width: 36px !important;
        height: 36px !important;
    }
    
    .payment-accounts-directive .btn-icon i {
        font-size: 16px !important;
    }
    
    .payment-accounts-directive .ibox-title {
        padding: 10px 10px 5px;
    }
    
    .payment-accounts-directive .ibox-content {
        padding: 10px 15px 15px 15px;
    }
    
    /* Better layout for filter controls on small screens */
    .payment-accounts-directive div[table-container] {
        max-height: 300px !important;
    }
    
    .payment-accounts-directive select.form-control {
        margin-top: 5px;
        margin-bottom: 5px;
    }
}

/* Medium screens responsive adjustments */
@media (min-width: 768px) and (max-width: 991px) {
    .payment-accounts-directive .action-column {
        width: 100px !important;
        min-width: 100px !important;
    }
    
    .payment-accounts-directive .action-buttons-container {
        gap: 3px !important;
    }
    
    .payment-accounts-directive .action-buttons-container .btn {
        padding: 4px 6px !important;
        min-width: 26px !important;
        height: 26px !important;
    }
}

/* Responsive text alignment classes */
.payment-accounts-directive .pd-txt-horizontal-center {
    text-align: center !important;
}

.payment-accounts-directive .pd-txt-horizontal-left {
    text-align: left !important;
}

.payment-accounts-directive .pd-txt-horizontal-right {
    text-align: right !important;
}

/* Loading spinner improvements */
.payment-accounts-directive pd-loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0;
}

/* Scoped styles for upgrade-history-directive */
.upgrade-history-directive .ibox {
    clear: both;
    margin-bottom: 25px;
    margin-top: 0;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
    border-radius: 4px;
    overflow: hidden;
}

.upgrade-history-directive .reduced-spacing {
    margin-bottom: 15px;
}

.upgrade-history-directive .mb-1 {
    margin-bottom: 10px;
}

.upgrade-history-directive .py-1 {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.upgrade-history-directive .py-2 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.upgrade-history-directive .m-0 {
    margin: 0 !important;
}

.upgrade-history-directive .mb-0 {
    margin-bottom: 0 !important;
}

/* Title bar with improved button spacing */
.upgrade-history-directive .ibox-title {
    background-color: #ffffff;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 3px 0 0;
    color: inherit;
    margin-bottom: 0;
    padding: 14px 15px 7px;
    min-height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.upgrade-history-directive .ibox-title h5 {
    display: inline-block;
    font-size: 14px;
    margin: 0;
    padding: 0;
    text-overflow: ellipsis;
    font-weight: 600;
    white-space: nowrap; /* Keep title in one line */
}

/* Flex layout for title bar */
.upgrade-history-directive .d-flex {
    display: flex !important;
}

.upgrade-history-directive .w-100 {
    width: 100% !important;
}

.upgrade-history-directive .align-items-center {
    align-items: center !important;
}

.upgrade-history-directive .justify-content-between {
    justify-content: space-between !important;
}

.upgrade-history-directive .nowrap {
    white-space: nowrap !important;
}

.upgrade-history-directive .ibox-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
    gap: 5px; /* Add space between buttons */
}

.upgrade-history-directive .ibox-content {
    background-color: #ffffff;
    color: inherit;
    padding: 15px 20px 20px 20px;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0px;
}

/* Button icon styling for consistency */
.upgrade-history-directive .btn-icon {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.upgrade-history-directive .btn-icon i {
    font-size: 14px !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* Button hover effects */
.upgrade-history-directive .btn-icon:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
}

.upgrade-history-directive .btn-icon:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Sticky header implementation */
.upgrade-history-directive table.stick-header {
    position: relative !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

.upgrade-history-directive table.stick-header thead.sortable th {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background-color: #f5f5f5 !important;
    border-bottom: 1px solid #e7e7e7 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    padding: 8px 4px;
    vertical-align: middle;
    font-weight: 600;
}

/* Table container for sticky header functionality */
.upgrade-history-directive div[table-container] {
    width: 100% !important;
    position: relative !important;
    max-height: 400px !important;
    overflow-y: auto !important;
}

/* Force hardware acceleration for smoother scrolling */
.upgrade-history-directive table.stick-header thead.sortable th {
    will-change: transform !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}

/* Proper overflow handling */
.upgrade-history-directive .ibox, 
.upgrade-history-directive .ibox-content, 
.upgrade-history-directive .wrapper-content, 
.upgrade-history-directive .table-responsive {
    overflow: visible !important;
}

/* Action column styling for better alignment */
.upgrade-history-directive .action-column {
    width: 150px !important;
    min-width: 120px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* Action buttons container with improved layout */
.upgrade-history-directive .action-buttons-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 80px !important;
}

/* Action button styling */
.upgrade-history-directive .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: 28px !important;
    height: 28px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease;
}

.upgrade-history-directive .action-buttons-container .btn i {
    margin: 0 !important;
    font-size: 14px !important;
}

/* Button colors for consistent button styling */
.upgrade-history-directive .action-buttons-container .btn-white-altered {
    background-color: #f3f3f4;
    border-color: #e7eaec;
    color: #676a6c;
}

.upgrade-history-directive .action-buttons-container .btn-white-altered:hover {
    background-color: #e7e7e7;
    border-color: #d9d9d9;
}

/* Improved hover states for table rows */
.upgrade-history-directive .table > tbody > tr:hover {
    background-color: rgba(26, 179, 148, 0.05);
    transition: background-color 0.15s ease;
}

/* Selected row styling */
.upgrade-history-directive .table > tbody > tr.st-selected {
    background-color: rgba(26, 179, 148, 0.15);
}

/* Custom scrollbar for better UX */
.upgrade-history-directive div[table-container]::-webkit-scrollbar {
    width: 8px;
    height: 8px; /* For horizontal scrollbar */
}

.upgrade-history-directive div[table-container]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.upgrade-history-directive div[table-container]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.upgrade-history-directive div[table-container]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Table styling for consistent look */
.upgrade-history-directive .table.tableNoPadding td,
.upgrade-history-directive .table.tableNoPadding th {
    padding: 8px 4px;
    vertical-align: middle;
}

.upgrade-history-directive .table.tableNoMarginBottom {
    margin-bottom: 0;
}

/* Pagination improvements */
.upgrade-history-directive .pagination-sm {
    margin: 10px 0 0;
}

.upgrade-history-directive .pagination-sm > li > a,
.upgrade-history-directive .pagination-sm > li > span {
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 3px;
}

/* Responsive styling for mobile devices */
@media (max-width: 767px) {
    .upgrade-history-directive .action-column {
        width: 140px !important;
        min-width: 140px !important;
    }
    
    .upgrade-history-directive .action-buttons-container {
        gap: 6px !important;
    }
    
    .upgrade-history-directive .action-buttons-container .btn {
        padding: 6px 8px !important;
        min-width: 32px !important;
        height: 32px !important;
    }
    
    .upgrade-history-directive .action-buttons-container .btn i {
        font-size: 15px !important;
    }
    
    .upgrade-history-directive .btn-icon {
        width: 36px !important;
        height: 36px !important;
    }
    
    .upgrade-history-directive .btn-icon i {
        font-size: 16px !important;
    }
    
    .upgrade-history-directive .ibox-title {
        padding: 10px 10px 5px;
    }
    
    .upgrade-history-directive .ibox-content {
        padding: 10px 15px 15px 15px;
    }
    
    /* Better layout for filter controls on small screens */
    .upgrade-history-directive div[table-container] {
        max-height: 300px !important;
    }
    
    .upgrade-history-directive select.form-control {
        margin-top: 5px;
        margin-bottom: 5px;
    }

    /* Maintain title and buttons on different rows on mobile */
    .upgrade-history-directive .d-flex.w-100 {
        flex-direction: column;
        align-items: flex-start;
    }

    .upgrade-history-directive .ibox-tools {
        margin-top: 8px;
        margin-left: 0;
        align-self: flex-end;
    }
}

/* Medium screens responsive adjustments */
@media (min-width: 768px) and (max-width: 991px) {
    .upgrade-history-directive .action-column {
        width: 100px !important;
        min-width: 100px !important;
    }
    
    .upgrade-history-directive .action-buttons-container {
        gap: 3px !important;
    }
    
    .upgrade-history-directive .action-buttons-container .btn {
        padding: 4px 6px !important;
        min-width: 26px !important;
        height: 26px !important;
    }
}

/* Responsive text alignment classes */
.upgrade-history-directive .pd-txt-horizontal-center {
    text-align: center !important;
}

.upgrade-history-directive .pd-txt-horizontal-left {
    text-align: left !important;
}

.upgrade-history-directive .pd-txt-horizontal-right {
    text-align: right !important;
}

/* Loading spinner improvements */
.upgrade-history-directive pd-loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0;
}

/* Scoped styles for tools-directive */
.tools-directive {
    /* General container styling */
    font-family: inherit;
    color: #676a6c;
}

/* Box styling */
.tools-directive .ibox {
    clear: both;
    margin-bottom: 25px;
    margin-top: 0;
    padding: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border-radius: 5px;
    overflow: hidden;
    background-color: #fff;
    transition: all 0.3s ease;
}

.tools-directive .ibox:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

/* Title bar styling */
.tools-directive .ibox-title {
    background-color: #ffffff;
    border-color: #1ab394;
    border-image: none;
    border-style: solid solid none;
    border-width: 3px 0 0;
    color: inherit;
    margin-bottom: 0;
    padding: 15px 20px 8px;
    min-height: 48px;
    position: relative;
}

.tools-directive .ibox-title h5 {
    display: inline-block;
    font-size: 18px;
    margin: 0;
    padding: 0;
    font-weight: 600;
    color: #2f4050;
    white-space: nowrap;
}

/* Content section styling */
.tools-directive .ibox-content {
    background-color: #ffffff;
    color: inherit;
    padding: 20px;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0;
}

.tools-directive .py-2 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* Flex layout utilities */
.tools-directive .d-flex {
    display: flex !important;
}

.tools-directive .w-100 {
    width: 100% !important;
}

.tools-directive .align-items-center {
    align-items: center !important;
}

.tools-directive .justify-content-between {
    justify-content: space-between !important;
}

.tools-directive .m-0 {
    margin: 0 !important;
}

.tools-directive .nowrap {
    white-space: nowrap !important;
}

/* Tools grid layout */
.tools-directive .tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
    width: 100%;
}

/* Tool card styling */
.tools-directive .tool-card {
    display: flex;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    min-height: 150px;
    border: 1px solid #e7eaec;
}

.tools-directive .tool-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.tools-directive .tool-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    padding: 20px;
    font-size: 28px;
    color: white;
}

.tools-directive .tool-icon.primary {
    background-color: #1ab394;
}

.tools-directive .tool-icon.danger {
    background-color: #ed5565;
}

.tools-directive .tool-icon.warning {
    background-color: #f8ac59;
}

.tools-directive .tool-icon.success {
    background-color: #1c84c6;
}

.tools-directive .tool-icon.info {
    background-color: #23c6c8;
}

.tools-directive .tool-icon.muted {
    background-color: #888;
}

.tools-directive .tool-content {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.tools-directive .tool-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 10px;
    color: #2f4050;
}

.tools-directive .tool-description {
    margin: 0 0 15px;
    font-size: 13px;
    color: #888;
    flex-grow: 1;
    line-height: 1.5;
}

.tools-directive .tool-actions {
    margin-top: auto;
    display: flex;
    justify-content: flex-start;
}

/* Button styling */
.tools-directive .btn-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 15px;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    border: none;
}

.tools-directive .btn-tool i {
    margin-right: 8px;
    font-size: 14px;
}

.tools-directive .btn-tool .btn-text {
    white-space: nowrap;
}

.tools-directive .btn-tool:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.12);
}

.tools-directive .btn-tool:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Button variations */
.tools-directive .btn-primary.btn-tool {
    background-color: #1ab394;
    color: white;
}

.tools-directive .btn-primary.btn-tool:hover {
    background-color: #18a689;
}

.tools-directive .btn-danger.btn-tool {
    background-color: #ed5565;
    color: white;
}

.tools-directive .btn-danger.btn-tool:hover {
    background-color: #e64c5c;
}

.tools-directive .btn-warning.btn-tool {
    background-color: #f8ac59;
    color: white;
}

.tools-directive .btn-warning.btn-tool:hover {
    background-color: #f7a54a;
}

.tools-directive .btn-default.btn-tool {
    background-color: #f3f3f4;
    color: #676a6c;
}

.tools-directive .btn-default.btn-tool:hover {
    background-color: #e7e7e7;
}

/* Disabled state */
.tools-directive .tool-card.disabled {
    opacity: 0.7;
}

.tools-directive .tool-card.disabled:hover {
    transform: none;
    box-shadow: 0 1px 5px rgba(0,0,0,0.08);
}

/* Modal styling */
.tools-directive .modal-header {
    background-color: #1ab394;
    color: white;
    border-radius: 6px 6px 0 0;
    padding: 15px;
}

.tools-directive .modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.tools-directive .modal-body {
    padding: 20px;
    font-size: 14px;
    line-height: 1.5;
}

.tools-directive .modal-footer {
    padding: 15px;
    background-color: #f5f5f5;
    border-top: 1px solid #e7eaec;
    border-radius: 0 0 6px 6px;
}

.tools-directive .alert-danger {
    background-color: #fff2f2;
    border-color: #ffd6d6;
    color: #ed5565;
    padding: 15px;
    border-radius: 3px;
    margin-top: 10px;
}

.tools-directive .alert-danger i {
    margin-right: 5px;
}

/* Animation classes */
.tools-directive .animated {
    animation-duration: 0.5s;
    animation-fill-mode: both;
}

.tools-directive .fadeInRight {
    animation-name: fadeInRight;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(40px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Responsive styles */
@media (max-width: 768px) {
    .tools-directive .tools-grid {
        grid-template-columns: 1fr;
    }
    
    .tools-directive .tool-icon {
        min-width: 60px;
        padding: 15px;
        font-size: 24px;
    }
    
    .tools-directive .tool-content {
        padding: 15px;
    }
    
    .tools-directive .tool-title {
        font-size: 14px;
    }
    
    .tools-directive .tool-description {
        font-size: 12px;
    }
    
    .tools-directive .btn-tool {
        padding: 6px 12px;
        font-size: 12px;
    }
}

@media (min-width: 769px) and (max-width: 992px) {
    .tools-directive .tools-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .tools-directive .tools-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tooltip custom styling */
.tools-directive .tooltip {
    font-family: inherit;
}

.tools-directive .tooltip-inner {
    max-width: 300px;
    padding: 10px 15px;
    background-color: #2f4050;
    border-radius: 4px;
    font-size: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Focus styling for accessibility */
.tools-directive .btn-tool:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(26, 179, 148, 0.25);
}

.tools-directive .btn-danger.btn-tool:focus {
    box-shadow: 0 0 0 3px rgba(237, 85, 101, 0.25);
}

.tools-directive .btn-warning.btn-tool:focus {
    box-shadow: 0 0 0 3px rgba(248, 172, 89, 0.25);
}

/* Dark mode support (if needed) */
@media (prefers-color-scheme: dark) {
    .tools-directive.dark-mode {
        color: #e0e0e0;
    }
    
    .tools-directive.dark-mode .ibox,
    .tools-directive.dark-mode .ibox-title,
    .tools-directive.dark-mode .ibox-content,
    .tools-directive.dark-mode .tool-card {
        background-color: #2f3446;
        color: #e0e0e0;
    }
    
    .tools-directive.dark-mode .ibox-title h5,
    .tools-directive.dark-mode .tool-title {
        color: #ffffff;
    }
    
    .tools-directive.dark-mode .tool-description {
        color: #b0b0b0;
    }
    
    .tools-directive.dark-mode .btn-default.btn-tool {
        background-color: #3d4253;
        color: #e0e0e0;
    }
    
    .tools-directive.dark-mode .btn-default.btn-tool:hover {
        background-color: #484f60;
    }
}

/* Scoped styles for cleanup-db-directive */
.cleanup-db-directive {
    font-family: inherit;
    color: #676a6c;
    margin: 0;
    padding: 0;
    width: 100%;
}

/* Page Header Styling */
.cleanup-db-directive .page-header {
    background-color: #fff;
    padding: 20px 20px 15px;
    border-bottom: 1px solid #e7eaec;
    margin-bottom: 25px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.cleanup-db-directive .header-content {
    max-width: 1200px;
    margin: 0 auto;
}

.cleanup-db-directive .page-title {
    margin: 0 0 5px;
    font-size: 24px;
    font-weight: 600;
    color: #2f4050;
}

.cleanup-db-directive .breadcrumb-wrapper {
    margin-top: 5px;
}

.cleanup-db-directive .breadcrumb {
    background: transparent;
    margin: 0;
    padding: 0;
    font-size: 13px;
}

.cleanup-db-directive .breadcrumb li {
    display: inline-block;
}

.cleanup-db-directive .breadcrumb li:not(:first-child):before {
    content: '/';
    padding: 0 5px;
    color: #ccc;
}

.cleanup-db-directive .breadcrumb a {
    color: #1ab394;
    text-decoration: none;
}

.cleanup-db-directive .breadcrumb a:hover {
    text-decoration: underline;
}

.cleanup-db-directive .breadcrumb li.active strong {
    color: #676a6c;
    font-weight: 600;
}

/* Main Content Area */
.cleanup-db-directive .content-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.cleanup-db-directive .animated {
    animation-duration: 0.5s;
    animation-fill-mode: both;
}

.cleanup-db-directive .fadeIn {
    animation-name: fadeIn;
}

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

/* Card Styling */
.cleanup-db-directive .card {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    margin-bottom: 25px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.cleanup-db-directive .card:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.cleanup-db-directive .card-header {
    padding: 15px 20px;
    background-color: #f9fafb;
    border-bottom: 1px solid #e7eaec;
    position: relative;
}

.cleanup-db-directive .card-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #2f4050;
}

.cleanup-db-directive .card-body {
    padding: 20px;
}

/* Alert Boxes */
.cleanup-db-directive .alert {
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
}

.cleanup-db-directive .alert-info {
    background-color: #f0f7fd;
    border-left: 4px solid #23c6c8;
    color: #31708f;
}

.cleanup-db-directive .alert-warning {
    background-color: #fff9f0;
    border-left: 4px solid #f8ac59;
    color: #8a6d3b;
}

.cleanup-db-directive .alert-icon {
    font-size: 20px;
    margin-right: 15px;
    padding-top: 2px;
}

.cleanup-db-directive .alert-content {
    flex: 1;
}

.cleanup-db-directive .alert-content p {
    margin: 0;
    line-height: 1.5;
}

/* Action Row Styling */
.cleanup-db-directive .action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.cleanup-db-directive .action-button {
    flex: 0 0 auto;
}

.cleanup-db-directive .action-toggle {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.cleanup-db-directive .toggle-label {
    margin-right: 10px;
    font-weight: 600;
}

/* Button Styling */
.cleanup-db-directive .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 4px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.cleanup-db-directive .btn:focus {
    outline: none;
}

.cleanup-db-directive .btn i {
    margin-right: 8px;
    font-size: 14px;
}

.cleanup-db-directive .btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.cleanup-db-directive .btn-primary {
    background-color: #1ab394;
    color: white;
}

.cleanup-db-directive .btn-primary:hover:not(:disabled) {
    background-color: #18a689;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.12);
}

.cleanup-db-directive .btn-warning {
    background-color: #f8ac59;
    color: white;
}

.cleanup-db-directive .btn-warning:hover:not(:disabled) {
    background-color: #f7a54a;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.12);
}

.cleanup-db-directive .btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Toggle Switch Styling */
.cleanup-db-directive .switch-wrapper {
    position: relative;
    width: 60px;
    height: 30px;
}

.cleanup-db-directive .switch-checkbox {
    height: 0;
    width: 0;
    visibility: hidden;
    position: absolute;
}

.cleanup-db-directive .switch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 0;
    border-radius: 30px;
    position: relative;
    height: 30px;
    width: 60px;
}

.cleanup-db-directive .switch-inner {
    display: block;
    width: 200%;
    margin-left: -100%;
    transition: margin 0.2s ease-in-out;
    height: 30px;
}

.cleanup-db-directive .switch-inner:before, .cleanup-db-directive .switch-inner:after {
    display: block;
    float: left;
    width: 50%;
    height: 30px;
    padding: 0;
    line-height: 30px;
    color: white;
    font-weight: bold;
    box-sizing: border-box;
}

.cleanup-db-directive .switch-inner:before {
    content: '';
    padding-left: 10px;
    background-color: #1ab394;
}

.cleanup-db-directive .switch-inner:after {
    content: '';
    padding-right: 10px;
    background-color: #eceeef;
    text-align: right;
}

.cleanup-db-directive .switch-switch {
    display: block;
    width: 22px;
    height: 22px;
    background: #fff;
    position: absolute;
    top: 4px;
    bottom: 0;
    right: 34px;
    border-radius: 30px;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.cleanup-db-directive .switch-checkbox:checked + .switch-label .switch-inner {
    margin-left: 0;
}

.cleanup-db-directive .switch-checkbox:checked + .switch-label .switch-switch {
    right: 4px;
}

.cleanup-db-directive .switch-checkbox:disabled + .switch-label {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Table Selection Section */
.cleanup-db-directive .table-selection-container {
    margin-top: 20px;
    background-color: #f9fafb;
    border-radius: 5px;
    padding: 20px;
    border: 1px solid #e7eaec;
}

.cleanup-db-directive .section-title {
    margin: 0 0 15px;
    font-size: 16px;
    font-weight: 600;
    color: #2f4050;
}

.cleanup-db-directive .table-options {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.cleanup-db-directive .table-option {
    flex: 1;
    min-width: 200px;
}

/* Custom Checkbox Styling */
.cleanup-db-directive .checkbox-wrapper {
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    user-select: none;
}

.cleanup-db-directive .styled-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.cleanup-db-directive .checkbox-icon {
    position: absolute;
    top: 0;
    left: 0;
    height: 22px;
    width: 22px;
    background-color: #fff;
    border: 2px solid #d1d1d1;
    border-radius: 3px;
    transition: all 0.2s ease;
}

.cleanup-db-directive .styled-checkbox:checked ~ label .checkbox-icon {
    background-color: #1ab394;
    border-color: #1ab394;
}

.cleanup-db-directive .checkbox-icon:after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.cleanup-db-directive .styled-checkbox:checked ~ label .checkbox-icon:after {
    display: block;
}

.cleanup-db-directive .styled-checkbox:disabled ~ label {
    opacity: 0.5;
    cursor: not-allowed;
}

.cleanup-db-directive .checkbox-label {
    font-weight: normal;
    margin-left: 8px;
}

/* Progress Indicator */
.cleanup-db-directive .progress-indicator {
    text-align: center;
    padding: 20px;
    margin-top: 20px;
    background-color: #f9fafb;
    border-radius: 5px;
    border: 1px solid #e7eaec;
}

.cleanup-db-directive .progress-indicator h4 {
    margin: 0 0 15px;
    font-weight: 600;
    color: #2f4050;
}

.cleanup-db-directive .progress-text {
    margin-top: 15px;
    color: #888;
}

.cleanup-db-directive .spinner {
    margin: 20px auto;
    width: 70px;
    text-align: center;
}

.cleanup-db-directive .spinner > div {
    width: 14px;
    height: 14px;
    background-color: #1ab394;
    border-radius: 100%;
    display: inline-block;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    margin: 0 3px;
}

.cleanup-db-directive .spinner .bounce1 {
    animation-delay: -0.32s;
}

.cleanup-db-directive .spinner .bounce2 {
    animation-delay: -0.16s;
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% { 
        transform: scale(0);
    } 40% { 
        transform: scale(1.0);
    }
}

/* Results Card Styling */
.cleanup-db-directive .result-card {
    margin-top: 30px;
    border: none;
}

.cleanup-db-directive .success-header {
    background-color: #1ab394;
    color: white;
}

.cleanup-db-directive .success-header .card-title {
    color: white;
}

.cleanup-db-directive .error-header {
    background-color: #ed5565;
    color: white;
}

.cleanup-db-directive .error-header .card-title {
    color: white;
}

.cleanup-db-directive .success-message,
.cleanup-db-directive .error-message {
    display: flex;
    align-items: flex-start;
}

.cleanup-db-directive .result-icon {
    font-size: 48px;
    margin-right: 20px;
    color: #1ab394;
}

.cleanup-db-directive .error-message .result-icon {
    color: #ed5565;
}

.cleanup-db-directive .result-content {
    flex: 1;
}

.cleanup-db-directive .result-content h4 {
    margin: 0 0 10px;
    font-weight: 600;
    color: #2f4050;
}

.cleanup-db-directive .result-content p {
    margin: 0 0 15px;
    color: #676a6c;
    line-height: 1.5;
}

.cleanup-db-directive .stats-container {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    gap: 15px;
}

.cleanup-db-directive .stat-item {
    background-color: #f9fafb;
    border-radius: 5px;
    padding: 15px;
    min-width: 150px;
    flex: 1;
}

.cleanup-db-directive .stat-label {
    display: block;
    font-size: 12px;
    color: #888;
    margin-bottom: 5px;
}

.cleanup-db-directive .stat-value {
    font-size: 24px;
    font-weight: 600;
    color: #1ab394;
}

.cleanup-db-directive .error-details {
    margin-top: 15px;
    background-color: #f9fafb;
    border-radius: 5px;
    padding: 15px;
    overflow: auto;
    max-height: 200px;
}

.cleanup-db-directive .error-details pre {
    margin: 0;
    white-space: pre-wrap;
    font-family: monospace;
    font-size: 12px;
    color: #ed5565;
}

.cleanup-db-directive .result-actions {
    margin-top: 25px;
    text-align: right;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .cleanup-db-directive .action-row {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .cleanup-db-directive .action-toggle {
        margin-left: 0;
        margin-top: 15px;
        width: 100%;
        justify-content: space-between;
    }
    
    .cleanup-db-directive .table-options {
        flex-direction: column;
        gap: 15px;
    }
    
    .cleanup-db-directive .table-option {
        width: 100%;
    }
    
    .cleanup-db-directive .stats-container {
        flex-direction: column;
    }
    
    .cleanup-db-directive .success-message,
    .cleanup-db-directive .error-message {
        flex-direction: column;
        text-align: center;
    }
    
    .cleanup-db-directive .result-icon {
        margin: 0 auto 15px;
    }
    
    .cleanup-db-directive .result-actions {
        text-align: center;
    }
}

@media (min-width: 769px) and (max-width: 992px) {
    .cleanup-db-directive .content-wrapper {
        padding: 0 40px;
    }
}

@media (min-width: 993px) {
    .cleanup-db-directive .content-wrapper {
        padding: 0 60px;
    }
}

/* Print-friendly styles */
@media print {
    .cleanup-db-directive .btn,
    .cleanup-db-directive .action-toggle {
        display: none !important;
    }
    
    .cleanup-db-directive .card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        break-inside: avoid;
    }
    
    .cleanup-db-directive .page-header {
        background: none !important;
        box-shadow: none !important;
        border-bottom: 1px solid #ddd !important;
    }
}

/* Extra animations for enhanced UX */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.cleanup-db-directive .pulse-animation {
    animation: pulse 2s infinite;
}

/* Focus states for accessibility */
.cleanup-db-directive .btn:focus {
    box-shadow: 0 0 0 3px rgba(26, 179, 148, 0.25);
}

.cleanup-db-directive .btn-warning:focus {
    box-shadow: 0 0 0 3px rgba(248, 172, 89, 0.25);
}

.cleanup-db-directive .styled-checkbox:focus ~ label .checkbox-icon {
    box-shadow: 0 0 0 3px rgba(26, 179, 148, 0.25);
}

/* High contrast mode support */
@media (forced-colors: active) {
    .cleanup-db-directive .switch-inner:before {
        background-color: Highlight;
    }
    
    .cleanup-db-directive .styled-checkbox:checked ~ label .checkbox-icon {
        background-color: Highlight;
    }
    
    .cleanup-db-directive .btn-primary,
    .cleanup-db-directive .btn-warning {
        border: 1px solid ButtonText;
    }
}

/* === POSITION VALIDATION BACKGROUND COLORS === */
/* NEW 2024-11-11: 6 distinct colors for position validation legend filters */
/* Used in positions grid to highlight different validation issues with clear visual distinction */

/* Priority #1 - Duplicate Combination (HIGHEST) */
.pd-background-color-crimson { 
    background-color: #DC143C !important; 
}

/* Priority #2 - Not Unique Positions */
.pd-background-color-yellow { 
    background-color: yellow !important; 
}

/* Priority #3 - Quota Sum Overflow */
.pd-background-color-plum { 
    background-color: #DDA0DD !important; 
}

/* Priority #4 - Inconsistent Positions */
.pd-background-color-lightsalmon { 
    background-color: #FFA07A !important; 
}

/* Priority #5 - Invalid Function Codes */
.pd-background-color-orange { 
    background-color: orange !important; 
}

/* Priority #6 - Bad Plans (LOWEST) */
.pd-background-color-aquamarine { 
    background-color: aquamarine !important; 
}

/* Default - No validation issues */
.pd-background-color-ghostwhite { 
    background-color: ghostwhite !important; 
}

/* Legacy colors - kept for backward compatibility */
.pd-background-color-red { 
    background-color: red !important; 
}

.pd-background-color-mistyrose { 
    background-color: mistyrose !important; 
}

.pd-background-color-lightcoral { 
    background-color: lightcoral !important; 
}

.pd-background-color-mediumseagreen { 
    background-color: mediumseagreen !important; 
}

/* Reusable accordion directive (pdAccordion) */
.pd-accordion-header {
    cursor: pointer;
    user-select: none;
}