/* =========================================================
   ASTROLOOP OSDR & HISTORICAL BASELINES
   Version: 20260903-osdr-baselines-advanced-grey-1

   Grey / charcoal / white only.
   No icons.
   No full-page animation.
   No blue/cyan.
   ========================================================= */

:root {
    --os-bg0: #151515;
    --os-bg1: #1a1a1a;
    --os-bg2: #212121;
    --os-bg3: #292929;
    --os-bg4: #303030;
    --os-bg5: #393939;

    --os-border1: #3c3c3c;
    --os-border2: #4a4a4a;
    --os-border3: #626262;

    --os-text1: #f1f1f1;
    --os-text2: #d1d1d1;
    --os-text3: #a5a5a5;
    --os-text4: #808080;

    --os-line0: #dddddd;
    --os-line1: #bbbbbb;
    --os-line2: #999999;
    --os-line3: #777777;
    --os-line4: #5f5f5f;
}


/* ---------------------------------------------------------
   Open MCT page surface
   --------------------------------------------------------- */

body.al-os3-active,
body.al-os3-active #openmct-app,
body.al-os3-active .l-shell__pane-main,
body.al-os3-active .l-shell__main-container,
body.al-os3-active .js-main-container,
body.al-os3-active .c-object-view {
    background:
        var(--os-bg0) !important;

    background-color:
        var(--os-bg0) !important;

    background-image:
        none !important;
}


body.al-os3-active
.l-shell__pane-tree
[aria-selected="true"],

body.al-os3-active
.l-shell__pane-tree
.is-selected,

body.al-os3-active
.l-shell__pane-tree
[class*="selected"] {
    background:
        #555555 !important;

    background-color:
        #555555 !important;

    background-image:
        none !important;

    border-color:
        #696969 !important;

    box-shadow:
        none !important;
}


/*
 * Nothing in this page is allowed to pulse/fade.
 */
body.al-os3-active
#al-os3-root,

body.al-os3-active
#al-os3-root * {
    box-sizing:
        border-box;

    animation:
        none !important;

    transition:
        none !important;
}


/*
 * Disable previous whole-page loading shields only while the
 * OSDR page is visible.
 */
body.al-os3-active
.astroloop-refresh-freeze-overlay,

body.al-os3-active
#astroloop-refresh-shield,

body.al-os3-active
#astroloop-zero-pulse-overlay {
    display:
        none !important;

    visibility:
        hidden !important;

    opacity:
        0 !important;
}


/* ---------------------------------------------------------
   Main root
   --------------------------------------------------------- */

#al-os3-root {
    width:
        100%;

    min-width:
        0;

    min-height:
        100%;

    margin:
        0;

    padding:
        15px;

    overflow:
        visible;

    background:
        var(--os-bg0);

    color:
        var(--os-text1);

    font-family:
        Roboto,
        Arial,
        Helvetica,
        sans-serif;
}


/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */

.al-os3-header {
    display:
        grid;

    grid-template-columns:
        minmax(420px, 1fr)
        auto;

    gap:
        20px;

    align-items:
        start;

    padding-bottom:
        11px;

    border-bottom:
        1px solid
        var(--os-border1);
}


.al-os3-title {
    margin:
        0 0 5px;

    color:
        #ffffff;

    font-size:
        26px;

    font-weight:
        600;

    line-height:
        1.1;
}


.al-os3-subtitle {
    margin:
        0;

    color:
        var(--os-text3);

    font-size:
        11px;

    line-height:
        1.45;
}


.al-os3-header-controls {
    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        flex-end;

    gap:
        7px;
}


.al-os3-control {
    min-height:
        29px;

    padding:
        0 10px;

    border:
        1px solid
        var(--os-border2);

    border-radius:
        2px;

    background:
        var(--os-bg3);

    color:
        var(--os-text2);

    font-size:
        9px;

    outline:
        0;

    box-shadow:
        none;
}


.al-os3-control:hover {
    background:
        var(--os-bg4);
}


#al-os3-refresh {
    min-width:
        76px;

    cursor:
        pointer;

    animation:
        none !important;

    transition:
        none !important;
}


#al-os3-refresh:disabled {
    opacity:
        .55;

    cursor:
        default;
}


/* ---------------------------------------------------------
   Subnavigation
   --------------------------------------------------------- */

.al-os3-tabs {
    display:
        flex;

    gap:
        4px;

    padding:
        8px 0;

    border-bottom:
        1px solid
        var(--os-border1);
}


.al-os3-tab {
    height:
        28px;

    padding:
        0 12px;

    border:
        0;

    border-bottom:
        2px solid transparent;

    background:
        transparent;

    color:
        var(--os-text3);

    font-size:
        9px;

    cursor:
        pointer;
}


.al-os3-tab:hover {
    color:
        var(--os-text1);
}


.al-os3-tab.active {
    color:
        #ffffff;

    border-bottom-color:
        #aaaaaa;
}


/* ---------------------------------------------------------
   KPI row
   --------------------------------------------------------- */

.al-os3-kpis {
    display:
        grid;

    grid-template-columns:
        repeat(
            7,
            minmax(0, 1fr)
        );

    gap:
        7px;

    margin:
        10px 0;
}


.al-os3-kpi {
    min-height:
        78px;

    padding:
        10px 11px;

    border:
        1px solid
        var(--os-border1);

    background:
        var(--os-bg2);
}


.al-os3-kpi-name {
    color:
        var(--os-text4);

    font-size:
        8px;

    font-weight:
        600;

    text-transform:
        uppercase;
}


.al-os3-kpi-value {
    margin-top:
        7px;

    color:
        #ffffff;

    font-size:
        20px;

    font-weight:
        500;

    line-height:
        1;
}


.al-os3-kpi-foot {
    margin-top:
        7px;

    color:
        var(--os-text3);

    font-size:
        8px;

    line-height:
        1.3;
}


/* ---------------------------------------------------------
   Generic panel
   --------------------------------------------------------- */

.al-os3-panel {
    min-width:
        0;

    overflow:
        hidden;

    border:
        1px solid
        var(--os-border1);

    background:
        var(--os-bg2);
}


.al-os3-panel-title {
    min-height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    padding:
        7px 10px;

    border-bottom:
        1px solid
        var(--os-border1);

    background:
        var(--os-bg3);

    color:
        var(--os-text1);

    font-size:
        9px;

    font-weight:
        600;

    text-transform:
        uppercase;
}


.al-os3-panel-title-note {
    color:
        var(--os-text4);

    font-size:
        8px;

    font-weight:
        400;

    text-transform:
        none;
}


.al-os3-panel-body {
    padding:
        10px;
}


/* ---------------------------------------------------------
   Main trend/health grid
   --------------------------------------------------------- */

.al-os3-top-grid {
    display:
        grid;

    grid-template-columns:
        minmax(620px, 2fr)
        minmax(280px, .85fr);

    gap:
        9px;

    margin-bottom:
        9px;
}


.al-os3-trend-layout {
    display:
        grid;

    grid-template-columns:
        minmax(430px, 1.7fr)
        minmax(220px, .75fr);

    gap:
        10px;
}


.al-os3-chart {
    width:
        100%;

    height:
        250px;

    display:
        block;
}


.al-os3-gridline {
    stroke:
        #3d3d3d;

    stroke-width:
        1;
}


.al-os3-axis {
    fill:
        #858585;

    font-size:
        9px;
}


.al-os3-zero {
    stroke:
        #777777;

    stroke-width:
        1;

    stroke-dasharray:
        5 4;
}


.al-os3-trend-0 {
    fill:
        none;

    stroke:
        var(--os-line0);

    stroke-width:
        1.5;
}


.al-os3-trend-1 {
    fill:
        none;

    stroke:
        var(--os-line1);

    stroke-width:
        1.4;
}


.al-os3-trend-2 {
    fill:
        none;

    stroke:
        var(--os-line2);

    stroke-width:
        1.3;
}


.al-os3-trend-3 {
    fill:
        none;

    stroke:
        var(--os-line3);

    stroke-width:
        1.3;
}


.al-os3-trend-4 {
    fill:
        none;

    stroke:
        var(--os-line4);

    stroke-width:
        1.2;
}


.al-os3-chart-message {
    fill:
        #858585;

    font-size:
        10px;

    text-anchor:
        middle;
}


/* ---------------------------------------------------------
   Parameter summary table
   --------------------------------------------------------- */

.al-os3-mini-table {
    width:
        100%;

    border-collapse:
        collapse;

    font-size:
        8px;
}


.al-os3-mini-table th {
    padding:
        6px;

    border-bottom:
        1px solid
        var(--os-border2);

    color:
        var(--os-text4);

    font-size:
        7px;

    font-weight:
        500;

    text-align:
        left;

    text-transform:
        uppercase;
}


.al-os3-mini-table td {
    padding:
        6px;

    border-bottom:
        1px solid
        #363636;

    color:
        var(--os-text2);
}


.al-os3-mini-table td.num {
    text-align:
        right;

    font-variant-numeric:
        tabular-nums;
}


/* ---------------------------------------------------------
   Health donut
   --------------------------------------------------------- */

.al-os3-health-layout {
    display:
        grid;

    grid-template-columns:
        170px
        1fr;

    gap:
        12px;

    align-items:
        center;
}


.al-os3-donut {
    position:
        relative;

    width:
        145px;

    height:
        145px;

    margin:
        5px auto;

    border-radius:
        50%;

    background:
        conic-gradient(
            #b4b4b4 0deg 260deg,
            #8c8c8c 260deg 320deg,
            #666666 320deg 345deg,
            #484848 345deg 360deg
        );
}


.al-os3-donut::after {
    content:
        "";

    position:
        absolute;

    inset:
        25px;

    border-radius:
        50%;

    background:
        var(--os-bg2);
}


.al-os3-donut-center {
    position:
        absolute;

    z-index:
        2;

    inset:
        0;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;
}


.al-os3-donut-value {
    color:
        #ffffff;

    font-size:
        22px;

    font-weight:
        500;
}


.al-os3-donut-label {
    margin-top:
        5px;

    color:
        var(--os-text3);

    font-size:
        8px;

    text-transform:
        uppercase;
}


.al-os3-health-row {
    display:
        grid;

    grid-template-columns:
        1fr
        auto;

    gap:
        8px;

    align-items:
        center;

    min-height:
        31px;

    border-bottom:
        1px solid
        #363636;

    color:
        var(--os-text3);

    font-size:
        9px;
}


.al-os3-health-row:last-child {
    border-bottom:
        0;
}


.al-os3-health-value {
    color:
        #ffffff;

    font-variant-numeric:
        tabular-nums;
}


/* ---------------------------------------------------------
   Middle three-column grid
   --------------------------------------------------------- */

.al-os3-middle-grid {
    display:
        grid;

    grid-template-columns:
        1.05fr
        1fr
        1.05fr;

    gap:
        9px;

    margin-bottom:
        9px;
}


/* ---------------------------------------------------------
   General tables
   --------------------------------------------------------- */

.al-os3-table-wrap {
    width:
        100%;

    overflow-x:
        auto;

    scrollbar-color:
        #626262
        #222222;
}


.al-os3-table {
    width:
        100%;

    border-collapse:
        collapse;

    table-layout:
        fixed;

    background:
        var(--os-bg2);

    color:
        var(--os-text2);

    font-size:
        8px;
}


.al-os3-table th {
    padding:
        7px;

    border:
        1px solid
        var(--os-border2);

    background:
        var(--os-bg4);

    color:
        var(--os-text3);

    font-size:
        7px;

    font-weight:
        500;

    text-align:
        left;

    text-transform:
        uppercase;
}


.al-os3-table td {
    padding:
        7px;

    border:
        1px solid
        var(--os-border2);

    background:
        var(--os-bg2);

    color:
        var(--os-text2);

    vertical-align:
        top;
}


.al-os3-table
tbody tr:nth-child(even) td {
    background:
        #252525;
}


.al-os3-table
tbody tr:hover td {
    background:
        #303030;
}


.al-os3-empty {
    color:
        var(--os-text4) !important;

    font-style:
        italic;
}


/* ---------------------------------------------------------
   Historical baseline information
   --------------------------------------------------------- */

.al-os3-info-row {
    display:
        grid;

    grid-template-columns:
        145px
        1fr;

    gap:
        10px;

    min-height:
        27px;

    align-items:
        center;

    padding:
        3px 6px;

    border-bottom:
        1px solid
        #353535;

    font-size:
        8px;
}


.al-os3-info-name {
    color:
        var(--os-text4);

    text-transform:
        uppercase;
}


.al-os3-info-value {
    color:
        var(--os-text2);

    word-break:
        break-word;
}


/* ---------------------------------------------------------
   Distribution/Data quality grid
   --------------------------------------------------------- */

.al-os3-bottom-grid {
    display:
        grid;

    grid-template-columns:
        minmax(620px, 1.8fr)
        minmax(280px, .9fr);

    gap:
        9px;
}


.al-os3-distribution-layout {
    display:
        grid;

    grid-template-columns:
        minmax(430px, 1fr)
        170px;

    gap:
        10px;
}


.al-os3-histogram {
    width:
        100%;

    height:
        210px;

    display:
        block;
}


.al-os3-hist-bar {
    fill:
        #858585;

    stroke:
        #aaaaaa;

    stroke-width:
        .5;
}


.al-os3-hist-mean {
    stroke:
        #dddddd;

    stroke-width:
        1.3;

    stroke-dasharray:
        5 4;
}


/* ---------------------------------------------------------
   Data quality
   --------------------------------------------------------- */

.al-os3-quality-row {
    display:
        grid;

    grid-template-columns:
        105px
        1fr
        48px;

    gap:
        8px;

    align-items:
        center;

    min-height:
        34px;

    padding:
        4px 7px;

    border-bottom:
        1px solid
        #363636;

    font-size:
        8px;
}


.al-os3-quality-name {
    color:
        var(--os-text3);
}


.al-os3-quality-track {
    height:
        6px;

    background:
        #3b3b3b;
}


.al-os3-quality-fill {
    height:
        100%;

    background:
        #a3a3a3;
}


.al-os3-quality-value {
    color:
        #ffffff;

    text-align:
        right;
}


/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */

.al-os3-footer {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        7px 3px 1px;

    color:
        var(--os-text4);

    font-size:
        8px;
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (
    max-width: 1400px
) {
    .al-os3-kpis {
        grid-template-columns:
            repeat(
                4,
                1fr
            );
    }

    .al-os3-top-grid {
        grid-template-columns:
            1fr;
    }

    .al-os3-middle-grid {
        grid-template-columns:
            1fr
            1fr;
    }
}


@media (
    max-width: 1000px
) {
    .al-os3-header {
        grid-template-columns:
            1fr;
    }

    .al-os3-header-controls {
        justify-content:
            flex-start;
    }

    .al-os3-kpis {
        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }

    .al-os3-trend-layout,
    .al-os3-middle-grid,
    .al-os3-bottom-grid,
    .al-os3-distribution-layout {
        grid-template-columns:
            1fr;
    }
}


/* 20260905-mission-data-corrections-1: fit the actual Open MCT content pane. */
#al-os3-root { container-type: inline-size; }
#al-os3-root .al-os3-top-grid,
#al-os3-root .al-os3-bottom-grid { grid-template-columns: minmax(0, 1fr); }
#al-os3-root .al-os3-trend-layout { grid-template-columns: minmax(0, 1.4fr) minmax(310px, 1fr); }
#al-os3-root .al-os3-middle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#al-os3-root .al-os3-middle-grid > article:last-child { grid-column: 1 / -1; }
#al-os3-root .al-os3-distribution-layout { grid-template-columns: minmax(0, 1fr) minmax(230px, 0.4fr); }
#al-os3-root .al-os3-info-row { grid-template-columns: minmax(105px, 0.3fr) minmax(0, 1fr); }
#al-os3-root .al-os3-info-row { font-size: 10px; line-height: 1.4; }
#al-os3-root .al-os3-info-value { word-break: normal; overflow-wrap: anywhere; min-width: 0; }
#al-os3-root #al-os3-distribution-stats .al-os3-info-row { grid-template-columns: 80px minmax(110px, 1fr); }
#al-os3-root #al-os3-distribution-stats .al-os3-info-value { word-break: normal; overflow-wrap: normal; white-space: nowrap; }
#al-os3-root .al-os3-table { table-layout: auto; min-width: 440px; }
#al-os3-root .al-os3-mini-table { min-width: 310px; }
#al-os3-root .al-os3-table th, #al-os3-root .al-os3-table td,
#al-os3-root .al-os3-mini-table th, #al-os3-root .al-os3-mini-table td {
    word-break: normal; overflow-wrap: normal; white-space: normal; line-height: 1.4;
}
#al-os3-root .al-os3-table th { font-size: 9px; }
#al-os3-root .al-os3-table td, #al-os3-root .al-os3-mini-table td { font-size: 10px; }
#al-os3-root .al-os3-mini-table th { font-size: 8px; }
#al-os3-root .al-os3-mini-table .num { white-space: nowrap; }
#al-os3-root .al-os3-health-layout { grid-template-columns: 150px minmax(180px, 1fr); }
#al-os3-root .al-os3-kpi-value { line-height: 1.2; overflow-wrap: normal; font-size: 18px; }
#al-os3-root .al-os3-donut { background: #484848; }
#al-os3-root .al-os3-header { grid-template-columns: minmax(0, 1fr) auto; }
#al-os3-root .al-os3-panel-title { flex-wrap: wrap; }
#al-os3-root .al-os3-control { max-width: 100%; }
@container (max-width: 900px) {
    #al-os3-root .al-os3-trend-layout,
    #al-os3-root .al-os3-distribution-layout,
    #al-os3-root .al-os3-middle-grid,
    #al-os3-root .al-os3-header { grid-template-columns: minmax(0, 1fr); }
    #al-os3-root .al-os3-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #al-os3-root .al-os3-header-controls { justify-content: flex-start; }
}
@container (max-width: 520px) {
    #al-os3-root .al-os3-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #al-os3-root .al-os3-info-row { grid-template-columns: 105px minmax(0, 1fr); }
    #al-os3-root .al-os3-tabs { flex-wrap: wrap; }
}


/* 20260905-resources-osdr-completion-1: immediate observation plots and explanatory states. */
#al-os3-root .al-os3-stat-note { margin: 8px 0 0; color: var(--os-text3); font-size: 10px; line-height: 1.4; }
#al-os3-root .al-os3-observed-point { fill: #ddd; }
#al-os3-root .al-os3-trend-layout { grid-template-columns: minmax(0, 1fr); }
#al-os3-root .al-os3-mini-table { table-layout: auto; min-width: 480px; }
#al-os3-root #al-os3-parameter-summary { overflow-x: auto; }
#al-os3-root .al-os3-mini-table th, #al-os3-root .al-os3-mini-table td { padding: 8px; }
#al-os3-root .al-os3-mini-table th { font-size: 9px; }
#al-os3-root .al-os3-mini-table td { font-size: 11px; }
#al-os3-root .al-os3-kpi-value { font-size: 17px; }
#al-os3-root .al-os3-distribution-layout { grid-template-columns: minmax(0, 1fr) minmax(270px, .6fr); }
#al-os3-root #al-os3-distribution-stats .al-os3-info-row { grid-template-columns: 105px minmax(140px, 1fr); }
#al-os3-root #al-os3-distribution-stats .al-os3-info-value { white-space: normal; overflow-wrap: normal; }
@container (max-width: 900px) {
    #al-os3-root .al-os3-distribution-layout { grid-template-columns: minmax(0, 1fr); }
}