:root {
    --bs-font-sans-serif: "Roboto",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --bs-font-monospace: "Roboto Mono",SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

:root, [data-bs-theme=light] {
    --mct-branding-primary-color: #008A78;
    --mct-branding-primary-color-rgb: 0,138,120;

    --mct-branding-primary-hover-color: #004a43;
    --mct-branding-primary-hover-color-rgb: 0,74,67;

    --mct-branding-secondary-color: #F27100;
    --mct-branding-secondary-color-rgb: 242,113,0;

    /* TODO!!!! */
    --mct-branding-secondary-hover-color: #d96500;
    --mct-branding-secondary-hover-color-rgb: 217,101,0;
}

[data-bs-theme=light] {

}

    [data-bs-theme=light] body {
        background-color: #EEEEEE;
    }

    [data-bs-theme=light] .nav {
        --bs-nav-link-color: #2A2F35;
    }

    [data-bs-theme=light] .topbar .navbar {
        --bs-nav-link-color: var(--bs-gray-300);
        --bs-navbar-brand-color: var(--bs-gray-300);
        --bs-navbar-brand-hover-color: var(--mct-branding-primary-hover-color);
        --bs-navbar-color: var(--bs-gray-300);
        --bs-navbar-active-color: var(--mct-branding-primary-hover-color);
    }

        [data-bs-theme=light] .topbar .navbar .navbar-nav {
            --bs-nav-link-hover-color: var(--mct-branding-primary-hover-color);
        }

    [data-bs-theme=light] .dropdown-menu {
        --bs-dropdown-link-hover-color: var(--bs-gray-300);
        --bs-dropdown-link-hover-bg: var(--mct-branding-primary-color);
    }

    [data-bs-theme=light] .wrapper {
    }

        [data-bs-theme=light] .wrapper:before {
            background: #008A78;
            content: " ";
            height: 264px;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
            z-index: -1;
        }

        [data-bs-theme=light] .wrapper .sidebar {
            background: #ffffff;
        }

/* dark */
[data-bs-theme=dark] {

}

    [data-bs-theme=dark] .nav {
        --bs-nav-link-color: #D5D6D2;
    }

    [data-bs-theme=dark] .logo svg {
        --color-primary: #F27100;
        --color-secondary: #D5D6D2;
    }

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

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

.logo svg {
    --color-primary: #F27100;
    --color-secondary: #2A2F35;
    height: 40px;
}

/* Loading */
body:has(.loading-progress)::after {
    content: "";
    background-image: url("/logo.svg");
    background-position: right bottom;
    background-size: 50%;
    background-repeat: no-repeat;
    opacity: 0.15;
    top: 0;
    left: 0;
    bottom: -32%;
    right: -20%;
    position: absolute;
    z-index: -1;
}

#logo-anim path {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    stroke-width: 1.25em;
    /*fill: var(--mct-branding-secondary-color);*/
    fill-opacity: 0.05;
}

    #logo-anim path:nth-child(1),
    #logo-anim path:nth-child(2),
    #logo-anim path:nth-child(3),
    #logo-anim path:nth-child(4),
    #logo-anim path:nth-child(5) {
        /*fill: var(--mct-branding-secondary-color);*/
        fill: #f27100;
    }

    #logo-anim path:nth-child(6),
    #logo-anim path:nth-child(7),
    #logo-anim path:nth-child(8),
    #logo-anim path:nth-child(9) {
        fill: #2a2f35;
    }

[data-bs-theme=dark] #logo-anim path:nth-child(6),
[data-bs-theme=dark] #logo-anim path:nth-child(7),
[data-bs-theme=dark] #logo-anim path:nth-child(8),
[data-bs-theme=dark] #logo-anim path:nth-child(9) {
    fill: var(--bs-body-color);
}

#logo-anim path:nth-child(1) {
    animation: line-anim 2s ease forwards, fill-anim 1s ease forwards 1.5s;
}

#logo-anim path:nth-child(2) {
    animation: line-anim 2s ease forwards, fill-anim 3s ease forwards 1.2s;
}

#logo-anim path:nth-child(3) {
    animation: line-anim 2s ease forwards, fill-anim 1s ease forwards 1.3s;
}

#logo-anim path:nth-child(4) {
    animation: line-anim 2s ease forwards, fill-anim 3s ease forwards 1.4s;
}

#logo-anim path:nth-child(5) {
    animation: line-anim 2s ease forwards, fill-anim 1s ease forwards 1.6s;
}

#logo-anim path:nth-child(6),
#logo-anim path:nth-child(7),
#logo-anim path:nth-child(8),
#logo-anim path:nth-child(9) {
    animation: line-anim 2s ease forwards, fill-anim 7s ease forwards 0.1s;
}

/* Animations */
@keyframes line-anim {
    to {
        stroke-dashoffset: 0;
        stroke-width: 0;
    }
}

@keyframes fill-anim {
    from {
        fill-opacity: 0.1;
    }

    to {
        fill-opacity: 1;
    }
}