:root {
    --background-color: #edf5ef;
    --primary-color: #20a126;
    --alt-background-color: #c7dccd;

    --border-width: 2px;
    --border-radius: 8px;
    --border-color: #1d2123;

    --text-color: #1d2123;

    --detail-color: #727779;
    --info-color: #a9abab;
    --expired-color: #97da97;
    --complete-color: #3583de;
    --warning-color: #f69153;
    --warning-background: #ffefe7;
}

* {
    font-family: 'DM Sans', sans-serif;
    box-sizing: border-box;
    font-size: 16px;
    color: var(--text-color);
}

html {

}

body {
    margin: 20px;
    margin-bottom: 100px;
}

hr {
    width: 100%;
    height: var(--border-width);
    background-color: var(--border-color);
    border: none;
}

a {
    text-decoration-thickness: var(--border-width);
    color: var(--primary-color);
    font-weight: 600;
}

a.navigate {
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-size: 26px 26px;
    padding-left: 30px;
    color: var(--text-color);
}

a.navigate.back {
    background-image: url(/s/views/svg/arrow_back.svg);
}

nav {
    padding: 10px 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*border: var(--border-width) solid var(--info-color);*/
    background-color: var(--background-color);
    border-radius: var(--border-radius);
}

nav a {
    color: var(--text-color);
    text-decoration: none;
}

h1 {
    font-size: 36px;
}

h2 {
    font-size: 28px;
}

h3 {
    font-size: 22px;
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 16px;
}

input, textarea, select, button {
    outline: none !important;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 10px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    background-color: white;
    width: 100%;
    font-size: 16px;
}

button {
    text-align: center;
}

input[type=checkbox] + label {
    display: flex;
    align-items: center;
}

label {
    font-weight: 600;
    display: flex;
    justify-content: start;
    flex-flow: column;
    width: 100%;
    gap: 5px;
}

label:not(:has(*)) {
    margin-bottom: 5px;
}

label:has(input:not([type=checkbox])) {
    display: flex;
    flex-flow: column;
    width: 100%;
    align-items: start;
    gap: 5px;
    font-weight: 800;
}

label:has(input[type=checkbox]) {
    display: flex;
    flex-flow: row;
    align-items: center;
}

input[type=checkbox] {
    -webkit-appearance: none;
    appearance: none;
    background-size: 22px;
    background-position: 0 50%;
    background-repeat: no-repeat;
    background-image: url('/s/views/svg/checkbox.svg');
    background-color: transparent;
    border: none;
    width: 26px;
    height: 26px;
    aspect-ratio: 1 / 1;
    margin: 0;
    padding: 0;
}

input[type=checkbox]:checked {
    background-image: url('/s/views/svg/checkbox_checked.svg');
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-repeat: no-repeat;
    background-position: calc(100% - 8px) 50%;
    background-size: 26px 26px;
    background-image: url('/s/views/svg/caret_down.svg');
}

select::-ms-expand {
    display: none;
}

input::placeholder, textarea::placeholder {
    color: var(--detail-color);
}

input[type=submit], button {
    cursor: pointer;
    background-color: var(--primary-color);
    color: white;
    border: none;
    box-shadow: #1d2123 0 var(--border-width) 0  0;
}

div.input_number {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 10px;
}

div.input_number div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

button.number_increment {
    background-color: var(--info-color);
    padding: 0;
    width: 45px;
    aspect-ratio: 1 / 1;
    height: 45px;
    justify-content: center;
    align-items: center;
    display: flex;
    box-shadow: none;
}

button.mini {
    width: max-content;
    background-color: white;
    color: var(--primary-color);
    border: var(--border-width) solid var(--primary-color);
    box-shadow: var(--primary-color) 0 var(--border-width) 0  0;
}

button.number_increment img {
    width: 24px;
}

input[type=submit]:active, button:active {
    box-shadow: none;
    transform: translateY(var(--border-width));
}

input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
    margin: 0;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
}



div.list-control {
    display: flex;
    width: min-content;
    gap: 10px;
    justify-content: space-between;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--background-color);
    border-radius: var(--border-radius);
    padding: 8px;
}

div.list-control button {
    background-color: white;
    box-shadow: none;

    height: 50px;
    width: 60px;
}

div.sort_buttons {
    display: flex;
    flex-direction: row;
    margin: 30px 0;
    gap: 10px;
}

div.navigation-buttons {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

div.navigation-buttons button {
    background-color: var(--background-color);
    color: var(--text-color);
    box-shadow: none;
    height: 50px;
    /*width: 60px;*/
    width: max-content;
    padding-left: 44px;
    background-position: 5px 50%;
    font-weight: 800;
}

div.navigation-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10px;
}

div.navigation-grid > a, div.navigation-grid > div {
    display: grid;
    grid-template-columns: auto 1fr min-content;
    grid-template-areas: 'icon title item-count';
    grid-gap: 1rem;
    justify-content: center;
    align-items: center;
    background-color: var(--background-color);
    border-radius: 8px;
    padding: 10px;
    text-decoration: none;
    color: var(--text-color);
    font-weight: 700;
    font-size: 18px;
}

.navigation-grid .quantity-buttons {
    grid-area: buttons;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
    height: 100%;
}

.navigation-grid .quantity-buttons button {
    background-color: var(--background-color);
    box-shadow: none;
    height: 100%;
    width: 24px;
    background-size: 30px;
}

.navigation-grid .quantity-buttons button.tick {
    background-size: 24px;
}

.navigation-grid .quantity-buttons button.refresh {
    background-size: 24px;
}

.navigation-grid .item {
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 'item-count title buttons'
                        'item-count shop buttons';
    gap: 0;
}

.navigation-grid .item div.title {
    font-size: 20px;
}

div.navigation-grid div.title {
    grid-area: title;
}

div.navigation-grid div.shop {
    height: 100%;
    display: flex;
    align-items: center;
    border-radius: var(--border-radius);
    grid-area: shop;
    font-weight: 700;
}

div.navigation-grid div.shop div.inactive {
    color: var(--info-color);
}

div.navigation-grid div.icon img {
    width: 50px;
    height: 50px;
}

div.navigation-grid div.icon {
    width: 50px;
    height: 50px;
    grid-area: icon;
}

div.navigation-grid div.item_count {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 5px;
    grid-area: item-count;
    height: 100%;
    margin-right: 10px;
    justify-content: center;
}

div.navigation-grid div.item_count:has(span) {
    display: flex;
    justify-content: center;
    align-items: center;
}

div.navigation-grid div.item_count span {
    padding: 2px 6px;
    border-radius: 8px;
    display: flex;
    aspect-ratio: 1 / 1;
    width: 30px;
    height: 30px;
    justify-content: center;
    align-items: center;
}

div.navigation-grid div.item_count div.quantity {
    padding: 2px 6px;
    justify-content: center;
    align-items: center;
    background-color: var(--expired-color);
    font-size: 24px;
    aspect-ratio: 1 / 1;
    height: 100%;
    display: flex;
    border-radius: var(--border-radius);
}

div.navigation-grid div.item_count div.quantity.inactive {
    background-color: var(--background-color);
    color: var(--info-color);
}

div.navigation-grid div.item_count span.items_left { background-color: var(--expired-color); }
div.navigation-grid div.item_count span.items_left.inactive { background-color: var(--info-color); color: white; }


div.checklist_container {
    display: flex;
    flex-direction: column;
    gap: 10px;

}

div.checklist_container label {
    background-color: var(--expired-color);
    border-radius: var(--border-radius);
    padding: 20px;
    width: 100%;
}

div.checklist_container label:has(input[type="checkbox"]:checked) {
    background-color: var(--background-color);
}

div.notes_container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: 20px;
    margin: 20px 0;
}

div.notes_container:not(:has(article)) {
    display: block;
}

article.note {
    display: grid;
    background-color: var(--background-color);
    border-radius: var(--border-radius);
    padding: 20px;
    aspect-ratio: 1 / 1;
    height: 100%;
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr auto;
    grid-template-areas: 'note note'
                         'info buttons';
}

article.note.large {
    grid-column: 1 / span 2;
    aspect-ratio: auto;
}

article.note button {
    box-shadow: none;
    background-color: white;
    aspect-ratio: 1 / 1;
    width: 36px;
    background-size: 24px;
    grid-area: buttons;
}

article.note span.icon.pin {
    grid-area: icon_pin;
    height: 24px;
    background-size: 24px;
}

article.note div.info {
    grid-area: info;
    color: var(--detail-color);
    display: flex;
    align-items: end;
    font-size: 14px;
}

article.note.favourite {
    background-color: var(--expired-color);
    grid-template-areas: 'note icon_pin'
                         'info buttons';
}

article.note.favourite div.info {
    grid-area: info;
    color: var(--primary-color);
}

article.note section.content {
    grid-area: note;
}

article.note h3 {
    margin: 0;
    font-size: 18px;

}

div.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    padding: 10px;
    margin: 10px 0;
    border-radius: var(--border-radius);
    background-color: var(--background-color);
}

div.calendar span.day {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 1000;
    color: var(--detail-color);
}

div.calendar .calendar-date {
    background-color: white;
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    font-weight: 700;
    color: var(--text-color);
    text-decoration: none;
}

div.calendar a.calendar-date.active {
    background-color: var(--primary-color);
    color: white;
}

div.calendar a.calendar-date:has(span.warning),
div.navigation-buttons button:has(span.notification),
div.calendar a.calendar-date:has(span.count){
    position: relative;
}

div.calendar a.calendar-date span.warning, div.navigation-buttons button span.notification {
    content: ' ';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 4px solid var(--background-color);
    background-color: var(--warning-color);
    border-radius: 100%;
    left: calc(100% - 14px);
    bottom: calc(100% - 14px);
    position: absolute;
}

div.calendar a.calendar-date span.count {
    content: ' ';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 4px solid var(--background-color);
    background-color: var(--complete-color);
    border-radius: 100%;
    right: calc(100% - 14px);
    bottom: calc(100% - 14px);
    position: absolute;
}

div.navigation-buttons button span.notification {
    background-color: var(--primary-color);
    border: 4px solid white;
}

div.calendar a.calendar-date.expired {
    color: var(--info-color);
}

div.calendar a.calendar-date.active.expired,
div.calendar a.calendar-date.active.complete.expired{
    background-color: var(--expired-color);
    color: var(--primary-color);
    border: none;
}

div.calendar a.calendar-date.focus::before {
    background-image: url('/s/views/svg/caret_down.svg');
    background-size: 36px 36px;
    background-repeat: no-repeat;
    background-position: 50% -8px;
    width: 24px;
    height: 16px;
    content: ' ';
    transform: translate(0%, -22px);
    filter: drop-shadow(0 4px 0px var(--background-color)) drop-shadow(4px -4px 0px var(--background-color)) drop-shadow(-4px -4px 0px var(--background-color));
    display: inline-block;
    position: absolute;
    z-index: 900;
}

div.calendar a.calendar-date.active.complete {
    background-color: var(--expired-color);
    /*border: var(--border-width) solid var(--primary-color);*/
    color: var(--primary-color);
}

div.calendar a.calendar-date.hidden {
    color: white;
}

div.center {
    display: flex;
    justify-content: center;
    flex-flow: column;
}

div.padding {
    padding: 20px 0;
}

div.warning.dialogue {
    background-color: var(--warning-background);
    font-weight: 600;
    padding: 10px;
    color: var(--warning-color);
    border-radius: var(--border-radius);
    width: 100%;
}

div.user-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px;
    border-radius: var(--border-radius);
    border: var(--border-width) solid var(--border-color);
    width: 100%;
}

div.user-list-container {
    width: 100%;
}

div.user-list-container.active {
    display: grid;
}

div.user-list label {
    background-color: var(--background-color);
    display: flex;
    justify-content: start;
    align-items: start;
    padding: 10px;
    border-radius: var(--border-radius);
}

ul.user-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    width: 100%;
    padding: 10px;
    margin: 0;
    border-radius: var(--border-radius);
    border: var(--border-width) solid var(--text-color);
    min-height: 61px;
}

ul.user-list li {
    display: none;
}

ul.user-list li.active {
    display: flex;
}

ul.user-list li button {
    text-decoration: none;
    color: var(--text-color);
    padding: 10px;
    background-color: var(--background-color);
    border-radius: var(--border-radius);
    box-shadow: none;
    text-align: left;
}

.group-identifier {
    padding: 10px;
    border-radius: var(--border-radius);
    background-color: var(--expired-color);
    font-weight: 1000;
    display: inline-block;
    font-size: 20px;
    width: max-content;
}

.popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    width: calc(100vw - 20px);
    min-height: 200px;
    background-color: white;
    border-radius: var(--border-radius);
    border: var(--border-width) solid var(--background-color);
    /*box-shadow: 0 0 10px 2px var(--alt-background-color);*/
    flex-flow: column wrap;
    padding: 20px;
}

.popup.notification {
    min-height: unset;
    height: min-content;
    top: 10px;
    left: 10px;
    width: calc(100vw - 20px);
    transform: translate(0, 0);
    padding: 10px 20px;
}

.popup.notification.warning {
    background-color: var(--warning-background);
    font-weight: 800;
    border: var(--border-width) dotted var(--warning-color);
}

.popup.notification.warning * {
    color: var(--warning-color);
}

.popup.active {
    display: flex;
}

.popup > .popup_close, .popup > .popup_maximise {
    position: absolute;
    top: 20px;
    right: 20px;
    background-size: 24px;
    height: 36px;
    width: 36px;
    display: inline-block;
    background-color: var(--background-color);
    aspect-ratio: 1 / 1;
    box-shadow: none;
}

.popup > .popup_maximise {
    right: 66px;
}.icon.complete { background-image: url('/s/views/svg/complete_double.svg'); }

.icon {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 34px 34px;
}

.icon.add { background-image: url('/s/views/svg/add_black.svg'); }
.icon.delete { background-image: url('/s/views/svg/delete.svg'); }
.icon.delete.active { background-image: url('/s/views/svg/delete_active.svg'); }
.icon.edit { background-image: url('/s/views/svg/edit.svg'); }
.icon.complete { background-image: url('/s/views/svg/complete_double.svg'); }
.icon.tick { background-image: url('/s/views/svg/complete.svg'); }
.icon.complete.active { background-image: url('/s/views/svg/complete_double_active.svg'); }
.icon.pin { background-image: url('/s/views/svg/pin.svg'); }
.icon.note { background-image: url('/s/views/svg/note.svg'); }
.icon.cross { background-image: url('/s/views/svg/cross.svg'); }
.icon.maximise { background-image: url('/s/views/svg/maximise.svg'); }
.icon.checklist { background-image: url('/s/views/svg/list.svg'); }
.icon.refresh { background-image: url('/s/views/svg/refresh.svg'); }