/* The Events tab: the calendar, the Current Leagues / Current Tournaments rows with their drawers and the
   completed-event browser.  Ported from the LOTR GEMP hall (css/gemp-001/hall.css, the event calendar,
   completed-event browser, t12-drawers, events-history-tabs and events-account blocks), kept in a file of its own.
   The leagues' standings tables and league / serie names are styled in hall.css as before. */

/* ---- Event calendar (Events tab) ---- */
.calendar-header {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin: 0.5em 0;
    flex-wrap: wrap;
}

.calendar-title {
    font-size: 130%;
    font-weight: bold;
    min-width: 11em;
    text-align: center;
}

.calendar-legend {
    margin-left: auto;
    font-size: 85%;
}

/* The grid is a stack of week blocks; each week is a 7-column CSS grid whose first row holds the day numbers
   and whose following rows are event lanes (one bar per lane per event segment). */
.calendar-grid {
    width: 100%;
    border-top: 1px solid #444;
    border-left: 1px solid #444;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    background: #222;
}

.calendar-weekday {
    padding: 0.2em;
    text-align: center;
    font-weight: bold;
    border-right: 1px solid #444;
    border-bottom: 1px solid #444;
}

.calendar-week {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: 1.25em;
    row-gap: 2px;
    align-content: start;
    min-height: 5.5em;
    padding-bottom: 0.3em;
}

/* Day backgrounds: a 7-column layer behind the whole week so the cell colour covers every lane */
.calendar-week-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    pointer-events: none;
}

.calendar-day {
    border-right: 1px solid #444;
    border-bottom: 1px solid #444;
}

.calendar-day.other-month {
    background: rgba(0, 0, 0, 0.35);
}

/* today: inverted, a whitish cell with a bold dark number (the event bars keep their own colours on top of it) */
.calendar-day.today {
    background: #e8e5da;
}

.calendar-day-number {
    position: relative;
    font-size: 80%;
    text-align: right;
    color: #aaa;
    padding: 0.15em 0.35em 0.1em 0;
}

.calendar-day-number.other-month {
    opacity: 0.45;
}

.calendar-day-number.today {
    color: #111;
    font-weight: bold;
}

/* today showing in a neighbouring month's leading / trailing days: still inverted, a shade dimmer */
.calendar-day.today.other-month {
    background: #a8a59b;
}

.calendar-day-number.today.other-month {
    opacity: 1;
}

/* One bar per event per week; spans its days via grid-column, sits in its lane via grid-row */
.calendar-bar {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    margin: 0 2px;
    font-size: 75%;
    line-height: 1.2;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    overflow: hidden;
}

.calendar-bar:hover {
    filter: brightness(1.2);
}

.calendar-bar.continues-before {
    margin-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.calendar-bar.continues-after {
    margin-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Events the viewer has joined: bold and a deeper shade of their kind's colour */
.calendar-bar.joined {
    font-weight: bold;
}

.calendar-bar.kind-league.joined { background: #24567d; }
.calendar-bar.kind-tournament.joined { background: #6e3c18; }
.calendar-bar.kind-projected.joined { background: #2f5f2f; }

.calendar-bar.selected {
    outline: 2px solid #fff;
    outline-offset: -2px;
}

/* One part per serie the bar covers this week; widths are set inline as a share of the bar */
.calendar-bar-part {
    flex: 0 0 auto;
    box-sizing: border-box;
    min-width: 0;
    padding: 0 0.3em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A new serie begins at the left edge of this part */
.calendar-bar-part.serie-start {
    border-left: 2px solid rgba(255, 255, 255, 0.8);
    font-style: italic;
}

/* Details panel below the player-facing calendar */
.calendar-details {
    margin-top: 0.8em;
    padding: 0.6em 0.8em;
    border: 1px solid #444;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.35);
}

.calendar-details:empty {
    display: none;
}

.calendar-details-head {
    display: flex;
    align-items: center;
    gap: 0.6em;
    flex-wrap: wrap;
    margin-bottom: 0.4em;
}

.calendar-details-name {
    font-size: 130%;
    font-weight: bold;
}

.calendar-details-joined {
    color: #9fd49f;
    font-weight: bold;
}

.calendar-details-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em 1.5em;
    margin-bottom: 0.4em;
}

.calendar-details-label {
    color: #aaa;
    margin-right: 0.4em;
}

.calendar-details-label::after {
    content: ":";
}

.calendar-details-desc {
    margin: 0.4em 0 0.6em 0;
    padding: 0.4em 0.6em;
    border-left: 3px solid #555;
    max-width: 100%;
    word-wrap: break-word;
}

.calendar-details-series {
    border-collapse: collapse;
    margin: 0.3em 0 0.6em 0;
}

.calendar-details-series th, .calendar-details-series td {
    text-align: left;
    padding: 0.15em 0.8em 0.15em 0;
}

.calendar-details-series th {
    color: #aaa;
    font-weight: normal;
}

.calendar-details-head .calendar-details-go {
    font-size: 80%;
    margin: 0 0.2em;
}

/* Legend swatches */
.calendar-chip {
    display: inline-block;
    font-size: 75%;
    line-height: 1.3;
    margin: 1px 0;
    padding: 0 0.3em;
    border-radius: 3px;
    color: #fff;
    white-space: nowrap;
    cursor: default;
}

.calendar-chip.kind-league, .calendar-bar.kind-league { background: #2f6b9a; }
.calendar-chip.kind-tournament, .calendar-bar.kind-tournament { background: #8a4b1f; }
.calendar-chip.kind-projected, .calendar-bar.kind-projected { background: #3d7a3d; border: 1px dashed #9fd49f; }
.calendar-chip.has-error, .calendar-bar.has-error { background: #8a1f1f; border-color: #f0a0a0; }

/* ---- Completed event browser (Events tab, below each live list; one kind per panel) ---- */
.event-history {
    margin: 0.5em 0 1em 0;
}

.event-history-heading {
    font-weight: bold;
    color: #bbb;
}

/* The header reuses .calendar-header / .calendar-title so it matches the calendar's navigation; the title is also
   the button that opens the month dropdown. */
.event-history-title-wrap {
    position: relative;
    display: inline-block;
}

.event-history-month-title {
    display: inline-block;
    cursor: pointer;
    border-radius: 4px;
    padding: 0.1em 0.4em;
    user-select: none;
}

.event-history-month-title:hover, .event-history-month-title:focus, .event-history-month-title.open {
    background: #333;
    outline: none;
}

.event-history-month-title:focus-visible {
    outline: 1px dotted #aaa;
}

.event-history-caret {
    font-size: 70%;
    margin-left: 0.4em;
    vertical-align: middle;
    color: #aaa;
}

.event-history-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    min-width: 16em;
    max-height: 20em;
    overflow-y: auto;
    margin-top: 0.2em;
    padding: 0.4em;
    background: #222;
    border: 1px solid #666;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    text-align: left;
}

.event-history-dd-status {
    padding: 0.3em;
}

.event-history-dd-year + .event-history-dd-year {
    border-top: 1px solid #444;
    margin-top: 0.3em;
    padding-top: 0.3em;
}

.event-history-dd-year-label {
    font-weight: bold;
    color: #aaa;
    margin-bottom: 0.2em;
}

.event-history-dd-months {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.2em;
}

.event-history-dd-month {
    background: transparent;
    color: inherit;
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 0.2em 0.4em;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.event-history-dd-month:hover, .event-history-dd-month:focus {
    background: #3a3a3a;
    border-color: #666;
    outline: none;
}

.event-history-dd-month.selected {
    border-color: #aaa;
    font-weight: bold;
}

.event-history-status {
    margin: 0.3em 0 0.5em 0;
}

.event-history-hint, .event-history-empty {
    font-style: italic;
    color: #bbb;
}

.event-history-loading {
    font-style: italic;
    color: #d8d8a0;
}

.event-history-error {
    color: #f0a0a0;
    font-weight: bold;
}

.event-history-loaded {
    color: #bbb;
}

table.event-history-table {
    width: 100%;
    border-collapse: collapse;
}

.event-history-table th, .event-history-table td {
    text-align: left;
    padding: 0.25em 0.6em 0.25em 0;
    vertical-align: middle;
    border-bottom: 1px solid #444;
}

.event-history-table th {
    color: #aaa;
    font-weight: normal;
    white-space: nowrap;
}

.event-history-name {
    font-weight: bold;
}

.event-history-dates {
    white-space: nowrap;
}

.event-history-number {
    text-align: right;
    white-space: nowrap;
}

.event-history-detail-cell {
    white-space: nowrap;
}

.event-history-row.expanded > td {
    border-bottom-color: transparent;
    background: #2a2a2a;
}

/* The expansion row holds the same content the live displays render (league tabs, standings tables).  The cell itself
   is flush and unstyled; the slide wrapper is what animates open and shut (its height is driven from JS), and the
   pane inside it is inset on both sides so the page background shows either side of it and it reads as a drawer
   hanging from the (full-width) event row above. */
.event-history-table > tbody > tr.event-history-detail-row > td {
    padding: 0;
    background: transparent;
    border-bottom: 1px solid #444;
}

.event-history-detail-slide {
    overflow: hidden;   /* also keeps the pane's bottom margin inside the measured height */
}

.event-history-detail {
    margin: 0 1.2em 0.6em 1.2em;
    padding: 0.5em 0.8em 0.8em 0.8em;
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-top: none;
    border-radius: 0 0 4px 4px;
}

.event-history-detail table.standings {
    padding-bottom: 0.5em;
}

.event-history-admin-item {
    display: inline-block;
    margin-right: 0.6em;
    white-space: nowrap;
}

.event-history-admin-link {
    font-family: monospace;
}

/* The league code has no URL: it is text an admin selects and pastes, so make a click grab all of it. */
.event-history-admin-text {
    font-family: monospace;
    background: #2a2a2a;
    border: 1px solid #555;
    border-radius: 3px;
    padding: 0 0.3em;
    cursor: text;
    user-select: all;
}

.event-history-admin-none {
    color: #777;
}

/* ==== t12-drawers ==== */
/* Current Leagues / Current Tournaments rows and the calendar preview (eventDrawer.js): each event is a header row
   ([button] title ...... date) and its details hang beneath it in the same inset drawer the completed-events browser
   uses (.event-history-detail).  The header takes a subtle background while its drawer is open, a touch lighter than
   the drawer's #2a2a2a, so it reads as the drawer's handle. */
.event-list {
    margin: 0.4em 0;
}

.event-row {
    margin: 0 0 0.3em 0;
}

.event-row-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3em 0.7em;
    padding: 0.3em 0.5em;
    border-bottom: 1px solid #3a3a3a;
    border-radius: 4px 4px 0 0;
    transition: background-color 0.15s ease;
}

.event-row-header.expanded {
    background: #353535;
    border-bottom-color: #444;
}

/* the details toggle: the same button (size, padding) on the Current Leagues / Tournaments rows, the completed-events
   table and the calendar preview's "Go to ...": the size the Current Leagues rows' button has always had (the row's
   font, jQuery UI's padding) */
.event-row-button {
    flex: none;
}

.event-details-button.ui-button {
    font-size: 1em;
    padding: .4em 1em;
    white-space: nowrap;
    /* in the completed-events table too: not the hall's full-width "td button" */
    width: auto;
    margin: 0 .1em 0 0;
}

/* same size as the old list's .leagueName / .tournamentName */
.event-row-title {
    font-size: 200%;
    font-weight: bolder;
    min-width: 0;
    overflow-wrap: anywhere;
}

.event-row-extras {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
}

/* league code (click selects it) / tournament report link, admins only */
.event-row-code {
    font-family: monospace;
    color: #bbb;
}

.event-row-select {
    cursor: text;
    user-select: all;
}

.event-row-date {
    margin-left: auto;
    white-space: nowrap;
    color: #ccc;
}

.event-drawer-slide {
    overflow: hidden;   /* also keeps the pane's bottom margin inside the measured height */
}

.event-drawer {
    margin: 0 1.2em 0.6em 1.2em;
    padding: 0.5em 0.8em 0.8em 0.8em;
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-top: none;
    border-radius: 0 0 4px 4px;
}

.event-drawer table.standings {
    padding-bottom: 0.5em;
}

.event-drawer-loading {
    font-style: italic;
    color: #d8d8a0;
}

.event-drawer-error {
    color: #f0a0a0;
    font-weight: bold;
}

/* the calendar preview: the same row, its drawer always open, with a little room above it.  overflow-anchor: none
   keeps the browser's scroll anchoring from latching onto a node inside the preview while it is being replaced
   (EventCalendarUI.ScrollKeeper holds the scroll position instead). */
.calendar-preview {
    margin-top: 0.8em;
    overflow-anchor: none;
}

.calendar-scroll-spacer {
    overflow-anchor: none;
    pointer-events: none;
}
/* ==== end t12-drawers ==== */

/* ==== events-history-tabs ==== */
/* Section spacing on the Events sub-tabs, measured on Admin > General Admin (<br><br><hr><br><br> between its
   sections at 13.2px): 36px from a section to the rule, 54px from the rule to the next section's heading.  On the
   Calendar the rule is there from the start, above the details placeholder (events-account block). */
hr.event-section-rule {
    margin: 36px 0 54px 0;
}

#eventDetails.calendar-preview {
    margin-top: 0;
}

.event-tab-intro {
    margin-bottom: 0.4em;
}

/* the completed-events toggle sits where the Current Leagues / Tournaments rows have theirs: first, inset by the
   row header's padding */
.event-history-table th:first-child,
.event-history-table td.event-history-detail-cell {
    padding-left: 0.5em;
    padding-right: 0.7em;
    width: 1%;
}
/* ==== end events-history-tabs ==== */

/* ==== events-account ==== */
/* The Calendar's details area before any event is clicked: a quiet box about the height of the preview's header row
   and its loading line, so the first click replaces it rather than pushing the page down by the rule, the gap and
   the header at once. */
.calendar-details-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 6.1em;
    padding: 0.5em 0.8em;
    border: 1px dashed #4a4a4a;
    border-radius: 4px;
    color: #a0a0a0;
    font-style: italic;
    text-align: center;
}
/* ==== end events-account ==== */


/* ==== this hall ==== */
/* the calendar feed failed: the reason and a Retry under the month header */
.calendar-error {
    margin: 0.6em 0;
    color: #f0a0a0;
    font-weight: bold;
}

.calendar-error .ui-button {
    margin-left: 0.5em;
}

/* "Joined" on a league row (the calendar bolds joined leagues the same way) */
.event-row-joined {
    font-size: 11px;
    font-weight: normal;
    color: #7eb6e8;
    border: 1px solid #567;
    border-radius: 3px;
    padding: 1px 6px;
    white-space: nowrap;
}

/* a #league-… / #tournament-… link to an event that is not in the list any more */
.event-missing {
    color: #ffb36b;
    margin: 6px 0;
}

/* the hall links in a drawer: the event's own link and the viewer's games in it (hallLinks.js) */
.event-links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 4px 0 8px 0;
}

.event-links a,
.event-drawer a,
.event-history-detail a {
    color: #8cc8ff;
}

/* the drawer's own lines (registration, format, collection, standings) keep the hall's text size inside .article */
.event-drawer, .event-history-detail {
    font-size: 13px;
}

.event-drawer .leagueName {
    font-size: 150%;
}

.event-drawer .serieName {
    font-size: 120%;
    margin-top: 0.5em;
}

/* the same rows in the Play > League panel: a smaller title, as that panel is narrow */
.play-league-list .event-row-title {
    font-size: 110%;
}

.play-league-list .event-row-header {
    padding: 0.2em 0.3em;
}

/* the Events pages are wide (the calendar needs the room), with less air above than a Help article */
.article.events-article {
    width: calc(100% - 3em);
    min-width: 560px;
    margin-top: 1.5em;
}