/* Admin availability calendar (schedule/calendar/*).
 *
 * The nxt theme's head.phtml never links styles/style.css (only the legacy "blank"
 * theme does), so this table's cell sizing / list layout never had any CSS on
 * nxt-themed sites: browser-default <ul> bullets + 40px indent showed for every
 * event (item + options rows stacking instead of sitting on one line), and columns
 * had no explicit width, so text wrapped poorly inside them. Ported (near verbatim)
 * from web/styles/style.css.
 */

#calendar,
#calendar td {
    border: 1px solid #333;
    padding: 0;
    vertical-align: top;
}

/* Full-width, fluid columns (7 day columns share the space evenly, the
 * copy/clear "clear-week" spacer column stays narrow). The old "blank" theme
 * used fixed px widths throughout and just let the table sit narrower than
 * the page; here we deliberately stretch to fill the viewport instead, so
 * the inner date-bar/list below are fluid (100%/flex) rather than fixed px. */
#calendar {
    width: 100%;
    table-layout: fixed;
}

#calendar tr.calendarheader td {
    padding: 1px 5px;
    background-color: #000;
    border: 1px solid #000;
    color: #fff;
    font-weight: bold;
}

#calendar td div.date {
    width: 100%;
    box-sizing: border-box;
    font-weight: bold;
    border-bottom: 1px solid #333;
    background-color: #444;
    font-size: 11px;
    padding: 1px 5px;
    color: #fff;
}

#calendar td div.date a {
    float: right;
    margin-right: 3px;
}

#calendar td ul {
    display: flex;
    flex-wrap: wrap;
    margin: 3px;
    padding: 0;
    width: auto;
    list-style: none;
}

#calendar td ul li {
    margin: 0;
    padding: 0;
    line-height: 11px;
    height: 25px;
    margin-bottom: 0;
    border-bottom: 1px solid #ebeced;
    overflow: hidden;
}

#calendar td ul li.options {
    flex: 0 0 13px;
    width: 13px;
    font-size: 10px;
    line-height: 23px;
}

#calendar td ul li.item {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 10px;
    line-height: 23px;
}

#calendar td ul li.item.not-recurring a {
    color: #e91740;
}

#calendar td ul li.item.unmatched a {
    color: #000;
    animation: calendar-unmatched-blink 2s infinite;
}

@keyframes calendar-unmatched-blink {
    0% { opacity: 0.2; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0.2; }
}

#calendar .previous,
#calendar .next {
    background: #e4e4e4;
}

#calendar .today {
    background-color: #b2e9ff;
}

#calendar tr.calendarheader td:last-child,
#calendar .clear-week {
    width: 24px;
    max-width: 24px;
    padding: 0 2px;
}

#calendar .clear-week {
    vertical-align: middle;
}

span.legenda_not_recurring {
    color: #e91740;
}

span.legenda_recurring {
    color: #0073a2;
}

span.legenda_low_availability {
    display: none;
}

.monthpicker {
    float: left;
}

.monthpicker select {
    width: auto;
}

.monthbuttons {
    float: right;
}

/* The legacy jquery.tooltip.js popup (schedule-calendar.js's .event hover) had
 * no styling on nxt either — same missing-style.css cause as everything above.
 * Without this the popup still renders (display:block), just as unstyled text
 * with no background/border/z-index sitting on top of the calendar grid, so it
 * reads as "nothing happened" when you hover. */
#tooltip {
    position: absolute;
    z-index: 3000;
    background-color: #fff;
    padding: 10px;
    border: 1px solid #aaa;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

#tooltip h3,
#tooltip div {
    margin: 0;
}

#tooltip strong {
    color: #0073a2;
    float: left;
    width: 90px;
}