/* ==========================================================
   ASTROLOOP GLOBAL ROBOTO + OPEN MCT THEME
   ========================================================== */

:root {
    --astroloop-font:
        Roboto,
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    --astroloop-bg:
        #06131d;

    --astroloop-panel:
        #0a1b27;

    --astroloop-panel-2:
        #102432;

    --astroloop-line:
        #29495c;

    --astroloop-text:
        #eef6fa;

    --astroloop-muted:
        #9eb3bf;

    --astroloop-blue:
        #32a8ff;

    --astroloop-cyan:
        #31d0ec;

    --astroloop-green:
        #66d46e;

    --astroloop-orange:
        #f7a72b;

    --astroloop-red:
        #ff5f6c;
}


/* ==========================================================
   ABSOLUTE GLOBAL FONT OVERRIDE
   ========================================================== */

html,
body,
body *,
#app,
#app *,

.l-shell,
.l-shell *,
.l-shell__pane-tree,
.l-shell__pane-tree *,
.l-shell__pane-main,
.l-shell__pane-main *,
.l-shell__pane-inspector,
.l-shell__pane-inspector *,

.c-object-view,
.c-object-view *,
.c-tree,
.c-tree *,
.c-inspector,
.c-inspector *,
.c-inspect-properties,
.c-inspect-properties *,

/* AstroLoop dashboard */
#astroloop-dashboard-root,
#astroloop-dashboard-root *,

/* Resources */
#al-resources-root,
#al-resources-root *,

/* Meal Planning */
#mpx-root,
#mpx-root *,

/* OSDR */
#obh-root,
#obh-root *,

/* ASTRA */
#astra-root,
#astra-root *,

/* Crew Health */
#crew-health-root,
#crew-health-root *,

/* Operations tabs */
.operations-panel,
.operations-panel *,
.operations-page,
.operations-page * {

    font-family:
        var(--astroloop-font)
        !important;
}


/* ==========================================================
   NORMAL FONT — PREVENT CONDENSED / DECORATIVE FACES
   ========================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div,
button,
input,
select,
textarea,
label,
small,
strong,
table,
thead,
tbody,
tr,
th,
td,
a {

    font-stretch:
        normal !important;

    font-style:
        normal !important;
}


/* ==========================================================
   OPEN MCT FONT SIZING
   ========================================================== */

body {

    font-size:
        14px !important;

    line-height:
        1.4 !important;
}


.l-shell__pane-tree {

    font-size:
        13px !important;
}


.l-shell__pane-tree
.c-tree__item,

.l-shell__pane-tree
.c-tree-item {

    font-size:
        13px !important;
}


.l-shell__pane-inspector {

    font-size:
        12px !important;
}


.c-object-view {

    font-size:
        13px !important;
}


/* ==========================================================
   DASHBOARD TITLES
   ========================================================== */

#app h1,
.c-object-view h1,
#al-resources-root h1,
#mpx-root h1,
#obh-root h1 {

    font-family:
        var(--astroloop-font)
        !important;

    font-size:
        32px;

    font-weight:
        700 !important;

    letter-spacing:
        -0.025em !important;
}


#app h2,
.c-object-view h2,
#al-resources-root h2,
#mpx-root h2,
#obh-root h2 {

    font-family:
        var(--astroloop-font)
        !important;

    font-weight:
        600 !important;

    letter-spacing:
        0 !important;
}


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

#app table,
#app table * {

    font-family:
        var(--astroloop-font)
        !important;
}


#app th {

    font-size:
        11px !important;

    font-weight:
        600 !important;

    letter-spacing:
        0.025em !important;
}


#app td {

    font-size:
        12px !important;

    font-weight:
        400 !important;
}


/* ==========================================================
   BUTTONS AND INPUT CONTROLS
   ========================================================== */

#app button,
#app input,
#app select,
#app textarea,

button,
input,
select,
textarea {

    font-family:
        var(--astroloop-font)
        !important;

    font-size:
        12px !important;

    font-weight:
        500 !important;
}


/* ==========================================================
   MAIN OPEN MCT APPEARANCE
   ========================================================== */

html,
body,
#app {

    background:

        radial-gradient(
            circle at 80% -10%,
            rgba(34, 116, 170, 0.12),
            transparent 34%
        ),

        linear-gradient(
            180deg,
            #07141e,
            #050c12
        )

        !important;
}


.l-shell__pane-tree {

    background:

        linear-gradient(
            180deg,
            #08151f,
            #061019
        )

        !important;

    border-right:
        1px solid
        var(--astroloop-line)
        !important;
}


.l-shell__pane-main {

    background:
        #06131d
        !important;
}


.l-shell__pane-inspector {

    background:

        linear-gradient(
            180deg,
            #08151f,
            #061019
        )

        !important;

    border-left:
        1px solid
        var(--astroloop-line)
        !important;
}


/* ==========================================================
   PANELS
   ========================================================== */

.c-panel,
.c-card,
.c-inspect-properties,
.operations-panel {

    border-color:
        var(--astroloop-line)
        !important;

    background:

        linear-gradient(
            180deg,
            #0b1d29,
            #081620
        )

        !important;
}


/* ==========================================================
   NAVIGATION
   ========================================================== */

.c-tree__item,
.c-tree-item {

    border-radius:
        4px !important;
}


.c-tree__item:hover,
.c-tree-item:hover {

    background:
        rgba(
            50,
            168,
            255,
            0.10
        )

        !important;
}


.c-tree__item.is-selected,
.c-tree-item.is-selected {

    background:

        linear-gradient(
            90deg,
            rgba(
                50,
                168,
                255,
                0.28
            ),
            rgba(
                50,
                168,
                255,
                0.06
            )
        )

        !important;

    border-left:
        3px solid
        var(--astroloop-blue)
        !important;
}


/* ==========================================================
   INPUTS
   ========================================================== */

input,
select,
textarea {

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

    background:
        #071923
        !important;

    border-color:
        #31566a
        !important;
}


/* ==========================================================
   BUTTONS
   ========================================================== */

button,
.c-button {

    border-color:
        #3477a0
        !important;

    color:
        #e7f6ff
        !important;

    background:

        linear-gradient(
            180deg,
            #0d3450,
            #092436
        )

        !important;
}


button:hover:not(:disabled),
.c-button:hover:not(:disabled) {

    border-color:
        #39aaff
        !important;

    background:

        linear-gradient(
            180deg,
            #12486b,
            #0c3048
        )

        !important;
}


/* ==========================================================
   SCROLLBAR
   ========================================================== */

::-webkit-scrollbar {

    width:
        10px;

    height:
        10px;
}


::-webkit-scrollbar-track {

    background:
        #07131c;
}


::-webkit-scrollbar-thumb {

    background:
        #315e79;

    border-radius:
        999px;

    border:
        2px solid
        #07131c;
}


::-webkit-scrollbar-thumb:hover {

    background:
        #3f89b5;
}