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

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 .btn {
    margin-top: 1ex;
    margin-bottom: 1ex;
}

.btn {
    padding: 0;

    /* if a */
    text-decoration: none;

    /* if button */
    border: none;
    background-color: inherit;
}

.btn > div {
    padding: 0.5em;
    background-color: #3399ff;
    color: white;

    box-sizing: border-box;
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    box-shadow: var(--btn-height) var(--btn-height) gray;
}

.btn:active > div {
    transform: translate(var(--btn-height), var(--btn-height));
    box-shadow: none;
}

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

.eventlist {
    min-height: 0;
    overflow: auto;
    border-top: 3px solid var(--gray);
    /* mostly for long links */
    word-break: break-word;
}

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

/* 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 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 150%;
}

.small-calendar {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: auto;

    grid-auto-flow: dense;
}

.small-calendar > * {
    text-align: center;
}

.small-calendar > *:not(.column-head) {
    display: flex;
    align-items: center; /* vertically center */
    text-align: right;
}

.small-calendar > * > time {
    width: 100%;
    text-align: right;
    /* padding place in <time> instead on parent block element
       to allow a border radius without making the link area
       smaller
   */
    padding: 5px;
}

.small-calendar a {
    color: initial;
    text-decoration: none;
}

.small-calendar .row-head {
    grid-column: 1;
    border-right: 1px solid black;

    /* Sort of hack to get week numbers looking ok */
    justify-content: right;
    padding-right: 5px;
}

.small-calendar .column-head {
    grid-row: 1;
    border-bottom: 1px solid black;
}

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

/* 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 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 {
    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%;
    pointer-events: none;
}

.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 {
    white-space: pre-line;
    font-size: 10pt;
}

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

.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;
}

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


/* */

.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;
    transition: none;
}

.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); }

.event-inner {
    /* Makes the popup's "position: absolute" be relative the event.
        unset, initial, and inherit all seem to work */
    position: unset;
    width: 100%;
    height: 100%;
}

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

.event-inner .popup {
    /* TODO & NOTE
       If I understand it correctly this is absolute to the nearest offset parent.
       since .event-inner has a position: unset the offset parent becomes
       - event for week view, and
       - body for month view.
       This has the effect that top and left attributes become relative the offset
       parent (even though without them the element is positioned relative to it's
       direct event parent (except not in month view if the day is scrolled)).

       I think it's something here which stops popups in the month view from going
       of the edge of the screen. I just want the same thing to be true for the
       week view, since it's REALY ugly when a popup makes the calendar wider.
   */
    position: absolute;
    display: flex;
    /* 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;

    overflow-y: auto;
    max-width: 100ch;
    max-height: 60ch;
    min-width: 40ch;
}

.event-inner .popup article {
    /* makes the text in the popup scroll, but not the sidebar */
    overflow-y: auto;

    padding: 1em;
}

.event-inner .popup .location {
    font-style: initial;
}

.popup .popup-control {
    display: flex;
    flex-direction: column;

    /* not needed, but the icons aren't text
       and should therefor not be copied */
    user-select: none;
}

.popup-control .btn {
    max-width: 2em;
    max-height: 2em;
    margin: 1em;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 150%;
}

.popup.show {
    transform: scale(1);
}

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

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

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