:root {
    color-scheme: light dark;
    font-size: 93.75%; /* 15px (87.5% -> 14px) */
    --fontsize-small: 0.73rem; /* 11px - absolute minimum (0.79rem) */
    --fontsize-input: 0.8rem; /* 12px (0.85rem) */
    --fontweight-normal: 400;
    --fontweight-bold: 600;
    --fontfamily-primary:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol";
    --fontfamily-secondary:
        Cambria, ui-serif, Georgia, "Times New Roman", Times, serif, "Apple Color Emoji", "Segoe UI Emoji",
        "Segoe UI Symbol";
    --color-text: light-dark(black, white);
    --color-background: light-dark(#f7f5f0, #0f1523);
    --color-highlight: light-dark(#1f6ed6, #3681e4);
    --color-highlight-contra: #ffffff;
    --color-success: light-dark(#00a000, #00ff00);
    --color-darken: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.2));
    --color-darken-more: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.4));
    --color-lighten: light-dark(rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.3));
    --color-shadow: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
    --color-warning: #e6007a;
    --color-black: light-dark(#363537, #000000);
    --border-standard: 1px solid var(--color-darken);
    --transitionfunction-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    font-family: var(--fontfamily-primary);
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-background);
    height: 100%;
}

startgeraet-header {
    padding: 0.5rem 1rem 0;
    text-align: center;
    -webkit-app-region: drag;
    cursor: grab;
    display: block;
}

startgeraet-main {
    padding: 0 1rem;
    display: block;
}

startgeraet-footer,
footer {
    padding-top: 1rem;
    font-size: var(--fontsize-small);
}

startgeraet-footer {
    text-align: center;
    padding: 0.33rem 1rem;
    display: block;
}

/* ----- General ------------------------------------------------------------ */

h1 {
    font-size: 1.2rem;
    font-weight: var(--fontweight-normal);
    font-family: var(--fontfamily-secondary);

    img {
        margin-bottom: -0.2rem;
        margin-right: 0.25rem;
        width: 1.5rem;
        height: 1.5rem;
    }

    .version {
        font-size: var(--fontsize-small);
        -webkit-app-region: no-drag;
        text-decoration: none;
        position: relative;
        display: inline-block;
        padding-right: 0.6rem;
        padding-top: 0.25rem;

        &.has-update-available::after {
            display: inline-block;
            top: 0;
            right: 0;
            content: " ";
            width: 0.5rem;
            height: 0.5rem;
            border-radius: 50%;
            background-color: var(--color-warning);
            position: absolute;
        }
    }
}

h2,
h3 {
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
    font-weight: var(--fontweight-bold);

    * + & {
        margin-top: 1rem;
    }
}

a {
    color: inherit;

    &:hover {
        color: var(--color-warning);
    }
}

abbr {
    text-decoration: none;
    border-bottom: 1px dotted var(--color-darken-more);
}

.hr + .hr {
    margin-top: 1rem;
    border-top: var(--border-standard);
    padding-top: 1rem;
}

.has-warning {
    color: var(--color-warning);
}

.has-info {
    color: var(--color-highlight);
}

/* ----- Structure ---------------------------------------------------------- */

[aria-role="region"] {
    background-color: var(--color-lighten);
    border: var(--border-standard);
    padding: 0.5rem;
    border-radius: 0.25rem;
    width: calc(50% - 0.5rem);

    @media screen and (min-width: 1100px) {
        width: calc(33% - 0.5rem);
    }
}

details {
    summary {
        font-family: var(--fontfamily-secondary);

        h2 {
            font-size: 1rem;
            font-weight: var(--fontweight-normal);
        }
    }

    + details {
        margin-top: 1rem;
    }

    summary h2 {
        display: inline-block;
    }
}

/* ----- Form --------------------------------------------------------------- */

label,
output,
button {
    display: block;
}

label,
.label {
    font-size: var(--fontsize-small);
}

label {
    height: 1.7rem;
    display: flex;
    align-items: flex-end;
    line-height: 1;

    &.header {
        font-size: 1.1rem;
        font-weight: var(--fontweight-bold);
        padding-bottom: 0.25rem;
    }
}

button,
select,
summary {
    cursor: pointer;
}

select,
input,
textarea {
    font: inherit;
    border: none;
    accent-color: var(--color-highlight);
    width: 100%;

    + label {
        margin-top: 1rem;
    }

    option {
        color: inherit;
        background-color: var(--color-background);
    }
}

select,
input {
    background: none;
}

textarea {
    background-color: var(--color-lighten);
    border: var(--border-standard);
    padding: 0.5rem;
    border-radius: 0.25rem;
    font-size: var(--fontsize-input);
}

input {
    &[type="number"] {
        max-width: 4.5rem;
    }

    &[type="date"],
    &[type="time"],
    &[type="checkbox"],
    &[type="radio"] {
        width: auto;
    }
}

button,
::file-selector-button {
    font-size: var(--fontsize-input);
    color: var(--color-text);
    display: inline-block;
    background-color: var(--color-darken);
    border: var(--border-standard);
    border-radius: 0.25rem;
    cursor: pointer;
    padding: 0.25rem;

    &.primary {
        background-color: var(--color-highlight);
        color: var(--color-highlight-contra);
    }

    &.icon {
        display: flex;
        text-align: center;
        line-height: 1;
    }

    &:is(:hover, :focus):not(:disabled) {
        box-shadow: var(--color-shadow) 0.25rem 0.25rem 0.5rem;
    }
}

::file-selector-button {
    margin-bottom: 0.1rem;
}

.form-group {
    &:has(input:disabled, select:disabled, button:disabled, .inactive) {
        opacity: 0.54;
        /* WCAG 2.1 AA */
    }

    &:has(input:disabled, select:disabled, button:disabled) {
        cursor: not-allowed;
    }
}

:invalid,
.input-warning {
    border-bottom: 1px solid var(--color-warning);
    margin-bottom: -1px;
}

:focus {
    outline: none;
    border-bottom: 1px solid var(--color-highlight);
    margin-bottom: -1px;
}

/* ----- Table -------------------------------------------------------------- */

table {
    width: 100%;
    border-spacing: 0.25rem 0.1rem;

    th {
        text-align: left;
    }

    thead th {
        font-size: var(--fontsize-small);
        font-weight: var(--fontweight-normal);
    }

    tr + tr {
        td,
        th {
            border-top: var(--border-standard);
        }
    }
}

/* ----- Flex --------------------------------------------------------------- */

.d-none {
    display: none;
}

.d-hidden {
    visibility: hidden;
}

.d-flex,
.input-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-content: stretch;
    align-items: stretch;
    flex-grow: 1;

    > * {
        flex-grow: 1;
    }

    > .flex-grow-2 {
        flex-grow: 2;
    }

    > .flex-grow-3 {
        flex-grow: 3;
    }
}

.input-group {
    flex-wrap: nowrap;
}

span.d-flex {
    gap: 0.5rem;
}

@media screen and (max-width: 43rem) {
    .d-flex > [aria-role="region"] {
        width: 100%;
    }
}

.w-100 {
    width: 100%;
}

/* ----- Dialog-------------------------------------------------------------- */

dialog {
    color: var(--color-text);
    background-color: var(--color-background);
    border: var(--border-standard);
    padding: 1rem;
    margin: auto !important;
    box-shadow: var(--color-shadow) 0.5rem 0.5rem 0.5rem;
    border-radius: 0.25rem;
    max-width: 40rem;

    &::backdrop {
        background-color: rgba(0, 0, 0, 0.7);
    }

    button[command="close"] {
        position: absolute;
        top: 0.25rem;
        right: 0.25rem;
        font-size: 0.5rem;
        width: 1.2rem;
        height: 1.2rem;
        background-color: var(--color-warning);
        color: var(--color-highlight-contra);
    }

    h2,
    h3,
    .h3 {
        font-size: 1.1rem;
    }

    input {
        border-bottom: var(--border-standard);
        margin-bottom: -1px;
    }
}

/* ----- Misc --------------------------------------------------------------- */

#open-dialog-settings {
    position: absolute;
    top: 0.5rem;
    left: 1rem;
    z-index: 1;
    -webkit-app-region: no-drag;

    .platform-darwin & {
        right: 1rem;
        left: auto;
    }
}

startgeraet-notification {
    position: fixed;
    bottom: 0;
    pointer-events: none;
    z-index: 2;
    width: 20rem;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);

    output {
        display: block;
        background: var(--color-background);
        border: var(--border-standard);
        padding: 0.25rem 1rem;
        box-shadow: var(--color-shadow) 0.25rem 0.25rem 0.5rem;
        text-align: center;
        max-height: 0;
        transition: all 0.35s var(--transitionfunction-bounce);
        background-color: var(--color-highlight);
        color: var(--color-highlight-contra);
        border-radius: 0.25rem 0.25rem 0 0;
        overflow: hidden;

        + output {
            border-radius: 0;
        }

        &.success {
            background-color: var(--color-success);
        }

        &.error {
            background-color: var(--color-warning);
        }

        &.waiting {
            background-color: var(--color-black);
        }

        &.is-visible {
            max-height: 5rem;
        }
    }
}

startgeraet-icon {
    display: inline-flex;
    vertical-align: middle;
    margin-bottom: 0.1em;

    svg {
        stroke: currentColor;
        fill: none;
        width: 1em;
        height: 1em;
    }

    &.bold {
        svg {
            stroke-width: 2;
        }
    }
}

.has-pressed-modifier {
    u {
        color: var(--color-warning);
    }
}