/* Import Google fonts. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');

/*
 * Define the colors used on the page.
 * I would like to adapt to the theme soon.
 */
@media (prefers-color-scheme: light) {
    :root {
        --table-back: lightblue;
        --table-back-odd: #ACE6E1;
        --table-border-color: black;
        --hover-back: skyblue;
        --checked-back: skyblue;
        --checked-text: navy;
        --label-color: black;
        --background-color: white;
    }
}
@media (prefers-color-scheme: dark) {
    :root {
        --table-back: #2a2a2a;
        --table-back-odd: #333333;
        --table-border-color: lightgray;
        --hover-back: #1e1e1e;
        --checked-back: #37474f;
        --checked-text: #cfd8dc;
        --label-color: white;
        --background-color: black;
    }
}
:root {
    --sunday-text: red;
    --saturday-text: blue;
    --check-mark: "\e5ca";
    --add-mark: "\e145";
}

html {
    background-color: var(--background-color);
}

/* Things specified by tag */
body {
    height: 95dvh;
    width: 95dvw;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Noto Sans JP', sans-serif;
}

main {
    background-color: var(--table-back);
    border: 2px solid black;
    border-radius: 15px;
    box-shadow: gray 10px 10px 10px;
    color: var(--label-color);
    min-height: 100px;
    /* z-index: 99999; */
    padding: 15px;
    /* overflow: auto; */
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2em;
    width: 95%;
}

content {
    overflow-x: auto;
    width: 100%;
}

header {
    width: 100%;
    position: relative
}

th,
td {
    border: 1px solid var(--table-border-color);
    height: 3em;
    min-width: 3em;
}

td:hover {
    background-color: var(--hover-back);
}

td[data-checked="1"] {
    background-color:var(--checked-back);
}

td[data-checked="1"]::after {
    content: "\e5ca";
    margin: auto;
    font-size: 2em;
    color: var(--checked-text);
    font-family: 'Material Symbols Outlined';
}

thead th:nth-child(1),
tbody th:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 1000;
  border: 1px solid var(--table-border-color) !important;
}

table {
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 1em;
}

thead > tr > th:first-child {
    background-color: var(--table-back);
}

/* calendar row */
tbody > tr:nth-child(even) {
    background-color: var(--table-back);

    > th:first-child {
        background-color: var(--table-back);
    }
}

tbody > tr:nth-child(odd) {
    background-color: var(--table-back-odd);

    > th:first-child {
        background-color: var(--table-back-odd);
    }
}

tbody > tr {
    > th:first-child {
        min-width: 12em;
    }
    > th:last-child {
        cursor: pointer;
        font-size: 1.2em;
    }
}

button::after {
    content: var(--add-mark);
    font-size: 1.2em;
    font-family: 'Material Symbols Outlined';
}

/* Those specified by id */
#div-input-new-habit {
    margin-left: auto;
    margin-right: auto;

    > * {
        margin-right: 10px
    }
}

#text-add-habit {
    font-size: 1.1em;
}

/* Those specified by class */
.saturday {
    color: var(--saturday-text);
}

.sunday {
    color: var(--sunday-text);
}