/* COLOR / MODES */
:root {
    --background: black;
    --flightProgressStripBackground: #F7FADE;
    --flightProgressStripForeground: black;
    --settingsForeground: lightgray;
    --settingsText: white;
    --settingsBackground: darkslategray;
    --siaColorSplash: goldenrod;
    --stars: limegreen;
    --starsError: red;
    --starsButtonBorder: none;
    --starsTextLight: whitesmoke;
    --starsTextDark: black;
    --starsGreen: darkgreen;
    --starsRed: firebrick;
    --starsBlue: deepskyblue;
    --starsWhite: whitesmoke;
    --starsYellow: gold;
    --buttonText: white;
    --buttonRed: firebrick;
    --buttonGreen: seagreen;
    --buttonBlue: steelblue;

}

.default {
    --background: black;
    --flightProgressStripBackground: #F7FADE;
    --flightProgressStripForeground: black;
    --settingsForeground: lightgray;
    --settingsText: white;
    --settingsBackground: darkslategray;
    --siaColorSplash: goldenrod;
    --stars: limegreen;
    --starsError: red;
    --buttonText: white;
    --buttonRed: firebrick;
    --buttonGreen: seagreen;
    --buttonBlue: steelblue;
}

.light-mode {
    --background: hsl(0, 0%, 98%);
    --flightProgressStripBackground: #F7FADE;
    --flightProgressStripForeground: black;
    --settingsForeground: black;
    --settingsText: black;
    --settingsBackground: hsl(0, 0%, 90%);
    --siaColorSplash: orange;
    --stars: forestgreen;
    --starsError: red;
    --buttonText: white;
    --buttonRed: crimson;
    --buttonGreen: forestgreen;
    --buttonBlue: royalblue;
}

.dark-mode {
    --background: #2d2d2d;
    --flightProgressStripBackground: #F7FADE;
    --flightProgressStripForeground: black;
    --settingsForeground: #cfcfcf;
    --settingsText: #f3f3f3;
    --settingsBackground: #2d2d2d;
    --siaColorSplash: #b58b00;
    --stars: #42b52b;
    --starsError: #c82f2f;
    --buttonText: #f3f3f3;
    --buttonRed: #c82f2f;
    --buttonGreen: #009b76;
    --buttonBlue: #376fe1;
}

.darker-mode {
    --background: hsl(0, 0%, 8%);
    --flightProgressStripBackground: #F7FADE;
    --flightProgressStripForeground: black;
    --settingsForeground: hsl(0, 0%, 29%);
    --settingsText: gray;
    --settingsBackground: hsl(0, 0%, 12%);
    --siaColorSplash: #b58b00;
    --stars: #42b52b;
    --starsError: #c82f2f;
    --buttonText: #f3f3f3;
    --buttonRed: #c82f2f;
    --buttonGreen: #009b76;
    --buttonBlue: #376fe1;
}

.darcula-mode {
    --background: hsl(231, 15%, 18%);
    --flightProgressStripBackground: #F7FADE;
    --flightProgressStripForeground: black;
    --settingsForeground: hsl(60, 30%, 96%);
    --settingsText: hsl(60, 30%, 96%);
    --settingsBackground: hsl(232, 14%, 31%);
    --siaColorSplash: hsl(31, 100%, 66%);
    --stars: hsl(135, 94%, 65%);
    --starsError: hsl(0, 100%, 67%);
    --buttonText: hsl(60, 30%, 96%);
    --buttonRed: hsl(0, 95%, 67%);
    --buttonGreen: hsl(135, 75%, 60%);
    --buttonBlue: hsl(225, 27%, 51%);
}

.matrix-mode {
    --background: black;
    --flightProgressStripBackground: black;
    --flightProgressStripForeground: limegreen;
    --settingsForeground: limegreen;
    --settingsText: limegreen;
    --settingsBackground: black;
    --siaColorSplash: limegreen;
    --stars: limegreen;
    --starsError: red;
    --starsButtonBorder: 1px solid limegreen;
    --starsTextLight: limegreen;
    --starsTextDark: limegreen;
    --starsGreen: black;
    --starsRed: black;
    --starsBlue: black;
    --starsWhite: black;
    --starsYellow: black;
    --buttonText: black;
    --buttonRed: limegreen;
    --buttonGreen: limegreen;
    --buttonBlue: limegreen;
}

.redlight-mode {
    --background: black;
    --flightProgressStripBackground: black;
    --flightProgressStripForeground: firebrick;
    --settingsForeground: firebrick;
    --settingsText: firebrick;
    --settingsBackground: black;
    --siaColorSplash: firebrick;
    --stars: firebrick;
    --starsError: firebrick;
    --starsButtonBorder: 1px solid firebrick;
    --starsTextLight: firebrick;
    --starsTextDark: firebrick;
    --starsGreen: black;
    --starsRed: black;
    --starsBlue: black;
    --starsWhite: black;
    --starsYellow: black;
    --buttonText: black;
    --buttonRed: firebrick;
    --buttonGreen: firebrick;
    --buttonBlue: firebrick;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    body {
        grid-template-areas: 
            "header"
            "mainContent"
            "references"
            "stars";
    }

    #references {
        flex-direction: row;
        align-items: flex-start;
    }

    #starsContent {
        flex-direction: column;
    }

    #flightProgressStrip {
        width: 100%;
        aspect-ratio: 8;
        font-size: 2.3vw;
    }

    #localCheatsheet {
        display: none;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    body {
        grid-template-areas: 
            "header"
            "mainContent"
            "references"
            "stars";
    }

    #references {
        flex-direction: row;
        align-items: flex-start;
    }

    #starsContent {
        flex-direction: row;
        justify-content: space-between;
    }

    #flightProgressStrip {
        width: 100%;
        aspect-ratio: 8;
        font-size: 2.3vw;
    }
}

/* Medium devices (landscape tablets, 819px and up) */
@media only screen and (min-width: 819px) {
    body {
        grid-template-areas: 
            "header      header"
            "mainContent references"
            "stars       stars";
    }

    #references {
        flex-direction: column;
        align-items: flex-end;
    }

    #starsContent {
        flex-direction: row;
        justify-content: space-between;
    }

    #flightProgressStrip {
        max-width: 8in;
        aspect-ratio: 8;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    body {
        grid-template-areas: 
            "header      header"
            "mainContent references"
            "stars       references";
    }

    #references {
        flex-direction: column;
        align-items: flex-end;
    }

    #starsContent {
        flex-direction: row;
        justify-content: space-between;
    }

    #flightProgressStrip {
        max-width: 8in;
        aspect-ratio: 8;
    }
}

/* Extra large devices (large laptops and desktops, 1316px and up) */
@media only screen and (min-width: 1316px) {
    body {
        grid-template-areas: 
            "header      header"
            "mainContent references"
            "stars       references";
    }

    #references {
        flex-direction: column;
        align-items: flex-end;
    }

    #starsContent {
        flex-direction: row;
        justify-content: space-between;
    }

    #flightProgressStrip {
        max-width: 8in;
        aspect-ratio: 8;
    }

    #currentMETAR {
        width: calc(100vw - 966px);
    }
}

#header {
    grid-area: header;
}

#mainContent {
    grid-area: mainContent;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 5px;
}

#localCheatsheet {
    font-family: Consolas, courier, monospace;
}

#activityLog {
    font-family: Consolas, courier, monospace;
}

body {
    display: grid;
    align-items: start;
    gap: 5px;
    background: var(--background);
    font-family: arial;
    color: var(--settingsText);
}

#references {
    display: flex;
    grid-area: references;
    gap: 5px;
}

#starsContent {
    display: inline-flex;
    grid-area: stars;
    gap: 5px;
    align-items: flex-start;
}

h1 {
    color: var(--settingsForeground);
    text-align: center;
}

#settingsArea {
    grid-area: settings;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 5px;
}

fieldset {
    border: 2px solid var(--settingsForeground);
    background: var(--settingsBackground);
    border-radius: 10px;
    text-wrap: nowrap;
/*            backdrop-filter: blur(10px); /* Apply blur to content behind */*/
}

legend {
    background-color: var(--settingsForeground);
    color: var(--background);
    font-family: Arial;
    font-weight: bold;
    border-radius: 6px;
    padding: 3px 6px;
    
    select, option {
        background: var(--background);
    }
}

/*fieldset, .flightProgressStrip, #buttonContainer button {
    box-shadow: 0px 0px 0px 3px var(--background);
}*/

.listDisplay {
    width: 300px;
    background: var(--background);
    color: var(--settingsForeground);
    hr {
        border-color: var(--settingsForeground);
        border-style: solid;
    }
}

.siaColorSplash {
    color: var(--siaColorSplash);
}

#currentMETAR {
    min-width: 350px;
    text-wrap: wrap;
    overflow-wrap: break-word;
}

#mainContent button {    
    border: none;
    color: var(--buttonText);
    width: 120px;
    height: 40px;
    border-radius: 6px;
    font-size: 14px;
}

#buttonContainer {
    grid-area: buttons;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.buttonNew {
    background-color: var(--buttonGreen);
}

.buttonRepeat {
    background-color: var(--buttonBlue);
}

.buttonRepeatInitial {
    background-color: var(--buttonRed);
}

.buttonMETAR {
    background-color: var(--siaColorSplash);
}

#buttonContainer .buttonSTARS {
    border: 1px solid var(--stars);
    color: var(--stars);
    background-color: var(--background);
}

/** dropdown styling */
select,
::picker(select) {
  appearance: base-select;
}

select {
  flex: 1;
  width: auto;
  border: 2px solid var(--settingsForeground);
  padding: 3px 6px;
  margin: 2px;
  font-size: 0.8em;
}

#mainContent {
    select {
          background: var(--settingsBackground);
    }
    option {
          background: var(--settingsBackground);
    }
}

#references {
    select {
          background: var(--background);
    }
    option {
          background: var(--background);
    }
}

#mainContent, #references {
    select:hover {
      background: var(--siaColorSplash);
      color: var(--buttonText);
    }
    select::picker-icon {
      color: var(--settingsForeground);
    }
    select::picker-icon:hover {
      color: var(--buttonText);
    }
    select:open::picker-icon {
      rotate: 180deg;
    }
    ::picker(select) {
      border: none;
    }

    option {
      display: flex;
      justify-content: flex-start;
      gap: 5px;

      border: 2px solid var(--settingsForeground);
      border-top: none;
      border-bottom: none;
      color: var(--settingsText);
      padding: 3px 6px;
    }
    option:hover{
      background: var(--siaColorSplash);
      color: var(--buttonText);
    }
    option:first-of-type {
      border-radius: 6px 6px 0 0;
      border-top: 2px solid var(--settingsForeground);
    }
    option:last-of-type {
      border-radius: 0 0 6px 6px;
      border-bottom: 2px solid var(--settingsForeground);
    }
    ::picker(select) {
      border-radius: 6px;
    }
}

/** checkbox styling */
.parentCheckbox {
}

.childCheckbox {
    margin-left: 20px;
}

#flightProgressStrip {
    grid-area: flightStrip;
    display: grid;
    grid-template-columns: 42.6fr 16fr 26.5fr 78.2fr 11fr 11fr 17.2fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
        "box1 box5 box8 box9 box10 box11 box12"
        "box3 box6 box8 box9 box13 box14 box15"
        "box4 box7 box8 box9 box16 box17 box18";
    vertical-align: top;
    text-align: left;
    text-wrap: wrap;
    font-family: Consolas, courier, monospace;
    font-size: 19px;
    color: var(--flightProgressStripForeground);
    font-weight: bold;
    background: var(--flightProgressStripBackground);
    border-collapse: collapse;
    border: 0.5px solid var(--flightProgressStripForeground);

    .fpsItem {
        border-color: var(--flightProgressStripForeground);
        border-width: 0.5px;
        border-style: solid;
        padding-top: 5px;
        padding-left: 5px;
    }

    #fps1 {
        grid-area: box1;
        border-style: solid solid none solid;
        padding-left: 20px;
    }

    #fps3 {
        grid-area: box3;
        border-style: none solid none solid;
        padding-left: 20px;
    }

    #fps4 {
        grid-area: box4;
        border-style: none solid solid solid;
        padding-left: 20px;
    }

    #fps5 {
        grid-area: box5;
        padding-left: 1px;
    }

    #fps6 {
        grid-area: box6;
        padding-left: 1px;
    }

    #fps7 {
        grid-area: box7;
        padding-left: 1px;
        overflow-wrap: nowrap;
    }

    #fps8 {
        grid-area: box8;
    }

    #fps9 {
        grid-area: box9;
    }

    #fps10 {
        grid-area: box10;
    }

    #fps11 {
        grid-area: box11;
    }

    #fps12 {
        grid-area: box12;
    }

    #fps13 {
        grid-area: box13;
    }

    #fps14 {
        grid-area: box14;
    }

    #fps15 {
        grid-area: box15;
    }

    #fps16 {
        grid-area: box16;
        text-align: center;
    }

    #fps17 {
        grid-area: box17;
    }

    #fps18 {
        grid-area: box18;
    }
}

.stars {
    text-transform: uppercase;
    display: none;
    vertical-align: text-top;
    outline: none; 
    border: 1px solid var(--stars);
    resize: none;
    background: var(--background);
    color: var(--stars);
    font-family: Consolas, courier, monospace;
    color: var(--stars);
    font-size: 16px;
    font-weight: bold;
}

.starsError {
    display: none;
    font-family: Consolas, courier, monospace;
    color:var(--starsError);
    font-size:16px;
    font-weight:bold;
}

#starsKeyboard {
    grid-area: starsKeyboard;
    align-self: end;
    justify-self: end;
    width: auto;
    background: black;

    .standardRow {
        display: grid;
        grid-column-gap: 2px;
        margin: 2px;
        grid-template-columns: repeat(10, 50px);
    }
    .nonStandardRow {
        display: grid;
        grid-column-gap: 2px;
        margin: 2px;
        grid-template-columns: 76px 50px 310px 76px;
        margin-top: 12px;
    }

    button {
        width: 100%;
        height: 50px;
        font-family: arial;
        font-size: 11px;
        letter-spacing: -0.5px;
        line-height: 1em;
        font-weight: bold;
        text-align: center;
        border: var(--starsButtonBorder);
        border-radius: 5px;
        align-items: center;
        box-shadow: inset 0px 0px 1.5px 5px rgba(0,0,0,0.25);
    }
    button:active {
        transform: translateY(1px);
    }

    #range {
        letter-spacing: -0.7px;
    }

    .green {
        background: var(--starsGreen);
        color: var(--starsTextLight);
    }
    .red {
        background: var(--starsRed);
        color: var(--starsTextLight);
    }
    .blue {
        background: var(--starsBlue);
        color: var(--starsTextDark);
    }
    .white {
        background: var(--starsWhite);
        color: var(--starsTextDark);
    }
    .yellow {
        background: var(--starsYellow);
        color: var(--starsTextDark);
    }
}

#txtStarsEntry {
    padding: 2px;
    width: fit-content;
    height: fit-content;
}

#aircraftDisplay {
    max-height: 80vh;
    overflow: scroll;
}