/*
 * Global Mac-style menu
 * Separate visual layer.
 * Does not implement or alter SSO.
 */

:root {
    --mac-global-height: 32px;
    --mac-global-bg: rgba(248,248,250,.90);
    --mac-global-panel: rgba(255,255,255,.98);
    --mac-global-text: #1d1d1f;
    --mac-global-muted: #6e6e73;
    --mac-global-border: rgba(0,0,0,.13);
    --mac-global-hover: rgba(0,0,0,.07);
    --mac-global-blue: #0a84ff;
}

/*
 * The Mac bar owns the top 32px.
 * The application starts below it instead of being covered.
 */
html.mac-global-active {
    scroll-padding-top: var(--mac-global-height) !important;
}

body.mac-global-enabled {
    padding-top: var(--mac-global-height) !important;
}

/*
 * Hide only the old VISUAL shared topbar while the
 * new Mac bar is actually active.
 *
 * It is NOT hidden on SSO/auth pages.
 */
body.mac-global-enabled #isp-modern-topbar {
    display: none !important;
}

#mac-global-menubar,
#mac-global-menubar * {
    box-sizing: border-box !important;
}

#mac-global-menubar {
    position: fixed !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    height: var(--mac-global-height) !important;
    min-height: var(--mac-global-height) !important;
    max-height: var(--mac-global-height) !important;

    margin: 0 !important;
    padding: 0 8px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    background: var(--mac-global-bg) !important;

    color: var(--mac-global-text) !important;

    border: 0 !important;
    border-bottom:
        1px solid var(--mac-global-border) !important;

    border-radius: 0 !important;

    box-shadow:
        0 1px 8px rgba(0,0,0,.08) !important;

    backdrop-filter:
        saturate(180%) blur(18px);

    -webkit-backdrop-filter:
        saturate(180%) blur(18px);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Text",
        "Segoe UI",
        sans-serif !important;

    font-size: 13px !important;
    line-height: normal !important;

    z-index: 2147483640 !important;
}

.mac-global-left,
.mac-global-right {
    height: 100%;

    display: flex;
    align-items: center;
}

.mac-global-left {
    min-width: 0;
}

.mac-global-right {
    flex: 0 0 auto;

    margin-left: auto;

    gap: 3px;
}

.mac-global-home,
.mac-global-button,
.mac-global-right-item {
    height: 25px;

    border: 0 !important;
    border-radius: 6px !important;

    background: transparent !important;

    color: var(--mac-global-text) !important;

    font: inherit !important;

    text-decoration: none !important;

    display: inline-flex;
    align-items: center;

    white-space: nowrap;
}

.mac-global-home {
    gap: 6px;

    padding: 0 8px;

    font-weight: 650 !important;
}

.mac-global-button {
    padding: 0 9px;

    cursor: pointer;
}

.mac-global-right-item {
    padding: 0 7px;
}

.mac-global-home:hover,
.mac-global-button:hover,
.mac-global-group.mac-global-open
.mac-global-button {
    background:
        var(--mac-global-hover) !important;
}

.mac-global-logo {
    width: 13px;
    height: 13px;

    border-radius: 50%;

    display: inline-block;

    background: currentColor;

    opacity: .88;
}

.mac-global-group {
    position: relative;

    height: 100%;

    display: inline-flex;
    align-items: center;
}

.mac-global-dropdown {
    position: absolute;

    top: calc(100% + 3px);
    left: 0;

    min-width: 225px;

    padding: 5px;

    display: none;

    background:
        var(--mac-global-panel);

    border:
        1px solid var(--mac-global-border);

    border-radius: 9px;

    box-shadow:
        0 14px 38px rgba(0,0,0,.20);

    backdrop-filter:
        blur(24px) saturate(180%);

    -webkit-backdrop-filter:
        blur(24px) saturate(180%);

    z-index: 2147483641 !important;
}

.mac-global-group.mac-global-open
.mac-global-dropdown {
    display: block !important;
}

.mac-global-item {
    min-height: 29px;

    width: 100%;

    padding: 5px 9px !important;

    display: flex !important;
    align-items: center !important;

    gap: 9px;

    border-radius: 5px !important;

    color:
        var(--mac-global-text) !important;

    text-decoration: none !important;

    font-size: 13px !important;
    font-weight: 400 !important;

    white-space: nowrap;
}

.mac-global-item:hover {
    background:
        var(--mac-global-blue) !important;

    color: white !important;
}

.mac-global-item.mac-current {
    font-weight: 650 !important;
}

.mac-global-icon {
    width: 18px;

    display: inline-flex;
    justify-content: center;

    opacity: .88;
}

.mac-global-page {
    max-width: 170px;

    overflow: hidden;
    text-overflow: ellipsis;

    color:
        var(--mac-global-muted) !important;
}

.mac-global-dot {
    width: 7px;
    height: 7px;

    margin-right: 5px;

    border-radius: 50%;

    background: #30d158;
}

.mac-global-clock {
    min-width: 75px;

    text-align: center;

    font-variant-numeric:
        tabular-nums;
}

.mac-vdi-controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 8px;
    flex: 0 0 auto;
}

.mac-vdi-control {
    height: 22px;
    padding: 0 10px;
    border: 1px solid var(--mac-global-border) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.72) !important;
    color: var(--mac-global-text) !important;
    font: inherit !important;
    font-size: 12px !important;
    line-height: 20px !important;
    cursor: pointer;
    white-space: nowrap;
}

.mac-vdi-control:hover {
    background: rgba(255,255,255,.92) !important;
}

body.mac-guac-controls .mac-global-right {
    gap: 2px;
}

body.mac-guac-controls .mac-global-page,
body.mac-guac-controls .mac-global-status,
body.mac-guac-controls .mac-global-clock {
    display: none !important;
}

body.mac-guac-controls .mac-vdi-controls {
    margin-left: 8px;
}

body.mac-guac-controls .mac-global-right {
    overflow: visible;
}

@media (prefers-color-scheme: dark) {
    :root {
        --mac-global-bg:
            rgba(30,30,32,.91);

        --mac-global-panel:
            rgba(40,40,42,.98);

        --mac-global-text:
            #f5f5f7;

        --mac-global-muted:
            #a1a1a6;

        --mac-global-border:
            rgba(255,255,255,.13);

        --mac-global-hover:
            rgba(255,255,255,.11);
    }
}

@media (max-width: 850px) {

    .mac-global-page,
    .mac-global-status {
        display: none !important;
    }

    .mac-global-home-label {
        display: none !important;
    }

    body.mac-guac-controls .mac-global-clock {
        display: none !important;
    }
}

@media (max-width: 650px) {
    body.mac-guac-controls .mac-global-group:nth-of-type(n+4) {
        display: inline-flex !important;
    }

    .mac-global-button {
        padding-left: 6px;
        padding-right: 6px;
    }

    .mac-vdi-controls {
        gap: 3px;
        margin-right: 4px;
    }

    .mac-vdi-control {
        padding: 0 8px;
    }

    .mac-vdi-control-fullscreen {
        padding: 0 8px;
    }
}

@media (max-width: 750px) {
    .mac-vdi-control {
        font-size: 0;
        width: 26px;
        padding: 0;
    }

    .mac-vdi-control::before {
        font-size: 12px;
    }

    .mac-vdi-control:first-child::before {
        content: "Fit";
    }

    .mac-vdi-control:nth-child(2)::before {
        content: "100%";
    }

    .mac-vdi-control-fullscreen::before {
        content: "⛶";
    }

    .mac-vdi-control-fullscreen {
        width: 26px;
    }

    body.mac-guac-controls .mac-vdi-controls {
        gap: 2px;
    }
}

/* HK_HOME_CAMERA_MEDIA_DEFAULT_CSS_START */

/*
 * Media split control:
 *
 *   [ Media ][ ▾ ]
 *
 * Media opens the HK Home Camera.
 * Arrow preserves the original Media dropdown.
 */

.mac-global-media-home {
    text-decoration: none !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.mac-global-media-toggle {
    min-width: 28px !important;
    width: 28px !important;

    padding-left: 5px !important;
    padding-right: 5px !important;

    margin-left: -1px !important;

    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Keep the two Media controls visually together. */
.mac-global-media-home +
.mac-global-media-toggle {
    vertical-align: middle;
}

/* HK_HOME_CAMERA_MEDIA_DEFAULT_CSS_END */