/*
===============================================================================
ASTROLOOP SHARED VISUAL SPECIFICATION
Version: 20260822-style-1

STYLE ONLY.

This file does NOT change:
- API calls
- calculations
- mission values
- telemetry
- graph data
- buttons/functions
- tab content
- Open MCT navigation
===============================================================================
*/


/* ================================================================
   1. SHARED DESIGN TOKENS
   ================================================================ */

.astroloop-ui {

    --al-canvas: #07131A;

    --al-surface: #0B1E28;

    --al-surface-raised: #102A36;

    --al-surface-selected: #123543;


    --al-border: #264654;

    --al-border-strong: #356276;


    --al-text: #F1F5F7;

    --al-text-muted: #9CB0BB;

    --al-text-dim: #718894;


    --al-accent: #3DB7E9;


    --al-nominal: #45C781;

    --al-caution: #E5AC35;

    --al-critical: #E85B61;


    --al-radius-control: 3px;

    --al-radius-panel: 4px;


    color: var(--al-text);

    background-color: var(--al-canvas);


    font-family:
        "Roboto",
        "Helvetica Neue",
        Arial,
        sans-serif !important;


    font-variant-numeric: tabular-nums;


    /*
     * ============================================================
     * Existing Dashboard variable aliases
     * ============================================================
     */

    --ald-bg: var(--al-canvas);

    --ald-bg-deep: var(--al-canvas);

    --ald-panel: var(--al-surface);

    --ald-panel-secondary:
        var(--al-surface-raised);

    --ald-panel-alt:
        var(--al-surface-raised);

    --ald-input: #071922;


    --ald-border:
        var(--al-border);

    --ald-border-soft:
        rgba(
            53,
            98,
            118,
            0.55
        );


    --ald-text:
        var(--al-text);

    --ald-muted:
        var(--al-text-muted);


    --ald-blue:
        var(--al-accent);

    --ald-cyan:
        var(--al-accent);

    --ald-blue-bright:
        var(--al-accent);

    --ald-blue-dark:
        #1C6D8E;


    --ald-red:
        var(--al-critical);


    /*
     * ============================================================
     * Crew Health aliases
     * ============================================================
     */

    --ch-bg:
        var(--al-canvas);

    --ch-panel:
        var(--al-surface);

    --ch-panel-2:
        var(--al-surface-raised);


    --ch-border:
        var(--al-border);

    --ch-soft-border:
        rgba(
            53,
            98,
            118,
            0.55
        );


    --ch-blue:
        var(--al-accent);

    --ch-cyan:
        var(--al-accent);


    --ch-text:
        var(--al-text);

    --ch-muted:
        var(--al-text-muted);


    --ch-green:
        var(--al-nominal);

    --ch-yellow:
        var(--al-caution);

    --ch-red:
        var(--al-critical);


    /*
     * ============================================================
     * Generic aliases usable by other AstroLoop tabs
     * ============================================================
     */

    --astroloop-bg:
        var(--al-canvas);

    --astroloop-surface:
        var(--al-surface);

    --astroloop-panel:
        var(--al-surface);

    --astroloop-raised:
        var(--al-surface-raised);

    --astroloop-border:
        var(--al-border);

    --astroloop-text:
        var(--al-text);

    --astroloop-muted:
        var(--al-text-muted);

    --astroloop-blue:
        var(--al-accent);

    --astroloop-accent:
        var(--al-accent);

    --astroloop-green:
        var(--al-nominal);

    --astroloop-yellow:
        var(--al-caution);

    --astroloop-red:
        var(--al-critical);

}


/* ================================================================
   2. BOX SIZING
   ================================================================ */

.astroloop-ui,
.astroloop-ui *,
.astroloop-ui *::before,
.astroloop-ui *::after {

    box-sizing: border-box;

}


/* ================================================================
   3. ROBOTO TYPOGRAPHY
   ================================================================ */

.astroloop-ui,

.astroloop-ui button,

.astroloop-ui input,

.astroloop-ui select,

.astroloop-ui textarea,

.astroloop-ui table,

.astroloop-ui output,

.astroloop-ui label {

    font-family:
        "Roboto",
        "Helvetica Neue",
        Arial,
        sans-serif !important;

}


/* ================================================================
   4. HEADINGS
   ================================================================ */

.astroloop-ui h1,

.astroloop-ui h2,

.astroloop-ui h3,

.astroloop-ui h4,

.astroloop-ui h5,

.astroloop-ui h6 {

    color:
        var(--al-text);


    font-family:
        "Roboto",
        "Helvetica Neue",
        Arial,
        sans-serif !important;


    text-shadow:
        none !important;

}


/* ================================================================
   5. SECONDARY TEXT
   ================================================================ */

.astroloop-ui p,

.astroloop-ui small,

.astroloop-ui .subtitle,

.astroloop-ui [class*="subtitle"],

.astroloop-ui [class*="description"],

.astroloop-ui [class*="muted"] {

    color:
        var(--al-text-muted);

}


/* ================================================================
   6. TECHNICAL VALUES
   ================================================================ */

.astroloop-ui code,

.astroloop-ui pre,

.astroloop-ui [class*="identifier"],

.astroloop-ui [class*="run-id"],

.astroloop-ui [class*="mission-id"],

.astroloop-ui [class*="timestamp"] {

    font-family:
        "Roboto Mono",
        Consolas,
        "Courier New",
        monospace;


    font-variant-numeric:
        tabular-nums;

}


/* ================================================================
   7. EXISTING ASTROLOOP ROOTS
   ================================================================ */

.astroloop-ui#ald-root,

.astroloop-ui#al-resources-root,

.astroloop-ui.astroloop-crew-health,

.astroloop-ui[id^="al-"][id$="-root"],

.astroloop-ui[id^="astroloop-"][id$="-root"] {

    color:
        var(--al-text);


    background-color:
        var(--al-canvas);


    background-image:
        none !important;

}


/* ================================================================
   8. PANELS / CARDS / WIDGETS
   ================================================================ */

.astroloop-ui :where(

    [class$="-panel"],

    [class*="-panel "],

    [class$="-card"],

    [class*="-card "],

    [class$="-widget"],

    [class*="-widget "],

    [class$="-box"],

    [class*="-box "],

    [class$="-tile"],

    [class*="-tile "]

) {

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


    border-radius:
        var(--al-radius-panel) !important;


    box-shadow:
        none !important;


    filter:
        none;

}


/* ================================================================
   9. KNOWN ASTROLOOP PANEL SURFACES
   ================================================================ */

.astroloop-ui :where(

    .ald-panel,

    .ald-chart-card,

    .crew-health-card,

    .crew-health-runtime-cell,

    .crew-health-widget,

    .ald-info-box,

    .ald-runtime-item

) {

    background-color:
        var(--al-surface) !important;

}


/* ================================================================
   10. PANEL HEADERS
   ================================================================ */

.astroloop-ui :where(

    .ald-chart-header,

    .crew-health-card__head,

    [class*="panel-header"],

    [class*="card__head"],

    [class*="card-header"]

) {

    background-color:
        var(--al-surface-raised) !important;


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


    box-shadow:
        none !important;

}


/* ================================================================
   11. BUTTONS
   ================================================================ */

.astroloop-ui button,

.astroloop-ui input[type="button"],

.astroloop-ui input[type="submit"] {

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


    border-radius:
        var(--al-radius-control) !important;


    box-shadow:
        none !important;


    background-image:
        none !important;


    font-weight:
        600;

}


.astroloop-ui button:hover:not(:disabled),

.astroloop-ui input[type="button"]:hover:not(:disabled),

.astroloop-ui input[type="submit"]:hover:not(:disabled) {

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

}


/* ================================================================
   12. PRIMARY BUTTONS
   ================================================================ */

.astroloop-ui :where(

    .ald-button-primary,

    .crew-health-button,

    [class*="button-primary"],

    [class*="primary-button"]

) {

    color:
        #FFFFFF !important;


    background-color:
        #143B4A !important;


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

}


/* ================================================================
   13. DANGER BUTTONS
   ================================================================ */

.astroloop-ui :where(

    .ald-button-danger,

    [class*="button-danger"],

    [class*="danger-button"]

) {

    color:
        var(--al-critical) !important;


    background-color:
        transparent !important;


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

}


/* ================================================================
   14. DISABLED CONTROLS
   ================================================================ */

.astroloop-ui button:disabled,

.astroloop-ui input:disabled,

.astroloop-ui select:disabled {

    opacity:
        0.45;

}


/* ================================================================
   15. FORM INPUTS
   ================================================================ */

.astroloop-ui input:not([type="checkbox"]):not([type="radio"]),

.astroloop-ui select,

.astroloop-ui textarea {

    color:
        var(--al-text) !important;


    background-color:
        #071922 !important;


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


    border-radius:
        var(--al-radius-control) !important;


    box-shadow:
        none !important;


    background-image:
        none !important;

}


/* ================================================================
   16. READ-ONLY INPUTS
   ================================================================ */

.astroloop-ui input[readonly],

.astroloop-ui textarea[readonly] {

    background-color:
        var(--al-surface) !important;

}


/* ================================================================
   17. FOCUS
   ================================================================ */

.astroloop-ui input:focus,

.astroloop-ui select:focus,

.astroloop-ui textarea:focus {

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


    outline:
        none;

}


.astroloop-ui input:focus-visible,

.astroloop-ui select:focus-visible,

.astroloop-ui textarea:focus-visible,

.astroloop-ui button:focus-visible,

.astroloop-ui [tabindex]:focus-visible {

    outline:
        2px solid
        var(--al-accent) !important;


    outline-offset:
        2px;

}


/* ================================================================
   18. TABLES
   ================================================================ */

.astroloop-ui table {

    color:
        var(--al-text);


    background-color:
        var(--al-surface);


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


    border-radius:
        0 !important;


    box-shadow:
        none !important;

}


/* ================================================================
   19. TABLE HEADERS
   ================================================================ */

.astroloop-ui th {

    color:
        var(--al-text-muted) !important;


    background-color:
        var(--al-surface-raised) !important;


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


    font-size:
        10px;


    font-weight:
        700;


    text-transform:
        uppercase;

}


/* ================================================================
   20. TABLE CELLS
   ================================================================ */

.astroloop-ui td {

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

}


.astroloop-ui tbody tr:hover {

    background-color:
        rgba(
            61,
            183,
            233,
            0.05
        );

}


/* ================================================================
   21. NOMINAL STATE
   ================================================================ */

.astroloop-ui :where(

    .nominal,

    .is-nominal,

    .status-nominal,

    .state-nominal,

    [class*="status"][class*="nominal"]

) {

    color:
        var(--al-nominal) !important;

}


/* ================================================================
   22. WARNING / CAUTION STATE
   ================================================================ */

.astroloop-ui :where(

    .warning,

    .caution,

    .is-warning,

    .is-caution,

    .status-warning,

    .status-caution,

    .state-warning,

    .state-caution,

    [class*="status"][class*="warning"],

    [class*="status"][class*="caution"]

) {

    color:
        var(--al-caution) !important;

}


/* ================================================================
   23. CRITICAL / ERROR STATE
   ================================================================ */

.astroloop-ui :where(

    .critical,

    .error,

    .is-critical,

    .is-error,

    .status-critical,

    .status-error,

    .state-critical,

    .state-error,

    [class*="status"][class*="critical"],

    [class*="status"][class*="error"]

) {

    color:
        var(--al-critical) !important;

}


/* ================================================================
   24. CREW HEALTH STATUS
   ================================================================ */

.astroloop-ui .crew-health-status {

    color:
        var(--al-nominal) !important;


    background-color:
        rgba(
            69,
            199,
            129,
            0.08
        ) !important;


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

}


.astroloop-ui .crew-health-status.warning {

    color:
        var(--al-caution) !important;


    background-color:
        rgba(
            229,
            172,
            53,
            0.08
        ) !important;


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

}


.astroloop-ui .crew-health-status.error {

    color:
        var(--al-critical) !important;


    background-color:
        rgba(
            232,
            91,
            97,
            0.08
        ) !important;


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

}


/* ================================================================
   25. GRAPH / CHART BACKGROUND
   ================================================================ */

.astroloop-ui :where(

    .ald-chart-frame,

    [class*="chart-frame"],

    [class*="plot-frame"],

    [class*="graph-frame"]

) {

    background-color:
        #071922 !important;

}


/* ================================================================
   26. GRAPH LINES
   ================================================================ */

/*
 * This changes colour only.
 *
 * It DOES NOT change graph values or animation.
 */

.astroloop-ui :where(

    .ald-chart-line,

    [class*="telemetry-line"],

    [class*="trend-line"]

) {

    stroke:
        var(--al-accent) !important;


    fill:
        none !important;

}


/* ================================================================
   27. GRAPH GRID
   ================================================================ */

.astroloop-ui :where(

    .ald-chart-grid-line,

    [class*="grid-line"]

) {

    stroke:
        rgba(
            156,
            176,
            187,
            0.18
        ) !important;

}


/* ================================================================
   28. GRAPH AXES
   ================================================================ */

.astroloop-ui :where(

    .ald-chart-axis-line,

    [class*="axis-line"]

) {

    stroke:
        rgba(
            156,
            176,
            187,
            0.45
        ) !important;

}


/* ================================================================
   29. GRAPH LABELS
   ================================================================ */

.astroloop-ui :where(

    .ald-chart-label,

    [class*="chart-label"],

    [class*="axis-label"]

) {

    fill:
        var(--al-text-muted) !important;


    color:
        var(--al-text-muted) !important;


    font-family:
        "Roboto",
        Arial,
        sans-serif !important;

}


/* ================================================================
   30. FIELD / METRIC LABELS
   ================================================================ */

.astroloop-ui :where(

    .ald-section-title,

    .ald-section-kicker,

    .ald-field-label,

    .ald-info-label,

    .crew-health-runtime-cell span,

    .crew-health-widget span,

    [class*="section-title"],

    [class*="field-label"],

    [class*="metric-label"]

) {

    color:
        var(--al-text-muted) !important;


    text-shadow:
        none !important;

}


/* ================================================================
   31. IMPORTANT NUMERIC VALUES
   ================================================================ */

.astroloop-ui :where(

    .ald-chart-header output,

    .ald-runtime-item strong,

    .crew-health-runtime-cell strong,

    .crew-health-widget strong,

    [class*="metric-value"],

    [class*="kpi-value"]

) {

    color:
        var(--al-text) !important;


    font-variant-numeric:
        tabular-nums;

}


/* ================================================================
   32. REMOVE ONLY EXPLICIT DECORATIVE CIRCLES
   ================================================================ */

/*
 * This does NOT remove:
 * - gauges
 * - progress rings
 * - chart points
 * - functional SVG circles
 */

.astroloop-ui :where(

    .decorative-circle,

    .corner-circle,

    .card-corner-circle,

    [data-decoration="circle"]

) {

    display:
        none !important;

}


/* ================================================================
   33. EMPTY / NO-DATA VISUALS
   ================================================================ */

/*
 * Existing messages are preserved.
 */

.astroloop-ui :where(

    [class*="empty"],

    [class*="no-data"],

    [class*="unavailable"]

) {

    color:
        var(--al-text-muted);


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


    box-shadow:
        none !important;

}


/* ================================================================
   34. SCROLLBARS
   ================================================================ */

.astroloop-ui {

    scrollbar-color:
        #356276
        #07131A;


    scrollbar-width:
        thin;

}


.astroloop-ui ::-webkit-scrollbar {

    width:
        9px;


    height:
        9px;

}


.astroloop-ui ::-webkit-scrollbar-track {

    background:
        var(--al-canvas);

}


.astroloop-ui ::-webkit-scrollbar-thumb {

    background:
        var(--al-border-strong);


    border:
        2px solid
        var(--al-canvas);

}


/* ================================================================
   IMPORTANT
   ================================================================ */

/*
 * There are deliberately NO shared:
 *
 * display:grid
 * grid-template-columns
 * width
 * height
 * position
 * transform
 * animation
 * transition
 *
 * rules here.
 *
 * Therefore each existing AstroLoop plugin keeps its current layout,
 * dimensions and behaviour.
 */