@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');

:root {
    touch-action: pan-x pan-y; /* Zoom disable 1/2 */
    height: 100% /* Zoom disable 2/2 */

    --dark-bg-color: #17181f;
    --dark-accent-color: #ffb34e;
    --dark-text-color: #f1f7f1;
    --dark-extra-bg-color: hsl(233, 15%, 20%);
    --dark-extra-border-color: hsl(233, 15%, 40%);
    --dark-extra-bg-active-color: hsl(233, 15%, 30%);
    --dark-item-bg-color: hsl(191, 38%, 15%);
    --dark-item-border-color: hsl(191, 38%, 30%);
    --dark-item-bg-hilight-color: hsl(39, 38%, 15%);

    --light-bg-color: #eeeeee;
    --light-accent-color: #346fa2;
    --light-text-color: #262c37;
    --light-extra-bg-color: #c8bbac;
    --light-extra-border-color: hsl(32, 20%, 43%);
    --light-extra-bg-active-color: hsl(32, 20%, 83%);
    --light-item-bg-color: hsl(69, 37%, 80%);
    --light-item-border-color: hsl(69, 37%, 40%);
    --light-item-bg-hilight-color: hsl(69, 37%, 50%);
}

body { /* Mod */
    background-color: var(--dark-bg-color);
    color: var(--dark-text-color);
    padding: 1em;
    font-family: 'Roboto', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size:0.9em; /* Perus fonttikoko */
}

@media (prefers-color-scheme: light) {
    body {
        background-color: var(--light-bg-color);
        color: var(--light-text-color);
    }
}

#container {
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
}

@media only screen and (min-width: 1024px) {
    #container {
        width: 600px; /* Laatikoiden leveys työpöytäseleimella */
    }
}

#add-new-item-form { /* Add item -boksi */
    display: flex;
    flex-direction: row;
    gap: 0.5em;
    position: relative;
}

#add-new-item-form input { /* Add item -boksi */
    background-color: var(--dark-extra-bg-color);
    border: 3px solid var(--dark-extra-border-color);
    color: var(--dark-text-color);
    flex-grow: 1;
    border-radius: 5px; /* Reinojen pyöristys */
    padding: 0.5em; /* Korkeus */
}

@media (prefers-color-scheme: light) {
    #add-new-item-form input {
        background-color: var(--light-extra-bg-color);
        border: 3px solid var(--light-extra-border-color);
        color: var(--light-text-color);
    }
}

/* Mod */
#add-new-item-form button { /* "plus" -naappi */
    background-color: var(--dark-extra-bg-color);
    border: 3px solid var(--dark-extra-border-color);
    color: var(--dark-text-color);
    font-weight: bold;
    border-radius: 5px;
    width: 4em;
}

#add-new-item-form button:active {
    background-color: var(--dark-extra-bg-active-color);
}

@media (prefers-color-scheme: light) { /* Mod */
    #add-new-item-form button {
        background-color: var(--light-extra-bg-color);
        border: 3px solid var(--light-extra-border-color);
        color: var(--light-text-color);
    }
    #add-new-item-form button:active {
        background-color: var(--light-extra-bg-active-color);
    }
}

#auto-complete { /* Drop-down lista */
    background-color: rgba(0, 0, 0, .7); /* Drop-down listan väritys */
    backdrop-filter: blur(3px);
    box-shadow: 0 20px 50px 0 #000;
    position: absolute;
    top: 3.3em; /* Laatikon alkukohta */
    left: 0;
    width: 100%;
    max-height: 30vh; /* Ehdotusten maksimi"määrä" */
    overflow-y: scroll;
    border: 3px solid var(--dark-extra-border-color);
    border-radius: 5px;
    z-index: 100;
}

@media (prefers-color-scheme: light) {
    #auto-complete {
        color: #27262c;
        border: 3px solid #444250;
        background-color: hsla(0, 0%, 90%, 0.7);
    }
}


#auto-complete ul { /* Drop-down tekstien sijoitus*/
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#auto-complete li {
    margin-bottom: 0.2em; /* Listakohtien välys ala */
    border-radius: 5px;
    display: grid;
    grid-template-columns: 1fr auto;
}

#auto-complete li span { /* Mod */
    padding: 0.3em; /* Listakohtien välys ylä&ala*/
}

#auto-complete li .delete {
    margin-right: 1em;
    width: 1em;
    align-self: center;
}

#auto-complete li:hover, #auto-complete li.selected {
    background-color: rgba(70, 70, 70, 0.5); /* Mod */
    text-shadow: 0 0 5px #fff;
}

#bulk-actions {
    display: grid;
    grid-template-columns: auto 1fr auto;
    margin-top: 1em; /* Add -boksin jälkeinen välys */
}

#bulk-actions #delete-all {
    grid-column-start: 3;
}
#bulk-actions button {
    background-color: var(--dark-extra-bg-color);
    border: 1px solid var(--dark-extra-border-color);
    color: var(--dark-text-color);
    font-size: 0.8em;
    width: auto;
}

#bulk-actions button:active {
    background: var(--dark-extra-bg-active-color);
}

@media (prefers-color-scheme: light) {
    #bulk-actions button {
        background-color: var(--light-extra-bg-color);
        border: 1px solid var(--light-extra-border-color);
        color: var(--light-text-color);
        
    }
    #bulk-actions button:active {
        background: var(--light-extra-bg-active-color);
    }
}


#sortable-list {
    list-style-type: none;
    padding: 0;
}

/* Mod */
#sortable-list li { /* Ostoslistan muotoilu */
    background-color: var(--dark-item-bg-color);
    border: 1px solid var(--dark-item-border-color);
    color: var(--dark-text-color);
    padding: 0.4em; /* Listan laatikon korkeus */
    border-radius: 10px; /* Laatikon reunan pyöristys */
    margin-bottom: 0.3em; /* Listan laatikon välys */
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 0.5em; /* Check-boksin ja listanimen välys */
    transition: all 0.3s;
}

@media (prefers-color-scheme: light) {
    #sortable-list li {
        background-color: var(--light-item-bg-color);
        border: 1px solid var(--light-item-border-color);
        color: var(--light-text-color);
    }
}


#sortable-list li.on-drag { /* Mod */
    background-color: var(--dark-item-bg-hilight-color);
    transform: scale(1.03, 1.35); /* Siirrettävän kohteen uuden paikan koko */
    opacity: 1;
    box-shadow: 0 0 5px rgba(0, 0, 0, .1);
}

@media (prefers-color-scheme: light) {
    #sortable-list li.on-drag {
        background-color: var(--light-item-bg-hilight-color);
    }
}

#sortable-list li span {
    overflow-wrap: anywhere;
}

#sortable-list li .delete {
    width: 1.2em;
    align-self: center;
    z-index: 99;
}

#sortable-list li .drag-handle { /* Listakohteiden siirtokuvake */
    width: 30px;
    height: 100%;
    background-image: url("move-white.png");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.5;
    padding-left: 1em;
    margin-left: 1em;
    cursor: pointer;
}

@media (prefers-color-scheme: light) {
    #sortable-list li .drag-handle {
        background-image: url("move-black.png");
    }
}

input[type="checkbox"] { /* Check-box asettelu */
    appearance: none;
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 1.15em;
    height: 1.15em;
    border: 0.1em solid currentColor;
    border-radius: 0.25em;
    transform: translateY(.18em);
    display: grid;
    place-content: center;
    cursor: pointer;
}

input[type="checkbox"]::before { /* Check-mark asettelu */
    content: "";
    width: 0.85em; /* Ruksin koko */
    height: 1.65em; /* Ruksin koko */
    transform: scale(0); /* Ruksin koko ennen ruksausta animaatiota varten */
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--dark-accent-color);
    transform-origin: bottom left;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

@media (prefers-color-scheme: light) {
    input[type="checkbox"]::before {
        box-shadow: inset 1em 1em var(--light-accent-color);
    }
}

input[type="checkbox"]:checked::before {
    transform: scale(1.2);
}

input[type="checkbox"]:checked+span { /* Checked yliviivaus */
    text-decoration: line-through;
    opacity: 0.3; /* Yliviivaton tekstin läpinäkyvyys */
}

.delete-item,
.delete-favorite { /* Päälistan delete nappi */
    width: 1.5em;
    height: 1.5em;
    background-image: url("trash-can-white.png");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.5;
    cursor: pointer;
}

.delete-item:hover, .drag-handle:hover {
    opacity: 0.8;
}

.delete-favorite { /* Drop-listan delete nappi */
    align-self: center;
    margin-right: 1em;
    width: 1.5em;
    height: 1em;
}

@media (prefers-color-scheme: light) {
    .delete-item,
    .delete-favorite {
        background-image: url("trash-can-black.png");
    }
}

.hide {
    display: none;
}

#footer { /* Mod / Miksi tää pitäis olla edes */
    border-top: 1px solid var(--dark-extra-border-color);
    font-size: 0.8em;
    text-align: left;
    padding-top: 2em;
}