/* =========================================================
   ASTROLOOP DIGITAL TWIN MAP
   Advanced habitat digital-twin interface

   Version:
   20260902-digital-twin-advanced-1

   Design:
   - Neutral grey
   - No page pulse
   - No page animation
   - No decorative icons
   - No blue/cyan interface surfaces
   ========================================================= */

:root {
    --dt-bg-0: #151515;
    --dt-bg-1: #1b1b1b;
    --dt-bg-2: #212121;
    --dt-bg-3: #282828;
    --dt-bg-4: #303030;
    --dt-bg-5: #383838;

    --dt-border-1: #3d3d3d;
    --dt-border-2: #4a4a4a;
    --dt-border-3: #5b5b5b;

    --dt-text-1: #f1f1f1;
    --dt-text-2: #d2d2d2;
    --dt-text-3: #a7a7a7;
    --dt-text-4: #858585;

    --dt-line-1: #bebebe;
    --dt-line-2: #8a8a8a;
    --dt-line-3: #666666;

    --dt-nominal: #62c77b;
    --dt-attention: #c6a15b;
    --dt-critical: #cc6b6b;
    --dt-unavailable: #777777;
}


/* =========================================================
   OPEN MCT SURFACE
   ========================================================= */

body.al-dt3-active,
body.al-dt3-active #openmct-app,
body.al-dt3-active .l-shell__pane-main,
body.al-dt3-active .l-shell__main-container,
body.al-dt3-active .js-main-container,
body.al-dt3-active .c-object-view {
    background:
        var(--dt-bg-0) !important;

    background-color:
        var(--dt-bg-0) !important;

    background-image:
        none !important;
}


/*
 * No animation or page pulse is allowed inside this view.
 */
body.al-dt3-active #al-dt3-root,
body.al-dt3-active #al-dt3-root * {
    box-sizing:
        border-box;

    animation:
        none !important;

    transition:
        none !important;
}


/*
 * Disable previously installed full-view refresh overlays
 * only while Digital Twin Map is visible.
 */
body.al-dt3-active
.astroloop-refresh-freeze-overlay,

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

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

    visibility:
        hidden !important;

    opacity:
        0 !important;
}


/* =========================================================
   ROOT
   ========================================================= */

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

    min-width:
        0;

    min-height:
        100%;

    padding:
        16px;

    margin:
        0;

    color:
        var(--dt-text-1);

    background:
        var(--dt-bg-0);

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

    overflow:
        visible;
}


/* =========================================================
   HEADER
   ========================================================= */

.al-dt3-header {
    display:
        grid;

    grid-template-columns:
        minmax(330px, 1fr)
        minmax(650px, 1.35fr);

    gap:
        18px;

    align-items:
        start;

    margin-bottom:
        12px;

    padding-bottom:
        12px;

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


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

    color:
        #ffffff;

    font-size:
        27px;

    line-height:
        1.1;

    font-weight:
        600;
}


.al-dt3-subtitle {
    margin:
        0;

    color:
        var(--dt-text-3);

    font-size:
        12px;

    line-height:
        1.45;
}


.al-dt3-mission-side {
    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;
}


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

    grid-template-columns:
        1.8fr
        1fr
        1fr
        .8fr
        .6fr
        1fr;

    gap:
        7px;
}


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

    min-height:
        51px;

    padding:
        8px 9px;

    border:
        1px solid
        var(--dt-border-1);

    border-radius:
        3px;

    background:
        var(--dt-bg-2);
}


.al-dt3-label {
    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--dt-text-4);

    font-size:
        8px;

    font-weight:
        600;

    letter-spacing:
        .35px;

    text-transform:
        uppercase;
}


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

    overflow:
        hidden;

    color:
        var(--dt-text-1);

    font-size:
        10px;

    font-weight:
        500;

    line-height:
        1.25;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


.al-dt3-refresh-row {
    display:
        flex;

    justify-content:
        flex-end;
}


#al-dt3-refresh {
    height:
        31px;

    min-width:
        78px;

    padding:
        0 14px;

    border:
        1px solid
        var(--dt-border-2);

    border-radius:
        3px;

    background:
        var(--dt-bg-4);

    color:
        var(--dt-text-1);

    font-size:
        10px;

    cursor:
        pointer;

    animation:
        none !important;

    transition:
        none !important;

    box-shadow:
        none !important;
}


#al-dt3-refresh:hover {
    background:
        var(--dt-bg-5);

    border-color:
        var(--dt-border-3);
}


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

    cursor:
        default;
}


/* =========================================================
   PANEL
   ========================================================= */

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

    background:
        var(--dt-bg-2);

    border:
        1px solid
        var(--dt-border-1);

    border-radius:
        3px;

    overflow:
        hidden;

    box-shadow:
        none;
}


.al-dt3-panel-title {
    min-height:
        35px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    padding:
        8px 11px;

    background:
        var(--dt-bg-3);

    border-bottom:
        1px solid
        var(--dt-border-1);

    color:
        var(--dt-text-1);

    font-size:
        10px;

    font-weight:
        600;

    text-transform:
        uppercase;
}


.al-dt3-panel-body {
    padding:
        12px;
}


/* =========================================================
   MAIN MAP LAYOUT
   ========================================================= */

.al-dt3-main-grid {
    display:
        grid;

    grid-template-columns:
        minmax(620px, 2.4fr)
        minmax(265px, .75fr);

    gap:
        10px;

    margin-bottom:
        10px;
}


.al-dt3-map-panel {
    min-height:
        520px;
}


.al-dt3-map-controls {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        12px;

    color:
        var(--dt-text-3);

    font-size:
        9px;

    font-weight:
        400;

    text-transform:
        none;
}


.al-dt3-control-label {
    color:
        var(--dt-text-4);

    text-transform:
        uppercase;
}


.al-dt3-select {
    height:
        25px;

    padding:
        0 24px 0 8px;

    border:
        1px solid
        var(--dt-border-2);

    border-radius:
        2px;

    background:
        var(--dt-bg-2);

    color:
        var(--dt-text-2);

    font-size:
        9px;
}


.al-dt3-check {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        4px;

    cursor:
        pointer;
}


.al-dt3-check input {
    accent-color:
        #8a8a8a;
}


.al-dt3-map-stage {
    position:
        relative;

    height:
        475px;

    overflow:
        hidden;

    background:
        #171717;
}


.al-dt3-map-svg {
    display:
        block;

    width:
        100%;

    height:
        100%;
}


/* =========================================================
   SVG MAP
   ========================================================= */

.al-dt3-grid-line-svg {
    stroke:
        #292929;

    stroke-width:
        1;
}


.al-dt3-orbit-ring {
    fill:
        none;

    stroke:
        #555555;

    stroke-width:
        16;

    opacity:
        .74;
}


.al-dt3-orbit-edge {
    fill:
        none;

    stroke:
        #8a8a8a;

    stroke-width:
        1.1;

    opacity:
        .65;
}


.al-dt3-spoke {
    stroke:
        #6c6c6c;

    stroke-width:
        18;

    stroke-linecap:
        round;
}


.al-dt3-spoke-edge {
    stroke:
        #a0a0a0;

    stroke-width:
        1;

    stroke-linecap:
        round;

    opacity:
        .65;
}


.al-dt3-hub-outer {
    fill:
        #363636;

    stroke:
        #9a9a9a;

    stroke-width:
        1.5;
}


.al-dt3-hub-inner {
    fill:
        #222222;

    stroke:
        #717171;

    stroke-width:
        1;
}


.al-dt3-module {
    fill:
        #343434;

    stroke:
        #999999;

    stroke-width:
        1;
}


.al-dt3-module-detail {
    fill:
        none;

    stroke:
        #646464;

    stroke-width:
        1;
}


.al-dt3-solar-panel {
    fill:
        #242424;

    stroke:
        #8b8b8b;

    stroke-width:
        1;
}


.al-dt3-solar-cell {
    stroke:
        #5e5e5e;

    stroke-width:
        .6;
}


.al-dt3-leader {
    fill:
        none;

    stroke:
        #686868;

    stroke-width:
        1;
}


.al-dt3-map-label {
    fill:
        #efefef;

    font-size:
        9px;

    font-weight:
        600;
}


.al-dt3-map-status {
    font-size:
        8px;

    font-weight:
        500;
}


.al-dt3-map-node {
    cursor:
        pointer;
}


.al-dt3-map-node:hover
.al-dt3-module {
    stroke:
        #e0e0e0;

    stroke-width:
        1.6;
}


.al-dt3-status-dot {
    stroke:
        #171717;

    stroke-width:
        2;
}


[data-status="nominal"]
.al-dt3-status-dot {
    fill:
        var(--dt-nominal);
}


[data-status="attention"]
.al-dt3-status-dot {
    fill:
        var(--dt-attention);
}


[data-status="critical"]
.al-dt3-status-dot {
    fill:
        var(--dt-critical);
}


[data-status="unavailable"]
.al-dt3-status-dot {
    fill:
        var(--dt-unavailable);
}


[data-status="nominal"]
.al-dt3-map-status {
    fill:
        var(--dt-nominal);
}


[data-status="attention"]
.al-dt3-map-status {
    fill:
        var(--dt-attention);
}


[data-status="critical"]
.al-dt3-map-status {
    fill:
        var(--dt-critical);
}


[data-status="unavailable"]
.al-dt3-map-status {
    fill:
        var(--dt-unavailable);
}


/* =========================================================
   RIGHT COLUMN
   ========================================================= */

.al-dt3-side-stack {
    display:
        grid;

    grid-template-rows:
        auto
        auto
        1fr;

    gap:
        10px;
}


.al-dt3-status-row {
    display:
        grid;

    grid-template-columns:
        minmax(115px, 1fr)
        12px
        78px
        46px;

    gap:
        7px;

    align-items:
        center;

    min-height:
        31px;

    padding:
        0 8px;

    border-bottom:
        1px solid
        #353535;

    color:
        var(--dt-text-2);

    font-size:
        10px;
}


.al-dt3-status-row:last-child {
    border-bottom:
        0;
}


.al-dt3-state-dot {
    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        var(--dt-unavailable);
}


.al-dt3-state-dot.nominal {
    background:
        var(--dt-nominal);
}


.al-dt3-state-dot.attention {
    background:
        var(--dt-attention);
}


.al-dt3-state-dot.critical {
    background:
        var(--dt-critical);
}


.al-dt3-state-text {
    color:
        var(--dt-text-2);

    font-size:
        9px;
}


.al-dt3-status-value {
    text-align:
        right;

    color:
        #ffffff;

    font-size:
        10px;

    font-weight:
        500;
}


/* =========================================================
   ENVIRONMENT
   ========================================================= */

.al-dt3-env-row {
    display:
        grid;

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

    gap:
        10px;

    align-items:
        center;

    min-height:
        29px;

    padding:
        0 8px;

    border-bottom:
        1px solid
        #343434;
}


.al-dt3-env-row:last-child {
    border-bottom:
        0;
}


.al-dt3-env-name {
    color:
        var(--dt-text-3);

    font-size:
        9px;
}


.al-dt3-env-value {
    color:
        var(--dt-text-1);

    font-size:
        10px;

    font-weight:
        500;

    text-align:
        right;

    font-variant-numeric:
        tabular-nums;
}


/* =========================================================
   SELECTED ASSET
   ========================================================= */

.al-dt3-selected-name {
    margin-bottom:
        7px;

    color:
        #ffffff;

    font-size:
        15px;

    font-weight:
        600;
}


.al-dt3-selected-status {
    margin-bottom:
        9px;

    font-size:
        10px;

    font-weight:
        600;

    text-transform:
        uppercase;
}


.al-dt3-selected-status.nominal {
    color:
        var(--dt-nominal);
}


.al-dt3-selected-status.attention {
    color:
        var(--dt-attention);
}


.al-dt3-selected-status.critical {
    color:
        var(--dt-critical);
}


.al-dt3-selected-status.unavailable {
    color:
        var(--dt-unavailable);
}


.al-dt3-selected-line {
    display:
        grid;

    grid-template-columns:
        92px
        1fr;

    gap:
        8px;

    min-height:
        26px;

    padding:
        4px 0;

    border-bottom:
        1px solid
        #343434;

    font-size:
        9px;
}


.al-dt3-selected-key {
    color:
        var(--dt-text-4);

    text-transform:
        uppercase;
}


.al-dt3-selected-value {
    color:
        var(--dt-text-2);

    word-break:
        break-word;
}


/* =========================================================
   LOWER GRID
   ========================================================= */

.al-dt3-lower-grid {
    display:
        grid;

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

    gap:
        10px;

    margin-bottom:
        8px;
}


/* =========================================================
   TABLES
   ========================================================= */

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

    overflow-x:
        auto;

    background:
        var(--dt-bg-2);

    scrollbar-color:
        #666666
        #222222;
}


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

    border-collapse:
        collapse;

    table-layout:
        fixed;

    color:
        var(--dt-text-2);

    background:
        var(--dt-bg-2);

    font-size:
        9px;
}


.al-dt3-table th {
    min-height:
        30px;

    padding:
        8px;

    border:
        1px solid
        var(--dt-border-2);

    background:
        var(--dt-bg-4);

    color:
        var(--dt-text-3);

    font-size:
        8px;

    font-weight:
        500;

    text-align:
        left;

    text-transform:
        uppercase;
}


.al-dt3-table td {
    min-height:
        31px;

    padding:
        8px;

    border:
        1px solid
        var(--dt-border-2);

    background:
        var(--dt-bg-2);

    color:
        var(--dt-text-2);

    font-size:
        9px;

    vertical-align:
        top;

    font-variant-numeric:
        tabular-nums;
}


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


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


.al-dt3-table-empty {
    color:
        var(--dt-text-4) !important;

    font-style:
        italic;
}


/* =========================================================
   EXTERIOR REFERENCE
   ========================================================= */

.al-dt3-exterior {
    min-height:
        220px;

    display:
        flex;

    flex-direction:
        column;
}


.al-dt3-exterior-view {
    flex:
        1;

    min-height:
        167px;

    background:
        #111111;

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


.al-dt3-exterior-svg {
    display:
        block;

    width:
        100%;

    height:
        100%;
}


.al-dt3-exterior-footer {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        10px;

    padding:
        8px 10px;

    color:
        var(--dt-text-4);

    font-size:
        8px;

    text-transform:
        uppercase;
}


.al-dt3-reference-state {
    color:
        var(--dt-unavailable);
}


/* =========================================================
   FOOTER
   ========================================================= */

.al-dt3-footer {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        5px 3px;

    color:
        var(--dt-text-4);

    font-size:
        8px;
}


/* =========================================================
   LAYER TOGGLES
   ========================================================= */

#al-dt3-root[data-show-labels="false"]
.al-dt3-label-layer {
    display:
        none;
}


#al-dt3-root[data-show-environment="false"]
.al-dt3-environment-layer {
    display:
        none;
}


#al-dt3-root[data-show-systems="false"]
.al-dt3-system-layer {
    opacity:
        .20;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

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

    .al-dt3-main-grid {
        grid-template-columns:
            1fr;
    }

    .al-dt3-side-stack {
        grid-template-columns:
            repeat(
                3,
                1fr
            );

        grid-template-rows:
            auto;
    }

    .al-dt3-lower-grid {
        grid-template-columns:
            1fr;
    }
}


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

    .al-dt3-side-stack {
        grid-template-columns:
            1fr;
    }
}