/* setup stuff */

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

:root {
    --bg-color: rgb(37, 34, 31);
    --bg-color-lighter: color-mix(in oklab, var(--bg-color) 75%, var(--accent-cream) 25%);

    --text-color: rgb(240, 240, 240);

    --accent-cream: rgb(233, 211, 177);
    --accent-blue: rgb(90, 142, 226);
    --accent-lotti: rgb(83, 126, 145);
}

html {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-blue) transparent; 
}

body {
    background: var(--bg-color);
    color: var(--text-color);
    font-family: 'Geist Mono', monospace;
    
    width: 100%;
    height: 100vh;

    display: flex;

    flex-direction: column;
}

h1 {
    font-family: 'Instrument Serif', serif;
}

/* layout */

header, footer {
    padding: 10px;
    background: var(--accent-cream);
    color: var(--bg-color);

    display: flex;

    align-items: center;

    h1 {
        display: inline;
    }
}

.header-info {
    display: flex;
    align-items: center;

    position: relative;

    margin-left: auto;

    height: 100%;
}

.separator {
    display: inline-block;
    /* width: 1px;
    min-height: 100%;
    background: color-mix(in oklab, var(--bg-color) 75%, transparent 25%); */

    margin: 0 10px;
}

main {
    width: 100%;

    display: grid;

    grid-template-columns: minmax(0, 1fr) min-content;
    grid-template-rows: minmax(0, 1fr) min-content;

    padding: 10px;
    gap: 10px;

    &.hidden {
        display: none;
    }
}

.loading {
    padding: 10px;
}

button {
    border: 1px solid var(--bg-color);
    background: var(--text-color);
    color: var(--bg-color);

    border-radius: 5px;

    &:hover {
        border-color: var(--bg-color);
        background: var(--bg-color);
        color: var(--text-color);
    }

    &:focus {
        outline: 2px solid var(--accent-blue);
    }
}

input, select, textarea {
    font: inherit;
    padding: 5px;

    border: 1px solid var(--bg-color);
    background: var(--text-color);
    color: var(--bg-color);

    border-radius: 5px;

    &:hover, &:focus {
        border-color: var(--bg-color);
        background: var(--bg-color);
        color: var(--text-color);
    }

    &:hover {        
        outline: none;
    }

    &:focus {
        outline: 2px solid var(--accent-blue);
    }
}

a {
    color: var(--bg-color);
    text-decoration: none;

    &:hover {
        background: var(--bg-color);
        color: var(--accent-cream);
    }
}

.home-link {
    margin-right: 10px;
    padding: 10px;
}

/* panels */

.panel {
    min-width: 0;
    min-height: auto;
}

.gallery-list {
    grid-column: 1 / 2;
    grid-row: 1 / 2;

    display: grid;

    gap: 10px;
    
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.options {
    grid-column: 2 / 3;
    grid-row: 1 / 3;

    min-width: 250px;
    
    background: var(--accent-cream);
    color: var(--bg-color);

    padding: 10px;

    display: flex;
    flex-direction: column;
}

.option-section:not(.tag-search-container) {
    border-left: 2px solid var(--bg-color);
    padding-left: 10px;
    margin-top: 10px;
}

.option-section-title {
    padding-bottom: 5px;
    font-weight: bold;
    margin-left: -12px;
    background: var(--accent-cream);
}

.option-column {
    display: flex;
    gap: 10px;

    align-items: center;

    padding: 5px;

    input, select {
        flex: 1;
    }
}

.tag-search-container {
    position: relative;
}

.tag-search-submit {
    aspect-ratio: 1 / 1;
        
    position: absolute;
    right: 0;

    height: 100%;

    border: none;
    background: none;

    cursor: pointer;
}

input[type='textbox'].tag-search {
    width: 100%;
    padding-right: 35px;
}

.tag-search:is(:hover, :focus) ~ .tag-search-submit {        
    border-color: var(--bg-color);
    background: var(--bg-color);
    color: var(--text-color);
}

.tag-search:has(+ .tag-search-submit:hover) {
    border-color: var(--bg-color);
    background: var(--bg-color);
    color: var(--text-color);
}

.date-filter-container .option-column {
    justify-content: space-between;
}
.date-filter-container input[type='date'] {
    max-width: 70%;
}

.pagination {
    grid-column: 1 / 2;
    grid-row: 2 / 3;    

    background: var(--accent-cream);
    color: var(--bg-color);

    padding: 10px;

    display: flex;
    flex-direction: row;

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

    height: min-content;

    user-select: none;

    button {        
        aspect-ratio: 1 / 1;
        width: 35px;
    }

    .page-number {
        display: inline;
        margin: 0 10px;
    }

    input[type='number'] {
        -webkit-appearance: textfield;
        -moz-appearance: textfield;
        appearance: textfield;

        padding: 5px;
        font: inherit;

        field-sizing: content;
        width: auto;
        max-width: 10ch;

        border: 1px solid var(--bg-color);
        background: var(--text-color);
        color: var(--bg-color);

        border-radius: 5px;

        &:hover, &:focus {
            border-color: var(--bg-color);
            background: var(--bg-color);
            color: var(--text-color);
        }

        &:hover {        
            outline: none;
        }

        &:focus {
            outline: 2px solid var(--accent-blue);
        }

        &::-webkit-inner-spin-button,
        &::-webkit-outer-spin-button {
            -webkit-appearance: none;
        }
    }
}

/* inner elements */

.gallery-entry-container {
    display: flex;
    justify-content: center;

    user-select: none;

    .gallery-entry {
        aspect-ratio: 1 / 1;    

        background-position: center;
        background-size: cover;    

        border-radius: 5px;

        min-width: 0;
        width: 250px;
        
        position: relative;

        color: inherit;

        &:hover :is(.entry-info, .entry-name) {
            background-color: 
                color-mix(
                    in oklab, 
                    var(--accent-cream) 80%, 
                    transparent 20%
                );
            color: var(--bg-color);
        }
    }

    .entry-info, .entry-name {
        display: flex;

        width: 100%;
        height: fit-content;

        padding: 5px;

        position: absolute;

        background-color: 
            color-mix(
                in oklab, 
                var(--bg-color) 80%, 
                transparent 20%
            );

        p {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }

    .entry-info {
        top: 0;
        border-radius: 4px 4px 0 0;
    }

    .entry-name {
        bottom: 0;
        border-radius: 0 0 4px 4px;
    }
}

.no-results {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;

    grid-column: 1 / -1;
}

@media (max-width: 45em) {
    /* body {
        background: red;
    } */

    header h1, footer h1 {
        display: none;
    }

    footer {
        justify-content: space-between;

        .separator {
            display: none;
        }

        .header-info {
            display: none;
        }
    }

    main {
        display: flex;
        flex-direction: column;
    }

    .gallery-list {   
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .gallery-entry {
        width: 150px;
    }
}