:root {
    --awb-navbar-text-light: #6090bb;
    --awb-navbar-text-light-complement: black;
    --awb-navbar-text-light-shadow: #dee8f2;
    --awb-navbar-text-dark: #406080;
    --awb-navbar-text-dark-complement: #806040;
    --awb-navbar-text-dark-shadow: #010306;
    --awb-navbar-text-image: #70aacc;
    --awb-navbar-text-image-complement: #cc9270;
    --awb-navbar-text-image-shadow: #1a2d37;
    --awb-navbar-text: var(--bs-navbar-active-color);
    --awb-navbar-text-complement: var(--bs-navbar-color);
    --awb-navbar-text-shadow: black;
    --awb-scale-0: 0.4;
    --awb-scale-1: 0.6;
    --awb-scale-2: 0.7;
    --awb-scale-3: 0.8;
    --awb-scale-default: 1.0;
    --awb-scale-user: 1.0;
    --awb-scale-4: 1.2;
    --awb-scale-5: 1.5;
    --awb-scale-6: 1.8;
    --awb-scale-7: 2.0;
    --awb-scale-8: 3.0;
    --awb-scale-9: 4.0;
    --awb-fs-0: calc(1.0rem * var(--awb-scale-0));
    --awb-fs-1: calc(1.0rem * var(--awb-scale-1));
    --awb-fs-2: calc(1.0rem * var(--awb-scale-2));
    --awb-fs-3: calc(1.0rem * var(--awb-scale-3));
    --awb-fs-default: calc(1.0rem * var(--awb-scale-default));
    --awb-fs-4: calc(1.0rem * var(--awb-scale-4));
    --awb-fs-5: calc(1.0rem * var(--awb-scale-5));
    --awb-fs-6: calc(1.0rem * var(--awb-scale-6));
    --awb-fs-7: calc(1.0rem * var(--awb-scale-7));
    --awb-fs-8: calc(1.0rem * var(--awb-scale-8));
    --awb-fs-9: calc(1.0rem * var(--awb-scale-9));
}

/* nearly square viewport */
@media screen and (min-aspect-ratio: 0.8) and (max-aspect-ratio: 1.2) {
    .bg-body-image {
        background-image: url('../images/eclipse-270-texas-april-2024.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
    }

    :root:is([data-bs-theme="dark"]) {
        --awb-navbar-text: var(--awb-navbar-text-light);
        --awb-navbar-text-complement: var(--awb-navbar-text-light-complement);
        --awb-navbar-text-shadow: var(--awb-navbar-text-light-shadow);
    }

    :root:is([data-bs-theme="light"]) {
        --awb-navbar-text: var(--awb-navbar-text-dark);
        --awb-navbar-text-complement: var(--awb-navbar-text-dark-complement);
        --awb-navbar-text-shadow: var(--awb-navbar-text-dark-shadow);
    }

    body.bg-body-image {
        --awb-navbar-text: var(--awb-navbar-text-image);
        --awb-navbar-text-complement: var(--awb-navbar-text-image-complement);
        --awb-navbar-text-shadow: var(--awb-navbar-text-light-shadow);
    }
}

/* portrait viewport */
@media screen and (max-aspect-ratio: 0.8) {
    .bg-body-image {
        background-image: url('../images/ocean-night-portrait.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: top;
    }

    :root:is([data-bs-theme="light"]) {
        --awb-navbar-text: var(--awb-navbar-text-dark);
        --awb-navbar-text-complement: var(--awb-navbar-text-dark-complement);
        --awb-navbar-text-shadow: var(--awb-navbar-text-dark-shadow);
    }

    :root:is([data-bs-theme="dark"]) {
        --awb-navbar-text: var(--awb-navbar-text-light);
        --awb-navbar-text-complement: var(--awb-navbar-text-light-complement);
        --awb-navbar-text-shadow: var(--awb-navbar-text-light-shadow);
    }

    body.bg-body-image {
        --awb-navbar-text: var(--awb-navbar-text-image);
        --awb-navbar-text-complement: black;
        --awb-navbar-text-shadow: var(--awb-navbar-text-dark-shadow);
    }
}

/* landscape viewpoint*/
@media screen and (min-aspect-ratio: 1.2) {
    .bg-body-image {
        background-image: url('../images/creation-landscape.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
    }

    :root:is([data-bs-theme="light"]) {
        --awb-navbar-text: var(--awb-navbar-text-dark);
        --awb-navbar-text-complement: var(--awb-navbar-text-dark-complement);
        --awb-navbar-text-shadow: var(--awb-navbar-text-dark-shadow);
    }

    :root:is([data-bs-theme="dark"]) {
        --awb-navbar-text: var(--awb-navbar-text-light);
        --awb-navbar-text-complement: var(--awb-navbar-text-light-complement);
        --awb-navbar-text-shadow: var(--awb-navbar-text-light-shadow);
    }

    body.bg-body-image {
        --awb-navbar-text: var(--awb-navbar-text-image);
        --awb-navbar-text-complement: var(--awb-navbar-text-image-complement);
        --awb-navbar-text-shadow: var(--awb-navbar-text-light-shadow);
    }
}

html {
    min-width: 250px;
    min-height: 400px;
}

body {
    margin-bottom: 60px;
}

.no-url {
    text-decoration: none !important;
    cursor: pointer !important;
}

.bg-header {
    background-color: rgb(20 60 100);
}

.awb-navbar-text {
    color: var(--awb-navbar-text);
    margin-top: auto;
    margin-bottom: auto;
    transition: color 0.5s ease-in-out
}

    .awb-navbar-text:hover {
        color: var(--awb-navbar-text-shadow);
        text-shadow: 0 0 1px var(--awb-navbar-text-shadow);
    }

.company-brand {
    color: var(--awb-navbar-text);
    font-weight: 500;
}

.text-header {
    font-size: 1.1rem;
    font-weight: bold;
    color: white;
}

.vertical-center {
    min-width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 0;
    padding: 0.5rem;
}

section {
    opacity: 1.0;
}

.icon-size-1 {
    width: 1rem;
    height: 1rem;
}

.icon-size-2 {
    width: 2rem;
    height: 2rem;
}

.card {
    opacity: 1.0;
}

    .card .card-body {
        overflow-y: auto;
        height: 100%;
    }

a[data-page] {
    cursor: pointer;
}

    a[data-page]:hover {
        text-decoration: underline;
    }

    a[data-page]:focus {
        outline: 2px solid var(--bs-primary);
        outline-offset: 2px;
    }

/*
------------------------------------------------------------
MONACO‑SAFE BOOTSTRAP OVERRIDES
Prevent Bootstrap from collapsing Monaco's layout box.
------------------------------------------------------------
*/

/*
    ---------------------------
    1. TAB PANES (Bootstrap)
    ---------------------------
*/

/* Bootstrap normally hides tab panes with display:none. Monaco cannot survive that. */

.tab-pane {
    display: block !important; /* keep in layout */
    visibility: hidden; /* hide visually */
    opacity: 0;
    pointer-events: none;
    height: 0; /* collapse height safely */
    overflow: hidden;
}


    /* Active tab pane becomes visible */

    .tab-pane.active {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        height: auto;
        overflow: visible;
    }

/*
    ---------------------------
    2. COLLAPSE (Bootstrap)
    --------------------------- 
*/

 Bootstrap collapse uses display:none — fatal for Monaco 
.collapse {
    display: block !important;  keep in layout 
    height: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

     Expanded collapse 
    .collapse.show {
        height: auto;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

/*
    ---------------------------
    3. NAV TABS / PILLS
    --------------------------- 
*/

 Prevent Bootstrap from hiding tab content via fade transitions 
.tab-pane.fade {
    transition: opacity .15s linear;
}

/*
    ---------------------------
    4. CODEVIEWER EDITORS
    --------------------------- 
*/

 /* Monaco editor hosts must NEVER be display:none */

.codeviewer-editor {
    position: relative;
    width: 100%;
    height: 350px;
}

     /* Hidden editor (for tab switching) */

    .codeviewer-editor.hidden {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }

     /* Active editor */

    .codeviewer-editor.active {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

/*
    ---------------------------
    5. PREVIEW FRAME
    --------------------------- 
*/

.codeviewer-preview {
    border: 1px solid var(--bs-border-color);
    padding: .5rem;
}

.preview-frame {
    width: 100%;
    height: 200px;
    border: none;
}

/*
    ---------------------------
    6. SAFETY: PREVENT FLEX COLLAPSE
    --------------------------- 
*/

.codeviewer {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-height: 0;  prevents flexbox from collapsing children 
}