/* ---------------------------------------------------------------------------- */
/* Mirror Screen Manager styles */

html,
body {
    padding: 0;
    margin: 0;
    user-select: none;
    font-family: var(--default-font);
    background-color: var(--bg-color);
    color: var(--fg-color);
}

body {
    width: 100%;
    height: 100%;
}

body.mirror-ui-mgr,
body.login {
    height: 100vmax;
    width: 100vmin;

    .part-error-message-anchor {
        position: absolute;
        top: 12ch;
        place-self: center;
    }

    .scalable-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }
}

@media (orientation: portrait) {
    #part-ui-scale {
        display: none;
    }
}

/* keep aspect ratio and force scrolling on landscape screens */
@media (orientation: landscape) {

    html.outter {
        overflow: hidden auto;
        height: 100%;
        background-color: var(--gray-dark-1);

        &::-webkit-scrollbar {
            width: 1rch;
            height: 1rch;
        }

        &::-webkit-scrollbar-track {
            background: var(--bg-color)
        }

        &::-webkit-scrollbar-thumb {
            background: var(--gray-dark-2);
            border-radius: 0.5rch;
        }

        &::-webkit-scrollbar-thumb:hover {
            background: var(--gray-dark-2);
        }
    }

    body.mirror-ui-mgr,
    body.login {
        margin: 0 auto;
        height: fit-content;
        width: fit-content;

        outline: 2ch solid var(--bg-color);
        box-shadow: var(--bg-color) 0 0 4ch 1ch;
    }

    .scalable-content {
        --scale: 0.75;

        margin: 0 auto;
        height: 100vmax !important;
        width: 100vmin !important;
        zoom: var(--scale);
        transform-origin: top center;
    }
}

.dock-top-anchor .app-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1ch;

    .btn {
        padding: 0;
        font-size: 1em;
        background-color: transparent;
        border: none;
    }

    .btn > i {
        font-size: 4rem;
        line-height: 1;
        font-variation-settings: 'wght' 700, 'opsz' 40;
    }

    .btn-hide-app {
        color: var(--yellow);
    }

    .btn-float-app,
    .btn-embedded-app {
        > i {
            font-size: 3.8em;
        }

        color: var(--blue);
        padding: 0.4em;
    }

    .btn-close-app {
        color: var(--red);
    }
}

.dock-top-anchor[px-state='float'] {
    position: absolute;
    top: 10vmax;

    align-self: center;
    z-index: 100;

    .window {
        display: flex;
        flex-direction: column;
        overflow: hidden;

        border: var(--border-w) solid var(--fg-color);
        border-radius: var(--radius-big);
        background-color: var(--gray-dark-1);
        font-size: 0.8em;

        width: var(--req-width, 90vmin);
        max-width: 90vmin;
        min-width: 40vmin;
        height: var(--req-height, 25vmax);
        min-height: 25vmax;
        max-height: 80vmax;
    }

    .header {
        border-bottom: var(--border-w) solid var(--fg-color);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 1ch 1ch;
    }

    .header .app-title {
        font-size: 2.3rem;
        display: inline-block;
        width: 100%;
        margin: 0;
    }

    .header .app-icon {
        aspect-ratio: 1 / 1;
        width: 6ch;
        margin: 0 1.5ch;
    }

    iframe {
        flex: 1;
    }
}

.dock-top-anchor[px-state='embedded'] {
    width: 100%;
    max-height: var(--top-dock-h);
    height: min-content;
    border: none;
    overflow: hidden;
    border-bottom: var(--border-w) solid var(--fg-color);
    margin-bottom: 1ch;
    background-color: var(--gray-dark-1);

    .app-buttons {
        position: absolute;
        right: 0;
        height: var(--top-dock-h);

        .btn-float-app,
        .btn-embedded-app {
            > i {
                font-size: 3em;
            }
        }
    }

    .window {
        display: flex;
        flex-direction: row;
        overflow: hidden;
        height: 100%;
        position: relative;
    }

    iframe {
        flex: 1;
    }
}

#dock-main {
    flex: 1;
    border: none;
}


/* ---------------------------------------------------------------------------- */
/* Specific Screen styles */

#login-screen {
    background-color: var(--gray-dark-1);
    border-radius: var(--radius-big);

    display: flex;
    position: relative;
    flex-direction: row;
    justify-content: center;
    margin: 15vmax 4vmin;

    .info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        container-type: inline-size;
        gap: 2ch;
    }

    h1 {
        font-size: 4rem;
        font-weight: 400;
        margin: 0.8ch;
        text-align: center;
    }

    hr {
        width: 45%;
        border-top: var(--line-w) solid var(--fg-color);
        align-self: center;
        opacity: 100%;
    }

    h1.header {
        --fluid-size: calc((100cqi / var(--chars)) * 2.4);

        font-size: clamp(1em, var(--fluid-size), 4rem);
        white-space: nowrap;
    }

    h1.header>b {
        display: block;
        text-align: center;
    }

    h1.header>b::before {
        content: "";
        display: inline-block;
        width: 1.2ch;
        height: 1.2ch;
        margin-right: 0.3ch;
        background-image: url("/static/images/phyxio-icon-white-512.png");
        background-size: contain;
        background-repeat: no-repeat;
    }

    .part-error-message-anchor {
        --offset-y: -9ch;

        position: absolute;
        top: var(--offset-y);
        z-index: 100;
    }

    .part-clock-anchor {
        font-size: 1.2rem;
        margin: 2.7ch;
    }

    .part-numpad-anchor {
        position: absolute;
        top: -8vmin;
        z-index: 10;
    }

    .part-confirm-anchor {
        position: absolute;
        top: 7ch;
        z-index: 10;
    }

    &:has(.part-error-message-anchor .shown):has(.part-numpad-anchor .shown) {
        & .part-error-message-anchor {
            /* add offset of .part-numpad-anchor */
            top: calc(var(--offset-y) - 8vmin);
        }
    }

    .user-selector {
        background-color: var(--gray-dark-2);
        border-radius: var(--radius-big);
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: hidden;
        width: 100%;
        max-width: 50vmin;
        min-height: 25vmax;

        p {
            font-size: 1.3em;
            font-weight: 400;
        }

        p b {
            color: var(--yellow);
            font-weight: 700;
        }

        >span {
            font-size: 4em;
        }
    }

    .upper-buttons {
        position: absolute;
        right: 0;
        display: flex;
    }

    .upper-buttons>div.dropdown {
        display: inline-block;
    }

    .upper-buttons .btn {
        --back-color: transparent;
        border: none;

        font-size: 2.2em;
        padding: 0.5ch;
        margin: 0;
        line-height: 1;
    }

    .upper-buttons .btn.show {
        background-color: var(--gray-dark-3);
    }

    .user-list {
        flex: 1;
        transform: translateY(30%);
        width: 100%;

        .card {
            width: 17ch;
            height: fit-content;
            padding: 0.3ch;
            overflow: hidden;
            border-radius: var(--radius-normal);
            border: none;

            display: flex;
            align-items: center;
        }

        .card img {
            border-radius: calc(var(--radius-normal) * 0.9);
            width: 100%;
            aspect-ratio: 1 / 1;
        }

        .card span {
            font-size: 1.3em;
            width: 100%;
            text-align: center;
            display: inline-block;
            padding: 0.5ch;
        }

        .swiper-wrapper {
            pointer-events: none;
        }

        .swiper-slide {
            opacity: 0.4;
            margin: 0 2ch;
            pointer-events: auto;
        }

        .swiper-slide-active {
            opacity: 1;
        }
    }

    .no-users {
        color: var(--gray-dark-3);
        font-size: 8em;
        margin-top: 0.5ch;
        flex: 1;
        display: flex;
        align-items: center;
    }
}

#user-dash-screen {
    .card-list {
        display: grid;
        grid-template-columns: auto auto auto;
        gap: 1ch;

        .card {
            background-color: var(--gray-dark-1);
            border-radius: var(--radius-big);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .row-1 {
            aspect-ratio: 112 / 100;
        }

        .row-2 {
            aspect-ratio: 3 / 2;
        }

        .loading {
            position: absolute;
            color: var(--gray-dark-2);
            font-size: 7rem;
        }

        iframe {
            border-radius: var(--radius-big);
            width: 100%;
            height: 100%;
        }
    }

    .app-list {
        display: flex;
        flex-direction: column;

        h1 {
            border-radius: var(--radius-normal);
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            background-color: var(--gray-dark-1);
            font-weight: 650;
            padding: 0.2ch 4.5ch 0.2ch 1ch;
            width: fit-content;
            margin: 0;
        }

        .items {
            border-radius: var(--radius-big);
            border-top-left-radius: 0;
            border: var(--line-w) solid var(--gray-dark-1);
            min-height: 30vmax;
            overflow-y: auto;
            padding: 2.5ch;

            display: grid;
            grid-template-columns: repeat(6, 1fr);
            align-content: flex-start;
            justify-items: center;
            row-gap: 2ch;
        }

        .items > a {
            background-color: var(--gray-dark-3);
            border-radius: var(--radius-normal);
            width: 13ch;
            min-width: 13ch;
            height: 17ch;
            padding-bottom: 2ch;
            overflow: hidden;
            position: relative;

            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
        }

        .items > a::before {
            content: " ";
            width: 100%;
            position: absolute;
            bottom: 0;
            border-bottom: 0.8ch solid var(--module-color);
        }

        .items > a img {
            width: 8ch;
            margin: 1.5ch 1ch;
        }

        .items > a span {
            font-size: 1.3rem;
            font-weight: bold;
            white-space: normal;
            line-height: 1;
            text-align: center;
        }
    }
}