body {
    zoom: 0.7;
}

* {
    cursor: default !important;
}

a,
button,
[role="button"],
.btn {
    cursor: pointer !important;
}


/* Remove default body and html margins/padding */
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    /* prevent horizontal scrollbar */
}

.modal-backdrop {
    position: static !important;
    top: auto !important;
    left: auto !important;
    z-index: auto !important;
    width: auto !important;
    height: auto !important;
    background-color: transparent !important;
    opacity: 0 !important;
    display: none !important;
}

@media (min-width: 1350px) {
    .col-md-4 {
        width: 2500px !important;
    }
}

/* Make all Bootstrap containers full width if needed */
.container,
.container-fluid {
    padding-left: 3 !important;
    padding-right: 3 !important;
    max-width: 100% !important;
}

/* Base style */
.container>.mb-3>nav:not([aria-label]) .nav-link {
    display: inline-block;
    position: relative;
    color: #464646 !important;
    text-decoration: none;
    padding: 14px 28px !important;
    font-weight: 500;
    transition: color 0.3s ease, transform 0.3s ease, background 0.3s ease,
        border-color 0.3s ease, box-shadow 0.3s ease;
    animation: textPulse 2s ease-in-out infinite;

    /* Liquid glass base */
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;

    /* Darker lift shadow */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35),
        0 0 2px rgba(255, 255, 255, 0.2);

    /* 🔹 Text clarity & rendering priority */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    backface-visibility: hidden !important;
    transform: translateZ(0) !important;
}

/* Hover: stop pulsing, green color + full underline */
.container>.mb-3>nav:not([aria-label]) .nav-link:hover {
    color: #347322 !important;
    transform: none !important;
    animation: none !important;
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
}

/* Sweep effect on hover */
.container>.mb-3>nav:not([aria-label]) .nav-link:hover::before {
    opacity: 1;
    transform: translateX(100%) rotate(25deg);
    transition: transform 0.8s ease, opacity 0.4s ease;
}

/* Underline on hover */
.container>.mb-3>nav:not([aria-label]) .nav-link:hover::after {
    animation: none;
    width: 100%;
    left: 0;
    transform: none;
}

/* Keyframes for idle breathing effect — reduced blur-causing scale */
@keyframes textPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.005);
        /* gentler pulse for sharp text */
    }
}

/* Line pulse keyframes (unchanged) */
@keyframes linePulse {

    0%,
    100% {
        width: 0;
        opacity: 0.4;
    }

    50% {
        width: 80%;
        opacity: 1;
    }
}


/* Optional: rows should not have negative margins (Bootstrap does this by default) */
.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Apply Poppins font to the whole row */
.row.my-3 {
    font-family: 'Poppins', sans-serif;
    display: flex;
    justify-content: space-between;
    /* spreads the columns evenly */
    align-items: center;
    /* vertically center content */
    text-align: center;
    /* center text inside each column */
}

/* Optional: make each column take equal width */
.row.my-3 .col-md {
    flex: 1;
    /* all columns take equal space */
}

/* Optional: if you want left, center, right alignment specifically */
.row.my-3 .col-md:first-child {
    text-align: left;
}

.row.my-3 .col-md:nth-child(2) {
    text-align: center;
}

.row.my-3 .col-md:last-child {
    text-align: right;
}

/* Style strong labels if needed */
.row.my-3 .col-md strong {
    display: block;
    margin-bottom: 4px;
}


/* Base Navbar */

/* Force navbar container to span full width */
.navbar.idata,
.navbar.idata .container,
.navbar.idata .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto;
}

/* Make the navbar itself stick to edges */
.navbar.idata {
    left: 0;
    right: 0;
    background-color: #464646;
    padding: 0.5rem 1rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* Logo */
.navbar-brand img {
    height: 60px;
    margin-right: 0.5rem;
}

.navbar-brand {
    font-weight: 700;
    color: #ffffff;
    font-size: 1.2rem;
}

.navbar-brand span.text-danger {
    font-size: 0.8rem;
    margin-left: 0.3rem;
}

/* Import Roboto font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/* Apply Roboto to nav elements */
.navbar.idata,
.navbar-brand,
.nav-link,
.dropdown-item {
    font-family: 'Roboto', sans-serif;
    border-radius: 12px;
}



/* Nav Links */
.nav-link {
    color: #fff !important;
    font-weight: 500;
    margin-right: 1rem;
    transition: color 0.2s;
    position: relative;
    display: inline-block;
    padding: 8px 0 !important;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    /* thickness of the line */
    background-color: #ffffff;
    /* green color */
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.nav-link.dropdown-toggle::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    /* thickness */
    background-color: #28a745;
    /* green */
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}

.nav-link.dropdown-toggle:hover::after {
    transform: scaleX(1);
}

.col-md-3 .nav-link {
    color: #464646 !important;
    font-weight: 500;
    margin-right: 1rem;
    transition: color 0.2s;
    position: relative;
    display: inline-block;
    padding: 8px 0 !important;
}

.badge.badge-dark {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    /* slightly bigger */
    font-weight: 500;
    background-color: #347322 !important;
    /* iData green */
    color: #ffffff !important;
    /* text color stays */
    padding: 6px 12px;
    border-radius: 10px;
    transition: background 0.3s ease, transform 0.2s ease;
}

.badge.badge-dark:hover {
    background-color: #3e8a29 !important;
    /* lighter green hover */
    transform: translateY(-2px);
    color: #fffff !important;
    /* text color remains unchanged */
}


div.mt-3 .nav-link {
    position: relative !important;
    display: inline-block !important;
    color: #464646 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    padding: 12px 24px !important;
    border-radius: 12px !important;
    transition:
        color 0.3s ease !important,
        transform 0.3s ease !important,
        background 0.3s ease !important,
        border-color 0.3s ease !important,
        box-shadow 0.3s ease !important;
    animation: textPulse 2s ease-in-out infinite !important;

    /* 🔹 Glassy background */
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    overflow: hidden !important;

    /* 🌑 Softer shadow */
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.35),
        0 0 2px rgba(255, 255, 255, 0.2) !important;

    /* 🧠 Text clarity */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    backface-visibility: hidden !important;
    transform: translateZ(0) !important;
}

/* Hover – gentle lift and shadow motion */
div.mt-3 .nav-link:hover {
    color: #347322 !important;
    transform: translateY(-2px) scale(1.02) !important;
    animation: none !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow:
        0 12px 25px rgba(0, 0, 0, 0.4),
        0 0 4px rgba(255, 255, 255, 0.2) !important;
}

/* Sweep animation */
div.mt-3 .nav-link::before {
    content: "" !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0.35) 0%,
            rgba(255, 255, 255, 0) 60%) !important;
    transform: rotate(25deg) !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease !important, transform 0.8s ease !important;
    pointer-events: none !important;
}

div.mt-3 .nav-link:hover::before {
    opacity: 1 !important;
    transform: translateX(100%) rotate(25deg) !important;
}

/* Underline animation */
div.mt-3 .nav-link::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    width: 0 !important;
    height: 3px !important;
    background-color: #347322 !important;
    transform: translateX(-50%) !important;
    transition: all 0.3s ease !important;
    border-radius: 2px !important;
}

div.mt-3 .nav-link:hover::after,
div.mt-3 .nav-link.active::after {
    width: 100% !important;
    left: 0 !important;
    transform: none !important;
}

/* 🌬️ Subtle breathing animation */
@keyframes textPulse {

    0%,
    100% {
        transform: scale(1) !important;
    }

    50% {
        transform: scale(1.02) !important;
    }
}


.mx-auto.w-50.text-center.border.border-danger.rounded.p-3 {
    background-color: #ffffff !important;
    /* solid white */
    background: #ffffff !important;
    /* redundant but ensures override */
    opacity: 1 !important;
    /* cancel inherited transparency */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    border-radius: 12px !important;
    transition: box-shadow 0.3s ease !important;

    /* kill any parent transparency effects */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    mix-blend-mode: normal !important;
    isolation: isolate !important;
    position: relative !important;
    z-index: 1 !important;
}


.border {
    border: 1px solid transparent !important;
}




/* 🌿 Liquid Glass Style — only for standalone navs */
/* === NAV.NAV LINKS – Polished Liquid Glass Version === */
nav.nav .nav-link {
    position: relative;
    display: inline-block;
    color: #464646 !important;
    text-decoration: none;
    margin-right: 10px;
    padding: 14px 28px !important;
    font-weight: 500;
    border-radius: 12px;
    transition: color 0.3s ease, transform 0.3s ease,
        background 0.3s ease, border-color 0.3s ease,
        box-shadow 0.3s ease;
    animation: textPulse 2s ease-in-out infinite;

    /* 🔹 Liquid glass base */
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;

    /* Soft lift + glass reflection */
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.35),
        0 0 2px rgba(255, 255, 255, 0.2);

    /* 🔸 Text rendering priority & GPU isolation */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    backface-visibility: hidden !important;
    transform: translateZ(0) !important;
}

/* ✨ Liquid sweep overlay */
nav.nav .nav-link::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0.35) 0%,
            rgba(255, 255, 255, 0) 60%);
    transform: rotate(25deg);
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.8s ease;
    pointer-events: none;
}

/* Underline setup */
nav.nav .nav-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background-color: #347322;
    transform: translateX(-50%);
    transition: all 0.3s ease;
    border-radius: 2px;
}

/* 🪄 Hover – green tint, glow, sweep, underline */
nav.nav .nav-link:hover {
    color: #347322 !important;
    transform: translateY(-1px);
    animation: none;
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow:
        0 6px 16px rgba(52, 115, 34, 0.25),
        0 3px 8px rgba(0, 0, 0, 0.2);
}

/* Sweep overlay animation */
nav.nav .nav-link:hover::before {
    opacity: 1;
    transform: translateX(100%) rotate(25deg);
}

/* Underline expansion */
nav.nav .nav-link:hover::after,
nav.nav .nav-link.active::after {
    width: 100%;
    left: 0;
    transform: none;
}

/* 🔺 Red variant */
nav.nav .nav-link.text-danger {
    color: #ff4b5c !important;
}

/* 🌬️ Keyframes for motion consistency */
@keyframes linePulse {

    0%,
    100% {
        width: 0;
        opacity: 0.4;
    }

    50% {
        width: 80%;
        opacity: 1;
    }
}

@keyframes textPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }
}


.col-md-3 .nav-pills .nav-link.active,
.col-md-3 .nav-pills .show>.nav-link {
    color: #464646 !important;
    background-color: transparent !important;
}

.col-md-3 .nav-pills .nav-link.active:hover,
.col-md-3 .nav-pills .show>.nav-link:hover {
    color: #7eba0a !important;
    /* iData green */
}



/* Dropdown styling */
.nav-item.dropdown .dropdown-menu {
    background-color: #464646;
    border: none;
    border-radius: 8px;
    min-width: 150px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dropdown items */
.dropdown-item {
    color: #ffffff !important;
    padding: 0.5rem 1rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover / active state */
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #347322 !important;
    color: #ffffff !important;
}

/* Divider line */
.dropdown-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Mobile toggler */
.navbar-toggler {
    border-color: #ffffff;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Right-aligned nav */
.navbar-nav.d-flex.justify-content-end {
    gap: 0.5rem;
}

/* Sticky small effect */
.navbar.shrink {
    padding: 0.25rem 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

/* Internal Page Navigation Styling */
.d-flex .nav {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    gap: 1rem;
}

/* Internal nav links */
/* Base style */
.d-flex .nav .nav-link {
    position: relative;
    display: inline-block;
    color: #464646 !important;
    font-weight: 500;
    margin-right: 1rem;
    text-decoration: none;
    padding: 10px 18px !important;
    /* top/bottom = 10px, left/right = 18px */
    border-radius: 8px;
    transition: color 0.3s ease, transform 0.3s ease, background 0.3s ease,
        border-color 0.3s ease, box-shadow 0.3s ease;

    /* 🔹 Liquid glass base */
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;

    /* Soft shadow to lift it slightly */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25),
        0 0 2px rgba(255, 255, 255, 0.2);

    /* 🔹 Text clarity & rendering priority */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    backface-visibility: hidden !important;
    transform: translateZ(0) !important;
}

/* Hover effect: green text + lifted glass glow */
.d-flex .nav .nav-link:hover {
    color: #347322 !important;
    transform: translateY(-1px) translateZ(0);
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow:
        0 6px 16px rgba(52, 115, 34, 0.25),
        0 3px 8px rgba(0, 0, 0, 0.2);
}

/* Underline effect */
.d-flex .nav .nav-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background-color: #347322;
    transition: all 0.3s ease;
    transform: translateX(-50%);
    border-radius: 2px;
}

/* Expand underline on hover or active state */
.d-flex .nav .nav-link:hover::after,
.d-flex .nav .nav-link.active::after {
    width: 100%;
}

/* Optional: gentle pulse for consistency */
@keyframes textPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.005);
    }
}


/* Internal Page Nav Tabs */
.card-header .nav-tabs {
    border-bottom: 2px solid #347322;
    gap: 0.5rem;
    padding-bottom: 0.25rem;
}

.card-header .nav-tabs .nav-link {
    color: #333 !important;
    font-weight: 500;
    background: transparent;
    border: none;
    position: relative;
    padding: 8px 0;
    transition: all 0.3s ease;
}

.card-header .nav-tabs .nav-link:hover {
    color: #347322 !important;
}

.card-header .nav-tabs .nav-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background-color: #347322;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.card-header .nav-tabs .nav-link.active::after,
.card-header .nav-tabs .nav-link:hover::after {
    width: 100%;
}

.card-header .nav-tabs .nav-link.active {
    color: #347322 !important;
}

/* Breadcrumb base styles */
.breadcrumb {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    background-color: transparent;
    margin-bottom: 1rem;
    opacity: 0;
    transform: translateX(-20px);
    /* start slightly left */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.breadcrumb.show {
    opacity: 1;
    transform: translateX(0);
    /* slide into place */
}

.breadcrumb.hide {
    opacity: 0;
    transform: translateX(-20px);
    /* slide back out to the left */
}


.breadcrumb-item a {
    color: #464646;
    font-weight: 600;
    text-decoration: none;
}

.breadcrumb-item.active {
    color: #347322;
    font-weight: 900;
    font-size: large;
}


@media (max-width: 768px) {
    table.table tbody {
        background: #464646 !important;
        /* Make tbody transparent */
    }

    table.table tbody tr {
        display: block;
        /* Stack rows vertically */
        margin-bottom: 1rem;
        /* Space between rows */
        border: 1px solid #dee2e6;
        /* Optional border for definition */
        border-radius: 0.5rem;
        /* Rounded edges for a clean look */
        overflow: hidden;
        background: #ffffff;
        /* Each row has its own white background */
    }


}

@media (max-width: 768px) {
    .card.w-50 {
        width: 95% !important;
        /* makes it nearly full width on tablets/phones */
    }
}

@media (max-width: 480px) {
    .card.w-50 {
        width: 98% !important;
        /* even wider on small phones */
    }
}

body {
    background: #ffffff;
    min-height: 100vh;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

body::before {
    content: '';
    position: fixed;
    bottom: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    pointer-events: none;
    z-index: 0;
    /* Increased opacity to make the faster sweep more noticeable */
    background: linear-gradient(45deg,
            rgba(52, 115, 34, 0) 0%,
            rgba(52, 115, 34, 0.25) 50%,
            /* opacity from 0.15 → 0.25 */
            rgba(52, 115, 34, 0) 100%);
    /* Faster animation duration */

}

@keyframes diagonalSweep {
    0% {
        transform: translate(-25%, 25%);
    }

    50% {
        transform: translate(25%, -25%);
    }

    100% {
        transform: translate(-25%, 25%);
    }
}



/* Liquid Glass / Neumorphic Cards */
/* Bounce on load */
/* Subtle bounce keyframes */
@keyframes subtleBounceIn {
    0% {
        transform: scale(0.97);
        opacity: 0;
    }

    60% {
        transform: scale(1.02);
        opacity: 1;
    }

    80% {
        transform: scale(0.99);
    }

    100% {
        transform: scale(1);
    }
}

/* Base badge-light style */
.badge.badge-light {
    font-family: 'Roboto', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    padding: 0.5rem 0.8rem;
    background-color: #347322;
    /* light background */
    border-radius: 12px;
    color: #ffff;
    transition: all 0.3s ease;
    display: inline-block;
}

/* Hover effect for badge-light */
.badge.badge-light:hover {
    transform: translateY(-2px);
    background-color: #347322 !important;
    color: #fff !important;
}

/* Info badge style (if you’re using .badge-info separately) */
.badge.badge-info {
    font-family: 'Roboto', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    padding: 0.5rem 0.8rem;
    background-color: #347322;
    border-radius: 12px;
    color: #fff;
}


.badge {
    display: inline-block;
    padding: .35em .65em;
    font-size: .75em;
    font-weight: 700;
    line-height: 1;
    color: #464646;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem
}

.badge.badge-info {
    font-family: 'Roboto', sans-serif;
    /* Roboto font */
    font-size: 1.1rem;
    /* Make it bigger, adjust as needed */
    font-weight: 500;
    /* Optional: makes it a bit bolder */
    padding: 0.5rem 0.8rem;
    background-color: #347322;
    /* green background */
    border-radius: 12px;
    color: #ffff;
    /* rounded corners */
    /* Optional: increases the badge size */
}


/* Hover effect for badge-primary inside table rows */
tbody tr:hover .badge.badge-primary {
    color: white;
    /* text turns white */
    background-color: #347322;
    /* green background */
    border-radius: 12px;
    /* rounded corners */
}


.list-group-item:hover .badge {
    color: #fff;
}


/* Card base styles */
.card.mb-5,
.card.mt-4 {
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-radius: 12px;
    border: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: 100%;
    overflow: visible;
    transition: all 0.3s ease;
}






.card-header {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

/* List Group (matches table hover) */
.card .list-group-item {
    /* background: rgba(255, 255, 255, 0.1); */
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    margin: 8px 0;
    transition: all 0.3s ease;
    cursor: pointer;
    color: #111;
}

span.col-md-6 {
    display: block;
    /* ensures alignment works properly */
    margin-left: auto;
    /* pushes it to the right */
    text-align: right;
    /* aligns text inside to the right */
}

/* Optional: make inner rows fit content nicely */
span.col-md-6 .row {
    justify-content: flex-end;
    /* pushes inner content to the right too */
}

/* Hover effect on list item itself */
.list-group-item:hover {
    transform: translateY(-2px);
    background-color: #bdb6b6 !important;
    /* correct dark bg */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.12),
        -4px -4px 10px rgba(255, 255, 255, 0.85);
    /* optional: fallback text color */
}

/* 🔹 Base liquid glass link style */
.list-group-item a {
    position: relative;
    display: inline-block;
    color: #347322;
    /* Always green */
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
    text-align: center;
    transition: all 0.3s ease;

    /* Inner glow + outer drop shadow */
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -2px 6px rgba(0, 0, 0, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.25);

    /* 🔹 Text clarity and crisp rendering */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    backface-visibility: hidden !important;
    transform: translateZ(0) !important;
}

/* glossy top highlight */
.list-group-item a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 10px 10px 0 0;
    opacity: 0.5;
    pointer-events: none;
}

/* hover effect: lift and glow */
.list-group-item a:hover {
    transform: translateY(-2px) translateZ(0);
    /* smaller lift, keeps sharpness */
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(52, 115, 34, 0.4);
    box-shadow:
        0 6px 14px rgba(52, 115, 34, 0.25),
        /* soft green glow */
        0 4px 10px rgba(0, 0, 0, 0.25),
        /* stronger bottom lift */
        inset 0 2px 4px rgba(255, 255, 255, 0.25),
        inset 0 -2px 6px rgba(0, 0, 0, 0.25);
    color: #2a5e1c;
}

/* 🔹 Liquid glass sweep effect */
.list-group-item a::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0.3) 0%,
            rgba(255, 255, 255, 0) 60%);
    transform: rotate(25deg);
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.8s ease;
    pointer-events: none;
}

del {
    background-color: rgba(255, 0, 0, 0.2);
    /* soft red background */
    color: #888;
    /* slightly greyed-out text */
    text-decoration: none;
    /* remove line-through */
    padding: 2px 4px;
    /* small padding for better readability */
    border-radius: 4px;
    /* optional – smooth corners */
}


/* 🔹 Hover — sweep + subtle glow */
.list-group-item a:hover {
    color: #347322;
    /* same on hover */
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 12px rgba(126, 186, 10, 0.3);
}

.list-group-item a:hover::before {
    opacity: 1;
    transform: translateX(100%) rotate(25deg);
}

/* 🔹 Strong-tag version (consistent green) */
.list-group-item strong a {
    color: #7eba0a !important;
    text-decoration: none;
}

.list-group-item strong :hover {
    color: #7eba0a !important;
}



/* 🔹 Ensure link text is #464646 by default */
/* Base link styling */
a.load_modal_content,
a.load_modal_content:link,
a.load_modal_content:visited {
    color: #464646 !important;
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.1);
    /* faint white tint */
    backdrop-filter: blur(10px);
    /* the glass effect */
    -webkit-backdrop-filter: blur(10px);
    /* Safari support */
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* subtle border */
    border-radius: 12px;
    padding: 6px 12px;
    transition: all 0.3s ease;
    display: inline-block;
    /* for neat background fit */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* soft depth */
}

a.load_modal_content:hover {
    color: #000000;
    /* white on hover */
}

/* Hover effect */
a.load_modal_content:hover,
a.load_modal_content:focus {
    color: #1a0000 !important;
    background: #464646;
    border-color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    transform: translateY(-2px);
    /* subtle lift */
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}



/* Badges inside list items */
.badge-success {
    background-color: #347322 !important;
    font-weight: 600;
    padding: 6px 12px;
}

/* Base glass look */
.table.table-hover {
    background: transparent;
    border-collapse: separate;
    border-spacing: 0 8px;
}

.table.table-hover tr {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

}

/* Hide table header on small screens */
@media (max-width: 768px) {
    table thead {
        display: none;
    }
}

/* Show header normally on desktop */
@media (min-width: 769px) {
    table thead {
        display: table-header-group;
    }
}


/* Table cells */
.table.table-hover td {
    border: none;
    padding: 12px 16px;
    color: #464646;
}

thead th.text-center {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    color: #464646;
    text-align: center;
    /* ensures centering remains */
}


/* Link styling – stays green always */

table tbody tr:hover,
table tbody tr:active,
table tbody tr.clicked {
    background-color: #ffffff !important;
    */
}

table tbody tr:hover td,
table tbody tr:hover td::before,
table tbody tr:active td,
table tbody tr:active td::before,
table tbody tr.clicked td,
table tbody tr.clicked td::before {
    color: #464646 !important;
}

.text-success {
    --bs-text-opacity: 1;
    color: #347322 !important;
}

.text-info {
    --bs-text-opacity: 1;
    color: #347322 !important;
}


/* Hover effect for row (excluding links) */
.table.table-hover tr:hover {
    background: rgba(70, 70, 70, 0.65);
    color: #3b0000;
    /* makes normal text white */

}

/* Prevent link color from turning white when row is hovered */
.table.table-hover tr:hover a {
    color: #347322 !important;
}

/* Optional: rounded corners */
.table.table-hover tr:first-child td:first-child {
    border-top-left-radius: 12px;
}

.table.table-hover tr:first-child td:last-child {
    border-top-right-radius: 12px;
}

.table.table-hover tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}

.table.table-hover tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}


/* Neumorphic Table Rows — Compact Version */
/* Neumorphic Table Rows — Slim Version */
.table {
    border-collapse: separate;
    border-spacing: 0 6px;
    /* slightly tighter row spacing */
    border-radius: 0;
    overflow: hidden;

    font-size: 0.9rem;
    /* keep same font size */
}

.table td,
.table th {
    padding: 4px 8px;
    /* slightly thinner padding */
    vertical-align: middle;
}

/* Keep the neumorphic vibe but with less shadow bulk */
.table tr {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border-radius: 8px;
}

tr.clickable th {
    font-family: 'Poppins', sans-serif;
    font-size: 1.4rem;
    color: #464646;
}




.text-right.me-4 a {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid;
    backdrop-filter: blur(10px);
    color: #7eba0a;
    text-decoration: none;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Liquid glass sweep effect */
.text-right.me-4 a::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0.3) 0%,
            rgba(255, 255, 255, 0) 60%);
    transform: rotate(25deg);
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.8s ease;
}

/* Hover state */
.text-right.me-4 a:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    color: #660b0b;
}

/* Animated “liquid” reflection on hover */
.text-right.me-4 a:hover::before {
    opacity: 1;
    transform: translateX(100%) rotate(25deg);
}

/* Optional smooth glow */
.text-right.me-4 a:hover {
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
}

.table th,
.table td {
    border: none;
    vertical-align: middle;
    padding: 12px 15px;
}

td {
    font-family: 'Poppins', sans-serif !important;
    font-size: 1.1rem !important;
    /* slightly larger than default */
    font-weight: 500;
    /* medium weight for clarity */
    color: inherit;
    /* keeps same color unless you want to change it */
    text-decoration: none;
    /* optional: removes underline */
}


td.text-right {
    text-align: right !important;
    border: 1px solid rgba(70, 70, 70, 0.3);
    /* same grey, 30% opacity */
    border-radius: 12px;
    padding: 8px 12px;
    background: #46464612;
    /* keep row background normal */
    transform: none;
    box-shadow: none;
    color: #464646;
}

table tr {
    margin-bottom: 1.25rem;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid #eaeaea;
    overflow: hidden;
    padding: 0.75rem 1rem;
    transition: background-color 0.3s ease, transform 0.2s ease;
    cursor: pointer;
}


/* 🔹 Liquid glass look for <th> links */
th a {
    position: relative;
    display: inline-block;
    color: #347322;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
    transition: background 0.3s ease, border-color 0.3s ease,
        box-shadow 0.3s ease, transform 0.3s ease;
    z-index: 1;
}

/* 🔹 Proper shine sweep effect */
th a::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.6) 50%,
            rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

/* 🔹 Hover animation (shine moves across) */
th a:hover::before {
    opacity: 1;
    animation: shineSweep 1s ease forwards;
}

/* 🔹 Lifted hover state */
th a:hover {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15),
        inset 0 0 10px rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

/* ✨ Keyframes for smooth sweeping motion */
@keyframes shineSweep {
    0% {
        left: -100%;
    }

    50% {
        left: 50%;
    }

    100% {
        left: 120%;
    }
}



/* Reset row hover so only cells highlight */
.table tbody tr:hover {
    background: #7a4444;
    /* keep row background normal */
    transform: none;
    box-shadow: none;
    color: #464646;
}

/* Style the close button */
.modal-header .btn-close {
    background: rgba(255, 255, 255, 0.2) !important;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Remove Bootstrap’s default X SVG */
    opacity: 1;
    background-image: none !important;

    font-size: 1.2rem;
    font-weight: bold;
    color: #464646;

    cursor: pointer;
    transition: all 0.3s ease;

    box-shadow:
        inset 0 1px 4px rgba(255, 255, 255, 0.3),
        inset 0 -2px 10px rgba(0, 0, 0, 0.2),
        0 8px 20px rgba(0, 0, 0, 0.25);
}

/* Add your own "×" pseudo element */
.modal-header .btn-close::before {
    content: "×";
    font-size: 20px;
    color: #464646;
    line-height: 1;
}

/* Hover effect */
.modal-header .btn-close:hover {
    background: rgba(255, 255, 255, 0.35) !important;
    transform: scale(1.1);
}

.modal-header .btn-close:hover::before {
    color: #347322;
    /* your green on hover */
}


/* Row hover reset */
.table tbody tr:hover {
    background: #bdb6b6 !important;
    transform: none;
    box-shadow: none;
    color: #464646;
}


/* Make .text-right.me-4 white on hover */
.table tbody tr:hover .text-right.me-4 {
    color: #7b1313 !important;
}

th,
th.w-25 {
    font-size: 22px !important;
}

/* Hover effect for the label cell */
.table tbody tr td.d-flex.justify-content-between:hover {
    background-color: #bdb6b6;
    color: #7a0202;
}

/* Hover effect for the value cell */
.table tbody tr td.text-right:hover {
    background-color: #ffff;
    color: #740000;
}

/* When hovering the label, highlight its sibling .text-right */
.table tbody tr td.d-flex.justify-content-between:hover+td.text-right {
    background-color: #bdb6b6;
    color: #fff;
}

/* Modern browsers: when hovering the value, highlight the preceding label */
.table tbody tr:has(td.text-right:hover) td.d-flex.justify-content-between {
    background-color: #bdb6b6;
    color: #fff;
}


.table-hover>tbody>tr:hover>* {
    --bs-table-accent-bg: var(--bs-table-hover-bg);
    color: #fff;
}

.table tbody tr a {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: #347322;
    text-decoration: none;
    transition: color 0.3s ease;
}

.table tbody tr:hover a {
    color: #347322;
}

.table tbody tr:active {
    transform: translateY(2px);
    box-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.12),
        inset -3px -3px 8px rgba(255, 255, 255, 0.85);
}

/* Consistent Nav Tabs (same as internal nav links) */
.nav.nav-tabs {
    background: rgb(255 255 255);
    /* semi-transparent for liquid glass */
    backdrop-filter: blur(10px) saturate(180%);
    /* subtle blur */
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid rgba(70, 70, 70, 0.25);
    /* soft border */
    border-radius: 12px;
    padding: 12px;
    display: flex;
    gap: 8px;
    /* spacing between tabs */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    /* soft shadow for depth */
    transition: all 0.3s ease;
}

/* Tab items */
.nav.nav-tabs .nav-item {
    margin: 0;
}

.form-check-input:checked {
    background-color: #347322 !important;
    border-color: #347322 !important;
}


/* Tab links styled like internal nav links */
.nav.nav-tabs .nav-link {
    color: #464646 !important;
    font-weight: 500;
    margin-right: 1rem;
    transition: color 0.2s;
    position: relative;
    display: inline-block;
    padding: 10px 18px !important;
    /* top/bottom = 10px, left/right = 18px */
    border-radius: 8px;
    /* optional, gives softer corners */
}

/* Hover and active colour */
.nav.nav-tabs .nav-link:hover {
    color: #347322 !important;
}

/* Green underline animation */
.nav.nav-tabs .nav-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background-color: #347322;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

/* Active and hover underline expansion */
.nav.nav-tabs .nav-link.active::after,
.nav.nav-tabs .nav-link:hover::after {
    width: 100%;
}

/* Active tab text stays green */
.nav.nav-tabs .nav-link.active {
    color: #347322 !important;
    background: transparent;
    border: none;
}

/* Optional: subtle hover on tab container itself */
.nav.nav-tabs:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

a: {
    color: #7eba0a;
}

a:hover {
    color: #347322;
}

/* Glass style for ALL .btn-primary buttons */
.btn-primary {
    position: relative;
    display: inline-block !important;
    color: #347322 !important;
    text-decoration: none !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    padding: 12px 24px !important;
    border-radius: 10px !important;

    /* glass background */
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    overflow: hidden;
    text-align: center;
    transition: all 0.3s ease;

    /* glow + shadow */
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.20),
        inset 0 -2px 6px rgba(0, 0, 0, 0.30),
        0 4px 8px rgba(0, 0, 0, 0.25) !important;
}

/* Hover effect */
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.25),
        inset 0 -2px 6px rgba(0, 0, 0, 0.35),
        0 6px 12px rgba(0, 0, 0, 0.30) !important;
    color: #347322 !important;
}


/* Sign-in Card */
.mb-5 .card {
    background-color: #f5f5f5;
    /* light gray background for modern look */
    border: 1px solid #d0d0d0;
    /* subtle border */
    border-radius: 0.5rem;
    /* rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    /* subtle shadow */
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

/* Card hover effect */
.mb-5 .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* 2️⃣ Only card-header.d-flex.justify-content-between → stay white */
.card-header.d-flex.justify-content-between,
.card-header.d-flex.justify-content-between * {
    color: #ffffff !important;
}




/* Target ONLY this card header */
.card.animate-bounce>.card-header.d-flex.justify-content-between {
    background-color: #464646;
    /* dark gray */
    color: #ffffff;
    font-weight: 700;
    font-size: 1.25rem;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: none;
    /* remove generic border */
    box-shadow: none;
    /* remove generic shadow */
    backdrop-filter: none;
    /* remove any blur from glass effect */
}

.card-header.d-flex.justify-content-between a {
    color: #ffffff !important;
}



/* Card Header */
.card-header {
    background: rgba(255, 255, 255, 0.3);
    /* light frosted base */
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* subtle border for glass effect */
    border-radius: 12px 12px 0 0;
    /* round top corners */
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

/* Optional hover effect if you want the card header to respond */
.card-header:hover {
    background: rgba(255, 255, 255, 0.35);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* Make nav-links blend nicely with the light glass effect */
.card-header .nav-link {
    color: #464646;
    /* dark text for contrast */
    font-weight: 600;
    transition: color 0.3s;
}

.card-header .nav-link.active {
    color: #7eba0a;
    /* iData green for active tab */
    border-bottom: 2px solid #7eba0a;
}

.card-header .nav-link:hover {
    color: #7eba0a;
}


/* Card Body */
.mb-5 .card-body {
    padding: 1.5rem;
    background-color: #ffffff;
    /* white background for form fields */
}

.border-top-0 {
    font-family: 'Poppins', sans-serif;

    font-size: 1.4rem;

    color: #464646;

    letter-spacing: 0.5px;

}

/* Reduce padding for cells with no top border on small screens */
@media (max-width: 768px) {

    .table td.border-top-0,
    .table th.border-top-0 {
        padding-top: 4px;
        /* smaller top padding */
        padding-bottom: 4px;
        /* optional: reduce bottom padding too */
        font-size: 1.2rem;
        /* optional: smaller font */
    }
}



/* Buttons */
/* 🌿 Liquid glass style for all buttons */
/* 🌿 Liquid glass style for all buttons */
.input-group-append .btn,
.mb-5 .btn-outline-primary,
.card-body form .btn {
    position: relative;
    display: inline-block !important;
    color: #347322 !important;
    /* green text */
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    padding: 12px 28px !important;
    /* consistent spacing */
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
    text-align: center;
    text-decoration: none !important;
    transition: all 0.3s ease;

    /* Inner glow + outer drop shadow */
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -2px 6px rgba(0, 0, 0, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.25);
}

/* Enhanced hover effect */
.input-group-append .btn:hover,
.mb-5 .btn-outline-primary:hover,
.card-body form .btn:hover {
    transform: translateY(-4px) scale(1.03);
    /* slightly higher lift + subtle zoom */
    box-shadow:
        inset 0 3px 6px rgba(255, 255, 255, 0.3),
        inset 0 -3px 8px rgba(0, 0, 0, 0.4),
        0 8px 16px rgba(0, 0, 0, 0.35);
    /* stronger shadow on hover */
    color: #347322 !important;
    /* hover green color */
    background-color: rgba(255, 255, 255, 0.2);
    /* slightly brighter on hover */
    border-color: rgba(255, 255, 255, 0.3);
}

/* Icon inside .input-group-append button */
.input-group-append .btn i {
    font-size: 1rem;
    transition: transform 0.2s ease;
}

.input-group-append .btn:hover i {
    transform: scale(1.15);
    /* slightly bigger icon scale */
}


/* Card Footer */
.mb-5 .card-footer {
    background-color: #f5f5f5;
    border-top: 1px solid #d0d0d0;
    text-align: center;
    padding: 0.75rem 1rem;
}

.mb-5 .card-footer a {
    text-decoration: none;
}

.mb-5 .card-footer a span {
    color: #888888;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.mb-5 .card-footer a span:hover {
    color: #1BB87C;
}

/* ESS Section Heading like iDataPay H1 */
.mb-5 h2 {
    font-family: 'Roboto', sans-serif;
    /* Same as iDataPay */
    font-weight: 700;
    /* Bold heading */
    font-size: 2.5rem;
    /* Similar size to main H1 */
    line-height: 1.2;
    color: #464646;
    /* Your requested dark grey */
    margin-bottom: 1rem;
}

/* Paragraph styling */
.mb-5 p {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.6;
    color: #464646;
    /* Same dark grey for consistency */
}

.mb-5 p:hover {
    color: #464646;
    transition: color 0.3s ease;
}


/* Links inside paragraph */
.mb-5 p a {
    color: #7eba0a;
    /* iDataPay accent green-blue */
    text-decoration: none;
    transition: color 0.2s;
}

.mb-5 p a:hover {
    color: #0D1B2A;
    /* Darker on hover for contrast */
    text-decoration: underline;
}

.mb-3.text-center img {
    max-width: 100%;
    /* Ensures the image doesn't exceed its container */
    height: auto;
    /* Maintains aspect ratio */
    display: block;
    /* Removes extra inline spacing */
    margin: 0 auto;
    /* Centers the image */
}

del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    /* white text */
    background-color: #347322;
    /* iData green */
    border-radius: 50rem;
    /* pill shape */
    letter-spacing: 0.3px;

    /* Remove default line-through and decoration */
    text-decoration: none;

    /* Smooth animation for hover or future effects */
    transition: all 0.3s ease;
}

/* Base style for the badge */
.badge.badge-warning {
    background-color: #347322;
    /* your green */
    color: #ffffff;
    /* white text */
    font-size: 18px;
    border-radius: 20px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    padding: 0.25em 0.5em;
    /* optional, adjust for spacing */
    display: inline-block;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* smooth hover effect */
    cursor: default;
}

/* Hover effect: slight movement */
.badge.badge-warning:hover {
    transform: translateY(-2px);
    /* slight lift */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    /* subtle shadow */
}


/* Hover effect consistent with list/table rows */
.badge:hover {
    transform: translateY(-2px);
    background-color: #347322 !important;
}

/* Make card match iData style */
.card {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 🌿 Enhanced card shadow to lift it off the background */
.card {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2),
        /* main shadow for lift */
        0 2px 6px rgba(0, 0, 0, 0.1);
    /* subtle secondary shadow for depth */
    border: 1px solid rgba(0, 0, 0, 0.05);
    /* optional light border for definition */
    border-radius: 12px;
    /* smooth corners to match buttons */
    transition: box-shadow 0.3s ease;
}

/* Optional hover effect for extra lift */
.card:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25),
        0 4px 10px rgba(0, 0, 0, 0.15);
}


/* Liquid glass style for modal content */
.modal-content.card {
    background: rgba(255, 255, 255, 0.2);
    /* semi-transparent */
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    transition: transform 0.4s ease, opacity 0.4s ease;
    opacity: 0;
    transform: scale(0.8);
}

/* When modal is shown */
.modal.show .modal-content.card {
    opacity: 1;
    transform: scale(1);
}

/* Optional: Smooth transition for the backdrop */
.modal-backdrop.show {
    opacity: 0.5;
    /* semi-transparent backdrop */
    transition: opacity 0.3s ease;
}

/* Dark stylish header */
.card-header {
    font-size: 1.2rem;
    font-weight: 600;
    padding: 0.75rem 1rem;
}

div.card.mb3 h5.card-header {
    color: #464646 !important;
}

.btn.btn-outline-primary {
    color: #347322 !important;
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.25),
        /* deeper drop shadow */
        0 0 12px rgba(255, 255, 255, 0.7),
        /* outer glow */
        inset 0 3px 6px rgba(255, 255, 255, 0.5),
        inset 0 -3px 8px rgba(0, 0, 0, 0.25);

}

/* Fully override btn-sm btn-primary */
button.btn.btn-sm.btn-primary[type="cancel"] {
    background-color: #347322 !important;
    color: #ffffff !important;
    border: 2px solid #347322 !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;

    /* Remove all animations/transitions */
    transition: none !important;
    animation: none !important;
}

/* Hover/focus effect for primary cancel button */
button.btn.btn-sm.btn-primary[type="cancel"]:hover,
button.btn.btn-sm.btn-primary[type="cancel"]:focus {
    background-color: #2a5a1a !important;
    border-color: #2a5a1a !important;
    color: #ffffff !important;
    transform: none !important;
    /* remove hover translate */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Fully override btn-sm btn-outline-primary */
button.btn.btn-sm.btn-outline-primary {
    background-color: #41252500 !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px;

    /* Remove all animations/transitions */
    transition: none !important;
    animation: none !important;
}

.btn.btn-sm.btn-outline-primary:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow:
        inset 0 3px 6px rgba(255, 255, 255, 0.3),
        inset 0 -3px 8px rgba(0, 0, 0, 0.4),
        0 5px 10px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
    color: #347322 !important;
}

/* Remove green/white underline animation on outline buttons */
button.btn.btn-sm.btn-outline-primary::after,
button.btn.btn-sm.btn-outline-secondary::after {
    content: none !important;
    /* removes the pseudo-element */
    width: 0 !important;
    height: 0 !important;
    background: none !important;
    transition: none !important;
}

/* Also ensure hover doesn’t trigger it */
button.btn.btn-sm.btn-outline-primary:hover::after,
button.btn.btn-sm.btn-outline-secondary:hover::after {
    width: 0 !important;
    background: none !important;
    transition: none !important;
}


/* Fully override btn-sm btn-secondary cancel button */
button.btn.btn-sm.btn-secondary[type="cancel"] {
    background-color: #347322 !important;
    /* secondary gray color */

    /* text/icon color */
    border: 2px solid #6c757d !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;

    /* Remove all animations/transitions */
    transition: none !important;
    animation: none !important;
}

/* Hover/focus effect for secondary cancel button */
button.btn.btn-sm.btn-secondary[type="cancel"]:hover,
button.btn.btn-sm.btn-secondary[type="cancel"]:focus {
    background-color: #347322 !important;
    /* darker gray on hover */
    border-color: #ffffff !important;
    color: #ffffff !important;
    transform: none !important;
    /* remove hover translate */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Icon inside buttons */
button.btn i {
    font-size: 16px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

/* Fully override btn-sm btn-outline-secondary */
button.btn.btn-sm.btn-outline-secondary {
    background-color: transparent !important;
    color: #347322 !important;
    /* secondary gray text */
    border: 2px solid #347322 !important;
    /* same thickness as other buttons */
    border-radius: 8px !important;
    /* same as others */
    padding: 6px 12px !important;
    /* same sizing */
    font-size: 14px !important;
    /* consistent text/icon size */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08) !important;

    /* Remove all animations/transitions */
    transition: none !important;
    animation: none !important;
}

/* Hover/focus effect for outline-secondary */
button.btn.btn-sm.btn-outline-secondary:hover,
button.btn.btn-sm.btn-outline-secondary:focus {
    background-color: #ffffff !important;
    /* fill on hover */
    color: #347322 !important;
    /* text/icon turns white */
    border-color: #ffffff !important;
    transform: none !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Hover: strong POP */
.btn.btn-outline-primary:hover {
    color: #347322 !important;
    background: rgba(255, 255, 255, 0.45);
    /* brighter glass */
    border-color: rgba(255, 255, 255, 0.7);

    /* 💥 Stronger lift + deeper contrast */
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.25),
        /* deeper drop shadow */
        0 0 12px rgba(255, 255, 255, 0.7),
        /* outer glow */
        inset 0 3px 6px rgba(255, 255, 255, 0.5),
        inset 0 -3px 8px rgba(0, 0, 0, 0.25);

    transform: translateY(-4px) scale(1.03);
    /* bigger lift */
    transition: all 0.3s ease;
}

/* Stronger gloss swipe */
.btn.btn-outline-primary:hover::after {
    opacity: 1;
    transform: translateX(120%) rotate(25deg);
    transition: opacity 0.4s ease, transform 0.8s ease;
}




.btn-outline-primary {
    display: inline-block;
    position: relative;
    color: #347322 !important;
    /* original green */
    text-decoration: none;
    padding: 14px 28px !important;
    font-weight: 500;
    transition: color 0.3s ease, transform 0.3s ease, background 0.3s ease,
        border-color 0.3s ease, box-shadow 0.3s ease;
    animation: textPulse 2s ease-in-out infinite;

    /* Liquid glass base */
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    border: 1px solid #34732200;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;

    /* Darker lift shadow */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35),
        0 0 2px rgba(255, 255, 255, 0.2);
}



/* Target the close button inside modal-content */
.modal-content .close {
    background: rgba(255, 255, 255, 0.2);
    /* frosted glass feel */
    border: none;
    border-radius: 50%;
    /* circular */
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: #464646;
    /* default color */
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: inset 0 1px 4px rgba(255, 255, 255, 0.3),
        /* light glow inside */
        inset 0 -2px 10px rgba(0, 0, 0, 0.2),
        /* depth shadow inside */
        0 8px 20px rgba(0, 0, 0, 0.25);
    position: absolute;
    /* ensures it stays in corner */
    top: 8px;
    right: 12px;
}

/* Hover effect */
.modal-content .close:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(1.1);
    color: #347322;
    /* your green on hover */
}

/* Center the × nicely */
.modal-content .close span {
    display: inline-block;
    line-height: 1;
}

/* Better spacing in the body */
.card-body {
    padding: 1.5rem;
}

/* Base glassy link button ONLY inside card-body */
.card-body a {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
    color: #347322 !important;
    /* your green */
    text-decoration: none;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -2px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    text-align: center;
    font-weight: 500;
}

/* glossy top highlight */
.card-body a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 10px 10px 0 0;
    opacity: 0.5;
    pointer-events: none;
}

/* sweeping gloss */
.card-body a::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0.3) 0%,
            rgba(255, 255, 255, 0) 60%);
    transform: rotate(25deg);
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.8s ease;
    pointer-events: none;
}

/* hover glow (text stays green) */
.card-body a:hover {
    color: #347322 !important;
    /* keep green on hover */
    background: rgba(255, 255, 255, 0.35);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow:
        0 0 10px rgba(255, 255, 255, 0.6),
        inset 0 2px 4px rgba(255, 255, 255, 0.4),
        inset 0 -2px 6px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

/* sweep animation */
.card-body a:hover::after {
    opacity: 1;
    transform: translateX(100%) rotate(25deg);
}


/* 🌿 Liquid glass style for .card-body form button */
.card-body form .btn {
    position: relative;
    display: inline-block !important;
    color: #347322 !important;
    /* green text */
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    padding: 12px 28px !important;
    /* generous padding */
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
    text-align: center;
    text-decoration: none !important;
    transition: all 0.3s ease;

    /* Inner glow + outer drop shadow */
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -2px 6px rgba(0, 0, 0, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.25);
}

/* Hover effect for lift and color change */
.card-body form .btn:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.25),
        inset 0 -2px 6px rgba(0, 0, 0, 0.35),
        0 6px 12px rgba(0, 0, 0, 0.3);
    color: #347322 !important;
    /* hover green color */
}


.card-body p {
    color: #ffffff;
    /* white text */
}


/* Form fields match modern design */
.form-control {
    border-radius: 6px;
    padding: 0.55rem 0.75rem;
    font-size: 1rem;
}

/* Full-width, stronger button design */
.card-body .btn {
    width: 100%;
    border-radius: 6px;
    font-weight: 600;
}

/* Footer clean & centered */
.card-footer {
    text-align: center;
    background-color: #f8f9fa;
    padding: 0.75rem;
}

/* Footer link subtle */
.card-footer a span {
    color: #347322 !important;
    font-size: 0.88rem;
}

.btn-outline-primary:hover {
    color: #fff;
    background-color: #347322;
    border-color: #347322;
}

.col-md-6>.row {
    display: flex;
    align-items: center;
    /* vertically centers content */
}

.col-md-6>.row .col-md,
.col-md-6>.row .col-md.offset-md-1 {
    margin: 0;
    /* remove any extra margin if needed */
}


.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #464646;
    border-color: transparent
}

.page-item.disabled .page-link {
    color: #ecf0f1;
    pointer-events: none;
    background-color: #464646;
    border-color: transparent
}

.page-link {
    position: relative;
    display: block;
    color: #fff;
    text-decoration: none;
    background-color: #347322;
    border: 0 solid transparent;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

.page-link:hover {
    background-color: #464646 !important;
    color: #fff !important;
}


.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #464646;
    border-color: transparent
}


.col-md-5 {
    flex: 1 1 auto !important;
    /* allow it to grow/shrink */
    width: auto !important;
    /* cancel the 41.666667% width */
}



body {
    z margin: 0;
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: #464646;
    text-align: var(--bs-body-text-align);
    background-color: var(--bs-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent
}

/* Replace #347322 with your actual green */
.fas.fa-info-circle {
    color: inherit;
    /* keep default color */
    transition: color 0.3s ease, transform 0.2s ease;
}

.fas.fa-info-circle:hover {
    color: #347322;
    /* your green */
    transform: scale(1.1);
    /* optional slight hover motion */
    cursor: pointer;
}


/* Style specific spans used as inline labels */
span.mr-3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    /* thicker text */
    font-size: 1rem;
    /* adjust if needed */
    color: #464646;
    /* dark grey */
}


.list-group-flush>.list-group-item:last-child {
    border-bottom-width: 1px !important;
}

.list-group-item.d-flex.justify-content-between:hover a.load_modal_content {
    color: #ffffff !important;
    background: #090707;
    border-color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

.list-group.list-group-flush>.list-group-item {
    border-width: 1px !important;
    /* border-color: rgba(0, 0, 0, 0.125); */
    /* same as Bootstrap default */
    border-bottom-width: 1px !important;
}

.list-group-item.d-flex.justify-content-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* centers items vertically */
    /* flex-wrap: wrap; */
    /* handles multi-line text */
    /* min-height: 3rem; */
    /* ensures consistent vertical size */
    /* padding: 0.75rem 1rem; */
    /* balanced vertical spacing */
    box-sizing: border-box;
    /* keeps padding within width */
    white-space: normal;
    /* allows text to wrap */
}

.list-group-item.d-flex.justify-content-between.mb-5 p:hover {
    color: #000
}

.list-group-item.d-flex.justify-content-between:hover {
    color: #000 !important;
    /* black text on hover */
}


.list-group-item:hover p {
    color: #464646;
    transition: color 0.3s ease;
    /* smooth transition */
}


/* ====================== */
/* List Group / Label Spacing Fix */
/* ====================== */

/* Make spans inside list items flex with proper spacing */
.list-group-item>span {
    display: flex;
    align-items: flex-end;
    /* vertically center label and text */
    gap: 12px;
    /* space between <strong> and text */
}

.nav .nav-link {
    position: relative;
    display: inline-block;
    color: #464646 !important;
    text-decoration: none;
    padding: 14px 28px !important;
    /* increased padding with !important */
    font-weight: 500;
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    transition: all 0.3s ease;

    /* Darker lift shadow */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35),
        0 0 2px rgba(255, 255, 255, 0.2);
}

/* Green underline on hover */
.nav .nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 4px;
    /* slightly below text */
    width: 0;
    height: 2px;
    background-color: #347322;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.nav .nav-link:hover::after {
    width: 100%;
    /* full underline on hover */
}

/* Hover style */
.nav .nav-link:hover {
    color: #347322 !important;
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}


/* Inner rows inside col-md-6 (like companies/payroll links) */
.col-md-6>.row {
    display: flex;
    align-items: center;
    gap: 8px;
    /* space between strong and link/text */
}

/* Import Poppins font if not already included */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

/* Link styling */
.col-md-3 a {
    font-family: 'Poppins', sans-serif;
    color: #464646;
    text-decoration: none;
    font-weight: 500;
    position: relative;
    display: inline-block;
    transition: color 0.3s ease;
    padding-right: 22px;
    /* space for arrow */
}

/* underline (idata green line) */
.col-md-3 a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 2px;
    background-color: #7eba0a;
    transition: width 0.3s ease;
}

/* Ensure the <a> inside .col-md-3 is positioned for ::after */
.col-md-3 a {
    position: relative;
    color: #347322;
    text-decoration: none;
    display: inline-block;
    /* ensure ::after positions relative to text width */
}

/* Underline */
.col-md-3 a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    /* directly at the bottom of the text */
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: #347322;
    transition: width 0.3s ease;
}

/* Hover effects */
.col-md-3 a:hover::after,
.list-group-item:hover .col-md-3 a::after {
    width: 100%;
}

.col-md-3 a:hover {
    color: #347322;
}


/* Reset offset columns for alignment */
.col-md-6>.row .col-md.offset-md-1 {
    margin-left: 0;
    /* remove Bootstrap offset spacing */
}

.d-flex.justify-content-between .mr-5 {
    margin-right: 3rem !important;
    /* adjust value as needed */
}


/* Optional: ensure text aligns properly inside col-md-6 */
span.col-md-6 {
    display: block;
    margin-left: auto;
    text-align: right;
}

.list-group-item {
    overflow: visible !important;
    /* allow full content to show */
    flex-wrap: wrap;
    /* make sure flex items wrap instead of overflowing */
}

.list-group-item span:last-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.w-50.d-flex.justify-content-between.pl-5 {
    flex-direction: row !important;

}


@media (max-width: 768px) {
    .d-flex.justify-content-between {
        flex-direction: column;
        /* stack label + value */
        align-items: stretch;
        border: none;
        /* remove border on mobile */
        border-radius: 0;
        padding: 8px 0;
        margin: 0;
        width: 100%;
        /* span full screen */
        background: transparent;
        /* clean look */
    }


    .w-50.d-flex.justify-content-between.pl-5 {
        flex-direction: column !important;

    }

    /* Each span is a row with label + value */
    .d-flex.justify-content-between>span {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 4px 0;
        align-items: center;
        /* vertical alignment */
    }

    .d-flex.justify-content-between strong {
        text-align: left;
        margin: 0;
        line-height: 1.2;
        /* ensure proper vertical alignment */
    }

    .d-flex.justify-content-between span:not(:first-child),
    .d-flex.justify-content-between span.col-md-6 {
        text-align: right;
        line-height: 1.2;
        /* match strong */
    }

    /* Optional: inner rows for companies/payrolls */
    .d-flex.justify-content-between .col-md-6>.row {
        justify-content: flex-end;
        gap: 6px;
        align-items: center;
        /* vertical alignment inside rows */
    }
}

.fa-cog {
    color: #464646 !important;
}

.fa-info-circle:before {
    color: #464646 !important;
}

.d-flex.justify-content-between {
    background: rgb(255 255 255);
    /* semi-transparent for liquid glass */
    backdrop-filter: blur(10px) saturate(180%);
    /* subtle blur effect */
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    /* border: 1px solid rgba(70, 70, 70, 0.25); */
    /* soft, semi-transparent border */
    border-radius: 12px;
    padding: 12px;
    /* margin-top: 3px; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    /* subtle depth */
    /* cursor: pointer; */
    /* indicates it's interactive */
}


body .modal {
    position: static !important;
    /* cancels Bootstrap's fixed */
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    /* cancels Bootstrap’s centering transform */
}

.load_modal_content {
    display: inline-block;
    padding: 8px 16px;
    font-size: 0.95rem;
    font-weight: 500;
    color: #ffffff;
    /* Dark text */
    background-color: #347322;
    /* Clean white background */
    border: 1px solid #464646;
    /* Brand dark border */
    border-radius: 12px;
    /* Modern rounded corners */
    text-decoration: none;
    transition: all 0.25s ease;
}

.load_modal_content:hover {
    background-color: #464646;
    /* Dark brand hover */
    color: #7eba0a;
    /* White text on hover */
    text-decoration: none;
}

.load_modal_content:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(70, 70, 70, 0.25);
    /* subtle focus glow */
}


/* 🌿 Liquid glass style for button inside .mb-3.p-3.border.rounded.border-warning */
.mb-3.p-3.border.rounded.border-warning a {
    position: relative;
    display: inline-block !important;
    color: #347322 !important;
    /* green text */
    text-decoration: none !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    padding: 12px 24px !important;
    /* spacious padding */
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
    text-align: center;
    transition: all 0.3s ease;

    /* Inner glow + outer drop shadow */
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -2px 6px rgba(0, 0, 0, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.25);
}

/* Hover effect for lift and color change */
.mb-3.p-3.border.rounded.border-warning a:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.25),
        inset 0 -2px 6px rgba(0, 0, 0, 0.35),
        0 6px 12px rgba(0, 0, 0, 0.3);
    color: #347322 !important;
    /* hover green color */
}

/* Apply to all form labels */
label.form-label {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    /* thicker than normal */
    font-size: 1.2rem;
    /* adjust if you want larger */
    color: #464646;
    /* dark grey for better readability */
}

/* Style the col-md-6 container like your cards */

.row.mb-3 .col-md-6 {
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-radius: 12px;
    border: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    background-color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    /* semi-bold */
    font-size: 17px;
}

.col-md-6>a {
    position: relative;
    display: inline-block !important;
    color: #347322 !important;
    text-decoration: none !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    padding: 12px 24px !important;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
    text-align: center;
    transition: all 0.3s ease;

    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -2px 6px rgba(0, 0, 0, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.25);
}

.col-md-6>a:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.25),
        inset 0 -2px 6px rgba(0, 0, 0, 0.35),
        0 6px 12px rgba(0, 0, 0, 0.3);
    color: #347322 !important;
}


/* Style the inner Approvers box */
.col-md-6.text-right>div {
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-radius: 12px;
    border: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: 100%;
    overflow: visible;
    transition: all 0.3s ease;

    padding: 1.5rem;
    background-color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 17px;
}


/* --- GLASS BUTTONS (your .mb-5 a styling applied here) --- */

.col-md-6.text-right>div a {
    position: relative;
    display: inline-block !important;
    color: #347322 !important;
    /* green text */
    text-decoration: none !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    padding: 12px 24px !important;
    /* generous spacing */
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
    text-align: center;
    transition: all 0.3s ease;

    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -2px 6px rgba(0, 0, 0, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.25);
}

/* Hover */
.col-md-6.text-right>div a:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.25),
        inset 0 -2px 6px rgba(0, 0, 0, 0.35),
        0 6px 12px rgba(0, 0, 0, 0.3);
    color: #347322 !important;
}


.mb-3.text-muted {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: #464646 !important;
}



.mb-3 {
    padding-left: 20px;
    /* adjust as needed */
    padding-right: 20px;
    /* adjust as needed */
    /* optional: add top/bottom padding too */
    padding-top: 10px;
    padding-bottom: 10px;
}

@media (max-width: 768px) {
    .mb-3 {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Import Poppins font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

/* Search bar container styling */
.mb-5.row.justify-content-md-center {
    font-family: 'Poppins', sans-serif;
}

@media (min-width: 768px) {
    .mb-5.row.justify-content-md-center {
        justify-content: flex-end !important;
    }
}

.input-group-text input[type="checkbox"] {
    accent-color: #347322;
    /* your green */
}

#createConfirm {
    cursor: pointer;
    /* hand cursor on hover */
}


/* 🌿 Input group text matching liquid glass buttons (bigger size) */
.input-group-text {
    display: flex;
    /* modern flex layout */
    align-items: center;
    /* vertical center */
    justify-content: center;
    /* horizontal center */

    /* --- Size / spacing --- */
    padding: 16px 28px !important;
    /* ↑ vertical | horizontal spacing, tweak these to adjust height/width */
    font-size: 1.1rem;
    /* ↑ text size, tweak to make text bigger or smaller */
    font-weight: 600;
    line-height: 1.5;

    /* --- Colors & appearance --- */
    color: #347322 !important;
    /* text color, matches buttons */
    text-align: center;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.15);
    /* liquid glass effect */
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    /* corner rounding, tweak to make more/less rounded */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    /* --- Shadows --- */
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -2px 6px rgba(0, 0, 0, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.25);

    transition: all 0.3s ease;
}

/* === Quick tweak guide ===
   - padding: controls overall button/input size (vertical | horizontal)
   - font-size: controls text size inside
   - border-radius: controls roundness of corners
   - box-shadow: tweak blur/spread for depth
*/

.input-group-text[for="createConfirm"] {
    cursor: pointer;
    /* makes the hand appear on hover */
}


/* Input styling */
.input-group .form-control {
    /* border-right: none; */
    border-radius: 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    padding: 0.75rem 1rem;
    color: #464646;
    background-color: #fff;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    margin-right: 5px;
}

.input-group .form-control:focus {
    outline: none;
    border-color: #958f8f85;
    box-shadow: 0 0 8px rgba(70, 70, 70, 0.3);
}



@media (max-width: 768px) {
    table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 0;
        border: none;
        border-bottom: 1px solid #f0f0f0;
        font-size: 0.95rem;
        color: #464646;
        line-height: 1.4;
        flex-wrap: nowrap;
        /* 🟢 prevent wrapping that caused vertical stacking */
        min-width: 0;
    }

    table td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        white-space: nowrap;
        /* 🟢 keep label in one line */
        margin-right: 0.75rem;
        font-weight: 600;
        color: #464646;
        font-size: 0.9rem;
    }

    table td a,
    table td span,
    table td div {
        flex: 1 1 auto;
        min-width: 0;
        text-align: right;
        white-space: nowrap;
        /* 🟢 keep text horizontal */
        overflow: hidden;
        text-overflow: ellipsis;
        /* neatly truncate if needed */
        word-break: normal;
        color: inherit;
        text-decoration: none;
    }

    /* Optional: stack label above value on very small screens */
    @media (max-width: 480px) {
        table td {
            flex-direction: column;
            align-items: flex-start;
            text-align: left;
            flex-wrap: wrap;
            /* allow full-width stack */
        }

        table td::before {
            white-space: normal;
            margin-right: 0;
            margin-bottom: 0.25rem;
            color: #777;
            font-size: 0.88rem;
        }

        table td a,
        table td span,
        table td div {
            white-space: normal;
            overflow: visible;
            text-align: left;
        }
    }
}


/* Footer link styling */
.footer .text-center a {
    font-family: 'Poppins', sans-serif;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    /* slightly bolder for larger size */
    font-size: 1.2rem;
    /* increase font size */
    position: relative;
    transition: color 0.3s ease;
}

/* Hover color change */
.footer .text-center a:hover {
    color: #347322;
}

/* Animated green underline (center-out effect) */
.footer .text-center a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -4px;
    /* distance below text */
    width: 0;

    /* Remove default body and html margins/padding */
    html,
    body {
        margin: 0;
        padding: 0;
        width: 100%;
        overflow-x: hidden;
        /* prevent horizontal scrollbar */
    }

    .modal-backdrop {
        position: static !important;
        top: auto !important;
        left: auto !important;
        z-index: auto !important;
        width: auto !important;
        height: auto !important;
        background-color: transparent !important;
        opacity: 0 !important;
        display: none !important;
    }


    /* Make all Bootstrap containers full width if needed */
    .container,
    .container-fluid {
        padding-left: 3 !important;
        padding-right: 3 !important;
        max-width: 100% !important;
    }

    .container>.mb-3>nav:not([aria-label]) .nav-link {
        color: #464646 !important;
    }

    .container>.mb-3>nav:not([aria-label]) .nav-link:hover {
        color: #347322 !important;
        /* your green hover */
    }


    /* Optional: rows should not have negative margins (Bootstrap does this by default) */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Apply Poppins font to the whole row */
    .row.my-3 {
        font-family: 'Poppins', sans-serif;
        display: flex;
        justify-content: space-between;
        /* spreads the columns evenly */
        align-items: center;
        /* vertically center content */
        text-align: center;
        /* center text inside each column */
    }

    /* Optional: make each column take equal width */
    .row.my-3 .col-md {
        flex: 1;
        /* all columns take equal space */
    }

    /* Optional: if you want left, center, right alignment specifically */
    .row.my-3 .col-md:first-child {
        text-align: left;
    }

    .row.my-3 .col-md:nth-child(2) {
        text-align: center;
    }

    .row.my-3 .col-md:last-child {
        text-align: right;
    }

    /* Style strong labels if needed */
    .row.my-3 .col-md strong {
        display: block;
        margin-bottom: 4px;
    }


    /* Base Navbar */

    /* Force navbar container to span full width */
    .navbar.idata,
    .navbar.idata .container,
    .navbar.idata .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto;
    }

    /* Make the navbar itself stick to edges */
    .navbar.idata {
        left: 0;
        right: 0;
        background-color: #464646;
        padding: 0.5rem 1rem;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        position: sticky;
        top: 0;
        z-index: 1030;
    }

    /* Logo */
    .navbar-brand img {
        height: 60px;
        margin-right: 0.5rem;
    }

    .navbar-brand {
        font-weight: 700;
        color: #ffffff;
        font-size: 1.2rem;
    }

    .navbar-brand span.text-danger {
        font-size: 0.8rem;
        margin-left: 0.3rem;
    }

    /* Import Roboto font */
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

    /* Apply Roboto to nav elements */
    .navbar.idata,
    .navbar-brand,
    .nav-link,
    .dropdown-item {
        font-family: 'Roboto', sans-serif;
        border-radius: 12px;
    }

    /* Nav Links */
    .nav-link {
        color: #fff !important;
        font-weight: 500;
        margin-right: 1rem;
        transition: color 0.2s;
        position: relative;
        display: inline-block;
        padding: 8px 0 !important;
    }

    .col-md-3 .nav-link {
        color: #464646 !important;
        font-weight: 500;
        margin-right: 1rem;
        transition: color 0.2s;
        position: relative;
        display: inline-block;
        padding: 8px 0 !important;
    }


    /* Only for this standalone nav, not header nav */
    nav.nav .nav-link {
        color: #464646 !important;
        /* must use !important to override global .nav-link */
        text-decoration: none;
        margin-right: 10px;
    }

    /* Optional hover */
    nav.nav .nav-link:hover {
        color: #347322 !important;
        /* green underline hover if you want */
    }


    /* Green Underline Hover Effect */
    .nav-link::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 3px;
        background-color: #347322;
        transition: all 0.3s ease;
        transform: translateX(-50%);
    }

    /* Show underline on hover and active */
    .nav-link:hover::after,
    .nav-link.active::after {
        width: 100%;
    }

    .nav-link:hover {
        color: #347322;
    }

    .nav-link.text-danger {
        color: #FF4B5C;
    }

    .col-md-3 .nav-pills .nav-link.active,
    .col-md-3 .nav-pills .show>.nav-link {
        color: #464646 !important;
        background-color: transparent !important;
    }

    .col-md-3 .nav-pills .nav-link.active:hover,
    .col-md-3 .nav-pills .show>.nav-link:hover {
        color: #7eba0a !important;
        /* iData green */
    }



    /* Dropdown styling */
    .nav-item.dropdown .dropdown-menu {
        background-color: #464646;
        border: none;
        border-radius: 8px;
        min-width: 150px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
        animation: fadeIn 0.2s ease-in-out;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(-5px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Dropdown items */
    .dropdown-item {
        color: #ffffff !important;
        padding: 0.5rem 1rem;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    /* Hover / active state */
    .dropdown-item:hover,
    .dropdown-item:focus {
        background-color: #347322 !important;
        color: #ffffff !important;
    }

    /* Divider line */
    .dropdown-divider {
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }

    /* Mobile toggler */
    .navbar-toggler {
        border-color: #ffffff;
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    }

    /* Right-aligned nav */
    .navbar-nav.d-flex.justify-content-end {
        gap: 0.5rem;
    }

    /* Sticky small effect */
    .navbar.shrink {
        padding: 0.25rem 1rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transition: all 0.3s ease;
    }

    /* Internal Page Navigation Styling */
    .d-flex .nav {
        padding: 0.5rem 1rem;
        border-radius: 6px;
        gap: 1rem;
    }

    /* Internal nav links */
    .d-flex .nav .nav-link {
        color: #464646 !important;
        font-weight: 500;
        position: relative;
        padding: 8px 0;
        transition: color 0.3s ease;
        /* only animate text color */
    }

    .d-flex .nav .nav-link:hover {
        color: #347322 !important;
        /* text turns green on hover */
    }

    /* Underline effect */
    .d-flex .nav .nav-link::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 3px;
        background-color: #347322;
        /* green line */
        transition: all 0.3s ease;
        transform: translateX(-50%);
    }


    .d-flex .nav .nav-link:hover::after,
    .d-flex .nav .nav-link.active::after {
        width: 100%;
    }

    /* Internal Page Nav Tabs */
    .card-header .nav-tabs {
        border-bottom: 2px solid #347322;
        gap: 0.5rem;
        padding-bottom: 0.25rem;
    }

    .card-header .nav-tabs .nav-link {
        color: #333 !important;
        font-weight: 500;
        background: transparent;
        border: none;
        position: relative;
        padding: 8px 0;
        transition: all 0.3s ease;
    }

    .card-header .nav-tabs .nav-link:hover {
        color: #347322 !important;
    }

    .card-header .nav-tabs .nav-link::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 3px;
        background-color: #347322;
        transition: all 0.3s ease;
        transform: translateX(-50%);
    }

    .card-header .nav-tabs .nav-link.active::after,
    .card-header .nav-tabs .nav-link:hover::after {
        width: 100%;
    }

    .card-header .nav-tabs .nav-link.active {
        color: #347322 !important;
    }

    /* Breadcrumb base styles */
    .breadcrumb {
        font-family: 'Poppins', sans-serif;
        font-size: 1.1rem;
        font-weight: 600;
        background-color: transparent;
        margin-bottom: 1rem;
        opacity: 0;
        transform: translateX(-20px);
        /* start slightly left */
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .breadcrumb.show {
        opacity: 1;
        transform: translateX(0);
        /* slide into place */
    }

    .breadcrumb.hide {
        opacity: 0;
        transform: translateX(-20px);
        /* slide back out to the left */
    }


    .breadcrumb-item a {
        color: #464646;
        font-weight: 600;
        text-decoration: none;
    }

    .breadcrumb-item.active {
        color: #347322;
        font-weight: 900;
        font-size: x-large;
    }

    body {
        background: #ffffff;
        min-height: 100vh;
        position: relative;
        z-index: 1;
        overflow: hidden;
    }

    body::before {
        content: '';
        position: fixed;
        bottom: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        pointer-events: none;
        z-index: 0;
        /* Increased opacity to make the faster sweep more noticeable */
        background: linear-gradient(45deg,
                rgba(52, 115, 34, 0) 0%,
                rgba(52, 115, 34, 0.25) 50%,
                /* opacity from 0.15 → 0.25 */
                rgba(52, 115, 34, 0) 100%);
        /* Faster animation duration */
        animation: diagonalSweep 6s ease-in-out infinite;
    }

    @keyframes diagonalSweep {
        0% {
            transform: translate(-25%, 25%);
        }

        50% {
            transform: translate(25%, -25%);
        }

        100% {
            transform: translate(-25%, 25%);
        }
    }



    /* Liquid Glass / Neumorphic Cards */
    /* Bounce on load */
    /* Subtle bounce keyframes */
    @keyframes subtleBounceIn {
        0% {
            transform: scale(0.97);
            opacity: 0;
        }

        60% {
            transform: scale(1.02);
            opacity: 1;
        }

        80% {
            transform: scale(0.99);
        }

        100% {
            transform: scale(1);
        }
    }

    /* Card base styles */
    .card.mb-5,
    .card.mt-4 {
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(12px) saturate(180%);
        -webkit-backdrop-filter: blur(12px) saturate(180%);
        border-radius: 12px;
        border: 1px solid #464646;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        transition: all 0.3s ease;
    }



    /* Animation class, only applied on page load */
    .animate-bounce {
        animation: subtleBounceIn 0.6s ease forwards;
    }




    .card-header {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(12px) saturate(180%);
        -webkit-backdrop-filter: blur(12px) saturate(180%);
        border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    }

    /* List Group (matches table hover) */
    .card .list-group-item {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px) saturate(180%);
        -webkit-backdrop-filter: blur(10px) saturate(180%);
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.25);
        margin: 8px 0;
        transition: all 0.3s ease;
        cursor: pointer;
        color: #111;
    }

    span.col-md-6 {
        display: block;
        /* ensures alignment works properly */
        margin-left: auto;
        /* pushes it to the right */
        text-align: right;
        /* aligns text inside to the right */
    }

    /* Optional: make inner rows fit content nicely */
    span.col-md-6 .row {
        justify-content: flex-end;
        /* pushes inner content to the right too */
    }

    /* Hover effect on list item itself */
    .list-group-item:hover {
        transform: translateY(-2px);
        background-color: #464646 !important;
        /* correct dark bg */
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.12),
            -4px -4px 10px rgba(255, 255, 255, 0.85);
        color: #ffffff !important;
        /* optional: fallback text color */
    }

    /* Links inside list items: only change text color */
    .list-group-item a {
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        color: #7eba0a;
        text-decoration: none;
        transition: color 0.3s ease;
        background: transparent;
        /* ensure no bg */
    }

    .list-group-item a:hover {
        color: #347322;
        /* same green on hover */
    }


}

.list-group-item strong a {
    color: ##7eba0a !important;
    /* your green */
    text-decoration: none;
}

.list-group-item strong a:hover {
    color: #28a745 !important;
    /* keep green even when parent item hovers */
}


/* 🔹 Ensure link text is #464646 by default */
/* Base link styling */
a.load_modal_content,
a.load_modal_content:link,
a.load_modal_content:visited {
    color: #464646 !important;
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.1);
    /* faint white tint */
    backdrop-filter: blur(10px);
    /* the glass effect */
    -webkit-backdrop-filter: blur(10px);
    /* Safari support */
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* subtle border */
    border-radius: 12px;
    padding: 6px 12px;
    transition: all 0.3s ease;
    display: inline-block;
    /* for neat background fit */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* soft depth */
}

a.load_modal_content:hover {
    color: #ffffff;
    /* white on hover */
}

/* Hover effect */
a.load_modal_content:hover,
a.load_modal_content:focus {
    color: #ffffff !important;
    background: #464646;
    border-color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    transform: translateY(-2px);
    /* subtle lift */
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

a {
    color: #347322;
    text-decoration: none;
}


a:hover {
    color: #7eba0a;
}



/* 🌿 Liquid glass style for icon links (e.g., pencil edit) */
a.ml-3 {
    display: inline-flex !important;
    /* flex for proper SVG alignment */
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 12px 20px !important;
    /* space around icon */
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #347322 !important;
    /* green text/icon */
    text-decoration: none !important;
    overflow: hidden;
    transition: all 0.3s ease;

    /* Shadow for lift and depth */
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -2px 6px rgba(0, 0, 0, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.25);
}

/* Hover effect for icon link */
a.ml-3:hover {
    transform: translateY(-2px) scale(1.05);
    /* lift + slight zoom */
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.25),
        inset 0 -2px 6px rgba(0, 0, 0, 0.35),
        0 6px 12px rgba(0, 0, 0, 0.3);
    color: #347322 !important;
    /* hover green */
}

/* Optional: slightly enlarge the SVG on hover */
a.ml-3:hover svg {
    transform: scale(1.15);
    transition: transform 0.2s ease;
}

/* Ensure SVG aligns nicely */
a.ml-3 svg {
    width: 1em;
    height: 1em;
    transition: transform 0.2s ease;
}



/* Badges inside list items */
.badge-success {
    background-color: #347322 !important;
    font-size: 1.1rem;
    /* Make it bigger, adjust as needed */
    font-weight: 500;
    /* Optional: makes it a bit bolder */
    padding: 0.5rem 0.8rem;
    border-radius: 50rem;
    transition: all 0.3s ease;
    color: #ffff !important;
    ;
}


/* Base glass look */
.table.table-hover {
    background: transparent;
    border-collapse: separate;
    border-spacing: 0 8px;
}

/* Style only the headers of this specific table */
.table.table-bordered.table-hover th {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    /* slightly thicker */
    font-size: 1.4rem;
    /* adjust if needed */
    color: #464646;
    /* dark grey */
    text-align: left;
    /* optional, aligns nicely */
    padding: 0.75rem 1rem;
    /* spacing */
}


.table.table-hover tr {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    transition: all 0.3s ease;
}

/* Table cells */
.table.table-hover td {
    border: none;
    padding: 12px 16px;
    color: #464646;
}

td a {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
    color: #464646;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -2px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    text-align: center;
    font-weight: 500;
}

/* glossy top highlight inside the button */
td a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 10px 10px 0 0;
    opacity: 0.5;
    pointer-events: none;
}



/* sweeping gloss effect */
td a::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0.3) 0%,
            rgba(255, 255, 255, 0) 60%);
    transform: rotate(25deg);
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.8s ease;
    pointer-events: none;
}

/* hover effect: slightly more vivid glass look */
td a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.35);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow:
        0 0 10px rgba(255, 255, 255, 0.6),
        inset 0 2px 4px rgba(255, 255, 255, 0.4),
        inset 0 -2px 6px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}


/* animate sweeping gloss on hover */
td a:hover::after {
    opacity: 1;
    transform: translateX(100%) rotate(25deg);
}



/* Link styling – stays green always */
.table.table-hover a {
    color: #347322 !important;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.table.table-hover a {
    position: relative;
    color: #347322;
    text-decoration: none;
    /* remove default underline */
}

.table.table-hover a::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;
    /* thickness of the underline */
    background-color: #7eba0a;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.table.table-hover a:hover::after {
    width: 100%;
}


/* Hover effect for row (excluding links) */
.table.table-hover tr:hover {
    background: rgba(70, 70, 70, 0.65);
    color: #ffffff;
    /* makes normal text white */

    /* Prevent link color from turning white when row is hovered */
    .table.table-hover tr:hover a {
        color: #7eba0a !important;
    }



    /* Neumorphic Table Rows */
    .table {
        border-collapse: separate;
        border-spacing: 0 12px;
        border-radius: 0;
        /* remove rounded corners */
        overflow: hidden;
    }

    .table th,
    .table td {
        border: none;
        vertical-align: middle;
        padding: 12px 15px;
    }

    td.text-right {
        text-align: right !important;
        border: 1px solid rgba(70, 70, 70, 0.3);
        /* same grey, 30% opacity */
        border-radius: 12px;
        padding: 8px 12px;
    }



    /* Reset row hover so only cells highlight */
    .table tbody tr:hover {
        background: #fff;
        /* keep row background normal */
        transform: none;
        box-shadow: none;
        color: #464646;
    }

    /* Hover effect for the label cell */
    .table tbody tr td.d-flex.justify-content-between:hover {
        background-color: #464646;
        color: #fff;
    }

    /* Hover effect for the value cell */
    .table tbody tr td.text-right:hover {
        background-color: #464646;
        color: #fff;
    }

    /* When hovering the label, highlight its sibling .text-right */
    .table tbody tr td.d-flex.justify-content-between:hover+td.text-right {
        background-color: #464646;
        color: #fff;
    }

    /* Modern browsers: when hovering the value, highlight the preceding label */
    .table tbody tr:has(td.text-right:hover) td.d-flex.justify-content-between {
        background-color: #464646;
        color: #fff;
    }


    .table-hover>tbody>tr:hover>* {
        --bs-table-accent-bg: var(--bs-table-hover-bg);
        color: #fff;
    }

    .table tbody tr a {
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        color: #347322;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .table tbody tr:hover a {
        color: #7eba0a;
    }

    .table tbody tr:active {
        transform: translateY(2px);
        box-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.12),
            inset -3px -3px 8px rgba(255, 255, 255, 0.85);
    }

    /* Consistent Nav Tabs (same as internal nav links) */
    .nav.nav-tabs {
        background: rgba(255, 255, 255, 0.15);
        /* semi-transparent for liquid glass */
        backdrop-filter: blur(10px) saturate(180%);
        /* subtle blur */
        -webkit-backdrop-filter: blur(10px) saturate(180%);
        border: 1px solid rgba(70, 70, 70, 0.25);
        /* soft border */
        border-radius: 12px;
        padding: 12px;
        display: flex;
        gap: 8px;
        /* spacing between tabs */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        /* soft shadow for depth */
        transition: all 0.3s ease;
    }

    /* Tab items */
    .nav.nav-tabs .nav-item {
        margin: 0;
    }

    /* Tab links styled like internal nav links */
    .nav.nav-tabs .nav-link {
        color: #333 !important;
        font-weight: 500;
        background: transparent;
        border: none;
        position: relative;
        padding: 8px 0;
        transition: all 0.3s ease;
    }

    /* Hover and active colour */
    .nav.nav-tabs .nav-link:hover {
        color: #347322 !important;
    }

    /* Green underline animation */
    .nav.nav-tabs .nav-link::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 3px;
        background-color: #347322;
        transition: all 0.3s ease;
        transform: translateX(-50%);
    }

    /* Active and hover underline expansion */
    .nav.nav-tabs .nav-link.active::after,
    .nav.nav-tabs .nav-link:hover::after {
        width: 100%;
    }

    /* Active tab text stays green */
    .nav.nav-tabs .nav-link.active {
        color: #347322 !important;
        background: transparent;
        border: none;
    }

    /* Optional: subtle hover on tab container itself */
    .nav.nav-tabs:hover {
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    }

    a: {
        color: #7eba0a;
    }

    a:hover {
        color: #347322;
    }

    .btn-primary {
        color: #fff;
        background-color: #347322;
        border-color: #347322
    }

    .btn-primary:hover {
        color: #fff;
        background-color: #7eba0a;
        border-color: #7eba0a;
    }

    /* Sign-in Card */
    .mb-5 .card {
        background-color: #f5f5f5;
        /* light gray background for modern look */
        border: 1px solid #d0d0d0;
        /* subtle border */
        border-radius: 0.5rem;
        /* rounded corners */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        /* subtle shadow */
        overflow: hidden;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    /* Card hover effect */
    .mb-5 .card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    }

    /* Target ONLY this card header */
    .card.animate-bounce>.card-header.d-flex.justify-content-between {
        background-color: #464646;
        /* dark gray */
        color: #ffffff;
        font-weight: 700;
        font-size: 1.25rem;
        padding: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: none;
        /* remove generic border */
        box-shadow: none;
        /* remove generic shadow */
        backdrop-filter: none;
        /* remove any blur from glass effect */
    }


    /* Card Header */
    .card-header {
        background: rgba(255, 255, 255, 0.3);
        /* light frosted base */
        backdrop-filter: blur(12px) saturate(180%);
        -webkit-backdrop-filter: blur(12px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, 0.3);
        /* subtle border for glass effect */
        border-radius: 12px 12px 0 0;
        /* round top corners */
        padding: 0.5rem 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
    }

    /* Optional hover effect if you want the card header to respond */
    .card-header:hover {
        background: rgba(255, 255, 255, 0.35);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    }

    /* Make nav-links blend nicely with the light glass effect */
    .card-header .nav-link {
        color: #464646;
        /* dark text for contrast */
        font-weight: 600;
        transition: color 0.3s;
    }

    .card-header .nav-link.active {
        color: #7eba0a;
        /* iData green for active tab */
        border-bottom: 2px solid #7eba0a;
    }

    .card-header .nav-link:hover {
        color: #7eba0a;
    }


    /* Card Body */
    .mb-5 .card-body {
        padding: 1.5rem;
        background-color: #ffffff;
        /* white background for form fields */
    }

    /* Buttons */
    .mb-5 .btn-outline-primary {
        border-color: #347322;
        color: #347322;
        font-weight: 500;
        width: 100%;
        transition: all 0.2s;
    }

    .mb-5 .btn-outline-primary:hover {
        background-color: #347322;
        color: #ffffff;
        border-color: #347322;
    }

    /* Card Footer */
    .mb-5 .card-footer {
        background-color: #f5f5f5;
        border-top: 1px solid #d0d0d0;
        text-align: center;
        padding: 0.75rem 1rem;
    }

    .mb-5 .card-footer a {
        text-decoration: none;
    }

    .mb-5 .card-footer a span {
        color: #888888;
        font-size: 0.9rem;
        transition: color 0.2s;
    }

    .mb-5 .card-footer a span:hover {
        color: #1BB87C;
    }

    /* ESS Section Heading like iDataPay H1 */
    .mb-5 h2 {
        font-family: 'Roboto', sans-serif;
        /* Same as iDataPay */
        font-weight: 700;
        /* Bold heading */
        font-size: 2.5rem;
        /* Similar size to main H1 */
        line-height: 1.2;
        color: #464646;
        /* Your requested dark grey */
        margin-bottom: 1rem;
    }

    /* Paragraph styling */
    .mb-5 p {
        font-family: 'Roboto', sans-serif;
        font-weight: 400;
        font-size: 1rem;
        line-height: 1.6;
        color: #464646;
        /* Same dark grey for consistency */
    }

    .mb-5 p:hover {
        color: #ffffff;
        transition: color 0.3s ease;
    }


    /* Links inside paragraph */
    .mb-5 p a {
        color: #7eba0a;
        /* iDataPay accent green-blue */
        text-decoration: none;
        transition: color 0.2s;
    }

    .mb-5 p a:hover {
        color: #0D1B2A;
        /* Darker on hover for contrast */
        text-decoration: underline;
    }

    .mb-3.text-center img {
        max-width: 100%;
        /* Ensures the image doesn't exceed its container */
        height: auto;
        /* Maintains aspect ratio */
        display: block;
        /* Removes extra inline spacing */
        margin: 0 auto;
        /* Centers the image */
    }

    .badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 6px 12px;
        font-size: 0.8rem;
        font-weight: 600;
        color: #fff;
        background-color: #347322;
        /* default iData green */
        border-radius: 50rem;
        /* pill shape */
        letter-spacing: 0.3px;

        /* Animation consistency */
        transition: all 0.3s ease;

        /* Modern neumorphic consistency */
    }

    /* Hover effect consistent with list/table rows */
    .badge:hover {
        transform: translateY(-2px);
        background-color: #347322 !important;
    }

    /* Make card match iData style */
    .card {
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    /* Liquid glass style for modal content */
    .modal-content.card {
        background: rgba(255, 255, 255, 0.2);
        /* semi-transparent */
        backdrop-filter: blur(12px) saturate(180%);
        -webkit-backdrop-filter: blur(12px) saturate(180%);
        border-radius: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
        transition: transform 0.4s ease, opacity 0.4s ease;
        opacity: 0;
        transform: scale(0.8);
    }

    /* When modal is shown */
    .modal.show .modal-content.card {
        opacity: 1;
        transform: scale(1);
    }

    /* Optional: Smooth transition for the backdrop */
    .modal-backdrop.show {
        opacity: 0.5;
        /* semi-transparent backdrop */
        transition: opacity 0.3s ease;
    }

    /* Dark stylish header */
    .card-header {
        font-size: 1.2rem;
        font-weight: 600;
        padding: 0.75rem 1rem;
    }

    div.card.mb3 h5.card-header {
        color: #464646 !important;
    }



    .btn-outline-primary {
        color: #347322;
        border-color: #347322
    }


    /* Target the close button inside modal-content */
    .modal-content .close {
        background: rgba(255, 255, 255, 0.2);
        /* frosted glass feel */
        border: none;
        border-radius: 50%;
        /* circular */
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        font-weight: bold;
        color: #fff;
        /* default color */
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: inset 0 1px 4px rgba(255, 255, 255, 0.3),
            /* light glow inside */
            inset 0 -2px 10px rgba(0, 0, 0, 0.2),
            /* depth shadow inside */
            0 8px 20px rgba(0, 0, 0, 0.25);
        position: absolute;
        /* ensures it stays in corner */
        top: 8px;
        right: 12px;
    }

    /* Hover effect */
    .modal-content .close:hover {
        background: rgba(255, 255, 255, 0.35);
        transform: scale(1.1);
        color: #347322;
        /* your green on hover */
    }

    /* Center the × nicely */
    .modal-content .close span {
        display: inline-block;
        line-height: 1;
    }

    /* Better spacing in the body */
    .card-body {
        padding: 1.5rem;
    }

    .card-body p {
        color: #ffffff;
        /* white text */
    }


    /* Form fields match modern design */
    .form-control {
        border-radius: 6px;
        padding: 0.55rem 0.75rem;
        font-size: 1rem;
    }

    /* Full-width, stronger button design */
    .card-body .btn {
        width: 100%;
        border-radius: 6px;
        font-weight: 600;
    }

    /* Footer clean & centered */
    .card-footer {
        text-align: center;
        background-color: #f8f9fa;
        padding: 0.75rem;
    }

    /* Footer link subtle */
    .card-footer a span {
        color: #347322 !important;
        font-size: 0.88rem;
    }

    .btn-outline-primary:hover {
        color: #fff;
        background-color: #347322;
        border-color: #347322;
    }

    .col-md-6>.row {
        display: flex;
        align-items: center;
        /* vertically centers content */
    }

    .col-md-6>.row .col-md,
    .col-md-6>.row .col-md.offset-md-1 {
        margin: 0;
        /* remove any extra margin if needed */
    }


    body {
        margin: 0;
        font-family: var(--bs-body-font-family);
        font-size: var(--bs-body-font-size);
        font-weight: var(--bs-body-font-weight);
        line-height: var(--bs-body-line-height);
        color: #464646;
        text-align: var(--bs-body-text-align);
        background-color: var(--bs-body-bg);
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent
    }

    .list-group-flush>.list-group-item:last-child {
        border-bottom-width: 1px !important;
    }

    .list-group-item.d-flex.justify-content-between:hover a.load_modal_content {
        color: #ffffff !important;
        background: #464646;
        border-color: rgba(255, 255, 255, 0.4);
        text-decoration: none;
        transform: translateY(-2px);
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
    }

    .list-group.list-group-flush>.list-group-item {
        border-width: 1px !important;
        border-color: rgba(0, 0, 0, 0.125);
        /* same as Bootstrap default */
        border-bottom-width: 1px !important;
    }

    /* Make the <a> relative so ::after is positioned correctly */
    .list-group-item a {
        position: relative;
        color: inherit;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    /* Underline effect */
    .list-group-item a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 5px;
        /* adjust as needed */
        width: 0;
        height: 2px;
        background-color: #7eba0a;
        transition: width 0.3s ease;
    }

    /* Arrow effect if you have ::before */
    .list-group-item a::before {
        transition: transform 0.3s ease, color 0.3s ease;
    }

    /* Hover effect when hovering the link itself */
    .list-group-item a:hover {
        color: #7eba0a;
    }

    .list-group-item a:hover::after {
        width: 100%;
    }

    .list-group-item a:hover::before {
        color: #7eba0a;
        transform: translateX(-4px);
    }

    /* Hover effect when hovering the entire list item */
    .list-group-item:hover a {
        color: #7eba0a;
    }

    .list-group-item:hover a::after {
        width: 100%;
    }

    .list-group-item:hover a::before {
        color: #7eba0a;
        transform: translateX(-4px);
    }


    .list-group-item {
        overflow: visible !important;
        /* allow full content to show */
        flex-wrap: wrap;
        /* make sure flex items wrap instead of overflowing */
    }

    .list-group-item span:last-child {
        display: flex;
        flex-direction: column;
        /* stack all the date divs vertically */
    }




    .list-group-item:hover p {
        color: #ffffff;
        transition: color 0.3s ease;
        /* smooth transition */
    }


    /* ====================== */
    /* List Group / Label Spacing Fix */
    /* ====================== */

    /* Make spans inside list items flex with proper spacing */
    .list-group-item>span {
        display: flex;
        align-items: center;
        /* vertically center label and text */
        gap: 12px;
        /* space between <strong> and text */
    }

    .nav .nav-link {
        color: #464646 !important;
    }


    /* Inner rows inside col-md-6 (like companies/payroll links) */
    .col-md-6>.row {
        display: flex;
        align-items: center;
        gap: 8px;
        /* space between strong and link/text */
    }

    /* Import Poppins font if not already included */
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

    /* Link styling */
    .col-md-3 a {
        font-family: 'Poppins', sans-serif;
        color: #464646;
        text-decoration: none;
        font-weight: 500;
        position: relative;
        display: inline-block;
        transition: color 0.3s ease;
        padding-right: 22px;
        /* space for arrow */
    }

    /* underline (idata green line) */
    .col-md-3 a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -3px;
        width: 0;
        height: 2px;
        background-color: #7eba0a;
        transition: width 0.3s ease;
    }

    /* hover effects */
    .col-md-3 a:hover {
        color: #7eba0a;
    }

    .col-md-3 a:hover::after {
        width: 100%;
    }

    .col-md-3 a:hover::before {
        color: #7eba0a;
        transform: translateX(-4px);
        /* move arrow slightly toward text */
    }


    /* Reset offset columns for alignment */
    .col-md-6>.row .col-md.offset-md-1 {
        margin-left: 0;
        /* remove Bootstrap offset spacing */
    }

    /* Optional: ensure text aligns properly inside col-md-6 */
    span.col-md-6 {
        display: block;
        margin-left: auto;
        text-align: right;
    }

    @media (max-width: 768px) {
        .d-flex.justify-content-between {
            flex-direction: column;
            /* stack label + value */
            align-items: stretch;
            border: none;
            /* remove border on mobile */
            border-radius: 0;
            padding: 8px 0;
            margin: 0;
            width: 100%;
            /* span full screen */
            background: transparent;
            /* clean look */
        }

        /* Each span is a row with label + value */
        .d-flex.justify-content-between>span {
            display: flex;
            justify-content: space-between;
            width: 100%;
            padding: 4px 0;
            align-items: center;
            /* vertical alignment */
        }

        .d-flex.justify-content-between strong {
            text-align: left;
            margin: 0;
            line-height: 1.2;
            /* ensure proper vertical alignment */
        }

        .d-flex.justify-content-between span:not(:first-child),
        .d-flex.justify-content-between span.col-md-6 {
            text-align: right;
            line-height: 1.2;
            /* match strong */
        }

        /* Optional: inner rows for companies/payrolls */
        .d-flex.justify-content-between .col-md-6>.row {
            justify-content: flex-end;
            gap: 6px;
            align-items: center;
            /* vertical alignment inside rows */
        }
    }



    .fa-cog {
        color: #464646 !important;
    }

    .fa-info-circle:before {
        color: #464646 !important;
    }

    .d-flex.justify-content-between {
        background: rgba(255, 255, 255, 0.15);
        /* semi-transparent for liquid glass */
        backdrop-filter: blur(10px) saturate(180%);
        /* subtle blur effect */
        -webkit-backdrop-filter: blur(10px) saturate(180%);
        border: 1px solid rgba(70, 70, 70, 0.25);
        /* soft, semi-transparent border */
        border-radius: 12px;
        padding: 12px;
        margin-top: 3px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        /* subtle depth */
        cursor: pointer;
        /* indicates it's interactive */
    }


    body .modal {
        position: static !important;
        /* cancels Bootstrap's fixed */
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        /* cancels Bootstrap’s centering transform */
    }

    .load_modal_content {
        display: inline-block;
        padding: 8px 16px;
        font-size: 0.95rem;
        font-weight: 500;
        color: #ffffff;
        /* Dark text */
        background-color: #347322;
        /* Clean white background */
        border: 1px solid #464646;
        /* Brand dark border */
        border-radius: 12px;
        /* Modern rounded corners */
        text-decoration: none;
        transition: all 0.25s ease;
    }

    .load_modal_content:hover {
        background-color: #464646;
        /* Dark brand hover */
        color: #7eba0a;
        /* White text on hover */
        text-decoration: none;
    }

    .load_modal_content:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(70, 70, 70, 0.25);
        /* subtle focus glow */
    }




    .mb-3 {
        padding-left: 20px;
        /* adjust as needed */
        padding-right: 20px;
        /* adjust as needed */
        /* optional: add top/bottom padding too */
        padding-top: 10px;
        padding-bottom: 10px;
    }

    @media (max-width: 768px) {
        .mb-3 {
            padding-left: 0;
            padding-right: 0;
        }
    }

    /* Import Poppins font */
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

    /* Search bar container styling */
    .mb-5.row.justify-content-md-center {
        font-family: 'Poppins', sans-serif;
    }

    @media (min-width: 768px) {
        .mb-5.row.justify-content-md-center {
            justify-content: flex-end !important;
        }
    }


    /* Input styling */
    .input-group .form-control {
        border: 2px solid #464646;
        border-right: none;
        border-radius: 50px 0 0 50px;
        font-family: 'Poppins', sans-serif;
        font-size: 16px;
        padding: 0.75rem 1rem;
        color: #464646;
        background-color: #fff;
        transition: all 0.3s ease;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

    .input-group .form-control:focus {
        outline: none;
        border-color: #464646;
        box-shadow: 0 0 8px rgba(70, 70, 70, 0.3);
    }

    /* Button styling */
    .input-group-append .btn {
        border: 2px solid #464646;
        border-left: none;
        background-color: #347322;
        color: #fff;
        border-radius: 0 50px 50px 0;
        padding: 0.75rem 1.2rem;
        transition: all 0.3s ease;
    }

    .input-group-append .btn:hover {
        background-color: #347322;
        color: #ffffff;
        border-color: #347322;
    }

    /* Icon inside button */
    .input-group-append .btn i {
        font-size: 1rem;
        transition: transform 0.2s ease;
    }

    .input-group-append .btn:hover i {
        transform: scale(1.1);
    }

    @media (max-width: 768px) {

        table,
        thead,
        tbody,
        th,
        td,
        tr {
            display: block;
            width: 100%;
        }

        thead {
            display: none;
        }

        table tr {
            margin-bottom: 1.25rem;
            background: #ffffff;
            border-radius: 12px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            border: 1px solid #eaeaea;
            overflow: hidden;
            padding: 0.75rem 1rem;
            transition: background-color 0.3s ease, transform 0.2s ease;
            cursor: pointer;
        }

        table td {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 1rem;
            padding: 0.75rem 0;
            border: none;
            border-bottom: 1px solid #f0f0f0;
            word-wrap: break-word;
            white-space: normal;
            text-align: right;
            font-size: 0.95rem;
            flex-wrap: wrap;
            transition: color 0.3s ease;
            color: #464646;
            /* default text color */
        }

        .page-item.active .page-link {
            z-index: 3;
            color: #fff;
            background-color: #347322;
            border-color: transparent
        }

        .page-item.disabled .page-link {
            color: #ecf0f1;
            pointer-events: none;
            background-color: #347322;
            border-color: transparent
        }

        .page-link {
            position: relative;
            display: block;
            color: #fff;
            text-decoration: none;
            background-color: #464646;
            border: 0 solid transparent;
            transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
        }

        @media (prefers-reduced-motion:reduce) {
            .page-link {
                transition: none
            }
        }

        .page-link:hover {
            z-index: 2;
            color: #fff;
            background-color: #7eba0a;
            border-color: transparent
        }

        .page-link:focus {
            z-index: 3;
            color: #464646;
            background-color: #ecf0f1;
            outline: 0;
            box-shadow: 0 0 0 .25rem rgba(44, 62, 80, .25)
        }

        table td::before {
            content: attr(data-label);
            flex: 0 0 45%;
            max-width: 45%;
            font-weight: 600;
            color: #464646;
            text-align: left;
            font-size: 0.9rem;
            line-height: 1.3;
            white-space: normal;
            word-break: break-word;
            transition: color 0.3s ease;
        }

        /* Hover / active / clicked states */
        table tbody tr:hover,
        table tbody tr:active,
        table tbody tr.clicked {
            background-color: #464646 !important;
        }

        table tbody tr:hover td,
        table tbody tr:hover td::before,
        table tbody tr:active td,
        table tbody tr:active td::before,
        table tbody tr.clicked td,
        table tbody tr.clicked td::before {
            color: #ffffff !important;
        }

        /* Links inside rows */
        table tbody tr:hover a,
        table tbody tr:active a,
        table tbody tr.clicked a {
            color: #7eba0a !important;
        }

    }

    /* Footer link styling */
    .footer .text-center a {
        font-family: 'Poppins', sans-serif;
        color: #464646;
        text-decoration: none;
        font-weight: 600;
        /* slightly bolder for larger size */
        font-size: 1.2rem;
        /* increase font size */
        position: relative;
        transition: color 0.3s ease;
    }

    /* Hover color change */
    .footer .text-center a:hover {
        color: #347322;
    }

    /* Animated green underline (center-out effect) */
    .footer .text-center a::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -4px;
        /* distance below text */
        width: 0;
        height: 2px;
        background-color: #347322;
        transition: all 0.3s ease;
        transform: translateX(-50%);
        opacity: 0;
    }



    .footer .text-center a:hover::after {
        width: 100%;
        opacity: 1;
    }

    .page-item.active .page-link {
        z-index: 3;
        color: #fff;
        background-color: #347322;
        border-color: transparent
    }

    .page-item.disabled .page-link {
        color: #ecf0f1;
        pointer-events: none;
        background-color: #347322;
        border-color: transparent
    }

    .page-link {
        position: relative;
        display: block;
        color: #fff;
        text-decoration: none;
        background-color: #464646;
        border: 0 solid transparent;
        transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
    }

    .page-link:hover {
        z-index: 2;
        color: #fff;
        background-color: #7eba0a;
        border-color: transparent
    }

    .page-link:focus {
        z-index: 3;
        color: #464646;
        background-color: #ecf0f1;
        outline: 0;
        box-shadow: 0 0 0 .25rem rgba(44, 62, 80, .25)
    }


    .footer .text-center a:hover::after {
        width: 100%;
        opacity: 1;
    }

}

/* Completely cancel all glossy / animated link styles in .col-md-100 */
.col-md-100 td a,
.col-md-100 td a::before,
.col-md-100 td a::after {
    all: unset !important;
    display: inline !important;
    color: #464646 !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    position: static !important;
    opacity: 1 !important;
}

/* Simple hover feedback */
.col-md-100 td a:hover {
    text-decoration: underline !important;
    color: #347322 !important;
    /* or keep #464646 for neutral */
}

/* Cancel CSS for card-header.d-flex.justify-content-between */
.col-md-100 .card-header.d-flex.justify-content-between {
    all: unset !important;
    display: block !important;
    color: #464646 !important;
    font-size: 1.6rem !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
}

.col-md-100 td {
    font-size: 0.85rem !important;
    color: #464646 !important;
    padding: 4px 6px !important;
    border-bottom: 1px solid #eee !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

/* 🌿 Links inside .mb-5 with liquid glass style */
.mb-5 a {
    position: relative;
    display: inline-block !important;
    color: #347322 !important;
    /* green text */
    text-decoration: none !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    padding: 12px 24px !important;
    /* generous spacing */
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
    text-align: center;
    transition: all 0.3s ease;

    /* Inner glow + outer drop shadow */
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -2px 6px rgba(0, 0, 0, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.25);
}



/* Hover effect for subtle lift and color change */
.mb-5 a:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.25),
        inset 0 -2px 6px rgba(0, 0, 0, 0.35),
        0 6px 12px rgba(0, 0, 0, 0.3);
    color: #347322 !important;

}

/* Match .mb-5 a style */
.modal-body p a {
    position: relative;
    display: inline-block !important;
    color: #347322 !important;
    text-decoration: none !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    padding: 12px 24px !important;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -2px 6px rgba(0, 0, 0, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.25);
}

/* Hover effect */
.modal-body p a:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.25),
        inset 0 -2px 6px rgba(0, 0, 0, 0.35),
        0 6px 12px rgba(0, 0, 0, 0.3);
    color: #347322 !important;
}

/* Only the input-group that contains #createConfirm */
.input-group:has(#createConfirm)>.input-group-append {
    margin-left: auto !important;
}

footer.footer.font-small.text-muted.pt-4 {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;

    padding-top: 0 !important;
    /* remove padding above text */
    padding-bottom: 0rem !important;


    background: #464646;
    z-index: 1000;
}

.introjs-tooltip {
    background-color: rgba(255, 255, 255, 0.95) !important;
    /* translucent white */
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
    /* soft shadow */
    font-family: 'Poppins', sans-serif !important;
    font-weight: 60;
    font-size: 25px;
    width: 500px !important;
    padding: 20px !important;
    margin-left: 0px !important;
    max-width: 500px !important;
}

/* Liquid glass effect applied to all Intro.js buttons */
.introjs-tooltip .introjs-button {
    background: rgb(226 238 218 / 17%);
    border: 0px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 8px 16px;
    color: #464646;
    transition: all 0.3s ease;
    padding: 24px 48px;
    /* bigger interior space */
    font-size: 16px;
    /* larger text */
    border-radius: 12px;
    /* optional: rounder corners */
}

/* Hover effect */
.introjs-tooltip .introjs-button:hover {
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3);
}

.introjs-progressbar {
    background-color: #347322 !important;
}

.introjs-helperLayer {
    width: 0 !important;
    height: 0 !important;
    top: 0 !important;
    left: 0 !important;
}

.introjs-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
    /* make sure it's above other elements */
}

.introjs-tooltip.right-offset {
    margin-left: 100px !important;
    /* Increase this number to push further right */
}

.btn.btn-primary.mb-3 {
    color: #ffffff !important;
}


@media (max-width: 780px) {
    .introjs-tooltip {
        max-width: 350px !important;
        /* smaller tooltip width */
        font-size: 14px !important;
        /* readable mobile size */
        line-height: 1.4 !important;
    }

    .introjs-tooltiptext {
        font-size: 16px !important;
    }

    .introjs-helperLayer,
    .introjs-overlay {
        border-radius: 8px !important;
        /* softer highlight */
    }
}

.introjs-showElement {
    position: relative !important;
    z-index: 999999 !important;
    background: rgb(255 255 255) !important;
    /* optional debug */
}

.bottom-offset {
    margin-top: 150px !important;
    /* pushes tooltip slightly DOWN */
}

.top-offset {
    margin-bottom: 20px !important;
}

.introjs-arrow {
    display: none !important;
}