html[data-theme="dark"], 
html[data-bs-theme="dark"],
body.vantyx-dark-mode {
    --vantyx-primary: #0F3D59; 
    --vantyx-primary-600: #0a2d45;
    --vantyx-primary-700: #082133;
    --vantyx-accent: #49A671; 
    --vantyx-accent-700: #56BF70; 
    --vantyx-base: #0c1421; 
    --vantyx-surface: #121e33; 
    --vantyx-muted: #8b9eb5;
    --vantyx-line: #223040;
    --vantyx-text: #e6edf5;
}

body.vantyx-dark-mode {
    background-color: var(--vantyx-base) !important;
    color: var(--vantyx-text) !important;
    position: relative;
    z-index: 0;
}

body.vantyx-dark-mode::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background-image: 
        radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,0.8), rgba(0,0,0,0)),
        radial-gradient(1px 1px at 60px 80px, rgba(255,255,255,0.6), rgba(0,0,0,0)),
        radial-gradient(1.5px 1.5px at 130px 40px, rgba(255,255,255,0.9), rgba(0,0,0,0)),
        radial-gradient(2px 2px at 180px 150px, rgba(255,255,255,0.5), rgba(0,0,0,0)),
        radial-gradient(1px 1px at 250px 90px, rgba(255,255,255,0.7), rgba(0,0,0,0)),
        radial-gradient(1.5px 1.5px at 320px 200px, rgba(255,255,255,0.8), rgba(0,0,0,0));
    background-repeat: repeat;
    background-size: 350px 350px;
    opacity: 0.5;
    animation: vantyxTwinkle 6s infinite alternate linear;
    z-index: -1;
    pointer-events: none;
}

@keyframes vantyxTwinkle {
    0% { opacity: 0.3; transform: scale(1); }
    100% { opacity: 0.7; transform: scale(1.02); }
}

body.vantyx-dark-mode .card,
body.vantyx-dark-mode .modal-content,
body.vantyx-dark-mode .bg-white {
    background-color: var(--vantyx-surface) !important;
    border-color: var(--vantyx-line) !important;
    color: var(--vantyx-text) !important;

    border-top: 3px solid var(--vantyx-primary) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(5, 17, 242, 0.07) !important; 
}

body.vantyx-dark-mode .aside,
body.vantyx-dark-mode .aside .bg-dark,
body.vantyx-dark-mode .aside header {
    background-color: var(--vantyx-surface) !important;
    border-right: 1px solid var(--vantyx-line) !important;
}

body.vantyx-dark-mode .aside .nav-item.active > .nav-link, 
body.vantyx-dark-mode .aside .nav-link.active {
    background-color: var(--vantyx-primary-700) !important;
    color: var(--vantyx-accent) !important;
}
body.vantyx-dark-mode .aside hr, 
body.vantyx-dark-mode .aside .divider {
    border-color: var(--vantyx-line) !important;
}

body.vantyx-dark-mode .layout {
    background-color: var(--vantyx-surface) !important;
    border-color: var(--vantyx-line) !important;
    color: var(--vantyx-text) !important;
}

body.vantyx-dark-mode .card-header, 
body.vantyx-dark-mode .modal-header {
    background-color: var(--vantyx-surface) !important;
    border-bottom: 1px solid var(--vantyx-line) !important;
    border-top: none !important;
    color: var(--vantyx-text) !important;
}

body.vantyx-dark-mode .card-footer,
body.vantyx-dark-mode .modal-body,
body.vantyx-dark-mode .modal-footer {
    background-color: var(--vantyx-surface) !important;
    border-top: 1px solid var(--vantyx-line) !important;
    color: var(--vantyx-text) !important;
}

body.vantyx-dark-mode .dropdown-menu {
    background-color: var(--vantyx-surface) !important;
    border: 1px solid var(--vantyx-line) !important;
    box-shadow: 0 10px 35px rgba(0,0,0,0.6) !important;
    border-radius: 10px !important;
}
body.vantyx-dark-mode .dropdown-menu a,
body.vantyx-dark-mode .dropdown-menu button,
body.vantyx-dark-mode .dropdown-menu .btn-link,
body.vantyx-dark-mode .dropdown-menu .text-primary,
body.vantyx-dark-mode .dropdown-item,
body.vantyx-dark-mode .dropdown-item * {
    color: var(--vantyx-text) !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}
body.vantyx-dark-mode .dropdown-item:hover,
body.vantyx-dark-mode .dropdown-item:hover *,
body.vantyx-dark-mode .dropdown-item:focus,
body.vantyx-dark-mode .dropdown-item:focus *,
body.vantyx-dark-mode .dropdown-menu a:hover,
body.vantyx-dark-mode .dropdown-menu button:hover {
    background-color: var(--vantyx-primary-700) !important;
    color: var(--vantyx-accent-700) !important;
}
body.vantyx-dark-mode .dropdown-divider {
    border-top-color: var(--vantyx-line) !important;
}

body.vantyx-dark-mode .table .btn[data-bs-toggle="dropdown"],
body.vantyx-dark-mode .btn-icon {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    color: var(--vantyx-text) !important;
    transition: all 0.2s ease !important;
}
body.vantyx-dark-mode .table .btn[data-bs-toggle="dropdown"]:hover,
body.vantyx-dark-mode .btn-icon:hover {
    background-color: var(--vantyx-primary-600) !important;
    border-color: var(--vantyx-accent) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
}

body.vantyx-dark-mode .btn-light,
body.vantyx-dark-mode .btn-default,
body.vantyx-dark-mode .btn-outline-secondary {
    background-color: var(--vantyx-line) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--vantyx-text) !important;
}
body.vantyx-dark-mode .btn-light:hover,
body.vantyx-dark-mode .btn-default:hover,
body.vantyx-dark-mode .btn-outline-secondary:hover {
    background-color: var(--vantyx-primary-600) !important;
    color: #fff !important;
}

body.vantyx-dark-mode .btn-primary {
    background-color: var(--vantyx-accent) !important;
    border-color: var(--vantyx-accent) !important;
    color: #fff !important;
}
body.vantyx-dark-mode .btn-primary:hover {
    background-color: var(--vantyx-accent-700) !important;
    border-color: var(--vantyx-accent-700) !important;
}

body.vantyx-dark-mode .btn-outline-primary {
    border-color: var(--vantyx-accent) !important;
    color: var(--vantyx-accent) !important;
}
body.vantyx-dark-mode .btn-outline-primary:hover {
    background-color: var(--vantyx-accent) !important;
    color: #fff !important;
}

body.vantyx-dark-mode .btn-link {
    color: var(--vantyx-accent) !important;
    text-decoration: none !important;
}
body.vantyx-dark-mode .btn-link:hover {
    color: var(--vantyx-accent-700) !important;
}

body.vantyx-dark-mode .modal-body .bg-white,
body.vantyx-dark-mode .modal-body .card,
body.vantyx-dark-mode .modal-body .layout,
body.vantyx-dark-mode .modal-body .shadow-sm {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
body.vantyx-dark-mode .modal-body .table {
    border: none !important;
}

body.vantyx-dark-mode .table {
    background-color: transparent !important;
    border-color: var(--vantyx-line) !important;
    color: var(--vantyx-text) !important;
}
body.vantyx-dark-mode .table td,
body.vantyx-dark-mode .table th {
    background-color: transparent !important;
    border-color: var(--vantyx-line) !important;
    color: var(--vantyx-text) !important;
}
body.vantyx-dark-mode .table tbody tr {
    background-color: var(--vantyx-surface) !important;
}
body.vantyx-dark-mode .table tbody tr:nth-child(odd) {
    background-color: rgba(0,0,0, 0.15) !important;
}
body.vantyx-dark-mode .table tbody tr:hover {
    background-color: rgba(255,255,255, 0.05) !important;
}

body.vantyx-dark-mode .form-control, 
body.vantyx-dark-mode .form-select {
    background-color: #1a2533 !important;
    border-color: var(--vantyx-line) !important;
    color: var(--vantyx-text) !important;
}

body.vantyx-dark-mode .text-dark,
body.vantyx-dark-mode h1, body.vantyx-dark-mode .h1,
body.vantyx-dark-mode h2, body.vantyx-dark-mode .h2, 
body.vantyx-dark-mode h3, body.vantyx-dark-mode .h3,
body.vantyx-dark-mode h4, body.vantyx-dark-mode .h4,
body.vantyx-dark-mode h5, body.vantyx-dark-mode .h5,
body.vantyx-dark-mode h6, body.vantyx-dark-mode .h6,
body.vantyx-dark-mode .display-6, 
body.vantyx-dark-mode .display-5 {
    color: var(--vantyx-text) !important;
}

body.vantyx-dark-mode .text-muted {
    color: var(--vantyx-muted) !important;
}

body.vantyx-dark-mode .breadcrumb-item a {
    color: #56BF70 !important; 
}
body.vantyx-dark-mode .breadcrumb-item.active {
    color: var(--vantyx-muted) !important;
}

body.vantyx-dark-mode .bg-light, 
body.vantyx-dark-mode .bg-gray-100 {
    background-color: var(--vantyx-base) !important;
}

body.vantyx-dark-mode .card[style*="linear-gradient"] {
    background: var(--vantyx-surface) !important;
}

body.vantyx-dark-mode .frappe-chart text {
    fill: var(--vantyx-text) !important;
}
body.vantyx-dark-mode .frappe-chart line,
body.vantyx-dark-mode .frappe-chart path.grid-line {
    stroke: var(--vantyx-line) !important;
}
body.vantyx-dark-mode .frappe-chart .chart-legend text {
    fill: var(--vantyx-text) !important;
}
body.vantyx-dark-mode .frappe-chart .line-graph-path {
    stroke: #0511F2 !important; 
}
body.vantyx-dark-mode .frappe-chart .dataset-units circle {
    fill: #0511F2 !important;
    stroke: var(--vantyx-surface) !important;
}
body.vantyx-dark-mode .frappe-chart rect.bar {
    fill: #49A671 !important; 
}
body.vantyx-dark-mode .frappe-chart path.percentage-pie {
    stroke: #0F3D59 !important; 
}

body.vantyx-dark-mode .apexcharts-text {
    fill: var(--vantyx-text) !important;
}
body.vantyx-dark-mode .apexcharts-gridline {
    stroke: var(--vantyx-line) !important;
}
body.vantyx-dark-mode .apexcharts-tooltip {
    background: var(--vantyx-surface) !important;
    border-color: var(--vantyx-line) !important;
    color: var(--vantyx-text) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5) !important;
}
body.vantyx-dark-mode .apexcharts-tooltip-title {
    background: var(--vantyx-primary-700) !important;
    border-bottom: 1px solid var(--vantyx-line) !important;
    color: var(--vantyx-text) !important;
}
body.vantyx-dark-mode .apexcharts-legend-text {
    color: var(--vantyx-text) !important;
}
body.vantyx-dark-mode .apexcharts-pie-label {
    fill: #ffffff !important;
}

#darkModeToggleBtn {
    position: fixed;
    bottom: 25px;
    right: 20px;
    z-index: 9999;
    background: var(--vantyx-primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.35);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    font-size: 1.5rem;
}

#darkModeToggleBtn:hover {
    transform: scale(1.1) rotate(15deg);
    background: #0511F2 !important; 
    box-shadow: 0 6px 25px rgba(5, 17, 242, 0.5);
}

@media (min-width: 768px) {
    #darkModeToggleBtn {
        top: 25px;
        bottom: auto;
        right: 30px;
        width: 50px;
        height: 50px;
    }
}