@import 'lib/toastify.min.css';

.htmx-indicator {
    display: none;
    color: inherit;
}

.htmx-request .htmx-indicator {
    display: inline;
}

.htmx-request.htmx-indicator {
    display: inline;
}

.choices__button {
    padding: 0;
}

.choices__item {
    color: black;
}

/* main layout */

:root {
    --border-radius: 0;
    --breakpoint-size: 768px;
    --orange-50: hsl(30, 80%, 90%);
    --orange-200: hsl(30, 70%, 80%);
    --orange-400: hsl(30, 70%, 60%);
    --orange-500: hsl(30, 70%, 50%);
    --orange-700: hsl(30, 70%, 30%);
    --blue-50: hsl(193, 69%, 81%);
    --blue-200: hsl(193, 69%, 30%);
    --red-50: hsl(0, 69%, 81%);
    --red-500: hsl(0, 69%, 50%);
    --red-700: hsl(0, 69%, 30%);
    --wc-menu-button-color: black;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--orange-200);
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.layout {
    margin: 0;
    max-width: max-content;
    background: var(--orange-50);
    border-radius: var(--border-radius);
}

.layout>nav {
    position: sticky;
    top: 0;
    left: 0;
    background: var(--orange-500);
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    justify-content: space-between;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    z-index: 5;
    color: black;
}

.layout>nav>aside {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.nav-links {
    display: flex;
    gap: 0.5rem;
}

a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

a:hover {
    text-decoration-thickness: 4px;
}

.layout>nav h1 {
    margin: 0;
}

.layout>main {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

h1,h2,h3,h4,h5,h6 {
    margin: 0;
}

/* side drawer */

side-drawer {
    background-color: var(--orange-50);
    width: 350px;
    max-width: 75vw;
    z-index: 10;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

side-drawer .content {
    padding: 1rem;
    height: 100%;
    overflow-y: auto;
}

#sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#sidebar-nav>article {
    margin-left: 1.5rem;
}

/* tables */

.section-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    scroll-margin: 75px;
}

.table-container {
    scroll-margin: 75px;
}

table {
    display: table;
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--orange-500);
}

thead {
    background: var(--orange-500);
    color: black;
}

.table-name {
    text-align: center;
}

thead th {
    padding: 1rem;
}

tbody th,
tbody td {
    border: 1px solid var(--orange-500);
    padding: 1rem;
}

.table-container {
    overflow-x: auto;
    overflow-y: hidden;
    height: min-content;
    background:
        /* Shadow Cover LEFT */
        linear-gradient(
            90deg,
            var(--orange-50) 30%,
            rgba(255, 240, 230, 0)
        ) left center,
        
        /* Shadow Cover RIGHT */
        linear-gradient(
            -90deg,
            var(--orange-50) 30%,
            rgba(255, 240, 230, 0)
        ) right center,
        
        /* Shadow LEFT */
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.2),
            rgba(0, 0, 0, 0)
        ) left center,
        
        /* Shadow RIGHT */
        linear-gradient(
            -90deg,
            rgba(0, 0, 0, 0.2),
            rgba(0, 0, 0, 0)
        ) right center;
    
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}

@media screen and (min-width: 968px) {
    body {
        margin: 0px;
        display: flex;
        justify-content: center;
    }

    .layout {
        margin: 50px auto;
        width: 968px;
        max-width: unset;
    }

    .table-container {
        overflow-x: unset;
        overflow-y: unset;
        height: initial;
    }

    thead {
        position: sticky;
        top: 66px;
    }
}

/* form styling */

form {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

label {
    width: max-content;
}

input, select {
    font-size: inherit;
    font-family: inherit;
    padding: 0.5rem 1rem;
    border: 2px solid var(--orange-700);
    background-color: white;
    width: max-content;
}

:is(input, select):focus {
    border-color: var(--blue-200);
}

:is(input, select)[class="input-validation-error"] {
    border-color: var(--red-500);
    background-color: var(--red-50);
}

:is(input, select)[class="input-validation-error"]:focus {
    outline-color: var(--red-50);
}

.field-validation-error {
    color: var(--red-700);
}

button, a:has(em) {
    font-size: inherit;
    font-family: inherit;
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    outline: none;
    color: black;
    cursor: pointer;
    width: max-content;
}

:is(button, a:has(em)):hover {
    text-decoration: underline;
    text-decoration-thickness: 3px;
}

button[type="submit"], button[type="button"] {
    background-color: var(--orange-500);
    border-color: var(--orange-500);
}

:is(button[type="submit"], button[type="button"]):hover {
    background-color: var(--orange-400);
}

:is(button, input, select, a):focus {
    outline: 3px solid var(--blue-50);
    transition: outline-width 100ms ease-in-out;
}

.submit-buttons {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}