:root,
[data-theme="deep-purple-blue"][data-bs-theme="light"] {
    --primary-color: #5B2CFF;
    --primary-rgb: 91, 44, 255;
    --secondary-color: #16215E;
    --secondary-color-rgb: 22, 33, 94;
    --accent-color: #8A6BFF;
    --background-color: #F6F7FC;
    --card-color: #FFFFFF;
    --text-primary-color: #14141F;
    --text-secondary-color: #5B5F7A;
    --card-border-color: rgba(15, 26, 79, 0.10);
    --shadow-color: rgba(15, 26, 79, 0.10);
    --success-color: #1CA65E;
    --danger-color: #E24C6B;
    --warning-color: #E0A020;
    --info-color: #2F8FE0;
    --card-rgb: 255, 255, 255;
    --table-row-even-bg: #F8F9FC;
    --table-row-odd-bg: #FFFFFF;
    --table-hover-bg: #EEF0FA;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(22, 33, 94, 0.06);
    --shadow-md: 0 4px 16px rgba(22, 33, 94, 0.10);
    --shadow-lg: 0 8px 28px rgba(22, 33, 94, 0.14);
}

[data-theme="deep-purple-blue"][data-bs-theme="dark"] {
    --primary-color: #8A7BFF;
    --primary-rgb: 138, 123, 255;
    --secondary-color: #4A3DB0;
    --secondary-color-rgb: 74, 61, 176;
    --accent-color: #6B4CFF;
    --background-color: #0D0E1C;
    --card-color: #161829;
    --text-primary-color: #F2F2F8;
    --text-secondary-color: #B9BCD6;
    --card-border-color: rgba(255, 255, 255, 0.10);
    --shadow-color: rgba(0, 0, 0, 0.35);
    --success-color: #35C57E;
    --danger-color: #F0708C;
    --warning-color: #F0B84A;
    --info-color: #5AA8F0;
    --card-rgb: 22, 24, 41;
    --table-row-even-bg: #1A1B2E;
    --table-row-odd-bg: #141523;
    --table-hover-bg: #232544;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.45);
}


[data-theme="sky-aqua"][data-bs-theme="light"] {
    --primary-color: #0D41E1; 
    --primary-rgb: 13, 65, 225;
    --secondary-color: #0C63E7; 
    --secondary-color-rgb: 12, 99, 231;
    --accent-color: #07C8F9; 
    --background-color: #F0F8FF;
    --card-color: #FFFFFF;
    --text-primary-color: #0A0A0A;
    --text-secondary-color: #555A75;
    --card-border-color: rgba(0, 0, 0, 0.25);
    --shadow-color: rgba(13, 65, 225, 0.1);
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --card-rgb: 255, 255, 255;
}

[data-theme="sky-aqua"][data-bs-theme="dark"] {
    --primary-color: #4361ee; 
    --primary-rgb: 67, 97, 238;
    --secondary-color: #0A85ED; 
    --accent-color: #09A6F3; 
    --background-color: #071129;
    --card-color: #0B1A3D;
    --text-primary-color: #FFFFFF;
    --text-secondary-color: #B7B9CC;
    --card-border-color: rgba(255, 255, 255, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.2);
    --success-color: #20c997;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #0dcaf0;
    --card-rgb: 11, 26, 61;
}


[data-theme="lime-green"][data-bs-theme="light"] {
    --primary-color: #5CB270; 
    --primary-rgb: 92, 178, 112;
    --secondary-color: #82C26E; 
    --accent-color: #CEE26B; 
    --background-color: #F8FFF0;
    --card-color: #FFFFFF;
    --text-primary-color: #0A0A0A;
    --text-secondary-color: #405d42;
    --card-border-color: rgba(0, 0, 0, 0.25);
    --shadow-color: rgba(92, 178, 112, 0.1);
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --card-rgb: 255, 255, 255;
}

[data-theme="lime-green"][data-bs-theme="dark"] {
    --primary-color: #A8D26D; 
    --primary-rgb: 168, 210, 109;
    --secondary-color: #5CB270; 
    --accent-color: #F4F269; 
    --background-color: #1A281A;
    --card-color: #243825;
    --text-primary-color: #FFFFFF;
    --text-secondary-color: #c2dcc3;
    --card-border-color: rgba(255, 255, 255, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.2);
    --success-color: #92e078;
    --danger-color: #dc3545;
    --warning-color: #fce883;
    --info-color: #6a9b00;
    --card-rgb: 36, 56, 37;
}


[data-theme="neon-pink"][data-bs-theme="light"] {
    --primary-color: #7209b7; 
    --primary-rgb: 114, 9, 183;
    --secondary-color: #3f37c9; 
    --accent-color: #f72585; 
    --background-color: #F8F5FF;
    --card-color: #FFFFFF;
    --text-primary-color: #0A0A0A;
    --text-secondary-color: #5c587a;
    --card-border-color: rgba(0, 0, 0, 0.25);
    --shadow-color: rgba(114, 9, 183, 0.1);
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --card-rgb: 255, 255, 255;
}

[data-theme="neon-pink"][data-bs-theme="dark"] {
    --primary-color: #b5179e; 
    --primary-rgb: 181, 23, 158;
    --secondary-color: #560bad; 
    --accent-color: #4cc9f0; 
    --background-color: #190226;
    --card-color: #2a0440;
    --text-primary-color: #FFFFFF;
    --text-secondary-color: #d1b8e0;
    --card-border-color: rgba(255, 255, 255, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.2);
    --success-color: #00ff7f;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #4cc9f0;
    --card-rgb: 42, 4, 64;
}


[data-theme="mint-leaf"][data-bs-theme="light"] {
    --primary-color: #2d6a4f; 
    --primary-rgb: 45, 106, 79;
    --secondary-color: #1b4332; 
    --accent-color: #52b788; 
    --background-color: #F8FCFF;
    --card-color: #FFFFFF;
    --text-primary-color: #081c15;
    --text-secondary-color: #2d6a4f;
    --card-border-color: rgba(0, 0, 0, 0.25);
    --shadow-color: rgba(27, 67, 50, 0.1);
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --card-rgb: 255, 255, 255;
}

[data-theme="mint-leaf"][data-bs-theme="dark"] {
    --primary-color: #74c69d; 
    --primary-rgb: 116, 198, 157;
    --secondary-color: #40916c; 
    --accent-color: #95d5b2; 
    --background-color: #081c15; 
    --card-color: #1b4332; 
    --text-primary-color: #d8f3dc;
    --text-secondary-color: #95d5b2;
    --card-border-color: rgba(255, 255, 255, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.2);
    --success-color: #38a86a;
    --danger-color: #dc3545;
    --warning-color: #e0ac1a;
    --info-color: #95d5b2;
    --card-rgb: 27, 67, 50;
}


[data-theme="forest"][data-bs-theme="light"] {
    --primary-color: #245501; 
    --primary-rgb: 36, 85, 1;
    --secondary-color: #143601; 
    --accent-color: #73a942; 
    --background-color: #FBFFF8;
    --card-color: #FFFFFF;
    --text-primary-color: #143601;
    --text-secondary-color: #538d22;
    --card-border-color: rgba(0, 0, 0, 0.25);
    --shadow-color: rgba(36, 85, 1, 0.1);
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --card-rgb: 255, 255, 255;
}

[data-theme="forest"][data-bs-theme="dark"] {
    --primary-color: #73a942; 
    --primary-rgb: 115, 169, 66;
    --secondary-color: #538d22; 
    --accent-color: #aad576; 
    --background-color: #143601; 
    --card-color: #1a4301; 
    --text-primary-color: #FFFFFF;
    --text-secondary-color: #aad576;
    --card-border-color: rgba(255, 255, 255, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.2);
    --success-color: #6a9b47;
    --danger-color: #dc3545;
    --warning-color: #f1c40f;
    --info-color: #aad576;
    --card-rgb: 26, 67, 1;
}


[data-theme="rainbow"][data-bs-theme="light"] {
    --primary-color: #54478c; 
    --primary-rgb: 84, 71, 140;
    --secondary-color: #2c699a; 
    --accent-color: #16db93; 
    --background-color: #F8F9FF;
    --card-color: #FFFFFF;
    --text-primary-color: #0A0A0A;
    --text-secondary-color: #54478c;
    --card-border-color: rgba(0, 0, 0, 0.25);
    --shadow-color: rgba(84, 71, 140, 0.1);
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --card-rgb: 255, 255, 255;
}

[data-theme="rainbow"][data-bs-theme="dark"] {
    --primary-color: #83e377; 
    --primary-rgb: 131, 227, 119;
    --secondary-color: #0db39e; 
    --accent-color: #efea5a; 
    --background-color: #071017;
    --card-color: #0C1D33;
    --text-primary-color: #FFFFFF;
    --text-secondary-color: #b9e769;
    --card-border-color: rgba(255, 255, 255, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.2);
    --success-color: #58c9b9;
    --danger-color: #dc3545;
    --warning-color: #f1c453;
    --info-color: #0db39e;
    --card-rgb: 12, 29, 51;
}




html {
    min-height: 100vh;
    background-color: var(--background-color);
    color: var(--text-primary-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

body {
    min-height: 100vh;
    font-family: 'Poppins', sans-serif;
    background-color: transparent;
    color: inherit;
    margin-top: 50px;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary-color);
}



a {
    color: var(--primary-color);
    text-decoration: none;
}
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}

.btn-primary:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

.text-primary {
    color: var(--primary-color) !important;
}

.bg-body-tertiary {
    background-color: var(--card-color) !important;
}

[data-bs-theme="dark"] .bg-body-tertiary {
    background-color: var(--card-color) !important;
}




.bg-gradient-primary-accent {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: white;
}
.bg-gradient-primary-accent h1,
.bg-gradient-primary-accent h2,
.bg-gradient-primary-accent h3,
.bg-gradient-primary-accent h4,
.bg-gradient-primary-accent p,
.bg-gradient-primary-accent small {
    color: white !important;
}

.bg-gradient-secondary-primary {
    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
}


[data-bs-theme="light"] .bg-gradient-secondary-primary,
[data-bs-theme="light"] .bg-gradient-secondary-primary h1,
[data-bs-theme="light"] .bg-gradient-secondary-primary h2,
[data-bs-theme="light"] .bg-gradient-secondary-primary h3,
[data-bs-theme="light"] .bg-gradient-secondary-primary h4,
[data-bs-theme="light"] .bg-gradient-secondary-primary h5,
[data-bs-theme="light"] .bg-gradient-secondary-primary p {
    color: #FFFFFF;
}


[data-bs-theme="dark"] .bg-gradient-secondary-primary,
[data-bs-theme="dark"] .bg-gradient-secondary-primary h1,
[data-bs-theme="dark"] .bg-gradient-secondary-primary h2,
[data-bs-theme="dark"] .bg-gradient-secondary-primary h3,
[data-bs-theme="dark"] .bg-gradient-secondary-primary h4,
[data-bs-theme="dark"] .bg-gradient-secondary-primary h5,
[data-bs-theme="dark"] .bg-gradient-secondary-primary p {
    color: var(--text-primary-color);
}


.glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

[data-bs-theme="light"] .glass-card {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.7);
}


.navbar {
    
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);

    box-shadow: 0 2px 10px var(--shadow-color);
    min-height: 70px;
    padding-top: 0;
    padding-bottom: 0;
}


.navbar-nav .dropdown-menu {
    min-width: 280px; 
    max-height: calc(100vh - 150px); 
    overflow-y: auto;
    padding: 10px;
    border-radius: 0.5rem;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    background-color: var(--card-color);
    border: 1px solid var(--card-border-color);
}

.navbar-nav .dropdown-item {
    display: flex; 
    align-items: center; 
    padding: 0.75rem 1rem;
    white-space: normal; 
    color: var(--text-primary-color);
}

.navbar-nav .dropdown-item:hover {
    background-color: var(--background-color); 
    color: var(--primary-color);
}

.navbar-nav .dropdown-item i {
    font-size: 1.2rem; 
    color: var(--primary-color); 
}

.navbar-nav .dropdown-item div {
    flex-grow: 1; 
    margin-left: 0.75rem; 
}

.navbar-nav .dropdown-item span {
    font-weight: 500; 
    color: var(--text-primary-color);
}

.navbar-nav .dropdown-item small {
    font-size: 0.8em;
    color: var(--text-secondary-color);
}

.navbar-nav .dropdown-item:hover span,
.navbar-nav .dropdown-item:hover small {
    color: var(--text-primary-color); 
}

.navbar-nav .dropdown-item:hover i {
    color: var(--accent-color); 
}

.accordion-button {
    background-color: var(--card-color);
    color: var(--text-primary-color);
}

.accordion-button:not(.collapsed) {
    background-color: var(--background-color);
    color: var(--primary-color);
}

.accordion-body {
    background-color: var(--card-color);
}




.hero-section {
    position: relative; 
    overflow: hidden; 
    padding: 6rem 0;
}

.hero-section::before,
.hero-section::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.15;
    z-index: -1;
}

.hero-section::before {
    width: 400px;
    height: 400px;
    background: var(--primary-color);
    top: -100px;
    left: -100px;
    animation: pulse 12s infinite alternate; 
}

.hero-section::after {
    width: 300px;
    height: 300px;
    background: var(--accent-color);
    bottom: -50px;
    right: -50px;
    animation: pulse 8s infinite alternate;
}

@keyframes pulse {
    0% {
        transform: scale(0.8);
    }
    100% {
        transform: scale(1.1);
    }
}

.hero-section .display-4 {
    color: var(--text-primary-color);
}
.hero-section .lead {
    color: var(--text-secondary-color);
}


.feature-card-v2 {
    background-color: var(--card-color);
    border: 1px solid var(--card-border-color);
    box-shadow: 0 4px 15px var(--shadow-color); 
    position: relative; 
    overflow: hidden; 
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.feature-card-v2:hover {
    background-color: color-mix(in srgb, var(--card-color) 90%, var(--primary-color) 10%);
}


.feature-card-v2::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    transform: skewX(-20deg);
    transition: all 0.7s ease;
    opacity: 0;
    z-index: 1;
}
.feature-card-v2:hover::before {
    left: 125%;
    opacity: 1;
}

.feature-icon-box-v2 {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: rgba(var(--primary-rgb), 0.1); 
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.feature-card-v2:hover .feature-icon-box-v2 {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: white;
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 10px 20px var(--shadow-color);
}


.pricing-card-v2.recommended {
    border: 2px solid var(--primary-color) !important;
    position: relative;
    transform: scale(1.02);
    z-index: 1;
}

[data-bs-theme="dark"] .pricing-card-v2.recommended {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border: none !important;
}

[data-bs-theme="dark"] .pricing-card-v2.recommended .card-header {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .pricing-card-v2.recommended .card-header h4,
[data-bs-theme="dark"] .pricing-card-v2.recommended .card-title, 
[data-bs-theme="dark"] .pricing-card-v2.recommended small,
[data-bs-theme="dark"] .pricing-card-v2.recommended li {
    color: white !important;
}

[data-bs-theme="light"] .pricing-card-v2.recommended .card-header {
    background-color: var(--primary-color) !important;
}

[data-bs-theme="light"] .pricing-card-v2.recommended .card-header h4 {
    color: white !important;
}

.btn-recommended {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: white !important;
}

[data-bs-theme="dark"] .btn-recommended {
    background-color: #f8f9fa !important;
    border-color: #f8f9fa !important;
    color: #212529 !important;
}


.blog-card-v2 .card-footer {
    background-color: transparent;
    border-top: 1px solid var(--card-border-color);
    color: var(--text-secondary-color);
}


[data-bs-theme="dark"] body {
    background: transparent !important;
    color: var(--text-primary-color);
}

canvas#animated-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
    pointer-events: none; 
}


.card, .product-card, .pricing-card-v2 {
    backdrop-filter: blur(8px);
    background-color: var(--card-color-transparent, rgba(var(--card-rgb), 0.8)) !important;
}


:root {
    --card-rgb: 255, 255, 255;
    --card-color-transparent: rgba(255, 255, 255, 0.7);
}

[data-bs-theme="dark"] {
    --card-rgb: 20, 21, 35;
    --card-color-transparent: rgba(20, 21, 35, 0.7);
}



.footer-link {
    color: var(--text-secondary-color) !important;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-link:hover {
    color: var(--primary-color) !important;
    text-decoration: underline !important;
}

[data-bs-theme="dark"] .footer-link {
    color: var(--text-secondary-color) !important;
}

[data-bs-theme="dark"] .footer-link:hover {
    color: var(--primary-color) !important;
}



.product-card {
    background-color: var(--card-color);
    border: 1px solid var(--card-border-color);
    border-radius: 1rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px var(--shadow-color);
}


.login-left-panel {
    background-size: cover !important;
    background-position: center !important;
    min-height: 400px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 0.5rem 0 0 0.5rem; 
}

.login-overlay {
    
    background-color: rgba(0, 0, 0, 0.6) !important; 
    color: white !important; 
    border-radius: 0.5rem 0 0 0.5rem;
}

.login-overlay .logo-container img {
    
    filter: invert(1) brightness(2); 
}

.login-overlay .logo-container .separator {
    color: white !important; 
}


.product-card .icon-container {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem auto; 
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem; 
    color: var(--primary-color); 
    border-radius: 50%;
    background-color: var(--background-color); 
}

.product-card h4 {
    color: var(--text-primary-color);
    margin-bottom: 0.5rem;
}

.product-card p {
    color: var(--text-secondary-color);
}

.navbar .nav-link {
    position: relative;
    color: var(--text-primary-color); 
}


.navbar .dropdown-toggle::after {
    display: none !important;
}


.navbar .dropdown-toggle .fa-chevron-down {
    transition: transform 0.3s ease;
    display: inline-block;
}

.navbar .dropdown-toggle[aria-expanded="true"] .fa-chevron-down,
.navbar .show > .dropdown-toggle .fa-chevron-down {
    transform: rotate(180deg);
}

.navbar .nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width 0.3s ease-out;
}

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


.navbar .nav-link.active::after {
    width: 100%;
    background-color: var(--accent-color);
}


.navbar-brand .text-primary {
    color: var(--primary-color) !important;
}

.navbar-brand .fw-light {
    color: var(--text-primary-color) !important;
}

.theme-carousel-caption {
    background-color: rgba(var(--card-rgb), 0.5); 
}


.text-success {
    color: var(--success-color) !important;
}
.text-danger {
    color: #b63f45 !important;
}

.list-group-item {
    background-color: var(--card-color);
    color: var(--text-primary-color);
    border-color: var(--card-border-color); 
}


.timeline {
    list-style: none;
    padding: 20px 0 20px;
    position: relative;
}
.timeline:before {
    top: 0;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 3px;
    background-color: var(--card-border-color); 
    left: 50%;
    margin-left: -1.5px;
}
.timeline > li {
    margin-bottom: 20px;
    position: relative;
}
.timeline > li:before,
.timeline > li:after {
    content: " ";
    display: table;
}
.timeline > li:after {
    clear: both;
}
.timeline > li > .timeline-panel {
    width: 46%;
    float: left;
    border: 1px solid var(--card-border-color); 
    border-radius: 2px;
    padding: 20px;
    position: relative;
    box-shadow: 0 1px 6px var(--shadow-color); 
    background-color: var(--card-color); 
}
.timeline > li > .timeline-panel:before {
    position: absolute;
    top: 26px;
    right: -15px;
    display: inline-block;
    border-top: 15px solid transparent;
    border-left: 15px solid var(--card-border-color); 
    border-right: 0 solid var(--card-border-color);
    border-bottom: 15px solid transparent;
    content: " ";
}
.timeline > li > .timeline-panel:after {
    position: absolute;
    top: 27px;
    right: -14px;
    display: inline-block;
    border-top: 14px solid transparent;
    border-left: 14px solid var(--card-color); 
    border-right: 0 solid var(--card-color);
    border-bottom: 14px solid transparent;
    content: " ";
}
.timeline > li > .timeline-badge {
    color: white;
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
    text-align: center;
    position: absolute;
    top: 16px;
    left: 50%;
    margin-left: -25px;
    background-color: var(--primary-color); 
    z-index: 100;
    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
}

.timeline > li.timeline-inverted > .timeline-panel {
    float: right;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
    border-left-width: 0;
    border-right-width: 15px;
    left: -15px;
    right: auto;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
    border-left-width: 0;
    border-right-width: 14px;
    left: -14px;
    right: auto;
}
.timeline-badge.primary {
    background-color: var(--primary-color) !important;
}
.timeline-badge.success {
    background-color: var(--success-color) !important;
}
.timeline-badge.warning {
    background-color: var(--warning-color) !important; 
}
.timeline-badge.danger {
    background-color: var(--danger-color) !important;
}
.timeline-badge.info {
    background-color: var(--info-color) !important; 
}
.timeline-title {
    margin-top: 0;
    color: inherit;
}


.blog-sidebar-links a {
    color: var(--text-secondary-color);
    text-decoration: none;
    transition: all 0.3s ease;
}

.blog-sidebar-links a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}





.feature-card-v2,
.product-card,
.pricing-card-v2,
.card-dashboard {
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover:not(.feature-card-v2):not(.product-card):not(.pricing-card-v2) {
    box-shadow: 0 10px 20px var(--shadow-color);
}



[data-theme="sunset-vibes"][data-bs-theme="light"] {
    --primary-color: #FF6B6B; 
    --primary-rgb: 255, 107, 107;
    --secondary-color: #C44D56;
    --secondary-color-rgb: 196, 77, 86;
    --accent-color: #FFD93D; 
    --background-color: #FFF5F5;
    --card-color: #FFFFFF;
    --text-primary-color: #4A4A4A;
    --text-secondary-color: #878787;
    --card-border-color: rgba(var(--primary-rgb), 0.2);
    --shadow-color: rgba(255, 107, 107, 0.1);
    --card-rgb: 255, 255, 255;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
}

[data-theme="sunset-vibes"][data-bs-theme="dark"] {
    --primary-color: #FF8E8E;
    --primary-rgb: 255, 142, 142;
    --secondary-color: #FF6B6B;
    --accent-color: #FFE66D;
    --background-color: #2D1B2E; 
    --card-color: #432C44;
    --text-primary-color: #FFF0F0;
    --text-secondary-color: #D1C4D1;
    --card-border-color: rgba(255, 142, 142, 0.2);
    --shadow-color: rgba(0, 0, 0, 0.3);
    --card-rgb: 67, 44, 68;
    --success-color: #198754;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #0dcaf0;
}


[data-theme="ocean-breeze"][data-bs-theme="light"] {
    --primary-color: #48CAE4; 
    --primary-rgb: 72, 202, 228;
    --secondary-color: #0096C7;
    --accent-color: #ADE8F4;
    --background-color: #F0FBFC;
    --card-color: #FFFFFF;
    --text-primary-color: #023E8A;
    --text-secondary-color: #5C7C8A;
    --card-border-color: rgba(var(--primary-rgb), 0.25);
    --shadow-color: rgba(72, 202, 228, 0.1);
    --card-rgb: 255, 255, 255;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
}

[data-theme="ocean-breeze"][data-bs-theme="dark"] {
    --primary-color: #48CAE4;
    --primary-rgb: 72, 202, 228;
    --secondary-color: #0077B6;
    --accent-color: #90E0EF;
    --background-color: #03045E; 
    --card-color: #001845;
    --text-primary-color: #CAF0F8;
    --text-secondary-color: #90E0EF;
    --card-border-color: rgba(72, 202, 228, 0.2);
    --shadow-color: rgba(0, 0, 0, 0.3);
    --card-rgb: 0, 24, 69;
    --success-color: #20c997;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #0dcaf0;
}


[data-theme="cherry-blossom"][data-bs-theme="light"] {
    --primary-color: #FFB7B2; 
    --primary-rgb: 255, 183, 178;
    --secondary-color: #FF9E99;
    --accent-color: #FFDAC1;
    --background-color: #FFF9F9;
    --card-color: #FFFFFF;
    --text-primary-color: #6D6875;
    --text-secondary-color: #B5B0BA;
    --card-border-color: rgba(var(--primary-rgb), 0.3);
    --shadow-color: rgba(255, 183, 178, 0.1);
    --card-rgb: 255, 255, 255;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
}

[data-theme="cherry-blossom"][data-bs-theme="dark"] {
    --primary-color: #FFC8C5;
    --primary-rgb: 255, 200, 197;
    --secondary-color: #E29587;
    --accent-color: #FFDAC1;
    --background-color: #2F242C; 
    --card-color: #4A3B45;
    --text-primary-color: #FFF0F5;
    --text-secondary-color: #D8C8D0;
    --card-border-color: rgba(255, 200, 197, 0.2);
    --shadow-color: rgba(0, 0, 0, 0.3);
    --card-rgb: 74, 59, 69;
    --success-color: #00ff7f;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #4cc9f0;
}


[data-theme="coffee-roast"][data-bs-theme="light"] {
    --primary-color: #6F4E37; 
    --primary-rgb: 111, 78, 55;
    --secondary-color: #4B3621;
    --accent-color: #A67B5B;
    --background-color: #FDFBF7;
    --card-color: #FFFFFF;
    --text-primary-color: #3E2723;
    --text-secondary-color: #795548;
    --card-border-color: rgba(var(--primary-rgb), 0.2);
    --shadow-color: rgba(111, 78, 55, 0.1);
    --card-rgb: 255, 255, 255;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
}

[data-theme="coffee-roast"][data-bs-theme="dark"] {
    --primary-color: #D7CCC8; 
    --primary-rgb: 215, 204, 200;
    --secondary-color: #A1887F;
    --accent-color: #8D6E63;
    --background-color: #3E2723; 
    --card-color: #4E342E;
    --text-primary-color: #EFEBE9;
    --text-secondary-color: #BCAAA4;
    --card-border-color: rgba(215, 204, 200, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.3);
    --card-rgb: 78, 52, 46;
    --success-color: #92e078;
    --danger-color: #dc3545;
    --warning-color: #fce883;
    --info-color: #6a9b00;
}


[data-theme="midnight-city"][data-bs-theme="light"] {
    --primary-color: #4361EE; 
    --primary-rgb: 67, 97, 238;
    --secondary-color: #3A0CA3;
    --accent-color: #7209B7;
    --background-color: #F2F4FF;
    --card-color: #FFFFFF;
    --text-primary-color: #1A1A2E;
    --text-secondary-color: #555575;
    --card-border-color: rgba(var(--primary-rgb), 0.2);
    --shadow-color: rgba(67, 97, 238, 0.1);
    --card-rgb: 255, 255, 255;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
}

[data-theme="midnight-city"][data-bs-theme="dark"] {
    --primary-color: #4CC9F0; 
    --primary-rgb: 76, 201, 240;
    --secondary-color: #4361EE;
    --accent-color: #F72585; 
    --background-color: #050511; 
    --card-color: #0F0F29;
    --text-primary-color: #FFFFFF;
    --text-secondary-color: #A9A9C9;
    --card-border-color: rgba(76, 201, 240, 0.2);
    --shadow-color: rgba(0, 0, 0, 0.5);
    --card-rgb: 15, 15, 41;
    --success-color: #00ff7f;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #4cc9f0;
}


[data-theme="earthy-sage"][data-bs-theme="light"] {
    --primary-color: #588157; 
    --primary-rgb: 88, 129, 87;
    --secondary-color: #3A5A40;
    --accent-color: #A3B18A;
    --background-color: #F3F7F0;
    --card-color: #FFFFFF;
    --text-primary-color: #344E41;
    --text-secondary-color: #588157;
    --card-border-color: rgba(88, 129, 87, 0.35);
    --shadow-color: rgba(88, 129, 87, 0.1);
    --card-rgb: 255, 255, 255;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
}

[data-theme="earthy-sage"][data-bs-theme="dark"] {
    --primary-color: #A3B18A; 
    --primary-rgb: 163, 177, 138;
    --secondary-color: #8C9E78;
    --accent-color: #DAD7CD;
    --background-color: #1A241D; 
    --card-color: #29382D;
    --text-primary-color: #F0F4EF;
    --text-secondary-color: #A3B18A;
    --card-border-color: rgba(163, 177, 138, 0.15);
    --shadow-color: rgba(0, 0, 0, 0.3);
    --card-rgb: 41, 56, 45;
    --success-color: #92e078;
    --danger-color: #dc3545;
    --warning-color: #fce883;
    --info-color: #6a9b00;
}


[data-theme="royal-gold"][data-bs-theme="light"] {
    --primary-color: #14213D; 
    --primary-rgb: 20, 33, 61;
    --secondary-color: #000000;
    --accent-color: #FCA311; 
    --background-color: #F4F6F8;
    --card-color: #FFFFFF;
    --text-primary-color: #14213D;
    --text-secondary-color: #4A5568;
    --card-border-color: rgba(20, 33, 61, 0.1);
    --shadow-color: rgba(20, 33, 61, 0.1);
    --card-rgb: 255, 255, 255;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
}

[data-theme="royal-gold"][data-bs-theme="dark"] {
    --primary-color: #FCA311; 
    --primary-rgb: 252, 163, 17;
    --secondary-color: #E5E5E5;
    --accent-color: #FFFFFF;
    --background-color: #000000; 
    --card-color: #14213D; 
    --text-primary-color: #FFFFFF;
    --text-secondary-color: #E5E5E5;
    --card-border-color: rgba(252, 163, 17, 0.3);
    --shadow-color: rgba(0, 0, 0, 0.5);
    --card-rgb: 20, 33, 61;
    --success-color: #58c9b9;
    --danger-color: #dc3545;
    --warning-color: #f1c453;
    --info-color: #0db39e;
}


[data-theme="lavender-dream"][data-bs-theme="light"] {
    --primary-color: #9D4EDD; 
    --primary-rgb: 157, 78, 221;
    --secondary-color: #7B2CBF;
    --accent-color: #C77DFF;
    --background-color: #F8F4FF;
    --card-color: #FFFFFF;
    --text-primary-color: #3C096C;
    --text-secondary-color: #7B2CBF;
    --card-border-color: rgba(157, 78, 221, 0.1);
    --shadow-color: rgba(157, 78, 221, 0.1);
    --card-rgb: 255, 255, 255;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
}

[data-theme="lavender-dream"][data-bs-theme="dark"] {
    --primary-color: #C77DFF; 
    --primary-rgb: 199, 125, 255;
    --secondary-color: #E0AAFF;
    --accent-color: #9D4EDD;
    --background-color: #240046; 
    --card-color: #3C096C;
    --text-primary-color: #F8F4FF;
    --text-secondary-color: #E0AAFF;
    --card-border-color: rgba(199, 125, 255, 0.2);
    --shadow-color: rgba(0, 0, 0, 0.3);
    --card-rgb: 60, 9, 108;
    --success-color: #00ff7f;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #4cc9f0;
}


[data-theme="slate-stone"][data-bs-theme="light"] {
    --primary-color: #455A64; 
    --primary-rgb: 69, 90, 100;
    --secondary-color: #263238;
    --accent-color: #78909C;
    --background-color: #F1F5F7;
    --card-color: #FFFFFF;
    --text-primary-color: #263238;
    --text-secondary-color: #607D8B;
    --card-border-color: rgba(69, 90, 100, 0.1);
    --shadow-color: rgba(69, 90, 100, 0.1);
    --card-rgb: 255, 255, 255;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
}

[data-theme="slate-stone"][data-bs-theme="dark"] {
    --primary-color: #90A4AE; 
    --primary-rgb: 144, 164, 174;
    --secondary-color: #B0BEC5;
    --accent-color: #607D8B;
    --background-color: #1A2125; 
    --card-color: #263238;
    --text-primary-color: #ECEFF1;
    --text-secondary-color: #CFD8DC;
    --card-border-color: rgba(144, 164, 174, 0.2);
    --shadow-color: rgba(0, 0, 0, 0.4);
    --card-rgb: 38, 50, 56;
    --success-color: #58c9b9;
    --danger-color: #dc3545;
    --warning-color: #f1c453;
    --info-color: #0db39e;
}


[data-theme="autumn-leaves"][data-bs-theme="light"] {
    --primary-color: #D35400; 
    --primary-rgb: 211, 84, 0;
    --secondary-color: #E67E22;
    --accent-color: #F39C12;
    --background-color: #FEF9E7;
    --card-color: #FFFFFF;
    --text-primary-color: #6E2C00;
    --text-secondary-color: #A04000;
    --card-border-color: rgba(211, 84, 0, 0.1);
    --shadow-color: rgba(211, 84, 0, 0.1);
    --card-rgb: 255, 255, 255;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
}

[data-theme="autumn-leaves"][data-bs-theme="dark"] {
    --primary-color: #F39C12; 
    --primary-rgb: 243, 156, 18;
    --secondary-color: #E67E22;
    --accent-color: #D35400;
    --background-color: #2E1503; 
    --card-color: #4E2706;
    --text-primary-color: #FEF9E7;
    --text-secondary-color: #F5CBA7;
    --card-border-color: rgba(243, 156, 18, 0.2);
    --shadow-color: rgba(0, 0, 0, 0.3);
    --card-rgb: 78, 39, 6;
    --success-color: #58c9b9;
    --danger-color: #dc3545;
    --warning-color: #f1c453;
    --info-color: #0db39e;
}





.btn {
    border-radius: 8px; 
    padding: 6px 16px; 
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: 0.2px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important; 
    border: 1px solid rgba(0, 0, 0, 0.1) !important; 
}

[data-bs-theme='dark'] .btn {
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.btn:focus, .btn:active {
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25) !important;
    outline: none !important;
}

.btn-primary {
    background: linear-gradient(135deg, #457085, #57646a) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3) !important;
}

.btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(var(--primary-rgb), 0.4) !important;
    background: linear-gradient(135deg, var(--accent-color), var(--primary-color)) !important; 
}

.btn-secondary {
    background-color: #f1f3f5 !important;
    color: #495057 !important;
    box-shadow: none !important;
}

.btn-secondary:hover {
    background-color: #e9ecef !important;
    color: #212529 !important;
    transform: translateY(-1px) !important;
}

[data-bs-theme="dark"] .btn-secondary {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #e9ecef !important;
}

[data-bs-theme="dark"] .btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
}


.form-control, .select2-container--default .select2-selection--single, .select2-selection {
    border-radius: 8px !important;
    border: 1px solid var(--card-border-color) !important;
    background-color: var(--background-color) !important; 
    color: var(--text-primary-color) !important;
    padding: 0.6rem 1rem !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    height: auto !important; 
    min-height: 38px !important;
}

.form-control:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15) !important;
    background-color: var(--card-color) !important;
}


.card {
    border: none !important; 
    border-radius: 12px !important;
    box-shadow: 0 5px 20px var(--shadow-color) !important; 
    background-color: var(--card-color) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.card-header {
    background-color: transparent !important;
    border-bottom: 1px solid var(--card-border-color) !important;
    padding: 1.25rem 1.5rem !important;
}

.card-header h4 {
    margin-bottom: 0 !important;
    font-weight: 600 !important;
    color: var(--primary-color) !important;
    font-size: 1.1rem !important;
    border-bottom: none !important; 
    padding-bottom: 0 !important;
}


.nav-tabs {
    border-bottom: 2px solid var(--card-border-color) !important;
    gap: 10px !important;
    padding-bottom: 5px !important;
}

.nav-tabs .nav-link {
    border: none !important;
    border-radius: 8px !important;
    color: var(--text-secondary-color) !important;
    font-weight: 500 !important;
    padding: 0.7rem 1.2rem !important;
    transition: all 0.2s !important;
    background-color: transparent !important;
}

.nav-tabs .nav-link:hover {
    color: var(--primary-color) !important;
    background-color: rgba(var(--primary-rgb), 0.05) !important;
}

.nav-tabs .nav-link.active {
    color: #fff !important;
    background-color: var(--primary-color) !important;
    box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.3) !important;
}


input[type="checkbox"] {
    accent-color: var(--primary-color) !important;
    width: 1.1rem !important;
    height: 1.1rem !important;
    cursor: pointer !important;
    margin-top: 0 !important; 
    vertical-align: middle !important;
}


.settings-form-section {
    background-color: rgba(var(--primary-rgb), 0.03) !important;
    border-radius: 10px !important;
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    border: 1px solid var(--card-border-color) !important;
}

.settings-form-section h4 {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 1rem !important;
    font-size: 1.1rem !important;
    color: var(--text-primary-color) !important;
    display: flex !important;
    align-items: center !important;
}

.settings-form-section h4::before {
    content: "" !important;
    display: inline-block !important;
    width: 4px !important;
    height: 18px !important;
    background-color: var(--primary-color) !important;
    margin-right: 10px !important;
    border-radius: 2px !important;
}


.select2-container .select2-selection--single {
    height: 42px !important;
    padding-top: 6px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
}













.navbar {
    background-color: rgba(var(--card-rgb), 0.75) !important;
    backdrop-filter: blur(15px) saturate(160%);
    -webkit-backdrop-filter: blur(15px) saturate(160%);
    border-bottom: 1px solid rgba(var(--card-rgb), 0.1) !important;
    box-shadow: 0 4px 15px var(--shadow-color) !important;
    padding: 0.5rem 1.5rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 1030;
}

[data-bs-theme="dark"] .navbar {
    background-color: rgba(var(--card-rgb), 0.65) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.navbar-brand {
    font-weight: 700 !important;
    letter-spacing: -0.5px;
    transition: transform 0.2s ease !important;
}

.navbar-brand:hover {
    transform: scale(1.02);
}

.nav-link {
    font-weight: 500 !important;
    color: var(--text-primary-color) !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
    position: relative;
}

.nav-link:hover {
    color: var(--primary-color) !important;
}


.nav-link.active::after {
    content: "";
    position: absolute;
    bottom: 5px;
    left: 15%;
    right: 15%;
    height: 3px;
    background-color: var(--primary-color);
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(var(--primary-rgb), 0.4);
}


.navbar .dropdown-menu {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    padding: 0.8rem !important;
    background-color: var(--card-color) !important;
    margin-top: 10px !important;
}

[data-bs-theme="dark"] .navbar .dropdown-menu {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}



[data-theme="mocha-mousse"][data-bs-theme="light"] {
    --primary-color: #9E7A4D; 
    --primary-rgb: 158, 122, 77;
    --secondary-color: #5F5C57; 
    --secondary-color-rgb: 95, 92, 87;
    --accent-color: #A9B2A3; 
    --background-color: #F9F7F4; 
    --card-color: #FFFFFF;
    --text-primary-color: #5F5C57;
    --text-secondary-color: #8C8984;
    --card-border-color: rgba(158, 122, 77, 0.1);
    --shadow-color: rgba(158, 122, 77, 0.1);
    --card-rgb: 255, 255, 255;
    --success-color: #A9B2A3; 
}

[data-theme="mocha-mousse"][data-bs-theme="dark"] {
    --primary-color: #A47864; 
    --primary-rgb: 164, 120, 100;
    --secondary-color: #D8CBB8; 
    --secondary-color-rgb: 216, 203, 184;
    --accent-color: #BC8A73; 
    --background-color: #1A1A1A; 
    --card-color: #262626; 
    --text-primary-color: #D8CBB8;
    --text-secondary-color: #A49E96;
    --card-border-color: rgba(164, 120, 100, 0.2);
    --shadow-color: rgba(0, 0, 0, 0.3);
    --card-rgb: 38, 38, 38;
    --success-color: #BC8A73; 
}


[data-theme="future-dusk"][data-bs-theme="light"] {
    --primary-color: #003F75; 
    --primary-rgb: 0, 63, 117;
    --secondary-color: #1A1A1A; 
    --accent-color: #0FACB0; 
    --background-color: #FFFFFF; 
    --card-color: #F5F7FA; 
    --text-primary-color: #1A1A1A;
    --text-secondary-color: #555555;
    --card-border-color: rgba(0, 63, 117, 0.1);
    --shadow-color: rgba(0, 63, 117, 0.1);
    --card-rgb: 245, 247, 250;
    --info-color: #0FACB0; 
}

[data-theme="future-dusk"][data-bs-theme="dark"] {
    --primary-color: #2884BD; 
    --primary-rgb: 40, 132, 189;
    --secondary-color: #B0B6BB; 
    --accent-color: #0FACB0; 
    --background-color: #1E1E1E; 
    --card-color: #252525;
    --text-primary-color: #B0B6BB;
    --text-secondary-color: #7A7F85;
    --card-border-color: rgba(40, 132, 189, 0.2);
    --shadow-color: rgba(0, 0, 0, 0.4);
    --card-rgb: 37, 37, 37;
    --danger-color: #a11219; 
}


[data-theme="digital-lavender"][data-bs-theme="light"] {
    --primary-color: #A78BFA; 
    --primary-rgb: 167, 139, 250;
    --secondary-color: #D6B8EB; 
    --secondary-color-rgb: 214, 184, 235;
    --accent-color: #D6B8EB;
    --background-color: #F7F6D3; 
    --card-color: #FFFFFF;
    --text-primary-color: #1B211A; 
    --text-secondary-color: #4A5248;
    --card-border-color: rgba(167, 139, 250, 0.15);
    --shadow-color: rgba(167, 139, 250, 0.1);
    --card-rgb: 255, 255, 255;
    --info-color: #D6B8EB; 
}

[data-theme="digital-lavender"][data-bs-theme="dark"] {
    --primary-color: #8A2BE2; 
    --primary-rgb: 138, 43, 226;
    --secondary-color: #EAE1D7; 
    --accent-color: #FFD23F; 
    --background-color: #121212; 
    --card-color: #1F1F1F;
    --text-primary-color: #EAE1D7;
    --text-secondary-color: #B0A8A0;
    --card-border-color: rgba(138, 43, 226, 0.2);
    --shadow-color: rgba(0, 0, 0, 0.4);
    --card-rgb: 31, 31, 31;
    --warning-color: #FFD23F; 
}


[data-theme="soft-dark"][data-bs-theme="light"] {
    --primary-color: #607D8B; 
    --primary-rgb: 96, 125, 139;
    --secondary-color: #455A64;
    --secondary-color-rgb: 69, 90, 100;
    --accent-color: #90A4AE;
    --background-color: #ECEFF1;
    --card-color: #FFFFFF;
    --text-primary-color: #263238;
    --text-secondary-color: #546E7A;
    --card-border-color: rgba(96, 125, 139, 0.15);
    --shadow-color: rgba(96, 125, 139, 0.1);
    --card-rgb: 255, 255, 255;
    --info-color: #90A4AE;
    --success-color: #81C784;
    --danger-color: #E57373;
    --warning-color: #FFB74D;
}

[data-theme="soft-dark"][data-bs-theme="dark"] {
    --primary-color: #90A4AE; 
    --primary-rgb: 144, 164, 174;
    --secondary-color: #546E7A;
    --secondary-color-rgb: 84, 110, 122;
    --accent-color: #B0BEC5;
    --background-color: #1a1c1e; 
    --card-color: #232529; 
    --text-primary-color: #e2e4e7; 
    --text-secondary-color: #9ea3ae;
    --card-border-color: rgba(255, 255, 255, 0.08);
    --shadow-color: rgba(0, 0, 0, 0.4);
    --card-rgb: 35, 37, 41;
    --info-color: #81d4fa;
    --success-color: #a5d6a7;
    --danger-color: #ef9a9a;
    --warning-color: #ffe082;
}




.form-floating {
    position: relative;
    transition: all 0.3s ease;
}

.form-floating > .form-control {
    height: calc(3.5rem + 2px) !important;
    padding: 1rem 0.75rem !important;
}

.form-floating > textarea.form-control {
    height: auto !important;
}

.form-floating > label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 1rem 0.75rem;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: all 0.2s ease-in-out;
    color: var(--text-secondary-color);
}

.form-floating > .form-control:focus {
    padding-top: 1.625rem !important;
    padding-bottom: 0.625rem !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.15) !important;
    outline: none !important;
}

.form-floating > .form-control:not(:placeholder-shown) {
    padding-top: 1.625rem !important;
    padding-bottom: 0.625rem !important;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    opacity: 0.8;
    transform: scale(0.85) translateY(-0.75rem) translateX(0.15rem);
    color: var(--primary-color);
    font-weight: 600;
}


.form-control.input-validation-error, 
.form-control.is-invalid {
    border-color: var(--danger-color) !important;
    background-image: none !important; 
}

.form-control.input-validation-error:focus,
.form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(var(--danger-color-rgb, 220, 53, 69), 0.15) !important;
}

.field-validation-error {
    font-size: 0.75rem;
    margin-top: 4px;
    display: block;
    font-weight: 500;
}


.input-group-text {
    background-color: var(--background-color) !important;
    border: 1px solid var(--card-border-color) !important;
    color: var(--text-secondary-color) !important;
    border-radius: 8px 0 0 8px !important;
    font-weight: 600;
    font-size: 0.85rem;
    height: 42px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-group-prepend > .input-group-text, 
.input-group-prepend > .btn {
    border-radius: 8px 0 0 8px !important;
    height: 42px !important;
}

.input-group-append > .input-group-text, 
.input-group-append > .btn {
    border-radius: 0 8px 8px 0 !important;
    height: 42px !important;
}

.input-group > .form-control {
    border-radius: 0 8px 8px 0 !important;
    height: 42px !important;
}

.input-group-prepend .btn, .input-group-append .btn {
    height: 42px !important;
    border-radius: 0 8px 8px 0 !important;
}

.input-group-prepend .btn {
    border-radius: 8px 0 0 8px !important;
}

.input-group > .input-group-prepend + .form-control {
    border-radius: 0 8px 8px 0 !important;
}

.input-group > .form-control + .input-group-append {
    border-radius: 0 8px 8px 0 !important;
}



.custom-alert {
    padding: 1.25rem 1.5rem !important;
    border-radius: 12px !important;
    border: 1px solid var(--card-border-color) !important;
    background-color: var(--background-color) !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px var(--shadow-color) !important;
    margin-bottom: 1.5rem;
}

.custom-alert::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background-color: var(--secondary-color);
}

.custom-alert.alert-success::before { background-color: var(--success-color); }
.custom-alert.alert-danger::before  { background-color: var(--danger-color); }
.custom-alert.alert-warning::before { background-color: var(--warning-color); }
.custom-alert.alert-info::before    { background-color: var(--info-color); }

.custom-alert .alert-heading {
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    margin-bottom: 0.5rem;
    color: var(--text-primary-color);
    display: flex;
    align-items: center;
}

.custom-alert .alert-heading i {
    margin-right: 10px;
    opacity: 0.8;
}

.custom-alert p {
    color: var(--text-secondary-color) !important;
}


#daterange-btn, .daterangepicker-btn {
    cursor: pointer !important;
}


.btn-group-toggle .btn {
    border-radius: 8px !important;
    margin: 0 4px;
    border: 1px solid var(--card-border-color) !important;
    background-color: var(--card-color) !important;
    color: var(--text-secondary-color) !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-group-toggle .btn:hover {
    background-color: var(--background-color) !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    transform: translateY(-1px);
}

.btn-group-toggle .btn.active {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.3) !important;
}

.btn-group-toggle .btn input[type="radio"] {
    display: none;
}


.btn-group-toggle .btn i {
    margin-right: 6px;
    font-size: 1.1em;
}

.custom-alert hr {
    border-top: 1px solid var(--card-border-color);
    opacity: 0.1;
    margin: 1rem 0;
}

[data-bs-theme="dark"] .custom-alert {
    background-color: color-mix(in srgb, var(--card-color) 95%, white 5%) !important;
}

    transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3) !important;
    background-image: none !important;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.4) !important;
    filter: brightness(1.1);
}


.btn-outline-primary {
    background: transparent !important;
    color: var(--primary-color) !important;
    border: 2px solid var(--primary-color) !important;
}

.btn-outline-primary:hover {
    background: var(--primary-color) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.2) !important;
}


.btn-purple {
    background: linear-gradient(135deg, #6f42c1, #a78bfa) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(111, 66, 193, 0.3) !important;
}

.btn-purple:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(111, 66, 193, 0.4) !important;
}


.btn-outline-warning {
    background: transparent !important;
    color: var(--warning-color) !important;
    border: 2px solid var(--warning-color) !important;
}

.btn-outline-warning:hover {
    background: var(--warning-color) !important;
    color: #fff !important;
    transform: translateY(-2px);
}


.btn-outline-danger {
    background: transparent !important;
    color: var(--danger-color) !important;
    border: 2px solid var(--danger-color) !important;
}

.btn-outline-danger:hover {
    background: var(--danger-color) !important;
    color: #fff !important;
    transform: translateY(-2px);
}


.btn-success {
    background: linear-gradient(135deg, #3a793c, #006648) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.2) !important;
}


.btn-info {
    background: linear-gradient(135deg, #2b6182, #17a2b8) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3) !important;
}






html {
    background-color: var(--background-color) !important;
    color: var(--text-primary-color) !important;
}

body {
    background-color: transparent !important;
    color: inherit !important;
}

.page-wrapper {
    background-color: var(--background-color) !important;
    color: var(--text-primary-color) !important;
}


.header {
    background: var(--card-color) !important;
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 1050 !important;
    height: 60px;
    border-bottom: 1px solid var(--card-border-color);
    box-shadow: 0 2px 5px var(--shadow-color);
}


[data-bs-theme="dark"] .header {
}

.navbar-toggler-icon {
    filter: var(--toggler-filter, none);
}

[data-bs-theme="dark"] .navbar-toggler-icon {
    filter: invert(1) brightness(2);
}

.navbar-light .navbar-nav .nav-link {
    color: var(--text-secondary-color) !important;
}

.navbar-light .navbar-nav .nav-link:hover {
    color: var(--primary-color) !important;
}


@media (max-width: 1170px) {
    .left-sidebar {
        left: -240px;
        transition: 0.2s ease-in;
        width: 240px;
        position: fixed !important;
        top: 60px !important;
        height: calc(100vh - 60px) !important;
        z-index: 1060 !important;
    }

    .show-sidebar .left-sidebar {
        left: 0;
    }
    
    .page-wrapper {
        margin-left: 0 !important;
    }
}

.left-sidebar {
    background: var(--sidebar-color, var(--card-color)) !important;
    color: var(--text-primary-color) !important;
    border-right: 1px solid var(--card-border-color);
    position: fixed !important;
    z-index: 1040;
}

.sidebar-nav {
    background: var(--sidebar-color, var(--card-color)) !important;
}

.sidebar-nav ul li a {
    color: var(--text-secondary-color) !important;
}

.sidebar-nav ul li a:hover, 
.sidebar-nav ul li.active > a {
    color: var(--primary-color) !important;
    background-color: rgba(var(--primary-rgb), 0.15) !important;
    font-weight: 500 !important;
}

.sidebar-nav > ul > li.active > a {
    border-left: 3px solid var(--primary-color) !important;
}


.sidebar-nav > ul > li.active > a i,
.sidebar-nav ul li a.active i {
    background: transparent !important;
    background-color: transparent !important;
}


.card {
    background: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid var(--card-border-color) !important;
}

.card-title, .card-body h3, .card-body h4, .card-body h5, .card-body h6 {
    color: var(--text-primary-color) !important;
}


.table-responsive {
    background: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid var(--card-border-color) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 15px var(--shadow-color) !important;
    margin-bottom: 1.5rem !important;
    overflow: hidden; 
}


.tabulator {
    background: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border-color: var(--card-border-color) !important;
}

.tabulator-tableholder {
    background: var(--card-color) !important;
}

.tabulator-header {
    background: var(--background-color) !important;
    color: var(--text-primary-color) !important;
    border-bottom: 2px solid var(--card-border-color) !important;
}

.tabulator-col {
    background: var(--background-color) !important;
    color: var(--text-primary-color) !important;
    border-right: 1px solid var(--card-border-color) !important;
}

.tabulator-row {
    background: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border-bottom: 1px solid var(--card-border-color) !important;
}

.tabulator-cell {
    border-right: 1px solid var(--card-border-color) !important;
}

.tabulator-row.tabulator-row-even {
    background-color: rgba(0, 0, 0, 0.03) !important;
}

[data-bs-theme="dark"] .tabulator-row.tabulator-row-even {
    background-color: var(--background-color) !important;
}

.tabulator-row:hover {
    background-color: rgba(var(--primary-rgb), 0.15) !important;
}

[data-bs-theme="dark"] .tabulator-row:hover {
    background-color: rgba(var(--primary-rgb), 0.2) !important;
}

.tabulator-row.tabulator-selected {
    background-color: rgba(var(--primary-rgb), 0.25) !important;
}

.tabulator-footer {
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border-top: 1px solid var(--card-border-color) !important;
}

.tabulator-paginator button {
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid var(--card-border-color) !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    margin: 0 2px !important;
}

.tabulator-paginator button:hover {
    background-color: var(--background-color) !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.tabulator-paginator button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.tabulator-page.active {
    background-color: var(--primary-color) !important;
    color: #fff !important;
    border-color: var(--primary-color) !important;
}

.tabulator-header-filter input {
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid var(--card-border-color) !important;
}


.page-link {
    color: var(--primary-color) !important;
    background-color: var(--card-color) !important;
    border-color: var(--card-border-color) !important;
    transition: all 0.2s ease;
}

.page-link:hover {
    background-color: var(--background-color) !important;
    color: var(--accent-color) !important;
    border-color: var(--card-border-color) !important;
    z-index: 2;
}

.page-item.active .page-link {
    
    border-color: var(--primary-color) !important;
    
}

.page-item.disabled .page-link {
    background-color: var(--card-color) !important;
    color: var(--text-secondary-color) !important;
    border-color: var(--card-border-color) !important;
    opacity: 0.6;
}





.form-control {
    background-color: var(--card-color);
    color: var(--text-primary-color) !important;
    border-color: var(--card-border-color) !important;
}

.form-control:focus {
    background-color: var(--card-color);
    color: var(--text-primary-color) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25) !important;
}


.btn-white {
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border-color: var(--card-border-color) !important;
}

.btn-white:hover {
    background-color: rgba(var(--primary-rgb), 0.1) !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-outline-primary {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    background-color: var(--card-color) !important;
}

.btn-outline-primary:hover {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

.btn-outline-purple {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    background-color: transparent !important;
}

.btn-outline-purple:hover {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}


.dropdown-menu {
    background-color: var(--card-color) !important;
    border-color: var(--card-border-color) !important;
}

.modal-content {
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid rgba(var(--primary-rgb), 0.2) !important;
    box-shadow: 0 15px 35px rgba(var(--primary-rgb), 0.15), 0 5px 15px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.modal-header, .modal-footer {
    border-color: var(--card-border-color) !important;
}

.dropdown-item {
    color: var(--text-primary-color) !important;
}

.dropdown-item:hover {
    background-color: rgba(var(--primary-rgb), 0.1) !important;
    color: var(--primary-color) !important;
}


.modal-content {
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid rgba(var(--primary-rgb), 0.2) !important;
    box-shadow: 0 15px 35px rgba(var(--primary-rgb), 0.15), 0 5px 15px rgba(0, 0, 0, 0.1) !important;
}


.modal-dialog {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    min-height: calc(100% - 3.5rem) !important;
    margin: 1.75rem auto !important;
    padding-top: 5rem !important;
    padding-left: 8rem !important;
}

@media (max-width: 576px) {
    .modal-dialog {
        min-height: calc(100% - 1rem) !important;
        margin: 0.5rem auto !important;
        padding-top: 2rem !important;
        padding-left: 0 !important;
    }
}


.modal-backdrop.show {
    background-color: rgba(0, 0, 0, 0.6) !important;
}

[data-bs-theme='dark'] .modal-backdrop.show {
    background-color: rgba(0, 0, 0, 0.8) !important; 
}


.modal.fade .modal-dialog {
    transform: scale(0.9);
    transition: transform 0.3s ease-out;
}

.modal.show .modal-dialog {
    transform: scale(1);
}

.modal-header, .modal-footer {
    border-color: var(--card-border-color) !important;
}

.close {
    color: var(--text-primary-color) !important;
    text-shadow: none;
}


.text-muted {
    color: var(--text-secondary-color) !important;
}

.border {
    border-color: var(--card-border-color) !important;
}



#main-wrapper .footer {
    background: var(--background-color) !important;
    color: var(--text-secondary-color) !important;
    border-top: 1px solid var(--card-border-color) !important;
    padding: 15px 20px !important;
}

#main-wrapper .footer strong, 
#main-wrapper .footer a {
    color: var(--primary-color) !important;
}

#main-wrapper .footer a:hover {
    color: var(--accent-color) !important;
    text-decoration: underline !important;
}


.summary-card {
    border: none !important;
    border-radius: 15px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 5px 20px var(--shadow-color) !important;
    margin-bottom: 1.5rem !important;
    background-color: var(--card-color);
}

.summary-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px var(--shadow-color) !important;
}

.summary-card::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -60%;
    width: 20%;
    height: 200%;
    opacity: 0;
    transform: rotate(30deg);
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0.13) 0%,
        rgba(255, 255, 255, 0.5) 92%,
        rgba(255, 255, 255, 0.0) 100%
    );
    transition: opacity 0.5s, left 0.5s;
}

.summary-card:hover::after {
    opacity: 1;
    left: 130%;
}

.summary-card .card-body {
    padding: 1.5rem !important;
}

.summary-card .icon-circle {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    background-color: rgba(255, 255, 255, 0.15);
    margin-right: 1.25rem;
    backdrop-filter: blur(4px);
}


.bg-gradient-primary, .summary-card[data-color="primary"] { background: linear-gradient(135deg, #3a1c71 0%, #d76d77 50%, #ffaf7b 100%); color: #fff; }
.bg-gradient-secondary { background: linear-gradient(135deg, #1e2a38 0%, #34495e 100%); color: #fff; }
.bg-gradient-warning { background: linear-gradient(135deg, #ff4e50 0%, #f9d423 100%); color: #fff; }
.bg-gradient-success, .summary-card[data-color="success"] { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); color: #fff; }
.bg-gradient-info, .summary-card[data-color="info"] { background: linear-gradient(135deg, #3c7a7e 0%, #1058bb 100%); color: #fff; }
.bg-gradient-danger, .summary-card[data-color="danger"] { background: linear-gradient(135deg, #ee0979 0%, #ff6a00 100%); color: #fff; }

.summary-card[data-color="warning"] { background: linear-gradient(135deg, #ffc107 0%, #ffd043 100%); color: #212529; }
.summary-card[data-color="light"] { background: var(--background-color); color: var(--text-primary-color); }

.summary-card.inactive {
    opacity: 0.4;
    filter: grayscale(80%);
    transform: scale(0.95);
}

.summary-card.active {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 30px var(--shadow-color) !important;
    border: 2px solid #fff !important;
    z-index: 10;
}

[data-bs-theme="dark"] .summary-card.active {
    border-color: var(--primary-color) !important;
}


.summary-card h3, .summary-card h4, .summary-card h5, .summary-card h6 {
    color: inherit !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}


.text-purple {
    color: var(--primary-color) !important;
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

.text-white {
    color: #ffffff !important;
}

.btn-purple {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
}

.btn-purple:hover {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: #ffffff !important;
}


.input-group-text {
    background-color: var(--background-color) !important;
    color: var(--text-primary-color) !important;
    border-color: var(--card-border-color) !important;
}


.custom-control-label {
    color: var(--text-primary-color) !important;
}

.custom-control-label::before {
    background-color: var(--card-color) !important;
    border-color: var(--card-border-color) !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}


.nav-tabs {
    border-bottom: 1px solid var(--card-border-color) !important;
}

.nav-tabs .nav-link {
    color: var(--text-secondary-color) !important;
    border: 1px solid transparent;
}

.nav-tabs .nav-link:hover {
    border-color: var(--card-border-color) var(--card-border-color) var(--card-border-color) !important;
    color: var(--primary-color) !important;
}

.nav-tabs .nav-link.active {
    background-color: var(--card-color) !important;
    border-color: var(--card-border-color) var(--card-border-color) var(--card-color) !important;
    color: var(--primary-color) !important;
}


.select2-container--default .select2-selection--single {
    background-color: var(--card-color) !important;
    border: 1px solid var(--card-border-color) !important;
    height: calc(2.25rem + 2px) !important; 
    padding-top: 5px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary-color) !important;
    line-height: 1.5 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(2.25rem + 2px) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--text-secondary-color) transparent transparent transparent !important;
}

.select2-dropdown {
    background-color: var(--card-color) !important;
    border: 1px solid var(--card-border-color) !important;
    color: var(--text-primary-color) !important;
}

.select2-search__field {
    background-color: var(--background-color) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid var(--card-border-color) !important;
}

.select2-results__option {
    color: var(--text-primary-color) !important;
    background-color: var(--card-color) !important;
}

.select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

.select2-results__option[aria-selected="true"] {
    background-color: var(--background-color) !important;
    color: var(--primary-color) !important;
}


.input-group > .select2-container--default {
    width: auto;
    flex: 1 1 auto;
}

.input-group > .select2-container--default .select2-selection--single {
    height: 100% !important;
    line-height: inherit !important;
    border-radius: 0 0.25rem 0.25rem 0 !important;
}



#dashboard-data > div[class*='col-'],
#card-row-1 .row > div[class*='col-'],
#card-row-2 .row > div[class*='col-'],
#card-row-3 .row > div[class*='col-'],
#card-row-4 .row > div[class*='col-'] {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 20px;
}

.card-dashboard {
    background-color: var(--card-color) !important;
    border: 1px solid var(--card-border-color);
    border-radius: 12px; 
    box-shadow: 0 4px 6px var(--shadow-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    padding: 20px; 
    height: 100%; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.card-dashboard:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px var(--shadow-color);
    border-color: var(--primary-color);
}


.card-dashboard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(var(--primary-rgb), 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.card-dashboard:hover::before {
    opacity: 1;
}

.card-dashboard p {
    font-size: 14px;
    color: var(--text-secondary-color);
    margin-bottom: 0;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.card-dashboard h5 {
    color: var(--text-primary-color);
    font-weight: 700;
    font-size: 1.5rem; 
    margin-bottom: 5px;
}


.card-dashboard a {
    text-decoration: none;
    display: block;
    height: 100%;
}

.media {
    display: flex;
    align-items: center;
    justify-content: space-between; 
}

.media-left {
    padding-right: 15px;
}

.media-left i {
    opacity: 0.9;
    transition: transform 0.3s ease;
}

.card-dashboard:hover .media-left i {
    transform: scale(1.1);
}

.media-body {
    flex: 1;
}

.media-text-right {
    text-align: right;
}


.p-15 {
    padding: 20px !important;
}




.color-primary { color: var(--primary-color) !important; }
.color-secondary { color: var(--secondary-color) !important; }
.color-success { color: var(--success-color) !important; }
.color-danger { color: var(--danger-color) !important; }
.color-warning { color: var(--warning-color) !important; }
.color-info { color: var(--info-color) !important; }


.shimmer-wrapper {
    position: relative;
    overflow: hidden;
    background-color: var(--card-color); 
}

.shimmer-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.1) 20%, 
        rgba(255, 255, 255, 0.2) 60%,
        rgba(255, 255, 255, 0)
    );
    animation: shimmer 2s infinite;
}

[data-bs-theme="light"] .shimmer-wrapper::after {
    background-image: linear-gradient(
        90deg,
        rgba(230, 230, 230, 0) 0,
        rgba(230, 230, 230, 0.4) 20%,
        rgba(230, 230, 230, 0.8) 60%,
        rgba(230, 230, 230, 0)
    );
}

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}


canvas {
    background-color: var(--card-color);
    border-radius: 8px;
    padding: 10px;
}




.spinner {
    display: inline-block;
    border: 3px solid rgba(var(--primary-rgb), 0.3);
    border-left-color: var(--primary-color);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
    vertical-align: middle;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spinning {
    animation: spin 1s linear infinite;
}

.hidden {
    display: none !important;
}


.bg-gradient-161 {
    background: linear-gradient(135deg, var(--card-border-color), var(--background-color));
    color: var(--text-primary-color);
    border-bottom: 1px solid var(--card-border-color);
}


.tabulator .tabulator-cell .tabulator-action {
    color: var(--primary-color) !important;
    text-decoration: none;
    font-weight: 500;
}

.tabulator .tabulator-cell .tabulator-action:hover {
    color: var(--accent-color) !important;
    text-decoration: underline;
}


.timer-display {
    color: var(--text-secondary-color) !important;
    font-size: 0.85rem;
}




.dataTables_wrapper .dataTables_processing {
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid var(--card-border-color) !important;
    box-shadow: 0 4px 15px var(--shadow-color) !important;
    border-radius: 8px;
    z-index: 1100;
}


.tbllist th:first-child, 
.tbllist tbody td:first-child,
.tbllist th:last-child, 
.tbllist tbody td:last-child {
    position: sticky !important;
    background-color: var(--card-color) !important; 
    z-index: 2;
}


.tbllist tbody tr.selected td:first-child,
.tbllist tbody tr.selected td:last-child {
    background-color: inherit !important;
}

.tbllist th:first-child, .tbllist td:first-child { left: 0; border-right: 1px solid var(--card-border-color) !important; }
.tbllist th:last-child, .tbllist td:last-child { right: 0; border-left: 1px solid var(--card-border-color) !important; }


table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc,
table.dataTable thead td.sorting,
table.dataTable thead td.sorting_asc,
table.dataTable thead td.sorting_desc,
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    background-image: none !important;
}

table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc_disabled:before,
div.dataTables_scrollBody table thead .sorting:after,
div.dataTables_scrollBody table thead .sorting_asc:after,
div.dataTables_scrollBody table thead .sorting_desc:after,
table.dataTable.table-sm .sorting:before,
table.dataTable.table-sm .sorting_asc:before,
table.dataTable.table-sm .sorting_desc:before,
table.dataTable.table-sm .sorting:after,
table.dataTable.table-sm .sorting_asc:after,
table.dataTable.table-sm .sorting_desc:after {
    display: none !important; 
    content: "" !important;
    background-image: none !important;
}

.dt-column-order { display: none !important; }

table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    position: relative !important;
    cursor: pointer !important;
    padding-right: 25px !important; 
    background-image: none !important;
}

table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after,
.dataTable thead th.sorting:after,
.dataTable thead th.sorting_asc:after,
.dataTable thead th.sorting_desc:after {
    display: inline-block !important;
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-family: 'FontAwesome' !important;
    opacity: 0.25;
    font-size: 0.8rem;
    line-height: 1 !important;
    visibility: visible !important;
    z-index: 5;
    content: "\f0dc" !important;
}

table.dataTable thead th.sorting_asc:after,
.dataTable thead th.sorting_asc:after {
    content: "\f0de" !important;
    opacity: 0.9 !important;
    color: var(--primary-color) !important;
}

table.dataTable thead th.sorting_desc:after,
.dataTable thead th.sorting_desc:after {
    content: "\f0dd" !important;
    opacity: 0.9 !important;
    color: var(--primary-color) !important;
}


.ui-resizable-handle {
    width: 5px !important;
    right: 0 !important;
    background: transparent;
    transition: background 0.2s;
}

.ui-resizable-handle:hover {
    background: rgba(var(--primary-rgb), 0.3) !important;
    cursor: col-resize;
}

table.dataTable thead th {
    position: relative;
    border-right: 1px solid transparent !important;
}

table.dataTable thead th:hover {
    border-right: 1px solid var(--card-border-color) !important;
}




.dataTables_wrapper {
    border: none !important;
}

table.dataTable th,
table.dataTable td {
    border-color: var(--card-border-color) !important;
    color: var(--text-primary-color) !important;
}



.table th {
    background-image: none !important;
    background-color: var(--background-color) !important;
    color: var(--text-primary-color) !important;
    border-color: var(--card-border-color) !important;
}


table.dataTable tbody tr {
    background-color: var(--card-color) !important;
    border-bottom: 1px solid var(--card-border-color) !important;
}

table.dataTable.stripe tbody tr.odd, 
table.dataTable.display tbody tr.odd {
    background-color: rgba(0, 0, 0, 0.02) !important; 
}

[data-bs-theme="dark"] table.dataTable.stripe tbody tr.odd,
[data-bs-theme="dark"] table.dataTable.display tbody tr.odd {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

table.dataTable tbody tr:hover {
    background-color: rgba(var(--primary-rgb), 0.1) !important;
}


.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--text-primary-color) !important;
    background-color: var(--card-color) !important;
    
    
    margin: 0 2px;
    padding: 3px 1px;
    transition: all 0.2s ease;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--primary-color) !important;
    color: #fff !important;
    border-color: var(--primary-color) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: var(--background-color) !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    background-color: var(--card-color) !important;
    color: var(--text-secondary-color) !important;
    border-color: var(--card-border-color) !important;
    opacity: 0.5;
    cursor: not-allowed;
}


.tabulator-paginator button {
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid var(--card-border-color) !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    margin: 0 2px !important;
}

.tabulator-paginator button:hover {
    background-color: var(--background-color) !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.tabulator-paginator button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.tabulator-page.active {
    background-color: var(--primary-color) !important;
    color: #fff !important;
    border-color: var(--primary-color) !important;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
    color: var(--text-secondary-color) !important;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid var(--card-border-color) !important;
    padding: 4px;
    border-radius: 4px;
}


.dropdown-menu.with-numbers {
    counter-reset: item;
}
.dropdown-menu.with-numbers .dropdown-item::before {
    content: counter(item);
    counter-increment: item;
    display: inline-block;
    width: 1.8em;
    height: 1.8em;
    line-height: 1.8em;
    text-align: center;
    background-color: var(--background-color);
    border-radius: 0.25rem;
    font-weight: bold;
    color: var(--text-secondary-color);
    margin-right: 0.8em;
}


#chkSearchByScanner {
    width: 1.2rem;
    height: 1.2rem;
    accent-color: var(--primary-color);
}


.jumbotron {
    background-color: var(--background-color) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid var(--card-border-color);
}


hr.solid {
    border-top: 2px solid var(--card-border-color);
}


.card-dashboard, 
.card-dashboard:hover,
a:has(> .card-dashboard),
a:has(> .card-dashboard):hover {
    cursor: default !important;
}


.card-dashboard i {
    text-shadow: none !important;
    box-shadow: none !important;
}






.select2-container--bootstrap4 .select2-selection {
    width: 100%;
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid var(--card-border-color) !important;
    font-weight: 500 !important;
    border-radius: .25rem;
    -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.select2-container--bootstrap4.select2-container--focus .select2-selection {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25) !important;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary-color) !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    padding-left: 0.75rem !important;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
    color: var(--text-secondary-color) !important;
}

.select2-container--bootstrap4 .select2-dropdown {
    background-color: var(--card-color) !important;
    border-color: var(--card-border-color) !important;
    color: var(--text-primary-color) !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.select2-container--bootstrap4 .select2-results__option {
    color: var(--text-primary-color) !important;
    background-color: var(--card-color) !important;
}

.select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

.select2-container--bootstrap4 .select2-results__option[aria-selected="true"] {
    background-color: rgba(var(--primary-rgb), 0.15) !important;
    color: var(--primary-color) !important;
}

.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field {
    background-color: var(--background-color) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid var(--card-border-color) !important;
}


.select2-container--default .select2-selection--multiple {
    background-color: var(--card-color) !important;
    border: 1px solid var(--card-border-color) !important;
    border-radius: 4px;
    cursor: text;
    color: var(--text-primary-color) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
    color: #fff !important;
    border-radius: 4px;
    padding: 2px 6px;
    margin-top: 5px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff !important;
    margin-right: 5px;
    border-right: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    background-color: rgba(0, 0, 0, 0.1) !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--card-color) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}




.card-custom {
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid var(--card-border-color) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 6px var(--shadow-color) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.card-custom:hover {
    box-shadow: 0 8px 15px var(--shadow-color) !important;
}


.form-control-custom {
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid var(--card-border-color) !important;
    border-radius: 8px !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.form-control-custom:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25) !important;
    background-color: var(--card-color) !important;
}


.btn-theme {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
}

.btn-theme:hover {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px var(--shadow-color) !important;
}


.bg-card { background-color: var(--card-color) !important; }
.bg-app { background-color: var(--background-color) !important; }


.text-theme-primary { color: var(--text-primary-color) !important; }
.text-theme-secondary { color: var(--text-secondary-color) !important; }
.text-theme-main { color: var(--primary-color) !important; }




.btn-outline-secondary {
    color: var(--text-secondary-color) !important;
    border-color: var(--card-border-color) !important;
    background-color: transparent !important;
}

.btn-outline-secondary:hover, 
.btn-outline-secondary.active, 
.btn-outline-secondary:not(:disabled):not(.disabled):active {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}


.btn-group-toggle > .btn.active {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: #fff !important;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
}


.btn-theme-outline {
    border: 1px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
    background-color: transparent !important;
    transition: all 0.3s ease !important;
}

.btn-theme-outline:hover {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}


::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--background-color);
}

::-webkit-scrollbar-thumb {
    background: var(--card-border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary-color);
}


::selection {
    background: rgba(var(--primary-rgb), 0.3);
    color: var(--text-primary-color);
}







.tabulator {

    background-color: var(--card-color) !important;

    color: var(--text-primary-color) !important;

    border: 1px solid var(--card-border-color) !important;

    border-radius: 12px !important;

}







.tabulator .tabulator-header {



    background-color: color-mix(in srgb, var(--secondary-color) 40%, #141523) !important;



    color: #ffffff !important; 



    border-bottom: 2px solid var(--card-border-color) !important;



    border-radius: 12px 12px 0 0 !important;



}







.tabulator .tabulator-header .tabulator-col {



    background-color: transparent !important;



    color: #ffffff !important;



    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;



    font-weight: 600 !important;



    padding: 12px 4px !important;



}








[data-bs-theme="light"] .tabulator .tabulator-header {
    background-color: color-mix(in srgb, var(--primary-color) 12%, var(--background-color)) !important;
    color: var(--text-primary-color) !important;
    border-bottom: 1px solid var(--card-border-color) !important;
}

[data-bs-theme="light"] .tabulator .tabulator-header .tabulator-col {
    color: var(--text-primary-color) !important;
    border-right: 1px solid var(--card-border-color) !important;
}








.tabulator .tabulator-row {

    background-color: var(--card-color) !important;

    color: var(--text-primary-color) !important;

    border-bottom: 1px solid var(--card-border-color) !important;

}







.tabulator .tabulator-row.tabulator-row-even {

    background-color: color-mix(in srgb, var(--text-primary-color) 2%, var(--card-color)) !important;

}





.tabulator .tabulator-row.tabulator-selectable:hover {

    background-color: color-mix(in srgb, var(--primary-color) 10%, var(--card-color)) !important;

    color: var(--text-primary-color) !important;

    cursor: pointer;

}



.tabulator .tabulator-row.tabulator-selectable:hover .tabulator-cell {

    background-color: transparent !important;

}





.tabulator .tabulator-row.tabulator-selected,

.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-selected {

    background-color: color-mix(in srgb, var(--primary-color) 18%, var(--card-color)) !important;

    color: var(--text-primary-color) !important;

}







.daterangepicker {
    background-color: var(--card-color) !important;
    border: 1px solid var(--card-border-color) !important;
    color: var(--text-primary-color) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
}

.daterangepicker .calendar-table {
    background-color: var(--card-color) !important;
    border: 1px solid var(--card-border-color) !important;
}

.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
    background-color: var(--background-color) !important;
    color: var(--text-secondary-color) !important;
}

.daterangepicker td.available:hover, .daterangepicker th.available:hover {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

.daterangepicker td.in-range {
    background-color: rgba(var(--primary-rgb), 0.1) !important;
    color: var(--text-primary-color) !important;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

.daterangepicker .ranges li {
    font-size: 13px !important;
    background-color: var(--background-color) !important;
    border: 1px solid var(--card-border-color) !important;
    border-radius: 4px !important;
    color: var(--text-primary-color) !important;
    padding: 5px 12px !important;
    margin-bottom: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.daterangepicker .ranges li:hover,
.daterangepicker .ranges li.active {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}


.well {
    min-height: 20px;
    padding: 15px;
    margin-bottom: 20px;
    background-color: var(--background-color) !important;
    border: 1px solid var(--card-border-color) !important;
    border-radius: 12px;
    color: var(--text-primary-color);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

[data-bs-theme="dark"] .well {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .2);
}


.form-control:disabled, 
.form-control[readonly],
input:disabled,
input[readonly],
select:disabled,
textarea:disabled {
    background-color: color-mix(in srgb, var(--background-color) 95%, var(--text-primary-color) 5%) !important;
    color: var(--text-secondary-color) !important;
    opacity: 0.85 !important;
    cursor: not-allowed !important;
    border-color: var(--card-border-color) !important;
}

input[readonly].main-search-input {
    cursor: pointer !important;
}


[data-bs-theme="dark"] .form-control:disabled, 
[data-bs-theme="dark"] .form-control[readonly],
[data-bs-theme="dark"] input:disabled,
[data-bs-theme="dark"] input[readonly] {
    background-color: color-mix(in srgb, var(--card-color) 85%, black) !important;
    color: color-mix(in srgb, var(--text-secondary-color) 80%, white) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}


[data-bs-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) !important;
    opacity: 0.7;
    cursor: pointer;
}

[data-bs-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}


.jsgrid-grid-header,
.jsgrid-grid-body,
.jsgrid-header-row > .jsgrid-header-cell,
.jsgrid-filter-row > .jsgrid-cell,
.jsgrid-insert-row > .jsgrid-cell,
.jsgrid-edit-row > .jsgrid-cell {
    background-color: var(--card-color) !important;
    border-color: var(--card-border-color) !important;
}

.jsgrid-header-row > .jsgrid-header-cell {
    background-color: color-mix(in srgb, var(--primary-color) 10%, var(--card-color)) !important;
    color: var(--text-primary-color) !important;
    font-weight: 600 !important;
}

.jsgrid-table {
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border-collapse: collapse !important;
}

.jsgrid-cell {
    color: var(--text-primary-color) !important;
    border-color: var(--card-border-color) !important;
}

.jsgrid-row > .jsgrid-cell {
    background-color: var(--card-color) !important;
}

.jsgrid-alt-row > .jsgrid-cell {
    background-color: color-mix(in srgb, var(--text-primary-color) 2%, var(--card-color)) !important;
}


.jsgrid-edit-row > .jsgrid-cell {
    background-color: color-mix(in srgb, var(--primary-color) 15%, var(--card-color)) !important;
}

.jsgrid-insert-row > .jsgrid-cell {
    background-color: color-mix(in srgb, var(--accent-color) 10%, var(--card-color)) !important;
}

.jsgrid-row:hover > .jsgrid-cell, 
.jsgrid-alt-row:hover > .jsgrid-cell {
    background-color: color-mix(in srgb, var(--primary-color) 10%, var(--card-color)) !important;
    cursor: pointer;
}

.jsgrid-filter-row input,
.jsgrid-filter-row select,
.jsgrid-filter-row textarea,
.jsgrid-edit-row input,
.jsgrid-edit-row select,
.jsgrid-edit-row textarea,
.jsgrid-insert-row input,
.jsgrid-insert-row select,
.jsgrid-insert-row textarea {
    background-color: var(--background-color) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid var(--card-border-color) !important;
    padding: 4px 10px !important;
    width: 100% !important;
    border-radius: 6px !important;
    height: 36px !important; 
    font-size: 14px !important;
}


.jsgrid-button {
    width: 24px !important;
    height: 24px !important;
    border-radius: 6px !important;
    border: 1px solid transparent !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px !important;
    margin: 0 2px !important;
    opacity: 0.8;
    transition: all 0.2s ease;
    cursor: pointer;
    filter: none !important; 
}

.jsgrid-button:hover {
    opacity: 1 !important;
    background-color: rgba(var(--primary-rgb), 0.1) !important;
    border-color: rgba(var(--primary-rgb), 0.2) !important;
}



.jsgrid-update-button {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%2328a745' d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E") !important;
}


.jsgrid-cancel-edit-button, .jsgrid-clear-filter-button {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23dc3545' d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z'/%3E%3C/svg%3E") !important;
}


.jsgrid-edit-button {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23ffc107' d='M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 462.1c-1.5 5.3-1 10.9 1.4 15.8s6.9 8.8 12.1 10.3L151.9 506c14.1 4.2 27 11.8 37.4 22.2L400.3 317.3l22.6-22.6 11.3-11.3-22.6-22.6-62.1-62.1-33.9-33.9-11.3 11.3zM377.7 284.1L189.3 472.5c-5.2 5.2-11.7 9-18.7 11.1L51.2 512l28.4-119.4c2.1-7 5.9-13.5 11.1-18.7L279.1 185.5l98.6 98.6z'/%3E%3C/svg%3E") !important;
}


.jsgrid-delete-button {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23dc3545' d='M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z'/%3E%3C/svg%3E") !important;
}


.jsgrid-search-button {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23007bff' d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E") !important;
}


.jsgrid-insert-button {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%2328a745' d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z'/%3E%3C/svg%3E") !important;
}


.jsgrid-control-field {
    white-space: nowrap !important;
    text-align: center !important;
    vertical-align: middle !important;
    padding: 2px !important;
    min-width: 80px !important;
    width: 80px !important;
}


[data-bs-theme="dark"] .jsgrid-button {
    filter: brightness(1.2) contrast(1.1) !important;
}


[data-bs-theme="dark"] .jsgrid-delete-button,
[data-bs-theme="dark"] .jsgrid-cancel-edit-button {
    filter: saturate(1.5) brightness(1.3) !important;
}

.jsgrid-selected-row > .jsgrid-cell {
    background-color: color-mix(in srgb, var(--primary-color) 20%, var(--card-color)) !important;
    color: var(--text-primary-color) !important;
}

.jsgrid-pager-container {
    color: var(--text-primary-color) !important;
    margin-top: 15px !important;
    padding: 10px 0 !important;
    border-top: 1px solid var(--card-border-color) !important;
}

.jsgrid-pager {
    color: var(--text-secondary-color) !important;
    font-size: 13px !important;
}

.jsgrid-pager-page, 
.jsgrid-pager-nav-button {
    margin: 0 2px !important;
}

.jsgrid-pager-page a, 
.jsgrid-pager-nav-button a {
    color: var(--text-primary-color) !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.jsgrid-pager-page a:hover, 
.jsgrid-pager-nav-button a:hover {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

.jsgrid-pager-current-page {
    font-weight: bold !important;
    color: #fff !important;
    background-color: var(--primary-color) !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 4px var(--shadow-color) !important;
}

.jsgrid-pager-nav-inactive-button a {
    color: var(--text-secondary-color) !important;
    opacity: 0.5 !important;
    cursor: default !important;
    pointer-events: none !important;
}

.jsgrid-pager-nav-inactive-button a:hover {
    background-color: transparent !important;
}


[data-bs-theme="dark"] .jsgrid-header-row > .jsgrid-header-cell {
    background-color: color-mix(in srgb, var(--secondary-color) 40%, #141523) !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .jsgrid-filter-row input,
[data-bs-theme="dark"] .jsgrid-filter-row select,
[data-bs-theme="dark"] .jsgrid-edit-row input,
[data-bs-theme="dark"] .jsgrid-edit-row select,
[data-bs-theme="dark"] .jsgrid-insert-row input,
[data-bs-theme="dark"] .jsgrid-insert-row select {
    background-color: var(--background-color) !important;
    border: 1px solid var(--card-border-color) !important;
    color: var(--text-primary-color) !important;
}


.table {
    color: var(--text-primary-color) !important;
}

.table-bordered {
    border-color: var(--card-border-color) !important;
}

.table-bordered th,
.table-bordered td {
    border-color: var(--card-border-color) !important;
}

.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid var(--card-border-color) !important;
    background-color: color-mix(in srgb, var(--primary-color) 5%, var(--card-color)) !important;
    color: var(--text-primary-color) !important;
    font-size: 16px !important;
}

.table td {
    font-size: 14px !important;
}


.thead-light th {
    background-color: color-mix(in srgb, var(--primary-color) 10%, var(--card-color)) !important;
    color: var(--text-primary-color) !important;
    border-color: var(--card-border-color) !important;
}

[data-bs-theme="dark"] .thead-light th {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(var(--primary-rgb), 0.02) !important;
}

.table-hover tbody tr:hover {
    background-color: rgba(var(--primary-rgb), 0.05) !important;
    color: var(--text-primary-color) !important;
}


.jsgrid-nodata-row > .jsgrid-cell {
    background-color: var(--card-color) !important;
    color: var(--text-secondary-color) !important;
    text-align: center !important;
}


#columnVisibilityMenu {
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid var(--card-border-color) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
}

#columnVisibilityMenu .form-check-label {
    color: var(--text-primary-color) !important;
}

#columnVisibilityMenu .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

#columnVisibilityMenu .col-md-4 > div:hover {
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
    border-radius: 4px;
    transition: background-color 0.2s ease;
}


[data-bs-theme="dark"] #columnVisibilityMenu {
    border-color: rgba(255, 255, 255, 0.1) !important;
}


footer, .footer, #footer {
    background-color: var(--card-color) !important;
    color: var(--text-secondary-color) !important;
    border-top: 1px solid var(--card-border-color) !important;
    padding: 15px 20px !important;
    transition: all 0.3s ease;
    
    
    position: static !important;
    width: 100% !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    float: none !important;
}


footer p, .footer p, #footer p {
    background-color: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
}

footer a, .footer a, #footer a {
    color: var(--primary-color) !important;
    font-weight: 600;
}

[data-bs-theme="dark"] footer, 
[data-bs-theme="dark"] .footer, 
[data-bs-theme="dark"] #footer {
    background-color: var(--background-color) !important;
    border-top-color: rgba(255, 255, 255, 0.05) !important;
}


#DocType, #DocTypeId {
    background-color: color-mix(in srgb, var(--primary-color) 10%, var(--card-color)) !important;
    border: 2px solid var(--primary-color) !important;
    font-weight: 600 !important;
    color: var(--text-primary-color) !important;
    transition: all 0.3s ease;
}

#DocType:focus, #DocTypeId:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25) !important;
    background-color: color-mix(in srgb, var(--primary-color) 15%, var(--card-color)) !important;
}


.doctype-warning {
    background-color: #fff3cd !important;
    border-color: #ffeeba !important;
    color: #856404 !important;
}

[data-bs-theme="dark"] .doctype-warning {
    background-color: rgba(255, 193, 7, 0.2) !important;
    border-color: #ffc107 !important;
    color: #ffc107 !important;
}


#validationSummary .alert-danger {
    background-color: rgba(220, 53, 69, 0.05) !important;
    border: 1px solid rgba(220, 53, 69, 0.2) !important;
    border-left: 4px solid #dc3545 !important;
}

[data-bs-theme="dark"] #validationSummary .alert-danger {
    background-color: rgba(220, 53, 69, 0.15) !important;
    border-color: rgba(220, 53, 69, 0.3) !important;
}

#validationSummary ul {
    list-style-type: none;
}

#validationSummary ul li::before {
    content: "\f06a"; 
    font-family: FontAwesome;
    margin-right: 8px;
    font-size: 0.85em;
}









@media (min-width: 1024px) {
    .table th:last-child, .table tbody tr.odd td:last-child {
        position: sticky !important;
        right: 0px;
        z-index: 1;
        border-left: 1px solid var(--card-border-color);
    }
    .table th:last-child, .table tbody tr.even td:last-child {
        position: sticky !important;
        right: 0px;
        z-index: 1;
        border-left: 1px solid var(--card-border-color);
    }
}

div.dataTables_filter { float: none !important; }
div.dt-buttons { float: none !important; }
div.dataTables_paginate { float: right; }
div.DTTT { float: left; margin-right: 50px; }
div.buttons { clear: both; }


.custombutton {
    padding: .8em;
    background: rgb(192,196,196);
    background: linear-gradient(0deg, rgba(192,196,196,0.6) 1%, rgba(255,255,255,0.6) 65%, rgba(151,149,162,0.25) 100%);
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
}


.child-table {
    font-size: 11px !important;
    font-style: italic !important;
    color: var(--text-secondary-color) !important;
    background-color: var(--card-color) !important;
    border: 1px solid var(--card-border-color) !important;
    border-left: 4px solid var(--primary-color) !important;
    border-radius: 4px 8px 8px 4px !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
    box-shadow: 0 4px 12px var(--shadow-color) !important;
    width: auto !important;
    min-width: 60%;
}

.child-table thead th {
    background-color: color-mix(in srgb, var(--primary-color) 8%, var(--card-color)) !important;
    color: var(--text-primary-color) !important;
    font-weight: 700 !important;
    font-size: 10.5px !important;
    border-bottom: 1px solid var(--card-border-color) !important;
    padding: 8px 12px !important;
}

.child-table tbody td {
    border-top: 1px solid color-mix(in srgb, var(--card-border-color) 50%, transparent) !important;
    padding: 6px 12px !important;
}

.child-table tfoot td {
    background-color: color-mix(in srgb, var(--primary-color) 3%, var(--card-color)) !important;
    color: var(--primary-color) !important;
    font-weight: 700 !important;
    border-top: 2px solid var(--card-border-color) !important;
}


.nicescroll-cursors { width: 16px !important; }
.DTFC_LeftBodyLiner, .DTFC_RightBodyLiner { overflow-y: hidden !important; }


:root {
    --bg-opacity: 1;
    --card-bg: #ffffff;
    --text-color: #212529;
    --note-bg: #f8f9fa;
    --note-text: #212529;
}

[data-theme="dark"] {
    --card-bg: #1e1e1e;
    --text-color: #e0e0e0;
    --note-bg: #2d2d2d;
    --note-text: #e0e0e0;
    --background-color: #121212;
    --text-secondary-color: #adb5bd;
}

.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
    background: var(--background-color);
    opacity: 0.9;
}


#UserMenuList input[type="checkbox"],
#MenuPermissionDetails input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 2px solid var(--text-secondary-color, #6c757d);
    border-radius: 4px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    vertical-align: middle;
    position: relative;
    transition: all 0.2s ease-in-out;
    background-color: var(--background-color, #fff);
}


#UserMenuList input[type="checkbox"]::before,
#MenuPermissionDetails input[type="checkbox"]::before {
    font-family: "FontAwesome";
    content: "\f00d"; 
    font-weight: normal;
    font-size: 20px;
    color: #ced4da;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.2s ease-in-out;
}


#UserMenuList input[type="checkbox"]:checked,
#MenuPermissionDetails input[type="checkbox"]:checked {
    background-color: #28a745;
    border-color: #28a745;
}

#UserMenuList input[type="checkbox"]:checked::before,
#MenuPermissionDetails input[type="checkbox"]:checked::before {
    content: "\f00c"; 
    color: white;
    font-size: 18px;
}


.dt-buttons, .dt-buttons.btn-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    margin-bottom: 10px !important;
    float: none !important;
    width: 100% !important;
}


.dt-buttons .btn {
    margin: 0 !important;
    flex: none !important; 
    border-radius: 50rem !important; 
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
}


.dt-buttons .btn i {
    margin-right: 5px;
}


.dataTables_filter label {
    display: flex !important;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    color: var(--text-primary-color);
    margin-bottom: 0;
}
.dataTables_filter input {
    margin-left: 0 !important;
    border-radius: 20px !important;
    padding: 5px 15px !important;
    border: 1px solid #ced4da !important;
    width: 200px !important;
}


@media (max-width: 767px) {
    .dt-buttons {
        justify-content: center !important;
    }
    .dataTables_filter label {
        width: 100%;
        justify-content: center;
    }
    .dataTables_filter input {
        width: 100% !important;
        max-width: 300px;
    }
}


.table-condensed { font-size: 13px; }
.dropdown-item { font-size: 14px; }




#main-wrapper .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-selected,
#main-wrapper .tabulator .tabulator-row.tabulator-selected {
    background-color: color-mix(in srgb, var(--primary-color) 25%, var(--card-color)) !important;
    color: var(--text-primary-color) !important;
    border-left: none !important;
    box-shadow: inset 4px 0 0 var(--primary-color) !important;
    font-weight: 600;
}

#main-wrapper .tabulator .tabulator-row.tabulator-selected .tabulator-cell {
    background-color: transparent !important;
}

#main-wrapper .tabulator .tabulator-row.tabulator-selected:hover {
    background-color: color-mix(in srgb, var(--primary-color) 35%, var(--card-color)) !important;
}



.dataTables_filter input {
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid var(--card-border-color) !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    margin-left: 10px !important;
    transition: all 0.3s ease !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05) !important;
    background-image: none !important; 
}

.dataTables_filter input:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15) !important;
    outline: none !important;
    background-color: var(--background-color) !important;
    background-image: none !important; 
}

[data-bs-theme="dark"] .dataTables_filter input {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}



.form-upper-text {
    height: 24px;
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    line-height: 12px;
    color: #5b5b5b;
}

.account-head-name {
    height: 12px;
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    line-height: 12px;
    color: #5b5b5b;
}

.account-name-input,
.account-code-dropdown,
.currency,
.drebit-credit,
.description {
    box-sizing: border-box;
    height: 30px;
    border: 1px solid #9c9d9e;
    border-radius: 3.45866px;
}

.currency {
    position: absolute;
}


.back-text {
    width: 35px;
    height: 17px;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 17px;
    text-align: center;
    color: #3777db;
}

.icon-color {
    color: #3777db;
    width: 9px;
    height: 5px;
}

.cancel-btn {
    box-sizing: border-box;
    height: 34.32px;
    border: 1px solid #9c9d9e;
    border-radius: 5.6px;
}

.cancel-btn:hover {
    box-sizing: border-box;
    height: 34.32px;
    border: 1px solid #9c9d9e;
    border-radius: 5.6px;
}

.cancel-text {
    color: #9c9d9e;
}

.next-btn {
    width: 82px;
    height: 34.32px;
    background: #3777db;
    border-radius: 5.52px;
}

.next-btn:hover {
    width: 82px;
    height: 34.32px;
    background: black;
    border-radius: 5.52px;
}

.list-text,
.parent-head-list-text {
    height: 17px;
    font-style: normal;
    font-weight: 400;
    font-size: 14.1053px;
    line-height: 17px;
    color: #5B5B5B;
}

.radio-style {
    width: 15.87px;
    height: 15.87px;
    background: #FFFFFF;
    border: 0.881579px solid #BABEC5;
    box-shadow: -1.87336px -1.87336px 3.74671px rgba(255, 255, 255, 0.96), 1.87336px 1.87336px 3.74671px rgba(223, 223, 223, 0.4);
    border-radius: 10px;
    cursor: pointer;
}

.radio-style:hover {
    background: #3777DB;
}

.label-style {
    width: 80%;
    height: 38px;
    padding-left: 8px;
    padding-top: 6px;
}

.label-style:hover {
    background-color: #3777DB;
    color: white;
}

.overflow-auto {
    overflow-y: auto;
    overflow-x: hidden !important;
    width: 100%;
}

.list-item-span {
    width: 128px;
    height: 12px;
    font-style: normal;
    font-weight: 400;
    font-size: 9.68426px;
    line-height: 12px;
    color: #C2BABA;
}

.btn-import {
    width: 87px;
    height: 35px;
    left: 1280px;
    top: 178px;
    background: #FFFFFF;
    box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.11);
    border-radius: 3px;
}

.btn-primaryy {
    width: 64px;
    height: 35px;
    left: 1279px;
    top: 140px;
    background: #3777DB;
    border-radius: 4.05559px;
}

.btn-primaryy:hover {
    background: #3777DB;
}

.search {
    width: 415px;
    height: 30px;
    border: 1px solid #9C9D9E;
    border-radius: 3.45866px;
}

.search::placeholder {
    padding-left: 10px;
}

.toast-green {
    background-color: green !important;
    color: white !important;
}

.toast-red {
    background-color: red !important;
    color: white !important;
}

.jsgrid-edit-row input, .jsgrid-edit-row select, .jsgrid-edit-row textarea, 
.jsgrid-filter-row input, .jsgrid-filter-row select, .jsgrid-filter-row textarea, 
.jsgrid-insert-row input, .jsgrid-insert-row select, .jsgrid-insert-row textarea {
    width: 100%;
    padding: 0.3em 0.5em;
    border: 1px solid var(--card-border-color) !important;
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border-radius: 4px;
}

.another-dropdown:focus-visible {
    border: none;
}

.custom-grid {
    display: grid;
    grid-template-columns: repeat(3, 180px);
    margin-top: 10px;
}

.cursor-pointer, input[readonly].cursor-pointer {
    cursor: pointer !important;
}



.btn-group, .btn-group-vertical {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    overflow: visible !important;
}

.btn-group .btn {
    border-radius: 0 !important;
    margin: 0 !important;
    border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
    position: relative;
}

.btn-group .btn:first-child,
.btn-group > .btn-group:first-child > .btn {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

.btn-group .btn:last-child,
.btn-group > .btn-group:last-child > .btn {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    border-right: none !important;
}


.btn-group.btn-group-rounded,
.btn-group-rounded {
    border-radius: 30px !important;
}

.btn-group-rounded .btn:first-child,
.btn-group-rounded > .btn-group:first-child > .btn {
    border-top-left-radius: 30px !important;
    border-bottom-left-radius: 30px !important;
}

.btn-group-rounded .btn:last-child,
.btn-group-rounded > .btn-group:last-child > .btn {
    border-top-right-radius: 30px !important;
    border-bottom-right-radius: 30px !important;
}


.btn-group .dropdown-toggle-split {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.btn-group .btn:hover {
    z-index: 2;
    filter: brightness(1.05);
    transform: none !important;
}


.btn-group-toggle > .btn {
    border-radius: 0 !important;
}

.btn-group-toggle > .btn:first-child {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

.btn-group-toggle > .btn:last-child {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}



.dropdown-menu {
    z-index: 9999 !important;
    min-width: 10rem;
    padding: .5rem 0;
    margin: .125rem 0 0;
    font-size: 13px;
    color: var(--text-primary-color);
    text-align: left;
    list-style: none;
    background-color: var(--card-color) !important;
    background-clip: padding-box;
    border: 1px solid var(--card-border-color) !important;
    border-radius: 8px !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
}

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



.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
}

.input-group .form-control {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    margin-bottom: 0;
    background-color: var(--background-color) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid var(--card-border-color) !important;
    
    height: 42px !important;
    padding: 0.375rem 0.75rem !important;
}


.input-group > .form-control:not(:last-child),
.input-group > .custom-select:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    height: 42px !important;
}

.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
    height: 42px !important;
}

.input-group-text {
    background-color: var(--card-color) !important;
    border: 1px solid var(--card-border-color) !important;
    color: var(--text-secondary-color) !important;
    padding: 0.375rem 0.75rem !important;
}


.input-group > .form-control + .input-group-append > .btn {
    border-left: none !important;
}



.toolbar-row {
    background-color: var(--background-color);
    border: 1px solid var(--card-border-color);
    border-radius: 12px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 12px !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
}


.toolbar-row > div[class*='col-'] {
    padding-left: 5px;
    padding-right: 5px;
}


.toolbar-row .btn {
    white-space: nowrap;
}



.btn-outline-theme {
    margin: 0px !important;
    min-width: 55px !important;
    height: 55px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(var(--primary-rgb), 0.5) !important;
    color: var(--primary-color) !important;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out !important;
    font-family: 'Arial Narrow', Arial, sans-serif !important;
}

.btn-outline-theme:hover {
    transform: translateY(-2px);
    background-color: var(--primary-color) !important;
    color: #fff !important;
    box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.3) !important;
}

.btn-outline-theme i {
    font-size: 20px !important;
    margin-bottom: 2px !important;
}

.btn-outline-theme:hover i {
    color: #fff !important;
}

.btn-outline-theme span, 
.btn-outline-theme small {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    line-height: 1.1;
    text-align: center;
}

[data-bs-theme='dark'] .btn-outline-theme {
    background-color: color-mix(in srgb, var(--card-color) 95%, white 5%) !important;
    border-color: var(--primary-color) !important;
}



.btn-group .btn {
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
}

[data-bs-theme='dark'] .btn-group .btn {
    
}



.tabulator .tabulator-row.tabulator-selected {
    background-color: rgba(var(--primary-rgb), 0.15) !important;
    color: var(--text-primary-color) !important;
}

.tabulator .tabulator-row.tabulator-selected .tabulator-cell {
    color: var(--text-primary-color) !important;
}


.tabulator .tabulator-row.tabulator-selected a,
.tabulator .tabulator-row.tabulator-selected button:not(.btn-primary) {
    color: var(--primary-color) !important;
}

.tabulator .tabulator-row.tabulator-selected:hover {
    background-color: var(--primary-color) !important;
    opacity: 0.9;
}

.tabulator .tabulator-row.tabulator-selected .badge {
    border: 1px solid #ffffff;
}



.tabulator .tabulator-tableholder {
    overflow: auto !important; 
}

.tabulator .tabulator-cell {
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
}


.tabulator .dropdown-menu {
    position: absolute !important;
    z-index: 1000000 !important;
    will-change: transform;
}



.switch-label {
    background: var(--card-border-color) !important;
    box-shadow: none !important;
    color: var(--text-secondary-color) !important;
}

.switch-label:before {
    color: var(--text-primary-color) !important;
}

.switch-input:checked ~ .switch-label {
    background: var(--primary-color) !important;
    box-shadow: none !important;
}

.switch-handle {
    background: #ffffff !important;
    box-shadow: none !important;
}

.switch-handle:before {
    background: #ffffff !important;
    box-shadow: none !important;
    background-image: none !important;
}


[data-bs-theme='dark'] .switch-label {
    background: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme='dark'] .switch-handle {
    background: #e0e0e0 !important;
}


.input-group-text i,
.input-group-text .fa,
.input-group-text .fas,
.input-group-text .fa-solid,
.input-group-text .fa-regular {
    color: inherit !important;
}


[data-bs-theme='dark'] .input-group-text {
    color: var(--text-primary-color) !important;
}

[data-bs-theme='dark'] .input-group-text i,
[data-bs-theme='dark'] .input-group-text .fa,
[data-bs-theme='dark'] .input-group-text .fas,
[data-bs-theme='dark'] .input-group-text .fa-solid {
    color: var(--text-primary-color) !important;
}


.ref-data-category, .ref-data-customer { color: var(--primary-color); font-weight: 600; }
.ref-data-product { color: var(--info-color); }
.ref-data-supplier { color: var(--danger-color); }
.ref-data-member { color: var(--text-primary-color); }
.ref-data-employee { color: var(--info-color); }

[data-bs-theme="dark"] .ref-data-product,
[data-bs-theme="dark"] .ref-data-category,
[data-bs-theme="dark"] .ref-data-customer {
    color: #00BCD4 !important; 
}


.daterangepicker .drp-buttons .btn {
    font-weight: 600 !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: all 0.2s ease !important;
}


.daterangepicker .applyBtn {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

.daterangepicker .applyBtn:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 8px rgba(var(--primary-rgb), 0.3);
}

.daterangepicker .applyBtn::before {
    content: "\f00c"; 
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome;
    font-weight: 900;
}


.daterangepicker .cancelBtn {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    color: #495057 !important;
}

.daterangepicker .cancelBtn:hover {
    background-color: #e2e6ea !important;
    border-color: #dae0e5 !important;
}

.daterangepicker .cancelBtn::before {
    content: "\f00d"; 
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome;
    font-weight: 900;
}


[data-bs-theme='dark'] .daterangepicker .cancelBtn {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #e0e0e0 !important;
}

[data-bs-theme='dark'] .daterangepicker .cancelBtn:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}


.daterangepicker .drp-buttons {
    border-top: 1px solid var(--card-border-color) !important;
    background-color: var(--card-color) !important;
}





.file-ref-tag {
    display: inline-flex;
    align-items: center;
    background-color: rgba(var(--primary-rgb), 0.08);
    color: var(--primary-color) !important;
    border: 1px solid rgba(var(--primary-rgb), 0.15);
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.2s ease;
    margin-right: 5px;
    margin-top: 5px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

.file-ref-tag:hover {
    background-color: var(--primary-color);
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(var(--primary-rgb), 0.2);
}

.file-ref-tag i {
    font-size: 0.85rem;
    margin-right: 6px;
}

[data-bs-theme="dark"] .file-ref-tag {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--card-border-color);
    color: var(--text-primary-color) !important;
}

[data-bs-theme="dark"] .file-ref-tag:hover {
    background-color: var(--primary-color);
    color: white !important;
    border-color: var(--primary-color);
}


.view-content {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    min-height: calc(100vh - 120px);
    background-color: var(--background-color);
}




.col-w-30 { min-width: 30px; width: 30px; }
.col-w-40 { min-width: 40px; width: 40px; }
.col-w-50 { min-width: 50px; width: 50px; }
.col-w-60 { min-width: 60px; width: 60px; }
.col-w-70 { min-width: 70px; width: 70px; }
.col-w-80 { min-width: 80px; width: 80px; }
.col-w-95 { min-width: 95px; width: 95px; }
.col-w-100 { min-width: 100px; width: 100px; }
.col-w-110 { min-width: 110px; width: 110px; }
.col-w-120 { min-width: 120px; width: 120px; }
.col-w-140 { min-width: 140px; width: 140px; }
.col-w-180 { min-width: 180px; width: 180px; }
.col-w-200 { min-width: 200px; width: 200px; }
.col-w-280 { min-width: 280px; width: 280px; }
.col-w-330 { min-width: 330px; width: 330px; }
.col-w-370 { min-width: 370px; width: 370px; }

.scrollable-table-container {
    overflow-x: auto !important;
    display: block;
    width: 100%;
}


.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 34px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    border-radius: 50%;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
}
input:checked + .slider { background-color: var(--primary-color); }
input:checked + .slider:before { transform: translateX(18px); }


.file-item { transition: all 0.2s; border-radius: 8px; margin-bottom: 5px; }
.file-item:hover { background-color: rgba(var(--primary-rgb), 0.05); }
.file-name { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; font-weight: 600; }
.file-control-btn {
    width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.2s ease; margin: 0 4px; border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.preview-btn { background: var(--info-color); color: white !important; }
.delete-btn { background: var(--danger-color); color: white !important; }



.header {
    height: auto !important;
    min-height: 70px;
}

.header, .left-sidebar, .page-wrapper {
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
}

.scroll-sidebar {
    height: calc(100vh - 70px);
    overflow-y: auto;
}


.tabulator .tabulator-footer .tabulator-calcs-holder,
.tabulator .tabulator-header .tabulator-calcs-holder {
    background: var(--table-hover-bg, #f8f9fa) !important;
    border-top: 1px solid var(--card-border-color, #dee2e6) !important;
    border-bottom: 1px solid var(--card-border-color, #dee2e6) !important;
}

.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row,
.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row {
    background: transparent !important;
    font-weight: bold !important;
    color: var(--text-primary-color, #212529) !important;
}

[data-bs-theme="dark"] .tabulator .tabulator-footer .tabulator-calcs-holder,
[data-bs-theme="dark"] .tabulator .tabulator-header .tabulator-calcs-holder {
    background: #2c2c2c !important;
}

.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row .tabulator-cell,
.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row .tabulator-cell {
    border-right: 1px solid var(--card-border-color, #dee2e6) !important;
}


table.dataTable tbody > tr.selected > *,
table.dataTable.stripe tbody > tr.odd.selected > *,
table.dataTable.stripe tbody > tr.even.selected > *,
table.dataTable.hover tbody > tr.selected:hover > *,
#main-wrapper table.dataTable tbody > tr.selected > *,
.tbllist tbody > tr.selected > *,
.table tbody > tr.selected > * {
    background-color: rgba(13, 110, 253, 0.08) !important; 
    background-image: none !important;
    color: inherit !important; 
    font-weight: inherit !important;
}


[data-bs-theme="dark"] table.dataTable tbody > tr.selected > *,
[data-bs-theme="dark"] table.dataTable.stripe tbody > tr.odd.selected > *,
[data-bs-theme="dark"] table.dataTable.stripe tbody > tr.even.selected > *,
[data-bs-theme="dark"] table.dataTable.hover tbody > tr.selected:hover > *,
[data-bs-theme="dark"] #main-wrapper table.dataTable tbody > tr.selected > *,
[data-bs-theme="dark"] .tbllist tbody > tr.selected > *,
[data-bs-theme="dark"] .table tbody > tr.selected > * {
    background-color: rgba(14, 165, 233, 0.15) !important; 
    background-image: none !important;
    color: inherit !important;
    font-weight: inherit !important;
}


table.dataTable tbody > tr.selected,
#main-wrapper table.dataTable tbody > tr.selected {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: inset 4px 0 0 #2563eb !important;
}

[data-bs-theme="dark"] table.dataTable tbody > tr.selected,
[data-bs-theme="dark"] #main-wrapper table.dataTable tbody > tr.selected {
    box-shadow: inset 4px 0 0 #0ea5e9 !important;
}


.btn-refresh-smart {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--card-color);
    border: 1px solid var(--card-border-color);
    color: #10b981; 
    padding: 0 !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    cursor: pointer;
}

.btn-refresh-smart:hover {
    background: #10b981;
    color: #fff;
    border-color: #10b981;
    transform: rotate(360deg);
    box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3);
}

.btn-refresh-smart:active {
    transform: scale(0.9);
}

.btn-refresh-smart i {
    font-size: 1.1rem;
    margin: 0 !important;
}


.dataTables_wrapper .dropdown-menu {
    border-radius: 12px !important;
    padding: 0.5rem !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.25) !important;
    min-width: 180px !important;
    background-color: #ffffff !important;
    opacity: 1 !important;
    z-index: 9999999999 !important;
}

[data-bs-theme="dark"] .dataTables_wrapper .dropdown-menu {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

.dataTables_wrapper .dropdown-item {
    border-radius: 8px !important;
    padding: 0.6rem 1rem !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.2s ease !important;
    font-size: 0.85rem !important;
}

.dataTables_wrapper .dropdown-item i {
    width: 20px;
    text-align: center;
    margin-right: 10px !important;
    font-size: 1rem;
}

.dataTables_wrapper .dropdown-item:hover {
    transform: translateX(4px);
}

::-webkit-scrollbar-track {
    background: var(--background-color);
}

::-webkit-scrollbar-thumb {
    background: rgba(var(--primary-rgb), 0.2);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--primary-rgb), 0.4);
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');


body { 
    overflow-x: hidden; 
    overflow-anchor: none; 
    position: relative; 
}

.textbreakcustom { 
    width: 16em; 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
}

.capitalize { 
    text-transform: capitalize; 
}

.animate {
    animation-duration: 0.2s;
    animation-fill-mode: both;
}

.animate.slideIn {
    animation-duration: 0.3s;
    animation-fill-mode: both;
    animation-name: slideIn;
}

@keyframes slideIn {
    0% { transform: translateY(1rem); opacity: 0; }
    100% { transform: translateY(0rem); opacity: 1; }
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); 
    z-index: 1000; 
}

.loading-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
}

.loading-icon {
    font-size: 24px;
    margin-right: 10px;
}


.jsgrid-load-shader {
    background: rgba(255, 255, 255, 0.8) !important;
    opacity: 1 !important;
    z-index: 10000 !important;
}

.jsgrid-load-panel {
    width: auto !important;
    height: auto !important;
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 20px 30px !important;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1) !important;
    color: #6366f1 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 700 !important;
    text-align: center !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    z-index: 10001 !important;
}

.jsgrid-load-panel::before {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    margin: 0 auto 10px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #6366f1;
    border-radius: 50%;
    animation: global-spin 1s linear infinite;
}

[data-bs-theme="dark"] .jsgrid-load-panel {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #818cf8 !important;
}

[data-bs-theme="dark"] .jsgrid-load-shader {
    background: rgba(15, 23, 42, 0.8) !important;
}

@keyframes global-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


#internet-status {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #f44336; 
    color: white;
    text-align: center;
    font-size: 24px; 
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); 
    display: none;
    z-index: 999999;
}

#internet-status i {
    font-size: 36px; 
    vertical-align: middle; 
    margin-right: 10px; 
}


.search-box-container {
    position: relative;
    display: flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    padding: 4px 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin: 5px 0;
}

.search-box-container:hover {
    background-color: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.15);
}

.search-box-container:focus-within {
    background-color: #fff;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
    transform: translateY(-1px);
}

.main-search-icon {
    color: #6c757d;
    font-size: 13px;
    margin-right: 8px;
    transition: color 0.3s ease;
}

.search-box-container:focus-within .main-search-icon {
    color: #007bff;
}

.main-search-input {
    border: none !important;
    background: transparent !important;
    outline: none !important;
    width: 100%;
    padding: 0 !important;
    font-size: 13px;
    color: #333;
    height: auto !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

.main-search-input::placeholder { color: #888; }

.search-badge {
    font-size: 10px;
    background: #007bff;
    color: white;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 5px;
    font-weight: 600;
    display: none;
}

[data-bs-theme="dark"] .search-box-container {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .search-box-container:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

[data-bs-theme="dark"] .search-box-container:focus-within {
    background-color: #1a1a1a;
    border-color: #375a7f;
    box-shadow: 0 0 0 3px rgba(55, 90, 127, 0.4);
}

[data-bs-theme="dark"] .main-search-input { color: #fff; }
[data-bs-theme="dark"] .main-search-input::placeholder { color: #888; }
[data-bs-theme="dark"] .main-search-icon { color: #a0a0a0; }
[data-bs-theme="dark"] .search-badge { background: #375a7f; }

.mini-sidebar .search-box-container {
    padding: 8px 0;
    justify-content: center;
    border-color: transparent;
    background-color: transparent;
}

.mini-sidebar .search-box-container:hover { background-color: rgba(0, 0, 0, 0.05); }

[data-bs-theme="dark"].mini-sidebar .search-box-container:hover { background-color: rgba(255, 255, 255, 0.05); }

.mini-sidebar .main-search-input,
.mini-sidebar .search-badge { display: none !important; }

.mini-sidebar .main-search-icon { margin-right: 0; font-size: 18px; }

[data-bs-theme="dark"] .ui-autocomplete {
    background-color: #2c2c2c !important;
    border-color: #4a4a4a !important;
    color: #e0e0e0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

[data-bs-theme="dark"] .ui-menu-item-wrapper { color: #e0e0e0 !important; }

[data-bs-theme="dark"] .ui-menu-item-wrapper.ui-state-active {
    background-color: #375a7f !important;
    border-color: #375a7f !important;
    color: #fff !important;
}


.card {
    border-radius: 16px;
    border: 1px solid var(--card-border-color);
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: var(--card-color);
}

.card-header {
    background-color: rgba(var(--primary-rgb), 0.03);
    border-bottom: 1px solid var(--card-border-color);
    border-radius: 16px 16px 0 0 !important;
    padding: 1rem 1.25rem;
}

.card-title {
    font-weight: 700;
    color: var(--text-primary-color);
    margin-bottom: 0;
}

.card-shortcut {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background-color: transparent;
    border: 1px solid #a3a0b766;
    border-radius: .25rem;
}

.page-titles {
    padding: 1.5rem 0;
    margin-bottom: 1rem;
}

.page-titles h3 {
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--text-primary-color);
}

.row.page-titles { display: none; }

.navbar-nav .card {
    min-width: 55px;
    height: 42px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Arial Narrow', Arial, sans-serif !important;
    text-decoration: none;
    border-radius: 8px !important;
    transition: all 0.2s ease-in-out;
    border: 1px solid rgba(0,0,0,0.05) !important;
    padding: 2px !important;
}

.navbar-nav .card:hover, .custom-nav-dropdown button:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.08) !important;
    filter: brightness(1.05);
}

.navbar-nav .card small {
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1.0;
}

.navbar-nav .card i {
    font-size: 16px;
    margin-bottom: 1px;
}

.modern-shortcut-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem 0.5rem;
    border-radius: 16px;
    background: var(--card-color, #fff);
    border: 1px solid var(--card-border-color);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.2);
    text-decoration: none !important;
    height: 100%;
    color: white !important; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.modern-shortcut-card i {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    transition: transform 0.3s ease;
}

.modern-shortcut-card h6 {
    font-weight: 700;
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.modern-shortcut-card.pos-grad { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); }
.modern-shortcut-card.dash-grad { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.modern-shortcut-card.sum-grad { background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); }
.modern-shortcut-card.coll-grad { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.modern-shortcut-card.pay-grad { background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%); }
.modern-shortcut-card.exp-grad { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.modern-shortcut-card.ai-grad { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); }
.modern-shortcut-card.post-grad { background: linear-gradient(135deg, #64748b 0%, #475569 100%); }
.modern-shortcut-card.list-grad { background: linear-gradient(135deg, #ec4899 0%, #db2777 100%); }

[data-bs-theme="dark"] .modern-shortcut-card { border-color: rgba(255,255,255,0.1); }

.selection-container {
    background: rgba(var(--primary-rgb), 0.05);
    border-radius: 20px;
    padding: 25px;
    border: 1px solid rgba(var(--primary-rgb), 0.1);
}

[data-bs-theme="dark"] .selection-container {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.05);
}

.selection-group .form-control {
    border-radius: 12px;
    height: auto;
    padding: 12px 18px;
    font-size: 0.95rem;
    border: 1px solid var(--card-border-color);
    background-color: var(--card-color);
    transition: all 0.3s ease;
}

.selection-group .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.15);
}


.btn {
    font-weight: 600;
    border-radius: 10px;
    margin: 3px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid transparent;
    letter-spacing: 0.4px;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-transform: capitalize;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.btn-sm { font-size: 0.825rem; border-radius: 8px; padding: 6px 14px; }
.btn-lg { font-size: 1.15rem; border-radius: 12px; padding: 12px 24px; }

.btn i, .btn span i { margin-right: 2px; font-size: 1.1em; vertical-align: middle; }
.btn-sm i { font-size: 1em; }

.btn-primary {
    background: var(--btn-gradient, var(--primary-color, #673ab7)) !important;
    border-color: var(--primary-color, #673ab7) !important;
    color: var(--btn-gradient-text-color, var(--btn-text-color, #fff)) !important;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb, 103, 58, 183), 0.2) !important;
}

.btn-primary:hover {
    background: var(--btn-gradient, var(--primary-color, #673ab7)) !important;
    filter: brightness(1.1) !important;
    box-shadow: 0 6px 18px rgba(var(--primary-rgb, 103, 58, 183), 0.35) !important;
    transform: translateY(-2px);
    color: var(--btn-gradient-text-color, var(--btn-text-color, #fff)) !important;
}

.btn-primary:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important; }

.btn-secondary {
    background-color: var(--card-color, #f8f9fa);
    border-color: var(--card-border-color, #dee2e6);
    color: var(--text-secondary-color, #6c757d);
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.btn-secondary:hover {
    background-color: var(--table-hover-bg, #e9ecef);
    border-color: var(--card-border-color);
    color: var(--text-primary-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

[data-bs-theme="dark"] .btn-secondary {
    background-color: #343a40;
    border-color: #495057;
    color: #e9ecef;
}

[data-bs-theme="dark"] .btn-secondary:hover {
    background-color: #23272b;
    color: #fff;
}

.btn-outline-theme {
    color: var(--primary-color, #673ab7);
    border-color: var(--primary-color, #673ab7);
    background: transparent;
}

.btn-outline-theme:hover {
    background-color: var(--primary-color, #673ab7);
    color: #fff;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.25);
    transform: translateY(-1px);
}

.btn-success { box-shadow: 0 4px 12px rgba(40, 167, 69, 0.2); }
.btn-success:hover { box-shadow: 0 6px 18px rgba(40, 167, 69, 0.35); transform: translateY(-2px); }

.btn-danger { box-shadow: 0 4px 12px rgba(220, 53, 69, 0.2); }
.btn-danger:hover { box-shadow: 0 6px 18px rgba(220, 53, 69, 0.35); transform: translateY(-2px); }

.btn-info { color: #fff; box-shadow: 0 4px 12px rgba(23, 162, 184, 0.2); }
.btn-info:hover { color: #fff; box-shadow: 0 6px 18px rgba(23, 162, 184, 0.35); transform: translateY(-2px); }

.dt-button {
    padding: 6px 16px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    transition: all 0.2s ease !important;
    border: 1px solid var(--card-border-color) !important;
    background: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    margin: 2px !important;
}

.dt-button:hover {
    background: var(--table-hover-bg) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.05) !important;
}

[data-theme="lime-green"] .btn-primary,
[data-theme="sky-aqua"] .btn-primary,
[data-theme="mint-leaf"] .btn-primary,
[data-theme="sunset-vibes"] .btn-primary { color: #000 !important; font-weight: 700; }

[data-theme="soft-dark"] .btn-primary {
    background-color: #607D8B;
    border-color: #546E7A;
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3); 
}

[data-theme="soft-dark"] .btn-outline-theme { color: #607D8B; border-color: #607D8B; }
[data-theme="soft-dark"] .btn-outline-theme:hover { background-color: #607D8B; color: #fff; }


.subscription-modal.modal.fade.show { backdrop-filter: blur(12px); background: rgba(0, 0, 0, 0.6); }
.subscription-modal .modal-dialog { max-width: 600px; }
.subscription-modal .modal-content { border-radius: 30px; border: 1px solid var(--card-border-color); background: var(--card-color); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); overflow: hidden; }
.subscription-modal .modal-header { border-bottom: none; padding: 1.5rem 1.5rem 0; }
.subscription-modal .modal-body { padding: 3.5rem 2.5rem; text-align: center; }

.subscription-modal .status-icon-wrapper { 
    width: 100px; 
    height: 100px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin: 0 auto 2.5rem; 
    font-size: 3rem; 
    position: relative; 
}

.subscription-modal .status-icon-wrapper::after { 
    content: ''; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    border: 4px solid transparent; 
    border-top-color: currentColor; 
    border-radius: 50%; 
    animation: spin 2s linear infinite; 
}

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.subscription-modal .status-warning { background-color: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.subscription-modal .status-danger { background-color: rgba(225, 29, 72, 0.1); color: #e11d48; }

.subscription-modal .validity-title { font-weight: 800; font-size: 1.8rem; margin-bottom: 1rem; color: var(--text-primary-color); letter-spacing: -0.5px; }

.subscription-modal .validity-days { 
    font-size: 4.5rem; 
    font-weight: 900; 
    letter-spacing: -2px; 
    margin: 0.5rem 0;
    background: var(--primary-gradient, linear-gradient(135deg, #6366f1 0%, #a855f7 100%)); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    line-height: 1; 
}

.subscription-modal .validity-subtitle { color: var(--text-secondary-color); font-size: 1.1rem; margin-bottom: 3rem; max-width: 400px; margin-left: auto; margin-right: auto; line-height: 1.6; }

.subscription-modal .action-btn, .subscription-modal .btn-acknowledge { 
    border-radius: 16px; 
    width: 220px; 
    height: 54px; 
    font-weight: 700; 
    text-transform: uppercase; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    padding: 5px 15px; 
    text-decoration: none !important; 
    border: none; 
    transition: all 0.3s ease; 
    letter-spacing: 1px;
    font-size: 0.85rem;
}

.subscription-modal .action-btn { background: var(--primary-gradient, linear-gradient(135deg, #6366f1 0%, #a855f7 100%)); color: white !important; box-shadow: 0 10px 20px -5px rgba(99, 102, 241, 0.5); }
.subscription-modal .btn-acknowledge { background: linear-gradient(135deg, #64748b 0%, #475569 100%); color: white !important; box-shadow: 0 10px 20px -5px rgba(100, 116, 139, 0.5); }

.subscription-modal .action-btn:hover, .subscription-modal .btn-acknowledge:hover {
    transform: translateY(-4px) scale(1.02);
    filter: brightness(1.1);
}

[data-bs-theme="dark"] .subscription-modal .modal-content { background-color: #1a1a2e; border-color: rgba(255,255,255,0.1); }

.modal-body h1 { font-weight: 900; font-size: 2.3em; text-transform: uppercase; }

.modal-body a.pre-order-btn {
    color: #000;
    background-color: gold;
    border-radius: 1em;
    padding: 1em;
    display: block;
    margin: 2em auto;
    width: 50%;
    font-size: 1.25em;
    font-weight: 6600;
}

.modal-body a.pre-order-btn:hover { background-color: #000; text-decoration: none; color: gold; }


.nav-action-item { transition: transform 0.2s ease; }
.nav-action-item:hover { transform: translateY(-2px); }

.nav-divider {
    height: 20px;
    width: 1px;
    background-color: var(--card-border-color);
    opacity: 0.6;
}

.profile-img-container {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--card-border-color);
    transition: all 0.3s ease;
}

.profile-img-container:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.3);
}

.profile-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.small-icon { font-size: 0.7rem; }

.dropdown-user-links .dropdown-item {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.dropdown-user-links .dropdown-item:hover {
    background-color: rgba(var(--primary-rgb), 0.08);
    padding-left: 1.25rem;
}

.theme-preview-circle {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.theme-preset-btn {
    font-size: 11px !important;
    padding: 6px 10px !important;
}

#custom-sidebar-toggle {
    border: 1px solid var(--card-border-color);
    border-radius: 8px;
    background: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    margin-right: 10px;
    transition: all 0.2s ease;
}

#custom-sidebar-toggle:hover {
    background-color: var(--table-hover-bg) !important;
    transform: scale(1.05);
}

#custom-sidebar-toggle i { color: inherit !important; }

.navbar-toggler {
    border-color: rgba(0,0,0,0.1);
    padding: 0.25rem 0.75rem;
    background: transparent !important;
}

.navbar-toggler:focus { outline: none; box-shadow: none; }

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .navbar-toggler { border-color: rgba(255, 255, 255, 0.1); }
[data-bs-theme="dark"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.7%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.dropdown-divider { height: 0; margin: .5rem 0; overflow: hidden; border-top: 1px solid rgba(0, 0, 0, 0.1); }
[data-bs-theme="dark"] .dropdown-divider { border-top: 1px solid rgba(255, 255, 255, 0.15); }

.navbar-nav .dropdown-item i { font-size: 1.2rem; color: var(--primary-color); }

.dropdown-item:hover { background-color: rgba(var(--primary-rgb, 0, 123, 255), 0.1) !important; color: inherit !important; }
.dropdown-item.active, .dropdown-item:active { background-color: var(--primary-color) !important; color: #fff !important; }
.dropdown-item i { width: 20px; text-align: center; margin-right: 8px; }


.select2-container--bootstrap-5 .select2-selection {
    background-color: var(--card-color) !important;
    border-color: var(--card-border-color) !important;
    color: var(--text-primary-color) !important;
    border-radius: 10px !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary-color) !important;
    padding-left: 12px !important;
}

.select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--card-color) !important;
    border-color: var(--card-border-color) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
    overflow: hidden !important;
}

.select2-container--bootstrap-5 .select2-results__option {
    color: var(--text-primary-color) !important;
    padding: 8px 12px !important;
}

.select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

.select2-container--bootstrap-5 .select2-results__option[aria-selected=true] {
    background-color: rgba(var(--primary-rgb), 0.15) !important;
    color: var(--primary-color) !important;
}

.select2-container--bootstrap-5 .select2-search__field {
    background-color: var(--background-color) !important;
    border-color: var(--card-border-color) !important;
    color: var(--text-primary-color) !important;
    border-radius: 8px !important;
}


@media (max-width: 991px) {
    .header { height: 50px !important; min-height: 50px !important; }
    
    .header .navbar {
        padding: 0 8px !important;
        height: 50px !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        background: var(--card-color) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .navbar-collapse {
        position: absolute;
        top: 50px;
        left: 0;
        width: 100%;
        background: var(--card-color);
        padding: 15px;
        border-radius: 0 0 20px 20px;
        box-shadow: 0 15px 30px rgba(0,0,0,0.12);
        z-index: 1000;
        max-height: 85vh;
        overflow-y: auto;
        border-top: 1px solid rgba(0,0,0,0.05);
    }

    .navbar-header .MenuClass { display: none !important; }

    #connectionStatus {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 7.5px !important;
        line-height: 1 !important;
        justify-content: center !important;
        align-items: flex-start !important; 
        white-space: nowrap !important;
        min-width: 55px !important;
    }

    #connectionStatus .MenuClass {
        display: block !important;
        font-size: 14px !important;
        margin-top: 1px !important;
        font-weight: bold;
        opacity: 1;
    }

    #internet-speed-container { margin: 0 !important; }
    #speed-indicator { font-size: 6.5px !important; font-weight: bold !important; }

    .header-actions-container {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-grow: 1 !important;
        gap: 8px !important;
        padding: 0 5px !important;
    }

    .nav-item.bg-card .d-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px !important;
    }

    .nav-item.bg-card .nav-action-item i { font-size: 0.9rem !important; }

    .profile-dropdown-container {
        margin-left: auto !important;
        flex-grow: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 10px !important;
    }

    .profile-img-container {
        width: 32px !important;
        height: 32px !important;
        margin: 0 !important;
        border: 1px solid var(--primary-color) !important;
        order: 2 !important;
    }

    .navbar-toggler {
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(0,0,0,0.04) !important;
        border-radius: 8px !important;
        color: var(--text-secondary-color) !important;
        order: 1 !important;
    }

    .navbar-nav { width: 100% !important; padding: 0 !important; }
    .nav-item { margin-bottom: 8px !important; width: 100% !important; }
    .custom-nav-dropdown { width: 100% !important; margin: 0 !important; }
    .custom-nav-dropdown .btn {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 10px !important;
        text-align: center !important;
        min-height: 55px !important;
    }
    .custom-nav-dropdown .btn i.fa-2x { font-size: 14px !important; margin-bottom: 2px !important; }
    .custom-nav-dropdown .btn span { font-size: 11px !important; font-weight: 600 !important; }
    .custom-nav-dropdown .btn div.d-flex { justify-content: center !important; width: 100% !important; margin-bottom: 2px !important; }
}

@media (min-width: 992px) {
    .mobile-action-grid { display: none !important; }
}

@media only screen and (max-width: 600px) and (min-width: 380px) {
    #compnaylistdata { width: 120px; }
}


.daterangepicker {
    font-family: inherit;
    border: none !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
    border-radius: 12px !important;
    padding: 8px !important;
    margin-top: 10px !important;
    z-index: 10001 !important; 
}


.daterangepicker .ranges ul {
    width: 180px !important;
    padding: 5px !important;
}

.daterangepicker .ranges li {
    border-radius: 6px !important;
    padding: 8px 12px !important;
    margin-bottom: 2px !important;
    font-weight: 500 !important;
    color: #4e73df !important;
    transition: all 0.2s ease !important;
}

.daterangepicker .ranges li:hover {
    background-color: #f8f9fc !important;
    color: #2e59d9 !important;
}

.daterangepicker .ranges li.active {
    background-color: #4e73df !important;
    color: #fff !important;
}


.daterangepicker .drp-calendar {
    padding: 10px !important;
    max-width: none !important;
}

.daterangepicker .calendar-table {
    border: none !important;
    padding: 0 !important;
}

.daterangepicker td.available:hover, 
.daterangepicker th.available:hover {
    background-color: #f8f9fc !important;
    border-radius: 50% !important;
}

.daterangepicker td.active, 
.daterangepicker td.active:hover {
    background-color: #4e73df !important;
    border-radius: 50% !important;
    color: #fff !important;
}

.daterangepicker td.in-range {
    background-color: rgba(78, 115, 223, 0.1) !important;
    color: #4e73df !important;
    border-radius: 0 !important;
}


.daterangepicker .calendar-table .next span, 
.daterangepicker .calendar-table .prev span {
    border-width: 0 2px 2px 0 !important;
    border-color: #4e73df !important;
}

.daterangepicker select.monthselect, 
.daterangepicker select.yearselect {
    padding: 4px !important;
    border-radius: 4px !important;
    border: 1px solid #e3e6f0 !important;
    font-size: 13px !important;
    color: #4e73df !important;
    background-color: #f8f9fc !important;
}


.daterangepicker .drp-buttons {
    padding: 12px 15px !important;
    border-top: 1px solid #eee !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

.daterangepicker .drp-selected {
    font-weight: 600 !important;
    color: #4e73df !important;
    margin-right: auto !important;
    font-size: 13px !important;
}

.daterangepicker .cancelBtn {
    background-color: #f8f9fc !important;
    border: 1px solid #e3e6f0 !important;
    color: #6e707e !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    transition: all 0.2s !important;
}

.daterangepicker .cancelBtn:hover {
    background-color: #eaecf4 !important;
}

.daterangepicker .applyBtn {
    background-color: #4e73df !important;
    border: 1px solid #4e73df !important;
    color: #fff !important;
    padding: 6px 20px !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 6px rgba(78, 115, 223, 0.2) !important;
    transition: all 0.2s !important;
}

.daterangepicker .applyBtn:hover {
    background-color: #2e59d9 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 12px rgba(78, 115, 223, 0.3) !important;
}


.input-group #daterange-btn {
    height: calc(1.5em + .75rem + 2px);
    vertical-align: middle;
}


.daterangepicker {
    margin-top: 4px !important; 
    font-family: 'Poppins', sans-serif !important;
    border-radius: 8px !important;
    border: 1px solid var(--card-border-color) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
}


.daterangepicker .ranges ul {
    max-height: 250px !important;
    overflow-y: auto !important;
    padding-right: 5px !important; 
}


.daterangepicker .ranges ul::-webkit-scrollbar {
    width: 6px;
}
.daterangepicker .ranges ul::-webkit-scrollbar-track {
    background: transparent;
}
.daterangepicker .ranges ul::-webkit-scrollbar-thumb {
    background-color: var(--text-secondary-color);
    border-radius: 3px;
}


.daterangepicker .ranges li.active {
    background-color: var(--primary-color) !important;
    color: #fff !important;
    font-weight: 600;
}

.daterangepicker .ranges li:hover {
    background-color: rgba(var(--primary-rgb), 0.1) !important;
    color: var(--primary-color) !important;
    border: 1px solid transparent !important;
}


.daterangepicker .calendar-table .next span, 
.daterangepicker .calendar-table .prev span {
    border-color: var(--text-secondary-color) !important;
}


.daterangepicker td.active, 
.daterangepicker td.active:hover {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

.daterangepicker td.in-range {
    background-color: rgba(var(--primary-rgb), 0.1) !important;
    color: var(--text-primary-color) !important;
}

.daterangepicker td.off, 
.daterangepicker td.off.in-range, 
.daterangepicker td.off.start-date, 
.daterangepicker td.off.end-date {
    background-color: transparent !important;
    color: var(--text-secondary-color) !important;
    opacity: 0.5;
}


.daterangepicker .drp-buttons {
    border-top: 1px solid var(--card-border-color) !important;
}

.daterangepicker .applyBtn {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    font-weight: 600;
}

.daterangepicker .cancelBtn {
    background-color: transparent !important;
    color: var(--text-secondary-color) !important;
    border: 1px solid var(--card-border-color) !important;
}


[data-bs-theme="dark"] .daterangepicker {
    background-color: #1e1e2d !important; 
    border-color: #333 !important;
}

[data-bs-theme="dark"] .daterangepicker .calendar-table {
    background-color: #1e1e2d !important;
    border-color: #1e1e2d !important;
}

[data-bs-theme="dark"] .daterangepicker td.available:hover, 
[data-bs-theme="dark"] .daterangepicker th.available:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}



.ui-dialog {
    background-color: var(--card-color) !important;
    border: 1px solid var(--card-border-color) !important;
    color: var(--text-primary-color) !important;
    border-radius: 8px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important;
    padding: 0 !important;
    
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}


.ui-dialog .ui-dialog-titlebar {
    background: var(--background-color) !important;
    border: none !important;
    border-bottom: 1px solid var(--card-border-color) !important;
    color: var(--primary-color) !important;
    padding: 1rem 1rem !important;
    border-radius: 8px 8px 0 0 !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ui-dialog .ui-dialog-title {
    float: none !important;
    margin: 0 !important;
    font-weight: 600;
}


.ui-dialog .ui-dialog-titlebar-close {
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 24px !important;
    height: 24px !important;
    background: transparent !important;
    border: none !important;
    color: var(--text-secondary-color) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.ui-dialog .ui-dialog-titlebar-close:hover {
    color: var(--danger-color) !important;
}


.ui-dialog .ui-dialog-titlebar-close .ui-button-icon {
    display: none !important;
}

.ui-dialog .ui-dialog-titlebar-close::after {
    content: "\f00d"; 
    font-family: "FontAwesome";
    font-size: 16px;
}

.ui-button-icon-space {
    display: none !important;
}


.ui-dialog .ui-dialog-content {
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    padding: 1.5rem !important;
    border: none !important;
}


.ui-dialog .ui-dialog-buttonpane {
    background-color: var(--background-color) !important;
    border-top: 1px solid var(--card-border-color) !important;
    padding: 0.75rem 1rem !important;
    margin: 0 !important;
    border-radius: 0 0 8px 8px !important;
}


.ui-dialog .ui-dialog-buttonpane button {
    margin: 0 0 0 0.5rem !important;
    padding: 0.4rem 1rem !important;
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid var(--card-border-color) !important;
    border-radius: 4px !important;
    transition: all 0.2s ease;
    font-weight: 500;
}

.ui-dialog .ui-dialog-buttonpane button:hover {
    background-color: var(--primary-color) !important;
    color: white !important;
    border-color: var(--primary-color) !important;
}


.ui-dialog .ui-dialog-buttonpane button:nth-child(1) {
    background-color: var(--primary-color) !important;
    color: white !important;
    border: 1px solid var(--primary-color) !important;
}

.ui-dialog .ui-dialog-buttonpane button:nth-child(1):hover {
    filter: brightness(110%);
}


.ui-widget-overlay {
    background: rgba(0, 0, 0, 0.5) !important;
    opacity: 1 !important;
}


.ui-autocomplete {
    background-color: var(--card-color) !important;
    border: 1px solid var(--card-border-color) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
    padding: 8px 0 !important;
    z-index: 10000 !important;
    max-height: 300px;
    overflow-y: auto;
    font-family: inherit;
}

.ui-menu-item {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ui-menu-item-wrapper {
    padding: 10px 20px !important;
    color: var(--text-primary-color) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    border: none !important;
    transition: all 0.2s ease;
    cursor: pointer !important;
}

.ui-menu-item-wrapper.ui-state-active {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    margin: 0 !important;
    border: none !important;
}


[data-bs-theme="dark"] .ui-autocomplete {
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
    background-color: #2c2c2c !important;
}

[data-bs-theme="dark"] .ui-menu-item-wrapper:hover,
[data-bs-theme="dark"] .ui-menu-item-wrapper.ui-state-active {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
}



.dt-buttons.btn-group {
    display: inline-flex !important;
    gap: 5px;
    margin-bottom: 10px;
}


.dt-buttons .btn {
    border-radius: 4px !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    transition: all 0.2s ease-in-out !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px;
}


.dt-buttons .btn:before {
    display: inline-block !important;
    font-family: "FontAwesome" !important;
    font-style: normal !important;
    font-weight: normal !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}


.dt-buttons .buttons-select-all {
    background-color: var(--info-color) !important;
    border-color: var(--info-color) !important;
    color: #fff !important;
}
.dt-buttons .buttons-select-all:before { content: "\f00c" !important; margin-right: 5px; } 


.dt-buttons .buttons-select-none {
    background-color: var(--warning-color) !important;
    border-color: var(--warning-color) !important;
    color: #000 !important;
}
.dt-buttons .buttons-select-none:before { content: "\f00d" !important; margin-right: 5px; } 


.dt-buttons .buttons-select-rows {
    background-color: #b91c1c !important;
    border-color: #b91c1c !important;
    color: #fff !important;
}
.dt-buttons .buttons-select-rows:before { content: "\f067" !important; margin-right: 5px; } 


.dt-buttons .btn.disabled, 
.dt-buttons .btn:disabled {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
}


.dt-buttons .btn.active {
    box-shadow: inset 0 3px 5px rgba(0,0,0,0.125) !important;
    opacity: 1 !important;
}


[data-bs-theme="dark"] .dt-buttons .btn {
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

[data-bs-theme="dark"] .buttons-select-none {
    color: #000 !important; 
}


.dt-buttons .btn span {
    display: inline-block !important;
}



.select2-container--bootstrap4 .select2-selection {
    width: 100%;
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid var(--card-border-color) !important;
    font-weight: 500 !important;
    border-radius: .25rem;
    -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.select2-container--bootstrap4.select2-container--focus .select2-selection {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25) !important;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary-color) !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    padding-left: 0.75rem !important;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
    color: var(--text-secondary-color) !important;
}

.select2-container--bootstrap4 .select2-dropdown {
    background-color: var(--card-color) !important;
    border-color: var(--card-border-color) !important;
    color: var(--text-primary-color) !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.select2-container--bootstrap4 .select2-results__option {
    color: var(--text-primary-color) !important;
    background-color: var(--card-color) !important;
}

.select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

.select2-container--bootstrap4 .select2-results__option[aria-selected="true"] {
    background-color: rgba(var(--primary-rgb), 0.15) !important;
    color: var(--primary-color) !important;
}

.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field {
    background-color: var(--background-color) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid var(--card-border-color) !important;
}


.select2-container--default .select2-selection--multiple {
    background-color: var(--card-color) !important;
    border: 1px solid var(--card-border-color) !important;
    border-radius: 4px;
    cursor: text;
    color: var(--text-primary-color) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
    color: #fff !important;
    border-radius: 4px;
    padding: 2px 6px;
    margin-top: 5px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff !important;
    margin-right: 5px;
    border-right: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    background-color: rgba(0, 0, 0, 0.1) !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--card-color) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}




.card-custom {
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid var(--card-border-color) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 6px var(--shadow-color) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.card-custom:hover {
    box-shadow: 0 8px 15px var(--shadow-color) !important;
}


.form-control-custom {
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid var(--card-border-color) !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.form-control-custom:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25) !important;
    background-color: var(--card-color) !important;
}


.btn-theme {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
}

.btn-theme:hover {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px var(--shadow-color) !important;
}


.bg-card { background-color: var(--card-color) !important; }
.bg-app { background-color: var(--background-color) !important; }


.text-theme-primary { color: var(--text-primary-color) !important; }
.text-theme-secondary { color: var(--text-secondary-color) !important; }
.text-theme-main { color: var(--primary-color) !important; }




.btn-outline-secondary {
    color: var(--text-secondary-color) !important;
    border-color: var(--card-border-color) !important;
    background-color: transparent !important;
}

.btn-outline-secondary:hover, 
.btn-outline-secondary.active, 
.btn-outline-secondary:not(:disabled):not(.disabled):active {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}


.btn-group-toggle > .btn.active {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: #fff !important;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
}


.btn-theme-outline {
    border: 1px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
    background-color: transparent !important;
    transition: all 0.3s ease !important;
}

.btn-theme-outline:hover {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}


::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--background-color);
}

::-webkit-scrollbar-thumb {
    background: var(--card-border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary-color);
}


::selection {
    background: rgba(var(--primary-rgb), 0.3);
    color: var(--text-primary-color);
}







.tabulator {

    background-color: var(--card-color) !important;

    color: var(--text-primary-color) !important;

    border: 1px solid var(--card-border-color) !important;

    border-radius: 12px !important;

}







.tabulator .tabulator-header {



    background-color: color-mix(in srgb, var(--secondary-color) 40%, #141523) !important;



    color: #ffffff !important; 



    border-bottom: 2px solid var(--card-border-color) !important;



    border-radius: 12px 12px 0 0 !important;



}







.tabulator .tabulator-header .tabulator-col {



    background-color: transparent !important;



    color: #ffffff !important;



    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;



    font-weight: 600 !important;



    padding: 12px 4px !important;



}








[data-bs-theme="light"] .tabulator .tabulator-header {
    background-color: color-mix(in srgb, var(--primary-color) 12%, var(--background-color)) !important;
    color: var(--text-primary-color) !important;
    border-bottom: 1px solid var(--card-border-color) !important;
}

[data-bs-theme="light"] .tabulator .tabulator-header .tabulator-col {
    color: var(--text-primary-color) !important;
    border-right: 1px solid var(--card-border-color) !important;
}








.tabulator .tabulator-row {

    background-color: var(--card-color) !important;

    color: var(--text-primary-color) !important;

    border-bottom: 1px solid var(--card-border-color) !important;

}







.tabulator .tabulator-row.tabulator-row-even {

    background-color: color-mix(in srgb, var(--text-primary-color) 2%, var(--card-color)) !important;

}





.tabulator .tabulator-row.tabulator-selectable:hover {

    background-color: color-mix(in srgb, var(--primary-color) 10%, var(--card-color)) !important;

    color: var(--text-primary-color) !important;

    cursor: pointer;

}



.tabulator .tabulator-row.tabulator-selectable:hover .tabulator-cell {

    background-color: transparent !important;

}





.tabulator .tabulator-row.tabulator-selected,

.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-selected {

    background-color: color-mix(in srgb, var(--primary-color) 18%, var(--card-color)) !important;

    color: var(--text-primary-color) !important;

}







.daterangepicker {
    background-color: var(--card-color) !important;
    border: 1px solid var(--card-border-color) !important;
    color: var(--text-primary-color) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
}

.daterangepicker .calendar-table {
    background-color: var(--card-color) !important;
    border: 1px solid var(--card-border-color) !important;
}


.daterangepicker .calendar-table .next span, 
.daterangepicker .calendar-table .prev span {
    border-color: var(--text-primary-color) !important;
}

.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
    background-color: var(--background-color) !important;
    color: var(--text-secondary-color) !important;
}

.daterangepicker td.available:hover, .daterangepicker th.available:hover {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

.daterangepicker td.in-range {
    background-color: rgba(var(--primary-rgb), 0.1) !important;
    color: var(--text-primary-color) !important;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

.daterangepicker .ranges li {
    font-size: 13px !important;
    background-color: var(--background-color) !important;
    border: 1px solid var(--card-border-color) !important;
    border-radius: 4px !important;
    color: var(--text-primary-color) !important;
    padding: 5px 12px !important;
    margin-bottom: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.daterangepicker .ranges li:hover,
.daterangepicker .ranges li.active {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}


.well {
    min-height: 20px;
    padding: 15px;
    margin-bottom: 20px;
    background-color: var(--background-color) !important;
    border: 1px solid var(--card-border-color) !important;
    border-radius: 12px;
    color: var(--text-primary-color);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

[data-bs-theme="dark"] .well {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .2);
}


.form-control:disabled, 
.form-control[readonly],
input:disabled,
input[readonly],
select:disabled,
textarea:disabled {
    background-color: color-mix(in srgb, var(--background-color) 95%, var(--text-primary-color) 5%) !important;
    color: var(--text-secondary-color) !important;
    opacity: 0.85 !important;
    cursor: not-allowed !important;
    border-color: var(--card-border-color) !important;
}

input[readonly].main-search-input {
    cursor: pointer !important;
}


[data-bs-theme="dark"] .form-control:disabled, 
[data-bs-theme="dark"] .form-control[readonly],
[data-bs-theme="dark"] input:disabled,
[data-bs-theme="dark"] input[readonly] {
    background-color: color-mix(in srgb, var(--card-color) 85%, black) !important;
    color: color-mix(in srgb, var(--text-secondary-color) 80%, white) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}


.jsgrid {
    border: 1px solid var(--card-border-color) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.jsgrid-grid-header {
    background-color: color-mix(in srgb, var(--primary-color) 10%, var(--card-color)) !important;
    border: none !important;
    border-bottom: 1px solid var(--card-border-color) !important;
}

.jsgrid-grid-body {
    background-color: var(--card-color) !important;
    border: none !important;
}

.jsgrid-header-row > .jsgrid-header-cell,
.jsgrid-filter-row > .jsgrid-cell,
.jsgrid-insert-row > .jsgrid-cell,
.jsgrid-edit-row > .jsgrid-cell {
    background-color: transparent !important;
    border-color: var(--card-border-color) !important;
}

.jsgrid-header-row > .jsgrid-header-cell {
    background-color: color-mix(in srgb, var(--primary-color) 10%, var(--card-color)) !important;
    color: var(--text-primary-color) !important;
    font-weight: 600 !important;
}

.jsgrid-table {
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border-collapse: collapse !important;
}

.jsgrid-cell {
    color: var(--text-primary-color) !important;
    border-color: var(--card-border-color) !important;
}

.jsgrid-row > .jsgrid-cell {
    background-color: var(--card-color) !important;
}

.jsgrid-alt-row > .jsgrid-cell {
    background-color: color-mix(in srgb, var(--text-primary-color) 2%, var(--card-color)) !important;
}


.jsgrid-edit-row > .jsgrid-cell {
    background-color: color-mix(in srgb, var(--primary-color) 15%, var(--card-color)) !important;
}

.jsgrid-insert-row > .jsgrid-cell {
    background-color: color-mix(in srgb, var(--accent-color) 10%, var(--card-color)) !important;
}

.jsgrid-row:hover > .jsgrid-cell, 
.jsgrid-alt-row:hover > .jsgrid-cell {
    background-color: color-mix(in srgb, var(--primary-color) 10%, var(--card-color)) !important;
    cursor: pointer;
}

.jsgrid-filter-row input,
.jsgrid-filter-row select,
.jsgrid-filter-row textarea,
.jsgrid-edit-row input,
.jsgrid-edit-row select,
.jsgrid-edit-row textarea,
.jsgrid-insert-row input,
.jsgrid-insert-row select,
.jsgrid-insert-row textarea {
    background-color: var(--background-color) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid var(--card-border-color) !important;
    padding: 4px 10px !important;
    width: 100% !important;
    border-radius: 6px !important;
    height: 36px !important; 
    font-size: 14px !important;
}


.jsgrid-button {
    width: 16px !important; 
    height: 16px !important;
    margin: 0 5px !important; 
    opacity: 0.7;
    transition: opacity 0.2s ease !important;
    cursor: pointer;
    vertical-align: middle !important;
    display: inline-block !important;
    border: none !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
}

.jsgrid-button:hover {
    opacity: 1 !important;
    transform: scale(1.2); 
}


.jsgrid-control-field {
    white-space: nowrap !important;
    text-align: center !important;
    vertical-align: middle !important;
    padding: 0 5px !important; 
    line-height: 0 !important; 
}

.jsgrid-control-field .jsgrid-button {
    margin: 0 4px !important;
    float: none !important;
}


.jsgrid-table .jsgrid-control-field {
    display: table-cell !important;
}


.jsgrid-cell input[type="number"] {
    padding-right: 2px !important; 
}


.jsgrid-cell input[type="number"]::-webkit-inner-spin-button, 
.jsgrid-cell input[type="number"]::-webkit-outer-spin-button {
    margin-left: 8px !important; 
    opacity: 1; 
    cursor: pointer;
    height: 28px; 
}


[data-bs-theme="dark"] .jsgrid-button {
    filter: invert(0.8) brightness(1.5) contrast(1.2) !important;
}

.jsgrid-selected-row > .jsgrid-cell {
    background-color: color-mix(in srgb, var(--primary-color) 20%, var(--card-color)) !important;
    color: var(--text-primary-color) !important;
}

.jsgrid-pager-container {
    color: var(--text-primary-color) !important;
    margin-top: 15px !important;
    padding: 10px 0 !important;
    border-top: 1px solid var(--card-border-color) !important;
}

.jsgrid-pager {
    color: var(--text-secondary-color) !important;
    font-size: 13px !important;
}

.jsgrid-pager-page, 
.jsgrid-pager-nav-button {
    margin: 0 2px !important;
}

.jsgrid-pager-page a, 
.jsgrid-pager-nav-button a {
    color: var(--text-primary-color) !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.jsgrid-pager-page a:hover, 
.jsgrid-pager-nav-button a:hover {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

.jsgrid-pager-current-page {
    font-weight: bold !important;
    color: #fff !important;
    background-color: var(--primary-color) !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 4px var(--shadow-color) !important;
}

.jsgrid-pager-nav-inactive-button a {
    color: var(--text-secondary-color) !important;
    opacity: 0.5 !important;
    cursor: default !important;
    pointer-events: none !important;
}

.jsgrid-pager-nav-inactive-button a:hover {
    background-color: transparent !important;
}


[data-bs-theme="dark"] .jsgrid-header-row > .jsgrid-header-cell {
    background-color: color-mix(in srgb, var(--secondary-color) 40%, #141523) !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .jsgrid-filter-row input,
[data-bs-theme="dark"] .jsgrid-filter-row select,
[data-bs-theme="dark"] .jsgrid-edit-row input,
[data-bs-theme="dark"] .jsgrid-edit-row select,
[data-bs-theme="dark"] .jsgrid-insert-row input,
[data-bs-theme="dark"] .jsgrid-insert-row select {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}


.table {
    color: var(--text-primary-color) !important;
}

.table-bordered {
    border-color: var(--card-border-color) !important;
}

.table-bordered th,
.table-bordered td {
    border-color: var(--card-border-color) !important;
}

.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid var(--card-border-color) !important;
    background-color: color-mix(in srgb, var(--primary-color) 5%, var(--card-color)) !important;
    color: var(--text-primary-color) !important;
    font-size: 16px !important;
}

.table td {
    font-size: 14px !important;
}


.thead-light th {
    background-color: color-mix(in srgb, var(--primary-color) 10%, var(--card-color)) !important;
    color: var(--text-primary-color) !important;
    border-color: var(--card-border-color) !important;
}

[data-bs-theme="dark"] .thead-light th {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(var(--primary-rgb), 0.02) !important;
}

.table-hover tbody tr:hover {
    background-color: rgba(var(--primary-rgb), 0.05) !important;
    color: var(--text-primary-color) !important;
}


.jsgrid-nodata-row > .jsgrid-cell {
    background-color: var(--card-color) !important;
    color: var(--text-secondary-color) !important;
    text-align: center !important;
}


#columnVisibilityMenu {
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid var(--card-border-color) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
}

#columnVisibilityMenu .form-check-label {
    color: var(--text-primary-color) !important;
}

#columnVisibilityMenu .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

#columnVisibilityMenu .col-md-4 > div:hover {
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
    border-radius: 4px;
    transition: background-color 0.2s ease;
}


[data-bs-theme="dark"] #columnVisibilityMenu {
    border-color: rgba(255, 255, 255, 0.1) !important;
}


footer, .footer, #footer {
    background-color: var(--card-color) !important;
    color: var(--text-secondary-color) !important;
    border-top: 1px solid var(--card-border-color) !important;
    padding: 15px 20px !important;
    transition: all 0.3s ease;
    
    
    position: static !important;
    width: 100% !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    float: none !important;
}


footer p, .footer p, #footer p {
    background-color: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
}

footer a, .footer a, #footer a {
    color: var(--primary-color) !important;
    font-weight: 600;
}

[data-bs-theme="dark"] footer, 
[data-bs-theme="dark"] .footer, 
[data-bs-theme="dark"] #footer {
    background-color: var(--background-color) !important;
    border-top-color: rgba(255, 255, 255, 0.05) !important;
}


#DocType, #DocTypeId {
    background-color: color-mix(in srgb, var(--primary-color) 10%, var(--card-color)) !important;
    border: 2px solid var(--primary-color) !important;
    font-weight: 600 !important;
    color: var(--text-primary-color) !important;
    transition: all 0.3s ease;
}

#DocType:focus, #DocTypeId:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25) !important;
    background-color: color-mix(in srgb, var(--primary-color) 15%, var(--card-color)) !important;
}


.doctype-warning {
    background-color: #fff3cd !important;
    border-color: #ffeeba !important;
    color: #856404 !important;
}

[data-bs-theme="dark"] .doctype-warning {
    background-color: rgba(255, 193, 7, 0.2) !important;
    border-color: #ffc107 !important;
    color: #ffc107 !important;
}


#validationSummary .alert-danger {
    background-color: rgba(220, 53, 69, 0.05) !important;
    border: 1px solid rgba(220, 53, 69, 0.2) !important;
    border-left: 4px solid #dc3545 !important;
}

[data-bs-theme="dark"] #validationSummary .alert-danger {
    background-color: rgba(220, 53, 69, 0.15) !important;
    border-color: rgba(220, 53, 69, 0.3) !important;
}

#validationSummary ul {
    list-style-type: none;
}





.bg-body-tertiary {
    background-color: var(--background-color) !important;
}

[data-bs-theme="dark"] .bg-body-tertiary {
    background-color: var(--background-color) !important;
}


.card {
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border-color: var(--card-border-color) !important;
}

.card .card-header, .card .card-footer {
    background-color: rgba(var(--primary-rgb), 0.05) !important;
    border-color: var(--card-border-color) !important;
    color: var(--text-primary-color) !important;
}


.bg-light {
    background-color: var(--background-color) !important;
}

.bg-white {
    background-color: var(--card-color) !important;
}


.bg-gradient-primary-accent {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%) !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .text-body-secondary {
    color: var(--text-secondary-color) !important;
}


.owl-carousel .item .card {
    background-color: var(--card-color) !important;
}


:root, [data-bs-theme="light"] {
    --bs-body-bg: var(--background-color);
    --bs-body-color: var(--text-primary-color);
    --bs-card-bg: var(--card-color);
    --bs-card-border-color: var(--card-border-color);
    --bs-tertiary-bg: var(--background-color);
    --bs-secondary-bg: var(--card-color);
    --bs-dropdown-bg: var(--card-color);
    --bs-dropdown-color: var(--text-primary-color);
    --bs-dropdown-link-color: var(--text-primary-color);
    --bs-dropdown-link-hover-bg: rgba(var(--primary-rgb), 0.1);
    --bs-dropdown-border-color: var(--card-border-color);
    color-scheme: light;
}

[data-bs-theme="dark"] {
    --bs-body-bg: var(--background-color);
    --bs-body-color: var(--text-primary-color);
    --bs-card-bg: var(--card-color);
    --bs-card-border-color: var(--card-border-color);
    --bs-tertiary-bg: var(--background-color);
    --bs-secondary-bg: var(--card-color);
    --bs-dropdown-bg: var(--card-color);
    --bs-dropdown-color: var(--text-primary-color);
    --bs-dropdown-link-color: var(--text-primary-color);
    --bs-dropdown-link-hover-bg: rgba(var(--primary-rgb), 0.2);
    --bs-dropdown-border-color: var(--card-border-color);
    color-scheme: dark; 
}


[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--card-color) !important;
    border-color: var(--card-border-color) !important;
    color: var(--text-primary-color) !important;
}

[data-bs-theme="dark"] .dropdown-item {
    color: var(--text-primary-color) !important;
}

[data-bs-theme="dark"] .dropdown-item:hover, 
[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: rgba(var(--primary-rgb), 0.2) !important;
    color: #fff !important;
}


[data-bs-theme="dark"] input[type="date"],
[data-bs-theme="dark"] input[type="datetime-local"],
[data-bs-theme="dark"] input[type="month"],
[data-bs-theme="dark"] input[type="time"] {
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border-color: var(--card-border-color) !important;
}


body {
    background-color: transparent !important;
    color: inherit !important;
}

.table-light tfoot {
    background-color: rgba(0, 0, 0, 0.05) !important;
    border-top: 2px solid #dee2e6;
}

[data-bs-theme="dark"] .table-light {
    --bs-table-color: #dee2e6 !important;
    --bs-table-bg: #212529 !important;
    --bs-table-border-color: #495057 !important;
    --bs-table-striped-bg: #2c3034 !important;
    --bs-table-hover-bg: #323539 !important;
    background-color: #212529 !important;
    color: #dee2e6 !important;
}

[data-bs-theme="dark"] .table-light tfoot {
    background-color: #2b3035 !important;
    color: #f8f9fa !important;
    border-top: 2px solid #495057;
}

[data-bs-theme="dark"] .table-light .badge.bg-light.text-dark {
    background-color: #495057 !important;
    color: #f8f9fa !important;
    border: 1px solid #6c757d !important;
}


[data-bs-theme="dark"] .child-table-wrapper .badge.bg-light.text-dark {
    background-color: #495057 !important;
    color: #f8f9fa !important;
    border: 1px solid #6c757d !important;
}

.child-table-wrapper {
    background: var(--bs-body-bg);
    padding: 1rem;
    border-radius: 12px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
    margin-bottom: 1rem;
    border: 1px solid var(--bs-border-color);
}


.text-wrap-break {
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    min-width: 150px;
    max-width: 400px;
    vertical-align: top !important;
}


.note-scroll-container {
    max-height: 150px;
    overflow-y: auto;
    display: block;
    width: 100%;
}


.dataTables_scrollHeadInner, .dataTables_scrollHeadInner table {
    width: 100% !important;
}




html[data-bs-theme="dark"] body .tabulator .tabulator-footer .tabulator-calcs-holder,
html[data-bs-theme="dark"] body .tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row,
html[data-bs-theme="dark"] body .tabulator .tabulator-header .tabulator-calcs-holder,
html[data-bs-theme="dark"] body .tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row {
    background: var(--card-color, #1a1a2e) !important;
    color: var(--text-primary-color, #ffffff) !important;
    border-top: 1px solid var(--card-border-color, rgba(255,255,255,0.1)) !important;
    border-bottom: 1px solid var(--card-border-color, rgba(255,255,255,0.1)) !important;
}


html[data-bs-theme="dark"] body .tabulator .tabulator-row {
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
}


html[data-bs-theme="dark"] body input[type="date"]::-webkit-calendar-picker-indicator,
html[data-bs-theme="dark"] body input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(100%) !important;
    cursor: pointer;
}




[data-bs-theme="dark"] .btn-light {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .btn-light:hover,
[data-bs-theme="dark"] .btn-light:focus,
[data-bs-theme="dark"] .btn-light:active {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
    box-shadow: 0 4px 8px var(--shadow-color) !important;
}


[data-bs-theme="dark"] .bg-light {
    background-color: var(--background-color) !important;
    color: var(--text-primary-color) !important;
}


[data-bs-theme="dark"] .bg-white {
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
}


[data-bs-theme="dark"] .text-dark {
    color: var(--text-primary-color) !important;
}


[data-bs-theme="dark"] .badge.bg-light {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid var(--card-border-color) !important;
}


[data-bs-theme="dark"] .input-group-text.bg-light {
    background-color: color-mix(in srgb, var(--card-color) 90%, white 10%) !important;
    color: var(--text-primary-color) !important;
    border-color: var(--card-border-color) !important;
}

/* --- Global Modern Dropdown & Select2 Styling --- */

/* Standard HTML Select styling to match the modern look */
.form-select.rounded-pill, 
.form-control.rounded-pill {
    padding-left: 1rem !important;
    padding-right: 2.5rem !important;
}

/* Select2 Global Enhancements */
.select2-container--bootstrap4 .select2-selection--single,
.select2-container--default .select2-selection--single {
    height: calc(1.5em + 0.75rem + 2px) !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    border-radius: 50rem !important;
    background-color: var(--card-color) !important;
    border: 1px solid var(--card-border-color) !important;
    transition: all 0.2s ease-in-out !important;
}

.select2-container--bootstrap4.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.15) !important;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary-color) !important;
    padding-left: 0.5rem !important;
    line-height: 2 !important;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow,
.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 10px !important;
}

.select2-container--bootstrap4 .select2-dropdown,
.select2-container--default .select2-dropdown {
    border-radius: 12px !important;
    margin-top: 5px !important;
    border: 1px solid var(--card-border-color) !important;
    overflow: hidden !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
    background-color: var(--card-color) !important;
}

.select2-search--dropdown .select2-search__field {
    border-radius: 8px !important;
    padding: 6px 12px !important;
    margin: 8px !important;
    width: calc(100% - 16px) !important;
    background-color: var(--background-color) !important;
    border: 1px solid var(--card-border-color) !important;
    color: var(--text-primary-color) !important;
}

.select2-results__option {
    padding: 8px 15px !important;
    font-size: 0.9rem !important;
    transition: all 0.1s ease !important;
}

.select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

/* Input group pill styling fix for elements like Warehouse dropdown */
.input-group.rounded-pill {
    padding: 2px 8px !important;
    align-items: center !important;
    background-color: var(--card-color) !important;
    border: 1px solid var(--card-border-color) !important;
    margin-bottom: 0.5rem !important; /* Proper margin for spacing */
}

.input-group.rounded-pill .input-group-text {
    background: transparent !important;
    border: none !important;
    padding-right: 0 !important;
    color: var(--primary-color) !important;
}

.input-group.rounded-pill .form-select,
.input-group.rounded-pill .form-control {
    background: transparent !important;
    border: none !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
}

/* Global margin for form groups and rows to prevent elements from touching */
.form-group, .mb-3, .mb-4 {
    margin-bottom: 1.25rem !important;
}



/* --- Refined Padding for Select2 & Modern Inputs --- */

.select2-container--bootstrap4 .select2-selection--single,
.select2-container--default .select2-selection--single {
    height: 48px !important; /* Standardized taller height */
    padding: 8px 16px !important;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 12px !important;
    line-height: 32px !important;
    font-size: 0.95rem !important;
}

/* Modern Input Group Pill Padding Enhancement */
.input-group.rounded-pill {
    padding: 8px 18px !important;
    min-height: 48px !important;
}

.input-group.rounded-pill .form-select,
.input-group.rounded-pill .form-control {
    padding-left: 12px !important;
    font-size: 0.95rem !important;
}

.input-group.rounded-pill i, 
.input-group.rounded-pill .fa-solid {
    font-size: 1.1rem !important;
}

/* Global Select Vertical Padding */
.form-select, .form-control {
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
    padding-left: 1rem !important;
}





.card-actions .btn {
    font-size: 0.875rem;
}

.filter-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #6c757d;
    margin-bottom: 0.25rem;
    display: block;
}

.dropdown-item i {
    width: 20px;
    text-align: center;
    margin-right: 8px;
}

.btn-group-toggle .btn {
    transition: all 0.2s ease-in-out;
}


.summary-card {
    border: none;
    border-radius: 12px;
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}


.summary-card::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -60%;
    width: 20%;
    height: 200%;
    opacity: 0;
    transform: rotate(30deg);
    background: rgba(255, 255, 255, 0.13);
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0.13) 0%,
        rgba(255, 255, 255, 0.13) 77%,
        rgba(255, 255, 255, 0.5) 92%,
        rgba(255, 255, 255, 0.0) 100%
    );
    transition: opacity 0.5s, left 0.5s;
}

.summary-card:hover::after {
    opacity: 1;
    left: 130%;
}

.summary-card:hover {
}

.summary-card.active {
    transform: scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

[data-bs-theme="dark"] .summary-card.active {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.summary-card.inactive {
    opacity: 0.7;
    filter: grayscale(0.6);
    transform: scale(0.98);
}

.summary-card .card-body {
    padding: 1.25rem;
}

.summary-card .icon-circle {
    width: 54px;
    height: 54px;
    border-radius: 14px; 
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    background-color: rgba(255, 255, 255, 0.15);
    margin-right: 1.25rem;
    backdrop-filter: blur(4px);
}


.bg-gradient-primary { background: linear-gradient(135deg, #3a1c71 0%, #d76d77 50%, #ffaf7b 100%); color: #fff; } 
.bg-gradient-secondary { background: linear-gradient(135deg, #1e2a38 0%, #34495e 100%); color: #fff; } 
.bg-gradient-warning { background: linear-gradient(135deg, #ff4e50 0%, #f9d423 100%); color: #fff; } 
.bg-gradient-success { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); color: #fff; } 
.bg-gradient-info { background: linear-gradient(135deg, #3c7a7e 0%, #1058bb 100%); color: #fff; } 
.bg-gradient-danger { background: linear-gradient(135deg, #ee0979 0%, #ff6a00 100%); color: #fff; } 


.bg-gradient-primary h6, .bg-gradient-secondary h6, .bg-gradient-warning h6, .bg-gradient-success h6, .bg-gradient-info h6, .bg-gradient-danger h6,
.bg-gradient-primary h5, .bg-gradient-secondary h5, .bg-gradient-warning h5, .bg-gradient-success h5, .bg-gradient-info h5, .bg-gradient-danger h5,
.bg-gradient-primary h4, .bg-gradient-secondary h4, .bg-gradient-warning h4, .bg-gradient-success h4, .bg-gradient-info h4, .bg-gradient-danger h4 {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.bg-gradient-primary h3, .bg-gradient-secondary h3, .bg-gradient-warning h3, .bg-gradient-success h3, .bg-gradient-info h3, .bg-gradient-danger h3 {
    color: #ffffff !important;
    font-weight: 800;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.bg-gradient-primary .small-text, .bg-gradient-secondary .small-text, .bg-gradient-warning .small-text, .bg-gradient-success .small-text, .bg-gradient-info .small-text, .bg-gradient-danger .small-text {
    color: rgba(255, 255, 255, 0.8) !important;
}



table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc,
table.dataTable thead td.sorting,
table.dataTable thead td.sorting_asc,
table.dataTable thead td.sorting_desc,
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    background-image: none !important;
}


table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc_disabled:before,

div.dataTables_scrollBody table thead .sorting:after,
div.dataTables_scrollBody table thead .sorting_asc:after,
div.dataTables_scrollBody table thead .sorting_desc:after,
table.dataTable.table-sm .sorting:before,
table.dataTable.table-sm .sorting_asc:before,
table.dataTable.table-sm .sorting_desc:before,
table.dataTable.table-sm .sorting:after,
table.dataTable.table-sm .sorting_asc:after,
table.dataTable.table-sm .sorting_desc:after {
    display: none !important; 
    content: "" !important;
    background-image: none !important;
}


.dt-column-order {
    display: none !important;
}


table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    position: relative !important;
    cursor: pointer !important;
    padding-right: 25px !important; 
    background-image: none !important;
}


table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after,
.dataTable thead th.sorting:after,
.dataTable thead th.sorting_asc:after,
.dataTable thead th.sorting_desc:after {
    display: inline-block !important;
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    font-family: 'FontAwesome' !important;
    opacity: 0.25;
    font-size: 0.8rem;
    line-height: 1 !important;
    visibility: visible !important;
    z-index: 5;
    content: "\f0dc" !important;
}


table.dataTable thead th.sorting_asc:after,
.dataTable thead th.sorting_asc:after {
    content: "\f0de" !important;
    opacity: 0.9 !important;
    color: var(--primary-color) !important;
}

table.dataTable thead th.sorting_desc:after,
.dataTable thead th.sorting_desc:after {
    content: "\f0dd" !important;
    opacity: 0.9 !important;
    color: var(--primary-color) !important;
}


.ui-resizable-handle {
    width: 5px !important;
    right: 0 !important;
    background: transparent;
    transition: background 0.2s;
}

.ui-resizable-handle:hover {
    background: rgba(78, 115, 223, 0.3) !important;
    cursor: col-resize;
}

table.dataTable thead th {
    position: relative;
    border-right: 1px solid transparent !important;
}

table.dataTable thead th:hover {
    border-right: 1px solid var(--card-border-color) !important;
}


.DTFC_LeftWrapper, .DTFC_RightWrapper {
    display: none !important;
}

table.dataTable {
    border-collapse: collapse !important;
}


.DTCR_clonedTable {
    background-color: var(--card-color) !important;
    border: 1px solid var(--primary-color) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
    opacity: 0.8 !important;
    z-index: 10000 !important;
    width: auto !important; 
    max-width: 250px !important; 
}

.DTCR_clonedTable th {
    padding: 8px 15px !important;
    white-space: nowrap !important;
    background-color: var(--primary-color) !important;
    color: white !important;
    border: none !important;
    width: auto !important;
    min-width: 50px !important;
    max-width: 250px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.DTCR_pointer {
    width: 2px !important;
    background-color: var(--primary-color) !important;
    z-index: 10001 !important;
}


.table-responsive {
    background: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid var(--card-border-color) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 15px var(--shadow-color) !important;
    margin-bottom: 1.5rem !important;
    overflow: hidden;
    padding: 10px;
}


.file-ref-tag {
    display: inline-flex;
    align-items: center;
    background-color: rgba(78, 115, 223, 0.08); 
    color: var(--primary-color) !important;
    border: 1px solid rgba(78, 115, 223, 0.15);
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.2s ease;
    margin-right: 5px;
    margin-top: 5px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

.file-ref-tag:hover {
    background-color: var(--primary-color);
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(78, 115, 223, 0.2);
}

.file-ref-tag i {
    font-size: 0.85rem;
    margin-right: 6px;
}

[data-bs-theme="dark"] .file-ref-tag {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--card-border-color);
    color: var(--text-primary-color) !important;
}

[data-bs-theme="dark"] .file-ref-tag:hover {
    background-color: var(--primary-color);
    color: white !important;
    border-color: var(--primary-color);
}


.daterange-container {
    display: flex;
    align-items: center;
    background: var(--background-color);
    border-radius: 50rem;
    padding: 4px;
    border: 1px solid var(--card-border-color);
    width: fit-content;
}

.daterange-nav-btn {
    background: var(--card-color);
    border: 1px solid var(--card-border-color);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary-color);
    transition: all 0.2s;
    padding: 0;
    cursor: pointer;
}

.daterange-nav-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.daterange-display {
    display: flex;
    align-items: center;
    padding: 0 12px;
    cursor: pointer;
}

.daterange-display i {
    color: var(--text-secondary-color);
    margin-right: 8px;
    font-size: 0.9rem;
}

.daterange-display input {
    border: none !important;
    background: transparent !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    color: var(--text-primary-color) !important;
    padding: 0 !important;
    width: 170px !important;
    text-align: center !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

.daterange-display input:focus {
    outline: none !important;
}





.custom-grid {
    display: grid;
    grid-template-columns: repeat(3, 180px);
    margin-top: 10px;
}

.separator {
    display: flex;
    align-items: center;
    text-align: center;
    color: #999;
    font-size: 15px;
}

    .separator::before,
    .separator::after {
        content: '';
        flex: 1;
        border-bottom: none;
    }

    .separator:not(:empty)::before {
        margin-right: .25em;
    }

    .separator:not(:empty)::after {
        margin-left: .25em;
    }



.form-check-label {
    margin-left: 15px;
}



#griddropdown.dropdown-menu {
    min-width: 5rem !important;
}

.file-upload-wrapper {
    display: inline-flex;
    align-items: center;
}

.summary-card {
    border-radius: 16px;
    border: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: default;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    background-color: var(--card-color);
    color: var(--text-primary-color);
    z-index: 1;
}


.summary-card[onclick],
.summary-card:has(a),
.summary-card.clickable {
    cursor: pointer;
}


.summary-card::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
    z-index: -1;
}

.summary-card:hover::before {
    opacity: 1;
    transform: scale(1);
}

.summary-card:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.summary-card.active {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    z-index: 10;
    border: 2px solid rgba(255, 255, 255, 0.5); 
}

.summary-card.inactive {
    opacity: 0.6;
    filter: grayscale(0.8);
    transform: scale(0.95);
}


.bg-gradient-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.bg-gradient-info {
    background: linear-gradient(135deg, #3c7a7e 0%, #1058bb 100%);
    color: #fff;
}

.bg-gradient-success {
    background: linear-gradient(135deg, #0ba360 0%, #3cba92 100%);
}

.bg-gradient-warning {
    background: linear-gradient(135deg, #f09819 0%, #ff5858 100%);
}

.bg-gradient-danger {
    background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
}

.bg-secondary {
    background: linear-gradient(135deg, #b8c6db 0%, #f5f7fa 74%);
    color: #555 !important; 
}


.summary-card.bg-gradient-primary,
.summary-card.bg-gradient-info,
.summary-card.bg-gradient-success,
.summary-card.bg-gradient-warning,
.summary-card.bg-gradient-danger {
    color: #fff;
}


.summary-card.bg-secondary .icon-circle {
    background-color: rgba(0, 0, 0, 0.1);
    color: #555;
}
.summary-card.bg-secondary p, 
.summary-card.bg-secondary h6 {
    color: #555;
}


.summary-card .card-body {
    padding: 1.5rem;
    display: flex;
    align-items: center;
}

.summary-card .icon-circle {
    width: 54px;
    height: 54px;
    border-radius: 16px; 
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1.2rem;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    font-size: 1.5rem;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}


.summary-card p {
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

.summary-card h6 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 1.2;
}


[data-bs-theme="dark"] .summary-card {
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

[data-bs-theme="dark"] .bg-secondary {
    background: linear-gradient(135deg, #2c3e50 0%, #4ca1af 100%);
    color: #fff !important;
}

[data-bs-theme="dark"] .summary-card.bg-secondary .icon-circle {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

[data-bs-theme="dark"] .summary-card.bg-secondary p, 
[data-bs-theme="dark"] .summary-card.bg-secondary h6 {
    color: #fff;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

.btn-primary {
    background-color: #4e73df;
    border-color: #4e73df;
}

.btn-primary:hover {
    background-color: #2e59d9;
    border-color: #2653d4;
}

.btn-info {
    background-color: #36b9cc;
    border-color: #36b9cc;
}

.btn-info:hover {
    background-color: #2c9faf;
    border-color: #2a96a5;
}

.btn-success {
    background-color: #1cc88a;
    border-color: #1cc88a;
}

.btn-success:hover {
    background-color: #17a673;
    border-color: #169b6b;
}

.btn-danger {
    background-color: #e74a3b;
    border-color: #e74a3b;
}

.btn-danger:hover {
    background-color: #d33c2d;
    border-color: #c83629;
}

.btn-warning {
    background-color: #f6c23e;
    border-color: #f6c23e;
}

.btn-warning:hover {
    background-color: #f4b619;
    border-color: #f3b20c;
}

.btn-purple {
    background-color: #6f42c1;
    border-color: #6f42c1;
    color: #fff;
}

.btn-purple:hover {
    background-color: #5a35a2;
    border-color: #543299;
    color: #fff;
}

#chkSearchByScanner {
    width: 1.2rem;
    height: 1.2rem;
}

label[for=chkSearchByScanner] {
    font-size: 1.0rem;
    margin-left: 0.5rem;
}

.rol-card {
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.rol-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.rol-card.active {
    border-color: #007bff;
    border-width: 2px;
}

.rol-btn.active {
    background-color: #007bff;
    color: white;
}

.dropdown-menu.with-numbers {
    counter-reset: item;
}
.dropdown-menu.with-numbers .dropdown-item::before {
    content: counter(item);
    counter-increment: item;
    display: inline-block;
    width: 1.8em;
    height: 1.8em;
    line-height: 1.8em;
    text-align: center;
    background-color: #e9ecef;
    border-radius: 0.25rem;
    font-weight: bold;
    color: #495057;
    margin-right: 0.8em;
}

.tbllist th:first-child, .tbllist tbody td:first-child {
    position: sticky !important;
    left: 0px;
    background-color: var(--card-color) !important;
    z-index: 1;
}


.tbllist tbody tr.selected td:first-child,
.tbllist tbody tr.selected td:last-child {
    background-color: inherit !important;
}

.tbllist tfoot td:first-child {
    position: sticky;
    left: 0px;
    z-index: 1;
}


.tbllist th:last-child, .tbllist tbody td:last-child {
    position: sticky !important;
    right: 0px;
    background-color: var(--card-color) !important;
    z-index: 1;
}

.tbllist tfoot td:last-child {
    position: sticky;
    right: 0px;
    z-index: 1;
}


hr.solid {
    border-top: 2px solid var(--card-border-color);
    margin-top: .2rem;
    margin-bottom: .2rem;
    vertical-align: middle;
}



.summary-card {
    border: none;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
    position: relative;
    z-index: 1;
    cursor: pointer;
}


.summary-card[data-color="primary"] { background: linear-gradient(135deg, #563d7c 0%, #6f42c1 50%, #8a5fd3 100%); color: #fff; }
.summary-card[data-color="info"] { background: linear-gradient(135deg, #17a2b8 0%, #21c5de 50%, #63d3e4 100%); color: #fff; }
.summary-card[data-color="success"] { background: linear-gradient(135deg, #28a745 0%, #34d058 50%, #6ae384 100%); color: #fff; }
.summary-card[data-color="danger"] { background: linear-gradient(135deg, #dc3545 0%, #f05463 50%, #f8838e 100%); color: #fff; }
.summary-card[data-color="warning"] { background: linear-gradient(135deg, #ffc107 0%, #ffd043 50%, #ffdf7e 100%); color: #212529; }
.summary-card[data-color="light"] { background: linear-gradient(135deg, #e9ecef 0%, #f8f9fa 50%, #ffffff 100%); color: #212529; }

.summary-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    z-index: 5;
}


.summary-card.inactive {
    opacity: 0.6;
    filter: grayscale(60%);
}


.summary-card.active {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
    border: 3px solid rgba(255, 255, 255, 0.8);
    z-index: 10;
    opacity: 1;
    filter: grayscale(0%);
}

.summary-card .card-body {
    padding: 1rem;
}

.summary-card .card-title {
    font-size: 0.9rem;
    font-weight: 600; 
}

.summary-card .card-text {
    font-size: 1.5rem;
}


.dataTables_wrapper .dataTables_processing {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250px;
    height: 80px;
    margin-left: -125px;
    margin-top: -40px;
    text-align: center;
    padding: 1em 0;
    background-color: var(--card-color) !important;
    border: 1px solid var(--card-border-color) !important;
    border-radius: 8px;
    box-shadow: 0 4px 10px var(--shadow-color);
    z-index: 1000; 
    font-size: 1.2em;
    color: var(--text-primary-color) !important;
}


.dataTables_wrapper .dataTables_processing::before {
    content: "\f110"; 
    font-family: FontAwesome;
    font-size: 1.5em;
    margin-right: 10px;
    -webkit-animation: fa-spin 1s infinite linear;
    animation: fa-spin 1s infinite linear;
    display: block;
    margin-bottom: 5px;
}







.child-row-wrapper {
    padding: 15px 15px 25px 50px !important;
    background-color: color-mix(in srgb, var(--primary-color) 3%, var(--background-color)) !important;
}

.child-table {
    font-size: 11px !important;
    font-style: italic !important;
    color: color-mix(in srgb, var(--text-secondary-color) 70%, var(--primary-color)) !important;
    background-color: var(--card-color) !important;
    border: 1px solid var(--card-border-color) !important;
    border-left: 4px solid var(--primary-color) !important;
    border-radius: 4px 8px 8px 4px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    margin-bottom: 0 !important;
    width: auto !important;
    min-width: 70%;
}

.child-table thead th {
    background-color: color-mix(in srgb, var(--primary-color) 6%, var(--card-color)) !important;
    color: var(--primary-color) !important;
    font-weight: 700 !important;
    font-style: italic !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid var(--card-border-color) !important;
}

.child-table tbody td {
    padding: 6px 12px !important;
    border-top: 1px solid color-mix(in srgb, var(--card-border-color) 40%, transparent) !important;
}

.child-table tfoot td {
    background-color: color-mix(in srgb, var(--primary-color) 2%, var(--card-color)) !important;
    font-weight: 700 !important;
    border-top: 2px solid var(--card-border-color) !important;
}


.action-btn-group {
    display: flex;
    justify-content: center;
    gap: 5px;
}

.btn-action {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.btn-action:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.12);
}

.btn-action i {
    font-size: 13px;
}

.btn-copy-product { 
    background-color: rgba(13, 110, 253, 0.08); 
    color: #0d6efd; 
    border-color: rgba(13, 110, 253, 0.15); 
}
.btn-copy-product:hover { background-color: #0d6efd; color: white; border-color: #0d6efd; }

.btn-edit-product { 
    background-color: rgba(255, 152, 0, 0.08); 
    color: #f57c00; 
    border-color: rgba(255, 152, 0, 0.15); 
}
.btn-edit-product:hover { background-color: #f57c00; color: white; border-color: #f57c00; }

.btn-delete-product { 
    background-color: rgba(220, 53, 69, 0.08); 
    color: #dc3545; 
    border-color: rgba(220, 53, 69, 0.15); 
}
.btn-delete-product:hover { background-color: #dc3545; color: white; border-color: #dc3545; }

.btn-barcode-product { 
    background-color: rgba(111, 66, 193, 0.08); 
    color: #6f42c1; 
    border-color: rgba(111, 66, 193, 0.15); 
}
.btn-barcode-product:hover { background-color: #6f42c1; color: white; border-color: #6f42c1; }


.bg-card-theme {
    background-color: var(--card-color) !important;
    border-color: var(--card-border-color) !important;
}

.bg-background-theme {
    background-color: var(--background-color) !important;
}

.text-primary-theme {
    color: var(--text-primary-color) !important;
}

.border-theme {
    border-color: var(--card-border-color) !important;
}


.btn-white-themed {
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border-color: var(--card-border-color) !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-white-themed:hover {
    background-color: var(--background-color) !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

.btn-white-themed:hover i {
    color: var(--primary-color) !important;
}

.btn-white-themed.active, .btn-white-themed:active {
    background-color: var(--primary-color) !important;
    color: white !important;
}


.dropdown-menu-themed {
    background-color: var(--card-color) !important;
    border-color: var(--card-border-color) !important;
    color: var(--text-primary-color) !important;
    border-radius: 10px;
}

.reports-dropdown-menu {
    min-width: 350px !important;
    max-height: 600px !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
}

.filter-dropdown-scroll {
    min-width: 320px;
    max-height: 500px;
    overflow-y: auto;
}

.dropdown-divider-themed {
    border-top-color: var(--card-border-color) !important;
}

.dropdown-item-themed {
    color: var(--text-primary-color);
}


.form-control-themed {
    background-color: var(--background-color) !important;
    color: var(--text-primary-color) !important;
    border-color: var(--card-border-color) !important;
}

.input-group-text-themed {
    background-color: var(--background-color) !important;
    border-color: var(--card-border-color) !important;
    color: var(--text-primary-color) !important;
}

.custom-file-label-themed {
    background-color: var(--background-color) !important;
    color: var(--text-secondary-color) !important;
    border-color: var(--card-border-color) !important;
}


.modal-content-themed {
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid var(--card-border-color) !important;
}

.modal-header-themed, .modal-footer-themed {
    border-color: var(--card-border-color) !important;
}





.column-list-container {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--card-border-color);
    border-radius: 12px;
    padding: 15px;
    background-color: var(--background-color);
}


.bg-mix-theme {
    background-color: color-mix(in srgb, var(--primary-color) 2%, var(--card-color)) !important;
}




[data-theme="titanium-metallic"][data-bs-theme="light"] {
    --primary-color: #263238;
    --primary-rgb: 38, 50, 56;
    --secondary-color: #37474F;
    --accent-color: #546E7A;
    --background-color: #F1F5F7;
    --card-color: #FFFFFF;
    --text-primary-color: #0F172A;
    --text-secondary-color: #475569;
    --card-border-color: rgba(38, 50, 56, 0.12);
    --btn-gradient: linear-gradient(135deg, #1E293B 0%, #334155 50%, #475569 100%);
    --card-rgb: 255, 255, 255;
    --btn-text-color: #ffffff;
    --btn-gradient-text-color: #ffffff;
}
[data-theme="titanium-metallic"][data-bs-theme="dark"] {
    --primary-color: #CFD8DC;
    --primary-rgb: 207, 216, 220;
    --secondary-color: #263238;
    --accent-color: #455A64;
    --background-color: #0B0D0F;
    --card-color: #15181C;
    --text-primary-color: #F8FAFC;
    --text-secondary-color: #94A3B8;
    --card-border-color: rgba(255, 255, 255, 0.1);
    --btn-gradient: linear-gradient(135deg, #263238 0%, #37474F 50%, #455A64 100%);
    --card-rgb: 21, 24, 28;
    --btn-text-color: #ffffff;
    --btn-gradient-text-color: #ffffff;
}


[data-theme="gold-metallic"][data-bs-theme="light"] {
    --primary-color: #996515;
    --primary-rgb: 153, 101, 21;
    --secondary-color: #795548;
    --accent-color: #D4AF37;
    --background-color: #FFFEF7;
    --card-color: #FFFFFF;
    --text-primary-color: #3E2723;
    --text-secondary-color: #795548;
    --card-border-color: rgba(212, 175, 55, 0.2);
    --btn-gradient: linear-gradient(135deg, #996515 0%, #D4AF37 50%, #FFD700 100%);
    --card-rgb: 255, 255, 255;
    --btn-text-color: #ffffff;
    --btn-gradient-text-color: #ffffff;
}
[data-theme="gold-metallic"][data-bs-theme="dark"] {
    --primary-color: #D4AF37;
    --primary-rgb: 212, 175, 55;
    --secondary-color: #5c4308;
    --accent-color: #FFD700;
    --background-color: #0C0B08;
    --card-color: #161512;
    --text-primary-color: #FFF9E1;
    --text-secondary-color: #B8860B;
    --card-border-color: rgba(212, 175, 55, 0.15);
    --btn-gradient: linear-gradient(135deg, #8B6B00 0%, #D4AF37 50%, #B8860B 100%);
    --card-rgb: 22, 21, 18;
    --btn-text-color: #0c0b08;
    --btn-gradient-text-color: #ffffff;
}


[data-theme="silver-metallic"][data-bs-theme="light"] {
    --primary-color: #616161;
    --primary-rgb: 97, 97, 97;
    --secondary-color: #757575;
    --accent-color: #9E9E9E;
    --background-color: #F5F5F5;
    --card-color: #FFFFFF;
    --text-primary-color: #212121;
    --text-secondary-color: #757575;
    --card-border-color: rgba(0, 0, 0, 0.08);
    --btn-gradient: linear-gradient(135deg, #424242 0%, #757575 50%, #BDBDBD 100%);
    --card-rgb: 255, 255, 255;
    --btn-text-color: #ffffff;
    --btn-gradient-text-color: #ffffff;
}
[data-theme="silver-metallic"][data-bs-theme="dark"] {
    --primary-color: #E0E0E0;
    --primary-rgb: 224, 224, 224;
    --secondary-color: #424242;
    --accent-color: #757575;
    --background-color: #121212;
    --card-color: #1E1E1E;
    --text-primary-color: #F5F5F5;
    --text-secondary-color: #9E9E9E;
    --card-border-color: rgba(255, 255, 255, 0.06);
    --btn-gradient: linear-gradient(135deg, #424242 0%, #9E9E9E 50%, #616161 100%);
    --card-rgb: 30, 30, 30;
    --btn-text-color: #121212;
    --btn-gradient-text-color: #ffffff;
}


[data-theme="rose-gold-metallic"][data-bs-theme="light"] {
    --primary-color: #A3646E;
    --primary-rgb: 163, 100, 110;
    --secondary-color: #8D5B5B;
    --accent-color: #B76E79;
    --background-color: #FFF9F9;
    --card-color: #FFFFFF;
    --text-primary-color: #4A2C2C;
    --text-secondary-color: #8D5B5B;
    --card-border-color: rgba(183, 110, 121, 0.15);
    --btn-gradient: linear-gradient(135deg, #A3646E 0%, #B76E79 50%, #E0AC69 100%);
    --card-rgb: 255, 255, 255;
    --btn-text-color: #ffffff;
    --btn-gradient-text-color: #ffffff;
}
[data-theme="rose-gold-metallic"][data-bs-theme="dark"] {
    --primary-color: #E5AA70;
    --primary-rgb: 229, 170, 112;
    --secondary-color: #5c372b;
    --accent-color: #B76E79;
    --background-color: #171212;
    --card-color: #221A1A;
    --text-primary-color: #FFEBEB;
    --text-secondary-color: #D48E75;
    --card-border-color: rgba(229, 170, 112, 0.1);
    --btn-gradient: linear-gradient(135deg, #7A3E3E 0%, #B76E79 50%, #A3646E 100%);
    --card-rgb: 34, 26, 26;
    --btn-text-color: #171212;
    --btn-gradient-text-color: #ffffff;
}


[data-theme="deep-purple-blue"][data-bs-theme="light"] {
    --primary-color: #5B2CFF;
    --primary-rgb: 91, 44, 255;
    --secondary-color: #4A4A68;
    --accent-color: #8E6AFF;
    --background-color: #F8F9FF;
    --card-color: #FFFFFF;
    --text-primary-color: #1A1A2E;
    --text-secondary-color: #4A4A68;
    --card-border-color: rgba(91, 44, 255, 0.08);
    --btn-gradient: linear-gradient(135deg, #5B2CFF 0%, #8E6AFF 100%);
    --card-rgb: 255, 255, 255;
    --btn-text-color: #ffffff;
    --btn-gradient-text-color: #ffffff;
}
[data-theme="deep-purple-blue"][data-bs-theme="dark"] {
    --primary-color: #8E6AFF;
    --primary-rgb: 142, 106, 255;
    --secondary-color: #3F1BB5;
    --accent-color: #5B2CFF;
    --background-color: #080912;
    --card-color: #121321;
    --text-primary-color: #E0E0FF;
    --text-secondary-color: #A0A0C5;
    --card-border-color: rgba(142, 106, 255, 0.12);
    --btn-gradient: linear-gradient(135deg, #3F1BB5 0%, #5B2CFF 100%);
    --card-rgb: 18, 19, 33;
    --btn-text-color: #ffffff;
    --btn-gradient-text-color: #ffffff;
}


[data-theme="sky-aqua"][data-bs-theme="light"] {
    --primary-color: #0D41E1;
    --primary-rgb: 13, 65, 225;
    --secondary-color: #0C63E7;
    --secondary-color-rgb: 12, 99, 231;
    --accent-color: #07C8F9;
    --background-color: #F0F8FF;
    --card-color: #FFFFFF;
    --text-primary-color: #0A0A0A;
    --text-secondary-color: #555A75;
    --card-border-color: rgba(0, 0, 0, 0.25);
    --shadow-color: rgba(13, 65, 225, 0.1);
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --card-rgb: 255, 255, 255;
    --btn-gradient: linear-gradient(135deg, #0D41E1 0%, #07C8F9 100%);
    --btn-text-color: #FFFFFF;
}
[data-theme="sky-aqua"][data-bs-theme="dark"] {
    --primary-color: #4361ee;
    --primary-rgb: 67, 97, 238;
    --secondary-color: #0A85ED;
    --accent-color: #09A6F3;
    --background-color: #071129;
    --card-color: #0B1A3D;
    --text-primary-color: #FFFFFF;
    --text-secondary-color: #B7B9CC;
    --card-border-color: rgba(255, 255, 255, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.2);
    --success-color: #20c997;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #0dcaf0;
    --card-rgb: 11, 26, 61;
    --btn-gradient: linear-gradient(135deg, #4361ee 0%, #09A6F3 100%);
    --btn-text-color: #FFFFFF;
}


[data-theme="lime-green"][data-bs-theme="light"] {
    --primary-color: #5CB270;
    --primary-rgb: 92, 178, 112;
    --secondary-color: #82C26E;
    --accent-color: #CEE26B;
    --background-color: #F8FFF0;
    --card-color: #FFFFFF;
    --text-primary-color: #0A0A0A;
    --text-secondary-color: #405d42;
    --card-border-color: rgba(0, 0, 0, 0.25);
    --shadow-color: rgba(92, 178, 112, 0.1);
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --card-rgb: 255, 255, 255;
    --btn-gradient: linear-gradient(135deg, #5CB270 0%, #82C26E 100%);
    --btn-text-color: #0A0A0A;
}
[data-theme="lime-green"][data-bs-theme="dark"] {
    --primary-color: #A8D26D;
    --primary-rgb: 168, 210, 109;
    --secondary-color: #5CB270;
    --accent-color: #F4F269;
    --background-color: #1A281A;
    --card-color: #243825;
    --text-primary-color: #FFFFFF;
    --text-secondary-color: #c2dcc3;
    --card-border-color: rgba(255, 255, 255, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.2);
    --success-color: #92e078;
    --danger-color: #dc3545;
    --warning-color: #fce883;
    --info-color: #6a9b00;
    --card-rgb: 36, 56, 37;
    --btn-gradient: linear-gradient(135deg, #A8D26D 0%, #5CB270 100%);
    --btn-text-color: #FFFFFF;
}


[data-theme="amethyst-gradient"][data-bs-theme="light"] {
    --primary-color: #8E2DE2;
    --primary-rgb: 142, 45, 226;
    --secondary-color: #4A00E0;
    --accent-color: #4A00E0;
    --background-color: #F9F5FF;
    --card-color: #FFFFFF;
    --text-primary-color: #2D0059;
    --text-secondary-color: #592C85;
    --btn-gradient: linear-gradient(135deg, #8E2DE2, #4A00E0);
    --btn-text-color: #FFFFFF;
}
[data-theme="amethyst-gradient"][data-bs-theme="dark"] {
    --primary-color: #B069F7;
    --primary-rgb: 176, 105, 247;
    --secondary-color: #8E2DE2;
    --accent-color: #4A00E0;
    --background-color: #0F0819;
    --card-color: #1A0F2B;
    --text-primary-color: #E6D5FF;
    --text-secondary-color: #B899D6;
    --btn-gradient: linear-gradient(135deg, #B069F7, #8E2DE2);
    --btn-text-color: #FFFFFF;
}


[data-theme="sunset-gradient"][data-bs-theme="light"] {
    --primary-color: #FF512F;
    --primary-rgb: 255, 81, 47;
    --secondary-color: #DD2476;
    --accent-color: #DD2476;
    --background-color: #FFF5F4;
    --card-color: #FFFFFF;
    --text-primary-color: #4A1A1A;
    --text-secondary-color: #8C4A4A;
    --btn-gradient: linear-gradient(135deg, #FF512F, #DD2476);
    --btn-text-color: #FFFFFF;
}
[data-theme="sunset-gradient"][data-bs-theme="dark"] {
    --primary-color: #FF7E67;
    --primary-rgb: 255, 126, 103;
    --secondary-color: #FF512F;
    --accent-color: #DD2476;
    --background-color: #1A0D0D;
    --card-color: #2B1515;
    --text-primary-color: #FFECEC;
    --text-secondary-color: #D69E9E;
    --btn-gradient: linear-gradient(135deg, #FF7E67, #FF512F);
    --btn-text-color: #FFFFFF;
}


[data-theme="emerald-gradient"][data-bs-theme="light"] {
    --primary-color: #11998E;
    --primary-rgb: 11, 153, 142;
    --secondary-color: #38EF7D;
    --accent-color: #38EF7D;
    --background-color: #F4FFF9;
    --card-color: #FFFFFF;
    --text-primary-color: #0A2925;
    --text-secondary-color: #2D5E58;
    --btn-gradient: linear-gradient(135deg, #11998E, #38EF7D);
    --btn-text-color: #FFFFFF;
}
[data-theme="emerald-gradient"][data-bs-theme="dark"] {
    --primary-color: #45D8C4;
    --primary-rgb: 69, 216, 196;
    --secondary-color: #11998E;
    --accent-color: #38EF7D;
    --background-color: #081A18;
    --card-color: #132B28;
    --text-primary-color: #D1F2EB;
    --text-secondary-color: #9BD6C8;
    --btn-gradient: linear-gradient(135deg, #45D8C4, #11998E);
    --btn-text-color: #FFFFFF;
}


[data-theme="quickbooks"][data-bs-theme="light"] {
    --primary-color: #2ca01c;
    --primary-rgb: 44, 160, 28;
    --secondary-color: #1a6d10;
    --accent-color: #49b542;
    --background-color: #f7f7f7;
    --card-color: #ffffff;
    --text-primary-color: #000000;
    --text-secondary-color: #555555;
    --btn-gradient: linear-gradient(135deg, #2ca01c, #1a6d10);
    --btn-text-color: #ffffff;
}
[data-theme="quickbooks"][data-bs-theme="dark"] {
    --primary-color: #38b02e;
    --primary-rgb: 56, 176, 46;
    --secondary-color: #2ca01c;
    --accent-color: #49b542;
    --background-color: #121212;
    --card-color: #1e1e1e;
    --text-primary-color: #ffffff;
    --text-secondary-color: #aaaaaa;
    --btn-gradient: linear-gradient(135deg, #38b02e, #2ca01c);
    --btn-text-color: #ffffff;
}


[data-theme="vscode"][data-bs-theme="light"] {
    --primary-color: #007acc;
    --primary-rgb: 0, 122, 204;
    --secondary-color: #005a9e;
    --accent-color: #0093ff;
    --background-color: #f3f3f3;
    --card-color: #ffffff;
    --text-primary-color: #333333;
    --text-secondary-color: #666666;
    --btn-gradient: linear-gradient(135deg, #007acc, #005a9e);
    --btn-text-color: #ffffff;
}
[data-theme="vscode"][data-bs-theme="dark"] {
    --primary-color: #0e639c;
    --primary-rgb: 14, 99, 156;
    --secondary-color: #007acc;
    --accent-color: #0093ff;
    --background-color: #1e1e1e;
    --card-color: #252526;
    --text-primary-color: #cccccc;
    --text-secondary-color: #888888;
    --btn-gradient: linear-gradient(135deg, #0e639c, #007acc);
    --btn-text-color: #ffffff;
}


[data-theme="visual-studio"][data-bs-theme="light"] {
    --primary-color: #68217a;
    --primary-rgb: 104, 33, 122;
    --secondary-color: #4b1758;
    --accent-color: #8a32a0;
    --background-color: #f0f0f0;
    --card-color: #ffffff;
    --text-primary-color: #000000;
    --text-secondary-color: #555555;
    --btn-gradient: linear-gradient(135deg, #68217a, #4b1758);
    --btn-text-color: #ffffff;
}
[data-theme="visual-studio"][data-bs-theme="dark"] {
    --primary-color: #984ea1;
    --primary-rgb: 152, 78, 161;
    --secondary-color: #68217a;
    --accent-color: #c078d1;
    --background-color: #1e1e1e;
    --card-color: #2d2d2d;
    --text-primary-color: #ffffff;
    --text-secondary-color: #bbbbbb;
    --btn-gradient: linear-gradient(135deg, #984ea1, #68217a);
    --btn-text-color: #ffffff;
}


[data-theme="midnight-metallic"][data-bs-theme="light"] {
    --primary-color: #263238;
    --primary-rgb: 38, 50, 56;
    --secondary-color: #37474F;
    --accent-color: #546E7A;
    --background-color: #eceff1;
    --card-color: #ffffff;
    --text-primary-color: #263238;
    --text-secondary-color: #546E7A;
    --btn-gradient: linear-gradient(135deg, #263238, #37474F);
    --btn-text-color: #ffffff;
}
[data-theme="midnight-metallic"][data-bs-theme="dark"] {
    --primary-color: #cfd8dc;
    --primary-rgb: 207, 216, 220;
    --secondary-color: #b0bec5;
    --accent-color: #eceff1;
    --background-color: #0a0a0a;
    --card-color: #1c1c1c;
    --text-primary-color: #ffffff;
    --text-secondary-color: #90a4ae;
    --btn-gradient: linear-gradient(135deg, #cfd8dc, #b0bec5);
    --btn-text-color: #0a0a0a;
}




.btn, button, input[type="button"], input[type="submit"], input[type="reset"], .m-tab-btn, .toggle-font-size {
    border-radius: 8px !important;
}

.btn-sm, .btn-group-sm > .btn {
    border-radius: 6px !important;
}

.btn-lg, .btn-group-lg > .btn {
    border-radius: 10px !important;
}

input, select, textarea, .form-control, .form-select, .input-group-text {
    border-radius: 8px !important;
}


.rounded-0 {
    border-radius: 8px !important;
}


.daterangepicker, .ui-datepicker, .datepicker, .bootstrap-datetimepicker-widget {
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid var(--card-border-color, rgba(0,0,0,0.15)) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
}

.daterangepicker .calendar-table {
    border-radius: 8px !important;
}


.dropdown-menu {
    border-radius: 10px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
}


.daterangepicker .calendar-table th.prev,
.daterangepicker .calendar-table th.next {
    border-radius: 50% !important;
    background-color: var(--background-color, #f8f9fc) !important;
    border: 1px solid var(--card-border-color, rgba(0, 0, 0, 0.15)) !important;
    transition: all 0.2s ease-in-out !important;
    width: 32px !important;
    height: 32px !important;
    text-align: center !important;
    vertical-align: middle !important;
}

.daterangepicker .calendar-table th.prev:hover,
.daterangepicker .calendar-table th.next:hover {
    background-color: var(--primary-color, #4e73df) !important;
    border-color: var(--primary-color, #4e73df) !important;
}

.daterangepicker .calendar-table .next span, 
.daterangepicker .calendar-table .prev span {
    border-width: 0 2px 2px 0 !important;
    border-color: var(--text-secondary-color, #4e73df) !important;
    margin: 0 auto !important;
    vertical-align: middle !important;
    transition: border-color 0.2s ease-in-out !important;
}

.daterangepicker .calendar-table th.prev:hover span,
.daterangepicker .calendar-table th.next:hover span {
    border-color: #fff !important;
}

[data-bs-theme="dark"] .daterangepicker .calendar-table th.prev,
[data-bs-theme="dark"] .daterangepicker .calendar-table th.next {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .daterangepicker .calendar-table th.prev:hover,
[data-bs-theme="dark"] .daterangepicker .calendar-table th.next:hover {
    background-color: var(--primary-color, #4e73df) !important;
    border-color: var(--primary-color, #4e73df) !important;
}