input[type="text"], input[type="password"], button{
    padding: var(--ui-elements-padding);
    border-radius: var(--ui-elements-roundness);
    border: var(--ui-elements-border-width) solid var(--clr-desat);
    background-color: var(--clr-desat);
    color: var(--clr-text);
}
input[type="text"], input[type="password"]{
    width: 100%;
}
input[type="text"]:hover, input[type="password"]:hover{
    border-color: var(--clr);
}
input[type="text"]:focus, input[type="password"]:focus{
    border-color: var(--clr-accent);
    background-color: var(--clr-accent-desat);
}
input[type="text"]::placeholder, input[type="password"]::placeholder{
    color: oklch(100% 0.00011 271.152 / 0.625);
}

input[type="range"]{
    appearance: none;
    width: 100%;
    height: 1rem;
    min-width: 8rem;
    background-color: var(--clr-desat);
    border-radius: var(--ui-elements-roundness);
    outline: none;
}
input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 1rem;
    height: 1rem;
    background-color: var(--clr-accent);
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition-duration-button) ease;
}
input[type="range"]:hover::-webkit-slider-thumb {
    scale: 1.2;
}
input[type="range"]:active::-webkit-slider-thumb {
    scale: 0.9;
}


button{
    cursor: pointer;
    background-color: transparent;
    border: var(--ui-elements-border-width) solid var(--clr-desat);
    transition: all var(--transition-duration-button) ease;
}
button:hover{
    border-color: var(--clr);
    background-color: var(--clr-desat);
    scale: 1.05;
}
button:active, button:focus-visible{
    background-color: var(--clr);
    border-color: transparent;
    scale: 0.95;
    color: var(--clr-text-alt);
}
button.primary{
    background-color: var(--clr-accent-desat);
    border-color: transparent;
}
button.primary:hover{
    border-color: var(--clr-accent);
}
button.primary:active, button.primary:focus-visible{
    background-color: var(--clr-accent);
    border-color: var(--clr-accent);
}



.table-container{
    border-radius: var(--ui-elements-roundness);
    border: var(--ui-elements-border-width) solid var(--clr-desat);
    overflow: hidden;
}
table{
    border-collapse: collapse;
}
td{
    border-top: var(--ui-elements-border-width) solid var(--clr-desat);
    border-left: none;
    border-right: none;
}
tr:last-child td{border-bottom: none;}
table:has(th) > *:nth-of-type(2) td{border-top: none;}
table:not(:has(th)) > *:nth-of-type(1) td{border-top: none;}
th{
    background-color: var(--clr-desat);
    color: var(--clr-text);
    font-weight: bold;
    text-align: left;
    font-size: 1.1rem;
}
td, th{
    padding: var(--ui-elements-padding);
}
.noteTitle{
    min-width: 8rem;
    max-width: 50vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dateCell, th{
    white-space: nowrap;
}