/* Color schemes */

/* Default light mode */
:root {
    --background-color: white;
    --text-color: black;
    --line-color: black;

    --focus-outline-color: rgba(208, 208, 255, 0.5);

    --input-bg-color: #f8f8f8;
    --input-highlight-color: #e8e8ff;
    --input-bg-invalid-color: #ffb0b0;

    --button-color: #ddd;
    --button-highlight-color: #bbb;

    /* Record button */
    --record-color: #9d9;
    --record-highlight-color: #7b7;
    --stop-color: #d99;
    --stop-highlight-color: #b77;
    --stopping-color: #dd9;
}

@media (prefers-color-scheme: dark) {
    /* Dark mode */
    :root {
        --background-color: black;
        --text-color: white;
        --line-color: white;

        --focus-outline-color: rgba(208, 208, 255, 0.5);

        --input-bg-color: #222;
        --input-highlight-color: #227;
        --input-bg-invalid-color: #ffb0b0;

        --button-color: #444;
        --button-highlight-color: #777;

        /* Record button */
        --record-color: #7b7;
        --record-highlight-color: #9d9;
        --stop-color: #b77;
        --stop-highlight-color: #d99;
        --stopping-color: #bb7;
    }
}

/* Focus outline */

:root {
    --focus-outline: 3px solid var(--focus-outline-color);
}

/* Top level rules */

body {
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10+ */
}

/* The main screen is a flex formed by the waterfall canvas and the UI form. The
waterfall grows as needed so that at least all the viewport is used
vertically. The flex can be larger if the UI form needs to overflow past the end
of the screen, since the waterfall has a minimum height of 75vh. */
.main_screen {
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}

#canvas {
    touch-action: none;
    width: 100vw;
    height: 0; /* all the canvas height comes from growing the flex */
    flex: 1 0 75vh;
}

html {
    font-family: Helvetica, Arial, sans-serif;
}

body {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    background-color: var(--background-color);
    color: var(--text-color);
}

.hidden {
    display: none !important;
}

dialog {
    background-color: var(--background-color);
    color: var(--text-color);
    border: none;
    /* apparently some elements in the dialog do not inherit the user-select from body */
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10+ */
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

/* Settings dialog */

dialog[open]#settings {
    padding: 0px;
    width: min(max(25em, 80vw), 40em);
    margin-top: min(30px, 5vh);
}

#settings [role=tabpanel] {
    padding: 20px;
    margin-top: auto;
}

/* Settings tabs */

#settings_tabs {
    display: flex;
    background-color: var(--input-bg-color);
}

#settings_tabs button {
    padding: 5px 15px;
    border-width: 0px;
    border-right-width: 1px;
}

#settings_tabs button[aria-selected=true] {
    background-color: var(--background-color);
    outline: none;
}

#settings_tabs button[aria-selected=false] {
    outline: none;
}

button#close_settings {
    margin-left: auto;
    padding-left: 5px;
    padding-right: 5px;
    border-width: 0px;
    border-left-width: 1px;
    border-bottom-width: 1px;
}

/* Forms */

/* Reset forms properties that are sometimes overridden by browsers */

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    outline: none;
}

textarea {
    overflow: auto;
}

/* Forms styling */

button,
input,
select,
textarea {
    color: var(--text-color);
    border: 1px solid var(--line-color);
    padding: 2px;
}

input,
textarea {
    background-color: var(--input-bg-color);
}

button,
select {
    background-color: var(--button-color);
}

a:focus,
button:focus,
select:focus {
    outline: var(--focus-outline);
}

input:focus {
    background-color: var(--input-highlight-color);
}

button:hover,
select:hover {
    background-color: var(--button-highlight-color);
}

input:invalid {
    background-color: var(--input-bg-invalid-color);
}

.link_button {
    color: var(--text-color);
    text-decoration: none;
    text-align: center;
    border: 1px solid var(--line-color);
    padding: 2px;
    background-color: var(--button-color);
}

.link_button:hover {
    background-color: var(--button-highlight-color);
}

/* UI form */

.ui {
    font-size: 0.875rem;
}

form.ui {
    flex: 0; /* do not grow and steal space to the waterfall */
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-around;
    column-gap: 20px;
    row-gap: 10px;
    padding: 10px;
}

.ui fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.waterfall_levels input {
    width: 4em;
}

input.rf_frequency {
    width: 7em;
}

input.baseband_frequency {
    width: 5.5em;
}

input.baseband_frequency_khz {
    width: 7em;
}

input.gain {
    width: 3.5em;
}

input.decimation {
    width: 4.25em;
}

#spectrometer_output_sampling_frequency {
    width: 5em;
}

/* Record / Stop button */

.record_button {
    width: 5em;
    background-color: var(--record-color);
}

.record_button:hover {
    background-color: var(--record-highlight-color);
}

.stop_button {
    width: 5em;
    background-color: var(--stop-color);
}

.stop_button:hover {
    background-color: var(--stop-highlight-color);
}

.stopping_button {
    width: 5em;
    background-color: var(--stopping-color);
}

.stopping_button:hover {
    background-color: var(--stopping-color);
}

/* Settings panels */

#settings form {
    display: grid;
    grid-template-columns: auto 1fr;
    row-gap: 10px;
    column-gap: 10px;
    align-items: center;
}

#settings label {
    grid-column: 1;
}

#settings input,
#settings select,
#settings .div_value {
    grid-column: 2;
}

#settings input[type='checkbox'] {
    margin-right: auto;
}

#settings form div {
    display: flex;
    align-items: center;
    column-gap: 10px;
}

#settings form div input:first-child {
    flex: 1;
}

/* Recording panel */

#recording_panel form {
    grid-template-columns: auto 1fr auto auto;
}

#recording_panel input,
#recording_panel select,
#recording_panel .div_value {
    grid-column: 2/5;
}

#iqengine_recording {
    grid-column: 3/4;
}

#download_recording {
    grid-column: 4/5;
}