html {
        font-family: sans-serif;
        font-size: 98%;
}

h1 {
        margin-top: 0;
}

table {
        border-collapse: collapse;
}

table,
tr,
td,
th {
        border: 1pt solid black;
        padding: 0.25em;
}

thead tr {
        border-width: 2pt;
        background-color: #eee;
}

th {
        text-align: left;
}

th.sauna {
        text-align: center;
        font-size: 70%;
}

col.sauna {
        width: 6em;
}

col.days {
        width: 13em;
}

@media screen {
        tr.this-week {
                background: linear-gradient(to bottom, #fff, #efe); /* Fallback */
                border: 3pt solid #797;
                border-left: 6pt solid #797;
                border-right: 6pt solid #797;
        }
}

td.week,
td.days {
        text-align: right;
}

td.apt {
        text-align: right;
        padding-right: 1.3em;
}

td.sauna {
        text-align: center;
}

td.wash-yes {
        background-color: #efe;
}

td.flag-days {
        list-style-type: none;
        font-size: 70%;
}

ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
}

#qr {
        display: inline-block;
        width: 24mm;
        height: 24mm;
}

#year {
        font-size: 120%;
        width: 4em;
        height: 100%;
}

#controls {
        display: flex;
        flex-direction: row;
        align-items: center;
}

#half {
        display: inline-flex;
        flex-direction: column;
        border: 0;
}

#half > label {
}

footer qr-code {
        vertical-align: middle;
}

footer .legend {
        display: inline-block;
        vertical-align: middle;
}

footer .legend p {
        margin: 0;
}

footer .legend p.status {
        text-align: center;
        font-size: 90%;
}

@media print {
        #controls {
                display: none;
        }
}

@media (prefers-color-scheme: dark) {
        html {
                background-color: #222;
                color: #ccc;
        }

        table,
        tr,
        td,
        th {
                border-color: #444;
        }

        thead tr {
                background-color: #333;
        }

        tr.this-week {
                background: linear-gradient(to bottom, #1a1a1a, #2a3a2a); /* Dark mode fallback */
                border-color: #5a5;
        }

        td.wash-yes {
                background-color: #2a3a2a;
        }

        #year {
                background-color: #333;
                color: #e0e0e0;
                border-color: #444;
        }

        #qr {
                background-color: white;
                padding: 2px;
        }
}