:root {
    --color-bg: white;
    --color-fg: black;

    --shadow-s: 1px 2px black;
    --shadow-m: 2px 3px black;
    --shadow-l: 3px 5px black;

    --spacing-xxs:  2px;
    --spacing-xs:   3px;
    --spacing-s:    5px;
    --spacing-m:    8px;
    --spacing-l:    13px;
    --spacing-xl:   21px;
    --spacing-xxl:  34px;
    --spacing-3xl:  55px;
    --spacing-4xl:  89px;

    --width-desktop: 1000px;

    --border-xs:    1px dashed black;
    --border-s:     1px solid black;
    --border-m:     2px solid black;

    --border-radius-s: 2px;
    --border-radius-m: 3px;

    --box-shadow-l: 3px 5px black;

    --transition-fast: 0.1s ease;
    --transition-slow: 0.2s ease;
}

html {
    background:     var(--color-bg);
    color:          var(--color-fg);
    font-family:    "Crimson Pro", serif;
}

/** Holy grail ***************************************************************/
#holy-grail {
    display:    grid;
    height:     100vh;
    grid-template-areas:
        "header header header"
        "nav content side"
        "footer footer footer";
        grid-template-columns:  auto 1fr auto;
        grid-template-rows:     auto 1fr auto;
        grid-gap:               var(--spacing-s);
}

header { 
    grid-area:      header;

    margin-bottom:  var(--spacing-xxs);
    padding:
        var(--spacing-s)
        var(--spacing-l);

    display:            flex;
    justify-content:    space-between;
    gap:                var(--spacing-l);

    & h2 {
        color: silver;
    }
}

main {
    grid-area:      content; 
    max-width:      var(--width-desktop);
    justify-self:   center;

    padding: var(--spacing-s);
}

nav     { grid-area:    nav;    } /** reserved for future use */
aside   { grid-area:    side;   } /** reserved for future use */

/** Flash messages ***********************************************************/
.flash { 
    display:            flex;
    justify-content:    space-between;

    font-weight: bold;

    margin:
        var(--spacing-s)
        0px
        var(--spacing-xxl)
        0px;

    padding:
        var(--spacing-s)
        var(--spacing-s)
        var(--spacing-s)
        var(--spacing-l);

    border:         var(--border-s);
    border-radius:  var(--border-radius-s);
    box-shadow:     var(--box-shadow-l);

    & button {
        background: none;
        border:     none;
    }
    & button:hover {
        color:  red;
        cursor: pointer;
    }
}

/** Signed-in-as widget ******************************************************/
#signed-in-as {
    display:        flex;
    align-items:    center;
    gap:            13px;

    & i {
        color: dimgrey;
    }

    & b {
        text-decoration: underline gold 3px;
        margin:
            0px
            var(--spacing-xxs);
    }

    & input[type=submit] {
        background:     none;
        font-weight:    bold;

        padding:
            var(--spacing-xs)
            var(--spacing-m);

        border:         var(--border-m);
        border-radius:  var(--border-radius-m);

        transition: box-shadow var(--transition-fast);
    }

    & input[type=submit]:hover {
        background: yellow;
        cursor:     pointer;

        box-shadow: var(--shadow-s);
    }
}

/** Generic box **************************************************************/
.cardbord {
    position:   relative;
    width:      fit-content;
    height:     fit-content;

    margin:
        var(--spacing-xxl)
        var(--spacing-xs);

    padding:
        var(--spacing-xl)
        var(--spacing-l)
        var(--spacing-xxl)
        var(--spacing-l);

    border:         var(--border-s);
    border-radius:  var(--border-radius-s);

    transition: border-color,box-shadow var(--transition-slow);

    /** Breakout to a new box component and reuse for metrics **/
    & h2:first-of-type {
        position:       absolute;
        top:            -15px;
        background:     white;
        line-height:    1em;
    }

}


/** Login form ***************************************************************/
#login {
    flex: 0.8;

    margin-top: var(--spacing-3xl);
    margin-bottom: var(--spacing-3xl);

    & #choice-of-login {
        width:          fit-content;
        background:     white;

        padding:
            var(--spacing-m)
            var(--spacing-l)
            var(--spacing-m)
            var(--spacing-l);

        border:         var(--border-s);
        border-radius:  var(--border-m);
        box-shadow:     var(--shadow-m);


        & select {
            width: 100%;

            text-align:     center;
            font-weight:    bold;
            font-size:      1.1rem;

            margin:
                var(--spacing-m)
                var(--spacing-xss)
                var(--spacing-m)
                var(--spacing-xss);

            padding: var(--spacing-s);


            border:         none;
            border-radius:  var(--border-radius-m);

            transition: background var(--transition-fast);
            background: gainsboro;
        }

        &   select:hover,
            select:active,
            select:focus-visible
        {
            background: silver;
            cursor:     pointer;
        }

        & p {
            max-width: 54ch;

            & b {
                text-decoration: underline lightgreen 3px;
            }
        }

        & p:nth-child(1) {
            text-align: right;
        }
        & p:nth-last-child(1) {
            text-align: right;
        }

        & div {
            margin: 
                var(--spacing-l)
                var(--spacing-xs)
                var(--spacing-l)
                var(--spacing-xs);
        }
    }

    & #login-action {
        display:            flex;
        justify-content:    end;

        & input[type=submit] {
            position:   absolute;
            bottom:     -15px;

            background:     mediumspringgreen;
            font-weight:    bold;

            margin:
                0px
                var(--spacing-s);

            padding:
                var(--spacing-xs)
                var(--spacing-m);

            border: var(--border-m);
            border-radius: var(--border-m);

            transition: background,box-shadow var(--transition-fast);
        }

        & input[type=submit]:hover {
            cursor:     pointer;
            box-shadow: var(--shadow-s);

        }
    }

    &:has(input[type=submit]:hover) {
        border-color:   white;
        box-shadow:     inset 0 0 0 3px mediumspringgreen;
    }
}

/** Launch environment form ************************************************/
#launch-environment {
    flex:       0.7;

    & form {
        display:        flex;
        flex-direction: column;
        gap:            var(--spacing-l);
    }

    &   #choice-of-flavor,
        #choice-of-allocation
    {
        width:          fit-content;
        background:     white;

        padding:
            var(--spacing-s)
            var(--spacing-m);

        border:         var(--border-s);
        border-radius:  var(--border-m);
        box-shadow:     var(--shadow-m);

        & p {
            max-width: 54ch;

            & b {
                text-decoration: underline silver 3px;
            }
        }
    }

    & #choice-of-flavor {
        p > b {
            text-decoration: underline gold 3px;
        }
    }

    & #choice-of-allocation {
        align-self: end;
        margin-right: 13%;

        p > b {
            text-decoration: underline lightskyblue 3px;
        }
    }

    & select {
        font-weight:    bold;

        margin:
            var(--spacing-xs)
            var(--spacing-m);

        padding:
            var(--spacing-xxs)
            var(--spacing-s)
            var(--spacing-xxs)
            var(--spacing-l);


        border:         none;
        border-radius:  var(--border-radius-m);

        transition: background var(--transition-fast);
    }

    & select[id=flavors]        { background: gold; }
    & select[id=allocations]    { background: lightskyblue; }

    &   select:hover,
        select:active,
        select:focus-visible
    {
        background: gainsboro;
        cursor:     pointer;
    }

    & select:disabled {
        background:     gainsboro;
        color:          dimgray;
        cursor:         not-allowed;
    }

    & #launch-action {
        display:            flex;
        justify-content:    end;

        & input[type=submit] {
            position:   absolute;
            bottom:     -15px;

            background:     mediumspringgreen;
            font-weight:    bold;

            margin:
                0px
                var(--spacing-s);

            padding:
                var(--spacing-xs)
                var(--spacing-m);

            border: var(--border-m);
            border-radius: var(--border-m);

            transition: background,box-shadow var(--transition-fast);
        }

        & input[type=submit]:hover {
            cursor:     pointer;
            box-shadow: var(--shadow-s);

        }
    }

    &:has(input[type=submit]:hover) {
        border-color:   white;
        box-shadow:     inset 0 0 0 3px mediumspringgreen;
    }
}

/** Running Environments *****************************************************/
#running-environments {
    & ul {
        padding:
            var(--spacing-l)
            var(--spacing-l)
            var(--spacing-l)
            var(--spacing-xl);

        list-style: none;
        border-top: var(--border-m);

        display:        flex;
        flex-direction: column;
        gap:            13px;

        & li {
            background: white;

            padding: var(--spacing-xs);
            padding-left: var(--spacing-s);

            border:         var(--border-s);
            border-radius:  var(--border-radius-m);
            box-shadow:     var(--shadow-s);

            display:            flex;
            align-items:        center;
            justify-content:    space-between;
            gap:                var(--spacing-m);

            transition: box-shadow var(--transition-fast);

            & .env-id {
                display:    block;
                width:      var(--spacing-xl);

                color:      dimgrey;
                font-style: italic;
                text-align: center;
            }

            & .env-flavor {
                font-weight:    bold;
            }

            & .env-allocation {
                padding-right: var(--spacing-l);
            }

            & .env-allocation:hover {
                text-decoration: underline lightskyblue 3px;
                cursor:     help;
            }

            & .env-status {
                background: gainsboro;
                font-style: italic;

                padding:        0px var(--spacing-s);
                border-radius:  var(--border-radius-s);
            }

            & .env-link {
                flex:       1;

                background: none;
                border:     none;

                font-style: italic;


                & a {
                    display: block;
                    width: 100%;
                }
            }

            & .env-link:hover a {
                font-style:     initial;
                font-weight:    bold;
                cursor:         pointer;
            }

            &:has(.env-link:hover) {
                background: mediumspringgreen;
                box-shadow: var(--shadow-m);
            }

            & .env-link a {
                color: inherit;
                text-decoration: none;
            }

            & .env-actions {
                height: 100%;
            }

            & .env-delete-action {
                height:         100%;
                width:          var(--spacing-xxl);

                font-weight:    bold;
                color:          crimson;
                background:     none;

                padding: 
                    var(--spacing-xs)
                    var(--spacing-m);

                border: none;
                border-radius:
                    0px
                    var(--border-radius-m)
                    var(--border-radius-m)
                    0px;
            }

            & .env-delete-action:hover {
                background: red;
                color:      white;
                cursor:     pointer;
            }

            & .env-expiry:hover {
                text-decoration: underline gainsboro 3px;
                cursor: help;
            }
        }

        .running .env-status {
            background: mediumspringgreen;
        }

    }
}

/** Metrics ******************************************************************/
#metrics-display {
    flex:       0.3;

    border: var(--border-xs);

    & h2:first-of-type {
        position:       absolute;
        top:            -15px;
        background:     white;
        line-height:    1em;
    }

    & #metrics {
        display:            flex;
        flex-wrap:          wrap;
        justify-content:    center;
        gap:                var(--spacing-l);

        & .metric {
            position:   relative;
            background: white;
            overflow:   hidden;

            width:  84px;
            height: 84px;

            border: var(--border-s);
            border-radius: var(--border-radius-m);
            box-shadow:     var(--shadow-m);

            display:            flex;
            justify-content:    center;
            align-items:        center;

            cursor:     help;

            dt {
                position:   absolute;
                top:        0px;

                font-size:  0.85em;
                font-style: italic;
            }

            dd {
                font-size: 3em;
                font-weight: bold;
            }
        }
    }
}

/** Text sections ************************************************************/
#greeting {
    .greeting {
        font-size:      1.5em;
        font-weight:    bold;
    }

    max-width: 79ch;
}

#introduction {
    & div       { flex: 0.6; }
    & ul        { flex: 0.4; }

    .greeting {
        font-size:      1.5em;
        font-weight:    bold;
    }
}

#outro {
    margin-top: 89px;
    max-width: 79ch;
}

.start {
    font-size:      1.2em;
    font-weight:    bold;
}

/** Banner *******************************************************************/
.banner {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--spacing-xl);

    aside {
        height: var(--spacing-xxl);
    }

    div {
        border-top: var(--spacing-xxs) dashed dimgray;
        border-bottom: var(--spacing-xxs) dashed dimgray;

        padding-top: var(--spacing-xl);
        padding-bottom: var(--spacing-xl);

        p {
            width: 100%;
            text-align: center;

            em {
                text-decoration: underline gold 3px;
            }
        }    
    }
}

/** Footer *******************************************************************/
footer {
    grid-area:      footer;
    color:          silver;

    display: flex;
    flex-direction: column;
    margin-top: var(--spacing-xl);
    padding: var(--spacing-s);

    & div {
        align-self: center;

        display: flex;
        gap: var(--spacing-xxl);

        & a {
            text-decoration: none;
            color: gray;
        }
        & a:hover {
            text-decoration: underline gold 3px;
        }

    }

    & p {
        align-self: center;
    }
}

/** Miscellaneous ************************************************************/
.row {
    display: flex;
    gap: var(--spacing-l);
}


.striped-background {
    background:         white;
    background-size:    10px 10px;
    background-image:   repeating-linear-gradient(
        45deg, silver 0, silver 1px, white 0, white 50%
    );
}

@media (max-width: 768px) {
    #holy-grail {
        grid-template-areas:
          "header"
          "nav"
          "content"
          "side"
          "footer";

        grid-template-columns: 1fr;
        grid-template-rows:
          auto  /* Header       */
          auto  /* Navigation   */
          1fr   /* Content      */
          auto  /* Aside        */
          auto; /* Footer       */
    }

    .row { 
        flex-direction: column;
        align-items: center;
    }

    #metrics-display, #launch-environment { width: auto; }
    #launch-environment   { margin-bottom:    13px; } 
    #metrics-display      { margin-top:       13px; } 
}

@media (max-width: 600px) {
    .env-allocation {display: none;}
}

@view-transition {
    navigation: auto;
}