/* =========================================================
   ASTROLOOP RESOURCES ADVANCED
   20260903-resources-advanced-grey-1
   ========================================================= */

:root {
    --res-bg0: #17191a;
    --res-bg1: #1d2021;
    --res-bg2: #232627;
    --res-bg3: #292d2f;
    --res-bg4: #323638;
    --res-bg5: #3b4042;

    --res-border1: #424749;
    --res-border2: #505659;
    --res-border3: #656c70;

    --res-text1: #f1f2f2;
    --res-text2: #d5d8da;
    --res-text3: #a8afb2;
    --res-text4: #81898d;

    --res-line1: #d2d5d6;
    --res-line2: #b0b5b7;
    --res-line3: #909699;
    --res-line4: #73797c;
    --res-line5: #5e6467;
    --res-line6: #4c5154;
}


/* ---------------------------------------------------------
   Open MCT surfaces
   --------------------------------------------------------- */

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

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

    background-image:
        none !important;
}


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

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

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

    background-color:
        #555b5e !important;

    background-image:
        none !important;

    border-color:
        #676e72 !important;

    box-shadow:
        none !important;
}


/* No page pulse or fade. */
body.al-res4-active
#al-res4-root,

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

    animation:
        none !important;

    transition:
        none !important;
}


/* Suppress old global refresh overlays on this page. */
body.al-res4-active
.astroloop-refresh-freeze-overlay,

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

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

    visibility:
        hidden !important;

    opacity:
        0 !important;
}


/* ---------------------------------------------------------
   Root
   --------------------------------------------------------- */

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

    min-width:
        0;

    min-height:
        100%;

    margin:
        0;

    padding:
        14px;

    background:
        var(--res-bg0);

    color:
        var(--res-text1);

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


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

.al-res4-header {
    display:
        grid;

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

    gap:
        18px;

    align-items:
        start;

    padding-bottom:
        10px;

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


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

    color:
        #ffffff;

    font-size:
        27px;

    line-height:
        1.1;

    font-weight:
        600;
}


.al-res4-subtitle {
    margin:
        0;

    color:
        var(--res-text3);

    font-size:
        11px;

    line-height:
        1.4;
}


#al-res4-refresh {
    height:
        30px;

    min-width:
        76px;

    padding:
        0 13px;

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

    border-radius:
        2px;

    background:
        var(--res-bg4);

    background-color:
        var(--res-bg4);

    color:
        var(--res-text1);

    font-size:
        10px;

    cursor:
        pointer;

    box-shadow:
        none !important;

    animation:
        none !important;

    transition:
        none !important;
}


#al-res4-refresh:hover {
    background:
        var(--res-bg5);

    border-color:
        var(--res-border3);
}


#al-res4-refresh:disabled {
    opacity:
        .6;

    cursor:
        default;
}


/* ---------------------------------------------------------
   Mission strip
   --------------------------------------------------------- */

.al-res4-mission-strip {
    display:
        grid;

    grid-template-columns:
        minmax(260px, 2fr)
        1fr
        1fr
        1fr
        .7fr
        1.1fr;

    margin-top:
        9px;

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

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


.al-res4-meta {
    min-width:
        0;

    min-height:
        50px;

    padding:
        8px 9px;

    border-right:
        1px solid
        var(--res-border1);
}


.al-res4-meta:last-child {
    border-right:
        0;
}


.al-res4-meta-name {
    color:
        var(--res-text4);

    font-size:
        8px;

    font-weight:
        600;

    letter-spacing:
        .3px;

    text-transform:
        uppercase;
}


.al-res4-meta-value {
    display:
        block;

    overflow:
        hidden;

    margin-top:
        5px;

    color:
        var(--res-text1);

    font-size:
        10px;

    font-weight:
        500;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


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

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

    overflow:
        hidden;

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

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


.al-res4-panel-title {
    min-height:
        31px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        8px;

    padding:
        7px 9px;

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

    background:
        var(--res-bg3);

    color:
        var(--res-text1);

    font-size:
        9px;

    font-weight:
        600;

    text-transform:
        uppercase;
}


.al-res4-panel-note {
    color:
        var(--res-text4);

    font-size:
        8px;

    font-weight:
        400;

    text-transform:
        none;
}


/* ---------------------------------------------------------
   Executive summary
   --------------------------------------------------------- */

.al-res4-summary {
    margin-top:
        8px;
}


.al-res4-summary-message {
    padding:
        8px 10px;

    color:
        var(--res-text3);

    font-size:
        9px;

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


.al-res4-summary-grid {
    display:
        grid;

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

    gap:
        6px;

    padding:
        8px;
}


.al-res4-card {
    min-height:
        81px;

    padding:
        9px;

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

    background:
        var(--res-bg3);
}


.al-res4-card-name {
    color:
        var(--res-text4);

    font-size:
        8px;

    font-weight:
        600;

    text-transform:
        uppercase;
}


.al-res4-card-main {
    display:
        grid;

    grid-template-columns:
        1fr
        auto;

    gap:
        8px;

    align-items:
        end;

    margin-top:
        7px;
}


.al-res4-card-value {
    color:
        #ffffff;

    font-size:
        21px;

    font-weight:
        500;

    line-height:
        1;
}


.al-res4-card-state {
    color:
        var(--res-text2);

    font-size:
        8px;

    text-transform:
        uppercase;
}


.al-res4-card-foot {
    margin-top:
        8px;

    color:
        var(--res-text4);

    font-size:
        7px;
}


/* ---------------------------------------------------------
   Upper 3 columns
   --------------------------------------------------------- */

.al-res4-upper-grid {
    display:
        grid;

    grid-template-columns:
        1fr
        .96fr
        1.18fr;

    gap:
        7px;

    margin-top:
        7px;
}


/* ---------------------------------------------------------
   Tables
   --------------------------------------------------------- */

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

    overflow-x:
        auto;

    scrollbar-color:
        #686e71
        #242728;
}


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

    border-collapse:
        collapse;

    table-layout:
        fixed;

    color:
        var(--res-text2);

    font-size:
        8px;
}


.al-res4-table th {
    padding:
        6px;

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

    background:
        var(--res-bg4);

    color:
        var(--res-text3);

    font-size:
        7px;

    font-weight:
        500;

    text-align:
        left;

    text-transform:
        uppercase;
}


.al-res4-table td {
    padding:
        6px;

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

    background:
        var(--res-bg2);

    color:
        var(--res-text2);

    vertical-align:
        top;

    font-variant-numeric:
        tabular-nums;
}


.al-res4-table
tbody tr:nth-child(even) td {
    background:
        #272a2b;
}


.al-res4-table
tbody tr:hover td {
    background:
        #303436;
}


.al-res4-num {
    text-align:
        right;
}


.al-res4-state {
    color:
        var(--res-text1);
}


.al-res4-empty {
    color:
        var(--res-text4) !important;

    font-style:
        italic;
}


/* ---------------------------------------------------------
   Depletion
   --------------------------------------------------------- */

.al-res4-depletion {
    padding:
        9px;
}


.al-res4-depletion-row {
    display:
        grid;

    grid-template-columns:
        120px
        1fr
        50px;

    gap:
        8px;

    align-items:
        center;

    min-height:
        34px;

    color:
        var(--res-text2);

    font-size:
        8px;
}


.al-res4-depletion-track {
    height:
        7px;

    border:
        1px solid
        #505659;

    background:
        #1b1e1f;
}


.al-res4-depletion-fill {
    height:
        100%;

    background:
        #9ba0a2;
}


.al-res4-depletion-value {
    text-align:
        right;

    color:
        #ffffff;

    font-variant-numeric:
        tabular-nums;
}


/* ---------------------------------------------------------
   Middle row
   --------------------------------------------------------- */

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

    grid-template-columns:
        1fr
        1.7fr;

    gap:
        7px;

    margin-top:
        7px;
}


/* ---------------------------------------------------------
   Trends
   --------------------------------------------------------- */

.al-res4-trend-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:
        8px;

    padding:
        8px;
}


.al-res4-trend-card {
    min-width:
        0;

    padding:
        5px;

    border:
        1px solid
        #373b3d;

    background:
        #202324;
}


.al-res4-trend-name {
    margin-bottom:
        4px;

    color:
        var(--res-text3);

    font-size:
        7px;
}


.al-res4-spark {
    width:
        100%;

    height:
        65px;

    display:
        block;
}


.al-res4-gridline {
    stroke:
        #383d3f;

    stroke-width:
        1;
}


.al-res4-spark-line {
    fill:
        none;

    stroke:
        var(--res-line1);

    stroke-width:
        1.5;
}


.al-res4-spark-point {
    fill:
        var(--res-line1);
}


.al-res4-spark-message {
    fill:
        #777d80;

    font-size:
        7px;

    text-anchor:
        middle;
}


/* ---------------------------------------------------------
   Alerts
   --------------------------------------------------------- */

.al-res4-alert-panel {
    margin-top:
        7px;
}


.al-res4-alert-message {
    min-height:
        48px;

    display:
        flex;

    align-items:
        center;

    padding:
        10px;

    color:
        var(--res-text3);

    font-size:
        8px;
}


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

.al-res4-footer {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        7px 3px 1px;

    color:
        var(--res-text4);

    font-size:
        7px;
}


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

@media (
    max-width: 1300px
) {
    .al-res4-summary-grid {
        grid-template-columns:
            repeat(
                3,
                1fr
            );
    }

    .al-res4-upper-grid,
    .al-res4-middle-grid {
        grid-template-columns:
            1fr;
    }
}


@media (
    max-width: 900px
) {
    .al-res4-mission-strip {
        grid-template-columns:
            repeat(
                3,
                1fr
            );
    }

    .al-res4-summary-grid,
    .al-res4-trend-grid {
        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }
}


/* =========================================================
   ASTROLOOP_RESOURCES_BLUE_TO_GREY_START
   Remove blue/cyan interface surfaces.
   Resource SVG/canvas graphs are intentionally excluded.
   ========================================================= */


/* ---------------------------------------------------------
   Main Open MCT Resources surface
   --------------------------------------------------------- */

body.al-res4-active,
body.al-res4-active #openmct-app,

body.al-res4-active
.l-shell,

body.al-res4-active
.l-shell__main,

body.al-res4-active
.l-shell__pane-main,

body.al-res4-active
.l-shell__main-container,

body.al-res4-active
.js-main-container,

body.al-res4-active
.c-object-view,

body.al-res4-active
.l-view {
    background:
        #1d2021 !important;

    background-color:
        #1d2021 !important;

    background-image:
        none !important;

    border-color:
        #4b5052 !important;

    outline-color:
        #62686b !important;

    box-shadow:
        none !important;
}


/* ---------------------------------------------------------
   Left Browse panel
   --------------------------------------------------------- */

body.al-res4-active
.l-shell__pane-tree,

body.al-res4-active
.c-tree-and-search,

body.al-res4-active
.c-tree,

body.al-res4-active
.c-tree__scrollable {
    background:
        #222627 !important;

    background-color:
        #222627 !important;

    background-image:
        none !important;

    border-color:
        #4b5052 !important;

    box-shadow:
        none !important;
}


/* ---------------------------------------------------------
   Selected Resources navigation item
   --------------------------------------------------------- */

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

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

body.al-res4-active
.l-shell__pane-tree
.c-tree__item.is-selected,

body.al-res4-active
.l-shell__pane-tree
[class*="is-selected"],

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

    background-color:
        #555b5e !important;

    background-image:
        none !important;

    border-color:
        #666d70 !important;

    outline-color:
        #777e81 !important;

    box-shadow:
        none !important;
}


/* ---------------------------------------------------------
   Remove blue/cyan pane divider
   --------------------------------------------------------- */

body.al-res4-active
.l-shell__pane-main,

body.al-res4-active
.l-shell__pane-tree,

body.al-res4-active
.l-shell__pane-inspector,

body.al-res4-active
.l-shell__main-container,

body.al-res4-active
[class*="pane-resizable"],

body.al-res4-active
[class*="pane-resize"] {
    border-left-color:
        #4b5052 !important;

    border-right-color:
        #4b5052 !important;

    border-top-color:
        #4b5052 !important;

    border-bottom-color:
        #4b5052 !important;

    outline-color:
        #62686b !important;

    box-shadow:
        none !important;
}


/* ---------------------------------------------------------
   Resources root
   --------------------------------------------------------- */

body.al-res4-active
#al-res4-root {
    background:
        #1d2021 !important;

    background-color:
        #1d2021 !important;

    background-image:
        none !important;

    border-color:
        #4b5052 !important;

    box-shadow:
        none !important;
}


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

body.al-res4-active
.al-res4-header {
    background:
        #1d2021 !important;

    background-color:
        #1d2021 !important;

    background-image:
        none !important;

    border-bottom:
        1px solid #4b5052 !important;

    box-shadow:
        none !important;
}


/* ---------------------------------------------------------
   Mission strip
   --------------------------------------------------------- */

body.al-res4-active
.al-res4-mission-strip {
    background:
        #25292a !important;

    background-color:
        #25292a !important;

    background-image:
        none !important;

    border:
        1px solid #4b5052 !important;

    box-shadow:
        none !important;
}


body.al-res4-active
.al-res4-meta {
    background:
        #25292a !important;

    background-color:
        #25292a !important;

    background-image:
        none !important;

    border-color:
        #4b5052 !important;

    box-shadow:
        none !important;
}


/* ---------------------------------------------------------
   Panels
   --------------------------------------------------------- */

body.al-res4-active
.al-res4-panel {
    background:
        #25292a !important;

    background-color:
        #25292a !important;

    background-image:
        none !important;

    border:
        1px solid #4b5052 !important;

    outline:
        none !important;

    box-shadow:
        none !important;
}


body.al-res4-active
.al-res4-panel-title {
    background:
        #303537 !important;

    background-color:
        #303537 !important;

    background-image:
        none !important;

    border-bottom:
        1px solid #505659 !important;

    color:
        #eef0f1 !important;

    box-shadow:
        none !important;
}


/* ---------------------------------------------------------
   Executive summary
   --------------------------------------------------------- */

body.al-res4-active
.al-res4-summary-message {
    background:
        #25292a !important;

    background-color:
        #25292a !important;

    background-image:
        none !important;

    border-bottom-color:
        #4b5052 !important;
}


body.al-res4-active
.al-res4-card {
    background:
        #2b2f31 !important;

    background-color:
        #2b2f31 !important;

    background-image:
        none !important;

    border:
        1px solid #4b5052 !important;

    box-shadow:
        none !important;
}


/* ---------------------------------------------------------
   Tables
   --------------------------------------------------------- */

body.al-res4-active
.al-res4-table-wrap {
    background:
        #25292a !important;

    background-color:
        #25292a !important;

    background-image:
        none !important;

    border-color:
        #4b5052 !important;
}


body.al-res4-active
.al-res4-table {
    background:
        #25292a !important;

    background-color:
        #25292a !important;

    background-image:
        none !important;

    border-color:
        #4b5052 !important;
}


body.al-res4-active
.al-res4-table thead,

body.al-res4-active
.al-res4-table thead tr,

body.al-res4-active
.al-res4-table th {
    background:
        #373c3e !important;

    background-color:
        #373c3e !important;

    background-image:
        none !important;

    border:
        1px solid #555b5e !important;

    color:
        #d7dbdc !important;

    outline:
        none !important;

    box-shadow:
        none !important;
}


body.al-res4-active
.al-res4-table tbody,

body.al-res4-active
.al-res4-table tbody tr {
    background:
        #25292a !important;

    background-color:
        #25292a !important;

    background-image:
        none !important;
}


body.al-res4-active
.al-res4-table td {
    background:
        #25292a !important;

    background-color:
        #25292a !important;

    background-image:
        none !important;

    border:
        1px solid #4b5052 !important;

    outline:
        none !important;

    box-shadow:
        none !important;
}


body.al-res4-active
.al-res4-table
tbody tr:nth-child(even) td {
    background:
        #2a2e30 !important;

    background-color:
        #2a2e30 !important;
}


body.al-res4-active
.al-res4-table
tbody tr:hover td {
    background:
        #323739 !important;

    background-color:
        #323739 !important;
}


/* ---------------------------------------------------------
   Depletion bars
   --------------------------------------------------------- */

body.al-res4-active
.al-res4-depletion-track {
    background:
        #202324 !important;

    background-color:
        #202324 !important;

    background-image:
        none !important;

    border:
        1px solid #555b5e !important;
}


body.al-res4-active
.al-res4-depletion-fill {
    background:
        #9a9fa1 !important;

    background-color:
        #9a9fa1 !important;

    background-image:
        none !important;
}


/* ---------------------------------------------------------
   Trend card containers
   Important: do NOT style SVG/polyline colors here.
   --------------------------------------------------------- */

body.al-res4-active
.al-res4-trend-card {
    background:
        #222627 !important;

    background-color:
        #222627 !important;

    background-image:
        none !important;

    border:
        1px solid #454a4c !important;

    box-shadow:
        none !important;
}


/* ---------------------------------------------------------
   Alerts
   --------------------------------------------------------- */

body.al-res4-active
.al-res4-alert-message {
    background:
        #25292a !important;

    background-color:
        #25292a !important;

    background-image:
        none !important;

    border-color:
        #4b5052 !important;
}


/* ---------------------------------------------------------
   Refresh button
   --------------------------------------------------------- */

body.al-res4-active
#al-res4-refresh {
    background:
        #363b3d !important;

    background-color:
        #363b3d !important;

    background-image:
        none !important;

    border:
        1px solid #62686b !important;

    color:
        #f2f3f3 !important;

    outline:
        none !important;

    box-shadow:
        none !important;
}


body.al-res4-active
#al-res4-refresh:hover {
    background:
        #454a4c !important;

    background-color:
        #454a4c !important;

    border-color:
        #747b7e !important;
}


/* ---------------------------------------------------------
   Open MCT toolbar/title bars
   --------------------------------------------------------- */

body.al-res4-active
.c-toolbar,

body.al-res4-active
.l-browse-bar,

body.al-res4-active
.c-browse-bar,

body.al-res4-active
[class*="toolbar"] {
    background:
        #292d2f !important;

    background-color:
        #292d2f !important;

    background-image:
        none !important;

    border-color:
        #4b5052 !important;

    box-shadow:
        none !important;
}


/* ---------------------------------------------------------
   Inspector
   --------------------------------------------------------- */

body.al-res4-active
.l-shell__pane-inspector,

body.al-res4-active
.c-inspector,

body.al-res4-active
.c-inspector__header,

body.al-res4-active
.c-inspector__content,

body.al-res4-active
.c-inspector__tabs {
    background:
        #222627 !important;

    background-color:
        #222627 !important;

    background-image:
        none !important;

    border-color:
        #4b5052 !important;

    outline-color:
        #62686b !important;

    box-shadow:
        none !important;
}


/* ---------------------------------------------------------
   Inputs / focus states
   --------------------------------------------------------- */

body.al-res4-active
#al-res4-root
button:focus,

body.al-res4-active
#al-res4-root
button:focus-visible,

body.al-res4-active
#al-res4-root
input:focus,

body.al-res4-active
#al-res4-root
select:focus {
    outline:
        1px solid #777e81 !important;

    border-color:
        #777e81 !important;

    box-shadow:
        none !important;
}


/* ---------------------------------------------------------
   Scrollbars
   --------------------------------------------------------- */

body.al-res4-active
#al-res4-root,

body.al-res4-active
#al-res4-root * {
    scrollbar-color:
        #666c6f
        #25292a;
}


/*
 * SVG and canvas are intentionally NOT recolored here.
 * Resource trend colors remain as currently configured.
 */


/* ASTROLOOP_RESOURCES_BLUE_TO_GREY_END */

/* RESOURCE_DATA_COMPLETION_LAYOUT: respond to available panel space,
   including Open MCT's Browse and Inspect panes, not just viewport width. */
#al-res4-root .al-res4-upper-grid,
#al-res4-root .al-res4-middle-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    align-items: start;
}

#al-res4-root .al-res4-panel,
#al-res4-root .al-res4-table-wrap {
    min-width: 0;
    max-width: 100%;
}

#al-res4-root .al-res4-table {
    table-layout: fixed;
    min-width: 380px;
}

#al-res4-root .al-res4-table th,
#al-res4-root .al-res4-table td {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.4;
    padding: 7px;
    font-size: 11px;
    vertical-align: top;
}

#al-res4-root .al-res4-table th {
    font-size: 9px;
}

#al-res4-root .al-res4-upper-grid .al-res4-panel:first-child th:first-child {
    width: 28%;
}

#al-res4-root .al-res4-upper-grid .al-res4-panel:first-child th:nth-child(2),
#al-res4-root .al-res4-upper-grid .al-res4-panel:first-child th:nth-child(3) {
    width: 19%;
}

#al-res4-root .al-res4-upper-grid .al-res4-panel:first-child th:nth-child(4) {
    width: 18%;
}

#al-res4-root .al-res4-upper-grid .al-res4-panel:first-child th:last-child {
    width: 16%;
}

#al-res4-root .al-res4-upper-grid .al-res4-panel:nth-child(2) th:first-child {
    width: 45%;
}

#al-res4-root .al-res4-source-tag {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    line-height: 1.35;
    color: var(--res-text4);
}

#al-res4-root .al-res4-depletion-row {
    grid-template-columns: minmax(90px, 1fr) minmax(70px, 1fr) minmax(80px, auto);
}

#al-res4-root .al-res4-depletion-value {
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 150px;
}