/*
 * GREENBOX GLOBAL OPERATOR SHELL V1
 *
 * Shared operator/admin shell.
 *
 * Scope:
 *   Project Portal
 *   Enterprise Launcher
 *   Operations Center
 *   Knowledge & Admin
 *   Architecture
 *
 * GreenBox Field is a destination in the bar but is NOT modified by
 * this shell release.
 *
 * The shell contains no independent theme engine.
 */

:root {
    --gb-operator-shell-height: 0px;
}

#greenbox-operator-shell,
#greenbox-operator-shell *,
#greenbox-operator-shell *::before,
#greenbox-operator-shell *::after {
    box-sizing: border-box;
}

#greenbox-operator-shell {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 2147482000;
    width: 100%;
    color: inherit;
    background:
        rgb(2 10 10 / 0.96);
    border-bottom:
        1px solid
        color-mix(
            in srgb,
            currentColor 36%,
            transparent
        );
    box-shadow:
        0 10px 36px
        rgb(0 0 0 / 0.24);
    backdrop-filter:
        blur(14px);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

#greenbox-operator-shell .gbos-inner {
    width:
        min(
            1760px,
            calc(100% - 32px)
        );
    margin:
        0 auto;
    padding:
        10px 0 11px;
}

#greenbox-operator-shell .gbos-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 50px;
}

#greenbox-operator-shell .gbos-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

#greenbox-operator-shell .gbos-brand:hover,
#greenbox-operator-shell .gbos-brand:focus-visible {
    text-decoration: none;
}

#greenbox-operator-shell .gbos-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border:
        1px solid
        color-mix(
            in srgb,
            currentColor 42%,
            transparent
        );
    border-radius: 9px;
    background:
        color-mix(
            in srgb,
            currentColor 12%,
            transparent
        );
    font-size: 1.15rem;
    font-weight: 900;
}

#greenbox-operator-shell .gbos-brand-name {
    font-size:
        clamp(
            1.35rem,
            2.2vw,
            1.9rem
        );
    line-height: 1;
    font-weight: 850;
    letter-spacing: -0.035em;
}

#greenbox-operator-shell .gbos-utilities {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

#greenbox-operator-shell .gbos-utility,
#greenbox-operator-shell .gbos-theme {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    margin: 0;
    padding: 7px 11px;
    border:
        1px solid
        color-mix(
            in srgb,
            currentColor 28%,
            transparent
        );
    border-radius: 11px;
    background:
        color-mix(
            in srgb,
            currentColor 7%,
            transparent
        );
    color: inherit;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 720;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

#greenbox-operator-shell .gbos-utility:hover,
#greenbox-operator-shell .gbos-utility:focus-visible,
#greenbox-operator-shell .gbos-theme:hover,
#greenbox-operator-shell .gbos-theme:focus-visible {
    background:
        color-mix(
            in srgb,
            currentColor 14%,
            transparent
        );
    border-color:
        color-mix(
            in srgb,
            currentColor 52%,
            transparent
        );
    text-decoration: none;
}

#greenbox-operator-shell .gbos-utility-icon {
    font-size: 1rem;
    line-height: 1;
}

#greenbox-operator-shell .gbos-notifications {
    width: 40px;
    padding-inline: 0;
}

#greenbox-operator-shell .gbos-nav {
    display: grid;
    grid-template-columns:
        repeat(
            7,
            minmax(0, 1fr)
        );
    gap: 8px;
    margin-top: 8px;
}

#greenbox-operator-shell .gbos-nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 40px;
    padding: 8px 10px;
    border:
        1px solid
        color-mix(
            in srgb,
            currentColor 28%,
            transparent
        );
    border-radius: 10px;
    background:
        color-mix(
            in srgb,
            currentColor 5%,
            transparent
        );
    color: inherit;
    font-size: 0.85rem;
    font-weight: 760;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    white-space: normal;
}

#greenbox-operator-shell .gbos-nav-link:hover,
#greenbox-operator-shell .gbos-nav-link:focus-visible {
    background:
        color-mix(
            in srgb,
            currentColor 13%,
            transparent
        );
    border-color:
        color-mix(
            in srgb,
            currentColor 52%,
            transparent
        );
    text-decoration: none;
}

#greenbox-operator-shell .gbos-nav-link.is-active {
    background:
        color-mix(
            in srgb,
            currentColor 18%,
            transparent
        );
    border-color:
        color-mix(
            in srgb,
            currentColor 76%,
            transparent
        );
    box-shadow:
        inset 0 0 0 1px
        color-mix(
            in srgb,
            currentColor 26%,
            transparent
        ),
        0 0 18px
        color-mix(
            in srgb,
            currentColor 18%,
            transparent
        );
}

#greenbox-operator-shell :focus-visible {
    outline:
        2px solid
        currentColor;
    outline-offset:
        3px;
}

#greenbox-operator-shell .gbos-placeholder {
    position: fixed;
    top:
        calc(
            var(--gb-operator-shell-height)
            + 8px
        );
    right: 18px;
    z-index: 2147482001;
    max-width: 360px;
    padding: 11px 13px;
    border:
        1px solid
        color-mix(
            in srgb,
            currentColor 34%,
            transparent
        );
    border-radius: 11px;
    background:
        rgb(4 12 14 / 0.96);
    color: inherit;
    box-shadow:
        0 18px 45px
        rgb(0 0 0 / 0.32);
    font-size: 0.82rem;
    line-height: 1.4;
}

#greenbox-operator-shell .gbos-placeholder[hidden] {
    display: none;
}

@media (max-width: 1320px) {

    #greenbox-operator-shell .gbos-nav {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }
}

@media (max-width: 760px) {

    #greenbox-operator-shell .gbos-inner {
        width:
            calc(100% - 18px);
    }

    #greenbox-operator-shell .gbos-top {
        align-items:
            flex-start;
    }

    #greenbox-operator-shell .gbos-utilities {
        flex-wrap:
            wrap;
    }

    #greenbox-operator-shell .gbos-user-label,
    #greenbox-operator-shell .gbos-theme-label {
        display:
            none;
    }

    #greenbox-operator-shell .gbos-nav {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    #greenbox-operator-shell .gbos-nav-link {
        font-size:
            0.8rem;
    }
}

@media (max-width: 470px) {

    #greenbox-operator-shell .gbos-brand-name {
        font-size:
            1.25rem;
    }

    #greenbox-operator-shell .gbos-nav {
        grid-template-columns:
            1fr;
    }
}

@media (prefers-reduced-motion: reduce) {

    #greenbox-operator-shell *,
    #greenbox-operator-shell *::before,
    #greenbox-operator-shell *::after {
        transition:
            none !important;
        animation:
            none !important;
    }
}

/* GREENBOX_THEME_EFFECTS_DRAWER_V1_BEGIN */

#greenbox-theme-effects-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2147482500;
    background: rgb(0 0 0 / 0.52);
    backdrop-filter: blur(3px);
}

#greenbox-theme-effects-backdrop[hidden] {
    display: none;
}

#greenbox-theme-effects-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 2147482501;
    width: min(430px, calc(100vw - 18px));
    height: 100vh;
    overflow: auto;
    padding: 18px;
    transform: translateX(105%);
    transition: transform 180ms ease;
    border-left:
        1px solid
        color-mix(
            in srgb,
            currentColor 34%,
            transparent
        );
    background:
        color-mix(
            in srgb,
            Canvas 95%,
            transparent
        );
    color: CanvasText;
    box-shadow:
        -22px 0 70px
        rgb(0 0 0 / 0.38);
}

#greenbox-theme-effects-drawer.is-open {
    transform: translateX(0);
}

.gbte-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.gbte-title {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.15;
}

.gbte-subtitle {
    margin: 4px 0 0;
    opacity: 0.72;
    font-size: 0.86rem;
}

.gbte-close {
    min-width: 40px;
    min-height: 40px;
    padding: 6px;
    border:
        1px solid
        color-mix(
            in srgb,
            currentColor 28%,
            transparent
        );
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.gbte-section {
    margin-top: 18px;
    padding-top: 16px;
    border-top:
        1px solid
        color-mix(
            in srgb,
            currentColor 18%,
            transparent
        );
}

.gbte-section h3 {
    margin: 0 0 10px;
    font-size: 1rem;
}

.gbte-theme-grid {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
    gap: 8px;
}

.gbte-theme {
    min-height: 40px;
    padding: 8px 10px;
    border:
        1px solid
        color-mix(
            in srgb,
            currentColor 25%,
            transparent
        );
    border-radius: 10px;
    background:
        color-mix(
            in srgb,
            currentColor 5%,
            transparent
        );
    color: inherit;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 720;
    cursor: pointer;
    text-align: left;
}

.gbte-theme:hover,
.gbte-theme:focus-visible,
.gbte-theme.is-active {
    border-color:
        color-mix(
            in srgb,
            currentColor 68%,
            transparent
        );
    background:
        color-mix(
            in srgb,
            currentColor 15%,
            transparent
        );
}

.gbte-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 44px;
}

.gbte-toggle-row label {
    font-weight: 720;
}

.gbte-status {
    min-height: 48px;
    margin-top: 14px;
    padding: 10px 12px;
    border:
        1px solid
        color-mix(
            in srgb,
            currentColor 18%,
            transparent
        );
    border-radius: 10px;
    background:
        color-mix(
            in srgb,
            currentColor 4%,
            transparent
        );
    font-size: 0.8rem;
    line-height: 1.4;
}

.gbte-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.gbte-actions a,
.gbte-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 11px;
    border:
        1px solid
        color-mix(
            in srgb,
            currentColor 30%,
            transparent
        );
    border-radius: 10px;
    background:
        color-mix(
            in srgb,
            currentColor 6%,
            transparent
        );
    color: inherit;
    font: inherit;
    font-weight: 720;
    text-decoration: none;
    cursor: pointer;
}

@media (max-width: 520px) {

    .gbte-theme-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {

    #greenbox-theme-effects-drawer {
        transition: none;
    }
}

/* GREENBOX_THEME_EFFECTS_DRAWER_V1_END */

/* GREENBOX_GLOBAL_CONTROLS_CLOSEOUT_V1_BEGIN */

#greenbox-matrix-canvas {
    pointer-events: none !important;
}

html.gb-effects-underlay-root {
    min-height: 100%;
}

body.gb-effects-underlay-mode {
    position: relative !important;
    isolation: isolate !important;
    background: transparent !important;
}

#greenbox-effects-underlay {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

#greenbox-effects-underlay > #greenbox-matrix-canvas {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

#greenbox-operator-shell,
#greenbox-theme-effects-backdrop,
#greenbox-theme-effects-drawer,
#greenbox-notifications-menu,
#greenbox-user-menu,
#greenbox-field-theme-button {
    position: fixed;
}

#greenbox-notifications-menu,
#greenbox-user-menu {
    top: calc(var(--gb-operator-shell-height, 104px) - 2px);
    right: 18px;
    z-index: 2147482600;
    width: min(360px, calc(100vw - 24px));
    padding: 12px;
    border:
        1px solid
        color-mix(
            in srgb,
            currentColor 30%,
            transparent
        );
    border-radius: 12px;
    background:
        rgb(4 14 13 / 0.98);
    color: inherit;
    box-shadow:
        0 22px 58px
        rgb(0 0 0 / 0.42);
    backdrop-filter:
        blur(14px);
}

#greenbox-notifications-menu[hidden],
#greenbox-user-menu[hidden] {
    display: none;
}

.gb-shell-menu-title {
    margin: 0 0 9px;
    font-size: 0.96rem;
    font-weight: 850;
}

.gb-shell-menu-note {
    margin: 0;
    opacity: 0.72;
    font-size: 0.82rem;
    line-height: 1.4;
}

.gb-shell-menu-links {
    display: grid;
    gap: 7px;
}

.gb-shell-menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 42px;
    padding: 9px 11px;
    border:
        1px solid
        color-mix(
            in srgb,
            currentColor 24%,
            transparent
        );
    border-radius: 10px;
    background:
        color-mix(
            in srgb,
            currentColor 6%,
            transparent
        );
    color: inherit;
    text-decoration: none;
    font-weight: 760;
}

.gb-shell-menu-link:hover,
.gb-shell-menu-link:focus-visible {
    border-color:
        color-mix(
            in srgb,
            currentColor 60%,
            transparent
        );
    background:
        color-mix(
            in srgb,
            currentColor 13%,
            transparent
        );
}

#greenbox-theme-effects-backdrop {
    inset: 0;
    z-index: 2147482700;
    background:
        rgb(0 0 0 / 0.52);
    backdrop-filter:
        blur(3px);
}

#greenbox-theme-effects-backdrop[hidden] {
    display: none;
}

#greenbox-theme-effects-drawer {
    top: 0;
    right: 0;
    z-index: 2147482701;
    width:
        min(
            430px,
            calc(100vw - 18px)
        );
    height: 100vh;
    overflow: auto;
    padding: 18px;
    transform:
        translateX(
            105%
        );
    transition:
        transform 180ms ease;
    border-left:
        1px solid
        color-mix(
            in srgb,
            currentColor 34%,
            transparent
        );
    background:
        rgb(7 17 15 / 0.98);
    color: inherit;
    box-shadow:
        -22px 0 70px
        rgb(0 0 0 / 0.42);
}

#greenbox-theme-effects-drawer.is-open {
    transform:
        translateX(
            0
        );
}

.gbte-head {
    display: flex;
    align-items:
        flex-start;
    justify-content:
        space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.gbte-title {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.15;
}

.gbte-subtitle {
    margin: 4px 0 0;
    opacity: 0.72;
    font-size: 0.86rem;
}

.gbte-close {
    min-width: 40px;
    min-height: 40px;
    padding: 6px;
    border:
        1px solid
        color-mix(
            in srgb,
            currentColor 28%,
            transparent
        );
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.gbte-section {
    margin-top: 18px;
    padding-top: 16px;
    border-top:
        1px solid
        color-mix(
            in srgb,
            currentColor 18%,
            transparent
        );
}

.gbte-section h3 {
    margin: 0 0 10px;
    font-size: 1rem;
}

.gbte-theme-grid {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );
    gap: 8px;
}

.gbte-theme {
    min-height: 40px;
    padding: 8px 10px;
    border:
        1px solid
        color-mix(
            in srgb,
            currentColor 25%,
            transparent
        );
    border-radius: 10px;
    background:
        color-mix(
            in srgb,
            currentColor 5%,
            transparent
        );
    color: inherit;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 720;
    cursor: pointer;
    text-align: left;
}

.gbte-theme:hover,
.gbte-theme:focus-visible,
.gbte-theme.is-active {
    border-color:
        color-mix(
            in srgb,
            currentColor 70%,
            transparent
        );
    background:
        color-mix(
            in srgb,
            currentColor 15%,
            transparent
        );
}

.gbte-toggle-row {
    display: flex;
    align-items: center;
    justify-content:
        space-between;
    gap: 14px;
    min-height: 44px;
}

.gbte-toggle-row label {
    font-weight: 720;
}

.gbte-status {
    min-height: 48px;
    margin-top: 14px;
    padding: 10px 12px;
    border:
        1px solid
        color-mix(
            in srgb,
            currentColor 18%,
            transparent
        );
    border-radius: 10px;
    background:
        color-mix(
            in srgb,
            currentColor 4%,
            transparent
        );
    font-size: 0.8rem;
    line-height: 1.4;
}

#greenbox-field-theme-button {
    z-index: 2147482400;
    min-height: 38px;
    padding: 8px 12px;
    border:
        1px solid
        currentColor;
    border-radius: 10px;
    background:
        rgb(2 25 16 / 0.94);
    color: inherit;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    box-shadow:
        0 10px 30px
        rgb(0 0 0 / 0.26);
}

#greenbox-field-theme-button.gb-field-theme-inline {
    position: static;
    margin-inline: 6px;
    box-shadow: none;
}

#greenbox-field-theme-button.gb-field-theme-floating {
    top: 18px;
    right: 18px;
}

@media (max-width: 520px) {

    .gbte-theme-grid {
        grid-template-columns:
            1fr;
    }
}

@media (prefers-reduced-motion: reduce) {

    #greenbox-theme-effects-drawer {
        transition: none;
    }
}

/* GREENBOX_GLOBAL_CONTROLS_CLOSEOUT_V1_END */