:root,
[data-theme="deep-purple-blue"][data-bs-theme="light"] {
    --primary-color: #5B2CFF;
    --primary-rgb: 91, 44, 255;
    --secondary-color: #0F1A4F;
    --secondary-color-rgb: 15, 26, 79;
    --accent-color: #7A5CFF;
    --background-color: #F5F7FF;
    --card-color: #FFFFFF;
    --text-primary-color: #0A0A0A;
    --text-secondary-color: #555A75;
    --card-border-color: rgba(0, 0, 0, 0.25);
    --shadow-color: rgba(15, 26, 79, 0.1);
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --card-rgb: 255, 255, 255;
}

/* ===== ERP THEME (serial-lifecycle look) ===== */
[data-theme="erp"][data-bs-theme="light"] {
    --primary-color: #0C7C74;
    --primary-rgb: 12, 124, 116;
    --secondary-color: #1A2028;
    --secondary-color-rgb: 26, 32, 40;
    --accent-color: #5A50D0;
    --background-color: #F4F6F8;
    --card-color: #FFFFFF;
    --text-primary-color: #1A2028;
    --text-secondary-color: #5D6874;
    --card-border-color: #E3E7EC;
    --shadow-color: rgba(20, 30, 45, 0.08);
    --success-color: #1C8A50;
    --danger-color: #C0490F;
    --warning-color: #B7791F;
    --info-color: #0C7C74;
    --card-rgb: 255, 255, 255;
}

[data-theme="erp"][data-bs-theme="dark"] {
    --primary-color: #2FB0A3;
    --primary-rgb: 47, 176, 163;
    --secondary-color: #E7ECF1;
    --secondary-color-rgb: 231, 236, 241;
    --accent-color: #9089F2;
    --background-color: #0D1116;
    --card-color: #161C23;
    --text-primary-color: #E7ECF1;
    --text-secondary-color: #97A2AE;
    --card-border-color: #232A32;
    --shadow-color: rgba(0, 0, 0, 0.28);
    --success-color: #38BA72;
    --danger-color: #E27A4C;
    --warning-color: #E0A020;
    --info-color: #2FB0A3;
    --card-rgb: 22, 28, 35;
}














[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;
}





































    * 
  THEME 5: Mint Leaf ("style-4")
*/
[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;
}








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);
}



.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: var(--btn-text-color, #ffffff);
}
.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: var(--btn-text-color, #ffffff) !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-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 {
    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;
}








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




[data-theme="titanium-metallic"][data-bs-theme="light"] {
    --primary-color: #1a252b;
    --primary-rgb: 26, 37, 43;
    --secondary-color: #263238;
    --accent-color: #37474F;
    --background-color: #E8EDF0;
    --card-color: #F5F8FA;
    --text-primary-color: #0A0F12;
    --text-secondary-color: #334155;
    --card-border-color: rgba(26, 37, 43, 0.18);
    --btn-gradient: linear-gradient(135deg, #0F1C22 0%, #1E293B 50%, #334155 100%);
    --card-rgb: 245, 248, 250;
    --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;
    --secondary-color-rgb: 58, 46, 146;
    --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);
    --shadow-color: rgba(0, 0, 0, 0.2);
    --success-color: #198754;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #0dcaf0;
    --card-rgb: 18, 19, 33;
    --btn-gradient: linear-gradient(135deg, #3F1BB5 0%, #5B2CFF 100%);
    --btn-text-color: #ffffff;
    --btn-gradient-text-color: #ffffff;
}


.btn-primary, .btn-signup, .btn-signup-hero, .btn-login-hero {
    background: var(--btn-gradient, linear-gradient(135deg, var(--primary-color, #6f42c1) 0%, var(--accent-color, #5B2CFF) 100%)) !important;
    background-size: 200% auto !important;
    color: var(--btn-gradient-text-color, var(--btn-text-color, #ffffff)) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.3) !important;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    border-radius: 8px !important;
    padding: 10px 24px !important;
}

.btn-primary::after, .btn-signup::after, .btn-signup-hero::after, .btn-login-hero::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -150%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
    transform: rotate(45deg);
    transition: 0.8s;
    z-index: -1;
}

.btn-primary:hover, .btn-signup:hover, .btn-signup-hero:hover, .btn-login-hero:hover {
    background-position: right center !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(var(--primary-rgb), 0.4) !important;
}

.btn-primary:hover::after, .btn-signup:hover::after, .btn-signup-hero::after, .btn-login-hero::after {
    left: 100%;
}

.btn-login-hero {
    background: transparent !important;
    border: 2px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
    box-shadow: none !important;
}

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

.btn-primary::after, .btn-signup::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -150%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: rotate(45deg);
    transition: 0.8s;
    z-index: -1;
}

.btn-primary:hover, .btn-signup:hover {
    background-position: right center !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(var(--primary-rgb), 0.4) !important;
}

.btn-primary:hover::after, .btn-signup:hover::after {
    left: 100%;
}


.theme-preview-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    border: 1px solid rgba(0,0,0,0.1);
}




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




.card, .feature-card-v2, .product-card, .pricing-card-v2, .summary-card, .modal-content {
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05) !important;
    background: rgba(var(--card-rgb), 0.2) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease !important;
    color: inherit !important;
}

[data-bs-theme="dark"] .card, 
[data-bs-theme="dark"] .feature-card-v2, 
[data-bs-theme="dark"] .product-card, 
[data-bs-theme="dark"] .pricing-card-v2, 
[data-bs-theme="dark"] .summary-card,
[data-bs-theme="dark"] .modal-content {
    background: rgba(30, 30, 45, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.card:hover, .feature-card-v2:hover, .product-card:hover, .pricing-card-v2:hover, .summary-card:hover {
    transform: translateY(-5px);
    background: rgba(var(--card-rgb), 0.3) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !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;
}











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














.navbar {
    
    background-color: rgba(255, 255, 255, 0.5);
    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;
    min-height: 70px;
    padding-top: 0;
    padding-bottom: 0;
    background-color: rgba(var(--card-rgb), 0.75) !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-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 {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.4) !important;
    filter: brightness(1.1);
}












.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, #34d399 0%, #10b981 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(52, 211, 153, 0.3) !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 {
    min-height: 100vh;
    background-color: var(--background-color) !important;
    color: var(--text-primary-color) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

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

.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-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-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-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;
    



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

.form-control: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;
    color: var(--text-primary-color) !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 {
    background: transparent !important;
    color: var(--primary-color) !important;
    border: 2px solid var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    background-color: var(--card-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;
    background-color: var(--primary-color) !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-item:hover {
    background-color: rgba(var(--primary-rgb), 0.1) !important;
    padding-left: 20px;
    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;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


.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: linear-gradient(135deg, #6f42c1, #a78bfa) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(111, 66, 193, 0.3) !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-purple:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(111, 66, 193, 0.4) !important;
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: #ffffff !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;
    gap: 10px !important;
    padding-bottom: 5px !important;
}

.nav-tabs .nav-link {
    border: 1px solid transparent;
    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;
    border-color: var(--card-border-color) var(--card-border-color) var(--card-border-color) !important;
}

.nav-tabs .nav-link.active {
    color: var(--primary-color) !important;
    background-color: var(--card-color) !important;
    box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.3) !important;
    border-color: var(--card-border-color) var(--card-border-color) var(--card-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: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border-color: var(--card-border-color) !important;
    background-color: var(--card-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 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;
}


[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;
}


#column-selector-menu {
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border-color: var(--card-border-color) !important;
}

#column-selector-menu .column-toggle-item {
    background-color: transparent !important;
    color: var(--text-primary-color) !important;
}

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

#column-selector-menu .form-check-input {
    background-color: var(--card-color) !important;
    border-color: var(--card-border-color) !important;
}

#column-selector-menu .form-check-input:checked {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

#column-selector-menu .column-toggle-item:hover {
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent) !important;
    border-radius: 4px;
}


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 {
    --card-rgb: 255, 255, 255;
    --card-color-transparent: rgba(255, 255, 255, 0.7);
    --bg-opacity: 1;
    --card-bg: #ffffff;
    --text-color: #212529;
    --note-bg: #f8f9fa;
    --note-text: #212529;
}

[data-bs-theme="dark"] {
    --card-rgb: 20, 21, 35;
    --card-color-transparent: rgba(20, 21, 35, 0.7);
    --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;
}



@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 {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    transition: all 0.2s ease;
    color: var(--text-primary-color) !important;
    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 {
    margin-left: 10px !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    border: 1px solid var(--card-border-color) !important;
    width: 200px !important;
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !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: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.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;
    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;
    border-color: var(--card-border-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-radius: 0 !important;
    margin: 0 !important;
    border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
    position: relative;
    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;
}
 

[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-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-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-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-text-color: #FFFFFF;
}






[data-theme="amethyst-gradient"][data-bs-theme="light"] {
    --btn-text-color: #FFFFFF;
    --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);
}
[data-theme="amethyst-gradient"][data-bs-theme="dark"] {
    --btn-text-color: #FFFFFF;
    --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);
}


[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);
}
[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);
}


[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);
}
[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);
}


[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 {
    background-color: var(--card-color) !important;
    border: 1px solid var(--card-border-color) !important;
    border-radius: 8px !important;
}


.dropdown-menu {
    background-color: var(--card-color) !important;
    border-color: var(--card-border-color) !important;
    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-clip: padding-box;
    border: 1px solid var(--card-border-color) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
}



.theme-swatch-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    flex-shrink: 0;
    outline: none;
}

.theme-swatch-btn:hover {
    transform: scale(1.18);
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}

.theme-swatch-btn.active-swatch {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.4);
    transform: scale(1.15);
}

.settings-action-card {
    background-color: var(--card-color);
    border: 1px solid var(--card-border-color);
    color: var(--text-primary-color) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    min-height: 72px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

.settings-action-card i {
    transition: transform 0.3s ease;
}

.settings-action-card:hover {
    background-color: rgba(var(--primary-rgb), 0.05);
    transform: translateY(-3px);
    border-color: var(--primary-color);
    box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.15);
}

.settings-action-card:hover i {
    transform: scale(1.15);
}

.settings-action-card.selected {
    background-color: rgba(var(--primary-rgb), 0.1) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2) !important;
}


.nav-action-item .nav-link {
    color: var(--text-primary-color);
    opacity: 0.75;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.nav-action-item .nav-link:hover {
    opacity: 1;
    color: var(--primary-color);
}


body.sidebar-open-mobile {
    overflow: hidden;
}

.mobile-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 999;
    backdrop-filter: blur(2px);
}

body.sidebar-open-mobile .mobile-sidebar-overlay {
    display: block;
}