:root {
    --primary: #E85A10;
    --primary-secondary: #ff8442;
    --primary-lite: #ffe6d8;
    /*    --primary: #1890ff;*/
    --light: #fafafb;
    --dark: #191C24;
    --primary-filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(4deg) brightness(98%) contrast(97%);
}

/*#E85A10*/
/* cyrillic-ext */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/nunito/v31/XRXI3I6Li01BKofiOc5wtlZ2di8HDLshdTk3j77e.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/nunito/v31/XRXI3I6Li01BKofiOc5wtlZ2di8HDLshdTA3j77e.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/nunito/v31/XRXI3I6Li01BKofiOc5wtlZ2di8HDLshdTs3j77e.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/nunito/v31/XRXI3I6Li01BKofiOc5wtlZ2di8HDLshdTo3j77e.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/nunito/v31/XRXI3I6Li01BKofiOc5wtlZ2di8HDLshdTQ3jw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*pre-loader*/
.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader {
    width: 50px;
    height: 50px;
    background: #ff8e52;
    position: relative;
    animation: cubeFlip 2s ease-in-out infinite;
    transform-style: preserve-3d;
}

    .loader::before,
    .loader::after {
        content: '';
        position: absolute;
        width: 50px;
        height: 50px;
        background: #ff7226;
    }

    .loader::before {
        transform: translateZ(30px);
    }

    .loader::after {
        transform: translateZ(-30px);
        background: #ffc8ab;
    }

@keyframes cubeFlip {
    0%, 100% {
        transform: rotateX(0deg) rotateY(0deg);
    }

    50% {
        transform: rotateX(180deg) rotateY(180deg);
    }
}


.preloader-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    z-index: 10000;
}

.preloader-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.spinning-circle {
    filter: drop-shadow(0 0 8px rgba(86, 112, 255, 0.3));
    transform-origin: center;
    animation: spin-dash 1s linear infinite;
}

.empty-letter {
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.1));
    letter-spacing: -2px;
}

.water-fill {
    filter: drop-shadow(0 0 15px rgba(58, 68, 211, 0.6));
    animation: water-rise 2s ease-out infinite;
}

.wave-1 {
    filter: blur(1px);
    animation: wave-1 6s ease-in-out infinite;
}

.wave-2 {
    filter: blur(0.5px);
    animation: wave-2 6s ease-in-out infinite 0.5s;
}

.wave-3 {
    filter: blur(2px);
    animation: wave-3 6s ease-in-out infinite 1s;
}

@@keyframes spin-dash {
    0% {
        transform: rotate(0deg);
        stroke-dashoffset: 141;
    }

    50% {
        stroke-dashoffset: 35;
    }

    100% {
        transform: rotate(360deg);
        stroke-dashoffset: 141;
    }
}

@@keyframes water-rise {
    0% {
        transform: translateY(90px);
    }

    100% {
        transform: translateY(0px);
    }
}

@@keyframes wave-1 {
    0% {
        d: path('M0,75 Q15,64 30,71 T60,68 Q75,64 90,71 L90,90 L0,90 Z');
    }

    25% {
        d: path('M0,71 Q15,60 30,68 T60,64 Q75,60 90,68 L90,90 L0,90 Z');
    }

    50% {
        d: path('M0,68 Q15,56 30,64 T60,60 Q75,56 90,64 L90,90 L0,90 Z');
    }

    75% {
        d: path('M0,64 Q15,53 30,60 T60,56 Q75,53 90,60 L90,90 L0,90 Z');
    }

    100% {
        d: path('M0,60 Q15,49 30,56 T60,53 Q75,49 90,56 L90,90 L0,90 Z');
    }
}

@@keyframes wave-2 {
    0% {
        d: path('M0,79 Q23,68 45,75 T90,71 L90,90 L0,90 Z');
    }

    25% {
        d: path('M0,75 Q23,64 45,71 T90,68 L90,90 L0,90 Z');
    }

    50% {
        d: path('M0,71 Q23,60 45,68 T90,64 L90,90 L0,90 Z');
    }

    75% {
        d: path('M0,68 Q23,56 45,64 T90,60 L90,90 L0,90 Z');
    }

    100% {
        d: path('M0,64 Q23,53 45,60 T90,56 L90,90 L0,90 Z');
    }
}

@@keyframes wave-3 {
    0% {
        d: path('M0,83 Q11,71 23,79 Q34,86 45,79 Q56,71 68,79 Q79,86 90,79 L90,90 L0,90 Z');
    }

    25% {
        d: path('M0,79 Q11,68 23,75 Q34,83 45,75 Q56,68 68,75 Q79,83 90,75 L90,90 L0,90 Z');
    }

    50% {
        d: path('M0,75 Q11,64 23,71 Q34,79 45,71 Q56,64 68,71 Q79,79 90,71 L90,90 L0,90 Z');
    }

    75% {
        d: path('M0,71 Q11,60 23,68 Q34,75 45,68 Q56,60 68,68 Q79,75 90,68 L90,90 L0,90 Z');
    }

    100% {
        d: path('M0,68 Q11,56 23,64 Q34,71 45,64 Q56,56 68,64 Q79,71 90,64 L90,90 L0,90 Z');
    }
}

/* Style for error messages to match Bootstrap's invalid-feedback */
.error-message {
    color: #f34e4e; /* Bootstrap's danger color */
    font-size: 0.75rem; /* Matches Bootstrap's feedback font size */
    margin-top: 0.25rem;
    display: none; /* Hidden by default, shown when invalid */
    z-index: 9999;
}

/* Ensure the input field gets Bootstrap's invalid styling */
.form-control.is-invalid {
    border-color: #f34e4e;
    padding-right: calc(1.5em + 0.75rem);
    background-image: none;
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-select.is-invalid {
    border-color: #f34e4e;
    padding-right: calc(1.5em + 0.75rem);
    --bs-form-select-bg-icon: none !important;
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.required-star {
    color: #f34e4e;
    font-weight: bold;
}

#page-header {
    background-color: white;
    padding: 10px 15px;
    margin-bottom: 1rem;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
    position: sticky;
    top: 52px; /* Adjust based on your navbar height */
    z-index: 1;
}

    /* Breadcrumb inside page header */
    #page-header .breadcrumb {
        display: flex;
        list-style: none;
        padding: 0;
        margin: 0 0 10px 0;
        font-size: 14px;
    }

    #page-header .breadcrumb-item.active a {
        color: var(--theme-dark);
    }

    #page-header .breadcrumb-item + .breadcrumb-item::before {
        content: "/";
    }


    /* Breadcrumb link style */
    #page-header .breadcrumb a {
        color: rgba(0, 0, 0, 0.45);
        text-decoration: none;
        font-size:12px;
    }

    /* Title and update time container */
    #page-header .page-title-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Page title */
    #page-header .page-title {
        /*font-size: 1.25rem;*/
        font-size: 1rem;
        font-weight: 500;
        margin: 0;
    }

    /* Last updated text */
    #page-header .last-updated {
        font-size: 12px;
        color: var(--text-light);
        margin: 0;
    }

/* Target the accordion with tree-node class */
.tree-node.accordion {
    --bs-accordion-btn-padding-y: 1rem;
    --bs-accordion-btn-padding-x: 1.25rem;
    --bs-accordion-body-padding-y: 1rem;
    --bs-accordion-body-padding-x: 1.25rem;
    gap: 1rem; /* Equal gap between accordion items */
}

/* Style each accordion item */
.tree-node .accordion-item {
    border-radius: 8px; /* Rounded borders */
    border: 1px solid #dee2e6; /* Default outline border */
    overflow: hidden; /* Ensure rounded corners apply to children */
}

/* Remove default hover effects */
.tree-node .accordion-button:hover {
    background-color: transparent !important;
    color: inherit !important;
}

/* Style the accordion button (header) */
.tree-node .accordion-button {
    background-color: #fff; /* Default background */
    color: #000; /* Default text color */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Spread content across header */
    padding: 1rem 1.5rem 1rem 3.5rem; /* Adjusted padding for icon and actions */
    position: relative;
    border-radius: 8px 8px 0 0; /* Rounded top corners */
    box-shadow: none !important; /* Remove any default shadow */
}

    /* Remove focus and active state background changes */
    .tree-node .accordion-button:focus,
    .tree-node .accordion-button:not(.collapsed) {
        background-color: #fff !important; /* No color change on click */
        color: #000 !important;
        box-shadow: none !important;
        z-index: 0;
    }

.tree-node .accordion-item {
    background-color: #ffffff;
}

/* Style the Font Awesome stacked icon */
.tree-node .accordion-button .fa-stack {
    position: absolute;
    font-size: 1.2rem; /* Base size for the stack */
    left: 1rem; /* Position on the left */
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Offset for vertical centering */
    width: 1.5rem; /* Consistent size for stack */
    height: 1.5rem;
    line-height: 1.5rem; /* Align icons vertically */
    display: flex; /* Use flexbox for centering */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    transition: transform 0.3s ease-in-out; /* Smooth rotation */
    transform-origin: center; /* Rotate around center */
}

/* Style the circle (white fill with black border) */
.tree-node .accordion-button .fa-circle {
    color: #fff; /* White fill for circle */
    -webkit-text-stroke: 1px #000; /* Black border for circle */
    text-stroke: 1px #000; /* Standard property for black border */
    font-size: 1.5rem; /* Size for the circle */
}

/* Style the chevron arrow (black color) */
.tree-node .accordion-button .fa-chevron-down {
    color: #000; /* Black arrow */
    font-size: 0.8rem; /* Smaller size for better centering */
    line-height: 1.5rem; /* Match stack height for vertical alignment */
}

/* Rotate icon when accordion is expanded */
.tree-node .accordion-button:not(.collapsed) .fa-stack {
    transform: translateY(-50%) rotate(180deg); /* Rotate 180deg for up arrow when expanded */
}

/* Remove Bootstrap's default arrow */
.tree-node .accordion-button::after {
    display: none; /* Hide default Bootstrap arrow */
}

/* Style the SVG icon after the title */
.tree-node .accordion-button .header-icon {
    width: 14px; /* Fixed size for SVG */
    height: 14px;
    margin-right: 0.5rem; /* Space after title */
    vertical-align: middle;
}

/* Style the badge */
.tree-node .accordion-button .badge {
    margin-left: 0.5rem; /* Space after SVG icon */
    padding: 0px 12px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 500;
    line-height: 24px;
}

/* Style the employee count */
.tree-node .accordion-button .employee-count {
    margin-left: auto; /* Push to the right */
    margin-right: 1rem; /* Space before action buttons */
    font-size: 0.9rem;
    color: #666; /* Subtle color */
}

/* Style the action buttons container */
.tree-node .accordion-button .header-actions {
    display: flex;
    gap: 0.5rem; /* Space between buttons */
}

/* Style the action buttons */
.tree-node .accordion-button .btn {
    font-size: 0.8rem; /* Smaller buttons */
    padding: 0.25rem 0.5rem; /* Compact buttons */
}

/* Style the accordion body */
.tree-node .accordion-body {
    background-color: white;
    padding: 0.7rem 0.7rem 5px 0.7rem;
    border-top: 1px solid #dee2e6; /* Separator between header and body */
    border-radius: 0 0 8px 8px; /* Rounded bottom corners */
}

.tree-node .accordion-item.toggled-accordion {
    border: 2px solid #007bff; /* Blue border for the currently toggled accordion */
}

.tree-node .node-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.tree-node .node-info {
    display: flex;
    align-items: center;
    gap: 12px;
}


.level-1 {
    --level-color: #DBE1FF;
}

.level-2 {
    --level-color: #ACFFBB;
}

.level-3 {
    --level-color: #EDDFFF;
}

.level-4 {
    --level-color: #FFEDD5;
}

.level-5 {
    --level-color: #ff725661;
}

.level-6 {
    --level-color: #ffbf0061;
}

.level-7 {
    --level-color: #b3b3b35e;
}

.branch-tag {
    margin-left: 0.5rem; /* Space after SVG icon */
    padding: 2px 12px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 500;
    line-height: 24px;
    background-color: var(--level-color, #EDDFFF); /* Use --level-color with fallback */
}




.badge.level-badge {
    background-color: var(--level-color) !important;
    color: black;
}

.title-badge {
    margin-left: 0.5rem;
    padding: 0px 12px;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 500;
    line-height: 24px;
}

.match-badge {
    padding: 3px 12px;
    border-radius: 14px;
    border: 1px solid var(--theme-dark);
    font-size: 12px;
    font-weight: 500;
    line-height: 21px;
    color: var(--theme-dark);
    background-color: var(--succes-status);
}

.unmatch-badge {
    padding: 3px 12px;
    border-radius: 14px;
    border: 1px solid var(--succes-status1-text);
    font-size: 12px;
    font-weight: 500;
    line-height: 21px;
    color: var(--succes-status1-text);
    background-color: var(--succes-status1);
}

.pending-badge {
    padding: 3px 12px;
    border-radius: 14px;
    border: 1px solid var(--succes-status2-text);
    font-size: 12px;
    font-weight: 500;
    line-height: 21px;
    color: var(--succes-status2-text);
    background-color: var(--succes-status2);
}

.action-link.btn.btn-sm.btn-outline-primary,
.action-link.btn.btn-sm.btn-outline-secondary,
.action-link.btn.btn-sm.btn-outline-primary:hover,
.action-link.btn.btn-sm.btn-outline-secondary:hover {
    border-color: #b2b2b2;
    color: black;
    cursor: pointer !important;
    background-color: transparent;
}

.tree {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
}

    .tree li {
        list-style-type: none;
        margin: 0;
        padding: 10px 5px 0 5px;
        position: relative;
    }

        .tree li::before, .tree li::after {
            content: '';
            left: -20px;
            position: absolute;
            right: auto;
        }

        .tree li::before {
            border-left: 1px solid #999;
            bottom: 50px;
            height: 100%;
            top: 0;
            width: 1px;
        }

        .tree li::after {
            border-top: 1px solid #999;
            height: 20px;
            top: 25px;
            width: 25px;
        }

        .tree li span {
            border: 1px solid #999;
            border-radius: 5px;
            display: inline-block;
            padding: 3px 8px;
            text-decoration: none;
        }

    .tree > ul > li::before, .tree > ul > li::after {
        border: 0;
    }

    .tree li:last-child::before {
        height: 25px;
    }

.swal2-tree {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    color: #333;
    text-align: left; /* Ensure text is left-aligned */
}

.swal2-tree-popup .swal2-html-container {
    text-aligin: left;
}

/* Style for action icons */
.action-buttons .edit-icon {
    color: #2eb66d;
    cursor: pointer;
}

.action-buttons .delete-icon {
    color: #f34e4e;
    cursor: pointer;
}

.action-buttons {
    display: flex;
    justify-content: center; /* Aligns items towards the center */
    align-items: center;
    gap: 20px; /* Adjust the spacing between the buttons */
    width: 100%;
}

    .action-buttons img {
        width: 20px; /* Adjust size if needed */
        height: 20px;
        cursor: pointer;
    }


/* common Tab */
.common-tab {
    background-color: transparent;
    border-bottom: 1px solid #dee2e6;
    padding: 0;
    margin-bottom: 20px;
}

    .common-tab .nav-link {
        background-color: transparent;
        border: none;
        border-bottom: 3px solid transparent;
        color: #6c757d;
        font-weight: 500;
        padding: 12px 20px;
        margin-right: 0;
        border-radius: 0;
        transition: all 0.3s ease;
        position: relative;
    }

#salesTabs.common-tab .nav-link,
#bankTabs.common-tab .nav-link,
#salesErpTabs.common-tab .nav-link,
#bankCreditTabs.common-tab .nav-link,
#userTabs.common-tab .nav-link,
#settingsTabs.common-tab .nav-link {
    padding: 12px 12px;
}


.common-tab .nav-link:hover {
    color: #495057;
    background-color: transparent;
    border-bottom-color: #dee2e6;
}

.common-tab .nav-link.active {
    color: var(--theme);
    background-color: transparent;
    border-bottom-color: var(--theme);
    font-weight: 600;
}

.common-tab .nav-link:focus {
    box-shadow: none;
    outline: none;
}

.common-tab .nav-item {
    margin-bottom: 0;
}

.common-tab-1 {
    display: flex;
    justify-content: space-between;
}

    .common-tab-1 .nav-item {
        flex: 1; /* Equal width for each tab */
        text-align: center; /* Center text inside tabs */
    }

    .common-tab-1 .nav-link {
        width: 100%; /* Fill the entire .nav-item */
    }


/* Empoyee List*/
#main-container {
    padding: 1.5rem;
}

#directory-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

#directory-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #212529;
}

#main-container .search-form {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid grey;
    border-radius: 50px;
    padding: 8px 16px;
    width: 300px;
}

    #main-container .search-form .search-icon {
        width: 16px;
        height: 16px;
        margin-right: 12px;
    }

    #main-container .search-form input {
        border: none;
        background: transparent;
        outline: none;
        font-family: 'Nunito Sans', sans-serif;
        font-size: 14px;
        color: #454545;
        width: 100%;
    }


/*#search-container {
    position: relative;
    width: 100%;
    max-width: 300px;
}

#search-input {
    padding: 0.5rem 0.75rem 0.5rem 2.5rem;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    width: 100%;
    font-size: 0.875rem;
    background-color: #fff;
}

    #search-input:focus {
        outline: none;
        border-color: #80bdff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

#search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    pointer-events: none;
}*/

/* ================================
   Employee Table - Card Style
   ================================ */
#employeeTable.dataTable {
    border-collapse: separate !important;
    border-spacing: 5px 12px; /* vertical spacing between rows */
    width: 100%;
    border: 0px;
}

    #employeeTable.dataTable tbody tr {
        transition: all 0.2s ease;
    }

    #employeeTable.dataTable tbody td {
        background: #fff;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 1rem;
        font-size: 16px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        transition: all 0.2s ease;
    }

    /* Hover effect */
    #employeeTable.dataTable tbody tr:hover td {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }


#employeeTable_wrapper div.dataTables_scrollHead table.dataTable {
    border: 0;
}


#employeeTable .employee-card {
    display: flex;
    align-items: anchor-center;
}

/* ================================
   Avatar
   ================================ */
#employeeTable .employee-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    color: #fff;
    margin-right: 1rem;
    flex-shrink: 0;
}

/* ================================
   Employee Info
   ================================ */
#employeeTable .employee-info {
    flex: 1;
    min-width: 0;
}

#employeeTable .employee-name {
    font-size: 1rem;
    font-weight: 600;
    color: #212529;
}

#employeeTable .employee-id,
#employeeTable .employee-department {
    font-size: 0.875rem;
    color: #6c757d;
}

/* ================================
   Contact & Status
   ================================ */
#employeeTable .employee-contact,
#employeeTable .employee-status {
    flex: 1;
    min-width: 0;
}

#employeeTable .contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    color: #495057;
}

#employeeTable .contact-icon {
    width: 16px;
    height: 16px;
    margin-right: 0.5rem;
    color: #6c757d;
}

#employeeTable .status-badge {
    display: inline-block;
    padding: 0.3rem 0.5rem;
    border-radius: 1.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

#employeeTable .status-active {
    background-color: #C9FFD3;
    color: #07821D;
}

#employeeTable .status-inactive {
    background-color: #FFDBD7;
    color: #C62929;
}

#employeeTable .rfid-info,
#employeeTable .last-seen {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 0.125rem;
}

/* ================================
   Actions
   ================================ */
#employeeTable .employee-actions {
    gap: 0.5rem;
}

/* ================================
   Responsive
   ================================ */
@media (max-width: 768px) {
    #employeeTable .employee-card {
        flex-direction: column;
        align-items: flex-start;
    }

    #employeeTable .employee-contact,
    #employeeTable .employee-status,
    #employeeTable .employee-actions {
        margin-left: 0;
        margin-top: 0.5rem;
    }
}

@media (max-width: 576px) {
    #employeeTable .employee-name {
        font-size: 0.9rem;
    }

    #employeeTable .employee-id,
    #employeeTable .employee-department {
        font-size: 0.8rem;
    }
}


@media (min-width: 992px) { /* Bootstrap's large screen breakpoint (lg) */
    .custom-negative-margin {
        margin-top: -9rem; /* Adjust value as needed */
    }
}


#userAccessForm .input-group .invalid-feedback {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: 0.25rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: #dc3545;
}

#userAccessForm .input-group {
    position: relative;
    flex-wrap: nowrap; /* Prevent wrapping of input and button */
}

    #userAccessForm .input-group .form-control {
        flex: 1 1 auto;
    }

#userAccessForm .toggle-password {
    z-index: 10; /* Ensure the toggle button stays above other elements */
}

#userAccessForm .input-group .btn {
    flex-shrink: 0; /* Prevent the button from shrinking */
}

/* PDF Coverter page */
#pdf-converter-section .upload-area {
    border: 2px dashed #22222280;
    border-radius: 8px;
    background-color: #ffffff;
    transition: all 0.3s ease;
    cursor: pointer;
    min-height: 200px;
}

    #pdf-converter-section .upload-area:hover {
        background-color: #e9ecef;
        border-color: #0056b3;
    }

    #pdf-converter-section .upload-area.drag-over {
        background-color: #e7f3ff;
        border-color: #0056b3;
        transform: scale(1.01);
    }

#pdf-converter-section .btn-browse {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
    transition: all 0.3s ease;
}

    #pdf-converter-section .btn-browse:hover {
        background-color: #0056b3;
        border-color: #004085;
        transform: translateY(-1px);
    }

#pdf-converter-section .upload-icon {
    font-size: 3rem;
    color: #6c757d;
}

#pdf-converter-section .upload-area.drag-over .upload-icon {
    color: #007bff;
}

.file-item {
    background-color: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    position: relative;
}

    .file-item .file-icon {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
    }

.file-name {
    font-weight: 500;
    color: #333;
    font-size: 0.9rem;
}

.file-size {
    color: #6c757d;
    font-size: 0.8rem;
    margin-top: 2px;
}

.file-format {
    position: absolute;
    top: 1rem;
    right: 3rem;
    background-color: #e9ecef;
    color: #495057;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.close-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    color: #6c757d;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

    .close-btn:hover {
        background-color: #f8f9fa;
        color: #333;
    }

    .close-btn:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }

.progress-container {
    margin-top: 0.5rem;
}

.progress {
    height: 6px;
    background-color: #e9ecef;
    border-radius: 3px;
}

.progress-bar {
    background-color: #007bff;
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.convert-btn-container {
    margin-top: 1rem;
    text-align: center;
}

.btn-convert {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
    border-radius: 6px;
    padding: 0.5rem 1.5rem;
    font-weight: 500;
}

    .btn-convert:hover:not(:disabled) {
        background-color: #0056b3;
        border-color: #0056b3;
    }

    .btn-convert:disabled {
        background-color: #6c757d;
        border-color: #6c757d;
        cursor: not-allowed;
    }

.btn-download {
    background-color: #28a745;
    border-color: #28a745;
    color: white;
    border-radius: 4px;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

    .btn-download:hover {
        background-color: #218838;
        border-color: #1e7e34;
    }

.main-convert-btn {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
    border-radius: 6px;
    padding: 0.75rem 2rem;
    font-weight: 500;
    border: none;
    cursor: not-allowed;
}

    .main-convert-btn.active {
        background-color: #007bff;
        border-color: #007bff;
        cursor: pointer;
    }

        .main-convert-btn.active:hover {
            background-color: #0056b3;
            border-color: #0056b3;
        }

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
}
/* Responsive Design - All scoped to #pdf-history page */
/* Custom CSS only for specific customizations */
#custom-apply-btn {
    background-color: #007bff;
    border-color: #007bff;
}

.common-badge {
    margin-left: 0.5rem; /* Space after SVG icon */
    padding: 2px 12px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 500;
    line-height: 24px;
}

#custom-apply-btn:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

#custom-clear-btn {
    background-color: #6c757d;
    border-color: #6c757d;
}

    #custom-clear-btn:hover {
        background-color: #5a6268;
        border-color: #5a6268;
    }

#custom-download-btn {
    background-color: #28a745;
    border-color: #28a745;
    font-size: 0.8rem;
}

    #custom-download-btn:hover {
        background-color: #218838;
        border-color: #218838;
    }

#custom-delete-btn {
    background-color: #dc3545;
    border-color: #dc3545;
    font-size: 0.8rem;
}

    #custom-delete-btn:hover {
        background-color: #c82333;
        border-color: #c82333;
    }

#custom-search-field:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

#custom-upload-area {
    border: 2px dashed #007bff;
    background-color: #f8f9fa;
    transition: all 0.3s ease;
    cursor: pointer;
}

    #custom-upload-area:hover {
        background-color: #e9ecef;
        border-color: #0056b3;
    }

#custom-filter-tag {
    background-color: #e9ecef;
    color: #495057;
}

    #custom-filter-tag .remove-filter {
        background: none;
        border: none;
        color: #6c757d;
        cursor: pointer;
        padding: 0;
    }

        #custom-filter-tag .remove-filter:hover {
            color: #495057;
        }

#custom-accordion-btn {
    background-color: #f8f9fa;
    color: #212529;
    border: 1px solid #dee2e6;
    z-index: 0;
}

    #custom-accordion-btn:not(.collapsed) {
        background-color: #e9ecef;
        color: #212529;
        box-shadow: none;
    }

/*select box*/
/ /* Select2 Bootstrap 5 Theme Enhancements */
.select2-container--bootstrap-5 {
    width: 100% !important;
}

.select2-container--bootstrap-5 .select2-selection {
    border: 1px solid #D9D9D9;
    border-radius: 3px;
    background-color: white;
    min-height: calc(1.5em + 0.75rem + 2px);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .select2-container--bootstrap-5 .select2-selection:focus {
        border-color: #86b7fe;
    }

/* Single Selection Styles */
.select2-container--bootstrap-5 .select2-selection--single {
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

    .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
        padding-left: 0px !important;
        color: #495057;
        line-height: 1.5;
    }

.select2-container--bootstrap-5 .select2-results {
    max-height: 200px; /* Adjust as needed */
    overflow-y: auto;
}

/* Dropdown Styles */
.select2-container--bootstrap-5 .select2-dropdown {
    border-color: #ced4da;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.select2-container--bootstrap-5 .select2-results__option {
    padding: 0.375rem 0.75rem;
    color: #212529;
}

.select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected] {
    background-color: #0d6efd;
    color: #fff;
}



/* Form Floating Adjustments */
.form-floating > .select2-container--bootstrap-5 .select2-selection {
    height: calc(3.5rem + 2px);
    padding: 1rem 0.75rem;
}

.form-floating > .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
}

/* Error State */
.select2-container--bootstrap-5.is-invalid .select2-selection {
    border-color: #dc3545;
}

.select2-container--bootstrap-5.is-invalid.select2-container--focus .select2-selection {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* Disabled State */
.select2-container--bootstrap-5.select2-container--disabled .select2-selection {
    background-color: #f5f6f8;
    border-color: #d9d9d9;
    opacity: 1;
}

.select2-container--bootstrap-5.select2-container--disabled .select2-selection--single {
    background-image: none;
}


/* Make sure the disabled select inside a form-floating has proper styling */
.form-floating > .select2-container--bootstrap-5.select2-container--disabled .select2-selection {
    background-color: #e9ecef;
}

.select2-results__option.select2-selected-custom {
    background-color: #e6f3ff !important; /* Light blue background for selected item */
    color: #000 !important; /* Ensure text is readable */
}

    .select2-results__option.select2-selected-custom:hover {
        background-color: #cce6ff !important; /* Slightly darker on hover */
    }

.select2-results__option .fw-bold {
    font-weight: bold !important; /* Bold text for selected item */
}

select:disabled,
.form-select:disabled {
    background-image: none !important;
}

/* Style for invalid Select2 dropdowns */
.select2-container .select2-selection.is-invalid {
    border-color: #f34e4e !important;
}

/* Style for date */
/*input[type="date"] {
    background: url('/images/date.svg') no-repeat right 12px center;
    background-size: 20px 20px;
    padding-right: 36px;
    height: 40px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    appearance: none;*/ /* Hide default icon on modern browsers */
/*-webkit-appearance: none;*/ /* For WebKit browsers */
/*}*/

/* Style for time */
/*input[type="time"] {
    background: url('/images/time.svg') no-repeat right 12px center;
    background-size: 20px 20px;
    padding-right: 36px;
    height: 40px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    cursor: pointer;
}*/

/* Date Input Group Styling */
.date-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

    .date-input-group .form-control {
        padding-right: 40px;
        cursor: pointer;
    }

.date-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: url('/images/date.svg') no-repeat right 12px center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    z-index: 0;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

/* Time Input Group Styling */
.time-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

    .time-input-group .form-control {
        padding-right: 40px;
        cursor: pointer;
    }

.time-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: url('/images/time.svg') no-repeat right 12px center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    z-index: 0;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

/* Hover Effects */
.date-input-group:hover .date-icon,
.time-input-group:hover .time-icon {
    opacity: 0.8;
}

/* Focus Effects */
.date-input-group .form-control:focus + .date-icon,
.time-input-group .form-control:focus + .time-icon {
    opacity: 1;
}

/* Custom styling for jQuery UI datepicker */
.ui-datepicker {
    font-size: 14px;
}

/* Custom styling for Flatpickr */
.flatpickr-calendar {
    font-size: 14px;
}

/* Hide default browser date/time picker arrows */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    display: none;
}

input[type="date"]::-webkit-inner-spin-button,
input[type="time"]::-webkit-inner-spin-button {
    display: none;
}

/* For Firefox */
input[type="date"],
input[type="time"] {
    -moz-appearance: textfield;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .date-icon, .time-icon {
        right: 8px;
        width: 18px;
        height: 18px;
    }
}


/*Datepicker start*/
.ui-datepicker {
    border-radius: 10px !important;
}

    .ui-datepicker td span, .ui-datepicker td a {
        display: block;
        padding: .3em !important;
        text-align: right;
        text-decoration: none;
    }

    .ui-datepicker .ui-datepicker-header {
        border: transparent !important;
        position: relative;
        background: transparent;
        padding: .2em 0;
    }

        .ui-datepicker .ui-datepicker-header select {
            width: auto;
            border: transparent !important;
        }

.ui-widget-header .ui-state-hover {
    border: transparent !important;
    background: transparent !important;
    font-weight: normal;
    color: #2b2b2b;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    border: 1px solid #dad55e;
    background: #fffa90;
    border-radius: 5px;
    color: #777620;
}

.ui-datepicker .ui-datepicker-title {
    margin: 0 2.3em;
    line-height: 1.8em;
    text-align: center;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    background-image: none; /* Clear the default image */
    background: transparent url('iconsax-gh-pages/icons/user-1.svg') no-repeat center center;
    background-size: 16px 16px; /* Adjust the size as needed */
}

.ui-datepicker .ui-datepicker-prev span {
    background-image: url('../iconsax-gh-pages/icons/chevron-left.svg'); /* URL to your prev icon */
}

.ui-datepicker .ui-datepicker-next span {
    background-image: url('../iconsax-gh-pages/icons/chevron-right.svg'); /* URL to your next icon */
}

.ui-state-default, .ui-widget-content .ui-state-default {
    border: transparent;
    background: transparent;
    font-weight: normal;
    text-align: center;
    color: #454545;
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus {
    border: 1px solid #0084ff;
    border-radius: 5px;
    background: #007fff;
    font-weight: normal;
    color: #ffffff;
}



/* Highlight selected date with a round border */
.ui-state-active, .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    border: 1px solid #0084ff;
    border-radius: 5px;
    background: #007fff;
    font-weight: normal;
    color: #ffffff;
}

/* Add hover effect for all dates */
.ui-datepicker-calendar td .ui-state-default:hover {
    border-radius: 5px;
    border: 1px solid #0084ff;
    background: #007fff;
    font-weight: normal;
    color: #ffffff;
}

/* Special styles for Monday */
.ui-datepicker-calendar tr td .ui-state-default {
    width: 31px !important;
    height: 31px !important;
    font-size: 14px !important;
}

.ui-datepicker select.ui-datepicker-year {
    max-height: 200px !important;
    overflow-y: auto !important;
    height: auto !important;
}




.header-row {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 10px 15px;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 14px;
    color: #495057;
}

.menu-tree {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 20px;
}

.menu-item {
    position: relative;
    /* margin-bottom: 8px; */
}

.menu-row {
    margin-left: 0px;
    display: flex;
    align-items: center;
    padding: 12px 0;
    background-color: white;
    border-left: 1px solid #6C4B99;
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    /* border-radius: 4px;
            margin-bottom: 10px; */
}

.submenu .menu-row {
    display: flex;
    align-items: center;
    padding: 12px 0;
    background-color: white;
    border-left: 1px solid #dee2e6;
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    /* border-radius: 4px;
            margin-bottom: 10px; */
}

.tree-icon {
    width: 30px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    margin-left: -27px;
    position: relative;
    z-index: 0; /* Ensure icon is above lines */
}

.submenu-tree-icon .plus-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    margin-left: 40px;
    position: relative;
    z-index: 0;
}

.plus-icon {
    width: 24px;
    height: 24px;
    background: #6C4B99;
    border: 1px solid #6C4B99;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold !important;
    color: #ffffff;
    transition: all 0.2s ease;
    position: relative;
    z-index: 0; /* Ensure plus icon is above lines */
}

    .plus-icon:hover {
        border-color: #495057;
        color: #ffffff;
    }

    .plus-icon.expanded {
        background: #6C4B99;
    }

.menu-label {
    flex: 1;
    font-size: 13px;
    color: #495057;
    display: flex;
    align-items: center;
}

    .menu-label i {
        display: none; /* Remove blue dot */
    }

.permission-checkboxes {
    display: flex;
    gap: 40px;
    align-items: center;
}

.checkbox-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    /*width: 60px;*/
}

.submenu .checkbox-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Target each checkbox-wrapper by its position in the row */
.submenu .menu-row .col-2:nth-child(2) .checkbox-wrapper {
    margin-left: -19px; /* First checkbox (view) */
}

.submenu .menu-row .col-2:nth-child(3) .checkbox-wrapper {
    margin-left: -7px; /* Second checkbox (add) */
}

.submenu .menu-row .col-2:nth-child(4) .checkbox-wrapper {
    margin-left: 5px; /* Third checkbox (edit) */
}

.submenu .menu-row .col-1:nth-child(5) .checkbox-wrapper {
    margin-left: 15px; /* Fourth checkbox (delete) */
}

.submenu .menu-row .col-1:nth-child(6) .checkbox-wrapper {
    margin-left: 22px; /* Fifth checkbox (export) */
}

/* Target each checkbox-wrapper by its position in the row */
.nested-submenu .menu-row .col-2:nth-child(2) .checkbox-wrapper {
    margin-left: -69px; /* First checkbox (view) */
}

.nested-submenu .menu-row .col-2:nth-child(3) .checkbox-wrapper {
    margin-left: -42px; /* Second checkbox (add) */
}

.nested-submenu .menu-row .col-2:nth-child(4) .checkbox-wrapper {
    margin-left: -15px; /* Third checkbox (edit) */
}

.nested-submenu .menu-row .col-1:nth-child(5) .checkbox-wrapper {
    margin-left: 15px; /* Fourth checkbox (delete) */
}

.nested-submenu .menu-row .col-1:nth-child(6) .checkbox-wrapper {
    margin-left: 15px; /* Fifth checkbox (export) */
}


.checkbox-wrapper input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--theme);
}

.submenu {
    /* margin-left: 15px; */
    border-left: 1px solid #6C4B99;
    padding: 25px 25px 25px 25px;
    /* margin-top: 8px; */
    display: none;
    background-color: #FAFAFB;
    position: relative;
    margin-right: -12px;
}

    .submenu.show {
        display: block;
    }

.nested-submenu {
    /* margin-left: 15px; */
    border: 1px solid #dee2e6;
    padding: 25px 11px 25px 40px;
    /* margin-top: 8px; */
    display: none;
    background-color: #FAFAFB;
    position: relative;
    margin-right: -12px;
}

    .nested-submenu.show {
        display: block;
    }

.connecting-line {
    position: absolute;
    /* left: 15px; */
    top: 28px;
    bottom: -8px;
    width: 1px;
    background: #6C4B99;
    z-index: 0; /* Behind the boxes */
}

.submenu-connecting-line {
    position: absolute;
    left: 16px;
    top: 0px;
    bottom: 47px;
    width: 1px;
    background: #6C4B99;
    z-index: 0;
}

.menu-item:last-child .connecting-line {
    display: none;
}



/* Horizontal lines connecting all submenu items to main vertical line */
.submenu .menu-row .tree-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -12px;
    right: 26px;
    height: 1px;
    background: #6C4B99;
    z-index: 0;
}


/* Horizontal lines connecting all nested submenu items to nested vertical line */
.nested-submenu .menu-row .tree-icon::before {
    left: -10px;
    right: 18px;
}

/* Vertical line for nested submenus */
.nested-submenu .connecting-line {
    left: 5px; /* Align with nested level */
}

/* Remove horizontal lines for main menus */
.menu-row .tree-icon::after {
    display: none;
}


.toast {
    position: relative; /* Changed from fixed to relative for container-fluid */
    width: 100%; /* Full width within container-fluid */
    max-width: 100%; /* Ensure it spans the container */
    min-width: 300px;
    background-color: #28a745;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    opacity: 0; /* Start hidden */
    transition: opacity 0.3s ease-in-out; /* Smooth transition */
}

    .toast:not(.d-none) {
        opacity: 1; /* Ensure visible when d-none is removed */
    }

    .toast .close-btn {
        cursor: pointer;
        font-size: 18px;
        line-height: 1;
        color: white;
    }


        .toast .close-btn:hover {
            cursor: pointer;
            font-size: 18px;
            line-height: 1;
            color: black;
        }


.was-validated .form-control:valid, .form-control.is-valid {
    border-color: #ced4da;
    background-image: none;
}

.was-validated .form-select:valid:not([multiple]):not([size]),
.was-validated .form-select:valid:not([multiple])[size="1"],
.form-select.is-valid:not([multiple]):not([size]),
.form-select.is-valid:not([multiple])[size="1"] {
    padding-right: 2.25rem; /* Keep space for arrow */
    /* Remove tick icon, keep only arrow */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    /* Override green border */
    border-color: #ced4da;
    box-shadow: none;
}

.summary-card {
    background: #00ff331f;
    border: 1px solid #d4edda;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}



.was-validated .form-control:invalid, .form-control.is-invalid {
    border-color: #dc3545;
    background-image: none;
}

.small-date {
    max-width: 140px;
    padding: 0px 5px 0px 5px;
}

.small-date-icon {
    right: 5px;
}

.btn-group > .btn-check:checked + .btn, .btn-group > .btn-check:focus + .btn, .btn-group > .btn:hover, .btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active, .btn-group-vertical > .btn-check:checked + .btn, .btn-group-vertical > .btn-check:focus + .btn, .btn-group-vertical > .btn:hover, .btn-group-vertical > .btn:focus, .btn-group-vertical > .btn:active, .btn-group-vertical > .btn.active {
    z-index: 0;
}


/* Apply spacing between rows */
#summaryModal .summary-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-family: Arial, sans-serif;
}

    #summaryModal .summary-table th,
    #summaryModal .summary-table td {
        border: 1px solid #dee2e6;
        padding: 8px;
        text-align: center;
        vertical-align: middle;
    }

    #summaryModal .summary-table .title-header th {
        background-color: #f8f9fa;
        font-size: 1.2em;
        font-weight: bold;
        padding: 15px 10px;
        text-align: center;
    }

    #summaryModal .summary-table th[colspan] {
        background-color: #F3F6F9;
        font-weight: bold;
        padding: 10px;
    }

    #summaryModal .summary-table .sales-erp-header {
        background-color: #ffeeba !important; /* soft amber/yellow */
        color: #856404 !important;
    }

    #summaryModal .summary-table .merchant-header {
        background-color: #b8daff !important; /* soft blue */
        color: #004085 !important;
    }



    #summaryModal .summary-table .total-row {
        background-color: #d4edda;
        color: #06683b;
        font-weight: bold;
    }

    #summaryModal .summary-table th:first-child,
    #summaryModal .summary-table td:first-child {
        width: 20%;
    }

    #summaryModal .summary-table th:nth-child(2),
    #summaryModal .summary-table td:nth-child(2) {
        width: 20%;
    }

    #summaryModal .summary-table th:nth-child(3),
    #summaryModal .summary-table td:nth-child(3) {
        width: 20%;
    }

    #summaryModal .summary-table th:nth-child(4),
    #summaryModal .summary-table td:nth-child(4) {
        width: 20%;
    }

    #summaryModal .summary-table th:last-child,
    #summaryModal .summary-table td:last-child {
        width: 20%;
    }

    /* Additional styling for better appearance */
    #summaryModal .summary-table tbody td:first-child,
    #summaryModal .summary-table tbody td:nth-child(3) {
        text-align: left;
        padding-left: 15px;
    }

    #summaryModal .summary-table tbody td:nth-child(2),
    #summaryModal .summary-table tbody td:nth-child(4) {
        text-align: right;
        padding-right: 15px;
        font-family: monospace;
    }

/* ================================
Dashboard
   ================================ */
.text-success-dashboard {
    color: #00b894;
}

.text-danger-dashboard {
    color: #e17055;
}

.card-action-dashboard {
    border: 1px solid #5670FF80;
    background: #EEF1FF;
}

#monthly .legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 14px;
}

#monthly .legend-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-right: 10px;
}

    #monthly .legend-dot.reconciled {
        background-color: #28a745;
    }

    #monthly .legend-dot.flagged {
        background-color: #ffc107;
    }

    #monthly .legend-dot.unreconciled {
        background-color: #dc3545;
    }

    #monthly .legend-dot.no-data {
        background-color: #6c757d;
    }

#monthly .status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    text-align: center;
}

#monthly .status-item {
    padding: 8px 4px;
}

#monthly .status-percentage {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 4px;
}

    #monthly .status-percentage.reconciled {
        color: #28a745;
    }

    #monthly .status-percentage.flagged {
        color: #ffc107;
    }

    #monthly .status-percentage.unreconciled {
        color: #dc3545;
    }

#monthly .status-label {
    font-size: 12px;
    color: #6c757d;
}

#monthly .calendar-header {
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
}

#monthly .nav-button {
    background: none;
    margin-top: -5px;
    border: none;
    font-size: 40px;
    cursor: pointer;
    padding: 5px 10px;
    color: #495057;
}

    #monthly .nav-button:hover {
        color: #007bff;
    }

#monthly .month-year {
    font-size: 18px;
    font-weight: 600;
    color: #495057;
}

#monthly .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

#monthly .day-header {
    background: transparent;
    padding: 10px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    color: #495057;
}

    #monthly .day-header:last-child {
        border-right: none;
    }

#monthly #calendarBody .calendar-day {
    min-height: 115px;
    height: 80px;
    border-right: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    padding: 8px;
    position: relative;
    cursor: pointer;
    background: #FFFFFF;
    margin: 3px;
}

    #monthly #calendarBody .calendar-day:last-child {
        border-right: none;
    }

    #monthly #calendarBody .calendar-day:hover {
        background-color: #f8f9fa;
    }

    #monthly #calendarBody .calendar-day.other-month {
        background-color: #FFFFFF;
        color: #adb5bd;
        border: 1px solid #dee2e6;
    }

    #monthly #calendarBody .calendar-day.reconciled {
        background-color: #e4fde8;
        border: 1px solid #18BF37;
    }

    #monthly #calendarBody .calendar-day.flagged {
        background-color: #FDFFD1;
        border: 1px solid #B2BB01;
    }

    #monthly #calendarBody .calendar-day.unreconciled {
        background-color: #FFE8E8;
        border: 1px solid #C62929;
    }

    #monthly #calendarBody .calendar-day.no-data {
        background-color: #FAFAFA;
        border: 1px solid #5a6268;
    }

#monthly #calendarBody .day-number {
    font-weight: 600;
    color: #495057;
    font-size: 14px;
    margin-bottom: 8px;
}

#monthly #calendarBody .status-percentage-day {
    font-weight: bold;
    font-size: 14px;
    position: absolute;
    bottom: 8px;
    right: 8px;
}

    #monthly #calendarBody .status-percentage-day.reconciled {
        color: #18BF37;
    }

    #monthly #calendarBody .status-percentage-day.flagged {
        color: #B2BB01;
    }

    #monthly #calendarBody .status-percentage-day.unreconciled {
        color: #C62929;
    }

/* Modal Styles (Specific to #transactionModal) */
/* Modal Styles (Specific to #transactionModal) */

#transactionModal .modal-dialog {
}

#transactionModal .modal-content {
    background-color: white;
    border-radius: 8px;
    overflow-y: auto;
}

#transactionModal .modal-header {
    background: #f8f9fa;
    padding: 15px 20px;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    #transactionModal .modal-header h3 {
        margin: 0;
        font-size: 16px;
        color: #495057;
    }

    #transactionModal .modal-header .btn-close {
        font-size: 18px;
        color: #6c757d;
    }

#transactionModal .modal-body {
    padding: 20px;
}

#transactionModal .modal-overall-status {
    background: #e8f5e8;
    border: 1px solid #c3e6cb;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 20px;
}

    #transactionModal .modal-overall-status h4 {
        font-size: 14px;
        margin-bottom: 10px;
        color: #155724;
    }

#transactionModal .modal-status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    text-align: center;
}

#transactionModal .modal-status-item {
    background: white;
    padding: 10px;
    border-radius: 4px;
}

#transactionModal .modal-status-percentage {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 4px;
}

    #transactionModal .modal-status-percentage.reconciled {
        color: #28a745;
    }

    #transactionModal .modal-status-percentage.flagged {
        color: #ffc107;
    }

    #transactionModal .modal-status-percentage.unreconciled {
        color: #dc3545;
    }

#transactionModal .modal-status-label {
    font-size: 12px;
    color: #6c757d;
}

#transactionModal .reconciliation-by-type {
    margin-top: 20px;
}

    #transactionModal .reconciliation-by-type h4 {
        font-size: 14px;
        margin-bottom: 15px;
        color: #495057;
    }

#transactionModal .type-item {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 10px;
    flex: 0 0 calc(50% - 10px);
    /
}

#transactionModal .type-name {
    font-weight: 600;
    font-size: 14px;
    color: #007bff;
    margin-bottom: 10px;
}

#transactionModal .type-status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    text-align: center;
}

#transactionModal .type-status-item {
    padding: 5px;
}

#transactionModal .reconciliation-by-type .type-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Space between items */
}

#transactionModal .type-status-percentage {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 4px;
}

    #transactionModal .type-status-percentage.reconciled {
        color: #28a745;
    }

    #transactionModal .type-status-percentage.flagged {
        color: #ffc107;
    }

    #transactionModal .type-status-percentage.unreconciled {
        color: #dc3545;
    }

#transactionModal .type-status-label {
    font-size: 11px;
    color: #6c757d;
}

@media (max-width: 768px) {
    #transactionModal .modal-dialog {
        width: 95%;
        margin: 10% auto;
    }
}

@media (max-width: 768px) {
    #monthly .calendar-container {
        margin-left: 0;
        padding: 15px;
    }

    #monthly #calendarBody .calendar-day {
        min-height: 60px;
        height: 60px;
        padding: 4px;
        margin: 2px;
    }

    #monthly #calendarBody .day-number {
        font-size: 12px;
    }

    #monthly #calendarBody .status-percentage-day {
        font-size: 12px;
    }

    #monthly #transactionModal .modal-dialog {
        width: 95%;
        margin: 10% auto;
    }
}

/* Set fixed height for all chart canvases */
#weeklyChart,
#statusChart,
#trendChart,
#overallChart,
#discrepancyChart,
#agingChart {
    height: 400px !important;
    max-height: 350px !important;
}

.rule-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    /* border-color: #007bff;*/
}

/* Make DataTable cards display as grid */
#ruleTable tbody tr,
#ruleTable.dataTable tbody td {
    border-bottom: 0px !important;
}

#ruleTable.dataTable tbody tr:hover {
    background-color: transparent !important;
}

/* Center the modal perfectly on screen */
.modal-dialog-centered {
    display: flex !important;
    align-items: center !important;
    min-height: calc(100% - 1rem) !important;
}

/* Set modal width same as Terminal Master modal */
.custom-history-modal .modal-dialog {
    max-width: 900px !important;
    width: 900px !important;
}

/* Inner spacing for clean alignment */
.custom-history-modal .modal-content {
    border-radius: 8px;
    padding: 10px 20px;
}

/* Table styling to match second screenshot */
.custom-history-modal table th {
    background: #f8f9fa;
    font-weight: 600;
}

.custom-history-modal table td {
    padding: 12px 14px;
    vertical-align: middle;
}

.section-card {
    background: #ffffff !important;
    border: 1px solid #e5e7eb;
    padding: 20px;
    border-radius: 6px;
}
.cursor-pointer {
    cursor: pointer;
}



/*#terminalHistoryModal .modal-content {
    max-width: 900px;
    margin: auto;
}

#terminalHistoryModal table th,
#terminalHistoryModal table td {
    vertical-align: middle;
    padding: 10px 14px;
    font-size: 14px;
}

#terminalHistoryModal table thead th {
    background: #f8f9fa !important;
    font-weight: 600;
    border-bottom: 1px solid #ddd;
}*/


.small-1 {
    font-size: 0.75em;
}

.mt-n1 {
    margin-top: -1rem !important;
}

.mt-n2 {
    margin-top: -3rem !important;
}

.mt-n3 {
    margin-top: -5rem !important;
}

.mt-n4 {
    margin-top: -7rem !important;
}

.mt-n5 {
    margin-top: -9rem !important;
}


.accordion-button:focus {
    z-index: 3;
    outline: 0;
    box-shadow: none;
}

}

div:where(.swal2-icon).swal2-warning {
    border-color: var( --theme) !important;
    color: #f8bb86;
}