html {
    height: 100%;
    /* TODO
     * get the default values from the code.
     */
    --editmode: 1.0;
    --event-font-size: 8pt;
    --gray: #757575;
}

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

.root {
    display: grid;
    margin: 0;
    max-width: 100%;
    height: 100%;

    grid-template-columns: auto auto 20em;
    grid-template-rows: auto;

    grid-template-areas:
        "main main nav"
        "main main cal"
            "main main details"
            "main main events"
            "footer footer events";
}

@media (max-aspect-ratio: 3/4) {
    .root {
        grid-template-areas:
            "main main"
                "nav events"
                "cal events"
                "details events"
                ". events"
                "footer events";
        grid-template-rows: 70% auto;
        grid-template-columns: 50% auto;
    }
}

.hidelink {
    color: inherit;
    text-decoration: none;
}

.root main {
    min-width: 0;  /* for wide */
    min-height: 0; /* for tall */

    /* apparently required if one wants to have multiple
       items within main, without it overflowing
    */
    display: flex;
    flex-direction: column;
}

/* Page footer
----------------------------------------
*/
.root footer {
    margin: 0.5em;
    color: ray;
    font-size: 8pt;

    display: flex;
    justify-content: space-between;

    flex-direction: row;
}

@media (max-aspect-ratio: 3/4) {
    .root footer {
        flex-direction: column;
    }
}

.root footer span {
    margin: 0 1em;
    white-space: nowrap;
}


/* Change View
----------------------------------------
"Buttons" for changing between weekly and monthly layout
*/


.change-view {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.change-view a {
    padding: 0.5em;
    background-color: #3399ff;
    text-decoration: none;
    color: white;

    box-shadow: 1ex 1ex gray;

    margin-top: 1ex;
    margin-bottom: 1ex;
}

.change-view a:active {
    transform: translate(1ex, 1ex);
    box-shadow: none;
}

/* Eventlist
----------------------------------------
The sidebar with all the events
*/

.eventlist {
    min-height: 0;
    overflow: scroll;
}

.eventlist {
    overflow: scroll;
    border-top: 3px solid var(--gray);
}

.eventlist article {
    border-bottom: 1px solid black;
    margin-top: 1em;
    border-left-style: solid;
    border-left-width: 6px;
    padding-left: 2px;
}

.eventlist {
    white-space: pre-line;
    font-size: 10pt;
}

.eventlist h3 {
    font-size: 12pt;
    border-bottom: 1px solid var(--gray);
    margin-bottom: 0;
    font-weight: 300;
}

.eventlist article.tentative {
    border-left-style: dashed;
}

/* Text day
----------------------------------------
Each event within the eventlist
*/

.text-day {
    border-left: 2px solid black;
    border-top: 2px solid black;
    padding-left: 2px;
    margin-top: 1em;
}

.text-day header h2 {
    width: 100%;
    text-align: center;
    font-size: 14pt;
}

/* Small calendar
----------------------------------------
*/

.smallcal {
    display: flex;
    justify-content: center;
}

.smallcall-head {
    text-align: center;
    font-weight: bold;
}

.smallcal .nav {
    /* height: 100%; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 150%;
}

.smallcal .small-calendar {
    margin-left: 1em;
    margin-right: 1em;
}

.small-calendar {
    text-align: right;
    border-collapse: collapse;
}

.small-calendar thead {
    border-bottom: 1px solid black;
}

.small-calendar td:nth-child(1) {
    border-right: 1px solid black;
}

.small-calendar .prev,
.small-calendar .next {
    color: var(--gray);
}

.small-calendar td {
    padding: 5px;
    box-sizing: border-box;
}

.small-calendar td a {
    /* Makes link fill box */
    display: block;
}

/* Sliders
----------------------------------------
 */

.sliders label {
    padding-left: 1em;
}

.sliders input[type="range"] {
    width: 100%;
    margin: 0;
}

.sliders .input-group {
    display: flex;
}

.sliders .input-group input {
    min-width: 0;
}

/* Calendar List
----------------------------------------
The list of all the loaded calendars,
along with their colors.
*/

/* .calendarlist {} */

.calendarlist li {
    font-size: 8pt;
    list-style-type: none;
    border-left-width: 1em;
    border-left-style: solid;
    padding-left: 1ex;

    /* force to single line */
    overflow: hidden;
    white-space: nowrap;
}

.small-calendar .today {
    border: 1px solid black;
}

/* Caltable
----------------------------------------
*/

.caltable {
    flex-grow: 10;

    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /* This is for the first name, the week days.
       NOTE that I'm not sure this is actually the
       correct way to do it. */
    grid-template-rows: 2em;
    grid-auto-rows: 1fr;

    max-height: 100%;
    /* Apparently needed to ensure that parent can contain all its children */
    min-height: 0;
}

.caltable .thead {
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.caltable .thead,
.caltable .cal-cell {
    border: 1px solid var(--gray);
}

.caltable .cal-cell {
    overflow-y: auto;
}

.cal-cell .event {
    font-size: 8pt;
    border-radius: 5px;
    padding: 2px;
    margin: 2px;
    font-family: arial;
}

.date-info .day-number {
    font-size: 150%;
    padding: 2pt;
}

.date-info.current .day-number {
    color: black;
}

.date-info {
    color: var(--gray);
}

.table-head {
    font-size: 200%;
    text-align: center;
}


/* Weekly calendar
----------------------------------------
*/

.calendar {
    width: 100%;
    height: 100%;
    display: flex;
    flex-grow: 2;
}

.sideclock {
    /* border-right: 2px solid gray; */
    /* height: 100%; */
    padding: 0;
        grid-row: 3;
        position: relative;
}
.sideclock .day {
    border: 1px transparent;
    min-width: 0;
}

.days .meta {
    border-bottom: 2px solid var(--gray);
    grid-row: 1;
}

.days .events {
    grid-row: 3;
}

.days .longevents {
    grid-row: 2;
    grid-column-start: 2;
    position: relative;
}

.days {
    display: grid;
    grid-template-rows: 4em 4em auto;
    grid-template-columns: 5ch auto;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow-x: scroll;
}

.events {
    position: relative;
    border: 1px solid var(--gray);
}

/*
 * This makes the borders of the object be part of the size.
 * Making placing it on the correct line much simpler.
 */
.clock, .days .event {
    position: absolute;
    box-sizing: border-box;
    margin: 0;
    display: block;
}

.clock {
    color: var(--gray);
    border-top: 1px dotted var(--gray);
        width: 100%;
}

.sideclock .clock {
    border-top: 1px dotted var(--gray);
    grid-row: 3;
}

.clocktext {
    z-index: 1;
    text-align: right;
}

.meta {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    padding-left: 1em;
    padding-right: 1em;
}

.meta .dayname {
    position: absolute;
    left: 5px;
    top: 2px;
    color: var(--gray);
}

.meta .daydate {
    white-space: nowrap;
    font-size: 150%;
}

.event {
    transition: 0.3s;
    font-size: var(--event-font-size);
}

.days .event {
    border: 1px solid black;
}

.events .event {
    width: 100%;


}

.events .event.continuing {
    border-bottom: none;
    background-image: linear-gradient(to top, #0007 0%,#FFF0 2em);
}

.events .event.continued {
    border-top: none;
    background-image: linear-gradient(to bottom, #FFF7 0%,#FFF0 3em);
}

.events .event.continued.continuing {
    border-top: none;
    border-bottom: none;
    background-image:
        linear-gradient(to bottom,
            #FFF7  0%, #FFF0 10%,
            #FFF0 90%, #0007 100%);
}

.event.tentative {
    border: 3px dashed black;
}

.event .location {
    display: block;
    font-size: 80%;
    font-style: italic;
    white-space: pre;
}

.repeating {
    color: red;
}

.event .repeating {
    float: left;
    font-size: 150%;
}

.eventtext .location {
    display: inline-block;
    vertical-align: text-top;
}

.eventtext .last-modified,
.eventtext .rrule {
    display: flex;
    justify-content: right;
    text-align: right;
    font-size: 80%;
    color: var(--gray);
    padding-right: 1em;
}

/* */

.longevents .event {
    border-radius: 1em;
    padding-left: 1em;
}

.longevents .event.continuing {
    border-right: none;
    border-radius: 1em 0 0 1em;
}

.longevents .event.continued {
    border-left: none;
    border-radius: 0 1em 1em 0;
}

.longevents .event.continued.continuing {
    border-radius: 0;
}


.event.generated {
    background-color: #55FF5550;
}

.clock-0  { top: calc(100%/24 *  0); }
.clock-2  { top: calc(100%/24 *  2); }
.clock-4  { top: calc(100%/24 *  4); }
.clock-6  { top: calc(100%/24 *  6); }
.clock-8  { top: calc(100%/24 *  8); border-width: 2px; }
.clock-10 { top: calc(100%/24 * 10); }
.clock-12 { top: calc(100%/24 * 12); }
.clock-14 { top: calc(100%/24 * 14); }
.clock-16 { top: calc(100%/24 * 16); border-width: 2px; }
.clock-18 { top: calc(100%/24 * 18); }
.clock-20 { top: calc(100%/24 * 20); }
.clock-22 { top: calc(100%/24 * 22); }
.clock-24 { top: calc(100%/24 * 24); }

.current-time {
    width: calc(100% + 2em);
    height: 4px;
    background: blue;
    border-color: blue;
    left: -1em;
}

.event-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Popups
----------------------------------------
*/

.event-inner .popup {
    /* visibility: hidden; */
    position: absolute;
    display: block;
    /* A scale(0%) is chosen for hiding the element for the following reasons:
       - visibility: hidden still reserves space, which causes unwanted scroll-
         bars since the final position of the popup is calculated at runtime
       - Easier animation
   */
    transform: scale(0);
    transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
    z-index: 100;

    background-color: #dedede;
    color: black;
    border: 2px solid black;

    font-size: 8pt;
    font-family: monospace;

    white-space: pre;
    overflow-y: scroll;
    max-width: 100ch;
    max-height: 60ch;
}

.event-inner .popup td {
    white-space: pre-line;
}

/* Arrow pointing at origin of popup
   Currently broken due to an overflow: scroll
*/
/* .event-inner .popup:after { */

/*     content: ""; */
/*     position: absolute; */
/*     top: 100%; */
/*     /\* left: 5%; *\/ */
/*     border-style: solid; */
/*     border-width: 1.5em; */
/*     /\* margin-left: -2em; *\/ */
/*     border-color: transparent; */
/*     border-top-color: #555; */
/* } */

.popup th {
    text-align: right;
    vertical-align: top;
}

.popup th::after {
    content: ": ";
}

.popup.show {
    /* visibility: visible; */
    transform: scale(1);
}

.event-inner .body {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

/* vim:expandtab:softtabstop=4:shiftwidth=4:
 */