/*------------------------------------------*/
/* Site-Wide Variables                      */
/*------------------------------------------*/

:root {
    --bg-accent: #c9c5c0;
    --bg-accent-hover: #c0bab2;
    --bg-color: #dbd6d0;
    --bg-meta: #b9c3d3;
    --bg-warn: #c9b4af; /*#ffdada*/
    --color: #0e2042;
    --color-ok: #a7ba7d;
    --color-navbar-bg: #c9e1f2;
    --color-alert-bg: lightyellow;
    --color-lightred: #ffaaaa;
    --color-lightorange: #ffbe48;
    --color-warn-bg: lightpink;
    --lowest-device-height: 570px;
    --lowest-device-width: 320px;
    --margins: 20px;
    --navbar-height: 50px;
    --page-top-bottom-space: 50px;
    --status-height: 25px;
    --wgt-unit: 35px;
}

/*------------------------------------------*/
/* Base and Theme/Layout Elements           */
/*------------------------------------------*/


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

body {
    color: var(--color);
    display: grid;
    font-family: "Noto Sans", sans-serif;
    grid-template-columns: 100vw;
    grid-template-rows: auto;
    grid-template-areas: 
        "header"
        "main"
        "footer"; 
}

header {
    display: grid;
    background: var(--color-navbar-bg);
    grid-area: header;
    grid-template-columns: 1fr 50% 1fr;
    grid-template-rows: 100%;
    grid-template-areas: ". userpane .";
    min-height: var(--navbar-height);
    transition: grid-template-columns 0.5s ease;
}

header div {
    align-items: center;
    display: flex;
    font-size: 0.9em;
    grid-area: userpane;
    justify-content: flex-end;
}

main {
    display: grid;
    grid-area: main;
    grid-template-columns: 1fr 50% 1fr;
    grid-template-rows: 100%;
    grid-template-areas: ". mainpane .";
    min-height: 
        calc(100vh - var(--navbar-height) 
        - var(--page-top-bottom-space));
    transition: grid-template-columns 0.5s ease;
}

a {
    color: var(--color);
    font-size: 0.95em;
    text-decoration: none;
}

h1 {
    margin-top: 40px;
    margin-bottom: 20px;
}

h3 {
    margin-bottom: 20px;
}

button {
    border: 1px solid var(--color);
    border-radius: 5px;
    font-family: "Noto Sans", sans-serif;
    font-size: 0.9em;
    font-weight: bold;
    min-width: 100px;
    min-height: var(--wgt-unit);
    transition: background 0.5s ease;
}

button[name="submit"],
button[name="checkin"] {
    background: var(--color-ok);
}

button[name="delete"],
button[name="drop"] {
    background: var(--color-lightred);
}

button[name="checkin"],
input[name="action"],
input[name="login"],
input[name="email"],
input[name="reset"],
input[name="password"],
input[name="password1"],
input[name="password2"]{
    display: block;
    margin: 10px auto;
    width: calc(var(--lowest-device-width) - (var(--margins) * 2)) 
}


input[type="file"]::file-selector-button {
    padding: 5px 7px;
}

button:hover {
    background: var(--color);
    color: white;
}

button[name="checkin"]:hover {
    color: var(--color-ok);
}


button[name="delete"]:hover,
button[name="drop"]:hover {
    background: maroon;
}


.titles, .center {
    text-align: center;
}

nav {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin: 20px auto 40px auto;
}

nav a,
nav button {
    align-items: center;
    background: var(--color-lightorange);
    border: none;
    border-radius: 5px; 
    display: flex;
    flex: 1;
    font-size: 0.95em; 
    font-weight: bold; 
    height: auto; 
    justify-content: center;
    min-width: 280px;
    max-width: 480px;
    min-height: var(--wgt-unit);
    padding: 5px 12px;
    transition: background 0.5s ease,
        border 0.5s ease; 
} 
 
nav a:hover,
nav button:hover { 
    background: var(--color); 
    color: var(--color-lightorange); 
} 

label {
    font-size: 0.9em;
    margin: 5px 0px;
}

label input[type="file"] {
    display: none;
}


/*-------------------------------------------*/
/* Footer                                    */
/*-------------------------------------------*/

:root {
}

footer {
    background: var(--color);
    display: grid;
    grid-area: footer;
    grid-template-columns: 1fr 50% 1fr;
    grid-template-rows: 100%;
    grid-template-areas: ". footerpane .";
    min-height: 50px;
    transition: grid-template-columns 0.5s ease;
}

footer div {
    align-items: center;
    color: var(--color-navbar-bg);
    display: flex;
    font-size: 0.9em;
    grid-area: footerpane;
    justify-content: center;
    text-align: center;
}