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
*/

.calnav {
    display: flex;
    flex-direction: column;
    padding-left: 2em;
    padding-right: 2em;
}

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

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

.jump-to > form {
    display: flex;
}

.jump-to input {
    flex-grow: 2;
    margin-right: 1em;
}

.jump-to button, .jump-to a {
    /* Same as height, figure out way to force this */
    width: 2.5em;
}

/* button
--------------------------------------------------
*/

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

    /* shouldn't be needed, but otherwise wont align with a text input
       inside a shared flex-container.
       It however seems to make <a> and <button> tag refuse to be the same height?
    */
    height: 2.5em;

    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;

    /* allow for popup placement */
    position: relative;
}

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

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


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

.popup-container {
    display: none;
}


.popup {
    display: flex;
    background-color: #dedede;
    color: black;

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

.popup article {
    /* makes the text in the popup scroll, but not the sidebar */
    overflow-y: auto;
    padding: 1em;
    word-break: break-word;
}

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

.tpd-tooltip a, .tpd-tooltip a:hover {
    color: blue;
}

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

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