/**
 * SPDX-FileCopyrightText: 2025 Paul Holzinger
 * SPDX-License-Identifier: AGPL-3.0-or-later
 */

body {
    font-size: 1.1rem;
    min-width: 400px;
}

.category {
    background-color: #f8f9fa;
    border-style: solid;
    border-color: #8f8f8f;
    border-width: thin;
    border-radius: 0.25em;
    padding: 0.25em;
    margin: 0.25em;
    break-inside: avoid;
    /*touch-action: none;*/
}

.category-header {
    margin: 0;
    padding: 0 0 0.5em 0.25em;
}

.item {
    /* display: grid;
    overflow-wrap: anywhere; */
    display: flex;
    gap: 1%;
    overflow-wrap: break-word;
    padding-bottom: 0.25em;
}

.input-prefix {
    min-width: 6ch;
    flex: 0 0 15%;
}

.div-name {
    min-width: 20ch;
    flex: 0 0 60%;
}

.input-name {
    width: 100%;
}

.delete-button {
    color: red;
    background-color: transparent;
    border-color: red;
    border-radius: 25%;
    border-style: solid;
    font-weight: 1000;
}

.add-button {
    color: green;
    background-color: transparent;
    border-color: green;
    border-radius: 25%;
    border-style: solid;
    font-weight: 1000;
    margin: 0.1rem;
}

.buttons {
    display: flex;
    margin-top: 1em;
}

.main-button {
    flex: 33%;
    margin: 0 2.5%;
    display: inline-block;
    font-size: 1.3rem;
    border-radius: .3rem;
    padding: .5rem;
}

.blue {
    color: white;
    background-color: blue;
    border-color: blue;
}

.red {
    color: white;
    background-color: red;
    border-color: red;
}

.green {
    color: white;
    background-color: green;
    border-color: green;
}


@media print {
    #main {
        columns: 2 auto;
    }

    button {
        display: none !important;
    }

    .category {
        border-style: none;
    }

    .category-header {
        padding-bottom: 0.15em;
    }

    /* don't print empty category  */
    .category:has(div:empty) {
        display: none;
    }
}

/*the container must be positioned relative:*/
.autocomplete {
    position: relative;
    display: inline-block;
    outline: none;
}

.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
}

.autocomplete-items div {
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
}

/*when hovering an item:*/
.autocomplete-items div:hover {
    background-color: #e9e9e9;
}

.autocomplete-items button {
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: normal;
    border: none;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow: visible;
    text-align: inherit;
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
    background-color: DodgerBlue !important;
    color: #ffffff;
}