:root {
    --iq-background-color-rgb: var(--iq-palette-color-12-rgb);
    --iq-foreground-color-rgb: var(--iq-palette-color-13-rgb);
    --iq-foreground-color-variant-rgb: var(--iq-palette-color-13-variant-rgb);
    --iq-highlight-color-rgb: var(--iq-palette-color-2-variant-rgb);
    --iq-border-color-rgb: var(--iq-palette-color-9-variant-rgb);
    --iq-border-color-variant-rgb: var(--iq-palette-color-14-rgb);
    --iq-ok-color-rgb: var(--iq-palette-color-7-variant-rgb);
    --iq-warning-color-rgb: var(--iq-palette-color-5-variant-rgb);
    --iq-error-color-rgb: var(--iq-palette-color-5-rgb);

    --iq-background-color: rgb(var(--iq-background-color-rgb));
    --iq-foreground-color: rgb(var(--iq-foreground-color-rgb));
    --iq-foreground-color-variant: rgb(var(--iq-foreground-color-variant-rgb));
    --iq-highlight-color: rgba(var(--iq-highlight-color-rgb), 0.102);
    --iq-border-color: rgb(var(--iq-border-color-rgb));
    --iq-border-color-variant: rgb(var(--iq-border-color-variant-rgb));
    --iq-ok-color: rgb(var(--iq-ok-color-rgb));
    --iq-warning-color: rgb(var(--iq-warning-color-rgb));
    --iq-error-color: rgb(var(--iq-error-color-rgb));

    --main-grid-gap                : 2.5rem;
    --padding-step                 : 0.5rem;
    --container-padding            : var(--padding-step);
    --element-border-radius        : 0.25rem;
    --border-color                 : var(--iq-palette-color-1-variant);
    --border-base                  : 0.0625rem;
    --border-thickness-normal      : var(--border-base);
    --border-thickness-heavy       : calc(2 * var(--border-base));
    --shadow-distance              : 0.1875rem;

    --login-transition             : 0.5s ease-out;

    height: 100%;
}

/*
 * Media queries adjusting sizes for different screen/window resolutions
 */

/* For 720p ish resolutions. Some small texts are already hard to read. Going any lower is a no-go. */
@media only screen and (max-width: 1200px) {
    :root {
        font-size: 75%;
    }
}

/* For 1440p is resolutions. Limit height to accomodate for 1080p/1200p ultrawide resolutions. */
@media only screen and (min-width: 2500px) and (min-height: 1500px) {
    :root {
        font-size: 150%;
    }
}

/* For 4k ish resolutions with 125% dpi scaling. Limit height to accomodate for 1440p/1600p ultrawide resolutions. */
@media only screen and (min-width: 3000px) and (min-height: 1650px) {
    :root {
        font-size: 175%;
    }
}

/* For 4k ish resolutions. Limit height to accomodate for 1440p/1600p ultrawide resolutions. */
@media only screen and (min-width: 3500px) and (min-height: 2000px) {
    :root {
        font-size: 200%;
    }
}

/* Page style */

body {
    display: grid;

    grid:
        ". header" auto
        "navigation info-panel" auto
        "navigation content" 1fr
        "navigation footer" 3em
        / min-content minmax(min-content, 1fr);

    height: 100%;

    font-family          : "RobotoLight", sans-serif;
    font-size            : 0.875rem;
    background-color     : var(--iq-background-color);
    margin               : 0;
    color                : var(--iq-foreground-color);
}

header {
    grid-area: header;

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

    padding         : var(--container-padding);
    user-select     : none;
}

header .slogan {
    display: none;
    font-size: 1.5625rem;
    font-weight: bold;
}

nav {
    display: grid;
    grid:
        ".     nav-item-hmi-projects   .    " min-content
        ".     nav-item-lic-activation .    " min-content
        ".     nav-item-lic-management .    " min-content
        ".     nav-item-active-sessions.    " min-content
        ".     nav-item-settings       .    " min-content
        ".     .                       .    " 1fr
        ".     nav-item-version-info   .    " min-content
        ".     nav-item-logout         .    " min-content
        "ghost ghost                   ghost" min-content
        / 1fr max-content 1fr;

    grid-area       : navigation;
    font-size       : calc(1em * 20 / 14);
    margin          : 5rem 0 0 0;
    color           : var(--iq-background-color);
    font-weight     : bold;
    opacity         : 1;
    transition      : opacity var(--login-transition);
    overflow-y      : auto;
}

main {
    grid-area: content;

    display: flex;
    flex-direction: column;
    padding: var(--container-padding);
    overflow: auto;
}

.nav-background {
    display: flex;
    flex-direction: column;
    background: linear-gradient(to right, rgba(10, 147, 207, 1) 0%, rgba(68, 203, 217, 1) 100%);
    grid-area: 1 / 1 / 5 / 1;
    justify-content: end;
    align-items: end;
}

nav svg.ghost,
.nav-background svg {
    fill      : var(--iq-background-color);
    transition: width var(--login-transition);
    width     : 16.6vw;
}

.nav-background::after {
    display   : block;
    content   : "";
    transition: width var(--login-transition);
    width     : 25vw;
}

footer {
    grid-area: footer;

    display         : flex;
    padding         : var(--container-padding);
    font-size       : 0.8125em;
}

a {
    color: var(--iq-palette-color-1-variant);
}

nav a {
    grid-column: 2;
    color: inherit;
    display: block;
    user-select: none;
    pointer-events: none;
    padding: 1.5em 0;
}

nav .click-area {
    grid-column: 1 / span 3;
    cursor: pointer;
    transition: background 0.05s ease-out, opacity 0.1s ease-out;
    opacity: 0;
    background: transparent linear-gradient(90deg, #FFFFFF00 33%, #FFFFFF 50%);
    background-size: 200% 100%;
    background-position-x: 0;
}

nav .decoration {
    display        : flex;
    flex-direction : column;
    justify-content: space-between;
    align-items    : center;
    grid-column    : 1 / span 3;
    margin         : calc(0px - var(--border-base)) 0;
    pointer-events : none;

    /* Make sure this element is rendered on top of the click area. */
    transform      : translate3d(0, 0, 0);
}

nav .decoration::before,
nav .decoration::after {
    display: block;
    content: "";
    height: calc(2 * var(--border-base));
    background-color: var(--border-color);
    width: 66%;
}

nav .click-area:hover,
nav .click-area.selected:hover {
    opacity: 1;
}

nav .click-area:active,
nav .click-area.selected:active {
    opacity: 0.2;
    background-position-x: 100%;
}

nav .click-area.selected {
    opacity: 0.5;
}

nav a > i {
    margin-right: var(--padding-step);
    width: 1.25em;
    text-align: center;
}

nav .click-area.nav-hmi-projects,
nav .click-area.nav-hmi-projects + .decoration,
nav .click-area.nav-hmi-projects + .decoration + a {
    grid-row: nav-item-hmi-projects;
}

nav .click-area.nav-license-wizard,
nav .click-area.nav-license-wizard + .decoration,
nav .click-area.nav-license-wizard + .decoration + a {
    grid-row: nav-item-lic-activation;
}

nav .click-area.nav-license-management,
nav .click-area.nav-license-management + .decoration,
nav .click-area.nav-license-management + .decoration + a {
    grid-row: nav-item-lic-management;
}

nav .click-area.nav-active-sessions,
nav .click-area.nav-active-sessions + .decoration,
nav .click-area.nav-active-sessions + .decoration + a {
    grid-row: nav-item-active-sessions;
}

nav .click-area.nav-settings,
nav .click-area.nav-settings + .decoration,
nav .click-area.nav-settings + .decoration + a {
    grid-row: nav-item-settings;
}

nav .click-area.nav-version-info,
nav .click-area.nav-version-info + .decoration,
nav .click-area.nav-version-info + .decoration + a {
    grid-row: nav-item-version-info;
}

nav button.nav-item-logout {
    grid-area: nav-item-logout;
    justify-self: center;
    margin-top: 2.125rem;

    --internal-foreground-color: var(--iq-background-color);
    --internal-border-color: var(--iq-background-color);
}

nav button.nav-item-logout:hover {
    --internal-background-color: rgba(var(--iq-background-color-rgb), 0.1);
}

nav button.nav-item-logout:active {
    --internal-background-color: rgba(var(--iq-background-color-rgb), 0.2);
}

nav button.nav-item-logout:focus {
    --internal-border-color: var(--iq-palette-color-1-variant);
}

nav .ghost {
    grid-area: ghost;
    visibility: hidden;
}

main > titled-container,
main > license-wizard {
    flex: 1;
}

toast-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 1em 0;
    box-sizing: border-box;
    pointer-events: none;
}

toast-layer > :not(:last-child) {
    margin-bottom: 1em;
}

.connecting-box {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.connection-lost {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.connection-lost .slmi::before {
    display: block;
}

#widget-login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.login-box {
    display: grid;
    grid   :
        ". webiq-title webiq-title ." max-content
        ". . . ." 4em
        ". input-user input-user ." max-content
        ". . . ." 0.5em
        ". input-pass input-pass ." max-content
        ". . . ." 3em
        ". footnote button-login ." min-content
        / minmax(2em, 1fr) 10fr min-content minmax(2em, 1fr);
    gap: var(--padding-step);
}

.login-box.initial-user {
    grid:
        ". webiq-title webiq-title ." max-content
        ". . . ." 2em
        ". welcome-text welcome-text ." min-content
        ". . . ." 2em
        ". input-user input-user ." max-content
        ". . . ." 0.5em
        ". input-pass input-pass ." max-content
        ". . . ." 0.5em
        ". input-pass-rep input-pass-rep ." max-content
        ". . . ." 3em
        ". button-login button-login ." min-content
        / minmax(2em, 1fr) 10fr min-content minmax(2em, 1fr);
}

.login-box .webiq-title {
    grid-area: webiq-title;
}

.login-box .webiq-dev-indicator {
    grid-area   : webiq-title;
    align-self  : start;
    justify-self: end;

    border-radius    : var(--element-border-radius);
    box-sizing       : border-box;
    padding          : var(--padding-step) calc(4 * var(--padding-step));
    background-color : rgba(var(--iq-palette-color-14-rgb), 0.5);
    font-size        : 1.15em;
    font-weight      : 900;
    user-select      : none;
}

.login-box .welcome-text {
    grid-area: welcome-text;
    text-align: justify;
}

.login-box .welcome-text :first-child {
    margin-top: 0;
}

.login-box .welcome-text :last-child {
    margin-bottom: 0;
}

.login-box input.user {
    grid-area: input-user;
}

.login-box .signal-password-weak,
.login-box input.pass {
    grid-area: input-pass;
}

.login-box .signal-password-mismatch,
.login-box input.pass-rep {
    grid-area: input-pass-rep;
}

.login-box input {
    padding: 1em;
}

.login-box button {
    grid-area: button-login;
    align-self: center;
}

.login-box.initial-user button {
    justify-self: end;
}

.login-box .signal-password-weak,
.login-box .signal-password-mismatch {
    justify-self: end;
    align-self: center;
    margin-right: calc(2 * var(--padding-step));
    width: fit-content;

    color: var(--iq-error-color);
    font-weight: 900;

    display: none;
}

.login-box.password-weak .signal-password-weak,
.login-box.password-mismatch .signal-password-mismatch {
    display: unset;
}

.login-box .footnote {
    grid-area: footnote;
    display: flex;
    text-align: justify;
    margin: 0 3em 0 2em;
}

.login-box .footnote::before {
    display: block;
    content: "*";
    margin-right: 0.5em;
}

.login-box .footnote .paragraph-container > p:first-child {
    margin-top: 0;
}

.login-box .footnote .paragraph-container > p:last-child {
    margin-bottom: 0;
}

.page-version-info h1 {
    margin-block-start: 1.65em;
    margin-block-end: 1.1em;
}

.version-info-box {
    padding: calc(32em / 14) 2em;
}

.page-version-info .webiq-logo {
    font-size: 0.625rem;
}

.version-info-box .error {
    font-size: calc(16em / 14);
    color: var(--iq-error-color);
    margin-bottom: calc(32em / 14);
}

.version-info-box .error i {
    display: inline-block;
    margin-right: 0.5em;
    font-size: 1.125em;
    vertical-align: middle;
}

.version-info-box .error i::before {
    display: block;
}

.version-info-box p:last-child {
    margin-block-end: 0;
}

/* Style overrides for when the WebUI is embedded into WebIQ Designer */
body.embedded {
    display: flex;
    background-color: transparent;
}

body.embedded header,
body.embedded nav,
body.embedded footer,
body.embedded .nav-background,
body.embedded .connect-info {
    display: none;
}

body.embedded main {
    flex: 1;
}

body:not(.dev) .show-on-dev {
    display: none;
}

/* Styles for login screen */
body:not(.login) header {
    padding: 0;
}

body.login header .slogan {
    display: unset;
}

body.login nav {
    visibility: hidden;
    opacity: 0;
}

body.login .nav-background svg {
    width: 100%;
}

body.login .nav-background::after {
    width: 41.1vw; /* ~789.1px on FHD */
}

footer .copyright {
    flex: 1;
    text-align: center;
}