/* =========================================================
   ASTROLOOP PULSE-FREE GREY UI
   Loaded before Open MCT paints the application.
   ========================================================= */

:root {
    color-scheme: dark;

    --al-bg-deep: #1f2325;
    --al-bg-main: #24292c;
    --al-bg-panel: #292e31;
    --al-bg-raised: #303538;
    --al-bg-header: #343a3e;
    --al-bg-selected: #4b5155;
    --al-border: #4b5155;
    --al-border-light: #626a6f;
    --al-text: #e7ebed;
}

/* The browser must always have a grey surface to paint. */
html,
body,
#openmct-app {
    min-height: 100% !important;

    background: var(--al-bg-main) !important;
    background-color: var(--al-bg-main) !important;
    background-image: none !important;
}

/* Remove the former Open MCT startup screen completely. */
#splash-screen,
.c-splash,
.c-splash-screen,
.loading-screen,
[class*="legacy-splash"],
[class*="old-ui-loading"] {
    display: none !important;
    visibility: hidden !important;

    width: 0 !important;
    height: 0 !important;

    opacity: 0 !important;
    overflow: hidden !important;
}

/* Permanent application surfaces. */
.l-shell,
.l-shell__main,
.l-shell__drawer,
.l-shell__pane-tree,
.l-shell__pane-main,
.l-shell__pane-inspector,
.l-shell__main-container,
.js-main-container,
.l-shell__tree,
.l-pane,
.l-view,
.c-object-view,
.c-tree-and-search,
.c-tree,
.c-tree__scrollable,
.c-inspector,
.c-inspector__content,
.c-inspector__tabs {
    background: var(--al-bg-main) !important;
    background-color: var(--al-bg-main) !important;
    background-image: none !important;
}

/* Browse, toolbar and inspector headers. */
.l-browse-bar,
.c-browse-bar,
.c-toolbar,
.c-inspector__header,
.c-inspect-properties__header,
.c-tabs {
    background: var(--al-bg-panel) !important;
    background-color: var(--al-bg-panel) !important;
    background-image: none !important;

    border-color: var(--al-border) !important;
}

/* Open MCT loading and busy surfaces must remain grey. */
[aria-busy="true"],
.c-loading,
.c-message--loading,
.c-progress,
.loading,
[class*="loading-state"],
[class*="loading-panel"],
[class*="loading-page"],
[class*="buffering"] {
    background: var(--al-bg-main) !important;
    background-color: var(--al-bg-main) !important;
    background-image: none !important;

    border-color: var(--al-border) !important;
    box-shadow: none !important;
}

/* Custom AstroLoop page roots. */
.al-ch-page,
.al-astra-page,
.al-osdr-page,
.al-activity-page,
.al-resources-page,
.al-food-page,
.al-maintenance-page,
.al-hardware-page,
.al-digital-twin-page,
.al-computer-vision-page,
[class*="astroloop"][class*="page"],
[class*="astroloop"][class*="dashboard"] {
    background: var(--al-bg-main) !important;
    background-color: var(--al-bg-main) !important;
    background-image: none !important;
}

/* The lightweight JavaScript finalizer marks blue surfaces. */
[data-astroloop-grey-surface="true"] {
    background: var(--al-bg-panel) !important;
    background-color: var(--al-bg-panel) !important;
    background-image: none !important;

    border-color: var(--al-border) !important;
    box-shadow: none !important;
}

/* Grey Refresh controls. */
.astroloop-refresh-grey-target,
button[data-astroloop-refresh-control="true"] {
    background: var(--al-bg-header) !important;
    background-color: var(--al-bg-header) !important;
    background-image: none !important;

    border-color: #5b6368 !important;
    color: #ffffff !important;

    box-shadow: none !important;
    text-shadow: none !important;
}

.astroloop-refresh-grey-target:hover,
.astroloop-refresh-grey-target:focus,
button[data-astroloop-refresh-control="true"]:hover,
button[data-astroloop-refresh-control="true"]:focus {
    background: #42494d !important;
    background-color: #42494d !important;
    background-image: none !important;

    border-color: #737b80 !important;
}

/*
 * Disable animations only on application containers and
 * loading elements. SVG and canvas data visualizations are
 * deliberately excluded.
 */
body.astroloop-pulse-free
:where(
    .l-shell,
    .l-pane,
    .l-shell__pane-main,
    .l-shell__main-container,
    .js-main-container,
    .c-object-view,
    .c-loading,
    .loading,
    [class*="loading-state"],
    [class*="loading-panel"],
    [class*="page"],
    [class*="panel"],
    [class*="card"],
    [class*="toolbar"],
    [class*="header"]
) {
    transition: none !important;
    animation: none !important;
}

/* Previous completed frame retained during a manual refresh. */
#astroloop-refresh-shield {
    position: fixed !important;
    z-index: 2147483000 !important;

    overflow: hidden !important;
    pointer-events: none !important;

    background: var(--al-bg-main) !important;
    background-color: var(--al-bg-main) !important;
    background-image: none !important;

    border: 0 !important;
    box-shadow: none !important;

    contain: paint !important;
}

#astroloop-refresh-shield,
#astroloop-refresh-shield * {
    transition: none !important;
    animation: none !important;
}

#astroloop-refresh-shield
:where(
    .l-shell__main-container,
    .js-main-container,
    .c-object-view,
    .l-view
) {
    background: var(--al-bg-main) !important;
    background-color: var(--al-bg-main) !important;
    background-image: none !important;
}