:root {
    --bg-color: #eee;
    --text-color: #123;
    --text-color-weak: #345;
    --error-color: #f0cbd8d5;
    --success-color: #bde1bddc;
    --item-bg-color: #e9e9e9;
    --item-border-color: #0006;
    --item-selected-bg-color: #faffdd;
    --outline-color: #707884ab;
    --outline-color-selected: #06F;
    --aside-width: calc(8rem + 10%);
}

*,
*::after,
*::before {
    box-sizing: border-box;
}

html {
    height: 100hv;
}

body {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-areas: "a a a" "b c d" "e e e";
    grid-template-columns: var(--aside-width) auto var(--aside-width);
    grid-template-rows: 2.5rem calc(100% - 4rem) 1.5rem;
    height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
}

body.tasks-right {
    grid-template-areas: "a a a f" "b c d f" "e e e f";
    grid-template-columns: var(--aside-width) auto var(--aside-width) var(--aside-width);
}

body.tasks-left {
    grid-template-areas: "f a a a" "f b c d" "f e e e";
    grid-template-columns: var(--aside-width) var(--aside-width) auto var(--aside-width);
}

body.tasks-bottom {
    grid-template-areas: "a a a" "b c d" "e e e" "f f f";
    grid-template-rows: 2.5rem auto 1.5rem calc(10rem + 10%);
}

body.tasks-float {
    overflow: hidden;
}
body > header {
    background-color: #f0f0f0;
    grid-area: a;
    box-shadow: 0px -1px 0 0px #0003 inset;
}

body > aside {
    box-shadow: 1px 0 0 0px #0003;
    grid-area: b;
    overflow: auto;
    background-color: #fafafa;
}

body > main {
    grid-area: c;
}

body > aside:last-of-type:not(:first-of-type) {
    box-shadow: -1px 0 0 0px #0003;
    grid-area: d;
}

body > footer {
    box-shadow: 0px 1px 0 0px #0003 inset;
    background-color: #e0e0e0;
    grid-area: e;
    display: flex;
    align-items: center;
    padding: 0 1rem;
}

section.tasks {
    grid-area: f;
    padding: 0.5em;
    background-color: var(--text-color);
    color: var(--bg-color);
    height: 100%;
    position: relative;
}

body.tasks-float>section.tasks {
    position: absolute;
    width: calc(40vw + 6em);
    height: calc(30vh + 3em);
    padding: 0.5em;
    box-shadow: 0 0 1rem #0006;
    border-radius: 0.5em;
}

button.close {
    position: absolute;
    right: 0.5rem;
    top: 0.75rem;
    height: 1.25rem;
    width: 1.25rem;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0.25rem;
}
button.close::before {
    content: '\2715';
}

button.add::before {
    content: '\FF0B';
}

body>section.tasks h3 {
    height: 2rem;
    padding: 0.25rem;
    margin: 0;
    align-items: center;
    display: inline-block;
}

.tasks-left>section.tasks h3,
.tasks-right>section.tasks h3 {
    display: block;
}

body>section.tasks .switch {
    display: inline-flex;
    width: auto;
    white-space: nowrap;
    margin: 0.5em 0 0.5em 1em;
}

.tasks-left>section.tasks .switch,
.tasks-right>section.tasks .switch {
    margin: 0em 0 0.5em 0.25em;
}

body>section.tasks ul {
    height: calc(100% - 4rem);
    overflow: auto;
    padding: 0.25em;
    margin: 0;
    list-style: none;
    font-size: 0.9em;
}

.tasks-left>section.tasks ul,
.tasks-right>section.tasks ul {
    height: calc(100% - 5.5rem);
}

section.tasks li {
    margin: 0 0 1em 0;
    padding: 0.5em;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 0.25em;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tasks-float section.tasks li {
    flex-wrap: nowrap;
}

.tasks-float section.tasks .del {
    margin: 0 0 0 auto;
}

section.tasks li input {
    margin: 0;
    width: 1em;
    flex: 0 1 1em;
}

section.tasks li label {
    flex: 1 0;
}

section.tasks form {
    width: 100%;
    height: 2rem;
    display: flex;
    flex-flow: row nowrap;
    padding: 0 0 0.5rem 0;
}

section.tasks .del {
    font-size: 0.65em;
    font-weight: 500;
    text-transform: uppercase;
    background-color: rgb(244, 210, 210);
    border: none;
    border-radius: 0.25em;
    margin: 0 0 0 2.25em;
    cursor: pointer;
}


body>aside ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-flow: column nowrap;
    gap: 0.5em;
}

body>aside li {
    border: 1px solid #ccc;
    padding: 0.5rem;
    cursor: pointer;
    background-color: var(--item-bg-color);
    padding: 0.25em;
    border: 1px solid var(--item-border-color);
    border-radius: 0.25rem;
}
body>aside li>a {
    display: block;
    margin: -0.25em;
    padding: 0.5em;
}

body>aside li:not(.selected):hover {
    outline: 1px dashed var(--outline-color-selected)
}

body>aside li.selected {
    background-color: var(--item-selected-bg-color);
    cursor: default;
}

body>aside li h4 {
    font-weight: 400;
}

body>aside li.selected > details h4 {
    font-weight: 600;
}

body>aside li.drag-over {
    opacity: 0.6;
}

body>aside li {
    position: relative;
}

body>aside li[draggable="true"] {
    padding: 0.5em 0.75em 0.5em 1.25em;
}

body>aside li[draggable="true"]::before {
    content: "";
    background: url('/app/assets/drag-handler.svg') repeat-y;
    cursor: grab;
    position: absolute;
    height: calc(100% - 1em);
    top: 0.5em;
    left: 0.25em;
    width: 0.75em;
}

body>aside summary {
    cursor: pointer;
    width: fit-content;
}

body>aside summary h4:hover {
    text-decoration: underline;
}

body>aside h4 {
    margin: 0;
    display: inline;
}

h1 {
    font-size: 1rem;
}

button {
    cursor: pointer;
}

form {
    margin: 0.5em 0 0 0;
}

input,
select,
textarea {
    font: inherit;
    flex: 6em;
    width: 1em;
}

textarea {
    field-sizing: content;
    resize: vertical;
}

form {
    font-size: 0.8em;
    display: flex;
    flex-flow: column nowrap;
    gap: 1em;
    line-height: 1;
}

.field {
    display: flex;
    gap: 0.25em;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
}

.field p {
    font-size: 0.9em;
    color: var(--text-color-weak);
    font-style: italic;
    margin: 0.25em 0;
    line-height: 1.2;
}
.field textarea {
    flex: 1 0 100%;
}

fieldset {
    width: 100%;
    border: solid 1px var(--item-border-color);
}

input:checked+label {
    font-weight: 600;
}

input[type='radio'] {
    accent-color: var(--outline-color-selected)
}


.switch {
    flex-wrap: nowrap;
    justify-content: space-between;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
    flex: 0;
}

.slider {
    position: relative;
    cursor: pointer;
    flex: 0 0 1.75em;
    height: 1em;
    background-color: var(--outline-color);
    transition: .2s;
}

.slider.round {
    border-radius: 1em;
}

.slider:before {
    position: absolute;
    content: "";
    height: 0.75em;
    width: 0.75em;
    left: 0.125em;
    bottom: 0.125em;
    background-color: white;
    transition: .2s;
}

.slider.round:before {
    border-radius: 50%;
}

input:checked+.slider:before {
    transform: translateX(0.75em);
}

input:checked+.slider {
    background-color: var(--outline-color-selected);
}

input:focus+.slider {
    box-shadow: 0 0 1px var(--outline-color-selected);
}

dialog {
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 0 0.5em #0009;
    position: fixed;
    top: 2rem;
    left: calc(7rem + 8%);
    margin: 0;
    z-index: 1;
}

dialog button+h4 {
    margin: 0 2rem 1rem 0;
    display: block;
}

dialog .add-buttons {
    max-width: 20rem;
    display: flex;
    flex-flow: column nowrap;
    gap: 0.5rem;
}
dialog .add-buttons div {
    display: flex;
    flex-flow: row wrap;
    gap: 0.5rem;
    margin: 0 0 1rem 0;
}
dialog h5 {
    margin: 0;
    padding-bottom: 0.25rem;
    font-weight: 300;
    color: var(--text-color-weak);
    border-bottom: 1px solid var(--outline-color);
}

.buttons {
    display: flex;
    gap: 0.5em;
    justify-content: stretch;
    padding: 0 0 1em 0;
}
details .buttons {
    padding: 0 0.5em 1em 0.5em;
}

.buttons button {
    flex-grow: 1;
}