@import "/static/css/constants.css";
@import "/static/css/toggleSwitch.css";
@import "/static/css/fonts.css";
@import "/static/css/navbar.css";
@import "/static/css/background.css";
@import "/static/css/alignment-classes.css";
@import "/static/css/misc.css";

/* RESET */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
}

/* RESIZABLE FONT */

@media (max-height: 800px) {
    .resizeFont div.fontSize1 {
        font-size: var(--fs3);
    }
    .resizeFont div.fontSize2 {
        font-size: var(--fs3);
    }
}

/* ALIGNMENT, HEIGHTS, WIDTHS, BORDERS */
body {
    height: 100vh;
    height: 100dvh;
    width: 100vw;
}

@media (max-width: 1000px) {
    body {
        height: 100%;
    }
}

.loginSection {
    padding: 0 var(--sidePadding);
    justify-content: space-evenly;
}

.loginHeader {
    text-align: center;
}

.loginField,
.registrationField {
    padding: var(--standard-padding-vertical) var(--standard-padding-horizontal);
    display: grid;
}

.loginField {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 2fr 1fr 2fr 1fr 2fr 1fr 2fr;
    grid-template-areas:
        "label1 label1 input1 input1 input1"
        ". . . . ."
        "label3 label3 input3 input3 input3"
        ". . . . ."
        "button1 button1 . button2 button2"
        ". . . . ."
        "button3 button3 button3 button3 button3";
}

.registrationField {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 2fr 1fr 2fr 1fr 2fr 1fr 2fr 1fr 2fr;

    grid-template-areas:
        "label1 label1 input1 input1 input1"
        ". . . . ."
        "label2 label2 input2 input2 input2"
        ". . . . ."
        "label3 label3 input3 input3 input3"
        ". . . . ."
        ". button1 button1 button1 ."
        ". . . . ."
        ". button3 button3 button3 .";
}

@media (max-width: 1000px) {
    .loginField {
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: repeat(9, 2fr) 3fr;
        grid-template-areas:
            "label1 label1 label1 label1 label1 . ."
            "input1 input1 input1 input1 input1 input1 input1"
            "label3 label3 label3 label3 label3 . ."
            "input3 input3 input3 input3 input3 input3 input3"
            ". . . . . . ."
            ". button1 button1 button1 button1 button1 ."
            ". . . . . . ."
            ". button2 button2 button2 button2 button2 ."
            ". . . . . . ."
            ". button3 button3 button3 button3 button3 .";
    }
    .registrationField {
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: repeat(10, 1fr);
        grid-template-areas:
            "label1 label1 label1 label1 label1 . ."
            "input1 input1 input1 input1 input1 input1 input1"
            "label2 label2 label2 label2 label2 . ."
            "input2 input2 input2 input2 input2 input2 input2"
            "label3 label3 label3 label3 label3 . ."
            "input3 input3 input3 input3 input3 input3 input3"
            ". . . . . . ."
            ". button1 button1 button1 button1 button1 ."
            ". . . . . . ."
            ". button3 button3 button3 button3 button3 .";
    }

    .loginSection {
        gap: var(--vertical-spacing-small);
        padding-top: var(--small-padding-vertical);
        padding-bottom: var(--small-padding-vertical);
    }
}

/* #region grid-areas */
#labelMail {
    grid-area: label1;
}
#labelPhone {
    grid-area: label2;
}
#labelPassword {
    grid-area: label3;
}
#mail {
    grid-area: input1;
}
#phone {
    grid-area: input2;
}
#password {
    grid-area: input3;
}
#loginButton {
    grid-area: button1;
}
#registerButton {
    grid-area: button1;
}
#resetPassword {
    grid-area: button2;
}
#loginWithGoogleButton {
    grid-area: button3;
}
/* #endregion */

.loginField > input,
.registrationField > input,
#resetEmailDiv > input {
    padding: var(--small-padding-vertical) var(--small-padding-horizontal);
}

.loginField > label,
.registrationField > label {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#loginButton,
#registerButton,
#resetPassword,
#toRegister,
#toLogin,
#backToHome {
    padding: var(--small-padding-vertical) var(--small-padding-horizontal);

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

#loginWithGoogleButton {
    display: grid;
    padding: var(--small-padding-vertical) var(--small-padding-horizontal);
    grid-template-columns: 1fr 2fr 1fr 1fr;
    grid-template-areas: ". text logo .";

    text-align: center;
}

#loginWithGoogleButton > div {
    grid-area: text;
    display: flex;
    justify-content: end;
    align-items: center;
    text-wrap: nowrap;
}

#loginWithGoogleButton > img {
    grid-area: logo;
    width: 100%;
    max-height: 40px;
    height: 100%;
    display: block;
    margin: auto;
}

@media (max-width: 400px) {
    #loginWithGoogleButton {
        grid-template-columns: 1fr 2fr 1fr;
        grid-template-areas: ". text .";
    }

    #loginWithGoogleButton > img {
        display: none;
    }

    #loginWithGoogleButton > div {
        justify-content: center;
    }
}

.loginSection .linkButtons {
    padding: var(--small-padding-vertical) var(--standard-padding-horizontal);
    width: 100%;
    gap: var(--vertical-spacing-small);
}

.img {
    height: 100%;
    display: block;
    padding: var(--small-padding-vertical) var(--small-padding-horizontal);
}

.img img {
    height: 100%;
    max-width: 50vw;
    display: block;
}

@media (max-width: 1000px) {
    .img {
        display: none;
    }
}

.warningOverlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    z-index: 998;
    padding: var(--big-padding-vertical) var(--big-padding-horizontal);
    background-color: rgb(0 0 0 /0.5);
}

.warningMessageBox {
    height: 100%;
    border: 3px solid var(--kind-blue);
    padding: var(--standard-padding-vertical) var(--standard-padding-vertical);
    z-index: 999;
    text-align: center;
}

.warningMessageBox .button {
    flex-basis: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.warningMessageBox img {
    height: 70%;
}

/* #region resetEmail */

#requestLinkOverlay > .warningMessageBox {
    display: grid;
    grid-template-columns: 9fr 1fr;
    grid-template-rows: repeat(10, 1fr);
}

#cancelButton {
    grid-area: 1 / 2 / 2 / 2;
}

#requestLinkOverlay > .warningMessageBox > .messageText {
    grid-area: 3 / 1 / 6 / 3;
}

#resetEmailDiv {
    grid-area: 6 / 1 / 10 / 3;
}

#acceptButton {
    grid-area: 10 / 1 / 11 / 3;
}

#resetEmailDiv {
    padding: var(--big-padding-vertical) var(--small-padding-horizontal);
    display: grid;
}

#resetEmailDiv > label,
#resetEmailDiv > input {
    max-height: fit-content;
}

/* #region: grid-template areas for reset email div*/
#resetEmailDiv {
    grid-template-columns: 1fr 3fr 1fr 4fr 1fr;
    grid-template-areas: ". label . input .";
}
#resetEmailDiv > label {
    grid-area: label;
}
#resetEmailDiv > input {
    grid-area: input;
}
@media (max-width: 1000px) {
    #resetEmailDiv {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: "label" "input";
    }
}
/* #endregion: grid-template areas for reset email div */

/* #endregion resetEmail */