/* ===== CSS File for Checklists ======================================== */

section {
    position: fixed;
    top: 0px;
    bottom: 0px;
    height: 100%;
    width: 100vw;
    transition: left .5s;
    padding: 10px;
}

.section-right {
    left: 100vw;
}

.section-left {
    left: -100vw;
}

.section-viewport {
    left: 0px !important;
}

/* ===== Global Styles ================================================== */


* {
    font-family: Sans-Serif;
    font-size: large;
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
    width: 100%;
    /* overflow: scroll; */
    margin: 0px;
    padding: 10px;
    background-color: #ffffcc;
}

.title-bar {
    background-color: #ffff99;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    margin: 0 -10px;
    padding: 10px;
}

.scrollable {
    overflow-y: scroll;
    padding-right: 15px; /* Ensures Scrollbar does not interfere with right hand control buttons and checkboxes */
}


/* ===== display Checklist =============================================== */

.checklist {
    display: grid;
    grid-template-rows: auto auto 1fr auto auto;
    height: 100%;
}

.checklist-title {
    margin-bottom: 20px !important;
    overflow-y: scroll;
}

.checklist-title * {
    width: 100%;
    font-size: larger;
}

.checklist-list {
    overflow-y: scroll;
    padding-right: 15px; /* Ensures Scrollbar does not interfere with right hand control buttons and checkboxes */
}

.checklist-item {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr auto;
    column-gap: 15px;
    margin: 5px 0px;
}

.checklist-item * {
    min-width: 0; /* Ensures that input is not too long forcing buttons to vertically allign. */
}

.checklist-buttons {
    display: grid;
    grid-template-columns: 25% 50% 25%;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #ffff99;
}

[data-view="check"] [data-visibility="manage"] {
    display: none;
}

[data-view="manage"] [data-visibility="check"] {
    display: none;
    height: 100%;
}


/* ===== Manage Lists ================================================**== */

#showCompleted {
    display: block;
}

#showCompleted:not(:checked) + * > .displaylist-item:has(.displaylist-checkbox-item:checked) {
    background-color: blue;
    display: none;
}

.header,
.controls {
    display: flex;
    justify-content: space-between;
    background-color: #ffff99;
    margin: 0 -10px;
    padding: 10px;
}

.displaylist {
    display: grid;
    grid-template-rows: auto auto 1fr auto auto;
}

.displaylist-title {
    margin-bottom: 20px !important;
}

.displaylist-title * {
    width: 100%;
    font-size: larger;
}


.displaylist-all {
    overflow-y: scroll;
}

.displaylist-item {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr auto;
    column-gap: 15px;
    margin: 5px 0px;
    padding: 10px;
}

.displaylist-buttons {
    display: grid;
    grid-template-columns: 25% 50% 25%;
    margin-top: 20px;
    margin-bottom: 20px;
}

[data-view="check"] [data-visibility="move"],
[data-view="check"] [data-visibility="delete"] {
    display: none;
}

[data-view="move"] [data-visibility="check"],
[data-view="move"] [data-visibility="delete"] {
    display: none;
}

[data-view="delete"] [data-visibility="check"],
[data-view="delete"] [data-visibility="move"] {
    display: none;
}

/* ===== Menu ======================================================= */

.menu-item {
    width: 100%;
    margin: 5px 0px;
    border-bottom: 1px solid;
    padding: 10px;
}