/**
 * @copyright (c) 2004 - 2026 Performa Software Pty Ltd. All Rights Reserved.
 * @summary 🅱🅸🅳🆂 Server
 */

@layer theme {
    :root:not([data-theme]),
    :root[data-theme=Light] {
        --timeline-background-color: #F4F4F4;
        --timeline-axis-labels-text-color: #4d4d4d;
        --timeline-point-labels-text-color: black;
        --top-menu-background-color: #939ca2;
    }

    :root[data-theme=Dark] {
        --timeline-background-color: #28393A;
        --timeline-axis-labels-text-color: #8D9596;
        --timeline-point-labels-text-color: #e5e5e5;
        --top-menu-background-color: #273D54;
    }

    :is(:root:not([data-theme]), :root[data-theme=Light]) a.header-logo {
        --logo-background: #7ed80b url("../Branding/bids-logo-light.png") no-repeat 0px -20px / 100%;
    }

    :root[data-theme=Dark] a.header-logo {
        --logo-background: #396a00 url("../Branding/bids-logo-dark.png") no-repeat 0px -20px / 100%;
    }
}


nav.top-menu {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    grid-template-rows: auto auto auto auto;
    padding-inline-start: inherit;
    background: var(--top-menu-background-color);
    min-width: min-content;
}

    nav.top-menu > a#top-logo {
        grid-column: 1;
        grid-row: 1/span 4;
        width: 100%;
        height: 100%;
        border-top-right-radius: var(--instrument-box-corners-radius);
        border-bottom-left-radius: var(--instrument-box-corners-radius);
        border-top-left-radius: var(--instrument-box-corners-radius);
        margin-left: 0;
        margin: 0 auto;
        color: transparent;
    }

    nav.top-menu > a.header-logo {
        background: var(--logo-background);
    }

    nav.top-menu > nav#top-nav-bar {
        grid-column: 2;
        grid-row: 1;
        padding-top: 8px;
        margin-left: -30px;
        z-index: 2;
        align-self: end;
    }

    nav.top-menu > div#top-test-bar {
        grid-row: 1;
        grid-column: 3;
    }

    nav.top-menu > #top-context-bar {
        grid-row: 1;
        grid-column: 4;
    }

    nav.top-menu > div#top-buttons-bar {
        grid-column: 2/span 3;
        grid-row: 3;
        z-index: 3;
    }

    nav.top-menu > div#top-timeline-bar {
        grid-column: 1/span 4;
        grid-row: 5;
        padding-bottom: 25px;
        background: var(--timeline-background-color);
        border-bottom-left-radius: 7px;
        border-bottom-right-radius: 7px;
    }

        nav.top-menu > div#top-timeline-bar .vis-time-axis .vis-text {
            color: var(--timeline-axis-labels-text-color);
        }

        nav.top-menu > div#top-timeline-bar .vis-item-content > div {
            color: var(--timeline-point-labels-text-color) !important;
        }


    nav.top-menu li a.fg-menu.ui-button.ui-button-text-only {
        font-weight: normal !important;
        background: var(--top-menu-item-background-color) !important;
        color: var(--top-menu-item-text-color);
    }

    nav.top-menu ul a.ui-button:hover {
        color: #a9dff5;
    }