/**
        === Main CSS (Mobile) === 
**/

@import 'app.css';

body {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

header,
footer {
    flex: 0 0 max-content;
    width: 100%;
    border-style: solid;
    border-width: 2px;
}

.hidden {
    display: none;
    top: 0;
}

/* --- Header --- */

header {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: calc(var(--base-unit) / 2);
}

body[data-theme=auto] header {
    background-color: light-dark(var(--light-2), var(--dark-2));
    border-color: light-dark(var(--secondary), var(--primary));
}

body[data-theme=light] header {
    background-color: var(--light-2);
    border-color: var(--secondary);
}

body[data-theme=dark] header {
    background-color: var(--dark-2);
    border-color: var(--primary);
}

header select {
    padding: calc(var(--base-unit) / 2) var(--base-unit);
    width: max-content;
    text-align: center;
    border-radius: calc(var(--base-unit) / 3);
}

body[data-theme=auto] header select {
    color: light-dark(var(--primary), var(--secondary));
    background-color: light-dark(var(--light-2), var(--dark-2));
    border-color: light-dark(var(--primary), var(--secondary));
}

body[data-theme=light] header select {
    color: var(--primary);
    background-color: var(--light-2);
    border-color: var(--primary);
}

body[data-theme=dark] header select {
    color: var(--secondary);
    background-color: var(--dark-1);
    border-color: var(--secondary);
}

body[data-theme=auto] header select:focus {
    outline: 2px solid light-dark(var(--secondary), var(--primary));
}

body[data-theme=light] header select:focus {
    outline: 2px solid var(--secondary);
}

body[data-theme=dark] header select:focus {
    outline: 2px solid var(--primary);
}

#headline {
    font-family: var(--font-headline);
    font-size: var(--h3-size);
    font-weight: var(--h3-weight);
    line-height: var(--h3-line-height);
}

body[data-theme=auto] #headline {
    color: light-dark(var(--primary), var(--secondary));
}

body[data-theme=light] #headline {
    color: var(--primary);
}

body[data-theme=dark] #headline {
    color: var(--secondary);
}

header li {
    list-style: none;
}

header img {
    height: 8vh;
    width: auto;
}

/* --- Nav --- */

#nav-bar>div {
    text-align: center;
}

#nav-bar>div>div>button {
    width: max-content;
}

#nav-bar a {
    font-family: var(--font-headline), sans-serif;
    font-size: var(--h3-size);
    line-height: var(--h3-line-height);
    font-weight: var(--h3-weight);
}

#nav-button {
    width: max-content;
    height: max-content;
    border: none;
    background-color: transparent;
}

nav>ul {
    margin: 0 auto;
    width: max-content;
}

/* --- Main (common) --- */

main {
    flex: 1 0 max-content;
    width: var(--main-width);
    margin: 0 auto;
}

main>p {
    align-self: flex-start;
}

h1,
h2 {
    text-align: center;
}

section {
    width: 100%;
    margin-top: 1dvh;
    margin-bottom: 1dvh;
}

/* --- Home --- */

picture>img {
    display: block;
    width: 100%;
    height: auto;
}

#salad {
    width: 92%;
    margin: 0 auto;
    align-self: center;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    align-content: center;
    gap: var(--base-unit);
    padding: calc(var(--base-unit) / 2);
    border-radius: var(--base-unit);
    border-width: 2px;
    border-style: solid;
    height: fit-content;
}

#salad img {
    border-radius: var(--base-unit);
}

#salad p {
    font-family: var(--font-secondary);
    font-size: 0.7rem;
}

body[data-theme=auto] #salad {
    color: light-dark(var(--dark-2), var(--light-2));
    background-color: light-dark(var(--light-2), var(--dark-2));
    border-color: light-dark(var(--primary), var(--secondary));
}

body[data-theme=light] #salad {
    color: var(--dark-2);
    background-color: var(--light-2);
    border-color: var(--primary);
}

body[data-theme=dark] #salad {
    color: var(--light-2);
    background-color: var(--dark-2);
    border-color: var(--secondary);
}

.review {
    flex: 0 0 70dvw;
}

@media screen and (min-width: 1200px) {
    .review {
        flex-direction: column;
        flex: 0 0 28rem;
    }
}

/* --- Login - Register - reset,new password --- */

.links {
    display: flex;
    flex-direction: column;
    gap: calc(var(--base-unit) * 1);
    align-items: center;
    padding: 0 calc(var(--base-unit) * 2);
    margin-top: 5vh;
    margin-bottom: 5vh;
}

.links>.btn {
    width: 90%;
}

@media screen and (min-width: 1200px) {
    .links>.btn {
        width: 20rem;
    }
}

/* --- Profile --- */

#infos {
    padding: 0 calc(var(--base-unit) * 2);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: max-content;
    gap: var(--base-unit);
}

body[data-theme=auto] .card-order {
    height: 6dvh;
    background: linear-gradient(45deg, light-dark(var(--primary), var(--secondary)), light-dark(var(--secondary), var(--primary)));
}

body[data-theme=light] .card-order {
    height: 6dvh;
    background: linear-gradient(45deg, var(--primary), var(--secondary));
}

body[data-theme=dark] .card-order {
    height: 6dvh;
    background: linear-gradient(45deg, var(--secondary), var(--primary));
}

/* --- Menu List --- */

#menu-button {
    width: max-content;
    margin: 0 auto;
}

#menu-filter>.input-container>input {
    width: 10rem;
}

/* --- Employe/orders --- */

.over table td {
    width: max-content;
    padding: calc(var(--base-unit) / 2) var(--base-unit);
    text-wrap: nowrap;
}

.over form>input[type="number"] {
    width: 4rem;
}

.over form>.btn:not(.plus) {
    width: 10rem;
}

/* Reviews */

.reject {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    border: 1px solid var(--border);
    border-radius: calc(var(--base-unit) / 2);
    padding: calc(var(--base-unit) / 2);
    z-index: 10;
    width: 20rem;
}

body[data-theme=auto] .reject {
    color: light-dark(var(--dark-2), var(--light-2));
    background-color: light-dark(var(--light-2), var(--dark-2));
    border-color: light-dark(var(--primary), var(--secondary));
}

body[data-theme=light] .reject {
    color: var(--dark-2);
    background-color: var(--light-2);
    border-color: var(--primary);
}

body[data-theme=dark] .reject {
    color: var(--light-2);
    background-color: var(--dark-2);
    border-color: var(--secondary);
}

.reject.visible {
    display: block;
}

/* Admin */

.password {
    font-size: 1.6rem;
    font-weight: 800;
    margin: 1dvh 0;
}

.warning {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 1dvh 0;
    color: var(--error);
    background-color: var(--error-contrast);
}

/* --- Footer --- */

footer li {
    list-style: none;
}

#footer-button>p {
    font-family: var(--font-headline), sans-serif;
    font-size: var(--h3-size);
    line-height: var(--h3-line-height);
    font-weight: var(--h3-weight);
}

#footer-button>p::before {
    content: '\2BC6';
    margin-right: calc(var(--base-unit) / 4);
}

#footer-button.rotate>p::before {
    display: inline-block;
    transform: rotate(-90deg);
}

footer a.btn {
    font-size: 0.9rem;
}

body[data-theme=auto] footer {
    background-color: light-dark(var(--light-2), var(--dark-2));
    border-color: light-dark(var(--secondary), var(--primary));
}

body[data-theme=light] footer {
    background-color: var(--light-2);
    border-color: var(--secondary);
}

body[data-theme=dark] footer {
    background-color: var(--dark-2);
    border-color: var(--primary);
}

/**
        === Tablet ===
**/

@media screen and (min-width: 768px) {

    /* --- Home --- */

    #headline {
        font-size: 2.2rem;
        font-weight: 600;
    }

    nav>ul {
        width: 30vw;
    }

    #salad p {
        padding: 0 var(--base-unit);
        font-size: 0.9rem;
    }
}

/**
        === Desktop ===
**/

@media screen and (min-width: 1200px) {

    /* --- Header --- */

    header select {
        padding: 0 calc(var(--base-unit) / 2);
    }

    #nav-button {
        display: none;
    }

    nav {
        width: 100%;
    }

    nav>ul {
        width: 100%;
    }

    nav>ul>li {
        flex: 1 0;
    }

    #nav-bar a {
        font-size: var(--h6-size);
        line-height: var(--h6-line-height);
        font-weight: var(--h6-weight);
    }

    #headline {
        font-size: var(--h1-size);
        font-weight: var(--h1-weight);
        line-height: var(--h1-line-height);
        margin-right: var(--base-unit);
    }

    /* --- Home --- */

    main h2,
    main h3 {
        text-align: start;
    }

    #devanture,
    #team,
    #salad {
        width: 70%;
        margin: 0 auto;
    }

    /* --- Login - Register - reset,new password --- */

    .links {
        grid-column: span 5;
    }

    /* --- Orders --- */

    #order-form>div>#menu_id::after {
        content: '\2BC6';
    }

    /* --- Footer --- */

    #footer-button>p::before {
        content: '';
    }
}