/* The grid of times, the colour code next to it and the lists below: how they look.
   frontend.js says what state a cell is in (as classes) and hands over the measures to compute with, as
   custom properties on #main (see setGridMeasures there):
     --row         the height of a row (five minutes) without its border; lower on a compact booking page
     --bw          the room a border takes at the most (border + padding of a cell is always that much)
     --bw-mark     the lines around what is dragged, and of the outline of the best time
     --bw-tick     the lines between the hours
     --corner      the rounded ends of what is marked;  --corner-taken  those of an entry of the calendar
     --col-self, --col-other, --col-space, --col-gap    the columns of a day and the gap between columns
     --scroll-width    the buttons to move on to other days;  --legend-width  the colour code next to the grid
   Loaded after default.css: where both say something about an element, this file decides. */

#main {
    /* a row with a line above it is lower by the line; the last row is not, to have room for the line below it */
    --row-line: calc(var(--row) - var(--bw-tick));
    --row-last: var(--row);
    /* the outline of the best or proposed time: dashed */
    --marker-down: repeating-linear-gradient(to bottom, var(--marker) 0 5px, transparent 5px 9px);
    --marker-across: repeating-linear-gradient(to right, var(--marker) 0 5px, transparent 5px 9px);
}
/* the grid of a booking page: all rows are as high, a line takes its room from the padding alone */
#main.even_rows {
    --row-line: var(--row);
    --row-last: calc(var(--row) - var(--bw-tick));
}

/* ---- the table of the grid, its header and what is around the cells ---- */
table.grid {
    text-align: center;
    border-spacing: var(--col-gap) 0; /* between the columns, not between the rows */
    user-select: none;
    padding: 10px;
    display: inline-block;
    margin: 10px 10px 5px 10px;
    vertical-align: top;
}
table.grid.with_today { /* the lines of today are placed inside it, see placeTodayLine() */
    position: relative;
}
/* The sign that the page of the grid is being loaded (anew), see showPageLoading(): over the first rows of the
   grid, in the middle: a ring alone, on a round ground. It takes no room and lets the mouse through to the
   cells. The ring turns as the one of the button does (.loading in default.css). */
table.grid.with_sign {
    position: relative;
}
#grid_loading {
    position: absolute;
    top: 76px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-quiet);
    box-shadow: var(--shadow);
    pointer-events: none;
}
/* a page that is opened and has nothing to show yet: its empty grid is pale, the sign larger */
table.grid.loading_first tr {
    opacity: 0.35;
}
table.grid.loading_first #grid_loading {
    top: 130px;
    padding: 10px;
    transform: translateX(-50%) scale(1.8);
}
td.zone_head, td.day_head {
    font-size: 11pt;
}
td.day_head.weekend {
    font-weight: bold;
}
td.date_head {
    width: var(--col-self);
    font-size: 10pt;
}
td.time_label {
    font-size: 11pt;
    line-height: 0px;
}
tr.grid_row {
    z-index: -1;
}
td.gap_cell { /* the gap after a day, before the next */
    border-width: 0;
    padding: 0;
    width: var(--col-space);
    z-index: -1;
}
/* the thin column with the line between two weeks; there but not seen where no week ends, so that the grid is as wide */
td.week_line {
    max-width: 0px;
    border-left: 1px dotted transparent;
    border-right: 8px solid rgba(255, 255, 255, 0.0);
}
td.week_line.seen {
    border-left-color: gray;
}
/* the row between two days, in a grid that goes on after midnight */
td.day_break {
    background: var(--surface);
    border-width: 0;
    border-style: solid;
    border-top-width: 1px;
    border-top-color: var(--ink);
    height: 3px;
}
td.no_border {
    border-width: 0;
}
/* A change of the clocks (buildGridRows): the hour they skip (set forward) crossed out on its day; the hour they
   show a second time (set back) as a lower row below its first time, coloured on its day, crossed out lightly
   on the others (rows of steps in a meeting, whose steps are moments, see appendAgain). In a meeting whose
   clocks are others: crossed out lightly where a day of the grid is outside its hours */
#main {
    --clock-change: #8f6fd1;
}
td.grid_cell.clock_skipped, td.others_cell.clock_skipped,
td.grid_cell.not_counted, td.others_cell.not_counted, td.grid_cell.clock_none, td.others_cell.clock_none, tr.clock_again td.clock_none {
    --cross: color-mix(in srgb, var(--clock-change) 70%, transparent);
    background: repeating-linear-gradient(45deg, var(--cross) 0 1px, transparent 1px 6px),
                repeating-linear-gradient(-45deg, var(--cross) 0 1px, transparent 1px 6px);
}
td.grid_cell.not_counted, td.others_cell.not_counted, td.grid_cell.clock_none, td.others_cell.clock_none, tr.clock_again td.clock_none {
    --cross: var(--ink-9);
}
tr.clock_again td {
    height: calc(var(--again-rows) * var(--row) / 2);
    padding: 0;
    border-width: 0;
}
tr.clock_again td.time_label { /* at the top of the row, as the time of every other row is: with room for "(time shift)" below */
    vertical-align: top;
}
tr.clock_again td.clock_twice {
    background: color-mix(in srgb, var(--clock-change) 35%, transparent);
}
tr.clock_again td.time_label, tr.clock_again_steps td.time_label {
    color: var(--clock-change);
}
/* "(time shift)" under the time of a row where the clocks change: small, below it without moving the rows, and
   no wider than the time (on two lines then), so that the column of the labels keeps its width */
td.time_label span.time_shifted {
    display: inline-block;
    position: relative;
}
td.time_label span.time_shift {
    position: absolute;
    left: 0;
    right: 0;
    top: 0.65em;
    font-size: 6.5pt;
    line-height: 1.1;
    text-align: center;
    color: var(--clock-change);
}
/* the buttons to move on to earlier and later days */
td.scroll_cell {
    width: var(--scroll-width);
}
button.scroll_days, button.scroll_days:hover, button.scroll_days:disabled {
    background: var(--button-color-light);
    width: var(--scroll-width);
    box-sizing: border-box;
    padding: 0;
}
/* where a marked time is dragged to remove it; its colours are in default.css */
button.garbage {
    position: fixed;
    width: 300px;
    left: calc(50% - 150px);
    z-index: 10;
}

/* ---- a cell of the own column (and the examples of the colour code, which are drawn as such cells) ---- */
td.own_column {
    width: var(--col-self);
}
td.grid_cell {
    height: var(--row);
    padding: var(--bw) 0 0 0; /* the padding stands in for the border that is not there */
    border-style: solid;
    border-color: rgba(0,0,0,0);
    border-width: 0 var(--bw-mark);
    border-radius: 0;
    background-color: var(--avail); /* how available: set on the cell, see getColor */
    --stripes: none; /* of what is marked maybe, below */
    background-image: var(--stripes);
}
/* The lines. Later rules win over earlier ones: the order is that of the states, the last one decides. */
td.grid_cell.line_hour, td.grid_cell.line_tick {
    border-top-width: var(--bw-tick);
    border-top-color: var(--ink-28); /* a light line every hour */
    height: var(--row-line);
    padding-top: calc(var(--bw) - var(--bw-tick));
}
td.grid_cell.line_tick {
    border-top-color: var(--ink-9); /* a fainter one between the hours */
}
td.grid_cell.row_last {
    height: var(--row-last);
    border-bottom-width: var(--bw-tick);
    border-bottom-color: var(--ink-28);
}
td.grid_cell.line_now { /* the time it is now, across today */
    border-top-width: var(--bw-tick);
    border-top-color: #F00;
    height: var(--row-line);
    padding-top: calc(var(--bw) - var(--bw-tick));
}
/* what is marked: rounded where a range begins and ends */
td.grid_cell.round_top {
    border-top-left-radius: var(--corner);
    border-top-right-radius: var(--corner);
}
td.grid_cell.round_bottom {
    border-bottom-left-radius: var(--corner);
    border-bottom-right-radius: var(--corner);
}
/* the end of a range that can be dragged: a red line around it, dashed; solid on the end the mouse is at */
td.grid_cell.end_top {
    border-width: var(--bw-mark) var(--bw-mark) 0 var(--bw-mark); /* no other lines: less clutter */
    border-top-color: red;
    border-right-color: red;
    border-left-color: red;
    border-top-style: dashed;
    padding-top: 0;
    height: calc(var(--row) - var(--bw));
    border-radius: var(--corner) var(--corner) 0 0;
}
td.grid_cell.end_top_held {
    border-top-style: solid;
}
td.grid_cell.end_bottom {
    border-width: 0 var(--bw-mark) var(--bw-mark) var(--bw-mark);
    border-right-color: red;
    border-bottom-color: red;
    border-left-color: red;
    border-bottom-style: dashed;
    /* the padding stands in for the border above that is not there and for the line below: what is in the cell
       (a piece of an entry of the calendar) stays in the middle, where it is in the other cells; no higher than
       a row with a line (the row makes it as high as it is) */
    padding-top: calc(var(--bw) + var(--bw-mark));
    padding-bottom: 0;
    height: max(0px, calc(var(--row-line) - 2*var(--bw-mark)));
    border-radius: 0 0 var(--corner) var(--corner);
}
td.grid_cell.end_bottom_held {
    border-bottom-style: solid;
}
/* What lies before now is paler: the colour of the cell is mixed with nothing. (Not by making the cell
   see-through as a whole: an entry of the calendar reaches over several cells, and each see-through cell
   would be drawn over the part of the entry that comes from the cell above.) */
td.grid_cell.past, td.others_cell.past {
    background-color: color-mix(in srgb, var(--avail) 40%, transparent);
}
/* What is marked maybe: diagonal stripes of green (--avail) and orange (--avail-alt), both set on the cell (see
   updateColoringSelf). They are laid on the page as a whole (fixed), so that they run on from one cell into the
   next whatever the height of each. Paler where it is past, as above. */
td.grid_cell.maybe {
    background-color: transparent;
    --stripes: repeating-linear-gradient(135deg, var(--avail) 0 4px, var(--avail-alt) 4px 8px);
    background-attachment: fixed;
}
td.grid_cell.removing { /* what is being removed (the right button pressed): grey stripes */
    --stripes: repeating-linear-gradient(135deg, var(--ink-9) 0 4px, transparent 4px 8px);
    background-attachment: fixed;
}
td.grid_cell.maybe.past {
    --stripes: repeating-linear-gradient(135deg, color-mix(in srgb, var(--avail) 40%, transparent) 0 4px,
                                                 color-mix(in srgb, var(--avail-alt) 40%, transparent) 4px 8px);
}
/* The outline of the best, proposed or scheduled time: lines painted into the cells over their colour, at the
   sides, and across at the first and the last cell. Inside the cells, so that it takes no room. */
/* The stripes of a maybe stay below, as the last layer, laid on the page as a whole (see td.grid_cell.maybe). */
td.grid_cell.best {
    background-image: var(--marker-down), var(--marker-down), var(--stripes);
    background-position: left top, right top, left top;
    background-size: var(--bw-mark) 100%, var(--bw-mark) 100%, auto;
    background-repeat: no-repeat, no-repeat, repeat;
    background-attachment: scroll, scroll, fixed;
}
td.grid_cell.best.best_start {
    background-image: var(--marker-down), var(--marker-down), var(--marker-across), var(--stripes);
    background-position: left top, right top, left top, left top;
    background-size: var(--bw-mark) 100%, var(--bw-mark) 100%, 100% var(--bw-mark), auto;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
    background-attachment: scroll, scroll, scroll, fixed;
}
td.grid_cell.best.best_end {
    background-image: var(--marker-down), var(--marker-down), var(--marker-across), var(--stripes);
    background-position: left top, right top, left bottom, left top;
    background-size: var(--bw-mark) 100%, var(--bw-mark) 100%, 100% var(--bw-mark), auto;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
    background-attachment: scroll, scroll, scroll, fixed;
}
td.grid_cell.best.best_start.best_end {
    background-image: var(--marker-down), var(--marker-down), var(--marker-across), var(--marker-across), var(--stripes);
    background-position: left top, right top, left top, left bottom, left top;
    background-size: var(--bw-mark) 100%, var(--bw-mark) 100%, 100% var(--bw-mark), 100% var(--bw-mark), auto;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
    background-attachment: scroll, scroll, scroll, scroll, fixed;
}
td.grid_cell.settled { /* once it is the time of the meeting: a solid line */
    --marker-down: linear-gradient(var(--marker), var(--marker));
    --marker-across: linear-gradient(var(--marker), var(--marker));
}
td.grid_cell.movable { /* the host takes the outlined time elsewhere with the mouse */
    cursor: grab;
}

/* ---- the thin column next to the own one: how many of the others can ---- */
td.others_cell {
    border-width: 0;
    padding: 0;
    width: var(--col-other);
    background-color: var(--avail);
}

/* ---- the colour code: its examples are cells as in the grid, smaller ---- */
td.grid_cell.legend_own {
    width: 30px;
    padding: 0;
}
td.grid_cell.legend_taken { /* blocked by a meeting: with the corners such an entry has in the grid */
    border-radius: var(--corner-taken);
}
td.grid_cell.legend_free { /* unavailable: an empty piece of the grid, its light lines above and below, open sides */
    border: none;
    border-top: 1px solid var(--ink-28);
    border-bottom: 1px solid var(--ink-28);
}
td.grid_cell.legend_others {
    border-width: 0;
    padding: 0;
    width: var(--col-other);
}
td.grid_cell.legend_nobody { /* an empty column, outlined in the colour of the text: black on a light page, white on a dark one */
    border: 1px solid var(--ink);
}

/* ---- what a meeting or an entry of the calendar takes: a grey piece in each of its cells ---- */
div.entry_piece {
    pointer-events: none; /* pass on hover events to the cell below */
    position: relative;
    width: 45px;
    height: calc(var(--row) + 3px); /* 3px over the cell below, to cover the line between them */
    margin: -4px 5px -6px 5px;
    padding: 0;
    border-width: 0;
    background-color: var(--ink-10-on-surface);
}
div.entry_piece.entry_top { /* its first piece */
    margin-top: -3px;
    border-radius: var(--corner-taken) var(--corner-taken) 0 0;
}
div.entry_piece.entry_bottom { /* its last piece: not over the cell below */
    height: calc(var(--row) + 1px);
    border-radius: 0 0 var(--corner-taken) var(--corner-taken);
}
div.entry_piece.entry_past { /* an entry that is over: paler, with its text */
    opacity: 0.45;
}
/* a meeting scheduled here has a light blue line around it; what comes from the calendars alone has none */
div.entry_piece.entry_ours {
    box-shadow: inset 2px 0 0 var(--own-meeting), inset -2px 0 0 var(--own-meeting);
}
div.entry_piece.entry_ours.entry_top {
    box-shadow: inset 2px 0 0 var(--own-meeting), inset -2px 0 0 var(--own-meeting), inset 0 2px 0 var(--own-meeting);
}
div.entry_piece.entry_ours.entry_bottom {
    box-shadow: inset 2px 0 0 var(--own-meeting), inset -2px 0 0 var(--own-meeting), inset 0 -2px 0 var(--own-meeting);
}
/* the title of the entry, over all its pieces: as many lines as fit (--lines, set with the title) */
div.entry_title {
    position: absolute;
    top: 0px;
    left: 2px;
    right: 2px;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
    font-size: 9px;
    line-height: 10px;
    text-align: center;
    overflow-wrap: anywhere;
    color: var(--text);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--lines);
}
div.entry_title.beside_remove { /* room for the x in the corner, the same at both sides */
    left: 11px;
    right: 11px;
}

/* ---- the colour code next to the grid ---- */
div.legend_box { /* the buttons and the colour code below each other, around one middle */
    width: var(--legend-width);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: top;
}
table.legend {
    text-align: left;
    border-spacing: 2px 7px;
    line-height: 13px; /* the examples are as high as the text next to them */
    user-select: none;
    padding: 2px;
    display: inline-block;
    vertical-align: top;
    margin: 10px;
}
th.legend_head {
    font-size: 10pt;
}
td.legend_text, td.legend_note {
    text-align: left;
    font-size: 10pt;
}
td.legend_switch { /* what the left button marks: available or maybe */
    text-align: left;
    font-size: 10pt;
    padding-top: 4px;
}
td.legend_text.low {
    padding: 0;
    height: 3px;
}
td.legend_note {
    line-height: 1.35;
    white-space: normal;
    max-width: 210px;
}
td.legend_gap { /* where the grid has the column of the others */
    border-width: 0;
    padding: 0;
    width: var(--col-other);
}
td.legend_best { /* the outline of the best time, as in the grid: dashed, solid once it is the time of the meeting */
    outline: var(--bw-mark) dashed var(--marker);
    outline-offset: calc(-1 * var(--bw-mark));
}
td.legend_best.settled {
    outline-style: solid;
}

/* ---- the lists of people below the grid ---- */
table.people_list {
    text-align: center;
    border-spacing: 2px 4px;
    user-select: none;
    padding: 2px;
    display: inline-block;
    vertical-align: top;
    margin: 10px 5px 5px 5px;
    visibility: hidden; /* until it has a heading */
}
table.people_list.shown {
    visibility: visible;
}
th.people_head {
    padding: 0;
    text-align: left;
}
tr.people_row {
    font-size: 10pt;
}
td.people_cell {
    text-align: left;
}
a.remove_x, a.remove_x:hover { /* the x after a name */
    text-decoration: none;
}

/* ---- the x at the corner of a box, which closes it ---- */
button.close_x, button.close_x:hover {
    position: absolute;
    height: 22px;
    top: 0px;
    right: -3px;
    font-size: 80%;
    background-color: transparent;
    box-shadow: none;
    border: none;
    padding: 0px 5px 2px 5px;
}