/* TODO: add light mode and dark mode colors using variables and media queries */
:root {
    /* Light mode variables */
    --page-bg-color: hsl(0, 0%, 93%);
    --dialog-bg-color: hsla(0, 0%, 90%);
    --calendar-bg0-color: hsl(0, 0%, 80%);
    --calendar-bg1-color: hsl(0, 0%, 90%);
    --calendar-bg2-color: hsl(0, 0%, 95%);
    --calendar-day-number-color: hsl(0, 0%, 50%);
    --selection-bg-color: hsl(122, 39%, 79%);
    --primary-color: hsl(122, 39%, 49%);
    --text-color: hsl(0, 0%, 13%);
    --on-primary: #FFFFFF;
    --disabled: rgba(255, 255, 255, 0.3);
    --separator: hsl(0.00, 0.00%, 86%);
    --svg-filter: brightness(0) saturate(100%) invert(0%) sepia(89%) saturate(0%) hue-rotate(19deg) brightness(97%) contrast(74%);
}

@media screen and (prefers-color-scheme: dark) {
    :root {
        /* Dark mode variables */
        --page-bg-color: hsl(0, 0%, 13%);
        --dialog-bg-color: hsla(0, 0%, 16%);
        --calendar-bg0-color: hsl(0, 0%, 8%);
        --calendar-bg1-color: hsla(0, 0%, 23%);
        --calendar-bg2-color: hsla(0, 0%, 30%);
        --calendar-day-number-color: hsl(0, 0%, 65%);
        --selection-bg-color: hsl(122, 39%, 79%);
        --primary-color: hsl(122, 39%, 49%);
        --text-color: #FFFFFF;
        --on-primary: #FFFFFF;
        --disabled: rgba(0, 0, 0, 0.26);
        --separator: hsl(0, 0%, 28%);
        --svg-filter: brightness(0) saturate(100%) invert(100%) sepia(89%) saturate(2%) hue-rotate(230deg) brightness(112%) contrast(100%);
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
    font-family: system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
}

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    -webkit-touch-callout: none;
    /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;
    /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;
    /* prevent copy paste, to allow, change 'none' to 'text' */
    background-color: #E4E4E4;
    background-image: linear-gradient(to bottom, #A7A7A7 0%, #E4E4E4 51%);
    font-family: system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
    font-size: 16px;
    margin: 0px;
    padding: 0px;
    /* Padding to avoid the "unsafe" areas behind notches in the screen */
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    width: 100%;
    visibility: visible;
}

h1 {
    font-size: 24px;
    font-weight: normal;
    margin: 0px;
    overflow: visible;
    padding: 0px;
    text-align: center;
}

input[type='text'],
textarea {
    font-size: 16px;
}

.page {
    height: 100dvh;
    width: 100dvw;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 6.8dvh 93.2dvh;
}

.trash_page,
.entry_list_page,
.entry_detail_page,
.calendar_page,
.symptom_list_menu,
.entry_list_menu {
    display: none;
}

.symptom_list_menu,
.entry_list_menu {
    position: absolute;
    right: 0.5rem;
    top: 40px;
    background: var(--page-bg-color);
    width: 8rem;
    border-radius: 6px;
    border: 1px solid var(--separator);
    flex-direction: column;
}

.symptom_list_menu button,
.entry_list_menu button {
    display: flex;
    align-items: center;
    background: transparent;
    color: var(--text-color);
    border: none;
    margin: 8px;
}

.symptom_list_menu button img,
.entry_list_menu button img {
    margin-right: 0.25rem;
    filter: var(--svg-filter);
}

.page>.header {
    height: 100%;
    background: var(--primary-color);
    color: var(--on-primary);
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: minmax(0, 1fr) 5fr 1fr 1fr 1fr;
    font-weight: bold;
    padding: 0;
    margin: 0;
    justify-items: center;
    align-items: center;
}

.page>.header.selection_mode {
    display: none;
}

.page>.header>.icon_left {
    grid-column: 1;
}

.page>.header>.title {
    grid-column: 1 / span 2;
    justify-self: start;
    padding-left: 16px;
}

.page>.header>.icon_left + .title {
    grid-column: 2;
    padding-left: 0;
}

.page>.header>.icon_right1 {
    grid-column: 3;
}

.page>.header>.icon_right2 {
    grid-column: 4;
}

.page>.header>.icon_right3 {
    grid-column: 5;
}

.page>.header>.disabled {
    display: none;
}

.page>.body {
    height: 100%;
    padding: 0;
    background: var(--page-bg-color);
    color: var(--text-color);
    overflow: scroll;
}

.page>.body>ul {
    margin: 0;
    padding: 0;
}

.symptom_list_page > .body > .symptom_list > li,
.trash_page > .body > .trash_list > li {
    color: var(--text-color);
    list-style-type: none;
    border-bottom: 1px solid var(--separator);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.symptom_list_page > .body > .symptom_list > li.selected,
.trash_page > .body > .trash_list > li.selected,
.entry_list_page > .body > .entry_list > li.selected {
    background: var(--selection-bg-color);
}

.symptom_list_page > .body > .symptom_list > li > .description,
.trash_page > .body > .trash_list > li > .description {
    font-size: small;
    color: #AAAAAA;
}

.entry_list_page > .body > .entry_list > li {
    background: var(--page-bg-color);
    color: var(--text-color);
    list-style-type: none;
    border-bottom: 1px solid var(--separator);
    padding: 1rem;
    display: grid;
    grid-template-rows: 1fr auto;
    grid-template-columns: 1fr 1fr 8px 1fr 8px 1fr;
    justify-items: start;
    align-items: center;
    grid-gap: 0 4px;
}

.entry_list_page > .body > .entry_list > li > .date,
.entry_list_page > .body > .entry_list > li > .time {
    white-space: nowrap;
}

.entry_list_page > .body > .entry_list > li.list_header {
    grid-template-rows: 1fr;
    font-size: small;
    padding: 0.5rem 1rem;
    position: sticky;
    top: 0;
}

.entry_list_page > .body > .entry_list > li.list_header .duration {
    grid-column: 3 / span 2;
}

.entry_list_page > .body > .entry_list > li.list_header .severity {
    grid-column: 5 / span 2;
}

.entry_list_page > .body > .entry_list > li >.notes {
    font-size: small;
    color: #aaaaaa;
    grid-column: 1 / span 6;
}

.page>.header button {
    background: transparent;
    border: none;
    color: var(--text-color);
    padding: 4px 0 0 0;
    width: 100%;
    height: 100%;
}

.page>.body>.fab {
    background: var(--primary-color);
    color: var(--on-primary);
    border: 2px solid var(--primary-color);
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: grid;
    justify-items: center;
    align-items: center;
}

.add_symptom_dialog,
.edit_symptom_dialog {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    position: absolute;
    bottom: calc(50% + 1rem);
    /* bottom: env(keyboard-inset-height, calc(50% + 1rem)); */
    /* top: env(keyboard-inset-height); */
    left: calc(50% - 8.5rem);
    background: var(--page-bg-color);
    color: var(--text-color);
    width: 17rem;
    height: 10rem;
    padding: 1rem;
    border-radius: 10px;
    border: 1px solid #9E9E9E;
}

.add_symptom_dialog input,
.edit_symptom_dialog input {
    border: 1px solid #9E9E9E;
    border-radius: 5px;
    height: 2.5rem;
    background: var(--page-bg-color);
    color: var(--text-color);
    padding: 10px;
    width: 15rem;
}

.add_symptom_dialog div,
.edit_symptom_dialog div {
    text-align: right;
    width: 100%;
}

.add_symptom_dialog button,
.edit_symptom_dialog button {
    background: var(--page-bg-color);
    color: var(--text-color);
    border: none;
}

.entry_list_page .duration_color,
.entry_list_page .severity_color {
    width: 8px;
    height: 8px;
}

.entry_list_page .duration_color.short,
.entry_list_page .severity_color.mild {
    background: hsl(122, 39%, 49%);
}

.entry_list_page .duration_color.medium,
.entry_list_page .severity_color.moderate {
    background: hsl(45.00, 100.00%, 51.37%);
}

.entry_list_page .duration_color.long,
.entry_list_page .severity_color.severe {
    background: hsl(4.11, 89.62%, 58.43%);
}

.split-square {
    width: 16px;
    height: 16px;
    /* border-radius: 50%; */
    margin: 1px;
    display: inline-block;
}
.split-square.short.mild {
    background: hsl(122, 39%, 49%);
}
.split-square.short.moderate {
    background: linear-gradient(to bottom right, hsl(122, 39%, 49%) 50%, hsl(45.00, 100.00%, 51.37%) 50%);
}
.split-square.short.severe {
    background: linear-gradient(to bottom right, hsl(122, 39%, 49%) 50%, hsl(4.11, 89.62%, 58.43%) 50%);
}
.split-square.medium.mild {
    background: linear-gradient(to bottom right, hsl(45.00, 100.00%, 51.37%) 50%, hsl(122, 39%, 49%) 50%);
}
.split-square.medium.moderate {
    background: hsl(45.00, 100.00%, 51.37%);
}
.split-square.medium.severe {
    background: linear-gradient(to bottom right, hsl(45.00, 100.00%, 51.37%) 50%, hsl(4.11, 89.62%, 58.43%) 50%);
}
.split-square.long.mild {
    background: linear-gradient(to bottom right, hsl(4.11, 89.62%, 58.43%) 50%, hsl(122, 39%, 49%) 50%);
}
.split-square.long.moderate {
    background: linear-gradient(to bottom right, hsl(4.11, 89.62%, 58.43%) 50%, hsl(45.00, 100.00%, 51.37%) 50%);
}
.split-square.long.severe {
    background: hsl(4.11, 89.62%, 58.43%);
}


.entry_detail_page>.body>ul {
    margin: 1rem;
}

.entry_detail_page li {
    list-style-type: none;
}

.entry_detail_page input[type='text'],
.entry_detail_page textarea {
    width: 100%;
    border: 1px solid #9E9E9E;
    background: transparent;
    color: var(--text-color);
    padding: 10px;
}

.entry_detail_page .date_time_labels,
.entry_detail_page .date_time_inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
}

.entry_detail_page .radio_group {
    border: 1px solid #555;
    border-radius: 6px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    overflow: hidden;
}

.entry_detail_page .radio_group input {
    display: none;
}

.entry_detail_page .radio_group label {
    border-right: 1px solid #333;
    cursor: pointer;
    text-align: center;
    display: grid;
    justify-items: center;
    align-items: center;
    height: 2.5rem;
}

.entry_detail_page .radio_group label:last-of-type {
    border-right: 0;
}

.entry_detail_page .radio_group input:checked+label {
    background: var(--primary-color);
    color: var(--on-primary);
}

.entry_detail_page .duration_label,
.entry_detail_page .severity_label,
.entry_detail_page .notes_label,
.entry_detail_page .buttons {
    margin-top: 1rem;
}

.entry_detail_page input[type='text'] {
    height: 2.5rem;
}

.entry_detail_page .save_button img {
    margin-right: 8px;
}

.entry_detail_page .save_button,
.entry_list_page .filter_button {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--primary-color);
    color: var(--on-primary);
    font-size: 16px;
    height: 2.5rem;
    border: none;
    border-radius: 1.25rem;
    width: 100%;
}


.symptom_sort_options,
.entry_list_filter_options {
    display: none;
    position: absolute;
    background: var(--dialog-bg-color);
    color: var(--text-color);
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 0.3rem 1rem;
    border-radius: 10px 10px 0 0;
}

.symptom_sort_options ul,
.entry_list_filter_options ul {
    margin: 0;
    padding: 0;
}

.symptom_sort_options li,
.entry_list_filter_options li {
    list-style-type: none;
    margin: 0;
    padding: 1rem 0;
    border-bottom: 1px solid var(--separator);
}

.symptom_sort_options li:last-child,
.entry_list_filter_options li:last-child {
    border-bottom: none;
}

.entry_list_filter_options input[type="text"] {
    width: 6rem;
}
.entry_list_filter_options > ul > li > label {
    margin-right: 1rem;
}
.entry_list_filter_options > ul > li > span {
    display: block;
    font-size: smaller;
    font-weight: lighter;
    margin-bottom: 0.5rem;
}

.calendar {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-gap: 1px;
    justify-content: center;
    align-content: center;
    padding: 0;
    margin: 0;
    background: var(--calendar-bg0-color);
    width: 100%;
    border-bottom: 1px solid var(--calendar-bg0-color);
}
.jan, .mar, .may, .jul, .sep, .nov {
  background: var(--calendar-bg1-color);
}
.feb, .apr, .jun, .aug, .oct, .dec {
  background: var(--calendar-bg2-color);
}
.calendar > div {
    position: relative;
    border-radius: 0;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    min-height: 3.3rem;
    width: 100%;
}
.calendar > .label {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--calendar-bg2-color);
    position: sticky;
    top: 0;
    z-index: 99;
    min-height: auto;
    border-bottom: 1px solid var(--calendar-bg0-color);
}
.calendar > .span_4 {
    grid-row-start: span 4;
}
.calendar > .span_5 {
    grid-row-start: span 5;
}
.calendar > .span_6 {
    grid-row-start: span 6;
}
.calendar > .month_name {
    aspect-ratio: auto;
}
.calendar > .month_name > span {
    font-size: 2.75vw;
    /* transform: rotate(90deg); */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.calendar > div > .day_number {
    /* display: none; */
    position: absolute;
    right: 3px;
    top: 1px;
    font-size: 10px;
    color: var(--calendar-day-number-color);
}
.calendar > .sun {
    grid-column: 1;
}
.calendar > .mon {
    grid-column: 2;
}
.calendar > .tue {
    grid-column: 3;
}
.calendar > .wed {
    grid-column: 4;
}
.calendar > .thu {
    grid-column: 5;
}
.calendar > .fri {
    grid-column: 6;
}
.calendar > .sat {
    grid-column: 7;
}
.red {
    color: #EF5350;
}
.pink {
    color: #EC407A;
}
.purple {
    color: #AB47BC;
}
.deep_purple {
    color: #7E57C2;
}
.indigo {
    color: #5C6BC0;
}
.blue {
    color: #42A5F5;
}
.light_blue {
    color: #29B6F6;
}
.cyan {
    color: #26C6DA;
}
.teal {
    color: #26A69A;
}
.green {
    color: #66BB6A;
}
.light_green {
    color: #9CCC65;
}
.lime {
    color: #D4E157;
}
.yellow {
    color: #FFEE58;
}
.amber {
    color: #FFCA28;
}
.orange {
    color: #FFA726;
}
.deep_orange {
    color: #FF7043;
}
.brown {
    color: #8D6E63;
}
.grey {
    color: #BDBDBD;
}
.blue_grey {
    color: #78909C;
}